@fluentui/react-color-picker 9.2.16 → 9.2.18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +31 -6
- package/lib/components/AlphaSlider/useAlphaSliderState.js +3 -1
- package/lib/components/AlphaSlider/useAlphaSliderState.js.map +1 -1
- package/lib/components/AlphaSlider/useAlphaSliderStyles.styles.js +5 -2
- package/lib/components/AlphaSlider/useAlphaSliderStyles.styles.js.map +1 -1
- package/lib/components/AlphaSlider/useAlphaSliderStyles.styles.raw.js +5 -1
- package/lib/components/AlphaSlider/useAlphaSliderStyles.styles.raw.js.map +1 -1
- package/lib/components/ColorArea/useColorAreaStyles.styles.js +4 -2
- package/lib/components/ColorArea/useColorAreaStyles.styles.js.map +1 -1
- package/lib/components/ColorArea/useColorAreaStyles.styles.raw.js +4 -1
- package/lib/components/ColorArea/useColorAreaStyles.styles.raw.js.map +1 -1
- package/lib/components/ColorPicker/useColorPickerStyles.styles.js +1 -2
- package/lib/components/ColorPicker/useColorPickerStyles.styles.js.map +1 -1
- package/lib/components/ColorPicker/useColorPickerStyles.styles.raw.js +1 -1
- package/lib/components/ColorPicker/useColorPickerStyles.styles.raw.js.map +1 -1
- package/lib/components/ColorSlider/useColorSlider.js +1 -1
- package/lib/components/ColorSlider/useColorSlider.js.map +1 -1
- package/lib/components/ColorSlider/useColorSliderStyles.styles.js +5 -3
- package/lib/components/ColorSlider/useColorSliderStyles.styles.js.map +1 -1
- package/lib/components/ColorSlider/useColorSliderStyles.styles.raw.js +4 -1
- package/lib/components/ColorSlider/useColorSliderStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/AlphaSlider/useAlphaSliderState.js +3 -1
- package/lib-commonjs/components/AlphaSlider/useAlphaSliderState.js.map +1 -1
- package/lib-commonjs/components/AlphaSlider/useAlphaSliderStyles.styles.js +5 -1
- package/lib-commonjs/components/AlphaSlider/useAlphaSliderStyles.styles.js.map +1 -1
- package/lib-commonjs/components/AlphaSlider/useAlphaSliderStyles.styles.raw.js +5 -1
- package/lib-commonjs/components/AlphaSlider/useAlphaSliderStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/ColorArea/useColorAreaStyles.styles.js +4 -1
- package/lib-commonjs/components/ColorArea/useColorAreaStyles.styles.js.map +1 -1
- package/lib-commonjs/components/ColorArea/useColorAreaStyles.styles.raw.js +4 -1
- package/lib-commonjs/components/ColorArea/useColorAreaStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/ColorPicker/useColorPickerStyles.styles.js +1 -1
- package/lib-commonjs/components/ColorPicker/useColorPickerStyles.styles.js.map +1 -1
- package/lib-commonjs/components/ColorPicker/useColorPickerStyles.styles.raw.js +1 -1
- package/lib-commonjs/components/ColorPicker/useColorPickerStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/ColorSlider/useColorSlider.js +1 -1
- package/lib-commonjs/components/ColorSlider/useColorSlider.js.map +1 -1
- package/lib-commonjs/components/ColorSlider/useColorSliderStyles.styles.js +4 -1
- package/lib-commonjs/components/ColorSlider/useColorSliderStyles.styles.js.map +1 -1
- package/lib-commonjs/components/ColorSlider/useColorSliderStyles.styles.raw.js +4 -1
- package/lib-commonjs/components/ColorSlider/useColorSliderStyles.styles.raw.js.map +1 -1
- package/package.json +5 -5
package/CHANGELOG.md
CHANGED
|
@@ -1,21 +1,46 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-color-picker
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Wed, 24 Jun 2026 11:03:29 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.2.18](https://github.com/microsoft/fluentui/tree/@fluentui/react-color-picker_v9.2.18)
|
|
8
|
+
|
|
9
|
+
Wed, 24 Jun 2026 11:03:29 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-color-picker_v9.2.17..@fluentui/react-color-picker_v9.2.18)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- fix: remove redundant use no memo directives, and add justification to valid ones ([PR #36224](https://github.com/microsoft/fluentui/pull/36224) by martinhochel@microsoft.com)
|
|
15
|
+
- Bump @fluentui/react-context-selector to v9.2.18 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
|
|
16
|
+
- Bump @fluentui/react-jsx-runtime to v9.4.4 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
|
|
17
|
+
- Bump @fluentui/react-tabster to v9.26.16 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
|
|
18
|
+
- Bump @fluentui/react-utilities to v9.26.5 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
|
|
19
|
+
|
|
20
|
+
## [9.2.17](https://github.com/microsoft/fluentui/tree/@fluentui/react-color-picker_v9.2.17)
|
|
21
|
+
|
|
22
|
+
Tue, 26 May 2026 09:39:51 GMT
|
|
23
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-color-picker_v9.2.16..@fluentui/react-color-picker_v9.2.17)
|
|
24
|
+
|
|
25
|
+
### Patches
|
|
26
|
+
|
|
27
|
+
- Bump @fluentui/react-context-selector to v9.2.17 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
|
|
28
|
+
- Bump @fluentui/react-jsx-runtime to v9.4.3 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
|
|
29
|
+
- Bump @fluentui/react-tabster to v9.26.15 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
|
|
30
|
+
- Bump @fluentui/react-utilities to v9.26.4 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
|
|
31
|
+
|
|
7
32
|
## [9.2.16](https://github.com/microsoft/fluentui/tree/@fluentui/react-color-picker_v9.2.16)
|
|
8
33
|
|
|
9
|
-
Thu, 23 Apr 2026
|
|
34
|
+
Thu, 23 Apr 2026 14:21:04 GMT
|
|
10
35
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-color-picker_v9.2.15..@fluentui/react-color-picker_v9.2.16)
|
|
11
36
|
|
|
12
37
|
### Patches
|
|
13
38
|
|
|
14
39
|
- perf: memoize context values in use*ContextValues hooks ([PR #36008](https://github.com/microsoft/fluentui/pull/36008) by olfedias@microsoft.com)
|
|
15
|
-
- Bump @fluentui/react-context-selector to v9.2.16 ([PR #
|
|
16
|
-
- Bump @fluentui/react-jsx-runtime to v9.4.2 ([PR #
|
|
17
|
-
- Bump @fluentui/react-tabster to v9.26.14 ([PR #
|
|
18
|
-
- Bump @fluentui/react-utilities to v9.26.3 ([PR #
|
|
40
|
+
- Bump @fluentui/react-context-selector to v9.2.16 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
|
|
41
|
+
- Bump @fluentui/react-jsx-runtime to v9.4.2 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
|
|
42
|
+
- Bump @fluentui/react-tabster to v9.26.14 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
|
|
43
|
+
- Bump @fluentui/react-utilities to v9.26.3 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
|
|
19
44
|
|
|
20
45
|
## [9.2.15](https://github.com/microsoft/fluentui/tree/@fluentui/react-color-picker_v9.2.15)
|
|
21
46
|
|
|
@@ -9,7 +9,6 @@ import { getPercent } from '../../utils/getPercent';
|
|
|
9
9
|
import { adjustToTransparency, calculateTransparencyValue, getSliderDirection } from './alphaSliderUtils';
|
|
10
10
|
import { createHsvColor } from '../../utils/createHsvColor';
|
|
11
11
|
export const useAlphaSliderState_unstable = (state, props)=>{
|
|
12
|
-
'use no memo';
|
|
13
12
|
var _props_defaultColor;
|
|
14
13
|
const { dir } = useFluent();
|
|
15
14
|
const onChangeFromContext = useColorPickerContextValue_unstable((ctx)=>ctx.requestChange);
|
|
@@ -47,12 +46,15 @@ export const useAlphaSliderState_unstable = (state, props)=>{
|
|
|
47
46
|
[alphaSliderCSSVars.railColorVar]: `hsl(${hslColor.h} ${hslColor.s * 100}%, ${hslColor.l * 100}%)`
|
|
48
47
|
};
|
|
49
48
|
// Root props
|
|
49
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
50
50
|
state.root.style = {
|
|
51
51
|
...rootVariables,
|
|
52
52
|
...state.root.style
|
|
53
53
|
};
|
|
54
54
|
// Input Props
|
|
55
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
55
56
|
state.input.value = clampedValue;
|
|
57
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
56
58
|
state.input.onChange = _onChange;
|
|
57
59
|
return state;
|
|
58
60
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/AlphaSlider/useAlphaSliderState.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { tinycolor } from '@ctrl/tinycolor';\nimport { clamp, useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { alphaSliderCSSVars } from './useAlphaSliderStyles.styles';\nimport type { AlphaSliderState, AlphaSliderProps } from './AlphaSlider.types';\nimport { useColorPickerContextValue_unstable } from '../../contexts/colorPicker';\nimport { MIN, MAX } from '../../utils/constants';\nimport { getPercent } from '../../utils/getPercent';\nimport { adjustToTransparency, calculateTransparencyValue, getSliderDirection } from './alphaSliderUtils';\nimport { createHsvColor } from '../../utils/createHsvColor';\n\nexport const useAlphaSliderState_unstable = (state: AlphaSliderState, props: AlphaSliderProps): AlphaSliderState => {\n
|
|
1
|
+
{"version":3,"sources":["../src/components/AlphaSlider/useAlphaSliderState.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { tinycolor } from '@ctrl/tinycolor';\nimport { clamp, useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { alphaSliderCSSVars } from './useAlphaSliderStyles.styles';\nimport type { AlphaSliderState, AlphaSliderProps } from './AlphaSlider.types';\nimport { useColorPickerContextValue_unstable } from '../../contexts/colorPicker';\nimport { MIN, MAX } from '../../utils/constants';\nimport { getPercent } from '../../utils/getPercent';\nimport { adjustToTransparency, calculateTransparencyValue, getSliderDirection } from './alphaSliderUtils';\nimport { createHsvColor } from '../../utils/createHsvColor';\n\nexport const useAlphaSliderState_unstable = (state: AlphaSliderState, props: AlphaSliderProps): AlphaSliderState => {\n const { dir } = useFluent();\n const onChangeFromContext = useColorPickerContextValue_unstable(ctx => ctx.requestChange);\n const colorFromContext = useColorPickerContextValue_unstable(ctx => ctx.color);\n const { color, onChange = onChangeFromContext, transparency = false, vertical = false } = props;\n const hsvColor = color || colorFromContext;\n const hslColor = tinycolor(hsvColor).toHsl();\n\n const [currentValue, setCurrentValue] = useControllableState({\n defaultState: calculateTransparencyValue(transparency, props.defaultColor?.a),\n state: calculateTransparencyValue(transparency, hsvColor?.a),\n initialState: adjustToTransparency(100, transparency),\n });\n\n const clampedValue = clamp(currentValue, MIN, MAX);\n const valuePercent = getPercent(clampedValue, MIN, MAX);\n\n const inputOnChange = state.input.onChange;\n\n const _onChange: React.ChangeEventHandler<HTMLInputElement> = useEventCallback(event => {\n const newValue = adjustToTransparency(Number(event.target.value), transparency);\n const newColor = createHsvColor({ ...hsvColor, a: newValue / 100 });\n setCurrentValue(newValue);\n inputOnChange?.(event);\n onChange?.(event, { type: 'change', event, color: newColor });\n });\n\n const sliderDirection = getSliderDirection(dir, vertical, transparency);\n\n const rootVariables = {\n [alphaSliderCSSVars.sliderDirectionVar]: sliderDirection,\n [alphaSliderCSSVars.sliderProgressVar]: `${valuePercent}%`,\n [alphaSliderCSSVars.thumbColorVar]: `hsla(${hslColor.h} ${hslColor.s * 100}%, ${hslColor.l * 100}%, ${hslColor.a})`,\n [alphaSliderCSSVars.railColorVar]: `hsl(${hslColor.h} ${hslColor.s * 100}%, ${hslColor.l * 100}%)`,\n };\n\n // Root props\n // eslint-disable-next-line react-hooks/immutability\n state.root.style = {\n ...rootVariables,\n ...state.root.style,\n };\n\n // Input Props\n // eslint-disable-next-line react-hooks/immutability\n state.input.value = clampedValue;\n // eslint-disable-next-line react-hooks/immutability\n state.input.onChange = _onChange;\n\n return state;\n};\n"],"names":["tinycolor","clamp","useControllableState","useEventCallback","useFluent_unstable","useFluent","alphaSliderCSSVars","useColorPickerContextValue_unstable","MIN","MAX","getPercent","adjustToTransparency","calculateTransparencyValue","getSliderDirection","createHsvColor","useAlphaSliderState_unstable","state","props","dir","onChangeFromContext","ctx","requestChange","colorFromContext","color","onChange","transparency","vertical","hsvColor","hslColor","toHsl","currentValue","setCurrentValue","defaultState","defaultColor","a","initialState","clampedValue","valuePercent","inputOnChange","input","_onChange","event","newValue","Number","target","value","newColor","type","sliderDirection","rootVariables","sliderDirectionVar","sliderProgressVar","thumbColorVar","h","s","l","railColorVar","root","style"],"mappings":"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"}
|
|
@@ -68,14 +68,17 @@ const useThumbStyles = /*#__PURE__*/__styles({
|
|
|
68
68
|
* Apply styling to the AlphaSlider slots based on the state
|
|
69
69
|
*/
|
|
70
70
|
export const useAlphaSliderStyles_unstable = state => {
|
|
71
|
-
'use no memo';
|
|
72
|
-
|
|
73
71
|
const styles = useStyles();
|
|
74
72
|
const thumbStyles = useThumbStyles();
|
|
73
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
75
74
|
state.root.className = mergeClasses(alphaSliderClassNames.root, state.root.className);
|
|
75
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
76
76
|
state.input.className = mergeClasses(alphaSliderClassNames.input, state.input.className);
|
|
77
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
77
78
|
state.rail.className = mergeClasses(alphaSliderClassNames.rail, styles.rail, state.rail.className);
|
|
79
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
78
80
|
state.thumb.className = mergeClasses(alphaSliderClassNames.thumb, thumbStyles.thumb, state.vertical ? thumbStyles.vertical : thumbStyles.horizontal, state.thumb.className);
|
|
81
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
79
82
|
state.thumb.className = mergeClasses(alphaSliderClassNames.thumb, thumbStyles.thumb, state.vertical ? thumbStyles.vertical : thumbStyles.horizontal, state.thumb.className);
|
|
80
83
|
useColorSliderStyles_unstable(state);
|
|
81
84
|
return state;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__styles","mergeClasses","tokens","useColorSliderStyles_unstable","TRANSPARENT_IMAGE_URL","alphaSliderClassNames","root","rail","thumb","input","alphaSliderCSSVars","sliderDirectionVar","sliderProgressVar","thumbColorVar","railColorVar","useStyles","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","Bcmaq0h","d","p","useThumbStyles","De3pzq","cmx5o7","horizontal","Bz10aip","oyh7mz","vertical","B5kzvoi","useAlphaSliderStyles_unstable","state","styles","thumbStyles","className"],"sources":["useAlphaSliderStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useColorSliderStyles_unstable } from '../ColorSlider/useColorSliderStyles.styles';\nconst TRANSPARENT_IMAGE_URL = 'https://fabricweb.azureedge.net/fabric-website/assets/images/transparent-pattern.png';\nexport const alphaSliderClassNames = {\n root: 'fui-AlphaSlider',\n rail: 'fui-AlphaSlider__rail',\n thumb: 'fui-AlphaSlider__thumb',\n input: 'fui-AlphaSlider__input'\n};\nexport const alphaSliderCSSVars = {\n sliderDirectionVar: `--fui-AlphaSlider--direction`,\n sliderProgressVar: `--fui-AlphaSlider--progress`,\n thumbColorVar: `--fui-AlphaSlider__thumb--color`,\n railColorVar: `--fui-AlphaSlider__rail--color`\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n rail: {\n border: `1px solid ${tokens.colorNeutralStroke1}`,\n backgroundImage: `linear-gradient(var(${alphaSliderCSSVars.sliderDirectionVar}), transparent, var(${alphaSliderCSSVars.railColorVar})), url(${TRANSPARENT_IMAGE_URL})`\n }\n});\n/**\n * Styles for the thumb slot\n */ const useThumbStyles = makeStyles({\n thumb: {\n backgroundColor: tokens.colorNeutralBackground1,\n '::before': {\n backgroundColor: `var(${alphaSliderCSSVars.thumbColorVar})`\n }\n },\n horizontal: {\n transform: 'translateX(-50%)',\n left: `var(${alphaSliderCSSVars.sliderProgressVar})`\n },\n vertical: {\n transform: 'translateY(50%)',\n bottom: `var(${alphaSliderCSSVars.sliderProgressVar})`\n }\n});\n/**\n * Apply styling to the AlphaSlider slots based on the state\n */ export const useAlphaSliderStyles_unstable = (state)=>{\n
|
|
1
|
+
{"version":3,"names":["__styles","mergeClasses","tokens","useColorSliderStyles_unstable","TRANSPARENT_IMAGE_URL","alphaSliderClassNames","root","rail","thumb","input","alphaSliderCSSVars","sliderDirectionVar","sliderProgressVar","thumbColorVar","railColorVar","useStyles","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","Bcmaq0h","d","p","useThumbStyles","De3pzq","cmx5o7","horizontal","Bz10aip","oyh7mz","vertical","B5kzvoi","useAlphaSliderStyles_unstable","state","styles","thumbStyles","className"],"sources":["useAlphaSliderStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useColorSliderStyles_unstable } from '../ColorSlider/useColorSliderStyles.styles';\nconst TRANSPARENT_IMAGE_URL = 'https://fabricweb.azureedge.net/fabric-website/assets/images/transparent-pattern.png';\nexport const alphaSliderClassNames = {\n root: 'fui-AlphaSlider',\n rail: 'fui-AlphaSlider__rail',\n thumb: 'fui-AlphaSlider__thumb',\n input: 'fui-AlphaSlider__input'\n};\nexport const alphaSliderCSSVars = {\n sliderDirectionVar: `--fui-AlphaSlider--direction`,\n sliderProgressVar: `--fui-AlphaSlider--progress`,\n thumbColorVar: `--fui-AlphaSlider__thumb--color`,\n railColorVar: `--fui-AlphaSlider__rail--color`\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n rail: {\n border: `1px solid ${tokens.colorNeutralStroke1}`,\n backgroundImage: `linear-gradient(var(${alphaSliderCSSVars.sliderDirectionVar}), transparent, var(${alphaSliderCSSVars.railColorVar})), url(${TRANSPARENT_IMAGE_URL})`\n }\n});\n/**\n * Styles for the thumb slot\n */ const useThumbStyles = makeStyles({\n thumb: {\n backgroundColor: tokens.colorNeutralBackground1,\n '::before': {\n backgroundColor: `var(${alphaSliderCSSVars.thumbColorVar})`\n }\n },\n horizontal: {\n transform: 'translateX(-50%)',\n left: `var(${alphaSliderCSSVars.sliderProgressVar})`\n },\n vertical: {\n transform: 'translateY(50%)',\n bottom: `var(${alphaSliderCSSVars.sliderProgressVar})`\n }\n});\n/**\n * Apply styling to the AlphaSlider slots based on the state\n */ export const useAlphaSliderStyles_unstable = (state)=>{\n const styles = useStyles();\n const thumbStyles = useThumbStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(alphaSliderClassNames.root, state.root.className);\n // eslint-disable-next-line react-hooks/immutability\n state.input.className = mergeClasses(alphaSliderClassNames.input, state.input.className);\n // eslint-disable-next-line react-hooks/immutability\n state.rail.className = mergeClasses(alphaSliderClassNames.rail, styles.rail, state.rail.className);\n // eslint-disable-next-line react-hooks/immutability\n state.thumb.className = mergeClasses(alphaSliderClassNames.thumb, thumbStyles.thumb, state.vertical ? thumbStyles.vertical : thumbStyles.horizontal, state.thumb.className);\n // eslint-disable-next-line react-hooks/immutability\n state.thumb.className = mergeClasses(alphaSliderClassNames.thumb, thumbStyles.thumb, state.vertical ? thumbStyles.vertical : thumbStyles.horizontal, state.thumb.className);\n useColorSliderStyles_unstable(state);\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,6BAA6B,QAAQ,4CAA4C;AAC1F,MAAMC,qBAAqB,GAAG,sFAAsF;AACpH,OAAO,MAAMC,qBAAqB,GAAG;EACjCC,IAAI,EAAE,iBAAiB;EACvBC,IAAI,EAAE,uBAAuB;EAC7BC,KAAK,EAAE,wBAAwB;EAC/BC,KAAK,EAAE;AACX,CAAC;AACD,OAAO,MAAMC,kBAAkB,GAAG;EAC9BC,kBAAkB,EAAE,8BAA8B;EAClDC,iBAAiB,EAAE,6BAA6B;EAChDC,aAAa,EAAE,iCAAiC;EAChDC,YAAY,EAAE;AAClB,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGf,QAAA;EAAAO,IAAA;IAAAS,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;AAAA,CAKrB,CAAC;AACF;AACA;AACA;AAAI,MAAMC,cAAc,gBAAGpC,QAAA;EAAAQ,KAAA;IAAA6B,MAAA;IAAAC,MAAA;EAAA;EAAAC,UAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,QAAA;IAAAF,OAAA;IAAAG,OAAA;EAAA;AAAA;EAAAT,CAAA;AAAA,CAe1B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMU,6BAA6B,GAAIC,KAAK,IAAG;EACtD,MAAMC,MAAM,GAAG/B,SAAS,CAAC,CAAC;EAC1B,MAAMgC,WAAW,GAAGX,cAAc,CAAC,CAAC;EACpC;EACAS,KAAK,CAACvC,IAAI,CAAC0C,SAAS,GAAG/C,YAAY,CAACI,qBAAqB,CAACC,IAAI,EAAEuC,KAAK,CAACvC,IAAI,CAAC0C,SAAS,CAAC;EACrF;EACAH,KAAK,CAACpC,KAAK,CAACuC,SAAS,GAAG/C,YAAY,CAACI,qBAAqB,CAACI,KAAK,EAAEoC,KAAK,CAACpC,KAAK,CAACuC,SAAS,CAAC;EACxF;EACAH,KAAK,CAACtC,IAAI,CAACyC,SAAS,GAAG/C,YAAY,CAACI,qBAAqB,CAACE,IAAI,EAAEuC,MAAM,CAACvC,IAAI,EAAEsC,KAAK,CAACtC,IAAI,CAACyC,SAAS,CAAC;EAClG;EACAH,KAAK,CAACrC,KAAK,CAACwC,SAAS,GAAG/C,YAAY,CAACI,qBAAqB,CAACG,KAAK,EAAEuC,WAAW,CAACvC,KAAK,EAAEqC,KAAK,CAACH,QAAQ,GAAGK,WAAW,CAACL,QAAQ,GAAGK,WAAW,CAACR,UAAU,EAAEM,KAAK,CAACrC,KAAK,CAACwC,SAAS,CAAC;EAC3K;EACAH,KAAK,CAACrC,KAAK,CAACwC,SAAS,GAAG/C,YAAY,CAACI,qBAAqB,CAACG,KAAK,EAAEuC,WAAW,CAACvC,KAAK,EAAEqC,KAAK,CAACH,QAAQ,GAAGK,WAAW,CAACL,QAAQ,GAAGK,WAAW,CAACR,UAAU,EAAEM,KAAK,CAACrC,KAAK,CAACwC,SAAS,CAAC;EAC3K7C,6BAA6B,CAAC0C,KAAK,CAAC;EACpC,OAAOA,KAAK;AAChB,CAAC","ignoreList":[]}
|
|
@@ -44,13 +44,17 @@ export const alphaSliderCSSVars = {
|
|
|
44
44
|
/**
|
|
45
45
|
* Apply styling to the AlphaSlider slots based on the state
|
|
46
46
|
*/ export const useAlphaSliderStyles_unstable = (state)=>{
|
|
47
|
-
'use no memo';
|
|
48
47
|
const styles = useStyles();
|
|
49
48
|
const thumbStyles = useThumbStyles();
|
|
49
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
50
50
|
state.root.className = mergeClasses(alphaSliderClassNames.root, state.root.className);
|
|
51
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
51
52
|
state.input.className = mergeClasses(alphaSliderClassNames.input, state.input.className);
|
|
53
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
52
54
|
state.rail.className = mergeClasses(alphaSliderClassNames.rail, styles.rail, state.rail.className);
|
|
55
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
53
56
|
state.thumb.className = mergeClasses(alphaSliderClassNames.thumb, thumbStyles.thumb, state.vertical ? thumbStyles.vertical : thumbStyles.horizontal, state.thumb.className);
|
|
57
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
54
58
|
state.thumb.className = mergeClasses(alphaSliderClassNames.thumb, thumbStyles.thumb, state.vertical ? thumbStyles.vertical : thumbStyles.horizontal, state.thumb.className);
|
|
55
59
|
useColorSliderStyles_unstable(state);
|
|
56
60
|
return state;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/AlphaSlider/useAlphaSliderStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { useColorSliderStyles_unstable } from '../ColorSlider/useColorSliderStyles.styles';\nimport type { AlphaSliderSlots, AlphaSliderState } from './AlphaSlider.types';\n\nconst TRANSPARENT_IMAGE_URL = 'https://fabricweb.azureedge.net/fabric-website/assets/images/transparent-pattern.png';\n\nexport const alphaSliderClassNames: SlotClassNames<AlphaSliderSlots> = {\n root: 'fui-AlphaSlider',\n rail: 'fui-AlphaSlider__rail',\n thumb: 'fui-AlphaSlider__thumb',\n input: 'fui-AlphaSlider__input',\n};\n\nexport const alphaSliderCSSVars = {\n sliderDirectionVar: `--fui-AlphaSlider--direction`,\n sliderProgressVar: `--fui-AlphaSlider--progress`,\n thumbColorVar: `--fui-AlphaSlider__thumb--color`,\n railColorVar: `--fui-AlphaSlider__rail--color`,\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n rail: {\n border: `1px solid ${tokens.colorNeutralStroke1}`,\n backgroundImage: `linear-gradient(var(${alphaSliderCSSVars.sliderDirectionVar}), transparent, var(${alphaSliderCSSVars.railColorVar})), url(${TRANSPARENT_IMAGE_URL})`,\n },\n});\n\n/**\n * Styles for the thumb slot\n */\nconst useThumbStyles = makeStyles({\n thumb: {\n backgroundColor: tokens.colorNeutralBackground1,\n '::before': {\n backgroundColor: `var(${alphaSliderCSSVars.thumbColorVar})`,\n },\n },\n horizontal: {\n transform: 'translateX(-50%)',\n left: `var(${alphaSliderCSSVars.sliderProgressVar})`,\n },\n vertical: {\n transform: 'translateY(50%)',\n bottom: `var(${alphaSliderCSSVars.sliderProgressVar})`,\n },\n});\n\n/**\n * Apply styling to the AlphaSlider slots based on the state\n */\nexport const useAlphaSliderStyles_unstable = (state: AlphaSliderState): AlphaSliderState => {\n
|
|
1
|
+
{"version":3,"sources":["../src/components/AlphaSlider/useAlphaSliderStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { useColorSliderStyles_unstable } from '../ColorSlider/useColorSliderStyles.styles';\nimport type { AlphaSliderSlots, AlphaSliderState } from './AlphaSlider.types';\n\nconst TRANSPARENT_IMAGE_URL = 'https://fabricweb.azureedge.net/fabric-website/assets/images/transparent-pattern.png';\n\nexport const alphaSliderClassNames: SlotClassNames<AlphaSliderSlots> = {\n root: 'fui-AlphaSlider',\n rail: 'fui-AlphaSlider__rail',\n thumb: 'fui-AlphaSlider__thumb',\n input: 'fui-AlphaSlider__input',\n};\n\nexport const alphaSliderCSSVars = {\n sliderDirectionVar: `--fui-AlphaSlider--direction`,\n sliderProgressVar: `--fui-AlphaSlider--progress`,\n thumbColorVar: `--fui-AlphaSlider__thumb--color`,\n railColorVar: `--fui-AlphaSlider__rail--color`,\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n rail: {\n border: `1px solid ${tokens.colorNeutralStroke1}`,\n backgroundImage: `linear-gradient(var(${alphaSliderCSSVars.sliderDirectionVar}), transparent, var(${alphaSliderCSSVars.railColorVar})), url(${TRANSPARENT_IMAGE_URL})`,\n },\n});\n\n/**\n * Styles for the thumb slot\n */\nconst useThumbStyles = makeStyles({\n thumb: {\n backgroundColor: tokens.colorNeutralBackground1,\n '::before': {\n backgroundColor: `var(${alphaSliderCSSVars.thumbColorVar})`,\n },\n },\n horizontal: {\n transform: 'translateX(-50%)',\n left: `var(${alphaSliderCSSVars.sliderProgressVar})`,\n },\n vertical: {\n transform: 'translateY(50%)',\n bottom: `var(${alphaSliderCSSVars.sliderProgressVar})`,\n },\n});\n\n/**\n * Apply styling to the AlphaSlider slots based on the state\n */\nexport const useAlphaSliderStyles_unstable = (state: AlphaSliderState): AlphaSliderState => {\n const styles = useStyles();\n const thumbStyles = useThumbStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(alphaSliderClassNames.root, state.root.className);\n // eslint-disable-next-line react-hooks/immutability\n state.input.className = mergeClasses(alphaSliderClassNames.input, state.input.className);\n // eslint-disable-next-line react-hooks/immutability\n state.rail.className = mergeClasses(alphaSliderClassNames.rail, styles.rail, state.rail.className);\n\n // eslint-disable-next-line react-hooks/immutability\n state.thumb.className = mergeClasses(\n alphaSliderClassNames.thumb,\n thumbStyles.thumb,\n state.vertical ? thumbStyles.vertical : thumbStyles.horizontal,\n state.thumb.className,\n );\n\n // eslint-disable-next-line react-hooks/immutability\n state.thumb.className = mergeClasses(\n alphaSliderClassNames.thumb,\n thumbStyles.thumb,\n state.vertical ? thumbStyles.vertical : thumbStyles.horizontal,\n state.thumb.className,\n );\n\n useColorSliderStyles_unstable(state);\n return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","useColorSliderStyles_unstable","TRANSPARENT_IMAGE_URL","alphaSliderClassNames","root","rail","thumb","input","alphaSliderCSSVars","sliderDirectionVar","sliderProgressVar","thumbColorVar","railColorVar","useStyles","border","colorNeutralStroke1","backgroundImage","useThumbStyles","backgroundColor","colorNeutralBackground1","horizontal","transform","left","vertical","bottom","useAlphaSliderStyles_unstable","state","styles","thumbStyles","className"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,MAAM,QAAQ,wBAAwB;AAE/C,SAASC,6BAA6B,QAAQ,6CAA6C;AAG3F,MAAMC,wBAAwB;AAE9B,OAAO,MAAMC,wBAA0D;IACrEC,MAAM;IACNC,MAAM;IACNC,OAAO;IACPC,OAAO;AACT,EAAE;AAEF,OAAO,MAAMC,qBAAqB;IAChCC,oBAAoB,CAAC,4BAA4B,CAAC;IAClDC,mBAAmB,CAAC,2BAA2B,CAAC;IAChDC,eAAe,CAAC,+BAA+B,CAAC;IAChDC,cAAc,CAAC,8BAA8B,CAAC;AAChD,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYf,WAAW;IAC3BO,MAAM;QACJS,QAAQ,CAAC,UAAU,EAAEd,OAAOe,mBAAmB,EAAE;QACjDC,iBAAiB,CAAC,oBAAoB,EAAER,mBAAmBC,kBAAkB,CAAC,oBAAoB,EAAED,mBAAmBI,YAAY,CAAC,QAAQ,EAAEV,sBAAsB,CAAC,CAAC;IACxK;AACF;AAEA;;CAEC,GACD,MAAMe,iBAAiBnB,WAAW;IAChCQ,OAAO;QACLY,iBAAiBlB,OAAOmB,uBAAuB;QAC/C,YAAY;YACVD,iBAAiB,CAAC,IAAI,EAAEV,mBAAmBG,aAAa,CAAC,CAAC,CAAC;QAC7D;IACF;IACAS,YAAY;QACVC,WAAW;QACXC,MAAM,CAAC,IAAI,EAAEd,mBAAmBE,iBAAiB,CAAC,CAAC,CAAC;IACtD;IACAa,UAAU;QACRF,WAAW;QACXG,QAAQ,CAAC,IAAI,EAAEhB,mBAAmBE,iBAAiB,CAAC,CAAC,CAAC;IACxD;AACF;AAEA;;CAEC,GACD,OAAO,MAAMe,gCAAgC,CAACC;IAC5C,MAAMC,SAASd;IACf,MAAMe,cAAcX;IACpB,oDAAoD;IACpDS,MAAMtB,IAAI,CAACyB,SAAS,GAAG9B,aAAaI,sBAAsBC,IAAI,EAAEsB,MAAMtB,IAAI,CAACyB,SAAS;IACpF,oDAAoD;IACpDH,MAAMnB,KAAK,CAACsB,SAAS,GAAG9B,aAAaI,sBAAsBI,KAAK,EAAEmB,MAAMnB,KAAK,CAACsB,SAAS;IACvF,oDAAoD;IACpDH,MAAMrB,IAAI,CAACwB,SAAS,GAAG9B,aAAaI,sBAAsBE,IAAI,EAAEsB,OAAOtB,IAAI,EAAEqB,MAAMrB,IAAI,CAACwB,SAAS;IAEjG,oDAAoD;IACpDH,MAAMpB,KAAK,CAACuB,SAAS,GAAG9B,aACtBI,sBAAsBG,KAAK,EAC3BsB,YAAYtB,KAAK,EACjBoB,MAAMH,QAAQ,GAAGK,YAAYL,QAAQ,GAAGK,YAAYR,UAAU,EAC9DM,MAAMpB,KAAK,CAACuB,SAAS;IAGvB,oDAAoD;IACpDH,MAAMpB,KAAK,CAACuB,SAAS,GAAG9B,aACtBI,sBAAsBG,KAAK,EAC3BsB,YAAYtB,KAAK,EACjBoB,MAAMH,QAAQ,GAAGK,YAAYL,QAAQ,GAAGK,YAAYR,UAAU,EAC9DM,MAAMpB,KAAK,CAACuB,SAAS;IAGvB5B,8BAA8ByB;IAC9B,OAAOA;AACT,EAAE"}
|
|
@@ -219,15 +219,17 @@ const useShapeStyles = /*#__PURE__*/__styles({
|
|
|
219
219
|
* Apply styling to the ColorArea slots based on the state
|
|
220
220
|
*/
|
|
221
221
|
export const useColorAreaStyles_unstable = state => {
|
|
222
|
-
'use no memo';
|
|
223
|
-
|
|
224
222
|
const rootStyles = useRootStyles();
|
|
225
223
|
const thumbStyles = useThumbStyles();
|
|
226
224
|
const inputStyles = useInputStyles();
|
|
227
225
|
const shapeStyles = useShapeStyles();
|
|
226
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
228
227
|
state.root.className = mergeClasses(colorAreaClassNames.root, rootStyles, shapeStyles[state.shape || 'rounded'], state.root.className);
|
|
228
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
229
229
|
state.thumb.className = mergeClasses(colorAreaClassNames.thumb, thumbStyles.thumb, thumbStyles.focusIndicator, state.thumb.className);
|
|
230
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
230
231
|
state.inputX.className = mergeClasses(colorAreaClassNames.inputX, inputStyles.input, state.inputX.className);
|
|
232
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
231
233
|
state.inputY.className = mergeClasses(colorAreaClassNames.inputY, inputStyles.input, state.inputY.className);
|
|
232
234
|
return state;
|
|
233
235
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__resetStyles","__styles","mergeClasses","shorthands","tokens","createFocusOutlineStyle","colorAreaClassNames","root","thumb","inputX","inputY","colorAreaCSSVars","areaXProgressVar","areaYProgressVar","thumbColorVar","mainColorVar","thumbSizeVar","useRootStyles","useThumbStyles","qhf8xq","a9b677","Bqenvij","Bkecrkj","oeaueh","Bvjb7m6","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","E5pizo","De3pzq","Bz10aip","oyh7mz","B5kzvoi","Brfgrao","lawp4y","Fbdkly","mdwyqc","Bciustq","gc50h5","r59vdv","Budzafs","ck0cow","n07z76","Gng75u","Bcvre1j","Ftih45","Bcgcnre","Bqjgrrk","qa3bma","y0oebl","Biqmznv","Bm6vgfq","Bbv0w2i","uvfttm","eqrjj","Bk5zm6e","m598lv","B4f6apu","ydt019","Bq4z7u6","Bdkvgpv","B0qfbqy","kj8mxx","focusIndicator","Brovlpu","B486eqv","Bssx7fj","uh7if5","clntm0","Dlk2r6","h6p2u","I6qiy5","yzno9d","By0wis0","B2j2mmj","wigs8","pbfy6t","B0v4ure","Byrf0fs","Bsiemmq","Bwckmig","skfxo0","Iidy0u","B98u21t","Bvwlmkc","jo1ztg","Ba1iezr","Blmvk6g","B24cy0v","Bil7v7r","Br3gin4","nr063g","ghq09","Bbgo44z","Bseh09z","az1dzo","Ba3ybja","B6352mv","vppk2z","Biaj6j7","B2pnrqr","B29w5g4","Bhhzhcn","Bec0n69","d","p","f","i","m","useInputStyles","input","B68tc82","Bmxbyg5","Bpg54ce","Bhzewxz","abs64n","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","useShapeStyles","rounded","square","useColorAreaStyles_unstable","state","rootStyles","thumbStyles","inputStyles","shapeStyles","className","shape"],"sources":["useColorAreaStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nexport const colorAreaClassNames = {\n root: 'fui-ColorArea',\n thumb: 'fui-ColorArea__thumb',\n inputX: 'fui-ColorArea__inputX',\n inputY: 'fui-ColorArea__inputY'\n};\nexport const colorAreaCSSVars = {\n areaXProgressVar: `--fui-AreaX--progress`,\n areaYProgressVar: `--fui-AreaY--progress`,\n thumbColorVar: `--fui-Area__thumb--color`,\n mainColorVar: `--fui-Area--main-color`\n};\n// Internal CSS variables\nconst thumbSizeVar = `--fui-Slider__thumb--size`;\n/**\n * Styles for the root slot\n */ const useRootStyles = makeResetStyles({\n position: 'relative',\n border: `1px solid ${tokens.colorNeutralStroke1}`,\n background: `linear-gradient(to bottom, transparent, #000), linear-gradient(to right, #fff, transparent), var(${colorAreaCSSVars.mainColorVar})`,\n forcedColorAdjust: 'none',\n display: 'inline-grid',\n touchAction: 'none',\n alignItems: 'start',\n justifyItems: 'start',\n [thumbSizeVar]: '20px',\n minWidth: '300px',\n minHeight: '300px',\n boxSizing: 'border-box',\n marginBottom: tokens.spacingVerticalSNudge\n});\n/**\n * Styles for the thumb slot\n */ const useThumbStyles = makeStyles({\n thumb: {\n position: 'absolute',\n width: `var(${thumbSizeVar})`,\n height: `var(${thumbSizeVar})`,\n pointerEvents: 'none',\n outlineStyle: 'none',\n forcedColorAdjust: 'none',\n borderRadius: tokens.borderRadiusCircular,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralForeground4}`,\n boxShadow: tokens.shadow4,\n backgroundColor: `var(${colorAreaCSSVars.thumbColorVar})`,\n transform: 'translate(-50%, 50%)',\n left: `var(${colorAreaCSSVars.areaXProgressVar})`,\n bottom: `var(${colorAreaCSSVars.areaYProgressVar})`,\n '::before': {\n position: 'absolute',\n inset: '0px',\n borderRadius: tokens.borderRadiusCircular,\n boxSizing: 'border-box',\n content: \"''\",\n border: `${tokens.strokeWidthThick} solid ${tokens.colorNeutralBackground1}`\n }\n },\n focusIndicator: createFocusOutlineStyle({\n selector: 'focus-within',\n style: {\n outlineWidth: tokens.strokeWidthThick,\n ...shorthands.borderWidth(tokens.strokeWidthThick),\n outlineRadius: tokens.borderRadiusCircular\n }\n })\n});\n/**\n * Styles for the Input slot\n */ const useInputStyles = makeStyles({\n input: {\n overflow: 'hidden',\n position: 'absolute',\n pointerEvents: 'none',\n top: 0,\n left: 0,\n opacity: 0,\n padding: '0',\n margin: '0',\n width: '100%',\n height: '100%'\n }\n});\nconst useShapeStyles = makeStyles({\n rounded: {\n borderRadius: tokens.borderRadiusMedium\n },\n square: {\n borderRadius: tokens.borderRadiusNone\n }\n});\n/**\n * Apply styling to the ColorArea slots based on the state\n */ export const useColorAreaStyles_unstable = (state)=>{\n
|
|
1
|
+
{"version":3,"names":["__resetStyles","__styles","mergeClasses","shorthands","tokens","createFocusOutlineStyle","colorAreaClassNames","root","thumb","inputX","inputY","colorAreaCSSVars","areaXProgressVar","areaYProgressVar","thumbColorVar","mainColorVar","thumbSizeVar","useRootStyles","useThumbStyles","qhf8xq","a9b677","Bqenvij","Bkecrkj","oeaueh","Bvjb7m6","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","E5pizo","De3pzq","Bz10aip","oyh7mz","B5kzvoi","Brfgrao","lawp4y","Fbdkly","mdwyqc","Bciustq","gc50h5","r59vdv","Budzafs","ck0cow","n07z76","Gng75u","Bcvre1j","Ftih45","Bcgcnre","Bqjgrrk","qa3bma","y0oebl","Biqmznv","Bm6vgfq","Bbv0w2i","uvfttm","eqrjj","Bk5zm6e","m598lv","B4f6apu","ydt019","Bq4z7u6","Bdkvgpv","B0qfbqy","kj8mxx","focusIndicator","Brovlpu","B486eqv","Bssx7fj","uh7if5","clntm0","Dlk2r6","h6p2u","I6qiy5","yzno9d","By0wis0","B2j2mmj","wigs8","pbfy6t","B0v4ure","Byrf0fs","Bsiemmq","Bwckmig","skfxo0","Iidy0u","B98u21t","Bvwlmkc","jo1ztg","Ba1iezr","Blmvk6g","B24cy0v","Bil7v7r","Br3gin4","nr063g","ghq09","Bbgo44z","Bseh09z","az1dzo","Ba3ybja","B6352mv","vppk2z","Biaj6j7","B2pnrqr","B29w5g4","Bhhzhcn","Bec0n69","d","p","f","i","m","useInputStyles","input","B68tc82","Bmxbyg5","Bpg54ce","Bhzewxz","abs64n","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","useShapeStyles","rounded","square","useColorAreaStyles_unstable","state","rootStyles","thumbStyles","inputStyles","shapeStyles","className","shape"],"sources":["useColorAreaStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nexport const colorAreaClassNames = {\n root: 'fui-ColorArea',\n thumb: 'fui-ColorArea__thumb',\n inputX: 'fui-ColorArea__inputX',\n inputY: 'fui-ColorArea__inputY'\n};\nexport const colorAreaCSSVars = {\n areaXProgressVar: `--fui-AreaX--progress`,\n areaYProgressVar: `--fui-AreaY--progress`,\n thumbColorVar: `--fui-Area__thumb--color`,\n mainColorVar: `--fui-Area--main-color`\n};\n// Internal CSS variables\nconst thumbSizeVar = `--fui-Slider__thumb--size`;\n/**\n * Styles for the root slot\n */ const useRootStyles = makeResetStyles({\n position: 'relative',\n border: `1px solid ${tokens.colorNeutralStroke1}`,\n background: `linear-gradient(to bottom, transparent, #000), linear-gradient(to right, #fff, transparent), var(${colorAreaCSSVars.mainColorVar})`,\n forcedColorAdjust: 'none',\n display: 'inline-grid',\n touchAction: 'none',\n alignItems: 'start',\n justifyItems: 'start',\n [thumbSizeVar]: '20px',\n minWidth: '300px',\n minHeight: '300px',\n boxSizing: 'border-box',\n marginBottom: tokens.spacingVerticalSNudge\n});\n/**\n * Styles for the thumb slot\n */ const useThumbStyles = makeStyles({\n thumb: {\n position: 'absolute',\n width: `var(${thumbSizeVar})`,\n height: `var(${thumbSizeVar})`,\n pointerEvents: 'none',\n outlineStyle: 'none',\n forcedColorAdjust: 'none',\n borderRadius: tokens.borderRadiusCircular,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralForeground4}`,\n boxShadow: tokens.shadow4,\n backgroundColor: `var(${colorAreaCSSVars.thumbColorVar})`,\n transform: 'translate(-50%, 50%)',\n left: `var(${colorAreaCSSVars.areaXProgressVar})`,\n bottom: `var(${colorAreaCSSVars.areaYProgressVar})`,\n '::before': {\n position: 'absolute',\n inset: '0px',\n borderRadius: tokens.borderRadiusCircular,\n boxSizing: 'border-box',\n content: \"''\",\n border: `${tokens.strokeWidthThick} solid ${tokens.colorNeutralBackground1}`\n }\n },\n focusIndicator: createFocusOutlineStyle({\n selector: 'focus-within',\n style: {\n outlineWidth: tokens.strokeWidthThick,\n ...shorthands.borderWidth(tokens.strokeWidthThick),\n outlineRadius: tokens.borderRadiusCircular\n }\n })\n});\n/**\n * Styles for the Input slot\n */ const useInputStyles = makeStyles({\n input: {\n overflow: 'hidden',\n position: 'absolute',\n pointerEvents: 'none',\n top: 0,\n left: 0,\n opacity: 0,\n padding: '0',\n margin: '0',\n width: '100%',\n height: '100%'\n }\n});\nconst useShapeStyles = makeStyles({\n rounded: {\n borderRadius: tokens.borderRadiusMedium\n },\n square: {\n borderRadius: tokens.borderRadiusNone\n }\n});\n/**\n * Apply styling to the ColorArea slots based on the state\n */ export const useColorAreaStyles_unstable = (state)=>{\n const rootStyles = useRootStyles();\n const thumbStyles = useThumbStyles();\n const inputStyles = useInputStyles();\n const shapeStyles = useShapeStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(colorAreaClassNames.root, rootStyles, shapeStyles[state.shape || 'rounded'], state.root.className);\n // eslint-disable-next-line react-hooks/immutability\n state.thumb.className = mergeClasses(colorAreaClassNames.thumb, thumbStyles.thumb, thumbStyles.focusIndicator, state.thumb.className);\n // eslint-disable-next-line react-hooks/immutability\n state.inputX.className = mergeClasses(colorAreaClassNames.inputX, inputStyles.input, state.inputX.className);\n // eslint-disable-next-line react-hooks/immutability\n state.inputY.className = mergeClasses(colorAreaClassNames.inputY, inputStyles.input, state.inputY.className);\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACtF,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,uBAAuB,QAAQ,yBAAyB;AACjE,OAAO,MAAMC,mBAAmB,GAAG;EAC/BC,IAAI,EAAE,eAAe;EACrBC,KAAK,EAAE,sBAAsB;EAC7BC,MAAM,EAAE,uBAAuB;EAC/BC,MAAM,EAAE;AACZ,CAAC;AACD,OAAO,MAAMC,gBAAgB,GAAG;EAC5BC,gBAAgB,EAAE,uBAAuB;EACzCC,gBAAgB,EAAE,uBAAuB;EACzCC,aAAa,EAAE,0BAA0B;EACzCC,YAAY,EAAE;AAClB,CAAC;AACD;AACA,MAAMC,YAAY,GAAG,2BAA2B;AAChD;AACA;AACA;AAAI,MAAMC,aAAa,gBAAGjB,aAAA,83BAczB,CAAC;AACF;AACA;AACA;AAAI,MAAMkB,cAAc,gBAAGjB,QAAA;EAAAO,KAAA;IAAAW,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,KAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,cAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,KAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,KAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,KAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;EAAAC,CAAA;EAAAC,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAgC1B,CAAC;AACF;AACA;AACA;AAAI,MAAMC,cAAc,gBAAG/H,QAAA;EAAAgI,KAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAjH,MAAA;IAAAG,OAAA;IAAA+G,OAAA;IAAAnF,MAAA;IAAAoF,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAA5H,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAsG,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAa1B,CAAC;AACF,MAAMqB,cAAc,gBAAGhJ,QAAA;EAAAiJ,OAAA;IAAAzH,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAsH,MAAA;IAAA1H,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAA8F,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAOtB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMwB,2BAA2B,GAAIC,KAAK,IAAG;EACpD,MAAMC,UAAU,GAAGrI,aAAa,CAAC,CAAC;EAClC,MAAMsI,WAAW,GAAGrI,cAAc,CAAC,CAAC;EACpC,MAAMsI,WAAW,GAAGxB,cAAc,CAAC,CAAC;EACpC,MAAMyB,WAAW,GAAGR,cAAc,CAAC,CAAC;EACpC;EACAI,KAAK,CAAC9I,IAAI,CAACmJ,SAAS,GAAGxJ,YAAY,CAACI,mBAAmB,CAACC,IAAI,EAAE+I,UAAU,EAAEG,WAAW,CAACJ,KAAK,CAACM,KAAK,IAAI,SAAS,CAAC,EAAEN,KAAK,CAAC9I,IAAI,CAACmJ,SAAS,CAAC;EACtI;EACAL,KAAK,CAAC7I,KAAK,CAACkJ,SAAS,GAAGxJ,YAAY,CAACI,mBAAmB,CAACE,KAAK,EAAE+I,WAAW,CAAC/I,KAAK,EAAE+I,WAAW,CAACrE,cAAc,EAAEmE,KAAK,CAAC7I,KAAK,CAACkJ,SAAS,CAAC;EACrI;EACAL,KAAK,CAAC5I,MAAM,CAACiJ,SAAS,GAAGxJ,YAAY,CAACI,mBAAmB,CAACG,MAAM,EAAE+I,WAAW,CAACvB,KAAK,EAAEoB,KAAK,CAAC5I,MAAM,CAACiJ,SAAS,CAAC;EAC5G;EACAL,KAAK,CAAC3I,MAAM,CAACgJ,SAAS,GAAGxJ,YAAY,CAACI,mBAAmB,CAACI,MAAM,EAAE8I,WAAW,CAACvB,KAAK,EAAEoB,KAAK,CAAC3I,MAAM,CAACgJ,SAAS,CAAC;EAC5G,OAAOL,KAAK;AAChB,CAAC","ignoreList":[]}
|
|
@@ -95,14 +95,17 @@ const useShapeStyles = makeStyles({
|
|
|
95
95
|
/**
|
|
96
96
|
* Apply styling to the ColorArea slots based on the state
|
|
97
97
|
*/ export const useColorAreaStyles_unstable = (state)=>{
|
|
98
|
-
'use no memo';
|
|
99
98
|
const rootStyles = useRootStyles();
|
|
100
99
|
const thumbStyles = useThumbStyles();
|
|
101
100
|
const inputStyles = useInputStyles();
|
|
102
101
|
const shapeStyles = useShapeStyles();
|
|
102
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
103
103
|
state.root.className = mergeClasses(colorAreaClassNames.root, rootStyles, shapeStyles[state.shape || 'rounded'], state.root.className);
|
|
104
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
104
105
|
state.thumb.className = mergeClasses(colorAreaClassNames.thumb, thumbStyles.thumb, thumbStyles.focusIndicator, state.thumb.className);
|
|
106
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
105
107
|
state.inputX.className = mergeClasses(colorAreaClassNames.inputX, inputStyles.input, state.inputX.className);
|
|
108
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
106
109
|
state.inputY.className = mergeClasses(colorAreaClassNames.inputY, inputStyles.input, state.inputY.className);
|
|
107
110
|
return state;
|
|
108
111
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/ColorArea/useColorAreaStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport type { ColorAreaSlots, ColorAreaState } from './ColorArea.types';\n\nexport const colorAreaClassNames: SlotClassNames<ColorAreaSlots> = {\n root: 'fui-ColorArea',\n thumb: 'fui-ColorArea__thumb',\n inputX: 'fui-ColorArea__inputX',\n inputY: 'fui-ColorArea__inputY',\n};\n\nexport const colorAreaCSSVars = {\n areaXProgressVar: `--fui-AreaX--progress`,\n areaYProgressVar: `--fui-AreaY--progress`,\n thumbColorVar: `--fui-Area__thumb--color`,\n mainColorVar: `--fui-Area--main-color`,\n};\n\n// Internal CSS variables\nconst thumbSizeVar = `--fui-Slider__thumb--size`;\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeResetStyles({\n position: 'relative',\n border: `1px solid ${tokens.colorNeutralStroke1}`,\n background: `linear-gradient(to bottom, transparent, #000), linear-gradient(to right, #fff, transparent), var(${colorAreaCSSVars.mainColorVar})`,\n forcedColorAdjust: 'none',\n display: 'inline-grid',\n touchAction: 'none',\n alignItems: 'start',\n justifyItems: 'start',\n [thumbSizeVar]: '20px',\n minWidth: '300px',\n minHeight: '300px',\n boxSizing: 'border-box',\n marginBottom: tokens.spacingVerticalSNudge,\n});\n\n/**\n * Styles for the thumb slot\n */\nconst useThumbStyles = makeStyles({\n thumb: {\n position: 'absolute',\n width: `var(${thumbSizeVar})`,\n height: `var(${thumbSizeVar})`,\n pointerEvents: 'none',\n outlineStyle: 'none',\n forcedColorAdjust: 'none',\n borderRadius: tokens.borderRadiusCircular,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralForeground4}`,\n boxShadow: tokens.shadow4,\n backgroundColor: `var(${colorAreaCSSVars.thumbColorVar})`,\n transform: 'translate(-50%, 50%)',\n left: `var(${colorAreaCSSVars.areaXProgressVar})`,\n bottom: `var(${colorAreaCSSVars.areaYProgressVar})`,\n '::before': {\n position: 'absolute',\n inset: '0px',\n borderRadius: tokens.borderRadiusCircular,\n boxSizing: 'border-box',\n content: \"''\",\n border: `${tokens.strokeWidthThick} solid ${tokens.colorNeutralBackground1}`,\n },\n },\n focusIndicator: createFocusOutlineStyle({\n selector: 'focus-within',\n style: {\n outlineWidth: tokens.strokeWidthThick,\n ...shorthands.borderWidth(tokens.strokeWidthThick),\n outlineRadius: tokens.borderRadiusCircular,\n },\n }),\n});\n\n/**\n * Styles for the Input slot\n */\nconst useInputStyles = makeStyles({\n input: {\n overflow: 'hidden',\n position: 'absolute',\n pointerEvents: 'none',\n top: 0,\n left: 0,\n opacity: 0,\n padding: '0',\n margin: '0',\n width: '100%',\n height: '100%',\n },\n});\n\nconst useShapeStyles = makeStyles({\n rounded: {\n borderRadius: tokens.borderRadiusMedium,\n },\n square: {\n borderRadius: tokens.borderRadiusNone,\n },\n});\n\n/**\n * Apply styling to the ColorArea slots based on the state\n */\nexport const useColorAreaStyles_unstable = (state: ColorAreaState): ColorAreaState => {\n
|
|
1
|
+
{"version":3,"sources":["../src/components/ColorArea/useColorAreaStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport type { ColorAreaSlots, ColorAreaState } from './ColorArea.types';\n\nexport const colorAreaClassNames: SlotClassNames<ColorAreaSlots> = {\n root: 'fui-ColorArea',\n thumb: 'fui-ColorArea__thumb',\n inputX: 'fui-ColorArea__inputX',\n inputY: 'fui-ColorArea__inputY',\n};\n\nexport const colorAreaCSSVars = {\n areaXProgressVar: `--fui-AreaX--progress`,\n areaYProgressVar: `--fui-AreaY--progress`,\n thumbColorVar: `--fui-Area__thumb--color`,\n mainColorVar: `--fui-Area--main-color`,\n};\n\n// Internal CSS variables\nconst thumbSizeVar = `--fui-Slider__thumb--size`;\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeResetStyles({\n position: 'relative',\n border: `1px solid ${tokens.colorNeutralStroke1}`,\n background: `linear-gradient(to bottom, transparent, #000), linear-gradient(to right, #fff, transparent), var(${colorAreaCSSVars.mainColorVar})`,\n forcedColorAdjust: 'none',\n display: 'inline-grid',\n touchAction: 'none',\n alignItems: 'start',\n justifyItems: 'start',\n [thumbSizeVar]: '20px',\n minWidth: '300px',\n minHeight: '300px',\n boxSizing: 'border-box',\n marginBottom: tokens.spacingVerticalSNudge,\n});\n\n/**\n * Styles for the thumb slot\n */\nconst useThumbStyles = makeStyles({\n thumb: {\n position: 'absolute',\n width: `var(${thumbSizeVar})`,\n height: `var(${thumbSizeVar})`,\n pointerEvents: 'none',\n outlineStyle: 'none',\n forcedColorAdjust: 'none',\n borderRadius: tokens.borderRadiusCircular,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralForeground4}`,\n boxShadow: tokens.shadow4,\n backgroundColor: `var(${colorAreaCSSVars.thumbColorVar})`,\n transform: 'translate(-50%, 50%)',\n left: `var(${colorAreaCSSVars.areaXProgressVar})`,\n bottom: `var(${colorAreaCSSVars.areaYProgressVar})`,\n '::before': {\n position: 'absolute',\n inset: '0px',\n borderRadius: tokens.borderRadiusCircular,\n boxSizing: 'border-box',\n content: \"''\",\n border: `${tokens.strokeWidthThick} solid ${tokens.colorNeutralBackground1}`,\n },\n },\n focusIndicator: createFocusOutlineStyle({\n selector: 'focus-within',\n style: {\n outlineWidth: tokens.strokeWidthThick,\n ...shorthands.borderWidth(tokens.strokeWidthThick),\n outlineRadius: tokens.borderRadiusCircular,\n },\n }),\n});\n\n/**\n * Styles for the Input slot\n */\nconst useInputStyles = makeStyles({\n input: {\n overflow: 'hidden',\n position: 'absolute',\n pointerEvents: 'none',\n top: 0,\n left: 0,\n opacity: 0,\n padding: '0',\n margin: '0',\n width: '100%',\n height: '100%',\n },\n});\n\nconst useShapeStyles = makeStyles({\n rounded: {\n borderRadius: tokens.borderRadiusMedium,\n },\n square: {\n borderRadius: tokens.borderRadiusNone,\n },\n});\n\n/**\n * Apply styling to the ColorArea slots based on the state\n */\nexport const useColorAreaStyles_unstable = (state: ColorAreaState): ColorAreaState => {\n const rootStyles = useRootStyles();\n const thumbStyles = useThumbStyles();\n const inputStyles = useInputStyles();\n const shapeStyles = useShapeStyles();\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n colorAreaClassNames.root,\n rootStyles,\n shapeStyles[state.shape || 'rounded'],\n state.root.className,\n );\n\n // eslint-disable-next-line react-hooks/immutability\n state.thumb.className = mergeClasses(\n colorAreaClassNames.thumb,\n thumbStyles.thumb,\n thumbStyles.focusIndicator,\n state.thumb.className,\n );\n\n // eslint-disable-next-line react-hooks/immutability\n state.inputX.className = mergeClasses(colorAreaClassNames.inputX, inputStyles.input, state.inputX.className);\n\n // eslint-disable-next-line react-hooks/immutability\n state.inputY.className = mergeClasses(colorAreaClassNames.inputY, inputStyles.input, state.inputY.className);\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","shorthands","tokens","createFocusOutlineStyle","colorAreaClassNames","root","thumb","inputX","inputY","colorAreaCSSVars","areaXProgressVar","areaYProgressVar","thumbColorVar","mainColorVar","thumbSizeVar","useRootStyles","position","border","colorNeutralStroke1","background","forcedColorAdjust","display","touchAction","alignItems","justifyItems","minWidth","minHeight","boxSizing","marginBottom","spacingVerticalSNudge","useThumbStyles","width","height","pointerEvents","outlineStyle","borderRadius","borderRadiusCircular","strokeWidthThin","colorNeutralForeground4","boxShadow","shadow4","backgroundColor","transform","left","bottom","inset","content","strokeWidthThick","colorNeutralBackground1","focusIndicator","selector","style","outlineWidth","borderWidth","outlineRadius","useInputStyles","input","overflow","top","opacity","padding","margin","useShapeStyles","rounded","borderRadiusMedium","square","borderRadiusNone","useColorAreaStyles_unstable","state","rootStyles","thumbStyles","inputStyles","shapeStyles","className","shape"],"mappings":"AAAA;AAEA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AAEvF,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,uBAAuB,QAAQ,0BAA0B;AAGlE,OAAO,MAAMC,sBAAsD;IACjEC,MAAM;IACNC,OAAO;IACPC,QAAQ;IACRC,QAAQ;AACV,EAAE;AAEF,OAAO,MAAMC,mBAAmB;IAC9BC,kBAAkB,CAAC,qBAAqB,CAAC;IACzCC,kBAAkB,CAAC,qBAAqB,CAAC;IACzCC,eAAe,CAAC,wBAAwB,CAAC;IACzCC,cAAc,CAAC,sBAAsB,CAAC;AACxC,EAAE;AAEF,yBAAyB;AACzB,MAAMC,eAAe,CAAC,yBAAyB,CAAC;AAEhD;;CAEC,GACD,MAAMC,gBAAgBjB,gBAAgB;IACpCkB,UAAU;IACVC,QAAQ,CAAC,UAAU,EAAEf,OAAOgB,mBAAmB,EAAE;IACjDC,YAAY,CAAC,iGAAiG,EAAEV,iBAAiBI,YAAY,CAAC,CAAC,CAAC;IAChJO,mBAAmB;IACnBC,SAAS;IACTC,aAAa;IACbC,YAAY;IACZC,cAAc;IACd,CAACV,aAAa,EAAE;IAChBW,UAAU;IACVC,WAAW;IACXC,WAAW;IACXC,cAAc1B,OAAO2B,qBAAqB;AAC5C;AAEA;;CAEC,GACD,MAAMC,iBAAiB/B,WAAW;IAChCO,OAAO;QACLU,UAAU;QACVe,OAAO,CAAC,IAAI,EAAEjB,aAAa,CAAC,CAAC;QAC7BkB,QAAQ,CAAC,IAAI,EAAElB,aAAa,CAAC,CAAC;QAC9BmB,eAAe;QACfC,cAAc;QACdd,mBAAmB;QACnBe,cAAcjC,OAAOkC,oBAAoB;QACzCnB,QAAQ,GAAGf,OAAOmC,eAAe,CAAC,OAAO,EAAEnC,OAAOoC,uBAAuB,EAAE;QAC3EC,WAAWrC,OAAOsC,OAAO;QACzBC,iBAAiB,CAAC,IAAI,EAAEhC,iBAAiBG,aAAa,CAAC,CAAC,CAAC;QACzD8B,WAAW;QACXC,MAAM,CAAC,IAAI,EAAElC,iBAAiBC,gBAAgB,CAAC,CAAC,CAAC;QACjDkC,QAAQ,CAAC,IAAI,EAAEnC,iBAAiBE,gBAAgB,CAAC,CAAC,CAAC;QACnD,YAAY;YACVK,UAAU;YACV6B,OAAO;YACPV,cAAcjC,OAAOkC,oBAAoB;YACzCT,WAAW;YACXmB,SAAS;YACT7B,QAAQ,GAAGf,OAAO6C,gBAAgB,CAAC,OAAO,EAAE7C,OAAO8C,uBAAuB,EAAE;QAC9E;IACF;IACAC,gBAAgB9C,wBAAwB;QACtC+C,UAAU;QACVC,OAAO;YACLC,cAAclD,OAAO6C,gBAAgB;YACrC,GAAG9C,WAAWoD,WAAW,CAACnD,OAAO6C,gBAAgB,CAAC;YAClDO,eAAepD,OAAOkC,oBAAoB;QAC5C;IACF;AACF;AAEA;;CAEC,GACD,MAAMmB,iBAAiBxD,WAAW;IAChCyD,OAAO;QACLC,UAAU;QACVzC,UAAU;QACViB,eAAe;QACfyB,KAAK;QACLf,MAAM;QACNgB,SAAS;QACTC,SAAS;QACTC,QAAQ;QACR9B,OAAO;QACPC,QAAQ;IACV;AACF;AAEA,MAAM8B,iBAAiB/D,WAAW;IAChCgE,SAAS;QACP5B,cAAcjC,OAAO8D,kBAAkB;IACzC;IACAC,QAAQ;QACN9B,cAAcjC,OAAOgE,gBAAgB;IACvC;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,8BAA8B,CAACC;IAC1C,MAAMC,aAAatD;IACnB,MAAMuD,cAAcxC;IACpB,MAAMyC,cAAchB;IACpB,MAAMiB,cAAcV;IAEpB,oDAAoD;IACpDM,MAAM/D,IAAI,CAACoE,SAAS,GAAGzE,aACrBI,oBAAoBC,IAAI,EACxBgE,YACAG,WAAW,CAACJ,MAAMM,KAAK,IAAI,UAAU,EACrCN,MAAM/D,IAAI,CAACoE,SAAS;IAGtB,oDAAoD;IACpDL,MAAM9D,KAAK,CAACmE,SAAS,GAAGzE,aACtBI,oBAAoBE,KAAK,EACzBgE,YAAYhE,KAAK,EACjBgE,YAAYrB,cAAc,EAC1BmB,MAAM9D,KAAK,CAACmE,SAAS;IAGvB,oDAAoD;IACpDL,MAAM7D,MAAM,CAACkE,SAAS,GAAGzE,aAAaI,oBAAoBG,MAAM,EAAEgE,YAAYf,KAAK,EAAEY,MAAM7D,MAAM,CAACkE,SAAS;IAE3G,oDAAoD;IACpDL,MAAM5D,MAAM,CAACiE,SAAS,GAAGzE,aAAaI,oBAAoBI,MAAM,EAAE+D,YAAYf,KAAK,EAAEY,MAAM5D,MAAM,CAACiE,SAAS;IAC3G,OAAOL;AACT,EAAE"}
|
|
@@ -25,9 +25,8 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
25
25
|
* Apply styling to the ColorPicker slots based on the state
|
|
26
26
|
*/
|
|
27
27
|
export const useColorPickerStyles_unstable = state => {
|
|
28
|
-
'use no memo';
|
|
29
|
-
|
|
30
28
|
const styles = useStyles();
|
|
29
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
31
30
|
state.root.className = mergeClasses(colorPickerClassNames.root, styles.root, state.root.className);
|
|
32
31
|
return state;
|
|
33
32
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__styles","mergeClasses","tokens","colorPickerClassNames","root","useStyles","mc9l5x","Beiy3e4","i8kkvl","Belr9w4","rmohyg","d","p","useColorPickerStyles_unstable","state","styles","className"],"sources":["useColorPickerStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const colorPickerClassNames = {\n root: 'fui-ColorPicker'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'column',\n gap: tokens.spacingVerticalXS\n }\n});\n/**\n * Apply styling to the ColorPicker slots based on the state\n */ export const useColorPickerStyles_unstable = (state)=>{\n
|
|
1
|
+
{"version":3,"names":["__styles","mergeClasses","tokens","colorPickerClassNames","root","useStyles","mc9l5x","Beiy3e4","i8kkvl","Belr9w4","rmohyg","d","p","useColorPickerStyles_unstable","state","styles","className"],"sources":["useColorPickerStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const colorPickerClassNames = {\n root: 'fui-ColorPicker'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'column',\n gap: tokens.spacingVerticalXS\n }\n});\n/**\n * Apply styling to the ColorPicker slots based on the state\n */ export const useColorPickerStyles_unstable = (state)=>{\n const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(colorPickerClassNames.root, styles.root, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,qBAAqB,GAAG;EACjCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGL,QAAA;EAAAI,IAAA;IAAAE,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;AAAA,CAMrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,6BAA6B,GAAIC,KAAK,IAAG;EACtD,MAAMC,MAAM,GAAGV,SAAS,CAAC,CAAC;EAC1B;EACAS,KAAK,CAACV,IAAI,CAACY,SAAS,GAAGf,YAAY,CAACE,qBAAqB,CAACC,IAAI,EAAEW,MAAM,CAACX,IAAI,EAAEU,KAAK,CAACV,IAAI,CAACY,SAAS,CAAC;EAClG,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
|
|
@@ -16,8 +16,8 @@ export const colorPickerClassNames = {
|
|
|
16
16
|
/**
|
|
17
17
|
* Apply styling to the ColorPicker slots based on the state
|
|
18
18
|
*/ export const useColorPickerStyles_unstable = (state)=>{
|
|
19
|
-
'use no memo';
|
|
20
19
|
const styles = useStyles();
|
|
20
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
21
21
|
state.root.className = mergeClasses(colorPickerClassNames.root, styles.root, state.root.className);
|
|
22
22
|
return state;
|
|
23
23
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/ColorPicker/useColorPickerStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { ColorPickerSlots, ColorPickerState } from './ColorPicker.types';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const colorPickerClassNames: SlotClassNames<ColorPickerSlots> = {\n root: 'fui-ColorPicker',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'column',\n gap: tokens.spacingVerticalXS,\n },\n});\n\n/**\n * Apply styling to the ColorPicker slots based on the state\n */\nexport const useColorPickerStyles_unstable = (state: ColorPickerState): ColorPickerState => {\n
|
|
1
|
+
{"version":3,"sources":["../src/components/ColorPicker/useColorPickerStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { ColorPickerSlots, ColorPickerState } from './ColorPicker.types';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const colorPickerClassNames: SlotClassNames<ColorPickerSlots> = {\n root: 'fui-ColorPicker',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'column',\n gap: tokens.spacingVerticalXS,\n },\n});\n\n/**\n * Apply styling to the ColorPicker slots based on the state\n */\nexport const useColorPickerStyles_unstable = (state: ColorPickerState): ColorPickerState => {\n const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(colorPickerClassNames.root, styles.root, state.root.className);\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","colorPickerClassNames","root","useStyles","display","flexDirection","gap","spacingVerticalXS","useColorPickerStyles_unstable","state","styles","className"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG1D,SAASC,MAAM,QAAQ,wBAAwB;AAE/C,OAAO,MAAMC,wBAA0D;IACrEC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYL,WAAW;IAC3BI,MAAM;QACJE,SAAS;QACTC,eAAe;QACfC,KAAKN,OAAOO,iBAAiB;IAC/B;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAACC;IAC5C,MAAMC,SAASP;IACf,oDAAoD;IACpDM,MAAMP,IAAI,CAACS,SAAS,GAAGZ,aAAaE,sBAAsBC,IAAI,EAAEQ,OAAOR,IAAI,EAAEO,MAAMP,IAAI,CAACS,SAAS;IAEjG,OAAOF;AACT,EAAE"}
|
|
@@ -18,7 +18,7 @@ import { INITIAL_COLOR_HSV } from '../../utils/constants';
|
|
|
18
18
|
* @param props - props from this instance of ColorSlider
|
|
19
19
|
* @param ref - reference to root HTMLInputElement of ColorSlider
|
|
20
20
|
*/ export const useColorSlider_unstable = (props, ref)=>{
|
|
21
|
-
'use no memo';
|
|
21
|
+
'use no memo'; // justified: compiler would optimize useColorSlider_unstable — manual opt-out to preserve runtime behavior
|
|
22
22
|
const { dir } = useFluent();
|
|
23
23
|
const onChangeFromContext = useColorPickerContextValue_unstable((ctx)=>ctx.requestChange);
|
|
24
24
|
const colorFromContext = useColorPickerContextValue_unstable((ctx)=>ctx.color);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/ColorSlider/useColorSlider.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { tinycolor } from '@ctrl/tinycolor';\nimport {\n getPartitionedNativeProps,\n useId,\n slot,\n useControllableState,\n useEventCallback,\n} from '@fluentui/react-utilities';\nimport { colorSliderCSSVars } from './useColorSliderStyles.styles';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport type { ColorSliderProps, ColorSliderState } from './ColorSlider.types';\nimport { useColorPickerContextValue_unstable } from '../../contexts/colorPicker';\nimport { MIN, HUE_MAX, MAX as COLOR_MAX } from '../../utils/constants';\nimport { getPercent } from '../../utils/getPercent';\nimport { createHsvColor } from '../../utils/createHsvColor';\nimport { clampValue, type ChannelActions, adjustChannel } from '../../utils/adjustChannel';\nimport type { HsvColor } from '../../types/color';\nimport { INITIAL_COLOR_HSV } from '../../utils/constants';\n\n/**\n * Create the state required to render ColorSlider.\n *\n * The returned state can be modified with hooks such as useColorSliderStyles_unstable,\n * before being passed to renderColorSlider_unstable.\n *\n * @param props - props from this instance of ColorSlider\n * @param ref - reference to root HTMLInputElement of ColorSlider\n */\nexport const useColorSlider_unstable = (\n props: ColorSliderProps,\n ref: React.Ref<HTMLInputElement>,\n): ColorSliderState => {\n 'use no memo'
|
|
1
|
+
{"version":3,"sources":["../src/components/ColorSlider/useColorSlider.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { tinycolor } from '@ctrl/tinycolor';\nimport {\n getPartitionedNativeProps,\n useId,\n slot,\n useControllableState,\n useEventCallback,\n} from '@fluentui/react-utilities';\nimport { colorSliderCSSVars } from './useColorSliderStyles.styles';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport type { ColorSliderProps, ColorSliderState } from './ColorSlider.types';\nimport { useColorPickerContextValue_unstable } from '../../contexts/colorPicker';\nimport { MIN, HUE_MAX, MAX as COLOR_MAX } from '../../utils/constants';\nimport { getPercent } from '../../utils/getPercent';\nimport { createHsvColor } from '../../utils/createHsvColor';\nimport { clampValue, type ChannelActions, adjustChannel } from '../../utils/adjustChannel';\nimport type { HsvColor } from '../../types/color';\nimport { INITIAL_COLOR_HSV } from '../../utils/constants';\n\n/**\n * Create the state required to render ColorSlider.\n *\n * The returned state can be modified with hooks such as useColorSliderStyles_unstable,\n * before being passed to renderColorSlider_unstable.\n *\n * @param props - props from this instance of ColorSlider\n * @param ref - reference to root HTMLInputElement of ColorSlider\n */\nexport const useColorSlider_unstable = (\n props: ColorSliderProps,\n ref: React.Ref<HTMLInputElement>,\n): ColorSliderState => {\n 'use no memo'; // justified: compiler would optimize useColorSlider_unstable — manual opt-out to preserve runtime behavior\n\n const { dir } = useFluent();\n const onChangeFromContext = useColorPickerContextValue_unstable(ctx => ctx.requestChange);\n const colorFromContext = useColorPickerContextValue_unstable(ctx => ctx.color);\n const shapeFromContext = useColorPickerContextValue_unstable(ctx => ctx.shape);\n const nativeProps = getPartitionedNativeProps({\n props,\n primarySlotTagName: 'input',\n excludedPropNames: ['onChange', 'color'],\n });\n\n const {\n color,\n channel = 'hue',\n onChange = onChangeFromContext,\n shape = shapeFromContext,\n vertical,\n // Slots\n root,\n input,\n rail,\n thumb,\n } = props;\n\n const hsvColor = color || colorFromContext;\n const hslColor = tinycolor(hsvColor).toHsl();\n\n const [currentColor, setCurrentColor] = useControllableState<HsvColor>({\n defaultState: props.defaultColor,\n state: hsvColor,\n initialState: INITIAL_COLOR_HSV,\n });\n\n const MAX = channel === 'hue' ? HUE_MAX : COLOR_MAX;\n\n const valueChannelActions: ChannelActions<number> = {\n hue: clampValue(currentColor.h),\n saturation: clampValue(currentColor.s * 100),\n value: clampValue(currentColor.v * 100),\n };\n\n const clampedValue = adjustChannel(channel, valueChannelActions);\n const valuePercent = getPercent(clampedValue, MIN, MAX);\n\n const inputOnChange = input?.onChange;\n\n const _onChange: React.ChangeEventHandler<HTMLInputElement> = useEventCallback(event => {\n const newValue = Number(event.target.value);\n const colorActions: ChannelActions<() => HsvColor> = {\n hue: () => createHsvColor({ ...hsvColor, h: newValue }),\n saturation: () => createHsvColor({ ...hsvColor, s: newValue / 100 }),\n value: () => createHsvColor({ ...hsvColor, v: newValue / 100 }),\n };\n const newColor = adjustChannel(channel, colorActions)();\n\n setCurrentColor(newColor);\n\n inputOnChange?.(event);\n onChange?.(event, {\n type: 'change',\n event,\n color: newColor,\n });\n });\n\n const rootVariables = {\n [colorSliderCSSVars.sliderDirectionVar]: vertical ? '180deg' : dir === 'ltr' ? '-90deg' : '90deg',\n [colorSliderCSSVars.sliderProgressVar]: `${valuePercent}%`,\n [colorSliderCSSVars.thumbColorVar]:\n channel === 'hue' ? `hsl(${clampedValue}, 100%, 50%)` : tinycolor(hsvColor).toRgbString(),\n [colorSliderCSSVars.railColorVar]:\n channel === 'hue'\n ? `hsl(${hslColor.h} ${hslColor.s * 100}%, ${hslColor.l * 100}%)`\n : `hsl(${hslColor.h} 100%, 50%)`,\n };\n\n const state: ColorSliderState = {\n shape,\n vertical,\n channel,\n components: {\n input: 'input',\n rail: 'div',\n root: 'div',\n thumb: 'div',\n },\n root: slot.always(root, {\n defaultProps: {\n role: 'group',\n ...nativeProps.root,\n },\n elementType: 'div',\n }),\n input: slot.always(input, {\n defaultProps: {\n id: useId('slider-', props.id),\n ref,\n min: MIN,\n max: MAX,\n tabIndex: 0,\n ['aria-orientation']: vertical ? 'vertical' : 'horizontal',\n ...nativeProps.primary,\n type: 'range',\n },\n elementType: 'input',\n }),\n rail: slot.always(rail, { elementType: 'div' }),\n thumb: slot.always(thumb, { elementType: 'div' }),\n };\n\n // Root props\n state.root.style = {\n ...rootVariables,\n ...state.root.style,\n };\n\n // Input Props\n state.input.value = clampedValue;\n state.input.onChange = _onChange;\n return state;\n};\n"],"names":["tinycolor","getPartitionedNativeProps","useId","slot","useControllableState","useEventCallback","colorSliderCSSVars","useFluent_unstable","useFluent","useColorPickerContextValue_unstable","MIN","HUE_MAX","MAX","COLOR_MAX","getPercent","createHsvColor","clampValue","adjustChannel","INITIAL_COLOR_HSV","useColorSlider_unstable","props","ref","dir","onChangeFromContext","ctx","requestChange","colorFromContext","color","shapeFromContext","shape","nativeProps","primarySlotTagName","excludedPropNames","channel","onChange","vertical","root","input","rail","thumb","hsvColor","hslColor","toHsl","currentColor","setCurrentColor","defaultState","defaultColor","state","initialState","valueChannelActions","hue","h","saturation","s","value","v","clampedValue","valuePercent","inputOnChange","_onChange","event","newValue","Number","target","colorActions","newColor","type","rootVariables","sliderDirectionVar","sliderProgressVar","thumbColorVar","toRgbString","railColorVar","l","components","always","defaultProps","role","elementType","id","min","max","tabIndex","primary","style"],"mappings":"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"}
|
|
@@ -16,7 +16,7 @@ export const colorSliderCSSVars = {
|
|
|
16
16
|
thumbSizeVar: `--fui-Slider__thumb--size`,
|
|
17
17
|
railSizeVar: `--fui-Slider__rail--size`
|
|
18
18
|
};
|
|
19
|
-
const hueBackground = `linear-gradient(${/*#__PURE__*/[`var(${colorSliderCSSVars.sliderDirectionVar})`, 'red', 'fuchsia', 'blue', 'aqua', 'lime', 'yellow', 'red'].join(',')})`;
|
|
19
|
+
const hueBackground = `linear-gradient(${ /*#__PURE__*/[`var(${colorSliderCSSVars.sliderDirectionVar})`, 'red', 'fuchsia', 'blue', 'aqua', 'lime', 'yellow', 'red'].join(',')})`;
|
|
20
20
|
/**
|
|
21
21
|
* Styles for the root slot
|
|
22
22
|
*/
|
|
@@ -272,8 +272,6 @@ const useInputStyles = /*#__PURE__*/__styles({
|
|
|
272
272
|
* Apply styling to the ColorSlider slots based on the state
|
|
273
273
|
*/
|
|
274
274
|
export const useColorSliderStyles_unstable = state => {
|
|
275
|
-
'use no memo';
|
|
276
|
-
|
|
277
275
|
const rootStyles = useRootStyles();
|
|
278
276
|
const styles = useStyles();
|
|
279
277
|
const railStyles = useRailStyles();
|
|
@@ -282,9 +280,13 @@ export const useColorSliderStyles_unstable = state => {
|
|
|
282
280
|
const shapeStyles = useShapeStyles();
|
|
283
281
|
const channelStyles = useChannelStyles();
|
|
284
282
|
const isVertical = state.vertical;
|
|
283
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
285
284
|
state.root.className = mergeClasses(colorSliderClassNames.root, rootStyles, isVertical ? styles.vertical : styles.horizontal, state.root.className);
|
|
285
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
286
286
|
state.rail.className = mergeClasses(colorSliderClassNames.rail, railStyles.rail, channelStyles[state.channel || 'hue'], shapeStyles[state.shape || 'rounded'], isVertical ? railStyles.vertical : railStyles.horizontal, state.rail.className);
|
|
287
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
287
288
|
state.thumb.className = mergeClasses(colorSliderClassNames.thumb, thumbStyles.thumb, isVertical ? thumbStyles.vertical : thumbStyles.horizontal, state.thumb.className);
|
|
289
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
288
290
|
state.input.className = mergeClasses(colorSliderClassNames.input, inputStyles.input, isVertical ? inputStyles.vertical : inputStyles.horizontal, state.input.className);
|
|
289
291
|
return state;
|
|
290
292
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__styles","__resetStyles","mergeClasses","tokens","colorSliderClassNames","root","rail","thumb","input","colorSliderCSSVars","sliderDirectionVar","sliderProgressVar","thumbColorVar","railColorVar","thumbSizeVar","railSizeVar","hueBackground","join","useRootStyles","useStyles","horizontal","Bf4jedk","wkccdc","Budl1dq","vertical","sshi5w","d","useChannelStyles","hue","Bcmaq0h","saturation","value","useRailStyles","Bkecrkj","Ijaq50","nk6f5a","Br312pm","Bw0ie65","qhf8xq","Bvjb7m6","Bpd4iqm","oeaueh","Bw0xxkn","Ftih45","Brfgrao","a9b677","Bqenvij","Fbdkly","mdwyqc","Baz25je","Ccq8qp","Bciustq","lawp4y","useThumbStyles","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","E5pizo","De3pzq","gc50h5","r59vdv","Budzafs","ck0cow","n07z76","Gng75u","Bcvre1j","Bcgcnre","Bqjgrrk","qa3bma","y0oebl","Biqmznv","Bm6vgfq","Bbv0w2i","uvfttm","eqrjj","Bk5zm6e","m598lv","B4f6apu","ydt019","Bq4z7u6","Bdkvgpv","B0qfbqy","kj8mxx","Bz10aip","oyh7mz","B5kzvoi","p","useShapeStyles","rounded","square","useInputStyles","Bceei9c","abs64n","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","jo39rj","C5zqim","Bdlbwnu","B8rk77i","Bbzx7hc","Hwkvcz","B0nnt1c","Brwsv5j","B2b7vog","B4hmq5e","B8jxwem","B18nadz","Ddg5ig","Byj09el","Dac2s3","Dd2y6r","Bk0t58e","Ewenww","Brqi8qb","zz3kca","low6xx","d0s10n","wea7l5","olu5tv","g5nsvh","Bqvnfwh","Biqzhck","kgocjf","i","useColorSliderStyles_unstable","state","rootStyles","styles","railStyles","thumbStyles","inputStyles","shapeStyles","channelStyles","isVertical","className","channel","shape"],"sources":["useColorSliderStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const colorSliderClassNames = {\n root: 'fui-ColorSlider',\n rail: 'fui-ColorSlider__rail',\n thumb: 'fui-ColorSlider__thumb',\n input: 'fui-ColorSlider__input'\n};\nexport const colorSliderCSSVars = {\n sliderDirectionVar: `--fui-Slider--direction`,\n sliderProgressVar: `--fui-Slider--progress`,\n thumbColorVar: `--fui-Slider__thumb--color`,\n railColorVar: `--fui-Slider__rail--color`,\n thumbSizeVar: `--fui-Slider__thumb--size`,\n railSizeVar: `--fui-Slider__rail--size`\n};\nconst hueBackground = `linear-gradient(${[\n `var(${colorSliderCSSVars.sliderDirectionVar})`,\n 'red',\n 'fuchsia',\n 'blue',\n 'aqua',\n 'lime',\n 'yellow',\n 'red'\n].join(',')})`;\n/**\n * Styles for the root slot\n */ const useRootStyles = makeResetStyles({\n position: 'relative',\n display: 'inline-grid',\n touchAction: 'none',\n alignItems: 'center',\n justifyItems: 'center',\n [colorSliderCSSVars.thumbSizeVar]: '20px',\n [colorSliderCSSVars.railSizeVar]: '20px',\n minHeight: '32px'\n});\nconst useStyles = makeStyles({\n horizontal: {\n minWidth: '200px',\n // 3x3 grid with the rail and thumb in the center cell [2,2] and the hidden input stretching across all cells\n gridTemplateRows: `1fr var(${colorSliderCSSVars.thumbSizeVar}) 1fr`,\n gridTemplateColumns: `1fr 100% 1fr`\n },\n vertical: {\n minHeight: '280px',\n // 3x3 grid with the rail and thumb in the center cell [2,2] and the hidden input stretching across all cells\n gridTemplateRows: `1fr 100% 1fr`,\n gridTemplateColumns: `1fr var(${colorSliderCSSVars.thumbSizeVar}) 1fr`\n }\n});\nconst useChannelStyles = makeStyles({\n hue: {\n backgroundImage: hueBackground\n },\n saturation: {\n backgroundImage: `linear-gradient(to right, #808080, var(${colorSliderCSSVars.railColorVar}))`\n },\n value: {\n backgroundImage: `linear-gradient(to right, #000, var(${colorSliderCSSVars.railColorVar}))`\n }\n});\n/**\n * Styles for the rail slot\n */ const useRailStyles = makeStyles({\n rail: {\n pointerEvents: 'none',\n gridRowStart: '2',\n gridRowEnd: '2',\n gridColumnStart: '2',\n gridColumnEnd: '2',\n position: 'relative',\n forcedColorAdjust: 'none',\n outlineWidth: '1px',\n outlineStyle: 'solid',\n outlineColor: tokens.colorTransparentStroke,\n '::before': {\n content: \"''\",\n position: 'absolute'\n }\n },\n horizontal: {\n width: '100%',\n height: `var(${colorSliderCSSVars.railSizeVar})`,\n '::before': {\n left: '-1px',\n right: '-1px',\n height: `var(${colorSliderCSSVars.railSizeVar})`\n }\n },\n vertical: {\n width: `var(${colorSliderCSSVars.railSizeVar})`,\n height: '100%',\n '::before': {\n width: `var(${colorSliderCSSVars.railSizeVar})`,\n top: '-1px',\n bottom: '1px'\n }\n }\n});\n/**\n * Styles for the thumb slot\n */ const useThumbStyles = makeStyles({\n thumb: {\n gridRowStart: '2',\n gridRowEnd: '2',\n gridColumnStart: '2',\n gridColumnEnd: '2',\n position: 'absolute',\n width: `var(${colorSliderCSSVars.thumbSizeVar})`,\n height: `var(${colorSliderCSSVars.thumbSizeVar})`,\n pointerEvents: 'none',\n outlineStyle: 'none',\n forcedColorAdjust: 'none',\n borderRadius: tokens.borderRadiusCircular,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralForeground4}`,\n boxShadow: tokens.shadow4,\n backgroundColor: `var(${colorSliderCSSVars.thumbColorVar})`,\n '::before': {\n position: 'absolute',\n inset: '0px',\n borderRadius: tokens.borderRadiusCircular,\n boxSizing: 'border-box',\n content: \"''\",\n border: `${tokens.strokeWidthThick} solid ${tokens.colorNeutralBackground1}`\n }\n },\n horizontal: {\n transform: 'translateX(-50%)',\n left: `var(${colorSliderCSSVars.sliderProgressVar})`\n },\n vertical: {\n transform: 'translateY(50%)',\n bottom: `var(${colorSliderCSSVars.sliderProgressVar})`\n }\n});\nconst useShapeStyles = makeStyles({\n rounded: {\n borderRadius: tokens.borderRadiusMedium\n },\n square: {\n borderRadius: tokens.borderRadiusNone\n }\n});\n/**\n * Styles for the Input slot\n */ const useInputStyles = makeStyles({\n input: {\n cursor: 'pointer',\n opacity: 0,\n gridRowStart: '1',\n gridRowEnd: '-1',\n gridColumnStart: '1',\n gridColumnEnd: '-1',\n padding: '0',\n margin: '0',\n [`:focus-visible ~ .${colorSliderClassNames.thumb}`]: {\n border: `2px solid ${tokens.colorStrokeFocus2}`,\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorTransparentStroke}`,\n borderRadius: tokens.borderRadiusCircular\n }\n },\n horizontal: {\n height: `var(${colorSliderCSSVars.thumbSizeVar})`,\n width: '100%'\n },\n vertical: {\n height: '100%',\n width: `var(${colorSliderCSSVars.thumbSizeVar})`,\n 'writing-mode': 'vertical-lr',\n direction: 'rtl'\n }\n});\n/**\n * Apply styling to the ColorSlider slots based on the state\n */ export const useColorSliderStyles_unstable = (state)=>{\n 'use no memo';\n const rootStyles = useRootStyles();\n const styles = useStyles();\n const railStyles = useRailStyles();\n const thumbStyles = useThumbStyles();\n const inputStyles = useInputStyles();\n const shapeStyles = useShapeStyles();\n const channelStyles = useChannelStyles();\n const isVertical = state.vertical;\n state.root.className = mergeClasses(colorSliderClassNames.root, rootStyles, isVertical ? styles.vertical : styles.horizontal, state.root.className);\n state.rail.className = mergeClasses(colorSliderClassNames.rail, railStyles.rail, channelStyles[state.channel || 'hue'], shapeStyles[state.shape || 'rounded'], isVertical ? railStyles.vertical : railStyles.horizontal, state.rail.className);\n state.thumb.className = mergeClasses(colorSliderClassNames.thumb, thumbStyles.thumb, isVertical ? thumbStyles.vertical : thumbStyles.horizontal, state.thumb.className);\n state.input.className = mergeClasses(colorSliderClassNames.input, inputStyles.input, isVertical ? inputStyles.vertical : inputStyles.horizontal, state.input.className);\n return state;\n};\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["__styles","__resetStyles","mergeClasses","tokens","colorSliderClassNames","root","rail","thumb","input","colorSliderCSSVars","sliderDirectionVar","sliderProgressVar","thumbColorVar","railColorVar","thumbSizeVar","railSizeVar","hueBackground","join","useRootStyles","useStyles","horizontal","Bf4jedk","wkccdc","Budl1dq","vertical","sshi5w","d","useChannelStyles","hue","Bcmaq0h","saturation","value","useRailStyles","Bkecrkj","Ijaq50","nk6f5a","Br312pm","Bw0ie65","qhf8xq","Bvjb7m6","Bpd4iqm","oeaueh","Bw0xxkn","Ftih45","Brfgrao","a9b677","Bqenvij","Fbdkly","mdwyqc","Baz25je","Ccq8qp","Bciustq","lawp4y","useThumbStyles","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","E5pizo","De3pzq","gc50h5","r59vdv","Budzafs","ck0cow","n07z76","Gng75u","Bcvre1j","Bcgcnre","Bqjgrrk","qa3bma","y0oebl","Biqmznv","Bm6vgfq","Bbv0w2i","uvfttm","eqrjj","Bk5zm6e","m598lv","B4f6apu","ydt019","Bq4z7u6","Bdkvgpv","B0qfbqy","kj8mxx","Bz10aip","oyh7mz","B5kzvoi","p","useShapeStyles","rounded","square","useInputStyles","Bceei9c","abs64n","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","jo39rj","C5zqim","Bdlbwnu","B8rk77i","Bbzx7hc","Hwkvcz","B0nnt1c","Brwsv5j","B2b7vog","B4hmq5e","B8jxwem","B18nadz","Ddg5ig","Byj09el","Dac2s3","Dd2y6r","Bk0t58e","Ewenww","Brqi8qb","zz3kca","low6xx","d0s10n","wea7l5","olu5tv","g5nsvh","Bqvnfwh","Biqzhck","kgocjf","i","useColorSliderStyles_unstable","state","rootStyles","styles","railStyles","thumbStyles","inputStyles","shapeStyles","channelStyles","isVertical","className","channel","shape"],"sources":["useColorSliderStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const colorSliderClassNames = {\n root: 'fui-ColorSlider',\n rail: 'fui-ColorSlider__rail',\n thumb: 'fui-ColorSlider__thumb',\n input: 'fui-ColorSlider__input'\n};\nexport const colorSliderCSSVars = {\n sliderDirectionVar: `--fui-Slider--direction`,\n sliderProgressVar: `--fui-Slider--progress`,\n thumbColorVar: `--fui-Slider__thumb--color`,\n railColorVar: `--fui-Slider__rail--color`,\n thumbSizeVar: `--fui-Slider__thumb--size`,\n railSizeVar: `--fui-Slider__rail--size`\n};\nconst hueBackground = `linear-gradient(${[\n `var(${colorSliderCSSVars.sliderDirectionVar})`,\n 'red',\n 'fuchsia',\n 'blue',\n 'aqua',\n 'lime',\n 'yellow',\n 'red'\n].join(',')})`;\n/**\n * Styles for the root slot\n */ const useRootStyles = makeResetStyles({\n position: 'relative',\n display: 'inline-grid',\n touchAction: 'none',\n alignItems: 'center',\n justifyItems: 'center',\n [colorSliderCSSVars.thumbSizeVar]: '20px',\n [colorSliderCSSVars.railSizeVar]: '20px',\n minHeight: '32px'\n});\nconst useStyles = makeStyles({\n horizontal: {\n minWidth: '200px',\n // 3x3 grid with the rail and thumb in the center cell [2,2] and the hidden input stretching across all cells\n gridTemplateRows: `1fr var(${colorSliderCSSVars.thumbSizeVar}) 1fr`,\n gridTemplateColumns: `1fr 100% 1fr`\n },\n vertical: {\n minHeight: '280px',\n // 3x3 grid with the rail and thumb in the center cell [2,2] and the hidden input stretching across all cells\n gridTemplateRows: `1fr 100% 1fr`,\n gridTemplateColumns: `1fr var(${colorSliderCSSVars.thumbSizeVar}) 1fr`\n }\n});\nconst useChannelStyles = makeStyles({\n hue: {\n backgroundImage: hueBackground\n },\n saturation: {\n backgroundImage: `linear-gradient(to right, #808080, var(${colorSliderCSSVars.railColorVar}))`\n },\n value: {\n backgroundImage: `linear-gradient(to right, #000, var(${colorSliderCSSVars.railColorVar}))`\n }\n});\n/**\n * Styles for the rail slot\n */ const useRailStyles = makeStyles({\n rail: {\n pointerEvents: 'none',\n gridRowStart: '2',\n gridRowEnd: '2',\n gridColumnStart: '2',\n gridColumnEnd: '2',\n position: 'relative',\n forcedColorAdjust: 'none',\n outlineWidth: '1px',\n outlineStyle: 'solid',\n outlineColor: tokens.colorTransparentStroke,\n '::before': {\n content: \"''\",\n position: 'absolute'\n }\n },\n horizontal: {\n width: '100%',\n height: `var(${colorSliderCSSVars.railSizeVar})`,\n '::before': {\n left: '-1px',\n right: '-1px',\n height: `var(${colorSliderCSSVars.railSizeVar})`\n }\n },\n vertical: {\n width: `var(${colorSliderCSSVars.railSizeVar})`,\n height: '100%',\n '::before': {\n width: `var(${colorSliderCSSVars.railSizeVar})`,\n top: '-1px',\n bottom: '1px'\n }\n }\n});\n/**\n * Styles for the thumb slot\n */ const useThumbStyles = makeStyles({\n thumb: {\n gridRowStart: '2',\n gridRowEnd: '2',\n gridColumnStart: '2',\n gridColumnEnd: '2',\n position: 'absolute',\n width: `var(${colorSliderCSSVars.thumbSizeVar})`,\n height: `var(${colorSliderCSSVars.thumbSizeVar})`,\n pointerEvents: 'none',\n outlineStyle: 'none',\n forcedColorAdjust: 'none',\n borderRadius: tokens.borderRadiusCircular,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralForeground4}`,\n boxShadow: tokens.shadow4,\n backgroundColor: `var(${colorSliderCSSVars.thumbColorVar})`,\n '::before': {\n position: 'absolute',\n inset: '0px',\n borderRadius: tokens.borderRadiusCircular,\n boxSizing: 'border-box',\n content: \"''\",\n border: `${tokens.strokeWidthThick} solid ${tokens.colorNeutralBackground1}`\n }\n },\n horizontal: {\n transform: 'translateX(-50%)',\n left: `var(${colorSliderCSSVars.sliderProgressVar})`\n },\n vertical: {\n transform: 'translateY(50%)',\n bottom: `var(${colorSliderCSSVars.sliderProgressVar})`\n }\n});\nconst useShapeStyles = makeStyles({\n rounded: {\n borderRadius: tokens.borderRadiusMedium\n },\n square: {\n borderRadius: tokens.borderRadiusNone\n }\n});\n/**\n * Styles for the Input slot\n */ const useInputStyles = makeStyles({\n input: {\n cursor: 'pointer',\n opacity: 0,\n gridRowStart: '1',\n gridRowEnd: '-1',\n gridColumnStart: '1',\n gridColumnEnd: '-1',\n padding: '0',\n margin: '0',\n [`:focus-visible ~ .${colorSliderClassNames.thumb}`]: {\n border: `2px solid ${tokens.colorStrokeFocus2}`,\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorTransparentStroke}`,\n borderRadius: tokens.borderRadiusCircular\n }\n },\n horizontal: {\n height: `var(${colorSliderCSSVars.thumbSizeVar})`,\n width: '100%'\n },\n vertical: {\n height: '100%',\n width: `var(${colorSliderCSSVars.thumbSizeVar})`,\n 'writing-mode': 'vertical-lr',\n direction: 'rtl'\n }\n});\n/**\n * Apply styling to the ColorSlider slots based on the state\n */ export const useColorSliderStyles_unstable = (state)=>{\n const rootStyles = useRootStyles();\n const styles = useStyles();\n const railStyles = useRailStyles();\n const thumbStyles = useThumbStyles();\n const inputStyles = useInputStyles();\n const shapeStyles = useShapeStyles();\n const channelStyles = useChannelStyles();\n const isVertical = state.vertical;\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(colorSliderClassNames.root, rootStyles, isVertical ? styles.vertical : styles.horizontal, state.root.className);\n // eslint-disable-next-line react-hooks/immutability\n state.rail.className = mergeClasses(colorSliderClassNames.rail, railStyles.rail, channelStyles[state.channel || 'hue'], shapeStyles[state.shape || 'rounded'], isVertical ? railStyles.vertical : railStyles.horizontal, state.rail.className);\n // eslint-disable-next-line react-hooks/immutability\n state.thumb.className = mergeClasses(colorSliderClassNames.thumb, thumbStyles.thumb, isVertical ? thumbStyles.vertical : thumbStyles.horizontal, state.thumb.className);\n // eslint-disable-next-line react-hooks/immutability\n state.input.className = mergeClasses(colorSliderClassNames.input, inputStyles.input, isVertical ? inputStyles.vertical : inputStyles.horizontal, state.input.className);\n return state;\n};\n"],"mappings":"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","ignoreList":[]}
|