@fluentui/react-swatch-picker 9.4.15 → 9.5.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +21 -2
- package/dist/index.d.ts +14 -1
- package/lib/components/SwatchPicker/SwatchPicker.types.js.map +1 -1
- package/lib/components/SwatchPicker/useSwatchPicker.js +2 -2
- package/lib/components/SwatchPicker/useSwatchPicker.js.map +1 -1
- package/lib/contexts/swatchPicker.js.map +1 -1
- package/lib-commonjs/components/SwatchPicker/SwatchPicker.types.js.map +1 -1
- package/lib-commonjs/components/SwatchPicker/useSwatchPicker.js +2 -2
- package/lib-commonjs/components/SwatchPicker/useSwatchPicker.js.map +1 -1
- package/lib-commonjs/contexts/swatchPicker.js.map +1 -1
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,31 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-swatch-picker
|
|
2
2
|
|
|
3
|
-
This log was last generated on Wed,
|
|
3
|
+
This log was last generated on Wed, 01 Apr 2026 15:50:23 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.5.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker_v9.5.1)
|
|
8
|
+
|
|
9
|
+
Wed, 01 Apr 2026 15:50:23 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker_v9.5.0..@fluentui/react-swatch-picker_v9.5.1)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- Bump @fluentui/react-field to v9.5.0 ([PR #35912](https://github.com/microsoft/fluentui/pull/35912) by beachball)
|
|
15
|
+
|
|
16
|
+
## [9.5.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker_v9.5.0)
|
|
17
|
+
|
|
18
|
+
Wed, 11 Mar 2026 09:22:22 GMT
|
|
19
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker_v9.4.15..@fluentui/react-swatch-picker_v9.5.0)
|
|
20
|
+
|
|
21
|
+
### Minor changes
|
|
22
|
+
|
|
23
|
+
- 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)
|
|
24
|
+
- Bump @fluentui/react-field to v9.4.16 ([PR #35859](https://github.com/microsoft/fluentui/pull/35859) by beachball)
|
|
25
|
+
|
|
7
26
|
## [9.4.15](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker_v9.4.15)
|
|
8
27
|
|
|
9
|
-
Wed, 25 Feb 2026 13:28
|
|
28
|
+
Wed, 25 Feb 2026 13:32:28 GMT
|
|
10
29
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker_v9.4.14..@fluentui/react-swatch-picker_v9.4.15)
|
|
11
30
|
|
|
12
31
|
### Patches
|
package/dist/index.d.ts
CHANGED
|
@@ -154,9 +154,10 @@ export declare type SwatchPickerContextValue = Pick<SwatchPickerProps, 'size' |
|
|
|
154
154
|
*/
|
|
155
155
|
isGrid: boolean;
|
|
156
156
|
/**
|
|
157
|
-
* @internal
|
|
158
157
|
* Callback used by ColorSwatch to request a change on it's selected state
|
|
159
158
|
* Should be used to select ColorSwatch
|
|
159
|
+
*
|
|
160
|
+
* @internal
|
|
160
161
|
*/
|
|
161
162
|
requestSelectionChange: (event: React_2.MouseEvent<HTMLButtonElement>, data: {
|
|
162
163
|
selectedValue: string;
|
|
@@ -193,6 +194,18 @@ export declare type SwatchPickerProps = ComponentProps<SwatchPickerSlots> & {
|
|
|
193
194
|
* Default selected value
|
|
194
195
|
*/
|
|
195
196
|
defaultSelectedValue?: string;
|
|
197
|
+
/**
|
|
198
|
+
* Sets the focus behavior for the SwatchPicker.
|
|
199
|
+
*
|
|
200
|
+
* `arrow`
|
|
201
|
+
* This behavior will cycle through all elements inside of the SwatchPicker when pressing the Arrow key.
|
|
202
|
+
*
|
|
203
|
+
* `tab`
|
|
204
|
+
* This behavior will cycle through all elements inside of the SwatchPicker when pressing the Tab key.
|
|
205
|
+
*
|
|
206
|
+
* @default 'arrow'
|
|
207
|
+
*/
|
|
208
|
+
focusMode?: 'arrow' | 'tab';
|
|
196
209
|
/**
|
|
197
210
|
* Whether SwatchPicker is row or grid
|
|
198
211
|
*/
|
|
@@ -1 +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 * 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"}
|
|
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"}
|
|
@@ -14,7 +14,7 @@ import { getIntrinsicElementProps, useControllableState, useEventCallback, slot
|
|
|
14
14
|
*/ export const useSwatchPicker_unstable = (props, ref)=>{
|
|
15
15
|
// Merge props from surrounding <Field>, if any
|
|
16
16
|
props = useFieldControlProps_unstable(props);
|
|
17
|
-
const { layout, onSelectionChange, size = 'medium', shape, spacing = 'medium', style, ...rest } = props;
|
|
17
|
+
const { focusMode = 'arrow', layout, onSelectionChange, size = 'medium', shape, spacing = 'medium', style, ...rest } = props;
|
|
18
18
|
const isGrid = layout === 'grid';
|
|
19
19
|
const focusAttributes = useArrowNavigationGroup({
|
|
20
20
|
circular: true,
|
|
@@ -43,7 +43,7 @@ import { getIntrinsicElementProps, useControllableState, useEventCallback, slot
|
|
|
43
43
|
root: slot.always(getIntrinsicElementProps('div', {
|
|
44
44
|
ref,
|
|
45
45
|
role,
|
|
46
|
-
...focusAttributes,
|
|
46
|
+
...focusMode === 'arrow' ? focusAttributes : {},
|
|
47
47
|
...rest
|
|
48
48
|
}), {
|
|
49
49
|
elementType: 'div'
|
|
@@ -1 +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 { layout
|
|
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"}
|
|
@@ -1 +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 *
|
|
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 * 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 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;AAyBrF,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"}
|
|
@@ -1 +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 * 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"}
|
|
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"}
|
|
@@ -17,7 +17,7 @@ const _reactutilities = require("@fluentui/react-utilities");
|
|
|
17
17
|
const useSwatchPicker_unstable = (props, ref)=>{
|
|
18
18
|
// Merge props from surrounding <Field>, if any
|
|
19
19
|
props = (0, _reactfield.useFieldControlProps_unstable)(props);
|
|
20
|
-
const { layout, onSelectionChange, size = 'medium', shape, spacing = 'medium', style, ...rest } = props;
|
|
20
|
+
const { focusMode = 'arrow', layout, onSelectionChange, size = 'medium', shape, spacing = 'medium', style, ...rest } = props;
|
|
21
21
|
const isGrid = layout === 'grid';
|
|
22
22
|
const focusAttributes = (0, _reacttabster.useArrowNavigationGroup)({
|
|
23
23
|
circular: true,
|
|
@@ -46,7 +46,7 @@ const useSwatchPicker_unstable = (props, ref)=>{
|
|
|
46
46
|
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
|
|
47
47
|
ref,
|
|
48
48
|
role,
|
|
49
|
-
...focusAttributes,
|
|
49
|
+
...focusMode === 'arrow' ? focusAttributes : {},
|
|
50
50
|
...rest
|
|
51
51
|
}), {
|
|
52
52
|
elementType: 'div'
|
|
@@ -1 +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 { layout
|
|
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"}
|
|
@@ -1 +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 *
|
|
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 * 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 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;;;;;;;;;;;;wBA+Dae;;;mCAnBAH;;;wCAqBAK;;;gCArCAd;;;;;iEA1BU,QAAQ;sCACmB,mCAAmC;AAyB9E,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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-swatch-picker",
|
|
3
|
-
"version": "9.
|
|
3
|
+
"version": "9.5.1",
|
|
4
4
|
"description": "New fluentui react package",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
"license": "MIT",
|
|
14
14
|
"dependencies": {
|
|
15
15
|
"@fluentui/react-context-selector": "^9.2.15",
|
|
16
|
-
"@fluentui/react-field": "^9.
|
|
16
|
+
"@fluentui/react-field": "^9.5.0",
|
|
17
17
|
"@fluentui/react-icons": "^2.0.245",
|
|
18
18
|
"@fluentui/react-jsx-runtime": "^9.4.1",
|
|
19
19
|
"@fluentui/react-shared-contexts": "^9.26.2",
|