@react-spectrum/s2 0.9.2 → 0.10.0

package/dist/SegmentedControl.css.map

@@ -1 +1 @@
-{"mappings":"ACwDyB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;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;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAwCL;;;;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;;;;;AA/M7D;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IA+M6D;;;;IAAA;;;;;;AA/M7D;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAwCL;;;;IAAA;;;;IAAA;;;;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 {baseColor, focusRing, style} from '../style' with {type: 'macro'};\nimport {centerBaseline} from './CenterBaseline';\nimport {ContextValue, DEFAULT_SLOT, Provider, TextContext as RACTextContext, SlotProps, ToggleButton, ToggleButtonGroup, ToggleButtonRenderProps, ToggleGroupStateContext} from 'react-aria-components';\nimport {control, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode, RefObject, useCallback, useContext, useRef} from 'react';\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<ToggleButtonRenderProps & {isJustified?: boolean}>({\n  ...focusRing(),\n  ...control({shape: 'default', icon: true}),\n  justifyContent: 'center',\n  position: 'relative',\n  forcedColorAdjust: 'none',\n  color: {\n    default: baseColor('neutral-subdued'),\n    isSelected: baseColor('neutral'),\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonText',\n      isDisabled: 'GrayText',\n      isSelected: 'HighlightText'\n    }\n  },\n  flexGrow: {\n    isJustified: 1\n  },\n  flexBasis: {\n    isJustified: 0\n  },\n  flexShrink: 0,\n  whiteSpace: 'nowrap',\n  disableTapHighlight: true,\n  userSelect: 'none',\n  backgroundColor: 'transparent',\n  borderStyle: 'none',\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  },\n  // The selected item has lower z-index so that the sliding background\n  // animation does not cover other items.\n  zIndex: {\n    default: 1,\n    isSelected: 0\n  }\n}, getAllowedOverrides());\n\nconst slider = style<{isDisabled: boolean}>({\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      let firstKey = values.values().next().value;\n      if (firstKey != null) {\n        onSelectionChange(firstKey);\n      }\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"}
+{"mappings":"ACwDyB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;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;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAwCL;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAmK+C;;;;EAAA;;;;EAGzB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAE4C;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAhN7D;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAwCL;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAxCK;EAAA;IAgN6D;;;;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 {baseColor, focusRing, style} from '../style' with {type: 'macro'};\nimport {centerBaseline} from './CenterBaseline';\nimport {ContextValue, DEFAULT_SLOT, Provider, TextContext as RACTextContext, SlotProps, ToggleButton, ToggleButtonGroup, ToggleButtonRenderProps, ToggleGroupStateContext} from 'react-aria-components';\nimport {control, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode, RefObject, useCallback, useContext, useRef} from 'react';\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<ToggleButtonRenderProps & {isJustified?: boolean}>({\n  ...focusRing(),\n  ...control({shape: 'default', icon: true}),\n  justifyContent: 'center',\n  position: 'relative',\n  forcedColorAdjust: 'none',\n  color: {\n    default: baseColor('neutral-subdued'),\n    isSelected: baseColor('neutral'),\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonText',\n      isDisabled: 'GrayText',\n      isSelected: 'HighlightText'\n    }\n  },\n  flexGrow: {\n    isJustified: 1\n  },\n  flexBasis: {\n    isJustified: 0\n  },\n  flexShrink: 0,\n  whiteSpace: 'nowrap',\n  disableTapHighlight: true,\n  userSelect: 'none',\n  backgroundColor: 'transparent',\n  borderStyle: 'none',\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  },\n  // The selected item has lower z-index so that the sliding background\n  // animation does not cover other items.\n  zIndex: {\n    default: 1,\n    isSelected: 0\n  }\n}, getAllowedOverrides());\n\nconst slider = style<{isDisabled: boolean}>({\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      let firstKey = values.values().next().value;\n      if (firstKey != null) {\n        onSelectionChange(firstKey);\n      }\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  // eslint-disable-next-line react-hooks/exhaustive-deps\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  }, [register, props.id]);\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, prevRef, currentSelectedRef]);\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

@@ -39,15 +39,15 @@ const $c679c2152e03f8bf$var$segmentedControl = function anonymous(props, overrid
         if (p[1] === "Z") width = true;
         rules += p[0];
     }
-    rules += ' sd91';
-    rules += ' Ub91';
-    rules += ' qb91';
-    rules += ' gH91';
-    rules += ' ob91';
-    rules += ' nb91';
-    rules += ' kb91';
-    rules += ' jb91';
-    if (!width) rules += ' ZJ91';
+    rules += ' sd1';
+    rules += ' Ub1';
+    rules += ' qb1';
+    rules += ' gH1';
+    rules += ' ob1';
+    rules += ' nb1';
+    rules += ' kb1';
+    rules += ' jb1';
+    if (!width) rules += ' ZJ1';
     return rules;
 };
 const $c679c2152e03f8bf$var$controlItem = function anonymous(props, overrides) {
@@ -68,205 +68,215 @@ const $c679c2152e03f8bf$var$controlItem = function anonymous(props, overrides) {
         if (p[1] === "_9") zIndex = true;
         rules += p[0];
     }
-    if (props.isFocusVisible) rules += ' _Lf91';
-    else rules += ' _Le91';
-    rules += ' Oh91';
-    rules += ' _Mc91';
-    rules += ' _Kd91';
+    if (props.isFocusVisible) rules += ' _Lf1';
+    else rules += ' _Le1';
+    rules += ' Oh1';
+    rules += ' _Mc1';
+    rules += ' _Kd1';
     if (props.size === "XL") {
-        rules += ' ug91';
-        rules += ' uch91';
-        rules += ' udi91';
-        rules += ' uea91';
-        rules += ' ugb91';
-        rules += ' uhd91';
-        rules += ' uje91';
-        rules += ' uic91';
+        rules += ' uk1';
+        rules += ' uch1';
+        rules += ' udi1';
+        rules += ' uea1';
+        rules += ' ugb1';
+        rules += ' uhd1';
+        rules += ' uje1';
+        rules += ' u2NhKxcl1';
+        rules += ' uic1';
     } else if (props.size === "L") {
-        rules += ' ug91';
-        rules += ' uch91';
-        rules += ' udi91';
-        rules += ' uea91';
-        rules += ' ugb91';
-        rules += ' uhd91';
-        rules += ' uje91';
-        rules += ' uic91';
+        rules += ' uk1';
+        rules += ' uch1';
+        rules += ' udi1';
+        rules += ' uea1';
+        rules += ' ugb1';
+        rules += ' uhd1';
+        rules += ' uje1';
+        rules += ' u2NhKxcl1';
+        rules += ' uic1';
     } else if (props.size === "S") {
-        rules += ' ug91';
-        rules += ' uch91';
-        rules += ' udi91';
-        rules += ' uea91';
-        rules += ' ugb91';
-        rules += ' uhd91';
-        rules += ' uje91';
-        rules += ' uic91';
+        rules += ' uk1';
+        rules += ' uch1';
+        rules += ' udi1';
+        rules += ' uea1';
+        rules += ' ugb1';
+        rules += ' uhd1';
+        rules += ' uje1';
+        rules += ' u2NhKxcl1';
+        rules += ' uic1';
     } else if (props.size === "XS") {
-        rules += ' ug91';
-        rules += ' uch91';
-        rules += ' udi91';
-        rules += ' uea91';
-        rules += ' ugb91';
-        rules += ' uhd91';
-        rules += ' uje91';
-        rules += ' uic91';
+        rules += ' uk1';
+        rules += ' uch1';
+        rules += ' udi1';
+        rules += ' uea1';
+        rules += ' ugb1';
+        rules += ' uhd1';
+        rules += ' uje1';
+        rules += ' u2NhKxcl1';
+        rules += ' uic1';
     } else {
-        rules += ' ug91';
-        rules += ' uch91';
-        rules += ' udi91';
-        rules += ' uea91';
-        rules += ' ugb91';
-        rules += ' uhd91';
-        rules += ' uje91';
-        rules += ' uic91';
+        rules += ' uk1';
+        rules += ' uch1';
+        rules += ' udi1';
+        rules += ' uea1';
+        rules += ' ugb1';
+        rules += ' uhd1';
+        rules += ' uje1';
+        rules += ' u2NhKxcl1';
+        rules += ' uic1';
     }
     if (props.size === "XL") {
-        rules += ' vg91';
-        rules += ' vsj91';
+        rules += ' -_6BNtrc-e1';
+        rules += ' vx1';
     } else if (props.size === "L") {
-        rules += ' vp91';
-        rules += ' vsh91';
+        rules += ' -_6BNtrc-d1';
+        rules += ' vx1';
     } else if (props.size === "S") {
-        rules += ' vb91';
-        rules += ' vse91';
+        rules += ' -_6BNtrc-b1';
+        rules += ' vx1';
     } else if (props.size === "XS") {
-        rules += ' va91';
-        rules += ' vsc91';
+        rules += ' -_6BNtrc-a1';
+        rules += ' vx1';
     } else {
-        rules += ' vd91';
-        rules += ' vsf91';
+        rules += ' -_6BNtrc-c1';
+        rules += ' vx1';
     }
     if (props.size === "XL") {
-        rules += ' wb91';
-        rules += ' xb91';
-        rules += ' _xa91';
+        rules += ' wb1';
+        rules += ' xb1';
+        rules += ' _xa1';
     } else if (props.size === "L") {
-        rules += ' wb91';
-        rules += ' xb91';
-        rules += ' _xa91';
+        rules += ' wb1';
+        rules += ' xb1';
+        rules += ' _xa1';
     } else if (props.size === "S") {
-        rules += ' wb91';
-        rules += ' xb91';
-        rules += ' _xa91';
+        rules += ' wb1';
+        rules += ' xb1';
+        rules += ' _xa1';
     } else if (props.size === "XS") {
-        rules += ' wb91';
-        rules += ' xb91';
-        rules += ' _xa91';
+        rules += ' wb1';
+        rules += ' xb1';
+        rules += ' _xa1';
     } else {
-        rules += ' wb91';
-        rules += ' xb91';
-        rules += ' _xa91';
+        rules += ' wb1';
+        rules += ' xb1';
+        rules += ' _xa1';
     }
     if (props.size === "XL") {
-        rules += ' _Fa91';
-        rules += ' _Ffb91';
+        rules += ' _Fd1';
+        rules += ' _FezxGHba1';
+        rules += ' _FnuYUweb1';
     } else if (props.size === "L") {
-        rules += ' _Fa91';
-        rules += ' _Ffb91';
+        rules += ' _Fd1';
+        rules += ' _FezxGHba1';
+        rules += ' _FnuYUweb1';
     } else if (props.size === "S") {
-        rules += ' _Fa91';
-        rules += ' _Ffb91';
+        rules += ' _Fd1';
+        rules += ' _FezxGHba1';
+        rules += ' _FnuYUweb1';
     } else if (props.size === "XS") {
-        rules += ' _Fa91';
-        rules += ' _Ffb91';
+        rules += ' _Fd1';
+        rules += ' _FezxGHba1';
+        rules += ' _FnuYUweb1';
     } else {
-        rules += ' _Fa91';
-        rules += ' _Ffb91';
+        rules += ' _Fd1';
+        rules += ' _FezxGHba1';
+        rules += ' _FnuYUweb1';
     }
-    if (props.isDisabled) rules += ' pp91';
+    if (props.isDisabled) rules += ' pp1';
     else if (props.isSelected) {
-        if (props.isPressed) rules += ' po91';
-        else if (props.isFocusVisible) rules += ' po91';
-        else if (props.isHovered) rules += ' po91';
-        else rules += ' pt91';
+        if (props.isPressed) rules += ' po1';
+        else if (props.isFocusVisible) rules += ' po1';
+        else if (props.isHovered) rules += ' po1';
+        else rules += ' pt1';
     } else {
-        if (props.isPressed) rules += ' pt91';
-        else if (props.isFocusVisible) rules += ' pt91';
-        else if (props.isHovered) rules += ' pt91';
-        else rules += ' pv91';
+        if (props.isPressed) rules += ' pt1';
+        else if (props.isFocusVisible) rules += ' pt1';
+        else if (props.isHovered) rules += ' pt1';
+        else rules += ' pv1';
     }
-    if (props.isSelected) rules += ' ple91';
-    else if (props.isDisabled) rules += ' plc91';
-    else rules += ' plb91';
-    rules += ' sd91';
-    rules += ' eb91';
-    rules += ' _oa91';
-    rules += ' Sv91';
-    rules += ' SgLWx3bd91';
-    rules += ' Rv91';
-    rules += ' RgLWx3bd91';
+    if (props.isSelected) rules += ' ple1';
+    else if (props.isDisabled) rules += ' plc1';
+    else rules += ' plb1';
+    rules += ' sd1';
+    rules += ' eb1';
+    rules += ' _oa1';
+    rules += ' Sv1';
+    rules += ' SgLWx3bd1';
+    rules += ' Rv1';
+    rules += ' RgLWx3bd1';
     if (props.size === "XL") {
-        if (!minWidth) rules += ' Nl91';
+        if (!minWidth) rules += ' Nl1';
     } else if (props.size === "L") {
-        if (!minWidth) rules += ' Nj91';
+        if (!minWidth) rules += ' Nj1';
     } else if (props.size === "S") {
-        if (!minWidth) rules += ' Nf91';
+        if (!minWidth) rules += ' Nf1';
     } else if (props.size === "XS") {
-        if (!minWidth) rules += ' Ne91';
-    } else if (!minWidth) rules += ' Nk91';
-    if (props.size === "XL") rules += ' -SFnbic-_JaP8ec91';
-    else if (props.size === "L") rules += ' -SFnbic-_J0K2hn91';
-    else if (props.size === "S") rules += ' -SFnbic-_JJOW22b91';
-    else if (props.size === "XS") rules += ' -SFnbic-_JICefdd91';
-    else rules += ' -SFnbic-_Jb91';
-    rules += ' -Bu7z1c-ob91';
-    rules += ' oj91';
-    rules += ' nj91';
-    rules += ' kj91';
-    rules += ' jj91';
-    rules += ' qc91';
-    rules += ' qsd91';
-    rules += ' -Qg41Lb-IAxCW0c91';
-    rules += ' -Qg41Lb-gLWx3bIy91';
-    rules += ' FRuFGYc91';
-    rules += ' _Ca91';
-    if (!position) rules += ' _Pc91';
-    rules += ' _yb91';
+        if (!minWidth) rules += ' Ne1';
+    } else if (!minWidth) rules += ' Nk1';
+    if (props.size === "XL") rules += ' -SFnbic-_JaP8ec1';
+    else if (props.size === "L") rules += ' -SFnbic-_J0K2hn1';
+    else if (props.size === "S") rules += ' -SFnbic-_JJOW22b1';
+    else if (props.size === "XS") rules += ' -SFnbic-_JICefdd1';
+    else rules += ' -SFnbic-_Jb1';
+    rules += ' -Bu7z1c-ob1';
+    rules += ' oj1';
+    rules += ' nj1';
+    rules += ' kj1';
+    rules += ' jj1';
+    rules += ' qc1';
+    rules += ' qsd1';
+    rules += ' -Qg41Lb-IAxCW0c1';
+    rules += ' -Qg41Lb-gLWx3bIy1';
+    rules += ' FRuFGYc1';
+    rules += ' _Ca1';
+    if (!position) rules += ' _Pc1';
+    rules += ' _yb1';
     if (props.isJustified) {
-        if (!flexGrow) rules += ' _ub91';
+        if (!flexGrow) rules += ' _ub1';
     }
     if (props.isJustified) {
-        if (!flexBasis) rules += ' _sb91';
+        if (!flexBasis) rules += ' _sb1';
     }
-    if (!flexShrink) rules += ' _va91';
-    rules += ' _7c91';
-    rules += ' __ca91';
-    rules += ' _4c91';
-    rules += ' g991';
-    rules += ' _je91';
-    rules += ' -_8sjo0b-t5ZbAob91';
+    if (!flexShrink) rules += ' _va1';
+    rules += ' _7c1';
+    rules += ' __ca1';
+    rules += ' _4c1';
+    rules += ' g91';
+    rules += ' _je1';
+    rules += ' -_8sjo0b-t5ZbAob1';
     if (props.isSelected) {
-        if (!zIndex) rules += ' _9b91';
-    } else if (!zIndex) rules += ' _9c91';
-    if (props.size === "XL") rules += ' -F_-Fz91';
-    else if (props.size === "L") rules += ' -F_-Fv91';
-    else if (props.size === "S") rules += ' -F_-Fp91';
-    else if (props.size === "XS") rules += ' -F_-Fn91';
-    else rules += ' -F_-Fx91';
+        if (!zIndex) rules += ' _9b1';
+    } else if (!zIndex) rules += ' _9c1';
+    if (props.size === "XL") rules += ' -F_-Fz1';
+    else if (props.size === "L") rules += ' -F_-Fv1';
+    else if (props.size === "S") rules += ' -F_-Fp1';
+    else if (props.size === "XS") rules += ' -F_-Fn1';
+    else rules += ' -F_-Fx1';
     return rules;
 };
 const $c679c2152e03f8bf$var$slider = function anonymous(props) {
     let rules = " ";
-    rules += ' gX91';
-    if (props.isDisabled) rules += ' gld91';
-    else rules += ' gle91';
-    rules += ' _Er91';
-    rules += ' Za91';
-    rules += ' Fb91';
-    rules += ' _Pa91';
-    rules += ' _oa91';
-    rules += ' _jf91';
-    rules += ' _kc91';
-    rules += ' hc91';
-    rules += ' mc91';
-    rules += ' lc91';
-    if (props.isDisabled) rules += ' iq91';
-    else rules += ' in91';
-    if (props.isDisabled) rules += ' ilc91';
-    else rules += ' ild91';
-    rules += ' oc91';
-    rules += ' nc91';
-    rules += ' kc91';
-    rules += ' jc91';
+    rules += ' gX1';
+    if (props.isDisabled) rules += ' gld1';
+    else rules += ' gle1';
+    rules += ' _Er1';
+    rules += ' Za1';
+    rules += ' Fb1';
+    rules += ' _Pa1';
+    rules += ' _oa1';
+    rules += ' _jf1';
+    rules += ' _kc1';
+    rules += ' hc1';
+    rules += ' mc1';
+    rules += ' lc1';
+    if (props.isDisabled) rules += ' iq1';
+    else rules += ' in1';
+    if (props.isDisabled) rules += ' ilc1';
+    else rules += ' ild1';
+    rules += ' oc1';
+    rules += ' nc1';
+    rules += ' kc1';
+    rules += ' jc1';
     return rules;
 };
 const $c679c2152e03f8bf$var$InternalSegmentedControlContext = /*#__PURE__*/ (0, $ae3Tm$createContext)({});
@@ -317,6 +327,7 @@ function $c679c2152e03f8bf$var$DefaultSelectionTracker(props) {
             isRegistered.current = true;
             state.toggleKey(value);
         }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     return /*#__PURE__*/ (0, $ae3Tm$jsx)((0, $ae3Tm$Provider), {
         values: [
@@ -343,7 +354,10 @@ const $c679c2152e03f8bf$export$4fc12f2742e8cf3f = /*#__PURE__*/ (0, $ae3Tm$forwa
     let reduceMotion = (0, $ae3Tm$useMediaQuery)('(prefers-reduced-motion: reduce)');
     (0, $ae3Tm$useLayoutEffect)(()=>{
         register?.(props.id);
-    }, []);
+    }, [
+        register,
+        props.id
+    ]);
     (0, $ae3Tm$useLayoutEffect)(()=>{
         if (isSelected && prevRef?.current && currentSelectedRef?.current && !reduceMotion) {
             let currentItem = currentSelectedRef?.current.getBoundingClientRect();
@@ -365,7 +379,9 @@ const $c679c2152e03f8bf$export$4fc12f2742e8cf3f = /*#__PURE__*/ (0, $ae3Tm$forwa
         }
     }, [
         isSelected,
-        reduceMotion
+        reduceMotion,
+        prevRef,
+        currentSelectedRef
     ]);
     return /*#__PURE__*/ (0, $ae3Tm$jsx)((0, $ae3Tm$ToggleButton), {
         ...props,
@@ -390,7 +406,7 @@ const $c679c2152e03f8bf$export$4fc12f2742e8cf3f = /*#__PURE__*/ (0, $ae3Tm$forwa
                                 {
                                     render: (0, $1f4b04be3f24aae3$export$9d7e2342a7e53afa)({
                                         slot: 'icon',
-                                        styles: " _Ja91 _va91"
+                                        styles: " _Ja1 _va1"
                                     })
                                 }
                             ],
@@ -405,7 +421,7 @@ const $c679c2152e03f8bf$export$4fc12f2742e8cf3f = /*#__PURE__*/ (0, $ae3Tm$forwa
                             [
                                 (0, $8e847109a6ab556d$export$9afb8bc826b033ea),
                                 {
-                                    styles: " _Jb91 _Nc91 Pc91 _Yb91 _7c91"
+                                    styles: " _Jb1 _Nc1 Pc1 _Yb1 _7c1"
                                 }
                             ]
                         ],
@@ -414,7 +430,7 @@ const $c679c2152e03f8bf$export$4fc12f2742e8cf3f = /*#__PURE__*/ (0, $ae3Tm$forwa
                             style: (0, $10ea7662e51a285b$export$56e8cba416805d8d)(divRef)({
                                 isPressed: isPressed
                             }),
-                            className: " sd91 Uc91 Usd91 qc91 qsd91 Yd91 Xb91 _2b91 eb91 Na91",
+                            className: " sd1 Uc1 Usd1 qc1 qsd1 Yd1 Xb1 _2b1 eb1 Na1",
                             children: typeof props.children === 'string' ? /*#__PURE__*/ (0, $ae3Tm$jsx)((0, $8e847109a6ab556d$export$5f1af8db9871e1d6), {
                                 children: props.children
                             }) : props.children

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 {baseColor, focusRing, style} from '../style' with {type: 'macro'};\nimport {centerBaseline} from './CenterBaseline';\nimport {ContextValue, DEFAULT_SLOT, Provider, TextContext as RACTextContext, SlotProps, ToggleButton, ToggleButtonGroup, ToggleButtonRenderProps, ToggleGroupStateContext} from 'react-aria-components';\nimport {control, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode, RefObject, useCallback, useContext, useRef} from 'react';\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<ToggleButtonRenderProps & {isJustified?: boolean}>({\n  ...focusRing(),\n  ...control({shape: 'default', icon: true}),\n  justifyContent: 'center',\n  position: 'relative',\n  forcedColorAdjust: 'none',\n  color: {\n    default: baseColor('neutral-subdued'),\n    isSelected: baseColor('neutral'),\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonText',\n      isDisabled: 'GrayText',\n      isSelected: 'HighlightText'\n    }\n  },\n  flexGrow: {\n    isJustified: 1\n  },\n  flexBasis: {\n    isJustified: 0\n  },\n  flexShrink: 0,\n  whiteSpace: 'nowrap',\n  disableTapHighlight: true,\n  userSelect: 'none',\n  backgroundColor: 'transparent',\n  borderStyle: 'none',\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  },\n  // The selected item has lower z-index so that the sliding background\n  // animation does not cover other items.\n  zIndex: {\n    default: 1,\n    isSelected: 0\n  }\n}, getAllowedOverrides());\n\nconst slider = style<{isDisabled: boolean}>({\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      let firstKey = values.values().next().value;\n      if (firstKey != null) {\n        onSelectionChange(firstKey);\n      }\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"}
+{"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 {baseColor, focusRing, style} from '../style' with {type: 'macro'};\nimport {centerBaseline} from './CenterBaseline';\nimport {ContextValue, DEFAULT_SLOT, Provider, TextContext as RACTextContext, SlotProps, ToggleButton, ToggleButtonGroup, ToggleButtonRenderProps, ToggleGroupStateContext} from 'react-aria-components';\nimport {control, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode, RefObject, useCallback, useContext, useRef} from 'react';\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<ToggleButtonRenderProps & {isJustified?: boolean}>({\n  ...focusRing(),\n  ...control({shape: 'default', icon: true}),\n  justifyContent: 'center',\n  position: 'relative',\n  forcedColorAdjust: 'none',\n  color: {\n    default: baseColor('neutral-subdued'),\n    isSelected: baseColor('neutral'),\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonText',\n      isDisabled: 'GrayText',\n      isSelected: 'HighlightText'\n    }\n  },\n  flexGrow: {\n    isJustified: 1\n  },\n  flexBasis: {\n    isJustified: 0\n  },\n  flexShrink: 0,\n  whiteSpace: 'nowrap',\n  disableTapHighlight: true,\n  userSelect: 'none',\n  backgroundColor: 'transparent',\n  borderStyle: 'none',\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  },\n  // The selected item has lower z-index so that the sliding background\n  // animation does not cover other items.\n  zIndex: {\n    default: 1,\n    isSelected: 0\n  }\n}, getAllowedOverrides());\n\nconst slider = style<{isDisabled: boolean}>({\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      let firstKey = values.values().next().value;\n      if (firstKey != null) {\n        onSelectionChange(firstKey);\n      }\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  // eslint-disable-next-line react-hooks/exhaustive-deps\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  }, [register, props.id]);\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, prevRef, currentSelectedRef]);\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"}