@fluentui/react-combobox 9.17.1 → 9.17.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 +46 -10
- package/dist/index.d.ts +9 -0
- package/lib/components/Combobox/useCombobox.js +4 -5
- package/lib/components/Combobox/useCombobox.js.map +1 -1
- package/lib/components/Combobox/useComboboxStyles.styles.js +5 -2
- package/lib/components/Combobox/useComboboxStyles.styles.js.map +1 -1
- package/lib/components/Combobox/useComboboxStyles.styles.raw.js +5 -1
- package/lib/components/Combobox/useComboboxStyles.styles.raw.js.map +1 -1
- package/lib/components/Combobox/useInputTriggerSlot.js +4 -1
- package/lib/components/Combobox/useInputTriggerSlot.js.map +1 -1
- package/lib/components/Dropdown/useButtonTriggerSlot.js +1 -1
- package/lib/components/Dropdown/useButtonTriggerSlot.js.map +1 -1
- package/lib/components/Dropdown/useDropdown.js +4 -5
- package/lib/components/Dropdown/useDropdown.js.map +1 -1
- package/lib/components/Dropdown/useDropdownStyles.styles.js +5 -2
- package/lib/components/Dropdown/useDropdownStyles.styles.js.map +1 -1
- package/lib/components/Dropdown/useDropdownStyles.styles.raw.js +5 -1
- package/lib/components/Dropdown/useDropdownStyles.styles.raw.js.map +1 -1
- package/lib/components/Listbox/useListbox.js +4 -3
- package/lib/components/Listbox/useListbox.js.map +1 -1
- package/lib/components/Listbox/useListboxStyles.styles.js +1 -2
- package/lib/components/Listbox/useListboxStyles.styles.js.map +1 -1
- package/lib/components/Listbox/useListboxStyles.styles.raw.js +1 -1
- package/lib/components/Listbox/useListboxStyles.styles.raw.js.map +1 -1
- package/lib/components/Option/useOption.js +0 -1
- package/lib/components/Option/useOption.js.map +1 -1
- package/lib/components/Option/useOptionStyles.styles.js +10 -19
- package/lib/components/Option/useOptionStyles.styles.js.map +1 -1
- package/lib/components/Option/useOptionStyles.styles.raw.js +7 -13
- package/lib/components/Option/useOptionStyles.styles.raw.js.map +1 -1
- package/lib/components/OptionGroup/useOptionGroupStyles.styles.js +2 -2
- package/lib/components/OptionGroup/useOptionGroupStyles.styles.js.map +1 -1
- package/lib/components/OptionGroup/useOptionGroupStyles.styles.raw.js +2 -1
- package/lib/components/OptionGroup/useOptionGroupStyles.styles.raw.js.map +1 -1
- package/lib/index.js +1 -0
- package/lib/index.js.map +1 -1
- package/lib/utils/isComboboxOptionElement.js +9 -0
- package/lib/utils/isComboboxOptionElement.js.map +1 -0
- package/lib/utils/useComboboxBaseState.js +0 -1
- package/lib/utils/useComboboxBaseState.js.map +1 -1
- package/lib/utils/useListboxSlot.js +2 -1
- package/lib/utils/useListboxSlot.js.map +1 -1
- package/lib/utils/useOptionCollection.js +1 -0
- package/lib/utils/useOptionCollection.js.map +1 -1
- package/lib/utils/useTriggerSlot.js +13 -2
- package/lib/utils/useTriggerSlot.js.map +1 -1
- package/lib-commonjs/components/Combobox/useCombobox.js +2 -4
- package/lib-commonjs/components/Combobox/useCombobox.js.map +1 -1
- package/lib-commonjs/components/Combobox/useComboboxStyles.styles.js +5 -1
- package/lib-commonjs/components/Combobox/useComboboxStyles.styles.js.map +1 -1
- package/lib-commonjs/components/Combobox/useComboboxStyles.styles.raw.js +5 -1
- package/lib-commonjs/components/Combobox/useComboboxStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/Combobox/useInputTriggerSlot.js +4 -1
- package/lib-commonjs/components/Combobox/useInputTriggerSlot.js.map +1 -1
- package/lib-commonjs/components/Dropdown/useButtonTriggerSlot.js +1 -1
- package/lib-commonjs/components/Dropdown/useButtonTriggerSlot.js.map +1 -1
- package/lib-commonjs/components/Dropdown/useDropdown.js +2 -4
- package/lib-commonjs/components/Dropdown/useDropdown.js.map +1 -1
- package/lib-commonjs/components/Dropdown/useDropdownStyles.styles.js +5 -1
- package/lib-commonjs/components/Dropdown/useDropdownStyles.styles.js.map +1 -1
- package/lib-commonjs/components/Dropdown/useDropdownStyles.styles.raw.js +5 -1
- package/lib-commonjs/components/Dropdown/useDropdownStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/Listbox/useListbox.js +4 -3
- package/lib-commonjs/components/Listbox/useListbox.js.map +1 -1
- package/lib-commonjs/components/Listbox/useListboxStyles.styles.js +1 -1
- package/lib-commonjs/components/Listbox/useListboxStyles.styles.js.map +1 -1
- package/lib-commonjs/components/Listbox/useListboxStyles.styles.raw.js +1 -1
- package/lib-commonjs/components/Listbox/useListboxStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/Option/useOption.js +0 -1
- package/lib-commonjs/components/Option/useOption.js.map +1 -1
- package/lib-commonjs/components/Option/useOptionStyles.styles.js +10 -41
- package/lib-commonjs/components/Option/useOptionStyles.styles.js.map +1 -1
- package/lib-commonjs/components/Option/useOptionStyles.styles.raw.js +7 -13
- package/lib-commonjs/components/Option/useOptionStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/OptionGroup/useOptionGroupStyles.styles.js +2 -1
- package/lib-commonjs/components/OptionGroup/useOptionGroupStyles.styles.js.map +1 -1
- package/lib-commonjs/components/OptionGroup/useOptionGroupStyles.styles.raw.js +2 -1
- package/lib-commonjs/components/OptionGroup/useOptionGroupStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/index.js +4 -0
- package/lib-commonjs/index.js.map +1 -1
- package/lib-commonjs/utils/isComboboxOptionElement.js +19 -0
- package/lib-commonjs/utils/isComboboxOptionElement.js.map +1 -0
- package/lib-commonjs/utils/useComboboxBaseState.js +0 -1
- package/lib-commonjs/utils/useComboboxBaseState.js.map +1 -1
- package/lib-commonjs/utils/useListboxSlot.js.map +1 -1
- package/lib-commonjs/utils/useOptionCollection.js +1 -0
- package/lib-commonjs/utils/useOptionCollection.js.map +1 -1
- package/lib-commonjs/utils/useTriggerSlot.js +12 -1
- package/lib-commonjs/utils/useTriggerSlot.js.map +1 -1
- package/package.json +9 -9
|
@@ -44,7 +44,9 @@ const optionClassNames = {
|
|
|
44
44
|
z189sj: 0,
|
|
45
45
|
z8tnut: 0,
|
|
46
46
|
B0ocmuz: "fm5eomj",
|
|
47
|
-
qhf8xq: "f10pi13n"
|
|
47
|
+
qhf8xq: "f10pi13n"
|
|
48
|
+
},
|
|
49
|
+
interactive: {
|
|
48
50
|
Jwef8y: "f1knas48",
|
|
49
51
|
Bi91k9c: "feu1g3u",
|
|
50
52
|
zqbkvg: "fo79ri9",
|
|
@@ -110,30 +112,7 @@ const optionClassNames = {
|
|
|
110
112
|
},
|
|
111
113
|
disabled: {
|
|
112
114
|
sj55zd: "f1s2aq7o",
|
|
113
|
-
|
|
114
|
-
Bi91k9c: "fvgxktp",
|
|
115
|
-
zqbkvg: "f185j3qj",
|
|
116
|
-
h82x05: [
|
|
117
|
-
"f1dligi3",
|
|
118
|
-
"f1vydzie"
|
|
119
|
-
],
|
|
120
|
-
cqj998: "fjw1di3",
|
|
121
|
-
j3hlsh: [
|
|
122
|
-
"f1vydzie",
|
|
123
|
-
"f1dligi3"
|
|
124
|
-
],
|
|
125
|
-
ecr2s2: "fgj9um3",
|
|
126
|
-
lj723h: "f19wldhg",
|
|
127
|
-
Btxx2vb: "f1ss0kt2",
|
|
128
|
-
sltcwy: [
|
|
129
|
-
"f1t6oli3",
|
|
130
|
-
"fjy9ci8"
|
|
131
|
-
],
|
|
132
|
-
dnwvvm: "fresaxk",
|
|
133
|
-
Blyvkvs: [
|
|
134
|
-
"fjy9ci8",
|
|
135
|
-
"f1t6oli3"
|
|
136
|
-
],
|
|
115
|
+
Bceei9c: "f158kwzp",
|
|
137
116
|
B7iucu3: "f1cyfu5x"
|
|
138
117
|
},
|
|
139
118
|
selected: {},
|
|
@@ -261,6 +240,7 @@ const optionClassNames = {
|
|
|
261
240
|
".ftjv2f4[data-activedescendant-focusvisible]::after{left:-2px;}",
|
|
262
241
|
".f1flhb1f[data-activedescendant-focusvisible]::after{right:-2px;}",
|
|
263
242
|
".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}",
|
|
243
|
+
".f158kwzp{cursor:default;}",
|
|
264
244
|
".fi64zpg{flex-shrink:0;}",
|
|
265
245
|
".fod5ikn{font-size:var(--fontSizeBase400);}",
|
|
266
246
|
".f18b9hdq{margin-left:calc(var(--spacingHorizontalXXS) * -1);}",
|
|
@@ -305,13 +285,7 @@ const optionClassNames = {
|
|
|
305
285
|
".fo79ri9:hover .fui-Option__checkIcon{border-top-color:var(--colorNeutralForeground1Hover);}",
|
|
306
286
|
".f1osiabc:hover .fui-Option__checkIcon{border-right-color:var(--colorNeutralForeground1Hover);}",
|
|
307
287
|
".f1e8le25:hover .fui-Option__checkIcon{border-left-color:var(--colorNeutralForeground1Hover);}",
|
|
308
|
-
".f1yusjty:hover .fui-Option__checkIcon{border-bottom-color:var(--colorNeutralForeground1Hover);}"
|
|
309
|
-
".f9ql6rf:hover{background-color:var(--colorTransparentBackground);}",
|
|
310
|
-
".fvgxktp:hover{color:var(--colorNeutralForegroundDisabled);}",
|
|
311
|
-
".f185j3qj:hover .fui-Option__checkIcon{border-top-color:var(--colorNeutralForegroundDisabled);}",
|
|
312
|
-
".f1dligi3:hover .fui-Option__checkIcon{border-right-color:var(--colorNeutralForegroundDisabled);}",
|
|
313
|
-
".f1vydzie:hover .fui-Option__checkIcon{border-left-color:var(--colorNeutralForegroundDisabled);}",
|
|
314
|
-
".fjw1di3:hover .fui-Option__checkIcon{border-bottom-color:var(--colorNeutralForegroundDisabled);}"
|
|
288
|
+
".f1yusjty:hover .fui-Option__checkIcon{border-bottom-color:var(--colorNeutralForeground1Hover);}"
|
|
315
289
|
],
|
|
316
290
|
a: [
|
|
317
291
|
".fb40n2d:active{background-color:var(--colorNeutralBackground1Pressed);}",
|
|
@@ -319,13 +293,7 @@ const optionClassNames = {
|
|
|
319
293
|
".f1lnr2zp:active .fui-Option__checkIcon{border-top-color:var(--colorNeutralForeground1Hover);}",
|
|
320
294
|
".f1ogfk9z:active .fui-Option__checkIcon{border-right-color:var(--colorNeutralForeground1Hover);}",
|
|
321
295
|
".f1g7j8ec:active .fui-Option__checkIcon{border-left-color:var(--colorNeutralForeground1Hover);}",
|
|
322
|
-
".fiuf46r:active .fui-Option__checkIcon{border-bottom-color:var(--colorNeutralForeground1Hover);}"
|
|
323
|
-
".fgj9um3:active{background-color:var(--colorTransparentBackground);}",
|
|
324
|
-
".f19wldhg:active{color:var(--colorNeutralForegroundDisabled);}",
|
|
325
|
-
".f1ss0kt2:active .fui-Option__checkIcon{border-top-color:var(--colorNeutralForegroundDisabled);}",
|
|
326
|
-
".f1t6oli3:active .fui-Option__checkIcon{border-right-color:var(--colorNeutralForegroundDisabled);}",
|
|
327
|
-
".fjy9ci8:active .fui-Option__checkIcon{border-left-color:var(--colorNeutralForegroundDisabled);}",
|
|
328
|
-
".fresaxk:active .fui-Option__checkIcon{border-bottom-color:var(--colorNeutralForegroundDisabled);}"
|
|
296
|
+
".fiuf46r:active .fui-Option__checkIcon{border-bottom-color:var(--colorNeutralForeground1Hover);}"
|
|
329
297
|
],
|
|
330
298
|
m: [
|
|
331
299
|
[
|
|
@@ -337,11 +305,12 @@ const optionClassNames = {
|
|
|
337
305
|
]
|
|
338
306
|
});
|
|
339
307
|
const useOptionStyles_unstable = (state)=>{
|
|
340
|
-
'use no memo';
|
|
341
308
|
const { disabled, multiselect, selected } = state;
|
|
342
309
|
const styles = useStyles();
|
|
343
|
-
|
|
310
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
311
|
+
state.root.className = (0, _react.mergeClasses)(optionClassNames.root, styles.root, !disabled && styles.interactive, styles.active, disabled && styles.disabled, selected && styles.selected, state.root.className);
|
|
344
312
|
if (state.checkIcon) {
|
|
313
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
345
314
|
state.checkIcon.className = (0, _react.mergeClasses)(optionClassNames.checkIcon, styles.checkIcon, multiselect && styles.multiselectCheck, selected && styles.selectedCheck, selected && multiselect && styles.selectedMultiselectCheck, disabled && styles.checkDisabled, disabled && multiselect && styles.multiselectCheckDisabled, state.checkIcon.className);
|
|
346
315
|
}
|
|
347
316
|
return state;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useOptionStyles.styles.js"],"sourcesContent":["'use client';\nimport { tokens } from '@fluentui/react-theme';\nimport { ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE } from '@fluentui/react-aria';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nexport const optionClassNames = {\n root: 'fui-Option',\n checkIcon: 'fui-Option__checkIcon'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n alignItems: 'center',\n borderRadius: tokens.borderRadiusMedium,\n color: tokens.colorNeutralForeground1,\n columnGap: tokens.spacingHorizontalXS,\n cursor: 'pointer',\n display: 'flex',\n fontFamily: tokens.fontFamilyBase,\n fontSize: tokens.fontSizeBase300,\n lineHeight: tokens.lineHeightBase300,\n padding: `${tokens.spacingVerticalSNudge} ${tokens.spacingHorizontalS}`,\n position: 'relative',\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n color: tokens.colorNeutralForeground1Hover,\n [`& .${optionClassNames.checkIcon}`]: shorthands.borderColor(tokens.colorNeutralForeground1Hover)\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n color: tokens.colorNeutralForeground1Pressed,\n [`& .${optionClassNames.checkIcon}`]: shorthands.borderColor(tokens.colorNeutralForeground1Hover)\n }\n },\n active: {\n [`[${ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE}]::after`]: {\n content: '\"\"',\n position: 'absolute',\n pointerEvents: 'none',\n zIndex: 1,\n border: `2px solid ${tokens.colorStrokeFocus2}`,\n borderRadius: tokens.borderRadiusMedium,\n top: '-2px',\n bottom: '-2px',\n left: '-2px',\n right: '-2px'\n }\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n ':hover': {\n backgroundColor: tokens.colorTransparentBackground,\n color: tokens.colorNeutralForegroundDisabled,\n [`& .${optionClassNames.checkIcon}`]: shorthands.borderColor(tokens.colorNeutralForegroundDisabled)\n },\n ':active': {\n backgroundColor: tokens.colorTransparentBackground,\n color: tokens.colorNeutralForegroundDisabled,\n [`& .${optionClassNames.checkIcon}`]: shorthands.borderColor(tokens.colorNeutralForegroundDisabled)\n },\n '@media (forced-colors: active)': {\n color: 'GrayText'\n }\n },\n selected: {},\n checkIcon: {\n flexShrink: 0,\n fontSize: tokens.fontSizeBase400,\n // Shift icon(s) to the left to give text content extra spacing without needing an extra node\n // This is done instead of gap since the extra space only exists between icon > content, not icon > icon\n marginLeft: `calc(${tokens.spacingHorizontalXXS} * -1)`,\n marginRight: tokens.spacingHorizontalXXS,\n visibility: 'hidden',\n '& svg': {\n display: 'block'\n }\n },\n selectedCheck: {\n visibility: 'visible'\n },\n multiselectCheck: {\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,\n borderRadius: tokens.borderRadiusSmall,\n boxSizing: 'border-box',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n fill: 'currentColor',\n fontSize: '12px',\n height: '16px',\n width: '16px',\n visibility: 'visible'\n },\n selectedMultiselectCheck: {\n backgroundColor: tokens.colorCompoundBrandBackground,\n color: tokens.colorNeutralForegroundInverted,\n ...shorthands.borderColor(tokens.colorCompoundBrandBackground)\n },\n checkDisabled: {\n color: tokens.colorNeutralForegroundDisabled,\n '@media (forced-colors: active)': {\n color: 'GrayText'\n }\n },\n multiselectCheckDisabled: shorthands.borderColor(tokens.colorNeutralForegroundDisabled)\n});\n/**\n * Apply styling to the Option slots based on the state\n */ export const useOptionStyles_unstable = (state)=>{\n 'use no memo';\n const { disabled, multiselect, selected } = state;\n const styles = useStyles();\n state.root.className = mergeClasses(optionClassNames.root, styles.root, styles.active, disabled && styles.disabled, selected && styles.selected, state.root.className);\n if (state.checkIcon) {\n state.checkIcon.className = mergeClasses(optionClassNames.checkIcon, styles.checkIcon, multiselect && styles.multiselectCheck, selected && styles.selectedCheck, selected && multiselect && styles.selectedMultiselectCheck, disabled && styles.checkDisabled, disabled && multiselect && styles.multiselectCheckDisabled, state.checkIcon.className);\n }\n return state;\n};\n"],"names":["tokens","ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE","__styles","mergeClasses","shorthands","optionClassNames","root","checkIcon","useStyles","Bt984gj","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","sj55zd","i8kkvl","Bceei9c","mc9l5x","Bahqtrf","Be2twd7","Bg96gwp","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","qhf8xq","Jwef8y","Bi91k9c","zqbkvg","h82x05","cqj998","j3hlsh","ecr2s2","lj723h","Btxx2vb","sltcwy","dnwvvm","Blyvkvs","active","Bowz1zl","oxogb1","Ix2sn8","q7v32p","B7cbj04","Bewtojm","b50fsz","B1wzb3v","Bqwk70n","B37u8z8","avt0cx","f0sref","B9fkznv","Be3o27t","Bertapg","B53xpsf","Bsv72rj","B39dzdd","Btq9bd3","Bqfxd14","atup0s","Fffuxt","Bttcd12","Beitzug","Bqougee","B86i8pi","Bhijsxg","kktds4","Bmau3bo","npektv","disabled","B7iucu3","selected","Bnnss6s","Frg6f3","t21cq0","Bcdw1i0","Bo70h7d","selectedCheck","multiselectCheck","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","B7ck84d","Brf1p80","Bkfmm31","Bqenvij","a9b677","selectedMultiselectCheck","De3pzq","checkDisabled","multiselectCheckDisabled","d","p","h","a","m","useOptionStyles_unstable","state","multiselect","styles","className"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["useOptionStyles.styles.js"],"sourcesContent":["'use client';\nimport { tokens } from '@fluentui/react-theme';\nimport { ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE } from '@fluentui/react-aria';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nexport const optionClassNames = {\n root: 'fui-Option',\n checkIcon: 'fui-Option__checkIcon'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n alignItems: 'center',\n borderRadius: tokens.borderRadiusMedium,\n color: tokens.colorNeutralForeground1,\n columnGap: tokens.spacingHorizontalXS,\n cursor: 'pointer',\n display: 'flex',\n fontFamily: tokens.fontFamilyBase,\n fontSize: tokens.fontSizeBase300,\n lineHeight: tokens.lineHeightBase300,\n padding: `${tokens.spacingVerticalSNudge} ${tokens.spacingHorizontalS}`,\n position: 'relative'\n },\n interactive: {\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n color: tokens.colorNeutralForeground1Hover,\n [`& .${optionClassNames.checkIcon}`]: shorthands.borderColor(tokens.colorNeutralForeground1Hover)\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n color: tokens.colorNeutralForeground1Pressed,\n [`& .${optionClassNames.checkIcon}`]: shorthands.borderColor(tokens.colorNeutralForeground1Hover)\n }\n },\n active: {\n [`[${ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE}]::after`]: {\n content: '\"\"',\n position: 'absolute',\n pointerEvents: 'none',\n zIndex: 1,\n border: `2px solid ${tokens.colorStrokeFocus2}`,\n borderRadius: tokens.borderRadiusMedium,\n top: '-2px',\n bottom: '-2px',\n left: '-2px',\n right: '-2px'\n }\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'default',\n '@media (forced-colors: active)': {\n color: 'GrayText'\n }\n },\n selected: {},\n checkIcon: {\n flexShrink: 0,\n fontSize: tokens.fontSizeBase400,\n // Shift icon(s) to the left to give text content extra spacing without needing an extra node\n // This is done instead of gap since the extra space only exists between icon > content, not icon > icon\n marginLeft: `calc(${tokens.spacingHorizontalXXS} * -1)`,\n marginRight: tokens.spacingHorizontalXXS,\n visibility: 'hidden',\n '& svg': {\n display: 'block'\n }\n },\n selectedCheck: {\n visibility: 'visible'\n },\n multiselectCheck: {\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,\n borderRadius: tokens.borderRadiusSmall,\n boxSizing: 'border-box',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n fill: 'currentColor',\n fontSize: '12px',\n height: '16px',\n width: '16px',\n visibility: 'visible'\n },\n selectedMultiselectCheck: {\n backgroundColor: tokens.colorCompoundBrandBackground,\n color: tokens.colorNeutralForegroundInverted,\n ...shorthands.borderColor(tokens.colorCompoundBrandBackground)\n },\n checkDisabled: {\n color: tokens.colorNeutralForegroundDisabled,\n '@media (forced-colors: active)': {\n color: 'GrayText'\n }\n },\n multiselectCheckDisabled: shorthands.borderColor(tokens.colorNeutralForegroundDisabled)\n});\n/**\n * Apply styling to the Option slots based on the state\n */ export const useOptionStyles_unstable = (state)=>{\n const { disabled, multiselect, selected } = state;\n const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(optionClassNames.root, styles.root, !disabled && styles.interactive, styles.active, disabled && styles.disabled, selected && styles.selected, state.root.className);\n if (state.checkIcon) {\n // eslint-disable-next-line react-hooks/immutability\n state.checkIcon.className = mergeClasses(optionClassNames.checkIcon, styles.checkIcon, multiselect && styles.multiselectCheck, selected && styles.selectedCheck, selected && multiselect && styles.selectedMultiselectCheck, disabled && styles.checkDisabled, disabled && multiselect && styles.multiselectCheckDisabled, state.checkIcon.className);\n }\n return state;\n};\n"],"names":["tokens","ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE","__styles","mergeClasses","shorthands","optionClassNames","root","checkIcon","useStyles","Bt984gj","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","sj55zd","i8kkvl","Bceei9c","mc9l5x","Bahqtrf","Be2twd7","Bg96gwp","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","qhf8xq","interactive","Jwef8y","Bi91k9c","zqbkvg","h82x05","cqj998","j3hlsh","ecr2s2","lj723h","Btxx2vb","sltcwy","dnwvvm","Blyvkvs","active","Bowz1zl","oxogb1","Ix2sn8","q7v32p","B7cbj04","Bewtojm","b50fsz","B1wzb3v","Bqwk70n","B37u8z8","avt0cx","f0sref","B9fkznv","Be3o27t","Bertapg","B53xpsf","Bsv72rj","B39dzdd","Btq9bd3","Bqfxd14","atup0s","Fffuxt","Bttcd12","Beitzug","Bqougee","B86i8pi","Bhijsxg","kktds4","Bmau3bo","npektv","disabled","B7iucu3","selected","Bnnss6s","Frg6f3","t21cq0","Bcdw1i0","Bo70h7d","selectedCheck","multiselectCheck","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","B7ck84d","Brf1p80","Bkfmm31","Bqenvij","a9b677","selectedMultiselectCheck","De3pzq","checkDisabled","multiselectCheckDisabled","d","p","h","a","m","useOptionStyles_unstable","state","multiselect","styles","className"],"mappings":"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"}
|
|
@@ -38,7 +38,9 @@ const optionClassNames = {
|
|
|
38
38
|
fontSize: _reacttheme.tokens.fontSizeBase300,
|
|
39
39
|
lineHeight: _reacttheme.tokens.lineHeightBase300,
|
|
40
40
|
padding: `${_reacttheme.tokens.spacingVerticalSNudge} ${_reacttheme.tokens.spacingHorizontalS}`,
|
|
41
|
-
position: 'relative'
|
|
41
|
+
position: 'relative'
|
|
42
|
+
},
|
|
43
|
+
interactive: {
|
|
42
44
|
':hover': {
|
|
43
45
|
backgroundColor: _reacttheme.tokens.colorNeutralBackground1Hover,
|
|
44
46
|
color: _reacttheme.tokens.colorNeutralForeground1Hover,
|
|
@@ -66,16 +68,7 @@ const optionClassNames = {
|
|
|
66
68
|
},
|
|
67
69
|
disabled: {
|
|
68
70
|
color: _reacttheme.tokens.colorNeutralForegroundDisabled,
|
|
69
|
-
|
|
70
|
-
backgroundColor: _reacttheme.tokens.colorTransparentBackground,
|
|
71
|
-
color: _reacttheme.tokens.colorNeutralForegroundDisabled,
|
|
72
|
-
[`& .${optionClassNames.checkIcon}`]: _react.shorthands.borderColor(_reacttheme.tokens.colorNeutralForegroundDisabled)
|
|
73
|
-
},
|
|
74
|
-
':active': {
|
|
75
|
-
backgroundColor: _reacttheme.tokens.colorTransparentBackground,
|
|
76
|
-
color: _reacttheme.tokens.colorNeutralForegroundDisabled,
|
|
77
|
-
[`& .${optionClassNames.checkIcon}`]: _react.shorthands.borderColor(_reacttheme.tokens.colorNeutralForegroundDisabled)
|
|
78
|
-
},
|
|
71
|
+
cursor: 'default',
|
|
79
72
|
'@media (forced-colors: active)': {
|
|
80
73
|
color: 'GrayText'
|
|
81
74
|
}
|
|
@@ -123,11 +116,12 @@ const optionClassNames = {
|
|
|
123
116
|
multiselectCheckDisabled: _react.shorthands.borderColor(_reacttheme.tokens.colorNeutralForegroundDisabled)
|
|
124
117
|
});
|
|
125
118
|
const useOptionStyles_unstable = (state)=>{
|
|
126
|
-
'use no memo';
|
|
127
119
|
const { disabled, multiselect, selected } = state;
|
|
128
120
|
const styles = useStyles();
|
|
129
|
-
|
|
121
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
122
|
+
state.root.className = (0, _react.mergeClasses)(optionClassNames.root, styles.root, !disabled && styles.interactive, styles.active, disabled && styles.disabled, selected && styles.selected, state.root.className);
|
|
130
123
|
if (state.checkIcon) {
|
|
124
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
131
125
|
state.checkIcon.className = (0, _react.mergeClasses)(optionClassNames.checkIcon, styles.checkIcon, multiselect && styles.multiselectCheck, selected && styles.selectedCheck, selected && multiselect && styles.selectedMultiselectCheck, disabled && styles.checkDisabled, disabled && multiselect && styles.multiselectCheckDisabled, state.checkIcon.className);
|
|
132
126
|
}
|
|
133
127
|
return state;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Option/useOptionStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE } from '@fluentui/react-aria';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { OptionSlots, OptionState } from './Option.types';\n\nexport const optionClassNames: SlotClassNames<OptionSlots> = {\n root: 'fui-Option',\n checkIcon: 'fui-Option__checkIcon',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n alignItems: 'center',\n borderRadius: tokens.borderRadiusMedium,\n color: tokens.colorNeutralForeground1,\n columnGap: tokens.spacingHorizontalXS,\n cursor: 'pointer',\n display: 'flex',\n fontFamily: tokens.fontFamilyBase,\n fontSize: tokens.fontSizeBase300,\n lineHeight: tokens.lineHeightBase300,\n padding: `${tokens.spacingVerticalSNudge} ${tokens.spacingHorizontalS}`,\n position: 'relative',\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n color: tokens.colorNeutralForeground1Hover,\n [`& .${optionClassNames.checkIcon}`]: shorthands.borderColor(tokens.colorNeutralForeground1Hover),\n },\n\n ':active': {\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n color: tokens.colorNeutralForeground1Pressed,\n [`& .${optionClassNames.checkIcon}`]: shorthands.borderColor(tokens.colorNeutralForeground1Hover),\n },\n },\n\n active: {\n [`[${ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE}]::after`]: {\n content: '\"\"',\n position: 'absolute',\n pointerEvents: 'none',\n zIndex: 1,\n\n border: `2px solid ${tokens.colorStrokeFocus2}`,\n borderRadius: tokens.borderRadiusMedium,\n\n top: '-2px',\n bottom: '-2px',\n left: '-2px',\n right: '-2px',\n },\n },\n\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n
|
|
1
|
+
{"version":3,"sources":["../src/components/Option/useOptionStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE } from '@fluentui/react-aria';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { OptionSlots, OptionState } from './Option.types';\n\nexport const optionClassNames: SlotClassNames<OptionSlots> = {\n root: 'fui-Option',\n checkIcon: 'fui-Option__checkIcon',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n alignItems: 'center',\n borderRadius: tokens.borderRadiusMedium,\n color: tokens.colorNeutralForeground1,\n columnGap: tokens.spacingHorizontalXS,\n cursor: 'pointer',\n display: 'flex',\n fontFamily: tokens.fontFamilyBase,\n fontSize: tokens.fontSizeBase300,\n lineHeight: tokens.lineHeightBase300,\n padding: `${tokens.spacingVerticalSNudge} ${tokens.spacingHorizontalS}`,\n position: 'relative',\n },\n\n interactive: {\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n color: tokens.colorNeutralForeground1Hover,\n [`& .${optionClassNames.checkIcon}`]: shorthands.borderColor(tokens.colorNeutralForeground1Hover),\n },\n\n ':active': {\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n color: tokens.colorNeutralForeground1Pressed,\n [`& .${optionClassNames.checkIcon}`]: shorthands.borderColor(tokens.colorNeutralForeground1Hover),\n },\n },\n\n active: {\n [`[${ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE}]::after`]: {\n content: '\"\"',\n position: 'absolute',\n pointerEvents: 'none',\n zIndex: 1,\n\n border: `2px solid ${tokens.colorStrokeFocus2}`,\n borderRadius: tokens.borderRadiusMedium,\n\n top: '-2px',\n bottom: '-2px',\n left: '-2px',\n right: '-2px',\n },\n },\n\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'default',\n\n '@media (forced-colors: active)': {\n color: 'GrayText',\n },\n },\n\n selected: {},\n\n checkIcon: {\n flexShrink: 0,\n fontSize: tokens.fontSizeBase400,\n // Shift icon(s) to the left to give text content extra spacing without needing an extra node\n // This is done instead of gap since the extra space only exists between icon > content, not icon > icon\n marginLeft: `calc(${tokens.spacingHorizontalXXS} * -1)`,\n marginRight: tokens.spacingHorizontalXXS,\n visibility: 'hidden',\n\n '& svg': {\n display: 'block',\n },\n },\n\n selectedCheck: {\n visibility: 'visible',\n },\n\n multiselectCheck: {\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,\n borderRadius: tokens.borderRadiusSmall,\n boxSizing: 'border-box',\n\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n\n fill: 'currentColor',\n fontSize: '12px',\n height: '16px',\n width: '16px',\n visibility: 'visible',\n },\n\n selectedMultiselectCheck: {\n backgroundColor: tokens.colorCompoundBrandBackground,\n color: tokens.colorNeutralForegroundInverted,\n ...shorthands.borderColor(tokens.colorCompoundBrandBackground),\n },\n\n checkDisabled: {\n color: tokens.colorNeutralForegroundDisabled,\n\n '@media (forced-colors: active)': {\n color: 'GrayText',\n },\n },\n multiselectCheckDisabled: shorthands.borderColor(tokens.colorNeutralForegroundDisabled),\n});\n\n/**\n * Apply styling to the Option slots based on the state\n */\nexport const useOptionStyles_unstable = (state: OptionState): OptionState => {\n const { disabled, multiselect, selected } = state;\n const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n optionClassNames.root,\n styles.root,\n !disabled && styles.interactive,\n styles.active,\n disabled && styles.disabled,\n selected && styles.selected,\n state.root.className,\n );\n\n if (state.checkIcon) {\n // eslint-disable-next-line react-hooks/immutability\n state.checkIcon.className = mergeClasses(\n optionClassNames.checkIcon,\n styles.checkIcon,\n multiselect && styles.multiselectCheck,\n selected && styles.selectedCheck,\n selected && multiselect && styles.selectedMultiselectCheck,\n disabled && styles.checkDisabled,\n disabled && multiselect && styles.multiselectCheckDisabled,\n state.checkIcon.className,\n );\n }\n\n return state;\n};\n"],"names":["tokens","ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE","makeStyles","mergeClasses","shorthands","optionClassNames","root","checkIcon","useStyles","alignItems","borderRadius","borderRadiusMedium","color","colorNeutralForeground1","columnGap","spacingHorizontalXS","cursor","display","fontFamily","fontFamilyBase","fontSize","fontSizeBase300","lineHeight","lineHeightBase300","padding","spacingVerticalSNudge","spacingHorizontalS","position","interactive","backgroundColor","colorNeutralBackground1Hover","colorNeutralForeground1Hover","borderColor","colorNeutralBackground1Pressed","colorNeutralForeground1Pressed","active","content","pointerEvents","zIndex","border","colorStrokeFocus2","top","bottom","left","right","disabled","colorNeutralForegroundDisabled","selected","flexShrink","fontSizeBase400","marginLeft","spacingHorizontalXXS","marginRight","visibility","selectedCheck","multiselectCheck","strokeWidthThin","colorNeutralStrokeAccessible","borderRadiusSmall","boxSizing","justifyContent","fill","height","width","selectedMultiselectCheck","colorCompoundBrandBackground","colorNeutralForegroundInverted","checkDisabled","multiselectCheckDisabled","useOptionStyles_unstable","state","multiselect","styles","className"],"mappings":"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"}
|
|
@@ -99,10 +99,11 @@ const optionGroupClassNames = {
|
|
|
99
99
|
]
|
|
100
100
|
});
|
|
101
101
|
const useOptionGroupStyles_unstable = (state)=>{
|
|
102
|
-
'use no memo';
|
|
103
102
|
const styles = useStyles();
|
|
103
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
104
104
|
state.root.className = (0, _react.mergeClasses)(optionGroupClassNames.root, styles.root, state.root.className);
|
|
105
105
|
if (state.label) {
|
|
106
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
106
107
|
state.label.className = (0, _react.mergeClasses)(optionGroupClassNames.label, styles.label, state.label.className);
|
|
107
108
|
}
|
|
108
109
|
return state;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useOptionGroupStyles.styles.js"],"sourcesContent":["'use client';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nexport const optionGroupClassNames = {\n root: 'fui-OptionGroup',\n label: 'fui-OptionGroup__label'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'column',\n rowGap: tokens.spacingHorizontalXXS,\n '&:not(:last-child)::after': {\n content: '\"\"',\n borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`,\n display: 'block',\n paddingBottom: tokens.spacingHorizontalXS,\n margin: `0 ${`calc(${tokens.spacingHorizontalXS} * -1)`} ${tokens.spacingVerticalXS}`\n }\n },\n label: {\n borderRadius: tokens.borderRadiusMedium,\n color: tokens.colorNeutralForeground3,\n display: 'block',\n fontSize: tokens.fontSizeBase200,\n fontWeight: tokens.fontWeightSemibold,\n lineHeight: tokens.lineHeightBase200,\n padding: `${tokens.spacingHorizontalS} ${tokens.spacingHorizontalSNudge}`\n }\n});\n/**\n * Apply styling to the OptionGroup slots based on the state\n */ export const useOptionGroupStyles_unstable = (state)=>{\n
|
|
1
|
+
{"version":3,"sources":["useOptionGroupStyles.styles.js"],"sourcesContent":["'use client';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nexport const optionGroupClassNames = {\n root: 'fui-OptionGroup',\n label: 'fui-OptionGroup__label'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'column',\n rowGap: tokens.spacingHorizontalXXS,\n '&:not(:last-child)::after': {\n content: '\"\"',\n borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`,\n display: 'block',\n paddingBottom: tokens.spacingHorizontalXS,\n margin: `0 ${`calc(${tokens.spacingHorizontalXS} * -1)`} ${tokens.spacingVerticalXS}`\n }\n },\n label: {\n borderRadius: tokens.borderRadiusMedium,\n color: tokens.colorNeutralForeground3,\n display: 'block',\n fontSize: tokens.fontSizeBase200,\n fontWeight: tokens.fontWeightSemibold,\n lineHeight: tokens.lineHeightBase200,\n padding: `${tokens.spacingHorizontalS} ${tokens.spacingHorizontalSNudge}`\n }\n});\n/**\n * Apply styling to the OptionGroup slots based on the state\n */ export const useOptionGroupStyles_unstable = (state)=>{\n const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(optionGroupClassNames.root, styles.root, state.root.className);\n if (state.label) {\n // eslint-disable-next-line react-hooks/immutability\n state.label.className = mergeClasses(optionGroupClassNames.label, styles.label, state.label.className);\n }\n return state;\n};\n"],"names":["tokens","__styles","mergeClasses","optionGroupClassNames","root","label","useStyles","mc9l5x","Beiy3e4","Belr9w4","B8lkq7l","eii1in","H93o2g","Gwp8xu","Bd39igo","om0q45","Hl9o3s","sl1c2c","z4hxbw","B0i58d9","Bi9x0x4","Bgurq3m","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","sj55zd","Be2twd7","Bhrd7zp","Bg96gwp","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","d","p","useOptionGroupStyles_unstable","state","styles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAGCG,qBAAqB;;;IA+BjBmC,6BAA6B;;;;uBAhCL,gBAAgB;AAClD,8BAA8B;IACjClC,IAAI,EAAE,iBAAiB;IACvBC,KAAK,EAAE;AACX,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGL,eAAA,EAAA;IAAAG,IAAA,EAAA;QAAAG,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAhB,KAAA,EAAA;QAAAiB,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAApB,MAAA,EAAA;QAAAqB,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;KAAA;AAAA,CAsBrB,CAAC;AAGS,sCAAuCE,KAAK,IAAG;IACtD,MAAMC,MAAM,GAAGlC,SAAS,CAAC,CAAC;IAC1B,oDAAA;IACAiC,KAAK,CAACnC,IAAI,CAACqC,SAAS,GAAGvC,uBAAY,EAACC,qBAAqB,CAACC,IAAI,EAAEoC,MAAM,CAACpC,IAAI,EAAEmC,KAAK,CAACnC,IAAI,CAACqC,SAAS,CAAC;IAClG,IAAIF,KAAK,CAAClC,KAAK,EAAE;QACb,oDAAA;QACAkC,KAAK,CAAClC,KAAK,CAACoC,SAAS,OAAGvC,mBAAY,EAACC,qBAAqB,CAACE,KAAK,EAAEmC,MAAM,CAACnC,KAAK,EAAEkC,KAAK,CAAClC,KAAK,CAACoC,SAAS,CAAC;IAC1G;IACA,OAAOF,KAAK;AAChB,CAAC"}
|
|
@@ -49,10 +49,11 @@ const optionGroupClassNames = {
|
|
|
49
49
|
}
|
|
50
50
|
});
|
|
51
51
|
const useOptionGroupStyles_unstable = (state)=>{
|
|
52
|
-
'use no memo';
|
|
53
52
|
const styles = useStyles();
|
|
53
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
54
54
|
state.root.className = (0, _react.mergeClasses)(optionGroupClassNames.root, styles.root, state.root.className);
|
|
55
55
|
if (state.label) {
|
|
56
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
56
57
|
state.label.className = (0, _react.mergeClasses)(optionGroupClassNames.label, styles.label, state.label.className);
|
|
57
58
|
}
|
|
58
59
|
return state;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/OptionGroup/useOptionGroupStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { OptionGroupSlots, OptionGroupState } from './OptionGroup.types';\n\nexport const optionGroupClassNames: SlotClassNames<OptionGroupSlots> = {\n root: 'fui-OptionGroup',\n label: 'fui-OptionGroup__label',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'column',\n rowGap: tokens.spacingHorizontalXXS,\n\n '&:not(:last-child)::after': {\n content: '\"\"',\n borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`,\n display: 'block',\n paddingBottom: tokens.spacingHorizontalXS,\n margin: `0 ${`calc(${tokens.spacingHorizontalXS} * -1)`} ${tokens.spacingVerticalXS}`,\n },\n },\n\n label: {\n borderRadius: tokens.borderRadiusMedium,\n color: tokens.colorNeutralForeground3,\n display: 'block',\n fontSize: tokens.fontSizeBase200,\n fontWeight: tokens.fontWeightSemibold,\n lineHeight: tokens.lineHeightBase200,\n padding: `${tokens.spacingHorizontalS} ${tokens.spacingHorizontalSNudge}`,\n },\n});\n\n/**\n * Apply styling to the OptionGroup slots based on the state\n */\nexport const useOptionGroupStyles_unstable = (state: OptionGroupState): OptionGroupState => {\n
|
|
1
|
+
{"version":3,"sources":["../src/components/OptionGroup/useOptionGroupStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { OptionGroupSlots, OptionGroupState } from './OptionGroup.types';\n\nexport const optionGroupClassNames: SlotClassNames<OptionGroupSlots> = {\n root: 'fui-OptionGroup',\n label: 'fui-OptionGroup__label',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'column',\n rowGap: tokens.spacingHorizontalXXS,\n\n '&:not(:last-child)::after': {\n content: '\"\"',\n borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`,\n display: 'block',\n paddingBottom: tokens.spacingHorizontalXS,\n margin: `0 ${`calc(${tokens.spacingHorizontalXS} * -1)`} ${tokens.spacingVerticalXS}`,\n },\n },\n\n label: {\n borderRadius: tokens.borderRadiusMedium,\n color: tokens.colorNeutralForeground3,\n display: 'block',\n fontSize: tokens.fontSizeBase200,\n fontWeight: tokens.fontWeightSemibold,\n lineHeight: tokens.lineHeightBase200,\n padding: `${tokens.spacingHorizontalS} ${tokens.spacingHorizontalSNudge}`,\n },\n});\n\n/**\n * Apply styling to the OptionGroup slots based on the state\n */\nexport const useOptionGroupStyles_unstable = (state: OptionGroupState): OptionGroupState => {\n const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(optionGroupClassNames.root, styles.root, state.root.className);\n\n if (state.label) {\n // eslint-disable-next-line react-hooks/immutability\n state.label.className = mergeClasses(optionGroupClassNames.label, styles.label, state.label.className);\n }\n\n return state;\n};\n"],"names":["tokens","makeStyles","mergeClasses","optionGroupClassNames","root","label","useStyles","display","flexDirection","rowGap","spacingHorizontalXXS","content","borderBottom","strokeWidthThin","colorNeutralStroke2","paddingBottom","spacingHorizontalXS","margin","spacingVerticalXS","borderRadius","borderRadiusMedium","color","colorNeutralForeground3","fontSize","fontSizeBase200","fontWeight","fontWeightSemibold","lineHeight","lineHeightBase200","padding","spacingHorizontalS","spacingHorizontalSNudge","useOptionGroupStyles_unstable","state","styles","className"],"mappings":"AAAA;;;;;;;;;;;;IAOaG,qBAAAA;;;iCAqCA6B;;;;4BA1CU,wBAAwB;uBAEN,iBAAiB;AAGnD,8BAAgE;IACrE5B,MAAM;IACNC,OAAO;AACT,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYL,iBAAAA,EAAW;IAC3BG,MAAM;QACJG,SAAS;QACTC,eAAe;QACfC,QAAQT,kBAAAA,CAAOU,oBAAoB;QAEnC,6BAA6B;YAC3BC,SAAS;YACTC,cAAc,GAAGZ,kBAAAA,CAAOa,eAAe,CAAC,OAAO,EAAEb,kBAAAA,CAAOc,mBAAmB,EAAE;YAC7EP,SAAS;YACTQ,eAAef,kBAAAA,CAAOgB,mBAAmB;YACzCC,QAAQ,CAAC,EAAE,EAAE,CAAC,KAAK,EAAEjB,kBAAAA,CAAOgB,mBAAmB,CAAC,MAAM,CAAC,CAAC,CAAC,EAAEhB,kBAAAA,CAAOkB,iBAAiB,EAAE;QACvF;IACF;IAEAb,OAAO;QACLc,cAAcnB,kBAAAA,CAAOoB,kBAAkB;QACvCC,OAAOrB,kBAAAA,CAAOsB,uBAAuB;QACrCf,SAAS;QACTgB,UAAUvB,kBAAAA,CAAOwB,eAAe;QAChCC,YAAYzB,kBAAAA,CAAO0B,kBAAkB;QACrCC,YAAY3B,kBAAAA,CAAO4B,iBAAiB;QACpCC,SAAS,GAAG7B,kBAAAA,CAAO8B,kBAAkB,CAAC,CAAC,EAAE9B,kBAAAA,CAAO+B,uBAAuB,EAAE;IAC3E;AACF;AAKO,MAAMC,gCAAgC,CAACC;IAC5C,MAAMC,SAAS5B;IACf,oDAAoD;IACpD2B,MAAM7B,IAAI,CAAC+B,SAAS,GAAGjC,uBAAAA,EAAaC,sBAAsBC,IAAI,EAAE8B,OAAO9B,IAAI,EAAE6B,MAAM7B,IAAI,CAAC+B,SAAS;IAEjG,IAAIF,MAAM5B,KAAK,EAAE;QACf,oDAAoD;QACpD4B,MAAM5B,KAAK,CAAC8B,SAAS,OAAGjC,mBAAAA,EAAaC,sBAAsBE,KAAK,EAAE6B,OAAO7B,KAAK,EAAE4B,MAAM5B,KAAK,CAAC8B,SAAS;IACvG;IAEA,OAAOF;AACT,EAAE"}
|
package/lib-commonjs/index.js
CHANGED
|
@@ -37,6 +37,9 @@ _export(exports, {
|
|
|
37
37
|
dropdownClassNames: function() {
|
|
38
38
|
return _Dropdown.dropdownClassNames;
|
|
39
39
|
},
|
|
40
|
+
isComboboxOptionElement: function() {
|
|
41
|
+
return _isComboboxOptionElement.isComboboxOptionElement;
|
|
42
|
+
},
|
|
40
43
|
listboxClassNames: function() {
|
|
41
44
|
return _Listbox.listboxClassNames;
|
|
42
45
|
},
|
|
@@ -139,3 +142,4 @@ const _useComboboxBaseState = require("./utils/useComboboxBaseState");
|
|
|
139
142
|
const _useButtonTriggerSlot = require("./components/Dropdown/useButtonTriggerSlot");
|
|
140
143
|
const _useInputTriggerSlot = require("./components/Combobox/useInputTriggerSlot");
|
|
141
144
|
const _useListboxSlot = require("./utils/useListboxSlot");
|
|
145
|
+
const _isComboboxOptionElement = require("./utils/isComboboxOptionElement");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport { ComboboxProvider } from './contexts/ComboboxContext';\nexport type { ComboboxContextValue } from './contexts/ComboboxContext';\nexport { ListboxProvider, useListboxContext_unstable } from './contexts/ListboxContext';\nexport type { ListboxContextValue } from './contexts/ListboxContext';\nexport { useComboboxContextValues } from './contexts/useComboboxContextValues';\nexport { useListboxContextValues } from './contexts/useListboxContextValues';\nexport {\n Listbox,\n listboxClassNames,\n renderListbox_unstable,\n useListboxStyles_unstable,\n useListbox_unstable,\n} from './Listbox';\nexport type { ListboxContextValues, ListboxProps, ListboxSlots, ListboxState } from './Listbox';\nexport {\n Option,\n optionClassNames,\n renderOption_unstable,\n useOptionStyles_unstable,\n useOption_unstable,\n useOptionBase_unstable,\n} from './Option';\nexport type { OptionProps, OptionSlots, OptionState } from './Option';\nexport {\n Combobox,\n comboboxClassNames,\n renderCombobox_unstable,\n useComboboxStyles_unstable,\n useComboboxBase_unstable,\n useCombobox_unstable,\n} from './Combobox';\nexport type {\n BaseComboboxProps,\n BaseComboboxState,\n ComboboxContextValues,\n ComboboxOpenChangeData,\n ComboboxOpenEvents,\n ComboboxProps,\n ComboboxSlots,\n ComboboxState,\n} from './Combobox';\nexport {\n Dropdown,\n dropdownClassNames,\n renderDropdown_unstable,\n useDropdownStyles_unstable,\n useDropdownBase_unstable,\n useDropdown_unstable,\n} from './Dropdown';\nexport type {\n DropdownBaseHookProps,\n DropdownBaseHookState,\n DropdownContextValues,\n DropdownOpenChangeData,\n DropdownOpenEvents,\n DropdownProps,\n DropdownSlots,\n DropdownState,\n} from './Dropdown';\nexport {\n OptionGroup,\n optionGroupClassNames,\n renderOptionGroup_unstable,\n useOptionGroupStyles_unstable,\n useOptionGroup_unstable,\n} from './OptionGroup';\nexport type { OptionGroupProps, OptionGroupSlots, OptionGroupState } from './OptionGroup';\nexport type { OptionOnSelectData, SelectionEvents } from './Selection';\n\nexport { useComboboxFilter } from './hooks/useComboboxFilter';\n\n// internals splitting the combobox logic into state hook and slot hooks\nexport { useComboboxBaseState } from './utils/useComboboxBaseState';\nexport { useButtonTriggerSlot } from './components/Dropdown/useButtonTriggerSlot';\nexport { useInputTriggerSlot } from './components/Combobox/useInputTriggerSlot';\nexport { useListboxSlot } from './utils/useListboxSlot';\nexport type { ComboboxBaseState, ComboboxBaseProps } from './utils/ComboboxBase.types';\n"],"names":["ComboboxProvider","ListboxProvider","useListboxContext_unstable","useComboboxContextValues","useListboxContextValues","Listbox","listboxClassNames","renderListbox_unstable","useListboxStyles_unstable","useListbox_unstable","Option","optionClassNames","renderOption_unstable","useOptionStyles_unstable","useOption_unstable","useOptionBase_unstable","Combobox","comboboxClassNames","renderCombobox_unstable","useComboboxStyles_unstable","useComboboxBase_unstable","useCombobox_unstable","Dropdown","dropdownClassNames","renderDropdown_unstable","useDropdownStyles_unstable","useDropdownBase_unstable","useDropdown_unstable","OptionGroup","optionGroupClassNames","renderOptionGroup_unstable","useOptionGroupStyles_unstable","useOptionGroup_unstable","useComboboxFilter","useComboboxBaseState","useButtonTriggerSlot","useInputTriggerSlot","useListboxSlot"],"mappings":"AAAA,4DAA4D;;;;;;;;;;;;;eAyB1DgB,kBAAQ
|
|
1
|
+
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport { ComboboxProvider } from './contexts/ComboboxContext';\nexport type { ComboboxContextValue } from './contexts/ComboboxContext';\nexport { ListboxProvider, useListboxContext_unstable } from './contexts/ListboxContext';\nexport type { ListboxContextValue } from './contexts/ListboxContext';\nexport { useComboboxContextValues } from './contexts/useComboboxContextValues';\nexport { useListboxContextValues } from './contexts/useListboxContextValues';\nexport {\n Listbox,\n listboxClassNames,\n renderListbox_unstable,\n useListboxStyles_unstable,\n useListbox_unstable,\n} from './Listbox';\nexport type { ListboxContextValues, ListboxProps, ListboxSlots, ListboxState } from './Listbox';\nexport {\n Option,\n optionClassNames,\n renderOption_unstable,\n useOptionStyles_unstable,\n useOption_unstable,\n useOptionBase_unstable,\n} from './Option';\nexport type { OptionProps, OptionSlots, OptionState } from './Option';\nexport {\n Combobox,\n comboboxClassNames,\n renderCombobox_unstable,\n useComboboxStyles_unstable,\n useComboboxBase_unstable,\n useCombobox_unstable,\n} from './Combobox';\nexport type {\n BaseComboboxProps,\n BaseComboboxState,\n ComboboxContextValues,\n ComboboxOpenChangeData,\n ComboboxOpenEvents,\n ComboboxProps,\n ComboboxSlots,\n ComboboxState,\n} from './Combobox';\nexport {\n Dropdown,\n dropdownClassNames,\n renderDropdown_unstable,\n useDropdownStyles_unstable,\n useDropdownBase_unstable,\n useDropdown_unstable,\n} from './Dropdown';\nexport type {\n DropdownBaseHookProps,\n DropdownBaseHookState,\n DropdownContextValues,\n DropdownOpenChangeData,\n DropdownOpenEvents,\n DropdownProps,\n DropdownSlots,\n DropdownState,\n} from './Dropdown';\nexport {\n OptionGroup,\n optionGroupClassNames,\n renderOptionGroup_unstable,\n useOptionGroupStyles_unstable,\n useOptionGroup_unstable,\n} from './OptionGroup';\nexport type { OptionGroupProps, OptionGroupSlots, OptionGroupState } from './OptionGroup';\nexport type { OptionOnSelectData, SelectionEvents } from './Selection';\n\nexport { useComboboxFilter } from './hooks/useComboboxFilter';\n\n// internals splitting the combobox logic into state hook and slot hooks\nexport { useComboboxBaseState } from './utils/useComboboxBaseState';\nexport { useButtonTriggerSlot } from './components/Dropdown/useButtonTriggerSlot';\nexport { useInputTriggerSlot } from './components/Combobox/useInputTriggerSlot';\nexport { useListboxSlot } from './utils/useListboxSlot';\nexport type { ComboboxBaseState, ComboboxBaseProps } from './utils/ComboboxBase.types';\nexport { isComboboxOptionElement } from './utils/isComboboxOptionElement';\n"],"names":["ComboboxProvider","ListboxProvider","useListboxContext_unstable","useComboboxContextValues","useListboxContextValues","Listbox","listboxClassNames","renderListbox_unstable","useListboxStyles_unstable","useListbox_unstable","Option","optionClassNames","renderOption_unstable","useOptionStyles_unstable","useOption_unstable","useOptionBase_unstable","Combobox","comboboxClassNames","renderCombobox_unstable","useComboboxStyles_unstable","useComboboxBase_unstable","useCombobox_unstable","Dropdown","dropdownClassNames","renderDropdown_unstable","useDropdownStyles_unstable","useDropdownBase_unstable","useDropdown_unstable","OptionGroup","optionGroupClassNames","renderOptionGroup_unstable","useOptionGroupStyles_unstable","useOptionGroup_unstable","useComboboxFilter","useComboboxBaseState","useButtonTriggerSlot","useInputTriggerSlot","useListboxSlot","isComboboxOptionElement"],"mappings":"AAAA,4DAA4D;;;;;;;;;;;;;eAyB1DgB,kBAAQ;;;eAxBDhB,iCAAgB;;;eA0CvBsB,kBAAQ;;;eAnCRjB,gBAAO;;;eALAJ,+BAAe;;;eAatBS,cAAM;;;eA6CNkB,wBAAW;;;eAnCXX,4BAAkB;;;eAkBlBM,4BAAkB;;;eAkCXe,gDAAuB;;;eArE9BhC,0BAAiB;;IAQjBK;uCAAgB;;;eA6ChBkB,kCAAqB;;;eAnCrBX,iCAAuB;;IAkBvBM,uBAAuB;;;;eAnCvBjB,+BAAsB;;8BAqDI;eAA1BuB;;;eA7CAlB,6BAAqB;;IAwDduB,oBAAoB;;;IADpBD,oBAAoB;;;;eA5C3Bd,kCAAwB;;;eAxBjBjB,kDAAwB;;qBAiEP;eAAjB8B;;;eA1CPd,oCAA0B;;;eAE1BE,8BAAoB;;;eAiBpBK,kCAAwB;;;eADxBD,oCAA0B;;wBAEN;eAApBE;;IA2BOS;uDAAmB;;IArEnBhC;+DAAuB;;;eAHNF,0CAA0B;;;eAyE3CmC,8BAAc;;;eAjErB7B,kCAAyB;;;eACzBC,4BAAmB;;;eASnBM,8BAAsB;;;eA2CtBgB,0CAA6B;;;eAC7BC,oCAAuB;;IA9CvBnB;+CAAwB;;;eACxBC,0BAAkB;;;iCAnBa,6BAA6B;gCAEF,4BAA4B;0CAE/C,sCAAsC;yCACvC,qCAAqC;yBAOtE,YAAY;wBASZ,WAAW;0BASX,aAAa;0BAkBb,aAAa;6BAiBb,gBAAgB;mCAIW,4BAA4B;sCAGzB,+BAA+B;sCAC/B,6CAA6C;qCAC9C,4CAA4C;gCACjD,yBAAyB;yCAEhB,kCAAkC"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Checks whether the given element is a combobox option element.
|
|
3
|
+
* Supports elements with role="option" or role="menuitemcheckbox".
|
|
4
|
+
*
|
|
5
|
+
* @param element - the element to check
|
|
6
|
+
* @returns true if the element has a valid combobox option role, false otherwise
|
|
7
|
+
*/ "use strict";
|
|
8
|
+
Object.defineProperty(exports, "__esModule", {
|
|
9
|
+
value: true
|
|
10
|
+
});
|
|
11
|
+
Object.defineProperty(exports, "isComboboxOptionElement", {
|
|
12
|
+
enumerable: true,
|
|
13
|
+
get: function() {
|
|
14
|
+
return isComboboxOptionElement;
|
|
15
|
+
}
|
|
16
|
+
});
|
|
17
|
+
function isComboboxOptionElement(element) {
|
|
18
|
+
return element.role === 'option' || element.role === 'menuitemcheckbox';
|
|
19
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/utils/isComboboxOptionElement.ts"],"sourcesContent":["/**\n * Checks whether the given element is a combobox option element.\n * Supports elements with role=\"option\" or role=\"menuitemcheckbox\".\n *\n * @param element - the element to check\n * @returns true if the element has a valid combobox option role, false otherwise\n */\nexport function isComboboxOptionElement(element: HTMLElement): boolean {\n return element.role === 'option' || element.role === 'menuitemcheckbox';\n}\n"],"names":["isComboboxOptionElement","element","role"],"mappings":"AAAA;;;;;;CAMC,GACD;;;;;;;;;;AAAO,SAASA,wBAAwBC,OAAoB;IAC1D,OAAOA,QAAQC,IAAI,KAAK,YAAYD,QAAQC,IAAI,KAAK;AACvD"}
|
|
@@ -16,7 +16,6 @@ const _reactutilities = require("@fluentui/react-utilities");
|
|
|
16
16
|
const _useOptionCollection = require("../utils/useOptionCollection");
|
|
17
17
|
const _useSelection = require("../utils/useSelection");
|
|
18
18
|
const useComboboxBaseState = (props)=>{
|
|
19
|
-
'use no memo';
|
|
20
19
|
const { appearance = 'outline', disableAutoFocus, children, clearable = false, editable = false, inlinePopup = false, mountNode = undefined, multiselect, onOpenChange, size = 'medium', activeDescendantController, freeform = false, disabled = false, onActiveOptionChange = null } = props;
|
|
21
20
|
const optionCollection = (0, _useOptionCollection.useOptionCollection)();
|
|
22
21
|
const { getOptionsMatchingValue } = optionCollection;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/utils/useComboboxBaseState.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { useControllableState, useEventCallback, useFirstMount } from '@fluentui/react-utilities';\nimport type { ActiveDescendantChangeEvent, ActiveDescendantImperativeRef } from '@fluentui/react-aria';\nimport { useOptionCollection } from '../utils/useOptionCollection';\nimport type { OptionValue } from '../utils/OptionCollection.types';\nimport { useSelection } from '../utils/useSelection';\nimport type { ComboboxBaseProps, ComboboxBaseOpenEvents, ComboboxBaseState } from './ComboboxBase.types';\nimport type { SelectionEvents } from './Selection.types';\n\n/**\n * State shared between Combobox and Dropdown components\n *\n * @internal\n */\nexport const useComboboxBaseState = (\n props: ComboboxBaseProps & {\n children?: React.ReactNode;\n editable?: boolean;\n disabled?: boolean;\n freeform?: boolean;\n activeDescendantController: ActiveDescendantImperativeRef;\n },\n): ComboboxBaseState => {\n 'use no memo';\n\n const {\n appearance = 'outline',\n disableAutoFocus,\n children,\n clearable = false,\n editable = false,\n inlinePopup = false,\n mountNode = undefined,\n multiselect,\n onOpenChange,\n size = 'medium',\n activeDescendantController,\n freeform = false,\n disabled = false,\n onActiveOptionChange = null,\n } = props;\n\n const optionCollection = useOptionCollection();\n const { getOptionsMatchingValue } = optionCollection;\n\n const { getOptionById } = optionCollection;\n const getActiveOption = React.useCallback(() => {\n const activeOptionId = activeDescendantController.active();\n return activeOptionId ? getOptionById(activeOptionId) : undefined;\n }, [activeDescendantController, getOptionById]);\n\n // Keeping some kind of backwards compatible functionality here\n // eslint-disable-next-line @typescript-eslint/naming-convention\n const UNSAFE_activeOption = getActiveOption();\n // eslint-disable-next-line @typescript-eslint/naming-convention\n const UNSAFE_setActiveOption = React.useCallback(\n (option: OptionValue | undefined | ((prev: OptionValue | undefined) => OptionValue | undefined)) => {\n let nextOption: OptionValue | undefined = undefined;\n if (typeof option === 'function') {\n const activeOption = getActiveOption();\n nextOption = option(activeOption);\n }\n\n if (nextOption) {\n activeDescendantController.focus(nextOption.id);\n } else {\n activeDescendantController.blur();\n }\n },\n [activeDescendantController, getActiveOption],\n );\n\n // track whether keyboard focus outline should be shown\n // tabster/keyborg doesn't work here, since the actual keyboard focus target doesn't move\n const [focusVisible, setFocusVisible] = React.useState(false);\n\n // track focused state to conditionally render collapsed listbox\n // when the trigger is focused - the listbox should but hidden until the open state is changed\n const [hasFocus, setHasFocus] = React.useState(false);\n\n const ignoreNextBlur = React.useRef(false);\n\n // calculate value based on props, internal value changes, and selected options\n const isFirstMount = useFirstMount();\n const [controllableValue, setValue] = useControllableState({\n state: props.value,\n initialState: undefined,\n });\n\n const { selectedOptions, selectOption: baseSelectOption, clearSelection } = useSelection(props);\n\n // reset any typed value when an option is selected\n const selectOption = React.useCallback(\n (ev: SelectionEvents, option: OptionValue) => {\n ReactDOM.unstable_batchedUpdates(() => {\n setValue(undefined);\n baseSelectOption(ev, option);\n });\n },\n [setValue, baseSelectOption],\n );\n\n const value = React.useMemo(() => {\n // don't compute the value if it is defined through props or setValue,\n if (controllableValue !== undefined) {\n return controllableValue;\n }\n\n // handle defaultValue here, so it is overridden by selection\n if (isFirstMount && props.defaultValue !== undefined) {\n return props.defaultValue;\n }\n\n const selectedOptionsText = getOptionsMatchingValue(optionValue => {\n return selectedOptions.includes(optionValue);\n }).map(option => option.text);\n\n if (multiselect) {\n // editable inputs should not display multiple selected options in the input as text\n return editable ? '' : selectedOptionsText.join(', ');\n }\n\n return selectedOptionsText[0];\n\n // do not change value after isFirstMount changes,\n // we do not want to accidentally override defaultValue on a second render\n // unless another value is intentionally set\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [controllableValue, editable, getOptionsMatchingValue, multiselect, selectedOptions]);\n\n // Handle open state, which is shared with options in context\n const [open, setOpenState] = useControllableState({\n state: props.open,\n defaultState: props.defaultOpen,\n initialState: false,\n });\n\n const setOpen = React.useCallback(\n (event: ComboboxBaseOpenEvents, newState: boolean) => {\n if (disabled) {\n return;\n }\n onOpenChange?.(event, { open: newState });\n ReactDOM.unstable_batchedUpdates(() => {\n if (!newState && !freeform) {\n setValue(undefined);\n }\n setOpenState(newState);\n });\n },\n [onOpenChange, setOpenState, setValue, freeform, disabled],\n );\n\n // update active option based on change in open state\n React.useEffect(() => {\n if (open) {\n // if it is single-select and there is a selected option, start at the selected option\n if (!multiselect && selectedOptions.length > 0) {\n const selectedOption = getOptionsMatchingValue(v => v === selectedOptions[0]).pop();\n if (selectedOption?.id) {\n activeDescendantController.focus(selectedOption.id);\n }\n }\n } else {\n activeDescendantController.blur();\n }\n // this should only be run in response to changes in the open state\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [open, activeDescendantController]);\n\n // Fallback focus when children are updated in an open popover results in no item being focused\n React.useEffect(() => {\n if (open && !disableAutoFocus && !activeDescendantController.active()) {\n activeDescendantController.first();\n }\n // this should only be run in response to changes in the open state or children\n }, [open, children, disableAutoFocus, activeDescendantController, getOptionById]);\n\n const onActiveDescendantChange = useEventCallback((event: ActiveDescendantChangeEvent) => {\n const previousOption = event.detail.previousId ? optionCollection.getOptionById(event.detail.previousId) : null;\n const nextOption = optionCollection.getOptionById(event.detail.id);\n onActiveOptionChange?.(event, { event, type: 'change', previousOption, nextOption });\n });\n\n return {\n ...optionCollection,\n freeform,\n disabled,\n selectOption,\n clearSelection,\n selectedOptions,\n activeOption: UNSAFE_activeOption,\n appearance,\n clearable,\n focusVisible,\n ignoreNextBlur,\n inlinePopup,\n mountNode,\n open,\n hasFocus,\n setActiveOption: UNSAFE_setActiveOption,\n setFocusVisible,\n setHasFocus,\n setOpen,\n setValue,\n size,\n value,\n multiselect,\n onOptionClick: useEventCallback((e: React.MouseEvent<HTMLElement>) => {\n if (!multiselect) {\n setOpen(e, false);\n }\n }),\n onActiveDescendantChange,\n };\n};\n"],"names":["React","ReactDOM","useControllableState","useEventCallback","useFirstMount","useOptionCollection","useSelection","useComboboxBaseState","props","appearance","disableAutoFocus","children","clearable","editable","inlinePopup","mountNode","undefined","multiselect","onOpenChange","size","activeDescendantController","freeform","disabled","onActiveOptionChange","optionCollection","getOptionsMatchingValue","getOptionById","getActiveOption","useCallback","activeOptionId","active","UNSAFE_activeOption","UNSAFE_setActiveOption","option","nextOption","activeOption","focus","id","blur","focusVisible","setFocusVisible","useState","hasFocus","setHasFocus","ignoreNextBlur","useRef","isFirstMount","controllableValue","setValue","state","value","initialState","selectedOptions","selectOption","baseSelectOption","clearSelection","ev","unstable_batchedUpdates","useMemo","defaultValue","selectedOptionsText","optionValue","includes","map","text","join","open","setOpenState","defaultState","defaultOpen","setOpen","event","newState","useEffect","length","selectedOption","v","pop","first","onActiveDescendantChange","previousOption","detail","previousId","type","setActiveOption","onOptionClick","e"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../src/utils/useComboboxBaseState.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { useControllableState, useEventCallback, useFirstMount } from '@fluentui/react-utilities';\nimport type { ActiveDescendantChangeEvent, ActiveDescendantImperativeRef } from '@fluentui/react-aria';\nimport { useOptionCollection } from '../utils/useOptionCollection';\nimport type { OptionValue } from '../utils/OptionCollection.types';\nimport { useSelection } from '../utils/useSelection';\nimport type { ComboboxBaseProps, ComboboxBaseOpenEvents, ComboboxBaseState } from './ComboboxBase.types';\nimport type { SelectionEvents } from './Selection.types';\n\n/**\n * State shared between Combobox and Dropdown components\n *\n * @internal\n */\nexport const useComboboxBaseState = (\n props: ComboboxBaseProps & {\n children?: React.ReactNode;\n editable?: boolean;\n disabled?: boolean;\n freeform?: boolean;\n activeDescendantController: ActiveDescendantImperativeRef;\n },\n): ComboboxBaseState => {\n const {\n appearance = 'outline',\n disableAutoFocus,\n children,\n clearable = false,\n editable = false,\n inlinePopup = false,\n mountNode = undefined,\n multiselect,\n onOpenChange,\n size = 'medium',\n activeDescendantController,\n freeform = false,\n disabled = false,\n onActiveOptionChange = null,\n } = props;\n\n const optionCollection = useOptionCollection();\n const { getOptionsMatchingValue } = optionCollection;\n\n const { getOptionById } = optionCollection;\n const getActiveOption = React.useCallback(() => {\n const activeOptionId = activeDescendantController.active();\n return activeOptionId ? getOptionById(activeOptionId) : undefined;\n }, [activeDescendantController, getOptionById]);\n\n // Keeping some kind of backwards compatible functionality here\n // eslint-disable-next-line @typescript-eslint/naming-convention\n const UNSAFE_activeOption = getActiveOption();\n // eslint-disable-next-line @typescript-eslint/naming-convention\n const UNSAFE_setActiveOption = React.useCallback(\n (option: OptionValue | undefined | ((prev: OptionValue | undefined) => OptionValue | undefined)) => {\n let nextOption: OptionValue | undefined = undefined;\n if (typeof option === 'function') {\n const activeOption = getActiveOption();\n nextOption = option(activeOption);\n }\n\n if (nextOption) {\n activeDescendantController.focus(nextOption.id);\n } else {\n activeDescendantController.blur();\n }\n },\n [activeDescendantController, getActiveOption],\n );\n\n // track whether keyboard focus outline should be shown\n // tabster/keyborg doesn't work here, since the actual keyboard focus target doesn't move\n const [focusVisible, setFocusVisible] = React.useState(false);\n\n // track focused state to conditionally render collapsed listbox\n // when the trigger is focused - the listbox should but hidden until the open state is changed\n const [hasFocus, setHasFocus] = React.useState(false);\n\n const ignoreNextBlur = React.useRef(false);\n\n // calculate value based on props, internal value changes, and selected options\n const isFirstMount = useFirstMount();\n const [controllableValue, setValue] = useControllableState({\n state: props.value,\n initialState: undefined,\n });\n\n const { selectedOptions, selectOption: baseSelectOption, clearSelection } = useSelection(props);\n\n // reset any typed value when an option is selected\n const selectOption = React.useCallback(\n (ev: SelectionEvents, option: OptionValue) => {\n ReactDOM.unstable_batchedUpdates(() => {\n setValue(undefined);\n baseSelectOption(ev, option);\n });\n },\n [setValue, baseSelectOption],\n );\n\n const value = React.useMemo(() => {\n // don't compute the value if it is defined through props or setValue,\n if (controllableValue !== undefined) {\n return controllableValue;\n }\n\n // handle defaultValue here, so it is overridden by selection\n if (isFirstMount && props.defaultValue !== undefined) {\n return props.defaultValue;\n }\n\n const selectedOptionsText = getOptionsMatchingValue(optionValue => {\n return selectedOptions.includes(optionValue);\n }).map(option => option.text);\n\n if (multiselect) {\n // editable inputs should not display multiple selected options in the input as text\n return editable ? '' : selectedOptionsText.join(', ');\n }\n\n return selectedOptionsText[0];\n\n // do not change value after isFirstMount changes,\n // we do not want to accidentally override defaultValue on a second render\n // unless another value is intentionally set\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [controllableValue, editable, getOptionsMatchingValue, multiselect, selectedOptions]);\n\n // Handle open state, which is shared with options in context\n const [open, setOpenState] = useControllableState({\n state: props.open,\n defaultState: props.defaultOpen,\n initialState: false,\n });\n\n const setOpen = React.useCallback(\n (event: ComboboxBaseOpenEvents, newState: boolean) => {\n if (disabled) {\n return;\n }\n onOpenChange?.(event, { open: newState });\n ReactDOM.unstable_batchedUpdates(() => {\n if (!newState && !freeform) {\n setValue(undefined);\n }\n setOpenState(newState);\n });\n },\n [onOpenChange, setOpenState, setValue, freeform, disabled],\n );\n\n // update active option based on change in open state\n React.useEffect(() => {\n if (open) {\n // if it is single-select and there is a selected option, start at the selected option\n if (!multiselect && selectedOptions.length > 0) {\n const selectedOption = getOptionsMatchingValue(v => v === selectedOptions[0]).pop();\n if (selectedOption?.id) {\n activeDescendantController.focus(selectedOption.id);\n }\n }\n } else {\n activeDescendantController.blur();\n }\n // this should only be run in response to changes in the open state\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [open, activeDescendantController]);\n\n // Fallback focus when children are updated in an open popover results in no item being focused\n React.useEffect(() => {\n if (open && !disableAutoFocus && !activeDescendantController.active()) {\n activeDescendantController.first();\n }\n // this should only be run in response to changes in the open state or children\n }, [open, children, disableAutoFocus, activeDescendantController, getOptionById]);\n\n const onActiveDescendantChange = useEventCallback((event: ActiveDescendantChangeEvent) => {\n const previousOption = event.detail.previousId ? optionCollection.getOptionById(event.detail.previousId) : null;\n const nextOption = optionCollection.getOptionById(event.detail.id);\n onActiveOptionChange?.(event, { event, type: 'change', previousOption, nextOption });\n });\n\n return {\n ...optionCollection,\n freeform,\n disabled,\n selectOption,\n clearSelection,\n selectedOptions,\n activeOption: UNSAFE_activeOption,\n appearance,\n clearable,\n focusVisible,\n ignoreNextBlur,\n inlinePopup,\n mountNode,\n open,\n hasFocus,\n setActiveOption: UNSAFE_setActiveOption,\n setFocusVisible,\n setHasFocus,\n setOpen,\n setValue,\n size,\n value,\n multiselect,\n onOptionClick: useEventCallback((e: React.MouseEvent<HTMLElement>) => {\n if (!multiselect) {\n setOpen(e, false);\n }\n }),\n onActiveDescendantChange,\n };\n};\n"],"names":["React","ReactDOM","useControllableState","useEventCallback","useFirstMount","useOptionCollection","useSelection","useComboboxBaseState","props","appearance","disableAutoFocus","children","clearable","editable","inlinePopup","mountNode","undefined","multiselect","onOpenChange","size","activeDescendantController","freeform","disabled","onActiveOptionChange","optionCollection","getOptionsMatchingValue","getOptionById","getActiveOption","useCallback","activeOptionId","active","UNSAFE_activeOption","UNSAFE_setActiveOption","option","nextOption","activeOption","focus","id","blur","focusVisible","setFocusVisible","useState","hasFocus","setHasFocus","ignoreNextBlur","useRef","isFirstMount","controllableValue","setValue","state","value","initialState","selectedOptions","selectOption","baseSelectOption","clearSelection","ev","unstable_batchedUpdates","useMemo","defaultValue","selectedOptionsText","optionValue","includes","map","text","join","open","setOpenState","defaultState","defaultOpen","setOpen","event","newState","useEffect","length","selectedOption","v","pop","first","onActiveDescendantChange","previousOption","detail","previousId","type","setActiveOption","onOptionClick","e"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/utils/useListboxSlot.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { type FieldControlProps, useFieldControlProps_unstable } from '@fluentui/react-field';\nimport {\n mergeCallbacks,\n useId,\n useEventCallback,\n slot,\n isResolvedShorthand,\n useMergedRefs,\n} from '@fluentui/react-utilities';\nimport type { ExtractSlotProps, Slot, SlotComponentType } from '@fluentui/react-utilities';\nimport type { ComboboxBaseState } from './ComboboxBase.types';\nimport { Listbox } from '../Listbox';\nimport type { ListboxProps } from '../Listbox';\n\nexport type UseListboxSlotState = Pick<ComboboxBaseState, 'multiselect'>;\n\ntype UseListboxSlotOptions = {\n state: UseListboxSlotState;\n triggerRef:\n | React.RefObject<HTMLInputElement | null>\n | React.RefObject<HTMLButtonElement | null>\n | React.RefObject<HTMLButtonElement | HTMLInputElement | null>;\n defaultProps?: Partial<ListboxProps>;\n};\n\n/**\n * @internal\n * @returns listbox slot with desired behaviour and props\n */\nexport function useListboxSlot(\n listboxSlotFromProp: Slot<typeof Listbox> | undefined,\n ref: React.Ref<HTMLDivElement>,\n options: UseListboxSlotOptions,\n): SlotComponentType<ExtractSlotProps<Slot<typeof Listbox>>> | undefined {\n const {\n state: { multiselect },\n triggerRef,\n defaultProps,\n } = options;\n\n const listboxId = useId(\n 'fluent-listbox',\n isResolvedShorthand(listboxSlotFromProp) ? listboxSlotFromProp.id : undefined,\n );\n\n const listboxSlot = slot.optional(listboxSlotFromProp, {\n renderByDefault: true,\n elementType: Listbox,\n defaultProps: {\n id: listboxId,\n multiselect,\n tabIndex: undefined,\n ...defaultProps,\n },\n });\n\n const fieldControlProps = useFieldControlProps_unstable({ id: listboxId } as FieldControlProps, {\n supportsLabelFor: true,\n });\n\n // Use the field's label to provide an accessible name for the listbox if it doesn't already have one\n if (\n listboxSlot &&\n !listboxSlot['aria-label'] &&\n !listboxSlot['aria-labelledby'] &&\n fieldControlProps['aria-labelledby']\n ) {\n listboxSlot['aria-labelledby'] = fieldControlProps['aria-labelledby'];\n }\n\n /**\n * Clicking on the listbox should never blur the trigger\n * in a combobox\n */\n const onMouseDown = useEventCallback(\n mergeCallbacks((event: React.MouseEvent<HTMLDivElement>) => {\n event.preventDefault();\n }, listboxSlot?.onMouseDown),\n );\n\n const onClick = useEventCallback(\n mergeCallbacks((event: React.MouseEvent<HTMLDivElement>) => {\n event.preventDefault();\n triggerRef.current?.focus();\n }, listboxSlot?.onClick),\n );\n\n const listboxRef = useMergedRefs(listboxSlot?.ref, ref);\n if (listboxSlot) {\n listboxSlot.ref = listboxRef;\n listboxSlot.onMouseDown = onMouseDown;\n listboxSlot.onClick = onClick;\n }\n\n return listboxSlot;\n}\n"],"names":["useFieldControlProps_unstable","mergeCallbacks","useId","useEventCallback","slot","isResolvedShorthand","useMergedRefs","Listbox","useListboxSlot","listboxSlotFromProp","ref","options","state","multiselect","triggerRef","defaultProps","listboxId","id","undefined","listboxSlot","optional","renderByDefault","elementType","tabIndex","fieldControlProps","supportsLabelFor","onMouseDown","event","preventDefault","onClick","current","focus","listboxRef"],"mappings":"AAAA;;;;;+BAgCgBQ;;;;;;4BA7BsD,wBAAwB;gCAQvF,4BAA4B;yBAGX,aAAa;AAkB9B,wBACLC,mBAAqD,EACrDC,GAA8B,EAC9BC,OAA8B;IAE9B,MAAM,EACJC,OAAO,EAAEC,WAAW,EAAE,EACtBC,UAAU,EACVC,YAAY,EACb,GAAGJ;IAEJ,MAAMK,YAAYd,yBAAAA,EAChB,sBACAG,mCAAAA,EAAoBI,uBAAuBA,oBAAoBQ,EAAE,GAAGC;IAGtE,MAAMC,cAAcf,oBAAAA,CAAKgB,QAAQ,CAACX,qBAAqB;QACrDY,iBAAiB;QACjBC,aAAaf,gBAAAA;QACbQ,cAAc;YACZE,IAAID;YACJH;YACAU,UAAUL;YACV,GAAGH,YAAY;QACjB;IACF;IAEA,MAAMS,wBAAoBxB,yCAAAA,EAA8B;QAAEiB,IAAID;IAAU,GAAwB;QAC9FS,kBAAkB;IACpB;IAEA,qGAAqG;IACrG,IACEN,eACA,CAACA,WAAW,CAAC,aAAa,IAC1B,CAACA,WAAW,CAAC,kBAAkB,IAC/BK,iBAAiB,CAAC,kBAAkB,EACpC;QACAL,WAAW,CAAC,kBAAkB,GAAGK,iBAAiB,CAAC,kBAAkB;IACvE;IAEA;;;GAGC,GACD,MAAME,kBAAcvB,gCAAAA,MAClBF,8BAAAA,EAAe,CAAC0B;QACdA,MAAMC,cAAc;IACtB,GAAGT,gBAAAA,QAAAA,gBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,YAAaO,WAAW;IAG7B,MAAMG,cAAU1B,gCAAAA,
|
|
1
|
+
{"version":3,"sources":["../src/utils/useListboxSlot.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { type FieldControlProps, useFieldControlProps_unstable } from '@fluentui/react-field';\nimport {\n mergeCallbacks,\n useId,\n useEventCallback,\n slot,\n isResolvedShorthand,\n useMergedRefs,\n} from '@fluentui/react-utilities';\nimport type { ExtractSlotProps, Slot, SlotComponentType } from '@fluentui/react-utilities';\nimport type { ComboboxBaseState } from './ComboboxBase.types';\nimport { Listbox } from '../Listbox';\nimport type { ListboxProps } from '../Listbox';\n\nexport type UseListboxSlotState = Pick<ComboboxBaseState, 'multiselect'>;\n\ntype UseListboxSlotOptions = {\n state: UseListboxSlotState;\n triggerRef:\n | React.RefObject<HTMLInputElement | null>\n | React.RefObject<HTMLButtonElement | null>\n | React.RefObject<HTMLButtonElement | HTMLInputElement | null>;\n defaultProps?: Partial<ListboxProps>;\n};\n\n/**\n * @internal\n * @returns listbox slot with desired behaviour and props\n */\nexport function useListboxSlot(\n listboxSlotFromProp: Slot<typeof Listbox> | undefined,\n ref: React.Ref<HTMLDivElement>,\n options: UseListboxSlotOptions,\n): SlotComponentType<ExtractSlotProps<Slot<typeof Listbox>>> | undefined {\n const {\n state: { multiselect },\n triggerRef,\n defaultProps,\n } = options;\n\n const listboxId = useId(\n 'fluent-listbox',\n isResolvedShorthand(listboxSlotFromProp) ? listboxSlotFromProp.id : undefined,\n );\n\n const listboxSlot = slot.optional(listboxSlotFromProp, {\n renderByDefault: true,\n elementType: Listbox,\n defaultProps: {\n id: listboxId,\n multiselect,\n tabIndex: undefined,\n ...defaultProps,\n },\n });\n\n const fieldControlProps = useFieldControlProps_unstable({ id: listboxId } as FieldControlProps, {\n supportsLabelFor: true,\n });\n\n // Use the field's label to provide an accessible name for the listbox if it doesn't already have one\n if (\n listboxSlot &&\n !listboxSlot['aria-label'] &&\n !listboxSlot['aria-labelledby'] &&\n fieldControlProps['aria-labelledby']\n ) {\n listboxSlot['aria-labelledby'] = fieldControlProps['aria-labelledby'];\n }\n\n /**\n * Clicking on the listbox should never blur the trigger\n * in a combobox\n */\n const onMouseDown = useEventCallback(\n mergeCallbacks((event: React.MouseEvent<HTMLDivElement>) => {\n event.preventDefault();\n }, listboxSlot?.onMouseDown),\n );\n\n const onClick = useEventCallback(\n // eslint-disable-next-line react-hooks/refs\n mergeCallbacks((event: React.MouseEvent<HTMLDivElement>) => {\n event.preventDefault();\n triggerRef.current?.focus();\n }, listboxSlot?.onClick),\n );\n\n const listboxRef = useMergedRefs(listboxSlot?.ref, ref);\n if (listboxSlot) {\n listboxSlot.ref = listboxRef;\n listboxSlot.onMouseDown = onMouseDown;\n listboxSlot.onClick = onClick;\n }\n\n return listboxSlot;\n}\n"],"names":["useFieldControlProps_unstable","mergeCallbacks","useId","useEventCallback","slot","isResolvedShorthand","useMergedRefs","Listbox","useListboxSlot","listboxSlotFromProp","ref","options","state","multiselect","triggerRef","defaultProps","listboxId","id","undefined","listboxSlot","optional","renderByDefault","elementType","tabIndex","fieldControlProps","supportsLabelFor","onMouseDown","event","preventDefault","onClick","current","focus","listboxRef"],"mappings":"AAAA;;;;;+BAgCgBQ;;;;;;4BA7BsD,wBAAwB;gCAQvF,4BAA4B;yBAGX,aAAa;AAkB9B,wBACLC,mBAAqD,EACrDC,GAA8B,EAC9BC,OAA8B;IAE9B,MAAM,EACJC,OAAO,EAAEC,WAAW,EAAE,EACtBC,UAAU,EACVC,YAAY,EACb,GAAGJ;IAEJ,MAAMK,YAAYd,yBAAAA,EAChB,sBACAG,mCAAAA,EAAoBI,uBAAuBA,oBAAoBQ,EAAE,GAAGC;IAGtE,MAAMC,cAAcf,oBAAAA,CAAKgB,QAAQ,CAACX,qBAAqB;QACrDY,iBAAiB;QACjBC,aAAaf,gBAAAA;QACbQ,cAAc;YACZE,IAAID;YACJH;YACAU,UAAUL;YACV,GAAGH,YAAY;QACjB;IACF;IAEA,MAAMS,wBAAoBxB,yCAAAA,EAA8B;QAAEiB,IAAID;IAAU,GAAwB;QAC9FS,kBAAkB;IACpB;IAEA,qGAAqG;IACrG,IACEN,eACA,CAACA,WAAW,CAAC,aAAa,IAC1B,CAACA,WAAW,CAAC,kBAAkB,IAC/BK,iBAAiB,CAAC,kBAAkB,EACpC;QACAL,WAAW,CAAC,kBAAkB,GAAGK,iBAAiB,CAAC,kBAAkB;IACvE;IAEA;;;GAGC,GACD,MAAME,kBAAcvB,gCAAAA,MAClBF,8BAAAA,EAAe,CAAC0B;QACdA,MAAMC,cAAc;IACtB,GAAGT,gBAAAA,QAAAA,gBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,YAAaO,WAAW;IAG7B,MAAMG,cAAU1B,gCAAAA,CACd,KACAF,8BAAAA,EAAe,CAAC0B,MAD4B;YAG1Cb;QADAa,MAAMC,cAAc;SACpBd,sBAAAA,WAAWgB,OAAAA,AAAO,MAAA,QAAlBhB,wBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,oBAAoBiB,KAAK;IAC3B,GAAGZ,gBAAAA,QAAAA,gBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,YAAaU,OAAO;IAGzB,MAAMG,iBAAa1B,6BAAAA,EAAca,gBAAAA,QAAAA,gBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,YAAaT,GAAG,EAAEA;IACnD,IAAIS,aAAa;QACfA,YAAYT,GAAG,GAAGsB;QAClBb,YAAYO,WAAW,GAAGA;QAC1BP,YAAYU,OAAO,GAAGA;IACxB;IAEA,OAAOV;AACT"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/utils/useOptionCollection.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { OptionCollectionState, OptionValue } from './OptionCollection.types';\n\n/**\n * A hook for managing a collection of child Options\n */\nexport const useOptionCollection = (): OptionCollectionState => {\n const optionsById = React.useRef(new Map<string, OptionValue>());\n\n const collectionAPI = React.useMemo(() => {\n const getCount = () => optionsById.current.size;\n\n // index searches are no longer used\n const getOptionAtIndex = () => undefined;\n const getIndexOfId = () => -1;\n\n const getOptionById = (id: string) => {\n return optionsById.current.get(id);\n };\n const getOptionsMatchingText = (matcher: (text: string) => boolean) => {\n return Array.from(optionsById.current.values()).filter(({ text }) => matcher(text));\n };\n\n const getOptionsMatchingValue = (matcher: (value: string) => boolean) => {\n const matches: OptionValue[] = [];\n for (const option of optionsById.current.values()) {\n if (matcher(option.value)) {\n matches.push(option);\n }\n }\n\n return matches;\n };\n\n return {\n getCount,\n getOptionAtIndex,\n getIndexOfId,\n getOptionById,\n getOptionsMatchingText,\n getOptionsMatchingValue,\n };\n }, []);\n\n const registerOption = React.useCallback((option: OptionValue) => {\n optionsById.current.set(option.id, option);\n\n return () => optionsById.current.delete(option.id);\n }, []);\n\n return {\n ...collectionAPI,\n options: Array.from(optionsById.current.values()),\n registerOption,\n };\n};\n"],"names":["React","useOptionCollection","optionsById","useRef","Map","collectionAPI","useMemo","getCount","current","size","getOptionAtIndex","undefined","getIndexOfId","getOptionById","id","get","getOptionsMatchingText","matcher","Array","from","values","filter","text","getOptionsMatchingValue","matches","option","value","push","registerOption","useCallback","set","delete","options"],"mappings":"AAAA;;;;;+BAQaC;;;;;;;iEANU,QAAQ;AAMxB,4BAA4B;IACjC,MAAMC,cAAcF,OAAMG,MAAM,CAAC,IAAIC;IAErC,MAAMC,gBAAgBL,OAAMM,OAAO,CAAC;QAClC,MAAMC,WAAW,IAAML,YAAYM,OAAO,CAACC,IAAI;QAE/C,oCAAoC;QACpC,MAAMC,mBAAmB,IAAMC;QAC/B,MAAMC,eAAe,IAAM,CAAC;QAE5B,MAAMC,gBAAgB,CAACC;YACrB,OAAOZ,YAAYM,OAAO,CAACO,GAAG,CAACD;QACjC;QACA,MAAME,yBAAyB,CAACC;YAC9B,OAAOC,MAAMC,IAAI,CAACjB,YAAYM,OAAO,CAACY,MAAM,IAAIC,MAAM,CAAC,CAAC,EAAEC,IAAI,EAAE,GAAKL,QAAQK;QAC/E;QAEA,MAAMC,0BAA0B,CAACN;YAC/B,MAAMO,UAAyB,EAAE;YACjC,KAAK,MAAMC,UAAUvB,YAAYM,OAAO,CAACY,MAAM,GAAI;gBACjD,IAAIH,QAAQQ,OAAOC,KAAK,GAAG;oBACzBF,QAAQG,IAAI,CAACF;gBACf;YACF;YAEA,OAAOD;QACT;QAEA,OAAO;YACLjB;YACAG;YACAE;YACAC;YACAG;YACAO;QACF;IACF,GAAG,EAAE;IAEL,MAAMK,iBAAiB5B,OAAM6B,WAAW,CAAC,CAACJ;QACxCvB,YAAYM,OAAO,CAACsB,GAAG,CAACL,OAAOX,EAAE,EAAEW;QAEnC,OAAO,IAAMvB,YAAYM,OAAO,CAACuB,MAAM,CAACN,OAAOX,EAAE;IACnD,GAAG,EAAE;IAEL,OAAO;QACL,GAAGT,aAAa;
|
|
1
|
+
{"version":3,"sources":["../src/utils/useOptionCollection.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { OptionCollectionState, OptionValue } from './OptionCollection.types';\n\n/**\n * A hook for managing a collection of child Options\n */\nexport const useOptionCollection = (): OptionCollectionState => {\n const optionsById = React.useRef(new Map<string, OptionValue>());\n\n const collectionAPI = React.useMemo(() => {\n const getCount = () => optionsById.current.size;\n\n // index searches are no longer used\n const getOptionAtIndex = () => undefined;\n const getIndexOfId = () => -1;\n\n const getOptionById = (id: string) => {\n return optionsById.current.get(id);\n };\n const getOptionsMatchingText = (matcher: (text: string) => boolean) => {\n return Array.from(optionsById.current.values()).filter(({ text }) => matcher(text));\n };\n\n const getOptionsMatchingValue = (matcher: (value: string) => boolean) => {\n const matches: OptionValue[] = [];\n for (const option of optionsById.current.values()) {\n if (matcher(option.value)) {\n matches.push(option);\n }\n }\n\n return matches;\n };\n\n return {\n getCount,\n getOptionAtIndex,\n getIndexOfId,\n getOptionById,\n getOptionsMatchingText,\n getOptionsMatchingValue,\n };\n }, []);\n\n const registerOption = React.useCallback((option: OptionValue) => {\n optionsById.current.set(option.id, option);\n\n return () => optionsById.current.delete(option.id);\n }, []);\n\n return {\n ...collectionAPI,\n // eslint-disable-next-line react-hooks/refs\n options: Array.from(optionsById.current.values()),\n registerOption,\n };\n};\n"],"names":["React","useOptionCollection","optionsById","useRef","Map","collectionAPI","useMemo","getCount","current","size","getOptionAtIndex","undefined","getIndexOfId","getOptionById","id","get","getOptionsMatchingText","matcher","Array","from","values","filter","text","getOptionsMatchingValue","matches","option","value","push","registerOption","useCallback","set","delete","options"],"mappings":"AAAA;;;;;+BAQaC;;;;;;;iEANU,QAAQ;AAMxB,4BAA4B;IACjC,MAAMC,cAAcF,OAAMG,MAAM,CAAC,IAAIC;IAErC,MAAMC,gBAAgBL,OAAMM,OAAO,CAAC;QAClC,MAAMC,WAAW,IAAML,YAAYM,OAAO,CAACC,IAAI;QAE/C,oCAAoC;QACpC,MAAMC,mBAAmB,IAAMC;QAC/B,MAAMC,eAAe,IAAM,CAAC;QAE5B,MAAMC,gBAAgB,CAACC;YACrB,OAAOZ,YAAYM,OAAO,CAACO,GAAG,CAACD;QACjC;QACA,MAAME,yBAAyB,CAACC;YAC9B,OAAOC,MAAMC,IAAI,CAACjB,YAAYM,OAAO,CAACY,MAAM,IAAIC,MAAM,CAAC,CAAC,EAAEC,IAAI,EAAE,GAAKL,QAAQK;QAC/E;QAEA,MAAMC,0BAA0B,CAACN;YAC/B,MAAMO,UAAyB,EAAE;YACjC,KAAK,MAAMC,UAAUvB,YAAYM,OAAO,CAACY,MAAM,GAAI;gBACjD,IAAIH,QAAQQ,OAAOC,KAAK,GAAG;oBACzBF,QAAQG,IAAI,CAACF;gBACf;YACF;YAEA,OAAOD;QACT;QAEA,OAAO;YACLjB;YACAG;YACAE;YACAC;YACAG;YACAO;QACF;IACF,GAAG,EAAE;IAEL,MAAMK,iBAAiB5B,OAAM6B,WAAW,CAAC,CAACJ;QACxCvB,YAAYM,OAAO,CAACsB,GAAG,CAACL,OAAOX,EAAE,EAAEW;QAEnC,OAAO,IAAMvB,YAAYM,OAAO,CAACuB,MAAM,CAACN,OAAOX,EAAE;IACnD,GAAG,EAAE;IAEL,OAAO;QACL,GAAGT,aAAa;QAChB,4CAA4C;QAC5C2B,SAASd,MAAMC,IAAI,CAACjB,YAAYM,OAAO,CAACY,MAAM;QAC9CQ;IACF;AACF,EAAE"}
|
|
@@ -16,12 +16,23 @@ const _reactutilities = require("@fluentui/react-utilities");
|
|
|
16
16
|
const _dropdownKeyActions = require("../utils/dropdownKeyActions");
|
|
17
17
|
function useTriggerSlot(triggerSlotFromProp, ref, options) {
|
|
18
18
|
const { state: { open, setOpen, setHasFocus }, defaultProps, elementType, activeDescendantController } = options;
|
|
19
|
+
// need to prevent tabster from also handling escape when the dropdown is open
|
|
20
|
+
// event.stopPropagation() isn't enough here, since tabster uses the capture phase
|
|
21
|
+
const ignoreEscapeKeyAttribute = (0, _reacttabster.useTabsterAttributes)({
|
|
22
|
+
focusable: {
|
|
23
|
+
ignoreKeydown: {
|
|
24
|
+
Escape: open
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
});
|
|
28
|
+
const tabsterOverrides = (0, _reacttabster.useMergedTabsterAttributes_unstable)(ignoreEscapeKeyAttribute, typeof defaultProps === 'object' ? defaultProps : {});
|
|
19
29
|
const trigger = _reactutilities.slot.always(triggerSlotFromProp, {
|
|
20
30
|
defaultProps: {
|
|
21
31
|
type: 'text',
|
|
22
32
|
'aria-expanded': open,
|
|
23
33
|
role: 'combobox',
|
|
24
|
-
...typeof defaultProps === 'object' && defaultProps
|
|
34
|
+
...typeof defaultProps === 'object' && defaultProps,
|
|
35
|
+
...tabsterOverrides
|
|
25
36
|
},
|
|
26
37
|
elementType
|
|
27
38
|
});
|