@fluentui/react-swatch-picker 9.4.4 → 9.4.6
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 +40 -8
- package/dist/index.d.ts +5 -5
- package/lib/components/ColorSwatch/ColorSwatch.js +1 -0
- package/lib/components/ColorSwatch/ColorSwatch.js.map +1 -1
- package/lib/components/ColorSwatch/renderColorSwatch.js.map +1 -1
- package/lib/components/ColorSwatch/useColorSwatch.js +1 -0
- package/lib/components/ColorSwatch/useColorSwatch.js.map +1 -1
- package/lib/components/ColorSwatch/useColorSwatchStyles.styles.js +2 -0
- package/lib/components/ColorSwatch/useColorSwatchStyles.styles.js.map +1 -1
- package/lib/components/ColorSwatch/useColorSwatchStyles.styles.raw.js +1 -0
- package/lib/components/ColorSwatch/useColorSwatchStyles.styles.raw.js.map +1 -1
- package/lib/components/EmptySwatch/EmptySwatch.js +1 -0
- package/lib/components/EmptySwatch/EmptySwatch.js.map +1 -1
- package/lib/components/EmptySwatch/renderEmptySwatch.js.map +1 -1
- package/lib/components/EmptySwatch/useEmptySwatch.js +1 -0
- package/lib/components/EmptySwatch/useEmptySwatch.js.map +1 -1
- package/lib/components/EmptySwatch/useEmptySwatchStyles.styles.js +2 -0
- package/lib/components/EmptySwatch/useEmptySwatchStyles.styles.js.map +1 -1
- package/lib/components/EmptySwatch/useEmptySwatchStyles.styles.raw.js +1 -0
- package/lib/components/EmptySwatch/useEmptySwatchStyles.styles.raw.js.map +1 -1
- package/lib/components/ImageSwatch/ImageSwatch.js +1 -0
- package/lib/components/ImageSwatch/ImageSwatch.js.map +1 -1
- package/lib/components/ImageSwatch/renderImageSwatch.js.map +1 -1
- package/lib/components/ImageSwatch/useImageSwatch.js +1 -0
- package/lib/components/ImageSwatch/useImageSwatch.js.map +1 -1
- package/lib/components/ImageSwatch/useImageSwatchStyles.styles.js +2 -0
- package/lib/components/ImageSwatch/useImageSwatchStyles.styles.js.map +1 -1
- package/lib/components/ImageSwatch/useImageSwatchStyles.styles.raw.js +1 -0
- package/lib/components/ImageSwatch/useImageSwatchStyles.styles.raw.js.map +1 -1
- package/lib/components/SwatchPicker/SwatchPicker.js +1 -0
- package/lib/components/SwatchPicker/SwatchPicker.js.map +1 -1
- package/lib/components/SwatchPicker/renderSwatchPicker.js.map +1 -1
- package/lib/components/SwatchPicker/useSwatchPicker.js +1 -0
- package/lib/components/SwatchPicker/useSwatchPicker.js.map +1 -1
- package/lib/components/SwatchPicker/useSwatchPickerStyles.styles.js +2 -0
- package/lib/components/SwatchPicker/useSwatchPickerStyles.styles.js.map +1 -1
- package/lib/components/SwatchPicker/useSwatchPickerStyles.styles.raw.js +1 -0
- package/lib/components/SwatchPicker/useSwatchPickerStyles.styles.raw.js.map +1 -1
- package/lib/components/SwatchPickerRow/SwatchPickerRow.js +1 -0
- package/lib/components/SwatchPickerRow/SwatchPickerRow.js.map +1 -1
- package/lib/components/SwatchPickerRow/renderSwatchPickerRow.js.map +1 -1
- package/lib/components/SwatchPickerRow/useSwatchPickerRow.js +1 -0
- package/lib/components/SwatchPickerRow/useSwatchPickerRow.js.map +1 -1
- package/lib/components/SwatchPickerRow/useSwatchPickerRowStyles.styles.js +2 -0
- package/lib/components/SwatchPickerRow/useSwatchPickerRowStyles.styles.js.map +1 -1
- package/lib/components/SwatchPickerRow/useSwatchPickerRowStyles.styles.raw.js +1 -0
- package/lib/components/SwatchPickerRow/useSwatchPickerRowStyles.styles.raw.js.map +1 -1
- package/lib/contexts/swatchPicker.js +1 -0
- package/lib/contexts/swatchPicker.js.map +1 -1
- package/lib/utils/renderUtils.js.map +1 -1
- package/lib-commonjs/components/ColorSwatch/ColorSwatch.js +1 -0
- package/lib-commonjs/components/ColorSwatch/ColorSwatch.js.map +1 -1
- package/lib-commonjs/components/ColorSwatch/renderColorSwatch.js.map +1 -1
- package/lib-commonjs/components/ColorSwatch/useColorSwatch.js +1 -0
- package/lib-commonjs/components/ColorSwatch/useColorSwatch.js.map +1 -1
- package/lib-commonjs/components/ColorSwatch/useColorSwatchStyles.styles.js +1 -0
- package/lib-commonjs/components/ColorSwatch/useColorSwatchStyles.styles.js.map +1 -1
- package/lib-commonjs/components/ColorSwatch/useColorSwatchStyles.styles.raw.js +1 -0
- package/lib-commonjs/components/ColorSwatch/useColorSwatchStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/EmptySwatch/EmptySwatch.js +1 -0
- package/lib-commonjs/components/EmptySwatch/EmptySwatch.js.map +1 -1
- package/lib-commonjs/components/EmptySwatch/renderEmptySwatch.js.map +1 -1
- package/lib-commonjs/components/EmptySwatch/useEmptySwatch.js +1 -0
- package/lib-commonjs/components/EmptySwatch/useEmptySwatch.js.map +1 -1
- package/lib-commonjs/components/EmptySwatch/useEmptySwatchStyles.styles.js +1 -0
- package/lib-commonjs/components/EmptySwatch/useEmptySwatchStyles.styles.js.map +1 -1
- package/lib-commonjs/components/EmptySwatch/useEmptySwatchStyles.styles.raw.js +1 -0
- package/lib-commonjs/components/EmptySwatch/useEmptySwatchStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/ImageSwatch/ImageSwatch.js +1 -0
- package/lib-commonjs/components/ImageSwatch/ImageSwatch.js.map +1 -1
- package/lib-commonjs/components/ImageSwatch/renderImageSwatch.js.map +1 -1
- package/lib-commonjs/components/ImageSwatch/useImageSwatch.js +1 -0
- package/lib-commonjs/components/ImageSwatch/useImageSwatch.js.map +1 -1
- package/lib-commonjs/components/ImageSwatch/useImageSwatchStyles.styles.js +1 -0
- package/lib-commonjs/components/ImageSwatch/useImageSwatchStyles.styles.js.map +1 -1
- package/lib-commonjs/components/ImageSwatch/useImageSwatchStyles.styles.raw.js +1 -0
- package/lib-commonjs/components/ImageSwatch/useImageSwatchStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/SwatchPicker/SwatchPicker.js +1 -0
- package/lib-commonjs/components/SwatchPicker/SwatchPicker.js.map +1 -1
- package/lib-commonjs/components/SwatchPicker/renderSwatchPicker.js.map +1 -1
- package/lib-commonjs/components/SwatchPicker/useSwatchPicker.js +1 -0
- package/lib-commonjs/components/SwatchPicker/useSwatchPicker.js.map +1 -1
- package/lib-commonjs/components/SwatchPicker/useSwatchPickerStyles.styles.js +1 -0
- package/lib-commonjs/components/SwatchPicker/useSwatchPickerStyles.styles.js.map +1 -1
- package/lib-commonjs/components/SwatchPicker/useSwatchPickerStyles.styles.raw.js +1 -0
- package/lib-commonjs/components/SwatchPicker/useSwatchPickerStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/SwatchPickerRow/SwatchPickerRow.js +1 -0
- package/lib-commonjs/components/SwatchPickerRow/SwatchPickerRow.js.map +1 -1
- package/lib-commonjs/components/SwatchPickerRow/renderSwatchPickerRow.js.map +1 -1
- package/lib-commonjs/components/SwatchPickerRow/useSwatchPickerRow.js +1 -0
- package/lib-commonjs/components/SwatchPickerRow/useSwatchPickerRow.js.map +1 -1
- package/lib-commonjs/components/SwatchPickerRow/useSwatchPickerRowStyles.styles.js +1 -0
- package/lib-commonjs/components/SwatchPickerRow/useSwatchPickerRowStyles.styles.js.map +1 -1
- package/lib-commonjs/components/SwatchPickerRow/useSwatchPickerRowStyles.styles.raw.js +1 -0
- package/lib-commonjs/components/SwatchPickerRow/useSwatchPickerRowStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/contexts/swatchPicker.js +1 -0
- package/lib-commonjs/contexts/swatchPicker.js.map +1 -1
- package/lib-commonjs/utils/renderUtils.js.map +1 -1
- package/package.json +11 -11
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useEmptySwatchStyles.styles.js"],"sourcesContent":["
|
|
1
|
+
{"version":3,"sources":["useEmptySwatchStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nexport const emptySwatchClassNames = {\n root: 'fui-EmptySwatch'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeResetStyles({\n backgroundColor: tokens.colorTransparentBackground,\n border: `1px dashed ${tokens.colorNeutralForeground4}`\n});\nconst useSizeStyles = makeStyles({\n 'extra-small': {\n width: '20px',\n height: '20px'\n },\n small: {\n width: '24px',\n height: '24px'\n },\n medium: {\n width: '28px',\n height: '28px'\n },\n large: {\n width: '32px',\n height: '32px'\n }\n});\nconst useShapeStyles = makeStyles({\n rounded: {\n borderRadius: tokens.borderRadiusMedium,\n ...createCustomFocusIndicatorStyle({\n borderRadius: tokens.borderRadiusMedium\n })\n },\n circular: {\n borderRadius: tokens.borderRadiusCircular,\n ...createCustomFocusIndicatorStyle({\n borderRadius: tokens.borderRadiusCircular\n })\n },\n square: {\n borderRadius: tokens.borderRadiusNone,\n ...createCustomFocusIndicatorStyle({\n borderRadius: tokens.borderRadiusNone\n })\n }\n});\n/**\n * Apply styling to the EmptySwatch slots based on the state\n */ export const useEmptySwatchStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n const sizeStyles = useSizeStyles();\n const shapeStyles = useShapeStyles();\n var _state_size;\n const size = (_state_size = state.size) !== null && _state_size !== void 0 ? _state_size : 'medium';\n var _state_shape;\n state.root.className = mergeClasses(emptySwatchClassNames.root, styles, sizeStyles[size], shapeStyles[(_state_shape = state.shape) !== null && _state_shape !== void 0 ? _state_shape : 'square'], state.root.className);\n return state;\n};\n"],"names":["__resetStyles","__styles","mergeClasses","tokens","createCustomFocusIndicatorStyle","emptySwatchClassNames","root","useStyles","useSizeStyles","a9b677","Bqenvij","small","medium","large","d","useShapeStyles","rounded","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bw81rd7","kdpuga","dm238s","B6xbmo0","B3whbx2","circular","square","p","useEmptySwatchStyles_unstable","state","styles","sizeStyles","shapeStyles","_state_size","size","_state_shape","className","shape"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/EmptySwatch/useEmptySwatchStyles.styles.ts"],"sourcesContent":["
|
|
1
|
+
{"version":3,"sources":["../src/components/EmptySwatch/useEmptySwatchStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { EmptySwatchSlots, EmptySwatchState } from './EmptySwatch.types';\nimport { tokens } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\n\nexport const emptySwatchClassNames: SlotClassNames<EmptySwatchSlots> = {\n root: 'fui-EmptySwatch',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeResetStyles({\n backgroundColor: tokens.colorTransparentBackground,\n border: `1px dashed ${tokens.colorNeutralForeground4}`,\n});\n\nconst useSizeStyles = makeStyles({\n 'extra-small': {\n width: '20px',\n height: '20px',\n },\n small: {\n width: '24px',\n height: '24px',\n },\n medium: {\n width: '28px',\n height: '28px',\n },\n large: {\n width: '32px',\n height: '32px',\n },\n});\n\nconst useShapeStyles = makeStyles({\n rounded: {\n borderRadius: tokens.borderRadiusMedium,\n ...createCustomFocusIndicatorStyle({ borderRadius: tokens.borderRadiusMedium }),\n },\n circular: {\n borderRadius: tokens.borderRadiusCircular,\n ...createCustomFocusIndicatorStyle({ borderRadius: tokens.borderRadiusCircular }),\n },\n square: {\n borderRadius: tokens.borderRadiusNone,\n ...createCustomFocusIndicatorStyle({ borderRadius: tokens.borderRadiusNone }),\n },\n});\n\n/**\n * Apply styling to the EmptySwatch slots based on the state\n */\nexport const useEmptySwatchStyles_unstable = (state: EmptySwatchState): EmptySwatchState => {\n 'use no memo';\n\n const styles = useStyles();\n const sizeStyles = useSizeStyles();\n const shapeStyles = useShapeStyles();\n\n const size = state.size ?? 'medium';\n\n state.root.className = mergeClasses(\n emptySwatchClassNames.root,\n styles,\n sizeStyles[size],\n shapeStyles[state.shape ?? 'square'],\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","createCustomFocusIndicatorStyle","emptySwatchClassNames","root","useStyles","backgroundColor","colorTransparentBackground","border","colorNeutralForeground4","useSizeStyles","width","height","small","medium","large","useShapeStyles","rounded","borderRadius","borderRadiusMedium","circular","borderRadiusCircular","square","borderRadiusNone","useEmptySwatchStyles_unstable","state","styles","sizeStyles","shapeStyles","size","className","shape"],"mappings":"AAAA;;;;;;;;;;;;IAQaK,qBAAAA;;;iCAiDAqB;eAAAA;;;uBAvD6C,iBAAiB;4BAGpD,wBAAwB;8BACC,0BAA0B;AAEnE,8BAAgE;IACrEpB,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYP,sBAAAA,EAAgB;IAChCQ,iBAAiBL,kBAAAA,CAAOM,0BAA0B;IAClDC,QAAQ,CAAC,WAAW,EAAEP,kBAAAA,CAAOQ,uBAAuB,EAAE;AACxD;AAEA,MAAMC,oBAAgBX,iBAAAA,EAAW;IAC/B,eAAe;QACbY,OAAO;QACPC,QAAQ;IACV;IACAC,OAAO;QACLF,OAAO;QACPC,QAAQ;IACV;IACAE,QAAQ;QACNH,OAAO;QACPC,QAAQ;IACV;IACAG,OAAO;QACLJ,OAAO;QACPC,QAAQ;IACV;AACF;AAEA,MAAMI,qBAAiBjB,iBAAAA,EAAW;IAChCkB,SAAS;QACPC,cAAcjB,kBAAAA,CAAOkB,kBAAkB;QACvC,OAAGjB,6CAAAA,EAAgC;YAAEgB,cAAcjB,kBAAAA,CAAOkB,kBAAkB;QAAC,EAAE;IACjF;IACAC,UAAU;QACRF,cAAcjB,kBAAAA,CAAOoB,oBAAoB;QACzC,OAAGnB,6CAAAA,EAAgC;YAAEgB,cAAcjB,kBAAAA,CAAOoB,oBAAoB;QAAC,EAAE;IACnF;IACAC,QAAQ;QACNJ,cAAcjB,kBAAAA,CAAOsB,gBAAgB;QACrC,OAAGrB,6CAAAA,EAAgC;YAAEgB,cAAcjB,kBAAAA,CAAOsB,gBAAgB;QAAC,EAAE;IAC/E;AACF;AAKO,sCAAsC,CAACE;IAC5C;IAEA,MAAMC,SAASrB;IACf,MAAMsB,aAAajB;IACnB,MAAMkB,cAAcZ;QAEPS;IAAb,MAAMI,OAAOJ,CAAAA,cAAAA,MAAMI,IAAAA,AAAI,MAAA,QAAVJ,gBAAAA,KAAAA,IAAAA,cAAc;QAMbA;IAJdA,MAAMrB,IAAI,CAAC0B,SAAS,OAAG9B,mBAAAA,EACrBG,sBAAsBC,IAAI,EAC1BsB,QACAC,UAAU,CAACE,KAAK,EAChBD,WAAW,CAACH,CAAAA,eAAAA,MAAMM,KAAAA,AAAK,MAAA,QAAXN,iBAAAA,KAAAA,IAAAA,eAAe,SAAS,EACpCA,MAAMrB,IAAI,CAAC0B,SAAS;IAGtB,OAAOL;AACT,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/ImageSwatch/ImageSwatch.tsx"],"sourcesContent":["
|
|
1
|
+
{"version":3,"sources":["../src/components/ImageSwatch/ImageSwatch.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useImageSwatch_unstable } from './useImageSwatch';\nimport { renderImageSwatch_unstable } from './renderImageSwatch';\nimport { useImageSwatchStyles_unstable } from './useImageSwatchStyles.styles';\nimport type { ImageSwatchProps } from './ImageSwatch.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * ImageSwatch component is used to render an images, patterns and textures.\n */\nexport const ImageSwatch: ForwardRefComponent<ImageSwatchProps> = React.forwardRef((props, ref) => {\n const state = useImageSwatch_unstable(props, ref);\n\n useImageSwatchStyles_unstable(state);\n useCustomStyleHook_unstable('useImageSwatchStyles_unstable')(state);\n\n return renderImageSwatch_unstable(state);\n});\n\nImageSwatch.displayName = 'ImageSwatch';\n"],"names":["React","useImageSwatch_unstable","renderImageSwatch_unstable","useImageSwatchStyles_unstable","useCustomStyleHook_unstable","ImageSwatch","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;gCAES,mBAAmB;mCAChB,sBAAsB;4CACnB,gCAAgC;qCAElC,kCAAkC;AAKvE,MAAMK,cAAAA,WAAAA,GAAqDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,YAAQR,uCAAAA,EAAwBM,OAAOC;QAE7CL,yDAAAA,EAA8BM;QAC9BL,gDAAAA,EAA4B,iCAAiCK;IAE7D,WAAOP,6CAAAA,EAA2BO;AACpC,GAAG;AAEHJ,YAAYK,WAAW,GAAG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/ImageSwatch/renderImageSwatch.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { ImageSwatchState, ImageSwatchSlots } from './ImageSwatch.types';\n\n/**\n * Render the final JSX of ImageSwatch\n */\nexport const renderImageSwatch_unstable = (state: ImageSwatchState) => {\n assertSlots<ImageSwatchSlots>(state);\n\n return <state.root />;\n};\n"],"names":["assertSlots","renderImageSwatch_unstable","state","root"],"mappings":";;;;;;;;;;4BACA,gDAAiD;gCAErB,4BAA4B;
|
|
1
|
+
{"version":3,"sources":["../src/components/ImageSwatch/renderImageSwatch.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { ImageSwatchState, ImageSwatchSlots } from './ImageSwatch.types';\n\n/**\n * Render the final JSX of ImageSwatch\n */\nexport const renderImageSwatch_unstable = (state: ImageSwatchState): JSXElement => {\n assertSlots<ImageSwatchSlots>(state);\n\n return <state.root />;\n};\n"],"names":["assertSlots","renderImageSwatch_unstable","state","root"],"mappings":";;;;;;;;;;4BACA,gDAAiD;gCAErB,4BAA4B;AAOjD,MAAMC,6BAA6B,CAACC;QACzCF,2BAAAA,EAA8BE;IAE9B,OAAA,WAAA,OAAO,eAAA,EAACA,MAAMC,IAAI,EAAA,CAAA;AACpB,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/ImageSwatch/useImageSwatch.ts"],"sourcesContent":["
|
|
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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useImageSwatchStyles.styles.js"],"sourcesContent":["
|
|
1
|
+
{"version":3,"sources":["useImageSwatchStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses, makeResetStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nexport const imageSwatchClassNames = {\n root: 'fui-ImageSwatch'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeResetStyles({\n display: 'inline-flex',\n boxSizing: 'border-box',\n border: `1px solid ${tokens.colorTransparentStroke}`,\n backgroundSize: 'cover',\n backgroundRepeat: 'no-repeat',\n padding: '0',\n ':hover': {\n cursor: 'pointer',\n border: 'none',\n boxShadow: `inset 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorBrandStroke1}, inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorStrokeFocus1}`\n },\n ':hover:active': {\n border: 'none',\n boxShadow: `inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorCompoundBrandStrokePressed}, inset 0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorStrokeFocus1}`\n },\n ':focus': {\n outline: 'none'\n },\n ':focus-visible': {\n outline: 'none'\n },\n ...createCustomFocusIndicatorStyle({\n border: 'none',\n outline: 'none',\n boxShadow: `inset 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorStrokeFocus2}, inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorStrokeFocus1}`\n }),\n // High contrast styles\n '@media (forced-colors: active)': {\n forcedColorAdjust: 'none',\n ':hover': {\n boxShadow: `inset 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorBrandStroke2Hover}, inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorStrokeFocus1}`\n },\n ':hover:active': {\n boxShadow: `inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorBrandStroke2Pressed}, inset 0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorStrokeFocus1}`\n }\n }\n});\nconst useStylesSelected = makeStyles({\n selected: {\n border: 'none',\n boxShadow: `inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorBrandStroke1}, inset 0 0 0 5px ${tokens.colorStrokeFocus1}`,\n ':hover': {\n boxShadow: `inset 0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorCompoundBrandStrokeHover}, inset 0 0 0 6px ${tokens.colorStrokeFocus1}`\n },\n ':hover:active': {\n boxShadow: `inset 0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorCompoundBrandStrokePressed}, inset 0 0 0 7px ${tokens.colorStrokeFocus1}`\n },\n ...createCustomFocusIndicatorStyle({\n boxShadow: `inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorStrokeFocus2}, inset 0 0 0 5px ${tokens.colorStrokeFocus1}`\n }),\n '@media (forced-colors: active)': {\n boxShadow: `inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorBrandStroke2Pressed}, inset 0 0 0 5px ${tokens.colorStrokeFocus1}`\n }\n }\n});\nconst useSizeStyles = makeStyles({\n 'extra-small': {\n width: '20px',\n height: '20px'\n },\n small: {\n width: '24px',\n height: '24px'\n },\n medium: {\n width: '28px',\n height: '28px'\n },\n large: {\n width: '32px',\n height: '32px'\n }\n});\nconst useShapeStyles = makeStyles({\n rounded: {\n borderRadius: tokens.borderRadiusMedium,\n ...createCustomFocusIndicatorStyle({\n borderRadius: tokens.borderRadiusMedium\n })\n },\n circular: {\n borderRadius: tokens.borderRadiusCircular,\n ...createCustomFocusIndicatorStyle({\n borderRadius: tokens.borderRadiusCircular\n })\n },\n square: {\n borderRadius: tokens.borderRadiusNone,\n ...createCustomFocusIndicatorStyle({\n borderRadius: tokens.borderRadiusNone\n })\n }\n});\n/**\n * Apply styling to the ImageSwatch slots based on the state\n */ export const useImageSwatchStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n const selectedStyles = useStylesSelected();\n const sizeStyles = useSizeStyles();\n const shapeStyles = useShapeStyles();\n const { size = 'medium', shape = 'square' } = state;\n state.root.className = mergeClasses(imageSwatchClassNames.root, styles, sizeStyles[size], shapeStyles[shape], state.selected && selectedStyles.selected, state.root.className);\n return state;\n};\n"],"names":["__styles","mergeClasses","__resetStyles","tokens","createCustomFocusIndicatorStyle","imageSwatchClassNames","root","useStyles","r","s","useStylesSelected","selected","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","E5pizo","Bvxd0ez","vajtyg","j6ew2k","Bspt33j","d","p","h","m","useSizeStyles","a9b677","Bqenvij","small","medium","large","useShapeStyles","rounded","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bw81rd7","kdpuga","dm238s","B6xbmo0","B3whbx2","circular","square","useImageSwatchStyles_unstable","state","styles","selectedStyles","sizeStyles","shapeStyles","size","shape","className"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/ImageSwatch/useImageSwatchStyles.styles.ts"],"sourcesContent":["
|
|
1
|
+
{"version":3,"sources":["../src/components/ImageSwatch/useImageSwatchStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses, makeResetStyles } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { ImageSwatchSlots, ImageSwatchState } from './ImageSwatch.types';\nimport { tokens } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\n\nexport const imageSwatchClassNames: SlotClassNames<ImageSwatchSlots> = {\n root: 'fui-ImageSwatch',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeResetStyles({\n display: 'inline-flex',\n boxSizing: 'border-box',\n border: `1px solid ${tokens.colorTransparentStroke}`,\n backgroundSize: 'cover',\n backgroundRepeat: 'no-repeat',\n padding: '0',\n ':hover': {\n cursor: 'pointer',\n border: 'none',\n boxShadow: `inset 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorBrandStroke1}, inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorStrokeFocus1}`,\n },\n ':hover:active': {\n border: 'none',\n boxShadow: `inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorCompoundBrandStrokePressed}, inset 0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorStrokeFocus1}`,\n },\n ':focus': {\n outline: 'none',\n },\n ':focus-visible': {\n outline: 'none',\n },\n ...createCustomFocusIndicatorStyle({\n border: 'none',\n outline: 'none',\n boxShadow: `inset 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorStrokeFocus2}, inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorStrokeFocus1}`,\n }),\n\n // High contrast styles\n\n '@media (forced-colors: active)': {\n forcedColorAdjust: 'none',\n ':hover': {\n boxShadow: `inset 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorBrandStroke2Hover}, inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorStrokeFocus1}`,\n },\n ':hover:active': {\n boxShadow: `inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorBrandStroke2Pressed}, inset 0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorStrokeFocus1}`,\n },\n },\n});\n\nconst useStylesSelected = makeStyles({\n selected: {\n border: 'none',\n boxShadow: `inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorBrandStroke1}, inset 0 0 0 5px ${tokens.colorStrokeFocus1}`,\n ':hover': {\n boxShadow: `inset 0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorCompoundBrandStrokeHover}, inset 0 0 0 6px ${tokens.colorStrokeFocus1}`,\n },\n ':hover:active': {\n boxShadow: `inset 0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorCompoundBrandStrokePressed}, inset 0 0 0 7px ${tokens.colorStrokeFocus1}`,\n },\n ...createCustomFocusIndicatorStyle({\n boxShadow: `inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorStrokeFocus2}, inset 0 0 0 5px ${tokens.colorStrokeFocus1}`,\n }),\n '@media (forced-colors: active)': {\n boxShadow: `inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorBrandStroke2Pressed}, inset 0 0 0 5px ${tokens.colorStrokeFocus1}`,\n },\n },\n});\n\nconst useSizeStyles = makeStyles({\n 'extra-small': {\n width: '20px',\n height: '20px',\n },\n small: {\n width: '24px',\n height: '24px',\n },\n medium: {\n width: '28px',\n height: '28px',\n },\n large: {\n width: '32px',\n height: '32px',\n },\n});\n\nconst useShapeStyles = makeStyles({\n rounded: {\n borderRadius: tokens.borderRadiusMedium,\n ...createCustomFocusIndicatorStyle({ borderRadius: tokens.borderRadiusMedium }),\n },\n circular: {\n borderRadius: tokens.borderRadiusCircular,\n ...createCustomFocusIndicatorStyle({ borderRadius: tokens.borderRadiusCircular }),\n },\n square: {\n borderRadius: tokens.borderRadiusNone,\n ...createCustomFocusIndicatorStyle({ borderRadius: tokens.borderRadiusNone }),\n },\n});\n\n/**\n * Apply styling to the ImageSwatch slots based on the state\n */\nexport const useImageSwatchStyles_unstable = (state: ImageSwatchState): ImageSwatchState => {\n 'use no memo';\n\n const styles = useStyles();\n const selectedStyles = useStylesSelected();\n const sizeStyles = useSizeStyles();\n const shapeStyles = useShapeStyles();\n\n const { size = 'medium', shape = 'square' } = state;\n\n state.root.className = mergeClasses(\n imageSwatchClassNames.root,\n styles,\n sizeStyles[size],\n shapeStyles[shape],\n state.selected && selectedStyles.selected,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","makeResetStyles","tokens","createCustomFocusIndicatorStyle","imageSwatchClassNames","root","useStyles","display","boxSizing","border","colorTransparentStroke","backgroundSize","backgroundRepeat","padding","cursor","boxShadow","strokeWidthThick","colorBrandStroke1","strokeWidthThicker","colorStrokeFocus1","colorCompoundBrandStrokePressed","strokeWidthThickest","outline","colorStrokeFocus2","forcedColorAdjust","colorBrandStroke2Hover","colorBrandStroke2Pressed","useStylesSelected","selected","colorCompoundBrandStrokeHover","useSizeStyles","width","height","small","medium","large","useShapeStyles","rounded","borderRadius","borderRadiusMedium","circular","borderRadiusCircular","square","borderRadiusNone","useImageSwatchStyles_unstable","state","styles","selectedStyles","sizeStyles","shapeStyles","size","shape","className"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/SwatchPicker/SwatchPicker.tsx"],"sourcesContent":["
|
|
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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/SwatchPicker/renderSwatchPicker.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { SwatchPickerProvider } from '../../contexts/swatchPicker';\nimport type { SwatchPickerContextValues } from '../../contexts/swatchPicker';\nimport type { SwatchPickerState, SwatchPickerSlots } from './SwatchPicker.types';\n\n/**\n * Render the final JSX of SwatchPicker\n */\nexport const renderSwatchPicker_unstable = (state: SwatchPickerState
|
|
1
|
+
{"version":3,"sources":["../src/components/SwatchPicker/renderSwatchPicker.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { SwatchPickerProvider } from '../../contexts/swatchPicker';\nimport type { SwatchPickerContextValues } from '../../contexts/swatchPicker';\nimport type { SwatchPickerState, SwatchPickerSlots } from './SwatchPicker.types';\n\n/**\n * Render the final JSX of SwatchPicker\n */\nexport const renderSwatchPicker_unstable = (\n state: SwatchPickerState,\n contextValues: SwatchPickerContextValues,\n): JSXElement => {\n assertSlots<SwatchPickerSlots>(state);\n\n return (\n <SwatchPickerProvider value={contextValues.swatchPicker}>\n <state.root>{state.root.children}</state.root>\n </SwatchPickerProvider>\n );\n};\n"],"names":["assertSlots","SwatchPickerProvider","renderSwatchPicker_unstable","state","contextValues","value","swatchPicker","root","children"],"mappings":";;;;+BAYaE;;;;;;4BAXb,gDAAiD;gCAErB,4BAA4B;8BAEnB,8BAA8B;AAO5D,oCAAoC,CACzCC,OACAC;QAEAJ,2BAAAA,EAA+BG;IAE/B,OAAA,WAAA,OACE,eAAA,EAACF,kCAAAA,EAAAA;QAAqBI,OAAOD,cAAcE,YAAY;kBACrD,WAAA,OAAA,eAAA,EAACH,MAAMI,IAAI,EAAA;sBAAEJ,MAAMI,IAAI,CAACC,QAAQ;;;AAGtC,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/SwatchPicker/useSwatchPicker.ts"],"sourcesContent":["
|
|
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, onSelectionChange, size = 'medium', shape, spacing = 'medium', style, ...rest } = 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 ...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","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,EAAEE,MAAM,EAAEC,iBAAiB,EAAEC,OAAO,QAAQ,EAAEC,KAAK,EAAEC,UAAU,QAAQ,EAAEC,KAAK,EAAE,GAAGC,MAAM,GAAGR;IAElG,MAAMS,SAASP,WAAW;IAC1B,MAAMQ,sBAAkBhB,qCAAAA,EAAwB;QAC9CiB,UAAU;QACVC,MAAMH,SAAS,gBAAgB;QAC/BI,iBAAiB;IACnB;IAEA,MAAMC,OAAOL,SAAS,SAAS;IAE/B,MAAM,CAACM,eAAeC,iBAAiB,OAAGpB,oCAAAA,EAAqB;QAC7DqB,OAAOjB,MAAMe,aAAa;QAC1BG,cAAclB,MAAMmB,oBAAoB;QACxCC,cAAc;IAChB;IAEA,MAAMC,yBAAsExB,oCAAAA,EAAiB,CAACyB,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,MAAM7B,oBAAAA,CAAK8B,MAAM,KACfjC,wCAAAA,EAAyB,OAAO;YAC9BM;YACAa;YACA,GAAGJ,eAAe;YAClB,GAAGF,IAAI;QACT,IACA;YAAEqB,aAAa;QAAM;QAEvBpB;QACAY;QACAN;QACAX;QACAC;QACAC;IACF;AACF,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useSwatchPickerStyles.styles.js"],"sourcesContent":["
|
|
1
|
+
{"version":3,"sources":["useSwatchPickerStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const swatchPickerClassNames = {\n root: 'fui-SwatchPicker'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n padding: `${tokens.spacingHorizontalNone} ${tokens.spacingVerticalNone}`,\n display: 'flex'\n },\n row: {\n flexDirection: 'row'\n },\n grid: {\n flexDirection: 'column'\n },\n spacingSmall: {\n gap: '2px'\n },\n spacingMedium: {\n gap: '4px'\n }\n});\n/**\n * Apply styling to the SwatchPicker slots based on the state\n */ export const useSwatchPickerStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n const layoutStyle = state.isGrid ? styles.grid : styles.row;\n const spacingStyle = state.spacing === 'small' ? styles.spacingSmall : styles.spacingMedium;\n state.root.className = mergeClasses(swatchPickerClassNames.root, styles.root, layoutStyle, spacingStyle, state.root.className);\n return state;\n};\n"],"names":["__styles","mergeClasses","tokens","swatchPickerClassNames","root","useStyles","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","mc9l5x","row","Beiy3e4","grid","spacingSmall","i8kkvl","Belr9w4","rmohyg","spacingMedium","d","p","useSwatchPickerStyles_unstable","state","styles","layoutStyle","isGrid","spacingStyle","spacing","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAGCG,sBAAsB;;;IAyBlBmB,8BAA8B;;;;uBA3BN,gBAAgB;AAElD,+BAA+B;IAClClB,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGL,eAAA,EAAA;IAAAI,IAAA,EAAA;QAAAE,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,GAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,IAAA,EAAA;QAAAD,OAAA,EAAA;IAAA;IAAAE,YAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,aAAA,EAAA;QAAAH,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAE,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;KAAA;AAAA,CAiBrB,CAAC;AAGS,uCAAwCE,KAAK,IAAG;IACvD,aAAa;IACb,MAAMC,MAAM,GAAGnB,SAAS,CAAC,CAAC;IAC1B,MAAMoB,WAAW,GAAGF,KAAK,CAACG,MAAM,GAAGF,MAAM,CAACV,IAAI,GAAGU,MAAM,CAACZ,GAAG;IAC3D,MAAMe,YAAY,GAAGJ,KAAK,CAACK,OAAO,KAAK,OAAO,GAAGJ,MAAM,CAACT,YAAY,GAAGS,MAAM,CAACL,aAAa;IAC3FI,KAAK,CAACnB,IAAI,CAACyB,SAAS,OAAG5B,mBAAY,EAACE,sBAAsB,CAACC,IAAI,EAAEoB,MAAM,CAACpB,IAAI,EAAEqB,WAAW,EAAEE,YAAY,EAAEJ,KAAK,CAACnB,IAAI,CAACyB,SAAS,CAAC;IAC9H,OAAON,KAAK;AAChB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/SwatchPicker/useSwatchPickerStyles.styles.ts"],"sourcesContent":["
|
|
1
|
+
{"version":3,"sources":["../src/components/SwatchPicker/useSwatchPickerStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SwatchPickerSlots, SwatchPickerState } from './SwatchPicker.types';\nimport { tokens } from '@fluentui/react-theme';\nexport const swatchPickerClassNames: SlotClassNames<SwatchPickerSlots> = {\n root: 'fui-SwatchPicker',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n padding: `${tokens.spacingHorizontalNone} ${tokens.spacingVerticalNone}`,\n display: 'flex',\n },\n row: {\n flexDirection: 'row',\n },\n grid: {\n flexDirection: 'column',\n },\n spacingSmall: { gap: '2px' },\n spacingMedium: { gap: '4px' },\n});\n\n/**\n * Apply styling to the SwatchPicker slots based on the state\n */\nexport const useSwatchPickerStyles_unstable = (state: SwatchPickerState): SwatchPickerState => {\n 'use no memo';\n\n const styles = useStyles();\n const layoutStyle = state.isGrid ? styles.grid : styles.row;\n\n const spacingStyle = state.spacing === 'small' ? styles.spacingSmall : styles.spacingMedium;\n state.root.className = mergeClasses(\n swatchPickerClassNames.root,\n styles.root,\n layoutStyle,\n spacingStyle,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","swatchPickerClassNames","root","useStyles","padding","spacingHorizontalNone","spacingVerticalNone","display","row","flexDirection","grid","spacingSmall","gap","spacingMedium","useSwatchPickerStyles_unstable","state","styles","layoutStyle","isGrid","spacingStyle","spacing","className"],"mappings":"AAAA;;;;;;;;;;;;IAMaG,sBAAAA;;;IAyBAa,8BAAAA;;;;uBA7B4B,iBAAiB;4BAGnC,wBAAwB;AACxC,+BAAkE;IACvEZ,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYL,iBAAAA,EAAW;IAC3BI,MAAM;QACJE,SAAS,GAAGJ,kBAAAA,CAAOK,qBAAqB,CAAC,CAAC,EAAEL,kBAAAA,CAAOM,mBAAmB,EAAE;QACxEC,SAAS;IACX;IACAC,KAAK;QACHC,eAAe;IACjB;IACAC,MAAM;QACJD,eAAe;IACjB;IACAE,cAAc;QAAEC,KAAK;IAAM;IAC3BC,eAAe;QAAED,KAAK;IAAM;AAC9B;AAKO,uCAAuC,CAACG;IAC7C;IAEA,MAAMC,SAASb;IACf,MAAMc,cAAcF,MAAMG,MAAM,GAAGF,OAAON,IAAI,GAAGM,OAAOR,GAAG;IAE3D,MAAMW,eAAeJ,MAAMK,OAAO,KAAK,UAAUJ,OAAOL,YAAY,GAAGK,OAAOH,aAAa;IAC3FE,MAAMb,IAAI,CAACmB,SAAS,OAAGtB,mBAAAA,EACrBE,uBAAuBC,IAAI,EAC3Bc,OAAOd,IAAI,EACXe,aACAE,cACAJ,MAAMb,IAAI,CAACmB,SAAS;IAGtB,OAAON;AACT,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/SwatchPickerRow/SwatchPickerRow.tsx"],"sourcesContent":["
|
|
1
|
+
{"version":3,"sources":["../src/components/SwatchPickerRow/SwatchPickerRow.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useSwatchPickerRow_unstable } from './useSwatchPickerRow';\nimport { renderSwatchPickerRow_unstable } from './renderSwatchPickerRow';\nimport { useSwatchPickerRowStyles_unstable } from './useSwatchPickerRowStyles.styles';\nimport type { SwatchPickerRowProps } from './SwatchPickerRow.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * SwatchPickerRow component is used to render a row of swatches.\n */\nexport const SwatchPickerRow: ForwardRefComponent<SwatchPickerRowProps> = React.forwardRef((props, ref) => {\n const state = useSwatchPickerRow_unstable(props, ref);\n\n useSwatchPickerRowStyles_unstable(state);\n useCustomStyleHook_unstable('useSwatchPickerRowStyles_unstable')(state);\n return renderSwatchPickerRow_unstable(state);\n});\n\nSwatchPickerRow.displayName = 'SwatchPickerRow';\n"],"names":["React","useSwatchPickerRow_unstable","renderSwatchPickerRow_unstable","useSwatchPickerRowStyles_unstable","useCustomStyleHook_unstable","SwatchPickerRow","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;oCAEa,uBAAuB;uCACpB,0BAA0B;gDACvB,oCAAoC;qCAE1C,kCAAkC;AAKvE,MAAMK,kBAAAA,WAAAA,GAA6DL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACjG,MAAMC,YAAQR,+CAAAA,EAA4BM,OAAOC;QAEjDL,iEAAAA,EAAkCM;QAClCL,gDAAAA,EAA4B,qCAAqCK;IACjE,WAAOP,qDAAAA,EAA+BO;AACxC,GAAG;AAEHJ,gBAAgBK,WAAW,GAAG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/SwatchPickerRow/renderSwatchPickerRow.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { SwatchPickerRowState, SwatchPickerRowSlots } from './SwatchPickerRow.types';\n\n/**\n * Render the final JSX of SwatchPickerRow\n */\nexport const renderSwatchPickerRow_unstable = (state: SwatchPickerRowState) => {\n assertSlots<SwatchPickerRowSlots>(state);\n return <state.root />;\n};\n"],"names":["assertSlots","renderSwatchPickerRow_unstable","state","root"],"mappings":";;;;;;;;;;4BACA,gDAAiD;gCAErB,4BAA4B;
|
|
1
|
+
{"version":3,"sources":["../src/components/SwatchPickerRow/renderSwatchPickerRow.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { SwatchPickerRowState, SwatchPickerRowSlots } from './SwatchPickerRow.types';\n\n/**\n * Render the final JSX of SwatchPickerRow\n */\nexport const renderSwatchPickerRow_unstable = (state: SwatchPickerRowState): JSXElement => {\n assertSlots<SwatchPickerRowSlots>(state);\n return <state.root />;\n};\n"],"names":["assertSlots","renderSwatchPickerRow_unstable","state","root"],"mappings":";;;;;;;;;;4BACA,gDAAiD;gCAErB,4BAA4B;AAOjD,MAAMC,iCAAiC,CAACC;QAC7CF,2BAAAA,EAAkCE;IAClC,OAAA,WAAA,OAAO,eAAA,EAACA,MAAMC,IAAI,EAAA,CAAA;AACpB,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/SwatchPickerRow/useSwatchPickerRow.ts"],"sourcesContent":["
|
|
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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useSwatchPickerRowStyles.styles.js"],"sourcesContent":["
|
|
1
|
+
{"version":3,"sources":["useSwatchPickerRowStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, mergeClasses, makeStyles } from '@griffel/react';\nexport const swatchPickerRowClassNames = {\n root: 'fui-SwatchPickerRow'\n};\n/**\n * Styles for the root slot\n */ const useResetStyles = makeResetStyles({\n display: 'flex',\n flexDirection: 'row'\n});\nconst useStyles = makeStyles({\n spacingSmall: {\n columnGap: '2px'\n },\n spacingMedium: {\n columnGap: '4px'\n }\n});\n/**\n * Apply styling to the SwatchPickerRow slots based on the state\n */ export const useSwatchPickerRowStyles_unstable = (state)=>{\n 'use no memo';\n const resetStyles = useResetStyles();\n const styles = useStyles();\n const spacingStyle = state.spacing === 'small' ? styles.spacingSmall : styles.spacingMedium;\n state.root.className = mergeClasses(swatchPickerRowClassNames.root, resetStyles, spacingStyle, state.root.className);\n return state;\n};\n"],"names":["__resetStyles","mergeClasses","__styles","swatchPickerRowClassNames","root","useResetStyles","useStyles","spacingSmall","i8kkvl","spacingMedium","d","useSwatchPickerRowStyles_unstable","state","resetStyles","styles","spacingStyle","spacing","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAECG,yBAAyB;;;qCAmBY;;;;uBApBQ,gBAAgB;AACnE,kCAAkC;IACrCC,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,cAAc,GAAA,WAAA,OAAGL,oBAAA,EAAA,YAAA,MAAA;IAAA;CAG1B,CAAC;AACF,MAAMM,SAAS,GAAA,WAAA,OAAGJ,eAAA,EAAA;IAAAK,YAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,aAAA,EAAA;QAAAD,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAE,CAAA,EAAA;QAAA;QAAA;KAAA;AAAA,CAOjB,CAAC;AAGS,MAAMC,qCAAqCC,KAAK,IAAG;IAC1D,aAAa;IACb,MAAMC,WAAW,GAAGR,cAAc,CAAC,CAAC;IACpC,MAAMS,MAAM,GAAGR,SAAS,CAAC,CAAC;IAC1B,MAAMS,YAAY,GAAGH,KAAK,CAACI,OAAO,KAAK,OAAO,GAAGF,MAAM,CAACP,YAAY,GAAGO,MAAM,CAACL,aAAa;IAC3FG,KAAK,CAACR,IAAI,CAACa,SAAS,OAAGhB,mBAAY,EAACE,yBAAyB,CAACC,IAAI,EAAES,WAAW,EAAEE,YAAY,EAAEH,KAAK,CAACR,IAAI,CAACa,SAAS,CAAC;IACpH,OAAOL,KAAK;AAChB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/SwatchPickerRow/useSwatchPickerRowStyles.styles.ts"],"sourcesContent":["
|
|
1
|
+
{"version":3,"sources":["../src/components/SwatchPickerRow/useSwatchPickerRowStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, mergeClasses, makeStyles } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SwatchPickerRowSlots, SwatchPickerRowState } from './SwatchPickerRow.types';\n\nexport const swatchPickerRowClassNames: SlotClassNames<SwatchPickerRowSlots> = {\n root: 'fui-SwatchPickerRow',\n};\n\n/**\n * Styles for the root slot\n */\nconst useResetStyles = makeResetStyles({\n display: 'flex',\n flexDirection: 'row',\n});\n\nconst useStyles = makeStyles({\n spacingSmall: {\n columnGap: '2px',\n },\n spacingMedium: {\n columnGap: '4px',\n },\n});\n\n/**\n * Apply styling to the SwatchPickerRow slots based on the state\n */\nexport const useSwatchPickerRowStyles_unstable = (state: SwatchPickerRowState): SwatchPickerRowState => {\n 'use no memo';\n\n const resetStyles = useResetStyles();\n const styles = useStyles();\n const spacingStyle = state.spacing === 'small' ? styles.spacingSmall : styles.spacingMedium;\n\n state.root.className = mergeClasses(swatchPickerRowClassNames.root, resetStyles, spacingStyle, state.root.className);\n\n return state;\n};\n"],"names":["makeResetStyles","mergeClasses","makeStyles","swatchPickerRowClassNames","root","useResetStyles","display","flexDirection","useStyles","spacingSmall","columnGap","spacingMedium","useSwatchPickerRowStyles_unstable","state","resetStyles","styles","spacingStyle","spacing","className"],"mappings":"AAAA;;;;;;;;;;;;IAMaG,yBAAAA;;;qCAwBAS;;;;uBA5B6C,iBAAiB;AAIpE,kCAAwE;IAC7ER,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,qBAAiBL,sBAAAA,EAAgB;IACrCM,SAAS;IACTC,eAAe;AACjB;AAEA,MAAMC,gBAAYN,iBAAAA,EAAW;IAC3BO,cAAc;QACZC,WAAW;IACb;IACAC,eAAe;QACbD,WAAW;IACb;AACF;AAKO,MAAME,oCAAoC,CAACC;IAChD;IAEA,MAAMC,cAAcT;IACpB,MAAMU,SAASP;IACf,MAAMQ,eAAeH,MAAMI,OAAO,KAAK,UAAUF,OAAON,YAAY,GAAGM,OAAOJ,aAAa;IAE3FE,MAAMT,IAAI,CAACc,SAAS,OAAGjB,mBAAAA,EAAaE,0BAA0BC,IAAI,EAAEU,aAAaE,cAAcH,MAAMT,IAAI,CAACc,SAAS;IAEnH,OAAOL;AACT,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/contexts/swatchPicker.ts"],"sourcesContent":["
|
|
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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/utils/renderUtils.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { ColorSwatch, SwatchPickerRow, ImageSwatch } from '../';\nimport type { ColorSwatchProps, ImageSwatchProps } from '../';\n\nexport type SwatchProps = ImageSwatchProps | ColorSwatchProps;\n\nexport type SwatchPickerGridProps = {\n items: SwatchProps[];\n columnCount: number;\n renderRow?: (props: { children: JSXElement[]; rowId: string | number }) => JSXElement;\n renderSwatch?: (item: SwatchProps) => JSXElement;\n};\n\nexport const renderSwatchPickerGrid = (props: SwatchPickerGridProps) => {\n const { items, columnCount, renderRow, renderSwatch } = props;\n const _renderRow = renderRow || (({ children, rowId }) => <SwatchPickerRow key={rowId}>{children}</SwatchPickerRow>);\n const _renderSwatch =\n renderSwatch ||\n ((item: SwatchProps) =>\n (item as ImageSwatchProps).src ? (\n <ImageSwatch key={item.value} src={(item as ImageSwatchProps).src ?? ''} {...item} />\n ) : (\n <ColorSwatch key={item.value} color={item.color || ''} {...item} />\n ));\n\n const rowCount = Math.ceil(items.length / columnCount);\n const rows = Array.from({ length: rowCount }, (_, i) => {\n const start = i * columnCount;\n const end = start + columnCount;\n return items.slice(start, end);\n });\n\n return rows.map((row, index) => _renderRow({ children: row.map(_renderSwatch), rowId: index }));\n};\n"],"names":["React","ColorSwatch","SwatchPickerRow","ImageSwatch","renderSwatchPickerGrid","props","items","columnCount","renderRow","renderSwatch","_renderRow","children","rowId","key","_renderSwatch","item","src","value","color","rowCount","Math","ceil","length","rows","Array","from","_","i","start","end","slice","map","row","index"],"mappings":";;;;+BAcaI;;;;;;;iEAdU,QAAQ;kBAE2B,MAAM;AAYzD,+BAA+B,CAACC;IACrC,MAAM,EAAEC,KAAK,EAAEC,WAAW,EAAEC,SAAS,EAAEC,YAAY,EAAE,GAAGJ;IACxD,MAAMK,aAAaF,aAAc,CAAA,CAAC,EAAEG,QAAQ,EAAEC,KAAK,EAAE,GAAA,WAAA,GAAK,OAAA,aAAA,CAACV,iBAAAA,EAAAA;YAAgBW,KAAKD;WAAQD,SAAAA,CAA0B;IAClH,MAAMG,gBACJL,gBACC,CAAA,CAACM;YAEqC;eADpCA,KAA0BC,GAAG,GAAA,WAAA,GAC5B,OAAA,aAAA,CAACb,aAAAA,EAAAA;YAAYU,KAAKE,KAAKE,KAAK;YAAED,KAAK,CAAA,YAACD,KAA0BC,GAAAA,AAAG,MAAA,QAA9B,cAAA,KAAA,IAAA,YAAkC;YAAK,GAAGD,IAAI;2BAEjF,OAAA,aAAA,CAACd,aAAAA,EAAAA;YAAYY,KAAKE,KAAKE,KAAK;YAAEC,OAAOH,KAAKG,KAAK,IAAI;YAAK,GAAGH,IAAI;;MACjE;IAEJ,MAAMI,WAAWC,KAAKC,IAAI,CAACf,MAAMgB,MAAM,GAAGf;IAC1C,MAAMgB,OAAOC,MAAMC,IAAI,CAAC;QAAEH,QAAQH;IAAS,GAAG,CAACO,GAAGC;QAChD,MAAMC,QAAQD,IAAIpB;QAClB,MAAMsB,MAAMD,QAAQrB;QACpB,OAAOD,MAAMwB,KAAK,CAACF,OAAOC;IAC5B;IAEA,OAAON,KAAKQ,GAAG,CAAC,CAACC,KAAKC,QAAUvB,WAAW;YAAEC,UAAUqB,IAAID,GAAG,CAACjB;YAAgBF,OAAOqB;QAAM;AAC9F,EAAE"}
|
|
1
|
+
{"version":3,"sources":["../src/utils/renderUtils.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { ColorSwatch, SwatchPickerRow, ImageSwatch } from '../';\nimport type { ColorSwatchProps, ImageSwatchProps } from '../';\n\nexport type SwatchProps = ImageSwatchProps | ColorSwatchProps;\n\nexport type SwatchPickerGridProps = {\n items: SwatchProps[];\n columnCount: number;\n renderRow?: (props: { children: JSXElement[]; rowId: string | number }) => JSXElement;\n renderSwatch?: (item: SwatchProps) => JSXElement;\n};\n\nexport const renderSwatchPickerGrid = (props: SwatchPickerGridProps): JSXElement[] => {\n const { items, columnCount, renderRow, renderSwatch } = props;\n const _renderRow = renderRow || (({ children, rowId }) => <SwatchPickerRow key={rowId}>{children}</SwatchPickerRow>);\n const _renderSwatch =\n renderSwatch ||\n ((item: SwatchProps) =>\n (item as ImageSwatchProps).src ? (\n <ImageSwatch key={item.value} src={(item as ImageSwatchProps).src ?? ''} {...item} />\n ) : (\n <ColorSwatch key={item.value} color={item.color || ''} {...item} />\n ));\n\n const rowCount = Math.ceil(items.length / columnCount);\n const rows = Array.from({ length: rowCount }, (_, i) => {\n const start = i * columnCount;\n const end = start + columnCount;\n return items.slice(start, end);\n });\n\n return rows.map((row, index) => _renderRow({ children: row.map(_renderSwatch), rowId: index }));\n};\n"],"names":["React","ColorSwatch","SwatchPickerRow","ImageSwatch","renderSwatchPickerGrid","props","items","columnCount","renderRow","renderSwatch","_renderRow","children","rowId","key","_renderSwatch","item","src","value","color","rowCount","Math","ceil","length","rows","Array","from","_","i","start","end","slice","map","row","index"],"mappings":";;;;+BAcaI;;;;;;;iEAdU,QAAQ;kBAE2B,MAAM;AAYzD,+BAA+B,CAACC;IACrC,MAAM,EAAEC,KAAK,EAAEC,WAAW,EAAEC,SAAS,EAAEC,YAAY,EAAE,GAAGJ;IACxD,MAAMK,aAAaF,aAAc,CAAA,CAAC,EAAEG,QAAQ,EAAEC,KAAK,EAAE,GAAA,WAAA,GAAK,OAAA,aAAA,CAACV,iBAAAA,EAAAA;YAAgBW,KAAKD;WAAQD,SAAAA,CAA0B;IAClH,MAAMG,gBACJL,gBACC,CAAA,CAACM;YAEqC;eADpCA,KAA0BC,GAAG,GAAA,WAAA,GAC5B,OAAA,aAAA,CAACb,aAAAA,EAAAA;YAAYU,KAAKE,KAAKE,KAAK;YAAED,KAAK,CAAA,YAACD,KAA0BC,GAAAA,AAAG,MAAA,QAA9B,cAAA,KAAA,IAAA,YAAkC;YAAK,GAAGD,IAAI;2BAEjF,OAAA,aAAA,CAACd,aAAAA,EAAAA;YAAYY,KAAKE,KAAKE,KAAK;YAAEC,OAAOH,KAAKG,KAAK,IAAI;YAAK,GAAGH,IAAI;;MACjE;IAEJ,MAAMI,WAAWC,KAAKC,IAAI,CAACf,MAAMgB,MAAM,GAAGf;IAC1C,MAAMgB,OAAOC,MAAMC,IAAI,CAAC;QAAEH,QAAQH;IAAS,GAAG,CAACO,GAAGC;QAChD,MAAMC,QAAQD,IAAIpB;QAClB,MAAMsB,MAAMD,QAAQrB;QACpB,OAAOD,MAAMwB,KAAK,CAACF,OAAOC;IAC5B;IAEA,OAAON,KAAKQ,GAAG,CAAC,CAACC,KAAKC,QAAUvB,WAAW;YAAEC,UAAUqB,IAAID,GAAG,CAACjB;YAAgBF,OAAOqB;QAAM;AAC9F,EAAE"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-swatch-picker",
|
|
3
|
-
"version": "9.4.
|
|
3
|
+
"version": "9.4.6",
|
|
4
4
|
"description": "New fluentui react package",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -20,22 +20,22 @@
|
|
|
20
20
|
"@fluentui/scripts-cypress": "*"
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
23
|
-
"@fluentui/react-context-selector": "^9.2.
|
|
24
|
-
"@fluentui/react-field": "^9.4.
|
|
23
|
+
"@fluentui/react-context-selector": "^9.2.8",
|
|
24
|
+
"@fluentui/react-field": "^9.4.6",
|
|
25
25
|
"@fluentui/react-icons": "^2.0.245",
|
|
26
|
-
"@fluentui/react-jsx-runtime": "^9.1
|
|
27
|
-
"@fluentui/react-shared-contexts": "^9.25.
|
|
28
|
-
"@fluentui/react-tabster": "^9.26.
|
|
26
|
+
"@fluentui/react-jsx-runtime": "^9.2.1",
|
|
27
|
+
"@fluentui/react-shared-contexts": "^9.25.2",
|
|
28
|
+
"@fluentui/react-tabster": "^9.26.6",
|
|
29
29
|
"@fluentui/react-theme": "^9.2.0",
|
|
30
|
-
"@fluentui/react-utilities": "^9.
|
|
30
|
+
"@fluentui/react-utilities": "^9.25.0",
|
|
31
31
|
"@griffel/react": "^1.5.22",
|
|
32
32
|
"@swc/helpers": "^0.5.1"
|
|
33
33
|
},
|
|
34
34
|
"peerDependencies": {
|
|
35
|
-
"@types/react": ">=16.8.0 <
|
|
36
|
-
"@types/react-dom": ">=16.8.0 <
|
|
37
|
-
"react": ">=16.14.0 <
|
|
38
|
-
"react-dom": ">=16.8.0 <
|
|
35
|
+
"@types/react": ">=16.8.0 <20.0.0",
|
|
36
|
+
"@types/react-dom": ">=16.8.0 <20.0.0",
|
|
37
|
+
"react": ">=16.14.0 <20.0.0",
|
|
38
|
+
"react-dom": ">=16.8.0 <20.0.0"
|
|
39
39
|
},
|
|
40
40
|
"exports": {
|
|
41
41
|
".": {
|