@fluentui/react-color-picker 0.0.0-nightly-20250515-0405.1 → 0.0.0-nightly-20250516-1358.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/CHANGELOG.md +12 -31
  2. package/dist/index.d.ts +1 -1
  3. package/lib/components/ColorArea/ColorArea.types.js.map +1 -1
  4. package/lib/components/ColorArea/useColorArea.js +8 -8
  5. package/lib/components/ColorArea/useColorArea.js.map +1 -1
  6. package/lib/utils/getCoordinates.js.map +1 -1
  7. package/lib-commonjs/components/ColorArea/ColorArea.types.js.map +1 -1
  8. package/lib-commonjs/components/ColorArea/useColorArea.js +8 -8
  9. package/lib-commonjs/components/ColorArea/useColorArea.js.map +1 -1
  10. package/lib-commonjs/utils/getCoordinates.js.map +1 -1
  11. package/package.json +9 -9
package/CHANGELOG.md CHANGED
@@ -1,44 +1,25 @@
1
1
  # Change Log - @fluentui/react-color-picker
2
2
 
3
- This log was last generated on Thu, 15 May 2025 04:21:21 GMT and should not be manually modified.
3
+ This log was last generated on Fri, 16 May 2025 14:14:26 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
- ## [0.0.0-nightly-20250515-0405.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-color-picker_v0.0.0-nightly-20250515-0405.1)
7
+ ## [0.0.0-nightly-20250516-1358.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-color-picker_v0.0.0-nightly-20250516-1358.1)
8
8
 
9
- Thu, 15 May 2025 04:21:21 GMT
10
- [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-color-picker_v9.0.5..@fluentui/react-color-picker_v0.0.0-nightly-20250515-0405.1)
9
+ Fri, 16 May 2025 14:14:26 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-color-picker_v9.0.3..@fluentui/react-color-picker_v0.0.0-nightly-20250516-1358.1)
11
11
 
12
12
  ### Changes
13
13
 
14
14
  - Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
15
- - Bump @fluentui/react-context-selector to v0.0.0-nightly-20250515-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/66d77eb37401b8bdc2faeaa0706d1040704ffa84) by beachball)
16
- - Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20250515-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/66d77eb37401b8bdc2faeaa0706d1040704ffa84) by beachball)
17
- - Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20250515-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/66d77eb37401b8bdc2faeaa0706d1040704ffa84) by beachball)
18
- - Bump @fluentui/react-tabster to v0.0.0-nightly-20250515-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/66d77eb37401b8bdc2faeaa0706d1040704ffa84) by beachball)
19
- - Bump @fluentui/react-theme to v0.0.0-nightly-20250515-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/66d77eb37401b8bdc2faeaa0706d1040704ffa84) by beachball)
20
- - Bump @fluentui/react-utilities to v0.0.0-nightly-20250515-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/66d77eb37401b8bdc2faeaa0706d1040704ffa84) by beachball)
21
- - Bump @fluentui/react-conformance to v0.0.0-nightly-20250515-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/66d77eb37401b8bdc2faeaa0706d1040704ffa84) by beachball)
22
- - Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20250515-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/66d77eb37401b8bdc2faeaa0706d1040704ffa84) by beachball)
23
-
24
- ## [9.0.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-color-picker_v9.0.5)
25
-
26
- Wed, 14 May 2025 18:49:17 GMT
27
- [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-color-picker_v9.0.4..@fluentui/react-color-picker_v9.0.5)
28
-
29
- ### Patches
30
-
31
- - fix: added touch events for ColorArea ([PR #34328](https://github.com/microsoft/fluentui/pull/34328) by v.kozlova13@gmail.com)
32
- - Bump @fluentui/react-tabster to v9.24.7 ([PR #34438](https://github.com/microsoft/fluentui/pull/34438) by beachball)
33
-
34
- ## [9.0.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-color-picker_v9.0.4)
35
-
36
- Thu, 24 Apr 2025 09:59:45 GMT
37
- [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-color-picker_v9.0.3..@fluentui/react-color-picker_v9.0.4)
38
-
39
- ### Patches
40
-
41
- - Bump @fluentui/react-tabster to v9.24.6 ([PR #34315](https://github.com/microsoft/fluentui/pull/34315) by beachball)
15
+ - Bump @fluentui/react-context-selector to v0.0.0-nightly-20250516-1358.1 ([commit](https://github.com/microsoft/fluentui/commit/1aa9dc33c2cec2885d93ba5d20c9628285a84b37) by beachball)
16
+ - Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20250516-1358.1 ([commit](https://github.com/microsoft/fluentui/commit/1aa9dc33c2cec2885d93ba5d20c9628285a84b37) by beachball)
17
+ - Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20250516-1358.1 ([commit](https://github.com/microsoft/fluentui/commit/1aa9dc33c2cec2885d93ba5d20c9628285a84b37) by beachball)
18
+ - Bump @fluentui/react-tabster to v0.0.0-nightly-20250516-1358.1 ([commit](https://github.com/microsoft/fluentui/commit/1aa9dc33c2cec2885d93ba5d20c9628285a84b37) by beachball)
19
+ - Bump @fluentui/react-theme to v0.0.0-nightly-20250516-1358.1 ([commit](https://github.com/microsoft/fluentui/commit/1aa9dc33c2cec2885d93ba5d20c9628285a84b37) by beachball)
20
+ - Bump @fluentui/react-utilities to v0.0.0-nightly-20250516-1358.1 ([commit](https://github.com/microsoft/fluentui/commit/1aa9dc33c2cec2885d93ba5d20c9628285a84b37) by beachball)
21
+ - Bump @fluentui/react-conformance to v0.0.0-nightly-20250516-1358.1 ([commit](https://github.com/microsoft/fluentui/commit/1aa9dc33c2cec2885d93ba5d20c9628285a84b37) by beachball)
22
+ - Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20250516-1358.1 ([commit](https://github.com/microsoft/fluentui/commit/1aa9dc33c2cec2885d93ba5d20c9628285a84b37) by beachball)
42
23
 
43
24
  ## [9.0.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-color-picker_v9.0.3)
44
25
 
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 | PointerEvent> & {
46
+ declare type ColorAreaOnColorChangeData = EventData<'change', React_2.SyntheticEvent | MouseEvent> & {
47
47
  color: HsvColor;
48
48
  };
49
49
 
package/lib/components/ColorArea/ColorArea.types.js.map CHANGED
@@ -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 | 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"}
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 | MouseEvent> & {\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"}
package/lib/components/ColorArea/useColorArea.js CHANGED
@@ -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: event,
51
+ event,
52
52
  color: newColor
53
53
  });
54
54
  });
55
- const handleDocumentPointerMove = React.useCallback((event)=>{
55
+ const handleDocumentMouseMove = React.useCallback((event)=>{
56
56
  requestColorChange(event);
57
57
  }, [
58
58
  requestColorChange
59
59
  ]);
60
- const handleDocumentPointerUp = useEventCallback(()=>{
61
- targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('pointermove', handleDocumentPointerMove);
60
+ const handleDocumentMouseUp = useEventCallback(()=>{
61
+ targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('mousemove', handleDocumentMouseMove);
62
62
  });
63
- const handleRootOnPointerDown = useEventCallback((event)=>{
63
+ const handleRootOnMouseDown = 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('pointermove', handleDocumentPointerMove);
68
- targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('pointerup', handleDocumentPointerUp, {
67
+ targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('mousemove', handleDocumentMouseMove);
68
+ targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('mouseup', handleDocumentMouseUp, {
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.onPointerDown = useEventCallback(mergeCallbacks(state.root.onPointerDown, handleRootOnPointerDown));
182
+ state.root.onMouseDown = useEventCallback(mergeCallbacks(state.root.onMouseDown, handleRootOnMouseDown));
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));
package/lib/components/ColorArea/useColorArea.js.map CHANGED
@@ -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: 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
+ {"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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"}
package/lib/utils/getCoordinates.js.map CHANGED
@@ -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: 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
+ {"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: MouseEvent) {\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,KAAiB;IACpE,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"}
package/lib-commonjs/components/ColorArea/ColorArea.types.js.map CHANGED
@@ -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 | 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"}
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 | MouseEvent> & {\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"}
package/lib-commonjs/components/ColorArea/useColorArea.js CHANGED
@@ -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: event,
52
+ event,
53
53
  color: newColor
54
54
  });
55
55
  });
56
- const handleDocumentPointerMove = _react.useCallback((event)=>{
56
+ const handleDocumentMouseMove = _react.useCallback((event)=>{
57
57
  requestColorChange(event);
58
58
  }, [
59
59
  requestColorChange
60
60
  ]);
61
- const handleDocumentPointerUp = (0, _reactutilities.useEventCallback)(()=>{
62
- targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('pointermove', handleDocumentPointerMove);
61
+ const handleDocumentMouseUp = (0, _reactutilities.useEventCallback)(()=>{
62
+ targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('mousemove', handleDocumentMouseMove);
63
63
  });
64
- const handleRootOnPointerDown = (0, _reactutilities.useEventCallback)((event)=>{
64
+ const handleRootOnMouseDown = (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('pointermove', handleDocumentPointerMove);
69
- targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('pointerup', handleDocumentPointerUp, {
68
+ targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('mousemove', handleDocumentMouseMove);
69
+ targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('mouseup', handleDocumentMouseUp, {
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.onPointerDown = (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(state.root.onPointerDown, handleRootOnPointerDown));
183
+ state.root.onMouseDown = (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(state.root.onMouseDown, handleRootOnMouseDown));
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));
package/lib-commonjs/components/ColorArea/useColorArea.js.map CHANGED
@@ -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: 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":";;;;+BAsBaA;;;eAAAA;;;;iEAtBU;2BACG;gCAC2D;0CAGpD;qCAEe;8BACjB;2BACG;gCACH;6BACqB;AAW7C,MAAMA,wBAAwB,CAACC,OAAuBC;IAC3D,MAAM,EAAEC,cAAc,EAAE,GAAGC,IAAAA,uCAAAA;IAC3B,MAAMC,UAAUC,OAAMC,MAAM,CAAiB;IAC7C,MAAMC,OAAOF,OAAMC,MAAM,CAAmB;IAC5C,MAAME,OAAOH,OAAMC,MAAM,CAAmB;IAC5C,MAAMG,iBAAiBC,IAAAA,4BAAAA;IACvB,MAAMC,sBAAsBC,IAAAA,gDAAAA,EAAoCC,CAAAA,MAAOA,IAAIC,aAAa;IACxF,MAAMC,mBAAmBH,IAAAA,gDAAAA,EAAoCC,CAAAA,MAAOA,IAAIG,KAAK;IAC7E,MAAMC,mBAAmBL,IAAAA,gDAAAA,EAAoCC,CAAAA,MAAOA,IAAIK,KAAK;IAE7E,MAAM,EACJC,WAAWR,mBAA4D,EACvEO,QAAQD,gBAAgB,EAExBG,MAAM,EACNC,MAAM,EACNC,KAAK,EACLN,KAAK,EACL,GAAGO,MACJ,GAAGvB;IAEJ,MAAM,CAACwB,UAAUC,SAAS,GAAGC,IAAAA,oCAAAA,EAA+B;QAC1DC,cAAc3B,MAAM4B,YAAY;QAChCC,OAAOb,SAASD;QAChBe,cAAcC,4BAAAA;IAChB;IACA,MAAMC,aAAaC,KAAKC,KAAK,CAACV,SAASW,CAAC,GAAG;IAC3C,MAAMC,QAAQH,KAAKC,KAAK,CAACV,SAASa,CAAC,GAAG;IAEtC,MAAM,CAACC,YAAYC,cAAc,GAAGlC,OAAMmC,QAAQ,CAAmB;IAErE,MAAMC,qBAAqBC,IAAAA,gCAAAA,EAAiB,CAACC;QAC3C,IAAI,CAACvC,QAAQwC,OAAO,EAAE;YACpB;QACF;QAEA,MAAMC,cAAcC,IAAAA,8BAAAA,EAAe1C,QAAQwC,OAAO,EAAED;QACpD,MAAMI,WAAqB;YACzB,GAAGvB,QAAQ;YACXW,GAAGU,YAAYG,CAAC;YAChBX,GAAGQ,YAAYI,CAAC;QAClB;QAEAxB,SAASsB;QACT5B,aAAAA,QAAAA,aAAAA,KAAAA,IAAAA,KAAAA,IAAAA,SAAWwB,OAAO;YAChBO,MAAM;YACNP,OAAOA;YACP3B,OAAO+B;QACT;IACF;IAEA,MAAMI,4BAA4B9C,OAAM+C,WAAW,CACjD,CAACT;QACCF,mBAAmBE;IACrB,GACA;QAACF;KAAmB;IAGtB,MAAMY,0BAA0BX,IAAAA,gCAAAA,EAAiB;QAC/CxC,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAgBoD,mBAAmB,CAAC,eAAeH;IACrD;IAEA,MAAMI,0BAAqEb,IAAAA,gCAAAA,EAAiBC,CAAAA;QAC1FA,MAAMa,eAAe;QACrBb,MAAMc,cAAc;QAEpBhB,mBAAmBE,MAAMe,WAAW;QAEpCxD,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAgByD,gBAAgB,CAAC,eAAeR;QAChDjD,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAgByD,gBAAgB,CAAC,aAAaN,yBAAyB;YAAEO,MAAM;QAAK;IACtF;IAEA,MAAMC,sBAAkEnB,IAAAA,gCAAAA,EAAiBC,CAAAA;QACvF,MAAMmB,cAAcC,OAAOpB,MAAMqB,MAAM,CAAC5B,KAAK,IAAI;QACjD,MAAMW,WAAqB;YACzB,GAAGvB,QAAQ;YACX,GAAImB,MAAMqB,MAAM,KAAKzD,KAAKqC,OAAO,IAAI;gBAAET,GAAG2B;YAAY,CAAC;YACvD,GAAInB,MAAMqB,MAAM,KAAKxD,KAAKoC,OAAO,IAAI;gBAAEP,GAAGyB;YAAY,CAAC;QACzD;QAEArC,SAASsB;QACT5B,aAAAA,QAAAA,aAAAA,KAAAA,IAAAA,KAAAA,IAAAA,SAAWwB,OAAO;YAAEO,MAAM;YAAUP;YAAO3B,OAAO+B;QAAS;IAC7D;IAEA,MAAMkB,sBAAsBvB,IAAAA,gCAAAA,EAAiB,CAACC;QAC5C,IAAIuB,SAAS;QACb,IAAIC,SAAS;QACb,IAAIC,OAAkB;QAEtB,OAAQzB,MAAM0B,GAAG;YACf,KAAK;gBACH1B,MAAMc,cAAc;gBAEpBW,OAAO;gBACPD,SAAS;gBAET;YACF,KAAK;gBACHxB,MAAMc,cAAc;gBAEpBW,OAAO;gBACPD,SAAS,CAAC;gBAEV;YACF,KAAK;gBACHxB,MAAMc,cAAc;gBAEpBW,OAAO;gBACPF,SAAS,CAAC;gBAEV;YACF,KAAK;gBACHvB,MAAMc,cAAc;gBAEpBW,OAAO;gBACPF,SAAS;gBAET;QACJ;QAEA,IAAIA,WAAW,KAAKC,WAAW,GAAG;YAChC;QACF;QAEA,MAAMpB,WAAqB;YACzB,GAAGvB,QAAQ;YACXW,GAAGF,KAAKqC,GAAG,CAACrC,KAAKsC,GAAG,CAAC/C,SAASW,CAAC,GAAG+B,SAAS,KAAK,IAAI;YACpD7B,GAAGJ,KAAKqC,GAAG,CAACrC,KAAKsC,GAAG,CAAC/C,SAASa,CAAC,GAAG8B,SAAS,KAAK,IAAI;QACtD;QAEA1C,SAASsB;QACTR,cAAc6B;QAEdjD,aAAAA,QAAAA,aAAAA,KAAAA,IAAAA,KAAAA,IAAAA,SAAWwB,OAAO;YAAEO,MAAM;YAAUP;YAAO3B,OAAO+B;QAAS;IAC7D;IAEA,MAAMyB,gBAAgB;QACpB,CAACC,0CAAAA,CAAiBC,gBAAgB,CAAC,EAAE,CAAC,EAAE1C,WAAW,CAAC,CAAC;QACrD,CAACyC,0CAAAA,CAAiBE,gBAAgB,CAAC,EAAE,CAAC,EAAEvC,MAAM,CAAC,CAAC;QAChD,CAACqC,0CAAAA,CAAiBG,aAAa,CAAC,EAAEC,IAAAA,oBAAAA,EAAUrD,UAAUsD,WAAW;QACjE,CAACL,0CAAAA,CAAiBM,YAAY,CAAC,EAAE,CAAC,IAAI,EAAEvD,SAASwD,CAAC,CAAC,YAAY,CAAC;IAClE;IACA,MAAMnD,QAAwB;QAC5BX;QACA+D,YAAY;YACV7D,QAAQ;YACRC,QAAQ;YACR6D,MAAM;YACN5D,OAAO;QACT;QACA4D,MAAMC,oBAAAA,CAAKC,MAAM,CACfC,IAAAA,wCAAAA,EAAyB,OAAO;YAC9BpF;YACA,GAAGsB,IAAI;QACT,IACA;YAAE+D,aAAa;QAAM;QAEvBlE,QAAQ+D,oBAAAA,CAAKC,MAAM,CAAChE,QAAQ;YAC1BmE,cAAc;gBACZC,IAAIC,IAAAA,qBAAAA,EAAM;gBACVvC,MAAM;gBACN,GAAIZ,cAAc;oBAAEoD,UAAUpD,eAAe,MAAM,IAAI,CAAC;gBAAE,CAAC;YAC7D;YACAgD,aAAa;QACf;QACAjE,QAAQ8D,oBAAAA,CAAKC,MAAM,CAAC/D,QAAQ;YAC1BkE,cAAc;gBACZC,IAAIC,IAAAA,qBAAAA,EAAM;gBACVvC,MAAM;gBACNwC,UAAUpD,cAAcA,eAAe,MAAM,IAAI,CAAC;YACpD;YACAgD,aAAa;QACf;QACAhE,OAAO6D,oBAAAA,CAAKC,MAAM,CAAC9D,OAAO;YAAEgE,aAAa;QAAM;IACjD;IAEAzD,MAAMqD,IAAI,CAACjF,GAAG,GAAG0F,IAAAA,6BAAAA,EAAc9D,MAAMqD,IAAI,CAACjF,GAAG,EAAEG;IAC/CyB,MAAMP,KAAK,CAACrB,GAAG,GAAG0F,IAAAA,6BAAAA,EAAc9D,MAAMP,KAAK,CAACrB,GAAG,EAAEQ;IACjDoB,MAAMT,MAAM,CAACnB,GAAG,GAAG0F,IAAAA,6BAAAA,EAAc9D,MAAMT,MAAM,CAACnB,GAAG,EAAEM;IACnDsB,MAAMR,MAAM,CAACpB,GAAG,GAAG0F,IAAAA,6BAAAA,EAAc9D,MAAMR,MAAM,CAACpB,GAAG,EAAEO;IAEnDqB,MAAMqD,IAAI,CAACU,KAAK,GAAG;QACjB,GAAG/D,MAAMqD,IAAI,CAACU,KAAK;QACnB,GAAGpB,aAAa;IAClB;IAEA3C,MAAMqD,IAAI,CAACW,aAAa,GAAGnD,IAAAA,gCAAAA,EAAiBoD,IAAAA,8BAAAA,EAAejE,MAAMqD,IAAI,CAACW,aAAa,EAAEtC;IACrF1B,MAAMqD,IAAI,CAACa,SAAS,GAAGrD,IAAAA,gCAAAA,EAAiBoD,IAAAA,8BAAAA,EAAejE,MAAMqD,IAAI,CAACa,SAAS,EAAE9B;IAC7EpC,MAAMT,MAAM,CAACD,QAAQ,GAAGuB,IAAAA,gCAAAA,EAAiBoD,IAAAA,8BAAAA,EAAejE,MAAMT,MAAM,CAACD,QAAQ,EAAE0C;IAC/EhC,MAAMR,MAAM,CAACF,QAAQ,GAAGuB,IAAAA,gCAAAA,EAAiBoD,IAAAA,8BAAAA,EAAejE,MAAMR,MAAM,CAACF,QAAQ,EAAE0C;IAE/EhC,MAAMT,MAAM,CAACgB,KAAK,GAAGJ;IACrBH,MAAMR,MAAM,CAACe,KAAK,GAAGA;IAErB,OAAOP;AACT"}
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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"}
package/lib-commonjs/utils/getCoordinates.js.map CHANGED
@@ -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: 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"}
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: MouseEvent) {\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,KAAiB;IACpE,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": "0.0.0-nightly-20250515-0405.1",
3
+ "version": "0.0.0-nightly-20250516-1358.1",
4
4
  "description": "ColorPicker component for Fluent UI React.",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -19,18 +19,18 @@
19
19
  "license": "MIT",
20
20
  "devDependencies": {
21
21
  "@fluentui/eslint-plugin": "*",
22
- "@fluentui/react-conformance": "0.0.0-nightly-20250515-0405.1",
23
- "@fluentui/react-conformance-griffel": "0.0.0-nightly-20250515-0405.1",
22
+ "@fluentui/react-conformance": "0.0.0-nightly-20250516-1358.1",
23
+ "@fluentui/react-conformance-griffel": "0.0.0-nightly-20250516-1358.1",
24
24
  "@fluentui/scripts-api-extractor": "*"
25
25
  },
26
26
  "dependencies": {
27
27
  "@ctrl/tinycolor": "^3.3.4",
28
- "@fluentui/react-context-selector": "0.0.0-nightly-20250515-0405.1",
29
- "@fluentui/react-jsx-runtime": "0.0.0-nightly-20250515-0405.1",
30
- "@fluentui/react-shared-contexts": "0.0.0-nightly-20250515-0405.1",
31
- "@fluentui/react-tabster": "0.0.0-nightly-20250515-0405.1",
32
- "@fluentui/react-theme": "0.0.0-nightly-20250515-0405.1",
33
- "@fluentui/react-utilities": "0.0.0-nightly-20250515-0405.1",
28
+ "@fluentui/react-context-selector": "0.0.0-nightly-20250516-1358.1",
29
+ "@fluentui/react-jsx-runtime": "0.0.0-nightly-20250516-1358.1",
30
+ "@fluentui/react-shared-contexts": "0.0.0-nightly-20250516-1358.1",
31
+ "@fluentui/react-tabster": "0.0.0-nightly-20250516-1358.1",
32
+ "@fluentui/react-theme": "0.0.0-nightly-20250516-1358.1",
33
+ "@fluentui/react-utilities": "0.0.0-nightly-20250516-1358.1",
34
34
  "@griffel/react": "^1.5.22",
35
35
  "@swc/helpers": "^0.5.1"
36
36
  },