feat(react-swatch-picker): expose headless base APIs

change/@fluentui-react-swatch-picker-c346c0ef-e11a-45a1-91b0-4efbf20a3127.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: expose headless base APIs",
+  "packageName": "@fluentui/react-swatch-picker",
+  "email": "dmytrokirpa@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-swatch-picker/library/etc/react-swatch-picker.api.md

@@ -18,6 +18,12 @@ import type { SlotClassNames } from '@fluentui/react-utilities';
 // @public
 export const ColorSwatch: ForwardRefComponent<ColorSwatchProps>;
 
+// @public (undocumented)
+export type ColorSwatchBaseProps = Omit<ColorSwatchProps, 'size' | 'shape'>;
+
+// @public (undocumented)
+export type ColorSwatchBaseState = Omit<ColorSwatchState, 'size' | 'shape'>;
+
 // @public (undocumented)
 export const colorSwatchClassNames: SlotClassNames<ColorSwatchSlots>;
 
@@ -44,6 +50,12 @@ export type ColorSwatchState = ComponentState<ColorSwatchSlots> & Pick<ColorSwat
 // @public
 export const EmptySwatch: ForwardRefComponent<EmptySwatchProps>;
 
+// @public (undocumented)
+export type EmptySwatchBaseProps = ComponentProps<EmptySwatchSlots>;
+
+// @public (undocumented)
+export type EmptySwatchBaseState = ComponentState<EmptySwatchSlots>;
+
 // @public (undocumented)
 export const emptySwatchClassNames: SlotClassNames<EmptySwatchSlots>;
 
@@ -61,6 +73,12 @@ export type EmptySwatchState = ComponentState<EmptySwatchSlots> & Pick<EmptySwat
 // @public
 export const ImageSwatch: ForwardRefComponent<ImageSwatchProps>;
 
+// @public (undocumented)
+export type ImageSwatchBaseProps = Omit<ImageSwatchProps, 'size' | 'shape'>;
+
+// @public (undocumented)
+export type ImageSwatchBaseState = Omit<ImageSwatchState, 'size' | 'shape'>;
+
 // @public (undocumented)
 export const imageSwatchClassNames: SlotClassNames<ImageSwatchSlots>;
 
@@ -81,22 +99,22 @@ export type ImageSwatchState = ComponentState<ImageSwatchSlots> & Pick<ImageSwat
 };
 
 // @public
-export const renderColorSwatch_unstable: (state: ColorSwatchState) => JSXElement;
+export const renderColorSwatch_unstable: (state: ColorSwatchBaseState) => JSXElement;
 
 // @public
-export const renderEmptySwatch_unstable: (state: EmptySwatchState) => JSXElement;
+export const renderEmptySwatch_unstable: (state: EmptySwatchBaseState) => JSXElement;
 
 // @public
-export const renderImageSwatch_unstable: (state: ImageSwatchState) => JSXElement;
+export const renderImageSwatch_unstable: (state: ImageSwatchBaseState) => JSXElement;
 
 // @public
-export const renderSwatchPicker_unstable: (state: SwatchPickerState, contextValues: SwatchPickerContextValues) => JSXElement;
+export const renderSwatchPicker_unstable: (state: SwatchPickerBaseState, contextValues: SwatchPickerContextValues) => JSXElement;
 
 // @public (undocumented)
 export const renderSwatchPickerGrid: (props: SwatchPickerGridProps) => JSXElement[];
 
 // @public
-export const renderSwatchPickerRow_unstable: (state: SwatchPickerRowState) => JSXElement;
+export const renderSwatchPickerRow_unstable: (state: SwatchPickerRowBaseState) => JSXElement;
 
 // @public (undocumented)
 export const swatchCSSVars: {
@@ -107,6 +125,12 @@ export const swatchCSSVars: {
 // @public
 export const SwatchPicker: ForwardRefComponent<SwatchPickerProps>;
 
+// @public (undocumented)
+export type SwatchPickerBaseProps = Omit<SwatchPickerProps, 'size' | 'shape' | 'spacing'>;
+
+// @public (undocumented)
+export type SwatchPickerBaseState = Omit<SwatchPickerState, 'size' | 'shape' | 'spacing'>;
+
 // @public (undocumented)
 export const swatchPickerClassNames: SlotClassNames<SwatchPickerSlots>;
 
@@ -165,6 +189,12 @@ export const SwatchPickerProvider: React_2.Provider<SwatchPickerContextValue> &
 // @public
 export const SwatchPickerRow: ForwardRefComponent<SwatchPickerRowProps>;
 
+// @public (undocumented)
+export type SwatchPickerRowBaseProps = ComponentProps<SwatchPickerRowSlots>;
+
+// @public (undocumented)
+export type SwatchPickerRowBaseState = ComponentState<SwatchPickerRowSlots>;
+
 // @public (undocumented)
 export const swatchPickerRowClassNames: SlotClassNames<SwatchPickerRowSlots>;
 
@@ -195,24 +225,36 @@ export type SwatchProps = ImageSwatchProps | ColorSwatchProps;
 // @public
 export const useColorSwatch_unstable: (props: ColorSwatchProps, ref: React_2.Ref<HTMLButtonElement>) => ColorSwatchState;
 
+// @public
+export const useColorSwatchBase_unstable: (props: ColorSwatchBaseProps, ref: React_2.Ref<HTMLButtonElement>) => ColorSwatchBaseState;
+
 // @public
 export const useColorSwatchStyles_unstable: (state: ColorSwatchState) => ColorSwatchState;
 
 // @public
 export const useEmptySwatch_unstable: (props: EmptySwatchProps, ref: React_2.Ref<HTMLButtonElement>) => EmptySwatchState;
 
+// @public
+export const useEmptySwatchBase_unstable: (props: EmptySwatchBaseProps, ref: React_2.Ref<HTMLButtonElement>) => EmptySwatchBaseState;
+
 // @public
 export const useEmptySwatchStyles_unstable: (state: EmptySwatchState) => EmptySwatchState;
 
 // @public
 export const useImageSwatch_unstable: (props: ImageSwatchProps, ref: React_2.Ref<HTMLButtonElement>) => ImageSwatchState;
 
+// @public
+export const useImageSwatchBase_unstable: (props: ImageSwatchBaseProps, ref: React_2.Ref<HTMLButtonElement>) => ImageSwatchBaseState;
+
 // @public
 export const useImageSwatchStyles_unstable: (state: ImageSwatchState) => ImageSwatchState;
 
 // @public
 export const useSwatchPicker_unstable: (props: SwatchPickerProps, ref: React_2.Ref<HTMLDivElement>) => SwatchPickerState;
 
+// @public
+export const useSwatchPickerBase_unstable: (props: SwatchPickerBaseProps, ref: React_2.Ref<HTMLDivElement>) => SwatchPickerBaseState;
+
 // @public (undocumented)
 export const useSwatchPickerContextValue_unstable: <T>(selector: ContextSelector<SwatchPickerContextValue, T>) => T;
 
@@ -222,6 +264,9 @@ export const useSwatchPickerContextValues: (state: SwatchPickerState) => SwatchP
 // @public
 export const useSwatchPickerRow_unstable: (props: SwatchPickerRowProps, ref: React_2.Ref<HTMLDivElement>) => SwatchPickerRowState;
 
+// @public
+export const useSwatchPickerRowBase_unstable: (props: SwatchPickerRowBaseProps, ref: React_2.Ref<HTMLDivElement>) => SwatchPickerRowBaseState;
+
 // @public
 export const useSwatchPickerRowStyles_unstable: (state: SwatchPickerRowState) => SwatchPickerRowState;
 

packages/react-components/react-swatch-picker/library/src/ColorSwatch.ts

@@ -1,9 +1,16 @@
-export type { ColorSwatchProps, ColorSwatchSlots, ColorSwatchState } from './components/ColorSwatch/index';
+export type {
+  ColorSwatchBaseProps,
+  ColorSwatchBaseState,
+  ColorSwatchProps,
+  ColorSwatchSlots,
+  ColorSwatchState,
+} from './components/ColorSwatch/index';
 export {
   ColorSwatch,
   colorSwatchClassNames,
   renderColorSwatch_unstable,
   swatchCSSVars,
   useColorSwatchStyles_unstable,
   useColorSwatch_unstable,
+  useColorSwatchBase_unstable,
 } from './components/ColorSwatch/index';

packages/react-components/react-swatch-picker/library/src/EmptySwatch.ts

@@ -1,8 +1,15 @@
-export type { EmptySwatchProps, EmptySwatchSlots, EmptySwatchState } from './components/EmptySwatch/index';
+export type {
+  EmptySwatchBaseProps,
+  EmptySwatchBaseState,
+  EmptySwatchProps,
+  EmptySwatchSlots,
+  EmptySwatchState,
+} from './components/EmptySwatch/index';
 export {
   EmptySwatch,
   emptySwatchClassNames,
   renderEmptySwatch_unstable,
+  useEmptySwatchBase_unstable,
   useEmptySwatchStyles_unstable,
   useEmptySwatch_unstable,
 } from './components/EmptySwatch/index';

packages/react-components/react-swatch-picker/library/src/ImageSwatch.ts

@@ -1,8 +1,15 @@
-export type { ImageSwatchProps, ImageSwatchSlots, ImageSwatchState } from './components/ImageSwatch/index';
+export type {
+  ImageSwatchBaseProps,
+  ImageSwatchBaseState,
+  ImageSwatchProps,
+  ImageSwatchSlots,
+  ImageSwatchState,
+} from './components/ImageSwatch/index';
 export {
   ImageSwatch,
   imageSwatchClassNames,
   renderImageSwatch_unstable,
   useImageSwatchStyles_unstable,
   useImageSwatch_unstable,
+  useImageSwatchBase_unstable,
 } from './components/ImageSwatch/index';

packages/react-components/react-swatch-picker/library/src/SwatchPicker.ts

@@ -1,4 +1,6 @@
 export type {
+  SwatchPickerBaseProps,
+  SwatchPickerBaseState,
   SwatchPickerOnSelectEventHandler,
   SwatchPickerOnSelectionChangeData,
   SwatchPickerProps,
@@ -11,4 +13,5 @@ export {
   swatchPickerClassNames,
   useSwatchPickerStyles_unstable,
   useSwatchPicker_unstable,
+  useSwatchPickerBase_unstable,
 } from './components/SwatchPicker/index';

packages/react-components/react-swatch-picker/library/src/SwatchPickerRow.ts

@@ -1,4 +1,6 @@
 export type {
+  SwatchPickerRowBaseProps,
+  SwatchPickerRowBaseState,
   SwatchPickerRowProps,
   SwatchPickerRowSlots,
   SwatchPickerRowState,
@@ -9,4 +11,5 @@ export {
   swatchPickerRowClassNames,
   useSwatchPickerRowStyles_unstable,
   useSwatchPickerRow_unstable,
+  useSwatchPickerRowBase_unstable,
 } from './components/SwatchPickerRow/index';

packages/react-components/react-swatch-picker/library/src/components/ColorSwatch/ColorSwatch.types.ts

@@ -33,10 +33,14 @@ export type ColorSwatchProps = ComponentProps<ColorSwatchSlots> &
     value: string;
   };
 
+export type ColorSwatchBaseProps = Omit<ColorSwatchProps, 'size' | 'shape'>;
+
 /**
  * State used in rendering ColorSwatch
  */
 export type ColorSwatchState = ComponentState<ColorSwatchSlots> &
   Pick<ColorSwatchProps, 'color' | 'disabled' | 'size' | 'shape' | 'value'> & {
     selected: boolean;
   };
+
+export type ColorSwatchBaseState = Omit<ColorSwatchState, 'size' | 'shape'>;

packages/react-components/react-swatch-picker/library/src/components/ColorSwatch/index.ts

@@ -1,5 +1,11 @@
 export { ColorSwatch } from './ColorSwatch';
-export type { ColorSwatchProps, ColorSwatchSlots, ColorSwatchState } from './ColorSwatch.types';
+export type {
+  ColorSwatchBaseProps,
+  ColorSwatchBaseState,
+  ColorSwatchProps,
+  ColorSwatchSlots,
+  ColorSwatchState,
+} from './ColorSwatch.types';
 export { renderColorSwatch_unstable } from './renderColorSwatch';
-export { useColorSwatch_unstable } from './useColorSwatch';
+export { useColorSwatch_unstable, useColorSwatchBase_unstable } from './useColorSwatch';
 export { colorSwatchClassNames, swatchCSSVars, useColorSwatchStyles_unstable } from './useColorSwatchStyles.styles';

packages/react-components/react-swatch-picker/library/src/components/ColorSwatch/renderColorSwatch.tsx

@@ -3,12 +3,12 @@
 
 import { assertSlots } from '@fluentui/react-utilities';
 import type { JSXElement } from '@fluentui/react-utilities';
-import type { ColorSwatchState, ColorSwatchSlots } from './ColorSwatch.types';
+import type { ColorSwatchBaseState, ColorSwatchSlots } from './ColorSwatch.types';
 
 /**
  * Render the final JSX of ColorSwatch
  */
-export const renderColorSwatch_unstable = (state: ColorSwatchState): JSXElement => {
+export const renderColorSwatch_unstable = (state: ColorSwatchBaseState): JSXElement => {
   assertSlots<ColorSwatchSlots>(state);
 
   return (

packages/react-components/react-swatch-picker/library/src/components/ColorSwatch/useColorSwatch.tsx

@@ -2,28 +2,30 @@
 
 import * as React from 'react';
 import { slot, useEventCallback, getIntrinsicElementProps, mergeCallbacks } from '@fluentui/react-utilities';
-import type { ColorSwatchProps, ColorSwatchState } from './ColorSwatch.types';
+import type {
+  ColorSwatchBaseProps,
+  ColorSwatchBaseState,
+  ColorSwatchProps,
+  ColorSwatchState,
+} from './ColorSwatch.types';
 import { useSwatchPickerContextValue_unstable } from '../../contexts/swatchPicker';
 import { swatchCSSVars } from './useColorSwatchStyles.styles';
 import { ProhibitedFilled } from '@fluentui/react-icons';
 import { tokens } from '@fluentui/react-theme';
 
 /**
- * Create the state required to render ColorSwatch.
+ * Create the basee state required to render unstyled ColorSwatch.
  *
- * The returned state can be modified with hooks such as useColorSwatchStyles_unstable,
- * before being passed to renderColorSwatch_unstable.
+ * The returned state can be modified with hooks before being passed to renderColorSwatch_unstable.
  *
  * @param props - props from this instance of ColorSwatch
  * @param ref - reference to root HTMLButtonElement of ColorSwatch
  */
-export const useColorSwatch_unstable = (
-  props: ColorSwatchProps,
+export const useColorSwatchBase_unstable = (
+  props: ColorSwatchBaseProps,
   ref: React.Ref<HTMLButtonElement>,
-): ColorSwatchState => {
-  const { borderColor, color, disabled, disabledIcon, icon, value, onClick, size, shape, style, ...rest } = props;
-  const _size = useSwatchPickerContextValue_unstable(ctx => ctx.size);
-  const _shape = useSwatchPickerContextValue_unstable(ctx => ctx.shape);
+): ColorSwatchBaseState => {
+  const { borderColor, color, disabled, disabledIcon, icon, value, onClick, style, ...rest } = props;
   const isGrid = useSwatchPickerContextValue_unstable(ctx => ctx.isGrid);
 
   const requestSelectionChange = useSwatchPickerContextValue_unstable(ctx => ctx.requestSelectionChange);
@@ -52,10 +54,6 @@ export const useColorSwatch_unstable = (
 
   const iconShorthand = slot.optional(icon, { elementType: 'span' });
   const disabledIconShorthand = slot.optional(disabledIcon, {
-    defaultProps: {
-      children: <ProhibitedFilled />,
-    },
-    renderByDefault: true,
     elementType: 'span',
   });
 
@@ -84,10 +82,42 @@ export const useColorSwatch_unstable = (
     icon: iconShorthand,
     disabledIcon: disabledIconShorthand,
     disabled,
-    size: size ?? _size,
-    shape: shape ?? _shape,
     selected,
     color,
     value,
   };
 };
+
+/**
+ * Create the state required to render ColorSwatch.
+ *
+ * The returned state can be modified with hooks such as useColorSwatchStyles_unstable,
+ * before being passed to renderColorSwatch_unstable.
+ *
+ * @param props - props from this instance of ColorSwatch
+ * @param ref - reference to root HTMLButtonElement of ColorSwatch
+ */
+export const useColorSwatch_unstable = (
+  props: ColorSwatchProps,
+  ref: React.Ref<HTMLButtonElement>,
+): ColorSwatchState => {
+  const sizeFromContext = useSwatchPickerContextValue_unstable(ctx => ctx.size);
+  const shapeFromContext = useSwatchPickerContextValue_unstable(ctx => ctx.shape);
+  const { size = sizeFromContext, shape = shapeFromContext, disabledIcon, ...rest } = props;
+
+  const baseState = useColorSwatchBase_unstable(rest, ref);
+
+  return {
+    ...baseState,
+    size,
+    shape,
+    disabledIcon: slot.optional(disabledIcon, {
+      defaultProps: {
+        ...baseState.disabledIcon,
+        children: <ProhibitedFilled />,
+      },
+      renderByDefault: true,
+      elementType: 'span',
+    }),
+  };
+};

packages/react-components/react-swatch-picker/library/src/components/EmptySwatch/EmptySwatch.types.ts

@@ -10,7 +10,11 @@ export type EmptySwatchSlots = {
  */
 export type EmptySwatchProps = ComponentProps<EmptySwatchSlots> & Pick<SwatchPickerProps, 'size' | 'shape'>;
 
+export type EmptySwatchBaseProps = ComponentProps<EmptySwatchSlots>;
+
 /**
  * State used in rendering EmptySwatch
  */
 export type EmptySwatchState = ComponentState<EmptySwatchSlots> & Pick<EmptySwatchProps, 'size' | 'shape'>;
+
+export type EmptySwatchBaseState = ComponentState<EmptySwatchSlots>;

packages/react-components/react-swatch-picker/library/src/components/EmptySwatch/index.ts

@@ -1,5 +1,11 @@
 export { EmptySwatch } from './EmptySwatch';
-export type { EmptySwatchProps, EmptySwatchSlots, EmptySwatchState } from './EmptySwatch.types';
+export type {
+  EmptySwatchBaseProps,
+  EmptySwatchBaseState,
+  EmptySwatchProps,
+  EmptySwatchSlots,
+  EmptySwatchState,
+} from './EmptySwatch.types';
 export { renderEmptySwatch_unstable } from './renderEmptySwatch';
-export { useEmptySwatch_unstable } from './useEmptySwatch';
+export { useEmptySwatch_unstable, useEmptySwatchBase_unstable } from './useEmptySwatch';
 export { emptySwatchClassNames, useEmptySwatchStyles_unstable } from './useEmptySwatchStyles.styles';