{"version":3,"sources":["../src/components/ColorSlider/useColorSlider.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport {\n getPartitionedNativeProps,\n useId,\n slot,\n useControllableState,\n useEventCallback,\n} from '@fluentui/react-utilities';\nimport { colorSliderCSSVars } from './ColorSlider.constants';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport type {\n ColorSliderBaseProps,\n ColorSliderBaseState,\n ColorSliderProps,\n ColorSliderState,\n} from './ColorSlider.types';\nimport { useColorPickerContextValue_unstable } from '../../contexts/colorPicker';\nimport { MIN, HUE_MAX, MAX as COLOR_MAX } from '../../utils/constants';\nimport { getPercent } from '../../utils/getPercent';\nimport { createHsvColor } from '../../utils/createHsvColor';\nimport { clampValue, type ChannelActions, adjustChannel } from '../../utils/adjustChannel';\nimport type { HsvColor } from '../../types/color';\nimport { INITIAL_COLOR_HSV } from '../../utils/constants';\nimport { createHslColor, createHslColorString } from '../../utils/createHslColor';\n\n/**\n * Create the base state required to render unstyled ColorSlider.\n *\n * The returned state can be modified with hooks before being passed to renderColorSlider_unstable.\n *\n * @param props - props from this instance of ColorSlider\n * @param ref - reference to root HTMLInputElement of ColorSlider\n */\nexport const useColorSliderBase_unstable = (\n props: ColorSliderBaseProps,\n ref: React.Ref,\n): ColorSliderBaseState => {\n 'use no memo'; // justified: compiler would optimize useColorSlider_unstable — manual opt-out to preserve runtime behavior\n\n const { dir } = useFluent();\n const onChangeFromContext = useColorPickerContextValue_unstable(ctx => ctx.requestChange);\n const colorFromContext = useColorPickerContextValue_unstable(ctx => ctx.color);\n const nativeProps = getPartitionedNativeProps({\n props,\n primarySlotTagName: 'input',\n excludedPropNames: ['onChange', 'color'],\n });\n\n const {\n color,\n channel = 'hue',\n onChange = onChangeFromContext,\n vertical,\n // Slots\n root,\n input,\n rail,\n thumb,\n } = props;\n\n const hsvColor = color || colorFromContext;\n const hslColor = createHslColor(hsvColor);\n\n const [currentColor, setCurrentColor] = useControllableState({\n defaultState: props.defaultColor,\n state: hsvColor,\n initialState: INITIAL_COLOR_HSV,\n });\n\n const MAX = channel === 'hue' ? HUE_MAX : COLOR_MAX;\n\n const valueChannelActions: ChannelActions = {\n hue: clampValue(currentColor.h),\n saturation: clampValue(currentColor.s * 100),\n value: clampValue(currentColor.v * 100),\n };\n\n const clampedValue = adjustChannel(channel, valueChannelActions);\n const valuePercent = getPercent(clampedValue, MIN, MAX);\n\n const inputOnChange = input?.onChange;\n\n const _onChange: React.ChangeEventHandler = useEventCallback(event => {\n const newValue = Number(event.target.value);\n const colorActions: ChannelActions<() => HsvColor> = {\n hue: () => createHsvColor({ ...hsvColor, h: newValue }),\n saturation: () => createHsvColor({ ...hsvColor, s: newValue / 100 }),\n value: () => createHsvColor({ ...hsvColor, v: newValue / 100 }),\n };\n const newColor = adjustChannel(channel, colorActions)();\n\n setCurrentColor(newColor);\n\n inputOnChange?.(event);\n onChange?.(event, {\n type: 'change',\n event,\n color: newColor,\n });\n });\n\n const rootVariables = {\n [colorSliderCSSVars.sliderDirectionVar]: vertical ? '180deg' : dir === 'ltr' ? '-90deg' : '90deg',\n [colorSliderCSSVars.sliderProgressVar]: `${valuePercent}%`,\n [colorSliderCSSVars.thumbColorVar]:\n channel === 'hue' ? `hsl(${clampedValue}, 100%, 50%)` : createHslColorString(hsvColor),\n [colorSliderCSSVars.railColorVar]:\n channel === 'hue'\n ? `hsl(${hslColor.h}, ${hslColor.s * 100}%, ${hslColor.l * 100}%)`\n : `hsl(${hslColor.h}, 100%, 50%)`,\n };\n\n const state: ColorSliderBaseState = {\n vertical,\n channel,\n components: {\n input: 'input',\n rail: 'div',\n root: 'div',\n thumb: 'div',\n },\n root: slot.always(root, {\n defaultProps: {\n role: 'group',\n ...nativeProps.root,\n },\n elementType: 'div',\n }),\n input: slot.always(input, {\n defaultProps: {\n id: useId('slider-', props.id),\n ref,\n min: MIN,\n max: MAX,\n tabIndex: 0,\n ['aria-orientation']: vertical ? 'vertical' : 'horizontal',\n ...nativeProps.primary,\n type: 'range',\n },\n elementType: 'input',\n }),\n rail: slot.always(rail, { elementType: 'div' }),\n thumb: slot.always(thumb, { elementType: 'div' }),\n };\n\n // Root props\n state.root.style = {\n ...rootVariables,\n ...state.root.style,\n };\n\n // Input Props\n state.input.value = clampedValue;\n state.input.onChange = _onChange;\n return state;\n};\n\n/**\n * Create the state required to render ColorSlider.\n *\n * The returned state can be modified with hooks such as useColorSliderStyles_unstable,\n * before being passed to renderColorSlider_unstable.\n *\n * @param props - props from this instance of ColorSlider\n * @param ref - reference to root HTMLInputElement of ColorSlider\n */\nexport const useColorSlider_unstable = (\n props: ColorSliderProps,\n ref: React.Ref,\n): ColorSliderState => {\n const shapeFromContext = useColorPickerContextValue_unstable(ctx => ctx.shape);\n\n const { shape = shapeFromContext, ...baseProps } = props;\n\n const state: ColorSliderState = {\n ...useColorSliderBase_unstable(baseProps, ref),\n shape,\n };\n\n return state;\n};\n"],"names":["getPartitionedNativeProps","useId","slot","useControllableState","useEventCallback","colorSliderCSSVars","useFluent_unstable","useFluent","useColorPickerContextValue_unstable","MIN","HUE_MAX","MAX","COLOR_MAX","getPercent","createHsvColor","clampValue","adjustChannel","INITIAL_COLOR_HSV","createHslColor","createHslColorString","useColorSliderBase_unstable","props","ref","dir","onChangeFromContext","ctx","requestChange","colorFromContext","color","nativeProps","primarySlotTagName","excludedPropNames","channel","onChange","vertical","root","input","rail","thumb","hsvColor","hslColor","currentColor","setCurrentColor","defaultState","defaultColor","state","initialState","valueChannelActions","hue","h","saturation","s","value","v","clampedValue","valuePercent","inputOnChange","_onChange","event","newValue","Number","target","colorActions","newColor","type","rootVariables","sliderDirectionVar","sliderProgressVar","thumbColorVar","railColorVar","l","components","always","defaultProps","role","elementType","id","min","max","tabIndex","primary","style","useColorSlider_unstable","shapeFromContext","shape","baseProps"],"mappings":"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"}