@react-spectrum/s2
Version:
Spectrum 2 UI components in React
1 lines • 30.5 kB
Source Map (JSON)
{"mappings":";;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;;;AAoEM,MAAM,0DAAc,CAAA,GAAA,oBAAY,EAAiE;AACxG,MAAM,0DAAsB,CAAA,GAAA,oBAAY,EAAsB,CAAC;AAC/D,MAAM,sDAAkB,CAAA,GAAA,oBAAY,EAAE;IACpC,UAAU;IACV,QAAQ;IACR,SAAS;AACX;AAEA,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAeC,MAAM,0DAAO,CAAA,GAAA,iBAAS,EAAE,SAAS,KAAK,KAAgB,EAAE,GAA2B;IACxF,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,WACF,UAAU,uBACV,UAAU,gBACV,YAAY,eACZ,cAAc,6BACd,gBAAgB,QACjB,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IACvB,IAAI,CAAC,OAAO,SAAS,GAAG,CAAA,GAAA,yBAAiB,EAAE,MAAM,WAAW,EAAE,MAAM,kBAAkB,IAAI,MAAO,MAAM,iBAAiB;IAExH,IAAI,CAAC,KAAK,CAAC,aAAa,IAAI,CAAC,KAAK,CAAC,kBAAkB,EACnD,MAAM,IAAI,MAAM;IAGlB,qBACE,gBAAC,CAAA,GAAA,eAAO;QACN,QAAQ;YACN;gBAAC;gBAAqB;6BACpB;gCACA;iCACA;kCACA;oBACA,aAAa;oBACb,mBAAmB;mCACnB;oBACA,cAAc,KAAK,CAAC,aAAa;oBACjC,mBAAmB,KAAK,CAAC,kBAAkB;gBAC7C;aAAE;SACH;kBACD,cAAA,gBAAC,CAAA,GAAA,wBAAgB;YAAE,SAAS,MAAM,QAAQ;sBACvC,CAAA,2BACC,gBAAC;oBACE,GAAG,KAAK;oBACT,aAAa;oBACb,mBAAmB;oBACnB,YAAY;oBACZ,cAAc;;;;AAK1B;AAEA,MAAM;;;;;;;;;;;;;;;;;;;;;;;;AAuCC,SAAS,0CAA0B,KAAsB;IAC9D,IAAI,YAAC,QAAQ,EAAC,GAAG,CAAA,GAAA,iBAAS,EAAE,0CAAoB,CAAC;IAEjD,IAAI,UACF,qBAAO,gBAAC;QAAc,GAAG,KAAK;;IAEhC,OAAO;AACT;AAEA,SAAS,mCAA+B,MAAsB;IAC5D,IAAI,WAAC,OAAO,cAAE,UAAU,gBAAE,YAAY,eAAE,WAAW,iBAAE,aAAa,EAAE,cAAc,SAAS,EAAE,mBAAmB,cAAc,EAAC,GAAG,CAAA,GAAA,iBAAS,EAAE,8CAAwB,CAAC;IACtK,IAAI,QAAQ,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,0BAAkB;IACzC,IAAI,CAAC,aAAa,eAAe,GAAG,CAAA,GAAA,eAAO,EAA2B;IACtE,IAAI,aAAa,CAAA,GAAA,aAAK,EAAkB;IAExC,CAAA,GAAA,sBAAc,EAAE;QACd,IAAI,YAAY,SAAS;YACvB,IAAI,MAA0B,WAAW,OAAO,CAAC,aAAa,CAAC;YAE/D,IAAI,OAAO,MACT,eAAe;QAEnB;IACF,GAAG;QAAC;QAAY,OAAO,cAAc;KAAI;IAEzC,qBACE,iBAAC;QACC,OAAO,OAAM,YAAY;QACzB,WAAW,AAAC,CAAA,OAAM,gBAAgB,IAAI,EAAC,IAAK;;;;;;;;;;UAAqD,MAAM,OAAM,MAAM;;YAClH,gBAAgB,4BACf,gBAAC;gBAAQ,cAAc;gBAAc,YAAY;gBAAY,aAAa;gBAAa,aAAa;gBAAa,SAAS;gBAAO,SAAS;;0BAC5I,gBAAC,CAAA,GAAA,cAAS;gBACP,GAAG,MAAK;gBACT,cAAY;gBACZ,mBAAiB;gBACjB,KAAK;gBACL,WAAW,CAAA,cAAe,8BAAQ;wBAAC,GAAG,WAAW;uCAAE;iCAAe;oBAAO;;YAC1E,gBAAgB,8BACf,gBAAC;gBAAQ,cAAc;gBAAc,YAAY;gBAAY,aAAa;gBAAa,aAAa;gBAAa,SAAS;gBAAO,SAAS;;;;AAGlJ;AAWA,MAAM;;;;;;;;;;;;;;;;;;;AA+BN,SAAS,8BAA0B,KAAsB;IACvD,IAAI,gBACF,YAAY,EACZ,YAAY,cAAc,eAC1B,WAAW,eACX,WAAW,WACX,OAAO,WACP,OAAO,EACR,GAAG;IACJ,IAAI,aAAC,SAAS,EAAC,GAAG,CAAA,GAAA,gBAAQ;IAC1B,IAAI,QAAQ,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,0BAAkB;IAEzC,+FAA+F;IAC/F,IAAI,CAAC,YAAY,cAAc,GAAG,CAAA,GAAA,eAAO,EAAW;IACpD,CAAA,GAAA,gBAAQ,EAAE;QACR,IAAI,aAAa,kBAAkB,wCAAkB,OAAO,YAAY,eAAe,IAAI,IAAI,gBAAgB,IAAI,IAAI;QACvH,cAAc;IAChB,GAAG;QAAC,OAAO;QAAY;QAAc;QAAgB;KAAc;IAEnE,IAAI,CAAC,OAAO,SAAS,GAAG,CAAA,GAAA,eAAO,EAA0F;QACvH,WAAW;QACX,OAAO;QACP,QAAQ;IACV;IAEA,IAAI,WAAW,CAAA,GAAA,kBAAU,EAAE;QACzB,IAAI,aAAa;YACf,IAAI,WAAqG;gBACvG,WAAW;gBACX,OAAO;gBACP,QAAQ;YACV;YAEA,8JAA8J;YAC9J,IAAI,SAAS,cAAc,QAAQ,KAAM,CAAA,AAAC,YAAY,YAAY,EAAkB,cAAc,YAAY,WAAW,GAAG,YAAY,UAAU,AAAD,IAAK,YAAY,UAAU;YAC5K,SAAS,SAAS,GAAG,gBAAgB,aACjC,CAAC,WAAW,EAAE,YAAY,SAAS,CAAC,GAAG,CAAC,GACxC,CAAC,WAAW,EAAE,OAAO,GAAG,CAAC;YAE7B,IAAI,gBAAgB,cAClB,SAAS,KAAK,GAAG,GAAG,YAAY,WAAW,CAAC,EAAE,CAAC;iBAE/C,SAAS,MAAM,GAAG,GAAG,YAAY,YAAY,CAAC,EAAE,CAAC;YAEnD,SAAS;QACX;IACF,GAAG;QAAC;QAAW;QAAU;QAAa;KAAY;IAElD,CAAA,GAAA,sBAAc,EAAE;QACd;IACF,GAAG;QAAC;QAAU,OAAO,cAAc;QAAK;QAAS;QAAW;QAAa;KAAQ;IAEjF,qBACE,gBAAC;QAAI,OAAO;YAAC,GAAG,KAAK;QAAA;QAAG,WAAW,wCAAkB;wBAAC;yBAAY;QAAW;;AAEjF;AAEA,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCN,MAAM;AASC,SAAS,0CAAI,MAAe;IACjC,IAAI,WAAC,OAAO,iBAAE,aAAa,EAAC,GAAG,CAAA,GAAA,iBAAS,EAAE,8CAAwB,CAAC;IAEnE,IAAI,YAAY,CAAA,GAAA,YAAI;IACpB,IAAI,iBAAiB,MAAK,CAAC,kBAAkB,IAAI;IACjD,qBACE,gBAAC,CAAA,GAAA,UAAK;QACH,GAAG,MAAK;QACT,aAAa;QACb,eAAe;QACf,mBAAiB,GAAG,kBAAkB,SAAS,YAAY,GAAG,CAAC,EAAE,gBAAgB;QACjF,OAAO,OAAM,YAAY;QACzB,WAAW,CAAA,cAAe,AAAC,CAAA,OAAM,gBAAgB,IAAI,EAAC,IAAK,0BAAI;gBAAC,GAAG,WAAW;yBAAE;+BAAS;YAAa,GAAG,OAAM,MAAM;kBACpH,CAAC,UACE,aAAa;QACb,MAAM,EACP;YACD,IAAI,QACF,OAAO,OAAM,QAAQ;iBAErB,qBACE,gBAAC,CAAA,GAAA,eAAO;gBACN,QAAQ;oBACN;wBAAC,CAAA,GAAA,yCAAU;wBAAG;4BACZ,IAAI;4BACJ,QACE;;;;;8BAOG;+CAAC;4BAAa;wBACrB;qBAAE;oBACF;wBAAC,CAAA,GAAA,yCAAU;wBAAG;4BACZ,QAAQ,CAAA,GAAA,yCAAa,EAAE;gCAAC,MAAM;gCAAQ,MAAM;4BAAmB;4BAC/D,QAAQ;wBACV;qBAAE;iBACH;0BACA,OAAO,OAAM,QAAQ,KAAK,yBAAW,gBAAC,CAAA,GAAA,yCAAG;8BAAG,OAAM,QAAQ;qBAAW,OAAM,QAAQ;;QAI5F;;AAGN;AAEA,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUC,SAAS,0CAAS,KAAoB;IAC3C,IAAI,YAAC,QAAQ,EAAC,GAAG,CAAA,GAAA,iBAAS,EAAE;IAC5B,IAAI,eAAC,WAAW,EAAC,GAAG,CAAA,GAAA,iBAAS,EAAE;IAC/B,IAAI,UACF,qBACE,gBAAC,CAAA,GAAA,eAAW;QACT,GAAG,KAAK;QACT,OAAO,MAAM,YAAY;QACzB,WAAW,CAAA,cAAe,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAAK,+BAAS,aAAa,MAAM,MAAM;;IAInG,IAAI,MAAM,EAAE,KAAK,aACf,OAAO;IAGT,qBAAO,gBAAC;QAAmB,GAAG,KAAK;;AACrC;AAEA,SAAS,wCAAkB,KAAoB;IAC7C,IAAI,gBAAC,YAAY,oBAAE,mBAAmB,IAAI,GAAG,YAAW,GAAG;IAC3D,IAAI,UAAC,MAAM,WAAE,OAAO,EAAC,GAAG,CAAA,GAAA,iBAAS,EAAE;IACnC,IAAI,MAAM,CAAA,GAAA,aAAK,EAAE;IACjB,IAAI,WAAW,CAAA,GAAA,0BAAkB,EAAE,OAAO,YAAY;IAEtD,qBACE,gBAAC,CAAA,GAAA,YAAI;QACF,GAAG,UAAU;QACd,KAAK;QACL,mBAAiB,SAAS,MAAM;QAChC,UAAU;QACV,OAAO;QACP,WAAW,CAAA,cAAe,mBAAmB,+BAAS,aAAa,MAAM,MAAM;;AAErF;AAEA,SAAS,wCAAqB,UAA2C,EAAE,YAAsB;IAC/F,IAAI,UAAsB;IAC1B,IAAI,cAAc,WAAW,IAAI,GAAG,GAAG;QACrC,UAAU,WAAW,WAAW;QAEhC,IAAI,QAAQ;QACZ,MAAO,WAAW,QAAQ,WAAW,IAAI,CAAE;YACzC,yHAAyH;YACzH,IAAI,CAAC,aAAa,GAAG,CAAC,YAAY,CAAC,WAAW,OAAO,CAAC,UAAU,OAAO,YACrE,OAAO;YAGT,UAAU,WAAW,WAAW,CAAC;YACjC;QACF;QACA,OAAO;IACT;IACA,OAAO;AACT;AAEA,IAAI,mCAAa,SAAU,KAK1B;IACC,IAAI,WAAC,OAAO,SAAE,KAAK,QAAE,IAAI,WAAE,OAAO,EAAC,GAAG;IAEtC,qBACE,gBAAC;QACC,aAAa;QACb,OAAO,CAAA,GAAA,iBAAS,EAAE;QAClB,KAAK;QACL,SAAS;kBAWR,MAAM,GAAG,CAAC,CAAC;YACV,6FAA6F;YAC7F,qBACE,gBAAC;gBACC,iBAAe;gBACf,OAAO,KAAK,KAAK,CAAC,YAAY;gBAE9B,WAAW,KAAK,KAAK,CAAC,SAAS,CAAC;0BAAC;6BAAM;gBAAO;0BAC7C,KAAK,KAAK,CAAC,QAAQ,CAAC;0BAAC;6BAAM;gBAAO;eAF9B,KAAK,GAAG;QAKnB;;AAGN;AAEA,IAAI,iCAAW,CAAC;IACd,IAAI,MAAC,EAAE,SAAE,KAAK,EAAE,cAAc,SAAS,EAAE,mBAAmB,cAAc,WAAE,OAAO,EAAC,GAAG;IACvF,IAAI,WAAC,OAAO,EAAE,mBAAmB,kBAAkB,eAAE,WAAW,cAAE,UAAU,gBAAE,YAAY,iBAAE,aAAa,EAAC,GAAG,CAAA,GAAA,iBAAS,EAAE;IACxH,IAAI,oBAAoB,CAAA,GAAA,kBAAU,EAAE,CAAC;QACnC,IAAI,OAAO,MACT,qBAAqB;IAEzB,GAAG;QAAC;KAAmB;IACvB,IAAI,QAAQ,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,0BAAkB;IACzC,IAAI,kBAAkB,CAAA,GAAA,cAAM,EAAE;QAC5B,OAAO,wCAAkB,OAAO,YAAY,eAAe,IAAI,IAAI,gBAAgB,IAAI;IACzF,GAAG;QAAC,OAAO;QAAY;KAAa;IACpC,IAAI,aAAa,CAAA,GAAA,gBAAQ,EAAE;YACzB;QACA,cAAc;QACd,mBAAmB;IACrB;IAEA,qBACE,gBAAC;QACC,WAAW;;;;;;;;UASL;qBAAC;QAAO;kBACd,cAAA,gBAAC,CAAA,GAAA,yCAAK;YACJ,IAAI;YACJ,SAAS;YACR,GAAG,UAAU;YACd,oBAAkB,MAAK,CAAC,mBAAmB;YAC3C,gBAAc,MAAK,CAAC,eAAe;YACnC,YAAY,cAAc;YAC1B,SAAS;YACT,eAAe;YACf,OAAO;YACP,cAAc;YACd,aAAa;YACb,mBAAmB;sBAClB,CAAC;gBACA,qBACE,0BAAC,CAAA,GAAA,yCAAS;oBACP,GAAG,KAAK,KAAK,CAAC,aAAa;oBAC5B,YAAY,cAAc;oBAC1B,KAAK,KAAK,GAAG;mBACZ,KAAK,KAAK,CAAC,QAAQ,CAAC;6BAAC;oBAAS,QAAQ;gBAAI;YAGjD;;;AAIR;AAEA,IAAI,uCAAiB,CAAC,cAAC,UAAU,gBAAE,YAAY,EAAE,GAAG,OAA8E;IAChI,IAAI,WAAC,UAAU,wBAAW,cAAc,6BAAc,gBAAgB,2BAAQ,iBAAiB,EAAC,GAAG;IACnG,IAAI,CAAC,WAAW,cAAc,GAAG,CAAA,GAAA,eAAO,EAAE;IAC1C,YAAY,gBAAgB,aAAa,OAAO;IAChD,IAAI,eAAe,CAAA,GAAA,kBAAU,EAAE,CAAC;QAC9B,IAAI,gBAAgB,YAClB,uDAAuD;QACvD,cAAc;aAEd,cAAc;IAElB,GAAG;QAAC;KAAY;IAEhB,IAAI,aAAC,SAAS,EAAC,GAAG,CAAA,GAAA,gBAAQ;IAE1B,IAAI,WAAW,CAAA,GAAA,cAAM,EAAE,IAAM;eAAI;SAAW,EAAE;QAAC;KAAW;IAE1D,IAAI,UAAU,CAAA,GAAA,aAAK,EAAyB;IAC5C,IAAI,iBAAiB,CAAA,GAAA,qBAAa,EAAE;QAClC,IAAI,gBAAgB,cAAc,CAAC,QAAQ,OAAO,IAAI,CAAC,cAAc,SACnE;QAEF,IAAI,YAAY,QAAQ,OAAO;QAC/B,IAAI,gBAAgB,UAAU,qBAAqB;QACnD,IAAI,OAAO,UAAU,gBAAgB,CAAC;QACtC,IAAI,UAAU,IAAI,CAAC,KAAK,MAAM,GAAG,EAAE;QACnC,IAAI,cAAc,QAAQ,qBAAqB;QAC/C,IAAI,cAAc,OAChB,eAAe,YAAY,KAAK,IAAI,cAAc,KAAK;aAEvD,eAAe,YAAY,IAAI,IAAI,cAAc,IAAI;IAEzD;IAEA,CAAA,GAAA,wBAAgB,EAAE;QAAC,KAAK;QAAc,UAAU;IAAc;IAE9D,CAAA,GAAA,sBAAc,EAAE;QACd,IAAI,WAAW,IAAI,GAAG,GACpB,eAAe;IAEnB,GAAG;QAAC,WAAW,IAAI;QAAE;KAAe;IAEpC,gEAAgE;IAChE,IAAI,kBAAkB,CAAA,GAAA,aAAK,EAAsB;IACjD,CAAA,GAAA,sBAAc,EAAE;QACd,IAAI,WAAW,IAAI,GAAG,KAAK,gBAAgB,OAAO,KAAK,aACrD;QAEF,gBAAgB,OAAO,GAAG;IAC5B,GAAG;QAAC,WAAW,IAAI;QAAE;QAAgB;KAAY;IAEjD,CAAA,GAAA,gBAAQ,EAAE;QACR,kDAAkD;QAClD,SAAS,KAAK,EAAE,MAAM,KAAK,IAAM;IACjC,uDAAuD;IACzD,GAAG,EAAE;IAEL,IAAI,SAAS,CAAA,GAAA,YAAI;IACjB,IAAI,UAAU,CAAA,GAAA,YAAI;IAElB,IAAI;IACJ,IAAI,WACF,yBACE,gBAAC,CAAA,GAAA,WAAM;QACJ,GAAG,KAAK;QACT,OAAO;YAAC,SAAS;QAAU;kBAC1B,MAAM,QAAQ;;SAInB,yBACE;;0BACE,gBAAC;gBACC,IAAI;gBACJ,SAAS;gBACT,OAAO;gBACP,mBAAmB;gBACnB,cAAY,KAAK,CAAC,aAAa;gBAC/B,oBAAkB,KAAK,CAAC,kBAAkB;;0BAC5C,gBAAC,sCAAgB,QAAQ;gBAAC,OAAO;oBAAC,UAAU;4BAAO;6BAAQ;gBAAO;0BAC/D,MAAM,QAAQ;;;;IAMvB,qBACE,iBAAC;QAAI,OAAO,MAAM,YAAY;QAAE,WAAW,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAAK,2BAAK;yBAAC;QAAW,GAAG,MAAM,MAAM;QAAG,KAAK;;0BAClH,gBAAC;gBAAI,WAAW,8BAAQ;iCAAC;mCAAa;6BAAe;gBAAO;0BAC1D,cAAA,gBAAC;oBAAW,OAAO;oBAAU,SAAS;oBAAS,SAAS;;;0BAE1D,gBAAC,sCAAgB,QAAQ;gBAAC,OAAO;oBAAC,UAAU;4BAAM;6BAAQ;gBAAO;0BAC9D;;;;AAIT","sources":["packages/@react-spectrum/s2/src/Tabs.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n TabListProps as AriaTabListProps,\n TabPanel as AriaTabPanel,\n TabPanelProps as AriaTabPanelProps,\n TabProps as AriaTabProps,\n TabsProps as AriaTabsProps,\n ContextValue,\n Group,\n Provider,\n Tab as RACTab,\n TabList as RACTabList,\n Tabs as RACTabs,\n TabListStateContext,\n TabRenderProps\n} from 'react-aria-components';\nimport {baseColor, focusRing, size, style} from '../style' with {type: 'macro'};\nimport {centerBaseline} from './CenterBaseline';\nimport {Collection, DOMRef, DOMRefValue, Key, Node, Orientation, RefObject} from '@react-types/shared';\nimport {CollectionBuilder} from '@react-aria/collections';\nimport {createContext, forwardRef, ReactNode, useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';\nimport {getAllowedOverrides, StyleProps, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {IconContext} from './Icon';\nimport {inertValue, useEffectEvent, useId, useLabels, useLayoutEffect, useResizeObserver} from '@react-aria/utils';\nimport {Picker, PickerItem} from './TabsPicker';\nimport {Text, TextContext} from './Content';\nimport {useControlledState} from '@react-stately/utils';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useHasTabbableChild} from '@react-aria/focus';\nimport {useLocale} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface TabsProps extends Omit<AriaTabsProps, 'className' | 'style' | 'children'>, UnsafeStyles {\n /** Spectrum-defined styles, returned by the `style()` macro. */\n styles?: StylesPropWithHeight,\n /** The content to display in the tabs. */\n children: ReactNode,\n /**\n * The amount of space between the tabs.\n * @default 'regular'\n */\n density?: 'compact' | 'regular',\n /**\n * Defines if the text within the tabs should be hidden and only the icon should be shown.\n * The text is always visible when the item is collapsed into a picker.\n * @default 'show'\n */\n labelBehavior?: 'show' | 'hide'\n}\n\nexport interface TabProps extends Omit<AriaTabProps, 'children' | 'style' | 'className'>, StyleProps {\n /** The content to display in the tab. */\n children: ReactNode\n}\n\nexport interface TabListProps<T> extends Omit<AriaTabListProps<T>, 'style' | 'className' | 'aria-label' | 'aria-labelledby'>, StyleProps {\n /** The content to display in the tablist. */\n children: ReactNode | ((item: T) => ReactNode)\n}\n\nexport interface TabPanelProps extends Omit<AriaTabPanelProps, 'children' | 'style' | 'className'>, UnsafeStyles {\n /** Spectrum-defined styles, returned by the `style()` macro. */\n styles?: StylesPropWithHeight,\n /** The content to display in the tab panels. */\n children: ReactNode\n}\n\nexport const TabsContext = createContext<ContextValue<Partial<TabsProps>, DOMRefValue<HTMLDivElement>>>(null);\nconst InternalTabsContext = createContext<Partial<TabsProps>>({});\nconst CollapseContext = createContext({\n showTabs: true,\n menuId: '',\n valueId: ''\n});\n\nconst tabs = style({\n position: 'relative',\n display: 'flex',\n flexShrink: 0,\n font: 'ui',\n flexDirection: {\n orientation: {\n horizontal: 'column'\n }\n }\n}, getAllowedOverrides({height: true}));\n\n/**\n * Tabs organize content into multiple sections and allow users to navigate between them. The content under the set of tabs should be related and form a coherent unit.\n */\nexport const Tabs = forwardRef(function Tabs(props: TabsProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, TabsContext);\n let {\n density = 'regular',\n isDisabled,\n disabledKeys,\n orientation = 'horizontal',\n labelBehavior = 'show'\n } = props;\n let domRef = useDOMRef(ref);\n let [value, setValue] = useControlledState(props.selectedKey, props.defaultSelectedKey ?? null!, props.onSelectionChange);\n\n if (!props['aria-label'] && !props['aria-labelledby']) {\n throw new Error('An aria-label or aria-labelledby prop is required on Tabs for accessibility.');\n }\n\n return (\n <Provider\n values={[\n [InternalTabsContext, {\n density,\n isDisabled,\n orientation,\n disabledKeys,\n selectedKey: value,\n onSelectionChange: setValue,\n labelBehavior,\n 'aria-label': props['aria-label'],\n 'aria-labelledby': props['aria-labelledby']\n }]\n ]}>\n <CollectionBuilder content={props.children}>\n {collection => (\n <CollapsingTabs\n {...props}\n selectedKey={value}\n onSelectionChange={setValue}\n collection={collection}\n containerRef={domRef} />\n )}\n </CollectionBuilder>\n </Provider>\n );\n});\n\nconst tablist = style({\n display: 'flex',\n gap: {\n orientation: {\n horizontal: {\n density: {\n compact: 24,\n regular: 32\n },\n labelBehavior: {\n hide: {\n density: {\n compact: 16,\n regular: 24\n }\n }\n }\n }\n }\n },\n flexDirection: {\n orientation: {\n vertical: 'column'\n }\n },\n marginEnd: {\n orientation: {\n vertical: 20\n }\n },\n marginStart: {\n orientation: {\n vertical: 12\n }\n },\n flexShrink: 0,\n flexBasis: '0%'\n});\n\nexport function TabList<T extends object>(props: TabListProps<T>): ReactNode | null {\n let {showTabs} = useContext(CollapseContext) ?? {};\n\n if (showTabs) {\n return <TabListInner {...props} />;\n }\n return null;\n}\n\nfunction TabListInner<T extends object>(props: TabListProps<T>) {\n let {density, isDisabled, disabledKeys, orientation, labelBehavior, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy} = useContext(InternalTabsContext) ?? {};\n let state = useContext(TabListStateContext);\n let [selectedTab, setSelectedTab] = useState<HTMLElement | undefined>(undefined);\n let tablistRef = useRef<HTMLDivElement>(null);\n\n useLayoutEffect(() => {\n if (tablistRef?.current) {\n let tab: HTMLElement | null = tablistRef.current.querySelector('[role=tab][data-selected=true]');\n\n if (tab != null) {\n setSelectedTab(tab);\n }\n }\n }, [tablistRef, state?.selectedItem?.key]);\n\n return (\n <div\n style={props.UNSAFE_style}\n className={(props.UNSAFE_className || '') + style({position: 'relative'}, getAllowedOverrides())(null, props.styles)}>\n {orientation === 'vertical' &&\n <TabLine disabledKeys={disabledKeys} isDisabled={isDisabled} selectedTab={selectedTab} orientation={orientation} tabList={props} density={density} />}\n <RACTabList\n {...props}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n ref={tablistRef}\n className={renderProps => tablist({...renderProps, labelBehavior, density})} />\n {orientation === 'horizontal' &&\n <TabLine disabledKeys={disabledKeys} isDisabled={isDisabled} selectedTab={selectedTab} orientation={orientation} tabList={props} density={density} />}\n </div>\n );\n}\n\ninterface TabLineProps<T extends object> {\n disabledKeys: Iterable<Key> | undefined,\n isDisabled: boolean | undefined,\n selectedTab: HTMLElement | undefined,\n orientation?: Orientation,\n tabList: TabListProps<T>,\n density?: 'compact' | 'regular'\n}\n\nconst selectedIndicator = style<{isDisabled: boolean, orientation?: Orientation}>({\n position: 'absolute',\n backgroundColor: {\n default: 'neutral',\n isDisabled: 'disabled',\n forcedColors: {\n default: 'Highlight',\n isDisabled: 'GrayText'\n }\n },\n height: {\n orientation: {\n horizontal: '[2px]'\n }\n },\n width: {\n orientation: {\n vertical: '[2px]'\n }\n },\n bottom: {\n orientation: {\n horizontal: 0\n }\n },\n borderStyle: 'none',\n borderRadius: 'full',\n transitionDuration: 130,\n transitionTimingFunction: 'in-out'\n});\n\nfunction TabLine<T extends object>(props: TabLineProps<T>) {\n let {\n disabledKeys,\n isDisabled: isTabsDisabled,\n selectedTab,\n orientation,\n tabList,\n density\n } = props;\n let {direction} = useLocale();\n let state = useContext(TabListStateContext);\n\n // We want to add disabled styling to the selection indicator only if all the Tabs are disabled\n let [isDisabled, setIsDisabled] = useState<boolean>(false);\n useEffect(() => {\n let isDisabled = isTabsDisabled || isAllTabsDisabled(state?.collection, disabledKeys ? new Set(disabledKeys) : new Set(null));\n setIsDisabled(isDisabled);\n }, [state?.collection, disabledKeys, isTabsDisabled, setIsDisabled]);\n\n let [style, setStyle] = useState<{transform: string | undefined, width: string | undefined, height: string | undefined}>({\n transform: undefined,\n width: undefined,\n height: undefined\n });\n\n let onResize = useCallback(() => {\n if (selectedTab) {\n let styleObj: { transform: string | undefined, width: string | undefined, height: string | undefined } = {\n transform: undefined,\n width: undefined,\n height: undefined\n };\n\n // In RTL, calculate the transform from the right edge of the tablist so that resizing the window doesn't break the Tabline position due to offsetLeft changes\n let offset = direction === 'rtl' ? -1 * ((selectedTab.offsetParent as HTMLElement)?.offsetWidth - selectedTab.offsetWidth - selectedTab.offsetLeft) : selectedTab.offsetLeft;\n styleObj.transform = orientation === 'vertical'\n ? `translateY(${selectedTab.offsetTop}px)`\n : `translateX(${offset}px)`;\n\n if (orientation === 'horizontal') {\n styleObj.width = `${selectedTab.offsetWidth}px`;\n } else {\n styleObj.height = `${selectedTab.offsetHeight}px`;\n }\n setStyle(styleObj);\n }\n }, [direction, setStyle, selectedTab, orientation]);\n\n useLayoutEffect(() => {\n onResize();\n }, [onResize, state?.selectedItem?.key, density, direction, orientation, tabList]);\n\n return (\n <div style={{...style}} className={selectedIndicator({isDisabled, orientation})} />\n );\n}\n\nconst tab = style<TabRenderProps & {density?: 'compact' | 'regular', labelBehavior?: 'show' | 'hide'}>({\n ...focusRing(),\n display: 'flex',\n color: {\n default: baseColor('neutral-subdued'),\n isSelected: baseColor('neutral'),\n isDisabled: 'disabled',\n forcedColors: {\n isSelected: 'Highlight',\n isDisabled: 'GrayText'\n }\n },\n borderRadius: 'sm',\n gap: 'text-to-visual',\n height: {\n density: {\n compact: 32,\n regular: 48\n }\n },\n alignItems: 'center',\n position: 'relative',\n cursor: 'default',\n flexShrink: 0,\n transition: 'default',\n paddingX: {\n labelBehavior: {\n hide: size(6)\n }\n },\n disableTapHighlight: true\n}, getAllowedOverrides());\n\nconst icon = style({\n display: 'block',\n flexShrink: 0,\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n }\n});\n\nexport function Tab(props: TabProps): ReactNode {\n let {density, labelBehavior} = useContext(InternalTabsContext) ?? {};\n\n let contentId = useId();\n let ariaLabelledBy = props['aria-labelledby'] || '';\n return (\n <RACTab\n {...props}\n // @ts-ignore\n originalProps={props}\n aria-labelledby={`${labelBehavior === 'hide' ? contentId : ''} ${ariaLabelledBy}`}\n style={props.UNSAFE_style}\n className={renderProps => (props.UNSAFE_className || '') + tab({...renderProps, density, labelBehavior}, props.styles)}>\n {({\n // @ts-ignore\n isMenu\n }) => {\n if (isMenu) {\n return props.children;\n } else {\n return (\n <Provider\n values={[\n [TextContext, {\n id: contentId,\n styles:\n style({\n order: 1,\n display: {\n labelBehavior: {\n hide: 'none'\n }\n }\n })({labelBehavior})\n }],\n [IconContext, {\n render: centerBaseline({slot: 'icon', styles: style({order: 0})}),\n styles: icon\n }]\n ]}>\n {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n </Provider>\n );\n }\n }}\n </RACTab>\n );\n}\n\nconst tabPanel = style({\n ...focusRing(),\n marginTop: 4,\n color: 'gray-800',\n flexGrow: 1,\n flexBasis: '0%',\n minHeight: 0,\n minWidth: 0\n}, getAllowedOverrides({height: true}));\n\nexport function TabPanel(props: TabPanelProps): ReactNode | null {\n let {showTabs} = useContext(CollapseContext);\n let {selectedKey} = useContext(InternalTabsContext);\n if (showTabs) {\n return (\n <AriaTabPanel\n {...props}\n style={props.UNSAFE_style}\n className={renderProps => (props.UNSAFE_className ?? '') + tabPanel(renderProps, props.styles)} />\n );\n }\n\n if (props.id !== selectedKey) {\n return null;\n }\n\n return <CollapsedTabPanel {...props} />;\n}\n\nfunction CollapsedTabPanel(props: TabPanelProps) {\n let {UNSAFE_style, UNSAFE_className = '', ...otherProps} = props;\n let {menuId, valueId} = useContext(CollapseContext);\n let ref = useRef(null);\n let tabIndex = useHasTabbableChild(ref) ? undefined : 0;\n\n return (\n <Group\n {...otherProps}\n ref={ref}\n aria-labelledby={menuId + ' ' + valueId}\n tabIndex={tabIndex}\n style={UNSAFE_style}\n className={renderProps => UNSAFE_className + tabPanel(renderProps, props.styles)} />\n );\n}\n\nfunction isAllTabsDisabled<T>(collection: Collection<Node<T>> | undefined, disabledKeys: Set<Key>) {\n let testKey: Key | null = null;\n if (collection && collection.size > 0) {\n testKey = collection.getFirstKey();\n\n let index = 0;\n while (testKey && index < collection.size) {\n // We have to check if the item in the collection has a key in disabledKeys or has the isDisabled prop set directly on it\n if (!disabledKeys.has(testKey) && !collection.getItem(testKey)?.props?.isDisabled) {\n return false;\n }\n\n testKey = collection.getKeyAfter(testKey);\n index++;\n }\n return true;\n }\n return false;\n}\n\nlet HiddenTabs = function (props: {\n listRef: RefObject<HTMLDivElement | null>,\n items: Array<Node<any>>,\n size?: string,\n density?: 'compact' | 'regular'\n}) {\n let {listRef, items, size, density} = props;\n\n return (\n <div\n // @ts-ignore\n inert={inertValue(true)}\n ref={listRef}\n className={style({\n display: 'inherit',\n flexDirection: 'inherit',\n gap: 'inherit',\n flexWrap: 'inherit',\n position: 'absolute',\n inset: 0,\n visibility: 'hidden',\n overflow: 'hidden',\n opacity: 0\n })}>\n {items.map((item) => {\n // pull off individual props as an allow list, don't want refs or other props getting through\n return (\n <div\n data-hidden-tab\n style={item.props.UNSAFE_style}\n key={item.key}\n className={item.props.className({size, density})}>\n {item.props.children({size, density})}\n </div>\n );\n })}\n </div>\n );\n};\n\nlet TabsMenu = (props: {valueId: string, items: Array<Node<any>>, onSelectionChange: TabsProps['onSelectionChange']} & Omit<TabsProps, 'children'>) => {\n let {id, items, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, valueId} = props;\n let {density, onSelectionChange: _onSelectionChange, selectedKey, isDisabled, disabledKeys, labelBehavior} = useContext(InternalTabsContext);\n let onSelectionChange = useCallback((key: Key | null) => {\n if (key != null) {\n _onSelectionChange?.(key);\n }\n }, [_onSelectionChange]);\n let state = useContext(TabListStateContext);\n let allKeysDisabled = useMemo(() => {\n return isAllTabsDisabled(state?.collection, disabledKeys ? new Set(disabledKeys) : new Set());\n }, [state?.collection, disabledKeys]);\n let labelProps = useLabels({\n id,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy\n });\n\n return (\n <div\n className={style({\n display: 'flex',\n flexShrink: 0,\n alignItems: 'center',\n height: {\n density: {\n compact: 32,\n regular: 48\n }\n }})({density})}>\n <Picker\n id={id}\n valueId={valueId}\n {...labelProps}\n aria-describedby={props['aria-describedby']}\n aria-details={props['aria-details']}\n isDisabled={isDisabled || allKeysDisabled}\n density={density!}\n labelBehavior={labelBehavior}\n items={items}\n disabledKeys={disabledKeys}\n selectedKey={selectedKey}\n onSelectionChange={onSelectionChange}>\n {(item: Node<any>) => {\n return (\n <PickerItem\n {...item.props.originalProps}\n isDisabled={isDisabled || allKeysDisabled}\n key={item.key}>\n {item.props.children({density, isMenu: true})}\n </PickerItem>\n );\n }}\n </Picker>\n </div>\n );\n};\n\nlet CollapsingTabs = ({collection, containerRef, ...props}: {collection: Collection<Node<unknown>>, containerRef: any} & TabsProps) => {\n let {density = 'regular', orientation = 'horizontal', labelBehavior = 'show', onSelectionChange} = props;\n let [showItems, _setShowItems] = useState(true);\n showItems = orientation === 'vertical' ? true : showItems;\n let setShowItems = useCallback((value: boolean) => {\n if (orientation === 'vertical') {\n // if orientation is vertical, we always show the items\n _setShowItems(true);\n } else {\n _setShowItems(value);\n }\n }, [orientation]);\n\n let {direction} = useLocale();\n\n let children = useMemo(() => [...collection], [collection]);\n\n let listRef = useRef<HTMLDivElement | null>(null);\n let updateOverflow = useEffectEvent(() => {\n if (orientation === 'vertical' || !listRef.current || !containerRef?.current) {\n return;\n }\n let container = listRef.current;\n let containerRect = container.getBoundingClientRect();\n let tabs = container.querySelectorAll('[data-hidden-tab]');\n let lastTab = tabs[tabs.length - 1];\n let lastTabRect = lastTab.getBoundingClientRect();\n if (direction === 'ltr') {\n setShowItems?.(lastTabRect.right <= containerRect.right);\n } else {\n setShowItems?.(lastTabRect.left >= containerRect.left);\n }\n });\n\n useResizeObserver({ref: containerRef, onResize: updateOverflow});\n\n useLayoutEffect(() => {\n if (collection.size > 0) {\n queueMicrotask(updateOverflow);\n }\n }, [collection.size, updateOverflow]);\n\n // start with null so that the first render won't have a flicker\n let prevOrientation = useRef<Orientation | null>(null);\n useLayoutEffect(() => {\n if (collection.size > 0 && prevOrientation.current !== orientation) {\n updateOverflow();\n }\n prevOrientation.current = orientation;\n }, [collection.size, updateOverflow, orientation]);\n\n useEffect(() => {\n // Recalculate visible tags when fonts are loaded.\n document.fonts?.ready.then(() => updateOverflow());\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n let menuId = useId();\n let valueId = useId();\n\n let contents: ReactNode;\n if (showItems) {\n contents = (\n <RACTabs\n {...props}\n style={{display: 'contents'}}>\n {props.children}\n </RACTabs>\n );\n } else {\n contents = (\n <>\n <TabsMenu\n id={menuId}\n valueId={valueId}\n items={children}\n onSelectionChange={onSelectionChange}\n aria-label={props['aria-label']}\n aria-describedby={props['aria-labelledby']} />\n <CollapseContext.Provider value={{showTabs: false, menuId, valueId}}>\n {props.children}\n </CollapseContext.Provider>\n </>\n );\n }\n\n return (\n <div style={props.UNSAFE_style} className={(props.UNSAFE_className || '') + tabs({orientation}, props.styles)} ref={containerRef}>\n <div className={tablist({orientation, labelBehavior, density})}>\n <HiddenTabs items={children} density={density} listRef={listRef} />\n </div>\n <CollapseContext.Provider value={{showTabs: true, menuId, valueId}}>\n {contents}\n </CollapseContext.Provider>\n </div>\n );\n};\n"],"names":[],"version":3,"file":"Tabs.mjs.map"}