@react-spectrum/s2 3.0.0-nightly-e3ed3c7f6-250130 → 3.0.0-nightly-016590a4a-250131

package/dist/TabsPicker.mjs

@@ -0,0 +1,409 @@
+import "./TabsPicker.css";
+import {centerBaseline as $1f4b04be3f24aae3$export$9d7e2342a7e53afa} from "./CenterBaseline.mjs";
+import {checkmark as $13afb0ea5f0ed767$export$292abbf31ed842a, description as $13afb0ea5f0ed767$export$6d59db4903f20f7d, icon as $13afb0ea5f0ed767$export$1ca1ec8b29a4ce27, label as $13afb0ea5f0ed767$export$1237798dc640739a, menuitem as $13afb0ea5f0ed767$export$f68e44d881264486, sectionHeader as $13afb0ea5f0ed767$export$562e61a0817eb32e, sectionHeading as $13afb0ea5f0ed767$export$300ac6f106ef584d} from "./Menu.mjs";
+import $81cf3d4588736e7d$export$2e2bcd8739ae039 from "./Checkmark.mjs";
+import $4b69f02ec06b9226$export$2e2bcd8739ae039 from "./Chevron.mjs";
+import {FieldLabel as $9afd80978c252040$export$1acdcf5a973a8414} from "./Field.mjs";
+import {HeaderContext as $8e847109a6ab556d$export$e0e4026c12a8bdbb, HeadingContext as $8e847109a6ab556d$export$d688439359537581, Text as $8e847109a6ab556d$export$5f1af8db9871e1d6, TextContext as $8e847109a6ab556d$export$9afb8bc826b033ea} from "./Content.mjs";
+import {IconContext as $ac8c32e6775ddd1f$export$a49f528ae1a4d0ed} from "../icons/Icon.mjs";
+import {PopoverBase as $88b746eba92c8d0d$export$fde1b04c590741a3} from "./Popover.mjs";
+import {pressScale as $10ea7662e51a285b$export$56e8cba416805d8d} from "./pressScale.mjs";
+import {useFormProps as $9b916426527cebe7$export$a6b5be5c6b451665} from "./Form.mjs";
+import {useSpectrumContextProps as $5ce63c423902f47d$export$764f6146fadd77f7} from "../icons/useSpectrumContextProps.mjs";
+import {jsxs as $vecDw$jsxs, jsx as $vecDw$jsx, Fragment as $vecDw$Fragment} from "react/jsx-runtime";
+import {Select as $vecDw$Select, Button as $vecDw$Button, SelectValue as $vecDw$SelectValue, Provider as $vecDw$Provider, DEFAULT_SLOT as $vecDw$DEFAULT_SLOT, ListBox as $vecDw$ListBox, ListBoxItem as $vecDw$ListBoxItem} from "react-aria-components";
+import {createContext as $vecDw$createContext, forwardRef as $vecDw$forwardRef, useRef as $vecDw$useRef, useContext as $vecDw$useContext} from "react";
+import {useFocusableRef as $vecDw$useFocusableRef} from "@react-spectrum/utils";
+
+/*
+ * 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 $0067ea932a992b6a$export$b72b8dade9393cd5 = /*#__PURE__*/ (0, $vecDw$createContext)(null);
+const $0067ea932a992b6a$var$inputButton = function anonymous(props) {
+    let rules = " .";
+    if (props.isFocusVisible) rules += ' _Pb';
+    else rules += ' _Pa';
+    rules += ' ca_____M';
+    rules += ' cx';
+    rules += ' _Rc';
+    rules += ' _Q-3t1z';
+    rules += ' __e-g2ozi1';
+    rules += ' __f-g2ozi1';
+    rules += ' __g-g2ozi1';
+    rules += ' __h-g2ozi1';
+    if (props.size === "XL") rules += ' pj';
+    else if (props.size === "L") rules += ' pi';
+    else if (props.size === "S") rules += ' ph';
+    else if (props.size === "XS") rules += ' pg';
+    else rules += ' pf';
+    if (props.isQuiet) rules += ' __qa';
+    else rules += ' __q-1s8glxue';
+    if (props.size === "XL") rules += ' -usygro_k-____g';
+    else if (props.size === "L") rules += ' -usygro_k-___0';
+    else if (props.size === "S") rules += ' -usygro_k-___u';
+    else rules += ' -usygro_k-___K';
+    rules += ' l-rwozxi';
+    rules += ' Yc';
+    rules += ' _g-bc1l9oh';
+    rules += ' _g-1uotwbwg';
+    rules += ' _g-eo0c6sf';
+    rules += ' _g-enzzrge';
+    rules += ' _g-enzykdd';
+    rules += ' _g-enzwzjc';
+    rules += ' _g-enzrfpb';
+    rules += ' _ga';
+    rules += ' _hbf';
+    rules += ' _he';
+    rules += ' _ib';
+    rules += ' _j-1x99dlob';
+    rules += ' _ja';
+    if (props.isDisabled) rules += ' aj';
+    else {
+        if (props.isPressed) rules += ' ao';
+        else if (props.isFocusVisible) rules += ' ao';
+        else if (props.isHovered) rules += ' ao';
+        else rules += ' an';
+    }
+    rules += ' _3d';
+    rules += ' _na';
+    rules += ' zf';
+    rules += ' _zb';
+    rules += ' _Ab';
+    rules += ' _Bb';
+    rules += ' _Cb';
+    rules += ' _5c';
+    rules += ' _Sa';
+    rules += ' _U-375x7f';
+    rules += ' _Va';
+    rules += ' ibH';
+    rules += ' iG';
+    rules += ' F-375tnp';
+    rules += ' G-375tnq';
+    rules += ' ba';
+    if (props.isQuiet) rules += ' qd';
+    rules += ' __V-yksgrp';
+    if (props.density === "compact") rules += ' jU';
+    else rules += ' j_a';
+    rules += ' __ra';
+    rules += ' -_375tnp_F-a';
+    rules += ' -_375tnq_G-a';
+    return rules;
+};
+let $0067ea932a992b6a$export$b1e5508a851be14d = function anonymous(props) {
+    let rules = " .";
+    rules += ' _Pa';
+    rules += ' _3f';
+    rules += ' __l-n6rb9a';
+    rules += ' __ra';
+    rules += ' o-17zqamw';
+    rules += ' __za';
+    rules += ' __Aa';
+    rules += ' Hd';
+    rules += ' Id';
+    rules += ' Fd';
+    rules += ' Gd';
+    rules += ' _g-bc1l9oh';
+    rules += ' _g-1uotwbwg';
+    rules += ' _g-eo0c6sf';
+    rules += ' _g-enzzrge';
+    rules += ' _g-enzykdd';
+    rules += ' _g-enzwzjc';
+    rules += ' _g-enzrfpb';
+    rules += ' _ga';
+    if (props.size === "XL") {
+        rules += ' _hbj';
+        rules += ' _hi';
+    } else if (props.size === "L") {
+        rules += ' _hbh';
+        rules += ' _hg';
+    } else if (props.size === "S") {
+        rules += ' _hbd';
+        rules += ' _hc';
+    } else if (props.size === "XS") {
+        rules += ' _hbb';
+        rules += ' _ha';
+    } else {
+        rules += ' _hbf';
+        rules += ' _he';
+    }
+    return rules;
+};
+const $0067ea932a992b6a$var$valueStyles = " __d-3t1x __zb __Ab _qa _tb _3d _5c jb";
+const $0067ea932a992b6a$var$iconStyles = " __c-3t1x U-3hn0u -rwx0fg_d-b";
+const $0067ea932a992b6a$var$iconCenterWrapper = function anonymous(props) {
+    let rules = " .";
+    rules += ' _3d';
+    rules += ' __e-qb5q8i';
+    rules += ' __f-qb5q8i';
+    rules += ' __g-qb5q8i';
+    rules += ' __h-qb5q8i';
+    if (props.labelBehavior === "hide") rules += ' F-ve8p9e';
+    return rules;
+};
+let $0067ea932a992b6a$var$InsideSelectValueContext = /*#__PURE__*/ (0, $vecDw$createContext)(false);
+function $0067ea932a992b6a$var$Picker(props1, ref) {
+    [props1, ref] = (0, $5ce63c423902f47d$export$764f6146fadd77f7)(props1, ref, $0067ea932a992b6a$export$b72b8dade9393cd5);
+    let domRef = (0, $vecDw$useFocusableRef)(ref);
+    props1 = (0, $9b916426527cebe7$export$a6b5be5c6b451665)(props1);
+    let { direction: direction = 'bottom', align: align = 'start', shouldFlip: shouldFlip = true, children: children, items: items, density: density, labelBehavior: labelBehavior = 'show', valueId: valueId, ...pickerProps } = props1;
+    let isQuiet = true;
+    const menuOffset = 6;
+    const size = 'M';
+    let ariaLabelledby = props1['aria-labelledby'] ?? '';
+    return /*#__PURE__*/ (0, $vecDw$jsxs)("div", {
+        children: [
+            /*#__PURE__*/ (0, $vecDw$jsx)((0, $vecDw$Select), {
+                ...pickerProps,
+                "aria-labelledby": `${labelBehavior === 'hide' ? valueId : ''} ${ariaLabelledby}`,
+                children: ({ isOpen: isOpen })=>/*#__PURE__*/ (0, $vecDw$jsxs)((0, $vecDw$Fragment), {
+                        children: [
+                            /*#__PURE__*/ (0, $vecDw$jsx)((0, $9afd80978c252040$export$1acdcf5a973a8414), {
+                                isQuiet: isQuiet
+                            }),
+                            /*#__PURE__*/ (0, $vecDw$jsxs)((0, $vecDw$Button), {
+                                ref: domRef,
+                                style: (renderProps)=>(0, $10ea7662e51a285b$export$56e8cba416805d8d)(domRef)(renderProps),
+                                // Prevent press scale from sticking while Picker is open.
+                                // @ts-ignore
+                                isPressed: false,
+                                className: (renderProps)=>$0067ea932a992b6a$var$inputButton({
+                                        ...renderProps,
+                                        size: 'M',
+                                        isOpen: isOpen,
+                                        isQuiet: isQuiet,
+                                        density: density
+                                    }),
+                                children: [
+                                    /*#__PURE__*/ (0, $vecDw$jsx)((0, $vecDw$SelectValue), {
+                                        className: $0067ea932a992b6a$var$valueStyles + ' ' + "-u6zm92",
+                                        children: ({ defaultChildren: defaultChildren })=>{
+                                            return /*#__PURE__*/ (0, $vecDw$jsx)((0, $vecDw$Provider), {
+                                                values: [
+                                                    [
+                                                        (0, $ac8c32e6775ddd1f$export$a49f528ae1a4d0ed),
+                                                        {
+                                                            slots: {
+                                                                icon: {
+                                                                    render: (0, $1f4b04be3f24aae3$export$9d7e2342a7e53afa)({
+                                                                        slot: 'icon',
+                                                                        styles: $0067ea932a992b6a$var$iconCenterWrapper({
+                                                                            labelBehavior: labelBehavior
+                                                                        })
+                                                                    }),
+                                                                    styles: (0, $13afb0ea5f0ed767$export$1ca1ec8b29a4ce27)
+                                                                }
+                                                            }
+                                                        }
+                                                    ],
+                                                    [
+                                                        (0, $8e847109a6ab556d$export$9afb8bc826b033ea),
+                                                        {
+                                                            slots: {
+                                                                // Default slot is useful when converting other collections to PickerItems.
+                                                                [(0, $vecDw$DEFAULT_SLOT)]: {
+                                                                    id: valueId,
+                                                                    styles: function anonymous(props) {
+                                                                        let rules = " .";
+                                                                        if (props.labelBehavior === "hide") rules += ' _3j';
+                                                                        else rules += ' _3a';
+                                                                        rules += ' __d-3t1y';
+                                                                        rules += ' __zb';
+                                                                        rules += ' __Ab';
+                                                                        rules += ' _qa';
+                                                                        rules += ' _tb';
+                                                                        return rules;
+                                                                    }({
+                                                                        labelBehavior: labelBehavior
+                                                                    })
+                                                                }
+                                                            }
+                                                        }
+                                                    ],
+                                                    [
+                                                        $0067ea932a992b6a$var$InsideSelectValueContext,
+                                                        true
+                                                    ]
+                                                ],
+                                                children: defaultChildren
+                                            });
+                                        }
+                                    }),
+                                    /*#__PURE__*/ (0, $vecDw$jsx)((0, $4b69f02ec06b9226$export$2e2bcd8739ae039), {
+                                        size: size,
+                                        className: $0067ea932a992b6a$var$iconStyles
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ (0, $vecDw$jsx)((0, $88b746eba92c8d0d$export$fde1b04c590741a3), {
+                                hideArrow: true,
+                                offset: menuOffset,
+                                placement: `${direction} ${align}`,
+                                shouldFlip: shouldFlip,
+                                styles: " B-375tnl p___u k-13f72lm -_375tnl_B-M",
+                                children: /*#__PURE__*/ (0, $vecDw$jsx)((0, $vecDw$Provider), {
+                                    values: [
+                                        [
+                                            (0, $8e847109a6ab556d$export$e0e4026c12a8bdbb),
+                                            {
+                                                styles: (0, $13afb0ea5f0ed767$export$562e61a0817eb32e)({
+                                                    size: size
+                                                })
+                                            }
+                                        ],
+                                        [
+                                            (0, $8e847109a6ab556d$export$d688439359537581),
+                                            {
+                                                styles: (0, $13afb0ea5f0ed767$export$300ac6f106ef584d)
+                                            }
+                                        ],
+                                        [
+                                            (0, $8e847109a6ab556d$export$9afb8bc826b033ea),
+                                            {
+                                                slots: {
+                                                    description: {
+                                                        styles: (0, $13afb0ea5f0ed767$export$6d59db4903f20f7d)({
+                                                            size: size
+                                                        })
+                                                    }
+                                                }
+                                            }
+                                        ]
+                                    ],
+                                    children: /*#__PURE__*/ (0, $vecDw$jsx)((0, $vecDw$ListBox), {
+                                        items: items,
+                                        className: $0067ea932a992b6a$export$b1e5508a851be14d,
+                                        children: children
+                                    })
+                                })
+                            })
+                        ]
+                    })
+            }),
+            /*#__PURE__*/ (0, $vecDw$jsx)($0067ea932a992b6a$var$TabLine, {
+                isDisabled: props1.isDisabled
+            })
+        ]
+    });
+}
+/**
+ * Pickers allow users to choose a single option from a collapsible list of options when space is limited.
+ */ let $0067ea932a992b6a$export$ba25329847403e11 = /*#__PURE__*/ (0, $vecDw$forwardRef)($0067ea932a992b6a$var$Picker);
+const $0067ea932a992b6a$var$selectedIndicator = function anonymous(props) {
+    let rules = " .";
+    if (props.isDisabled) rules += ' ba_____O';
+    else rules += ' ba_____M';
+    if (props.isDisabled) rules += ' bg';
+    else {
+        if (props.isPressed) rules += ' bo';
+        else if (props.isFocusVisible) rules += ' bo';
+        else if (props.isHovered) rules += ' bo';
+        else rules += ' bn';
+    }
+    rules += ' j-375zlr';
+    rules += ' zf';
+    rules += ' _zf';
+    rules += ' _Af';
+    rules += ' _Bf';
+    rules += ' _Cf';
+    rules += ' D-yj8a3w';
+    rules += ' _U-375x5l';
+    rules += ' _Va';
+    return rules;
+};
+function $0067ea932a992b6a$var$TabLine(props) {
+    return /*#__PURE__*/ (0, $vecDw$jsx)("div", {
+        className: $0067ea932a992b6a$var$selectedIndicator(props)
+    });
+}
+function $0067ea932a992b6a$export$d601881f38163e28(props) {
+    let ref = (0, $vecDw$useRef)(null);
+    let isLink = props.href != null;
+    const size = 'M';
+    return /*#__PURE__*/ (0, $vecDw$jsx)((0, $vecDw$ListBoxItem), {
+        ...props,
+        ref: ref,
+        textValue: props.textValue || (typeof props.children === 'string' ? props.children : undefined),
+        style: (0, $10ea7662e51a285b$export$56e8cba416805d8d)(ref, props.UNSAFE_style),
+        className: (renderProps)=>(props.UNSAFE_className || '') + (0, $13afb0ea5f0ed767$export$f68e44d881264486)({
+                ...renderProps,
+                size: size,
+                isLink: isLink
+            }, props.styles),
+        children: (renderProps)=>{
+            let { children: children } = props;
+            return /*#__PURE__*/ (0, $vecDw$jsx)($0067ea932a992b6a$var$DefaultProvider, {
+                context: (0, $ac8c32e6775ddd1f$export$a49f528ae1a4d0ed),
+                value: {
+                    slots: {
+                        icon: {
+                            render: (0, $1f4b04be3f24aae3$export$9d7e2342a7e53afa)({
+                                slot: 'icon',
+                                styles: $0067ea932a992b6a$var$iconCenterWrapper({})
+                            }),
+                            styles: (0, $13afb0ea5f0ed767$export$1ca1ec8b29a4ce27)
+                        }
+                    }
+                },
+                children: /*#__PURE__*/ (0, $vecDw$jsxs)($0067ea932a992b6a$var$DefaultProvider, {
+                    context: (0, $8e847109a6ab556d$export$9afb8bc826b033ea),
+                    value: {
+                        slots: {
+                            [(0, $vecDw$DEFAULT_SLOT)]: {
+                                styles: (0, $13afb0ea5f0ed767$export$1237798dc640739a)({
+                                    size: size
+                                })
+                            }
+                        }
+                    },
+                    children: [
+                        !isLink && /*#__PURE__*/ (0, $vecDw$jsx)((0, $81cf3d4588736e7d$export$2e2bcd8739ae039), {
+                            size: size,
+                            className: (0, $13afb0ea5f0ed767$export$292abbf31ed842a)({
+                                ...renderProps,
+                                size: size
+                            })
+                        }),
+                        typeof children === 'string' ? /*#__PURE__*/ (0, $vecDw$jsx)((0, $8e847109a6ab556d$export$5f1af8db9871e1d6), {
+                            children: children
+                        }) : children
+                    ]
+                })
+            });
+        }
+    });
+}
+// A Context.Provider that only sets a value if not inside SelectValue.
+function $0067ea932a992b6a$var$DefaultProvider({ context: context, value: value, children: children }) {
+    let inSelectValue = (0, $vecDw$useContext)($0067ea932a992b6a$var$InsideSelectValueContext);
+    if (inSelectValue) return children;
+    return /*#__PURE__*/ (0, $vecDw$jsx)(context.Provider, {
+        value: value,
+        children: children
+    });
+}
+
+
+export {$0067ea932a992b6a$export$b72b8dade9393cd5 as PickerContext, $0067ea932a992b6a$export$b1e5508a851be14d as menu, $0067ea932a992b6a$export$ba25329847403e11 as Picker, $0067ea932a992b6a$export$d601881f38163e28 as PickerItem};
+//# sourceMappingURL=TabsPicker.mjs.map

package/dist/TabsPicker.mjs.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;;;;AA+EM,MAAM,0DAAgB,CAAA,GAAA,oBAAY,EAAiF;AAC1H,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCC,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWX,MAAM;AAON,MAAM;AAQN,MAAM;;;;;;;;;;AASN,IAAI,+DAA2B,CAAA,GAAA,oBAAY,EAAE;AAC7C,SAAS,6BAAyB,MAAqB,EAAE,GAAoC;IAC3F,CAAC,QAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,QAAO,KAAK;IACnD,IAAI,SAAS,CAAA,GAAA,sBAAc,EAAE;IAC7B,SAAQ,CAAA,GAAA,yCAAW,EAAE;IACrB,IAAI,aACF,YAAY,iBACZ,QAAQ,qBACR,aAAa,gBACb,QAAQ,SACR,KAAK,WACL,OAAO,iBACP,gBAAgB,iBAChB,OAAO,EACP,GAAG,aACJ,GAAG;IACJ,IAAI,UAAU;IACd,MAAM,aAAqB;IAC3B,MAAM,OAAO;IACb,IAAI,iBAAiB,MAAK,CAAC,kBAAkB,IAAI;IACjD,qBACE,iBAAC;;0BACC,gBAAC,CAAA,GAAA,aAAS;gBACP,GAAG,WAAW;gBACf,mBAAiB,GAAG,kBAAkB,SAAS,UAAU,GAAG,CAAC,EAAE,gBAAgB;0BAC9E,CAAC,UAAC,MAAM,EAAC,iBACR;;0CACE,gBAAC,CAAA,GAAA,yCAAS;gCAAE,SAAS;;0CACrB,iBAAC,CAAA,GAAA,aAAK;gCACJ,KAAK;gCACL,OAAO,CAAA,cAAe,CAAA,GAAA,yCAAS,EAAE,QAAQ;gCACzC,0DAA0D;gCAC1D,aAAa;gCACb,WAAW;gCACX,WAAW,CAAA,cAAe,kCAAY;wCACpC,GAAG,WAAW;wCACd,MAAM;gDACN;iDACA;iDACA;oCACF;;kDACA,gBAAC,CAAA,GAAA,kBAAU;wCAAE,WAAW,oCAAc;kDACnC,CAAC,mBAAC,eAAe,EAAC;4CACjB,qBACE,gBAAC,CAAA,GAAA,eAAO;gDACN,QAAQ;oDACN;wDAAC,CAAA,GAAA,yCAAU;wDAAG;4DACZ,OAAO;gEACL,MAAM;oEACJ,QAAQ,CAAA,GAAA,yCAAa,EAAE;wEAAC,MAAM;wEAAQ,QAAQ,wCAAkB;2FAAC;wEAAa;oEAAE;oEAChF,QAAQ,CAAA,GAAA,yCAAG;gEACb;4DACF;wDACF;qDAAE;oDACF;wDAAC,CAAA,GAAA,yCAAU;wDAAG;4DACZ,OAAO;gEACL,2EAA2E;gEAC3E,CAAC,CAAA,GAAA,mBAAW,EAAE,EAAE;oEACd,IAAI;oEACJ,QAAQ;;;;;;;;;;sEASL;uFAAC;oEAAa;gEACnB;4DACF;wDACF;qDAAE;oDACF;wDAAC;wDAA0B;qDAAK;iDACjC;0DACA;;wCAGP;;kDAEF,gBAAC,CAAA,GAAA,wCAAU;wCACT,MAAM;wCACN,WAAW;;;;0CAEf,gBAAC,CAAA,GAAA,yCAAU;gCACT,SAAS;gCACT,QAAQ;gCACR,WAAW,GAAG,UAAU,CAAC,EAAE,OAAO;gCAClC,YAAY;gCACZ,MAAM;0CAKN,cAAA,gBAAC,CAAA,GAAA,eAAO;oCACN,QAAQ;wCACN;4CAAC,CAAA,GAAA,yCAAY;4CAAG;gDAAC,QAAQ,CAAA,GAAA,yCAAY,EAAE;0DAAC;gDAAI;4CAAE;yCAAE;wCAChD;4CAAC,CAAA,GAAA,yCAAa;4CAAG;gDAAC,QAAQ,CAAA,GAAA,yCAAa;4CAAC;yCAAE;wCAC1C;4CAAC,CAAA,GAAA,yCAAU;4CAAG;gDACZ,OAAO;oDACL,aAAa;wDAAC,QAAQ,CAAA,GAAA,yCAAU,EAAE;kEAAC;wDAAI;oDAAE;gDAC3C;4CACF;yCAAE;qCACH;8CACD,cAAA,gBAAC,CAAA,GAAA,cAAM;wCACL,OAAO;wCACP,WAAW;kDACV;;;;;;;0BAOb,gBAAC;gBAAQ,YAAY,OAAM,UAAU;;;;AAG3C;AACA;;CAEC,GACD,IAAI,4CAAwB,AAAd,WAAW,GAAI,CAAA,GAAA,iBAAS,EAAqB;AAI3D,MAAM;;;;;;;;;;;;;;;;;;;;;;AAgBN,SAAS,8BAAQ,KAAK;IACpB,qBAAO,gBAAC;QAAI,WAAW,wCAAkB;;AAC3C;AAMO,SAAS,0CAAW,KAAsB;IAC/C,IAAI,MAAM,CAAA,GAAA,aAAK,EAAE;IACjB,IAAI,SAAS,MAAM,IAAI,IAAI;IAC3B,MAAM,OAAO;IACb,qBACE,gBAAC,CAAA,GAAA,kBAAU;QACR,GAAG,KAAK;QACT,KAAK;QACL,WAAW,MAAM,SAAS,IAAK,CAAA,OAAO,MAAM,QAAQ,KAAK,WAAW,MAAM,QAAQ,GAAa,SAAQ;QACvG,OAAO,CAAA,GAAA,yCAAS,EAAE,KAAK,MAAM,YAAY;QACzC,WAAW,CAAA,cAAe,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAAK,CAAA,GAAA,yCAAO,EAAE;gBAAC,GAAG,WAAW;sBAAE;wBAAM;YAAM,GAAG,MAAM,MAAM;kBAC/G,CAAC;YACA,IAAI,YAAC,QAAQ,EAAC,GAAG;YACjB,qBACE,gBAAC;gBACC,SAAS,CAAA,GAAA,yCAAU;gBACnB,OAAO;oBAAC,OAAO;wBACb,MAAM;4BAAC,QAAQ,CAAA,GAAA,yCAAa,EAAE;gCAAC,MAAM;gCAAQ,QAAQ,wCAAkB,CAAC;4BAAE;4BAAI,QAAQ,CAAA,GAAA,yCAAG;wBAAC;oBAC5F;gBAAC;0BACD,cAAA,iBAAC;oBACC,SAAS,CAAA,GAAA,yCAAU;oBACnB,OAAO;wBACL,OAAO;4BACL,CAAC,CAAA,GAAA,mBAAW,EAAE,EAAE;gCAAC,QAAQ,CAAA,GAAA,yCAAI,EAAE;0CAAC;gCAAI;4BAAE;wBACxC;oBACF;;wBACC,CAAC,wBAAU,gBAAC,CAAA,GAAA,wCAAY;4BAAE,MAAM;4BAAM,WAAW,CAAA,GAAA,wCAAQ,EAAE;gCAAC,GAAG,WAAW;sCAAE;4BAAI;;wBAChF,OAAO,aAAa,yBAAW,gBAAC,CAAA,GAAA,yCAAG;sCAAG;6BAAmB;;;;QAIlE;;AAGN;AACA,uEAAuE;AACvE,SAAS,sCAAgB,WAAC,OAAO,SAAE,KAAK,YAAE,QAAQ,EAA2D;IAC3G,IAAI,gBAAgB,CAAA,GAAA,iBAAS,EAAE;IAC/B,IAAI,eACF,OAAO;IAET,qBAAO,gBAAC,QAAQ,QAAQ;QAAC,OAAO;kBAAQ;;AAC1C","sources":["packages/@react-spectrum/s2/src/TabsPicker.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 */\nimport {\n  PopoverProps as AriaPopoverProps,\n  Select as AriaSelect,\n  SelectProps as AriaSelectProps,\n  Button,\n  ContextValue,\n  DEFAULT_SLOT,\n  ListBox,\n  ListBoxItem,\n  ListBoxItemProps,\n  ListBoxProps,\n  Provider,\n  SelectValue\n} from 'react-aria-components';\nimport {centerBaseline} from './CenterBaseline';\nimport {\n  checkmark,\n  description,\n  icon,\n  label,\n  menuitem,\n  sectionHeader,\n  sectionHeading\n} from './Menu';\nimport CheckmarkIcon from '../ui-icons/Checkmark';\nimport ChevronIcon from '../ui-icons/Chevron';\nimport {edgeToText, focusRing, size, style} from '../style' with {type: 'macro'};\nimport {fieldInput, StyleProps} from './style-utils' with {type: 'macro'};\nimport {\n  FieldLabel\n} from './Field';\nimport {FocusableRef, FocusableRefValue, SpectrumLabelableProps} from '@react-types/shared';\nimport {forwardRefType} from './types';\nimport {HeaderContext, HeadingContext, Text, TextContext} from './Content';\nimport {IconContext} from './Icon';\nimport {Placement} from 'react-aria';\nimport {PopoverBase} from './Popover';\nimport {pressScale} from './pressScale';\nimport {raw} from '../style/style-macro' with {type: 'macro'};\nimport React, {createContext, forwardRef, ReactNode, useContext, useRef} from 'react';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useFormProps} from './Form';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\nexport interface PickerStyleProps {\n}\nexport interface PickerProps<T extends object> extends\n  Omit<AriaSelectProps<T>, 'children' | 'style' | 'className' | 'placeholder'>,\n  PickerStyleProps,\n  StyleProps,\n  SpectrumLabelableProps,\n  Pick<ListBoxProps<T>, 'items'>,\n  Pick<AriaPopoverProps, 'shouldFlip'> {\n    /** The contents of the collection. */\n    children: ReactNode | ((item: T) => ReactNode),\n    /**\n     * Direction the menu will render relative to the Picker.\n     *\n     * @default 'bottom'\n     */\n    direction?: 'bottom' | 'top',\n    /**\n     * Alignment of the menu relative to the input target.\n     *\n     * @default 'start'\n     */\n    align?: 'start' | 'end',\n    /** Width of the menu. By default, matches width of the trigger. Note that the minimum width of the dropdown is always equal to the trigger's width. */\n    menuWidth?: number,\n    /** Density of the tabs, affects the height of the picker. */\n    density: 'compact' | 'regular',\n    /**\n     * If the tab picker should only display icon and no text for the button label.\n     * @default 'show\n     */\n    labelBehavior?: 'show' | 'hide',\n    /** Id for the SelectedValue so we can label using it. */\n    valueId?: string\n}\nexport const PickerContext = createContext<ContextValue<Partial<PickerProps<any>>, FocusableRefValue<HTMLButtonElement>>>(null);\nconst inputButton = style({\n  ...focusRing(),\n  ...fieldInput(),\n  outlineStyle: {\n    default: 'none',\n    isFocusVisible: 'solid'\n  },\n  position: 'relative',\n  font: 'ui',\n  display: 'flex',\n  textAlign: 'start',\n  borderStyle: 'none',\n  borderRadius: 'sm',\n  alignItems: 'center',\n  transition: 'default',\n  columnGap: 'text-to-visual',\n  paddingX: 0,\n  backgroundColor: 'transparent',\n  color: {\n    default: 'neutral',\n    isDisabled: 'disabled'\n  },\n  maxWidth: {\n    isQuiet: 'max'\n  },\n  disableTapHighlight: true,\n  height: {\n    default: 48,\n    density: {\n      compact: 32\n    }\n  },\n  boxSizing: 'border-box'\n});\nexport let menu = style({\n  outlineStyle: 'none',\n  display: 'grid',\n  gridTemplateColumns: [edgeToText(32), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(32)],\n  boxSizing: 'border-box',\n  maxHeight: '[inherit]',\n  overflow: 'auto',\n  padding: 8,\n  fontFamily: 'sans',\n  fontSize: 'control'\n});\nconst valueStyles = style({\n  flexGrow: 0,\n  truncate: true,\n  display: 'flex',\n  alignItems: 'center',\n  height: 'full'\n});\nconst iconStyles = style({\n  flexShrink: 0,\n  rotate: 90,\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n});\nconst iconCenterWrapper = style({\n  display: 'flex',\n  gridArea: 'icon',\n  paddingStart: {\n    labelBehavior: {\n      hide: size(6)\n    }\n  }\n});\nlet InsideSelectValueContext = createContext(false);\nfunction Picker<T extends object>(props: PickerProps<T>, ref: FocusableRef<HTMLButtonElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, PickerContext);\n  let domRef = useFocusableRef(ref);\n  props = useFormProps(props);\n  let {\n    direction = 'bottom',\n    align = 'start',\n    shouldFlip = true,\n    children,\n    items,\n    density,\n    labelBehavior = 'show',\n    valueId,\n    ...pickerProps\n  } = props;\n  let isQuiet = true;\n  const menuOffset: number = 6;\n  const size = 'M';\n  let ariaLabelledby = props['aria-labelledby'] ?? '';\n  return (\n    <div>\n      <AriaSelect\n        {...pickerProps}\n        aria-labelledby={`${labelBehavior === 'hide' ? valueId : ''} ${ariaLabelledby}`}>\n        {({isOpen}) => (\n          <>\n            <FieldLabel isQuiet={isQuiet} />\n            <Button\n              ref={domRef}\n              style={renderProps => pressScale(domRef)(renderProps)}\n              // Prevent press scale from sticking while Picker is open.\n              // @ts-ignore\n              isPressed={false}\n              className={renderProps => inputButton({\n                ...renderProps,\n                size: 'M',\n                isOpen,\n                isQuiet,\n                density\n              })}>\n              <SelectValue className={valueStyles + ' ' + raw('&> * {display: none;}')}>\n                {({defaultChildren}) => {\n                  return (\n                    <Provider\n                      values={[\n                        [IconContext, {\n                          slots: {\n                            icon: {\n                              render: centerBaseline({slot: 'icon', styles: iconCenterWrapper({labelBehavior})}),\n                              styles: icon\n                            }\n                          }\n                        }],\n                        [TextContext, {\n                          slots: {\n                            // Default slot is useful when converting other collections to PickerItems.\n                            [DEFAULT_SLOT]: {\n                              id: valueId,\n                              styles: style({\n                                display: {\n                                  default: 'block',\n                                  labelBehavior: {\n                                    hide: 'none'\n                                  }\n                                },\n                                flexGrow: 1,\n                                truncate: true\n                              })({labelBehavior})\n                            }\n                          }\n                        }],\n                        [InsideSelectValueContext, true]\n                      ]}>\n                      {defaultChildren}\n                    </Provider>\n                  );\n                }}\n              </SelectValue>\n              <ChevronIcon\n                size={size}\n                className={iconStyles} />\n            </Button>\n            <PopoverBase\n              hideArrow\n              offset={menuOffset}\n              placement={`${direction} ${align}` as Placement}\n              shouldFlip={shouldFlip}\n              styles={style({\n                marginStart: -12,\n                minWidth: 192,\n                width: '[calc(var(--trigger-width) + (-2 * self(marginStart)))]'\n              })}>\n              <Provider\n                values={[\n                  [HeaderContext, {styles: sectionHeader({size})}],\n                  [HeadingContext, {styles: sectionHeading}],\n                  [TextContext, {\n                    slots: {\n                      description: {styles: description({size})}\n                    }\n                  }]\n                ]}>\n                <ListBox\n                  items={items}\n                  className={menu}>\n                  {children}\n                </ListBox>\n              </Provider>\n            </PopoverBase>\n          </>\n        )}\n      </AriaSelect>\n      <TabLine isDisabled={props.isDisabled} />\n    </div>\n  );\n}\n/**\n * Pickers allow users to choose a single option from a collapsible list of options when space is limited.\n */\nlet _Picker = /*#__PURE__*/ (forwardRef as forwardRefType)(Picker);\nexport {_Picker as Picker};\n\n\nconst selectedIndicator = style({\n  backgroundColor: {\n    default: 'neutral',\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  height: '[2px]',\n  borderStyle: 'none',\n  borderRadius: 'full',\n  marginTop: '[-2px]',\n  transitionDuration: 130,\n  transitionTimingFunction: 'in-out'\n});\nfunction TabLine(props) {\n  return <div className={selectedIndicator(props)} />;\n}\n\n\nexport interface PickerItemProps extends Omit<ListBoxItemProps, 'children' | 'style' | 'className'>, StyleProps {\n  children: ReactNode\n}\nexport function PickerItem(props: PickerItemProps) {\n  let ref = useRef(null);\n  let isLink = props.href != null;\n  const size = 'M';\n  return (\n    <ListBoxItem\n      {...props}\n      ref={ref}\n      textValue={props.textValue || (typeof props.children === 'string' ? props.children as string : undefined)}\n      style={pressScale(ref, props.UNSAFE_style)}\n      className={renderProps => (props.UNSAFE_className || '') + menuitem({...renderProps, size, isLink}, props.styles)}>\n      {(renderProps) => {\n        let {children} = props;\n        return (\n          <DefaultProvider\n            context={IconContext}\n            value={{slots: {\n              icon: {render: centerBaseline({slot: 'icon', styles: iconCenterWrapper({})}), styles: icon}\n            }}}>\n            <DefaultProvider\n              context={TextContext}\n              value={{\n                slots: {\n                  [DEFAULT_SLOT]: {styles: label({size})}\n                }\n              }}>\n              {!isLink && <CheckmarkIcon size={size} className={checkmark({...renderProps, size})} />}\n              {typeof children === 'string' ? <Text>{children}</Text> : children}\n            </DefaultProvider>\n          </DefaultProvider>\n        );\n      }}\n    </ListBoxItem>\n  );\n}\n// A Context.Provider that only sets a value if not inside SelectValue.\nfunction DefaultProvider({context, value, children}: {context: React.Context<any>, value: any, children: any}) {\n  let inSelectValue = useContext(InsideSelectValueContext);\n  if (inSelectValue) {\n    return children;\n  }\n  return <context.Provider value={value}>{children}</context.Provider>;\n}\n"],"names":[],"version":3,"file":"TabsPicker.mjs.map"}

package/dist/types.d.ts

@@ -175,6 +175,7 @@ interface ContentProps extends UnsafeStyles, SlotProps {
     children?: ReactNode;
     styles?: StyleString;
     isHidden?: boolean;
+    id?: string;
 }
 interface HeadingProps extends ContentProps {
     level?: number;
@@ -1542,14 +1543,18 @@ export interface TabsProps extends Omit<_TabsProps1, 'className' | 'style' | 'ch
      * @default 'regular'
      */
     density?: 'compact' | 'regular';
+    /**
+     * Defines if the text within the tabs should be hidden and only the icon should be shown.
+     * The text is always visible when the item is collapsed into a picker.
+     * @default 'show'
+     */
+    labelBehavior?: 'show' | 'hide';
 }
 export interface TabProps extends Omit<_TabProps1, 'children' | 'style' | 'className'>, StyleProps {
     /** The content to display in the tab. */
-    children?: ReactNode;
+    children: ReactNode;
 }
-export interface TabListProps<T> extends Omit<_TabListProps1<T>, 'children' | 'style' | 'className'>, StyleProps {
-    /** The content to display in the tablist. */
-    children?: ReactNode;
+export interface TabListProps<T> extends Omit<_TabListProps1<T>, 'style' | 'className' | 'aria-label' | 'aria-labelledby'>, StyleProps {
 }
 export interface TabPanelProps extends Omit<_TabPanelProps1, 'children' | 'style' | 'className'>, UnsafeStyles {
     /** Spectrum-defined styles, returned by the `style()` macro. */
@@ -1558,13 +1563,13 @@ export interface TabPanelProps extends Omit<_TabPanelProps1, 'children' | 'style
     children?: ReactNode;
 }
 export const TabsContext: Context<ContextValue<TabsProps, DOMRefValue<HTMLDivElement>>>;
-export function TabPanel(props: TabPanelProps): JSX.Element;
-export function Tab(props: TabProps): JSX.Element;
-export function TabList<T extends object>(props: TabListProps<T>): JSX.Element;
 /**
  * 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.
  */
 export const Tabs: ForwardRefExoticComponent<TabsProps & RefAttributes<DOMRefValue<HTMLDivElement>>>;
+export function TabList<T extends object>(props: TabListProps<T>): JSX.Element | undefined;
+export function Tab(props: TabProps): JSX.Element;
+export function TabPanel(props: TabPanelProps): JSX.Element | null;
 export interface TagProps extends Omit<_TagProps1, 'children' | 'style' | 'className'> {
     /** The children of the tag. */
     children?: ReactNode;