@react-spectrum/s2
Version:
Spectrum 2 UI components in React
641 lines (624 loc) • 28.1 kB
JavaScript
import "./Tabs.css";
import {centerBaseline as $1f4b04be3f24aae3$export$9d7e2342a7e53afa} from "./CenterBaseline.mjs";
import {IconContext as $ac8c32e6775ddd1f$export$a49f528ae1a4d0ed} from "../icons/Icon.mjs";
import {Picker as $0067ea932a992b6a$export$ba25329847403e11, PickerItem as $0067ea932a992b6a$export$d601881f38163e28} from "./TabsPicker.mjs";
import {Text as $8e847109a6ab556d$export$5f1af8db9871e1d6, TextContext as $8e847109a6ab556d$export$9afb8bc826b033ea} from "./Content.mjs";
import {useSpectrumContextProps as $5ce63c423902f47d$export$764f6146fadd77f7} from "../icons/useSpectrumContextProps.mjs";
import {jsx as $8bRfI$jsx, jsxs as $8bRfI$jsxs, Fragment as $8bRfI$Fragment} from "react/jsx-runtime";
import {createContext as $8bRfI$createContext, forwardRef as $8bRfI$forwardRef, useRef as $8bRfI$useRef, useContext as $8bRfI$useContext, useCallback as $8bRfI$useCallback, useMemo as $8bRfI$useMemo, createElement as $8bRfI$createElement, useState as $8bRfI$useState, useEffect as $8bRfI$useEffect} from "react";
import {Provider as $8bRfI$Provider, TabList as $8bRfI$TabList, Tab as $8bRfI$Tab, SelectionIndicator as $8bRfI$SelectionIndicator, TabPanel as $8bRfI$TabPanel, Group as $8bRfI$Group, TabListStateContext as $8bRfI$TabListStateContext, Tabs as $8bRfI$Tabs} from "react-aria-components";
import {CollectionBuilder as $8bRfI$CollectionBuilder} from "@react-aria/collections";
import {useId as $8bRfI$useId, inertValue as $8bRfI$inertValue, useLabels as $8bRfI$useLabels, useEffectEvent as $8bRfI$useEffectEvent, useResizeObserver as $8bRfI$useResizeObserver, useLayoutEffect as $8bRfI$useLayoutEffect} from "@react-aria/utils";
import {useControlledState as $8bRfI$useControlledState} from "@react-stately/utils";
import {useDOMRef as $8bRfI$useDOMRef} from "@react-spectrum/utils";
import {useHasTabbableChild as $8bRfI$useHasTabbableChild} from "@react-aria/focus";
import {useLocale as $8bRfI$useLocale} from "@react-aria/i18n";
/*
* Copyright 2024 Adobe. All rights reserved.
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License. You may obtain a copy
* of the License at http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software distributed under
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/
const $79e2b4a1b34d1592$export$cfa7aa87c26e7d1f = /*#__PURE__*/ (0, $8bRfI$createContext)(null);
const $79e2b4a1b34d1592$var$InternalTabsContext = /*#__PURE__*/ (0, $8bRfI$createContext)({});
const $79e2b4a1b34d1592$var$CollapseContext = /*#__PURE__*/ (0, $8bRfI$createContext)({
showTabs: true,
menuId: '',
valueId: '',
tabs: []
});
const $79e2b4a1b34d1592$var$tabs = function anonymous(props, overrides) {
let rules = " ";
let position = false;
let flexShrink = false;
let matches = (overrides || '').matchAll(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|_6|Z|N|L|F|M|K)[^\s]+/g);
for (let p of matches){
if (p[1] === "_P") position = true;
if (p[1] === "_v") flexShrink = true;
rules += p[0];
}
if (!position) rules += ' _Pc1';
rules += ' sd1';
if (!flexShrink) rules += ' _va1';
rules += ' uk1';
rules += ' ucJ9TBTb1';
rules += ' ud3Euai1';
rules += ' uea1';
rules += ' ugb1';
rules += ' uhd1';
rules += ' uje1';
rules += ' u2NhKxcl1';
rules += ' uic1';
rules += ' -_6BNtrc-c1';
rules += ' vx1';
rules += ' xb1';
rules += ' _xa1';
rules += ' _Fd1';
rules += ' _FnuYUweb1';
rules += ' pt1';
if (props.orientation === "horizontal") rules += ' _ta1';
return rules;
};
const $79e2b4a1b34d1592$export$b2539bed5023c21c = /*#__PURE__*/ (0, $8bRfI$forwardRef)(function Tabs(props, ref) {
[props, ref] = (0, $5ce63c423902f47d$export$764f6146fadd77f7)(props, ref, $79e2b4a1b34d1592$export$cfa7aa87c26e7d1f);
let { density: density = 'regular', isDisabled: isDisabled, disabledKeys: disabledKeys, orientation: orientation = 'horizontal', labelBehavior: labelBehavior = 'show' } = props;
let domRef = (0, $8bRfI$useDOMRef)(ref);
let [value, setValue] = (0, $8bRfI$useControlledState)(props.selectedKey, props.defaultSelectedKey ?? null, props.onSelectionChange);
if (!props['aria-label'] && !props['aria-labelledby']) throw new Error('An aria-label or aria-labelledby prop is required on Tabs for accessibility.');
let tablistRef = (0, $8bRfI$useRef)(null);
return /*#__PURE__*/ (0, $8bRfI$jsx)((0, $8bRfI$Provider), {
values: [
[
$79e2b4a1b34d1592$var$InternalTabsContext,
{
density: density,
isDisabled: isDisabled,
orientation: orientation,
disabledKeys: disabledKeys,
selectedKey: value,
tablistRef: tablistRef,
onSelectionChange: setValue,
labelBehavior: labelBehavior,
'aria-label': props['aria-label'],
'aria-labelledby': props['aria-labelledby']
}
]
],
children: /*#__PURE__*/ (0, $8bRfI$jsx)((0, $8bRfI$CollectionBuilder), {
content: props.children,
children: (collection)=>/*#__PURE__*/ (0, $8bRfI$jsx)($79e2b4a1b34d1592$var$CollapsingTabs, {
...props,
selectedKey: value,
onSelectionChange: setValue,
collection: collection,
containerRef: domRef
})
})
});
});
const $79e2b4a1b34d1592$var$tablist = function anonymous(props) {
let rules = " ";
rules += ' sd1';
if (props.orientation === "horizontal") {
if (props.labelBehavior === "hide") {
if (props.density === "regular") rules += ' Uj1';
else if (props.density === "compact") rules += ' Ul1';
} else if (props.density === "regular") rules += ' Up1';
else if (props.density === "compact") rules += ' Uj1';
}
if (props.orientation === "horizontal") {
if (props.labelBehavior === "hide") {
if (props.density === "regular") rules += ' qj1';
else if (props.density === "compact") rules += ' ql1';
} else if (props.density === "regular") rules += ' qp1';
else if (props.density === "compact") rules += ' qj1';
}
if (props.orientation === "vertical") rules += ' _ta1';
if (props.orientation === "vertical") rules += ' Hz1';
if (props.orientation === "vertical") rules += ' Ix1';
rules += ' Nq1';
return rules;
};
const $79e2b4a1b34d1592$var$tablistWrapper = function anonymous(props, overrides) {
let rules = " ";
let position = false;
let minWidth = false;
let flexShrink = false;
let flexGrow = false;
let matches = (overrides || '').matchAll(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|_6|Z|N|L)[^\s]+/g);
for (let p of matches){
if (p[1] === "_P") position = true;
if (p[1] === "N") minWidth = true;
if (p[1] === "_v") flexShrink = true;
if (p[1] === "_u") flexGrow = true;
rules += p[0];
}
if (!position) rules += ' _Pc1';
if (!minWidth) rules += ' Na1';
if (!flexShrink) rules += ' _va1';
if (!flexGrow) rules += ' _ua1';
return rules;
};
function $79e2b4a1b34d1592$export$e51a686c67fdaa2d(props) {
let { showTabs: showTabs, menuId: menuId, valueId: valueId, tabs: tabs, listRef: listRef, onSelectionChange: onSelectionChange, ariaLabel: ariaLabel, ariaDescribedBy: ariaDescribedBy } = (0, $8bRfI$useContext)($79e2b4a1b34d1592$var$CollapseContext) ?? {};
let { density: density, orientation: orientation, labelBehavior: labelBehavior } = (0, $8bRfI$useContext)($79e2b4a1b34d1592$var$InternalTabsContext);
if (showTabs) return /*#__PURE__*/ (0, $8bRfI$jsx)($79e2b4a1b34d1592$var$TabListInner, {
...props
});
return /*#__PURE__*/ (0, $8bRfI$jsxs)("div", {
className: $79e2b4a1b34d1592$var$tablistWrapper(null, props.styles),
children: [
listRef && /*#__PURE__*/ (0, $8bRfI$jsx)("div", {
className: $79e2b4a1b34d1592$var$tablist({
orientation: orientation,
labelBehavior: labelBehavior,
density: density
}),
children: /*#__PURE__*/ (0, $8bRfI$jsx)($79e2b4a1b34d1592$var$HiddenTabs, {
items: tabs,
density: density,
listRef: listRef
})
}),
/*#__PURE__*/ (0, $8bRfI$jsx)($79e2b4a1b34d1592$var$TabsMenu, {
id: menuId,
valueId: valueId,
items: tabs,
onSelectionChange: onSelectionChange,
"aria-label": ariaLabel,
"aria-describedby": ariaDescribedBy
})
]
});
}
function $79e2b4a1b34d1592$var$TabListInner(props) {
let { tablistRef: tablistRef, orientation: orientation, density: density, labelBehavior: labelBehavior, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = (0, $8bRfI$useContext)($79e2b4a1b34d1592$var$InternalTabsContext) ?? {};
let { tabs: tabs, listRef: listRef } = (0, $8bRfI$useContext)($79e2b4a1b34d1592$var$CollapseContext) ?? {};
return /*#__PURE__*/ (0, $8bRfI$jsxs)("div", {
style: props.UNSAFE_style,
className: (props.UNSAFE_className || '') + $79e2b4a1b34d1592$var$tablistWrapper(null, props.styles),
children: [
listRef && /*#__PURE__*/ (0, $8bRfI$jsx)("div", {
className: $79e2b4a1b34d1592$var$tablist({
orientation: orientation,
labelBehavior: labelBehavior,
density: density
}),
children: /*#__PURE__*/ (0, $8bRfI$jsx)($79e2b4a1b34d1592$var$HiddenTabs, {
items: tabs,
density: density,
listRef: listRef
})
}),
/*#__PURE__*/ (0, $8bRfI$jsx)((0, $8bRfI$TabList), {
...props,
"aria-label": ariaLabel,
"aria-labelledby": ariaLabelledBy,
ref: tablistRef,
className: (renderProps)=>$79e2b4a1b34d1592$var$tablist({
...renderProps,
labelBehavior: labelBehavior,
density: density
})
})
]
});
}
const $79e2b4a1b34d1592$var$selectedIndicator = function anonymous(props) {
let rules = " ";
rules += ' _Pa1';
if (props.isDisabled) rules += ' gH1';
else rules += ' g01';
if (props.isDisabled) rules += ' gld1';
else rules += ' gle1';
if (props.orientation === "horizontal") rules += ' FLvNfn1';
else rules += ' Fb1';
if (props.orientation === "vertical") rules += ' ZLvNfn1';
else rules += ' Za1';
rules += ' _qg1';
rules += ' YIRyJjb1';
rules += ' Ydklsgce1';
rules += ' Xc1';
rules += ' _2a1';
rules += ' _lr1';
if (props.orientation === "vertical") rules += ' Wr1';
if (props.orientation === "horizontal") rules += ' _Er1';
if (props.orientation === "vertical") rules += ' _Aa1';
rules += ' _je1';
rules += ' og1';
rules += ' ng1';
rules += ' kg1';
rules += ' jg1';
return rules;
};
const $79e2b4a1b34d1592$var$tab = function anonymous(props, overrides) {
let rules = " ";
let position = false;
let flexShrink = false;
let matches = (overrides || '').matchAll(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|_6|Z|N|L)[^\s]+/g);
for (let p of matches){
if (p[1] === "_P") position = true;
if (p[1] === "_v") flexShrink = true;
rules += p[0];
}
if (props.isFocusVisible) rules += ' _Lf1';
else rules += ' _Le1';
rules += ' Oh1';
rules += ' Olc1';
rules += ' _Mc1';
rules += ' _Kd1';
rules += ' sd1';
if (props.isDisabled) rules += ' pp1';
else if (props.isSelected) {
if (props.isPressed) rules += ' po1';
else if (props.isFocusVisible) rules += ' po1';
else if (props.isHovered) rules += ' po1';
else rules += ' pt1';
} else {
if (props.isPressed) rules += ' pt1';
else if (props.isFocusVisible) rules += ' pt1';
else if (props.isHovered) rules += ' pt1';
else rules += ' pv1';
}
if (props.isDisabled) rules += ' plc1';
else if (props.isSelected) rules += ' pld1';
rules += ' oa1';
rules += ' na1';
rules += ' ka1';
rules += ' ja1';
rules += ' Uc1';
rules += ' Usd1';
rules += ' qc1';
rules += ' qsd1';
if (props.orientation === "horizontal") {
if (props.density === "regular") rules += ' Fz1';
else if (props.density === "compact") rules += ' Fx1';
}
if (props.orientation === "vertical") {
if (props.density === "regular") rules += ' Mk1';
else if (props.density === "compact") rules += ' Mi1';
}
rules += ' eb1';
if (!position) rules += ' _Pc1';
rules += ' ri1';
rules += ' _Xa1';
if (!flexShrink) rules += ' _va1';
rules += ' Yd1';
rules += ' Xb1';
rules += ' _2b1';
if (props.labelBehavior === "hide") rules += ' SssxDec1';
if (props.labelBehavior === "hide") rules += ' RssxDec1';
rules += ' __ca1';
return rules;
};
const $79e2b4a1b34d1592$var$icon = " sb1 _va1 -_8sjo0b-t5ZbAob1";
function $79e2b4a1b34d1592$export$3e41faf802a29e71(props1) {
let { density: density, orientation: orientation, labelBehavior: labelBehavior } = (0, $8bRfI$useContext)($79e2b4a1b34d1592$var$InternalTabsContext) ?? {};
let contentId = (0, $8bRfI$useId)();
let ariaLabelledBy = props1['aria-labelledby'] || '';
return /*#__PURE__*/ (0, $8bRfI$jsx)((0, $8bRfI$Tab), {
...props1,
// @ts-ignore
originalProps: props1,
"aria-labelledby": `${labelBehavior === 'hide' ? contentId : ''} ${ariaLabelledBy}`,
style: props1.UNSAFE_style,
className: (renderProps)=>(props1.UNSAFE_className || '') + $79e2b4a1b34d1592$var$tab({
...renderProps,
density: density,
labelBehavior: labelBehavior,
orientation: orientation
}, props1.styles),
children: ({ isMenu: // @ts-ignore
isMenu, isDisabled: isDisabled })=>{
if (isMenu) return props1.children;
else return /*#__PURE__*/ (0, $8bRfI$jsx)((0, $8bRfI$Provider), {
values: [
[
(0, $8e847109a6ab556d$export$9afb8bc826b033ea),
{
id: contentId,
styles: function anonymous(props) {
let rules = " ";
rules += ' _Jb1';
if (props.labelBehavior === "hide") rules += ' sk1';
return rules;
}({
labelBehavior: labelBehavior
})
}
],
[
(0, $ac8c32e6775ddd1f$export$a49f528ae1a4d0ed),
{
render: (0, $1f4b04be3f24aae3$export$9d7e2342a7e53afa)({
slot: 'icon',
styles: " _Ja1"
}),
styles: $79e2b4a1b34d1592$var$icon
}
]
],
children: /*#__PURE__*/ (0, $8bRfI$jsx)($79e2b4a1b34d1592$var$TabInner, {
orientation: orientation,
isDisabled: isDisabled,
children: typeof props1.children === 'string' ? /*#__PURE__*/ (0, $8bRfI$jsx)((0, $8e847109a6ab556d$export$5f1af8db9871e1d6), {
children: props1.children
}) : props1.children
})
});
}
});
}
function $79e2b4a1b34d1592$var$TabInner({ isDisabled: isDisabled, orientation: orientation, children: children }) {
let ref = (0, $8bRfI$useRef)(null);
let isHidden = (0, $8bRfI$useContext)($79e2b4a1b34d1592$var$HiddenTabsContext);
return /*#__PURE__*/ (0, $8bRfI$jsxs)((0, $8bRfI$Fragment), {
children: [
!isHidden && /*#__PURE__*/ (0, $8bRfI$jsx)((0, $8bRfI$SelectionIndicator), {
ref: ref,
className: $79e2b4a1b34d1592$var$selectedIndicator({
isDisabled: isDisabled,
orientation: orientation
})
}),
children
]
});
}
const $79e2b4a1b34d1592$var$tabPanel = function anonymous(props, overrides) {
let rules = " ";
let marginTop = false;
let flexGrow = false;
let minHeight = false;
let matches = (overrides || '').matchAll(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|_6|Z|N|L|F|M|K)[^\s]+/g);
for (let p of matches){
if (p[1] === "J") marginTop = true;
if (p[1] === "_u") flexGrow = true;
if (p[1] === "M") minHeight = true;
rules += p[0];
}
if (props.isFocusVisible) rules += ' _Lf1';
else rules += ' _Le1';
rules += ' Oh1';
rules += ' Olc1';
rules += ' _Mc1';
rules += ' _Kd1';
if (!marginTop) rules += ' Js1';
rules += ' pt1';
if (!flexGrow) rules += ' _ub1';
if (!minHeight) rules += ' Ma1';
if (props.isInert) rules += ' sk1';
else rules += ' sb1';
return rules;
};
function $79e2b4a1b34d1592$export$3d96ec278d3efce4(props) {
let { showTabs: showTabs } = (0, $8bRfI$useContext)($79e2b4a1b34d1592$var$CollapseContext);
let { selectedKey: selectedKey } = (0, $8bRfI$useContext)($79e2b4a1b34d1592$var$InternalTabsContext);
if (showTabs) return /*#__PURE__*/ (0, $8bRfI$jsx)((0, $8bRfI$TabPanel), {
...props,
style: props.UNSAFE_style,
className: (renderProps)=>(props.UNSAFE_className ?? '') + $79e2b4a1b34d1592$var$tabPanel(renderProps, props.styles)
});
if (props.id !== selectedKey) return null;
return /*#__PURE__*/ (0, $8bRfI$jsx)($79e2b4a1b34d1592$var$CollapsedTabPanel, {
...props
});
}
function $79e2b4a1b34d1592$var$CollapsedTabPanel(props) {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
let { UNSAFE_style: UNSAFE_style, UNSAFE_className: UNSAFE_className = '', id: id, shouldForceMount: shouldForceMount, ...otherProps } = props;
let { menuId: menuId, valueId: valueId } = (0, $8bRfI$useContext)($79e2b4a1b34d1592$var$CollapseContext);
let ref = (0, $8bRfI$useRef)(null);
let tabIndex = (0, $8bRfI$useHasTabbableChild)(ref) ? undefined : 0;
return /*#__PURE__*/ (0, $8bRfI$jsx)((0, $8bRfI$Group), {
...otherProps,
ref: ref,
"aria-labelledby": menuId + ' ' + valueId,
tabIndex: tabIndex,
style: UNSAFE_style,
className: (renderProps)=>UNSAFE_className + $79e2b4a1b34d1592$var$tabPanel(renderProps, props.styles)
});
}
function $79e2b4a1b34d1592$var$isEveryTabDisabled(collection, disabledKeys) {
let testKey = null;
if (collection && collection.size > 0) {
testKey = collection.getFirstKey();
let index = 0;
while(testKey && index < collection.size){
// We have to check if the item in the collection has a key in disabledKeys or has the isDisabled prop set directly on it
if (!disabledKeys.has(testKey) && !collection.getItem(testKey)?.props?.isDisabled) return false;
testKey = collection.getKeyAfter(testKey);
index++;
}
return true;
}
return false;
}
const $79e2b4a1b34d1592$var$HiddenTabsContext = /*#__PURE__*/ (0, $8bRfI$createContext)(false);
let $79e2b4a1b34d1592$var$HiddenTabs = function(props) {
let { listRef: listRef, items: items = [], size: size, density: density } = props;
return /*#__PURE__*/ (0, $8bRfI$jsx)("div", {
// @ts-ignore
inert: (0, $8bRfI$inertValue)(true),
ref: listRef,
className: " s40ub4c1 _t40ub4c1 U40ub4c1 q40ub4c1 _w40ub4c1 _Pa1 Wr1 _lr1 _Ar1 _zr1 _6b1 _Nc1 Pc1 _Ia1",
children: /*#__PURE__*/ (0, $8bRfI$jsx)($79e2b4a1b34d1592$var$HiddenTabsContext.Provider, {
value: true,
children: items.map((item)=>{
// pull off individual props as an allow list, don't want refs or other props getting through
return /*#__PURE__*/ (0, $8bRfI$jsx)("div", {
"data-hidden-tab": true,
style: item.props.UNSAFE_style,
className: item.props.className({
size: size,
density: density
}),
children: item.props.children({
size: size,
density: density
})
}, item.key);
})
})
});
};
let $79e2b4a1b34d1592$var$TabsMenu = (props1)=>{
let { id: id, items: items, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, valueId: valueId } = props1;
let { density: density, onSelectionChange: _onSelectionChange, selectedKey: selectedKey, isDisabled: isDisabled, disabledKeys: disabledKeys, labelBehavior: labelBehavior } = (0, $8bRfI$useContext)($79e2b4a1b34d1592$var$InternalTabsContext);
let onSelectionChange = (0, $8bRfI$useCallback)((key)=>{
if (key != null) _onSelectionChange?.(key);
}, [
_onSelectionChange
]);
let state = (0, $8bRfI$useContext)((0, $8bRfI$TabListStateContext));
let allKeysDisabled = (0, $8bRfI$useMemo)(()=>{
return $79e2b4a1b34d1592$var$isEveryTabDisabled(state?.collection, disabledKeys ? new Set(disabledKeys) : new Set());
}, [
state?.collection,
disabledKeys
]);
let labelProps = (0, $8bRfI$useLabels)({
id: id,
'aria-label': ariaLabel,
'aria-labelledby': ariaLabelledBy
});
return /*#__PURE__*/ (0, $8bRfI$jsx)("div", {
className: function anonymous(props) {
let rules = " ";
rules += ' sd1';
rules += ' _va1';
rules += ' eb1';
if (props.density === "regular") rules += ' Fz1';
else if (props.density === "compact") rules += ' Fx1';
return rules;
}({
density: density
}),
children: /*#__PURE__*/ (0, $8bRfI$jsx)((0, $0067ea932a992b6a$export$ba25329847403e11), {
id: id,
valueId: valueId,
...labelProps,
"aria-describedby": props1['aria-describedby'],
"aria-details": props1['aria-details'],
isDisabled: isDisabled || allKeysDisabled,
density: density,
labelBehavior: labelBehavior,
items: items,
disabledKeys: disabledKeys,
selectedKey: selectedKey,
onSelectionChange: onSelectionChange,
children: (item)=>{
return /*#__PURE__*/ (0, $8bRfI$createElement)((0, $0067ea932a992b6a$export$d601881f38163e28), {
...item.props.originalProps,
isDisabled: isDisabled || allKeysDisabled,
key: item.key
}, item.props.children({
density: density,
isMenu: true
}));
}
})
});
};
let $79e2b4a1b34d1592$var$CollapsingTabs = ({ collection: collection, containerRef: containerRef, ...props })=>{
let { orientation: orientation = 'horizontal', onSelectionChange: onSelectionChange } = props;
let [showItems, _setShowItems] = (0, $8bRfI$useState)(true);
showItems = orientation === 'vertical' ? true : showItems;
let setShowItems = (0, $8bRfI$useCallback)((value)=>{
if (orientation === 'vertical') // if orientation is vertical, we always show the items
_setShowItems(true);
else _setShowItems(value);
}, [
orientation
]);
let { direction: direction } = (0, $8bRfI$useLocale)();
let children = (0, $8bRfI$useMemo)(()=>[
...collection
], [
collection
]);
let listRef = (0, $8bRfI$useRef)(null);
let updateOverflow = ()=>{
if (orientation === 'vertical' || !listRef.current || !containerRef?.current) return;
let container = listRef.current;
let containerRect = container.getBoundingClientRect();
let tabs = container.querySelectorAll('[data-hidden-tab]');
let lastTab = tabs[tabs.length - 1];
let lastTabRect = lastTab.getBoundingClientRect();
if (direction === 'ltr') setShowItems?.(lastTabRect.right <= containerRect.right);
else setShowItems?.(lastTabRect.left >= containerRect.left);
};
let updateOverflowEffect = (0, $8bRfI$useEffectEvent)(updateOverflow);
(0, $8bRfI$useResizeObserver)({
ref: containerRef,
onResize: updateOverflow
});
(0, $8bRfI$useLayoutEffect)(()=>{
if (collection.size > 0) queueMicrotask(updateOverflowEffect);
}, [
collection.size
]);
// start with null so that the first render won't have a flicker
let prevOrientation = (0, $8bRfI$useRef)(null);
(0, $8bRfI$useLayoutEffect)(()=>{
if (collection.size > 0 && prevOrientation.current !== orientation) updateOverflowEffect();
prevOrientation.current = orientation;
}, [
collection.size,
orientation
]);
(0, $8bRfI$useEffect)(()=>{
// Recalculate visible tags when fonts are loaded.
document.fonts?.ready.then(()=>updateOverflowEffect());
}, []);
let menuId = (0, $8bRfI$useId)();
let valueId = (0, $8bRfI$useId)();
let contents;
if (showItems) contents = /*#__PURE__*/ (0, $8bRfI$jsx)((0, $8bRfI$Tabs), {
...props,
className: "",
style: {
display: 'contents'
},
children: props.children
});
else contents = /*#__PURE__*/ (0, $8bRfI$jsx)((0, $8bRfI$Fragment), {
children: /*#__PURE__*/ (0, $8bRfI$jsx)($79e2b4a1b34d1592$var$CollapseContext.Provider, {
value: {
showTabs: false,
tabs: children,
menuId: menuId,
valueId: valueId,
listRef: listRef,
onSelectionChange: onSelectionChange,
ariaLabel: props['aria-label'],
ariaDescribedBy: props['aria-labelledby']
},
children: props.children
})
});
return /*#__PURE__*/ (0, $8bRfI$jsx)("div", {
style: props.UNSAFE_style,
className: (props.UNSAFE_className || '') + $79e2b4a1b34d1592$var$tabs({
orientation: orientation
}, props.styles),
ref: containerRef,
children: /*#__PURE__*/ (0, $8bRfI$jsx)($79e2b4a1b34d1592$var$CollapseContext.Provider, {
value: {
showTabs: true,
menuId: menuId,
valueId: valueId,
tabs: children,
listRef: listRef
},
children: contents
})
});
};
export {$79e2b4a1b34d1592$export$cfa7aa87c26e7d1f as TabsContext, $79e2b4a1b34d1592$export$b2539bed5023c21c as Tabs, $79e2b4a1b34d1592$export$e51a686c67fdaa2d as TabList, $79e2b4a1b34d1592$export$3e41faf802a29e71 as Tab, $79e2b4a1b34d1592$export$3d96ec278d3efce4 as TabPanel};
//# sourceMappingURL=Tabs.mjs.map