@wix/patterns 1.343.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_ = "CollectionTable323634763";
+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":"CollectionTable323634763__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_ = "CollectionToolbar1227716164";
+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":"CollectionToolbar1227716164__root","left":"CollectionToolbar1227716164__left","right":"CollectionToolbar1227716164__right","fullWidth":"CollectionToolbar1227716164__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/PrimaryActionButton.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import { Button, ButtonProps } from '@wix/design-system';
 import { Add } from '@wix/wix-ui-icons-common';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
@@ -14,31 +14,34 @@ export interface PrimaryActionButtonProps
   onClick?: any;
 }
 
-export const PrimaryActionButton = (props: PrimaryActionButtonProps) => {
-  const { translate: t, initTask } = useWixPatternsContainer();
-  const { toolbarBIReporter } = useToolbarCollectionContext();
-  const { priority = 'primary' } = props;
+export const PrimaryActionButton = forwardRef<Button, PrimaryActionButtonProps>(
+  (props, ref) => {
+    const { translate: t, initTask } = useWixPatternsContainer();
+    const { toolbarBIReporter } = useToolbarCollectionContext();
+    const { priority = 'primary' } = props;
 
-  useSelector(() => initTask.status);
+    useSelector(() => initTask.status);
 
-  return (
-    <Button
-      prefixIcon={<Add />}
-      {...props}
-      as="button"
-      size="small"
-      priority={priority}
-      skin="standard"
-      dataHook="toolbar-primary-action-button"
-      onClick={(event) => {
-        toolbarBIReporter.onPrimaryActionButtonClick();
-        props.onClick?.(event);
-      }}
-    >
-      {props.children ??
-        t('cairo.collectionsPage.add.item.CTA', { defaultValue: '' })}
-    </Button>
-  );
-};
+    return (
+      <Button
+        ref={ref}
+        prefixIcon={<Add />}
+        {...props}
+        as="button"
+        size="small"
+        priority={priority}
+        skin="standard"
+        dataHook="toolbar-primary-action-button"
+        onClick={(event) => {
+          toolbarBIReporter.onPrimaryActionButtonClick();
+          props.onClick?.(event);
+        }}
+      >
+        {props.children ??
+          t('cairo.collectionsPage.add.item.CTA', { defaultValue: '' })}
+      </Button>
+    );
+  }
+);
 
 PrimaryActionButton.displayName = 'PrimaryActionButton';

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SearchOrCustomFilter2537292878";
+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":"SearchOrCustomFilter2537292878__root","search":"SearchOrCustomFilter2537292878__search","searchMobile":"SearchOrCustomFilter2537292878__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_ = "AutoCompleteReadonly2959405793";
+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":"AutoCompleteReadonly2959405793__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_ = "ViewsDropdown1390601020";
+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":"ViewsDropdown1390601020__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_ = "DragHandle1087528928";
+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":"DragHandle1087528928__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_ = "EntityPagePlain1559037576";
+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":"EntityPagePlain1559037576__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/ExportButton/getExportModalStepProps.tsx

@@ -46,7 +46,7 @@ export function getExportModalStepProps<T, F extends FiltersMap>({
       primaryButtonProps: { skin: 'destructive', disabled: false },
       primaryButtonOnClick: () => state.onCancelExportVerifyButtonClick(),
       secondaryButtonOnClick: state.onCancelExportGoBackButtonClick,
-      onCloseButtonClick: state.onCancelExportCloseButtonClick,
+      closeButtonProps: { onClick: state.onCancelExportCloseButtonClick, autoFocus: true },
       onRequestClose: state.onCancelExportCloseButtonClick,
     };
   }
@@ -64,7 +64,7 @@ export function getExportModalStepProps<T, F extends FiltersMap>({
       primaryButtonOnClick: state.onExportToClick,
       secondaryButtonText: t('cairo.export.cancelButton'),
       secondaryButtonOnClick: state.onCancelClick,
-      onCloseButtonClick: state.onCloseClick,
+      closeButtonProps: { onClick: state.onCloseClick, autoFocus: true },
       onRequestClose: state.onCloseClick,
       footnote: exportModalFooter ? (
         <Text dataHook="export-modal-footer-text" size="small">
@@ -80,7 +80,7 @@ export function getExportModalStepProps<T, F extends FiltersMap>({
       title: t('cairo.export.exportFailed'),
       secondaryButtonText: t('cairo.export.cancelButton'),
       secondaryButtonOnClick: state.onFailedCancel,
-      onCloseButtonClick: state.onFailedClose,
+      closeButtonProps: { onClick: state.onFailedClose, autoFocus: true },
       onRequestClose: state.onFailedClose,
       primaryButtonText: t('Got It' as any),
       primaryButtonOnClick: state.onFailedClose,
@@ -112,7 +112,7 @@ export function getExportModalStepProps<T, F extends FiltersMap>({
     primaryButtonProps: {
       disabled: true,
     },
-    onCloseButtonClick: state.onExportCloseAttemptClick,
+    closeButtonProps: { onClick: state.onExportCloseAttemptClick, autoFocus: true },
     onRequestClose: state.onExportCloseAttemptClick,
     secondaryButtonText: t('cairo.export.cancelButton'),
     secondaryButtonOnClick: state.onExportSecondaryActionAttempt,

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "Fade2595381006";
+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":"Fade2595381006__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;
   }
 }