@wix/patterns 1.436.0 → 1.438.0

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

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

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

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

package/src/components/SetupWidget/SetupStepRow.tsx

@@ -65,21 +65,13 @@ export const SetupStepRow = ({
         focused: isFocused,
         withBackground: !!focusedBackground,
       })}
-      onClick={handleClick}
-      onKeyDown={
-        clickable
-          ? (event: React.KeyboardEvent) => {
-              if (event.key === 'Enter' || event.key === ' ') {
-                event.preventDefault();
-                onActivate();
-              }
-            }
-          : undefined
-      }
-      role={clickable ? 'button' : undefined}
-      tabIndex={clickable ? 0 : undefined}
     >
-      <ClickableCard skin="outline" hasPadding={false} disabled={isDisabled}>
+      <ClickableCard
+        skin="outline"
+        hasPadding={false}
+        disabled={isDisabled}
+        onClick={handleClick}
+      >
         <Box direction="vertical" padding="6px">
           {/* Reserve the CTA button's height (small button = 30px) so rows keep a
               stable height whether or not they render a CTA — otherwise completed
@@ -121,21 +113,23 @@ export const SetupStepRow = ({
               (() => {
                 const ctaNode = (
                   <Box verticalAlign="middle">
-                    <Button
-                      dataHook={`setup-step-cta-${step.id}`}
-                      size="small"
-                      priority={
-                        !isDisabled && !isFocused ? 'secondary' : 'primary'
-                      }
-                      disabled={isDisabled}
-                      ellipsis={false}
-                      onClick={(event: React.MouseEvent) => {
-                        event.stopPropagation();
-                        onActivate();
-                      }}
-                    >
-                      {step.ctaLabel}
-                    </Button>
+                    <ClickableCard.Action>
+                      <Button
+                        dataHook={`setup-step-cta-${step.id}`}
+                        size="small"
+                        priority={
+                          !isDisabled && !isFocused ? 'secondary' : 'primary'
+                        }
+                        disabled={isDisabled}
+                        ellipsis={false}
+                        onClick={(event: React.MouseEvent) => {
+                          event.stopPropagation();
+                          onActivate();
+                        }}
+                      >
+                        {step.ctaLabel}
+                      </Button>
+                    </ClickableCard.Action>
                   </Box>
                 );
 
@@ -162,16 +156,18 @@ export const SetupStepRow = ({
                 marginRight="SP2"
                 className={st(classes.completedCta)}
               >
-                <TextButton
-                  dataHook={`setup-step-cta-${step.id}`}
-                  size="small"
-                  onClick={(event: React.MouseEvent) => {
-                    event.stopPropagation();
-                    onActivate();
-                  }}
-                >
-                  {step.completedCtaLabel}
-                </TextButton>
+                <ClickableCard.Action>
+                  <TextButton
+                    dataHook={`setup-step-cta-${step.id}`}
+                    size="small"
+                    onClick={(event: React.MouseEvent) => {
+                      event.stopPropagation();
+                      onActivate();
+                    }}
+                  >
+                    {step.completedCtaLabel}
+                  </TextButton>
+                </ClickableCard.Action>
               </Box>
             )}
           </Box>
@@ -190,12 +186,15 @@ export const SetupStepRow = ({
               {/* Stop clicks/keys inside the consumer widget from bubbling to the
                   row's toggle handler — otherwise interacting with the content
                   (e.g. an input) would collapse the card. */}
-              <div
-                onClick={(event) => event.stopPropagation()}
-                onKeyDown={(event) => event.stopPropagation()}
-              >
-                {renderStepContent?.(step)}
-              </div>
+              <ClickableCard.Action>
+                <div
+                  data-hook={`setup-step-content-action-${step.id}`}
+                  onClick={(event) => event.stopPropagation()}
+                  onKeyDown={(event) => event.stopPropagation()}
+                >
+                  {renderStepContent?.(step)}
+                </div>
+              </ClickableCard.Action>
             </Box>
           )}
         </Box>

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SetupWidget4109451711";
+var _namespace_ = "SetupWidget1282089645";
 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":"SetupWidget4109451711__root","row":"SetupWidget4109451711__row","completedCta":"SetupWidget4109451711__completedCta","card":"SetupWidget4109451711__card","stepIcon":"SetupWidget4109451711__stepIcon","chevron":"SetupWidget4109451711__chevron","chevronDisabled":"SetupWidget4109451711__chevronDisabled","inProgressLabel":"SetupWidget4109451711__inProgressLabel"};
+export var classes = {"root":"SetupWidget1282089645__root","row":"SetupWidget1282089645__row","completedCta":"SetupWidget1282089645__completedCta","card":"SetupWidget1282089645__card","stepIcon":"SetupWidget1282089645__stepIcon","chevron":"SetupWidget1282089645__chevron","chevronDisabled":"SetupWidget1282089645__chevronDisabled","inProgressLabel":"SetupWidget1282089645__inProgressLabel"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/SetupWidget/SetupWidget.uni.driver.ts

@@ -2,6 +2,7 @@ import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
 import { baseUniDriverFactory } from '../../unidriver';
 import {
   ButtonUniDriver,
+  ClickableCardUniDriver,
   TextButtonUniDriver,
 } from '@wix/design-system/dist/testkit/unidriver';
 
@@ -15,6 +16,9 @@ export default (base: UniDriver, body: UniDriver) => {
   const stepCta = (id: string) =>
     ButtonUniDriver(base.$(`[data-hook="setup-step-cta-${id}"]`), body);
 
+  const stepCard = (id: string) =>
+    ClickableCardUniDriver(base.$(`[data-hook="setup-step-${id}"]`), body);
+
   return {
     /** Widget title text. */
     getTitle: () => base.$(`[data-hook="setup-widget-title"]`).text(),
@@ -27,8 +31,10 @@ export default (base: UniDriver, body: UniDriver) => {
     /** Whether a given step row/card is rendered. */
     stepExists: (id: string) =>
       base.$(`[data-hook="setup-step-${id}"]`).exists(),
-    /** Click a step's row/card (triggers inline toggle or navigate). */
+    /** Click a step's row/card. */
     clickStep: (id: string) => base.$(`[data-hook="setup-step-${id}"]`).click(),
+    /** Click a desktop step card's activation overlay. */
+    clickStepCard: (id: string) => stepCard(id).click(),
     /** Click a step's CTA button. */
     clickStepCta: (id: string) => stepCta(id).click(),
     /** Whether a step's CTA is rendered. */
@@ -40,6 +46,11 @@ export default (base: UniDriver, body: UniDriver) => {
     /** Whether a step's inline-expansion content is shown. */
     isStepExpanded: (id: string) =>
       base.$(`[data-hook="setup-step-content-${id}"]`).exists(),
+    /** Inline content must be lifted over the card's activation overlay. */
+    getInlineContentActionStyle: (id: string) =>
+      base
+        .$(`[data-hook="setup-step-content-action-${id}"]`)
+        .attr('style'),
     /** Whether a step row/card is the single focused ("next") step. */
     isStepFocused: (id: string) =>
       base

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_ = "SkeletonCard1261095733";
+var _namespace_ = "SkeletonCard304981479";
 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":"SkeletonCard1261095733__root","headerLoading":"SkeletonCard1261095733__headerLoading"};
+export var classes = {"root":"SkeletonCard304981479__root","headerLoading":"SkeletonCard304981479__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_ = "SlidingModal2267206532";
+var _namespace_ = "SlidingModal1492185790";
 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":"SlidingModal2267206532__root"};
+export var classes = {"root":"SlidingModal1492185790__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_ = "AddFieldColumnHeader2667196467";
+var _namespace_ = "AddFieldColumnHeader1736342762";
 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":"AddFieldColumnHeader2667196467__root","title":"AddFieldColumnHeader2667196467__title","hoverBridge":"AddFieldColumnHeader2667196467__hoverBridge"};
+export var classes = {"root":"AddFieldColumnHeader1736342762__root","title":"AddFieldColumnHeader1736342762__title","hoverBridge":"AddFieldColumnHeader1736342762__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_ = "TabsFilter1822916798";
+var _namespace_ = "TabsFilter261584330";
 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":"TabsFilter1822916798__root","title":"TabsFilter1822916798__title"};
+export var classes = {"root":"TabsFilter261584330__root","title":"TabsFilter261584330__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_ = "ManageTagsModal3564937902";
+var _namespace_ = "ManageTagsModal1286226300";
 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":"ManageTagsModal3564937902__root"};
+export var classes = {"root":"ManageTagsModal1286226300__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_ = "ToolbarItem748894430";
+var _namespace_ = "ToolbarItem1478653332";
 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":"ToolbarItem748894430__root"};
+export var classes = {"root":"ToolbarItem1478653332__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_ = "ToolbarItemBox2783906135";
+var _namespace_ = "ToolbarItemBox600544798";
 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":"ToolbarItemBox2783906135__root"};
+export var classes = {"root":"ToolbarItemBox600544798__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_ = "common2285840999";
+var _namespace_ = "common3516106445";
 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":"common2285840999__root","column":"common2285840999__column","fullHeight":"common2285840999__fullHeight"};
+export var classes = {"root":"common3516106445__root","column":"common3516106445__column","fullHeight":"common3516106445__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_ = "CollectionPageHeader1906391536";
+var _namespace_ = "CollectionPageHeader2043964325";
 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":"CollectionPageHeader1906391536__root"};
+export var classes = {"root":"CollectionPageHeader2043964325__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/state/EditableTable/CellInteractionState.ts

@@ -71,6 +71,7 @@ export class CellInteractionState<T, F extends FiltersMap> {
     this.selectedCells.clear();
     this.selectedCells.add(cellKey(rowKey, columnId));
     this.selectionAnchor = { rowKey, columnId };
+    this._parent.cellValue.flushDrafts(rowKey);
   }
 
   clearFocus() {
@@ -78,6 +79,7 @@ export class CellInteractionState<T, F extends FiltersMap> {
     this.selectedCells.clear();
     this.selectionAnchor = null;
     this.cancelEdit();
+    this._parent.cellValue.flushDrafts();
   }
 
   replaceRowKey(oldRowKey: string, newRowKey: string) {