npm - @mantine/core - Versions diffs - 4.2.9 → 5.0.0-alpha.10 - Mend

@mantine/core 4.2.9 → 5.0.0-alpha.10

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 (1737) hide show

package/esm/components/ColorInput/ColorInput.js CHANGED Viewed

@@ -1,15 +1,13 @@
 import React, { forwardRef, useState, useEffect } from 'react';
-import { useUuid, useUncontrolled, useDidUpdate } from '@mantine/hooks';
-import { getDefaultZIndex, useMantineDefaultProps, extractSystemStyles } from '@mantine/styles';
+import { useUncontrolled, useDidUpdate } from '@mantine/hooks';
+import { getDefaultZIndex, useMantineTheme } from '@mantine/styles';
 import { ColorPicker } from '../ColorPicker/ColorPicker.js';
-import useStyles from './ColorInput.styles.js';
+import { useInputProps } from '../Input/use-input-props.js';
 import { isColorValid, parseColor } from '../ColorPicker/converters/parsers.js';
 import { convertHsvaTo } from '../ColorPicker/converters/converters.js';
-import { InputWrapper } from '../InputWrapper/InputWrapper.js';
 import { Input } from '../Input/Input.js';
+import { Popover } from '../Popover/Popover.js';
 import { ColorSwatch } from '../ColorSwatch/ColorSwatch.js';
-import { Popper } from '../Popper/Popper.js';
-import { Paper } from '../Paper/Paper.js';
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -49,13 +47,6 @@ const SWATCH_SIZES = {
   lg: 28,
   xl: 36
 };
-const ARROW_OFFSET = {
-  xs: 12,
-  sm: 15,
-  md: 17,
-  lg: 21,
-  xl: 25
-};
 const defaultProps = {
   size: "sm",
   format: "hex",
@@ -66,24 +57,19 @@ const defaultProps = {
   transition: "pop-top-left",
   dropdownZIndex: getDefaultZIndex("popover"),
   transitionDuration: 0,
-  withinPortal: true
+  withinPortal: true,
+  shadow: "md"
 };
 const ColorInput = forwardRef((props, ref) => {
-  const _a = useMantineDefaultProps("ColorInput", defaultProps, props), {
-    label,
-    description,
-    error,
-    required,
+  const _a = useInputProps("ColorInput", defaultProps, props), {
     wrapperProps,
-    size,
+    inputProps,
     format,
     onChange,
     onFocus,
     onBlur,
     value,
     defaultValue,
-    classNames,
-    styles,
     disallowInput,
     fixOnBlur,
     withPreview,
@@ -91,33 +77,24 @@ const ColorInput = forwardRef((props, ref) => {
     withPicker,
     icon,
     transition,
-    id,
     dropdownZIndex,
     transitionDuration,
     transitionTimingFunction,
     withinPortal,
-    className,
-    style,
     swatches,
-    sx,
-    errorProps,
-    labelProps,
-    descriptionProps
+    shadow,
+    classNames,
+    styles,
+    unstyled
   } = _a, others = __objRest(_a, [
-    "label",
-    "description",
-    "error",
-    "required",
     "wrapperProps",
-    "size",
+    "inputProps",
     "format",
     "onChange",
     "onFocus",
     "onBlur",
     "value",
     "defaultValue",
-    "classNames",
-    "styles",
     "disallowInput",
     "fixOnBlur",
     "withPreview",
@@ -125,30 +102,23 @@ const ColorInput = forwardRef((props, ref) => {
     "withPicker",
     "icon",
     "transition",
-    "id",
     "dropdownZIndex",
     "transitionDuration",
     "transitionTimingFunction",
     "withinPortal",
-    "className",
-    "style",
     "swatches",
-    "sx",
-    "errorProps",
-    "labelProps",
-    "descriptionProps"
+    "shadow",
+    "classNames",
+    "styles",
+    "unstyled"
   ]);
-  const { classes, cx, theme } = useStyles({ disallowInput }, { classNames, styles, name: "ColorInput" });
-  const { systemStyles, rest } = extractSystemStyles(others);
-  const uuid = useUuid(id);
-  const [referenceElement, setReferenceElement] = useState(null);
+  const theme = useMantineTheme();
   const [dropdownOpened, setDropdownOpened] = useState(false);
   const [lastValidValue, setLastValidValue] = useState("");
   const [_value, setValue] = useUncontrolled({
     value,
     defaultValue,
     finalValue: "",
-    rule: (val) => typeof val === "string",
     onChange
   });
   const handleInputFocus = (event) => {
@@ -170,64 +140,42 @@ const ColorInput = forwardRef((props, ref) => {
       setValue(convertHsvaTo(format, parseColor(_value)));
     }
   }, [format]);
-  return /* @__PURE__ */ React.createElement(InputWrapper, __spreadValues(__spreadValues({
-    label,
-    description,
-    error,
-    required,
+  return /* @__PURE__ */ React.createElement(Input.Wrapper, __spreadProps(__spreadValues({}, wrapperProps), {
+    __staticSelector: "ColorInput"
+  }), /* @__PURE__ */ React.createElement(Popover, {
+    __staticSelector: "ColorInput",
+    position: "bottom-start",
+    offset: 5,
+    zIndex: dropdownZIndex,
+    withinPortal,
+    transitionDuration,
+    transition,
+    opened: dropdownOpened,
+    shadow,
     classNames,
     styles,
-    size,
-    id: uuid,
-    className,
-    style,
-    __staticSelector: "ColorInput",
-    sx,
-    errorProps,
-    descriptionProps,
-    labelProps
-  }, systemStyles), wrapperProps), /* @__PURE__ */ React.createElement("div", {
-    ref: setReferenceElement
-  }, /* @__PURE__ */ React.createElement(Input, __spreadProps(__spreadValues({}, rest), {
+    unstyled
+  }, /* @__PURE__ */ React.createElement(Popover.Target, null, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Input, __spreadProps(__spreadValues(__spreadValues({}, others), inputProps), {
     ref,
     __staticSelector: "ColorInput",
-    id: uuid,
     onFocus: handleInputFocus,
     onBlur: handleInputBlur,
     spellCheck: false,
-    size,
     value: _value,
     onChange: (event) => setValue(event.currentTarget.value),
-    invalid: !!error,
-    required,
     autoComplete: "nope",
     icon: icon || (withPreview ? /* @__PURE__ */ React.createElement(ColorSwatch, {
       color: isColorValid(_value) ? _value : "#fff",
-      size: theme.fn.size({ size, sizes: SWATCH_SIZES })
+      size: theme.fn.size({ size: inputProps.size, sizes: SWATCH_SIZES })
     }) : null),
     readOnly: disallowInput,
-    classNames: __spreadProps(__spreadValues({}, classNames), { input: cx(classes.input, classNames == null ? void 0 : classNames.input) }),
+    sx: { cursor: disallowInput ? "pointer" : void 0 },
+    unstyled,
+    classNames,
     styles
-  }))), /* @__PURE__ */ React.createElement(Popper, {
-    referenceElement,
-    transitionDuration,
-    transitionTimingFunction,
-    transition,
-    mounted: dropdownOpened,
-    position: "bottom",
-    placement: "start",
-    gutter: 5,
-    arrowSize: 3,
-    zIndex: dropdownZIndex,
-    arrowStyle: { left: theme.fn.size({ size, sizes: ARROW_OFFSET }) },
-    withinPortal
-  }, /* @__PURE__ */ React.createElement("div", {
-    style: { pointerEvents: "all" }
-  }, /* @__PURE__ */ React.createElement(Paper, {
-    shadow: "sm",
-    p: size,
-    className: classes.dropdownBody,
-    onMouseDown: (event) => event.preventDefault()
+  })))), /* @__PURE__ */ React.createElement(Popover.Dropdown, {
+    onMouseDown: (event) => event.preventDefault(),
+    p: inputProps.size
   }, /* @__PURE__ */ React.createElement(ColorPicker, {
     __staticSelector: "ColorInput",
     value: _value,
@@ -236,11 +184,12 @@ const ColorInput = forwardRef((props, ref) => {
     swatches,
     swatchesPerRow,
     withPicker,
-    size,
+    size: inputProps.size,
     focusable: false,
+    unstyled,
     styles,
     classNames
-  })))));
+  }))));
 });
 ColorInput.displayName = "@mantine/core/ColorInput";

package/esm/components/ColorInput/ColorInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ColorInput.js","sources":["../../../src/components/ColorInput/ColorInput.tsx"],"sourcesContent":["import React, { useState, useEffect, forwardRef } from 'react';\nimport { useUncontrolled, useDidUpdate, useUuid } from '@mantine/hooks';\nimport {\n DefaultProps,\n Selectors,\n extractSystemStyles,\n getDefaultZIndex,\n useMantineDefaultProps,\n} from '@mantine/styles';\nimport { InputWrapper, InputWrapperBaseProps, InputWrapperStylesNames } from '../InputWrapper';\nimport { Input, InputBaseProps, InputStylesNames } from '../Input';\nimport { ColorSwatch } from '../ColorSwatch';\nimport { Popper } from '../Popper';\nimport { MantineTransition } from '../Transition';\nimport { Paper } from '../Paper';\nimport {\n ColorPicker,\n ColorPickerBaseProps,\n ColorPickerStylesNames,\n} from '../ColorPicker/ColorPicker';\nimport { convertHsvaTo, isColorValid, parseColor } from '../ColorPicker/converters';\nimport useStyles from './ColorInput.styles';\n\nexport type ColorInputStylesNames =\n \| InputWrapperStylesNames\n \| InputStylesNames\n \| ColorPickerStylesNames\n \| Selectors<typeof useStyles>;\n\nexport interface ColorInputProps\n extends InputWrapperBaseProps,\n InputBaseProps,\n ColorPickerBaseProps,\n DefaultProps<ColorInputStylesNames>,\n Omit<React.ComponentPropsWithoutRef<'input'>, 'size' \| 'onChange' \| 'defaultValue' \| 'value'> {\n /** Disallow free input /\n disallowInput?: boolean;\n\n /* call onChange with last valid value onBlur /\n fixOnBlur?: boolean;\n\n /* Dropdown element z-index /\n dropdownZIndex?: number;\n\n /* Display swatch with color preview on the left side of input /\n withPreview?: boolean;\n\n /* Dropdown transition name or object /\n transition?: MantineTransition;\n\n /* Dropdown appear/disappear transition duration in ms /\n transitionDuration?: number;\n\n /* Dropdown transition timing function, defaults to theme.transitionTimingFunction /\n transitionTimingFunction?: string;\n\n /* Whether to render the dropdown in a Portal */\n withinPortal?: boolean;\n}\n\nconst SWATCH_SIZES = {\n xs: 16,\n sm: 18,\n md: 22,\n lg: 28,\n xl: 36,\n};\n\nconst ARROW_OFFSET = {\n xs: 12,\n sm: 15,\n md: 17,\n lg: 21,\n xl: 25,\n};\n\nconst defaultProps: Partial<ColorInputProps> = {\n size: 'sm',\n format: 'hex',\n fixOnBlur: true,\n withPreview: true,\n swatchesPerRow: 10,\n withPicker: true,\n transition: 'pop-top-left',\n dropdownZIndex: getDefaultZIndex('popover'),\n transitionDuration: 0,\n withinPortal: true,\n};\n\nexport const ColorInput = forwardRef<HTMLInputElement, ColorInputProps>(\n (props: ColorInputProps, ref) => {\n const {\n label,\n description,\n error,\n required,\n wrapperProps,\n size,\n format,\n onChange,\n onFocus,\n onBlur,\n value,\n defaultValue,\n classNames,\n styles,\n disallowInput,\n fixOnBlur,\n withPreview,\n swatchesPerRow,\n withPicker,\n icon,\n transition,\n id,\n dropdownZIndex,\n transitionDuration,\n transitionTimingFunction,\n withinPortal,\n className,\n style,\n swatches,\n sx,\n errorProps,\n labelProps,\n descriptionProps,\n ...others\n } = useMantineDefaultProps('ColorInput', defaultProps, props);\n\n const { classes, cx, theme } = useStyles(\n { disallowInput },\n { classNames, styles, name: 'ColorInput' }\n );\n const { systemStyles, rest } = extractSystemStyles(others);\n const uuid = useUuid(id);\n const [referenceElement, setReferenceElement] = useState<HTMLDivElement>(null);\n const [dropdownOpened, setDropdownOpened] = useState(false);\n const [lastValidValue, setLastValidValue] = useState('');\n const [_value, setValue] = useUncontrolled({\n value,\n defaultValue,\n finalValue: '',\n rule: (val) => typeof val === 'string',\n onChange,\n });\n\n const handleInputFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n typeof onFocus === 'function' && onFocus(event);\n setDropdownOpened(true);\n };\n\n const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n typeof onBlur === 'function' && onBlur(event);\n setDropdownOpened(false);\n fixOnBlur && setValue(lastValidValue);\n };\n\n useEffect(() => {\n if (isColorValid(_value) \|\| _value.trim() === '') {\n setLastValidValue(_value);\n }\n }, [_value]);\n\n useDidUpdate(() => {\n if (isColorValid(_value)) {\n setValue(convertHsvaTo(format, parseColor(_value)));\n }\n }, [format]);\n\n return (\n <InputWrapper\n label={label}\n description={description}\n error={error}\n required={required}\n classNames={classNames}\n styles={styles}\n size={size}\n id={uuid}\n className={className}\n style={style}\n __staticSelector=\"ColorInput\"\n sx={sx}\n errorProps={errorProps}\n descriptionProps={descriptionProps}\n labelProps={labelProps}\n {...systemStyles}\n {...wrapperProps}\n >\n <div ref={setReferenceElement}>\n <Input<'input'>\n {...rest}\n ref={ref}\n __staticSelector=\"ColorInput\"\n id={uuid}\n onFocus={handleInputFocus}\n onBlur={handleInputBlur}\n spellCheck={false}\n size={size}\n value={_value}\n onChange={(event) => setValue(event.currentTarget.value)}\n invalid={!!error}\n required={required}\n autoComplete=\"nope\"\n icon={\n icon \|\|\n (withPreview ? (\n <ColorSwatch\n color={isColorValid(_value) ? _value : '#fff'}\n size={theme.fn.size({ size, sizes: SWATCH_SIZES })}\n />\n ) : null)\n }\n readOnly={disallowInput}\n classNames={{ ...classNames, input: cx(classes.input, classNames?.input) }}\n styles={styles}\n />\n </div>\n\n <Popper\n referenceElement={referenceElement}\n transitionDuration={transitionDuration}\n transitionTimingFunction={transitionTimingFunction}\n transition={transition}\n mounted={dropdownOpened}\n position=\"bottom\"\n placement=\"start\"\n gutter={5}\n arrowSize={3}\n zIndex={dropdownZIndex}\n arrowStyle={{ left: theme.fn.size({ size, sizes: ARROW_OFFSET }) }}\n withinPortal={withinPortal}\n >\n <div style={{ pointerEvents: 'all' }}>\n <Paper<'div'>\n shadow=\"sm\"\n p={size}\n className={classes.dropdownBody}\n onMouseDown={(event) => event.preventDefault()}\n >\n <ColorPicker\n __staticSelector=\"ColorInput\"\n value={_value}\n onChange={setValue}\n format={format}\n swatches={swatches}\n swatchesPerRow={swatchesPerRow}\n withPicker={withPicker}\n size={size}\n focusable={false}\n styles={styles}\n classNames={classNames}\n />\n </Paper>\n </div>\n </Popper>\n </InputWrapper>\n );\n }\n);\n\nColorInput.displayName = '@mantine/core/ColorInput';\n"],"names":[],"mappings":";;;;;;;;;;;;;AAAA,IAAI,SAAS,GAAG,MAAM,CAAC,cAAc,CAAC;AACtC,IAAI,UAAU,GAAG,MAAM,CAAC,gBAAgB,CAAC;AACzC,IAAI,iBAAiB,GAAG,MAAM,CAAC,yBAAyB,CAAC;AACzD,IAAI,mBAAmB,GAAG,MAAM,CAAC,qBAAqB,CAAC;AACvD,IAAI,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,cAAc,CAAC;AACnD,IAAI,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,oBAAoB,CAAC;AACzD,IAAI,eAAe,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,KAAK,GAAG,IAAI,GAAG,GAAG,SAAS,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;AAChK,IAAI,cAAc,GAAG,CAAC,CAAC,EAAE,CAAC,KAAK;AAC/B,EAAE,KAAK,IAAI,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC;AAChC,IAAI,IAAI,YAAY,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC;AAClC,MAAM,eAAe,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;AACxC,EAAE,IAAI,mBAAmB;AACzB,IAAI,KAAK,IAAI,IAAI,IAAI,mBAAmB,CAAC,CAAC,CAAC,EAAE;AAC7C,MAAM,IAAI,YAAY,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC;AACpC,QAAQ,eAAe,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;AAC1C,KAAK;AACL,EAAE,OAAO,CAAC,CAAC;AACX,CAAC,CAAC;AACF,IAAI,aAAa,GAAG,CAAC,CAAC,EAAE,CAAC,KAAK,UAAU,CAAC,CAAC,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAC;AAClE,IAAI,SAAS,GAAG,CAAC,MAAM,EAAE,OAAO,KAAK;AACrC,EAAE,IAAI,MAAM,GAAG,EAAE,CAAC;AAClB,EAAE,KAAK,IAAI,IAAI,IAAI,MAAM;AACzB,IAAI,IAAI,YAAY,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;AACpE,MAAM,MAAM,CAAC,IAAI,CAAC,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;AAClC,EAAE,IAAI,MAAM,IAAI,IAAI,IAAI,mBAAmB;AAC3C,IAAI,KAAK,IAAI,IAAI,IAAI,mBAAmB,CAAC,MAAM,CAAC,EAAE;AAClD,MAAM,IAAI,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,YAAY,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC;AACtE,QAAQ,MAAM,CAAC,IAAI,CAAC,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;AACpC,KAAK;AACL,EAAE,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC;AAkBF,MAAM,YAAY,GAAG;AACrB,EAAE,EAAE,EAAE,EAAE;AACR,EAAE,EAAE,EAAE,EAAE;AACR,EAAE,EAAE,EAAE,EAAE;AACR,EAAE,EAAE,EAAE,EAAE;AACR,EAAE,EAAE,EAAE,EAAE;AACR,CAAC,CAAC;AACF,MAAM,YAAY,GAAG;AACrB,EAAE,EAAE,EAAE,EAAE;AACR,EAAE,EAAE,EAAE,EAAE;AACR,EAAE,EAAE,EAAE,EAAE;AACR,EAAE,EAAE,EAAE,EAAE;AACR,EAAE,EAAE,EAAE,EAAE;AACR,CAAC,CAAC;AACF,MAAM,YAAY,GAAG;AACrB,EAAE,IAAI,EAAE,IAAI;AACZ,EAAE,MAAM,EAAE,KAAK;AACf,EAAE,SAAS,EAAE,IAAI;AACjB,EAAE,WAAW,EAAE,IAAI;AACnB,EAAE,cAAc,EAAE,EAAE;AACpB,EAAE,UAAU,EAAE,IAAI;AAClB,EAAE,UAAU,EAAE,cAAc;AAC5B,EAAE,cAAc,EAAE,gBAAgB,CAAC,SAAS,CAAC;AAC7C,EAAE,kBAAkB,EAAE,CAAC;AACvB,EAAE,YAAY,EAAE,IAAI;AACpB,CAAC,CAAC;AACU,MAAC,UAAU,GAAG,UAAU,CAAC,CAAC,KAAK,EAAE,GAAG,KAAK;AACrD,EAAE,MAAM,EAAE,GAAG,sBAAsB,CAAC,YAAY,EAAE,YAAY,EAAE,KAAK,CAAC,EAAE;AACxE,IAAI,KAAK;AACT,IAAI,WAAW;AACf,IAAI,KAAK;AACT,IAAI,QAAQ;AACZ,IAAI,YAAY;AAChB,IAAI,IAAI;AACR,IAAI,MAAM;AACV,IAAI,QAAQ;AACZ,IAAI,OAAO;AACX,IAAI,MAAM;AACV,IAAI,KAAK;AACT,IAAI,YAAY;AAChB,IAAI,UAAU;AACd,IAAI,MAAM;AACV,IAAI,aAAa;AACjB,IAAI,SAAS;AACb,IAAI,WAAW;AACf,IAAI,cAAc;AAClB,IAAI,UAAU;AACd,IAAI,IAAI;AACR,IAAI,UAAU;AACd,IAAI,EAAE;AACN,IAAI,cAAc;AAClB,IAAI,kBAAkB;AACtB,IAAI,wBAAwB;AAC5B,IAAI,YAAY;AAChB,IAAI,SAAS;AACb,IAAI,KAAK;AACT,IAAI,QAAQ;AACZ,IAAI,EAAE;AACN,IAAI,UAAU;AACd,IAAI,UAAU;AACd,IAAI,gBAAgB;AACpB,GAAG,GAAG,EAAE,EAAE,MAAM,GAAG,SAAS,CAAC,EAAE,EAAE;AACjC,IAAI,OAAO;AACX,IAAI,aAAa;AACjB,IAAI,OAAO;AACX,IAAI,UAAU;AACd,IAAI,cAAc;AAClB,IAAI,MAAM;AACV,IAAI,QAAQ;AACZ,IAAI,UAAU;AACd,IAAI,SAAS;AACb,IAAI,QAAQ;AACZ,IAAI,OAAO;AACX,IAAI,cAAc;AAClB,IAAI,YAAY;AAChB,IAAI,QAAQ;AACZ,IAAI,eAAe;AACnB,IAAI,WAAW;AACf,IAAI,aAAa;AACjB,IAAI,gBAAgB;AACpB,IAAI,YAAY;AAChB,IAAI,MAAM;AACV,IAAI,YAAY;AAChB,IAAI,IAAI;AACR,IAAI,gBAAgB;AACpB,IAAI,oBAAoB;AACxB,IAAI,0BAA0B;AAC9B,IAAI,cAAc;AAClB,IAAI,WAAW;AACf,IAAI,OAAO;AACX,IAAI,UAAU;AACd,IAAI,IAAI;AACR,IAAI,YAAY;AAChB,IAAI,YAAY;AAChB,IAAI,kBAAkB;AACtB,GAAG,CAAC,CAAC;AACL,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,EAAE,KAAK,EAAE,GAAG,SAAS,CAAC,EAAE,aAAa,EAAE,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,IAAI,EAAE,YAAY,EAAE,CAAC,CAAC;AAC1G,EAAE,MAAM,EAAE,YAAY,EAAE,IAAI,EAAE,GAAG,mBAAmB,CAAC,MAAM,CAAC,CAAC;AAC7D,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,EAAE,CAAC,CAAC;AAC3B,EAAE,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;AACjE,EAAE,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;AAC9D,EAAE,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;AAC3D,EAAE,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAC,GAAG,eAAe,CAAC;AAC7C,IAAI,KAAK;AACT,IAAI,YAAY;AAChB,IAAI,UAAU,EAAE,EAAE;AAClB,IAAI,IAAI,EAAE,CAAC,GAAG,KAAK,OAAO,GAAG,KAAK,QAAQ;AAC1C,IAAI,QAAQ;AACZ,GAAG,CAAC,CAAC;AACL,EAAE,MAAM,gBAAgB,GAAG,CAAC,KAAK,KAAK;AACtC,IAAI,OAAO,OAAO,KAAK,UAAU,IAAI,OAAO,CAAC,KAAK,CAAC,CAAC;AACpD,IAAI,iBAAiB,CAAC,IAAI,CAAC,CAAC;AAC5B,GAAG,CAAC;AACJ,EAAE,MAAM,eAAe,GAAG,CAAC,KAAK,KAAK;AACrC,IAAI,OAAO,MAAM,KAAK,UAAU,IAAI,MAAM,CAAC,KAAK,CAAC,CAAC;AAClD,IAAI,iBAAiB,CAAC,KAAK,CAAC,CAAC;AAC7B,IAAI,SAAS,IAAI,QAAQ,CAAC,cAAc,CAAC,CAAC;AAC1C,GAAG,CAAC;AACJ,EAAE,SAAS,CAAC,MAAM;AAClB,IAAI,IAAI,YAAY,CAAC,MAAM,CAAC,IAAI,MAAM,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;AACtD,MAAM,iBAAiB,CAAC,MAAM,CAAC,CAAC;AAChC,KAAK;AACL,GAAG,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;AACf,EAAE,YAAY,CAAC,MAAM;AACrB,IAAI,IAAI,YAAY,CAAC,MAAM,CAAC,EAAE;AAC9B,MAAM,QAAQ,CAAC,aAAa,CAAC,MAAM,EAAE,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;AAC1D,KAAK;AACL,GAAG,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;AACf,EAAE,uBAAuB,KAAK,CAAC,aAAa,CAAC,YAAY,EAAE,cAAc,CAAC,cAAc,CAAC;AACzF,IAAI,KAAK;AACT,IAAI,WAAW;AACf,IAAI,KAAK;AACT,IAAI,QAAQ;AACZ,IAAI,UAAU;AACd,IAAI,MAAM;AACV,IAAI,IAAI;AACR,IAAI,EAAE,EAAE,IAAI;AACZ,IAAI,SAAS;AACb,IAAI,KAAK;AACT,IAAI,gBAAgB,EAAE,YAAY;AAClC,IAAI,EAAE;AACN,IAAI,UAAU;AACd,IAAI,gBAAgB;AACpB,IAAI,UAAU;AACd,GAAG,EAAE,YAAY,CAAC,EAAE,YAAY,CAAC,kBAAkB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AAC9E,IAAI,GAAG,EAAE,mBAAmB;AAC5B,GAAG,kBAAkB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE,aAAa,CAAC,cAAc,CAAC,EAAE,EAAE,IAAI,CAAC,EAAE;AACxF,IAAI,GAAG;AACP,IAAI,gBAAgB,EAAE,YAAY;AAClC,IAAI,EAAE,EAAE,IAAI;AACZ,IAAI,OAAO,EAAE,gBAAgB;AAC7B,IAAI,MAAM,EAAE,eAAe;AAC3B,IAAI,UAAU,EAAE,KAAK;AACrB,IAAI,IAAI;AACR,IAAI,KAAK,EAAE,MAAM;AACjB,IAAI,QAAQ,EAAE,CAAC,KAAK,KAAK,QAAQ,CAAC,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC;AAC5D,IAAI,OAAO,EAAE,CAAC,CAAC,KAAK;AACpB,IAAI,QAAQ;AACZ,IAAI,YAAY,EAAE,MAAM;AACxB,IAAI,IAAI,EAAE,IAAI,KAAK,WAAW,mBAAmB,KAAK,CAAC,aAAa,CAAC,WAAW,EAAE;AAClF,MAAM,KAAK,EAAE,YAAY,CAAC,MAAM,CAAC,GAAG,MAAM,GAAG,MAAM;AACnD,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,YAAY,EAAE,CAAC;AACxD,KAAK,CAAC,GAAG,IAAI,CAAC;AACd,IAAI,QAAQ,EAAE,aAAa;AAC3B,IAAI,UAAU,EAAE,aAAa,CAAC,cAAc,CAAC,EAAE,EAAE,UAAU,CAAC,EAAE,EAAE,KAAK,EAAE,EAAE,CAAC,OAAO,CAAC,KAAK,EAAE,UAAU,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,UAAU,CAAC,KAAK,CAAC,EAAE,CAAC;AAC3I,IAAI,MAAM;AACV,GAAG,CAAC,CAAC,CAAC,kBAAkB,KAAK,CAAC,aAAa,CAAC,MAAM,EAAE;AACpD,IAAI,gBAAgB;AACpB,IAAI,kBAAkB;AACtB,IAAI,wBAAwB;AAC5B,IAAI,UAAU;AACd,IAAI,OAAO,EAAE,cAAc;AAC3B,IAAI,QAAQ,EAAE,QAAQ;AACtB,IAAI,SAAS,EAAE,OAAO;AACtB,IAAI,MAAM,EAAE,CAAC;AACb,IAAI,SAAS,EAAE,CAAC;AAChB,IAAI,MAAM,EAAE,cAAc;AAC1B,IAAI,UAAU,EAAE,EAAE,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,YAAY,EAAE,CAAC,EAAE;AACtE,IAAI,YAAY;AAChB,GAAG,kBAAkB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AAChD,IAAI,KAAK,EAAE,EAAE,aAAa,EAAE,KAAK,EAAE;AACnC,GAAG,kBAAkB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AAChD,IAAI,MAAM,EAAE,IAAI;AAChB,IAAI,CAAC,EAAE,IAAI;AACX,IAAI,SAAS,EAAE,OAAO,CAAC,YAAY;AACnC,IAAI,WAAW,EAAE,CAAC,KAAK,KAAK,KAAK,CAAC,cAAc,EAAE;AAClD,GAAG,kBAAkB,KAAK,CAAC,aAAa,CAAC,WAAW,EAAE;AACtD,IAAI,gBAAgB,EAAE,YAAY;AAClC,IAAI,KAAK,EAAE,MAAM;AACjB,IAAI,QAAQ,EAAE,QAAQ;AACtB,IAAI,MAAM;AACV,IAAI,QAAQ;AACZ,IAAI,cAAc;AAClB,IAAI,UAAU;AACd,IAAI,IAAI;AACR,IAAI,SAAS,EAAE,KAAK;AACpB,IAAI,MAAM;AACV,IAAI,UAAU;AACd,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACT,CAAC,EAAE;AACH,UAAU,CAAC,WAAW,GAAG,0BAA0B;;;;"}
1	+ {"version":3,"file":"ColorInput.js","sources":["../../../src/components/ColorInput/ColorInput.tsx"],"sourcesContent":["import React, { useState, useEffect, forwardRef } from 'react';\nimport { useUncontrolled, useDidUpdate } from '@mantine/hooks';\nimport { DefaultProps, getDefaultZIndex, MantineShadow, useMantineTheme } from '@mantine/styles';\nimport {\n InputWrapperBaseProps,\n InputWrapperStylesNames,\n Input,\n InputSharedProps,\n InputStylesNames,\n useInputProps,\n} from '../Input';\nimport { ColorSwatch } from '../ColorSwatch';\nimport { Popover, PopoverStylesNames } from '../Popover';\nimport { MantineTransition } from '../Transition';\nimport {\n ColorPicker,\n ColorPickerBaseProps,\n ColorPickerStylesNames,\n} from '../ColorPicker/ColorPicker';\nimport { convertHsvaTo, isColorValid, parseColor } from '../ColorPicker/converters';\n\nexport type ColorInputStylesNames =\n \| InputWrapperStylesNames\n \| InputStylesNames\n \| ColorPickerStylesNames\n \| PopoverStylesNames;\n\nexport interface ColorInputProps\n extends InputWrapperBaseProps,\n InputSharedProps,\n ColorPickerBaseProps,\n DefaultProps<ColorInputStylesNames>,\n Omit<React.ComponentPropsWithoutRef<'input'>, 'size' \| 'onChange' \| 'defaultValue' \| 'value'> {\n /** Disallow free input /\n disallowInput?: boolean;\n\n /* call onChange with last valid value onBlur /\n fixOnBlur?: boolean;\n\n /* Dropdown element z-index /\n dropdownZIndex?: number;\n\n /* Display swatch with color preview on the left side of input /\n withPreview?: boolean;\n\n /* Dropdown transition name or object /\n transition?: MantineTransition;\n\n /* Dropdown appear/disappear transition duration in ms /\n transitionDuration?: number;\n\n /* Dropdown transition timing function, defaults to theme.transitionTimingFunction /\n transitionTimingFunction?: string;\n\n /* Whether to render the dropdown in a Portal /\n withinPortal?: boolean;\n\n /* Dropdown box-shadow, key of theme.shadows */\n shadow?: MantineShadow;\n}\n\nconst SWATCH_SIZES = {\n xs: 16,\n sm: 18,\n md: 22,\n lg: 28,\n xl: 36,\n};\n\nconst defaultProps: Partial<ColorInputProps> = {\n size: 'sm',\n format: 'hex',\n fixOnBlur: true,\n withPreview: true,\n swatchesPerRow: 10,\n withPicker: true,\n transition: 'pop-top-left',\n dropdownZIndex: getDefaultZIndex('popover'),\n transitionDuration: 0,\n withinPortal: true,\n shadow: 'md',\n};\n\nexport const ColorInput = forwardRef<HTMLInputElement, ColorInputProps>(\n (props: ColorInputProps, ref) => {\n const {\n wrapperProps,\n inputProps,\n format,\n onChange,\n onFocus,\n onBlur,\n value,\n defaultValue,\n disallowInput,\n fixOnBlur,\n withPreview,\n swatchesPerRow,\n withPicker,\n icon,\n transition,\n dropdownZIndex,\n transitionDuration,\n transitionTimingFunction,\n withinPortal,\n swatches,\n shadow,\n classNames,\n styles,\n unstyled,\n ...others\n } = useInputProps('ColorInput', defaultProps, props);\n\n const theme = useMantineTheme();\n const [dropdownOpened, setDropdownOpened] = useState(false);\n const [lastValidValue, setLastValidValue] = useState('');\n const [_value, setValue] = useUncontrolled({\n value,\n defaultValue,\n finalValue: '',\n onChange,\n });\n\n const handleInputFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n typeof onFocus === 'function' && onFocus(event);\n setDropdownOpened(true);\n };\n\n const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n typeof onBlur === 'function' && onBlur(event);\n setDropdownOpened(false);\n fixOnBlur && setValue(lastValidValue);\n };\n\n useEffect(() => {\n if (isColorValid(_value) \|\| _value.trim() === '') {\n setLastValidValue(_value);\n }\n }, [_value]);\n\n useDidUpdate(() => {\n if (isColorValid(_value)) {\n setValue(convertHsvaTo(format, parseColor(_value)));\n }\n }, [format]);\n\n return (\n <Input.Wrapper {...wrapperProps} __staticSelector=\"ColorInput\">\n <Popover\n __staticSelector=\"ColorInput\"\n position=\"bottom-start\"\n offset={5}\n zIndex={dropdownZIndex}\n withinPortal={withinPortal}\n transitionDuration={transitionDuration}\n transition={transition}\n opened={dropdownOpened}\n shadow={shadow}\n classNames={classNames}\n styles={styles}\n unstyled={unstyled}\n >\n <Popover.Target>\n <div>\n <Input<'input'>\n {...others}\n {...inputProps}\n ref={ref}\n __staticSelector=\"ColorInput\"\n onFocus={handleInputFocus}\n onBlur={handleInputBlur}\n spellCheck={false}\n value={_value}\n onChange={(event) => setValue(event.currentTarget.value)}\n autoComplete=\"nope\"\n icon={\n icon \|\|\n (withPreview ? (\n <ColorSwatch\n color={isColorValid(_value) ? _value : '#fff'}\n size={theme.fn.size({ size: inputProps.size, sizes: SWATCH_SIZES })}\n />\n ) : null)\n }\n readOnly={disallowInput}\n sx={{ cursor: disallowInput ? 'pointer' : undefined }}\n unstyled={unstyled}\n classNames={classNames}\n styles={styles}\n />\n </div>\n </Popover.Target>\n\n <Popover.Dropdown onMouseDown={(event) => event.preventDefault()} p={inputProps.size}>\n <ColorPicker\n __staticSelector=\"ColorInput\"\n value={_value}\n onChange={setValue}\n format={format}\n swatches={swatches}\n swatchesPerRow={swatchesPerRow}\n withPicker={withPicker}\n size={inputProps.size}\n focusable={false}\n unstyled={unstyled}\n styles={styles}\n classNames={classNames}\n />\n </Popover.Dropdown>\n </Popover>\n </Input.Wrapper>\n );\n }\n);\n\nColorInput.displayName = '@mantine/core/ColorInput';\n"],"names":[],"mappings":"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"}

package/esm/components/ColorPicker/ColorPicker.js CHANGED Viewed

@@ -1,13 +1,13 @@
-import React, { forwardRef, useRef, useState, useEffect } from 'react';
+import React, { forwardRef, useRef, useState } from 'react';
 import { useUncontrolled, useDidUpdate } from '@mantine/hooks';
-import { useMantineDefaultProps } from '@mantine/styles';
+import { useComponentDefaultProps } from '@mantine/styles';
 import { ColorSwatch } from '../ColorSwatch/ColorSwatch.js';
 import { HueSlider } from './HueSlider/HueSlider.js';
 import { AlphaSlider } from './AlphaSlider/AlphaSlider.js';
 import { Saturation } from './Saturation/Saturation.js';
 import { Swatches } from './Swatches/Swatches.js';
 import useStyles from './ColorPicker.styles.js';
-import { isColorValid, parseColor } from './converters/parsers.js';
+import { parseColor, isColorValid } from './converters/parsers.js';
 import { convertHsvaTo } from './converters/converters.js';
 import { Box } from '../Box/Box.js';
@@ -54,7 +54,7 @@ const defaultProps = {
   __staticSelector: "ColorPicker"
 };
 const ColorPicker = forwardRef((props, ref) => {
-  const _a = useMantineDefaultProps("ColorPicker", defaultProps, props), {
+  const _a = useComponentDefaultProps("ColorPicker", defaultProps, props), {
     value,
     defaultValue,
     onChange,
@@ -71,7 +71,8 @@ const ColorPicker = forwardRef((props, ref) => {
     alphaLabel,
     className,
     styles,
-    classNames
+    classNames,
+    unstyled
   } = _a, others = __objRest(_a, [
     "value",
     "defaultValue",
@@ -89,33 +90,37 @@ const ColorPicker = forwardRef((props, ref) => {
     "alphaLabel",
     "className",
     "styles",
-    "classNames"
+    "classNames",
+    "unstyled"
   ]);
-  const { classes, cx, theme } = useStyles({ size, fullWidth }, { classNames, styles, name: __staticSelector });
+  const { classes, cx, theme } = useStyles({ size, fullWidth }, { classNames, styles, name: __staticSelector, unstyled });
   const formatRef = useRef(format);
   const valueRef = useRef(null);
+  const updateRef = useRef(true);
   const withAlpha = format === "rgba" || format === "hsla";
-  const [shouldSkip, setShouldSkip] = useState(false);
   const [_value, setValue] = useUncontrolled({
     value,
     defaultValue,
     finalValue: "#FFFFFF",
-    rule: (val) => isColorValid(val),
     onChange
   });
   const [parsed, setParsed] = useState(parseColor(_value));
   const handleChange = (color) => {
-    setShouldSkip(true);
+    updateRef.current = false;
     setParsed((current) => {
       const next = __spreadValues(__spreadValues({}, current), color);
       valueRef.current = convertHsvaTo(formatRef.current, next);
       return next;
     });
-    Promise.resolve().then(() => setValue(valueRef.current)).then(() => setShouldSkip(false));
+    setValue(valueRef.current);
+    setTimeout(() => {
+      updateRef.current = true;
+    }, 0);
   };
-  useEffect(() => {
-    if (isColorValid(value) && !shouldSkip) {
+  useDidUpdate(() => {
+    if (isColorValid(value) && updateRef.current) {
       setParsed(parseColor(value));
+      updateRef.current = true;
     }
   }, [value]);
   useDidUpdate(() => {

package/esm/components/ColorPicker/ColorPicker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ColorPicker.js","sources":["../../../src/components/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef, forwardRef } from 'react';\nimport { useUncontrolled, useDidUpdate } from '@mantine/hooks';\nimport { DefaultProps, MantineSize, Selectors, useMantineDefaultProps } from '@mantine/styles';\nimport { Box } from '../Box';\nimport { ColorSwatch } from '../ColorSwatch/ColorSwatch';\nimport { convertHsvaTo, isColorValid, parseColor } from './converters';\nimport { ColorSliderStylesNames } from './ColorSlider/ColorSlider';\nimport { HueSlider } from './HueSlider/HueSlider';\nimport { AlphaSlider } from './AlphaSlider/AlphaSlider';\nimport { Saturation, SaturationStylesNames } from './Saturation/Saturation';\nimport { Swatches, SwatchesStylesNames } from './Swatches/Swatches';\nimport { ThumbStylesNames } from './Thumb/Thumb';\nimport { HsvaColor } from './types';\nimport useStyles from './ColorPicker.styles';\n\nexport type ColorPickerStylesNames =\n \| Selectors<typeof useStyles>\n \| ColorSliderStylesNames\n \| SwatchesStylesNames\n \| SaturationStylesNames\n \| ThumbStylesNames;\n\nexport interface ColorPickerBaseProps {\n /** Controlled component value /\n value?: string;\n\n /* Uncontrolled component default value /\n defaultValue?: string;\n\n /* Called when color changes /\n onChange?(color: string): void;\n\n /* Color format /\n format?: 'hex' \| 'rgba' \| 'rgb' \| 'hsl' \| 'hsla';\n\n /* Set to false to display swatches only /\n withPicker?: boolean;\n\n /* Predefined colors /\n swatches?: string[];\n\n /* Number of swatches displayed in one row /\n swatchesPerRow?: number;\n\n /* Predefined component size /\n size?: MantineSize;\n}\n\nexport interface ColorPickerProps\n extends DefaultProps<ColorPickerStylesNames>,\n ColorPickerBaseProps,\n Omit<React.ComponentPropsWithoutRef<'div'>, 'onChange' \| 'value' \| 'defaultValue'> {\n /* Force picker to take 100% width of its container /\n fullWidth?: boolean;\n\n /* Should interactive elements be focusable /\n focusable?: boolean;\n\n /* Static selector base /\n __staticSelector?: string;\n\n /* Saturation slider aria-label /\n saturationLabel?: string;\n\n /* Hue slider aria-label /\n hueLabel?: string;\n\n /* Alpha slider aria-label */\n alphaLabel?: string;\n}\n\nconst SWATCH_SIZES = {\n xs: 26,\n sm: 34,\n md: 42,\n lg: 50,\n xl: 54,\n};\n\nconst defaultProps: Partial<ColorPickerProps> = {\n swatchesPerRow: 10,\n size: 'sm',\n withPicker: true,\n focusable: true,\n __staticSelector: 'ColorPicker',\n};\n\nexport const ColorPicker = forwardRef<HTMLDivElement, ColorPickerProps>(\n (props: ColorPickerProps, ref) => {\n const {\n value,\n defaultValue,\n onChange,\n format,\n swatches,\n swatchesPerRow,\n size,\n withPicker,\n fullWidth,\n focusable,\n __staticSelector,\n saturationLabel,\n hueLabel,\n alphaLabel,\n className,\n styles,\n classNames,\n ...others\n } = useMantineDefaultProps('ColorPicker', defaultProps, props);\n\n const { classes, cx, theme } = useStyles(\n { size, fullWidth },\n { classNames, styles, name: __staticSelector }\n );\n const formatRef = useRef(format);\n const valueRef = useRef<string>(null);\n const withAlpha = format === 'rgba' \|\| format === 'hsla';\n\n const [shouldSkip, setShouldSkip] = useState(false);\n const [_value, setValue] = useUncontrolled({\n value,\n defaultValue,\n finalValue: '#FFFFFF',\n rule: (val) => isColorValid(val),\n onChange,\n });\n\n const [parsed, setParsed] = useState(parseColor(_value));\n\n const handleChange = (color: Partial<HsvaColor>) => {\n // This is required for useEffect to work, it's dirty but works fine\n setShouldSkip(true);\n\n setParsed((current) => {\n const next = { ...current, ...color };\n valueRef.current = convertHsvaTo(formatRef.current, next);\n return next;\n });\n\n Promise.resolve()\n .then(() => setValue(valueRef.current))\n .then(() => setShouldSkip(false));\n };\n\n useEffect(() => {\n if (isColorValid(value) && !shouldSkip) {\n setParsed(parseColor(value));\n }\n }, [value]);\n\n useDidUpdate(() => {\n formatRef.current = format;\n setValue(convertHsvaTo(format, parsed));\n }, [format]);\n\n return (\n <Box className={cx(classes.wrapper, className)} ref={ref} {...others}>\n {withPicker && (\n <>\n <Saturation\n value={parsed}\n onChange={handleChange}\n color={_value}\n styles={styles}\n classNames={classNames}\n size={size}\n focusable={focusable}\n saturationLabel={saturationLabel}\n __staticSelector={__staticSelector}\n />\n\n <div className={classes.body}>\n <div className={classes.sliders}>\n <HueSlider\n value={parsed.h}\n onChange={(h) => handleChange({ h })}\n size={size}\n styles={styles}\n classNames={classNames}\n focusable={focusable}\n aria-label={hueLabel}\n __staticSelector={__staticSelector}\n />\n\n {withAlpha && (\n <AlphaSlider\n value={parsed.a}\n onChange={(a) => handleChange({ a })}\n size={size}\n color={convertHsvaTo('hex', parsed)}\n style={{ marginTop: 6 }}\n styles={styles}\n classNames={classNames}\n focusable={focusable}\n aria-label={alphaLabel}\n __staticSelector={__staticSelector}\n />\n )}\n </div>\n\n {withAlpha && (\n <ColorSwatch\n color={_value}\n radius=\"sm\"\n size={theme.fn.size({ size, sizes: SWATCH_SIZES })}\n className={classes.preview}\n />\n )}\n </div>\n </>\n )}\n\n {Array.isArray(swatches) && (\n <Swatches\n data={swatches}\n onSelect={handleChange}\n style={{ marginTop: 5 }}\n swatchesPerRow={swatchesPerRow}\n focusable={focusable}\n classNames={classNames}\n styles={styles}\n __staticSelector={__staticSelector}\n />\n )}\n </Box>\n );\n }\n);\n\nColorPicker.displayName = '@mantine/core/ColorPicker';\n"],"names":[],"mappings":";;;;;;;;;;;;;AAAA,IAAI,SAAS,GAAG,MAAM,CAAC,cAAc,CAAC;AACtC,IAAI,mBAAmB,GAAG,MAAM,CAAC,qBAAqB,CAAC;AACvD,IAAI,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,cAAc,CAAC;AACnD,IAAI,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,oBAAoB,CAAC;AACzD,IAAI,eAAe,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,KAAK,GAAG,IAAI,GAAG,GAAG,SAAS,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;AAChK,IAAI,cAAc,GAAG,CAAC,CAAC,EAAE,CAAC,KAAK;AAC/B,EAAE,KAAK,IAAI,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC;AAChC,IAAI,IAAI,YAAY,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC;AAClC,MAAM,eAAe,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;AACxC,EAAE,IAAI,mBAAmB;AACzB,IAAI,KAAK,IAAI,IAAI,IAAI,mBAAmB,CAAC,CAAC,CAAC,EAAE;AAC7C,MAAM,IAAI,YAAY,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC;AACpC,QAAQ,eAAe,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;AAC1C,KAAK;AACL,EAAE,OAAO,CAAC,CAAC;AACX,CAAC,CAAC;AACF,IAAI,SAAS,GAAG,CAAC,MAAM,EAAE,OAAO,KAAK;AACrC,EAAE,IAAI,MAAM,GAAG,EAAE,CAAC;AAClB,EAAE,KAAK,IAAI,IAAI,IAAI,MAAM;AACzB,IAAI,IAAI,YAAY,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;AACpE,MAAM,MAAM,CAAC,IAAI,CAAC,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;AAClC,EAAE,IAAI,MAAM,IAAI,IAAI,IAAI,mBAAmB;AAC3C,IAAI,KAAK,IAAI,IAAI,IAAI,mBAAmB,CAAC,MAAM,CAAC,EAAE;AAClD,MAAM,IAAI,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,YAAY,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC;AACtE,QAAQ,MAAM,CAAC,IAAI,CAAC,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;AACpC,KAAK;AACL,EAAE,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC;AAYF,MAAM,YAAY,GAAG;AACrB,EAAE,EAAE,EAAE,EAAE;AACR,EAAE,EAAE,EAAE,EAAE;AACR,EAAE,EAAE,EAAE,EAAE;AACR,EAAE,EAAE,EAAE,EAAE;AACR,EAAE,EAAE,EAAE,EAAE;AACR,CAAC,CAAC;AACF,MAAM,YAAY,GAAG;AACrB,EAAE,cAAc,EAAE,EAAE;AACpB,EAAE,IAAI,EAAE,IAAI;AACZ,EAAE,UAAU,EAAE,IAAI;AAClB,EAAE,SAAS,EAAE,IAAI;AACjB,EAAE,gBAAgB,EAAE,aAAa;AACjC,CAAC,CAAC;AACU,MAAC,WAAW,GAAG,UAAU,CAAC,CAAC,KAAK,EAAE,GAAG,KAAK;AACtD,EAAE,MAAM,EAAE,GAAG,sBAAsB,CAAC,aAAa,EAAE,YAAY,EAAE,KAAK,CAAC,EAAE;AACzE,IAAI,KAAK;AACT,IAAI,YAAY;AAChB,IAAI,QAAQ;AACZ,IAAI,MAAM;AACV,IAAI,QAAQ;AACZ,IAAI,cAAc;AAClB,IAAI,IAAI;AACR,IAAI,UAAU;AACd,IAAI,SAAS;AACb,IAAI,SAAS;AACb,IAAI,gBAAgB;AACpB,IAAI,eAAe;AACnB,IAAI,QAAQ;AACZ,IAAI,UAAU;AACd,IAAI,SAAS;AACb,IAAI,MAAM;AACV,IAAI,UAAU;AACd,GAAG,GAAG,EAAE,EAAE,MAAM,GAAG,SAAS,CAAC,EAAE,EAAE;AACjC,IAAI,OAAO;AACX,IAAI,cAAc;AAClB,IAAI,UAAU;AACd,IAAI,QAAQ;AACZ,IAAI,UAAU;AACd,IAAI,gBAAgB;AACpB,IAAI,MAAM;AACV,IAAI,YAAY;AAChB,IAAI,WAAW;AACf,IAAI,WAAW;AACf,IAAI,kBAAkB;AACtB,IAAI,iBAAiB;AACrB,IAAI,UAAU;AACd,IAAI,YAAY;AAChB,IAAI,WAAW;AACf,IAAI,QAAQ;AACZ,IAAI,YAAY;AAChB,GAAG,CAAC,CAAC;AACL,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,EAAE,KAAK,EAAE,GAAG,SAAS,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,IAAI,EAAE,gBAAgB,EAAE,CAAC,CAAC;AAChH,EAAE,MAAM,SAAS,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC;AACnC,EAAE,MAAM,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;AAChC,EAAE,MAAM,SAAS,GAAG,MAAM,KAAK,MAAM,IAAI,MAAM,KAAK,MAAM,CAAC;AAC3D,EAAE,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;AACtD,EAAE,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAC,GAAG,eAAe,CAAC;AAC7C,IAAI,KAAK;AACT,IAAI,YAAY;AAChB,IAAI,UAAU,EAAE,SAAS;AACzB,IAAI,IAAI,EAAE,CAAC,GAAG,KAAK,YAAY,CAAC,GAAG,CAAC;AACpC,IAAI,QAAQ;AACZ,GAAG,CAAC,CAAC;AACL,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC;AAC3D,EAAE,MAAM,YAAY,GAAG,CAAC,KAAK,KAAK;AAClC,IAAI,aAAa,CAAC,IAAI,CAAC,CAAC;AACxB,IAAI,SAAS,CAAC,CAAC,OAAO,KAAK;AAC3B,MAAM,MAAM,IAAI,GAAG,cAAc,CAAC,cAAc,CAAC,EAAE,EAAE,OAAO,CAAC,EAAE,KAAK,CAAC,CAAC;AACtE,MAAM,QAAQ,CAAC,OAAO,GAAG,aAAa,CAAC,SAAS,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;AAChE,MAAM,OAAO,IAAI,CAAC;AAClB,KAAK,CAAC,CAAC;AACP,IAAI,OAAO,CAAC,OAAO,EAAE,CAAC,IAAI,CAAC,MAAM,QAAQ,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC;AAC9F,GAAG,CAAC;AACJ,EAAE,SAAS,CAAC,MAAM;AAClB,IAAI,IAAI,YAAY,CAAC,KAAK,CAAC,IAAI,CAAC,UAAU,EAAE;AAC5C,MAAM,SAAS,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC;AACnC,KAAK;AACL,GAAG,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;AACd,EAAE,YAAY,CAAC,MAAM;AACrB,IAAI,SAAS,CAAC,OAAO,GAAG,MAAM,CAAC;AAC/B,IAAI,QAAQ,CAAC,aAAa,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;AAC5C,GAAG,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;AACf,EAAE,uBAAuB,KAAK,CAAC,aAAa,CAAC,GAAG,EAAE,cAAc,CAAC;AACjE,IAAI,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,OAAO,EAAE,SAAS,CAAC;AAC7C,IAAI,GAAG;AACP,GAAG,EAAE,MAAM,CAAC,EAAE,UAAU,oBAAoB,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,QAAQ,EAAE,IAAI,kBAAkB,KAAK,CAAC,aAAa,CAAC,UAAU,EAAE;AACtI,IAAI,KAAK,EAAE,MAAM;AACjB,IAAI,QAAQ,EAAE,YAAY;AAC1B,IAAI,KAAK,EAAE,MAAM;AACjB,IAAI,MAAM;AACV,IAAI,UAAU;AACd,IAAI,IAAI;AACR,IAAI,SAAS;AACb,IAAI,eAAe;AACnB,IAAI,gBAAgB;AACpB,GAAG,CAAC,kBAAkB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AACjD,IAAI,SAAS,EAAE,OAAO,CAAC,IAAI;AAC3B,GAAG,kBAAkB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AAChD,IAAI,SAAS,EAAE,OAAO,CAAC,OAAO;AAC9B,GAAG,kBAAkB,KAAK,CAAC,aAAa,CAAC,SAAS,EAAE;AACpD,IAAI,KAAK,EAAE,MAAM,CAAC,CAAC;AACnB,IAAI,QAAQ,EAAE,CAAC,CAAC,KAAK,YAAY,CAAC,EAAE,CAAC,EAAE,CAAC;AACxC,IAAI,IAAI;AACR,IAAI,MAAM;AACV,IAAI,UAAU;AACd,IAAI,SAAS;AACb,IAAI,YAAY,EAAE,QAAQ;AAC1B,IAAI,gBAAgB;AACpB,GAAG,CAAC,EAAE,SAAS,oBAAoB,KAAK,CAAC,aAAa,CAAC,WAAW,EAAE;AACpE,IAAI,KAAK,EAAE,MAAM,CAAC,CAAC;AACnB,IAAI,QAAQ,EAAE,CAAC,CAAC,KAAK,YAAY,CAAC,EAAE,CAAC,EAAE,CAAC;AACxC,IAAI,IAAI;AACR,IAAI,KAAK,EAAE,aAAa,CAAC,KAAK,EAAE,MAAM,CAAC;AACvC,IAAI,KAAK,EAAE,EAAE,SAAS,EAAE,CAAC,EAAE;AAC3B,IAAI,MAAM;AACV,IAAI,UAAU;AACd,IAAI,SAAS;AACb,IAAI,YAAY,EAAE,UAAU;AAC5B,IAAI,gBAAgB;AACpB,GAAG,CAAC,CAAC,EAAE,SAAS,oBAAoB,KAAK,CAAC,aAAa,CAAC,WAAW,EAAE;AACrE,IAAI,KAAK,EAAE,MAAM;AACjB,IAAI,MAAM,EAAE,IAAI;AAChB,IAAI,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,YAAY,EAAE,CAAC;AACtD,IAAI,SAAS,EAAE,OAAO,CAAC,OAAO;AAC9B,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,oBAAoB,KAAK,CAAC,aAAa,CAAC,QAAQ,EAAE;AACjF,IAAI,IAAI,EAAE,QAAQ;AAClB,IAAI,QAAQ,EAAE,YAAY;AAC1B,IAAI,KAAK,EAAE,EAAE,SAAS,EAAE,CAAC,EAAE;AAC3B,IAAI,cAAc;AAClB,IAAI,SAAS;AACb,IAAI,UAAU;AACd,IAAI,MAAM;AACV,IAAI,gBAAgB;AACpB,GAAG,CAAC,CAAC,CAAC;AACN,CAAC,EAAE;AACH,WAAW,CAAC,WAAW,GAAG,2BAA2B;;;;"}
1	+ {"version":3,"file":"ColorPicker.js","sources":["../../../src/components/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import React, { useState, useRef, forwardRef } from 'react';\nimport { useDidUpdate, useUncontrolled } from '@mantine/hooks';\nimport { DefaultProps, MantineSize, Selectors, useComponentDefaultProps } from '@mantine/styles';\nimport { Box } from '../Box';\nimport { ColorSwatch } from '../ColorSwatch/ColorSwatch';\nimport { convertHsvaTo, isColorValid, parseColor } from './converters';\nimport { ColorSliderStylesNames } from './ColorSlider/ColorSlider';\nimport { HueSlider } from './HueSlider/HueSlider';\nimport { AlphaSlider } from './AlphaSlider/AlphaSlider';\nimport { Saturation, SaturationStylesNames } from './Saturation/Saturation';\nimport { Swatches, SwatchesStylesNames } from './Swatches/Swatches';\nimport { ThumbStylesNames } from './Thumb/Thumb';\nimport { HsvaColor } from './types';\nimport useStyles from './ColorPicker.styles';\n\nexport type ColorPickerStylesNames =\n \| Selectors<typeof useStyles>\n \| ColorSliderStylesNames\n \| SwatchesStylesNames\n \| SaturationStylesNames\n \| ThumbStylesNames;\n\nexport interface ColorPickerBaseProps {\n /** Controlled component value /\n value?: string;\n\n /* Uncontrolled component default value /\n defaultValue?: string;\n\n /* Called when color changes /\n onChange?(color: string): void;\n\n /* Color format /\n format?: 'hex' \| 'rgba' \| 'rgb' \| 'hsl' \| 'hsla';\n\n /* Set to false to display swatches only /\n withPicker?: boolean;\n\n /* Predefined colors /\n swatches?: string[];\n\n /* Number of swatches displayed in one row /\n swatchesPerRow?: number;\n\n /* Predefined component size /\n size?: MantineSize;\n}\n\nexport interface ColorPickerProps\n extends DefaultProps<ColorPickerStylesNames>,\n ColorPickerBaseProps,\n Omit<React.ComponentPropsWithoutRef<'div'>, 'onChange' \| 'value' \| 'defaultValue'> {\n /* Force picker to take 100% width of its container /\n fullWidth?: boolean;\n\n /* Should interactive elements be focusable /\n focusable?: boolean;\n\n /* Static selector base /\n __staticSelector?: string;\n\n /* Saturation slider aria-label /\n saturationLabel?: string;\n\n /* Hue slider aria-label /\n hueLabel?: string;\n\n /* Alpha slider aria-label */\n alphaLabel?: string;\n}\n\nconst SWATCH_SIZES = {\n xs: 26,\n sm: 34,\n md: 42,\n lg: 50,\n xl: 54,\n};\n\nconst defaultProps: Partial<ColorPickerProps> = {\n swatchesPerRow: 10,\n size: 'sm',\n withPicker: true,\n focusable: true,\n __staticSelector: 'ColorPicker',\n};\n\nexport const ColorPicker = forwardRef<HTMLDivElement, ColorPickerProps>(\n (props: ColorPickerProps, ref) => {\n const {\n value,\n defaultValue,\n onChange,\n format,\n swatches,\n swatchesPerRow,\n size,\n withPicker,\n fullWidth,\n focusable,\n __staticSelector,\n saturationLabel,\n hueLabel,\n alphaLabel,\n className,\n styles,\n classNames,\n unstyled,\n ...others\n } = useComponentDefaultProps('ColorPicker', defaultProps, props);\n\n const { classes, cx, theme } = useStyles(\n { size, fullWidth },\n { classNames, styles, name: __staticSelector, unstyled }\n );\n const formatRef = useRef(format);\n const valueRef = useRef<string>(null);\n const updateRef = useRef(true);\n const withAlpha = format === 'rgba' \|\| format === 'hsla';\n\n const [_value, setValue] = useUncontrolled({\n value,\n defaultValue,\n finalValue: '#FFFFFF',\n onChange,\n });\n\n const [parsed, setParsed] = useState(parseColor(_value));\n\n const handleChange = (color: Partial<HsvaColor>) => {\n updateRef.current = false;\n setParsed((current) => {\n const next = { ...current, ...color };\n valueRef.current = convertHsvaTo(formatRef.current, next);\n return next;\n });\n\n setValue(valueRef.current);\n\n // Does not work any other way\n setTimeout(() => {\n updateRef.current = true;\n }, 0);\n };\n\n useDidUpdate(() => {\n if (isColorValid(value) && updateRef.current) {\n setParsed(parseColor(value));\n updateRef.current = true;\n }\n }, [value]);\n\n useDidUpdate(() => {\n formatRef.current = format;\n setValue(convertHsvaTo(format, parsed));\n }, [format]);\n\n return (\n <Box className={cx(classes.wrapper, className)} ref={ref} {...others}>\n {withPicker && (\n <>\n <Saturation\n value={parsed}\n onChange={handleChange}\n color={_value}\n styles={styles}\n classNames={classNames}\n size={size}\n focusable={focusable}\n saturationLabel={saturationLabel}\n __staticSelector={__staticSelector}\n />\n\n <div className={classes.body}>\n <div className={classes.sliders}>\n <HueSlider\n value={parsed.h}\n onChange={(h) => handleChange({ h })}\n size={size}\n styles={styles}\n classNames={classNames}\n focusable={focusable}\n aria-label={hueLabel}\n __staticSelector={__staticSelector}\n />\n\n {withAlpha && (\n <AlphaSlider\n value={parsed.a}\n onChange={(a) => handleChange({ a })}\n size={size}\n color={convertHsvaTo('hex', parsed)}\n style={{ marginTop: 6 }}\n styles={styles}\n classNames={classNames}\n focusable={focusable}\n aria-label={alphaLabel}\n __staticSelector={__staticSelector}\n />\n )}\n </div>\n\n {withAlpha && (\n <ColorSwatch\n color={_value}\n radius=\"sm\"\n size={theme.fn.size({ size, sizes: SWATCH_SIZES })}\n className={classes.preview}\n />\n )}\n </div>\n </>\n )}\n\n {Array.isArray(swatches) && (\n <Swatches\n data={swatches}\n onSelect={handleChange}\n style={{ marginTop: 5 }}\n swatchesPerRow={swatchesPerRow}\n focusable={focusable}\n classNames={classNames}\n styles={styles}\n __staticSelector={__staticSelector}\n />\n )}\n </Box>\n );\n }\n);\n\nColorPicker.displayName = '@mantine/core/ColorPicker';\n"],"names":[],"mappings":"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"}

package/esm/components/ColorPicker/ColorSlider/ColorSlider.js CHANGED Viewed

@@ -48,7 +48,8 @@ const ColorSlider = forwardRef((_a, ref) => {
     overlays,
     classNames,
     styles,
-    className
+    className,
+    unstyled
   } = _b, others = __objRest(_b, [
     "value",
     "onChange",
@@ -61,9 +62,10 @@ const ColorSlider = forwardRef((_a, ref) => {
     "overlays",
     "classNames",
     "styles",
-    "className"
+    "className",
+    "unstyled"
   ]);
-  const { classes, cx } = useStyles({ size }, { classNames, styles, name: __staticSelector });
+  const { classes, cx } = useStyles({ size }, { classNames, styles, name: __staticSelector, unstyled });
   const [position, setPosition] = useState({ y: 0, x: value / maxValue });
   const getChangeValue = (val) => round ? Math.round(val * maxValue) : val * maxValue;
   const { ref: sliderRef } = useMove(({ x }) => onChange(getChangeValue(x)));
@@ -76,7 +78,7 @@ const ColorSlider = forwardRef((_a, ref) => {
     onChange(getChangeValue(_position.x));
   };
   const handleKeyDown = (event) => {
-    switch (event.nativeEvent.code) {
+    switch (event.key) {
       case "ArrowRight": {
         handleArrow(event, { x: position.x + 0.05, y: position.y });
         break;

package/esm/components/ColorPicker/ColorSlider/ColorSlider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ColorSlider.js","sources":["../../../../src/components/ColorPicker/ColorSlider/ColorSlider.tsx"],"sourcesContent":["import React, { useState, forwardRef } from 'react';\nimport {\n useMove,\n clampUseMovePosition,\n useDidUpdate,\n UseMovePosition,\n useMergedRef,\n} from '@mantine/hooks';\nimport { DefaultProps, MantineSize, Selectors } from '@mantine/styles';\nimport { Box } from '../../Box';\nimport { Thumb, ThumbStylesNames } from '../Thumb/Thumb';\nimport useStyles from './ColorSlider.styles';\n\nexport type ColorSliderStylesNames =\n \| Exclude<Selectors<typeof useStyles>, 'sliderThumb'>\n \| ThumbStylesNames;\n\nexport interface BaseColorSliderProps\n extends DefaultProps<ColorSliderStylesNames>,\n Omit<React.ComponentPropsWithoutRef<'div'>, 'value' \| 'onChange'> {\n value: number;\n onChange(value: number): void;\n size?: MantineSize;\n focusable?: boolean;\n __staticSelector?: string;\n}\n\nexport interface ColorSliderProps extends BaseColorSliderProps {\n maxValue: number;\n overlays: React.CSSProperties[];\n round: boolean;\n thumbColor?: string;\n}\n\nexport const ColorSlider = forwardRef<HTMLDivElement, ColorSliderProps>(\n (\n {\n value,\n onChange,\n maxValue,\n round,\n size = 'md',\n thumbColor = 'transparent',\n __staticSelector = 'ColorSlider',\n focusable = true,\n overlays,\n classNames,\n styles,\n className,\n ...others\n }: ColorSliderProps,\n ref\n ) => {\n const { classes, cx } = useStyles({ size }, { classNames, styles, name: __staticSelector });\n const [position, setPosition] = useState({ y: 0, x: value / maxValue });\n const getChangeValue = (val: number) => (round ? Math.round(val * maxValue) : val * maxValue);\n const { ref: sliderRef } = useMove(({ x }) => onChange(getChangeValue(x)));\n\n useDidUpdate(() => {\n setPosition({ y: 0, x: value / maxValue });\n }, [value]);\n\n const handleArrow = (event: React.KeyboardEvent<HTMLDivElement>, pos: UseMovePosition) => {\n event.preventDefault();\n const _position = clampUseMovePosition(pos);\n onChange(getChangeValue(_position.x));\n };\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n switch (event.~~nativeEvent.code~~) {\n case 'ArrowRight': {\n handleArrow(event, { x: position.x + 0.05, y: position.y });\n break;\n }\n\n case 'ArrowLeft': {\n handleArrow(event, { x: position.x - 0.05, y: position.y });\n break;\n }\n }\n };\n\n const layers = overlays.map((overlay, index) => (\n <div className={classes.sliderOverlay} style={overlay} key={index} />\n ));\n\n return (\n <Box\n {...others}\n ref={useMergedRef(sliderRef, ref)}\n className={cx(classes.slider, className)}\n role=\"slider\"\n aria-valuenow={value}\n aria-valuemax={maxValue}\n aria-valuemin={0}\n tabIndex={focusable ? 0 : -1}\n onKeyDown={handleKeyDown}\n >\n {layers}\n\n <Thumb\n __staticSelector={__staticSelector}\n classNames={classNames}\n styles={styles}\n position={position}\n style={{ top: 1, backgroundColor: thumbColor }}\n className={classes.sliderThumb}\n size={size}\n />\n </Box>\n );\n }\n);\n\nColorSlider.displayName = '@mantine/core/ColorSlider';\n"],"names":[],"mappings":"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~~AAC9F~~,EAAE,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,GAAG,QAAQ,EAAE,CAAC,CAAC;AAC1E,EAAE,MAAM,cAAc,GAAG,CAAC,GAAG,KAAK,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,QAAQ,CAAC,GAAG,GAAG,GAAG,QAAQ,CAAC;AACtF,EAAE,MAAM,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,OAAO,CAAC,CAAC,EAAE,CAAC,EAAE,KAAK,QAAQ,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AAC7E,EAAE,YAAY,CAAC,MAAM;AACrB,IAAI,WAAW,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,GAAG,QAAQ,EAAE,CAAC,CAAC;AAC/C,GAAG,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;AACd,EAAE,MAAM,WAAW,GAAG,CAAC,KAAK,EAAE,GAAG,KAAK;AACtC,IAAI,KAAK,CAAC,cAAc,EAAE,CAAC;AAC3B,IAAI,MAAM,SAAS,GAAG,oBAAoB,CAAC,GAAG,CAAC,CAAC;AAChD,IAAI,QAAQ,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;AAC1C,GAAG,CAAC;AACJ,EAAE,MAAM,aAAa,GAAG,CAAC,KAAK,KAAK;AACnC,IAAI,QAAQ,KAAK,CAAC,~~WAAW,CAAC,IAAI~~;~~AAClC~~,MAAM,KAAK,YAAY,EAAE;AACzB,QAAQ,WAAW,CAAC,KAAK,EAAE,EAAE,CAAC,EAAE,QAAQ,CAAC,CAAC,GAAG,IAAI,EAAE,CAAC,EAAE,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC;AACpE,QAAQ,MAAM;AACd,OAAO;AACP,MAAM,KAAK,WAAW,EAAE;AACxB,QAAQ,WAAW,CAAC,KAAK,EAAE,EAAE,CAAC,EAAE,QAAQ,CAAC,CAAC,GAAG,IAAI,EAAE,CAAC,EAAE,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC;AACpE,QAAQ,MAAM;AACd,OAAO;AACP,KAAK;AACL,GAAG,CAAC;AACJ,EAAE,MAAM,MAAM,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,qBAAqB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AAC7F,IAAI,SAAS,EAAE,OAAO,CAAC,aAAa;AACpC,IAAI,KAAK,EAAE,OAAO;AAClB,IAAI,GAAG,EAAE,KAAK;AACd,GAAG,CAAC,CAAC,CAAC;AACN,EAAE,uBAAuB,KAAK,CAAC,aAAa,CAAC,GAAG,EAAE,aAAa,CAAC,cAAc,CAAC,EAAE,EAAE,MAAM,CAAC,EAAE;AAC5F,IAAI,GAAG,EAAE,YAAY,CAAC,SAAS,EAAE,GAAG,CAAC;AACrC,IAAI,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,MAAM,EAAE,SAAS,CAAC;AAC5C,IAAI,IAAI,EAAE,QAAQ;AAClB,IAAI,eAAe,EAAE,KAAK;AAC1B,IAAI,eAAe,EAAE,QAAQ;AAC7B,IAAI,eAAe,EAAE,CAAC;AACtB,IAAI,QAAQ,EAAE,SAAS,GAAG,CAAC,GAAG,CAAC,CAAC;AAChC,IAAI,SAAS,EAAE,aAAa;AAC5B,GAAG,CAAC,EAAE,MAAM,kBAAkB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AACzD,IAAI,gBAAgB;AACpB,IAAI,UAAU;AACd,IAAI,MAAM;AACV,IAAI,QAAQ;AACZ,IAAI,KAAK,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,eAAe,EAAE,UAAU,EAAE;AAClD,IAAI,SAAS,EAAE,OAAO,CAAC,WAAW;AAClC,IAAI,IAAI;AACR,GAAG,CAAC,CAAC,CAAC;AACN,CAAC,EAAE;AACH,WAAW,CAAC,WAAW,GAAG,2BAA2B;;;;"}
1	+ {"version":3,"file":"ColorSlider.js","sources":["../../../../src/components/ColorPicker/ColorSlider/ColorSlider.tsx"],"sourcesContent":["import React, { useState, forwardRef } from 'react';\nimport {\n useMove,\n clampUseMovePosition,\n useDidUpdate,\n UseMovePosition,\n useMergedRef,\n} from '@mantine/hooks';\nimport { DefaultProps, MantineSize, Selectors } from '@mantine/styles';\nimport { Box } from '../../Box';\nimport { Thumb, ThumbStylesNames } from '../Thumb/Thumb';\nimport useStyles from './ColorSlider.styles';\n\nexport type ColorSliderStylesNames =\n \| Exclude<Selectors<typeof useStyles>, 'sliderThumb'>\n \| ThumbStylesNames;\n\nexport interface BaseColorSliderProps\n extends DefaultProps<ColorSliderStylesNames>,\n Omit<React.ComponentPropsWithoutRef<'div'>, 'value' \| 'onChange'> {\n value: number;\n onChange(value: number): void;\n size?: MantineSize;\n focusable?: boolean;\n __staticSelector?: string;\n}\n\nexport interface ColorSliderProps extends BaseColorSliderProps {\n maxValue: number;\n overlays: React.CSSProperties[];\n round: boolean;\n thumbColor?: string;\n}\n\nexport const ColorSlider = forwardRef<HTMLDivElement, ColorSliderProps>(\n (\n {\n value,\n onChange,\n maxValue,\n round,\n size = 'md',\n thumbColor = 'transparent',\n __staticSelector = 'ColorSlider',\n focusable = true,\n overlays,\n classNames,\n styles,\n className,\n unstyled,\n ...others\n }: ColorSliderProps,\n ref\n ) => {\n const { classes, cx } = useStyles(\n { size },\n { classNames, styles, name: __staticSelector, unstyled }\n );\n const [position, setPosition] = useState({ y: 0, x: value / maxValue });\n const getChangeValue = (val: number) => (round ? Math.round(val * maxValue) : val * maxValue);\n const { ref: sliderRef } = useMove(({ x }) => onChange(getChangeValue(x)));\n\n useDidUpdate(() => {\n setPosition({ y: 0, x: value / maxValue });\n }, [value]);\n\n const handleArrow = (event: React.KeyboardEvent<HTMLDivElement>, pos: UseMovePosition) => {\n event.preventDefault();\n const _position = clampUseMovePosition(pos);\n onChange(getChangeValue(_position.x));\n };\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n switch (event.key) {\n case 'ArrowRight': {\n handleArrow(event, { x: position.x + 0.05, y: position.y });\n break;\n }\n\n case 'ArrowLeft': {\n handleArrow(event, { x: position.x - 0.05, y: position.y });\n break;\n }\n }\n };\n\n const layers = overlays.map((overlay, index) => (\n <div className={classes.sliderOverlay} style={overlay} key={index} />\n ));\n\n return (\n <Box\n {...others}\n ref={useMergedRef(sliderRef, ref)}\n className={cx(classes.slider, className)}\n role=\"slider\"\n aria-valuenow={value}\n aria-valuemax={maxValue}\n aria-valuemin={0}\n tabIndex={focusable ? 0 : -1}\n onKeyDown={handleKeyDown}\n >\n {layers}\n\n <Thumb\n __staticSelector={__staticSelector}\n classNames={classNames}\n styles={styles}\n position={position}\n style={{ top: 1, backgroundColor: thumbColor }}\n className={classes.sliderThumb}\n size={size}\n />\n </Box>\n );\n }\n);\n\nColorSlider.displayName = '@mantine/core/ColorSlider';\n"],"names":[],"mappings":";;;;;;AAAA,IAAI,SAAS,GAAG,MAAM,CAAC,cAAc,CAAC;AACtC,IAAI,UAAU,GAAG,MAAM,CAAC,gBAAgB,CAAC;AACzC,IAAI,iBAAiB,GAAG,MAAM,CAAC,yBAAyB,CAAC;AACzD,IAAI,mBAAmB,GAAG,MAAM,CAAC,qBAAqB,CAAC;AACvD,IAAI,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,cAAc,CAAC;AACnD,IAAI,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,oBAAoB,CAAC;AACzD,IAAI,eAAe,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,KAAK,GAAG,IAAI,GAAG,GAAG,SAAS,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;AAChK,IAAI,cAAc,GAAG,CAAC,CAAC,EAAE,CAAC,KAAK;AAC/B,EAAE,KAAK,IAAI,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC;AAChC,IAAI,IAAI,YAAY,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC;AAClC,MAAM,eAAe,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;AACxC,EAAE,IAAI,mBAAmB;AACzB,IAAI,KAAK,IAAI,IAAI,IAAI,mBAAmB,CAAC,CAAC,CAAC,EAAE;AAC7C,MAAM,IAAI,YAAY,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC;AACpC,QAAQ,eAAe,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;AAC1C,KAAK;AACL,EAAE,OAAO,CAAC,CAAC;AACX,CAAC,CAAC;AACF,IAAI,aAAa,GAAG,CAAC,CAAC,EAAE,CAAC,KAAK,UAAU,CAAC,CAAC,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAC;AAClE,IAAI,SAAS,GAAG,CAAC,MAAM,EAAE,OAAO,KAAK;AACrC,EAAE,IAAI,MAAM,GAAG,EAAE,CAAC;AAClB,EAAE,KAAK,IAAI,IAAI,IAAI,MAAM;AACzB,IAAI,IAAI,YAAY,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;AACpE,MAAM,MAAM,CAAC,IAAI,CAAC,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;AAClC,EAAE,IAAI,MAAM,IAAI,IAAI,IAAI,mBAAmB;AAC3C,IAAI,KAAK,IAAI,IAAI,IAAI,mBAAmB,CAAC,MAAM,CAAC,EAAE;AAClD,MAAM,IAAI,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,YAAY,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC;AACtE,QAAQ,MAAM,CAAC,IAAI,CAAC,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;AACpC,KAAK;AACL,EAAE,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC;AAWU,MAAC,WAAW,GAAG,UAAU,CAAC,CAAC,EAAE,EAAE,GAAG,KAAK;AACnD,EAAE,IAAI,EAAE,GAAG,EAAE,EAAE;AACf,IAAI,KAAK;AACT,IAAI,QAAQ;AACZ,IAAI,QAAQ;AACZ,IAAI,KAAK;AACT,IAAI,IAAI,GAAG,IAAI;AACf,IAAI,UAAU,GAAG,aAAa;AAC9B,IAAI,gBAAgB,GAAG,aAAa;AACpC,IAAI,SAAS,GAAG,IAAI;AACpB,IAAI,QAAQ;AACZ,IAAI,UAAU;AACd,IAAI,MAAM;AACV,IAAI,SAAS;AACb,IAAI,QAAQ;AACZ,GAAG,GAAG,EAAE,EAAE,MAAM,GAAG,SAAS,CAAC,EAAE,EAAE;AACjC,IAAI,OAAO;AACX,IAAI,UAAU;AACd,IAAI,UAAU;AACd,IAAI,OAAO;AACX,IAAI,MAAM;AACV,IAAI,YAAY;AAChB,IAAI,kBAAkB;AACtB,IAAI,WAAW;AACf,IAAI,UAAU;AACd,IAAI,YAAY;AAChB,IAAI,QAAQ;AACZ,IAAI,WAAW;AACf,IAAI,UAAU;AACd,GAAG,CAAC,CAAC;AACL,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,SAAS,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,IAAI,EAAE,gBAAgB,EAAE,QAAQ,EAAE,CAAC,CAAC;AACxG,EAAE,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,GAAG,QAAQ,EAAE,CAAC,CAAC;AAC1E,EAAE,MAAM,cAAc,GAAG,CAAC,GAAG,KAAK,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,QAAQ,CAAC,GAAG,GAAG,GAAG,QAAQ,CAAC;AACtF,EAAE,MAAM,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,OAAO,CAAC,CAAC,EAAE,CAAC,EAAE,KAAK,QAAQ,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AAC7E,EAAE,YAAY,CAAC,MAAM;AACrB,IAAI,WAAW,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,GAAG,QAAQ,EAAE,CAAC,CAAC;AAC/C,GAAG,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;AACd,EAAE,MAAM,WAAW,GAAG,CAAC,KAAK,EAAE,GAAG,KAAK;AACtC,IAAI,KAAK,CAAC,cAAc,EAAE,CAAC;AAC3B,IAAI,MAAM,SAAS,GAAG,oBAAoB,CAAC,GAAG,CAAC,CAAC;AAChD,IAAI,QAAQ,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;AAC1C,GAAG,CAAC;AACJ,EAAE,MAAM,aAAa,GAAG,CAAC,KAAK,KAAK;AACnC,IAAI,QAAQ,KAAK,CAAC,GAAG;AACrB,MAAM,KAAK,YAAY,EAAE;AACzB,QAAQ,WAAW,CAAC,KAAK,EAAE,EAAE,CAAC,EAAE,QAAQ,CAAC,CAAC,GAAG,IAAI,EAAE,CAAC,EAAE,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC;AACpE,QAAQ,MAAM;AACd,OAAO;AACP,MAAM,KAAK,WAAW,EAAE;AACxB,QAAQ,WAAW,CAAC,KAAK,EAAE,EAAE,CAAC,EAAE,QAAQ,CAAC,CAAC,GAAG,IAAI,EAAE,CAAC,EAAE,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC;AACpE,QAAQ,MAAM;AACd,OAAO;AACP,KAAK;AACL,GAAG,CAAC;AACJ,EAAE,MAAM,MAAM,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,qBAAqB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AAC7F,IAAI,SAAS,EAAE,OAAO,CAAC,aAAa;AACpC,IAAI,KAAK,EAAE,OAAO;AAClB,IAAI,GAAG,EAAE,KAAK;AACd,GAAG,CAAC,CAAC,CAAC;AACN,EAAE,uBAAuB,KAAK,CAAC,aAAa,CAAC,GAAG,EAAE,aAAa,CAAC,cAAc,CAAC,EAAE,EAAE,MAAM,CAAC,EAAE;AAC5F,IAAI,GAAG,EAAE,YAAY,CAAC,SAAS,EAAE,GAAG,CAAC;AACrC,IAAI,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,MAAM,EAAE,SAAS,CAAC;AAC5C,IAAI,IAAI,EAAE,QAAQ;AAClB,IAAI,eAAe,EAAE,KAAK;AAC1B,IAAI,eAAe,EAAE,QAAQ;AAC7B,IAAI,eAAe,EAAE,CAAC;AACtB,IAAI,QAAQ,EAAE,SAAS,GAAG,CAAC,GAAG,CAAC,CAAC;AAChC,IAAI,SAAS,EAAE,aAAa;AAC5B,GAAG,CAAC,EAAE,MAAM,kBAAkB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AACzD,IAAI,gBAAgB;AACpB,IAAI,UAAU;AACd,IAAI,MAAM;AACV,IAAI,QAAQ;AACZ,IAAI,KAAK,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,eAAe,EAAE,UAAU,EAAE;AAClD,IAAI,SAAS,EAAE,OAAO,CAAC,WAAW;AAClC,IAAI,IAAI;AACR,GAAG,CAAC,CAAC,CAAC;AACN,CAAC,EAAE;AACH,WAAW,CAAC,WAAW,GAAG,2BAA2B;;;;"}

package/esm/components/ColorPicker/Saturation/Saturation.js CHANGED Viewed

@@ -13,9 +13,10 @@ function Saturation({
   color,
   saturationLabel,
   classNames,
-  styles
+  styles,
+  unstyled
 }) {
-  const { classes } = useStyles({ size }, { classNames, styles, name: __staticSelector });
+  const { classes } = useStyles({ size }, { classNames, styles, name: __staticSelector, unstyled });
   const [position, setPosition] = useState({ x: value.s / 100, y: 1 - value.v / 100 });
   const { ref } = useMove(({ x, y }) => {
     onChange({ s: Math.round(x * 100), v: Math.round((1 - y) * 100) });
@@ -29,7 +30,7 @@ function Saturation({
     onChange({ s: Math.round(_position.x * 100), v: Math.round((1 - _position.y) * 100) });
   };
   const handleKeyDown = (event) => {
-    switch (event.nativeEvent.code) {
+    switch (event.key) {
       case "ArrowUp": {
         handleArrow(event, { y: position.y - 0.05, x: position.x });
         break;

package/esm/components/ColorPicker/Saturation/Saturation.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Saturation.js","sources":["../../../../src/components/ColorPicker/Saturation/Saturation.tsx"],"sourcesContent":["import React, { useState, useEffect } from 'react';\nimport { useMove, clampUseMovePosition, UseMovePosition } from '@mantine/hooks';\nimport { DefaultProps, MantineSize, Selectors } from '@mantine/styles';\nimport { HsvaColor } from '../types';\nimport { Thumb, ThumbStylesNames } from '../Thumb/Thumb';\nimport useStyles from './Saturation.styles';\nimport { convertHsvaTo } from '../converters';\n\nexport type SaturationStylesNames =\n \| Exclude<Selectors<typeof useStyles>, 'saturationOverlay' \| 'saturationThumb'>\n \| ThumbStylesNames;\n\ninterface SaturationProps extends DefaultProps<SaturationStylesNames> {\n value: HsvaColor;\n onChange(color: Partial<HsvaColor>): void;\n saturationLabel?: string;\n size: MantineSize;\n color: string;\n focusable?: boolean;\n __staticSelector?: string;\n}\n\nexport function Saturation({\n value,\n onChange,\n focusable = true,\n __staticSelector = 'saturation',\n size,\n color,\n saturationLabel,\n classNames,\n styles,\n}: SaturationProps) {\n const { classes } = useStyles({ size }, { classNames, styles, name: __staticSelector });\n const [position, setPosition] = useState({ x: value.s / 100, y: 1 - value.v / 100 });\n\n const { ref } = useMove(({ x, y }) => {\n onChange({ s: Math.round(x * 100), v: Math.round((1 - y) * 100) });\n });\n\n useEffect(() => {\n setPosition({ x: value.s / 100, y: 1 - value.v / 100 });\n }, [value.s, value.v]);\n\n const handleArrow = (event: React.KeyboardEvent<HTMLDivElement>, pos: UseMovePosition) => {\n event.preventDefault();\n const _position = clampUseMovePosition(pos);\n onChange({ s: Math.round(_position.x * 100), v: Math.round((1 - _position.y) * 100) });\n };\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n switch (event.~~nativeEvent.code~~) {\n case 'ArrowUp': {\n handleArrow(event, { y: position.y - 0.05, x: position.x });\n break;\n }\n\n case 'ArrowDown': {\n handleArrow(event, { y: position.y + 0.05, x: position.x });\n break;\n }\n\n case 'ArrowRight': {\n handleArrow(event, { x: position.x + 0.05, y: position.y });\n break;\n }\n\n case 'ArrowLeft': {\n handleArrow(event, { x: position.x - 0.05, y: position.y });\n break;\n }\n }\n };\n\n return (\n <div\n className={classes.saturation}\n ref={ref}\n role=\"slider\"\n aria-label={saturationLabel}\n aria-valuenow={position.x}\n aria-valuetext={convertHsvaTo('rgba', value)}\n tabIndex={focusable ? 0 : -1}\n onKeyDown={handleKeyDown}\n >\n <div\n className={classes.saturationOverlay}\n style={{ backgroundColor: `hsl(${value.h}, 100%, 50%)` }}\n />\n\n <div\n className={classes.saturationOverlay}\n style={{ backgroundImage: 'linear-gradient(90deg, #fff, transparent)' }}\n />\n\n <div\n className={classes.saturationOverlay}\n style={{ backgroundImage: 'linear-gradient(0deg, #000, transparent)' }}\n />\n\n <Thumb\n __staticSelector={__staticSelector}\n classNames={classNames}\n styles={styles}\n position={position}\n className={classes.saturationThumb}\n style={{ backgroundColor: color }}\n size={size}\n />\n </div>\n );\n}\n\nSaturation.displayName = '@mantine/core/Saturation';\n"],"names":[],"mappings":";;;;;;AAKO,SAAS,UAAU,CAAC;AAC3B,EAAE,KAAK;AACP,EAAE,QAAQ;AACV,EAAE,SAAS,GAAG,IAAI;AAClB,EAAE,gBAAgB,GAAG,YAAY;AACjC,EAAE,IAAI;AACN,EAAE,KAAK;AACP,EAAE,eAAe;AACjB,EAAE,UAAU;AACZ,EAAE,MAAM;AACR,CAAC,EAAE;AACH,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,SAAS,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,IAAI,EAAE,gBAAgB,EAAE,CAAC,CAAC;~~AAC1F~~,EAAE,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,EAAE,KAAK,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,CAAC;AACvF,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,OAAO,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK;AACxC,IAAI,QAAQ,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,GAAG,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,GAAG,CAAC,EAAE,CAAC,CAAC;AACvE,GAAG,CAAC,CAAC;AACL,EAAE,SAAS,CAAC,MAAM;AAClB,IAAI,WAAW,CAAC,EAAE,CAAC,EAAE,KAAK,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,CAAC;AAC5D,GAAG,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;AACzB,EAAE,MAAM,WAAW,GAAG,CAAC,KAAK,EAAE,GAAG,KAAK;AACtC,IAAI,KAAK,CAAC,cAAc,EAAE,CAAC;AAC3B,IAAI,MAAM,SAAS,GAAG,oBAAoB,CAAC,GAAG,CAAC,CAAC;AAChD,IAAI,QAAQ,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,GAAG,GAAG,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC,CAAC,IAAI,GAAG,CAAC,EAAE,CAAC,CAAC;AAC3F,GAAG,CAAC;AACJ,EAAE,MAAM,aAAa,GAAG,CAAC,KAAK,KAAK;AACnC,IAAI,QAAQ,KAAK,CAAC,~~WAAW,CAAC,IAAI~~;~~AAClC~~,MAAM,KAAK,SAAS,EAAE;AACtB,QAAQ,WAAW,CAAC,KAAK,EAAE,EAAE,CAAC,EAAE,QAAQ,CAAC,CAAC,GAAG,IAAI,EAAE,CAAC,EAAE,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC;AACpE,QAAQ,MAAM;AACd,OAAO;AACP,MAAM,KAAK,WAAW,EAAE;AACxB,QAAQ,WAAW,CAAC,KAAK,EAAE,EAAE,CAAC,EAAE,QAAQ,CAAC,CAAC,GAAG,IAAI,EAAE,CAAC,EAAE,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC;AACpE,QAAQ,MAAM;AACd,OAAO;AACP,MAAM,KAAK,YAAY,EAAE;AACzB,QAAQ,WAAW,CAAC,KAAK,EAAE,EAAE,CAAC,EAAE,QAAQ,CAAC,CAAC,GAAG,IAAI,EAAE,CAAC,EAAE,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC;AACpE,QAAQ,MAAM;AACd,OAAO;AACP,MAAM,KAAK,WAAW,EAAE;AACxB,QAAQ,WAAW,CAAC,KAAK,EAAE,EAAE,CAAC,EAAE,QAAQ,CAAC,CAAC,GAAG,IAAI,EAAE,CAAC,EAAE,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC;AACpE,QAAQ,MAAM;AACd,OAAO;AACP,KAAK;AACL,GAAG,CAAC;AACJ,EAAE,uBAAuB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AACpD,IAAI,SAAS,EAAE,OAAO,CAAC,UAAU;AACjC,IAAI,GAAG;AACP,IAAI,IAAI,EAAE,QAAQ;AAClB,IAAI,YAAY,EAAE,eAAe;AACjC,IAAI,eAAe,EAAE,QAAQ,CAAC,CAAC;AAC/B,IAAI,gBAAgB,EAAE,aAAa,CAAC,MAAM,EAAE,KAAK,CAAC;AAClD,IAAI,QAAQ,EAAE,SAAS,GAAG,CAAC,GAAG,CAAC,CAAC;AAChC,IAAI,SAAS,EAAE,aAAa;AAC5B,GAAG,kBAAkB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AAChD,IAAI,SAAS,EAAE,OAAO,CAAC,iBAAiB;AACxC,IAAI,KAAK,EAAE,EAAE,eAAe,EAAE,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,YAAY,CAAC,EAAE;AAC5D,GAAG,CAAC,kBAAkB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AACjD,IAAI,SAAS,EAAE,OAAO,CAAC,iBAAiB;AACxC,IAAI,KAAK,EAAE,EAAE,eAAe,EAAE,2CAA2C,EAAE;AAC3E,GAAG,CAAC,kBAAkB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AACjD,IAAI,SAAS,EAAE,OAAO,CAAC,iBAAiB;AACxC,IAAI,KAAK,EAAE,EAAE,eAAe,EAAE,0CAA0C,EAAE;AAC1E,GAAG,CAAC,kBAAkB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AACjD,IAAI,gBAAgB;AACpB,IAAI,UAAU;AACd,IAAI,MAAM;AACV,IAAI,QAAQ;AACZ,IAAI,SAAS,EAAE,OAAO,CAAC,eAAe;AACtC,IAAI,KAAK,EAAE,EAAE,eAAe,EAAE,KAAK,EAAE;AACrC,IAAI,IAAI;AACR,GAAG,CAAC,CAAC,CAAC;AACN,CAAC;AACD,UAAU,CAAC,WAAW,GAAG,0BAA0B;;;;"}
1	+ {"version":3,"file":"Saturation.js","sources":["../../../../src/components/ColorPicker/Saturation/Saturation.tsx"],"sourcesContent":["import React, { useState, useEffect } from 'react';\nimport { useMove, clampUseMovePosition, UseMovePosition } from '@mantine/hooks';\nimport { DefaultProps, MantineSize, Selectors } from '@mantine/styles';\nimport { HsvaColor } from '../types';\nimport { Thumb, ThumbStylesNames } from '../Thumb/Thumb';\nimport useStyles from './Saturation.styles';\nimport { convertHsvaTo } from '../converters';\n\nexport type SaturationStylesNames =\n \| Exclude<Selectors<typeof useStyles>, 'saturationOverlay' \| 'saturationThumb'>\n \| ThumbStylesNames;\n\ninterface SaturationProps extends DefaultProps<SaturationStylesNames> {\n value: HsvaColor;\n onChange(color: Partial<HsvaColor>): void;\n saturationLabel?: string;\n size: MantineSize;\n color: string;\n focusable?: boolean;\n __staticSelector?: string;\n}\n\nexport function Saturation({\n value,\n onChange,\n focusable = true,\n __staticSelector = 'saturation',\n size,\n color,\n saturationLabel,\n classNames,\n styles,\n unstyled,\n}: SaturationProps) {\n const { classes } = useStyles({ size }, { classNames, styles, name: __staticSelector, unstyled });\n const [position, setPosition] = useState({ x: value.s / 100, y: 1 - value.v / 100 });\n\n const { ref } = useMove(({ x, y }) => {\n onChange({ s: Math.round(x * 100), v: Math.round((1 - y) * 100) });\n });\n\n useEffect(() => {\n setPosition({ x: value.s / 100, y: 1 - value.v / 100 });\n }, [value.s, value.v]);\n\n const handleArrow = (event: React.KeyboardEvent<HTMLDivElement>, pos: UseMovePosition) => {\n event.preventDefault();\n const _position = clampUseMovePosition(pos);\n onChange({ s: Math.round(_position.x * 100), v: Math.round((1 - _position.y) * 100) });\n };\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n switch (event.key) {\n case 'ArrowUp': {\n handleArrow(event, { y: position.y - 0.05, x: position.x });\n break;\n }\n\n case 'ArrowDown': {\n handleArrow(event, { y: position.y + 0.05, x: position.x });\n break;\n }\n\n case 'ArrowRight': {\n handleArrow(event, { x: position.x + 0.05, y: position.y });\n break;\n }\n\n case 'ArrowLeft': {\n handleArrow(event, { x: position.x - 0.05, y: position.y });\n break;\n }\n }\n };\n\n return (\n <div\n className={classes.saturation}\n ref={ref}\n role=\"slider\"\n aria-label={saturationLabel}\n aria-valuenow={position.x}\n aria-valuetext={convertHsvaTo('rgba', value)}\n tabIndex={focusable ? 0 : -1}\n onKeyDown={handleKeyDown}\n >\n <div\n className={classes.saturationOverlay}\n style={{ backgroundColor: `hsl(${value.h}, 100%, 50%)` }}\n />\n\n <div\n className={classes.saturationOverlay}\n style={{ backgroundImage: 'linear-gradient(90deg, #fff, transparent)' }}\n />\n\n <div\n className={classes.saturationOverlay}\n style={{ backgroundImage: 'linear-gradient(0deg, #000, transparent)' }}\n />\n\n <Thumb\n __staticSelector={__staticSelector}\n classNames={classNames}\n styles={styles}\n position={position}\n className={classes.saturationThumb}\n style={{ backgroundColor: color }}\n size={size}\n />\n </div>\n );\n}\n\nSaturation.displayName = '@mantine/core/Saturation';\n"],"names":[],"mappings":"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"}

package/esm/components/ColorPicker/Swatches/Swatches.js CHANGED Viewed

@@ -39,7 +39,8 @@ function Swatches(_a) {
     focusable = true,
     classNames,
     styles,
-    __staticSelector = "color-picker"
+    __staticSelector = "color-picker",
+    unstyled
   } = _b, others = __objRest(_b, [
     "data",
     "onSelect",
@@ -47,9 +48,10 @@ function Swatches(_a) {
     "focusable",
     "classNames",
     "styles",
-    "__staticSelector"
+    "__staticSelector",
+    "unstyled"
   ]);
-  const { classes } = useStyles({ swatchesPerRow }, { classNames, styles, name: __staticSelector });
+  const { classes } = useStyles({ swatchesPerRow }, { classNames, styles, name: __staticSelector, unstyled });
   const colors = data.map((color, index) => /* @__PURE__ */ React.createElement(ColorSwatch, {
     className: classes.swatch,
     component: "button",

package/esm/components/ColorPicker/Swatches/Swatches.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Swatches.js","sources":["../../../../src/components/ColorPicker/Swatches/Swatches.tsx"],"sourcesContent":["import React from 'react';\nimport { DefaultProps, Selectors } from '@mantine/styles';\nimport { ColorSwatch } from '../../ColorSwatch/ColorSwatch';\nimport { parseColor } from '../converters/parsers';\nimport { HsvaColor } from '../types';\nimport useStyles from './Swatches.styles';\n\nexport type SwatchesStylesNames = Selectors<typeof useStyles>;\n\nexport interface SwatchesProps\n extends DefaultProps<SwatchesStylesNames>,\n Omit<React.ComponentPropsWithoutRef<'div'>, 'onSelect'> {\n data: string[];\n onSelect(color: HsvaColor): void;\n swatchesPerRow?: number;\n focusable?: boolean;\n __staticSelector?: string;\n}\n\nexport function Swatches({\n data,\n onSelect,\n swatchesPerRow = 10,\n focusable = true,\n classNames,\n styles,\n __staticSelector = 'color-picker',\n ...others\n}: SwatchesProps) {\n const { classes } = useStyles({ swatchesPerRow }, { classNames, styles, name: __staticSelector });\n\n const colors = data.map((color, index) => (\n <ColorSwatch\n className={classes.swatch}\n component=\"button\"\n type=\"button\"\n color={color}\n key={index}\n radius=\"sm\"\n onClick={() => onSelect(parseColor(color))}\n style={{ cursor: 'pointer' }}\n aria-label={color}\n tabIndex={focusable ? 0 : -1}\n />\n ));\n\n return (\n <div className={classes.swatches} {...others}>\n {colors}\n </div>\n );\n}\n\nSwatches.displayName = '@mantine/core/Swatches';\n"],"names":[],"mappings":"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~~AACpG~~,EAAE,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,qBAAqB,KAAK,CAAC,aAAa,CAAC,WAAW,EAAE;AAC7F,IAAI,SAAS,EAAE,OAAO,CAAC,MAAM;AAC7B,IAAI,SAAS,EAAE,QAAQ;AACvB,IAAI,IAAI,EAAE,QAAQ;AAClB,IAAI,KAAK;AACT,IAAI,GAAG,EAAE,KAAK;AACd,IAAI,MAAM,EAAE,IAAI;AAChB,IAAI,OAAO,EAAE,MAAM,QAAQ,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;AAC9C,IAAI,KAAK,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE;AAChC,IAAI,YAAY,EAAE,KAAK;AACvB,IAAI,QAAQ,EAAE,SAAS,GAAG,CAAC,GAAG,CAAC,CAAC;AAChC,GAAG,CAAC,CAAC,CAAC;AACN,EAAE,uBAAuB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC;AACnE,IAAI,SAAS,EAAE,OAAO,CAAC,QAAQ;AAC/B,GAAG,EAAE,MAAM,CAAC,EAAE,MAAM,CAAC,CAAC;AACtB,CAAC;AACD,QAAQ,CAAC,WAAW,GAAG,wBAAwB;;;;"}
1	+ {"version":3,"file":"Swatches.js","sources":["../../../../src/components/ColorPicker/Swatches/Swatches.tsx"],"sourcesContent":["import React from 'react';\nimport { DefaultProps, Selectors } from '@mantine/styles';\nimport { ColorSwatch } from '../../ColorSwatch/ColorSwatch';\nimport { parseColor } from '../converters/parsers';\nimport { HsvaColor } from '../types';\nimport useStyles from './Swatches.styles';\n\nexport type SwatchesStylesNames = Selectors<typeof useStyles>;\n\nexport interface SwatchesProps\n extends DefaultProps<SwatchesStylesNames>,\n Omit<React.ComponentPropsWithoutRef<'div'>, 'onSelect'> {\n data: string[];\n onSelect(color: HsvaColor): void;\n swatchesPerRow?: number;\n focusable?: boolean;\n __staticSelector?: string;\n}\n\nexport function Swatches({\n data,\n onSelect,\n swatchesPerRow = 10,\n focusable = true,\n classNames,\n styles,\n __staticSelector = 'color-picker',\n unstyled,\n ...others\n}: SwatchesProps) {\n const { classes } = useStyles(\n { swatchesPerRow },\n { classNames, styles, name: __staticSelector, unstyled }\n );\n\n const colors = data.map((color, index) => (\n <ColorSwatch\n className={classes.swatch}\n component=\"button\"\n type=\"button\"\n color={color}\n key={index}\n radius=\"sm\"\n onClick={() => onSelect(parseColor(color))}\n style={{ cursor: 'pointer' }}\n aria-label={color}\n tabIndex={focusable ? 0 : -1}\n />\n ));\n\n return (\n <div className={classes.swatches} {...others}>\n {colors}\n </div>\n );\n}\n\nSwatches.displayName = '@mantine/core/Swatches';\n"],"names":[],"mappings":"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"}