@fluentui/react-swatch-picker 9.5.0 → 9.5.2

package/CHANGELOG.md

@@ -1,18 +1,41 @@
 # Change Log - @fluentui/react-swatch-picker
 
-This log was last generated on Wed, 11 Mar 2026 09:20:37 GMT and should not be manually modified.
+This log was last generated on Thu, 23 Apr 2026 11:59:32 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.5.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker_v9.5.2)
+
+Thu, 23 Apr 2026 11:59:32 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker_v9.5.1..@fluentui/react-swatch-picker_v9.5.2)
+
+### Patches
+
+- perf: memoize context values in use*ContextValues hooks ([PR #36008](https://github.com/microsoft/fluentui/pull/36008) by olfedias@microsoft.com)
+- Bump @fluentui/react-context-selector to v9.2.16 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
+- Bump @fluentui/react-field to v9.5.1 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.2 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
+- Bump @fluentui/react-tabster to v9.26.14 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
+- Bump @fluentui/react-utilities to v9.26.3 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
+
+## [9.5.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker_v9.5.1)
+
+Wed, 01 Apr 2026 15:52:43 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker_v9.5.0..@fluentui/react-swatch-picker_v9.5.1)
+
+### Patches
+
+- Bump @fluentui/react-field to v9.5.0 ([PR #35912](https://github.com/microsoft/fluentui/pull/35912) by beachball)
+
 ## [9.5.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker_v9.5.0)
 
-Wed, 11 Mar 2026 09:20:37 GMT 
+Wed, 11 Mar 2026 09:22:22 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker_v9.4.15..@fluentui/react-swatch-picker_v9.5.0)
 
 ### Minor changes
 
 - feat(react-swatch-picker): Add focusMode prop for tab/arrow key navigation ([PR #35803](https://github.com/microsoft/fluentui/pull/35803) by v.kozlova13@gmail.com)
-- Bump @fluentui/react-field to v9.4.16 ([PR #35854](https://github.com/microsoft/fluentui/pull/35854) by beachball)
+- 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-swatch-picker_v9.4.15)
 

package/dist/index.d.ts

@@ -154,9 +154,10 @@ export declare type SwatchPickerContextValue = Pick<SwatchPickerProps, 'size' |
      */
     isGrid: boolean;
     /**
-     * @internal
      * Callback used by ColorSwatch to request a change on it's selected state
      * Should be used to select ColorSwatch
+     *
+     * @internal
      */
     requestSelectionChange: (event: React_2.MouseEvent<HTMLButtonElement>, data: {
         selectedValue: string;

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ColorSwatch/ColorSwatch.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { SwatchPickerProps } from '../SwatchPicker/SwatchPicker.types';\n\nexport type ColorSwatchSlots = {\n  root: NonNullable<Slot<'button'>>;\n  icon?: Slot<'span'>;\n  disabledIcon?: Slot<'span'>;\n};\n\n/**\n * ColorSwatch Props\n */\nexport type ColorSwatchProps = ComponentProps<ColorSwatchSlots> &\n  Pick<SwatchPickerProps, 'size' | 'shape'> & {\n    /**\n     * Border color when contrast is low\n     */\n    borderColor?: string;\n\n    /**\n     * Swatch color\n     */\n    color: string;\n\n    /**\n     * Whether the swatch is disabled\n     */\n    disabled?: boolean;\n\n    /**\n     * Swatch value\n     */\n    value: string;\n  };\n\n/**\n * State used in rendering ColorSwatch\n */\nexport type ColorSwatchState = ComponentState<ColorSwatchSlots> &\n  Pick<ColorSwatchProps, 'color' | 'disabled' | 'size' | 'shape' | 'value'> & {\n    selected: boolean;\n  };\n"],"names":[],"mappings":"AAmCA;;CAEC,GACD,WAGI"}
+{"version":3,"sources":["../src/components/ColorSwatch/ColorSwatch.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { SwatchPickerProps } from '../SwatchPicker/SwatchPicker.types';\n\nexport type ColorSwatchSlots = {\n  root: NonNullable<Slot<'button'>>;\n  icon?: Slot<'span'>;\n  disabledIcon?: Slot<'span'>;\n};\n\n/**\n * ColorSwatch Props\n */\nexport type ColorSwatchProps = ComponentProps<ColorSwatchSlots> &\n  Pick<SwatchPickerProps, 'size' | 'shape'> & {\n    /**\n     * Border color when contrast is low\n     */\n    borderColor?: string;\n\n    /**\n     * Swatch color\n     */\n    color: string;\n\n    /**\n     * Whether the swatch is disabled\n     */\n    disabled?: boolean;\n\n    /**\n     * Swatch value\n     */\n    value: string;\n  };\n\n/**\n * State used in rendering ColorSwatch\n */\nexport type ColorSwatchState = ComponentState<ColorSwatchSlots> &\n  Pick<ColorSwatchProps, 'color' | 'disabled' | 'size' | 'shape' | 'value'> & {\n    selected: boolean;\n  };\n"],"names":[],"mappings":"AAmCA;;CAEC,GACD,WAGI"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/EmptySwatch/EmptySwatch.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { SwatchPickerProps } from '../SwatchPicker/SwatchPicker.types';\n\nexport type EmptySwatchSlots = {\n  root: Slot<'button'>;\n};\n\n/**\n * EmptySwatch Props\n */\nexport type EmptySwatchProps = ComponentProps<EmptySwatchSlots> & Pick<SwatchPickerProps, 'size' | 'shape'>;\n\n/**\n * State used in rendering EmptySwatch\n */\nexport type EmptySwatchState = ComponentState<EmptySwatchSlots> & Pick<EmptySwatchProps, 'size' | 'shape'>;\n"],"names":[],"mappings":"AAYA;;CAEC,GACD,WAA2G"}
+{"version":3,"sources":["../src/components/EmptySwatch/EmptySwatch.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { SwatchPickerProps } from '../SwatchPicker/SwatchPicker.types';\n\nexport type EmptySwatchSlots = {\n  root: Slot<'button'>;\n};\n\n/**\n * EmptySwatch Props\n */\nexport type EmptySwatchProps = ComponentProps<EmptySwatchSlots> & Pick<SwatchPickerProps, 'size' | 'shape'>;\n\n/**\n * State used in rendering EmptySwatch\n */\nexport type EmptySwatchState = ComponentState<EmptySwatchSlots> & Pick<EmptySwatchProps, 'size' | 'shape'>;\n"],"names":[],"mappings":"AAYA;;CAEC,GACD,WAA2G"}

package/lib/components/EmptySwatch/useEmptySwatch.js

@@ -1,5 +1,4 @@
 'use client';
-import * as React from 'react';
 import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
 import { useSwatchPickerContextValue_unstable } from '../../contexts/swatchPicker';
 /**

package/lib/components/EmptySwatch/useEmptySwatch.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/EmptySwatch/useEmptySwatch.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { EmptySwatchProps, EmptySwatchState } from './EmptySwatch.types';\nimport { useSwatchPickerContextValue_unstable } from '../../contexts/swatchPicker';\n\n/**\n * Create the state required to render EmptySwatch.\n *\n * The returned state can be modified with hooks such as useEmptySwatchStyles_unstable,\n * before being passed to renderEmptySwatch_unstable.\n *\n * @param props - props from this instance of EmptySwatch\n * @param ref - reference to root HTMLDivElement of EmptySwatch\n */\nexport const useEmptySwatch_unstable = (\n  props: EmptySwatchProps,\n  ref: React.Ref<HTMLButtonElement>,\n): EmptySwatchState => {\n  const { size, shape, ...rest } = props;\n  const _size = useSwatchPickerContextValue_unstable(ctx => ctx.size);\n  const _shape = useSwatchPickerContextValue_unstable(ctx => ctx.shape);\n  const isGrid = useSwatchPickerContextValue_unstable(ctx => ctx.isGrid);\n\n  const role = isGrid ? 'gridcell' : 'radio';\n  const a11yProps = isGrid ? {} : { 'aria-checked': false };\n  return {\n    components: {\n      root: 'button',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('button', {\n        ref,\n        role,\n        ...a11yProps,\n        ...rest,\n      }),\n      { elementType: 'button' },\n    ),\n    size: size ?? _size,\n    shape: shape ?? _shape,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useSwatchPickerContextValue_unstable","useEmptySwatch_unstable","props","ref","size","shape","rest","_size","ctx","_shape","isGrid","role","a11yProps","components","root","always","elementType"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAE3E,SAASC,oCAAoC,QAAQ,8BAA8B;AAEnF;;;;;;;;CAQC,GACD,OAAO,MAAMC,0BAA0B,CACrCC,OACAC;IAEA,MAAM,EAAEC,IAAI,EAAEC,KAAK,EAAE,GAAGC,MAAM,GAAGJ;IACjC,MAAMK,QAAQP,qCAAqCQ,CAAAA,MAAOA,IAAIJ,IAAI;IAClE,MAAMK,SAAST,qCAAqCQ,CAAAA,MAAOA,IAAIH,KAAK;IACpE,MAAMK,SAASV,qCAAqCQ,CAAAA,MAAOA,IAAIE,MAAM;IAErE,MAAMC,OAAOD,SAAS,aAAa;IACnC,MAAME,YAAYF,SAAS,CAAC,IAAI;QAAE,gBAAgB;IAAM;IACxD,OAAO;QACLG,YAAY;YACVC,MAAM;QACR;QACAA,MAAMf,KAAKgB,MAAM,CACfjB,yBAAyB,UAAU;YACjCK;YACAQ;YACA,GAAGC,SAAS;YACZ,GAAGN,IAAI;QACT,IACA;YAAEU,aAAa;QAAS;QAE1BZ,MAAMA,iBAAAA,kBAAAA,OAAQG;QACdF,OAAOA,kBAAAA,mBAAAA,QAASI;IAClB;AACF,EAAE"}
+{"version":3,"sources":["../src/components/EmptySwatch/useEmptySwatch.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { EmptySwatchProps, EmptySwatchState } from './EmptySwatch.types';\nimport { useSwatchPickerContextValue_unstable } from '../../contexts/swatchPicker';\n\n/**\n * Create the state required to render EmptySwatch.\n *\n * The returned state can be modified with hooks such as useEmptySwatchStyles_unstable,\n * before being passed to renderEmptySwatch_unstable.\n *\n * @param props - props from this instance of EmptySwatch\n * @param ref - reference to root HTMLDivElement of EmptySwatch\n */\nexport const useEmptySwatch_unstable = (\n  props: EmptySwatchProps,\n  ref: React.Ref<HTMLButtonElement>,\n): EmptySwatchState => {\n  const { size, shape, ...rest } = props;\n  const _size = useSwatchPickerContextValue_unstable(ctx => ctx.size);\n  const _shape = useSwatchPickerContextValue_unstable(ctx => ctx.shape);\n  const isGrid = useSwatchPickerContextValue_unstable(ctx => ctx.isGrid);\n\n  const role = isGrid ? 'gridcell' : 'radio';\n  const a11yProps = isGrid ? {} : { 'aria-checked': false };\n  return {\n    components: {\n      root: 'button',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('button', {\n        ref,\n        role,\n        ...a11yProps,\n        ...rest,\n      }),\n      { elementType: 'button' },\n    ),\n    size: size ?? _size,\n    shape: shape ?? _shape,\n  };\n};\n"],"names":["getIntrinsicElementProps","slot","useSwatchPickerContextValue_unstable","useEmptySwatch_unstable","props","ref","size","shape","rest","_size","ctx","_shape","isGrid","role","a11yProps","components","root","always","elementType"],"mappings":"AAAA;AAGA,SAASA,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAE3E,SAASC,oCAAoC,QAAQ,8BAA8B;AAEnF;;;;;;;;CAQC,GACD,OAAO,MAAMC,0BAA0B,CACrCC,OACAC;IAEA,MAAM,EAAEC,IAAI,EAAEC,KAAK,EAAE,GAAGC,MAAM,GAAGJ;IACjC,MAAMK,QAAQP,qCAAqCQ,CAAAA,MAAOA,IAAIJ,IAAI;IAClE,MAAMK,SAAST,qCAAqCQ,CAAAA,MAAOA,IAAIH,KAAK;IACpE,MAAMK,SAASV,qCAAqCQ,CAAAA,MAAOA,IAAIE,MAAM;IAErE,MAAMC,OAAOD,SAAS,aAAa;IACnC,MAAME,YAAYF,SAAS,CAAC,IAAI;QAAE,gBAAgB;IAAM;IACxD,OAAO;QACLG,YAAY;YACVC,MAAM;QACR;QACAA,MAAMf,KAAKgB,MAAM,CACfjB,yBAAyB,UAAU;YACjCK;YACAQ;YACA,GAAGC,SAAS;YACZ,GAAGN,IAAI;QACT,IACA;YAAEU,aAAa;QAAS;QAE1BZ,MAAMA,iBAAAA,kBAAAA,OAAQG;QACdF,OAAOA,kBAAAA,mBAAAA,QAASI;IAClB;AACF,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ImageSwatch/ImageSwatch.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { SwatchPickerProps } from '../SwatchPicker/SwatchPicker.types';\n\nexport type ImageSwatchSlots = {\n  root: Slot<'button'>;\n};\n\n/**\n * ImageSwatch Props\n */\nexport type ImageSwatchProps = ComponentProps<ImageSwatchSlots> &\n  Pick<SwatchPickerProps, 'size' | 'shape'> & {\n    /**\n     * Swatch color\n     */\n    src: string;\n\n    /**\n     * Swatch value\n     */\n    value: string;\n  };\n\n/**\n * State used in rendering ImageSwatch\n */\nexport type ImageSwatchState = ComponentState<ImageSwatchSlots> &\n  Pick<ImageSwatchProps, 'color' | 'size' | 'shape' | 'value'> & {\n    selected: boolean;\n  };\n"],"names":[],"mappings":"AAuBA;;CAEC,GACD,WAGI"}
+{"version":3,"sources":["../src/components/ImageSwatch/ImageSwatch.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { SwatchPickerProps } from '../SwatchPicker/SwatchPicker.types';\n\nexport type ImageSwatchSlots = {\n  root: Slot<'button'>;\n};\n\n/**\n * ImageSwatch Props\n */\nexport type ImageSwatchProps = ComponentProps<ImageSwatchSlots> &\n  Pick<SwatchPickerProps, 'size' | 'shape'> & {\n    /**\n     * Swatch color\n     */\n    src: string;\n\n    /**\n     * Swatch value\n     */\n    value: string;\n  };\n\n/**\n * State used in rendering ImageSwatch\n */\nexport type ImageSwatchState = ComponentState<ImageSwatchSlots> &\n  Pick<ImageSwatchProps, 'color' | 'size' | 'shape' | 'value'> & {\n    selected: boolean;\n  };\n"],"names":[],"mappings":"AAuBA;;CAEC,GACD,WAGI"}

package/lib/components/ImageSwatch/useImageSwatch.js

@@ -1,5 +1,4 @@
 'use client';
-import * as React from 'react';
 import { getIntrinsicElementProps, slot, useEventCallback, mergeCallbacks } from '@fluentui/react-utilities';
 import { useSwatchPickerContextValue_unstable } from '../../contexts/swatchPicker';
 /**

package/lib/components/ImageSwatch/useImageSwatch.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ImageSwatch/useImageSwatch.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot, useEventCallback, mergeCallbacks } from '@fluentui/react-utilities';\nimport type { ImageSwatchProps, ImageSwatchState } from './ImageSwatch.types';\nimport { useSwatchPickerContextValue_unstable } from '../../contexts/swatchPicker';\n\n/**\n * Create the state required to render ImageSwatch.\n *\n * The returned state can be modified with hooks such as useImageSwatchStyles_unstable,\n * before being passed to renderImageSwatch_unstable.\n *\n * @param props - props from this instance of ImageSwatch\n * @param ref - reference to root HTMLDivElement of ImageSwatch\n */\nexport const useImageSwatch_unstable = (\n  props: ImageSwatchProps,\n  ref: React.Ref<HTMLButtonElement>,\n): ImageSwatchState => {\n  const { src, value, onClick, style, ...rest } = props;\n  const size = useSwatchPickerContextValue_unstable(ctx => ctx.size);\n  const shape = useSwatchPickerContextValue_unstable(ctx => ctx.shape);\n  const isGrid = useSwatchPickerContextValue_unstable(ctx => ctx.isGrid);\n\n  const requestSelectionChange = useSwatchPickerContextValue_unstable(ctx => ctx.requestSelectionChange);\n  const selected = useSwatchPickerContextValue_unstable(ctx => ctx.selectedValue === value);\n\n  const role = isGrid ? 'gridcell' : 'radio';\n  const ariaSelected = isGrid\n    ? {\n        'aria-selected': selected,\n      }\n    : { 'aria-checked': selected };\n\n  const onImageSwatchClick = useEventCallback(\n    mergeCallbacks(onClick, (event: React.MouseEvent<HTMLButtonElement>) =>\n      requestSelectionChange(event, {\n        selectedValue: value,\n        selectedSwatch: src,\n      }),\n    ),\n  );\n\n  return {\n    components: {\n      root: 'button',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('button', {\n        ref,\n        role,\n        ...ariaSelected,\n        onClick: onImageSwatchClick,\n        ...rest,\n        style: {\n          backgroundImage: `url(${src})`,\n          ...style,\n        },\n      }),\n      { elementType: 'button' },\n    ),\n    value,\n    selected,\n    size,\n    shape,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useEventCallback","mergeCallbacks","useSwatchPickerContextValue_unstable","useImageSwatch_unstable","props","ref","src","value","onClick","style","rest","size","ctx","shape","isGrid","requestSelectionChange","selected","selectedValue","role","ariaSelected","onImageSwatchClick","event","selectedSwatch","components","root","always","backgroundImage","elementType"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,EAAEC,gBAAgB,EAAEC,cAAc,QAAQ,4BAA4B;AAE7G,SAASC,oCAAoC,QAAQ,8BAA8B;AAEnF;;;;;;;;CAQC,GACD,OAAO,MAAMC,0BAA0B,CACrCC,OACAC;IAEA,MAAM,EAAEC,GAAG,EAAEC,KAAK,EAAEC,OAAO,EAAEC,KAAK,EAAE,GAAGC,MAAM,GAAGN;IAChD,MAAMO,OAAOT,qCAAqCU,CAAAA,MAAOA,IAAID,IAAI;IACjE,MAAME,QAAQX,qCAAqCU,CAAAA,MAAOA,IAAIC,KAAK;IACnE,MAAMC,SAASZ,qCAAqCU,CAAAA,MAAOA,IAAIE,MAAM;IAErE,MAAMC,yBAAyBb,qCAAqCU,CAAAA,MAAOA,IAAIG,sBAAsB;IACrG,MAAMC,WAAWd,qCAAqCU,CAAAA,MAAOA,IAAIK,aAAa,KAAKV;IAEnF,MAAMW,OAAOJ,SAAS,aAAa;IACnC,MAAMK,eAAeL,SACjB;QACE,iBAAiBE;IACnB,IACA;QAAE,gBAAgBA;IAAS;IAE/B,MAAMI,qBAAqBpB,iBACzBC,eAAeO,SAAS,CAACa,QACvBN,uBAAuBM,OAAO;YAC5BJ,eAAeV;YACfe,gBAAgBhB;QAClB;IAIJ,OAAO;QACLiB,YAAY;YACVC,MAAM;QACR;QACAA,MAAMzB,KAAK0B,MAAM,CACf3B,yBAAyB,UAAU;YACjCO;YACAa;YACA,GAAGC,YAAY;YACfX,SAASY;YACT,GAAGV,IAAI;YACPD,OAAO;gBACLiB,iBAAiB,CAAC,IAAI,EAAEpB,IAAI,CAAC,CAAC;gBAC9B,GAAGG,KAAK;YACV;QACF,IACA;YAAEkB,aAAa;QAAS;QAE1BpB;QACAS;QACAL;QACAE;IACF;AACF,EAAE"}
+{"version":3,"sources":["../src/components/ImageSwatch/useImageSwatch.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { getIntrinsicElementProps, slot, useEventCallback, mergeCallbacks } from '@fluentui/react-utilities';\nimport type { ImageSwatchProps, ImageSwatchState } from './ImageSwatch.types';\nimport { useSwatchPickerContextValue_unstable } from '../../contexts/swatchPicker';\n\n/**\n * Create the state required to render ImageSwatch.\n *\n * The returned state can be modified with hooks such as useImageSwatchStyles_unstable,\n * before being passed to renderImageSwatch_unstable.\n *\n * @param props - props from this instance of ImageSwatch\n * @param ref - reference to root HTMLDivElement of ImageSwatch\n */\nexport const useImageSwatch_unstable = (\n  props: ImageSwatchProps,\n  ref: React.Ref<HTMLButtonElement>,\n): ImageSwatchState => {\n  const { src, value, onClick, style, ...rest } = props;\n  const size = useSwatchPickerContextValue_unstable(ctx => ctx.size);\n  const shape = useSwatchPickerContextValue_unstable(ctx => ctx.shape);\n  const isGrid = useSwatchPickerContextValue_unstable(ctx => ctx.isGrid);\n\n  const requestSelectionChange = useSwatchPickerContextValue_unstable(ctx => ctx.requestSelectionChange);\n  const selected = useSwatchPickerContextValue_unstable(ctx => ctx.selectedValue === value);\n\n  const role = isGrid ? 'gridcell' : 'radio';\n  const ariaSelected = isGrid\n    ? {\n        'aria-selected': selected,\n      }\n    : { 'aria-checked': selected };\n\n  const onImageSwatchClick = useEventCallback(\n    mergeCallbacks(onClick, (event: React.MouseEvent<HTMLButtonElement>) =>\n      requestSelectionChange(event, {\n        selectedValue: value,\n        selectedSwatch: src,\n      }),\n    ),\n  );\n\n  return {\n    components: {\n      root: 'button',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('button', {\n        ref,\n        role,\n        ...ariaSelected,\n        onClick: onImageSwatchClick,\n        ...rest,\n        style: {\n          backgroundImage: `url(${src})`,\n          ...style,\n        },\n      }),\n      { elementType: 'button' },\n    ),\n    value,\n    selected,\n    size,\n    shape,\n  };\n};\n"],"names":["getIntrinsicElementProps","slot","useEventCallback","mergeCallbacks","useSwatchPickerContextValue_unstable","useImageSwatch_unstable","props","ref","src","value","onClick","style","rest","size","ctx","shape","isGrid","requestSelectionChange","selected","selectedValue","role","ariaSelected","onImageSwatchClick","event","selectedSwatch","components","root","always","backgroundImage","elementType"],"mappings":"AAAA;AAGA,SAASA,wBAAwB,EAAEC,IAAI,EAAEC,gBAAgB,EAAEC,cAAc,QAAQ,4BAA4B;AAE7G,SAASC,oCAAoC,QAAQ,8BAA8B;AAEnF;;;;;;;;CAQC,GACD,OAAO,MAAMC,0BAA0B,CACrCC,OACAC;IAEA,MAAM,EAAEC,GAAG,EAAEC,KAAK,EAAEC,OAAO,EAAEC,KAAK,EAAE,GAAGC,MAAM,GAAGN;IAChD,MAAMO,OAAOT,qCAAqCU,CAAAA,MAAOA,IAAID,IAAI;IACjE,MAAME,QAAQX,qCAAqCU,CAAAA,MAAOA,IAAIC,KAAK;IACnE,MAAMC,SAASZ,qCAAqCU,CAAAA,MAAOA,IAAIE,MAAM;IAErE,MAAMC,yBAAyBb,qCAAqCU,CAAAA,MAAOA,IAAIG,sBAAsB;IACrG,MAAMC,WAAWd,qCAAqCU,CAAAA,MAAOA,IAAIK,aAAa,KAAKV;IAEnF,MAAMW,OAAOJ,SAAS,aAAa;IACnC,MAAMK,eAAeL,SACjB;QACE,iBAAiBE;IACnB,IACA;QAAE,gBAAgBA;IAAS;IAE/B,MAAMI,qBAAqBpB,iBACzBC,eAAeO,SAAS,CAACa,QACvBN,uBAAuBM,OAAO;YAC5BJ,eAAeV;YACfe,gBAAgBhB;QAClB;IAIJ,OAAO;QACLiB,YAAY;YACVC,MAAM;QACR;QACAA,MAAMzB,KAAK0B,MAAM,CACf3B,yBAAyB,UAAU;YACjCO;YACAa;YACA,GAAGC,YAAY;YACfX,SAASY;YACT,GAAGV,IAAI;YACPD,OAAO;gBACLiB,iBAAiB,CAAC,IAAI,EAAEpB,IAAI,CAAC,CAAC;gBAC9B,GAAGG,KAAK;YACV;QACF,IACA;YAAEkB,aAAa;QAAS;QAE1BpB;QACAS;QACAL;QACAE;IACF;AACF,EAAE"}

package/lib/components/SwatchPicker/SwatchPicker.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { useSwatchPicker_unstable } from './useSwatchPicker';
 import { renderSwatchPicker_unstable } from './renderSwatchPicker';
 import { useSwatchPickerStyles_unstable } from './useSwatchPickerStyles.styles';
-import { useSwatchPickerContextValues } from '../../contexts/swatchPicker';
+import { useSwatchPickerContextValues } from './useSwatchPickerContextValues';
 import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 /**
  * SwatchPicker component - TODO: add more docs

package/lib/components/SwatchPicker/SwatchPicker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/SwatchPicker/SwatchPicker.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useSwatchPicker_unstable } from './useSwatchPicker';\nimport { renderSwatchPicker_unstable } from './renderSwatchPicker';\nimport { useSwatchPickerStyles_unstable } from './useSwatchPickerStyles.styles';\nimport type { SwatchPickerProps } from './SwatchPicker.types';\nimport { useSwatchPickerContextValues } from '../../contexts/swatchPicker';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * SwatchPicker component - TODO: add more docs\n */\nexport const SwatchPicker: ForwardRefComponent<SwatchPickerProps> = React.forwardRef((props, ref) => {\n  const state = useSwatchPicker_unstable(props, ref);\n  const contextValues = useSwatchPickerContextValues(state);\n\n  useSwatchPickerStyles_unstable(state);\n  useCustomStyleHook_unstable('useSwatchPickerStyles_unstable')(state);\n\n  return renderSwatchPicker_unstable(state, contextValues);\n});\n\nSwatchPicker.displayName = 'SwatchPicker';\n"],"names":["React","useSwatchPicker_unstable","renderSwatchPicker_unstable","useSwatchPickerStyles_unstable","useSwatchPickerContextValues","useCustomStyleHook_unstable","SwatchPicker","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,8BAA8B,QAAQ,iCAAiC;AAEhF,SAASC,4BAA4B,QAAQ,8BAA8B;AAC3E,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,6BAAuDN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IAC3F,MAAMC,QAAQT,yBAAyBO,OAAOC;IAC9C,MAAME,gBAAgBP,6BAA6BM;IAEnDP,+BAA+BO;IAC/BL,4BAA4B,kCAAkCK;IAE9D,OAAOR,4BAA4BQ,OAAOC;AAC5C,GAAG;AAEHL,aAAaM,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/SwatchPicker/SwatchPicker.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useSwatchPicker_unstable } from './useSwatchPicker';\nimport { renderSwatchPicker_unstable } from './renderSwatchPicker';\nimport { useSwatchPickerStyles_unstable } from './useSwatchPickerStyles.styles';\nimport type { SwatchPickerProps } from './SwatchPicker.types';\nimport { useSwatchPickerContextValues } from './useSwatchPickerContextValues';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * SwatchPicker component - TODO: add more docs\n */\nexport const SwatchPicker: ForwardRefComponent<SwatchPickerProps> = React.forwardRef((props, ref) => {\n  const state = useSwatchPicker_unstable(props, ref);\n  const contextValues = useSwatchPickerContextValues(state);\n\n  useSwatchPickerStyles_unstable(state);\n  useCustomStyleHook_unstable('useSwatchPickerStyles_unstable')(state);\n\n  return renderSwatchPicker_unstable(state, contextValues);\n});\n\nSwatchPicker.displayName = 'SwatchPicker';\n"],"names":["React","useSwatchPicker_unstable","renderSwatchPicker_unstable","useSwatchPickerStyles_unstable","useSwatchPickerContextValues","useCustomStyleHook_unstable","SwatchPicker","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,8BAA8B,QAAQ,iCAAiC;AAEhF,SAASC,4BAA4B,QAAQ,iCAAiC;AAC9E,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,6BAAuDN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IAC3F,MAAMC,QAAQT,yBAAyBO,OAAOC;IAC9C,MAAME,gBAAgBP,6BAA6BM;IAEnDP,+BAA+BO;IAC/BL,4BAA4B,kCAAkCK;IAE9D,OAAOR,4BAA4BQ,OAAOC;AAC5C,GAAG;AAEHL,aAAaM,WAAW,GAAG"}

package/lib/components/SwatchPicker/SwatchPicker.types.js

@@ -1 +1,3 @@
-import * as React from 'react';
+/**
+ * State used in rendering SwatchPicker
+ */ export { };

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/SwatchPicker/SwatchPicker.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot, EventHandler, EventData } from '@fluentui/react-utilities';\nimport { SwatchPickerContextValue } from '../../contexts/swatchPicker';\n\nexport type SwatchPickerSlots = {\n  root: Slot<'div'>;\n};\n\nexport type SwatchPickerOnSelectEventHandler = EventHandler<SwatchPickerOnSelectionChangeData>;\n\nexport type SwatchPickerOnSelectionChangeData = EventData<'click', React.MouseEvent<HTMLButtonElement>> & {\n  selectedValue: string;\n  selectedSwatch: string;\n};\n\n/**\n * SwatchPicker Props\n */\nexport type SwatchPickerProps = ComponentProps<SwatchPickerSlots> & {\n  /**\n   * Default selected value\n   */\n  defaultSelectedValue?: string;\n\n  /**\n   * Sets the focus behavior for the SwatchPicker.\n   *\n   * `arrow`\n   * This behavior will cycle through all elements inside of the SwatchPicker when pressing the Arrow key.\n   *\n   * `tab`\n   * This behavior will cycle through all elements inside of the SwatchPicker when pressing the Tab key.\n   *\n   * @default 'arrow'\n   */\n  focusMode?: 'arrow' | 'tab';\n\n  /**\n   * Whether SwatchPicker is row or grid\n   */\n  layout?: 'row' | 'grid';\n\n  /**\n   * Triggers a callback when the value has been changed\n   */\n  onSelectionChange?: EventHandler<SwatchPickerOnSelectionChangeData>;\n\n  /**\n   * Controlled selected value\n   */\n  selectedValue?: string;\n\n  /**\n   * Swatch size\n   * @defaultvalue 'medium'\n   */\n  size?: 'extra-small' | 'small' | 'medium' | 'large';\n\n  /**\n   * Swatch shape\n   * @defaultvalue 'square'\n   */\n  shape?: 'rounded' | 'square' | 'circular';\n\n  /**\n   * Spacing between swatches\n   * @defaultvalue 'medium'\n   */\n  spacing?: 'small' | 'medium';\n};\n\n/**\n * State used in rendering SwatchPicker\n */\nexport type SwatchPickerState = ComponentState<SwatchPickerSlots> &\n  SwatchPickerContextValue &\n  Pick<SwatchPickerProps, 'layout' | 'size' | 'shape' | 'spacing'> & {\n    isGrid: boolean;\n  };\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
+{"version":3,"sources":["../src/components/SwatchPicker/SwatchPicker.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot, EventHandler, EventData } from '@fluentui/react-utilities';\nimport type { SwatchPickerContextValue } from '../../contexts/swatchPicker';\n\nexport type SwatchPickerSlots = {\n  root: Slot<'div'>;\n};\n\nexport type SwatchPickerOnSelectEventHandler = EventHandler<SwatchPickerOnSelectionChangeData>;\n\nexport type SwatchPickerOnSelectionChangeData = EventData<'click', React.MouseEvent<HTMLButtonElement>> & {\n  selectedValue: string;\n  selectedSwatch: string;\n};\n\n/**\n * SwatchPicker Props\n */\nexport type SwatchPickerProps = ComponentProps<SwatchPickerSlots> & {\n  /**\n   * Default selected value\n   */\n  defaultSelectedValue?: string;\n\n  /**\n   * Sets the focus behavior for the SwatchPicker.\n   *\n   * `arrow`\n   * This behavior will cycle through all elements inside of the SwatchPicker when pressing the Arrow key.\n   *\n   * `tab`\n   * This behavior will cycle through all elements inside of the SwatchPicker when pressing the Tab key.\n   *\n   * @default 'arrow'\n   */\n  focusMode?: 'arrow' | 'tab';\n\n  /**\n   * Whether SwatchPicker is row or grid\n   */\n  layout?: 'row' | 'grid';\n\n  /**\n   * Triggers a callback when the value has been changed\n   */\n  onSelectionChange?: EventHandler<SwatchPickerOnSelectionChangeData>;\n\n  /**\n   * Controlled selected value\n   */\n  selectedValue?: string;\n\n  /**\n   * Swatch size\n   * @defaultvalue 'medium'\n   */\n  size?: 'extra-small' | 'small' | 'medium' | 'large';\n\n  /**\n   * Swatch shape\n   * @defaultvalue 'square'\n   */\n  shape?: 'rounded' | 'square' | 'circular';\n\n  /**\n   * Spacing between swatches\n   * @defaultvalue 'medium'\n   */\n  spacing?: 'small' | 'medium';\n};\n\n/**\n * State used in rendering SwatchPicker\n */\nexport type SwatchPickerState = ComponentState<SwatchPickerSlots> &\n  SwatchPickerContextValue &\n  Pick<SwatchPickerProps, 'layout' | 'size' | 'shape' | 'spacing'> & {\n    isGrid: boolean;\n  };\n"],"names":[],"mappings":"AAuEA;;CAEC,GACD,WAII"}

package/lib/components/SwatchPicker/useSwatchPicker.js

@@ -1,5 +1,4 @@
 'use client';
-import * as React from 'react';
 import { useFieldControlProps_unstable } from '@fluentui/react-field';
 import { useArrowNavigationGroup } from '@fluentui/react-tabster';
 import { getIntrinsicElementProps, useControllableState, useEventCallback, slot } from '@fluentui/react-utilities';

package/lib/components/SwatchPicker/useSwatchPicker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/SwatchPicker/useSwatchPicker.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport { getIntrinsicElementProps, useControllableState, useEventCallback, slot } from '@fluentui/react-utilities';\n\nimport type { SwatchPickerProps, SwatchPickerState } from './SwatchPicker.types';\n\n/**\n * Create the state required to render SwatchPicker.\n *\n * The returned state can be modified with hooks such as useSwatchPickerStyles_unstable,\n * before being passed to renderSwatchPicker_unstable.\n *\n * @param props - props from this instance of SwatchPicker\n * @param ref - reference to root HTMLElement of SwatchPicker\n */\nexport const useSwatchPicker_unstable = (\n  props: SwatchPickerProps,\n  ref: React.Ref<HTMLDivElement>,\n): SwatchPickerState => {\n  // Merge props from surrounding <Field>, if any\n  props = useFieldControlProps_unstable(props);\n\n  const {\n    focusMode = 'arrow',\n    layout,\n    onSelectionChange,\n    size = 'medium',\n    shape,\n    spacing = 'medium',\n    style,\n    ...rest\n  } = props;\n\n  const isGrid = layout === 'grid';\n  const focusAttributes = useArrowNavigationGroup({\n    circular: true,\n    axis: isGrid ? 'grid-linear' : 'both',\n    memorizeCurrent: true,\n  });\n\n  const role = isGrid ? 'grid' : 'radiogroup';\n\n  const [selectedValue, setSelectedValue] = useControllableState({\n    state: props.selectedValue,\n    defaultState: props.defaultSelectedValue,\n    initialState: '',\n  });\n\n  const requestSelectionChange: SwatchPickerState['requestSelectionChange'] = useEventCallback((event, data) => {\n    onSelectionChange?.(event, {\n      type: 'click',\n      event,\n      selectedValue: data.selectedValue,\n      selectedSwatch: data.selectedSwatch,\n    });\n    setSelectedValue(data.selectedValue);\n  });\n\n  return {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        role,\n        ...(focusMode === 'arrow' ? focusAttributes : {}),\n        ...rest,\n      }),\n      { elementType: 'div' },\n    ),\n    isGrid,\n    requestSelectionChange,\n    selectedValue,\n    size,\n    shape,\n    spacing,\n  };\n};\n"],"names":["React","useFieldControlProps_unstable","useArrowNavigationGroup","getIntrinsicElementProps","useControllableState","useEventCallback","slot","useSwatchPicker_unstable","props","ref","focusMode","layout","onSelectionChange","size","shape","spacing","style","rest","isGrid","focusAttributes","circular","axis","memorizeCurrent","role","selectedValue","setSelectedValue","state","defaultState","defaultSelectedValue","initialState","requestSelectionChange","event","data","type","selectedSwatch","components","root","always","elementType"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,6BAA6B,QAAQ,wBAAwB;AACtE,SAASC,uBAAuB,QAAQ,0BAA0B;AAClE,SAASC,wBAAwB,EAAEC,oBAAoB,EAAEC,gBAAgB,EAAEC,IAAI,QAAQ,4BAA4B;AAInH;;;;;;;;CAQC,GACD,OAAO,MAAMC,2BAA2B,CACtCC,OACAC;IAEA,+CAA+C;IAC/CD,QAAQP,8BAA8BO;IAEtC,MAAM,EACJE,YAAY,OAAO,EACnBC,MAAM,EACNC,iBAAiB,EACjBC,OAAO,QAAQ,EACfC,KAAK,EACLC,UAAU,QAAQ,EAClBC,KAAK,EACL,GAAGC,MACJ,GAAGT;IAEJ,MAAMU,SAASP,WAAW;IAC1B,MAAMQ,kBAAkBjB,wBAAwB;QAC9CkB,UAAU;QACVC,MAAMH,SAAS,gBAAgB;QAC/BI,iBAAiB;IACnB;IAEA,MAAMC,OAAOL,SAAS,SAAS;IAE/B,MAAM,CAACM,eAAeC,iBAAiB,GAAGrB,qBAAqB;QAC7DsB,OAAOlB,MAAMgB,aAAa;QAC1BG,cAAcnB,MAAMoB,oBAAoB;QACxCC,cAAc;IAChB;IAEA,MAAMC,yBAAsEzB,iBAAiB,CAAC0B,OAAOC;QACnGpB,8BAAAA,wCAAAA,kBAAoBmB,OAAO;YACzBE,MAAM;YACNF;YACAP,eAAeQ,KAAKR,aAAa;YACjCU,gBAAgBF,KAAKE,cAAc;QACrC;QACAT,iBAAiBO,KAAKR,aAAa;IACrC;IAEA,OAAO;QACLW,YAAY;YACVC,MAAM;QACR;QACAA,MAAM9B,KAAK+B,MAAM,CACflC,yBAAyB,OAAO;YAC9BM;YACAc;YACA,GAAIb,cAAc,UAAUS,kBAAkB,CAAC,CAAC;YAChD,GAAGF,IAAI;QACT,IACA;YAAEqB,aAAa;QAAM;QAEvBpB;QACAY;QACAN;QACAX;QACAC;QACAC;IACF;AACF,EAAE"}
+{"version":3,"sources":["../src/components/SwatchPicker/useSwatchPicker.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\n\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport { getIntrinsicElementProps, useControllableState, useEventCallback, slot } from '@fluentui/react-utilities';\n\nimport type { SwatchPickerProps, SwatchPickerState } from './SwatchPicker.types';\n\n/**\n * Create the state required to render SwatchPicker.\n *\n * The returned state can be modified with hooks such as useSwatchPickerStyles_unstable,\n * before being passed to renderSwatchPicker_unstable.\n *\n * @param props - props from this instance of SwatchPicker\n * @param ref - reference to root HTMLElement of SwatchPicker\n */\nexport const useSwatchPicker_unstable = (\n  props: SwatchPickerProps,\n  ref: React.Ref<HTMLDivElement>,\n): SwatchPickerState => {\n  // Merge props from surrounding <Field>, if any\n  props = useFieldControlProps_unstable(props);\n\n  const {\n    focusMode = 'arrow',\n    layout,\n    onSelectionChange,\n    size = 'medium',\n    shape,\n    spacing = 'medium',\n    style,\n    ...rest\n  } = props;\n\n  const isGrid = layout === 'grid';\n  const focusAttributes = useArrowNavigationGroup({\n    circular: true,\n    axis: isGrid ? 'grid-linear' : 'both',\n    memorizeCurrent: true,\n  });\n\n  const role = isGrid ? 'grid' : 'radiogroup';\n\n  const [selectedValue, setSelectedValue] = useControllableState({\n    state: props.selectedValue,\n    defaultState: props.defaultSelectedValue,\n    initialState: '',\n  });\n\n  const requestSelectionChange: SwatchPickerState['requestSelectionChange'] = useEventCallback((event, data) => {\n    onSelectionChange?.(event, {\n      type: 'click',\n      event,\n      selectedValue: data.selectedValue,\n      selectedSwatch: data.selectedSwatch,\n    });\n    setSelectedValue(data.selectedValue);\n  });\n\n  return {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        role,\n        ...(focusMode === 'arrow' ? focusAttributes : {}),\n        ...rest,\n      }),\n      { elementType: 'div' },\n    ),\n    isGrid,\n    requestSelectionChange,\n    selectedValue,\n    size,\n    shape,\n    spacing,\n  };\n};\n"],"names":["useFieldControlProps_unstable","useArrowNavigationGroup","getIntrinsicElementProps","useControllableState","useEventCallback","slot","useSwatchPicker_unstable","props","ref","focusMode","layout","onSelectionChange","size","shape","spacing","style","rest","isGrid","focusAttributes","circular","axis","memorizeCurrent","role","selectedValue","setSelectedValue","state","defaultState","defaultSelectedValue","initialState","requestSelectionChange","event","data","type","selectedSwatch","components","root","always","elementType"],"mappings":"AAAA;AAIA,SAASA,6BAA6B,QAAQ,wBAAwB;AACtE,SAASC,uBAAuB,QAAQ,0BAA0B;AAClE,SAASC,wBAAwB,EAAEC,oBAAoB,EAAEC,gBAAgB,EAAEC,IAAI,QAAQ,4BAA4B;AAInH;;;;;;;;CAQC,GACD,OAAO,MAAMC,2BAA2B,CACtCC,OACAC;IAEA,+CAA+C;IAC/CD,QAAQP,8BAA8BO;IAEtC,MAAM,EACJE,YAAY,OAAO,EACnBC,MAAM,EACNC,iBAAiB,EACjBC,OAAO,QAAQ,EACfC,KAAK,EACLC,UAAU,QAAQ,EAClBC,KAAK,EACL,GAAGC,MACJ,GAAGT;IAEJ,MAAMU,SAASP,WAAW;IAC1B,MAAMQ,kBAAkBjB,wBAAwB;QAC9CkB,UAAU;QACVC,MAAMH,SAAS,gBAAgB;QAC/BI,iBAAiB;IACnB;IAEA,MAAMC,OAAOL,SAAS,SAAS;IAE/B,MAAM,CAACM,eAAeC,iBAAiB,GAAGrB,qBAAqB;QAC7DsB,OAAOlB,MAAMgB,aAAa;QAC1BG,cAAcnB,MAAMoB,oBAAoB;QACxCC,cAAc;IAChB;IAEA,MAAMC,yBAAsEzB,iBAAiB,CAAC0B,OAAOC;QACnGpB,8BAAAA,wCAAAA,kBAAoBmB,OAAO;YACzBE,MAAM;YACNF;YACAP,eAAeQ,KAAKR,aAAa;YACjCU,gBAAgBF,KAAKE,cAAc;QACrC;QACAT,iBAAiBO,KAAKR,aAAa;IACrC;IAEA,OAAO;QACLW,YAAY;YACVC,MAAM;QACR;QACAA,MAAM9B,KAAK+B,MAAM,CACflC,yBAAyB,OAAO;YAC9BM;YACAc;YACA,GAAIb,cAAc,UAAUS,kBAAkB,CAAC,CAAC;YAChD,GAAGF,IAAI;QACT,IACA;YAAEqB,aAAa;QAAM;QAEvBpB;QACAY;QACAN;QACAX;QACAC;QACAC;IACF;AACF,EAAE"}

package/lib/components/SwatchPicker/useSwatchPickerContextValues.js

@@ -0,0 +1,23 @@
+'use client';
+import * as React from 'react';
+export const useSwatchPickerContextValues = (state)=>{
+    const { isGrid, size, shape, spacing, requestSelectionChange, selectedValue } = state;
+    const swatchPicker = React.useMemo(()=>({
+            isGrid,
+            size,
+            shape,
+            spacing,
+            selectedValue,
+            requestSelectionChange
+        }), [
+        isGrid,
+        size,
+        shape,
+        spacing,
+        selectedValue,
+        requestSelectionChange
+    ]);
+    return {
+        swatchPicker
+    };
+};

package/lib/components/SwatchPicker/useSwatchPickerContextValues.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/SwatchPicker/useSwatchPickerContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { SwatchPickerContextValue, SwatchPickerContextValues } from '../../contexts/swatchPicker';\nimport type { SwatchPickerState } from './SwatchPicker.types';\n\nexport const useSwatchPickerContextValues = (state: SwatchPickerState): SwatchPickerContextValues => {\n  const { isGrid, size, shape, spacing, requestSelectionChange, selectedValue } = state;\n\n  const swatchPicker = React.useMemo<SwatchPickerContextValue>(\n    () => ({\n      isGrid,\n      size,\n      shape,\n      spacing,\n      selectedValue,\n      requestSelectionChange,\n    }),\n    [isGrid, size, shape, spacing, selectedValue, requestSelectionChange],\n  );\n\n  return { swatchPicker };\n};\n"],"names":["React","useSwatchPickerContextValues","state","isGrid","size","shape","spacing","requestSelectionChange","selectedValue","swatchPicker","useMemo"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAI/B,OAAO,MAAMC,+BAA+B,CAACC;IAC3C,MAAM,EAAEC,MAAM,EAAEC,IAAI,EAAEC,KAAK,EAAEC,OAAO,EAAEC,sBAAsB,EAAEC,aAAa,EAAE,GAAGN;IAEhF,MAAMO,eAAeT,MAAMU,OAAO,CAChC,IAAO,CAAA;YACLP;YACAC;YACAC;YACAC;YACAE;YACAD;QACF,CAAA,GACA;QAACJ;QAAQC;QAAMC;QAAOC;QAASE;QAAeD;KAAuB;IAGvE,OAAO;QAAEE;IAAa;AACxB,EAAE"}

package/lib/components/SwatchPickerRow/useSwatchPickerRow.js

@@ -1,5 +1,4 @@
 'use client';
-import * as React from 'react';
 import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
 import { useSwatchPickerContextValue_unstable } from '../../contexts/swatchPicker';
 /**

package/lib/components/SwatchPickerRow/useSwatchPickerRow.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/SwatchPickerRow/useSwatchPickerRow.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { SwatchPickerRowProps, SwatchPickerRowState } from './SwatchPickerRow.types';\nimport { useSwatchPickerContextValue_unstable } from '../../contexts/swatchPicker';\n\n/**\n * Create the state required to render SwatchPickerRow.\n *\n * The returned state can be modified with hooks such as useSwatchPickerRowStyles_unstable,\n * before being passed to renderSwatchPickerRow_unstable.\n *\n * @param props - props from this instance of SwatchPickerRow\n * @param ref - reference to root HTMLDivElement of SwatchPickerRow\n */\nexport const useSwatchPickerRow_unstable = (\n  props: SwatchPickerRowProps,\n  ref: React.Ref<HTMLDivElement>,\n): SwatchPickerRowState => {\n  const { style, ...rest } = props;\n  const spacing = useSwatchPickerContextValue_unstable(ctx => ctx.spacing);\n\n  return {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        role: 'row',\n        ...rest,\n      }),\n      { elementType: 'div' },\n    ),\n    spacing,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useSwatchPickerContextValue_unstable","useSwatchPickerRow_unstable","props","ref","style","rest","spacing","ctx","components","root","always","role","elementType"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAE3E,SAASC,oCAAoC,QAAQ,8BAA8B;AAEnF;;;;;;;;CAQC,GACD,OAAO,MAAMC,8BAA8B,CACzCC,OACAC;IAEA,MAAM,EAAEC,KAAK,EAAE,GAAGC,MAAM,GAAGH;IAC3B,MAAMI,UAAUN,qCAAqCO,CAAAA,MAAOA,IAAID,OAAO;IAEvE,OAAO;QACLE,YAAY;YACVC,MAAM;QACR;QACAA,MAAMV,KAAKW,MAAM,CACfZ,yBAAyB,OAAO;YAC9BK;YACAQ,MAAM;YACN,GAAGN,IAAI;QACT,IACA;YAAEO,aAAa;QAAM;QAEvBN;IACF;AACF,EAAE"}
+{"version":3,"sources":["../src/components/SwatchPickerRow/useSwatchPickerRow.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { SwatchPickerRowProps, SwatchPickerRowState } from './SwatchPickerRow.types';\nimport { useSwatchPickerContextValue_unstable } from '../../contexts/swatchPicker';\n\n/**\n * Create the state required to render SwatchPickerRow.\n *\n * The returned state can be modified with hooks such as useSwatchPickerRowStyles_unstable,\n * before being passed to renderSwatchPickerRow_unstable.\n *\n * @param props - props from this instance of SwatchPickerRow\n * @param ref - reference to root HTMLDivElement of SwatchPickerRow\n */\nexport const useSwatchPickerRow_unstable = (\n  props: SwatchPickerRowProps,\n  ref: React.Ref<HTMLDivElement>,\n): SwatchPickerRowState => {\n  const { style, ...rest } = props;\n  const spacing = useSwatchPickerContextValue_unstable(ctx => ctx.spacing);\n\n  return {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        role: 'row',\n        ...rest,\n      }),\n      { elementType: 'div' },\n    ),\n    spacing,\n  };\n};\n"],"names":["getIntrinsicElementProps","slot","useSwatchPickerContextValue_unstable","useSwatchPickerRow_unstable","props","ref","style","rest","spacing","ctx","components","root","always","role","elementType"],"mappings":"AAAA;AAGA,SAASA,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAE3E,SAASC,oCAAoC,QAAQ,8BAA8B;AAEnF;;;;;;;;CAQC,GACD,OAAO,MAAMC,8BAA8B,CACzCC,OACAC;IAEA,MAAM,EAAEC,KAAK,EAAE,GAAGC,MAAM,GAAGH;IAC3B,MAAMI,UAAUN,qCAAqCO,CAAAA,MAAOA,IAAID,OAAO;IAEvE,OAAO;QACLE,YAAY;YACVC,MAAM;QACR;QACAA,MAAMV,KAAKW,MAAM,CACfZ,yBAAyB,OAAO;YAC9BK;YACAQ,MAAM;YACN,GAAGN,IAAI;QACT,IACA;YAAEO,aAAa;QAAM;QAEvBN;IACF;AACF,EAAE"}

package/lib/contexts/index.js

@@ -1 +1,2 @@
-export { SwatchPickerProvider, swatchPickerContextDefaultValue, useSwatchPickerContextValue_unstable, useSwatchPickerContextValues } from './swatchPicker';
+export { SwatchPickerProvider, swatchPickerContextDefaultValue, useSwatchPickerContextValue_unstable } from './swatchPicker';
+export { useSwatchPickerContextValues } from '../components/SwatchPicker/useSwatchPickerContextValues';

package/lib/contexts/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/contexts/index.ts"],"sourcesContent":["export type { SwatchPickerContextValue, SwatchPickerContextValues } from './swatchPicker';\nexport {\n  SwatchPickerProvider,\n  swatchPickerContextDefaultValue,\n  useSwatchPickerContextValue_unstable,\n  useSwatchPickerContextValues,\n} from './swatchPicker';\n"],"names":["SwatchPickerProvider","swatchPickerContextDefaultValue","useSwatchPickerContextValue_unstable","useSwatchPickerContextValues"],"mappings":"AACA,SACEA,oBAAoB,EACpBC,+BAA+B,EAC/BC,oCAAoC,EACpCC,4BAA4B,QACvB,iBAAiB"}
+{"version":3,"sources":["../src/contexts/index.ts"],"sourcesContent":["export type { SwatchPickerContextValue, SwatchPickerContextValues } from './swatchPicker';\nexport {\n  SwatchPickerProvider,\n  swatchPickerContextDefaultValue,\n  useSwatchPickerContextValue_unstable,\n} from './swatchPicker';\nexport { useSwatchPickerContextValues } from '../components/SwatchPicker/useSwatchPickerContextValues';\n"],"names":["SwatchPickerProvider","swatchPickerContextDefaultValue","useSwatchPickerContextValue_unstable","useSwatchPickerContextValues"],"mappings":"AACA,SACEA,oBAAoB,EACpBC,+BAA+B,EAC/BC,oCAAoC,QAC/B,iBAAiB;AACxB,SAASC,4BAA4B,QAAQ,0DAA0D"}

package/lib/contexts/swatchPicker.js

@@ -1,21 +1,5 @@
 'use client';
-import * as React from 'react';
 import { createContext, useContextSelector } from '@fluentui/react-context-selector';
-export const useSwatchPickerContextValues = (state)=>{
-    const { isGrid, size, shape, spacing, requestSelectionChange, selectedValue } = state;
-    // This context is created with "@fluentui/react-context-selector", these is no sense to memoize it
-    const swatchPicker = {
-        isGrid,
-        size,
-        shape,
-        spacing,
-        selectedValue,
-        requestSelectionChange
-    };
-    return {
-        swatchPicker
-    };
-};
 export const swatchPickerContextDefaultValue = {
     requestSelectionChange: ()=>{
     /*noop*/ },

package/lib/contexts/swatchPicker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/contexts/swatchPicker.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { ContextSelector, Context } from '@fluentui/react-context-selector';\nimport type { SwatchPickerProps, SwatchPickerState } from '../components/SwatchPicker/SwatchPicker.types';\n\n/**\n * The context through which individual color controls communicate with the picker.\n */\nexport type SwatchPickerContextValue = Pick<SwatchPickerProps, 'size' | 'shape' | 'spacing' | 'selectedValue'> & {\n  /**\n   * Whether layout is grid.\n   */\n  isGrid: boolean;\n\n  /**\n   * @internal\n   * Callback used by ColorSwatch to request a change on it's selected state\n   * Should be used to select ColorSwatch\n   */\n  requestSelectionChange: (\n    event: React.MouseEvent<HTMLButtonElement>,\n    data: { selectedValue: string; selectedSwatch: string },\n  ) => void;\n};\n\nexport const useSwatchPickerContextValues = (state: SwatchPickerState): SwatchPickerContextValues => {\n  const { isGrid, size, shape, spacing, requestSelectionChange, selectedValue } = state;\n\n  // This context is created with \"@fluentui/react-context-selector\", these is no sense to memoize it\n  const swatchPicker: SwatchPickerContextValue = {\n    isGrid,\n    size,\n    shape,\n    spacing,\n    selectedValue,\n    requestSelectionChange,\n  };\n\n  return { swatchPicker };\n};\n\nexport const swatchPickerContextDefaultValue: SwatchPickerContextValue = {\n  requestSelectionChange: () => {\n    /*noop*/\n  },\n  isGrid: false,\n  size: 'medium',\n  shape: 'square',\n  spacing: 'medium',\n  selectedValue: undefined,\n};\n\nexport type SwatchPickerContextValues = {\n  swatchPicker: SwatchPickerContextValue;\n};\n\nconst SwatchPickerContext = createContext<SwatchPickerContextValue | undefined>(\n  undefined,\n) as Context<SwatchPickerContextValue>;\n\nexport const SwatchPickerProvider = SwatchPickerContext.Provider;\n\nexport const useSwatchPickerContextValue_unstable = <T>(selector: ContextSelector<SwatchPickerContextValue, T>): T =>\n  useContextSelector(SwatchPickerContext, (ctx = swatchPickerContextDefaultValue) => selector(ctx));\n"],"names":["React","createContext","useContextSelector","useSwatchPickerContextValues","state","isGrid","size","shape","spacing","requestSelectionChange","selectedValue","swatchPicker","swatchPickerContextDefaultValue","undefined","SwatchPickerContext","SwatchPickerProvider","Provider","useSwatchPickerContextValue_unstable","selector","ctx"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAwBrF,OAAO,MAAMC,+BAA+B,CAACC;IAC3C,MAAM,EAAEC,MAAM,EAAEC,IAAI,EAAEC,KAAK,EAAEC,OAAO,EAAEC,sBAAsB,EAAEC,aAAa,EAAE,GAAGN;IAEhF,mGAAmG;IACnG,MAAMO,eAAyC;QAC7CN;QACAC;QACAC;QACAC;QACAE;QACAD;IACF;IAEA,OAAO;QAAEE;IAAa;AACxB,EAAE;AAEF,OAAO,MAAMC,kCAA4D;IACvEH,wBAAwB;IACtB,MAAM,GACR;IACAJ,QAAQ;IACRC,MAAM;IACNC,OAAO;IACPC,SAAS;IACTE,eAAeG;AACjB,EAAE;AAMF,MAAMC,sBAAsBb,cAC1BY;AAGF,OAAO,MAAME,uBAAuBD,oBAAoBE,QAAQ,CAAC;AAEjE,OAAO,MAAMC,uCAAuC,CAAIC,WACtDhB,mBAAmBY,qBAAqB,CAACK,MAAMP,+BAA+B,GAAKM,SAASC,MAAM"}
+{"version":3,"sources":["../src/contexts/swatchPicker.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { ContextSelector, Context } from '@fluentui/react-context-selector';\nimport type { SwatchPickerProps } from '../components/SwatchPicker/SwatchPicker.types';\n\n/**\n * The context through which individual color controls communicate with the picker.\n */\nexport type SwatchPickerContextValue = Pick<SwatchPickerProps, 'size' | 'shape' | 'spacing' | 'selectedValue'> & {\n  /**\n   * Whether layout is grid.\n   */\n  isGrid: boolean;\n\n  /**\n   * Callback used by ColorSwatch to request a change on it's selected state\n   * Should be used to select ColorSwatch\n   *\n   * @internal\n   */\n  requestSelectionChange: (\n    event: React.MouseEvent<HTMLButtonElement>,\n    data: { selectedValue: string; selectedSwatch: string },\n  ) => void;\n};\n\nexport const swatchPickerContextDefaultValue: SwatchPickerContextValue = {\n  requestSelectionChange: () => {\n    /*noop*/\n  },\n  isGrid: false,\n  size: 'medium',\n  shape: 'square',\n  spacing: 'medium',\n  selectedValue: undefined,\n};\n\nexport type SwatchPickerContextValues = {\n  swatchPicker: SwatchPickerContextValue;\n};\n\nconst SwatchPickerContext = createContext<SwatchPickerContextValue | undefined>(\n  undefined,\n) as Context<SwatchPickerContextValue>;\n\nexport const SwatchPickerProvider = SwatchPickerContext.Provider;\n\nexport const useSwatchPickerContextValue_unstable = <T>(selector: ContextSelector<SwatchPickerContextValue, T>): T =>\n  useContextSelector(SwatchPickerContext, (ctx = swatchPickerContextDefaultValue) => selector(ctx));\n"],"names":["createContext","useContextSelector","swatchPickerContextDefaultValue","requestSelectionChange","isGrid","size","shape","spacing","selectedValue","undefined","SwatchPickerContext","SwatchPickerProvider","Provider","useSwatchPickerContextValue_unstable","selector","ctx"],"mappings":"AAAA;AAGA,SAASA,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAyBrF,OAAO,MAAMC,kCAA4D;IACvEC,wBAAwB;IACtB,MAAM,GACR;IACAC,QAAQ;IACRC,MAAM;IACNC,OAAO;IACPC,SAAS;IACTC,eAAeC;AACjB,EAAE;AAMF,MAAMC,sBAAsBV,cAC1BS;AAGF,OAAO,MAAME,uBAAuBD,oBAAoBE,QAAQ,CAAC;AAEjE,OAAO,MAAMC,uCAAuC,CAAIC,WACtDb,mBAAmBS,qBAAqB,CAACK,MAAMb,+BAA+B,GAAKY,SAASC,MAAM"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ColorSwatch/ColorSwatch.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { SwatchPickerProps } from '../SwatchPicker/SwatchPicker.types';\n\nexport type ColorSwatchSlots = {\n  root: NonNullable<Slot<'button'>>;\n  icon?: Slot<'span'>;\n  disabledIcon?: Slot<'span'>;\n};\n\n/**\n * ColorSwatch Props\n */\nexport type ColorSwatchProps = ComponentProps<ColorSwatchSlots> &\n  Pick<SwatchPickerProps, 'size' | 'shape'> & {\n    /**\n     * Border color when contrast is low\n     */\n    borderColor?: string;\n\n    /**\n     * Swatch color\n     */\n    color: string;\n\n    /**\n     * Whether the swatch is disabled\n     */\n    disabled?: boolean;\n\n    /**\n     * Swatch value\n     */\n    value: string;\n  };\n\n/**\n * State used in rendering ColorSwatch\n */\nexport type ColorSwatchState = ComponentState<ColorSwatchSlots> &\n  Pick<ColorSwatchProps, 'color' | 'disabled' | 'size' | 'shape' | 'value'> & {\n    selected: boolean;\n  };\n"],"names":[],"mappings":"AAmCA;;CAEC,GACD,WAGI"}
+{"version":3,"sources":["../src/components/ColorSwatch/ColorSwatch.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { SwatchPickerProps } from '../SwatchPicker/SwatchPicker.types';\n\nexport type ColorSwatchSlots = {\n  root: NonNullable<Slot<'button'>>;\n  icon?: Slot<'span'>;\n  disabledIcon?: Slot<'span'>;\n};\n\n/**\n * ColorSwatch Props\n */\nexport type ColorSwatchProps = ComponentProps<ColorSwatchSlots> &\n  Pick<SwatchPickerProps, 'size' | 'shape'> & {\n    /**\n     * Border color when contrast is low\n     */\n    borderColor?: string;\n\n    /**\n     * Swatch color\n     */\n    color: string;\n\n    /**\n     * Whether the swatch is disabled\n     */\n    disabled?: boolean;\n\n    /**\n     * Swatch value\n     */\n    value: string;\n  };\n\n/**\n * State used in rendering ColorSwatch\n */\nexport type ColorSwatchState = ComponentState<ColorSwatchSlots> &\n  Pick<ColorSwatchProps, 'color' | 'disabled' | 'size' | 'shape' | 'value'> & {\n    selected: boolean;\n  };\n"],"names":[],"mappings":"AAmCA;;CAEC,GACD,WAGI"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/EmptySwatch/EmptySwatch.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { SwatchPickerProps } from '../SwatchPicker/SwatchPicker.types';\n\nexport type EmptySwatchSlots = {\n  root: Slot<'button'>;\n};\n\n/**\n * EmptySwatch Props\n */\nexport type EmptySwatchProps = ComponentProps<EmptySwatchSlots> & Pick<SwatchPickerProps, 'size' | 'shape'>;\n\n/**\n * State used in rendering EmptySwatch\n */\nexport type EmptySwatchState = ComponentState<EmptySwatchSlots> & Pick<EmptySwatchProps, 'size' | 'shape'>;\n"],"names":[],"mappings":"AAYA;;CAEC,GACD,WAA2G"}
+{"version":3,"sources":["../src/components/EmptySwatch/EmptySwatch.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { SwatchPickerProps } from '../SwatchPicker/SwatchPicker.types';\n\nexport type EmptySwatchSlots = {\n  root: Slot<'button'>;\n};\n\n/**\n * EmptySwatch Props\n */\nexport type EmptySwatchProps = ComponentProps<EmptySwatchSlots> & Pick<SwatchPickerProps, 'size' | 'shape'>;\n\n/**\n * State used in rendering EmptySwatch\n */\nexport type EmptySwatchState = ComponentState<EmptySwatchSlots> & Pick<EmptySwatchProps, 'size' | 'shape'>;\n"],"names":[],"mappings":"AAYA;;CAEC,GACD,WAA2G"}

package/lib-commonjs/components/EmptySwatch/useEmptySwatch.js

@@ -9,8 +9,6 @@ Object.defineProperty(exports, "useEmptySwatch_unstable", {
         return useEmptySwatch_unstable;
     }
 });
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactutilities = require("@fluentui/react-utilities");
 const _swatchPicker = require("../../contexts/swatchPicker");
 const useEmptySwatch_unstable = (props, ref)=>{

package/lib-commonjs/components/EmptySwatch/useEmptySwatch.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/EmptySwatch/useEmptySwatch.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { EmptySwatchProps, EmptySwatchState } from './EmptySwatch.types';\nimport { useSwatchPickerContextValue_unstable } from '../../contexts/swatchPicker';\n\n/**\n * Create the state required to render EmptySwatch.\n *\n * The returned state can be modified with hooks such as useEmptySwatchStyles_unstable,\n * before being passed to renderEmptySwatch_unstable.\n *\n * @param props - props from this instance of EmptySwatch\n * @param ref - reference to root HTMLDivElement of EmptySwatch\n */\nexport const useEmptySwatch_unstable = (\n  props: EmptySwatchProps,\n  ref: React.Ref<HTMLButtonElement>,\n): EmptySwatchState => {\n  const { size, shape, ...rest } = props;\n  const _size = useSwatchPickerContextValue_unstable(ctx => ctx.size);\n  const _shape = useSwatchPickerContextValue_unstable(ctx => ctx.shape);\n  const isGrid = useSwatchPickerContextValue_unstable(ctx => ctx.isGrid);\n\n  const role = isGrid ? 'gridcell' : 'radio';\n  const a11yProps = isGrid ? {} : { 'aria-checked': false };\n  return {\n    components: {\n      root: 'button',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('button', {\n        ref,\n        role,\n        ...a11yProps,\n        ...rest,\n      }),\n      { elementType: 'button' },\n    ),\n    size: size ?? _size,\n    shape: shape ?? _shape,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useSwatchPickerContextValue_unstable","useEmptySwatch_unstable","props","ref","size","shape","rest","_size","ctx","_shape","isGrid","role","a11yProps","components","root","always","elementType"],"mappings":"AAAA;;;;;+BAgBaI;;;;;;;iEAdU,QAAQ;gCACgB,4BAA4B;8BAEtB,8BAA8B;AAW5E,gCAAgC,CACrCC,OACAC;IAEA,MAAM,EAAEC,IAAI,EAAEC,KAAK,EAAE,GAAGC,MAAM,GAAGJ;IACjC,MAAMK,YAAQP,kDAAAA,EAAqCQ,CAAAA,MAAOA,IAAIJ,IAAI;IAClE,MAAMK,aAAST,kDAAAA,EAAqCQ,CAAAA,MAAOA,IAAIH,KAAK;IACpE,MAAMK,aAASV,kDAAAA,EAAqCQ,CAAAA,MAAOA,IAAIE,MAAM;IAErE,MAAMC,OAAOD,SAAS,aAAa;IACnC,MAAME,YAAYF,SAAS,CAAC,IAAI;QAAE,gBAAgB;IAAM;IACxD,OAAO;QACLG,YAAY;YACVC,MAAM;QACR;QACAA,MAAMf,oBAAAA,CAAKgB,MAAM,KACfjB,wCAAAA,EAAyB,UAAU;YACjCK;YACAQ;YACA,GAAGC,SAAS;YACZ,GAAGN,IAAI;QACT,IACA;YAAEU,aAAa;QAAS;QAE1BZ,MAAMA,SAAAA,QAAAA,SAAAA,KAAAA,IAAAA,OAAQG;QACdF,OAAOA,UAAAA,QAAAA,UAAAA,KAAAA,IAAAA,QAASI;IAClB;AACF,EAAE"}
+{"version":3,"sources":["../src/components/EmptySwatch/useEmptySwatch.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { EmptySwatchProps, EmptySwatchState } from './EmptySwatch.types';\nimport { useSwatchPickerContextValue_unstable } from '../../contexts/swatchPicker';\n\n/**\n * Create the state required to render EmptySwatch.\n *\n * The returned state can be modified with hooks such as useEmptySwatchStyles_unstable,\n * before being passed to renderEmptySwatch_unstable.\n *\n * @param props - props from this instance of EmptySwatch\n * @param ref - reference to root HTMLDivElement of EmptySwatch\n */\nexport const useEmptySwatch_unstable = (\n  props: EmptySwatchProps,\n  ref: React.Ref<HTMLButtonElement>,\n): EmptySwatchState => {\n  const { size, shape, ...rest } = props;\n  const _size = useSwatchPickerContextValue_unstable(ctx => ctx.size);\n  const _shape = useSwatchPickerContextValue_unstable(ctx => ctx.shape);\n  const isGrid = useSwatchPickerContextValue_unstable(ctx => ctx.isGrid);\n\n  const role = isGrid ? 'gridcell' : 'radio';\n  const a11yProps = isGrid ? {} : { 'aria-checked': false };\n  return {\n    components: {\n      root: 'button',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('button', {\n        ref,\n        role,\n        ...a11yProps,\n        ...rest,\n      }),\n      { elementType: 'button' },\n    ),\n    size: size ?? _size,\n    shape: shape ?? _shape,\n  };\n};\n"],"names":["getIntrinsicElementProps","slot","useSwatchPickerContextValue_unstable","useEmptySwatch_unstable","props","ref","size","shape","rest","_size","ctx","_shape","isGrid","role","a11yProps","components","root","always","elementType"],"mappings":"AAAA;;;;;+BAgBaG;;;;;;gCAbkC,4BAA4B;8BAEtB,8BAA8B;AAW5E,gCAAgC,CACrCC,OACAC;IAEA,MAAM,EAAEC,IAAI,EAAEC,KAAK,EAAE,GAAGC,MAAM,GAAGJ;IACjC,MAAMK,YAAQP,kDAAAA,EAAqCQ,CAAAA,MAAOA,IAAIJ,IAAI;IAClE,MAAMK,aAAST,kDAAAA,EAAqCQ,CAAAA,MAAOA,IAAIH,KAAK;IACpE,MAAMK,aAASV,kDAAAA,EAAqCQ,CAAAA,MAAOA,IAAIE,MAAM;IAErE,MAAMC,OAAOD,SAAS,aAAa;IACnC,MAAME,YAAYF,SAAS,CAAC,IAAI;QAAE,gBAAgB;IAAM;IACxD,OAAO;QACLG,YAAY;YACVC,MAAM;QACR;QACAA,MAAMf,oBAAAA,CAAKgB,MAAM,KACfjB,wCAAAA,EAAyB,UAAU;YACjCK;YACAQ;YACA,GAAGC,SAAS;YACZ,GAAGN,IAAI;QACT,IACA;YAAEU,aAAa;QAAS;QAE1BZ,MAAMA,SAAAA,QAAAA,SAAAA,KAAAA,IAAAA,OAAQG;QACdF,OAAOA,UAAAA,QAAAA,UAAAA,KAAAA,IAAAA,QAASI;IAClB;AACF,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ImageSwatch/ImageSwatch.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { SwatchPickerProps } from '../SwatchPicker/SwatchPicker.types';\n\nexport type ImageSwatchSlots = {\n  root: Slot<'button'>;\n};\n\n/**\n * ImageSwatch Props\n */\nexport type ImageSwatchProps = ComponentProps<ImageSwatchSlots> &\n  Pick<SwatchPickerProps, 'size' | 'shape'> & {\n    /**\n     * Swatch color\n     */\n    src: string;\n\n    /**\n     * Swatch value\n     */\n    value: string;\n  };\n\n/**\n * State used in rendering ImageSwatch\n */\nexport type ImageSwatchState = ComponentState<ImageSwatchSlots> &\n  Pick<ImageSwatchProps, 'color' | 'size' | 'shape' | 'value'> & {\n    selected: boolean;\n  };\n"],"names":[],"mappings":"AAuBA;;CAEC,GACD,WAGI"}
+{"version":3,"sources":["../src/components/ImageSwatch/ImageSwatch.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { SwatchPickerProps } from '../SwatchPicker/SwatchPicker.types';\n\nexport type ImageSwatchSlots = {\n  root: Slot<'button'>;\n};\n\n/**\n * ImageSwatch Props\n */\nexport type ImageSwatchProps = ComponentProps<ImageSwatchSlots> &\n  Pick<SwatchPickerProps, 'size' | 'shape'> & {\n    /**\n     * Swatch color\n     */\n    src: string;\n\n    /**\n     * Swatch value\n     */\n    value: string;\n  };\n\n/**\n * State used in rendering ImageSwatch\n */\nexport type ImageSwatchState = ComponentState<ImageSwatchSlots> &\n  Pick<ImageSwatchProps, 'color' | 'size' | 'shape' | 'value'> & {\n    selected: boolean;\n  };\n"],"names":[],"mappings":"AAuBA;;CAEC,GACD,WAGI"}

package/lib-commonjs/components/ImageSwatch/useImageSwatch.js

@@ -9,8 +9,6 @@ Object.defineProperty(exports, "useImageSwatch_unstable", {
         return useImageSwatch_unstable;
     }
 });
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactutilities = require("@fluentui/react-utilities");
 const _swatchPicker = require("../../contexts/swatchPicker");
 const useImageSwatch_unstable = (props, ref)=>{

package/lib-commonjs/components/ImageSwatch/useImageSwatch.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ImageSwatch/useImageSwatch.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot, useEventCallback, mergeCallbacks } from '@fluentui/react-utilities';\nimport type { ImageSwatchProps, ImageSwatchState } from './ImageSwatch.types';\nimport { useSwatchPickerContextValue_unstable } from '../../contexts/swatchPicker';\n\n/**\n * Create the state required to render ImageSwatch.\n *\n * The returned state can be modified with hooks such as useImageSwatchStyles_unstable,\n * before being passed to renderImageSwatch_unstable.\n *\n * @param props - props from this instance of ImageSwatch\n * @param ref - reference to root HTMLDivElement of ImageSwatch\n */\nexport const useImageSwatch_unstable = (\n  props: ImageSwatchProps,\n  ref: React.Ref<HTMLButtonElement>,\n): ImageSwatchState => {\n  const { src, value, onClick, style, ...rest } = props;\n  const size = useSwatchPickerContextValue_unstable(ctx => ctx.size);\n  const shape = useSwatchPickerContextValue_unstable(ctx => ctx.shape);\n  const isGrid = useSwatchPickerContextValue_unstable(ctx => ctx.isGrid);\n\n  const requestSelectionChange = useSwatchPickerContextValue_unstable(ctx => ctx.requestSelectionChange);\n  const selected = useSwatchPickerContextValue_unstable(ctx => ctx.selectedValue === value);\n\n  const role = isGrid ? 'gridcell' : 'radio';\n  const ariaSelected = isGrid\n    ? {\n        'aria-selected': selected,\n      }\n    : { 'aria-checked': selected };\n\n  const onImageSwatchClick = useEventCallback(\n    mergeCallbacks(onClick, (event: React.MouseEvent<HTMLButtonElement>) =>\n      requestSelectionChange(event, {\n        selectedValue: value,\n        selectedSwatch: src,\n      }),\n    ),\n  );\n\n  return {\n    components: {\n      root: 'button',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('button', {\n        ref,\n        role,\n        ...ariaSelected,\n        onClick: onImageSwatchClick,\n        ...rest,\n        style: {\n          backgroundImage: `url(${src})`,\n          ...style,\n        },\n      }),\n      { elementType: 'button' },\n    ),\n    value,\n    selected,\n    size,\n    shape,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useEventCallback","mergeCallbacks","useSwatchPickerContextValue_unstable","useImageSwatch_unstable","props","ref","src","value","onClick","style","rest","size","ctx","shape","isGrid","requestSelectionChange","selected","selectedValue","role","ariaSelected","onImageSwatchClick","event","selectedSwatch","components","root","always","backgroundImage","elementType"],"mappings":"AAAA;;;;;+BAgBaM;;;;;;;iEAdU,QAAQ;gCACkD,4BAA4B;8BAExD,8BAA8B;AAW5E,gCAAgC,CACrCC,OACAC;IAEA,MAAM,EAAEC,GAAG,EAAEC,KAAK,EAAEC,OAAO,EAAEC,KAAK,EAAE,GAAGC,MAAM,GAAGN;IAChD,MAAMO,WAAOT,kDAAAA,EAAqCU,CAAAA,MAAOA,IAAID,IAAI;IACjE,MAAME,YAAQX,kDAAAA,EAAqCU,CAAAA,MAAOA,IAAIC,KAAK;IACnE,MAAMC,aAASZ,kDAAAA,EAAqCU,CAAAA,MAAOA,IAAIE,MAAM;IAErE,MAAMC,6BAAyBb,kDAAAA,EAAqCU,CAAAA,MAAOA,IAAIG,sBAAsB;IACrG,MAAMC,eAAWd,kDAAAA,EAAqCU,CAAAA,MAAOA,IAAIK,aAAa,KAAKV;IAEnF,MAAMW,OAAOJ,SAAS,aAAa;IACnC,MAAMK,eAAeL,SACjB;QACE,iBAAiBE;IACnB,IACA;QAAE,gBAAgBA;IAAS;IAE/B,MAAMI,yBAAqBpB,gCAAAA,MACzBC,8BAAAA,EAAeO,SAAS,CAACa,QACvBN,uBAAuBM,OAAO;YAC5BJ,eAAeV;YACfe,gBAAgBhB;QAClB;IAIJ,OAAO;QACLiB,YAAY;YACVC,MAAM;QACR;QACAA,MAAMzB,oBAAAA,CAAK0B,MAAM,KACf3B,wCAAAA,EAAyB,UAAU;YACjCO;YACAa;YACA,GAAGC,YAAY;YACfX,SAASY;YACT,GAAGV,IAAI;YACPD,OAAO;gBACLiB,iBAAiB,CAAC,IAAI,EAAEpB,IAAI,CAAC,CAAC;gBAC9B,GAAGG,KAAK;YACV;QACF,IACA;YAAEkB,aAAa;QAAS;QAE1BpB;QACAS;QACAL;QACAE;IACF;AACF,EAAE"}
+{"version":3,"sources":["../src/components/ImageSwatch/useImageSwatch.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { getIntrinsicElementProps, slot, useEventCallback, mergeCallbacks } from '@fluentui/react-utilities';\nimport type { ImageSwatchProps, ImageSwatchState } from './ImageSwatch.types';\nimport { useSwatchPickerContextValue_unstable } from '../../contexts/swatchPicker';\n\n/**\n * Create the state required to render ImageSwatch.\n *\n * The returned state can be modified with hooks such as useImageSwatchStyles_unstable,\n * before being passed to renderImageSwatch_unstable.\n *\n * @param props - props from this instance of ImageSwatch\n * @param ref - reference to root HTMLDivElement of ImageSwatch\n */\nexport const useImageSwatch_unstable = (\n  props: ImageSwatchProps,\n  ref: React.Ref<HTMLButtonElement>,\n): ImageSwatchState => {\n  const { src, value, onClick, style, ...rest } = props;\n  const size = useSwatchPickerContextValue_unstable(ctx => ctx.size);\n  const shape = useSwatchPickerContextValue_unstable(ctx => ctx.shape);\n  const isGrid = useSwatchPickerContextValue_unstable(ctx => ctx.isGrid);\n\n  const requestSelectionChange = useSwatchPickerContextValue_unstable(ctx => ctx.requestSelectionChange);\n  const selected = useSwatchPickerContextValue_unstable(ctx => ctx.selectedValue === value);\n\n  const role = isGrid ? 'gridcell' : 'radio';\n  const ariaSelected = isGrid\n    ? {\n        'aria-selected': selected,\n      }\n    : { 'aria-checked': selected };\n\n  const onImageSwatchClick = useEventCallback(\n    mergeCallbacks(onClick, (event: React.MouseEvent<HTMLButtonElement>) =>\n      requestSelectionChange(event, {\n        selectedValue: value,\n        selectedSwatch: src,\n      }),\n    ),\n  );\n\n  return {\n    components: {\n      root: 'button',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('button', {\n        ref,\n        role,\n        ...ariaSelected,\n        onClick: onImageSwatchClick,\n        ...rest,\n        style: {\n          backgroundImage: `url(${src})`,\n          ...style,\n        },\n      }),\n      { elementType: 'button' },\n    ),\n    value,\n    selected,\n    size,\n    shape,\n  };\n};\n"],"names":["getIntrinsicElementProps","slot","useEventCallback","mergeCallbacks","useSwatchPickerContextValue_unstable","useImageSwatch_unstable","props","ref","src","value","onClick","style","rest","size","ctx","shape","isGrid","requestSelectionChange","selected","selectedValue","role","ariaSelected","onImageSwatchClick","event","selectedSwatch","components","root","always","backgroundImage","elementType"],"mappings":"AAAA;;;;;+BAgBaK;;;;;;gCAboE,4BAA4B;8BAExD,8BAA8B;AAW5E,gCAAgC,CACrCC,OACAC;IAEA,MAAM,EAAEC,GAAG,EAAEC,KAAK,EAAEC,OAAO,EAAEC,KAAK,EAAE,GAAGC,MAAM,GAAGN;IAChD,MAAMO,WAAOT,kDAAAA,EAAqCU,CAAAA,MAAOA,IAAID,IAAI;IACjE,MAAME,YAAQX,kDAAAA,EAAqCU,CAAAA,MAAOA,IAAIC,KAAK;IACnE,MAAMC,aAASZ,kDAAAA,EAAqCU,CAAAA,MAAOA,IAAIE,MAAM;IAErE,MAAMC,6BAAyBb,kDAAAA,EAAqCU,CAAAA,MAAOA,IAAIG,sBAAsB;IACrG,MAAMC,WAAWd,sDAAAA,EAAqCU,CAAAA,MAAOA,IAAIK,aAAa,KAAKV;IAEnF,MAAMW,OAAOJ,SAAS,aAAa;IACnC,MAAMK,eAAeL,SACjB;QACE,iBAAiBE;IACnB,IACA;QAAE,gBAAgBA;IAAS;IAE/B,MAAMI,yBAAqBpB,gCAAAA,MACzBC,8BAAAA,EAAeO,SAAS,CAACa,QACvBN,uBAAuBM,OAAO;YAC5BJ,eAAeV;YACfe,gBAAgBhB;QAClB;IAIJ,OAAO;QACLiB,YAAY;YACVC,MAAM;QACR;QACAA,MAAMzB,oBAAAA,CAAK0B,MAAM,KACf3B,wCAAAA,EAAyB,UAAU;YACjCO;YACAa;YACA,GAAGC,YAAY;YACfX,SAASY;YACT,GAAGV,IAAI;YACPD,OAAO;gBACLiB,iBAAiB,CAAC,IAAI,EAAEpB,IAAI,CAAC,CAAC;gBAC9B,GAAGG,KAAK;YACV;QACF,IACA;YAAEkB,aAAa;QAAS;QAE1BpB;QACAS;QACAL;QACAE;IACF;AACF,EAAE"}

package/lib-commonjs/components/SwatchPicker/SwatchPicker.js

@@ -14,11 +14,11 @@ const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _useSwatchPicker = require("./useSwatchPicker");
 const _renderSwatchPicker = require("./renderSwatchPicker");
 const _useSwatchPickerStylesstyles = require("./useSwatchPickerStyles.styles");
-const _swatchPicker = require("../../contexts/swatchPicker");
+const _useSwatchPickerContextValues = require("./useSwatchPickerContextValues");
 const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
 const SwatchPicker = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
     const state = (0, _useSwatchPicker.useSwatchPicker_unstable)(props, ref);
-    const contextValues = (0, _swatchPicker.useSwatchPickerContextValues)(state);
+    const contextValues = (0, _useSwatchPickerContextValues.useSwatchPickerContextValues)(state);
     (0, _useSwatchPickerStylesstyles.useSwatchPickerStyles_unstable)(state);
     (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useSwatchPickerStyles_unstable')(state);
     return (0, _renderSwatchPicker.renderSwatchPicker_unstable)(state, contextValues);

package/lib-commonjs/components/SwatchPicker/SwatchPicker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/SwatchPicker/SwatchPicker.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useSwatchPicker_unstable } from './useSwatchPicker';\nimport { renderSwatchPicker_unstable } from './renderSwatchPicker';\nimport { useSwatchPickerStyles_unstable } from './useSwatchPickerStyles.styles';\nimport type { SwatchPickerProps } from './SwatchPicker.types';\nimport { useSwatchPickerContextValues } from '../../contexts/swatchPicker';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * SwatchPicker component - TODO: add more docs\n */\nexport const SwatchPicker: ForwardRefComponent<SwatchPickerProps> = React.forwardRef((props, ref) => {\n  const state = useSwatchPicker_unstable(props, ref);\n  const contextValues = useSwatchPickerContextValues(state);\n\n  useSwatchPickerStyles_unstable(state);\n  useCustomStyleHook_unstable('useSwatchPickerStyles_unstable')(state);\n\n  return renderSwatchPicker_unstable(state, contextValues);\n});\n\nSwatchPicker.displayName = 'SwatchPicker';\n"],"names":["React","useSwatchPicker_unstable","renderSwatchPicker_unstable","useSwatchPickerStyles_unstable","useSwatchPickerContextValues","useCustomStyleHook_unstable","SwatchPicker","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;iCAEU,oBAAoB;oCACjB,uBAAuB;6CACpB,iCAAiC;8BAEnC,8BAA8B;qCAC/B,kCAAkC;AAKvE,MAAMM,eAAAA,WAAAA,GAAuDN,OAAMO,UAAU,CAAC,CAACC,OAAOC;IAC3F,MAAMC,YAAQT,yCAAAA,EAAyBO,OAAOC;IAC9C,MAAME,oBAAgBP,0CAAAA,EAA6BM;QAEnDP,2DAAAA,EAA+BO;QAC/BL,gDAAAA,EAA4B,kCAAkCK;IAE9D,WAAOR,+CAAAA,EAA4BQ,OAAOC;AAC5C,GAAG;AAEHL,aAAaM,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/SwatchPicker/SwatchPicker.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useSwatchPicker_unstable } from './useSwatchPicker';\nimport { renderSwatchPicker_unstable } from './renderSwatchPicker';\nimport { useSwatchPickerStyles_unstable } from './useSwatchPickerStyles.styles';\nimport type { SwatchPickerProps } from './SwatchPicker.types';\nimport { useSwatchPickerContextValues } from './useSwatchPickerContextValues';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * SwatchPicker component - TODO: add more docs\n */\nexport const SwatchPicker: ForwardRefComponent<SwatchPickerProps> = React.forwardRef((props, ref) => {\n  const state = useSwatchPicker_unstable(props, ref);\n  const contextValues = useSwatchPickerContextValues(state);\n\n  useSwatchPickerStyles_unstable(state);\n  useCustomStyleHook_unstable('useSwatchPickerStyles_unstable')(state);\n\n  return renderSwatchPicker_unstable(state, contextValues);\n});\n\nSwatchPicker.displayName = 'SwatchPicker';\n"],"names":["React","useSwatchPicker_unstable","renderSwatchPicker_unstable","useSwatchPickerStyles_unstable","useSwatchPickerContextValues","useCustomStyleHook_unstable","SwatchPicker","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;iCAEU,oBAAoB;oCACjB,uBAAuB;6CACpB,iCAAiC;8CAEnC,iCAAiC;qCAClC,kCAAkC;AAKvE,MAAMM,eAAAA,WAAAA,GAAuDN,OAAMO,UAAU,CAAC,CAACC,OAAOC;IAC3F,MAAMC,YAAQT,yCAAAA,EAAyBO,OAAOC;IAC9C,MAAME,oBAAgBP,0DAAAA,EAA6BM;QAEnDP,2DAAAA,EAA+BO;QAC/BL,gDAAAA,EAA4B,kCAAkCK;IAE9D,WAAOR,+CAAAA,EAA4BQ,OAAOC;AAC5C,GAAG;AAEHL,aAAaM,WAAW,GAAG"}

package/lib-commonjs/components/SwatchPicker/SwatchPicker.types.js

@@ -1,6 +1,6 @@
-"use strict";
+/**
+ * State used in rendering SwatchPicker
+ */ "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/SwatchPicker/SwatchPicker.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot, EventHandler, EventData } from '@fluentui/react-utilities';\nimport { SwatchPickerContextValue } from '../../contexts/swatchPicker';\n\nexport type SwatchPickerSlots = {\n  root: Slot<'div'>;\n};\n\nexport type SwatchPickerOnSelectEventHandler = EventHandler<SwatchPickerOnSelectionChangeData>;\n\nexport type SwatchPickerOnSelectionChangeData = EventData<'click', React.MouseEvent<HTMLButtonElement>> & {\n  selectedValue: string;\n  selectedSwatch: string;\n};\n\n/**\n * SwatchPicker Props\n */\nexport type SwatchPickerProps = ComponentProps<SwatchPickerSlots> & {\n  /**\n   * Default selected value\n   */\n  defaultSelectedValue?: string;\n\n  /**\n   * Sets the focus behavior for the SwatchPicker.\n   *\n   * `arrow`\n   * This behavior will cycle through all elements inside of the SwatchPicker when pressing the Arrow key.\n   *\n   * `tab`\n   * This behavior will cycle through all elements inside of the SwatchPicker when pressing the Tab key.\n   *\n   * @default 'arrow'\n   */\n  focusMode?: 'arrow' | 'tab';\n\n  /**\n   * Whether SwatchPicker is row or grid\n   */\n  layout?: 'row' | 'grid';\n\n  /**\n   * Triggers a callback when the value has been changed\n   */\n  onSelectionChange?: EventHandler<SwatchPickerOnSelectionChangeData>;\n\n  /**\n   * Controlled selected value\n   */\n  selectedValue?: string;\n\n  /**\n   * Swatch size\n   * @defaultvalue 'medium'\n   */\n  size?: 'extra-small' | 'small' | 'medium' | 'large';\n\n  /**\n   * Swatch shape\n   * @defaultvalue 'square'\n   */\n  shape?: 'rounded' | 'square' | 'circular';\n\n  /**\n   * Spacing between swatches\n   * @defaultvalue 'medium'\n   */\n  spacing?: 'small' | 'medium';\n};\n\n/**\n * State used in rendering SwatchPicker\n */\nexport type SwatchPickerState = ComponentState<SwatchPickerSlots> &\n  SwatchPickerContextValue &\n  Pick<SwatchPickerProps, 'layout' | 'size' | 'shape' | 'spacing'> & {\n    isGrid: boolean;\n  };\n"],"names":["React"],"mappings":";;;;;iEAAuB,QAAQ"}
+{"version":3,"sources":["../src/components/SwatchPicker/SwatchPicker.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot, EventHandler, EventData } from '@fluentui/react-utilities';\nimport type { SwatchPickerContextValue } from '../../contexts/swatchPicker';\n\nexport type SwatchPickerSlots = {\n  root: Slot<'div'>;\n};\n\nexport type SwatchPickerOnSelectEventHandler = EventHandler<SwatchPickerOnSelectionChangeData>;\n\nexport type SwatchPickerOnSelectionChangeData = EventData<'click', React.MouseEvent<HTMLButtonElement>> & {\n  selectedValue: string;\n  selectedSwatch: string;\n};\n\n/**\n * SwatchPicker Props\n */\nexport type SwatchPickerProps = ComponentProps<SwatchPickerSlots> & {\n  /**\n   * Default selected value\n   */\n  defaultSelectedValue?: string;\n\n  /**\n   * Sets the focus behavior for the SwatchPicker.\n   *\n   * `arrow`\n   * This behavior will cycle through all elements inside of the SwatchPicker when pressing the Arrow key.\n   *\n   * `tab`\n   * This behavior will cycle through all elements inside of the SwatchPicker when pressing the Tab key.\n   *\n   * @default 'arrow'\n   */\n  focusMode?: 'arrow' | 'tab';\n\n  /**\n   * Whether SwatchPicker is row or grid\n   */\n  layout?: 'row' | 'grid';\n\n  /**\n   * Triggers a callback when the value has been changed\n   */\n  onSelectionChange?: EventHandler<SwatchPickerOnSelectionChangeData>;\n\n  /**\n   * Controlled selected value\n   */\n  selectedValue?: string;\n\n  /**\n   * Swatch size\n   * @defaultvalue 'medium'\n   */\n  size?: 'extra-small' | 'small' | 'medium' | 'large';\n\n  /**\n   * Swatch shape\n   * @defaultvalue 'square'\n   */\n  shape?: 'rounded' | 'square' | 'circular';\n\n  /**\n   * Spacing between swatches\n   * @defaultvalue 'medium'\n   */\n  spacing?: 'small' | 'medium';\n};\n\n/**\n * State used in rendering SwatchPicker\n */\nexport type SwatchPickerState = ComponentState<SwatchPickerSlots> &\n  SwatchPickerContextValue &\n  Pick<SwatchPickerProps, 'layout' | 'size' | 'shape' | 'spacing'> & {\n    isGrid: boolean;\n  };\n"],"names":[],"mappings":"AAuEA;;CAEC,GACD,WAII"}

package/lib-commonjs/components/SwatchPicker/useSwatchPicker.js

@@ -9,8 +9,6 @@ Object.defineProperty(exports, "useSwatchPicker_unstable", {
         return useSwatchPicker_unstable;
     }
 });
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactfield = require("@fluentui/react-field");
 const _reacttabster = require("@fluentui/react-tabster");
 const _reactutilities = require("@fluentui/react-utilities");

package/lib-commonjs/components/SwatchPicker/useSwatchPicker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/SwatchPicker/useSwatchPicker.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport { getIntrinsicElementProps, useControllableState, useEventCallback, slot } from '@fluentui/react-utilities';\n\nimport type { SwatchPickerProps, SwatchPickerState } from './SwatchPicker.types';\n\n/**\n * Create the state required to render SwatchPicker.\n *\n * The returned state can be modified with hooks such as useSwatchPickerStyles_unstable,\n * before being passed to renderSwatchPicker_unstable.\n *\n * @param props - props from this instance of SwatchPicker\n * @param ref - reference to root HTMLElement of SwatchPicker\n */\nexport const useSwatchPicker_unstable = (\n  props: SwatchPickerProps,\n  ref: React.Ref<HTMLDivElement>,\n): SwatchPickerState => {\n  // Merge props from surrounding <Field>, if any\n  props = useFieldControlProps_unstable(props);\n\n  const {\n    focusMode = 'arrow',\n    layout,\n    onSelectionChange,\n    size = 'medium',\n    shape,\n    spacing = 'medium',\n    style,\n    ...rest\n  } = props;\n\n  const isGrid = layout === 'grid';\n  const focusAttributes = useArrowNavigationGroup({\n    circular: true,\n    axis: isGrid ? 'grid-linear' : 'both',\n    memorizeCurrent: true,\n  });\n\n  const role = isGrid ? 'grid' : 'radiogroup';\n\n  const [selectedValue, setSelectedValue] = useControllableState({\n    state: props.selectedValue,\n    defaultState: props.defaultSelectedValue,\n    initialState: '',\n  });\n\n  const requestSelectionChange: SwatchPickerState['requestSelectionChange'] = useEventCallback((event, data) => {\n    onSelectionChange?.(event, {\n      type: 'click',\n      event,\n      selectedValue: data.selectedValue,\n      selectedSwatch: data.selectedSwatch,\n    });\n    setSelectedValue(data.selectedValue);\n  });\n\n  return {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        role,\n        ...(focusMode === 'arrow' ? focusAttributes : {}),\n        ...rest,\n      }),\n      { elementType: 'div' },\n    ),\n    isGrid,\n    requestSelectionChange,\n    selectedValue,\n    size,\n    shape,\n    spacing,\n  };\n};\n"],"names":["React","useFieldControlProps_unstable","useArrowNavigationGroup","getIntrinsicElementProps","useControllableState","useEventCallback","slot","useSwatchPicker_unstable","props","ref","focusMode","layout","onSelectionChange","size","shape","spacing","style","rest","isGrid","focusAttributes","circular","axis","memorizeCurrent","role","selectedValue","setSelectedValue","state","defaultState","defaultSelectedValue","initialState","requestSelectionChange","event","data","type","selectedSwatch","components","root","always","elementType"],"mappings":"AAAA;;;;;+BAmBaO;;;;;;;iEAjBU,QAAQ;4BAEe,wBAAwB;8BAC9B,0BAA0B;gCACqB,4BAA4B;AAa5G,iCAAiC,CACtCC,OACAC;IAEA,+CAA+C;IAC/CD,YAAQP,yCAAAA,EAA8BO;IAEtC,MAAM,EACJE,YAAY,OAAO,EACnBC,MAAM,EACNC,iBAAiB,EACjBC,OAAO,QAAQ,EACfC,KAAK,EACLC,UAAU,QAAQ,EAClBC,KAAK,EACL,GAAGC,MACJ,GAAGT;IAEJ,MAAMU,SAASP,WAAW;IAC1B,MAAMQ,kBAAkBjB,yCAAAA,EAAwB;QAC9CkB,UAAU;QACVC,MAAMH,SAAS,gBAAgB;QAC/BI,iBAAiB;IACnB;IAEA,MAAMC,OAAOL,SAAS,SAAS;IAE/B,MAAM,CAACM,eAAeC,iBAAiB,OAAGrB,oCAAAA,EAAqB;QAC7DsB,OAAOlB,MAAMgB,aAAa;QAC1BG,cAAcnB,MAAMoB,oBAAoB;QACxCC,cAAc;IAChB;IAEA,MAAMC,6BAAsEzB,gCAAAA,EAAiB,CAAC0B,OAAOC;QACnGpB,sBAAAA,QAAAA,sBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,kBAAoBmB,OAAO;YACzBE,MAAM;YACNF;YACAP,eAAeQ,KAAKR,aAAa;YACjCU,gBAAgBF,KAAKE,cAAc;QACrC;QACAT,iBAAiBO,KAAKR,aAAa;IACrC;IAEA,OAAO;QACLW,YAAY;YACVC,MAAM;QACR;QACAA,MAAM9B,oBAAAA,CAAK+B,MAAM,KACflC,wCAAAA,EAAyB,OAAO;YAC9BM;YACAc;YACA,GAAIb,cAAc,UAAUS,kBAAkB,CAAC,CAAC;YAChD,GAAGF,IAAI;QACT,IACA;YAAEqB,aAAa;QAAM;QAEvBpB;QACAY;QACAN;QACAX;QACAC;QACAC;IACF;AACF,EAAE"}
+{"version":3,"sources":["../src/components/SwatchPicker/useSwatchPicker.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\n\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport { getIntrinsicElementProps, useControllableState, useEventCallback, slot } from '@fluentui/react-utilities';\n\nimport type { SwatchPickerProps, SwatchPickerState } from './SwatchPicker.types';\n\n/**\n * Create the state required to render SwatchPicker.\n *\n * The returned state can be modified with hooks such as useSwatchPickerStyles_unstable,\n * before being passed to renderSwatchPicker_unstable.\n *\n * @param props - props from this instance of SwatchPicker\n * @param ref - reference to root HTMLElement of SwatchPicker\n */\nexport const useSwatchPicker_unstable = (\n  props: SwatchPickerProps,\n  ref: React.Ref<HTMLDivElement>,\n): SwatchPickerState => {\n  // Merge props from surrounding <Field>, if any\n  props = useFieldControlProps_unstable(props);\n\n  const {\n    focusMode = 'arrow',\n    layout,\n    onSelectionChange,\n    size = 'medium',\n    shape,\n    spacing = 'medium',\n    style,\n    ...rest\n  } = props;\n\n  const isGrid = layout === 'grid';\n  const focusAttributes = useArrowNavigationGroup({\n    circular: true,\n    axis: isGrid ? 'grid-linear' : 'both',\n    memorizeCurrent: true,\n  });\n\n  const role = isGrid ? 'grid' : 'radiogroup';\n\n  const [selectedValue, setSelectedValue] = useControllableState({\n    state: props.selectedValue,\n    defaultState: props.defaultSelectedValue,\n    initialState: '',\n  });\n\n  const requestSelectionChange: SwatchPickerState['requestSelectionChange'] = useEventCallback((event, data) => {\n    onSelectionChange?.(event, {\n      type: 'click',\n      event,\n      selectedValue: data.selectedValue,\n      selectedSwatch: data.selectedSwatch,\n    });\n    setSelectedValue(data.selectedValue);\n  });\n\n  return {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        role,\n        ...(focusMode === 'arrow' ? focusAttributes : {}),\n        ...rest,\n      }),\n      { elementType: 'div' },\n    ),\n    isGrid,\n    requestSelectionChange,\n    selectedValue,\n    size,\n    shape,\n    spacing,\n  };\n};\n"],"names":["useFieldControlProps_unstable","useArrowNavigationGroup","getIntrinsicElementProps","useControllableState","useEventCallback","slot","useSwatchPicker_unstable","props","ref","focusMode","layout","onSelectionChange","size","shape","spacing","style","rest","isGrid","focusAttributes","circular","axis","memorizeCurrent","role","selectedValue","setSelectedValue","state","defaultState","defaultSelectedValue","initialState","requestSelectionChange","event","data","type","selectedSwatch","components","root","always","elementType"],"mappings":"AAAA;;;;;+BAmBaM;;;;;;4BAfiC,wBAAwB;8BAC9B,0BAA0B;gCACqB,4BAA4B;AAa5G,iCAAiC,CACtCC,OACAC;IAEA,+CAA+C;IAC/CD,YAAQP,yCAAAA,EAA8BO;IAEtC,MAAM,EACJE,YAAY,OAAO,EACnBC,MAAM,EACNC,iBAAiB,EACjBC,OAAO,QAAQ,EACfC,KAAK,EACLC,UAAU,QAAQ,EAClBC,KAAK,EACL,GAAGC,MACJ,GAAGT;IAEJ,MAAMU,SAASP,WAAW;IAC1B,MAAMQ,kBAAkBjB,yCAAAA,EAAwB;QAC9CkB,UAAU;QACVC,MAAMH,SAAS,gBAAgB;QAC/BI,iBAAiB;IACnB;IAEA,MAAMC,OAAOL,SAAS,SAAS;IAE/B,MAAM,CAACM,eAAeC,iBAAiB,OAAGrB,oCAAAA,EAAqB;QAC7DsB,OAAOlB,MAAMgB,aAAa;QAC1BG,cAAcnB,MAAMoB,oBAAoB;QACxCC,cAAc;IAChB;IAEA,MAAMC,yBAAsEzB,oCAAAA,EAAiB,CAAC0B,OAAOC;QACnGpB,sBAAAA,QAAAA,sBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,kBAAoBmB,OAAO;YACzBE,MAAM;YACNF;YACAP,eAAeQ,KAAKR,aAAa;YACjCU,gBAAgBF,KAAKE,cAAc;QACrC;QACAT,iBAAiBO,KAAKR,aAAa;IACrC;IAEA,OAAO;QACLW,YAAY;YACVC,MAAM;QACR;QACAA,MAAM9B,oBAAAA,CAAK+B,MAAM,KACflC,wCAAAA,EAAyB,OAAO;YAC9BM;YACAc;YACA,GAAIb,cAAc,UAAUS,kBAAkB,CAAC,CAAC;YAChD,GAAGF,IAAI;QACT,IACA;YAAEqB,aAAa;QAAM;QAEvBpB;QACAY;QACAN;QACAX;QACAC;QACAC;IACF;AACF,EAAE"}

package/lib-commonjs/components/SwatchPicker/useSwatchPickerContextValues.js

@@ -0,0 +1,34 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useSwatchPickerContextValues", {
+    enumerable: true,
+    get: function() {
+        return useSwatchPickerContextValues;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const useSwatchPickerContextValues = (state)=>{
+    const { isGrid, size, shape, spacing, requestSelectionChange, selectedValue } = state;
+    const swatchPicker = _react.useMemo(()=>({
+            isGrid,
+            size,
+            shape,
+            spacing,
+            selectedValue,
+            requestSelectionChange
+        }), [
+        isGrid,
+        size,
+        shape,
+        spacing,
+        selectedValue,
+        requestSelectionChange
+    ]);
+    return {
+        swatchPicker
+    };
+};

package/lib-commonjs/components/SwatchPicker/useSwatchPickerContextValues.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/SwatchPicker/useSwatchPickerContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { SwatchPickerContextValue, SwatchPickerContextValues } from '../../contexts/swatchPicker';\nimport type { SwatchPickerState } from './SwatchPicker.types';\n\nexport const useSwatchPickerContextValues = (state: SwatchPickerState): SwatchPickerContextValues => {\n  const { isGrid, size, shape, spacing, requestSelectionChange, selectedValue } = state;\n\n  const swatchPicker = React.useMemo<SwatchPickerContextValue>(\n    () => ({\n      isGrid,\n      size,\n      shape,\n      spacing,\n      selectedValue,\n      requestSelectionChange,\n    }),\n    [isGrid, size, shape, spacing, selectedValue, requestSelectionChange],\n  );\n\n  return { swatchPicker };\n};\n"],"names":["React","useSwatchPickerContextValues","state","isGrid","size","shape","spacing","requestSelectionChange","selectedValue","swatchPicker","useMemo"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;AAIxB,MAAMC,+BAA+B,CAACC;IAC3C,MAAM,EAAEC,MAAM,EAAEC,IAAI,EAAEC,KAAK,EAAEC,OAAO,EAAEC,sBAAsB,EAAEC,aAAa,EAAE,GAAGN;IAEhF,MAAMO,eAAeT,OAAMU,OAAO,CAChC,IAAO,CAAA;YACLP;YACAC;YACAC;YACAC;YACAE;YACAD;SACF,CAAA,EACA;QAACJ;QAAQC;QAAMC;QAAOC;QAASE;QAAeD;KAAuB;IAGvE,OAAO;QAAEE;IAAa;AACxB,EAAE"}

package/lib-commonjs/components/SwatchPickerRow/useSwatchPickerRow.js

@@ -9,8 +9,6 @@ Object.defineProperty(exports, "useSwatchPickerRow_unstable", {
         return useSwatchPickerRow_unstable;
     }
 });
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactutilities = require("@fluentui/react-utilities");
 const _swatchPicker = require("../../contexts/swatchPicker");
 const useSwatchPickerRow_unstable = (props, ref)=>{

package/lib-commonjs/components/SwatchPickerRow/useSwatchPickerRow.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/SwatchPickerRow/useSwatchPickerRow.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { SwatchPickerRowProps, SwatchPickerRowState } from './SwatchPickerRow.types';\nimport { useSwatchPickerContextValue_unstable } from '../../contexts/swatchPicker';\n\n/**\n * Create the state required to render SwatchPickerRow.\n *\n * The returned state can be modified with hooks such as useSwatchPickerRowStyles_unstable,\n * before being passed to renderSwatchPickerRow_unstable.\n *\n * @param props - props from this instance of SwatchPickerRow\n * @param ref - reference to root HTMLDivElement of SwatchPickerRow\n */\nexport const useSwatchPickerRow_unstable = (\n  props: SwatchPickerRowProps,\n  ref: React.Ref<HTMLDivElement>,\n): SwatchPickerRowState => {\n  const { style, ...rest } = props;\n  const spacing = useSwatchPickerContextValue_unstable(ctx => ctx.spacing);\n\n  return {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        role: 'row',\n        ...rest,\n      }),\n      { elementType: 'div' },\n    ),\n    spacing,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useSwatchPickerContextValue_unstable","useSwatchPickerRow_unstable","props","ref","style","rest","spacing","ctx","components","root","always","role","elementType"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;gCACgB,4BAA4B;8BAEtB,8BAA8B;AAW5E,MAAMI,8BAA8B,CACzCC,OACAC;IAEA,MAAM,EAAEC,KAAK,EAAE,GAAGC,MAAM,GAAGH;IAC3B,MAAMI,cAAUN,kDAAAA,EAAqCO,CAAAA,MAAOA,IAAID,OAAO;IAEvE,OAAO;QACLE,YAAY;YACVC,MAAM;QACR;QACAA,MAAMV,oBAAAA,CAAKW,MAAM,KACfZ,wCAAAA,EAAyB,OAAO;YAC9BK;YACAQ,MAAM;YACN,GAAGN,IAAI;QACT,IACA;YAAEO,aAAa;QAAM;QAEvBN;IACF;AACF,EAAE"}
+{"version":3,"sources":["../src/components/SwatchPickerRow/useSwatchPickerRow.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { SwatchPickerRowProps, SwatchPickerRowState } from './SwatchPickerRow.types';\nimport { useSwatchPickerContextValue_unstable } from '../../contexts/swatchPicker';\n\n/**\n * Create the state required to render SwatchPickerRow.\n *\n * The returned state can be modified with hooks such as useSwatchPickerRowStyles_unstable,\n * before being passed to renderSwatchPickerRow_unstable.\n *\n * @param props - props from this instance of SwatchPickerRow\n * @param ref - reference to root HTMLDivElement of SwatchPickerRow\n */\nexport const useSwatchPickerRow_unstable = (\n  props: SwatchPickerRowProps,\n  ref: React.Ref<HTMLDivElement>,\n): SwatchPickerRowState => {\n  const { style, ...rest } = props;\n  const spacing = useSwatchPickerContextValue_unstable(ctx => ctx.spacing);\n\n  return {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        role: 'row',\n        ...rest,\n      }),\n      { elementType: 'div' },\n    ),\n    spacing,\n  };\n};\n"],"names":["getIntrinsicElementProps","slot","useSwatchPickerContextValue_unstable","useSwatchPickerRow_unstable","props","ref","style","rest","spacing","ctx","components","root","always","role","elementType"],"mappings":"AAAA;;;;;;;;;;;gCAG+C,4BAA4B;8BAEtB,8BAA8B;AAW5E,MAAMG,8BAA8B,CACzCC,OACAC;IAEA,MAAM,EAAEC,KAAK,EAAE,GAAGC,MAAM,GAAGH;IAC3B,MAAMI,cAAUN,kDAAAA,EAAqCO,CAAAA,MAAOA,IAAID,OAAO;IAEvE,OAAO;QACLE,YAAY;YACVC,MAAM;QACR;QACAA,MAAMV,oBAAAA,CAAKW,MAAM,KACfZ,wCAAAA,EAAyB,OAAO;YAC9BK;YACAQ,MAAM;YACN,GAAGN,IAAI;QACT,IACA;YAAEO,aAAa;QAAM;QAEvBN;IACF;AACF,EAAE"}

package/lib-commonjs/contexts/index.js

@@ -19,7 +19,8 @@ _export(exports, {
         return _swatchPicker.useSwatchPickerContextValue_unstable;
     },
     useSwatchPickerContextValues: function() {
-        return _swatchPicker.useSwatchPickerContextValues;
+        return _useSwatchPickerContextValues.useSwatchPickerContextValues;
     }
 });
 const _swatchPicker = require("./swatchPicker");
+const _useSwatchPickerContextValues = require("../components/SwatchPicker/useSwatchPickerContextValues");

package/lib-commonjs/contexts/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/contexts/index.ts"],"sourcesContent":["export type { SwatchPickerContextValue, SwatchPickerContextValues } from './swatchPicker';\nexport {\n  SwatchPickerProvider,\n  swatchPickerContextDefaultValue,\n  useSwatchPickerContextValue_unstable,\n  useSwatchPickerContextValues,\n} from './swatchPicker';\n"],"names":["SwatchPickerProvider","swatchPickerContextDefaultValue","useSwatchPickerContextValue_unstable","useSwatchPickerContextValues"],"mappings":";;;;;;;;;;;;eAEEA,kCAAoB;;;eACpBC,6CAA+B;;;eAC/BC,kDAAoC;;;eACpCC,0CAA4B;;;8BACvB,iBAAiB"}
+{"version":3,"sources":["../src/contexts/index.ts"],"sourcesContent":["export type { SwatchPickerContextValue, SwatchPickerContextValues } from './swatchPicker';\nexport {\n  SwatchPickerProvider,\n  swatchPickerContextDefaultValue,\n  useSwatchPickerContextValue_unstable,\n} from './swatchPicker';\nexport { useSwatchPickerContextValues } from '../components/SwatchPicker/useSwatchPickerContextValues';\n"],"names":["SwatchPickerProvider","swatchPickerContextDefaultValue","useSwatchPickerContextValue_unstable","useSwatchPickerContextValues"],"mappings":";;;;;;;;;;;;eAEEA,kCAAoB;;;eACpBC,6CAA+B;;;eAC/BC,kDAAoC;;;eAE7BC,0DAA4B;;;8BAD9B,iBAAiB;8CACqB,0DAA0D"}

package/lib-commonjs/contexts/swatchPicker.js

@@ -18,29 +18,9 @@ _export(exports, {
     },
     useSwatchPickerContextValue_unstable: function() {
         return useSwatchPickerContextValue_unstable;
-    },
-    useSwatchPickerContextValues: function() {
-        return useSwatchPickerContextValues;
     }
 });
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactcontextselector = require("@fluentui/react-context-selector");
-const useSwatchPickerContextValues = (state)=>{
-    const { isGrid, size, shape, spacing, requestSelectionChange, selectedValue } = state;
-    // This context is created with "@fluentui/react-context-selector", these is no sense to memoize it
-    const swatchPicker = {
-        isGrid,
-        size,
-        shape,
-        spacing,
-        selectedValue,
-        requestSelectionChange
-    };
-    return {
-        swatchPicker
-    };
-};
 const swatchPickerContextDefaultValue = {
     requestSelectionChange: ()=>{
     /*noop*/ },

package/lib-commonjs/contexts/swatchPicker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/contexts/swatchPicker.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { ContextSelector, Context } from '@fluentui/react-context-selector';\nimport type { SwatchPickerProps, SwatchPickerState } from '../components/SwatchPicker/SwatchPicker.types';\n\n/**\n * The context through which individual color controls communicate with the picker.\n */\nexport type SwatchPickerContextValue = Pick<SwatchPickerProps, 'size' | 'shape' | 'spacing' | 'selectedValue'> & {\n  /**\n   * Whether layout is grid.\n   */\n  isGrid: boolean;\n\n  /**\n   * @internal\n   * Callback used by ColorSwatch to request a change on it's selected state\n   * Should be used to select ColorSwatch\n   */\n  requestSelectionChange: (\n    event: React.MouseEvent<HTMLButtonElement>,\n    data: { selectedValue: string; selectedSwatch: string },\n  ) => void;\n};\n\nexport const useSwatchPickerContextValues = (state: SwatchPickerState): SwatchPickerContextValues => {\n  const { isGrid, size, shape, spacing, requestSelectionChange, selectedValue } = state;\n\n  // This context is created with \"@fluentui/react-context-selector\", these is no sense to memoize it\n  const swatchPicker: SwatchPickerContextValue = {\n    isGrid,\n    size,\n    shape,\n    spacing,\n    selectedValue,\n    requestSelectionChange,\n  };\n\n  return { swatchPicker };\n};\n\nexport const swatchPickerContextDefaultValue: SwatchPickerContextValue = {\n  requestSelectionChange: () => {\n    /*noop*/\n  },\n  isGrid: false,\n  size: 'medium',\n  shape: 'square',\n  spacing: 'medium',\n  selectedValue: undefined,\n};\n\nexport type SwatchPickerContextValues = {\n  swatchPicker: SwatchPickerContextValue;\n};\n\nconst SwatchPickerContext = createContext<SwatchPickerContextValue | undefined>(\n  undefined,\n) as Context<SwatchPickerContextValue>;\n\nexport const SwatchPickerProvider = SwatchPickerContext.Provider;\n\nexport const useSwatchPickerContextValue_unstable = <T>(selector: ContextSelector<SwatchPickerContextValue, T>): T =>\n  useContextSelector(SwatchPickerContext, (ctx = swatchPickerContextDefaultValue) => selector(ctx));\n"],"names":["React","createContext","useContextSelector","useSwatchPickerContextValues","state","isGrid","size","shape","spacing","requestSelectionChange","selectedValue","swatchPicker","swatchPickerContextDefaultValue","undefined","SwatchPickerContext","SwatchPickerProvider","Provider","useSwatchPickerContextValue_unstable","selector","ctx"],"mappings":"AAAA;;;;;;;;;;;;wBA8Dae;;;mCAnBAH;;;wCAqBAK;;;gCArCAd;;;;;iEAzBU,QAAQ;sCACmB,mCAAmC;AAwB9E,MAAMA,+BAA+B,CAACC;IAC3C,MAAM,EAAEC,MAAM,EAAEC,IAAI,EAAEC,KAAK,EAAEC,OAAO,EAAEC,sBAAsB,EAAEC,aAAa,EAAE,GAAGN;IAEhF,mGAAmG;IACnG,MAAMO,eAAyC;QAC7CN;QACAC;QACAC;QACAC;QACAE;QACAD;IACF;IAEA,OAAO;QAAEE;IAAa;AACxB,EAAE;AAEK,MAAMC,kCAA4D;IACvEH,wBAAwB;IACtB,MAAM,GACR;IACAJ,QAAQ;IACRC,MAAM;IACNC,OAAO;IACPC,SAAS;IACTE,eAAeG;AACjB,EAAE;AAMF,MAAMC,0BAAsBb,mCAAAA,EAC1BY;AAGK,MAAME,uBAAuBD,oBAAoBE,QAAQ,CAAC;AAE1D,MAAMC,uCAAuC,CAAIC,eACtDhB,wCAAAA,EAAmBY,qBAAqB,CAACK,MAAMP,+BAA+B,GAAKM,SAASC,MAAM"}
+{"version":3,"sources":["../src/contexts/swatchPicker.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { ContextSelector, Context } from '@fluentui/react-context-selector';\nimport type { SwatchPickerProps } from '../components/SwatchPicker/SwatchPicker.types';\n\n/**\n * The context through which individual color controls communicate with the picker.\n */\nexport type SwatchPickerContextValue = Pick<SwatchPickerProps, 'size' | 'shape' | 'spacing' | 'selectedValue'> & {\n  /**\n   * Whether layout is grid.\n   */\n  isGrid: boolean;\n\n  /**\n   * Callback used by ColorSwatch to request a change on it's selected state\n   * Should be used to select ColorSwatch\n   *\n   * @internal\n   */\n  requestSelectionChange: (\n    event: React.MouseEvent<HTMLButtonElement>,\n    data: { selectedValue: string; selectedSwatch: string },\n  ) => void;\n};\n\nexport const swatchPickerContextDefaultValue: SwatchPickerContextValue = {\n  requestSelectionChange: () => {\n    /*noop*/\n  },\n  isGrid: false,\n  size: 'medium',\n  shape: 'square',\n  spacing: 'medium',\n  selectedValue: undefined,\n};\n\nexport type SwatchPickerContextValues = {\n  swatchPicker: SwatchPickerContextValue;\n};\n\nconst SwatchPickerContext = createContext<SwatchPickerContextValue | undefined>(\n  undefined,\n) as Context<SwatchPickerContextValue>;\n\nexport const SwatchPickerProvider = SwatchPickerContext.Provider;\n\nexport const useSwatchPickerContextValue_unstable = <T>(selector: ContextSelector<SwatchPickerContextValue, T>): T =>\n  useContextSelector(SwatchPickerContext, (ctx = swatchPickerContextDefaultValue) => selector(ctx));\n"],"names":["createContext","useContextSelector","swatchPickerContextDefaultValue","requestSelectionChange","isGrid","size","shape","spacing","selectedValue","undefined","SwatchPickerContext","SwatchPickerProvider","Provider","useSwatchPickerContextValue_unstable","selector","ctx"],"mappings":"AAAA;;;;;;;;;;;;wBA+CaW;;;mCAnBAT;;;wCAqBAW;;;;sCA9CqC,mCAAmC;AAyB9E,MAAMX,kCAA4D;IACvEC,wBAAwB;IACtB,MAAM,GACR;IACAC,QAAQ;IACRC,MAAM;IACNC,OAAO;IACPC,SAAS;IACTC,eAAeC;AACjB,EAAE;AAMF,MAAMC,0BAAsBV,mCAAAA,EAC1BS;AAGK,MAAME,uBAAuBD,oBAAoBE,QAAQ,CAAC;AAE1D,MAAMC,uCAAuC,CAAIC,eACtDb,wCAAAA,EAAmBS,qBAAqB,CAACK,MAAMb,+BAA+B,GAAKY,SAASC,MAAM"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-swatch-picker",
-  "version": "9.5.0",
+  "version": "9.5.2",
   "description": "New fluentui react package",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -12,14 +12,14 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@fluentui/react-context-selector": "^9.2.15",
-    "@fluentui/react-field": "^9.4.16",
+    "@fluentui/react-context-selector": "^9.2.16",
+    "@fluentui/react-field": "^9.5.1",
     "@fluentui/react-icons": "^2.0.245",
-    "@fluentui/react-jsx-runtime": "^9.4.1",
+    "@fluentui/react-jsx-runtime": "^9.4.2",
     "@fluentui/react-shared-contexts": "^9.26.2",
-    "@fluentui/react-tabster": "^9.26.13",
+    "@fluentui/react-tabster": "^9.26.14",
     "@fluentui/react-theme": "^9.2.1",
-    "@fluentui/react-utilities": "^9.26.2",
+    "@fluentui/react-utilities": "^9.26.3",
     "@griffel/react": "^1.5.32",
     "@swc/helpers": "^0.5.1"
   },