@react-spectrum/s2 3.0.0-nightly-adae13c78-241218 → 3.0.0-nightly-50c7ada5d-241220

package/dist/ActionBar.cjs

@@ -0,0 +1,262 @@
+require("./ActionBar.css");
+var $7a26131f6144af2b$exports = require("./ActionButtonGroup.cjs");
+var $2f907cb84c6e9e75$exports = require("./CloseButton.cjs");
+var $4526404114e78c80$exports = require("./intlStrings.cjs");
+var $ac757a4c2bd72aee$exports = require("../icons/useSpectrumContextProps.cjs");
+var $cRsNx$reactjsxruntime = require("react/jsx-runtime");
+var $cRsNx$reactarialiveannouncer = require("@react-aria/live-announcer");
+var $cRsNx$react = require("react");
+var $cRsNx$reactaria = require("react-aria");
+var $cRsNx$reactstatelyutils = require("@react-stately/utils");
+var $cRsNx$reactspectrumutils = require("@react-spectrum/utils");
+var $cRsNx$reactariautils = require("@react-aria/utils");
+var $cRsNx$reactariai18n = require("@react-aria/i18n");
+
+
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+
+$parcel$export(module.exports, "ActionBarContext", () => $85bf454149fe9ddc$export$9f306827c48feef4);
+$parcel$export(module.exports, "ActionBar", () => $85bf454149fe9ddc$export$e213cebad6250b4a);
+$parcel$export(module.exports, "useActionBarContainer", () => $85bf454149fe9ddc$export$13f32e21845e01d0);
+/*
+ * 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 $85bf454149fe9ddc$var$slideIn = "-d9bqcx";
+const $85bf454149fe9ddc$var$slideOut = "-e7i2y9";
+const $85bf454149fe9ddc$var$actionBarStyles = function anonymous(props) {
+    let rules = " .";
+    rules += ' _vd';
+    rules += ' _wd';
+    rules += ' _xd';
+    rules += ' _yd';
+    if (props.isEmphasized) {
+        if (props.isPressed) rules += ' -_1de2x0q_b-o';
+        else if (props.isFocusVisible) rules += ' -_1de2x0q_b-o';
+        else if (props.isHovered) rules += ' -_1de2x0q_b-o';
+        else rules += ' -_1de2x0q_b-n';
+    } else rules += ' -_1de2x0q_b-______x';
+    rules += ' b-1de2x0q';
+    rules += ' _tb';
+    rules += ' __na';
+    rules += ' _Lb';
+    rules += ' _Nb';
+    rules += ' _M-3hmpv';
+    rules += ' da_____I';
+    if (props.isEmphasized) rules += ' da';
+    else rules += ' dh';
+    rules += ' Cd';
+    rules += ' Dd';
+    rules += ' Ee';
+    rules += ' Fe';
+    rules += ' _Zd';
+    rules += ' if';
+    rules += ' jf';
+    rules += ' _1c';
+    if (props.isInContainer) rules += ' Ua';
+    rules += ' Zd';
+    rules += ' Vd';
+    rules += ' -w2j5q1_W-d';
+    if (props.isInContainer) rules += ' la';
+    else rules += ' lb';
+    rules += ' y_d';
+    rules += ' z_d';
+    rules += ' r_______________T';
+    if (props.isExiting) rules += ' _S-y93obf';
+    else if (props.isInContainer) rules += ' _S-xn3rp9';
+    rules += ' _T-375xx3';
+    if (props.isExiting) rules += ' _Ya';
+    else if (props.isInContainer) rules += ' _Ya';
+    return rules;
+};
+const $85bf454149fe9ddc$export$9f306827c48feef4 = /*#__PURE__*/ (0, $cRsNx$react.createContext)(null);
+const $85bf454149fe9ddc$export$e213cebad6250b4a = /*#__PURE__*/ (0, $cRsNx$react.forwardRef)(function ActionBar(props, ref) {
+    [props, ref] = (0, $ac757a4c2bd72aee$exports.useSpectrumContextProps)(props, ref, $85bf454149fe9ddc$export$9f306827c48feef4);
+    let domRef = (0, $cRsNx$reactspectrumutils.useDOMRef)(ref);
+    let isOpen = props.selectedItemCount !== 0;
+    let isExiting = (0, $cRsNx$reactariautils.useExitAnimation)(domRef, isOpen && props.scrollRef != null);
+    if (!isOpen && !isExiting) return null;
+    return /*#__PURE__*/ (0, $cRsNx$reactjsxruntime.jsx)($85bf454149fe9ddc$var$ActionBarInner, {
+        ...props,
+        ref: domRef,
+        isExiting: isExiting
+    });
+});
+const $85bf454149fe9ddc$var$ActionBarInner = /*#__PURE__*/ (0, $cRsNx$react.forwardRef)(function ActionBarInner(props1, ref) {
+    let { isEmphasized: isEmphasized, selectedItemCount: selectedItemCount = 0, children: children, onClearSelection: onClearSelection, isExiting: isExiting } = props1;
+    let stringFormatter = (0, $cRsNx$reactariai18n.useLocalizedStringFormatter)((0, ($parcel$interopDefault($4526404114e78c80$exports))), '@react-spectrum/s2');
+    // Store the last count greater than zero so that we can retain it while rendering the fade-out animation.
+    let [lastCount, setLastCount] = (0, $cRsNx$react.useState)(selectedItemCount);
+    if ((selectedItemCount === 'all' || selectedItemCount > 0) && selectedItemCount !== lastCount) setLastCount(selectedItemCount);
+    // Measure the width of the collection's scrollbar and offset the action bar by that amount.
+    let scrollRef = props1.scrollRef;
+    let [scrollbarWidth, setScrollbarWidth] = (0, $cRsNx$react.useState)(0);
+    let updateScrollbarWidth = (0, $cRsNx$react.useCallback)(()=>{
+        let el = scrollRef?.current;
+        if (el) {
+            let w = el.offsetWidth - el.clientWidth;
+            setScrollbarWidth(w);
+        }
+    }, [
+        scrollRef
+    ]);
+    (0, $cRsNx$reactariautils.useResizeObserver)({
+        ref: scrollRef,
+        onResize: updateScrollbarWidth
+    });
+    let { keyboardProps: keyboardProps } = (0, $cRsNx$reactaria.useKeyboard)({
+        onKeyDown (e) {
+            if (e.key === 'Escape') {
+                e.preventDefault();
+                onClearSelection?.();
+            } else e.continuePropagation();
+        }
+    });
+    // Announce "actions available" on mount.
+    let isInitial = (0, $cRsNx$react.useRef)(true);
+    (0, $cRsNx$react.useEffect)(()=>{
+        if (isInitial.current && scrollRef) {
+            isInitial.current = false;
+            (0, $cRsNx$reactarialiveannouncer.announce)(stringFormatter.format('actionbar.actionsAvailable'));
+        }
+    }, [
+        stringFormatter,
+        scrollRef
+    ]);
+    return /*#__PURE__*/ (0, $cRsNx$reactjsxruntime.jsx)((0, $cRsNx$reactaria.FocusScope), {
+        restoreFocus: true,
+        children: /*#__PURE__*/ (0, $cRsNx$reactjsxruntime.jsxs)("div", {
+            ref: ref,
+            ...keyboardProps,
+            className: $85bf454149fe9ddc$var$actionBarStyles({
+                isEmphasized: isEmphasized,
+                isInContainer: !!scrollRef,
+                isExiting: isExiting
+            }),
+            style: {
+                insetInlineEnd: `calc(var(--insetEnd) + ${scrollbarWidth}px)`
+            },
+            children: [
+                /*#__PURE__*/ (0, $cRsNx$reactjsxruntime.jsx)("div", {
+                    className: " . __A-3t1y y_d",
+                    children: /*#__PURE__*/ (0, $cRsNx$reactjsxruntime.jsx)((0, $7a26131f6144af2b$exports.ActionButtonGroup), {
+                        staticColor: isEmphasized ? 'auto' : undefined,
+                        isQuiet: true,
+                        "aria-label": stringFormatter.format('actionbar.actions'),
+                        children: children
+                    })
+                }),
+                /*#__PURE__*/ (0, $cRsNx$reactjsxruntime.jsxs)("div", {
+                    className: " . __A-3t1x _Zd _1c ic jc",
+                    children: [
+                        /*#__PURE__*/ (0, $cRsNx$reactjsxruntime.jsx)((0, $2f907cb84c6e9e75$exports.CloseButton), {
+                            staticColor: isEmphasized ? 'auto' : undefined,
+                            "aria-label": stringFormatter.format('actionbar.clearSelection'),
+                            onPress: ()=>onClearSelection?.()
+                        }),
+                        /*#__PURE__*/ (0, $cRsNx$reactjsxruntime.jsx)("span", {
+                            className: function anonymous(props) {
+                                let rules = " .";
+                                rules += ' _c-bc1l9oh';
+                                rules += ' _c-1uotwbwg';
+                                rules += ' _c-eo0c6sf';
+                                rules += ' _c-enzzrge';
+                                rules += ' _c-enzykdd';
+                                rules += ' _c-enzwzjc';
+                                rules += ' _c-enzrfpb';
+                                rules += ' _ca';
+                                rules += ' _dbf';
+                                rules += ' _de';
+                                rules += ' _eb';
+                                rules += ' _f-1x99dlob';
+                                rules += ' _fa';
+                                if (props.isEmphasized) rules += ' ad';
+                                else {
+                                    if (props.isPressed) rules += ' ao';
+                                    else if (props.isFocusVisible) rules += ' ao';
+                                    else if (props.isHovered) rules += ' ao';
+                                    else rules += ' an';
+                                }
+                                return rules;
+                            }({
+                                isEmphasized: isEmphasized
+                            }),
+                            children: lastCount === 'all' ? stringFormatter.format('actionbar.selectedAll') : stringFormatter.format('actionbar.selected', {
+                                count: lastCount
+                            })
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+});
+function $85bf454149fe9ddc$export$13f32e21845e01d0(props) {
+    let { renderActionBar: renderActionBar, scrollRef: scrollRef } = props;
+    let [selectedKeys, setSelectedKeys] = (0, $cRsNx$reactstatelyutils.useControlledState)(props.selectedKeys, props.defaultSelectedKeys || new Set(), props.onSelectionChange);
+    let selectedKeysSet = (0, $cRsNx$react.useMemo)(()=>selectedKeys === 'all' ? selectedKeys : new Set(selectedKeys), [
+        selectedKeys
+    ]);
+    let actionBar = (0, $cRsNx$react.useMemo)(()=>renderActionBar?.(selectedKeysSet), [
+        renderActionBar,
+        selectedKeysSet
+    ]);
+    let selectedItemCount = selectedKeysSet === 'all' ? 'all' : selectedKeysSet.size;
+    let [actionBarHeight, setActionBarHeight] = (0, $cRsNx$react.useState)(0);
+    let actionBarRef = (0, $cRsNx$react.useCallback)((ref)=>{
+        let actionBar = ref?.UNSAFE_getDOMNode();
+        if (actionBar) setActionBarHeight(actionBar.offsetHeight + 8);
+        else setActionBarHeight(0);
+    }, []);
+    let actionBarContext = (0, $cRsNx$react.useMemo)(()=>({
+            ref: actionBarRef,
+            scrollRef: scrollRef,
+            selectedItemCount: selectedItemCount,
+            onClearSelection: ()=>setSelectedKeys(new Set())
+        }), [
+        scrollRef,
+        actionBarRef,
+        selectedItemCount,
+        setSelectedKeys
+    ]);
+    let wrappedActionBar = (0, $cRsNx$react.useMemo)(()=>/*#__PURE__*/ (0, $cRsNx$reactjsxruntime.jsx)($85bf454149fe9ddc$export$9f306827c48feef4.Provider, {
+            value: actionBarContext,
+            children: actionBar
+        }), [
+        actionBarContext,
+        actionBar
+    ]);
+    return {
+        selectedKeys: selectedKeys,
+        onSelectionChange: setSelectedKeys,
+        actionBar: wrappedActionBar,
+        actionBarHeight: actionBarHeight
+    };
+}
+
+
+//# sourceMappingURL=ActionBar.cjs.map

package/dist/ActionBar.cjs.map

@@ -0,0 +1 @@
+{"mappings":"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","sources":["packages/@react-spectrum/s2/src/ActionBar.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 {ActionButtonGroup} from './ActionButtonGroup';\nimport {announce} from '@react-aria/live-announcer';\nimport {CloseButton} from './CloseButton';\nimport {ContextValue, SlotProps} from 'react-aria-components';\nimport {createContext, ForwardedRef, forwardRef, ReactElement, ReactNode, RefObject, useCallback, useEffect, useMemo, useRef, useState} from 'react';\nimport {DOMRef, DOMRefValue, Key} from '@react-types/shared';\nimport {FocusScope, useKeyboard} from 'react-aria';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {keyframes} from '../style/style-macro' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {useControlledState} from '@react-stately/utils';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useExitAnimation, useResizeObserver} from '@react-aria/utils';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nconst slideIn = keyframes(`\n  from { transform: translateY(100%); opacity: 0 }\n  to { transform: translateY(0px); opacity: 1 }\n`);\n\nconst slideOut = keyframes(`\n  from { transform: translateY(0px); opacity: 1 }\n  to { transform: translateY(100%); opacity: 0 }\n`);\n\nconst actionBarStyles = style({\n  borderRadius: 'lg',\n  '--s2-container-bg': {\n    type: 'backgroundColor',\n    value: {\n      default: 'elevated',\n      isEmphasized: 'neutral'\n    }\n  },\n  backgroundColor: '--s2-container-bg',\n  boxShadow: 'elevated',\n  boxSizing: 'border-box',\n  outlineStyle: 'solid',\n  outlineWidth: 1,\n  outlineOffset: -1,\n  outlineColor: {\n    default: 'gray-200',\n    isEmphasized: 'transparent',\n    forcedColors: 'ButtonBorder'\n  },\n  paddingX: 8,\n  paddingY: 12,\n  display: 'flex',\n  gap: 16,\n  alignItems: 'center',\n  position: {\n    isInContainer: 'absolute'\n  },\n  bottom: 8,\n  insetStart: 8,\n  '--insetEnd': {\n    type: 'insetEnd',\n    value: 8\n  },\n  width: {\n    default: 'full',\n    isInContainer: 'auto'\n  },\n  marginX: 'auto',\n  maxWidth: 960,\n  animation: {\n    isInContainer: slideIn,\n    isExiting: slideOut\n  },\n  animationDuration: 200\n});\n\nexport interface ActionBarProps extends SlotProps {\n  /** A list of ActionButtons to display. */\n  children: ReactNode,\n  /** Whether the ActionBar should be displayed with a emphasized style. */\n  isEmphasized?: boolean,\n  /** The number of selected items that the ActionBar is currently linked to. If 0, the ActionBar is hidden. */\n  selectedItemCount?: number | 'all',\n  /** Handler that is called when the ActionBar clear button is pressed. */\n  onClearSelection?: () => void,\n  /** A ref to the scrollable element the ActionBar appears above. */\n  scrollRef?: RefObject<HTMLElement | null>\n}\n\nexport const ActionBarContext = createContext<ContextValue<Partial<ActionBarProps>, DOMRefValue<HTMLDivElement>>>(null);\n\nexport const ActionBar = forwardRef(function ActionBar(props: ActionBarProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, ActionBarContext);\n  let domRef = useDOMRef(ref);\n\n  let isOpen = props.selectedItemCount !== 0;\n  let isExiting = useExitAnimation(domRef, isOpen && props.scrollRef != null);\n  if (!isOpen && !isExiting) {\n    return null;\n  }\n\n  return <ActionBarInner {...props} ref={domRef} isExiting={isExiting} />;\n});\n\nconst ActionBarInner = forwardRef(function ActionBarInner(props: ActionBarProps & {isExiting: boolean}, ref: ForwardedRef<HTMLDivElement | null>) {\n  let {isEmphasized, selectedItemCount = 0, children, onClearSelection, isExiting} = props;\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n\n  // Store the last count greater than zero so that we can retain it while rendering the fade-out animation.\n  let [lastCount, setLastCount] = useState(selectedItemCount);\n  if ((selectedItemCount === 'all' || selectedItemCount > 0) && selectedItemCount !== lastCount) {\n    setLastCount(selectedItemCount);\n  }\n    \n  // Measure the width of the collection's scrollbar and offset the action bar by that amount.\n  let scrollRef = props.scrollRef;\n  let [scrollbarWidth, setScrollbarWidth] = useState(0);\n  let updateScrollbarWidth = useCallback(() => {\n    let el = scrollRef?.current;\n    if (el) {\n      let w = el.offsetWidth - el.clientWidth;\n      setScrollbarWidth(w);\n    }\n  }, [scrollRef]);\n\n  useResizeObserver({\n    ref: scrollRef,\n    onResize: updateScrollbarWidth\n  });\n\n  let {keyboardProps} = useKeyboard({\n    onKeyDown(e) {\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        onClearSelection?.();\n      } else {\n        e.continuePropagation();\n      }\n    }\n  });\n\n  // Announce \"actions available\" on mount.\n  let isInitial = useRef(true);\n  useEffect(() => {\n    if (isInitial.current && scrollRef) {\n      isInitial.current = false;\n      announce(stringFormatter.format('actionbar.actionsAvailable'));\n    }\n  }, [stringFormatter, scrollRef]);\n\n  return (\n    <FocusScope restoreFocus>\n      <div\n        ref={ref}\n        {...keyboardProps}\n        className={actionBarStyles({isEmphasized, isInContainer: !!scrollRef, isExiting})}\n        style={{insetInlineEnd: `calc(var(--insetEnd) + ${scrollbarWidth}px)`}}>\n        <div className={style({order: 1, marginStart: 'auto'})}>\n          <ActionButtonGroup\n            staticColor={isEmphasized ? 'auto' : undefined}\n            isQuiet\n            aria-label={stringFormatter.format('actionbar.actions')}>\n            {children}\n          </ActionButtonGroup>\n        </div>\n        <div className={style({order: 0, display: 'flex', alignItems: 'center', gap: 4})}>\n          <CloseButton\n            staticColor={isEmphasized ? 'auto' : undefined}\n            aria-label={stringFormatter.format('actionbar.clearSelection')}\n            onPress={() => onClearSelection?.()} />\n          <span className={style({font: 'ui', color: {default: 'neutral', isEmphasized: 'gray-25'}})({isEmphasized})}>\n            {lastCount === 'all'\n              ? stringFormatter.format('actionbar.selectedAll')\n              : stringFormatter.format('actionbar.selected', {count: lastCount})}\n          </span>\n        </div>\n      </div>\n    </FocusScope>\n  );\n});\n\ninterface ActionBarContainerHookProps {\n  selectedKeys?: 'all' | Iterable<Key>,\n  defaultSelectedKeys?: 'all' | Iterable<Key>,\n  onSelectionChange?: (keys: Set<Key>) => void,\n  renderActionBar?: (selectedKeys: 'all' | Set<Key>) => ReactElement,\n  scrollRef?: RefObject<HTMLElement | null>\n}\n\nexport function useActionBarContainer(props: ActionBarContainerHookProps) {\n  let {renderActionBar, scrollRef} = props;\n  let [selectedKeys, setSelectedKeys] = useControlledState(props.selectedKeys, props.defaultSelectedKeys || new Set(), props.onSelectionChange);\n  let selectedKeysSet = useMemo(() => selectedKeys === 'all' ? selectedKeys as 'all' : new Set(selectedKeys), [selectedKeys]);\n  let actionBar = useMemo(() => renderActionBar?.(selectedKeysSet), [renderActionBar, selectedKeysSet]);\n  let selectedItemCount = selectedKeysSet === 'all' ? 'all' as const : selectedKeysSet.size;\n  let [actionBarHeight, setActionBarHeight] = useState(0);\n  let actionBarRef = useCallback((ref: DOMRefValue | null) => {\n    let actionBar = ref?.UNSAFE_getDOMNode();\n    if (actionBar) {\n      setActionBarHeight(actionBar.offsetHeight + 8);\n    } else {\n      setActionBarHeight(0);\n    }\n  }, []);\n\n  let actionBarContext = useMemo(() => ({\n    ref: actionBarRef,\n    scrollRef,\n    selectedItemCount,\n    onClearSelection: () => setSelectedKeys(new Set())\n  }), [scrollRef, actionBarRef, selectedItemCount, setSelectedKeys]);\n\n  let wrappedActionBar = useMemo(() => (\n    <ActionBarContext.Provider value={actionBarContext}>\n      {actionBar}\n    </ActionBarContext.Provider>\n  ), [actionBarContext, actionBar]);\n\n  return {\n    selectedKeys,\n    onSelectionChange: setSelectedKeys,\n    actionBar: wrappedActionBar,\n    actionBarHeight\n  };\n}\n"],"names":[],"version":3,"file":"ActionBar.cjs.map"}

package/dist/ActionBar.css

@@ -0,0 +1,284 @@
+@keyframes -d9bqcx {
+  from {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes -e7i2y9 {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  to {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+}
+
+@layer _.a {
+  ._vd {
+    border-start-start-radius: .625rem;
+  }
+
+  ._wd {
+    border-start-end-radius: .625rem;
+  }
+
+  ._xd {
+    border-end-start-radius: .625rem;
+  }
+
+  ._yd {
+    border-end-end-radius: .625rem;
+  }
+
+  .-_1de2x0q_b-______x {
+    --s2-container-bg: var(--lightningcss-light, #fff) var(--lightningcss-dark, #222);
+  }
+
+  .-_1de2x0q_b-n {
+    --s2-container-bg: var(--lightningcss-light, #292929) var(--lightningcss-dark, #dbdbdb);
+  }
+
+  .-_1de2x0q_b-o {
+    --s2-container-bg: var(--lightningcss-light, #131313) var(--lightningcss-dark, #f2f2f2);
+  }
+
+  .b-1de2x0q {
+    background-color: var(--s2-container-bg);
+  }
+
+  ._tb {
+    box-shadow: 0 2px 8px var(--lightningcss-light, #00000029) var(--lightningcss-dark, #0000007a);
+  }
+
+  .__na {
+    box-sizing: border-box;
+  }
+
+  ._Lb {
+    outline-style: solid;
+  }
+
+  ._Nb {
+    outline-width: 1px;
+  }
+
+  ._M-3hmpv {
+    outline-offset: -1px;
+  }
+
+  .dh {
+    outline-color: var(--lightningcss-light, #e1e1e1) var(--lightningcss-dark, #323232);
+  }
+
+  .da {
+    outline-color: #0000;
+  }
+
+  .Cd {
+    padding-inline-start: .5rem;
+  }
+
+  .Dd {
+    padding-inline-end: .5rem;
+  }
+
+  .Ee {
+    padding-top: .75rem;
+  }
+
+  .Fe {
+    padding-bottom: .75rem;
+  }
+
+  .if {
+    row-gap: 1rem;
+  }
+
+  .jf {
+    column-gap: 1rem;
+  }
+
+  .Ua {
+    position: absolute;
+  }
+
+  .Zd {
+    bottom: .5rem;
+  }
+
+  .Vd {
+    inset-inline-start: .5rem;
+  }
+
+  .-w2j5q1_W-d {
+    --insetEnd: .5rem;
+  }
+
+  .lb {
+    width: 100%;
+  }
+
+  .la {
+    width: auto;
+  }
+
+  .z_d {
+    margin-inline-end: auto;
+  }
+
+  .r_______________T {
+    max-width: calc(60rem * var(--s2-scale));
+  }
+
+  ._S-xn3rp9 {
+    animation-name: -d9bqcx;
+  }
+
+  ._S-y93obf {
+    animation-name: -e7i2y9;
+  }
+
+  ._T-375xx3 {
+    animation-duration: .2s;
+  }
+
+  ._Ya {
+    animation-timing-function: cubic-bezier(.45, 0, .4, 1);
+  }
+
+  .__A-3t1y {
+    order: 1;
+  }
+
+  .y_d {
+    margin-inline-start: auto;
+  }
+
+  .__A-3t1x {
+    order: 0;
+  }
+
+  ._Zd {
+    display: flex;
+  }
+
+  ._1c {
+    align-items: center;
+  }
+
+  .ic {
+    row-gap: .25rem;
+  }
+
+  .jc {
+    column-gap: .25rem;
+  }
+
+  ._ca {
+    font-family: adobe-clean-variable, adobe-clean, ui-sans-serif, system-ui, sans-serif;
+  }
+
+  ._de {
+    font-size: .875rem;
+  }
+
+  ._eb {
+    font-variation-settings: "wght" 400;
+    font-synthesis-weight: none;
+    font-weight: 400;
+  }
+
+  ._fa {
+    line-height: 1.3;
+  }
+
+  .an {
+    color: var(--lightningcss-light, #292929) var(--lightningcss-dark, #dbdbdb);
+  }
+
+  .ao {
+    color: var(--lightningcss-light, #131313) var(--lightningcss-dark, #f2f2f2);
+  }
+
+  .ad {
+    color: var(--lightningcss-light, #fff) var(--lightningcss-dark, #111);
+  }
+}
+
+@layer _.b {
+  ._c-enzrfpb:lang(ar) {
+    font-family: myriad-arabic, ui-sans-serif, system-ui, sans-serif;
+  }
+
+  ._f-1x99dlob:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
+    line-height: 1.5;
+  }
+}
+
+@layer UNSAFE_overrides;
+
+@layer _.b.a {
+  @media (forced-colors: active) {
+    .da_____I {
+      outline-color: buttonborder;
+    }
+  }
+}
+
+.\.:not(#a#b) {
+  all: revert-layer;
+}
+
+@layer _.c {
+  ._c-enzwzjc:lang(he) {
+    font-family: myriad-hebrew, ui-sans-serif, system-ui, sans-serif;
+  }
+}
+
+@layer _.d {
+  ._c-enzykdd:lang(ja) {
+    font-family: adobe-clean-han-japanese, Hiragino Kaku Gothic ProN, ヒラギノ角ゴ ProN W3, Osaka, YuGothic, Yu Gothic, メイリオ, Meiryo, ＭＳ Ｐゴシック, MS PGothic, sans-serif;
+  }
+}
+
+@layer _.e {
+  ._c-enzzrge:lang(ko) {
+    font-family: adobe-clean-han-korean, source-han-korean, Malgun Gothic, Apple Gothic, sans-serif;
+  }
+}
+
+@layer _.f {
+  ._c-eo0c6sf:lang(zh) {
+    font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Heiti TC Light, sans-serif;
+  }
+}
+
+@layer _.g {
+  ._c-1uotwbwg:lang(zh-hant) {
+    font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Microsoft JhengHei UI, Microsoft JhengHei, Heiti TC Light, sans-serif;
+  }
+}
+
+@layer _.h {
+  ._c-bc1l9oh:is(:lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
+    font-family: adobe-clean-han-simplified-c, source-han-simplified-c, SimSun, Heiti SC Light, sans-serif;
+  }
+}
+
+@layer _.b.b {
+  @media not ((hover: hover) and (pointer: fine)) {
+    ._dbf {
+      font-size: 1.0625rem;
+    }
+  }
+}
+/*# sourceMappingURL=ActionBar.css.map */

package/dist/ActionBar.css.map

@@ -0,0 +1 @@
+{"mappings":"AC6BgB;;;;;;;;;;;;AAKC;;;;;;;;;;;;AAKO;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAgIA;;;;EAAA;;;;EAQA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAKG;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AA7IH;EA6IG;;;;EAAA;;;;;AA7IH;;AAAA;EAAA;IAAA;;;;;;AAgIA;;;;AAaG;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA","sources":["a1b352514784d267","packages/@react-spectrum/s2/src/ActionBar.tsx"],"sourcesContent":["@import \"ae871d7b3899fe46\";\n@import \"b12d7526a8920c7d\";\n@import \"ac539ec7d1ef9296\";\n@import \"e8e91cecf3846843\";\n@import \"c4ab5756a1b19858\";\n@import \"8a738eda46f0e432\";\n","/*\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 {ActionButtonGroup} from './ActionButtonGroup';\nimport {announce} from '@react-aria/live-announcer';\nimport {CloseButton} from './CloseButton';\nimport {ContextValue, SlotProps} from 'react-aria-components';\nimport {createContext, ForwardedRef, forwardRef, ReactElement, ReactNode, RefObject, useCallback, useEffect, useMemo, useRef, useState} from 'react';\nimport {DOMRef, DOMRefValue, Key} from '@react-types/shared';\nimport {FocusScope, useKeyboard} from 'react-aria';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {keyframes} from '../style/style-macro' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {useControlledState} from '@react-stately/utils';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useExitAnimation, useResizeObserver} from '@react-aria/utils';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nconst slideIn = keyframes(`\n  from { transform: translateY(100%); opacity: 0 }\n  to { transform: translateY(0px); opacity: 1 }\n`);\n\nconst slideOut = keyframes(`\n  from { transform: translateY(0px); opacity: 1 }\n  to { transform: translateY(100%); opacity: 0 }\n`);\n\nconst actionBarStyles = style({\n  borderRadius: 'lg',\n  '--s2-container-bg': {\n    type: 'backgroundColor',\n    value: {\n      default: 'elevated',\n      isEmphasized: 'neutral'\n    }\n  },\n  backgroundColor: '--s2-container-bg',\n  boxShadow: 'elevated',\n  boxSizing: 'border-box',\n  outlineStyle: 'solid',\n  outlineWidth: 1,\n  outlineOffset: -1,\n  outlineColor: {\n    default: 'gray-200',\n    isEmphasized: 'transparent',\n    forcedColors: 'ButtonBorder'\n  },\n  paddingX: 8,\n  paddingY: 12,\n  display: 'flex',\n  gap: 16,\n  alignItems: 'center',\n  position: {\n    isInContainer: 'absolute'\n  },\n  bottom: 8,\n  insetStart: 8,\n  '--insetEnd': {\n    type: 'insetEnd',\n    value: 8\n  },\n  width: {\n    default: 'full',\n    isInContainer: 'auto'\n  },\n  marginX: 'auto',\n  maxWidth: 960,\n  animation: {\n    isInContainer: slideIn,\n    isExiting: slideOut\n  },\n  animationDuration: 200\n});\n\nexport interface ActionBarProps extends SlotProps {\n  /** A list of ActionButtons to display. */\n  children: ReactNode,\n  /** Whether the ActionBar should be displayed with a emphasized style. */\n  isEmphasized?: boolean,\n  /** The number of selected items that the ActionBar is currently linked to. If 0, the ActionBar is hidden. */\n  selectedItemCount?: number | 'all',\n  /** Handler that is called when the ActionBar clear button is pressed. */\n  onClearSelection?: () => void,\n  /** A ref to the scrollable element the ActionBar appears above. */\n  scrollRef?: RefObject<HTMLElement | null>\n}\n\nexport const ActionBarContext = createContext<ContextValue<Partial<ActionBarProps>, DOMRefValue<HTMLDivElement>>>(null);\n\nexport const ActionBar = forwardRef(function ActionBar(props: ActionBarProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, ActionBarContext);\n  let domRef = useDOMRef(ref);\n\n  let isOpen = props.selectedItemCount !== 0;\n  let isExiting = useExitAnimation(domRef, isOpen && props.scrollRef != null);\n  if (!isOpen && !isExiting) {\n    return null;\n  }\n\n  return <ActionBarInner {...props} ref={domRef} isExiting={isExiting} />;\n});\n\nconst ActionBarInner = forwardRef(function ActionBarInner(props: ActionBarProps & {isExiting: boolean}, ref: ForwardedRef<HTMLDivElement | null>) {\n  let {isEmphasized, selectedItemCount = 0, children, onClearSelection, isExiting} = props;\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n\n  // Store the last count greater than zero so that we can retain it while rendering the fade-out animation.\n  let [lastCount, setLastCount] = useState(selectedItemCount);\n  if ((selectedItemCount === 'all' || selectedItemCount > 0) && selectedItemCount !== lastCount) {\n    setLastCount(selectedItemCount);\n  }\n    \n  // Measure the width of the collection's scrollbar and offset the action bar by that amount.\n  let scrollRef = props.scrollRef;\n  let [scrollbarWidth, setScrollbarWidth] = useState(0);\n  let updateScrollbarWidth = useCallback(() => {\n    let el = scrollRef?.current;\n    if (el) {\n      let w = el.offsetWidth - el.clientWidth;\n      setScrollbarWidth(w);\n    }\n  }, [scrollRef]);\n\n  useResizeObserver({\n    ref: scrollRef,\n    onResize: updateScrollbarWidth\n  });\n\n  let {keyboardProps} = useKeyboard({\n    onKeyDown(e) {\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        onClearSelection?.();\n      } else {\n        e.continuePropagation();\n      }\n    }\n  });\n\n  // Announce \"actions available\" on mount.\n  let isInitial = useRef(true);\n  useEffect(() => {\n    if (isInitial.current && scrollRef) {\n      isInitial.current = false;\n      announce(stringFormatter.format('actionbar.actionsAvailable'));\n    }\n  }, [stringFormatter, scrollRef]);\n\n  return (\n    <FocusScope restoreFocus>\n      <div\n        ref={ref}\n        {...keyboardProps}\n        className={actionBarStyles({isEmphasized, isInContainer: !!scrollRef, isExiting})}\n        style={{insetInlineEnd: `calc(var(--insetEnd) + ${scrollbarWidth}px)`}}>\n        <div className={style({order: 1, marginStart: 'auto'})}>\n          <ActionButtonGroup\n            staticColor={isEmphasized ? 'auto' : undefined}\n            isQuiet\n            aria-label={stringFormatter.format('actionbar.actions')}>\n            {children}\n          </ActionButtonGroup>\n        </div>\n        <div className={style({order: 0, display: 'flex', alignItems: 'center', gap: 4})}>\n          <CloseButton\n            staticColor={isEmphasized ? 'auto' : undefined}\n            aria-label={stringFormatter.format('actionbar.clearSelection')}\n            onPress={() => onClearSelection?.()} />\n          <span className={style({font: 'ui', color: {default: 'neutral', isEmphasized: 'gray-25'}})({isEmphasized})}>\n            {lastCount === 'all'\n              ? stringFormatter.format('actionbar.selectedAll')\n              : stringFormatter.format('actionbar.selected', {count: lastCount})}\n          </span>\n        </div>\n      </div>\n    </FocusScope>\n  );\n});\n\ninterface ActionBarContainerHookProps {\n  selectedKeys?: 'all' | Iterable<Key>,\n  defaultSelectedKeys?: 'all' | Iterable<Key>,\n  onSelectionChange?: (keys: Set<Key>) => void,\n  renderActionBar?: (selectedKeys: 'all' | Set<Key>) => ReactElement,\n  scrollRef?: RefObject<HTMLElement | null>\n}\n\nexport function useActionBarContainer(props: ActionBarContainerHookProps) {\n  let {renderActionBar, scrollRef} = props;\n  let [selectedKeys, setSelectedKeys] = useControlledState(props.selectedKeys, props.defaultSelectedKeys || new Set(), props.onSelectionChange);\n  let selectedKeysSet = useMemo(() => selectedKeys === 'all' ? selectedKeys as 'all' : new Set(selectedKeys), [selectedKeys]);\n  let actionBar = useMemo(() => renderActionBar?.(selectedKeysSet), [renderActionBar, selectedKeysSet]);\n  let selectedItemCount = selectedKeysSet === 'all' ? 'all' as const : selectedKeysSet.size;\n  let [actionBarHeight, setActionBarHeight] = useState(0);\n  let actionBarRef = useCallback((ref: DOMRefValue | null) => {\n    let actionBar = ref?.UNSAFE_getDOMNode();\n    if (actionBar) {\n      setActionBarHeight(actionBar.offsetHeight + 8);\n    } else {\n      setActionBarHeight(0);\n    }\n  }, []);\n\n  let actionBarContext = useMemo(() => ({\n    ref: actionBarRef,\n    scrollRef,\n    selectedItemCount,\n    onClearSelection: () => setSelectedKeys(new Set())\n  }), [scrollRef, actionBarRef, selectedItemCount, setSelectedKeys]);\n\n  let wrappedActionBar = useMemo(() => (\n    <ActionBarContext.Provider value={actionBarContext}>\n      {actionBar}\n    </ActionBarContext.Provider>\n  ), [actionBarContext, actionBar]);\n\n  return {\n    selectedKeys,\n    onSelectionChange: setSelectedKeys,\n    actionBar: wrappedActionBar,\n    actionBarHeight\n  };\n}\n"],"names":[],"version":3,"file":"ActionBar.css.map"}