@fluentui/react-tag-picker 9.5.4 → 9.5.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/CHANGELOG.md +27 -8
  2. package/lib/components/TagPickerControl/useTagPickerControl.js +17 -2
  3. package/lib/components/TagPickerControl/useTagPickerControl.js.map +1 -1
  4. package/lib-commonjs/components/TagPickerControl/useTagPickerControl.js +17 -2
  5. package/lib-commonjs/components/TagPickerControl/useTagPickerControl.js.map +1 -1
  6. package/package.json +11 -11
package/CHANGELOG.md CHANGED
@@ -1,22 +1,41 @@
1
1
  # Change Log - @fluentui/react-tag-picker
2
2
 
3
- This log was last generated on Tue, 01 Apr 2025 14:05:35 GMT and should not be manually modified.
3
+ This log was last generated on Wed, 16 Apr 2025 19:37:13 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.5.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-tag-picker_v9.5.5)
8
+
9
+ Wed, 16 Apr 2025 19:37:13 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tag-picker_v9.5.4..@fluentui/react-tag-picker_v9.5.5)
11
+
12
+ ### Patches
13
+
14
+ - fix: avoid "ResizeObserver loop limit exceeded" being thrown ([PR #34139](https://github.com/microsoft/fluentui/pull/34139) by olfedias@microsoft.com)
15
+ - Bump @fluentui/react-jsx-runtime to v9.0.54 ([PR #34166](https://github.com/microsoft/fluentui/pull/34166) by beachball)
16
+ - Bump @fluentui/react-utilities to v9.19.0 ([PR #34166](https://github.com/microsoft/fluentui/pull/34166) by beachball)
17
+ - Bump @fluentui/react-portal to v9.5.5 ([PR #34166](https://github.com/microsoft/fluentui/pull/34166) by beachball)
18
+ - Bump @fluentui/react-tabster to v9.24.5 ([PR #34166](https://github.com/microsoft/fluentui/pull/34166) by beachball)
19
+ - Bump @fluentui/react-aria to v9.14.5 ([PR #34166](https://github.com/microsoft/fluentui/pull/34166) by beachball)
20
+ - Bump @fluentui/react-combobox to v9.14.5 ([PR #34166](https://github.com/microsoft/fluentui/pull/34166) by beachball)
21
+ - Bump @fluentui/react-tags to v9.5.3 ([PR #34166](https://github.com/microsoft/fluentui/pull/34166) by beachball)
22
+ - Bump @fluentui/react-context-selector to v9.1.76 ([PR #34166](https://github.com/microsoft/fluentui/pull/34166) by beachball)
23
+ - Bump @fluentui/react-positioning to v9.16.7 ([PR #34166](https://github.com/microsoft/fluentui/pull/34166) by beachball)
24
+ - Bump @fluentui/react-field to v9.2.5 ([PR #34166](https://github.com/microsoft/fluentui/pull/34166) by beachball)
25
+
7
26
  ## [9.5.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-tag-picker_v9.5.4)
8
27
 
9
- Tue, 01 Apr 2025 14:05:35 GMT
28
+ Tue, 01 Apr 2025 15:08:02 GMT
10
29
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tag-picker_v9.5.3..@fluentui/react-tag-picker_v9.5.4)
11
30
 
12
31
  ### Patches
13
32
 
14
- - Bump @fluentui/react-portal to v9.5.4 ([PR #34129](https://github.com/microsoft/fluentui/pull/34129) by beachball)
15
- - Bump @fluentui/react-tabster to v9.24.4 ([PR #34129](https://github.com/microsoft/fluentui/pull/34129) by beachball)
16
- - Bump @fluentui/react-aria to v9.14.4 ([PR #34129](https://github.com/microsoft/fluentui/pull/34129) by beachball)
17
- - Bump @fluentui/react-combobox to v9.14.4 ([PR #34129](https://github.com/microsoft/fluentui/pull/34129) by beachball)
18
- - Bump @fluentui/react-tags to v9.5.2 ([PR #34129](https://github.com/microsoft/fluentui/pull/34129) by beachball)
19
- - Bump @fluentui/react-field to v9.2.4 ([PR #34129](https://github.com/microsoft/fluentui/pull/34129) by beachball)
33
+ - Bump @fluentui/react-portal to v9.5.4 ([PR #33909](https://github.com/microsoft/fluentui/pull/33909) by beachball)
34
+ - Bump @fluentui/react-tabster to v9.24.4 ([PR #33909](https://github.com/microsoft/fluentui/pull/33909) by beachball)
35
+ - Bump @fluentui/react-aria to v9.14.4 ([PR #33909](https://github.com/microsoft/fluentui/pull/33909) by beachball)
36
+ - Bump @fluentui/react-combobox to v9.14.4 ([PR #33909](https://github.com/microsoft/fluentui/pull/33909) by beachball)
37
+ - Bump @fluentui/react-tags to v9.5.2 ([PR #33909](https://github.com/microsoft/fluentui/pull/33909) by beachball)
38
+ - Bump @fluentui/react-field to v9.2.4 ([PR #33909](https://github.com/microsoft/fluentui/pull/33909) by beachball)
20
39
 
21
40
  ## [9.5.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-tag-picker_v9.5.3)
22
41
 
package/lib/components/TagPickerControl/useTagPickerControl.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import * as React from 'react';
2
2
  import { elementContains, getIntrinsicElementProps, slot, useEventCallback, useId, useMergedRefs } from '@fluentui/react-utilities';
3
+ import { useFluent_unstable } from '@fluentui/react-shared-contexts';
3
4
  import { useTagPickerContext_unstable } from '../../contexts/TagPickerContext';
4
5
  import { ChevronDownRegular } from '@fluentui/react-icons';
5
6
  import { useResizeObserverRef } from '../../utils/useResizeObserverRef';
@@ -31,7 +32,9 @@ import { useExpandLabel } from '../../utils/useExpandLabel';
31
32
  var _ctx_noPopover;
32
33
  return (_ctx_noPopover = ctx.noPopover) !== null && _ctx_noPopover !== void 0 ? _ctx_noPopover : false;
33
34
  });
35
+ const { targetDocument } = useFluent_unstable();
34
36
  const tagPickerId = useId('tagPicker-');
37
+ const rafIdRef = React.useRef(null);
35
38
  const innerRef = React.useRef(null);
36
39
  const expandIconRef = React.useRef(null);
37
40
  const asideRef = React.useRef(null);
@@ -57,8 +60,13 @@ import { useExpandLabel } from '../../utils/useExpandLabel';
57
60
  expandIcon.ref = expandIconMergeRef;
58
61
  }
59
62
  const observerRef = useResizeObserverRef(([entry])=>{
60
- var _innerRef_current;
61
- (_innerRef_current = innerRef.current) === null || _innerRef_current === void 0 ? void 0 : _innerRef_current.style.setProperty(tagPickerControlAsideWidthToken, `${entry.contentRect.width}px`);
63
+ const targetWindow = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView;
64
+ if (targetWindow) {
65
+ rafIdRef.current = targetWindow.requestAnimationFrame(()=>{
66
+ var _innerRef_current;
67
+ (_innerRef_current = innerRef.current) === null || _innerRef_current === void 0 ? void 0 : _innerRef_current.style.setProperty(tagPickerControlAsideWidthToken, `${entry.contentRect.width}px`);
68
+ });
69
+ }
62
70
  });
63
71
  const aside = slot.optional(undefined, {
64
72
  elementType: 'span',
@@ -113,5 +121,12 @@ import { useExpandLabel } from '../../utils/useExpandLabel';
113
121
  if (state.expandIcon) {
114
122
  state.expandIcon.ref = expandIconLabelMergeRef;
115
123
  }
124
+ React.useEffect(()=>{
125
+ if (rafIdRef.current && (targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView)) {
126
+ targetDocument.defaultView.cancelAnimationFrame(rafIdRef.current);
127
+ }
128
+ }, [
129
+ targetDocument
130
+ ]);
116
131
  return state;
117
132
  };
package/lib/components/TagPickerControl/useTagPickerControl.js.map CHANGED
@@ -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 '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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"}
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 { useFluent_unstable } from '@fluentui/react-shared-contexts';\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 { targetDocument } = useFluent_unstable();\n const tagPickerId = useId('tagPicker-');\n const rafIdRef = React.useRef<number | null>(null);\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 const targetWindow = targetDocument?.defaultView;\n\n if (targetWindow) {\n rafIdRef.current = targetWindow.requestAnimationFrame(() => {\n innerRef.current?.style.setProperty(tagPickerControlAsideWidthToken, `${entry.contentRect.width}px`);\n });\n }\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 React.useEffect(() => {\n if (rafIdRef.current && targetDocument?.defaultView) {\n targetDocument.defaultView.cancelAnimationFrame(rafIdRef.current);\n }\n }, [targetDocument]);\n\n return state;\n};\n"],"names":["React","elementContains","getIntrinsicElementProps","slot","useEventCallback","useId","useMergedRefs","useFluent_unstable","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","targetDocument","tagPickerId","rafIdRef","useRef","innerRef","expandIconRef","asideRef","secondaryAction","optional","elementType","expandIcon","renderByDefault","defaultProps","undefined","children","role","expandIconMergeRef","observerRef","entry","targetWindow","defaultView","current","requestAnimationFrame","style","setProperty","contentRect","width","aside","Boolean","mergedAsideRefs","handleMouseDown","event","isDefaultPrevented","target","preventDefault","focus","state","components","root","always","onMouseDown","expandIconLabelRef","expandIconLabelMergeRef","useEffect","cancelAnimationFrame"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
package/lib-commonjs/components/TagPickerControl/useTagPickerControl.js CHANGED
@@ -11,6 +11,7 @@ Object.defineProperty(exports, "useTagPickerControl_unstable", {
11
11
  const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
12
12
  const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
13
13
  const _reactutilities = require("@fluentui/react-utilities");
14
+ const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
14
15
  const _TagPickerContext = require("../../contexts/TagPickerContext");
15
16
  const _reacticons = require("@fluentui/react-icons");
16
17
  const _useResizeObserverRef = require("../../utils/useResizeObserverRef");
@@ -34,7 +35,9 @@ const useTagPickerControl_unstable = (props, ref)=>{
34
35
  var _ctx_noPopover;
35
36
  return (_ctx_noPopover = ctx.noPopover) !== null && _ctx_noPopover !== void 0 ? _ctx_noPopover : false;
36
37
  });
38
+ const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
37
39
  const tagPickerId = (0, _reactutilities.useId)('tagPicker-');
40
+ const rafIdRef = _react.useRef(null);
38
41
  const innerRef = _react.useRef(null);
39
42
  const expandIconRef = _react.useRef(null);
40
43
  const asideRef = _react.useRef(null);
@@ -60,8 +63,13 @@ const useTagPickerControl_unstable = (props, ref)=>{
60
63
  expandIcon.ref = expandIconMergeRef;
61
64
  }
62
65
  const observerRef = (0, _useResizeObserverRef.useResizeObserverRef)(([entry])=>{
63
- var _innerRef_current;
64
- (_innerRef_current = innerRef.current) === null || _innerRef_current === void 0 ? void 0 : _innerRef_current.style.setProperty(_useTagPickerControlStylesstyles.tagPickerControlAsideWidthToken, `${entry.contentRect.width}px`);
66
+ const targetWindow = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView;
67
+ if (targetWindow) {
68
+ rafIdRef.current = targetWindow.requestAnimationFrame(()=>{
69
+ var _innerRef_current;
70
+ (_innerRef_current = innerRef.current) === null || _innerRef_current === void 0 ? void 0 : _innerRef_current.style.setProperty(_useTagPickerControlStylesstyles.tagPickerControlAsideWidthToken, `${entry.contentRect.width}px`);
71
+ });
72
+ }
65
73
  });
66
74
  const aside = _reactutilities.slot.optional(undefined, {
67
75
  elementType: 'span',
@@ -116,5 +124,12 @@ const useTagPickerControl_unstable = (props, ref)=>{
116
124
  if (state.expandIcon) {
117
125
  state.expandIcon.ref = expandIconLabelMergeRef;
118
126
  }
127
+ _react.useEffect(()=>{
128
+ if (rafIdRef.current && (targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView)) {
129
+ targetDocument.defaultView.cancelAnimationFrame(rafIdRef.current);
130
+ }
131
+ }, [
132
+ targetDocument
133
+ ]);
119
134
  return state;
120
135
  };
package/lib-commonjs/components/TagPickerControl/useTagPickerControl.js.map CHANGED
@@ -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 '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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"}
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 { useFluent_unstable } from '@fluentui/react-shared-contexts';\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 { targetDocument } = useFluent_unstable();\n const tagPickerId = useId('tagPicker-');\n const rafIdRef = React.useRef<number | null>(null);\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 const targetWindow = targetDocument?.defaultView;\n\n if (targetWindow) {\n rafIdRef.current = targetWindow.requestAnimationFrame(() => {\n innerRef.current?.style.setProperty(tagPickerControlAsideWidthToken, `${entry.contentRect.width}px`);\n });\n }\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 React.useEffect(() => {\n if (rafIdRef.current && targetDocument?.defaultView) {\n targetDocument.defaultView.cancelAnimationFrame(rafIdRef.current);\n }\n }, [targetDocument]);\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","targetDocument","useFluent_unstable","tagPickerId","useId","rafIdRef","React","useRef","innerRef","expandIconRef","asideRef","secondaryAction","slot","optional","elementType","useMergedRefs","expandIcon","renderByDefault","defaultProps","undefined","children","createElement","ChevronDownRegular","role","expandIconMergeRef","observerRef","useResizeObserverRef","entry","targetWindow","defaultView","current","requestAnimationFrame","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","useEffect","cancelAnimationFrame"],"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.5.4",
3
+ "version": "9.5.5",
4
4
  "description": "FluentUI TagPicker component",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -28,20 +28,20 @@
28
28
  "@fluentui/scripts-cypress": "*"
29
29
  },
30
30
  "dependencies": {
31
- "@fluentui/react-jsx-runtime": "^9.0.53",
31
+ "@fluentui/react-jsx-runtime": "^9.0.54",
32
32
  "@fluentui/react-shared-contexts": "^9.23.1",
33
33
  "@fluentui/react-theme": "^9.1.24",
34
- "@fluentui/react-utilities": "^9.18.23",
35
- "@fluentui/react-portal": "^9.5.4",
36
- "@fluentui/react-tabster": "^9.24.4",
37
- "@fluentui/react-aria": "^9.14.4",
34
+ "@fluentui/react-utilities": "^9.19.0",
35
+ "@fluentui/react-portal": "^9.5.5",
36
+ "@fluentui/react-tabster": "^9.24.5",
37
+ "@fluentui/react-aria": "^9.14.5",
38
38
  "@fluentui/react-icons": "^2.0.245",
39
- "@fluentui/react-combobox": "^9.14.4",
40
- "@fluentui/react-tags": "^9.5.2",
41
- "@fluentui/react-context-selector": "^9.1.75",
42
- "@fluentui/react-positioning": "^9.16.6",
39
+ "@fluentui/react-combobox": "^9.14.5",
40
+ "@fluentui/react-tags": "^9.5.3",
41
+ "@fluentui/react-context-selector": "^9.1.76",
42
+ "@fluentui/react-positioning": "^9.16.7",
43
43
  "@fluentui/keyboard-keys": "^9.0.8",
44
- "@fluentui/react-field": "^9.2.4",
44
+ "@fluentui/react-field": "^9.2.5",
45
45
  "@griffel/react": "^1.5.22",
46
46
  "@swc/helpers": "^0.5.1"
47
47
  },