feat(react-select): add useSelectBase_unstable hook

dmytrokirpa · claude · dmytrokirpa · commit 4dfc75421b44 · 2026-03-25T18:17:52.000+01:00
Adds `useSelectBase_unstable` hook and `SelectBaseProps`/`SelectBaseState` types that expose the core slot/event logic without design-specific props (`appearance`, `size`). The styled `useSelect_unstable` now delegates to the base hook and applies defaults (ChevronDownRegular icon, field control props, overrides). Updates `renderSelect_unstable` to accept `SelectBaseState`.

Co-Authored-By: Claude Sonnet 4.6 &lt;noreply@anthropic.com&gt;
diff --git a/change/@fluentui-react-select-739e43f6-201b-4a86-aee1-89c169717c7f.json b/change/@fluentui-react-select-739e43f6-201b-4a86-aee1-89c169717c7f.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat(react-select): add useSelectBase_unstable hook",
+  "packageName": "@fluentui/react-select",
+  "email": "dmytrokirpa@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-select/library/etc/react-select.api.md b/packages/react-components/react-select/library/etc/react-select.api.md
@@ -6,18 +6,25 @@
 
 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';
 import type { Slot } from '@fluentui/react-utilities';
 import { SlotClassNames } from '@fluentui/react-utilities';
 
 // @public
-export const renderSelect_unstable: (state: SelectState) => JSXElement;
+export const renderSelect_unstable: (state: SelectBaseState) => JSXElement;
 
 // @public
 export const Select: ForwardRefComponent<SelectProps>;
 
+// @public (undocumented)
+export type SelectBaseProps = DistributiveOmit<SelectProps, 'appearance' | 'size'>;
+
+// @public (undocumented)
+export type SelectBaseState = DistributiveOmit<SelectState, 'appearance' | 'size'>;
+
 // @public (undocumented)
 export const selectClassNames: SlotClassNames<SelectSlots>;
 
@@ -46,6 +53,9 @@ export type SelectState = ComponentState<SelectSlots> & Required<Pick<SelectProp
 // @public
 export const useSelect_unstable: (props: SelectProps, ref: React_2.Ref<HTMLSelectElement>) => SelectState;
 
+// @public
+export const useSelectBase_unstable: (props: SelectBaseProps, ref: React_2.Ref<HTMLSelectElement>) => SelectBaseState;
+
 // @public
 export const useSelectStyles_unstable: (state: SelectState) => SelectState;
 
diff --git a/packages/react-components/react-select/library/src/Select.ts b/packages/react-components/react-select/library/src/Select.ts
@@ -1,8 +1,16 @@
-export type { SelectOnChangeData, SelectProps, SelectSlots, SelectState } from './components/Select/index';
+export type {
+  SelectBaseProps,
+  SelectBaseState,
+  SelectOnChangeData,
+  SelectProps,
+  SelectSlots,
+  SelectState,
+} from './components/Select/index';
 export {
   Select,
   renderSelect_unstable,
   selectClassNames,
   useSelectStyles_unstable,
+  useSelectBase_unstable,
   useSelect_unstable,
 } from './components/Select/index';
diff --git a/packages/react-components/react-select/library/src/components/Select/Select.types.ts b/packages/react-components/react-select/library/src/components/Select/Select.types.ts
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+import type { ComponentProps, ComponentState, DistributiveOmit, Slot } from '@fluentui/react-utilities';
 
 export type SelectSlots = {
   /*
@@ -40,6 +40,9 @@ export type SelectProps = Omit<ComponentProps<Partial<SelectSlots>, 'select'>, '
 
 export type SelectState = ComponentState<SelectSlots> & Required<Pick<SelectProps, 'appearance' | 'size'>>;
 
+export type SelectBaseProps = DistributiveOmit<SelectProps, 'appearance' | 'size'>;
+export type SelectBaseState = DistributiveOmit<SelectState, 'appearance' | 'size'>;
+
 /**
  * Data passed to the `onChange` callback when a new option is selected.
  */
diff --git a/packages/react-components/react-select/library/src/components/Select/index.ts b/packages/react-components/react-select/library/src/components/Select/index.ts
@@ -1,5 +1,12 @@
 export { Select } from './Select';
-export type { SelectOnChangeData, SelectProps, SelectSlots, SelectState } from './Select.types';
+export type {
+  SelectBaseProps,
+  SelectBaseState,
+  SelectOnChangeData,
+  SelectProps,
+  SelectSlots,
+  SelectState,
+} from './Select.types';
 export { renderSelect_unstable } from './renderSelect';
-export { useSelect_unstable } from './useSelect';
+export { useSelectBase_unstable, useSelect_unstable } from './useSelect';
 export { selectClassNames, useSelectStyles_unstable } from './useSelectStyles.styles';
diff --git a/packages/react-components/react-select/library/src/components/Select/renderSelect.tsx b/packages/react-components/react-select/library/src/components/Select/renderSelect.tsx
@@ -3,12 +3,12 @@
 
 import { assertSlots } from '@fluentui/react-utilities';
 import type { JSXElement } from '@fluentui/react-utilities';
-import type { SelectSlots, SelectState } from './Select.types';
+import type { SelectBaseState, SelectSlots } from './Select.types';
 
 /**
  * Render the final JSX of Select
  */
-export const renderSelect_unstable = (state: SelectState): JSXElement => {
+export const renderSelect_unstable = (state: SelectBaseState): JSXElement => {
   assertSlots<SelectSlots>(state);
   return (
     <state.root>
diff --git a/packages/react-components/react-select/library/src/components/Select/useSelect.tsx b/packages/react-components/react-select/library/src/components/Select/useSelect.tsx
@@ -4,45 +4,25 @@ import * as React from 'react';
 import { useFieldControlProps_unstable } from '@fluentui/react-field';
 import { getPartitionedNativeProps, useEventCallback, slot } from '@fluentui/react-utilities';
 import { ChevronDownRegular } from '@fluentui/react-icons';
-import type { SelectProps, SelectState } from './Select.types';
+import type { SelectBaseProps, SelectBaseState, SelectProps, SelectState } from './Select.types';
 import { useOverrides_unstable as useOverrides } from '@fluentui/react-shared-contexts';
 
 /**
- * Create the state required to render Select.
- *
- * The returned state can be modified with hooks such as useSelectStyles,
- * before being passed to renderSelect.
+ * Create the base state required to render Select without design-specific props.
  *
- * @param props - props from this instance of Select
+ * @param props - props from this instance of Select (without appearance/size)
  * @param ref - reference to the `<select>` element in Select
  */
-export const useSelect_unstable = (props: SelectProps, ref: React.Ref<HTMLSelectElement>): SelectState => {
-  // Merge props from surrounding <Field>, if any
-  props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true, supportsSize: true });
-
-  const overrides = useOverrides();
-
-  const {
-    defaultValue,
-    value,
-    select,
-    icon,
-    root,
-    appearance = overrides.inputDefaultAppearance ?? 'outline',
-
-    onChange,
-    size = 'medium',
-  } = props;
+export const useSelectBase_unstable = (props: SelectBaseProps, ref: React.Ref<HTMLSelectElement>): SelectBaseState => {
+  const { defaultValue, value, select, icon, root, onChange } = props;
 
   const nativeProps = getPartitionedNativeProps({
     props,
     primarySlotTagName: 'select',
-    excludedPropNames: ['appearance', 'defaultValue', 'onChange', 'size', 'value'],
+    excludedPropNames: ['defaultValue', 'onChange', 'value'],
   });
 
-  const state: SelectState = {
-    size,
-    appearance,
+  const state: SelectBaseState = {
     components: {
       root: 'span',
       select: 'select',
@@ -59,7 +39,6 @@ export const useSelect_unstable = (props: SelectProps, ref: React.Ref<HTMLSelect
     }),
     icon: slot.optional(icon, {
       renderByDefault: true,
-      defaultProps: { children: <ChevronDownRegular /> },
       elementType: 'span',
     }),
     root: slot.always(root, {
@@ -74,3 +53,29 @@ export const useSelect_unstable = (props: SelectProps, ref: React.Ref<HTMLSelect
 
   return state;
 };
+
+/**
+ * Create the state required to render Select.
+ *
+ * The returned state can be modified with hooks such as useSelectStyles,
+ * before being passed to renderSelect.
+ *
+ * @param props - props from this instance of Select
+ * @param ref - reference to the `<select>` element in Select
+ */
+export const useSelect_unstable = (props: SelectProps, ref: React.Ref<HTMLSelectElement>): SelectState => {
+  // Merge props from surrounding <Field>, if any
+  props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true, supportsSize: true });
+
+  const overrides = useOverrides();
+
+  const { appearance = overrides.inputDefaultAppearance ?? 'outline', size = 'medium', ...baseProps } = props;
+
+  const state = useSelectBase_unstable(baseProps, ref);
+
+  if (state.icon) {
+    state.icon.children ??= <ChevronDownRegular />;
+  }
+
+  return { ...state, appearance, size };
+};
diff --git a/packages/react-components/react-select/library/src/index.ts b/packages/react-components/react-select/library/src/index.ts
@@ -3,6 +3,14 @@ export {
   selectClassNames,
   renderSelect_unstable,
   useSelectStyles_unstable,
+  useSelectBase_unstable,
   useSelect_unstable,
 } from './Select';
-export type { SelectOnChangeData, SelectProps, SelectSlots, SelectState } from './Select';
+export type {
+  SelectBaseProps,
+  SelectBaseState,
+  SelectOnChangeData,
+  SelectProps,
+  SelectSlots,
+  SelectState,
+} from './Select';
