react-aria-components 1.12.2 → 1.13.0
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.
- package/dist/Autocomplete.main.js +3 -3
- package/dist/Autocomplete.main.js.map +1 -1
- package/dist/Autocomplete.mjs +3 -3
- package/dist/Autocomplete.module.js +3 -3
- package/dist/Autocomplete.module.js.map +1 -1
- package/dist/Button.main.js +5 -11
- package/dist/Button.main.js.map +1 -1
- package/dist/Button.mjs +5 -11
- package/dist/Button.module.js +5 -11
- package/dist/Button.module.js.map +1 -1
- package/dist/DateField.main.js +12 -8
- package/dist/DateField.main.js.map +1 -1
- package/dist/DateField.mjs +12 -8
- package/dist/DateField.module.js +12 -8
- package/dist/DateField.module.js.map +1 -1
- package/dist/DatePicker.main.js +6 -2
- package/dist/DatePicker.main.js.map +1 -1
- package/dist/DatePicker.mjs +6 -2
- package/dist/DatePicker.module.js +6 -2
- package/dist/DatePicker.module.js.map +1 -1
- package/dist/GridList.main.js +24 -21
- package/dist/GridList.main.js.map +1 -1
- package/dist/GridList.mjs +25 -23
- package/dist/GridList.module.js +25 -23
- package/dist/GridList.module.js.map +1 -1
- package/dist/Group.main.js +3 -2
- package/dist/Group.main.js.map +1 -1
- package/dist/Group.mjs +3 -2
- package/dist/Group.module.js +3 -2
- package/dist/Group.module.js.map +1 -1
- package/dist/Input.main.js.map +1 -1
- package/dist/Input.module.js.map +1 -1
- package/dist/ListBox.main.js +14 -4
- package/dist/ListBox.main.js.map +1 -1
- package/dist/ListBox.mjs +14 -4
- package/dist/ListBox.module.js +14 -4
- package/dist/ListBox.module.js.map +1 -1
- package/dist/Menu.main.js +16 -6
- package/dist/Menu.main.js.map +1 -1
- package/dist/Menu.mjs +16 -6
- package/dist/Menu.module.js +16 -6
- package/dist/Menu.module.js.map +1 -1
- package/dist/Modal.main.js +9 -1
- package/dist/Modal.main.js.map +1 -1
- package/dist/Modal.mjs +10 -2
- package/dist/Modal.module.js +10 -2
- package/dist/Modal.module.js.map +1 -1
- package/dist/NumberField.main.js +2 -1
- package/dist/NumberField.main.js.map +1 -1
- package/dist/NumberField.mjs +2 -1
- package/dist/NumberField.module.js +2 -1
- package/dist/NumberField.module.js.map +1 -1
- package/dist/ProgressBar.main.js.map +1 -1
- package/dist/ProgressBar.module.js.map +1 -1
- package/dist/RSPContexts.main.js +4 -0
- package/dist/RSPContexts.main.js.map +1 -1
- package/dist/RSPContexts.mjs +3 -1
- package/dist/RSPContexts.module.js +3 -1
- package/dist/RSPContexts.module.js.map +1 -1
- package/dist/RadioGroup.main.js +10 -2
- package/dist/RadioGroup.main.js.map +1 -1
- package/dist/RadioGroup.mjs +10 -2
- package/dist/RadioGroup.module.js +10 -2
- package/dist/RadioGroup.module.js.map +1 -1
- package/dist/SearchField.main.js +2 -2
- package/dist/SearchField.main.js.map +1 -1
- package/dist/SearchField.mjs +2 -2
- package/dist/SearchField.module.js +2 -2
- package/dist/SearchField.module.js.map +1 -1
- package/dist/Select.main.js +62 -22
- package/dist/Select.main.js.map +1 -1
- package/dist/Select.mjs +65 -25
- package/dist/Select.module.js +65 -25
- package/dist/Select.module.js.map +1 -1
- package/dist/SelectionIndicator.main.js +45 -0
- package/dist/SelectionIndicator.main.js.map +1 -0
- package/dist/SelectionIndicator.mjs +35 -0
- package/dist/SelectionIndicator.module.js +35 -0
- package/dist/SelectionIndicator.module.js.map +1 -0
- package/dist/SharedElementTransition.main.js +139 -0
- package/dist/SharedElementTransition.main.js.map +1 -0
- package/dist/SharedElementTransition.mjs +129 -0
- package/dist/SharedElementTransition.module.js +129 -0
- package/dist/SharedElementTransition.module.js.map +1 -0
- package/dist/Table.main.js +16 -11
- package/dist/Table.main.js.map +1 -1
- package/dist/Table.mjs +17 -12
- package/dist/Table.module.js +17 -12
- package/dist/Table.module.js.map +1 -1
- package/dist/Tabs.main.js +11 -3
- package/dist/Tabs.main.js.map +1 -1
- package/dist/Tabs.mjs +11 -3
- package/dist/Tabs.module.js +11 -3
- package/dist/Tabs.module.js.map +1 -1
- package/dist/TagGroup.main.js +28 -16
- package/dist/TagGroup.main.js.map +1 -1
- package/dist/TagGroup.mjs +28 -16
- package/dist/TagGroup.module.js +28 -16
- package/dist/TagGroup.module.js.map +1 -1
- package/dist/TextField.main.js +2 -2
- package/dist/TextField.main.js.map +1 -1
- package/dist/TextField.mjs +2 -2
- package/dist/TextField.module.js +2 -2
- package/dist/TextField.module.js.map +1 -1
- package/dist/ToggleButton.main.js +7 -1
- package/dist/ToggleButton.main.js.map +1 -1
- package/dist/ToggleButton.mjs +7 -1
- package/dist/ToggleButton.module.js +7 -1
- package/dist/ToggleButton.module.js.map +1 -1
- package/dist/ToggleButtonGroup.main.js +3 -1
- package/dist/ToggleButtonGroup.main.js.map +1 -1
- package/dist/ToggleButtonGroup.mjs +3 -1
- package/dist/ToggleButtonGroup.module.js +3 -1
- package/dist/ToggleButtonGroup.module.js.map +1 -1
- package/dist/Tree.main.js +16 -4
- package/dist/Tree.main.js.map +1 -1
- package/dist/Tree.mjs +16 -4
- package/dist/Tree.module.js +16 -4
- package/dist/Tree.module.js.map +1 -1
- package/dist/import.mjs +10 -4
- package/dist/main.js +18 -3
- package/dist/main.js.map +1 -1
- package/dist/module.js +10 -4
- package/dist/module.js.map +1 -1
- package/dist/types.d.ts +99 -24
- package/dist/types.d.ts.map +1 -1
- package/dist/utils.main.js.map +1 -1
- package/dist/utils.module.js.map +1 -1
- package/package.json +23 -23
- package/src/Autocomplete.tsx +1 -1
- package/src/Button.tsx +9 -11
- package/src/DateField.tsx +21 -12
- package/src/DatePicker.tsx +11 -2
- package/src/GridList.tsx +32 -33
- package/src/Group.tsx +5 -2
- package/src/Input.tsx +7 -1
- package/src/ListBox.tsx +12 -7
- package/src/Menu.tsx +11 -6
- package/src/Modal.tsx +11 -2
- package/src/NumberField.tsx +1 -1
- package/src/ProgressBar.tsx +1 -1
- package/src/RSPContexts.ts +19 -0
- package/src/RadioGroup.tsx +8 -2
- package/src/SearchField.tsx +1 -1
- package/src/Select.tsx +75 -34
- package/src/SelectionIndicator.tsx +40 -0
- package/src/SharedElementTransition.tsx +185 -0
- package/src/Table.tsx +17 -16
- package/src/Tabs.tsx +8 -2
- package/src/TagGroup.tsx +31 -24
- package/src/TextField.tsx +1 -1
- package/src/ToggleButton.tsx +6 -1
- package/src/ToggleButtonGroup.tsx +4 -1
- package/src/Tree.tsx +16 -9
- package/src/index.ts +10 -3
- package/src/utils.tsx +1 -1
- package/dist/context.main.js +0 -25
- package/dist/context.main.js.map +0 -1
- package/dist/context.mjs +0 -19
- package/dist/context.module.js +0 -19
- package/dist/context.module.js.map +0 -1
- package/src/context.tsx +0 -34
package/dist/Tabs.module.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/react-aria-components/src/Tabs.tsx"],"sourcesContent":["/*\n * Copyright 2022 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaLabelingProps, forwardRefType, GlobalDOMAttributes, HoverEvents, Key, LinkDOMProps, PressEvents, RefObject} from '@react-types/shared';\nimport {AriaTabListProps, AriaTabPanelProps, mergeProps, Orientation, useFocusRing, useHover, useTab, useTabList, useTabPanel} from 'react-aria';\nimport {Collection, CollectionBuilder, CollectionNode, createHideableComponent, createLeafComponent} from '@react-aria/collections';\nimport {CollectionProps, CollectionRendererContext, DefaultCollectionRenderer, usePersistedKeys} from './Collection';\nimport {ContextValue, Provider, RenderProps, SlotProps, StyleRenderProps, useContextProps, useRenderProps, useSlottedContext} from './utils';\nimport {filterDOMProps, inertValue, useObjectRef} from '@react-aria/utils';\nimport {Collection as ICollection, Node, TabListState, useTabListState} from 'react-stately';\nimport React, {createContext, ForwardedRef, forwardRef, JSX, useContext, useMemo} from 'react';\n\nexport interface TabsProps extends Omit<AriaTabListProps<any>, 'items' | 'children'>, RenderProps<TabsRenderProps>, SlotProps, GlobalDOMAttributes<HTMLDivElement> {}\n\nexport interface TabsRenderProps {\n /**\n * The orientation of the tabs.\n * @selector [data-orientation=\"horizontal | vertical\"]\n */\n orientation: Orientation\n}\n\nexport interface TabListProps<T> extends StyleRenderProps<TabListRenderProps>, AriaLabelingProps, Omit<CollectionProps<T>, 'disabledKeys'>, GlobalDOMAttributes<HTMLDivElement> {}\n\nexport interface TabListRenderProps {\n /**\n * The orientation of the tab list.\n * @selector [data-orientation=\"horizontal | vertical\"]\n */\n orientation: Orientation,\n /**\n * State of the tab list.\n */\n state: TabListState<unknown>\n}\n\nexport interface TabProps extends RenderProps<TabRenderProps>, AriaLabelingProps, LinkDOMProps, HoverEvents, PressEvents, Omit<GlobalDOMAttributes<HTMLDivElement>, 'onClick'> {\n /** The unique id of the tab. */\n id?: Key,\n /** Whether the tab is disabled. */\n isDisabled?: boolean\n}\n\nexport interface TabRenderProps {\n /**\n * Whether the tab is currently hovered with a mouse.\n * @selector [data-hovered]\n */\n isHovered: boolean,\n /**\n * Whether the tab is currently in a pressed state.\n * @selector [data-pressed]\n */\n isPressed: boolean,\n /**\n * Whether the tab is currently selected.\n * @selector [data-selected]\n */\n isSelected: boolean,\n /**\n * Whether the tab is currently focused.\n * @selector [data-focused]\n */\n isFocused: boolean,\n /**\n * Whether the tab is currently keyboard focused.\n * @selector [data-focus-visible]\n */\n isFocusVisible: boolean,\n /**\n * Whether the tab is disabled.\n * @selector [data-disabled]\n */\n isDisabled: boolean\n}\n\nexport interface TabPanelProps extends AriaTabPanelProps, RenderProps<TabPanelRenderProps>, GlobalDOMAttributes<HTMLDivElement> {\n /**\n * Whether to mount the tab panel in the DOM even when it is not currently selected.\n * Inactive tab panels are inert and cannot be interacted with. They must be styled appropriately so this is clear to the user visually.\n * @default false\n */\n shouldForceMount?: boolean\n}\n\nexport interface TabPanelRenderProps {\n /**\n * Whether the tab panel is currently focused.\n * @selector [data-focused]\n */\n isFocused: boolean,\n /**\n * Whether the tab panel is currently keyboard focused.\n * @selector [data-focus-visible]\n */\n isFocusVisible: boolean,\n /**\n * Whether the tab panel is currently non-interactive. This occurs when the\n * `shouldForceMount` prop is true, and the corresponding tab is not selected.\n * @selector [data-inert]\n */\n isInert: boolean,\n /**\n * State of the tab list.\n */\n state: TabListState<unknown>\n}\n\nexport const TabsContext = createContext<ContextValue<TabsProps, HTMLDivElement>>(null);\nexport const TabListStateContext = createContext<TabListState<object> | null>(null);\n\n/**\n * Tabs organize content into multiple sections and allow users to navigate between them.\n */\nexport const Tabs = /*#__PURE__*/ (forwardRef as forwardRefType)(function Tabs(props: TabsProps, ref: ForwardedRef<HTMLDivElement>) {\n [props, ref] = useContextProps(props, ref, TabsContext);\n let {children, orientation = 'horizontal'} = props;\n children = useMemo(() => (\n typeof children === 'function'\n ? children({orientation, defaultChildren: null})\n : children\n ), [children, orientation]);\n\n return (\n <CollectionBuilder content={children}>\n {collection => <TabsInner props={props} collection={collection} tabsRef={ref} />}\n </CollectionBuilder>\n );\n});\n\ninterface TabsInnerProps {\n props: TabsProps,\n collection: ICollection<Node<any>>,\n tabsRef: RefObject<HTMLDivElement | null>\n}\n\nfunction TabsInner({props, tabsRef: ref, collection}: TabsInnerProps) {\n let {orientation = 'horizontal'} = props;\n let state = useTabListState({\n ...props,\n collection,\n children: undefined\n });\n let {focusProps, isFocused, isFocusVisible} = useFocusRing({within: true});\n let values = useMemo(() => ({\n orientation,\n isFocusWithin: isFocused,\n isFocusVisible\n }), [orientation, isFocused, isFocusVisible]);\n let renderProps = useRenderProps({\n ...props,\n defaultClassName: 'react-aria-Tabs',\n values\n });\n\n let DOMProps = filterDOMProps(props, {global: true});\n\n return (\n <div\n {...mergeProps(DOMProps, renderProps, focusProps)}\n ref={ref}\n slot={props.slot || undefined}\n data-focused={isFocused || undefined}\n data-orientation={orientation}\n data-focus-visible={isFocusVisible || undefined}\n data-disabled={state.isDisabled || undefined}>\n <Provider\n values={[\n [TabsContext, props],\n [TabListStateContext, state]\n ]}>\n {renderProps.children}\n </Provider>\n </div>\n );\n}\n\n/**\n * A TabList is used within Tabs to group tabs that a user can switch between.\n * The ids of the items within the <TabList> must match up with a corresponding item inside the <TabPanels>.\n */\nexport const TabList = /*#__PURE__*/ (forwardRef as forwardRefType)(function TabList<T extends object>(props: TabListProps<T>, ref: ForwardedRef<HTMLDivElement>): JSX.Element {\n let state = useContext(TabListStateContext);\n return state\n ? <TabListInner props={props} forwardedRef={ref} />\n : <Collection {...props} />;\n});\n\ninterface TabListInnerProps<T> {\n props: TabListProps<T>,\n forwardedRef: ForwardedRef<HTMLDivElement>\n}\n\nfunction TabListInner<T extends object>({props, forwardedRef: ref}: TabListInnerProps<T>) {\n let state = useContext(TabListStateContext)!;\n let {CollectionRoot} = useContext(CollectionRendererContext);\n let {orientation = 'horizontal', keyboardActivation = 'automatic'} = useSlottedContext(TabsContext)!;\n let objectRef = useObjectRef(ref);\n\n let {tabListProps} = useTabList({\n ...props,\n orientation,\n keyboardActivation\n }, state, objectRef);\n\n let renderProps = useRenderProps({\n ...props,\n children: null,\n defaultClassName: 'react-aria-TabList',\n values: {\n orientation,\n state\n }\n });\n\n let DOMProps = filterDOMProps(props, {global: true});\n delete DOMProps.id;\n\n return (\n <div\n {...mergeProps(DOMProps, renderProps, tabListProps)}\n ref={objectRef}\n data-orientation={orientation || undefined}>\n <CollectionRoot collection={state.collection} persistedKeys={usePersistedKeys(state.selectionManager.focusedKey)} />\n </div>\n );\n}\n\nclass TabItemNode extends CollectionNode<unknown> {\n static readonly type = 'item';\n}\n\n/**\n * A Tab provides a title for an individual item within a TabList.\n */\nexport const Tab = /*#__PURE__*/ createLeafComponent(TabItemNode, (props: TabProps, forwardedRef: ForwardedRef<HTMLDivElement>, item: Node<unknown>) => {\n let state = useContext(TabListStateContext)!;\n let ref = useObjectRef<any>(forwardedRef);\n let {tabProps, isSelected, isDisabled, isPressed} = useTab({key: item.key, ...props}, state, ref);\n let {focusProps, isFocused, isFocusVisible} = useFocusRing();\n let {hoverProps, isHovered} = useHover({\n isDisabled,\n onHoverStart: props.onHoverStart,\n onHoverEnd: props.onHoverEnd,\n onHoverChange: props.onHoverChange\n });\n\n let renderProps = useRenderProps({\n ...props,\n id: undefined,\n children: item.rendered,\n defaultClassName: 'react-aria-Tab',\n values: {\n isSelected,\n isDisabled,\n isFocused,\n isFocusVisible,\n isPressed,\n isHovered\n }\n });\n\n let ElementType: React.ElementType = item.props.href ? 'a' : 'div';\n let DOMProps = filterDOMProps(props as any, {global: true});\n delete DOMProps.id;\n delete DOMProps.onClick;\n\n return (\n <ElementType\n {...mergeProps(DOMProps, renderProps, tabProps, focusProps, hoverProps)}\n ref={ref}\n data-selected={isSelected || undefined}\n data-disabled={isDisabled || undefined}\n data-focused={isFocused || undefined}\n data-focus-visible={isFocusVisible || undefined}\n data-pressed={isPressed || undefined}\n data-hovered={isHovered || undefined}>\n {renderProps.children}\n </ElementType>\n );\n});\n\n/**\n * A TabPanel provides the content for a tab.\n */\nexport const TabPanel = /*#__PURE__*/ createHideableComponent(function TabPanel(props: TabPanelProps, forwardedRef: ForwardedRef<HTMLDivElement>) {\n const state = useContext(TabListStateContext)!;\n let ref = useObjectRef<HTMLDivElement>(forwardedRef);\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n let {id, ...otherProps} = props;\n let {tabPanelProps} = useTabPanel(props, state, ref);\n let {focusProps, isFocused, isFocusVisible} = useFocusRing();\n\n let isSelected = state.selectedKey === props.id;\n let renderProps = useRenderProps({\n ...props,\n defaultClassName: 'react-aria-TabPanel',\n values: {\n isFocused,\n isFocusVisible,\n // @ts-ignore - compatibility with React < 19\n isInert: inertValue(!isSelected),\n state\n }\n });\n\n if (!isSelected && !props.shouldForceMount) {\n return null;\n }\n\n let DOMProps = filterDOMProps(otherProps, {global: true});\n delete DOMProps.id;\n\n let domProps = isSelected\n ? mergeProps(DOMProps, tabPanelProps, focusProps, renderProps)\n : renderProps;\n\n return (\n <div\n {...domProps}\n ref={ref}\n data-focused={isFocused || undefined}\n data-focus-visible={isFocusVisible || undefined}\n // @ts-ignore\n inert={inertValue(!isSelected || props.inert)}\n data-inert={!isSelected ? 'true' : undefined}>\n <Provider\n values={[\n [TabsContext, null],\n [TabListStateContext, null]\n ]}>\n <CollectionRendererContext.Provider value={DefaultCollectionRenderer}>\n {renderProps.children}\n </CollectionRendererContext.Provider>\n </Provider>\n </div>\n );\n});\n"],"names":[],"version":3,"file":"Tabs.module.js.map"}
|
|
1
|
+
{"mappings":"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","sources":["packages/react-aria-components/src/Tabs.tsx"],"sourcesContent":["/*\n * Copyright 2022 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaLabelingProps, forwardRefType, GlobalDOMAttributes, HoverEvents, Key, LinkDOMProps, PressEvents, RefObject} from '@react-types/shared';\nimport {AriaTabListProps, AriaTabPanelProps, mergeProps, Orientation, useFocusRing, useHover, useTab, useTabList, useTabPanel} from 'react-aria';\nimport {Collection, CollectionBuilder, CollectionNode, createHideableComponent, createLeafComponent} from '@react-aria/collections';\nimport {CollectionProps, CollectionRendererContext, DefaultCollectionRenderer, usePersistedKeys} from './Collection';\nimport {ContextValue, Provider, RenderProps, SlotProps, StyleRenderProps, useContextProps, useRenderProps, useSlottedContext} from './utils';\nimport {filterDOMProps, inertValue, useObjectRef} from '@react-aria/utils';\nimport {Collection as ICollection, Node, TabListState, useTabListState} from 'react-stately';\nimport React, {createContext, ForwardedRef, forwardRef, JSX, useContext, useMemo} from 'react';\nimport {SelectionIndicatorContext} from './SelectionIndicator';\nimport {SharedElementTransition} from './SharedElementTransition';\n\nexport interface TabsProps extends Omit<AriaTabListProps<any>, 'items' | 'children'>, RenderProps<TabsRenderProps>, SlotProps, GlobalDOMAttributes<HTMLDivElement> {}\n\nexport interface TabsRenderProps {\n /**\n * The orientation of the tabs.\n * @selector [data-orientation=\"horizontal | vertical\"]\n */\n orientation: Orientation\n}\n\nexport interface TabListProps<T> extends StyleRenderProps<TabListRenderProps>, AriaLabelingProps, Omit<CollectionProps<T>, 'disabledKeys'>, GlobalDOMAttributes<HTMLDivElement> {}\n\nexport interface TabListRenderProps {\n /**\n * The orientation of the tab list.\n * @selector [data-orientation=\"horizontal | vertical\"]\n */\n orientation: Orientation,\n /**\n * State of the tab list.\n */\n state: TabListState<unknown>\n}\n\nexport interface TabProps extends RenderProps<TabRenderProps>, AriaLabelingProps, LinkDOMProps, HoverEvents, PressEvents, Omit<GlobalDOMAttributes<HTMLDivElement>, 'onClick'> {\n /** The unique id of the tab. */\n id?: Key,\n /** Whether the tab is disabled. */\n isDisabled?: boolean\n}\n\nexport interface TabRenderProps {\n /**\n * Whether the tab is currently hovered with a mouse.\n * @selector [data-hovered]\n */\n isHovered: boolean,\n /**\n * Whether the tab is currently in a pressed state.\n * @selector [data-pressed]\n */\n isPressed: boolean,\n /**\n * Whether the tab is currently selected.\n * @selector [data-selected]\n */\n isSelected: boolean,\n /**\n * Whether the tab is currently focused.\n * @selector [data-focused]\n */\n isFocused: boolean,\n /**\n * Whether the tab is currently keyboard focused.\n * @selector [data-focus-visible]\n */\n isFocusVisible: boolean,\n /**\n * Whether the tab is disabled.\n * @selector [data-disabled]\n */\n isDisabled: boolean\n}\n\nexport interface TabPanelProps extends AriaTabPanelProps, RenderProps<TabPanelRenderProps>, GlobalDOMAttributes<HTMLDivElement> {\n /**\n * Whether to mount the tab panel in the DOM even when it is not currently selected.\n * Inactive tab panels are inert and cannot be interacted with. They must be styled appropriately so this is clear to the user visually.\n * @default false\n */\n shouldForceMount?: boolean\n}\n\nexport interface TabPanelRenderProps {\n /**\n * Whether the tab panel is currently focused.\n * @selector [data-focused]\n */\n isFocused: boolean,\n /**\n * Whether the tab panel is currently keyboard focused.\n * @selector [data-focus-visible]\n */\n isFocusVisible: boolean,\n /**\n * Whether the tab panel is currently non-interactive. This occurs when the\n * `shouldForceMount` prop is true, and the corresponding tab is not selected.\n * @selector [data-inert]\n */\n isInert: boolean,\n /**\n * State of the tab list.\n */\n state: TabListState<unknown>\n}\n\nexport const TabsContext = createContext<ContextValue<TabsProps, HTMLDivElement>>(null);\nexport const TabListStateContext = createContext<TabListState<object> | null>(null);\n\n/**\n * Tabs organize content into multiple sections and allow users to navigate between them.\n */\nexport const Tabs = /*#__PURE__*/ (forwardRef as forwardRefType)(function Tabs(props: TabsProps, ref: ForwardedRef<HTMLDivElement>) {\n [props, ref] = useContextProps(props, ref, TabsContext);\n let {children, orientation = 'horizontal'} = props;\n children = useMemo(() => (\n typeof children === 'function'\n ? children({orientation, defaultChildren: null})\n : children\n ), [children, orientation]);\n\n return (\n <CollectionBuilder content={children}>\n {collection => <TabsInner props={props} collection={collection} tabsRef={ref} />}\n </CollectionBuilder>\n );\n});\n\ninterface TabsInnerProps {\n props: TabsProps,\n collection: ICollection<Node<any>>,\n tabsRef: RefObject<HTMLDivElement | null>\n}\n\nfunction TabsInner({props, tabsRef: ref, collection}: TabsInnerProps) {\n let {orientation = 'horizontal'} = props;\n let state = useTabListState({\n ...props,\n collection,\n children: undefined\n });\n let {focusProps, isFocused, isFocusVisible} = useFocusRing({within: true});\n let values = useMemo(() => ({\n orientation,\n isFocusWithin: isFocused,\n isFocusVisible\n }), [orientation, isFocused, isFocusVisible]);\n let renderProps = useRenderProps({\n ...props,\n defaultClassName: 'react-aria-Tabs',\n values\n });\n\n let DOMProps = filterDOMProps(props, {global: true});\n\n return (\n <div\n {...mergeProps(DOMProps, renderProps, focusProps)}\n ref={ref}\n slot={props.slot || undefined}\n data-focused={isFocused || undefined}\n data-orientation={orientation}\n data-focus-visible={isFocusVisible || undefined}\n data-disabled={state.isDisabled || undefined}>\n <Provider\n values={[\n [TabsContext, props],\n [TabListStateContext, state]\n ]}>\n {renderProps.children}\n </Provider>\n </div>\n );\n}\n\n/**\n * A TabList is used within Tabs to group tabs that a user can switch between.\n * The ids of the items within the <TabList> must match up with a corresponding item inside the <TabPanels>.\n */\nexport const TabList = /*#__PURE__*/ (forwardRef as forwardRefType)(function TabList<T extends object>(props: TabListProps<T>, ref: ForwardedRef<HTMLDivElement>): JSX.Element {\n let state = useContext(TabListStateContext);\n return state\n ? <TabListInner props={props} forwardedRef={ref} />\n : <Collection {...props} />;\n});\n\ninterface TabListInnerProps<T> {\n props: TabListProps<T>,\n forwardedRef: ForwardedRef<HTMLDivElement>\n}\n\nfunction TabListInner<T extends object>({props, forwardedRef: ref}: TabListInnerProps<T>) {\n let state = useContext(TabListStateContext)!;\n let {CollectionRoot} = useContext(CollectionRendererContext);\n let {orientation = 'horizontal', keyboardActivation = 'automatic'} = useSlottedContext(TabsContext)!;\n let objectRef = useObjectRef(ref);\n\n let {tabListProps} = useTabList({\n ...props,\n orientation,\n keyboardActivation\n }, state, objectRef);\n\n let renderProps = useRenderProps({\n ...props,\n children: null,\n defaultClassName: 'react-aria-TabList',\n values: {\n orientation,\n state\n }\n });\n\n let DOMProps = filterDOMProps(props, {global: true});\n delete DOMProps.id;\n\n return (\n <div\n {...mergeProps(DOMProps, renderProps, tabListProps)}\n ref={objectRef}\n data-orientation={orientation || undefined}>\n <SharedElementTransition>\n <CollectionRoot collection={state.collection} persistedKeys={usePersistedKeys(state.selectionManager.focusedKey)} />\n </SharedElementTransition>\n </div>\n );\n}\n\nclass TabItemNode extends CollectionNode<unknown> {\n static readonly type = 'item';\n}\n\n/**\n * A Tab provides a title for an individual item within a TabList.\n */\nexport const Tab = /*#__PURE__*/ createLeafComponent(TabItemNode, (props: TabProps, forwardedRef: ForwardedRef<HTMLDivElement>, item: Node<unknown>) => {\n let state = useContext(TabListStateContext)!;\n let ref = useObjectRef<any>(forwardedRef);\n let {tabProps, isSelected, isDisabled, isPressed} = useTab({key: item.key, ...props}, state, ref);\n let {focusProps, isFocused, isFocusVisible} = useFocusRing();\n let {hoverProps, isHovered} = useHover({\n isDisabled,\n onHoverStart: props.onHoverStart,\n onHoverEnd: props.onHoverEnd,\n onHoverChange: props.onHoverChange\n });\n\n let renderProps = useRenderProps({\n ...props,\n id: undefined,\n children: item.rendered,\n defaultClassName: 'react-aria-Tab',\n values: {\n isSelected,\n isDisabled,\n isFocused,\n isFocusVisible,\n isPressed,\n isHovered\n }\n });\n\n let ElementType: React.ElementType = item.props.href ? 'a' : 'div';\n let DOMProps = filterDOMProps(props as any, {global: true});\n delete DOMProps.id;\n delete DOMProps.onClick;\n\n return (\n <ElementType\n {...mergeProps(DOMProps, renderProps, tabProps, focusProps, hoverProps)}\n ref={ref}\n data-selected={isSelected || undefined}\n data-disabled={isDisabled || undefined}\n data-focused={isFocused || undefined}\n data-focus-visible={isFocusVisible || undefined}\n data-pressed={isPressed || undefined}\n data-hovered={isHovered || undefined}>\n <SelectionIndicatorContext.Provider value={{isSelected}}>\n {renderProps.children}\n </SelectionIndicatorContext.Provider>\n </ElementType>\n );\n});\n\n/**\n * A TabPanel provides the content for a tab.\n */\nexport const TabPanel = /*#__PURE__*/ createHideableComponent(function TabPanel(props: TabPanelProps, forwardedRef: ForwardedRef<HTMLDivElement>) {\n const state = useContext(TabListStateContext)!;\n let ref = useObjectRef<HTMLDivElement>(forwardedRef);\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n let {id, ...otherProps} = props;\n let {tabPanelProps} = useTabPanel(props, state, ref);\n let {focusProps, isFocused, isFocusVisible} = useFocusRing();\n\n let isSelected = state.selectedKey === props.id;\n let renderProps = useRenderProps({\n ...props,\n defaultClassName: 'react-aria-TabPanel',\n values: {\n isFocused,\n isFocusVisible,\n // @ts-ignore - compatibility with React < 19\n isInert: inertValue(!isSelected),\n state\n }\n });\n\n if (!isSelected && !props.shouldForceMount) {\n return null;\n }\n\n let DOMProps = filterDOMProps(otherProps, {global: true});\n delete DOMProps.id;\n\n let domProps = isSelected\n ? mergeProps(DOMProps, tabPanelProps, focusProps, renderProps)\n : renderProps;\n\n return (\n <div\n {...domProps}\n ref={ref}\n data-focused={isFocused || undefined}\n data-focus-visible={isFocusVisible || undefined}\n // @ts-ignore\n inert={inertValue(!isSelected || props.inert)}\n data-inert={!isSelected ? 'true' : undefined}>\n <Provider\n values={[\n [TabsContext, null],\n [TabListStateContext, null]\n ]}>\n <CollectionRendererContext.Provider value={DefaultCollectionRenderer}>\n {renderProps.children}\n </CollectionRendererContext.Provider>\n </Provider>\n </div>\n );\n});\n"],"names":[],"version":3,"file":"Tabs.module.js.map"}
|
package/dist/TagGroup.main.js
CHANGED
|
@@ -3,7 +3,9 @@ var $3114c2382242bdc0$exports = require("./Collection.main.js");
|
|
|
3
3
|
var $c5ccf687772c0422$exports = require("./utils.main.js");
|
|
4
4
|
var $84ae0bf5bd8e2a5f$exports = require("./Label.main.js");
|
|
5
5
|
var $a03b42240404b420$exports = require("./ListBox.main.js");
|
|
6
|
-
var $
|
|
6
|
+
var $525402dfec7da5bc$exports = require("./RSPContexts.main.js");
|
|
7
|
+
var $54e872c96e6d295b$exports = require("./SelectionIndicator.main.js");
|
|
8
|
+
var $2d10bc562fea46b3$exports = require("./SharedElementTransition.main.js");
|
|
7
9
|
var $a8a589c28affdc40$exports = require("./Text.main.js");
|
|
8
10
|
var $4TsYs$reactaria = require("react-aria");
|
|
9
11
|
var $4TsYs$reactariacollections = require("@react-aria/collections");
|
|
@@ -47,49 +49,53 @@ $parcel$export(module.exports, "Tag", () => $ecf55d0c218a575e$export$3288d34c523
|
|
|
47
49
|
|
|
48
50
|
|
|
49
51
|
|
|
52
|
+
|
|
53
|
+
|
|
50
54
|
const $ecf55d0c218a575e$export$5b07b5dd2cbd96e3 = /*#__PURE__*/ (0, $4TsYs$react.createContext)(null);
|
|
51
55
|
const $ecf55d0c218a575e$export$e755ce3685dd0ca9 = /*#__PURE__*/ (0, $4TsYs$react.createContext)(null);
|
|
52
56
|
const $ecf55d0c218a575e$export$67ea30858aaf75e3 = /*#__PURE__*/ (0, $4TsYs$react.forwardRef)(function TagGroup(props, ref) {
|
|
53
57
|
[props, ref] = (0, $c5ccf687772c0422$exports.useContextProps)(props, ref, $ecf55d0c218a575e$export$5b07b5dd2cbd96e3);
|
|
54
|
-
return /*#__PURE__*/ (0, ($parcel$interopDefault($4TsYs$react))).createElement((0, $
|
|
58
|
+
return /*#__PURE__*/ (0, ($parcel$interopDefault($4TsYs$react))).createElement((0, $a03b42240404b420$exports.ListStateContext).Provider, {
|
|
59
|
+
value: null
|
|
60
|
+
}, /*#__PURE__*/ (0, ($parcel$interopDefault($4TsYs$react))).createElement((0, $4TsYs$reactariacollections.CollectionBuilder), {
|
|
55
61
|
content: props.children
|
|
56
62
|
}, (collection)=>/*#__PURE__*/ (0, ($parcel$interopDefault($4TsYs$react))).createElement($ecf55d0c218a575e$var$TagGroupInner, {
|
|
57
63
|
props: props,
|
|
58
64
|
forwardedRef: ref,
|
|
59
65
|
collection: collection
|
|
60
|
-
}));
|
|
66
|
+
})));
|
|
61
67
|
});
|
|
62
68
|
function $ecf55d0c218a575e$var$TagGroupInner({ props: props, forwardedRef: ref, collection: collection }) {
|
|
63
|
-
let contextProps;
|
|
64
|
-
[contextProps] = (0, $c5ccf687772c0422$exports.useContextProps)({}, null, (0, $09cb5ee89bb327e1$exports.SelectableCollectionContext));
|
|
65
|
-
let { filter: filter, ...collectionProps } = contextProps;
|
|
66
|
-
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
67
|
-
let { shouldUseVirtualFocus: shouldUseVirtualFocus, disallowTypeAhead: disallowTypeAhead, ...DOMCollectionProps } = collectionProps || {};
|
|
68
69
|
let tagListRef = (0, $4TsYs$react.useRef)(null);
|
|
70
|
+
// Extract the user provided id so it doesn't clash with the collection id provided by Autocomplete
|
|
71
|
+
let { id: id, ...otherProps } = props;
|
|
72
|
+
[otherProps, tagListRef] = (0, $c5ccf687772c0422$exports.useContextProps)(otherProps, tagListRef, (0, $525402dfec7da5bc$exports.SelectableCollectionContext));
|
|
73
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
74
|
+
let { filter: filter, shouldUseVirtualFocus: shouldUseVirtualFocus, ...DOMCollectionProps } = otherProps;
|
|
69
75
|
let [labelRef, label] = (0, $c5ccf687772c0422$exports.useSlot)(!props['aria-label'] && !props['aria-labelledby']);
|
|
70
76
|
let tagGroupState = (0, $4TsYs$reactstately.useListState)({
|
|
71
|
-
...
|
|
77
|
+
...DOMCollectionProps,
|
|
72
78
|
children: undefined,
|
|
73
79
|
collection: collection
|
|
74
80
|
});
|
|
75
81
|
let filteredState = (0, $4TsYs$reactstately.UNSTABLE_useFilteredListState)(tagGroupState, filter);
|
|
76
82
|
// Prevent DOM props from going to two places.
|
|
77
|
-
let domProps = (0, $4TsYs$reactariautils.filterDOMProps)(
|
|
83
|
+
let domProps = (0, $4TsYs$reactariautils.filterDOMProps)(otherProps, {
|
|
78
84
|
global: true
|
|
79
85
|
});
|
|
80
|
-
let domPropOverrides = Object.fromEntries(Object.entries(domProps).map(([k])=>[
|
|
86
|
+
let domPropOverrides = Object.fromEntries(Object.entries(domProps).map(([k, val])=>[
|
|
81
87
|
k,
|
|
82
|
-
undefined
|
|
88
|
+
k === 'id' ? val : undefined
|
|
83
89
|
]));
|
|
84
90
|
let { gridProps: gridProps, labelProps: labelProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps } = (0, $4TsYs$reactaria.useTagGroup)({
|
|
85
|
-
...props,
|
|
86
|
-
...domPropOverrides,
|
|
87
91
|
...DOMCollectionProps,
|
|
92
|
+
...domPropOverrides,
|
|
88
93
|
label: label
|
|
89
94
|
}, filteredState, tagListRef);
|
|
90
95
|
var _props_className;
|
|
91
96
|
return /*#__PURE__*/ (0, ($parcel$interopDefault($4TsYs$react))).createElement("div", {
|
|
92
97
|
...domProps,
|
|
98
|
+
id: id,
|
|
93
99
|
ref: ref,
|
|
94
100
|
slot: props.slot || undefined,
|
|
95
101
|
className: (_props_className = props.className) !== null && _props_className !== void 0 ? _props_className : 'react-aria-TagGroup',
|
|
@@ -161,10 +167,10 @@ function $ecf55d0c218a575e$var$TagListInner({ props: props, forwardedRef: forwar
|
|
|
161
167
|
"data-empty": state.collection.size === 0 || undefined,
|
|
162
168
|
"data-focused": isFocused || undefined,
|
|
163
169
|
"data-focus-visible": isFocusVisible || undefined
|
|
164
|
-
}, state.collection.size === 0 && props.renderEmptyState ? props.renderEmptyState(renderValues) : /*#__PURE__*/ (0, ($parcel$interopDefault($4TsYs$react))).createElement(CollectionRoot, {
|
|
170
|
+
}, /*#__PURE__*/ (0, ($parcel$interopDefault($4TsYs$react))).createElement((0, $2d10bc562fea46b3$exports.SharedElementTransition), null, state.collection.size === 0 && props.renderEmptyState ? props.renderEmptyState(renderValues) : /*#__PURE__*/ (0, ($parcel$interopDefault($4TsYs$react))).createElement(CollectionRoot, {
|
|
165
171
|
collection: state.collection,
|
|
166
172
|
persistedKeys: persistedKeys
|
|
167
|
-
}));
|
|
173
|
+
})));
|
|
168
174
|
}
|
|
169
175
|
const $ecf55d0c218a575e$export$3288d34c523a1192 = /*#__PURE__*/ (0, $4TsYs$reactariacollections.createLeafComponent)((0, $4TsYs$reactariacollections.ItemNode), (props, forwardedRef, item)=>{
|
|
170
176
|
let state = (0, $4TsYs$react.useContext)((0, $a03b42240404b420$exports.ListStateContext));
|
|
@@ -233,6 +239,12 @@ const $ecf55d0c218a575e$export$3288d34c523a1192 = /*#__PURE__*/ (0, $4TsYs$react
|
|
|
233
239
|
[
|
|
234
240
|
(0, $3114c2382242bdc0$exports.CollectionRendererContext),
|
|
235
241
|
(0, $3114c2382242bdc0$exports.DefaultCollectionRenderer)
|
|
242
|
+
],
|
|
243
|
+
[
|
|
244
|
+
(0, $54e872c96e6d295b$exports.SelectionIndicatorContext),
|
|
245
|
+
{
|
|
246
|
+
isSelected: states.isSelected
|
|
247
|
+
}
|
|
236
248
|
]
|
|
237
249
|
]
|
|
238
250
|
}, renderProps.children)));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/react-aria-components/src/TagGroup.tsx"],"sourcesContent":["/*\n * Copyright 2022 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 {AriaTagGroupProps, useFocusRing, useHover, useTag, useTagGroup} from 'react-aria';\nimport {ButtonContext} from './Button';\nimport {Collection, CollectionBuilder, createLeafComponent, ItemNode} from '@react-aria/collections';\nimport {CollectionProps, CollectionRendererContext, DefaultCollectionRenderer, ItemRenderProps, usePersistedKeys} from './Collection';\nimport {ContextValue, DOMProps, Provider, RenderProps, SlotProps, StyleRenderProps, useContextProps, useRenderProps, useSlot} from './utils';\nimport {filterDOMProps, mergeProps, useObjectRef} from '@react-aria/utils';\nimport {forwardRefType, GlobalDOMAttributes, HoverEvents, Key, LinkDOMProps, PressEvents} from '@react-types/shared';\nimport {LabelContext} from './Label';\nimport {ListState, Node, UNSTABLE_useFilteredListState, useListState} from 'react-stately';\nimport {ListStateContext} from './ListBox';\nimport React, {createContext, ForwardedRef, forwardRef, JSX, ReactNode, useContext, useEffect, useRef} from 'react';\nimport {SelectableCollectionContext} from './context';\nimport {TextContext} from './Text';\n\nexport interface TagGroupProps extends Omit<AriaTagGroupProps<unknown>, 'children' | 'items' | 'label' | 'description' | 'errorMessage' | 'keyboardDelegate'>, DOMProps, SlotProps, GlobalDOMAttributes<HTMLDivElement> {}\n\nexport interface TagListRenderProps {\n /**\n * Whether the tag list has no items and should display its empty state.\n * @selector [data-empty]\n */\n isEmpty: boolean,\n /**\n * Whether the tag list is currently focused.\n * @selector [data-focused]\n */\n isFocused: boolean,\n /**\n * Whether the tag list is currently keyboard focused.\n * @selector [data-focus-visible]\n */\n isFocusVisible: boolean,\n /**\n * State of the TagGroup.\n */\n state: ListState<unknown>\n}\n\nexport interface TagListProps<T> extends Omit<CollectionProps<T>, 'disabledKeys'>, StyleRenderProps<TagListRenderProps>, GlobalDOMAttributes<HTMLDivElement> {\n /** Provides content to display when there are no items in the tag list. */\n renderEmptyState?: (props: TagListRenderProps) => ReactNode\n}\n\nexport const TagGroupContext = createContext<ContextValue<TagGroupProps, HTMLDivElement>>(null);\nexport const TagListContext = createContext<ContextValue<TagListProps<any>, HTMLDivElement>>(null);\n\n/**\n * A tag group is a focusable list of labels, categories, keywords, filters, or other items, with support for keyboard navigation, selection, and removal.\n */\nexport const TagGroup = /*#__PURE__*/ (forwardRef as forwardRefType)(function TagGroup(props: TagGroupProps, ref: ForwardedRef<HTMLDivElement>) {\n [props, ref] = useContextProps(props, ref, TagGroupContext);\n return (\n <CollectionBuilder content={props.children}>\n {collection => <TagGroupInner props={props} forwardedRef={ref} collection={collection} />}\n </CollectionBuilder>\n );\n});\n\ninterface TagGroupInnerProps {\n props: TagGroupProps,\n forwardedRef: ForwardedRef<HTMLDivElement>,\n collection\n}\n\nfunction TagGroupInner({props, forwardedRef: ref, collection}: TagGroupInnerProps) {\n let contextProps;\n [contextProps] = useContextProps({}, null, SelectableCollectionContext);\n let {filter, ...collectionProps} = contextProps;\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n let {shouldUseVirtualFocus, disallowTypeAhead, ...DOMCollectionProps} = collectionProps || {};\n let tagListRef = useRef<HTMLDivElement>(null);\n let [labelRef, label] = useSlot(\n !props['aria-label'] && !props['aria-labelledby']\n );\n let tagGroupState = useListState({\n ...props,\n children: undefined,\n collection\n });\n\n let filteredState = UNSTABLE_useFilteredListState(tagGroupState, filter);\n\n // Prevent DOM props from going to two places.\n let domProps = filterDOMProps(props, {global: true});\n let domPropOverrides = Object.fromEntries(Object.entries(domProps).map(([k]) => [k, undefined]));\n let {\n gridProps,\n labelProps,\n descriptionProps,\n errorMessageProps\n } = useTagGroup({\n ...props,\n ...domPropOverrides,\n ...DOMCollectionProps,\n label\n }, filteredState, tagListRef);\n\n return (\n <div\n {...domProps}\n ref={ref}\n slot={props.slot || undefined}\n className={props.className ?? 'react-aria-TagGroup'}\n style={props.style}>\n <Provider\n values={[\n [LabelContext, {...labelProps, elementType: 'span', ref: labelRef}],\n [TagListContext, {...gridProps, ref: tagListRef}],\n [ListStateContext, filteredState],\n [TextContext, {\n slots: {\n description: descriptionProps,\n errorMessage: errorMessageProps\n }\n }]\n ]}>\n {props.children}\n </Provider>\n </div>\n );\n}\n\n/**\n * A tag list is a container for tags within a TagGroup.\n */\nexport const TagList = /*#__PURE__*/ (forwardRef as forwardRefType)(function TagList<T extends object>(props: TagListProps<T>, ref: ForwardedRef<HTMLDivElement>): JSX.Element {\n let state = useContext(ListStateContext);\n return state\n ? <TagListInner props={props} forwardedRef={ref} />\n : <Collection {...props} />;\n});\n\ninterface TagListInnerProps<T> {\n props: TagListProps<T>,\n forwardedRef: ForwardedRef<HTMLDivElement>\n}\n\nfunction TagListInner<T extends object>({props, forwardedRef}: TagListInnerProps<T>) {\n let state = useContext(ListStateContext)!;\n let {CollectionRoot} = useContext(CollectionRendererContext);\n let [gridProps, ref] = useContextProps({}, forwardedRef, TagListContext);\n\n let {focusProps, isFocused, isFocusVisible} = useFocusRing();\n let renderValues = {\n isEmpty: state.collection.size === 0,\n isFocused,\n isFocusVisible,\n state\n };\n let renderProps = useRenderProps({\n className: props.className,\n style: props.style,\n defaultClassName: 'react-aria-TagList',\n values: renderValues\n });\n\n let persistedKeys = usePersistedKeys(state.selectionManager.focusedKey);\n let DOMProps = filterDOMProps(props, {global: true});\n\n return (\n <div\n {...mergeProps(DOMProps, renderProps, gridProps, focusProps)}\n ref={ref}\n data-empty={state.collection.size === 0 || undefined}\n data-focused={isFocused || undefined}\n data-focus-visible={isFocusVisible || undefined}>\n {state.collection.size === 0 && props.renderEmptyState\n ? props.renderEmptyState(renderValues)\n : <CollectionRoot collection={state.collection} persistedKeys={persistedKeys} />}\n </div>\n );\n}\n\nexport interface TagRenderProps extends Omit<ItemRenderProps, 'allowsDragging' | 'isDragging' | 'isDropTarget'> {\n /**\n * Whether the tag group allows items to be removed.\n * @selector [data-allows-removing]\n */\n allowsRemoving: boolean\n}\n\nexport interface TagProps extends RenderProps<TagRenderProps>, LinkDOMProps, HoverEvents, PressEvents, Omit<GlobalDOMAttributes<HTMLDivElement>, 'onClick'> {\n /** A unique id for the tag. */\n id?: Key,\n /**\n * A string representation of the tags's contents, used for accessibility.\n * Required if children is not a plain text string.\n */\n textValue?: string,\n /** Whether the tag is disabled. */\n isDisabled?: boolean\n}\n\n/**\n * A Tag is an individual item within a TagList.\n */\nexport const Tag = /*#__PURE__*/ createLeafComponent(ItemNode, (props: TagProps, forwardedRef: ForwardedRef<HTMLDivElement>, item: Node<unknown>) => {\n let state = useContext(ListStateContext)!;\n let ref = useObjectRef<HTMLDivElement>(forwardedRef);\n let {focusProps, isFocusVisible} = useFocusRing({within: false});\n let {rowProps, gridCellProps, removeButtonProps, ...states} = useTag({item}, state, ref);\n\n let {hoverProps, isHovered} = useHover({\n isDisabled: !states.allowsSelection,\n onHoverStart: item.props.onHoverStart,\n onHoverChange: item.props.onHoverChange,\n onHoverEnd: item.props.onHoverEnd\n });\n\n let renderProps = useRenderProps({\n ...props,\n id: undefined,\n children: item.rendered,\n defaultClassName: 'react-aria-Tag',\n values: {\n ...states,\n isFocusVisible,\n isHovered,\n selectionMode: state.selectionManager.selectionMode,\n selectionBehavior: state.selectionManager.selectionBehavior\n }\n });\n\n useEffect(() => {\n if (!item.textValue && process.env.NODE_ENV !== 'production') {\n console.warn('A `textValue` prop is required for <Tag> elements with non-plain text children for accessibility.');\n }\n }, [item.textValue]);\n\n let DOMProps = filterDOMProps(props as any, {global: true});\n delete DOMProps.id;\n delete DOMProps.onClick;\n\n return (\n <div\n ref={ref}\n {...mergeProps(DOMProps, renderProps, rowProps, focusProps, hoverProps)}\n data-selected={states.isSelected || undefined}\n data-disabled={states.isDisabled || undefined}\n data-hovered={isHovered || undefined}\n data-focused={states.isFocused || undefined}\n data-focus-visible={isFocusVisible || undefined}\n data-pressed={states.isPressed || undefined}\n data-allows-removing={states.allowsRemoving || undefined}\n data-selection-mode={state.selectionManager.selectionMode === 'none' ? undefined : state.selectionManager.selectionMode}>\n <div {...gridCellProps} style={{display: 'contents'}}>\n <Provider\n values={[\n [ButtonContext, {\n slots: {\n remove: removeButtonProps\n }\n }],\n [CollectionRendererContext, DefaultCollectionRenderer]\n ]}>\n {renderProps.children}\n </Provider>\n </div>\n </div>\n );\n});\n"],"names":[],"version":3,"file":"TagGroup.main.js.map"}
|
|
1
|
+
{"mappings":"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","sources":["packages/react-aria-components/src/TagGroup.tsx"],"sourcesContent":["/*\n * Copyright 2022 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 {AriaTagGroupProps, useFocusRing, useHover, useTag, useTagGroup} from 'react-aria';\nimport {ButtonContext} from './Button';\nimport {Collection, CollectionBuilder, createLeafComponent, ItemNode} from '@react-aria/collections';\nimport {CollectionProps, CollectionRendererContext, DefaultCollectionRenderer, ItemRenderProps, usePersistedKeys} from './Collection';\nimport {ContextValue, DOMProps, Provider, RenderProps, SlotProps, StyleRenderProps, useContextProps, useRenderProps, useSlot} from './utils';\nimport {filterDOMProps, mergeProps, useObjectRef} from '@react-aria/utils';\nimport {forwardRefType, GlobalDOMAttributes, HoverEvents, Key, LinkDOMProps, PressEvents, RefObject} from '@react-types/shared';\nimport {LabelContext} from './Label';\nimport {ListState, Node, UNSTABLE_useFilteredListState, useListState} from 'react-stately';\nimport {ListStateContext} from './ListBox';\nimport React, {createContext, ForwardedRef, forwardRef, JSX, ReactNode, useContext, useEffect, useRef} from 'react';\nimport {SelectableCollectionContext, SelectableCollectionContextValue} from './RSPContexts';\nimport {SelectionIndicatorContext} from './SelectionIndicator';\nimport {SharedElementTransition} from './SharedElementTransition';\nimport {TextContext} from './Text';\n\nexport interface TagGroupProps extends Omit<AriaTagGroupProps<unknown>, 'children' | 'items' | 'label' | 'description' | 'errorMessage' | 'keyboardDelegate'>, DOMProps, SlotProps, GlobalDOMAttributes<HTMLDivElement> {}\n\nexport interface TagListRenderProps {\n /**\n * Whether the tag list has no items and should display its empty state.\n * @selector [data-empty]\n */\n isEmpty: boolean,\n /**\n * Whether the tag list is currently focused.\n * @selector [data-focused]\n */\n isFocused: boolean,\n /**\n * Whether the tag list is currently keyboard focused.\n * @selector [data-focus-visible]\n */\n isFocusVisible: boolean,\n /**\n * State of the TagGroup.\n */\n state: ListState<unknown>\n}\n\nexport interface TagListProps<T> extends Omit<CollectionProps<T>, 'disabledKeys'>, StyleRenderProps<TagListRenderProps>, GlobalDOMAttributes<HTMLDivElement> {\n /** Provides content to display when there are no items in the tag list. */\n renderEmptyState?: (props: TagListRenderProps) => ReactNode\n}\n\nexport const TagGroupContext = createContext<ContextValue<TagGroupProps, HTMLDivElement>>(null);\nexport const TagListContext = createContext<ContextValue<TagListProps<any>, HTMLDivElement>>(null);\n\n/**\n * A tag group is a focusable list of labels, categories, keywords, filters, or other items, with support for keyboard navigation, selection, and removal.\n */\nexport const TagGroup = /*#__PURE__*/ (forwardRef as forwardRefType)(function TagGroup(props: TagGroupProps, ref: ForwardedRef<HTMLDivElement>) {\n [props, ref] = useContextProps(props, ref, TagGroupContext);\n return (\n <ListStateContext.Provider value={null}>\n <CollectionBuilder content={props.children}>\n {collection => <TagGroupInner props={props} forwardedRef={ref} collection={collection} />}\n </CollectionBuilder>\n </ListStateContext.Provider>\n );\n});\n\ninterface TagGroupInnerProps<T> {\n props: TagGroupProps & SelectableCollectionContextValue<T>,\n forwardedRef: ForwardedRef<HTMLDivElement>,\n collection\n}\n\nfunction TagGroupInner<T extends object>({props, forwardedRef: ref, collection}: TagGroupInnerProps<T>) {\n let tagListRef = useRef<HTMLElement>(null);\n // Extract the user provided id so it doesn't clash with the collection id provided by Autocomplete\n let {id, ...otherProps} = props;\n [otherProps, tagListRef] = useContextProps(otherProps, tagListRef, SelectableCollectionContext);\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n let {filter, shouldUseVirtualFocus, ...DOMCollectionProps} = otherProps;\n let [labelRef, label] = useSlot(\n !props['aria-label'] && !props['aria-labelledby']\n );\n let tagGroupState = useListState({\n ...DOMCollectionProps,\n children: undefined,\n collection\n });\n\n let filteredState = UNSTABLE_useFilteredListState(tagGroupState as ListState<T>, filter);\n\n // Prevent DOM props from going to two places.\n let domProps = filterDOMProps(otherProps, {global: true});\n let domPropOverrides = Object.fromEntries(Object.entries(domProps).map(([k, val]) => [k, k === 'id' ? val : undefined]));\n let {\n gridProps,\n labelProps,\n descriptionProps,\n errorMessageProps\n } = useTagGroup({\n ...DOMCollectionProps,\n ...domPropOverrides,\n label\n }, filteredState, tagListRef);\n\n return (\n <div\n {...domProps}\n id={id}\n ref={ref}\n slot={props.slot || undefined}\n className={props.className ?? 'react-aria-TagGroup'}\n style={props.style}>\n <Provider\n values={[\n [LabelContext, {...labelProps, elementType: 'span', ref: labelRef}],\n [TagListContext, {...gridProps, ref: tagListRef as RefObject<HTMLDivElement>}],\n [ListStateContext, filteredState],\n [TextContext, {\n slots: {\n description: descriptionProps,\n errorMessage: errorMessageProps\n }\n }]\n ]}>\n {props.children}\n </Provider>\n </div>\n );\n}\n\n/**\n * A tag list is a container for tags within a TagGroup.\n */\nexport const TagList = /*#__PURE__*/ (forwardRef as forwardRefType)(function TagList<T extends object>(props: TagListProps<T>, ref: ForwardedRef<HTMLDivElement>): JSX.Element {\n let state = useContext(ListStateContext);\n return state\n ? <TagListInner props={props} forwardedRef={ref} />\n : <Collection {...props} />;\n});\n\ninterface TagListInnerProps<T> {\n props: TagListProps<T>,\n forwardedRef: ForwardedRef<HTMLDivElement>\n}\n\nfunction TagListInner<T extends object>({props, forwardedRef}: TagListInnerProps<T>) {\n let state = useContext(ListStateContext)!;\n let {CollectionRoot} = useContext(CollectionRendererContext);\n let [gridProps, ref] = useContextProps({}, forwardedRef, TagListContext);\n\n let {focusProps, isFocused, isFocusVisible} = useFocusRing();\n let renderValues = {\n isEmpty: state.collection.size === 0,\n isFocused,\n isFocusVisible,\n state\n };\n let renderProps = useRenderProps({\n className: props.className,\n style: props.style,\n defaultClassName: 'react-aria-TagList',\n values: renderValues\n });\n\n let persistedKeys = usePersistedKeys(state.selectionManager.focusedKey);\n let DOMProps = filterDOMProps(props, {global: true});\n\n return (\n <div\n {...mergeProps(DOMProps, renderProps, gridProps, focusProps)}\n ref={ref}\n data-empty={state.collection.size === 0 || undefined}\n data-focused={isFocused || undefined}\n data-focus-visible={isFocusVisible || undefined}>\n <SharedElementTransition>\n {state.collection.size === 0 && props.renderEmptyState\n ? props.renderEmptyState(renderValues)\n : <CollectionRoot collection={state.collection} persistedKeys={persistedKeys} />}\n </SharedElementTransition>\n </div>\n );\n}\n\nexport interface TagRenderProps extends Omit<ItemRenderProps, 'allowsDragging' | 'isDragging' | 'isDropTarget'> {\n /**\n * Whether the tag group allows items to be removed.\n * @selector [data-allows-removing]\n */\n allowsRemoving: boolean\n}\n\nexport interface TagProps extends RenderProps<TagRenderProps>, LinkDOMProps, HoverEvents, PressEvents, Omit<GlobalDOMAttributes<HTMLDivElement>, 'onClick'> {\n /** A unique id for the tag. */\n id?: Key,\n /**\n * A string representation of the tags's contents, used for accessibility.\n * Required if children is not a plain text string.\n */\n textValue?: string,\n /** Whether the tag is disabled. */\n isDisabled?: boolean\n}\n\n/**\n * A Tag is an individual item within a TagList.\n */\nexport const Tag = /*#__PURE__*/ createLeafComponent(ItemNode, (props: TagProps, forwardedRef: ForwardedRef<HTMLDivElement>, item: Node<unknown>) => {\n let state = useContext(ListStateContext)!;\n let ref = useObjectRef<HTMLDivElement>(forwardedRef);\n let {focusProps, isFocusVisible} = useFocusRing({within: false});\n let {rowProps, gridCellProps, removeButtonProps, ...states} = useTag({item}, state, ref);\n\n let {hoverProps, isHovered} = useHover({\n isDisabled: !states.allowsSelection,\n onHoverStart: item.props.onHoverStart,\n onHoverChange: item.props.onHoverChange,\n onHoverEnd: item.props.onHoverEnd\n });\n\n let renderProps = useRenderProps({\n ...props,\n id: undefined,\n children: item.rendered,\n defaultClassName: 'react-aria-Tag',\n values: {\n ...states,\n isFocusVisible,\n isHovered,\n selectionMode: state.selectionManager.selectionMode,\n selectionBehavior: state.selectionManager.selectionBehavior\n }\n });\n\n useEffect(() => {\n if (!item.textValue && process.env.NODE_ENV !== 'production') {\n console.warn('A `textValue` prop is required for <Tag> elements with non-plain text children for accessibility.');\n }\n }, [item.textValue]);\n\n let DOMProps = filterDOMProps(props as any, {global: true});\n delete DOMProps.id;\n delete DOMProps.onClick;\n\n return (\n <div\n ref={ref}\n {...mergeProps(DOMProps, renderProps, rowProps, focusProps, hoverProps)}\n data-selected={states.isSelected || undefined}\n data-disabled={states.isDisabled || undefined}\n data-hovered={isHovered || undefined}\n data-focused={states.isFocused || undefined}\n data-focus-visible={isFocusVisible || undefined}\n data-pressed={states.isPressed || undefined}\n data-allows-removing={states.allowsRemoving || undefined}\n data-selection-mode={state.selectionManager.selectionMode === 'none' ? undefined : state.selectionManager.selectionMode}>\n <div {...gridCellProps} style={{display: 'contents'}}>\n <Provider\n values={[\n [ButtonContext, {\n slots: {\n remove: removeButtonProps\n }\n }],\n [CollectionRendererContext, DefaultCollectionRenderer],\n [SelectionIndicatorContext, {isSelected: states.isSelected}]\n ]}>\n {renderProps.children}\n </Provider>\n </div>\n </div>\n );\n});\n"],"names":[],"version":3,"file":"TagGroup.main.js.map"}
|
package/dist/TagGroup.mjs
CHANGED
|
@@ -3,7 +3,9 @@ import {CollectionRendererContext as $7135fc7d473fd974$export$4feb769f8ddf26c5,
|
|
|
3
3
|
import {Provider as $64fa3d84918910a7$export$2881499e37b75b9a, useContextProps as $64fa3d84918910a7$export$29f1550f4b0d4415, useRenderProps as $64fa3d84918910a7$export$4d86445c2cf5e3, useSlot as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8} from "./utils.mjs";
|
|
4
4
|
import {LabelContext as $01b77f81d0f07f68$export$75b6ee27786ba447} from "./Label.mjs";
|
|
5
5
|
import {ListStateContext as $eed445e0843c11d0$export$7c5906fe4f1f2af2} from "./ListBox.mjs";
|
|
6
|
-
import {SelectableCollectionContext as $
|
|
6
|
+
import {SelectableCollectionContext as $4e85f108e88277b8$export$b0d3ecf7112093a7} from "./RSPContexts.mjs";
|
|
7
|
+
import {SelectionIndicatorContext as $1d5b8b8664671ef2$export$c9549807523555e0} from "./SelectionIndicator.mjs";
|
|
8
|
+
import {SharedElementTransition as $c8a5a149f625efcf$export$758399f318e6385a} from "./SharedElementTransition.mjs";
|
|
7
9
|
import {TextContext as $514c0188e459b4c0$export$9afb8bc826b033ea} from "./Text.mjs";
|
|
8
10
|
import {useTagGroup as $7lruP$useTagGroup, useFocusRing as $7lruP$useFocusRing, useTag as $7lruP$useTag, useHover as $7lruP$useHover} from "react-aria";
|
|
9
11
|
import {CollectionBuilder as $7lruP$CollectionBuilder, Collection as $7lruP$Collection, createLeafComponent as $7lruP$createLeafComponent, ItemNode as $7lruP$ItemNode} from "@react-aria/collections";
|
|
@@ -33,49 +35,53 @@ import $7lruP$react, {createContext as $7lruP$createContext, forwardRef as $7lru
|
|
|
33
35
|
|
|
34
36
|
|
|
35
37
|
|
|
38
|
+
|
|
39
|
+
|
|
36
40
|
const $eaf9e70818b436db$export$5b07b5dd2cbd96e3 = /*#__PURE__*/ (0, $7lruP$createContext)(null);
|
|
37
41
|
const $eaf9e70818b436db$export$e755ce3685dd0ca9 = /*#__PURE__*/ (0, $7lruP$createContext)(null);
|
|
38
42
|
const $eaf9e70818b436db$export$67ea30858aaf75e3 = /*#__PURE__*/ (0, $7lruP$forwardRef)(function TagGroup(props, ref) {
|
|
39
43
|
[props, ref] = (0, $64fa3d84918910a7$export$29f1550f4b0d4415)(props, ref, $eaf9e70818b436db$export$5b07b5dd2cbd96e3);
|
|
40
|
-
return /*#__PURE__*/ (0, $7lruP$react).createElement((0, $
|
|
44
|
+
return /*#__PURE__*/ (0, $7lruP$react).createElement((0, $eed445e0843c11d0$export$7c5906fe4f1f2af2).Provider, {
|
|
45
|
+
value: null
|
|
46
|
+
}, /*#__PURE__*/ (0, $7lruP$react).createElement((0, $7lruP$CollectionBuilder), {
|
|
41
47
|
content: props.children
|
|
42
48
|
}, (collection)=>/*#__PURE__*/ (0, $7lruP$react).createElement($eaf9e70818b436db$var$TagGroupInner, {
|
|
43
49
|
props: props,
|
|
44
50
|
forwardedRef: ref,
|
|
45
51
|
collection: collection
|
|
46
|
-
}));
|
|
52
|
+
})));
|
|
47
53
|
});
|
|
48
54
|
function $eaf9e70818b436db$var$TagGroupInner({ props: props, forwardedRef: ref, collection: collection }) {
|
|
49
|
-
let contextProps;
|
|
50
|
-
[contextProps] = (0, $64fa3d84918910a7$export$29f1550f4b0d4415)({}, null, (0, $8e6cc465cc68f603$export$b0d3ecf7112093a7));
|
|
51
|
-
let { filter: filter, ...collectionProps } = contextProps;
|
|
52
|
-
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
53
|
-
let { shouldUseVirtualFocus: shouldUseVirtualFocus, disallowTypeAhead: disallowTypeAhead, ...DOMCollectionProps } = collectionProps || {};
|
|
54
55
|
let tagListRef = (0, $7lruP$useRef)(null);
|
|
56
|
+
// Extract the user provided id so it doesn't clash with the collection id provided by Autocomplete
|
|
57
|
+
let { id: id, ...otherProps } = props;
|
|
58
|
+
[otherProps, tagListRef] = (0, $64fa3d84918910a7$export$29f1550f4b0d4415)(otherProps, tagListRef, (0, $4e85f108e88277b8$export$b0d3ecf7112093a7));
|
|
59
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
60
|
+
let { filter: filter, shouldUseVirtualFocus: shouldUseVirtualFocus, ...DOMCollectionProps } = otherProps;
|
|
55
61
|
let [labelRef, label] = (0, $64fa3d84918910a7$export$9d4c57ee4c6ffdd8)(!props['aria-label'] && !props['aria-labelledby']);
|
|
56
62
|
let tagGroupState = (0, $7lruP$useListState)({
|
|
57
|
-
...
|
|
63
|
+
...DOMCollectionProps,
|
|
58
64
|
children: undefined,
|
|
59
65
|
collection: collection
|
|
60
66
|
});
|
|
61
67
|
let filteredState = (0, $7lruP$UNSTABLE_useFilteredListState)(tagGroupState, filter);
|
|
62
68
|
// Prevent DOM props from going to two places.
|
|
63
|
-
let domProps = (0, $7lruP$filterDOMProps)(
|
|
69
|
+
let domProps = (0, $7lruP$filterDOMProps)(otherProps, {
|
|
64
70
|
global: true
|
|
65
71
|
});
|
|
66
|
-
let domPropOverrides = Object.fromEntries(Object.entries(domProps).map(([k])=>[
|
|
72
|
+
let domPropOverrides = Object.fromEntries(Object.entries(domProps).map(([k, val])=>[
|
|
67
73
|
k,
|
|
68
|
-
undefined
|
|
74
|
+
k === 'id' ? val : undefined
|
|
69
75
|
]));
|
|
70
76
|
let { gridProps: gridProps, labelProps: labelProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps } = (0, $7lruP$useTagGroup)({
|
|
71
|
-
...props,
|
|
72
|
-
...domPropOverrides,
|
|
73
77
|
...DOMCollectionProps,
|
|
78
|
+
...domPropOverrides,
|
|
74
79
|
label: label
|
|
75
80
|
}, filteredState, tagListRef);
|
|
76
81
|
var _props_className;
|
|
77
82
|
return /*#__PURE__*/ (0, $7lruP$react).createElement("div", {
|
|
78
83
|
...domProps,
|
|
84
|
+
id: id,
|
|
79
85
|
ref: ref,
|
|
80
86
|
slot: props.slot || undefined,
|
|
81
87
|
className: (_props_className = props.className) !== null && _props_className !== void 0 ? _props_className : 'react-aria-TagGroup',
|
|
@@ -147,10 +153,10 @@ function $eaf9e70818b436db$var$TagListInner({ props: props, forwardedRef: forwar
|
|
|
147
153
|
"data-empty": state.collection.size === 0 || undefined,
|
|
148
154
|
"data-focused": isFocused || undefined,
|
|
149
155
|
"data-focus-visible": isFocusVisible || undefined
|
|
150
|
-
}, state.collection.size === 0 && props.renderEmptyState ? props.renderEmptyState(renderValues) : /*#__PURE__*/ (0, $7lruP$react).createElement(CollectionRoot, {
|
|
156
|
+
}, /*#__PURE__*/ (0, $7lruP$react).createElement((0, $c8a5a149f625efcf$export$758399f318e6385a), null, state.collection.size === 0 && props.renderEmptyState ? props.renderEmptyState(renderValues) : /*#__PURE__*/ (0, $7lruP$react).createElement(CollectionRoot, {
|
|
151
157
|
collection: state.collection,
|
|
152
158
|
persistedKeys: persistedKeys
|
|
153
|
-
}));
|
|
159
|
+
})));
|
|
154
160
|
}
|
|
155
161
|
const $eaf9e70818b436db$export$3288d34c523a1192 = /*#__PURE__*/ (0, $7lruP$createLeafComponent)((0, $7lruP$ItemNode), (props, forwardedRef, item)=>{
|
|
156
162
|
let state = (0, $7lruP$useContext)((0, $eed445e0843c11d0$export$7c5906fe4f1f2af2));
|
|
@@ -219,6 +225,12 @@ const $eaf9e70818b436db$export$3288d34c523a1192 = /*#__PURE__*/ (0, $7lruP$creat
|
|
|
219
225
|
[
|
|
220
226
|
(0, $7135fc7d473fd974$export$4feb769f8ddf26c5),
|
|
221
227
|
(0, $7135fc7d473fd974$export$a164736487e3f0ae)
|
|
228
|
+
],
|
|
229
|
+
[
|
|
230
|
+
(0, $1d5b8b8664671ef2$export$c9549807523555e0),
|
|
231
|
+
{
|
|
232
|
+
isSelected: states.isSelected
|
|
233
|
+
}
|
|
222
234
|
]
|
|
223
235
|
]
|
|
224
236
|
}, renderProps.children)));
|
package/dist/TagGroup.module.js
CHANGED
|
@@ -3,7 +3,9 @@ import {CollectionRendererContext as $7135fc7d473fd974$export$4feb769f8ddf26c5,
|
|
|
3
3
|
import {Provider as $64fa3d84918910a7$export$2881499e37b75b9a, useContextProps as $64fa3d84918910a7$export$29f1550f4b0d4415, useRenderProps as $64fa3d84918910a7$export$4d86445c2cf5e3, useSlot as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8} from "./utils.module.js";
|
|
4
4
|
import {LabelContext as $01b77f81d0f07f68$export$75b6ee27786ba447} from "./Label.module.js";
|
|
5
5
|
import {ListStateContext as $eed445e0843c11d0$export$7c5906fe4f1f2af2} from "./ListBox.module.js";
|
|
6
|
-
import {SelectableCollectionContext as $
|
|
6
|
+
import {SelectableCollectionContext as $4e85f108e88277b8$export$b0d3ecf7112093a7} from "./RSPContexts.module.js";
|
|
7
|
+
import {SelectionIndicatorContext as $1d5b8b8664671ef2$export$c9549807523555e0} from "./SelectionIndicator.module.js";
|
|
8
|
+
import {SharedElementTransition as $c8a5a149f625efcf$export$758399f318e6385a} from "./SharedElementTransition.module.js";
|
|
7
9
|
import {TextContext as $514c0188e459b4c0$export$9afb8bc826b033ea} from "./Text.module.js";
|
|
8
10
|
import {useTagGroup as $7lruP$useTagGroup, useFocusRing as $7lruP$useFocusRing, useTag as $7lruP$useTag, useHover as $7lruP$useHover} from "react-aria";
|
|
9
11
|
import {CollectionBuilder as $7lruP$CollectionBuilder, Collection as $7lruP$Collection, createLeafComponent as $7lruP$createLeafComponent, ItemNode as $7lruP$ItemNode} from "@react-aria/collections";
|
|
@@ -33,49 +35,53 @@ import $7lruP$react, {createContext as $7lruP$createContext, forwardRef as $7lru
|
|
|
33
35
|
|
|
34
36
|
|
|
35
37
|
|
|
38
|
+
|
|
39
|
+
|
|
36
40
|
const $eaf9e70818b436db$export$5b07b5dd2cbd96e3 = /*#__PURE__*/ (0, $7lruP$createContext)(null);
|
|
37
41
|
const $eaf9e70818b436db$export$e755ce3685dd0ca9 = /*#__PURE__*/ (0, $7lruP$createContext)(null);
|
|
38
42
|
const $eaf9e70818b436db$export$67ea30858aaf75e3 = /*#__PURE__*/ (0, $7lruP$forwardRef)(function TagGroup(props, ref) {
|
|
39
43
|
[props, ref] = (0, $64fa3d84918910a7$export$29f1550f4b0d4415)(props, ref, $eaf9e70818b436db$export$5b07b5dd2cbd96e3);
|
|
40
|
-
return /*#__PURE__*/ (0, $7lruP$react).createElement((0, $
|
|
44
|
+
return /*#__PURE__*/ (0, $7lruP$react).createElement((0, $eed445e0843c11d0$export$7c5906fe4f1f2af2).Provider, {
|
|
45
|
+
value: null
|
|
46
|
+
}, /*#__PURE__*/ (0, $7lruP$react).createElement((0, $7lruP$CollectionBuilder), {
|
|
41
47
|
content: props.children
|
|
42
48
|
}, (collection)=>/*#__PURE__*/ (0, $7lruP$react).createElement($eaf9e70818b436db$var$TagGroupInner, {
|
|
43
49
|
props: props,
|
|
44
50
|
forwardedRef: ref,
|
|
45
51
|
collection: collection
|
|
46
|
-
}));
|
|
52
|
+
})));
|
|
47
53
|
});
|
|
48
54
|
function $eaf9e70818b436db$var$TagGroupInner({ props: props, forwardedRef: ref, collection: collection }) {
|
|
49
|
-
let contextProps;
|
|
50
|
-
[contextProps] = (0, $64fa3d84918910a7$export$29f1550f4b0d4415)({}, null, (0, $8e6cc465cc68f603$export$b0d3ecf7112093a7));
|
|
51
|
-
let { filter: filter, ...collectionProps } = contextProps;
|
|
52
|
-
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
53
|
-
let { shouldUseVirtualFocus: shouldUseVirtualFocus, disallowTypeAhead: disallowTypeAhead, ...DOMCollectionProps } = collectionProps || {};
|
|
54
55
|
let tagListRef = (0, $7lruP$useRef)(null);
|
|
56
|
+
// Extract the user provided id so it doesn't clash with the collection id provided by Autocomplete
|
|
57
|
+
let { id: id, ...otherProps } = props;
|
|
58
|
+
[otherProps, tagListRef] = (0, $64fa3d84918910a7$export$29f1550f4b0d4415)(otherProps, tagListRef, (0, $4e85f108e88277b8$export$b0d3ecf7112093a7));
|
|
59
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
60
|
+
let { filter: filter, shouldUseVirtualFocus: shouldUseVirtualFocus, ...DOMCollectionProps } = otherProps;
|
|
55
61
|
let [labelRef, label] = (0, $64fa3d84918910a7$export$9d4c57ee4c6ffdd8)(!props['aria-label'] && !props['aria-labelledby']);
|
|
56
62
|
let tagGroupState = (0, $7lruP$useListState)({
|
|
57
|
-
...
|
|
63
|
+
...DOMCollectionProps,
|
|
58
64
|
children: undefined,
|
|
59
65
|
collection: collection
|
|
60
66
|
});
|
|
61
67
|
let filteredState = (0, $7lruP$UNSTABLE_useFilteredListState)(tagGroupState, filter);
|
|
62
68
|
// Prevent DOM props from going to two places.
|
|
63
|
-
let domProps = (0, $7lruP$filterDOMProps)(
|
|
69
|
+
let domProps = (0, $7lruP$filterDOMProps)(otherProps, {
|
|
64
70
|
global: true
|
|
65
71
|
});
|
|
66
|
-
let domPropOverrides = Object.fromEntries(Object.entries(domProps).map(([k])=>[
|
|
72
|
+
let domPropOverrides = Object.fromEntries(Object.entries(domProps).map(([k, val])=>[
|
|
67
73
|
k,
|
|
68
|
-
undefined
|
|
74
|
+
k === 'id' ? val : undefined
|
|
69
75
|
]));
|
|
70
76
|
let { gridProps: gridProps, labelProps: labelProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps } = (0, $7lruP$useTagGroup)({
|
|
71
|
-
...props,
|
|
72
|
-
...domPropOverrides,
|
|
73
77
|
...DOMCollectionProps,
|
|
78
|
+
...domPropOverrides,
|
|
74
79
|
label: label
|
|
75
80
|
}, filteredState, tagListRef);
|
|
76
81
|
var _props_className;
|
|
77
82
|
return /*#__PURE__*/ (0, $7lruP$react).createElement("div", {
|
|
78
83
|
...domProps,
|
|
84
|
+
id: id,
|
|
79
85
|
ref: ref,
|
|
80
86
|
slot: props.slot || undefined,
|
|
81
87
|
className: (_props_className = props.className) !== null && _props_className !== void 0 ? _props_className : 'react-aria-TagGroup',
|
|
@@ -147,10 +153,10 @@ function $eaf9e70818b436db$var$TagListInner({ props: props, forwardedRef: forwar
|
|
|
147
153
|
"data-empty": state.collection.size === 0 || undefined,
|
|
148
154
|
"data-focused": isFocused || undefined,
|
|
149
155
|
"data-focus-visible": isFocusVisible || undefined
|
|
150
|
-
}, state.collection.size === 0 && props.renderEmptyState ? props.renderEmptyState(renderValues) : /*#__PURE__*/ (0, $7lruP$react).createElement(CollectionRoot, {
|
|
156
|
+
}, /*#__PURE__*/ (0, $7lruP$react).createElement((0, $c8a5a149f625efcf$export$758399f318e6385a), null, state.collection.size === 0 && props.renderEmptyState ? props.renderEmptyState(renderValues) : /*#__PURE__*/ (0, $7lruP$react).createElement(CollectionRoot, {
|
|
151
157
|
collection: state.collection,
|
|
152
158
|
persistedKeys: persistedKeys
|
|
153
|
-
}));
|
|
159
|
+
})));
|
|
154
160
|
}
|
|
155
161
|
const $eaf9e70818b436db$export$3288d34c523a1192 = /*#__PURE__*/ (0, $7lruP$createLeafComponent)((0, $7lruP$ItemNode), (props, forwardedRef, item)=>{
|
|
156
162
|
let state = (0, $7lruP$useContext)((0, $eed445e0843c11d0$export$7c5906fe4f1f2af2));
|
|
@@ -219,6 +225,12 @@ const $eaf9e70818b436db$export$3288d34c523a1192 = /*#__PURE__*/ (0, $7lruP$creat
|
|
|
219
225
|
[
|
|
220
226
|
(0, $7135fc7d473fd974$export$4feb769f8ddf26c5),
|
|
221
227
|
(0, $7135fc7d473fd974$export$a164736487e3f0ae)
|
|
228
|
+
],
|
|
229
|
+
[
|
|
230
|
+
(0, $1d5b8b8664671ef2$export$c9549807523555e0),
|
|
231
|
+
{
|
|
232
|
+
isSelected: states.isSelected
|
|
233
|
+
}
|
|
222
234
|
]
|
|
223
235
|
]
|
|
224
236
|
}, renderProps.children)));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/react-aria-components/src/TagGroup.tsx"],"sourcesContent":["/*\n * Copyright 2022 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 {AriaTagGroupProps, useFocusRing, useHover, useTag, useTagGroup} from 'react-aria';\nimport {ButtonContext} from './Button';\nimport {Collection, CollectionBuilder, createLeafComponent, ItemNode} from '@react-aria/collections';\nimport {CollectionProps, CollectionRendererContext, DefaultCollectionRenderer, ItemRenderProps, usePersistedKeys} from './Collection';\nimport {ContextValue, DOMProps, Provider, RenderProps, SlotProps, StyleRenderProps, useContextProps, useRenderProps, useSlot} from './utils';\nimport {filterDOMProps, mergeProps, useObjectRef} from '@react-aria/utils';\nimport {forwardRefType, GlobalDOMAttributes, HoverEvents, Key, LinkDOMProps, PressEvents} from '@react-types/shared';\nimport {LabelContext} from './Label';\nimport {ListState, Node, UNSTABLE_useFilteredListState, useListState} from 'react-stately';\nimport {ListStateContext} from './ListBox';\nimport React, {createContext, ForwardedRef, forwardRef, JSX, ReactNode, useContext, useEffect, useRef} from 'react';\nimport {SelectableCollectionContext} from './context';\nimport {TextContext} from './Text';\n\nexport interface TagGroupProps extends Omit<AriaTagGroupProps<unknown>, 'children' | 'items' | 'label' | 'description' | 'errorMessage' | 'keyboardDelegate'>, DOMProps, SlotProps, GlobalDOMAttributes<HTMLDivElement> {}\n\nexport interface TagListRenderProps {\n /**\n * Whether the tag list has no items and should display its empty state.\n * @selector [data-empty]\n */\n isEmpty: boolean,\n /**\n * Whether the tag list is currently focused.\n * @selector [data-focused]\n */\n isFocused: boolean,\n /**\n * Whether the tag list is currently keyboard focused.\n * @selector [data-focus-visible]\n */\n isFocusVisible: boolean,\n /**\n * State of the TagGroup.\n */\n state: ListState<unknown>\n}\n\nexport interface TagListProps<T> extends Omit<CollectionProps<T>, 'disabledKeys'>, StyleRenderProps<TagListRenderProps>, GlobalDOMAttributes<HTMLDivElement> {\n /** Provides content to display when there are no items in the tag list. */\n renderEmptyState?: (props: TagListRenderProps) => ReactNode\n}\n\nexport const TagGroupContext = createContext<ContextValue<TagGroupProps, HTMLDivElement>>(null);\nexport const TagListContext = createContext<ContextValue<TagListProps<any>, HTMLDivElement>>(null);\n\n/**\n * A tag group is a focusable list of labels, categories, keywords, filters, or other items, with support for keyboard navigation, selection, and removal.\n */\nexport const TagGroup = /*#__PURE__*/ (forwardRef as forwardRefType)(function TagGroup(props: TagGroupProps, ref: ForwardedRef<HTMLDivElement>) {\n [props, ref] = useContextProps(props, ref, TagGroupContext);\n return (\n <CollectionBuilder content={props.children}>\n {collection => <TagGroupInner props={props} forwardedRef={ref} collection={collection} />}\n </CollectionBuilder>\n );\n});\n\ninterface TagGroupInnerProps {\n props: TagGroupProps,\n forwardedRef: ForwardedRef<HTMLDivElement>,\n collection\n}\n\nfunction TagGroupInner({props, forwardedRef: ref, collection}: TagGroupInnerProps) {\n let contextProps;\n [contextProps] = useContextProps({}, null, SelectableCollectionContext);\n let {filter, ...collectionProps} = contextProps;\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n let {shouldUseVirtualFocus, disallowTypeAhead, ...DOMCollectionProps} = collectionProps || {};\n let tagListRef = useRef<HTMLDivElement>(null);\n let [labelRef, label] = useSlot(\n !props['aria-label'] && !props['aria-labelledby']\n );\n let tagGroupState = useListState({\n ...props,\n children: undefined,\n collection\n });\n\n let filteredState = UNSTABLE_useFilteredListState(tagGroupState, filter);\n\n // Prevent DOM props from going to two places.\n let domProps = filterDOMProps(props, {global: true});\n let domPropOverrides = Object.fromEntries(Object.entries(domProps).map(([k]) => [k, undefined]));\n let {\n gridProps,\n labelProps,\n descriptionProps,\n errorMessageProps\n } = useTagGroup({\n ...props,\n ...domPropOverrides,\n ...DOMCollectionProps,\n label\n }, filteredState, tagListRef);\n\n return (\n <div\n {...domProps}\n ref={ref}\n slot={props.slot || undefined}\n className={props.className ?? 'react-aria-TagGroup'}\n style={props.style}>\n <Provider\n values={[\n [LabelContext, {...labelProps, elementType: 'span', ref: labelRef}],\n [TagListContext, {...gridProps, ref: tagListRef}],\n [ListStateContext, filteredState],\n [TextContext, {\n slots: {\n description: descriptionProps,\n errorMessage: errorMessageProps\n }\n }]\n ]}>\n {props.children}\n </Provider>\n </div>\n );\n}\n\n/**\n * A tag list is a container for tags within a TagGroup.\n */\nexport const TagList = /*#__PURE__*/ (forwardRef as forwardRefType)(function TagList<T extends object>(props: TagListProps<T>, ref: ForwardedRef<HTMLDivElement>): JSX.Element {\n let state = useContext(ListStateContext);\n return state\n ? <TagListInner props={props} forwardedRef={ref} />\n : <Collection {...props} />;\n});\n\ninterface TagListInnerProps<T> {\n props: TagListProps<T>,\n forwardedRef: ForwardedRef<HTMLDivElement>\n}\n\nfunction TagListInner<T extends object>({props, forwardedRef}: TagListInnerProps<T>) {\n let state = useContext(ListStateContext)!;\n let {CollectionRoot} = useContext(CollectionRendererContext);\n let [gridProps, ref] = useContextProps({}, forwardedRef, TagListContext);\n\n let {focusProps, isFocused, isFocusVisible} = useFocusRing();\n let renderValues = {\n isEmpty: state.collection.size === 0,\n isFocused,\n isFocusVisible,\n state\n };\n let renderProps = useRenderProps({\n className: props.className,\n style: props.style,\n defaultClassName: 'react-aria-TagList',\n values: renderValues\n });\n\n let persistedKeys = usePersistedKeys(state.selectionManager.focusedKey);\n let DOMProps = filterDOMProps(props, {global: true});\n\n return (\n <div\n {...mergeProps(DOMProps, renderProps, gridProps, focusProps)}\n ref={ref}\n data-empty={state.collection.size === 0 || undefined}\n data-focused={isFocused || undefined}\n data-focus-visible={isFocusVisible || undefined}>\n {state.collection.size === 0 && props.renderEmptyState\n ? props.renderEmptyState(renderValues)\n : <CollectionRoot collection={state.collection} persistedKeys={persistedKeys} />}\n </div>\n );\n}\n\nexport interface TagRenderProps extends Omit<ItemRenderProps, 'allowsDragging' | 'isDragging' | 'isDropTarget'> {\n /**\n * Whether the tag group allows items to be removed.\n * @selector [data-allows-removing]\n */\n allowsRemoving: boolean\n}\n\nexport interface TagProps extends RenderProps<TagRenderProps>, LinkDOMProps, HoverEvents, PressEvents, Omit<GlobalDOMAttributes<HTMLDivElement>, 'onClick'> {\n /** A unique id for the tag. */\n id?: Key,\n /**\n * A string representation of the tags's contents, used for accessibility.\n * Required if children is not a plain text string.\n */\n textValue?: string,\n /** Whether the tag is disabled. */\n isDisabled?: boolean\n}\n\n/**\n * A Tag is an individual item within a TagList.\n */\nexport const Tag = /*#__PURE__*/ createLeafComponent(ItemNode, (props: TagProps, forwardedRef: ForwardedRef<HTMLDivElement>, item: Node<unknown>) => {\n let state = useContext(ListStateContext)!;\n let ref = useObjectRef<HTMLDivElement>(forwardedRef);\n let {focusProps, isFocusVisible} = useFocusRing({within: false});\n let {rowProps, gridCellProps, removeButtonProps, ...states} = useTag({item}, state, ref);\n\n let {hoverProps, isHovered} = useHover({\n isDisabled: !states.allowsSelection,\n onHoverStart: item.props.onHoverStart,\n onHoverChange: item.props.onHoverChange,\n onHoverEnd: item.props.onHoverEnd\n });\n\n let renderProps = useRenderProps({\n ...props,\n id: undefined,\n children: item.rendered,\n defaultClassName: 'react-aria-Tag',\n values: {\n ...states,\n isFocusVisible,\n isHovered,\n selectionMode: state.selectionManager.selectionMode,\n selectionBehavior: state.selectionManager.selectionBehavior\n }\n });\n\n useEffect(() => {\n if (!item.textValue && process.env.NODE_ENV !== 'production') {\n console.warn('A `textValue` prop is required for <Tag> elements with non-plain text children for accessibility.');\n }\n }, [item.textValue]);\n\n let DOMProps = filterDOMProps(props as any, {global: true});\n delete DOMProps.id;\n delete DOMProps.onClick;\n\n return (\n <div\n ref={ref}\n {...mergeProps(DOMProps, renderProps, rowProps, focusProps, hoverProps)}\n data-selected={states.isSelected || undefined}\n data-disabled={states.isDisabled || undefined}\n data-hovered={isHovered || undefined}\n data-focused={states.isFocused || undefined}\n data-focus-visible={isFocusVisible || undefined}\n data-pressed={states.isPressed || undefined}\n data-allows-removing={states.allowsRemoving || undefined}\n data-selection-mode={state.selectionManager.selectionMode === 'none' ? undefined : state.selectionManager.selectionMode}>\n <div {...gridCellProps} style={{display: 'contents'}}>\n <Provider\n values={[\n [ButtonContext, {\n slots: {\n remove: removeButtonProps\n }\n }],\n [CollectionRendererContext, DefaultCollectionRenderer]\n ]}>\n {renderProps.children}\n </Provider>\n </div>\n </div>\n );\n});\n"],"names":[],"version":3,"file":"TagGroup.module.js.map"}
|
|
1
|
+
{"mappings":"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","sources":["packages/react-aria-components/src/TagGroup.tsx"],"sourcesContent":["/*\n * Copyright 2022 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 {AriaTagGroupProps, useFocusRing, useHover, useTag, useTagGroup} from 'react-aria';\nimport {ButtonContext} from './Button';\nimport {Collection, CollectionBuilder, createLeafComponent, ItemNode} from '@react-aria/collections';\nimport {CollectionProps, CollectionRendererContext, DefaultCollectionRenderer, ItemRenderProps, usePersistedKeys} from './Collection';\nimport {ContextValue, DOMProps, Provider, RenderProps, SlotProps, StyleRenderProps, useContextProps, useRenderProps, useSlot} from './utils';\nimport {filterDOMProps, mergeProps, useObjectRef} from '@react-aria/utils';\nimport {forwardRefType, GlobalDOMAttributes, HoverEvents, Key, LinkDOMProps, PressEvents, RefObject} from '@react-types/shared';\nimport {LabelContext} from './Label';\nimport {ListState, Node, UNSTABLE_useFilteredListState, useListState} from 'react-stately';\nimport {ListStateContext} from './ListBox';\nimport React, {createContext, ForwardedRef, forwardRef, JSX, ReactNode, useContext, useEffect, useRef} from 'react';\nimport {SelectableCollectionContext, SelectableCollectionContextValue} from './RSPContexts';\nimport {SelectionIndicatorContext} from './SelectionIndicator';\nimport {SharedElementTransition} from './SharedElementTransition';\nimport {TextContext} from './Text';\n\nexport interface TagGroupProps extends Omit<AriaTagGroupProps<unknown>, 'children' | 'items' | 'label' | 'description' | 'errorMessage' | 'keyboardDelegate'>, DOMProps, SlotProps, GlobalDOMAttributes<HTMLDivElement> {}\n\nexport interface TagListRenderProps {\n /**\n * Whether the tag list has no items and should display its empty state.\n * @selector [data-empty]\n */\n isEmpty: boolean,\n /**\n * Whether the tag list is currently focused.\n * @selector [data-focused]\n */\n isFocused: boolean,\n /**\n * Whether the tag list is currently keyboard focused.\n * @selector [data-focus-visible]\n */\n isFocusVisible: boolean,\n /**\n * State of the TagGroup.\n */\n state: ListState<unknown>\n}\n\nexport interface TagListProps<T> extends Omit<CollectionProps<T>, 'disabledKeys'>, StyleRenderProps<TagListRenderProps>, GlobalDOMAttributes<HTMLDivElement> {\n /** Provides content to display when there are no items in the tag list. */\n renderEmptyState?: (props: TagListRenderProps) => ReactNode\n}\n\nexport const TagGroupContext = createContext<ContextValue<TagGroupProps, HTMLDivElement>>(null);\nexport const TagListContext = createContext<ContextValue<TagListProps<any>, HTMLDivElement>>(null);\n\n/**\n * A tag group is a focusable list of labels, categories, keywords, filters, or other items, with support for keyboard navigation, selection, and removal.\n */\nexport const TagGroup = /*#__PURE__*/ (forwardRef as forwardRefType)(function TagGroup(props: TagGroupProps, ref: ForwardedRef<HTMLDivElement>) {\n [props, ref] = useContextProps(props, ref, TagGroupContext);\n return (\n <ListStateContext.Provider value={null}>\n <CollectionBuilder content={props.children}>\n {collection => <TagGroupInner props={props} forwardedRef={ref} collection={collection} />}\n </CollectionBuilder>\n </ListStateContext.Provider>\n );\n});\n\ninterface TagGroupInnerProps<T> {\n props: TagGroupProps & SelectableCollectionContextValue<T>,\n forwardedRef: ForwardedRef<HTMLDivElement>,\n collection\n}\n\nfunction TagGroupInner<T extends object>({props, forwardedRef: ref, collection}: TagGroupInnerProps<T>) {\n let tagListRef = useRef<HTMLElement>(null);\n // Extract the user provided id so it doesn't clash with the collection id provided by Autocomplete\n let {id, ...otherProps} = props;\n [otherProps, tagListRef] = useContextProps(otherProps, tagListRef, SelectableCollectionContext);\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n let {filter, shouldUseVirtualFocus, ...DOMCollectionProps} = otherProps;\n let [labelRef, label] = useSlot(\n !props['aria-label'] && !props['aria-labelledby']\n );\n let tagGroupState = useListState({\n ...DOMCollectionProps,\n children: undefined,\n collection\n });\n\n let filteredState = UNSTABLE_useFilteredListState(tagGroupState as ListState<T>, filter);\n\n // Prevent DOM props from going to two places.\n let domProps = filterDOMProps(otherProps, {global: true});\n let domPropOverrides = Object.fromEntries(Object.entries(domProps).map(([k, val]) => [k, k === 'id' ? val : undefined]));\n let {\n gridProps,\n labelProps,\n descriptionProps,\n errorMessageProps\n } = useTagGroup({\n ...DOMCollectionProps,\n ...domPropOverrides,\n label\n }, filteredState, tagListRef);\n\n return (\n <div\n {...domProps}\n id={id}\n ref={ref}\n slot={props.slot || undefined}\n className={props.className ?? 'react-aria-TagGroup'}\n style={props.style}>\n <Provider\n values={[\n [LabelContext, {...labelProps, elementType: 'span', ref: labelRef}],\n [TagListContext, {...gridProps, ref: tagListRef as RefObject<HTMLDivElement>}],\n [ListStateContext, filteredState],\n [TextContext, {\n slots: {\n description: descriptionProps,\n errorMessage: errorMessageProps\n }\n }]\n ]}>\n {props.children}\n </Provider>\n </div>\n );\n}\n\n/**\n * A tag list is a container for tags within a TagGroup.\n */\nexport const TagList = /*#__PURE__*/ (forwardRef as forwardRefType)(function TagList<T extends object>(props: TagListProps<T>, ref: ForwardedRef<HTMLDivElement>): JSX.Element {\n let state = useContext(ListStateContext);\n return state\n ? <TagListInner props={props} forwardedRef={ref} />\n : <Collection {...props} />;\n});\n\ninterface TagListInnerProps<T> {\n props: TagListProps<T>,\n forwardedRef: ForwardedRef<HTMLDivElement>\n}\n\nfunction TagListInner<T extends object>({props, forwardedRef}: TagListInnerProps<T>) {\n let state = useContext(ListStateContext)!;\n let {CollectionRoot} = useContext(CollectionRendererContext);\n let [gridProps, ref] = useContextProps({}, forwardedRef, TagListContext);\n\n let {focusProps, isFocused, isFocusVisible} = useFocusRing();\n let renderValues = {\n isEmpty: state.collection.size === 0,\n isFocused,\n isFocusVisible,\n state\n };\n let renderProps = useRenderProps({\n className: props.className,\n style: props.style,\n defaultClassName: 'react-aria-TagList',\n values: renderValues\n });\n\n let persistedKeys = usePersistedKeys(state.selectionManager.focusedKey);\n let DOMProps = filterDOMProps(props, {global: true});\n\n return (\n <div\n {...mergeProps(DOMProps, renderProps, gridProps, focusProps)}\n ref={ref}\n data-empty={state.collection.size === 0 || undefined}\n data-focused={isFocused || undefined}\n data-focus-visible={isFocusVisible || undefined}>\n <SharedElementTransition>\n {state.collection.size === 0 && props.renderEmptyState\n ? props.renderEmptyState(renderValues)\n : <CollectionRoot collection={state.collection} persistedKeys={persistedKeys} />}\n </SharedElementTransition>\n </div>\n );\n}\n\nexport interface TagRenderProps extends Omit<ItemRenderProps, 'allowsDragging' | 'isDragging' | 'isDropTarget'> {\n /**\n * Whether the tag group allows items to be removed.\n * @selector [data-allows-removing]\n */\n allowsRemoving: boolean\n}\n\nexport interface TagProps extends RenderProps<TagRenderProps>, LinkDOMProps, HoverEvents, PressEvents, Omit<GlobalDOMAttributes<HTMLDivElement>, 'onClick'> {\n /** A unique id for the tag. */\n id?: Key,\n /**\n * A string representation of the tags's contents, used for accessibility.\n * Required if children is not a plain text string.\n */\n textValue?: string,\n /** Whether the tag is disabled. */\n isDisabled?: boolean\n}\n\n/**\n * A Tag is an individual item within a TagList.\n */\nexport const Tag = /*#__PURE__*/ createLeafComponent(ItemNode, (props: TagProps, forwardedRef: ForwardedRef<HTMLDivElement>, item: Node<unknown>) => {\n let state = useContext(ListStateContext)!;\n let ref = useObjectRef<HTMLDivElement>(forwardedRef);\n let {focusProps, isFocusVisible} = useFocusRing({within: false});\n let {rowProps, gridCellProps, removeButtonProps, ...states} = useTag({item}, state, ref);\n\n let {hoverProps, isHovered} = useHover({\n isDisabled: !states.allowsSelection,\n onHoverStart: item.props.onHoverStart,\n onHoverChange: item.props.onHoverChange,\n onHoverEnd: item.props.onHoverEnd\n });\n\n let renderProps = useRenderProps({\n ...props,\n id: undefined,\n children: item.rendered,\n defaultClassName: 'react-aria-Tag',\n values: {\n ...states,\n isFocusVisible,\n isHovered,\n selectionMode: state.selectionManager.selectionMode,\n selectionBehavior: state.selectionManager.selectionBehavior\n }\n });\n\n useEffect(() => {\n if (!item.textValue && process.env.NODE_ENV !== 'production') {\n console.warn('A `textValue` prop is required for <Tag> elements with non-plain text children for accessibility.');\n }\n }, [item.textValue]);\n\n let DOMProps = filterDOMProps(props as any, {global: true});\n delete DOMProps.id;\n delete DOMProps.onClick;\n\n return (\n <div\n ref={ref}\n {...mergeProps(DOMProps, renderProps, rowProps, focusProps, hoverProps)}\n data-selected={states.isSelected || undefined}\n data-disabled={states.isDisabled || undefined}\n data-hovered={isHovered || undefined}\n data-focused={states.isFocused || undefined}\n data-focus-visible={isFocusVisible || undefined}\n data-pressed={states.isPressed || undefined}\n data-allows-removing={states.allowsRemoving || undefined}\n data-selection-mode={state.selectionManager.selectionMode === 'none' ? undefined : state.selectionManager.selectionMode}>\n <div {...gridCellProps} style={{display: 'contents'}}>\n <Provider\n values={[\n [ButtonContext, {\n slots: {\n remove: removeButtonProps\n }\n }],\n [CollectionRendererContext, DefaultCollectionRenderer],\n [SelectionIndicatorContext, {isSelected: states.isSelected}]\n ]}>\n {renderProps.children}\n </Provider>\n </div>\n </div>\n );\n});\n"],"names":[],"version":3,"file":"TagGroup.module.js.map"}
|
package/dist/TextField.main.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
var $c5ccf687772c0422$exports = require("./utils.main.js");
|
|
2
2
|
var $846a838139f2ac6b$exports = require("./FieldError.main.js");
|
|
3
|
-
var $
|
|
3
|
+
var $525402dfec7da5bc$exports = require("./RSPContexts.main.js");
|
|
4
4
|
var $35157657e549736b$exports = require("./Form.main.js");
|
|
5
5
|
var $dcae72abc18c0045$exports = require("./Group.main.js");
|
|
6
6
|
var $1bcfcef5af644e13$exports = require("./Input.main.js");
|
|
@@ -53,7 +53,7 @@ const $3f2c5af9d7d8905b$export$2c73285ae9390cec = /*#__PURE__*/ (0, $1Ma1u$react
|
|
|
53
53
|
var _props_validationBehavior, _ref;
|
|
54
54
|
let validationBehavior = (_ref = (_props_validationBehavior = props.validationBehavior) !== null && _props_validationBehavior !== void 0 ? _props_validationBehavior : formValidationBehavior) !== null && _ref !== void 0 ? _ref : 'native';
|
|
55
55
|
let inputRef = (0, $1Ma1u$react.useRef)(null);
|
|
56
|
-
[props, inputRef] = (0, $c5ccf687772c0422$exports.useContextProps)(props, inputRef, (0, $
|
|
56
|
+
[props, inputRef] = (0, $c5ccf687772c0422$exports.useContextProps)(props, inputRef, (0, $525402dfec7da5bc$exports.FieldInputContext));
|
|
57
57
|
let [labelRef, label] = (0, $c5ccf687772c0422$exports.useSlot)(!props['aria-label'] && !props['aria-labelledby']);
|
|
58
58
|
let [inputElementType, setInputElementType] = (0, $1Ma1u$react.useState)('input');
|
|
59
59
|
let { labelProps: labelProps, inputProps: inputProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps, ...validation } = (0, $1Ma1u$reactaria.useTextField)({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;;AA6CM,MAAM,0DAAmB,CAAA,GAAA,0BAAY,EAAgD;AAKrF,MAAM,4CAAY,WAAW,GAAG,CAAA,GAAA,mDAAsB,EAAE,SAAS,UAAU,KAAqB,EAAE,GAAiC;IACxI,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAc,EAAE,OAAO,KAAK;IAC3C,IAAI,EAAC,oBAAoB,sBAAsB,EAAC,GAAG,CAAA,GAAA,2CAAgB,EAAE,CAAA,GAAA,qCAAU,MAAM,CAAC;QAC7D,2BAAA;IAAzB,IAAI,qBAAqB,CAAA,OAAA,CAAA,4BAAA,MAAM,kBAAkB,cAAxB,uCAAA,4BAA4B,oCAA5B,kBAAA,OAAsD;IAC/E,IAAI,WAAW,CAAA,GAAA,mBAAK,EAAoB;IACxC,CAAC,OAAO,SAAoB,GAAG,CAAA,GAAA,yCAAc,EAAE,OAAO,UAAU,CAAA,GAAA,2CAAgB;IAChF,IAAI,CAAC,UAAU,MAAM,GAAG,CAAA,GAAA,iCAAM,EAC5B,CAAC,KAAK,CAAC,aAAa,IAAI,CAAC,KAAK,CAAC,kBAAkB;IAEnD,IAAI,CAAC,kBAAkB,oBAAoB,GAAG,CAAA,GAAA,qBAAO,EAAE;IACvD,IAAI,cAAC,UAAU,cAAE,UAAU,oBAAE,gBAAgB,qBAAE,iBAAiB,EAAE,GAAG,YAAW,GAAG,CAAA,GAAA,6BAAW,EAAO;QACnG,GAAG,CAAA,GAAA,8CAAmB,EAAE,MAAM;0BAC9B;eACA;4BACA;IACF,GAAG;IAEH,oFAAoF;IACpF,6DAA6D;IAC7D,IAAI,qBAAqB,CAAA,GAAA,wBAAU,EAAE,CAAC;QACpC,SAAS,OAAO,GAAG;QACnB,IAAI,IACF,oBAAoB,cAAc,sBAAsB,aAAa;IAEzE,GAAG;QAAC;KAAS;IAEb,IAAI,cAAc,CAAA,GAAA,wCAAa,EAAE;QAC/B,GAAG,KAAK;QACR,QAAQ;YACN,YAAY,MAAM,UAAU,IAAI;YAChC,WAAW,WAAW,SAAS;YAC/B,YAAY,MAAM,UAAU,IAAI;YAChC,YAAY,MAAM,UAAU,IAAI;QAClC;QACA,kBAAkB;IACpB;IAEA,IAAI,WAAW,CAAA,GAAA,oCAAa,EAAE,OAAO;QAAC,QAAQ;IAAI;IAClD,OAAO,SAAS,EAAE;IAElB,qBACE,0DAAC;QACE,GAAG,QAAQ;QACX,GAAG,WAAW;QACf,KAAK;QACL,MAAM,MAAM,IAAI,IAAI;QACpB,iBAAe,MAAM,UAAU,IAAI;QACnC,gBAAc,WAAW,SAAS,IAAI;QACtC,iBAAe,MAAM,UAAU,IAAI;QACnC,iBAAe,MAAM,UAAU,IAAI;qBACnC,0DAAC,CAAA,GAAA,kCAAO;QACN,QAAQ;YACN;gBAAC,CAAA,GAAA,sCAAW;gBAAG;oBAAC,GAAG,UAAU;oBAAE,KAAK;gBAAQ;aAAE;YAC9C;gBAAC,CAAA,GAAA,sCAAW;gBAAG;oBAAC,GAAG,UAAU;oBAAE,KAAK;gBAAkB;aAAE;YACxD;gBAAC,CAAA,GAAA,yCAAc;gBAAG;oBAAC,GAAG,UAAU;oBAAE,KAAK;gBAAkB;aAAE;YAC3D;gBAAC,CAAA,GAAA,sCAAW;gBAAG;oBAAC,MAAM;oBAAgB,WAAW,WAAW,SAAS;oBAAE,YAAY,MAAM,UAAU,IAAI;gBAAK;aAAE;YAC9G;gBAAC,CAAA,GAAA,qCAAU;gBAAG;oBACZ,OAAO;wBACL,aAAa;wBACb,cAAc;oBAChB;gBACF;aAAE;YACF;gBAAC,CAAA,GAAA,2CAAgB;gBAAG;aAAW;SAChC;OACA,YAAY,QAAQ;AAI7B","sources":["packages/react-aria-components/src/TextField.tsx"],"sourcesContent":["/*\n * Copyright 2022 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 {AriaTextFieldProps, useTextField} from 'react-aria';\nimport {ContextValue, DOMProps, Provider, RACValidation, removeDataAttributes, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot, useSlottedContext} from './utils';\nimport {createHideableComponent} from '@react-aria/collections';\nimport {FieldErrorContext} from './FieldError';\nimport {FieldInputContext} from './
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;;AA6CM,MAAM,0DAAmB,CAAA,GAAA,0BAAY,EAAgD;AAKrF,MAAM,4CAAY,WAAW,GAAG,CAAA,GAAA,mDAAsB,EAAE,SAAS,UAAU,KAAqB,EAAE,GAAiC;IACxI,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAc,EAAE,OAAO,KAAK;IAC3C,IAAI,EAAC,oBAAoB,sBAAsB,EAAC,GAAG,CAAA,GAAA,2CAAgB,EAAE,CAAA,GAAA,qCAAU,MAAM,CAAC;QAC7D,2BAAA;IAAzB,IAAI,qBAAqB,CAAA,OAAA,CAAA,4BAAA,MAAM,kBAAkB,cAAxB,uCAAA,4BAA4B,oCAA5B,kBAAA,OAAsD;IAC/E,IAAI,WAAW,CAAA,GAAA,mBAAK,EAAoB;IACxC,CAAC,OAAO,SAAoB,GAAG,CAAA,GAAA,yCAAc,EAAE,OAAO,UAAU,CAAA,GAAA,2CAAgB;IAChF,IAAI,CAAC,UAAU,MAAM,GAAG,CAAA,GAAA,iCAAM,EAC5B,CAAC,KAAK,CAAC,aAAa,IAAI,CAAC,KAAK,CAAC,kBAAkB;IAEnD,IAAI,CAAC,kBAAkB,oBAAoB,GAAG,CAAA,GAAA,qBAAO,EAAE;IACvD,IAAI,cAAC,UAAU,cAAE,UAAU,oBAAE,gBAAgB,qBAAE,iBAAiB,EAAE,GAAG,YAAW,GAAG,CAAA,GAAA,6BAAW,EAAO;QACnG,GAAG,CAAA,GAAA,8CAAmB,EAAE,MAAM;0BAC9B;eACA;4BACA;IACF,GAAG;IAEH,oFAAoF;IACpF,6DAA6D;IAC7D,IAAI,qBAAqB,CAAA,GAAA,wBAAU,EAAE,CAAC;QACpC,SAAS,OAAO,GAAG;QACnB,IAAI,IACF,oBAAoB,cAAc,sBAAsB,aAAa;IAEzE,GAAG;QAAC;KAAS;IAEb,IAAI,cAAc,CAAA,GAAA,wCAAa,EAAE;QAC/B,GAAG,KAAK;QACR,QAAQ;YACN,YAAY,MAAM,UAAU,IAAI;YAChC,WAAW,WAAW,SAAS;YAC/B,YAAY,MAAM,UAAU,IAAI;YAChC,YAAY,MAAM,UAAU,IAAI;QAClC;QACA,kBAAkB;IACpB;IAEA,IAAI,WAAW,CAAA,GAAA,oCAAa,EAAE,OAAO;QAAC,QAAQ;IAAI;IAClD,OAAO,SAAS,EAAE;IAElB,qBACE,0DAAC;QACE,GAAG,QAAQ;QACX,GAAG,WAAW;QACf,KAAK;QACL,MAAM,MAAM,IAAI,IAAI;QACpB,iBAAe,MAAM,UAAU,IAAI;QACnC,gBAAc,WAAW,SAAS,IAAI;QACtC,iBAAe,MAAM,UAAU,IAAI;QACnC,iBAAe,MAAM,UAAU,IAAI;qBACnC,0DAAC,CAAA,GAAA,kCAAO;QACN,QAAQ;YACN;gBAAC,CAAA,GAAA,sCAAW;gBAAG;oBAAC,GAAG,UAAU;oBAAE,KAAK;gBAAQ;aAAE;YAC9C;gBAAC,CAAA,GAAA,sCAAW;gBAAG;oBAAC,GAAG,UAAU;oBAAE,KAAK;gBAAkB;aAAE;YACxD;gBAAC,CAAA,GAAA,yCAAc;gBAAG;oBAAC,GAAG,UAAU;oBAAE,KAAK;gBAAkB;aAAE;YAC3D;gBAAC,CAAA,GAAA,sCAAW;gBAAG;oBAAC,MAAM;oBAAgB,WAAW,WAAW,SAAS;oBAAE,YAAY,MAAM,UAAU,IAAI;gBAAK;aAAE;YAC9G;gBAAC,CAAA,GAAA,qCAAU;gBAAG;oBACZ,OAAO;wBACL,aAAa;wBACb,cAAc;oBAChB;gBACF;aAAE;YACF;gBAAC,CAAA,GAAA,2CAAgB;gBAAG;aAAW;SAChC;OACA,YAAY,QAAQ;AAI7B","sources":["packages/react-aria-components/src/TextField.tsx"],"sourcesContent":["/*\n * Copyright 2022 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 {AriaTextFieldProps, useTextField} from 'react-aria';\nimport {ContextValue, DOMProps, Provider, RACValidation, removeDataAttributes, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot, useSlottedContext} from './utils';\nimport {createHideableComponent} from '@react-aria/collections';\nimport {FieldErrorContext} from './FieldError';\nimport {FieldInputContext} from './RSPContexts';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {FormContext} from './Form';\nimport {GlobalDOMAttributes} from '@react-types/shared';\nimport {GroupContext} from './Group';\nimport {InputContext} from './Input';\nimport {LabelContext} from './Label';\nimport React, {createContext, ForwardedRef, useCallback, useRef, useState} from 'react';\nimport {TextAreaContext} from './TextArea';\nimport {TextContext} from './Text';\n\nexport interface TextFieldRenderProps {\n /**\n * Whether the text field is disabled.\n * @selector [data-disabled]\n */\n isDisabled: boolean,\n /**\n * Whether the value is invalid.\n * @selector [data-invalid]\n */\n isInvalid: boolean,\n /**\n * Whether the text field is read only.\n * @selector [data-readonly]\n */\n isReadOnly: boolean,\n /**\n * Whether the text field is required.\n * @selector [data-required]\n */\n isRequired: boolean\n}\n\nexport interface TextFieldProps extends Omit<AriaTextFieldProps, 'label' | 'placeholder' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, RACValidation, Omit<DOMProps, 'style' | 'className' | 'children'>, SlotProps, RenderProps<TextFieldRenderProps>, GlobalDOMAttributes<HTMLDivElement> {\n /** Whether the value is invalid. */\n isInvalid?: boolean\n}\n\nexport const TextFieldContext = createContext<ContextValue<TextFieldProps, HTMLDivElement>>(null);\n\n/**\n * A text field allows a user to enter a plain text value with a keyboard.\n */\nexport const TextField = /*#__PURE__*/ createHideableComponent(function TextField(props: TextFieldProps, ref: ForwardedRef<HTMLDivElement>) {\n [props, ref] = useContextProps(props, ref, TextFieldContext);\n let {validationBehavior: formValidationBehavior} = useSlottedContext(FormContext) || {};\n let validationBehavior = props.validationBehavior ?? formValidationBehavior ?? 'native';\n let inputRef = useRef<HTMLInputElement>(null);\n [props, inputRef as unknown] = useContextProps(props, inputRef, FieldInputContext);\n let [labelRef, label] = useSlot(\n !props['aria-label'] && !props['aria-labelledby']\n );\n let [inputElementType, setInputElementType] = useState('input');\n let {labelProps, inputProps, descriptionProps, errorMessageProps, ...validation} = useTextField<any>({\n ...removeDataAttributes(props),\n inputElementType,\n label,\n validationBehavior\n }, inputRef);\n\n // Intercept setting the input ref so we can determine what kind of element we have.\n // useTextField uses this to determine what props to include.\n let inputOrTextAreaRef = useCallback((el) => {\n inputRef.current = el;\n if (el) {\n setInputElementType(el instanceof HTMLTextAreaElement ? 'textarea' : 'input');\n }\n }, [inputRef]);\n\n let renderProps = useRenderProps({\n ...props,\n values: {\n isDisabled: props.isDisabled || false,\n isInvalid: validation.isInvalid,\n isReadOnly: props.isReadOnly || false,\n isRequired: props.isRequired || false\n },\n defaultClassName: 'react-aria-TextField'\n });\n\n let DOMProps = filterDOMProps(props, {global: true});\n delete DOMProps.id;\n\n return (\n <div\n {...DOMProps}\n {...renderProps}\n ref={ref}\n slot={props.slot || undefined}\n data-disabled={props.isDisabled || undefined}\n data-invalid={validation.isInvalid || undefined}\n data-readonly={props.isReadOnly || undefined}\n data-required={props.isRequired || undefined}>\n <Provider\n values={[\n [LabelContext, {...labelProps, ref: labelRef}],\n [InputContext, {...inputProps, ref: inputOrTextAreaRef}],\n [TextAreaContext, {...inputProps, ref: inputOrTextAreaRef}],\n [GroupContext, {role: 'presentation', isInvalid: validation.isInvalid, isDisabled: props.isDisabled || false}],\n [TextContext, {\n slots: {\n description: descriptionProps,\n errorMessage: errorMessageProps\n }\n }],\n [FieldErrorContext, validation]\n ]}>\n {renderProps.children}\n </Provider>\n </div>\n );\n});\n"],"names":[],"version":3,"file":"TextField.main.js.map"}
|