@wix/patterns 0.8.0

package/dist/cjs/components/TableGridSwitch/TableGridSwitchDragAndDrop.js

@@ -0,0 +1,11 @@
+"use strict";
+
+exports.__esModule = true;
+exports.TableGridSwitchDragAndDrop = void 0;
+var _GridDragAndDrop = require("../GridDragAndDropDndKit/GridDragAndDrop");
+var _TableDragAndDrop = require("../TableDragAndDrop");
+const TableGridSwitchDragAndDrop = exports.TableGridSwitchDragAndDrop = {
+  grid: _GridDragAndDrop.GridDragAndDrop,
+  table: _TableDragAndDrop.TableDragAndDrop
+};
+//# sourceMappingURL=TableGridSwitchDragAndDrop.js.map

package/dist/cjs/components/TableGridSwitch/TableGridSwitchDragAndDrop.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_GridDragAndDrop","require","_TableDragAndDrop","TableGridSwitchDragAndDrop","exports","grid","GridDragAndDrop","table","TableDragAndDrop"],"sources":["../../../../src/components/TableGridSwitch/TableGridSwitchDragAndDrop.ts"],"sourcesContent":["import { GridDragAndDrop } from '../GridDragAndDropDndKit/GridDragAndDrop';\nimport { TableDragAndDrop } from '../TableDragAndDrop';\n\nexport const TableGridSwitchDragAndDrop = {\n  grid: GridDragAndDrop,\n  table: TableDragAndDrop,\n};\n"],"mappings":";;;;AAAA,IAAAA,gBAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAD,OAAA;AAEO,MAAME,0BAA0B,GAAAC,OAAA,CAAAD,0BAAA,GAAG;EACxCE,IAAI,EAAEC,gCAAe;EACrBC,KAAK,EAAEC;AACT,CAAC"}

package/dist/cjs/components/TableGridSwitchButton/TableGridSwitchButton.js

@@ -0,0 +1,75 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.TableGridSwitchButton = void 0;
+var _mobxReactLite = require("mobx-react-lite");
+var _react = _interopRequireDefault(require("react"));
+var _designSystem = require("@wix/design-system");
+var _wixUiIconsCommon = require("@wix/wix-ui-icons-common");
+var _react2 = require("@wix/bex-core/react");
+var _jsxFileName = "/home/builduser/work/db7ea24852bc3350/packages/cairo/dist/cjs/components/TableGridSwitchButton/TableGridSwitchButton.tsx";
+function _TableGridSwitchButton(props) {
+  const {
+    translate: t
+  } = (0, _react2.useWixPatternsContainer)();
+  const {
+    state
+  } = props;
+  const {
+    viewType
+  } = state;
+  return /*#__PURE__*/_react.default.createElement(_designSystem.SegmentedToggle, {
+    size: "small",
+    dataHook: "table-grid-switch-toggle-button",
+    selected: viewType,
+    onClick: (_, value) => {
+      if (state.viewType === value) {
+        return;
+      }
+      state.changeViewType(value);
+    },
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 20,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.SegmentedToggle.Icon, {
+    value: "grid",
+    dataHook: "toggle-option-grid",
+    tooltipText: t('cairo.table.gridView'),
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 31,
+      columnNumber: 7
+    }
+  }, /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.LayoutGallery, {
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 36,
+      columnNumber: 9
+    }
+  })), /*#__PURE__*/_react.default.createElement(_designSystem.SegmentedToggle.Icon, {
+    value: "table",
+    dataHook: "toggle-option-table",
+    tooltipText: t('cairo.table.listView'),
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 38,
+      columnNumber: 7
+    }
+  }, /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.LayoutList, {
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 43,
+      columnNumber: 9
+    }
+  })));
+}
+const TableGridSwitchButton = exports.TableGridSwitchButton = (0, _mobxReactLite.observer)(_TableGridSwitchButton);
+//# sourceMappingURL=TableGridSwitchButton.js.map

package/dist/cjs/components/TableGridSwitchButton/TableGridSwitchButton.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_mobxReactLite","require","_react","_interopRequireDefault","_designSystem","_wixUiIconsCommon","_react2","_jsxFileName","_TableGridSwitchButton","props","translate","t","useWixPatternsContainer","state","viewType","default","createElement","SegmentedToggle","size","dataHook","selected","onClick","_","value","changeViewType","__self","__source","fileName","lineNumber","columnNumber","Icon","tooltipText","LayoutGallery","LayoutList","TableGridSwitchButton","exports","observer"],"sources":["../../../../src/components/TableGridSwitchButton/TableGridSwitchButton.tsx"],"sourcesContent":["import { observer } from 'mobx-react-lite';\nimport React from 'react';\nimport { SegmentedToggle } from '@wix/design-system';\nimport { LayoutGallery, LayoutList } from '@wix/wix-ui-icons-common';\nimport { useWixPatternsContainer } from '@wix/bex-core/react';\n\nexport interface TableGridSwitchButtonProps {\n  state: {\n    viewType: 'table' | 'grid';\n    changeViewType: (viewType: string) => void;\n  };\n}\n\nfunction _TableGridSwitchButton(props: TableGridSwitchButtonProps) {\n  const { translate: t } = useWixPatternsContainer();\n  const { state } = props;\n  const { viewType } = state;\n\n  return (\n    <SegmentedToggle\n      size=\"small\"\n      dataHook=\"table-grid-switch-toggle-button\"\n      selected={viewType}\n      onClick={(_, value) => {\n        if (state.viewType === value) {\n          return;\n        }\n        state.changeViewType(value);\n      }}\n    >\n      <SegmentedToggle.Icon\n        value=\"grid\"\n        dataHook=\"toggle-option-grid\"\n        tooltipText={t('cairo.table.gridView')}\n      >\n        <LayoutGallery />\n      </SegmentedToggle.Icon>\n      <SegmentedToggle.Icon\n        value=\"table\"\n        dataHook=\"toggle-option-table\"\n        tooltipText={t('cairo.table.listView')}\n      >\n        <LayoutList />\n      </SegmentedToggle.Icon>\n    </SegmentedToggle>\n  );\n}\n\nexport const TableGridSwitchButton = observer(_TableGridSwitchButton);\n"],"mappings":";;;;;AAAA,IAAAA,cAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,aAAA,GAAAH,OAAA;AACA,IAAAI,iBAAA,GAAAJ,OAAA;AACA,IAAAK,OAAA,GAAAL,OAAA;AAA8D,IAAAM,YAAA;AAS9D,SAASC,sBAAsBA,CAACC,KAAiC,EAAE;EACjE,MAAM;IAAEC,SAAS,EAAEC;EAAE,CAAC,GAAG,IAAAC,+BAAuB,EAAC,CAAC;EAClD,MAAM;IAAEC;EAAM,CAAC,GAAGJ,KAAK;EACvB,MAAM;IAAEK;EAAS,CAAC,GAAGD,KAAK;EAE1B,oBACEX,MAAA,CAAAa,OAAA,CAAAC,aAAA,CAACZ,aAAA,CAAAa,eAAe;IACdC,IAAI,EAAC,OAAO;IACZC,QAAQ,EAAC,iCAAiC;IAC1CC,QAAQ,EAAEN,QAAS;IACnBO,OAAO,EAAEA,CAACC,CAAC,EAAEC,KAAK,KAAK;MACrB,IAAIV,KAAK,CAACC,QAAQ,KAAKS,KAAK,EAAE;QAC5B;MACF;MACAV,KAAK,CAACW,cAAc,CAACD,KAAK,CAAC;IAC7B,CAAE;IAAAE,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAApB,YAAA;MAAAqB,UAAA;MAAAC,YAAA;IAAA;EAAA,gBAEF3B,MAAA,CAAAa,OAAA,CAAAC,aAAA,CAACZ,aAAA,CAAAa,eAAe,CAACa,IAAI;IACnBP,KAAK,EAAC,MAAM;IACZJ,QAAQ,EAAC,oBAAoB;IAC7BY,WAAW,EAAEpB,CAAC,CAAC,sBAAsB,CAAE;IAAAc,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAApB,YAAA;MAAAqB,UAAA;MAAAC,YAAA;IAAA;EAAA,gBAEvC3B,MAAA,CAAAa,OAAA,CAAAC,aAAA,CAACX,iBAAA,CAAA2B,aAAa;IAAAP,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAApB,YAAA;MAAAqB,UAAA;MAAAC,YAAA;IAAA;EAAA,CAAE,CACI,CAAC,eACvB3B,MAAA,CAAAa,OAAA,CAAAC,aAAA,CAACZ,aAAA,CAAAa,eAAe,CAACa,IAAI;IACnBP,KAAK,EAAC,OAAO;IACbJ,QAAQ,EAAC,qBAAqB;IAC9BY,WAAW,EAAEpB,CAAC,CAAC,sBAAsB,CAAE;IAAAc,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAApB,YAAA;MAAAqB,UAAA;MAAAC,YAAA;IAAA;EAAA,gBAEvC3B,MAAA,CAAAa,OAAA,CAAAC,aAAA,CAACX,iBAAA,CAAA4B,UAAU;IAAAR,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAApB,YAAA;MAAAqB,UAAA;MAAAC,YAAA;IAAA;EAAA,CAAE,CACO,CACP,CAAC;AAEtB;AAEO,MAAMK,qBAAqB,GAAAC,OAAA,CAAAD,qBAAA,GAAG,IAAAE,uBAAQ,EAAC5B,sBAAsB,CAAC"}

package/dist/cjs/components/TableGridSwitchButton/TableGridSwitchButton.uni.driver.js

@@ -0,0 +1,16 @@
+"use strict";
+
+exports.__esModule = true;
+exports.TableGridSwitchButtonUniDriver = TableGridSwitchButtonUniDriver;
+exports.default = void 0;
+var _unidriver = require("@wix/design-system/dist/testkit/unidriver");
+function TableGridSwitchButtonUniDriver(base, body) {
+  const getSegmented = () => (0, _unidriver.SegmentedToggleUniDriver)(base, body);
+  return {
+    ...getSegmented(),
+    clickTableButton: () => base.$$(`[data-hook="toggle-icon"]`).get(1).click(),
+    clickGridButton: () => base.$$(`[data-hook="toggle-icon"]`).get(0).click()
+  };
+}
+var _default = exports.default = TableGridSwitchButtonUniDriver;
+//# sourceMappingURL=TableGridSwitchButton.uni.driver.js.map

package/dist/cjs/components/TableGridSwitchButton/TableGridSwitchButton.uni.driver.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_unidriver","require","TableGridSwitchButtonUniDriver","base","body","getSegmented","SegmentedToggleUniDriver","clickTableButton","$$","get","click","clickGridButton","_default","exports","default"],"sources":["../../../../src/components/TableGridSwitchButton/TableGridSwitchButton.uni.driver.ts"],"sourcesContent":["import { SegmentedToggleUniDriver } from '@wix/design-system/dist/testkit/unidriver';\nimport { UniDriver } from '@wix/wix-ui-test-utils/unidriver';\n\nexport function TableGridSwitchButtonUniDriver(\n  base: UniDriver,\n  body: UniDriver,\n) {\n  const getSegmented = () => SegmentedToggleUniDriver(base, body);\n\n  return {\n    ...getSegmented(),\n    clickTableButton: () => base.$$(`[data-hook=\"toggle-icon\"]`).get(1).click(),\n    clickGridButton: () => base.$$(`[data-hook=\"toggle-icon\"]`).get(0).click(),\n  };\n}\n\nexport default TableGridSwitchButtonUniDriver;\n"],"mappings":";;;;;AAAA,IAAAA,UAAA,GAAAC,OAAA;AAGO,SAASC,8BAA8BA,CAC5CC,IAAe,EACfC,IAAe,EACf;EACA,MAAMC,YAAY,GAAGA,CAAA,KAAM,IAAAC,mCAAwB,EAACH,IAAI,EAAEC,IAAI,CAAC;EAE/D,OAAO;IACL,GAAGC,YAAY,CAAC,CAAC;IACjBE,gBAAgB,EAAEA,CAAA,KAAMJ,IAAI,CAACK,EAAE,CAAE,2BAA0B,CAAC,CAACC,GAAG,CAAC,CAAC,CAAC,CAACC,KAAK,CAAC,CAAC;IAC3EC,eAAe,EAAEA,CAAA,KAAMR,IAAI,CAACK,EAAE,CAAE,2BAA0B,CAAC,CAACC,GAAG,CAAC,CAAC,CAAC,CAACC,KAAK,CAAC;EAC3E,CAAC;AACH;AAAC,IAAAE,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEcZ,8BAA8B"}

package/dist/cjs/components/TableGridSwitchButton/index.js

@@ -0,0 +1,10 @@
+"use strict";
+
+exports.__esModule = true;
+var _TableGridSwitchButton = require("./TableGridSwitchButton");
+Object.keys(_TableGridSwitchButton).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _TableGridSwitchButton[key]) return;
+  exports[key] = _TableGridSwitchButton[key];
+});
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/TableGridSwitchButton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_TableGridSwitchButton","require","Object","keys","forEach","key","exports"],"sources":["../../../../src/components/TableGridSwitchButton/index.ts"],"sourcesContent":["export * from './TableGridSwitchButton';\n"],"mappings":";;;AAAA,IAAAA,sBAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAH,sBAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAL,sBAAA,CAAAK,GAAA;EAAAC,OAAA,CAAAD,GAAA,IAAAL,sBAAA,CAAAK,GAAA;AAAA"}

package/dist/cjs/components/TableGridSwitchFolders/TableGridSwitchFolders.js

@@ -0,0 +1,73 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.TableGridSwitchFolders = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireWildcard(require("react"));
+var _mobxReactLite = require("mobx-react-lite");
+var _TableGridSwitchButton = require("../TableGridSwitchButton");
+var _GridFolders = require("../Grid/GridFolders");
+var _TableFolders = require("../TableFolders");
+var _InitialLoader = require("../InitialLoader");
+var _jsxFileName = "/home/builduser/work/db7ea24852bc3350/packages/cairo/dist/cjs/components/TableGridSwitchFolders/TableGridSwitchFolders.tsx";
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _TableGridSwitchFolders(props) {
+  const {
+    state
+  } = props;
+  const {
+    gridFoldersState,
+    tableFoldersState,
+    toolbar
+  } = state;
+  const tableGridSwitchButton = /*#__PURE__*/_react.default.createElement(_TableGridSwitchButton.TableGridSwitchButton, {
+    state: state.viewTypeState,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 52,
+      columnNumber: 5
+    }
+  });
+  (0, _react.useEffect)(() => {
+    state.init();
+  }, []);
+  const {
+    initTask: {
+      status
+    }
+  } = state;
+  const isLoading = status.isIdle || status.isLoading;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isLoading ? /*#__PURE__*/_react.default.createElement(_InitialLoader.InitialLoader, {
+    dataHook: "initial-loader",
+    state: toolbar,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 66,
+      columnNumber: 9
+    }
+  }) : state.viewType === 'grid' ? /*#__PURE__*/_react.default.createElement(_GridFolders.GridFolders, (0, _extends2.default)({}, props, {
+    tableGridSwitchButton: tableGridSwitchButton,
+    state: gridFoldersState,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 68,
+      columnNumber: 9
+    }
+  })) : /*#__PURE__*/_react.default.createElement(_TableFolders.TableFolders, (0, _extends2.default)({}, props, {
+    tableGridSwitchButton: tableGridSwitchButton,
+    state: tableFoldersState,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 74,
+      columnNumber: 9
+    }
+  })));
+}
+const TableGridSwitchFolders = exports.TableGridSwitchFolders = (0, _mobxReactLite.observer)(_TableGridSwitchFolders);
+//# sourceMappingURL=TableGridSwitchFolders.js.map

package/dist/cjs/components/TableGridSwitchFolders/TableGridSwitchFolders.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_mobxReactLite","_TableGridSwitchButton","_GridFolders","_TableFolders","_InitialLoader","_jsxFileName","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","_TableGridSwitchFolders","props","state","gridFoldersState","tableFoldersState","toolbar","tableGridSwitchButton","createElement","TableGridSwitchButton","viewTypeState","__self","__source","fileName","lineNumber","columnNumber","useEffect","init","initTask","status","isLoading","isIdle","Fragment","InitialLoader","dataHook","viewType","GridFolders","_extends2","TableFolders","TableGridSwitchFolders","exports","observer"],"sources":["../../../../src/components/TableGridSwitchFolders/TableGridSwitchFolders.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport { FiltersMap } from '@wix/bex-core';\nimport { observer } from 'mobx-react-lite';\nimport { TableGridSwitchButton } from '../TableGridSwitchButton';\nimport {\n  GridFolders,\n  GridFoldersBasePropsWithoutPreset,\n} from '../Grid/GridFolders';\nimport { TableGridSwitchFoldersState } from '../../state';\nimport { GridFoldersPresetProps } from '../Grid/GridFolders.types';\nimport { TableFolders, TableFoldersProps } from '../TableFolders';\nimport { InitialLoader } from '../InitialLoader';\n\nexport interface TableGridSwitchFoldersBaseProps<\n  T1,\n  F1 extends FiltersMap,\n  T2,\n  F2 extends FiltersMap,\n> extends Omit<\n      GridFoldersBasePropsWithoutPreset<T1, F1, T2, F2>,\n      'state' | 'dragAndDrop' | 'tableGridSwitchButton'\n    >,\n    Omit<\n      TableFoldersProps<T1, F1, T2, F2>,\n      'state' | 'dragAndDrop' | 'tableGridSwitchButton'\n    > {\n  /** A TableGridSwitchFoldersState instance created using [useTableGridSwitchFoldersState](./?path=/story/common-hooks--usetablegridswitchfolders). */\n  state: TableGridSwitchFoldersState<T1, F1, T2, F2>;\n}\n\nexport type TableGridSwitchFoldersProps<\n  T1,\n  F1 extends FiltersMap,\n  T2,\n  F2 extends FiltersMap,\n> = GridFoldersPresetProps<\n  T1,\n  T2,\n  TableGridSwitchFoldersBaseProps<T1, F1, T2, F2>\n>;\n\nfunction _TableGridSwitchFolders<\n  T1,\n  F1 extends FiltersMap,\n  T2,\n  F2 extends FiltersMap,\n>(props: TableGridSwitchFoldersProps<T1, F1, T2, F2>) {\n  const { state } = props;\n  const { gridFoldersState, tableFoldersState, toolbar } = state;\n\n  const tableGridSwitchButton = (\n    <TableGridSwitchButton state={state.viewTypeState} />\n  );\n  useEffect(() => {\n    state.init();\n  }, []);\n\n  const {\n    initTask: { status },\n  } = state;\n\n  const isLoading = status.isIdle || status.isLoading;\n  return (\n    <>\n      {isLoading ? (\n        <InitialLoader dataHook=\"initial-loader\" state={toolbar} />\n      ) : state.viewType === 'grid' ? (\n        <GridFolders\n          {...props}\n          tableGridSwitchButton={tableGridSwitchButton}\n          state={gridFoldersState}\n        />\n      ) : (\n        <TableFolders\n          {...props}\n          tableGridSwitchButton={tableGridSwitchButton}\n          state={tableFoldersState}\n        />\n      )}\n    </>\n  );\n}\n\nexport const TableGridSwitchFolders = observer(_TableGridSwitchFolders);\n"],"mappings":"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"}

package/dist/cjs/components/TableGridSwitchFolders/TableGridSwitchFolders.uni.driver.js

@@ -0,0 +1,43 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.TableGridSwitchFoldersUniDriver = TableGridSwitchFoldersUniDriver;
+exports.default = void 0;
+var _unidriver = require("../../unidriver");
+var _CollectionToolbarUni = require("../CollectionToolbar/CollectionToolbar.uni.driver");
+var _TableFoldersUni = _interopRequireDefault(require("../TableFolders/TableFolders.uni.driver"));
+var _GridFoldersUni = _interopRequireDefault(require("../Grid/GridFolders.uni.driver"));
+var _SummaryBarUni = require("../SummaryBar/SummaryBar.uni.driver");
+function TableGridSwitchFoldersUniDriver(base, body) {
+  const getToolbar = () => (0, _CollectionToolbarUni.CollectionToolbarUniDriver)(base.$('[data-hook="collection-toolbar"]'), body);
+  const getTable = () => (0, _TableFoldersUni.default)(base, body);
+  const getGrid = () => (0, _GridFoldersUni.default)(base, body);
+  const getSummaryBar = () => (0, _SummaryBarUni.SummaryBarUniDriver)(base, body);
+  return {
+    ...(0, _unidriver.baseUniDriverFactory)(base),
+    /**
+     * Wait until root element to exist
+     * @param timeout - time to wait until bailing
+     */
+    wait: timeout => base.wait(timeout),
+    /** Get layout switch button */
+    getSwitchButton: () => getToolbar().getSwitchButton(),
+    /** Get layout switch button divider */
+    getSwitchButtonDivider: () => getToolbar().getSwitchButtonDivider(),
+    /** Get [TableFoldersUniDriver](./?path=/story/common-components--tablefolders) driver */
+    getTable,
+    /** Get [GridFoldersUniDriver](./?path=/story/common-components--gridfolders) driver */
+    getGrid,
+    /** Indicates grid is currently shown */
+    isShowingGrid: () => base.$(`[data-hook="toolbar-collection-content"]`).exists(),
+    /** Indicates table is currently shown */
+    isShowingTable: async () => !(await base.$(`[data-hook="toolbar-collection-content"]`).exists()),
+    /**
+     * Gets collection summary bar
+     */
+    getSummaryBar
+  };
+}
+var _default = exports.default = TableGridSwitchFoldersUniDriver;
+//# sourceMappingURL=TableGridSwitchFolders.uni.driver.js.map

package/dist/cjs/components/TableGridSwitchFolders/TableGridSwitchFolders.uni.driver.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_unidriver","require","_CollectionToolbarUni","_TableFoldersUni","_interopRequireDefault","_GridFoldersUni","_SummaryBarUni","TableGridSwitchFoldersUniDriver","base","body","getToolbar","CollectionToolbarUniDriver","$","getTable","TableFoldersUniDriver","getGrid","GridFoldersUniDriver","getSummaryBar","SummaryBarUniDriver","baseUniDriverFactory","wait","timeout","getSwitchButton","getSwitchButtonDivider","isShowingGrid","exists","isShowingTable","_default","exports","default"],"sources":["../../../../src/components/TableGridSwitchFolders/TableGridSwitchFolders.uni.driver.ts"],"sourcesContent":["import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';\nimport { baseUniDriverFactory } from '../../unidriver';\nimport { CollectionToolbarUniDriver } from '../CollectionToolbar/CollectionToolbar.uni.driver';\nimport TableFoldersUniDriver from '../TableFolders/TableFolders.uni.driver';\nimport GridFoldersUniDriver from '../Grid/GridFolders.uni.driver';\nimport { SummaryBarUniDriver } from '../SummaryBar/SummaryBar.uni.driver';\n\nexport function TableGridSwitchFoldersUniDriver(\n  base: UniDriver,\n  body: UniDriver,\n) {\n  const getToolbar = () =>\n    CollectionToolbarUniDriver(\n      base.$('[data-hook=\"collection-toolbar\"]'),\n      body,\n    );\n\n  const getTable = () => TableFoldersUniDriver(base, body);\n  const getGrid = () => GridFoldersUniDriver(base, body);\n  const getSummaryBar = () => SummaryBarUniDriver(base, body);\n\n  return {\n    ...baseUniDriverFactory(base),\n    /**\n     * Wait until root element to exist\n     * @param timeout - time to wait until bailing\n     */\n    wait: (timeout?: number) => base.wait(timeout),\n    /** Get layout switch button */\n    getSwitchButton: () => getToolbar().getSwitchButton(),\n    /** Get layout switch button divider */\n    getSwitchButtonDivider: () => getToolbar().getSwitchButtonDivider(),\n    /** Get [TableFoldersUniDriver](./?path=/story/common-components--tablefolders) driver */\n    getTable,\n    /** Get [GridFoldersUniDriver](./?path=/story/common-components--gridfolders) driver */\n    getGrid,\n    /** Indicates grid is currently shown */\n    isShowingGrid: () =>\n      base.$(`[data-hook=\"toolbar-collection-content\"]`).exists(),\n    /** Indicates table is currently shown */\n    isShowingTable: async () =>\n      !(await base.$(`[data-hook=\"toolbar-collection-content\"]`).exists()),\n    /**\n     * Gets collection summary bar\n     */\n    getSummaryBar,\n  };\n}\n\nexport default TableGridSwitchFoldersUniDriver;\n"],"mappings":";;;;;;AACA,IAAAA,UAAA,GAAAC,OAAA;AACA,IAAAC,qBAAA,GAAAD,OAAA;AACA,IAAAE,gBAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,eAAA,GAAAD,sBAAA,CAAAH,OAAA;AACA,IAAAK,cAAA,GAAAL,OAAA;AAEO,SAASM,+BAA+BA,CAC7CC,IAAe,EACfC,IAAe,EACf;EACA,MAAMC,UAAU,GAAGA,CAAA,KACjB,IAAAC,gDAA0B,EACxBH,IAAI,CAACI,CAAC,CAAC,kCAAkC,CAAC,EAC1CH,IACF,CAAC;EAEH,MAAMI,QAAQ,GAAGA,CAAA,KAAM,IAAAC,wBAAqB,EAACN,IAAI,EAAEC,IAAI,CAAC;EACxD,MAAMM,OAAO,GAAGA,CAAA,KAAM,IAAAC,uBAAoB,EAACR,IAAI,EAAEC,IAAI,CAAC;EACtD,MAAMQ,aAAa,GAAGA,CAAA,KAAM,IAAAC,kCAAmB,EAACV,IAAI,EAAEC,IAAI,CAAC;EAE3D,OAAO;IACL,GAAG,IAAAU,+BAAoB,EAACX,IAAI,CAAC;IAC7B;AACJ;AACA;AACA;IACIY,IAAI,EAAGC,OAAgB,IAAKb,IAAI,CAACY,IAAI,CAACC,OAAO,CAAC;IAC9C;IACAC,eAAe,EAAEA,CAAA,KAAMZ,UAAU,CAAC,CAAC,CAACY,eAAe,CAAC,CAAC;IACrD;IACAC,sBAAsB,EAAEA,CAAA,KAAMb,UAAU,CAAC,CAAC,CAACa,sBAAsB,CAAC,CAAC;IACnE;IACAV,QAAQ;IACR;IACAE,OAAO;IACP;IACAS,aAAa,EAAEA,CAAA,KACbhB,IAAI,CAACI,CAAC,CAAE,0CAAyC,CAAC,CAACa,MAAM,CAAC,CAAC;IAC7D;IACAC,cAAc,EAAE,MAAAA,CAAA,KACd,EAAE,MAAMlB,IAAI,CAACI,CAAC,CAAE,0CAAyC,CAAC,CAACa,MAAM,CAAC,CAAC,CAAC;IACtE;AACJ;AACA;IACIR;EACF,CAAC;AACH;AAAC,IAAAU,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEctB,+BAA+B"}

package/dist/cjs/components/TablePlaceholderStates/TablePlaceholderStates.js

@@ -0,0 +1,49 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.TablePlaceholderStates = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _mobxReactLite = require("mobx-react-lite");
+var _InitialLoader = require("../InitialLoader");
+var _ToolbarCollectionContext = require("../ToolbarCollectionContext");
+var _TableSkeleton = require("../TableSkeleton/TableSkeleton");
+var _PlaceholderStatesBase = require("../PlaceholderStates/PlaceholderStatesBase");
+var _jsxFileName = "/home/builduser/work/db7ea24852bc3350/packages/cairo/dist/cjs/components/TablePlaceholderStates/TablePlaceholderStates.tsx";
+function _TablePlaceholderStates(props) {
+  var _state$container$inte;
+  const state = (0, _ToolbarCollectionContext.useToolbarCollectionContext)();
+  const tableSkeletonEnabled = (_state$container$inte = state.container.internalExperiments) == null ? void 0 : _state$container$inte.enabled('specs.cairo.TableSkeletonLoader');
+  return /*#__PURE__*/_react.default.createElement(_PlaceholderStatesBase.PlaceholderStatesBase, (0, _extends2.default)({
+    loadingState: tableSkeletonEnabled ? /*#__PURE__*/_react.default.createElement(_TableSkeleton.TableSkeleton, {
+      dataHook: "placeholder-states-loading-state",
+      state: state,
+      rowVerticalPadding: props.rowVerticalPadding,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 39,
+        columnNumber: 11
+      }
+    }) : /*#__PURE__*/_react.default.createElement(_InitialLoader.InitialLoader, {
+      dataHook: "placeholder-states-loading-state",
+      state: state,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 45,
+        columnNumber: 11
+      }
+    })
+  }, props, {
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 36,
+      columnNumber: 5
+    }
+  }));
+}
+const TablePlaceholderStates = exports.TablePlaceholderStates = (0, _mobxReactLite.observer)(_TablePlaceholderStates);
+//# sourceMappingURL=TablePlaceholderStates.js.map

package/dist/cjs/components/TablePlaceholderStates/TablePlaceholderStates.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_mobxReactLite","_InitialLoader","_ToolbarCollectionContext","_TableSkeleton","_PlaceholderStatesBase","_jsxFileName","_TablePlaceholderStates","props","_state$container$inte","state","useToolbarCollectionContext","tableSkeletonEnabled","container","internalExperiments","enabled","default","createElement","PlaceholderStatesBase","_extends2","loadingState","TableSkeleton","dataHook","rowVerticalPadding","__self","__source","fileName","lineNumber","columnNumber","InitialLoader","TablePlaceholderStates","exports","observer"],"sources":["../../../../src/components/TablePlaceholderStates/TablePlaceholderStates.tsx"],"sourcesContent":["import React from 'react';\nimport { observer } from 'mobx-react-lite';\nimport { InitialLoader } from '../InitialLoader';\nimport { useToolbarCollectionContext } from '../ToolbarCollectionContext';\nimport { QueryResultStatusError, TaskState } from '@wix/bex-core';\nimport { TableSkeleton } from '../TableSkeleton/TableSkeleton';\nimport {\n  PlaceholderStatesBase,\n  PlaceholderStatesBaseProps,\n} from '../PlaceholderStates/PlaceholderStatesBase';\nimport { TableProps } from '@wix/design-system';\n\nexport interface TablePlaceholderStatesProps {\n  state: {\n    initTask: TaskState<unknown>;\n    showLoadingState: boolean;\n    showEmptyState: boolean;\n    showErrorState: boolean;\n    errorStatus: QueryResultStatusError<unknown, unknown> | null | undefined;\n    retryErrorState: () => void;\n  };\n  renderError?: PlaceholderStatesBaseProps['renderError'];\n  renderEmptyState?: PlaceholderStatesBaseProps['renderEmptyState'];\n  topNotification?: PlaceholderStatesBaseProps['topNotification'];\n  children?: PlaceholderStatesBaseProps['children'];\n  rowVerticalPadding?: TableProps['rowVerticalPadding'];\n}\n\nfunction _TablePlaceholderStates(props: TablePlaceholderStatesProps) {\n  const state = useToolbarCollectionContext();\n  const tableSkeletonEnabled = state.container.internalExperiments?.enabled(\n    'specs.cairo.TableSkeletonLoader',\n  );\n\n  return (\n    <PlaceholderStatesBase\n      loadingState={\n        tableSkeletonEnabled ? (\n          <TableSkeleton\n            dataHook=\"placeholder-states-loading-state\"\n            state={state}\n            rowVerticalPadding={props.rowVerticalPadding}\n          />\n        ) : (\n          <InitialLoader\n            dataHook=\"placeholder-states-loading-state\"\n            state={state}\n          />\n        )\n      }\n      {...props}\n    />\n  );\n}\n\nexport const TablePlaceholderStates = observer(_TablePlaceholderStates);\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,cAAA,GAAAD,OAAA;AACA,IAAAE,cAAA,GAAAF,OAAA;AACA,IAAAG,yBAAA,GAAAH,OAAA;AAEA,IAAAI,cAAA,GAAAJ,OAAA;AACA,IAAAK,sBAAA,GAAAL,OAAA;AAGoD,IAAAM,YAAA;AAmBpD,SAASC,uBAAuBA,CAACC,KAAkC,EAAE;EAAA,IAAAC,qBAAA;EACnE,MAAMC,KAAK,GAAG,IAAAC,qDAA2B,EAAC,CAAC;EAC3C,MAAMC,oBAAoB,IAAAH,qBAAA,GAAGC,KAAK,CAACG,SAAS,CAACC,mBAAmB,qBAAnCL,qBAAA,CAAqCM,OAAO,CACvE,iCACF,CAAC;EAED,oBACEjB,MAAA,CAAAkB,OAAA,CAAAC,aAAA,CAACZ,sBAAA,CAAAa,qBAAqB,MAAAC,SAAA,CAAAH,OAAA;IACpBI,YAAY,EACVR,oBAAoB,gBAClBd,MAAA,CAAAkB,OAAA,CAAAC,aAAA,CAACb,cAAA,CAAAiB,aAAa;MACZC,QAAQ,EAAC,kCAAkC;MAC3CZ,KAAK,EAAEA,KAAM;MACba,kBAAkB,EAAEf,KAAK,CAACe,kBAAmB;MAAAC,MAAA;MAAAC,QAAA;QAAAC,QAAA,EAAApB,YAAA;QAAAqB,UAAA;QAAAC,YAAA;MAAA;IAAA,CAC9C,CAAC,gBAEF9B,MAAA,CAAAkB,OAAA,CAAAC,aAAA,CAACf,cAAA,CAAA2B,aAAa;MACZP,QAAQ,EAAC,kCAAkC;MAC3CZ,KAAK,EAAEA,KAAM;MAAAc,MAAA;MAAAC,QAAA;QAAAC,QAAA,EAAApB,YAAA;QAAAqB,UAAA;QAAAC,YAAA;MAAA;IAAA,CACd;EAEJ,GACGpB,KAAK;IAAAgB,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAApB,YAAA;MAAAqB,UAAA;MAAAC,YAAA;IAAA;EAAA,EACV,CAAC;AAEN;AAEO,MAAME,sBAAsB,GAAAC,OAAA,CAAAD,sBAAA,GAAG,IAAAE,uBAAQ,EAACzB,uBAAuB,CAAC"}

package/dist/cjs/components/TableSkeleton/TableSkeleton.js

@@ -0,0 +1,132 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.TableSkeleton = void 0;
+exports._TableSkeleton = _TableSkeleton;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireWildcard(require("react"));
+var _designSystem = require("@wix/design-system");
+var _state = require("../../state");
+var _mobxReactLite = require("mobx-react-lite");
+var _jsxFileName = "/home/builduser/work/db7ea24852bc3350/packages/cairo/dist/cjs/components/TableSkeleton/TableSkeleton.tsx";
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _TableSkeleton(props) {
+  const {
+    state,
+    dataHook,
+    rowsCount = 7,
+    ...rest
+  } = props;
+  const [{
+    columnCount,
+    minItemWidth,
+    itemsContentWidth
+  }] = (0, _react.useState)(() => new _state.ResponsiveColumnsState({
+    gap: 24,
+    minItemWidth: 192,
+    rectState: state.toolbarRect,
+    containerPadding: 48
+  }));
+  const data = (0, _react.useMemo)(() => new Array(rowsCount).fill(null).map((_, i) => ({
+    id: `skeleton-row-${i}`
+  })), [rowsCount]);
+  const columns = (0, _react.useMemo)(() => new Array(columnCount).fill(null).map((_, i) => ({
+    title: '',
+    key: `skeleton-column-${i}`,
+    dataHook: `skeleton-column-${i}`,
+    render: () => /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+      direction: "vertical",
+      width: "100%",
+      minWidth: `${minItemWidth}px`,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 51,
+        columnNumber: 11
+      }
+    }, /*#__PURE__*/_react.default.createElement(_designSystem.SkeletonGroup, {
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 52,
+        columnNumber: 13
+      }
+    }, /*#__PURE__*/_react.default.createElement(_designSystem.SkeletonLine, {
+      width: "100%",
+      marginTop: "SP1",
+      marginBottom: "SP1",
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 53,
+        columnNumber: 15
+      }
+    })))
+  })), [columnCount]);
+  const [TrElementType] = (0, _react.useState)(() => /*#__PURE__*/(0, _react.forwardRef)(({
+    rowData: _rowData,
+    ...trProps
+  }, ref) => {
+    // <TableSkeleton/> is rendered inside the main <Table/> component, so we need to remove the data-table-row attribute from the <tr/> element to make testkit not to consider skeleton rows as real rows
+    return /*#__PURE__*/_react.default.createElement("tr", (0, _extends2.default)({
+      ref: ref
+    }, trProps, {
+      "data-table-row": undefined,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 71,
+        columnNumber: 16
+      }
+    }));
+  }));
+  if (!itemsContentWidth) {
+    return null;
+  }
+  return (
+    /*#__PURE__*/
+    // <Box/> wrapper always aligns the skeleton to the top of the table
+    _react.default.createElement(_designSystem.Box, {
+      marginBottom: "auto",
+      dataHook: dataHook,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 80,
+        columnNumber: 5
+      }
+    }, /*#__PURE__*/_react.default.createElement(_designSystem.Table, (0, _extends2.default)({
+      skin: "neutral",
+      data: data,
+      columns: columns,
+      withWrapper: false,
+      TrElementType
+    }, rest, {
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 81,
+        columnNumber: 7
+      }
+    }), /*#__PURE__*/_react.default.createElement(_designSystem.Card, {
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 89,
+        columnNumber: 9
+      }
+    }, /*#__PURE__*/_react.default.createElement(_designSystem.Table.Content, {
+      titleBarVisible: true,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 90,
+        columnNumber: 11
+      }
+    }))))
+  );
+}
+const TableSkeleton = exports.TableSkeleton = (0, _mobxReactLite.observer)(_TableSkeleton);
+//# sourceMappingURL=TableSkeleton.js.map

package/dist/cjs/components/TableSkeleton/TableSkeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_designSystem","_state","_mobxReactLite","_jsxFileName","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","_TableSkeleton","props","state","dataHook","rowsCount","rest","columnCount","minItemWidth","itemsContentWidth","useState","ResponsiveColumnsState","gap","rectState","toolbarRect","containerPadding","data","useMemo","Array","fill","map","_","id","columns","title","key","render","createElement","Box","direction","width","minWidth","__self","__source","fileName","lineNumber","columnNumber","SkeletonGroup","SkeletonLine","marginTop","marginBottom","TrElementType","forwardRef","rowData","_rowData","trProps","ref","_extends2","undefined","Table","skin","withWrapper","Card","Content","titleBarVisible","TableSkeleton","exports","observer"],"sources":["../../../../src/components/TableSkeleton/TableSkeleton.tsx"],"sourcesContent":["import React, { forwardRef, MutableRefObject, useMemo, useState } from 'react';\nimport {\n  Box,\n  Card,\n  SkeletonGroup,\n  SkeletonLine,\n  Table,\n  TableProps,\n} from '@wix/design-system';\nimport { FiltersMap } from '@wix/bex-core';\nimport { ToolbarCollectionState, ResponsiveColumnsState } from '../../state';\nimport { observer } from 'mobx-react-lite';\n\nexport interface TableSkeletonProps<T, F extends FiltersMap> {\n  state: ToolbarCollectionState<T, F>;\n  dataHook?: string;\n  rowsCount?: number;\n  rowVerticalPadding?: TableProps['rowVerticalPadding'];\n}\n\nexport function _TableSkeleton<T, F extends FiltersMap>(\n  props: TableSkeletonProps<T, F>,\n) {\n  const { state, dataHook, rowsCount = 7, ...rest } = props;\n\n  const [{ columnCount, minItemWidth, itemsContentWidth }] = useState(\n    () =>\n      new ResponsiveColumnsState({\n        gap: 24,\n        minItemWidth: 192,\n        rectState: state.toolbarRect,\n        containerPadding: 48,\n      }),\n  );\n\n  const data = useMemo(\n    () =>\n      new Array(rowsCount)\n        .fill(null)\n        .map((_, i) => ({ id: `skeleton-row-${i}` })),\n    [rowsCount],\n  );\n\n  const columns = useMemo(\n    () =>\n      new Array(columnCount).fill(null).map((_, i) => ({\n        title: '',\n        key: `skeleton-column-${i}`,\n        dataHook: `skeleton-column-${i}`,\n        render: () => (\n          <Box direction=\"vertical\" width=\"100%\" minWidth={`${minItemWidth}px`}>\n            <SkeletonGroup>\n              <SkeletonLine width=\"100%\" marginTop=\"SP1\" marginBottom=\"SP1\" />\n            </SkeletonGroup>\n          </Box>\n        ),\n      })),\n    [columnCount],\n  );\n\n  const [TrElementType] = useState(() =>\n    forwardRef(\n      (\n        { rowData: _rowData, ...trProps }: { rowData?: unknown },\n        ref:\n          | ((instance: HTMLTableRowElement | null) => void)\n          | MutableRefObject<HTMLTableRowElement | null>\n          | null,\n      ) => {\n        // <TableSkeleton/> is rendered inside the main <Table/> component, so we need to remove the data-table-row attribute from the <tr/> element to make testkit not to consider skeleton rows as real rows\n        return <tr ref={ref} {...trProps} data-table-row={undefined} />;\n      },\n    ),\n  );\n  if (!itemsContentWidth) {\n    return null;\n  }\n  return (\n    // <Box/> wrapper always aligns the skeleton to the top of the table\n    <Box marginBottom=\"auto\" dataHook={dataHook}>\n      <Table\n        skin=\"neutral\"\n        data={data}\n        columns={columns}\n        withWrapper={false}\n        {...{ TrElementType }}\n        {...rest}\n      >\n        <Card>\n          <Table.Content titleBarVisible={true} />\n        </Card>\n      </Table>\n    </Box>\n  );\n}\n\nexport const TableSkeleton = observer(_TableSkeleton);\n"],"mappings":"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"}

package/dist/cjs/components/TableTopNotification/ScrollAwayPushStrategy.js

@@ -0,0 +1,57 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.ScrollAwayPushStrategy = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _mobx = require("mobx");
+class ScrollAwayPushStrategy {
+  constructor(state) {
+    (0, _defineProperty2.default)(this, "state", void 0);
+    this.state = state;
+    (0, _mobx.makeObservable)(this, {
+      switchToSticky: _mobx.action.bound,
+      switchToInline: _mobx.action.bound,
+      onIntersectionRatioChanged: _mobx.action.bound
+    });
+  }
+  switchToSticky() {
+    const {
+      consideredVisibleRatio,
+      intersection: {
+        intersectionRatio
+      },
+      position
+    } = this.state;
+    if (position !== 'sticky' && intersectionRatio < consideredVisibleRatio) {
+      this.state.position = 'sticky';
+    }
+  }
+  switchToInline() {
+    this.state.position = 'inline';
+  }
+  onIntersectionRatioChanged(ratio) {
+    const {
+      position,
+      consideredVisibleRatio
+    } = this.state;
+    if (position === 'sticky' && ratio >= consideredVisibleRatio) {
+      this.state.position = 'inline';
+    }
+  }
+  init() {
+    const {
+      topNotification
+    } = this.state;
+    topNotification.events.on('enter', this.switchToSticky);
+    topNotification.events.on('beforeExit', this.switchToSticky);
+    topNotification.events.on('exited', this.switchToInline);
+    return () => {
+      topNotification.events.off('enter', this.switchToSticky);
+      topNotification.events.off('beforeExit', this.switchToSticky);
+      topNotification.events.off('exited', this.switchToInline);
+    };
+  }
+}
+exports.ScrollAwayPushStrategy = ScrollAwayPushStrategy;
+//# sourceMappingURL=ScrollAwayPushStrategy.js.map

package/dist/cjs/components/TableTopNotification/ScrollAwayPushStrategy.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_mobx","require","ScrollAwayPushStrategy","constructor","state","_defineProperty2","default","makeObservable","switchToSticky","action","bound","switchToInline","onIntersectionRatioChanged","consideredVisibleRatio","intersection","intersectionRatio","position","ratio","init","topNotification","events","on","off","exports"],"sources":["../../../../src/components/TableTopNotification/ScrollAwayPushStrategy.ts"],"sourcesContent":["import { TableTopNotificationState } from './TableTopNotificationState';\nimport { action, makeObservable } from 'mobx';\n\nexport class ScrollAwayPushStrategy {\n  state;\n  constructor(state: TableTopNotificationState) {\n    this.state = state;\n    makeObservable(this, {\n      switchToSticky: action.bound,\n      switchToInline: action.bound,\n      onIntersectionRatioChanged: action.bound,\n    });\n  }\n\n  switchToSticky() {\n    const {\n      consideredVisibleRatio,\n      intersection: { intersectionRatio },\n      position,\n    } = this.state;\n\n    if (position !== 'sticky' && intersectionRatio < consideredVisibleRatio) {\n      this.state.position = 'sticky';\n    }\n  }\n\n  switchToInline() {\n    this.state.position = 'inline';\n  }\n\n  onIntersectionRatioChanged(ratio: number) {\n    const { position, consideredVisibleRatio } = this.state;\n    if (position === 'sticky' && ratio >= consideredVisibleRatio) {\n      this.state.position = 'inline';\n    }\n  }\n\n  init() {\n    const { topNotification } = this.state;\n    topNotification.events.on('enter', this.switchToSticky);\n    topNotification.events.on('beforeExit', this.switchToSticky);\n    topNotification.events.on('exited', this.switchToInline);\n\n    return () => {\n      topNotification.events.off('enter', this.switchToSticky);\n      topNotification.events.off('beforeExit', this.switchToSticky);\n      topNotification.events.off('exited', this.switchToInline);\n    };\n  }\n}\n"],"mappings":";;;;;;AACA,IAAAA,KAAA,GAAAC,OAAA;AAEO,MAAMC,sBAAsB,CAAC;EAElCC,WAAWA,CAACC,KAAgC,EAAE;IAAA,IAAAC,gBAAA,CAAAC,OAAA;IAC5C,IAAI,CAACF,KAAK,GAAGA,KAAK;IAClB,IAAAG,oBAAc,EAAC,IAAI,EAAE;MACnBC,cAAc,EAAEC,YAAM,CAACC,KAAK;MAC5BC,cAAc,EAAEF,YAAM,CAACC,KAAK;MAC5BE,0BAA0B,EAAEH,YAAM,CAACC;IACrC,CAAC,CAAC;EACJ;EAEAF,cAAcA,CAAA,EAAG;IACf,MAAM;MACJK,sBAAsB;MACtBC,YAAY,EAAE;QAAEC;MAAkB,CAAC;MACnCC;IACF,CAAC,GAAG,IAAI,CAACZ,KAAK;IAEd,IAAIY,QAAQ,KAAK,QAAQ,IAAID,iBAAiB,GAAGF,sBAAsB,EAAE;MACvE,IAAI,CAACT,KAAK,CAACY,QAAQ,GAAG,QAAQ;IAChC;EACF;EAEAL,cAAcA,CAAA,EAAG;IACf,IAAI,CAACP,KAAK,CAACY,QAAQ,GAAG,QAAQ;EAChC;EAEAJ,0BAA0BA,CAACK,KAAa,EAAE;IACxC,MAAM;MAAED,QAAQ;MAAEH;IAAuB,CAAC,GAAG,IAAI,CAACT,KAAK;IACvD,IAAIY,QAAQ,KAAK,QAAQ,IAAIC,KAAK,IAAIJ,sBAAsB,EAAE;MAC5D,IAAI,CAACT,KAAK,CAACY,QAAQ,GAAG,QAAQ;IAChC;EACF;EAEAE,IAAIA,CAAA,EAAG;IACL,MAAM;MAAEC;IAAgB,CAAC,GAAG,IAAI,CAACf,KAAK;IACtCe,eAAe,CAACC,MAAM,CAACC,EAAE,CAAC,OAAO,EAAE,IAAI,CAACb,cAAc,CAAC;IACvDW,eAAe,CAACC,MAAM,CAACC,EAAE,CAAC,YAAY,EAAE,IAAI,CAACb,cAAc,CAAC;IAC5DW,eAAe,CAACC,MAAM,CAACC,EAAE,CAAC,QAAQ,EAAE,IAAI,CAACV,cAAc,CAAC;IAExD,OAAO,MAAM;MACXQ,eAAe,CAACC,MAAM,CAACE,GAAG,CAAC,OAAO,EAAE,IAAI,CAACd,cAAc,CAAC;MACxDW,eAAe,CAACC,MAAM,CAACE,GAAG,CAAC,YAAY,EAAE,IAAI,CAACd,cAAc,CAAC;MAC7DW,eAAe,CAACC,MAAM,CAACE,GAAG,CAAC,QAAQ,EAAE,IAAI,CAACX,cAAc,CAAC;IAC3D,CAAC;EACH;AACF;AAACY,OAAA,CAAArB,sBAAA,GAAAA,sBAAA"}