@fluentui/react-tag-picker 9.4.0 → 9.4.2
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/CHANGELOG.md +23 -2
- package/lib/components/TagPickerControl/useTagPickerControl.js +1 -0
- package/lib/components/TagPickerControl/useTagPickerControl.js.map +1 -1
- package/lib-commonjs/components/TagPickerControl/useTagPickerControl.js +1 -0
- package/lib-commonjs/components/TagPickerControl/useTagPickerControl.js.map +1 -1
- package/package.json +5 -5
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,33 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-tag-picker
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Tue, 28 Jan 2025 21:25:19 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.4.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-tag-picker_v9.4.2)
|
|
8
|
+
|
|
9
|
+
Tue, 28 Jan 2025 21:25:19 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tag-picker_v9.4.1..@fluentui/react-tag-picker_v9.4.2)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- fix: add aria-disabled to expand button when disabled ([PR #33530](https://github.com/microsoft/fluentui/pull/33530) by sarah.higley@microsoft.com)
|
|
15
|
+
|
|
16
|
+
## [9.4.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-tag-picker_v9.4.1)
|
|
17
|
+
|
|
18
|
+
Mon, 27 Jan 2025 20:27:35 GMT
|
|
19
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tag-picker_v9.4.0..@fluentui/react-tag-picker_v9.4.1)
|
|
20
|
+
|
|
21
|
+
### Patches
|
|
22
|
+
|
|
23
|
+
- Bump @fluentui/react-combobox to v9.13.18 ([PR #33724](https://github.com/microsoft/fluentui/pull/33724) by beachball)
|
|
24
|
+
- Bump @fluentui/react-tags to v9.3.30 ([PR #33724](https://github.com/microsoft/fluentui/pull/33724) by beachball)
|
|
25
|
+
- Bump @fluentui/react-positioning to v9.16.3 ([PR #33724](https://github.com/microsoft/fluentui/pull/33724) by beachball)
|
|
26
|
+
- Bump @fluentui/react-field to v9.1.86 ([PR #33724](https://github.com/microsoft/fluentui/pull/33724) by beachball)
|
|
27
|
+
|
|
7
28
|
## [9.4.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-tag-picker_v9.4.0)
|
|
8
29
|
|
|
9
|
-
Wed, 22 Jan 2025
|
|
30
|
+
Wed, 22 Jan 2025 14:00:10 GMT
|
|
10
31
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tag-picker_v9.3.14..@fluentui/react-tag-picker_v9.4.0)
|
|
11
32
|
|
|
12
33
|
### Minor changes
|
|
@@ -46,6 +46,7 @@ import { useExpandLabel } from '../../utils/useExpandLabel';
|
|
|
46
46
|
renderByDefault: !noPopover,
|
|
47
47
|
defaultProps: {
|
|
48
48
|
'aria-expanded': open,
|
|
49
|
+
'aria-disabled': disabled ? 'true' : undefined,
|
|
49
50
|
children: /*#__PURE__*/ React.createElement(ChevronDownRegular, null),
|
|
50
51
|
role: 'button'
|
|
51
52
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/TagPickerControl/useTagPickerControl.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n ExtractSlotProps,\n Slot,\n elementContains,\n getIntrinsicElementProps,\n slot,\n useEventCallback,\n useId,\n useMergedRefs,\n} from '@fluentui/react-utilities';\nimport type { TagPickerControlProps, TagPickerControlState } from './TagPickerControl.types';\nimport { useTagPickerContext_unstable } from '../../contexts/TagPickerContext';\nimport { ChevronDownRegular } from '@fluentui/react-icons';\nimport { useResizeObserverRef } from '../../utils/useResizeObserverRef';\nimport { tagPickerControlAsideWidthToken } from './useTagPickerControlStyles.styles';\nimport { useFieldContext_unstable } from '@fluentui/react-field';\nimport { useExpandLabel } from '../../utils/useExpandLabel';\n\n/**\n * Create the state required to render PickerControl.\n *\n * The returned state can be modified with hooks such as usePickerControlStyles_unstable,\n * before being passed to renderPickerControl_unstable.\n *\n * @param props - props from this instance of PickerControl\n * @param ref - reference to root HTMLDivElement of PickerControl\n */\nexport const useTagPickerControl_unstable = (\n props: TagPickerControlProps,\n ref: React.Ref<HTMLDivElement>,\n): TagPickerControlState => {\n const targetRef = useTagPickerContext_unstable(ctx => ctx.targetRef);\n const triggerRef = useTagPickerContext_unstable(ctx => ctx.triggerRef);\n const tagPickerGroupRef = useTagPickerContext_unstable(ctx => ctx.tagPickerGroupRef);\n const open = useTagPickerContext_unstable(ctx => ctx.open);\n const popoverId = useTagPickerContext_unstable(ctx => ctx.popoverId);\n const setOpen = useTagPickerContext_unstable(ctx => ctx.setOpen);\n const secondaryInnerActionRef = useTagPickerContext_unstable(ctx => ctx.secondaryActionRef);\n const size = useTagPickerContext_unstable(ctx => ctx.size);\n const appearance = useTagPickerContext_unstable(ctx => ctx.appearance);\n const disabled = useTagPickerContext_unstable(ctx => ctx.disabled);\n const invalid = useFieldContext_unstable()?.validationState === 'error';\n const noPopover = useTagPickerContext_unstable(ctx => ctx.noPopover ?? false);\n\n const tagPickerId = useId('tagPicker-');\n\n const innerRef = React.useRef<HTMLDivElement>(null);\n const expandIconRef = React.useRef<HTMLSpanElement>(null);\n const asideRef = React.useRef<HTMLSpanElement>(null);\n\n const secondaryAction = slot.optional(props.secondaryAction, {\n elementType: 'span',\n });\n const secondaryActionRef = useMergedRefs(secondaryInnerActionRef, secondaryAction?.ref);\n if (secondaryAction) {\n secondaryAction.ref = secondaryActionRef;\n }\n\n const expandIcon = slot.optional(props.expandIcon, {\n renderByDefault: !noPopover,\n defaultProps: {\n 'aria-expanded': open,\n children: <ChevronDownRegular />,\n role: 'button',\n },\n elementType: 'span',\n });\n\n const expandIconMergeRef = useMergedRefs(expandIcon?.ref, expandIconRef);\n if (expandIcon) {\n expandIcon.ref = expandIconMergeRef;\n }\n\n const observerRef = useResizeObserverRef<HTMLSpanElement>(([entry]) => {\n innerRef.current?.style.setProperty(tagPickerControlAsideWidthToken, `${entry.contentRect.width}px`);\n });\n const aside = slot.optional<ExtractSlotProps<Slot<'span'>>>(undefined, {\n elementType: 'span',\n renderByDefault: Boolean(secondaryAction || expandIcon),\n defaultProps: {\n ref: observerRef,\n },\n });\n const mergedAsideRefs = useMergedRefs(asideRef, aside?.ref);\n if (aside) {\n aside.ref = mergedAsideRefs;\n }\n\n const handleMouseDown = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {\n if (event.isDefaultPrevented()) {\n return;\n }\n if (\n elementContains(expandIconRef.current, event.target as Node) ||\n event.target === innerRef.current ||\n event.target === tagPickerGroupRef.current ||\n event.target === asideRef.current\n ) {\n event.preventDefault();\n setOpen(event, !open);\n triggerRef.current?.focus();\n }\n });\n\n const state: TagPickerControlState = {\n components: {\n root: 'div',\n expandIcon: 'span',\n secondaryAction: 'span',\n aside: 'span',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref: useMergedRefs(ref, targetRef, innerRef),\n 'aria-owns': open && !noPopover ? popoverId : undefined,\n ...props,\n onMouseDown: handleMouseDown,\n }),\n { elementType: 'div' },\n ),\n aside,\n expandIcon,\n secondaryAction,\n size,\n appearance,\n disabled,\n invalid,\n };\n\n const expandIconLabelRef = useExpandLabel({ tagPickerId, state: state as Pick<TagPickerControlState, 'expandIcon'> });\n\n const expandIconLabelMergeRef = useMergedRefs(expandIcon?.ref, expandIconLabelRef);\n if (state.expandIcon) {\n state.expandIcon.ref = expandIconLabelMergeRef;\n }\n\n return state;\n};\n"],"names":["React","elementContains","getIntrinsicElementProps","slot","useEventCallback","useId","useMergedRefs","useTagPickerContext_unstable","ChevronDownRegular","useResizeObserverRef","tagPickerControlAsideWidthToken","useFieldContext_unstable","useExpandLabel","useTagPickerControl_unstable","props","ref","targetRef","ctx","triggerRef","tagPickerGroupRef","open","popoverId","setOpen","secondaryInnerActionRef","secondaryActionRef","size","appearance","disabled","invalid","validationState","noPopover","tagPickerId","innerRef","useRef","expandIconRef","asideRef","secondaryAction","optional","elementType","expandIcon","renderByDefault","defaultProps","children","role","expandIconMergeRef","observerRef","entry","current","style","setProperty","contentRect","width","aside","
|
|
1
|
+
{"version":3,"sources":["../src/components/TagPickerControl/useTagPickerControl.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n ExtractSlotProps,\n Slot,\n elementContains,\n getIntrinsicElementProps,\n slot,\n useEventCallback,\n useId,\n useMergedRefs,\n} from '@fluentui/react-utilities';\nimport type { TagPickerControlProps, TagPickerControlState } from './TagPickerControl.types';\nimport { useTagPickerContext_unstable } from '../../contexts/TagPickerContext';\nimport { ChevronDownRegular } from '@fluentui/react-icons';\nimport { useResizeObserverRef } from '../../utils/useResizeObserverRef';\nimport { tagPickerControlAsideWidthToken } from './useTagPickerControlStyles.styles';\nimport { useFieldContext_unstable } from '@fluentui/react-field';\nimport { useExpandLabel } from '../../utils/useExpandLabel';\n\n/**\n * Create the state required to render PickerControl.\n *\n * The returned state can be modified with hooks such as usePickerControlStyles_unstable,\n * before being passed to renderPickerControl_unstable.\n *\n * @param props - props from this instance of PickerControl\n * @param ref - reference to root HTMLDivElement of PickerControl\n */\nexport const useTagPickerControl_unstable = (\n props: TagPickerControlProps,\n ref: React.Ref<HTMLDivElement>,\n): TagPickerControlState => {\n const targetRef = useTagPickerContext_unstable(ctx => ctx.targetRef);\n const triggerRef = useTagPickerContext_unstable(ctx => ctx.triggerRef);\n const tagPickerGroupRef = useTagPickerContext_unstable(ctx => ctx.tagPickerGroupRef);\n const open = useTagPickerContext_unstable(ctx => ctx.open);\n const popoverId = useTagPickerContext_unstable(ctx => ctx.popoverId);\n const setOpen = useTagPickerContext_unstable(ctx => ctx.setOpen);\n const secondaryInnerActionRef = useTagPickerContext_unstable(ctx => ctx.secondaryActionRef);\n const size = useTagPickerContext_unstable(ctx => ctx.size);\n const appearance = useTagPickerContext_unstable(ctx => ctx.appearance);\n const disabled = useTagPickerContext_unstable(ctx => ctx.disabled);\n const invalid = useFieldContext_unstable()?.validationState === 'error';\n const noPopover = useTagPickerContext_unstable(ctx => ctx.noPopover ?? false);\n\n const tagPickerId = useId('tagPicker-');\n\n const innerRef = React.useRef<HTMLDivElement>(null);\n const expandIconRef = React.useRef<HTMLSpanElement>(null);\n const asideRef = React.useRef<HTMLSpanElement>(null);\n\n const secondaryAction = slot.optional(props.secondaryAction, {\n elementType: 'span',\n });\n const secondaryActionRef = useMergedRefs(secondaryInnerActionRef, secondaryAction?.ref);\n if (secondaryAction) {\n secondaryAction.ref = secondaryActionRef;\n }\n\n const expandIcon = slot.optional(props.expandIcon, {\n renderByDefault: !noPopover,\n defaultProps: {\n 'aria-expanded': open,\n 'aria-disabled': disabled ? 'true' : undefined,\n children: <ChevronDownRegular />,\n role: 'button',\n },\n elementType: 'span',\n });\n\n const expandIconMergeRef = useMergedRefs(expandIcon?.ref, expandIconRef);\n if (expandIcon) {\n expandIcon.ref = expandIconMergeRef;\n }\n\n const observerRef = useResizeObserverRef<HTMLSpanElement>(([entry]) => {\n innerRef.current?.style.setProperty(tagPickerControlAsideWidthToken, `${entry.contentRect.width}px`);\n });\n const aside = slot.optional<ExtractSlotProps<Slot<'span'>>>(undefined, {\n elementType: 'span',\n renderByDefault: Boolean(secondaryAction || expandIcon),\n defaultProps: {\n ref: observerRef,\n },\n });\n const mergedAsideRefs = useMergedRefs(asideRef, aside?.ref);\n if (aside) {\n aside.ref = mergedAsideRefs;\n }\n\n const handleMouseDown = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {\n if (event.isDefaultPrevented()) {\n return;\n }\n if (\n elementContains(expandIconRef.current, event.target as Node) ||\n event.target === innerRef.current ||\n event.target === tagPickerGroupRef.current ||\n event.target === asideRef.current\n ) {\n event.preventDefault();\n setOpen(event, !open);\n triggerRef.current?.focus();\n }\n });\n\n const state: TagPickerControlState = {\n components: {\n root: 'div',\n expandIcon: 'span',\n secondaryAction: 'span',\n aside: 'span',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref: useMergedRefs(ref, targetRef, innerRef),\n 'aria-owns': open && !noPopover ? popoverId : undefined,\n ...props,\n onMouseDown: handleMouseDown,\n }),\n { elementType: 'div' },\n ),\n aside,\n expandIcon,\n secondaryAction,\n size,\n appearance,\n disabled,\n invalid,\n };\n\n const expandIconLabelRef = useExpandLabel({ tagPickerId, state: state as Pick<TagPickerControlState, 'expandIcon'> });\n\n const expandIconLabelMergeRef = useMergedRefs(expandIcon?.ref, expandIconLabelRef);\n if (state.expandIcon) {\n state.expandIcon.ref = expandIconLabelMergeRef;\n }\n\n return state;\n};\n"],"names":["React","elementContains","getIntrinsicElementProps","slot","useEventCallback","useId","useMergedRefs","useTagPickerContext_unstable","ChevronDownRegular","useResizeObserverRef","tagPickerControlAsideWidthToken","useFieldContext_unstable","useExpandLabel","useTagPickerControl_unstable","props","ref","targetRef","ctx","triggerRef","tagPickerGroupRef","open","popoverId","setOpen","secondaryInnerActionRef","secondaryActionRef","size","appearance","disabled","invalid","validationState","noPopover","tagPickerId","innerRef","useRef","expandIconRef","asideRef","secondaryAction","optional","elementType","expandIcon","renderByDefault","defaultProps","undefined","children","role","expandIconMergeRef","observerRef","entry","current","style","setProperty","contentRect","width","aside","Boolean","mergedAsideRefs","handleMouseDown","event","isDefaultPrevented","target","preventDefault","focus","state","components","root","always","onMouseDown","expandIconLabelRef","expandIconLabelMergeRef"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
@@ -49,6 +49,7 @@ const useTagPickerControl_unstable = (props, ref)=>{
|
|
|
49
49
|
renderByDefault: !noPopover,
|
|
50
50
|
defaultProps: {
|
|
51
51
|
'aria-expanded': open,
|
|
52
|
+
'aria-disabled': disabled ? 'true' : undefined,
|
|
52
53
|
children: /*#__PURE__*/ _react.createElement(_reacticons.ChevronDownRegular, null),
|
|
53
54
|
role: 'button'
|
|
54
55
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/TagPickerControl/useTagPickerControl.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n ExtractSlotProps,\n Slot,\n elementContains,\n getIntrinsicElementProps,\n slot,\n useEventCallback,\n useId,\n useMergedRefs,\n} from '@fluentui/react-utilities';\nimport type { TagPickerControlProps, TagPickerControlState } from './TagPickerControl.types';\nimport { useTagPickerContext_unstable } from '../../contexts/TagPickerContext';\nimport { ChevronDownRegular } from '@fluentui/react-icons';\nimport { useResizeObserverRef } from '../../utils/useResizeObserverRef';\nimport { tagPickerControlAsideWidthToken } from './useTagPickerControlStyles.styles';\nimport { useFieldContext_unstable } from '@fluentui/react-field';\nimport { useExpandLabel } from '../../utils/useExpandLabel';\n\n/**\n * Create the state required to render PickerControl.\n *\n * The returned state can be modified with hooks such as usePickerControlStyles_unstable,\n * before being passed to renderPickerControl_unstable.\n *\n * @param props - props from this instance of PickerControl\n * @param ref - reference to root HTMLDivElement of PickerControl\n */\nexport const useTagPickerControl_unstable = (\n props: TagPickerControlProps,\n ref: React.Ref<HTMLDivElement>,\n): TagPickerControlState => {\n const targetRef = useTagPickerContext_unstable(ctx => ctx.targetRef);\n const triggerRef = useTagPickerContext_unstable(ctx => ctx.triggerRef);\n const tagPickerGroupRef = useTagPickerContext_unstable(ctx => ctx.tagPickerGroupRef);\n const open = useTagPickerContext_unstable(ctx => ctx.open);\n const popoverId = useTagPickerContext_unstable(ctx => ctx.popoverId);\n const setOpen = useTagPickerContext_unstable(ctx => ctx.setOpen);\n const secondaryInnerActionRef = useTagPickerContext_unstable(ctx => ctx.secondaryActionRef);\n const size = useTagPickerContext_unstable(ctx => ctx.size);\n const appearance = useTagPickerContext_unstable(ctx => ctx.appearance);\n const disabled = useTagPickerContext_unstable(ctx => ctx.disabled);\n const invalid = useFieldContext_unstable()?.validationState === 'error';\n const noPopover = useTagPickerContext_unstable(ctx => ctx.noPopover ?? false);\n\n const tagPickerId = useId('tagPicker-');\n\n const innerRef = React.useRef<HTMLDivElement>(null);\n const expandIconRef = React.useRef<HTMLSpanElement>(null);\n const asideRef = React.useRef<HTMLSpanElement>(null);\n\n const secondaryAction = slot.optional(props.secondaryAction, {\n elementType: 'span',\n });\n const secondaryActionRef = useMergedRefs(secondaryInnerActionRef, secondaryAction?.ref);\n if (secondaryAction) {\n secondaryAction.ref = secondaryActionRef;\n }\n\n const expandIcon = slot.optional(props.expandIcon, {\n renderByDefault: !noPopover,\n defaultProps: {\n 'aria-expanded': open,\n children: <ChevronDownRegular />,\n role: 'button',\n },\n elementType: 'span',\n });\n\n const expandIconMergeRef = useMergedRefs(expandIcon?.ref, expandIconRef);\n if (expandIcon) {\n expandIcon.ref = expandIconMergeRef;\n }\n\n const observerRef = useResizeObserverRef<HTMLSpanElement>(([entry]) => {\n innerRef.current?.style.setProperty(tagPickerControlAsideWidthToken, `${entry.contentRect.width}px`);\n });\n const aside = slot.optional<ExtractSlotProps<Slot<'span'>>>(undefined, {\n elementType: 'span',\n renderByDefault: Boolean(secondaryAction || expandIcon),\n defaultProps: {\n ref: observerRef,\n },\n });\n const mergedAsideRefs = useMergedRefs(asideRef, aside?.ref);\n if (aside) {\n aside.ref = mergedAsideRefs;\n }\n\n const handleMouseDown = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {\n if (event.isDefaultPrevented()) {\n return;\n }\n if (\n elementContains(expandIconRef.current, event.target as Node) ||\n event.target === innerRef.current ||\n event.target === tagPickerGroupRef.current ||\n event.target === asideRef.current\n ) {\n event.preventDefault();\n setOpen(event, !open);\n triggerRef.current?.focus();\n }\n });\n\n const state: TagPickerControlState = {\n components: {\n root: 'div',\n expandIcon: 'span',\n secondaryAction: 'span',\n aside: 'span',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref: useMergedRefs(ref, targetRef, innerRef),\n 'aria-owns': open && !noPopover ? popoverId : undefined,\n ...props,\n onMouseDown: handleMouseDown,\n }),\n { elementType: 'div' },\n ),\n aside,\n expandIcon,\n secondaryAction,\n size,\n appearance,\n disabled,\n invalid,\n };\n\n const expandIconLabelRef = useExpandLabel({ tagPickerId, state: state as Pick<TagPickerControlState, 'expandIcon'> });\n\n const expandIconLabelMergeRef = useMergedRefs(expandIcon?.ref, expandIconLabelRef);\n if (state.expandIcon) {\n state.expandIcon.ref = expandIconLabelMergeRef;\n }\n\n return state;\n};\n"],"names":["useTagPickerControl_unstable","props","ref","useFieldContext_unstable","targetRef","useTagPickerContext_unstable","ctx","triggerRef","tagPickerGroupRef","open","popoverId","setOpen","secondaryInnerActionRef","secondaryActionRef","size","appearance","disabled","invalid","validationState","noPopover","tagPickerId","useId","innerRef","React","useRef","expandIconRef","asideRef","secondaryAction","slot","optional","elementType","useMergedRefs","expandIcon","renderByDefault","defaultProps","children","createElement","ChevronDownRegular","role","expandIconMergeRef","observerRef","useResizeObserverRef","entry","current","style","setProperty","tagPickerControlAsideWidthToken","contentRect","width","aside","
|
|
1
|
+
{"version":3,"sources":["../src/components/TagPickerControl/useTagPickerControl.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n ExtractSlotProps,\n Slot,\n elementContains,\n getIntrinsicElementProps,\n slot,\n useEventCallback,\n useId,\n useMergedRefs,\n} from '@fluentui/react-utilities';\nimport type { TagPickerControlProps, TagPickerControlState } from './TagPickerControl.types';\nimport { useTagPickerContext_unstable } from '../../contexts/TagPickerContext';\nimport { ChevronDownRegular } from '@fluentui/react-icons';\nimport { useResizeObserverRef } from '../../utils/useResizeObserverRef';\nimport { tagPickerControlAsideWidthToken } from './useTagPickerControlStyles.styles';\nimport { useFieldContext_unstable } from '@fluentui/react-field';\nimport { useExpandLabel } from '../../utils/useExpandLabel';\n\n/**\n * Create the state required to render PickerControl.\n *\n * The returned state can be modified with hooks such as usePickerControlStyles_unstable,\n * before being passed to renderPickerControl_unstable.\n *\n * @param props - props from this instance of PickerControl\n * @param ref - reference to root HTMLDivElement of PickerControl\n */\nexport const useTagPickerControl_unstable = (\n props: TagPickerControlProps,\n ref: React.Ref<HTMLDivElement>,\n): TagPickerControlState => {\n const targetRef = useTagPickerContext_unstable(ctx => ctx.targetRef);\n const triggerRef = useTagPickerContext_unstable(ctx => ctx.triggerRef);\n const tagPickerGroupRef = useTagPickerContext_unstable(ctx => ctx.tagPickerGroupRef);\n const open = useTagPickerContext_unstable(ctx => ctx.open);\n const popoverId = useTagPickerContext_unstable(ctx => ctx.popoverId);\n const setOpen = useTagPickerContext_unstable(ctx => ctx.setOpen);\n const secondaryInnerActionRef = useTagPickerContext_unstable(ctx => ctx.secondaryActionRef);\n const size = useTagPickerContext_unstable(ctx => ctx.size);\n const appearance = useTagPickerContext_unstable(ctx => ctx.appearance);\n const disabled = useTagPickerContext_unstable(ctx => ctx.disabled);\n const invalid = useFieldContext_unstable()?.validationState === 'error';\n const noPopover = useTagPickerContext_unstable(ctx => ctx.noPopover ?? false);\n\n const tagPickerId = useId('tagPicker-');\n\n const innerRef = React.useRef<HTMLDivElement>(null);\n const expandIconRef = React.useRef<HTMLSpanElement>(null);\n const asideRef = React.useRef<HTMLSpanElement>(null);\n\n const secondaryAction = slot.optional(props.secondaryAction, {\n elementType: 'span',\n });\n const secondaryActionRef = useMergedRefs(secondaryInnerActionRef, secondaryAction?.ref);\n if (secondaryAction) {\n secondaryAction.ref = secondaryActionRef;\n }\n\n const expandIcon = slot.optional(props.expandIcon, {\n renderByDefault: !noPopover,\n defaultProps: {\n 'aria-expanded': open,\n 'aria-disabled': disabled ? 'true' : undefined,\n children: <ChevronDownRegular />,\n role: 'button',\n },\n elementType: 'span',\n });\n\n const expandIconMergeRef = useMergedRefs(expandIcon?.ref, expandIconRef);\n if (expandIcon) {\n expandIcon.ref = expandIconMergeRef;\n }\n\n const observerRef = useResizeObserverRef<HTMLSpanElement>(([entry]) => {\n innerRef.current?.style.setProperty(tagPickerControlAsideWidthToken, `${entry.contentRect.width}px`);\n });\n const aside = slot.optional<ExtractSlotProps<Slot<'span'>>>(undefined, {\n elementType: 'span',\n renderByDefault: Boolean(secondaryAction || expandIcon),\n defaultProps: {\n ref: observerRef,\n },\n });\n const mergedAsideRefs = useMergedRefs(asideRef, aside?.ref);\n if (aside) {\n aside.ref = mergedAsideRefs;\n }\n\n const handleMouseDown = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {\n if (event.isDefaultPrevented()) {\n return;\n }\n if (\n elementContains(expandIconRef.current, event.target as Node) ||\n event.target === innerRef.current ||\n event.target === tagPickerGroupRef.current ||\n event.target === asideRef.current\n ) {\n event.preventDefault();\n setOpen(event, !open);\n triggerRef.current?.focus();\n }\n });\n\n const state: TagPickerControlState = {\n components: {\n root: 'div',\n expandIcon: 'span',\n secondaryAction: 'span',\n aside: 'span',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref: useMergedRefs(ref, targetRef, innerRef),\n 'aria-owns': open && !noPopover ? popoverId : undefined,\n ...props,\n onMouseDown: handleMouseDown,\n }),\n { elementType: 'div' },\n ),\n aside,\n expandIcon,\n secondaryAction,\n size,\n appearance,\n disabled,\n invalid,\n };\n\n const expandIconLabelRef = useExpandLabel({ tagPickerId, state: state as Pick<TagPickerControlState, 'expandIcon'> });\n\n const expandIconLabelMergeRef = useMergedRefs(expandIcon?.ref, expandIconLabelRef);\n if (state.expandIcon) {\n state.expandIcon.ref = expandIconLabelMergeRef;\n }\n\n return state;\n};\n"],"names":["useTagPickerControl_unstable","props","ref","useFieldContext_unstable","targetRef","useTagPickerContext_unstable","ctx","triggerRef","tagPickerGroupRef","open","popoverId","setOpen","secondaryInnerActionRef","secondaryActionRef","size","appearance","disabled","invalid","validationState","noPopover","tagPickerId","useId","innerRef","React","useRef","expandIconRef","asideRef","secondaryAction","slot","optional","elementType","useMergedRefs","expandIcon","renderByDefault","defaultProps","undefined","children","createElement","ChevronDownRegular","role","expandIconMergeRef","observerRef","useResizeObserverRef","entry","current","style","setProperty","tagPickerControlAsideWidthToken","contentRect","width","aside","Boolean","mergedAsideRefs","handleMouseDown","useEventCallback","event","isDefaultPrevented","elementContains","target","preventDefault","focus","state","components","root","always","getIntrinsicElementProps","onMouseDown","expandIconLabelRef","useExpandLabel","expandIconLabelMergeRef"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-tag-picker",
|
|
3
|
-
"version": "9.4.
|
|
3
|
+
"version": "9.4.2",
|
|
4
4
|
"description": "FluentUI TagPicker component",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -36,12 +36,12 @@
|
|
|
36
36
|
"@fluentui/react-tabster": "^9.23.3",
|
|
37
37
|
"@fluentui/react-aria": "^9.13.14",
|
|
38
38
|
"@fluentui/react-icons": "^2.0.245",
|
|
39
|
-
"@fluentui/react-combobox": "^9.13.
|
|
40
|
-
"@fluentui/react-tags": "^9.3.
|
|
39
|
+
"@fluentui/react-combobox": "^9.13.18",
|
|
40
|
+
"@fluentui/react-tags": "^9.3.30",
|
|
41
41
|
"@fluentui/react-context-selector": "^9.1.72",
|
|
42
|
-
"@fluentui/react-positioning": "^9.16.
|
|
42
|
+
"@fluentui/react-positioning": "^9.16.3",
|
|
43
43
|
"@fluentui/keyboard-keys": "^9.0.8",
|
|
44
|
-
"@fluentui/react-field": "^9.1.
|
|
44
|
+
"@fluentui/react-field": "^9.1.86",
|
|
45
45
|
"@griffel/react": "^1.5.22",
|
|
46
46
|
"@swc/helpers": "^0.5.1"
|
|
47
47
|
},
|