@wix/patterns 1.432.0 → 1.434.0

package/src/components/CustomFieldsPanel/CustomFieldsList.tsx

@@ -4,6 +4,7 @@ import React, { useCallback } from 'react';
 import { CustomFieldItem } from './CustomFieldItem';
 import { Box } from '@wix/design-system';
 import { CustomFieldsPanelState } from '../../state/CustomFields/CustomFieldsPanelState';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 
 export interface CustomFieldsListProps {
   state: CustomFieldsPanelState;
@@ -11,6 +12,7 @@ export interface CustomFieldsListProps {
 
 function _CustomFieldsList(props: CustomFieldsListProps) {
   const { state } = props;
+  const isHarmonyTheme = useBmHarmonyTheme();
 
   const renderItem = useCallback(
     (field: Field, index: number, array: Field[]) => {
@@ -19,18 +21,20 @@ function _CustomFieldsList(props: CustomFieldsListProps) {
           state={state}
           key={field.id}
           field={field}
-          showDivider={index < array.length - 1}
+          showDivider={isHarmonyTheme ? false : index < array.length - 1}
         />
       );
     },
-    [],
+    [isHarmonyTheme],
   );
 
   return (
     <Box
       direction="vertical"
       dataHook="custom-fields-list"
-      backgroundColor="D60"
+      {...(isHarmonyTheme
+        ? { paddingLeft: 'SP2', paddingRight: 'SP2' }
+        : { backgroundColor: 'D60' })}
     >
       {state.manageableFields.map(renderItem)}
     </Box>

package/src/components/CustomFieldsPanel/CustomFieldsPanel.tsx

@@ -10,6 +10,7 @@ import { AddCustomFieldCTAButton } from './AddCustomFieldCTAButton';
 import { cairoFiltersPanelUsed } from '@wix/bex-core/bi';
 import { CustomFieldsPanelState } from '../../state/CustomFields/CustomFieldsPanelState';
 import { PatternsSidePanel } from '../SidePanel/PatternsSidePanel';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 
 // Lazy: the archive CTA loads only for sources that archive, so sources that
 // don't (e.g. a schema) never pull it into their bundle.
@@ -26,6 +27,7 @@ export function _CustomFieldsPanel({ state }: CustomFieldsPanelProps) {
   const container = useWixPatternsContainer();
   const { translate: t } = container;
   const origin = 'Custom fields panel';
+  const isHarmonyTheme = useBmHarmonyTheme();
 
   const entered = useRafRender();
   if (!entered) {
@@ -57,19 +59,30 @@ export function _CustomFieldsPanel({ state }: CustomFieldsPanelProps) {
       >
         {state.archive?.shouldDisplay && (
           <Suspense fallback={null}>
-            <ArchivedItemsCTAButton
-              archive={state.archive}
-              deleteFieldModal={state.deleteFieldModal}
-              onCloseSidePanel={() => state.closeSidePanel?.()}
-              dataHook="custom-fields"
-            />
+            {isHarmonyTheme ? (
+              <Box direction="vertical" marginLeft="SP2" marginRight="SP2">
+                <ArchivedItemsCTAButton
+                  archive={state.archive}
+                  deleteFieldModal={state.deleteFieldModal}
+                  onCloseSidePanel={() => state.closeSidePanel?.()}
+                  dataHook="custom-fields"
+                />
+              </Box>
+            ) : (
+              <ArchivedItemsCTAButton
+                archive={state.archive}
+                deleteFieldModal={state.deleteFieldModal}
+                onCloseSidePanel={() => state.closeSidePanel?.()}
+                dataHook="custom-fields"
+              />
+            )}
           </Suspense>
         )}
         <CustomFieldsList state={state} />
       </ScrollableContent>
 
       <Box direction="vertical" width="100%">
-        <Divider direction="horizontal" />
+        {!isHarmonyTheme && <Divider direction="horizontal" />}
         <Box padding="SP4" direction="vertical">
           <AddCustomFieldCTAButton
             state={state}

package/src/components/DataExtension/dataExtensionFieldDraft.ts

@@ -40,6 +40,6 @@ export const mappingToFieldDraft = (
   name,
   containsPii: mapping.config?.isPii ?? false,
   ...resolvePermissions(
-    mapping.config?.permissions ?? fieldManagement.permissions,
+    mapping.config?.permissions ?? fieldManagement.fieldModal.permissions,
   ),
 });

package/src/components/DataExtension/dataExtensionFieldManagement.ts

@@ -5,7 +5,9 @@ import type {
   DataExtensionState,
   FieldDraft,
   FieldManagement,
-  FieldTypeOption,
+  FieldModalText,
+  FieldPermissions,
+  ResolvedFieldTypeOption,
   NonReferenceField,
   ReportBI,
   TranslationsKeys,
@@ -145,14 +147,41 @@ export const dataExtensionFieldManagement = ({
     // Lazy: translate on access (after the container's i18n has loaded), not at
     // construction — the source is built before `load()` runs initTask, so an
     // eager map would freeze the raw translation keys.
-    get creatableFieldTypes(): FieldTypeOption[] {
-      const t = dataExtension.container.translate;
-      return CREATABLE_TYPES.map((ft) => ({
-        id: ft.id,
-        label: t(ft.labelKey),
-        namePlaceholder: t(ft.namePlaceholderKey),
-        patternsType: toPatternsFieldType(ft.id),
-      }));
+    get fieldModal(): {
+      text: FieldModalText;
+      types: ResolvedFieldTypeOption[];
+      permissions?: FieldPermissions;
+      supportsPii?: boolean;
+    } {
+      const { translate: t, environment } = dataExtension.container;
+      return {
+        text: {
+          addTitle: t('cairo.customFields.addCustomField.modal.title'),
+          editTitle: t('cairo.customFields.editCustomField.modal.title'),
+          settingsLabel: t(
+            'cairo.customFields.addCustomField.modal.advancedSettings.readPermissions',
+          ),
+          addSubtitle: {
+            text: t('cairo.customFields.addCustomField.modal.subtitle'),
+            note: t('cairo.customFields.addCustomField.modal.subtitle.note'),
+            learnMore: {
+              label: t('cairo.subtitle.learnMore'),
+              href: `https://support.wix.com/${environment.language}/article/about-custom-fields`,
+            },
+          },
+        },
+        types: CREATABLE_TYPES.map((ft) => ({
+          id: ft.id,
+          label: t(ft.labelKey),
+          namePlaceholder: t(ft.namePlaceholderKey),
+          patternsType: toPatternsFieldType(ft.id),
+        })),
+        // Always an object: DataExtension always offers permissions, and the
+        // consumer's defaults are optional. Empty means "no defaults, hide
+        // nothing" — which is what the section already rendered without them.
+        permissions: dataExtension.defaultPermissions ?? {},
+        supportsPii: dataExtension.containsPii,
+      };
     },
     get existingFieldKeys() {
       // All user fields, not just the available ones: duplicate-key detection
@@ -162,31 +191,6 @@ export const dataExtensionFieldManagement = ({
     get maxReached() {
       return dataExtension.isReachedMaxCustomFields;
     },
-    get permissions() {
-      return dataExtension.defaultPermissions;
-    },
-    supportsPermissions: true,
-    get supportsPii() {
-      return dataExtension.containsPii;
-    },
-    get fieldModalText() {
-      const { translate: t, environment } = dataExtension.container;
-      return {
-        addTitle: t('cairo.customFields.addCustomField.modal.title'),
-        editTitle: t('cairo.customFields.editCustomField.modal.title'),
-        settingsLabel: t(
-          'cairo.customFields.addCustomField.modal.advancedSettings.readPermissions',
-        ),
-        addSubtitle: {
-          text: t('cairo.customFields.addCustomField.modal.subtitle'),
-          note: t('cairo.customFields.addCustomField.modal.subtitle.note'),
-          learnMore: {
-            label: t('cairo.subtitle.learnMore'),
-            href: `https://support.wix.com/${environment.language}/article/about-custom-fields`,
-          },
-        },
-      };
-    },
     addField: upsertField,
     editField: (_fieldId, draft) => upsertField(draft),
     getFieldDraft: (fieldId) =>

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "DragHandle549611350";
+var _namespace_ = "DragHandle3580633791";
 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":"DragHandle549611350__root"};
+export var classes = {"root":"DragHandle3580633791__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/EditableCell.st.css

@@ -1,25 +1,41 @@
+@property st-global(--wds-color-fill-surface-raised);
+@property st-global(--wds-color-border-dark-secondary);
+@property st-global(--wds-color-black-750);
+@property st-global(--wds-input-border-color-hover);
+@property st-global(--wds-input-border-color-focus);
+@property st-global(--wds-border-width-default);
 @property st-global(--wsr-color-B10);
 @property st-global(--wsr-color-B40);
-@property st-global(--wsr-color-Y10);
+@property st-global(--wsr-color-D60);
 @property st-global(--wsr-color-D80);
+@property st-global(--wsr-color-Y10);
 
 :global(td):has(> .root) {
   position: relative;
   overflow: visible;
-  min-height: 24px;
+}
+
+/* WDS DataTable sets the row height through td padding (rowVerticalPadding),
+   which adds to the cell height instead of containing it. Zero it on the whole
+   row — the checkbox and row-number cells keep the row tall otherwise. */
+:global(tr):has(.root) > :global(td) {
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+  height: 36px;
 }
 
 .root {
-  -st-states: editing, focused, selected, invalid, typeToEdit, showEditWhenFocused,
-    growable,
-    selectionTop, selectionBottom, selectionLeft, selectionRight,
-    copiedTop, copiedBottom, copiedLeft, copiedRight;
+  -st-states: editing, focused, rowActive, rangeSelected, invalid,
+    showEditWhenFocused, growable, selectionTop, selectionBottom, selectionLeft,
+    selectionRight, copiedTop, copiedBottom, copiedLeft, copiedRight;
   display: flex;
   align-items: center;
   padding: 0;
   position: absolute;
-  top: 0;
-  left: 0;
+  /* Pull the top and left border onto the neighbouring cell's border so
+     gridlines stay 1px instead of doubling up. */
+  top: -1px;
+  left: -1px;
   right: 0;
   bottom: 0;
   overflow: hidden;
@@ -27,80 +43,126 @@
   outline: none;
   cursor: default;
   user-select: none;
-  background: var(--wsr-color-D80);
-  border: 1px solid var(--wsr-color-B40);
+  background: var(
+    --wds-color-fill-surface-raised,
+    var(--wsr-color-D80, #ffffff)
+  );
+  border: var(--wds-border-width-default, 1px) solid
+    var(--wds-color-border-dark-secondary, var(--wsr-color-D60, #dfe5eb));
 }
 
-.root:selected {
-  background: rgba(56, 153, 236, 0.08);
+/* The sticky header paints over the pixel the first row borrows above itself,
+   which would swallow that row's top border. */
+:global(tr:first-child) > :global(td) > .root {
+  top: 0;
+}
+
+/* A multi-cell range keeps the range look, so every single-cell state below
+   opts out of it. */
+.root:hover:not(:rowActive):not(:rangeSelected) {
+  background: var(--wds-color-black-750, #f6f7f9);
 }
 
-.root:focused:not(:selected) {
-  box-shadow: inset 0 0 0 2px var(--wsr-color-B10);
+/* Every cell in the focused cell's row. */
+.root:rowActive:not(:rangeSelected) {
+  background: var(--wds-color-black-750, #f6f7f9);
+  box-shadow: inset 0 22px 18px -18px rgba(0, 6, 36, 0.1);
+}
+
+.root:rowActive:hover:not(:focused):not(:rangeSelected) {
+  border-color: var(
+    --wds-input-border-color-hover,
+    var(--wsr-color-B40, #d6e6fe)
+  );
+  box-shadow: inset 0 8px 6px -6px rgba(0, 6, 36, 0.05);
+}
+
+.root:focused:not(:rangeSelected) {
+  border-color: var(
+    --wds-input-border-color-focus,
+    var(--wsr-color-B10, #116dff)
+  );
+  box-shadow: inset 0 8px 6px -6px rgba(0, 6, 36, 0.05);
   z-index: 2;
 }
 
 .root:editing {
-  background: var(--wsr-color-D80);
-  box-shadow: inset 0 0 0 2px var(--wsr-color-B10);
   z-index: 3;
   user-select: auto;
   overflow: visible;
+  /* Opaque while typing, so an invalid cell's tint doesn't show behind the input. */
+  background: var(
+    --wds-color-fill-surface-raised,
+    var(--wsr-color-D80, #ffffff)
+  );
 }
 
 /* showEditWhenFocused cells (e.g. image) stay within their row bounds when
    editing — the EditComponent is always visible so no height expansion is needed. */
 .root:editing:not(:showEditWhenFocused) {
   bottom: auto;
-  min-height: 100%;
+  min-height: calc(100% + 1px);
 }
 
 /* :growable showEditWhenFocused cells (e.g. multi-document) can wrap content
-   past row height. Release the bottom anchor and lay an opaque D80 base under
-   the :selected blue tint so the overflow area doesn't reveal adjacent rows.
-   z-index lifts the overflow above neighboring cells. */
+   past row height. Release the bottom anchor so the cell grows, and lift it
+   above neighboring cells. */
 .root:focused:growable {
-  background-color: var(--wsr-color-D80);
-  background-image: linear-gradient(rgba(56, 153, 236, 0.08), rgba(56, 153, 236, 0.08));
   bottom: auto;
-  min-height: 100%;
+  min-height: calc(100% + 1px);
   z-index: 3;
 }
 
 /* showEditWhenFocused cells: when a button inside has focus (inner focus),
-   show the editing ring and allow button focus rings to render unclipped.
+   show the focus border and allow button focus rings to render unclipped.
    isEditing is false here, so we use data-inner-focused set by the EditComponent. */
 .root:has([data-inner-focused]) {
   overflow: visible;
   z-index: 3;
-  box-shadow: inset 0 0 0 2px var(--wsr-color-B10);
+  border-color: var(
+    --wds-input-border-color-focus,
+    var(--wsr-color-B10, #116dff)
+  );
+  box-shadow: inset 0 8px 6px -6px rgba(0, 6, 36, 0.05);
 }
 
-.root:selectionTop:not(:editing) { border-top: 2px solid var(--wsr-color-B10); }
-.root:selectionBottom:not(:editing) { border-bottom: 2px solid var(--wsr-color-B10); }
-.root:selectionLeft:not(:editing) { border-left: 2px solid var(--wsr-color-B10); }
-.root:selectionRight:not(:editing) { border-right: 2px solid var(--wsr-color-B10); }
+.root:rangeSelected {
+  background: rgba(56, 153, 236, 0.08);
+}
 
-/* Type-to-edit cells (text, number, url, email): the keystroke lands directly in
-   the input, so keeping the selection border alongside the editing shadow is
-   intentional — it communicates "this cell is selected and being typed into". */
-.root:selectionTop:editing:typeToEdit { border-top: 2px solid var(--wsr-color-B10); }
-.root:selectionBottom:editing:typeToEdit { border-bottom: 2px solid var(--wsr-color-B10); }
-.root:selectionLeft:editing:typeToEdit { border-left: 2px solid var(--wsr-color-B10); }
-.root:selectionRight:editing:typeToEdit { border-right: 2px solid var(--wsr-color-B10); }
+.root:selectionTop:not(:editing) {
+  border-top: 2px solid var(--wsr-color-B10);
+}
+.root:selectionBottom:not(:editing) {
+  border-bottom: 2px solid var(--wsr-color-B10);
+}
+.root:selectionLeft:not(:editing) {
+  border-left: 2px solid var(--wsr-color-B10);
+}
+.root:selectionRight:not(:editing) {
+  border-right: 2px solid var(--wsr-color-B10);
+}
 
 .root:invalid:not(:editing) {
   background: rgba(229, 0, 77, 0.06);
 }
 
-.root:copiedTop:not(:selectionTop) { border-top: 2px dashed var(--wsr-color-B10); }
-.root:copiedBottom:not(:selectionBottom) { border-bottom: 2px dashed var(--wsr-color-B10); }
-.root:copiedLeft:not(:selectionLeft) { border-left: 2px dashed var(--wsr-color-B10); }
-.root:copiedRight:not(:selectionRight) { border-right: 2px dashed var(--wsr-color-B10); }
+.root:copiedTop:not(:selectionTop) {
+  border-top: 2px dashed var(--wsr-color-B10);
+}
+.root:copiedBottom:not(:selectionBottom) {
+  border-bottom: 2px dashed var(--wsr-color-B10);
+}
+.root:copiedLeft:not(:selectionLeft) {
+  border-left: 2px dashed var(--wsr-color-B10);
+}
+.root:copiedRight:not(:selectionRight) {
+  border-right: 2px dashed var(--wsr-color-B10);
+}
 
 .validationIndicator {
   flex-shrink: 0;
-  margin-left: 12px;
+  margin-left: 8px;
   margin-right: 6px;
   color: var(--wsr-color-Y10);
 }

package/src/components/EditableTable/EditableCell.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "EditableCell2141481655";
+var _namespace_ = "EditableCell4238353398";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,12 +13,12 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"EditableCell2141481655__root","validationIndicator":"EditableCell2141481655__validationIndicator"};
+export var classes = {"root":"EditableCell4238353398__root","validationIndicator":"EditableCell4238353398__validationIndicator"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 
-export var vars = {"wsr-color-B10":"--wsr-color-B10","wsr-color-B40":"--wsr-color-B40","wsr-color-Y10":"--wsr-color-Y10","wsr-color-D80":"--wsr-color-D80"}; 
+export var vars = {"wds-color-fill-surface-raised":"--wds-color-fill-surface-raised","wds-color-border-dark-secondary":"--wds-color-border-dark-secondary","wds-color-black-750":"--wds-color-black-750","wds-input-border-color-hover":"--wds-input-border-color-hover","wds-input-border-color-focus":"--wds-input-border-color-focus","wds-border-width-default":"--wds-border-width-default","wsr-color-B10":"--wsr-color-B10","wsr-color-B40":"--wsr-color-B40","wsr-color-D60":"--wsr-color-D60","wsr-color-D80":"--wsr-color-D80","wsr-color-Y10":"--wsr-color-Y10"}; 
 
 
 

package/src/components/EditableTable/EditableCell.tsx

@@ -32,6 +32,8 @@ function _EditableCell<T, F extends FiltersMap>({
   const isFocused = cellInteraction.isCellFocused(rowKey, columnId);
   const isEditing = cellInteraction.isCellEditing(rowKey, columnId);
   const isSelected = cellInteraction.isCellSelected(rowKey, columnId);
+  const isRangeSelection = cellInteraction.isRangeSelection;
+  const isRowActive = cellInteraction.isRowActive(rowKey);
   const selectionBorder = cellInteraction.getSelectionBorder(rowKey, columnId);
   const copiedBorder = clipboard.getCopiedBorder(rowKey, columnId);
   const isEditable = state.isCellEditable(rowKey, columnId);
@@ -143,15 +145,15 @@ function _EditableCell<T, F extends FiltersMap>({
       className={st(classes.root, {
         editing: isEditing,
         focused: isFocused,
-        selected: isSelected,
+        rowActive: isRowActive,
+        rangeSelected: isSelected && isRangeSelection,
         invalid: !cellValidation.valid,
-        typeToEdit: !!resolved.onTypeToEdit,
         showEditWhenFocused: !!resolved.showEditWhenFocused,
         growable: !!resolved.growable,
-        selectionTop: selectionBorder.top,
-        selectionBottom: selectionBorder.bottom,
-        selectionLeft: selectionBorder.left,
-        selectionRight: selectionBorder.right,
+        selectionTop: isRangeSelection && selectionBorder.top,
+        selectionBottom: isRangeSelection && selectionBorder.bottom,
+        selectionLeft: isRangeSelection && selectionBorder.left,
+        selectionRight: isRangeSelection && selectionBorder.right,
         copiedTop: copiedBorder.top,
         copiedBottom: copiedBorder.bottom,
         copiedLeft: copiedBorder.left,

package/src/components/EditableTable/EditableTable.tsx

@@ -23,6 +23,7 @@ import { AddItemRow } from './AddItemRow';
 import { useAddRow } from './useAddRow';
 import type { TableColumn } from '../../model';
 import { useHeaderActions } from './useHeaderActions';
+import { version as cairoVersion } from '../../version';
 
 export interface EditableTableProps<
   T,
@@ -115,6 +116,7 @@ function _EditableTable<T, F extends FiltersMap = OptionalFiltersMap>(
       <div
         ref={containerRef}
         data-hook={dataHook}
+        data-wix-patterns={cairoVersion}
         tabIndex={0}
         onKeyDown={keyboard.onKeyDown}
         onFocus={onFocus}