@fluentui/react-swatch-picker 9.3.7 → 9.4.0

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.
Files changed (24) hide show
  1. package/CHANGELOG.md +13 -2
  2. package/lib/components/ColorSwatch/useColorSwatchStyles.styles.raw.js +186 -0
  3. package/lib/components/ColorSwatch/useColorSwatchStyles.styles.raw.js.map +1 -0
  4. package/lib/components/EmptySwatch/useEmptySwatchStyles.styles.raw.js +63 -0
  5. package/lib/components/EmptySwatch/useEmptySwatchStyles.styles.raw.js.map +1 -0
  6. package/lib/components/ImageSwatch/useImageSwatchStyles.styles.raw.js +114 -0
  7. package/lib/components/ImageSwatch/useImageSwatchStyles.styles.raw.js.map +1 -0
  8. package/lib/components/SwatchPicker/useSwatchPickerStyles.styles.raw.js +35 -0
  9. package/lib/components/SwatchPicker/useSwatchPickerStyles.styles.raw.js.map +1 -0
  10. package/lib/components/SwatchPickerRow/useSwatchPickerRowStyles.styles.raw.js +28 -0
  11. package/lib/components/SwatchPickerRow/useSwatchPickerRowStyles.styles.raw.js.map +1 -0
  12. package/lib/utils/renderUtils.js.map +1 -1
  13. package/lib-commonjs/components/ColorSwatch/useColorSwatchStyles.styles.raw.js +205 -0
  14. package/lib-commonjs/components/ColorSwatch/useColorSwatchStyles.styles.raw.js.map +1 -0
  15. package/lib-commonjs/components/EmptySwatch/useEmptySwatchStyles.styles.raw.js +79 -0
  16. package/lib-commonjs/components/EmptySwatch/useEmptySwatchStyles.styles.raw.js.map +1 -0
  17. package/lib-commonjs/components/ImageSwatch/useImageSwatchStyles.styles.raw.js +130 -0
  18. package/lib-commonjs/components/ImageSwatch/useImageSwatchStyles.styles.raw.js.map +1 -0
  19. package/lib-commonjs/components/SwatchPicker/useSwatchPickerStyles.styles.raw.js +51 -0
  20. package/lib-commonjs/components/SwatchPicker/useSwatchPickerStyles.styles.raw.js.map +1 -0
  21. package/lib-commonjs/components/SwatchPickerRow/useSwatchPickerRowStyles.styles.raw.js +44 -0
  22. package/lib-commonjs/components/SwatchPickerRow/useSwatchPickerRowStyles.styles.raw.js.map +1 -0
  23. package/lib-commonjs/utils/renderUtils.js.map +1 -1
  24. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -1,12 +1,23 @@
1
1
  # Change Log - @fluentui/react-swatch-picker
2
2
 
3
- This log was last generated on Fri, 11 Jul 2025 15:56:58 GMT and should not be manually modified.
3
+ This log was last generated on Thu, 17 Jul 2025 13:45:47 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.4.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker_v9.4.0)
8
+
9
+ Thu, 17 Jul 2025 13:45:47 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker_v9.3.7..@fluentui/react-swatch-picker_v9.4.0)
11
+
12
+ ### Minor changes
13
+
14
+ - feat: enable griffel raw styles ([PR #34853](https://github.com/microsoft/fluentui/pull/34853) by martinhochel@microsoft.com)
15
+ - Bump @fluentui/react-field to v9.4.0 ([PR #34862](https://github.com/microsoft/fluentui/pull/34862) by beachball)
16
+ - Bump @fluentui/react-tabster to v9.26.0 ([PR #34862](https://github.com/microsoft/fluentui/pull/34862) by beachball)
17
+
7
18
  ## [9.3.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker_v9.3.7)
8
19
 
9
- Fri, 11 Jul 2025 15:56:58 GMT
20
+ Fri, 11 Jul 2025 15:59:24 GMT
10
21
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker_v9.3.6..@fluentui/react-swatch-picker_v9.3.7)
11
22
 
12
23
  ### Patches
package/lib/components/ColorSwatch/useColorSwatchStyles.styles.raw.js ADDED
@@ -0,0 +1,186 @@
1
+ import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';
2
+ import { tokens } from '@fluentui/react-theme';
3
+ import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
4
+ export const colorSwatchClassNames = {
5
+ root: 'fui-ColorSwatch',
6
+ icon: 'fui-ColorSwatch__icon',
7
+ disabledIcon: 'fui-ColorSwatch__disabledIcon'
8
+ };
9
+ export const swatchCSSVars = {
10
+ color: `--fui-SwatchPicker--color`,
11
+ borderColor: `--fui-SwatchPicker--borderColor`
12
+ };
13
+ const { color, borderColor } = swatchCSSVars;
14
+ /**
15
+ * Styles for the root slot
16
+ */ const useResetStyles = makeResetStyles({
17
+ display: 'inline-flex',
18
+ flexShrink: 0,
19
+ alignItems: 'center',
20
+ justifyContent: 'center',
21
+ boxSizing: 'border-box',
22
+ border: `1px solid var(${borderColor})`,
23
+ background: `var(${color})`,
24
+ overflow: 'hidden',
25
+ padding: '0',
26
+ ':hover': {
27
+ cursor: 'pointer',
28
+ border: 'none',
29
+ boxShadow: `inset 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorBrandStroke1}, inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorStrokeFocus1}`
30
+ },
31
+ ':hover:active': {
32
+ border: 'none',
33
+ boxShadow: `inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorCompoundBrandStrokePressed}, inset 0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorStrokeFocus1}`
34
+ },
35
+ ':focus': {
36
+ outline: 'none'
37
+ },
38
+ ':focus-visible': {
39
+ outline: 'none'
40
+ },
41
+ ...createCustomFocusIndicatorStyle({
42
+ border: 'none',
43
+ outline: 'none',
44
+ boxShadow: `inset 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorStrokeFocus2}, inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorStrokeFocus1}`
45
+ }),
46
+ // High contrast styles
47
+ '@media (forced-colors: active)': {
48
+ forcedColorAdjust: 'none',
49
+ ':hover': {
50
+ boxShadow: `inset 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorBrandStroke2Hover}, inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorStrokeFocus1}`
51
+ },
52
+ ':hover:active': {
53
+ boxShadow: `inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorBrandStroke2Pressed}, inset 0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorStrokeFocus1}`
54
+ }
55
+ }
56
+ });
57
+ const useStyles = makeStyles({
58
+ disabled: {
59
+ ':hover': {
60
+ cursor: 'not-allowed',
61
+ boxShadow: 'none'
62
+ },
63
+ '@media (forced-colors: active)': {
64
+ ':hover': {
65
+ boxShadow: 'none'
66
+ }
67
+ }
68
+ },
69
+ selected: {
70
+ border: 'none',
71
+ boxShadow: `inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorBrandStroke1}, inset 0 0 0 5px ${tokens.colorStrokeFocus1}`,
72
+ ':hover': {
73
+ boxShadow: `inset 0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorCompoundBrandStrokeHover}, inset 0 0 0 6px ${tokens.colorStrokeFocus1}`
74
+ },
75
+ ':hover:active': {
76
+ boxShadow: `inset 0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorCompoundBrandStrokePressed}, inset 0 0 0 7px ${tokens.colorStrokeFocus1}`
77
+ },
78
+ ...createCustomFocusIndicatorStyle({
79
+ boxShadow: `inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorStrokeFocus2}, inset 0 0 0 5px ${tokens.colorStrokeFocus1}`
80
+ }),
81
+ '@media (forced-colors: active)': {
82
+ boxShadow: `inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorBrandStroke2Pressed}, inset 0 0 0 5px ${tokens.colorStrokeFocus1}`
83
+ }
84
+ },
85
+ selectedSmall: {
86
+ boxShadow: `inset 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorBrandStroke1}, inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorStrokeFocus1}`,
87
+ ':hover': {
88
+ boxShadow: `inset 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorCompoundBrandStrokeHover}, inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorStrokeFocus1}`
89
+ },
90
+ ':hover:active': {
91
+ boxShadow: `inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorCompoundBrandStrokePressed}, inset 0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorStrokeFocus1}`
92
+ }
93
+ }
94
+ });
95
+ const useSizeStyles = makeStyles({
96
+ 'extra-small': {
97
+ width: '20px',
98
+ height: '20px',
99
+ ':hover': {
100
+ boxShadow: `inset 0 0 0 ${tokens.strokeWidthThin} ${tokens.colorBrandStroke1}, inset 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorStrokeFocus1}`
101
+ },
102
+ ':hover:active': {
103
+ border: 'none',
104
+ boxShadow: `inset 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorCompoundBrandStrokePressed}, inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorStrokeFocus1}`
105
+ }
106
+ },
107
+ small: {
108
+ width: '24px',
109
+ height: '24px',
110
+ ':hover:active': {
111
+ border: 'none',
112
+ boxShadow: `inset 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorCompoundBrandStrokePressed}, inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorStrokeFocus1}`
113
+ }
114
+ },
115
+ medium: {
116
+ width: '28px',
117
+ height: '28px'
118
+ },
119
+ large: {
120
+ width: '32px',
121
+ height: '32px'
122
+ }
123
+ });
124
+ const useShapeStyles = makeStyles({
125
+ rounded: {
126
+ borderRadius: tokens.borderRadiusMedium,
127
+ ...createCustomFocusIndicatorStyle({
128
+ borderRadius: tokens.borderRadiusMedium
129
+ })
130
+ },
131
+ circular: {
132
+ borderRadius: tokens.borderRadiusCircular,
133
+ ...createCustomFocusIndicatorStyle({
134
+ borderRadius: tokens.borderRadiusCircular
135
+ })
136
+ },
137
+ square: {
138
+ borderRadius: tokens.borderRadiusNone,
139
+ ...createCustomFocusIndicatorStyle({
140
+ borderRadius: tokens.borderRadiusNone
141
+ })
142
+ }
143
+ });
144
+ const useIconStyles = makeStyles({
145
+ disabledIcon: {
146
+ color: tokens.colorNeutralForegroundInverted,
147
+ filter: 'drop-shadow(0 1px 1px rgb(0 0 0 / 1))'
148
+ },
149
+ icon: {
150
+ position: 'absolute',
151
+ display: 'flex',
152
+ alignSelf: 'center'
153
+ },
154
+ 'extra-small': {
155
+ fontSize: '16px'
156
+ },
157
+ small: {
158
+ fontSize: '16px'
159
+ },
160
+ medium: {
161
+ fontSize: '20px'
162
+ },
163
+ large: {
164
+ fontSize: '24px'
165
+ }
166
+ });
167
+ /**
168
+ * Apply styling to the ColorSwatch slots based on the state
169
+ */ export const useColorSwatchStyles_unstable = (state)=>{
170
+ 'use no memo';
171
+ const { size = 'medium', shape = 'square' } = state;
172
+ const resetStyles = useResetStyles();
173
+ const styles = useStyles();
174
+ const sizeStyles = useSizeStyles();
175
+ const shapeStyles = useShapeStyles();
176
+ const iconStyles = useIconStyles();
177
+ const smallerSelectedStyles = size === 'small' || size === 'extra-small' ? styles.selectedSmall : '';
178
+ state.root.className = mergeClasses(colorSwatchClassNames.root, resetStyles, sizeStyles[size], shapeStyles[shape], state.selected && styles.selected, state.selected && smallerSelectedStyles, state.disabled && styles.disabled, state.root.className);
179
+ if (state.disabled && state.disabledIcon) {
180
+ state.disabledIcon.className = mergeClasses(iconStyles.icon, iconStyles[size], iconStyles.disabledIcon, state.disabledIcon.className);
181
+ }
182
+ if (state.icon) {
183
+ state.icon.className = mergeClasses(iconStyles.icon, iconStyles[size], state.icon.className);
184
+ }
185
+ return state;
186
+ };
package/lib/components/ColorSwatch/useColorSwatchStyles.styles.raw.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/ColorSwatch/useColorSwatchStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { ColorSwatchSlots, ColorSwatchState } from './ColorSwatch.types';\nimport { tokens } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\n\nexport const colorSwatchClassNames: SlotClassNames<ColorSwatchSlots> = {\n root: 'fui-ColorSwatch',\n icon: 'fui-ColorSwatch__icon',\n disabledIcon: 'fui-ColorSwatch__disabledIcon',\n};\n\nexport const swatchCSSVars = {\n color: `--fui-SwatchPicker--color`,\n borderColor: `--fui-SwatchPicker--borderColor`,\n};\n\nconst { color, borderColor } = swatchCSSVars;\n\n/**\n * Styles for the root slot\n */\nconst 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\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 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 selectedSmall: {\n boxShadow: `inset 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorBrandStroke1}, inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorStrokeFocus1}`,\n ':hover': {\n boxShadow: `inset 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorCompoundBrandStrokeHover}, inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorStrokeFocus1}`,\n },\n ':hover:active': {\n boxShadow: `inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorCompoundBrandStrokePressed}, inset 0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorStrokeFocus1}`,\n },\n },\n});\n\nconst useSizeStyles = makeStyles({\n 'extra-small': {\n width: '20px',\n height: '20px',\n ':hover': {\n boxShadow: `inset 0 0 0 ${tokens.strokeWidthThin} ${tokens.colorBrandStroke1}, inset 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorStrokeFocus1}`,\n },\n ':hover:active': {\n border: 'none',\n boxShadow: `inset 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorCompoundBrandStrokePressed}, inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorStrokeFocus1}`,\n },\n },\n small: {\n width: '24px',\n height: '24px',\n ':hover:active': {\n border: 'none',\n boxShadow: `inset 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorCompoundBrandStrokePressed}, inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorStrokeFocus1}`,\n },\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\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/**\n * Apply styling to the ColorSwatch slots based on the state\n */\nexport const useColorSwatchStyles_unstable = (state: ColorSwatchState): ColorSwatchState => {\n 'use no memo';\n\n const { size = 'medium', shape = 'square' } = state;\n\n const resetStyles = useResetStyles();\n const styles = useStyles();\n const sizeStyles = useSizeStyles();\n const shapeStyles = useShapeStyles();\n const iconStyles = useIconStyles();\n const smallerSelectedStyles = size === 'small' || size === 'extra-small' ? styles.selectedSmall : '';\n\n state.root.className = mergeClasses(\n colorSwatchClassNames.root,\n resetStyles,\n sizeStyles[size],\n shapeStyles[shape],\n state.selected && styles.selected,\n state.selected && smallerSelectedStyles,\n state.disabled && styles.disabled,\n state.root.className,\n );\n\n if (state.disabled && state.disabledIcon) {\n state.disabledIcon.className = mergeClasses(\n iconStyles.icon,\n iconStyles[size],\n iconStyles.disabledIcon,\n state.disabledIcon.className,\n );\n }\n\n if (state.icon) {\n state.icon.className = mergeClasses(iconStyles.icon, iconStyles[size], state.icon.className);\n }\n\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","createCustomFocusIndicatorStyle","colorSwatchClassNames","root","icon","disabledIcon","swatchCSSVars","color","borderColor","useResetStyles","display","flexShrink","alignItems","justifyContent","boxSizing","border","background","overflow","padding","cursor","boxShadow","strokeWidthThick","colorBrandStroke1","strokeWidthThicker","colorStrokeFocus1","colorCompoundBrandStrokePressed","strokeWidthThickest","outline","colorStrokeFocus2","forcedColorAdjust","colorBrandStroke2Hover","colorBrandStroke2Pressed","useStyles","disabled","selected","colorCompoundBrandStrokeHover","selectedSmall","useSizeStyles","width","height","strokeWidthThin","small","medium","large","useShapeStyles","rounded","borderRadius","borderRadiusMedium","circular","borderRadiusCircular","square","borderRadiusNone","useIconStyles","colorNeutralForegroundInverted","filter","position","alignSelf","fontSize","useColorSwatchStyles_unstable","state","size","shape","resetStyles","styles","sizeStyles","shapeStyles","iconStyles","smallerSelectedStyles","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
package/lib/components/EmptySwatch/useEmptySwatchStyles.styles.raw.js ADDED
@@ -0,0 +1,63 @@
1
+ import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';
2
+ import { tokens } from '@fluentui/react-theme';
3
+ import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
4
+ export const emptySwatchClassNames = {
5
+ root: 'fui-EmptySwatch'
6
+ };
7
+ /**
8
+ * Styles for the root slot
9
+ */ const useStyles = makeResetStyles({
10
+ backgroundColor: tokens.colorTransparentBackground,
11
+ border: `1px dashed ${tokens.colorNeutralForeground4}`
12
+ });
13
+ const useSizeStyles = makeStyles({
14
+ 'extra-small': {
15
+ width: '20px',
16
+ height: '20px'
17
+ },
18
+ small: {
19
+ width: '24px',
20
+ height: '24px'
21
+ },
22
+ medium: {
23
+ width: '28px',
24
+ height: '28px'
25
+ },
26
+ large: {
27
+ width: '32px',
28
+ height: '32px'
29
+ }
30
+ });
31
+ const useShapeStyles = makeStyles({
32
+ rounded: {
33
+ borderRadius: tokens.borderRadiusMedium,
34
+ ...createCustomFocusIndicatorStyle({
35
+ borderRadius: tokens.borderRadiusMedium
36
+ })
37
+ },
38
+ circular: {
39
+ borderRadius: tokens.borderRadiusCircular,
40
+ ...createCustomFocusIndicatorStyle({
41
+ borderRadius: tokens.borderRadiusCircular
42
+ })
43
+ },
44
+ square: {
45
+ borderRadius: tokens.borderRadiusNone,
46
+ ...createCustomFocusIndicatorStyle({
47
+ borderRadius: tokens.borderRadiusNone
48
+ })
49
+ }
50
+ });
51
+ /**
52
+ * Apply styling to the EmptySwatch slots based on the state
53
+ */ export const useEmptySwatchStyles_unstable = (state)=>{
54
+ 'use no memo';
55
+ const styles = useStyles();
56
+ const sizeStyles = useSizeStyles();
57
+ const shapeStyles = useShapeStyles();
58
+ var _state_size;
59
+ const size = (_state_size = state.size) !== null && _state_size !== void 0 ? _state_size : 'medium';
60
+ var _state_shape;
61
+ 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);
62
+ return state;
63
+ };
package/lib/components/EmptySwatch/useEmptySwatchStyles.styles.raw.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/EmptySwatch/useEmptySwatchStyles.styles.ts"],"sourcesContent":["import { 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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG3E,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,+BAA+B,QAAQ,0BAA0B;AAE1E,OAAO,MAAMC,wBAA0D;IACrEC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYP,gBAAgB;IAChCQ,iBAAiBL,OAAOM,0BAA0B;IAClDC,QAAQ,CAAC,WAAW,EAAEP,OAAOQ,uBAAuB,CAAC,CAAC;AACxD;AAEA,MAAMC,gBAAgBX,WAAW;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,iBAAiBjB,WAAW;IAChCkB,SAAS;QACPC,cAAcjB,OAAOkB,kBAAkB;QACvC,GAAGjB,gCAAgC;YAAEgB,cAAcjB,OAAOkB,kBAAkB;QAAC,EAAE;IACjF;IACAC,UAAU;QACRF,cAAcjB,OAAOoB,oBAAoB;QACzC,GAAGnB,gCAAgC;YAAEgB,cAAcjB,OAAOoB,oBAAoB;QAAC,EAAE;IACnF;IACAC,QAAQ;QACNJ,cAAcjB,OAAOsB,gBAAgB;QACrC,GAAGrB,gCAAgC;YAAEgB,cAAcjB,OAAOsB,gBAAgB;QAAC,EAAE;IAC/E;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAACC;IAC5C;IAEA,MAAMC,SAASrB;IACf,MAAMsB,aAAajB;IACnB,MAAMkB,cAAcZ;QAEPS;IAAb,MAAMI,OAAOJ,CAAAA,cAAAA,MAAMI,IAAI,cAAVJ,yBAAAA,cAAc;QAMbA;IAJdA,MAAMrB,IAAI,CAAC0B,SAAS,GAAG9B,aACrBG,sBAAsBC,IAAI,EAC1BsB,QACAC,UAAU,CAACE,KAAK,EAChBD,WAAW,CAACH,CAAAA,eAAAA,MAAMM,KAAK,cAAXN,0BAAAA,eAAe,SAAS,EACpCA,MAAMrB,IAAI,CAAC0B,SAAS;IAGtB,OAAOL;AACT,EAAE"}
package/lib/components/ImageSwatch/useImageSwatchStyles.styles.raw.js ADDED
@@ -0,0 +1,114 @@
1
+ import { makeStyles, mergeClasses, makeResetStyles } from '@griffel/react';
2
+ import { tokens } from '@fluentui/react-theme';
3
+ import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
4
+ export const imageSwatchClassNames = {
5
+ root: 'fui-ImageSwatch'
6
+ };
7
+ /**
8
+ * Styles for the root slot
9
+ */ const useStyles = makeResetStyles({
10
+ display: 'inline-flex',
11
+ boxSizing: 'border-box',
12
+ border: `1px solid ${tokens.colorTransparentStroke}`,
13
+ backgroundSize: 'cover',
14
+ backgroundRepeat: 'no-repeat',
15
+ padding: '0',
16
+ ':hover': {
17
+ cursor: 'pointer',
18
+ border: 'none',
19
+ boxShadow: `inset 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorBrandStroke1}, inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorStrokeFocus1}`
20
+ },
21
+ ':hover:active': {
22
+ border: 'none',
23
+ boxShadow: `inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorCompoundBrandStrokePressed}, inset 0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorStrokeFocus1}`
24
+ },
25
+ ':focus': {
26
+ outline: 'none'
27
+ },
28
+ ':focus-visible': {
29
+ outline: 'none'
30
+ },
31
+ ...createCustomFocusIndicatorStyle({
32
+ border: 'none',
33
+ outline: 'none',
34
+ boxShadow: `inset 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorStrokeFocus2}, inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorStrokeFocus1}`
35
+ }),
36
+ // High contrast styles
37
+ '@media (forced-colors: active)': {
38
+ forcedColorAdjust: 'none',
39
+ ':hover': {
40
+ boxShadow: `inset 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorBrandStroke2Hover}, inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorStrokeFocus1}`
41
+ },
42
+ ':hover:active': {
43
+ boxShadow: `inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorBrandStroke2Pressed}, inset 0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorStrokeFocus1}`
44
+ }
45
+ }
46
+ });
47
+ const useStylesSelected = makeStyles({
48
+ selected: {
49
+ border: 'none',
50
+ boxShadow: `inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorBrandStroke1}, inset 0 0 0 5px ${tokens.colorStrokeFocus1}`,
51
+ ':hover': {
52
+ boxShadow: `inset 0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorCompoundBrandStrokeHover}, inset 0 0 0 6px ${tokens.colorStrokeFocus1}`
53
+ },
54
+ ':hover:active': {
55
+ boxShadow: `inset 0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorCompoundBrandStrokePressed}, inset 0 0 0 7px ${tokens.colorStrokeFocus1}`
56
+ },
57
+ ...createCustomFocusIndicatorStyle({
58
+ boxShadow: `inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorStrokeFocus2}, inset 0 0 0 5px ${tokens.colorStrokeFocus1}`
59
+ }),
60
+ '@media (forced-colors: active)': {
61
+ boxShadow: `inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorBrandStroke2Pressed}, inset 0 0 0 5px ${tokens.colorStrokeFocus1}`
62
+ }
63
+ }
64
+ });
65
+ const useSizeStyles = makeStyles({
66
+ 'extra-small': {
67
+ width: '20px',
68
+ height: '20px'
69
+ },
70
+ small: {
71
+ width: '24px',
72
+ height: '24px'
73
+ },
74
+ medium: {
75
+ width: '28px',
76
+ height: '28px'
77
+ },
78
+ large: {
79
+ width: '32px',
80
+ height: '32px'
81
+ }
82
+ });
83
+ const useShapeStyles = makeStyles({
84
+ rounded: {
85
+ borderRadius: tokens.borderRadiusMedium,
86
+ ...createCustomFocusIndicatorStyle({
87
+ borderRadius: tokens.borderRadiusMedium
88
+ })
89
+ },
90
+ circular: {
91
+ borderRadius: tokens.borderRadiusCircular,
92
+ ...createCustomFocusIndicatorStyle({
93
+ borderRadius: tokens.borderRadiusCircular
94
+ })
95
+ },
96
+ square: {
97
+ borderRadius: tokens.borderRadiusNone,
98
+ ...createCustomFocusIndicatorStyle({
99
+ borderRadius: tokens.borderRadiusNone
100
+ })
101
+ }
102
+ });
103
+ /**
104
+ * Apply styling to the ImageSwatch slots based on the state
105
+ */ export const useImageSwatchStyles_unstable = (state)=>{
106
+ 'use no memo';
107
+ const styles = useStyles();
108
+ const selectedStyles = useStylesSelected();
109
+ const sizeStyles = useSizeStyles();
110
+ const shapeStyles = useShapeStyles();
111
+ const { size = 'medium', shape = 'square' } = state;
112
+ state.root.className = mergeClasses(imageSwatchClassNames.root, styles, sizeStyles[size], shapeStyles[shape], state.selected && selectedStyles.selected, state.root.className);
113
+ return state;
114
+ };
package/lib/components/ImageSwatch/useImageSwatchStyles.styles.raw.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/ImageSwatch/useImageSwatchStyles.styles.ts"],"sourcesContent":["import { 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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
package/lib/components/SwatchPicker/useSwatchPickerStyles.styles.raw.js ADDED
@@ -0,0 +1,35 @@
1
+ import { makeStyles, mergeClasses } from '@griffel/react';
2
+ import { tokens } from '@fluentui/react-theme';
3
+ export const swatchPickerClassNames = {
4
+ root: 'fui-SwatchPicker'
5
+ };
6
+ /**
7
+ * Styles for the root slot
8
+ */ const useStyles = makeStyles({
9
+ root: {
10
+ padding: `${tokens.spacingHorizontalNone} ${tokens.spacingVerticalNone}`,
11
+ display: 'flex'
12
+ },
13
+ row: {
14
+ flexDirection: 'row'
15
+ },
16
+ grid: {
17
+ flexDirection: 'column'
18
+ },
19
+ spacingSmall: {
20
+ gap: '2px'
21
+ },
22
+ spacingMedium: {
23
+ gap: '4px'
24
+ }
25
+ });
26
+ /**
27
+ * Apply styling to the SwatchPicker slots based on the state
28
+ */ export const useSwatchPickerStyles_unstable = (state)=>{
29
+ 'use no memo';
30
+ const styles = useStyles();
31
+ const layoutStyle = state.isGrid ? styles.grid : styles.row;
32
+ const spacingStyle = state.spacing === 'small' ? styles.spacingSmall : styles.spacingMedium;
33
+ state.root.className = mergeClasses(swatchPickerClassNames.root, styles.root, layoutStyle, spacingStyle, state.root.className);
34
+ return state;
35
+ };
package/lib/components/SwatchPicker/useSwatchPickerStyles.styles.raw.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/SwatchPicker/useSwatchPickerStyles.styles.ts"],"sourcesContent":["import { 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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG1D,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,OAAO,MAAMC,yBAA4D;IACvEC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYL,WAAW;IAC3BI,MAAM;QACJE,SAAS,CAAC,EAAEJ,OAAOK,qBAAqB,CAAC,CAAC,EAAEL,OAAOM,mBAAmB,CAAC,CAAC;QACxEC,SAAS;IACX;IACAC,KAAK;QACHC,eAAe;IACjB;IACAC,MAAM;QACJD,eAAe;IACjB;IACAE,cAAc;QAAEC,KAAK;IAAM;IAC3BC,eAAe;QAAED,KAAK;IAAM;AAC9B;AAEA;;CAEC,GACD,OAAO,MAAME,iCAAiC,CAACC;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,GAAGtB,aACrBE,uBAAuBC,IAAI,EAC3Bc,OAAOd,IAAI,EACXe,aACAE,cACAJ,MAAMb,IAAI,CAACmB,SAAS;IAGtB,OAAON;AACT,EAAE"}
package/lib/components/SwatchPickerRow/useSwatchPickerRowStyles.styles.raw.js ADDED
@@ -0,0 +1,28 @@
1
+ import { makeResetStyles, mergeClasses, makeStyles } from '@griffel/react';
2
+ export const swatchPickerRowClassNames = {
3
+ root: 'fui-SwatchPickerRow'
4
+ };
5
+ /**
6
+ * Styles for the root slot
7
+ */ const useResetStyles = makeResetStyles({
8
+ display: 'flex',
9
+ flexDirection: 'row'
10
+ });
11
+ const useStyles = makeStyles({
12
+ spacingSmall: {
13
+ columnGap: '2px'
14
+ },
15
+ spacingMedium: {
16
+ columnGap: '4px'
17
+ }
18
+ });
19
+ /**
20
+ * Apply styling to the SwatchPickerRow slots based on the state
21
+ */ export const useSwatchPickerRowStyles_unstable = (state)=>{
22
+ 'use no memo';
23
+ const resetStyles = useResetStyles();
24
+ const styles = useStyles();
25
+ const spacingStyle = state.spacing === 'small' ? styles.spacingSmall : styles.spacingMedium;
26
+ state.root.className = mergeClasses(swatchPickerRowClassNames.root, resetStyles, spacingStyle, state.root.className);
27
+ return state;
28
+ };
package/lib/components/SwatchPickerRow/useSwatchPickerRowStyles.styles.raw.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/SwatchPickerRow/useSwatchPickerRowStyles.styles.ts"],"sourcesContent":["import { 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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,eAAe,EAAEC,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AAI3E,OAAO,MAAMC,4BAAkE;IAC7EC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,iBAAiBL,gBAAgB;IACrCM,SAAS;IACTC,eAAe;AACjB;AAEA,MAAMC,YAAYN,WAAW;IAC3BO,cAAc;QACZC,WAAW;IACb;IACAC,eAAe;QACbD,WAAW;IACb;AACF;AAEA;;CAEC,GACD,OAAO,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,GAAGjB,aAAaE,0BAA0BC,IAAI,EAAEU,aAAaE,cAAcH,MAAMT,IAAI,CAACc,SAAS;IAEnH,OAAOL;AACT,EAAE"}
package/lib/utils/renderUtils.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/utils/renderUtils.tsx"],"sourcesContent":["import * as React from 'react';\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: JSX.Element[]; rowId: string | number }) => JSX.Element;\n renderSwatch?: (item: SwatchProps) => JSX.Element;\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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,WAAW,EAAEC,eAAe,EAAEC,WAAW,QAAQ,MAAM;AAYhE,OAAO,MAAMC,yBAAyB,CAACC;IACrC,MAAM,EAAEC,KAAK,EAAEC,WAAW,EAAEC,SAAS,EAAEC,YAAY,EAAE,GAAGJ;IACxD,MAAMK,aAAaF,aAAc,CAAA,CAAC,EAAEG,QAAQ,EAAEC,KAAK,EAAE,iBAAK,oBAACV;YAAgBW,KAAKD;WAAQD,SAA0B;IAClH,MAAMG,gBACJL,gBACC,CAAA,CAACM;YAEqC;eADrC,AAACA,KAA0BC,GAAG,iBAC5B,oBAACb;YAAYU,KAAKE,KAAKE,KAAK;YAAED,KAAK,CAAA,YAAA,AAACD,KAA0BC,GAAG,cAA9B,uBAAA,YAAkC;YAAK,GAAGD,IAAI;2BAEjF,oBAACd;YAAYY,KAAKE,KAAKE,KAAK;YAAEC,OAAOH,KAAKG,KAAK,IAAI;YAAK,GAAGH,IAAI;;IACjE,CAAA;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 { 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 // eslint-disable-next-line @typescript-eslint/no-deprecated\n renderRow?: (props: { children: JSX.Element[]; rowId: string | number }) => JSX.Element;\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n renderSwatch?: (item: SwatchProps) => JSX.Element;\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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,WAAW,EAAEC,eAAe,EAAEC,WAAW,QAAQ,MAAM;AAchE,OAAO,MAAMC,yBAAyB,CAACC;IACrC,MAAM,EAAEC,KAAK,EAAEC,WAAW,EAAEC,SAAS,EAAEC,YAAY,EAAE,GAAGJ;IACxD,MAAMK,aAAaF,aAAc,CAAA,CAAC,EAAEG,QAAQ,EAAEC,KAAK,EAAE,iBAAK,oBAACV;YAAgBW,KAAKD;WAAQD,SAA0B;IAClH,MAAMG,gBACJL,gBACC,CAAA,CAACM;YAEqC;eADrC,AAACA,KAA0BC,GAAG,iBAC5B,oBAACb;YAAYU,KAAKE,KAAKE,KAAK;YAAED,KAAK,CAAA,YAAA,AAACD,KAA0BC,GAAG,cAA9B,uBAAA,YAAkC;YAAK,GAAGD,IAAI;2BAEjF,oBAACd;YAAYY,KAAKE,KAAKE,KAAK;YAAEC,OAAOH,KAAKG,KAAK,IAAI;YAAK,GAAGH,IAAI;;IACjE,CAAA;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/lib-commonjs/components/ColorSwatch/useColorSwatchStyles.styles.raw.js ADDED
@@ -0,0 +1,205 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", {
3
+ value: true
4
+ });
5
+ function _export(target, all) {
6
+ for(var name in all)Object.defineProperty(target, name, {
7
+ enumerable: true,
8
+ get: all[name]
9
+ });
10
+ }
11
+ _export(exports, {
12
+ colorSwatchClassNames: function() {
13
+ return colorSwatchClassNames;
14
+ },
15
+ swatchCSSVars: function() {
16
+ return swatchCSSVars;
17
+ },
18
+ useColorSwatchStyles_unstable: function() {
19
+ return useColorSwatchStyles_unstable;
20
+ }
21
+ });
22
+ const _react = require("@griffel/react");
23
+ const _reacttheme = require("@fluentui/react-theme");
24
+ const _reacttabster = require("@fluentui/react-tabster");
25
+ const colorSwatchClassNames = {
26
+ root: 'fui-ColorSwatch',
27
+ icon: 'fui-ColorSwatch__icon',
28
+ disabledIcon: 'fui-ColorSwatch__disabledIcon'
29
+ };
30
+ const swatchCSSVars = {
31
+ color: `--fui-SwatchPicker--color`,
32
+ borderColor: `--fui-SwatchPicker--borderColor`
33
+ };
34
+ const { color, borderColor } = swatchCSSVars;
35
+ /**
36
+ * Styles for the root slot
37
+ */ const useResetStyles = (0, _react.makeResetStyles)({
38
+ display: 'inline-flex',
39
+ flexShrink: 0,
40
+ alignItems: 'center',
41
+ justifyContent: 'center',
42
+ boxSizing: 'border-box',
43
+ border: `1px solid var(${borderColor})`,
44
+ background: `var(${color})`,
45
+ overflow: 'hidden',
46
+ padding: '0',
47
+ ':hover': {
48
+ cursor: 'pointer',
49
+ border: 'none',
50
+ boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThick} ${_reacttheme.tokens.colorBrandStroke1}, inset 0 0 0 ${_reacttheme.tokens.strokeWidthThicker} ${_reacttheme.tokens.colorStrokeFocus1}`
51
+ },
52
+ ':hover:active': {
53
+ border: 'none',
54
+ boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThicker} ${_reacttheme.tokens.colorCompoundBrandStrokePressed}, inset 0 0 0 ${_reacttheme.tokens.strokeWidthThickest} ${_reacttheme.tokens.colorStrokeFocus1}`
55
+ },
56
+ ':focus': {
57
+ outline: 'none'
58
+ },
59
+ ':focus-visible': {
60
+ outline: 'none'
61
+ },
62
+ ...(0, _reacttabster.createCustomFocusIndicatorStyle)({
63
+ border: 'none',
64
+ outline: 'none',
65
+ boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThick} ${_reacttheme.tokens.colorStrokeFocus2}, inset 0 0 0 ${_reacttheme.tokens.strokeWidthThicker} ${_reacttheme.tokens.colorStrokeFocus1}`
66
+ }),
67
+ // High contrast styles
68
+ '@media (forced-colors: active)': {
69
+ forcedColorAdjust: 'none',
70
+ ':hover': {
71
+ boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThick} ${_reacttheme.tokens.colorBrandStroke2Hover}, inset 0 0 0 ${_reacttheme.tokens.strokeWidthThicker} ${_reacttheme.tokens.colorStrokeFocus1}`
72
+ },
73
+ ':hover:active': {
74
+ boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThicker} ${_reacttheme.tokens.colorBrandStroke2Pressed}, inset 0 0 0 ${_reacttheme.tokens.strokeWidthThickest} ${_reacttheme.tokens.colorStrokeFocus1}`
75
+ }
76
+ }
77
+ });
78
+ const useStyles = (0, _react.makeStyles)({
79
+ disabled: {
80
+ ':hover': {
81
+ cursor: 'not-allowed',
82
+ boxShadow: 'none'
83
+ },
84
+ '@media (forced-colors: active)': {
85
+ ':hover': {
86
+ boxShadow: 'none'
87
+ }
88
+ }
89
+ },
90
+ selected: {
91
+ border: 'none',
92
+ boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThicker} ${_reacttheme.tokens.colorBrandStroke1}, inset 0 0 0 5px ${_reacttheme.tokens.colorStrokeFocus1}`,
93
+ ':hover': {
94
+ boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThickest} ${_reacttheme.tokens.colorCompoundBrandStrokeHover}, inset 0 0 0 6px ${_reacttheme.tokens.colorStrokeFocus1}`
95
+ },
96
+ ':hover:active': {
97
+ boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThickest} ${_reacttheme.tokens.colorCompoundBrandStrokePressed}, inset 0 0 0 7px ${_reacttheme.tokens.colorStrokeFocus1}`
98
+ },
99
+ ...(0, _reacttabster.createCustomFocusIndicatorStyle)({
100
+ boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThicker} ${_reacttheme.tokens.colorStrokeFocus2}, inset 0 0 0 5px ${_reacttheme.tokens.colorStrokeFocus1}`
101
+ }),
102
+ '@media (forced-colors: active)': {
103
+ boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThicker} ${_reacttheme.tokens.colorBrandStroke2Pressed}, inset 0 0 0 5px ${_reacttheme.tokens.colorStrokeFocus1}`
104
+ }
105
+ },
106
+ selectedSmall: {
107
+ boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThick} ${_reacttheme.tokens.colorBrandStroke1}, inset 0 0 0 ${_reacttheme.tokens.strokeWidthThicker} ${_reacttheme.tokens.colorStrokeFocus1}`,
108
+ ':hover': {
109
+ boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThick} ${_reacttheme.tokens.colorCompoundBrandStrokeHover}, inset 0 0 0 ${_reacttheme.tokens.strokeWidthThicker} ${_reacttheme.tokens.colorStrokeFocus1}`
110
+ },
111
+ ':hover:active': {
112
+ boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThicker} ${_reacttheme.tokens.colorCompoundBrandStrokePressed}, inset 0 0 0 ${_reacttheme.tokens.strokeWidthThickest} ${_reacttheme.tokens.colorStrokeFocus1}`
113
+ }
114
+ }
115
+ });
116
+ const useSizeStyles = (0, _react.makeStyles)({
117
+ 'extra-small': {
118
+ width: '20px',
119
+ height: '20px',
120
+ ':hover': {
121
+ boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThin} ${_reacttheme.tokens.colorBrandStroke1}, inset 0 0 0 ${_reacttheme.tokens.strokeWidthThick} ${_reacttheme.tokens.colorStrokeFocus1}`
122
+ },
123
+ ':hover:active': {
124
+ border: 'none',
125
+ boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThick} ${_reacttheme.tokens.colorCompoundBrandStrokePressed}, inset 0 0 0 ${_reacttheme.tokens.strokeWidthThicker} ${_reacttheme.tokens.colorStrokeFocus1}`
126
+ }
127
+ },
128
+ small: {
129
+ width: '24px',
130
+ height: '24px',
131
+ ':hover:active': {
132
+ border: 'none',
133
+ boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThick} ${_reacttheme.tokens.colorCompoundBrandStrokePressed}, inset 0 0 0 ${_reacttheme.tokens.strokeWidthThicker} ${_reacttheme.tokens.colorStrokeFocus1}`
134
+ }
135
+ },
136
+ medium: {
137
+ width: '28px',
138
+ height: '28px'
139
+ },
140
+ large: {
141
+ width: '32px',
142
+ height: '32px'
143
+ }
144
+ });
145
+ const useShapeStyles = (0, _react.makeStyles)({
146
+ rounded: {
147
+ borderRadius: _reacttheme.tokens.borderRadiusMedium,
148
+ ...(0, _reacttabster.createCustomFocusIndicatorStyle)({
149
+ borderRadius: _reacttheme.tokens.borderRadiusMedium
150
+ })
151
+ },
152
+ circular: {
153
+ borderRadius: _reacttheme.tokens.borderRadiusCircular,
154
+ ...(0, _reacttabster.createCustomFocusIndicatorStyle)({
155
+ borderRadius: _reacttheme.tokens.borderRadiusCircular
156
+ })
157
+ },
158
+ square: {
159
+ borderRadius: _reacttheme.tokens.borderRadiusNone,
160
+ ...(0, _reacttabster.createCustomFocusIndicatorStyle)({
161
+ borderRadius: _reacttheme.tokens.borderRadiusNone
162
+ })
163
+ }
164
+ });
165
+ const useIconStyles = (0, _react.makeStyles)({
166
+ disabledIcon: {
167
+ color: _reacttheme.tokens.colorNeutralForegroundInverted,
168
+ filter: 'drop-shadow(0 1px 1px rgb(0 0 0 / 1))'
169
+ },
170
+ icon: {
171
+ position: 'absolute',
172
+ display: 'flex',
173
+ alignSelf: 'center'
174
+ },
175
+ 'extra-small': {
176
+ fontSize: '16px'
177
+ },
178
+ small: {
179
+ fontSize: '16px'
180
+ },
181
+ medium: {
182
+ fontSize: '20px'
183
+ },
184
+ large: {
185
+ fontSize: '24px'
186
+ }
187
+ });
188
+ const useColorSwatchStyles_unstable = (state)=>{
189
+ 'use no memo';
190
+ const { size = 'medium', shape = 'square' } = state;
191
+ const resetStyles = useResetStyles();
192
+ const styles = useStyles();
193
+ const sizeStyles = useSizeStyles();
194
+ const shapeStyles = useShapeStyles();
195
+ const iconStyles = useIconStyles();
196
+ const smallerSelectedStyles = size === 'small' || size === 'extra-small' ? styles.selectedSmall : '';
197
+ state.root.className = (0, _react.mergeClasses)(colorSwatchClassNames.root, resetStyles, sizeStyles[size], shapeStyles[shape], state.selected && styles.selected, state.selected && smallerSelectedStyles, state.disabled && styles.disabled, state.root.className);
198
+ if (state.disabled && state.disabledIcon) {
199
+ state.disabledIcon.className = (0, _react.mergeClasses)(iconStyles.icon, iconStyles[size], iconStyles.disabledIcon, state.disabledIcon.className);
200
+ }
201
+ if (state.icon) {
202
+ state.icon.className = (0, _react.mergeClasses)(iconStyles.icon, iconStyles[size], state.icon.className);
203
+ }
204
+ return state;
205
+ };
package/lib-commonjs/components/ColorSwatch/useColorSwatchStyles.styles.raw.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/ColorSwatch/useColorSwatchStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { ColorSwatchSlots, ColorSwatchState } from './ColorSwatch.types';\nimport { tokens } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\n\nexport const colorSwatchClassNames: SlotClassNames<ColorSwatchSlots> = {\n root: 'fui-ColorSwatch',\n icon: 'fui-ColorSwatch__icon',\n disabledIcon: 'fui-ColorSwatch__disabledIcon',\n};\n\nexport const swatchCSSVars = {\n color: `--fui-SwatchPicker--color`,\n borderColor: `--fui-SwatchPicker--borderColor`,\n};\n\nconst { color, borderColor } = swatchCSSVars;\n\n/**\n * Styles for the root slot\n */\nconst 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\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 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 selectedSmall: {\n boxShadow: `inset 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorBrandStroke1}, inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorStrokeFocus1}`,\n ':hover': {\n boxShadow: `inset 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorCompoundBrandStrokeHover}, inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorStrokeFocus1}`,\n },\n ':hover:active': {\n boxShadow: `inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorCompoundBrandStrokePressed}, inset 0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorStrokeFocus1}`,\n },\n },\n});\n\nconst useSizeStyles = makeStyles({\n 'extra-small': {\n width: '20px',\n height: '20px',\n ':hover': {\n boxShadow: `inset 0 0 0 ${tokens.strokeWidthThin} ${tokens.colorBrandStroke1}, inset 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorStrokeFocus1}`,\n },\n ':hover:active': {\n border: 'none',\n boxShadow: `inset 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorCompoundBrandStrokePressed}, inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorStrokeFocus1}`,\n },\n },\n small: {\n width: '24px',\n height: '24px',\n ':hover:active': {\n border: 'none',\n boxShadow: `inset 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorCompoundBrandStrokePressed}, inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorStrokeFocus1}`,\n },\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\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/**\n * Apply styling to the ColorSwatch slots based on the state\n */\nexport const useColorSwatchStyles_unstable = (state: ColorSwatchState): ColorSwatchState => {\n 'use no memo';\n\n const { size = 'medium', shape = 'square' } = state;\n\n const resetStyles = useResetStyles();\n const styles = useStyles();\n const sizeStyles = useSizeStyles();\n const shapeStyles = useShapeStyles();\n const iconStyles = useIconStyles();\n const smallerSelectedStyles = size === 'small' || size === 'extra-small' ? styles.selectedSmall : '';\n\n state.root.className = mergeClasses(\n colorSwatchClassNames.root,\n resetStyles,\n sizeStyles[size],\n shapeStyles[shape],\n state.selected && styles.selected,\n state.selected && smallerSelectedStyles,\n state.disabled && styles.disabled,\n state.root.className,\n );\n\n if (state.disabled && state.disabledIcon) {\n state.disabledIcon.className = mergeClasses(\n iconStyles.icon,\n iconStyles[size],\n iconStyles.disabledIcon,\n state.disabledIcon.className,\n );\n }\n\n if (state.icon) {\n state.icon.className = mergeClasses(iconStyles.icon, iconStyles[size], state.icon.className);\n }\n\n return state;\n};\n"],"names":["colorSwatchClassNames","swatchCSSVars","useColorSwatchStyles_unstable","root","icon","disabledIcon","color","borderColor","useResetStyles","makeResetStyles","display","flexShrink","alignItems","justifyContent","boxSizing","border","background","overflow","padding","cursor","boxShadow","tokens","strokeWidthThick","colorBrandStroke1","strokeWidthThicker","colorStrokeFocus1","colorCompoundBrandStrokePressed","strokeWidthThickest","outline","createCustomFocusIndicatorStyle","colorStrokeFocus2","forcedColorAdjust","colorBrandStroke2Hover","colorBrandStroke2Pressed","useStyles","makeStyles","disabled","selected","colorCompoundBrandStrokeHover","selectedSmall","useSizeStyles","width","height","strokeWidthThin","small","medium","large","useShapeStyles","rounded","borderRadius","borderRadiusMedium","circular","borderRadiusCircular","square","borderRadiusNone","useIconStyles","colorNeutralForegroundInverted","filter","position","alignSelf","fontSize","state","size","shape","resetStyles","styles","sizeStyles","shapeStyles","iconStyles","smallerSelectedStyles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
package/lib-commonjs/components/EmptySwatch/useEmptySwatchStyles.styles.raw.js ADDED
@@ -0,0 +1,79 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", {
3
+ value: true
4
+ });
5
+ function _export(target, all) {
6
+ for(var name in all)Object.defineProperty(target, name, {
7
+ enumerable: true,
8
+ get: all[name]
9
+ });
10
+ }
11
+ _export(exports, {
12
+ emptySwatchClassNames: function() {
13
+ return emptySwatchClassNames;
14
+ },
15
+ useEmptySwatchStyles_unstable: function() {
16
+ return useEmptySwatchStyles_unstable;
17
+ }
18
+ });
19
+ const _react = require("@griffel/react");
20
+ const _reacttheme = require("@fluentui/react-theme");
21
+ const _reacttabster = require("@fluentui/react-tabster");
22
+ const emptySwatchClassNames = {
23
+ root: 'fui-EmptySwatch'
24
+ };
25
+ /**
26
+ * Styles for the root slot
27
+ */ const useStyles = (0, _react.makeResetStyles)({
28
+ backgroundColor: _reacttheme.tokens.colorTransparentBackground,
29
+ border: `1px dashed ${_reacttheme.tokens.colorNeutralForeground4}`
30
+ });
31
+ const useSizeStyles = (0, _react.makeStyles)({
32
+ 'extra-small': {
33
+ width: '20px',
34
+ height: '20px'
35
+ },
36
+ small: {
37
+ width: '24px',
38
+ height: '24px'
39
+ },
40
+ medium: {
41
+ width: '28px',
42
+ height: '28px'
43
+ },
44
+ large: {
45
+ width: '32px',
46
+ height: '32px'
47
+ }
48
+ });
49
+ const useShapeStyles = (0, _react.makeStyles)({
50
+ rounded: {
51
+ borderRadius: _reacttheme.tokens.borderRadiusMedium,
52
+ ...(0, _reacttabster.createCustomFocusIndicatorStyle)({
53
+ borderRadius: _reacttheme.tokens.borderRadiusMedium
54
+ })
55
+ },
56
+ circular: {
57
+ borderRadius: _reacttheme.tokens.borderRadiusCircular,
58
+ ...(0, _reacttabster.createCustomFocusIndicatorStyle)({
59
+ borderRadius: _reacttheme.tokens.borderRadiusCircular
60
+ })
61
+ },
62
+ square: {
63
+ borderRadius: _reacttheme.tokens.borderRadiusNone,
64
+ ...(0, _reacttabster.createCustomFocusIndicatorStyle)({
65
+ borderRadius: _reacttheme.tokens.borderRadiusNone
66
+ })
67
+ }
68
+ });
69
+ const useEmptySwatchStyles_unstable = (state)=>{
70
+ 'use no memo';
71
+ const styles = useStyles();
72
+ const sizeStyles = useSizeStyles();
73
+ const shapeStyles = useShapeStyles();
74
+ var _state_size;
75
+ const size = (_state_size = state.size) !== null && _state_size !== void 0 ? _state_size : 'medium';
76
+ var _state_shape;
77
+ state.root.className = (0, _react.mergeClasses)(emptySwatchClassNames.root, styles, sizeStyles[size], shapeStyles[(_state_shape = state.shape) !== null && _state_shape !== void 0 ? _state_shape : 'square'], state.root.className);
78
+ return state;
79
+ };
package/lib-commonjs/components/EmptySwatch/useEmptySwatchStyles.styles.raw.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/EmptySwatch/useEmptySwatchStyles.styles.ts"],"sourcesContent":["import { 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":["emptySwatchClassNames","useEmptySwatchStyles_unstable","root","useStyles","makeResetStyles","backgroundColor","tokens","colorTransparentBackground","border","colorNeutralForeground4","useSizeStyles","makeStyles","width","height","small","medium","large","useShapeStyles","rounded","borderRadius","borderRadiusMedium","createCustomFocusIndicatorStyle","circular","borderRadiusCircular","square","borderRadiusNone","state","styles","sizeStyles","shapeStyles","size","className","mergeClasses","shape"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAMaA,qBAAAA;eAAAA;;IAiDAC,6BAAAA;eAAAA;;;uBAvD6C;4BAGnC;8BACyB;AAEzC,MAAMD,wBAA0D;IACrEE,MAAM;AACR;AAEA;;CAEC,GACD,MAAMC,YAAYC,IAAAA,sBAAAA,EAAgB;IAChCC,iBAAiBC,kBAAAA,CAAOC,0BAA0B;IAClDC,QAAQ,CAAC,WAAW,EAAEF,kBAAAA,CAAOG,uBAAuB,CAAC,CAAC;AACxD;AAEA,MAAMC,gBAAgBC,IAAAA,iBAAAA,EAAW;IAC/B,eAAe;QACbC,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,iBAAiBN,IAAAA,iBAAAA,EAAW;IAChCO,SAAS;QACPC,cAAcb,kBAAAA,CAAOc,kBAAkB;QACvC,GAAGC,IAAAA,6CAAAA,EAAgC;YAAEF,cAAcb,kBAAAA,CAAOc,kBAAkB;QAAC,EAAE;IACjF;IACAE,UAAU;QACRH,cAAcb,kBAAAA,CAAOiB,oBAAoB;QACzC,GAAGF,IAAAA,6CAAAA,EAAgC;YAAEF,cAAcb,kBAAAA,CAAOiB,oBAAoB;QAAC,EAAE;IACnF;IACAC,QAAQ;QACNL,cAAcb,kBAAAA,CAAOmB,gBAAgB;QACrC,GAAGJ,IAAAA,6CAAAA,EAAgC;YAAEF,cAAcb,kBAAAA,CAAOmB,gBAAgB;QAAC,EAAE;IAC/E;AACF;AAKO,MAAMxB,gCAAgC,CAACyB;IAC5C;IAEA,MAAMC,SAASxB;IACf,MAAMyB,aAAalB;IACnB,MAAMmB,cAAcZ;QAEPS;IAAb,MAAMI,OAAOJ,CAAAA,cAAAA,MAAMI,IAAI,AAAJA,MAAI,QAAVJ,gBAAAA,KAAAA,IAAAA,cAAc;QAMbA;IAJdA,MAAMxB,IAAI,CAAC6B,SAAS,GAAGC,IAAAA,mBAAAA,EACrBhC,sBAAsBE,IAAI,EAC1ByB,QACAC,UAAU,CAACE,KAAK,EAChBD,WAAW,CAACH,CAAAA,eAAAA,MAAMO,KAAK,AAALA,MAAK,QAAXP,iBAAAA,KAAAA,IAAAA,eAAe,SAAS,EACpCA,MAAMxB,IAAI,CAAC6B,SAAS;IAGtB,OAAOL;AACT"}
package/lib-commonjs/components/ImageSwatch/useImageSwatchStyles.styles.raw.js ADDED
@@ -0,0 +1,130 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", {
3
+ value: true
4
+ });
5
+ function _export(target, all) {
6
+ for(var name in all)Object.defineProperty(target, name, {
7
+ enumerable: true,
8
+ get: all[name]
9
+ });
10
+ }
11
+ _export(exports, {
12
+ imageSwatchClassNames: function() {
13
+ return imageSwatchClassNames;
14
+ },
15
+ useImageSwatchStyles_unstable: function() {
16
+ return useImageSwatchStyles_unstable;
17
+ }
18
+ });
19
+ const _react = require("@griffel/react");
20
+ const _reacttheme = require("@fluentui/react-theme");
21
+ const _reacttabster = require("@fluentui/react-tabster");
22
+ const imageSwatchClassNames = {
23
+ root: 'fui-ImageSwatch'
24
+ };
25
+ /**
26
+ * Styles for the root slot
27
+ */ const useStyles = (0, _react.makeResetStyles)({
28
+ display: 'inline-flex',
29
+ boxSizing: 'border-box',
30
+ border: `1px solid ${_reacttheme.tokens.colorTransparentStroke}`,
31
+ backgroundSize: 'cover',
32
+ backgroundRepeat: 'no-repeat',
33
+ padding: '0',
34
+ ':hover': {
35
+ cursor: 'pointer',
36
+ border: 'none',
37
+ boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThick} ${_reacttheme.tokens.colorBrandStroke1}, inset 0 0 0 ${_reacttheme.tokens.strokeWidthThicker} ${_reacttheme.tokens.colorStrokeFocus1}`
38
+ },
39
+ ':hover:active': {
40
+ border: 'none',
41
+ boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThicker} ${_reacttheme.tokens.colorCompoundBrandStrokePressed}, inset 0 0 0 ${_reacttheme.tokens.strokeWidthThickest} ${_reacttheme.tokens.colorStrokeFocus1}`
42
+ },
43
+ ':focus': {
44
+ outline: 'none'
45
+ },
46
+ ':focus-visible': {
47
+ outline: 'none'
48
+ },
49
+ ...(0, _reacttabster.createCustomFocusIndicatorStyle)({
50
+ border: 'none',
51
+ outline: 'none',
52
+ boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThick} ${_reacttheme.tokens.colorStrokeFocus2}, inset 0 0 0 ${_reacttheme.tokens.strokeWidthThicker} ${_reacttheme.tokens.colorStrokeFocus1}`
53
+ }),
54
+ // High contrast styles
55
+ '@media (forced-colors: active)': {
56
+ forcedColorAdjust: 'none',
57
+ ':hover': {
58
+ boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThick} ${_reacttheme.tokens.colorBrandStroke2Hover}, inset 0 0 0 ${_reacttheme.tokens.strokeWidthThicker} ${_reacttheme.tokens.colorStrokeFocus1}`
59
+ },
60
+ ':hover:active': {
61
+ boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThicker} ${_reacttheme.tokens.colorBrandStroke2Pressed}, inset 0 0 0 ${_reacttheme.tokens.strokeWidthThickest} ${_reacttheme.tokens.colorStrokeFocus1}`
62
+ }
63
+ }
64
+ });
65
+ const useStylesSelected = (0, _react.makeStyles)({
66
+ selected: {
67
+ border: 'none',
68
+ boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThicker} ${_reacttheme.tokens.colorBrandStroke1}, inset 0 0 0 5px ${_reacttheme.tokens.colorStrokeFocus1}`,
69
+ ':hover': {
70
+ boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThickest} ${_reacttheme.tokens.colorCompoundBrandStrokeHover}, inset 0 0 0 6px ${_reacttheme.tokens.colorStrokeFocus1}`
71
+ },
72
+ ':hover:active': {
73
+ boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThickest} ${_reacttheme.tokens.colorCompoundBrandStrokePressed}, inset 0 0 0 7px ${_reacttheme.tokens.colorStrokeFocus1}`
74
+ },
75
+ ...(0, _reacttabster.createCustomFocusIndicatorStyle)({
76
+ boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThicker} ${_reacttheme.tokens.colorStrokeFocus2}, inset 0 0 0 5px ${_reacttheme.tokens.colorStrokeFocus1}`
77
+ }),
78
+ '@media (forced-colors: active)': {
79
+ boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThicker} ${_reacttheme.tokens.colorBrandStroke2Pressed}, inset 0 0 0 5px ${_reacttheme.tokens.colorStrokeFocus1}`
80
+ }
81
+ }
82
+ });
83
+ const useSizeStyles = (0, _react.makeStyles)({
84
+ 'extra-small': {
85
+ width: '20px',
86
+ height: '20px'
87
+ },
88
+ small: {
89
+ width: '24px',
90
+ height: '24px'
91
+ },
92
+ medium: {
93
+ width: '28px',
94
+ height: '28px'
95
+ },
96
+ large: {
97
+ width: '32px',
98
+ height: '32px'
99
+ }
100
+ });
101
+ const useShapeStyles = (0, _react.makeStyles)({
102
+ rounded: {
103
+ borderRadius: _reacttheme.tokens.borderRadiusMedium,
104
+ ...(0, _reacttabster.createCustomFocusIndicatorStyle)({
105
+ borderRadius: _reacttheme.tokens.borderRadiusMedium
106
+ })
107
+ },
108
+ circular: {
109
+ borderRadius: _reacttheme.tokens.borderRadiusCircular,
110
+ ...(0, _reacttabster.createCustomFocusIndicatorStyle)({
111
+ borderRadius: _reacttheme.tokens.borderRadiusCircular
112
+ })
113
+ },
114
+ square: {
115
+ borderRadius: _reacttheme.tokens.borderRadiusNone,
116
+ ...(0, _reacttabster.createCustomFocusIndicatorStyle)({
117
+ borderRadius: _reacttheme.tokens.borderRadiusNone
118
+ })
119
+ }
120
+ });
121
+ const useImageSwatchStyles_unstable = (state)=>{
122
+ 'use no memo';
123
+ const styles = useStyles();
124
+ const selectedStyles = useStylesSelected();
125
+ const sizeStyles = useSizeStyles();
126
+ const shapeStyles = useShapeStyles();
127
+ const { size = 'medium', shape = 'square' } = state;
128
+ state.root.className = (0, _react.mergeClasses)(imageSwatchClassNames.root, styles, sizeStyles[size], shapeStyles[shape], state.selected && selectedStyles.selected, state.root.className);
129
+ return state;
130
+ };
package/lib-commonjs/components/ImageSwatch/useImageSwatchStyles.styles.raw.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/ImageSwatch/useImageSwatchStyles.styles.ts"],"sourcesContent":["import { 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":["imageSwatchClassNames","useImageSwatchStyles_unstable","root","useStyles","makeResetStyles","display","boxSizing","border","tokens","colorTransparentStroke","backgroundSize","backgroundRepeat","padding","cursor","boxShadow","strokeWidthThick","colorBrandStroke1","strokeWidthThicker","colorStrokeFocus1","colorCompoundBrandStrokePressed","strokeWidthThickest","outline","createCustomFocusIndicatorStyle","colorStrokeFocus2","forcedColorAdjust","colorBrandStroke2Hover","colorBrandStroke2Pressed","useStylesSelected","makeStyles","selected","colorCompoundBrandStrokeHover","useSizeStyles","width","height","small","medium","large","useShapeStyles","rounded","borderRadius","borderRadiusMedium","circular","borderRadiusCircular","square","borderRadiusNone","state","styles","selectedStyles","sizeStyles","shapeStyles","size","shape","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
package/lib-commonjs/components/SwatchPicker/useSwatchPickerStyles.styles.raw.js ADDED
@@ -0,0 +1,51 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", {
3
+ value: true
4
+ });
5
+ function _export(target, all) {
6
+ for(var name in all)Object.defineProperty(target, name, {
7
+ enumerable: true,
8
+ get: all[name]
9
+ });
10
+ }
11
+ _export(exports, {
12
+ swatchPickerClassNames: function() {
13
+ return swatchPickerClassNames;
14
+ },
15
+ useSwatchPickerStyles_unstable: function() {
16
+ return useSwatchPickerStyles_unstable;
17
+ }
18
+ });
19
+ const _react = require("@griffel/react");
20
+ const _reacttheme = require("@fluentui/react-theme");
21
+ const swatchPickerClassNames = {
22
+ root: 'fui-SwatchPicker'
23
+ };
24
+ /**
25
+ * Styles for the root slot
26
+ */ const useStyles = (0, _react.makeStyles)({
27
+ root: {
28
+ padding: `${_reacttheme.tokens.spacingHorizontalNone} ${_reacttheme.tokens.spacingVerticalNone}`,
29
+ display: 'flex'
30
+ },
31
+ row: {
32
+ flexDirection: 'row'
33
+ },
34
+ grid: {
35
+ flexDirection: 'column'
36
+ },
37
+ spacingSmall: {
38
+ gap: '2px'
39
+ },
40
+ spacingMedium: {
41
+ gap: '4px'
42
+ }
43
+ });
44
+ const useSwatchPickerStyles_unstable = (state)=>{
45
+ 'use no memo';
46
+ const styles = useStyles();
47
+ const layoutStyle = state.isGrid ? styles.grid : styles.row;
48
+ const spacingStyle = state.spacing === 'small' ? styles.spacingSmall : styles.spacingMedium;
49
+ state.root.className = (0, _react.mergeClasses)(swatchPickerClassNames.root, styles.root, layoutStyle, spacingStyle, state.root.className);
50
+ return state;
51
+ };
package/lib-commonjs/components/SwatchPicker/useSwatchPickerStyles.styles.raw.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/SwatchPicker/useSwatchPickerStyles.styles.ts"],"sourcesContent":["import { 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":["swatchPickerClassNames","useSwatchPickerStyles_unstable","root","useStyles","makeStyles","padding","tokens","spacingHorizontalNone","spacingVerticalNone","display","row","flexDirection","grid","spacingSmall","gap","spacingMedium","state","styles","layoutStyle","isGrid","spacingStyle","spacing","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAIaA,sBAAAA;eAAAA;;IAyBAC,8BAAAA;eAAAA;;;uBA7B4B;4BAGlB;AAChB,MAAMD,yBAA4D;IACvEE,MAAM;AACR;AAEA;;CAEC,GACD,MAAMC,YAAYC,IAAAA,iBAAAA,EAAW;IAC3BF,MAAM;QACJG,SAAS,CAAC,EAAEC,kBAAAA,CAAOC,qBAAqB,CAAC,CAAC,EAAED,kBAAAA,CAAOE,mBAAmB,CAAC,CAAC;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,MAAMb,iCAAiC,CAACe;IAC7C;IAEA,MAAMC,SAASd;IACf,MAAMe,cAAcF,MAAMG,MAAM,GAAGF,OAAOL,IAAI,GAAGK,OAAOP,GAAG;IAE3D,MAAMU,eAAeJ,MAAMK,OAAO,KAAK,UAAUJ,OAAOJ,YAAY,GAAGI,OAAOF,aAAa;IAC3FC,MAAMd,IAAI,CAACoB,SAAS,GAAGC,IAAAA,mBAAAA,EACrBvB,uBAAuBE,IAAI,EAC3Be,OAAOf,IAAI,EACXgB,aACAE,cACAJ,MAAMd,IAAI,CAACoB,SAAS;IAGtB,OAAON;AACT"}
package/lib-commonjs/components/SwatchPickerRow/useSwatchPickerRowStyles.styles.raw.js ADDED
@@ -0,0 +1,44 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", {
3
+ value: true
4
+ });
5
+ function _export(target, all) {
6
+ for(var name in all)Object.defineProperty(target, name, {
7
+ enumerable: true,
8
+ get: all[name]
9
+ });
10
+ }
11
+ _export(exports, {
12
+ swatchPickerRowClassNames: function() {
13
+ return swatchPickerRowClassNames;
14
+ },
15
+ useSwatchPickerRowStyles_unstable: function() {
16
+ return useSwatchPickerRowStyles_unstable;
17
+ }
18
+ });
19
+ const _react = require("@griffel/react");
20
+ const swatchPickerRowClassNames = {
21
+ root: 'fui-SwatchPickerRow'
22
+ };
23
+ /**
24
+ * Styles for the root slot
25
+ */ const useResetStyles = (0, _react.makeResetStyles)({
26
+ display: 'flex',
27
+ flexDirection: 'row'
28
+ });
29
+ const useStyles = (0, _react.makeStyles)({
30
+ spacingSmall: {
31
+ columnGap: '2px'
32
+ },
33
+ spacingMedium: {
34
+ columnGap: '4px'
35
+ }
36
+ });
37
+ const useSwatchPickerRowStyles_unstable = (state)=>{
38
+ 'use no memo';
39
+ const resetStyles = useResetStyles();
40
+ const styles = useStyles();
41
+ const spacingStyle = state.spacing === 'small' ? styles.spacingSmall : styles.spacingMedium;
42
+ state.root.className = (0, _react.mergeClasses)(swatchPickerRowClassNames.root, resetStyles, spacingStyle, state.root.className);
43
+ return state;
44
+ };
package/lib-commonjs/components/SwatchPickerRow/useSwatchPickerRowStyles.styles.raw.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/SwatchPickerRow/useSwatchPickerRowStyles.styles.ts"],"sourcesContent":["import { 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":["swatchPickerRowClassNames","useSwatchPickerRowStyles_unstable","root","useResetStyles","makeResetStyles","display","flexDirection","useStyles","makeStyles","spacingSmall","columnGap","spacingMedium","state","resetStyles","styles","spacingStyle","spacing","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAIaA,yBAAAA;eAAAA;;IAwBAC,iCAAAA;eAAAA;;;uBA5B6C;AAInD,MAAMD,4BAAkE;IAC7EE,MAAM;AACR;AAEA;;CAEC,GACD,MAAMC,iBAAiBC,IAAAA,sBAAAA,EAAgB;IACrCC,SAAS;IACTC,eAAe;AACjB;AAEA,MAAMC,YAAYC,IAAAA,iBAAAA,EAAW;IAC3BC,cAAc;QACZC,WAAW;IACb;IACAC,eAAe;QACbD,WAAW;IACb;AACF;AAKO,MAAMT,oCAAoC,CAACW;IAChD;IAEA,MAAMC,cAAcV;IACpB,MAAMW,SAASP;IACf,MAAMQ,eAAeH,MAAMI,OAAO,KAAK,UAAUF,OAAOL,YAAY,GAAGK,OAAOH,aAAa;IAE3FC,MAAMV,IAAI,CAACe,SAAS,GAAGC,IAAAA,mBAAAA,EAAalB,0BAA0BE,IAAI,EAAEW,aAAaE,cAAcH,MAAMV,IAAI,CAACe,SAAS;IAEnH,OAAOL;AACT"}
package/lib-commonjs/utils/renderUtils.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/utils/renderUtils.tsx"],"sourcesContent":["import * as React from 'react';\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: JSX.Element[]; rowId: string | number }) => JSX.Element;\n renderSwatch?: (item: SwatchProps) => JSX.Element;\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":["renderSwatchPickerGrid","props","items","columnCount","renderRow","renderSwatch","_renderRow","children","rowId","React","createElement","SwatchPickerRow","key","_renderSwatch","item","_item_src","src","ImageSwatch","value","ColorSwatch","color","rowCount","Math","ceil","length","rows","Array","from","_","i","start","end","slice","map","row","index"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAaaA;;;eAAAA;;;;iEAbU;kBACmC;AAYnD,MAAMA,yBAAyB,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,GAAKC,OAAAC,aAAA,CAACC,iBAAAA,EAAAA;YAAgBC,KAAKJ;WAAQD,SAAAA;IACxF,MAAMM,gBACJR,gBACC,CAAA,CAACS;YAEqCC;eADrCD,KAA2BE,GAAG,GAAA,WAAA,GAC5BP,OAAAC,aAAA,CAACO,aAAAA,EAAAA;YAAYL,KAAKE,KAAKI,KAAK;YAAEF,KAAK,AAAAD,CAAAA,YAAAD,KAA2BE,GAAG,AAAHA,MAAG,QAA9BD,cAAA,KAAA,IAAAA,YAAkC;YAAK,GAAGD,IAAI;2BAEjFL,OAAAC,aAAA,CAACS,aAAAA,EAAAA;YAAYP,KAAKE,KAAKI,KAAK;YAAEE,OAAON,KAAKM,KAAK,IAAI;YAAK,GAAGN,IAAI;;IACjE,CAAA;IAEJ,MAAMO,WAAWC,KAAKC,IAAI,CAACrB,MAAMsB,MAAM,GAAGrB;IAC1C,MAAMsB,OAAOC,MAAMC,IAAI,CAAC;QAAEH,QAAQH;IAAS,GAAG,CAACO,GAAGC;QAChD,MAAMC,QAAQD,IAAI1B;QAClB,MAAM4B,MAAMD,QAAQ3B;QACpB,OAAOD,MAAM8B,KAAK,CAACF,OAAOC;IAC5B;IAEA,OAAON,KAAKQ,GAAG,CAAC,CAACC,KAAKC,QAAU7B,WAAW;YAAEC,UAAU2B,IAAID,GAAG,CAACpB;YAAgBL,OAAO2B;QAAM;AAC9F"}
1
+ {"version":3,"sources":["../src/utils/renderUtils.tsx"],"sourcesContent":["import * as React from 'react';\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 // eslint-disable-next-line @typescript-eslint/no-deprecated\n renderRow?: (props: { children: JSX.Element[]; rowId: string | number }) => JSX.Element;\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n renderSwatch?: (item: SwatchProps) => JSX.Element;\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":["renderSwatchPickerGrid","props","items","columnCount","renderRow","renderSwatch","_renderRow","children","rowId","React","createElement","SwatchPickerRow","key","_renderSwatch","item","_item_src","src","ImageSwatch","value","ColorSwatch","color","rowCount","Math","ceil","length","rows","Array","from","_","i","start","end","slice","map","row","index"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAeaA;;;eAAAA;;;;iEAfU;kBACmC;AAcnD,MAAMA,yBAAyB,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,GAAKC,OAAAC,aAAA,CAACC,iBAAAA,EAAAA;YAAgBC,KAAKJ;WAAQD,SAAAA;IACxF,MAAMM,gBACJR,gBACC,CAAA,CAACS;YAEqCC;eADrCD,KAA2BE,GAAG,GAAA,WAAA,GAC5BP,OAAAC,aAAA,CAACO,aAAAA,EAAAA;YAAYL,KAAKE,KAAKI,KAAK;YAAEF,KAAK,AAAAD,CAAAA,YAAAD,KAA2BE,GAAG,AAAHA,MAAG,QAA9BD,cAAA,KAAA,IAAAA,YAAkC;YAAK,GAAGD,IAAI;2BAEjFL,OAAAC,aAAA,CAACS,aAAAA,EAAAA;YAAYP,KAAKE,KAAKI,KAAK;YAAEE,OAAON,KAAKM,KAAK,IAAI;YAAK,GAAGN,IAAI;;IACjE,CAAA;IAEJ,MAAMO,WAAWC,KAAKC,IAAI,CAACrB,MAAMsB,MAAM,GAAGrB;IAC1C,MAAMsB,OAAOC,MAAMC,IAAI,CAAC;QAAEH,QAAQH;IAAS,GAAG,CAACO,GAAGC;QAChD,MAAMC,QAAQD,IAAI1B;QAClB,MAAM4B,MAAMD,QAAQ3B;QACpB,OAAOD,MAAM8B,KAAK,CAACF,OAAOC;IAC5B;IAEA,OAAON,KAAKQ,GAAG,CAAC,CAACC,KAAKC,QAAU7B,WAAW;YAAEC,UAAU2B,IAAID,GAAG,CAACpB;YAAgBL,OAAO2B;QAAM;AAC9F"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-swatch-picker",
3
- "version": "9.3.7",
3
+ "version": "9.4.0",
4
4
  "description": "New fluentui react package",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -21,11 +21,11 @@
21
21
  },
22
22
  "dependencies": {
23
23
  "@fluentui/react-context-selector": "^9.2.2",
24
- "@fluentui/react-field": "^9.3.7",
24
+ "@fluentui/react-field": "^9.4.0",
25
25
  "@fluentui/react-icons": "^2.0.245",
26
26
  "@fluentui/react-jsx-runtime": "^9.1.2",
27
27
  "@fluentui/react-shared-contexts": "^9.24.0",
28
- "@fluentui/react-tabster": "^9.25.3",
28
+ "@fluentui/react-tabster": "^9.26.0",
29
29
  "@fluentui/react-theme": "^9.1.24",
30
30
  "@fluentui/react-utilities": "^9.22.0",
31
31
  "@griffel/react": "^1.5.22",