npm - @fluentui/react-color-picker - Versions diffs - 9.2.16 → 9.2.18 - Mend

@fluentui/react-color-picker 9.2.16 → 9.2.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (42) hide show

package/lib/components/ColorSlider/useColorSliderStyles.styles.raw.js CHANGED Viewed

@@ -176,7 +176,6 @@ const useShapeStyles = makeStyles({
 /**
  * Apply styling to the ColorSlider slots based on the state
  */ export const useColorSliderStyles_unstable = (state)=>{
-    'use no memo';
     const rootStyles = useRootStyles();
     const styles = useStyles();
     const railStyles = useRailStyles();
@@ -185,9 +184,13 @@ const useShapeStyles = makeStyles({
     const shapeStyles = useShapeStyles();
     const channelStyles = useChannelStyles();
     const isVertical = state.vertical;
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = mergeClasses(colorSliderClassNames.root, rootStyles, isVertical ? styles.vertical : styles.horizontal, state.root.className);
+    // eslint-disable-next-line react-hooks/immutability
     state.rail.className = mergeClasses(colorSliderClassNames.rail, railStyles.rail, channelStyles[state.channel || 'hue'], shapeStyles[state.shape || 'rounded'], isVertical ? railStyles.vertical : railStyles.horizontal, state.rail.className);
+    // eslint-disable-next-line react-hooks/immutability
     state.thumb.className = mergeClasses(colorSliderClassNames.thumb, thumbStyles.thumb, isVertical ? thumbStyles.vertical : thumbStyles.horizontal, state.thumb.className);
+    // eslint-disable-next-line react-hooks/immutability
     state.input.className = mergeClasses(colorSliderClassNames.input, inputStyles.input, isVertical ? inputStyles.vertical : inputStyles.horizontal, state.input.className);
     return state;
 };

package/lib/components/ColorSlider/useColorSliderStyles.styles.raw.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/ColorSlider/useColorSliderStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport type { ColorSliderSlots, ColorSliderState } from './ColorSlider.types';\n\nexport const colorSliderClassNames: SlotClassNames<ColorSliderSlots> = {\n root: 'fui-ColorSlider',\n rail: 'fui-ColorSlider__rail',\n thumb: 'fui-ColorSlider__thumb',\n input: 'fui-ColorSlider__input',\n};\n\nexport const colorSliderCSSVars = {\n sliderDirectionVar: `--fui-Slider--direction`,\n sliderProgressVar: `--fui-Slider--progress`,\n thumbColorVar: `--fui-Slider__thumb--color`,\n railColorVar: `--fui-Slider__rail--color`,\n thumbSizeVar: `--fui-Slider__thumb--size`,\n railSizeVar: `--fui-Slider__rail--size`,\n};\n\nconst hueBackground = `linear-gradient(${[\n `var(${colorSliderCSSVars.sliderDirectionVar})`,\n 'red',\n 'fuchsia',\n 'blue',\n 'aqua',\n 'lime',\n 'yellow',\n 'red',\n].join(',')})`;\n\n/*\n Styles for the root slot\n /\nconst useRootStyles = makeResetStyles({\n position: 'relative',\n display: 'inline-grid',\n touchAction: 'none',\n alignItems: 'center',\n justifyItems: 'center',\n [colorSliderCSSVars.thumbSizeVar]: '20px',\n [colorSliderCSSVars.railSizeVar]: '20px',\n minHeight: '32px',\n});\n\nconst useStyles = makeStyles({\n horizontal: {\n minWidth: '200px',\n // 3x3 grid with the rail and thumb in the center cell [2,2] and the hidden input stretching across all cells\n gridTemplateRows: `1fr var(${colorSliderCSSVars.thumbSizeVar}) 1fr`,\n gridTemplateColumns: `1fr 100% 1fr`,\n },\n\n vertical: {\n minHeight: '280px',\n // 3x3 grid with the rail and thumb in the center cell [2,2] and the hidden input stretching across all cells\n gridTemplateRows: `1fr 100% 1fr`,\n gridTemplateColumns: `1fr var(${colorSliderCSSVars.thumbSizeVar}) 1fr`,\n },\n});\n\nconst useChannelStyles = makeStyles({\n hue: {\n backgroundImage: hueBackground,\n },\n saturation: {\n backgroundImage: `linear-gradient(to right, #808080, var(${colorSliderCSSVars.railColorVar}))`,\n },\n value: {\n backgroundImage: `linear-gradient(to right, #000, var(${colorSliderCSSVars.railColorVar}))`,\n },\n});\n\n/\n Styles for the rail slot\n /\nconst useRailStyles = makeStyles({\n rail: {\n pointerEvents: 'none',\n gridRowStart: '2',\n gridRowEnd: '2',\n gridColumnStart: '2',\n gridColumnEnd: '2',\n position: 'relative',\n forcedColorAdjust: 'none',\n outlineWidth: '1px',\n outlineStyle: 'solid',\n outlineColor: tokens.colorTransparentStroke,\n '::before': {\n content: \"''\",\n position: 'absolute',\n },\n },\n\n horizontal: {\n width: '100%',\n height: `var(${colorSliderCSSVars.railSizeVar})`,\n '::before': {\n left: '-1px',\n right: '-1px',\n height: `var(${colorSliderCSSVars.railSizeVar})`,\n },\n },\n\n vertical: {\n width: `var(${colorSliderCSSVars.railSizeVar})`,\n height: '100%',\n '::before': {\n width: `var(${colorSliderCSSVars.railSizeVar})`,\n top: '-1px',\n bottom: '1px',\n },\n },\n});\n\n/\n Styles for the thumb slot\n /\nconst useThumbStyles = makeStyles({\n thumb: {\n gridRowStart: '2',\n gridRowEnd: '2',\n gridColumnStart: '2',\n gridColumnEnd: '2',\n position: 'absolute',\n width: `var(${colorSliderCSSVars.thumbSizeVar})`,\n height: `var(${colorSliderCSSVars.thumbSizeVar})`,\n pointerEvents: 'none',\n outlineStyle: 'none',\n forcedColorAdjust: 'none',\n borderRadius: tokens.borderRadiusCircular,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralForeground4}`,\n boxShadow: tokens.shadow4,\n backgroundColor: `var(${colorSliderCSSVars.thumbColorVar})`,\n '::before': {\n position: 'absolute',\n inset: '0px',\n borderRadius: tokens.borderRadiusCircular,\n boxSizing: 'border-box',\n content: \"''\",\n border: `${tokens.strokeWidthThick} solid ${tokens.colorNeutralBackground1}`,\n },\n },\n horizontal: {\n transform: 'translateX(-50%)',\n left: `var(${colorSliderCSSVars.sliderProgressVar})`,\n },\n vertical: {\n transform: 'translateY(50%)',\n bottom: `var(${colorSliderCSSVars.sliderProgressVar})`,\n },\n});\n\nconst useShapeStyles = makeStyles({\n rounded: {\n borderRadius: tokens.borderRadiusMedium,\n },\n square: {\n borderRadius: tokens.borderRadiusNone,\n },\n});\n\n/\n Styles for the Input slot\n /\nconst useInputStyles = makeStyles({\n input: {\n cursor: 'pointer',\n opacity: 0,\n gridRowStart: '1',\n gridRowEnd: '-1',\n gridColumnStart: '1',\n gridColumnEnd: '-1',\n padding: '0',\n margin: '0',\n [`:focus-visible ~ .${colorSliderClassNames.thumb}`]: {\n border: `2px solid ${tokens.colorStrokeFocus2}`,\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorTransparentStroke}`,\n borderRadius: tokens.borderRadiusCircular,\n },\n },\n horizontal: {\n height: `var(${colorSliderCSSVars.thumbSizeVar})`,\n width: '100%',\n },\n vertical: {\n height: '100%',\n width: `var(${colorSliderCSSVars.thumbSizeVar})`,\n 'writing-mode': 'vertical-lr',\n direction: 'rtl',\n },\n});\n\n/\n Apply styling to the ColorSlider slots based on the state\n */\nexport const useColorSliderStyles_unstable = (state: ColorSliderState): ColorSliderState => {\n 'use no memo';\n\n const rootStyles = useRootStyles();\n const styles = useStyles();\n const railStyles = useRailStyles();\n const thumbStyles = useThumbStyles();\n const inputStyles = useInputStyles();\n const shapeStyles = useShapeStyles();\n const channelStyles = useChannelStyles();\n const isVertical = state.vertical;\n\n state.root.className = mergeClasses(\n colorSliderClassNames.root,\n rootStyles,\n isVertical ? styles.vertical : styles.horizontal,\n state.root.className,\n );\n\n state.rail.className = mergeClasses(\n colorSliderClassNames.rail,\n railStyles.rail,\n channelStyles[state.channel \|\| 'hue'],\n shapeStyles[state.shape \|\| 'rounded'],\n isVertical ? railStyles.vertical : railStyles.horizontal,\n state.rail.className,\n );\n\n state.thumb.className = mergeClasses(\n colorSliderClassNames.thumb,\n thumbStyles.thumb,\n isVertical ? thumbStyles.vertical : thumbStyles.horizontal,\n state.thumb.className,\n );\n\n state.input.className = mergeClasses(\n colorSliderClassNames.input,\n inputStyles.input,\n isVertical ? inputStyles.vertical : inputStyles.horizontal,\n state.input.className,\n );\n return state;\n};\n"],"names":["makeStyles","makeResetStyles","mergeClasses","tokens","colorSliderClassNames","root","rail","thumb","input","colorSliderCSSVars","sliderDirectionVar","sliderProgressVar","thumbColorVar","railColorVar","thumbSizeVar","railSizeVar","hueBackground","join","useRootStyles","position","display","touchAction","alignItems","justifyItems","minHeight","useStyles","horizontal","minWidth","gridTemplateRows","gridTemplateColumns","vertical","useChannelStyles","hue","backgroundImage","saturation","value","useRailStyles","pointerEvents","gridRowStart","gridRowEnd","gridColumnStart","gridColumnEnd","forcedColorAdjust","outlineWidth","outlineStyle","outlineColor","colorTransparentStroke","content","width","height","left","right","top","bottom","useThumbStyles","borderRadius","borderRadiusCircular","border","strokeWidthThin","colorNeutralForeground4","boxShadow","shadow4","backgroundColor","inset","boxSizing","strokeWidthThick","colorNeutralBackground1","transform","useShapeStyles","rounded","borderRadiusMedium","square","borderRadiusNone","useInputStyles","cursor","opacity","padding","margin","colorStrokeFocus2","outline","direction","useColorSliderStyles_unstable","state","rootStyles","styles","railStyles","thumbStyles","inputStyles","shapeStyles","channelStyles","isVertical","className","channel","shape"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,eAAe,EAAEC,YAAY,QAAQ,iBAAiB;AAE3E,SAASC,MAAM,QAAQ,wBAAwB;AAG/C,OAAO,MAAMC,wBAA0D;IACrEC,MAAM;IACNC,MAAM;IACNC,OAAO;IACPC,OAAO;AACT,EAAE;AAEF,OAAO,MAAMC,qBAAqB;IAChCC,oBAAoB,CAAC,uBAAuB,CAAC;IAC7CC,mBAAmB,CAAC,sBAAsB,CAAC;IAC3CC,eAAe,CAAC,0BAA0B,CAAC;IAC3CC,cAAc,CAAC,yBAAyB,CAAC;IACzCC,cAAc,CAAC,yBAAyB,CAAC;IACzCC,aAAa,CAAC,wBAAwB,CAAC;AACzC,EAAE;AAEF,MAAMC,gBAAgB,CAAC,gBAAgB,EAAE;IACvC,CAAC,IAAI,EAAEP,mBAAmBC,kBAAkB,CAAC,CAAC,CAAC;IAC/C;IACA;IACA;IACA;IACA;IACA;IACA;CACD,CAACO,IAAI,CAAC,KAAK,CAAC,CAAC;AAEd;;CAEC,GACD,MAAMC,gBAAgBjB,gBAAgB;IACpCkB,UAAU;IACVC,SAAS;IACTC,aAAa;IACbC,YAAY;IACZC,cAAc;IACd,CAACd,mBAAmBK,YAAY,CAAC,EAAE;IACnC,CAACL,mBAAmBM,WAAW,CAAC,EAAE;IAClCS,WAAW;AACb;AAEA,MAAMC,YAAYzB,WAAW;IAC3B0B,YAAY;QACVC,UAAU;QACV,6GAA6G;QAC7GC,kBAAkB,CAAC,QAAQ,EAAEnB,mBAAmBK,YAAY,CAAC,KAAK,CAAC;QACnEe,qBAAqB,CAAC,YAAY,CAAC;IACrC;IAEAC,UAAU;QACRN,WAAW;QACX,6GAA6G;QAC7GI,kBAAkB,CAAC,YAAY,CAAC;QAChCC,qBAAqB,CAAC,QAAQ,EAAEpB,mBAAmBK,YAAY,CAAC,KAAK,CAAC;IACxE;AACF;AAEA,MAAMiB,mBAAmB/B,WAAW;IAClCgC,KAAK;QACHC,iBAAiBjB;IACnB;IACAkB,YAAY;QACVD,iBAAiB,CAAC,uCAAuC,EAAExB,mBAAmBI,YAAY,CAAC,EAAE,CAAC;IAChG;IACAsB,OAAO;QACLF,iBAAiB,CAAC,oCAAoC,EAAExB,mBAAmBI,YAAY,CAAC,EAAE,CAAC;IAC7F;AACF;AAEA;;CAEC,GACD,MAAMuB,gBAAgBpC,WAAW;IAC/BM,MAAM;QACJ+B,eAAe;QACfC,cAAc;QACdC,YAAY;QACZC,iBAAiB;QACjBC,eAAe;QACftB,UAAU;QACVuB,mBAAmB;QACnBC,cAAc;QACdC,cAAc;QACdC,cAAc1C,OAAO2C,sBAAsB;QAC3C,YAAY;YACVC,SAAS;YACT5B,UAAU;QACZ;IACF;IAEAO,YAAY;QACVsB,OAAO;QACPC,QAAQ,CAAC,IAAI,EAAExC,mBAAmBM,WAAW,CAAC,CAAC,CAAC;QAChD,YAAY;YACVmC,MAAM;YACNC,OAAO;YACPF,QAAQ,CAAC,IAAI,EAAExC,mBAAmBM,WAAW,CAAC,CAAC,CAAC;QAClD;IACF;IAEAe,UAAU;QACRkB,OAAO,CAAC,IAAI,EAAEvC,mBAAmBM,WAAW,CAAC,CAAC,CAAC;QAC/CkC,QAAQ;QACR,YAAY;YACVD,OAAO,CAAC,IAAI,EAAEvC,mBAAmBM,WAAW,CAAC,CAAC,CAAC;YAC/CqC,KAAK;YACLC,QAAQ;QACV;IACF;AACF;AAEA;;CAEC,GACD,MAAMC,iBAAiBtD,WAAW;IAChCO,OAAO;QACL+B,cAAc;QACdC,YAAY;QACZC,iBAAiB;QACjBC,eAAe;QACftB,UAAU;QACV6B,OAAO,CAAC,IAAI,EAAEvC,mBAAmBK,YAAY,CAAC,CAAC,CAAC;QAChDmC,QAAQ,CAAC,IAAI,EAAExC,mBAAmBK,YAAY,CAAC,CAAC,CAAC;QACjDuB,eAAe;QACfO,cAAc;QACdF,mBAAmB;QACnBa,cAAcpD,OAAOqD,oBAAoB;QACzCC,QAAQ,GAAGtD,OAAOuD,eAAe,CAAC,OAAO,EAAEvD,OAAOwD,uBAAuB,EAAE;QAC3EC,WAAWzD,OAAO0D,OAAO;QACzBC,iBAAiB,CAAC,IAAI,EAAErD,mBAAmBG,aAAa,CAAC,CAAC,CAAC;QAC3D,YAAY;YACVO,UAAU;YACV4C,OAAO;YACPR,cAAcpD,OAAOqD,oBAAoB;YACzCQ,WAAW;YACXjB,SAAS;YACTU,QAAQ,GAAGtD,OAAO8D,gBAAgB,CAAC,OAAO,EAAE9D,OAAO+D,uBAAuB,EAAE;QAC9E;IACF;IACAxC,YAAY;QACVyC,WAAW;QACXjB,MAAM,CAAC,IAAI,EAAEzC,mBAAmBE,iBAAiB,CAAC,CAAC,CAAC;IACtD;IACAmB,UAAU;QACRqC,WAAW;QACXd,QAAQ,CAAC,IAAI,EAAE5C,mBAAmBE,iBAAiB,CAAC,CAAC,CAAC;IACxD;AACF;AAEA,MAAMyD,iBAAiBpE,WAAW;IAChCqE,SAAS;QACPd,cAAcpD,OAAOmE,kBAAkB;IACzC;IACAC,QAAQ;QACNhB,cAAcpD,OAAOqE,gBAAgB;IACvC;AACF;AAEA;;CAEC,GACD,MAAMC,iBAAiBzE,WAAW;IAChCQ,OAAO;QACLkE,QAAQ;QACRC,SAAS;QACTrC,cAAc;QACdC,YAAY;QACZC,iBAAiB;QACjBC,eAAe;QACfmC,SAAS;QACTC,QAAQ;QACR,CAAC,CAAC,kBAAkB,EAAEzE,sBAAsBG,KAAK,EAAE,CAAC,EAAE;YACpDkD,QAAQ,CAAC,UAAU,EAAEtD,OAAO2E,iBAAiB,EAAE;YAC/CC,SAAS,GAAG5E,OAAO8D,gBAAgB,CAAC,OAAO,EAAE9D,OAAO2C,sBAAsB,EAAE;YAC5ES,cAAcpD,OAAOqD,oBAAoB;QAC3C;IACF;IACA9B,YAAY;QACVuB,QAAQ,CAAC,IAAI,EAAExC,mBAAmBK,YAAY,CAAC,CAAC,CAAC;QACjDkC,OAAO;IACT;IACAlB,UAAU;QACRmB,QAAQ;QACRD,OAAO,CAAC,IAAI,EAAEvC,mBAAmBK,YAAY,CAAC,CAAC,CAAC;QAChD,gBAAgB;QAChBkE,WAAW;IACb;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAACC;IAC5C;IAEA,MAAMC,aAAajE;IACnB,MAAMkE,SAAS3D;IACf,MAAM4D,aAAajD;IACnB,MAAMkD,cAAchC;IACpB,MAAMiC,cAAcd;IACpB,MAAMe,cAAcpB;IACpB,MAAMqB,gBAAgB1D;IACtB,MAAM2D,aAAaR,MAAMpD,QAAQ;IAEjCoD,MAAM7E,IAAI,CAACsF,SAAS,GAAGzF,aACrBE,sBAAsBC,IAAI,EAC1B8E,YACAO,aAAaN,OAAOtD,QAAQ,GAAGsD,OAAO1D,UAAU,EAChDwD,MAAM7E,IAAI,CAACsF,SAAS;IAGtBT,MAAM5E,IAAI,CAACqF,SAAS,GAAGzF,aACrBE,sBAAsBE,IAAI,EAC1B+E,WAAW/E,IAAI,EACfmF,aAAa,CAACP,MAAMU,OAAO,IAAI,MAAM,EACrCJ,WAAW,CAACN,MAAMW,KAAK,IAAI,UAAU,EACrCH,aAAaL,WAAWvD,QAAQ,GAAGuD,WAAW3D,UAAU,EACxDwD,MAAM5E,IAAI,CAACqF,SAAS;IAGtBT,MAAM3E,KAAK,CAACoF,SAAS,GAAGzF,aACtBE,sBAAsBG,KAAK,EAC3B+E,YAAY/E,KAAK,EACjBmF,aAAaJ,YAAYxD,QAAQ,GAAGwD,YAAY5D,UAAU,EAC1DwD,MAAM3E,KAAK,CAACoF,SAAS;IAGvBT,MAAM1E,KAAK,CAACmF,SAAS,GAAGzF,aACtBE,sBAAsBI,KAAK,EAC3B+E,YAAY/E,KAAK,EACjBkF,aAAaH,YAAYzD,QAAQ,GAAGyD,YAAY7D,UAAU,EAC1DwD,MAAM1E,KAAK,CAACmF,SAAS;IAEvB,OAAOT;AACT,EAAE"}
1	+ {"version":3,"sources":["../src/components/ColorSlider/useColorSliderStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport type { ColorSliderSlots, ColorSliderState } from './ColorSlider.types';\n\nexport const colorSliderClassNames: SlotClassNames<ColorSliderSlots> = {\n root: 'fui-ColorSlider',\n rail: 'fui-ColorSlider__rail',\n thumb: 'fui-ColorSlider__thumb',\n input: 'fui-ColorSlider__input',\n};\n\nexport const colorSliderCSSVars = {\n sliderDirectionVar: `--fui-Slider--direction`,\n sliderProgressVar: `--fui-Slider--progress`,\n thumbColorVar: `--fui-Slider__thumb--color`,\n railColorVar: `--fui-Slider__rail--color`,\n thumbSizeVar: `--fui-Slider__thumb--size`,\n railSizeVar: `--fui-Slider__rail--size`,\n};\n\nconst hueBackground = `linear-gradient(${[\n `var(${colorSliderCSSVars.sliderDirectionVar})`,\n 'red',\n 'fuchsia',\n 'blue',\n 'aqua',\n 'lime',\n 'yellow',\n 'red',\n].join(',')})`;\n\n/*\n Styles for the root slot\n /\nconst useRootStyles = makeResetStyles({\n position: 'relative',\n display: 'inline-grid',\n touchAction: 'none',\n alignItems: 'center',\n justifyItems: 'center',\n [colorSliderCSSVars.thumbSizeVar]: '20px',\n [colorSliderCSSVars.railSizeVar]: '20px',\n minHeight: '32px',\n});\n\nconst useStyles = makeStyles({\n horizontal: {\n minWidth: '200px',\n // 3x3 grid with the rail and thumb in the center cell [2,2] and the hidden input stretching across all cells\n gridTemplateRows: `1fr var(${colorSliderCSSVars.thumbSizeVar}) 1fr`,\n gridTemplateColumns: `1fr 100% 1fr`,\n },\n\n vertical: {\n minHeight: '280px',\n // 3x3 grid with the rail and thumb in the center cell [2,2] and the hidden input stretching across all cells\n gridTemplateRows: `1fr 100% 1fr`,\n gridTemplateColumns: `1fr var(${colorSliderCSSVars.thumbSizeVar}) 1fr`,\n },\n});\n\nconst useChannelStyles = makeStyles({\n hue: {\n backgroundImage: hueBackground,\n },\n saturation: {\n backgroundImage: `linear-gradient(to right, #808080, var(${colorSliderCSSVars.railColorVar}))`,\n },\n value: {\n backgroundImage: `linear-gradient(to right, #000, var(${colorSliderCSSVars.railColorVar}))`,\n },\n});\n\n/\n Styles for the rail slot\n /\nconst useRailStyles = makeStyles({\n rail: {\n pointerEvents: 'none',\n gridRowStart: '2',\n gridRowEnd: '2',\n gridColumnStart: '2',\n gridColumnEnd: '2',\n position: 'relative',\n forcedColorAdjust: 'none',\n outlineWidth: '1px',\n outlineStyle: 'solid',\n outlineColor: tokens.colorTransparentStroke,\n '::before': {\n content: \"''\",\n position: 'absolute',\n },\n },\n\n horizontal: {\n width: '100%',\n height: `var(${colorSliderCSSVars.railSizeVar})`,\n '::before': {\n left: '-1px',\n right: '-1px',\n height: `var(${colorSliderCSSVars.railSizeVar})`,\n },\n },\n\n vertical: {\n width: `var(${colorSliderCSSVars.railSizeVar})`,\n height: '100%',\n '::before': {\n width: `var(${colorSliderCSSVars.railSizeVar})`,\n top: '-1px',\n bottom: '1px',\n },\n },\n});\n\n/\n Styles for the thumb slot\n /\nconst useThumbStyles = makeStyles({\n thumb: {\n gridRowStart: '2',\n gridRowEnd: '2',\n gridColumnStart: '2',\n gridColumnEnd: '2',\n position: 'absolute',\n width: `var(${colorSliderCSSVars.thumbSizeVar})`,\n height: `var(${colorSliderCSSVars.thumbSizeVar})`,\n pointerEvents: 'none',\n outlineStyle: 'none',\n forcedColorAdjust: 'none',\n borderRadius: tokens.borderRadiusCircular,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralForeground4}`,\n boxShadow: tokens.shadow4,\n backgroundColor: `var(${colorSliderCSSVars.thumbColorVar})`,\n '::before': {\n position: 'absolute',\n inset: '0px',\n borderRadius: tokens.borderRadiusCircular,\n boxSizing: 'border-box',\n content: \"''\",\n border: `${tokens.strokeWidthThick} solid ${tokens.colorNeutralBackground1}`,\n },\n },\n horizontal: {\n transform: 'translateX(-50%)',\n left: `var(${colorSliderCSSVars.sliderProgressVar})`,\n },\n vertical: {\n transform: 'translateY(50%)',\n bottom: `var(${colorSliderCSSVars.sliderProgressVar})`,\n },\n});\n\nconst useShapeStyles = makeStyles({\n rounded: {\n borderRadius: tokens.borderRadiusMedium,\n },\n square: {\n borderRadius: tokens.borderRadiusNone,\n },\n});\n\n/\n Styles for the Input slot\n /\nconst useInputStyles = makeStyles({\n input: {\n cursor: 'pointer',\n opacity: 0,\n gridRowStart: '1',\n gridRowEnd: '-1',\n gridColumnStart: '1',\n gridColumnEnd: '-1',\n padding: '0',\n margin: '0',\n [`:focus-visible ~ .${colorSliderClassNames.thumb}`]: {\n border: `2px solid ${tokens.colorStrokeFocus2}`,\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorTransparentStroke}`,\n borderRadius: tokens.borderRadiusCircular,\n },\n },\n horizontal: {\n height: `var(${colorSliderCSSVars.thumbSizeVar})`,\n width: '100%',\n },\n vertical: {\n height: '100%',\n width: `var(${colorSliderCSSVars.thumbSizeVar})`,\n 'writing-mode': 'vertical-lr',\n direction: 'rtl',\n },\n});\n\n/\n Apply styling to the ColorSlider slots based on the state\n */\nexport const useColorSliderStyles_unstable = (state: ColorSliderState): ColorSliderState => {\n const rootStyles = useRootStyles();\n const styles = useStyles();\n const railStyles = useRailStyles();\n const thumbStyles = useThumbStyles();\n const inputStyles = useInputStyles();\n const shapeStyles = useShapeStyles();\n const channelStyles = useChannelStyles();\n const isVertical = state.vertical;\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n colorSliderClassNames.root,\n rootStyles,\n isVertical ? styles.vertical : styles.horizontal,\n state.root.className,\n );\n\n // eslint-disable-next-line react-hooks/immutability\n state.rail.className = mergeClasses(\n colorSliderClassNames.rail,\n railStyles.rail,\n channelStyles[state.channel \|\| 'hue'],\n shapeStyles[state.shape \|\| 'rounded'],\n isVertical ? railStyles.vertical : railStyles.horizontal,\n state.rail.className,\n );\n\n // eslint-disable-next-line react-hooks/immutability\n state.thumb.className = mergeClasses(\n colorSliderClassNames.thumb,\n thumbStyles.thumb,\n isVertical ? thumbStyles.vertical : thumbStyles.horizontal,\n state.thumb.className,\n );\n\n // eslint-disable-next-line react-hooks/immutability\n state.input.className = mergeClasses(\n colorSliderClassNames.input,\n inputStyles.input,\n isVertical ? inputStyles.vertical : inputStyles.horizontal,\n state.input.className,\n );\n return state;\n};\n"],"names":["makeStyles","makeResetStyles","mergeClasses","tokens","colorSliderClassNames","root","rail","thumb","input","colorSliderCSSVars","sliderDirectionVar","sliderProgressVar","thumbColorVar","railColorVar","thumbSizeVar","railSizeVar","hueBackground","join","useRootStyles","position","display","touchAction","alignItems","justifyItems","minHeight","useStyles","horizontal","minWidth","gridTemplateRows","gridTemplateColumns","vertical","useChannelStyles","hue","backgroundImage","saturation","value","useRailStyles","pointerEvents","gridRowStart","gridRowEnd","gridColumnStart","gridColumnEnd","forcedColorAdjust","outlineWidth","outlineStyle","outlineColor","colorTransparentStroke","content","width","height","left","right","top","bottom","useThumbStyles","borderRadius","borderRadiusCircular","border","strokeWidthThin","colorNeutralForeground4","boxShadow","shadow4","backgroundColor","inset","boxSizing","strokeWidthThick","colorNeutralBackground1","transform","useShapeStyles","rounded","borderRadiusMedium","square","borderRadiusNone","useInputStyles","cursor","opacity","padding","margin","colorStrokeFocus2","outline","direction","useColorSliderStyles_unstable","state","rootStyles","styles","railStyles","thumbStyles","inputStyles","shapeStyles","channelStyles","isVertical","className","channel","shape"],"mappings":"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"}

package/lib-commonjs/components/AlphaSlider/useAlphaSliderState.js CHANGED Viewed

@@ -19,7 +19,6 @@ const _getPercent = require("../../utils/getPercent");
 const _alphaSliderUtils = require("./alphaSliderUtils");
 const _createHsvColor = require("../../utils/createHsvColor");
 const useAlphaSliderState_unstable = (state, props)=>{
-    'use no memo';
     var _props_defaultColor;
     const { dir } = (0, _reactsharedcontexts.useFluent_unstable)();
     const onChangeFromContext = (0, _colorPicker.useColorPickerContextValue_unstable)((ctx)=>ctx.requestChange);
@@ -57,12 +56,15 @@ const useAlphaSliderState_unstable = (state, props)=>{
         [_useAlphaSliderStylesstyles.alphaSliderCSSVars.railColorVar]: `hsl(${hslColor.h} ${hslColor.s * 100}%, ${hslColor.l * 100}%)`
     };
     // Root props
+    // eslint-disable-next-line react-hooks/immutability
     state.root.style = {
         ...rootVariables,
         ...state.root.style
     };
     // Input Props
+    // eslint-disable-next-line react-hooks/immutability
     state.input.value = clampedValue;
+    // eslint-disable-next-line react-hooks/immutability
     state.input.onChange = _onChange;
     return state;
 };

package/lib-commonjs/components/AlphaSlider/useAlphaSliderState.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/AlphaSlider/useAlphaSliderState.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { tinycolor } from '@ctrl/tinycolor';\nimport { clamp, useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { alphaSliderCSSVars } from './useAlphaSliderStyles.styles';\nimport type { AlphaSliderState, AlphaSliderProps } from './AlphaSlider.types';\nimport { useColorPickerContextValue_unstable } from '../../contexts/colorPicker';\nimport { MIN, MAX } from '../../utils/constants';\nimport { getPercent } from '../../utils/getPercent';\nimport { adjustToTransparency, calculateTransparencyValue, getSliderDirection } from './alphaSliderUtils';\nimport { createHsvColor } from '../../utils/createHsvColor';\n\nexport const useAlphaSliderState_unstable = (state: AlphaSliderState, props: AlphaSliderProps): AlphaSliderState => {\n ~~'use no memo';\n\n~~ const { dir } = useFluent();\n const onChangeFromContext = useColorPickerContextValue_unstable(ctx => ctx.requestChange);\n const colorFromContext = useColorPickerContextValue_unstable(ctx => ctx.color);\n const { color, onChange = onChangeFromContext, transparency = false, vertical = false } = props;\n const hsvColor = color \|\| colorFromContext;\n const hslColor = tinycolor(hsvColor).toHsl();\n\n const [currentValue, setCurrentValue] = useControllableState({\n defaultState: calculateTransparencyValue(transparency, props.defaultColor?.a),\n state: calculateTransparencyValue(transparency, hsvColor?.a),\n initialState: adjustToTransparency(100, transparency),\n });\n\n const clampedValue = clamp(currentValue, MIN, MAX);\n const valuePercent = getPercent(clampedValue, MIN, MAX);\n\n const inputOnChange = state.input.onChange;\n\n const _onChange: React.ChangeEventHandler<HTMLInputElement> = useEventCallback(event => {\n const newValue = adjustToTransparency(Number(event.target.value), transparency);\n const newColor = createHsvColor({ ...hsvColor, a: newValue / 100 });\n setCurrentValue(newValue);\n inputOnChange?.(event);\n onChange?.(event, { type: 'change', event, color: newColor });\n });\n\n const sliderDirection = getSliderDirection(dir, vertical, transparency);\n\n const rootVariables = {\n [alphaSliderCSSVars.sliderDirectionVar]: sliderDirection,\n [alphaSliderCSSVars.sliderProgressVar]: `${valuePercent}%`,\n [alphaSliderCSSVars.thumbColorVar]: `hsla(${hslColor.h} ${hslColor.s * 100}%, ${hslColor.l * 100}%, ${hslColor.a})`,\n [alphaSliderCSSVars.railColorVar]: `hsl(${hslColor.h} ${hslColor.s * 100}%, ${hslColor.l * 100}%)`,\n };\n\n // Root props\n 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\n return state;\n};\n"],"names":["tinycolor","clamp","useControllableState","useEventCallback","useFluent_unstable","useFluent","alphaSliderCSSVars","useColorPickerContextValue_unstable","MIN","MAX","getPercent","adjustToTransparency","calculateTransparencyValue","getSliderDirection","createHsvColor","useAlphaSliderState_unstable","state","props","dir","onChangeFromContext","ctx","requestChange","colorFromContext","color","onChange","transparency","vertical","hsvColor","hslColor","toHsl","currentValue","setCurrentValue","defaultState","defaultColor","a","initialState","clampedValue","valuePercent","inputOnChange","input","_onChange","event","newValue","Number","target","value","newColor","type","sliderDirection","rootVariables","sliderDirectionVar","sliderProgressVar","thumbColorVar","h","s","l","railColorVar","root","style"],"mappings":"AAAA;;;;;+BAcae;;;;;;2BAXa,kBAAkB;gCACkB,4BAA4B;qCAC1C,kCAAkC;4CAC/C,gCAAgC;6BAEf,6BAA6B;2BACxD,wBAAwB;4BACtB,yBAAyB;kCACiC,qBAAqB;gCAC3E,6BAA6B;AAErD,qCAAqC,CAACC,OAAyBC;~~IACpE~~;~~QAUyDA;~~IARzD,MAAM,EAAEC,GAAG,EAAE,OAAGb,uCAAAA;IAChB,MAAMc,~~sBAAsBZ~~,~~oDAAAA~~,EAAoCa,CAAAA,MAAOA,IAAIC,aAAa;IACxF,MAAMC,uBAAmBf,gDAAAA,EAAoCa,CAAAA,MAAOA,IAAIG,KAAK;IAC7E,MAAM,EAAEA,KAAK,EAAEC,WAAWL,mBAAmB,EAAEM,eAAe,KAAK,EAAEC,WAAW,KAAK,EAAE,GAAGT;IAC1F,MAAMU,WAAWJ,SAASD;IAC1B,MAAMM,eAAW5B,oBAAAA,EAAU2B,UAAUE,KAAK;IAE1C,MAAM,CAACC,cAAcC,gBAAgB,~~OAAG7B~~,~~oCAAAA~~,EAAqB;QAC3D8B,kBAAcpB,4CAAAA,EAA2Ba,cAAAA,CAAcR,sBAAAA,MAAMgB,YAAAA,AAAY,MAAA,QAAlBhB,wBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,oBAAoBiB,CAAC;QAC5ElB,WAAOJ,4CAAAA,EAA2Ba,cAAcE,aAAAA,QAAAA,aAAAA,KAAAA,IAAAA,KAAAA,IAAAA,SAAUO,CAAC;QAC3DC,kBAAcxB,sCAAAA,EAAqB,KAAKc;IAC1C;IAEA,MAAMW,mBAAenC,qBAAAA,EAAM6B,cAActB,cAAAA,EAAKC,cAAAA;IAC9C,MAAM4B,mBAAe3B,sBAAAA,EAAW0B,cAAc5B,cAAAA,EAAKC,cAAAA;IAEnD,MAAM6B,gBAAgBtB,MAAMuB,KAAK,CAACf,QAAQ;IAE1C,MAAMgB,gBAAwDrC,gCAAAA,EAAiBsC,CAAAA;QAC7E,MAAMC,eAAW/B,sCAAAA,EAAqBgC,OAAOF,MAAMG,MAAM,CAACC,KAAK,GAAGpB;QAClE,MAAMqB,eAAWhC,8BAAAA,EAAe;YAAE,GAAGa,QAAQ;YAAEO,GAAGQ,WAAW;QAAI;QACjEX,gBAAgBW;QAChBJ,kBAAAA,QAAAA,kBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,cAAgBG;QAChBjB,aAAAA,QAAAA,aAAAA,KAAAA,IAAAA,KAAAA,IAAAA,SAAWiB,OAAO;YAAEM,MAAM;YAAUN;YAAOlB,OAAOuB;QAAS;IAC7D;IAEA,MAAME,sBAAkBnC,oCAAAA,EAAmBK,KAAKQ,UAAUD;IAE1D,MAAMwB,gBAAgB;QACpB,CAAC3C,8CAAAA,CAAmB4C,kBAAkB,CAAC,EAAEF;QACzC,CAAC1C,8CAAAA,CAAmB6C,iBAAiB,CAAC,EAAE,GAAGd,aAAa,CAAC,CAAC;QAC1D,CAAC/B,8CAAAA,CAAmB8C,aAAa,CAAC,EAAE,CAAC,KAAK,EAAExB,SAASyB,CAAC,CAAC,CAAC,EAAEzB,SAAS0B,CAAC,GAAG,IAAI,GAAG,EAAE1B,SAAS2B,CAAC,GAAG,IAAI,GAAG,EAAE3B,SAASM,CAAC,CAAC,CAAC,CAAC;QACnH,CAAC5B,8CAAAA,CAAmBkD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE5B,SAASyB,CAAC,CAAC,CAAC,EAAEzB,SAAS0B,CAAC,GAAG,IAAI,GAAG,EAAE1B,SAAS2B,CAAC,GAAG,IAAI,EAAE,CAAC;IACpG;IAEA,aAAa;~~IACbvC~~,MAAMyC,IAAI,CAACC,KAAK,GAAG;QACjB,GAAGT,aAAa;QAChB,GAAGjC,MAAMyC,IAAI,CAACC,KAAK;IACrB;IAEA,cAAc;~~IACd1C~~,MAAMuB,KAAK,CAACM,KAAK,GAAGT;~~IACpBpB~~,MAAMuB,KAAK,CAACf,QAAQ,GAAGgB;IAEvB,OAAOxB;AACT,EAAE"}
1	+ {"version":3,"sources":["../src/components/AlphaSlider/useAlphaSliderState.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { tinycolor } from '@ctrl/tinycolor';\nimport { clamp, useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { alphaSliderCSSVars } from './useAlphaSliderStyles.styles';\nimport type { AlphaSliderState, AlphaSliderProps } from './AlphaSlider.types';\nimport { useColorPickerContextValue_unstable } from '../../contexts/colorPicker';\nimport { MIN, MAX } from '../../utils/constants';\nimport { getPercent } from '../../utils/getPercent';\nimport { adjustToTransparency, calculateTransparencyValue, getSliderDirection } from './alphaSliderUtils';\nimport { createHsvColor } from '../../utils/createHsvColor';\n\nexport const useAlphaSliderState_unstable = (state: AlphaSliderState, props: AlphaSliderProps): AlphaSliderState => {\n const { dir } = useFluent();\n const onChangeFromContext = useColorPickerContextValue_unstable(ctx => ctx.requestChange);\n const colorFromContext = useColorPickerContextValue_unstable(ctx => ctx.color);\n const { color, onChange = onChangeFromContext, transparency = false, vertical = false } = props;\n const hsvColor = color \|\| colorFromContext;\n const hslColor = tinycolor(hsvColor).toHsl();\n\n const [currentValue, setCurrentValue] = useControllableState({\n defaultState: calculateTransparencyValue(transparency, props.defaultColor?.a),\n state: calculateTransparencyValue(transparency, hsvColor?.a),\n initialState: adjustToTransparency(100, transparency),\n });\n\n const clampedValue = clamp(currentValue, MIN, MAX);\n const valuePercent = getPercent(clampedValue, MIN, MAX);\n\n const inputOnChange = state.input.onChange;\n\n const _onChange: React.ChangeEventHandler<HTMLInputElement> = useEventCallback(event => {\n const newValue = adjustToTransparency(Number(event.target.value), transparency);\n const newColor = createHsvColor({ ...hsvColor, a: newValue / 100 });\n setCurrentValue(newValue);\n inputOnChange?.(event);\n onChange?.(event, { type: 'change', event, color: newColor });\n });\n\n const sliderDirection = getSliderDirection(dir, vertical, transparency);\n\n const rootVariables = {\n [alphaSliderCSSVars.sliderDirectionVar]: sliderDirection,\n [alphaSliderCSSVars.sliderProgressVar]: `${valuePercent}%`,\n [alphaSliderCSSVars.thumbColorVar]: `hsla(${hslColor.h} ${hslColor.s * 100}%, ${hslColor.l * 100}%, ${hslColor.a})`,\n [alphaSliderCSSVars.railColorVar]: `hsl(${hslColor.h} ${hslColor.s * 100}%, ${hslColor.l * 100}%)`,\n };\n\n // Root props\n // eslint-disable-next-line react-hooks/immutability\n state.root.style = {\n ...rootVariables,\n ...state.root.style,\n };\n\n // Input Props\n // eslint-disable-next-line react-hooks/immutability\n state.input.value = clampedValue;\n // eslint-disable-next-line react-hooks/immutability\n state.input.onChange = _onChange;\n\n return state;\n};\n"],"names":["tinycolor","clamp","useControllableState","useEventCallback","useFluent_unstable","useFluent","alphaSliderCSSVars","useColorPickerContextValue_unstable","MIN","MAX","getPercent","adjustToTransparency","calculateTransparencyValue","getSliderDirection","createHsvColor","useAlphaSliderState_unstable","state","props","dir","onChangeFromContext","ctx","requestChange","colorFromContext","color","onChange","transparency","vertical","hsvColor","hslColor","toHsl","currentValue","setCurrentValue","defaultState","defaultColor","a","initialState","clampedValue","valuePercent","inputOnChange","input","_onChange","event","newValue","Number","target","value","newColor","type","sliderDirection","rootVariables","sliderDirectionVar","sliderProgressVar","thumbColorVar","h","s","l","railColorVar","root","style"],"mappings":"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"}

package/lib-commonjs/components/AlphaSlider/useAlphaSliderStyles.styles.js CHANGED Viewed

@@ -103,13 +103,17 @@ const alphaSliderCSSVars = {
     ]
 });
 const useAlphaSliderStyles_unstable = (state)=>{
-    'use no memo';
     const styles = useStyles();
     const thumbStyles = useThumbStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(alphaSliderClassNames.root, state.root.className);
+    // eslint-disable-next-line react-hooks/immutability
     state.input.className = (0, _react.mergeClasses)(alphaSliderClassNames.input, state.input.className);
+    // eslint-disable-next-line react-hooks/immutability
     state.rail.className = (0, _react.mergeClasses)(alphaSliderClassNames.rail, styles.rail, state.rail.className);
+    // eslint-disable-next-line react-hooks/immutability
     state.thumb.className = (0, _react.mergeClasses)(alphaSliderClassNames.thumb, thumbStyles.thumb, state.vertical ? thumbStyles.vertical : thumbStyles.horizontal, state.thumb.className);
+    // eslint-disable-next-line react-hooks/immutability
     state.thumb.className = (0, _react.mergeClasses)(alphaSliderClassNames.thumb, thumbStyles.thumb, state.vertical ? thumbStyles.vertical : thumbStyles.horizontal, state.thumb.className);
     (0, _useColorSliderStylesstyles.useColorSliderStyles_unstable)(state);
     return state;

package/lib-commonjs/components/AlphaSlider/useAlphaSliderStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useAlphaSliderStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useColorSliderStyles_unstable } from '../ColorSlider/useColorSliderStyles.styles';\nconst TRANSPARENT_IMAGE_URL = 'https://fabricweb.azureedge.net/fabric-website/assets/images/transparent-pattern.png';\nexport const alphaSliderClassNames = {\n root: 'fui-AlphaSlider',\n rail: 'fui-AlphaSlider__rail',\n thumb: 'fui-AlphaSlider__thumb',\n input: 'fui-AlphaSlider__input'\n};\nexport const alphaSliderCSSVars = {\n sliderDirectionVar: `--fui-AlphaSlider--direction`,\n sliderProgressVar: `--fui-AlphaSlider--progress`,\n thumbColorVar: `--fui-AlphaSlider__thumb--color`,\n railColorVar: `--fui-AlphaSlider__rail--color`\n};\n/*\n Styles for the root slot\n / const useStyles = makeStyles({\n rail: {\n border: `1px solid ${tokens.colorNeutralStroke1}`,\n backgroundImage: `linear-gradient(var(${alphaSliderCSSVars.sliderDirectionVar}), transparent, var(${alphaSliderCSSVars.railColorVar})), url(${TRANSPARENT_IMAGE_URL})`\n }\n});\n/\n Styles for the thumb slot\n / const useThumbStyles = makeStyles({\n thumb: {\n backgroundColor: tokens.colorNeutralBackground1,\n '::before': {\n backgroundColor: `var(${alphaSliderCSSVars.thumbColorVar})`\n }\n },\n horizontal: {\n transform: 'translateX(-50%)',\n left: `var(${alphaSliderCSSVars.sliderProgressVar})`\n },\n vertical: {\n transform: 'translateY(50%)',\n bottom: `var(${alphaSliderCSSVars.sliderProgressVar})`\n }\n});\n/\n Apply styling to the AlphaSlider slots based on the state\n */ export const useAlphaSliderStyles_unstable = (state)=>{\n ~~'use no memo';\n~~ const styles = useStyles();\n const thumbStyles = useThumbStyles();\n state.root.className = mergeClasses(alphaSliderClassNames.root, state.root.className);\n state.input.className = mergeClasses(alphaSliderClassNames.input, state.input.className);\n state.rail.className = mergeClasses(alphaSliderClassNames.rail, styles.rail, state.rail.className);\n state.thumb.className = mergeClasses(alphaSliderClassNames.thumb, thumbStyles.thumb, state.vertical ? thumbStyles.vertical : thumbStyles.horizontal, state.thumb.className);\n state.thumb.className = mergeClasses(alphaSliderClassNames.thumb, thumbStyles.thumb, state.vertical ? thumbStyles.vertical : thumbStyles.horizontal, state.thumb.className);\n useColorSliderStyles_unstable(state);\n return state;\n};\n"],"names":["__styles","mergeClasses","tokens","useColorSliderStyles_unstable","TRANSPARENT_IMAGE_URL","alphaSliderClassNames","root","rail","thumb","input","alphaSliderCSSVars","sliderDirectionVar","sliderProgressVar","thumbColorVar","railColorVar","useStyles","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","Bcmaq0h","d","p","useThumbStyles","De3pzq","cmx5o7","horizontal","Bz10aip","oyh7mz","vertical","B5kzvoi","useAlphaSliderStyles_unstable","state","styles","thumbStyles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;~~sBAWmB~~;;;yBANG;;;iCAwCY;~~eAA7B4C~~;;;uBA5CwB,gBAAgB;4CAEX,4CAA4C;AAC1F,MAAMxC,qBAAqB,GAAG,sFAAsF;AAC7G,MAAMC,wBAAwB;IACjCC,IAAI,EAAE,iBAAiB;IACvBC,IAAI,EAAE,uBAAuB;IAC7BC,KAAK,EAAE,wBAAwB;IAC/BC,KAAK,EAAE;AACX,CAAC;AACM,~~MAAMC,qBAAqB~~;~~IAC9BC~~,kBAAkB,EAAE,CAAA,4BAAA,CAA8B;IAClDC,iBAAiB,EAAE,CAAA,2BAAA,CAA6B;IAChDC,aAAa,EAAE,CAAA,+BAAA,CAAiC;IAChDC,YAAY,EAAE,CAAA,8BAAA,CAAA;AAClB,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGf,eAAA,EAAA;IAAAO,IAAA,EAAA;QAAAS,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA,CAAA,2NAAA,CAAA;KAAA;AAAA,CAKrB,CAAC;AACF;;CAEA,GAAI,MAAMC,cAAc,GAAA,WAAA,OAAGpC,eAAA,EAAA;IAAAQ,KAAA,EAAA;QAAA6B,MAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,UAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,QAAA,EAAA;QAAAF,OAAA,EAAA;QAAAG,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAT,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAe1B,CAAC;AAGS,uCAAuCW,KAAK,IAAG;IACtD,~~aAAa;IACb,~~MAAMC,MAAM,GAAG/B,SAAS,CAAC,CAAC;IAC1B,MAAMgC,WAAW,GAAGX,cAAc,CAAC,CAAC;~~IACpCS~~,KAAK,CAACvC,IAAI,CAAC0C,SAAS,~~OAAG~~/C,~~mBAAY~~,EAACI,qBAAqB,CAACC,IAAI,EAAEuC,KAAK,CAACvC,IAAI,CAAC0C,SAAS,CAAC;~~IACrFH~~,KAAK,CAACpC,KAAK,CAACuC,SAAS,GAAG/C,uBAAY,EAACI,qBAAqB,CAACI,KAAK,EAAEoC,KAAK,CAACpC,KAAK,CAACuC,SAAS,CAAC;~~IACxFH~~,KAAK,CAACtC,IAAI,CAACyC,SAAS,~~OAAG~~/C,~~mBAAY~~,EAACI,qBAAqB,CAACE,IAAI,EAAEuC,MAAM,CAACvC,IAAI,EAAEsC,KAAK,CAACtC,IAAI,CAACyC,SAAS,CAAC;~~IAClGH~~,KAAK,CAACrC,KAAK,CAACwC,SAAS,OAAG/C,mBAAY,EAACI,qBAAqB,CAACG,KAAK,EAAEuC,WAAW,CAACvC,KAAK,EAAEqC,KAAK,CAACH,QAAQ,GAAGK,WAAW,CAACL,QAAQ,GAAGK,WAAW,CAACR,UAAU,EAAEM,KAAK,CAACrC,KAAK,CAACwC,SAAS,CAAC;~~IAC3KH~~,KAAK,CAACrC,KAAK,CAACwC,SAAS,OAAG/C,mBAAY,EAACI,qBAAqB,CAACG,KAAK,EAAEuC,WAAW,CAACvC,KAAK,EAAEqC,KAAK,CAACH,QAAQ,GAAGK,WAAW,CAACL,QAAQ,GAAGK,WAAW,CAACR,UAAU,EAAEM,KAAK,CAACrC,KAAK,CAACwC,SAAS,CAAC;QAC3K7C,yDAA6B,EAAC0C,KAAK,CAAC;IACpC,OAAOA,KAAK;AAChB,CAAC"}
1	+ {"version":3,"sources":["useAlphaSliderStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useColorSliderStyles_unstable } from '../ColorSlider/useColorSliderStyles.styles';\nconst TRANSPARENT_IMAGE_URL = 'https://fabricweb.azureedge.net/fabric-website/assets/images/transparent-pattern.png';\nexport const alphaSliderClassNames = {\n root: 'fui-AlphaSlider',\n rail: 'fui-AlphaSlider__rail',\n thumb: 'fui-AlphaSlider__thumb',\n input: 'fui-AlphaSlider__input'\n};\nexport const alphaSliderCSSVars = {\n sliderDirectionVar: `--fui-AlphaSlider--direction`,\n sliderProgressVar: `--fui-AlphaSlider--progress`,\n thumbColorVar: `--fui-AlphaSlider__thumb--color`,\n railColorVar: `--fui-AlphaSlider__rail--color`\n};\n/*\n Styles for the root slot\n / const useStyles = makeStyles({\n rail: {\n border: `1px solid ${tokens.colorNeutralStroke1}`,\n backgroundImage: `linear-gradient(var(${alphaSliderCSSVars.sliderDirectionVar}), transparent, var(${alphaSliderCSSVars.railColorVar})), url(${TRANSPARENT_IMAGE_URL})`\n }\n});\n/\n Styles for the thumb slot\n / const useThumbStyles = makeStyles({\n thumb: {\n backgroundColor: tokens.colorNeutralBackground1,\n '::before': {\n backgroundColor: `var(${alphaSliderCSSVars.thumbColorVar})`\n }\n },\n horizontal: {\n transform: 'translateX(-50%)',\n left: `var(${alphaSliderCSSVars.sliderProgressVar})`\n },\n vertical: {\n transform: 'translateY(50%)',\n bottom: `var(${alphaSliderCSSVars.sliderProgressVar})`\n }\n});\n/\n Apply styling to the AlphaSlider slots based on the state\n */ export const useAlphaSliderStyles_unstable = (state)=>{\n const styles = useStyles();\n const thumbStyles = useThumbStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(alphaSliderClassNames.root, state.root.className);\n // eslint-disable-next-line react-hooks/immutability\n state.input.className = mergeClasses(alphaSliderClassNames.input, state.input.className);\n // eslint-disable-next-line react-hooks/immutability\n state.rail.className = mergeClasses(alphaSliderClassNames.rail, styles.rail, state.rail.className);\n // eslint-disable-next-line react-hooks/immutability\n state.thumb.className = mergeClasses(alphaSliderClassNames.thumb, thumbStyles.thumb, state.vertical ? thumbStyles.vertical : thumbStyles.horizontal, state.thumb.className);\n // eslint-disable-next-line react-hooks/immutability\n state.thumb.className = mergeClasses(alphaSliderClassNames.thumb, thumbStyles.thumb, state.vertical ? thumbStyles.vertical : thumbStyles.horizontal, state.thumb.className);\n useColorSliderStyles_unstable(state);\n return state;\n};\n"],"names":["__styles","mergeClasses","tokens","useColorSliderStyles_unstable","TRANSPARENT_IMAGE_URL","alphaSliderClassNames","root","rail","thumb","input","alphaSliderCSSVars","sliderDirectionVar","sliderProgressVar","thumbColorVar","railColorVar","useStyles","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","Bcmaq0h","d","p","useThumbStyles","De3pzq","cmx5o7","horizontal","Bz10aip","oyh7mz","vertical","B5kzvoi","useAlphaSliderStyles_unstable","state","styles","thumbStyles","className"],"mappings":"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"}

package/lib-commonjs/components/AlphaSlider/useAlphaSliderStyles.styles.raw.js CHANGED Viewed

@@ -63,13 +63,17 @@ const alphaSliderCSSVars = {
     }
 });
 const useAlphaSliderStyles_unstable = (state)=>{
-    'use no memo';
     const styles = useStyles();
     const thumbStyles = useThumbStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(alphaSliderClassNames.root, state.root.className);
+    // eslint-disable-next-line react-hooks/immutability
     state.input.className = (0, _react.mergeClasses)(alphaSliderClassNames.input, state.input.className);
+    // eslint-disable-next-line react-hooks/immutability
     state.rail.className = (0, _react.mergeClasses)(alphaSliderClassNames.rail, styles.rail, state.rail.className);
+    // eslint-disable-next-line react-hooks/immutability
     state.thumb.className = (0, _react.mergeClasses)(alphaSliderClassNames.thumb, thumbStyles.thumb, state.vertical ? thumbStyles.vertical : thumbStyles.horizontal, state.thumb.className);
+    // eslint-disable-next-line react-hooks/immutability
     state.thumb.className = (0, _react.mergeClasses)(alphaSliderClassNames.thumb, thumbStyles.thumb, state.vertical ? thumbStyles.vertical : thumbStyles.horizontal, state.thumb.className);
     (0, _useColorSliderStylesstyles.useColorSliderStyles_unstable)(state);
     return state;

package/lib-commonjs/components/AlphaSlider/useAlphaSliderStyles.styles.raw.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/AlphaSlider/useAlphaSliderStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { useColorSliderStyles_unstable } from '../ColorSlider/useColorSliderStyles.styles';\nimport type { AlphaSliderSlots, AlphaSliderState } from './AlphaSlider.types';\n\nconst TRANSPARENT_IMAGE_URL = 'https://fabricweb.azureedge.net/fabric-website/assets/images/transparent-pattern.png';\n\nexport const alphaSliderClassNames: SlotClassNames<AlphaSliderSlots> = {\n root: 'fui-AlphaSlider',\n rail: 'fui-AlphaSlider__rail',\n thumb: 'fui-AlphaSlider__thumb',\n input: 'fui-AlphaSlider__input',\n};\n\nexport const alphaSliderCSSVars = {\n sliderDirectionVar: `--fui-AlphaSlider--direction`,\n sliderProgressVar: `--fui-AlphaSlider--progress`,\n thumbColorVar: `--fui-AlphaSlider__thumb--color`,\n railColorVar: `--fui-AlphaSlider__rail--color`,\n};\n\n/*\n Styles for the root slot\n /\nconst useStyles = makeStyles({\n rail: {\n border: `1px solid ${tokens.colorNeutralStroke1}`,\n backgroundImage: `linear-gradient(var(${alphaSliderCSSVars.sliderDirectionVar}), transparent, var(${alphaSliderCSSVars.railColorVar})), url(${TRANSPARENT_IMAGE_URL})`,\n },\n});\n\n/\n Styles for the thumb slot\n /\nconst useThumbStyles = makeStyles({\n thumb: {\n backgroundColor: tokens.colorNeutralBackground1,\n '::before': {\n backgroundColor: `var(${alphaSliderCSSVars.thumbColorVar})`,\n },\n },\n horizontal: {\n transform: 'translateX(-50%)',\n left: `var(${alphaSliderCSSVars.sliderProgressVar})`,\n },\n vertical: {\n transform: 'translateY(50%)',\n bottom: `var(${alphaSliderCSSVars.sliderProgressVar})`,\n },\n});\n\n/\n Apply styling to the AlphaSlider slots based on the state\n */\nexport const useAlphaSliderStyles_unstable = (state: AlphaSliderState): AlphaSliderState => {\n ~~'use no memo';\n\n~~ const styles = useStyles();\n const thumbStyles = useThumbStyles();\n state.root.className = mergeClasses(alphaSliderClassNames.root, state.root.className);\n state.input.className = mergeClasses(alphaSliderClassNames.input, state.input.className);\n state.rail.className = mergeClasses(alphaSliderClassNames.rail, styles.rail, state.rail.className);\n\n state.thumb.className = mergeClasses(\n alphaSliderClassNames.thumb,\n thumbStyles.thumb,\n state.vertical ? thumbStyles.vertical : thumbStyles.horizontal,\n state.thumb.className,\n );\n\n state.thumb.className = mergeClasses(\n alphaSliderClassNames.thumb,\n thumbStyles.thumb,\n state.vertical ? thumbStyles.vertical : thumbStyles.horizontal,\n state.thumb.className,\n );\n\n useColorSliderStyles_unstable(state);\n return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","useColorSliderStyles_unstable","TRANSPARENT_IMAGE_URL","alphaSliderClassNames","root","rail","thumb","input","alphaSliderCSSVars","sliderDirectionVar","sliderProgressVar","thumbColorVar","railColorVar","useStyles","border","colorNeutralStroke1","backgroundImage","useThumbStyles","backgroundColor","colorNeutralBackground1","horizontal","transform","left","vertical","bottom","useAlphaSliderStyles_unstable","state","styles","thumbStyles","className"],"mappings":"AAAA;;;;;;;;;;;;sBAiBaU;;;yBAPAL;;;iCA+CAsB~~;eAAAA;;;~~uBAvD4B,iBAAiB;4BACnC,wBAAwB;4CAED,6CAA6C;AAG3F,MAAMvB,wBAAwB;AAEvB,MAAMC,wBAA0D;IACrEC,MAAM;IACNC,MAAM;IACNC,OAAO;IACPC,OAAO;AACT,EAAE;AAEK,MAAMC,qBAAqB;IAChCC,oBAAoB,CAAC,4BAA4B,CAAC;IAClDC,mBAAmB,CAAC,2BAA2B,CAAC;IAChDC,eAAe,CAAC,+BAA+B,CAAC;IAChDC,cAAc,CAAC,8BAA8B,CAAC;AAChD,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYf,iBAAAA,EAAW;IAC3BO,MAAM;QACJS,QAAQ,CAAC,UAAU,EAAEd,kBAAAA,CAAOe,mBAAmB,EAAE;QACjDC,iBAAiB,CAAC,oBAAoB,EAAER,mBAAmBC,kBAAkB,CAAC,oBAAoB,EAAED,mBAAmBI,YAAY,CAAC,QAAQ,EAAEV,sBAAsB,CAAC,CAAC;IACxK;AACF;AAEA;;CAEC,GACD,MAAMe,qBAAiBnB,iBAAAA,EAAW;IAChCQ,OAAO;QACLY,iBAAiBlB,kBAAAA,CAAOmB,uBAAuB;QAC/C,YAAY;YACVD,iBAAiB,CAAC,IAAI,EAAEV,mBAAmBG,aAAa,CAAC,CAAC,CAAC;QAC7D;IACF;IACAS,YAAY;QACVC,WAAW;QACXC,MAAM,CAAC,IAAI,EAAEd,mBAAmBE,iBAAiB,CAAC,CAAC,CAAC;IACtD;IACAa,UAAU;QACRF,WAAW;QACXG,QAAQ,CAAC,IAAI,EAAEhB,mBAAmBE,iBAAiB,CAAC,CAAC,CAAC;IACxD;AACF;AAKO,~~sCAAsC~~,~~CAACgB~~;IAC5C~~;IAEA~~,MAAMC,SAASd;IACf,MAAMe,cAAcX;~~IACpBS~~,MAAMtB,IAAI,CAACyB,SAAS,~~GAAG9B~~,~~uBAAAA~~,EAAaI,sBAAsBC,IAAI,EAAEsB,MAAMtB,IAAI,CAACyB,SAAS;~~IACpFH~~,MAAMnB,KAAK,CAACsB,SAAS,OAAG9B,mBAAAA,EAAaI,sBAAsBI,KAAK,EAAEmB,MAAMnB,KAAK,CAACsB,SAAS;~~IACvFH~~,MAAMrB,IAAI,CAACwB,SAAS,OAAG9B,mBAAAA,EAAaI,sBAAsBE,IAAI,EAAEsB,OAAOtB,IAAI,EAAEqB,MAAMrB,IAAI,CAACwB,SAAS;~~IAEjGH~~,MAAMpB,KAAK,CAACuB,SAAS,OAAG9B,mBAAAA,EACtBI,sBAAsBG,KAAK,EAC3BsB,YAAYtB,KAAK,EACjBoB,MAAMH,QAAQ,GAAGK,YAAYL,QAAQ,GAAGK,YAAYR,UAAU,EAC9DM,MAAMpB,KAAK,CAACuB,SAAS;~~IAGvBH~~,MAAMpB,KAAK,CAACuB,SAAS,OAAG9B,mBAAAA,EACtBI,sBAAsBG,KAAK,EAC3BsB,YAAYtB,KAAK,EACjBoB,MAAMH,QAAQ,GAAGK,YAAYL,QAAQ,GAAGK,YAAYR,UAAU,EAC9DM,MAAMpB,KAAK,CAACuB,SAAS;QAGvB5B,yDAAAA,EAA8ByB;IAC9B,OAAOA;AACT,EAAE"}
1	+ {"version":3,"sources":["../src/components/AlphaSlider/useAlphaSliderStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { useColorSliderStyles_unstable } from '../ColorSlider/useColorSliderStyles.styles';\nimport type { AlphaSliderSlots, AlphaSliderState } from './AlphaSlider.types';\n\nconst TRANSPARENT_IMAGE_URL = 'https://fabricweb.azureedge.net/fabric-website/assets/images/transparent-pattern.png';\n\nexport const alphaSliderClassNames: SlotClassNames<AlphaSliderSlots> = {\n root: 'fui-AlphaSlider',\n rail: 'fui-AlphaSlider__rail',\n thumb: 'fui-AlphaSlider__thumb',\n input: 'fui-AlphaSlider__input',\n};\n\nexport const alphaSliderCSSVars = {\n sliderDirectionVar: `--fui-AlphaSlider--direction`,\n sliderProgressVar: `--fui-AlphaSlider--progress`,\n thumbColorVar: `--fui-AlphaSlider__thumb--color`,\n railColorVar: `--fui-AlphaSlider__rail--color`,\n};\n\n/*\n Styles for the root slot\n /\nconst useStyles = makeStyles({\n rail: {\n border: `1px solid ${tokens.colorNeutralStroke1}`,\n backgroundImage: `linear-gradient(var(${alphaSliderCSSVars.sliderDirectionVar}), transparent, var(${alphaSliderCSSVars.railColorVar})), url(${TRANSPARENT_IMAGE_URL})`,\n },\n});\n\n/\n Styles for the thumb slot\n /\nconst useThumbStyles = makeStyles({\n thumb: {\n backgroundColor: tokens.colorNeutralBackground1,\n '::before': {\n backgroundColor: `var(${alphaSliderCSSVars.thumbColorVar})`,\n },\n },\n horizontal: {\n transform: 'translateX(-50%)',\n left: `var(${alphaSliderCSSVars.sliderProgressVar})`,\n },\n vertical: {\n transform: 'translateY(50%)',\n bottom: `var(${alphaSliderCSSVars.sliderProgressVar})`,\n },\n});\n\n/\n Apply styling to the AlphaSlider slots based on the state\n */\nexport const useAlphaSliderStyles_unstable = (state: AlphaSliderState): AlphaSliderState => {\n const styles = useStyles();\n const thumbStyles = useThumbStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(alphaSliderClassNames.root, state.root.className);\n // eslint-disable-next-line react-hooks/immutability\n state.input.className = mergeClasses(alphaSliderClassNames.input, state.input.className);\n // eslint-disable-next-line react-hooks/immutability\n state.rail.className = mergeClasses(alphaSliderClassNames.rail, styles.rail, state.rail.className);\n\n // eslint-disable-next-line react-hooks/immutability\n state.thumb.className = mergeClasses(\n alphaSliderClassNames.thumb,\n thumbStyles.thumb,\n state.vertical ? thumbStyles.vertical : thumbStyles.horizontal,\n state.thumb.className,\n );\n\n // eslint-disable-next-line react-hooks/immutability\n state.thumb.className = mergeClasses(\n alphaSliderClassNames.thumb,\n thumbStyles.thumb,\n state.vertical ? thumbStyles.vertical : thumbStyles.horizontal,\n state.thumb.className,\n );\n\n useColorSliderStyles_unstable(state);\n return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","useColorSliderStyles_unstable","TRANSPARENT_IMAGE_URL","alphaSliderClassNames","root","rail","thumb","input","alphaSliderCSSVars","sliderDirectionVar","sliderProgressVar","thumbColorVar","railColorVar","useStyles","border","colorNeutralStroke1","backgroundImage","useThumbStyles","backgroundColor","colorNeutralBackground1","horizontal","transform","left","vertical","bottom","useAlphaSliderStyles_unstable","state","styles","thumbStyles","className"],"mappings":"AAAA;;;;;;;;;;;;sBAiBaU;;;yBAPAL;;;iCA+CAsB;;;;uBAvD4B,iBAAiB;4BACnC,wBAAwB;4CAED,6CAA6C;AAG3F,MAAMvB,wBAAwB;AAEvB,MAAMC,wBAA0D;IACrEC,MAAM;IACNC,MAAM;IACNC,OAAO;IACPC,OAAO;AACT,EAAE;AAEK,MAAMC,qBAAqB;IAChCC,oBAAoB,CAAC,4BAA4B,CAAC;IAClDC,mBAAmB,CAAC,2BAA2B,CAAC;IAChDC,eAAe,CAAC,+BAA+B,CAAC;IAChDC,cAAc,CAAC,8BAA8B,CAAC;AAChD,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYf,iBAAAA,EAAW;IAC3BO,MAAM;QACJS,QAAQ,CAAC,UAAU,EAAEd,kBAAAA,CAAOe,mBAAmB,EAAE;QACjDC,iBAAiB,CAAC,oBAAoB,EAAER,mBAAmBC,kBAAkB,CAAC,oBAAoB,EAAED,mBAAmBI,YAAY,CAAC,QAAQ,EAAEV,sBAAsB,CAAC,CAAC;IACxK;AACF;AAEA;;CAEC,GACD,MAAMe,qBAAiBnB,iBAAAA,EAAW;IAChCQ,OAAO;QACLY,iBAAiBlB,kBAAAA,CAAOmB,uBAAuB;QAC/C,YAAY;YACVD,iBAAiB,CAAC,IAAI,EAAEV,mBAAmBG,aAAa,CAAC,CAAC,CAAC;QAC7D;IACF;IACAS,YAAY;QACVC,WAAW;QACXC,MAAM,CAAC,IAAI,EAAEd,mBAAmBE,iBAAiB,CAAC,CAAC,CAAC;IACtD;IACAa,UAAU;QACRF,WAAW;QACXG,QAAQ,CAAC,IAAI,EAAEhB,mBAAmBE,iBAAiB,CAAC,CAAC,CAAC;IACxD;AACF;AAKO,MAAMe,gCAAgC,CAACC;IAC5C,MAAMC,SAASd;IACf,MAAMe,cAAcX;IACpB,oDAAoD;IACpDS,MAAMtB,IAAI,CAACyB,SAAS,OAAG9B,mBAAAA,EAAaI,sBAAsBC,IAAI,EAAEsB,MAAMtB,IAAI,CAACyB,SAAS;IACpF,oDAAoD;IACpDH,MAAMnB,KAAK,CAACsB,SAAS,OAAG9B,mBAAAA,EAAaI,sBAAsBI,KAAK,EAAEmB,MAAMnB,KAAK,CAACsB,SAAS;IACvF,oDAAoD;IACpDH,MAAMrB,IAAI,CAACwB,SAAS,OAAG9B,mBAAAA,EAAaI,sBAAsBE,IAAI,EAAEsB,OAAOtB,IAAI,EAAEqB,MAAMrB,IAAI,CAACwB,SAAS;IAEjG,oDAAoD;IACpDH,MAAMpB,KAAK,CAACuB,SAAS,OAAG9B,mBAAAA,EACtBI,sBAAsBG,KAAK,EAC3BsB,YAAYtB,KAAK,EACjBoB,MAAMH,QAAQ,GAAGK,YAAYL,QAAQ,GAAGK,YAAYR,UAAU,EAC9DM,MAAMpB,KAAK,CAACuB,SAAS;IAGvB,oDAAoD;IACpDH,MAAMpB,KAAK,CAACuB,SAAS,OAAG9B,mBAAAA,EACtBI,sBAAsBG,KAAK,EAC3BsB,YAAYtB,KAAK,EACjBoB,MAAMH,QAAQ,GAAGK,YAAYL,QAAQ,GAAGK,YAAYR,UAAU,EAC9DM,MAAMpB,KAAK,CAACuB,SAAS;QAGvB5B,yDAAAA,EAA8ByB;IAC9B,OAAOA;AACT,EAAE"}

package/lib-commonjs/components/ColorArea/useColorAreaStyles.styles.js CHANGED Viewed

@@ -365,14 +365,17 @@ const useShapeStyles = /*#__PURE__*/ (0, _react.__styles)({
     ]
 });
 const useColorAreaStyles_unstable = (state)=>{
-    'use no memo';
     const rootStyles = useRootStyles();
     const thumbStyles = useThumbStyles();
     const inputStyles = useInputStyles();
     const shapeStyles = useShapeStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(colorAreaClassNames.root, rootStyles, shapeStyles[state.shape || 'rounded'], state.root.className);
+    // eslint-disable-next-line react-hooks/immutability
     state.thumb.className = (0, _react.mergeClasses)(colorAreaClassNames.thumb, thumbStyles.thumb, thumbStyles.focusIndicator, state.thumb.className);
+    // eslint-disable-next-line react-hooks/immutability
     state.inputX.className = (0, _react.mergeClasses)(colorAreaClassNames.inputX, inputStyles.input, state.inputX.className);
+    // eslint-disable-next-line react-hooks/immutability
     state.inputY.className = (0, _react.mergeClasses)(colorAreaClassNames.inputY, inputStyles.input, state.inputY.className);
     return state;
 };

package/lib-commonjs/components/ColorArea/useColorAreaStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useColorAreaStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nexport const colorAreaClassNames = {\n root: 'fui-ColorArea',\n thumb: 'fui-ColorArea__thumb',\n inputX: 'fui-ColorArea__inputX',\n inputY: 'fui-ColorArea__inputY'\n};\nexport const colorAreaCSSVars = {\n areaXProgressVar: `--fui-AreaX--progress`,\n areaYProgressVar: `--fui-AreaY--progress`,\n thumbColorVar: `--fui-Area__thumb--color`,\n mainColorVar: `--fui-Area--main-color`\n};\n// Internal CSS variables\nconst thumbSizeVar = `--fui-Slider__thumb--size`;\n/*\n Styles for the root slot\n / const useRootStyles = makeResetStyles({\n position: 'relative',\n border: `1px solid ${tokens.colorNeutralStroke1}`,\n background: `linear-gradient(to bottom, transparent, #000), linear-gradient(to right, #fff, transparent), var(${colorAreaCSSVars.mainColorVar})`,\n forcedColorAdjust: 'none',\n display: 'inline-grid',\n touchAction: 'none',\n alignItems: 'start',\n justifyItems: 'start',\n [thumbSizeVar]: '20px',\n minWidth: '300px',\n minHeight: '300px',\n boxSizing: 'border-box',\n marginBottom: tokens.spacingVerticalSNudge\n});\n/\n Styles for the thumb slot\n / const useThumbStyles = makeStyles({\n thumb: {\n position: 'absolute',\n width: `var(${thumbSizeVar})`,\n height: `var(${thumbSizeVar})`,\n pointerEvents: 'none',\n outlineStyle: 'none',\n forcedColorAdjust: 'none',\n borderRadius: tokens.borderRadiusCircular,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralForeground4}`,\n boxShadow: tokens.shadow4,\n backgroundColor: `var(${colorAreaCSSVars.thumbColorVar})`,\n transform: 'translate(-50%, 50%)',\n left: `var(${colorAreaCSSVars.areaXProgressVar})`,\n bottom: `var(${colorAreaCSSVars.areaYProgressVar})`,\n '::before': {\n position: 'absolute',\n inset: '0px',\n borderRadius: tokens.borderRadiusCircular,\n boxSizing: 'border-box',\n content: \"''\",\n border: `${tokens.strokeWidthThick} solid ${tokens.colorNeutralBackground1}`\n }\n },\n focusIndicator: createFocusOutlineStyle({\n selector: 'focus-within',\n style: {\n outlineWidth: tokens.strokeWidthThick,\n ...shorthands.borderWidth(tokens.strokeWidthThick),\n outlineRadius: tokens.borderRadiusCircular\n }\n })\n});\n/\n Styles for the Input slot\n / const useInputStyles = makeStyles({\n input: {\n overflow: 'hidden',\n position: 'absolute',\n pointerEvents: 'none',\n top: 0,\n left: 0,\n opacity: 0,\n padding: '0',\n margin: '0',\n width: '100%',\n height: '100%'\n }\n});\nconst useShapeStyles = makeStyles({\n rounded: {\n borderRadius: tokens.borderRadiusMedium\n },\n square: {\n borderRadius: tokens.borderRadiusNone\n }\n});\n/\n Apply styling to the ColorArea slots based on the state\n */ export const useColorAreaStyles_unstable = (state)=>{\n 'use no memo';\n const rootStyles = useRootStyles();\n const thumbStyles = useThumbStyles();\n const inputStyles = useInputStyles();\n const shapeStyles = useShapeStyles();\n state.root.className = mergeClasses(colorAreaClassNames.root, rootStyles, shapeStyles[state.shape \|\| 'rounded'], state.root.className);\n state.thumb.className = mergeClasses(colorAreaClassNames.thumb, thumbStyles.thumb, thumbStyles.focusIndicator, state.thumb.className);\n state.inputX.className = mergeClasses(colorAreaClassNames.inputX, inputStyles.input, state.inputX.className);\n state.inputY.className = mergeClasses(colorAreaClassNames.inputY, inputStyles.input, state.inputY.className);\n return state;\n};\n"],"names":["__resetStyles","__styles","mergeClasses","shorthands","tokens","createFocusOutlineStyle","colorAreaClassNames","root","thumb","inputX","inputY","colorAreaCSSVars","areaXProgressVar","areaYProgressVar","thumbColorVar","mainColorVar","thumbSizeVar","useRootStyles","useThumbStyles","qhf8xq","a9b677","Bqenvij","Bkecrkj","oeaueh","Bvjb7m6","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","E5pizo","De3pzq","Bz10aip","oyh7mz","B5kzvoi","Brfgrao","lawp4y","Fbdkly","mdwyqc","Bciustq","gc50h5","r59vdv","Budzafs","ck0cow","n07z76","Gng75u","Bcvre1j","Ftih45","Bcgcnre","Bqjgrrk","qa3bma","y0oebl","Biqmznv","Bm6vgfq","Bbv0w2i","uvfttm","eqrjj","Bk5zm6e","m598lv","B4f6apu","ydt019","Bq4z7u6","Bdkvgpv","B0qfbqy","kj8mxx","focusIndicator","Brovlpu","B486eqv","Bssx7fj","uh7if5","clntm0","Dlk2r6","h6p2u","I6qiy5","yzno9d","By0wis0","B2j2mmj","wigs8","pbfy6t","B0v4ure","Byrf0fs","Bsiemmq","Bwckmig","skfxo0","Iidy0u","B98u21t","Bvwlmkc","jo1ztg","Ba1iezr","Blmvk6g","B24cy0v","Bil7v7r","Br3gin4","nr063g","ghq09","Bbgo44z","Bseh09z","az1dzo","Ba3ybja","B6352mv","vppk2z","Biaj6j7","B2pnrqr","B29w5g4","Bhhzhcn","Bec0n69","d","p","f","i","m","useInputStyles","input","B68tc82","Bmxbyg5","Bpg54ce","Bhzewxz","abs64n","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","useShapeStyles","rounded","square","useColorAreaStyles_unstable","state","rootStyles","thumbStyles","inputStyles","shapeStyles","className","shape"],"mappings":"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"}
1	+ {"version":3,"sources":["useColorAreaStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nexport const colorAreaClassNames = {\n root: 'fui-ColorArea',\n thumb: 'fui-ColorArea__thumb',\n inputX: 'fui-ColorArea__inputX',\n inputY: 'fui-ColorArea__inputY'\n};\nexport const colorAreaCSSVars = {\n areaXProgressVar: `--fui-AreaX--progress`,\n areaYProgressVar: `--fui-AreaY--progress`,\n thumbColorVar: `--fui-Area__thumb--color`,\n mainColorVar: `--fui-Area--main-color`\n};\n// Internal CSS variables\nconst thumbSizeVar = `--fui-Slider__thumb--size`;\n/*\n Styles for the root slot\n / const useRootStyles = makeResetStyles({\n position: 'relative',\n border: `1px solid ${tokens.colorNeutralStroke1}`,\n background: `linear-gradient(to bottom, transparent, #000), linear-gradient(to right, #fff, transparent), var(${colorAreaCSSVars.mainColorVar})`,\n forcedColorAdjust: 'none',\n display: 'inline-grid',\n touchAction: 'none',\n alignItems: 'start',\n justifyItems: 'start',\n [thumbSizeVar]: '20px',\n minWidth: '300px',\n minHeight: '300px',\n boxSizing: 'border-box',\n marginBottom: tokens.spacingVerticalSNudge\n});\n/\n Styles for the thumb slot\n / const useThumbStyles = makeStyles({\n thumb: {\n position: 'absolute',\n width: `var(${thumbSizeVar})`,\n height: `var(${thumbSizeVar})`,\n pointerEvents: 'none',\n outlineStyle: 'none',\n forcedColorAdjust: 'none',\n borderRadius: tokens.borderRadiusCircular,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralForeground4}`,\n boxShadow: tokens.shadow4,\n backgroundColor: `var(${colorAreaCSSVars.thumbColorVar})`,\n transform: 'translate(-50%, 50%)',\n left: `var(${colorAreaCSSVars.areaXProgressVar})`,\n bottom: `var(${colorAreaCSSVars.areaYProgressVar})`,\n '::before': {\n position: 'absolute',\n inset: '0px',\n borderRadius: tokens.borderRadiusCircular,\n boxSizing: 'border-box',\n content: \"''\",\n border: `${tokens.strokeWidthThick} solid ${tokens.colorNeutralBackground1}`\n }\n },\n focusIndicator: createFocusOutlineStyle({\n selector: 'focus-within',\n style: {\n outlineWidth: tokens.strokeWidthThick,\n ...shorthands.borderWidth(tokens.strokeWidthThick),\n outlineRadius: tokens.borderRadiusCircular\n }\n })\n});\n/\n Styles for the Input slot\n / const useInputStyles = makeStyles({\n input: {\n overflow: 'hidden',\n position: 'absolute',\n pointerEvents: 'none',\n top: 0,\n left: 0,\n opacity: 0,\n padding: '0',\n margin: '0',\n width: '100%',\n height: '100%'\n }\n});\nconst useShapeStyles = makeStyles({\n rounded: {\n borderRadius: tokens.borderRadiusMedium\n },\n square: {\n borderRadius: tokens.borderRadiusNone\n }\n});\n/\n Apply styling to the ColorArea slots based on the state\n */ export const useColorAreaStyles_unstable = (state)=>{\n const rootStyles = useRootStyles();\n const thumbStyles = useThumbStyles();\n const inputStyles = useInputStyles();\n const shapeStyles = useShapeStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(colorAreaClassNames.root, rootStyles, shapeStyles[state.shape \|\| 'rounded'], state.root.className);\n // eslint-disable-next-line react-hooks/immutability\n state.thumb.className = mergeClasses(colorAreaClassNames.thumb, thumbStyles.thumb, thumbStyles.focusIndicator, state.thumb.className);\n // eslint-disable-next-line react-hooks/immutability\n state.inputX.className = mergeClasses(colorAreaClassNames.inputX, inputStyles.input, state.inputX.className);\n // eslint-disable-next-line react-hooks/immutability\n state.inputY.className = mergeClasses(colorAreaClassNames.inputY, inputStyles.input, state.inputY.className);\n return state;\n};\n"],"names":["__resetStyles","__styles","mergeClasses","shorthands","tokens","createFocusOutlineStyle","colorAreaClassNames","root","thumb","inputX","inputY","colorAreaCSSVars","areaXProgressVar","areaYProgressVar","thumbColorVar","mainColorVar","thumbSizeVar","useRootStyles","useThumbStyles","qhf8xq","a9b677","Bqenvij","Bkecrkj","oeaueh","Bvjb7m6","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","E5pizo","De3pzq","Bz10aip","oyh7mz","B5kzvoi","Brfgrao","lawp4y","Fbdkly","mdwyqc","Bciustq","gc50h5","r59vdv","Budzafs","ck0cow","n07z76","Gng75u","Bcvre1j","Ftih45","Bcgcnre","Bqjgrrk","qa3bma","y0oebl","Biqmznv","Bm6vgfq","Bbv0w2i","uvfttm","eqrjj","Bk5zm6e","m598lv","B4f6apu","ydt019","Bq4z7u6","Bdkvgpv","B0qfbqy","kj8mxx","focusIndicator","Brovlpu","B486eqv","Bssx7fj","uh7if5","clntm0","Dlk2r6","h6p2u","I6qiy5","yzno9d","By0wis0","B2j2mmj","wigs8","pbfy6t","B0v4ure","Byrf0fs","Bsiemmq","Bwckmig","skfxo0","Iidy0u","B98u21t","Bvwlmkc","jo1ztg","Ba1iezr","Blmvk6g","B24cy0v","Bil7v7r","Br3gin4","nr063g","ghq09","Bbgo44z","Bseh09z","az1dzo","Ba3ybja","B6352mv","vppk2z","Biaj6j7","B2pnrqr","B29w5g4","Bhhzhcn","Bec0n69","d","p","f","i","m","useInputStyles","input","B68tc82","Bmxbyg5","Bpg54ce","Bhzewxz","abs64n","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","useShapeStyles","rounded","square","useColorAreaStyles_unstable","state","rootStyles","thumbStyles","inputStyles","shapeStyles","className","shape"],"mappings":"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"}

package/lib-commonjs/components/ColorArea/useColorAreaStyles.styles.raw.js CHANGED Viewed

@@ -114,14 +114,17 @@ const useShapeStyles = (0, _react.makeStyles)({
     }
 });
 const useColorAreaStyles_unstable = (state)=>{
-    'use no memo';
     const rootStyles = useRootStyles();
     const thumbStyles = useThumbStyles();
     const inputStyles = useInputStyles();
     const shapeStyles = useShapeStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(colorAreaClassNames.root, rootStyles, shapeStyles[state.shape || 'rounded'], state.root.className);
+    // eslint-disable-next-line react-hooks/immutability
     state.thumb.className = (0, _react.mergeClasses)(colorAreaClassNames.thumb, thumbStyles.thumb, thumbStyles.focusIndicator, state.thumb.className);
+    // eslint-disable-next-line react-hooks/immutability
     state.inputX.className = (0, _react.mergeClasses)(colorAreaClassNames.inputX, inputStyles.input, state.inputX.className);
+    // eslint-disable-next-line react-hooks/immutability
     state.inputY.className = (0, _react.mergeClasses)(colorAreaClassNames.inputY, inputStyles.input, state.inputY.className);
     return state;
 };

package/lib-commonjs/components/ColorArea/useColorAreaStyles.styles.raw.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/ColorArea/useColorAreaStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport type { ColorAreaSlots, ColorAreaState } from './ColorArea.types';\n\nexport const colorAreaClassNames: SlotClassNames<ColorAreaSlots> = {\n root: 'fui-ColorArea',\n thumb: 'fui-ColorArea__thumb',\n inputX: 'fui-ColorArea__inputX',\n inputY: 'fui-ColorArea__inputY',\n};\n\nexport const colorAreaCSSVars = {\n areaXProgressVar: `--fui-AreaX--progress`,\n areaYProgressVar: `--fui-AreaY--progress`,\n thumbColorVar: `--fui-Area__thumb--color`,\n mainColorVar: `--fui-Area--main-color`,\n};\n\n// Internal CSS variables\nconst thumbSizeVar = `--fui-Slider__thumb--size`;\n\n/*\n Styles for the root slot\n /\nconst useRootStyles = makeResetStyles({\n position: 'relative',\n border: `1px solid ${tokens.colorNeutralStroke1}`,\n background: `linear-gradient(to bottom, transparent, #000), linear-gradient(to right, #fff, transparent), var(${colorAreaCSSVars.mainColorVar})`,\n forcedColorAdjust: 'none',\n display: 'inline-grid',\n touchAction: 'none',\n alignItems: 'start',\n justifyItems: 'start',\n [thumbSizeVar]: '20px',\n minWidth: '300px',\n minHeight: '300px',\n boxSizing: 'border-box',\n marginBottom: tokens.spacingVerticalSNudge,\n});\n\n/\n Styles for the thumb slot\n /\nconst useThumbStyles = makeStyles({\n thumb: {\n position: 'absolute',\n width: `var(${thumbSizeVar})`,\n height: `var(${thumbSizeVar})`,\n pointerEvents: 'none',\n outlineStyle: 'none',\n forcedColorAdjust: 'none',\n borderRadius: tokens.borderRadiusCircular,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralForeground4}`,\n boxShadow: tokens.shadow4,\n backgroundColor: `var(${colorAreaCSSVars.thumbColorVar})`,\n transform: 'translate(-50%, 50%)',\n left: `var(${colorAreaCSSVars.areaXProgressVar})`,\n bottom: `var(${colorAreaCSSVars.areaYProgressVar})`,\n '::before': {\n position: 'absolute',\n inset: '0px',\n borderRadius: tokens.borderRadiusCircular,\n boxSizing: 'border-box',\n content: \"''\",\n border: `${tokens.strokeWidthThick} solid ${tokens.colorNeutralBackground1}`,\n },\n },\n focusIndicator: createFocusOutlineStyle({\n selector: 'focus-within',\n style: {\n outlineWidth: tokens.strokeWidthThick,\n ...shorthands.borderWidth(tokens.strokeWidthThick),\n outlineRadius: tokens.borderRadiusCircular,\n },\n }),\n});\n\n/\n Styles for the Input slot\n /\nconst useInputStyles = makeStyles({\n input: {\n overflow: 'hidden',\n position: 'absolute',\n pointerEvents: 'none',\n top: 0,\n left: 0,\n opacity: 0,\n padding: '0',\n margin: '0',\n width: '100%',\n height: '100%',\n },\n});\n\nconst useShapeStyles = makeStyles({\n rounded: {\n borderRadius: tokens.borderRadiusMedium,\n },\n square: {\n borderRadius: tokens.borderRadiusNone,\n },\n});\n\n/\n Apply styling to the ColorArea slots based on the state\n */\nexport const useColorAreaStyles_unstable = (state: ColorAreaState): ColorAreaState => {\n ~~'use no memo';\n\n~~ const rootStyles = useRootStyles();\n const thumbStyles = useThumbStyles();\n const inputStyles = useInputStyles();\n const shapeStyles = useShapeStyles();\n\n state.root.className = mergeClasses(\n colorAreaClassNames.root,\n rootStyles,\n shapeStyles[state.shape \|\| 'rounded'],\n state.root.className,\n );\n\n state.thumb.className = mergeClasses(\n colorAreaClassNames.thumb,\n thumbStyles.thumb,\n thumbStyles.focusIndicator,\n state.thumb.className,\n );\n\n state.inputX.className = mergeClasses(colorAreaClassNames.inputX, inputStyles.input, state.inputX.className);\n\n state.inputY.className = mergeClasses(colorAreaClassNames.inputY, inputStyles.input, state.inputY.className);\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","shorthands","tokens","createFocusOutlineStyle","colorAreaClassNames","root","thumb","inputX","inputY","colorAreaCSSVars","areaXProgressVar","areaYProgressVar","thumbColorVar","mainColorVar","thumbSizeVar","useRootStyles","position","border","colorNeutralStroke1","background","forcedColorAdjust","display","touchAction","alignItems","justifyItems","minWidth","minHeight","boxSizing","marginBottom","spacingVerticalSNudge","useThumbStyles","width","height","pointerEvents","outlineStyle","borderRadius","borderRadiusCircular","strokeWidthThin","colorNeutralForeground4","boxShadow","shadow4","backgroundColor","transform","left","bottom","inset","content","strokeWidthThick","colorNeutralBackground1","focusIndicator","selector","style","outlineWidth","borderWidth","outlineRadius","useInputStyles","input","overflow","top","opacity","padding","margin","useShapeStyles","rounded","borderRadiusMedium","square","borderRadiusNone","useColorAreaStyles_unstable","state","rootStyles","thumbStyles","inputStyles","shapeStyles","className","shape"],"mappings":"AAAA;;;;;;;;;;;;IAeaW,gBAAAA;;;IAPAL,mBAAAA;;;+BAuGA+D~~;;;;~~uBA7GyD,iBAAiB;4BAEhE,wBAAwB;8BACP,0BAA0B;AAG3D,4BAA4D;IACjE9D,MAAM;IACNC,OAAO;IACPC,QAAQ;IACRC,QAAQ;AACV,EAAE;AAEK,yBAAyB;IAC9BE,kBAAkB,CAAC,qBAAqB,CAAC;IACzCC,kBAAkB,CAAC,qBAAqB,CAAC;IACzCC,eAAe,CAAC,wBAAwB,CAAC;IACzCC,cAAc,CAAC,sBAAsB,CAAC;AACxC,EAAE;AAEF,yBAAyB;AACzB,MAAMC,eAAe,CAAC,yBAAyB,CAAC;AAEhD;;CAEC,GACD,MAAMC,oBAAgBjB,sBAAAA,EAAgB;IACpCkB,UAAU;IACVC,QAAQ,CAAC,UAAU,EAAEf,kBAAAA,CAAOgB,mBAAmB,EAAE;IACjDC,YAAY,CAAC,iGAAiG,EAAEV,iBAAiBI,YAAY,CAAC,CAAC,CAAC;IAChJO,mBAAmB;IACnBC,SAAS;IACTC,aAAa;IACbC,YAAY;IACZC,cAAc;IACd,CAACV,aAAa,EAAE;IAChBW,UAAU;IACVC,WAAW;IACXC,WAAW;IACXC,cAAc1B,kBAAAA,CAAO2B,qBAAqB;AAC5C;AAEA;;CAEC,GACD,MAAMC,qBAAiB/B,iBAAAA,EAAW;IAChCO,OAAO;QACLU,UAAU;QACVe,OAAO,CAAC,IAAI,EAAEjB,aAAa,CAAC,CAAC;QAC7BkB,QAAQ,CAAC,IAAI,EAAElB,aAAa,CAAC,CAAC;QAC9BmB,eAAe;QACfC,cAAc;QACdd,mBAAmB;QACnBe,cAAcjC,kBAAAA,CAAOkC,oBAAoB;QACzCnB,QAAQ,GAAGf,kBAAAA,CAAOmC,eAAe,CAAC,OAAO,EAAEnC,kBAAAA,CAAOoC,uBAAuB,EAAE;QAC3EC,WAAWrC,kBAAAA,CAAOsC,OAAO;QACzBC,iBAAiB,CAAC,IAAI,EAAEhC,iBAAiBG,aAAa,CAAC,CAAC,CAAC;QACzD8B,WAAW;QACXC,MAAM,CAAC,IAAI,EAAElC,iBAAiBC,gBAAgB,CAAC,CAAC,CAAC;QACjDkC,QAAQ,CAAC,IAAI,EAAEnC,iBAAiBE,gBAAgB,CAAC,CAAC,CAAC;QACnD,YAAY;YACVK,UAAU;YACV6B,OAAO;YACPV,cAAcjC,kBAAAA,CAAOkC,oBAAoB;YACzCT,WAAW;YACXmB,SAAS;YACT7B,QAAQ,GAAGf,kBAAAA,CAAO6C,gBAAgB,CAAC,OAAO,EAAE7C,kBAAAA,CAAO8C,uBAAuB,EAAE;QAC9E;IACF;IACAC,oBAAgB9C,qCAAAA,EAAwB;QACtC+C,UAAU;QACVC,OAAO;YACLC,cAAclD,kBAAAA,CAAO6C,gBAAgB;YACrC,GAAG9C,iBAAAA,CAAWoD,WAAW,CAACnD,kBAAAA,CAAO6C,gBAAgB,CAAC;YAClDO,eAAepD,kBAAAA,CAAOkC,oBAAoB;QAC5C;IACF;AACF;AAEA;;CAEC,GACD,MAAMmB,qBAAiBxD,iBAAAA,EAAW;IAChCyD,OAAO;QACLC,UAAU;QACVzC,UAAU;QACViB,eAAe;QACfyB,KAAK;QACLf,MAAM;QACNgB,SAAS;QACTC,SAAS;QACTC,QAAQ;QACR9B,OAAO;QACPC,QAAQ;IACV;AACF;AAEA,MAAM8B,qBAAiB/D,iBAAAA,EAAW;IAChCgE,SAAS;QACP5B,cAAcjC,kBAAAA,CAAO8D,kBAAkB;IACzC;IACAC,QAAQ;QACN9B,cAAcjC,kBAAAA,CAAOgE,gBAAgB;IACvC;AACF;AAKO,~~MAAMC~~,~~8BAA8B,CAACC~~;IAC1C~~;IAEA~~,MAAMC,aAAatD;IACnB,MAAMuD,cAAcxC;IACpB,MAAMyC,cAAchB;IACpB,MAAMiB,cAAcV;~~IAEpBM~~,MAAM/D,IAAI,CAACoE,SAAS,GAAGzE,uBAAAA,EACrBI,oBAAoBC,IAAI,EACxBgE,YACAG,WAAW,CAACJ,MAAMM,KAAK,IAAI,UAAU,EACrCN,MAAM/D,IAAI,CAACoE,SAAS;~~IAGtBL~~,MAAM9D,KAAK,CAACmE,SAAS,OAAGzE,mBAAAA,EACtBI,oBAAoBE,KAAK,EACzBgE,YAAYhE,KAAK,EACjBgE,YAAYrB,cAAc,EAC1BmB,MAAM9D,KAAK,CAACmE,SAAS;~~IAGvBL~~,MAAM7D,MAAM,CAACkE,SAAS,OAAGzE,mBAAAA,EAAaI,oBAAoBG,MAAM,EAAEgE,YAAYf,KAAK,EAAEY,MAAM7D,MAAM,CAACkE,SAAS;~~IAE3GL~~,MAAM5D,MAAM,CAACiE,SAAS,OAAGzE,mBAAAA,EAAaI,oBAAoBI,MAAM,EAAE+D,YAAYf,KAAK,EAAEY,MAAM5D,MAAM,CAACiE,SAAS;IAC3G,OAAOL;AACT,EAAE"}
1	+ {"version":3,"sources":["../src/components/ColorArea/useColorAreaStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport type { ColorAreaSlots, ColorAreaState } from './ColorArea.types';\n\nexport const colorAreaClassNames: SlotClassNames<ColorAreaSlots> = {\n root: 'fui-ColorArea',\n thumb: 'fui-ColorArea__thumb',\n inputX: 'fui-ColorArea__inputX',\n inputY: 'fui-ColorArea__inputY',\n};\n\nexport const colorAreaCSSVars = {\n areaXProgressVar: `--fui-AreaX--progress`,\n areaYProgressVar: `--fui-AreaY--progress`,\n thumbColorVar: `--fui-Area__thumb--color`,\n mainColorVar: `--fui-Area--main-color`,\n};\n\n// Internal CSS variables\nconst thumbSizeVar = `--fui-Slider__thumb--size`;\n\n/*\n Styles for the root slot\n /\nconst useRootStyles = makeResetStyles({\n position: 'relative',\n border: `1px solid ${tokens.colorNeutralStroke1}`,\n background: `linear-gradient(to bottom, transparent, #000), linear-gradient(to right, #fff, transparent), var(${colorAreaCSSVars.mainColorVar})`,\n forcedColorAdjust: 'none',\n display: 'inline-grid',\n touchAction: 'none',\n alignItems: 'start',\n justifyItems: 'start',\n [thumbSizeVar]: '20px',\n minWidth: '300px',\n minHeight: '300px',\n boxSizing: 'border-box',\n marginBottom: tokens.spacingVerticalSNudge,\n});\n\n/\n Styles for the thumb slot\n /\nconst useThumbStyles = makeStyles({\n thumb: {\n position: 'absolute',\n width: `var(${thumbSizeVar})`,\n height: `var(${thumbSizeVar})`,\n pointerEvents: 'none',\n outlineStyle: 'none',\n forcedColorAdjust: 'none',\n borderRadius: tokens.borderRadiusCircular,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralForeground4}`,\n boxShadow: tokens.shadow4,\n backgroundColor: `var(${colorAreaCSSVars.thumbColorVar})`,\n transform: 'translate(-50%, 50%)',\n left: `var(${colorAreaCSSVars.areaXProgressVar})`,\n bottom: `var(${colorAreaCSSVars.areaYProgressVar})`,\n '::before': {\n position: 'absolute',\n inset: '0px',\n borderRadius: tokens.borderRadiusCircular,\n boxSizing: 'border-box',\n content: \"''\",\n border: `${tokens.strokeWidthThick} solid ${tokens.colorNeutralBackground1}`,\n },\n },\n focusIndicator: createFocusOutlineStyle({\n selector: 'focus-within',\n style: {\n outlineWidth: tokens.strokeWidthThick,\n ...shorthands.borderWidth(tokens.strokeWidthThick),\n outlineRadius: tokens.borderRadiusCircular,\n },\n }),\n});\n\n/\n Styles for the Input slot\n /\nconst useInputStyles = makeStyles({\n input: {\n overflow: 'hidden',\n position: 'absolute',\n pointerEvents: 'none',\n top: 0,\n left: 0,\n opacity: 0,\n padding: '0',\n margin: '0',\n width: '100%',\n height: '100%',\n },\n});\n\nconst useShapeStyles = makeStyles({\n rounded: {\n borderRadius: tokens.borderRadiusMedium,\n },\n square: {\n borderRadius: tokens.borderRadiusNone,\n },\n});\n\n/\n Apply styling to the ColorArea slots based on the state\n */\nexport const useColorAreaStyles_unstable = (state: ColorAreaState): ColorAreaState => {\n const rootStyles = useRootStyles();\n const thumbStyles = useThumbStyles();\n const inputStyles = useInputStyles();\n const shapeStyles = useShapeStyles();\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n colorAreaClassNames.root,\n rootStyles,\n shapeStyles[state.shape \|\| 'rounded'],\n state.root.className,\n );\n\n // eslint-disable-next-line react-hooks/immutability\n state.thumb.className = mergeClasses(\n colorAreaClassNames.thumb,\n thumbStyles.thumb,\n thumbStyles.focusIndicator,\n state.thumb.className,\n );\n\n // eslint-disable-next-line react-hooks/immutability\n state.inputX.className = mergeClasses(colorAreaClassNames.inputX, inputStyles.input, state.inputX.className);\n\n // eslint-disable-next-line react-hooks/immutability\n state.inputY.className = mergeClasses(colorAreaClassNames.inputY, inputStyles.input, state.inputY.className);\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","shorthands","tokens","createFocusOutlineStyle","colorAreaClassNames","root","thumb","inputX","inputY","colorAreaCSSVars","areaXProgressVar","areaYProgressVar","thumbColorVar","mainColorVar","thumbSizeVar","useRootStyles","position","border","colorNeutralStroke1","background","forcedColorAdjust","display","touchAction","alignItems","justifyItems","minWidth","minHeight","boxSizing","marginBottom","spacingVerticalSNudge","useThumbStyles","width","height","pointerEvents","outlineStyle","borderRadius","borderRadiusCircular","strokeWidthThin","colorNeutralForeground4","boxShadow","shadow4","backgroundColor","transform","left","bottom","inset","content","strokeWidthThick","colorNeutralBackground1","focusIndicator","selector","style","outlineWidth","borderWidth","outlineRadius","useInputStyles","input","overflow","top","opacity","padding","margin","useShapeStyles","rounded","borderRadiusMedium","square","borderRadiusNone","useColorAreaStyles_unstable","state","rootStyles","thumbStyles","inputStyles","shapeStyles","className","shape"],"mappings":"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"}

package/lib-commonjs/components/ColorPicker/useColorPickerStyles.styles.js CHANGED Viewed

@@ -44,8 +44,8 @@ const colorPickerClassNames = {
     ]
 });
 const useColorPickerStyles_unstable = (state)=>{
-    'use no memo';
     const styles = useStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(colorPickerClassNames.root, styles.root, state.root.className);
     return state;
 };

package/lib-commonjs/components/ColorPicker/useColorPickerStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useColorPickerStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const colorPickerClassNames = {\n root: 'fui-ColorPicker'\n};\n/*\n Styles for the root slot\n / const useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'column',\n gap: tokens.spacingVerticalXS\n }\n});\n/\n Apply styling to the ColorPicker slots based on the state\n */ export const useColorPickerStyles_unstable = (state)=>{\n ~~'use no memo';\n~~ const styles = useStyles();\n state.root.className = mergeClasses(colorPickerClassNames.root, styles.root, state.root.className);\n return state;\n};\n"],"names":["__styles","mergeClasses","tokens","colorPickerClassNames","root","useStyles","mc9l5x","Beiy3e4","i8kkvl","Belr9w4","rmohyg","d","p","useColorPickerStyles_unstable","state","styles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAGCG,qBAAqB;;;iCAcY;eAA7BU;;;uBAhBwB,gBAAgB;AAElD,8BAA8B;IACjCT,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGL,eAAA,EAAA;IAAAI,IAAA,EAAA;QAAAE,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;KAAA;AAAA,CAMrB,CAAC;AAGS,uCAAuCE,KAAK,IAAG;IACtD,~~aAAa;IACb,~~MAAMC,MAAM,GAAGV,SAAS,CAAC,CAAC;~~IAC1BS~~,KAAK,CAACV,IAAI,CAACY,SAAS,OAAGf,mBAAY,EAACE,qBAAqB,CAACC,IAAI,EAAEW,MAAM,CAACX,IAAI,EAAEU,KAAK,CAACV,IAAI,CAACY,SAAS,CAAC;IAClG,OAAOF,KAAK;AAChB,CAAC"}
1	+ {"version":3,"sources":["useColorPickerStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const colorPickerClassNames = {\n root: 'fui-ColorPicker'\n};\n/*\n Styles for the root slot\n / const useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'column',\n gap: tokens.spacingVerticalXS\n }\n});\n/\n Apply styling to the ColorPicker slots based on the state\n */ export const useColorPickerStyles_unstable = (state)=>{\n const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(colorPickerClassNames.root, styles.root, state.root.className);\n return state;\n};\n"],"names":["__styles","mergeClasses","tokens","colorPickerClassNames","root","useStyles","mc9l5x","Beiy3e4","i8kkvl","Belr9w4","rmohyg","d","p","useColorPickerStyles_unstable","state","styles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAGCG,qBAAqB;;;iCAcY;eAA7BU;;;uBAhBwB,gBAAgB;AAElD,8BAA8B;IACjCT,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGL,eAAA,EAAA;IAAAI,IAAA,EAAA;QAAAE,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;KAAA;AAAA,CAMrB,CAAC;AAGS,uCAAuCE,KAAK,IAAG;IACtD,MAAMC,MAAM,GAAGV,SAAS,CAAC,CAAC;IAC1B,oDAAA;IACAS,KAAK,CAACV,IAAI,CAACY,SAAS,OAAGf,mBAAY,EAACE,qBAAqB,CAACC,IAAI,EAAEW,MAAM,CAACX,IAAI,EAAEU,KAAK,CAACV,IAAI,CAACY,SAAS,CAAC;IAClG,OAAOF,KAAK;AAChB,CAAC"}

package/lib-commonjs/components/ColorPicker/useColorPickerStyles.styles.raw.js CHANGED Viewed

@@ -32,8 +32,8 @@ const colorPickerClassNames = {
     }
 });
 const useColorPickerStyles_unstable = (state)=>{
-    'use no memo';
     const styles = useStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(colorPickerClassNames.root, styles.root, state.root.className);
     return state;
 };

package/lib-commonjs/components/ColorPicker/useColorPickerStyles.styles.raw.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/ColorPicker/useColorPickerStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { ColorPickerSlots, ColorPickerState } from './ColorPicker.types';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const colorPickerClassNames: SlotClassNames<ColorPickerSlots> = {\n root: 'fui-ColorPicker',\n};\n\n/*\n Styles for the root slot\n /\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'column',\n gap: tokens.spacingVerticalXS,\n },\n});\n\n/\n Apply styling to the ColorPicker slots based on the state\n */\nexport const useColorPickerStyles_unstable = (state: ColorPickerState): ColorPickerState => {\n ~~'use no memo';\n\n~~ const styles = useStyles();\n state.root.className = mergeClasses(colorPickerClassNames.root, styles.root, state.root.className);\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","colorPickerClassNames","root","useStyles","display","flexDirection","gap","spacingVerticalXS","useColorPickerStyles_unstable","state","styles","className"],"mappings":"AAAA;;;;;;;;;;;;IAOaG,qBAAAA;;;~~iCAkBAO~~;;;;uBAvB4B,iBAAiB;4BAGnC,wBAAwB;AAExC,8BAAgE;IACrEN,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYL,qBAAAA,EAAW;IAC3BI,MAAM;QACJE,SAAS;QACTC,eAAe;QACfC,KAAKN,kBAAAA,CAAOO,iBAAiB;IAC/B;AACF;AAKO,~~MAAMC~~,~~gCAAgC,CAACC~~;IAC5C~~;IAEA~~,MAAMC,SAASP;~~IACfM~~,MAAMP,IAAI,CAACS,SAAS,OAAGZ,mBAAAA,EAAaE,sBAAsBC,IAAI,EAAEQ,OAAOR,IAAI,EAAEO,MAAMP,IAAI,CAACS,SAAS;IAEjG,OAAOF;AACT,EAAE"}
1	+ {"version":3,"sources":["../src/components/ColorPicker/useColorPickerStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { ColorPickerSlots, ColorPickerState } from './ColorPicker.types';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const colorPickerClassNames: SlotClassNames<ColorPickerSlots> = {\n root: 'fui-ColorPicker',\n};\n\n/*\n Styles for the root slot\n /\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'column',\n gap: tokens.spacingVerticalXS,\n },\n});\n\n/\n Apply styling to the ColorPicker slots based on the state\n */\nexport const useColorPickerStyles_unstable = (state: ColorPickerState): ColorPickerState => {\n const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(colorPickerClassNames.root, styles.root, state.root.className);\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","colorPickerClassNames","root","useStyles","display","flexDirection","gap","spacingVerticalXS","useColorPickerStyles_unstable","state","styles","className"],"mappings":"AAAA;;;;;;;;;;;;IAOaG,qBAAAA;;;IAkBAO,6BAAAA;;;;uBAvB4B,iBAAiB;4BAGnC,wBAAwB;AAExC,8BAAgE;IACrEN,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYL,qBAAAA,EAAW;IAC3BI,MAAM;QACJE,SAAS;QACTC,eAAe;QACfC,KAAKN,kBAAAA,CAAOO,iBAAiB;IAC/B;AACF;AAKO,sCAAsC,CAACE;IAC5C,MAAMC,SAASP;IACf,oDAAoD;IACpDM,MAAMP,IAAI,CAACS,SAAS,OAAGZ,mBAAAA,EAAaE,sBAAsBC,IAAI,EAAEQ,OAAOR,IAAI,EAAEO,MAAMP,IAAI,CAACS,SAAS;IAEjG,OAAOF;AACT,EAAE"}

package/lib-commonjs/components/ColorSlider/useColorSlider.js CHANGED Viewed

@@ -19,7 +19,7 @@ const _getPercent = require("../../utils/getPercent");
 const _createHsvColor = require("../../utils/createHsvColor");
 const _adjustChannel = require("../../utils/adjustChannel");
 const useColorSlider_unstable = (props, ref)=>{
-    'use no memo';
+    'use no memo'; // justified: compiler would optimize useColorSlider_unstable — manual opt-out to preserve runtime behavior
     const { dir } = (0, _reactsharedcontexts.useFluent_unstable)();
     const onChangeFromContext = (0, _colorPicker.useColorPickerContextValue_unstable)((ctx)=>ctx.requestChange);
     const colorFromContext = (0, _colorPicker.useColorPickerContextValue_unstable)((ctx)=>ctx.color);

package/lib-commonjs/components/ColorSlider/useColorSlider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/ColorSlider/useColorSlider.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { tinycolor } from '@ctrl/tinycolor';\nimport {\n getPartitionedNativeProps,\n useId,\n slot,\n useControllableState,\n useEventCallback,\n} from '@fluentui/react-utilities';\nimport { colorSliderCSSVars } from './useColorSliderStyles.styles';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport type { ColorSliderProps, ColorSliderState } from './ColorSlider.types';\nimport { useColorPickerContextValue_unstable } from '../../contexts/colorPicker';\nimport { MIN, HUE_MAX, MAX as COLOR_MAX } from '../../utils/constants';\nimport { getPercent } from '../../utils/getPercent';\nimport { createHsvColor } from '../../utils/createHsvColor';\nimport { clampValue, type ChannelActions, adjustChannel } from '../../utils/adjustChannel';\nimport type { HsvColor } from '../../types/color';\nimport { INITIAL_COLOR_HSV } from '../../utils/constants';\n\n/*\n Create the state required to render ColorSlider.\n \n The returned state can be modified with hooks such as useColorSliderStyles_unstable,\n * before being passed to renderColorSlider_unstable.\n \n @param props - props from this instance of ColorSlider\n * @param ref - reference to root HTMLInputElement of ColorSlider\n /\nexport const useColorSlider_unstable = (\n props: ColorSliderProps,\n ref: React.Ref<HTMLInputElement>,\n): ColorSliderState => {\n 'use no memo';\n\n const { dir } = useFluent();\n const onChangeFromContext = useColorPickerContextValue_unstable(ctx => ctx.requestChange);\n const colorFromContext = useColorPickerContextValue_unstable(ctx => ctx.color);\n const shapeFromContext = useColorPickerContextValue_unstable(ctx => ctx.shape);\n const nativeProps = getPartitionedNativeProps({\n props,\n primarySlotTagName: 'input',\n excludedPropNames: ['onChange', 'color'],\n });\n\n const {\n color,\n channel = 'hue',\n onChange = onChangeFromContext,\n shape = shapeFromContext,\n vertical,\n // Slots\n root,\n input,\n rail,\n thumb,\n } = props;\n\n const hsvColor = color \|\| colorFromContext;\n const hslColor = tinycolor(hsvColor).toHsl();\n\n const [currentColor, setCurrentColor] = useControllableState<HsvColor>({\n defaultState: props.defaultColor,\n state: hsvColor,\n initialState: INITIAL_COLOR_HSV,\n });\n\n const MAX = channel === 'hue' ? HUE_MAX : COLOR_MAX;\n\n const valueChannelActions: ChannelActions<number> = {\n hue: clampValue(currentColor.h),\n saturation: clampValue(currentColor.s 100),\n value: clampValue(currentColor.v * 100),\n };\n\n const clampedValue = adjustChannel(channel, valueChannelActions);\n const valuePercent = getPercent(clampedValue, MIN, MAX);\n\n const inputOnChange = input?.onChange;\n\n const _onChange: React.ChangeEventHandler<HTMLInputElement> = useEventCallback(event => {\n const newValue = Number(event.target.value);\n const colorActions: ChannelActions<() => HsvColor> = {\n hue: () => createHsvColor({ ...hsvColor, h: newValue }),\n saturation: () => createHsvColor({ ...hsvColor, s: newValue / 100 }),\n value: () => createHsvColor({ ...hsvColor, v: newValue / 100 }),\n };\n const newColor = adjustChannel(channel, colorActions)();\n\n setCurrentColor(newColor);\n\n inputOnChange?.(event);\n onChange?.(event, {\n type: 'change',\n event,\n color: newColor,\n });\n });\n\n const rootVariables = {\n [colorSliderCSSVars.sliderDirectionVar]: vertical ? '180deg' : dir === 'ltr' ? '-90deg' : '90deg',\n [colorSliderCSSVars.sliderProgressVar]: `${valuePercent}%`,\n [colorSliderCSSVars.thumbColorVar]:\n channel === 'hue' ? `hsl(${clampedValue}, 100%, 50%)` : tinycolor(hsvColor).toRgbString(),\n [colorSliderCSSVars.railColorVar]:\n channel === 'hue'\n ? `hsl(${hslColor.h} ${hslColor.s * 100}%, ${hslColor.l * 100}%)`\n : `hsl(${hslColor.h} 100%, 50%)`,\n };\n\n const state: ColorSliderState = {\n shape,\n vertical,\n channel,\n components: {\n input: 'input',\n rail: 'div',\n root: 'div',\n thumb: 'div',\n },\n root: slot.always(root, {\n defaultProps: {\n role: 'group',\n ...nativeProps.root,\n },\n elementType: 'div',\n }),\n input: slot.always(input, {\n defaultProps: {\n id: useId('slider-', props.id),\n ref,\n min: MIN,\n max: MAX,\n tabIndex: 0,\n ['aria-orientation']: vertical ? 'vertical' : 'horizontal',\n ...nativeProps.primary,\n type: 'range',\n },\n elementType: 'input',\n }),\n rail: slot.always(rail, { elementType: 'div' }),\n thumb: slot.always(thumb, { elementType: 'div' }),\n };\n\n // Root props\n state.root.style = {\n ...rootVariables,\n ...state.root.style,\n };\n\n // Input Props\n state.input.value = clampedValue;\n state.input.onChange = _onChange;\n return state;\n};\n"],"names":["tinycolor","getPartitionedNativeProps","useId","slot","useControllableState","useEventCallback","colorSliderCSSVars","useFluent_unstable","useFluent","useColorPickerContextValue_unstable","MIN","HUE_MAX","MAX","COLOR_MAX","getPercent","createHsvColor","clampValue","adjustChannel","INITIAL_COLOR_HSV","useColorSlider_unstable","props","ref","dir","onChangeFromContext","ctx","requestChange","colorFromContext","color","shapeFromContext","shape","nativeProps","primarySlotTagName","excludedPropNames","channel","onChange","vertical","root","input","rail","thumb","hsvColor","hslColor","toHsl","currentColor","setCurrentColor","defaultState","defaultColor","state","initialState","valueChannelActions","hue","h","saturation","s","value","v","clampedValue","valuePercent","inputOnChange","_onChange","event","newValue","Number","target","colorActions","newColor","type","rootVariables","sliderDirectionVar","sliderProgressVar","thumbColorVar","toRgbString","railColorVar","l","components","always","defaultProps","role","elementType","id","min","max","tabIndex","primary","style"],"mappings":"AAAA;;;;;+BA+BamB;;;;;;2BA5Ba,kBAAkB;gCAOrC,4BAA4B;4CACA,gCAAgC;qCACnB,kCAAkC;6BAE9B,6BAA6B;2BAClC,wBAAwB;4BAC5C,yBAAyB;gCACrB,6BAA6B;+BACG,4BAA4B;AAapF,gCAAgC,CACrCC,OACAC;IAEA;~~IAEA~~,MAAM,EAAEC,GAAG,EAAE,~~GAAGd~~,~~2CAAAA~~;IAChB,MAAMe,0BAAsBd,gDAAAA,EAAoCe,CAAAA,MAAOA,IAAIC,aAAa;IACxF,MAAMC,uBAAmBjB,gDAAAA,EAAoCe,CAAAA,MAAOA,IAAIG,KAAK;IAC7E,MAAMC,~~uBAAmBnB~~,~~gDAAAA~~,EAAoCe,CAAAA,MAAOA,IAAIK,KAAK;IAC7E,MAAMC,kBAAc7B,yCAAAA,EAA0B;QAC5CmB;QACAW,oBAAoB;QACpBC,mBAAmB;YAAC;YAAY;SAAQ;IAC1C;IAEA,MAAM,EACJL,KAAK,EACLM,UAAU,KAAK,EACfC,WAAWX,mBAAmB,EAC9BM,QAAQD,gBAAgB,EACxBO,QAAQ,EAERC,AADA,IACI,EACJC,EAFQ,GAEH,EACLC,IAAI,EACJC,KAAK,EACN,GAAGnB;IAEJ,MAAMoB,WAAWb,SAASD;IAC1B,MAAMe,eAAWzC,oBAAAA,EAAUwC,UAAUE,KAAK;IAE1C,MAAM,CAACC,cAAcC,gBAAgB,OAAGxC,oCAAAA,EAA+B;QACrEyC,cAAczB,MAAM0B,YAAY;QAChCC,OAAOP;QACPQ,cAAc9B,4BAAAA;IAChB;IAEA,MAAMN,MAAMqB,YAAY,QAAQtB,kBAAAA,GAAUE,cAAAA;IAE1C,MAAMoC,sBAA8C;QAClDC,SAAKlC,yBAAAA,EAAW2B,aAAaQ,CAAC;QAC9BC,gBAAYpC,yBAAAA,EAAW2B,aAAaU,CAAC,GAAG;QACxCC,OAAOtC,6BAAAA,EAAW2B,aAAaY,CAAC,GAAG;IACrC;IAEA,MAAMC,mBAAevC,4BAAAA,EAAcgB,SAASgB;IAC5C,MAAMQ,mBAAe3C,sBAAAA,EAAW0C,cAAc9C,cAAAA,EAAKE;IAEnD,MAAM8C,gBAAgBrB,UAAAA,QAAAA,UAAAA,KAAAA,IAAAA,KAAAA,IAAAA,MAAOH,QAAQ;IAErC,MAAMyB,~~gBAAwDtD~~,~~gCAAAA~~,EAAiBuD,CAAAA;QAC7E,MAAMC,WAAWC,OAAOF,MAAMG,MAAM,CAACT,KAAK;QAC1C,MAAMU,eAA+C;YACnDd,KAAK,QAAMnC,8BAAAA,EAAe;oBAAE,GAAGyB,QAAQ;oBAAEW,GAAGU;gBAAS;YACrDT,YAAY,QAAMrC,8BAAAA,EAAe;oBAAE,GAAGyB,QAAQ;oBAAEa,GAAGQ,WAAW;gBAAI;YAClEP,OAAO,QAAMvC,8BAAAA,EAAe;oBAAE,GAAGyB,QAAQ;oBAAEe,GAAGM,WAAW;gBAAI;QAC/D;QACA,MAAMI,eAAWhD,4BAAAA,EAAcgB,SAAS+B;QAExCpB,gBAAgBqB;QAEhBP,kBAAAA,QAAAA,kBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,cAAgBE;QAChB1B,aAAAA,QAAAA,aAAAA,KAAAA,IAAAA,KAAAA,IAAAA,SAAW0B,OAAO;YAChBM,MAAM;YACNN;YACAjC,OAAOsC;QACT;IACF;IAEA,MAAME,gBAAgB;QACpB,CAAC7D,8CAAAA,CAAmB8D,kBAAkB,CAAC,EAAEjC,WAAW,WAAWb,QAAQ,QAAQ,WAAW;QAC1F,CAAChB,8CAAAA,CAAmB+D,iBAAiB,CAAC,EAAE,GAAGZ,aAAa,CAAC,CAAC;QAC1D,CAACnD,8CAAAA,CAAmBgE,aAAa,CAAC,EAChCrC,YAAY,QAAQ,CAAC,IAAI,EAAEuB,aAAa,YAAY,CAAC,OAAGxD,oBAAAA,EAAUwC,UAAU+B,WAAW;QACzF,CAACjE,8CAAAA,CAAmBkE,YAAY,CAAC,EAC/BvC,YAAY,QACR,CAAC,IAAI,EAAEQ,SAASU,CAAC,CAAC,CAAC,EAAEV,SAASY,CAAC,GAAG,IAAI,GAAG,EAAEZ,SAASgC,CAAC,GAAG,IAAI,EAAE,CAAC,GAC/D,CAAC,IAAI,EAAEhC,SAASU,CAAC,CAAC,WAAW,CAAC;IACtC;IAEA,MAAMJ,QAA0B;QAC9BlB;QACAM;QACAF;QACAyC,YAAY;YACVrC,OAAO;YACPC,MAAM;YACNF,MAAM;YACNG,OAAO;QACT;QACAH,MAAMjC,oBAAAA,CAAKwE,MAAM,CAACvC,MAAM;YACtBwC,cAAc;gBACZC,MAAM;gBACN,GAAG/C,YAAYM,IAAI;YACrB;YACA0C,aAAa;QACf;QACAzC,OAAOlC,oBAAAA,CAAKwE,MAAM,CAACtC,OAAO;YACxBuC,cAAc;gBACZG,QAAI7E,qBAAAA,EAAM,WAAWkB,MAAM2D,EAAE;gBAC7B1D;gBACA2D,KAAKtE,cAAAA;gBACLuE,KAAKrE;gBACLsE,UAAU;gBACV,CAAC,mBAAmB,EAAE/C,WAAW,aAAa;gBAC9C,GAAGL,YAAYqD,OAAO;gBACtBjB,MAAM;YACR;YACAY,aAAa;QACf;QACAxC,MAAMnC,oBAAAA,CAAKwE,MAAM,CAACrC,MAAM;YAAEwC,aAAa;QAAM;QAC7CvC,OAAOpC,oBAAAA,CAAKwE,MAAM,CAACpC,OAAO;YAAEuC,aAAa;QAAM;IACjD;IAEA,aAAa;IACb/B,MAAMX,IAAI,CAACgD,KAAK,GAAG;QACjB,GAAGjB,aAAa;QAChB,GAAGpB,MAAMX,IAAI,CAACgD,KAAK;IACrB;IAEA,cAAc;IACdrC,MAAMV,KAAK,CAACiB,KAAK,GAAGE;IACpBT,MAAMV,KAAK,CAACH,QAAQ,GAAGyB;IACvB,OAAOZ;AACT,EAAE"}
1	+ {"version":3,"sources":["../src/components/ColorSlider/useColorSlider.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { tinycolor } from '@ctrl/tinycolor';\nimport {\n getPartitionedNativeProps,\n useId,\n slot,\n useControllableState,\n useEventCallback,\n} from '@fluentui/react-utilities';\nimport { colorSliderCSSVars } from './useColorSliderStyles.styles';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport type { ColorSliderProps, ColorSliderState } from './ColorSlider.types';\nimport { useColorPickerContextValue_unstable } from '../../contexts/colorPicker';\nimport { MIN, HUE_MAX, MAX as COLOR_MAX } from '../../utils/constants';\nimport { getPercent } from '../../utils/getPercent';\nimport { createHsvColor } from '../../utils/createHsvColor';\nimport { clampValue, type ChannelActions, adjustChannel } from '../../utils/adjustChannel';\nimport type { HsvColor } from '../../types/color';\nimport { INITIAL_COLOR_HSV } from '../../utils/constants';\n\n/*\n Create the state required to render ColorSlider.\n \n The returned state can be modified with hooks such as useColorSliderStyles_unstable,\n * before being passed to renderColorSlider_unstable.\n \n @param props - props from this instance of ColorSlider\n * @param ref - reference to root HTMLInputElement of ColorSlider\n /\nexport const useColorSlider_unstable = (\n props: ColorSliderProps,\n ref: React.Ref<HTMLInputElement>,\n): ColorSliderState => {\n 'use no memo'; // justified: compiler would optimize useColorSlider_unstable — manual opt-out to preserve runtime behavior\n\n const { dir } = useFluent();\n const onChangeFromContext = useColorPickerContextValue_unstable(ctx => ctx.requestChange);\n const colorFromContext = useColorPickerContextValue_unstable(ctx => ctx.color);\n const shapeFromContext = useColorPickerContextValue_unstable(ctx => ctx.shape);\n const nativeProps = getPartitionedNativeProps({\n props,\n primarySlotTagName: 'input',\n excludedPropNames: ['onChange', 'color'],\n });\n\n const {\n color,\n channel = 'hue',\n onChange = onChangeFromContext,\n shape = shapeFromContext,\n vertical,\n // Slots\n root,\n input,\n rail,\n thumb,\n } = props;\n\n const hsvColor = color \|\| colorFromContext;\n const hslColor = tinycolor(hsvColor).toHsl();\n\n const [currentColor, setCurrentColor] = useControllableState<HsvColor>({\n defaultState: props.defaultColor,\n state: hsvColor,\n initialState: INITIAL_COLOR_HSV,\n });\n\n const MAX = channel === 'hue' ? HUE_MAX : COLOR_MAX;\n\n const valueChannelActions: ChannelActions<number> = {\n hue: clampValue(currentColor.h),\n saturation: clampValue(currentColor.s 100),\n value: clampValue(currentColor.v * 100),\n };\n\n const clampedValue = adjustChannel(channel, valueChannelActions);\n const valuePercent = getPercent(clampedValue, MIN, MAX);\n\n const inputOnChange = input?.onChange;\n\n const _onChange: React.ChangeEventHandler<HTMLInputElement> = useEventCallback(event => {\n const newValue = Number(event.target.value);\n const colorActions: ChannelActions<() => HsvColor> = {\n hue: () => createHsvColor({ ...hsvColor, h: newValue }),\n saturation: () => createHsvColor({ ...hsvColor, s: newValue / 100 }),\n value: () => createHsvColor({ ...hsvColor, v: newValue / 100 }),\n };\n const newColor = adjustChannel(channel, colorActions)();\n\n setCurrentColor(newColor);\n\n inputOnChange?.(event);\n onChange?.(event, {\n type: 'change',\n event,\n color: newColor,\n });\n });\n\n const rootVariables = {\n [colorSliderCSSVars.sliderDirectionVar]: vertical ? '180deg' : dir === 'ltr' ? '-90deg' : '90deg',\n [colorSliderCSSVars.sliderProgressVar]: `${valuePercent}%`,\n [colorSliderCSSVars.thumbColorVar]:\n channel === 'hue' ? `hsl(${clampedValue}, 100%, 50%)` : tinycolor(hsvColor).toRgbString(),\n [colorSliderCSSVars.railColorVar]:\n channel === 'hue'\n ? `hsl(${hslColor.h} ${hslColor.s * 100}%, ${hslColor.l * 100}%)`\n : `hsl(${hslColor.h} 100%, 50%)`,\n };\n\n const state: ColorSliderState = {\n shape,\n vertical,\n channel,\n components: {\n input: 'input',\n rail: 'div',\n root: 'div',\n thumb: 'div',\n },\n root: slot.always(root, {\n defaultProps: {\n role: 'group',\n ...nativeProps.root,\n },\n elementType: 'div',\n }),\n input: slot.always(input, {\n defaultProps: {\n id: useId('slider-', props.id),\n ref,\n min: MIN,\n max: MAX,\n tabIndex: 0,\n ['aria-orientation']: vertical ? 'vertical' : 'horizontal',\n ...nativeProps.primary,\n type: 'range',\n },\n elementType: 'input',\n }),\n rail: slot.always(rail, { elementType: 'div' }),\n thumb: slot.always(thumb, { elementType: 'div' }),\n };\n\n // Root props\n state.root.style = {\n ...rootVariables,\n ...state.root.style,\n };\n\n // Input Props\n state.input.value = clampedValue;\n state.input.onChange = _onChange;\n return state;\n};\n"],"names":["tinycolor","getPartitionedNativeProps","useId","slot","useControllableState","useEventCallback","colorSliderCSSVars","useFluent_unstable","useFluent","useColorPickerContextValue_unstable","MIN","HUE_MAX","MAX","COLOR_MAX","getPercent","createHsvColor","clampValue","adjustChannel","INITIAL_COLOR_HSV","useColorSlider_unstable","props","ref","dir","onChangeFromContext","ctx","requestChange","colorFromContext","color","shapeFromContext","shape","nativeProps","primarySlotTagName","excludedPropNames","channel","onChange","vertical","root","input","rail","thumb","hsvColor","hslColor","toHsl","currentColor","setCurrentColor","defaultState","defaultColor","state","initialState","valueChannelActions","hue","h","saturation","s","value","v","clampedValue","valuePercent","inputOnChange","_onChange","event","newValue","Number","target","colorActions","newColor","type","rootVariables","sliderDirectionVar","sliderProgressVar","thumbColorVar","toRgbString","railColorVar","l","components","always","defaultProps","role","elementType","id","min","max","tabIndex","primary","style"],"mappings":"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"}

package/lib-commonjs/components/ColorSlider/useColorSliderStyles.styles.js CHANGED Viewed

@@ -438,7 +438,6 @@ const useShapeStyles = /*#__PURE__*/ (0, _react.__styles)({
     ]
 });
 const useColorSliderStyles_unstable = (state)=>{
-    'use no memo';
     const rootStyles = useRootStyles();
     const styles = useStyles();
     const railStyles = useRailStyles();
@@ -447,9 +446,13 @@ const useColorSliderStyles_unstable = (state)=>{
     const shapeStyles = useShapeStyles();
     const channelStyles = useChannelStyles();
     const isVertical = state.vertical;
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(colorSliderClassNames.root, rootStyles, isVertical ? styles.vertical : styles.horizontal, state.root.className);
+    // eslint-disable-next-line react-hooks/immutability
     state.rail.className = (0, _react.mergeClasses)(colorSliderClassNames.rail, railStyles.rail, channelStyles[state.channel || 'hue'], shapeStyles[state.shape || 'rounded'], isVertical ? railStyles.vertical : railStyles.horizontal, state.rail.className);
+    // eslint-disable-next-line react-hooks/immutability
     state.thumb.className = (0, _react.mergeClasses)(colorSliderClassNames.thumb, thumbStyles.thumb, isVertical ? thumbStyles.vertical : thumbStyles.horizontal, state.thumb.className);
+    // eslint-disable-next-line react-hooks/immutability
     state.input.className = (0, _react.mergeClasses)(colorSliderClassNames.input, inputStyles.input, isVertical ? inputStyles.vertical : inputStyles.horizontal, state.input.className);
     return state;
 };