@react-spectrum/s2 1.4.0 → 1.5.1

package/dist/private/ActionBar.css

@@ -1,253 +1,253 @@
 @layer _.a {
-  .oc131 {
+  .oc151 {
     border-start-start-radius: .625rem;
   }
 
-  .nc131 {
+  .nc151 {
     border-start-end-radius: .625rem;
   }
 
-  .kc131 {
+  .kc151 {
     border-end-start-radius: .625rem;
   }
 
-  .jc131 {
+  .jc151 {
     border-end-end-radius: .625rem;
   }
 
-  .-Ovbhqd-g_g131 {
+  .-Ovbhqd-g_g151 {
     --s2-container-bg: light-dark(#fff, #222);
   }
 
-  .-Ovbhqd-g0131 {
+  .-Ovbhqd-g0151 {
     --s2-container-bg: light-dark(#292929, #dbdbdb);
   }
 
-  .gEzkoQe131 {
+  .gEzkoQe151 {
     background-color: var(--s2-container-bg);
   }
 
-  ._nLeasBb131 {
+  ._nLeasBb151 {
     box-shadow: 0 4px 12px light-dark(#00000014, #0000003d), 0 2px 6px light-dark(#0000000a, #0000001f), 0 0 2px light-dark(#0000001f, #0000005c);
   }
 
-  ._oa131 {
+  ._oa151 {
     box-sizing: border-box;
   }
 
-  ._Lf131 {
+  ._Lf151 {
     outline-style: solid;
   }
 
-  ._Mb131 {
+  ._Mb151 {
     outline-width: 1px;
   }
 
-  .Oye39g131 {
+  .Oye39g151 {
     outline-color: light-dark(#fff0, #323232);
   }
 
-  .Oj131 {
+  .Oj151 {
     outline-color: #0000;
   }
 
-  .St131 {
+  .St151 {
     padding-inline-start: 8px;
   }
 
-  .Rt131 {
+  .Rt151 {
     padding-inline-end: 8px;
   }
 
-  .Te131 {
+  .Te151 {
     padding-top: 12px;
   }
 
-  .Qe131 {
+  .Qe151 {
     padding-bottom: 12px;
   }
 
-  .Ul131 {
+  .Ul151 {
     row-gap: 1rem;
   }
 
-  .ql131 {
+  .ql151 {
     column-gap: 1rem;
   }
 
-  ._Pa131 {
+  ._Pa151 {
     position: absolute;
   }
 
-  ._lr131 {
+  ._lr151 {
     bottom: 0;
   }
 
-  ._AI131 {
+  ._AI151 {
     inset-inline-start: 8px;
   }
 
-  .-F3Iohc-_zI131 {
+  .-F3Iohc-_zI151 {
     --insetEnd: 8px;
   }
 
-  .Za131 {
+  .Za151 {
     width: 100%;
   }
 
-  .Zd131 {
+  .Zd151 {
     width: auto;
   }
 
-  .HM131 {
+  .HM151 {
     margin-inline-end: auto;
   }
 
-  .Ll131 {
+  .Ll151 {
     max-width: calc(60rem * var(--s2-scale));
   }
 
-  .Yg131 {
+  .Yg151 {
     transition-property: transform, translate, scale, rotate;
   }
 
-  .Xc131 {
+  .Xc151 {
     transition-duration: .2s;
   }
 
-  ._2b131 {
+  ._2b151 {
     transition-timing-function: cubic-bezier(.45, 0, .4, 1);
   }
 
-  .-_8PloMd-q131 {
+  .-_8PloMd-q151 {
     --translateY: -8px;
   }
 
-  .-_8PloMd-t131 {
+  .-_8PloMd-t151 {
     --translateY: 100%;
   }
 
-  .__Ya131 {
+  .__Ya151 {
     translate: var(--translateX, 0) var(--translateY, 0);
   }
 
-  ._Jb131 {
+  ._Jb151 {
     order: 1;
   }
 
-  .IM131 {
+  .IM151 {
     margin-inline-start: auto;
   }
 
-  ._Ja131 {
+  ._Ja151 {
     order: 0;
   }
 
-  .sd131 {
+  .sd151 {
     display: flex;
   }
 
-  .eb131 {
+  .eb151 {
     align-items: center;
   }
 
-  .Ub131 {
+  .Ub151 {
     row-gap: .25rem;
   }
 
-  .qb131 {
+  .qb151 {
     column-gap: .25rem;
   }
 
-  .uk131 {
+  .uk151 {
     font-family: var(--s2-font-family-sans, adobe-clean-spectrum-vf), adobe-clean-variable, adobe-clean, ui-sans-serif, system-ui, sans-serif;
   }
 
-  .-_6BNtrc-c131 {
+  .-_6BNtrc-c151 {
     --fs: pow(1.125, 0);
   }
 
-  .vx131 {
+  .vx151 {
     font-size: round(var(--s2-font-size-base, 14) * var(--fs) / 16 * 1rem, 1px);
   }
 
-  .xb131 {
+  .xb151 {
     font-weight: 400;
   }
 
-  ._xa131 {
+  ._xa151 {
     font-synthesis-weight: none;
   }
 
-  ._Fd131 {
+  ._Fd151 {
     line-height: round(1em * (1.15 + (1 - ((min(32, var(--s2-font-size-base, 14) * var(--fs)) - 10)) / 22) * .15), 2px);
   }
 
-  .pt131 {
+  .pt151 {
     color: light-dark(#292929, #dbdbdb);
   }
 
-  .pr131 {
+  .pr151 {
     color: light-dark(#fff, #111);
   }
 }
 
 @layer _.b {
-  .ucJ9TBTb131:lang(ar) {
+  .ucJ9TBTb151:lang(ar) {
     font-family: adobe-clean-arabic, myriad-arabic, ui-sans-serif, system-ui, sans-serif;
   }
 
-  ._FnuYUweb131:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
+  ._FnuYUweb151:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
     line-height: 1.5;
   }
 }
 
 @layer _.b.l {
   @media (forced-colors: active) {
-    .Ola131 {
+    .Ola151 {
       outline-color: buttonborder;
     }
   }
 }
 
 @layer _.c {
-  .ud3Euai131:lang(he) {
+  .ud3Euai151:lang(he) {
     font-family: adobe-clean-hebrew, myriad-hebrew, ui-sans-serif, system-ui, sans-serif;
   }
 }
 
 @layer _.d {
-  .uea131:lang(ja) {
+  .uea151: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 {
-  .ugb131:lang(ko) {
+  .ugb151:lang(ko) {
     font-family: adobe-clean-han-korean, source-han-korean, Malgun Gothic, Apple Gothic, sans-serif;
   }
 }
 
 @layer _.f {
-  .uhd131:lang(zh) {
+  .uhd151:lang(zh) {
     font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Heiti TC Light, sans-serif;
   }
 }
 
 @layer _.g {
-  .uje131:lang(zh-hant) {
+  .uje151: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 {
-  .u2NhKxcl131:lang(zh-HK) {
+  .u2NhKxcl151:lang(zh-HK) {
     font-family: adobe-clean-han-hong-kong, source-han-hong-kong, MingLiu, Microsoft JhengHei UI, Microsoft JhengHei, Heiti TC Light, sans-serif;
   }
 }
 
 @layer _.i {
-  .uic131:is(:lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
+  .uic151: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;
   }
 }

package/dist/private/ActionBar.css.map

@@ -1 +1 @@
-{"mappings":"AC4CwB;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;;;;EAkKA;;;;EAAA;;;;EAQA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAOD;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAjLC;EAiLD;;;;EAAA;;;;;AAjLC;EAAA;IAAA;;;;;;AAiLD;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA","sources":["a1b352514784d267","packages/@react-spectrum/s2/src/ActionBar.tsx"],"sourcesContent":["@import \"ae871d7b3899fe46\";\n@import \"b12d7526a8920c7d\";\n@import \"ac539ec7d1ef9296\";\n@import \"e8e91cecf3846843\";\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/private/live-announcer/LiveAnnouncer';\nimport {CloseButton} from './CloseButton';\nimport {ContextValue, SlotProps} from 'react-aria-components/slots';\nimport {\n  createContext,\n  ForwardedRef,\n  forwardRef,\n  ReactElement,\n  ReactNode,\n  RefObject,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState\n} from 'react';\nimport {DOMProps, DOMRef, DOMRefValue, Key} from '@react-types/shared';\nimport {FocusScope} from 'react-aria/FocusScope';\nimport intlMessages from '../intl/*.json';\n// @ts-ignore\nimport {lightDark, style} from '../style' with {type: 'macro'};\nimport {StyleProps} from './style-utils' with {type: 'macro'};\nimport {useControlledState} from 'react-stately/useControlledState';\nimport {useDOMRef} from './useDOMRef';\nimport {useEnterAnimation, useExitAnimation} from 'react-aria/private/utils/animation';\nimport {useKeyboard} from 'react-aria/useKeyboard';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useObjectRef} from 'react-aria/useObjectRef';\nimport {useResizeObserver} from 'react-aria/private/utils/useResizeObserver';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\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  outlineColor: {\n    default: lightDark('transparent-white-25', '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: 0,\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  transition: 'transform',\n  transitionDuration: 200,\n  translateY: {\n    default: -8,\n    isEntering: 'full',\n    isExiting: 'full'\n  }\n});\n\nexport interface ActionBarProps extends SlotProps, StyleProps, DOMProps {\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  /**\n   * The number of selected items that the ActionBar is currently linked to. If 0, the ActionBar is\n   * hidden.\n   */\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 =\n  createContext<ContextValue<Partial<ActionBarProps>, DOMRefValue<HTMLDivElement>>>(null);\n\n/**\n * Action bars are used for single and bulk selection patterns when a user needs to perform actions\n * on one or more items at the same time.\n */\nexport const ActionBar = forwardRef(function ActionBar(\n  props: ActionBarProps,\n  ref: DOMRef<HTMLDivElement>\n) {\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(\n  props: ActionBarProps & {isExiting: boolean},\n  ref: ForwardedRef<HTMLDivElement | null>\n) {\n  let {\n    isEmphasized,\n    selectedItemCount = 0,\n    children,\n    onClearSelection,\n    isExiting,\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    slot,\n    scrollRef,\n    ...otherProps\n  } = 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 [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  let objectRef = useObjectRef(ref);\n  let isEntering = useEnterAnimation(objectRef, !!scrollRef);\n\n  return (\n    <FocusScope restoreFocus>\n      <div\n        ref={objectRef}\n        {...otherProps}\n        {...keyboardProps}\n        className={\n          (props.UNSAFE_className || '') +\n          actionBarStyles({isEmphasized, isInContainer: !!scrollRef, isEntering, isExiting})\n        }\n        style={{\n          insetInlineEnd: `calc(var(--insetEnd) + ${scrollbarWidth}px)`,\n          ...props.UNSAFE_style\n        }}>\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          />\n          <span\n            className={style({font: 'ui', color: {default: 'neutral', isEmphasized: 'gray-25'}})({\n              isEmphasized\n            })}>\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\ninterface ActionBarContainerHookResult {\n  selectedKeys: 'all' | Iterable<Key>;\n  onSelectionChange: (keys: 'all' | Iterable<Key>) => void;\n  actionBar: ReactElement;\n  actionBarHeight: number;\n}\n\nexport function useActionBarContainer(\n  props: ActionBarContainerHookProps\n): ActionBarContainerHookResult {\n  let {renderActionBar, scrollRef} = props;\n  let [selectedKeys, setSelectedKeys] = useControlledState(\n    props.selectedKeys,\n    props.defaultSelectedKeys || new Set(),\n    props.onSelectionChange\n  );\n  let selectedKeysSet = useMemo(\n    () => (selectedKeys === 'all' ? (selectedKeys as 'all') : new Set(selectedKeys)),\n    [selectedKeys]\n  );\n  let actionBar = useMemo(\n    () => renderActionBar?.(selectedKeysSet),\n    [renderActionBar, selectedKeysSet]\n  );\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    () => ({\n      ref: actionBarRef,\n      scrollRef,\n      selectedItemCount,\n      onClearSelection: () => setSelectedKeys(new Set())\n    }),\n    [scrollRef, actionBarRef, selectedItemCount, setSelectedKeys]\n  );\n\n  let wrappedActionBar = useMemo(\n    () => (\n      <ActionBarContext.Provider value={actionBarContext}>{actionBar}</ActionBarContext.Provider>\n    ),\n    [actionBarContext, actionBar]\n  );\n\n  return {\n    selectedKeys,\n    onSelectionChange: setSelectedKeys,\n    actionBar: wrappedActionBar,\n    actionBarHeight\n  };\n}\n"],"names":[],"version":3,"file":"ActionBar.css.map"}
+{"mappings":"AC2CwB;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;;;;EAkKA;;;;EAAA;;;;EAQA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAOD;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAjLC;EAiLD;;;;EAAA;;;;;AAjLC;EAAA;IAAA;;;;;;AAiLD;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA","sources":["a1b352514784d267","packages/@react-spectrum/s2/src/ActionBar.tsx"],"sourcesContent":["@import \"ae871d7b3899fe46\";\n@import \"b12d7526a8920c7d\";\n@import \"ac539ec7d1ef9296\";\n@import \"e8e91cecf3846843\";\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/private/live-announcer/LiveAnnouncer';\nimport {CloseButton} from './CloseButton';\nimport {ContextValue, SlotProps} from 'react-aria-components/slots';\nimport {\n  createContext,\n  ForwardedRef,\n  forwardRef,\n  ReactElement,\n  ReactNode,\n  RefObject,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState\n} from 'react';\nimport {DOMProps, DOMRef, DOMRefValue, Key} from '@react-types/shared';\nimport {FocusScope} from 'react-aria/FocusScope';\nimport intlMessages from '../intl/*.json';\nimport {lightDark, style} from '../style' with {type: 'macro'};\nimport {StyleProps} from './style-utils' with {type: 'macro'};\nimport {useControlledState} from 'react-stately/useControlledState';\nimport {useDOMRef} from './useDOMRef';\nimport {useEnterAnimation, useExitAnimation} from 'react-aria/private/utils/animation';\nimport {useKeyboard} from 'react-aria/useKeyboard';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useObjectRef} from 'react-aria/useObjectRef';\nimport {useResizeObserver} from 'react-aria/private/utils/useResizeObserver';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\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  outlineColor: {\n    default: lightDark('transparent-white-25', '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: 0,\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  transition: 'transform',\n  transitionDuration: 200,\n  translateY: {\n    default: -8,\n    isEntering: 'full',\n    isExiting: 'full'\n  }\n});\n\nexport interface ActionBarProps extends SlotProps, StyleProps, DOMProps {\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  /**\n   * The number of selected items that the ActionBar is currently linked to. If 0, the ActionBar is\n   * hidden.\n   */\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 =\n  createContext<ContextValue<Partial<ActionBarProps>, DOMRefValue<HTMLDivElement>>>(null);\n\n/**\n * Action bars are used for single and bulk selection patterns when a user needs to perform actions\n * on one or more items at the same time.\n */\nexport const ActionBar = forwardRef(function ActionBar(\n  props: ActionBarProps,\n  ref: DOMRef<HTMLDivElement>\n) {\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(\n  props: ActionBarProps & {isExiting: boolean},\n  ref: ForwardedRef<HTMLDivElement | null>\n) {\n  let {\n    isEmphasized,\n    selectedItemCount = 0,\n    children,\n    onClearSelection,\n    isExiting,\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    slot,\n    scrollRef,\n    ...otherProps\n  } = 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 [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  let objectRef = useObjectRef(ref);\n  let isEntering = useEnterAnimation(objectRef, !!scrollRef);\n\n  return (\n    <FocusScope restoreFocus>\n      <div\n        ref={objectRef}\n        {...otherProps}\n        {...keyboardProps}\n        className={\n          (props.UNSAFE_className || '') +\n          actionBarStyles({isEmphasized, isInContainer: !!scrollRef, isEntering, isExiting})\n        }\n        style={{\n          insetInlineEnd: `calc(var(--insetEnd) + ${scrollbarWidth}px)`,\n          ...props.UNSAFE_style\n        }}>\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          />\n          <span\n            className={style({font: 'ui', color: {default: 'neutral', isEmphasized: 'gray-25'}})({\n              isEmphasized\n            })}>\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\ninterface ActionBarContainerHookResult {\n  selectedKeys: 'all' | Iterable<Key>;\n  onSelectionChange: (keys: 'all' | Iterable<Key>) => void;\n  actionBar: ReactElement;\n  actionBarHeight: number;\n}\n\nexport function useActionBarContainer(\n  props: ActionBarContainerHookProps\n): ActionBarContainerHookResult {\n  let {renderActionBar, scrollRef} = props;\n  let [selectedKeys, setSelectedKeys] = useControlledState(\n    props.selectedKeys,\n    props.defaultSelectedKeys || new Set(),\n    props.onSelectionChange\n  );\n  let selectedKeysSet = useMemo(\n    () => (selectedKeys === 'all' ? (selectedKeys as 'all') : new Set(selectedKeys)),\n    [selectedKeys]\n  );\n  let actionBar = useMemo(\n    () => renderActionBar?.(selectedKeysSet),\n    [renderActionBar, selectedKeysSet]\n  );\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    () => ({\n      ref: actionBarRef,\n      scrollRef,\n      selectedItemCount,\n      onClearSelection: () => setSelectedKeys(new Set())\n    }),\n    [scrollRef, actionBarRef, selectedItemCount, setSelectedKeys]\n  );\n\n  let wrappedActionBar = useMemo(\n    () => (\n      <ActionBarContext.Provider value={actionBarContext}>{actionBar}</ActionBarContext.Provider>\n    ),\n    [actionBarContext, actionBar]\n  );\n\n  return {\n    selectedKeys,\n    onSelectionChange: setSelectedKeys,\n    actionBar: wrappedActionBar,\n    actionBarHeight\n  };\n}\n"],"names":[],"version":3,"file":"ActionBar.css.map"}

package/dist/private/ActionBar.mjs

@@ -46,49 +46,49 @@ function $parcel$interopDefault(a) {
 
 const $f21f2186348fbc5b$var$actionBarStyles = function anonymous(props) {
     let rules = " ";
-    rules += ' oc131';
-    rules += ' nc131';
-    rules += ' kc131';
-    rules += ' jc131';
-    if (props.isEmphasized) rules += ' -Ovbhqd-g0131';
-    else rules += ' -Ovbhqd-g_g131';
-    rules += ' gEzkoQe131';
-    rules += ' _nLeasBb131';
-    rules += ' _oa131';
-    rules += ' _Lf131';
-    rules += ' _Mb131';
-    if (props.isEmphasized) rules += ' Oj131';
-    else rules += ' Oye39g131';
-    rules += ' Ola131';
-    rules += ' St131';
-    rules += ' Rt131';
-    rules += ' Te131';
-    rules += ' Qe131';
-    rules += ' sd131';
-    rules += ' Ul131';
-    rules += ' ql131';
-    rules += ' eb131';
-    if (props.isInContainer) rules += ' _Pa131';
-    rules += ' _lr131';
-    rules += ' _AI131';
-    rules += ' -F3Iohc-_zI131';
-    if (props.isInContainer) rules += ' Zd131';
-    else rules += ' Za131';
-    rules += ' IM131';
-    rules += ' HM131';
-    rules += ' Ll131';
-    rules += ' Yg131';
-    rules += ' Xc131';
-    rules += ' _2b131';
+    rules += ' oc151';
+    rules += ' nc151';
+    rules += ' kc151';
+    rules += ' jc151';
+    if (props.isEmphasized) rules += ' -Ovbhqd-g0151';
+    else rules += ' -Ovbhqd-g_g151';
+    rules += ' gEzkoQe151';
+    rules += ' _nLeasBb151';
+    rules += ' _oa151';
+    rules += ' _Lf151';
+    rules += ' _Mb151';
+    if (props.isEmphasized) rules += ' Oj151';
+    else rules += ' Oye39g151';
+    rules += ' Ola151';
+    rules += ' St151';
+    rules += ' Rt151';
+    rules += ' Te151';
+    rules += ' Qe151';
+    rules += ' sd151';
+    rules += ' Ul151';
+    rules += ' ql151';
+    rules += ' eb151';
+    if (props.isInContainer) rules += ' _Pa151';
+    rules += ' _lr151';
+    rules += ' _AI151';
+    rules += ' -F3Iohc-_zI151';
+    if (props.isInContainer) rules += ' Zd151';
+    else rules += ' Za151';
+    rules += ' IM151';
+    rules += ' HM151';
+    rules += ' Ll151';
+    rules += ' Yg151';
+    rules += ' Xc151';
+    rules += ' _2b151';
     if (props.isExiting) {
-        rules += ' -_8PloMd-t131';
-        rules += ' __Ya131';
+        rules += ' -_8PloMd-t151';
+        rules += ' __Ya151';
     } else if (props.isEntering) {
-        rules += ' -_8PloMd-t131';
-        rules += ' __Ya131';
+        rules += ' -_8PloMd-t151';
+        rules += ' __Ya151';
     } else {
-        rules += ' -_8PloMd-q131';
-        rules += ' __Ya131';
+        rules += ' -_8PloMd-q151';
+        rules += ' __Ya151';
     }
     return rules;
 };
@@ -166,7 +166,7 @@ const $f21f2186348fbc5b$var$ActionBarInner = /*#__PURE__*/ (0, $kxwJw$forwardRef
             },
             children: [
                 /*#__PURE__*/ (0, $kxwJw$jsx)("div", {
-                    className: " _Jb131 IM131",
+                    className: " _Jb151 IM151",
                     children: /*#__PURE__*/ (0, $kxwJw$jsx)((0, $10401bdc118cbc90$export$73d695ae27330056), {
                         staticColor: isEmphasized ? 'auto' : undefined,
                         isQuiet: true,
@@ -175,7 +175,7 @@ const $f21f2186348fbc5b$var$ActionBarInner = /*#__PURE__*/ (0, $kxwJw$forwardRef
                     })
                 }),
                 /*#__PURE__*/ (0, $kxwJw$jsxs)("div", {
-                    className: " _Ja131 sd131 eb131 Ub131 qb131",
+                    className: " _Ja151 sd151 eb151 Ub151 qb151",
                     children: [
                         /*#__PURE__*/ (0, $kxwJw$jsx)((0, $a9cda54c4f47ce52$export$de65de8213222d10), {
                             staticColor: isEmphasized ? 'auto' : undefined,
@@ -185,23 +185,23 @@ const $f21f2186348fbc5b$var$ActionBarInner = /*#__PURE__*/ (0, $kxwJw$forwardRef
                         /*#__PURE__*/ (0, $kxwJw$jsx)("span", {
                             className: function anonymous(props) {
                                 let rules = " ";
-                                rules += ' uk131';
-                                rules += ' ucJ9TBTb131';
-                                rules += ' ud3Euai131';
-                                rules += ' uea131';
-                                rules += ' ugb131';
-                                rules += ' uhd131';
-                                rules += ' uje131';
-                                rules += ' u2NhKxcl131';
-                                rules += ' uic131';
-                                rules += ' -_6BNtrc-c131';
-                                rules += ' vx131';
-                                rules += ' xb131';
-                                rules += ' _xa131';
-                                rules += ' _Fd131';
-                                rules += ' _FnuYUweb131';
-                                if (props.isEmphasized) rules += ' pr131';
-                                else rules += ' pt131';
+                                rules += ' uk151';
+                                rules += ' ucJ9TBTb151';
+                                rules += ' ud3Euai151';
+                                rules += ' uea151';
+                                rules += ' ugb151';
+                                rules += ' uhd151';
+                                rules += ' uje151';
+                                rules += ' u2NhKxcl151';
+                                rules += ' uic151';
+                                rules += ' -_6BNtrc-c151';
+                                rules += ' vx151';
+                                rules += ' xb151';
+                                rules += ' _xa151';
+                                rules += ' _Fd151';
+                                rules += ' _FnuYUweb151';
+                                if (props.isEmphasized) rules += ' pr151';
+                                else rules += ' pt151';
                                 return rules;
                             }({
                                 isEmphasized: isEmphasized

package/dist/private/ActionBar.mjs.map

@@ -1 +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/private/live-announcer/LiveAnnouncer';\nimport {CloseButton} from './CloseButton';\nimport {ContextValue, SlotProps} from 'react-aria-components/slots';\nimport {\n  createContext,\n  ForwardedRef,\n  forwardRef,\n  ReactElement,\n  ReactNode,\n  RefObject,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState\n} from 'react';\nimport {DOMProps, DOMRef, DOMRefValue, Key} from '@react-types/shared';\nimport {FocusScope} from 'react-aria/FocusScope';\nimport intlMessages from '../intl/*.json';\n// @ts-ignore\nimport {lightDark, style} from '../style' with {type: 'macro'};\nimport {StyleProps} from './style-utils' with {type: 'macro'};\nimport {useControlledState} from 'react-stately/useControlledState';\nimport {useDOMRef} from './useDOMRef';\nimport {useEnterAnimation, useExitAnimation} from 'react-aria/private/utils/animation';\nimport {useKeyboard} from 'react-aria/useKeyboard';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useObjectRef} from 'react-aria/useObjectRef';\nimport {useResizeObserver} from 'react-aria/private/utils/useResizeObserver';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\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  outlineColor: {\n    default: lightDark('transparent-white-25', '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: 0,\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  transition: 'transform',\n  transitionDuration: 200,\n  translateY: {\n    default: -8,\n    isEntering: 'full',\n    isExiting: 'full'\n  }\n});\n\nexport interface ActionBarProps extends SlotProps, StyleProps, DOMProps {\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  /**\n   * The number of selected items that the ActionBar is currently linked to. If 0, the ActionBar is\n   * hidden.\n   */\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 =\n  createContext<ContextValue<Partial<ActionBarProps>, DOMRefValue<HTMLDivElement>>>(null);\n\n/**\n * Action bars are used for single and bulk selection patterns when a user needs to perform actions\n * on one or more items at the same time.\n */\nexport const ActionBar = forwardRef(function ActionBar(\n  props: ActionBarProps,\n  ref: DOMRef<HTMLDivElement>\n) {\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(\n  props: ActionBarProps & {isExiting: boolean},\n  ref: ForwardedRef<HTMLDivElement | null>\n) {\n  let {\n    isEmphasized,\n    selectedItemCount = 0,\n    children,\n    onClearSelection,\n    isExiting,\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    slot,\n    scrollRef,\n    ...otherProps\n  } = 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 [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  let objectRef = useObjectRef(ref);\n  let isEntering = useEnterAnimation(objectRef, !!scrollRef);\n\n  return (\n    <FocusScope restoreFocus>\n      <div\n        ref={objectRef}\n        {...otherProps}\n        {...keyboardProps}\n        className={\n          (props.UNSAFE_className || '') +\n          actionBarStyles({isEmphasized, isInContainer: !!scrollRef, isEntering, isExiting})\n        }\n        style={{\n          insetInlineEnd: `calc(var(--insetEnd) + ${scrollbarWidth}px)`,\n          ...props.UNSAFE_style\n        }}>\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          />\n          <span\n            className={style({font: 'ui', color: {default: 'neutral', isEmphasized: 'gray-25'}})({\n              isEmphasized\n            })}>\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\ninterface ActionBarContainerHookResult {\n  selectedKeys: 'all' | Iterable<Key>;\n  onSelectionChange: (keys: 'all' | Iterable<Key>) => void;\n  actionBar: ReactElement;\n  actionBarHeight: number;\n}\n\nexport function useActionBarContainer(\n  props: ActionBarContainerHookProps\n): ActionBarContainerHookResult {\n  let {renderActionBar, scrollRef} = props;\n  let [selectedKeys, setSelectedKeys] = useControlledState(\n    props.selectedKeys,\n    props.defaultSelectedKeys || new Set(),\n    props.onSelectionChange\n  );\n  let selectedKeysSet = useMemo(\n    () => (selectedKeys === 'all' ? (selectedKeys as 'all') : new Set(selectedKeys)),\n    [selectedKeys]\n  );\n  let actionBar = useMemo(\n    () => renderActionBar?.(selectedKeysSet),\n    [renderActionBar, selectedKeysSet]\n  );\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    () => ({\n      ref: actionBarRef,\n      scrollRef,\n      selectedItemCount,\n      onClearSelection: () => setSelectedKeys(new Set())\n    }),\n    [scrollRef, actionBarRef, selectedItemCount, setSelectedKeys]\n  );\n\n  let wrappedActionBar = useMemo(\n    () => (\n      <ActionBarContext.Provider value={actionBarContext}>{actionBar}</ActionBarContext.Provider>\n    ),\n    [actionBarContext, actionBar]\n  );\n\n  return {\n    selectedKeys,\n    onSelectionChange: setSelectedKeys,\n    actionBar: wrappedActionBar,\n    actionBarHeight\n  };\n}\n"],"names":[],"version":3,"file":"ActionBar.mjs.map"}
+{"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/private/live-announcer/LiveAnnouncer';\nimport {CloseButton} from './CloseButton';\nimport {ContextValue, SlotProps} from 'react-aria-components/slots';\nimport {\n  createContext,\n  ForwardedRef,\n  forwardRef,\n  ReactElement,\n  ReactNode,\n  RefObject,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState\n} from 'react';\nimport {DOMProps, DOMRef, DOMRefValue, Key} from '@react-types/shared';\nimport {FocusScope} from 'react-aria/FocusScope';\nimport intlMessages from '../intl/*.json';\nimport {lightDark, style} from '../style' with {type: 'macro'};\nimport {StyleProps} from './style-utils' with {type: 'macro'};\nimport {useControlledState} from 'react-stately/useControlledState';\nimport {useDOMRef} from './useDOMRef';\nimport {useEnterAnimation, useExitAnimation} from 'react-aria/private/utils/animation';\nimport {useKeyboard} from 'react-aria/useKeyboard';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useObjectRef} from 'react-aria/useObjectRef';\nimport {useResizeObserver} from 'react-aria/private/utils/useResizeObserver';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\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  outlineColor: {\n    default: lightDark('transparent-white-25', '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: 0,\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  transition: 'transform',\n  transitionDuration: 200,\n  translateY: {\n    default: -8,\n    isEntering: 'full',\n    isExiting: 'full'\n  }\n});\n\nexport interface ActionBarProps extends SlotProps, StyleProps, DOMProps {\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  /**\n   * The number of selected items that the ActionBar is currently linked to. If 0, the ActionBar is\n   * hidden.\n   */\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 =\n  createContext<ContextValue<Partial<ActionBarProps>, DOMRefValue<HTMLDivElement>>>(null);\n\n/**\n * Action bars are used for single and bulk selection patterns when a user needs to perform actions\n * on one or more items at the same time.\n */\nexport const ActionBar = forwardRef(function ActionBar(\n  props: ActionBarProps,\n  ref: DOMRef<HTMLDivElement>\n) {\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(\n  props: ActionBarProps & {isExiting: boolean},\n  ref: ForwardedRef<HTMLDivElement | null>\n) {\n  let {\n    isEmphasized,\n    selectedItemCount = 0,\n    children,\n    onClearSelection,\n    isExiting,\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    slot,\n    scrollRef,\n    ...otherProps\n  } = 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 [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  let objectRef = useObjectRef(ref);\n  let isEntering = useEnterAnimation(objectRef, !!scrollRef);\n\n  return (\n    <FocusScope restoreFocus>\n      <div\n        ref={objectRef}\n        {...otherProps}\n        {...keyboardProps}\n        className={\n          (props.UNSAFE_className || '') +\n          actionBarStyles({isEmphasized, isInContainer: !!scrollRef, isEntering, isExiting})\n        }\n        style={{\n          insetInlineEnd: `calc(var(--insetEnd) + ${scrollbarWidth}px)`,\n          ...props.UNSAFE_style\n        }}>\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          />\n          <span\n            className={style({font: 'ui', color: {default: 'neutral', isEmphasized: 'gray-25'}})({\n              isEmphasized\n            })}>\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\ninterface ActionBarContainerHookResult {\n  selectedKeys: 'all' | Iterable<Key>;\n  onSelectionChange: (keys: 'all' | Iterable<Key>) => void;\n  actionBar: ReactElement;\n  actionBarHeight: number;\n}\n\nexport function useActionBarContainer(\n  props: ActionBarContainerHookProps\n): ActionBarContainerHookResult {\n  let {renderActionBar, scrollRef} = props;\n  let [selectedKeys, setSelectedKeys] = useControlledState(\n    props.selectedKeys,\n    props.defaultSelectedKeys || new Set(),\n    props.onSelectionChange\n  );\n  let selectedKeysSet = useMemo(\n    () => (selectedKeys === 'all' ? (selectedKeys as 'all') : new Set(selectedKeys)),\n    [selectedKeys]\n  );\n  let actionBar = useMemo(\n    () => renderActionBar?.(selectedKeysSet),\n    [renderActionBar, selectedKeysSet]\n  );\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    () => ({\n      ref: actionBarRef,\n      scrollRef,\n      selectedItemCount,\n      onClearSelection: () => setSelectedKeys(new Set())\n    }),\n    [scrollRef, actionBarRef, selectedItemCount, setSelectedKeys]\n  );\n\n  let wrappedActionBar = useMemo(\n    () => (\n      <ActionBarContext.Provider value={actionBarContext}>{actionBar}</ActionBarContext.Provider>\n    ),\n    [actionBarContext, actionBar]\n  );\n\n  return {\n    selectedKeys,\n    onSelectionChange: setSelectedKeys,\n    actionBar: wrappedActionBar,\n    actionBarHeight\n  };\n}\n"],"names":[],"version":3,"file":"ActionBar.mjs.map"}