@wix/patterns 1.461.0 → 1.463.0

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

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

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

@@ -10,6 +10,10 @@ export const SettingsPageUniDriver = (base: UniDriver, body: UniDriver) => {
     /** Returns page header driver */
     getPageHeader: () =>
       PageHeaderUniDriver(base.$(`[data-hook="settings-page-header"]`), body),
+
+    /** Returns the WDS heading size the page title renders at */
+    getTitleSize: () =>
+      base.$('[data-hook="form-page-header-title"]').attr('data-size'),
     ...formPageContentUniDriver,
     ...baseUniDriverFactory(base),
   };

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SetupWidget396087111";
+var _namespace_ = "SetupWidget210130192";
 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":"SetupWidget396087111__root","row":"SetupWidget396087111__row","completedCta":"SetupWidget396087111__completedCta","secondaryCta":"SetupWidget396087111__secondaryCta","card":"SetupWidget396087111__card","stepIcon":"SetupWidget396087111__stepIcon","chevron":"SetupWidget396087111__chevron","chevronDisabled":"SetupWidget396087111__chevronDisabled","inProgressLabel":"SetupWidget396087111__inProgressLabel"};
+export var classes = {"root":"SetupWidget210130192__root","row":"SetupWidget210130192__row","completedCta":"SetupWidget210130192__completedCta","secondaryCta":"SetupWidget210130192__secondaryCta","card":"SetupWidget210130192__card","stepIcon":"SetupWidget210130192__stepIcon","chevron":"SetupWidget210130192__chevron","chevronDisabled":"SetupWidget210130192__chevronDisabled","inProgressLabel":"SetupWidget210130192__inProgressLabel"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SkeletonCard577227391";
+var _namespace_ = "SkeletonCard1621660995";
 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":"SkeletonCard577227391__root","headerLoading":"SkeletonCard577227391__headerLoading"};
+export var classes = {"root":"SkeletonCard1621660995__root","headerLoading":"SkeletonCard1621660995__headerLoading"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "AddFieldColumnHeader2927909795";
+var _namespace_ = "AddFieldColumnHeader1176602481";
 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":"AddFieldColumnHeader2927909795__root","title":"AddFieldColumnHeader2927909795__title","hoverBridge":"AddFieldColumnHeader2927909795__hoverBridge"};
+export var classes = {"root":"AddFieldColumnHeader1176602481__root","title":"AddFieldColumnHeader1176602481__title","hoverBridge":"AddFieldColumnHeader1176602481__hoverBridge"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/Table/Table.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { CollectionState, FiltersMap } from '@wix/bex-core';
+import { CollectionState, FiltersMap, OptionalFiltersMap } from '@wix/bex-core';
 import { TableVirtual } from './TableVirtual';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { CollectionTableBaseProps } from '../CollectionTable';
@@ -7,7 +7,7 @@ import { TableState } from '../../state';
 import { TableCompat } from './TableCompat';
 import type { TableSectionsProp } from '../TableSections';
 
-export interface TableProps<T, F extends FiltersMap>
+export interface TableProps<T, F extends FiltersMap = OptionalFiltersMap>
   extends CollectionTableBaseProps<T, F> {
   rowHeight?: number | ((item: T, index: number) => number);
   estimatedRowHeight?: number;
@@ -29,7 +29,7 @@ export interface TableProps<T, F extends FiltersMap>
   sections?: TableSectionsProp<T>;
 }
 
-export function Table<T, F extends FiltersMap = FiltersMap>(
+export function Table<T, F extends FiltersMap = OptionalFiltersMap>(
   props: TableProps<T, F>,
 ) {
   const { rowHeight, estimatedRowHeight, isVirtual, ...tableProps } = props;

package/src/components/TableGridSwitch/TableGridSwitch.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { FiltersMap } from '@wix/bex-core';
+import { FiltersMap, OptionalFiltersMap } from '@wix/bex-core';
 import { observer } from 'mobx-react-lite';
 import type { TableGridSwitchState } from '../../state/TableGridSwitchState';
 import { GridPresetProps } from '../Grid/Grid.types';
@@ -50,12 +50,12 @@ export interface TableGridSwitchBaseProps<T, F extends FiltersMap>
   };
 }
 
-export type TableGridSwitchProps<T, F extends FiltersMap> = GridPresetProps<
+export type TableGridSwitchProps<
   T,
-  TableGridSwitchBaseProps<T, F>
->;
+  F extends FiltersMap = OptionalFiltersMap,
+> = GridPresetProps<T, TableGridSwitchBaseProps<T, F>>;
 
-export function _TableGridSwitch<T, F extends FiltersMap = FiltersMap>(
+export function _TableGridSwitch<T, F extends FiltersMap = OptionalFiltersMap>(
   props: TableGridSwitchProps<T, F>,
 ) {
   const { state, dragAndDrop, sections, ...restProps } = props;

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "TabsFilter3309937656";
+var _namespace_ = "TabsFilter3428757611";
 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":"TabsFilter3309937656__root","titleBox":"TabsFilter3309937656__titleBox"};
+export var classes = {"root":"TabsFilter3428757611__root","titleBox":"TabsFilter3428757611__titleBox"};
 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_ = "ManageTagsModal2960572131";
+var _namespace_ = "ManageTagsModal3918876308";
 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":"ManageTagsModal2960572131__root"};
+export var classes = {"root":"ManageTagsModal3918876308__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_ = "ToolbarItem2994816163";
+var _namespace_ = "ToolbarItem1774825403";
 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":"ToolbarItem2994816163__root"};
+export var classes = {"root":"ToolbarItem1774825403__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_ = "ToolbarItemBox2577102231";
+var _namespace_ = "ToolbarItemBox3007671729";
 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":"ToolbarItemBox2577102231__root"};
+export var classes = {"root":"ToolbarItemBox3007671729__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "common589529049";
+var _namespace_ = "common4027220727";
 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":"common589529049__root","column":"common589529049__column","fullHeight":"common589529049__fullHeight"};
+export var classes = {"root":"common4027220727__root","column":"common4027220727__column","fullHeight":"common4027220727__fullHeight"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/exports/page.ts

@@ -1,3 +1,7 @@
 export * from '../components/CollectionPageNew';
+export type {
+  CollectionPageHeaderBadge,
+  CollectionPageHeaderProps,
+} from '../components/CollectionPageHeaderNew';
 
 export { WidgetsFormProvider } from '../components/FormPage';

package/src/index.ts

@@ -181,6 +181,9 @@ export {
   type FormTypeConfig,
   type FormFieldComponentProps,
   type EditableCellConfig,
+  type EditableCellContextMenuAction,
+  type EditableCellContextMenuActionConfig,
+  type EditableCellContextMenuActionContext,
   type TableCellConfig,
   type CellViewProps,
   type CellEditProps,

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

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

package/src/state/CollectionPage/PanelHeader.tsx

@@ -1,20 +1,26 @@
 import { Box, Text } from '@wix/design-system';
 import React from 'react';
+import { CollectionPageHeaderBadge } from '../../components/CollectionPageHeaderNew';
+import { TitleBadges } from './TitleBadges';
 
 export interface PanelHeaderProps {
   title: string;
   subtitle?: string;
+  badges?: CollectionPageHeaderBadge[];
 }
 
 export function PanelHeader(props: PanelHeaderProps) {
-  const { title, subtitle } = props;
+  const { title, subtitle, badges } = props;
 
   return (
     <Box padding="SP4">
       <Box direction="vertical">
-        <Text size="small" weight="bold">
-          {title}
-        </Text>
+        <Box verticalAlign="middle">
+          <Text size="small" weight="bold">
+            {title}
+          </Text>
+          <TitleBadges badges={badges} />
+        </Box>
         {subtitle && <Text size="tiny">{subtitle}</Text>}
       </Box>
     </Box>

package/src/state/CollectionPage/TitleBadges.tsx

@@ -0,0 +1,42 @@
+import React, { lazy, Suspense } from 'react';
+import { Box } from '@wix/design-system';
+import { CollectionPageHeaderBadge } from '../../components/CollectionPageHeaderNew';
+
+const LazyBadge = lazy(() =>
+  import('@wix/design-system').then((m) => ({ default: m.Badge })),
+);
+
+export interface TitleBadgesProps {
+  badges?: CollectionPageHeaderBadge[];
+}
+
+export function TitleBadges({ badges }: TitleBadgesProps) {
+  if (!badges?.length) {
+    return null;
+  }
+
+  return (
+    <Suspense fallback={null}>
+      <Box
+        inline
+        gap="SP2"
+        verticalAlign="middle"
+        paddingLeft="SP2"
+        flexShrink={0}
+      >
+        {badges.map((badge, index) => (
+          <LazyBadge
+            key={index}
+            size="small"
+            skin={badge.skin}
+            prefixIcon={badge.prefixIcon}
+            suffixIcon={badge.suffixIcon}
+            dataHook={`collection-page-header-badge-${index}`}
+          >
+            {badge.text}
+          </LazyBadge>
+        ))}
+      </Box>
+    </Suspense>
+  );
+}

package/src/state/CollectionPage/useCollectionPageHeader.tsx

@@ -1,14 +1,19 @@
 import React from 'react';
 import { Box, Heading, Page } from '@wix/design-system';
-import { CollectionPageHeaderElement } from '../../components/CollectionPageHeaderNew';
+import {
+  CollectionPageHeaderBadge,
+  CollectionPageHeaderElement,
+} from '../../components/CollectionPageHeaderNew';
 import { useCollectionPageContext } from '../../providers';
 import { observer } from 'mobx-react-lite';
 import { PageSubTitle } from '../../components/PageSubTitle';
 import { useIsMobile } from '../../hooks/useIsMobile';
 import { classes, st } from './CollectionPageHeader.st.css.js';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 import { PanelHeader } from './PanelHeader';
 import { CollectionPageActionsBar } from './CollectionPageActionsBar';
+import { TitleBadges } from './TitleBadges';
 
 export function useCollectionPageHeader(child: CollectionPageHeaderElement) {
   const isMobile = useIsMobile();
@@ -19,6 +24,7 @@ export function useCollectionPageHeader(child: CollectionPageHeaderElement) {
       <PanelHeader
         title={child.props.title.text}
         subtitle={child.props.subtitle?.text}
+        badges={child.props.title.badges}
       />
     );
   }
@@ -28,7 +34,12 @@ export function useCollectionPageHeader(child: CollectionPageHeaderElement) {
       key={child.key}
       className={st(classes.root, { mobile: isMobile })}
       dataHook="collection-page-header"
-      title={(minimized) => <CollectionPageHeaderTitle minimized={minimized} />}
+      title={(minimized) => (
+        <CollectionPageHeaderTitle
+          minimized={minimized}
+          badges={child.props.title.badges}
+        />
+      )}
       subtitle={
         child.props.subtitle ? (
           <PageSubTitle {...child.props.subtitle} />
@@ -47,19 +58,37 @@ export function useCollectionPageHeader(child: CollectionPageHeaderElement) {
 }
 
 const CollectionPageHeaderTitle = observer(
-  ({ minimized }: { minimized: boolean }) => {
+  ({
+    minimized,
+    badges,
+  }: {
+    minimized: boolean;
+    badges?: CollectionPageHeaderBadge[];
+  }) => {
     const state = useCollectionPageContext();
     const isMobile = useIsMobile();
+    const isBmHarmonyTheme = useBmHarmonyTheme();
 
     if (minimized) {
       return <>{state.pageTitle}</>;
     }
 
+    // Page.Header sizes its own title wrapper from
+    // `--wds-page-header-title-font-size`, which Harmony maps to the `large`
+    // heading tokens. The nested Heading needs the same size or it keeps
+    // painting the 32px `extraLarge` tokens over it.
+    const titleSize = isMobile || isBmHarmonyTheme ? 'large' : 'extraLarge';
+
+    // Page.Header already wraps this in the page's `h1`, so both Headings here
+    // only carry typography — `as` keeps them from nesting more headings
+    // inside it.
     return (
-      <Heading size={isMobile ? 'large' : 'extraLarge'}>
+      <Heading as="div" size={titleSize}>
         <Box inline maxLines={1} paddingRight="9px" minWidth={0} width="100%">
           <Heading
-            size={isMobile ? 'large' : 'extraLarge'}
+            as="span"
+            dataHook="collection-page-header-title"
+            size={titleSize}
             ellipsis
             showTooltip={!isMobile}
             placement="bottom"
@@ -76,6 +105,7 @@ const CollectionPageHeaderTitle = observer(
               {state.total}
             </Box>
           )}
+          <TitleBadges badges={badges} />
         </Box>
       </Heading>
     );

package/src/state/EditableTable/CellValueState.ts

@@ -1,6 +1,6 @@
 import { action, computed, makeObservable, observable } from 'mobx';
 import type { CellType, Cell, ValidationResult } from './types';
-import type { FiltersMap } from '@wix/bex-core';
+import type { EditableCellContextMenuAction, FiltersMap } from '@wix/bex-core';
 import type { EditableTableState } from './EditableTableState';
 import {
   builtInCellTypes,
@@ -145,6 +145,71 @@ export class CellValueState<T, F extends FiltersMap> {
     return column.editable !== false;
   }
 
+  getCellActionDisabledTooltip(
+    actionId: EditableCellContextMenuAction,
+    cell: Cell,
+  ): string | undefined {
+    const column = this._parent._columnMap.get(cell.columnId);
+    if (!column) {
+      return undefined;
+    }
+
+    const contextMenu = this.resolveCellTypeByColumnId(
+      cell.columnId,
+    ).contextMenu;
+    if (!contextMenu) {
+      return undefined;
+    }
+
+    const context = {
+      value: this.getCellDisplayValue(cell.rowKey, cell.columnId),
+      field: column.field,
+      rowKey: cell.rowKey,
+      columnId: cell.columnId,
+    };
+    const configs =
+      actionId === 'cut'
+        ? [contextMenu.cut, contextMenu.copy, contextMenu.clear]
+        : [contextMenu[actionId]];
+
+    for (const config of configs) {
+      const tooltip = config?.disabledTooltip(context);
+      if (tooltip) {
+        return tooltip;
+      }
+    }
+    return undefined;
+  }
+
+  getActionableCells(
+    actionId: EditableCellContextMenuAction,
+    cells: Cell[],
+  ): Cell[] {
+    return cells.filter(
+      (cell) => !this.getCellActionDisabledTooltip(actionId, cell),
+    );
+  }
+
+  getCellActionMenuAvailability(
+    actionId: EditableCellContextMenuAction,
+    cells: Cell[],
+  ): { disabled: boolean; disabledTooltip?: string } {
+    let disabledTooltip: string | undefined;
+
+    for (const cell of cells) {
+      const tooltip = this.getCellActionDisabledTooltip(actionId, cell);
+      disabledTooltip ??= tooltip;
+      const isAvailableWithoutCustomPolicy =
+        actionId === 'copy' ||
+        this.isColumnEditable(cell.rowKey, cell.columnId);
+      if (isAvailableWithoutCustomPolicy && !tooltip) {
+        return { disabled: false };
+      }
+    }
+
+    return { disabled: true, disabledTooltip };
+  }
+
   /** Serialize a cell value to a string (for clipboard copy/cut). */
   serializeCellValue(rowKey: string, columnId: string): string {
     const column = this._parent._columnMap.get(columnId);
@@ -157,7 +222,7 @@ export class CellValueState<T, F extends FiltersMap> {
     return resolved.serialize ? resolved.serialize(value) : String(value ?? '');
   }
 
-  /** Clear selected cells (Delete/Backspace). Respects cellType.clearable and column.editable. */
+  /** Clear selected cells (Delete/Backspace). Respects column.editable and contextMenu.clear. */
   clearCells(cells: Cell[]) {
     const changes: { rowKey: string; columnId: string; value: any }[] = [];
 
@@ -166,11 +231,10 @@ export class CellValueState<T, F extends FiltersMap> {
       if (!column?.setValue) {
         continue;
       }
-      const resolved = this.resolveCellTypeByColumnId(column.id);
-      if (resolved.clearable === false) {
+      if (!this.isColumnEditable(cell.rowKey, cell.columnId)) {
         continue;
       }
-      if (!this.isColumnEditable(cell.rowKey, cell.columnId)) {
+      if (this.getCellActionDisabledTooltip('clear', cell)) {
         continue;
       }