@react-spectrum/s2 3.0.0-nightly-412a51816-250219 → 3.0.0-nightly-a792c1ad5-250222

package/dist/SegmentedControl.cjs.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-spectrum/s2/src/SegmentedControl.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 {AriaLabelingProps, DOMRef, DOMRefValue, FocusableRef, Key} from '@react-types/shared';\nimport {centerBaseline} from './CenterBaseline';\nimport {ContextValue, DEFAULT_SLOT, Provider, TextContext as RACTextContext, SlotProps, ToggleButton, ToggleButtonGroup, ToggleGroupStateContext} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode, RefObject, useCallback, useContext, useRef} from 'react';\nimport {focusRing, space, style} from '../style' with {type: 'macro'};\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {IconContext} from './Icon';\nimport {pressScale} from './pressScale';\nimport {Text, TextContext} from './Content';\nimport {useDOMRef, useFocusableRef} from '@react-spectrum/utils';\nimport {useLayoutEffect} from '@react-aria/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface SegmentedControlProps extends AriaLabelingProps, StyleProps, SlotProps {\n  /**\n   * The content to display in the segmented control.\n   */\n  children: ReactNode,\n  /**\n   * Whether the segmented control is disabled.\n   */\n  isDisabled?: boolean,\n  /** Whether the items should divide the container width equally. */\n  isJustified?: boolean,\n  /** The id of the currently selected item (controlled). */\n  selectedKey?: Key | null,\n  /** The id of the initial selected item (uncontrolled). */\n  defaultSelectedKey?: Key,\n  /** Handler that is called when the selection changes. */\n  onSelectionChange?: (id: Key) => void\n}\nexport interface SegmentedControlItemProps extends AriaLabelingProps, StyleProps {\n  /**\n   * The content to display in the segmented control item.\n   */\n  children: ReactNode,\n  /** The id of the item, matching the value used in SegmentedControl's `selectedKey` prop. */\n  id: Key,\n  /** Whether the item is disabled or not. */\n  isDisabled?: boolean\n}\n\nexport const SegmentedControlContext = createContext<ContextValue<Partial<SegmentedControlProps>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst segmentedControl = style({\n  display: 'flex',\n  gap: 4,\n  backgroundColor: 'gray-100',\n  borderRadius: 'default',\n  width: 'fit'\n}, getAllowedOverrides());\n\nconst controlItem = style({\n  ...focusRing(),\n  position: 'relative',\n  display: 'flex',\n  forcedColorAdjust: 'none',\n  font: 'control',\n  color: {\n    default: 'gray-700',\n    isHovered: 'neutral-subdued',\n    isSelected: 'neutral',\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonText',\n      isDisabled: 'GrayText',\n      isSelected: 'HighlightText'\n    }\n  },\n  // TODO: update this padding for icon-only items when we introduce the non-track style back\n  paddingX: {\n    default: 'edge-to-text',\n    ':has([slot=icon]):not(:has([data-rsp-slot=text]))': space(6)\n  },\n  height: 32,\n  alignItems: 'center',\n  flexGrow: {\n    isJustified: 1\n  },\n  flexBasis: {\n    isJustified: 0\n  },\n  flexShrink: 0,\n  minWidth: 0,\n  justifyContent: 'center',\n  whiteSpace: 'nowrap',\n  disableTapHighlight: true,\n  userSelect: 'none',\n  backgroundColor: 'transparent',\n  borderStyle: 'none',\n  borderRadius: 'default',\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n}, getAllowedOverrides());\n\nconst slider = style({\n  backgroundColor: {\n    default: 'gray-25',\n    forcedColors: {\n      default: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  left: 0,\n  width: 'full',\n  height: 'full',\n  position: 'absolute',\n  boxSizing: 'border-box',\n  borderStyle: 'solid',\n  borderWidth: 2,\n  borderColor: {\n    default: 'gray-900',\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  borderRadius: 'lg'\n});\n\ninterface InternalSegmentedControlContextProps {\n  register?: (value: Key, isDisabled?: boolean) => void,\n  prevRef?: RefObject<DOMRect | null>,\n  currentSelectedRef?: RefObject<HTMLDivElement | null>,\n  isJustified?: boolean\n}\n\ninterface DefaultSelectionTrackProps {\n  defaultValue?: Key | null,\n  value?: Key | null,\n  children: ReactNode,\n  prevRef: RefObject<DOMRect | null>,\n  currentSelectedRef: RefObject<HTMLDivElement | null>,\n  isJustified?: boolean\n}\n\nconst InternalSegmentedControlContext = createContext<InternalSegmentedControlContextProps>({});\n\n/**\n * A SegmentedControl is a mutually exclusive group of buttons used for view switching.\n */\nexport const SegmentedControl = /*#__PURE__*/ forwardRef(function SegmentedControl(props: SegmentedControlProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, SegmentedControlContext);\n  let {\n    defaultSelectedKey,\n    selectedKey,\n    onSelectionChange\n  } = props;\n  let domRef = useDOMRef(ref);\n\n  let prevRef = useRef<DOMRect>(null);\n  let currentSelectedRef = useRef<HTMLDivElement>(null);\n\n  let onChange = (values: Set<Key>) => {\n    if (currentSelectedRef.current) {\n      prevRef.current = currentSelectedRef?.current.getBoundingClientRect();\n    }\n    \n    if (onSelectionChange) {\n      onSelectionChange(values.values().next().value);\n    }\n  };\n\n  return (\n    <ToggleButtonGroup \n      {...props}\n      selectedKeys={selectedKey != null ? [selectedKey] : undefined}\n      defaultSelectedKeys={defaultSelectedKey != null ? [defaultSelectedKey] : undefined}\n      disallowEmptySelection\n      ref={domRef}\n      orientation=\"horizontal\"\n      style={props.UNSAFE_style}\n      onSelectionChange={onChange}\n      className={(props.UNSAFE_className || '') + segmentedControl(null, props.styles)}\n      aria-label={props['aria-label']}>\n      <DefaultSelectionTracker defaultValue={defaultSelectedKey} value={selectedKey} prevRef={prevRef} currentSelectedRef={currentSelectedRef} isJustified={props.isJustified}>\n        {props.children}\n      </DefaultSelectionTracker>\n    </ToggleButtonGroup>\n  );\n});\n\nfunction DefaultSelectionTracker(props: DefaultSelectionTrackProps) {\n  let state = useContext(ToggleGroupStateContext);\n  let isRegistered = useRef(!(props.defaultValue == null && props.value == null));\n\n  // default select the first available item\n  let register = useCallback((value: Key) => {\n    if (state && !isRegistered.current) {\n      isRegistered.current = true;\n      state.toggleKey(value);\n    }\n  }, []);\n\n  return (\n    <Provider\n      values={[\n        [InternalSegmentedControlContext, {register: register, prevRef: props.prevRef, currentSelectedRef: props.currentSelectedRef, isJustified: props.isJustified}]\n      ]}> \n      {props.children}\n    </Provider>\n  );\n}\n\n/**\n * A SegmentedControlItem represents an option within a SegmentedControl.\n */\nexport const SegmentedControlItem = /*#__PURE__*/ forwardRef(function SegmentedControlItem(props: SegmentedControlItemProps, ref: FocusableRef<HTMLButtonElement>) {\n  let domRef = useFocusableRef(ref);\n  let divRef = useRef<HTMLDivElement>(null);\n  let {register, prevRef, currentSelectedRef, isJustified} = useContext(InternalSegmentedControlContext);\n  let state = useContext(ToggleGroupStateContext);\n  let isSelected = state?.selectedKeys.has(props.id);\n  // do not apply animation if a user has the prefers-reduced-motion setting\n  let isReduced = false;\n  if (window?.matchMedia) {\n    isReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n  }\n\n  useLayoutEffect(() => {\n    register?.(props.id);\n  }, []);\n\n  useLayoutEffect(() => {\n    if (isSelected && prevRef?.current && currentSelectedRef?.current && !isReduced) {\n      let currentItem = currentSelectedRef?.current.getBoundingClientRect();\n\n      let deltaX = prevRef?.current.left - currentItem?.left;\n\n      currentSelectedRef.current.animate(\n        [\n          {transform: `translateX(${deltaX}px)`, width: `${prevRef?.current.width}px`},\n          {transform: 'translateX(0px)', width: `${currentItem.width}px`}\n        ],\n        {\n          duration: 200,\n          easing: 'ease-out'\n        }\n      );\n\n      prevRef.current = null;\n    }\n  }, [isSelected]);\n\n  return (\n    <ToggleButton \n      {...props}\n      ref={domRef} \n      style={props.UNSAFE_style}\n      className={renderProps => (props.UNSAFE_className || '') + controlItem({...renderProps, isJustified}, props.styles)} >\n      {({isSelected, isPressed, isDisabled}) => (\n        <>\n          {isSelected && <div className={slider({isDisabled})} ref={currentSelectedRef} />}\n          <Provider \n            values={[\n              [IconContext, {\n                render: centerBaseline({slot: 'icon', styles: style({order: 0, flexShrink: 0})})\n              }],\n              [RACTextContext, {slots: {[DEFAULT_SLOT]: {}}}],\n              [TextContext, {styles: style({order: 1, truncate: true})}]\n            ]}>\n            <div ref={divRef} style={pressScale(divRef)({isPressed})} className={style({display: 'flex', gap: 'text-to-visual', transition: 'default', alignItems: 'center', minWidth: 0})}>\n              {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n            </div>\n          </Provider>\n        </>\n      )\n      }\n    </ToggleButton>\n  );\n});\n"],"names":[],"version":3,"file":"SegmentedControl.cjs.map"}
+{"mappings":"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","sources":["packages/@react-spectrum/s2/src/SegmentedControl.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 {AriaLabelingProps, DOMRef, DOMRefValue, FocusableRef, Key} from '@react-types/shared';\nimport {centerBaseline} from './CenterBaseline';\nimport {ContextValue, DEFAULT_SLOT, Provider, TextContext as RACTextContext, SlotProps, ToggleButton, ToggleButtonGroup, ToggleGroupStateContext} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode, RefObject, useCallback, useContext, useRef} from 'react';\nimport {focusRing, space, style} from '../style' with {type: 'macro'};\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {IconContext} from './Icon';\nimport {pressScale} from './pressScale';\nimport {Text, TextContext} from './Content';\nimport {useDOMRef, useFocusableRef, useMediaQuery} from '@react-spectrum/utils';\nimport {useLayoutEffect} from '@react-aria/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface SegmentedControlProps extends AriaLabelingProps, StyleProps, SlotProps {\n  /**\n   * The content to display in the segmented control.\n   */\n  children: ReactNode,\n  /**\n   * Whether the segmented control is disabled.\n   */\n  isDisabled?: boolean,\n  /** Whether the items should divide the container width equally. */\n  isJustified?: boolean,\n  /** The id of the currently selected item (controlled). */\n  selectedKey?: Key | null,\n  /** The id of the initial selected item (uncontrolled). */\n  defaultSelectedKey?: Key,\n  /** Handler that is called when the selection changes. */\n  onSelectionChange?: (id: Key) => void\n}\nexport interface SegmentedControlItemProps extends AriaLabelingProps, StyleProps {\n  /**\n   * The content to display in the segmented control item.\n   */\n  children: ReactNode,\n  /** The id of the item, matching the value used in SegmentedControl's `selectedKey` prop. */\n  id: Key,\n  /** Whether the item is disabled or not. */\n  isDisabled?: boolean\n}\n\nexport const SegmentedControlContext = createContext<ContextValue<Partial<SegmentedControlProps>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst segmentedControl = style({\n  display: 'flex',\n  gap: 4,\n  backgroundColor: 'gray-100',\n  borderRadius: 'default',\n  width: 'fit'\n}, getAllowedOverrides());\n\nconst controlItem = style({\n  ...focusRing(),\n  position: 'relative',\n  display: 'flex',\n  forcedColorAdjust: 'none',\n  font: 'control',\n  color: {\n    default: 'gray-700',\n    isHovered: 'neutral-subdued',\n    isSelected: 'neutral',\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonText',\n      isDisabled: 'GrayText',\n      isSelected: 'HighlightText'\n    }\n  },\n  // TODO: update this padding for icon-only items when we introduce the non-track style back\n  paddingX: {\n    default: 'edge-to-text',\n    ':has([slot=icon]):not(:has([data-rsp-slot=text]))': space(6)\n  },\n  height: 32,\n  alignItems: 'center',\n  flexGrow: {\n    isJustified: 1\n  },\n  flexBasis: {\n    isJustified: 0\n  },\n  flexShrink: 0,\n  minWidth: 0,\n  justifyContent: 'center',\n  whiteSpace: 'nowrap',\n  disableTapHighlight: true,\n  userSelect: 'none',\n  backgroundColor: 'transparent',\n  borderStyle: 'none',\n  borderRadius: 'default',\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n}, getAllowedOverrides());\n\nconst slider = style({\n  backgroundColor: {\n    default: 'gray-25',\n    forcedColors: {\n      default: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  left: 0,\n  width: 'full',\n  height: 'full',\n  position: 'absolute',\n  boxSizing: 'border-box',\n  borderStyle: 'solid',\n  borderWidth: 2,\n  borderColor: {\n    default: 'gray-900',\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  borderRadius: 'lg'\n});\n\ninterface InternalSegmentedControlContextProps {\n  register?: (value: Key, isDisabled?: boolean) => void,\n  prevRef?: RefObject<DOMRect | null>,\n  currentSelectedRef?: RefObject<HTMLDivElement | null>,\n  isJustified?: boolean\n}\n\ninterface DefaultSelectionTrackProps {\n  defaultValue?: Key | null,\n  value?: Key | null,\n  children: ReactNode,\n  prevRef: RefObject<DOMRect | null>,\n  currentSelectedRef: RefObject<HTMLDivElement | null>,\n  isJustified?: boolean\n}\n\nconst InternalSegmentedControlContext = createContext<InternalSegmentedControlContextProps>({});\n\n/**\n * A SegmentedControl is a mutually exclusive group of buttons used for view switching.\n */\nexport const SegmentedControl = /*#__PURE__*/ forwardRef(function SegmentedControl(props: SegmentedControlProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, SegmentedControlContext);\n  let {\n    defaultSelectedKey,\n    selectedKey,\n    onSelectionChange\n  } = props;\n  let domRef = useDOMRef(ref);\n\n  let prevRef = useRef<DOMRect>(null);\n  let currentSelectedRef = useRef<HTMLDivElement>(null);\n\n  let onChange = (values: Set<Key>) => {\n    if (currentSelectedRef.current) {\n      prevRef.current = currentSelectedRef?.current.getBoundingClientRect();\n    }\n    \n    if (onSelectionChange) {\n      onSelectionChange(values.values().next().value);\n    }\n  };\n\n  return (\n    <ToggleButtonGroup \n      {...props}\n      selectedKeys={selectedKey != null ? [selectedKey] : undefined}\n      defaultSelectedKeys={defaultSelectedKey != null ? [defaultSelectedKey] : undefined}\n      disallowEmptySelection\n      ref={domRef}\n      orientation=\"horizontal\"\n      style={props.UNSAFE_style}\n      onSelectionChange={onChange}\n      className={(props.UNSAFE_className || '') + segmentedControl(null, props.styles)}\n      aria-label={props['aria-label']}>\n      <DefaultSelectionTracker defaultValue={defaultSelectedKey} value={selectedKey} prevRef={prevRef} currentSelectedRef={currentSelectedRef} isJustified={props.isJustified}>\n        {props.children}\n      </DefaultSelectionTracker>\n    </ToggleButtonGroup>\n  );\n});\n\nfunction DefaultSelectionTracker(props: DefaultSelectionTrackProps) {\n  let state = useContext(ToggleGroupStateContext);\n  let isRegistered = useRef(!(props.defaultValue == null && props.value == null));\n\n  // default select the first available item\n  let register = useCallback((value: Key) => {\n    if (state && !isRegistered.current) {\n      isRegistered.current = true;\n      state.toggleKey(value);\n    }\n  }, []);\n\n  return (\n    <Provider\n      values={[\n        [InternalSegmentedControlContext, {register: register, prevRef: props.prevRef, currentSelectedRef: props.currentSelectedRef, isJustified: props.isJustified}]\n      ]}> \n      {props.children}\n    </Provider>\n  );\n}\n\n/**\n * A SegmentedControlItem represents an option within a SegmentedControl.\n */\nexport const SegmentedControlItem = /*#__PURE__*/ forwardRef(function SegmentedControlItem(props: SegmentedControlItemProps, ref: FocusableRef<HTMLButtonElement>) {\n  let domRef = useFocusableRef(ref);\n  let divRef = useRef<HTMLDivElement>(null);\n  let {register, prevRef, currentSelectedRef, isJustified} = useContext(InternalSegmentedControlContext);\n  let state = useContext(ToggleGroupStateContext);\n  let isSelected = state?.selectedKeys.has(props.id);\n  // do not apply animation if a user has the prefers-reduced-motion setting\n  let reduceMotion = useMediaQuery('(prefers-reduced-motion: reduce)');\n\n  useLayoutEffect(() => {\n    register?.(props.id);\n  }, []);\n\n  useLayoutEffect(() => {\n    if (isSelected && prevRef?.current && currentSelectedRef?.current && !reduceMotion) {\n      let currentItem = currentSelectedRef?.current.getBoundingClientRect();\n\n      let deltaX = prevRef?.current.left - currentItem?.left;\n\n      currentSelectedRef.current.animate(\n        [\n          {transform: `translateX(${deltaX}px)`, width: `${prevRef?.current.width}px`},\n          {transform: 'translateX(0px)', width: `${currentItem.width}px`}\n        ],\n        {\n          duration: 200,\n          easing: 'ease-out'\n        }\n      );\n\n      prevRef.current = null;\n    }\n  }, [isSelected, reduceMotion]);\n\n  return (\n    <ToggleButton \n      {...props}\n      ref={domRef} \n      style={props.UNSAFE_style}\n      className={renderProps => (props.UNSAFE_className || '') + controlItem({...renderProps, isJustified}, props.styles)} >\n      {({isSelected, isPressed, isDisabled}) => (\n        <>\n          {isSelected && <div className={slider({isDisabled})} ref={currentSelectedRef} />}\n          <Provider \n            values={[\n              [IconContext, {\n                render: centerBaseline({slot: 'icon', styles: style({order: 0, flexShrink: 0})})\n              }],\n              [RACTextContext, {slots: {[DEFAULT_SLOT]: {}}}],\n              [TextContext, {styles: style({order: 1, truncate: true})}]\n            ]}>\n            <div ref={divRef} style={pressScale(divRef)({isPressed})} className={style({display: 'flex', gap: 'text-to-visual', transition: 'default', alignItems: 'center', minWidth: 0})}>\n              {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n            </div>\n          </Provider>\n        </>\n      )\n      }\n    </ToggleButton>\n  );\n});\n"],"names":[],"version":3,"file":"SegmentedControl.cjs.map"}

package/dist/SegmentedControl.css.map

@@ -1 +1 @@
-{"mappings":"ACwDyB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAQL;;;;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;;;;EAAA;;;;EA6CL;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAkK+C;;;;EAAA;;;;EAGzB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAE4C;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AA5NxD;EAQL;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IA6CL;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AA7CK;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAoN6D;;;;IAAA","sources":["90909571be522c78","packages/@react-spectrum/s2/src/SegmentedControl.tsx"],"sourcesContent":["@import \"3076f581d900045a\";\n@import \"37c2fdb040131115\";\n@import \"d075b97bae773d34\";\n@import \"6903fca31535b056\";\n@import \"a6b79b4602e6c53c\";\n@import \"c3f3a2eb3541e76f\";\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 {AriaLabelingProps, DOMRef, DOMRefValue, FocusableRef, Key} from '@react-types/shared';\nimport {centerBaseline} from './CenterBaseline';\nimport {ContextValue, DEFAULT_SLOT, Provider, TextContext as RACTextContext, SlotProps, ToggleButton, ToggleButtonGroup, ToggleGroupStateContext} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode, RefObject, useCallback, useContext, useRef} from 'react';\nimport {focusRing, space, style} from '../style' with {type: 'macro'};\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {IconContext} from './Icon';\nimport {pressScale} from './pressScale';\nimport {Text, TextContext} from './Content';\nimport {useDOMRef, useFocusableRef} from '@react-spectrum/utils';\nimport {useLayoutEffect} from '@react-aria/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface SegmentedControlProps extends AriaLabelingProps, StyleProps, SlotProps {\n  /**\n   * The content to display in the segmented control.\n   */\n  children: ReactNode,\n  /**\n   * Whether the segmented control is disabled.\n   */\n  isDisabled?: boolean,\n  /** Whether the items should divide the container width equally. */\n  isJustified?: boolean,\n  /** The id of the currently selected item (controlled). */\n  selectedKey?: Key | null,\n  /** The id of the initial selected item (uncontrolled). */\n  defaultSelectedKey?: Key,\n  /** Handler that is called when the selection changes. */\n  onSelectionChange?: (id: Key) => void\n}\nexport interface SegmentedControlItemProps extends AriaLabelingProps, StyleProps {\n  /**\n   * The content to display in the segmented control item.\n   */\n  children: ReactNode,\n  /** The id of the item, matching the value used in SegmentedControl's `selectedKey` prop. */\n  id: Key,\n  /** Whether the item is disabled or not. */\n  isDisabled?: boolean\n}\n\nexport const SegmentedControlContext = createContext<ContextValue<Partial<SegmentedControlProps>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst segmentedControl = style({\n  display: 'flex',\n  gap: 4,\n  backgroundColor: 'gray-100',\n  borderRadius: 'default',\n  width: 'fit'\n}, getAllowedOverrides());\n\nconst controlItem = style({\n  ...focusRing(),\n  position: 'relative',\n  display: 'flex',\n  forcedColorAdjust: 'none',\n  font: 'control',\n  color: {\n    default: 'gray-700',\n    isHovered: 'neutral-subdued',\n    isSelected: 'neutral',\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonText',\n      isDisabled: 'GrayText',\n      isSelected: 'HighlightText'\n    }\n  },\n  // TODO: update this padding for icon-only items when we introduce the non-track style back\n  paddingX: {\n    default: 'edge-to-text',\n    ':has([slot=icon]):not(:has([data-rsp-slot=text]))': space(6)\n  },\n  height: 32,\n  alignItems: 'center',\n  flexGrow: {\n    isJustified: 1\n  },\n  flexBasis: {\n    isJustified: 0\n  },\n  flexShrink: 0,\n  minWidth: 0,\n  justifyContent: 'center',\n  whiteSpace: 'nowrap',\n  disableTapHighlight: true,\n  userSelect: 'none',\n  backgroundColor: 'transparent',\n  borderStyle: 'none',\n  borderRadius: 'default',\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n}, getAllowedOverrides());\n\nconst slider = style({\n  backgroundColor: {\n    default: 'gray-25',\n    forcedColors: {\n      default: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  left: 0,\n  width: 'full',\n  height: 'full',\n  position: 'absolute',\n  boxSizing: 'border-box',\n  borderStyle: 'solid',\n  borderWidth: 2,\n  borderColor: {\n    default: 'gray-900',\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  borderRadius: 'lg'\n});\n\ninterface InternalSegmentedControlContextProps {\n  register?: (value: Key, isDisabled?: boolean) => void,\n  prevRef?: RefObject<DOMRect | null>,\n  currentSelectedRef?: RefObject<HTMLDivElement | null>,\n  isJustified?: boolean\n}\n\ninterface DefaultSelectionTrackProps {\n  defaultValue?: Key | null,\n  value?: Key | null,\n  children: ReactNode,\n  prevRef: RefObject<DOMRect | null>,\n  currentSelectedRef: RefObject<HTMLDivElement | null>,\n  isJustified?: boolean\n}\n\nconst InternalSegmentedControlContext = createContext<InternalSegmentedControlContextProps>({});\n\n/**\n * A SegmentedControl is a mutually exclusive group of buttons used for view switching.\n */\nexport const SegmentedControl = /*#__PURE__*/ forwardRef(function SegmentedControl(props: SegmentedControlProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, SegmentedControlContext);\n  let {\n    defaultSelectedKey,\n    selectedKey,\n    onSelectionChange\n  } = props;\n  let domRef = useDOMRef(ref);\n\n  let prevRef = useRef<DOMRect>(null);\n  let currentSelectedRef = useRef<HTMLDivElement>(null);\n\n  let onChange = (values: Set<Key>) => {\n    if (currentSelectedRef.current) {\n      prevRef.current = currentSelectedRef?.current.getBoundingClientRect();\n    }\n    \n    if (onSelectionChange) {\n      onSelectionChange(values.values().next().value);\n    }\n  };\n\n  return (\n    <ToggleButtonGroup \n      {...props}\n      selectedKeys={selectedKey != null ? [selectedKey] : undefined}\n      defaultSelectedKeys={defaultSelectedKey != null ? [defaultSelectedKey] : undefined}\n      disallowEmptySelection\n      ref={domRef}\n      orientation=\"horizontal\"\n      style={props.UNSAFE_style}\n      onSelectionChange={onChange}\n      className={(props.UNSAFE_className || '') + segmentedControl(null, props.styles)}\n      aria-label={props['aria-label']}>\n      <DefaultSelectionTracker defaultValue={defaultSelectedKey} value={selectedKey} prevRef={prevRef} currentSelectedRef={currentSelectedRef} isJustified={props.isJustified}>\n        {props.children}\n      </DefaultSelectionTracker>\n    </ToggleButtonGroup>\n  );\n});\n\nfunction DefaultSelectionTracker(props: DefaultSelectionTrackProps) {\n  let state = useContext(ToggleGroupStateContext);\n  let isRegistered = useRef(!(props.defaultValue == null && props.value == null));\n\n  // default select the first available item\n  let register = useCallback((value: Key) => {\n    if (state && !isRegistered.current) {\n      isRegistered.current = true;\n      state.toggleKey(value);\n    }\n  }, []);\n\n  return (\n    <Provider\n      values={[\n        [InternalSegmentedControlContext, {register: register, prevRef: props.prevRef, currentSelectedRef: props.currentSelectedRef, isJustified: props.isJustified}]\n      ]}> \n      {props.children}\n    </Provider>\n  );\n}\n\n/**\n * A SegmentedControlItem represents an option within a SegmentedControl.\n */\nexport const SegmentedControlItem = /*#__PURE__*/ forwardRef(function SegmentedControlItem(props: SegmentedControlItemProps, ref: FocusableRef<HTMLButtonElement>) {\n  let domRef = useFocusableRef(ref);\n  let divRef = useRef<HTMLDivElement>(null);\n  let {register, prevRef, currentSelectedRef, isJustified} = useContext(InternalSegmentedControlContext);\n  let state = useContext(ToggleGroupStateContext);\n  let isSelected = state?.selectedKeys.has(props.id);\n  // do not apply animation if a user has the prefers-reduced-motion setting\n  let isReduced = false;\n  if (window?.matchMedia) {\n    isReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n  }\n\n  useLayoutEffect(() => {\n    register?.(props.id);\n  }, []);\n\n  useLayoutEffect(() => {\n    if (isSelected && prevRef?.current && currentSelectedRef?.current && !isReduced) {\n      let currentItem = currentSelectedRef?.current.getBoundingClientRect();\n\n      let deltaX = prevRef?.current.left - currentItem?.left;\n\n      currentSelectedRef.current.animate(\n        [\n          {transform: `translateX(${deltaX}px)`, width: `${prevRef?.current.width}px`},\n          {transform: 'translateX(0px)', width: `${currentItem.width}px`}\n        ],\n        {\n          duration: 200,\n          easing: 'ease-out'\n        }\n      );\n\n      prevRef.current = null;\n    }\n  }, [isSelected]);\n\n  return (\n    <ToggleButton \n      {...props}\n      ref={domRef} \n      style={props.UNSAFE_style}\n      className={renderProps => (props.UNSAFE_className || '') + controlItem({...renderProps, isJustified}, props.styles)} >\n      {({isSelected, isPressed, isDisabled}) => (\n        <>\n          {isSelected && <div className={slider({isDisabled})} ref={currentSelectedRef} />}\n          <Provider \n            values={[\n              [IconContext, {\n                render: centerBaseline({slot: 'icon', styles: style({order: 0, flexShrink: 0})})\n              }],\n              [RACTextContext, {slots: {[DEFAULT_SLOT]: {}}}],\n              [TextContext, {styles: style({order: 1, truncate: true})}]\n            ]}>\n            <div ref={divRef} style={pressScale(divRef)({isPressed})} className={style({display: 'flex', gap: 'text-to-visual', transition: 'default', alignItems: 'center', minWidth: 0})}>\n              {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n            </div>\n          </Provider>\n        </>\n      )\n      }\n    </ToggleButton>\n  );\n});\n"],"names":[],"version":3,"file":"SegmentedControl.css.map"}
+{"mappings":"ACwDyB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAQL;;;;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;;;;EAAA;;;;EA6CL;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA+J+C;;;;EAAA;;;;EAGzB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAE4C;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAzNxD;EAQL;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IA6CL;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AA7CK;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAiN6D;;;;IAAA","sources":["90909571be522c78","packages/@react-spectrum/s2/src/SegmentedControl.tsx"],"sourcesContent":["@import \"3076f581d900045a\";\n@import \"37c2fdb040131115\";\n@import \"d075b97bae773d34\";\n@import \"6903fca31535b056\";\n@import \"a6b79b4602e6c53c\";\n@import \"c3f3a2eb3541e76f\";\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 {AriaLabelingProps, DOMRef, DOMRefValue, FocusableRef, Key} from '@react-types/shared';\nimport {centerBaseline} from './CenterBaseline';\nimport {ContextValue, DEFAULT_SLOT, Provider, TextContext as RACTextContext, SlotProps, ToggleButton, ToggleButtonGroup, ToggleGroupStateContext} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode, RefObject, useCallback, useContext, useRef} from 'react';\nimport {focusRing, space, style} from '../style' with {type: 'macro'};\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {IconContext} from './Icon';\nimport {pressScale} from './pressScale';\nimport {Text, TextContext} from './Content';\nimport {useDOMRef, useFocusableRef, useMediaQuery} from '@react-spectrum/utils';\nimport {useLayoutEffect} from '@react-aria/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface SegmentedControlProps extends AriaLabelingProps, StyleProps, SlotProps {\n  /**\n   * The content to display in the segmented control.\n   */\n  children: ReactNode,\n  /**\n   * Whether the segmented control is disabled.\n   */\n  isDisabled?: boolean,\n  /** Whether the items should divide the container width equally. */\n  isJustified?: boolean,\n  /** The id of the currently selected item (controlled). */\n  selectedKey?: Key | null,\n  /** The id of the initial selected item (uncontrolled). */\n  defaultSelectedKey?: Key,\n  /** Handler that is called when the selection changes. */\n  onSelectionChange?: (id: Key) => void\n}\nexport interface SegmentedControlItemProps extends AriaLabelingProps, StyleProps {\n  /**\n   * The content to display in the segmented control item.\n   */\n  children: ReactNode,\n  /** The id of the item, matching the value used in SegmentedControl's `selectedKey` prop. */\n  id: Key,\n  /** Whether the item is disabled or not. */\n  isDisabled?: boolean\n}\n\nexport const SegmentedControlContext = createContext<ContextValue<Partial<SegmentedControlProps>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst segmentedControl = style({\n  display: 'flex',\n  gap: 4,\n  backgroundColor: 'gray-100',\n  borderRadius: 'default',\n  width: 'fit'\n}, getAllowedOverrides());\n\nconst controlItem = style({\n  ...focusRing(),\n  position: 'relative',\n  display: 'flex',\n  forcedColorAdjust: 'none',\n  font: 'control',\n  color: {\n    default: 'gray-700',\n    isHovered: 'neutral-subdued',\n    isSelected: 'neutral',\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonText',\n      isDisabled: 'GrayText',\n      isSelected: 'HighlightText'\n    }\n  },\n  // TODO: update this padding for icon-only items when we introduce the non-track style back\n  paddingX: {\n    default: 'edge-to-text',\n    ':has([slot=icon]):not(:has([data-rsp-slot=text]))': space(6)\n  },\n  height: 32,\n  alignItems: 'center',\n  flexGrow: {\n    isJustified: 1\n  },\n  flexBasis: {\n    isJustified: 0\n  },\n  flexShrink: 0,\n  minWidth: 0,\n  justifyContent: 'center',\n  whiteSpace: 'nowrap',\n  disableTapHighlight: true,\n  userSelect: 'none',\n  backgroundColor: 'transparent',\n  borderStyle: 'none',\n  borderRadius: 'default',\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n}, getAllowedOverrides());\n\nconst slider = style({\n  backgroundColor: {\n    default: 'gray-25',\n    forcedColors: {\n      default: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  left: 0,\n  width: 'full',\n  height: 'full',\n  position: 'absolute',\n  boxSizing: 'border-box',\n  borderStyle: 'solid',\n  borderWidth: 2,\n  borderColor: {\n    default: 'gray-900',\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  borderRadius: 'lg'\n});\n\ninterface InternalSegmentedControlContextProps {\n  register?: (value: Key, isDisabled?: boolean) => void,\n  prevRef?: RefObject<DOMRect | null>,\n  currentSelectedRef?: RefObject<HTMLDivElement | null>,\n  isJustified?: boolean\n}\n\ninterface DefaultSelectionTrackProps {\n  defaultValue?: Key | null,\n  value?: Key | null,\n  children: ReactNode,\n  prevRef: RefObject<DOMRect | null>,\n  currentSelectedRef: RefObject<HTMLDivElement | null>,\n  isJustified?: boolean\n}\n\nconst InternalSegmentedControlContext = createContext<InternalSegmentedControlContextProps>({});\n\n/**\n * A SegmentedControl is a mutually exclusive group of buttons used for view switching.\n */\nexport const SegmentedControl = /*#__PURE__*/ forwardRef(function SegmentedControl(props: SegmentedControlProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, SegmentedControlContext);\n  let {\n    defaultSelectedKey,\n    selectedKey,\n    onSelectionChange\n  } = props;\n  let domRef = useDOMRef(ref);\n\n  let prevRef = useRef<DOMRect>(null);\n  let currentSelectedRef = useRef<HTMLDivElement>(null);\n\n  let onChange = (values: Set<Key>) => {\n    if (currentSelectedRef.current) {\n      prevRef.current = currentSelectedRef?.current.getBoundingClientRect();\n    }\n    \n    if (onSelectionChange) {\n      onSelectionChange(values.values().next().value);\n    }\n  };\n\n  return (\n    <ToggleButtonGroup \n      {...props}\n      selectedKeys={selectedKey != null ? [selectedKey] : undefined}\n      defaultSelectedKeys={defaultSelectedKey != null ? [defaultSelectedKey] : undefined}\n      disallowEmptySelection\n      ref={domRef}\n      orientation=\"horizontal\"\n      style={props.UNSAFE_style}\n      onSelectionChange={onChange}\n      className={(props.UNSAFE_className || '') + segmentedControl(null, props.styles)}\n      aria-label={props['aria-label']}>\n      <DefaultSelectionTracker defaultValue={defaultSelectedKey} value={selectedKey} prevRef={prevRef} currentSelectedRef={currentSelectedRef} isJustified={props.isJustified}>\n        {props.children}\n      </DefaultSelectionTracker>\n    </ToggleButtonGroup>\n  );\n});\n\nfunction DefaultSelectionTracker(props: DefaultSelectionTrackProps) {\n  let state = useContext(ToggleGroupStateContext);\n  let isRegistered = useRef(!(props.defaultValue == null && props.value == null));\n\n  // default select the first available item\n  let register = useCallback((value: Key) => {\n    if (state && !isRegistered.current) {\n      isRegistered.current = true;\n      state.toggleKey(value);\n    }\n  }, []);\n\n  return (\n    <Provider\n      values={[\n        [InternalSegmentedControlContext, {register: register, prevRef: props.prevRef, currentSelectedRef: props.currentSelectedRef, isJustified: props.isJustified}]\n      ]}> \n      {props.children}\n    </Provider>\n  );\n}\n\n/**\n * A SegmentedControlItem represents an option within a SegmentedControl.\n */\nexport const SegmentedControlItem = /*#__PURE__*/ forwardRef(function SegmentedControlItem(props: SegmentedControlItemProps, ref: FocusableRef<HTMLButtonElement>) {\n  let domRef = useFocusableRef(ref);\n  let divRef = useRef<HTMLDivElement>(null);\n  let {register, prevRef, currentSelectedRef, isJustified} = useContext(InternalSegmentedControlContext);\n  let state = useContext(ToggleGroupStateContext);\n  let isSelected = state?.selectedKeys.has(props.id);\n  // do not apply animation if a user has the prefers-reduced-motion setting\n  let reduceMotion = useMediaQuery('(prefers-reduced-motion: reduce)');\n\n  useLayoutEffect(() => {\n    register?.(props.id);\n  }, []);\n\n  useLayoutEffect(() => {\n    if (isSelected && prevRef?.current && currentSelectedRef?.current && !reduceMotion) {\n      let currentItem = currentSelectedRef?.current.getBoundingClientRect();\n\n      let deltaX = prevRef?.current.left - currentItem?.left;\n\n      currentSelectedRef.current.animate(\n        [\n          {transform: `translateX(${deltaX}px)`, width: `${prevRef?.current.width}px`},\n          {transform: 'translateX(0px)', width: `${currentItem.width}px`}\n        ],\n        {\n          duration: 200,\n          easing: 'ease-out'\n        }\n      );\n\n      prevRef.current = null;\n    }\n  }, [isSelected, reduceMotion]);\n\n  return (\n    <ToggleButton \n      {...props}\n      ref={domRef} \n      style={props.UNSAFE_style}\n      className={renderProps => (props.UNSAFE_className || '') + controlItem({...renderProps, isJustified}, props.styles)} >\n      {({isSelected, isPressed, isDisabled}) => (\n        <>\n          {isSelected && <div className={slider({isDisabled})} ref={currentSelectedRef} />}\n          <Provider \n            values={[\n              [IconContext, {\n                render: centerBaseline({slot: 'icon', styles: style({order: 0, flexShrink: 0})})\n              }],\n              [RACTextContext, {slots: {[DEFAULT_SLOT]: {}}}],\n              [TextContext, {styles: style({order: 1, truncate: true})}]\n            ]}>\n            <div ref={divRef} style={pressScale(divRef)({isPressed})} className={style({display: 'flex', gap: 'text-to-visual', transition: 'default', alignItems: 'center', minWidth: 0})}>\n              {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n            </div>\n          </Provider>\n        </>\n      )\n      }\n    </ToggleButton>\n  );\n});\n"],"names":[],"version":3,"file":"SegmentedControl.css.map"}

package/dist/SegmentedControl.mjs

@@ -7,7 +7,7 @@ import {useSpectrumContextProps as $5ce63c423902f47d$export$764f6146fadd77f7} fr
 import {jsx as $ae3Tm$jsx, jsxs as $ae3Tm$jsxs, Fragment as $ae3Tm$Fragment} from "react/jsx-runtime";
 import {ToggleButtonGroup as $ae3Tm$ToggleButtonGroup, ToggleGroupStateContext as $ae3Tm$ToggleGroupStateContext, Provider as $ae3Tm$Provider, ToggleButton as $ae3Tm$ToggleButton, TextContext as $ae3Tm$TextContext, DEFAULT_SLOT as $ae3Tm$DEFAULT_SLOT} from "react-aria-components";
 import {createContext as $ae3Tm$createContext, forwardRef as $ae3Tm$forwardRef, useRef as $ae3Tm$useRef, useContext as $ae3Tm$useContext, useCallback as $ae3Tm$useCallback} from "react";
-import {useDOMRef as $ae3Tm$useDOMRef, useFocusableRef as $ae3Tm$useFocusableRef} from "@react-spectrum/utils";
+import {useDOMRef as $ae3Tm$useDOMRef, useFocusableRef as $ae3Tm$useFocusableRef, useMediaQuery as $ae3Tm$useMediaQuery} from "@react-spectrum/utils";
 import {useLayoutEffect as $ae3Tm$useLayoutEffect} from "@react-aria/utils";
 
 /*
@@ -236,13 +236,12 @@ const $c679c2152e03f8bf$export$4fc12f2742e8cf3f = /*#__PURE__*/ (0, $ae3Tm$forwa
     let state = (0, $ae3Tm$useContext)((0, $ae3Tm$ToggleGroupStateContext));
     let isSelected = state?.selectedKeys.has(props.id);
     // do not apply animation if a user has the prefers-reduced-motion setting
-    let isReduced = false;
-    if (window?.matchMedia) isReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    let reduceMotion = (0, $ae3Tm$useMediaQuery)('(prefers-reduced-motion: reduce)');
     (0, $ae3Tm$useLayoutEffect)(()=>{
         register?.(props.id);
     }, []);
     (0, $ae3Tm$useLayoutEffect)(()=>{
-        if (isSelected && prevRef?.current && currentSelectedRef?.current && !isReduced) {
+        if (isSelected && prevRef?.current && currentSelectedRef?.current && !reduceMotion) {
             let currentItem = currentSelectedRef?.current.getBoundingClientRect();
             let deltaX = prevRef?.current.left - currentItem?.left;
             currentSelectedRef.current.animate([
@@ -261,7 +260,8 @@ const $c679c2152e03f8bf$export$4fc12f2742e8cf3f = /*#__PURE__*/ (0, $ae3Tm$forwa
             prevRef.current = null;
         }
     }, [
-        isSelected
+        isSelected,
+        reduceMotion
     ]);
     return /*#__PURE__*/ (0, $ae3Tm$jsx)((0, $ae3Tm$ToggleButton), {
         ...props,

package/dist/SegmentedControl.mjs.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-spectrum/s2/src/SegmentedControl.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 {AriaLabelingProps, DOMRef, DOMRefValue, FocusableRef, Key} from '@react-types/shared';\nimport {centerBaseline} from './CenterBaseline';\nimport {ContextValue, DEFAULT_SLOT, Provider, TextContext as RACTextContext, SlotProps, ToggleButton, ToggleButtonGroup, ToggleGroupStateContext} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode, RefObject, useCallback, useContext, useRef} from 'react';\nimport {focusRing, space, style} from '../style' with {type: 'macro'};\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {IconContext} from './Icon';\nimport {pressScale} from './pressScale';\nimport {Text, TextContext} from './Content';\nimport {useDOMRef, useFocusableRef} from '@react-spectrum/utils';\nimport {useLayoutEffect} from '@react-aria/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface SegmentedControlProps extends AriaLabelingProps, StyleProps, SlotProps {\n  /**\n   * The content to display in the segmented control.\n   */\n  children: ReactNode,\n  /**\n   * Whether the segmented control is disabled.\n   */\n  isDisabled?: boolean,\n  /** Whether the items should divide the container width equally. */\n  isJustified?: boolean,\n  /** The id of the currently selected item (controlled). */\n  selectedKey?: Key | null,\n  /** The id of the initial selected item (uncontrolled). */\n  defaultSelectedKey?: Key,\n  /** Handler that is called when the selection changes. */\n  onSelectionChange?: (id: Key) => void\n}\nexport interface SegmentedControlItemProps extends AriaLabelingProps, StyleProps {\n  /**\n   * The content to display in the segmented control item.\n   */\n  children: ReactNode,\n  /** The id of the item, matching the value used in SegmentedControl's `selectedKey` prop. */\n  id: Key,\n  /** Whether the item is disabled or not. */\n  isDisabled?: boolean\n}\n\nexport const SegmentedControlContext = createContext<ContextValue<Partial<SegmentedControlProps>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst segmentedControl = style({\n  display: 'flex',\n  gap: 4,\n  backgroundColor: 'gray-100',\n  borderRadius: 'default',\n  width: 'fit'\n}, getAllowedOverrides());\n\nconst controlItem = style({\n  ...focusRing(),\n  position: 'relative',\n  display: 'flex',\n  forcedColorAdjust: 'none',\n  font: 'control',\n  color: {\n    default: 'gray-700',\n    isHovered: 'neutral-subdued',\n    isSelected: 'neutral',\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonText',\n      isDisabled: 'GrayText',\n      isSelected: 'HighlightText'\n    }\n  },\n  // TODO: update this padding for icon-only items when we introduce the non-track style back\n  paddingX: {\n    default: 'edge-to-text',\n    ':has([slot=icon]):not(:has([data-rsp-slot=text]))': space(6)\n  },\n  height: 32,\n  alignItems: 'center',\n  flexGrow: {\n    isJustified: 1\n  },\n  flexBasis: {\n    isJustified: 0\n  },\n  flexShrink: 0,\n  minWidth: 0,\n  justifyContent: 'center',\n  whiteSpace: 'nowrap',\n  disableTapHighlight: true,\n  userSelect: 'none',\n  backgroundColor: 'transparent',\n  borderStyle: 'none',\n  borderRadius: 'default',\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n}, getAllowedOverrides());\n\nconst slider = style({\n  backgroundColor: {\n    default: 'gray-25',\n    forcedColors: {\n      default: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  left: 0,\n  width: 'full',\n  height: 'full',\n  position: 'absolute',\n  boxSizing: 'border-box',\n  borderStyle: 'solid',\n  borderWidth: 2,\n  borderColor: {\n    default: 'gray-900',\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  borderRadius: 'lg'\n});\n\ninterface InternalSegmentedControlContextProps {\n  register?: (value: Key, isDisabled?: boolean) => void,\n  prevRef?: RefObject<DOMRect | null>,\n  currentSelectedRef?: RefObject<HTMLDivElement | null>,\n  isJustified?: boolean\n}\n\ninterface DefaultSelectionTrackProps {\n  defaultValue?: Key | null,\n  value?: Key | null,\n  children: ReactNode,\n  prevRef: RefObject<DOMRect | null>,\n  currentSelectedRef: RefObject<HTMLDivElement | null>,\n  isJustified?: boolean\n}\n\nconst InternalSegmentedControlContext = createContext<InternalSegmentedControlContextProps>({});\n\n/**\n * A SegmentedControl is a mutually exclusive group of buttons used for view switching.\n */\nexport const SegmentedControl = /*#__PURE__*/ forwardRef(function SegmentedControl(props: SegmentedControlProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, SegmentedControlContext);\n  let {\n    defaultSelectedKey,\n    selectedKey,\n    onSelectionChange\n  } = props;\n  let domRef = useDOMRef(ref);\n\n  let prevRef = useRef<DOMRect>(null);\n  let currentSelectedRef = useRef<HTMLDivElement>(null);\n\n  let onChange = (values: Set<Key>) => {\n    if (currentSelectedRef.current) {\n      prevRef.current = currentSelectedRef?.current.getBoundingClientRect();\n    }\n    \n    if (onSelectionChange) {\n      onSelectionChange(values.values().next().value);\n    }\n  };\n\n  return (\n    <ToggleButtonGroup \n      {...props}\n      selectedKeys={selectedKey != null ? [selectedKey] : undefined}\n      defaultSelectedKeys={defaultSelectedKey != null ? [defaultSelectedKey] : undefined}\n      disallowEmptySelection\n      ref={domRef}\n      orientation=\"horizontal\"\n      style={props.UNSAFE_style}\n      onSelectionChange={onChange}\n      className={(props.UNSAFE_className || '') + segmentedControl(null, props.styles)}\n      aria-label={props['aria-label']}>\n      <DefaultSelectionTracker defaultValue={defaultSelectedKey} value={selectedKey} prevRef={prevRef} currentSelectedRef={currentSelectedRef} isJustified={props.isJustified}>\n        {props.children}\n      </DefaultSelectionTracker>\n    </ToggleButtonGroup>\n  );\n});\n\nfunction DefaultSelectionTracker(props: DefaultSelectionTrackProps) {\n  let state = useContext(ToggleGroupStateContext);\n  let isRegistered = useRef(!(props.defaultValue == null && props.value == null));\n\n  // default select the first available item\n  let register = useCallback((value: Key) => {\n    if (state && !isRegistered.current) {\n      isRegistered.current = true;\n      state.toggleKey(value);\n    }\n  }, []);\n\n  return (\n    <Provider\n      values={[\n        [InternalSegmentedControlContext, {register: register, prevRef: props.prevRef, currentSelectedRef: props.currentSelectedRef, isJustified: props.isJustified}]\n      ]}> \n      {props.children}\n    </Provider>\n  );\n}\n\n/**\n * A SegmentedControlItem represents an option within a SegmentedControl.\n */\nexport const SegmentedControlItem = /*#__PURE__*/ forwardRef(function SegmentedControlItem(props: SegmentedControlItemProps, ref: FocusableRef<HTMLButtonElement>) {\n  let domRef = useFocusableRef(ref);\n  let divRef = useRef<HTMLDivElement>(null);\n  let {register, prevRef, currentSelectedRef, isJustified} = useContext(InternalSegmentedControlContext);\n  let state = useContext(ToggleGroupStateContext);\n  let isSelected = state?.selectedKeys.has(props.id);\n  // do not apply animation if a user has the prefers-reduced-motion setting\n  let isReduced = false;\n  if (window?.matchMedia) {\n    isReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n  }\n\n  useLayoutEffect(() => {\n    register?.(props.id);\n  }, []);\n\n  useLayoutEffect(() => {\n    if (isSelected && prevRef?.current && currentSelectedRef?.current && !isReduced) {\n      let currentItem = currentSelectedRef?.current.getBoundingClientRect();\n\n      let deltaX = prevRef?.current.left - currentItem?.left;\n\n      currentSelectedRef.current.animate(\n        [\n          {transform: `translateX(${deltaX}px)`, width: `${prevRef?.current.width}px`},\n          {transform: 'translateX(0px)', width: `${currentItem.width}px`}\n        ],\n        {\n          duration: 200,\n          easing: 'ease-out'\n        }\n      );\n\n      prevRef.current = null;\n    }\n  }, [isSelected]);\n\n  return (\n    <ToggleButton \n      {...props}\n      ref={domRef} \n      style={props.UNSAFE_style}\n      className={renderProps => (props.UNSAFE_className || '') + controlItem({...renderProps, isJustified}, props.styles)} >\n      {({isSelected, isPressed, isDisabled}) => (\n        <>\n          {isSelected && <div className={slider({isDisabled})} ref={currentSelectedRef} />}\n          <Provider \n            values={[\n              [IconContext, {\n                render: centerBaseline({slot: 'icon', styles: style({order: 0, flexShrink: 0})})\n              }],\n              [RACTextContext, {slots: {[DEFAULT_SLOT]: {}}}],\n              [TextContext, {styles: style({order: 1, truncate: true})}]\n            ]}>\n            <div ref={divRef} style={pressScale(divRef)({isPressed})} className={style({display: 'flex', gap: 'text-to-visual', transition: 'default', alignItems: 'center', minWidth: 0})}>\n              {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n            </div>\n          </Provider>\n        </>\n      )\n      }\n    </ToggleButton>\n  );\n});\n"],"names":[],"version":3,"file":"SegmentedControl.mjs.map"}
+{"mappings":"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","sources":["packages/@react-spectrum/s2/src/SegmentedControl.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 {AriaLabelingProps, DOMRef, DOMRefValue, FocusableRef, Key} from '@react-types/shared';\nimport {centerBaseline} from './CenterBaseline';\nimport {ContextValue, DEFAULT_SLOT, Provider, TextContext as RACTextContext, SlotProps, ToggleButton, ToggleButtonGroup, ToggleGroupStateContext} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode, RefObject, useCallback, useContext, useRef} from 'react';\nimport {focusRing, space, style} from '../style' with {type: 'macro'};\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {IconContext} from './Icon';\nimport {pressScale} from './pressScale';\nimport {Text, TextContext} from './Content';\nimport {useDOMRef, useFocusableRef, useMediaQuery} from '@react-spectrum/utils';\nimport {useLayoutEffect} from '@react-aria/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface SegmentedControlProps extends AriaLabelingProps, StyleProps, SlotProps {\n  /**\n   * The content to display in the segmented control.\n   */\n  children: ReactNode,\n  /**\n   * Whether the segmented control is disabled.\n   */\n  isDisabled?: boolean,\n  /** Whether the items should divide the container width equally. */\n  isJustified?: boolean,\n  /** The id of the currently selected item (controlled). */\n  selectedKey?: Key | null,\n  /** The id of the initial selected item (uncontrolled). */\n  defaultSelectedKey?: Key,\n  /** Handler that is called when the selection changes. */\n  onSelectionChange?: (id: Key) => void\n}\nexport interface SegmentedControlItemProps extends AriaLabelingProps, StyleProps {\n  /**\n   * The content to display in the segmented control item.\n   */\n  children: ReactNode,\n  /** The id of the item, matching the value used in SegmentedControl's `selectedKey` prop. */\n  id: Key,\n  /** Whether the item is disabled or not. */\n  isDisabled?: boolean\n}\n\nexport const SegmentedControlContext = createContext<ContextValue<Partial<SegmentedControlProps>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst segmentedControl = style({\n  display: 'flex',\n  gap: 4,\n  backgroundColor: 'gray-100',\n  borderRadius: 'default',\n  width: 'fit'\n}, getAllowedOverrides());\n\nconst controlItem = style({\n  ...focusRing(),\n  position: 'relative',\n  display: 'flex',\n  forcedColorAdjust: 'none',\n  font: 'control',\n  color: {\n    default: 'gray-700',\n    isHovered: 'neutral-subdued',\n    isSelected: 'neutral',\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonText',\n      isDisabled: 'GrayText',\n      isSelected: 'HighlightText'\n    }\n  },\n  // TODO: update this padding for icon-only items when we introduce the non-track style back\n  paddingX: {\n    default: 'edge-to-text',\n    ':has([slot=icon]):not(:has([data-rsp-slot=text]))': space(6)\n  },\n  height: 32,\n  alignItems: 'center',\n  flexGrow: {\n    isJustified: 1\n  },\n  flexBasis: {\n    isJustified: 0\n  },\n  flexShrink: 0,\n  minWidth: 0,\n  justifyContent: 'center',\n  whiteSpace: 'nowrap',\n  disableTapHighlight: true,\n  userSelect: 'none',\n  backgroundColor: 'transparent',\n  borderStyle: 'none',\n  borderRadius: 'default',\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n}, getAllowedOverrides());\n\nconst slider = style({\n  backgroundColor: {\n    default: 'gray-25',\n    forcedColors: {\n      default: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  left: 0,\n  width: 'full',\n  height: 'full',\n  position: 'absolute',\n  boxSizing: 'border-box',\n  borderStyle: 'solid',\n  borderWidth: 2,\n  borderColor: {\n    default: 'gray-900',\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  borderRadius: 'lg'\n});\n\ninterface InternalSegmentedControlContextProps {\n  register?: (value: Key, isDisabled?: boolean) => void,\n  prevRef?: RefObject<DOMRect | null>,\n  currentSelectedRef?: RefObject<HTMLDivElement | null>,\n  isJustified?: boolean\n}\n\ninterface DefaultSelectionTrackProps {\n  defaultValue?: Key | null,\n  value?: Key | null,\n  children: ReactNode,\n  prevRef: RefObject<DOMRect | null>,\n  currentSelectedRef: RefObject<HTMLDivElement | null>,\n  isJustified?: boolean\n}\n\nconst InternalSegmentedControlContext = createContext<InternalSegmentedControlContextProps>({});\n\n/**\n * A SegmentedControl is a mutually exclusive group of buttons used for view switching.\n */\nexport const SegmentedControl = /*#__PURE__*/ forwardRef(function SegmentedControl(props: SegmentedControlProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, SegmentedControlContext);\n  let {\n    defaultSelectedKey,\n    selectedKey,\n    onSelectionChange\n  } = props;\n  let domRef = useDOMRef(ref);\n\n  let prevRef = useRef<DOMRect>(null);\n  let currentSelectedRef = useRef<HTMLDivElement>(null);\n\n  let onChange = (values: Set<Key>) => {\n    if (currentSelectedRef.current) {\n      prevRef.current = currentSelectedRef?.current.getBoundingClientRect();\n    }\n    \n    if (onSelectionChange) {\n      onSelectionChange(values.values().next().value);\n    }\n  };\n\n  return (\n    <ToggleButtonGroup \n      {...props}\n      selectedKeys={selectedKey != null ? [selectedKey] : undefined}\n      defaultSelectedKeys={defaultSelectedKey != null ? [defaultSelectedKey] : undefined}\n      disallowEmptySelection\n      ref={domRef}\n      orientation=\"horizontal\"\n      style={props.UNSAFE_style}\n      onSelectionChange={onChange}\n      className={(props.UNSAFE_className || '') + segmentedControl(null, props.styles)}\n      aria-label={props['aria-label']}>\n      <DefaultSelectionTracker defaultValue={defaultSelectedKey} value={selectedKey} prevRef={prevRef} currentSelectedRef={currentSelectedRef} isJustified={props.isJustified}>\n        {props.children}\n      </DefaultSelectionTracker>\n    </ToggleButtonGroup>\n  );\n});\n\nfunction DefaultSelectionTracker(props: DefaultSelectionTrackProps) {\n  let state = useContext(ToggleGroupStateContext);\n  let isRegistered = useRef(!(props.defaultValue == null && props.value == null));\n\n  // default select the first available item\n  let register = useCallback((value: Key) => {\n    if (state && !isRegistered.current) {\n      isRegistered.current = true;\n      state.toggleKey(value);\n    }\n  }, []);\n\n  return (\n    <Provider\n      values={[\n        [InternalSegmentedControlContext, {register: register, prevRef: props.prevRef, currentSelectedRef: props.currentSelectedRef, isJustified: props.isJustified}]\n      ]}> \n      {props.children}\n    </Provider>\n  );\n}\n\n/**\n * A SegmentedControlItem represents an option within a SegmentedControl.\n */\nexport const SegmentedControlItem = /*#__PURE__*/ forwardRef(function SegmentedControlItem(props: SegmentedControlItemProps, ref: FocusableRef<HTMLButtonElement>) {\n  let domRef = useFocusableRef(ref);\n  let divRef = useRef<HTMLDivElement>(null);\n  let {register, prevRef, currentSelectedRef, isJustified} = useContext(InternalSegmentedControlContext);\n  let state = useContext(ToggleGroupStateContext);\n  let isSelected = state?.selectedKeys.has(props.id);\n  // do not apply animation if a user has the prefers-reduced-motion setting\n  let reduceMotion = useMediaQuery('(prefers-reduced-motion: reduce)');\n\n  useLayoutEffect(() => {\n    register?.(props.id);\n  }, []);\n\n  useLayoutEffect(() => {\n    if (isSelected && prevRef?.current && currentSelectedRef?.current && !reduceMotion) {\n      let currentItem = currentSelectedRef?.current.getBoundingClientRect();\n\n      let deltaX = prevRef?.current.left - currentItem?.left;\n\n      currentSelectedRef.current.animate(\n        [\n          {transform: `translateX(${deltaX}px)`, width: `${prevRef?.current.width}px`},\n          {transform: 'translateX(0px)', width: `${currentItem.width}px`}\n        ],\n        {\n          duration: 200,\n          easing: 'ease-out'\n        }\n      );\n\n      prevRef.current = null;\n    }\n  }, [isSelected, reduceMotion]);\n\n  return (\n    <ToggleButton \n      {...props}\n      ref={domRef} \n      style={props.UNSAFE_style}\n      className={renderProps => (props.UNSAFE_className || '') + controlItem({...renderProps, isJustified}, props.styles)} >\n      {({isSelected, isPressed, isDisabled}) => (\n        <>\n          {isSelected && <div className={slider({isDisabled})} ref={currentSelectedRef} />}\n          <Provider \n            values={[\n              [IconContext, {\n                render: centerBaseline({slot: 'icon', styles: style({order: 0, flexShrink: 0})})\n              }],\n              [RACTextContext, {slots: {[DEFAULT_SLOT]: {}}}],\n              [TextContext, {styles: style({order: 1, truncate: true})}]\n            ]}>\n            <div ref={divRef} style={pressScale(divRef)({isPressed})} className={style({display: 'flex', gap: 'text-to-visual', transition: 'default', alignItems: 'center', minWidth: 0})}>\n              {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n            </div>\n          </Provider>\n        </>\n      )\n      }\n    </ToggleButton>\n  );\n});\n"],"names":[],"version":3,"file":"SegmentedControl.mjs.map"}

package/dist/TableView.cjs

@@ -147,13 +147,7 @@ const $bed37377ec7a3a9e$var$ROW_HEIGHTS = {
         large: 60
     }
 };
-class $bed37377ec7a3a9e$export$4e03bdf0174fd602 extends (0, $iLVc8$reactariacomponents.UNSTABLE_TableLayout) {
-    constructor(options){
-        super({
-            ...options,
-            loaderHeight: 60
-        });
-    }
+class $bed37377ec7a3a9e$export$4e03bdf0174fd602 extends (0, $iLVc8$reactariacomponents.TableLayout) {
     isStickyColumn(node) {
         return node.props.isSticky;
     }
@@ -216,18 +210,6 @@ const $bed37377ec7a3a9e$export$b3c27e869d856b7 = /*#__PURE__*/ (0, $iLVc8$react.
     let { UNSAFE_style: UNSAFE_style, UNSAFE_className: UNSAFE_className, isQuiet: isQuiet = false, density: density = 'regular', overflowMode: overflowMode = 'truncate', styles: styles, loadingState: loadingState, onLoadMore: onLoadMore, onResize: propsOnResize, onResizeStart: propsOnResizeStart, onResizeEnd: propsOnResizeEnd, onAction: onAction, ...otherProps } = props;
     let domRef = (0, $iLVc8$reactspectrumutils.useDOMRef)(ref);
     let scale = (0, $ee7b4c497f520c08$exports.useScale)();
-    let layout = (0, $iLVc8$react.useMemo)(()=>{
-        return new $bed37377ec7a3a9e$export$4e03bdf0174fd602({
-            rowHeight: overflowMode === 'wrap' ? undefined : $bed37377ec7a3a9e$var$ROW_HEIGHTS[density][scale],
-            estimatedRowHeight: overflowMode === 'wrap' ? $bed37377ec7a3a9e$var$ROW_HEIGHTS[density][scale] : undefined,
-            // No need for estimated headingHeight since the headers aren't affected by overflow mode: wrap
-            headingHeight: $bed37377ec7a3a9e$var$DEFAULT_HEADER_HEIGHT[scale]
-        });
-    }, [
-        overflowMode,
-        density,
-        scale
-    ]);
     // Starts when the user selects resize from the menu, ends when resizing ends
     // used to control the visibility of the resizer Nubbin
     let [isInResizeMode, setIsInResizeMode] = (0, $iLVc8$react.useState)(false);
@@ -282,8 +264,15 @@ const $bed37377ec7a3a9e$export$b3c27e869d856b7 = /*#__PURE__*/ (0, $iLVc8$react.
         className: (UNSAFE_className || '') + (0, $308b180f49d82d28$exports.mergeStyles)($bed37377ec7a3a9e$var$tableWrapper, styles),
         style: UNSAFE_style,
         children: [
-            /*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsx)((0, $iLVc8$reactariacomponents.UNSTABLE_Virtualizer), {
-                layout: layout,
+            /*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsx)((0, $iLVc8$reactariacomponents.Virtualizer), {
+                layout: $bed37377ec7a3a9e$export$4e03bdf0174fd602,
+                layoutOptions: {
+                    rowHeight: overflowMode === 'wrap' ? undefined : $bed37377ec7a3a9e$var$ROW_HEIGHTS[density][scale],
+                    estimatedRowHeight: overflowMode === 'wrap' ? $bed37377ec7a3a9e$var$ROW_HEIGHTS[density][scale] : undefined,
+                    // No need for estimated headingHeight since the headers aren't affected by overflow mode: wrap
+                    headingHeight: $bed37377ec7a3a9e$var$DEFAULT_HEADER_HEIGHT[scale],
+                    loaderHeight: 60
+                },
                 children: /*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsx)($bed37377ec7a3a9e$var$InternalTableContext.Provider, {
                     value: context,
                     children: /*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsx)((0, $iLVc8$reactariacomponents.Table), {
@@ -467,7 +456,6 @@ const $bed37377ec7a3a9e$var$columnStyles = function anonymous(props) {
     return rules;
 };
 const $bed37377ec7a3a9e$export$816b5d811295e6bc = /*#__PURE__*/ (0, $iLVc8$react.forwardRef)(function Column(props, ref) {
-    let { isHeaderRowHovered: isHeaderRowHovered } = (0, $iLVc8$react.useContext)($bed37377ec7a3a9e$var$InternalTableHeaderContext);
     let { isQuiet: isQuiet } = (0, $iLVc8$react.useContext)($bed37377ec7a3a9e$var$InternalTableContext);
     let { allowsResizing: allowsResizing, children: children, align: align = 'start' } = props;
     let domRef = (0, $iLVc8$reactspectrumutils.useDOMRef)(ref);
@@ -484,7 +472,7 @@ const $bed37377ec7a3a9e$export$816b5d811295e6bc = /*#__PURE__*/ (0, $iLVc8$react
                 align: align,
                 isQuiet: isQuiet
             }),
-        children: ({ allowsSorting: allowsSorting, sortDirection: sortDirection, isFocusVisible: isFocusVisible, sort: sort, startResize: startResize, isHovered: isHovered })=>/*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsxs)((0, $iLVc8$reactjsxruntime.Fragment), {
+        children: ({ allowsSorting: allowsSorting, sortDirection: sortDirection, isFocusVisible: isFocusVisible, sort: sort, startResize: startResize })=>/*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsxs)((0, $iLVc8$reactjsxruntime.Fragment), {
                 children: [
                     isFocusVisible && /*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsx)($bed37377ec7a3a9e$var$CellFocusRing, {}),
                     isColumnResizable ? /*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsx)($bed37377ec7a3a9e$var$ResizableColumnContents, {
@@ -492,7 +480,6 @@ const $bed37377ec7a3a9e$export$816b5d811295e6bc = /*#__PURE__*/ (0, $iLVc8$react
                         sortDirection: sortDirection,
                         sort: sort,
                         startResize: startResize,
-                        isHovered: isHeaderRowHovered || isHovered,
                         align: align,
                         children: children
                     }) : /*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsx)($bed37377ec7a3a9e$var$ColumnContents, {
@@ -595,9 +582,9 @@ const $bed37377ec7a3a9e$var$resizableMenuButtonWrapper = function anonymous(prop
 };
 const $bed37377ec7a3a9e$var$resizerHandleContainer = function anonymous(props) {
     let rules = " .";
-    if (props.isHovered) rules += ' _0a';
+    if (props.isInResizeMode) rules += ' _0a';
     else if (props.isResizing) rules += ' _0a';
-    else rules += ' _0j';
+    else rules += ' _0-zw4ipl';
     rules += ' lA';
     rules += ' kb';
     rules += ' Va';
@@ -617,8 +604,7 @@ const $bed37377ec7a3a9e$var$resizerHandle = function anonymous(props) {
     else rules += ' ba_____H';
     if (props.isResizing) rules += ' b-14crvkh';
     else if (props.isFocusVisible) rules += ' b-14crvkh';
-    else if (props.isHovered) rules += ' bi';
-    else rules += ' ba';
+    else rules += ' bi';
     if (props.isResizing) rules += ' kn';
     else rules += ' kb';
     if (props.isResizing) rules += ' lq';
@@ -631,7 +617,7 @@ const $bed37377ec7a3a9e$var$columnHeaderText = " __wb __xb _na _qb q-1wikn8b __a
 const $bed37377ec7a3a9e$var$chevronIcon = " R-3hn0u yG ybH q-1wikn8b _9-3t1x -rwx0fg_e-b";
 const $bed37377ec7a3a9e$var$nubbin = " Va Ya W-avx9c1 l-1wikn8b k-1wikn8b e-14crvkh ea______a -rwx0fg_e-A -rwx0fg_e-a______b";
 function $bed37377ec7a3a9e$var$ResizableColumnContents(props) {
-    let { allowsSorting: allowsSorting, sortDirection: sortDirection, sort: sort, startResize: startResize, children: children, isHovered: isHovered, align: align } = props;
+    let { allowsSorting: allowsSorting, sortDirection: sortDirection, sort: sort, startResize: startResize, children: children, align: align } = props;
     let { setIsInResizeMode: setIsInResizeMode, isInResizeMode: isInResizeMode } = (0, $iLVc8$react.useContext)($bed37377ec7a3a9e$var$InternalTableContext);
     let stringFormatter = (0, $iLVc8$reactariai18n.useLocalizedStringFormatter)((0, ($parcel$interopDefault($4526404114e78c80$exports))), '@react-spectrum/s2');
     const onMenuSelect = (key)=>{
@@ -729,14 +715,13 @@ function $bed37377ec7a3a9e$var$ResizableColumnContents(props) {
                     className: ({ resizableDirection: resizableDirection, isResizing: isResizing })=>$bed37377ec7a3a9e$var$resizerHandleContainer({
                             resizableDirection: resizableDirection,
                             isResizing: isResizing,
-                            isHovered: isInResizeMode || isHovered
+                            isInResizeMode: isInResizeMode
                         }),
                     children: ({ isFocusVisible: isFocusVisible, isResizing: isResizing })=>/*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsxs)((0, $iLVc8$reactjsxruntime.Fragment), {
                             children: [
                                 /*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsx)($bed37377ec7a3a9e$var$ResizerIndicator, {
                                     isInResizeMode: isInResizeMode,
                                     isFocusVisible: isFocusVisible,
-                                    isHovered: isHovered,
                                     isResizing: isResizing
                                 }),
                                 (isFocusVisible || isInResizeMode) && isResizing && /*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsx)("div", {
@@ -750,16 +735,25 @@ function $bed37377ec7a3a9e$var$ResizableColumnContents(props) {
         ]
     });
 }
-function $bed37377ec7a3a9e$var$ResizerIndicator({ isFocusVisible: isFocusVisible, isHovered: isHovered, isResizing: isResizing, isInResizeMode: isInResizeMode }) {
+function $bed37377ec7a3a9e$var$ResizerIndicator({ isFocusVisible: isFocusVisible, isResizing: isResizing, isInResizeMode: isInResizeMode }) {
     return /*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsx)("div", {
         className: $bed37377ec7a3a9e$var$resizerHandle({
             isFocusVisible: isFocusVisible,
-            isHovered: isHovered || isInResizeMode,
+            isInResizeMode: isInResizeMode,
             isResizing: isResizing
         })
     });
 }
-const $bed37377ec7a3a9e$var$tableHeader = " kb lb bf A-yj899n";
+const $bed37377ec7a3a9e$var$tableHeader = function anonymous(props) {
+    let rules = " .";
+    rules += ' kb';
+    rules += ' lb';
+    rules += ' bf';
+    rules += ' A-yj899n';
+    if (props.isHovered) rules += ' -zw4ipl__0-a';
+    else rules += ' -zw4ipl__0-j';
+    return rules;
+};
 const $bed37377ec7a3a9e$var$selectAllCheckbox = " yf";
 const $bed37377ec7a3a9e$var$selectAllCheckboxColumn = function anonymous(props) {
     let rules = " .";
@@ -783,56 +777,46 @@ const $bed37377ec7a3a9e$var$selectAllCheckboxColumn = function anonymous(props)
     rules += ' bf';
     return rules;
 };
-let $bed37377ec7a3a9e$var$InternalTableHeaderContext = /*#__PURE__*/ (0, $iLVc8$react.createContext)({
-    isHeaderRowHovered: false
-});
 const $bed37377ec7a3a9e$export$f850895b287ef28e = /*#__PURE__*/ (0, $iLVc8$react.forwardRef)(function TableHeader({ columns: columns, children: children }, ref) {
     let scale = (0, $ee7b4c497f520c08$exports.useScale)();
     let { selectionBehavior: selectionBehavior, selectionMode: selectionMode } = (0, $iLVc8$reactariacomponents.useTableOptions)();
     let { isQuiet: isQuiet } = (0, $iLVc8$react.useContext)($bed37377ec7a3a9e$var$InternalTableContext);
-    let [isHeaderRowHovered, setHeaderRowHovered] = (0, $iLVc8$react.useState)(false);
     let domRef = (0, $iLVc8$reactspectrumutils.useDOMRef)(ref);
-    return /*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsx)($bed37377ec7a3a9e$var$InternalTableHeaderContext.Provider, {
-        value: {
-            isHeaderRowHovered: isHeaderRowHovered
-        },
-        children: /*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsxs)((0, $iLVc8$reactariacomponents.TableHeader), {
+    return /*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsxs)((0, $iLVc8$reactariacomponents.TableHeader), {
+        // @ts-ignore
+        ref: domRef,
+        className: $bed37377ec7a3a9e$var$tableHeader,
+        children: [
+            selectionBehavior === 'toggle' && // Also isSticky prop is applied just for the layout, will decide what the RAC api should be later
             // @ts-ignore
-            ref: domRef,
-            onHoverChange: setHeaderRowHovered,
-            className: $bed37377ec7a3a9e$var$tableHeader,
-            children: [
-                selectionBehavior === 'toggle' && // Also isSticky prop is applied just for the layout, will decide what the RAC api should be later
-                // @ts-ignore
-                /*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsx)((0, $iLVc8$reactariacomponents.Column), {
-                    isSticky: true,
-                    width: scale === 'medium' ? 40 : 52,
-                    minWidth: scale === 'medium' ? 40 : 52,
-                    className: $bed37377ec7a3a9e$var$selectAllCheckboxColumn({
-                        isQuiet: isQuiet
-                    }),
-                    children: ({ isFocusVisible: isFocusVisible })=>/*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsxs)((0, $iLVc8$reactjsxruntime.Fragment), {
-                            children: [
-                                selectionMode === 'single' && /*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsxs)((0, $iLVc8$reactjsxruntime.Fragment), {
-                                    children: [
-                                        isFocusVisible && /*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsx)($bed37377ec7a3a9e$var$CellFocusRing, {}),
-                                        /*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsx)($bed37377ec7a3a9e$var$VisuallyHiddenSelectAllLabel, {})
-                                    ]
-                                }),
-                                selectionMode === 'multiple' && /*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsx)((0, $af04e099a53d3e85$exports.Checkbox), {
-                                    isEmphasized: true,
-                                    styles: $bed37377ec7a3a9e$var$selectAllCheckbox,
-                                    slot: "selection"
-                                })
-                            ]
-                        })
+            /*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsx)((0, $iLVc8$reactariacomponents.Column), {
+                isSticky: true,
+                width: scale === 'medium' ? 40 : 52,
+                minWidth: scale === 'medium' ? 40 : 52,
+                className: $bed37377ec7a3a9e$var$selectAllCheckboxColumn({
+                    isQuiet: isQuiet
                 }),
-                /*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsx)((0, $iLVc8$reactariacomponents.Collection), {
-                    items: columns,
-                    children: children
-                })
-            ]
-        })
+                children: ({ isFocusVisible: isFocusVisible })=>/*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsxs)((0, $iLVc8$reactjsxruntime.Fragment), {
+                        children: [
+                            selectionMode === 'single' && /*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsxs)((0, $iLVc8$reactjsxruntime.Fragment), {
+                                children: [
+                                    isFocusVisible && /*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsx)($bed37377ec7a3a9e$var$CellFocusRing, {}),
+                                    /*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsx)($bed37377ec7a3a9e$var$VisuallyHiddenSelectAllLabel, {})
+                                ]
+                            }),
+                            selectionMode === 'multiple' && /*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsx)((0, $af04e099a53d3e85$exports.Checkbox), {
+                                isEmphasized: true,
+                                styles: $bed37377ec7a3a9e$var$selectAllCheckbox,
+                                slot: "selection"
+                            })
+                        ]
+                    })
+            }),
+            /*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsx)((0, $iLVc8$reactariacomponents.Collection), {
+                items: columns,
+                children: children
+            })
+        ]
     });
 });
 function $bed37377ec7a3a9e$var$VisuallyHiddenSelectAllLabel() {