@wix/patterns-fields 1.17.0 → 1.20.0

package/src/components/rich-text/rich-text-input/rich-text-editor/toolbar/toolbar.st.css

@@ -2,6 +2,7 @@
 @property st-global(--wds-color-black-400);
 @property st-global(--wds-color-white);
 @property st-global(--wds-font-family-default);
+@property st-global(--wsr-font-family);
 @property st-global(--wds-font-weight-medium);
 @property st-global(--wds-font-weight-bold);
 @property st-global(--wds-font-size-500);
@@ -10,8 +11,8 @@
 .root {
     padding: 12px 18px;
     display: flex;
-    border-bottom: 1px solid var(--wds-color-blue-400);
-    background: var(--wds-color-white);
+    border-bottom: 1px solid var(--wds-color-blue-400, var(--wsr-color-B40, #d6dcff));
+    background: var(--wds-color-white, var(--wsr-color-D80, #ffffff));
     align-items: center;
 }
 
@@ -30,7 +31,7 @@
     display: inline-flex;
     margin-right: 12px;
     border-left: 1px solid #ddd;
-    height: 100%;
+    align-self: stretch;
 }
 
 .clearFormatting {
@@ -65,53 +66,53 @@
     font-weight: var(--wds-font-weight-bold) !important;
     font-size: 36px !important;
     line-height: 1.2 !important;
-    font-family: var(--wds-font-family-default) !important;
+    font-family: var(--wds-font-family-default, var(--wsr-font-family, Madefor)) !important;
 }
 .dropdownHeaderTwo {
     font-weight: var(--wds-font-weight-bold) !important;
     font-size: 32px !important;
     line-height: 1.2 !important;
-    font-family: var(--wds-font-family-default) !important;
+    font-family: var(--wds-font-family-default, Madefor, "Helvetica Neue", Helvetica, Arial, sans-serif) !important;
 }
 .dropdownHeaderThree {
     font-weight: var(--wds-font-weight-medium) !important;
     font-size: 28px !important;
     line-height: 1.2 !important;
-    font-family: var(--wds-font-family-default) !important;
+    font-family: var(--wds-font-family-default, Madefor, "Helvetica Neue", Helvetica, Arial, sans-serif) !important;
 }
 .dropdownHeaderFour {
     font-weight: var(--wds-font-weight-bold) !important;
     font-size: 24px !important;
     line-height: 1.2 !important;
-    font-family: var(--wds-font-family-default) !important;
+    font-family: var(--wds-font-family-default, Madefor, "Helvetica Neue", Helvetica, Arial, sans-serif) !important;
 }
 .dropdownHeaderFive {
     font-weight: var(--wds-font-weight-bold) !important;
     font-size: 22px !important;
     line-height: 1.2 !important;
-    font-family: var(--wds-font-family-default) !important;
+    font-family: var(--wds-font-family-default, Madefor, "Helvetica Neue", Helvetica, Arial, sans-serif) !important;
 }
 .dropdownHeaderSix {
     font-weight: var(--wds-font-weight-medium) !important;
     font-size: 20px !important;
     line-height: 1.2 !important;
-    font-family: var(--wds-font-family-default) !important;
+    font-family: var(--wds-font-family-default, Madefor, "Helvetica Neue", Helvetica, Arial, sans-serif) !important;
 }
 .dropdownParagraphOne {
     font-weight: var(--wds-font-weight-medium) !important;
     font-size: 18px !important;
     line-height: 1.33 !important;
-    font-family: var(--wds-font-family-default) !important;
+    font-family: var(--wds-font-family-default, Madefor, "Helvetica Neue", Helvetica, Arial, sans-serif) !important;
 }
 .dropdownNormalText {
     font-weight: var(--wds-font-weight-medium) !important;
     font-size: var(--wds-font-size-500) !important;
     line-height: var(--wds-font-line-height-300) !important;
-    font-family: var(--wds-font-family-default) !important;
+    font-family: var(--wds-font-family-default, Madefor, "Helvetica Neue", Helvetica, Arial, sans-serif) !important;
 }
 .dropdownParagraphThree {
     font-weight: var(--wds-font-weight-medium) !important;
     font-size: 14px !important;
     line-height: 1.29 !important;
-    font-family: var(--wds-font-family-default) !important;
+    font-family: var(--wds-font-family-default, Madefor, "Helvetica Neue", Helvetica, Arial, sans-serif) !important;
 }

package/src/components/rich-text/rich-text-input/rich-text-editor/toolbar/toolbar.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../../stylable-esm-runti
 
 
 
-var _namespace_ = "toolbar2031504778";
+var _namespace_ = "toolbar3885570681";
 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":"toolbar2031504778__root","item":"toolbar2031504778__item","separator":"toolbar2031504778__separator","clearFormatting":"toolbar2031504778__clearFormatting","fullScreen":"toolbar2031504778__fullScreen","dropdownItemContent":"toolbar2031504778__dropdownItemContent","dropdownItemTitle":"toolbar2031504778__dropdownItemTitle","dropdownItemSubtitle":"toolbar2031504778__dropdownItemSubtitle","dropdownHeaderOne":"toolbar2031504778__dropdownHeaderOne","dropdownHeaderTwo":"toolbar2031504778__dropdownHeaderTwo","dropdownHeaderThree":"toolbar2031504778__dropdownHeaderThree","dropdownHeaderFour":"toolbar2031504778__dropdownHeaderFour","dropdownHeaderFive":"toolbar2031504778__dropdownHeaderFive","dropdownHeaderSix":"toolbar2031504778__dropdownHeaderSix","dropdownParagraphOne":"toolbar2031504778__dropdownParagraphOne","dropdownNormalText":"toolbar2031504778__dropdownNormalText","dropdownParagraphThree":"toolbar2031504778__dropdownParagraphThree"};
+export var classes = {"root":"toolbar3885570681__root","item":"toolbar3885570681__item","separator":"toolbar3885570681__separator","clearFormatting":"toolbar3885570681__clearFormatting","fullScreen":"toolbar3885570681__fullScreen","dropdownItemContent":"toolbar3885570681__dropdownItemContent","dropdownItemTitle":"toolbar3885570681__dropdownItemTitle","dropdownItemSubtitle":"toolbar3885570681__dropdownItemSubtitle","dropdownHeaderOne":"toolbar3885570681__dropdownHeaderOne","dropdownHeaderTwo":"toolbar3885570681__dropdownHeaderTwo","dropdownHeaderThree":"toolbar3885570681__dropdownHeaderThree","dropdownHeaderFour":"toolbar3885570681__dropdownHeaderFour","dropdownHeaderFive":"toolbar3885570681__dropdownHeaderFive","dropdownHeaderSix":"toolbar3885570681__dropdownHeaderSix","dropdownParagraphOne":"toolbar3885570681__dropdownParagraphOne","dropdownNormalText":"toolbar3885570681__dropdownNormalText","dropdownParagraphThree":"toolbar3885570681__dropdownParagraphThree"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 
-export var vars = {"wds-color-blue-400":"--wds-color-blue-400","wds-color-black-400":"--wds-color-black-400","wds-color-white":"--wds-color-white","wds-font-family-default":"--wds-font-family-default","wds-font-weight-medium":"--wds-font-weight-medium","wds-font-weight-bold":"--wds-font-weight-bold","wds-font-size-500":"--wds-font-size-500","wds-font-line-height-300":"--wds-font-line-height-300"}; 
+export var vars = {"wds-color-blue-400":"--wds-color-blue-400","wds-color-black-400":"--wds-color-black-400","wds-color-white":"--wds-color-white","wds-font-family-default":"--wds-font-family-default","wsr-font-family":"--wsr-font-family","wds-font-weight-medium":"--wds-font-weight-medium","wds-font-weight-bold":"--wds-font-weight-bold","wds-font-size-500":"--wds-font-size-500","wds-font-line-height-300":"--wds-font-line-height-300","wsr-color-B40":"--toolbar3885570681-wsr-color-B40","wsr-color-D80":"--toolbar3885570681-wsr-color-D80"}; 
 
 
 

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "textview4186768641";
+var _namespace_ = "textview2328621760";
 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":"textview4186768641__root","textView":"textview4186768641__textView"};
+export var classes = {"root":"textview2328621760__root","textView":"textview2328621760__textView"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/video/cell-video-edit.tsx

@@ -0,0 +1,308 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import {
+  Box,
+  IconButton,
+  Loader,
+  PopoverMenu,
+  Tooltip,
+} from '@wix/design-system';
+import {
+  Add,
+  Delete,
+  Download,
+  Maximize,
+  MoreSmall,
+  Replace,
+} from '@wix/wix-ui-icons-common';
+import { MEDIA_TYPES } from '../../utils/media-utils';
+import { useTranslations } from '../../hooks';
+import { useMediaControl } from '../media-control';
+import { ImageThumbnail } from '../image/image-thumbnail';
+import { ThumbnailReplaceOverlay } from '../image/thumbnail-replace-overlay';
+import { MediaPreviewModal } from '../media-gallery/media-preview-modal';
+
+export interface CellVideoEditProps {
+  value: string | null | undefined;
+  onChange: (value: string | null) => void;
+  onCommit: () => void;
+  onCancel?: () => void;
+  /**
+   * Called before opening external UI (media manager) so the table can set
+   * isEditing=true and protect cell focus while the modal is open.
+   */
+  onStartEdit?: () => void;
+  /** Called to return focus to the table cell (e.g. on Escape or Tab-out). */
+  onRequestCellFocus?: () => void;
+  inputRef?: React.MutableRefObject<{ focus: () => void } | null | undefined>;
+  dataHook?: string;
+}
+
+export const CellVideoEdit: React.FC<CellVideoEditProps> = ({
+  value,
+  onChange,
+  onCommit,
+  onCancel,
+  onStartEdit,
+  onRequestCellFocus,
+  inputRef,
+  dataHook,
+}) => {
+  const { t } = useTranslations();
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const [isPreviewOpen, setIsPreviewOpen] = useState(false);
+
+  // Explicit refs for each focusable button — avoids querySelectorAll on the container.
+  const thumbnailButtonRef = useRef<HTMLButtonElement | null>(null);
+  const addButtonRef = useRef<React.ElementRef<typeof IconButton> | null>(null);
+  const moreButtonRef = useRef<React.ElementRef<typeof IconButton> | null>(
+    null,
+  );
+
+  const onMediaChange = useCallback(
+    (uri: string) => {
+      onChange(uri);
+      onCommit();
+    },
+    [onChange, onCommit],
+  );
+
+  const { callMedia, downloadMedia, loading } = useMediaControl({
+    mediaType: MEDIA_TYPES.VIDEO,
+    value: value ?? undefined,
+    onChange: onMediaChange,
+  });
+
+  const handleCallMedia = useCallback(async () => {
+    onStartEdit?.();
+    const committed = await callMedia();
+    if (!committed) {
+      onCancel?.();
+    }
+  }, [onStartEdit, callMedia, onCancel]);
+
+  const handleDelete = useCallback(() => {
+    onChange(null);
+    onCommit();
+  }, [onChange, onCommit]);
+
+  const handleDownload = useCallback(() => {
+    if (value) {
+      downloadMedia(value);
+    }
+  }, [downloadMedia, value]);
+
+  // Wire inputRef so the table can focus the first button when activating edit mode.
+  useEffect(() => {
+    if (!inputRef) return;
+    inputRef.current = {
+      focus: () => {
+        // Only one of these is mounted at a time depending on whether value is set.
+        thumbnailButtonRef.current?.focus();
+        addButtonRef.current?.focus();
+      },
+    };
+    return () => {
+      inputRef.current = null;
+    };
+  }, [inputRef]);
+
+  const handleContainerFocus = useCallback(() => {
+    containerRef.current?.setAttribute('data-inner-focused', '');
+  }, []);
+
+  const handleContainerBlur = useCallback((e: React.FocusEvent) => {
+    if (!e.currentTarget.contains(e.relatedTarget as Node | null)) {
+      containerRef.current?.removeAttribute('data-inner-focused');
+    }
+  }, []);
+
+  // Native keydown listener to intercept Tab/Escape before useKeyboardNavigation.
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        e.stopPropagation();
+        onCancel?.();
+        onRequestCellFocus?.();
+        return;
+      }
+
+      if (e.key === 'Tab') {
+        const active = document.activeElement as HTMLElement | null;
+        if (!active || !el.contains(active)) return;
+
+        const hook = active.getAttribute('data-hook');
+        const isPrimary =
+          hook === 'video-edit-thumbnail' || hook === 'video-edit-add-button';
+        const isMore = hook === 'video-edit-more-button';
+        if (!isPrimary && !isMore) return;
+
+        e.preventDefault();
+        e.stopPropagation();
+
+        const focusPrimary = () => {
+          thumbnailButtonRef.current?.focus();
+          addButtonRef.current?.focus();
+        };
+
+        if (!e.shiftKey) {
+          // Forward: primary → more → cell
+          if (isPrimary && moreButtonRef.current) {
+            moreButtonRef.current.focus();
+          } else {
+            onRequestCellFocus?.();
+          }
+        } else {
+          // Backward: more → primary → cell
+          if (isMore) {
+            focusPrimary();
+          } else {
+            onRequestCellFocus?.();
+          }
+        }
+      }
+    };
+
+    el.addEventListener('keydown', handleKeyDown);
+    return () => el.removeEventListener('keydown', handleKeyDown);
+  }, [onCancel, onRequestCellFocus]);
+
+  if (loading) {
+    return (
+      <Box
+        dataHook={dataHook}
+        verticalAlign="middle"
+        width="100%"
+        height="100%"
+        padding="0 8px"
+      >
+        <Loader size="tiny" />
+      </Box>
+    );
+  }
+
+  return (
+    <div
+      ref={containerRef}
+      data-hook={dataHook}
+      style={{ width: '100%', height: '100%' }}
+      onFocus={handleContainerFocus}
+      onBlur={handleContainerBlur}
+    >
+      <Box
+        align="space-between"
+        verticalAlign="middle"
+        height="100%"
+        padding="0 8px"
+        style={{ boxSizing: 'border-box' }}
+      >
+        {value ? (
+          /* Has value: clickable thumbnail button with replace overlay */
+          <Tooltip content={t('CMS.video.change')} appendTo="window">
+            <Box>
+              <button
+                ref={thumbnailButtonRef}
+                type="button"
+                data-hook="video-edit-thumbnail"
+                onClick={handleCallMedia}
+                style={{
+                  cursor: 'pointer',
+                  lineHeight: 0,
+                  position: 'relative',
+                  background: 'none',
+                  border: 'none',
+                  padding: 0,
+                }}
+              >
+                <ImageThumbnail value={value} showVideoIndicator={false} />
+                <ThumbnailReplaceOverlay />
+              </button>
+            </Box>
+          </Tooltip>
+        ) : (
+          /* Empty: icon button opens media manager */
+          <Tooltip content={t('CMS.video.add')} appendTo="window">
+            <IconButton
+              ref={addButtonRef}
+              size="tiny"
+              priority="secondary"
+              dataHook="video-edit-add-button"
+              onClick={handleCallMedia}
+            >
+              <Add />
+            </IconButton>
+          </Tooltip>
+        )}
+
+        <MediaPreviewModal
+          isOpen={isPreviewOpen}
+          onClose={() => setIsPreviewOpen(false)}
+          value={value ?? undefined}
+          onRequestMedia={handleCallMedia}
+          onClearMedia={handleDelete}
+          onDownloadMedia={() => handleDownload()}
+          textKeys={{
+            replace: 'CMS.video.change',
+            download: 'CMS.video.download',
+            delete: 'CMS.video.delete',
+          }}
+        />
+        {value ? (
+          /* Has value: "..." menu with Change / Preview / Download / Delete */
+          <PopoverMenu
+            textSize="small"
+            appendTo="window"
+            triggerElement={
+              <Tooltip
+                content={t('auto-patterns.fields.more_actions_tooltip')}
+                appendTo="window"
+              >
+                <IconButton
+                  ref={moreButtonRef}
+                  size="tiny"
+                  priority="tertiary"
+                  dataHook="video-edit-more-button"
+                >
+                  <MoreSmall />
+                </IconButton>
+              </Tooltip>
+            }
+          >
+            <PopoverMenu.MenuItem
+              dataHook="video-edit-action-change"
+              text={t('CMS.video.change')}
+              prefixIcon={<Replace />}
+              onClick={handleCallMedia}
+            />
+            <PopoverMenu.Divider />
+            <PopoverMenu.MenuItem
+              dataHook="video-edit-action-preview"
+              text={t('CMS.video.preview')}
+              prefixIcon={<Maximize />}
+              onClick={() => setIsPreviewOpen(true)}
+            />
+            <PopoverMenu.MenuItem
+              dataHook="video-edit-action-download"
+              text={t('CMS.video.download')}
+              prefixIcon={<Download />}
+              onClick={handleDownload}
+            />
+            <PopoverMenu.Divider />
+            <PopoverMenu.MenuItem
+              dataHook="video-edit-action-delete"
+              text={t('CMS.video.delete')}
+              skin="destructive"
+              prefixIcon={<Delete />}
+              onClick={handleDelete}
+            />
+          </PopoverMenu>
+        ) : null}
+      </Box>
+    </div>
+  );
+};
+
+CellVideoEdit.displayName = 'CellVideoEdit';

package/src/components/video/index.ts

@@ -1,2 +1,4 @@
 export { VideoView } from './video-view';
 export type { VideoViewProps } from './video-view';
+export { CellVideoEdit } from './cell-video-edit';
+export type { CellVideoEditProps } from './cell-video-edit';

package/src/exports/cell-rich-content-input.ts

@@ -0,0 +1,4 @@
+export {
+  CellRichContentInput,
+  CellRichContentInputProps,
+} from '../components/rich-content/cell-rich-content-input';

package/src/exports/form-rich-content-input.ts

@@ -1,5 +1 @@
-export {
-  FormRichContentInput,
-  CellRichContentInput,
-} from '../components/rich-content/editor';
-export type { CellRichContentInputProps } from '../components/rich-content/editor';
+export { FormRichContentInput } from '../components/rich-content/rich-content-input/form-input/form-input';

package/src/hooks/index.ts

@@ -6,3 +6,4 @@ export * from './use-open-state';
 export * from './use-translations';
 export * from './use-with-callback';
 export * from './use-resize-effect';
+export * from './use-cell-edit-keyboard';

package/src/hooks/use-cell-edit-keyboard.ts

@@ -0,0 +1,109 @@
+import { useCallback, useEffect } from 'react';
+import React from 'react';
+
+interface UseCellEditKeyboardOptions {
+  containerRef: React.RefObject<HTMLDivElement | null>;
+  onCancel?: () => void;
+  inputRef?: React.MutableRefObject<{ focus: () => void } | null | undefined>;
+}
+
+interface UseCellEditKeyboardResult {
+  handleContainerFocus: () => void;
+  handleContainerBlur: (e: React.FocusEvent) => void;
+}
+
+/**
+ * Shared keyboard/focus wiring for cell-edit components that contain buttons.
+ *
+ * - Wires inputRef so the parent table can focus the first button on Enter.
+ * - Sets/removes data-inner-focused on the container for CSS styling.
+ * - Native keydown handler: Escape → onCancel + return focus to gridcell;
+ *   Tab / Shift+Tab → cycle through buttons, Tab off last returns to gridcell.
+ *
+ * Must use a native listener (not React onKeyDown) so stopPropagation fires
+ * before the React root's useKeyboardNavigation intercepts Tab.
+ */
+export function useCellEditKeyboard({
+  containerRef,
+  onCancel,
+  inputRef,
+}: UseCellEditKeyboardOptions): UseCellEditKeyboardResult {
+  useEffect(() => {
+    if (!inputRef) return;
+    inputRef.current = {
+      focus: () => {
+        const first =
+          containerRef.current?.querySelectorAll<HTMLElement>('button')[0];
+        first?.focus();
+      },
+    };
+    return () => {
+      inputRef.current = null;
+    };
+  }, [inputRef, containerRef]);
+
+  const handleContainerFocus = useCallback(() => {
+    containerRef.current?.setAttribute('data-inner-focused', '');
+  }, [containerRef]);
+
+  const handleContainerBlur = useCallback(
+    (e: React.FocusEvent) => {
+      if (!e.currentTarget.contains(e.relatedTarget as Node | null)) {
+        containerRef.current?.removeAttribute('data-inner-focused');
+      }
+    },
+    [containerRef],
+  );
+
+  const focusCell = useCallback(() => {
+    const cellDiv = containerRef.current?.closest(
+      '[role="gridcell"]',
+    ) as HTMLElement | null;
+    cellDiv?.focus({ preventScroll: true });
+  }, [containerRef]);
+
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        e.stopPropagation();
+        onCancel?.();
+        focusCell();
+        return;
+      }
+
+      if (e.key === 'Tab') {
+        const buttons = Array.from(el.querySelectorAll<HTMLElement>('button'));
+        const currentIdx = buttons.indexOf(
+          document.activeElement as HTMLElement,
+        );
+        if (currentIdx === -1) return;
+
+        e.preventDefault();
+        e.stopPropagation();
+
+        if (!e.shiftKey) {
+          if (currentIdx >= buttons.length - 1) {
+            focusCell();
+          } else {
+            buttons[currentIdx + 1]?.focus();
+          }
+        } else {
+          if (currentIdx <= 0) {
+            focusCell();
+          } else {
+            buttons[currentIdx - 1]?.focus();
+          }
+        }
+      }
+    };
+
+    el.addEventListener('keydown', handleKeyDown);
+    return () => el.removeEventListener('keydown', handleKeyDown);
+  }, [focusCell, onCancel, containerRef]);
+
+  return { handleContainerFocus, handleContainerBlur };
+}

package/src/index.ts

@@ -3,3 +3,4 @@ export * from './hooks';
 export * from './services';
 export * from './types';
 export * from './utils';
+export { HTMLToText } from './auto-field-types';

package/src/services/translations.ts

@@ -67,7 +67,6 @@ export type TranslationsKeys =
   | 'CMS.richTextEditor.toolbar.headerDropdown.option.p3.subtitle'
   | 'CMS.richTextEditor.toolbar.headerDropdown.option.p3.title'
   | 'CMS.richTextEditor.toolbar.headerDropdown.button.info'
-  | 'CMS.richTextEditor.toolbar.headerDropdown.button.info.link'
   | 'CMS.richTextEditor.toolbar.headerDropdown.help.text'
   | 'CMS.richTextEditor.toolbar.button.tooltip.align'
   | 'CMS.richTextEditor.toolbar.button.tooltip.bold'
@@ -158,6 +157,11 @@ export type TranslationsKeys =
   | 'CMS.image.replaceWithUrl.title'
   | 'CMS.image.download'
   | 'CMS.image.clear'
+  | 'CMS.video.add'
+  | 'CMS.video.change'
+  | 'CMS.video.preview'
+  | 'CMS.video.download'
+  | 'CMS.video.delete'
   | 'CMS.document.delete.title'
   | 'CMS.document.delete.message'
   | 'auto-patterns.fields.type_mismatch_convert'