@fluentui/react-tag-picker 9.3.14 → 9.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/CHANGELOG.md +37 -2
  2. package/dist/index.d.ts +4 -1
  3. package/lib/components/TagPickerControl/useTagPickerControlStyles.styles.js +22 -11
  4. package/lib/components/TagPickerControl/useTagPickerControlStyles.styles.js.map +1 -1
  5. package/lib/components/TagPickerOption/useTagPickerOptionStyles.styles.js +9 -4
  6. package/lib/components/TagPickerOption/useTagPickerOptionStyles.styles.js.map +1 -1
  7. package/lib/index.js +1 -0
  8. package/lib/index.js.map +1 -1
  9. package/lib-commonjs/components/TagPickerControl/useTagPickerControlStyles.styles.js +30 -14
  10. package/lib-commonjs/components/TagPickerControl/useTagPickerControlStyles.styles.js.map +1 -1
  11. package/lib-commonjs/components/TagPickerOption/useTagPickerOptionStyles.styles.js +11 -3
  12. package/lib-commonjs/components/TagPickerOption/useTagPickerOptionStyles.styles.js.map +1 -1
  13. package/lib-commonjs/index.js +4 -0
  14. package/lib-commonjs/index.js.map +1 -1
  15. package/package.json +11 -11
package/CHANGELOG.md CHANGED
@@ -1,12 +1,47 @@
1
1
  # Change Log - @fluentui/react-tag-picker
2
2
 
3
- This log was last generated on Wed, 08 Jan 2025 18:29:15 GMT and should not be manually modified.
3
+ This log was last generated on Mon, 27 Jan 2025 20:24:42 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.4.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-tag-picker_v9.4.1)
8
+
9
+ Mon, 27 Jan 2025 20:24:42 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tag-picker_v9.4.0..@fluentui/react-tag-picker_v9.4.1)
11
+
12
+ ### Patches
13
+
14
+ - Bump @fluentui/react-combobox to v9.13.18 ([PR #33724](https://github.com/microsoft/fluentui/pull/33724) by beachball)
15
+ - Bump @fluentui/react-tags to v9.3.30 ([PR #33724](https://github.com/microsoft/fluentui/pull/33724) by beachball)
16
+ - Bump @fluentui/react-positioning to v9.16.3 ([PR #33724](https://github.com/microsoft/fluentui/pull/33724) by beachball)
17
+ - Bump @fluentui/react-field to v9.1.86 ([PR #33724](https://github.com/microsoft/fluentui/pull/33724) by beachball)
18
+
19
+ ## [9.4.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-tag-picker_v9.4.0)
20
+
21
+ Wed, 22 Jan 2025 14:00:10 GMT
22
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tag-picker_v9.3.14..@fluentui/react-tag-picker_v9.4.0)
23
+
24
+ ### Minor changes
25
+
26
+ - feature: single line layout ([PR #32247](https://github.com/microsoft/fluentui/pull/32247) by bernardo.sunderhus@gmail.com)
27
+ - Bump @fluentui/react-jsx-runtime to v9.0.50 ([PR #33631](https://github.com/microsoft/fluentui/pull/33631) by beachball)
28
+ - Bump @fluentui/react-utilities to v9.18.20 ([PR #33631](https://github.com/microsoft/fluentui/pull/33631) by beachball)
29
+ - Bump @fluentui/react-portal to v9.4.42 ([PR #33631](https://github.com/microsoft/fluentui/pull/33631) by beachball)
30
+ - Bump @fluentui/react-tabster to v9.23.3 ([PR #33631](https://github.com/microsoft/fluentui/pull/33631) by beachball)
31
+ - Bump @fluentui/react-aria to v9.13.14 ([PR #33631](https://github.com/microsoft/fluentui/pull/33631) by beachball)
32
+ - Bump @fluentui/react-combobox to v9.13.17 ([PR #33631](https://github.com/microsoft/fluentui/pull/33631) by beachball)
33
+ - Bump @fluentui/react-tags to v9.3.29 ([PR #33631](https://github.com/microsoft/fluentui/pull/33631) by beachball)
34
+ - Bump @fluentui/react-context-selector to v9.1.72 ([PR #33631](https://github.com/microsoft/fluentui/pull/33631) by beachball)
35
+ - Bump @fluentui/react-positioning to v9.16.2 ([PR #33631](https://github.com/microsoft/fluentui/pull/33631) by beachball)
36
+ - Bump @fluentui/react-field to v9.1.85 ([PR #33631](https://github.com/microsoft/fluentui/pull/33631) by beachball)
37
+
38
+ ### Patches
39
+
40
+ - bugfix: secondaryContent not displaying properly ([PR #33689](https://github.com/microsoft/fluentui/pull/33689) by bernardo.sunderhus@gmail.com)
41
+
7
42
  ## [9.3.14](https://github.com/microsoft/fluentui/tree/@fluentui/react-tag-picker_v9.3.14)
8
43
 
9
- Wed, 08 Jan 2025 18:29:15 GMT
44
+ Wed, 08 Jan 2025 18:33:36 GMT
10
45
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tag-picker_v9.3.13..@fluentui/react-tag-picker_v9.3.14)
11
46
 
12
47
  ### Patches
package/dist/index.d.ts CHANGED
@@ -7,6 +7,7 @@ import { ComboboxSlots } from '@fluentui/react-combobox';
7
7
  import type { ComboboxState } from '@fluentui/react-combobox';
8
8
  import { ComponentProps } from '@fluentui/react-utilities';
9
9
  import { ComponentState } from '@fluentui/react-utilities';
10
+ import { ContextSelector } from '@fluentui/react-context-selector';
10
11
  import { DropdownProps } from '@fluentui/react-combobox';
11
12
  import type { EventData } from '@fluentui/react-utilities';
12
13
  import type { EventHandler } from '@fluentui/react-utilities';
@@ -95,7 +96,7 @@ export declare type TagPickerButtonState = ComponentState<TagPickerButtonSlots>
95
96
  hasSelectedOption: boolean;
96
97
  };
97
98
 
98
- declare interface TagPickerContextValue extends Pick<ComboboxBaseState, 'open' | 'clearSelection' | 'getOptionById' | 'selectedOptions' | 'selectOption' | 'setHasFocus' | 'setOpen' | 'setValue' | 'value' | 'appearance' | 'disabled'> {
99
+ export declare interface TagPickerContextValue extends Pick<ComboboxBaseState, 'open' | 'clearSelection' | 'getOptionById' | 'selectedOptions' | 'selectOption' | 'setHasFocus' | 'setOpen' | 'setValue' | 'value' | 'appearance' | 'disabled'> {
99
100
  triggerRef: React_2.RefObject<HTMLInputElement | HTMLButtonElement>;
100
101
  popoverRef: React_2.RefObject<HTMLDivElement>;
101
102
  popoverId: string;
@@ -362,6 +363,8 @@ export declare const useTagPickerButton_unstable: (props: TagPickerButtonProps,
362
363
  */
363
364
  export declare const useTagPickerButtonStyles_unstable: (state: TagPickerButtonState) => TagPickerButtonState;
364
365
 
366
+ export declare const useTagPickerContext_unstable: <T>(selector: ContextSelector<TagPickerContextValue, T>) => T;
367
+
365
368
  /**
366
369
  * Create the state required to render PickerControl.
367
370
  *
package/lib/components/TagPickerControl/useTagPickerControlStyles.styles.js CHANGED
@@ -221,13 +221,10 @@ const useStyles = /*#__PURE__*/__styles({
221
221
  });
222
222
  const useAsideStyles = /*#__PURE__*/__styles({
223
223
  root: {
224
- mc9l5x: "f13qh94s",
225
- Bt984gj: "f122n59",
224
+ mc9l5x: "f22iagw",
226
225
  qhf8xq: "f1euv43f",
227
226
  Bhzewxz: "f15twtuk",
228
227
  j35jbq: ["f8b87gs", "fedtrts"],
229
- Budl1dq: "f13p5kfd",
230
- wkccdc: "fjg31ve",
231
228
  Bqenvij: "f1l02sjl",
232
229
  Bceei9c: "f113hnb5"
233
230
  },
@@ -241,7 +238,7 @@ const useAsideStyles = /*#__PURE__*/__styles({
241
238
  sshi5w: "f5pgtk9"
242
239
  }
243
240
  }, {
244
- d: [".f13qh94s{display:grid;}", ".f122n59{align-items:center;}", ".f1euv43f{position:absolute;}", ".f15twtuk{top:0;}", ".f8b87gs{right:var(--spacingHorizontalM);}", ".fedtrts{left:var(--spacingHorizontalM);}", ".f13p5kfd{grid-template-columns:repeat(2, auto);}", ".fjg31ve{grid-template-rows:minmax(32px, auto) 1fr;}", ".f1l02sjl{height:100%;}", ".f113hnb5{cursor:text;}", ".f1nxs5xn{min-height:32px;}", ".f1w5jphr{min-height:40px;}", ".f5pgtk9{min-height:44px;}"]
241
+ d: [".f22iagw{display:flex;}", ".f1euv43f{position:absolute;}", ".f15twtuk{top:0;}", ".f8b87gs{right:var(--spacingHorizontalM);}", ".fedtrts{left:var(--spacingHorizontalM);}", ".f1l02sjl{height:100%;}", ".f113hnb5{cursor:text;}", ".f1nxs5xn{min-height:32px;}", ".f1w5jphr{min-height:40px;}", ".f5pgtk9{min-height:44px;}"]
245
242
  });
246
243
  export const iconSizes = {
247
244
  small: '16px',
@@ -253,28 +250,41 @@ const useIconStyles = /*#__PURE__*/__styles({
253
250
  B7ck84d: "f1ewtqcl",
254
251
  sj55zd: "fxkbij4",
255
252
  Bceei9c: "f1k6fduh",
256
- mc9l5x: "ftgm304",
253
+ mc9l5x: "f22iagw",
254
+ Brf1p80: "f4d9j23",
255
+ Bt984gj: "f122n59",
256
+ qb2dma: "fjgzulp",
257
257
  Be2twd7: "f1pp30po",
258
258
  Bo70h7d: "fvc9v3g"
259
259
  },
260
260
  medium: {
261
261
  Be2twd7: "f4ybsrx",
262
- Frg6f3: ["f1h9en5y", "f1xk557c"]
262
+ Frg6f3: ["f1h9en5y", "f1xk557c"],
263
+ sshi5w: "f1nxs5xn"
263
264
  },
264
265
  large: {
265
266
  Be2twd7: "fe5j1ua",
266
- Frg6f3: ["f1h9en5y", "f1xk557c"]
267
+ Frg6f3: ["f1h9en5y", "f1xk557c"],
268
+ sshi5w: "f1w5jphr"
267
269
  },
268
270
  "extra-large": {
269
271
  Be2twd7: "f1rt2boy",
270
- Frg6f3: ["f1t5qyk5", "f1ikr372"]
272
+ Frg6f3: ["f1t5qyk5", "f1ikr372"],
273
+ sshi5w: "f5pgtk9"
271
274
  },
272
275
  disabled: {
273
276
  sj55zd: "f1s2aq7o",
274
277
  Bceei9c: "fdrzuqr"
275
278
  }
276
279
  }, {
277
- d: [".f1ewtqcl{box-sizing:border-box;}", ".fxkbij4{color:var(--colorNeutralStrokeAccessible);}", ".f1k6fduh{cursor:pointer;}", ".ftgm304{display:block;}", ".f1pp30po{font-size:var(--fontSizeBase500);}", ".fvc9v3g svg{display:block;}", ".f4ybsrx{font-size:16px;}", ".f1h9en5y{margin-left:var(--spacingHorizontalXXS);}", ".f1xk557c{margin-right:var(--spacingHorizontalXXS);}", ".fe5j1ua{font-size:20px;}", ".f1rt2boy{font-size:24px;}", ".f1t5qyk5{margin-left:var(--spacingHorizontalSNudge);}", ".f1ikr372{margin-right:var(--spacingHorizontalSNudge);}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".fdrzuqr{cursor:not-allowed;}"]
280
+ d: [".f1ewtqcl{box-sizing:border-box;}", ".fxkbij4{color:var(--colorNeutralStrokeAccessible);}", ".f1k6fduh{cursor:pointer;}", ".f22iagw{display:flex;}", ".f4d9j23{justify-content:center;}", ".f122n59{align-items:center;}", ".fjgzulp{align-self:flex-start;}", ".f1pp30po{font-size:var(--fontSizeBase500);}", ".fvc9v3g svg{display:block;}", ".f4ybsrx{font-size:16px;}", ".f1h9en5y{margin-left:var(--spacingHorizontalXXS);}", ".f1xk557c{margin-right:var(--spacingHorizontalXXS);}", ".f1nxs5xn{min-height:32px;}", ".fe5j1ua{font-size:20px;}", ".f1w5jphr{min-height:40px;}", ".f1rt2boy{font-size:24px;}", ".f1t5qyk5{margin-left:var(--spacingHorizontalSNudge);}", ".f1ikr372{margin-right:var(--spacingHorizontalSNudge);}", ".f5pgtk9{min-height:44px;}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".fdrzuqr{cursor:not-allowed;}"]
281
+ });
282
+ const useSecondaryActionStyles = /*#__PURE__*/__styles({
283
+ root: {
284
+ mc9l5x: "f22iagw"
285
+ }
286
+ }, {
287
+ d: [".f22iagw{display:flex;}"]
278
288
  });
279
289
  /**
280
290
  * Apply styling to the PickerControl slots based on the state
@@ -285,6 +295,7 @@ export const useTagPickerControlStyles_unstable = state => {
285
295
  const styles = useStyles();
286
296
  const iconStyles = useIconStyles();
287
297
  const asideStyles = useAsideStyles();
298
+ const secondaryActionStyles = useSecondaryActionStyles();
288
299
  state.root.className = mergeClasses(tagPickerControlClassNames.root, styles.root, styles[state.size], styles[state.appearance], !state.disabled && state.appearance === 'outline' && styles.outlineInteractive, state.invalid && state.appearance !== 'underline' && styles.invalid, state.invalid && state.appearance === 'underline' && styles.invalidUnderline, state.disabled && styles.disabled, state.root.className);
289
300
  if (state.aside) {
290
301
  state.aside.className = mergeClasses(tagPickerControlClassNames.aside, asideStyles.root, asideStyles[state.size], state.aside.className);
@@ -293,7 +304,7 @@ export const useTagPickerControlStyles_unstable = state => {
293
304
  state.expandIcon.className = mergeClasses(tagPickerControlClassNames.expandIcon, iconStyles.icon, iconStyles[state.size], state.disabled && iconStyles.disabled, state.expandIcon.className);
294
305
  }
295
306
  if (state.secondaryAction) {
296
- state.secondaryAction.className = mergeClasses(tagPickerControlClassNames.secondaryAction, state.secondaryAction.className);
307
+ state.secondaryAction.className = mergeClasses(tagPickerControlClassNames.secondaryAction, secondaryActionStyles.root, state.secondaryAction.className);
297
308
  }
298
309
  return state;
299
310
  };
package/lib/components/TagPickerControl/useTagPickerControlStyles.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["__styles","mergeClasses","shorthands","tokens","tagPickerControlClassNames","root","expandIcon","secondaryAction","aside","tagPickerControlAsideWidthToken","useStyles","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","z189sj","uwmqm3","Bt984gj","i8kkvl","B7ck84d","mc9l5x","Bf4jedk","qhf8xq","Eh141a","Bbr2w1p","Bduesf4","Bpq79vn","li1rpt","Bsft5z2","E3zdtr","Eqx8gd","By385i5","B1piin3","Dlnsje","d9w3h3","B3778ie","B1q35kw","Bw17bha","Bcgy8vk","Bjuhk93","Gjdm7m","b1kco5","Ba2ppi3","F2fol1","lck23g","df92cz","I188md","umuwi5","Blcqepd","nplu4u","Bioka5o","H713fs","B9ooomg","Bercvud","listbox","E5pizo","Bxyxcbc","listboxCollapsed","medium","sshi5w","large","outline","De3pzq","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","outlineInteractive","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","B6oc9vd","ak43y8","wmxk5l","B50zh58","underline","invalid","tvckwq","gk2u95","hhx65j","Bxowmz0","invalidUnderline","disabled","Bceei9c","Bjwas2f","Bn1d65q","Bxeuatn","n51gp8","d","p","w","m","h","a","useAsideStyles","Bhzewxz","j35jbq","Budl1dq","wkccdc","Bqenvij","iconSizes","small","useIconStyles","icon","sj55zd","Be2twd7","Bo70h7d","Frg6f3","useTagPickerControlStyles_unstable","state","styles","iconStyles","asideStyles","className","size","appearance"],"sources":["useTagPickerControlStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const tagPickerControlClassNames = {\n root: 'fui-TagPickerControl',\n expandIcon: 'fui-TagPickerControl__expandIcon',\n secondaryAction: 'fui-TagPickerControl__secondaryAction',\n aside: 'fui-TagPickerControl__aside'\n};\nexport const tagPickerControlAsideWidthToken = '--fui-TagPickerControl-aside-width';\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n borderRadius: tokens.borderRadiusMedium,\n paddingRight: `calc(${tokens.spacingHorizontalM} + var(${tagPickerControlAsideWidthToken}, 0px))`,\n paddingLeft: tokens.spacingHorizontalM,\n alignItems: 'center',\n columnGap: tokens.spacingHorizontalXXS,\n boxSizing: 'border-box',\n display: 'flex',\n minWidth: '250px',\n position: 'relative',\n flexWrap: 'wrap',\n // windows high contrast mode focus indicator\n ':focus-within': {\n outlineWidth: '2px',\n outlineStyle: 'solid',\n outlineColor: 'transparent'\n },\n // bottom focus border, shared with Input, Select, and SpinButton\n '::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n left: '-1px',\n bottom: '-1px',\n right: '-1px',\n height: `max(2px, ${tokens.borderRadiusMedium})`,\n borderBottomLeftRadius: tokens.borderRadiusMedium,\n borderBottomRightRadius: tokens.borderRadiusMedium,\n borderBottom: `${tokens.strokeWidthThick} solid ${tokens.colorCompoundBrandStroke}`,\n clipPath: 'inset(calc(100% - 2px) 0 0 0)',\n transform: 'scaleX(0)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationUltraFast,\n transitionDelay: tokens.curveAccelerateMid,\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms'\n }\n },\n ':focus-within::after': {\n transform: 'scaleX(1)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationNormal,\n transitionDelay: tokens.curveDecelerateMid,\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms'\n }\n },\n ':focus-within:active::after': {\n borderBottomColor: tokens.colorCompoundBrandStrokePressed\n }\n },\n listbox: {\n boxShadow: `${tokens.shadow16}`,\n borderRadius: tokens.borderRadiusMedium,\n maxHeight: '80vh',\n boxSizing: 'border-box'\n },\n listboxCollapsed: {\n display: 'none'\n },\n // size variants\n medium: {\n minHeight: '32px'\n },\n large: {\n minHeight: '40px'\n },\n 'extra-large': {\n minHeight: '44px'\n },\n // appearance variants\n outline: {\n backgroundColor: tokens.colorNeutralBackground1,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n borderBottomColor: tokens.colorNeutralStrokeAccessible\n },\n outlineInteractive: {\n '&:hover': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n borderBottomColor: tokens.colorNeutralStrokeAccessible\n },\n '&:active': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n borderBottomColor: tokens.colorNeutralStrokeAccessible\n }\n },\n underline: {\n backgroundColor: tokens.colorTransparentBackground,\n borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,\n borderRadius: '0'\n },\n 'filled-lighter': {\n backgroundColor: tokens.colorNeutralBackground1,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`\n },\n 'filled-darker': {\n backgroundColor: tokens.colorNeutralBackground3,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`\n },\n invalid: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n ...shorthands.borderColor(tokens.colorPaletteRedBorder2)\n }\n },\n invalidUnderline: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n borderBottomColor: tokens.colorPaletteRedBorder2\n }\n },\n disabled: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText')\n }\n }\n});\nconst useAsideStyles = makeStyles({\n root: {\n display: 'grid',\n alignItems: 'center',\n position: 'absolute',\n top: '0',\n right: tokens.spacingHorizontalM,\n gridTemplateColumns: 'repeat(2, auto)',\n gridTemplateRows: 'minmax(32px, auto) 1fr',\n height: '100%',\n cursor: 'text'\n },\n // size variants\n medium: {\n minHeight: '32px'\n },\n large: {\n minHeight: '40px'\n },\n 'extra-large': {\n minHeight: '44px'\n }\n});\nexport const iconSizes = {\n small: '16px',\n medium: '20px',\n large: '24px'\n};\nconst useIconStyles = makeStyles({\n icon: {\n boxSizing: 'border-box',\n color: tokens.colorNeutralStrokeAccessible,\n cursor: 'pointer',\n display: 'block',\n fontSize: tokens.fontSizeBase500,\n // the SVG must have display: block for accurate positioning\n // otherwise an extra inline space is inserted after the svg element\n '& svg': {\n display: 'block'\n }\n },\n // icon size variants\n medium: {\n fontSize: iconSizes.small,\n marginLeft: tokens.spacingHorizontalXXS\n },\n large: {\n fontSize: iconSizes.medium,\n marginLeft: tokens.spacingHorizontalXXS\n },\n 'extra-large': {\n fontSize: iconSizes.large,\n marginLeft: tokens.spacingHorizontalSNudge\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'not-allowed'\n }\n});\n/**\n * Apply styling to the PickerControl slots based on the state\n */ export const useTagPickerControlStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n const iconStyles = useIconStyles();\n const asideStyles = useAsideStyles();\n state.root.className = mergeClasses(tagPickerControlClassNames.root, styles.root, styles[state.size], styles[state.appearance], !state.disabled && state.appearance === 'outline' && styles.outlineInteractive, state.invalid && state.appearance !== 'underline' && styles.invalid, state.invalid && state.appearance === 'underline' && styles.invalidUnderline, state.disabled && styles.disabled, state.root.className);\n if (state.aside) {\n state.aside.className = mergeClasses(tagPickerControlClassNames.aside, asideStyles.root, asideStyles[state.size], state.aside.className);\n }\n if (state.expandIcon) {\n state.expandIcon.className = mergeClasses(tagPickerControlClassNames.expandIcon, iconStyles.icon, iconStyles[state.size], state.disabled && iconStyles.disabled, state.expandIcon.className);\n }\n if (state.secondaryAction) {\n state.secondaryAction.className = mergeClasses(tagPickerControlClassNames.secondaryAction, state.secondaryAction.className);\n }\n return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,0BAA0B,GAAG;EACtCC,IAAI,EAAE,sBAAsB;EAC5BC,UAAU,EAAE,kCAAkC;EAC9CC,eAAe,EAAE,uCAAuC;EACxDC,KAAK,EAAE;AACX,CAAC;AACD,OAAO,MAAMC,+BAA+B,GAAG,oCAAoC;AACnF;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGV,QAAA;EAAAK,IAAA;IAAAM,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,OAAA;IAAAC,MAAA;IAAA7C,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAA0C,OAAA;IAAArC,OAAA;EAAA;EAAAsC,gBAAA;IAAArC,MAAA;EAAA;EAAAsC,MAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAD,MAAA;EAAA;EAAA;IAAAA,MAAA;EAAA;EAAAE,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,kBAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,SAAA;IAAA3B,MAAA;IAAAE,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAH,OAAA;IAAArD,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAA;IAAAgD,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAA;IAAAjB,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAW,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,gBAAA;IAAAF,MAAA;EAAA;EAAAG,QAAA;IAAAC,OAAA;IAAAnC,MAAA;IAAAc,MAAA;IAAAJ,MAAA;IAAAR,OAAA;IAAAI,MAAA;IAAA8B,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;EAAAC,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;EAAAC,CAAA;EAAAC,CAAA;AAAA,CAwHrB,CAAC;AACF,MAAMC,cAAc,gBAAG7G,QAAA;EAAAK,IAAA;IAAAgB,MAAA;IAAAH,OAAA;IAAAK,MAAA;IAAAuF,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAhB,OAAA;EAAA;EAAAvC,MAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAD,MAAA;EAAA;EAAA;IAAAA,MAAA;EAAA;AAAA;EAAA2C,CAAA;AAAA,CAsBtB,CAAC;AACF,OAAO,MAAMY,SAAS,GAAG;EACrBC,KAAK,EAAE,MAAM;EACbzD,MAAM,EAAE,MAAM;EACdE,KAAK,EAAE;AACX,CAAC;AACD,MAAMwD,aAAa,gBAAGrH,QAAA;EAAAsH,IAAA;IAAAlG,OAAA;IAAAmG,MAAA;IAAArB,OAAA;IAAA7E,MAAA;IAAAmG,OAAA;IAAAC,OAAA;EAAA;EAAA9D,MAAA;IAAA6D,OAAA;IAAAE,MAAA;EAAA;EAAA7D,KAAA;IAAA2D,OAAA;IAAAE,MAAA;EAAA;EAAA;IAAAF,OAAA;IAAAE,MAAA;EAAA;EAAAzB,QAAA;IAAAsB,MAAA;IAAArB,OAAA;EAAA;AAAA;EAAAK,CAAA;AAAA,CA8BrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMoB,kCAAkC,GAAIC,KAAK,IAAG;EAC3D,aAAa;;EACb,MAAMC,MAAM,GAAGnH,SAAS,CAAC,CAAC;EAC1B,MAAMoH,UAAU,GAAGT,aAAa,CAAC,CAAC;EAClC,MAAMU,WAAW,GAAGlB,cAAc,CAAC,CAAC;EACpCe,KAAK,CAACvH,IAAI,CAAC2H,SAAS,GAAG/H,YAAY,CAACG,0BAA0B,CAACC,IAAI,EAAEwH,MAAM,CAACxH,IAAI,EAAEwH,MAAM,CAACD,KAAK,CAACK,IAAI,CAAC,EAAEJ,MAAM,CAACD,KAAK,CAACM,UAAU,CAAC,EAAE,CAACN,KAAK,CAAC3B,QAAQ,IAAI2B,KAAK,CAACM,UAAU,KAAK,SAAS,IAAIL,MAAM,CAAC5C,kBAAkB,EAAE2C,KAAK,CAACjC,OAAO,IAAIiC,KAAK,CAACM,UAAU,KAAK,WAAW,IAAIL,MAAM,CAAClC,OAAO,EAAEiC,KAAK,CAACjC,OAAO,IAAIiC,KAAK,CAACM,UAAU,KAAK,WAAW,IAAIL,MAAM,CAAC7B,gBAAgB,EAAE4B,KAAK,CAAC3B,QAAQ,IAAI4B,MAAM,CAAC5B,QAAQ,EAAE2B,KAAK,CAACvH,IAAI,CAAC2H,SAAS,CAAC;EAC3Z,IAAIJ,KAAK,CAACpH,KAAK,EAAE;IACboH,KAAK,CAACpH,KAAK,CAACwH,SAAS,GAAG/H,YAAY,CAACG,0BAA0B,CAACI,KAAK,EAAEuH,WAAW,CAAC1H,IAAI,EAAE0H,WAAW,CAACH,KAAK,CAACK,IAAI,CAAC,EAAEL,KAAK,CAACpH,KAAK,CAACwH,SAAS,CAAC;EAC5I;EACA,IAAIJ,KAAK,CAACtH,UAAU,EAAE;IAClBsH,KAAK,CAACtH,UAAU,CAAC0H,SAAS,GAAG/H,YAAY,CAACG,0BAA0B,CAACE,UAAU,EAAEwH,UAAU,CAACR,IAAI,EAAEQ,UAAU,CAACF,KAAK,CAACK,IAAI,CAAC,EAAEL,KAAK,CAAC3B,QAAQ,IAAI6B,UAAU,CAAC7B,QAAQ,EAAE2B,KAAK,CAACtH,UAAU,CAAC0H,SAAS,CAAC;EAChM;EACA,IAAIJ,KAAK,CAACrH,eAAe,EAAE;IACvBqH,KAAK,CAACrH,eAAe,CAACyH,SAAS,GAAG/H,YAAY,CAACG,0BAA0B,CAACG,eAAe,EAAEqH,KAAK,CAACrH,eAAe,CAACyH,SAAS,CAAC;EAC/H;EACA,OAAOJ,KAAK;AAChB,CAAC","ignoreList":[]}
1
+ {"version":3,"names":["__styles","mergeClasses","shorthands","tokens","tagPickerControlClassNames","root","expandIcon","secondaryAction","aside","tagPickerControlAsideWidthToken","useStyles","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","z189sj","uwmqm3","Bt984gj","i8kkvl","B7ck84d","mc9l5x","Bf4jedk","qhf8xq","Eh141a","Bbr2w1p","Bduesf4","Bpq79vn","li1rpt","Bsft5z2","E3zdtr","Eqx8gd","By385i5","B1piin3","Dlnsje","d9w3h3","B3778ie","B1q35kw","Bw17bha","Bcgy8vk","Bjuhk93","Gjdm7m","b1kco5","Ba2ppi3","F2fol1","lck23g","df92cz","I188md","umuwi5","Blcqepd","nplu4u","Bioka5o","H713fs","B9ooomg","Bercvud","listbox","E5pizo","Bxyxcbc","listboxCollapsed","medium","sshi5w","large","outline","De3pzq","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","outlineInteractive","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","B6oc9vd","ak43y8","wmxk5l","B50zh58","underline","invalid","tvckwq","gk2u95","hhx65j","Bxowmz0","invalidUnderline","disabled","Bceei9c","Bjwas2f","Bn1d65q","Bxeuatn","n51gp8","d","p","w","m","h","a","useAsideStyles","Bhzewxz","j35jbq","Bqenvij","iconSizes","small","useIconStyles","icon","sj55zd","Brf1p80","qb2dma","Be2twd7","Bo70h7d","Frg6f3","useSecondaryActionStyles","useTagPickerControlStyles_unstable","state","styles","iconStyles","asideStyles","secondaryActionStyles","className","size","appearance"],"sources":["useTagPickerControlStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const tagPickerControlClassNames = {\n root: 'fui-TagPickerControl',\n expandIcon: 'fui-TagPickerControl__expandIcon',\n secondaryAction: 'fui-TagPickerControl__secondaryAction',\n aside: 'fui-TagPickerControl__aside'\n};\nexport const tagPickerControlAsideWidthToken = '--fui-TagPickerControl-aside-width';\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n borderRadius: tokens.borderRadiusMedium,\n paddingRight: `calc(${tokens.spacingHorizontalM} + var(${tagPickerControlAsideWidthToken}, 0px))`,\n paddingLeft: tokens.spacingHorizontalM,\n alignItems: 'center',\n columnGap: tokens.spacingHorizontalXXS,\n boxSizing: 'border-box',\n display: 'flex',\n minWidth: '250px',\n position: 'relative',\n flexWrap: 'wrap',\n // windows high contrast mode focus indicator\n ':focus-within': {\n outlineWidth: '2px',\n outlineStyle: 'solid',\n outlineColor: 'transparent'\n },\n // bottom focus border, shared with Input, Select, and SpinButton\n '::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n left: '-1px',\n bottom: '-1px',\n right: '-1px',\n height: `max(2px, ${tokens.borderRadiusMedium})`,\n borderBottomLeftRadius: tokens.borderRadiusMedium,\n borderBottomRightRadius: tokens.borderRadiusMedium,\n borderBottom: `${tokens.strokeWidthThick} solid ${tokens.colorCompoundBrandStroke}`,\n clipPath: 'inset(calc(100% - 2px) 0 0 0)',\n transform: 'scaleX(0)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationUltraFast,\n transitionDelay: tokens.curveAccelerateMid,\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms'\n }\n },\n ':focus-within::after': {\n transform: 'scaleX(1)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationNormal,\n transitionDelay: tokens.curveDecelerateMid,\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms'\n }\n },\n ':focus-within:active::after': {\n borderBottomColor: tokens.colorCompoundBrandStrokePressed\n }\n },\n listbox: {\n boxShadow: `${tokens.shadow16}`,\n borderRadius: tokens.borderRadiusMedium,\n maxHeight: '80vh',\n boxSizing: 'border-box'\n },\n listboxCollapsed: {\n display: 'none'\n },\n // size variants\n medium: {\n minHeight: '32px'\n },\n large: {\n minHeight: '40px'\n },\n 'extra-large': {\n minHeight: '44px'\n },\n // appearance variants\n outline: {\n backgroundColor: tokens.colorNeutralBackground1,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n borderBottomColor: tokens.colorNeutralStrokeAccessible\n },\n outlineInteractive: {\n '&:hover': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n borderBottomColor: tokens.colorNeutralStrokeAccessible\n },\n '&:active': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n borderBottomColor: tokens.colorNeutralStrokeAccessible\n }\n },\n underline: {\n backgroundColor: tokens.colorTransparentBackground,\n borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,\n borderRadius: '0'\n },\n 'filled-lighter': {\n backgroundColor: tokens.colorNeutralBackground1,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`\n },\n 'filled-darker': {\n backgroundColor: tokens.colorNeutralBackground3,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`\n },\n invalid: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n ...shorthands.borderColor(tokens.colorPaletteRedBorder2)\n }\n },\n invalidUnderline: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n borderBottomColor: tokens.colorPaletteRedBorder2\n }\n },\n disabled: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText')\n }\n }\n});\nconst useAsideStyles = makeStyles({\n root: {\n display: 'flex',\n position: 'absolute',\n top: '0',\n right: tokens.spacingHorizontalM,\n height: '100%',\n cursor: 'text'\n },\n // size variants\n medium: {\n minHeight: '32px'\n },\n large: {\n minHeight: '40px'\n },\n 'extra-large': {\n minHeight: '44px'\n }\n});\nexport const iconSizes = {\n small: '16px',\n medium: '20px',\n large: '24px'\n};\nconst useIconStyles = makeStyles({\n icon: {\n boxSizing: 'border-box',\n color: tokens.colorNeutralStrokeAccessible,\n cursor: 'pointer',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n alignSelf: 'flex-start',\n fontSize: tokens.fontSizeBase500,\n // the SVG must have display: block for accurate positioning\n // otherwise an extra inline space is inserted after the svg element\n '& svg': {\n display: 'block'\n }\n },\n // icon size variants\n medium: {\n fontSize: iconSizes.small,\n marginLeft: tokens.spacingHorizontalXXS,\n minHeight: '32px'\n },\n large: {\n fontSize: iconSizes.medium,\n marginLeft: tokens.spacingHorizontalXXS,\n minHeight: '40px'\n },\n 'extra-large': {\n fontSize: iconSizes.large,\n marginLeft: tokens.spacingHorizontalSNudge,\n minHeight: '44px'\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'not-allowed'\n }\n});\nconst useSecondaryActionStyles = makeStyles({\n root: {\n display: 'flex'\n }\n});\n/**\n * Apply styling to the PickerControl slots based on the state\n */ export const useTagPickerControlStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n const iconStyles = useIconStyles();\n const asideStyles = useAsideStyles();\n const secondaryActionStyles = useSecondaryActionStyles();\n state.root.className = mergeClasses(tagPickerControlClassNames.root, styles.root, styles[state.size], styles[state.appearance], !state.disabled && state.appearance === 'outline' && styles.outlineInteractive, state.invalid && state.appearance !== 'underline' && styles.invalid, state.invalid && state.appearance === 'underline' && styles.invalidUnderline, state.disabled && styles.disabled, state.root.className);\n if (state.aside) {\n state.aside.className = mergeClasses(tagPickerControlClassNames.aside, asideStyles.root, asideStyles[state.size], state.aside.className);\n }\n if (state.expandIcon) {\n state.expandIcon.className = mergeClasses(tagPickerControlClassNames.expandIcon, iconStyles.icon, iconStyles[state.size], state.disabled && iconStyles.disabled, state.expandIcon.className);\n }\n if (state.secondaryAction) {\n state.secondaryAction.className = mergeClasses(tagPickerControlClassNames.secondaryAction, secondaryActionStyles.root, state.secondaryAction.className);\n }\n return state;\n};\n"],"mappings":"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","ignoreList":[]}
package/lib/components/TagPickerOption/useTagPickerOptionStyles.styles.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import { __styles, mergeClasses } from '@griffel/react';
2
2
  import { useOptionStyles_unstable } from '@fluentui/react-combobox';
3
+ import { typographyStyles } from '@fluentui/react-theme';
3
4
  export const tagPickerOptionClassNames = {
4
5
  root: 'fui-TagPickerOption',
5
6
  media: 'fui-TagPickerOption__media',
@@ -16,13 +17,17 @@ const useStyles = /*#__PURE__*/__styles({
16
17
  },
17
18
  secondaryContent: {
18
19
  Br312pm: "fd46tj4",
19
- Ijaq50: "faunodf"
20
+ Ijaq50: "faunodf",
21
+ Bahqtrf: "fk6fouc",
22
+ Be2twd7: "fy9rknc",
23
+ Bhrd7zp: "figsok6",
24
+ Bg96gwp: "fwrc4pm"
20
25
  },
21
26
  media: {
22
27
  Ijaq50: "fldnz9j"
23
28
  }
24
29
  }, {
25
- d: [".f13qh94s{display:grid;}", ".fjxzuw{grid-template-columns:auto 1fr;}", ".f122n59{align-items:center;}", ".fd46tj4{grid-column-start:2;}", ".faunodf{grid-row-start:2;}", ".fldnz9j{grid-row-start:span 2;}"]
30
+ d: [".f13qh94s{display:grid;}", ".fjxzuw{grid-template-columns:auto 1fr;}", ".f122n59{align-items:center;}", ".fd46tj4{grid-column-start:2;}", ".faunodf{grid-row-start:2;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".fldnz9j{grid-row-start:span 2;}"]
26
31
  });
27
32
  /**
28
33
  * Apply styling to the TagPickerOption slots based on the state
@@ -30,6 +35,8 @@ const useStyles = /*#__PURE__*/__styles({
30
35
  export const useTagPickerOptionStyles_unstable = state => {
31
36
  'use no memo';
32
37
 
38
+ const styles = useStyles();
39
+ state.root.className = mergeClasses(tagPickerOptionClassNames.root, styles.root, state.root.className);
33
40
  useOptionStyles_unstable({
34
41
  ...state,
35
42
  active: false,
@@ -38,8 +45,6 @@ export const useTagPickerOptionStyles_unstable = state => {
38
45
  checkIcon: undefined,
39
46
  selected: false
40
47
  });
41
- const styles = useStyles();
42
- state.root.className = mergeClasses(tagPickerOptionClassNames.root, styles.root, state.root.className);
43
48
  if (state.media) {
44
49
  state.media.className = mergeClasses(tagPickerOptionClassNames.media, styles.media, state.media.className);
45
50
  }
package/lib/components/TagPickerOption/useTagPickerOptionStyles.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["__styles","mergeClasses","useOptionStyles_unstable","tagPickerOptionClassNames","root","media","secondaryContent","useStyles","mc9l5x","Budl1dq","Bt984gj","Br312pm","Ijaq50","d","useTagPickerOptionStyles_unstable","state","active","disabled","focusVisible","checkIcon","undefined","selected","styles","className"],"sources":["useTagPickerOptionStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { useOptionStyles_unstable } from '@fluentui/react-combobox';\nexport const tagPickerOptionClassNames = {\n root: 'fui-TagPickerOption',\n media: 'fui-TagPickerOption__media',\n secondaryContent: 'fui-TagPickerOption__secondaryContent'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n display: 'grid',\n gridTemplateColumns: 'auto 1fr',\n alignItems: 'center'\n },\n secondaryContent: {\n gridColumnStart: 2,\n gridRowStart: 2\n },\n media: {\n gridRowStart: 'span 2'\n }\n});\n/**\n * Apply styling to the TagPickerOption slots based on the state\n */ export const useTagPickerOptionStyles_unstable = (state)=>{\n 'use no memo';\n useOptionStyles_unstable({\n ...state,\n active: false,\n disabled: false,\n focusVisible: false,\n checkIcon: undefined,\n selected: false\n });\n const styles = useStyles();\n state.root.className = mergeClasses(tagPickerOptionClassNames.root, styles.root, state.root.className);\n if (state.media) {\n state.media.className = mergeClasses(tagPickerOptionClassNames.media, styles.media, state.media.className);\n }\n if (state.secondaryContent) {\n state.secondaryContent.className = mergeClasses(tagPickerOptionClassNames.secondaryContent, styles.secondaryContent, state.secondaryContent.className);\n }\n return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,wBAAwB,QAAQ,0BAA0B;AACnE,OAAO,MAAMC,yBAAyB,GAAG;EACrCC,IAAI,EAAE,qBAAqB;EAC3BC,KAAK,EAAE,4BAA4B;EACnCC,gBAAgB,EAAE;AACtB,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGP,QAAA;EAAAI,IAAA;IAAAI,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAJ,gBAAA;IAAAK,OAAA;IAAAC,MAAA;EAAA;EAAAP,KAAA;IAAAO,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAarB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,iCAAiC,GAAIC,KAAK,IAAG;EAC1D,aAAa;;EACbb,wBAAwB,CAAC;IACrB,GAAGa,KAAK;IACRC,MAAM,EAAE,KAAK;IACbC,QAAQ,EAAE,KAAK;IACfC,YAAY,EAAE,KAAK;IACnBC,SAAS,EAAEC,SAAS;IACpBC,QAAQ,EAAE;EACd,CAAC,CAAC;EACF,MAAMC,MAAM,GAAGf,SAAS,CAAC,CAAC;EAC1BQ,KAAK,CAACX,IAAI,CAACmB,SAAS,GAAGtB,YAAY,CAACE,yBAAyB,CAACC,IAAI,EAAEkB,MAAM,CAAClB,IAAI,EAAEW,KAAK,CAACX,IAAI,CAACmB,SAAS,CAAC;EACtG,IAAIR,KAAK,CAACV,KAAK,EAAE;IACbU,KAAK,CAACV,KAAK,CAACkB,SAAS,GAAGtB,YAAY,CAACE,yBAAyB,CAACE,KAAK,EAAEiB,MAAM,CAACjB,KAAK,EAAEU,KAAK,CAACV,KAAK,CAACkB,SAAS,CAAC;EAC9G;EACA,IAAIR,KAAK,CAACT,gBAAgB,EAAE;IACxBS,KAAK,CAACT,gBAAgB,CAACiB,SAAS,GAAGtB,YAAY,CAACE,yBAAyB,CAACG,gBAAgB,EAAEgB,MAAM,CAAChB,gBAAgB,EAAES,KAAK,CAACT,gBAAgB,CAACiB,SAAS,CAAC;EAC1J;EACA,OAAOR,KAAK;AAChB,CAAC","ignoreList":[]}
1
+ {"version":3,"names":["__styles","mergeClasses","useOptionStyles_unstable","typographyStyles","tagPickerOptionClassNames","root","media","secondaryContent","useStyles","mc9l5x","Budl1dq","Bt984gj","Br312pm","Ijaq50","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","d","useTagPickerOptionStyles_unstable","state","styles","className","active","disabled","focusVisible","checkIcon","undefined","selected"],"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};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n display: 'grid',\n gridTemplateColumns: 'auto 1fr',\n alignItems: 'center'\n },\n secondaryContent: {\n gridColumnStart: 2,\n gridRowStart: 2,\n ...typographyStyles.caption1\n },\n media: {\n gridRowStart: 'span 2'\n }\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 styles = useStyles();\n state.root.className = mergeClasses(tagPickerOptionClassNames.root, styles.root, 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, styles.media, state.media.className);\n }\n if (state.secondaryContent) {\n state.secondaryContent.className = mergeClasses(tagPickerOptionClassNames.secondaryContent, styles.secondaryContent, state.secondaryContent.className);\n }\n return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,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;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGR,QAAA;EAAAK,IAAA;IAAAI,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAJ,gBAAA;IAAAK,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAX,KAAA;IAAAO,MAAA;EAAA;AAAA;EAAAK,CAAA;AAAA,CAcrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,iCAAiC,GAAIC,KAAK,IAAG;EAC1D,aAAa;;EACb,MAAMC,MAAM,GAAGb,SAAS,CAAC,CAAC;EAC1BY,KAAK,CAACf,IAAI,CAACiB,SAAS,GAAGrB,YAAY,CAACG,yBAAyB,CAACC,IAAI,EAAEgB,MAAM,CAAChB,IAAI,EAAEe,KAAK,CAACf,IAAI,CAACiB,SAAS,CAAC;EACtGpB,wBAAwB,CAAC;IACrB,GAAGkB,KAAK;IACRG,MAAM,EAAE,KAAK;IACbC,QAAQ,EAAE,KAAK;IACfC,YAAY,EAAE,KAAK;IACnBC,SAAS,EAAEC,SAAS;IACpBC,QAAQ,EAAE;EACd,CAAC,CAAC;EACF,IAAIR,KAAK,CAACd,KAAK,EAAE;IACbc,KAAK,CAACd,KAAK,CAACgB,SAAS,GAAGrB,YAAY,CAACG,yBAAyB,CAACE,KAAK,EAAEe,MAAM,CAACf,KAAK,EAAEc,KAAK,CAACd,KAAK,CAACgB,SAAS,CAAC;EAC9G;EACA,IAAIF,KAAK,CAACb,gBAAgB,EAAE;IACxBa,KAAK,CAACb,gBAAgB,CAACe,SAAS,GAAGrB,YAAY,CAACG,yBAAyB,CAACG,gBAAgB,EAAEc,MAAM,CAACd,gBAAgB,EAAEa,KAAK,CAACb,gBAAgB,CAACe,SAAS,CAAC;EAC1J;EACA,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
package/lib/index.js CHANGED
@@ -7,3 +7,4 @@ export { TagPickerOption, tagPickerOptionClassNames, renderTagPickerOption_unsta
7
7
  export { TagPickerGroup, tagPickerGroupClassNames, renderTagPickerGroup_unstable, useTagPickerGroupStyles_unstable, useTagPickerGroup_unstable } from './TagPickerGroup';
8
8
  export { TagPickerOptionGroup, tagPickerOptionGroupClassNames, renderTagPickerOptionGroup, useTagPickerOptionGroupStyles, useTagPickerOptionGroup } from './TagPickerOptionGroup';
9
9
  export { useTagPickerFilter } from './utils/useTagPickerFilter';
10
+ export { useTagPickerContext_unstable } from './contexts/TagPickerContext';
package/lib/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { TagPicker, renderTagPicker_unstable, useTagPicker_unstable } from './TagPicker';\nexport type {\n TagPickerContextValues,\n TagPickerProps,\n TagPickerSlots,\n TagPickerState,\n TagPickerOnOpenChangeData,\n TagPickerOnOptionSelectData,\n TagPickerSize,\n} from './TagPicker';\nexport {\n TagPickerInput,\n tagPickerInputClassNames,\n renderTagPickerInput_unstable,\n useTagPickerInputStyles_unstable,\n useTagPickerInput_unstable,\n} from './TagPickerInput';\nexport type { TagPickerInputProps, TagPickerInputSlots, TagPickerInputState } from './TagPickerInput';\nexport {\n TagPickerList,\n tagPickerListClassNames,\n renderTagPickerList_unstable,\n useTagPickerListStyles_unstable,\n useTagPickerList_unstable,\n} from './TagPickerList';\nexport type { TagPickerListProps, TagPickerListSlots, TagPickerListState } from './TagPickerList';\nexport {\n TagPickerButton,\n tagPickerButtonClassNames,\n renderTagPickerButton_unstable,\n useTagPickerButtonStyles_unstable,\n useTagPickerButton_unstable,\n} from './TagPickerButton';\nexport type { TagPickerButtonProps, TagPickerButtonSlots, TagPickerButtonState } from './TagPickerButton';\nexport {\n TagPickerControl,\n tagPickerControlClassNames,\n renderTagPickerControl_unstable,\n useTagPickerControlStyles_unstable,\n useTagPickerControl_unstable,\n} from './TagPickerControl';\nexport type { TagPickerControlProps, TagPickerControlSlots, TagPickerControlState } from './TagPickerControl';\nexport {\n TagPickerOption,\n tagPickerOptionClassNames,\n renderTagPickerOption_unstable,\n useTagPickerOptionStyles_unstable,\n useTagPickerOption_unstable,\n} from './TagPickerOption';\nexport type { TagPickerOptionProps, TagPickerOptionSlots, TagPickerOptionState } from './TagPickerOption';\nexport {\n TagPickerGroup,\n tagPickerGroupClassNames,\n renderTagPickerGroup_unstable,\n useTagPickerGroupStyles_unstable,\n useTagPickerGroup_unstable,\n} from './TagPickerGroup';\nexport type { TagPickerGroupProps, TagPickerGroupSlots, TagPickerGroupState } from './TagPickerGroup';\n\nexport {\n TagPickerOptionGroup,\n tagPickerOptionGroupClassNames,\n renderTagPickerOptionGroup,\n useTagPickerOptionGroupStyles,\n useTagPickerOptionGroup,\n} from './TagPickerOptionGroup';\nexport type {\n TagPickerOptionGroupProps,\n TagPickerOptionGroupSlots,\n TagPickerOptionGroupState,\n} from './TagPickerOptionGroup';\n\nexport { useTagPickerFilter } from './utils/useTagPickerFilter';\n"],"names":["TagPicker","renderTagPicker_unstable","useTagPicker_unstable","TagPickerInput","tagPickerInputClassNames","renderTagPickerInput_unstable","useTagPickerInputStyles_unstable","useTagPickerInput_unstable","TagPickerList","tagPickerListClassNames","renderTagPickerList_unstable","useTagPickerListStyles_unstable","useTagPickerList_unstable","TagPickerButton","tagPickerButtonClassNames","renderTagPickerButton_unstable","useTagPickerButtonStyles_unstable","useTagPickerButton_unstable","TagPickerControl","tagPickerControlClassNames","renderTagPickerControl_unstable","useTagPickerControlStyles_unstable","useTagPickerControl_unstable","TagPickerOption","tagPickerOptionClassNames","renderTagPickerOption_unstable","useTagPickerOptionStyles_unstable","useTagPickerOption_unstable","TagPickerGroup","tagPickerGroupClassNames","renderTagPickerGroup_unstable","useTagPickerGroupStyles_unstable","useTagPickerGroup_unstable","TagPickerOptionGroup","tagPickerOptionGroupClassNames","renderTagPickerOptionGroup","useTagPickerOptionGroupStyles","useTagPickerOptionGroup","useTagPickerFilter"],"rangeMappings":";;;;;;;;","mappings":"AAAA,SAASA,SAAS,EAAEC,wBAAwB,EAAEC,qBAAqB,QAAQ,cAAc;AAUzF,SACEC,cAAc,EACdC,wBAAwB,EACxBC,6BAA6B,EAC7BC,gCAAgC,EAChCC,0BAA0B,QACrB,mBAAmB;AAE1B,SACEC,aAAa,EACbC,uBAAuB,EACvBC,4BAA4B,EAC5BC,+BAA+B,EAC/BC,yBAAyB,QACpB,kBAAkB;AAEzB,SACEC,eAAe,EACfC,yBAAyB,EACzBC,8BAA8B,EAC9BC,iCAAiC,EACjCC,2BAA2B,QACtB,oBAAoB;AAE3B,SACEC,gBAAgB,EAChBC,0BAA0B,EAC1BC,+BAA+B,EAC/BC,kCAAkC,EAClCC,4BAA4B,QACvB,qBAAqB;AAE5B,SACEC,eAAe,EACfC,yBAAyB,EACzBC,8BAA8B,EAC9BC,iCAAiC,EACjCC,2BAA2B,QACtB,oBAAoB;AAE3B,SACEC,cAAc,EACdC,wBAAwB,EACxBC,6BAA6B,EAC7BC,gCAAgC,EAChCC,0BAA0B,QACrB,mBAAmB;AAG1B,SACEC,oBAAoB,EACpBC,8BAA8B,EAC9BC,0BAA0B,EAC1BC,6BAA6B,EAC7BC,uBAAuB,QAClB,yBAAyB;AAOhC,SAASC,kBAAkB,QAAQ,6BAA6B"}
1
+ {"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { TagPicker, renderTagPicker_unstable, useTagPicker_unstable } from './TagPicker';\nexport type {\n TagPickerContextValues,\n TagPickerProps,\n TagPickerSlots,\n TagPickerState,\n TagPickerOnOpenChangeData,\n TagPickerOnOptionSelectData,\n TagPickerSize,\n} from './TagPicker';\nexport {\n TagPickerInput,\n tagPickerInputClassNames,\n renderTagPickerInput_unstable,\n useTagPickerInputStyles_unstable,\n useTagPickerInput_unstable,\n} from './TagPickerInput';\nexport type { TagPickerInputProps, TagPickerInputSlots, TagPickerInputState } from './TagPickerInput';\nexport {\n TagPickerList,\n tagPickerListClassNames,\n renderTagPickerList_unstable,\n useTagPickerListStyles_unstable,\n useTagPickerList_unstable,\n} from './TagPickerList';\nexport type { TagPickerListProps, TagPickerListSlots, TagPickerListState } from './TagPickerList';\nexport {\n TagPickerButton,\n tagPickerButtonClassNames,\n renderTagPickerButton_unstable,\n useTagPickerButtonStyles_unstable,\n useTagPickerButton_unstable,\n} from './TagPickerButton';\nexport type { TagPickerButtonProps, TagPickerButtonSlots, TagPickerButtonState } from './TagPickerButton';\nexport {\n TagPickerControl,\n tagPickerControlClassNames,\n renderTagPickerControl_unstable,\n useTagPickerControlStyles_unstable,\n useTagPickerControl_unstable,\n} from './TagPickerControl';\nexport type { TagPickerControlProps, TagPickerControlSlots, TagPickerControlState } from './TagPickerControl';\nexport {\n TagPickerOption,\n tagPickerOptionClassNames,\n renderTagPickerOption_unstable,\n useTagPickerOptionStyles_unstable,\n useTagPickerOption_unstable,\n} from './TagPickerOption';\nexport type { TagPickerOptionProps, TagPickerOptionSlots, TagPickerOptionState } from './TagPickerOption';\nexport {\n TagPickerGroup,\n tagPickerGroupClassNames,\n renderTagPickerGroup_unstable,\n useTagPickerGroupStyles_unstable,\n useTagPickerGroup_unstable,\n} from './TagPickerGroup';\nexport type { TagPickerGroupProps, TagPickerGroupSlots, TagPickerGroupState } from './TagPickerGroup';\n\nexport {\n TagPickerOptionGroup,\n tagPickerOptionGroupClassNames,\n renderTagPickerOptionGroup,\n useTagPickerOptionGroupStyles,\n useTagPickerOptionGroup,\n} from './TagPickerOptionGroup';\nexport type {\n TagPickerOptionGroupProps,\n TagPickerOptionGroupSlots,\n TagPickerOptionGroupState,\n} from './TagPickerOptionGroup';\n\nexport { useTagPickerFilter } from './utils/useTagPickerFilter';\n\nexport { useTagPickerContext_unstable } from './contexts/TagPickerContext';\nexport type { TagPickerContextValue } from './contexts/TagPickerContext';\n"],"names":["TagPicker","renderTagPicker_unstable","useTagPicker_unstable","TagPickerInput","tagPickerInputClassNames","renderTagPickerInput_unstable","useTagPickerInputStyles_unstable","useTagPickerInput_unstable","TagPickerList","tagPickerListClassNames","renderTagPickerList_unstable","useTagPickerListStyles_unstable","useTagPickerList_unstable","TagPickerButton","tagPickerButtonClassNames","renderTagPickerButton_unstable","useTagPickerButtonStyles_unstable","useTagPickerButton_unstable","TagPickerControl","tagPickerControlClassNames","renderTagPickerControl_unstable","useTagPickerControlStyles_unstable","useTagPickerControl_unstable","TagPickerOption","tagPickerOptionClassNames","renderTagPickerOption_unstable","useTagPickerOptionStyles_unstable","useTagPickerOption_unstable","TagPickerGroup","tagPickerGroupClassNames","renderTagPickerGroup_unstable","useTagPickerGroupStyles_unstable","useTagPickerGroup_unstable","TagPickerOptionGroup","tagPickerOptionGroupClassNames","renderTagPickerOptionGroup","useTagPickerOptionGroupStyles","useTagPickerOptionGroup","useTagPickerFilter","useTagPickerContext_unstable"],"rangeMappings":";;;;;;;;;","mappings":"AAAA,SAASA,SAAS,EAAEC,wBAAwB,EAAEC,qBAAqB,QAAQ,cAAc;AAUzF,SACEC,cAAc,EACdC,wBAAwB,EACxBC,6BAA6B,EAC7BC,gCAAgC,EAChCC,0BAA0B,QACrB,mBAAmB;AAE1B,SACEC,aAAa,EACbC,uBAAuB,EACvBC,4BAA4B,EAC5BC,+BAA+B,EAC/BC,yBAAyB,QACpB,kBAAkB;AAEzB,SACEC,eAAe,EACfC,yBAAyB,EACzBC,8BAA8B,EAC9BC,iCAAiC,EACjCC,2BAA2B,QACtB,oBAAoB;AAE3B,SACEC,gBAAgB,EAChBC,0BAA0B,EAC1BC,+BAA+B,EAC/BC,kCAAkC,EAClCC,4BAA4B,QACvB,qBAAqB;AAE5B,SACEC,eAAe,EACfC,yBAAyB,EACzBC,8BAA8B,EAC9BC,iCAAiC,EACjCC,2BAA2B,QACtB,oBAAoB;AAE3B,SACEC,cAAc,EACdC,wBAAwB,EACxBC,6BAA6B,EAC7BC,gCAAgC,EAChCC,0BAA0B,QACrB,mBAAmB;AAG1B,SACEC,oBAAoB,EACpBC,8BAA8B,EAC9BC,0BAA0B,EAC1BC,6BAA6B,EAC7BC,uBAAuB,QAClB,yBAAyB;AAOhC,SAASC,kBAAkB,QAAQ,6BAA6B;AAEhE,SAASC,4BAA4B,QAAQ,8BAA8B"}
package/lib-commonjs/components/TagPickerControl/useTagPickerControlStyles.styles.js CHANGED
@@ -416,16 +416,13 @@ const tagPickerControlAsideWidthToken = '--fui-TagPickerControl-aside-width';
416
416
  });
417
417
  const useAsideStyles = /*#__PURE__*/ (0, _react.__styles)({
418
418
  root: {
419
- mc9l5x: "f13qh94s",
420
- Bt984gj: "f122n59",
419
+ mc9l5x: "f22iagw",
421
420
  qhf8xq: "f1euv43f",
422
421
  Bhzewxz: "f15twtuk",
423
422
  j35jbq: [
424
423
  "f8b87gs",
425
424
  "fedtrts"
426
425
  ],
427
- Budl1dq: "f13p5kfd",
428
- wkccdc: "fjg31ve",
429
426
  Bqenvij: "f1l02sjl",
430
427
  Bceei9c: "f113hnb5"
431
428
  },
@@ -440,14 +437,11 @@ const useAsideStyles = /*#__PURE__*/ (0, _react.__styles)({
440
437
  }
441
438
  }, {
442
439
  d: [
443
- ".f13qh94s{display:grid;}",
444
- ".f122n59{align-items:center;}",
440
+ ".f22iagw{display:flex;}",
445
441
  ".f1euv43f{position:absolute;}",
446
442
  ".f15twtuk{top:0;}",
447
443
  ".f8b87gs{right:var(--spacingHorizontalM);}",
448
444
  ".fedtrts{left:var(--spacingHorizontalM);}",
449
- ".f13p5kfd{grid-template-columns:repeat(2, auto);}",
450
- ".fjg31ve{grid-template-rows:minmax(32px, auto) 1fr;}",
451
445
  ".f1l02sjl{height:100%;}",
452
446
  ".f113hnb5{cursor:text;}",
453
447
  ".f1nxs5xn{min-height:32px;}",
@@ -465,7 +459,10 @@ const useIconStyles = /*#__PURE__*/ (0, _react.__styles)({
465
459
  B7ck84d: "f1ewtqcl",
466
460
  sj55zd: "fxkbij4",
467
461
  Bceei9c: "f1k6fduh",
468
- mc9l5x: "ftgm304",
462
+ mc9l5x: "f22iagw",
463
+ Brf1p80: "f4d9j23",
464
+ Bt984gj: "f122n59",
465
+ qb2dma: "fjgzulp",
469
466
  Be2twd7: "f1pp30po",
470
467
  Bo70h7d: "fvc9v3g"
471
468
  },
@@ -474,21 +471,24 @@ const useIconStyles = /*#__PURE__*/ (0, _react.__styles)({
474
471
  Frg6f3: [
475
472
  "f1h9en5y",
476
473
  "f1xk557c"
477
- ]
474
+ ],
475
+ sshi5w: "f1nxs5xn"
478
476
  },
479
477
  large: {
480
478
  Be2twd7: "fe5j1ua",
481
479
  Frg6f3: [
482
480
  "f1h9en5y",
483
481
  "f1xk557c"
484
- ]
482
+ ],
483
+ sshi5w: "f1w5jphr"
485
484
  },
486
485
  "extra-large": {
487
486
  Be2twd7: "f1rt2boy",
488
487
  Frg6f3: [
489
488
  "f1t5qyk5",
490
489
  "f1ikr372"
491
- ]
490
+ ],
491
+ sshi5w: "f5pgtk9"
492
492
  },
493
493
  disabled: {
494
494
  sj55zd: "f1s2aq7o",
@@ -499,25 +499,41 @@ const useIconStyles = /*#__PURE__*/ (0, _react.__styles)({
499
499
  ".f1ewtqcl{box-sizing:border-box;}",
500
500
  ".fxkbij4{color:var(--colorNeutralStrokeAccessible);}",
501
501
  ".f1k6fduh{cursor:pointer;}",
502
- ".ftgm304{display:block;}",
502
+ ".f22iagw{display:flex;}",
503
+ ".f4d9j23{justify-content:center;}",
504
+ ".f122n59{align-items:center;}",
505
+ ".fjgzulp{align-self:flex-start;}",
503
506
  ".f1pp30po{font-size:var(--fontSizeBase500);}",
504
507
  ".fvc9v3g svg{display:block;}",
505
508
  ".f4ybsrx{font-size:16px;}",
506
509
  ".f1h9en5y{margin-left:var(--spacingHorizontalXXS);}",
507
510
  ".f1xk557c{margin-right:var(--spacingHorizontalXXS);}",
511
+ ".f1nxs5xn{min-height:32px;}",
508
512
  ".fe5j1ua{font-size:20px;}",
513
+ ".f1w5jphr{min-height:40px;}",
509
514
  ".f1rt2boy{font-size:24px;}",
510
515
  ".f1t5qyk5{margin-left:var(--spacingHorizontalSNudge);}",
511
516
  ".f1ikr372{margin-right:var(--spacingHorizontalSNudge);}",
517
+ ".f5pgtk9{min-height:44px;}",
512
518
  ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}",
513
519
  ".fdrzuqr{cursor:not-allowed;}"
514
520
  ]
515
521
  });
522
+ const useSecondaryActionStyles = /*#__PURE__*/ (0, _react.__styles)({
523
+ root: {
524
+ mc9l5x: "f22iagw"
525
+ }
526
+ }, {
527
+ d: [
528
+ ".f22iagw{display:flex;}"
529
+ ]
530
+ });
516
531
  const useTagPickerControlStyles_unstable = (state)=>{
517
532
  'use no memo';
518
533
  const styles = useStyles();
519
534
  const iconStyles = useIconStyles();
520
535
  const asideStyles = useAsideStyles();
536
+ const secondaryActionStyles = useSecondaryActionStyles();
521
537
  state.root.className = (0, _react.mergeClasses)(tagPickerControlClassNames.root, styles.root, styles[state.size], styles[state.appearance], !state.disabled && state.appearance === 'outline' && styles.outlineInteractive, state.invalid && state.appearance !== 'underline' && styles.invalid, state.invalid && state.appearance === 'underline' && styles.invalidUnderline, state.disabled && styles.disabled, state.root.className);
522
538
  if (state.aside) {
523
539
  state.aside.className = (0, _react.mergeClasses)(tagPickerControlClassNames.aside, asideStyles.root, asideStyles[state.size], state.aside.className);
@@ -526,7 +542,7 @@ const useTagPickerControlStyles_unstable = (state)=>{
526
542
  state.expandIcon.className = (0, _react.mergeClasses)(tagPickerControlClassNames.expandIcon, iconStyles.icon, iconStyles[state.size], state.disabled && iconStyles.disabled, state.expandIcon.className);
527
543
  }
528
544
  if (state.secondaryAction) {
529
- state.secondaryAction.className = (0, _react.mergeClasses)(tagPickerControlClassNames.secondaryAction, state.secondaryAction.className);
545
+ state.secondaryAction.className = (0, _react.mergeClasses)(tagPickerControlClassNames.secondaryAction, secondaryActionStyles.root, state.secondaryAction.className);
530
546
  }
531
547
  return state;
532
548
  };
package/lib-commonjs/components/TagPickerControl/useTagPickerControlStyles.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["useTagPickerControlStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const tagPickerControlClassNames = {\n root: 'fui-TagPickerControl',\n expandIcon: 'fui-TagPickerControl__expandIcon',\n secondaryAction: 'fui-TagPickerControl__secondaryAction',\n aside: 'fui-TagPickerControl__aside'\n};\nexport const tagPickerControlAsideWidthToken = '--fui-TagPickerControl-aside-width';\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n borderRadius: tokens.borderRadiusMedium,\n paddingRight: `calc(${tokens.spacingHorizontalM} + var(${tagPickerControlAsideWidthToken}, 0px))`,\n paddingLeft: tokens.spacingHorizontalM,\n alignItems: 'center',\n columnGap: tokens.spacingHorizontalXXS,\n boxSizing: 'border-box',\n display: 'flex',\n minWidth: '250px',\n position: 'relative',\n flexWrap: 'wrap',\n // windows high contrast mode focus indicator\n ':focus-within': {\n outlineWidth: '2px',\n outlineStyle: 'solid',\n outlineColor: 'transparent'\n },\n // bottom focus border, shared with Input, Select, and SpinButton\n '::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n left: '-1px',\n bottom: '-1px',\n right: '-1px',\n height: `max(2px, ${tokens.borderRadiusMedium})`,\n borderBottomLeftRadius: tokens.borderRadiusMedium,\n borderBottomRightRadius: tokens.borderRadiusMedium,\n borderBottom: `${tokens.strokeWidthThick} solid ${tokens.colorCompoundBrandStroke}`,\n clipPath: 'inset(calc(100% - 2px) 0 0 0)',\n transform: 'scaleX(0)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationUltraFast,\n transitionDelay: tokens.curveAccelerateMid,\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms'\n }\n },\n ':focus-within::after': {\n transform: 'scaleX(1)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationNormal,\n transitionDelay: tokens.curveDecelerateMid,\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms'\n }\n },\n ':focus-within:active::after': {\n borderBottomColor: tokens.colorCompoundBrandStrokePressed\n }\n },\n listbox: {\n boxShadow: `${tokens.shadow16}`,\n borderRadius: tokens.borderRadiusMedium,\n maxHeight: '80vh',\n boxSizing: 'border-box'\n },\n listboxCollapsed: {\n display: 'none'\n },\n // size variants\n medium: {\n minHeight: '32px'\n },\n large: {\n minHeight: '40px'\n },\n 'extra-large': {\n minHeight: '44px'\n },\n // appearance variants\n outline: {\n backgroundColor: tokens.colorNeutralBackground1,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n borderBottomColor: tokens.colorNeutralStrokeAccessible\n },\n outlineInteractive: {\n '&:hover': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n borderBottomColor: tokens.colorNeutralStrokeAccessible\n },\n '&:active': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n borderBottomColor: tokens.colorNeutralStrokeAccessible\n }\n },\n underline: {\n backgroundColor: tokens.colorTransparentBackground,\n borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,\n borderRadius: '0'\n },\n 'filled-lighter': {\n backgroundColor: tokens.colorNeutralBackground1,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`\n },\n 'filled-darker': {\n backgroundColor: tokens.colorNeutralBackground3,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`\n },\n invalid: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n ...shorthands.borderColor(tokens.colorPaletteRedBorder2)\n }\n },\n invalidUnderline: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n borderBottomColor: tokens.colorPaletteRedBorder2\n }\n },\n disabled: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText')\n }\n }\n});\nconst useAsideStyles = makeStyles({\n root: {\n display: 'grid',\n alignItems: 'center',\n position: 'absolute',\n top: '0',\n right: tokens.spacingHorizontalM,\n gridTemplateColumns: 'repeat(2, auto)',\n gridTemplateRows: 'minmax(32px, auto) 1fr',\n height: '100%',\n cursor: 'text'\n },\n // size variants\n medium: {\n minHeight: '32px'\n },\n large: {\n minHeight: '40px'\n },\n 'extra-large': {\n minHeight: '44px'\n }\n});\nexport const iconSizes = {\n small: '16px',\n medium: '20px',\n large: '24px'\n};\nconst useIconStyles = makeStyles({\n icon: {\n boxSizing: 'border-box',\n color: tokens.colorNeutralStrokeAccessible,\n cursor: 'pointer',\n display: 'block',\n fontSize: tokens.fontSizeBase500,\n // the SVG must have display: block for accurate positioning\n // otherwise an extra inline space is inserted after the svg element\n '& svg': {\n display: 'block'\n }\n },\n // icon size variants\n medium: {\n fontSize: iconSizes.small,\n marginLeft: tokens.spacingHorizontalXXS\n },\n large: {\n fontSize: iconSizes.medium,\n marginLeft: tokens.spacingHorizontalXXS\n },\n 'extra-large': {\n fontSize: iconSizes.large,\n marginLeft: tokens.spacingHorizontalSNudge\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'not-allowed'\n }\n});\n/**\n * Apply styling to the PickerControl slots based on the state\n */ export const useTagPickerControlStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n const iconStyles = useIconStyles();\n const asideStyles = useAsideStyles();\n state.root.className = mergeClasses(tagPickerControlClassNames.root, styles.root, styles[state.size], styles[state.appearance], !state.disabled && state.appearance === 'outline' && styles.outlineInteractive, state.invalid && state.appearance !== 'underline' && styles.invalid, state.invalid && state.appearance === 'underline' && styles.invalidUnderline, state.disabled && styles.disabled, state.root.className);\n if (state.aside) {\n state.aside.className = mergeClasses(tagPickerControlClassNames.aside, asideStyles.root, asideStyles[state.size], state.aside.className);\n }\n if (state.expandIcon) {\n state.expandIcon.className = mergeClasses(tagPickerControlClassNames.expandIcon, iconStyles.icon, iconStyles[state.size], state.disabled && iconStyles.disabled, state.expandIcon.className);\n }\n if (state.secondaryAction) {\n state.secondaryAction.className = mergeClasses(tagPickerControlClassNames.secondaryAction, state.secondaryAction.className);\n }\n return state;\n};\n"],"names":["iconSizes","tagPickerControlAsideWidthToken","tagPickerControlClassNames","useTagPickerControlStyles_unstable","root","expandIcon","secondaryAction","aside","useStyles","__styles","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","z189sj","uwmqm3","Bt984gj","i8kkvl","B7ck84d","mc9l5x","Bf4jedk","qhf8xq","Eh141a","Bbr2w1p","Bduesf4","Bpq79vn","li1rpt","Bsft5z2","E3zdtr","Eqx8gd","By385i5","B1piin3","Dlnsje","d9w3h3","B3778ie","B1q35kw","Bw17bha","Bcgy8vk","Bjuhk93","Gjdm7m","b1kco5","Ba2ppi3","F2fol1","lck23g","df92cz","I188md","umuwi5","Blcqepd","nplu4u","Bioka5o","H713fs","B9ooomg","Bercvud","listbox","E5pizo","Bxyxcbc","listboxCollapsed","medium","sshi5w","large","outline","De3pzq","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","outlineInteractive","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","B6oc9vd","ak43y8","wmxk5l","B50zh58","underline","invalid","tvckwq","gk2u95","hhx65j","Bxowmz0","invalidUnderline","disabled","Bceei9c","Bjwas2f","Bn1d65q","Bxeuatn","n51gp8","d","p","w","m","h","a","useAsideStyles","Bhzewxz","j35jbq","Budl1dq","wkccdc","Bqenvij","small","useIconStyles","icon","sj55zd","Be2twd7","Bo70h7d","Frg6f3","state","styles","iconStyles","asideStyles","className","mergeClasses","size","appearance"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
1
+ {"version":3,"sources":["useTagPickerControlStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const tagPickerControlClassNames = {\n root: 'fui-TagPickerControl',\n expandIcon: 'fui-TagPickerControl__expandIcon',\n secondaryAction: 'fui-TagPickerControl__secondaryAction',\n aside: 'fui-TagPickerControl__aside'\n};\nexport const tagPickerControlAsideWidthToken = '--fui-TagPickerControl-aside-width';\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n borderRadius: tokens.borderRadiusMedium,\n paddingRight: `calc(${tokens.spacingHorizontalM} + var(${tagPickerControlAsideWidthToken}, 0px))`,\n paddingLeft: tokens.spacingHorizontalM,\n alignItems: 'center',\n columnGap: tokens.spacingHorizontalXXS,\n boxSizing: 'border-box',\n display: 'flex',\n minWidth: '250px',\n position: 'relative',\n flexWrap: 'wrap',\n // windows high contrast mode focus indicator\n ':focus-within': {\n outlineWidth: '2px',\n outlineStyle: 'solid',\n outlineColor: 'transparent'\n },\n // bottom focus border, shared with Input, Select, and SpinButton\n '::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n left: '-1px',\n bottom: '-1px',\n right: '-1px',\n height: `max(2px, ${tokens.borderRadiusMedium})`,\n borderBottomLeftRadius: tokens.borderRadiusMedium,\n borderBottomRightRadius: tokens.borderRadiusMedium,\n borderBottom: `${tokens.strokeWidthThick} solid ${tokens.colorCompoundBrandStroke}`,\n clipPath: 'inset(calc(100% - 2px) 0 0 0)',\n transform: 'scaleX(0)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationUltraFast,\n transitionDelay: tokens.curveAccelerateMid,\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms'\n }\n },\n ':focus-within::after': {\n transform: 'scaleX(1)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationNormal,\n transitionDelay: tokens.curveDecelerateMid,\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms'\n }\n },\n ':focus-within:active::after': {\n borderBottomColor: tokens.colorCompoundBrandStrokePressed\n }\n },\n listbox: {\n boxShadow: `${tokens.shadow16}`,\n borderRadius: tokens.borderRadiusMedium,\n maxHeight: '80vh',\n boxSizing: 'border-box'\n },\n listboxCollapsed: {\n display: 'none'\n },\n // size variants\n medium: {\n minHeight: '32px'\n },\n large: {\n minHeight: '40px'\n },\n 'extra-large': {\n minHeight: '44px'\n },\n // appearance variants\n outline: {\n backgroundColor: tokens.colorNeutralBackground1,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n borderBottomColor: tokens.colorNeutralStrokeAccessible\n },\n outlineInteractive: {\n '&:hover': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n borderBottomColor: tokens.colorNeutralStrokeAccessible\n },\n '&:active': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n borderBottomColor: tokens.colorNeutralStrokeAccessible\n }\n },\n underline: {\n backgroundColor: tokens.colorTransparentBackground,\n borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,\n borderRadius: '0'\n },\n 'filled-lighter': {\n backgroundColor: tokens.colorNeutralBackground1,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`\n },\n 'filled-darker': {\n backgroundColor: tokens.colorNeutralBackground3,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`\n },\n invalid: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n ...shorthands.borderColor(tokens.colorPaletteRedBorder2)\n }\n },\n invalidUnderline: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n borderBottomColor: tokens.colorPaletteRedBorder2\n }\n },\n disabled: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText')\n }\n }\n});\nconst useAsideStyles = makeStyles({\n root: {\n display: 'flex',\n position: 'absolute',\n top: '0',\n right: tokens.spacingHorizontalM,\n height: '100%',\n cursor: 'text'\n },\n // size variants\n medium: {\n minHeight: '32px'\n },\n large: {\n minHeight: '40px'\n },\n 'extra-large': {\n minHeight: '44px'\n }\n});\nexport const iconSizes = {\n small: '16px',\n medium: '20px',\n large: '24px'\n};\nconst useIconStyles = makeStyles({\n icon: {\n boxSizing: 'border-box',\n color: tokens.colorNeutralStrokeAccessible,\n cursor: 'pointer',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n alignSelf: 'flex-start',\n fontSize: tokens.fontSizeBase500,\n // the SVG must have display: block for accurate positioning\n // otherwise an extra inline space is inserted after the svg element\n '& svg': {\n display: 'block'\n }\n },\n // icon size variants\n medium: {\n fontSize: iconSizes.small,\n marginLeft: tokens.spacingHorizontalXXS,\n minHeight: '32px'\n },\n large: {\n fontSize: iconSizes.medium,\n marginLeft: tokens.spacingHorizontalXXS,\n minHeight: '40px'\n },\n 'extra-large': {\n fontSize: iconSizes.large,\n marginLeft: tokens.spacingHorizontalSNudge,\n minHeight: '44px'\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'not-allowed'\n }\n});\nconst useSecondaryActionStyles = makeStyles({\n root: {\n display: 'flex'\n }\n});\n/**\n * Apply styling to the PickerControl slots based on the state\n */ export const useTagPickerControlStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n const iconStyles = useIconStyles();\n const asideStyles = useAsideStyles();\n const secondaryActionStyles = useSecondaryActionStyles();\n state.root.className = mergeClasses(tagPickerControlClassNames.root, styles.root, styles[state.size], styles[state.appearance], !state.disabled && state.appearance === 'outline' && styles.outlineInteractive, state.invalid && state.appearance !== 'underline' && styles.invalid, state.invalid && state.appearance === 'underline' && styles.invalidUnderline, state.disabled && styles.disabled, state.root.className);\n if (state.aside) {\n state.aside.className = mergeClasses(tagPickerControlClassNames.aside, asideStyles.root, asideStyles[state.size], state.aside.className);\n }\n if (state.expandIcon) {\n state.expandIcon.className = mergeClasses(tagPickerControlClassNames.expandIcon, iconStyles.icon, iconStyles[state.size], state.disabled && iconStyles.disabled, state.expandIcon.className);\n }\n if (state.secondaryAction) {\n state.secondaryAction.className = mergeClasses(tagPickerControlClassNames.secondaryAction, secondaryActionStyles.root, state.secondaryAction.className);\n }\n return state;\n};\n"],"names":["iconSizes","tagPickerControlAsideWidthToken","tagPickerControlClassNames","useTagPickerControlStyles_unstable","root","expandIcon","secondaryAction","aside","useStyles","__styles","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","z189sj","uwmqm3","Bt984gj","i8kkvl","B7ck84d","mc9l5x","Bf4jedk","qhf8xq","Eh141a","Bbr2w1p","Bduesf4","Bpq79vn","li1rpt","Bsft5z2","E3zdtr","Eqx8gd","By385i5","B1piin3","Dlnsje","d9w3h3","B3778ie","B1q35kw","Bw17bha","Bcgy8vk","Bjuhk93","Gjdm7m","b1kco5","Ba2ppi3","F2fol1","lck23g","df92cz","I188md","umuwi5","Blcqepd","nplu4u","Bioka5o","H713fs","B9ooomg","Bercvud","listbox","E5pizo","Bxyxcbc","listboxCollapsed","medium","sshi5w","large","outline","De3pzq","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","outlineInteractive","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","B6oc9vd","ak43y8","wmxk5l","B50zh58","underline","invalid","tvckwq","gk2u95","hhx65j","Bxowmz0","invalidUnderline","disabled","Bceei9c","Bjwas2f","Bn1d65q","Bxeuatn","n51gp8","d","p","w","m","h","a","useAsideStyles","Bhzewxz","j35jbq","Bqenvij","small","useIconStyles","icon","sj55zd","Brf1p80","qb2dma","Be2twd7","Bo70h7d","Frg6f3","useSecondaryActionStyles","state","styles","iconStyles","asideStyles","secondaryActionStyles","className","mergeClasses","size","appearance"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
package/lib-commonjs/components/TagPickerOption/useTagPickerOptionStyles.styles.js CHANGED
@@ -33,7 +33,11 @@ const tagPickerOptionClassNames = {
33
33
  },
34
34
  secondaryContent: {
35
35
  Br312pm: "fd46tj4",
36
- Ijaq50: "faunodf"
36
+ Ijaq50: "faunodf",
37
+ Bahqtrf: "fk6fouc",
38
+ Be2twd7: "fy9rknc",
39
+ Bhrd7zp: "figsok6",
40
+ Bg96gwp: "fwrc4pm"
37
41
  },
38
42
  media: {
39
43
  Ijaq50: "fldnz9j"
@@ -45,11 +49,17 @@ const tagPickerOptionClassNames = {
45
49
  ".f122n59{align-items:center;}",
46
50
  ".fd46tj4{grid-column-start:2;}",
47
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);}",
48
56
  ".fldnz9j{grid-row-start:span 2;}"
49
57
  ]
50
58
  });
51
59
  const useTagPickerOptionStyles_unstable = (state)=>{
52
60
  'use no memo';
61
+ const styles = useStyles();
62
+ state.root.className = (0, _react.mergeClasses)(tagPickerOptionClassNames.root, styles.root, state.root.className);
53
63
  (0, _reactcombobox.useOptionStyles_unstable)({
54
64
  ...state,
55
65
  active: false,
@@ -58,8 +68,6 @@ const useTagPickerOptionStyles_unstable = (state)=>{
58
68
  checkIcon: undefined,
59
69
  selected: false
60
70
  });
61
- const styles = useStyles();
62
- state.root.className = (0, _react.mergeClasses)(tagPickerOptionClassNames.root, styles.root, state.root.className);
63
71
  if (state.media) {
64
72
  state.media.className = (0, _react.mergeClasses)(tagPickerOptionClassNames.media, styles.media, state.media.className);
65
73
  }
package/lib-commonjs/components/TagPickerOption/useTagPickerOptionStyles.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["useTagPickerOptionStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { useOptionStyles_unstable } from '@fluentui/react-combobox';\nexport const tagPickerOptionClassNames = {\n root: 'fui-TagPickerOption',\n media: 'fui-TagPickerOption__media',\n secondaryContent: 'fui-TagPickerOption__secondaryContent'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n display: 'grid',\n gridTemplateColumns: 'auto 1fr',\n alignItems: 'center'\n },\n secondaryContent: {\n gridColumnStart: 2,\n gridRowStart: 2\n },\n media: {\n gridRowStart: 'span 2'\n }\n});\n/**\n * Apply styling to the TagPickerOption slots based on the state\n */ export const useTagPickerOptionStyles_unstable = (state)=>{\n 'use no memo';\n useOptionStyles_unstable({\n ...state,\n active: false,\n disabled: false,\n focusVisible: false,\n checkIcon: undefined,\n selected: false\n });\n const styles = useStyles();\n state.root.className = mergeClasses(tagPickerOptionClassNames.root, styles.root, state.root.className);\n if (state.media) {\n state.media.className = mergeClasses(tagPickerOptionClassNames.media, styles.media, state.media.className);\n }\n if (state.secondaryContent) {\n state.secondaryContent.className = mergeClasses(tagPickerOptionClassNames.secondaryContent, styles.secondaryContent, state.secondaryContent.className);\n }\n return state;\n};\n"],"names":["tagPickerOptionClassNames","useTagPickerOptionStyles_unstable","root","media","secondaryContent","useStyles","__styles","mc9l5x","Budl1dq","Bt984gj","Br312pm","Ijaq50","d","state","useOptionStyles_unstable","active","disabled","focusVisible","checkIcon","undefined","selected","styles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAEaA,yBAAyB;eAAzBA;;IAuBIC,iCAAiC;eAAjCA;;;uBAzBwB;+BACA;AAClC,MAAMD,4BAA4B;IACrCE,MAAM;IACNC,OAAO;IACPC,kBAAkB;AACtB;AACA;;CAEA,GAAI,MAAMC,YAAS,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAJ,MAAA;QAAAK,QAAA;QAAAC,SAAA;QAAAC,SAAA;IAAA;IAAAL,kBAAA;QAAAM,SAAA;QAAAC,QAAA;IAAA;IAAAR,OAAA;QAAAQ,QAAA;IAAA;AAAA,GAAA;IAAAC,GAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA;AAgBX,MAAMX,oCAAqCY,CAAAA;IAClD;IACAC,IAAAA,uCAAwB,EAAC;QACrB,GAAGD,KAAK;QACRE,QAAQ;QACRC,UAAU;QACVC,cAAc;QACdC,WAAWC;QACXC,UAAU;IACd;IACA,MAAMC,SAAShB;IACfQ,MAAMX,IAAI,CAACoB,SAAS,GAAGC,IAAAA,mBAAY,EAACvB,0BAA0BE,IAAI,EAAEmB,OAAOnB,IAAI,EAAEW,MAAMX,IAAI,CAACoB,SAAS;IACrG,IAAIT,MAAMV,KAAK,EAAE;QACbU,MAAMV,KAAK,CAACmB,SAAS,GAAGC,IAAAA,mBAAY,EAACvB,0BAA0BG,KAAK,EAAEkB,OAAOlB,KAAK,EAAEU,MAAMV,KAAK,CAACmB,SAAS;IAC7G;IACA,IAAIT,MAAMT,gBAAgB,EAAE;QACxBS,MAAMT,gBAAgB,CAACkB,SAAS,GAAGC,IAAAA,mBAAY,EAACvB,0BAA0BI,gBAAgB,EAAEiB,OAAOjB,gBAAgB,EAAES,MAAMT,gBAAgB,CAACkB,SAAS;IACzJ;IACA,OAAOT;AACX"}
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};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n display: 'grid',\n gridTemplateColumns: 'auto 1fr',\n alignItems: 'center'\n },\n secondaryContent: {\n gridColumnStart: 2,\n gridRowStart: 2,\n ...typographyStyles.caption1\n },\n media: {\n gridRowStart: 'span 2'\n }\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 styles = useStyles();\n state.root.className = mergeClasses(tagPickerOptionClassNames.root, styles.root, 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, styles.media, state.media.className);\n }\n if (state.secondaryContent) {\n state.secondaryContent.className = mergeClasses(tagPickerOptionClassNames.secondaryContent, styles.secondaryContent, state.secondaryContent.className);\n }\n return state;\n};\n"],"names":["tagPickerOptionClassNames","useTagPickerOptionStyles_unstable","root","media","secondaryContent","useStyles","__styles","mc9l5x","Budl1dq","Bt984gj","Br312pm","Ijaq50","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","d","state","styles","className","mergeClasses","useOptionStyles_unstable","active","disabled","focusVisible","checkIcon","undefined","selected"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAGaA,yBAAyB;eAAzBA;;IAwBIC,iCAAiC;eAAjCA;;;uBA3BwB;+BACA;AAElC,MAAMD,4BAA4B;IACrCE,MAAM;IACNC,OAAO;IACPC,kBAAkB;AACtB;AACA;;CAEA,GAAI,MAAMC,YAAS,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAJ,MAAA;QAAAK,QAAA;QAAAC,SAAA;QAAAC,SAAA;IAAA;IAAAL,kBAAA;QAAAM,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;IAAA;IAAAZ,OAAA;QAAAQ,QAAA;IAAA;AAAA,GAAA;IAAAK,GAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA;AAiBX,MAAMf,oCAAqCgB,CAAAA;IAClD;IACA,MAAMC,SAASb;IACfY,MAAMf,IAAI,CAACiB,SAAS,GAAGC,IAAAA,mBAAY,EAACpB,0BAA0BE,IAAI,EAAEgB,OAAOhB,IAAI,EAAEe,MAAMf,IAAI,CAACiB,SAAS;IACrGE,IAAAA,uCAAwB,EAAC;QACrB,GAAGJ,KAAK;QACRK,QAAQ;QACRC,UAAU;QACVC,cAAc;QACdC,WAAWC;QACXC,UAAU;IACd;IACA,IAAIV,MAAMd,KAAK,EAAE;QACbc,MAAMd,KAAK,CAACgB,SAAS,GAAGC,IAAAA,mBAAY,EAACpB,0BAA0BG,KAAK,EAAEe,OAAOf,KAAK,EAAEc,MAAMd,KAAK,CAACgB,SAAS;IAC7G;IACA,IAAIF,MAAMb,gBAAgB,EAAE;QACxBa,MAAMb,gBAAgB,CAACe,SAAS,GAAGC,IAAAA,mBAAY,EAACpB,0BAA0BI,gBAAgB,EAAEc,OAAOd,gBAAgB,EAAEa,MAAMb,gBAAgB,CAACe,SAAS;IACzJ;IACA,OAAOF;AACX"}
package/lib-commonjs/index.js CHANGED
@@ -84,6 +84,9 @@ _export(exports, {
84
84
  useTagPickerButton_unstable: function() {
85
85
  return _TagPickerButton.useTagPickerButton_unstable;
86
86
  },
87
+ useTagPickerContext_unstable: function() {
88
+ return _TagPickerContext.useTagPickerContext_unstable;
89
+ },
87
90
  useTagPickerControlStyles_unstable: function() {
88
91
  return _TagPickerControl.useTagPickerControlStyles_unstable;
89
92
  },
@@ -136,3 +139,4 @@ const _TagPickerOption = require("./TagPickerOption");
136
139
  const _TagPickerGroup = require("./TagPickerGroup");
137
140
  const _TagPickerOptionGroup = require("./TagPickerOptionGroup");
138
141
  const _useTagPickerFilter = require("./utils/useTagPickerFilter");
142
+ const _TagPickerContext = require("./contexts/TagPickerContext");
package/lib-commonjs/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { TagPicker, renderTagPicker_unstable, useTagPicker_unstable } from './TagPicker';\nexport type {\n TagPickerContextValues,\n TagPickerProps,\n TagPickerSlots,\n TagPickerState,\n TagPickerOnOpenChangeData,\n TagPickerOnOptionSelectData,\n TagPickerSize,\n} from './TagPicker';\nexport {\n TagPickerInput,\n tagPickerInputClassNames,\n renderTagPickerInput_unstable,\n useTagPickerInputStyles_unstable,\n useTagPickerInput_unstable,\n} from './TagPickerInput';\nexport type { TagPickerInputProps, TagPickerInputSlots, TagPickerInputState } from './TagPickerInput';\nexport {\n TagPickerList,\n tagPickerListClassNames,\n renderTagPickerList_unstable,\n useTagPickerListStyles_unstable,\n useTagPickerList_unstable,\n} from './TagPickerList';\nexport type { TagPickerListProps, TagPickerListSlots, TagPickerListState } from './TagPickerList';\nexport {\n TagPickerButton,\n tagPickerButtonClassNames,\n renderTagPickerButton_unstable,\n useTagPickerButtonStyles_unstable,\n useTagPickerButton_unstable,\n} from './TagPickerButton';\nexport type { TagPickerButtonProps, TagPickerButtonSlots, TagPickerButtonState } from './TagPickerButton';\nexport {\n TagPickerControl,\n tagPickerControlClassNames,\n renderTagPickerControl_unstable,\n useTagPickerControlStyles_unstable,\n useTagPickerControl_unstable,\n} from './TagPickerControl';\nexport type { TagPickerControlProps, TagPickerControlSlots, TagPickerControlState } from './TagPickerControl';\nexport {\n TagPickerOption,\n tagPickerOptionClassNames,\n renderTagPickerOption_unstable,\n useTagPickerOptionStyles_unstable,\n useTagPickerOption_unstable,\n} from './TagPickerOption';\nexport type { TagPickerOptionProps, TagPickerOptionSlots, TagPickerOptionState } from './TagPickerOption';\nexport {\n TagPickerGroup,\n tagPickerGroupClassNames,\n renderTagPickerGroup_unstable,\n useTagPickerGroupStyles_unstable,\n useTagPickerGroup_unstable,\n} from './TagPickerGroup';\nexport type { TagPickerGroupProps, TagPickerGroupSlots, TagPickerGroupState } from './TagPickerGroup';\n\nexport {\n TagPickerOptionGroup,\n tagPickerOptionGroupClassNames,\n renderTagPickerOptionGroup,\n useTagPickerOptionGroupStyles,\n useTagPickerOptionGroup,\n} from './TagPickerOptionGroup';\nexport type {\n TagPickerOptionGroupProps,\n TagPickerOptionGroupSlots,\n TagPickerOptionGroupState,\n} from './TagPickerOptionGroup';\n\nexport { useTagPickerFilter } from './utils/useTagPickerFilter';\n"],"names":["TagPicker","TagPickerButton","TagPickerControl","TagPickerGroup","TagPickerInput","TagPickerList","TagPickerOption","TagPickerOptionGroup","renderTagPickerButton_unstable","renderTagPickerControl_unstable","renderTagPickerGroup_unstable","renderTagPickerInput_unstable","renderTagPickerList_unstable","renderTagPickerOptionGroup","renderTagPickerOption_unstable","renderTagPicker_unstable","tagPickerButtonClassNames","tagPickerControlClassNames","tagPickerGroupClassNames","tagPickerInputClassNames","tagPickerListClassNames","tagPickerOptionClassNames","tagPickerOptionGroupClassNames","useTagPickerButtonStyles_unstable","useTagPickerButton_unstable","useTagPickerControlStyles_unstable","useTagPickerControl_unstable","useTagPickerFilter","useTagPickerGroupStyles_unstable","useTagPickerGroup_unstable","useTagPickerInputStyles_unstable","useTagPickerInput_unstable","useTagPickerListStyles_unstable","useTagPickerList_unstable","useTagPickerOptionGroup","useTagPickerOptionGroupStyles","useTagPickerOptionStyles_unstable","useTagPickerOption_unstable","useTagPicker_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,SAAS;eAATA,oBAAS;;IA2BhBC,eAAe;eAAfA,gCAAe;;IAQfC,gBAAgB;eAAhBA,kCAAgB;;IAgBhBC,cAAc;eAAdA,8BAAc;;IAxCdC,cAAc;eAAdA,8BAAc;;IAQdC,aAAa;eAAbA,4BAAa;;IAwBbC,eAAe;eAAfA,gCAAe;;IAiBfC,oBAAoB;eAApBA,0CAAoB;;IA/BpBC,8BAA8B;eAA9BA,+CAA8B;;IAQ9BC,+BAA+B;eAA/BA,iDAA+B;;IAgB/BC,6BAA6B;eAA7BA,6CAA6B;;IAxC7BC,6BAA6B;eAA7BA,6CAA6B;;IAQ7BC,4BAA4B;eAA5BA,2CAA4B;;IAyC5BC,0BAA0B;eAA1BA,gDAA0B;;IAjB1BC,8BAA8B;eAA9BA,+CAA8B;;IA7CZC,wBAAwB;eAAxBA,mCAAwB;;IA4B1CC,yBAAyB;eAAzBA,0CAAyB;;IAQzBC,0BAA0B;eAA1BA,4CAA0B;;IAgB1BC,wBAAwB;eAAxBA,wCAAwB;;IAxCxBC,wBAAwB;eAAxBA,wCAAwB;;IAQxBC,uBAAuB;eAAvBA,sCAAuB;;IAwBvBC,yBAAyB;eAAzBA,0CAAyB;;IAiBzBC,8BAA8B;eAA9BA,oDAA8B;;IA/B9BC,iCAAiC;eAAjCA,kDAAiC;;IACjCC,2BAA2B;eAA3BA,4CAA2B;;IAO3BC,kCAAkC;eAAlCA,oDAAkC;;IAClCC,4BAA4B;eAA5BA,8CAA4B;;IAiCrBC,kBAAkB;eAAlBA,sCAAkB;;IAlBzBC,gCAAgC;eAAhCA,gDAAgC;;IAChCC,0BAA0B;eAA1BA,0CAA0B;;IAzC1BC,gCAAgC;eAAhCA,gDAAgC;;IAChCC,0BAA0B;eAA1BA,0CAA0B;;IAO1BC,+BAA+B;eAA/BA,8CAA+B;;IAC/BC,yBAAyB;eAAzBA,wCAAyB;;IAyCzBC,uBAAuB;eAAvBA,6CAAuB;;IADvBC,6BAA6B;eAA7BA,mDAA6B;;IAjB7BC,iCAAiC;eAAjCA,kDAAiC;;IACjCC,2BAA2B;eAA3BA,4CAA2B;;IA/CiBC,qBAAqB;eAArBA,gCAAqB;;;2BAAQ;gCAgBpE;+BAQA;iCAQA;kCAQA;iCAQA;gCAQA;sCASA;oCAO4B"}
1
+ {"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { TagPicker, renderTagPicker_unstable, useTagPicker_unstable } from './TagPicker';\nexport type {\n TagPickerContextValues,\n TagPickerProps,\n TagPickerSlots,\n TagPickerState,\n TagPickerOnOpenChangeData,\n TagPickerOnOptionSelectData,\n TagPickerSize,\n} from './TagPicker';\nexport {\n TagPickerInput,\n tagPickerInputClassNames,\n renderTagPickerInput_unstable,\n useTagPickerInputStyles_unstable,\n useTagPickerInput_unstable,\n} from './TagPickerInput';\nexport type { TagPickerInputProps, TagPickerInputSlots, TagPickerInputState } from './TagPickerInput';\nexport {\n TagPickerList,\n tagPickerListClassNames,\n renderTagPickerList_unstable,\n useTagPickerListStyles_unstable,\n useTagPickerList_unstable,\n} from './TagPickerList';\nexport type { TagPickerListProps, TagPickerListSlots, TagPickerListState } from './TagPickerList';\nexport {\n TagPickerButton,\n tagPickerButtonClassNames,\n renderTagPickerButton_unstable,\n useTagPickerButtonStyles_unstable,\n useTagPickerButton_unstable,\n} from './TagPickerButton';\nexport type { TagPickerButtonProps, TagPickerButtonSlots, TagPickerButtonState } from './TagPickerButton';\nexport {\n TagPickerControl,\n tagPickerControlClassNames,\n renderTagPickerControl_unstable,\n useTagPickerControlStyles_unstable,\n useTagPickerControl_unstable,\n} from './TagPickerControl';\nexport type { TagPickerControlProps, TagPickerControlSlots, TagPickerControlState } from './TagPickerControl';\nexport {\n TagPickerOption,\n tagPickerOptionClassNames,\n renderTagPickerOption_unstable,\n useTagPickerOptionStyles_unstable,\n useTagPickerOption_unstable,\n} from './TagPickerOption';\nexport type { TagPickerOptionProps, TagPickerOptionSlots, TagPickerOptionState } from './TagPickerOption';\nexport {\n TagPickerGroup,\n tagPickerGroupClassNames,\n renderTagPickerGroup_unstable,\n useTagPickerGroupStyles_unstable,\n useTagPickerGroup_unstable,\n} from './TagPickerGroup';\nexport type { TagPickerGroupProps, TagPickerGroupSlots, TagPickerGroupState } from './TagPickerGroup';\n\nexport {\n TagPickerOptionGroup,\n tagPickerOptionGroupClassNames,\n renderTagPickerOptionGroup,\n useTagPickerOptionGroupStyles,\n useTagPickerOptionGroup,\n} from './TagPickerOptionGroup';\nexport type {\n TagPickerOptionGroupProps,\n TagPickerOptionGroupSlots,\n TagPickerOptionGroupState,\n} from './TagPickerOptionGroup';\n\nexport { useTagPickerFilter } from './utils/useTagPickerFilter';\n\nexport { useTagPickerContext_unstable } from './contexts/TagPickerContext';\nexport type { TagPickerContextValue } from './contexts/TagPickerContext';\n"],"names":["TagPicker","TagPickerButton","TagPickerControl","TagPickerGroup","TagPickerInput","TagPickerList","TagPickerOption","TagPickerOptionGroup","renderTagPickerButton_unstable","renderTagPickerControl_unstable","renderTagPickerGroup_unstable","renderTagPickerInput_unstable","renderTagPickerList_unstable","renderTagPickerOptionGroup","renderTagPickerOption_unstable","renderTagPicker_unstable","tagPickerButtonClassNames","tagPickerControlClassNames","tagPickerGroupClassNames","tagPickerInputClassNames","tagPickerListClassNames","tagPickerOptionClassNames","tagPickerOptionGroupClassNames","useTagPickerButtonStyles_unstable","useTagPickerButton_unstable","useTagPickerContext_unstable","useTagPickerControlStyles_unstable","useTagPickerControl_unstable","useTagPickerFilter","useTagPickerGroupStyles_unstable","useTagPickerGroup_unstable","useTagPickerInputStyles_unstable","useTagPickerInput_unstable","useTagPickerListStyles_unstable","useTagPickerList_unstable","useTagPickerOptionGroup","useTagPickerOptionGroupStyles","useTagPickerOptionStyles_unstable","useTagPickerOption_unstable","useTagPicker_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,SAAS;eAATA,oBAAS;;IA2BhBC,eAAe;eAAfA,gCAAe;;IAQfC,gBAAgB;eAAhBA,kCAAgB;;IAgBhBC,cAAc;eAAdA,8BAAc;;IAxCdC,cAAc;eAAdA,8BAAc;;IAQdC,aAAa;eAAbA,4BAAa;;IAwBbC,eAAe;eAAfA,gCAAe;;IAiBfC,oBAAoB;eAApBA,0CAAoB;;IA/BpBC,8BAA8B;eAA9BA,+CAA8B;;IAQ9BC,+BAA+B;eAA/BA,iDAA+B;;IAgB/BC,6BAA6B;eAA7BA,6CAA6B;;IAxC7BC,6BAA6B;eAA7BA,6CAA6B;;IAQ7BC,4BAA4B;eAA5BA,2CAA4B;;IAyC5BC,0BAA0B;eAA1BA,gDAA0B;;IAjB1BC,8BAA8B;eAA9BA,+CAA8B;;IA7CZC,wBAAwB;eAAxBA,mCAAwB;;IA4B1CC,yBAAyB;eAAzBA,0CAAyB;;IAQzBC,0BAA0B;eAA1BA,4CAA0B;;IAgB1BC,wBAAwB;eAAxBA,wCAAwB;;IAxCxBC,wBAAwB;eAAxBA,wCAAwB;;IAQxBC,uBAAuB;eAAvBA,sCAAuB;;IAwBvBC,yBAAyB;eAAzBA,0CAAyB;;IAiBzBC,8BAA8B;eAA9BA,oDAA8B;;IA/B9BC,iCAAiC;eAAjCA,kDAAiC;;IACjCC,2BAA2B;eAA3BA,4CAA2B;;IA2CpBC,4BAA4B;eAA5BA,8CAA4B;;IApCnCC,kCAAkC;eAAlCA,oDAAkC;;IAClCC,4BAA4B;eAA5BA,8CAA4B;;IAiCrBC,kBAAkB;eAAlBA,sCAAkB;;IAlBzBC,gCAAgC;eAAhCA,gDAAgC;;IAChCC,0BAA0B;eAA1BA,0CAA0B;;IAzC1BC,gCAAgC;eAAhCA,gDAAgC;;IAChCC,0BAA0B;eAA1BA,0CAA0B;;IAO1BC,+BAA+B;eAA/BA,8CAA+B;;IAC/BC,yBAAyB;eAAzBA,wCAAyB;;IAyCzBC,uBAAuB;eAAvBA,6CAAuB;;IADvBC,6BAA6B;eAA7BA,mDAA6B;;IAjB7BC,iCAAiC;eAAjCA,kDAAiC;;IACjCC,2BAA2B;eAA3BA,4CAA2B;;IA/CiBC,qBAAqB;eAArBA,gCAAqB;;;2BAAQ;gCAgBpE;+BAQA;iCAQA;kCAQA;iCAQA;gCAQA;sCASA;oCAO4B;kCAEU"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-tag-picker",
3
- "version": "9.3.14",
3
+ "version": "9.4.1",
4
4
  "description": "FluentUI TagPicker component",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -28,20 +28,20 @@
28
28
  "@fluentui/scripts-cypress": "*"
29
29
  },
30
30
  "dependencies": {
31
- "@fluentui/react-jsx-runtime": "^9.0.49",
31
+ "@fluentui/react-jsx-runtime": "^9.0.50",
32
32
  "@fluentui/react-shared-contexts": "^9.21.2",
33
33
  "@fluentui/react-theme": "^9.1.24",
34
- "@fluentui/react-utilities": "^9.18.19",
35
- "@fluentui/react-portal": "^9.4.41",
36
- "@fluentui/react-tabster": "^9.23.2",
37
- "@fluentui/react-aria": "^9.13.13",
34
+ "@fluentui/react-utilities": "^9.18.20",
35
+ "@fluentui/react-portal": "^9.4.42",
36
+ "@fluentui/react-tabster": "^9.23.3",
37
+ "@fluentui/react-aria": "^9.13.14",
38
38
  "@fluentui/react-icons": "^2.0.245",
39
- "@fluentui/react-combobox": "^9.13.16",
40
- "@fluentui/react-tags": "^9.3.28",
41
- "@fluentui/react-context-selector": "^9.1.71",
42
- "@fluentui/react-positioning": "^9.16.1",
39
+ "@fluentui/react-combobox": "^9.13.18",
40
+ "@fluentui/react-tags": "^9.3.30",
41
+ "@fluentui/react-context-selector": "^9.1.72",
42
+ "@fluentui/react-positioning": "^9.16.3",
43
43
  "@fluentui/keyboard-keys": "^9.0.8",
44
- "@fluentui/react-field": "^9.1.84",
44
+ "@fluentui/react-field": "^9.1.86",
45
45
  "@griffel/react": "^1.5.22",
46
46
  "@swc/helpers": "^0.5.1"
47
47
  },