@wix/patterns 1.483.0 → 1.485.0

package/dist/types/version.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/patterns",
-  "version": "1.483.0",
+  "version": "1.485.0",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",
@@ -227,11 +227,11 @@
   ],
   "dependencies": {
     "@wix/agent-platform-bm-sdk": "^1.0.0",
-    "@wix/bex-core": "2.389.0",
-    "@wix/bex-utils": "2.176.0",
+    "@wix/bex-core": "2.391.0",
+    "@wix/bex-utils": "2.178.0",
     "@wix/essentials": "^0.1.26",
-    "@wix/patterns-fields": "1.111.0",
-    "@wix/patterns-fields-utils": "1.92.0",
+    "@wix/patterns-fields": "1.113.0",
+    "@wix/patterns-fields-utils": "1.94.0",
     "@wix/sdk": "^1.15.22",
     "@wix/wix-style-react-incubator": "^3.23.1",
     "@wix/wix-ui-test-utils": "^1.1.9",
@@ -294,7 +294,7 @@
     "@wix/awaiter-utils": "^1.0.76",
     "@wix/babel-cli": "^1.11.0",
     "@wix/business-manager-api": "^1.470.0",
-    "@wix/cairo-integration-utils": "1.151.0",
+    "@wix/cairo-integration-utils": "1.153.0",
     "@wix/ci-build-info": "^1.0.0",
     "@wix/crm": "^1.0.93",
     "@wix/dashboard": "^1.3.39",
@@ -456,5 +456,5 @@
   "wallaby": {
     "autoDetect": true
   },
-  "falconPackageHash": "72e8a35d08f6ab028645338917918f2bb6cabe1e247fb4758f5a115d"
+  "falconPackageHash": "30930059a4f1ec30ef8685e95ab7aa46913b6f996b8270aca0fecc93"
 }

package/src/bm/usePickerModal.ts

@@ -10,7 +10,11 @@ import {
   FiltersMap,
   OptionalFiltersMap,
 } from '@wix/bex-core';
-import { PaginationModeConfig } from '@wix/bex-core/react';
+import {
+  CursorPaginationModeConfig,
+  OffsetPaginationModeConfig,
+  PaginationModeConfig,
+} from '@wix/bex-core/react';
 import {
   FlowBusinessManagerModule,
   useComponentInfo,
@@ -41,9 +45,24 @@ export type UsePickerModalParams<
   UsePickerModalParamsOverrides<T, F> &
   PaginationModeConfig<T, F>;
 
-export type PikerModalFactory = <T, F extends FiltersMap = OptionalFiltersMap>(
-  config: UsePickerModalParams<T, F>,
-) => PickerModalState<T, F>;
+type ParamsWithoutPagination<T, F extends FiltersMap> = UsePickerModalParamsBM<
+  T,
+  F
+> &
+  UsePickerModalParamsOverrides<T, F>;
+
+// One overload per pagination branch: see `PaginationModeConfig` in bex-core.
+export type PikerModalFactory = {
+  <T, F extends FiltersMap = OptionalFiltersMap>(
+    config: ParamsWithoutPagination<T, F> & CursorPaginationModeConfig<T, F>,
+  ): PickerModalState<T, F>;
+  <T, F extends FiltersMap = OptionalFiltersMap>(
+    config: ParamsWithoutPagination<T, F> & OffsetPaginationModeConfig<T, F>,
+  ): PickerModalState<T, F>;
+  <T, F extends FiltersMap = OptionalFiltersMap>(
+    config: UsePickerModalParams<T, F>,
+  ): PickerModalState<T, F>;
+};
 
 export function useCreatePickerModal(): PikerModalFactory {
   const moduleParams = useModuleParams();
@@ -80,9 +99,18 @@ export function useCreatePickerModal(): PikerModalFactory {
   );
 }
 
+export function usePickerModal<T, F extends FiltersMap = OptionalFiltersMap>(
+  params: ParamsWithoutPagination<T, F> & CursorPaginationModeConfig<T, F>,
+): PickerModalState<T, F>;
+export function usePickerModal<T, F extends FiltersMap = OptionalFiltersMap>(
+  params: ParamsWithoutPagination<T, F> & OffsetPaginationModeConfig<T, F>,
+): PickerModalState<T, F>;
+export function usePickerModal<T, F extends FiltersMap = OptionalFiltersMap>(
+  params: UsePickerModalParams<T, F>,
+): PickerModalState<T, F>;
 export function usePickerModal<T, F extends FiltersMap = OptionalFiltersMap>(
   params: UsePickerModalParams<T, F>,
-) {
+): PickerModalState<T, F> {
   const createPickerModal = useCreatePickerModal();
   const [state] = useState(() => createPickerModal<T, F>(params));
   useSyncPickerModalProps(state, params);

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

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

package/src/components/CmsFieldManagement/CmsFieldForm.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CmsFieldForm1711651431";
+var _namespace_ = "CmsFieldForm3002616328";
 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":"CmsFieldForm1711651431__root","fullBleedDivider":"CmsFieldForm1711651431__fullBleedDivider"};
+export var classes = {"root":"CmsFieldForm3002616328__root","fullBleedDivider":"CmsFieldForm3002616328__fullBleedDivider"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CmsFieldManagement/CmsFieldModal.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CmsFieldModal2493735177";
+var _namespace_ = "CmsFieldModal68229072";
 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":"CmsFieldModal2493735177__root","modal":"CmsFieldModal2493735177__modal"};
+export var classes = {"root":"CmsFieldModal68229072__root","modal":"CmsFieldModal68229072__modal"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CmsFieldManagement/Sections/ValidationAndDefaultsSection.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "ValidationAndDefaultsSection3896500806";
+var _namespace_ = "ValidationAndDefaultsSection155636651";
 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":"ValidationAndDefaultsSection3896500806__root","accordionWrapper":"ValidationAndDefaultsSection3896500806__accordionWrapper"};
+export var classes = {"root":"ValidationAndDefaultsSection155636651__root","accordionWrapper":"ValidationAndDefaultsSection155636651__accordionWrapper"};
 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_ = "Collapse136079483";
+var _namespace_ = "Collapse206202394";
 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":"Collapse136079483__root","exit":"Collapse136079483__exit"};
+export var classes = {"root":"Collapse206202394__root","exit":"Collapse206202394__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_ = "CollectionPage30871070";
+var _namespace_ = "CollectionPage492482884";
 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":"CollectionPage30871070__root"};
+export var classes = {"root":"CollectionPage492482884__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_ = "CollectionSectionHeader4175391760";
+var _namespace_ = "CollectionSectionHeader3814835760";
 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":"CollectionSectionHeader4175391760__root","summaryIcon":"CollectionSectionHeader4175391760__summaryIcon"};
+export var classes = {"root":"CollectionSectionHeader3814835760__root","summaryIcon":"CollectionSectionHeader3814835760__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_ = "CollectionTable2341564990";
+var _namespace_ = "CollectionTable1974065091";
 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":"CollectionTable2341564990__root"};
+export var classes = {"root":"CollectionTable1974065091__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -9,6 +9,7 @@ import {
   LiveRegionUniDriver,
   PopoverUniDriver,
   InfoIconUniDriver,
+  TooltipUniDriver,
 } from '@wix/design-system/dist/testkit/unidriver';
 import { AppliedFiltersTagListUniDriver } from '../AppliedFiltersTagList/AppliedFiltersTagList.uni.driver';
 import { TableTopNotificationUniDriver } from '../TableTopNotification/TableTopNotification.uni.driver';
@@ -418,5 +419,15 @@ export const CollectionTableUniDriver = (base: UniDriver, body: UniDriver) => {
           .$('[data-hook$="_info_tooltip"]'),
         body,
       ),
+
+    /** The primary-field flag in a column header, by column id. */
+    getHeaderPrimaryFieldFlag: (columnId: string) =>
+      TooltipUniDriver(
+        base
+          .$('thead')
+          .$(`th[data-hook="${columnId}"]`)
+          .$('[data-hook="primary-field-header-flag"]'),
+        body,
+      ),
   };
 };

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

@@ -10,3 +10,15 @@
   right: -4px !important;
   z-index: 1;
 }
+
+.titlebar {
+  -st-states: harmony;
+}
+
+/* WDS sizes a header cell in a virtual (flex) row as 24px + padding: 36px
+   under odeditor, in a 48px header row, which leaves a strip under the header.
+   Remove once WDS sizes these cells to the header row. */
+.titlebar:harmony :global(th) {
+  height: auto;
+  align-self: stretch;
+}

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionTableWSRTable2152666113";
+var _namespace_ = "CollectionTableWSRTable2872234387";
 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":"CollectionTableWSRTable2152666113__root"};
+export var classes = {"root":"CollectionTableWSRTable2872234387__root","titlebar":"CollectionTableWSRTable2872234387__titlebar"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionTable/CollectionTableWSRTable.tsx

@@ -56,6 +56,14 @@ export interface CollectionTableWSRTableBaseProps<U, T, F extends FiltersMap>
   useShowLoaderWhenEmpty?: boolean;
   useNewInfiniteScrollLoader?: boolean;
 
+  /**
+   * Keeps column headers above the empty state, including filtered or search
+   * results with no items. Loading, error, mobile and `showTitleBar` behavior
+   * still apply. Defaults to false.
+   * @external
+   */
+  showHeaderWhenEmpty?: boolean;
+
   /**
    * Whether to add a sticky column. <br>
    * Sticky columns allow you to display specific columns at all times while the visitor scrolls the table horizontally.
@@ -130,6 +138,7 @@ function _CollectionTableWSRTable<U, T, F extends FiltersMap = FiltersMap>(
     useShowLoaderWhenEmpty,
     dragAndDrop,
     showTitleBar,
+    showHeaderWhenEmpty: showHeaderWhenEmptyProp,
     horizontalScroll,
     stickyColumns,
     stickySelectionColumn,
@@ -186,9 +195,14 @@ function _CollectionTableWSRTable<U, T, F extends FiltersMap = FiltersMap>(
 
   const showSelection = showSelectionProp ?? selectionToolbar != null;
 
+  const showHeaderWhenEmpty =
+    (showHeaderWhenEmptyProp || (useShowLoaderWhenEmpty && !showEmptyState)) &&
+    !showRefreshLoader &&
+    !showErrorState;
+
   const hideTitleBar =
     isMobile ||
-    showEmptyState ||
+    (showEmptyState && !showHeaderWhenEmpty) ||
     toolbar.showInitialLoader ||
     initTask.status.isError;
 
@@ -248,13 +262,7 @@ function _CollectionTableWSRTable<U, T, F extends FiltersMap = FiltersMap>(
         viewportRef={stackingRootRef}
         columns={tableColumns}
         onRowClick={onRowClick ? handleRowCLick : undefined}
-        // this forces WSR <Table/> to render the loader even when `data.length=0`
-        showHeaderWhenEmpty={
-          useShowLoaderWhenEmpty &&
-          !showRefreshLoader &&
-          !showErrorState &&
-          !showEmptyState
-        }
+        showHeaderWhenEmpty={showHeaderWhenEmpty}
         hideBulkSelectionCheckbox={
           selectionToolbar ? false : hideBulkSelectionCheckbox
         }
@@ -305,6 +313,9 @@ function _CollectionTableWSRTable<U, T, F extends FiltersMap = FiltersMap>(
               {!hideTitleBar && (
                 <div
                   data-hook="titlebar-a11y-wrapper"
+                  className={wsrTableSt(wsrTableClasses.titlebar, {
+                    harmony: isBmHarmonyTheme,
+                  })}
                   ref={(el) => {
                     table.headerElement = el;
                   }}

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionToolbar4191390783";
+var _namespace_ = "CollectionToolbar3055898300";
 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":"CollectionToolbar4191390783__root","right":"CollectionToolbar4191390783__right","left":"CollectionToolbar4191390783__left","fullWidth":"CollectionToolbar4191390783__fullWidth"};
+export var classes = {"root":"CollectionToolbar3055898300__root","right":"CollectionToolbar3055898300__right","left":"CollectionToolbar3055898300__left","fullWidth":"CollectionToolbar3055898300__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_ = "SearchOrCustomFilter3598456581";
+var _namespace_ = "SearchOrCustomFilter2789013570";
 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":"SearchOrCustomFilter3598456581__root","search":"SearchOrCustomFilter3598456581__search","searchMobile":"SearchOrCustomFilter3598456581__searchMobile"};
+export var classes = {"root":"SearchOrCustomFilter2789013570__root","search":"SearchOrCustomFilter2789013570__search","searchMobile":"SearchOrCustomFilter2789013570__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_ = "AutoCompleteReadonly2292120229";
+var _namespace_ = "AutoCompleteReadonly3864785655";
 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":"AutoCompleteReadonly2292120229__root"};
+export var classes = {"root":"AutoCompleteReadonly3864785655__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_ = "ViewsDropdown594376402";
+var _namespace_ = "ViewsDropdown916947380";
 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":"ViewsDropdown594376402__root"};
+export var classes = {"root":"ViewsDropdown916947380__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CustomColumnsPanel/FieldIndications.tsx

@@ -45,7 +45,11 @@ function _FieldIndications({ column }: FieldIndicationsProps) {
           content={t('cairo.table.custom-columns.indication.primary.tooltip')}
           appendTo="window"
         >
-          <Box align="center" verticalAlign="middle">
+          <Box
+            align="center"
+            verticalAlign="middle"
+            dataHook="field-indication-primary"
+          >
             <FlagFilledSmall />
           </Box>
         </Tooltip>

package/src/components/CustomFieldModal/CustomFieldFormPiiFields.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CustomFieldFormPiiFields1126082020";
+var _namespace_ = "CustomFieldFormPiiFields2578249532";
 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":"CustomFieldFormPiiFields1126082020__root","tooltipText":"CustomFieldFormPiiFields1126082020__tooltipText"};
+export var classes = {"root":"CustomFieldFormPiiFields2578249532__root","tooltipText":"CustomFieldFormPiiFields2578249532__tooltipText"};
 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_ = "DragHandle1913915071";
+var _namespace_ = "DragHandle3351900768";
 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":"DragHandle1913915071__root"};
+export var classes = {"root":"DragHandle3351900768__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};