@fluentui/react-combobox 9.17.3 → 9.17.5

package/lib/Combobox.js

@@ -1 +1 @@
-export { Combobox, comboboxClassNames, renderCombobox_unstable, useComboboxStyles_unstable, useComboboxBase_unstable, useCombobox_unstable } from './components/Combobox/index';
+export { Combobox, comboboxClassNames, renderCombobox_unstable, useComboboxStyles_unstable, useComboboxBase_unstable, useCombobox_unstable } from "./components/Combobox/index.js";

package/lib/Combobox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Combobox.ts"],"sourcesContent":["export type {\n  ActiveOptionChangeData,\n  BaseComboboxProps,\n  BaseComboboxState,\n  ComboboxContextValues,\n  ComboboxOpenChangeData,\n  ComboboxOpenEvents,\n  ComboboxProps,\n  ComboboxSlots,\n  ComboboxState,\n} from './components/Combobox/index';\nexport {\n  Combobox,\n  comboboxClassNames,\n  renderCombobox_unstable,\n  useComboboxStyles_unstable,\n  useComboboxBase_unstable,\n  useCombobox_unstable,\n} from './components/Combobox/index';\n"],"names":["Combobox","comboboxClassNames","renderCombobox_unstable","useComboboxStyles_unstable","useComboboxBase_unstable","useCombobox_unstable"],"mappings":"AAWA,SACEA,QAAQ,EACRC,kBAAkB,EAClBC,uBAAuB,EACvBC,0BAA0B,EAC1BC,wBAAwB,EACxBC,oBAAoB,QACf,8BAA8B"}
+{"version":3,"sources":["../src/Combobox.ts"],"sourcesContent":["export type {\n  ActiveOptionChangeData,\n  BaseComboboxProps,\n  BaseComboboxState,\n  ComboboxContextValues,\n  ComboboxOpenChangeData,\n  ComboboxOpenEvents,\n  ComboboxProps,\n  ComboboxSlots,\n  ComboboxState,\n} from './components/Combobox/index';\nexport {\n  Combobox,\n  comboboxClassNames,\n  renderCombobox_unstable,\n  useComboboxStyles_unstable,\n  useComboboxBase_unstable,\n  useCombobox_unstable,\n} from './components/Combobox/index';\n"],"names":["Combobox","comboboxClassNames","renderCombobox_unstable","useComboboxStyles_unstable","useComboboxBase_unstable","useCombobox_unstable"],"mappings":"AAWA,SACEA,QAAQ,EACRC,kBAAkB,EAClBC,uBAAuB,EACvBC,0BAA0B,EAC1BC,wBAAwB,EACxBC,oBAAoB,QACf,iCAA8B"}

package/lib/Dropdown.js

@@ -1 +1 @@
-export { Dropdown, dropdownClassNames, renderDropdown_unstable, useDropdownStyles_unstable, useDropdownBase_unstable, useDropdown_unstable } from './components/Dropdown/index';
+export { Dropdown, dropdownClassNames, renderDropdown_unstable, useDropdownStyles_unstable, useDropdownBase_unstable, useDropdown_unstable } from "./components/Dropdown/index.js";

package/lib/Dropdown.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Dropdown.ts"],"sourcesContent":["export type {\n  ActiveOptionChangeData,\n  DropdownBaseHookProps,\n  DropdownBaseHookState,\n  DropdownContextValues,\n  DropdownOpenChangeData,\n  DropdownOpenEvents,\n  DropdownProps,\n  DropdownSlots,\n  DropdownState,\n} from './components/Dropdown/index';\nexport {\n  Dropdown,\n  dropdownClassNames,\n  renderDropdown_unstable,\n  useDropdownStyles_unstable,\n  useDropdownBase_unstable,\n  useDropdown_unstable,\n} from './components/Dropdown/index';\n"],"names":["Dropdown","dropdownClassNames","renderDropdown_unstable","useDropdownStyles_unstable","useDropdownBase_unstable","useDropdown_unstable"],"mappings":"AAWA,SACEA,QAAQ,EACRC,kBAAkB,EAClBC,uBAAuB,EACvBC,0BAA0B,EAC1BC,wBAAwB,EACxBC,oBAAoB,QACf,8BAA8B"}
+{"version":3,"sources":["../src/Dropdown.ts"],"sourcesContent":["export type {\n  ActiveOptionChangeData,\n  DropdownBaseHookProps,\n  DropdownBaseHookState,\n  DropdownContextValues,\n  DropdownOpenChangeData,\n  DropdownOpenEvents,\n  DropdownProps,\n  DropdownSlots,\n  DropdownState,\n} from './components/Dropdown/index';\nexport {\n  Dropdown,\n  dropdownClassNames,\n  renderDropdown_unstable,\n  useDropdownStyles_unstable,\n  useDropdownBase_unstable,\n  useDropdown_unstable,\n} from './components/Dropdown/index';\n"],"names":["Dropdown","dropdownClassNames","renderDropdown_unstable","useDropdownStyles_unstable","useDropdownBase_unstable","useDropdown_unstable"],"mappings":"AAWA,SACEA,QAAQ,EACRC,kBAAkB,EAClBC,uBAAuB,EACvBC,0BAA0B,EAC1BC,wBAAwB,EACxBC,oBAAoB,QACf,iCAA8B"}

package/lib/Listbox.js

@@ -1 +1 @@
-export { Listbox, listboxClassNames, renderListbox_unstable, useListboxStyles_unstable, useListbox_unstable } from './components/Listbox/index';
+export { Listbox, listboxClassNames, renderListbox_unstable, useListboxStyles_unstable, useListbox_unstable } from "./components/Listbox/index.js";

package/lib/Listbox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Listbox.ts"],"sourcesContent":["export type { ListboxContextValues, ListboxProps, ListboxSlots, ListboxState } from './components/Listbox/index';\nexport {\n  Listbox,\n  listboxClassNames,\n  renderListbox_unstable,\n  useListboxStyles_unstable,\n  useListbox_unstable,\n} from './components/Listbox/index';\n"],"names":["Listbox","listboxClassNames","renderListbox_unstable","useListboxStyles_unstable","useListbox_unstable"],"mappings":"AACA,SACEA,OAAO,EACPC,iBAAiB,EACjBC,sBAAsB,EACtBC,yBAAyB,EACzBC,mBAAmB,QACd,6BAA6B"}
+{"version":3,"sources":["../src/Listbox.ts"],"sourcesContent":["export type { ListboxContextValues, ListboxProps, ListboxSlots, ListboxState } from './components/Listbox/index';\nexport {\n  Listbox,\n  listboxClassNames,\n  renderListbox_unstable,\n  useListboxStyles_unstable,\n  useListbox_unstable,\n} from './components/Listbox/index';\n"],"names":["Listbox","listboxClassNames","renderListbox_unstable","useListboxStyles_unstable","useListbox_unstable"],"mappings":"AACA,SACEA,OAAO,EACPC,iBAAiB,EACjBC,sBAAsB,EACtBC,yBAAyB,EACzBC,mBAAmB,QACd,gCAA6B"}

package/lib/Option.js

@@ -1 +1 @@
-export { Option, optionClassNames, renderOption_unstable, useOptionStyles_unstable, useOption_unstable, useOptionBase_unstable } from './components/Option/index';
+export { Option, optionClassNames, renderOption_unstable, useOptionStyles_unstable, useOption_unstable, useOptionBase_unstable } from "./components/Option/index.js";

package/lib/Option.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Option.ts"],"sourcesContent":["export type { OptionProps, OptionSlots, OptionState } from './components/Option/index';\nexport {\n  Option,\n  optionClassNames,\n  renderOption_unstable,\n  useOptionStyles_unstable,\n  useOption_unstable,\n  useOptionBase_unstable,\n} from './components/Option/index';\n"],"names":["Option","optionClassNames","renderOption_unstable","useOptionStyles_unstable","useOption_unstable","useOptionBase_unstable"],"mappings":"AACA,SACEA,MAAM,EACNC,gBAAgB,EAChBC,qBAAqB,EACrBC,wBAAwB,EACxBC,kBAAkB,EAClBC,sBAAsB,QACjB,4BAA4B"}
+{"version":3,"sources":["../src/Option.ts"],"sourcesContent":["export type { OptionProps, OptionSlots, OptionState } from './components/Option/index';\nexport {\n  Option,\n  optionClassNames,\n  renderOption_unstable,\n  useOptionStyles_unstable,\n  useOption_unstable,\n  useOptionBase_unstable,\n} from './components/Option/index';\n"],"names":["Option","optionClassNames","renderOption_unstable","useOptionStyles_unstable","useOption_unstable","useOptionBase_unstable"],"mappings":"AACA,SACEA,MAAM,EACNC,gBAAgB,EAChBC,qBAAqB,EACrBC,wBAAwB,EACxBC,kBAAkB,EAClBC,sBAAsB,QACjB,+BAA4B"}

package/lib/OptionGroup.js

@@ -1 +1 @@
-export { OptionGroup, optionGroupClassNames, renderOptionGroup_unstable, useOptionGroupStyles_unstable, useOptionGroup_unstable } from './components/OptionGroup/index';
+export { OptionGroup, optionGroupClassNames, renderOptionGroup_unstable, useOptionGroupStyles_unstable, useOptionGroup_unstable } from "./components/OptionGroup/index.js";

package/lib/OptionGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/OptionGroup.ts"],"sourcesContent":["export type { OptionGroupProps, OptionGroupSlots, OptionGroupState } from './components/OptionGroup/index';\nexport {\n  OptionGroup,\n  optionGroupClassNames,\n  renderOptionGroup_unstable,\n  useOptionGroupStyles_unstable,\n  useOptionGroup_unstable,\n} from './components/OptionGroup/index';\n"],"names":["OptionGroup","optionGroupClassNames","renderOptionGroup_unstable","useOptionGroupStyles_unstable","useOptionGroup_unstable"],"mappings":"AACA,SACEA,WAAW,EACXC,qBAAqB,EACrBC,0BAA0B,EAC1BC,6BAA6B,EAC7BC,uBAAuB,QAClB,iCAAiC"}
+{"version":3,"sources":["../src/OptionGroup.ts"],"sourcesContent":["export type { OptionGroupProps, OptionGroupSlots, OptionGroupState } from './components/OptionGroup/index';\nexport {\n  OptionGroup,\n  optionGroupClassNames,\n  renderOptionGroup_unstable,\n  useOptionGroupStyles_unstable,\n  useOptionGroup_unstable,\n} from './components/OptionGroup/index';\n"],"names":["OptionGroup","optionGroupClassNames","renderOptionGroup_unstable","useOptionGroupStyles_unstable","useOptionGroup_unstable"],"mappings":"AACA,SACEA,WAAW,EACXC,qBAAqB,EACrBC,0BAA0B,EAC1BC,6BAA6B,EAC7BC,uBAAuB,QAClB,oCAAiC"}

package/lib/components/Combobox/Combobox.js

@@ -1,10 +1,10 @@
 'use client';
-import * as React from 'react';
-import { useCombobox_unstable } from './useCombobox';
-import { renderCombobox_unstable } from './renderCombobox';
-import { useComboboxStyles_unstable } from './useComboboxStyles.styles';
-import { useComboboxContextValues } from '../../contexts/useComboboxContextValues';
-import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+import * as React from "react";
+import { useCombobox_unstable } from "./useCombobox.js";
+import { renderCombobox_unstable } from "./renderCombobox.js";
+import { useComboboxStyles_unstable } from "./useComboboxStyles.styles.js";
+import { useComboboxContextValues } from "../../contexts/useComboboxContextValues.js";
+import { useCustomStyleHook_unstable } from "@fluentui/react-shared-contexts";
 /**
  * Combobox component: a selection control that allows users to choose from a set of possible options
  */ export const Combobox = /*#__PURE__*/ React.forwardRef((props, ref)=>{

package/lib/components/Combobox/Combobox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Combobox/Combobox.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useCombobox_unstable } from './useCombobox';\nimport { renderCombobox_unstable } from './renderCombobox';\nimport { useComboboxStyles_unstable } from './useComboboxStyles.styles';\nimport type { ComboboxProps } from './Combobox.types';\nimport { useComboboxContextValues } from '../../contexts/useComboboxContextValues';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Combobox component: a selection control that allows users to choose from a set of possible options\n */\nexport const Combobox: ForwardRefComponent<ComboboxProps> = React.forwardRef((props, ref) => {\n  const state = useCombobox_unstable(props, ref);\n  const contextValues = useComboboxContextValues(state);\n\n  useComboboxStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useComboboxStyles_unstable')(state);\n\n  return renderCombobox_unstable(state, contextValues);\n});\n\nCombobox.displayName = 'Combobox';\n"],"names":["React","useCombobox_unstable","renderCombobox_unstable","useComboboxStyles_unstable","useComboboxContextValues","useCustomStyleHook_unstable","Combobox","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,6BAA6B;AAExE,SAASC,wBAAwB,QAAQ,0CAA0C;AAEnF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,yBAA+CN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IACnF,MAAMC,QAAQT,qBAAqBO,OAAOC;IAC1C,MAAME,gBAAgBP,yBAAyBM;IAE/CP,2BAA2BO;IAE3BL,4BAA4B,8BAA8BK;IAE1D,OAAOR,wBAAwBQ,OAAOC;AACxC,GAAG;AAEHL,SAASM,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/Combobox/Combobox.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useCombobox_unstable } from './useCombobox';\nimport { renderCombobox_unstable } from './renderCombobox';\nimport { useComboboxStyles_unstable } from './useComboboxStyles.styles';\nimport type { ComboboxProps } from './Combobox.types';\nimport { useComboboxContextValues } from '../../contexts/useComboboxContextValues';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Combobox component: a selection control that allows users to choose from a set of possible options\n */\nexport const Combobox: ForwardRefComponent<ComboboxProps> = React.forwardRef((props, ref) => {\n  const state = useCombobox_unstable(props, ref);\n  const contextValues = useComboboxContextValues(state);\n\n  useComboboxStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useComboboxStyles_unstable')(state);\n\n  return renderCombobox_unstable(state, contextValues);\n});\n\nCombobox.displayName = 'Combobox';\n"],"names":["React","useCombobox_unstable","renderCombobox_unstable","useComboboxStyles_unstable","useComboboxContextValues","useCustomStyleHook_unstable","Combobox","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,oBAAoB,QAAQ,mBAAgB;AACrD,SAASC,uBAAuB,QAAQ,sBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,gCAA6B;AAExE,SAASC,wBAAwB,QAAQ,6CAA0C;AAEnF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,yBAA+CN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IACnF,MAAMC,QAAQT,qBAAqBO,OAAOC;IAC1C,MAAME,gBAAgBP,yBAAyBM;IAE/CP,2BAA2BO;IAE3BL,4BAA4B,8BAA8BK;IAE1D,OAAOR,wBAAwBQ,OAAOC;AACxC,GAAG;AAEHL,SAASM,WAAW,GAAG"}

package/lib/components/Combobox/index.js

@@ -1,4 +1,4 @@
-export { Combobox } from './Combobox';
-export { renderCombobox_unstable } from './renderCombobox';
-export { useComboboxBase_unstable, useCombobox_unstable } from './useCombobox';
-export { comboboxClassNames, useComboboxStyles_unstable } from './useComboboxStyles.styles';
+export { Combobox } from "./Combobox.js";
+export { renderCombobox_unstable } from "./renderCombobox.js";
+export { useComboboxBase_unstable, useCombobox_unstable } from "./useCombobox.js";
+export { comboboxClassNames, useComboboxStyles_unstable } from "./useComboboxStyles.styles.js";

package/lib/components/Combobox/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Combobox/index.ts"],"sourcesContent":["export { Combobox } from './Combobox';\nexport type {\n  ActiveOptionChangeData,\n  BaseComboboxProps,\n  BaseComboboxState,\n  ComboboxContextValues,\n  ComboboxOpenChangeData,\n  ComboboxOpenEvents,\n  ComboboxProps,\n  ComboboxSlots,\n  ComboboxState,\n} from './Combobox.types';\nexport { renderCombobox_unstable } from './renderCombobox';\nexport { useComboboxBase_unstable, useCombobox_unstable } from './useCombobox';\nexport { comboboxClassNames, useComboboxStyles_unstable } from './useComboboxStyles.styles';\n"],"names":["Combobox","renderCombobox_unstable","useComboboxBase_unstable","useCombobox_unstable","comboboxClassNames","useComboboxStyles_unstable"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,aAAa;AAYtC,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,wBAAwB,EAAEC,oBAAoB,QAAQ,gBAAgB;AAC/E,SAASC,kBAAkB,EAAEC,0BAA0B,QAAQ,6BAA6B"}
+{"version":3,"sources":["../src/components/Combobox/index.ts"],"sourcesContent":["export { Combobox } from './Combobox';\nexport type {\n  ActiveOptionChangeData,\n  BaseComboboxProps,\n  BaseComboboxState,\n  ComboboxContextValues,\n  ComboboxOpenChangeData,\n  ComboboxOpenEvents,\n  ComboboxProps,\n  ComboboxSlots,\n  ComboboxState,\n} from './Combobox.types';\nexport { renderCombobox_unstable } from './renderCombobox';\nexport { useComboboxBase_unstable, useCombobox_unstable } from './useCombobox';\nexport { comboboxClassNames, useComboboxStyles_unstable } from './useComboboxStyles.styles';\n"],"names":["Combobox","renderCombobox_unstable","useComboboxBase_unstable","useCombobox_unstable","comboboxClassNames","useComboboxStyles_unstable"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,gBAAa;AAYtC,SAASC,uBAAuB,QAAQ,sBAAmB;AAC3D,SAASC,wBAAwB,EAAEC,oBAAoB,QAAQ,mBAAgB;AAC/E,SAASC,kBAAkB,EAAEC,0BAA0B,QAAQ,gCAA6B"}

package/lib/components/Combobox/renderCombobox.js

@@ -1,9 +1,9 @@
   import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
-import { Portal } from '@fluentui/react-portal';
-import { ActiveDescendantContextProvider } from '@fluentui/react-aria';
-import { assertSlots } from '@fluentui/react-utilities';
-import { ComboboxContext } from '../../contexts/ComboboxContext';
-import { ListboxProvider } from '../../contexts/ListboxContext';
+import { Portal } from "@fluentui/react-portal";
+import { ActiveDescendantContextProvider } from "@fluentui/react-aria";
+import { assertSlots } from "@fluentui/react-utilities";
+import { ComboboxContext } from "../../contexts/ComboboxContext.js";
+import { ListboxProvider } from "../../contexts/ListboxContext.js";
 /**
  * Render the final JSX of Combobox
  */ export const renderCombobox_unstable = (state, contextValues)=>{

package/lib/components/Combobox/renderCombobox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Combobox/renderCombobox.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { Portal } from '@fluentui/react-portal';\nimport { ActiveDescendantContextProvider } from '@fluentui/react-aria';\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport type { ComboboxContextValues, BaseComboboxState, ComboboxSlots } from './Combobox.types';\nimport { ListboxProvider } from '../../contexts/ListboxContext';\n\n/**\n * Render the final JSX of Combobox\n */\nexport const renderCombobox_unstable = (state: BaseComboboxState, contextValues: ComboboxContextValues): JSXElement => {\n  assertSlots<ComboboxSlots>(state);\n\n  return (\n    <state.root>\n      <ActiveDescendantContextProvider value={contextValues.activeDescendant}>\n        <ListboxProvider value={contextValues.listbox}>\n          {/*eslint-disable-next-line @typescript-eslint/no-deprecated*/}\n          <ComboboxContext.Provider value={contextValues.combobox}>\n            <state.input />\n            {state.clearIcon && <state.clearIcon />}\n            {state.expandIcon && <state.expandIcon />}\n            {state.listbox &&\n              (state.inlinePopup ? (\n                <state.listbox />\n              ) : (\n                <Portal mountNode={state.mountNode}>\n                  <state.listbox />\n                </Portal>\n              ))}\n            {/*eslint-disable-next-line @typescript-eslint/no-deprecated*/}\n          </ComboboxContext.Provider>\n        </ListboxProvider>\n      </ActiveDescendantContextProvider>\n    </state.root>\n  );\n};\n"],"names":["Portal","ActiveDescendantContextProvider","assertSlots","ComboboxContext","ListboxProvider","renderCombobox_unstable","state","contextValues","root","value","activeDescendant","listbox","Provider","combobox","input","clearIcon","expandIcon","inlinePopup","mountNode"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,MAAM,QAAQ,yBAAyB;AAChD,SAASC,+BAA+B,QAAQ,uBAAuB;AAEvE,SAASC,WAAW,QAAQ,4BAA4B;AAExD,SAASC,eAAe,QAAQ,iCAAiC;AAEjE,SAASC,eAAe,QAAQ,gCAAgC;AAEhE;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAA0BC;IAChEL,YAA2BI;IAE3B,qBACE,KAACA,MAAME,IAAI;kBACT,cAAA,KAACP;YAAgCQ,OAAOF,cAAcG,gBAAgB;sBACpE,cAAA,KAACN;gBAAgBK,OAAOF,cAAcI,OAAO;0BAE3C,cAAA,MAACR,gBAAgBS,QAAQ;oBAACH,OAAOF,cAAcM,QAAQ;;sCACrD,KAACP,MAAMQ,KAAK;wBACXR,MAAMS,SAAS,kBAAI,KAACT,MAAMS,SAAS;wBACnCT,MAAMU,UAAU,kBAAI,KAACV,MAAMU,UAAU;wBACrCV,MAAMK,OAAO,IACXL,CAAAA,MAAMW,WAAW,iBAChB,KAACX,MAAMK,OAAO,sBAEd,KAACX;4BAAOkB,WAAWZ,MAAMY,SAAS;sCAChC,cAAA,KAACZ,MAAMK,OAAO;0BAElB;;;;;;AAOd,EAAE"}
+{"version":3,"sources":["../src/components/Combobox/renderCombobox.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { Portal } from '@fluentui/react-portal';\nimport { ActiveDescendantContextProvider } from '@fluentui/react-aria';\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport type { ComboboxContextValues, BaseComboboxState, ComboboxSlots } from './Combobox.types';\nimport { ListboxProvider } from '../../contexts/ListboxContext';\n\n/**\n * Render the final JSX of Combobox\n */\nexport const renderCombobox_unstable = (state: BaseComboboxState, contextValues: ComboboxContextValues): JSXElement => {\n  assertSlots<ComboboxSlots>(state);\n\n  return (\n    <state.root>\n      <ActiveDescendantContextProvider value={contextValues.activeDescendant}>\n        <ListboxProvider value={contextValues.listbox}>\n          {/*eslint-disable-next-line @typescript-eslint/no-deprecated*/}\n          <ComboboxContext.Provider value={contextValues.combobox}>\n            <state.input />\n            {state.clearIcon && <state.clearIcon />}\n            {state.expandIcon && <state.expandIcon />}\n            {state.listbox &&\n              (state.inlinePopup ? (\n                <state.listbox />\n              ) : (\n                <Portal mountNode={state.mountNode}>\n                  <state.listbox />\n                </Portal>\n              ))}\n            {/*eslint-disable-next-line @typescript-eslint/no-deprecated*/}\n          </ComboboxContext.Provider>\n        </ListboxProvider>\n      </ActiveDescendantContextProvider>\n    </state.root>\n  );\n};\n"],"names":["Portal","ActiveDescendantContextProvider","assertSlots","ComboboxContext","ListboxProvider","renderCombobox_unstable","state","contextValues","root","value","activeDescendant","listbox","Provider","combobox","input","clearIcon","expandIcon","inlinePopup","mountNode"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,MAAM,QAAQ,yBAAyB;AAChD,SAASC,+BAA+B,QAAQ,uBAAuB;AAEvE,SAASC,WAAW,QAAQ,4BAA4B;AAExD,SAASC,eAAe,QAAQ,oCAAiC;AAEjE,SAASC,eAAe,QAAQ,mCAAgC;AAEhE;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAA0BC;IAChEL,YAA2BI;IAE3B,qBACE,KAACA,MAAME,IAAI;kBACT,cAAA,KAACP;YAAgCQ,OAAOF,cAAcG,gBAAgB;sBACpE,cAAA,KAACN;gBAAgBK,OAAOF,cAAcI,OAAO;0BAE3C,cAAA,MAACR,gBAAgBS,QAAQ;oBAACH,OAAOF,cAAcM,QAAQ;;sCACrD,KAACP,MAAMQ,KAAK;wBACXR,MAAMS,SAAS,kBAAI,KAACT,MAAMS,SAAS;wBACnCT,MAAMU,UAAU,kBAAI,KAACV,MAAMU,UAAU;wBACrCV,MAAMK,OAAO,IACXL,CAAAA,MAAMW,WAAW,iBAChB,KAACX,MAAMK,OAAO,sBAEd,KAACX;4BAAOkB,WAAWZ,MAAMY,SAAS;sCAChC,cAAA,KAACZ,MAAMK,OAAO;0BAElB;;;;;;AAOd,EAAE"}

package/lib/components/Combobox/useCombobox.js

@@ -1,16 +1,17 @@
 'use client';
-import * as React from 'react';
-import { useActiveDescendant } from '@fluentui/react-aria';
-import { useFieldControlProps_unstable } from '@fluentui/react-field';
-import { ChevronDownRegular as ChevronDownIcon, DismissRegular as DismissIcon } from '@fluentui/react-icons';
-import { getPartitionedNativeProps, mergeCallbacks, useEventCallback, useId, useMergedRefs, slot, useOnClickOutside } from '@fluentui/react-utilities';
-import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
-import { useComboboxBaseState } from '../../utils/useComboboxBaseState';
-import { useComboboxPositioning } from '../../utils/useComboboxPositioning';
-import { Listbox } from '../Listbox/Listbox';
-import { useListboxSlot } from '../../utils/useListboxSlot';
-import { useInputTriggerSlot } from './useInputTriggerSlot';
-import { isComboboxOptionElement } from '../../utils/isComboboxOptionElement';
+import * as React from "react";
+import { useActiveDescendant } from "@fluentui/react-aria";
+import { useFieldContext_unstable, useFieldControlProps_unstable } from "@fluentui/react-field";
+import { ChevronDownRegular as ChevronDownIcon, DismissRegular as DismissIcon } from "@fluentui/react-icons";
+import { getPartitionedNativeProps, mergeCallbacks, useEventCallback, useId, useMergedRefs, slot, useOnClickOutside } from "@fluentui/react-utilities";
+import { useFluent_unstable as useFluent } from "@fluentui/react-shared-contexts";
+import { useComboboxBaseState } from "../../utils/useComboboxBaseState.js";
+import { useComboboxPositioning } from "../../utils/useComboboxPositioning.js";
+import { Listbox } from "../Listbox/Listbox.js";
+import { useListboxSlot } from "../../utils/useListboxSlot.js";
+import { useInputTriggerSlot } from "./useInputTriggerSlot.js";
+import { isComboboxOptionElement } from "../../utils/isComboboxOptionElement.js";
+import { useTabsterEscapeIgnore } from "../../hooks/useTabsterEscapeIgnore.js";
 /**
  * Create the base state required to render Combobox, without design-only props.
  *
@@ -185,7 +186,9 @@ import { isComboboxOptionElement } from '../../utils/isComboboxOptionElement';
  * @param props - props from this instance of Combobox
  * @param ref - reference to root HTMLElement of Combobox
  */ export const useCombobox_unstable = (props, ref)=>{
-    const { appearance = 'outline', size = 'medium', ...baseProps } = props;
+    const fieldContext = useFieldContext_unstable();
+    var _fieldContext_size;
+    const { appearance = 'outline', size = (_fieldContext_size = fieldContext === null || fieldContext === void 0 ? void 0 : fieldContext.size) !== null && _fieldContext_size !== void 0 ? _fieldContext_size : 'medium', ...baseProps } = props;
     const baseState = useComboboxBase_unstable(baseProps, ref);
     if (baseState.clearIcon) {
         var _baseState_clearIcon;
@@ -200,6 +203,10 @@ import { isComboboxOptionElement } from '../../utils/isComboboxOptionElement';
     return {
         ...baseState,
         appearance,
-        size
+        size,
+        input: {
+            ...useTabsterEscapeIgnore(baseState.input, baseState.open),
+            ...baseState.input
+        }
     };
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Combobox/useCombobox.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useActiveDescendant } from '@fluentui/react-aria';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { ChevronDownRegular as ChevronDownIcon, DismissRegular as DismissIcon } from '@fluentui/react-icons';\nimport {\n  getPartitionedNativeProps,\n  mergeCallbacks,\n  useEventCallback,\n  useId,\n  useMergedRefs,\n  slot,\n  useOnClickOutside,\n} from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useComboboxBaseState } from '../../utils/useComboboxBaseState';\nimport { useComboboxPositioning } from '../../utils/useComboboxPositioning';\nimport { Listbox } from '../Listbox/Listbox';\nimport type {\n  BaseComboboxProps,\n  BaseComboboxState,\n  ComboboxOpenEvents,\n  ComboboxProps,\n  ComboboxState,\n} from './Combobox.types';\nimport { useListboxSlot } from '../../utils/useListboxSlot';\nimport { useInputTriggerSlot } from './useInputTriggerSlot';\nimport { isComboboxOptionElement } from '../../utils/isComboboxOptionElement';\n\n/**\n * Create the base state required to render Combobox, without design-only props.\n *\n * @param props - props from this instance of Combobox (without appearance and size)\n * @param ref - reference to root HTMLInputElement of Combobox\n */\nexport const useComboboxBase_unstable = (\n  props: BaseComboboxProps,\n  ref: React.Ref<HTMLInputElement>,\n): BaseComboboxState => {\n  // Merge props from surrounding <Field>, if any\n  props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true });\n  const {\n    listboxRef: activeDescendantListboxRef,\n    activeParentRef,\n    controller: activeDescendantController,\n  } = useActiveDescendant<HTMLInputElement, HTMLDivElement>({\n    matchOption: isComboboxOptionElement,\n  });\n  const comboboxInternalState = useComboboxBaseState({ ...props, editable: true, activeDescendantController });\n  const { appearance: _appearance, size: _size, ...baseState } = comboboxInternalState;\n\n  const { clearable, clearSelection, disabled, multiselect, open, selectedOptions, setOpen, value, hasFocus } =\n    baseState;\n  const [comboboxPopupRef, comboboxTargetRef] = useComboboxPositioning(props);\n  const { disableAutoFocus = false, freeform, inlinePopup } = props;\n  const comboId = useId('combobox-');\n\n  const { primary: triggerNativeProps, root: rootNativeProps } = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['children'],\n  });\n\n  const triggerRef = React.useRef<HTMLInputElement>(null);\n\n  const listbox = useListboxSlot(props.listbox, useMergedRefs(comboboxPopupRef, activeDescendantListboxRef), {\n    state: comboboxInternalState,\n    triggerRef,\n    defaultProps: {\n      children: props.children,\n      disableAutoFocus,\n    },\n  });\n\n  const triggerSlot = useInputTriggerSlot(props.input ?? {}, useMergedRefs(triggerRef, activeParentRef, ref), {\n    state: comboboxInternalState,\n    freeform,\n    defaultProps: {\n      type: 'text',\n      value: value ?? '',\n      'aria-controls': open ? listbox?.id : undefined,\n      ...triggerNativeProps,\n    },\n    activeDescendantController,\n  });\n\n  const rootSlot = slot.always(props.root, {\n    defaultProps: {\n      'aria-owns': !inlinePopup && open ? listbox?.id : undefined,\n      ...rootNativeProps,\n    },\n    elementType: 'div',\n  });\n  rootSlot.ref = useMergedRefs(rootSlot.ref, comboboxTargetRef);\n\n  const showClearIcon = selectedOptions.length > 0 && !disabled && clearable && !multiselect;\n  const state: BaseComboboxState = {\n    components: { root: 'div', input: 'input', expandIcon: 'span', listbox: Listbox, clearIcon: 'span' },\n    root: rootSlot,\n    input: triggerSlot,\n    listbox: open || hasFocus ? listbox : undefined,\n    clearIcon: slot.optional(props.clearIcon, {\n      defaultProps: {\n        'aria-hidden': 'true',\n      },\n      elementType: 'span',\n      renderByDefault: true,\n    }),\n    expandIcon: slot.optional(props.expandIcon, {\n      renderByDefault: true,\n      defaultProps: {\n        'aria-disabled': disabled ? 'true' : undefined,\n        'aria-expanded': open,\n        role: 'button',\n      },\n      elementType: 'span',\n    }),\n    showClearIcon,\n    activeDescendantController,\n    ...baseState,\n  };\n\n  const { targetDocument } = useFluent();\n\n  useOnClickOutside({\n    element: targetDocument,\n    callback: event => setOpen(event as unknown as ComboboxOpenEvents, false),\n    refs: [triggerRef, comboboxPopupRef, comboboxTargetRef],\n    disabled: !open,\n  });\n\n  /* handle open/close + focus change when clicking expandIcon */\n  const { onMouseDown: onIconMouseDown } = state.expandIcon || {};\n\n  const onExpandIconMouseDown = useEventCallback(\n    // eslint-disable-next-line react-hooks/refs\n    mergeCallbacks(onIconMouseDown, (event: React.MouseEvent<HTMLSpanElement>) => {\n      event.preventDefault();\n      state.setOpen(event, !state.open);\n      triggerRef.current?.focus();\n    }),\n  );\n\n  if (state.expandIcon) {\n    state.expandIcon.onMouseDown = onExpandIconMouseDown;\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  const onClearIconMouseDown = useEventCallback(\n    mergeCallbacks(state.clearIcon?.onMouseDown, (ev: React.MouseEvent<HTMLSpanElement>) => {\n      ev.preventDefault();\n    }),\n  );\n  const onClearIconClick = useEventCallback(\n    mergeCallbacks(state.clearIcon?.onClick, (ev: React.MouseEvent<HTMLSpanElement>) => {\n      clearSelection(ev);\n    }),\n  );\n\n  if (state.clearIcon) {\n    state.clearIcon.onMouseDown = onClearIconMouseDown;\n    state.clearIcon.onClick = onClearIconClick;\n  }\n\n  // Heads up! We don't support \"clearable\" in multiselect mode, so we should never display a slot\n  if (multiselect) {\n    state.clearIcon = undefined;\n  }\n\n  if (process.env.NODE_ENV !== 'production') {\n    // eslint-disable-next-line react-hooks/rules-of-hooks -- \"process.env\" does not change in runtime\n    React.useEffect(() => {\n      if (clearable && multiselect) {\n        // eslint-disable-next-line no-console\n        console.error(`[@fluentui/react-combobox] \"clearable\" prop is not supported in multiselect mode.`);\n      }\n    }, [clearable, multiselect]);\n  }\n\n  return state;\n};\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 { appearance = 'outline', size = 'medium', ...baseProps } = props;\n  const baseState = useComboboxBase_unstable(baseProps, ref);\n\n  if (baseState.clearIcon) {\n    baseState.clearIcon.children ??= <DismissIcon />;\n  }\n\n  if (baseState.expandIcon) {\n    baseState.expandIcon.children ??= <ChevronDownIcon />;\n  }\n\n  return {\n    ...baseState,\n    appearance,\n    size,\n  };\n};\n"],"names":["React","useActiveDescendant","useFieldControlProps_unstable","ChevronDownRegular","ChevronDownIcon","DismissRegular","DismissIcon","getPartitionedNativeProps","mergeCallbacks","useEventCallback","useId","useMergedRefs","slot","useOnClickOutside","useFluent_unstable","useFluent","useComboboxBaseState","useComboboxPositioning","Listbox","useListboxSlot","useInputTriggerSlot","isComboboxOptionElement","useComboboxBase_unstable","props","ref","state","supportsLabelFor","supportsRequired","listboxRef","activeDescendantListboxRef","activeParentRef","controller","activeDescendantController","matchOption","comboboxInternalState","editable","appearance","_appearance","size","_size","baseState","clearable","clearSelection","disabled","multiselect","open","selectedOptions","setOpen","value","hasFocus","comboboxPopupRef","comboboxTargetRef","disableAutoFocus","freeform","inlinePopup","comboId","primary","triggerNativeProps","root","rootNativeProps","primarySlotTagName","excludedPropNames","triggerRef","useRef","listbox","defaultProps","children","triggerSlot","input","type","id","undefined","rootSlot","always","elementType","showClearIcon","length","components","expandIcon","clearIcon","optional","renderByDefault","role","targetDocument","element","callback","event","refs","onMouseDown","onIconMouseDown","onExpandIconMouseDown","preventDefault","current","focus","hasExpandLabel","defaultOpenString","chevronId","chevronLabelledBy","onClearIconMouseDown","ev","onClearIconClick","onClick","process","env","NODE_ENV","useEffect","console","error","useCombobox_unstable","baseProps"],"mappings":"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"}
+{"version":3,"sources":["../src/components/Combobox/useCombobox.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useActiveDescendant } from '@fluentui/react-aria';\nimport { useFieldContext_unstable, useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { ChevronDownRegular as ChevronDownIcon, DismissRegular as DismissIcon } from '@fluentui/react-icons';\nimport {\n  getPartitionedNativeProps,\n  mergeCallbacks,\n  useEventCallback,\n  useId,\n  useMergedRefs,\n  slot,\n  useOnClickOutside,\n} from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useComboboxBaseState } from '../../utils/useComboboxBaseState';\nimport { useComboboxPositioning } from '../../utils/useComboboxPositioning';\nimport { Listbox } from '../Listbox/Listbox';\nimport type {\n  BaseComboboxProps,\n  BaseComboboxState,\n  ComboboxOpenEvents,\n  ComboboxProps,\n  ComboboxState,\n} from './Combobox.types';\nimport { useListboxSlot } from '../../utils/useListboxSlot';\nimport { useInputTriggerSlot } from './useInputTriggerSlot';\nimport { isComboboxOptionElement } from '../../utils/isComboboxOptionElement';\nimport { useTabsterEscapeIgnore } from '../../hooks/useTabsterEscapeIgnore';\n\n/**\n * Create the base state required to render Combobox, without design-only props.\n *\n * @param props - props from this instance of Combobox (without appearance and size)\n * @param ref - reference to root HTMLInputElement of Combobox\n */\nexport const useComboboxBase_unstable = (\n  props: BaseComboboxProps,\n  ref: React.Ref<HTMLInputElement>,\n): BaseComboboxState => {\n  // Merge props from surrounding <Field>, if any\n  props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true });\n  const {\n    listboxRef: activeDescendantListboxRef,\n    activeParentRef,\n    controller: activeDescendantController,\n  } = useActiveDescendant<HTMLInputElement, HTMLDivElement>({\n    matchOption: isComboboxOptionElement,\n  });\n  const comboboxInternalState = useComboboxBaseState({ ...props, editable: true, activeDescendantController });\n  const { appearance: _appearance, size: _size, ...baseState } = comboboxInternalState;\n\n  const { clearable, clearSelection, disabled, multiselect, open, selectedOptions, setOpen, value, hasFocus } =\n    baseState;\n  const [comboboxPopupRef, comboboxTargetRef] = useComboboxPositioning(props);\n  const { disableAutoFocus = false, freeform, inlinePopup } = props;\n  const comboId = useId('combobox-');\n\n  const { primary: triggerNativeProps, root: rootNativeProps } = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['children'],\n  });\n\n  const triggerRef = React.useRef<HTMLInputElement>(null);\n\n  const listbox = useListboxSlot(props.listbox, useMergedRefs(comboboxPopupRef, activeDescendantListboxRef), {\n    state: comboboxInternalState,\n    triggerRef,\n    defaultProps: {\n      children: props.children,\n      disableAutoFocus,\n    },\n  });\n\n  const triggerSlot = useInputTriggerSlot(props.input ?? {}, useMergedRefs(triggerRef, activeParentRef, ref), {\n    state: comboboxInternalState,\n    freeform,\n    defaultProps: {\n      type: 'text',\n      value: value ?? '',\n      'aria-controls': open ? listbox?.id : undefined,\n      ...triggerNativeProps,\n    },\n    activeDescendantController,\n  });\n\n  const rootSlot = slot.always(props.root, {\n    defaultProps: {\n      'aria-owns': !inlinePopup && open ? listbox?.id : undefined,\n      ...rootNativeProps,\n    },\n    elementType: 'div',\n  });\n  rootSlot.ref = useMergedRefs(rootSlot.ref, comboboxTargetRef);\n\n  const showClearIcon = selectedOptions.length > 0 && !disabled && clearable && !multiselect;\n  const state: BaseComboboxState = {\n    components: { root: 'div', input: 'input', expandIcon: 'span', listbox: Listbox, clearIcon: 'span' },\n    root: rootSlot,\n    input: triggerSlot,\n    listbox: open || hasFocus ? listbox : undefined,\n    clearIcon: slot.optional(props.clearIcon, {\n      defaultProps: {\n        'aria-hidden': 'true',\n      },\n      elementType: 'span',\n      renderByDefault: true,\n    }),\n    expandIcon: slot.optional(props.expandIcon, {\n      renderByDefault: true,\n      defaultProps: {\n        'aria-disabled': disabled ? 'true' : undefined,\n        'aria-expanded': open,\n        role: 'button',\n      },\n      elementType: 'span',\n    }),\n    showClearIcon,\n    activeDescendantController,\n    ...baseState,\n  };\n\n  const { targetDocument } = useFluent();\n\n  useOnClickOutside({\n    element: targetDocument,\n    callback: event => setOpen(event as unknown as ComboboxOpenEvents, false),\n    refs: [triggerRef, comboboxPopupRef, comboboxTargetRef],\n    disabled: !open,\n  });\n\n  /* handle open/close + focus change when clicking expandIcon */\n  const { onMouseDown: onIconMouseDown } = state.expandIcon || {};\n\n  const onExpandIconMouseDown = useEventCallback(\n    // eslint-disable-next-line react-hooks/refs\n    mergeCallbacks(onIconMouseDown, (event: React.MouseEvent<HTMLSpanElement>) => {\n      event.preventDefault();\n      state.setOpen(event, !state.open);\n      triggerRef.current?.focus();\n    }),\n  );\n\n  if (state.expandIcon) {\n    state.expandIcon.onMouseDown = onExpandIconMouseDown;\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  const onClearIconMouseDown = useEventCallback(\n    mergeCallbacks(state.clearIcon?.onMouseDown, (ev: React.MouseEvent<HTMLSpanElement>) => {\n      ev.preventDefault();\n    }),\n  );\n  const onClearIconClick = useEventCallback(\n    mergeCallbacks(state.clearIcon?.onClick, (ev: React.MouseEvent<HTMLSpanElement>) => {\n      clearSelection(ev);\n    }),\n  );\n\n  if (state.clearIcon) {\n    state.clearIcon.onMouseDown = onClearIconMouseDown;\n    state.clearIcon.onClick = onClearIconClick;\n  }\n\n  // Heads up! We don't support \"clearable\" in multiselect mode, so we should never display a slot\n  if (multiselect) {\n    state.clearIcon = undefined;\n  }\n\n  if (process.env.NODE_ENV !== 'production') {\n    // eslint-disable-next-line react-hooks/rules-of-hooks -- \"process.env\" does not change in runtime\n    React.useEffect(() => {\n      if (clearable && multiselect) {\n        // eslint-disable-next-line no-console\n        console.error(`[@fluentui/react-combobox] \"clearable\" prop is not supported in multiselect mode.`);\n      }\n    }, [clearable, multiselect]);\n  }\n\n  return state;\n};\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 fieldContext = useFieldContext_unstable();\n  const { appearance = 'outline', size = fieldContext?.size ?? 'medium', ...baseProps } = props;\n  const baseState = useComboboxBase_unstable(baseProps, ref);\n\n  if (baseState.clearIcon) {\n    baseState.clearIcon.children ??= <DismissIcon />;\n  }\n\n  if (baseState.expandIcon) {\n    baseState.expandIcon.children ??= <ChevronDownIcon />;\n  }\n\n  return {\n    ...baseState,\n    appearance,\n    size,\n    input: {\n      ...useTabsterEscapeIgnore(baseState.input, baseState.open),\n      ...baseState.input,\n    },\n  };\n};\n"],"names":["React","useActiveDescendant","useFieldContext_unstable","useFieldControlProps_unstable","ChevronDownRegular","ChevronDownIcon","DismissRegular","DismissIcon","getPartitionedNativeProps","mergeCallbacks","useEventCallback","useId","useMergedRefs","slot","useOnClickOutside","useFluent_unstable","useFluent","useComboboxBaseState","useComboboxPositioning","Listbox","useListboxSlot","useInputTriggerSlot","isComboboxOptionElement","useTabsterEscapeIgnore","useComboboxBase_unstable","props","ref","state","supportsLabelFor","supportsRequired","listboxRef","activeDescendantListboxRef","activeParentRef","controller","activeDescendantController","matchOption","comboboxInternalState","editable","appearance","_appearance","size","_size","baseState","clearable","clearSelection","disabled","multiselect","open","selectedOptions","setOpen","value","hasFocus","comboboxPopupRef","comboboxTargetRef","disableAutoFocus","freeform","inlinePopup","comboId","primary","triggerNativeProps","root","rootNativeProps","primarySlotTagName","excludedPropNames","triggerRef","useRef","listbox","defaultProps","children","triggerSlot","input","type","id","undefined","rootSlot","always","elementType","showClearIcon","length","components","expandIcon","clearIcon","optional","renderByDefault","role","targetDocument","element","callback","event","refs","onMouseDown","onIconMouseDown","onExpandIconMouseDown","preventDefault","current","focus","hasExpandLabel","defaultOpenString","chevronId","chevronLabelledBy","onClearIconMouseDown","ev","onClearIconClick","onClick","process","env","NODE_ENV","useEffect","console","error","useCombobox_unstable","fieldContext","baseProps"],"mappings":"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"}

package/lib/components/Combobox/useComboboxStyles.styles.js

@@ -1,8 +1,8 @@
 'use client';
 
-import { tokens, typographyStyles } from '@fluentui/react-theme';
-import { __styles, mergeClasses, shorthands } from '@griffel/react';
-import { iconSizes } from '../../utils/internalTokens';
+import { tokens, typographyStyles } from "@fluentui/react-theme";
+import { __styles, mergeClasses, shorthands } from "@griffel/react";
+import { iconSizes } from "../../utils/internalTokens.js";
 export const comboboxClassNames = {
   root: 'fui-Combobox',
   input: 'fui-Combobox__input',

package/lib/components/Combobox/useComboboxStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["tokens","typographyStyles","__styles","mergeClasses","shorthands","iconSizes","comboboxClassNames","root","input","expandIcon","clearIcon","listbox","fieldHeights","small","medium","large","useStyles","Bt984gj","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","B7ck84d","i8kkvl","mc9l5x","Budl1dq","Brf1p80","Bf4jedk","qhf8xq","ha4doy","Bbr2w1p","Bduesf4","Bpq79vn","li1rpt","Bsft5z2","E3zdtr","Eqx8gd","By385i5","B1piin3","Dlnsje","d9w3h3","B3778ie","B1q35kw","Bw17bha","Bcgy8vk","Bjuhk93","Gjdm7m","b1kco5","Ba2ppi3","F2fol1","lck23g","wi16st","ywj3b2","umuwi5","Blcqepd","nplu4u","Bioka5o","Bnupc0a","bing71","Bercvud","E5pizo","Bxyxcbc","listboxCollapsed","inlineListbox","Bj3rh1h","Bqenvij","z189sj","outline","De3pzq","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","outlineInteractive","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","B6oc9vd","ak43y8","wmxk5l","B50zh58","Bvq3b66","Brahy3i","zoxjo1","an54nd","underline","invalid","tvckwq","gk2u95","hhx65j","Bxowmz0","invalidUnderline","disabled","Bceei9c","Bcq6wej","Jcjdmf","sc4o1m","Bosien3","d","p","w","m","h","a","useInputStyles","qb2dma","sj55zd","Bahqtrf","Brovlpu","yvdlaj","B3o7kgh","Be2twd7","Bhrd7zp","Bg96gwp","Byoj8tv","uwmqm3","z8tnut","B0ocmuz","f","useIconStyles","icon","Bo70h7d","bn5sak","hidden","visuallyHidden","Bh84pgu","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","B68tc82","Bmxbyg5","Bpg54ce","a9b677","useComboboxStyles_unstable","state","appearance","open","size","showClearIcon","styles","iconStyles","inputStyles","className","inlinePopup"],"sources":["useComboboxStyles.styles.js"],"sourcesContent":["'use client';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { iconSizes } from '../../utils/internalTokens';\nexport const comboboxClassNames = {\n    root: 'fui-Combobox',\n    input: 'fui-Combobox__input',\n    expandIcon: 'fui-Combobox__expandIcon',\n    clearIcon: 'fui-Combobox__clearIcon',\n    listbox: 'fui-Combobox__listbox'\n};\n// Matches internal heights for Select and Input, but there are no theme variables for these\nconst fieldHeights = {\n    small: '24px',\n    medium: '32px',\n    large: '40px'\n};\n/**\n * Styles for Combobox\n */ const useStyles = makeStyles({\n    root: {\n        alignItems: 'center',\n        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        verticalAlign: 'middle',\n        // windows high contrast mode focus indicator\n        ':focus-within': {\n            outlineWidth: '2px',\n            outlineStyle: 'solid',\n            outlineColor: 'transparent'\n        },\n        // bottom focus border, shared with Input, Select, and SpinButton\n        '::after': {\n            boxSizing: 'border-box',\n            content: '\"\"',\n            position: 'absolute',\n            left: '-1px',\n            bottom: '-1px',\n            right: '-1px',\n            height: `max(2px, ${tokens.borderRadiusMedium})`,\n            borderBottomLeftRadius: tokens.borderRadiusMedium,\n            borderBottomRightRadius: tokens.borderRadiusMedium,\n            borderBottom: `${tokens.strokeWidthThick} solid ${tokens.colorCompoundBrandStroke}`,\n            clipPath: 'inset(calc(100% - 2px) 0 0 0)',\n            transform: 'scaleX(0)',\n            transitionProperty: 'transform',\n            transitionDuration: tokens.durationUltraFast,\n            transitionDelay: tokens.curveAccelerateMid,\n            '@media screen and (prefers-reduced-motion: reduce)': {\n                transitionDuration: '0.01ms',\n                transitionDelay: '0.01ms'\n            }\n        },\n        ':focus-within::after': {\n            transform: 'scaleX(1)',\n            transitionProperty: 'transform',\n            transitionDuration: tokens.durationNormal,\n            transitionDelay: tokens.curveDecelerateMid,\n            '@media screen and (prefers-reduced-motion: reduce)': {\n                transitionDuration: '0.01ms',\n                transitionDelay: '0.01ms'\n            }\n        },\n        ':focus-within:active::after': {\n            borderBottomColor: tokens.colorCompoundBrandStrokePressed\n        }\n    },\n    listbox: {\n        boxShadow: `${tokens.shadow16}`,\n        borderRadius: tokens.borderRadiusMedium,\n        maxHeight: '80vh',\n        boxSizing: 'border-box'\n    },\n    listboxCollapsed: {\n        display: 'none'\n    },\n    // When rendering inline, the popupSurface will be rendered under relatively positioned elements such as Input.\n    // This is due to the surface being positioned as absolute, therefore zIndex: 1 ensures that won't happen.\n    inlineListbox: {\n        zIndex: 1\n    },\n    // size variants\n    small: {\n        height: fieldHeights.small,\n        paddingRight: tokens.spacingHorizontalSNudge\n    },\n    medium: {\n        height: fieldHeights.medium,\n        paddingRight: tokens.spacingHorizontalMNudge\n    },\n    large: {\n        columnGap: tokens.spacingHorizontalSNudge,\n        height: fieldHeights.large,\n        paddingRight: tokens.spacingHorizontalM\n    },\n    // appearance variants\n    outline: {\n        backgroundColor: tokens.colorNeutralBackground1,\n        border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n        borderBottomColor: tokens.colorNeutralStrokeAccessible\n    },\n    outlineInteractive: {\n        '&:hover': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n            borderBottomColor: tokens.colorNeutralStrokeAccessibleHover\n        },\n        '&:active': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n            borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed\n        },\n        '&:focus-within': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n            borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed\n        }\n    },\n    underline: {\n        backgroundColor: tokens.colorTransparentBackground,\n        borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,\n        borderRadius: '0'\n    },\n    'filled-lighter': {\n        backgroundColor: tokens.colorNeutralBackground1,\n        border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`\n    },\n    'filled-darker': {\n        backgroundColor: tokens.colorNeutralBackground3,\n        border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`\n    },\n    invalid: {\n        ':not(:focus-within),:hover:not(:focus-within)': {\n            ...shorthands.borderColor(tokens.colorPaletteRedBorder2)\n        }\n    },\n    invalidUnderline: {\n        ':not(:focus-within),:hover:not(:focus-within)': {\n            borderBottomColor: tokens.colorPaletteRedBorder2\n        }\n    },\n    disabled: {\n        cursor: 'not-allowed',\n        backgroundColor: tokens.colorTransparentBackground,\n        ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n        '@media (forced-colors: active)': {\n            ...shorthands.borderColor('GrayText')\n        }\n    }\n});\nconst useInputStyles = makeStyles({\n    input: {\n        alignSelf: 'stretch',\n        backgroundColor: tokens.colorTransparentBackground,\n        border: 'none',\n        color: tokens.colorNeutralForeground1,\n        fontFamily: tokens.fontFamilyBase,\n        '&:focus': {\n            outlineStyle: 'none'\n        },\n        '&::placeholder': {\n            color: tokens.colorNeutralForeground4,\n            opacity: 1\n        }\n    },\n    // size variants\n    small: {\n        ...typographyStyles.caption1,\n        padding: `0 0 0 ${`calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`}`\n    },\n    medium: {\n        ...typographyStyles.body1,\n        padding: `0 0 0 ${`calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`}`\n    },\n    large: {\n        ...typographyStyles.body2,\n        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});\nconst useIconStyles = makeStyles({\n    icon: {\n        boxSizing: 'border-box',\n        color: tokens.colorNeutralStrokeAccessible,\n        cursor: 'pointer',\n        display: 'block',\n        fontSize: tokens.fontSizeBase500,\n        // position: relative provides the containing block for the ::after clickable-area extension below.\n        position: 'relative',\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        // Extend the clickable area to cover the root's right paddingRight \"dead zone\".\n        // Without this, clicking between the icon and the right border does not trigger the icon's handler.\n        // The negative `right` is overridden per size variant below to match the root's paddingRight.\n        '::after': {\n            content: '\"\"',\n            position: 'absolute',\n            top: 0,\n            bottom: 0,\n            left: 0,\n            right: 0\n        }\n    },\n    hidden: {\n        display: 'none'\n    },\n    visuallyHidden: {\n        clip: 'rect(0px, 0px, 0px, 0px)',\n        height: '1px',\n        margin: '-1px',\n        overflow: 'hidden',\n        padding: '0px',\n        width: '1px',\n        position: 'absolute'\n    },\n    // icon size variants\n    small: {\n        fontSize: iconSizes.small,\n        marginLeft: tokens.spacingHorizontalXXS,\n        '::after': {\n            right: `calc(-1 * ${tokens.spacingHorizontalSNudge})`\n        }\n    },\n    medium: {\n        fontSize: iconSizes.medium,\n        marginLeft: tokens.spacingHorizontalXXS,\n        '::after': {\n            right: `calc(-1 * ${tokens.spacingHorizontalMNudge})`\n        }\n    },\n    large: {\n        fontSize: iconSizes.large,\n        marginLeft: tokens.spacingHorizontalSNudge,\n        '::after': {\n            right: `calc(-1 * ${tokens.spacingHorizontalM})`\n        }\n    },\n    disabled: {\n        color: tokens.colorNeutralForegroundDisabled,\n        cursor: 'not-allowed'\n    }\n});\n/**\n * Apply styling to the Combobox slots based on the state\n */ export const useComboboxStyles_unstable = (state)=>{\n    const { appearance, open, size, showClearIcon } = 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    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(comboboxClassNames.root, styles.root, styles[appearance], styles[size], !disabled && appearance === 'outline' && styles.outlineInteractive, invalid && appearance !== 'underline' && styles.invalid, invalid && appearance === 'underline' && styles.invalidUnderline, disabled && styles.disabled, state.root.className);\n    // eslint-disable-next-line react-hooks/immutability\n    state.input.className = mergeClasses(comboboxClassNames.input, inputStyles.input, inputStyles[size], disabled && inputStyles.disabled, state.input.className);\n    if (state.listbox) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.listbox.className = mergeClasses(comboboxClassNames.listbox, styles.listbox, state.inlinePopup && styles.inlineListbox, !open && styles.listboxCollapsed, state.listbox.className);\n    }\n    if (state.expandIcon) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.expandIcon.className = mergeClasses(comboboxClassNames.expandIcon, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, showClearIcon && iconStyles.visuallyHidden, state.expandIcon.className);\n    }\n    if (state.clearIcon) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.clearIcon.className = mergeClasses(comboboxClassNames.clearIcon, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, !showClearIcon && iconStyles.hidden, state.clearIcon.className);\n    }\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["tokens","typographyStyles","__styles","mergeClasses","shorthands","iconSizes","comboboxClassNames","root","input","expandIcon","clearIcon","listbox","fieldHeights","small","medium","large","useStyles","Bt984gj","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","B7ck84d","i8kkvl","mc9l5x","Budl1dq","Brf1p80","Bf4jedk","qhf8xq","ha4doy","Bbr2w1p","Bduesf4","Bpq79vn","li1rpt","Bsft5z2","E3zdtr","Eqx8gd","By385i5","B1piin3","Dlnsje","d9w3h3","B3778ie","B1q35kw","Bw17bha","Bcgy8vk","Bjuhk93","Gjdm7m","b1kco5","Ba2ppi3","F2fol1","lck23g","wi16st","ywj3b2","umuwi5","Blcqepd","nplu4u","Bioka5o","Bnupc0a","bing71","Bercvud","E5pizo","Bxyxcbc","listboxCollapsed","inlineListbox","Bj3rh1h","Bqenvij","z189sj","outline","De3pzq","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","outlineInteractive","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","B6oc9vd","ak43y8","wmxk5l","B50zh58","Bvq3b66","Brahy3i","zoxjo1","an54nd","underline","invalid","tvckwq","gk2u95","hhx65j","Bxowmz0","invalidUnderline","disabled","Bceei9c","Bcq6wej","Jcjdmf","sc4o1m","Bosien3","d","p","w","m","h","a","useInputStyles","qb2dma","sj55zd","Bahqtrf","Brovlpu","yvdlaj","B3o7kgh","Be2twd7","Bhrd7zp","Bg96gwp","Byoj8tv","uwmqm3","z8tnut","B0ocmuz","f","useIconStyles","icon","Bo70h7d","bn5sak","hidden","visuallyHidden","Bh84pgu","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","B68tc82","Bmxbyg5","Bpg54ce","a9b677","useComboboxStyles_unstable","state","appearance","open","size","showClearIcon","styles","iconStyles","inputStyles","className","inlinePopup"],"sources":["useComboboxStyles.styles.js"],"sourcesContent":["'use client';\nimport { tokens, typographyStyles } from \"@fluentui/react-theme\";\nimport { makeStyles, mergeClasses, shorthands } from \"@griffel/react\";\nimport { iconSizes } from \"../../utils/internalTokens.js\";\nexport const comboboxClassNames = {\n    root: 'fui-Combobox',\n    input: 'fui-Combobox__input',\n    expandIcon: 'fui-Combobox__expandIcon',\n    clearIcon: 'fui-Combobox__clearIcon',\n    listbox: 'fui-Combobox__listbox'\n};\n// Matches internal heights for Select and Input, but there are no theme variables for these\nconst fieldHeights = {\n    small: '24px',\n    medium: '32px',\n    large: '40px'\n};\n/**\n * Styles for Combobox\n */ const useStyles = makeStyles({\n    root: {\n        alignItems: 'center',\n        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        verticalAlign: 'middle',\n        // windows high contrast mode focus indicator\n        ':focus-within': {\n            outlineWidth: '2px',\n            outlineStyle: 'solid',\n            outlineColor: 'transparent'\n        },\n        // bottom focus border, shared with Input, Select, and SpinButton\n        '::after': {\n            boxSizing: 'border-box',\n            content: '\"\"',\n            position: 'absolute',\n            left: '-1px',\n            bottom: '-1px',\n            right: '-1px',\n            height: `max(2px, ${tokens.borderRadiusMedium})`,\n            borderBottomLeftRadius: tokens.borderRadiusMedium,\n            borderBottomRightRadius: tokens.borderRadiusMedium,\n            borderBottom: `${tokens.strokeWidthThick} solid ${tokens.colorCompoundBrandStroke}`,\n            clipPath: 'inset(calc(100% - 2px) 0 0 0)',\n            transform: 'scaleX(0)',\n            transitionProperty: 'transform',\n            transitionDuration: tokens.durationUltraFast,\n            transitionDelay: tokens.curveAccelerateMid,\n            '@media screen and (prefers-reduced-motion: reduce)': {\n                transitionDuration: '0.01ms',\n                transitionDelay: '0.01ms'\n            }\n        },\n        ':focus-within::after': {\n            transform: 'scaleX(1)',\n            transitionProperty: 'transform',\n            transitionDuration: tokens.durationNormal,\n            transitionDelay: tokens.curveDecelerateMid,\n            '@media screen and (prefers-reduced-motion: reduce)': {\n                transitionDuration: '0.01ms',\n                transitionDelay: '0.01ms'\n            }\n        },\n        ':focus-within:active::after': {\n            borderBottomColor: tokens.colorCompoundBrandStrokePressed\n        }\n    },\n    listbox: {\n        boxShadow: `${tokens.shadow16}`,\n        borderRadius: tokens.borderRadiusMedium,\n        maxHeight: '80vh',\n        boxSizing: 'border-box'\n    },\n    listboxCollapsed: {\n        display: 'none'\n    },\n    // When rendering inline, the popupSurface will be rendered under relatively positioned elements such as Input.\n    // This is due to the surface being positioned as absolute, therefore zIndex: 1 ensures that won't happen.\n    inlineListbox: {\n        zIndex: 1\n    },\n    // size variants\n    small: {\n        height: fieldHeights.small,\n        paddingRight: tokens.spacingHorizontalSNudge\n    },\n    medium: {\n        height: fieldHeights.medium,\n        paddingRight: tokens.spacingHorizontalMNudge\n    },\n    large: {\n        columnGap: tokens.spacingHorizontalSNudge,\n        height: fieldHeights.large,\n        paddingRight: tokens.spacingHorizontalM\n    },\n    // appearance variants\n    outline: {\n        backgroundColor: tokens.colorNeutralBackground1,\n        border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n        borderBottomColor: tokens.colorNeutralStrokeAccessible\n    },\n    outlineInteractive: {\n        '&:hover': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n            borderBottomColor: tokens.colorNeutralStrokeAccessibleHover\n        },\n        '&:active': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n            borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed\n        },\n        '&:focus-within': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n            borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed\n        }\n    },\n    underline: {\n        backgroundColor: tokens.colorTransparentBackground,\n        borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,\n        borderRadius: '0'\n    },\n    'filled-lighter': {\n        backgroundColor: tokens.colorNeutralBackground1,\n        border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`\n    },\n    'filled-darker': {\n        backgroundColor: tokens.colorNeutralBackground3,\n        border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`\n    },\n    invalid: {\n        ':not(:focus-within),:hover:not(:focus-within)': {\n            ...shorthands.borderColor(tokens.colorPaletteRedBorder2)\n        }\n    },\n    invalidUnderline: {\n        ':not(:focus-within),:hover:not(:focus-within)': {\n            borderBottomColor: tokens.colorPaletteRedBorder2\n        }\n    },\n    disabled: {\n        cursor: 'not-allowed',\n        backgroundColor: tokens.colorTransparentBackground,\n        ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n        '@media (forced-colors: active)': {\n            ...shorthands.borderColor('GrayText')\n        }\n    }\n});\nconst useInputStyles = makeStyles({\n    input: {\n        alignSelf: 'stretch',\n        backgroundColor: tokens.colorTransparentBackground,\n        border: 'none',\n        color: tokens.colorNeutralForeground1,\n        fontFamily: tokens.fontFamilyBase,\n        '&:focus': {\n            outlineStyle: 'none'\n        },\n        '&::placeholder': {\n            color: tokens.colorNeutralForeground4,\n            opacity: 1\n        }\n    },\n    // size variants\n    small: {\n        ...typographyStyles.caption1,\n        padding: `0 0 0 ${`calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`}`\n    },\n    medium: {\n        ...typographyStyles.body1,\n        padding: `0 0 0 ${`calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`}`\n    },\n    large: {\n        ...typographyStyles.body2,\n        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});\nconst useIconStyles = makeStyles({\n    icon: {\n        boxSizing: 'border-box',\n        color: tokens.colorNeutralStrokeAccessible,\n        cursor: 'pointer',\n        display: 'block',\n        fontSize: tokens.fontSizeBase500,\n        // position: relative provides the containing block for the ::after clickable-area extension below.\n        position: 'relative',\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        // Extend the clickable area to cover the root's right paddingRight \"dead zone\".\n        // Without this, clicking between the icon and the right border does not trigger the icon's handler.\n        // The negative `right` is overridden per size variant below to match the root's paddingRight.\n        '::after': {\n            content: '\"\"',\n            position: 'absolute',\n            top: 0,\n            bottom: 0,\n            left: 0,\n            right: 0\n        }\n    },\n    hidden: {\n        display: 'none'\n    },\n    visuallyHidden: {\n        clip: 'rect(0px, 0px, 0px, 0px)',\n        height: '1px',\n        margin: '-1px',\n        overflow: 'hidden',\n        padding: '0px',\n        width: '1px',\n        position: 'absolute'\n    },\n    // icon size variants\n    small: {\n        fontSize: iconSizes.small,\n        marginLeft: tokens.spacingHorizontalXXS,\n        '::after': {\n            right: `calc(-1 * ${tokens.spacingHorizontalSNudge})`\n        }\n    },\n    medium: {\n        fontSize: iconSizes.medium,\n        marginLeft: tokens.spacingHorizontalXXS,\n        '::after': {\n            right: `calc(-1 * ${tokens.spacingHorizontalMNudge})`\n        }\n    },\n    large: {\n        fontSize: iconSizes.large,\n        marginLeft: tokens.spacingHorizontalSNudge,\n        '::after': {\n            right: `calc(-1 * ${tokens.spacingHorizontalM})`\n        }\n    },\n    disabled: {\n        color: tokens.colorNeutralForegroundDisabled,\n        cursor: 'not-allowed'\n    }\n});\n/**\n * Apply styling to the Combobox slots based on the state\n */ export const useComboboxStyles_unstable = (state)=>{\n    const { appearance, open, size, showClearIcon } = 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    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(comboboxClassNames.root, styles.root, styles[appearance], styles[size], !disabled && appearance === 'outline' && styles.outlineInteractive, invalid && appearance !== 'underline' && styles.invalid, invalid && appearance === 'underline' && styles.invalidUnderline, disabled && styles.disabled, state.root.className);\n    // eslint-disable-next-line react-hooks/immutability\n    state.input.className = mergeClasses(comboboxClassNames.input, inputStyles.input, inputStyles[size], disabled && inputStyles.disabled, state.input.className);\n    if (state.listbox) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.listbox.className = mergeClasses(comboboxClassNames.listbox, styles.listbox, state.inlinePopup && styles.inlineListbox, !open && styles.listboxCollapsed, state.listbox.className);\n    }\n    if (state.expandIcon) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.expandIcon.className = mergeClasses(comboboxClassNames.expandIcon, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, showClearIcon && iconStyles.visuallyHidden, state.expandIcon.className);\n    }\n    if (state.clearIcon) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.clearIcon.className = mergeClasses(comboboxClassNames.clearIcon, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, !showClearIcon && iconStyles.hidden, state.clearIcon.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAASA,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAChE,SAAAC,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,SAAS,QAAQ,+BAA+B;AACzD,OAAO,MAAMC,kBAAkB,GAAG;EAC9BC,IAAI,EAAE,cAAc;EACpBC,KAAK,EAAE,qBAAqB;EAC5BC,UAAU,EAAE,0BAA0B;EACtCC,SAAS,EAAE,yBAAyB;EACpCC,OAAO,EAAE;AACb,CAAC;AACD;AACA,MAAMC,YAAY,GAAG;EACjBC,KAAK,EAAE,MAAM;EACbC,MAAM,EAAE,MAAM;EACdC,KAAK,EAAE;AACX,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGd,QAAA;EAAAK,IAAA;IAAAU,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAjD,OAAA;IAAAkD,MAAA;IAAA3C,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAwC,OAAA;IAAAvC,OAAA;EAAA;EAAAwC,gBAAA;IAAAtC,MAAA;EAAA;EAAAuC,aAAA;IAAAC,OAAA;EAAA;EAAApD,KAAA;IAAAqD,OAAA;IAAAC,MAAA;EAAA;EAAArD,MAAA;IAAAoD,OAAA;IAAAC,MAAA;EAAA;EAAApD,KAAA;IAAAS,MAAA;IAAA0C,OAAA;IAAAC,MAAA;EAAA;EAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,kBAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,SAAA;IAAA/B,MAAA;IAAAE,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAH,OAAA;IAAApD,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAA;IAAA+C,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAA;IAAAjB,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAe,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,gBAAA;IAAAF,MAAA;EAAA;EAAAG,QAAA;IAAAC,OAAA;IAAAvC,MAAA;IAAAc,MAAA;IAAAJ,MAAA;IAAAR,OAAA;IAAAI,MAAA;IAAAkC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;EAAAC,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;EAAAC,CAAA;EAAAC,CAAA;AAAA,CAqIrB,CAAC;AACF,MAAMC,cAAc,gBAAGrH,QAAA;EAAAM,KAAA;IAAAgH,MAAA;IAAAnD,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAmC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAhH,KAAA;IAAA6G,OAAA;IAAAI,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAA/D,MAAA;IAAAgE,MAAA;IAAAC,OAAA;EAAA;EAAAtH,MAAA;IAAA4G,OAAA;IAAAI,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAA/D,MAAA;IAAAgE,MAAA;IAAAC,OAAA;EAAA;EAAArH,KAAA;IAAA2G,OAAA;IAAAI,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAA/D,MAAA;IAAAgE,MAAA;IAAAC,OAAA;EAAA;EAAAzB,QAAA;IAAAc,MAAA;IAAApD,MAAA;IAAAuC,OAAA;IAAAgB,MAAA;EAAA;AAAA;EAAAX,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;EAAAmB,CAAA;AAAA,CAoCtB,CAAC;AACF,MAAMC,aAAa,gBAAGpI,QAAA;EAAAqI,IAAA;IAAAhH,OAAA;IAAAkG,MAAA;IAAAb,OAAA;IAAAnF,MAAA;IAAAqG,OAAA;IAAAjG,MAAA;IAAA2G,OAAA;IAAArG,OAAA;IAAAC,MAAA;IAAAqG,MAAA;IAAAnG,OAAA;IAAAD,MAAA;IAAAE,OAAA;EAAA;EAAAmG,MAAA;IAAAjH,MAAA;EAAA;EAAAkH,cAAA;IAAAC,OAAA;IAAA1E,OAAA;IAAA2E,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAnB,OAAA;IAAAC,MAAA;IAAA/D,MAAA;IAAAgE,MAAA;IAAAC,OAAA;IAAAiB,MAAA;IAAAxH,MAAA;EAAA;EAAAhB,KAAA;IAAAiH,OAAA;IAAAgB,MAAA;IAAAvG,OAAA;EAAA;EAAAzB,MAAA;IAAAgH,OAAA;IAAAgB,MAAA;IAAAvG,OAAA;EAAA;EAAAxB,KAAA;IAAA+G,OAAA;IAAAgB,MAAA;IAAAvG,OAAA;EAAA;EAAAoE,QAAA;IAAAc,MAAA;IAAAb,OAAA;EAAA;AAAA;EAAAK,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAgErB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMoC,0BAA0B,GAAIC,KAAK,IAAG;EACnD,MAAM;IAAEC,UAAU;IAAEC,IAAI;IAAEC,IAAI;IAAEC;EAAc,CAAC,GAAGJ,KAAK;EACvD,MAAMlD,OAAO,GAAG,GAAGkD,KAAK,CAAC/I,KAAK,CAAC,cAAc,CAAC,EAAE,KAAK,MAAM;EAC3D,MAAMmG,QAAQ,GAAG4C,KAAK,CAAC/I,KAAK,CAACmG,QAAQ;EACrC,MAAMiD,MAAM,GAAG5I,SAAS,CAAC,CAAC;EAC1B,MAAM6I,UAAU,GAAGvB,aAAa,CAAC,CAAC;EAClC,MAAMwB,WAAW,GAAGvC,cAAc,CAAC,CAAC;EACpC;EACAgC,KAAK,CAAChJ,IAAI,CAACwJ,SAAS,GAAG5J,YAAY,CAACG,kBAAkB,CAACC,IAAI,EAAEqJ,MAAM,CAACrJ,IAAI,EAAEqJ,MAAM,CAACJ,UAAU,CAAC,EAAEI,MAAM,CAACF,IAAI,CAAC,EAAE,CAAC/C,QAAQ,IAAI6C,UAAU,KAAK,SAAS,IAAII,MAAM,CAACrE,kBAAkB,EAAEc,OAAO,IAAImD,UAAU,KAAK,WAAW,IAAII,MAAM,CAACvD,OAAO,EAAEA,OAAO,IAAImD,UAAU,KAAK,WAAW,IAAII,MAAM,CAAClD,gBAAgB,EAAEC,QAAQ,IAAIiD,MAAM,CAACjD,QAAQ,EAAE4C,KAAK,CAAChJ,IAAI,CAACwJ,SAAS,CAAC;EAC7V;EACAR,KAAK,CAAC/I,KAAK,CAACuJ,SAAS,GAAG5J,YAAY,CAACG,kBAAkB,CAACE,KAAK,EAAEsJ,WAAW,CAACtJ,KAAK,EAAEsJ,WAAW,CAACJ,IAAI,CAAC,EAAE/C,QAAQ,IAAImD,WAAW,CAACnD,QAAQ,EAAE4C,KAAK,CAAC/I,KAAK,CAACuJ,SAAS,CAAC;EAC7J,IAAIR,KAAK,CAAC5I,OAAO,EAAE;IACf;IACA4I,KAAK,CAAC5I,OAAO,CAACoJ,SAAS,GAAG5J,YAAY,CAACG,kBAAkB,CAACK,OAAO,EAAEiJ,MAAM,CAACjJ,OAAO,EAAE4I,KAAK,CAACS,WAAW,IAAIJ,MAAM,CAAC5F,aAAa,EAAE,CAACyF,IAAI,IAAIG,MAAM,CAAC7F,gBAAgB,EAAEwF,KAAK,CAAC5I,OAAO,CAACoJ,SAAS,CAAC;EAC5L;EACA,IAAIR,KAAK,CAAC9I,UAAU,EAAE;IAClB;IACA8I,KAAK,CAAC9I,UAAU,CAACsJ,SAAS,GAAG5J,YAAY,CAACG,kBAAkB,CAACG,UAAU,EAAEoJ,UAAU,CAACtB,IAAI,EAAEsB,UAAU,CAACH,IAAI,CAAC,EAAE/C,QAAQ,IAAIkD,UAAU,CAAClD,QAAQ,EAAEgD,aAAa,IAAIE,UAAU,CAAClB,cAAc,EAAEY,KAAK,CAAC9I,UAAU,CAACsJ,SAAS,CAAC;EACxN;EACA,IAAIR,KAAK,CAAC7I,SAAS,EAAE;IACjB;IACA6I,KAAK,CAAC7I,SAAS,CAACqJ,SAAS,GAAG5J,YAAY,CAACG,kBAAkB,CAACI,SAAS,EAAEmJ,UAAU,CAACtB,IAAI,EAAEsB,UAAU,CAACH,IAAI,CAAC,EAAE/C,QAAQ,IAAIkD,UAAU,CAAClD,QAAQ,EAAE,CAACgD,aAAa,IAAIE,UAAU,CAACnB,MAAM,EAAEa,KAAK,CAAC7I,SAAS,CAACqJ,SAAS,CAAC;EAC9M;EACA,OAAOR,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/Combobox/useComboboxStyles.styles.raw.js

@@ -1,7 +1,7 @@
 'use client';
-import { tokens, typographyStyles } from '@fluentui/react-theme';
-import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
-import { iconSizes } from '../../utils/internalTokens';
+import { tokens, typographyStyles } from "@fluentui/react-theme";
+import { makeStyles, mergeClasses, shorthands } from "@griffel/react";
+import { iconSizes } from "../../utils/internalTokens.js";
 export const comboboxClassNames = {
     root: 'fui-Combobox',
     input: 'fui-Combobox__input',

package/lib/components/Combobox/useComboboxStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Combobox/useComboboxStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { 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  clearIcon: 'fui-Combobox__clearIcon',\n  listbox: 'fui-Combobox__listbox',\n};\n\n// Matches internal heights for Select and Input, but there are no theme variables for these\nconst fieldHeights = {\n  small: '24px',\n  medium: '32px',\n  large: '40px',\n};\n\n/**\n * Styles for Combobox\n */\nconst useStyles = makeStyles({\n  root: {\n    alignItems: 'center',\n    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    verticalAlign: 'middle',\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      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    borderRadius: tokens.borderRadiusMedium,\n    maxHeight: '80vh',\n    boxSizing: 'border-box',\n  },\n\n  listboxCollapsed: {\n    display: 'none',\n  },\n\n  // When rendering inline, the popupSurface will be rendered under relatively positioned elements such as Input.\n  // This is due to the surface being positioned as absolute, therefore zIndex: 1 ensures that won't happen.\n  inlineListbox: {\n    zIndex: 1,\n  },\n\n  // size variants\n  small: {\n    height: fieldHeights.small,\n    paddingRight: tokens.spacingHorizontalSNudge,\n  },\n  medium: {\n    height: fieldHeights.medium,\n    paddingRight: tokens.spacingHorizontalMNudge,\n  },\n  large: {\n    columnGap: tokens.spacingHorizontalSNudge,\n    height: fieldHeights.large,\n    paddingRight: tokens.spacingHorizontalM,\n  },\n\n  // appearance variants\n  outline: {\n    backgroundColor: tokens.colorNeutralBackground1,\n    border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n    borderBottomColor: tokens.colorNeutralStrokeAccessible,\n  },\n  outlineInteractive: {\n    '&:hover': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n      borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n    },\n\n    '&:active': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n      borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n    },\n\n    '&:focus-within': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n      borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n    },\n  },\n  underline: {\n    backgroundColor: tokens.colorTransparentBackground,\n    borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,\n    borderRadius: '0',\n  },\n  'filled-lighter': {\n    backgroundColor: tokens.colorNeutralBackground1,\n    border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n  },\n  'filled-darker': {\n    backgroundColor: tokens.colorNeutralBackground3,\n    border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n  },\n  invalid: {\n    ':not(:focus-within),:hover:not(:focus-within)': {\n      ...shorthands.borderColor(tokens.colorPaletteRedBorder2),\n    },\n  },\n  invalidUnderline: {\n    ':not(:focus-within),:hover:not(:focus-within)': {\n      borderBottomColor: tokens.colorPaletteRedBorder2,\n    },\n  },\n\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    alignSelf: 'stretch',\n    backgroundColor: tokens.colorTransparentBackground,\n    border: 'none',\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    ...typographyStyles.caption1,\n    padding: `0 0 0 ${`calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`}`,\n  },\n  medium: {\n    ...typographyStyles.body1,\n    padding: `0 0 0 ${`calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`}`,\n  },\n  large: {\n    ...typographyStyles.body2,\n    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    // position: relative provides the containing block for the ::after clickable-area extension below.\n    position: 'relative',\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    // Extend the clickable area to cover the root's right paddingRight \"dead zone\".\n    // Without this, clicking between the icon and the right border does not trigger the icon's handler.\n    // The negative `right` is overridden per size variant below to match the root's paddingRight.\n    '::after': {\n      content: '\"\"',\n      position: 'absolute',\n      top: 0,\n      bottom: 0,\n      left: 0,\n      right: 0,\n    },\n  },\n  hidden: {\n    display: 'none',\n  },\n  visuallyHidden: {\n    clip: 'rect(0px, 0px, 0px, 0px)',\n    height: '1px',\n    margin: '-1px',\n    overflow: 'hidden',\n    padding: '0px',\n    width: '1px',\n    position: 'absolute',\n  },\n\n  // icon size variants\n  small: {\n    fontSize: iconSizes.small,\n    marginLeft: tokens.spacingHorizontalXXS,\n    '::after': {\n      right: `calc(-1 * ${tokens.spacingHorizontalSNudge})`,\n    },\n  },\n  medium: {\n    fontSize: iconSizes.medium,\n    marginLeft: tokens.spacingHorizontalXXS,\n    '::after': {\n      right: `calc(-1 * ${tokens.spacingHorizontalMNudge})`,\n    },\n  },\n  large: {\n    fontSize: iconSizes.large,\n    marginLeft: tokens.spacingHorizontalSNudge,\n    '::after': {\n      right: `calc(-1 * ${tokens.spacingHorizontalM})`,\n    },\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, showClearIcon } = 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  // eslint-disable-next-line react-hooks/immutability\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  // eslint-disable-next-line react-hooks/immutability\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    // eslint-disable-next-line react-hooks/immutability\n    state.listbox.className = mergeClasses(\n      comboboxClassNames.listbox,\n      styles.listbox,\n      state.inlinePopup && styles.inlineListbox,\n      !open && styles.listboxCollapsed,\n      state.listbox.className,\n    );\n  }\n\n  if (state.expandIcon) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.expandIcon.className = mergeClasses(\n      comboboxClassNames.expandIcon,\n      iconStyles.icon,\n      iconStyles[size],\n      disabled && iconStyles.disabled,\n      showClearIcon && iconStyles.visuallyHidden,\n      state.expandIcon.className,\n    );\n  }\n\n  if (state.clearIcon) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.clearIcon.className = mergeClasses(\n      comboboxClassNames.clearIcon,\n      iconStyles.icon,\n      iconStyles[size],\n      disabled && iconStyles.disabled,\n      !showClearIcon && iconStyles.hidden,\n      state.clearIcon.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["tokens","typographyStyles","makeStyles","mergeClasses","shorthands","iconSizes","comboboxClassNames","root","input","expandIcon","clearIcon","listbox","fieldHeights","small","medium","large","useStyles","alignItems","borderRadius","borderRadiusMedium","boxSizing","columnGap","spacingHorizontalXXS","display","gridTemplateColumns","justifyContent","minWidth","position","verticalAlign","outlineWidth","outlineStyle","outlineColor","content","left","bottom","right","height","borderBottomLeftRadius","borderBottomRightRadius","borderBottom","strokeWidthThick","colorCompoundBrandStroke","clipPath","transform","transitionProperty","transitionDuration","durationUltraFast","transitionDelay","curveAccelerateMid","durationNormal","curveDecelerateMid","borderBottomColor","colorCompoundBrandStrokePressed","boxShadow","shadow16","maxHeight","listboxCollapsed","inlineListbox","zIndex","paddingRight","spacingHorizontalSNudge","spacingHorizontalMNudge","spacingHorizontalM","outline","backgroundColor","colorNeutralBackground1","border","strokeWidthThin","colorNeutralStroke1","colorNeutralStrokeAccessible","outlineInteractive","borderColor","colorNeutralStroke1Hover","colorNeutralStrokeAccessibleHover","colorNeutralStroke1Pressed","colorNeutralStrokeAccessiblePressed","underline","colorTransparentBackground","colorTransparentStroke","colorNeutralBackground3","invalid","colorPaletteRedBorder2","invalidUnderline","disabled","cursor","colorNeutralStrokeDisabled","useInputStyles","alignSelf","color","colorNeutralForeground1","fontFamily","fontFamilyBase","colorNeutralForeground4","opacity","caption1","padding","body1","body2","colorNeutralForegroundDisabled","useIconStyles","icon","fontSize","fontSizeBase500","top","hidden","visuallyHidden","clip","margin","overflow","width","marginLeft","useComboboxStyles_unstable","state","appearance","open","size","showClearIcon","styles","iconStyles","inputStyles","className","inlinePopup"],"mappings":"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"}
+{"version":3,"sources":["../src/components/Combobox/useComboboxStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { 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  clearIcon: 'fui-Combobox__clearIcon',\n  listbox: 'fui-Combobox__listbox',\n};\n\n// Matches internal heights for Select and Input, but there are no theme variables for these\nconst fieldHeights = {\n  small: '24px',\n  medium: '32px',\n  large: '40px',\n};\n\n/**\n * Styles for Combobox\n */\nconst useStyles = makeStyles({\n  root: {\n    alignItems: 'center',\n    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    verticalAlign: 'middle',\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      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    borderRadius: tokens.borderRadiusMedium,\n    maxHeight: '80vh',\n    boxSizing: 'border-box',\n  },\n\n  listboxCollapsed: {\n    display: 'none',\n  },\n\n  // When rendering inline, the popupSurface will be rendered under relatively positioned elements such as Input.\n  // This is due to the surface being positioned as absolute, therefore zIndex: 1 ensures that won't happen.\n  inlineListbox: {\n    zIndex: 1,\n  },\n\n  // size variants\n  small: {\n    height: fieldHeights.small,\n    paddingRight: tokens.spacingHorizontalSNudge,\n  },\n  medium: {\n    height: fieldHeights.medium,\n    paddingRight: tokens.spacingHorizontalMNudge,\n  },\n  large: {\n    columnGap: tokens.spacingHorizontalSNudge,\n    height: fieldHeights.large,\n    paddingRight: tokens.spacingHorizontalM,\n  },\n\n  // appearance variants\n  outline: {\n    backgroundColor: tokens.colorNeutralBackground1,\n    border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n    borderBottomColor: tokens.colorNeutralStrokeAccessible,\n  },\n  outlineInteractive: {\n    '&:hover': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n      borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n    },\n\n    '&:active': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n      borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n    },\n\n    '&:focus-within': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n      borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n    },\n  },\n  underline: {\n    backgroundColor: tokens.colorTransparentBackground,\n    borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,\n    borderRadius: '0',\n  },\n  'filled-lighter': {\n    backgroundColor: tokens.colorNeutralBackground1,\n    border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n  },\n  'filled-darker': {\n    backgroundColor: tokens.colorNeutralBackground3,\n    border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n  },\n  invalid: {\n    ':not(:focus-within),:hover:not(:focus-within)': {\n      ...shorthands.borderColor(tokens.colorPaletteRedBorder2),\n    },\n  },\n  invalidUnderline: {\n    ':not(:focus-within),:hover:not(:focus-within)': {\n      borderBottomColor: tokens.colorPaletteRedBorder2,\n    },\n  },\n\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    alignSelf: 'stretch',\n    backgroundColor: tokens.colorTransparentBackground,\n    border: 'none',\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    ...typographyStyles.caption1,\n    padding: `0 0 0 ${`calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`}`,\n  },\n  medium: {\n    ...typographyStyles.body1,\n    padding: `0 0 0 ${`calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`}`,\n  },\n  large: {\n    ...typographyStyles.body2,\n    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    // position: relative provides the containing block for the ::after clickable-area extension below.\n    position: 'relative',\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    // Extend the clickable area to cover the root's right paddingRight \"dead zone\".\n    // Without this, clicking between the icon and the right border does not trigger the icon's handler.\n    // The negative `right` is overridden per size variant below to match the root's paddingRight.\n    '::after': {\n      content: '\"\"',\n      position: 'absolute',\n      top: 0,\n      bottom: 0,\n      left: 0,\n      right: 0,\n    },\n  },\n  hidden: {\n    display: 'none',\n  },\n  visuallyHidden: {\n    clip: 'rect(0px, 0px, 0px, 0px)',\n    height: '1px',\n    margin: '-1px',\n    overflow: 'hidden',\n    padding: '0px',\n    width: '1px',\n    position: 'absolute',\n  },\n\n  // icon size variants\n  small: {\n    fontSize: iconSizes.small,\n    marginLeft: tokens.spacingHorizontalXXS,\n    '::after': {\n      right: `calc(-1 * ${tokens.spacingHorizontalSNudge})`,\n    },\n  },\n  medium: {\n    fontSize: iconSizes.medium,\n    marginLeft: tokens.spacingHorizontalXXS,\n    '::after': {\n      right: `calc(-1 * ${tokens.spacingHorizontalMNudge})`,\n    },\n  },\n  large: {\n    fontSize: iconSizes.large,\n    marginLeft: tokens.spacingHorizontalSNudge,\n    '::after': {\n      right: `calc(-1 * ${tokens.spacingHorizontalM})`,\n    },\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, showClearIcon } = 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  // eslint-disable-next-line react-hooks/immutability\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  // eslint-disable-next-line react-hooks/immutability\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    // eslint-disable-next-line react-hooks/immutability\n    state.listbox.className = mergeClasses(\n      comboboxClassNames.listbox,\n      styles.listbox,\n      state.inlinePopup && styles.inlineListbox,\n      !open && styles.listboxCollapsed,\n      state.listbox.className,\n    );\n  }\n\n  if (state.expandIcon) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.expandIcon.className = mergeClasses(\n      comboboxClassNames.expandIcon,\n      iconStyles.icon,\n      iconStyles[size],\n      disabled && iconStyles.disabled,\n      showClearIcon && iconStyles.visuallyHidden,\n      state.expandIcon.className,\n    );\n  }\n\n  if (state.clearIcon) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.clearIcon.className = mergeClasses(\n      comboboxClassNames.clearIcon,\n      iconStyles.icon,\n      iconStyles[size],\n      disabled && iconStyles.disabled,\n      !showClearIcon && iconStyles.hidden,\n      state.clearIcon.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["tokens","typographyStyles","makeStyles","mergeClasses","shorthands","iconSizes","comboboxClassNames","root","input","expandIcon","clearIcon","listbox","fieldHeights","small","medium","large","useStyles","alignItems","borderRadius","borderRadiusMedium","boxSizing","columnGap","spacingHorizontalXXS","display","gridTemplateColumns","justifyContent","minWidth","position","verticalAlign","outlineWidth","outlineStyle","outlineColor","content","left","bottom","right","height","borderBottomLeftRadius","borderBottomRightRadius","borderBottom","strokeWidthThick","colorCompoundBrandStroke","clipPath","transform","transitionProperty","transitionDuration","durationUltraFast","transitionDelay","curveAccelerateMid","durationNormal","curveDecelerateMid","borderBottomColor","colorCompoundBrandStrokePressed","boxShadow","shadow16","maxHeight","listboxCollapsed","inlineListbox","zIndex","paddingRight","spacingHorizontalSNudge","spacingHorizontalMNudge","spacingHorizontalM","outline","backgroundColor","colorNeutralBackground1","border","strokeWidthThin","colorNeutralStroke1","colorNeutralStrokeAccessible","outlineInteractive","borderColor","colorNeutralStroke1Hover","colorNeutralStrokeAccessibleHover","colorNeutralStroke1Pressed","colorNeutralStrokeAccessiblePressed","underline","colorTransparentBackground","colorTransparentStroke","colorNeutralBackground3","invalid","colorPaletteRedBorder2","invalidUnderline","disabled","cursor","colorNeutralStrokeDisabled","useInputStyles","alignSelf","color","colorNeutralForeground1","fontFamily","fontFamilyBase","colorNeutralForeground4","opacity","caption1","padding","body1","body2","colorNeutralForegroundDisabled","useIconStyles","icon","fontSize","fontSizeBase500","top","hidden","visuallyHidden","clip","margin","overflow","width","marginLeft","useComboboxStyles_unstable","state","appearance","open","size","showClearIcon","styles","iconStyles","inputStyles","className","inlinePopup"],"mappings":"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"}

package/lib/components/Combobox/useInputTriggerSlot.js

@@ -1,9 +1,9 @@
 'use client';
-import * as React from 'react';
-import { mergeCallbacks, useEventCallback } from '@fluentui/react-utilities';
-import { ArrowLeft, ArrowRight } from '@fluentui/keyboard-keys';
-import { useTriggerSlot } from '../../utils/useTriggerSlot';
-import { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';
+import * as React from "react";
+import { mergeCallbacks, useEventCallback } from "@fluentui/react-utilities";
+import { ArrowLeft, ArrowRight } from "@fluentui/keyboard-keys";
+import { useTriggerSlot } from "../../utils/useTriggerSlot.js";
+import { getDropdownActionFromKey } from "../../utils/dropdownKeyActions.js";
 /**
  * useInputTriggerSlot returns a tuple of trigger/listbox shorthand,
  * with the semantics and event handlers needed for the Combobox and Dropdown components.