npm - @react-spectrum/s2 - Versions diffs - 3.0.0-nightly-f9ea4ca39-250515 → 3.0.0-nightly-b7f8ed1a9-250516 - Mend

@react-spectrum/s2 3.0.0-nightly-f9ea4ca39-250515 → 3.0.0-nightly-b7f8ed1a9-250516

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (29) hide show

package/dist/TagGroup.cjs.map CHANGED Viewed

	@@ -1 +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 TagRenderProps,\n useLocale,\n useSlottedContext\n} from 'react-aria-components';\nimport {AvatarContext} from './Avatar';\nimport {baseColor, focusRing, fontRelative, style} from '../style' with { type: 'macro' };\nimport {CenterBaseline, centerBaseline} from './CenterBaseline';\nimport {ClearButton} from './ClearButton';\nimport {Collection, CollectionBuilder} from '@react-aria/collections';\nimport {control, field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode, useContext, useEffect, useMemo, useRef, useState} from 'react';\nimport {DOMRef, DOMRefValue, HelpTextProps, Node, SpectrumLabelableProps} from '@react-types/shared';\nimport {FieldLabel, helpTextStyles} from './Field';\nimport {flushSync} from 'react-dom';\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<Partial<TagGroupProps<any>>, DOMRefValue<HTMLDivElement>>>(null);\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<TagRenderProps & {size?: 'S' \| 'M' \| 'L', isEmphasized?: boolean, isLink?: boolean, allowsRemoving?: boolean}>({\n ...focusRing(),\n ...control({shape: 'default', icon: true}),\n display: 'inline-flex',\n maxWidth: 'full',\n verticalAlign: 'middle',\n justifyContent: 'center',\n transition: 'default',\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: baseColor('neutral'),\n isEmphasized: {\n default: baseColor('accent')\n }\n },\n isDisabled: 'disabled',\n forcedColors: {\n default: 'ButtonFace',\n isSelected: 'Highlight'\n }\n },\n color: {\n default: baseColor('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 paddingEnd: {\n default: 'edge-to-text',\n allowsRemoving: 0\n },\n margin: 4,\n cursor: {\n default: 'default',\n isLink: 'pointer'\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} isEmphasized={isEmphasized} {...renderProps}>{typeof children === 'string' ? <Text>{children}</Text> : children}</TagWrapper>\n ))}\n </AriaTag>\n );\n});\n\nfunction TagWrapper({children, isDisabled, allowsRemoving, isInRealDOM, isEmphasized, isSelected}) {\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 isStaticColor={isEmphasized && isSelected}\n isDisabled={isDisabled} />\n )}\n </>\n );\n}\n"],"names":[],"version":3,"file":"TagGroup.cjs.map"}
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 TagRenderProps,\n useLocale,\n useSlottedContext\n} from 'react-aria-components';\nimport {AvatarContext} from './Avatar';\nimport {baseColor, focusRing, fontRelative, lightDark, style} from '../style' with { type: 'macro' };\nimport {CenterBaseline, centerBaseline} from './CenterBaseline';\nimport {ClearButton} from './ClearButton';\nimport {Collection, CollectionBuilder} from '@react-aria/collections';\nimport {control, field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode, useContext, useEffect, useMemo, useRef, useState} from 'react';\nimport {DOMRef, DOMRefValue, HelpTextProps, Node, SpectrumLabelableProps} from '@react-types/shared';\nimport {FieldLabel, helpTextStyles} from './Field';\nimport {flushSync} from 'react-dom';\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<Partial<TagGroupProps<any>>, DOMRefValue<HTMLDivElement>>>(null);\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<TagRenderProps & {size?: 'S' \| 'M' \| 'L', isEmphasized?: boolean, isLink?: boolean, allowsRemoving?: boolean}>({\n ...focusRing(),\n ...control({shape: 'default', icon: true}),\n display: 'inline-flex',\n maxWidth: 'full',\n verticalAlign: 'middle',\n justifyContent: 'center',\n transition: 'default',\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: baseColor('neutral'),\n isEmphasized: {\n default: lightDark('accent-900', 'accent-700'),\n isHovered: lightDark('accent-1000', 'accent-600'),\n isPressed: lightDark('accent-1000', 'accent-600'),\n isFocused: lightDark('accent-1000', 'accent-600')\n }\n },\n isDisabled: 'disabled',\n forcedColors: {\n default: 'ButtonFace',\n isSelected: 'Highlight'\n }\n },\n color: {\n default: baseColor('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 paddingEnd: {\n default: 'edge-to-text',\n allowsRemoving: 0\n },\n margin: 4,\n cursor: {\n default: 'default',\n isLink: 'pointer'\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} isEmphasized={isEmphasized} {...renderProps}>{typeof children === 'string' ? <Text>{children}</Text> : children}</TagWrapper>\n ))}\n </AriaTag>\n );\n});\n\nfunction TagWrapper({children, isDisabled, allowsRemoving, isInRealDOM, isEmphasized, isSelected}) {\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 isStaticColor={isEmphasized && isSelected}\n isDisabled={isDisabled} />\n )}\n </>\n );\n}\n"],"names":[],"version":3,"file":"TagGroup.cjs.map"}

package/dist/TagGroup.css CHANGED Viewed

@@ -346,12 +346,12 @@
     background-color: var(--lightningcss-light, #131313) var(--lightningcss-dark, #f2f2f2);
   }
-  .g28 {
-    background-color: var(--lightningcss-light, #3b63fb) var(--lightningcss-dark, #4069fd);
+  .g5qAiPc8 {
+    background-color: var(--lightningcss-light, #3b63fb) var(--lightningcss-dark, #345bf8);
   }
-  .gZ8 {
-    background-color: var(--lightningcss-light, #274dea) var(--lightningcss-dark, #5681ff);
+  .gUgARdd8 {
+    background-color: var(--lightningcss-light, #274dea) var(--lightningcss-dark, #2549e5);
   }
   .gH8 {

package/dist/TagGroup.css.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"mappings":"AC0QoC;EAAA;;;;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;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA+FC;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAUgB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAGb;;;;EAOA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AA9Qc;EA2JlB;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AA3JkB;EAAA;IAsEX;;;;IAqFP;;;;IAAA;;;;IAAA;;;;IAAA;;;;IA+FC;;;;IAAA;;;;;;AAnNQ;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAoHT;EAAA;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","/\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 TagRenderProps,\n useLocale,\n useSlottedContext\n} from 'react-aria-components';\nimport {AvatarContext} from './Avatar';\nimport {baseColor, focusRing, fontRelative, style} from '../style' with { type: 'macro' };\nimport {CenterBaseline, centerBaseline} from './CenterBaseline';\nimport {ClearButton} from './ClearButton';\nimport {Collection, CollectionBuilder} from '@react-aria/collections';\nimport {control, field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode, useContext, useEffect, useMemo, useRef, useState} from 'react';\nimport {DOMRef, DOMRefValue, HelpTextProps, Node, SpectrumLabelableProps} from '@react-types/shared';\nimport {FieldLabel, helpTextStyles} from './Field';\nimport {flushSync} from 'react-dom';\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<Partial<TagGroupProps<any>>, DOMRefValue<HTMLDivElement>>>(null);\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<TagRenderProps & {size?: 'S' \| 'M' \| 'L', isEmphasized?: boolean, isLink?: boolean, allowsRemoving?: boolean}>({\n ...focusRing(),\n ...control({shape: 'default', icon: true}),\n display: 'inline-flex',\n maxWidth: 'full',\n verticalAlign: 'middle',\n justifyContent: 'center',\n transition: 'default',\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: baseColor('neutral'),\n isEmphasized: {\n default: baseColor('accent')\n }\n },\n isDisabled: 'disabled',\n forcedColors: {\n default: 'ButtonFace',\n isSelected: 'Highlight'\n }\n },\n color: {\n default: baseColor('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 paddingEnd: {\n default: 'edge-to-text',\n allowsRemoving: 0\n },\n margin: 4,\n cursor: {\n default: 'default',\n isLink: 'pointer'\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} isEmphasized={isEmphasized} {...renderProps}>{typeof children === 'string' ? <Text>{children}</Text> : children}</TagWrapper>\n ))}\n </AriaTag>\n );\n});\n\nfunction TagWrapper({children, isDisabled, allowsRemoving, isInRealDOM, isEmphasized, isSelected}) {\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 isStaticColor={isEmphasized && isSelected}\n isDisabled={isDisabled} />\n )}\n </>\n );\n}\n"],"names":[],"version":3,"file":"TagGroup.css.map"}
1	+ {"mappings":"AC0QoC;EAAA;;;;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;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAkGC;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAUgB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAGb;;;;EAOA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAjRc;EA2JlB;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AA3JkB;EAAA;IAsEX;;;;IAqFP;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAkGC;;;;IAAA;;;;;;AAtNQ;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAoHT;EAAA;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","/\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 TagRenderProps,\n useLocale,\n useSlottedContext\n} from 'react-aria-components';\nimport {AvatarContext} from './Avatar';\nimport {baseColor, focusRing, fontRelative, lightDark, style} from '../style' with { type: 'macro' };\nimport {CenterBaseline, centerBaseline} from './CenterBaseline';\nimport {ClearButton} from './ClearButton';\nimport {Collection, CollectionBuilder} from '@react-aria/collections';\nimport {control, field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode, useContext, useEffect, useMemo, useRef, useState} from 'react';\nimport {DOMRef, DOMRefValue, HelpTextProps, Node, SpectrumLabelableProps} from '@react-types/shared';\nimport {FieldLabel, helpTextStyles} from './Field';\nimport {flushSync} from 'react-dom';\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<Partial<TagGroupProps<any>>, DOMRefValue<HTMLDivElement>>>(null);\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<TagRenderProps & {size?: 'S' \| 'M' \| 'L', isEmphasized?: boolean, isLink?: boolean, allowsRemoving?: boolean}>({\n ...focusRing(),\n ...control({shape: 'default', icon: true}),\n display: 'inline-flex',\n maxWidth: 'full',\n verticalAlign: 'middle',\n justifyContent: 'center',\n transition: 'default',\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: baseColor('neutral'),\n isEmphasized: {\n default: lightDark('accent-900', 'accent-700'),\n isHovered: lightDark('accent-1000', 'accent-600'),\n isPressed: lightDark('accent-1000', 'accent-600'),\n isFocused: lightDark('accent-1000', 'accent-600')\n }\n },\n isDisabled: 'disabled',\n forcedColors: {\n default: 'ButtonFace',\n isSelected: 'Highlight'\n }\n },\n color: {\n default: baseColor('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 paddingEnd: {\n default: 'edge-to-text',\n allowsRemoving: 0\n },\n margin: 4,\n cursor: {\n default: 'default',\n isLink: 'pointer'\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} isEmphasized={isEmphasized} {...renderProps}>{typeof children === 'string' ? <Text>{children}</Text> : children}</TagWrapper>\n ))}\n </AriaTag>\n );\n});\n\nfunction TagWrapper({children, isDisabled, allowsRemoving, isInRealDOM, isEmphasized, isSelected}) {\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 isStaticColor={isEmphasized && isSelected}\n isDisabled={isDisabled} />\n )}\n </>\n );\n}\n"],"names":[],"version":3,"file":"TagGroup.css.map"}

package/dist/TagGroup.mjs CHANGED Viewed

@@ -569,10 +569,10 @@ const $1d63bfab43d9ffe1$var$tagStyles = function anonymous(props) {
     if (props.isDisabled) rules += ' gH8';
     else if (props.isSelected) {
         if (props.isEmphasized) {
-            if (props.isPressed) rules += ' gZ8';
-            else if (props.isFocusVisible) rules += ' gZ8';
-            else if (props.isHovered) rules += ' gZ8';
-            else rules += ' g28';
+            if (props.isFocused) rules += ' gUgARdd8';
+            else if (props.isPressed) rules += ' gUgARdd8';
+            else if (props.isHovered) rules += ' gUgARdd8';
+            else rules += ' g5qAiPc8';
         } else {
             if (props.isPressed) rules += ' gu8';
             else if (props.isFocusVisible) rules += ' gu8';

package/dist/TagGroup.mjs.map CHANGED Viewed

	@@ -1 +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 TagRenderProps,\n useLocale,\n useSlottedContext\n} from 'react-aria-components';\nimport {AvatarContext} from './Avatar';\nimport {baseColor, focusRing, fontRelative, style} from '../style' with { type: 'macro' };\nimport {CenterBaseline, centerBaseline} from './CenterBaseline';\nimport {ClearButton} from './ClearButton';\nimport {Collection, CollectionBuilder} from '@react-aria/collections';\nimport {control, field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode, useContext, useEffect, useMemo, useRef, useState} from 'react';\nimport {DOMRef, DOMRefValue, HelpTextProps, Node, SpectrumLabelableProps} from '@react-types/shared';\nimport {FieldLabel, helpTextStyles} from './Field';\nimport {flushSync} from 'react-dom';\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<Partial<TagGroupProps<any>>, DOMRefValue<HTMLDivElement>>>(null);\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<TagRenderProps & {size?: 'S' \| 'M' \| 'L', isEmphasized?: boolean, isLink?: boolean, allowsRemoving?: boolean}>({\n ...focusRing(),\n ...control({shape: 'default', icon: true}),\n display: 'inline-flex',\n maxWidth: 'full',\n verticalAlign: 'middle',\n justifyContent: 'center',\n transition: 'default',\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: baseColor('neutral'),\n isEmphasized: {\n default: baseColor('accent')\n }\n },\n isDisabled: 'disabled',\n forcedColors: {\n default: 'ButtonFace',\n isSelected: 'Highlight'\n }\n },\n color: {\n default: baseColor('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 paddingEnd: {\n default: 'edge-to-text',\n allowsRemoving: 0\n },\n margin: 4,\n cursor: {\n default: 'default',\n isLink: 'pointer'\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} isEmphasized={isEmphasized} {...renderProps}>{typeof children === 'string' ? <Text>{children}</Text> : children}</TagWrapper>\n ))}\n </AriaTag>\n );\n});\n\nfunction TagWrapper({children, isDisabled, allowsRemoving, isInRealDOM, isEmphasized, isSelected}) {\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 isStaticColor={isEmphasized && isSelected}\n isDisabled={isDisabled} />\n )}\n </>\n );\n}\n"],"names":[],"version":3,"file":"TagGroup.mjs.map"}
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 TagRenderProps,\n useLocale,\n useSlottedContext\n} from 'react-aria-components';\nimport {AvatarContext} from './Avatar';\nimport {baseColor, focusRing, fontRelative, lightDark, style} from '../style' with { type: 'macro' };\nimport {CenterBaseline, centerBaseline} from './CenterBaseline';\nimport {ClearButton} from './ClearButton';\nimport {Collection, CollectionBuilder} from '@react-aria/collections';\nimport {control, field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode, useContext, useEffect, useMemo, useRef, useState} from 'react';\nimport {DOMRef, DOMRefValue, HelpTextProps, Node, SpectrumLabelableProps} from '@react-types/shared';\nimport {FieldLabel, helpTextStyles} from './Field';\nimport {flushSync} from 'react-dom';\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<Partial<TagGroupProps<any>>, DOMRefValue<HTMLDivElement>>>(null);\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<TagRenderProps & {size?: 'S' \| 'M' \| 'L', isEmphasized?: boolean, isLink?: boolean, allowsRemoving?: boolean}>({\n ...focusRing(),\n ...control({shape: 'default', icon: true}),\n display: 'inline-flex',\n maxWidth: 'full',\n verticalAlign: 'middle',\n justifyContent: 'center',\n transition: 'default',\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: baseColor('neutral'),\n isEmphasized: {\n default: lightDark('accent-900', 'accent-700'),\n isHovered: lightDark('accent-1000', 'accent-600'),\n isPressed: lightDark('accent-1000', 'accent-600'),\n isFocused: lightDark('accent-1000', 'accent-600')\n }\n },\n isDisabled: 'disabled',\n forcedColors: {\n default: 'ButtonFace',\n isSelected: 'Highlight'\n }\n },\n color: {\n default: baseColor('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 paddingEnd: {\n default: 'edge-to-text',\n allowsRemoving: 0\n },\n margin: 4,\n cursor: {\n default: 'default',\n isLink: 'pointer'\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} isEmphasized={isEmphasized} {...renderProps}>{typeof children === 'string' ? <Text>{children}</Text> : children}</TagWrapper>\n ))}\n </AriaTag>\n );\n});\n\nfunction TagWrapper({children, isDisabled, allowsRemoving, isInRealDOM, isEmphasized, isSelected}) {\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 isStaticColor={isEmphasized && isSelected}\n isDisabled={isDisabled} />\n )}\n </>\n );\n}\n"],"names":[],"version":3,"file":"TagGroup.mjs.map"}