Files F101044090

TabsUnstyled.js
No OneTemporary
Actions

Subscribers

None

File Metadata

Created: Wed, Feb 5, 03:44

TabsUnstyled.js
View Options

	import _extends from "@babel/runtime/helpers/esm/extends";
	import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
	import * as React from 'react';
	import PropTypes from 'prop-types';
	import { useSlotProps } from '../utils';
	import composeClasses from '../composeClasses';
	import { getTabsUnstyledUtilityClass } from './tabsUnstyledClasses';
	import useTabs from './useTabs';
	import Context from './TabsContext';
	import { jsx as _jsx } from "react/jsx-runtime";
	var useUtilityClasses = function useUtilityClasses(ownerState) {
	var orientation = ownerState.orientation;
	var slots = {
	root: ['root', orientation]
	};
	return composeClasses(slots, getTabsUnstyledUtilityClass, {});
	};

	/**
	*
	* Demos:
	*
	* - [Unstyled Tabs](https://mui.com/base/react-tabs/)
	*
	* API:
	*
	* - [TabsUnstyled API](https://mui.com/base/api/tabs-unstyled/)
	*/
	var TabsUnstyled = /#__PURE__/React.forwardRef(function (props, ref) {
	var _ref;
	var children = props.children,
	valueProp = props.value,
	defaultValue = props.defaultValue,
	_props$orientation = props.orientation,
	orientation = _props$orientation === void 0 ? 'horizontal' : _props$orientation,
	_props$direction = props.direction,
	direction = _props$direction === void 0 ? 'ltr' : _props$direction,
	component = props.component,
	onChange = props.onChange,
	selectionFollowsFocus = props.selectionFollowsFocus,
	_props$slotProps = props.slotProps,
	slotProps = _props$slotProps === void 0 ? {} : _props$slotProps,
	_props$slots = props.slots,
	slots = _props$slots === void 0 ? {} : _props$slots,
	other = _objectWithoutProperties(props, ["children", "value", "defaultValue", "orientation", "direction", "component", "onChange", "selectionFollowsFocus", "slotProps", "slots"]);
	var _useTabs = useTabs(props),
	tabsContextValue = _useTabs.tabsContextValue;
	var ownerState = _extends({}, props, {
	orientation: orientation,
	direction: direction
	});
	var classes = useUtilityClasses(ownerState);
	var TabsRoot = (_ref = component != null ? component : slots.root) != null ? _ref : 'div';
	var tabsRootProps = useSlotProps({
	elementType: TabsRoot,
	externalSlotProps: slotProps.root,
	externalForwardedProps: other,
	additionalProps: {
	ref: ref
	},
	ownerState: ownerState,
	className: classes.root
	});
	return /#__PURE__/_jsx(TabsRoot, _extends({}, tabsRootProps, {
	children: /#__PURE__/_jsx(Context.Provider, {
	value: tabsContextValue,
	children: children
	})
	}));
	});
	process.env.NODE_ENV !== "production" ? TabsUnstyled.propTypes /* remove-proptypes */ = {
	// ----------------------------- Warning --------------------------------
	// \| These PropTypes are generated from the TypeScript type definitions \|
	// \| To update them edit TypeScript types and run "yarn proptypes" \|
	// ----------------------------------------------------------------------
	/**
	* The content of the component.
	*/
	children: PropTypes.node,
	/**
	* The component used for the root node.
	* Either a string to use a HTML element or a component.
	*/
	component: PropTypes.elementType,
	/**
	* The default value. Use when the component is not controlled.
	*/
	defaultValue: PropTypes.oneOfType([PropTypes.oneOf([false]), PropTypes.number, PropTypes.string]),
	/**
	* The direction of the text.
	* @default 'ltr'
	*/
	direction: PropTypes.oneOf(['ltr', 'rtl']),
	/**
	* Callback invoked when new value is being set.
	*/
	onChange: PropTypes.func,
	/**
	* The component orientation (layout flow direction).
	* @default 'horizontal'
	*/
	orientation: PropTypes.oneOf(['horizontal', 'vertical']),
	/**
	* If `true` the selected tab changes on focus. Otherwise it only
	* changes on activation.
	*/
	selectionFollowsFocus: PropTypes.bool,
	/**
	* The props used for each slot inside the Tabs.
	* @default {}
	*/
	slotProps: PropTypes.shape({
	root: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
	}),
	/**
	* The components used for each slot inside the Tabs.
	* Either a string to use a HTML element or a component.
	* @default {}
	*/
	slots: PropTypes.shape({
	root: PropTypes.elementType
	}),
	/**
	* The value of the currently selected `Tab`.
	* If you don't want any selected `Tab`, you can set this prop to `false`.
	*/
	value: PropTypes.oneOfType([PropTypes.oneOf([false]), PropTypes.number, PropTypes.string])
	} : void 0;
	export default TabsUnstyled;

Event Timeline