@wix/patterns-fields 1.39.0 → 1.41.0

package/dist/cjs/components/color-view/cell-color-input.js

@@ -0,0 +1,195 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.CellColorInput = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireWildcard(require("react"));
+var _designSystem = require("@wix/design-system");
+var _useTranslations = require("../../hooks/use-translations");
+var _hex2 = require("./hex");
+var _jsxFileName = "/home/builduser/work/843658b9f44192f0/packages/fields/dist/cjs/components/color-view/cell-color-input.tsx";
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (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 (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * Cell-layer ColorInput for EditableTable. Differs from the form ColorInput in
+ * four ways required by the cell context:
+ *  1. `popoverProps` passthrough so the picker can `appendTo: 'window'` and
+ *     escape the table's scroll container.
+ *  2. The empty-state add-color button appears for invalid values too (not
+ *     only missing) — mid-typing or post-commit bad hex should still expose
+ *     the picker as an escape hatch.
+ *  3. Invalid input on blur is forwarded upward (prefixed with `#`) so the
+ *     cell-level `validate()` can surface the error; we don't silently revert.
+ *  4. Picker closes on any ancestor scroll while open — the portaled popover
+ *     does not follow the trigger.
+ */
+const CellColorInput = exports.CellColorInput = /*#__PURE__*/(0, _react.forwardRef)(({
+  value: colorValue,
+  onChange,
+  onBlur,
+  popoverProps,
+  inputRef,
+  ...props
+}, ref) => {
+  const {
+    t
+  } = (0, _useTranslations.useTranslations)();
+  const [inputValue, setInputValue] = (0, _react.useState)(colorValue ? (0, _hex2.omitHash)(colorValue) : '');
+  const [showPicker, setShowPicker] = (0, _react.useState)(false);
+  const [pickerHex, setPickerHex] = (0, _react.useState)(colorValue && (0, _hex2.isValidHex)(colorValue) ? colorValue : undefined);
+  const onInputChange = (0, _react.useCallback)(e => {
+    const raw = e.target.value.replace(/^#/, '');
+    setInputValue(raw);
+    const hex = (0, _hex2.normalizeHex)(raw);
+    if (hex) {
+      setPickerHex(hex);
+      onChange == null || onChange(hex);
+    } else {
+      onChange == null || onChange(raw === '' ? '' : `#${raw}`);
+    }
+  }, [onChange]);
+  const onInputBlur = (0, _react.useCallback)(e => {
+    const hex = (0, _hex2.normalizeHex)(inputValue);
+    if (hex) {
+      onChange == null || onChange(hex);
+      setInputValue((0, _hex2.omitHash)(hex));
+    }
+    onBlur == null || onBlur(e);
+  }, [onChange, onBlur, inputValue]);
+  const onPickerConfirm = (0, _react.useCallback)(confirmedColor => {
+    var _hex;
+    const hex = typeof confirmedColor === 'string' ? confirmedColor.toUpperCase() : confirmedColor == null || confirmedColor.hex == null || (_hex = confirmedColor.hex()) == null ? void 0 : _hex.toUpperCase();
+    if (hex) {
+      onChange == null || onChange(hex);
+      setInputValue((0, _hex2.omitHash)(hex));
+      setPickerHex(hex);
+    } else {
+      onChange == null || onChange('');
+      setInputValue('');
+      setPickerHex(undefined);
+    }
+    setShowPicker(false);
+  }, [onChange]);
+  const onPickerCancel = (0, _react.useCallback)(() => {
+    setPickerHex(colorValue && (0, _hex2.isValidHex)(colorValue) ? colorValue : undefined);
+    setShowPicker(false);
+  }, [colorValue]);
+  const togglePicker = (0, _react.useCallback)(() => {
+    setShowPicker(prev => !prev);
+  }, []);
+  (0, _react.useEffect)(() => {
+    if (!showPicker) {
+      return;
+    }
+    const close = () => setShowPicker(false);
+    const opts = {
+      capture: true
+    };
+    window.addEventListener('scroll', close, {
+      ...opts,
+      passive: true
+    });
+    return () => window.removeEventListener('scroll', close, opts);
+  }, [showPicker]);
+  const showAddColorButton = !colorValue || !(0, _hex2.isValidHex)(colorValue);
+  const addColorTooltip = t('auto-patterns.fields.add_color_tooltip');
+  const popoverDefaults = {
+    animate: true,
+    flip: true,
+    fixed: false,
+    placement: 'bottom-start',
+    appendTo: 'window',
+    moveBy: {
+      x: 0,
+      y: 4
+    },
+    zIndex: 9999
+  };
+  return /*#__PURE__*/_react.default.createElement(_designSystem.Input, (0, _extends2.default)({}, props, {
+    ref: instance => {
+      if (inputRef) inputRef.current = instance;
+      if (typeof ref === 'function') ref(instance);else if (ref) ref.current = instance;
+    },
+    value: inputValue,
+    onChange: onInputChange,
+    onBlur: onInputBlur,
+    prefix: /*#__PURE__*/_react.default.createElement(_designSystem.Input.Affix, {
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 154,
+        columnNumber: 17
+      }
+    }, "#"),
+    suffix: /*#__PURE__*/_react.default.createElement(_designSystem.Input.Affix, {
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 156,
+        columnNumber: 11
+      }
+    }, /*#__PURE__*/_react.default.createElement(_designSystem.Popover, (0, _extends2.default)({}, popoverDefaults, popoverProps, {
+      shown: showPicker,
+      onClickOutside: () => setShowPicker(false),
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 157,
+        columnNumber: 13
+      }
+    }), /*#__PURE__*/_react.default.createElement(_designSystem.Popover.Element, {
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 163,
+        columnNumber: 15
+      }
+    }, showAddColorButton ? /*#__PURE__*/_react.default.createElement(_designSystem.FillButton, {
+      onClick: togglePicker,
+      tooltipContent: addColorTooltip,
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 165,
+        columnNumber: 19
+      }
+    }) : /*#__PURE__*/_react.default.createElement(_designSystem.FillPreview, {
+      fill: colorValue,
+      onClick: togglePicker,
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 170,
+        columnNumber: 19
+      }
+    })), /*#__PURE__*/_react.default.createElement(_designSystem.Popover.Content, {
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 173,
+        columnNumber: 15
+      }
+    }, /*#__PURE__*/_react.default.createElement(_designSystem.ColorPicker, {
+      value: pickerHex,
+      onChange: c => setPickerHex(typeof c === 'string' ? c : c == null || c.hex == null ? void 0 : c.hex()),
+      onConfirm: onPickerConfirm,
+      onCancel: onPickerCancel,
+      showConverter: true,
+      allowEmpty: true,
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 174,
+        columnNumber: 17
+      }
+    })))),
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 144,
+      columnNumber: 7
+    }
+  }));
+});
+CellColorInput.displayName = 'CellColorInput';
+//# sourceMappingURL=cell-color-input.js.map

package/dist/cjs/components/color-view/cell-color-input.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_designSystem","_useTranslations","_hex2","_jsxFileName","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","CellColorInput","exports","forwardRef","value","colorValue","onChange","onBlur","popoverProps","inputRef","props","ref","useTranslations","inputValue","setInputValue","useState","omitHash","showPicker","setShowPicker","pickerHex","setPickerHex","isValidHex","undefined","onInputChange","useCallback","raw","target","replace","hex","normalizeHex","onInputBlur","onPickerConfirm","confirmedColor","_hex","toUpperCase","onPickerCancel","togglePicker","prev","useEffect","close","opts","capture","window","addEventListener","passive","removeEventListener","showAddColorButton","addColorTooltip","popoverDefaults","animate","flip","fixed","placement","appendTo","moveBy","x","y","zIndex","createElement","Input","_extends2","instance","current","prefix","Affix","__self","__source","fileName","lineNumber","columnNumber","suffix","Popover","shown","onClickOutside","Element","FillButton","onClick","tooltipContent","FillPreview","fill","Content","ColorPicker","c","onConfirm","onCancel","showConverter","allowEmpty","displayName"],"sources":["../../../../src/components/color-view/cell-color-input.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useEffect, useState } from 'react';\nimport type {\n  ColorPickerProps,\n  InputImperativeActions,\n  InputProps,\n  PopoverProps,\n} from '@wix/design-system';\nimport {\n  ColorPicker,\n  FillButton,\n  FillPreview,\n  Input,\n  Popover,\n} from '@wix/design-system';\nimport { useTranslations } from '../../hooks/use-translations';\nimport { isValidHex, normalizeHex, omitHash } from './hex';\n\nexport interface CellColorInputProps\n  extends Omit<\n    InputProps,\n    'value' | 'onChange' | 'prefix' | 'suffix' | 'inputRef'\n  > {\n  value?: string;\n  onChange?: (text: string) => void;\n  popoverProps?: Partial<PopoverProps>;\n  inputRef?: React.MutableRefObject<InputImperativeActions | null | undefined>;\n}\n\n/**\n * Cell-layer ColorInput for EditableTable. Differs from the form ColorInput in\n * four ways required by the cell context:\n *  1. `popoverProps` passthrough so the picker can `appendTo: 'window'` and\n *     escape the table's scroll container.\n *  2. The empty-state add-color button appears for invalid values too (not\n *     only missing) — mid-typing or post-commit bad hex should still expose\n *     the picker as an escape hatch.\n *  3. Invalid input on blur is forwarded upward (prefixed with `#`) so the\n *     cell-level `validate()` can surface the error; we don't silently revert.\n *  4. Picker closes on any ancestor scroll while open — the portaled popover\n *     does not follow the trigger.\n */\nexport const CellColorInput = forwardRef<\n  InputImperativeActions,\n  CellColorInputProps\n>(\n  (\n    { value: colorValue, onChange, onBlur, popoverProps, inputRef, ...props },\n    ref,\n  ) => {\n    const { t } = useTranslations();\n    const [inputValue, setInputValue] = useState(\n      colorValue ? omitHash(colorValue) : '',\n    );\n    const [showPicker, setShowPicker] = useState(false);\n    const [pickerHex, setPickerHex] = useState<string | undefined>(\n      colorValue && isValidHex(colorValue) ? colorValue : undefined,\n    );\n\n    const onInputChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        const raw = e.target.value.replace(/^#/, '');\n        setInputValue(raw);\n\n        const hex = normalizeHex(raw);\n        if (hex) {\n          setPickerHex(hex);\n          onChange?.(hex);\n        } else {\n          onChange?.(raw === '' ? '' : `#${raw}`);\n        }\n      },\n      [onChange],\n    );\n\n    const onInputBlur = useCallback(\n      (e: React.FocusEvent<HTMLInputElement>) => {\n        const hex = normalizeHex(inputValue);\n        if (hex) {\n          onChange?.(hex);\n          setInputValue(omitHash(hex));\n        }\n        onBlur?.(e);\n      },\n      [onChange, onBlur, inputValue],\n    );\n\n    const onPickerConfirm = useCallback(\n      (confirmedColor: ColorPickerProps['value']) => {\n        const hex =\n          typeof confirmedColor === 'string'\n            ? confirmedColor.toUpperCase()\n            : (confirmedColor as { hex?: () => string } | null | undefined)\n                ?.hex?.()\n                ?.toUpperCase();\n        if (hex) {\n          onChange?.(hex);\n          setInputValue(omitHash(hex));\n          setPickerHex(hex);\n        } else {\n          onChange?.('');\n          setInputValue('');\n          setPickerHex(undefined);\n        }\n        setShowPicker(false);\n      },\n      [onChange],\n    );\n\n    const onPickerCancel = useCallback(() => {\n      setPickerHex(\n        colorValue && isValidHex(colorValue) ? colorValue : undefined,\n      );\n      setShowPicker(false);\n    }, [colorValue]);\n\n    const togglePicker = useCallback(() => {\n      setShowPicker((prev) => !prev);\n    }, []);\n\n    useEffect(() => {\n      if (!showPicker) {\n        return;\n      }\n      const close = () => setShowPicker(false);\n      const opts = { capture: true } as const;\n      window.addEventListener('scroll', close, { ...opts, passive: true });\n      return () => window.removeEventListener('scroll', close, opts);\n    }, [showPicker]);\n\n    const showAddColorButton = !colorValue || !isValidHex(colorValue);\n    const addColorTooltip = t('auto-patterns.fields.add_color_tooltip');\n\n    const popoverDefaults: Partial<PopoverProps> = {\n      animate: true,\n      flip: true,\n      fixed: false,\n      placement: 'bottom-start',\n      appendTo: 'window',\n      moveBy: { x: 0, y: 4 },\n      zIndex: 9999,\n    };\n\n    return (\n      <Input\n        {...props}\n        ref={(instance) => {\n          if (inputRef) inputRef.current = instance;\n          if (typeof ref === 'function') ref(instance);\n          else if (ref) ref.current = instance;\n        }}\n        value={inputValue}\n        onChange={onInputChange}\n        onBlur={onInputBlur}\n        prefix={<Input.Affix>#</Input.Affix>}\n        suffix={\n          <Input.Affix>\n            <Popover\n              {...popoverDefaults}\n              {...popoverProps}\n              shown={showPicker}\n              onClickOutside={() => setShowPicker(false)}\n            >\n              <Popover.Element>\n                {showAddColorButton ? (\n                  <FillButton\n                    onClick={togglePicker}\n                    tooltipContent={addColorTooltip}\n                  />\n                ) : (\n                  <FillPreview fill={colorValue} onClick={togglePicker} />\n                )}\n              </Popover.Element>\n              <Popover.Content>\n                <ColorPicker\n                  value={pickerHex as ColorPickerProps['value']}\n                  onChange={\n                    ((c: ColorPickerProps['value']) =>\n                      setPickerHex(\n                        typeof c === 'string'\n                          ? c\n                          : (\n                              c as { hex?: () => string } | null | undefined\n                            )?.hex?.(),\n                      )) as ColorPickerProps['onChange']\n                  }\n                  onConfirm={onPickerConfirm}\n                  onCancel={onPickerCancel}\n                  showConverter\n                  allowEmpty\n                />\n              </Popover.Content>\n            </Popover>\n          </Input.Affix>\n        }\n      />\n    );\n  },\n);\n\nCellColorInput.displayName = 'CellColorInput';\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/components/color-view/cell-color-view.js

@@ -0,0 +1,89 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.CellColorView = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _designSystem = require("@wix/design-system");
+var _cellColorViewStCss = require("./cell-color-view.st.css.js");
+var _hex = require("./hex");
+var _jsxFileName = "/home/builduser/work/843658b9f44192f0/packages/fields/dist/cjs/components/color-view/cell-color-view.tsx";
+/**
+ * Cell-layer color view. Matches the visual layout of CellColorInput so the
+ * View↔Edit transition is seamless.
+ *
+ *   "#"  (placeholder color)   hex digits (thin, uppercase)   [swatch right]
+ *
+ * Empty or invalid values show only the `#` on the left and the empty-state
+ * FillPreview (diagonal-slash placeholder) on the right.
+ */
+const CellColorView = ({
+  value
+}) => {
+  const isValid = !!value && _hex.HEX_RE.test(value);
+  const hex = value ? value.replace(/^#/, '').toUpperCase() : '';
+  return /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+    width: "100%",
+    verticalAlign: "middle",
+    align: "space-between",
+    gap: "SP1",
+    dataHook: "cell-color-view",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 24,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+    gap: "SP1",
+    verticalAlign: "middle",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 31,
+      columnNumber: 7
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+    className: _cellColorViewStCss.classes.hashPrefix,
+    dataHook: "cell-color-view-hash",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 32,
+      columnNumber: 9
+    }
+  }, "#"), hex ? /*#__PURE__*/_react.default.createElement(_designSystem.Text, {
+    size: "small",
+    weight: "thin",
+    dataHook: "cell-color-view-text",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 36,
+      columnNumber: 11
+    }
+  }, hex) : null), /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+    width: "24px",
+    height: "24px",
+    flexShrink: 0,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 41,
+      columnNumber: 7
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.FillPreview, {
+    fill: isValid ? value : undefined,
+    aspectRatio: 1,
+    dataHook: "cell-color-view-fill-preview",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 42,
+      columnNumber: 9
+    }
+  })));
+};
+exports.CellColorView = CellColorView;
+CellColorView.displayName = 'CellColorView';
+//# sourceMappingURL=cell-color-view.js.map

package/dist/cjs/components/color-view/cell-color-view.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_designSystem","_cellColorViewStCss","_hex","_jsxFileName","CellColorView","value","isValid","HEX_RE","test","hex","replace","toUpperCase","default","createElement","Box","width","verticalAlign","align","gap","dataHook","__self","__source","fileName","lineNumber","columnNumber","className","classes","hashPrefix","Text","size","weight","height","flexShrink","FillPreview","fill","undefined","aspectRatio","exports","displayName"],"sources":["../../../../src/components/color-view/cell-color-view.tsx"],"sourcesContent":["import React from 'react';\nimport { Box, FillPreview, Text } from '@wix/design-system';\nimport { classes } from './cell-color-view.st.css.js';\nimport { HEX_RE } from './hex';\n\nexport interface CellColorViewProps {\n  value?: string;\n}\n\n/**\n * Cell-layer color view. Matches the visual layout of CellColorInput so the\n * View↔Edit transition is seamless.\n *\n *   \"#\"  (placeholder color)   hex digits (thin, uppercase)   [swatch right]\n *\n * Empty or invalid values show only the `#` on the left and the empty-state\n * FillPreview (diagonal-slash placeholder) on the right.\n */\nexport const CellColorView: React.FC<CellColorViewProps> = ({ value }) => {\n  const isValid = !!value && HEX_RE.test(value);\n  const hex = value ? value.replace(/^#/, '').toUpperCase() : '';\n\n  return (\n    <Box\n      width=\"100%\"\n      verticalAlign=\"middle\"\n      align=\"space-between\"\n      gap=\"SP1\"\n      dataHook=\"cell-color-view\"\n    >\n      <Box gap=\"SP1\" verticalAlign=\"middle\">\n        <Box className={classes.hashPrefix} dataHook=\"cell-color-view-hash\">\n          #\n        </Box>\n        {hex ? (\n          <Text size=\"small\" weight=\"thin\" dataHook=\"cell-color-view-text\">\n            {hex}\n          </Text>\n        ) : null}\n      </Box>\n      <Box width=\"24px\" height=\"24px\" flexShrink={0}>\n        <FillPreview\n          fill={isValid ? value : undefined}\n          aspectRatio={1}\n          dataHook=\"cell-color-view-fill-preview\"\n        />\n      </Box>\n    </Box>\n  );\n};\n\nCellColorView.displayName = 'CellColorView';\n"],"mappings":";;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,aAAA,GAAAD,OAAA;AACA,IAAAE,mBAAA,GAAAF,OAAA;AACA,IAAAG,IAAA,GAAAH,OAAA;AAA+B,IAAAI,YAAA;AAM/B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,aAA2C,GAAGA,CAAC;EAAEC;AAAM,CAAC,KAAK;EACxE,MAAMC,OAAO,GAAG,CAAC,CAACD,KAAK,IAAIE,WAAM,CAACC,IAAI,CAACH,KAAK,CAAC;EAC7C,MAAMI,GAAG,GAAGJ,KAAK,GAAGA,KAAK,CAACK,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,CAACC,WAAW,CAAC,CAAC,GAAG,EAAE;EAE9D,oBACEd,MAAA,CAAAe,OAAA,CAAAC,aAAA,CAACb,aAAA,CAAAc,GAAG;IACFC,KAAK,EAAC,MAAM;IACZC,aAAa,EAAC,QAAQ;IACtBC,KAAK,EAAC,eAAe;IACrBC,GAAG,EAAC,KAAK;IACTC,QAAQ,EAAC,iBAAiB;IAAAC,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAnB,YAAA;MAAAoB,UAAA;MAAAC,YAAA;IAAA;EAAA,gBAE1B3B,MAAA,CAAAe,OAAA,CAAAC,aAAA,CAACb,aAAA,CAAAc,GAAG;IAACI,GAAG,EAAC,KAAK;IAACF,aAAa,EAAC,QAAQ;IAAAI,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAnB,YAAA;MAAAoB,UAAA;MAAAC,YAAA;IAAA;EAAA,gBACnC3B,MAAA,CAAAe,OAAA,CAAAC,aAAA,CAACb,aAAA,CAAAc,GAAG;IAACW,SAAS,EAAEC,2BAAO,CAACC,UAAW;IAACR,QAAQ,EAAC,sBAAsB;IAAAC,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAnB,YAAA;MAAAoB,UAAA;MAAAC,YAAA;IAAA;EAAA,GAAC,GAE/D,CAAC,EACLf,GAAG,gBACFZ,MAAA,CAAAe,OAAA,CAAAC,aAAA,CAACb,aAAA,CAAA4B,IAAI;IAACC,IAAI,EAAC,OAAO;IAACC,MAAM,EAAC,MAAM;IAACX,QAAQ,EAAC,sBAAsB;IAAAC,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAnB,YAAA;MAAAoB,UAAA;MAAAC,YAAA;IAAA;EAAA,GAC7Df,GACG,CAAC,GACL,IACD,CAAC,eACNZ,MAAA,CAAAe,OAAA,CAAAC,aAAA,CAACb,aAAA,CAAAc,GAAG;IAACC,KAAK,EAAC,MAAM;IAACgB,MAAM,EAAC,MAAM;IAACC,UAAU,EAAE,CAAE;IAAAZ,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAnB,YAAA;MAAAoB,UAAA;MAAAC,YAAA;IAAA;EAAA,gBAC5C3B,MAAA,CAAAe,OAAA,CAAAC,aAAA,CAACb,aAAA,CAAAiC,WAAW;IACVC,IAAI,EAAE5B,OAAO,GAAGD,KAAK,GAAG8B,SAAU;IAClCC,WAAW,EAAE,CAAE;IACfjB,QAAQ,EAAC,8BAA8B;IAAAC,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAnB,YAAA;MAAAoB,UAAA;MAAAC,YAAA;IAAA;EAAA,CACxC,CACE,CACF,CAAC;AAEV,CAAC;AAACa,OAAA,CAAAjC,aAAA,GAAAA,aAAA;AAEFA,aAAa,CAACkC,WAAW,GAAG,eAAe","ignoreList":[]}

package/dist/cjs/components/color-view/cell-color-view.st.css

@@ -0,0 +1,8 @@
+@property st-global(--wsr-color-D40);
+
+.hashPrefix {
+  color: var(--wsr-color-D40, #868aa5);
+  font-size: 14px;
+  font-weight: 300;
+  line-height: 1;
+}

package/dist/cjs/components/color-view/cell-color-view.st.css.js

@@ -0,0 +1,25 @@
+"use strict";
+
+exports.__esModule = true;
+exports.vars = exports.style = exports.stVars = exports.st = exports.namespace = exports.layers = exports.keyframes = exports.cssStates = exports.containers = exports.classes = void 0;
+var _stylableEsmRuntime = require("../../stylable-esm-runtime.js");
+// @ts-nocheck
+
+var _namespace_ = "cellcolorview2526093299";
+var _style_ = _stylableEsmRuntime.classesRuntime.bind(null, _namespace_);
+var cssStates = exports.cssStates = _stylableEsmRuntime.statesRuntime.bind(null, _namespace_);
+var style = exports.style = _style_;
+var st = exports.st = _style_;
+var namespace = exports.namespace = _namespace_;
+var classes = exports.classes = {
+  "root": "cellcolorview2526093299__root",
+  "hashPrefix": "cellcolorview2526093299__hashPrefix"
+};
+var keyframes = exports.keyframes = {};
+var layers = exports.layers = {};
+var containers = exports.containers = {};
+var stVars = exports.stVars = {};
+var vars = exports.vars = {
+  "wsr-color-D40": "--wsr-color-D40"
+};
+//# sourceMappingURL=cell-color-view.st.css.js.map

package/dist/cjs/components/color-view/cell-color-view.st.css.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../src/components/color-view/cell-color-view.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"cellcolorview2526093299\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style: import(\"@stylable/runtime\").STFunction = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"cellcolorview2526093299__root\",\"hashPrefix\":\"cellcolorview2526093299__hashPrefix\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {\"wsr-color-D40\":\"--wsr-color-D40\"}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,yBAAyB;AAC3C,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAA6C,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AAC3D,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC,+BAA+B;EAAC,YAAY,EAAC;AAAqC,CAAC;AACzG,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG;EAAC,eAAe,EAAC;AAAiB,CAAC","ignoreList":[]}

package/dist/cjs/components/color-view/color-input.js

@@ -7,17 +7,10 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _react = _interopRequireWildcard(require("react"));
 var _designSystem = require("@wix/design-system");
 var _color = _interopRequireDefault(require("color"));
+var _useTranslations = require("../../hooks/use-translations");
+var _hex = require("./hex");
 var _jsxFileName = "/home/builduser/work/843658b9f44192f0/packages/fields/dist/cjs/components/color-view/color-input.tsx";
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (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 (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-const omitHash = value => value.replace(/^#/, '');
-const isValidHex = value => /^#?([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/.test(value);
-const normalizeHex = value => {
-  const cleaned = value.startsWith('#') ? value : `#${value}`;
-  if (isValidHex(cleaned)) {
-    return cleaned.toUpperCase();
-  }
-  return undefined;
-};
 const safeColorLib = value => {
   try {
     return (0, _color.default)(value);
@@ -28,31 +21,41 @@ const safeColorLib = value => {
 const ColorInput = exports.ColorInput = /*#__PURE__*/(0, _react.forwardRef)(({
   value: colorValue,
   onChange,
+  onFocus,
   onBlur,
   ...props
 }, ref) => {
-  const [inputValue, setInputValue] = (0, _react.useState)(colorValue ? omitHash(colorValue) : '');
+  const {
+    t
+  } = (0, _useTranslations.useTranslations)();
+  const [inputValue, setInputValue] = (0, _react.useState)(colorValue ? (0, _hex.omitHash)(colorValue) : '');
   const [showPicker, setShowPicker] = (0, _react.useState)(false);
+  const [isFocused, setIsFocused] = (0, _react.useState)(false);
   const [pickerColor, setPickerColor] = (0, _react.useState)(colorValue ? safeColorLib(colorValue) : undefined);
   const onInputChange = (0, _react.useCallback)(e => {
     const raw = e.target.value;
     setInputValue(raw);
-    const hex = normalizeHex(raw);
+    const hex = (0, _hex.normalizeHex)(raw);
     if (hex) {
       onChange == null || onChange(hex);
       setPickerColor(safeColorLib(hex));
     }
   }, [onChange]);
+  const onInputFocus = (0, _react.useCallback)(e => {
+    setIsFocused(true);
+    onFocus == null || onFocus(e);
+  }, [onFocus]);
   const onInputBlur = (0, _react.useCallback)(e => {
-    const hex = normalizeHex(inputValue);
+    const hex = (0, _hex.normalizeHex)(inputValue);
     if (hex) {
       onChange == null || onChange(hex);
-      setInputValue(omitHash(hex));
+      setInputValue((0, _hex.omitHash)(hex));
     } else if (colorValue) {
-      setInputValue(omitHash(colorValue));
+      setInputValue((0, _hex.omitHash)(colorValue));
     } else {
       setInputValue('');
     }
+    setIsFocused(false);
     onBlur == null || onBlur(e);
   }, [onChange, onBlur, inputValue, colorValue]);
   const onPickerConfirm = (0, _react.useCallback)(confirmedColor => {
@@ -60,7 +63,7 @@ const ColorInput = exports.ColorInput = /*#__PURE__*/(0, _react.forwardRef)(({
     const hex = typeof confirmedColor === 'string' ? confirmedColor : confirmedColor == null || (_confirmedColor$hex = confirmedColor.hex()) == null ? void 0 : _confirmedColor$hex.toUpperCase();
     if (hex) {
       onChange == null || onChange(hex);
-      setInputValue(omitHash(hex));
+      setInputValue((0, _hex.omitHash)(hex));
       setPickerColor(safeColorLib(hex));
     }
     setShowPicker(false);
@@ -76,12 +79,13 @@ const ColorInput = exports.ColorInput = /*#__PURE__*/(0, _react.forwardRef)(({
     ref: ref,
     value: inputValue,
     onChange: onInputChange,
+    onFocus: onInputFocus,
     onBlur: onInputBlur,
     prefix: /*#__PURE__*/_react.default.createElement(_designSystem.Input.Affix, {
       __self: void 0,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 117,
+        lineNumber: 119,
         columnNumber: 17
       }
     }, "#"),
@@ -89,7 +93,7 @@ const ColorInput = exports.ColorInput = /*#__PURE__*/(0, _react.forwardRef)(({
       __self: void 0,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 119,
+        lineNumber: 121,
         columnNumber: 11
       }
     }, /*#__PURE__*/_react.default.createElement(_designSystem.Popover, {
@@ -108,38 +112,40 @@ const ColorInput = exports.ColorInput = /*#__PURE__*/(0, _react.forwardRef)(({
       __self: void 0,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 120,
+        lineNumber: 122,
         columnNumber: 13
       }
     }, /*#__PURE__*/_react.default.createElement(_designSystem.Popover.Element, {
       __self: void 0,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 131,
+        lineNumber: 133,
         columnNumber: 15
       }
-    }, colorValue ? /*#__PURE__*/_react.default.createElement(_designSystem.FillPreview, {
-      fill: colorValue,
+    }, !colorValue && (isFocused || showPicker) ? /*#__PURE__*/_react.default.createElement(_designSystem.FillButton, {
       onClick: onPreviewClick,
+      onMouseDown: e => e.preventDefault(),
+      tooltipContent: t('auto-patterns.fields.add_color_tooltip'),
       __self: void 0,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 133,
+        lineNumber: 135,
         columnNumber: 19
       }
-    }) : /*#__PURE__*/_react.default.createElement(_designSystem.FillButton, {
+    }) : /*#__PURE__*/_react.default.createElement(_designSystem.FillPreview, {
+      fill: colorValue,
       onClick: onPreviewClick,
       __self: void 0,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 135,
+        lineNumber: 141,
         columnNumber: 19
       }
     })), /*#__PURE__*/_react.default.createElement(_designSystem.Popover.Content, {
       __self: void 0,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 138,
+        lineNumber: 144,
         columnNumber: 15
       }
     }, /*#__PURE__*/_react.default.createElement(_designSystem.ColorPicker, {
@@ -152,14 +158,14 @@ const ColorInput = exports.ColorInput = /*#__PURE__*/(0, _react.forwardRef)(({
       __self: void 0,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 139,
+        lineNumber: 145,
         columnNumber: 17
       }
     })))),
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 111,
+      lineNumber: 112,
       columnNumber: 7
     }
   }));

package/dist/cjs/components/color-view/color-input.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_designSystem","_color","_interopRequireDefault","_jsxFileName","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","omitHash","value","replace","isValidHex","test","normalizeHex","cleaned","startsWith","toUpperCase","undefined","safeColorLib","ColorLib","ColorInput","exports","forwardRef","colorValue","onChange","onBlur","props","ref","inputValue","setInputValue","useState","showPicker","setShowPicker","pickerColor","setPickerColor","onInputChange","useCallback","raw","target","hex","onInputBlur","onPickerConfirm","confirmedColor","_confirmedColor$hex","onPickerCancel","onPreviewClick","prev","createElement","Input","_extends2","prefix","Affix","__self","__source","fileName","lineNumber","columnNumber","suffix","Popover","shown","onClickOutside","animate","flip","fixed","placement","appendTo","moveBy","x","y","zIndex","Element","FillPreview","fill","onClick","FillButton","Content","ColorPicker","c","onConfirm","onCancel","showConverter","allowEmpty","displayName"],"sources":["../../../../src/components/color-view/color-input.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useState } from 'react';\nimport type {\n  ColorPickerProps,\n  InputImperativeActions,\n  InputProps,\n} from '@wix/design-system';\nimport {\n  ColorPicker,\n  FillButton,\n  FillPreview,\n  Input,\n  Popover,\n} from '@wix/design-system';\nimport ColorLib, { rgb } from 'color';\n\ntype ColorInstance = ReturnType<typeof rgb>;\n\nconst omitHash = (value: string) => value.replace(/^#/, '');\n\nconst isValidHex = (value: string): boolean =>\n  /^#?([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/.test(value);\n\nconst normalizeHex = (value: string): string | undefined => {\n  const cleaned = value.startsWith('#') ? value : `#${value}`;\n  if (isValidHex(cleaned)) {\n    return cleaned.toUpperCase();\n  }\n  return undefined;\n};\n\nconst safeColorLib = (value: string): ColorInstance | undefined => {\n  try {\n    return ColorLib(value);\n  } catch {\n    return undefined;\n  }\n};\n\nexport interface ColorInputProps\n  extends Omit<InputProps, 'value' | 'onChange' | 'prefix' | 'suffix'> {\n  value?: string;\n  onChange?: (hex: string) => void;\n}\n\nexport const ColorInput = forwardRef<InputImperativeActions, ColorInputProps>(\n  ({ value: colorValue, onChange, onBlur, ...props }, ref) => {\n    const [inputValue, setInputValue] = useState(\n      colorValue ? omitHash(colorValue) : '',\n    );\n    const [showPicker, setShowPicker] = useState(false);\n    const [pickerColor, setPickerColor] = useState<ColorInstance | undefined>(\n      colorValue ? safeColorLib(colorValue) : undefined,\n    );\n\n    const onInputChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        const raw = e.target.value;\n        setInputValue(raw);\n\n        const hex = normalizeHex(raw);\n        if (hex) {\n          onChange?.(hex);\n          setPickerColor(safeColorLib(hex));\n        }\n      },\n      [onChange],\n    );\n\n    const onInputBlur = useCallback(\n      (e: React.FocusEvent<HTMLInputElement>) => {\n        const hex = normalizeHex(inputValue);\n        if (hex) {\n          onChange?.(hex);\n          setInputValue(omitHash(hex));\n        } else if (colorValue) {\n          setInputValue(omitHash(colorValue));\n        } else {\n          setInputValue('');\n        }\n        onBlur?.(e);\n      },\n      [onChange, onBlur, inputValue, colorValue],\n    );\n\n    const onPickerConfirm = useCallback(\n      (confirmedColor: ColorPickerProps['value']) => {\n        const hex =\n          typeof confirmedColor === 'string'\n            ? confirmedColor\n            : confirmedColor?.hex()?.toUpperCase();\n        if (hex) {\n          onChange?.(hex);\n          setInputValue(omitHash(hex));\n          setPickerColor(safeColorLib(hex));\n        }\n        setShowPicker(false);\n      },\n      [onChange],\n    );\n\n    const onPickerCancel = useCallback(() => {\n      setPickerColor(colorValue ? safeColorLib(colorValue) : undefined);\n      setShowPicker(false);\n    }, [colorValue]);\n\n    const onPreviewClick = useCallback(() => {\n      setShowPicker((prev) => !prev);\n    }, []);\n\n    return (\n      <Input\n        {...props}\n        ref={ref}\n        value={inputValue}\n        onChange={onInputChange}\n        onBlur={onInputBlur}\n        prefix={<Input.Affix>#</Input.Affix>}\n        suffix={\n          <Input.Affix>\n            <Popover\n              shown={showPicker}\n              onClickOutside={() => setShowPicker(false)}\n              animate\n              flip\n              fixed={false}\n              placement=\"left-start\"\n              appendTo=\"scrollParent\"\n              moveBy={{ x: 6, y: 6 }}\n              zIndex={5001}\n            >\n              <Popover.Element>\n                {colorValue ? (\n                  <FillPreview fill={colorValue} onClick={onPreviewClick} />\n                ) : (\n                  <FillButton onClick={onPreviewClick} />\n                )}\n              </Popover.Element>\n              <Popover.Content>\n                <ColorPicker\n                  value={pickerColor as ColorPickerProps['value']}\n                  onChange={\n                    ((c: ColorPickerProps['value']) =>\n                      setPickerColor(\n                        c as ColorInstance | undefined,\n                      )) as ColorPickerProps['onChange']\n                  }\n                  onConfirm={onPickerConfirm}\n                  onCancel={onPickerCancel}\n                  showConverter\n                  allowEmpty\n                />\n              </Popover.Content>\n            </Popover>\n          </Input.Affix>\n        }\n      />\n    );\n  },\n);\n\nColorInput.displayName = 'ColorInput';\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_designSystem","_color","_interopRequireDefault","_useTranslations","_hex","_jsxFileName","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","safeColorLib","value","ColorLib","undefined","ColorInput","exports","forwardRef","colorValue","onChange","onFocus","onBlur","props","ref","useTranslations","inputValue","setInputValue","useState","omitHash","showPicker","setShowPicker","isFocused","setIsFocused","pickerColor","setPickerColor","onInputChange","useCallback","raw","target","hex","normalizeHex","onInputFocus","onInputBlur","onPickerConfirm","confirmedColor","_confirmedColor$hex","toUpperCase","onPickerCancel","onPreviewClick","prev","createElement","Input","_extends2","prefix","Affix","__self","__source","fileName","lineNumber","columnNumber","suffix","Popover","shown","onClickOutside","animate","flip","fixed","placement","appendTo","moveBy","x","y","zIndex","Element","FillButton","onClick","onMouseDown","preventDefault","tooltipContent","FillPreview","fill","Content","ColorPicker","c","onConfirm","onCancel","showConverter","allowEmpty","displayName"],"sources":["../../../../src/components/color-view/color-input.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useState } from 'react';\nimport type {\n  ColorPickerProps,\n  InputImperativeActions,\n  InputProps,\n} from '@wix/design-system';\nimport {\n  ColorPicker,\n  FillButton,\n  FillPreview,\n  Input,\n  Popover,\n} from '@wix/design-system';\nimport ColorLib, { rgb } from 'color';\n\nimport { useTranslations } from '../../hooks/use-translations';\nimport { normalizeHex, omitHash } from './hex';\n\ntype ColorInstance = ReturnType<typeof rgb>;\n\nconst safeColorLib = (value: string): ColorInstance | undefined => {\n  try {\n    return ColorLib(value);\n  } catch {\n    return undefined;\n  }\n};\n\nexport interface ColorInputProps\n  extends Omit<InputProps, 'value' | 'onChange' | 'prefix' | 'suffix'> {\n  value?: string;\n  onChange?: (hex: string) => void;\n}\n\nexport const ColorInput = forwardRef<InputImperativeActions, ColorInputProps>(\n  ({ value: colorValue, onChange, onFocus, onBlur, ...props }, ref) => {\n    const { t } = useTranslations();\n    const [inputValue, setInputValue] = useState(\n      colorValue ? omitHash(colorValue) : '',\n    );\n    const [showPicker, setShowPicker] = useState(false);\n    const [isFocused, setIsFocused] = useState(false);\n    const [pickerColor, setPickerColor] = useState<ColorInstance | undefined>(\n      colorValue ? safeColorLib(colorValue) : undefined,\n    );\n\n    const onInputChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        const raw = e.target.value;\n        setInputValue(raw);\n\n        const hex = normalizeHex(raw);\n        if (hex) {\n          onChange?.(hex);\n          setPickerColor(safeColorLib(hex));\n        }\n      },\n      [onChange],\n    );\n\n    const onInputFocus = useCallback(\n      (e: React.FocusEvent<HTMLInputElement>) => {\n        setIsFocused(true);\n        onFocus?.(e);\n      },\n      [onFocus],\n    );\n\n    const onInputBlur = useCallback(\n      (e: React.FocusEvent<HTMLInputElement>) => {\n        const hex = normalizeHex(inputValue);\n        if (hex) {\n          onChange?.(hex);\n          setInputValue(omitHash(hex));\n        } else if (colorValue) {\n          setInputValue(omitHash(colorValue));\n        } else {\n          setInputValue('');\n        }\n        setIsFocused(false);\n        onBlur?.(e);\n      },\n      [onChange, onBlur, inputValue, colorValue],\n    );\n\n    const onPickerConfirm = useCallback(\n      (confirmedColor: ColorPickerProps['value']) => {\n        const hex =\n          typeof confirmedColor === 'string'\n            ? confirmedColor\n            : confirmedColor?.hex()?.toUpperCase();\n        if (hex) {\n          onChange?.(hex);\n          setInputValue(omitHash(hex));\n          setPickerColor(safeColorLib(hex));\n        }\n        setShowPicker(false);\n      },\n      [onChange],\n    );\n\n    const onPickerCancel = useCallback(() => {\n      setPickerColor(colorValue ? safeColorLib(colorValue) : undefined);\n      setShowPicker(false);\n    }, [colorValue]);\n\n    const onPreviewClick = useCallback(() => {\n      setShowPicker((prev) => !prev);\n    }, []);\n\n    return (\n      <Input\n        {...props}\n        ref={ref}\n        value={inputValue}\n        onChange={onInputChange}\n        onFocus={onInputFocus}\n        onBlur={onInputBlur}\n        prefix={<Input.Affix>#</Input.Affix>}\n        suffix={\n          <Input.Affix>\n            <Popover\n              shown={showPicker}\n              onClickOutside={() => setShowPicker(false)}\n              animate\n              flip\n              fixed={false}\n              placement=\"left-start\"\n              appendTo=\"scrollParent\"\n              moveBy={{ x: 6, y: 6 }}\n              zIndex={5001}\n            >\n              <Popover.Element>\n                {!colorValue && (isFocused || showPicker) ? (\n                  <FillButton\n                    onClick={onPreviewClick}\n                    onMouseDown={(e) => e.preventDefault()}\n                    tooltipContent={t('auto-patterns.fields.add_color_tooltip')}\n                  />\n                ) : (\n                  <FillPreview fill={colorValue} onClick={onPreviewClick} />\n                )}\n              </Popover.Element>\n              <Popover.Content>\n                <ColorPicker\n                  value={pickerColor as ColorPickerProps['value']}\n                  onChange={\n                    ((c: ColorPickerProps['value']) =>\n                      setPickerColor(\n                        c as ColorInstance | undefined,\n                      )) as ColorPickerProps['onChange']\n                  }\n                  onConfirm={onPickerConfirm}\n                  onCancel={onPickerCancel}\n                  showConverter\n                  allowEmpty\n                />\n              </Popover.Content>\n            </Popover>\n          </Input.Affix>\n        }\n      />\n    );\n  },\n);\n\nColorInput.displayName = 'ColorInput';\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/components/color-view/color-view.st.css.js

@@ -5,16 +5,16 @@ exports.vars = exports.style = exports.stVars = exports.st = exports.namespace =
 var _stylableEsmRuntime = require("../../stylable-esm-runtime.js");
 // @ts-nocheck
 
-var _namespace_ = "colorview2050727220";
+var _namespace_ = "colorview3463757835";
 var _style_ = _stylableEsmRuntime.classesRuntime.bind(null, _namespace_);
 var cssStates = exports.cssStates = _stylableEsmRuntime.statesRuntime.bind(null, _namespace_);
 var style = exports.style = _style_;
 var st = exports.st = _style_;
 var namespace = exports.namespace = _namespace_;
 var classes = exports.classes = {
-  "root": "colorview2050727220__root",
-  "view": "colorview2050727220__view",
-  "fillPreview": "colorview2050727220__fillPreview"
+  "root": "colorview3463757835__root",
+  "view": "colorview3463757835__view",
+  "fillPreview": "colorview3463757835__fillPreview"
 };
 var keyframes = exports.keyframes = {};
 var layers = exports.layers = {};

package/dist/cjs/components/color-view/color-view.st.css.js.map

@@ -1 +1 @@
-{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../src/components/color-view/color-view.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"colorview2050727220\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style: import(\"@stylable/runtime\").STFunction = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"colorview2050727220__root\",\"view\":\"colorview2050727220__view\",\"fillPreview\":\"colorview2050727220__fillPreview\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,qBAAqB;AACvC,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAA6C,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AAC3D,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC,2BAA2B;EAAC,MAAM,EAAC,2BAA2B;EAAC,aAAa,EAAC;AAAkC,CAAC;AACtI,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../src/components/color-view/color-view.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"colorview3463757835\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style: import(\"@stylable/runtime\").STFunction = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"colorview3463757835__root\",\"view\":\"colorview3463757835__view\",\"fillPreview\":\"colorview3463757835__fillPreview\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,qBAAqB;AACvC,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAA6C,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AAC3D,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC,2BAA2B;EAAC,MAAM,EAAC,2BAA2B;EAAC,aAAa,EAAC;AAAkC,CAAC;AACtI,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG,CAAC,CAAC","ignoreList":[]}