@wix/patterns 1.377.0 → 1.380.0

package/src/components/LayoutSwitch/LayoutSwitch.tsx

@@ -0,0 +1,121 @@
+import React, { Suspense, useEffect, useMemo } from 'react';
+import { FiltersMap } from '@wix/bex-core';
+import { observer } from 'mobx-react-lite';
+import { Table, TableProps } from '../Table';
+import { Grid, GridProps } from '../Grid';
+import type { EditableTableProps } from '../EditableTable';
+import { InitialLoader } from '../InitialLoader';
+import { LayoutSwitchButton } from '../LayoutSwitchButton';
+import type { ILayoutSwitchState } from '../../state/ILayoutSwitchState';
+
+const LazyEditableTable = React.lazy(() =>
+  import('../EditableTable').then((m) => ({
+    default: m.EditableTable as React.ComponentType<any>,
+  })),
+);
+
+export interface LayoutSwitchProps<T, F extends FiltersMap> {
+  state: ILayoutSwitchState<T, F>;
+  tableProps?: Omit<TableProps<T, F>, 'tableGridSwitchButton'>;
+  gridProps?: Omit<GridProps<T, F>, 'tableGridSwitchButton'>;
+  spreadsheetProps?: Omit<EditableTableProps<T, F>, 'tableGridSwitchButton'>;
+}
+
+function _LayoutSwitch<T, F extends FiltersMap>({
+  state,
+  tableProps,
+  gridProps,
+  spreadsheetProps,
+}: LayoutSwitchProps<T, F>) {
+  const { viewTypeState, initTask, toolbar } = state;
+  const isLoading = initTask.status.isIdle || initTask.status.isLoading;
+
+  // Recompute only when a prop flips between defined and undefined.
+  const availableOptions = useMemo(
+    () =>
+      viewTypeState.options.filter((option) => {
+        if (option === 'table') {
+          return !!tableProps;
+        }
+        if (option === 'grid') {
+          return !!gridProps;
+        }
+        if (option === 'spreadsheet') {
+          return !!spreadsheetProps;
+        }
+        return false;
+      }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [!!tableProps, !!gridProps, !!spreadsheetProps],
+  );
+
+  useEffect(() => state.init(), []);
+
+  // If the stored viewType is not among the available options (e.g. 'grid' was
+  // persisted but gridProps is not provided), persist the correction so the next
+  // load starts from a valid value. changeViewType also updates dataCapsule.
+  useEffect(() => {
+    if (
+      availableOptions.length > 0 &&
+      !availableOptions.includes(viewTypeState.viewType)
+    ) {
+      viewTypeState.changeViewType(availableOptions[0]!);
+    }
+  }, [availableOptions, viewTypeState.viewType]);
+
+  if (!availableOptions.length) {
+    console.error(
+      '[LayoutSwitch] At least one of tableProps, gridProps, or spreadsheetProps must be provided.',
+    );
+    return null;
+  }
+
+  const layoutSwitchButton = (
+    <LayoutSwitchButton state={viewTypeState} options={availableOptions} />
+  );
+
+  if (isLoading) {
+    return <InitialLoader dataHook="initial-loader" state={toolbar} />;
+  }
+
+  // If viewType is not yet available (loaded from storage but xProp absent),
+  // fall back locally without waiting for the correction effect to fire.
+  const activeView = availableOptions.includes(viewTypeState.viewType)
+    ? viewTypeState.viewType
+    : availableOptions[0];
+
+  if (activeView === 'table') {
+    return (
+      <div data-hook="layout-view-table" style={{ display: 'contents' }}>
+        <Table {...tableProps!} tableGridSwitchButton={layoutSwitchButton} />
+      </div>
+    );
+  }
+
+  if (activeView === 'grid') {
+    return (
+      <div data-hook="layout-view-grid" style={{ display: 'contents' }}>
+        <Grid {...gridProps!} tableGridSwitchButton={layoutSwitchButton} />
+      </div>
+    );
+  }
+
+  if (activeView === 'spreadsheet') {
+    return (
+      <div data-hook="layout-view-spreadsheet" style={{ display: 'contents' }}>
+        <Suspense
+          fallback={<InitialLoader dataHook="initial-loader" state={toolbar} />}
+        >
+          <LazyEditableTable
+            {...spreadsheetProps!}
+            tableGridSwitchButton={layoutSwitchButton}
+          />
+        </Suspense>
+      </div>
+    );
+  }
+
+  return null;
+}
+
+export const LayoutSwitch = observer(_LayoutSwitch);

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

@@ -0,0 +1,36 @@
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import { baseUniDriverFactory } from '../../unidriver';
+import { CollectionToolbarUniDriver } from '../CollectionToolbar/CollectionToolbar.uni.driver';
+import { TableUniDriver } from '../Table/Table.uni.driver';
+import { GridUniDriver } from '../Grid/Grid.uni.driver';
+import { EditableTableUniDriver } from '../EditableTable/EditableTable.uni.driver';
+
+export function LayoutSwitchUniDriver(base: UniDriver, body: UniDriver) {
+  const getToolbar = () =>
+    CollectionToolbarUniDriver(
+      base.$('[data-hook="collection-toolbar"]'),
+      body,
+    );
+
+  return {
+    ...baseUniDriverFactory(base),
+    wait: (timeout?: number) => base.wait(timeout),
+    /** Get the layout switch button */
+    getSwitchButton: () => getToolbar().getSwitchButton(),
+    /** Check if the table layout is currently shown */
+    isShowingTable: () => base.$('[data-hook="layout-view-table"]').exists(),
+    /** Check if the grid layout is currently shown */
+    isShowingGrid: () => base.$('[data-hook="layout-view-grid"]').exists(),
+    /** Check if the spreadsheet layout is currently shown */
+    isShowingSpreadsheet: () =>
+      base.$('[data-hook="layout-view-spreadsheet"]').exists(),
+    /** Get Table driver */
+    getTable: () => TableUniDriver(base, body),
+    /** Get Grid driver */
+    getGrid: () => GridUniDriver(base, body),
+    /** Get Spreadsheet (EditableTable) driver */
+    getSpreadsheet: () => EditableTableUniDriver(base, body),
+  };
+}
+
+export default LayoutSwitchUniDriver;

package/src/components/LayoutSwitch/index.ts

@@ -0,0 +1 @@
+export * from './LayoutSwitch';

package/src/components/LayoutSwitchButton/LayoutSwitchButton.tsx

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

package/src/components/LayoutSwitchButton/index.ts

@@ -0,0 +1 @@
+export * from './LayoutSwitchButton';

package/src/components/LayoutSwitchButton/layoutConfig.tsx

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "LoadingRow3074046361";
+var _namespace_ = "LoadingRow2728541301";
 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":"LoadingRow3074046361__root"};
-export var keyframes = {"gradientSwoosh":"LoadingRow3074046361__gradientSwoosh"}; 
+export var classes = {"root":"LoadingRow2728541301__root"};
+export var keyframes = {"gradientSwoosh":"LoadingRow2728541301__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_ = "MaxHeightText3524921945";
+var _namespace_ = "MaxHeightText3684570785";
 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":"MaxHeightText3524921945__root"};
+export var classes = {"root":"MaxHeightText3684570785__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_ = "MaxLines533725587";
+var _namespace_ = "MaxLines1301827869";
 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":"MaxLines533725587__root"};
+export var classes = {"root":"MaxLines1301827869__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "MultiBulkActionToolbar987391231";
+var _namespace_ = "MultiBulkActionToolbar2587023767";
 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":"MultiBulkActionToolbar987391231__root","leftGroupWrapper":"MultiBulkActionToolbar987391231__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar987391231__selectedCountItem","selectedCountText":"MultiBulkActionToolbar987391231__selectedCountText"};
+export var classes = {"root":"MultiBulkActionToolbar2587023767__root","leftGroupWrapper":"MultiBulkActionToolbar2587023767__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar2587023767__selectedCountItem","selectedCountText":"MultiBulkActionToolbar2587023767__selectedCountText"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "NestedTablePlaceholderStatesRow2052232166";
+var _namespace_ = "NestedTablePlaceholderStatesRow2688492260";
 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":"NestedTablePlaceholderStatesRow2052232166__root"};
+export var classes = {"root":"NestedTablePlaceholderStatesRow2688492260__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_ = "NestedTableRow2825305898";
+var _namespace_ = "NestedTableRow1130154746";
 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":"NestedTableRow2825305898__root","firstLevel":"NestedTableRow2825305898__firstLevel","placeholder":"NestedTableRow2825305898__placeholder","parentHovered":"NestedTableRow2825305898__parentHovered"};
+export var classes = {"root":"NestedTableRow1130154746__root","firstLevel":"NestedTableRow1130154746__firstLevel","placeholder":"NestedTableRow1130154746__placeholder","parentHovered":"NestedTableRow1130154746__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_ = "MultipleDragOverlayEffect1055905225";
+var _namespace_ = "MultipleDragOverlayEffect2404938392";
 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":"MultipleDragOverlayEffect1055905225__root"};
+export var classes = {"root":"MultipleDragOverlayEffect2404938392__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_ = "NestedTableDragAndDropRow1377215563";
+var _namespace_ = "NestedTableDragAndDropRow3036756031";
 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":"NestedTableDragAndDropRow1377215563__root"};
+export var classes = {"root":"NestedTableDragAndDropRow3036756031__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_ = "PickerContent3155415999";
+var _namespace_ = "PickerContent3300675913";
 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":"PickerContent3155415999__root"};
+export var classes = {"root":"PickerContent3300675913__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_ = "PickerContentAdditionalStep3594605053";
+var _namespace_ = "PickerContentAdditionalStep1136118037";
 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":"PickerContentAdditionalStep3594605053__root","titles":"PickerContentAdditionalStep3594605053__titles","suffix":"PickerContentAdditionalStep3594605053__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep1136118037__root","titles":"PickerContentAdditionalStep1136118037__titles","suffix":"PickerContentAdditionalStep1136118037__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_ = "PickerTableListItem2502883508";
+var _namespace_ = "PickerTableListItem2168263646";
 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":"PickerTableListItem2502883508__root"};
+export var classes = {"root":"PickerTableListItem2168263646__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_ = "ScrollableContent554818587";
+var _namespace_ = "ScrollableContent945571623";
 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":"ScrollableContent554818587__root"};
+export var classes = {"root":"ScrollableContent945571623__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_ = "SkeletonCard3797804032";
+var _namespace_ = "SkeletonCard372245006";
 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":"SkeletonCard3797804032__root","headerLoading":"SkeletonCard3797804032__headerLoading"};
+export var classes = {"root":"SkeletonCard372245006__root","headerLoading":"SkeletonCard372245006__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_ = "SlidingModal2756128921";
+var _namespace_ = "SlidingModal3393023090";
 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":"SlidingModal2756128921__root"};
+export var classes = {"root":"SlidingModal3393023090__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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,
+      }}
+    />
   );
 }