@wavemaker-ai/react-runtime 1.0.0-rc.309

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

@@ -0,0 +1,689 @@
+"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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+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 _styles = require("@mui/material/styles");
+var _input = require("@base-ui-components/react/input");
+var _withBaseWrapper = require("@wavemaker-ai/react-runtime/higherOrder/withBaseWrapper");
+var _withFormController = _interopRequireDefault(require("@wavemaker-ai/react-runtime/components/data/form/form-controller/withFormController"));
+var _reactDom = require("react-dom");
+var _withStandalone = _interopRequireDefault(require("@wavemaker-ai/react-runtime/higherOrder/withStandalone"));
+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;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+// Constants
+var AUTOCLOSE_TYPE = {
+  ALWAYS: "always",
+  OUTSIDECLICK: "outsideClick",
+  NEVER: "disabled"
+};
+var DEFAULT_CLASS = "input-group app-colorpicker";
+var PICKER_HEIGHT = 320;
+var POSITION_DELAY = 100;
+
+// 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 ? color.a * 255 : 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: 0,
+      left: 0,
+      direction: "down"
+    }),
+    position = _useState3[0],
+    setPosition = _useState3[1];
+  var calculatePosition = (0, _react.useCallback)(function (containerElement) {
+    if (!containerElement) {
+      return {
+        top: 0,
+        left: 0,
+        direction: "down"
+      };
+    }
+    var rect = containerElement.getBoundingClientRect();
+    var viewportHeight = window.innerHeight;
+    var spaceBelow = viewportHeight - rect.bottom;
+
+    // Calculate absolute position using fixed positioning (for portal)
+    var openUpward = spaceBelow < PICKER_HEIGHT;
+    var top = openUpward ? rect.top - PICKER_HEIGHT + 50 // Position above if not enough space below
+    : rect.bottom + 8; // Position below with 8px gap
+
+    return {
+      top: top,
+      left: rect.left,
+      direction: openUpward ? "up" : "down"
+    };
+  }, []);
+  return {
+    position: position,
+    setPosition: setPosition,
+    calculatePosition: calculatePosition
+  };
+};
+
+// Main Component
+var WmColorPicker = /*#__PURE__*/(0, _react.memo)(function (props) {
+  var theme = (0, _styles.useTheme)();
+  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]);
+
+  // Register widget methods (open/close) with listener
+  (0, _react.useEffect)(function () {
+    if (listener !== null && listener !== void 0 && listener.onChange) {
+      listener.onChange(props.fieldName || name, {
+        open: openPicker,
+        close: closePicker
+      });
+    }
+  }, [openPicker, closePicker]);
+  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 === null || listener === void 0 ? void 0 : 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 === null || listener === void 0 ? void 0 : listener.Widgets[name]);
+    }
+  }, [autoclose, isInteractingWithPicker, inputValue, validateAndSetColor, setInputValue, onBlur]);
+  var handleInputFocus = (0, _react.useCallback)(function (event) {
+    if (onFocus) {
+      onFocus(event, listener === null || listener === void 0 ? void 0 : 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 === null || listener === void 0 ? void 0 : 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 (inputRef.current) {
+      inputRef.current.value = newValue;
+    }
+    if (listener !== null && listener !== void 0 && listener.Widgets[(props === null || props === void 0 ? void 0 : props.fieldName) || name]) {
+      listener.Widgets[name].datavalue = newValue;
+      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
+      });
+    }
+    var customEvent = _objectSpread(_objectSpread({}, event), {}, {
+      type: "change"
+    });
+    if (onChange) {
+      onChange(customEvent, listener === null || listener === void 0 ? void 0 : 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]);
+
+  // Update picker position on scroll or resize
+  (0, _react.useEffect)(function () {
+    if (!isOpen) return;
+    var updatePosition = function updatePosition() {
+      setPickerPosition(calculatePosition(containerRef.current));
+    };
+    window.addEventListener("scroll", updatePosition, true);
+    window.addEventListener("resize", updatePosition);
+    return function () {
+      window.removeEventListener("scroll", updatePosition, true);
+      window.removeEventListener("resize", updatePosition);
+    };
+  }, [isOpen, calculatePosition, setPickerPosition]);
+  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, "wm-colorpicker-root", className),
+    tabIndex: tabindex,
+    onKeyDown: handleKeyDown,
+    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 === null || listener === void 0 ? void 0 : listener.Widgets[name]);
+    },
+    onMouseLeave: function onMouseLeave(event) {
+      return _onMouseLeave && _onMouseLeave(event, listener === null || listener === void 0 ? void 0 : listener.Widgets[name]);
+    },
+    "aria-label": arialabel,
+    "aria-readonly": readonly
+  }), __jsx(_Box["default"], {
+    component: "span",
+    className: (0, _clsx["default"])("input-group-addon colorpicker-container", isReadonlyOrDisabled ? "wm-colorpicker-addon-disabled" : "wm-colorpicker-addon-enabled"),
+    onClick: handleColorBoxClick
+  }, __jsx(_Box["default"], {
+    component: "i",
+    className: "colored-box wm-colorpicker-swatch",
+    style: {
+      "--colorpicker-swatch-bg": inputValue ? rgbaToString(colorValue) : "transparent"
+    }
+  })), isOpen && /*#__PURE__*/(0, _reactDom.createPortal)(__jsx(_Box["default"], {
+    className: (0, _clsx["default"])("color-picker", "wm-colorpicker-popup", pickerPosition.direction === "down" ? "wm-colorpicker-popup-direction-down" : "wm-colorpicker-popup-direction-up"),
+    ref: pickerRef,
+    style: {
+      "--colorpicker-popup-top": "".concat(pickerPosition.top, "px"),
+      "--colorpicker-popup-left": "".concat(pickerPosition.left, "px"),
+      "--colorpicker-popup-margin-top": theme.spacing(1)
+    },
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    },
+    onMouseDown: handlePickerMouseDown,
+    onMouseUp: handlePickerMouseUp
+  }, __jsx(_reactColor.ChromePicker, {
+    color: colorValue,
+    onChange: handleColorChange
+  })), document.body));
+}, function (prevProps, nextProps) {
+  var keysToCompare = ["datavalue", "placeholder", "readonly", "disabled", "required", "name", "shortcutkey", "show", "tabindex", "autoclose", "arialabel", "hidden", "show"];
+  return keysToCompare.every(function (key) {
+    return prevProps[key] === nextProps[key];
+  });
+});
+WmColorPicker.displayName = "WmColorPicker";
+var WithFormController = (0, _withFormController["default"])(WmColorPicker);
+var WmColorPickerStandalone = exports.WmColorPicker = (0, _withStandalone["default"])(WithFormController);
+/**
+ * The WmColorPicker component provides a color picker input with a popover palette.
+ *
+ * - [Playground](https://react-components.wavemaker.ai/?path=/story/input-colorpicker--showcase)
+ *
+ * - [Docs](https://react-components.wavemaker.ai/?path=/story/input-colorpicker--docs)
+ *
+ * @param props - {@link WmColorPickerProps}
+ */
+var _default = exports["default"] = (0, _withBaseWrapper.withBaseWrapper)(WithFormController);