@fluentui/react-select 9.4.15 → 9.5.0

package/CHANGELOG.md

@@ -1,12 +1,31 @@
 # Change Log - @fluentui/react-select
 
-This log was last generated on Wed, 25 Feb 2026 13:28:23 GMT and should not be manually modified.
+This log was last generated on Wed, 01 Apr 2026 15:50:22 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.5.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-select_v9.5.0)
+
+Wed, 01 Apr 2026 15:50:22 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-select_v9.4.16..@fluentui/react-select_v9.5.0)
+
+### Minor changes
+
+- feat(react-select): add useSelectBase_unstable hook ([PR #35906](https://github.com/microsoft/fluentui/pull/35906) by dmytrokirpa@microsoft.com)
+- Bump @fluentui/react-field to v9.5.0 ([PR #35912](https://github.com/microsoft/fluentui/pull/35912) by beachball)
+
+## [9.4.16](https://github.com/microsoft/fluentui/tree/@fluentui/react-select_v9.4.16)
+
+Wed, 11 Mar 2026 09:22:22 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-select_v9.4.15..@fluentui/react-select_v9.4.16)
+
+### Patches
+
+- Bump @fluentui/react-field to v9.4.16 ([PR #35859](https://github.com/microsoft/fluentui/pull/35859) by beachball)
+
 ## [9.4.15](https://github.com/microsoft/fluentui/tree/@fluentui/react-select_v9.4.15)
 
-Wed, 25 Feb 2026 13:28:23 GMT 
+Wed, 25 Feb 2026 13:32:28 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-select_v9.4.14..@fluentui/react-select_v9.4.15)
 
 ### Patches

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
+import type { DistributiveOmit } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import type { JSXElement } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
@@ -9,13 +10,17 @@ import { SlotClassNames } from '@fluentui/react-utilities';
 /**
  * Render the final JSX of Select
  */
-export declare const renderSelect_unstable: (state: SelectState) => JSXElement;
+export declare const renderSelect_unstable: (state: SelectBaseState) => JSXElement;
 
 /**
  * Select component
  */
 export declare const Select: ForwardRefComponent<SelectProps>;
 
+export declare type SelectBaseProps = DistributiveOmit<SelectProps, 'appearance' | 'size'>;
+
+export declare type SelectBaseState = DistributiveOmit<SelectState, 'appearance' | 'size'>;
+
 export declare const selectClassNames: SlotClassNames<SelectSlots>;
 
 /**
@@ -68,6 +73,14 @@ export declare type SelectState = ComponentState<SelectSlots> & Required<Pick<Se
  */
 export declare const useSelect_unstable: (props: SelectProps, ref: React_2.Ref<HTMLSelectElement>) => SelectState;
 
+/**
+ * Create the base state required to render Select without design-specific props.
+ *
+ * @param props - props from this instance of Select (without appearance/size)
+ * @param ref - reference to the `<select>` element in Select
+ */
+export declare const useSelectBase_unstable: (props: SelectBaseProps, ref: React_2.Ref<HTMLSelectElement>) => SelectBaseState;
+
 /**
  * Apply styling to the Select slots based on the state
  */

package/lib/Select.js

@@ -1 +1 @@
-export { Select, renderSelect_unstable, selectClassNames, useSelectStyles_unstable, useSelect_unstable } from './components/Select/index';
+export { Select, renderSelect_unstable, selectClassNames, useSelectStyles_unstable, useSelectBase_unstable, useSelect_unstable } from './components/Select/index';

package/lib/Select.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Select.ts"],"sourcesContent":["export type { SelectOnChangeData, SelectProps, SelectSlots, SelectState } from './components/Select/index';\nexport {\n  Select,\n  renderSelect_unstable,\n  selectClassNames,\n  useSelectStyles_unstable,\n  useSelect_unstable,\n} from './components/Select/index';\n"],"names":["Select","renderSelect_unstable","selectClassNames","useSelectStyles_unstable","useSelect_unstable"],"mappings":"AACA,SACEA,MAAM,EACNC,qBAAqB,EACrBC,gBAAgB,EAChBC,wBAAwB,EACxBC,kBAAkB,QACb,4BAA4B"}
+{"version":3,"sources":["../src/Select.ts"],"sourcesContent":["export type {\n  SelectBaseProps,\n  SelectBaseState,\n  SelectOnChangeData,\n  SelectProps,\n  SelectSlots,\n  SelectState,\n} from './components/Select/index';\nexport {\n  Select,\n  renderSelect_unstable,\n  selectClassNames,\n  useSelectStyles_unstable,\n  useSelectBase_unstable,\n  useSelect_unstable,\n} from './components/Select/index';\n"],"names":["Select","renderSelect_unstable","selectClassNames","useSelectStyles_unstable","useSelectBase_unstable","useSelect_unstable"],"mappings":"AAQA,SACEA,MAAM,EACNC,qBAAqB,EACrBC,gBAAgB,EAChBC,wBAAwB,EACxBC,sBAAsB,EACtBC,kBAAkB,QACb,4BAA4B"}

package/lib/components/Select/Select.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Select/Select.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type SelectSlots = {\n  /*\n   * Wrapper for both the select and icon, renders as a `<span>`.\n   * The `className` and `style` props on `<Select>` are applied to this slot;\n   * All other top-level props are applied to the primary slot, `select`.\n   */\n  root: NonNullable<Slot<'span'>>;\n\n  /** Primary slot: the actual `<select>` element */\n  select: NonNullable<Slot<'select'>>;\n\n  /** the icon, typically a down arrow */\n  icon: Slot<'span'>;\n};\n\nexport type SelectProps = Omit<ComponentProps<Partial<SelectSlots>, 'select'>, 'size' | 'onChange'> & {\n  /**\n   * Controls the colors and borders of the Select.\n   *\n   * @default 'outline'\n   */\n  appearance?: 'outline' | 'underline' | 'filled-darker' | 'filled-lighter';\n\n  /**\n   * Called when the user changes the select element's value by selecting an option.\n   */\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n  onChange?: (ev: React.ChangeEvent<HTMLSelectElement>, data: SelectOnChangeData) => void;\n\n  /**\n   * Matches the Input sizes\n   *\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium' | 'large';\n};\n\nexport type SelectState = ComponentState<SelectSlots> & Required<Pick<SelectProps, 'appearance' | 'size'>>;\n\n/**\n * Data passed to the `onChange` callback when a new option is selected.\n */\nexport type SelectOnChangeData = {\n  /**\n   * Updated `<select>` value, taken from either the selected option's value prop or inner text.\n   */\n  value: string;\n};\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
+{"version":3,"sources":["../src/components/Select/Select.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, DistributiveOmit, Slot } from '@fluentui/react-utilities';\n\nexport type SelectSlots = {\n  /*\n   * Wrapper for both the select and icon, renders as a `<span>`.\n   * The `className` and `style` props on `<Select>` are applied to this slot;\n   * All other top-level props are applied to the primary slot, `select`.\n   */\n  root: NonNullable<Slot<'span'>>;\n\n  /** Primary slot: the actual `<select>` element */\n  select: NonNullable<Slot<'select'>>;\n\n  /** the icon, typically a down arrow */\n  icon: Slot<'span'>;\n};\n\nexport type SelectProps = Omit<ComponentProps<Partial<SelectSlots>, 'select'>, 'size' | 'onChange'> & {\n  /**\n   * Controls the colors and borders of the Select.\n   *\n   * @default 'outline'\n   */\n  appearance?: 'outline' | 'underline' | 'filled-darker' | 'filled-lighter';\n\n  /**\n   * Called when the user changes the select element's value by selecting an option.\n   */\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n  onChange?: (ev: React.ChangeEvent<HTMLSelectElement>, data: SelectOnChangeData) => void;\n\n  /**\n   * Matches the Input sizes\n   *\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium' | 'large';\n};\n\nexport type SelectState = ComponentState<SelectSlots> & Required<Pick<SelectProps, 'appearance' | 'size'>>;\n\nexport type SelectBaseProps = DistributiveOmit<SelectProps, 'appearance' | 'size'>;\nexport type SelectBaseState = DistributiveOmit<SelectState, 'appearance' | 'size'>;\n\n/**\n * Data passed to the `onChange` callback when a new option is selected.\n */\nexport type SelectOnChangeData = {\n  /**\n   * Updated `<select>` value, taken from either the selected option's value prop or inner text.\n   */\n  value: string;\n};\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}

package/lib/components/Select/index.js

@@ -1,4 +1,4 @@
 export { Select } from './Select';
 export { renderSelect_unstable } from './renderSelect';
-export { useSelect_unstable } from './useSelect';
+export { useSelectBase_unstable, useSelect_unstable } from './useSelect';
 export { selectClassNames, useSelectStyles_unstable } from './useSelectStyles.styles';

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Select/index.ts"],"sourcesContent":["export { Select } from './Select';\nexport type { SelectOnChangeData, SelectProps, SelectSlots, SelectState } from './Select.types';\nexport { renderSelect_unstable } from './renderSelect';\nexport { useSelect_unstable } from './useSelect';\nexport { selectClassNames, useSelectStyles_unstable } from './useSelectStyles.styles';\n"],"names":["Select","renderSelect_unstable","useSelect_unstable","selectClassNames","useSelectStyles_unstable"],"mappings":"AAAA,SAASA,MAAM,QAAQ,WAAW;AAElC,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,kBAAkB,QAAQ,cAAc;AACjD,SAASC,gBAAgB,EAAEC,wBAAwB,QAAQ,2BAA2B"}
+{"version":3,"sources":["../src/components/Select/index.ts"],"sourcesContent":["export { Select } from './Select';\nexport type {\n  SelectBaseProps,\n  SelectBaseState,\n  SelectOnChangeData,\n  SelectProps,\n  SelectSlots,\n  SelectState,\n} from './Select.types';\nexport { renderSelect_unstable } from './renderSelect';\nexport { useSelectBase_unstable, useSelect_unstable } from './useSelect';\nexport { selectClassNames, useSelectStyles_unstable } from './useSelectStyles.styles';\n"],"names":["Select","renderSelect_unstable","useSelectBase_unstable","useSelect_unstable","selectClassNames","useSelectStyles_unstable"],"mappings":"AAAA,SAASA,MAAM,QAAQ,WAAW;AASlC,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,sBAAsB,EAAEC,kBAAkB,QAAQ,cAAc;AACzE,SAASC,gBAAgB,EAAEC,wBAAwB,QAAQ,2BAA2B"}

package/lib/components/Select/renderSelect.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Select/renderSelect.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { SelectSlots, SelectState } from './Select.types';\n\n/**\n * Render the final JSX of Select\n */\nexport const renderSelect_unstable = (state: SelectState): JSXElement => {\n  assertSlots<SelectSlots>(state);\n  return (\n    <state.root>\n      <state.select>{state.select.children}</state.select>\n      {state.icon && <state.icon />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderSelect_unstable","state","root","select","children","icon"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,wBAAwB,CAACC;IACpCF,YAAyBE;IACzB,qBACE,MAACA,MAAMC,IAAI;;0BACT,KAACD,MAAME,MAAM;0BAAEF,MAAME,MAAM,CAACC,QAAQ;;YACnCH,MAAMI,IAAI,kBAAI,KAACJ,MAAMI,IAAI;;;AAGhC,EAAE"}
+{"version":3,"sources":["../src/components/Select/renderSelect.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { SelectBaseState, SelectSlots } from './Select.types';\n\n/**\n * Render the final JSX of Select\n */\nexport const renderSelect_unstable = (state: SelectBaseState): JSXElement => {\n  assertSlots<SelectSlots>(state);\n  return (\n    <state.root>\n      <state.select>{state.select.children}</state.select>\n      {state.icon && <state.icon />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderSelect_unstable","state","root","select","children","icon"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,wBAAwB,CAACC;IACpCF,YAAyBE;IACzB,qBACE,MAACA,MAAMC,IAAI;;0BACT,KAACD,MAAME,MAAM;0BAAEF,MAAME,MAAM,CAACC,QAAQ;;YACnCH,MAAMI,IAAI,kBAAI,KAACJ,MAAMI,IAAI;;;AAGhC,EAAE"}

package/lib/components/Select/useSelect.js

@@ -21,21 +21,36 @@ import { useOverrides_unstable as useOverrides } from '@fluentui/react-shared-co
     });
     const overrides = useOverrides();
     var _overrides_inputDefaultAppearance;
-    const { defaultValue, value, select, icon, root, appearance = (_overrides_inputDefaultAppearance = overrides.inputDefaultAppearance) !== null && _overrides_inputDefaultAppearance !== void 0 ? _overrides_inputDefaultAppearance : 'outline', onChange, size = 'medium' } = props;
+    const { appearance = (_overrides_inputDefaultAppearance = overrides.inputDefaultAppearance) !== null && _overrides_inputDefaultAppearance !== void 0 ? _overrides_inputDefaultAppearance : 'outline', size = 'medium', ...baseProps } = props;
+    const state = useSelectBase_unstable(baseProps, ref);
+    if (state.icon) {
+        var _state_icon;
+        var _children;
+        (_children = (_state_icon = state.icon).children) !== null && _children !== void 0 ? _children : _state_icon.children = /*#__PURE__*/ React.createElement(ChevronDownRegular, null);
+    }
+    return {
+        ...state,
+        appearance,
+        size
+    };
+};
+/**
+ * Create the base state required to render Select without design-specific props.
+ *
+ * @param props - props from this instance of Select (without appearance/size)
+ * @param ref - reference to the `<select>` element in Select
+ */ export const useSelectBase_unstable = (props, ref)=>{
+    const { defaultValue, value, select, icon, root, onChange } = props;
     const nativeProps = getPartitionedNativeProps({
         props,
         primarySlotTagName: 'select',
         excludedPropNames: [
-            'appearance',
             'defaultValue',
             'onChange',
-            'size',
             'value'
         ]
     });
     const state = {
-        size,
-        appearance,
         components: {
             root: 'span',
             select: 'select',
@@ -52,9 +67,6 @@ import { useOverrides_unstable as useOverrides } from '@fluentui/react-shared-co
         }),
         icon: slot.optional(icon, {
             renderByDefault: true,
-            defaultProps: {
-                children: /*#__PURE__*/ React.createElement(ChevronDownRegular, null)
-            },
             elementType: 'span'
         }),
         root: slot.always(root, {

package/lib/components/Select/useSelect.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Select/useSelect.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { getPartitionedNativeProps, useEventCallback, slot } from '@fluentui/react-utilities';\nimport { ChevronDownRegular } from '@fluentui/react-icons';\nimport type { SelectProps, SelectState } from './Select.types';\nimport { useOverrides_unstable as useOverrides } from '@fluentui/react-shared-contexts';\n\n/**\n * Create the state required to render Select.\n *\n * The returned state can be modified with hooks such as useSelectStyles,\n * before being passed to renderSelect.\n *\n * @param props - props from this instance of Select\n * @param ref - reference to the `<select>` element in Select\n */\nexport const useSelect_unstable = (props: SelectProps, ref: React.Ref<HTMLSelectElement>): SelectState => {\n  // Merge props from surrounding <Field>, if any\n  props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true, supportsSize: true });\n\n  const overrides = useOverrides();\n\n  const {\n    defaultValue,\n    value,\n    select,\n    icon,\n    root,\n    appearance = overrides.inputDefaultAppearance ?? 'outline',\n\n    onChange,\n    size = 'medium',\n  } = props;\n\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'select',\n    excludedPropNames: ['appearance', 'defaultValue', 'onChange', 'size', 'value'],\n  });\n\n  const state: SelectState = {\n    size,\n    appearance,\n    components: {\n      root: 'span',\n      select: 'select',\n      icon: 'span',\n    },\n    select: slot.always(select, {\n      defaultProps: {\n        defaultValue,\n        value,\n        ref,\n        ...nativeProps.primary,\n      },\n      elementType: 'select',\n    }),\n    icon: slot.optional(icon, {\n      renderByDefault: true,\n      defaultProps: { children: <ChevronDownRegular /> },\n      elementType: 'span',\n    }),\n    root: slot.always(root, {\n      defaultProps: nativeProps.root,\n      elementType: 'span',\n    }),\n  };\n\n  state.select.onChange = useEventCallback(event => {\n    onChange?.(event, { value: (event.target as HTMLSelectElement).value });\n  });\n\n  return state;\n};\n"],"names":["React","useFieldControlProps_unstable","getPartitionedNativeProps","useEventCallback","slot","ChevronDownRegular","useOverrides_unstable","useOverrides","useSelect_unstable","props","ref","supportsLabelFor","supportsRequired","supportsSize","overrides","defaultValue","value","select","icon","root","appearance","inputDefaultAppearance","onChange","size","nativeProps","primarySlotTagName","excludedPropNames","state","components","always","defaultProps","primary","elementType","optional","renderByDefault","children","event","target"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,6BAA6B,QAAQ,wBAAwB;AACtE,SAASC,yBAAyB,EAAEC,gBAAgB,EAAEC,IAAI,QAAQ,4BAA4B;AAC9F,SAASC,kBAAkB,QAAQ,wBAAwB;AAE3D,SAASC,yBAAyBC,YAAY,QAAQ,kCAAkC;AAExF;;;;;;;;CAQC,GACD,OAAO,MAAMC,qBAAqB,CAACC,OAAoBC;IACrD,+CAA+C;IAC/CD,QAAQR,8BAA8BQ,OAAO;QAAEE,kBAAkB;QAAMC,kBAAkB;QAAMC,cAAc;IAAK;IAElH,MAAMC,YAAYP;QAQHO;IANf,MAAM,EACJC,YAAY,EACZC,KAAK,EACLC,MAAM,EACNC,IAAI,EACJC,IAAI,EACJC,aAAaN,CAAAA,oCAAAA,UAAUO,sBAAsB,cAAhCP,+CAAAA,oCAAoC,SAAS,EAE1DQ,QAAQ,EACRC,OAAO,QAAQ,EAChB,GAAGd;IAEJ,MAAMe,cAActB,0BAA0B;QAC5CO;QACAgB,oBAAoB;QACpBC,mBAAmB;YAAC;YAAc;YAAgB;YAAY;YAAQ;SAAQ;IAChF;IAEA,MAAMC,QAAqB;QACzBJ;QACAH;QACAQ,YAAY;YACVT,MAAM;YACNF,QAAQ;YACRC,MAAM;QACR;QACAD,QAAQb,KAAKyB,MAAM,CAACZ,QAAQ;YAC1Ba,cAAc;gBACZf;gBACAC;gBACAN;gBACA,GAAGc,YAAYO,OAAO;YACxB;YACAC,aAAa;QACf;QACAd,MAAMd,KAAK6B,QAAQ,CAACf,MAAM;YACxBgB,iBAAiB;YACjBJ,cAAc;gBAAEK,wBAAU,oBAAC9B;YAAsB;YACjD2B,aAAa;QACf;QACAb,MAAMf,KAAKyB,MAAM,CAACV,MAAM;YACtBW,cAAcN,YAAYL,IAAI;YAC9Ba,aAAa;QACf;IACF;IAEAL,MAAMV,MAAM,CAACK,QAAQ,GAAGnB,iBAAiBiC,CAAAA;QACvCd,qBAAAA,+BAAAA,SAAWc,OAAO;YAAEpB,OAAO,AAACoB,MAAMC,MAAM,CAAuBrB,KAAK;QAAC;IACvE;IAEA,OAAOW;AACT,EAAE"}
+{"version":3,"sources":["../src/components/Select/useSelect.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { getPartitionedNativeProps, useEventCallback, slot } from '@fluentui/react-utilities';\nimport { ChevronDownRegular } from '@fluentui/react-icons';\nimport type { SelectBaseProps, SelectBaseState, SelectProps, SelectState } from './Select.types';\nimport { useOverrides_unstable as useOverrides } from '@fluentui/react-shared-contexts';\n\n/**\n * Create the state required to render Select.\n *\n * The returned state can be modified with hooks such as useSelectStyles,\n * before being passed to renderSelect.\n *\n * @param props - props from this instance of Select\n * @param ref - reference to the `<select>` element in Select\n */\nexport const useSelect_unstable = (props: SelectProps, ref: React.Ref<HTMLSelectElement>): SelectState => {\n  // Merge props from surrounding <Field>, if any\n  props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true, supportsSize: true });\n\n  const overrides = useOverrides();\n\n  const { appearance = overrides.inputDefaultAppearance ?? 'outline', size = 'medium', ...baseProps } = props;\n\n  const state = useSelectBase_unstable(baseProps, ref);\n\n  if (state.icon) {\n    state.icon.children ??= <ChevronDownRegular />;\n  }\n\n  return { ...state, appearance, size };\n};\n\n/**\n * Create the base state required to render Select without design-specific props.\n *\n * @param props - props from this instance of Select (without appearance/size)\n * @param ref - reference to the `<select>` element in Select\n */\nexport const useSelectBase_unstable = (props: SelectBaseProps, ref: React.Ref<HTMLSelectElement>): SelectBaseState => {\n  const { defaultValue, value, select, icon, root, onChange } = props;\n\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'select',\n    excludedPropNames: ['defaultValue', 'onChange', 'value'],\n  });\n\n  const state: SelectBaseState = {\n    components: {\n      root: 'span',\n      select: 'select',\n      icon: 'span',\n    },\n    select: slot.always(select, {\n      defaultProps: {\n        defaultValue,\n        value,\n        ref,\n        ...nativeProps.primary,\n      },\n      elementType: 'select',\n    }),\n    icon: slot.optional(icon, {\n      renderByDefault: true,\n      elementType: 'span',\n    }),\n    root: slot.always(root, {\n      defaultProps: nativeProps.root,\n      elementType: 'span',\n    }),\n  };\n\n  state.select.onChange = useEventCallback(event => {\n    onChange?.(event, { value: (event.target as HTMLSelectElement).value });\n  });\n\n  return state;\n};\n"],"names":["React","useFieldControlProps_unstable","getPartitionedNativeProps","useEventCallback","slot","ChevronDownRegular","useOverrides_unstable","useOverrides","useSelect_unstable","props","ref","supportsLabelFor","supportsRequired","supportsSize","overrides","appearance","inputDefaultAppearance","size","baseProps","state","useSelectBase_unstable","icon","children","defaultValue","value","select","root","onChange","nativeProps","primarySlotTagName","excludedPropNames","components","always","defaultProps","primary","elementType","optional","renderByDefault","event","target"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,6BAA6B,QAAQ,wBAAwB;AACtE,SAASC,yBAAyB,EAAEC,gBAAgB,EAAEC,IAAI,QAAQ,4BAA4B;AAC9F,SAASC,kBAAkB,QAAQ,wBAAwB;AAE3D,SAASC,yBAAyBC,YAAY,QAAQ,kCAAkC;AAExF;;;;;;;;CAQC,GACD,OAAO,MAAMC,qBAAqB,CAACC,OAAoBC;IACrD,+CAA+C;IAC/CD,QAAQR,8BAA8BQ,OAAO;QAAEE,kBAAkB;QAAMC,kBAAkB;QAAMC,cAAc;IAAK;IAElH,MAAMC,YAAYP;QAEGO;IAArB,MAAM,EAAEC,aAAaD,CAAAA,oCAAAA,UAAUE,sBAAsB,cAAhCF,+CAAAA,oCAAoC,SAAS,EAAEG,OAAO,QAAQ,EAAE,GAAGC,WAAW,GAAGT;IAEtG,MAAMU,QAAQC,uBAAuBF,WAAWR;IAEhD,IAAIS,MAAME,IAAI,EAAE;YACdF;;QAAAA,cAAAA,cAAAA,MAAME,IAAI,EAACC,yDAAXH,YAAWG,yBAAa,oBAACjB;IAC3B;IAEA,OAAO;QAAE,GAAGc,KAAK;QAAEJ;QAAYE;IAAK;AACtC,EAAE;AAEF;;;;;CAKC,GACD,OAAO,MAAMG,yBAAyB,CAACX,OAAwBC;IAC7D,MAAM,EAAEa,YAAY,EAAEC,KAAK,EAAEC,MAAM,EAAEJ,IAAI,EAAEK,IAAI,EAAEC,QAAQ,EAAE,GAAGlB;IAE9D,MAAMmB,cAAc1B,0BAA0B;QAC5CO;QACAoB,oBAAoB;QACpBC,mBAAmB;YAAC;YAAgB;YAAY;SAAQ;IAC1D;IAEA,MAAMX,QAAyB;QAC7BY,YAAY;YACVL,MAAM;YACND,QAAQ;YACRJ,MAAM;QACR;QACAI,QAAQrB,KAAK4B,MAAM,CAACP,QAAQ;YAC1BQ,cAAc;gBACZV;gBACAC;gBACAd;gBACA,GAAGkB,YAAYM,OAAO;YACxB;YACAC,aAAa;QACf;QACAd,MAAMjB,KAAKgC,QAAQ,CAACf,MAAM;YACxBgB,iBAAiB;YACjBF,aAAa;QACf;QACAT,MAAMtB,KAAK4B,MAAM,CAACN,MAAM;YACtBO,cAAcL,YAAYF,IAAI;YAC9BS,aAAa;QACf;IACF;IAEAhB,MAAMM,MAAM,CAACE,QAAQ,GAAGxB,iBAAiBmC,CAAAA;QACvCX,qBAAAA,+BAAAA,SAAWW,OAAO;YAAEd,OAAO,AAACc,MAAMC,MAAM,CAAuBf,KAAK;QAAC;IACvE;IAEA,OAAOL;AACT,EAAE"}

package/lib/index.js

@@ -1 +1 @@
-export { Select, selectClassNames, renderSelect_unstable, useSelectStyles_unstable, useSelect_unstable } from './Select';
+export { Select, selectClassNames, renderSelect_unstable, useSelectStyles_unstable, useSelectBase_unstable, useSelect_unstable } from './Select';

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  Select,\n  selectClassNames,\n  renderSelect_unstable,\n  useSelectStyles_unstable,\n  useSelect_unstable,\n} from './Select';\nexport type { SelectOnChangeData, SelectProps, SelectSlots, SelectState } from './Select';\n"],"names":["Select","selectClassNames","renderSelect_unstable","useSelectStyles_unstable","useSelect_unstable"],"mappings":"AAAA,SACEA,MAAM,EACNC,gBAAgB,EAChBC,qBAAqB,EACrBC,wBAAwB,EACxBC,kBAAkB,QACb,WAAW"}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  Select,\n  selectClassNames,\n  renderSelect_unstable,\n  useSelectStyles_unstable,\n  useSelectBase_unstable,\n  useSelect_unstable,\n} from './Select';\nexport type {\n  SelectBaseProps,\n  SelectBaseState,\n  SelectOnChangeData,\n  SelectProps,\n  SelectSlots,\n  SelectState,\n} from './Select';\n"],"names":["Select","selectClassNames","renderSelect_unstable","useSelectStyles_unstable","useSelectBase_unstable","useSelect_unstable"],"mappings":"AAAA,SACEA,MAAM,EACNC,gBAAgB,EAChBC,qBAAqB,EACrBC,wBAAwB,EACxBC,sBAAsB,EACtBC,kBAAkB,QACb,WAAW"}

package/lib-commonjs/Select.js

@@ -18,6 +18,9 @@ _export(exports, {
     selectClassNames: function() {
         return _index.selectClassNames;
     },
+    useSelectBase_unstable: function() {
+        return _index.useSelectBase_unstable;
+    },
     useSelectStyles_unstable: function() {
         return _index.useSelectStyles_unstable;
     },

package/lib-commonjs/Select.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Select.ts"],"sourcesContent":["export type { SelectOnChangeData, SelectProps, SelectSlots, SelectState } from './components/Select/index';\nexport {\n  Select,\n  renderSelect_unstable,\n  selectClassNames,\n  useSelectStyles_unstable,\n  useSelect_unstable,\n} from './components/Select/index';\n"],"names":["Select","renderSelect_unstable","selectClassNames","useSelectStyles_unstable","useSelect_unstable"],"mappings":";;;;;;;;;;;;eAEEA,aAAM;;;eACNC,4BAAqB;;;eACrBC,uBAAgB;;;eAChBC,+BAAwB;;;eACxBC,yBAAkB;;;uBACb,4BAA4B"}
+{"version":3,"sources":["../src/Select.ts"],"sourcesContent":["export type {\n  SelectBaseProps,\n  SelectBaseState,\n  SelectOnChangeData,\n  SelectProps,\n  SelectSlots,\n  SelectState,\n} from './components/Select/index';\nexport {\n  Select,\n  renderSelect_unstable,\n  selectClassNames,\n  useSelectStyles_unstable,\n  useSelectBase_unstable,\n  useSelect_unstable,\n} from './components/Select/index';\n"],"names":["Select","renderSelect_unstable","selectClassNames","useSelectStyles_unstable","useSelectBase_unstable","useSelect_unstable"],"mappings":";;;;;;;;;;;;eASEA,aAAM;;;eACNC,4BAAqB;;;eACrBC,uBAAgB;;;eAEhBE,6BAAsB;;;eADtBD,+BAAwB;;;eAExBE,yBAAkB;;;uBACb,4BAA4B"}

package/lib-commonjs/components/Select/Select.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Select/Select.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type SelectSlots = {\n  /*\n   * Wrapper for both the select and icon, renders as a `<span>`.\n   * The `className` and `style` props on `<Select>` are applied to this slot;\n   * All other top-level props are applied to the primary slot, `select`.\n   */\n  root: NonNullable<Slot<'span'>>;\n\n  /** Primary slot: the actual `<select>` element */\n  select: NonNullable<Slot<'select'>>;\n\n  /** the icon, typically a down arrow */\n  icon: Slot<'span'>;\n};\n\nexport type SelectProps = Omit<ComponentProps<Partial<SelectSlots>, 'select'>, 'size' | 'onChange'> & {\n  /**\n   * Controls the colors and borders of the Select.\n   *\n   * @default 'outline'\n   */\n  appearance?: 'outline' | 'underline' | 'filled-darker' | 'filled-lighter';\n\n  /**\n   * Called when the user changes the select element's value by selecting an option.\n   */\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n  onChange?: (ev: React.ChangeEvent<HTMLSelectElement>, data: SelectOnChangeData) => void;\n\n  /**\n   * Matches the Input sizes\n   *\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium' | 'large';\n};\n\nexport type SelectState = ComponentState<SelectSlots> & Required<Pick<SelectProps, 'appearance' | 'size'>>;\n\n/**\n * Data passed to the `onChange` callback when a new option is selected.\n */\nexport type SelectOnChangeData = {\n  /**\n   * Updated `<select>` value, taken from either the selected option's value prop or inner text.\n   */\n  value: string;\n};\n"],"names":["React"],"mappings":";;;;;iEAAuB,QAAQ"}
+{"version":3,"sources":["../src/components/Select/Select.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, DistributiveOmit, Slot } from '@fluentui/react-utilities';\n\nexport type SelectSlots = {\n  /*\n   * Wrapper for both the select and icon, renders as a `<span>`.\n   * The `className` and `style` props on `<Select>` are applied to this slot;\n   * All other top-level props are applied to the primary slot, `select`.\n   */\n  root: NonNullable<Slot<'span'>>;\n\n  /** Primary slot: the actual `<select>` element */\n  select: NonNullable<Slot<'select'>>;\n\n  /** the icon, typically a down arrow */\n  icon: Slot<'span'>;\n};\n\nexport type SelectProps = Omit<ComponentProps<Partial<SelectSlots>, 'select'>, 'size' | 'onChange'> & {\n  /**\n   * Controls the colors and borders of the Select.\n   *\n   * @default 'outline'\n   */\n  appearance?: 'outline' | 'underline' | 'filled-darker' | 'filled-lighter';\n\n  /**\n   * Called when the user changes the select element's value by selecting an option.\n   */\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n  onChange?: (ev: React.ChangeEvent<HTMLSelectElement>, data: SelectOnChangeData) => void;\n\n  /**\n   * Matches the Input sizes\n   *\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium' | 'large';\n};\n\nexport type SelectState = ComponentState<SelectSlots> & Required<Pick<SelectProps, 'appearance' | 'size'>>;\n\nexport type SelectBaseProps = DistributiveOmit<SelectProps, 'appearance' | 'size'>;\nexport type SelectBaseState = DistributiveOmit<SelectState, 'appearance' | 'size'>;\n\n/**\n * Data passed to the `onChange` callback when a new option is selected.\n */\nexport type SelectOnChangeData = {\n  /**\n   * Updated `<select>` value, taken from either the selected option's value prop or inner text.\n   */\n  value: string;\n};\n"],"names":["React"],"mappings":";;;;;iEAAuB,QAAQ"}

package/lib-commonjs/components/Select/index.js

@@ -18,6 +18,9 @@ _export(exports, {
     selectClassNames: function() {
         return _useSelectStylesstyles.selectClassNames;
     },
+    useSelectBase_unstable: function() {
+        return _useSelect.useSelectBase_unstable;
+    },
     useSelectStyles_unstable: function() {
         return _useSelectStylesstyles.useSelectStyles_unstable;
     },

package/lib-commonjs/components/Select/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Select/index.ts"],"sourcesContent":["export { Select } from './Select';\nexport type { SelectOnChangeData, SelectProps, SelectSlots, SelectState } from './Select.types';\nexport { renderSelect_unstable } from './renderSelect';\nexport { useSelect_unstable } from './useSelect';\nexport { selectClassNames, useSelectStyles_unstable } from './useSelectStyles.styles';\n"],"names":["Select","renderSelect_unstable","useSelect_unstable","selectClassNames","useSelectStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,cAAM;;;eAENC,mCAAqB;;;eAErBE,uCAAgB;;;eAAEC,+CAAwB;;;eAD1CF,6BAAkB;;;wBAHJ,WAAW;8BAEI,iBAAiB;2BACpB,cAAc;uCACU,2BAA2B"}
+{"version":3,"sources":["../src/components/Select/index.ts"],"sourcesContent":["export { Select } from './Select';\nexport type {\n  SelectBaseProps,\n  SelectBaseState,\n  SelectOnChangeData,\n  SelectProps,\n  SelectSlots,\n  SelectState,\n} from './Select.types';\nexport { renderSelect_unstable } from './renderSelect';\nexport { useSelectBase_unstable, useSelect_unstable } from './useSelect';\nexport { selectClassNames, useSelectStyles_unstable } from './useSelectStyles.styles';\n"],"names":["Select","renderSelect_unstable","useSelectBase_unstable","useSelect_unstable","selectClassNames","useSelectStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,cAAM;;;eASNC,mCAAqB;;;eAErBG,uCAAgB;;;eADhBF,iCAAsB;;;eACJG,+CAAwB;;;eADlBF,6BAAkB;;;wBAV5B,WAAW;8BASI,iBAAiB;2BACI,cAAc;uCACd,2BAA2B"}

package/lib-commonjs/components/Select/renderSelect.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Select/renderSelect.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { SelectSlots, SelectState } from './Select.types';\n\n/**\n * Render the final JSX of Select\n */\nexport const renderSelect_unstable = (state: SelectState): JSXElement => {\n  assertSlots<SelectSlots>(state);\n  return (\n    <state.root>\n      <state.select>{state.select.children}</state.select>\n      {state.icon && <state.icon />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderSelect_unstable","state","root","select","children","icon"],"mappings":";;;;+BAUaC;;;;;;4BATb,iCAAiD;gCAErB,4BAA4B;AAOjD,8BAA8B,CAACC;QACpCF,2BAAAA,EAAyBE;IACzB,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMC,IAAI,EAAA;;8BACT,eAAA,EAACD,MAAME,MAAM,EAAA;0BAAEF,MAAME,MAAM,CAACC,QAAQ;;YACnCH,MAAMI,IAAI,IAAA,WAAA,OAAI,eAAA,EAACJ,MAAMI,IAAI,EAAA,CAAA;;;AAGhC,EAAE"}
+{"version":3,"sources":["../src/components/Select/renderSelect.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { SelectBaseState, SelectSlots } from './Select.types';\n\n/**\n * Render the final JSX of Select\n */\nexport const renderSelect_unstable = (state: SelectBaseState): JSXElement => {\n  assertSlots<SelectSlots>(state);\n  return (\n    <state.root>\n      <state.select>{state.select.children}</state.select>\n      {state.icon && <state.icon />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderSelect_unstable","state","root","select","children","icon"],"mappings":";;;;+BAUaC;;;;;;4BATb,iCAAiD;gCAErB,4BAA4B;AAOjD,8BAA8B,CAACC;QACpCF,2BAAAA,EAAyBE;IACzB,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMC,IAAI,EAAA;;8BACT,eAAA,EAACD,MAAME,MAAM,EAAA;0BAAEF,MAAME,MAAM,CAACC,QAAQ;;YACnCH,MAAMI,IAAI,IAAA,WAAA,OAAI,eAAA,EAACJ,MAAMI,IAAI,EAAA,CAAA;;;AAGhC,EAAE"}

package/lib-commonjs/components/Select/useSelect.js

@@ -3,9 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "useSelect_unstable", {
-    enumerable: true,
-    get: function() {
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    useSelectBase_unstable: function() {
+        return useSelectBase_unstable;
+    },
+    useSelect_unstable: function() {
         return useSelect_unstable;
     }
 });
@@ -24,21 +32,31 @@ const useSelect_unstable = (props, ref)=>{
     });
     const overrides = (0, _reactsharedcontexts.useOverrides_unstable)();
     var _overrides_inputDefaultAppearance;
-    const { defaultValue, value, select, icon, root, appearance = (_overrides_inputDefaultAppearance = overrides.inputDefaultAppearance) !== null && _overrides_inputDefaultAppearance !== void 0 ? _overrides_inputDefaultAppearance : 'outline', onChange, size = 'medium' } = props;
+    const { appearance = (_overrides_inputDefaultAppearance = overrides.inputDefaultAppearance) !== null && _overrides_inputDefaultAppearance !== void 0 ? _overrides_inputDefaultAppearance : 'outline', size = 'medium', ...baseProps } = props;
+    const state = useSelectBase_unstable(baseProps, ref);
+    if (state.icon) {
+        var _state_icon;
+        var _children;
+        (_children = (_state_icon = state.icon).children) !== null && _children !== void 0 ? _children : _state_icon.children = /*#__PURE__*/ _react.createElement(_reacticons.ChevronDownRegular, null);
+    }
+    return {
+        ...state,
+        appearance,
+        size
+    };
+};
+const useSelectBase_unstable = (props, ref)=>{
+    const { defaultValue, value, select, icon, root, onChange } = props;
     const nativeProps = (0, _reactutilities.getPartitionedNativeProps)({
         props,
         primarySlotTagName: 'select',
         excludedPropNames: [
-            'appearance',
             'defaultValue',
             'onChange',
-            'size',
             'value'
         ]
     });
     const state = {
-        size,
-        appearance,
         components: {
             root: 'span',
             select: 'select',
@@ -55,9 +73,6 @@ const useSelect_unstable = (props, ref)=>{
         }),
         icon: _reactutilities.slot.optional(icon, {
             renderByDefault: true,
-            defaultProps: {
-                children: /*#__PURE__*/ _react.createElement(_reacticons.ChevronDownRegular, null)
-            },
             elementType: 'span'
         }),
         root: _reactutilities.slot.always(root, {

package/lib-commonjs/components/Select/useSelect.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Select/useSelect.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { getPartitionedNativeProps, useEventCallback, slot } from '@fluentui/react-utilities';\nimport { ChevronDownRegular } from '@fluentui/react-icons';\nimport type { SelectProps, SelectState } from './Select.types';\nimport { useOverrides_unstable as useOverrides } from '@fluentui/react-shared-contexts';\n\n/**\n * Create the state required to render Select.\n *\n * The returned state can be modified with hooks such as useSelectStyles,\n * before being passed to renderSelect.\n *\n * @param props - props from this instance of Select\n * @param ref - reference to the `<select>` element in Select\n */\nexport const useSelect_unstable = (props: SelectProps, ref: React.Ref<HTMLSelectElement>): SelectState => {\n  // Merge props from surrounding <Field>, if any\n  props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true, supportsSize: true });\n\n  const overrides = useOverrides();\n\n  const {\n    defaultValue,\n    value,\n    select,\n    icon,\n    root,\n    appearance = overrides.inputDefaultAppearance ?? 'outline',\n\n    onChange,\n    size = 'medium',\n  } = props;\n\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'select',\n    excludedPropNames: ['appearance', 'defaultValue', 'onChange', 'size', 'value'],\n  });\n\n  const state: SelectState = {\n    size,\n    appearance,\n    components: {\n      root: 'span',\n      select: 'select',\n      icon: 'span',\n    },\n    select: slot.always(select, {\n      defaultProps: {\n        defaultValue,\n        value,\n        ref,\n        ...nativeProps.primary,\n      },\n      elementType: 'select',\n    }),\n    icon: slot.optional(icon, {\n      renderByDefault: true,\n      defaultProps: { children: <ChevronDownRegular /> },\n      elementType: 'span',\n    }),\n    root: slot.always(root, {\n      defaultProps: nativeProps.root,\n      elementType: 'span',\n    }),\n  };\n\n  state.select.onChange = useEventCallback(event => {\n    onChange?.(event, { value: (event.target as HTMLSelectElement).value });\n  });\n\n  return state;\n};\n"],"names":["React","useFieldControlProps_unstable","getPartitionedNativeProps","useEventCallback","slot","ChevronDownRegular","useOverrides_unstable","useOverrides","useSelect_unstable","props","ref","supportsLabelFor","supportsRequired","supportsSize","overrides","defaultValue","value","select","icon","root","appearance","inputDefaultAppearance","onChange","size","nativeProps","primarySlotTagName","excludedPropNames","state","components","always","defaultProps","primary","elementType","optional","renderByDefault","children","event","target"],"mappings":"AAAA;;;;;+BAkBaQ;;;;;;;iEAhBU,QAAQ;4BACe,wBAAwB;gCACJ,4BAA4B;4BAC3D,wBAAwB;qCAEL,kCAAkC;AAWjF,2BAA2B,CAACC,OAAoBC;IACrD,+CAA+C;IAC/CD,YAAQR,yCAAAA,EAA8BQ,OAAO;QAAEE,kBAAkB;QAAMC,kBAAkB;QAAMC,cAAc;IAAK;IAElH,MAAMC,gBAAYP,0CAAAA;QAQHO;IANf,MAAM,EACJC,YAAY,EACZC,KAAK,EACLC,MAAM,EACNC,IAAI,EACJC,IAAI,EACJC,aAAaN,CAAAA,oCAAAA,UAAUO,sBAAsB,AAAtBA,MAAsB,QAAhCP,sCAAAA,KAAAA,IAAAA,oCAAoC,SAAS,EAE1DQ,QAAQ,EACRC,OAAO,QAAQ,EAChB,GAAGd;IAEJ,MAAMe,kBAActB,yCAAAA,EAA0B;QAC5CO;QACAgB,oBAAoB;QACpBC,mBAAmB;YAAC;YAAc;YAAgB;YAAY;YAAQ;SAAQ;IAChF;IAEA,MAAMC,QAAqB;QACzBJ;QACAH;QACAQ,YAAY;YACVT,MAAM;YACNF,QAAQ;YACRC,MAAM;QACR;QACAD,QAAQb,oBAAAA,CAAKyB,MAAM,CAACZ,QAAQ;YAC1Ba,cAAc;gBACZf;gBACAC;gBACAN;gBACA,GAAGc,YAAYO,OAAO;YACxB;YACAC,aAAa;QACf;QACAd,MAAMd,oBAAAA,CAAK6B,QAAQ,CAACf,MAAM;YACxBgB,iBAAiB;YACjBJ,cAAc;gBAAEK,UAAAA,WAAAA,GAAU,OAAA,aAAA,CAAC9B,8BAAAA,EAAAA;YAAsB;YACjD2B,aAAa;QACf;QACAb,MAAMf,oBAAAA,CAAKyB,MAAM,CAACV,MAAM;YACtBW,cAAcN,YAAYL,IAAI;YAC9Ba,aAAa;QACf;IACF;IAEAL,MAAMV,MAAM,CAACK,QAAQ,OAAGnB,gCAAAA,EAAiBiC,CAAAA;QACvCd,aAAAA,QAAAA,aAAAA,KAAAA,IAAAA,KAAAA,IAAAA,SAAWc,OAAO;YAAEpB,OAAQoB,MAAMC,MAAM,CAAuBrB,KAAK;QAAC;IACvE;IAEA,OAAOW;AACT,EAAE"}
+{"version":3,"sources":["../src/components/Select/useSelect.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { getPartitionedNativeProps, useEventCallback, slot } from '@fluentui/react-utilities';\nimport { ChevronDownRegular } from '@fluentui/react-icons';\nimport type { SelectBaseProps, SelectBaseState, SelectProps, SelectState } from './Select.types';\nimport { useOverrides_unstable as useOverrides } from '@fluentui/react-shared-contexts';\n\n/**\n * Create the state required to render Select.\n *\n * The returned state can be modified with hooks such as useSelectStyles,\n * before being passed to renderSelect.\n *\n * @param props - props from this instance of Select\n * @param ref - reference to the `<select>` element in Select\n */\nexport const useSelect_unstable = (props: SelectProps, ref: React.Ref<HTMLSelectElement>): SelectState => {\n  // Merge props from surrounding <Field>, if any\n  props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true, supportsSize: true });\n\n  const overrides = useOverrides();\n\n  const { appearance = overrides.inputDefaultAppearance ?? 'outline', size = 'medium', ...baseProps } = props;\n\n  const state = useSelectBase_unstable(baseProps, ref);\n\n  if (state.icon) {\n    state.icon.children ??= <ChevronDownRegular />;\n  }\n\n  return { ...state, appearance, size };\n};\n\n/**\n * Create the base state required to render Select without design-specific props.\n *\n * @param props - props from this instance of Select (without appearance/size)\n * @param ref - reference to the `<select>` element in Select\n */\nexport const useSelectBase_unstable = (props: SelectBaseProps, ref: React.Ref<HTMLSelectElement>): SelectBaseState => {\n  const { defaultValue, value, select, icon, root, onChange } = props;\n\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'select',\n    excludedPropNames: ['defaultValue', 'onChange', 'value'],\n  });\n\n  const state: SelectBaseState = {\n    components: {\n      root: 'span',\n      select: 'select',\n      icon: 'span',\n    },\n    select: slot.always(select, {\n      defaultProps: {\n        defaultValue,\n        value,\n        ref,\n        ...nativeProps.primary,\n      },\n      elementType: 'select',\n    }),\n    icon: slot.optional(icon, {\n      renderByDefault: true,\n      elementType: 'span',\n    }),\n    root: slot.always(root, {\n      defaultProps: nativeProps.root,\n      elementType: 'span',\n    }),\n  };\n\n  state.select.onChange = useEventCallback(event => {\n    onChange?.(event, { value: (event.target as HTMLSelectElement).value });\n  });\n\n  return state;\n};\n"],"names":["React","useFieldControlProps_unstable","getPartitionedNativeProps","useEventCallback","slot","ChevronDownRegular","useOverrides_unstable","useOverrides","useSelect_unstable","props","ref","supportsLabelFor","supportsRequired","supportsSize","overrides","appearance","inputDefaultAppearance","size","baseProps","state","useSelectBase_unstable","icon","children","defaultValue","value","select","root","onChange","nativeProps","primarySlotTagName","excludedPropNames","components","always","defaultProps","primary","elementType","optional","renderByDefault","event","target"],"mappings":"AAAA;;;;;;;;;;;;0BAyCaoB;eAAAA;;IAvBAZ,kBAAAA;;;;;iEAhBU,QAAQ;4BACe,wBAAwB;gCACJ,4BAA4B;4BAC3D,wBAAwB;qCAEL,kCAAkC;AAWjF,2BAA2B,CAACC,OAAoBC;IACrD,+CAA+C;IAC/CD,YAAQR,yCAAAA,EAA8BQ,OAAO;QAAEE,kBAAkB;QAAMC,kBAAkB;QAAMC,cAAc;IAAK;IAElH,MAAMC,gBAAYP,0CAAAA;QAEGO;IAArB,MAAM,EAAEC,aAAaD,CAAAA,oCAAAA,UAAUE,sBAAAA,AAAsB,MAAA,QAAhCF,sCAAAA,KAAAA,IAAAA,oCAAoC,SAAS,EAAEG,OAAO,QAAQ,EAAE,GAAGC,WAAW,GAAGT;IAEtG,MAAMU,QAAQC,uBAAuBF,WAAWR;IAEhD,IAAIS,MAAME,IAAI,EAAE;YACdF;;QAAAA,CAAAA,YAAAA,CAAAA,cAAAA,MAAME,IAAI,AAAJA,EAAKC,QAAAA,MAAAA,QAAAA,cAAAA,KAAAA,IAAAA,YAAXH,YAAWG,QAAAA,GAAAA,WAAAA,GAAa,OAAA,aAAA,CAACjB,8BAAAA,EAAAA;IAC3B;IAEA,OAAO;QAAE,GAAGc,KAAK;QAAEJ;QAAYE;IAAK;AACtC,EAAE;AAQK,+BAA+B,CAACR,OAAwBC;IAC7D,MAAM,EAAEa,YAAY,EAAEC,KAAK,EAAEC,MAAM,EAAEJ,IAAI,EAAEK,IAAI,EAAEC,QAAQ,EAAE,GAAGlB;IAE9D,MAAMmB,kBAAc1B,yCAAAA,EAA0B;QAC5CO;QACAoB,oBAAoB;QACpBC,mBAAmB;YAAC;YAAgB;YAAY;SAAQ;IAC1D;IAEA,MAAMX,QAAyB;QAC7BY,YAAY;YACVL,MAAM;YACND,QAAQ;YACRJ,MAAM;QACR;QACAI,QAAQrB,oBAAAA,CAAK4B,MAAM,CAACP,QAAQ;YAC1BQ,cAAc;gBACZV;gBACAC;gBACAd;gBACA,GAAGkB,YAAYM,OAAO;YACxB;YACAC,aAAa;QACf;QACAd,MAAMjB,oBAAAA,CAAKgC,QAAQ,CAACf,MAAM;YACxBgB,iBAAiB;YACjBF,aAAa;QACf;QACAT,MAAMtB,oBAAAA,CAAK4B,MAAM,CAACN,MAAM;YACtBO,cAAcL,YAAYF,IAAI;YAC9BS,aAAa;QACf;IACF;IAEAhB,MAAMM,MAAM,CAACE,QAAQ,OAAGxB,gCAAAA,EAAiBmC,CAAAA;QACvCX,aAAAA,QAAAA,aAAAA,KAAAA,IAAAA,KAAAA,IAAAA,SAAWW,OAAO;YAAEd,OAAQc,MAAMC,MAAM,CAAuBf,KAAK;QAAC;IACvE;IAEA,OAAOL;AACT,EAAE"}

package/lib-commonjs/index.js

@@ -18,6 +18,9 @@ _export(exports, {
     selectClassNames: function() {
         return _Select.selectClassNames;
     },
+    useSelectBase_unstable: function() {
+        return _Select.useSelectBase_unstable;
+    },
     useSelectStyles_unstable: function() {
         return _Select.useSelectStyles_unstable;
     },

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  Select,\n  selectClassNames,\n  renderSelect_unstable,\n  useSelectStyles_unstable,\n  useSelect_unstable,\n} from './Select';\nexport type { SelectOnChangeData, SelectProps, SelectSlots, SelectState } from './Select';\n"],"names":["Select","selectClassNames","renderSelect_unstable","useSelectStyles_unstable","useSelect_unstable"],"mappings":";;;;;;;;;;;;eACEA,cAAM;;;eAENE,6BAAqB;;;eADrBD,wBAAgB;;;eAEhBE,gCAAwB;;;eACxBC,0BAAkB;;;wBACb,WAAW"}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  Select,\n  selectClassNames,\n  renderSelect_unstable,\n  useSelectStyles_unstable,\n  useSelectBase_unstable,\n  useSelect_unstable,\n} from './Select';\nexport type {\n  SelectBaseProps,\n  SelectBaseState,\n  SelectOnChangeData,\n  SelectProps,\n  SelectSlots,\n  SelectState,\n} from './Select';\n"],"names":["Select","selectClassNames","renderSelect_unstable","useSelectStyles_unstable","useSelectBase_unstable","useSelect_unstable"],"mappings":";;;;;;;;;;;;eACEA,cAAM;;;eAENE,6BAAqB;;;eADrBD,wBAAgB;;;eAGhBG,8BAAsB;;;eADtBD,gCAAwB;;;eAExBE,0BAAkB;;;wBACb,WAAW"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-select",
-  "version": "9.4.15",
+  "version": "9.5.0",
   "description": "Fluent UI React Select component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -12,7 +12,7 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@fluentui/react-field": "^9.4.15",
+    "@fluentui/react-field": "^9.5.0",
     "@fluentui/react-icons": "^2.0.245",
     "@fluentui/react-jsx-runtime": "^9.4.1",
     "@fluentui/react-shared-contexts": "^9.26.2",