@wix/patterns 1.366.0 → 1.370.0

package/dist/types/version.d.ts

@@ -1,2 +1,2 @@
-export declare const version = "patterns@1.366.0";
+export declare const version = "patterns@1.370.0";
 //# sourceMappingURL=version.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/patterns",
-  "version": "1.366.0",
+  "version": "1.370.0",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",
@@ -159,7 +159,7 @@
   },
   "sideEffects": false,
   "scripts": {
-    "build": "yarn stc:all && yoshi-library build",
+    "build": "yarn stc:all && yoshi-library build && yarn docs:gen",
     "start": "yarn stc:all && yoshi-library start",
     "output-cairo-version": "ts-node -T --project tsconfig.scripts.json scripts/output-cairo-version.ts",
     "check-wix-design-system-version": "ts-node -T --project tsconfig.scripts.json scripts/check-wix-design-system-version.ts",
@@ -181,12 +181,14 @@
     "stc:bundle": "stc --srcDir=./src --outDir=src --bundle=styles.global.css --minify --optimize",
     "stc:src": "stc --srcDir=./src --outDir=src --esm --esmExt=.js --inlineRuntime --optimize",
     "stc:ts": "ts-node -T scripts/rename-st-css-files.ts",
-    "sled:gen": "ts-node -T --project tsconfig.scripts.json scripts/generate-sled-story.ts"
+    "sled:gen": "ts-node -T --project tsconfig.scripts.json scripts/generate-sled-story.ts",
+    "docs:gen": "ts-node -T --project tsconfig.docs-gen.json scripts/generate-component-docs.ts"
   },
   "files": [
     "dist/cjs",
     "dist/esm",
     "dist/types",
+    "dist/docs",
     "!dist/**/__tests__",
     "src",
     "!src/**/__tests__",
@@ -210,9 +212,10 @@
   ],
   "dependencies": {
     "@wix/agent-platform-bm-sdk": "^1.0.0",
-    "@wix/bex-core": "2.284.0",
-    "@wix/bex-utils": "2.84.0",
+    "@wix/bex-core": "2.288.0",
+    "@wix/bex-utils": "2.86.0",
     "@wix/essentials": "^0.1.26",
+    "@wix/patterns-fields": "1.6.0",
     "@wix/sdk": "^1.15.22",
     "@wix/wix-style-react-incubator": "3.13.0",
     "@wix/wix-ui-test-utils": "^1.1.9",
@@ -274,7 +277,7 @@
     "@wix/ambassador-ecom-v1-order": "^1.0.0",
     "@wix/awaiter-utils": "^1.0.76",
     "@wix/business-manager-api": "^1.470.0",
-    "@wix/cairo-integration-utils": "1.61.0",
+    "@wix/cairo-integration-utils": "1.63.0",
     "@wix/ci-build-info": "^1.0.0",
     "@wix/crm": "^1.0.93",
     "@wix/dashboard": "^1.3.39",
@@ -428,5 +431,5 @@
   "wallaby": {
     "autoDetect": true
   },
-  "falconPackageHash": "e557c0571e113adb1aeaa495e2957f3a2bda40f6940a65d1e5582a20"
+  "falconPackageHash": "7843a63878155d24fa49061f29c23562c1984ef61e4cb8e0d13f8b1f"
 }

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "Collapse269535241";
+var _namespace_ = "Collapse2301766540";
 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":"Collapse269535241__root","exit":"Collapse269535241__exit"};
+export var classes = {"root":"Collapse2301766540__root","exit":"Collapse2301766540__exit"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionPageNew/CollectionPage.st.css.ts

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionSectionHeader3937441446";
+var _namespace_ = "CollectionSectionHeader1276621223";
 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":"CollectionSectionHeader3937441446__root","summaryIcon":"CollectionSectionHeader3937441446__summaryIcon"};
+export var classes = {"root":"CollectionSectionHeader1276621223__root","summaryIcon":"CollectionSectionHeader1276621223__summaryIcon"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

package/src/components/CollectionTable/CollectionTableWSRTable.tsx

@@ -281,6 +281,9 @@ function _CollectionTableWSRTable<U, T, F extends FiltersMap = FiltersMap>(
               {!hideTitleBar && (
                 <div
                   data-hook="titlebar-a11y-wrapper"
+                  ref={(el) => {
+                    table.headerElement = el;
+                  }}
                   style={{ display: showTitleBar ? undefined : 'none' }}
                 >
                   <WSRTable.Titlebar />

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionToolbar1478562778";
+var _namespace_ = "CollectionToolbar979818899";
 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":"CollectionToolbar1478562778__root","left":"CollectionToolbar1478562778__left","right":"CollectionToolbar1478562778__right","fullWidth":"CollectionToolbar1478562778__fullWidth"};
+export var classes = {"root":"CollectionToolbar979818899__root","left":"CollectionToolbar979818899__left","right":"CollectionToolbar979818899__right","fullWidth":"CollectionToolbar979818899__fullWidth"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionToolbar/CollectionToolbar.tsx

@@ -35,6 +35,7 @@ import { CollectionSearch } from '../CollectionSearch';
 import { CollectionToolbarLeftGroup } from './CollectionToolbarLeftGroup';
 import { CollectionToolbarActionsGroupResponsiveLayout } from './CollectionToolbarActionsGroupResponsiveLayout';
 import { getToolbarMode } from './toolbarModeUtils';
+import { TableGridSwitchButtonProps } from '../TableGridSwitchButton/TableGridSwitchButton';
 
 export interface CollectionToolbarProps<T, F extends FiltersMap> {
   state: ToolbarCollectionState<T, F>;
@@ -257,10 +258,6 @@ function _CollectionToolbar<T, F extends FiltersMap>(
           ...[rendersStart ? undefined : classes.fullWidth],
         )}
       >
-        {isLayoutToggleRedesignEnabled && tableGridSwitchButton && (
-          <TableToolbar.Item>{tableGridSwitchButton}</TableToolbar.Item>
-        )}
-
         <CollectionToolbarActionsGroup
           state={state}
           viewsToolbarItem={viewsToolbarItem}
@@ -274,6 +271,16 @@ function _CollectionToolbar<T, F extends FiltersMap>(
           showCustomColumnsOnTheLeft={showCustomColumnsOnTheLeft}
           left={left}
           hasTabs={!!tabs}
+          tableGridSwitchButton={
+            isLayoutToggleRedesignEnabled ? tableGridSwitchButton : undefined
+          }
+          viewTypeState={
+            isLayoutToggleRedesignEnabled
+              ? (
+                  tableGridSwitchButton as ReactElement<TableGridSwitchButtonProps>
+                )?.props?.state
+              : undefined
+          }
         />
 
         {primaryActionButton && (

package/src/components/CollectionToolbar/CollectionToolbarActionsGroupProps.ts

@@ -1,6 +1,7 @@
 import { FunctionComponent, ReactElement } from 'react';
 import { ToolbarBaseProps } from '../ToolbarCollection';
 import { ToolbarCollectionState } from '../../state';
+import { ViewTypeState } from '../../state/ViewTypeState';
 
 export interface CollectionToolbarActionsGroupProps {
   state: ToolbarCollectionState<any, any>;
@@ -15,4 +16,6 @@ export interface CollectionToolbarActionsGroupProps {
   search?: ToolbarBaseProps['search'];
   showCustomColumnsOnTheLeft?: boolean;
   hasTabs?: boolean;
+  tableGridSwitchButton?: ReactElement;
+  viewTypeState?: ViewTypeState;
 }

package/src/components/CollectionToolbar/CollectionToolbarActionsGroupResponsiveLayout.tsx

@@ -1,5 +1,6 @@
-import React, { cloneElement, Fragment } from 'react';
+import React, { cloneElement, Fragment, useEffect } from 'react';
 import { Box } from '@wix/design-system';
+import { observer } from 'mobx-react-lite';
 import { ToolbarItem } from '../ToolbarItem/ToolbarItem';
 import { ToolbarGroupScrollWidthBox } from './ToolbarGroupScrollWidthBox';
 import { SearchOrCustomFilter } from './SearchOrCustomFilter';
@@ -7,8 +8,11 @@ import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
 import { CollectionToolbarActionsGroupProps } from './CollectionToolbarActionsGroupProps';
 import { InitialLoadingConditional } from '../InitialLoadingConditional';
 import { CollectionToolbarSkeletonItem } from './CollectionToolbarSkeletonItem';
+import { ToolbarOverflowMenu } from './ToolbarOverflowMenu';
+import { useToolbarOverflowItems } from './useToolbarOverflowItems';
+import { LAYOUT_SWITCH_BUTTON_WIDTH } from '../../state/Toolbar/toolbarResponsiveConstants';
 
-export function CollectionToolbarActionsGroupResponsiveLayout(
+function _CollectionToolbarActionsGroupResponsiveLayout(
   props: CollectionToolbarActionsGroupProps,
 ) {
   const {
@@ -23,6 +27,8 @@ export function CollectionToolbarActionsGroupResponsiveLayout(
     importButton,
     search,
     showCustomColumnsOnTheLeft,
+    tableGridSwitchButton,
+    viewTypeState,
   } = props;
 
   const toolbarState = useToolbarCollectionContext();
@@ -30,6 +36,32 @@ export function CollectionToolbarActionsGroupResponsiveLayout(
     toolbar: { responsive },
   } = toolbarState;
 
+  const overflowItems = useToolbarOverflowItems(toolbarState, {
+    customColumns,
+    multiLevelSorting,
+    exportButton,
+    importButton,
+    MoreFiltersButton,
+    viewTypeState,
+  });
+
+  const overflowItemCount =
+    overflowItems.primaryItems.length +
+    overflowItems.secondaryItems.length +
+    (overflowItems.layoutSwitchConfig ? 1 : 0);
+
+  // Don't show a "More" menu for a single item — keep it as an inline icon.
+  const shouldOverflow = responsive._shouldOverflow && overflowItemCount > 1;
+
+  // Track width of non-group content hidden during overflow so the algorithm
+  // doesn't overestimate available space when deciding whether to exit overflow.
+  // Tied to effective shouldOverflow (not just _shouldOverflow) so the single-item
+  // bypass doesn't cause a mismatch between DOM and algorithm.
+  useEffect(() => {
+    responsive._overflowHiddenContentWidth =
+      tableGridSwitchButton && shouldOverflow ? LAYOUT_SWITCH_BUTTON_WIDTH : 0;
+  }, [responsive, !!tableGridSwitchButton, shouldOverflow]);
+
   let child = (
     <Fragment>
       {left ? (
@@ -53,25 +85,46 @@ export function CollectionToolbarActionsGroupResponsiveLayout(
         filtersElement
       ) : undefined}
 
-      {MoreFiltersButton && (
+      {!shouldOverflow && tableGridSwitchButton}
+
+      {!shouldOverflow && MoreFiltersButton && (
         <ToolbarGroupScrollWidthBox state={responsive.filters} gap="SP2">
           <MoreFiltersButton />
         </ToolbarGroupScrollWidthBox>
       )}
 
-      <ToolbarGroupScrollWidthBox state={responsive.actions} gap="SP2">
-        {customColumns && showCustomColumnsOnTheLeft && customColumns}
-        {multiLevelSorting}
-        {exportButton &&
-          cloneElement(exportButton, {
-            toolbarType: 'default',
-          })}
-        {importButton &&
-          cloneElement(importButton, {
-            toolbarType: 'default',
-          })}
-        {customColumns && !showCustomColumnsOnTheLeft && customColumns}
-      </ToolbarGroupScrollWidthBox>
+      {!shouldOverflow && (
+        <ToolbarGroupScrollWidthBox state={responsive.actions} gap="SP2">
+          {customColumns && showCustomColumnsOnTheLeft && customColumns}
+          {multiLevelSorting}
+          {exportButton &&
+            cloneElement(exportButton, {
+              toolbarType: 'default',
+            })}
+          {importButton &&
+            cloneElement(importButton, {
+              toolbarType: 'default',
+            })}
+          {customColumns && !showCustomColumnsOnTheLeft && customColumns}
+        </ToolbarGroupScrollWidthBox>
+      )}
+
+      {shouldOverflow && (exportButton || importButton) && (
+        <Box display="none">
+          {exportButton &&
+            cloneElement(exportButton, { toolbarType: 'default' })}
+          {importButton &&
+            cloneElement(importButton, { toolbarType: 'default' })}
+        </Box>
+      )}
+
+      {shouldOverflow && (
+        <ToolbarOverflowMenu
+          primaryItems={overflowItems.primaryItems}
+          secondaryItems={overflowItems.secondaryItems}
+          layoutSwitchConfig={overflowItems.layoutSwitchConfig}
+        />
+      )}
 
       {search && <SearchOrCustomFilter state={state} search={search} />}
     </Fragment>
@@ -109,3 +162,7 @@ export function CollectionToolbarActionsGroupResponsiveLayout(
 
   return child;
 }
+
+export const CollectionToolbarActionsGroupResponsiveLayout = observer(
+  _CollectionToolbarActionsGroupResponsiveLayout,
+);

package/src/components/CollectionToolbar/CollectionToolbarActionsToolbarItemsGroup.tsx

@@ -23,6 +23,7 @@ function _CollectionToolbarActionsToolbarItemsGroup(
     importButton,
     search,
     showCustomColumnsOnTheLeft,
+    tableGridSwitchButton,
   } = props;
 
   const toolbarState = useToolbarCollectionContext();
@@ -57,6 +58,9 @@ function _CollectionToolbarActionsToolbarItemsGroup(
           ) : viewsToolbarItem ? (
             filtersElement
           ) : undefined}
+          {tableGridSwitchButton && (
+            <TableToolbar.Item>{tableGridSwitchButton}</TableToolbar.Item>
+          )}
           {MoreFiltersButton && (
             <TableToolbar.Item>
               <MoreFiltersButton />

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SearchOrCustomFilter281901088";
+var _namespace_ = "SearchOrCustomFilter3211790940";
 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":"SearchOrCustomFilter281901088__root","search":"SearchOrCustomFilter281901088__search","searchMobile":"SearchOrCustomFilter281901088__searchMobile"};
+export var classes = {"root":"SearchOrCustomFilter3211790940__root","search":"SearchOrCustomFilter3211790940__search","searchMobile":"SearchOrCustomFilter3211790940__searchMobile"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};