@fluentui/react-color-picker 9.0.4 → 9.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +12 -2
- package/dist/index.d.ts +1 -1
- package/lib/components/ColorArea/ColorArea.types.js.map +1 -1
- package/lib/components/ColorArea/useColorArea.js +8 -8
- package/lib/components/ColorArea/useColorArea.js.map +1 -1
- package/lib/utils/getCoordinates.js.map +1 -1
- package/lib-commonjs/components/ColorArea/ColorArea.types.js.map +1 -1
- package/lib-commonjs/components/ColorArea/useColorArea.js +8 -8
- package/lib-commonjs/components/ColorArea/useColorArea.js.map +1 -1
- package/lib-commonjs/utils/getCoordinates.js.map +1 -1
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,22 @@
|
|
|
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, 14 May 2025 18:45:45 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.0.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-color-picker_v9.0.5)
|
|
8
|
+
|
|
9
|
+
Wed, 14 May 2025 18:45:45 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-color-picker_v9.0.4..@fluentui/react-color-picker_v9.0.5)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- fix: added touch events for ColorArea ([PR #34328](https://github.com/microsoft/fluentui/pull/34328) by v.kozlova13@gmail.com)
|
|
15
|
+
- Bump @fluentui/react-tabster to v9.24.7 ([PR #34449](https://github.com/microsoft/fluentui/pull/34449) by beachball)
|
|
16
|
+
|
|
7
17
|
## [9.0.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-color-picker_v9.0.4)
|
|
8
18
|
|
|
9
|
-
Thu, 24 Apr 2025 09:
|
|
19
|
+
Thu, 24 Apr 2025 09:59:45 GMT
|
|
10
20
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-color-picker_v9.0.3..@fluentui/react-color-picker_v9.0.4)
|
|
11
21
|
|
|
12
22
|
### Patches
|
package/dist/index.d.ts
CHANGED
|
@@ -43,7 +43,7 @@ export declare const ColorArea: ForwardRefComponent<ColorAreaProps>;
|
|
|
43
43
|
|
|
44
44
|
export declare const colorAreaClassNames: SlotClassNames<ColorAreaSlots>;
|
|
45
45
|
|
|
46
|
-
declare type ColorAreaOnColorChangeData = EventData<'change', React_2.SyntheticEvent |
|
|
46
|
+
declare type ColorAreaOnColorChangeData = EventData<'change', React_2.SyntheticEvent | PointerEvent> & {
|
|
47
47
|
color: HsvColor;
|
|
48
48
|
};
|
|
49
49
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/ColorArea/ColorArea.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentState, Slot, EventHandler, EventData, ComponentProps } from '@fluentui/react-utilities';\nimport type { HsvColor } from '../../types/color';\nimport type { ColorPickerProps } from '../ColorPicker/ColorPicker.types';\n\nexport type ColorAreaOnColorChangeData = EventData<'change', React.SyntheticEvent |
|
|
1
|
+
{"version":3,"sources":["../src/components/ColorArea/ColorArea.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentState, Slot, EventHandler, EventData, ComponentProps } from '@fluentui/react-utilities';\nimport type { HsvColor } from '../../types/color';\nimport type { ColorPickerProps } from '../ColorPicker/ColorPicker.types';\n\nexport type ColorAreaOnColorChangeData = EventData<'change', React.SyntheticEvent | PointerEvent> & {\n color: HsvColor;\n};\n\nexport type ColorAreaSlots = {\n root: NonNullable<Slot<'div'>>;\n thumb?: NonNullable<Slot<'div'>>;\n inputX?: NonNullable<Slot<'input'>>;\n inputY?: NonNullable<Slot<'input'>>;\n};\n\n/**\n * ColorArea Props\n */\nexport type ColorAreaProps = Omit<ComponentProps<Partial<ColorAreaSlots>>, 'color' | 'onChange'> &\n Pick<ColorPickerProps, 'shape'> & {\n /**\n * The current color of the ColorArea.\n */\n color?: HsvColor;\n\n /**\n * The starting value for an uncontrolled ColorArea.\n */\n defaultColor?: HsvColor;\n\n /**\n * Triggers a callback when the value has been changed. This will be called on every individual step.\n */\n onChange?: EventHandler<ColorAreaOnColorChangeData>;\n };\n\n/**\n * State used in rendering ColorArea\n */\nexport type ColorAreaState = ComponentState<Required<ColorAreaSlots>> & Pick<ColorAreaProps, 'color' | 'shape'>;\n"],"names":["React"],"rangeMappings":"","mappings":"AAAA,YAAYA,WAAW,QAAQ"}
|
|
@@ -48,24 +48,24 @@ import { useColorPickerContextValue_unstable } from '../../contexts/colorPicker'
|
|
|
48
48
|
setColor(newColor);
|
|
49
49
|
onChange === null || onChange === void 0 ? void 0 : onChange(event, {
|
|
50
50
|
type: 'change',
|
|
51
|
-
event,
|
|
51
|
+
event: event,
|
|
52
52
|
color: newColor
|
|
53
53
|
});
|
|
54
54
|
});
|
|
55
|
-
const
|
|
55
|
+
const handleDocumentPointerMove = React.useCallback((event)=>{
|
|
56
56
|
requestColorChange(event);
|
|
57
57
|
}, [
|
|
58
58
|
requestColorChange
|
|
59
59
|
]);
|
|
60
|
-
const
|
|
61
|
-
targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('
|
|
60
|
+
const handleDocumentPointerUp = useEventCallback(()=>{
|
|
61
|
+
targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('pointermove', handleDocumentPointerMove);
|
|
62
62
|
});
|
|
63
|
-
const
|
|
63
|
+
const handleRootOnPointerDown = useEventCallback((event)=>{
|
|
64
64
|
event.stopPropagation();
|
|
65
65
|
event.preventDefault();
|
|
66
66
|
requestColorChange(event.nativeEvent);
|
|
67
|
-
targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('
|
|
68
|
-
targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('
|
|
67
|
+
targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('pointermove', handleDocumentPointerMove);
|
|
68
|
+
targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('pointerup', handleDocumentPointerUp, {
|
|
69
69
|
once: true
|
|
70
70
|
});
|
|
71
71
|
});
|
|
@@ -179,7 +179,7 @@ import { useColorPickerContextValue_unstable } from '../../contexts/colorPicker'
|
|
|
179
179
|
...state.root.style,
|
|
180
180
|
...rootVariables
|
|
181
181
|
};
|
|
182
|
-
state.root.
|
|
182
|
+
state.root.onPointerDown = useEventCallback(mergeCallbacks(state.root.onPointerDown, handleRootOnPointerDown));
|
|
183
183
|
state.root.onKeyDown = useEventCallback(mergeCallbacks(state.root.onKeyDown, handleRootOnKeyDown));
|
|
184
184
|
state.inputX.onChange = useEventCallback(mergeCallbacks(state.inputX.onChange, handleInputOnChange));
|
|
185
185
|
state.inputY.onChange = useEventCallback(mergeCallbacks(state.inputY.onChange, handleInputOnChange));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/ColorArea/useColorArea.ts"],"sourcesContent":["import * as React from 'react';\nimport { tinycolor } from '@ctrl/tinycolor';\nimport { useId, slot, useMergedRefs, mergeCallbacks, getIntrinsicElementProps } from '@fluentui/react-utilities';\nimport type { ColorAreaProps, ColorAreaState } from './ColorArea.types';\nimport type { HsvColor } from '../../types/color';\nimport { colorAreaCSSVars } from './useColorAreaStyles.styles';\nimport { useEventCallback, useControllableState } from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useFocusWithin } from '@fluentui/react-tabster';\nimport { INITIAL_COLOR_HSV } from '../../utils/constants';\nimport { getCoordinates } from '../../utils/getCoordinates';\nimport { useColorPickerContextValue_unstable } from '../../contexts/colorPicker';\n\n/**\n * Create the state required to render ColorArea.\n *\n * The returned state can be modified with hooks such as useColorAreaStyles_unstable,\n * before being passed to renderColorArea_unstable.\n *\n * @param props - props from this instance of ColorArea\n * @param ref - reference to root HTMLDivElement of ColorArea\n */\nexport const useColorArea_unstable = (props: ColorAreaProps, ref: React.Ref<HTMLDivElement>): ColorAreaState => {\n const { targetDocument } = useFluent();\n const rootRef = React.useRef<HTMLDivElement>(null);\n const xRef = React.useRef<HTMLInputElement>(null);\n const yRef = React.useRef<HTMLInputElement>(null);\n const focusWithinRef = useFocusWithin();\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\n const {\n onChange = onChangeFromContext as unknown as ColorAreaProps['onChange'],\n shape = shapeFromContext,\n // Slots\n inputX,\n inputY,\n thumb,\n color,\n ...rest\n } = props;\n\n const [hsvColor, setColor] = useControllableState<HsvColor>({\n defaultState: props.defaultColor,\n state: color || colorFromContext,\n initialState: INITIAL_COLOR_HSV,\n });\n const saturation = Math.round(hsvColor.s * 100);\n const value = Math.round(hsvColor.v * 100);\n\n const [activeAxis, setActiveAxis] = React.useState<'x' | 'y' | null>(null);\n\n const requestColorChange = useEventCallback((event: MouseEvent) => {\n if (!rootRef.current) {\n return;\n }\n\n const coordinates = getCoordinates(rootRef.current, event);\n const newColor: HsvColor = {\n ...hsvColor,\n s: coordinates.x,\n v: coordinates.y,\n };\n\n setColor(newColor);\n onChange?.(event, { type: 'change', event, color: newColor });\n });\n\n const handleDocumentMouseMove = React.useCallback(\n (event: MouseEvent) => {\n requestColorChange(event);\n },\n [requestColorChange],\n );\n const handleDocumentMouseUp = useEventCallback(() => {\n targetDocument?.removeEventListener('mousemove', handleDocumentMouseMove);\n });\n\n const handleRootOnMouseDown: React.MouseEventHandler<HTMLDivElement> = useEventCallback(event => {\n event.stopPropagation();\n event.preventDefault();\n\n requestColorChange(event.nativeEvent);\n\n targetDocument?.addEventListener('mousemove', handleDocumentMouseMove);\n targetDocument?.addEventListener('mouseup', handleDocumentMouseUp, { once: true });\n });\n\n const handleInputOnChange: React.ChangeEventHandler<HTMLInputElement> = useEventCallback(event => {\n const targetValue = Number(event.target.value) / 100;\n const newColor: HsvColor = {\n ...hsvColor,\n ...(event.target === xRef.current && { s: targetValue }),\n ...(event.target === yRef.current && { v: targetValue }),\n };\n\n setColor(newColor);\n onChange?.(event, { type: 'change', event, color: newColor });\n });\n\n const handleRootOnKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLDivElement>) => {\n let deltaX = 0;\n let deltaY = 0;\n let axis: 'x' | 'y' = 'x';\n\n switch (event.key) {\n case 'ArrowUp':\n event.preventDefault();\n\n axis = 'y';\n deltaY = 1;\n\n break;\n case 'ArrowDown':\n event.preventDefault();\n\n axis = 'y';\n deltaY = -1;\n\n break;\n case 'ArrowLeft':\n event.preventDefault();\n\n axis = 'x';\n deltaX = -1;\n\n break;\n case 'ArrowRight':\n event.preventDefault();\n\n axis = 'x';\n deltaX = 1;\n\n break;\n }\n\n if (deltaX === 0 && deltaY === 0) {\n return;\n }\n\n const newColor: HsvColor = {\n ...hsvColor,\n s: Math.min(Math.max(hsvColor.s + deltaX / 100, 0), 1),\n v: Math.min(Math.max(hsvColor.v + deltaY / 100, 0), 1),\n };\n\n setColor(newColor);\n setActiveAxis(axis);\n\n onChange?.(event, { type: 'change', event, color: newColor });\n });\n\n const rootVariables = {\n [colorAreaCSSVars.areaXProgressVar]: `${saturation}%`,\n [colorAreaCSSVars.areaYProgressVar]: `${value}%`,\n [colorAreaCSSVars.thumbColorVar]: tinycolor(hsvColor).toRgbString(),\n [colorAreaCSSVars.mainColorVar]: `hsl(${hsvColor.h}, 100%, 50%)`,\n };\n const state: ColorAreaState = {\n shape,\n components: {\n inputX: 'input',\n inputY: 'input',\n root: 'div',\n thumb: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref,\n ...rest,\n }),\n { elementType: 'div' },\n ),\n inputX: slot.always(inputX, {\n defaultProps: {\n id: useId('sliderX-'),\n type: 'range',\n ...(activeAxis && { tabIndex: activeAxis === 'x' ? 0 : -1 }),\n },\n elementType: 'input',\n }),\n inputY: slot.always(inputY, {\n defaultProps: {\n id: useId('sliderY-'),\n type: 'range',\n tabIndex: activeAxis && activeAxis === 'y' ? 0 : -1,\n },\n elementType: 'input',\n }),\n thumb: slot.always(thumb, { elementType: 'div' }),\n };\n\n state.root.ref = useMergedRefs(state.root.ref, rootRef);\n state.thumb.ref = useMergedRefs(state.thumb.ref, focusWithinRef);\n state.inputX.ref = useMergedRefs(state.inputX.ref, xRef);\n state.inputY.ref = useMergedRefs(state.inputY.ref, yRef);\n\n state.root.style = {\n ...state.root.style,\n ...rootVariables,\n };\n\n state.root.onMouseDown = useEventCallback(mergeCallbacks(state.root.onMouseDown, handleRootOnMouseDown));\n state.root.onKeyDown = useEventCallback(mergeCallbacks(state.root.onKeyDown, handleRootOnKeyDown));\n state.inputX.onChange = useEventCallback(mergeCallbacks(state.inputX.onChange, handleInputOnChange));\n state.inputY.onChange = useEventCallback(mergeCallbacks(state.inputY.onChange, handleInputOnChange));\n\n state.inputX.value = saturation;\n state.inputY.value = value;\n\n return state;\n};\n"],"names":["React","tinycolor","useId","slot","useMergedRefs","mergeCallbacks","getIntrinsicElementProps","colorAreaCSSVars","useEventCallback","useControllableState","useFluent_unstable","useFluent","useFocusWithin","INITIAL_COLOR_HSV","getCoordinates","useColorPickerContextValue_unstable","useColorArea_unstable","props","ref","targetDocument","rootRef","useRef","xRef","yRef","focusWithinRef","onChangeFromContext","ctx","requestChange","colorFromContext","color","shapeFromContext","shape","onChange","inputX","inputY","thumb","rest","hsvColor","setColor","defaultState","defaultColor","state","initialState","saturation","Math","round","s","value","v","activeAxis","setActiveAxis","useState","requestColorChange","event","current","coordinates","newColor","x","y","type","handleDocumentMouseMove","useCallback","handleDocumentMouseUp","removeEventListener","handleRootOnMouseDown","stopPropagation","preventDefault","nativeEvent","addEventListener","once","handleInputOnChange","targetValue","Number","target","handleRootOnKeyDown","deltaX","deltaY","axis","key","min","max","rootVariables","areaXProgressVar","areaYProgressVar","thumbColorVar","toRgbString","mainColorVar","h","components","root","always","elementType","defaultProps","id","tabIndex","style","onMouseDown","onKeyDown"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../src/components/ColorArea/useColorArea.ts"],"sourcesContent":["import * as React from 'react';\nimport { tinycolor } from '@ctrl/tinycolor';\nimport { useId, slot, useMergedRefs, mergeCallbacks, getIntrinsicElementProps } from '@fluentui/react-utilities';\nimport type { ColorAreaProps, ColorAreaState } from './ColorArea.types';\nimport type { HsvColor } from '../../types/color';\nimport { colorAreaCSSVars } from './useColorAreaStyles.styles';\nimport { useEventCallback, useControllableState } from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useFocusWithin } from '@fluentui/react-tabster';\nimport { INITIAL_COLOR_HSV } from '../../utils/constants';\nimport { getCoordinates } from '../../utils/getCoordinates';\nimport { useColorPickerContextValue_unstable } from '../../contexts/colorPicker';\n\n/**\n * Create the state required to render ColorArea.\n *\n * The returned state can be modified with hooks such as useColorAreaStyles_unstable,\n * before being passed to renderColorArea_unstable.\n *\n * @param props - props from this instance of ColorArea\n * @param ref - reference to root HTMLDivElement of ColorArea\n */\nexport const useColorArea_unstable = (props: ColorAreaProps, ref: React.Ref<HTMLDivElement>): ColorAreaState => {\n const { targetDocument } = useFluent();\n const rootRef = React.useRef<HTMLDivElement>(null);\n const xRef = React.useRef<HTMLInputElement>(null);\n const yRef = React.useRef<HTMLInputElement>(null);\n const focusWithinRef = useFocusWithin();\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\n const {\n onChange = onChangeFromContext as unknown as ColorAreaProps['onChange'],\n shape = shapeFromContext,\n // Slots\n inputX,\n inputY,\n thumb,\n color,\n ...rest\n } = props;\n\n const [hsvColor, setColor] = useControllableState<HsvColor>({\n defaultState: props.defaultColor,\n state: color || colorFromContext,\n initialState: INITIAL_COLOR_HSV,\n });\n const saturation = Math.round(hsvColor.s * 100);\n const value = Math.round(hsvColor.v * 100);\n\n const [activeAxis, setActiveAxis] = React.useState<'x' | 'y' | null>(null);\n\n const requestColorChange = useEventCallback((event: PointerEvent) => {\n if (!rootRef.current) {\n return;\n }\n\n const coordinates = getCoordinates(rootRef.current, event);\n const newColor: HsvColor = {\n ...hsvColor,\n s: coordinates.x,\n v: coordinates.y,\n };\n\n setColor(newColor);\n onChange?.(event, {\n type: 'change',\n event: event,\n color: newColor,\n });\n });\n\n const handleDocumentPointerMove = React.useCallback(\n (event: PointerEvent) => {\n requestColorChange(event);\n },\n [requestColorChange],\n );\n\n const handleDocumentPointerUp = useEventCallback(() => {\n targetDocument?.removeEventListener('pointermove', handleDocumentPointerMove);\n });\n\n const handleRootOnPointerDown: React.PointerEventHandler<HTMLDivElement> = useEventCallback(event => {\n event.stopPropagation();\n event.preventDefault();\n\n requestColorChange(event.nativeEvent);\n\n targetDocument?.addEventListener('pointermove', handleDocumentPointerMove);\n targetDocument?.addEventListener('pointerup', handleDocumentPointerUp, { once: true });\n });\n\n const handleInputOnChange: React.ChangeEventHandler<HTMLInputElement> = useEventCallback(event => {\n const targetValue = Number(event.target.value) / 100;\n const newColor: HsvColor = {\n ...hsvColor,\n ...(event.target === xRef.current && { s: targetValue }),\n ...(event.target === yRef.current && { v: targetValue }),\n };\n\n setColor(newColor);\n onChange?.(event, { type: 'change', event, color: newColor });\n });\n\n const handleRootOnKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLDivElement>) => {\n let deltaX = 0;\n let deltaY = 0;\n let axis: 'x' | 'y' = 'x';\n\n switch (event.key) {\n case 'ArrowUp':\n event.preventDefault();\n\n axis = 'y';\n deltaY = 1;\n\n break;\n case 'ArrowDown':\n event.preventDefault();\n\n axis = 'y';\n deltaY = -1;\n\n break;\n case 'ArrowLeft':\n event.preventDefault();\n\n axis = 'x';\n deltaX = -1;\n\n break;\n case 'ArrowRight':\n event.preventDefault();\n\n axis = 'x';\n deltaX = 1;\n\n break;\n }\n\n if (deltaX === 0 && deltaY === 0) {\n return;\n }\n\n const newColor: HsvColor = {\n ...hsvColor,\n s: Math.min(Math.max(hsvColor.s + deltaX / 100, 0), 1),\n v: Math.min(Math.max(hsvColor.v + deltaY / 100, 0), 1),\n };\n\n setColor(newColor);\n setActiveAxis(axis);\n\n onChange?.(event, { type: 'change', event, color: newColor });\n });\n\n const rootVariables = {\n [colorAreaCSSVars.areaXProgressVar]: `${saturation}%`,\n [colorAreaCSSVars.areaYProgressVar]: `${value}%`,\n [colorAreaCSSVars.thumbColorVar]: tinycolor(hsvColor).toRgbString(),\n [colorAreaCSSVars.mainColorVar]: `hsl(${hsvColor.h}, 100%, 50%)`,\n };\n const state: ColorAreaState = {\n shape,\n components: {\n inputX: 'input',\n inputY: 'input',\n root: 'div',\n thumb: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref,\n ...rest,\n }),\n { elementType: 'div' },\n ),\n inputX: slot.always(inputX, {\n defaultProps: {\n id: useId('sliderX-'),\n type: 'range',\n ...(activeAxis && { tabIndex: activeAxis === 'x' ? 0 : -1 }),\n },\n elementType: 'input',\n }),\n inputY: slot.always(inputY, {\n defaultProps: {\n id: useId('sliderY-'),\n type: 'range',\n tabIndex: activeAxis && activeAxis === 'y' ? 0 : -1,\n },\n elementType: 'input',\n }),\n thumb: slot.always(thumb, { elementType: 'div' }),\n };\n\n state.root.ref = useMergedRefs(state.root.ref, rootRef);\n state.thumb.ref = useMergedRefs(state.thumb.ref, focusWithinRef);\n state.inputX.ref = useMergedRefs(state.inputX.ref, xRef);\n state.inputY.ref = useMergedRefs(state.inputY.ref, yRef);\n\n state.root.style = {\n ...state.root.style,\n ...rootVariables,\n };\n\n state.root.onPointerDown = useEventCallback(mergeCallbacks(state.root.onPointerDown, handleRootOnPointerDown));\n state.root.onKeyDown = useEventCallback(mergeCallbacks(state.root.onKeyDown, handleRootOnKeyDown));\n state.inputX.onChange = useEventCallback(mergeCallbacks(state.inputX.onChange, handleInputOnChange));\n state.inputY.onChange = useEventCallback(mergeCallbacks(state.inputY.onChange, handleInputOnChange));\n\n state.inputX.value = saturation;\n state.inputY.value = value;\n\n return state;\n};\n"],"names":["React","tinycolor","useId","slot","useMergedRefs","mergeCallbacks","getIntrinsicElementProps","colorAreaCSSVars","useEventCallback","useControllableState","useFluent_unstable","useFluent","useFocusWithin","INITIAL_COLOR_HSV","getCoordinates","useColorPickerContextValue_unstable","useColorArea_unstable","props","ref","targetDocument","rootRef","useRef","xRef","yRef","focusWithinRef","onChangeFromContext","ctx","requestChange","colorFromContext","color","shapeFromContext","shape","onChange","inputX","inputY","thumb","rest","hsvColor","setColor","defaultState","defaultColor","state","initialState","saturation","Math","round","s","value","v","activeAxis","setActiveAxis","useState","requestColorChange","event","current","coordinates","newColor","x","y","type","handleDocumentPointerMove","useCallback","handleDocumentPointerUp","removeEventListener","handleRootOnPointerDown","stopPropagation","preventDefault","nativeEvent","addEventListener","once","handleInputOnChange","targetValue","Number","target","handleRootOnKeyDown","deltaX","deltaY","axis","key","min","max","rootVariables","areaXProgressVar","areaYProgressVar","thumbColorVar","toRgbString","mainColorVar","h","components","root","always","elementType","defaultProps","id","tabIndex","style","onPointerDown","onKeyDown"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/utils/getCoordinates.ts"],"sourcesContent":["import { clamp } from '@fluentui/react-utilities';\n\n/**\n * Calculates the normalized coordinates of a mouse event relative to a given HTML element.\n *\n * @param element - The HTML element to calculate the coordinates relative to.\n * @param event - The mouse event containing the clientX and clientY properties.\n * @returns An object containing the normalized x and y coordinates, clamped between 0 and 1.\n */\nexport function getCoordinates(element: HTMLElement, event:
|
|
1
|
+
{"version":3,"sources":["../src/utils/getCoordinates.ts"],"sourcesContent":["import { clamp } from '@fluentui/react-utilities';\n\n/**\n * Calculates the normalized coordinates of a mouse event relative to a given HTML element.\n *\n * @param element - The HTML element to calculate the coordinates relative to.\n * @param event - The mouse event containing the clientX and clientY properties.\n * @returns An object containing the normalized x and y coordinates, clamped between 0 and 1.\n */\nexport function getCoordinates(element: HTMLElement, event: PointerEvent) {\n const rect = element.getBoundingClientRect();\n\n const newX = roundTwoDecimal((event.clientX - rect.left) / rect.width);\n const newY = roundTwoDecimal(1 - (event.clientY - rect.top) / rect.height);\n\n return {\n x: clamp(newX, 0, 1),\n y: clamp(newY, 0, 1),\n };\n}\n\n/**\n * Rounds a given number to two decimal places.\n *\n * @param num - The number to be rounded.\n * @returns The number rounded to two decimal places.\n */\nexport function roundTwoDecimal(num: number) {\n return Math.round(num * 100) / 100;\n}\n"],"names":["clamp","getCoordinates","element","event","rect","getBoundingClientRect","newX","roundTwoDecimal","clientX","left","width","newY","clientY","top","height","x","y","num","Math","round"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,KAAK,QAAQ,4BAA4B;AAElD;;;;;;CAMC,GACD,OAAO,SAASC,eAAeC,OAAoB,EAAEC,KAAmB;IACtE,MAAMC,OAAOF,QAAQG,qBAAqB;IAE1C,MAAMC,OAAOC,gBAAgB,AAACJ,CAAAA,MAAMK,OAAO,GAAGJ,KAAKK,IAAI,AAAD,IAAKL,KAAKM,KAAK;IACrE,MAAMC,OAAOJ,gBAAgB,IAAI,AAACJ,CAAAA,MAAMS,OAAO,GAAGR,KAAKS,GAAG,AAAD,IAAKT,KAAKU,MAAM;IAEzE,OAAO;QACLC,GAAGf,MAAMM,MAAM,GAAG;QAClBU,GAAGhB,MAAMW,MAAM,GAAG;IACpB;AACF;AAEA;;;;;CAKC,GACD,OAAO,SAASJ,gBAAgBU,GAAW;IACzC,OAAOC,KAAKC,KAAK,CAACF,MAAM,OAAO;AACjC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/ColorArea/ColorArea.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentState, Slot, EventHandler, EventData, ComponentProps } from '@fluentui/react-utilities';\nimport type { HsvColor } from '../../types/color';\nimport type { ColorPickerProps } from '../ColorPicker/ColorPicker.types';\n\nexport type ColorAreaOnColorChangeData = EventData<'change', React.SyntheticEvent |
|
|
1
|
+
{"version":3,"sources":["../src/components/ColorArea/ColorArea.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentState, Slot, EventHandler, EventData, ComponentProps } from '@fluentui/react-utilities';\nimport type { HsvColor } from '../../types/color';\nimport type { ColorPickerProps } from '../ColorPicker/ColorPicker.types';\n\nexport type ColorAreaOnColorChangeData = EventData<'change', React.SyntheticEvent | PointerEvent> & {\n color: HsvColor;\n};\n\nexport type ColorAreaSlots = {\n root: NonNullable<Slot<'div'>>;\n thumb?: NonNullable<Slot<'div'>>;\n inputX?: NonNullable<Slot<'input'>>;\n inputY?: NonNullable<Slot<'input'>>;\n};\n\n/**\n * ColorArea Props\n */\nexport type ColorAreaProps = Omit<ComponentProps<Partial<ColorAreaSlots>>, 'color' | 'onChange'> &\n Pick<ColorPickerProps, 'shape'> & {\n /**\n * The current color of the ColorArea.\n */\n color?: HsvColor;\n\n /**\n * The starting value for an uncontrolled ColorArea.\n */\n defaultColor?: HsvColor;\n\n /**\n * Triggers a callback when the value has been changed. This will be called on every individual step.\n */\n onChange?: EventHandler<ColorAreaOnColorChangeData>;\n };\n\n/**\n * State used in rendering ColorArea\n */\nexport type ColorAreaState = ComponentState<Required<ColorAreaSlots>> & Pick<ColorAreaProps, 'color' | 'shape'>;\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;iEAAuB"}
|
|
@@ -49,24 +49,24 @@ const useColorArea_unstable = (props, ref)=>{
|
|
|
49
49
|
setColor(newColor);
|
|
50
50
|
onChange === null || onChange === void 0 ? void 0 : onChange(event, {
|
|
51
51
|
type: 'change',
|
|
52
|
-
event,
|
|
52
|
+
event: event,
|
|
53
53
|
color: newColor
|
|
54
54
|
});
|
|
55
55
|
});
|
|
56
|
-
const
|
|
56
|
+
const handleDocumentPointerMove = _react.useCallback((event)=>{
|
|
57
57
|
requestColorChange(event);
|
|
58
58
|
}, [
|
|
59
59
|
requestColorChange
|
|
60
60
|
]);
|
|
61
|
-
const
|
|
62
|
-
targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('
|
|
61
|
+
const handleDocumentPointerUp = (0, _reactutilities.useEventCallback)(()=>{
|
|
62
|
+
targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('pointermove', handleDocumentPointerMove);
|
|
63
63
|
});
|
|
64
|
-
const
|
|
64
|
+
const handleRootOnPointerDown = (0, _reactutilities.useEventCallback)((event)=>{
|
|
65
65
|
event.stopPropagation();
|
|
66
66
|
event.preventDefault();
|
|
67
67
|
requestColorChange(event.nativeEvent);
|
|
68
|
-
targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('
|
|
69
|
-
targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('
|
|
68
|
+
targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('pointermove', handleDocumentPointerMove);
|
|
69
|
+
targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('pointerup', handleDocumentPointerUp, {
|
|
70
70
|
once: true
|
|
71
71
|
});
|
|
72
72
|
});
|
|
@@ -180,7 +180,7 @@ const useColorArea_unstable = (props, ref)=>{
|
|
|
180
180
|
...state.root.style,
|
|
181
181
|
...rootVariables
|
|
182
182
|
};
|
|
183
|
-
state.root.
|
|
183
|
+
state.root.onPointerDown = (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(state.root.onPointerDown, handleRootOnPointerDown));
|
|
184
184
|
state.root.onKeyDown = (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(state.root.onKeyDown, handleRootOnKeyDown));
|
|
185
185
|
state.inputX.onChange = (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(state.inputX.onChange, handleInputOnChange));
|
|
186
186
|
state.inputY.onChange = (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(state.inputY.onChange, handleInputOnChange));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/ColorArea/useColorArea.ts"],"sourcesContent":["import * as React from 'react';\nimport { tinycolor } from '@ctrl/tinycolor';\nimport { useId, slot, useMergedRefs, mergeCallbacks, getIntrinsicElementProps } from '@fluentui/react-utilities';\nimport type { ColorAreaProps, ColorAreaState } from './ColorArea.types';\nimport type { HsvColor } from '../../types/color';\nimport { colorAreaCSSVars } from './useColorAreaStyles.styles';\nimport { useEventCallback, useControllableState } from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useFocusWithin } from '@fluentui/react-tabster';\nimport { INITIAL_COLOR_HSV } from '../../utils/constants';\nimport { getCoordinates } from '../../utils/getCoordinates';\nimport { useColorPickerContextValue_unstable } from '../../contexts/colorPicker';\n\n/**\n * Create the state required to render ColorArea.\n *\n * The returned state can be modified with hooks such as useColorAreaStyles_unstable,\n * before being passed to renderColorArea_unstable.\n *\n * @param props - props from this instance of ColorArea\n * @param ref - reference to root HTMLDivElement of ColorArea\n */\nexport const useColorArea_unstable = (props: ColorAreaProps, ref: React.Ref<HTMLDivElement>): ColorAreaState => {\n const { targetDocument } = useFluent();\n const rootRef = React.useRef<HTMLDivElement>(null);\n const xRef = React.useRef<HTMLInputElement>(null);\n const yRef = React.useRef<HTMLInputElement>(null);\n const focusWithinRef = useFocusWithin();\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\n const {\n onChange = onChangeFromContext as unknown as ColorAreaProps['onChange'],\n shape = shapeFromContext,\n // Slots\n inputX,\n inputY,\n thumb,\n color,\n ...rest\n } = props;\n\n const [hsvColor, setColor] = useControllableState<HsvColor>({\n defaultState: props.defaultColor,\n state: color || colorFromContext,\n initialState: INITIAL_COLOR_HSV,\n });\n const saturation = Math.round(hsvColor.s * 100);\n const value = Math.round(hsvColor.v * 100);\n\n const [activeAxis, setActiveAxis] = React.useState<'x' | 'y' | null>(null);\n\n const requestColorChange = useEventCallback((event: MouseEvent) => {\n if (!rootRef.current) {\n return;\n }\n\n const coordinates = getCoordinates(rootRef.current, event);\n const newColor: HsvColor = {\n ...hsvColor,\n s: coordinates.x,\n v: coordinates.y,\n };\n\n setColor(newColor);\n onChange?.(event, { type: 'change', event, color: newColor });\n });\n\n const handleDocumentMouseMove = React.useCallback(\n (event: MouseEvent) => {\n requestColorChange(event);\n },\n [requestColorChange],\n );\n const handleDocumentMouseUp = useEventCallback(() => {\n targetDocument?.removeEventListener('mousemove', handleDocumentMouseMove);\n });\n\n const handleRootOnMouseDown: React.MouseEventHandler<HTMLDivElement> = useEventCallback(event => {\n event.stopPropagation();\n event.preventDefault();\n\n requestColorChange(event.nativeEvent);\n\n targetDocument?.addEventListener('mousemove', handleDocumentMouseMove);\n targetDocument?.addEventListener('mouseup', handleDocumentMouseUp, { once: true });\n });\n\n const handleInputOnChange: React.ChangeEventHandler<HTMLInputElement> = useEventCallback(event => {\n const targetValue = Number(event.target.value) / 100;\n const newColor: HsvColor = {\n ...hsvColor,\n ...(event.target === xRef.current && { s: targetValue }),\n ...(event.target === yRef.current && { v: targetValue }),\n };\n\n setColor(newColor);\n onChange?.(event, { type: 'change', event, color: newColor });\n });\n\n const handleRootOnKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLDivElement>) => {\n let deltaX = 0;\n let deltaY = 0;\n let axis: 'x' | 'y' = 'x';\n\n switch (event.key) {\n case 'ArrowUp':\n event.preventDefault();\n\n axis = 'y';\n deltaY = 1;\n\n break;\n case 'ArrowDown':\n event.preventDefault();\n\n axis = 'y';\n deltaY = -1;\n\n break;\n case 'ArrowLeft':\n event.preventDefault();\n\n axis = 'x';\n deltaX = -1;\n\n break;\n case 'ArrowRight':\n event.preventDefault();\n\n axis = 'x';\n deltaX = 1;\n\n break;\n }\n\n if (deltaX === 0 && deltaY === 0) {\n return;\n }\n\n const newColor: HsvColor = {\n ...hsvColor,\n s: Math.min(Math.max(hsvColor.s + deltaX / 100, 0), 1),\n v: Math.min(Math.max(hsvColor.v + deltaY / 100, 0), 1),\n };\n\n setColor(newColor);\n setActiveAxis(axis);\n\n onChange?.(event, { type: 'change', event, color: newColor });\n });\n\n const rootVariables = {\n [colorAreaCSSVars.areaXProgressVar]: `${saturation}%`,\n [colorAreaCSSVars.areaYProgressVar]: `${value}%`,\n [colorAreaCSSVars.thumbColorVar]: tinycolor(hsvColor).toRgbString(),\n [colorAreaCSSVars.mainColorVar]: `hsl(${hsvColor.h}, 100%, 50%)`,\n };\n const state: ColorAreaState = {\n shape,\n components: {\n inputX: 'input',\n inputY: 'input',\n root: 'div',\n thumb: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref,\n ...rest,\n }),\n { elementType: 'div' },\n ),\n inputX: slot.always(inputX, {\n defaultProps: {\n id: useId('sliderX-'),\n type: 'range',\n ...(activeAxis && { tabIndex: activeAxis === 'x' ? 0 : -1 }),\n },\n elementType: 'input',\n }),\n inputY: slot.always(inputY, {\n defaultProps: {\n id: useId('sliderY-'),\n type: 'range',\n tabIndex: activeAxis && activeAxis === 'y' ? 0 : -1,\n },\n elementType: 'input',\n }),\n thumb: slot.always(thumb, { elementType: 'div' }),\n };\n\n state.root.ref = useMergedRefs(state.root.ref, rootRef);\n state.thumb.ref = useMergedRefs(state.thumb.ref, focusWithinRef);\n state.inputX.ref = useMergedRefs(state.inputX.ref, xRef);\n state.inputY.ref = useMergedRefs(state.inputY.ref, yRef);\n\n state.root.style = {\n ...state.root.style,\n ...rootVariables,\n };\n\n state.root.onMouseDown = useEventCallback(mergeCallbacks(state.root.onMouseDown, handleRootOnMouseDown));\n state.root.onKeyDown = useEventCallback(mergeCallbacks(state.root.onKeyDown, handleRootOnKeyDown));\n state.inputX.onChange = useEventCallback(mergeCallbacks(state.inputX.onChange, handleInputOnChange));\n state.inputY.onChange = useEventCallback(mergeCallbacks(state.inputY.onChange, handleInputOnChange));\n\n state.inputX.value = saturation;\n state.inputY.value = value;\n\n return state;\n};\n"],"names":["useColorArea_unstable","props","ref","targetDocument","useFluent","rootRef","React","useRef","xRef","yRef","focusWithinRef","useFocusWithin","onChangeFromContext","useColorPickerContextValue_unstable","ctx","requestChange","colorFromContext","color","shapeFromContext","shape","onChange","inputX","inputY","thumb","rest","hsvColor","setColor","useControllableState","defaultState","defaultColor","state","initialState","INITIAL_COLOR_HSV","saturation","Math","round","s","value","v","activeAxis","setActiveAxis","useState","requestColorChange","useEventCallback","event","current","coordinates","getCoordinates","newColor","x","y","type","handleDocumentMouseMove","useCallback","handleDocumentMouseUp","removeEventListener","handleRootOnMouseDown","stopPropagation","preventDefault","nativeEvent","addEventListener","once","handleInputOnChange","targetValue","Number","target","handleRootOnKeyDown","deltaX","deltaY","axis","key","min","max","rootVariables","colorAreaCSSVars","areaXProgressVar","areaYProgressVar","thumbColorVar","tinycolor","toRgbString","mainColorVar","h","components","root","slot","always","getIntrinsicElementProps","elementType","defaultProps","id","useId","tabIndex","useMergedRefs","style","onMouseDown","mergeCallbacks","onKeyDown"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../src/components/ColorArea/useColorArea.ts"],"sourcesContent":["import * as React from 'react';\nimport { tinycolor } from '@ctrl/tinycolor';\nimport { useId, slot, useMergedRefs, mergeCallbacks, getIntrinsicElementProps } from '@fluentui/react-utilities';\nimport type { ColorAreaProps, ColorAreaState } from './ColorArea.types';\nimport type { HsvColor } from '../../types/color';\nimport { colorAreaCSSVars } from './useColorAreaStyles.styles';\nimport { useEventCallback, useControllableState } from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useFocusWithin } from '@fluentui/react-tabster';\nimport { INITIAL_COLOR_HSV } from '../../utils/constants';\nimport { getCoordinates } from '../../utils/getCoordinates';\nimport { useColorPickerContextValue_unstable } from '../../contexts/colorPicker';\n\n/**\n * Create the state required to render ColorArea.\n *\n * The returned state can be modified with hooks such as useColorAreaStyles_unstable,\n * before being passed to renderColorArea_unstable.\n *\n * @param props - props from this instance of ColorArea\n * @param ref - reference to root HTMLDivElement of ColorArea\n */\nexport const useColorArea_unstable = (props: ColorAreaProps, ref: React.Ref<HTMLDivElement>): ColorAreaState => {\n const { targetDocument } = useFluent();\n const rootRef = React.useRef<HTMLDivElement>(null);\n const xRef = React.useRef<HTMLInputElement>(null);\n const yRef = React.useRef<HTMLInputElement>(null);\n const focusWithinRef = useFocusWithin();\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\n const {\n onChange = onChangeFromContext as unknown as ColorAreaProps['onChange'],\n shape = shapeFromContext,\n // Slots\n inputX,\n inputY,\n thumb,\n color,\n ...rest\n } = props;\n\n const [hsvColor, setColor] = useControllableState<HsvColor>({\n defaultState: props.defaultColor,\n state: color || colorFromContext,\n initialState: INITIAL_COLOR_HSV,\n });\n const saturation = Math.round(hsvColor.s * 100);\n const value = Math.round(hsvColor.v * 100);\n\n const [activeAxis, setActiveAxis] = React.useState<'x' | 'y' | null>(null);\n\n const requestColorChange = useEventCallback((event: PointerEvent) => {\n if (!rootRef.current) {\n return;\n }\n\n const coordinates = getCoordinates(rootRef.current, event);\n const newColor: HsvColor = {\n ...hsvColor,\n s: coordinates.x,\n v: coordinates.y,\n };\n\n setColor(newColor);\n onChange?.(event, {\n type: 'change',\n event: event,\n color: newColor,\n });\n });\n\n const handleDocumentPointerMove = React.useCallback(\n (event: PointerEvent) => {\n requestColorChange(event);\n },\n [requestColorChange],\n );\n\n const handleDocumentPointerUp = useEventCallback(() => {\n targetDocument?.removeEventListener('pointermove', handleDocumentPointerMove);\n });\n\n const handleRootOnPointerDown: React.PointerEventHandler<HTMLDivElement> = useEventCallback(event => {\n event.stopPropagation();\n event.preventDefault();\n\n requestColorChange(event.nativeEvent);\n\n targetDocument?.addEventListener('pointermove', handleDocumentPointerMove);\n targetDocument?.addEventListener('pointerup', handleDocumentPointerUp, { once: true });\n });\n\n const handleInputOnChange: React.ChangeEventHandler<HTMLInputElement> = useEventCallback(event => {\n const targetValue = Number(event.target.value) / 100;\n const newColor: HsvColor = {\n ...hsvColor,\n ...(event.target === xRef.current && { s: targetValue }),\n ...(event.target === yRef.current && { v: targetValue }),\n };\n\n setColor(newColor);\n onChange?.(event, { type: 'change', event, color: newColor });\n });\n\n const handleRootOnKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLDivElement>) => {\n let deltaX = 0;\n let deltaY = 0;\n let axis: 'x' | 'y' = 'x';\n\n switch (event.key) {\n case 'ArrowUp':\n event.preventDefault();\n\n axis = 'y';\n deltaY = 1;\n\n break;\n case 'ArrowDown':\n event.preventDefault();\n\n axis = 'y';\n deltaY = -1;\n\n break;\n case 'ArrowLeft':\n event.preventDefault();\n\n axis = 'x';\n deltaX = -1;\n\n break;\n case 'ArrowRight':\n event.preventDefault();\n\n axis = 'x';\n deltaX = 1;\n\n break;\n }\n\n if (deltaX === 0 && deltaY === 0) {\n return;\n }\n\n const newColor: HsvColor = {\n ...hsvColor,\n s: Math.min(Math.max(hsvColor.s + deltaX / 100, 0), 1),\n v: Math.min(Math.max(hsvColor.v + deltaY / 100, 0), 1),\n };\n\n setColor(newColor);\n setActiveAxis(axis);\n\n onChange?.(event, { type: 'change', event, color: newColor });\n });\n\n const rootVariables = {\n [colorAreaCSSVars.areaXProgressVar]: `${saturation}%`,\n [colorAreaCSSVars.areaYProgressVar]: `${value}%`,\n [colorAreaCSSVars.thumbColorVar]: tinycolor(hsvColor).toRgbString(),\n [colorAreaCSSVars.mainColorVar]: `hsl(${hsvColor.h}, 100%, 50%)`,\n };\n const state: ColorAreaState = {\n shape,\n components: {\n inputX: 'input',\n inputY: 'input',\n root: 'div',\n thumb: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref,\n ...rest,\n }),\n { elementType: 'div' },\n ),\n inputX: slot.always(inputX, {\n defaultProps: {\n id: useId('sliderX-'),\n type: 'range',\n ...(activeAxis && { tabIndex: activeAxis === 'x' ? 0 : -1 }),\n },\n elementType: 'input',\n }),\n inputY: slot.always(inputY, {\n defaultProps: {\n id: useId('sliderY-'),\n type: 'range',\n tabIndex: activeAxis && activeAxis === 'y' ? 0 : -1,\n },\n elementType: 'input',\n }),\n thumb: slot.always(thumb, { elementType: 'div' }),\n };\n\n state.root.ref = useMergedRefs(state.root.ref, rootRef);\n state.thumb.ref = useMergedRefs(state.thumb.ref, focusWithinRef);\n state.inputX.ref = useMergedRefs(state.inputX.ref, xRef);\n state.inputY.ref = useMergedRefs(state.inputY.ref, yRef);\n\n state.root.style = {\n ...state.root.style,\n ...rootVariables,\n };\n\n state.root.onPointerDown = useEventCallback(mergeCallbacks(state.root.onPointerDown, handleRootOnPointerDown));\n state.root.onKeyDown = useEventCallback(mergeCallbacks(state.root.onKeyDown, handleRootOnKeyDown));\n state.inputX.onChange = useEventCallback(mergeCallbacks(state.inputX.onChange, handleInputOnChange));\n state.inputY.onChange = useEventCallback(mergeCallbacks(state.inputY.onChange, handleInputOnChange));\n\n state.inputX.value = saturation;\n state.inputY.value = value;\n\n return state;\n};\n"],"names":["useColorArea_unstable","props","ref","targetDocument","useFluent","rootRef","React","useRef","xRef","yRef","focusWithinRef","useFocusWithin","onChangeFromContext","useColorPickerContextValue_unstable","ctx","requestChange","colorFromContext","color","shapeFromContext","shape","onChange","inputX","inputY","thumb","rest","hsvColor","setColor","useControllableState","defaultState","defaultColor","state","initialState","INITIAL_COLOR_HSV","saturation","Math","round","s","value","v","activeAxis","setActiveAxis","useState","requestColorChange","useEventCallback","event","current","coordinates","getCoordinates","newColor","x","y","type","handleDocumentPointerMove","useCallback","handleDocumentPointerUp","removeEventListener","handleRootOnPointerDown","stopPropagation","preventDefault","nativeEvent","addEventListener","once","handleInputOnChange","targetValue","Number","target","handleRootOnKeyDown","deltaX","deltaY","axis","key","min","max","rootVariables","colorAreaCSSVars","areaXProgressVar","areaYProgressVar","thumbColorVar","tinycolor","toRgbString","mainColorVar","h","components","root","slot","always","getIntrinsicElementProps","elementType","defaultProps","id","useId","tabIndex","useMergedRefs","style","onPointerDown","mergeCallbacks","onKeyDown"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/utils/getCoordinates.ts"],"sourcesContent":["import { clamp } from '@fluentui/react-utilities';\n\n/**\n * Calculates the normalized coordinates of a mouse event relative to a given HTML element.\n *\n * @param element - The HTML element to calculate the coordinates relative to.\n * @param event - The mouse event containing the clientX and clientY properties.\n * @returns An object containing the normalized x and y coordinates, clamped between 0 and 1.\n */\nexport function getCoordinates(element: HTMLElement, event:
|
|
1
|
+
{"version":3,"sources":["../src/utils/getCoordinates.ts"],"sourcesContent":["import { clamp } from '@fluentui/react-utilities';\n\n/**\n * Calculates the normalized coordinates of a mouse event relative to a given HTML element.\n *\n * @param element - The HTML element to calculate the coordinates relative to.\n * @param event - The mouse event containing the clientX and clientY properties.\n * @returns An object containing the normalized x and y coordinates, clamped between 0 and 1.\n */\nexport function getCoordinates(element: HTMLElement, event: PointerEvent) {\n const rect = element.getBoundingClientRect();\n\n const newX = roundTwoDecimal((event.clientX - rect.left) / rect.width);\n const newY = roundTwoDecimal(1 - (event.clientY - rect.top) / rect.height);\n\n return {\n x: clamp(newX, 0, 1),\n y: clamp(newY, 0, 1),\n };\n}\n\n/**\n * Rounds a given number to two decimal places.\n *\n * @param num - The number to be rounded.\n * @returns The number rounded to two decimal places.\n */\nexport function roundTwoDecimal(num: number) {\n return Math.round(num * 100) / 100;\n}\n"],"names":["getCoordinates","roundTwoDecimal","element","event","rect","getBoundingClientRect","newX","clientX","left","width","newY","clientY","top","height","x","clamp","y","num","Math","round"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IASgBA,cAAAA;eAAAA;;IAkBAC,eAAAA;eAAAA;;;gCA3BM;AASf,SAASD,eAAeE,OAAoB,EAAEC,KAAmB;IACtE,MAAMC,OAAOF,QAAQG,qBAAqB;IAE1C,MAAMC,OAAOL,gBAAgB,AAACE,CAAAA,MAAMI,OAAO,GAAGH,KAAKI,IAAI,AAAJA,IAAQJ,KAAKK,KAAK;IACrE,MAAMC,OAAOT,gBAAgB,IAAI,AAACE,CAAAA,MAAMQ,OAAO,GAAGP,KAAKQ,GAAG,AAAHA,IAAOR,KAAKS,MAAM;IAEzE,OAAO;QACLC,GAAGC,IAAAA,qBAAAA,EAAMT,MAAM,GAAG;QAClBU,GAAGD,IAAAA,qBAAAA,EAAML,MAAM,GAAG;IACpB;AACF;AAQO,SAAST,gBAAgBgB,GAAW;IACzC,OAAOC,KAAKC,KAAK,CAACF,MAAM,OAAO;AACjC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-color-picker",
|
|
3
|
-
"version": "9.0.
|
|
3
|
+
"version": "9.0.5",
|
|
4
4
|
"description": "ColorPicker component for Fluent UI React.",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
"@fluentui/react-context-selector": "^9.1.76",
|
|
29
29
|
"@fluentui/react-jsx-runtime": "^9.0.54",
|
|
30
30
|
"@fluentui/react-shared-contexts": "^9.23.1",
|
|
31
|
-
"@fluentui/react-tabster": "^9.24.
|
|
31
|
+
"@fluentui/react-tabster": "^9.24.7",
|
|
32
32
|
"@fluentui/react-theme": "^9.1.24",
|
|
33
33
|
"@fluentui/react-utilities": "^9.19.0",
|
|
34
34
|
"@griffel/react": "^1.5.22",
|