@fluentui/react-color-picker 9.0.3 → 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.
Files changed (11) hide show
  1. package/CHANGELOG.md +21 -2
  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 +2 -2
package/CHANGELOG.md CHANGED
@@ -1,12 +1,31 @@
1
1
  # Change Log - @fluentui/react-color-picker
2
2
 
3
- This log was last generated on Wed, 16 Apr 2025 19:37:27 GMT and should not be manually modified.
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
+
17
+ ## [9.0.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-color-picker_v9.0.4)
18
+
19
+ Thu, 24 Apr 2025 09:59:45 GMT
20
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-color-picker_v9.0.3..@fluentui/react-color-picker_v9.0.4)
21
+
22
+ ### Patches
23
+
24
+ - Bump @fluentui/react-tabster to v9.24.6 ([PR #34315](https://github.com/microsoft/fluentui/pull/34315) by beachball)
25
+
7
26
  ## [9.0.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-color-picker_v9.0.3)
8
27
 
9
- Wed, 16 Apr 2025 19:37:27 GMT
28
+ Wed, 16 Apr 2025 19:42:18 GMT
10
29
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-color-picker_v9.0.2..@fluentui/react-color-picker_v9.0.3)
11
30
 
12
31
  ### 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 | MouseEvent> & {
46
+ declare type ColorAreaOnColorChangeData = EventData<'change', React_2.SyntheticEvent | PointerEvent> & {
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 | 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"}
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"}
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,
51
+ event: event,
52
52
  color: newColor
53
53
  });
54
54
  });
55
- const handleDocumentMouseMove = React.useCallback((event)=>{
55
+ const handleDocumentPointerMove = React.useCallback((event)=>{
56
56
  requestColorChange(event);
57
57
  }, [
58
58
  requestColorChange
59
59
  ]);
60
- const handleDocumentMouseUp = useEventCallback(()=>{
61
- targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('mousemove', handleDocumentMouseMove);
60
+ const handleDocumentPointerUp = useEventCallback(()=>{
61
+ targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('pointermove', handleDocumentPointerMove);
62
62
  });
63
- const handleRootOnMouseDown = useEventCallback((event)=>{
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('mousemove', handleDocumentMouseMove);
68
- targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('mouseup', handleDocumentMouseUp, {
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.onMouseDown = useEventCallback(mergeCallbacks(state.root.onMouseDown, handleRootOnMouseDown));
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));
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: 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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"}
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: 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"}
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"}
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 | 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"}
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"}
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,
52
+ event: event,
53
53
  color: newColor
54
54
  });
55
55
  });
56
- const handleDocumentMouseMove = _react.useCallback((event)=>{
56
+ const handleDocumentPointerMove = _react.useCallback((event)=>{
57
57
  requestColorChange(event);
58
58
  }, [
59
59
  requestColorChange
60
60
  ]);
61
- const handleDocumentMouseUp = (0, _reactutilities.useEventCallback)(()=>{
62
- targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('mousemove', handleDocumentMouseMove);
61
+ const handleDocumentPointerUp = (0, _reactutilities.useEventCallback)(()=>{
62
+ targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('pointermove', handleDocumentPointerMove);
63
63
  });
64
- const handleRootOnMouseDown = (0, _reactutilities.useEventCallback)((event)=>{
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('mousemove', handleDocumentMouseMove);
69
- targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('mouseup', handleDocumentMouseUp, {
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.onMouseDown = (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(state.root.onMouseDown, handleRootOnMouseDown));
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));
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: 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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"}
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: 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"}
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",
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.5",
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",