@wix/patterns 1.344.0 → 1.345.0

package/src/components/CollectionSectionHeader/CollectionSectionHeader.tsx

@@ -4,38 +4,95 @@ import {
   Text,
   CounterBadge,
   Box,
+  Tooltip,
 } from '@wix/design-system';
-import React from 'react';
+import React, {
+  cloneElement,
+  isValidElement,
+  ReactElement,
+  ReactNode,
+} from 'react';
+import { st, classes } from './CollectionSectionHeader.st.css.js';
 import { CollectionSectionHeaderActionBar } from './CollectionSectionHeaderActionBar';
 import { Section } from './CollectionSectionHeader.types';
 
-export interface CollectionSectionHeaderProps
+export interface CollectionSectionHeaderProps<T = unknown>
   extends Pick<SectionHeaderProps, 'skin' | 'dataHook'> {
-  section: Section & { count: number; hasMore?: boolean };
+  sectionId: string;
+  section: Section & { count: number; hasMore?: boolean; items?: T[] };
   biComponentType: string;
 }
 
-export const CollectionSectionHeader = ({
+export const CollectionSectionHeader = <T,>({
+  sectionId,
   section,
   skin,
   dataHook,
   biComponentType,
-}: CollectionSectionHeaderProps) => {
+}: CollectionSectionHeaderProps<T>) => {
+  const renderBadge = (): ReactNode => {
+    const { badge } = section;
+
+    if (!badge || !badge.visible) {
+      return null;
+    }
+
+    return (
+      <CounterBadge
+        truncate={false}
+        skin={badge.skin || 'light'}
+        dataHook="section-header-badge"
+      >
+        {section.count}
+        {section.hasMore ? '+' : ''}
+      </CounterBadge>
+    );
+  };
+
+  const renderSummary = (): ReactNode => {
+    const { summary } = section;
+
+    if (!summary || summary.length === 0) {
+      return null;
+    }
+
+    return (
+      <Box gap="SP2">
+        {summary.map((item, index) => (
+          <Box
+            key={index}
+            verticalAlign="middle"
+            gap="SP1"
+            dataHook="section-header-summary-item"
+          >
+            <Tooltip content={item.text}>
+              {isValidElement(item.icon)
+                ? cloneElement(item.icon as ReactElement, {
+                    className: st(
+                      classes.summaryIcon,
+                      item.icon.props?.className,
+                    ),
+                  })
+                : item.icon}
+            </Tooltip>
+            <Text size="tiny" weight="normal" skin="standard" secondary>
+              {item.count}
+            </Text>
+          </Box>
+        ))}
+      </Box>
+    );
+  };
+
   const title = (
-    <Box verticalAlign="middle" gap="SP1">
-      <Text size="small" weight="normal">
-        {section.title}
-      </Text>
-      {section.badge?.visible && (
-        <CounterBadge
-          truncate={false}
-          skin={section.badge.skin || 'light'}
-          dataHook="section-header-badge"
-        >
-          {section.count}
-          {section.hasMore ? '+' : ''}
-        </CounterBadge>
-      )}
+    <Box verticalAlign="middle" gap="SP2">
+      <Box gap="SP1">
+        <Text size="small" weight="normal">
+          {section.title}
+        </Text>
+        {renderBadge()}
+      </Box>
+      {renderSummary()}
     </Box>
   );
 
@@ -48,6 +105,7 @@ export const CollectionSectionHeader = ({
       size="small"
       suffix={
         <CollectionSectionHeaderActionBar
+          sectionId={sectionId}
           section={section}
           biComponentType={biComponentType}
         />

package/src/components/CollectionSectionHeader/CollectionSectionHeader.types.ts

@@ -1,11 +1,34 @@
+import { ReactNode } from 'react';
 import { CtaBaseProps } from '../CtaProps';
 
-export interface Section {
+interface SectionBadgeConfig {
+  visible: boolean;
+  skin?: 'light' | 'danger' | 'neutralLight';
+}
+
+/**
+ * A summary item to display in the section header.
+ * @external
+ */
+interface SectionSummaryItem {
   /**
-   * A unique identifier for the section.
+   * An icon to display before the text.
    * @external
    */
-  id: string;
+  icon: ReactNode;
+  /**
+   * A label for the summary item.
+   * @external
+   */
+  text: string;
+  /**
+   * A count value for the summary item.
+   * @external
+   */
+  count: number;
+}
+
+export interface Section {
   /**
    * A title for the section.
    * @external
@@ -18,12 +41,26 @@ export interface Section {
    */
   primaryAction?: CtaBaseProps;
   /**
-   * A badge for the section.
+   * A badge for the section. Configuration object for showing item count.
+   * @external
+   */
+  badge?: SectionBadgeConfig;
+  /**
+   * Summary items to display in the section header.
+   * Each item can have an icon, text label, and count.
    * @external
    */
-  badge?: {
-    visible: boolean;
-    skin?: 'light' | 'danger' | 'neutralLight';
-  };
+  summary?: SectionSummaryItem[];
 }
-export type RenderSection<T> = (item: T) => Section;
+
+/**
+ * A function that extracts the grouping key from an item.
+ * @external
+ */
+export type GroupBy<T> = (item: T) => string;
+
+/**
+ * A function that renders section configuration given the section ID and all items in the section.
+ * @external
+ */
+export type RenderSection<T> = (sectionId: string, items: T[]) => Section;

package/src/components/CollectionSectionHeader/CollectionSectionHeaderActionBar.tsx

@@ -5,11 +5,13 @@ import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
 import { wixPatternsSectionHeaderPrimaryActionClicked } from '@wix/bex-core/bi';
 
 export interface CollectionSectionHeaderActionBarProps {
+  sectionId: string;
   section: Section;
   biComponentType: string;
 }
 
 export const CollectionSectionHeaderActionBar = ({
+  sectionId,
   section,
   biComponentType,
 }: CollectionSectionHeaderActionBarProps) => {
@@ -19,7 +21,7 @@ export const CollectionSectionHeaderActionBar = ({
   const handleClick = () => {
     toolbarBIReporter.reportBi(
       wixPatternsSectionHeaderPrimaryActionClicked({
-        sectionId: section.id,
+        sectionId,
         cta: primaryAction?.id,
         componentType: biComponentType,
       }),

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionToolbar4229978739";
+var _namespace_ = "CollectionToolbar3446473932";
 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":"CollectionToolbar4229978739__root","left":"CollectionToolbar4229978739__left","right":"CollectionToolbar4229978739__right","fullWidth":"CollectionToolbar4229978739__fullWidth"};
+export var classes = {"root":"CollectionToolbar3446473932__root","left":"CollectionToolbar3446473932__left","right":"CollectionToolbar3446473932__right","fullWidth":"CollectionToolbar3446473932__fullWidth"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionToolbar/SearchOrCustomFilter.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SearchOrCustomFilter4086095729";
+var _namespace_ = "SearchOrCustomFilter1497284617";
 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":"SearchOrCustomFilter4086095729__root","search":"SearchOrCustomFilter4086095729__search","searchMobile":"SearchOrCustomFilter4086095729__searchMobile"};
+export var classes = {"root":"SearchOrCustomFilter1497284617__root","search":"SearchOrCustomFilter1497284617__search","searchMobile":"SearchOrCustomFilter1497284617__searchMobile"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionViewsDropdown/AutoCompleteReadonly.st.css.ts

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

package/src/components/CollectionViewsDropdown/ViewsDropdown.st.css.ts

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

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

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

package/src/components/EntityPage/EntityPagePlain.st.css.ts

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

package/src/components/ExportButton/ExportButton.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { FiltersMap, ModalState } from '@wix/bex-core';
-import { Box, Button, Drawer, Modal } from '@wix/design-system';
+import { Button, Drawer, Modal } from '@wix/design-system';
 import { UploadExport } from '@wix/wix-ui-icons-common';
 import { observer, Observer } from 'mobx-react-lite';
 import { ExportButtonModalLayout } from './ExportButtonModalLayout';
@@ -98,7 +98,7 @@ function _ExportButton<T, F extends FiltersMap>(
   }, []);
 
   return (
-    <Box dataHook="export-container">
+    <div data-hook="export-container">
       {toolbarType === 'default' ? (
         <ResponsiveButton
           state={responsive.actions}
@@ -121,7 +121,7 @@ function _ExportButton<T, F extends FiltersMap>(
           {t('cairo.export.export')}
         </Button>
       )}
-    </Box>
+    </div>
   );
 }
 

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

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

package/src/components/Grid/Grid.tsx

@@ -15,7 +15,7 @@ import {
 import { observer } from 'mobx-react-lite';
 import { useToolbarCollectionSyncProps } from '../ToolbarCollection/useToolbarCollectionSyncProps';
 import type { GridSectionsContent } from '../GridSections/GridSectionsContent';
-import type { Section } from '../CollectionSectionHeader';
+import type { GroupBy, RenderSection } from '../CollectionSectionHeader';
 import { GridSingleGridContent } from './GridSingleGridContent';
 import { GridDragAndDrop } from '../GridDragAndDropDndKit/GridDragAndDrop';
 
@@ -60,7 +60,8 @@ interface GridBaseProps<T, F extends FiltersMap>
    */
   sections?: {
     GridSections: typeof GridSectionsContent;
-    renderSection?: (item: T) => Section;
+    groupBy: GroupBy<T>;
+    renderSection?: RenderSection<T>;
   };
 
   layoutType?: LayoutType;
@@ -133,6 +134,7 @@ function _Grid<T, F extends FiltersMap = FiltersMap>(props: GridProps<T, F>) {
             {sections ? (
               <sections.GridSections
                 {...props}
+                groupBy={sections.groupBy}
                 renderSection={sections.renderSection}
                 state={state}
               />

package/src/components/GridSections/GridSectionHeader.tsx

@@ -19,7 +19,7 @@ function _GridSectionHeader<T, F extends FiltersMap>(
     gridBase: { layoutType },
   } = state;
 
-  const { section, range } = sectionDescriptor;
+  const { sectionId, section, range } = sectionDescriptor;
 
   const sectionWithCount = {
     ...section,
@@ -30,6 +30,7 @@ function _GridSectionHeader<T, F extends FiltersMap>(
   return (
     <CollectionSectionHeader
       dataHook="grid-section-header"
+      sectionId={sectionId}
       section={sectionWithCount}
       skin={layoutType === 'list' ? 'light' : 'neutral'}
       biComponentType="GridSections"

package/src/components/GridSections/GridSectionsContent.tsx

@@ -8,18 +8,19 @@ import { GridState } from '../../state';
 import { runInAction } from 'mobx';
 import { Box } from '@wix/design-system';
 import { GridSectionsSingleSkeletonGrid } from './GridSectionsSingleSkeletonGrid';
-import type { RenderSection } from '../CollectionSectionHeader';
+import type { GroupBy, RenderSection } from '../CollectionSectionHeader';
 
 export interface GridSectionsContentProps<T, F extends FiltersMap>
   extends GridContentBaseProps<T, F> {
   state: GridState<T, F>;
+  groupBy: GroupBy<T>;
   renderSection?: RenderSection<T>;
 }
 
 function _GridSectionsContent<T, F extends FiltersMap>(
   props: GridSectionsContentProps<T, F>,
 ) {
-  const { state: grid, renderSection, layoutType } = props;
+  const { state: grid, groupBy, renderSection, layoutType } = props;
 
   const { toolbar } = grid;
 
@@ -33,6 +34,7 @@ function _GridSectionsContent<T, F extends FiltersMap>(
       (grid._sections ??= new GridSectionsState({
         toolbar: grid.toolbar,
         collection: grid.collection,
+        groupBy,
         renderSection,
         parentState: grid,
       })),
@@ -42,11 +44,12 @@ function _GridSectionsContent<T, F extends FiltersMap>(
 
   useEffect(() => {
     runInAction(() => {
+      state.groupBy = groupBy;
       if (renderSection) {
         state.renderSection = renderSection;
       }
     });
-  }, [renderSection]);
+  }, [groupBy, renderSection]);
 
   let child;
 
@@ -60,7 +63,7 @@ function _GridSectionsContent<T, F extends FiltersMap>(
         {sections.map((sectionDescriptor) => (
           <GridSectionAndRepeater
             {...props}
-            key={sectionDescriptor.section.id}
+            key={sectionDescriptor.sectionId}
             sectionDescriptor={sectionDescriptor}
             state={state}
           />

package/src/components/GridSections/GridSectionsSectionState.ts

@@ -47,9 +47,9 @@ export class GridSectionsSectionState<T, F extends FiltersMap> {
 
   get isLast() {
     const {
-      sectionDescriptor: { section },
+      sectionDescriptor: { sectionId },
       gridSections: { sections },
     } = this;
-    return sections[sections.length - 1]?.section.id === section.id;
+    return sections[sections.length - 1]?.sectionId === sectionId;
   }
 }

package/src/components/GridSections/GridSectionsState.ts

@@ -1,9 +1,14 @@
 import { CollectionState, FiltersMap } from '@wix/bex-core';
 import { computed, makeObservable, observable } from 'mobx';
 import { GridState, ToolbarCollectionState } from '../../state';
-import type { Section, RenderSection } from '../CollectionSectionHeader';
+import type {
+  Section,
+  GroupBy,
+  RenderSection,
+} from '../CollectionSectionHeader';
 
 export interface SectionRange {
+  sectionId: string;
   section: Section;
   range: {
     start: number;
@@ -14,11 +19,13 @@ export interface SectionRange {
 export interface GridSectionsStateParams<T, F extends FiltersMap> {
   readonly collection: CollectionState<T, F>;
   readonly toolbar: ToolbarCollectionState<T, F>;
+  readonly groupBy: GroupBy<T>;
   readonly renderSection?: RenderSection<T>;
   readonly parentState: GridState<T, F>;
 }
 
 export class GridSectionsState<T, F extends FiltersMap> {
+  groupBy: GroupBy<T>;
   renderSection?: RenderSection<T>;
   readonly toolbar;
   readonly collection;
@@ -27,37 +34,53 @@ export class GridSectionsState<T, F extends FiltersMap> {
   constructor(params: GridSectionsStateParams<T, F>) {
     this.collection = params.collection;
     this.toolbar = params.toolbar;
+    this.groupBy = params.groupBy;
     this.renderSection = params.renderSection;
     this.parentState = params.parentState;
 
     makeObservable(this, {
       sections: computed,
+      groupBy: observable.ref,
       renderSection: observable.ref,
     });
   }
 
-  get sections() {
-    const { collection, renderSection } = this;
+  get sections(): SectionRange[] {
+    const { collection, groupBy, renderSection } = this;
 
-    if (!renderSection) {
+    if (!groupBy) {
       return [];
     }
 
-    return Object.values(
-      collection.result.items.reduce((acc, item, index) => {
-        const section = renderSection(item);
-        if (!acc[section.id]) {
-          acc[section.id] = {
-            section,
-            range: {
-              start: index,
-              length: 0,
-            },
-          };
-        }
-        acc[section.id].range.length++;
-        return acc;
-      }, {} as Record<string, SectionRange>),
-    );
+    const sectionItemsMap: Record<string, T[]> = {};
+    const orderedSections: string[] = [];
+
+    collection.result.items.forEach((item) => {
+      const sectionId = groupBy(item);
+
+      if (!sectionItemsMap[sectionId]) {
+        sectionItemsMap[sectionId] = [];
+        orderedSections.push(sectionId);
+      }
+      sectionItemsMap[sectionId].push(item);
+    });
+
+    let currentIndex = 0;
+    return orderedSections.map((sectionId) => {
+      const sectionItems = sectionItemsMap[sectionId];
+
+      const section = renderSection
+        ? renderSection(sectionId, sectionItems)
+        : { title: sectionId };
+
+      const range = {
+        start: currentIndex,
+        length: sectionItems.length,
+      };
+
+      currentIndex += sectionItems.length;
+
+      return { sectionId, section, range };
+    });
   }
 }

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

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

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

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

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

@@ -149,6 +149,26 @@ export function KanbanUniDriver(base: UniDriver, body: UniDriver) {
           base.$(`[data-hook="kanban-stage-add-card-${stageKey}"]`),
           body,
         ),
+      getSecondaryActions: (stageKey: string) => {
+        const popoverMenu = PopoverMenuUniDriver(
+          base.$(`[data-hook="kanban-stage-more-actions-${stageKey}"]`),
+          body,
+        );
+
+        const triggerButton = popoverMenu.getTriggerElement(
+          `kanban-stage-more-actions-trigger-${stageKey}`,
+        );
+        const iconButton = IconButtonUniDriver(triggerButton, base);
+        return {
+          ...popoverMenu,
+          clickTriggerElement: () => iconButton.click(),
+        };
+      },
+      getActionModal: () =>
+        MessageModalLayoutUniDriver(
+          body.$('[data-hook="collection-action-modal"]'),
+          body,
+        ),
       stagesSkeleton: () =>
         BoxUniDriver(base.$('[data-hook="kanban-stages-skeleton"]'), body),
       noResultsBox: (stageKey: string) =>