@wix/patterns-fields 1.87.0 → 1.89.0

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "richtexteditor2877563601";
+var _namespace_ = "richtexteditor3399826991";
 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":"richtexteditor2877563601__root","nativeInput":"richtexteditor2877563601__nativeInput","editor":"richtexteditor2877563601__editor"};
+export var classes = {"root":"richtexteditor3399826991__root","nativeInput":"richtexteditor3399826991__nativeInput","editor":"richtexteditor3399826991__editor"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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_ = "toolbar3472368645";
+var _namespace_ = "toolbar1543323063";
 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":"toolbar3472368645__root","item":"toolbar3472368645__item","separator":"toolbar3472368645__separator","clearFormatting":"toolbar3472368645__clearFormatting","fullScreen":"toolbar3472368645__fullScreen","dropdownItemContent":"toolbar3472368645__dropdownItemContent","dropdownItemTitle":"toolbar3472368645__dropdownItemTitle","dropdownItemSubtitle":"toolbar3472368645__dropdownItemSubtitle","dropdownHeaderOne":"toolbar3472368645__dropdownHeaderOne","dropdownHeaderTwo":"toolbar3472368645__dropdownHeaderTwo","dropdownHeaderThree":"toolbar3472368645__dropdownHeaderThree","dropdownHeaderFour":"toolbar3472368645__dropdownHeaderFour","dropdownHeaderFive":"toolbar3472368645__dropdownHeaderFive","dropdownHeaderSix":"toolbar3472368645__dropdownHeaderSix","dropdownParagraphOne":"toolbar3472368645__dropdownParagraphOne","dropdownNormalText":"toolbar3472368645__dropdownNormalText","dropdownParagraphThree":"toolbar3472368645__dropdownParagraphThree"};
+export var classes = {"root":"toolbar1543323063__root","item":"toolbar1543323063__item","separator":"toolbar1543323063__separator","clearFormatting":"toolbar1543323063__clearFormatting","fullScreen":"toolbar1543323063__fullScreen","dropdownItemContent":"toolbar1543323063__dropdownItemContent","dropdownItemTitle":"toolbar1543323063__dropdownItemTitle","dropdownItemSubtitle":"toolbar1543323063__dropdownItemSubtitle","dropdownHeaderOne":"toolbar1543323063__dropdownHeaderOne","dropdownHeaderTwo":"toolbar1543323063__dropdownHeaderTwo","dropdownHeaderThree":"toolbar1543323063__dropdownHeaderThree","dropdownHeaderFour":"toolbar1543323063__dropdownHeaderFour","dropdownHeaderFive":"toolbar1543323063__dropdownHeaderFive","dropdownHeaderSix":"toolbar1543323063__dropdownHeaderSix","dropdownParagraphOne":"toolbar1543323063__dropdownParagraphOne","dropdownNormalText":"toolbar1543323063__dropdownNormalText","dropdownParagraphThree":"toolbar1543323063__dropdownParagraphThree"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "textview2454520084";
+var _namespace_ = "textview3643180884";
 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":"textview2454520084__root","textView":"textview2454520084__textView"};
+export var classes = {"root":"textview3643180884__root","textView":"textview3643180884__textView"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/video/controlled-video.uni.driver.ts

@@ -0,0 +1,48 @@
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import {
+  AddItemUniDriver,
+  ImageViewerUniDriver,
+} from '@wix/design-system/dist/testkit/unidriver';
+
+import { baseUniDriverFactory } from '../../testkit/base-driver';
+
+export function ControlledVideoInputUniDriver(
+  base: UniDriver,
+  body: UniDriver,
+) {
+  // The dataHook sits on the ImageViewer in the empty state and on the
+  // MediaOverlay in the filled one, so `base` is either.
+  const imageViewer = ImageViewerUniDriver(base, body);
+  // `add-image` is ImageViewer's own hook for its empty-state AddItem.
+  const addItem = AddItemUniDriver(base.$('[data-hook="add-image"]'), body);
+  const addButton = base.$('[data-hook="add-image"] [data-hook="additem"]');
+  // Scoped to button / menuitem so a consumer dataHook that happens to end in
+  // one of these suffixes cannot match the root element instead.
+  const replaceButton = base.$('button[data-hook$="-replace"]');
+  const moreButton = base.$('button[data-hook$="-more"]');
+  const previewAction = body.$('[role="menuitem"][data-hook$="-preview"]');
+  const downloadAction = body.$('[role="menuitem"][data-hook$="-download"]');
+  const deleteAction = body.$('[role="menuitem"][data-hook$="-delete"]');
+
+  const isDisabled = async (element: UniDriver) =>
+    (await element.attr('disabled')) !== null ||
+    (await element.attr('aria-disabled')) === 'true';
+
+  return {
+    ...baseUniDriverFactory(base),
+    isAddItemVisible: () => imageViewer.isAddItemVisible(),
+    clickAddButton: () => imageViewer.clickAdd(),
+    isAddButtonFocused: () => addItem.isFocused(),
+    isAddButtonDisabled: () => isDisabled(addButton),
+    hasReplaceButton: () => replaceButton.exists(),
+    hasMoreButton: () => moreButton.exists(),
+    isReplaceDisabled: () => isDisabled(replaceButton),
+    clickReplace: () => replaceButton.click(),
+    clickMore: () => moreButton.click(),
+    clickPreview: () => previewAction.click(),
+    clickDownload: () => downloadAction.click(),
+    clickDelete: () => deleteAction.click(),
+    isDeleteDisabled: () => isDisabled(deleteAction),
+    getPreviewTitle: () => body.$('[data-hook="baseModalLayout-title"]').text(),
+  };
+}

package/src/components/video/form-video-field.tsx

@@ -0,0 +1,268 @@
+import type { FC } from 'react';
+import React from 'react';
+import {
+  Box,
+  CustomModalLayout,
+  IconButton,
+  Image,
+  ImageViewer,
+  MediaOverlay,
+  Modal,
+  PopoverMenu,
+  Tooltip,
+} from '@wix/design-system';
+import {
+  Delete,
+  Download,
+  Maximize,
+  More,
+  Replace,
+} from '@wix/wix-ui-icons-common/lazy';
+import { useIsMobile } from '@wix/bex-core/react';
+
+import type { ControlledInputProps } from '../../types/controlled-input';
+import { useMergedRef, useTranslations, useWithCallback } from '../../hooks';
+import { MEDIA_HEIGHT, MEDIA_MAX_WIDTH } from '../../utils/media-constants';
+import { MEDIA_TYPES } from '../../utils';
+import type { FormMediaControlProps } from '../media-control';
+import { useMediaControl } from '../media-control';
+
+import { useVideoPreview } from './use-video-preview';
+
+interface ImageViewerActions {
+  focus: () => void;
+}
+
+export interface VideoFieldDataHooks {
+  replace: string;
+  more: string;
+  preview: string;
+  download: string;
+  delete: string;
+}
+
+// `invalid` is not part of this contract. The empty state's ImageViewer has no
+// error prop; it takes its error styling from the enclosing WDS FormField's
+// status context. To show an error, render the field inside a FormField with
+// status="error".
+export interface FormVideoFieldProps
+  extends Omit<FormMediaControlProps, 'invalid'> {
+  /** Overrides for the action-button hooks, which otherwise derive from `dataHook`. */
+  dataHooks?: Partial<VideoFieldDataHooks>;
+  /** Title of the preview modal. Defaults to the translated "Preview". */
+  previewTitle?: string;
+  /**
+   * Fires when the media manager closes, whether or not a file was picked.
+   * A media field has no text control to blur, so the picker closing is its
+   * blur signal.
+   */
+  onBlur?: () => void;
+}
+
+export const FormVideoField: FC<FormVideoFieldProps> = ({
+  data,
+  onChange: onChangeVideo,
+  onClear: onClearVideo,
+  onInput,
+  onBlur,
+  readOnly,
+  autoFocus,
+  dataHook,
+  dataHooks,
+  previewTitle,
+  inputRef: forwardedRef,
+}) => {
+  const { t } = useTranslations();
+  const isMobile = useIsMobile();
+
+  const onChange = useWithCallback(onChangeVideo, onInput);
+  const onClear = useWithCallback(onClearVideo, onInput);
+
+  const [inputRef, setInputRef] =
+    useMergedRef<ImageViewerActions>(forwardedRef);
+
+  const hooks: VideoFieldDataHooks = {
+    replace: dataHooks?.replace ?? `${dataHook}-replace`,
+    more: dataHooks?.more ?? `${dataHook}-more`,
+    preview: dataHooks?.preview ?? `${dataHook}-preview`,
+    download: dataHooks?.download ?? `${dataHook}-download`,
+    delete: dataHooks?.delete ?? `${dataHook}-delete`,
+  };
+
+  const { callMedia } = useMediaControl({
+    mediaType: MEDIA_TYPES.VIDEO,
+    value: data,
+    onChange,
+    autoFocus,
+    readOnly,
+    onBlur,
+    inputRef,
+  });
+
+  const {
+    videoUrl,
+    posterUrl: imageUrl,
+    isPreviewOpen,
+    openPreview: handlePreview,
+    closePreview: handleClosePreview,
+    handleDownload,
+  } = useVideoPreview({ videoUri: data });
+
+  const canEdit = !isMobile && !readOnly;
+
+  return (
+    <>
+      {data ? (
+        <Box width="100%" maxWidth={MEDIA_MAX_WIDTH} height={MEDIA_HEIGHT}>
+          <MediaOverlay
+            dataHook={dataHook}
+            hoverSkin="dark"
+            media={
+              <Image
+                src={imageUrl}
+                width="100%"
+                height={MEDIA_HEIGHT}
+                fit="cover"
+              />
+            }
+          >
+            <MediaOverlay.Content placement="middle" visible="hover">
+              <Box gap="SP2">
+                <Tooltip
+                  content={t('auto-patterns.fields.replace_video_tooltip')}
+                >
+                  <IconButton
+                    onClick={callMedia}
+                    skin="light"
+                    priority="secondary"
+                    disabled={!canEdit}
+                    ariaLabel={t('auto-patterns.fields.replace_video_tooltip')}
+                    dataHook={hooks.replace}
+                  >
+                    <Replace />
+                  </IconButton>
+                </Tooltip>
+                <PopoverMenu
+                  triggerElement={({ toggle }) => (
+                    <Tooltip
+                      content={t('auto-patterns.fields.more_actions_tooltip')}
+                    >
+                      <IconButton
+                        priority="secondary"
+                        onClick={toggle}
+                        skin="light"
+                        ariaLabel={t(
+                          'auto-patterns.fields.more_actions_tooltip',
+                        )}
+                        dataHook={hooks.more}
+                      >
+                        <More />
+                      </IconButton>
+                    </Tooltip>
+                  )}
+                >
+                  <PopoverMenu.MenuItem
+                    prefixIcon={<Maximize />}
+                    text={t('auto-patterns.fields.preview_video')}
+                    onClick={handlePreview}
+                    disabled={!videoUrl}
+                    dataHook={hooks.preview}
+                  />
+                  <PopoverMenu.MenuItem
+                    prefixIcon={<Download />}
+                    text={t('auto-patterns.fields.download_video')}
+                    onClick={handleDownload}
+                    dataHook={hooks.download}
+                  />
+                  <PopoverMenu.Divider />
+                  <PopoverMenu.MenuItem
+                    prefixIcon={<Delete />}
+                    text={t('auto-patterns.fields.remove_video')}
+                    onClick={onClear}
+                    disabled={readOnly || !onClearVideo}
+                    dataHook={hooks.delete}
+                  />
+                </PopoverMenu>
+              </Box>
+            </MediaOverlay.Content>
+          </MediaOverlay>
+        </Box>
+      ) : (
+        <Box width="100%" maxWidth={MEDIA_MAX_WIDTH}>
+          <ImageViewer
+            // Only the empty state has a focusable control, so this is the
+            // only place inputRef can land.
+            ref={setInputRef}
+            dataHook={dataHook}
+            onAddImage={canEdit ? callMedia : undefined}
+            disabled={!canEdit}
+            addImageInfo={t('auto-patterns.fields.add_video_tooltip')}
+            height={MEDIA_HEIGHT}
+            width="100%"
+          />
+        </Box>
+      )}
+      {isPreviewOpen && (
+        <Modal isOpen={isPreviewOpen} onRequestClose={handleClosePreview}>
+          <CustomModalLayout
+            title={previewTitle ?? t('auto-patterns.fields.preview_video')}
+            onCloseButtonClick={handleClosePreview}
+            content={
+              <div
+                style={{
+                  display: 'flex',
+                  justifyContent: 'center',
+                  padding: '24px',
+                }}
+              >
+                <video
+                  controls
+                  autoPlay
+                  style={{ maxWidth: '100%', maxHeight: '70vh' }}
+                  poster={imageUrl}
+                >
+                  {videoUrl && <source src={videoUrl} type="video/mp4" />}
+                  Your browser does not support the video tag.
+                </video>
+              </div>
+            }
+          />
+        </Modal>
+      )}
+    </>
+  );
+};
+
+FormVideoField.displayName = 'FormVideoField';
+
+export type ControlledVideoInputProps = Omit<
+  ControlledInputProps<string | undefined>,
+  'invalid'
+> & {
+  /** Title of the preview modal. Defaults to the translated "Preview". */
+  previewTitle?: string;
+};
+
+export const ControlledVideoInput: FC<ControlledVideoInputProps> = ({
+  data,
+  onChange,
+  onBlur,
+  readOnly,
+  autoFocus,
+  dataHook,
+  previewTitle,
+}) => (
+  <FormVideoField
+    data={data}
+    onChange={onChange}
+    // FormVideoField reports deletion through onClear, not onChange.
+    onClear={() => onChange(undefined)}
+    onBlur={onBlur}
+    readOnly={readOnly}
+    autoFocus={autoFocus}
+    dataHook={dataHook}
+    previewTitle={previewTitle}
+  />
+);
+
+ControlledVideoInput.displayName = 'ControlledVideoInput';

package/src/components/video/form-video.tsx

@@ -1,25 +1,7 @@
 import React from 'react';
-import {
-  FormField,
-  ImageViewer,
-  Modal,
-  CustomModalLayout,
-  MediaOverlay,
-  Box,
-  Tooltip,
-  IconButton,
-  PopoverMenu,
-  Image,
-} from '@wix/design-system';
-import {
-  Replace,
-  More,
-  Download,
-  Delete,
-  Maximize,
-} from '@wix/wix-ui-icons-common/lazy';
+import { FormField } from '@wix/design-system';
 import { observer } from 'mobx-react-lite';
-import { useIsMobile, useWixPatternsContainer } from '@wix/bex-core/react';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { useController } from '@wix/bex-core/form';
 import { BaseInputProps } from '../../types/base-input';
 import { useFieldRef, useTranslations } from '../../hooks';
@@ -27,28 +9,15 @@ import { isEmpty } from '../../validations/string';
 import { isDataValidOrNotSet } from '../../validations/validations';
 import * as videoValidation from '../../validations/video';
 import { TypeMismatchExclamation } from '../exclamation/type-mismatch-exclamation';
-import { MEDIA_HEIGHT, MEDIA_MAX_WIDTH } from '../../utils/media-constants';
-import { useVideoPreview } from './use-video-preview';
-
-interface VideoMediaDescriptor {
-  video?: string;
-}
-
-interface MediaManagerVideoItem {
-  _id?: string;
-  displayName?: string;
-  mediaType?: string;
-  media?: VideoMediaDescriptor;
-}
+import { FormVideoField } from './form-video-field';
 
 export interface FormVideoProps extends BaseInputProps<string> {}
 
 const _FormVideo = (props: FormVideoProps) => {
   const { field, dataHook, formControl, data } = props;
 
-  const { translate: pt, openMediaManager } = useWixPatternsContainer();
+  const { translate: pt } = useWixPatternsContainer();
   const { t } = useTranslations();
-  const isMobile = useIsMobile();
 
   const controller = useController({
     name: field?.id ?? '',
@@ -66,35 +35,6 @@ const _FormVideo = (props: FormVideoProps) => {
 
   const setFieldRef = useFieldRef(controller.field.ref);
 
-  async function openMedia() {
-    if (!openMediaManager) return;
-    try {
-      const chosenMediaItems = await openMediaManager({
-        multiSelect: false,
-        category: 'VIDEO',
-      });
-
-      const mediaItem = chosenMediaItems?.items?.[0] as
-        | MediaManagerVideoItem
-        | undefined;
-      const newVideo = mediaItem?.media?.video;
-      if (newVideo) {
-        controller.field.onChange(newVideo);
-      }
-    } catch (error) {
-      console.error('Error opening Media Manager or no files selected:', error);
-    }
-  }
-
-  const {
-    videoUrl,
-    posterUrl: imageUrl,
-    isPreviewOpen,
-    openPreview: handlePreview,
-    closePreview: handleClosePreview,
-    handleDownload,
-  } = useVideoPreview({ videoUri: controller.field.value });
-
   return (
     <FormField
       label={field.displayName}
@@ -127,121 +67,23 @@ const _FormVideo = (props: FormVideoProps) => {
         )
       }
     >
-      {controller.field.value ? (
-        <Box width="100%" maxWidth={MEDIA_MAX_WIDTH} height={MEDIA_HEIGHT}>
-          <MediaOverlay
-            dataHook={`video-${field.id}`}
-            hoverSkin="dark"
-            media={
-              <Image
-                src={imageUrl}
-                width="100%"
-                height={MEDIA_HEIGHT}
-                fit="cover"
-              />
-            }
-          >
-            <MediaOverlay.Content placement="middle" visible="hover">
-              <Box gap="SP2">
-                <Tooltip
-                  content={t('auto-patterns.fields.replace_video_tooltip')}
-                >
-                  <IconButton
-                    onClick={() => openMedia()}
-                    skin="light"
-                    priority="secondary"
-                    disabled={isMobile}
-                    ariaLabel={t('auto-patterns.fields.replace_video_tooltip')}
-                    dataHook={`video-replace-${field.id}`}
-                  >
-                    <Replace />
-                  </IconButton>
-                </Tooltip>
-                <PopoverMenu
-                  triggerElement={({ toggle }) => (
-                    <Tooltip
-                      content={t('auto-patterns.fields.more_actions_tooltip')}
-                    >
-                      <IconButton
-                        priority="secondary"
-                        onClick={toggle}
-                        skin="light"
-                        ariaLabel={t(
-                          'auto-patterns.fields.more_actions_tooltip',
-                        )}
-                        dataHook={`video-more-${field.id}`}
-                      >
-                        <More />
-                      </IconButton>
-                    </Tooltip>
-                  )}
-                >
-                  <PopoverMenu.MenuItem
-                    prefixIcon={<Maximize />}
-                    text={t('auto-patterns.fields.preview_video')}
-                    onClick={handlePreview}
-                    disabled={!videoUrl}
-                    dataHook={`video-preview-${field.id}`}
-                  />
-                  <PopoverMenu.MenuItem
-                    prefixIcon={<Download />}
-                    text={t('auto-patterns.fields.download_video')}
-                    onClick={handleDownload}
-                    dataHook={`video-download-${field.id}`}
-                  />
-                  <PopoverMenu.Divider />
-                  <PopoverMenu.MenuItem
-                    prefixIcon={<Delete />}
-                    text={t('auto-patterns.fields.remove_video')}
-                    onClick={() => controller.field.onChange(null)}
-                    dataHook={`video-delete-${field.id}`}
-                  />
-                </PopoverMenu>
-              </Box>
-            </MediaOverlay.Content>
-          </MediaOverlay>
-        </Box>
-      ) : (
-        <Box width="100%" maxWidth={MEDIA_MAX_WIDTH}>
-          <ImageViewer
-            // Only the empty state can fail `required`, so the add button is
-            // always the right target for react-hook-form's shouldFocusError.
-            ref={setFieldRef}
-            dataHook={`video-${field.id}`}
-            onAddImage={isMobile ? undefined : () => openMedia()}
-            addImageInfo={t('auto-patterns.fields.add_video_tooltip')}
-            height={MEDIA_HEIGHT}
-            width="100%"
-          />
-        </Box>
-      )}
-      {isPreviewOpen && (
-        <Modal isOpen={isPreviewOpen} onRequestClose={handleClosePreview}>
-          <CustomModalLayout
-            title={field.displayName}
-            onCloseButtonClick={handleClosePreview}
-            content={
-              <div
-                style={{
-                  display: 'flex',
-                  justifyContent: 'center',
-                  padding: '24px',
-                }}
-              >
-                <video
-                  controls
-                  autoPlay
-                  style={{ maxWidth: '100%', maxHeight: '70vh' }}
-                  poster={imageUrl}
-                >
-                  {videoUrl && <source src={videoUrl} type="video/mp4" />}
-                  Your browser does not support the video tag.
-                </video>
-              </div>
-            }
-          />
-        </Modal>
-      )}
+      <FormVideoField
+        // Hands the add button to react-hook-form so shouldFocusError can
+        // reach this field when a required value blocks save.
+        inputRef={setFieldRef}
+        data={controller.field.value}
+        onChange={(value) => controller.field.onChange(value)}
+        onClear={() => controller.field.onChange(null)}
+        previewTitle={field.displayName}
+        dataHook={`video-${field.id}`}
+        dataHooks={{
+          replace: `video-replace-${field.id}`,
+          more: `video-more-${field.id}`,
+          preview: `video-preview-${field.id}`,
+          download: `video-download-${field.id}`,
+          delete: `video-delete-${field.id}`,
+        }}
+      />
     </FormField>
   );
 };

package/src/components/video/index.ts

@@ -4,6 +4,12 @@ export { VideoViewField } from './video-view-field';
 export type { VideoViewFieldProps } from './video-view-field';
 export { CellVideoEdit } from './cell-video-edit';
 export type { CellVideoEditProps } from './cell-video-edit';
+export { FormVideoField, ControlledVideoInput } from './form-video-field';
+export type {
+  FormVideoFieldProps,
+  ControlledVideoInputProps,
+  VideoFieldDataHooks,
+} from './form-video-field';
 export { FormVideo } from './form-video';
 export type { FormVideoProps } from './form-video';
 export { useVideoPreview } from './use-video-preview';