@fluentui/react-combobox 9.0.0-beta.24 → 9.0.0-beta.26

package/lib/components/Listbox/useListboxStyles.js

@@ -8,17 +8,15 @@ export const listboxClassNames = {
  */
 const useStyles = /*#__PURE__*/__styles({
   root: {
-    E5pizo: "f1hg901r",
-    B7ck84d: "f1ewtqcl",
-    Bbmb7ep: ["f1aa9q02", "f16jpd5f"],
-    Beyfa6y: ["f16jpd5f", "f1aa9q02"],
-    B7oj6ja: ["f1jar5jt", "fyu767a"],
-    Btl43ni: ["fyu767a", "f1jar5jt"],
     De3pzq: "fxugw4r",
+    B7ck84d: "f1ewtqcl",
     mc9l5x: "f22iagw",
     Beiy3e4: "f1vx9l62",
     Bf4jedk: "f3hsy1e",
     Bmxbyg5: "f5zp4f",
+    Bpd4iqm: "fpvhumw",
+    oeaueh: "f1yog68k",
+    Bw0xxkn: "f13sgyd8",
     z8tnut: "f1x4af0m",
     z189sj: ["f7x41pl", "fruq291"],
     Byoj8tv: "fd55psn",
@@ -26,7 +24,7 @@ const useStyles = /*#__PURE__*/__styles({
     Belr9w4: "fiut8dr"
   }
 }, {
-  d: [".f1hg901r{box-shadow:var(--shadow16);}", ".f1ewtqcl{box-sizing:border-box;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f3hsy1e{min-width:160px;}", ".f5zp4f{overflow-y:auto;}", ".f1x4af0m{padding-top:var(--spacingHorizontalXS);}", ".f7x41pl{padding-right:var(--spacingHorizontalXS);}", ".fruq291{padding-left:var(--spacingHorizontalXS);}", ".fd55psn{padding-bottom:var(--spacingHorizontalXS);}", ".fiut8dr{row-gap:var(--spacingHorizontalXXS);}"]
+  d: [".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f1ewtqcl{box-sizing:border-box;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f3hsy1e{min-width:160px;}", ".f5zp4f{overflow-y:auto;}", ".fpvhumw{outline-width:1px;}", ".f1yog68k{outline-style:solid;}", ".f13sgyd8{outline-color:var(--colorTransparentStroke);}", ".f1x4af0m{padding-top:var(--spacingHorizontalXS);}", ".f7x41pl{padding-right:var(--spacingHorizontalXS);}", ".fruq291{padding-left:var(--spacingHorizontalXS);}", ".fd55psn{padding-bottom:var(--spacingHorizontalXS);}", ".fiut8dr{row-gap:var(--spacingHorizontalXXS);}"]
 });
 /**
  * Apply styling to the Listbox slots based on the state

package/lib/components/Listbox/useListboxStyles.js.map

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,SAASA,MAAM,QAAQ,uBAAuB;AAE9C,mBAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AAGrE,OAAO,MAAMC,iBAAiB,GAAiC;EAC7DC,IAAI,EAAE;CACP;AAED;;;AAGA,MAAMC,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAahB;AAEF;;;AAGA,OAAO,MAAMC,yBAAyB,GAAIC,KAAmB,IAAkB;EAC7E,MAAMC,MAAM,GAAGH,SAAS,EAAE;EAC1BE,KAAK,CAACH,IAAI,CAACK,SAAS,GAAGR,YAAY,CAACE,iBAAiB,CAACC,IAAI,EAAEI,MAAM,CAACJ,IAAI,EAAEG,KAAK,CAACH,IAAI,CAACK,SAAS,CAAC;EAE9F,OAAOF,KAAK;AACd,CAAC","names":["tokens","mergeClasses","shorthands","listboxClassNames","root","useStyles","useListboxStyles_unstable","state","styles","className"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/components/Listbox/useListboxStyles.ts"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { ListboxSlots, ListboxState } from './Listbox.types';\n\nexport const listboxClassNames: SlotClassNames<ListboxSlots> = {\n  root: 'fui-Listbox',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    boxShadow: `${tokens.shadow16}`,\n    boxSizing: 'border-box',\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n    backgroundColor: tokens.colorNeutralBackground1,\n    display: 'flex',\n    flexDirection: 'column',\n    minWidth: '160px',\n    overflowY: 'auto',\n    ...shorthands.padding(tokens.spacingHorizontalXS),\n    rowGap: tokens.spacingHorizontalXXS,\n  },\n});\n\n/**\n * Apply styling to the Listbox slots based on the state\n */\nexport const useListboxStyles_unstable = (state: ListboxState): ListboxState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(listboxClassNames.root, styles.root, state.root.className);\n\n  return state;\n};\n"]}
+{"version":3,"mappings":"AAAA,SAASA,MAAM,QAAQ,uBAAuB;AAE9C,mBAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AAGrE,OAAO,MAAMC,iBAAiB,GAAiC;EAC7DC,IAAI,EAAE;CACP;AAED;;;AAGA,MAAMC,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAYhB;AAEF;;;AAGA,OAAO,MAAMC,yBAAyB,GAAIC,KAAmB,IAAkB;EAC7E,MAAMC,MAAM,GAAGH,SAAS,EAAE;EAC1BE,KAAK,CAACH,IAAI,CAACK,SAAS,GAAGR,YAAY,CAACE,iBAAiB,CAACC,IAAI,EAAEI,MAAM,CAACJ,IAAI,EAAEG,KAAK,CAACH,IAAI,CAACK,SAAS,CAAC;EAE9F,OAAOF,KAAK;AACd,CAAC","names":["tokens","mergeClasses","shorthands","listboxClassNames","root","useStyles","useListboxStyles_unstable","state","styles","className"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/components/Listbox/useListboxStyles.ts"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { ListboxSlots, ListboxState } from './Listbox.types';\n\nexport const listboxClassNames: SlotClassNames<ListboxSlots> = {\n  root: 'fui-Listbox',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    backgroundColor: tokens.colorNeutralBackground1,\n    boxSizing: 'border-box',\n    display: 'flex',\n    flexDirection: 'column',\n    minWidth: '160px',\n    overflowY: 'auto',\n    ...shorthands.outline('1px', 'solid', tokens.colorTransparentStroke),\n    ...shorthands.padding(tokens.spacingHorizontalXS),\n    rowGap: tokens.spacingHorizontalXXS,\n  },\n});\n\n/**\n * Apply styling to the Listbox slots based on the state\n */\nexport const useListboxStyles_unstable = (state: ListboxState): ListboxState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(listboxClassNames.root, styles.root, state.root.className);\n\n  return state;\n};\n"]}

package/lib/components/Option/useOption.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { getNativeElementProps, resolveShorthand, useId, useMergedRefs } from '@fluentui/react-utilities';
 import { useContextSelector } from '@fluentui/react-context-selector';
-import { CheckmarkFilled, CheckboxUncheckedFilled, CheckboxCheckedFilled } from '@fluentui/react-icons';
+import { CheckmarkFilled, Checkmark12Filled } from '@fluentui/react-icons';
 import { ComboboxContext } from '../../contexts/ComboboxContext';
 import { ListboxContext } from '../../contexts/ListboxContext';
 function getTextString(text, children) {
@@ -71,7 +71,7 @@ export const useOption_unstable = (props, ref) => {
   // check icon
   let CheckIcon = /*#__PURE__*/React.createElement(CheckmarkFilled, null);
   if (multiselect) {
-    CheckIcon = selected ? /*#__PURE__*/React.createElement(CheckboxCheckedFilled, null) : /*#__PURE__*/React.createElement(CheckboxUncheckedFilled, null);
+    CheckIcon = selected ? /*#__PURE__*/React.createElement(Checkmark12Filled, null) : '';
   }
   const onClick = event => {
     var _a;

package/lib/components/Option/useOption.js.map

@@ -1 +1 @@
-{"version":3,"mappings":"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","names":["React","getNativeElementProps","resolveShorthand","useId","useMergedRefs","useContextSelector","CheckmarkFilled","CheckboxUncheckedFilled","CheckboxCheckedFilled","ComboboxContext","ListboxContext","getTextString","text","children","undefined","textString","hasNonStringChild","Children","forEach","child","console","warn","useOption_unstable","props","ref","disabled","value","optionRef","useRef","optionText","optionValue","id","optionData","useMemo","focusVisible","ctx","multiselect","registerOption","selected","selectedOptions","find","o","selectOption","setActiveOption","setOpen","active","activeOption","CheckIcon","onClick","event","preventDefault","useEffect","current","semanticProps","role","components","root","checkIcon","required","defaultProps"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/components/Option/useOption.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useId, useMergedRefs } from '@fluentui/react-utilities';\nimport { useContextSelector } from '@fluentui/react-context-selector';\nimport { CheckmarkFilled, CheckboxUncheckedFilled, CheckboxCheckedFilled } from '@fluentui/react-icons';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport { ListboxContext } from '../../contexts/ListboxContext';\nimport type { OptionValue } from '../../utils/OptionCollection.types';\nimport type { OptionProps, OptionState } from './Option.types';\n\nfunction getTextString(text: string | undefined, children: React.ReactNode) {\n  if (text !== undefined) {\n    return text;\n  }\n\n  let textString = '';\n  let hasNonStringChild = false;\n  React.Children.forEach(children, child => {\n    if (typeof child === 'string') {\n      textString += child;\n    } else {\n      hasNonStringChild = true;\n    }\n  });\n\n  // warn if an Option has non-string children and no text prop\n  if (hasNonStringChild) {\n    // eslint-disable-next-line no-console\n    console.warn('Provide a `text` prop to Option components when they contain non-string children.');\n  }\n\n  return textString;\n}\n\n/**\n * Create the state required to render Option.\n *\n * The returned state can be modified with hooks such as useOptionStyles_unstable,\n * before being passed to renderOption_unstable.\n *\n * @param props - props from this instance of Option\n * @param ref - reference to root HTMLElement of Option\n */\nexport const useOption_unstable = (props: OptionProps, ref: React.Ref<HTMLElement>): OptionState => {\n  const { children, disabled, text, value } = props;\n  const optionRef = React.useRef<HTMLElement>(null);\n  const optionText = getTextString(text, children);\n  const optionValue = value ?? optionText;\n\n  // use the id if provided, otherwise use a generated id\n  const id = useId('fluent-option', props.id);\n\n  // data used for context registration & events\n  const optionData = React.useMemo<OptionValue>(() => ({ id, disabled, text: optionText, value: optionValue }), [\n    id,\n    disabled,\n    optionText,\n    optionValue,\n  ]);\n\n  // context values\n  const focusVisible = useContextSelector(ListboxContext, ctx => ctx.focusVisible);\n  const multiselect = useContextSelector(ListboxContext, ctx => ctx.multiselect);\n  const registerOption = useContextSelector(ListboxContext, ctx => ctx.registerOption);\n  const selected = useContextSelector(ListboxContext, ctx => {\n    const selectedOptions = ctx.selectedOptions;\n\n    return !!optionValue && !!selectedOptions.find(o => o === optionValue);\n  });\n  const selectOption = useContextSelector(ListboxContext, ctx => ctx.selectOption);\n  const setActiveOption = useContextSelector(ListboxContext, ctx => ctx.setActiveOption);\n  const setOpen = useContextSelector(ComboboxContext, ctx => ctx.setOpen);\n\n  // current active option?\n  const active = useContextSelector(ListboxContext, ctx => {\n    return ctx.activeOption?.id !== undefined && ctx.activeOption?.id === id;\n  });\n\n  // check icon\n  let CheckIcon = <CheckmarkFilled />;\n  if (multiselect) {\n    CheckIcon = selected ? <CheckboxCheckedFilled /> : <CheckboxUncheckedFilled />;\n  }\n\n  const onClick = (event: React.MouseEvent<HTMLDivElement>) => {\n    if (disabled) {\n      event.preventDefault();\n      return;\n    }\n\n    // clicked option should always become active option\n    setActiveOption(optionData);\n\n    // close on option click for single-select options in a combobox\n    if (!multiselect) {\n      setOpen?.(event, false);\n    }\n\n    // handle selection change\n    selectOption(event, optionData);\n\n    props.onClick?.(event);\n  };\n\n  // register option data with context\n  React.useEffect(() => {\n    if (id && optionRef.current) {\n      return registerOption(optionData, optionRef.current);\n    }\n  }, [id, optionData, registerOption]);\n\n  const semanticProps = multiselect\n    ? { role: 'menuitemcheckbox', 'aria-checked': selected }\n    : { role: 'option', 'aria-selected': selected };\n\n  return {\n    components: {\n      root: 'div',\n      checkIcon: 'span',\n    },\n    root: getNativeElementProps('div', {\n      ref: useMergedRefs(ref, optionRef),\n      'aria-disabled': disabled ? 'true' : undefined,\n      id,\n      ...semanticProps,\n      ...props,\n      onClick,\n    }),\n    checkIcon: resolveShorthand(props.checkIcon, {\n      required: true,\n      defaultProps: {\n        'aria-hidden': 'true',\n        children: CheckIcon,\n      },\n    }),\n    active,\n    disabled,\n    focusVisible,\n    multiselect,\n    selected,\n  };\n};\n"]}
+{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,qBAAqB,EAAEC,gBAAgB,EAAEC,KAAK,EAAEC,aAAa,QAAQ,2BAA2B;AACzG,SAASC,kBAAkB,QAAQ,kCAAkC;AACrE,SAASC,eAAe,EAAEC,iBAAiB,QAAQ,uBAAuB;AAC1E,SAASC,eAAe,QAAQ,gCAAgC;AAChE,SAASC,cAAc,QAAQ,+BAA+B;AAI9D,SAASC,aAAa,CAACC,IAAwB,EAAEC,QAAyB;EACxE,IAAID,IAAI,KAAKE,SAAS,EAAE;IACtB,OAAOF,IAAI;;EAGb,IAAIG,UAAU,GAAG,EAAE;EACnB,IAAIC,iBAAiB,GAAG,KAAK;EAC7Bf,KAAK,CAACgB,QAAQ,CAACC,OAAO,CAACL,QAAQ,EAAEM,KAAK,IAAG;IACvC,IAAI,OAAOA,KAAK,KAAK,QAAQ,EAAE;MAC7BJ,UAAU,IAAII,KAAK;KACpB,MAAM;MACLH,iBAAiB,GAAG,IAAI;;EAE5B,CAAC,CAAC;EAEF;EACA,IAAIA,iBAAiB,EAAE;IACrB;IACAI,OAAO,CAACC,IAAI,CAAC,mFAAmF,CAAC;;EAGnG,OAAON,UAAU;AACnB;AAEA;;;;;;;;;AASA,OAAO,MAAMO,kBAAkB,GAAG,CAACC,KAAkB,EAAEC,GAA2B,KAAiB;EACjG,MAAM;IAAEX,QAAQ;IAAEY,QAAQ;IAAEb,IAAI;IAAEc;EAAK,CAAE,GAAGH,KAAK;EACjD,MAAMI,SAAS,GAAG1B,KAAK,CAAC2B,MAAM,CAAc,IAAI,CAAC;EACjD,MAAMC,UAAU,GAAGlB,aAAa,CAACC,IAAI,EAAEC,QAAQ,CAAC;EAChD,MAAMiB,WAAW,GAAGJ,KAAK,aAALA,KAAK,cAALA,KAAK,GAAIG,UAAU;EAEvC;EACA,MAAME,EAAE,GAAG3B,KAAK,CAAC,eAAe,EAAEmB,KAAK,CAACQ,EAAE,CAAC;EAE3C;EACA,MAAMC,UAAU,GAAG/B,KAAK,CAACgC,OAAO,CAAc,OAAO;IAAEF,EAAE;IAAEN,QAAQ;IAAEb,IAAI,EAAEiB,UAAU;IAAEH,KAAK,EAAEI;EAAW,CAAE,CAAC,EAAE,CAC5GC,EAAE,EACFN,QAAQ,EACRI,UAAU,EACVC,WAAW,CACZ,CAAC;EAEF;EACA,MAAMI,YAAY,GAAG5B,kBAAkB,CAACI,cAAc,EAAEyB,GAAG,IAAIA,GAAG,CAACD,YAAY,CAAC;EAChF,MAAME,WAAW,GAAG9B,kBAAkB,CAACI,cAAc,EAAEyB,GAAG,IAAIA,GAAG,CAACC,WAAW,CAAC;EAC9E,MAAMC,cAAc,GAAG/B,kBAAkB,CAACI,cAAc,EAAEyB,GAAG,IAAIA,GAAG,CAACE,cAAc,CAAC;EACpF,MAAMC,QAAQ,GAAGhC,kBAAkB,CAACI,cAAc,EAAEyB,GAAG,IAAG;IACxD,MAAMI,eAAe,GAAGJ,GAAG,CAACI,eAAe;IAE3C,OAAO,CAAC,CAACT,WAAW,IAAI,CAAC,CAACS,eAAe,CAACC,IAAI,CAACC,CAAC,IAAIA,CAAC,KAAKX,WAAW,CAAC;EACxE,CAAC,CAAC;EACF,MAAMY,YAAY,GAAGpC,kBAAkB,CAACI,cAAc,EAAEyB,GAAG,IAAIA,GAAG,CAACO,YAAY,CAAC;EAChF,MAAMC,eAAe,GAAGrC,kBAAkB,CAACI,cAAc,EAAEyB,GAAG,IAAIA,GAAG,CAACQ,eAAe,CAAC;EACtF,MAAMC,OAAO,GAAGtC,kBAAkB,CAACG,eAAe,EAAE0B,GAAG,IAAIA,GAAG,CAACS,OAAO,CAAC;EAEvE;EACA,MAAMC,MAAM,GAAGvC,kBAAkB,CAACI,cAAc,EAAEyB,GAAG,IAAG;;IACtD,OAAO,UAAG,CAACW,YAAY,0CAAEf,EAAE,MAAKjB,SAAS,IAAI,UAAG,CAACgC,YAAY,0CAAEf,EAAE,MAAKA,EAAE;EAC1E,CAAC,CAAC;EAEF;EACA,IAAIgB,SAAS,gBAAoB9C,oBAACM,eAAe,OAAG;EACpD,IAAI6B,WAAW,EAAE;IACfW,SAAS,GAAGT,QAAQ,gBAAGrC,oBAACO,iBAAiB,OAAG,GAAG,EAAE;;EAGnD,MAAMwC,OAAO,GAAIC,KAAuC,IAAI;;IAC1D,IAAIxB,QAAQ,EAAE;MACZwB,KAAK,CAACC,cAAc,EAAE;MACtB;;IAGF;IACAP,eAAe,CAACX,UAAU,CAAC;IAE3B;IACA,IAAI,CAACI,WAAW,EAAE;MAChBQ,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAGK,KAAK,EAAE,KAAK,CAAC;;IAGzB;IACAP,YAAY,CAACO,KAAK,EAAEjB,UAAU,CAAC;IAE/B,WAAK,CAACgB,OAAO,+CAAbzB,KAAK,EAAW0B,KAAK,CAAC;EACxB,CAAC;EAED;EACAhD,KAAK,CAACkD,SAAS,CAAC,MAAK;IACnB,IAAIpB,EAAE,IAAIJ,SAAS,CAACyB,OAAO,EAAE;MAC3B,OAAOf,cAAc,CAACL,UAAU,EAAEL,SAAS,CAACyB,OAAO,CAAC;;EAExD,CAAC,EAAE,CAACrB,EAAE,EAAEC,UAAU,EAAEK,cAAc,CAAC,CAAC;EAEpC,MAAMgB,aAAa,GAAGjB,WAAW,GAC7B;IAAEkB,IAAI,EAAE,kBAAkB;IAAE,cAAc,EAAEhB;EAAQ,CAAE,GACtD;IAAEgB,IAAI,EAAE,QAAQ;IAAE,eAAe,EAAEhB;EAAQ,CAAE;EAEjD,OAAO;IACLiB,UAAU,EAAE;MACVC,IAAI,EAAE,KAAK;MACXC,SAAS,EAAE;KACZ;IACDD,IAAI,EAAEtD,qBAAqB,CAAC,KAAK,EAAE;MACjCsB,GAAG,EAAEnB,aAAa,CAACmB,GAAG,EAAEG,SAAS,CAAC;MAClC,eAAe,EAAEF,QAAQ,GAAG,MAAM,GAAGX,SAAS;MAC9CiB,EAAE;MACF,GAAGsB,aAAa;MAChB,GAAG9B,KAAK;MACRyB;KACD,CAAC;IACFS,SAAS,EAAEtD,gBAAgB,CAACoB,KAAK,CAACkC,SAAS,EAAE;MAC3CC,QAAQ,EAAE,IAAI;MACdC,YAAY,EAAE;QACZ,aAAa,EAAE,MAAM;QACrB9C,QAAQ,EAAEkC;;KAEb,CAAC;IACFF,MAAM;IACNpB,QAAQ;IACRS,YAAY;IACZE,WAAW;IACXE;GACD;AACH,CAAC","names":["React","getNativeElementProps","resolveShorthand","useId","useMergedRefs","useContextSelector","CheckmarkFilled","Checkmark12Filled","ComboboxContext","ListboxContext","getTextString","text","children","undefined","textString","hasNonStringChild","Children","forEach","child","console","warn","useOption_unstable","props","ref","disabled","value","optionRef","useRef","optionText","optionValue","id","optionData","useMemo","focusVisible","ctx","multiselect","registerOption","selected","selectedOptions","find","o","selectOption","setActiveOption","setOpen","active","activeOption","CheckIcon","onClick","event","preventDefault","useEffect","current","semanticProps","role","components","root","checkIcon","required","defaultProps"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/components/Option/useOption.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useId, useMergedRefs } from '@fluentui/react-utilities';\nimport { useContextSelector } from '@fluentui/react-context-selector';\nimport { CheckmarkFilled, Checkmark12Filled } from '@fluentui/react-icons';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport { ListboxContext } from '../../contexts/ListboxContext';\nimport type { OptionValue } from '../../utils/OptionCollection.types';\nimport type { OptionProps, OptionState } from './Option.types';\n\nfunction getTextString(text: string | undefined, children: React.ReactNode) {\n  if (text !== undefined) {\n    return text;\n  }\n\n  let textString = '';\n  let hasNonStringChild = false;\n  React.Children.forEach(children, child => {\n    if (typeof child === 'string') {\n      textString += child;\n    } else {\n      hasNonStringChild = true;\n    }\n  });\n\n  // warn if an Option has non-string children and no text prop\n  if (hasNonStringChild) {\n    // eslint-disable-next-line no-console\n    console.warn('Provide a `text` prop to Option components when they contain non-string children.');\n  }\n\n  return textString;\n}\n\n/**\n * Create the state required to render Option.\n *\n * The returned state can be modified with hooks such as useOptionStyles_unstable,\n * before being passed to renderOption_unstable.\n *\n * @param props - props from this instance of Option\n * @param ref - reference to root HTMLElement of Option\n */\nexport const useOption_unstable = (props: OptionProps, ref: React.Ref<HTMLElement>): OptionState => {\n  const { children, disabled, text, value } = props;\n  const optionRef = React.useRef<HTMLElement>(null);\n  const optionText = getTextString(text, children);\n  const optionValue = value ?? optionText;\n\n  // use the id if provided, otherwise use a generated id\n  const id = useId('fluent-option', props.id);\n\n  // data used for context registration & events\n  const optionData = React.useMemo<OptionValue>(() => ({ id, disabled, text: optionText, value: optionValue }), [\n    id,\n    disabled,\n    optionText,\n    optionValue,\n  ]);\n\n  // context values\n  const focusVisible = useContextSelector(ListboxContext, ctx => ctx.focusVisible);\n  const multiselect = useContextSelector(ListboxContext, ctx => ctx.multiselect);\n  const registerOption = useContextSelector(ListboxContext, ctx => ctx.registerOption);\n  const selected = useContextSelector(ListboxContext, ctx => {\n    const selectedOptions = ctx.selectedOptions;\n\n    return !!optionValue && !!selectedOptions.find(o => o === optionValue);\n  });\n  const selectOption = useContextSelector(ListboxContext, ctx => ctx.selectOption);\n  const setActiveOption = useContextSelector(ListboxContext, ctx => ctx.setActiveOption);\n  const setOpen = useContextSelector(ComboboxContext, ctx => ctx.setOpen);\n\n  // current active option?\n  const active = useContextSelector(ListboxContext, ctx => {\n    return ctx.activeOption?.id !== undefined && ctx.activeOption?.id === id;\n  });\n\n  // check icon\n  let CheckIcon: React.ReactNode = <CheckmarkFilled />;\n  if (multiselect) {\n    CheckIcon = selected ? <Checkmark12Filled /> : '';\n  }\n\n  const onClick = (event: React.MouseEvent<HTMLDivElement>) => {\n    if (disabled) {\n      event.preventDefault();\n      return;\n    }\n\n    // clicked option should always become active option\n    setActiveOption(optionData);\n\n    // close on option click for single-select options in a combobox\n    if (!multiselect) {\n      setOpen?.(event, false);\n    }\n\n    // handle selection change\n    selectOption(event, optionData);\n\n    props.onClick?.(event);\n  };\n\n  // register option data with context\n  React.useEffect(() => {\n    if (id && optionRef.current) {\n      return registerOption(optionData, optionRef.current);\n    }\n  }, [id, optionData, registerOption]);\n\n  const semanticProps = multiselect\n    ? { role: 'menuitemcheckbox', 'aria-checked': selected }\n    : { role: 'option', 'aria-selected': selected };\n\n  return {\n    components: {\n      root: 'div',\n      checkIcon: 'span',\n    },\n    root: getNativeElementProps('div', {\n      ref: useMergedRefs(ref, optionRef),\n      'aria-disabled': disabled ? 'true' : undefined,\n      id,\n      ...semanticProps,\n      ...props,\n      onClick,\n    }),\n    checkIcon: resolveShorthand(props.checkIcon, {\n      required: true,\n      defaultProps: {\n        'aria-hidden': 'true',\n        children: CheckIcon,\n      },\n    }),\n    active,\n    disabled,\n    focusVisible,\n    multiselect,\n    selected,\n  };\n};\n"]}

package/lib/components/Option/useOptionStyles.js

@@ -69,23 +69,50 @@ const useStyles = /*#__PURE__*/__styles({
     Bcdw1i0: "fd7fpy0",
     Bo70h7d: "fvc9v3g"
   },
-  multiselectCheck: {
-    sj55zd: "f11d4kpn",
-    Be2twd7: "f1pp30po",
+  selectedCheck: {
     Bcdw1i0: "f1022m68"
   },
-  selectedCheck: {
+  multiselectCheck: {
+    B4j52fo: "f192inf7",
+    Bekrc4i: ["f5tn483", "f1ojsxk5"],
+    Bn0qgzm: "f1vxd6vx",
+    ibv6hh: ["f1ojsxk5", "f5tn483"],
+    icvyot: "fzkkow9",
+    vrafjx: ["fcdblym", "fjik90z"],
+    oivjwe: "fg706s2",
+    wvpqe5: ["fjik90z", "fcdblym"],
+    g2u3we: "fq0vr37",
+    h3c5rm: ["f1byw159", "f11cr0be"],
+    B9xav0g: "f1c1zstj",
+    zhjwy3: ["f11cr0be", "f1byw159"],
+    Bbmb7ep: ["f1g3puop", "fi2rrw2"],
+    Beyfa6y: ["fi2rrw2", "f1g3puop"],
+    B7oj6ja: ["f1rstyi9", "f1s4nn1u"],
+    Btl43ni: ["f1s4nn1u", "f1rstyi9"],
+    B7ck84d: "f1ewtqcl",
+    mc9l5x: "f22iagw",
+    Bt984gj: "f122n59",
+    Brf1p80: "f4d9j23",
+    Bkfmm31: "f1w9h62z",
+    Be2twd7: "f1ugzwwg",
+    Bqenvij: "fd461yt",
+    a9b677: "fjw5fx7",
     Bcdw1i0: "f1022m68"
   },
   selectedMultiselectCheck: {
-    sj55zd: "f1817uup"
+    De3pzq: "ftywsgz",
+    sj55zd: "fqpbvvt",
+    g2u3we: "f3xi7mh",
+    h3c5rm: ["ftovhe4", "f1wczvin"],
+    B9xav0g: "f68vbr6",
+    zhjwy3: ["f1wczvin", "ftovhe4"]
   },
   checkDisabled: {
     sj55zd: "f1s2aq7o",
     Bbusuzp: "f1dcs8yz"
   }
 }, {
-  d: [".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".f1ufnopg{-webkit-column-gap:var(--spacingHorizontalXS);column-gap:var(--spacingHorizontalXS);}", ".f1k6fduh{cursor:pointer;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".fp2oml8{padding-top:var(--spacingVerticalSNudge);}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f1tdddsa{padding-bottom:var(--spacingVerticalSNudge);}", ".f10pi13n{position:relative;}", ".f13zj6fq::after{content:\"\";}", ".f1mdlcz9::after{position:absolute;}", ".f1nwj1ja::after{pointer-events:none;}", ".ffmd2fr::after{z-index:1;}", ".f8rth92::after{border-top-style:solid;}", ".flthirb::after{border-right-style:solid;}", ".ftkbnf5::after{border-left-style:solid;}", ".f1lh990p::after{border-bottom-style:solid;}", ".fc9v8v1::after{border-top-width:2px;}", ".f1mwfetb::after{border-right-width:2px;}", ".f18mat8f::after{border-left-width:2px;}", ".f1cb6c3::after{border-bottom-width:2px;}", ".f1ibwz09::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f1kp91vd::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1pix4dl::after{border-top-right-radius:var(--borderRadiusMedium);}", ".f13nd1z4::after{border-top-left-radius:var(--borderRadiusMedium);}", ".f1qw5sz7::after{border-top-color:var(--colorStrokeFocus2);}", ".f19va7ni::after{border-right-color:var(--colorStrokeFocus2);}", ".f1a9v3mw::after{border-left-color:var(--colorStrokeFocus2);}", ".fkkziue::after{border-bottom-color:var(--colorStrokeFocus2);}", ".f1a97anr::after{top:-2px;}", ".f5226zp::after{bottom:-2px;}", ".fa2bdqt::after{left:-2px;}", ".fei6g0k::after{right:-2px;}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".f18b9hdq{margin-left:calc(var(--spacingHorizontalXXS) * -1);}", ".fn6qj8t{margin-right:calc(var(--spacingHorizontalXXS) * -1);}", ".f1xk557c{margin-right:var(--spacingHorizontalXXS);}", ".f1h9en5y{margin-left:var(--spacingHorizontalXXS);}", ".fd7fpy0{visibility:hidden;}", ".fvc9v3g svg{display:block;}", ".f11d4kpn{color:var(--colorNeutralForeground3);}", ".f1pp30po{font-size:var(--fontSizeBase500);}", ".f1022m68{visibility:visible;}", ".f1817uup{color:var(--colorBrandBackground);}"],
+  d: [".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".f1ufnopg{-webkit-column-gap:var(--spacingHorizontalXS);column-gap:var(--spacingHorizontalXS);}", ".f1k6fduh{cursor:pointer;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".fp2oml8{padding-top:var(--spacingVerticalSNudge);}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f1tdddsa{padding-bottom:var(--spacingVerticalSNudge);}", ".f10pi13n{position:relative;}", ".f13zj6fq::after{content:\"\";}", ".f1mdlcz9::after{position:absolute;}", ".f1nwj1ja::after{pointer-events:none;}", ".ffmd2fr::after{z-index:1;}", ".f8rth92::after{border-top-style:solid;}", ".flthirb::after{border-right-style:solid;}", ".ftkbnf5::after{border-left-style:solid;}", ".f1lh990p::after{border-bottom-style:solid;}", ".fc9v8v1::after{border-top-width:2px;}", ".f1mwfetb::after{border-right-width:2px;}", ".f18mat8f::after{border-left-width:2px;}", ".f1cb6c3::after{border-bottom-width:2px;}", ".f1ibwz09::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f1kp91vd::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1pix4dl::after{border-top-right-radius:var(--borderRadiusMedium);}", ".f13nd1z4::after{border-top-left-radius:var(--borderRadiusMedium);}", ".f1qw5sz7::after{border-top-color:var(--colorStrokeFocus2);}", ".f19va7ni::after{border-right-color:var(--colorStrokeFocus2);}", ".f1a9v3mw::after{border-left-color:var(--colorStrokeFocus2);}", ".fkkziue::after{border-bottom-color:var(--colorStrokeFocus2);}", ".f1a97anr::after{top:-2px;}", ".f5226zp::after{bottom:-2px;}", ".fa2bdqt::after{left:-2px;}", ".fei6g0k::after{right:-2px;}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".f18b9hdq{margin-left:calc(var(--spacingHorizontalXXS) * -1);}", ".fn6qj8t{margin-right:calc(var(--spacingHorizontalXXS) * -1);}", ".f1xk557c{margin-right:var(--spacingHorizontalXXS);}", ".f1h9en5y{margin-left:var(--spacingHorizontalXXS);}", ".fd7fpy0{visibility:hidden;}", ".fvc9v3g svg{display:block;}", ".f1022m68{visibility:visible;}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".fq0vr37{border-top-color:var(--colorNeutralStrokeAccessible);}", ".f1byw159{border-right-color:var(--colorNeutralStrokeAccessible);}", ".f11cr0be{border-left-color:var(--colorNeutralStrokeAccessible);}", ".f1c1zstj{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".f1g3puop{border-bottom-right-radius:var(--borderRadiusSmall);}", ".fi2rrw2{border-bottom-left-radius:var(--borderRadiusSmall);}", ".f1rstyi9{border-top-right-radius:var(--borderRadiusSmall);}", ".f1s4nn1u{border-top-left-radius:var(--borderRadiusSmall);}", ".f1ewtqcl{box-sizing:border-box;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".f1w9h62z{fill:currentColor;}", ".f1ugzwwg{font-size:12px;}", ".fd461yt{height:16px;}", ".fjw5fx7{width:16px;}", ".ftywsgz{background-color:var(--colorCompoundBrandBackground);}", ".fqpbvvt{color:var(--colorNeutralForegroundInverted);}", ".f3xi7mh{border-top-color:var(--colorCompoundBrandBackground);}", ".ftovhe4{border-right-color:var(--colorCompoundBrandBackground);}", ".f1wczvin{border-left-color:var(--colorCompoundBrandBackground);}", ".f68vbr6{border-bottom-color:var(--colorCompoundBrandBackground);}"],
   h: [".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}", ".f9ql6rf:hover{background-color:var(--colorTransparentBackground);}"],
   a: [".fb40n2d:active{background-color:var(--colorNeutralBackground1Pressed);}", ".fgj9um3:active{background-color:var(--colorTransparentBackground);}"],
   m: [["@media (forced-colors: active){.f1dcs8yz{color:GrayText;}}", {

package/lib/components/Option/useOptionStyles.js.map

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,SAASA,MAAM,QAAQ,uBAAuB;AAE9C,mBAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AAGrE,OAAO,MAAMC,gBAAgB,GAAgC;EAC3DC,IAAI,EAAE,YAAY;EAClBC,SAAS,EAAE;CACZ;AAED;;;AAGA,MAAMC,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;EAAA;IAAA;EAAA;AAAA,EAgGhB;AAEF;;;AAGA,OAAO,MAAMC,wBAAwB,GAAIC,KAAkB,IAAiB;EAC1E,MAAM;IAAEC,MAAM;IAAEC,QAAQ;IAAEC,YAAY;IAAEC,WAAW;IAAEC;EAAQ,CAAE,GAAGL,KAAK;EACvE,MAAMM,MAAM,GAAGR,SAAS,EAAE;EAC1BE,KAAK,CAACJ,IAAI,CAACW,SAAS,GAAGd,YAAY,CACjCE,gBAAgB,CAACC,IAAI,EACrBU,MAAM,CAACV,IAAI,EACXK,MAAM,IAAIE,YAAY,IAAIG,MAAM,CAACL,MAAM,EACvCC,QAAQ,IAAII,MAAM,CAACJ,QAAQ,EAC3BG,QAAQ,IAAIC,MAAM,CAACD,QAAQ,EAC3BL,KAAK,CAACJ,IAAI,CAACW,SAAS,CACrB;EAED,IAAIP,KAAK,CAACH,SAAS,EAAE;IACnBG,KAAK,CAACH,SAAS,CAACU,SAAS,GAAGd,YAAY,CACtCE,gBAAgB,CAACE,SAAS,EAC1BS,MAAM,CAACT,SAAS,EAChBG,KAAK,CAACH,SAAS,CAACU,SAAS,EACzBH,WAAW,IAAIE,MAAM,CAACE,gBAAgB,EACtCH,QAAQ,IAAIC,MAAM,CAACG,aAAa,EAChCJ,QAAQ,IAAID,WAAW,IAAIE,MAAM,CAACI,wBAAwB,EAC1DR,QAAQ,IAAII,MAAM,CAACK,aAAa,CACjC;;EAGH,OAAOX,KAAK;AACd,CAAC","names":["tokens","mergeClasses","shorthands","optionClassNames","root","checkIcon","useStyles","useOptionStyles_unstable","state","active","disabled","focusVisible","multiselect","selected","styles","className","multiselectCheck","selectedCheck","selectedMultiselectCheck","checkDisabled"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/components/Option/useOptionStyles.ts"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { OptionSlots, OptionState } from './Option.types';\n\nexport const optionClassNames: SlotClassNames<OptionSlots> = {\n  root: 'fui-Option',\n  checkIcon: 'fui-Option__checkIcon',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    alignItems: 'center',\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n    color: tokens.colorNeutralForeground1,\n    columnGap: tokens.spacingHorizontalXS,\n    cursor: 'pointer',\n    display: 'flex',\n    fontFamily: tokens.fontFamilyBase,\n    fontSize: tokens.fontSizeBase300,\n    lineHeight: tokens.lineHeightBase300,\n    ...shorthands.padding(tokens.spacingVerticalSNudge, tokens.spacingHorizontalS),\n    position: 'relative',\n\n    '&:hover': {\n      backgroundColor: tokens.colorNeutralBackground1Hover,\n    },\n\n    '&:active': {\n      backgroundColor: tokens.colorNeutralBackground1Pressed,\n    },\n  },\n\n  active: {\n    // taken from @fluentui/react-tabster\n    // cannot use createFocusIndicatorStyle() directly, since we aren't using the :focus selector\n    '::after': {\n      content: '\"\"',\n      position: 'absolute',\n      pointerEvents: 'none',\n      zIndex: 1,\n\n      ...shorthands.borderStyle('solid'),\n      ...shorthands.borderWidth('2px'),\n      ...shorthands.borderRadius(tokens.borderRadiusMedium),\n      ...shorthands.borderColor(tokens.colorStrokeFocus2),\n\n      top: '-2px',\n      bottom: '-2px',\n      left: '-2px',\n      right: '-2px',\n    },\n  },\n\n  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n\n    '&:hover': {\n      backgroundColor: tokens.colorTransparentBackground,\n    },\n\n    '&:active': {\n      backgroundColor: tokens.colorTransparentBackground,\n    },\n\n    '@media (forced-colors: active)': {\n      color: 'GrayText',\n    },\n  },\n\n  selected: {},\n\n  checkIcon: {\n    fontSize: tokens.fontSizeBase400,\n    // Shift icon(s) to the left to give text content extra spacing without needing an extra node\n    // This is done instead of gap since the extra space only exists between icon > content, not icon > icon\n    marginLeft: `calc(${tokens.spacingHorizontalXXS} * -1)`,\n    marginRight: tokens.spacingHorizontalXXS,\n    visibility: 'hidden',\n\n    '& svg': {\n      display: 'block',\n    },\n  },\n\n  multiselectCheck: {\n    color: tokens.colorNeutralForeground3,\n    fontSize: tokens.fontSizeBase500,\n    visibility: 'visible',\n  },\n\n  selectedCheck: {\n    visibility: 'visible',\n  },\n\n  selectedMultiselectCheck: {\n    color: tokens.colorBrandBackground,\n  },\n\n  checkDisabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n\n    '@media (forced-colors: active)': {\n      color: 'GrayText',\n    },\n  },\n});\n\n/**\n * Apply styling to the Option slots based on the state\n */\nexport const useOptionStyles_unstable = (state: OptionState): OptionState => {\n  const { active, disabled, focusVisible, multiselect, selected } = state;\n  const styles = useStyles();\n  state.root.className = mergeClasses(\n    optionClassNames.root,\n    styles.root,\n    active && focusVisible && styles.active,\n    disabled && styles.disabled,\n    selected && styles.selected,\n    state.root.className,\n  );\n\n  if (state.checkIcon) {\n    state.checkIcon.className = mergeClasses(\n      optionClassNames.checkIcon,\n      styles.checkIcon,\n      state.checkIcon.className,\n      multiselect && styles.multiselectCheck,\n      selected && styles.selectedCheck,\n      selected && multiselect && styles.selectedMultiselectCheck,\n      disabled && styles.checkDisabled,\n    );\n  }\n\n  return state;\n};\n"]}
+{"version":3,"mappings":"AAAA,SAASA,MAAM,QAAQ,uBAAuB;AAE9C,mBAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AAGrE,OAAO,MAAMC,gBAAgB,GAAgC;EAC3DC,IAAI,EAAE,YAAY;EAClBC,SAAS,EAAE;CACZ;AAED;;;AAGA,MAAMC,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;EAAA;IAAA;EAAA;AAAA,EA4GhB;AAEF;;;AAGA,OAAO,MAAMC,wBAAwB,GAAIC,KAAkB,IAAiB;EAC1E,MAAM;IAAEC,MAAM;IAAEC,QAAQ;IAAEC,YAAY;IAAEC,WAAW;IAAEC;EAAQ,CAAE,GAAGL,KAAK;EACvE,MAAMM,MAAM,GAAGR,SAAS,EAAE;EAC1BE,KAAK,CAACJ,IAAI,CAACW,SAAS,GAAGd,YAAY,CACjCE,gBAAgB,CAACC,IAAI,EACrBU,MAAM,CAACV,IAAI,EACXK,MAAM,IAAIE,YAAY,IAAIG,MAAM,CAACL,MAAM,EACvCC,QAAQ,IAAII,MAAM,CAACJ,QAAQ,EAC3BG,QAAQ,IAAIC,MAAM,CAACD,QAAQ,EAC3BL,KAAK,CAACJ,IAAI,CAACW,SAAS,CACrB;EAED,IAAIP,KAAK,CAACH,SAAS,EAAE;IACnBG,KAAK,CAACH,SAAS,CAACU,SAAS,GAAGd,YAAY,CACtCE,gBAAgB,CAACE,SAAS,EAC1BS,MAAM,CAACT,SAAS,EAChBG,KAAK,CAACH,SAAS,CAACU,SAAS,EACzBH,WAAW,IAAIE,MAAM,CAACE,gBAAgB,EACtCH,QAAQ,IAAIC,MAAM,CAACG,aAAa,EAChCJ,QAAQ,IAAID,WAAW,IAAIE,MAAM,CAACI,wBAAwB,EAC1DR,QAAQ,IAAII,MAAM,CAACK,aAAa,CACjC;;EAGH,OAAOX,KAAK;AACd,CAAC","names":["tokens","mergeClasses","shorthands","optionClassNames","root","checkIcon","useStyles","useOptionStyles_unstable","state","active","disabled","focusVisible","multiselect","selected","styles","className","multiselectCheck","selectedCheck","selectedMultiselectCheck","checkDisabled"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/components/Option/useOptionStyles.ts"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { OptionSlots, OptionState } from './Option.types';\n\nexport const optionClassNames: SlotClassNames<OptionSlots> = {\n  root: 'fui-Option',\n  checkIcon: 'fui-Option__checkIcon',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    alignItems: 'center',\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n    color: tokens.colorNeutralForeground1,\n    columnGap: tokens.spacingHorizontalXS,\n    cursor: 'pointer',\n    display: 'flex',\n    fontFamily: tokens.fontFamilyBase,\n    fontSize: tokens.fontSizeBase300,\n    lineHeight: tokens.lineHeightBase300,\n    ...shorthands.padding(tokens.spacingVerticalSNudge, tokens.spacingHorizontalS),\n    position: 'relative',\n\n    '&:hover': {\n      backgroundColor: tokens.colorNeutralBackground1Hover,\n    },\n\n    '&:active': {\n      backgroundColor: tokens.colorNeutralBackground1Pressed,\n    },\n  },\n\n  active: {\n    // taken from @fluentui/react-tabster\n    // cannot use createFocusIndicatorStyle() directly, since we aren't using the :focus selector\n    '::after': {\n      content: '\"\"',\n      position: 'absolute',\n      pointerEvents: 'none',\n      zIndex: 1,\n\n      ...shorthands.borderStyle('solid'),\n      ...shorthands.borderWidth('2px'),\n      ...shorthands.borderRadius(tokens.borderRadiusMedium),\n      ...shorthands.borderColor(tokens.colorStrokeFocus2),\n\n      top: '-2px',\n      bottom: '-2px',\n      left: '-2px',\n      right: '-2px',\n    },\n  },\n\n  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n\n    '&:hover': {\n      backgroundColor: tokens.colorTransparentBackground,\n    },\n\n    '&:active': {\n      backgroundColor: tokens.colorTransparentBackground,\n    },\n\n    '@media (forced-colors: active)': {\n      color: 'GrayText',\n    },\n  },\n\n  selected: {},\n\n  checkIcon: {\n    fontSize: tokens.fontSizeBase400,\n    // Shift icon(s) to the left to give text content extra spacing without needing an extra node\n    // This is done instead of gap since the extra space only exists between icon > content, not icon > icon\n    marginLeft: `calc(${tokens.spacingHorizontalXXS} * -1)`,\n    marginRight: tokens.spacingHorizontalXXS,\n    visibility: 'hidden',\n\n    '& svg': {\n      display: 'block',\n    },\n  },\n\n  selectedCheck: {\n    visibility: 'visible',\n  },\n\n  multiselectCheck: {\n    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStrokeAccessible),\n    ...shorthands.borderRadius(tokens.borderRadiusSmall),\n    boxSizing: 'border-box',\n\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n\n    fill: 'currentColor',\n    fontSize: '12px',\n    height: '16px',\n    width: '16px',\n    visibility: 'visible',\n  },\n\n  selectedMultiselectCheck: {\n    backgroundColor: tokens.colorCompoundBrandBackground,\n    color: tokens.colorNeutralForegroundInverted,\n    ...shorthands.borderColor(tokens.colorCompoundBrandBackground),\n  },\n\n  checkDisabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n\n    '@media (forced-colors: active)': {\n      color: 'GrayText',\n    },\n  },\n});\n\n/**\n * Apply styling to the Option slots based on the state\n */\nexport const useOptionStyles_unstable = (state: OptionState): OptionState => {\n  const { active, disabled, focusVisible, multiselect, selected } = state;\n  const styles = useStyles();\n  state.root.className = mergeClasses(\n    optionClassNames.root,\n    styles.root,\n    active && focusVisible && styles.active,\n    disabled && styles.disabled,\n    selected && styles.selected,\n    state.root.className,\n  );\n\n  if (state.checkIcon) {\n    state.checkIcon.className = mergeClasses(\n      optionClassNames.checkIcon,\n      styles.checkIcon,\n      state.checkIcon.className,\n      multiselect && styles.multiselectCheck,\n      selected && styles.selectedCheck,\n      selected && multiselect && styles.selectedMultiselectCheck,\n      disabled && styles.checkDisabled,\n    );\n  }\n\n  return state;\n};\n"]}

package/lib/index.js

@@ -7,5 +7,6 @@ export { Option, optionClassNames, renderOption_unstable, useOptionStyles_unstab
 export { Combobox, comboboxClassNames, renderCombobox_unstable, useComboboxStyles_unstable, useCombobox_unstable } from './Combobox';
 export { Dropdown, dropdownClassNames, renderDropdown_unstable, useDropdownStyles_unstable, useDropdown_unstable } from './Dropdown';
 export { OptionGroup, optionGroupClassNames, renderOptionGroup_unstable, useOptionGroupStyles_unstable, useOptionGroup_unstable } from './OptionGroup';
+// eslint-disable-next-line deprecation/deprecation
 export { ComboboxField as ComboboxField_unstable, comboboxFieldClassNames } from './ComboboxField';
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,SAASA,gBAAgB,QAAQ,4BAA4B;AAE7D,SAASC,eAAe,QAAQ,2BAA2B;AAE3D,SAASC,wBAAwB,QAAQ,qCAAqC;AAC9E,SAASC,uBAAuB,QAAQ,oCAAoC;AAC5E,SACEC,OAAO,EACPC,iBAAiB,EACjBC,sBAAsB,EACtBC,yBAAyB,EACzBC,mBAAmB,QACd,WAAW;AAElB,SACEC,MAAM,EACNC,gBAAgB,EAChBC,qBAAqB,EACrBC,wBAAwB,EACxBC,kBAAkB,QACb,UAAU;AAEjB,SACEC,QAAQ,EACRC,kBAAkB,EAClBC,uBAAuB,EACvBC,0BAA0B,EAC1BC,oBAAoB,QACf,YAAY;AASnB,SACEC,QAAQ,EACRC,kBAAkB,EAClBC,uBAAuB,EACvBC,0BAA0B,EAC1BC,oBAAoB,QACf,YAAY;AASnB,SACEC,WAAW,EACXC,qBAAqB,EACrBC,0BAA0B,EAC1BC,6BAA6B,EAC7BC,uBAAuB,QAClB,eAAe;AAGtB,SAASC,aAAa,IAAIC,sBAAsB,EAAEC,uBAAuB,QAAQ,iBAAiB","names":["ComboboxProvider","ListboxProvider","useComboboxContextValues","useListboxContextValues","Listbox","listboxClassNames","renderListbox_unstable","useListboxStyles_unstable","useListbox_unstable","Option","optionClassNames","renderOption_unstable","useOptionStyles_unstable","useOption_unstable","Combobox","comboboxClassNames","renderCombobox_unstable","useComboboxStyles_unstable","useCombobox_unstable","Dropdown","dropdownClassNames","renderDropdown_unstable","useDropdownStyles_unstable","useDropdown_unstable","OptionGroup","optionGroupClassNames","renderOptionGroup_unstable","useOptionGroupStyles_unstable","useOptionGroup_unstable","ComboboxField","ComboboxField_unstable","comboboxFieldClassNames"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/index.ts"],"sourcesContent":["export { ComboboxProvider } from './contexts/ComboboxContext';\nexport type { ComboboxContextValue } from './contexts/ComboboxContext';\nexport { ListboxProvider } from './contexts/ListboxContext';\nexport type { ListboxContextValue } from './contexts/ListboxContext';\nexport { useComboboxContextValues } from './contexts/useComboboxContextValues';\nexport { useListboxContextValues } from './contexts/useListboxContextValues';\nexport {\n  Listbox,\n  listboxClassNames,\n  renderListbox_unstable,\n  useListboxStyles_unstable,\n  useListbox_unstable,\n} from './Listbox';\nexport type { ListboxContextValues, ListboxProps, ListboxSlots, ListboxState } from './Listbox';\nexport {\n  Option,\n  optionClassNames,\n  renderOption_unstable,\n  useOptionStyles_unstable,\n  useOption_unstable,\n} from './Option';\nexport type { OptionProps, OptionSlots, OptionState } from './Option';\nexport {\n  Combobox,\n  comboboxClassNames,\n  renderCombobox_unstable,\n  useComboboxStyles_unstable,\n  useCombobox_unstable,\n} from './Combobox';\nexport type {\n  ComboboxContextValues,\n  ComboboxOpenChangeData,\n  ComboboxOpenEvents,\n  ComboboxProps,\n  ComboboxSlots,\n  ComboboxState,\n} from './Combobox';\nexport {\n  Dropdown,\n  dropdownClassNames,\n  renderDropdown_unstable,\n  useDropdownStyles_unstable,\n  useDropdown_unstable,\n} from './Dropdown';\nexport type {\n  DropdownContextValues,\n  DropdownOpenChangeData,\n  DropdownOpenEvents,\n  DropdownProps,\n  DropdownSlots,\n  DropdownState,\n} from './Dropdown';\nexport {\n  OptionGroup,\n  optionGroupClassNames,\n  renderOptionGroup_unstable,\n  useOptionGroupStyles_unstable,\n  useOptionGroup_unstable,\n} from './OptionGroup';\nexport type { OptionGroupProps, OptionGroupSlots, OptionGroupState } from './OptionGroup';\n\nexport { ComboboxField as ComboboxField_unstable, comboboxFieldClassNames } from './ComboboxField';\nexport type { ComboboxFieldProps as ComboboxFieldProps_unstable } from './ComboboxField';\n"]}
+{"version":3,"mappings":"AAAA,SAASA,gBAAgB,QAAQ,4BAA4B;AAE7D,SAASC,eAAe,QAAQ,2BAA2B;AAE3D,SAASC,wBAAwB,QAAQ,qCAAqC;AAC9E,SAASC,uBAAuB,QAAQ,oCAAoC;AAC5E,SACEC,OAAO,EACPC,iBAAiB,EACjBC,sBAAsB,EACtBC,yBAAyB,EACzBC,mBAAmB,QACd,WAAW;AAElB,SACEC,MAAM,EACNC,gBAAgB,EAChBC,qBAAqB,EACrBC,wBAAwB,EACxBC,kBAAkB,QACb,UAAU;AAEjB,SACEC,QAAQ,EACRC,kBAAkB,EAClBC,uBAAuB,EACvBC,0BAA0B,EAC1BC,oBAAoB,QACf,YAAY;AASnB,SACEC,QAAQ,EACRC,kBAAkB,EAClBC,uBAAuB,EACvBC,0BAA0B,EAC1BC,oBAAoB,QACf,YAAY;AASnB,SACEC,WAAW,EACXC,qBAAqB,EACrBC,0BAA0B,EAC1BC,6BAA6B,EAC7BC,uBAAuB,QAClB,eAAe;AAGtB;AACA,SAASC,aAAa,IAAIC,sBAAsB,EAAEC,uBAAuB,QAAQ,iBAAiB","names":["ComboboxProvider","ListboxProvider","useComboboxContextValues","useListboxContextValues","Listbox","listboxClassNames","renderListbox_unstable","useListboxStyles_unstable","useListbox_unstable","Option","optionClassNames","renderOption_unstable","useOptionStyles_unstable","useOption_unstable","Combobox","comboboxClassNames","renderCombobox_unstable","useComboboxStyles_unstable","useCombobox_unstable","Dropdown","dropdownClassNames","renderDropdown_unstable","useDropdownStyles_unstable","useDropdown_unstable","OptionGroup","optionGroupClassNames","renderOptionGroup_unstable","useOptionGroupStyles_unstable","useOptionGroup_unstable","ComboboxField","ComboboxField_unstable","comboboxFieldClassNames"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/index.ts"],"sourcesContent":["export { ComboboxProvider } from './contexts/ComboboxContext';\nexport type { ComboboxContextValue } from './contexts/ComboboxContext';\nexport { ListboxProvider } from './contexts/ListboxContext';\nexport type { ListboxContextValue } from './contexts/ListboxContext';\nexport { useComboboxContextValues } from './contexts/useComboboxContextValues';\nexport { useListboxContextValues } from './contexts/useListboxContextValues';\nexport {\n  Listbox,\n  listboxClassNames,\n  renderListbox_unstable,\n  useListboxStyles_unstable,\n  useListbox_unstable,\n} from './Listbox';\nexport type { ListboxContextValues, ListboxProps, ListboxSlots, ListboxState } from './Listbox';\nexport {\n  Option,\n  optionClassNames,\n  renderOption_unstable,\n  useOptionStyles_unstable,\n  useOption_unstable,\n} from './Option';\nexport type { OptionProps, OptionSlots, OptionState } from './Option';\nexport {\n  Combobox,\n  comboboxClassNames,\n  renderCombobox_unstable,\n  useComboboxStyles_unstable,\n  useCombobox_unstable,\n} from './Combobox';\nexport type {\n  ComboboxContextValues,\n  ComboboxOpenChangeData,\n  ComboboxOpenEvents,\n  ComboboxProps,\n  ComboboxSlots,\n  ComboboxState,\n} from './Combobox';\nexport {\n  Dropdown,\n  dropdownClassNames,\n  renderDropdown_unstable,\n  useDropdownStyles_unstable,\n  useDropdown_unstable,\n} from './Dropdown';\nexport type {\n  DropdownContextValues,\n  DropdownOpenChangeData,\n  DropdownOpenEvents,\n  DropdownProps,\n  DropdownSlots,\n  DropdownState,\n} from './Dropdown';\nexport {\n  OptionGroup,\n  optionGroupClassNames,\n  renderOptionGroup_unstable,\n  useOptionGroupStyles_unstable,\n  useOptionGroup_unstable,\n} from './OptionGroup';\nexport type { OptionGroupProps, OptionGroupSlots, OptionGroupState } from './OptionGroup';\n\n// eslint-disable-next-line deprecation/deprecation\nexport { ComboboxField as ComboboxField_unstable, comboboxFieldClassNames } from './ComboboxField';\n// eslint-disable-next-line deprecation/deprecation\nexport type { ComboboxFieldProps as ComboboxFieldProps_unstable } from './ComboboxField';\n"]}

package/lib/utils/useComboboxBaseState.js

@@ -8,6 +8,7 @@ import { useSelection } from '../utils/useSelection';
 export const useComboboxBaseState = props => {
   const {
     appearance = 'outline',
+    children,
     editable = false,
     inlinePopup = false,
     multiselect,
@@ -63,7 +64,7 @@ export const useComboboxBaseState = props => {
     });
     setOpenState(newState);
   }, [onOpenChange, setOpenState]);
-  // update active option based on change in open state
+  // update active option based on change in open state or children
   React.useEffect(() => {
     if (open && !activeOption) {
       // if it is single-select and there is a selected option, start at the selected option
@@ -79,9 +80,9 @@ export const useComboboxBaseState = props => {
       // reset the active option when closing
       setActiveOption(undefined);
     }
-    // this should only be run in response to changes in the open state
+    // this should only be run in response to changes in the open state or children
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [open]);
+  }, [open, children]);
   return {
     ...optionCollection,
     ...selectionState,

package/lib/utils/useComboboxBaseState.js.map

@@ -1 +1 @@
-{"version":3,"mappings":"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","names":["React","useControllableState","useFirstMount","useOptionCollection","useSelection","useComboboxBaseState","props","appearance","editable","inlinePopup","multiselect","onOpenChange","size","optionCollection","getOptionAtIndex","getOptionsMatchingText","activeOption","setActiveOption","useState","focusVisible","setFocusVisible","hasFocus","setHasFocus","ignoreNextBlur","useRef","selectionState","selectedOptions","isFirstMount","controllableValue","setValue","state","value","initialState","undefined","useMemo","defaultValue","join","open","setOpenState","defaultState","defaultOpen","setOpen","useCallback","event","newState","useEffect","length","selectedOption","v","pop"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/utils/useComboboxBaseState.ts"],"sourcesContent":["import * as React from 'react';\nimport { useControllableState, useFirstMount } from '@fluentui/react-utilities';\nimport { useOptionCollection } from '../utils/useOptionCollection';\nimport { OptionValue } from '../utils/OptionCollection.types';\nimport { useSelection } from '../utils/useSelection';\nimport type { ComboboxBaseProps, ComboboxBaseOpenEvents, ComboboxBaseState } from './ComboboxBase.types';\n\n/**\n * State shared between Combobox and Dropdown components\n */\nexport const useComboboxBaseState = (props: ComboboxBaseProps & { editable?: boolean }): ComboboxBaseState => {\n  const {\n    appearance = 'outline',\n    editable = false,\n    inlinePopup = false,\n    multiselect,\n    onOpenChange,\n    size = 'medium',\n  } = props;\n\n  const optionCollection = useOptionCollection();\n  const { getOptionAtIndex, getOptionsMatchingText } = optionCollection;\n\n  const [activeOption, setActiveOption] = React.useState<OptionValue | undefined>();\n\n  // track whether keyboard focus outline should be shown\n  // tabster/keyborg doesn't work here, since the actual keyboard focus target doesn't move\n  const [focusVisible, setFocusVisible] = React.useState(false);\n\n  // track focused state to conditionally render collapsed listbox\n  const [hasFocus, setHasFocus] = React.useState(false);\n\n  const ignoreNextBlur = React.useRef(false);\n\n  const selectionState = useSelection(props);\n  const { selectedOptions } = selectionState;\n\n  // calculate value based on props, internal value changes, and selected options\n  const isFirstMount = useFirstMount();\n  const [controllableValue, setValue] = useControllableState({\n    state: props.value,\n    initialState: undefined,\n  });\n\n  const value = React.useMemo(() => {\n    // don't compute the value if it is defined through props or setValue,\n    if (controllableValue !== undefined) {\n      return controllableValue;\n    }\n\n    // handle defaultValue here, so it is overridden by selection\n    if (isFirstMount && props.defaultValue !== undefined) {\n      return props.defaultValue;\n    }\n\n    if (multiselect) {\n      // editable inputs should not display multiple selected options in the input as text\n      return editable ? '' : selectedOptions.join(', ');\n    }\n\n    return selectedOptions[0];\n  }, [controllableValue, editable, isFirstMount, multiselect, props.defaultValue, selectedOptions]);\n\n  // Handle open state, which is shared with options in context\n  const [open, setOpenState] = useControllableState({\n    state: props.open,\n    defaultState: props.defaultOpen,\n    initialState: false,\n  });\n\n  const setOpen = React.useCallback(\n    (event: ComboboxBaseOpenEvents, newState: boolean) => {\n      onOpenChange?.(event, { open: newState });\n      setOpenState(newState);\n    },\n    [onOpenChange, setOpenState],\n  );\n\n  // update active option based on change in open state\n  React.useEffect(() => {\n    if (open && !activeOption) {\n      // if it is single-select and there is a selected option, start at the selected option\n      if (!multiselect && selectedOptions.length > 0) {\n        const selectedOption = getOptionsMatchingText(v => v === selectedOptions[0]).pop();\n        selectedOption && setActiveOption(selectedOption);\n      }\n      // default to starting at the first option\n      else {\n        setActiveOption(getOptionAtIndex(0));\n      }\n    } else if (!open) {\n      // reset the active option when closing\n      setActiveOption(undefined);\n    }\n    // this should only be run in response to changes in the open state\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [open]);\n\n  return {\n    ...optionCollection,\n    ...selectionState,\n    activeOption,\n    appearance,\n    focusVisible,\n    hasFocus,\n    ignoreNextBlur,\n    inlinePopup,\n    open,\n    setActiveOption,\n    setFocusVisible,\n    setHasFocus,\n    setOpen,\n    setValue,\n    size,\n    value,\n  };\n};\n"]}
+{"version":3,"mappings":"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","names":["React","useControllableState","useFirstMount","useOptionCollection","useSelection","useComboboxBaseState","props","appearance","children","editable","inlinePopup","multiselect","onOpenChange","size","optionCollection","getOptionAtIndex","getOptionsMatchingText","activeOption","setActiveOption","useState","focusVisible","setFocusVisible","hasFocus","setHasFocus","ignoreNextBlur","useRef","selectionState","selectedOptions","isFirstMount","controllableValue","setValue","state","value","initialState","undefined","useMemo","defaultValue","join","open","setOpenState","defaultState","defaultOpen","setOpen","useCallback","event","newState","useEffect","length","selectedOption","v","pop"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/utils/useComboboxBaseState.ts"],"sourcesContent":["import * as React from 'react';\nimport { useControllableState, useFirstMount } from '@fluentui/react-utilities';\nimport { useOptionCollection } from '../utils/useOptionCollection';\nimport { OptionValue } from '../utils/OptionCollection.types';\nimport { useSelection } from '../utils/useSelection';\nimport type { ComboboxBaseProps, ComboboxBaseOpenEvents, ComboboxBaseState } from './ComboboxBase.types';\n\n/**\n * State shared between Combobox and Dropdown components\n */\nexport const useComboboxBaseState = (\n  props: ComboboxBaseProps & { children?: React.ReactNode; editable?: boolean },\n): ComboboxBaseState => {\n  const {\n    appearance = 'outline',\n    children,\n    editable = false,\n    inlinePopup = false,\n    multiselect,\n    onOpenChange,\n    size = 'medium',\n  } = props;\n\n  const optionCollection = useOptionCollection();\n  const { getOptionAtIndex, getOptionsMatchingText } = optionCollection;\n\n  const [activeOption, setActiveOption] = React.useState<OptionValue | undefined>();\n\n  // track whether keyboard focus outline should be shown\n  // tabster/keyborg doesn't work here, since the actual keyboard focus target doesn't move\n  const [focusVisible, setFocusVisible] = React.useState(false);\n\n  // track focused state to conditionally render collapsed listbox\n  const [hasFocus, setHasFocus] = React.useState(false);\n\n  const ignoreNextBlur = React.useRef(false);\n\n  const selectionState = useSelection(props);\n  const { selectedOptions } = selectionState;\n\n  // calculate value based on props, internal value changes, and selected options\n  const isFirstMount = useFirstMount();\n  const [controllableValue, setValue] = useControllableState({\n    state: props.value,\n    initialState: undefined,\n  });\n\n  const value = React.useMemo(() => {\n    // don't compute the value if it is defined through props or setValue,\n    if (controllableValue !== undefined) {\n      return controllableValue;\n    }\n\n    // handle defaultValue here, so it is overridden by selection\n    if (isFirstMount && props.defaultValue !== undefined) {\n      return props.defaultValue;\n    }\n\n    if (multiselect) {\n      // editable inputs should not display multiple selected options in the input as text\n      return editable ? '' : selectedOptions.join(', ');\n    }\n\n    return selectedOptions[0];\n  }, [controllableValue, editable, isFirstMount, multiselect, props.defaultValue, selectedOptions]);\n\n  // Handle open state, which is shared with options in context\n  const [open, setOpenState] = useControllableState({\n    state: props.open,\n    defaultState: props.defaultOpen,\n    initialState: false,\n  });\n\n  const setOpen = React.useCallback(\n    (event: ComboboxBaseOpenEvents, newState: boolean) => {\n      onOpenChange?.(event, { open: newState });\n      setOpenState(newState);\n    },\n    [onOpenChange, setOpenState],\n  );\n\n  // update active option based on change in open state or children\n  React.useEffect(() => {\n    if (open && !activeOption) {\n      // if it is single-select and there is a selected option, start at the selected option\n      if (!multiselect && selectedOptions.length > 0) {\n        const selectedOption = getOptionsMatchingText(v => v === selectedOptions[0]).pop();\n        selectedOption && setActiveOption(selectedOption);\n      }\n      // default to starting at the first option\n      else {\n        setActiveOption(getOptionAtIndex(0));\n      }\n    } else if (!open) {\n      // reset the active option when closing\n      setActiveOption(undefined);\n    }\n    // this should only be run in response to changes in the open state or children\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [open, children]);\n\n  return {\n    ...optionCollection,\n    ...selectionState,\n    activeOption,\n    appearance,\n    focusVisible,\n    hasFocus,\n    ignoreNextBlur,\n    inlinePopup,\n    open,\n    setActiveOption,\n    setFocusVisible,\n    setHasFocus,\n    setOpen,\n    setValue,\n    size,\n    value,\n  };\n};\n"]}

package/lib-commonjs/components/Combobox/useCombobox.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useCombobox_unstable = void 0;
 const React = /*#__PURE__*/require("react");
+const keyboard_keys_1 = /*#__PURE__*/require("@fluentui/keyboard-keys");
 const react_icons_1 = /*#__PURE__*/require("@fluentui/react-icons");
 const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
 const dropdownKeyActions_1 = /*#__PURE__*/require("../../utils/dropdownKeyActions");
@@ -59,6 +60,10 @@ const useCombobox_unstable = (props, ref) => {
   });
   const rootRef = React.useRef(null);
   const triggerRef = React.useRef(null);
+  // NVDA and JAWS have bugs that suppress reading the input value text when aria-activedescendant is set
+  // To prevent this, we clear the HTML attribute (but save the state) when a user presses left/right arrows
+  // ref: https://github.com/microsoft/fluentui/issues/26359#issuecomment-1397759888
+  const [hideActiveDescendant, setHideActiveDescendant] = React.useState(false);
   // calculate listbox width style based on trigger width
   const [popupDimensions, setPopupDimensions] = React.useState();
   React.useEffect(() => {
@@ -135,6 +140,12 @@ const useCombobox_unstable = (props, ref) => {
     if (!open && dropdownKeyActions_1.getDropdownActionFromKey(ev) === 'Type') {
       baseState.setOpen(ev, true);
     }
+    // clear activedescendant when moving the text insertion cursor
+    if (ev.key === keyboard_keys_1.ArrowLeft || ev.key === keyboard_keys_1.ArrowRight) {
+      setHideActiveDescendant(true);
+    } else {
+      setHideActiveDescendant(false);
+    }
   };
   // resolve input and listbox slot props
   let triggerSlot;
@@ -161,6 +172,9 @@ const useCombobox_unstable = (props, ref) => {
   }) : undefined;
   [triggerSlot, listboxSlot] = useComboboxPopup_1.useComboboxPopup(props, triggerSlot, listboxSlot);
   [triggerSlot, listboxSlot] = useTriggerListboxSlots_1.useTriggerListboxSlots(props, baseState, ref, triggerSlot, listboxSlot);
+  if (hideActiveDescendant) {
+    triggerSlot['aria-activedescendant'] = undefined;
+  }
   const state = {
     components: {
       root: 'div',

package/lib-commonjs/components/Combobox/useCombobox.js.map

@@ -1 +1 @@
-{"version":3,"mappings":"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","names":["useCombobox_unstable","props","ref","baseState","useComboboxBaseState_1","editable","activeOption","clearSelection","getIndexOfId","getOptionsMatchingText","hasFocus","open","selectOption","selectedOptions","setActiveOption","setFocusVisible","setOpen","setValue","value","disabled","freeform","inlinePopup","multiselect","comboId","react_utilities_1","primary","triggerNativeProps","root","rootNativeProps","primarySlotTagName","excludedPropNames","rootRef","React","useRef","triggerRef","popupDimensions","setPopupDimensions","useState","useEffect","width","current","clientWidth","getOptionFromInput","inputValue","searchString","trim","toLowerCase","length","matcher","optionText","indexOf","matches","startIndex","id","nextMatch","find","option","undefined","ev","onTriggerBlur","newState","onTriggerChange","target","matchingOption","onTriggerKeyDown","dropdownKeyActions_1","triggerSlot","listboxSlot","input","required","defaultProps","type","onChange","onBlur","onKeyDown","listbox","children","style","useComboboxPopup_1","useTriggerListboxSlots_1","state","components","expandIcon","Listbox_1","react_icons_1","role","onMouseDown","onIconMouseDown","onClick","onIconClick","onExpandIconMouseDown","ignoreNextBlur","onExpandIconClick","event","focus","hasExpandLabel","defaultOpenString","chevronId","chevronLabelledBy","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/components/Combobox/useCombobox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ChevronDownRegular as ChevronDownIcon } from '@fluentui/react-icons';\nimport {\n  getPartitionedNativeProps,\n  resolveShorthand,\n  mergeCallbacks,\n  useEventCallback,\n  useId,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';\nimport { useComboboxBaseState } from '../../utils/useComboboxBaseState';\nimport { useComboboxPopup } from '../../utils/useComboboxPopup';\nimport { useTriggerListboxSlots } from '../../utils/useTriggerListboxSlots';\nimport { Listbox } from '../Listbox/Listbox';\nimport type { Slot } from '@fluentui/react-utilities';\nimport type { SelectionEvents } from '../../utils/Selection.types';\nimport type { OptionValue } from '../../utils/OptionCollection.types';\nimport type { ComboboxProps, ComboboxState } from './Combobox.types';\n\n/**\n * Create the state required to render Combobox.\n *\n * The returned state can be modified with hooks such as useComboboxStyles_unstable,\n * before being passed to renderCombobox_unstable.\n *\n * @param props - props from this instance of Combobox\n * @param ref - reference to root HTMLElement of Combobox\n */\nexport const useCombobox_unstable = (props: ComboboxProps, ref: React.Ref<HTMLInputElement>): ComboboxState => {\n  const baseState = useComboboxBaseState({ ...props, editable: true });\n  const {\n    activeOption,\n    clearSelection,\n    getIndexOfId,\n    getOptionsMatchingText,\n    hasFocus,\n    open,\n    selectOption,\n    selectedOptions,\n    setActiveOption,\n    setFocusVisible,\n    setOpen,\n    setValue,\n    value,\n  } = baseState;\n  const { disabled, freeform, inlinePopup, multiselect } = props;\n  const comboId = useId('combobox-');\n\n  const { primary: triggerNativeProps, root: rootNativeProps } = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['children', 'size'],\n  });\n\n  const rootRef = React.useRef<HTMLDivElement>(null);\n  const triggerRef = React.useRef<HTMLInputElement>(null);\n\n  // calculate listbox width style based on trigger width\n  const [popupDimensions, setPopupDimensions] = React.useState<{ width: string }>();\n  React.useEffect(() => {\n    // only recalculate width when opening\n    if (open) {\n      const width = `${rootRef.current?.clientWidth}px`;\n      if (width !== popupDimensions?.width) {\n        setPopupDimensions({ width });\n      }\n    }\n  }, [open, popupDimensions]);\n\n  // set active option and selection based on typing\n  const getOptionFromInput = (inputValue: string): OptionValue | undefined => {\n    const searchString = inputValue?.trim().toLowerCase();\n\n    if (!searchString || searchString.length === 0) {\n      return;\n    }\n\n    const matcher = (optionText: string) => optionText.toLowerCase().indexOf(searchString) === 0;\n    const matches = getOptionsMatchingText(matcher);\n\n    // return first matching option after the current active option, looping back to the top\n    if (matches.length > 1 && activeOption) {\n      const startIndex = getIndexOfId(activeOption.id);\n      const nextMatch = matches.find(option => getIndexOfId(option.id) >= startIndex);\n      return nextMatch ?? matches[0];\n    }\n\n    return matches[0] ?? undefined;\n  };\n\n  /* Handle typed input */\n\n  // reset any typed value when an option is selected\n  baseState.selectOption = (ev: SelectionEvents, option: OptionValue) => {\n    setValue(undefined);\n    selectOption(ev, option);\n  };\n\n  const onTriggerBlur = (ev: React.FocusEvent<HTMLInputElement>) => {\n    // handle selection and updating value if freeform is false\n    if (!baseState.open && !freeform) {\n      // select matching option, if the value fully matches\n      if (value && activeOption && value.trim().toLowerCase() === activeOption?.value.toLowerCase()) {\n        baseState.selectOption(ev, activeOption);\n      }\n\n      // reset typed value when the input loses focus while collapsed, unless freeform is true\n      setValue(undefined);\n    }\n  };\n\n  baseState.setOpen = (ev, newState: boolean) => {\n    if (disabled) {\n      return;\n    }\n\n    if (!newState && !freeform) {\n      setValue(undefined);\n    }\n\n    setOpen(ev, newState);\n  };\n\n  // update value and active option based on input\n  const onTriggerChange = (ev: React.ChangeEvent<HTMLInputElement>) => {\n    const inputValue = ev.target.value;\n    // update uncontrolled value\n    baseState.setValue(inputValue);\n\n    // handle updating active option based on input\n    const matchingOption = getOptionFromInput(inputValue);\n    setActiveOption(matchingOption);\n\n    setFocusVisible(true);\n\n    // clear selection for single-select if the input value no longer matches the selection\n    if (\n      !multiselect &&\n      selectedOptions.length === 1 &&\n      (inputValue.length < 1 || selectedOptions[0].indexOf(inputValue) !== 0)\n    ) {\n      clearSelection(ev);\n    }\n  };\n\n  // open Combobox when typing\n  const onTriggerKeyDown = (ev: React.KeyboardEvent<HTMLInputElement>) => {\n    if (!open && getDropdownActionFromKey(ev) === 'Type') {\n      baseState.setOpen(ev, true);\n    }\n  };\n\n  // resolve input and listbox slot props\n  let triggerSlot: Slot<'input'>;\n  let listboxSlot: Slot<typeof Listbox> | undefined;\n\n  triggerSlot = resolveShorthand(props.input, {\n    required: true,\n    defaultProps: {\n      ref: useMergedRefs(props.input?.ref, triggerRef),\n      type: 'text',\n      value: value ?? '',\n      ...triggerNativeProps,\n    },\n  });\n\n  triggerSlot.onChange = mergeCallbacks(triggerSlot.onChange, onTriggerChange);\n  triggerSlot.onBlur = mergeCallbacks(triggerSlot.onBlur, onTriggerBlur);\n  triggerSlot.onKeyDown = mergeCallbacks(triggerSlot.onKeyDown, onTriggerKeyDown);\n\n  // only resolve listbox slot if needed\n  listboxSlot =\n    open || hasFocus\n      ? resolveShorthand(props.listbox, {\n          required: true,\n          defaultProps: {\n            children: props.children,\n            style: popupDimensions,\n          },\n        })\n      : undefined;\n\n  [triggerSlot, listboxSlot] = useComboboxPopup(props, triggerSlot, listboxSlot);\n  [triggerSlot, listboxSlot] = useTriggerListboxSlots(props, baseState, ref, triggerSlot, listboxSlot);\n\n  const state: ComboboxState = {\n    components: {\n      root: 'div',\n      input: 'input',\n      expandIcon: 'span',\n      listbox: Listbox,\n    },\n    root: resolveShorthand(props.root, {\n      required: true,\n      defaultProps: {\n        'aria-owns': !inlinePopup ? listboxSlot?.id : undefined,\n        ...rootNativeProps,\n      },\n    }),\n    input: triggerSlot,\n    listbox: listboxSlot,\n    expandIcon: resolveShorthand(props.expandIcon, {\n      required: true,\n      defaultProps: {\n        'aria-expanded': open,\n        children: <ChevronDownIcon />,\n        role: 'button',\n      },\n    }),\n    ...baseState,\n  };\n\n  state.root.ref = useMergedRefs(state.root.ref, rootRef);\n\n  /* handle open/close + focus change when clicking expandIcon */\n  const { onMouseDown: onIconMouseDown, onClick: onIconClick } = state.expandIcon || {};\n  const onExpandIconMouseDown = useEventCallback(\n    mergeCallbacks(onIconMouseDown, () => {\n      // do not dismiss on blur when closing via clicking the icon\n      if (open) {\n        baseState.ignoreNextBlur.current = true;\n      }\n    }),\n  );\n\n  const onExpandIconClick = useEventCallback(\n    mergeCallbacks(onIconClick, (event: React.MouseEvent<HTMLSpanElement>) => {\n      // open and set focus\n      state.setOpen(event, !state.open);\n      triggerRef.current?.focus();\n\n      // set focus visible=false, since this can only be done with the mouse/pointer\n      setFocusVisible(false);\n    }),\n  );\n\n  if (state.expandIcon) {\n    state.expandIcon.onMouseDown = onExpandIconMouseDown;\n    state.expandIcon.onClick = onExpandIconClick;\n\n    // If there is no explicit aria-label, calculate default accName attribute for expandIcon button,\n    // using the following steps:\n    // 1. If there is an aria-label, it is \"Open [aria-label]\"\n    // 2. If there is an aria-labelledby, it is \"Open [aria-labelledby target]\" (using aria-labelledby + ids)\n    // 3. If there is no aria-label/ledby attr, it falls back to \"Open\"\n    // We can't fall back to a label/htmlFor name because of https://github.com/w3c/accname/issues/179\n    const hasExpandLabel = state.expandIcon['aria-label'] || state.expandIcon['aria-labelledby'];\n    const defaultOpenString = 'Open'; // this is english-only since it is the fallback\n    if (!hasExpandLabel) {\n      if (props['aria-labelledby']) {\n        const chevronId = state.expandIcon.id ?? `${comboId}-chevron`;\n        const chevronLabelledBy = `${chevronId} ${state.input['aria-labelledby']}`;\n\n        state.expandIcon['aria-label'] = defaultOpenString;\n        state.expandIcon.id = chevronId;\n        state.expandIcon['aria-labelledby'] = chevronLabelledBy;\n      } else if (props['aria-label']) {\n        state.expandIcon['aria-label'] = `${defaultOpenString} ${props['aria-label']}`;\n      } else {\n        state.expandIcon['aria-label'] = defaultOpenString;\n      }\n    }\n  }\n\n  return state;\n};\n"]}
+{"version":3,"mappings":"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","names":["useCombobox_unstable","props","ref","baseState","useComboboxBaseState_1","editable","activeOption","clearSelection","getIndexOfId","getOptionsMatchingText","hasFocus","open","selectOption","selectedOptions","setActiveOption","setFocusVisible","setOpen","setValue","value","disabled","freeform","inlinePopup","multiselect","comboId","react_utilities_1","primary","triggerNativeProps","root","rootNativeProps","primarySlotTagName","excludedPropNames","rootRef","React","useRef","triggerRef","hideActiveDescendant","setHideActiveDescendant","useState","popupDimensions","setPopupDimensions","useEffect","width","current","clientWidth","getOptionFromInput","inputValue","searchString","trim","toLowerCase","length","matcher","optionText","indexOf","matches","startIndex","id","nextMatch","find","option","undefined","ev","onTriggerBlur","newState","onTriggerChange","target","matchingOption","onTriggerKeyDown","dropdownKeyActions_1","key","keyboard_keys_1","triggerSlot","listboxSlot","input","required","defaultProps","type","onChange","onBlur","onKeyDown","listbox","children","style","useComboboxPopup_1","useTriggerListboxSlots_1","state","components","expandIcon","Listbox_1","react_icons_1","role","onMouseDown","onIconMouseDown","onClick","onIconClick","onExpandIconMouseDown","ignoreNextBlur","onExpandIconClick","event","focus","hasExpandLabel","defaultOpenString","chevronId","chevronLabelledBy","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/components/Combobox/useCombobox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ArrowLeft, ArrowRight } from '@fluentui/keyboard-keys';\nimport { ChevronDownRegular as ChevronDownIcon } from '@fluentui/react-icons';\nimport {\n  getPartitionedNativeProps,\n  resolveShorthand,\n  mergeCallbacks,\n  useEventCallback,\n  useId,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';\nimport { useComboboxBaseState } from '../../utils/useComboboxBaseState';\nimport { useComboboxPopup } from '../../utils/useComboboxPopup';\nimport { useTriggerListboxSlots } from '../../utils/useTriggerListboxSlots';\nimport { Listbox } from '../Listbox/Listbox';\nimport type { Slot } from '@fluentui/react-utilities';\nimport type { SelectionEvents } from '../../utils/Selection.types';\nimport type { OptionValue } from '../../utils/OptionCollection.types';\nimport type { ComboboxProps, ComboboxState } from './Combobox.types';\n\n/**\n * Create the state required to render Combobox.\n *\n * The returned state can be modified with hooks such as useComboboxStyles_unstable,\n * before being passed to renderCombobox_unstable.\n *\n * @param props - props from this instance of Combobox\n * @param ref - reference to root HTMLElement of Combobox\n */\nexport const useCombobox_unstable = (props: ComboboxProps, ref: React.Ref<HTMLInputElement>): ComboboxState => {\n  const baseState = useComboboxBaseState({ ...props, editable: true });\n  const {\n    activeOption,\n    clearSelection,\n    getIndexOfId,\n    getOptionsMatchingText,\n    hasFocus,\n    open,\n    selectOption,\n    selectedOptions,\n    setActiveOption,\n    setFocusVisible,\n    setOpen,\n    setValue,\n    value,\n  } = baseState;\n  const { disabled, freeform, inlinePopup, multiselect } = props;\n  const comboId = useId('combobox-');\n\n  const { primary: triggerNativeProps, root: rootNativeProps } = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['children', 'size'],\n  });\n\n  const rootRef = React.useRef<HTMLDivElement>(null);\n  const triggerRef = React.useRef<HTMLInputElement>(null);\n\n  // NVDA and JAWS have bugs that suppress reading the input value text when aria-activedescendant is set\n  // To prevent this, we clear the HTML attribute (but save the state) when a user presses left/right arrows\n  // ref: https://github.com/microsoft/fluentui/issues/26359#issuecomment-1397759888\n  const [hideActiveDescendant, setHideActiveDescendant] = React.useState(false);\n\n  // calculate listbox width style based on trigger width\n  const [popupDimensions, setPopupDimensions] = React.useState<{ width: string }>();\n  React.useEffect(() => {\n    // only recalculate width when opening\n    if (open) {\n      const width = `${rootRef.current?.clientWidth}px`;\n      if (width !== popupDimensions?.width) {\n        setPopupDimensions({ width });\n      }\n    }\n  }, [open, popupDimensions]);\n\n  // set active option and selection based on typing\n  const getOptionFromInput = (inputValue: string): OptionValue | undefined => {\n    const searchString = inputValue?.trim().toLowerCase();\n\n    if (!searchString || searchString.length === 0) {\n      return;\n    }\n\n    const matcher = (optionText: string) => optionText.toLowerCase().indexOf(searchString) === 0;\n    const matches = getOptionsMatchingText(matcher);\n\n    // return first matching option after the current active option, looping back to the top\n    if (matches.length > 1 && activeOption) {\n      const startIndex = getIndexOfId(activeOption.id);\n      const nextMatch = matches.find(option => getIndexOfId(option.id) >= startIndex);\n      return nextMatch ?? matches[0];\n    }\n\n    return matches[0] ?? undefined;\n  };\n\n  /* Handle typed input */\n\n  // reset any typed value when an option is selected\n  baseState.selectOption = (ev: SelectionEvents, option: OptionValue) => {\n    setValue(undefined);\n    selectOption(ev, option);\n  };\n\n  const onTriggerBlur = (ev: React.FocusEvent<HTMLInputElement>) => {\n    // handle selection and updating value if freeform is false\n    if (!baseState.open && !freeform) {\n      // select matching option, if the value fully matches\n      if (value && activeOption && value.trim().toLowerCase() === activeOption?.value.toLowerCase()) {\n        baseState.selectOption(ev, activeOption);\n      }\n\n      // reset typed value when the input loses focus while collapsed, unless freeform is true\n      setValue(undefined);\n    }\n  };\n\n  baseState.setOpen = (ev, newState: boolean) => {\n    if (disabled) {\n      return;\n    }\n\n    if (!newState && !freeform) {\n      setValue(undefined);\n    }\n\n    setOpen(ev, newState);\n  };\n\n  // update value and active option based on input\n  const onTriggerChange = (ev: React.ChangeEvent<HTMLInputElement>) => {\n    const inputValue = ev.target.value;\n    // update uncontrolled value\n    baseState.setValue(inputValue);\n\n    // handle updating active option based on input\n    const matchingOption = getOptionFromInput(inputValue);\n    setActiveOption(matchingOption);\n\n    setFocusVisible(true);\n\n    // clear selection for single-select if the input value no longer matches the selection\n    if (\n      !multiselect &&\n      selectedOptions.length === 1 &&\n      (inputValue.length < 1 || selectedOptions[0].indexOf(inputValue) !== 0)\n    ) {\n      clearSelection(ev);\n    }\n  };\n\n  // open Combobox when typing\n  const onTriggerKeyDown = (ev: React.KeyboardEvent<HTMLInputElement>) => {\n    if (!open && getDropdownActionFromKey(ev) === 'Type') {\n      baseState.setOpen(ev, true);\n    }\n\n    // clear activedescendant when moving the text insertion cursor\n    if (ev.key === ArrowLeft || ev.key === ArrowRight) {\n      setHideActiveDescendant(true);\n    } else {\n      setHideActiveDescendant(false);\n    }\n  };\n\n  // resolve input and listbox slot props\n  let triggerSlot: Slot<'input'>;\n  let listboxSlot: Slot<typeof Listbox> | undefined;\n\n  triggerSlot = resolveShorthand(props.input, {\n    required: true,\n    defaultProps: {\n      ref: useMergedRefs(props.input?.ref, triggerRef),\n      type: 'text',\n      value: value ?? '',\n      ...triggerNativeProps,\n    },\n  });\n\n  triggerSlot.onChange = mergeCallbacks(triggerSlot.onChange, onTriggerChange);\n  triggerSlot.onBlur = mergeCallbacks(triggerSlot.onBlur, onTriggerBlur);\n  triggerSlot.onKeyDown = mergeCallbacks(triggerSlot.onKeyDown, onTriggerKeyDown);\n\n  // only resolve listbox slot if needed\n  listboxSlot =\n    open || hasFocus\n      ? resolveShorthand(props.listbox, {\n          required: true,\n          defaultProps: {\n            children: props.children,\n            style: popupDimensions,\n          },\n        })\n      : undefined;\n\n  [triggerSlot, listboxSlot] = useComboboxPopup(props, triggerSlot, listboxSlot);\n  [triggerSlot, listboxSlot] = useTriggerListboxSlots(props, baseState, ref, triggerSlot, listboxSlot);\n\n  if (hideActiveDescendant) {\n    triggerSlot['aria-activedescendant'] = undefined;\n  }\n\n  const state: ComboboxState = {\n    components: {\n      root: 'div',\n      input: 'input',\n      expandIcon: 'span',\n      listbox: Listbox,\n    },\n    root: resolveShorthand(props.root, {\n      required: true,\n      defaultProps: {\n        'aria-owns': !inlinePopup ? listboxSlot?.id : undefined,\n        ...rootNativeProps,\n      },\n    }),\n    input: triggerSlot,\n    listbox: listboxSlot,\n    expandIcon: resolveShorthand(props.expandIcon, {\n      required: true,\n      defaultProps: {\n        'aria-expanded': open,\n        children: <ChevronDownIcon />,\n        role: 'button',\n      },\n    }),\n    ...baseState,\n  };\n\n  state.root.ref = useMergedRefs(state.root.ref, rootRef);\n\n  /* handle open/close + focus change when clicking expandIcon */\n  const { onMouseDown: onIconMouseDown, onClick: onIconClick } = state.expandIcon || {};\n  const onExpandIconMouseDown = useEventCallback(\n    mergeCallbacks(onIconMouseDown, () => {\n      // do not dismiss on blur when closing via clicking the icon\n      if (open) {\n        baseState.ignoreNextBlur.current = true;\n      }\n    }),\n  );\n\n  const onExpandIconClick = useEventCallback(\n    mergeCallbacks(onIconClick, (event: React.MouseEvent<HTMLSpanElement>) => {\n      // open and set focus\n      state.setOpen(event, !state.open);\n      triggerRef.current?.focus();\n\n      // set focus visible=false, since this can only be done with the mouse/pointer\n      setFocusVisible(false);\n    }),\n  );\n\n  if (state.expandIcon) {\n    state.expandIcon.onMouseDown = onExpandIconMouseDown;\n    state.expandIcon.onClick = onExpandIconClick;\n\n    // If there is no explicit aria-label, calculate default accName attribute for expandIcon button,\n    // using the following steps:\n    // 1. If there is an aria-label, it is \"Open [aria-label]\"\n    // 2. If there is an aria-labelledby, it is \"Open [aria-labelledby target]\" (using aria-labelledby + ids)\n    // 3. If there is no aria-label/ledby attr, it falls back to \"Open\"\n    // We can't fall back to a label/htmlFor name because of https://github.com/w3c/accname/issues/179\n    const hasExpandLabel = state.expandIcon['aria-label'] || state.expandIcon['aria-labelledby'];\n    const defaultOpenString = 'Open'; // this is english-only since it is the fallback\n    if (!hasExpandLabel) {\n      if (props['aria-labelledby']) {\n        const chevronId = state.expandIcon.id ?? `${comboId}-chevron`;\n        const chevronLabelledBy = `${chevronId} ${state.input['aria-labelledby']}`;\n\n        state.expandIcon['aria-label'] = defaultOpenString;\n        state.expandIcon.id = chevronId;\n        state.expandIcon['aria-labelledby'] = chevronLabelledBy;\n      } else if (props['aria-label']) {\n        state.expandIcon['aria-label'] = `${defaultOpenString} ${props['aria-label']}`;\n      } else {\n        state.expandIcon['aria-label'] = defaultOpenString;\n      }\n    }\n  }\n\n  return state;\n};\n"]}

package/lib-commonjs/components/Combobox/useComboboxStyles.js

@@ -67,7 +67,14 @@ const useStyles = /*#__PURE__*/react_1.__styles({
     B9ooomg: "f1x58t8o",
     Bercvud: "f1ibeo51"
   },
-  listbox: {},
+  listbox: {
+    E5pizo: "f1hg901r",
+    Bbmb7ep: ["f1aa9q02", "f16jpd5f"],
+    Beyfa6y: ["f16jpd5f", "f1aa9q02"],
+    B7oj6ja: ["f1jar5jt", "fyu767a"],
+    Btl43ni: ["fyu767a", "f1jar5jt"],
+    Bxyxcbc: "fmmk62d"
+  },
   listboxCollapsed: {
     mc9l5x: "fjseox"
   },
@@ -168,7 +175,7 @@ const useStyles = /*#__PURE__*/react_1.__styles({
     n51gp8: ["f14g86mu", "f1rvyvqg"]
   }
 }, {
-  d: [".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f1ewtqcl{box-sizing:border-box;}", ".f14mj54c{-webkit-column-gap:var(--spacingHorizontalXXS);column-gap:var(--spacingHorizontalXXS);}", ".fwk3njj{display:inline-grid;}", ".fz17x9o{grid-template-columns:1fr auto;}", ".f1869bpl{-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;}", ".f1exfvgq{min-width:250px;}", ".f10pi13n{position:relative;}", ".f1gw3sf2::after{box-sizing:border-box;}", ".f13zj6fq::after{content:\"\";}", ".f1mdlcz9::after{position:absolute;}", ".f1a7op3::after{left:-1px;}", ".f1cjjd47::after{right:-1px;}", ".f1gboi2j::after{bottom:-1px;}", ".f145g4dw::after{height:max(2px, var(--borderRadiusMedium));}", ".f1kp91vd::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1ibwz09::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f14pi962::after{border-bottom-width:var(--strokeWidthThick);}", ".f1lh990p::after{border-bottom-style:solid;}", ".f1jc6hxc::after{border-bottom-color:var(--colorCompoundBrandStroke);}", ".f13evtba::after{-webkit-clip-path:inset(calc(100% - 2px) 0 0 0);clip-path:inset(calc(100% - 2px) 0 0 0);}", ".f1yk9hq::after{-webkit-transform:scaleX(0);-moz-transform:scaleX(0);-ms-transform:scaleX(0);transform:scaleX(0);}", ".fhwpy7i::after{transition-property:transform;}", ".f14ee0xe::after{transition-duration:var(--durationUltraFast);}", ".f1xhbsuh::after{transition-delay:var(--curveAccelerateMid);}", ".fjseox{display:none;}", ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}", ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}", ".f11gcy0p{padding-right:var(--spacingHorizontalMNudge);}", ".f1ng84yb{padding-left:var(--spacingHorizontalMNudge);}", ".f1rjii52{-webkit-column-gap:var(--spacingHorizontalSNudge);column-gap:var(--spacingHorizontalSNudge);}", ".fw5db7e{padding-right:var(--spacingHorizontalM);}", ".f1uw59to{padding-left:var(--spacingHorizontalM);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1c1zstj{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f1krrbdw{border-bottom-right-radius:0;}", ".f1deotkl{border-bottom-left-radius:0;}", ".f10ostut{border-top-right-radius:0;}", ".f1ozlkrg{border-top-left-radius:0;}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".f16xq7d1{background-color:var(--colorNeutralBackground3);}", ".fs4k3qj:not(:focus-within),.fs4k3qj:hover:not(:focus-within){border-top-color:var(--colorPaletteRedBorder2);}", ".fcee079:not(:focus-within),.fcee079:hover:not(:focus-within){border-right-color:var(--colorPaletteRedBorder2);}", ".fmyw78r:not(:focus-within),.fmyw78r:hover:not(:focus-within){border-left-color:var(--colorPaletteRedBorder2);}", ".f1fgmyf4:not(:focus-within),.f1fgmyf4:hover:not(:focus-within){border-bottom-color:var(--colorPaletteRedBorder2);}", ".fdrzuqr{cursor:not-allowed;}", ".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}"],
+  d: [".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f1ewtqcl{box-sizing:border-box;}", ".f14mj54c{-webkit-column-gap:var(--spacingHorizontalXXS);column-gap:var(--spacingHorizontalXXS);}", ".fwk3njj{display:inline-grid;}", ".fz17x9o{grid-template-columns:1fr auto;}", ".f1869bpl{-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;}", ".f1exfvgq{min-width:250px;}", ".f10pi13n{position:relative;}", ".f1gw3sf2::after{box-sizing:border-box;}", ".f13zj6fq::after{content:\"\";}", ".f1mdlcz9::after{position:absolute;}", ".f1a7op3::after{left:-1px;}", ".f1cjjd47::after{right:-1px;}", ".f1gboi2j::after{bottom:-1px;}", ".f145g4dw::after{height:max(2px, var(--borderRadiusMedium));}", ".f1kp91vd::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1ibwz09::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f14pi962::after{border-bottom-width:var(--strokeWidthThick);}", ".f1lh990p::after{border-bottom-style:solid;}", ".f1jc6hxc::after{border-bottom-color:var(--colorCompoundBrandStroke);}", ".f13evtba::after{-webkit-clip-path:inset(calc(100% - 2px) 0 0 0);clip-path:inset(calc(100% - 2px) 0 0 0);}", ".f1yk9hq::after{-webkit-transform:scaleX(0);-moz-transform:scaleX(0);-ms-transform:scaleX(0);transform:scaleX(0);}", ".fhwpy7i::after{transition-property:transform;}", ".f14ee0xe::after{transition-duration:var(--durationUltraFast);}", ".f1xhbsuh::after{transition-delay:var(--curveAccelerateMid);}", ".f1hg901r{box-shadow:var(--shadow16);}", ".fmmk62d{max-height:80vh;}", ".fjseox{display:none;}", ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}", ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}", ".f11gcy0p{padding-right:var(--spacingHorizontalMNudge);}", ".f1ng84yb{padding-left:var(--spacingHorizontalMNudge);}", ".f1rjii52{-webkit-column-gap:var(--spacingHorizontalSNudge);column-gap:var(--spacingHorizontalSNudge);}", ".fw5db7e{padding-right:var(--spacingHorizontalM);}", ".f1uw59to{padding-left:var(--spacingHorizontalM);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1c1zstj{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f1krrbdw{border-bottom-right-radius:0;}", ".f1deotkl{border-bottom-left-radius:0;}", ".f10ostut{border-top-right-radius:0;}", ".f1ozlkrg{border-top-left-radius:0;}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".f16xq7d1{background-color:var(--colorNeutralBackground3);}", ".fs4k3qj:not(:focus-within),.fs4k3qj:hover:not(:focus-within){border-top-color:var(--colorPaletteRedBorder2);}", ".fcee079:not(:focus-within),.fcee079:hover:not(:focus-within){border-right-color:var(--colorPaletteRedBorder2);}", ".fmyw78r:not(:focus-within),.fmyw78r:hover:not(:focus-within){border-left-color:var(--colorPaletteRedBorder2);}", ".f1fgmyf4:not(:focus-within),.f1fgmyf4:hover:not(:focus-within){border-bottom-color:var(--colorPaletteRedBorder2);}", ".fdrzuqr{cursor:not-allowed;}", ".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}"],
   w: [".f14a1fxs:focus-within{outline-width:2px;}", ".f3e99gv:focus-within{outline-style:solid;}", ".fhljsf7:focus-within{outline-color:transparent;}", ".fjw5xc1:focus-within::after{-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);transform:scaleX(1);}", ".f1xdyd5c:focus-within::after{transition-property:transform;}", ".fatpbeo:focus-within::after{transition-duration:var(--durationNormal);}", ".fb7uyps:focus-within::after{transition-delay:var(--curveDecelerateMid);}", ".f1ibeo51:focus-within:active::after{border-bottom-color:var(--colorCompoundBrandStrokePressed);}"],
   m: [["@media screen and (prefers-reduced-motion: reduce){.fv8e3ye::after{transition-duration:0.01ms;}}", {
     m: "screen and (prefers-reduced-motion: reduce)"

package/lib-commonjs/components/Combobox/useComboboxStyles.js.map

@@ -1 +1 @@
-{"version":3,"mappings":"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","names":["exports","root","input","expandIcon","listbox","fieldHeights","small","medium","large","useStyles","react_1","useInputStyles","useIconStyles","useComboboxStyles_unstable","state","appearance","open","size","invalid","disabled","styles","iconStyles","inputStyles","className","outlineInteractive","invalidUnderline","listboxCollapsed","icon"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/components/Combobox/useComboboxStyles.ts"],"sourcesContent":["import { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { iconSizes } from '../../utils/internalTokens';\nimport type { ComboboxSlots, ComboboxState } from './Combobox.types';\n\nexport const comboboxClassNames: SlotClassNames<ComboboxSlots> = {\n  root: 'fui-Combobox',\n  input: 'fui-Combobox__input',\n  expandIcon: 'fui-Combobox__expandIcon',\n  listbox: 'fui-Combobox__listbox',\n};\n\n// Matches internal heights for Select and Input, but there are no theme variables for these\n// field heights are 2px less than other controls, since the border is on the parent element.\nconst fieldHeights = {\n  small: '22px',\n  medium: '30px',\n  large: '38px',\n};\n\n/**\n * Styles for Combobox\n */\nconst useStyles = makeStyles({\n  root: {\n    alignItems: 'center',\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n    boxSizing: 'border-box',\n    columnGap: tokens.spacingHorizontalXXS,\n    display: 'inline-grid',\n    gridTemplateColumns: '1fr auto',\n    justifyContent: 'space-between',\n    minWidth: '250px',\n    position: 'relative',\n\n    // windows high contrast mode focus indicator\n    ':focus-within': {\n      outlineWidth: '2px',\n      outlineStyle: 'solid',\n      outlineColor: 'transparent',\n    },\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      ...shorthands.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\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\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\n  listbox: {},\n\n  listboxCollapsed: {\n    display: 'none',\n  },\n\n  // size variants\n  small: {\n    paddingRight: tokens.spacingHorizontalSNudge,\n  },\n  medium: {\n    paddingRight: tokens.spacingHorizontalMNudge,\n  },\n  large: {\n    columnGap: tokens.spacingHorizontalSNudge,\n    paddingRight: tokens.spacingHorizontalM,\n  },\n\n  // appearance variants\n  outline: {\n    backgroundColor: tokens.colorNeutralBackground1,\n    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1),\n    borderBottomColor: tokens.colorNeutralStrokeAccessible,\n  },\n\n  outlineInteractive: {\n    '&:hover': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n      borderBottomColor: tokens.colorNeutralStrokeAccessible,\n    },\n\n    '&:active': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n      borderBottomColor: tokens.colorNeutralStrokeAccessible,\n    },\n  },\n  underline: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStrokeAccessible),\n    ...shorthands.borderRadius(0),\n  },\n  'filled-lighter': {\n    backgroundColor: tokens.colorNeutralBackground1,\n    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStroke),\n  },\n  'filled-darker': {\n    backgroundColor: tokens.colorNeutralBackground3,\n    ...shorthands.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\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});\n\nconst useInputStyles = makeStyles({\n  input: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.border('0'),\n    color: tokens.colorNeutralForeground1,\n    fontFamily: tokens.fontFamilyBase,\n\n    '&:focus': {\n      outlineStyle: 'none',\n    },\n\n    '&::placeholder': {\n      color: tokens.colorNeutralForeground4,\n      opacity: 1,\n    },\n  },\n\n  // size variants\n  small: {\n    height: fieldHeights.small,\n    ...typographyStyles.caption1,\n    ...shorthands.padding(0, 0, 0, `calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`),\n  },\n  medium: {\n    height: fieldHeights.medium,\n    ...typographyStyles.body1,\n    ...shorthands.padding(0, 0, 0, `calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`),\n  },\n  large: {\n    height: fieldHeights.large,\n    ...typographyStyles.body2,\n    ...shorthands.padding(0, 0, 0, `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`),\n  },\n  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n    backgroundColor: tokens.colorTransparentBackground,\n    cursor: 'not-allowed',\n    '::placeholder': {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n});\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\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\n  // icon size variants\n  small: {\n    fontSize: iconSizes.small,\n    marginLeft: tokens.spacingHorizontalXXS,\n  },\n  medium: {\n    fontSize: iconSizes.medium,\n    marginLeft: tokens.spacingHorizontalXXS,\n  },\n  large: {\n    fontSize: iconSizes.large,\n    marginLeft: tokens.spacingHorizontalSNudge,\n  },\n  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n    cursor: 'not-allowed',\n  },\n});\n\n/**\n * Apply styling to the Combobox slots based on the state\n */\nexport const useComboboxStyles_unstable = (state: ComboboxState): ComboboxState => {\n  const { appearance, open, size } = state;\n  const invalid = `${state.input['aria-invalid']}` === 'true';\n  const disabled = state.input.disabled;\n  const styles = useStyles();\n  const iconStyles = useIconStyles();\n  const inputStyles = useInputStyles();\n\n  state.root.className = mergeClasses(\n    comboboxClassNames.root,\n    styles.root,\n    styles[appearance],\n    styles[size],\n    !disabled && appearance === 'outline' && styles.outlineInteractive,\n    invalid && appearance !== 'underline' && styles.invalid,\n    invalid && appearance === 'underline' && styles.invalidUnderline,\n    disabled && styles.disabled,\n    state.root.className,\n  );\n\n  state.input.className = mergeClasses(\n    comboboxClassNames.input,\n    inputStyles.input,\n    inputStyles[size],\n    disabled && inputStyles.disabled,\n    state.input.className,\n  );\n\n  if (state.listbox) {\n    state.listbox.className = mergeClasses(\n      comboboxClassNames.listbox,\n      styles.listbox,\n      !open && styles.listboxCollapsed,\n      state.listbox.className,\n    );\n  }\n\n  if (state.expandIcon) {\n    state.expandIcon.className = mergeClasses(\n      comboboxClassNames.expandIcon,\n      iconStyles.icon,\n      iconStyles[size],\n      disabled && iconStyles.disabled,\n      state.expandIcon.className,\n    );\n  }\n\n  return state;\n};\n"]}
+{"version":3,"mappings":"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","names":["exports","root","input","expandIcon","listbox","fieldHeights","small","medium","large","useStyles","react_1","useInputStyles","useIconStyles","useComboboxStyles_unstable","state","appearance","open","size","invalid","disabled","styles","iconStyles","inputStyles","className","outlineInteractive","invalidUnderline","listboxCollapsed","icon"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/components/Combobox/useComboboxStyles.ts"],"sourcesContent":["import { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { iconSizes } from '../../utils/internalTokens';\nimport type { ComboboxSlots, ComboboxState } from './Combobox.types';\n\nexport const comboboxClassNames: SlotClassNames<ComboboxSlots> = {\n  root: 'fui-Combobox',\n  input: 'fui-Combobox__input',\n  expandIcon: 'fui-Combobox__expandIcon',\n  listbox: 'fui-Combobox__listbox',\n};\n\n// Matches internal heights for Select and Input, but there are no theme variables for these\n// field heights are 2px less than other controls, since the border is on the parent element.\nconst fieldHeights = {\n  small: '22px',\n  medium: '30px',\n  large: '38px',\n};\n\n/**\n * Styles for Combobox\n */\nconst useStyles = makeStyles({\n  root: {\n    alignItems: 'center',\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n    boxSizing: 'border-box',\n    columnGap: tokens.spacingHorizontalXXS,\n    display: 'inline-grid',\n    gridTemplateColumns: '1fr auto',\n    justifyContent: 'space-between',\n    minWidth: '250px',\n    position: 'relative',\n\n    // windows high contrast mode focus indicator\n    ':focus-within': {\n      outlineWidth: '2px',\n      outlineStyle: 'solid',\n      outlineColor: 'transparent',\n    },\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      ...shorthands.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\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\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\n  listbox: {\n    boxShadow: `${tokens.shadow16}`,\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n    maxHeight: '80vh',\n  },\n\n  listboxCollapsed: {\n    display: 'none',\n  },\n\n  // size variants\n  small: {\n    paddingRight: tokens.spacingHorizontalSNudge,\n  },\n  medium: {\n    paddingRight: tokens.spacingHorizontalMNudge,\n  },\n  large: {\n    columnGap: tokens.spacingHorizontalSNudge,\n    paddingRight: tokens.spacingHorizontalM,\n  },\n\n  // appearance variants\n  outline: {\n    backgroundColor: tokens.colorNeutralBackground1,\n    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1),\n    borderBottomColor: tokens.colorNeutralStrokeAccessible,\n  },\n\n  outlineInteractive: {\n    '&:hover': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n      borderBottomColor: tokens.colorNeutralStrokeAccessible,\n    },\n\n    '&:active': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n      borderBottomColor: tokens.colorNeutralStrokeAccessible,\n    },\n  },\n  underline: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStrokeAccessible),\n    ...shorthands.borderRadius(0),\n  },\n  'filled-lighter': {\n    backgroundColor: tokens.colorNeutralBackground1,\n    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStroke),\n  },\n  'filled-darker': {\n    backgroundColor: tokens.colorNeutralBackground3,\n    ...shorthands.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\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});\n\nconst useInputStyles = makeStyles({\n  input: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.border('0'),\n    color: tokens.colorNeutralForeground1,\n    fontFamily: tokens.fontFamilyBase,\n\n    '&:focus': {\n      outlineStyle: 'none',\n    },\n\n    '&::placeholder': {\n      color: tokens.colorNeutralForeground4,\n      opacity: 1,\n    },\n  },\n\n  // size variants\n  small: {\n    height: fieldHeights.small,\n    ...typographyStyles.caption1,\n    ...shorthands.padding(0, 0, 0, `calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`),\n  },\n  medium: {\n    height: fieldHeights.medium,\n    ...typographyStyles.body1,\n    ...shorthands.padding(0, 0, 0, `calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`),\n  },\n  large: {\n    height: fieldHeights.large,\n    ...typographyStyles.body2,\n    ...shorthands.padding(0, 0, 0, `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`),\n  },\n  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n    backgroundColor: tokens.colorTransparentBackground,\n    cursor: 'not-allowed',\n    '::placeholder': {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n});\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\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\n  // icon size variants\n  small: {\n    fontSize: iconSizes.small,\n    marginLeft: tokens.spacingHorizontalXXS,\n  },\n  medium: {\n    fontSize: iconSizes.medium,\n    marginLeft: tokens.spacingHorizontalXXS,\n  },\n  large: {\n    fontSize: iconSizes.large,\n    marginLeft: tokens.spacingHorizontalSNudge,\n  },\n  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n    cursor: 'not-allowed',\n  },\n});\n\n/**\n * Apply styling to the Combobox slots based on the state\n */\nexport const useComboboxStyles_unstable = (state: ComboboxState): ComboboxState => {\n  const { appearance, open, size } = state;\n  const invalid = `${state.input['aria-invalid']}` === 'true';\n  const disabled = state.input.disabled;\n  const styles = useStyles();\n  const iconStyles = useIconStyles();\n  const inputStyles = useInputStyles();\n\n  state.root.className = mergeClasses(\n    comboboxClassNames.root,\n    styles.root,\n    styles[appearance],\n    styles[size],\n    !disabled && appearance === 'outline' && styles.outlineInteractive,\n    invalid && appearance !== 'underline' && styles.invalid,\n    invalid && appearance === 'underline' && styles.invalidUnderline,\n    disabled && styles.disabled,\n    state.root.className,\n  );\n\n  state.input.className = mergeClasses(\n    comboboxClassNames.input,\n    inputStyles.input,\n    inputStyles[size],\n    disabled && inputStyles.disabled,\n    state.input.className,\n  );\n\n  if (state.listbox) {\n    state.listbox.className = mergeClasses(\n      comboboxClassNames.listbox,\n      styles.listbox,\n      !open && styles.listboxCollapsed,\n      state.listbox.className,\n    );\n  }\n\n  if (state.expandIcon) {\n    state.expandIcon.className = mergeClasses(\n      comboboxClassNames.expandIcon,\n      iconStyles.icon,\n      iconStyles[size],\n      disabled && iconStyles.disabled,\n      state.expandIcon.className,\n    );\n  }\n\n  return state;\n};\n"]}