@wavemaker/react-runtime 11.14.1-16.6404

package/components/input/color-picker/index.js

@@ -0,0 +1,678 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.WmColorPicker = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactColor = require("react-color");
+var _clsx = _interopRequireDefault(require("clsx"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _input = require("@base-ui-components/react/input");
+var _styles = require("@mui/material/styles");
+var _withBaseWrapper = require("@wavemaker/react-runtime/higherOrder/withBaseWrapper");
+var _withFormController = _interopRequireDefault(require("@wavemaker/react-runtime/components/data/form/form-controller/withFormController"));
+var _excluded = ["datavalue", "placeholder", "readonly", "disabled", "required", "name", "shortcutkey", "tabindex", "className", "autoclose", "arialabel", "onDoubleClick", "onMouseEnter", "onMouseLeave", "onFocus", "onBlur", "onClick", "onKeydown", "onKeyup", "onChange", "listener"];
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
+var __jsx = _react["default"].createElement;
+// Constants
+var AUTOCLOSE_TYPE = {
+  ALWAYS: "always",
+  OUTSIDECLICK: "outsideClick",
+  NEVER: "disabled"
+};
+var DEFAULT_CLASS = "input-group app-colorpicker";
+var PICKER_HEIGHT = 320;
+var PICKER_WIDTH = 226;
+var POSITION_DELAY = 100;
+
+// Styled Components
+var StyledColorPicker = (0, _styles.styled)(_Box["default"])(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    position: "absolute",
+    zIndex: 1300,
+    marginTop: theme.spacing(1),
+    left: 0,
+    top: "115%",
+    "&::before": {
+      content: '""',
+      position: "absolute",
+      top: "-20px",
+      left: "8px",
+      width: 0,
+      height: 0,
+      borderStyle: "solid",
+      borderWidth: "10px 5px",
+      borderColor: "rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #777 rgba(0, 0, 0, 0)",
+      zIndex: 999999
+    },
+    "& .chrome-picker": {
+      boxShadow: "0 2px 15px rgba(0,0,0,0.12), 0 2px 10px rgba(0,0,0,0.16) !important",
+      height: "auto",
+      border: "#777 solid 1px",
+      cursor: "default",
+      userSelect: "none",
+      backgroundColor: "#fff",
+      borderRadius: "4px",
+      padding: "8px",
+      width: "".concat(PICKER_WIDTH, "px !important"),
+      boxSizing: "border-box !important"
+    }
+  };
+});
+
+// Utility Functions
+var isValidHexColor = function isValidHexColor(hex) {
+  return /^#([0-9A-F]{3}){1,2}$/i.test(hex);
+};
+var isValidRgbaColor = function isValidRgbaColor(rgba) {
+  return /^rgba\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*,\s*[\d.]+\s*\)$/.test(rgba);
+};
+var isValidRgbColor = function isValidRgbColor(rgb) {
+  return /^rgb\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*\)$/.test(rgb);
+};
+var isValidNamedColor = function isValidNamedColor(color) {
+  var tempElem = document.createElement("div");
+  tempElem.style.color = "";
+  document.body.appendChild(tempElem);
+  var defaultColor = getComputedStyle(tempElem).color;
+  tempElem.style.color = color;
+  var computedColor = getComputedStyle(tempElem).color;
+  document.body.removeChild(tempElem);
+
+  // If color didn’t change, it's invalid
+  return computedColor !== defaultColor;
+};
+var hexToRgba = function hexToRgba(colorString) {
+  var defaultColor = {
+    r: 0,
+    g: 0,
+    b: 0,
+    a: 0
+  };
+  if (!colorString || colorString === "") {
+    return defaultColor;
+  }
+
+  //Handle RGB format
+  var rgbMatch = colorString.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
+  if (rgbMatch) {
+    return {
+      r: parseInt(rgbMatch[1], 10),
+      g: parseInt(rgbMatch[2], 10),
+      b: parseInt(rgbMatch[3], 10)
+    };
+  }
+
+  // Handle RGBA format
+  var rgbaMatch = colorString.match(/rgba\((\d+),\s*(\d+),\s*(\d+),\s*([\d.]+)\)/);
+  if (rgbaMatch) {
+    return {
+      r: parseInt(rgbaMatch[1], 10),
+      g: parseInt(rgbaMatch[2], 10),
+      b: parseInt(rgbaMatch[3], 10),
+      a: parseFloat(rgbaMatch[4])
+    };
+  }
+  if (isValidNamedColor(colorString)) {
+    return getNamedColorRgba(colorString) || defaultColor;
+  }
+
+  // Handle HEX format
+  var hex = colorString.replace("#", "");
+  var r = 0,
+    g = 0,
+    b = 0,
+    a = 1;
+  if (hex.length === 3) {
+    r = parseInt(hex.charAt(0).repeat(2), 16);
+    g = parseInt(hex.charAt(1).repeat(2), 16);
+    b = parseInt(hex.charAt(2).repeat(2), 16);
+  } else if (hex.length >= 6) {
+    r = parseInt(hex.substring(0, 2), 16);
+    g = parseInt(hex.substring(2, 4), 16);
+    b = parseInt(hex.substring(4, 6), 16);
+    if (hex.length === 8) {
+      a = parseInt(hex.substring(6, 8), 16) / 255;
+    }
+  }
+  return {
+    r: r,
+    g: g,
+    b: b,
+    a: a
+  };
+};
+var rgbaToHex = function rgbaToHex(color) {
+  var toHex = function toHex(value) {
+    return Math.round(value).toString(16).padStart(2, "0");
+  };
+  var r = toHex(color.r);
+  var g = toHex(color.g);
+  var b = toHex(color.b);
+  if (color.a === 1) {
+    return "#".concat(r).concat(g).concat(b);
+  }
+  var a = toHex(color.a * 255);
+  return "#".concat(r).concat(g).concat(b).concat(a);
+};
+var rgbaToString = function rgbaToString(color) {
+  if (color.a === undefined) {
+    return "rgba(".concat(color.r, ",").concat(color.g, ",").concat(color.b, ",1)");
+  }
+  return "rgba(".concat(color.r, ",").concat(color.g, ",").concat(color.b, ",").concat(color.a, ")");
+};
+var rgbToString = function rgbToString(color) {
+  return "rgb(".concat(color.r, ",").concat(color.g, ",").concat(color.b, ")");
+};
+
+// get RGBA value from named color
+var getNamedColorRgba = function getNamedColorRgba(colorName) {
+  var tempElem = document.createElement("div");
+  tempElem.style.display = "none"; // hide element
+  document.body.appendChild(tempElem);
+
+  // Get default computed color before setting the name
+  var defaultColor = getComputedStyle(tempElem).color;
+  tempElem.style.color = colorName;
+  var computedColor = getComputedStyle(tempElem).color;
+  document.body.removeChild(tempElem);
+
+  // If color didn’t change, it's invalid
+  if (computedColor === defaultColor) {
+    return null;
+  }
+
+  // Parse the valid computed color
+  var rgbaMatch = computedColor.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/);
+  if (rgbaMatch) {
+    return {
+      r: parseInt(rgbaMatch[1], 10),
+      g: parseInt(rgbaMatch[2], 10),
+      b: parseInt(rgbaMatch[3], 10),
+      a: rgbaMatch[4] !== undefined ? parseFloat(rgbaMatch[4]) : 1
+    };
+  }
+  return {
+    r: 255,
+    g: 255,
+    b: 255,
+    a: 1
+  };
+};
+
+// Custom Hooks
+var useColorValue = function useColorValue(initialValue) {
+  var _useState = (0, _react.useState)(function () {
+      return initialValue ? hexToRgba(initialValue) : {
+        r: 255,
+        g: 255,
+        b: 255,
+        a: 1
+      };
+    }),
+    colorValue = _useState[0],
+    setColorValue = _useState[1];
+  var _useState2 = (0, _react.useState)(initialValue || ""),
+    inputValue = _useState2[0],
+    setInputValue = _useState2[1];
+  return {
+    colorValue: colorValue,
+    setColorValue: setColorValue,
+    inputValue: inputValue,
+    setInputValue: setInputValue
+  };
+};
+var usePickerPosition = function usePickerPosition() {
+  var _useState3 = (0, _react.useState)({
+      top: "115%",
+      left: 0
+    }),
+    position = _useState3[0],
+    setPosition = _useState3[1];
+  var calculatePosition = (0, _react.useCallback)(function (containerElement) {
+    if (!containerElement) {
+      return {
+        top: "115%",
+        left: 0
+      };
+    }
+    var rect = containerElement.getBoundingClientRect();
+    var viewportHeight = window.innerHeight;
+    var spaceBelow = viewportHeight - rect.bottom;
+    return spaceBelow < PICKER_HEIGHT ? {
+      top: -330,
+      left: 0
+    } : {
+      top: "115%",
+      left: 0
+    };
+  }, []);
+  return {
+    position: position,
+    setPosition: setPosition,
+    calculatePosition: calculatePosition
+  };
+};
+
+// Main Component
+var WmColorPicker = exports.WmColorPicker = /*#__PURE__*/(0, _react.memo)(function (props) {
+  var datavalue = props.datavalue,
+    _props$placeholder = props.placeholder,
+    placeholder = _props$placeholder === void 0 ? "Select Color" : _props$placeholder,
+    _props$readonly = props.readonly,
+    readonly = _props$readonly === void 0 ? false : _props$readonly,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? false : _props$disabled,
+    _props$required = props.required,
+    required = _props$required === void 0 ? false : _props$required,
+    name = props.name,
+    shortcutkey = props.shortcutkey,
+    _props$tabindex = props.tabindex,
+    tabindex = _props$tabindex === void 0 ? 0 : _props$tabindex,
+    className = props.className,
+    _props$autoclose = props.autoclose,
+    autoclose = _props$autoclose === void 0 ? AUTOCLOSE_TYPE.OUTSIDECLICK : _props$autoclose,
+    arialabel = props.arialabel,
+    onDoubleClick = props.onDoubleClick,
+    _onMouseEnter = props.onMouseEnter,
+    _onMouseLeave = props.onMouseLeave,
+    onFocus = props.onFocus,
+    onBlur = props.onBlur,
+    onClick = props.onClick,
+    onKeydown = props.onKeydown,
+    onKeyup = props.onKeyup,
+    onChange = props.onChange,
+    listener = props.listener,
+    restProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
+
+  // Refs
+  var inputRef = (0, _react.useRef)(null);
+  var pickerRef = (0, _react.useRef)(null);
+  var containerRef = (0, _react.useRef)(null);
+
+  // State
+  var _useState4 = (0, _react.useState)(false),
+    isOpen = _useState4[0],
+    setIsOpen = _useState4[1];
+  var _useState5 = (0, _react.useState)(false),
+    isInteractingWithPicker = _useState5[0],
+    setIsInteractingWithPicker = _useState5[1];
+  var _useState6 = (0, _react.useState)(""),
+    prevValue = _useState6[0],
+    setPrevValue = _useState6[1];
+  var _useState7 = (0, _react.useState)(placeholder),
+    getPlaceholder = _useState7[0],
+    setPlaceholder = _useState7[1];
+
+  // Custom hooks
+  var _useColorValue = useColorValue(datavalue),
+    colorValue = _useColorValue.colorValue,
+    setColorValue = _useColorValue.setColorValue,
+    inputValue = _useColorValue.inputValue,
+    setInputValue = _useColorValue.setInputValue;
+  var _usePickerPosition = usePickerPosition(),
+    pickerPosition = _usePickerPosition.position,
+    setPickerPosition = _usePickerPosition.setPosition,
+    calculatePosition = _usePickerPosition.calculatePosition;
+
+  // Computed values
+  var shouldCloseOnOutsideClick = autoclose === AUTOCLOSE_TYPE.OUTSIDECLICK || autoclose === AUTOCLOSE_TYPE.ALWAYS;
+  var isReadonlyOrDisabled = readonly || disabled;
+  var openPicker = (0, _react.useCallback)(function () {
+    if (!isReadonlyOrDisabled && !isOpen) {
+      setPickerPosition(calculatePosition(containerRef.current));
+      setIsOpen(true);
+    }
+  }, [isReadonlyOrDisabled, isOpen, calculatePosition, setPickerPosition]);
+  var closePicker = (0, _react.useCallback)(function () {
+    if (isOpen && !isInteractingWithPicker) {
+      setIsOpen(false);
+    }
+  }, [isOpen, isInteractingWithPicker]);
+  var validateAndSetColor = (0, _react.useCallback)(function (value) {
+    if (!value.trim()) {
+      setColorValue({
+        r: 255,
+        g: 255,
+        b: 255,
+        a: 1
+      });
+      return "";
+    }
+    if (isValidRgbaColor(value)) {
+      var color = hexToRgba(value);
+      setColorValue(color);
+      return rgbaToString(color);
+    }
+    if (isValidHexColor(value)) {
+      var _color = hexToRgba(value);
+      setColorValue(_color);
+      return value;
+    }
+    if (isValidRgbColor(value)) {
+      var _color2 = hexToRgba(value);
+      setColorValue(_color2);
+      return rgbToString(_color2);
+    }
+    var namedColor = isValidNamedColor(value);
+    if (namedColor) {
+      var namedColorValue = getNamedColorRgba(value);
+      setColorValue(namedColorValue);
+      return rgbaToString(namedColorValue);
+    }
+
+    // Invalid format
+    setColorValue({
+      r: 255,
+      g: 255,
+      b: 255,
+      a: 1
+    });
+    return "";
+  }, [setColorValue]);
+  var handleInputChange = (0, _react.useCallback)(function (event) {
+    var newValue = event.target.value;
+    setInputValue(newValue);
+    if (newValue === "") {
+      setPlaceholder(placeholder);
+    }
+    // Update color value for valid inputs
+    if (newValue && (isValidHexColor(newValue) || isValidRgbaColor(newValue) || isValidRgbColor(newValue) || isValidNamedColor(newValue))) {
+      setColorValue(hexToRgba(newValue));
+    } else if (!newValue) {
+      setColorValue({
+        r: 255,
+        g: 255,
+        b: 255,
+        a: 1
+      });
+    }
+    if (onChange && name) {
+      onChange(event, listener.Widgets[name], newValue, colorValue);
+    }
+  }, [setInputValue, setColorValue]);
+  var handleInputBlur = (0, _react.useCallback)(function (event) {
+    // Close picker logic
+    if (autoclose !== AUTOCLOSE_TYPE.NEVER && !isInteractingWithPicker && pickerRef.current && !pickerRef.current.contains(event.relatedTarget)) {
+      setIsOpen(false);
+      handleFloatingLabel("close");
+    }
+
+    // Validate and correct input value
+    if (inputValue) {
+      var validatedValue = validateAndSetColor(inputValue);
+      // Check for named color equivalence
+      var namedColor = getNamedColorRgba(inputValue);
+      if (validatedValue !== inputValue && !(namedColor && validatedValue === rgbaToString(namedColor))) {
+        setInputValue(validatedValue);
+      }
+    }
+
+    // Call blur handlers
+    if (onBlur) {
+      onBlur(event, listener.Widgets[name]);
+    }
+  }, [autoclose, isInteractingWithPicker, inputValue, validateAndSetColor, setInputValue, onBlur]);
+  var handleInputFocus = (0, _react.useCallback)(function (event) {
+    if (onFocus) {
+      onFocus(event, listener.Widgets[name]);
+    }
+    openPicker();
+    handleFloatingLabel("open");
+  }, [onFocus, openPicker]);
+  var handleInputClick = (0, _react.useCallback)(function (event) {
+    event.stopPropagation();
+    if (!isReadonlyOrDisabled) {
+      if (onClick && name) {
+        onClick(event, listener.Widgets[name]);
+      }
+      openPicker();
+      handleFloatingLabel("open");
+    }
+  }, [isReadonlyOrDisabled, onClick, openPicker]);
+  var handleColorBoxClick = (0, _react.useCallback)(function (event) {
+    event.stopPropagation();
+    if (!isReadonlyOrDisabled) {
+      isOpen ? closePicker() : openPicker();
+    }
+  }, [isReadonlyOrDisabled, isOpen, closePicker, openPicker]);
+  var handleColorChange = (0, _react.useCallback)(function (color, event) {
+    var _color$rgb = color.rgb,
+      r = _color$rgb.r,
+      g = _color$rgb.g,
+      b = _color$rgb.b,
+      a = _color$rgb.a;
+    var rgbaColor = {
+      r: r,
+      g: g,
+      b: b,
+      a: a
+    };
+    setColorValue(rgbaColor);
+    var newValue = a !== 1 ? rgbaToString(rgbaColor) : rgbaToHex(rgbaColor);
+    if (listener !== null && listener !== void 0 && listener.Widgets[(props === null || props === void 0 ? void 0 : props.fieldName) || name]) {
+      listener.Widgets[name].displayValue = newValue;
+    }
+    setInputValue(newValue);
+    if (listener !== null && listener !== void 0 && listener.onChange) {
+      listener.onChange((props === null || props === void 0 ? void 0 : props.fieldName) || name, {
+        datavalue: newValue
+      });
+    }
+    if (onChange) {
+      onChange(event, listener.Widgets[name], newValue, inputValue);
+    }
+    if (autoclose === AUTOCLOSE_TYPE.ALWAYS && !isInteractingWithPicker) {
+      setTimeout(function () {
+        return setIsOpen(false);
+      }, POSITION_DELAY);
+    }
+  }, [setColorValue, setInputValue, autoclose, isInteractingWithPicker]);
+  var handleKeyDown = (0, _react.useCallback)(function (event) {
+    if (event.key === "Enter") {
+      setIsOpen(false);
+      var newValue = event.target.value;
+      setInputValue(newValue);
+      if (newValue === "") {
+        setPlaceholder(placeholder);
+      }
+      // Update color value for valid inputs
+      if (newValue && (isValidHexColor(newValue) || isValidRgbaColor(newValue) || isValidRgbColor(newValue) || isValidNamedColor(newValue))) {
+        setColorValue(hexToRgba(newValue));
+      } else if (!newValue) {
+        setColorValue({
+          r: 255,
+          g: 255,
+          b: 255,
+          a: 1
+        });
+      }
+    }
+    if (onKeydown) {
+      onKeydown(event);
+    }
+  }, [onKeydown]);
+
+  // Picker interaction handlers
+  var handlePickerMouseDown = (0, _react.useCallback)(function () {
+    setIsInteractingWithPicker(true);
+  }, []);
+  var handlePickerMouseUp = (0, _react.useCallback)(function () {
+    setTimeout(function () {
+      return setIsInteractingWithPicker(false);
+    }, POSITION_DELAY);
+  }, []);
+  var handleFloatingLabel = (0, _react.useCallback)(function (action, currentValue) {
+    var _containerRef$current;
+    var captionEl = (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.closest(".app-composite-widget.caption-floating");
+    if (!captionEl) return;
+    if (action === "open") {
+      // On click/focus - show placeholder and activate floating
+      captionEl.classList.add("float-active");
+      setPlaceholder(placeholder);
+    } else if (action === "close" && (!inputValue || currentValue === "")) {
+      // On blur - hide placeholder if no value
+      captionEl.classList.remove("float-active");
+      setPlaceholder("");
+    }
+  }, [inputValue]);
+
+  // Effects
+  (0, _react.useEffect)(function () {
+    if (datavalue !== prevValue) {
+      setPrevValue(datavalue);
+      if (datavalue) {
+        try {
+          handleFloatingLabel("open");
+          var color = hexToRgba(datavalue);
+          setColorValue(color);
+          var formattedValue = datavalue.startsWith("rgba(") ? datavalue : datavalue.startsWith("#") ? datavalue : "#".concat(datavalue);
+          setInputValue(formattedValue);
+        } catch (error) {
+          console.error("Invalid color format:", error);
+          setColorValue({
+            r: 255,
+            g: 255,
+            b: 255,
+            a: 1
+          });
+          setInputValue("");
+        }
+      } else {
+        setColorValue({
+          r: 255,
+          g: 255,
+          b: 255,
+          a: 1
+        });
+        setInputValue("");
+      }
+    }
+  }, [datavalue, prevValue, setColorValue, setInputValue]);
+
+  // Outside click handler
+  (0, _react.useEffect)(function () {
+    if (!isOpen || !shouldCloseOnOutsideClick) return;
+    var handleClickOutside = function handleClickOutside(event) {
+      var target = event.target;
+      if (!isInteractingWithPicker && pickerRef.current && !pickerRef.current.contains(target) && containerRef.current && !containerRef.current.contains(target)) {
+        var _inputRef$current;
+        setIsOpen(false);
+        var currentValue = ((_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.value) || "";
+        if (currentValue === "") {
+          setInputValue("");
+          handleFloatingLabel("close", currentValue);
+        }
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside, true);
+    return function () {
+      return document.removeEventListener("mousedown", handleClickOutside, true);
+    };
+  }, [isOpen, shouldCloseOnOutsideClick, isInteractingWithPicker]);
+
+  // Escape key handler
+  (0, _react.useEffect)(function () {
+    if (!isOpen) return;
+    var handleEscape = function handleEscape(event) {
+      if (event.key === "Escape" || event.key === "Esc") {
+        setIsOpen(false);
+      }
+    };
+    window.addEventListener("keydown", handleEscape);
+    return function () {
+      return window.removeEventListener("keydown", handleEscape);
+    };
+  }, [isOpen]);
+  var checkPlaceholder = function checkPlaceholder() {
+    setTimeout(function () {
+      var _containerRef$current2;
+      var captionEl = (_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.closest(".app-composite-widget.caption-floating");
+      // For floating labels: show placeholder only when user has interacted and no value
+      if (captionEl && !captionEl.classList.contains("float-active")) {
+        setPlaceholder("");
+      } else {
+        setPlaceholder(placeholder);
+      }
+    }, 100);
+  };
+  (0, _react.useEffect)(function () {
+    checkPlaceholder();
+  }, [inputValue, isInteractingWithPicker]);
+
+  // Render
+  return __jsx(_Box["default"], {
+    className: (0, _clsx["default"])(DEFAULT_CLASS, className),
+    tabIndex: tabindex,
+    onKeyDown: handleKeyDown,
+    sx: {
+      position: "relative"
+    },
+    ref: containerRef,
+    name: name
+  }, __jsx(_input.Input, {
+    ref: inputRef,
+    type: "text",
+    className: "form-control app-textbox",
+    name: name,
+    value: inputValue,
+    placeholder: getPlaceholder,
+    disabled: disabled || readonly,
+    required: required,
+    tabIndex: tabindex,
+    accessKey: shortcutkey,
+    onChange: handleInputChange,
+    onBlur: handleInputBlur,
+    onFocus: handleInputFocus,
+    onClick: handleInputClick,
+    onMouseEnter: function onMouseEnter(event) {
+      return _onMouseEnter && _onMouseEnter(event, listener.Widgets[name]);
+    },
+    onMouseLeave: function onMouseLeave(event) {
+      return _onMouseLeave && _onMouseLeave(event, listener.Widgets[name]);
+    },
+    "aria-label": arialabel,
+    "aria-readonly": readonly
+  }), __jsx(_Box["default"], {
+    component: "span",
+    className: "input-group-addon colorpicker-container",
+    onClick: handleColorBoxClick,
+    style: {
+      cursor: isReadonlyOrDisabled ? "not-allowed" : "pointer"
+    }
+  }, __jsx(_Box["default"], {
+    component: "i",
+    className: "colored-box",
+    style: {
+      backgroundColor: inputValue ? rgbaToString(colorValue) : "transparent"
+    }
+  })), isOpen && __jsx(StyledColorPicker, {
+    className: "color-picker",
+    ref: pickerRef,
+    sx: {
+      top: pickerPosition.top,
+      left: pickerPosition.left,
+      zIndex: 1300
+    },
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    },
+    onMouseDown: handlePickerMouseDown,
+    onMouseUp: handlePickerMouseUp
+  }, __jsx(_reactColor.ChromePicker, {
+    color: colorValue,
+    onChange: handleColorChange
+  })));
+}, function (prevProps, nextProps) {
+  var keysToCompare = ["datavalue", "placeholder", "readonly", "disabled", "required", "name", "shortcutkey", "show", "tabindex", "autoclose", "arialabel"];
+  return keysToCompare.every(function (key) {
+    return prevProps[key] === nextProps[key];
+  });
+});
+WmColorPicker.displayName = "WmColorPicker";
+var _default = exports["default"] = (0, _withBaseWrapper.withBaseWrapper)((0, _withFormController["default"])(WmColorPicker));

package/components/input/color-picker/props.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});