@evergis/uilib-gl 1.0.122 → 1.0.124

package/dist/molecules/ColorInput/types.d.ts

@@ -2,5 +2,6 @@ import { Color } from "@evergis/color";
 import { IMaskedComponentProps } from "../Input";
 export interface IColorInputProps extends Omit<IMaskedComponentProps, "onChange" | "value"> {
     value: Color;
+    withAlpha?: boolean;
     onChange?: (value: Color) => void;
 }

package/dist/organisms/ColorPicker/types.d.ts

@@ -27,6 +27,7 @@ export interface IColorPickerProps extends Omit<IColorButtonProps, "value" | "on
     root?: HTMLElement | null;
     small?: boolean;
     withHex?: boolean;
+    withOpacity?: boolean;
 }
 export interface IColorPickerHSVA {
     h: number;

package/dist/uilib-gl.esm.js

@@ -14090,13 +14090,14 @@ const TextButton = /*#__PURE__*/styled(IconButtonButton)`
 const ColorInputComponent = _ref => {
   let {
     value,
+    withAlpha = true,
     onChange,
     ...props
   } = _ref;
   const inputRef = useRef(null);
   const [hexMode, setHexMode] = useState(false);
   const [focused, setFocused] = useState(false);
-  const text = hexMode ? "HEX #" : "RGBA";
+  const text = hexMode ? "HEX #" : withAlpha ? "RGBA" : "RGB";
   const formatting = useMemo(() => {
     var _inputRef$current;
 
@@ -14111,11 +14112,11 @@ const ColorInputComponent = _ref => {
 
       const alpha = value.toString("hex").slice(-2);
       const hex = value.toString("hex").slice(1, 7);
-      return hexMode ? hex + alpha : `${r}, ${g}, ${b}, ${Math.round(a / 255 * 100) / 100}`;
+      return hexMode ? withAlpha ? hex + alpha : hex : withAlpha ? `${r}, ${g}, ${b}, ${Math.round(a / 255 * 100) / 100}` : `${r}, ${g}, ${b}`;
     }
 
     return (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.value;
-  }, [focused, hexMode, value]);
+  }, [focused, hexMode, value, withAlpha]);
   const onRGBAChange = useCallback(newValue => {
     const [channel1, channel2, channel3, alpha] = newValue.split(",");
     const newColor = new Color(`rgba(
@@ -18243,6 +18244,7 @@ const ColorPickerComponent = _ref => {
     root,
     small,
     withHex,
+    withOpacity = true,
     ...props
   } = _ref;
   const [isOpen, setIsOpen] = useState(false);
@@ -18293,7 +18295,7 @@ const ColorPickerComponent = _ref => {
     const newColor = new Color(currentColor.toString());
     newColor.setHsv(value.h || h, value.s || s, value.v || v);
 
-    if (value.a !== void 0) {
+    if (value.a !== undefined) {
       newColor.a = Math.round(value.a * 255);
     }
 
@@ -18310,7 +18312,15 @@ const ColorPickerComponent = _ref => {
       updateColorPart(value);
     }
   }, [updateColorPart, updateState]);
-  const colorVariants = useMemo(() => colors || colorsHistory.map(stringColor => new Color(stringColor)), [colors, colorsHistory]);
+  const colorVariants = useMemo(() => {
+    return [...(colors || colorsHistory.map(stringColor => new Color(stringColor)))].map(color => {
+      if (!withOpacity) {
+        color.a = 255;
+      }
+
+      return color;
+    });
+  }, [colors, withOpacity, colorsHistory]);
   useEffect(() => {
     const newColor = new Color(value == null ? void 0 : value.toString());
     const colorsHistory = window.localStorage.getItem(COLORS_HISTORY_STORAGE_ITEM);
@@ -18336,7 +18346,9 @@ const ColorPickerComponent = _ref => {
     setIsOpen(false);
   }, [addCurrentColorToHistory, currentColor, onChangeProp]);
   useEffect(() => {
-    if (prevIsOpen.current === isOpen) return;
+    if (prevIsOpen.current === isOpen) {
+      return;
+    }
 
     if (!prevIsOpen.current && isOpen) {
       setColorsHistory(getColorsHistory());
@@ -18396,7 +18408,7 @@ const ColorPickerComponent = _ref => {
     onChange: hue => onChange({
       h: hue
     })
-  }), React.createElement(OpacitySlider$1, {
+  }), withOpacity && React.createElement(OpacitySlider$1, {
     color: currentColor,
     value: a,
     onChange: alpha => onChange({
@@ -18404,16 +18416,20 @@ const ColorPickerComponent = _ref => {
     })
   }), colorVariants && colorVariants.length > 0 && React.createElement(Flex, {
     gap: "0.25rem",
-    mb: "1rem"
-  }, colorVariants.map((color, index) => index < COLORS_HISTORY_LIMIT && React.createElement(FlexSpan, {
-    key: `color-btn-${index}-${color.toString()}`
-  }, React.createElement(ColorButton, {
-    color: color.toString(),
-    onClick: () => onChange(color),
-    className: "color-variants-button"
-  })))), React.createElement(ColorInput, {
+    mb: "1rem",
+    mt: withOpacity ? undefined : "0.75rem"
+  }, colorVariants.map((color, index) => {
+    return index < COLORS_HISTORY_LIMIT && React.createElement(FlexSpan, {
+      key: `color-btn-${index}-${color.toString()}`
+    }, React.createElement(ColorButton, {
+      color: color.toString(),
+      onClick: () => onChange(color),
+      className: "color-variants-button"
+    }));
+  })), React.createElement(ColorInput, {
     value: currentColor,
-    onChange: onChange
+    onChange: onChange,
+    withAlpha: withOpacity
   }), withSave && React.createElement(ApplyButtonsContainer, null, React.createElement(IconButton, {
     kind: "close",
     error: true,