@react-spectrum/s2 3.0.0-nightly-1b425caa2-250114 → 3.0.0-nightly-1286a652e-250116

package/dist/Tabs.css.map

@@ -1 +1 @@
-{"mappings":"ACqEiB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAkBL;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA4BC;;;;EAkBoB;;;;EAEyB;;;;EAU1C;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAkDkC;;;;EAyCxB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAuFb;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;;AA9PI;EA8PJ;;;;;AA9PI;;AAkBL;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAqJc;;;;IAAA;;;;;;AArJd;EAAA;IAAA;;;;IAAA;;;;;;AA4BC;;;;AAgNA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA","sources":["d333cabc54201ea1","packages/@react-spectrum/s2/src/Tabs.tsx"],"sourcesContent":["@import \"575a5a16650d7070\";\n@import \"7a0058ba44ec735a\";\n@import \"ea0c0ad20f1e1c01\";\n@import \"1a91a7d853a67795\";\n@import \"b645d7882760dc18\";\n@import \"5aa00674bbf9e612\";\n@import \"9d65793a05791106\";\n@import \"2976d7d1f8a0759d\";\n@import \"713e94facc5ee3f3\";\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 {\n    TabListProps as AriaTabListProps,\n    TabPanel as AriaTabPanel,\n    TabPanelProps as AriaTabPanelProps,\n    TabProps as AriaTabProps,\n    TabsProps as AriaTabsProps,\n    ContextValue,\n    Provider,\n    Tab as RACTab,\n    TabList as RACTabList,\n    Tabs as RACTabs,\n    TabListStateContext,\n    useSlottedContext\n  } from 'react-aria-components';\nimport {centerBaseline} from './CenterBaseline';\nimport {Collection, DOMRef, DOMRefValue, Key, Node, Orientation} from '@react-types/shared';\nimport {createContext, forwardRef, ReactNode, useCallback, useContext, useEffect, useRef, useState} from 'react';\nimport {focusRing, style} from '../style' with {type: 'macro'};\nimport {getAllowedOverrides, StyleProps, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {IconContext} from './Icon';\nimport {Text, TextContext} from './Content';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useLayoutEffect} from '@react-aria/utils';\nimport {useLocale} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface TabsProps extends Omit<AriaTabsProps, 'className' | 'style' | 'children'>, UnsafeStyles {\n  /** Spectrum-defined styles, returned by the `style()` macro. */\n  styles?: StylesPropWithHeight,\n  /** The content to display in the tabs. */\n  children?: ReactNode,\n  /**\n   * The amount of space between the tabs.\n   * @default 'regular'\n   */\n  density?: 'compact' | 'regular'\n}\n\nexport interface TabProps extends Omit<AriaTabProps, 'children' | 'style' | 'className'>, StyleProps {\n  /** The content to display in the tab. */\n  children?: ReactNode\n}\n\nexport interface TabListProps<T> extends Omit<AriaTabListProps<T>, 'children' | 'style' | 'className'>, StyleProps {\n  /** The content to display in the tablist. */\n  children?: ReactNode\n}\n\nexport interface TabPanelProps extends Omit<AriaTabPanelProps, 'children' | 'style' | 'className'>, UnsafeStyles {\n  /** Spectrum-defined styles, returned by the `style()` macro. */\n  styles?: StylesPropWithHeight,\n  /** The content to display in the tab panels. */\n  children?: ReactNode\n}\n\nexport const TabsContext = createContext<ContextValue<TabsProps, DOMRefValue<HTMLDivElement>>>(null);\n\nconst tabPanel = style({\n  marginTop: 4,\n  color: 'gray-800',\n  flexGrow: 1,\n  flexBasis: '[0%]',\n  minHeight: 0,\n  minWidth: 0\n}, getAllowedOverrides({height: true}));\n\nexport function TabPanel(props: TabPanelProps) {\n  return (\n    <AriaTabPanel\n      {...props}\n      style={props.UNSAFE_style}\n      className={(props.UNSAFE_className || '') + tabPanel(null, props.styles)} />\n  );\n}\n\nconst tab = style({\n  ...focusRing(),\n  display: 'flex',\n  color: {\n    default: 'neutral-subdued',\n    isSelected: 'neutral',\n    isHovered: 'neutral-subdued',\n    isDisabled: 'disabled',\n    forcedColors: {\n      isSelected: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  borderRadius: 'sm',\n  gap: 'text-to-visual',\n  height: {\n    density: {\n      compact: 32,\n      regular: 48\n    }\n  },\n  alignItems: 'center',\n  position: 'relative',\n  cursor: 'default',\n  flexShrink: 0,\n  transition: 'default'\n}, getAllowedOverrides());\n\nconst icon = style({\n  flexShrink: 0,\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n});\n\nexport function Tab(props: TabProps) {\n  let {density} = useSlottedContext(TabsContext) ?? {};\n\n  return (\n    <RACTab\n      {...props}\n      style={props.UNSAFE_style}\n      className={renderProps => (props.UNSAFE_className || '') + tab({...renderProps, density}, props.styles)}>\n      <Provider\n        values={[\n          [TextContext, {styles: style({order: 1})}],\n          [IconContext, {\n            render: centerBaseline({slot: 'icon', styles: style({order: 0})}),\n            styles: icon\n          }]\n        ]}>\n        {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n      </Provider>\n    </RACTab>\n  );\n}\n\nconst tablist = style({\n  display: 'flex',\n  gap: {\n    orientation: {\n      horizontal: {\n        density: {\n          compact: 24,\n          regular: 32\n        }\n      }\n    }\n  },\n  flexDirection: {\n    orientation: {\n      vertical: 'column'\n    }\n  },\n  paddingEnd: {\n    orientation: {\n      vertical: 20\n    }\n  },\n  paddingStart: {\n    orientation: {\n      vertical: 12\n    }\n  },\n  flexShrink: 0,\n  flexBasis: '[0%]'\n});\n\nexport function TabList<T extends object>(props: TabListProps<T>) {\n  let {density, isDisabled, disabledKeys, orientation} = useSlottedContext(TabsContext) ?? {};\n  let state = useContext(TabListStateContext);\n  let [selectedTab, setSelectedTab] = useState<HTMLElement | undefined>(undefined);\n  let tablistRef = useRef<HTMLDivElement>(null);\n\n  useLayoutEffect(() => {\n    if (tablistRef?.current) {\n      let tab: HTMLElement | null = tablistRef.current.querySelector('[role=tab][data-selected=true]');\n\n      if (tab != null) {\n        setSelectedTab(tab);\n      }\n    }\n  }, [tablistRef, state?.selectedItem?.key]);\n\n  return (\n    <div\n      style={props.UNSAFE_style}\n      className={(props.UNSAFE_className || '') + style({position: 'relative'}, getAllowedOverrides())(null, props.styles)}>\n      {orientation === 'vertical' &&\n        <TabLine disabledKeys={disabledKeys} isDisabled={isDisabled} selectedTab={selectedTab} orientation={orientation} density={density} />}\n      <RACTabList\n        {...props}\n        ref={tablistRef}\n        className={renderProps => tablist({...renderProps, density})} />\n      {orientation === 'horizontal' &&\n        <TabLine disabledKeys={disabledKeys} isDisabled={isDisabled} selectedTab={selectedTab} orientation={orientation} density={density} />}\n    </div>\n  );\n}\n\nfunction isAllTabsDisabled<T>(collection: Collection<Node<T>> | null, disabledKeys: Set<Key>) {\n  let testKey: Key | null = null;\n  if (collection && collection.size > 0) {\n    testKey = collection.getFirstKey();\n\n    let index = 0;\n    while (testKey && index < collection.size) {\n      // We have to check if the item in the collection has a key in disabledKeys or has the isDisabled prop set directly on it\n      if (!disabledKeys.has(testKey) && !collection.getItem(testKey)?.props?.isDisabled) {\n        return false;\n      }\n\n      testKey = collection.getKeyAfter(testKey);\n      index++;\n    }\n    return true;\n  }\n  return false;\n}\n\ninterface TabLineProps {\n  disabledKeys: Iterable<Key> | undefined,\n  isDisabled: boolean | undefined,\n  selectedTab: HTMLElement | undefined,\n  orientation?: Orientation,\n  density?: 'compact' | 'regular'\n}\n\nconst selectedIndicator = style({\n  position: 'absolute',\n  backgroundColor: {\n    default: 'neutral',\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  height: {\n    orientation: {\n      horizontal: '[2px]'\n    }\n  },\n  width: {\n    orientation: {\n      vertical: '[2px]'\n    }\n  },\n  bottom: {\n    orientation: {\n      horizontal: 0\n    }\n  },\n  borderStyle: 'none',\n  borderRadius: 'full',\n  transitionDuration: 130,\n  transitionTimingFunction: 'in-out'\n});\n\nfunction TabLine(props: TabLineProps) {\n  let {\n    disabledKeys,\n    isDisabled: isTabsDisabled,\n    selectedTab,\n    orientation,\n    density\n  } = props;\n  let {direction} = useLocale();\n  let state = useContext(TabListStateContext);\n\n  // We want to add disabled styling to the selection indicator only if all the Tabs are disabled\n  let [isDisabled, setIsDisabled] = useState<boolean>(false);\n  useEffect(() => {\n    let isDisabled = isTabsDisabled || isAllTabsDisabled(state?.collection || null, disabledKeys ? new Set(disabledKeys) : new Set(null));\n    setIsDisabled(isDisabled);\n  }, [state?.collection, disabledKeys, isTabsDisabled, setIsDisabled]);\n\n  let [style, setStyle] = useState<{transform: string | undefined, width: string | undefined, height: string | undefined}>({\n    transform: undefined,\n    width: undefined,\n    height: undefined\n  });\n\n  let onResize = useCallback(() => {\n    if (selectedTab) {\n      let styleObj: { transform: string | undefined, width: string | undefined, height: string | undefined } = {\n        transform: undefined,\n        width: undefined,\n        height: undefined\n      };\n\n      // In RTL, calculate the transform from the right edge of the tablist so that resizing the window doesn't break the Tabline position due to offsetLeft changes\n      let offset = direction === 'rtl' ? -1 * ((selectedTab.offsetParent as HTMLElement)?.offsetWidth - selectedTab.offsetWidth - selectedTab.offsetLeft) : selectedTab.offsetLeft;\n      styleObj.transform = orientation === 'vertical'\n        ? `translateY(${selectedTab.offsetTop}px)`\n        : `translateX(${offset}px)`;\n\n      if (orientation === 'horizontal') {\n        styleObj.width = `${selectedTab.offsetWidth}px`;\n      } else {\n        styleObj.height = `${selectedTab.offsetHeight}px`;\n      }\n      setStyle(styleObj);\n    }\n  }, [direction, setStyle, selectedTab, orientation]);\n\n  useLayoutEffect(() => {\n    onResize();\n  }, [onResize, state?.selectedItem?.key, direction, orientation, density]);\n\n  return (\n    <div style={{...style}} className={selectedIndicator({isDisabled, orientation})} />\n  );\n}\n\nconst tabs = style({\n  display: 'flex',\n  flexShrink: 0,\n  fontFamily: 'sans',\n  fontWeight: 'normal',\n  flexDirection: {\n    orientation: {\n      horizontal: 'column'\n    }\n  }\n}, getAllowedOverrides({height: true}));\n\n/**\n * Tabs organize content into multiple sections and allow users to navigate between them. The content under the set of tabs should be related and form a coherent unit.\n */\nexport const Tabs = forwardRef(function Tabs(props: TabsProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, TabsContext);\n  let {\n    density = 'regular',\n    isDisabled,\n    disabledKeys,\n    orientation = 'horizontal'\n  } = props;\n  let domRef = useDOMRef(ref);\n\n  return (\n    <RACTabs\n      {...props}\n      ref={domRef}\n      style={props.UNSAFE_style}\n      className={renderProps => (props.UNSAFE_className || '') + tabs({...renderProps}, props.styles)}>\n      <Provider\n        values={[\n          [TabsContext, {density, isDisabled, disabledKeys, orientation}]\n        ]}>\n        {props.children}\n      </Provider>\n    </RACTabs>\n  );\n});\n"],"names":[],"version":3,"file":"Tabs.css.map"}
+{"mappings":"ACqEiB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAkBL;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA4BC;;;;EAkBoB;;;;EAEyB;;;;EAU1C;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAkDkC;;;;EAyCxB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAuFb;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;;AA9PI;EA8PJ;;;;;AA5OD;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAqJc;;;;IAAA;;;;;;AArJd;EAAA;IAAA;;;;IAAA;;;;;;AA4OC;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA","sources":["d333cabc54201ea1","packages/@react-spectrum/s2/src/Tabs.tsx"],"sourcesContent":["@import \"575a5a16650d7070\";\n@import \"7a0058ba44ec735a\";\n@import \"ea0c0ad20f1e1c01\";\n@import \"1a91a7d853a67795\";\n@import \"b645d7882760dc18\";\n@import \"5aa00674bbf9e612\";\n@import \"9d65793a05791106\";\n@import \"2976d7d1f8a0759d\";\n@import \"713e94facc5ee3f3\";\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 {\n    TabListProps as AriaTabListProps,\n    TabPanel as AriaTabPanel,\n    TabPanelProps as AriaTabPanelProps,\n    TabProps as AriaTabProps,\n    TabsProps as AriaTabsProps,\n    ContextValue,\n    Provider,\n    Tab as RACTab,\n    TabList as RACTabList,\n    Tabs as RACTabs,\n    TabListStateContext,\n    useSlottedContext\n  } from 'react-aria-components';\nimport {centerBaseline} from './CenterBaseline';\nimport {Collection, DOMRef, DOMRefValue, Key, Node, Orientation} from '@react-types/shared';\nimport {createContext, forwardRef, ReactNode, useCallback, useContext, useEffect, useRef, useState} from 'react';\nimport {focusRing, style} from '../style' with {type: 'macro'};\nimport {getAllowedOverrides, StyleProps, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {IconContext} from './Icon';\nimport {Text, TextContext} from './Content';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useLayoutEffect} from '@react-aria/utils';\nimport {useLocale} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface TabsProps extends Omit<AriaTabsProps, 'className' | 'style' | 'children'>, UnsafeStyles {\n  /** Spectrum-defined styles, returned by the `style()` macro. */\n  styles?: StylesPropWithHeight,\n  /** The content to display in the tabs. */\n  children?: ReactNode,\n  /**\n   * The amount of space between the tabs.\n   * @default 'regular'\n   */\n  density?: 'compact' | 'regular'\n}\n\nexport interface TabProps extends Omit<AriaTabProps, 'children' | 'style' | 'className'>, StyleProps {\n  /** The content to display in the tab. */\n  children?: ReactNode\n}\n\nexport interface TabListProps<T> extends Omit<AriaTabListProps<T>, 'children' | 'style' | 'className'>, StyleProps {\n  /** The content to display in the tablist. */\n  children?: ReactNode\n}\n\nexport interface TabPanelProps extends Omit<AriaTabPanelProps, 'children' | 'style' | 'className'>, UnsafeStyles {\n  /** Spectrum-defined styles, returned by the `style()` macro. */\n  styles?: StylesPropWithHeight,\n  /** The content to display in the tab panels. */\n  children?: ReactNode\n}\n\nexport const TabsContext = createContext<ContextValue<TabsProps, DOMRefValue<HTMLDivElement>>>(null);\n\nconst tabPanel = style({\n  marginTop: 4,\n  color: 'gray-800',\n  flexGrow: 1,\n  flexBasis: '[0%]',\n  minHeight: 0,\n  minWidth: 0\n}, getAllowedOverrides({height: true}));\n\nexport function TabPanel(props: TabPanelProps) {\n  return (\n    <AriaTabPanel\n      {...props}\n      style={props.UNSAFE_style}\n      className={(props.UNSAFE_className || '') + tabPanel(null, props.styles)} />\n  );\n}\n\nconst tab = style({\n  ...focusRing(),\n  display: 'flex',\n  color: {\n    default: 'neutral-subdued',\n    isSelected: 'neutral',\n    isHovered: 'neutral-subdued',\n    isDisabled: 'disabled',\n    forcedColors: {\n      isSelected: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  borderRadius: 'sm',\n  gap: 'text-to-visual',\n  height: {\n    density: {\n      compact: 32,\n      regular: 48\n    }\n  },\n  alignItems: 'center',\n  position: 'relative',\n  cursor: 'default',\n  flexShrink: 0,\n  transition: 'default'\n}, getAllowedOverrides());\n\nconst icon = style({\n  flexShrink: 0,\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n});\n\nexport function Tab(props: TabProps) {\n  let {density} = useSlottedContext(TabsContext) ?? {};\n\n  return (\n    <RACTab\n      {...props}\n      style={props.UNSAFE_style}\n      className={renderProps => (props.UNSAFE_className || '') + tab({...renderProps, density}, props.styles)}>\n      <Provider\n        values={[\n          [TextContext, {styles: style({order: 1})}],\n          [IconContext, {\n            render: centerBaseline({slot: 'icon', styles: style({order: 0})}),\n            styles: icon\n          }]\n        ]}>\n        {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n      </Provider>\n    </RACTab>\n  );\n}\n\nconst tablist = style({\n  display: 'flex',\n  gap: {\n    orientation: {\n      horizontal: {\n        density: {\n          compact: 24,\n          regular: 32\n        }\n      }\n    }\n  },\n  flexDirection: {\n    orientation: {\n      vertical: 'column'\n    }\n  },\n  paddingEnd: {\n    orientation: {\n      vertical: 20\n    }\n  },\n  paddingStart: {\n    orientation: {\n      vertical: 12\n    }\n  },\n  flexShrink: 0,\n  flexBasis: '[0%]'\n});\n\nexport function TabList<T extends object>(props: TabListProps<T>) {\n  let {density, isDisabled, disabledKeys, orientation} = useSlottedContext(TabsContext) ?? {};\n  let state = useContext(TabListStateContext);\n  let [selectedTab, setSelectedTab] = useState<HTMLElement | undefined>(undefined);\n  let tablistRef = useRef<HTMLDivElement>(null);\n\n  useLayoutEffect(() => {\n    if (tablistRef?.current) {\n      let tab: HTMLElement | null = tablistRef.current.querySelector('[role=tab][data-selected=true]');\n\n      if (tab != null) {\n        setSelectedTab(tab);\n      }\n    }\n  }, [tablistRef, state?.selectedItem?.key]);\n\n  return (\n    <div\n      style={props.UNSAFE_style}\n      className={(props.UNSAFE_className || '') + style({position: 'relative'}, getAllowedOverrides())(null, props.styles)}>\n      {orientation === 'vertical' &&\n        <TabLine disabledKeys={disabledKeys} isDisabled={isDisabled} selectedTab={selectedTab} orientation={orientation} density={density} />}\n      <RACTabList\n        {...props}\n        ref={tablistRef}\n        className={renderProps => tablist({...renderProps, density})} />\n      {orientation === 'horizontal' &&\n        <TabLine disabledKeys={disabledKeys} isDisabled={isDisabled} selectedTab={selectedTab} orientation={orientation} density={density} />}\n    </div>\n  );\n}\n\nfunction isAllTabsDisabled<T>(collection: Collection<Node<T>> | null, disabledKeys: Set<Key>) {\n  let testKey: Key | null = null;\n  if (collection && collection.size > 0) {\n    testKey = collection.getFirstKey();\n\n    let index = 0;\n    while (testKey && index < collection.size) {\n      // We have to check if the item in the collection has a key in disabledKeys or has the isDisabled prop set directly on it\n      if (!disabledKeys.has(testKey) && !collection.getItem(testKey)?.props?.isDisabled) {\n        return false;\n      }\n\n      testKey = collection.getKeyAfter(testKey);\n      index++;\n    }\n    return true;\n  }\n  return false;\n}\n\ninterface TabLineProps {\n  disabledKeys: Iterable<Key> | undefined,\n  isDisabled: boolean | undefined,\n  selectedTab: HTMLElement | undefined,\n  orientation?: Orientation,\n  density?: 'compact' | 'regular'\n}\n\nconst selectedIndicator = style({\n  position: 'absolute',\n  backgroundColor: {\n    default: 'neutral',\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  height: {\n    orientation: {\n      horizontal: '[2px]'\n    }\n  },\n  width: {\n    orientation: {\n      vertical: '[2px]'\n    }\n  },\n  bottom: {\n    orientation: {\n      horizontal: 0\n    }\n  },\n  borderStyle: 'none',\n  borderRadius: 'full',\n  transitionDuration: 130,\n  transitionTimingFunction: 'in-out'\n});\n\nfunction TabLine(props: TabLineProps) {\n  let {\n    disabledKeys,\n    isDisabled: isTabsDisabled,\n    selectedTab,\n    orientation,\n    density\n  } = props;\n  let {direction} = useLocale();\n  let state = useContext(TabListStateContext);\n\n  // We want to add disabled styling to the selection indicator only if all the Tabs are disabled\n  let [isDisabled, setIsDisabled] = useState<boolean>(false);\n  useEffect(() => {\n    let isDisabled = isTabsDisabled || isAllTabsDisabled(state?.collection || null, disabledKeys ? new Set(disabledKeys) : new Set(null));\n    setIsDisabled(isDisabled);\n  }, [state?.collection, disabledKeys, isTabsDisabled, setIsDisabled]);\n\n  let [style, setStyle] = useState<{transform: string | undefined, width: string | undefined, height: string | undefined}>({\n    transform: undefined,\n    width: undefined,\n    height: undefined\n  });\n\n  let onResize = useCallback(() => {\n    if (selectedTab) {\n      let styleObj: { transform: string | undefined, width: string | undefined, height: string | undefined } = {\n        transform: undefined,\n        width: undefined,\n        height: undefined\n      };\n\n      // In RTL, calculate the transform from the right edge of the tablist so that resizing the window doesn't break the Tabline position due to offsetLeft changes\n      let offset = direction === 'rtl' ? -1 * ((selectedTab.offsetParent as HTMLElement)?.offsetWidth - selectedTab.offsetWidth - selectedTab.offsetLeft) : selectedTab.offsetLeft;\n      styleObj.transform = orientation === 'vertical'\n        ? `translateY(${selectedTab.offsetTop}px)`\n        : `translateX(${offset}px)`;\n\n      if (orientation === 'horizontal') {\n        styleObj.width = `${selectedTab.offsetWidth}px`;\n      } else {\n        styleObj.height = `${selectedTab.offsetHeight}px`;\n      }\n      setStyle(styleObj);\n    }\n  }, [direction, setStyle, selectedTab, orientation]);\n\n  useLayoutEffect(() => {\n    onResize();\n  }, [onResize, state?.selectedItem?.key, direction, orientation, density]);\n\n  return (\n    <div style={{...style}} className={selectedIndicator({isDisabled, orientation})} />\n  );\n}\n\nconst tabs = style({\n  display: 'flex',\n  flexShrink: 0,\n  fontFamily: 'sans',\n  fontWeight: 'normal',\n  flexDirection: {\n    orientation: {\n      horizontal: 'column'\n    }\n  }\n}, getAllowedOverrides({height: true}));\n\n/**\n * Tabs organize content into multiple sections and allow users to navigate between them. The content under the set of tabs should be related and form a coherent unit.\n */\nexport const Tabs = forwardRef(function Tabs(props: TabsProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, TabsContext);\n  let {\n    density = 'regular',\n    isDisabled,\n    disabledKeys,\n    orientation = 'horizontal'\n  } = props;\n  let domRef = useDOMRef(ref);\n\n  return (\n    <RACTabs\n      {...props}\n      ref={domRef}\n      style={props.UNSAFE_style}\n      className={renderProps => (props.UNSAFE_className || '') + tabs({...renderProps}, props.styles)}>\n      <Provider\n        values={[\n          [TabsContext, {density, isDisabled, disabledKeys, orientation}]\n        ]}>\n        {props.children}\n      </Provider>\n    </RACTabs>\n  );\n});\n"],"names":[],"version":3,"file":"Tabs.css.map"}

package/dist/TagGroup.cjs

@@ -17,8 +17,8 @@ var $chbGa$reactariacomponents = require("react-aria-components");
 var $chbGa$reactariacollections = require("@react-aria/collections");
 var $chbGa$react = require("react");
 var $chbGa$reactdom = require("react-dom");
-var $chbGa$reactspectrumutils = require("@react-spectrum/utils");
 var $chbGa$reactariautils = require("@react-aria/utils");
+var $chbGa$reactspectrumutils = require("@react-spectrum/utils");
 var $chbGa$reactariai18n = require("@react-aria/i18n");
 
 
@@ -386,7 +386,7 @@ function $2e3ddd7543f4a901$var$TagGroupInner({ props: { label: label, descriptio
                         children: [
                             maxRows != null && /*#__PURE__*/ (0, $chbGa$reactjsxruntime.jsx)("div", {
                                 // @ts-ignore
-                                inert: "true",
+                                inert: (0, $chbGa$reactariautils.inertValue)(true),
                                 ref: hiddenTagsRef,
                                 className: " . _0c _8a _da _d-enzrfpb _d-enzwzjc _d-enzykdd _d-enzzrge _d-eo0c6sf _d-1uotwbwg _d-bc1l9oh Va Ya _aa __Fb __wb __xb _L-3t1x",
                                 children: allItems.map((item)=>{

package/dist/TagGroup.cjs.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-spectrum/s2/src/TagGroup.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 {ActionButton} from './ActionButton';\nimport AlertIcon from '../s2wf-icons/S2_Icon_AlertTriangle_20_N.svg';\nimport {\n  Tag as AriaTag,\n  TagGroup as AriaTagGroup,\n  TagGroupProps as AriaTagGroupProps,\n  TagProps as AriaTagProps,\n  composeRenderProps,\n  ContextValue,\n  Provider,\n  TextContext as RACTextContext,\n  TagList,\n  TagListProps,\n  useLocale,\n  useSlottedContext\n} from 'react-aria-components';\nimport {AvatarContext} from './Avatar';\nimport {CenterBaseline, centerBaseline} from './CenterBaseline';\nimport {ClearButton} from './ClearButton';\nimport {Collection, CollectionBuilder} from '@react-aria/collections';\nimport {createContext, forwardRef, ReactNode, useContext, useEffect, useMemo, useRef, useState} from 'react';\nimport {DOMRef, DOMRefValue, HelpTextProps, Node, SpectrumLabelableProps} from '@react-types/shared';\nimport {field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {FieldLabel} from './Field';\nimport {flushSync} from 'react-dom';\nimport {focusRing, fontRelative, style} from '../style' with { type: 'macro' };\nimport {FormContext, useFormProps} from './Form';\nimport {forwardRefType} from './types';\nimport {IconContext} from './Icon';\nimport {ImageContext} from './Image';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {pressScale} from './pressScale';\nimport {Text, TextContext} from './Content';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useEffectEvent, useId, useLayoutEffect, useResizeObserver} from '@react-aria/utils';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\n// Get types from RSP and extend those?\nexport interface TagProps extends Omit<AriaTagProps, 'children' | 'style' | 'className'> {\n  /** The children of the tag. */\n  children?: ReactNode\n}\n\nexport interface TagGroupProps<T> extends Omit<AriaTagGroupProps, 'children' | 'style' | 'className'>, Pick<TagListProps<T>, 'items' | 'children' | 'renderEmptyState'>, Omit<SpectrumLabelableProps, 'isRequired' | 'necessityIndicator'>, StyleProps, Omit<HelpTextProps, 'errorMessage'> {\n  /** A description for the tag group. */\n  description?: ReactNode,\n  /**\n   * The size of the tag group.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L',\n  /** Whether the tags are displayed in an emphasized style. */\n  isEmphasized?: boolean,\n  /** Provides content to display when there are no items in the tag group. */\n  renderEmptyState?: () => ReactNode,\n  /** Whether the tags are displayed in a error state. */\n  isInvalid?: boolean,\n  /** An error message for the field. */\n  errorMessage?: ReactNode,\n  /** Limit the number of rows initially shown. This will render a button that allows the user to expand to show all tags. */\n  maxRows?: number,\n  /** The label to display on the action button.  */\n  groupActionLabel?: string,\n  /** Handler that is called when the action button is pressed. */\n  onGroupAction?: () => void\n}\n\nexport const TagGroupContext = createContext<ContextValue<TagGroupProps<any>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst helpTextStyles = style({\n  gridArea: 'helptext',\n  display: 'flex',\n  alignItems: 'baseline',\n  gap: 'text-to-visual',\n  font: 'control',\n  color: {\n    default: 'neutral-subdued',\n    isInvalid: 'negative'\n  },\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  },\n  contain: 'inline-size',\n  paddingTop: '--field-gap',\n  cursor: 'text'\n});\n\nconst InternalTagGroupContext = createContext<TagGroupProps<any>>({});\n\n/** Tags allow users to categorize content. They can represent keywords or people, and are grouped to describe an item or a search request. */\nexport const TagGroup = /*#__PURE__*/ (forwardRef as forwardRefType)(function TagGroup<T extends object>(props: TagGroupProps<T>, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, TagGroupContext);\n  props = useFormProps(props);\n  let {onRemove} = props;\n  return (\n    <InternalTagGroupContext.Provider value={{onRemove}}>\n      <CollectionBuilder content={<Collection {...props} />}>\n        {collection => <TagGroupInner props={props} forwardedRef={ref} collection={collection} />}\n      </CollectionBuilder>\n    </InternalTagGroupContext.Provider>\n  );\n});\n\nfunction TagGroupInner<T>({\n  props: {\n    label,\n    description,\n    labelPosition = 'top',\n    labelAlign = 'start',\n    isEmphasized,\n    isInvalid,\n    errorMessage,\n    UNSAFE_className = '',\n    UNSAFE_style,\n    size = 'M',\n    ...props\n  },\n  forwardedRef: ref,\n  collection\n}: {props: TagGroupProps<T>, forwardedRef: DOMRef<HTMLDivElement>, collection: any}) {\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  let {\n    maxRows,\n    groupActionLabel,\n    onGroupAction,\n    renderEmptyState = () => stringFormatter.format('tag.noTags'),\n    ...otherProps\n  } = props;\n  let {direction} = useLocale();\n  let containerRef = useRef(null);\n  let tagsRef = useRef<HTMLDivElement | null>(null);\n  let actionsRef = useRef<HTMLDivElement | null>(null);\n  let hiddenTagsRef = useRef<HTMLDivElement | null>(null);\n  let [tagState, setTagState] = useState({visibleTagCount: collection.size, showCollapseButton: false});\n  let [isCollapsed, setIsCollapsed] = useState(maxRows != null);\n  let {onRemove} = useContext(InternalTagGroupContext);\n  let isEmpty = collection.size === 0;\n  let showCollapseToggleButton = tagState.showCollapseButton || tagState.visibleTagCount < collection.size;\n  let formContext = useContext(FormContext);\n  let domRef = useDOMRef(ref);\n\n  let allItems = useMemo(\n    () => Array.from(collection) as Array<Node<T>>,\n    [collection]\n  );\n  let items = useMemo(\n    () => Array.from(collection).slice(0, !isCollapsed ? collection.size : tagState.visibleTagCount) as Array<Node<T>>,\n    [collection, tagState.visibleTagCount, isCollapsed]\n  );\n\n  let updateVisibleTagCount = useEffectEvent(() => {\n    if (maxRows == null) {\n      setTagState({visibleTagCount: collection.size, showCollapseButton: false});\n    }\n\n    if (maxRows != null && maxRows > 0) {\n      let computeVisibleTagCount = () => {\n        let currContainerRef: HTMLDivElement | null = hiddenTagsRef.current;\n        let currTagsRef: HTMLDivElement | null = hiddenTagsRef.current;\n        let currActionsRef: HTMLDivElement | null = actionsRef.current;\n        if (!currContainerRef || !currTagsRef || collection.size === 0 || currContainerRef.parentElement == null) {\n          return {\n            visibleTagCount: 0,\n            showCollapseButton: false\n          };\n        }\n\n        // Count rows and show tags until we hit the maxRows.\n        // I think this is still a safe assumption, and we don't need to queryAll for role=tag\n        let tags = [...currTagsRef.children];\n        let currY = -Infinity;\n        let rowCount = 0;\n        let index = 0;\n        let tagWidths: number[] = [];\n        for (let tag of tags) {\n          let {width, y} = tag.getBoundingClientRect();\n\n          if (y !== currY) {\n            currY = y;\n            rowCount++;\n          }\n\n          if (rowCount > maxRows) {\n            break;\n          }\n          tagWidths.push(width);\n          index++;\n        }\n\n        // Remove tags until there is space for the collapse button and action button (if present) on the last row.\n        let buttons = currActionsRef ? [...currActionsRef.children] : [];\n        if (buttons.length > 0 && rowCount >= maxRows) {\n          let buttonsWidth = buttons.reduce((acc, curr) => acc += curr.getBoundingClientRect().width, 0);\n          let margins = parseFloat(getComputedStyle(buttons[0]).marginInlineStart);\n          buttonsWidth += margins * 2;\n          let end = direction === 'ltr' ? 'right' : 'left';\n          let containerEnd = currContainerRef.parentElement?.getBoundingClientRect()[end] - margins;\n          let lastTagEnd = tags[index - 1]?.getBoundingClientRect()[end];\n          lastTagEnd += margins;\n          let availableWidth = containerEnd - lastTagEnd;\n\n          while (availableWidth <= buttonsWidth && index > 0) {\n            let tagWidth = tagWidths.pop();\n            if (tagWidth != null) {\n              availableWidth += tagWidth;\n            }\n            index--;\n          }\n        }\n\n        return {\n          visibleTagCount: Math.max(index, 1),\n          showCollapseButton: index < collection.size\n        };\n      };\n      let result = computeVisibleTagCount();\n      flushSync(() => {\n        setTagState(result);\n      });\n    }\n  });\n\n  useResizeObserver({ref: maxRows != null ? containerRef : undefined, onResize: updateVisibleTagCount});\n\n  useLayoutEffect(() => {\n    if (collection.size > 0 && (maxRows != null && maxRows > 0)) {\n      queueMicrotask(updateVisibleTagCount);\n    }\n  }, [collection.size, updateVisibleTagCount, maxRows]);\n\n  useEffect(() => {\n    // Recalculate visible tags when fonts are loaded.\n    document.fonts?.ready.then(() => updateVisibleTagCount());\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  let handlePressCollapse = () => {\n    setIsCollapsed(prevCollapsed => !prevCollapsed);\n  };\n\n  let helpText: ReactNode = null;\n  if (!isInvalid && description) {\n    helpText =  (\n      <Text\n        slot=\"description\"\n        styles={helpTextStyles({size})}>\n        {description}\n      </Text>\n    );\n  } else if (isInvalid) {\n    helpText = (\n      <div\n        className={helpTextStyles({size, isInvalid})}>\n        <CenterBaseline>\n          <AlertIcon />\n        </CenterBaseline>\n        <Text slot=\"errorMessage\">\n          {errorMessage}\n        </Text>\n      </div>\n    );\n  }\n\n  return (\n    <AriaTagGroup\n      {...otherProps}\n      ref={domRef}\n      style={UNSAFE_style}\n      className={UNSAFE_className + style(field(), getAllowedOverrides())({\n        size,\n        labelPosition: labelPosition,\n        isInForm: !!formContext\n      }, props.styles)}>\n      <FieldLabel\n        size={size}\n        labelPosition={labelPosition}\n        labelAlign={labelAlign}\n        contextualHelp={props.contextualHelp}>\n        {label}\n      </FieldLabel>\n      <div\n        ref={containerRef}\n        className={style({\n          gridArea: 'input',\n          minWidth: 'full',\n          marginStart: {\n            default: -4,\n            isEmpty: 0\n          },\n          marginEnd: {\n            default: 4,\n            isEmpty: 0\n          },\n          position: 'relative'\n        })({isEmpty})}>\n        <FormContext.Provider value={{...formContext, size}}>\n          <Provider\n            values={[\n              [RACTextContext, undefined],\n              [TagGroupContext, {size, isEmphasized}]\n            ]}>\n            {/* invisible collection for measuring */}\n            {maxRows != null && (\n              <div\n                // @ts-ignore\n                inert=\"true\"\n                ref={hiddenTagsRef}\n                className={style({\n                  display: 'inline',\n                  flexWrap: 'wrap',\n                  fontFamily: 'sans',\n                  position: 'absolute',\n                  top: 0,\n                  bottom: 0,\n                  start: -4,\n                  end: 4,\n                  visibility: 'hidden',\n                  overflow: 'hidden',\n                  opacity: 0\n                })}>\n                {allItems.map(item => {\n                  // pull off individual props as an allow list, don't want refs or other props getting through\n                  return (\n                    <div\n                      style={item.props.UNSAFE_style}\n                      key={item.key}\n                      className={item.props.className({size, allowsRemoving: Boolean(onRemove)})}>\n                      {item.props.children({size, allowsRemoving: Boolean(onRemove), isInCtx: true})}\n                    </div>\n                  );\n                })}\n              </div>\n            )}\n            {/* real tag list */}\n            <TagList\n              ref={tagsRef}\n              items={items}\n              renderEmptyState={renderEmptyState}\n              className={style({\n                display: 'inline',\n                minWidth: 'full',\n                font: 'ui'\n              })}>\n              {item => <Tag {...item.props} id={item.key} textValue={item.textValue} />}\n            </TagList>\n            {!isEmpty && (showCollapseToggleButton || groupActionLabel) &&\n              <ActionGroup\n                collection={collection}\n                aria-label={props['aria-label']}\n                aria-labelledby={props['aria-labelledby']}\n                actionsRef={actionsRef}\n                tagState={tagState}\n                size={size}\n                isCollapsed={isCollapsed}\n                handlePressCollapse={handlePressCollapse}\n                onGroupAction={onGroupAction}\n                groupActionLabel={groupActionLabel} />\n            }\n          </Provider>\n        </FormContext.Provider>\n      </div>\n      {helpText}\n    </AriaTagGroup>\n  );\n}\n\nfunction ActionGroup(props) {\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  let {\n    actionsRef,\n    tagState,\n    size,\n    isCollapsed,\n    handlePressCollapse,\n    onGroupAction,\n    groupActionLabel,\n    collection,\n    // directly use aria-labelling from the TagGroup because we can't use the id from the TagList\n    // and we can't supply an id to the TagList because it'll cause an issue where all the tag ids flip back\n    // and forth with their prefix in an infinite loop\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy\n  } = props;\n\n  let actionsId = useId();\n  // might need to localize the aria-label which concatenates with this label\n  let actionGroupLabel = stringFormatter.format('tag.actions');\n  return (\n    <div\n      role=\"group\"\n      ref={actionsRef}\n      id={actionsId}\n      aria-label={ariaLabel ? `${ariaLabel} ${actionGroupLabel}` : actionGroupLabel}\n      aria-labelledby={ariaLabelledBy ? ariaLabelledBy : undefined}\n      className={style({\n        display: 'inline'\n      })}>\n      {tagState.showCollapseButton &&\n        <ActionButton\n          isQuiet\n          size={size}\n          styles={style({margin: 4})}\n          UNSAFE_style={{display: 'inline-flex'}}\n          onPress={handlePressCollapse}>\n          {isCollapsed ?\n            stringFormatter.format('tag.showAllButtonLabel', {tagCount: collection.size}) :\n            stringFormatter.format('tag.hideButtonLabel')}\n        </ActionButton>\n      }\n      {groupActionLabel && onGroupAction &&\n        <ActionButton\n          isQuiet\n          size={size}\n          styles={style({margin: 4})}\n          UNSAFE_style={{display: 'inline-flex'}}\n          onPress={() => onGroupAction?.()}>\n          {groupActionLabel}\n        </ActionButton>\n      }\n    </div>\n  );\n}\n\nconst tagStyles = style({\n  ...focusRing(),\n  display: 'inline-flex',\n  boxSizing: 'border-box',\n  maxWidth: 'full',\n  verticalAlign: 'middle',\n  alignItems: 'center',\n  justifyContent: 'center',\n  font: 'control',\n  height: 'control',\n  transition: 'default',\n  minWidth: 0,\n  // maxWidth: '[calc(self(height) * 7)]', // s2 designs show a max width on tags but we pushed back on this in v3\n  backgroundColor: {\n    default: 'gray-100',\n    isHovered: {\n      default: 'gray-200'\n    },\n    isFocusVisible: {\n      default: 'gray-200'\n    },\n    isSelected: {\n      default: 'neutral',\n      isEmphasized: {\n        default: 'accent'\n      }\n    },\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonFace',\n      isSelected: 'Highlight'\n    }\n  },\n  color: {\n    default: 'neutral',\n    isSelected: {\n      default: 'gray-25',\n      isEmphasized: 'white'\n    },\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonText',\n      isSelected: 'HighlightText',\n      isDisabled: 'GrayText'\n    }\n  },\n  borderStyle: 'none',\n  paddingStart: {\n    default: 'edge-to-text'\n  },\n  paddingEnd: {\n    default: 'edge-to-text',\n    allowsRemoving: 0\n  },\n  paddingY: 0,\n  margin: 4,\n  borderRadius: 'control',\n  cursor: {\n    default: 'default',\n    isLink: 'pointer'\n  },\n  '--iconMargin': {\n    type: 'marginTop',\n    value: {\n      default: fontRelative(-2)\n    }\n  },\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n});\n\nconst avatarSize = {\n  S: 16,\n  M: 20,\n  L: 24\n} as const;\n\n/** An individual Tag for TagGroups. */\nexport const Tag = /*#__PURE__*/ (forwardRef as forwardRefType)(function Tag({children, textValue, ...props}: TagProps, ref: DOMRef<HTMLDivElement>) {\n  textValue ||= typeof children === 'string' ? children : undefined;\n  let ctx = useSlottedContext(TagGroupContext);\n  let isInRealDOM = Boolean(ctx?.size);\n  let {size, isEmphasized} = ctx ?? {};\n  let domRef = useDOMRef(ref);\n\n  let backupRef = useRef(null);\n  domRef = domRef || backupRef;\n  let isLink = props.href != null;\n  return (\n    <AriaTag\n      textValue={textValue}\n      {...props}\n      ref={domRef}\n      style={pressScale(domRef)}\n      className={renderProps => tagStyles({size, isEmphasized, isLink, ...renderProps})} >\n      {composeRenderProps(children, (children, renderProps) => (\n        <TagWrapper isInRealDOM={isInRealDOM} {...renderProps}>{typeof children === 'string' ? <Text>{children}</Text> : children}</TagWrapper>\n      ))}\n    </AriaTag>\n  );\n});\n\nfunction TagWrapper({children, isDisabled, allowsRemoving, isInRealDOM}) {\n  let {size = 'M'} = useSlottedContext(TagGroupContext) ?? {};\n  return (\n    <>\n      {isInRealDOM && (\n      <div\n        className={style({\n          display: 'flex',\n          minWidth: 0,\n          alignItems: 'center',\n          gap: 'text-to-visual',\n          forcedColorAdjust: 'none',\n          backgroundColor: 'transparent'\n        })}>\n        <Provider\n          values={[\n            [TextContext, {styles: style({order: 1, truncate: true})}],\n            [IconContext, {\n              render: centerBaseline({slot: 'icon', styles: style({order: 0})}),\n              styles: style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0})\n            }],\n            [AvatarContext, {\n              size: avatarSize[size],\n              styles: style({order: 0})\n            }],\n            [ImageContext, {\n              styles: style({\n                size: fontRelative(20),\n                flexShrink: 0,\n                order: 0,\n                aspectRatio: 'square',\n                objectFit: 'contain',\n                borderRadius: 'sm'\n              })\n            }]\n          ]}>\n          {children}\n        </Provider>\n      </div>\n        )}\n      {!isInRealDOM && children}\n      {allowsRemoving && isInRealDOM && (\n        <ClearButton\n          slot=\"remove\"\n          size={size}\n          isDisabled={isDisabled} />\n      )}\n    </>\n  );\n}\n"],"names":[],"version":3,"file":"TagGroup.cjs.map"}
+{"mappings":"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","sources":["packages/@react-spectrum/s2/src/TagGroup.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 {ActionButton} from './ActionButton';\nimport AlertIcon from '../s2wf-icons/S2_Icon_AlertTriangle_20_N.svg';\nimport {\n  Tag as AriaTag,\n  TagGroup as AriaTagGroup,\n  TagGroupProps as AriaTagGroupProps,\n  TagProps as AriaTagProps,\n  composeRenderProps,\n  ContextValue,\n  Provider,\n  TextContext as RACTextContext,\n  TagList,\n  TagListProps,\n  useLocale,\n  useSlottedContext\n} from 'react-aria-components';\nimport {AvatarContext} from './Avatar';\nimport {CenterBaseline, centerBaseline} from './CenterBaseline';\nimport {ClearButton} from './ClearButton';\nimport {Collection, CollectionBuilder} from '@react-aria/collections';\nimport {createContext, forwardRef, ReactNode, useContext, useEffect, useMemo, useRef, useState} from 'react';\nimport {DOMRef, DOMRefValue, HelpTextProps, Node, SpectrumLabelableProps} from '@react-types/shared';\nimport {field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {FieldLabel} from './Field';\nimport {flushSync} from 'react-dom';\nimport {focusRing, fontRelative, style} from '../style' with { type: 'macro' };\nimport {FormContext, useFormProps} from './Form';\nimport {forwardRefType} from './types';\nimport {IconContext} from './Icon';\nimport {ImageContext} from './Image';\nimport {inertValue, useEffectEvent, useId, useLayoutEffect, useResizeObserver} from '@react-aria/utils';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {pressScale} from './pressScale';\nimport {Text, TextContext} from './Content';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\n// Get types from RSP and extend those?\nexport interface TagProps extends Omit<AriaTagProps, 'children' | 'style' | 'className'> {\n  /** The children of the tag. */\n  children?: ReactNode\n}\n\nexport interface TagGroupProps<T> extends Omit<AriaTagGroupProps, 'children' | 'style' | 'className'>, Pick<TagListProps<T>, 'items' | 'children' | 'renderEmptyState'>, Omit<SpectrumLabelableProps, 'isRequired' | 'necessityIndicator'>, StyleProps, Omit<HelpTextProps, 'errorMessage'> {\n  /** A description for the tag group. */\n  description?: ReactNode,\n  /**\n   * The size of the tag group.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L',\n  /** Whether the tags are displayed in an emphasized style. */\n  isEmphasized?: boolean,\n  /** Provides content to display when there are no items in the tag group. */\n  renderEmptyState?: () => ReactNode,\n  /** Whether the tags are displayed in a error state. */\n  isInvalid?: boolean,\n  /** An error message for the field. */\n  errorMessage?: ReactNode,\n  /** Limit the number of rows initially shown. This will render a button that allows the user to expand to show all tags. */\n  maxRows?: number,\n  /** The label to display on the action button.  */\n  groupActionLabel?: string,\n  /** Handler that is called when the action button is pressed. */\n  onGroupAction?: () => void\n}\n\nexport const TagGroupContext = createContext<ContextValue<TagGroupProps<any>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst helpTextStyles = style({\n  gridArea: 'helptext',\n  display: 'flex',\n  alignItems: 'baseline',\n  gap: 'text-to-visual',\n  font: 'control',\n  color: {\n    default: 'neutral-subdued',\n    isInvalid: 'negative'\n  },\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  },\n  contain: 'inline-size',\n  paddingTop: '--field-gap',\n  cursor: 'text'\n});\n\nconst InternalTagGroupContext = createContext<TagGroupProps<any>>({});\n\n/** Tags allow users to categorize content. They can represent keywords or people, and are grouped to describe an item or a search request. */\nexport const TagGroup = /*#__PURE__*/ (forwardRef as forwardRefType)(function TagGroup<T extends object>(props: TagGroupProps<T>, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, TagGroupContext);\n  props = useFormProps(props);\n  let {onRemove} = props;\n  return (\n    <InternalTagGroupContext.Provider value={{onRemove}}>\n      <CollectionBuilder content={<Collection {...props} />}>\n        {collection => <TagGroupInner props={props} forwardedRef={ref} collection={collection} />}\n      </CollectionBuilder>\n    </InternalTagGroupContext.Provider>\n  );\n});\n\nfunction TagGroupInner<T>({\n  props: {\n    label,\n    description,\n    labelPosition = 'top',\n    labelAlign = 'start',\n    isEmphasized,\n    isInvalid,\n    errorMessage,\n    UNSAFE_className = '',\n    UNSAFE_style,\n    size = 'M',\n    ...props\n  },\n  forwardedRef: ref,\n  collection\n}: {props: TagGroupProps<T>, forwardedRef: DOMRef<HTMLDivElement>, collection: any}) {\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  let {\n    maxRows,\n    groupActionLabel,\n    onGroupAction,\n    renderEmptyState = () => stringFormatter.format('tag.noTags'),\n    ...otherProps\n  } = props;\n  let {direction} = useLocale();\n  let containerRef = useRef(null);\n  let tagsRef = useRef<HTMLDivElement | null>(null);\n  let actionsRef = useRef<HTMLDivElement | null>(null);\n  let hiddenTagsRef = useRef<HTMLDivElement | null>(null);\n  let [tagState, setTagState] = useState({visibleTagCount: collection.size, showCollapseButton: false});\n  let [isCollapsed, setIsCollapsed] = useState(maxRows != null);\n  let {onRemove} = useContext(InternalTagGroupContext);\n  let isEmpty = collection.size === 0;\n  let showCollapseToggleButton = tagState.showCollapseButton || tagState.visibleTagCount < collection.size;\n  let formContext = useContext(FormContext);\n  let domRef = useDOMRef(ref);\n\n  let allItems = useMemo(\n    () => Array.from(collection) as Array<Node<T>>,\n    [collection]\n  );\n  let items = useMemo(\n    () => Array.from(collection).slice(0, !isCollapsed ? collection.size : tagState.visibleTagCount) as Array<Node<T>>,\n    [collection, tagState.visibleTagCount, isCollapsed]\n  );\n\n  let updateVisibleTagCount = useEffectEvent(() => {\n    if (maxRows == null) {\n      setTagState({visibleTagCount: collection.size, showCollapseButton: false});\n    }\n\n    if (maxRows != null && maxRows > 0) {\n      let computeVisibleTagCount = () => {\n        let currContainerRef: HTMLDivElement | null = hiddenTagsRef.current;\n        let currTagsRef: HTMLDivElement | null = hiddenTagsRef.current;\n        let currActionsRef: HTMLDivElement | null = actionsRef.current;\n        if (!currContainerRef || !currTagsRef || collection.size === 0 || currContainerRef.parentElement == null) {\n          return {\n            visibleTagCount: 0,\n            showCollapseButton: false\n          };\n        }\n\n        // Count rows and show tags until we hit the maxRows.\n        // I think this is still a safe assumption, and we don't need to queryAll for role=tag\n        let tags = [...currTagsRef.children];\n        let currY = -Infinity;\n        let rowCount = 0;\n        let index = 0;\n        let tagWidths: number[] = [];\n        for (let tag of tags) {\n          let {width, y} = tag.getBoundingClientRect();\n\n          if (y !== currY) {\n            currY = y;\n            rowCount++;\n          }\n\n          if (rowCount > maxRows) {\n            break;\n          }\n          tagWidths.push(width);\n          index++;\n        }\n\n        // Remove tags until there is space for the collapse button and action button (if present) on the last row.\n        let buttons = currActionsRef ? [...currActionsRef.children] : [];\n        if (buttons.length > 0 && rowCount >= maxRows) {\n          let buttonsWidth = buttons.reduce((acc, curr) => acc += curr.getBoundingClientRect().width, 0);\n          let margins = parseFloat(getComputedStyle(buttons[0]).marginInlineStart);\n          buttonsWidth += margins * 2;\n          let end = direction === 'ltr' ? 'right' : 'left';\n          let containerEnd = currContainerRef.parentElement?.getBoundingClientRect()[end] - margins;\n          let lastTagEnd = tags[index - 1]?.getBoundingClientRect()[end];\n          lastTagEnd += margins;\n          let availableWidth = containerEnd - lastTagEnd;\n\n          while (availableWidth <= buttonsWidth && index > 0) {\n            let tagWidth = tagWidths.pop();\n            if (tagWidth != null) {\n              availableWidth += tagWidth;\n            }\n            index--;\n          }\n        }\n\n        return {\n          visibleTagCount: Math.max(index, 1),\n          showCollapseButton: index < collection.size\n        };\n      };\n      let result = computeVisibleTagCount();\n      flushSync(() => {\n        setTagState(result);\n      });\n    }\n  });\n\n  useResizeObserver({ref: maxRows != null ? containerRef : undefined, onResize: updateVisibleTagCount});\n\n  useLayoutEffect(() => {\n    if (collection.size > 0 && (maxRows != null && maxRows > 0)) {\n      queueMicrotask(updateVisibleTagCount);\n    }\n  }, [collection.size, updateVisibleTagCount, maxRows]);\n\n  useEffect(() => {\n    // Recalculate visible tags when fonts are loaded.\n    document.fonts?.ready.then(() => updateVisibleTagCount());\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  let handlePressCollapse = () => {\n    setIsCollapsed(prevCollapsed => !prevCollapsed);\n  };\n\n  let helpText: ReactNode = null;\n  if (!isInvalid && description) {\n    helpText =  (\n      <Text\n        slot=\"description\"\n        styles={helpTextStyles({size})}>\n        {description}\n      </Text>\n    );\n  } else if (isInvalid) {\n    helpText = (\n      <div\n        className={helpTextStyles({size, isInvalid})}>\n        <CenterBaseline>\n          <AlertIcon />\n        </CenterBaseline>\n        <Text slot=\"errorMessage\">\n          {errorMessage}\n        </Text>\n      </div>\n    );\n  }\n\n  return (\n    <AriaTagGroup\n      {...otherProps}\n      ref={domRef}\n      style={UNSAFE_style}\n      className={UNSAFE_className + style(field(), getAllowedOverrides())({\n        size,\n        labelPosition: labelPosition,\n        isInForm: !!formContext\n      }, props.styles)}>\n      <FieldLabel\n        size={size}\n        labelPosition={labelPosition}\n        labelAlign={labelAlign}\n        contextualHelp={props.contextualHelp}>\n        {label}\n      </FieldLabel>\n      <div\n        ref={containerRef}\n        className={style({\n          gridArea: 'input',\n          minWidth: 'full',\n          marginStart: {\n            default: -4,\n            isEmpty: 0\n          },\n          marginEnd: {\n            default: 4,\n            isEmpty: 0\n          },\n          position: 'relative'\n        })({isEmpty})}>\n        <FormContext.Provider value={{...formContext, size}}>\n          <Provider\n            values={[\n              [RACTextContext, undefined],\n              [TagGroupContext, {size, isEmphasized}]\n            ]}>\n            {/* invisible collection for measuring */}\n            {maxRows != null && (\n              <div\n                // @ts-ignore\n                inert={inertValue(true)}\n                ref={hiddenTagsRef}\n                className={style({\n                  display: 'inline',\n                  flexWrap: 'wrap',\n                  fontFamily: 'sans',\n                  position: 'absolute',\n                  top: 0,\n                  bottom: 0,\n                  start: -4,\n                  end: 4,\n                  visibility: 'hidden',\n                  overflow: 'hidden',\n                  opacity: 0\n                })}>\n                {allItems.map(item => {\n                  // pull off individual props as an allow list, don't want refs or other props getting through\n                  return (\n                    <div\n                      style={item.props.UNSAFE_style}\n                      key={item.key}\n                      className={item.props.className({size, allowsRemoving: Boolean(onRemove)})}>\n                      {item.props.children({size, allowsRemoving: Boolean(onRemove), isInCtx: true})}\n                    </div>\n                  );\n                })}\n              </div>\n            )}\n            {/* real tag list */}\n            <TagList\n              ref={tagsRef}\n              items={items}\n              renderEmptyState={renderEmptyState}\n              className={style({\n                display: 'inline',\n                minWidth: 'full',\n                font: 'ui'\n              })}>\n              {item => <Tag {...item.props} id={item.key} textValue={item.textValue} />}\n            </TagList>\n            {!isEmpty && (showCollapseToggleButton || groupActionLabel) &&\n              <ActionGroup\n                collection={collection}\n                aria-label={props['aria-label']}\n                aria-labelledby={props['aria-labelledby']}\n                actionsRef={actionsRef}\n                tagState={tagState}\n                size={size}\n                isCollapsed={isCollapsed}\n                handlePressCollapse={handlePressCollapse}\n                onGroupAction={onGroupAction}\n                groupActionLabel={groupActionLabel} />\n            }\n          </Provider>\n        </FormContext.Provider>\n      </div>\n      {helpText}\n    </AriaTagGroup>\n  );\n}\n\nfunction ActionGroup(props) {\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  let {\n    actionsRef,\n    tagState,\n    size,\n    isCollapsed,\n    handlePressCollapse,\n    onGroupAction,\n    groupActionLabel,\n    collection,\n    // directly use aria-labelling from the TagGroup because we can't use the id from the TagList\n    // and we can't supply an id to the TagList because it'll cause an issue where all the tag ids flip back\n    // and forth with their prefix in an infinite loop\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy\n  } = props;\n\n  let actionsId = useId();\n  // might need to localize the aria-label which concatenates with this label\n  let actionGroupLabel = stringFormatter.format('tag.actions');\n  return (\n    <div\n      role=\"group\"\n      ref={actionsRef}\n      id={actionsId}\n      aria-label={ariaLabel ? `${ariaLabel} ${actionGroupLabel}` : actionGroupLabel}\n      aria-labelledby={ariaLabelledBy ? ariaLabelledBy : undefined}\n      className={style({\n        display: 'inline'\n      })}>\n      {tagState.showCollapseButton &&\n        <ActionButton\n          isQuiet\n          size={size}\n          styles={style({margin: 4})}\n          UNSAFE_style={{display: 'inline-flex'}}\n          onPress={handlePressCollapse}>\n          {isCollapsed ?\n            stringFormatter.format('tag.showAllButtonLabel', {tagCount: collection.size}) :\n            stringFormatter.format('tag.hideButtonLabel')}\n        </ActionButton>\n      }\n      {groupActionLabel && onGroupAction &&\n        <ActionButton\n          isQuiet\n          size={size}\n          styles={style({margin: 4})}\n          UNSAFE_style={{display: 'inline-flex'}}\n          onPress={() => onGroupAction?.()}>\n          {groupActionLabel}\n        </ActionButton>\n      }\n    </div>\n  );\n}\n\nconst tagStyles = style({\n  ...focusRing(),\n  display: 'inline-flex',\n  boxSizing: 'border-box',\n  maxWidth: 'full',\n  verticalAlign: 'middle',\n  alignItems: 'center',\n  justifyContent: 'center',\n  font: 'control',\n  height: 'control',\n  transition: 'default',\n  minWidth: 0,\n  // maxWidth: '[calc(self(height) * 7)]', // s2 designs show a max width on tags but we pushed back on this in v3\n  backgroundColor: {\n    default: 'gray-100',\n    isHovered: {\n      default: 'gray-200'\n    },\n    isFocusVisible: {\n      default: 'gray-200'\n    },\n    isSelected: {\n      default: 'neutral',\n      isEmphasized: {\n        default: 'accent'\n      }\n    },\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonFace',\n      isSelected: 'Highlight'\n    }\n  },\n  color: {\n    default: 'neutral',\n    isSelected: {\n      default: 'gray-25',\n      isEmphasized: 'white'\n    },\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonText',\n      isSelected: 'HighlightText',\n      isDisabled: 'GrayText'\n    }\n  },\n  borderStyle: 'none',\n  paddingStart: {\n    default: 'edge-to-text'\n  },\n  paddingEnd: {\n    default: 'edge-to-text',\n    allowsRemoving: 0\n  },\n  paddingY: 0,\n  margin: 4,\n  borderRadius: 'control',\n  cursor: {\n    default: 'default',\n    isLink: 'pointer'\n  },\n  '--iconMargin': {\n    type: 'marginTop',\n    value: {\n      default: fontRelative(-2)\n    }\n  },\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n});\n\nconst avatarSize = {\n  S: 16,\n  M: 20,\n  L: 24\n} as const;\n\n/** An individual Tag for TagGroups. */\nexport const Tag = /*#__PURE__*/ (forwardRef as forwardRefType)(function Tag({children, textValue, ...props}: TagProps, ref: DOMRef<HTMLDivElement>) {\n  textValue ||= typeof children === 'string' ? children : undefined;\n  let ctx = useSlottedContext(TagGroupContext);\n  let isInRealDOM = Boolean(ctx?.size);\n  let {size, isEmphasized} = ctx ?? {};\n  let domRef = useDOMRef(ref);\n\n  let backupRef = useRef(null);\n  domRef = domRef || backupRef;\n  let isLink = props.href != null;\n  return (\n    <AriaTag\n      textValue={textValue}\n      {...props}\n      ref={domRef}\n      style={pressScale(domRef)}\n      className={renderProps => tagStyles({size, isEmphasized, isLink, ...renderProps})} >\n      {composeRenderProps(children, (children, renderProps) => (\n        <TagWrapper isInRealDOM={isInRealDOM} {...renderProps}>{typeof children === 'string' ? <Text>{children}</Text> : children}</TagWrapper>\n      ))}\n    </AriaTag>\n  );\n});\n\nfunction TagWrapper({children, isDisabled, allowsRemoving, isInRealDOM}) {\n  let {size = 'M'} = useSlottedContext(TagGroupContext) ?? {};\n  return (\n    <>\n      {isInRealDOM && (\n      <div\n        className={style({\n          display: 'flex',\n          minWidth: 0,\n          alignItems: 'center',\n          gap: 'text-to-visual',\n          forcedColorAdjust: 'none',\n          backgroundColor: 'transparent'\n        })}>\n        <Provider\n          values={[\n            [TextContext, {styles: style({order: 1, truncate: true})}],\n            [IconContext, {\n              render: centerBaseline({slot: 'icon', styles: style({order: 0})}),\n              styles: style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0})\n            }],\n            [AvatarContext, {\n              size: avatarSize[size],\n              styles: style({order: 0})\n            }],\n            [ImageContext, {\n              styles: style({\n                size: fontRelative(20),\n                flexShrink: 0,\n                order: 0,\n                aspectRatio: 'square',\n                objectFit: 'contain',\n                borderRadius: 'sm'\n              })\n            }]\n          ]}>\n          {children}\n        </Provider>\n      </div>\n        )}\n      {!isInRealDOM && children}\n      {allowsRemoving && isInRealDOM && (\n        <ClearButton\n          slot=\"remove\"\n          size={size}\n          isDisabled={isDisabled} />\n      )}\n    </>\n  );\n}\n"],"names":[],"version":3,"file":"TagGroup.cjs.map"}

package/dist/TagGroup.css

@@ -547,8 +547,6 @@
   }
 }
 
-@layer UNSAFE_overrides;
-
 @layer _.b.b {
   @media not ((hover: hover) and (pointer: fine)) {
     ._ebf {
@@ -608,8 +606,4 @@
     }
   }
 }
-
-.\.:not(#a#b) {
-  all: revert-layer;
-}
 /*# sourceMappingURL=TagGroup.css.map */

package/dist/TagGroup.css.map

@@ -1 +1 @@
-{"mappings":"ACoFuB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAwMa;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAcjB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAyBQ;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA+BF;;;;EAwDR;;;;EA6BC;;;;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;;;;EA8GC;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAUgB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAGb;;;;EAOA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAreC;EAmWL;;;;EAAA;;;;;AAnWK;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;;AAAA;EAAA;IA8QE;;;;IAqFP;;;;IAAA;;;;IAAA;;;;IAAA;;;;IA8GC;;;;IAAA;;;;;;AA9GD;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AA8GC","sources":["b7ca70995960d034","packages/@react-spectrum/s2/src/TagGroup.tsx"],"sourcesContent":["@import \"53ec8c3f8184f13f\";\n@import \"39511c3f261b5ed5\";\n@import \"0adf7c6cbf3a1f42\";\n@import \"05f90dba9e9f901e\";\n@import \"76f74241f914b430\";\n@import \"0ef2aba34cf241d8\";\n@import \"f86d9fb495210c39\";\n@import \"24a7cd4eab7f1ba0\";\n@import \"ce1f7d95b3ccf3fd\";\n@import \"70bbf6109092559b\";\n@import \"07833edfdb3bfcff\";\n@import \"ffbc1ae1f89af4e1\";\n@import \"c340d154a58b1eb0\";\n@import \"27e38777e711f6a4\";\n@import \"39f1002cc14ab33a\";\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 {ActionButton} from './ActionButton';\nimport AlertIcon from '../s2wf-icons/S2_Icon_AlertTriangle_20_N.svg';\nimport {\n  Tag as AriaTag,\n  TagGroup as AriaTagGroup,\n  TagGroupProps as AriaTagGroupProps,\n  TagProps as AriaTagProps,\n  composeRenderProps,\n  ContextValue,\n  Provider,\n  TextContext as RACTextContext,\n  TagList,\n  TagListProps,\n  useLocale,\n  useSlottedContext\n} from 'react-aria-components';\nimport {AvatarContext} from './Avatar';\nimport {CenterBaseline, centerBaseline} from './CenterBaseline';\nimport {ClearButton} from './ClearButton';\nimport {Collection, CollectionBuilder} from '@react-aria/collections';\nimport {createContext, forwardRef, ReactNode, useContext, useEffect, useMemo, useRef, useState} from 'react';\nimport {DOMRef, DOMRefValue, HelpTextProps, Node, SpectrumLabelableProps} from '@react-types/shared';\nimport {field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {FieldLabel} from './Field';\nimport {flushSync} from 'react-dom';\nimport {focusRing, fontRelative, style} from '../style' with { type: 'macro' };\nimport {FormContext, useFormProps} from './Form';\nimport {forwardRefType} from './types';\nimport {IconContext} from './Icon';\nimport {ImageContext} from './Image';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {pressScale} from './pressScale';\nimport {Text, TextContext} from './Content';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useEffectEvent, useId, useLayoutEffect, useResizeObserver} from '@react-aria/utils';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\n// Get types from RSP and extend those?\nexport interface TagProps extends Omit<AriaTagProps, 'children' | 'style' | 'className'> {\n  /** The children of the tag. */\n  children?: ReactNode\n}\n\nexport interface TagGroupProps<T> extends Omit<AriaTagGroupProps, 'children' | 'style' | 'className'>, Pick<TagListProps<T>, 'items' | 'children' | 'renderEmptyState'>, Omit<SpectrumLabelableProps, 'isRequired' | 'necessityIndicator'>, StyleProps, Omit<HelpTextProps, 'errorMessage'> {\n  /** A description for the tag group. */\n  description?: ReactNode,\n  /**\n   * The size of the tag group.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L',\n  /** Whether the tags are displayed in an emphasized style. */\n  isEmphasized?: boolean,\n  /** Provides content to display when there are no items in the tag group. */\n  renderEmptyState?: () => ReactNode,\n  /** Whether the tags are displayed in a error state. */\n  isInvalid?: boolean,\n  /** An error message for the field. */\n  errorMessage?: ReactNode,\n  /** Limit the number of rows initially shown. This will render a button that allows the user to expand to show all tags. */\n  maxRows?: number,\n  /** The label to display on the action button.  */\n  groupActionLabel?: string,\n  /** Handler that is called when the action button is pressed. */\n  onGroupAction?: () => void\n}\n\nexport const TagGroupContext = createContext<ContextValue<TagGroupProps<any>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst helpTextStyles = style({\n  gridArea: 'helptext',\n  display: 'flex',\n  alignItems: 'baseline',\n  gap: 'text-to-visual',\n  font: 'control',\n  color: {\n    default: 'neutral-subdued',\n    isInvalid: 'negative'\n  },\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  },\n  contain: 'inline-size',\n  paddingTop: '--field-gap',\n  cursor: 'text'\n});\n\nconst InternalTagGroupContext = createContext<TagGroupProps<any>>({});\n\n/** Tags allow users to categorize content. They can represent keywords or people, and are grouped to describe an item or a search request. */\nexport const TagGroup = /*#__PURE__*/ (forwardRef as forwardRefType)(function TagGroup<T extends object>(props: TagGroupProps<T>, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, TagGroupContext);\n  props = useFormProps(props);\n  let {onRemove} = props;\n  return (\n    <InternalTagGroupContext.Provider value={{onRemove}}>\n      <CollectionBuilder content={<Collection {...props} />}>\n        {collection => <TagGroupInner props={props} forwardedRef={ref} collection={collection} />}\n      </CollectionBuilder>\n    </InternalTagGroupContext.Provider>\n  );\n});\n\nfunction TagGroupInner<T>({\n  props: {\n    label,\n    description,\n    labelPosition = 'top',\n    labelAlign = 'start',\n    isEmphasized,\n    isInvalid,\n    errorMessage,\n    UNSAFE_className = '',\n    UNSAFE_style,\n    size = 'M',\n    ...props\n  },\n  forwardedRef: ref,\n  collection\n}: {props: TagGroupProps<T>, forwardedRef: DOMRef<HTMLDivElement>, collection: any}) {\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  let {\n    maxRows,\n    groupActionLabel,\n    onGroupAction,\n    renderEmptyState = () => stringFormatter.format('tag.noTags'),\n    ...otherProps\n  } = props;\n  let {direction} = useLocale();\n  let containerRef = useRef(null);\n  let tagsRef = useRef<HTMLDivElement | null>(null);\n  let actionsRef = useRef<HTMLDivElement | null>(null);\n  let hiddenTagsRef = useRef<HTMLDivElement | null>(null);\n  let [tagState, setTagState] = useState({visibleTagCount: collection.size, showCollapseButton: false});\n  let [isCollapsed, setIsCollapsed] = useState(maxRows != null);\n  let {onRemove} = useContext(InternalTagGroupContext);\n  let isEmpty = collection.size === 0;\n  let showCollapseToggleButton = tagState.showCollapseButton || tagState.visibleTagCount < collection.size;\n  let formContext = useContext(FormContext);\n  let domRef = useDOMRef(ref);\n\n  let allItems = useMemo(\n    () => Array.from(collection) as Array<Node<T>>,\n    [collection]\n  );\n  let items = useMemo(\n    () => Array.from(collection).slice(0, !isCollapsed ? collection.size : tagState.visibleTagCount) as Array<Node<T>>,\n    [collection, tagState.visibleTagCount, isCollapsed]\n  );\n\n  let updateVisibleTagCount = useEffectEvent(() => {\n    if (maxRows == null) {\n      setTagState({visibleTagCount: collection.size, showCollapseButton: false});\n    }\n\n    if (maxRows != null && maxRows > 0) {\n      let computeVisibleTagCount = () => {\n        let currContainerRef: HTMLDivElement | null = hiddenTagsRef.current;\n        let currTagsRef: HTMLDivElement | null = hiddenTagsRef.current;\n        let currActionsRef: HTMLDivElement | null = actionsRef.current;\n        if (!currContainerRef || !currTagsRef || collection.size === 0 || currContainerRef.parentElement == null) {\n          return {\n            visibleTagCount: 0,\n            showCollapseButton: false\n          };\n        }\n\n        // Count rows and show tags until we hit the maxRows.\n        // I think this is still a safe assumption, and we don't need to queryAll for role=tag\n        let tags = [...currTagsRef.children];\n        let currY = -Infinity;\n        let rowCount = 0;\n        let index = 0;\n        let tagWidths: number[] = [];\n        for (let tag of tags) {\n          let {width, y} = tag.getBoundingClientRect();\n\n          if (y !== currY) {\n            currY = y;\n            rowCount++;\n          }\n\n          if (rowCount > maxRows) {\n            break;\n          }\n          tagWidths.push(width);\n          index++;\n        }\n\n        // Remove tags until there is space for the collapse button and action button (if present) on the last row.\n        let buttons = currActionsRef ? [...currActionsRef.children] : [];\n        if (buttons.length > 0 && rowCount >= maxRows) {\n          let buttonsWidth = buttons.reduce((acc, curr) => acc += curr.getBoundingClientRect().width, 0);\n          let margins = parseFloat(getComputedStyle(buttons[0]).marginInlineStart);\n          buttonsWidth += margins * 2;\n          let end = direction === 'ltr' ? 'right' : 'left';\n          let containerEnd = currContainerRef.parentElement?.getBoundingClientRect()[end] - margins;\n          let lastTagEnd = tags[index - 1]?.getBoundingClientRect()[end];\n          lastTagEnd += margins;\n          let availableWidth = containerEnd - lastTagEnd;\n\n          while (availableWidth <= buttonsWidth && index > 0) {\n            let tagWidth = tagWidths.pop();\n            if (tagWidth != null) {\n              availableWidth += tagWidth;\n            }\n            index--;\n          }\n        }\n\n        return {\n          visibleTagCount: Math.max(index, 1),\n          showCollapseButton: index < collection.size\n        };\n      };\n      let result = computeVisibleTagCount();\n      flushSync(() => {\n        setTagState(result);\n      });\n    }\n  });\n\n  useResizeObserver({ref: maxRows != null ? containerRef : undefined, onResize: updateVisibleTagCount});\n\n  useLayoutEffect(() => {\n    if (collection.size > 0 && (maxRows != null && maxRows > 0)) {\n      queueMicrotask(updateVisibleTagCount);\n    }\n  }, [collection.size, updateVisibleTagCount, maxRows]);\n\n  useEffect(() => {\n    // Recalculate visible tags when fonts are loaded.\n    document.fonts?.ready.then(() => updateVisibleTagCount());\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  let handlePressCollapse = () => {\n    setIsCollapsed(prevCollapsed => !prevCollapsed);\n  };\n\n  let helpText: ReactNode = null;\n  if (!isInvalid && description) {\n    helpText =  (\n      <Text\n        slot=\"description\"\n        styles={helpTextStyles({size})}>\n        {description}\n      </Text>\n    );\n  } else if (isInvalid) {\n    helpText = (\n      <div\n        className={helpTextStyles({size, isInvalid})}>\n        <CenterBaseline>\n          <AlertIcon />\n        </CenterBaseline>\n        <Text slot=\"errorMessage\">\n          {errorMessage}\n        </Text>\n      </div>\n    );\n  }\n\n  return (\n    <AriaTagGroup\n      {...otherProps}\n      ref={domRef}\n      style={UNSAFE_style}\n      className={UNSAFE_className + style(field(), getAllowedOverrides())({\n        size,\n        labelPosition: labelPosition,\n        isInForm: !!formContext\n      }, props.styles)}>\n      <FieldLabel\n        size={size}\n        labelPosition={labelPosition}\n        labelAlign={labelAlign}\n        contextualHelp={props.contextualHelp}>\n        {label}\n      </FieldLabel>\n      <div\n        ref={containerRef}\n        className={style({\n          gridArea: 'input',\n          minWidth: 'full',\n          marginStart: {\n            default: -4,\n            isEmpty: 0\n          },\n          marginEnd: {\n            default: 4,\n            isEmpty: 0\n          },\n          position: 'relative'\n        })({isEmpty})}>\n        <FormContext.Provider value={{...formContext, size}}>\n          <Provider\n            values={[\n              [RACTextContext, undefined],\n              [TagGroupContext, {size, isEmphasized}]\n            ]}>\n            {/* invisible collection for measuring */}\n            {maxRows != null && (\n              <div\n                // @ts-ignore\n                inert=\"true\"\n                ref={hiddenTagsRef}\n                className={style({\n                  display: 'inline',\n                  flexWrap: 'wrap',\n                  fontFamily: 'sans',\n                  position: 'absolute',\n                  top: 0,\n                  bottom: 0,\n                  start: -4,\n                  end: 4,\n                  visibility: 'hidden',\n                  overflow: 'hidden',\n                  opacity: 0\n                })}>\n                {allItems.map(item => {\n                  // pull off individual props as an allow list, don't want refs or other props getting through\n                  return (\n                    <div\n                      style={item.props.UNSAFE_style}\n                      key={item.key}\n                      className={item.props.className({size, allowsRemoving: Boolean(onRemove)})}>\n                      {item.props.children({size, allowsRemoving: Boolean(onRemove), isInCtx: true})}\n                    </div>\n                  );\n                })}\n              </div>\n            )}\n            {/* real tag list */}\n            <TagList\n              ref={tagsRef}\n              items={items}\n              renderEmptyState={renderEmptyState}\n              className={style({\n                display: 'inline',\n                minWidth: 'full',\n                font: 'ui'\n              })}>\n              {item => <Tag {...item.props} id={item.key} textValue={item.textValue} />}\n            </TagList>\n            {!isEmpty && (showCollapseToggleButton || groupActionLabel) &&\n              <ActionGroup\n                collection={collection}\n                aria-label={props['aria-label']}\n                aria-labelledby={props['aria-labelledby']}\n                actionsRef={actionsRef}\n                tagState={tagState}\n                size={size}\n                isCollapsed={isCollapsed}\n                handlePressCollapse={handlePressCollapse}\n                onGroupAction={onGroupAction}\n                groupActionLabel={groupActionLabel} />\n            }\n          </Provider>\n        </FormContext.Provider>\n      </div>\n      {helpText}\n    </AriaTagGroup>\n  );\n}\n\nfunction ActionGroup(props) {\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  let {\n    actionsRef,\n    tagState,\n    size,\n    isCollapsed,\n    handlePressCollapse,\n    onGroupAction,\n    groupActionLabel,\n    collection,\n    // directly use aria-labelling from the TagGroup because we can't use the id from the TagList\n    // and we can't supply an id to the TagList because it'll cause an issue where all the tag ids flip back\n    // and forth with their prefix in an infinite loop\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy\n  } = props;\n\n  let actionsId = useId();\n  // might need to localize the aria-label which concatenates with this label\n  let actionGroupLabel = stringFormatter.format('tag.actions');\n  return (\n    <div\n      role=\"group\"\n      ref={actionsRef}\n      id={actionsId}\n      aria-label={ariaLabel ? `${ariaLabel} ${actionGroupLabel}` : actionGroupLabel}\n      aria-labelledby={ariaLabelledBy ? ariaLabelledBy : undefined}\n      className={style({\n        display: 'inline'\n      })}>\n      {tagState.showCollapseButton &&\n        <ActionButton\n          isQuiet\n          size={size}\n          styles={style({margin: 4})}\n          UNSAFE_style={{display: 'inline-flex'}}\n          onPress={handlePressCollapse}>\n          {isCollapsed ?\n            stringFormatter.format('tag.showAllButtonLabel', {tagCount: collection.size}) :\n            stringFormatter.format('tag.hideButtonLabel')}\n        </ActionButton>\n      }\n      {groupActionLabel && onGroupAction &&\n        <ActionButton\n          isQuiet\n          size={size}\n          styles={style({margin: 4})}\n          UNSAFE_style={{display: 'inline-flex'}}\n          onPress={() => onGroupAction?.()}>\n          {groupActionLabel}\n        </ActionButton>\n      }\n    </div>\n  );\n}\n\nconst tagStyles = style({\n  ...focusRing(),\n  display: 'inline-flex',\n  boxSizing: 'border-box',\n  maxWidth: 'full',\n  verticalAlign: 'middle',\n  alignItems: 'center',\n  justifyContent: 'center',\n  font: 'control',\n  height: 'control',\n  transition: 'default',\n  minWidth: 0,\n  // maxWidth: '[calc(self(height) * 7)]', // s2 designs show a max width on tags but we pushed back on this in v3\n  backgroundColor: {\n    default: 'gray-100',\n    isHovered: {\n      default: 'gray-200'\n    },\n    isFocusVisible: {\n      default: 'gray-200'\n    },\n    isSelected: {\n      default: 'neutral',\n      isEmphasized: {\n        default: 'accent'\n      }\n    },\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonFace',\n      isSelected: 'Highlight'\n    }\n  },\n  color: {\n    default: 'neutral',\n    isSelected: {\n      default: 'gray-25',\n      isEmphasized: 'white'\n    },\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonText',\n      isSelected: 'HighlightText',\n      isDisabled: 'GrayText'\n    }\n  },\n  borderStyle: 'none',\n  paddingStart: {\n    default: 'edge-to-text'\n  },\n  paddingEnd: {\n    default: 'edge-to-text',\n    allowsRemoving: 0\n  },\n  paddingY: 0,\n  margin: 4,\n  borderRadius: 'control',\n  cursor: {\n    default: 'default',\n    isLink: 'pointer'\n  },\n  '--iconMargin': {\n    type: 'marginTop',\n    value: {\n      default: fontRelative(-2)\n    }\n  },\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n});\n\nconst avatarSize = {\n  S: 16,\n  M: 20,\n  L: 24\n} as const;\n\n/** An individual Tag for TagGroups. */\nexport const Tag = /*#__PURE__*/ (forwardRef as forwardRefType)(function Tag({children, textValue, ...props}: TagProps, ref: DOMRef<HTMLDivElement>) {\n  textValue ||= typeof children === 'string' ? children : undefined;\n  let ctx = useSlottedContext(TagGroupContext);\n  let isInRealDOM = Boolean(ctx?.size);\n  let {size, isEmphasized} = ctx ?? {};\n  let domRef = useDOMRef(ref);\n\n  let backupRef = useRef(null);\n  domRef = domRef || backupRef;\n  let isLink = props.href != null;\n  return (\n    <AriaTag\n      textValue={textValue}\n      {...props}\n      ref={domRef}\n      style={pressScale(domRef)}\n      className={renderProps => tagStyles({size, isEmphasized, isLink, ...renderProps})} >\n      {composeRenderProps(children, (children, renderProps) => (\n        <TagWrapper isInRealDOM={isInRealDOM} {...renderProps}>{typeof children === 'string' ? <Text>{children}</Text> : children}</TagWrapper>\n      ))}\n    </AriaTag>\n  );\n});\n\nfunction TagWrapper({children, isDisabled, allowsRemoving, isInRealDOM}) {\n  let {size = 'M'} = useSlottedContext(TagGroupContext) ?? {};\n  return (\n    <>\n      {isInRealDOM && (\n      <div\n        className={style({\n          display: 'flex',\n          minWidth: 0,\n          alignItems: 'center',\n          gap: 'text-to-visual',\n          forcedColorAdjust: 'none',\n          backgroundColor: 'transparent'\n        })}>\n        <Provider\n          values={[\n            [TextContext, {styles: style({order: 1, truncate: true})}],\n            [IconContext, {\n              render: centerBaseline({slot: 'icon', styles: style({order: 0})}),\n              styles: style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0})\n            }],\n            [AvatarContext, {\n              size: avatarSize[size],\n              styles: style({order: 0})\n            }],\n            [ImageContext, {\n              styles: style({\n                size: fontRelative(20),\n                flexShrink: 0,\n                order: 0,\n                aspectRatio: 'square',\n                objectFit: 'contain',\n                borderRadius: 'sm'\n              })\n            }]\n          ]}>\n          {children}\n        </Provider>\n      </div>\n        )}\n      {!isInRealDOM && children}\n      {allowsRemoving && isInRealDOM && (\n        <ClearButton\n          slot=\"remove\"\n          size={size}\n          isDisabled={isDisabled} />\n      )}\n    </>\n  );\n}\n"],"names":[],"version":3,"file":"TagGroup.css.map"}
+{"mappings":"ACoFuB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAwMa;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAcjB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAyBQ;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA+BF;;;;EAwDR;;;;EA6BC;;;;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;;;;EA8GC;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAUgB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAGb;;;;EAOA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAreC;EAmWL;;;;EAAA;;;;;AAnWK;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IA8QE;;;;IAqFP;;;;IAAA;;;;IAAA;;;;IAAA;;;;IA8GC;;;;IAAA;;;;;;AA9GD;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA","sources":["b7ca70995960d034","packages/@react-spectrum/s2/src/TagGroup.tsx"],"sourcesContent":["@import \"53ec8c3f8184f13f\";\n@import \"39511c3f261b5ed5\";\n@import \"0adf7c6cbf3a1f42\";\n@import \"05f90dba9e9f901e\";\n@import \"76f74241f914b430\";\n@import \"0ef2aba34cf241d8\";\n@import \"f86d9fb495210c39\";\n@import \"24a7cd4eab7f1ba0\";\n@import \"ce1f7d95b3ccf3fd\";\n@import \"70bbf6109092559b\";\n@import \"07833edfdb3bfcff\";\n@import \"ffbc1ae1f89af4e1\";\n@import \"c340d154a58b1eb0\";\n@import \"27e38777e711f6a4\";\n@import \"39f1002cc14ab33a\";\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 {ActionButton} from './ActionButton';\nimport AlertIcon from '../s2wf-icons/S2_Icon_AlertTriangle_20_N.svg';\nimport {\n  Tag as AriaTag,\n  TagGroup as AriaTagGroup,\n  TagGroupProps as AriaTagGroupProps,\n  TagProps as AriaTagProps,\n  composeRenderProps,\n  ContextValue,\n  Provider,\n  TextContext as RACTextContext,\n  TagList,\n  TagListProps,\n  useLocale,\n  useSlottedContext\n} from 'react-aria-components';\nimport {AvatarContext} from './Avatar';\nimport {CenterBaseline, centerBaseline} from './CenterBaseline';\nimport {ClearButton} from './ClearButton';\nimport {Collection, CollectionBuilder} from '@react-aria/collections';\nimport {createContext, forwardRef, ReactNode, useContext, useEffect, useMemo, useRef, useState} from 'react';\nimport {DOMRef, DOMRefValue, HelpTextProps, Node, SpectrumLabelableProps} from '@react-types/shared';\nimport {field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {FieldLabel} from './Field';\nimport {flushSync} from 'react-dom';\nimport {focusRing, fontRelative, style} from '../style' with { type: 'macro' };\nimport {FormContext, useFormProps} from './Form';\nimport {forwardRefType} from './types';\nimport {IconContext} from './Icon';\nimport {ImageContext} from './Image';\nimport {inertValue, useEffectEvent, useId, useLayoutEffect, useResizeObserver} from '@react-aria/utils';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {pressScale} from './pressScale';\nimport {Text, TextContext} from './Content';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\n// Get types from RSP and extend those?\nexport interface TagProps extends Omit<AriaTagProps, 'children' | 'style' | 'className'> {\n  /** The children of the tag. */\n  children?: ReactNode\n}\n\nexport interface TagGroupProps<T> extends Omit<AriaTagGroupProps, 'children' | 'style' | 'className'>, Pick<TagListProps<T>, 'items' | 'children' | 'renderEmptyState'>, Omit<SpectrumLabelableProps, 'isRequired' | 'necessityIndicator'>, StyleProps, Omit<HelpTextProps, 'errorMessage'> {\n  /** A description for the tag group. */\n  description?: ReactNode,\n  /**\n   * The size of the tag group.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L',\n  /** Whether the tags are displayed in an emphasized style. */\n  isEmphasized?: boolean,\n  /** Provides content to display when there are no items in the tag group. */\n  renderEmptyState?: () => ReactNode,\n  /** Whether the tags are displayed in a error state. */\n  isInvalid?: boolean,\n  /** An error message for the field. */\n  errorMessage?: ReactNode,\n  /** Limit the number of rows initially shown. This will render a button that allows the user to expand to show all tags. */\n  maxRows?: number,\n  /** The label to display on the action button.  */\n  groupActionLabel?: string,\n  /** Handler that is called when the action button is pressed. */\n  onGroupAction?: () => void\n}\n\nexport const TagGroupContext = createContext<ContextValue<TagGroupProps<any>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst helpTextStyles = style({\n  gridArea: 'helptext',\n  display: 'flex',\n  alignItems: 'baseline',\n  gap: 'text-to-visual',\n  font: 'control',\n  color: {\n    default: 'neutral-subdued',\n    isInvalid: 'negative'\n  },\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  },\n  contain: 'inline-size',\n  paddingTop: '--field-gap',\n  cursor: 'text'\n});\n\nconst InternalTagGroupContext = createContext<TagGroupProps<any>>({});\n\n/** Tags allow users to categorize content. They can represent keywords or people, and are grouped to describe an item or a search request. */\nexport const TagGroup = /*#__PURE__*/ (forwardRef as forwardRefType)(function TagGroup<T extends object>(props: TagGroupProps<T>, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, TagGroupContext);\n  props = useFormProps(props);\n  let {onRemove} = props;\n  return (\n    <InternalTagGroupContext.Provider value={{onRemove}}>\n      <CollectionBuilder content={<Collection {...props} />}>\n        {collection => <TagGroupInner props={props} forwardedRef={ref} collection={collection} />}\n      </CollectionBuilder>\n    </InternalTagGroupContext.Provider>\n  );\n});\n\nfunction TagGroupInner<T>({\n  props: {\n    label,\n    description,\n    labelPosition = 'top',\n    labelAlign = 'start',\n    isEmphasized,\n    isInvalid,\n    errorMessage,\n    UNSAFE_className = '',\n    UNSAFE_style,\n    size = 'M',\n    ...props\n  },\n  forwardedRef: ref,\n  collection\n}: {props: TagGroupProps<T>, forwardedRef: DOMRef<HTMLDivElement>, collection: any}) {\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  let {\n    maxRows,\n    groupActionLabel,\n    onGroupAction,\n    renderEmptyState = () => stringFormatter.format('tag.noTags'),\n    ...otherProps\n  } = props;\n  let {direction} = useLocale();\n  let containerRef = useRef(null);\n  let tagsRef = useRef<HTMLDivElement | null>(null);\n  let actionsRef = useRef<HTMLDivElement | null>(null);\n  let hiddenTagsRef = useRef<HTMLDivElement | null>(null);\n  let [tagState, setTagState] = useState({visibleTagCount: collection.size, showCollapseButton: false});\n  let [isCollapsed, setIsCollapsed] = useState(maxRows != null);\n  let {onRemove} = useContext(InternalTagGroupContext);\n  let isEmpty = collection.size === 0;\n  let showCollapseToggleButton = tagState.showCollapseButton || tagState.visibleTagCount < collection.size;\n  let formContext = useContext(FormContext);\n  let domRef = useDOMRef(ref);\n\n  let allItems = useMemo(\n    () => Array.from(collection) as Array<Node<T>>,\n    [collection]\n  );\n  let items = useMemo(\n    () => Array.from(collection).slice(0, !isCollapsed ? collection.size : tagState.visibleTagCount) as Array<Node<T>>,\n    [collection, tagState.visibleTagCount, isCollapsed]\n  );\n\n  let updateVisibleTagCount = useEffectEvent(() => {\n    if (maxRows == null) {\n      setTagState({visibleTagCount: collection.size, showCollapseButton: false});\n    }\n\n    if (maxRows != null && maxRows > 0) {\n      let computeVisibleTagCount = () => {\n        let currContainerRef: HTMLDivElement | null = hiddenTagsRef.current;\n        let currTagsRef: HTMLDivElement | null = hiddenTagsRef.current;\n        let currActionsRef: HTMLDivElement | null = actionsRef.current;\n        if (!currContainerRef || !currTagsRef || collection.size === 0 || currContainerRef.parentElement == null) {\n          return {\n            visibleTagCount: 0,\n            showCollapseButton: false\n          };\n        }\n\n        // Count rows and show tags until we hit the maxRows.\n        // I think this is still a safe assumption, and we don't need to queryAll for role=tag\n        let tags = [...currTagsRef.children];\n        let currY = -Infinity;\n        let rowCount = 0;\n        let index = 0;\n        let tagWidths: number[] = [];\n        for (let tag of tags) {\n          let {width, y} = tag.getBoundingClientRect();\n\n          if (y !== currY) {\n            currY = y;\n            rowCount++;\n          }\n\n          if (rowCount > maxRows) {\n            break;\n          }\n          tagWidths.push(width);\n          index++;\n        }\n\n        // Remove tags until there is space for the collapse button and action button (if present) on the last row.\n        let buttons = currActionsRef ? [...currActionsRef.children] : [];\n        if (buttons.length > 0 && rowCount >= maxRows) {\n          let buttonsWidth = buttons.reduce((acc, curr) => acc += curr.getBoundingClientRect().width, 0);\n          let margins = parseFloat(getComputedStyle(buttons[0]).marginInlineStart);\n          buttonsWidth += margins * 2;\n          let end = direction === 'ltr' ? 'right' : 'left';\n          let containerEnd = currContainerRef.parentElement?.getBoundingClientRect()[end] - margins;\n          let lastTagEnd = tags[index - 1]?.getBoundingClientRect()[end];\n          lastTagEnd += margins;\n          let availableWidth = containerEnd - lastTagEnd;\n\n          while (availableWidth <= buttonsWidth && index > 0) {\n            let tagWidth = tagWidths.pop();\n            if (tagWidth != null) {\n              availableWidth += tagWidth;\n            }\n            index--;\n          }\n        }\n\n        return {\n          visibleTagCount: Math.max(index, 1),\n          showCollapseButton: index < collection.size\n        };\n      };\n      let result = computeVisibleTagCount();\n      flushSync(() => {\n        setTagState(result);\n      });\n    }\n  });\n\n  useResizeObserver({ref: maxRows != null ? containerRef : undefined, onResize: updateVisibleTagCount});\n\n  useLayoutEffect(() => {\n    if (collection.size > 0 && (maxRows != null && maxRows > 0)) {\n      queueMicrotask(updateVisibleTagCount);\n    }\n  }, [collection.size, updateVisibleTagCount, maxRows]);\n\n  useEffect(() => {\n    // Recalculate visible tags when fonts are loaded.\n    document.fonts?.ready.then(() => updateVisibleTagCount());\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  let handlePressCollapse = () => {\n    setIsCollapsed(prevCollapsed => !prevCollapsed);\n  };\n\n  let helpText: ReactNode = null;\n  if (!isInvalid && description) {\n    helpText =  (\n      <Text\n        slot=\"description\"\n        styles={helpTextStyles({size})}>\n        {description}\n      </Text>\n    );\n  } else if (isInvalid) {\n    helpText = (\n      <div\n        className={helpTextStyles({size, isInvalid})}>\n        <CenterBaseline>\n          <AlertIcon />\n        </CenterBaseline>\n        <Text slot=\"errorMessage\">\n          {errorMessage}\n        </Text>\n      </div>\n    );\n  }\n\n  return (\n    <AriaTagGroup\n      {...otherProps}\n      ref={domRef}\n      style={UNSAFE_style}\n      className={UNSAFE_className + style(field(), getAllowedOverrides())({\n        size,\n        labelPosition: labelPosition,\n        isInForm: !!formContext\n      }, props.styles)}>\n      <FieldLabel\n        size={size}\n        labelPosition={labelPosition}\n        labelAlign={labelAlign}\n        contextualHelp={props.contextualHelp}>\n        {label}\n      </FieldLabel>\n      <div\n        ref={containerRef}\n        className={style({\n          gridArea: 'input',\n          minWidth: 'full',\n          marginStart: {\n            default: -4,\n            isEmpty: 0\n          },\n          marginEnd: {\n            default: 4,\n            isEmpty: 0\n          },\n          position: 'relative'\n        })({isEmpty})}>\n        <FormContext.Provider value={{...formContext, size}}>\n          <Provider\n            values={[\n              [RACTextContext, undefined],\n              [TagGroupContext, {size, isEmphasized}]\n            ]}>\n            {/* invisible collection for measuring */}\n            {maxRows != null && (\n              <div\n                // @ts-ignore\n                inert={inertValue(true)}\n                ref={hiddenTagsRef}\n                className={style({\n                  display: 'inline',\n                  flexWrap: 'wrap',\n                  fontFamily: 'sans',\n                  position: 'absolute',\n                  top: 0,\n                  bottom: 0,\n                  start: -4,\n                  end: 4,\n                  visibility: 'hidden',\n                  overflow: 'hidden',\n                  opacity: 0\n                })}>\n                {allItems.map(item => {\n                  // pull off individual props as an allow list, don't want refs or other props getting through\n                  return (\n                    <div\n                      style={item.props.UNSAFE_style}\n                      key={item.key}\n                      className={item.props.className({size, allowsRemoving: Boolean(onRemove)})}>\n                      {item.props.children({size, allowsRemoving: Boolean(onRemove), isInCtx: true})}\n                    </div>\n                  );\n                })}\n              </div>\n            )}\n            {/* real tag list */}\n            <TagList\n              ref={tagsRef}\n              items={items}\n              renderEmptyState={renderEmptyState}\n              className={style({\n                display: 'inline',\n                minWidth: 'full',\n                font: 'ui'\n              })}>\n              {item => <Tag {...item.props} id={item.key} textValue={item.textValue} />}\n            </TagList>\n            {!isEmpty && (showCollapseToggleButton || groupActionLabel) &&\n              <ActionGroup\n                collection={collection}\n                aria-label={props['aria-label']}\n                aria-labelledby={props['aria-labelledby']}\n                actionsRef={actionsRef}\n                tagState={tagState}\n                size={size}\n                isCollapsed={isCollapsed}\n                handlePressCollapse={handlePressCollapse}\n                onGroupAction={onGroupAction}\n                groupActionLabel={groupActionLabel} />\n            }\n          </Provider>\n        </FormContext.Provider>\n      </div>\n      {helpText}\n    </AriaTagGroup>\n  );\n}\n\nfunction ActionGroup(props) {\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  let {\n    actionsRef,\n    tagState,\n    size,\n    isCollapsed,\n    handlePressCollapse,\n    onGroupAction,\n    groupActionLabel,\n    collection,\n    // directly use aria-labelling from the TagGroup because we can't use the id from the TagList\n    // and we can't supply an id to the TagList because it'll cause an issue where all the tag ids flip back\n    // and forth with their prefix in an infinite loop\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy\n  } = props;\n\n  let actionsId = useId();\n  // might need to localize the aria-label which concatenates with this label\n  let actionGroupLabel = stringFormatter.format('tag.actions');\n  return (\n    <div\n      role=\"group\"\n      ref={actionsRef}\n      id={actionsId}\n      aria-label={ariaLabel ? `${ariaLabel} ${actionGroupLabel}` : actionGroupLabel}\n      aria-labelledby={ariaLabelledBy ? ariaLabelledBy : undefined}\n      className={style({\n        display: 'inline'\n      })}>\n      {tagState.showCollapseButton &&\n        <ActionButton\n          isQuiet\n          size={size}\n          styles={style({margin: 4})}\n          UNSAFE_style={{display: 'inline-flex'}}\n          onPress={handlePressCollapse}>\n          {isCollapsed ?\n            stringFormatter.format('tag.showAllButtonLabel', {tagCount: collection.size}) :\n            stringFormatter.format('tag.hideButtonLabel')}\n        </ActionButton>\n      }\n      {groupActionLabel && onGroupAction &&\n        <ActionButton\n          isQuiet\n          size={size}\n          styles={style({margin: 4})}\n          UNSAFE_style={{display: 'inline-flex'}}\n          onPress={() => onGroupAction?.()}>\n          {groupActionLabel}\n        </ActionButton>\n      }\n    </div>\n  );\n}\n\nconst tagStyles = style({\n  ...focusRing(),\n  display: 'inline-flex',\n  boxSizing: 'border-box',\n  maxWidth: 'full',\n  verticalAlign: 'middle',\n  alignItems: 'center',\n  justifyContent: 'center',\n  font: 'control',\n  height: 'control',\n  transition: 'default',\n  minWidth: 0,\n  // maxWidth: '[calc(self(height) * 7)]', // s2 designs show a max width on tags but we pushed back on this in v3\n  backgroundColor: {\n    default: 'gray-100',\n    isHovered: {\n      default: 'gray-200'\n    },\n    isFocusVisible: {\n      default: 'gray-200'\n    },\n    isSelected: {\n      default: 'neutral',\n      isEmphasized: {\n        default: 'accent'\n      }\n    },\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonFace',\n      isSelected: 'Highlight'\n    }\n  },\n  color: {\n    default: 'neutral',\n    isSelected: {\n      default: 'gray-25',\n      isEmphasized: 'white'\n    },\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonText',\n      isSelected: 'HighlightText',\n      isDisabled: 'GrayText'\n    }\n  },\n  borderStyle: 'none',\n  paddingStart: {\n    default: 'edge-to-text'\n  },\n  paddingEnd: {\n    default: 'edge-to-text',\n    allowsRemoving: 0\n  },\n  paddingY: 0,\n  margin: 4,\n  borderRadius: 'control',\n  cursor: {\n    default: 'default',\n    isLink: 'pointer'\n  },\n  '--iconMargin': {\n    type: 'marginTop',\n    value: {\n      default: fontRelative(-2)\n    }\n  },\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n});\n\nconst avatarSize = {\n  S: 16,\n  M: 20,\n  L: 24\n} as const;\n\n/** An individual Tag for TagGroups. */\nexport const Tag = /*#__PURE__*/ (forwardRef as forwardRefType)(function Tag({children, textValue, ...props}: TagProps, ref: DOMRef<HTMLDivElement>) {\n  textValue ||= typeof children === 'string' ? children : undefined;\n  let ctx = useSlottedContext(TagGroupContext);\n  let isInRealDOM = Boolean(ctx?.size);\n  let {size, isEmphasized} = ctx ?? {};\n  let domRef = useDOMRef(ref);\n\n  let backupRef = useRef(null);\n  domRef = domRef || backupRef;\n  let isLink = props.href != null;\n  return (\n    <AriaTag\n      textValue={textValue}\n      {...props}\n      ref={domRef}\n      style={pressScale(domRef)}\n      className={renderProps => tagStyles({size, isEmphasized, isLink, ...renderProps})} >\n      {composeRenderProps(children, (children, renderProps) => (\n        <TagWrapper isInRealDOM={isInRealDOM} {...renderProps}>{typeof children === 'string' ? <Text>{children}</Text> : children}</TagWrapper>\n      ))}\n    </AriaTag>\n  );\n});\n\nfunction TagWrapper({children, isDisabled, allowsRemoving, isInRealDOM}) {\n  let {size = 'M'} = useSlottedContext(TagGroupContext) ?? {};\n  return (\n    <>\n      {isInRealDOM && (\n      <div\n        className={style({\n          display: 'flex',\n          minWidth: 0,\n          alignItems: 'center',\n          gap: 'text-to-visual',\n          forcedColorAdjust: 'none',\n          backgroundColor: 'transparent'\n        })}>\n        <Provider\n          values={[\n            [TextContext, {styles: style({order: 1, truncate: true})}],\n            [IconContext, {\n              render: centerBaseline({slot: 'icon', styles: style({order: 0})}),\n              styles: style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0})\n            }],\n            [AvatarContext, {\n              size: avatarSize[size],\n              styles: style({order: 0})\n            }],\n            [ImageContext, {\n              styles: style({\n                size: fontRelative(20),\n                flexShrink: 0,\n                order: 0,\n                aspectRatio: 'square',\n                objectFit: 'contain',\n                borderRadius: 'sm'\n              })\n            }]\n          ]}>\n          {children}\n        </Provider>\n      </div>\n        )}\n      {!isInRealDOM && children}\n      {allowsRemoving && isInRealDOM && (\n        <ClearButton\n          slot=\"remove\"\n          size={size}\n          isDisabled={isDisabled} />\n      )}\n    </>\n  );\n}\n"],"names":[],"version":3,"file":"TagGroup.css.map"}

package/dist/TagGroup.mjs

@@ -17,8 +17,8 @@ import {useLocale as $kY5I6$useLocale, TagGroup as $kY5I6$TagGroup, Provider as
 import {CollectionBuilder as $kY5I6$CollectionBuilder, Collection as $kY5I6$Collection} from "@react-aria/collections";
 import {createContext as $kY5I6$createContext, forwardRef as $kY5I6$forwardRef, useRef as $kY5I6$useRef, useState as $kY5I6$useState, useContext as $kY5I6$useContext, useMemo as $kY5I6$useMemo, useEffect as $kY5I6$useEffect} from "react";
 import {flushSync as $kY5I6$flushSync} from "react-dom";
+import {useEffectEvent as $kY5I6$useEffectEvent, useResizeObserver as $kY5I6$useResizeObserver, useLayoutEffect as $kY5I6$useLayoutEffect, inertValue as $kY5I6$inertValue, useId as $kY5I6$useId} from "@react-aria/utils";
 import {useDOMRef as $kY5I6$useDOMRef} from "@react-spectrum/utils";
-import {useEffectEvent as $kY5I6$useEffectEvent, useResizeObserver as $kY5I6$useResizeObserver, useLayoutEffect as $kY5I6$useLayoutEffect, useId as $kY5I6$useId} from "@react-aria/utils";
 import {useLocalizedStringFormatter as $kY5I6$useLocalizedStringFormatter} from "@react-aria/i18n";
 
 
@@ -378,7 +378,7 @@ function $1d63bfab43d9ffe1$var$TagGroupInner({ props: { label: label, descriptio
                         children: [
                             maxRows != null && /*#__PURE__*/ (0, $kY5I6$jsx)("div", {
                                 // @ts-ignore
-                                inert: "true",
+                                inert: (0, $kY5I6$inertValue)(true),
                                 ref: hiddenTagsRef,
                                 className: " . _0c _8a _da _d-enzrfpb _d-enzwzjc _d-enzykdd _d-enzzrge _d-eo0c6sf _d-1uotwbwg _d-bc1l9oh Va Ya _aa __Fb __wb __xb _L-3t1x",
                                 children: allItems.map((item)=>{

package/dist/TagGroup.mjs.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-spectrum/s2/src/TagGroup.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 {ActionButton} from './ActionButton';\nimport AlertIcon from '../s2wf-icons/S2_Icon_AlertTriangle_20_N.svg';\nimport {\n  Tag as AriaTag,\n  TagGroup as AriaTagGroup,\n  TagGroupProps as AriaTagGroupProps,\n  TagProps as AriaTagProps,\n  composeRenderProps,\n  ContextValue,\n  Provider,\n  TextContext as RACTextContext,\n  TagList,\n  TagListProps,\n  useLocale,\n  useSlottedContext\n} from 'react-aria-components';\nimport {AvatarContext} from './Avatar';\nimport {CenterBaseline, centerBaseline} from './CenterBaseline';\nimport {ClearButton} from './ClearButton';\nimport {Collection, CollectionBuilder} from '@react-aria/collections';\nimport {createContext, forwardRef, ReactNode, useContext, useEffect, useMemo, useRef, useState} from 'react';\nimport {DOMRef, DOMRefValue, HelpTextProps, Node, SpectrumLabelableProps} from '@react-types/shared';\nimport {field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {FieldLabel} from './Field';\nimport {flushSync} from 'react-dom';\nimport {focusRing, fontRelative, style} from '../style' with { type: 'macro' };\nimport {FormContext, useFormProps} from './Form';\nimport {forwardRefType} from './types';\nimport {IconContext} from './Icon';\nimport {ImageContext} from './Image';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {pressScale} from './pressScale';\nimport {Text, TextContext} from './Content';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useEffectEvent, useId, useLayoutEffect, useResizeObserver} from '@react-aria/utils';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\n// Get types from RSP and extend those?\nexport interface TagProps extends Omit<AriaTagProps, 'children' | 'style' | 'className'> {\n  /** The children of the tag. */\n  children?: ReactNode\n}\n\nexport interface TagGroupProps<T> extends Omit<AriaTagGroupProps, 'children' | 'style' | 'className'>, Pick<TagListProps<T>, 'items' | 'children' | 'renderEmptyState'>, Omit<SpectrumLabelableProps, 'isRequired' | 'necessityIndicator'>, StyleProps, Omit<HelpTextProps, 'errorMessage'> {\n  /** A description for the tag group. */\n  description?: ReactNode,\n  /**\n   * The size of the tag group.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L',\n  /** Whether the tags are displayed in an emphasized style. */\n  isEmphasized?: boolean,\n  /** Provides content to display when there are no items in the tag group. */\n  renderEmptyState?: () => ReactNode,\n  /** Whether the tags are displayed in a error state. */\n  isInvalid?: boolean,\n  /** An error message for the field. */\n  errorMessage?: ReactNode,\n  /** Limit the number of rows initially shown. This will render a button that allows the user to expand to show all tags. */\n  maxRows?: number,\n  /** The label to display on the action button.  */\n  groupActionLabel?: string,\n  /** Handler that is called when the action button is pressed. */\n  onGroupAction?: () => void\n}\n\nexport const TagGroupContext = createContext<ContextValue<TagGroupProps<any>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst helpTextStyles = style({\n  gridArea: 'helptext',\n  display: 'flex',\n  alignItems: 'baseline',\n  gap: 'text-to-visual',\n  font: 'control',\n  color: {\n    default: 'neutral-subdued',\n    isInvalid: 'negative'\n  },\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  },\n  contain: 'inline-size',\n  paddingTop: '--field-gap',\n  cursor: 'text'\n});\n\nconst InternalTagGroupContext = createContext<TagGroupProps<any>>({});\n\n/** Tags allow users to categorize content. They can represent keywords or people, and are grouped to describe an item or a search request. */\nexport const TagGroup = /*#__PURE__*/ (forwardRef as forwardRefType)(function TagGroup<T extends object>(props: TagGroupProps<T>, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, TagGroupContext);\n  props = useFormProps(props);\n  let {onRemove} = props;\n  return (\n    <InternalTagGroupContext.Provider value={{onRemove}}>\n      <CollectionBuilder content={<Collection {...props} />}>\n        {collection => <TagGroupInner props={props} forwardedRef={ref} collection={collection} />}\n      </CollectionBuilder>\n    </InternalTagGroupContext.Provider>\n  );\n});\n\nfunction TagGroupInner<T>({\n  props: {\n    label,\n    description,\n    labelPosition = 'top',\n    labelAlign = 'start',\n    isEmphasized,\n    isInvalid,\n    errorMessage,\n    UNSAFE_className = '',\n    UNSAFE_style,\n    size = 'M',\n    ...props\n  },\n  forwardedRef: ref,\n  collection\n}: {props: TagGroupProps<T>, forwardedRef: DOMRef<HTMLDivElement>, collection: any}) {\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  let {\n    maxRows,\n    groupActionLabel,\n    onGroupAction,\n    renderEmptyState = () => stringFormatter.format('tag.noTags'),\n    ...otherProps\n  } = props;\n  let {direction} = useLocale();\n  let containerRef = useRef(null);\n  let tagsRef = useRef<HTMLDivElement | null>(null);\n  let actionsRef = useRef<HTMLDivElement | null>(null);\n  let hiddenTagsRef = useRef<HTMLDivElement | null>(null);\n  let [tagState, setTagState] = useState({visibleTagCount: collection.size, showCollapseButton: false});\n  let [isCollapsed, setIsCollapsed] = useState(maxRows != null);\n  let {onRemove} = useContext(InternalTagGroupContext);\n  let isEmpty = collection.size === 0;\n  let showCollapseToggleButton = tagState.showCollapseButton || tagState.visibleTagCount < collection.size;\n  let formContext = useContext(FormContext);\n  let domRef = useDOMRef(ref);\n\n  let allItems = useMemo(\n    () => Array.from(collection) as Array<Node<T>>,\n    [collection]\n  );\n  let items = useMemo(\n    () => Array.from(collection).slice(0, !isCollapsed ? collection.size : tagState.visibleTagCount) as Array<Node<T>>,\n    [collection, tagState.visibleTagCount, isCollapsed]\n  );\n\n  let updateVisibleTagCount = useEffectEvent(() => {\n    if (maxRows == null) {\n      setTagState({visibleTagCount: collection.size, showCollapseButton: false});\n    }\n\n    if (maxRows != null && maxRows > 0) {\n      let computeVisibleTagCount = () => {\n        let currContainerRef: HTMLDivElement | null = hiddenTagsRef.current;\n        let currTagsRef: HTMLDivElement | null = hiddenTagsRef.current;\n        let currActionsRef: HTMLDivElement | null = actionsRef.current;\n        if (!currContainerRef || !currTagsRef || collection.size === 0 || currContainerRef.parentElement == null) {\n          return {\n            visibleTagCount: 0,\n            showCollapseButton: false\n          };\n        }\n\n        // Count rows and show tags until we hit the maxRows.\n        // I think this is still a safe assumption, and we don't need to queryAll for role=tag\n        let tags = [...currTagsRef.children];\n        let currY = -Infinity;\n        let rowCount = 0;\n        let index = 0;\n        let tagWidths: number[] = [];\n        for (let tag of tags) {\n          let {width, y} = tag.getBoundingClientRect();\n\n          if (y !== currY) {\n            currY = y;\n            rowCount++;\n          }\n\n          if (rowCount > maxRows) {\n            break;\n          }\n          tagWidths.push(width);\n          index++;\n        }\n\n        // Remove tags until there is space for the collapse button and action button (if present) on the last row.\n        let buttons = currActionsRef ? [...currActionsRef.children] : [];\n        if (buttons.length > 0 && rowCount >= maxRows) {\n          let buttonsWidth = buttons.reduce((acc, curr) => acc += curr.getBoundingClientRect().width, 0);\n          let margins = parseFloat(getComputedStyle(buttons[0]).marginInlineStart);\n          buttonsWidth += margins * 2;\n          let end = direction === 'ltr' ? 'right' : 'left';\n          let containerEnd = currContainerRef.parentElement?.getBoundingClientRect()[end] - margins;\n          let lastTagEnd = tags[index - 1]?.getBoundingClientRect()[end];\n          lastTagEnd += margins;\n          let availableWidth = containerEnd - lastTagEnd;\n\n          while (availableWidth <= buttonsWidth && index > 0) {\n            let tagWidth = tagWidths.pop();\n            if (tagWidth != null) {\n              availableWidth += tagWidth;\n            }\n            index--;\n          }\n        }\n\n        return {\n          visibleTagCount: Math.max(index, 1),\n          showCollapseButton: index < collection.size\n        };\n      };\n      let result = computeVisibleTagCount();\n      flushSync(() => {\n        setTagState(result);\n      });\n    }\n  });\n\n  useResizeObserver({ref: maxRows != null ? containerRef : undefined, onResize: updateVisibleTagCount});\n\n  useLayoutEffect(() => {\n    if (collection.size > 0 && (maxRows != null && maxRows > 0)) {\n      queueMicrotask(updateVisibleTagCount);\n    }\n  }, [collection.size, updateVisibleTagCount, maxRows]);\n\n  useEffect(() => {\n    // Recalculate visible tags when fonts are loaded.\n    document.fonts?.ready.then(() => updateVisibleTagCount());\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  let handlePressCollapse = () => {\n    setIsCollapsed(prevCollapsed => !prevCollapsed);\n  };\n\n  let helpText: ReactNode = null;\n  if (!isInvalid && description) {\n    helpText =  (\n      <Text\n        slot=\"description\"\n        styles={helpTextStyles({size})}>\n        {description}\n      </Text>\n    );\n  } else if (isInvalid) {\n    helpText = (\n      <div\n        className={helpTextStyles({size, isInvalid})}>\n        <CenterBaseline>\n          <AlertIcon />\n        </CenterBaseline>\n        <Text slot=\"errorMessage\">\n          {errorMessage}\n        </Text>\n      </div>\n    );\n  }\n\n  return (\n    <AriaTagGroup\n      {...otherProps}\n      ref={domRef}\n      style={UNSAFE_style}\n      className={UNSAFE_className + style(field(), getAllowedOverrides())({\n        size,\n        labelPosition: labelPosition,\n        isInForm: !!formContext\n      }, props.styles)}>\n      <FieldLabel\n        size={size}\n        labelPosition={labelPosition}\n        labelAlign={labelAlign}\n        contextualHelp={props.contextualHelp}>\n        {label}\n      </FieldLabel>\n      <div\n        ref={containerRef}\n        className={style({\n          gridArea: 'input',\n          minWidth: 'full',\n          marginStart: {\n            default: -4,\n            isEmpty: 0\n          },\n          marginEnd: {\n            default: 4,\n            isEmpty: 0\n          },\n          position: 'relative'\n        })({isEmpty})}>\n        <FormContext.Provider value={{...formContext, size}}>\n          <Provider\n            values={[\n              [RACTextContext, undefined],\n              [TagGroupContext, {size, isEmphasized}]\n            ]}>\n            {/* invisible collection for measuring */}\n            {maxRows != null && (\n              <div\n                // @ts-ignore\n                inert=\"true\"\n                ref={hiddenTagsRef}\n                className={style({\n                  display: 'inline',\n                  flexWrap: 'wrap',\n                  fontFamily: 'sans',\n                  position: 'absolute',\n                  top: 0,\n                  bottom: 0,\n                  start: -4,\n                  end: 4,\n                  visibility: 'hidden',\n                  overflow: 'hidden',\n                  opacity: 0\n                })}>\n                {allItems.map(item => {\n                  // pull off individual props as an allow list, don't want refs or other props getting through\n                  return (\n                    <div\n                      style={item.props.UNSAFE_style}\n                      key={item.key}\n                      className={item.props.className({size, allowsRemoving: Boolean(onRemove)})}>\n                      {item.props.children({size, allowsRemoving: Boolean(onRemove), isInCtx: true})}\n                    </div>\n                  );\n                })}\n              </div>\n            )}\n            {/* real tag list */}\n            <TagList\n              ref={tagsRef}\n              items={items}\n              renderEmptyState={renderEmptyState}\n              className={style({\n                display: 'inline',\n                minWidth: 'full',\n                font: 'ui'\n              })}>\n              {item => <Tag {...item.props} id={item.key} textValue={item.textValue} />}\n            </TagList>\n            {!isEmpty && (showCollapseToggleButton || groupActionLabel) &&\n              <ActionGroup\n                collection={collection}\n                aria-label={props['aria-label']}\n                aria-labelledby={props['aria-labelledby']}\n                actionsRef={actionsRef}\n                tagState={tagState}\n                size={size}\n                isCollapsed={isCollapsed}\n                handlePressCollapse={handlePressCollapse}\n                onGroupAction={onGroupAction}\n                groupActionLabel={groupActionLabel} />\n            }\n          </Provider>\n        </FormContext.Provider>\n      </div>\n      {helpText}\n    </AriaTagGroup>\n  );\n}\n\nfunction ActionGroup(props) {\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  let {\n    actionsRef,\n    tagState,\n    size,\n    isCollapsed,\n    handlePressCollapse,\n    onGroupAction,\n    groupActionLabel,\n    collection,\n    // directly use aria-labelling from the TagGroup because we can't use the id from the TagList\n    // and we can't supply an id to the TagList because it'll cause an issue where all the tag ids flip back\n    // and forth with their prefix in an infinite loop\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy\n  } = props;\n\n  let actionsId = useId();\n  // might need to localize the aria-label which concatenates with this label\n  let actionGroupLabel = stringFormatter.format('tag.actions');\n  return (\n    <div\n      role=\"group\"\n      ref={actionsRef}\n      id={actionsId}\n      aria-label={ariaLabel ? `${ariaLabel} ${actionGroupLabel}` : actionGroupLabel}\n      aria-labelledby={ariaLabelledBy ? ariaLabelledBy : undefined}\n      className={style({\n        display: 'inline'\n      })}>\n      {tagState.showCollapseButton &&\n        <ActionButton\n          isQuiet\n          size={size}\n          styles={style({margin: 4})}\n          UNSAFE_style={{display: 'inline-flex'}}\n          onPress={handlePressCollapse}>\n          {isCollapsed ?\n            stringFormatter.format('tag.showAllButtonLabel', {tagCount: collection.size}) :\n            stringFormatter.format('tag.hideButtonLabel')}\n        </ActionButton>\n      }\n      {groupActionLabel && onGroupAction &&\n        <ActionButton\n          isQuiet\n          size={size}\n          styles={style({margin: 4})}\n          UNSAFE_style={{display: 'inline-flex'}}\n          onPress={() => onGroupAction?.()}>\n          {groupActionLabel}\n        </ActionButton>\n      }\n    </div>\n  );\n}\n\nconst tagStyles = style({\n  ...focusRing(),\n  display: 'inline-flex',\n  boxSizing: 'border-box',\n  maxWidth: 'full',\n  verticalAlign: 'middle',\n  alignItems: 'center',\n  justifyContent: 'center',\n  font: 'control',\n  height: 'control',\n  transition: 'default',\n  minWidth: 0,\n  // maxWidth: '[calc(self(height) * 7)]', // s2 designs show a max width on tags but we pushed back on this in v3\n  backgroundColor: {\n    default: 'gray-100',\n    isHovered: {\n      default: 'gray-200'\n    },\n    isFocusVisible: {\n      default: 'gray-200'\n    },\n    isSelected: {\n      default: 'neutral',\n      isEmphasized: {\n        default: 'accent'\n      }\n    },\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonFace',\n      isSelected: 'Highlight'\n    }\n  },\n  color: {\n    default: 'neutral',\n    isSelected: {\n      default: 'gray-25',\n      isEmphasized: 'white'\n    },\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonText',\n      isSelected: 'HighlightText',\n      isDisabled: 'GrayText'\n    }\n  },\n  borderStyle: 'none',\n  paddingStart: {\n    default: 'edge-to-text'\n  },\n  paddingEnd: {\n    default: 'edge-to-text',\n    allowsRemoving: 0\n  },\n  paddingY: 0,\n  margin: 4,\n  borderRadius: 'control',\n  cursor: {\n    default: 'default',\n    isLink: 'pointer'\n  },\n  '--iconMargin': {\n    type: 'marginTop',\n    value: {\n      default: fontRelative(-2)\n    }\n  },\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n});\n\nconst avatarSize = {\n  S: 16,\n  M: 20,\n  L: 24\n} as const;\n\n/** An individual Tag for TagGroups. */\nexport const Tag = /*#__PURE__*/ (forwardRef as forwardRefType)(function Tag({children, textValue, ...props}: TagProps, ref: DOMRef<HTMLDivElement>) {\n  textValue ||= typeof children === 'string' ? children : undefined;\n  let ctx = useSlottedContext(TagGroupContext);\n  let isInRealDOM = Boolean(ctx?.size);\n  let {size, isEmphasized} = ctx ?? {};\n  let domRef = useDOMRef(ref);\n\n  let backupRef = useRef(null);\n  domRef = domRef || backupRef;\n  let isLink = props.href != null;\n  return (\n    <AriaTag\n      textValue={textValue}\n      {...props}\n      ref={domRef}\n      style={pressScale(domRef)}\n      className={renderProps => tagStyles({size, isEmphasized, isLink, ...renderProps})} >\n      {composeRenderProps(children, (children, renderProps) => (\n        <TagWrapper isInRealDOM={isInRealDOM} {...renderProps}>{typeof children === 'string' ? <Text>{children}</Text> : children}</TagWrapper>\n      ))}\n    </AriaTag>\n  );\n});\n\nfunction TagWrapper({children, isDisabled, allowsRemoving, isInRealDOM}) {\n  let {size = 'M'} = useSlottedContext(TagGroupContext) ?? {};\n  return (\n    <>\n      {isInRealDOM && (\n      <div\n        className={style({\n          display: 'flex',\n          minWidth: 0,\n          alignItems: 'center',\n          gap: 'text-to-visual',\n          forcedColorAdjust: 'none',\n          backgroundColor: 'transparent'\n        })}>\n        <Provider\n          values={[\n            [TextContext, {styles: style({order: 1, truncate: true})}],\n            [IconContext, {\n              render: centerBaseline({slot: 'icon', styles: style({order: 0})}),\n              styles: style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0})\n            }],\n            [AvatarContext, {\n              size: avatarSize[size],\n              styles: style({order: 0})\n            }],\n            [ImageContext, {\n              styles: style({\n                size: fontRelative(20),\n                flexShrink: 0,\n                order: 0,\n                aspectRatio: 'square',\n                objectFit: 'contain',\n                borderRadius: 'sm'\n              })\n            }]\n          ]}>\n          {children}\n        </Provider>\n      </div>\n        )}\n      {!isInRealDOM && children}\n      {allowsRemoving && isInRealDOM && (\n        <ClearButton\n          slot=\"remove\"\n          size={size}\n          isDisabled={isDisabled} />\n      )}\n    </>\n  );\n}\n"],"names":[],"version":3,"file":"TagGroup.mjs.map"}
+{"mappings":"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","sources":["packages/@react-spectrum/s2/src/TagGroup.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 {ActionButton} from './ActionButton';\nimport AlertIcon from '../s2wf-icons/S2_Icon_AlertTriangle_20_N.svg';\nimport {\n  Tag as AriaTag,\n  TagGroup as AriaTagGroup,\n  TagGroupProps as AriaTagGroupProps,\n  TagProps as AriaTagProps,\n  composeRenderProps,\n  ContextValue,\n  Provider,\n  TextContext as RACTextContext,\n  TagList,\n  TagListProps,\n  useLocale,\n  useSlottedContext\n} from 'react-aria-components';\nimport {AvatarContext} from './Avatar';\nimport {CenterBaseline, centerBaseline} from './CenterBaseline';\nimport {ClearButton} from './ClearButton';\nimport {Collection, CollectionBuilder} from '@react-aria/collections';\nimport {createContext, forwardRef, ReactNode, useContext, useEffect, useMemo, useRef, useState} from 'react';\nimport {DOMRef, DOMRefValue, HelpTextProps, Node, SpectrumLabelableProps} from '@react-types/shared';\nimport {field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {FieldLabel} from './Field';\nimport {flushSync} from 'react-dom';\nimport {focusRing, fontRelative, style} from '../style' with { type: 'macro' };\nimport {FormContext, useFormProps} from './Form';\nimport {forwardRefType} from './types';\nimport {IconContext} from './Icon';\nimport {ImageContext} from './Image';\nimport {inertValue, useEffectEvent, useId, useLayoutEffect, useResizeObserver} from '@react-aria/utils';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {pressScale} from './pressScale';\nimport {Text, TextContext} from './Content';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\n// Get types from RSP and extend those?\nexport interface TagProps extends Omit<AriaTagProps, 'children' | 'style' | 'className'> {\n  /** The children of the tag. */\n  children?: ReactNode\n}\n\nexport interface TagGroupProps<T> extends Omit<AriaTagGroupProps, 'children' | 'style' | 'className'>, Pick<TagListProps<T>, 'items' | 'children' | 'renderEmptyState'>, Omit<SpectrumLabelableProps, 'isRequired' | 'necessityIndicator'>, StyleProps, Omit<HelpTextProps, 'errorMessage'> {\n  /** A description for the tag group. */\n  description?: ReactNode,\n  /**\n   * The size of the tag group.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L',\n  /** Whether the tags are displayed in an emphasized style. */\n  isEmphasized?: boolean,\n  /** Provides content to display when there are no items in the tag group. */\n  renderEmptyState?: () => ReactNode,\n  /** Whether the tags are displayed in a error state. */\n  isInvalid?: boolean,\n  /** An error message for the field. */\n  errorMessage?: ReactNode,\n  /** Limit the number of rows initially shown. This will render a button that allows the user to expand to show all tags. */\n  maxRows?: number,\n  /** The label to display on the action button.  */\n  groupActionLabel?: string,\n  /** Handler that is called when the action button is pressed. */\n  onGroupAction?: () => void\n}\n\nexport const TagGroupContext = createContext<ContextValue<TagGroupProps<any>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst helpTextStyles = style({\n  gridArea: 'helptext',\n  display: 'flex',\n  alignItems: 'baseline',\n  gap: 'text-to-visual',\n  font: 'control',\n  color: {\n    default: 'neutral-subdued',\n    isInvalid: 'negative'\n  },\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  },\n  contain: 'inline-size',\n  paddingTop: '--field-gap',\n  cursor: 'text'\n});\n\nconst InternalTagGroupContext = createContext<TagGroupProps<any>>({});\n\n/** Tags allow users to categorize content. They can represent keywords or people, and are grouped to describe an item or a search request. */\nexport const TagGroup = /*#__PURE__*/ (forwardRef as forwardRefType)(function TagGroup<T extends object>(props: TagGroupProps<T>, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, TagGroupContext);\n  props = useFormProps(props);\n  let {onRemove} = props;\n  return (\n    <InternalTagGroupContext.Provider value={{onRemove}}>\n      <CollectionBuilder content={<Collection {...props} />}>\n        {collection => <TagGroupInner props={props} forwardedRef={ref} collection={collection} />}\n      </CollectionBuilder>\n    </InternalTagGroupContext.Provider>\n  );\n});\n\nfunction TagGroupInner<T>({\n  props: {\n    label,\n    description,\n    labelPosition = 'top',\n    labelAlign = 'start',\n    isEmphasized,\n    isInvalid,\n    errorMessage,\n    UNSAFE_className = '',\n    UNSAFE_style,\n    size = 'M',\n    ...props\n  },\n  forwardedRef: ref,\n  collection\n}: {props: TagGroupProps<T>, forwardedRef: DOMRef<HTMLDivElement>, collection: any}) {\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  let {\n    maxRows,\n    groupActionLabel,\n    onGroupAction,\n    renderEmptyState = () => stringFormatter.format('tag.noTags'),\n    ...otherProps\n  } = props;\n  let {direction} = useLocale();\n  let containerRef = useRef(null);\n  let tagsRef = useRef<HTMLDivElement | null>(null);\n  let actionsRef = useRef<HTMLDivElement | null>(null);\n  let hiddenTagsRef = useRef<HTMLDivElement | null>(null);\n  let [tagState, setTagState] = useState({visibleTagCount: collection.size, showCollapseButton: false});\n  let [isCollapsed, setIsCollapsed] = useState(maxRows != null);\n  let {onRemove} = useContext(InternalTagGroupContext);\n  let isEmpty = collection.size === 0;\n  let showCollapseToggleButton = tagState.showCollapseButton || tagState.visibleTagCount < collection.size;\n  let formContext = useContext(FormContext);\n  let domRef = useDOMRef(ref);\n\n  let allItems = useMemo(\n    () => Array.from(collection) as Array<Node<T>>,\n    [collection]\n  );\n  let items = useMemo(\n    () => Array.from(collection).slice(0, !isCollapsed ? collection.size : tagState.visibleTagCount) as Array<Node<T>>,\n    [collection, tagState.visibleTagCount, isCollapsed]\n  );\n\n  let updateVisibleTagCount = useEffectEvent(() => {\n    if (maxRows == null) {\n      setTagState({visibleTagCount: collection.size, showCollapseButton: false});\n    }\n\n    if (maxRows != null && maxRows > 0) {\n      let computeVisibleTagCount = () => {\n        let currContainerRef: HTMLDivElement | null = hiddenTagsRef.current;\n        let currTagsRef: HTMLDivElement | null = hiddenTagsRef.current;\n        let currActionsRef: HTMLDivElement | null = actionsRef.current;\n        if (!currContainerRef || !currTagsRef || collection.size === 0 || currContainerRef.parentElement == null) {\n          return {\n            visibleTagCount: 0,\n            showCollapseButton: false\n          };\n        }\n\n        // Count rows and show tags until we hit the maxRows.\n        // I think this is still a safe assumption, and we don't need to queryAll for role=tag\n        let tags = [...currTagsRef.children];\n        let currY = -Infinity;\n        let rowCount = 0;\n        let index = 0;\n        let tagWidths: number[] = [];\n        for (let tag of tags) {\n          let {width, y} = tag.getBoundingClientRect();\n\n          if (y !== currY) {\n            currY = y;\n            rowCount++;\n          }\n\n          if (rowCount > maxRows) {\n            break;\n          }\n          tagWidths.push(width);\n          index++;\n        }\n\n        // Remove tags until there is space for the collapse button and action button (if present) on the last row.\n        let buttons = currActionsRef ? [...currActionsRef.children] : [];\n        if (buttons.length > 0 && rowCount >= maxRows) {\n          let buttonsWidth = buttons.reduce((acc, curr) => acc += curr.getBoundingClientRect().width, 0);\n          let margins = parseFloat(getComputedStyle(buttons[0]).marginInlineStart);\n          buttonsWidth += margins * 2;\n          let end = direction === 'ltr' ? 'right' : 'left';\n          let containerEnd = currContainerRef.parentElement?.getBoundingClientRect()[end] - margins;\n          let lastTagEnd = tags[index - 1]?.getBoundingClientRect()[end];\n          lastTagEnd += margins;\n          let availableWidth = containerEnd - lastTagEnd;\n\n          while (availableWidth <= buttonsWidth && index > 0) {\n            let tagWidth = tagWidths.pop();\n            if (tagWidth != null) {\n              availableWidth += tagWidth;\n            }\n            index--;\n          }\n        }\n\n        return {\n          visibleTagCount: Math.max(index, 1),\n          showCollapseButton: index < collection.size\n        };\n      };\n      let result = computeVisibleTagCount();\n      flushSync(() => {\n        setTagState(result);\n      });\n    }\n  });\n\n  useResizeObserver({ref: maxRows != null ? containerRef : undefined, onResize: updateVisibleTagCount});\n\n  useLayoutEffect(() => {\n    if (collection.size > 0 && (maxRows != null && maxRows > 0)) {\n      queueMicrotask(updateVisibleTagCount);\n    }\n  }, [collection.size, updateVisibleTagCount, maxRows]);\n\n  useEffect(() => {\n    // Recalculate visible tags when fonts are loaded.\n    document.fonts?.ready.then(() => updateVisibleTagCount());\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  let handlePressCollapse = () => {\n    setIsCollapsed(prevCollapsed => !prevCollapsed);\n  };\n\n  let helpText: ReactNode = null;\n  if (!isInvalid && description) {\n    helpText =  (\n      <Text\n        slot=\"description\"\n        styles={helpTextStyles({size})}>\n        {description}\n      </Text>\n    );\n  } else if (isInvalid) {\n    helpText = (\n      <div\n        className={helpTextStyles({size, isInvalid})}>\n        <CenterBaseline>\n          <AlertIcon />\n        </CenterBaseline>\n        <Text slot=\"errorMessage\">\n          {errorMessage}\n        </Text>\n      </div>\n    );\n  }\n\n  return (\n    <AriaTagGroup\n      {...otherProps}\n      ref={domRef}\n      style={UNSAFE_style}\n      className={UNSAFE_className + style(field(), getAllowedOverrides())({\n        size,\n        labelPosition: labelPosition,\n        isInForm: !!formContext\n      }, props.styles)}>\n      <FieldLabel\n        size={size}\n        labelPosition={labelPosition}\n        labelAlign={labelAlign}\n        contextualHelp={props.contextualHelp}>\n        {label}\n      </FieldLabel>\n      <div\n        ref={containerRef}\n        className={style({\n          gridArea: 'input',\n          minWidth: 'full',\n          marginStart: {\n            default: -4,\n            isEmpty: 0\n          },\n          marginEnd: {\n            default: 4,\n            isEmpty: 0\n          },\n          position: 'relative'\n        })({isEmpty})}>\n        <FormContext.Provider value={{...formContext, size}}>\n          <Provider\n            values={[\n              [RACTextContext, undefined],\n              [TagGroupContext, {size, isEmphasized}]\n            ]}>\n            {/* invisible collection for measuring */}\n            {maxRows != null && (\n              <div\n                // @ts-ignore\n                inert={inertValue(true)}\n                ref={hiddenTagsRef}\n                className={style({\n                  display: 'inline',\n                  flexWrap: 'wrap',\n                  fontFamily: 'sans',\n                  position: 'absolute',\n                  top: 0,\n                  bottom: 0,\n                  start: -4,\n                  end: 4,\n                  visibility: 'hidden',\n                  overflow: 'hidden',\n                  opacity: 0\n                })}>\n                {allItems.map(item => {\n                  // pull off individual props as an allow list, don't want refs or other props getting through\n                  return (\n                    <div\n                      style={item.props.UNSAFE_style}\n                      key={item.key}\n                      className={item.props.className({size, allowsRemoving: Boolean(onRemove)})}>\n                      {item.props.children({size, allowsRemoving: Boolean(onRemove), isInCtx: true})}\n                    </div>\n                  );\n                })}\n              </div>\n            )}\n            {/* real tag list */}\n            <TagList\n              ref={tagsRef}\n              items={items}\n              renderEmptyState={renderEmptyState}\n              className={style({\n                display: 'inline',\n                minWidth: 'full',\n                font: 'ui'\n              })}>\n              {item => <Tag {...item.props} id={item.key} textValue={item.textValue} />}\n            </TagList>\n            {!isEmpty && (showCollapseToggleButton || groupActionLabel) &&\n              <ActionGroup\n                collection={collection}\n                aria-label={props['aria-label']}\n                aria-labelledby={props['aria-labelledby']}\n                actionsRef={actionsRef}\n                tagState={tagState}\n                size={size}\n                isCollapsed={isCollapsed}\n                handlePressCollapse={handlePressCollapse}\n                onGroupAction={onGroupAction}\n                groupActionLabel={groupActionLabel} />\n            }\n          </Provider>\n        </FormContext.Provider>\n      </div>\n      {helpText}\n    </AriaTagGroup>\n  );\n}\n\nfunction ActionGroup(props) {\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  let {\n    actionsRef,\n    tagState,\n    size,\n    isCollapsed,\n    handlePressCollapse,\n    onGroupAction,\n    groupActionLabel,\n    collection,\n    // directly use aria-labelling from the TagGroup because we can't use the id from the TagList\n    // and we can't supply an id to the TagList because it'll cause an issue where all the tag ids flip back\n    // and forth with their prefix in an infinite loop\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy\n  } = props;\n\n  let actionsId = useId();\n  // might need to localize the aria-label which concatenates with this label\n  let actionGroupLabel = stringFormatter.format('tag.actions');\n  return (\n    <div\n      role=\"group\"\n      ref={actionsRef}\n      id={actionsId}\n      aria-label={ariaLabel ? `${ariaLabel} ${actionGroupLabel}` : actionGroupLabel}\n      aria-labelledby={ariaLabelledBy ? ariaLabelledBy : undefined}\n      className={style({\n        display: 'inline'\n      })}>\n      {tagState.showCollapseButton &&\n        <ActionButton\n          isQuiet\n          size={size}\n          styles={style({margin: 4})}\n          UNSAFE_style={{display: 'inline-flex'}}\n          onPress={handlePressCollapse}>\n          {isCollapsed ?\n            stringFormatter.format('tag.showAllButtonLabel', {tagCount: collection.size}) :\n            stringFormatter.format('tag.hideButtonLabel')}\n        </ActionButton>\n      }\n      {groupActionLabel && onGroupAction &&\n        <ActionButton\n          isQuiet\n          size={size}\n          styles={style({margin: 4})}\n          UNSAFE_style={{display: 'inline-flex'}}\n          onPress={() => onGroupAction?.()}>\n          {groupActionLabel}\n        </ActionButton>\n      }\n    </div>\n  );\n}\n\nconst tagStyles = style({\n  ...focusRing(),\n  display: 'inline-flex',\n  boxSizing: 'border-box',\n  maxWidth: 'full',\n  verticalAlign: 'middle',\n  alignItems: 'center',\n  justifyContent: 'center',\n  font: 'control',\n  height: 'control',\n  transition: 'default',\n  minWidth: 0,\n  // maxWidth: '[calc(self(height) * 7)]', // s2 designs show a max width on tags but we pushed back on this in v3\n  backgroundColor: {\n    default: 'gray-100',\n    isHovered: {\n      default: 'gray-200'\n    },\n    isFocusVisible: {\n      default: 'gray-200'\n    },\n    isSelected: {\n      default: 'neutral',\n      isEmphasized: {\n        default: 'accent'\n      }\n    },\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonFace',\n      isSelected: 'Highlight'\n    }\n  },\n  color: {\n    default: 'neutral',\n    isSelected: {\n      default: 'gray-25',\n      isEmphasized: 'white'\n    },\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonText',\n      isSelected: 'HighlightText',\n      isDisabled: 'GrayText'\n    }\n  },\n  borderStyle: 'none',\n  paddingStart: {\n    default: 'edge-to-text'\n  },\n  paddingEnd: {\n    default: 'edge-to-text',\n    allowsRemoving: 0\n  },\n  paddingY: 0,\n  margin: 4,\n  borderRadius: 'control',\n  cursor: {\n    default: 'default',\n    isLink: 'pointer'\n  },\n  '--iconMargin': {\n    type: 'marginTop',\n    value: {\n      default: fontRelative(-2)\n    }\n  },\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n});\n\nconst avatarSize = {\n  S: 16,\n  M: 20,\n  L: 24\n} as const;\n\n/** An individual Tag for TagGroups. */\nexport const Tag = /*#__PURE__*/ (forwardRef as forwardRefType)(function Tag({children, textValue, ...props}: TagProps, ref: DOMRef<HTMLDivElement>) {\n  textValue ||= typeof children === 'string' ? children : undefined;\n  let ctx = useSlottedContext(TagGroupContext);\n  let isInRealDOM = Boolean(ctx?.size);\n  let {size, isEmphasized} = ctx ?? {};\n  let domRef = useDOMRef(ref);\n\n  let backupRef = useRef(null);\n  domRef = domRef || backupRef;\n  let isLink = props.href != null;\n  return (\n    <AriaTag\n      textValue={textValue}\n      {...props}\n      ref={domRef}\n      style={pressScale(domRef)}\n      className={renderProps => tagStyles({size, isEmphasized, isLink, ...renderProps})} >\n      {composeRenderProps(children, (children, renderProps) => (\n        <TagWrapper isInRealDOM={isInRealDOM} {...renderProps}>{typeof children === 'string' ? <Text>{children}</Text> : children}</TagWrapper>\n      ))}\n    </AriaTag>\n  );\n});\n\nfunction TagWrapper({children, isDisabled, allowsRemoving, isInRealDOM}) {\n  let {size = 'M'} = useSlottedContext(TagGroupContext) ?? {};\n  return (\n    <>\n      {isInRealDOM && (\n      <div\n        className={style({\n          display: 'flex',\n          minWidth: 0,\n          alignItems: 'center',\n          gap: 'text-to-visual',\n          forcedColorAdjust: 'none',\n          backgroundColor: 'transparent'\n        })}>\n        <Provider\n          values={[\n            [TextContext, {styles: style({order: 1, truncate: true})}],\n            [IconContext, {\n              render: centerBaseline({slot: 'icon', styles: style({order: 0})}),\n              styles: style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0})\n            }],\n            [AvatarContext, {\n              size: avatarSize[size],\n              styles: style({order: 0})\n            }],\n            [ImageContext, {\n              styles: style({\n                size: fontRelative(20),\n                flexShrink: 0,\n                order: 0,\n                aspectRatio: 'square',\n                objectFit: 'contain',\n                borderRadius: 'sm'\n              })\n            }]\n          ]}>\n          {children}\n        </Provider>\n      </div>\n        )}\n      {!isInRealDOM && children}\n      {allowsRemoving && isInRealDOM && (\n        <ClearButton\n          slot=\"remove\"\n          size={size}\n          isDisabled={isDisabled} />\n      )}\n    </>\n  );\n}\n"],"names":[],"version":3,"file":"TagGroup.mjs.map"}

package/dist/TextField.css

@@ -207,8 +207,6 @@
   }
 }
 
-@layer UNSAFE_overrides;
-
 @layer _.b.b {
   @media not ((hover: hover) and (pointer: fine)) {
     ._ebf {
@@ -232,8 +230,4 @@
     }
   }
 }
-
-.\.:not(#a#b) {
-  all: revert-layer;
-}
 /*# sourceMappingURL=TextField.css.map */

package/dist/TextField.css.map

@@ -1 +1 @@
-{"mappings":"AC4EqB;EAAA;;;;EA6Ce;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAqEnB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAlHI;EA6Ce;;;;;AA7Cf;;AA6Ce;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAqEnB","sources":["b5f6eedb906c59d7","packages/@react-spectrum/s2/src/TextField.tsx"],"sourcesContent":["@import \"ab36e6acf2667a8b\";\n@import \"67d58da798418a3e\";\n@import \"83cde29013713f83\";\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 {\n  TextArea as AriaTextArea,\n  TextAreaContext as AriaTextAreaContext,\n  TextField as AriaTextField,\n  TextFieldProps as AriaTextFieldProps,\n  composeRenderProps,\n  ContextValue,\n  InputContext,\n  useSlottedContext\n} from 'react-aria-components';\nimport {centerPadding, field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode, Ref, useContext, useImperativeHandle, useRef} from 'react';\nimport {createFocusableRef} from '@react-spectrum/utils';\nimport {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';\nimport {FormContext, useFormProps} from './Form';\nimport {HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {mergeRefs} from '@react-aria/utils';\nimport {style} from '../style' with {type: 'macro'};\nimport {StyleString} from '../style/types';\nimport {TextFieldRef} from '@react-types/textfield';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface TextFieldProps extends Omit<AriaTextFieldProps, 'children' | 'className' | 'style'>, StyleProps, SpectrumLabelableProps, HelpTextProps {\n  /**\n   * The size of the text field.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL'\n}\n\nexport const TextFieldContext = createContext<ContextValue<TextFieldProps, TextFieldRef>>(null);\n\n/**\n * TextFields are text inputs that allow users to input custom text entries\n * with a keyboard. Various decorations can be displayed around the field to\n * communicate the entry requirements.\n */\nexport const TextField = forwardRef(function TextField(props: TextFieldProps, ref: Ref<TextFieldRef>) {\n  [props, ref] = useSpectrumContextProps(props, ref, TextFieldContext);\n  return (\n    <TextFieldBase\n      {...props}\n      ref={ref}>\n      <Input />\n    </TextFieldBase>\n  );\n});\n\nexport interface TextAreaProps extends Omit<TextFieldProps, 'type' | 'pattern'> {}\n\nexport const TextAreaContext = createContext<ContextValue<TextAreaProps, TextFieldRef<HTMLTextAreaElement>>>(null);\n\n/**\n * TextAreas are multiline text inputs, useful for cases where users have\n * a sizable amount of text to enter. They allow for all customizations that\n * are available to text fields.\n */\nexport const TextArea = forwardRef(function TextArea(props: TextAreaProps, ref: Ref<TextFieldRef<HTMLTextAreaElement>>) {\n  [props, ref] = useSpectrumContextProps(props, ref, TextAreaContext);\n  return (\n    <TextFieldBase\n      {...props}\n      ref={ref}\n      fieldGroupCss={style({\n        alignItems: 'baseline',\n        height: 'auto'\n      })}>\n      <TextAreaInput />\n    </TextFieldBase>\n  );\n});\n\nexport const TextFieldBase = forwardRef(function TextFieldBase(props: TextFieldProps & {children: ReactNode, fieldGroupCss?: StyleString}, ref: Ref<TextFieldRef<HTMLInputElement | HTMLTextAreaElement>>) {\n  let inputRef = useRef<HTMLInputElement>(null);\n  let domRef = useRef<HTMLDivElement>(null);\n  let formContext = useContext(FormContext);\n  props = useFormProps(props);\n  let {\n    label,\n    description,\n    errorMessage,\n    necessityIndicator,\n    labelPosition = 'top',\n    labelAlign = 'start',\n    fieldGroupCss,\n    UNSAFE_style,\n    UNSAFE_className = '',\n    ...textFieldProps\n  } = props;\n\n  // Expose imperative interface for ref\n  useImperativeHandle(ref, () => ({\n    ...createFocusableRef(domRef, inputRef),\n    select() {\n      if (inputRef.current) {\n        inputRef.current.select();\n      }\n    },\n    getInputElement() {\n      return inputRef.current;\n    }\n  }));\n\n  return (\n    <AriaTextField\n      {...textFieldProps}\n      ref={domRef}\n      style={UNSAFE_style}\n      className={UNSAFE_className + style(field(), getAllowedOverrides())({\n        size: props.size,\n        labelPosition,\n        isInForm: !!formContext\n      }, props.styles)}>\n      {composeRenderProps(props.children, (children, {isDisabled, isInvalid}) => (<>\n        <FieldLabel\n          isDisabled={isDisabled}\n          isRequired={props.isRequired}\n          size={props.size}\n          labelPosition={labelPosition}\n          labelAlign={labelAlign}\n          necessityIndicator={necessityIndicator}\n          contextualHelp={props.contextualHelp}>\n          {label}\n        </FieldLabel>\n        {/* TODO: set GroupContext in RAC TextField */}\n        <FieldGroup role=\"presentation\" isDisabled={isDisabled} isInvalid={isInvalid} size={props.size} styles={fieldGroupCss}>\n          <InputContext.Consumer>\n            {ctx => (\n              <InputContext.Provider value={{...ctx, ref: mergeRefs((ctx as any)?.ref, inputRef)}}>\n                {children}\n              </InputContext.Provider>\n            )}\n          </InputContext.Consumer>\n          {isInvalid && <FieldErrorIcon isDisabled={isDisabled} />}\n        </FieldGroup>\n        <HelpText\n          size={props.size}\n          isDisabled={isDisabled}\n          isInvalid={isInvalid}\n          description={description}>\n          {errorMessage}\n        </HelpText>\n      </>))}\n    </AriaTextField>\n  );\n});\n\nfunction TextAreaInput() {\n  // Force re-render when value changes so we update the height.\n  useSlottedContext(AriaTextAreaContext) ?? {};\n  let onHeightChange = (input: HTMLTextAreaElement) => {\n    // TODO: only do this if an explicit height is not given?\n    if (input) {\n      let prevAlignment = input.style.alignSelf;\n      let prevOverflow = input.style.overflow;\n      // Firefox scroll position is lost when overflow: 'hidden' is applied so we skip applying it.\n      // The measure/applied height is also incorrect/reset if we turn on and off\n      // overflow: hidden in Firefox https://bugzilla.mozilla.org/show_bug.cgi?id=1787062\n      let isFirefox = 'MozAppearance' in input.style;\n      if (!isFirefox) {\n        input.style.overflow = 'hidden';\n      }\n      input.style.alignSelf = 'start';\n      input.style.height = 'auto';\n      // offsetHeight - clientHeight accounts for the border/padding.\n      input.style.height = `${input.scrollHeight + (input.offsetHeight - input.clientHeight)}px`;\n      input.style.overflow = prevOverflow;\n      input.style.alignSelf = prevAlignment;\n    }\n  };\n\n  return (\n    <AriaTextArea\n      ref={onHeightChange}\n      // Workaround for baseline alignment bug in Safari.\n      // https://bugs.webkit.org/show_bug.cgi?id=142968\n      placeholder=\" \"\n      className={style({\n        paddingX: 0,\n        paddingY: centerPadding(),\n        minHeight: 'control',\n        boxSizing: 'border-box',\n        backgroundColor: 'transparent',\n        color: '[inherit]',\n        fontFamily: '[inherit]',\n        fontSize: '[inherit]',\n        fontWeight: '[inherit]',\n        lineHeight: '[inherit]',\n        flexGrow: 1,\n        minWidth: 0,\n        outlineStyle: 'none',\n        borderStyle: 'none',\n        resize: 'none',\n        overflowX: 'hidden'\n      })} />\n  );\n}\n"],"names":[],"version":3,"file":"TextField.css.map"}
+{"mappings":"AC4EqB;EAAA;;;;EA6Ce;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAqEnB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAlHI;EA6Ce;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA","sources":["b5f6eedb906c59d7","packages/@react-spectrum/s2/src/TextField.tsx"],"sourcesContent":["@import \"ab36e6acf2667a8b\";\n@import \"67d58da798418a3e\";\n@import \"83cde29013713f83\";\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 {\n  TextArea as AriaTextArea,\n  TextAreaContext as AriaTextAreaContext,\n  TextField as AriaTextField,\n  TextFieldProps as AriaTextFieldProps,\n  composeRenderProps,\n  ContextValue,\n  InputContext,\n  useSlottedContext\n} from 'react-aria-components';\nimport {centerPadding, field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode, Ref, useContext, useImperativeHandle, useRef} from 'react';\nimport {createFocusableRef} from '@react-spectrum/utils';\nimport {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';\nimport {FormContext, useFormProps} from './Form';\nimport {HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {mergeRefs} from '@react-aria/utils';\nimport {style} from '../style' with {type: 'macro'};\nimport {StyleString} from '../style/types';\nimport {TextFieldRef} from '@react-types/textfield';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface TextFieldProps extends Omit<AriaTextFieldProps, 'children' | 'className' | 'style'>, StyleProps, SpectrumLabelableProps, HelpTextProps {\n  /**\n   * The size of the text field.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL'\n}\n\nexport const TextFieldContext = createContext<ContextValue<TextFieldProps, TextFieldRef>>(null);\n\n/**\n * TextFields are text inputs that allow users to input custom text entries\n * with a keyboard. Various decorations can be displayed around the field to\n * communicate the entry requirements.\n */\nexport const TextField = forwardRef(function TextField(props: TextFieldProps, ref: Ref<TextFieldRef>) {\n  [props, ref] = useSpectrumContextProps(props, ref, TextFieldContext);\n  return (\n    <TextFieldBase\n      {...props}\n      ref={ref}>\n      <Input />\n    </TextFieldBase>\n  );\n});\n\nexport interface TextAreaProps extends Omit<TextFieldProps, 'type' | 'pattern'> {}\n\nexport const TextAreaContext = createContext<ContextValue<TextAreaProps, TextFieldRef<HTMLTextAreaElement>>>(null);\n\n/**\n * TextAreas are multiline text inputs, useful for cases where users have\n * a sizable amount of text to enter. They allow for all customizations that\n * are available to text fields.\n */\nexport const TextArea = forwardRef(function TextArea(props: TextAreaProps, ref: Ref<TextFieldRef<HTMLTextAreaElement>>) {\n  [props, ref] = useSpectrumContextProps(props, ref, TextAreaContext);\n  return (\n    <TextFieldBase\n      {...props}\n      ref={ref}\n      fieldGroupCss={style({\n        alignItems: 'baseline',\n        height: 'auto'\n      })}>\n      <TextAreaInput />\n    </TextFieldBase>\n  );\n});\n\nexport const TextFieldBase = forwardRef(function TextFieldBase(props: TextFieldProps & {children: ReactNode, fieldGroupCss?: StyleString}, ref: Ref<TextFieldRef<HTMLInputElement | HTMLTextAreaElement>>) {\n  let inputRef = useRef<HTMLInputElement>(null);\n  let domRef = useRef<HTMLDivElement>(null);\n  let formContext = useContext(FormContext);\n  props = useFormProps(props);\n  let {\n    label,\n    description,\n    errorMessage,\n    necessityIndicator,\n    labelPosition = 'top',\n    labelAlign = 'start',\n    fieldGroupCss,\n    UNSAFE_style,\n    UNSAFE_className = '',\n    ...textFieldProps\n  } = props;\n\n  // Expose imperative interface for ref\n  useImperativeHandle(ref, () => ({\n    ...createFocusableRef(domRef, inputRef),\n    select() {\n      if (inputRef.current) {\n        inputRef.current.select();\n      }\n    },\n    getInputElement() {\n      return inputRef.current;\n    }\n  }));\n\n  return (\n    <AriaTextField\n      {...textFieldProps}\n      ref={domRef}\n      style={UNSAFE_style}\n      className={UNSAFE_className + style(field(), getAllowedOverrides())({\n        size: props.size,\n        labelPosition,\n        isInForm: !!formContext\n      }, props.styles)}>\n      {composeRenderProps(props.children, (children, {isDisabled, isInvalid}) => (<>\n        <FieldLabel\n          isDisabled={isDisabled}\n          isRequired={props.isRequired}\n          size={props.size}\n          labelPosition={labelPosition}\n          labelAlign={labelAlign}\n          necessityIndicator={necessityIndicator}\n          contextualHelp={props.contextualHelp}>\n          {label}\n        </FieldLabel>\n        {/* TODO: set GroupContext in RAC TextField */}\n        <FieldGroup role=\"presentation\" isDisabled={isDisabled} isInvalid={isInvalid} size={props.size} styles={fieldGroupCss}>\n          <InputContext.Consumer>\n            {ctx => (\n              <InputContext.Provider value={{...ctx, ref: mergeRefs((ctx as any)?.ref, inputRef)}}>\n                {children}\n              </InputContext.Provider>\n            )}\n          </InputContext.Consumer>\n          {isInvalid && <FieldErrorIcon isDisabled={isDisabled} />}\n        </FieldGroup>\n        <HelpText\n          size={props.size}\n          isDisabled={isDisabled}\n          isInvalid={isInvalid}\n          description={description}>\n          {errorMessage}\n        </HelpText>\n      </>))}\n    </AriaTextField>\n  );\n});\n\nfunction TextAreaInput() {\n  // Force re-render when value changes so we update the height.\n  useSlottedContext(AriaTextAreaContext) ?? {};\n  let onHeightChange = (input: HTMLTextAreaElement) => {\n    // TODO: only do this if an explicit height is not given?\n    if (input) {\n      let prevAlignment = input.style.alignSelf;\n      let prevOverflow = input.style.overflow;\n      // Firefox scroll position is lost when overflow: 'hidden' is applied so we skip applying it.\n      // The measure/applied height is also incorrect/reset if we turn on and off\n      // overflow: hidden in Firefox https://bugzilla.mozilla.org/show_bug.cgi?id=1787062\n      let isFirefox = 'MozAppearance' in input.style;\n      if (!isFirefox) {\n        input.style.overflow = 'hidden';\n      }\n      input.style.alignSelf = 'start';\n      input.style.height = 'auto';\n      // offsetHeight - clientHeight accounts for the border/padding.\n      input.style.height = `${input.scrollHeight + (input.offsetHeight - input.clientHeight)}px`;\n      input.style.overflow = prevOverflow;\n      input.style.alignSelf = prevAlignment;\n    }\n  };\n\n  return (\n    <AriaTextArea\n      ref={onHeightChange}\n      // Workaround for baseline alignment bug in Safari.\n      // https://bugs.webkit.org/show_bug.cgi?id=142968\n      placeholder=\" \"\n      className={style({\n        paddingX: 0,\n        paddingY: centerPadding(),\n        minHeight: 'control',\n        boxSizing: 'border-box',\n        backgroundColor: 'transparent',\n        color: '[inherit]',\n        fontFamily: '[inherit]',\n        fontSize: '[inherit]',\n        fontWeight: '[inherit]',\n        lineHeight: '[inherit]',\n        flexGrow: 1,\n        minWidth: 0,\n        outlineStyle: 'none',\n        borderStyle: 'none',\n        resize: 'none',\n        overflowX: 'hidden'\n      })} />\n  );\n}\n"],"names":[],"version":3,"file":"TextField.css.map"}