@fluentui/react-tag-picker 0.0.0-nightly-20240827-0406.1 → 0.0.0-nightly-20240828-0407.1
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 +22 -22
- package/lib/components/TagPickerControl/useTagPickerControl.js +13 -2
- package/lib/components/TagPickerControl/useTagPickerControl.js.map +1 -1
- package/lib/utils/useExpandLabel.js +100 -0
- package/lib/utils/useExpandLabel.js.map +1 -0
- package/lib-commonjs/components/TagPickerControl/useTagPickerControl.js +12 -1
- package/lib-commonjs/components/TagPickerControl/useTagPickerControl.js.map +1 -1
- package/lib-commonjs/utils/useExpandLabel.js +111 -0
- package/lib-commonjs/utils/useExpandLabel.js.map +1 -0
- package/package.json +19 -19
package/CHANGELOG.md
CHANGED
|
@@ -1,35 +1,35 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-tag-picker
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Wed, 28 Aug 2024 04:12:07 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
-
## [0.0.0-nightly-
|
|
7
|
+
## [0.0.0-nightly-20240828-0407.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-tag-picker_v0.0.0-nightly-20240828-0407.1)
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tag-picker_v9.3.1..@fluentui/react-tag-picker_v0.0.0-nightly-
|
|
9
|
+
Wed, 28 Aug 2024 04:12:07 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tag-picker_v9.3.1..@fluentui/react-tag-picker_v0.0.0-nightly-20240828-0407.1)
|
|
11
11
|
|
|
12
12
|
### Changes
|
|
13
13
|
|
|
14
14
|
- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
|
|
15
|
-
- Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-
|
|
16
|
-
- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-
|
|
17
|
-
- Bump @fluentui/react-theme to v0.0.0-nightly-
|
|
18
|
-
- Bump @fluentui/react-utilities to v0.0.0-nightly-
|
|
19
|
-
- Bump @fluentui/react-portal to v0.0.0-nightly-
|
|
20
|
-
- Bump @fluentui/react-tabster to v0.0.0-nightly-
|
|
21
|
-
- Bump @fluentui/react-aria to v0.0.0-nightly-
|
|
22
|
-
- Bump @fluentui/react-combobox to v0.0.0-nightly-
|
|
23
|
-
- Bump @fluentui/react-tags to v0.0.0-nightly-
|
|
24
|
-
- Bump @fluentui/react-context-selector to v0.0.0-nightly-
|
|
25
|
-
- Bump @fluentui/react-positioning to v0.0.0-nightly-
|
|
26
|
-
- Bump @fluentui/keyboard-keys to v0.0.0-nightly-
|
|
27
|
-
- Bump @fluentui/react-field to v0.0.0-nightly-
|
|
28
|
-
- Bump @fluentui/react-provider to v0.0.0-nightly-
|
|
29
|
-
- Bump @fluentui/react-avatar to v0.0.0-nightly-
|
|
30
|
-
- Bump @fluentui/react-button to v0.0.0-nightly-
|
|
31
|
-
- Bump @fluentui/react-conformance to v0.0.0-nightly-
|
|
32
|
-
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-
|
|
15
|
+
- Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20240828-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/6dbbecb7838a361951cb9a3a37b621ac46858be0) by beachball)
|
|
16
|
+
- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20240828-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/6dbbecb7838a361951cb9a3a37b621ac46858be0) by beachball)
|
|
17
|
+
- Bump @fluentui/react-theme to v0.0.0-nightly-20240828-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/6dbbecb7838a361951cb9a3a37b621ac46858be0) by beachball)
|
|
18
|
+
- Bump @fluentui/react-utilities to v0.0.0-nightly-20240828-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/6dbbecb7838a361951cb9a3a37b621ac46858be0) by beachball)
|
|
19
|
+
- Bump @fluentui/react-portal to v0.0.0-nightly-20240828-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/6dbbecb7838a361951cb9a3a37b621ac46858be0) by beachball)
|
|
20
|
+
- Bump @fluentui/react-tabster to v0.0.0-nightly-20240828-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/6dbbecb7838a361951cb9a3a37b621ac46858be0) by beachball)
|
|
21
|
+
- Bump @fluentui/react-aria to v0.0.0-nightly-20240828-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/6dbbecb7838a361951cb9a3a37b621ac46858be0) by beachball)
|
|
22
|
+
- Bump @fluentui/react-combobox to v0.0.0-nightly-20240828-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/6dbbecb7838a361951cb9a3a37b621ac46858be0) by beachball)
|
|
23
|
+
- Bump @fluentui/react-tags to v0.0.0-nightly-20240828-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/6dbbecb7838a361951cb9a3a37b621ac46858be0) by beachball)
|
|
24
|
+
- Bump @fluentui/react-context-selector to v0.0.0-nightly-20240828-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/6dbbecb7838a361951cb9a3a37b621ac46858be0) by beachball)
|
|
25
|
+
- Bump @fluentui/react-positioning to v0.0.0-nightly-20240828-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/6dbbecb7838a361951cb9a3a37b621ac46858be0) by beachball)
|
|
26
|
+
- Bump @fluentui/keyboard-keys to v0.0.0-nightly-20240828-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/6dbbecb7838a361951cb9a3a37b621ac46858be0) by beachball)
|
|
27
|
+
- Bump @fluentui/react-field to v0.0.0-nightly-20240828-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/6dbbecb7838a361951cb9a3a37b621ac46858be0) by beachball)
|
|
28
|
+
- Bump @fluentui/react-provider to v0.0.0-nightly-20240828-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/6dbbecb7838a361951cb9a3a37b621ac46858be0) by beachball)
|
|
29
|
+
- Bump @fluentui/react-avatar to v0.0.0-nightly-20240828-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/6dbbecb7838a361951cb9a3a37b621ac46858be0) by beachball)
|
|
30
|
+
- Bump @fluentui/react-button to v0.0.0-nightly-20240828-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/6dbbecb7838a361951cb9a3a37b621ac46858be0) by beachball)
|
|
31
|
+
- Bump @fluentui/react-conformance to v0.0.0-nightly-20240828-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/6dbbecb7838a361951cb9a3a37b621ac46858be0) by beachball)
|
|
32
|
+
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20240828-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/6dbbecb7838a361951cb9a3a37b621ac46858be0) by beachball)
|
|
33
33
|
|
|
34
34
|
## [9.3.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-tag-picker_v9.3.1)
|
|
35
35
|
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import { elementContains, getIntrinsicElementProps, slot, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';
|
|
2
|
+
import { elementContains, getIntrinsicElementProps, slot, useEventCallback, useId, useMergedRefs } from '@fluentui/react-utilities';
|
|
3
3
|
import { useTagPickerContext_unstable } from '../../contexts/TagPickerContext';
|
|
4
4
|
import { ChevronDownRegular } from '@fluentui/react-icons';
|
|
5
5
|
import { useResizeObserverRef } from '../../utils/useResizeObserverRef';
|
|
6
6
|
import { tagPickerControlAsideWidthToken } from './useTagPickerControlStyles.styles';
|
|
7
7
|
import { useFieldContext_unstable } from '@fluentui/react-field';
|
|
8
|
+
import { useExpandLabel } from '../../utils/useExpandLabel';
|
|
8
9
|
/**
|
|
9
10
|
* Create the state required to render PickerControl.
|
|
10
11
|
*
|
|
@@ -30,6 +31,7 @@ import { useFieldContext_unstable } from '@fluentui/react-field';
|
|
|
30
31
|
var _ctx_noPopover;
|
|
31
32
|
return (_ctx_noPopover = ctx.noPopover) !== null && _ctx_noPopover !== void 0 ? _ctx_noPopover : false;
|
|
32
33
|
});
|
|
34
|
+
const tagPickerId = useId('tagPicker-');
|
|
33
35
|
const innerRef = React.useRef(null);
|
|
34
36
|
const expandIconRef = React.useRef(null);
|
|
35
37
|
const asideRef = React.useRef(null);
|
|
@@ -79,7 +81,7 @@ import { useFieldContext_unstable } from '@fluentui/react-field';
|
|
|
79
81
|
(_triggerRef_current = triggerRef.current) === null || _triggerRef_current === void 0 ? void 0 : _triggerRef_current.focus();
|
|
80
82
|
}
|
|
81
83
|
});
|
|
82
|
-
|
|
84
|
+
const state = {
|
|
83
85
|
components: {
|
|
84
86
|
root: 'div',
|
|
85
87
|
expandIcon: 'span',
|
|
@@ -102,4 +104,13 @@ import { useFieldContext_unstable } from '@fluentui/react-field';
|
|
|
102
104
|
disabled,
|
|
103
105
|
invalid
|
|
104
106
|
};
|
|
107
|
+
const expandIconLabelRef = useExpandLabel({
|
|
108
|
+
tagPickerId,
|
|
109
|
+
state: state
|
|
110
|
+
});
|
|
111
|
+
const expandIconLabelMergeRef = useMergedRefs(expandIcon === null || expandIcon === void 0 ? void 0 : expandIcon.ref, expandIconLabelRef);
|
|
112
|
+
if (state.expandIcon) {
|
|
113
|
+
state.expandIcon.ref = expandIconLabelMergeRef;
|
|
114
|
+
}
|
|
115
|
+
return state;
|
|
105
116
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useTagPickerControl.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n ExtractSlotProps,\n Slot,\n elementContains,\n getIntrinsicElementProps,\n slot,\n useEventCallback,\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';\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 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
|
|
1
|
+
{"version":3,"sources":["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","undefined","Boolean","mergedAsideRefs","handleMouseDown","event","isDefaultPrevented","target","preventDefault","focus","state","components","root","always","onMouseDown","expandIconLabelRef","expandIconLabelMergeRef"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAGEC,eAAe,EACfC,wBAAwB,EACxBC,IAAI,EACJC,gBAAgB,EAChBC,KAAK,EACLC,aAAa,QACR,4BAA4B;AAEnC,SAASC,4BAA4B,QAAQ,kCAAkC;AAC/E,SAASC,kBAAkB,QAAQ,wBAAwB;AAC3D,SAASC,oBAAoB,QAAQ,mCAAmC;AACxE,SAASC,+BAA+B,QAAQ,qCAAqC;AACrF,SAASC,wBAAwB,QAAQ,wBAAwB;AACjE,SAASC,cAAc,QAAQ,6BAA6B;AAE5D;;;;;;;;CAQC,GACD,OAAO,MAAMC,+BAA+B,CAC1CC,OACAC;QAYgBJ;IAVhB,MAAMK,YAAYT,6BAA6BU,CAAAA,MAAOA,IAAID,SAAS;IACnE,MAAME,aAAaX,6BAA6BU,CAAAA,MAAOA,IAAIC,UAAU;IACrE,MAAMC,oBAAoBZ,6BAA6BU,CAAAA,MAAOA,IAAIE,iBAAiB;IACnF,MAAMC,OAAOb,6BAA6BU,CAAAA,MAAOA,IAAIG,IAAI;IACzD,MAAMC,YAAYd,6BAA6BU,CAAAA,MAAOA,IAAII,SAAS;IACnE,MAAMC,UAAUf,6BAA6BU,CAAAA,MAAOA,IAAIK,OAAO;IAC/D,MAAMC,0BAA0BhB,6BAA6BU,CAAAA,MAAOA,IAAIO,kBAAkB;IAC1F,MAAMC,OAAOlB,6BAA6BU,CAAAA,MAAOA,IAAIQ,IAAI;IACzD,MAAMC,aAAanB,6BAA6BU,CAAAA,MAAOA,IAAIS,UAAU;IACrE,MAAMC,WAAWpB,6BAA6BU,CAAAA,MAAOA,IAAIU,QAAQ;IACjE,MAAMC,UAAUjB,EAAAA,4BAAAA,wCAAAA,gDAAAA,0BAA4BkB,eAAe,MAAK;IAChE,MAAMC,YAAYvB,6BAA6BU,CAAAA;YAAOA;eAAAA,CAAAA,iBAAAA,IAAIa,SAAS,cAAbb,4BAAAA,iBAAiB;IAAI;IAE3E,MAAMc,cAAc1B,MAAM;IAE1B,MAAM2B,WAAWhC,MAAMiC,MAAM,CAAiB;IAC9C,MAAMC,gBAAgBlC,MAAMiC,MAAM,CAAkB;IACpD,MAAME,WAAWnC,MAAMiC,MAAM,CAAkB;IAE/C,MAAMG,kBAAkBjC,KAAKkC,QAAQ,CAACvB,MAAMsB,eAAe,EAAE;QAC3DE,aAAa;IACf;IACA,MAAMd,qBAAqBlB,cAAciB,yBAAyBa,4BAAAA,sCAAAA,gBAAiBrB,GAAG;IACtF,IAAIqB,iBAAiB;QACnBA,gBAAgBrB,GAAG,GAAGS;IACxB;IAEA,MAAMe,aAAapC,KAAKkC,QAAQ,CAACvB,MAAMyB,UAAU,EAAE;QACjDC,iBAAiB,CAACV;QAClBW,cAAc;YACZ,iBAAiBrB;YACjBsB,wBAAU,oBAAClC;YACXmC,MAAM;QACR;QACAL,aAAa;IACf;IAEA,MAAMM,qBAAqBtC,cAAciC,uBAAAA,iCAAAA,WAAYxB,GAAG,EAAEmB;IAC1D,IAAIK,YAAY;QACdA,WAAWxB,GAAG,GAAG6B;IACnB;IAEA,MAAMC,cAAcpC,qBAAsC,CAAC,CAACqC,MAAM;YAChEd;SAAAA,oBAAAA,SAASe,OAAO,cAAhBf,wCAAAA,kBAAkBgB,KAAK,CAACC,WAAW,CAACvC,iCAAiC,CAAC,EAAEoC,MAAMI,WAAW,CAACC,KAAK,CAAC,EAAE,CAAC;IACrG;IACA,MAAMC,QAAQjD,KAAKkC,QAAQ,CAAiCgB,WAAW;QACrEf,aAAa;QACbE,iBAAiBc,QAAQlB,mBAAmBG;QAC5CE,cAAc;YACZ1B,KAAK8B;QACP;IACF;IACA,MAAMU,kBAAkBjD,cAAc6B,UAAUiB,kBAAAA,4BAAAA,MAAOrC,GAAG;IAC1D,IAAIqC,OAAO;QACTA,MAAMrC,GAAG,GAAGwC;IACd;IAEA,MAAMC,kBAAkBpD,iBAAiB,CAACqD;QACxC,IAAIA,MAAMC,kBAAkB,IAAI;YAC9B;QACF;QACA,IACEzD,gBAAgBiC,cAAca,OAAO,EAAEU,MAAME,MAAM,KACnDF,MAAME,MAAM,KAAK3B,SAASe,OAAO,IACjCU,MAAME,MAAM,KAAKxC,kBAAkB4B,OAAO,IAC1CU,MAAME,MAAM,KAAKxB,SAASY,OAAO,EACjC;gBAGA7B;YAFAuC,MAAMG,cAAc;YACpBtC,QAAQmC,OAAO,CAACrC;aAChBF,sBAAAA,WAAW6B,OAAO,cAAlB7B,0CAAAA,oBAAoB2C,KAAK;QAC3B;IACF;IAEA,MAAMC,QAA+B;QACnCC,YAAY;YACVC,MAAM;YACNzB,YAAY;YACZH,iBAAiB;YACjBgB,OAAO;QACT;QACAY,MAAM7D,KAAK8D,MAAM,CACf/D,yBAAyB,OAAO;YAC9Ba,KAAKT,cAAcS,KAAKC,WAAWgB;YACnC,aAAaZ,QAAQ,CAACU,YAAYT,YAAYgC;YAC9C,GAAGvC,KAAK;YACRoD,aAAaV;QACf,IACA;YAAElB,aAAa;QAAM;QAEvBc;QACAb;QACAH;QACAX;QACAC;QACAC;QACAC;IACF;IAEA,MAAMuC,qBAAqBvD,eAAe;QAAEmB;QAAa+B,OAAOA;IAAmD;IAEnH,MAAMM,0BAA0B9D,cAAciC,uBAAAA,iCAAAA,WAAYxB,GAAG,EAAEoD;IAC/D,IAAIL,MAAMvB,UAAU,EAAE;QACpBuB,MAAMvB,UAAU,CAACxB,GAAG,GAAGqD;IACzB;IAEA,OAAON;AACT,EAAE"}
|
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { useTagPickerContext_unstable } from '../contexts/TagPickerContext';
|
|
3
|
+
import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
|
|
4
|
+
export function useExpandLabel(options) {
|
|
5
|
+
const { tagPickerId, state } = options;
|
|
6
|
+
const { targetDocument } = useFluent();
|
|
7
|
+
const triggerRef = useTagPickerContext_unstable((ctx)=>ctx.triggerRef);
|
|
8
|
+
const expandIconRef = React.useRef(null);
|
|
9
|
+
const hasExpandIcon = !!state.expandIcon;
|
|
10
|
+
const { 'aria-label': expandIconAriaLabel, 'aria-labelledby': expandIconAriaLabelledby, id: expandIconId } = state.expandIcon || {};
|
|
11
|
+
// If aria-label or aria-labelledby changes, recalculate aria-label and aria-labelledby for the expandIcon
|
|
12
|
+
// The expandIcon's label is calculated based on the input's label
|
|
13
|
+
// TODO: investigate ways to enforce client to provide a label rather than need to calculate it
|
|
14
|
+
const getExpandLabel = React.useCallback((ariaLabel, ariaLabelledBy)=>{
|
|
15
|
+
let expandAriaLabel = undefined;
|
|
16
|
+
let expandAriaLabelledBy = undefined;
|
|
17
|
+
let expandId = undefined;
|
|
18
|
+
if (hasExpandIcon) {
|
|
19
|
+
const hasExpandLabel = expandIconAriaLabel || expandIconAriaLabelledby;
|
|
20
|
+
// If there is no explicit aria-label, calculate default accName attribute for expandIcon button,
|
|
21
|
+
// using the following steps:
|
|
22
|
+
// 1. If there is an aria-label, it is "Open [aria-label]"
|
|
23
|
+
// 2. If there is an aria-labelledby, it is "Open [aria-labelledby target]" (using aria-labelledby + ids)
|
|
24
|
+
// 3. If there is no aria-label/ledby attr, it falls back to "Open"
|
|
25
|
+
// We can't fall back to a label/htmlFor name because of https://github.com/w3c/accname/issues/179
|
|
26
|
+
const defaultOpenString = 'Open'; // this is english-only since it is the fallback
|
|
27
|
+
if (!hasExpandLabel) {
|
|
28
|
+
if (ariaLabelledBy) {
|
|
29
|
+
expandAriaLabel = defaultOpenString;
|
|
30
|
+
expandId = expandIconId !== null && expandIconId !== void 0 ? expandIconId : `${tagPickerId}-chevron`;
|
|
31
|
+
expandAriaLabelledBy = `${expandId} ${ariaLabelledBy}`;
|
|
32
|
+
} else if (ariaLabel) {
|
|
33
|
+
expandAriaLabel = `${defaultOpenString} ${ariaLabel}`;
|
|
34
|
+
} else {
|
|
35
|
+
expandAriaLabel = defaultOpenString;
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
return {
|
|
40
|
+
expandAriaLabel,
|
|
41
|
+
expandAriaLabelledBy,
|
|
42
|
+
expandId
|
|
43
|
+
};
|
|
44
|
+
}, [
|
|
45
|
+
expandIconAriaLabel,
|
|
46
|
+
expandIconAriaLabelledby,
|
|
47
|
+
expandIconId,
|
|
48
|
+
hasExpandIcon,
|
|
49
|
+
tagPickerId
|
|
50
|
+
]);
|
|
51
|
+
const setExpandLabel = React.useCallback(()=>{
|
|
52
|
+
var _triggerRef_current, _triggerRef_current1;
|
|
53
|
+
const inputAriaLabel = (_triggerRef_current = triggerRef.current) === null || _triggerRef_current === void 0 ? void 0 : _triggerRef_current.getAttribute('aria-label');
|
|
54
|
+
const inputAriaLabelledBy = (_triggerRef_current1 = triggerRef.current) === null || _triggerRef_current1 === void 0 ? void 0 : _triggerRef_current1.getAttribute('aria-labelledby');
|
|
55
|
+
const { expandAriaLabel, expandAriaLabelledBy, expandId } = getExpandLabel(inputAriaLabel, inputAriaLabelledBy);
|
|
56
|
+
if (expandAriaLabelledBy) {
|
|
57
|
+
var _expandIconRef_current;
|
|
58
|
+
(_expandIconRef_current = expandIconRef.current) === null || _expandIconRef_current === void 0 ? void 0 : _expandIconRef_current.setAttribute('aria-labelledby', expandAriaLabelledBy);
|
|
59
|
+
}
|
|
60
|
+
if (expandAriaLabel) {
|
|
61
|
+
var _expandIconRef_current1;
|
|
62
|
+
(_expandIconRef_current1 = expandIconRef.current) === null || _expandIconRef_current1 === void 0 ? void 0 : _expandIconRef_current1.setAttribute('aria-label', expandAriaLabel);
|
|
63
|
+
}
|
|
64
|
+
if (expandId) {
|
|
65
|
+
var _expandIconRef_current2;
|
|
66
|
+
(_expandIconRef_current2 = expandIconRef.current) === null || _expandIconRef_current2 === void 0 ? void 0 : _expandIconRef_current2.setAttribute('id', expandId);
|
|
67
|
+
}
|
|
68
|
+
}, [
|
|
69
|
+
getExpandLabel,
|
|
70
|
+
triggerRef
|
|
71
|
+
]);
|
|
72
|
+
React.useEffect(()=>{
|
|
73
|
+
const hasExpandLabel = expandIconAriaLabel || expandIconAriaLabelledby;
|
|
74
|
+
if (!(targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView) || !triggerRef.current || !hasExpandIcon || hasExpandLabel) {
|
|
75
|
+
return;
|
|
76
|
+
}
|
|
77
|
+
const win = targetDocument.defaultView;
|
|
78
|
+
// On first render, calculate the default aria-label and aria-labelledby for the expandIcon
|
|
79
|
+
setExpandLabel();
|
|
80
|
+
const observer = new win.MutationObserver(setExpandLabel);
|
|
81
|
+
observer.observe(triggerRef.current, {
|
|
82
|
+
attributes: true,
|
|
83
|
+
attributeFilter: [
|
|
84
|
+
'aria-label',
|
|
85
|
+
'aria-labelledby'
|
|
86
|
+
]
|
|
87
|
+
});
|
|
88
|
+
return ()=>observer.disconnect();
|
|
89
|
+
}, [
|
|
90
|
+
getExpandLabel,
|
|
91
|
+
setExpandLabel,
|
|
92
|
+
expandIconAriaLabel,
|
|
93
|
+
expandIconAriaLabelledby,
|
|
94
|
+
hasExpandIcon,
|
|
95
|
+
tagPickerId,
|
|
96
|
+
triggerRef,
|
|
97
|
+
targetDocument
|
|
98
|
+
]);
|
|
99
|
+
return expandIconRef;
|
|
100
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["useExpandLabel.ts"],"sourcesContent":["import * as React from 'react';\nimport { useTagPickerContext_unstable } from '../contexts/TagPickerContext';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { TagPickerControlState } from '../TagPickerControl';\n\nexport function useExpandLabel(options: { tagPickerId: string; state: Pick<TagPickerControlState, 'expandIcon'> }) {\n const { tagPickerId, state } = options;\n const { targetDocument } = useFluent();\n const triggerRef = useTagPickerContext_unstable(ctx => ctx.triggerRef);\n const expandIconRef = React.useRef<HTMLSpanElement>(null);\n\n const hasExpandIcon = !!state.expandIcon;\n const {\n 'aria-label': expandIconAriaLabel,\n 'aria-labelledby': expandIconAriaLabelledby,\n id: expandIconId,\n } = state.expandIcon || {};\n\n // If aria-label or aria-labelledby changes, recalculate aria-label and aria-labelledby for the expandIcon\n // The expandIcon's label is calculated based on the input's label\n // TODO: investigate ways to enforce client to provide a label rather than need to calculate it\n const getExpandLabel = React.useCallback(\n (ariaLabel?: string | null, ariaLabelledBy?: string | null) => {\n let expandAriaLabel = undefined;\n let expandAriaLabelledBy = undefined;\n let expandId = undefined;\n\n if (hasExpandIcon) {\n const hasExpandLabel = expandIconAriaLabel || expandIconAriaLabelledby;\n // If there is no explicit aria-label, calculate default accName attribute for expandIcon button,\n // using the following steps:\n // 1. If there is an aria-label, it is \"Open [aria-label]\"\n // 2. If there is an aria-labelledby, it is \"Open [aria-labelledby target]\" (using aria-labelledby + ids)\n // 3. If there is no aria-label/ledby attr, it falls back to \"Open\"\n // We can't fall back to a label/htmlFor name because of https://github.com/w3c/accname/issues/179\n const defaultOpenString = 'Open'; // this is english-only since it is the fallback\n if (!hasExpandLabel) {\n if (ariaLabelledBy) {\n expandAriaLabel = defaultOpenString;\n expandId = expandIconId ?? `${tagPickerId}-chevron`;\n expandAriaLabelledBy = `${expandId} ${ariaLabelledBy}`;\n } else if (ariaLabel) {\n expandAriaLabel = `${defaultOpenString} ${ariaLabel}`;\n } else {\n expandAriaLabel = defaultOpenString;\n }\n }\n }\n\n return { expandAriaLabel, expandAriaLabelledBy, expandId };\n },\n [expandIconAriaLabel, expandIconAriaLabelledby, expandIconId, hasExpandIcon, tagPickerId],\n );\n\n const setExpandLabel = React.useCallback(() => {\n const inputAriaLabel = triggerRef.current?.getAttribute('aria-label');\n const inputAriaLabelledBy = triggerRef.current?.getAttribute('aria-labelledby');\n\n const { expandAriaLabel, expandAriaLabelledBy, expandId } = getExpandLabel(inputAriaLabel, inputAriaLabelledBy);\n\n if (expandAriaLabelledBy) {\n expandIconRef.current?.setAttribute('aria-labelledby', expandAriaLabelledBy);\n }\n if (expandAriaLabel) {\n expandIconRef.current?.setAttribute('aria-label', expandAriaLabel);\n }\n if (expandId) {\n expandIconRef.current?.setAttribute('id', expandId);\n }\n }, [getExpandLabel, triggerRef]);\n\n React.useEffect(() => {\n const hasExpandLabel = expandIconAriaLabel || expandIconAriaLabelledby;\n if (!targetDocument?.defaultView || !triggerRef.current || !hasExpandIcon || hasExpandLabel) {\n return;\n }\n\n const win = targetDocument.defaultView;\n\n // On first render, calculate the default aria-label and aria-labelledby for the expandIcon\n setExpandLabel();\n\n const observer = new win.MutationObserver(setExpandLabel);\n observer.observe(triggerRef.current, {\n attributes: true,\n attributeFilter: ['aria-label', 'aria-labelledby'],\n });\n\n return () => observer.disconnect();\n }, [\n getExpandLabel,\n setExpandLabel,\n expandIconAriaLabel,\n expandIconAriaLabelledby,\n hasExpandIcon,\n tagPickerId,\n triggerRef,\n targetDocument,\n ]);\n\n return expandIconRef;\n}\n"],"names":["React","useTagPickerContext_unstable","useFluent_unstable","useFluent","useExpandLabel","options","tagPickerId","state","targetDocument","triggerRef","ctx","expandIconRef","useRef","hasExpandIcon","expandIcon","expandIconAriaLabel","expandIconAriaLabelledby","id","expandIconId","getExpandLabel","useCallback","ariaLabel","ariaLabelledBy","expandAriaLabel","undefined","expandAriaLabelledBy","expandId","hasExpandLabel","defaultOpenString","setExpandLabel","inputAriaLabel","current","getAttribute","inputAriaLabelledBy","setAttribute","useEffect","defaultView","win","observer","MutationObserver","observe","attributes","attributeFilter","disconnect"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
@@ -16,6 +16,7 @@ const _reacticons = require("@fluentui/react-icons");
|
|
|
16
16
|
const _useResizeObserverRef = require("../../utils/useResizeObserverRef");
|
|
17
17
|
const _useTagPickerControlStylesstyles = require("./useTagPickerControlStyles.styles");
|
|
18
18
|
const _reactfield = require("@fluentui/react-field");
|
|
19
|
+
const _useExpandLabel = require("../../utils/useExpandLabel");
|
|
19
20
|
const useTagPickerControl_unstable = (props, ref)=>{
|
|
20
21
|
var _useFieldContext_unstable;
|
|
21
22
|
const targetRef = (0, _TagPickerContext.useTagPickerContext_unstable)((ctx)=>ctx.targetRef);
|
|
@@ -33,6 +34,7 @@ const useTagPickerControl_unstable = (props, ref)=>{
|
|
|
33
34
|
var _ctx_noPopover;
|
|
34
35
|
return (_ctx_noPopover = ctx.noPopover) !== null && _ctx_noPopover !== void 0 ? _ctx_noPopover : false;
|
|
35
36
|
});
|
|
37
|
+
const tagPickerId = (0, _reactutilities.useId)('tagPicker-');
|
|
36
38
|
const innerRef = _react.useRef(null);
|
|
37
39
|
const expandIconRef = _react.useRef(null);
|
|
38
40
|
const asideRef = _react.useRef(null);
|
|
@@ -82,7 +84,7 @@ const useTagPickerControl_unstable = (props, ref)=>{
|
|
|
82
84
|
(_triggerRef_current = triggerRef.current) === null || _triggerRef_current === void 0 ? void 0 : _triggerRef_current.focus();
|
|
83
85
|
}
|
|
84
86
|
});
|
|
85
|
-
|
|
87
|
+
const state = {
|
|
86
88
|
components: {
|
|
87
89
|
root: 'div',
|
|
88
90
|
expandIcon: 'span',
|
|
@@ -105,4 +107,13 @@ const useTagPickerControl_unstable = (props, ref)=>{
|
|
|
105
107
|
disabled,
|
|
106
108
|
invalid
|
|
107
109
|
};
|
|
110
|
+
const expandIconLabelRef = (0, _useExpandLabel.useExpandLabel)({
|
|
111
|
+
tagPickerId,
|
|
112
|
+
state: state
|
|
113
|
+
});
|
|
114
|
+
const expandIconLabelMergeRef = (0, _reactutilities.useMergedRefs)(expandIcon === null || expandIcon === void 0 ? void 0 : expandIcon.ref, expandIconLabelRef);
|
|
115
|
+
if (state.expandIcon) {
|
|
116
|
+
state.expandIcon.ref = expandIconLabelMergeRef;
|
|
117
|
+
}
|
|
118
|
+
return state;
|
|
108
119
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useTagPickerControl.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n ExtractSlotProps,\n Slot,\n elementContains,\n getIntrinsicElementProps,\n slot,\n useEventCallback,\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';\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 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
|
|
1
|
+
{"version":3,"sources":["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","undefined","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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"}
|
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", {
|
|
3
|
+
value: true
|
|
4
|
+
});
|
|
5
|
+
Object.defineProperty(exports, "useExpandLabel", {
|
|
6
|
+
enumerable: true,
|
|
7
|
+
get: function() {
|
|
8
|
+
return useExpandLabel;
|
|
9
|
+
}
|
|
10
|
+
});
|
|
11
|
+
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
12
|
+
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
13
|
+
const _TagPickerContext = require("../contexts/TagPickerContext");
|
|
14
|
+
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
|
|
15
|
+
function useExpandLabel(options) {
|
|
16
|
+
const { tagPickerId, state } = options;
|
|
17
|
+
const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
|
|
18
|
+
const triggerRef = (0, _TagPickerContext.useTagPickerContext_unstable)((ctx)=>ctx.triggerRef);
|
|
19
|
+
const expandIconRef = _react.useRef(null);
|
|
20
|
+
const hasExpandIcon = !!state.expandIcon;
|
|
21
|
+
const { 'aria-label': expandIconAriaLabel, 'aria-labelledby': expandIconAriaLabelledby, id: expandIconId } = state.expandIcon || {};
|
|
22
|
+
// If aria-label or aria-labelledby changes, recalculate aria-label and aria-labelledby for the expandIcon
|
|
23
|
+
// The expandIcon's label is calculated based on the input's label
|
|
24
|
+
// TODO: investigate ways to enforce client to provide a label rather than need to calculate it
|
|
25
|
+
const getExpandLabel = _react.useCallback((ariaLabel, ariaLabelledBy)=>{
|
|
26
|
+
let expandAriaLabel = undefined;
|
|
27
|
+
let expandAriaLabelledBy = undefined;
|
|
28
|
+
let expandId = undefined;
|
|
29
|
+
if (hasExpandIcon) {
|
|
30
|
+
const hasExpandLabel = expandIconAriaLabel || expandIconAriaLabelledby;
|
|
31
|
+
// If there is no explicit aria-label, calculate default accName attribute for expandIcon button,
|
|
32
|
+
// using the following steps:
|
|
33
|
+
// 1. If there is an aria-label, it is "Open [aria-label]"
|
|
34
|
+
// 2. If there is an aria-labelledby, it is "Open [aria-labelledby target]" (using aria-labelledby + ids)
|
|
35
|
+
// 3. If there is no aria-label/ledby attr, it falls back to "Open"
|
|
36
|
+
// We can't fall back to a label/htmlFor name because of https://github.com/w3c/accname/issues/179
|
|
37
|
+
const defaultOpenString = 'Open'; // this is english-only since it is the fallback
|
|
38
|
+
if (!hasExpandLabel) {
|
|
39
|
+
if (ariaLabelledBy) {
|
|
40
|
+
expandAriaLabel = defaultOpenString;
|
|
41
|
+
expandId = expandIconId !== null && expandIconId !== void 0 ? expandIconId : `${tagPickerId}-chevron`;
|
|
42
|
+
expandAriaLabelledBy = `${expandId} ${ariaLabelledBy}`;
|
|
43
|
+
} else if (ariaLabel) {
|
|
44
|
+
expandAriaLabel = `${defaultOpenString} ${ariaLabel}`;
|
|
45
|
+
} else {
|
|
46
|
+
expandAriaLabel = defaultOpenString;
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
return {
|
|
51
|
+
expandAriaLabel,
|
|
52
|
+
expandAriaLabelledBy,
|
|
53
|
+
expandId
|
|
54
|
+
};
|
|
55
|
+
}, [
|
|
56
|
+
expandIconAriaLabel,
|
|
57
|
+
expandIconAriaLabelledby,
|
|
58
|
+
expandIconId,
|
|
59
|
+
hasExpandIcon,
|
|
60
|
+
tagPickerId
|
|
61
|
+
]);
|
|
62
|
+
const setExpandLabel = _react.useCallback(()=>{
|
|
63
|
+
var _triggerRef_current, _triggerRef_current1;
|
|
64
|
+
const inputAriaLabel = (_triggerRef_current = triggerRef.current) === null || _triggerRef_current === void 0 ? void 0 : _triggerRef_current.getAttribute('aria-label');
|
|
65
|
+
const inputAriaLabelledBy = (_triggerRef_current1 = triggerRef.current) === null || _triggerRef_current1 === void 0 ? void 0 : _triggerRef_current1.getAttribute('aria-labelledby');
|
|
66
|
+
const { expandAriaLabel, expandAriaLabelledBy, expandId } = getExpandLabel(inputAriaLabel, inputAriaLabelledBy);
|
|
67
|
+
if (expandAriaLabelledBy) {
|
|
68
|
+
var _expandIconRef_current;
|
|
69
|
+
(_expandIconRef_current = expandIconRef.current) === null || _expandIconRef_current === void 0 ? void 0 : _expandIconRef_current.setAttribute('aria-labelledby', expandAriaLabelledBy);
|
|
70
|
+
}
|
|
71
|
+
if (expandAriaLabel) {
|
|
72
|
+
var _expandIconRef_current1;
|
|
73
|
+
(_expandIconRef_current1 = expandIconRef.current) === null || _expandIconRef_current1 === void 0 ? void 0 : _expandIconRef_current1.setAttribute('aria-label', expandAriaLabel);
|
|
74
|
+
}
|
|
75
|
+
if (expandId) {
|
|
76
|
+
var _expandIconRef_current2;
|
|
77
|
+
(_expandIconRef_current2 = expandIconRef.current) === null || _expandIconRef_current2 === void 0 ? void 0 : _expandIconRef_current2.setAttribute('id', expandId);
|
|
78
|
+
}
|
|
79
|
+
}, [
|
|
80
|
+
getExpandLabel,
|
|
81
|
+
triggerRef
|
|
82
|
+
]);
|
|
83
|
+
_react.useEffect(()=>{
|
|
84
|
+
const hasExpandLabel = expandIconAriaLabel || expandIconAriaLabelledby;
|
|
85
|
+
if (!(targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView) || !triggerRef.current || !hasExpandIcon || hasExpandLabel) {
|
|
86
|
+
return;
|
|
87
|
+
}
|
|
88
|
+
const win = targetDocument.defaultView;
|
|
89
|
+
// On first render, calculate the default aria-label and aria-labelledby for the expandIcon
|
|
90
|
+
setExpandLabel();
|
|
91
|
+
const observer = new win.MutationObserver(setExpandLabel);
|
|
92
|
+
observer.observe(triggerRef.current, {
|
|
93
|
+
attributes: true,
|
|
94
|
+
attributeFilter: [
|
|
95
|
+
'aria-label',
|
|
96
|
+
'aria-labelledby'
|
|
97
|
+
]
|
|
98
|
+
});
|
|
99
|
+
return ()=>observer.disconnect();
|
|
100
|
+
}, [
|
|
101
|
+
getExpandLabel,
|
|
102
|
+
setExpandLabel,
|
|
103
|
+
expandIconAriaLabel,
|
|
104
|
+
expandIconAriaLabelledby,
|
|
105
|
+
hasExpandIcon,
|
|
106
|
+
tagPickerId,
|
|
107
|
+
triggerRef,
|
|
108
|
+
targetDocument
|
|
109
|
+
]);
|
|
110
|
+
return expandIconRef;
|
|
111
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["useExpandLabel.ts"],"sourcesContent":["import * as React from 'react';\nimport { useTagPickerContext_unstable } from '../contexts/TagPickerContext';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { TagPickerControlState } from '../TagPickerControl';\n\nexport function useExpandLabel(options: { tagPickerId: string; state: Pick<TagPickerControlState, 'expandIcon'> }) {\n const { tagPickerId, state } = options;\n const { targetDocument } = useFluent();\n const triggerRef = useTagPickerContext_unstable(ctx => ctx.triggerRef);\n const expandIconRef = React.useRef<HTMLSpanElement>(null);\n\n const hasExpandIcon = !!state.expandIcon;\n const {\n 'aria-label': expandIconAriaLabel,\n 'aria-labelledby': expandIconAriaLabelledby,\n id: expandIconId,\n } = state.expandIcon || {};\n\n // If aria-label or aria-labelledby changes, recalculate aria-label and aria-labelledby for the expandIcon\n // The expandIcon's label is calculated based on the input's label\n // TODO: investigate ways to enforce client to provide a label rather than need to calculate it\n const getExpandLabel = React.useCallback(\n (ariaLabel?: string | null, ariaLabelledBy?: string | null) => {\n let expandAriaLabel = undefined;\n let expandAriaLabelledBy = undefined;\n let expandId = undefined;\n\n if (hasExpandIcon) {\n const hasExpandLabel = expandIconAriaLabel || expandIconAriaLabelledby;\n // If there is no explicit aria-label, calculate default accName attribute for expandIcon button,\n // using the following steps:\n // 1. If there is an aria-label, it is \"Open [aria-label]\"\n // 2. If there is an aria-labelledby, it is \"Open [aria-labelledby target]\" (using aria-labelledby + ids)\n // 3. If there is no aria-label/ledby attr, it falls back to \"Open\"\n // We can't fall back to a label/htmlFor name because of https://github.com/w3c/accname/issues/179\n const defaultOpenString = 'Open'; // this is english-only since it is the fallback\n if (!hasExpandLabel) {\n if (ariaLabelledBy) {\n expandAriaLabel = defaultOpenString;\n expandId = expandIconId ?? `${tagPickerId}-chevron`;\n expandAriaLabelledBy = `${expandId} ${ariaLabelledBy}`;\n } else if (ariaLabel) {\n expandAriaLabel = `${defaultOpenString} ${ariaLabel}`;\n } else {\n expandAriaLabel = defaultOpenString;\n }\n }\n }\n\n return { expandAriaLabel, expandAriaLabelledBy, expandId };\n },\n [expandIconAriaLabel, expandIconAriaLabelledby, expandIconId, hasExpandIcon, tagPickerId],\n );\n\n const setExpandLabel = React.useCallback(() => {\n const inputAriaLabel = triggerRef.current?.getAttribute('aria-label');\n const inputAriaLabelledBy = triggerRef.current?.getAttribute('aria-labelledby');\n\n const { expandAriaLabel, expandAriaLabelledBy, expandId } = getExpandLabel(inputAriaLabel, inputAriaLabelledBy);\n\n if (expandAriaLabelledBy) {\n expandIconRef.current?.setAttribute('aria-labelledby', expandAriaLabelledBy);\n }\n if (expandAriaLabel) {\n expandIconRef.current?.setAttribute('aria-label', expandAriaLabel);\n }\n if (expandId) {\n expandIconRef.current?.setAttribute('id', expandId);\n }\n }, [getExpandLabel, triggerRef]);\n\n React.useEffect(() => {\n const hasExpandLabel = expandIconAriaLabel || expandIconAriaLabelledby;\n if (!targetDocument?.defaultView || !triggerRef.current || !hasExpandIcon || hasExpandLabel) {\n return;\n }\n\n const win = targetDocument.defaultView;\n\n // On first render, calculate the default aria-label and aria-labelledby for the expandIcon\n setExpandLabel();\n\n const observer = new win.MutationObserver(setExpandLabel);\n observer.observe(triggerRef.current, {\n attributes: true,\n attributeFilter: ['aria-label', 'aria-labelledby'],\n });\n\n return () => observer.disconnect();\n }, [\n getExpandLabel,\n setExpandLabel,\n expandIconAriaLabel,\n expandIconAriaLabelledby,\n hasExpandIcon,\n tagPickerId,\n triggerRef,\n targetDocument,\n ]);\n\n return expandIconRef;\n}\n"],"names":["useExpandLabel","options","tagPickerId","state","targetDocument","useFluent","triggerRef","useTagPickerContext_unstable","ctx","expandIconRef","React","useRef","hasExpandIcon","expandIcon","expandIconAriaLabel","expandIconAriaLabelledby","id","expandIconId","getExpandLabel","useCallback","ariaLabel","ariaLabelledBy","expandAriaLabel","undefined","expandAriaLabelledBy","expandId","hasExpandLabel","defaultOpenString","setExpandLabel","inputAriaLabel","current","getAttribute","inputAriaLabelledBy","setAttribute","useEffect","defaultView","win","observer","MutationObserver","observe","attributes","attributeFilter","disconnect"],"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": "0.0.0-nightly-
|
|
3
|
+
"version": "0.0.0-nightly-20240828-0407.1",
|
|
4
4
|
"description": "FluentUI TagPicker component",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -31,30 +31,30 @@
|
|
|
31
31
|
"bundle-size": "monosize measure"
|
|
32
32
|
},
|
|
33
33
|
"devDependencies": {
|
|
34
|
-
"@fluentui/react-provider": "0.0.0-nightly-
|
|
35
|
-
"@fluentui/react-avatar": "0.0.0-nightly-
|
|
36
|
-
"@fluentui/react-button": "0.0.0-nightly-
|
|
34
|
+
"@fluentui/react-provider": "0.0.0-nightly-20240828-0407.1",
|
|
35
|
+
"@fluentui/react-avatar": "0.0.0-nightly-20240828-0407.1",
|
|
36
|
+
"@fluentui/react-button": "0.0.0-nightly-20240828-0407.1",
|
|
37
37
|
"@fluentui/eslint-plugin": "*",
|
|
38
|
-
"@fluentui/react-conformance": "0.0.0-nightly-
|
|
39
|
-
"@fluentui/react-conformance-griffel": "0.0.0-nightly-
|
|
38
|
+
"@fluentui/react-conformance": "0.0.0-nightly-20240828-0407.1",
|
|
39
|
+
"@fluentui/react-conformance-griffel": "0.0.0-nightly-20240828-0407.1",
|
|
40
40
|
"@fluentui/scripts-api-extractor": "*",
|
|
41
41
|
"@fluentui/scripts-tasks": "*"
|
|
42
42
|
},
|
|
43
43
|
"dependencies": {
|
|
44
|
-
"@fluentui/react-jsx-runtime": "0.0.0-nightly-
|
|
45
|
-
"@fluentui/react-shared-contexts": "0.0.0-nightly-
|
|
46
|
-
"@fluentui/react-theme": "0.0.0-nightly-
|
|
47
|
-
"@fluentui/react-utilities": "0.0.0-nightly-
|
|
48
|
-
"@fluentui/react-portal": "0.0.0-nightly-
|
|
49
|
-
"@fluentui/react-tabster": "0.0.0-nightly-
|
|
50
|
-
"@fluentui/react-aria": "0.0.0-nightly-
|
|
44
|
+
"@fluentui/react-jsx-runtime": "0.0.0-nightly-20240828-0407.1",
|
|
45
|
+
"@fluentui/react-shared-contexts": "0.0.0-nightly-20240828-0407.1",
|
|
46
|
+
"@fluentui/react-theme": "0.0.0-nightly-20240828-0407.1",
|
|
47
|
+
"@fluentui/react-utilities": "0.0.0-nightly-20240828-0407.1",
|
|
48
|
+
"@fluentui/react-portal": "0.0.0-nightly-20240828-0407.1",
|
|
49
|
+
"@fluentui/react-tabster": "0.0.0-nightly-20240828-0407.1",
|
|
50
|
+
"@fluentui/react-aria": "0.0.0-nightly-20240828-0407.1",
|
|
51
51
|
"@fluentui/react-icons": "^2.0.245",
|
|
52
|
-
"@fluentui/react-combobox": "0.0.0-nightly-
|
|
53
|
-
"@fluentui/react-tags": "0.0.0-nightly-
|
|
54
|
-
"@fluentui/react-context-selector": "0.0.0-nightly-
|
|
55
|
-
"@fluentui/react-positioning": "0.0.0-nightly-
|
|
56
|
-
"@fluentui/keyboard-keys": "0.0.0-nightly-
|
|
57
|
-
"@fluentui/react-field": "0.0.0-nightly-
|
|
52
|
+
"@fluentui/react-combobox": "0.0.0-nightly-20240828-0407.1",
|
|
53
|
+
"@fluentui/react-tags": "0.0.0-nightly-20240828-0407.1",
|
|
54
|
+
"@fluentui/react-context-selector": "0.0.0-nightly-20240828-0407.1",
|
|
55
|
+
"@fluentui/react-positioning": "0.0.0-nightly-20240828-0407.1",
|
|
56
|
+
"@fluentui/keyboard-keys": "0.0.0-nightly-20240828-0407.1",
|
|
57
|
+
"@fluentui/react-field": "0.0.0-nightly-20240828-0407.1",
|
|
58
58
|
"@griffel/react": "^1.5.22",
|
|
59
59
|
"@swc/helpers": "^0.5.1"
|
|
60
60
|
},
|