@wix/patterns-fields 1.39.0 → 1.41.0

package/src/components/color-view/cell-color-view.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { Box, FillPreview, Text } from '@wix/design-system';
+import { classes } from './cell-color-view.st.css.js';
+import { HEX_RE } from './hex';
+
+export interface CellColorViewProps {
+  value?: string;
+}
+
+/**
+ * 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.
+ */
+export const CellColorView: React.FC<CellColorViewProps> = ({ value }) => {
+  const isValid = !!value && HEX_RE.test(value);
+  const hex = value ? value.replace(/^#/, '').toUpperCase() : '';
+
+  return (
+    <Box
+      width="100%"
+      verticalAlign="middle"
+      align="space-between"
+      gap="SP1"
+      dataHook="cell-color-view"
+    >
+      <Box gap="SP1" verticalAlign="middle">
+        <Box className={classes.hashPrefix} dataHook="cell-color-view-hash">
+          #
+        </Box>
+        {hex ? (
+          <Text size="small" weight="thin" dataHook="cell-color-view-text">
+            {hex}
+          </Text>
+        ) : null}
+      </Box>
+      <Box width="24px" height="24px" flexShrink={0}>
+        <FillPreview
+          fill={isValid ? value : undefined}
+          aspectRatio={1}
+          dataHook="cell-color-view-fill-preview"
+        />
+      </Box>
+    </Box>
+  );
+};
+
+CellColorView.displayName = 'CellColorView';

package/src/components/color-view/color-input.tsx

@@ -13,20 +13,10 @@ import {
 } from '@wix/design-system';
 import ColorLib, { rgb } from 'color';
 
-type ColorInstance = ReturnType<typeof rgb>;
-
-const omitHash = (value: string) => value.replace(/^#/, '');
-
-const isValidHex = (value: string): boolean =>
-  /^#?([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/.test(value);
+import { useTranslations } from '../../hooks/use-translations';
+import { normalizeHex, omitHash } from './hex';
 
-const normalizeHex = (value: string): string | undefined => {
-  const cleaned = value.startsWith('#') ? value : `#${value}`;
-  if (isValidHex(cleaned)) {
-    return cleaned.toUpperCase();
-  }
-  return undefined;
-};
+type ColorInstance = ReturnType<typeof rgb>;
 
 const safeColorLib = (value: string): ColorInstance | undefined => {
   try {
@@ -43,11 +33,13 @@ export interface ColorInputProps
 }
 
 export const ColorInput = forwardRef<InputImperativeActions, ColorInputProps>(
-  ({ value: colorValue, onChange, onBlur, ...props }, ref) => {
+  ({ value: colorValue, onChange, onFocus, onBlur, ...props }, ref) => {
+    const { t } = useTranslations();
     const [inputValue, setInputValue] = useState(
       colorValue ? omitHash(colorValue) : '',
     );
     const [showPicker, setShowPicker] = useState(false);
+    const [isFocused, setIsFocused] = useState(false);
     const [pickerColor, setPickerColor] = useState<ColorInstance | undefined>(
       colorValue ? safeColorLib(colorValue) : undefined,
     );
@@ -66,6 +58,14 @@ export const ColorInput = forwardRef<InputImperativeActions, ColorInputProps>(
       [onChange],
     );
 
+    const onInputFocus = useCallback(
+      (e: React.FocusEvent<HTMLInputElement>) => {
+        setIsFocused(true);
+        onFocus?.(e);
+      },
+      [onFocus],
+    );
+
     const onInputBlur = useCallback(
       (e: React.FocusEvent<HTMLInputElement>) => {
         const hex = normalizeHex(inputValue);
@@ -77,6 +77,7 @@ export const ColorInput = forwardRef<InputImperativeActions, ColorInputProps>(
         } else {
           setInputValue('');
         }
+        setIsFocused(false);
         onBlur?.(e);
       },
       [onChange, onBlur, inputValue, colorValue],
@@ -113,6 +114,7 @@ export const ColorInput = forwardRef<InputImperativeActions, ColorInputProps>(
         ref={ref}
         value={inputValue}
         onChange={onInputChange}
+        onFocus={onInputFocus}
         onBlur={onInputBlur}
         prefix={<Input.Affix>#</Input.Affix>}
         suffix={
@@ -129,10 +131,14 @@ export const ColorInput = forwardRef<InputImperativeActions, ColorInputProps>(
               zIndex={5001}
             >
               <Popover.Element>
-                {colorValue ? (
-                  <FillPreview fill={colorValue} onClick={onPreviewClick} />
+                {!colorValue && (isFocused || showPicker) ? (
+                  <FillButton
+                    onClick={onPreviewClick}
+                    onMouseDown={(e) => e.preventDefault()}
+                    tooltipContent={t('auto-patterns.fields.add_color_tooltip')}
+                  />
                 ) : (
-                  <FillButton onClick={onPreviewClick} />
+                  <FillPreview fill={colorValue} onClick={onPreviewClick} />
                 )}
               </Popover.Element>
               <Popover.Content>

package/src/components/color-view/color-view.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "colorview2050727220";
+var _namespace_ = "colorview3463757835";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"colorview2050727220__root","view":"colorview2050727220__view","fillPreview":"colorview2050727220__fillPreview"};
+export var classes = {"root":"colorview3463757835__root","view":"colorview3463757835__view","fillPreview":"colorview3463757835__fillPreview"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/color-view/hex.ts

@@ -0,0 +1,13 @@
+export const HEX_RE = /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/;
+
+const HEX_OPTIONAL_HASH_RE = /^#?([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/;
+
+export const omitHash = (value: string): string => value.replace(/^#/, '');
+
+export const isValidHex = (value: string): boolean =>
+  HEX_OPTIONAL_HASH_RE.test(value);
+
+export const normalizeHex = (value: string): string | undefined => {
+  const cleaned = value.startsWith('#') ? value : `#${value}`;
+  return HEX_RE.test(cleaned) ? cleaned.toUpperCase() : undefined;
+};

package/src/components/color-view/index.ts

@@ -1,4 +1,7 @@
 export * from './color-view';
+export * from './cell-color-view';
 export * from './color-input';
+export * from './cell-color-input';
 export * from './form-color';
 export * from './form-color-input';
+export * from './hex';

package/src/components/delete-dialog/delete-dialog.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "deletedialog455934700";
+var _namespace_ = "deletedialog908586734";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"deletedialog455934700__root","layout":"deletedialog455934700__layout"};
+export var classes = {"root":"deletedialog908586734__root","layout":"deletedialog908586734__layout"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/document/form-document-field.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "formdocumentfield4091006645";
+var _namespace_ = "formdocumentfield3681439606";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"formdocumentfield4091006645__root","viewWrapper":"formdocumentfield4091006645__viewWrapper","textWidth":"formdocumentfield4091006645__textWidth","documentLoader":"formdocumentfield4091006645__documentLoader","addDocument":"formdocumentfield4091006645__addDocument","addItemWrapper":"formdocumentfield4091006645__addItemWrapper"};
+export var classes = {"root":"formdocumentfield3681439606__root","viewWrapper":"formdocumentfield3681439606__viewWrapper","textWidth":"formdocumentfield3681439606__textWidth","documentLoader":"formdocumentfield3681439606__documentLoader","addDocument":"formdocumentfield3681439606__addDocument","addItemWrapper":"formdocumentfield3681439606__addItemWrapper"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/exclamation/exclamation.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "exclamation1691525640";
+var _namespace_ = "exclamation2363706594";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"exclamation1691525640__root","exclamation":"exclamation1691525640__exclamation","actions":"exclamation1691525640__actions","action":"exclamation1691525640__action"};
+export var classes = {"root":"exclamation2363706594__root","exclamation":"exclamation2363706594__exclamation","actions":"exclamation2363706594__actions","action":"exclamation2363706594__action"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/highlighted-text/highlighted-text.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "highlightedtext1920784841";
+var _namespace_ = "highlightedtext3971272452";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,8 +13,8 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"highlightedtext1920784841__root","substring":"highlightedtext1920784841__substring"};
-export var keyframes = {"highlighted":"highlightedtext1920784841__highlighted","highlighted-match":"highlightedtext1920784841__highlighted-match"}; 
+export var classes = {"root":"highlightedtext3971272452__root","substring":"highlightedtext3971272452__substring"};
+export var keyframes = {"highlighted":"highlightedtext3971272452__highlighted","highlighted-match":"highlightedtext3971272452__highlighted-match"}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 

package/src/components/image/thumbnail-replace-overlay.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "thumbnailreplaceoverlay1049657370";
+var _namespace_ = "thumbnailreplaceoverlay2487678945";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"thumbnailreplaceoverlay1049657370__root","icon":"thumbnailreplaceoverlay1049657370__icon"};
+export var classes = {"root":"thumbnailreplaceoverlay2487678945__root","icon":"thumbnailreplaceoverlay2487678945__icon"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/media-control/cell-media-edit-shell.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "cellmediaeditshell298960076";
+var _namespace_ = "cellmediaeditshell3505962653";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"cellmediaeditshell298960076__root"};
+export var classes = {"root":"cellmediaeditshell3505962653__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/media-control/paste-url-button.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "pasteurlbutton3527200609";
+var _namespace_ = "pasteurlbutton1818112565";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"pasteurlbutton3527200609__root","iconButtonTooltip":"pasteurlbutton3527200609__iconButtonTooltip","iconButton":"pasteurlbutton3527200609__iconButton"};
+export var classes = {"root":"pasteurlbutton1818112565__root","iconButtonTooltip":"pasteurlbutton1818112565__iconButtonTooltip","iconButton":"pasteurlbutton1818112565__iconButton"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/media-gallery/form-media-gallery-field.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "formmediagalleryfield3185835316";
+var _namespace_ = "formmediagalleryfield2963289117";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"formmediagalleryfield3185835316__root","container":"formmediagalleryfield3185835316__container","viewBox":"formmediagalleryfield3185835316__viewBox","addItemWrapper":"formmediagalleryfield3185835316__addItemWrapper","addItem":"formmediagalleryfield3185835316__addItem","overlay":"formmediagalleryfield3185835316__overlay","image":"formmediagalleryfield3185835316__image","previewImage":"formmediagalleryfield3185835316__previewImage","previewVideo":"formmediagalleryfield3185835316__previewVideo"};
+export var classes = {"root":"formmediagalleryfield2963289117__root","container":"formmediagalleryfield2963289117__container","viewBox":"formmediagalleryfield2963289117__viewBox","addItemWrapper":"formmediagalleryfield2963289117__addItemWrapper","addItem":"formmediagalleryfield2963289117__addItem","overlay":"formmediagalleryfield2963289117__overlay","image":"formmediagalleryfield2963289117__image","previewImage":"formmediagalleryfield2963289117__previewImage","previewVideo":"formmediagalleryfield2963289117__previewVideo"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/media-image/media-image.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "mediaimage1127028169";
+var _namespace_ = "mediaimage805645738";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,12 +13,12 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"mediaimage1127028169__root"};
+export var classes = {"root":"mediaimage805645738__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 
-export var vars = {"wds-color-red-200":"--wds-color-red-200","wsr-color-R20":"--wsr-color-R20","wds-color-black-550":"--wds-color-black-550","wsr-color-D55":"--wsr-color-D55","from":"--mediaimage1127028169-from","to":"--mediaimage1127028169-to"}; 
+export var vars = {"wds-color-red-200":"--wds-color-red-200","wsr-color-R20":"--wsr-color-R20","wds-color-black-550":"--wds-color-black-550","wsr-color-D55":"--wsr-color-D55","from":"--mediaimage805645738-from","to":"--mediaimage805645738-to"}; 
 
 
 

package/src/components/media-image/overlays/overlay.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "overlay2544936598";
+var _namespace_ = "overlay4045146886";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"overlay2544936598__root","iconOverlay":"overlay2544936598__iconOverlay"};
+export var classes = {"root":"overlay4045146886__root","iconOverlay":"overlay4045146886__iconOverlay"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/media-loader/media-loader.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "medialoader3457330724";
+var _namespace_ = "medialoader2381278212";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"medialoader3457330724__root","loader":"medialoader3457330724__loader"};
+export var classes = {"root":"medialoader2381278212__root","loader":"medialoader2381278212__loader"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/media-tag/web-media-tag/media-tag.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "mediatag3625691514";
+var _namespace_ = "mediatag1080651885";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"mediatag3625691514__root"};
+export var classes = {"root":"mediatag1080651885__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};