@react-spectrum/s2 0.5.0 → 0.7.0

package/dist/TreeView.cjs

@@ -0,0 +1,439 @@
+require("./TreeView.css");
+var $7a26131f6144af2b$exports = require("./ActionButtonGroup.cjs");
+var $e5a758dd286599f2$exports = require("./ActionMenu.cjs");
+var $e991cbcdf82ced71$exports = require("./CenterBaseline.cjs");
+var $af04e099a53d3e85$exports = require("./Checkbox.cjs");
+var $1df9f1c9262ce5df$exports = require("./Chevron.cjs");
+var $bde97c91243ed164$exports = require("../icons/Icon.cjs");
+var $6367bc87eb7d24ad$exports = require("./Content.cjs");
+var $ee7b4c497f520c08$exports = require("./utils.cjs");
+var $6K4Mt$reactjsxruntime = require("react/jsx-runtime");
+var $6K4Mt$reactariacomponents = require("react-aria-components");
+var $6K4Mt$reactariautils = require("@react-aria/utils");
+var $6K4Mt$react = require("react");
+var $6K4Mt$reactspectrumutils = require("@react-spectrum/utils");
+var $6K4Mt$reactaria = require("react-aria");
+
+
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+
+$parcel$export(module.exports, "TreeViewItem", () => $8a2a97a0cb171e69$export$6e77ea6719814e9c);
+$parcel$export(module.exports, "TreeViewItemContent", () => $8a2a97a0cb171e69$export$9a5779ed3fade674);
+$parcel$export(module.exports, "TreeView", () => $8a2a97a0cb171e69$export$6940b0d9c820eca7);
+/*
+ * 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 $8a2a97a0cb171e69$var$TreeRendererContext = /*#__PURE__*/ (0, $6K4Mt$react.createContext)({});
+let $8a2a97a0cb171e69$var$InternalTreeContext = /*#__PURE__*/ (0, $6K4Mt$react.createContext)({});
+// TODO: the below is needed so the borders of the top and bottom row isn't cut off if the TreeView is wrapped within a container by always reserving the 2px needed for the
+// keyboard focus ring. Perhaps find a different way of rendering the outlines since the top of the item doesn't
+// scroll into view due to how the ring is offset. Alternatively, have the tree render the top/bottom outline like it does in Listview
+const $8a2a97a0cb171e69$var$tree = function anonymous(props, overrides) {
+    let rules = " .";
+    let matches = (overrides || '').match(/(?:^|\s)(?:y|z|A|B|__a|_9|h|_6|_5|__B|__d|__e|__b|__c|V|__R|Y|_a|W|X|l|q|r|k|o|p)[^\s]+/g) || [];
+    rules += matches.join('');
+    let $o = false;
+    let $q = false;
+    let $l = false;
+    let $k = false;
+    for (let p of matches){
+        if (/^\s*o/.test(p)) $o = true;
+        if (/^\s*q/.test(p)) $q = true;
+        if (/^\s*l/.test(p)) $l = true;
+        if (/^\s*k/.test(p)) $k = true;
+    }
+    if (props.isFocusVisible) rules += ' _Mb';
+    else rules += ' _Ma';
+    rules += ' da_____M';
+    rules += ' dx';
+    rules += ' _Oc';
+    rules += ' _N-3hmpw';
+    rules += ' __Ea';
+    if (!$o) rules += ' oo';
+    if (!$q) rules += ' qo';
+    if (!$l) rules += ' lb';
+    if (!$k) rules += ' kb';
+    rules += ' __wa';
+    rules += ' __xa';
+    rules += ' __oa';
+    if (props.isEmpty) rules += ' _3d';
+    if (props.isEmpty) rules += ' _2c';
+    rules += ' -_11sb0gx_l-E';
+    return rules;
+};
+function $8a2a97a0cb171e69$var$TreeView(props, ref) {
+    let { children: children, isDetached: isDetached, isEmphasized: isEmphasized, UNSAFE_className: UNSAFE_className, UNSAFE_style: UNSAFE_style } = props;
+    let scale = (0, $ee7b4c497f520c08$exports.useScale)();
+    let renderer;
+    if (typeof children === 'function') renderer = children;
+    let domRef = (0, $6K4Mt$reactspectrumutils.useDOMRef)(ref);
+    return /*#__PURE__*/ (0, $6K4Mt$reactjsxruntime.jsx)((0, $6K4Mt$reactariacomponents.Virtualizer), {
+        layout: (0, $6K4Mt$reactariacomponents.ListLayout),
+        layoutOptions: {
+            rowHeight: scale === 'large' ? 50 : 40,
+            gap: isDetached ? 2 : 0
+        },
+        children: /*#__PURE__*/ (0, $6K4Mt$reactjsxruntime.jsx)($8a2a97a0cb171e69$var$TreeRendererContext.Provider, {
+            value: {
+                renderer: renderer
+            },
+            children: /*#__PURE__*/ (0, $6K4Mt$reactjsxruntime.jsx)($8a2a97a0cb171e69$var$InternalTreeContext.Provider, {
+                value: {
+                    isDetached: isDetached,
+                    isEmphasized: isEmphasized
+                },
+                children: /*#__PURE__*/ (0, $6K4Mt$reactjsxruntime.jsx)((0, $6K4Mt$reactariacomponents.Tree), {
+                    ...props,
+                    style: UNSAFE_style,
+                    className: (renderProps)=>(UNSAFE_className ?? '') + $8a2a97a0cb171e69$var$tree({
+                            isDetached: isDetached,
+                            ...renderProps
+                        }, props.styles),
+                    selectionBehavior: "toggle",
+                    ref: domRef,
+                    children: props.children
+                })
+            })
+        })
+    });
+}
+const $8a2a97a0cb171e69$var$selectedBackground = "[light-dark(color-mix(in srgb, light-dark(rgb(255, 255, 255), rgb(17, 17, 17)), light-dark(rgb(59, 99, 251), rgb(86, 129, 255)) 10%), color-mix(in srgb, light-dark(rgb(255, 255, 255), rgb(17, 17, 17)), light-dark(rgb(93, 137, 255), rgb(52, 91, 248)) 10%))]";
+const $8a2a97a0cb171e69$var$selectedActiveBackground = "[light-dark(color-mix(in srgb, light-dark(rgb(255, 255, 255), rgb(17, 17, 17)), light-dark(rgb(59, 99, 251), rgb(86, 129, 255)) 15%), color-mix(in srgb, light-dark(rgb(255, 255, 255), rgb(17, 17, 17)), light-dark(rgb(93, 137, 255), rgb(52, 91, 248)) 15%))]";
+const $8a2a97a0cb171e69$var$rowBackgroundColor = {
+    default: '--s2-container-bg',
+    isFocusVisibleWithin: "[color-mix(in srgb, light-dark(rgb(255, 255, 255), rgb(17, 17, 17)), light-dark(rgb(19, 19, 19), rgb(242, 242, 242)) 7%)]",
+    isHovered: "[color-mix(in srgb, light-dark(rgb(255, 255, 255), rgb(17, 17, 17)), light-dark(rgb(19, 19, 19), rgb(242, 242, 242)) 7%)]",
+    isPressed: "[color-mix(in srgb, light-dark(rgb(255, 255, 255), rgb(17, 17, 17)), light-dark(rgb(19, 19, 19), rgb(242, 242, 242)) 10%)]",
+    isSelected: {
+        default: "[color-mix(in srgb, light-dark(rgb(255, 255, 255), rgb(17, 17, 17)), light-dark(rgb(19, 19, 19), rgb(242, 242, 242)) 7%)]",
+        isEmphasized: $8a2a97a0cb171e69$var$selectedBackground,
+        isFocusVisibleWithin: {
+            default: "[color-mix(in srgb, light-dark(rgb(255, 255, 255), rgb(17, 17, 17)), light-dark(rgb(19, 19, 19), rgb(242, 242, 242)) 10%)]",
+            isEmphasized: $8a2a97a0cb171e69$var$selectedActiveBackground
+        },
+        isHovered: {
+            default: "[color-mix(in srgb, light-dark(rgb(255, 255, 255), rgb(17, 17, 17)), light-dark(rgb(19, 19, 19), rgb(242, 242, 242)) 10%)]",
+            isEmphasized: $8a2a97a0cb171e69$var$selectedActiveBackground
+        },
+        isPressed: {
+            default: "[color-mix(in srgb, light-dark(rgb(255, 255, 255), rgb(17, 17, 17)), light-dark(rgb(19, 19, 19), rgb(242, 242, 242)) 10%)]",
+            isEmphasized: $8a2a97a0cb171e69$var$selectedActiveBackground
+        }
+    },
+    forcedColors: {
+        default: 'Background'
+    }
+};
+const $8a2a97a0cb171e69$var$treeRow = function anonymous(props) {
+    let rules = " .";
+    rules += ' Vc';
+    rules += ' _0d';
+    rules += ' k2';
+    rules += ' lb';
+    rules += ' __oa';
+    rules += ' _d-bc1l9oh';
+    rules += ' _d-1uotwbwg';
+    rules += ' _d-eo0c6sf';
+    rules += ' _d-enzzrge';
+    rules += ' _d-enzykdd';
+    rules += ' _d-enzwzjc';
+    rules += ' _d-enzrfpb';
+    rules += ' _da';
+    rules += ' _ebf';
+    rules += ' _ee';
+    rules += ' _fb';
+    rules += ' _g-1x99dlob';
+    rules += ' _ga';
+    rules += ' an';
+    rules += ' _Ma';
+    if (props.isLink) rules += ' __Ic';
+    else rules += ' __Ib';
+    rules += ' -_19jpv4m_b-a_____H';
+    if (props.isSelected) {
+        if (props.isPressed) {
+            if (props.isEmphasized) rules += ' -_19jpv4m_b--1hocwbr';
+            else rules += ' -_19jpv4m_b--17nxj1';
+        } else if (props.isHovered) {
+            if (props.isEmphasized) rules += ' -_19jpv4m_b--1hocwbr';
+            else rules += ' -_19jpv4m_b--17nxj1';
+        } else if (props.isFocusVisibleWithin) {
+            if (props.isEmphasized) rules += ' -_19jpv4m_b--1hocwbr';
+            else rules += ' -_19jpv4m_b--17nxj1';
+        } else if (props.isEmphasized) rules += ' -_19jpv4m_b--sogeql';
+        else rules += ' -_19jpv4m_b--26tcdv';
+    } else if (props.isPressed) rules += ' -_19jpv4m_b--17nxj1';
+    else if (props.isHovered) rules += ' -_19jpv4m_b--26tcdv';
+    else if (props.isFocusVisibleWithin) rules += ' -_19jpv4m_b--26tcdv';
+    else rules += ' -_19jpv4m_b--1de2x0q';
+    rules += ' -oorfdf_d-a_____M';
+    rules += ' -oorfdf_d-x';
+    return rules;
+};
+const $8a2a97a0cb171e69$var$treeCellGrid = function anonymous(props) {
+    let rules = " .";
+    rules += ' _0f';
+    rules += ' lb';
+    rules += ' kb';
+    rules += ' __oa';
+    rules += ' _1b';
+    rules += ' _2c';
+    rules += ' __i-22ig44';
+    rules += ' __j-2wzs0i';
+    rules += ' __k-17p9pp0';
+    rules += ' b-19jpv4m';
+    rules += ' Dc';
+    if (props.isDisabled) {
+        rules += ' aa_____O';
+        rules += ' aj';
+    }
+    rules += ' -fm23a5_d-a_____M';
+    if (props.isFocusVisible) rules += ' -fm23a5_d-x';
+    else rules += ' -fm23a5_d-n';
+    rules += ' -_17c7snb_d-a_____M';
+    rules += ' -_17c7snb_d-x';
+    if (props.isDetached) {
+        if (props.isSelected) rules += ' c-fm23a5';
+        else rules += ' ca';
+    }
+    if (props.isDetached) rules += ' ub';
+    if (props.isDetached) rules += ' vb';
+    if (props.isDetached) rules += ' sb';
+    if (props.isDetached) rules += ' tb';
+    if (props.isDetached) rules += ' _wc';
+    if (props.isDetached) rules += ' _xc';
+    if (props.isDetached) rules += ' _yc';
+    if (props.isDetached) rules += ' _zc';
+    if (props.isDetached) rules += ' wa';
+    return rules;
+};
+const $8a2a97a0cb171e69$var$treeCheckbox = " __b-5dolv4 __c-5dolv4 __d-5dolv4 __e-5dolv4 ye za Da";
+const $8a2a97a0cb171e69$var$treeIcon = " __b-qb5q8i __c-qb5q8i __d-qb5q8i __e-qb5q8i zG zbH -rwx0fg_e-b";
+const $8a2a97a0cb171e69$var$treeContent = " __b-drkpd0 __c-drkpd0 __d-drkpd0 __e-drkpd0 _na _qb __wb __xb";
+const $8a2a97a0cb171e69$var$treeActions = " __b-1k7szui __c-1k7szui __d-1k7szui __e-1k7szui yb zc";
+const $8a2a97a0cb171e69$var$treeActionMenu = " __b-2npmt8 __c-2npmt8 __d-2npmt8 __e-2npmt8";
+const $8a2a97a0cb171e69$var$cellFocus = {
+    outlineStyle: {
+        default: 'none',
+        isFocusVisible: 'solid'
+    },
+    outlineOffset: -2,
+    outlineWidth: 2,
+    outlineColor: 'focus-ring',
+    borderRadius: '[6px]'
+};
+const $8a2a97a0cb171e69$var$treeRowFocusIndicator = "-lc8e11";
+const $8a2a97a0cb171e69$export$6e77ea6719814e9c = (props)=>{
+    let { href: href } = props;
+    let { isDetached: isDetached, isEmphasized: isEmphasized } = (0, $6K4Mt$react.useContext)($8a2a97a0cb171e69$var$InternalTreeContext);
+    return /*#__PURE__*/ (0, $6K4Mt$reactjsxruntime.jsx)((0, $6K4Mt$reactariacomponents.TreeItem), {
+        ...props,
+        className: (renderProps)=>$8a2a97a0cb171e69$var$treeRow({
+                ...renderProps,
+                isLink: !!href,
+                isEmphasized: isEmphasized
+            }) + (renderProps.isFocusVisible && !isDetached ? ' ' + $8a2a97a0cb171e69$var$treeRowFocusIndicator : '')
+    });
+};
+const $8a2a97a0cb171e69$export$9a5779ed3fade674 = (props1)=>{
+    let { children: children } = props1;
+    let { isDetached: isDetached, isEmphasized: isEmphasized } = (0, $6K4Mt$react.useContext)($8a2a97a0cb171e69$var$InternalTreeContext);
+    let scale = (0, $ee7b4c497f520c08$exports.useScale)();
+    return /*#__PURE__*/ (0, $6K4Mt$reactjsxruntime.jsx)((0, $6K4Mt$reactariacomponents.TreeItemContent), {
+        children: ({ isExpanded: isExpanded, hasChildItems: hasChildItems, selectionMode: selectionMode, selectionBehavior: selectionBehavior, isDisabled: isDisabled, isFocusVisible: isFocusVisible, isSelected: isSelected, id: id, state: state })=>{
+            let isNextSelected = false;
+            let isNextFocused = false;
+            let keyAfter = state.collection.getKeyAfter(id);
+            if (keyAfter != null) isNextSelected = state.selectionManager.isSelected(keyAfter);
+            let isFirst = state.collection.getFirstKey() === id;
+            return /*#__PURE__*/ (0, $6K4Mt$reactjsxruntime.jsxs)("div", {
+                className: $8a2a97a0cb171e69$var$treeCellGrid({
+                    isDisabled: isDisabled,
+                    isNextSelected: isNextSelected,
+                    isSelected: isSelected,
+                    isFirst: isFirst,
+                    isNextFocused: isNextFocused,
+                    isDetached: isDetached
+                }),
+                children: [
+                    selectionMode !== 'none' && selectionBehavior === 'toggle' && // TODO: add transition?
+                    /*#__PURE__*/ (0, $6K4Mt$reactjsxruntime.jsx)("div", {
+                        className: $8a2a97a0cb171e69$var$treeCheckbox,
+                        children: /*#__PURE__*/ (0, $6K4Mt$reactjsxruntime.jsx)((0, $af04e099a53d3e85$exports.Checkbox), {
+                            isEmphasized: isEmphasized,
+                            slot: "selection"
+                        })
+                    }),
+                    /*#__PURE__*/ (0, $6K4Mt$reactjsxruntime.jsx)("div", {
+                        className: " __b-u3oh8l __c-u3oh8l __d-u3oh8l __e-u3oh8l l-19lybgs"
+                    }),
+                    /*#__PURE__*/ (0, $6K4Mt$reactjsxruntime.jsx)($8a2a97a0cb171e69$var$ExpandableRowChevron, {
+                        isDisabled: isDisabled,
+                        isExpanded: isExpanded,
+                        scale: scale,
+                        isHidden: !hasChildItems
+                    }),
+                    /*#__PURE__*/ (0, $6K4Mt$reactjsxruntime.jsx)((0, $6K4Mt$reactariacomponents.Provider), {
+                        values: [
+                            [
+                                (0, $6367bc87eb7d24ad$exports.TextContext),
+                                {
+                                    styles: $8a2a97a0cb171e69$var$treeContent
+                                }
+                            ],
+                            [
+                                (0, $bde97c91243ed164$exports.IconContext),
+                                {
+                                    render: (0, $e991cbcdf82ced71$exports.centerBaseline)({
+                                        slot: 'icon',
+                                        styles: $8a2a97a0cb171e69$var$treeIcon
+                                    }),
+                                    styles: " l-1sthc3k k-1sthc3k _9-3t1x"
+                                }
+                            ],
+                            [
+                                (0, $7a26131f6144af2b$exports.ActionButtonGroupContext),
+                                {
+                                    styles: $8a2a97a0cb171e69$var$treeActions
+                                }
+                            ],
+                            [
+                                (0, $e5a758dd286599f2$exports.ActionMenuContext),
+                                {
+                                    styles: $8a2a97a0cb171e69$var$treeActionMenu,
+                                    isQuiet: true
+                                }
+                            ]
+                        ],
+                        children: children
+                    }),
+                    isFocusVisible && isDetached && /*#__PURE__*/ (0, $6K4Mt$reactjsxruntime.jsx)("div", {
+                        role: "presentation",
+                        className: function anonymous(props) {
+                            let rules = " .";
+                            if (props.isFocusVisible) rules += ' _Mb';
+                            else rules += ' _Ma';
+                            rules += ' _N-3hmpw';
+                            rules += ' _Oc';
+                            rules += ' da_____M';
+                            rules += ' dx';
+                            rules += ' _w-3762yr';
+                            rules += ' _x-3762yr';
+                            rules += ' _y-3762yr';
+                            rules += ' _z-3762yr';
+                            rules += ' Va';
+                            rules += ' Ya';
+                            rules += ' _aa';
+                            rules += ' Wa';
+                            rules += ' Xa';
+                            return rules;
+                        }({
+                            isFocusVisible: true
+                        })
+                    })
+                ]
+            });
+        }
+    });
+};
+const $8a2a97a0cb171e69$var$expandButton = function anonymous(props) {
+    let rules = " .";
+    rules += ' __b-ajol1u';
+    rules += ' __c-ajol1u';
+    rules += ' __d-ajol1u';
+    rules += ' __e-ajol1u';
+    if (props.isDisabled) {
+        rules += ' aa_____O';
+        rules += ' aj';
+    } else rules += ' a-17zqamw';
+    rules += ' k2';
+    rules += ' l2';
+    rules += ' _0d';
+    rules += ' _8a';
+    rules += ' _1b';
+    rules += ' _3d';
+    rules += ' _Ma';
+    rules += ' __Ib';
+    if (props.isExpanded) {
+        if (props.isRTL) rules += ' U-197phm7';
+        else rules += ' U-7hkt2a';
+    }
+    rules += ' Ea';
+    rules += ' Fa';
+    rules += ' Ca';
+    rules += ' Da';
+    rules += ' _Pa';
+    rules += ' _R-375x7f';
+    rules += ' _Sa';
+    rules += ' ba';
+    rules += ' wf';
+    rules += ' __S-yksgrp';
+    if (props.isHidden) rules += ' __Fb';
+    return rules;
+};
+function $8a2a97a0cb171e69$var$ExpandableRowChevron(props1) {
+    let expandButtonRef = (0, $6K4Mt$react.useRef)(null);
+    let [fullProps, ref] = (0, $6K4Mt$reactariacomponents.useContextProps)({
+        ...props1,
+        slot: 'chevron'
+    }, expandButtonRef, (0, $6K4Mt$reactariacomponents.ButtonContext));
+    let { isExpanded: isExpanded, isDisabled: isDisabled, scale: scale, isHidden: isHidden } = fullProps;
+    let { direction: direction } = (0, $6K4Mt$reactaria.useLocale)();
+    isDisabled = isDisabled || isHidden;
+    return /*#__PURE__*/ (0, $6K4Mt$reactjsxruntime.jsx)((0, $6K4Mt$reactariacomponents.Button), {
+        ...props1,
+        ref: ref,
+        slot: "chevron",
+        // Override tabindex so that grid keyboard nav skips over it. Needs -1 so android talkback can actually "focus" it
+        excludeFromTabOrder: (0, $6K4Mt$reactariautils.isAndroid)() && !isDisabled,
+        preventFocusOnPress: true,
+        className: (renderProps)=>$8a2a97a0cb171e69$var$expandButton({
+                ...renderProps,
+                isExpanded: isExpanded,
+                isRTL: direction === 'rtl',
+                scale: scale,
+                isHidden: isHidden
+            }),
+        children: /*#__PURE__*/ (0, $6K4Mt$reactjsxruntime.jsx)((0, $1df9f1c9262ce5df$exports.default), {
+            className: function anonymous(props) {
+                let rules = " .";
+                if (props.direction === "rtl") rules += ' S-yizn7r';
+                else if (props.direction === "ltr") rules += ' S-375khm';
+                if (props.direction === "rtl") rules += ' T-yizn7r';
+                else if (props.direction === "ltr") rules += ' T-375khm';
+                rules += ' -rwx0fg_e-b';
+                return rules;
+            }({
+                direction: direction
+            })
+        })
+    });
+}
+/**
+ * A tree view provides users with a way to navigate nested hierarchical information.
+ */ const $8a2a97a0cb171e69$export$6940b0d9c820eca7 = /*#__PURE__*/ (0, $6K4Mt$react.forwardRef)($8a2a97a0cb171e69$var$TreeView);
+
+
+//# sourceMappingURL=TreeView.cjs.map

package/dist/TreeView.cjs.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;;;AAsDD,MAAM,0DAAsB,CAAA,GAAA,0BAAY,EAA4B,CAAC;AAGrE,IAAI,0DAAsB,CAAA,GAAA,0BAAY,EAAkD,CAAC;AAEzF,4KAA4K;AAC5K,gHAAgH;AAChH,sIAAsI;AACtI,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsBN,SAAS,+BAAS,KAAoB,EAAE,GAA2B;IACjE,IAAI,YAAC,QAAQ,cAAE,UAAU,gBAAE,YAAY,oBAAE,gBAAgB,gBAAE,YAAY,EAAC,GAAG;IAC3E,IAAI,QAAQ,CAAA,GAAA,kCAAO;IAEnB,IAAI;IACJ,IAAI,OAAO,aAAa,YACtB,WAAW;IAGb,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IAEvB,qBACE,gCAAC,CAAA,GAAA,sCAAU;QACT,QAAQ,CAAA,GAAA,qCAAS;QACjB,eAAe;YACb,WAAW,UAAU,UAAU,KAAK;YACpC,KAAK,aAAa,IAAI;QACxB;kBACA,cAAA,gCAAC,0CAAoB,QAAQ;YAAC,OAAO;0BAAC;YAAQ;sBAC5C,cAAA,gCAAC,0CAAoB,QAAQ;gBAAC,OAAO;gCAAC;kCAAY;gBAAY;0BAC5D,cAAA,gCAAC,CAAA,GAAA,+BAAG;oBACD,GAAG,KAAK;oBACT,OAAO;oBACP,WAAW,CAAA,cAAe,AAAC,CAAA,oBAAoB,EAAC,IAAK,2BAAK;wCAAC;4BAAY,GAAG,WAAW;wBAAA,GAAG,MAAM,MAAM;oBACpG,mBAAkB;oBAClB,KAAK;8BACJ,MAAM,QAAQ;;;;;AAM3B;AAEA,MAAM;AACN,MAAM;AAEN,MAAM,2CAAqB;IACzB,SAAS;IACT,oBAAoB;IACpB,SAAS;IACT,SAAS;IACT,YAAY;QACV,OAAO;QACP,cAAc;QACd,sBAAsB;YACpB,OAAO;YACP,cAAc;QAChB;QACA,WAAW;YACT,OAAO;YACP,cAAc;QAChB;QACA,WAAW;YACT,OAAO;YACP,cAAc;QAChB;IACF;IACA,cAAc;QACZ,SAAS;IACX;AACF;AAEA,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoDN,MAAM;AAON,MAAM;AASN,MAAM;AAON,MAAM;AAON,MAAM;AAIN,MAAM,kCAAY;IAChB,cAAc;QACZ,SAAS;QACT,gBAAgB;IAClB;IACA,eAAe;IACf,cAAc;IACd,cAAc;IACd,cAAc;AAChB;AAEA,MAAM;AAeC,MAAM,4CAAe,CAAC;IAC3B,IAAI,QACF,IAAI,EACL,GAAG;IACJ,IAAI,cAAC,UAAU,gBAAE,YAAY,EAAC,GAAG,CAAA,GAAA,uBAAS,EAAE;IAE5C,qBACE,gCAAC,CAAA,GAAA,mCAAO;QACL,GAAG,KAAK;QACT,WAAW,CAAC,cAAgB,8BAAQ;gBAClC,GAAG,WAAW;gBACd,QAAQ,CAAC,CAAC;8BAAM;YAClB,KAAM,CAAA,YAAY,cAAc,IAAI,CAAC,aAAa,MAAM,8CAAwB,EAAC;;AAEvF;AAOO,MAAM,4CAAsB,CAAC;IAClC,IAAI,YACF,QAAQ,EACT,GAAG;IACJ,IAAI,cAAC,UAAU,gBAAE,YAAY,EAAC,GAAG,CAAA,GAAA,uBAAS,EAAE;IAC5C,IAAI,QAAQ,CAAA,GAAA,kCAAO;IAEnB,qBACE,gCAAC,CAAA,GAAA,0CAAc;kBACZ,CAAC,cAAC,UAAU,iBAAE,aAAa,iBAAE,aAAa,qBAAE,iBAAiB,cAAE,UAAU,kBAAE,cAAc,cAAE,UAAU,MAAE,EAAE,SAAE,KAAK,EAAC;YAChH,IAAI,iBAAiB;YACrB,IAAI,gBAAgB;YACpB,IAAI,WAAW,MAAM,UAAU,CAAC,WAAW,CAAC;YAC5C,IAAI,YAAY,MACd,iBAAiB,MAAM,gBAAgB,CAAC,UAAU,CAAC;YAErD,IAAI,UAAU,MAAM,UAAU,CAAC,WAAW,OAAO;YACjD,qBACE,iCAAC;gBAAI,WAAW,mCAAa;gCAAC;oCAAY;gCAAgB;6BAAY;mCAAS;gCAAe;gBAAU;;oBACrG,kBAAkB,UAAU,sBAAsB,YACjD,wBAAwB;kCACxB,gCAAC;wBAAI,WAAW;kCACd,cAAA,gCAAC,CAAA,GAAA,kCAAO;4BACN,cAAc;4BACd,MAAK;;;kCAGX,gCAAC;wBACC,SAAS;;kCAKX,gCAAC;wBAAqB,YAAY;wBAAY,YAAY;wBAAY,OAAO;wBAAO,UAAU,CAAE;;kCAChG,gCAAC,CAAA,GAAA,mCAAO;wBACN,QAAQ;4BACN;gCAAC,CAAA,GAAA,qCAAU;gCAAG;oCAAC,QAAQ;gCAAW;6BAAE;4BACpC;gCAAC,CAAA,GAAA,qCAAU;gCAAG;oCACZ,QAAQ,CAAA,GAAA,wCAAa,EAAE;wCAAC,MAAM;wCAAQ,QAAQ;oCAAQ;oCACtD,MAAM;gCACR;6BAAE;4BACF;gCAAC,CAAA,GAAA,kDAAuB;gCAAG;oCAAC,QAAQ;gCAAW;6BAAE;4BACjD;gCAAC,CAAA,GAAA,2CAAgB;gCAAG;oCAAC,QAAQ;oCAAgB,SAAS;gCAAI;6BAAE;yBAC7D;kCACA;;oBAEF,kBAAkB,4BAAc,gCAAC;wBAAI,MAAK;wBAAe,WAAW;;;;;;;;;;;;;;;;;;0BAAsD;4BAAC,gBAAgB;wBAAI;;;;QAGtJ;;AAGN;AAUA,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCN,SAAS,2CAAqB,MAAgC;IAC5D,IAAI,kBAAkB,CAAA,GAAA,mBAAK,EAAqB;IAChD,IAAI,CAAC,WAAW,IAAI,GAAG,CAAA,GAAA,0CAAc,EAAE;QAAC,GAAG,MAAK;QAAE,MAAM;IAAS,GAAG,iBAAiB,CAAA,GAAA,wCAAY;IACjG,IAAI,cAAC,UAAU,cAAE,UAAU,SAAE,KAAK,YAAE,QAAQ,EAAC,GAAG;IAChD,IAAI,aAAC,SAAS,EAAC,GAAG,CAAA,GAAA,0BAAQ;IAC1B,aAAa,cAAc;IAE3B,qBACE,gCAAC,CAAA,GAAA,iCAAK;QACH,GAAG,MAAK;QACT,KAAK;QACL,MAAK;QACL,kHAAkH;QAClH,qBAAqB,CAAA,GAAA,+BAAQ,OAAO,CAAC;QACrC,mBAAmB;QACnB,WAAW,CAAA,cAAe,mCAAa;gBAAC,GAAG,WAAW;4BAAE;gBAAY,OAAO,cAAc;uBAAO;0BAAO;YAAQ;kBAC/G,cAAA,gCAAC,CAAA,GAAA,iCAAM;YACL,WAAW;;;;;;;;cAWR;2BAAC;YAAS;;;AAGrB;AAEA;;CAEC,GACD,MAAM,0DAAY,CAAA,GAAA,uBAAS,EAAE","sources":["packages/@react-spectrum/s2/src/TreeView.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 {ActionButtonGroupContext} from './ActionButtonGroup';\nimport {ActionMenuContext} from './ActionMenu';\nimport {\n  Button,\n  ButtonContext,\n  ListLayout,\n  Provider,\n  TreeItemProps as RACTreeItemProps,\n  TreeProps as RACTreeProps,\n  Tree,\n  TreeItem,\n  TreeItemContent,\n  TreeItemContentProps,\n  useContextProps,\n  Virtualizer\n} from 'react-aria-components';\nimport {centerBaseline} from './CenterBaseline';\nimport {Checkbox} from './Checkbox';\nimport Chevron from '../ui-icons/Chevron';\nimport {colorMix, focusRing, fontRelative, lightDark, style} from '../style' with {type: 'macro'};\nimport {DOMRef, Key} from '@react-types/shared';\nimport {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {IconContext} from './Icon';\nimport {isAndroid} from '@react-aria/utils';\nimport {raw} from '../style/style-macro' with {type: 'macro'};\nimport React, {createContext, forwardRef, JSXElementConstructor, ReactElement, ReactNode, useContext, useRef} from 'react';\nimport {TextContext} from './Content';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useLocale} from 'react-aria';\nimport {useScale} from './utils';\n\ninterface S2TreeProps {\n  // Only detatched is supported right now with the current styles from Spectrum\n  isDetached?: boolean,\n  onAction?: (key: Key) => void,\n  // not fully supported yet\n  isEmphasized?: boolean\n}\n\nexport interface TreeViewProps extends Omit<RACTreeProps<any>, 'style' | 'className' | 'onRowAction' | 'selectionBehavior' | 'onScroll' | 'onCellAction' | 'dragAndDropHooks'>, UnsafeStyles, S2TreeProps {\n  /** Spectrum-defined styles, returned by the `style()` macro. */\n  styles?: StylesPropWithHeight\n}\n\nexport interface TreeViewItemProps extends Omit<RACTreeItemProps, 'className' | 'style'> {\n  /** Whether this item has children, even if not loaded yet. */\n  hasChildItems?: boolean\n}\n\ninterface TreeRendererContextValue {\n  renderer?: (item) => ReactElement<any, string | JSXElementConstructor<any>>\n}\nconst TreeRendererContext = createContext<TreeRendererContextValue>({});\n\n\nlet InternalTreeContext = createContext<{isDetached?: boolean, isEmphasized?: boolean}>({});\n\n// TODO: the below is needed so the borders of the top and bottom row isn't cut off if the TreeView is wrapped within a container by always reserving the 2px needed for the\n// keyboard focus ring. Perhaps find a different way of rendering the outlines since the top of the item doesn't\n// scroll into view due to how the ring is offset. Alternatively, have the tree render the top/bottom outline like it does in Listview\nconst tree = style({\n  ...focusRing(),\n  outlineOffset: -2, // make certain we are visible inside overflow hidden containers\n  userSelect: 'none',\n  minHeight: 0,\n  minWidth: 0,\n  width: 'full',\n  height: 'full',\n  overflow: 'auto',\n  boxSizing: 'border-box',\n  justifyContent: {\n    isEmpty: 'center'\n  },\n  alignItems: {\n    isEmpty: 'center'\n  },\n  '--indent': {\n    type: 'width',\n    value: 16\n  }\n}, getAllowedOverrides({height: true}));\n\nfunction TreeView(props: TreeViewProps, ref: DOMRef<HTMLDivElement>) {\n  let {children, isDetached, isEmphasized, UNSAFE_className, UNSAFE_style} = props;\n  let scale = useScale();\n\n  let renderer;\n  if (typeof children === 'function') {\n    renderer = children;\n  }\n\n  let domRef = useDOMRef(ref);\n\n  return (\n    <Virtualizer\n      layout={ListLayout}\n      layoutOptions={{\n        rowHeight: scale === 'large' ? 50 : 40,\n        gap: isDetached ? 2 : 0\n      }}>\n      <TreeRendererContext.Provider value={{renderer}}>\n        <InternalTreeContext.Provider value={{isDetached, isEmphasized}}>\n          <Tree\n            {...props}\n            style={UNSAFE_style}\n            className={renderProps => (UNSAFE_className ?? '') + tree({isDetached, ...renderProps}, props.styles)}\n            selectionBehavior=\"toggle\"\n            ref={domRef}>\n            {props.children}\n          </Tree>\n        </InternalTreeContext.Provider>\n      </TreeRendererContext.Provider>\n    </Virtualizer>\n  );\n}\n\nconst selectedBackground = lightDark(colorMix('gray-25', 'informative-900', 10), colorMix('gray-25', 'informative-700', 10));\nconst selectedActiveBackground = lightDark(colorMix('gray-25', 'informative-900', 15), colorMix('gray-25', 'informative-700', 15));\n\nconst rowBackgroundColor = {\n  default: '--s2-container-bg',\n  isFocusVisibleWithin: colorMix('gray-25', 'gray-900', 7),\n  isHovered: colorMix('gray-25', 'gray-900', 7),\n  isPressed: colorMix('gray-25', 'gray-900', 10),\n  isSelected: {\n    default: colorMix('gray-25', 'gray-900', 7),\n    isEmphasized: selectedBackground,\n    isFocusVisibleWithin: {\n      default: colorMix('gray-25', 'gray-900', 10),\n      isEmphasized: selectedActiveBackground\n    },\n    isHovered: {\n      default: colorMix('gray-25', 'gray-900', 10),\n      isEmphasized: selectedActiveBackground\n    },\n    isPressed: {\n      default: colorMix('gray-25', 'gray-900', 10),\n      isEmphasized: selectedActiveBackground\n    }\n  },\n  forcedColors: {\n    default: 'Background'\n  }\n} as const;\n\nconst treeRow = style({\n  position: 'relative',\n  display: 'flex',\n  height: 40,\n  width: 'full',\n  boxSizing: 'border-box',\n  font: 'ui',\n  color: 'body',\n  outlineStyle: 'none',\n  cursor: {\n    default: 'default',\n    isLink: 'pointer'\n  },\n  '--rowBackgroundColor': {\n    type: 'backgroundColor',\n    value: rowBackgroundColor\n  },\n  '--rowFocusIndicatorColor': {\n    type: 'outlineColor',\n    value: {\n      default: 'focus-ring',\n      forcedColors: 'Highlight'\n    }\n  }\n});\n\n\nconst treeCellGrid = style({\n  display: 'grid',\n  width: 'full',\n  height: 'full',\n  boxSizing: 'border-box',\n  alignContent: 'center',\n  alignItems: 'center',\n  gridTemplateColumns: ['auto', 'auto', 'auto', 'auto', 'auto', '1fr', 'minmax(0, auto)', 'auto'],\n  gridTemplateRows: '1fr',\n  gridTemplateAreas: [\n    'drag-handle checkbox level-padding expand-button icon content actions actionmenu'\n  ],\n  backgroundColor: '--rowBackgroundColor',\n  paddingEnd: 4, // account for any focus rings on the last item in the cell\n  color: {\n    isDisabled: {\n      default: 'gray-400',\n      forcedColors: 'GrayText'\n    }\n  },\n  '--rowSelectedBorderColor': {\n    type: 'outlineColor',\n    value: {\n      default: 'gray-800',\n      isFocusVisible: 'focus-ring',\n      forcedColors: 'Highlight'\n    }\n  },\n  '--rowForcedFocusBorderColor': {\n    type: 'outlineColor',\n    value: {\n      default: 'focus-ring',\n      forcedColors: 'Highlight'\n    }\n  },\n  borderColor: {\n    isDetached: {\n      default: 'transparent',\n      isSelected: '--rowSelectedBorderColor'\n    }\n  },\n  borderWidth: {\n    isDetached: 1\n  },\n  borderRadius: {\n    isDetached: 'default'\n  },\n  borderStyle: {\n    isDetached: 'solid'\n  }\n});\n\nconst treeCheckbox = style({\n  gridArea: 'checkbox',\n  marginStart: 12,\n  marginEnd: 0,\n  paddingEnd: 0\n});\n\nconst treeIcon = style({\n  gridArea: 'icon',\n  marginEnd: 'text-to-visual',\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n});\n\nconst treeContent = style({\n  gridArea: 'content',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n  overflow: 'hidden'\n});\n\nconst treeActions = style({\n  gridArea: 'actions',\n  /* TODO: I made this one up, confirm desired behavior. These paddings are to make sure the action group has enough padding for the focus ring */\n  marginStart: 2,\n  marginEnd: 4\n});\n\nconst treeActionMenu = style({\n  gridArea: 'actionmenu'\n});\n\nconst cellFocus = {\n  outlineStyle: {\n    default: 'none',\n    isFocusVisible: 'solid'\n  },\n  outlineOffset: -2,\n  outlineWidth: 2,\n  outlineColor: 'focus-ring',\n  borderRadius: '[6px]'\n} as const;\n\nconst treeRowFocusIndicator = raw(`\n  &:before {\n    content: \"\";\n    display: inline-block;\n    position: sticky;\n    inset-inline-start: 0;\n    width: 3px;\n    height: 100%;\n    margin-inline-end: -3px;\n    margin-block-end: 1px;\n    z-index: 3;\n    background-color: var(--rowFocusIndicatorColor);\n  }`\n);\n\nexport const TreeViewItem = (props: TreeViewItemProps) => {\n  let {\n    href\n  } = props;\n  let {isDetached, isEmphasized} = useContext(InternalTreeContext);\n\n  return (\n    <TreeItem\n      {...props}\n      className={(renderProps) => treeRow({\n        ...renderProps,\n        isLink: !!href, isEmphasized\n      }) + (renderProps.isFocusVisible && !isDetached ? ' ' + treeRowFocusIndicator : '')} />\n  );\n};\n\nexport interface TreeViewItemContentProps extends Omit<TreeItemContentProps, 'children'> {\n  /** Rendered contents of the tree item or child items. */\n  children: ReactNode\n}\n\nexport const TreeViewItemContent = (props: TreeViewItemContentProps) => {\n  let {\n    children\n  } = props;\n  let {isDetached, isEmphasized} = useContext(InternalTreeContext);\n  let scale = useScale();\n\n  return (\n    <TreeItemContent>\n      {({isExpanded, hasChildItems, selectionMode, selectionBehavior, isDisabled, isFocusVisible, isSelected, id, state}) => {\n        let isNextSelected = false;\n        let isNextFocused = false;\n        let keyAfter = state.collection.getKeyAfter(id);\n        if (keyAfter != null) {\n          isNextSelected = state.selectionManager.isSelected(keyAfter);\n        }\n        let isFirst = state.collection.getFirstKey() === id;\n        return (\n          <div className={treeCellGrid({isDisabled, isNextSelected, isSelected, isFirst, isNextFocused, isDetached})}>\n            {selectionMode !== 'none' && selectionBehavior === 'toggle' && (\n              // TODO: add transition?\n              <div className={treeCheckbox}>\n                <Checkbox\n                  isEmphasized={isEmphasized}\n                  slot=\"selection\" />\n              </div>\n            )}\n            <div\n              className={style({\n                gridArea: 'level-padding',\n                width: '[calc(calc(var(--tree-item-level, 0) - 1) * var(--indent))]'\n              })} />\n            {/* TODO: revisit when we do async loading, at the moment hasChildItems will only cause the chevron to be rendered, no aria/data attributes indicating the row's expandability are added */}\n            <ExpandableRowChevron isDisabled={isDisabled} isExpanded={isExpanded} scale={scale} isHidden={!(hasChildItems)} />\n            <Provider\n              values={[\n                [TextContext, {styles: treeContent}],\n                [IconContext, {\n                  render: centerBaseline({slot: 'icon', styles: treeIcon}),\n                  styles: style({size: fontRelative(20), flexShrink: 0})\n                }],\n                [ActionButtonGroupContext, {styles: treeActions}],\n                [ActionMenuContext, {styles: treeActionMenu, isQuiet: true}]\n              ]}>\n              {children}\n            </Provider>\n            {isFocusVisible && isDetached && <div role=\"presentation\" className={style({...cellFocus, position: 'absolute', inset: 0})({isFocusVisible: true})} />}\n          </div>\n        );\n      }}\n    </TreeItemContent>\n  );\n};\n\ninterface ExpandableRowChevronProps {\n  isExpanded?: boolean,\n  isDisabled?: boolean,\n  isRTL?: boolean,\n  scale: 'medium' | 'large',\n  isHidden?: boolean\n}\n\nconst expandButton = style<ExpandableRowChevronProps>({\n  gridArea: 'expand-button',\n  color: {\n    default: '[inherit]',\n    isDisabled: {\n      default: 'disabled',\n      forcedColors: 'GrayText'\n    }\n  },\n  height: 40,\n  width: 40,\n  display: 'flex',\n  flexWrap: 'wrap',\n  alignContent: 'center',\n  justifyContent: 'center',\n  outlineStyle: 'none',\n  cursor: 'default',\n  transform: {\n    isExpanded: {\n      default: 'rotate(90deg)',\n      isRTL: 'rotate(-90deg)'\n    }\n  },\n  padding: 0,\n  transition: 'default',\n  backgroundColor: 'transparent',\n  borderStyle: 'none',\n  disableTapHighlight: true,\n  visibility: {\n    isHidden: 'hidden'\n  }\n});\n\nfunction ExpandableRowChevron(props: ExpandableRowChevronProps) {\n  let expandButtonRef = useRef<HTMLButtonElement>(null);\n  let [fullProps, ref] = useContextProps({...props, slot: 'chevron'}, expandButtonRef, ButtonContext);\n  let {isExpanded, isDisabled, scale, isHidden} = fullProps;\n  let {direction} = useLocale();\n  isDisabled = isDisabled || isHidden;\n\n  return (\n    <Button\n      {...props}\n      ref={ref}\n      slot=\"chevron\"\n      // Override tabindex so that grid keyboard nav skips over it. Needs -1 so android talkback can actually \"focus\" it\n      excludeFromTabOrder={isAndroid() && !isDisabled}\n      preventFocusOnPress\n      className={renderProps => expandButton({...renderProps, isExpanded, isRTL: direction === 'rtl', scale, isHidden})}>\n      <Chevron\n        className={style({\n          scale: {\n            direction: {\n              ltr: '1',\n              rtl: '-1'\n            }\n          },\n          '--iconPrimary': {\n            type: 'fill',\n            value: 'currentColor'\n          }\n        })({direction})} />\n    </Button>\n  );\n}\n\n/**\n * A tree view provides users with a way to navigate nested hierarchical information.\n */\nconst _TreeView = forwardRef(TreeView);\nexport {_TreeView as TreeView};\n"],"names":[],"version":3,"file":"TreeView.cjs.map"}