@wix/patterns 1.423.0 → 1.424.0

package/src/components/FieldCell/FieldCell.tsx

@@ -0,0 +1,162 @@
+import React, { Suspense } from 'react';
+import { Box, Text, TextButton } from '@wix/design-system';
+import { Confirm, Minus } from '@wix/wix-ui-icons-common';
+import type { PatternsFieldType } from '@wix/bex-core';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+import { observer } from 'mobx-react-lite';
+import type { CellAddressViewProps } from '@wix/patterns-fields';
+import type { WixCodeGalleryItem } from '@wix/patterns-fields/auto-field-types';
+import { getDateWithoutTimezone } from '../../utils/datesUtil';
+
+// Cell renderers live in @wix/patterns-fields, which statically pulls the
+// rich-text editor (Ricos/draft-js) and media SDKs. Importing them eagerly put
+// that weight into every bundle that renders a source column (DataExtension,
+// CMS, the tables). Loading them lazily moves it into an async chunk fetched
+// only when a cell of one of these types first renders. The light types in the
+// switch below stay inline (WDS only) and ship nothing extra.
+function lazyCell<P extends object>(
+  pick: (m: typeof import('@wix/patterns-fields')) => React.ComponentType<P>,
+) {
+  const C = React.lazy(async () => ({
+    default: pick(await import('@wix/patterns-fields')),
+  }));
+  return (props: P) => (
+    <Suspense fallback={null}>
+      <C {...props} />
+    </Suspense>
+  );
+}
+
+const CellAddressView = lazyCell((m) => m.CellAddressView);
+const CellAudioView = lazyCell((m) => m.CellAudioView);
+const CellColorView = lazyCell((m) => m.CellColorView);
+const CellDocumentView = lazyCell((m) => m.CellDocumentView);
+const CellMediaGalleryView = lazyCell((m) => m.CellMediaGalleryView);
+const CellMultiDocumentView = lazyCell((m) => m.CellMultiDocumentView);
+const CellRichContentView = lazyCell((m) => m.CellRichContentView);
+const CellRichTextView = lazyCell((m) => m.CellRichTextView);
+const ImageView = lazyCell((m) => m.ImageView);
+const JsonView = lazyCell((m) => m.JsonView);
+
+export interface FieldCellProps {
+  value?: unknown;
+  type: PatternsFieldType;
+  /** Stable id for cells that render WDS Tags (document, multi-document). */
+  fieldId?: string;
+}
+
+function _FieldCell(props: FieldCellProps) {
+  const { dateFormatters } = useWixPatternsContainer();
+  switch (props.type) {
+    case 'LONG_TEXT':
+      return (
+        <Text size="small" ellipsis maxLines={3}>
+          {props.value as React.ReactNode}
+        </Text>
+      );
+    case 'DATE':
+      return (
+        <Text size="small" ellipsis maxLines={1}>
+          {props.value
+            ? dateFormatters.medium.format(
+                getDateWithoutTimezone(props.value as string),
+              )
+            : null}
+        </Text>
+      );
+    case 'DATETIME':
+      return (
+        <Text size="small" ellipsis maxLines={1}>
+          {props.value
+            ? dateFormatters.mediumTime.format(new Date(props.value as string))
+            : null}
+        </Text>
+      );
+    case 'BOOLEAN':
+      return (
+        <Box
+          align="center"
+          verticalAlign="middle"
+          color={props.value ? 'G10' : 'D10'}
+        >
+          {props.value ? <Confirm /> : <Minus />}
+        </Box>
+      );
+    case 'URL':
+      return (
+        <TextButton
+          as="a"
+          rel="noopener"
+          target="_blank"
+          href={props.value as string}
+          ellipsis
+        >
+          {props.value as React.ReactNode}
+        </TextButton>
+      );
+    case 'IMAGE':
+      return (
+        <ImageView value={props.value as string | null} dataHook="image-view" />
+      );
+    case 'VIDEO':
+      return (
+        <ImageView value={props.value as string | null} dataHook="video-view" />
+      );
+    case 'AUDIO':
+      return (
+        <CellAudioView
+          value={props.value as string | null}
+          dataHook="audio-view"
+        />
+      );
+    case 'MEDIA_GALLERY':
+      return (
+        <CellMediaGalleryView
+          data={props.value as WixCodeGalleryItem[] | null}
+          dataHook="media-gallery-view"
+        />
+      );
+    case 'DOCUMENT':
+      return (
+        <CellDocumentView
+          value={props.value as string | null | undefined}
+          dataHook="document-view"
+          fieldId={props.fieldId ?? ''}
+        />
+      );
+    case 'MULTI_DOCUMENT':
+      return (
+        <CellMultiDocumentView
+          value={props.value as string[] | null | undefined}
+          dataHook="multi-document-view"
+          fieldId={props.fieldId ?? ''}
+        />
+      );
+    case 'ARRAY':
+      return (
+        <Text size="small" ellipsis maxLines={1}>
+          {(props.value as unknown[] | undefined)?.join(', ')}
+        </Text>
+      );
+    case 'ADDRESS':
+      return (
+        <CellAddressView data={props.value as CellAddressViewProps['data']} />
+      );
+    case 'RICH_TEXT':
+      return <CellRichTextView value={props.value as string | null} />;
+    case 'RICH_CONTENT':
+      return <CellRichContentView value={props.value} />;
+    case 'COLOR':
+      return <CellColorView value={props.value as string | undefined} />;
+    case 'OBJECT':
+      return <JsonView data={props.value} />;
+    default:
+      return (
+        <Text size="small" ellipsis maxLines={1}>
+          {props.value as React.ReactNode}
+        </Text>
+      );
+  }
+}
+
+export const FieldCell = observer(_FieldCell);

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

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

package/src/components/ImportButton/ImportModal.uni.driver.ts

@@ -83,6 +83,17 @@ export function ImportModalUniDriver(base: UniDriver, body: UniDriver) {
       modalLayoutBase().$('[data-hook="import-error-message"]').text(),
     errorMessageExists: () =>
       modalLayoutBase().$('[data-hook="import-error-message"]').exists(),
+    // Inline wrap style on the error message's container — asserts a long,
+    // unbroken message is forced to wrap inside the modal instead of overflowing.
+    getErrorMessageWrapStyle: async () => {
+      const native: HTMLElement = await modalLayoutBase()
+        .$('[data-hook="import-error-message-wrap"]')
+        .getNative();
+      return {
+        overflowWrap: native.style.overflowWrap,
+        wordBreak: native.style.wordBreak,
+      };
+    },
 
     /** Get the CounterBadge driver for the columns found counter */
     getColumnsFoundCounter: () =>

package/src/components/ImportButton/ImportStepConfiguration.tsx

@@ -199,12 +199,12 @@ function _ImportStepConfiguration({
 }: ImportStepConfigurationProps) {
   const { csvHeaders, fields, translate: t } = state;
 
-  // The row whose column maps to `_id` floats to the top of the list (CAIRO-4418).
-  const idHeader = state.idMappedHeader;
+  // Row order is snapshotted per file in state, with the `_id`-mapped column
+  // floated to the top (CAIRO-4418). It stays fixed while the user edits
+  // mappings, so clearing/remapping the `_id` column doesn't reorder the row
+  // under the cursor. Fall back to CSV order if the snapshot isn't populated.
   const orderedHeaders =
-    idHeader != null
-      ? [idHeader, ...csvHeaders.filter((header) => header !== idHeader)]
-      : csvHeaders;
+    state.orderedHeaders.length > 0 ? state.orderedHeaders : csvHeaders;
 
   const baseDropdownOptions = fields
     .filter((field) => field.id != null)

package/src/components/ImportButton/ImportStepProgress.tsx

@@ -7,6 +7,17 @@ export interface ImportStepProgressProps {
   state: ImportState;
 }
 
+// A failed import's message is consumer-supplied and can be a single unbroken
+// token — e.g. the server's `MISSING_REQUIRED_FIELDS` error joins every missing
+// field with commas and no spaces (`handle,name,visible,…`), or a long URL/id.
+// Without a break opportunity the browser treats it as one long word that
+// overflows the fixed-width modal and gets clipped. Force it to wrap regardless
+// of content (both properties are inherited, so they reach the `Text` inside).
+const WRAP_LONG_WORDS: React.CSSProperties = {
+  overflowWrap: 'break-word',
+  wordBreak: 'break-word',
+};
+
 function _ImportStepProgress({ state }: ImportStepProgressProps) {
   const {
     processedCount,
@@ -39,9 +50,11 @@ function _ImportStepProgress({ state }: ImportStepProgressProps) {
         dataHook="import-progress-bar"
       />
       {errorMessage ? (
-        <Text size="small" skin="error" dataHook="import-error-message">
-          {errorMessage}
-        </Text>
+        <Box style={WRAP_LONG_WORDS} dataHook="import-error-message-wrap">
+          <Text size="small" skin="error" dataHook="import-error-message">
+            {errorMessage}
+          </Text>
+        </Box>
       ) : (
         <Text size="small" dataHook="import-progress-label">
           {isBackingUp

package/src/components/ImportButton/ImportStepUpload.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ImportStepUpload743537825";
+var _namespace_ = "ImportStepUpload3261603244";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"ImportStepUpload743537825__root","fileUpload":"ImportStepUpload743537825__fileUpload"};
+export var classes = {"root":"ImportStepUpload3261603244__root","fileUpload":"ImportStepUpload3261603244__fileUpload"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "LoadingRow2797869485";
+var _namespace_ = "LoadingRow1058322109";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,8 +13,8 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"LoadingRow2797869485__root"};
-export var keyframes = {"gradientSwoosh":"LoadingRow2797869485__gradientSwoosh"}; 
+export var classes = {"root":"LoadingRow1058322109__root"};
+export var keyframes = {"gradientSwoosh":"LoadingRow1058322109__gradientSwoosh"}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 

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

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

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "MultiBulkActionToolbar3555060580";
+var _namespace_ = "MultiBulkActionToolbar809824376";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"MultiBulkActionToolbar3555060580__root","leftGroupWrapper":"MultiBulkActionToolbar3555060580__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar3555060580__selectedCountItem","selectedCountText":"MultiBulkActionToolbar3555060580__selectedCountText"};
+export var classes = {"root":"MultiBulkActionToolbar809824376__root","leftGroupWrapper":"MultiBulkActionToolbar809824376__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar809824376__selectedCountItem","selectedCountText":"MultiBulkActionToolbar809824376__selectedCountText"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/NestedTable/NestedTablePlaceholderStatesRow.st.css.ts

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

package/src/components/NestedTable/NestedTableRow.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "NestedTableRow2551801554";
+var _namespace_ = "NestedTableRow1405815016";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"NestedTableRow2551801554__root","firstLevel":"NestedTableRow2551801554__firstLevel","placeholder":"NestedTableRow2551801554__placeholder","parentHovered":"NestedTableRow2551801554__parentHovered"};
+export var classes = {"root":"NestedTableRow1405815016__root","firstLevel":"NestedTableRow1405815016__firstLevel","placeholder":"NestedTableRow1405815016__placeholder","parentHovered":"NestedTableRow1405815016__parentHovered"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/NestedTableDragAndDrop/MultipleDragOverlayEffect.st.css.ts

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

package/src/components/NestedTableDragAndDrop/NestedTableDragAndDropRow.st.css.ts

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

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

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

package/src/components/PickerContent/PickerContentAdditionalStep.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "PickerContentAdditionalStep1877923304";
+var _namespace_ = "PickerContentAdditionalStep2779327767";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"PickerContentAdditionalStep1877923304__root","titles":"PickerContentAdditionalStep1877923304__titles","suffix":"PickerContentAdditionalStep1877923304__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep2779327767__root","titles":"PickerContentAdditionalStep2779327767__titles","suffix":"PickerContentAdditionalStep2779327767__suffix"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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