@fluentui/react-swatch-picker 9.1.4 → 9.1.5
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 +16 -2
- package/lib/ColorSwatch.js.map +1 -1
- package/lib/EmptySwatch.js.map +1 -1
- package/lib/ImageSwatch.js.map +1 -1
- package/lib/SwatchPicker.js.map +1 -1
- package/lib/SwatchPickerRow.js.map +1 -1
- package/lib/components/ColorSwatch/ColorSwatch.js.map +1 -1
- package/lib/components/ColorSwatch/ColorSwatch.types.js +3 -1
- package/lib/components/ColorSwatch/ColorSwatch.types.js.map +1 -1
- package/lib/components/ColorSwatch/index.js.map +1 -1
- package/lib/components/ColorSwatch/renderColorSwatch.js.map +1 -1
- package/lib/components/ColorSwatch/useColorSwatch.js.map +1 -1
- package/lib/components/EmptySwatch/EmptySwatch.js.map +1 -1
- package/lib/components/EmptySwatch/EmptySwatch.types.js +3 -1
- package/lib/components/EmptySwatch/EmptySwatch.types.js.map +1 -1
- package/lib/components/EmptySwatch/index.js.map +1 -1
- package/lib/components/EmptySwatch/renderEmptySwatch.js.map +1 -1
- package/lib/components/EmptySwatch/useEmptySwatch.js.map +1 -1
- package/lib/components/ImageSwatch/ImageSwatch.js.map +1 -1
- package/lib/components/ImageSwatch/ImageSwatch.types.js +3 -1
- package/lib/components/ImageSwatch/ImageSwatch.types.js.map +1 -1
- package/lib/components/ImageSwatch/index.js.map +1 -1
- package/lib/components/ImageSwatch/renderImageSwatch.js.map +1 -1
- package/lib/components/ImageSwatch/useImageSwatch.js.map +1 -1
- package/lib/components/SwatchPicker/SwatchPicker.js.map +1 -1
- package/lib/components/SwatchPicker/SwatchPicker.types.js.map +1 -1
- package/lib/components/SwatchPicker/index.js.map +1 -1
- package/lib/components/SwatchPicker/renderSwatchPicker.js.map +1 -1
- package/lib/components/SwatchPicker/useSwatchPicker.js.map +1 -1
- package/lib/components/SwatchPickerRow/SwatchPickerRow.js.map +1 -1
- package/lib/components/SwatchPickerRow/SwatchPickerRow.types.js +3 -1
- package/lib/components/SwatchPickerRow/SwatchPickerRow.types.js.map +1 -1
- package/lib/components/SwatchPickerRow/index.js.map +1 -1
- package/lib/components/SwatchPickerRow/renderSwatchPickerRow.js.map +1 -1
- package/lib/components/SwatchPickerRow/useSwatchPickerRow.js.map +1 -1
- package/lib/contexts/index.js.map +1 -1
- package/lib/contexts/swatchPicker.js.map +1 -1
- package/lib/index.js.map +1 -1
- package/lib/utils/renderUtils.js.map +1 -1
- package/lib-commonjs/ColorSwatch.js.map +1 -1
- package/lib-commonjs/EmptySwatch.js.map +1 -1
- package/lib-commonjs/ImageSwatch.js.map +1 -1
- package/lib-commonjs/SwatchPicker.js.map +1 -1
- package/lib-commonjs/SwatchPickerRow.js.map +1 -1
- package/lib-commonjs/components/ColorSwatch/ColorSwatch.js.map +1 -1
- package/lib-commonjs/components/ColorSwatch/ColorSwatch.types.js +3 -1
- package/lib-commonjs/components/ColorSwatch/ColorSwatch.types.js.map +1 -1
- package/lib-commonjs/components/ColorSwatch/index.js.map +1 -1
- package/lib-commonjs/components/ColorSwatch/renderColorSwatch.js.map +1 -1
- package/lib-commonjs/components/ColorSwatch/useColorSwatch.js.map +1 -1
- package/lib-commonjs/components/ColorSwatch/useColorSwatchStyles.styles.js.map +1 -1
- package/lib-commonjs/components/EmptySwatch/EmptySwatch.js.map +1 -1
- package/lib-commonjs/components/EmptySwatch/EmptySwatch.types.js +3 -1
- package/lib-commonjs/components/EmptySwatch/EmptySwatch.types.js.map +1 -1
- package/lib-commonjs/components/EmptySwatch/index.js.map +1 -1
- package/lib-commonjs/components/EmptySwatch/renderEmptySwatch.js.map +1 -1
- package/lib-commonjs/components/EmptySwatch/useEmptySwatch.js.map +1 -1
- package/lib-commonjs/components/EmptySwatch/useEmptySwatchStyles.styles.js.map +1 -1
- package/lib-commonjs/components/ImageSwatch/ImageSwatch.js.map +1 -1
- package/lib-commonjs/components/ImageSwatch/ImageSwatch.types.js +3 -1
- package/lib-commonjs/components/ImageSwatch/ImageSwatch.types.js.map +1 -1
- package/lib-commonjs/components/ImageSwatch/index.js.map +1 -1
- package/lib-commonjs/components/ImageSwatch/renderImageSwatch.js.map +1 -1
- package/lib-commonjs/components/ImageSwatch/useImageSwatch.js.map +1 -1
- package/lib-commonjs/components/ImageSwatch/useImageSwatchStyles.styles.js.map +1 -1
- package/lib-commonjs/components/SwatchPicker/SwatchPicker.js.map +1 -1
- package/lib-commonjs/components/SwatchPicker/SwatchPicker.types.js.map +1 -1
- package/lib-commonjs/components/SwatchPicker/index.js.map +1 -1
- package/lib-commonjs/components/SwatchPicker/renderSwatchPicker.js.map +1 -1
- package/lib-commonjs/components/SwatchPicker/useSwatchPicker.js.map +1 -1
- package/lib-commonjs/components/SwatchPicker/useSwatchPickerStyles.styles.js.map +1 -1
- package/lib-commonjs/components/SwatchPickerRow/SwatchPickerRow.js.map +1 -1
- package/lib-commonjs/components/SwatchPickerRow/SwatchPickerRow.types.js +3 -1
- package/lib-commonjs/components/SwatchPickerRow/SwatchPickerRow.types.js.map +1 -1
- package/lib-commonjs/components/SwatchPickerRow/index.js.map +1 -1
- package/lib-commonjs/components/SwatchPickerRow/renderSwatchPickerRow.js.map +1 -1
- package/lib-commonjs/components/SwatchPickerRow/useSwatchPickerRow.js.map +1 -1
- package/lib-commonjs/components/SwatchPickerRow/useSwatchPickerRowStyles.styles.js.map +1 -1
- package/lib-commonjs/contexts/index.js.map +1 -1
- package/lib-commonjs/contexts/swatchPicker.js +5 -5
- package/lib-commonjs/contexts/swatchPicker.js.map +1 -1
- package/lib-commonjs/index.js +55 -55
- package/lib-commonjs/index.js.map +1 -1
- package/lib-commonjs/utils/renderUtils.js.map +1 -1
- package/package.json +7 -7
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useColorSwatchStyles.styles.js"],"sourcesContent":["import { __resetStyles, __styles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nexport const colorSwatchClassNames = {\n root: 'fui-ColorSwatch',\n icon: 'fui-ColorSwatch__icon',\n disabledIcon: 'fui-ColorSwatch__disabledIcon'\n};\nexport const swatchCSSVars = {\n color: `--fui-SwatchPicker--color`,\n borderColor: `--fui-SwatchPicker--borderColor`\n};\nconst {\n color,\n borderColor\n} = swatchCSSVars;\n/**\n * Styles for the root slot\n */\nconst useResetStyles = /*#__PURE__*/__resetStyles(\"ryw27oi\", null, {\n r: [\".ryw27oi{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;box-sizing:border-box;border:1px solid var(--fui-SwatchPicker--borderColor);background:var(--fui-SwatchPicker--color);overflow:hidden;padding:0;}\", \".ryw27oi:hover{cursor:pointer;border:none;box-shadow:inset 0 0 0 var(--strokeWidthThick) var(--colorBrandStroke1),inset 0 0 0 var(--strokeWidthThicker) var(--colorStrokeFocus1);}\", \".ryw27oi:hover:active{border:none;box-shadow:inset 0 0 0 var(--strokeWidthThicker) var(--colorCompoundBrandStrokePressed),inset 0 0 0 var(--strokeWidthThickest) var(--colorStrokeFocus1);}\", \".ryw27oi:focus{outline:none;}\", \".ryw27oi:focus-visible{outline:none;}\", \".ryw27oi[data-fui-focus-visible]{border:none;outline:none;box-shadow:inset 0 0 0 var(--strokeWidthThick) var(--colorStrokeFocus2),inset 0 0 0 var(--strokeWidthThicker) var(--colorStrokeFocus1);}\"],\n s: [\"@media (forced-colors: active){.ryw27oi{forced-color-adjust:none;}.ryw27oi:hover{box-shadow:inset 0 0 0 var(--strokeWidthThick) var(--colorBrandStroke2Hover),inset 0 0 0 var(--strokeWidthThicker) var(--colorStrokeFocus1);}.ryw27oi:hover:active{box-shadow:inset 0 0 0 var(--strokeWidthThicker) var(--colorBrandStroke2Pressed),inset 0 0 0 var(--strokeWidthThickest) var(--colorStrokeFocus1);}}\"]\n});\nconst useStyles = /*#__PURE__*/__styles({\n disabled: {\n eoavqd: \"fphbwmw\",\n Bvxd0ez: \"f1q3txrk\",\n Bs5ihcz: \"f1hjbkfk\"\n },\n selected: {\n Bgfg5da: 0,\n B9xav0g: 0,\n oivjwe: 0,\n Bn0qgzm: 0,\n B4g9neb: 0,\n zhjwy3: 0,\n wvpqe5: 0,\n ibv6hh: 0,\n u1mtju: 0,\n h3c5rm: 0,\n vrafjx: 0,\n Bekrc4i: 0,\n i8vvqc: 0,\n g2u3we: 0,\n icvyot: 0,\n B4j52fo: 0,\n irswps: \"f3bhgqh\",\n E5pizo: \"f8ps3yo\",\n Bvxd0ez: \"f106r15f\",\n vajtyg: \"ft0nc49\",\n j6ew2k: \"f16jq8vy\",\n Bspt33j: \"f18nq7tj\"\n }\n}, {\n h: [\".fphbwmw:hover{cursor:not-allowed;}\", \".f1q3txrk:hover{box-shadow:none;}\", \".f106r15f:hover{box-shadow:inset 0 0 0 var(--strokeWidthThickest) var(--colorCompoundBrandStrokeHover),inset 0 0 0 6px var(--colorStrokeFocus1);}\", \".ft0nc49:hover:active{box-shadow:inset 0 0 0 var(--strokeWidthThickest) var(--colorCompoundBrandStrokePressed),inset 0 0 0 7px var(--colorStrokeFocus1);}\"],\n m: [[\"@media (forced-colors: active){.f1hjbkfk:hover{box-shadow:none;}}\", {\n m: \"(forced-colors: active)\"\n }], [\"@media (forced-colors: active){.f18nq7tj{box-shadow:inset 0 0 0 var(--strokeWidthThicker) var(--colorBrandStroke2Pressed),inset 0 0 0 5px var(--colorStrokeFocus1);}}\", {\n m: \"(forced-colors: active)\"\n }]],\n d: [[\".f3bhgqh{border:none;}\", {\n p: -2\n }], \".f8ps3yo{box-shadow:inset 0 0 0 var(--strokeWidthThicker) var(--colorBrandStroke1),inset 0 0 0 5px var(--colorStrokeFocus1);}\", \".f16jq8vy[data-fui-focus-visible]{box-shadow:inset 0 0 0 var(--strokeWidthThicker) var(--colorStrokeFocus2),inset 0 0 0 5px var(--colorStrokeFocus1);}\"]\n});\nconst useSizeStyles = /*#__PURE__*/__styles({\n \"extra-small\": {\n a9b677: \"f64fuq3\",\n Bqenvij: \"fjamq6b\"\n },\n small: {\n a9b677: \"fq4mcun\",\n Bqenvij: \"frvgh55\"\n },\n medium: {\n a9b677: \"f1w9dchk\",\n Bqenvij: \"fxldao9\"\n },\n large: {\n a9b677: \"f1szoe96\",\n Bqenvij: \"f1d2rq10\"\n }\n}, {\n d: [\".f64fuq3{width:20px;}\", \".fjamq6b{height:20px;}\", \".fq4mcun{width:24px;}\", \".frvgh55{height:24px;}\", \".f1w9dchk{width:28px;}\", \".fxldao9{height:28px;}\", \".f1szoe96{width:32px;}\", \".f1d2rq10{height:32px;}\"]\n});\nconst useShapeStyles = /*#__PURE__*/__styles({\n rounded: {\n Beyfa6y: 0,\n Bbmb7ep: 0,\n Btl43ni: 0,\n B7oj6ja: 0,\n Dimara: \"ft85np5\",\n Bw81rd7: 0,\n kdpuga: 0,\n dm238s: 0,\n B6xbmo0: 0,\n B3whbx2: \"f2krc9w\"\n },\n circular: {\n Beyfa6y: 0,\n Bbmb7ep: 0,\n Btl43ni: 0,\n B7oj6ja: 0,\n Dimara: \"f44lkw9\",\n Bw81rd7: 0,\n kdpuga: 0,\n dm238s: 0,\n B6xbmo0: 0,\n B3whbx2: \"f1062rbf\"\n },\n square: {\n Beyfa6y: 0,\n Bbmb7ep: 0,\n Btl43ni: 0,\n B7oj6ja: 0,\n Dimara: \"f1fabniw\",\n Bw81rd7: 0,\n kdpuga: 0,\n dm238s: 0,\n B6xbmo0: 0,\n B3whbx2: \"fj0ryk1\"\n }\n}, {\n d: [[\".ft85np5{border-radius:var(--borderRadiusMedium);}\", {\n p: -1\n }], [\".f2krc9w[data-fui-focus-visible]{border-radius:var(--borderRadiusMedium);}\", {\n p: -1\n }], [\".f44lkw9{border-radius:var(--borderRadiusCircular);}\", {\n p: -1\n }], [\".f1062rbf[data-fui-focus-visible]{border-radius:var(--borderRadiusCircular);}\", {\n p: -1\n }], [\".f1fabniw{border-radius:var(--borderRadiusNone);}\", {\n p: -1\n }], [\".fj0ryk1[data-fui-focus-visible]{border-radius:var(--borderRadiusNone);}\", {\n p: -1\n }]]\n});\nconst useIconStyles = /*#__PURE__*/__styles({\n disabledIcon: {\n sj55zd: \"fqpbvvt\",\n Bhu2qc9: \"f14y0k3d\"\n },\n icon: {\n qhf8xq: \"f1euv43f\",\n mc9l5x: \"f22iagw\",\n qb2dma: \"f7nlbp4\"\n },\n \"extra-small\": {\n Be2twd7: \"f4ybsrx\"\n },\n small: {\n Be2twd7: \"f4ybsrx\"\n },\n medium: {\n Be2twd7: \"fe5j1ua\"\n },\n large: {\n Be2twd7: \"f1rt2boy\"\n }\n}, {\n d: [\".fqpbvvt{color:var(--colorNeutralForegroundInverted);}\", \".f14y0k3d{filter:drop-shadow(0 1px 1px rgb(0 0 0 / 1));}\", \".f1euv43f{position:absolute;}\", \".f22iagw{display:flex;}\", \".f7nlbp4{align-self:center;}\", \".f4ybsrx{font-size:16px;}\", \".fe5j1ua{font-size:20px;}\", \".f1rt2boy{font-size:24px;}\"]\n});\n/**\n * Apply styling to the ColorSwatch slots based on the state\n */\nexport const useColorSwatchStyles_unstable = state => {\n 'use no memo';\n\n const resetStyles = useResetStyles();\n const styles = useStyles();\n const sizeStyles = useSizeStyles();\n const shapeStyles = useShapeStyles();\n const iconStyles = useIconStyles();\n const {\n size = 'medium',\n shape = 'square'\n } = state;\n state.root.className = mergeClasses(colorSwatchClassNames.root, resetStyles, sizeStyles[size], shapeStyles[shape], state.selected && styles.selected, state.disabled && styles.disabled, state.root.className);\n if (state.disabled && state.disabledIcon) {\n state.disabledIcon.className = mergeClasses(iconStyles.icon, iconStyles[size], iconStyles.disabledIcon, state.disabledIcon.className);\n }\n if (state.icon) {\n state.icon.className = mergeClasses(iconStyles.icon, iconStyles[size], state.icon.className);\n }\n return state;\n};\n//# sourceMappingURL=useColorSwatchStyles.styles.js.map"],"names":["colorSwatchClassNames","swatchCSSVars","useColorSwatchStyles_unstable","root","icon","disabledIcon","color","borderColor","useResetStyles","__resetStyles","r","s","useStyles","__styles","disabled","eoavqd","Bvxd0ez","Bs5ihcz","selected","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","E5pizo","vajtyg","j6ew2k","Bspt33j","h","m","d","p","useSizeStyles","a9b677","Bqenvij","small","medium","large","useShapeStyles","rounded","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bw81rd7","kdpuga","dm238s","B6xbmo0","B3whbx2","circular","square","useIconStyles","sj55zd","Bhu2qc9","qhf8xq","mc9l5x","qb2dma","Be2twd7","state","resetStyles","styles","sizeStyles","shapeStyles","iconStyles","size","shape","className","mergeClasses"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["useColorSwatchStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nexport const colorSwatchClassNames = {\n root: 'fui-ColorSwatch',\n icon: 'fui-ColorSwatch__icon',\n disabledIcon: 'fui-ColorSwatch__disabledIcon'\n};\nexport const swatchCSSVars = {\n color: `--fui-SwatchPicker--color`,\n borderColor: `--fui-SwatchPicker--borderColor`\n};\nconst { color, borderColor } = swatchCSSVars;\n/**\n * Styles for the root slot\n */ const useResetStyles = makeResetStyles({\n display: 'inline-flex',\n flexShrink: 0,\n alignItems: 'center',\n justifyContent: 'center',\n boxSizing: 'border-box',\n border: `1px solid var(${borderColor})`,\n background: `var(${color})`,\n overflow: 'hidden',\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 useStyles = makeStyles({\n disabled: {\n ':hover': {\n cursor: 'not-allowed',\n boxShadow: 'none'\n },\n '@media (forced-colors: active)': {\n ':hover': {\n boxShadow: 'none'\n }\n }\n },\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});\nconst useIconStyles = makeStyles({\n disabledIcon: {\n color: tokens.colorNeutralForegroundInverted,\n filter: 'drop-shadow(0 1px 1px rgb(0 0 0 / 1))'\n },\n icon: {\n position: 'absolute',\n display: 'flex',\n alignSelf: 'center'\n },\n 'extra-small': {\n fontSize: '16px'\n },\n small: {\n fontSize: '16px'\n },\n medium: {\n fontSize: '20px'\n },\n large: {\n fontSize: '24px'\n }\n});\n/**\n * Apply styling to the ColorSwatch slots based on the state\n */ export const useColorSwatchStyles_unstable = (state)=>{\n 'use no memo';\n const resetStyles = useResetStyles();\n const styles = useStyles();\n const sizeStyles = useSizeStyles();\n const shapeStyles = useShapeStyles();\n const iconStyles = useIconStyles();\n const { size = 'medium', shape = 'square' } = state;\n state.root.className = mergeClasses(colorSwatchClassNames.root, resetStyles, sizeStyles[size], shapeStyles[shape], state.selected && styles.selected, state.disabled && styles.disabled, state.root.className);\n if (state.disabled && state.disabledIcon) {\n state.disabledIcon.className = mergeClasses(iconStyles.icon, iconStyles[size], iconStyles.disabledIcon, state.disabledIcon.className);\n }\n if (state.icon) {\n state.icon.className = mergeClasses(iconStyles.icon, iconStyles[size], state.icon.className);\n }\n return state;\n};\n"],"names":["colorSwatchClassNames","swatchCSSVars","useColorSwatchStyles_unstable","root","icon","disabledIcon","color","borderColor","useResetStyles","__resetStyles","r","s","useStyles","__styles","disabled","eoavqd","Bvxd0ez","Bs5ihcz","selected","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","E5pizo","vajtyg","j6ew2k","Bspt33j","h","m","d","p","useSizeStyles","a9b677","Bqenvij","small","medium","large","useShapeStyles","rounded","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bw81rd7","kdpuga","dm238s","B6xbmo0","B3whbx2","circular","square","useIconStyles","sj55zd","Bhu2qc9","qhf8xq","mc9l5x","qb2dma","Be2twd7","state","resetStyles","styles","sizeStyles","shapeStyles","iconStyles","size","shape","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["EmptySwatch.
|
|
1
|
+
{"version":3,"sources":["EmptySwatch.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useEmptySwatch_unstable } from './useEmptySwatch';\nimport { renderEmptySwatch_unstable } from './renderEmptySwatch';\nimport { useEmptySwatchStyles_unstable } from './useEmptySwatchStyles.styles';\nimport type { EmptySwatchProps } from './EmptySwatch.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * EmptySwatch component is used for adding new color swatches.\n */\nexport const EmptySwatch: ForwardRefComponent<EmptySwatchProps> = React.forwardRef((props, ref) => {\n const state = useEmptySwatch_unstable(props, ref);\n\n useEmptySwatchStyles_unstable(state);\n useCustomStyleHook_unstable('useEmptySwatchStyles_unstable')(state);\n return renderEmptySwatch_unstable(state);\n});\n\nEmptySwatch.displayName = 'EmptySwatch';\n"],"names":["EmptySwatch","React","forwardRef","props","ref","state","useEmptySwatch_unstable","useEmptySwatchStyles_unstable","useCustomStyleHook_unstable","renderEmptySwatch_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAWaA;;;eAAAA;;;;iEAXU;gCAEiB;mCACG;4CACG;qCAEF;AAKrC,MAAMA,cAAAA,WAAAA,GAAqDC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,QAAQC,IAAAA,uCAAAA,EAAwBH,OAAOC;IAE7CG,IAAAA,yDAAAA,EAA8BF;IAC9BG,IAAAA,gDAAAA,EAA4B,iCAAiCH;IAC7D,OAAOI,IAAAA,6CAAAA,EAA2BJ;AACpC;AAEAL,YAAYU,WAAW,GAAG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":[],"names":[],"mappings":""}
|
|
1
|
+
{"version":3,"sources":["EmptySwatch.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { SwatchPickerProps } from '../SwatchPicker/SwatchPicker.types';\n\nexport type EmptySwatchSlots = {\n root: Slot<'button'>;\n};\n\n/**\n * EmptySwatch Props\n */\nexport type EmptySwatchProps = ComponentProps<EmptySwatchSlots> & Pick<SwatchPickerProps, 'size' | 'shape'>;\n\n/**\n * State used in rendering EmptySwatch\n */\nexport type EmptySwatchState = ComponentState<EmptySwatchSlots> & Pick<EmptySwatchProps, 'size' | 'shape'>;\n"],"names":[],"rangeMappings":";;","mappings":"AAYA;;CAEC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.
|
|
1
|
+
{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './EmptySwatch';\nexport * from './EmptySwatch.types';\nexport * from './renderEmptySwatch';\nexport * from './useEmptySwatch';\nexport * from './useEmptySwatchStyles.styles';\n"],"names":[],"rangeMappings":";;;;;;;;;","mappings":";;;;;uBAAc;uBACA;uBACA;uBACA;uBACA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["renderEmptySwatch.
|
|
1
|
+
{"version":3,"sources":["renderEmptySwatch.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { EmptySwatchState, EmptySwatchSlots } from './EmptySwatch.types';\n\n/**\n * Render the final JSX of EmptySwatch\n */\nexport const renderEmptySwatch_unstable = (state: EmptySwatchState) => {\n assertSlots<EmptySwatchSlots>(state);\n\n return <state.root />;\n};\n"],"names":["renderEmptySwatch_unstable","state","assertSlots","_jsx","root"],"rangeMappings":";;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;4BARb;gCAE4B;AAMrB,MAAMA,6BAA6B,CAACC;IACzCC,IAAAA,2BAAAA,EAA8BD;IAE9B,OAAA,WAAA,GAAOE,IAAAA,eAAA,EAACF,MAAMG,IAAI,EAAA,CAAA;AACpB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useEmptySwatch.
|
|
1
|
+
{"version":3,"sources":["useEmptySwatch.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { EmptySwatchProps, EmptySwatchState } from './EmptySwatch.types';\nimport { useSwatchPickerContextValue_unstable } from '../../contexts/swatchPicker';\n\n/**\n * Create the state required to render EmptySwatch.\n *\n * The returned state can be modified with hooks such as useEmptySwatchStyles_unstable,\n * before being passed to renderEmptySwatch_unstable.\n *\n * @param props - props from this instance of EmptySwatch\n * @param ref - reference to root HTMLDivElement of EmptySwatch\n */\nexport const useEmptySwatch_unstable = (\n props: EmptySwatchProps,\n ref: React.Ref<HTMLButtonElement>,\n): EmptySwatchState => {\n const { size, shape, ...rest } = props;\n const _size = useSwatchPickerContextValue_unstable(ctx => ctx.size);\n const _shape = useSwatchPickerContextValue_unstable(ctx => ctx.shape);\n const isGrid = useSwatchPickerContextValue_unstable(ctx => ctx.isGrid);\n\n const role = isGrid ? 'gridcell' : 'radio';\n const a11yProps = isGrid ? {} : { 'aria-checked': false };\n return {\n components: {\n root: 'button',\n },\n root: slot.always(\n getIntrinsicElementProps('button', {\n ref,\n role,\n ...a11yProps,\n ...rest,\n }),\n { elementType: 'button' },\n ),\n size: size ?? _size,\n shape: shape ?? _shape,\n };\n};\n"],"names":["useEmptySwatch_unstable","props","ref","size","shape","rest","_size","useSwatchPickerContextValue_unstable","ctx","_shape","isGrid","role","a11yProps","components","root","slot","always","getIntrinsicElementProps","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAcaA;;;eAAAA;;;;iEAdU;gCACwB;8BAEM;AAW9C,MAAMA,0BAA0B,CACrCC,OACAC;IAEA,MAAM,EAAEC,IAAI,EAAEC,KAAK,EAAE,GAAGC,MAAM,GAAGJ;IACjC,MAAMK,QAAQC,IAAAA,kDAAAA,EAAqCC,CAAAA,MAAOA,IAAIL,IAAI;IAClE,MAAMM,SAASF,IAAAA,kDAAAA,EAAqCC,CAAAA,MAAOA,IAAIJ,KAAK;IACpE,MAAMM,SAASH,IAAAA,kDAAAA,EAAqCC,CAAAA,MAAOA,IAAIE,MAAM;IAErE,MAAMC,OAAOD,SAAS,aAAa;IACnC,MAAME,YAAYF,SAAS,CAAC,IAAI;QAAE,gBAAgB;IAAM;IACxD,OAAO;QACLG,YAAY;YACVC,MAAM;QACR;QACAA,MAAMC,oBAAAA,CAAKC,MAAM,CACfC,IAAAA,wCAAAA,EAAyB,UAAU;YACjCf;YACAS;YACA,GAAGC,SAAS;YACZ,GAAGP,IAAI;QACT,IACA;YAAEa,aAAa;QAAS;QAE1Bf,MAAMA,SAAAA,QAAAA,SAAAA,KAAAA,IAAAA,OAAQG;QACdF,OAAOA,UAAAA,QAAAA,UAAAA,KAAAA,IAAAA,QAASK;IAClB;AACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useEmptySwatchStyles.styles.js"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"sources":["useEmptySwatchStyles.styles.js"],"sourcesContent":["import { 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":["emptySwatchClassNames","useEmptySwatchStyles_unstable","root","useStyles","__resetStyles","useSizeStyles","__styles","a9b677","Bqenvij","small","medium","large","d","useShapeStyles","rounded","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bw81rd7","kdpuga","dm238s","B6xbmo0","B3whbx2","circular","square","p","state","styles","sizeStyles","shapeStyles","_state_size","size","_state_shape","className","mergeClasses","shape"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAGaA,qBAAqB;eAArBA;;IAiDIC,6BAA6B;eAA7BA;;;uBApDyC;AAGnD,MAAMD,wBAAwB;IACjCE,MAAM;AACV;AACA;;CAEA,GAAI,MAAMC,YAAS,WAAA,GAAGC,IAAAA,oBAAA,EAAA,YAAA,MAAA;IAAA;CAGrB;AACD,MAAMC,gBAAa,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAA,eAAA;QAAAC,QAAA;QAAAC,SAAA;IAAA;IAAAC,OAAA;QAAAF,QAAA;QAAAC,SAAA;IAAA;IAAAE,QAAA;QAAAH,QAAA;QAAAC,SAAA;IAAA;IAAAG,OAAA;QAAAJ,QAAA;QAAAC,SAAA;IAAA;AAAA,GAAA;IAAAI,GAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA;AAkBtB,MAAMC,iBAAc,WAAA,GAAGP,IAAAA,eAAA,EAAA;IAAAQ,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;IAAA;IAAAC,UAAA;QAAAV,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;IAAA;IAAAE,QAAA;QAAAX,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;IAAA;AAAA,GAAA;IAAAZ,GAAA;QAAA;YAAA;YAAA;gBAAAe,GAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA,CAAA;YAAA;SAAA;KAAA;AAAA;AAsBZ,MAAM1B,gCAAiC2B,CAAAA;IAC9C;IACA,MAAMC,SAAS1B;IACf,MAAM2B,aAAazB;IACnB,MAAM0B,cAAclB;IACpB,IAAImB;IACJ,MAAMC,OAAO,AAACD,CAAAA,cAAcJ,MAAMK,IAAI,AAAJA,MAAU,QAAQD,gBAAgB,KAAK,IAAIA,cAAc;IAC3F,IAAIE;IACJN,MAAM1B,IAAI,CAACiC,SAAS,GAAGC,IAAAA,mBAAY,EAACpC,sBAAsBE,IAAI,EAAE2B,QAAQC,UAAU,CAACG,KAAK,EAAEF,WAAW,CAAC,AAACG,CAAAA,eAAeN,MAAMS,KAAK,AAALA,MAAW,QAAQH,iBAAiB,KAAK,IAAIA,eAAe,SAAS,EAAEN,MAAM1B,IAAI,CAACiC,SAAS;IACvN,OAAOP;AACX"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["ImageSwatch.
|
|
1
|
+
{"version":3,"sources":["ImageSwatch.tsx"],"sourcesContent":["import * 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":["ImageSwatch","React","forwardRef","props","ref","state","useImageSwatch_unstable","useImageSwatchStyles_unstable","useCustomStyleHook_unstable","renderImageSwatch_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAWaA;;;eAAAA;;;;iEAXU;gCAEiB;mCACG;4CACG;qCAEF;AAKrC,MAAMA,cAAAA,WAAAA,GAAqDC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,QAAQC,IAAAA,uCAAAA,EAAwBH,OAAOC;IAE7CG,IAAAA,yDAAAA,EAA8BF;IAC9BG,IAAAA,gDAAAA,EAA4B,iCAAiCH;IAE7D,OAAOI,IAAAA,6CAAAA,EAA2BJ;AACpC;AAEAL,YAAYU,WAAW,GAAG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":[],"names":[],"mappings":""}
|
|
1
|
+
{"version":3,"sources":["ImageSwatch.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { SwatchPickerProps } from '../SwatchPicker/SwatchPicker.types';\n\nexport type ImageSwatchSlots = {\n root: Slot<'button'>;\n};\n\n/**\n * ImageSwatch Props\n */\nexport type ImageSwatchProps = ComponentProps<ImageSwatchSlots> &\n Pick<SwatchPickerProps, 'size' | 'shape'> & {\n /**\n * Swatch color\n */\n src: string;\n\n /**\n * Swatch value\n */\n value: string;\n };\n\n/**\n * State used in rendering ImageSwatch\n */\nexport type ImageSwatchState = ComponentState<ImageSwatchSlots> &\n Pick<ImageSwatchProps, 'color' | 'size' | 'shape' | 'value'> & {\n selected: boolean;\n };\n"],"names":[],"rangeMappings":";;","mappings":"AAuBA;;CAEC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.
|
|
1
|
+
{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './ImageSwatch';\nexport * from './ImageSwatch.types';\nexport * from './renderImageSwatch';\nexport * from './useImageSwatch';\nexport * from './useImageSwatchStyles.styles';\n"],"names":[],"rangeMappings":";;;;;;;;;","mappings":";;;;;uBAAc;uBACA;uBACA;uBACA;uBACA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["renderImageSwatch.
|
|
1
|
+
{"version":3,"sources":["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":["renderImageSwatch_unstable","state","assertSlots","_jsx","root"],"rangeMappings":";;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;4BARb;gCAE4B;AAMrB,MAAMA,6BAA6B,CAACC;IACzCC,IAAAA,2BAAAA,EAA8BD;IAE9B,OAAA,WAAA,GAAOE,IAAAA,eAAA,EAACF,MAAMG,IAAI,EAAA,CAAA;AACpB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useImageSwatch.
|
|
1
|
+
{"version":3,"sources":["useImageSwatch.ts"],"sourcesContent":["import * 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":["useImageSwatch_unstable","props","ref","src","value","onClick","style","rest","size","useSwatchPickerContextValue_unstable","ctx","shape","isGrid","requestSelectionChange","selected","selectedValue","role","ariaSelected","onImageSwatchClick","useEventCallback","mergeCallbacks","event","selectedSwatch","components","root","slot","always","getIntrinsicElementProps","backgroundImage","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAcaA;;;eAAAA;;;;iEAdU;gCAC0D;8BAE5B;AAW9C,MAAMA,0BAA0B,CACrCC,OACAC;IAEA,MAAM,EAAEC,GAAG,EAAEC,KAAK,EAAEC,OAAO,EAAEC,KAAK,EAAE,GAAGC,MAAM,GAAGN;IAChD,MAAMO,OAAOC,IAAAA,kDAAAA,EAAqCC,CAAAA,MAAOA,IAAIF,IAAI;IACjE,MAAMG,QAAQF,IAAAA,kDAAAA,EAAqCC,CAAAA,MAAOA,IAAIC,KAAK;IACnE,MAAMC,SAASH,IAAAA,kDAAAA,EAAqCC,CAAAA,MAAOA,IAAIE,MAAM;IAErE,MAAMC,yBAAyBJ,IAAAA,kDAAAA,EAAqCC,CAAAA,MAAOA,IAAIG,sBAAsB;IACrG,MAAMC,WAAWL,IAAAA,kDAAAA,EAAqCC,CAAAA,MAAOA,IAAIK,aAAa,KAAKX;IAEnF,MAAMY,OAAOJ,SAAS,aAAa;IACnC,MAAMK,eAAeL,SACjB;QACE,iBAAiBE;IACnB,IACA;QAAE,gBAAgBA;IAAS;IAE/B,MAAMI,qBAAqBC,IAAAA,gCAAAA,EACzBC,IAAAA,8BAAAA,EAAef,SAAS,CAACgB,QACvBR,uBAAuBQ,OAAO;YAC5BN,eAAeX;YACfkB,gBAAgBnB;QAClB;IAIJ,OAAO;QACLoB,YAAY;YACVC,MAAM;QACR;QACAA,MAAMC,oBAAAA,CAAKC,MAAM,CACfC,IAAAA,wCAAAA,EAAyB,UAAU;YACjCzB;YACAc;YACA,GAAGC,YAAY;YACfZ,SAASa;YACT,GAAGX,IAAI;YACPD,OAAO;gBACLsB,iBAAiB,CAAC,IAAI,EAAEzB,IAAI,CAAC,CAAC;gBAC9B,GAAGG,KAAK;YACV;QACF,IACA;YAAEuB,aAAa;QAAS;QAE1BzB;QACAU;QACAN;QACAG;IACF;AACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useImageSwatchStyles.styles.js"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"sources":["useImageSwatchStyles.styles.js"],"sourcesContent":["import { 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":["imageSwatchClassNames","useImageSwatchStyles_unstable","root","useStyles","__resetStyles","r","s","useStylesSelected","__styles","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","state","styles","selectedStyles","sizeStyles","shapeStyles","size","shape","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["SwatchPicker.
|
|
1
|
+
{"version":3,"sources":["SwatchPicker.tsx"],"sourcesContent":["import * 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":["SwatchPicker","React","forwardRef","props","ref","state","useSwatchPicker_unstable","contextValues","useSwatchPickerContextValues","useSwatchPickerStyles_unstable","useCustomStyleHook_unstable","renderSwatchPicker_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAYaA;;;eAAAA;;;;iEAZU;iCAEkB;oCACG;6CACG;8BAEF;qCACD;AAKrC,MAAMA,eAAAA,WAAAA,GAAuDC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IAC3F,MAAMC,QAAQC,IAAAA,yCAAAA,EAAyBH,OAAOC;IAC9C,MAAMG,gBAAgBC,IAAAA,0CAAAA,EAA6BH;IAEnDI,IAAAA,2DAAAA,EAA+BJ;IAC/BK,IAAAA,gDAAAA,EAA4B,kCAAkCL;IAE9D,OAAOM,IAAAA,+CAAAA,EAA4BN,OAAOE;AAC5C;AAEAP,aAAaY,WAAW,GAAG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["SwatchPicker.types.
|
|
1
|
+
{"version":3,"sources":["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":[],"rangeMappings":";;;;;","mappings":";;;;;iEAAuB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.
|
|
1
|
+
{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './SwatchPicker';\nexport * from './SwatchPicker.types';\nexport * from './renderSwatchPicker';\nexport * from './useSwatchPicker';\nexport * from './useSwatchPickerStyles.styles';\n"],"names":[],"rangeMappings":";;;;;;;;;","mappings":";;;;;uBAAc;uBACA;uBACA;uBACA;uBACA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["renderSwatchPicker.
|
|
1
|
+
{"version":3,"sources":["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, contextValues: SwatchPickerContextValues) => {\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":["renderSwatchPicker_unstable","state","contextValues","assertSlots","_jsx","SwatchPickerProvider","value","swatchPicker","root","children"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAWaA;;;eAAAA;;;4BAVb;gCAE4B;8BACS;AAO9B,MAAMA,8BAA8B,CAACC,OAA0BC;IACpEC,IAAAA,2BAAAA,EAA+BF;IAE/B,OAAA,WAAA,GACEG,IAAAA,eAAA,EAACC,kCAAAA,EAAAA;QAAqBC,OAAOJ,cAAcK,YAAY;kBACrD,WAAA,GAAAH,IAAAA,eAAA,EAACH,MAAMO,IAAI,EAAA;sBAAEP,MAAMO,IAAI,CAACC,QAAQ;;;AAGtC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useSwatchPicker.
|
|
1
|
+
{"version":3,"sources":["useSwatchPicker.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useControllableState, useEventCallback, slot } from '@fluentui/react-utilities';\nimport type { SwatchPickerProps, SwatchPickerState } from './SwatchPicker.types';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\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 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":["useSwatchPicker_unstable","props","ref","layout","onSelectionChange","size","shape","spacing","style","rest","isGrid","focusAttributes","useArrowNavigationGroup","circular","axis","memorizeCurrent","role","selectedValue","setSelectedValue","useControllableState","state","defaultState","defaultSelectedValue","initialState","requestSelectionChange","useEventCallback","event","data","type","selectedSwatch","components","root","slot","always","getIntrinsicElementProps","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAcaA;;;eAAAA;;;;iEAdU;gCACgE;8BAE/C;AAWjC,MAAMA,2BAA2B,CACtCC,OACAC;IAEA,MAAM,EAAEC,MAAM,EAAEC,iBAAiB,EAAEC,OAAO,QAAQ,EAAEC,KAAK,EAAEC,UAAU,QAAQ,EAAEC,KAAK,EAAE,GAAGC,MAAM,GAAGR;IAElG,MAAMS,SAASP,WAAW;IAC1B,MAAMQ,kBAAkBC,IAAAA,qCAAAA,EAAwB;QAC9CC,UAAU;QACVC,MAAMJ,SAAS,gBAAgB;QAC/BK,iBAAiB;IACnB;IAEA,MAAMC,OAAON,SAAS,SAAS;IAE/B,MAAM,CAACO,eAAeC,iBAAiB,GAAGC,IAAAA,oCAAAA,EAAqB;QAC7DC,OAAOnB,MAAMgB,aAAa;QAC1BI,cAAcpB,MAAMqB,oBAAoB;QACxCC,cAAc;IAChB;IAEA,MAAMC,yBAAsEC,IAAAA,gCAAAA,EAAiB,CAACC,OAAOC;QACnGvB,sBAAAA,QAAAA,sBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,kBAAoBsB,OAAO;YACzBE,MAAM;YACNF;YACAT,eAAeU,KAAKV,aAAa;YACjCY,gBAAgBF,KAAKE,cAAc;QACrC;QACAX,iBAAiBS,KAAKV,aAAa;IACrC;IAEA,OAAO;QACLa,YAAY;YACVC,MAAM;QACR;QACAA,MAAMC,oBAAAA,CAAKC,MAAM,CACfC,IAAAA,wCAAAA,EAAyB,OAAO;YAC9BhC;YACAc;YACA,GAAGL,eAAe;YAClB,GAAGF,IAAI;QACT,IACA;YAAE0B,aAAa;QAAM;QAEvBzB;QACAc;QACAP;QACAZ;QACAC;QACAC;IACF;AACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useSwatchPickerStyles.styles.js"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"sources":["useSwatchPickerStyles.styles.js"],"sourcesContent":["import { 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":["swatchPickerClassNames","useSwatchPickerStyles_unstable","root","useStyles","__styles","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","mc9l5x","row","Beiy3e4","grid","spacingSmall","i8kkvl","Belr9w4","rmohyg","spacingMedium","d","p","state","styles","layoutStyle","isGrid","spacingStyle","spacing","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAEaA,sBAAsB;eAAtBA;;IAyBIC,8BAA8B;eAA9BA;;;uBA3BwB;AAElC,MAAMD,yBAAyB;IAClCE,MAAM;AACV;AACA;;CAEA,GAAI,MAAMC,YAAS,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAF,MAAA;QAAAG,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;IAAA;IAAAC,KAAA;QAAAC,SAAA;IAAA;IAAAC,MAAA;QAAAD,SAAA;IAAA;IAAAE,cAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;IAAA;IAAAC,eAAA;QAAAH,QAAA;QAAAC,SAAA;QAAAC,QAAA;IAAA;AAAA,GAAA;IAAAE,GAAA;QAAA;YAAA;YAAA;gBAAAC,GAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA,CAAA;YAAA;SAAA;KAAA;AAAA;AAoBX,MAAMnB,iCAAkCoB,CAAAA;IAC/C;IACA,MAAMC,SAASnB;IACf,MAAMoB,cAAcF,MAAMG,MAAM,GAAGF,OAAOT,IAAI,GAAGS,OAAOX,GAAG;IAC3D,MAAMc,eAAeJ,MAAMK,OAAO,KAAK,UAAUJ,OAAOR,YAAY,GAAGQ,OAAOJ,aAAa;IAC3FG,MAAMnB,IAAI,CAACyB,SAAS,GAAGC,IAAAA,mBAAY,EAAC5B,uBAAuBE,IAAI,EAAEoB,OAAOpB,IAAI,EAAEqB,aAAaE,cAAcJ,MAAMnB,IAAI,CAACyB,SAAS;IAC7H,OAAON;AACX"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["SwatchPickerRow.
|
|
1
|
+
{"version":3,"sources":["SwatchPickerRow.tsx"],"sourcesContent":["import * 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":["SwatchPickerRow","React","forwardRef","props","ref","state","useSwatchPickerRow_unstable","useSwatchPickerRowStyles_unstable","useCustomStyleHook_unstable","renderSwatchPickerRow_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAWaA;;;eAAAA;;;;iEAXU;oCAEqB;uCACG;gDACG;qCAEN;AAKrC,MAAMA,kBAAAA,WAAAA,GAA6DC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACjG,MAAMC,QAAQC,IAAAA,+CAAAA,EAA4BH,OAAOC;IAEjDG,IAAAA,iEAAAA,EAAkCF;IAClCG,IAAAA,gDAAAA,EAA4B,qCAAqCH;IACjE,OAAOI,IAAAA,qDAAAA,EAA+BJ;AACxC;AAEAL,gBAAgBU,WAAW,GAAG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":[],"names":[],"mappings":""}
|
|
1
|
+
{"version":3,"sources":["SwatchPickerRow.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { SwatchPickerProps } from '../SwatchPicker/SwatchPicker.types';\n\nexport type SwatchPickerRowSlots = {\n root: Slot<'div'>;\n};\n\n/**\n * SwatchPickerRow Props\n */\nexport type SwatchPickerRowProps = ComponentProps<SwatchPickerRowSlots>;\n\n/**\n * State used in rendering SwatchPickerRow\n */\nexport type SwatchPickerRowState = ComponentState<SwatchPickerRowSlots> & Pick<SwatchPickerProps, 'spacing'>;\n"],"names":[],"rangeMappings":";;","mappings":"AAYA;;CAEC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.
|
|
1
|
+
{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './SwatchPickerRow';\nexport * from './SwatchPickerRow.types';\nexport * from './renderSwatchPickerRow';\nexport * from './useSwatchPickerRow';\nexport * from './useSwatchPickerRowStyles.styles';\n"],"names":[],"rangeMappings":";;;;;;;;;","mappings":";;;;;uBAAc;uBACA;uBACA;uBACA;uBACA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["renderSwatchPickerRow.
|
|
1
|
+
{"version":3,"sources":["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":["renderSwatchPickerRow_unstable","state","assertSlots","_jsx","root"],"rangeMappings":";;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;4BARb;gCAE4B;AAMrB,MAAMA,iCAAiC,CAACC;IAC7CC,IAAAA,2BAAAA,EAAkCD;IAClC,OAAA,WAAA,GAAOE,IAAAA,eAAA,EAACF,MAAMG,IAAI,EAAA,CAAA;AACpB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useSwatchPickerRow.
|
|
1
|
+
{"version":3,"sources":["useSwatchPickerRow.ts"],"sourcesContent":["import * 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":["useSwatchPickerRow_unstable","props","ref","style","rest","spacing","useSwatchPickerContextValue_unstable","ctx","components","root","slot","always","getIntrinsicElementProps","role","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAcaA;;;eAAAA;;;;iEAdU;gCACwB;8BAEM;AAW9C,MAAMA,8BAA8B,CACzCC,OACAC;IAEA,MAAM,EAAEC,KAAK,EAAE,GAAGC,MAAM,GAAGH;IAC3B,MAAMI,UAAUC,IAAAA,kDAAAA,EAAqCC,CAAAA,MAAOA,IAAIF,OAAO;IAEvE,OAAO;QACLG,YAAY;YACVC,MAAM;QACR;QACAA,MAAMC,oBAAAA,CAAKC,MAAM,CACfC,IAAAA,wCAAAA,EAAyB,OAAO;YAC9BV;YACAW,MAAM;YACN,GAAGT,IAAI;QACT,IACA;YAAEU,aAAa;QAAM;QAEvBT;IACF;AACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useSwatchPickerRowStyles.styles.js"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"sources":["useSwatchPickerRowStyles.styles.js"],"sourcesContent":["import { 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":["swatchPickerRowClassNames","useSwatchPickerRowStyles_unstable","root","useResetStyles","__resetStyles","useStyles","__styles","spacingSmall","i8kkvl","spacingMedium","d","state","resetStyles","styles","spacingStyle","spacing","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IACaA,yBAAyB;eAAzBA;;IAmBIC,iCAAiC;eAAjCA;;;uBApByC;AACnD,MAAMD,4BAA4B;IACrCE,MAAM;AACV;AACA;;CAEA,GAAI,MAAMC,iBAAc,WAAA,GAAGC,IAAAA,oBAAA,EAAA,YAAA,MAAA;IAAA;CAG1B;AACD,MAAMC,YAAS,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAC,cAAA;QAAAC,QAAA;IAAA;IAAAC,eAAA;QAAAD,QAAA;IAAA;AAAA,GAAA;IAAAE,GAAA;QAAA;QAAA;KAAA;AAAA;AAUP,MAAMT,oCAAqCU,CAAAA;IAClD;IACA,MAAMC,cAAcT;IACpB,MAAMU,SAASR;IACf,MAAMS,eAAeH,MAAMI,OAAO,KAAK,UAAUF,OAAON,YAAY,GAAGM,OAAOJ,aAAa;IAC3FE,MAAMT,IAAI,CAACc,SAAS,GAAGC,IAAAA,mBAAY,EAACjB,0BAA0BE,IAAI,EAAEU,aAAaE,cAAcH,MAAMT,IAAI,CAACc,SAAS;IACnH,OAAOL;AACX"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.
|
|
1
|
+
{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './swatchPicker';\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;uBAAc"}
|
|
@@ -9,17 +9,17 @@ function _export(target, all) {
|
|
|
9
9
|
});
|
|
10
10
|
}
|
|
11
11
|
_export(exports, {
|
|
12
|
-
|
|
13
|
-
return
|
|
12
|
+
SwatchPickerProvider: function() {
|
|
13
|
+
return SwatchPickerProvider;
|
|
14
14
|
},
|
|
15
15
|
swatchPickerContextDefaultValue: function() {
|
|
16
16
|
return swatchPickerContextDefaultValue;
|
|
17
17
|
},
|
|
18
|
-
SwatchPickerProvider: function() {
|
|
19
|
-
return SwatchPickerProvider;
|
|
20
|
-
},
|
|
21
18
|
useSwatchPickerContextValue_unstable: function() {
|
|
22
19
|
return useSwatchPickerContextValue_unstable;
|
|
20
|
+
},
|
|
21
|
+
useSwatchPickerContextValues: function() {
|
|
22
|
+
return useSwatchPickerContextValues;
|
|
23
23
|
}
|
|
24
24
|
});
|
|
25
25
|
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["swatchPicker.
|
|
1
|
+
{"version":3,"sources":["swatchPicker.ts"],"sourcesContent":["import * 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":["SwatchPickerProvider","swatchPickerContextDefaultValue","useSwatchPickerContextValue_unstable","useSwatchPickerContextValues","state","isGrid","size","shape","spacing","requestSelectionChange","selectedValue","swatchPicker","undefined","SwatchPickerContext","createContext","Provider","selector","useContextSelector","ctx"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IA4DaA,oBAAAA;eAAAA;;IAnBAC,+BAAAA;eAAAA;;IAqBAC,oCAAAA;eAAAA;;IArCAC,4BAAAA;eAAAA;;;;iEAzBU;sCAC2B;AAwB3C,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;AAEO,MAAMV,kCAA4D;IACvEQ,wBAAwB;IACtB,MAAM,GACR;IACAJ,QAAQ;IACRC,MAAM;IACNC,OAAO;IACPC,SAAS;IACTE,eAAeE;AACjB;AAMA,MAAMC,sBAAsBC,IAAAA,mCAAAA,EAC1BF;AAGK,MAAMZ,uBAAuBa,oBAAoBE,QAAQ;AAEzD,MAAMb,uCAAuC,CAAIc,WACtDC,IAAAA,wCAAAA,EAAmBJ,qBAAqB,CAACK,MAAMjB,+BAA+B,GAAKe,SAASE"}
|