@wix/patterns 1.433.0 → 1.436.0

package/src/components/CustomFieldModal/CustomFieldTypeDropdown.tsx

@@ -18,7 +18,7 @@ export const _CustomFieldTypeDropdown = (
         $: { type, name },
       },
       mode,
-      fieldManagement: { creatableFieldTypes },
+      fieldManagement: { fieldModal },
       generateUniqueKey,
       setKeyFieldIfNotDirty,
     },
@@ -28,7 +28,7 @@ export const _CustomFieldTypeDropdown = (
 
   const fieldTypeOptions = React.useMemo(
     () =>
-      creatableFieldTypes.map((option) =>
+      fieldModal.types.map((option) =>
         listItemSelectBuilder({
           dataHook: `custom-field-modal-type-${option.id}`,
           id: option.id,
@@ -44,7 +44,7 @@ export const _CustomFieldTypeDropdown = (
           label: option.label,
         }),
       ),
-    [creatableFieldTypes],
+    [fieldModal.types],
   );
 
   return (

package/src/components/CustomFieldModal/CustomFieldTypeDropdownV2.tsx

@@ -24,7 +24,7 @@ export const _CustomFieldTypeDropdownV2 = (
         $: { type, name, containsPii },
       },
       mode,
-      fieldManagement: { creatableFieldTypes },
+      fieldManagement: { fieldModal },
       generateUniqueKey,
       setKeyFieldIfNotDirty,
     },
@@ -35,12 +35,12 @@ export const _CustomFieldTypeDropdownV2 = (
   const [search, setSearch] = React.useState<string | null>(null);
   const query = search?.trim().toLowerCase() ?? '';
 
-  const selectedType = creatableFieldTypes.find(
+  const selectedType = fieldModal.types.find(
     (option) => option.id === type.value,
   );
 
   const fieldTypeOptions = React.useMemo(() => {
-    const toOption = (option: (typeof creatableFieldTypes)[number]) =>
+    const toOption = (option: (typeof fieldModal.types)[number]) =>
       listItemSelectBuilder({
         dataHook: `custom-field-modal-type-${option.id}`,
         id: option.id,
@@ -58,12 +58,12 @@ export const _CustomFieldTypeDropdownV2 = (
       });
 
     if (query) {
-      return creatableFieldTypes
+      return fieldModal.types
         .filter((option) => option.label.toLowerCase().includes(query))
         .map(toOption);
     }
 
-    const groups = creatableFieldTypes.reduce<string[]>((labels, option) => {
+    const groups = fieldModal.types.reduce<string[]>((labels, option) => {
       const label = option.group;
       if (label && !labels.includes(label)) {
         labels.push(label);
@@ -72,7 +72,7 @@ export const _CustomFieldTypeDropdownV2 = (
     }, []);
 
     if (groups.length === 0) {
-      return creatableFieldTypes.map(toOption);
+      return fieldModal.types.map(toOption);
     }
 
     const grouped = groups.flatMap((label) => [
@@ -81,15 +81,15 @@ export const _CustomFieldTypeDropdownV2 = (
         type: 'subheader',
         title: label,
       }),
-      ...creatableFieldTypes
+      ...fieldModal.types
         .filter((option) => option.group === label)
         .map(toOption),
     ]);
-    const ungrouped = creatableFieldTypes
+    const ungrouped = fieldModal.types
       .filter((option) => !option.group)
       .map(toOption);
     return [...grouped, ...ungrouped];
-  }, [creatableFieldTypes, query]);
+  }, [fieldModal.types, query]);
 
   return (
     <AutoComplete
@@ -112,8 +112,13 @@ export const _CustomFieldTypeDropdownV2 = (
       }
       onChange={(e) => setSearch(e.target.value)}
       onSelect={({ id }) => {
+        const nextType = String(id);
         setSearch(null);
-        type.onChange(String(id));
+        if (nextType !== type.value) {
+          // The settings were filled in for the old type; the new one starts fresh.
+          props.state.resetSettingsValues();
+        }
+        type.onChange(nextType);
         // Read off `props.state` — a destructured computed holds the pre-change value.
         if (!props.state.typeSupportsPii) {
           containsPii.onChange(false);

package/src/components/CustomFieldsPanel/CustomFieldItem.tsx

@@ -4,6 +4,7 @@ import { observer } from 'mobx-react-lite';
 import { Field } from '@wix/bex-core';
 import { FieldActionsPopover } from '../FieldActions';
 import { CustomFieldsPanelState } from '../../state/CustomFields/CustomFieldsPanelState';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 
 export interface CustomFieldItemProps {
   field: Field;
@@ -13,6 +14,7 @@ export interface CustomFieldItemProps {
 
 function _CustomFieldItem(props: CustomFieldItemProps) {
   const { field, showDivider, state } = props;
+  const isHarmonyTheme = useBmHarmonyTheme();
 
   const style = useMemo<CSSProperties>(
     () => ({
@@ -23,6 +25,14 @@ function _CustomFieldItem(props: CustomFieldItemProps) {
     [],
   );
 
+  const innerTextStyle = useMemo<CSSProperties>(
+    () => ({
+      ...(isHarmonyTheme ? {} : { padding: '0 6px' }),
+      wordBreak: 'break-word',
+    }),
+    [isHarmonyTheme],
+  );
+
   const menuConfig = state.fieldActionsMenu({
     fieldId: field.id,
     origin: 'Custom fields panel',
@@ -34,16 +44,12 @@ function _CustomFieldItem(props: CustomFieldItemProps) {
       <TableListItem
         showDivider={showDivider}
         verticalPadding="tiny"
+        {...(isHarmonyTheme ? { horizontalPadding: 'tiny' } : {})}
         options={[
           {
             value: (
               <Box>
-                <div
-                  style={{
-                    padding: '0 6px',
-                    wordBreak: 'break-word',
-                  }}
-                >
+                <div style={innerTextStyle}>
                   <Text size="small">{field.displayName || field.id}</Text>
                 </div>
               </Box>

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_ = "DragHandle47840941";
+var _namespace_ = "DragHandle1315185218";
 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":"DragHandle47840941__root"};
+export var classes = {"root":"DragHandle1315185218__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_ = "EditableCell2760915353";
+var _namespace_ = "EditableCell3789451680";
 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":"EditableCell2760915353__root","validationIndicator":"EditableCell2760915353__validationIndicator"};
+export var classes = {"root":"EditableCell3789451680__root","validationIndicator":"EditableCell3789451680__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/EditableTableContextMenu.tsx

@@ -30,6 +30,12 @@ const DIVIDER_HEIGHT = 9;
 const PADDING = 16;
 const OFFSET_X = 4;
 const OFFSET_Y = 4;
+const CONTEXT_MENU_Z_INDEX = 5001;
+const SURFACE_BACKGROUND =
+  'var(--wds-color-fill-surface-overlay, var(--wsr-color-D80, #FFFFFF))';
+const SURFACE_BORDER_RADIUS = 'var(--wds-border-radius-surface-overlay, 8px)';
+const SURFACE_BOX_SHADOW =
+  'var(--wds-shadow-surface-overlay, var(--wsr-shadow30, 0 6px 6px 0 rgba(22, 45, 61, 0.06), 0 0 18px 0 rgba(22, 45, 61, 0.12)))';
 
 // ListItemAction's built-in disabledDescription tooltip is hardcoded to open
 // above the item, where it covers neighboring menu items. Build the item
@@ -366,8 +372,12 @@ function _EditableTableContextMenu<T, F extends FiltersMap>({
         position: 'fixed',
         left: x,
         top: y,
-        zIndex: 1000,
+        zIndex: CONTEXT_MENU_Z_INDEX,
         width: MENU_WIDTH,
+        background: SURFACE_BACKGROUND,
+        borderRadius: SURFACE_BORDER_RADIUS,
+        boxShadow: SURFACE_BOX_SHADOW,
+        overflow: 'hidden',
       }}
       onMouseDown={(e) => e.preventDefault()}
     >