@fluentui/react-tag-picker 9.4.1 → 9.4.3
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 +20 -2
- package/lib/components/TagPickerControl/useTagPickerControl.js +1 -0
- package/lib/components/TagPickerControl/useTagPickerControl.js.map +1 -1
- package/lib/components/TagPickerOption/useTagPickerOptionStyles.styles.js +15 -24
- package/lib/components/TagPickerOption/useTagPickerOptionStyles.styles.js.map +1 -1
- package/lib-commonjs/components/TagPickerControl/useTagPickerControl.js +1 -0
- package/lib-commonjs/components/TagPickerControl/useTagPickerControl.js.map +1 -1
- package/lib-commonjs/components/TagPickerOption/useTagPickerOptionStyles.styles.js +20 -30
- package/lib-commonjs/components/TagPickerOption/useTagPickerOptionStyles.styles.js.map +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,30 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-tag-picker
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Fri, 07 Feb 2025 10:40:53 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.4.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-tag-picker_v9.4.3)
|
|
8
|
+
|
|
9
|
+
Fri, 07 Feb 2025 10:40:53 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tag-picker_v9.4.2..@fluentui/react-tag-picker_v9.4.3)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- bugfix: regression from #33689 ([PR #33747](https://github.com/microsoft/fluentui/pull/33747) by bernardo.sunderhus@gmail.com)
|
|
15
|
+
|
|
16
|
+
## [9.4.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-tag-picker_v9.4.2)
|
|
17
|
+
|
|
18
|
+
Tue, 28 Jan 2025 21:26:34 GMT
|
|
19
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tag-picker_v9.4.1..@fluentui/react-tag-picker_v9.4.2)
|
|
20
|
+
|
|
21
|
+
### Patches
|
|
22
|
+
|
|
23
|
+
- fix: add aria-disabled to expand button when disabled ([PR #33530](https://github.com/microsoft/fluentui/pull/33530) by sarah.higley@microsoft.com)
|
|
24
|
+
|
|
7
25
|
## [9.4.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-tag-picker_v9.4.1)
|
|
8
26
|
|
|
9
|
-
Mon, 27 Jan 2025 20:
|
|
27
|
+
Mon, 27 Jan 2025 20:27:35 GMT
|
|
10
28
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tag-picker_v9.4.0..@fluentui/react-tag-picker_v9.4.1)
|
|
11
29
|
|
|
12
30
|
### Patches
|
|
@@ -46,6 +46,7 @@ import { useExpandLabel } from '../../utils/useExpandLabel';
|
|
|
46
46
|
renderByDefault: !noPopover,
|
|
47
47
|
defaultProps: {
|
|
48
48
|
'aria-expanded': open,
|
|
49
|
+
'aria-disabled': disabled ? 'true' : undefined,
|
|
49
50
|
children: /*#__PURE__*/ React.createElement(ChevronDownRegular, null),
|
|
50
51
|
role: 'button'
|
|
51
52
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/TagPickerControl/useTagPickerControl.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n ExtractSlotProps,\n Slot,\n elementContains,\n getIntrinsicElementProps,\n slot,\n useEventCallback,\n useId,\n useMergedRefs,\n} from '@fluentui/react-utilities';\nimport type { TagPickerControlProps, TagPickerControlState } from './TagPickerControl.types';\nimport { useTagPickerContext_unstable } from '../../contexts/TagPickerContext';\nimport { ChevronDownRegular } from '@fluentui/react-icons';\nimport { useResizeObserverRef } from '../../utils/useResizeObserverRef';\nimport { tagPickerControlAsideWidthToken } from './useTagPickerControlStyles.styles';\nimport { useFieldContext_unstable } from '@fluentui/react-field';\nimport { useExpandLabel } from '../../utils/useExpandLabel';\n\n/**\n * Create the state required to render PickerControl.\n *\n * The returned state can be modified with hooks such as usePickerControlStyles_unstable,\n * before being passed to renderPickerControl_unstable.\n *\n * @param props - props from this instance of PickerControl\n * @param ref - reference to root HTMLDivElement of PickerControl\n */\nexport const useTagPickerControl_unstable = (\n props: TagPickerControlProps,\n ref: React.Ref<HTMLDivElement>,\n): TagPickerControlState => {\n const targetRef = useTagPickerContext_unstable(ctx => ctx.targetRef);\n const triggerRef = useTagPickerContext_unstable(ctx => ctx.triggerRef);\n const tagPickerGroupRef = useTagPickerContext_unstable(ctx => ctx.tagPickerGroupRef);\n const open = useTagPickerContext_unstable(ctx => ctx.open);\n const popoverId = useTagPickerContext_unstable(ctx => ctx.popoverId);\n const setOpen = useTagPickerContext_unstable(ctx => ctx.setOpen);\n const secondaryInnerActionRef = useTagPickerContext_unstable(ctx => ctx.secondaryActionRef);\n const size = useTagPickerContext_unstable(ctx => ctx.size);\n const appearance = useTagPickerContext_unstable(ctx => ctx.appearance);\n const disabled = useTagPickerContext_unstable(ctx => ctx.disabled);\n const invalid = useFieldContext_unstable()?.validationState === 'error';\n const noPopover = useTagPickerContext_unstable(ctx => ctx.noPopover ?? false);\n\n const tagPickerId = useId('tagPicker-');\n\n const innerRef = React.useRef<HTMLDivElement>(null);\n const expandIconRef = React.useRef<HTMLSpanElement>(null);\n const asideRef = React.useRef<HTMLSpanElement>(null);\n\n const secondaryAction = slot.optional(props.secondaryAction, {\n elementType: 'span',\n });\n const secondaryActionRef = useMergedRefs(secondaryInnerActionRef, secondaryAction?.ref);\n if (secondaryAction) {\n secondaryAction.ref = secondaryActionRef;\n }\n\n const expandIcon = slot.optional(props.expandIcon, {\n renderByDefault: !noPopover,\n defaultProps: {\n 'aria-expanded': open,\n children: <ChevronDownRegular />,\n role: 'button',\n },\n elementType: 'span',\n });\n\n const expandIconMergeRef = useMergedRefs(expandIcon?.ref, expandIconRef);\n if (expandIcon) {\n expandIcon.ref = expandIconMergeRef;\n }\n\n const observerRef = useResizeObserverRef<HTMLSpanElement>(([entry]) => {\n innerRef.current?.style.setProperty(tagPickerControlAsideWidthToken, `${entry.contentRect.width}px`);\n });\n const aside = slot.optional<ExtractSlotProps<Slot<'span'>>>(undefined, {\n elementType: 'span',\n renderByDefault: Boolean(secondaryAction || expandIcon),\n defaultProps: {\n ref: observerRef,\n },\n });\n const mergedAsideRefs = useMergedRefs(asideRef, aside?.ref);\n if (aside) {\n aside.ref = mergedAsideRefs;\n }\n\n const handleMouseDown = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {\n if (event.isDefaultPrevented()) {\n return;\n }\n if (\n elementContains(expandIconRef.current, event.target as Node) ||\n event.target === innerRef.current ||\n event.target === tagPickerGroupRef.current ||\n event.target === asideRef.current\n ) {\n event.preventDefault();\n setOpen(event, !open);\n triggerRef.current?.focus();\n }\n });\n\n const state: TagPickerControlState = {\n components: {\n root: 'div',\n expandIcon: 'span',\n secondaryAction: 'span',\n aside: 'span',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref: useMergedRefs(ref, targetRef, innerRef),\n 'aria-owns': open && !noPopover ? popoverId : undefined,\n ...props,\n onMouseDown: handleMouseDown,\n }),\n { elementType: 'div' },\n ),\n aside,\n expandIcon,\n secondaryAction,\n size,\n appearance,\n disabled,\n invalid,\n };\n\n const expandIconLabelRef = useExpandLabel({ tagPickerId, state: state as Pick<TagPickerControlState, 'expandIcon'> });\n\n const expandIconLabelMergeRef = useMergedRefs(expandIcon?.ref, expandIconLabelRef);\n if (state.expandIcon) {\n state.expandIcon.ref = expandIconLabelMergeRef;\n }\n\n return state;\n};\n"],"names":["React","elementContains","getIntrinsicElementProps","slot","useEventCallback","useId","useMergedRefs","useTagPickerContext_unstable","ChevronDownRegular","useResizeObserverRef","tagPickerControlAsideWidthToken","useFieldContext_unstable","useExpandLabel","useTagPickerControl_unstable","props","ref","targetRef","ctx","triggerRef","tagPickerGroupRef","open","popoverId","setOpen","secondaryInnerActionRef","secondaryActionRef","size","appearance","disabled","invalid","validationState","noPopover","tagPickerId","innerRef","useRef","expandIconRef","asideRef","secondaryAction","optional","elementType","expandIcon","renderByDefault","defaultProps","children","role","expandIconMergeRef","observerRef","entry","current","style","setProperty","contentRect","width","aside","
|
|
1
|
+
{"version":3,"sources":["../src/components/TagPickerControl/useTagPickerControl.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n ExtractSlotProps,\n Slot,\n elementContains,\n getIntrinsicElementProps,\n slot,\n useEventCallback,\n useId,\n useMergedRefs,\n} from '@fluentui/react-utilities';\nimport type { TagPickerControlProps, TagPickerControlState } from './TagPickerControl.types';\nimport { useTagPickerContext_unstable } from '../../contexts/TagPickerContext';\nimport { ChevronDownRegular } from '@fluentui/react-icons';\nimport { useResizeObserverRef } from '../../utils/useResizeObserverRef';\nimport { tagPickerControlAsideWidthToken } from './useTagPickerControlStyles.styles';\nimport { useFieldContext_unstable } from '@fluentui/react-field';\nimport { useExpandLabel } from '../../utils/useExpandLabel';\n\n/**\n * Create the state required to render PickerControl.\n *\n * The returned state can be modified with hooks such as usePickerControlStyles_unstable,\n * before being passed to renderPickerControl_unstable.\n *\n * @param props - props from this instance of PickerControl\n * @param ref - reference to root HTMLDivElement of PickerControl\n */\nexport const useTagPickerControl_unstable = (\n props: TagPickerControlProps,\n ref: React.Ref<HTMLDivElement>,\n): TagPickerControlState => {\n const targetRef = useTagPickerContext_unstable(ctx => ctx.targetRef);\n const triggerRef = useTagPickerContext_unstable(ctx => ctx.triggerRef);\n const tagPickerGroupRef = useTagPickerContext_unstable(ctx => ctx.tagPickerGroupRef);\n const open = useTagPickerContext_unstable(ctx => ctx.open);\n const popoverId = useTagPickerContext_unstable(ctx => ctx.popoverId);\n const setOpen = useTagPickerContext_unstable(ctx => ctx.setOpen);\n const secondaryInnerActionRef = useTagPickerContext_unstable(ctx => ctx.secondaryActionRef);\n const size = useTagPickerContext_unstable(ctx => ctx.size);\n const appearance = useTagPickerContext_unstable(ctx => ctx.appearance);\n const disabled = useTagPickerContext_unstable(ctx => ctx.disabled);\n const invalid = useFieldContext_unstable()?.validationState === 'error';\n const noPopover = useTagPickerContext_unstable(ctx => ctx.noPopover ?? false);\n\n const tagPickerId = useId('tagPicker-');\n\n const innerRef = React.useRef<HTMLDivElement>(null);\n const expandIconRef = React.useRef<HTMLSpanElement>(null);\n const asideRef = React.useRef<HTMLSpanElement>(null);\n\n const secondaryAction = slot.optional(props.secondaryAction, {\n elementType: 'span',\n });\n const secondaryActionRef = useMergedRefs(secondaryInnerActionRef, secondaryAction?.ref);\n if (secondaryAction) {\n secondaryAction.ref = secondaryActionRef;\n }\n\n const expandIcon = slot.optional(props.expandIcon, {\n renderByDefault: !noPopover,\n defaultProps: {\n 'aria-expanded': open,\n 'aria-disabled': disabled ? 'true' : undefined,\n children: <ChevronDownRegular />,\n role: 'button',\n },\n elementType: 'span',\n });\n\n const expandIconMergeRef = useMergedRefs(expandIcon?.ref, expandIconRef);\n if (expandIcon) {\n expandIcon.ref = expandIconMergeRef;\n }\n\n const observerRef = useResizeObserverRef<HTMLSpanElement>(([entry]) => {\n innerRef.current?.style.setProperty(tagPickerControlAsideWidthToken, `${entry.contentRect.width}px`);\n });\n const aside = slot.optional<ExtractSlotProps<Slot<'span'>>>(undefined, {\n elementType: 'span',\n renderByDefault: Boolean(secondaryAction || expandIcon),\n defaultProps: {\n ref: observerRef,\n },\n });\n const mergedAsideRefs = useMergedRefs(asideRef, aside?.ref);\n if (aside) {\n aside.ref = mergedAsideRefs;\n }\n\n const handleMouseDown = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {\n if (event.isDefaultPrevented()) {\n return;\n }\n if (\n elementContains(expandIconRef.current, event.target as Node) ||\n event.target === innerRef.current ||\n event.target === tagPickerGroupRef.current ||\n event.target === asideRef.current\n ) {\n event.preventDefault();\n setOpen(event, !open);\n triggerRef.current?.focus();\n }\n });\n\n const state: TagPickerControlState = {\n components: {\n root: 'div',\n expandIcon: 'span',\n secondaryAction: 'span',\n aside: 'span',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref: useMergedRefs(ref, targetRef, innerRef),\n 'aria-owns': open && !noPopover ? popoverId : undefined,\n ...props,\n onMouseDown: handleMouseDown,\n }),\n { elementType: 'div' },\n ),\n aside,\n expandIcon,\n secondaryAction,\n size,\n appearance,\n disabled,\n invalid,\n };\n\n const expandIconLabelRef = useExpandLabel({ tagPickerId, state: state as Pick<TagPickerControlState, 'expandIcon'> });\n\n const expandIconLabelMergeRef = useMergedRefs(expandIcon?.ref, expandIconLabelRef);\n if (state.expandIcon) {\n state.expandIcon.ref = expandIconLabelMergeRef;\n }\n\n return state;\n};\n"],"names":["React","elementContains","getIntrinsicElementProps","slot","useEventCallback","useId","useMergedRefs","useTagPickerContext_unstable","ChevronDownRegular","useResizeObserverRef","tagPickerControlAsideWidthToken","useFieldContext_unstable","useExpandLabel","useTagPickerControl_unstable","props","ref","targetRef","ctx","triggerRef","tagPickerGroupRef","open","popoverId","setOpen","secondaryInnerActionRef","secondaryActionRef","size","appearance","disabled","invalid","validationState","noPopover","tagPickerId","innerRef","useRef","expandIconRef","asideRef","secondaryAction","optional","elementType","expandIcon","renderByDefault","defaultProps","undefined","children","role","expandIconMergeRef","observerRef","entry","current","style","setProperty","contentRect","width","aside","Boolean","mergedAsideRefs","handleMouseDown","event","isDefaultPrevented","target","preventDefault","focus","state","components","root","always","onMouseDown","expandIconLabelRef","expandIconLabelMergeRef"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { __styles, mergeClasses } from '@griffel/react';
|
|
1
|
+
import { __resetStyles, __styles, mergeClasses } from '@griffel/react';
|
|
2
2
|
import { useOptionStyles_unstable } from '@fluentui/react-combobox';
|
|
3
3
|
import { typographyStyles } from '@fluentui/react-theme';
|
|
4
4
|
export const tagPickerOptionClassNames = {
|
|
@@ -6,37 +6,28 @@ export const tagPickerOptionClassNames = {
|
|
|
6
6
|
media: 'fui-TagPickerOption__media',
|
|
7
7
|
secondaryContent: 'fui-TagPickerOption__secondaryContent'
|
|
8
8
|
};
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
*/
|
|
12
|
-
const useStyles = /*#__PURE__*/__styles({
|
|
13
|
-
root: {
|
|
14
|
-
mc9l5x: "f13qh94s",
|
|
15
|
-
Budl1dq: "fjxzuw",
|
|
16
|
-
Bt984gj: "f122n59"
|
|
17
|
-
},
|
|
9
|
+
const useRootBaseStyle = /*#__PURE__*/__resetStyles("r70qvj9", null, [".r70qvj9{display:flex;align-items:center;}"]);
|
|
10
|
+
const useRootStyles = /*#__PURE__*/__styles({
|
|
18
11
|
secondaryContent: {
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
Bahqtrf: "fk6fouc",
|
|
22
|
-
Be2twd7: "fy9rknc",
|
|
23
|
-
Bhrd7zp: "figsok6",
|
|
24
|
-
Bg96gwp: "fwrc4pm"
|
|
25
|
-
},
|
|
26
|
-
media: {
|
|
27
|
-
Ijaq50: "fldnz9j"
|
|
12
|
+
mc9l5x: "f13qh94s",
|
|
13
|
+
Budl1dq: "fjxzuw"
|
|
28
14
|
}
|
|
29
15
|
}, {
|
|
30
|
-
d: [".f13qh94s{display:grid;}", ".fjxzuw{grid-template-columns:auto 1fr;}"
|
|
16
|
+
d: [".f13qh94s{display:grid;}", ".fjxzuw{grid-template-columns:auto 1fr;}"]
|
|
31
17
|
});
|
|
18
|
+
const useSecondaryContentBaseStyle = /*#__PURE__*/__resetStyles("r131qrbm", null, [".r131qrbm{grid-column-start:2;grid-row-start:2;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase200);}"]);
|
|
19
|
+
const useMediaBaseStyle = /*#__PURE__*/__resetStyles("rrip69g", null, [".rrip69g{grid-row-start:span 2;}"]);
|
|
32
20
|
/**
|
|
33
21
|
* Apply styling to the TagPickerOption slots based on the state
|
|
34
22
|
*/
|
|
35
23
|
export const useTagPickerOptionStyles_unstable = state => {
|
|
36
24
|
'use no memo';
|
|
37
25
|
|
|
38
|
-
const
|
|
39
|
-
|
|
26
|
+
const rootBaseStyle = useRootBaseStyle();
|
|
27
|
+
const rootStyles = useRootStyles();
|
|
28
|
+
const secondaryContentBaseStyle = useSecondaryContentBaseStyle();
|
|
29
|
+
const mediaBaseStyle = useMediaBaseStyle();
|
|
30
|
+
state.root.className = mergeClasses(tagPickerOptionClassNames.root, rootBaseStyle, state.secondaryContent && rootStyles.secondaryContent, state.root.className);
|
|
40
31
|
useOptionStyles_unstable({
|
|
41
32
|
...state,
|
|
42
33
|
active: false,
|
|
@@ -46,10 +37,10 @@ export const useTagPickerOptionStyles_unstable = state => {
|
|
|
46
37
|
selected: false
|
|
47
38
|
});
|
|
48
39
|
if (state.media) {
|
|
49
|
-
state.media.className = mergeClasses(tagPickerOptionClassNames.media,
|
|
40
|
+
state.media.className = mergeClasses(tagPickerOptionClassNames.media, mediaBaseStyle, state.media.className);
|
|
50
41
|
}
|
|
51
42
|
if (state.secondaryContent) {
|
|
52
|
-
state.secondaryContent.className = mergeClasses(tagPickerOptionClassNames.secondaryContent,
|
|
43
|
+
state.secondaryContent.className = mergeClasses(tagPickerOptionClassNames.secondaryContent, secondaryContentBaseStyle, state.secondaryContent.className);
|
|
53
44
|
}
|
|
54
45
|
return state;
|
|
55
46
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__styles","mergeClasses","useOptionStyles_unstable","typographyStyles","tagPickerOptionClassNames","root","media","secondaryContent","
|
|
1
|
+
{"version":3,"names":["__resetStyles","__styles","mergeClasses","useOptionStyles_unstable","typographyStyles","tagPickerOptionClassNames","root","media","secondaryContent","useRootBaseStyle","useRootStyles","mc9l5x","Budl1dq","d","useSecondaryContentBaseStyle","useMediaBaseStyle","useTagPickerOptionStyles_unstable","state","rootBaseStyle","rootStyles","secondaryContentBaseStyle","mediaBaseStyle","className","active","disabled","focusVisible","checkIcon","undefined","selected"],"sources":["useTagPickerOptionStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { useOptionStyles_unstable } from '@fluentui/react-combobox';\nimport { typographyStyles } from '@fluentui/react-theme';\nexport const tagPickerOptionClassNames = {\n root: 'fui-TagPickerOption',\n media: 'fui-TagPickerOption__media',\n secondaryContent: 'fui-TagPickerOption__secondaryContent'\n};\nconst useRootBaseStyle = makeResetStyles({\n display: 'flex',\n alignItems: 'center'\n});\nconst useRootStyles = makeStyles({\n secondaryContent: {\n display: 'grid',\n gridTemplateColumns: 'auto 1fr'\n }\n});\nconst useSecondaryContentBaseStyle = makeResetStyles({\n gridColumnStart: 2,\n gridRowStart: 2,\n ...typographyStyles.caption1\n});\nconst useMediaBaseStyle = makeResetStyles({\n gridRowStart: 'span 2'\n});\n/**\n * Apply styling to the TagPickerOption slots based on the state\n */ export const useTagPickerOptionStyles_unstable = (state)=>{\n 'use no memo';\n const rootBaseStyle = useRootBaseStyle();\n const rootStyles = useRootStyles();\n const secondaryContentBaseStyle = useSecondaryContentBaseStyle();\n const mediaBaseStyle = useMediaBaseStyle();\n state.root.className = mergeClasses(tagPickerOptionClassNames.root, rootBaseStyle, state.secondaryContent && rootStyles.secondaryContent, state.root.className);\n useOptionStyles_unstable({\n ...state,\n active: false,\n disabled: false,\n focusVisible: false,\n checkIcon: undefined,\n selected: false\n });\n if (state.media) {\n state.media.className = mergeClasses(tagPickerOptionClassNames.media, mediaBaseStyle, state.media.className);\n }\n if (state.secondaryContent) {\n state.secondaryContent.className = mergeClasses(tagPickerOptionClassNames.secondaryContent, secondaryContentBaseStyle, state.secondaryContent.className);\n }\n return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,wBAAwB,QAAQ,0BAA0B;AACnE,SAASC,gBAAgB,QAAQ,uBAAuB;AACxD,OAAO,MAAMC,yBAAyB,GAAG;EACrCC,IAAI,EAAE,qBAAqB;EAC3BC,KAAK,EAAE,4BAA4B;EACnCC,gBAAgB,EAAE;AACtB,CAAC;AACD,MAAMC,gBAAgB,gBAAGT,aAAA,gEAGxB,CAAC;AACF,MAAMU,aAAa,gBAAGT,QAAA;EAAAO,gBAAA;IAAAG,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAKrB,CAAC;AACF,MAAMC,4BAA4B,gBAAGd,aAAA,oNAIpC,CAAC;AACF,MAAMe,iBAAiB,gBAAGf,aAAA,sDAEzB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMgB,iCAAiC,GAAIC,KAAK,IAAG;EAC1D,aAAa;;EACb,MAAMC,aAAa,GAAGT,gBAAgB,CAAC,CAAC;EACxC,MAAMU,UAAU,GAAGT,aAAa,CAAC,CAAC;EAClC,MAAMU,yBAAyB,GAAGN,4BAA4B,CAAC,CAAC;EAChE,MAAMO,cAAc,GAAGN,iBAAiB,CAAC,CAAC;EAC1CE,KAAK,CAACX,IAAI,CAACgB,SAAS,GAAGpB,YAAY,CAACG,yBAAyB,CAACC,IAAI,EAAEY,aAAa,EAAED,KAAK,CAACT,gBAAgB,IAAIW,UAAU,CAACX,gBAAgB,EAAES,KAAK,CAACX,IAAI,CAACgB,SAAS,CAAC;EAC/JnB,wBAAwB,CAAC;IACrB,GAAGc,KAAK;IACRM,MAAM,EAAE,KAAK;IACbC,QAAQ,EAAE,KAAK;IACfC,YAAY,EAAE,KAAK;IACnBC,SAAS,EAAEC,SAAS;IACpBC,QAAQ,EAAE;EACd,CAAC,CAAC;EACF,IAAIX,KAAK,CAACV,KAAK,EAAE;IACbU,KAAK,CAACV,KAAK,CAACe,SAAS,GAAGpB,YAAY,CAACG,yBAAyB,CAACE,KAAK,EAAEc,cAAc,EAAEJ,KAAK,CAACV,KAAK,CAACe,SAAS,CAAC;EAChH;EACA,IAAIL,KAAK,CAACT,gBAAgB,EAAE;IACxBS,KAAK,CAACT,gBAAgB,CAACc,SAAS,GAAGpB,YAAY,CAACG,yBAAyB,CAACG,gBAAgB,EAAEY,yBAAyB,EAAEH,KAAK,CAACT,gBAAgB,CAACc,SAAS,CAAC;EAC5J;EACA,OAAOL,KAAK;AAChB,CAAC","ignoreList":[]}
|
|
@@ -49,6 +49,7 @@ const useTagPickerControl_unstable = (props, ref)=>{
|
|
|
49
49
|
renderByDefault: !noPopover,
|
|
50
50
|
defaultProps: {
|
|
51
51
|
'aria-expanded': open,
|
|
52
|
+
'aria-disabled': disabled ? 'true' : undefined,
|
|
52
53
|
children: /*#__PURE__*/ _react.createElement(_reacticons.ChevronDownRegular, null),
|
|
53
54
|
role: 'button'
|
|
54
55
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/TagPickerControl/useTagPickerControl.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n ExtractSlotProps,\n Slot,\n elementContains,\n getIntrinsicElementProps,\n slot,\n useEventCallback,\n useId,\n useMergedRefs,\n} from '@fluentui/react-utilities';\nimport type { TagPickerControlProps, TagPickerControlState } from './TagPickerControl.types';\nimport { useTagPickerContext_unstable } from '../../contexts/TagPickerContext';\nimport { ChevronDownRegular } from '@fluentui/react-icons';\nimport { useResizeObserverRef } from '../../utils/useResizeObserverRef';\nimport { tagPickerControlAsideWidthToken } from './useTagPickerControlStyles.styles';\nimport { useFieldContext_unstable } from '@fluentui/react-field';\nimport { useExpandLabel } from '../../utils/useExpandLabel';\n\n/**\n * Create the state required to render PickerControl.\n *\n * The returned state can be modified with hooks such as usePickerControlStyles_unstable,\n * before being passed to renderPickerControl_unstable.\n *\n * @param props - props from this instance of PickerControl\n * @param ref - reference to root HTMLDivElement of PickerControl\n */\nexport const useTagPickerControl_unstable = (\n props: TagPickerControlProps,\n ref: React.Ref<HTMLDivElement>,\n): TagPickerControlState => {\n const targetRef = useTagPickerContext_unstable(ctx => ctx.targetRef);\n const triggerRef = useTagPickerContext_unstable(ctx => ctx.triggerRef);\n const tagPickerGroupRef = useTagPickerContext_unstable(ctx => ctx.tagPickerGroupRef);\n const open = useTagPickerContext_unstable(ctx => ctx.open);\n const popoverId = useTagPickerContext_unstable(ctx => ctx.popoverId);\n const setOpen = useTagPickerContext_unstable(ctx => ctx.setOpen);\n const secondaryInnerActionRef = useTagPickerContext_unstable(ctx => ctx.secondaryActionRef);\n const size = useTagPickerContext_unstable(ctx => ctx.size);\n const appearance = useTagPickerContext_unstable(ctx => ctx.appearance);\n const disabled = useTagPickerContext_unstable(ctx => ctx.disabled);\n const invalid = useFieldContext_unstable()?.validationState === 'error';\n const noPopover = useTagPickerContext_unstable(ctx => ctx.noPopover ?? false);\n\n const tagPickerId = useId('tagPicker-');\n\n const innerRef = React.useRef<HTMLDivElement>(null);\n const expandIconRef = React.useRef<HTMLSpanElement>(null);\n const asideRef = React.useRef<HTMLSpanElement>(null);\n\n const secondaryAction = slot.optional(props.secondaryAction, {\n elementType: 'span',\n });\n const secondaryActionRef = useMergedRefs(secondaryInnerActionRef, secondaryAction?.ref);\n if (secondaryAction) {\n secondaryAction.ref = secondaryActionRef;\n }\n\n const expandIcon = slot.optional(props.expandIcon, {\n renderByDefault: !noPopover,\n defaultProps: {\n 'aria-expanded': open,\n children: <ChevronDownRegular />,\n role: 'button',\n },\n elementType: 'span',\n });\n\n const expandIconMergeRef = useMergedRefs(expandIcon?.ref, expandIconRef);\n if (expandIcon) {\n expandIcon.ref = expandIconMergeRef;\n }\n\n const observerRef = useResizeObserverRef<HTMLSpanElement>(([entry]) => {\n innerRef.current?.style.setProperty(tagPickerControlAsideWidthToken, `${entry.contentRect.width}px`);\n });\n const aside = slot.optional<ExtractSlotProps<Slot<'span'>>>(undefined, {\n elementType: 'span',\n renderByDefault: Boolean(secondaryAction || expandIcon),\n defaultProps: {\n ref: observerRef,\n },\n });\n const mergedAsideRefs = useMergedRefs(asideRef, aside?.ref);\n if (aside) {\n aside.ref = mergedAsideRefs;\n }\n\n const handleMouseDown = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {\n if (event.isDefaultPrevented()) {\n return;\n }\n if (\n elementContains(expandIconRef.current, event.target as Node) ||\n event.target === innerRef.current ||\n event.target === tagPickerGroupRef.current ||\n event.target === asideRef.current\n ) {\n event.preventDefault();\n setOpen(event, !open);\n triggerRef.current?.focus();\n }\n });\n\n const state: TagPickerControlState = {\n components: {\n root: 'div',\n expandIcon: 'span',\n secondaryAction: 'span',\n aside: 'span',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref: useMergedRefs(ref, targetRef, innerRef),\n 'aria-owns': open && !noPopover ? popoverId : undefined,\n ...props,\n onMouseDown: handleMouseDown,\n }),\n { elementType: 'div' },\n ),\n aside,\n expandIcon,\n secondaryAction,\n size,\n appearance,\n disabled,\n invalid,\n };\n\n const expandIconLabelRef = useExpandLabel({ tagPickerId, state: state as Pick<TagPickerControlState, 'expandIcon'> });\n\n const expandIconLabelMergeRef = useMergedRefs(expandIcon?.ref, expandIconLabelRef);\n if (state.expandIcon) {\n state.expandIcon.ref = expandIconLabelMergeRef;\n }\n\n return state;\n};\n"],"names":["useTagPickerControl_unstable","props","ref","useFieldContext_unstable","targetRef","useTagPickerContext_unstable","ctx","triggerRef","tagPickerGroupRef","open","popoverId","setOpen","secondaryInnerActionRef","secondaryActionRef","size","appearance","disabled","invalid","validationState","noPopover","tagPickerId","useId","innerRef","React","useRef","expandIconRef","asideRef","secondaryAction","slot","optional","elementType","useMergedRefs","expandIcon","renderByDefault","defaultProps","children","createElement","ChevronDownRegular","role","expandIconMergeRef","observerRef","useResizeObserverRef","entry","current","style","setProperty","tagPickerControlAsideWidthToken","contentRect","width","aside","
|
|
1
|
+
{"version":3,"sources":["../src/components/TagPickerControl/useTagPickerControl.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n ExtractSlotProps,\n Slot,\n elementContains,\n getIntrinsicElementProps,\n slot,\n useEventCallback,\n useId,\n useMergedRefs,\n} from '@fluentui/react-utilities';\nimport type { TagPickerControlProps, TagPickerControlState } from './TagPickerControl.types';\nimport { useTagPickerContext_unstable } from '../../contexts/TagPickerContext';\nimport { ChevronDownRegular } from '@fluentui/react-icons';\nimport { useResizeObserverRef } from '../../utils/useResizeObserverRef';\nimport { tagPickerControlAsideWidthToken } from './useTagPickerControlStyles.styles';\nimport { useFieldContext_unstable } from '@fluentui/react-field';\nimport { useExpandLabel } from '../../utils/useExpandLabel';\n\n/**\n * Create the state required to render PickerControl.\n *\n * The returned state can be modified with hooks such as usePickerControlStyles_unstable,\n * before being passed to renderPickerControl_unstable.\n *\n * @param props - props from this instance of PickerControl\n * @param ref - reference to root HTMLDivElement of PickerControl\n */\nexport const useTagPickerControl_unstable = (\n props: TagPickerControlProps,\n ref: React.Ref<HTMLDivElement>,\n): TagPickerControlState => {\n const targetRef = useTagPickerContext_unstable(ctx => ctx.targetRef);\n const triggerRef = useTagPickerContext_unstable(ctx => ctx.triggerRef);\n const tagPickerGroupRef = useTagPickerContext_unstable(ctx => ctx.tagPickerGroupRef);\n const open = useTagPickerContext_unstable(ctx => ctx.open);\n const popoverId = useTagPickerContext_unstable(ctx => ctx.popoverId);\n const setOpen = useTagPickerContext_unstable(ctx => ctx.setOpen);\n const secondaryInnerActionRef = useTagPickerContext_unstable(ctx => ctx.secondaryActionRef);\n const size = useTagPickerContext_unstable(ctx => ctx.size);\n const appearance = useTagPickerContext_unstable(ctx => ctx.appearance);\n const disabled = useTagPickerContext_unstable(ctx => ctx.disabled);\n const invalid = useFieldContext_unstable()?.validationState === 'error';\n const noPopover = useTagPickerContext_unstable(ctx => ctx.noPopover ?? false);\n\n const tagPickerId = useId('tagPicker-');\n\n const innerRef = React.useRef<HTMLDivElement>(null);\n const expandIconRef = React.useRef<HTMLSpanElement>(null);\n const asideRef = React.useRef<HTMLSpanElement>(null);\n\n const secondaryAction = slot.optional(props.secondaryAction, {\n elementType: 'span',\n });\n const secondaryActionRef = useMergedRefs(secondaryInnerActionRef, secondaryAction?.ref);\n if (secondaryAction) {\n secondaryAction.ref = secondaryActionRef;\n }\n\n const expandIcon = slot.optional(props.expandIcon, {\n renderByDefault: !noPopover,\n defaultProps: {\n 'aria-expanded': open,\n 'aria-disabled': disabled ? 'true' : undefined,\n children: <ChevronDownRegular />,\n role: 'button',\n },\n elementType: 'span',\n });\n\n const expandIconMergeRef = useMergedRefs(expandIcon?.ref, expandIconRef);\n if (expandIcon) {\n expandIcon.ref = expandIconMergeRef;\n }\n\n const observerRef = useResizeObserverRef<HTMLSpanElement>(([entry]) => {\n innerRef.current?.style.setProperty(tagPickerControlAsideWidthToken, `${entry.contentRect.width}px`);\n });\n const aside = slot.optional<ExtractSlotProps<Slot<'span'>>>(undefined, {\n elementType: 'span',\n renderByDefault: Boolean(secondaryAction || expandIcon),\n defaultProps: {\n ref: observerRef,\n },\n });\n const mergedAsideRefs = useMergedRefs(asideRef, aside?.ref);\n if (aside) {\n aside.ref = mergedAsideRefs;\n }\n\n const handleMouseDown = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {\n if (event.isDefaultPrevented()) {\n return;\n }\n if (\n elementContains(expandIconRef.current, event.target as Node) ||\n event.target === innerRef.current ||\n event.target === tagPickerGroupRef.current ||\n event.target === asideRef.current\n ) {\n event.preventDefault();\n setOpen(event, !open);\n triggerRef.current?.focus();\n }\n });\n\n const state: TagPickerControlState = {\n components: {\n root: 'div',\n expandIcon: 'span',\n secondaryAction: 'span',\n aside: 'span',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref: useMergedRefs(ref, targetRef, innerRef),\n 'aria-owns': open && !noPopover ? popoverId : undefined,\n ...props,\n onMouseDown: handleMouseDown,\n }),\n { elementType: 'div' },\n ),\n aside,\n expandIcon,\n secondaryAction,\n size,\n appearance,\n disabled,\n invalid,\n };\n\n const expandIconLabelRef = useExpandLabel({ tagPickerId, state: state as Pick<TagPickerControlState, 'expandIcon'> });\n\n const expandIconLabelMergeRef = useMergedRefs(expandIcon?.ref, expandIconLabelRef);\n if (state.expandIcon) {\n state.expandIcon.ref = expandIconLabelMergeRef;\n }\n\n return state;\n};\n"],"names":["useTagPickerControl_unstable","props","ref","useFieldContext_unstable","targetRef","useTagPickerContext_unstable","ctx","triggerRef","tagPickerGroupRef","open","popoverId","setOpen","secondaryInnerActionRef","secondaryActionRef","size","appearance","disabled","invalid","validationState","noPopover","tagPickerId","useId","innerRef","React","useRef","expandIconRef","asideRef","secondaryAction","slot","optional","elementType","useMergedRefs","expandIcon","renderByDefault","defaultProps","undefined","children","createElement","ChevronDownRegular","role","expandIconMergeRef","observerRef","useResizeObserverRef","entry","current","style","setProperty","tagPickerControlAsideWidthToken","contentRect","width","aside","Boolean","mergedAsideRefs","handleMouseDown","useEventCallback","event","isDefaultPrevented","elementContains","target","preventDefault","focus","state","components","root","always","getIntrinsicElementProps","onMouseDown","expandIconLabelRef","useExpandLabel","expandIconLabelMergeRef"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
@@ -23,43 +23,33 @@ const tagPickerOptionClassNames = {
|
|
|
23
23
|
media: 'fui-TagPickerOption__media',
|
|
24
24
|
secondaryContent: 'fui-TagPickerOption__secondaryContent'
|
|
25
25
|
};
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
mc9l5x: "f13qh94s",
|
|
31
|
-
Budl1dq: "fjxzuw",
|
|
32
|
-
Bt984gj: "f122n59"
|
|
33
|
-
},
|
|
26
|
+
const useRootBaseStyle = /*#__PURE__*/ (0, _react.__resetStyles)("r70qvj9", null, [
|
|
27
|
+
".r70qvj9{display:flex;align-items:center;}"
|
|
28
|
+
]);
|
|
29
|
+
const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
34
30
|
secondaryContent: {
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
Bahqtrf: "fk6fouc",
|
|
38
|
-
Be2twd7: "fy9rknc",
|
|
39
|
-
Bhrd7zp: "figsok6",
|
|
40
|
-
Bg96gwp: "fwrc4pm"
|
|
41
|
-
},
|
|
42
|
-
media: {
|
|
43
|
-
Ijaq50: "fldnz9j"
|
|
31
|
+
mc9l5x: "f13qh94s",
|
|
32
|
+
Budl1dq: "fjxzuw"
|
|
44
33
|
}
|
|
45
34
|
}, {
|
|
46
35
|
d: [
|
|
47
36
|
".f13qh94s{display:grid;}",
|
|
48
|
-
".fjxzuw{grid-template-columns:auto 1fr;}"
|
|
49
|
-
".f122n59{align-items:center;}",
|
|
50
|
-
".fd46tj4{grid-column-start:2;}",
|
|
51
|
-
".faunodf{grid-row-start:2;}",
|
|
52
|
-
".fk6fouc{font-family:var(--fontFamilyBase);}",
|
|
53
|
-
".fy9rknc{font-size:var(--fontSizeBase200);}",
|
|
54
|
-
".figsok6{font-weight:var(--fontWeightRegular);}",
|
|
55
|
-
".fwrc4pm{line-height:var(--lineHeightBase200);}",
|
|
56
|
-
".fldnz9j{grid-row-start:span 2;}"
|
|
37
|
+
".fjxzuw{grid-template-columns:auto 1fr;}"
|
|
57
38
|
]
|
|
58
39
|
});
|
|
40
|
+
const useSecondaryContentBaseStyle = /*#__PURE__*/ (0, _react.__resetStyles)("r131qrbm", null, [
|
|
41
|
+
".r131qrbm{grid-column-start:2;grid-row-start:2;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase200);}"
|
|
42
|
+
]);
|
|
43
|
+
const useMediaBaseStyle = /*#__PURE__*/ (0, _react.__resetStyles)("rrip69g", null, [
|
|
44
|
+
".rrip69g{grid-row-start:span 2;}"
|
|
45
|
+
]);
|
|
59
46
|
const useTagPickerOptionStyles_unstable = (state)=>{
|
|
60
47
|
'use no memo';
|
|
61
|
-
const
|
|
62
|
-
|
|
48
|
+
const rootBaseStyle = useRootBaseStyle();
|
|
49
|
+
const rootStyles = useRootStyles();
|
|
50
|
+
const secondaryContentBaseStyle = useSecondaryContentBaseStyle();
|
|
51
|
+
const mediaBaseStyle = useMediaBaseStyle();
|
|
52
|
+
state.root.className = (0, _react.mergeClasses)(tagPickerOptionClassNames.root, rootBaseStyle, state.secondaryContent && rootStyles.secondaryContent, state.root.className);
|
|
63
53
|
(0, _reactcombobox.useOptionStyles_unstable)({
|
|
64
54
|
...state,
|
|
65
55
|
active: false,
|
|
@@ -69,10 +59,10 @@ const useTagPickerOptionStyles_unstable = (state)=>{
|
|
|
69
59
|
selected: false
|
|
70
60
|
});
|
|
71
61
|
if (state.media) {
|
|
72
|
-
state.media.className = (0, _react.mergeClasses)(tagPickerOptionClassNames.media,
|
|
62
|
+
state.media.className = (0, _react.mergeClasses)(tagPickerOptionClassNames.media, mediaBaseStyle, state.media.className);
|
|
73
63
|
}
|
|
74
64
|
if (state.secondaryContent) {
|
|
75
|
-
state.secondaryContent.className = (0, _react.mergeClasses)(tagPickerOptionClassNames.secondaryContent,
|
|
65
|
+
state.secondaryContent.className = (0, _react.mergeClasses)(tagPickerOptionClassNames.secondaryContent, secondaryContentBaseStyle, state.secondaryContent.className);
|
|
76
66
|
}
|
|
77
67
|
return state;
|
|
78
68
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useTagPickerOptionStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { useOptionStyles_unstable } from '@fluentui/react-combobox';\nimport { typographyStyles } from '@fluentui/react-theme';\nexport const tagPickerOptionClassNames = {\n root: 'fui-TagPickerOption',\n media: 'fui-TagPickerOption__media',\n secondaryContent: 'fui-TagPickerOption__secondaryContent'\n};\
|
|
1
|
+
{"version":3,"sources":["useTagPickerOptionStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { useOptionStyles_unstable } from '@fluentui/react-combobox';\nimport { typographyStyles } from '@fluentui/react-theme';\nexport const tagPickerOptionClassNames = {\n root: 'fui-TagPickerOption',\n media: 'fui-TagPickerOption__media',\n secondaryContent: 'fui-TagPickerOption__secondaryContent'\n};\nconst useRootBaseStyle = makeResetStyles({\n display: 'flex',\n alignItems: 'center'\n});\nconst useRootStyles = makeStyles({\n secondaryContent: {\n display: 'grid',\n gridTemplateColumns: 'auto 1fr'\n }\n});\nconst useSecondaryContentBaseStyle = makeResetStyles({\n gridColumnStart: 2,\n gridRowStart: 2,\n ...typographyStyles.caption1\n});\nconst useMediaBaseStyle = makeResetStyles({\n gridRowStart: 'span 2'\n});\n/**\n * Apply styling to the TagPickerOption slots based on the state\n */ export const useTagPickerOptionStyles_unstable = (state)=>{\n 'use no memo';\n const rootBaseStyle = useRootBaseStyle();\n const rootStyles = useRootStyles();\n const secondaryContentBaseStyle = useSecondaryContentBaseStyle();\n const mediaBaseStyle = useMediaBaseStyle();\n state.root.className = mergeClasses(tagPickerOptionClassNames.root, rootBaseStyle, state.secondaryContent && rootStyles.secondaryContent, state.root.className);\n useOptionStyles_unstable({\n ...state,\n active: false,\n disabled: false,\n focusVisible: false,\n checkIcon: undefined,\n selected: false\n });\n if (state.media) {\n state.media.className = mergeClasses(tagPickerOptionClassNames.media, mediaBaseStyle, state.media.className);\n }\n if (state.secondaryContent) {\n state.secondaryContent.className = mergeClasses(tagPickerOptionClassNames.secondaryContent, secondaryContentBaseStyle, state.secondaryContent.className);\n }\n return state;\n};\n"],"names":["tagPickerOptionClassNames","useTagPickerOptionStyles_unstable","root","media","secondaryContent","useRootBaseStyle","__resetStyles","useRootStyles","__styles","mc9l5x","Budl1dq","d","useSecondaryContentBaseStyle","useMediaBaseStyle","state","rootBaseStyle","rootStyles","secondaryContentBaseStyle","mediaBaseStyle","className","mergeClasses","useOptionStyles_unstable","active","disabled","focusVisible","checkIcon","undefined","selected"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAGaA,yBAAyB;eAAzBA;;IAyBIC,iCAAiC;eAAjCA;;;uBA5ByC;+BACjB;AAElC,MAAMD,4BAA4B;IACrCE,MAAM;IACNC,OAAO;IACPC,kBAAkB;AACtB;AACA,MAAMC,mBAAgB,WAAA,GAAGC,IAAAA,oBAAA,EAAA,WAAA,MAAA;IAAA;CAGxB;AACD,MAAMC,gBAAa,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAJ,kBAAA;QAAAK,QAAA;QAAAC,SAAA;IAAA;AAAA,GAAA;IAAAC,GAAA;QAAA;QAAA;KAAA;AAAA;AAMtB,MAAMC,+BAA4B,WAAA,GAAGN,IAAAA,oBAAA,EAAA,YAAA,MAAA;IAAA;CAIpC;AACD,MAAMO,oBAAiB,WAAA,GAAGP,IAAAA,oBAAA,EAAA,WAAA,MAAA;IAAA;CAEzB;AAGU,MAAML,oCAAqCa,CAAAA;IAClD;IACA,MAAMC,gBAAgBV;IACtB,MAAMW,aAAaT;IACnB,MAAMU,4BAA4BL;IAClC,MAAMM,iBAAiBL;IACvBC,MAAMZ,IAAI,CAACiB,SAAS,GAAGC,IAAAA,mBAAY,EAACpB,0BAA0BE,IAAI,EAAEa,eAAeD,MAAMV,gBAAgB,IAAIY,WAAWZ,gBAAgB,EAAEU,MAAMZ,IAAI,CAACiB,SAAS;IAC9JE,IAAAA,uCAAwB,EAAC;QACrB,GAAGP,KAAK;QACRQ,QAAQ;QACRC,UAAU;QACVC,cAAc;QACdC,WAAWC;QACXC,UAAU;IACd;IACA,IAAIb,MAAMX,KAAK,EAAE;QACbW,MAAMX,KAAK,CAACgB,SAAS,GAAGC,IAAAA,mBAAY,EAACpB,0BAA0BG,KAAK,EAAEe,gBAAgBJ,MAAMX,KAAK,CAACgB,SAAS;IAC/G;IACA,IAAIL,MAAMV,gBAAgB,EAAE;QACxBU,MAAMV,gBAAgB,CAACe,SAAS,GAAGC,IAAAA,mBAAY,EAACpB,0BAA0BI,gBAAgB,EAAEa,2BAA2BH,MAAMV,gBAAgB,CAACe,SAAS;IAC3J;IACA,OAAOL;AACX"}
|