@wix/patterns 1.378.0 → 1.381.0

package/src/components/TableGridSwitch/TableGridSwitch.tsx

@@ -1,13 +1,9 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import { FiltersMap } from '@wix/bex-core';
-import { Grid, GridBasePropsWithoutPreset } from '../Grid';
-import { Table, TableProps } from '..';
 import { observer } from 'mobx-react-lite';
 import type { TableGridSwitchState } from '../../state/TableGridSwitchState';
-import { TableGridSwitchButton } from '../TableGridSwitchButton';
 import { GridPresetProps } from '../Grid/Grid.types';
 import type { TableGridSwitchDragAndDrop } from './TableGridSwitchDragAndDrop';
-import { InitialLoader } from '../InitialLoader';
 import { GridSectionsContent } from '../GridSections/GridSectionsContent';
 import type {
   GroupBy,
@@ -15,6 +11,9 @@ import type {
   SectionEvents,
 } from '../CollectionSectionHeader';
 import { TableSections } from '../TableSections';
+import { GridBasePropsWithoutPreset } from '../Grid/Grid';
+import { TableProps } from '..';
+import { LayoutSwitch } from '../LayoutSwitch';
 
 export interface TableGridSwitchBaseProps<T, F extends FiltersMap>
   extends Omit<
@@ -60,61 +59,42 @@ export function _TableGridSwitch<T, F extends FiltersMap = FiltersMap>(
   props: TableGridSwitchProps<T, F>,
 ) {
   const { state, dragAndDrop, sections, ...restProps } = props;
-  const { gridState, tableState, toolbar } = state;
 
-  const tableGridSwitchButton = (
-    <TableGridSwitchButton state={state.viewTypeState} />
-  );
-
-  useEffect(() => state.init(), []);
-
-  const {
-    initTask: { status },
-  } = state;
-
-  const isLoading = status.isIdle || status.isLoading;
-
-  const gridSections = sections
+  const tableSections = sections
     ? {
-        GridSections: sections.GridSections,
+        TableSections: sections.TableSections,
         groupBy: sections.groupBy,
         renderSection: sections.renderSection,
+        collapsible: sections.collapsible,
+        events: sections.events,
       }
     : undefined;
 
-  const tableSections = sections
+  const gridSections = sections
     ? {
-        TableSections: sections.TableSections,
+        GridSections: sections.GridSections,
         groupBy: sections.groupBy,
         renderSection: sections.renderSection,
-        collapsible: sections.collapsible,
-        events: sections.events,
       }
     : undefined;
 
   return (
-    <>
-      {isLoading ? (
-        <InitialLoader dataHook="initial-loader" state={toolbar} />
-      ) : state.viewType === 'grid' ? (
-        <Grid
-          {...restProps}
-          tableGridSwitchButton={tableGridSwitchButton}
-          state={gridState}
-          dragAndDrop={dragAndDrop?.grid}
-          sections={gridSections}
-        />
-      ) : (
-        <Table
-          {...restProps}
-          sticky
-          tableGridSwitchButton={tableGridSwitchButton}
-          state={tableState}
-          dragAndDrop={dragAndDrop?.table}
-          sections={tableSections}
-        />
-      )}
-    </>
+    <LayoutSwitch
+      state={state}
+      tableProps={{
+        ...restProps,
+        state: state.tableState,
+        dragAndDrop: dragAndDrop?.table,
+        sections: tableSections,
+        sticky: true,
+      }}
+      gridProps={{
+        ...restProps,
+        state: state.gridState,
+        dragAndDrop: dragAndDrop?.grid,
+        sections: gridSections,
+      }}
+    />
   );
 }
 

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

@@ -31,10 +31,8 @@ export function TableGridSwitchUniDriver(base: UniDriver, body: UniDriver) {
     getTable,
     /** Get Grid driver */
     getGrid,
-    isShowingGrid: () =>
-      base.$(`[data-hook="toolbar-collection-content"]`).exists(),
-    isShowingTable: async () =>
-      !(await base.$(`[data-hook="toolbar-collection-content"]`).exists()),
+    isShowingGrid: () => body.$(`[data-hook="layout-view-grid"]`).exists(),
+    isShowingTable: () => body.$(`[data-hook="layout-view-table"]`).exists(),
     /**
      * Gets collection summary bar
      */

package/src/components/TableGridSwitchButton/TableGridSwitchButton.tsx

@@ -1,111 +1,14 @@
 import { observer } from 'mobx-react-lite';
-import React, { useMemo } from 'react';
-import {
-  DropdownBase,
-  IconButton,
-  listItemSelectBuilder,
-  SegmentedToggle,
-  Tooltip,
-} from '@wix/design-system';
-import { LayoutGallery, LayoutList } from '@wix/wix-ui-icons-common';
-import { useWixPatternsContainer } from '@wix/bex-core/react';
-import { TranslationsKeys } from '@wix/bex-core';
-import { ViewType, ViewTypeState } from '../../state/ViewTypeState';
-import { layoutOptions, layoutConfig } from './layoutConfig';
+import React from 'react';
+import { ViewTypeState } from '../../state/ViewTypeState';
+import { LayoutSwitchButton } from '../LayoutSwitchButton';
 
 export interface TableGridSwitchButtonProps {
   state: ViewTypeState;
 }
 
-function _TableGridSwitchButton(props: TableGridSwitchButtonProps) {
-  const { translate: t, experiments } = useWixPatternsContainer();
-  const { state } = props;
-  const { viewType } = state;
-
-  const isLayoutToggleRedesignEnabled = experiments.enabled(
-    'specs.cairo.layout-toggle.redesign',
-  );
-
-  const options = useMemo(
-    () =>
-      layoutOptions.map((option) =>
-        listItemSelectBuilder({
-          id: option,
-          title: t(layoutConfig[option].translationKey),
-          prefix: layoutConfig[option].icon,
-          dataHook: `layout-option-${option}`,
-        }),
-      ),
-    [t],
-  );
-
-  if (!isLayoutToggleRedesignEnabled) {
-    return (
-      <SegmentedToggle
-        size="small"
-        dataHook="table-grid-switch-toggle-button"
-        selected={viewType}
-        onClick={(_, value) => {
-          if (state.viewType === value) {
-            return;
-          }
-          state.changeViewType(value as ViewType);
-        }}
-      >
-        <SegmentedToggle.Icon
-          value="grid"
-          dataHook="toggle-option-grid"
-          tooltipText={t('cairo.table.gridView' as TranslationsKeys)}
-        >
-          <LayoutGallery />
-        </SegmentedToggle.Icon>
-        <SegmentedToggle.Icon
-          value="table"
-          dataHook="toggle-option-table"
-          tooltipText={t('cairo.table.listView' as TranslationsKeys)}
-        >
-          <LayoutList />
-        </SegmentedToggle.Icon>
-      </SegmentedToggle>
-    );
-  }
-
-  return (
-    <DropdownBase
-      dataHook="layout-switch-popover"
-      options={options}
-      selectedId={viewType}
-      showArrow
-      onSelect={(option) => {
-        const selectedOption = option.id as ViewType;
-        const index = layoutOptions.indexOf(selectedOption);
-        state.reportLayoutOptionClicked(selectedOption, index);
-        if (viewType !== selectedOption) {
-          state.changeViewType(selectedOption);
-        }
-      }}
-    >
-      {({ toggle }) => (
-        <Tooltip
-          content={t('cairo.table.layout.switchLayout' as TranslationsKeys)}
-          size="medium"
-        >
-          <IconButton
-            dataHook="layout-switch-button"
-            size="small"
-            priority="secondary"
-            aria-haspopup="menu"
-            onClick={() => {
-              state.reportLayoutSwitch();
-              toggle();
-            }}
-          >
-            {layoutConfig[viewType].icon}
-          </IconButton>
-        </Tooltip>
-      )}
-    </DropdownBase>
-  );
+function _TableGridSwitchButton({ state }: TableGridSwitchButtonProps) {
+  return <LayoutSwitchButton state={state} options={['table', 'grid']} />;
 }
 
 export const TableGridSwitchButton = observer(_TableGridSwitchButton);

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

@@ -22,15 +22,21 @@ export function TableGridSwitchButtonUniDriver(
     /** Check if the SegmentedToggle (old UI) exists */
     exists: () => base.exists(),
     /** Click table button in SegmentedToggle (old UI) */
-    clickTableButton: () => base.$$(`[data-hook="toggle-icon"]`).get(1).click(),
+    clickTableButton: () =>
+      base
+        .$(`[data-hook="toggle-option-table"] [data-hook="toggle-icon"]`)
+        .click(),
     /** Click grid button in SegmentedToggle (old UI) */
-    clickGridButton: () => base.$$(`[data-hook="toggle-icon"]`).get(0).click(),
+    clickGridButton: () =>
+      base
+        .$(`[data-hook="toggle-option-grid"] [data-hook="toggle-icon"]`)
+        .click(),
 
     popoverExists: () => getDropdown().exists(),
     layoutSwitchButtonExists: () => getLayoutSwitchButton().exists(),
     openPopover: () => getLayoutSwitchButton().click(),
     isPopoverOpen: () => getDropdown().isDropdownShown(),
-    clickLayoutOption: (option: 'table' | 'grid') =>
+    clickLayoutOption: (option: 'table' | 'grid' | 'spreadsheet') =>
       getDropdown().selectOptionByDataHook(`layout-option-${option}`),
     getLayoutOptionsCount: () => getDropdown().optionsCount(),
   };

package/src/components/TableGridSwitchButton/layoutConfig.tsx

@@ -1,20 +1,4 @@
-import React from 'react';
-import { LayoutGallery, LayoutSplit } from '@wix/wix-ui-icons-common';
-import { TranslationsKeys } from '@wix/bex-core';
 import { ViewType } from '../../state/ViewTypeState';
 
+export { layoutConfig } from '../LayoutSwitchButton/layoutConfig';
 export const layoutOptions: ViewType[] = ['table', 'grid'];
-
-export const layoutConfig: Record<
-  ViewType,
-  { icon: React.ReactNode; translationKey: TranslationsKeys }
-> = {
-  table: {
-    icon: <LayoutSplit />,
-    translationKey: 'cairo.table.layout.table' as TranslationsKeys,
-  },
-  grid: {
-    icon: <LayoutGallery />,
-    translationKey: 'cairo.table.layout.grid' as TranslationsKeys,
-  },
-};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "TabsFilter2767251165";
+var _namespace_ = "TabsFilter624551827";
 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":"TabsFilter2767251165__root","title":"TabsFilter2767251165__title"};
+export var classes = {"root":"TabsFilter624551827__root","title":"TabsFilter624551827__title"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/Tags/ManageTags/ManageTagsModal/ManageTagsModal.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "ManageTagsModal3062371901";
+var _namespace_ = "ManageTagsModal3372195957";
 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":"ManageTagsModal3062371901__root"};
+export var classes = {"root":"ManageTagsModal3372195957__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "common2887450320";
+var _namespace_ = "common1666112165";
 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":"common2887450320__root","column":"common2887450320__column","fullHeight":"common2887450320__fullHeight"};
+export var classes = {"root":"common1666112165__root","column":"common1666112165__column","fullHeight":"common1666112165__fullHeight"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/exports/testkit/unidriver.ts

@@ -6,6 +6,7 @@ export { CollectionViewsDropdownUniDriver } from '../../components/CollectionVie
 export { CollectionSaveViewModalUniDriver } from '../../components/CollectionViewsDropdown/modals/SaveView/CollectionSaveViewModal.uni.driver';
 export { GridUniDriver } from '../../components/Grid/Grid.uni.driver';
 export { TableGridSwitchUniDriver } from '../../components/TableGridSwitch/TableGridSwitch.uni.driver';
+export { LayoutSwitchUniDriver } from '../../components/LayoutSwitch/LayoutSwitch.uni.driver';
 export { default as GridFoldersUniDriver } from '../../components/Grid/GridFolders.uni.driver';
 export { KanbanUniDriver } from '../../components/Kanban/Kanban.uni.driver';
 export { default as TableFoldersUniDriver } from '../../components/TableFolders/TableFolders.uni.driver';

package/src/hooks/useCollectionTableResize.ts

@@ -9,12 +9,14 @@ export function useCollectionTableResize({
   userResizeProps,
   columnSizesState,
   isVirtualized,
+  forceResize,
 }: {
   columns: TableColumn[];
   horizontalScroll: boolean | undefined;
   userResizeProps?: TableProps['resizeProps'];
   columnSizesState: ColumnSizesState | null;
   isVirtualized?: boolean;
+  forceResize?: boolean;
 }) {
   const experimentEnabled =
     columnSizesState?.isResizeExperimentEnabled ?? false;
@@ -26,16 +28,12 @@ export function useCollectionTableResize({
   );
 
   const isResizable =
-    experimentEnabled &&
-    !isMobile &&
-    !isVirtualized &&
-    !!horizontalScroll &&
-    areAllColumnsPixelWidth;
-
-  const resizePlaceholderColumn = useMemo(
-    () => ({ title: '', width: '100%', render: () => null }),
-    [],
-  );
+    forceResize ||
+    (experimentEnabled &&
+      !isMobile &&
+      !isVirtualized &&
+      !!horizontalScroll &&
+      areAllColumnsPixelWidth);
 
   const tableResizeProps: TableProps['resizeProps'] | undefined = isResizable
     ? {
@@ -51,6 +49,5 @@ export function useCollectionTableResize({
   return {
     isResizable,
     tableResizeProps,
-    resizePlaceholderColumn,
   };
 }

package/src/hooks/useEntityPage.ts

@@ -1,21 +1,29 @@
 import { useState } from 'react';
 import { EntityPageState, EntityPageStateParams } from '../state';
+import { EntityViewConfig } from '../state/EntityPage/EntityPageFieldsState';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { FieldValues } from 'react-hook-form';
 import { useWixPatternsRouter } from '../providers/WixPatternsRouterProvider';
 
-export interface UseEntityPageParams<T, V extends FieldValues = FieldValues>
-  extends Pick<
-    EntityPageStateParams<T, V>,
-    | 'fetch'
-    | 'onSave'
-    | 'saveSuccessToast'
-    | 'saveErrorToast'
-    | 'form'
-    | 'parentPageId'
-    | 'parentPath'
-    | 'fqdn'
-  > {}
+type UseEntityPageParamsBase<T, V extends FieldValues = FieldValues> = Pick<
+  EntityPageStateParams<T, V>,
+  | 'fetch'
+  | 'onSave'
+  | 'saveSuccessToast'
+  | 'saveErrorToast'
+  | 'form'
+  | 'parentPageId'
+  | 'parentPath'
+>;
+
+export type UseEntityPageParams<
+  T,
+  V extends FieldValues = FieldValues,
+> = UseEntityPageParamsBase<T, V> &
+  (
+    | { fields: EntityViewConfig[]; persistencyKey: string }
+    | { fields?: never; persistencyKey?: never }
+  );
 
 export function useEntityPage<T, V extends FieldValues = FieldValues>(
   props: UseEntityPageParams<T, V>,

package/src/hooks/useLayoutSwitchCollection.ts

@@ -0,0 +1,60 @@
+import { FiltersMap, OptionalFiltersMap } from '@wix/bex-core';
+import {
+  useWixPatternsContainer,
+  useWixPatternsContainerOverrides,
+  CollectionConfigWithConditionals,
+  useCreateCollection,
+  useCreateOptimisticActions,
+} from '@wix/bex-core/react';
+import {
+  LayoutSwitchState,
+  LayoutSwitchStateParams,
+  SpreadsheetLayoutConfig,
+  TableLayoutConfig,
+  GridLayoutConfig,
+} from '../state/LayoutSwitchState';
+import { useOptionalCachedState } from './useOptionalCachedState';
+
+export type LayoutSwitchCollectionConfig<
+  T,
+  F extends FiltersMap,
+> = CollectionConfigWithConditionals<T, F> & {
+  table?: TableLayoutConfig;
+  grid?: GridLayoutConfig;
+  spreadsheet?: Omit<SpreadsheetLayoutConfig<T, F>, 'createOptimisticActions'>;
+};
+
+export const useLayoutSwitchCollection = <
+  T,
+  F extends FiltersMap = OptionalFiltersMap,
+>(
+  config: LayoutSwitchCollectionConfig<T, F>,
+): LayoutSwitchState<T, F> => {
+  const container = useWixPatternsContainer();
+  const containerOverrides = useWixPatternsContainerOverrides();
+  const createCollection = useCreateCollection();
+  const createOptimisticActions = useCreateOptimisticActions();
+
+  const state = useOptionalCachedState(() => {
+    const collection = createCollection<T, F>(config);
+
+    const spreadsheet: LayoutSwitchStateParams<T, F>['spreadsheet'] =
+      config.spreadsheet
+        ? {
+            ...config.spreadsheet,
+            createOptimisticActions: (c) => createOptimisticActions(c),
+          }
+        : undefined;
+
+    return new LayoutSwitchState<T, F>({
+      collection,
+      container,
+      containerOverrides,
+      table: config.table,
+      grid: config.grid,
+      spreadsheet,
+    });
+  });
+
+  return state;
+};

package/src/index.ts

@@ -80,6 +80,8 @@ export * from './components/CustomFieldsWidget';
 export * from './components/TableFolders';
 export * from './components/GridDragAndDropDndKit/GridDragAndDrop';
 export * from './components/TableGridSwitch/TableGridSwitch';
+export * from './components/LayoutSwitch/LayoutSwitch';
+export * from './components/LayoutSwitchButton/LayoutSwitchButton';
 export * from './components/TableGridSwitchFolders/TableGridSwitchFolders';
 export * from './components/TableGridSwitch/TableGridSwitchDragAndDrop';
 export * from './components/TabTotal';
@@ -134,6 +136,7 @@ export * from './hooks/useEntityPage';
 export * from './hooks/useSettingsPage';
 export * from './hooks/useNestedTable';
 export * from './hooks/useEditableTableCollection';
+export * from './hooks/useLayoutSwitchCollection';
 export * from './hooks/useCreateNestedOptimisticActions';
 export * from './hooks/useEntity';
 export * from './hooks/useSettings';
@@ -144,6 +147,7 @@ export * from './hooks/useIsMobile';
 
 export * from './state/ViewsState';
 export * from './state/EntityPage/EntityPageState';
+export type { EntityViewConfig } from './state/EntityPage/EntityPageFieldsState';
 export * from './state/SettingsPage/SettingsPageState';
 export * from './state/TableState';
 export { GridState } from './state/GridState';
@@ -153,6 +157,8 @@ export * from './state/TableGridSwitchFoldersState';
 export * from './state/CustomFields/CustomFieldsWidgetState';
 export * from './state/NestedTableState';
 export * from './state/EditableTable';
+export * from './state/LayoutSwitchState';
+export * from './state/ILayoutSwitchState';
 export { DateRangeFilterStateParams } from './state/DateRangeFilterState';
 
 export { TableDragAndDrop } from './components/TableDragAndDrop';

package/src/model/view.ts

@@ -1,7 +1,7 @@
 import { AllFilters, FiltersMap, ExtractFilterValue } from '@wix/bex-core';
 import { InfoIconProps } from '@wix/design-system';
 
-export type ViewType = 'table' | 'grid';
+export type ViewType = 'table' | 'grid' | 'spreadsheet';
 
 export type ColumnSortOrder = 'Ascending' | 'Descending';
 

package/src/providers/PatternsFieldsProvider.tsx

@@ -4,6 +4,8 @@ import {
   PatternsFieldsAppContainer,
   PatternsFieldsContainerProvider,
 } from '@wix/patterns-fields/providers';
+// eslint-disable-next-line no-restricted-imports
+import '@wix/patterns-fields/src/styles.global.css';
 
 /**
  * Initializes PatternsFieldsAppContainer with the current WixPatternsContainer

package/src/providers/SchemaProvider.tsx

@@ -6,7 +6,9 @@ import React, {
   useMemo,
   useState,
 } from 'react';
-import { SchemaConfig } from '../types/SchemaConfig';
+import { FieldActions, SchemaConfig } from '../types/SchemaConfig';
+
+export type { FieldActions, SchemaConfig };
 
 export type SchemaContextValue = {
   schema: Record<string, SchemaConfig>;

package/src/state/CollectionPage/CollectionPageHeader.st.css.ts

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