@wix/patterns 1.343.0 → 1.345.0

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_ = "Heading3383894607";
+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":"Heading3383894607__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_ = "InputOverflow2253211445";
+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":"InputOverflow2253211445__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) =>

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_ = "LoadingRow1479592983";
+var _namespace_ = "LoadingRow1153626324";
 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":"LoadingRow1479592983__root"};
-export var keyframes = {"gradientSwoosh":"LoadingRow1479592983__gradientSwoosh"}; 
+export var classes = {"root":"LoadingRow1153626324__root"};
+export var keyframes = {"gradientSwoosh":"LoadingRow1153626324__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_ = "MaxHeightText1466646791";
+var _namespace_ = "MaxHeightText1357995327";
 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":"MaxHeightText1466646791__root"};
+export var classes = {"root":"MaxHeightText1357995327__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_ = "MaxLines4161131399";
+var _namespace_ = "MaxLines2318748090";
 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":"MaxLines4161131399__root"};
+export var classes = {"root":"MaxLines2318748090__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_ = "MultiBulkActionToolbar3014684291";
+var _namespace_ = "MultiBulkActionToolbar2705869789";
 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":"MultiBulkActionToolbar3014684291__root","leftGroupWrapper":"MultiBulkActionToolbar3014684291__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar3014684291__selectedCountItem","selectedCountText":"MultiBulkActionToolbar3014684291__selectedCountText"};
+export var classes = {"root":"MultiBulkActionToolbar2705869789__root","leftGroupWrapper":"MultiBulkActionToolbar2705869789__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar2705869789__selectedCountItem","selectedCountText":"MultiBulkActionToolbar2705869789__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_ = "NestedTablePlaceholderStatesRow3153221628";
+var _namespace_ = "NestedTablePlaceholderStatesRow3119102920";
 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":"NestedTablePlaceholderStatesRow3153221628__root"};
+export var classes = {"root":"NestedTablePlaceholderStatesRow3119102920__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_ = "NestedTableRow3218022960";
+var _namespace_ = "NestedTableRow208321339";
 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":"NestedTableRow3218022960__root","firstLevel":"NestedTableRow3218022960__firstLevel","placeholder":"NestedTableRow3218022960__placeholder","parentHovered":"NestedTableRow3218022960__parentHovered"};
+export var classes = {"root":"NestedTableRow208321339__root","firstLevel":"NestedTableRow208321339__firstLevel","placeholder":"NestedTableRow208321339__placeholder","parentHovered":"NestedTableRow208321339__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_ = "MultipleDragOverlayEffect1823254855";
+var _namespace_ = "MultipleDragOverlayEffect47656884";
 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":"MultipleDragOverlayEffect1823254855__root"};
+export var classes = {"root":"MultipleDragOverlayEffect47656884__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_ = "NestedTableDragAndDropRow1201414144";
+var _namespace_ = "NestedTableDragAndDropRow3796496631";
 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":"NestedTableDragAndDropRow1201414144__root"};
+export var classes = {"root":"NestedTableDragAndDropRow3796496631__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_ = "PickerContent1814532354";
+var _namespace_ = "PickerContent677599157";
 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":"PickerContent1814532354__root"};
+export var classes = {"root":"PickerContent677599157__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_ = "PickerContentAdditionalStep1599061222";
+var _namespace_ = "PickerContentAdditionalStep80900325";
 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":"PickerContentAdditionalStep1599061222__root","titles":"PickerContentAdditionalStep1599061222__titles","suffix":"PickerContentAdditionalStep1599061222__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep80900325__root","titles":"PickerContentAdditionalStep80900325__titles","suffix":"PickerContentAdditionalStep80900325__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_ = "PickerTableListItem412478209";
+var _namespace_ = "PickerTableListItem3286367647";
 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":"PickerTableListItem412478209__root"};
+export var classes = {"root":"PickerTableListItem3286367647__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_ = "ScrollableContent3628671348";
+var _namespace_ = "ScrollableContent1050821203";
 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":"ScrollableContent3628671348__root"};
+export var classes = {"root":"ScrollableContent1050821203__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_ = "SkeletonCard1339768371";
+var _namespace_ = "SkeletonCard3326812551";
 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":"SkeletonCard1339768371__root","headerLoading":"SkeletonCard1339768371__headerLoading"};
+export var classes = {"root":"SkeletonCard3326812551__root","headerLoading":"SkeletonCard3326812551__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_ = "SlidingModal1884507680";
+var _namespace_ = "SlidingModal1578172764";
 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":"SlidingModal1884507680__root"};
+export var classes = {"root":"SlidingModal1578172764__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}
         />
       ) : (