@wix/patterns 1.344.0 → 1.347.0

package/src/components/Kanban/KanbanProps.ts

@@ -39,6 +39,7 @@ export interface KanbanBaseProps<T, S, F extends FiltersMap>
     badge?: ReactNode;
   };
   actionCell?: ActionCell<T, F>;
+  stageActionCell?: ActionCell<S, F>;
   dataExtension?: DataExtensionType | DataExtensionElement;
   tags?: TagsElement<T, F>;
   entityPageId?: string;

package/src/components/Kanban/Stage.tsx

@@ -11,6 +11,7 @@ import { KanbanState } from '../../state/KanbanState';
 import { action } from 'mobx';
 import { CardsSkeleton } from './CardsSkeleton';
 import { useEffect } from 'react';
+import { StageActions } from './StageActions';
 
 interface StageComponentProps<T, S, F extends FiltersMap> {
   dataHook: string;
@@ -22,6 +23,7 @@ interface StageComponentProps<T, S, F extends FiltersMap> {
   dataExtension?: KanbanBaseProps<T, S, F>['dataExtension'];
   tags?: KanbanBaseProps<T, S, F>['tags'];
   activeStageKey?: string | null; // Active source stage key
+  stageActionCell?: KanbanBaseProps<T, S, F>['stageActionCell'];
   stageKey: string;
 }
 
@@ -31,6 +33,7 @@ function _StageComponent<T, S, F extends FiltersMap>({
   stageSummary,
   activeStageKey,
   stageKey,
+  stageActionCell,
   ...props
 }: StageComponentProps<T, S, F>) {
   const stageState = state.kanbanStageStates[stageKey];
@@ -164,26 +167,35 @@ function _StageComponent<T, S, F extends FiltersMap>({
               padding="0px 6px 0 6px"
               borderRadius="8px"
             >
-              <Box>
-                <Box paddingRight="6px" maxWidth="190px">
+              <Box direction="horizontal" align="space-between">
+                <Box gap="SP1" maxWidth="200px">
                   <Text
+                    ellipsis
                     size="small"
                     weight="bold"
                     dataHook={`kanban-stage-title-${stageState.stageKey}`}
-                    ellipsis={true}
                   >
                     {stageState.stageName}
                   </Text>
+
+                  {shouldShowStageSummary && (
+                    <CounterBadge
+                      dataHook={`kanban-stage-title-total-${stageState.stageKey}`}
+                      skin="light"
+                      truncate={false}
+                    >
+                      {stageState.totalItems}
+                    </CounterBadge>
+                  )}
                 </Box>
-                {shouldShowStageSummary ? (
-                  <CounterBadge
-                    dataHook={`kanban-stage-title-total-${stageState.stageKey}`}
-                    skin="light"
-                    truncate={false}
-                  >
-                    {stageState.totalItems}
-                  </CounterBadge>
-                ) : null}
+
+                {stageActionCell && (
+                  <StageActions
+                    state={state}
+                    stageKey={stageState.stageKey}
+                    stageActionCell={stageActionCell}
+                  />
+                )}
               </Box>
 
               <Box gap="0.2em">

package/src/components/Kanban/StageActions.tsx

@@ -0,0 +1,114 @@
+import React, { useMemo } from 'react';
+import {
+  IconButton,
+  PopoverMenu,
+  PopoverMenuItemProps,
+} from '@wix/design-system';
+import { observer } from 'mobx-react-lite';
+import { MoreSmall } from '@wix/wix-ui-icons-common';
+import { getDefaultActionCellProps } from '../CollectionItemActions/getDefaultActionCellProps';
+import { SecondaryActionAction } from '../ActionCell';
+import { FiltersMap } from '../../exports/core';
+import { KanbanBaseProps } from '.';
+import { ItemActionsState } from '../../state';
+import { KanbanState } from '../../state/KanbanState';
+import { MessageActionModal } from '../ActionModal';
+
+interface StageActionsProps<T, S, F extends FiltersMap> {
+  state: KanbanState<T, S, F>;
+  stageKey: string;
+  stageActionCell: KanbanBaseProps<T, S, F>['stageActionCell'];
+}
+
+function _StageActions<T, S, F extends FiltersMap>({
+  state,
+  stageKey,
+  stageActionCell,
+}: StageActionsProps<T, S, F>) {
+  const keyedItem = state.stagesCollectionState.getKeyedItem(stageKey);
+
+  const stageActionsState = useMemo(() => {
+    if (!keyedItem) {
+      return null;
+    }
+
+    return new ItemActionsState({
+      keyedItem,
+      fade: 'static',
+      collection: state.stagesCollectionState,
+      reportBi: state.toolbar.reportBi,
+    });
+  }, [keyedItem, state.stagesCollectionState, state.toolbar.reportBi]);
+
+  if (!keyedItem || !stageActionsState) {
+    return null;
+  }
+
+  const resolvedActionCell =
+    typeof stageActionCell === 'function'
+      ? stageActionCell(
+          keyedItem.item,
+          keyedItem.indexWithinPage,
+          stageActionsState.actionCellAPI,
+        )
+      : stageActionCell;
+
+  const secondaryActions = resolvedActionCell?.secondaryActions;
+
+  if (!secondaryActions?.length) {
+    return null;
+  }
+
+  return (
+    <>
+      {stageActionsState.confirmModal.value && (
+        <MessageActionModal
+          state={stageActionsState.confirmModal}
+          {...stageActionsState.confirmModal.value}
+        />
+      )}
+      <PopoverMenu
+        {...getDefaultActionCellProps()}
+        textSize="small"
+        minWidth="223px"
+        dataHook={`kanban-stage-more-actions-${stageKey}`}
+        triggerElement={({ toggle }) => {
+          return (
+            <IconButton
+              skin="dark"
+              priority="tertiary"
+              size="small"
+              dataHook={`kanban-stage-more-actions-trigger-${stageKey}`}
+              onClick={(e) => {
+                e.stopPropagation();
+                toggle();
+              }}
+            >
+              <MoreSmall />
+            </IconButton>
+          );
+        }}
+      >
+        {secondaryActions.map((secondaryAction, index) => {
+          if (secondaryAction.divider) {
+            return <PopoverMenu.Divider key={index} />;
+          }
+          const action = secondaryAction as SecondaryActionAction;
+          const { icon: prefixIcon, skin, ...rest } = action;
+
+          return (
+            <PopoverMenu.MenuItem
+              key={index}
+              dataHook={`kanban-stage-more-actions-item-${stageKey}`}
+              skin={skin as PopoverMenuItemProps['skin']}
+              prefixIcon={prefixIcon}
+              {...rest}
+            />
+          );
+        })}
+      </PopoverMenu>
+    </>
+  );
+}
+
+export const StageActions = observer(_StageActions);

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "LoadingRow2939954252";
+var _namespace_ = "LoadingRow46070280";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,8 +13,8 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"LoadingRow2939954252__root"};
-export var keyframes = {"gradientSwoosh":"LoadingRow2939954252__gradientSwoosh"}; 
+export var classes = {"root":"LoadingRow46070280__root"};
+export var keyframes = {"gradientSwoosh":"LoadingRow46070280__gradientSwoosh"}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 

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

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

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

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

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

@@ -3,7 +3,6 @@
 }
 
 .leftGroupWrapper {
-  overflow: hidden;
   padding-right: 12px; /* SP3 */
   min-width: 0;
   flex-wrap: nowrap;

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "MultiBulkActionToolbar1646567933";
+var _namespace_ = "MultiBulkActionToolbar628671163";
 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":"MultiBulkActionToolbar1646567933__root","leftGroupWrapper":"MultiBulkActionToolbar1646567933__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar1646567933__selectedCountItem","selectedCountText":"MultiBulkActionToolbar1646567933__selectedCountText"};
+export var classes = {"root":"MultiBulkActionToolbar628671163__root","leftGroupWrapper":"MultiBulkActionToolbar628671163__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar628671163__selectedCountItem","selectedCountText":"MultiBulkActionToolbar628671163__selectedCountText"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/MultiBulkActionToolbar/MultiBulkActionToolbar.tsx

@@ -128,7 +128,7 @@ function _MultiBulkActionToolbar(props: MultiBulkActionToolbarProps) {
         <Divider direction="vertical" />
       </Box>
 
-      <Box gap="SP1" overflow="hidden">
+      <Box gap="SP1" className={st(classes.root)}>
         {TagsAssignButton && (
           <BulkActionContainer>
             <TagsAssignButton />

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "NestedTablePlaceholderStatesRow744433108";
+var _namespace_ = "NestedTablePlaceholderStatesRow182388988";
 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":"NestedTablePlaceholderStatesRow744433108__root"};
+export var classes = {"root":"NestedTablePlaceholderStatesRow182388988__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_ = "NestedTableRow3049070847";
+var _namespace_ = "NestedTableRow713203567";
 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":"NestedTableRow3049070847__root","firstLevel":"NestedTableRow3049070847__firstLevel","placeholder":"NestedTableRow3049070847__placeholder","parentHovered":"NestedTableRow3049070847__parentHovered"};
+export var classes = {"root":"NestedTableRow713203567__root","firstLevel":"NestedTableRow713203567__firstLevel","placeholder":"NestedTableRow713203567__placeholder","parentHovered":"NestedTableRow713203567__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_ = "MultipleDragOverlayEffect3104788623";
+var _namespace_ = "MultipleDragOverlayEffect4204691713";
 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":"MultipleDragOverlayEffect3104788623__root"};
+export var classes = {"root":"MultipleDragOverlayEffect4204691713__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_ = "NestedTableDragAndDropRow2589573243";
+var _namespace_ = "NestedTableDragAndDropRow1833288973";
 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":"NestedTableDragAndDropRow2589573243__root"};
+export var classes = {"root":"NestedTableDragAndDropRow1833288973__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_ = "PickerContent257041302";
+var _namespace_ = "PickerContent1247513928";
 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":"PickerContent257041302__root"};
+export var classes = {"root":"PickerContent1247513928__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_ = "PickerContentAdditionalStep991532676";
+var _namespace_ = "PickerContentAdditionalStep4236556513";
 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":"PickerContentAdditionalStep991532676__root","titles":"PickerContentAdditionalStep991532676__titles","suffix":"PickerContentAdditionalStep991532676__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep4236556513__root","titles":"PickerContentAdditionalStep4236556513__titles","suffix":"PickerContentAdditionalStep4236556513__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_ = "PickerTableListItem2213498049";
+var _namespace_ = "PickerTableListItem3966765664";
 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":"PickerTableListItem2213498049__root"};
+export var classes = {"root":"PickerTableListItem3966765664__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_ = "ScrollableContent1308724911";
+var _namespace_ = "ScrollableContent1923286669";
 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":"ScrollableContent1308724911__root"};
+export var classes = {"root":"ScrollableContent1923286669__root"};
 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_ = "SkeletonCard1432605554";
+var _namespace_ = "SkeletonCard4080766162";
 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":"SkeletonCard1432605554__root","headerLoading":"SkeletonCard1432605554__headerLoading"};
+export var classes = {"root":"SkeletonCard4080766162__root","headerLoading":"SkeletonCard4080766162__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_ = "SlidingModal115117005";
+var _namespace_ = "SlidingModal4292764214";
 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":"SlidingModal115117005__root"};
+export var classes = {"root":"SlidingModal4292764214__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/Table/TableBase.tsx

@@ -76,6 +76,7 @@ function _TableBase<T, F extends FiltersMap = FiltersMap>(
         <sections.TableSections
           {...commonTableProps}
           table={state}
+          groupBy={sections.groupBy}
           renderSection={sections.renderSection}
         />
       ) : (

package/src/components/TableGridSwitch/TableGridSwitch.tsx

@@ -9,7 +9,7 @@ import { GridPresetProps } from '../Grid/Grid.types';
 import type { TableGridSwitchDragAndDrop } from './TableGridSwitchDragAndDrop';
 import { InitialLoader } from '../InitialLoader';
 import { GridSectionsContent } from '../GridSections/GridSectionsContent';
-import type { Section } from '../CollectionSectionHeader';
+import type { GroupBy, RenderSection } from '../CollectionSectionHeader';
 import { TableSections } from '../TableSections';
 
 export interface TableGridSwitchBaseProps<T, F extends FiltersMap>
@@ -40,7 +40,8 @@ export interface TableGridSwitchBaseProps<T, F extends FiltersMap>
   sections?: {
     GridSections: typeof GridSectionsContent;
     TableSections: typeof TableSections;
-    renderSection: (item: T) => Section;
+    groupBy: GroupBy<T>;
+    renderSection: RenderSection<T>;
   };
 }
 
@@ -70,6 +71,7 @@ export function _TableGridSwitch<T, F extends FiltersMap = FiltersMap>(
   const gridSections = sections
     ? {
         GridSections: sections.GridSections,
+        groupBy: sections.groupBy,
         renderSection: sections.renderSection,
       }
     : undefined;
@@ -77,6 +79,7 @@ export function _TableGridSwitch<T, F extends FiltersMap = FiltersMap>(
   const tableSections = sections
     ? {
         TableSections: sections.TableSections,
+        groupBy: sections.groupBy,
         renderSection: sections.renderSection,
       }
     : undefined;

package/src/components/TableSections/TableSectionRow.tsx

@@ -50,12 +50,14 @@ const _TableSectionRow = forwardRef<
   }
 
   if (isSectionRow && Array.isArray(children) && children.length > 0) {
-    const sectionWithCount = state.getSectionWithCount(rowData);
+    const result = state.getSectionWithCount(rowData);
 
-    if (!sectionWithCount) {
+    if (!result) {
       return <RegularTrElement {...regularTrElementProps} />;
     }
 
+    const { sectionId, section } = result;
+
     return (
       <tr
         {...props}
@@ -81,7 +83,8 @@ const _TableSectionRow = forwardRef<
             }}
           >
             <CollectionSectionHeader
-              section={sectionWithCount}
+              sectionId={sectionId}
+              section={section}
               biComponentType="TableSections"
               skin="neutral"
               dataHook="table-section-header"

package/src/components/TableSections/TableSections.tsx

@@ -4,23 +4,27 @@ import { observer } from 'mobx-react-lite';
 import { CollectionTable, CollectionTableBaseProps } from '../CollectionTable';
 import { useTableSectionRow } from './useTableSectionRow';
 import { TableState } from '../../state';
-import { RenderSection } from '../CollectionSectionHeader';
+import { GroupBy, RenderSection } from '../CollectionSectionHeader';
 import { TableSectionsState } from './TableSectionsState';
 
 export interface TableSectionsProps<T, F extends FiltersMap>
   extends CollectionTableBaseProps<T, F> {
+  groupBy: GroupBy<T>;
   renderSection: RenderSection<T>;
   table: TableState<T, F>;
 }
 
 const _TableSections = <T, F extends FiltersMap>({
+  groupBy,
   renderSection,
   table,
   columns,
   rowDetails,
   ...collectionTableProps
 }: TableSectionsProps<T, F>) => {
-  const [state] = useState(() => new TableSectionsState(table, renderSection));
+  const [state] = useState(
+    () => new TableSectionsState(table, groupBy, renderSection),
+  );
 
   const columnsWithSections = useMemo(
     () =>
@@ -71,5 +75,6 @@ export const TableSections = observer(_TableSections);
 
 export type TableSectionsProp<T> = {
   TableSections: typeof TableSections;
+  groupBy: GroupBy<T>;
   renderSection: RenderSection<T>;
 };