@wix/patterns 1.437.0 → 1.439.0

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "MultiBulkActionToolbar4137537886";
+var _namespace_ = "MultiBulkActionToolbar2856989577";
 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":"MultiBulkActionToolbar4137537886__root","leftGroupWrapper":"MultiBulkActionToolbar4137537886__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar4137537886__selectedCountItem","selectedCountText":"MultiBulkActionToolbar4137537886__selectedCountText"};
+export var classes = {"root":"MultiBulkActionToolbar2856989577__root","leftGroupWrapper":"MultiBulkActionToolbar2856989577__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar2856989577__selectedCountItem","selectedCountText":"MultiBulkActionToolbar2856989577__selectedCountText"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/MultiBulkActionToolbar/MultiBulkActionToolbar.tsx

@@ -265,9 +265,9 @@ function _MultiBulkActionToolbar(props: MultiBulkActionToolbarProps) {
   );
 
   return (
-    <Box minHeight="60px">
+    <Box minHeight={isBmHarmonyTheme ? undefined : '60px'}>
       <TableToolbar
-        removeVerticalPadding={hasToolbarTabs}
+        removeVerticalPadding={!isBmHarmonyTheme && hasToolbarTabs}
         dataHook="bulk-action-toolbar"
       >
         <TableToolbar.ItemGroup position="start" className={st(classes.root)}>

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "NestedTablePlaceholderStatesRow4008336872";
+var _namespace_ = "NestedTablePlaceholderStatesRow2801403390";
 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":"NestedTablePlaceholderStatesRow4008336872__root"};
+export var classes = {"root":"NestedTablePlaceholderStatesRow2801403390__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_ = "NestedTableRow1941031690";
+var _namespace_ = "NestedTableRow2574809310";
 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":"NestedTableRow1941031690__root","firstLevel":"NestedTableRow1941031690__firstLevel","placeholder":"NestedTableRow1941031690__placeholder","parentHovered":"NestedTableRow1941031690__parentHovered"};
+export var classes = {"root":"NestedTableRow2574809310__root","firstLevel":"NestedTableRow2574809310__firstLevel","placeholder":"NestedTableRow2574809310__placeholder","parentHovered":"NestedTableRow2574809310__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_ = "MultipleDragOverlayEffect3191206267";
+var _namespace_ = "MultipleDragOverlayEffect1063327707";
 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":"MultipleDragOverlayEffect3191206267__root"};
+export var classes = {"root":"MultipleDragOverlayEffect1063327707__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_ = "NestedTableDragAndDropRow1435116602";
+var _namespace_ = "NestedTableDragAndDropRow3382867854";
 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":"NestedTableDragAndDropRow1435116602__root"};
+export var classes = {"root":"NestedTableDragAndDropRow3382867854__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_ = "PickerContent1981815248";
+var _namespace_ = "PickerContent1791181332";
 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":"PickerContent1981815248__root"};
+export var classes = {"root":"PickerContent1791181332__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_ = "PickerContentAdditionalStep564735449";
+var _namespace_ = "PickerContentAdditionalStep3542605584";
 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":"PickerContentAdditionalStep564735449__root","titles":"PickerContentAdditionalStep564735449__titles","suffix":"PickerContentAdditionalStep564735449__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep3542605584__root","titles":"PickerContentAdditionalStep3542605584__titles","suffix":"PickerContentAdditionalStep3542605584__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_ = "PickerTableListItem3360675323";
+var _namespace_ = "PickerTableListItem2441983769";
 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":"PickerTableListItem3360675323__root"};
+export var classes = {"root":"PickerTableListItem2441983769__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/SchemaSource/schemaFieldManagement.ts

@@ -109,7 +109,7 @@ export const schemaFieldManagement = (
     editField: async (fieldId, draft) => {
       const fields = await sourceState.fieldActions?.editField?.(
         fieldId,
-        { displayName: draft.name },
+        { displayName: draft.name, isPii: draft.containsPii },
         draft.settings,
       );
       if (fields) {

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SetupWidget4282571245";
+var _namespace_ = "SetupWidget3308182246";
 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":"SetupWidget4282571245__root","row":"SetupWidget4282571245__row","completedCta":"SetupWidget4282571245__completedCta","card":"SetupWidget4282571245__card","stepIcon":"SetupWidget4282571245__stepIcon","chevron":"SetupWidget4282571245__chevron","chevronDisabled":"SetupWidget4282571245__chevronDisabled","inProgressLabel":"SetupWidget4282571245__inProgressLabel"};
+export var classes = {"root":"SetupWidget3308182246__root","row":"SetupWidget3308182246__row","completedCta":"SetupWidget3308182246__completedCta","card":"SetupWidget3308182246__card","stepIcon":"SetupWidget3308182246__stepIcon","chevron":"SetupWidget3308182246__chevron","chevronDisabled":"SetupWidget3308182246__chevronDisabled","inProgressLabel":"SetupWidget3308182246__inProgressLabel"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/SidePanelModal/SidePanelModal.tsx

@@ -1,11 +1,12 @@
 import { observer } from 'mobx-react-lite';
-import { SidePanelWidth } from '@wix/bex-core';
+import { SidePanelInset, SidePanelWidth } from '@wix/bex-core';
 import { useWixPatternsContainer, usePageContext } from '@wix/bex-core/react';
 import { SlidingModal } from '../SlidingModal';
 import React, { useEffect, useMemo } from 'react';
 import { reaction } from 'mobx';
 import { SidePanelModalItem } from './SidePanelModalItem';
 import { SidePanelsState } from '../../state/SidePanelsState';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 
 export interface SidePanelModalProps {
   top: number;
@@ -32,25 +33,28 @@ function _SidePanelModal(props: SidePanelModalProps) {
     [isPanelLayout],
   );
 
+  const isBmHarmonyTheme = useBmHarmonyTheme();
+  const inset = isBmHarmonyTheme && !isPanelLayout ? SidePanelInset : 0;
+
   const style = useMemo(
     () => ({
-      top,
+      top: top + inset,
       ...(useRelativeSidePanel
         ? {
-            right: isPanelLayout ? undefined : 0,
+            right: isPanelLayout ? undefined : inset,
           }
         : {
             left: isPanelLayout
               ? 0
               : left != null
-              ? left - SidePanelWidth
+              ? left - SidePanelWidth - inset
               : undefined,
           }),
-      bottom: 0,
+      bottom: inset,
       overflow: 'hidden',
       width,
     }),
-    [top, left, width],
+    [top, left, width, isPanelLayout, useRelativeSidePanel, inset],
   );
 
   useEffect(() => {
@@ -107,6 +111,8 @@ function _SidePanelModal(props: SidePanelModalProps) {
         sidePanel.transition.setStatus('exiting');
       }}
       width={SidePanelWidth}
+      closedOffset={inset}
+      inset={inset}
       isOpen={isOpen}
       onRequestClose={() => {
         sidePanel.close();

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SkeletonCard3264404199";
+var _namespace_ = "SkeletonCard969420999";
 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":"SkeletonCard3264404199__root","headerLoading":"SkeletonCard3264404199__headerLoading"};
+export var classes = {"root":"SkeletonCard969420999__root","headerLoading":"SkeletonCard969420999__headerLoading"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/SlidingModal/SlidingModal.st.css

@@ -1,5 +1,7 @@
+@property st-global(--wds-side-panel-standard-corner-radius);
+
 .root {
-  -st-states: exited, overlay, appendTo(enum(parent));
+  -st-states: exited, overlay, inset, appendTo(enum(parent));
   transition: transform 0.4s ease 0s;
   position: fixed;
   z-index: 1;
@@ -13,6 +15,12 @@
   position: absolute;
 }
 
+.root:inset {
+  border-radius: var(--wds-side-panel-standard-corner-radius, 0);
+  /* pre-promote the layer so the rounded clip + shadow rasterize before the slide starts */
+  will-change: transform;
+}
+
 .root:not(:exited) {
   box-shadow: 0 3px 24px 0 rgba(22, 45, 61, 0.18),
     0 8px 8px 0 rgba(22, 45, 61, 0.12);

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SlidingModal1088809015";
+var _namespace_ = "SlidingModal2205962126";
 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":"SlidingModal1088809015__root"};
+export var classes = {"root":"SlidingModal2205962126__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 
-export var vars = {}; 
+export var vars = {"wds-side-panel-standard-corner-radius":"--wds-side-panel-standard-corner-radius"}; 
 
 
 

package/src/components/SlidingModal/SlidingModal.tsx

@@ -25,6 +25,8 @@ export interface SlidingModalProps {
   transitionStatus?: string;
   onRequestClose?: () => void;
   shadowWidth?: number;
+  closedOffset?: number;
+  inset?: number;
   appendTo?: 'parent';
   overlay?: boolean;
 }
@@ -35,6 +37,8 @@ export function SlidingModal(props: SlidingModalProps) {
     className,
     style: styleProp,
     shadowWidth = 20,
+    closedOffset = 0,
+    inset = 0,
     width,
     isOpen,
     children,
@@ -56,11 +60,13 @@ export function SlidingModal(props: SlidingModalProps) {
         isOpen
           ? 0
           : typeof width === 'number'
-          ? `${width + shadowWidth}px`
+          ? `${width + shadowWidth + closedOffset}px`
+          : closedOffset
+          ? `calc(${width} + ${shadowWidth + closedOffset}px)`
           : `${width}px`
       }, 0, 0)`,
     }),
-    [styleProp, width, isOpen],
+    [styleProp, width, isOpen, shadowWidth, closedOffset],
   );
 
   const isOpenRef = useRef(isOpen);
@@ -135,6 +141,7 @@ export function SlidingModal(props: SlidingModalProps) {
           exited: transitionStatus === 'exited',
           overlay,
           appendTo,
+          inset: inset > 0,
         },
         ...[className, isOpen ? 'cairo-sliding-modal-is-open' : undefined],
       )}

package/src/components/Table/AddFieldColumnHeader.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "AddFieldColumnHeader3849828666";
+var _namespace_ = "AddFieldColumnHeader1135780333";
 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":"AddFieldColumnHeader3849828666__root","title":"AddFieldColumnHeader3849828666__title","hoverBridge":"AddFieldColumnHeader3849828666__hoverBridge"};
+export var classes = {"root":"AddFieldColumnHeader1135780333__root","title":"AddFieldColumnHeader1135780333__title","hoverBridge":"AddFieldColumnHeader1135780333__hoverBridge"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "TabsFilter3586451056";
+var _namespace_ = "TabsFilter4286792124";
 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":"TabsFilter3586451056__root","title":"TabsFilter3586451056__title"};
+export var classes = {"root":"TabsFilter4286792124__root","title":"TabsFilter4286792124__title"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/Tags/ManageTags/ManageTagsModal/ManageTagsModal.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "ManageTagsModal2897725672";
+var _namespace_ = "ManageTagsModal1604149467";
 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":"ManageTagsModal2897725672__root"};
+export var classes = {"root":"ManageTagsModal1604149467__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

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

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

package/src/components/ToolbarTitle/ToolbarTitle.tsx

@@ -12,6 +12,7 @@ import React, { ReactNode } from 'react';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import type { FiltersMap } from '@wix/bex-core';
 import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 import { withoutDefaults } from '@wix/bex-core';
 import { cairoLearnMore } from '@wix/bex-utils/@wix/bi-logger-os-data/v2';
 
@@ -61,9 +62,18 @@ export const ToolbarTitle = observer(function ToolbarTitle<
     },
     reportBi,
   } = useToolbarCollectionContext<T, F>();
+  const isBmHarmonyTheme = useBmHarmonyTheme();
+  // Under Harmony the toolbar keeps its own vertical padding (theme tokens),
+  // so the title must not add more on top of it
+  const verticalPadding = isBmHarmonyTheme ? undefined : 'SP2';
 
   return (
-    <Box direction="vertical" paddingTop="SP2" paddingBottom="SP2" width="100%">
+    <Box
+      direction="vertical"
+      paddingTop={verticalPadding}
+      paddingBottom={verticalPadding}
+      width="100%"
+    >
       <Box minWidth={0} verticalAlign="middle" gap="SP1">
         <Heading dataHook="toolbar-title" ellipsis size="medium">
           {title}

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "common2940309204";
+var _namespace_ = "common1967001566";
 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":"common2940309204__root","column":"common2940309204__column","fullHeight":"common2940309204__fullHeight"};
+export var classes = {"root":"common1967001566__root","column":"common1967001566__column","fullHeight":"common1967001566__fullHeight"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/state/CollectionPage/CollectionPageHeader.st.css.ts

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

package/src/state/EditableTable/CellValueState.ts

@@ -301,6 +301,19 @@ export class CellValueState<T, F extends FiltersMap> {
         if (pendingKey) {
           this._pendingCells.delete(pendingKey);
         }
+        if (this._parent.mutation.isLocalNewRow(rowKey)) {
+          // A row not created on the server yet can't take an update —
+          // buffer the value as a draft; it goes out with the row's
+          // create when focus leaves the row.
+          if (pendingKey) {
+            this._draftCells.set(pendingKey, {
+              rowKey: keyedItem.key,
+              columnId: column.id,
+              value,
+            });
+          }
+          continue;
+        }
         const currentItem =
           rowItems.get(rowKey) ??
           this._consumeRowDrafts(rowKey, keyedItem.item);
@@ -358,10 +371,15 @@ export class CellValueState<T, F extends FiltersMap> {
     const items: T[] = [];
     for (const rowKey of rowKeys) {
       const keyedItem = this._parent._getKeyedItem(rowKey);
-      if (keyedItem) {
-        items.push(this._consumeRowDrafts(rowKey, keyedItem.item));
-      } else {
+      if (!keyedItem) {
         this._dropRowDrafts(rowKey);
+      } else if (this._parent.mutation.isLocalNewRow(rowKey)) {
+        this._parent.mutation.commitNewRow(
+          rowKey,
+          this._consumeRowDrafts(rowKey, keyedItem.item),
+        );
+      } else {
+        items.push(this._consumeRowDrafts(rowKey, keyedItem.item));
       }
     }
     if (items.length > 0) {

package/src/state/EditableTable/EditableTableState.ts

@@ -11,6 +11,7 @@ import type { MessageModalLayoutProps } from '@wix/design-system';
 import type { KeyedItem, RemoveItemDisabledResult } from '@wix/bex-core';
 import { ToolbarCollectionState } from '../ToolbarCollectionState';
 import { TableState } from '../TableState';
+import type { TableStateParams } from '../TableState';
 import { ICollectionComponentState } from '../ICollectionComponentState';
 import { CellInteractionState } from './CellInteractionState';
 import { CellValueState } from './CellValueState';
@@ -73,6 +74,35 @@ export interface EditableTableStatePublicAPI<T, F extends FiltersMap> {
   isMultiDeleteDisabled(rowKeys: string[]): boolean;
 }
 
+/**
+ * Draft rows (added locally, not yet created on the server) are not part of
+ * the collection result. This TableState merges them into the rendered list,
+ * so everything that renders rows — the WDS table and the virtualizer — sees
+ * them, and a table whose only rows are drafts does not show the empty state.
+ */
+class TableStateWithDraftRows<T, F extends FiltersMap> extends TableState<
+  T,
+  F
+> {
+  private readonly _mergeDraftRows: (items: KeyedItem<T>[]) => KeyedItem<T>[];
+
+  constructor(
+    params: TableStateParams<T, F>,
+    mergeDraftRows: (items: KeyedItem<T>[]) => KeyedItem<T>[],
+  ) {
+    super(params);
+    this._mergeDraftRows = mergeDraftRows;
+  }
+
+  get keyedItems() {
+    return this._mergeDraftRows(this.collection.result.keyedItems);
+  }
+
+  get showEmptyState() {
+    return this.toolbar.multi.showEmptyState && this.keyedItems.length === 0;
+  }
+}
+
 export class EditableTableState<T, F extends FiltersMap>
   implements ICollectionComponentState, EditableTableStatePublicAPI<T, F>
 {
@@ -106,11 +136,14 @@ export class EditableTableState<T, F extends FiltersMap>
         componentType: 'EditableTable',
       });
 
-    this.tableState = new TableState({
-      collection: params.collection,
-      container: params.container,
-      toolbar: this.toolbar,
-    });
+    this.tableState = new TableStateWithDraftRows(
+      {
+        collection: params.collection,
+        container: params.container,
+        toolbar: this.toolbar,
+      },
+      (keyedItems) => this.mutation._mergeDraftRows(keyedItems),
+    );
 
     this.cellValue = new CellValueState<T, F>(
       this,
@@ -226,7 +259,11 @@ export class EditableTableState<T, F extends FiltersMap>
   }
 
   _getKeyedItem(key: string): KeyedItem<T> | undefined | null {
-    return this.collection.getKeyedItem(key);
+    // Draft rows are not in the collection — fall back to the merged list.
+    return (
+      this.collection.getKeyedItem(key) ??
+      this.keyedItems.find((ki) => ki.key === key)
+    );
   }
 
   _toIndices(pos: Cell): { row: number; col: number } | null {