@wix/patterns 0.8.0

package/dist/cjs/state/GridFoldersState.js

@@ -0,0 +1,126 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.GridFoldersState = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _GridBaseState = require("./GridBaseState");
+var _mobx = require("mobx");
+var _ToolbarCollectionState = require("./ToolbarCollectionState");
+var _FoldersAndItemsCollectionsState = require("./FoldersAndItemsCollectionsState");
+var _gridSizePresets = require("./gridSizePresets");
+var _GridFoldersBIReporter = require("./GridFoldersBIReporter");
+class GridFoldersState {
+  constructor(params) {
+    (0, _defineProperty2.default)(this, "container", void 0);
+    (0, _defineProperty2.default)(this, "toolbar", void 0);
+    (0, _defineProperty2.default)(this, "items", void 0);
+    (0, _defineProperty2.default)(this, "folders", void 0);
+    (0, _defineProperty2.default)(this, "collections", void 0);
+    (0, _defineProperty2.default)(this, "bi", void 0);
+    (0, _defineProperty2.default)(this, "showAllFolders", false);
+    (0, _defineProperty2.default)(this, "toggleShowAllFolders", (0, _mobx.action)(() => {
+      this.showAllFolders = !this.showAllFolders;
+      this.bi.onToggleShowAllButtonClick();
+    }));
+    (0, _defineProperty2.default)(this, "retryErrorState", (0, _mobx.action)(() => this.toolbar.retryErrorState()));
+    this.container = params.container;
+    this.toolbar = params.toolbar ?? new _ToolbarCollectionState.ToolbarCollectionState({
+      collection: params.items,
+      container: params.container,
+      componentType: 'GridFolders'
+    });
+    this.collections = params.collections ?? new _FoldersAndItemsCollectionsState.FoldersAndItemsCollectionsState({
+      ...params,
+      toolbar: this.toolbar
+    });
+    this.items = new _GridBaseState.GridBaseState({
+      collection: params.items,
+      container: params.container,
+      toolbar: this.toolbar,
+      sizePreset: _gridSizePresets.topGridSizePreset
+    });
+    this.folders = new _GridBaseState.GridBaseState({
+      collection: params.folders,
+      container: params.container,
+      toolbar: this.toolbar,
+      sizePreset: _gridSizePresets.sideGridSizePreset
+    });
+    this.bi = new _GridFoldersBIReporter.GridFoldersBIReporter({
+      state: this
+    });
+    (0, _mobx.makeObservable)(this, {
+      showAllFolders: _mobx.observable.ref,
+      foldersLocalLimit: _mobx.computed,
+      effectiveFoldersLocalLimit: _mobx.computed,
+      showToggleShowAllLessButton: _mobx.computed,
+      showItemsSection: _mobx.computed,
+      showItemsSectionHeader: _mobx.computed,
+      showFoldersSection: _mobx.computed,
+      showFoldersSectionHeader: _mobx.computed,
+      showLoadingSection: _mobx.computed
+    });
+  }
+  get foldersLocalLimit() {
+    return this.folders.columnsCount * 2;
+  }
+  get effectiveFoldersLocalLimit() {
+    return this.showAllFolders ? null : this.folders.columnsCount * 2;
+  }
+  get showToggleShowAllLessButton() {
+    return this.collections.folders.result.size > this.foldersLocalLimit;
+  }
+  get showFoldersSectionHeader() {
+    return this.showToggleShowAllLessButton || this.showItemsSection;
+  }
+  get showItemsSection() {
+    return !this.collections.items.result.isEmptyAndNotFetching && !this.collections.hasFoldersOnlyActiveFilters && (!this.showAllFolders || this.folders.collection.fetchedLastPage);
+  }
+  get initTask() {
+    return this.toolbar.initTask;
+  }
+  get showErrorState() {
+    return this.toolbar.multi.showErrorState;
+  }
+  get errorStatus() {
+    return this.toolbar.multi.errorStatus;
+  }
+  get showLoadingState() {
+    return this.toolbar.multi.showLoadingState;
+  }
+  get showEmptyState() {
+    return this.collections.showEmptyState;
+  }
+  get showItemsSectionHeader() {
+    return this.showFoldersSection;
+  }
+  get showFoldersSection() {
+    return !this.collections.folders.result.isEmptyAndNotFetching && !this.collections.hasItemsOnlyActiveFilters;
+  }
+  get showLoadingSection() {
+    const {
+      collections: {
+        hasFoldersOnlyActiveFilters,
+        hasItemsOnlyActiveFilters
+      },
+      toolbar: {
+        initTask,
+        multi
+      }
+    } = this;
+    const isLoadingToolbarAndCollection = () => multi.showInitialLoader && initTask.status.isLoading || initTask.status.isIdle;
+    return !hasFoldersOnlyActiveFilters && !hasItemsOnlyActiveFilters && (multi.showRefreshLoader || isLoadingToolbarAndCollection());
+  }
+  init(params) {
+    const disposers = [this.collections.init(params), (0, _mobx.reaction)(() => this.effectiveFoldersLocalLimit, effectiveFoldersLocalLimit => {
+      this.folders._localLimit = effectiveFoldersLocalLimit;
+    }, {
+      fireImmediately: true
+    })];
+    return () => {
+      disposers.forEach(d => d());
+    };
+  }
+}
+exports.GridFoldersState = GridFoldersState;
+//# sourceMappingURL=GridFoldersState.js.map

package/dist/cjs/state/GridFoldersState.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_GridBaseState","require","_mobx","_ToolbarCollectionState","_FoldersAndItemsCollectionsState","_gridSizePresets","_GridFoldersBIReporter","GridFoldersState","constructor","params","_defineProperty2","default","action","showAllFolders","bi","onToggleShowAllButtonClick","toolbar","retryErrorState","container","ToolbarCollectionState","collection","items","componentType","collections","FoldersAndItemsCollectionsState","GridBaseState","sizePreset","topGridSizePreset","folders","sideGridSizePreset","GridFoldersBIReporter","state","makeObservable","observable","ref","foldersLocalLimit","computed","effectiveFoldersLocalLimit","showToggleShowAllLessButton","showItemsSection","showItemsSectionHeader","showFoldersSection","showFoldersSectionHeader","showLoadingSection","columnsCount","result","size","isEmptyAndNotFetching","hasFoldersOnlyActiveFilters","fetchedLastPage","initTask","showErrorState","multi","errorStatus","showLoadingState","showEmptyState","hasItemsOnlyActiveFilters","isLoadingToolbarAndCollection","showInitialLoader","status","isLoading","isIdle","showRefreshLoader","init","disposers","reaction","_localLimit","fireImmediately","forEach","d","exports"],"sources":["../../../src/state/GridFoldersState.ts"],"sourcesContent":["import {\n  WixPatternsContainer,\n  CollectionState,\n  FiltersMap,\n} from '@wix/bex-core';\nimport { GridBaseState } from './GridBaseState';\nimport { action, computed, makeObservable, observable, reaction } from 'mobx';\nimport { ToolbarCollectionState } from './ToolbarCollectionState';\nimport {\n  FoldersAndItemsCollectionsState,\n  FoldersAndItemsCollectionsStateInitParams,\n  PartialAllFilters,\n} from './FoldersAndItemsCollectionsState';\nimport { sideGridSizePreset, topGridSizePreset } from './gridSizePresets';\nimport { GridFoldersBIReporter } from './GridFoldersBIReporter';\n\nexport interface GridFoldersStateParams<\n  T1,\n  F1 extends FiltersMap,\n  T2,\n  F2 extends FiltersMap,\n> {\n  readonly items: CollectionState<T1, F1>;\n  readonly folders: CollectionState<T2, F2>;\n  readonly container: WixPatternsContainer;\n  readonly toolbar?: ToolbarCollectionState<T1, PartialAllFilters<F1, F2>>;\n  readonly collections?: FoldersAndItemsCollectionsState<T1, F1, T2, F2>;\n}\n\ninterface GridFoldersStateInitParams\n  extends FoldersAndItemsCollectionsStateInitParams {}\n\nexport class GridFoldersState<\n  T1,\n  F1 extends FiltersMap,\n  T2,\n  F2 extends FiltersMap,\n> {\n  readonly container;\n  readonly toolbar;\n  readonly items;\n  readonly folders;\n  readonly collections;\n  readonly bi;\n\n  showAllFolders = false;\n\n  constructor(params: GridFoldersStateParams<T1, F1, T2, F2>) {\n    this.container = params.container;\n\n    this.toolbar =\n      params.toolbar ??\n      new ToolbarCollectionState({\n        collection: params.items as CollectionState<T1, {}> as CollectionState<\n          T1,\n          PartialAllFilters<F1, F2>\n        >,\n        container: params.container,\n        componentType: 'GridFolders',\n      });\n\n    this.collections =\n      params.collections ??\n      new FoldersAndItemsCollectionsState({\n        ...params,\n        toolbar: this.toolbar,\n      });\n\n    this.items = new GridBaseState({\n      collection: params.items,\n      container: params.container,\n      toolbar: this.toolbar as ToolbarCollectionState<unknown, Partial<F1>>,\n      sizePreset: topGridSizePreset,\n    });\n\n    this.folders = new GridBaseState({\n      collection: params.folders,\n      container: params.container,\n      toolbar: this.toolbar as ToolbarCollectionState<unknown, Partial<F2>>,\n      sizePreset: sideGridSizePreset,\n    });\n\n    this.bi = new GridFoldersBIReporter({\n      state: this,\n    });\n\n    makeObservable(this, {\n      showAllFolders: observable.ref,\n      foldersLocalLimit: computed,\n      effectiveFoldersLocalLimit: computed,\n      showToggleShowAllLessButton: computed,\n      showItemsSection: computed,\n      showItemsSectionHeader: computed,\n      showFoldersSection: computed,\n      showFoldersSectionHeader: computed,\n      showLoadingSection: computed,\n    });\n  }\n\n  toggleShowAllFolders = action(() => {\n    this.showAllFolders = !this.showAllFolders;\n    this.bi.onToggleShowAllButtonClick();\n  });\n\n  get foldersLocalLimit() {\n    return this.folders.columnsCount * 2;\n  }\n\n  get effectiveFoldersLocalLimit() {\n    return this.showAllFolders ? null : this.folders.columnsCount * 2;\n  }\n\n  get showToggleShowAllLessButton() {\n    return this.collections.folders.result.size > this.foldersLocalLimit;\n  }\n\n  get showFoldersSectionHeader() {\n    return this.showToggleShowAllLessButton || this.showItemsSection;\n  }\n\n  get showItemsSection() {\n    return (\n      !this.collections.items.result.isEmptyAndNotFetching &&\n      !this.collections.hasFoldersOnlyActiveFilters &&\n      (!this.showAllFolders || this.folders.collection.fetchedLastPage)\n    );\n  }\n\n  get initTask() {\n    return this.toolbar.initTask;\n  }\n\n  get showErrorState() {\n    return this.toolbar.multi.showErrorState;\n  }\n\n  get errorStatus() {\n    return this.toolbar.multi.errorStatus;\n  }\n\n  retryErrorState = action(() => this.toolbar.retryErrorState());\n\n  get showLoadingState() {\n    return this.toolbar.multi.showLoadingState;\n  }\n\n  get showEmptyState() {\n    return this.collections.showEmptyState;\n  }\n\n  get showItemsSectionHeader() {\n    return this.showFoldersSection;\n  }\n\n  get showFoldersSection() {\n    return (\n      !this.collections.folders.result.isEmptyAndNotFetching &&\n      !this.collections.hasItemsOnlyActiveFilters\n    );\n  }\n\n  get showLoadingSection() {\n    const {\n      collections: { hasFoldersOnlyActiveFilters, hasItemsOnlyActiveFilters },\n      toolbar: { initTask, multi },\n    } = this;\n\n    const isLoadingToolbarAndCollection = () =>\n      (multi.showInitialLoader && initTask.status.isLoading) ||\n      initTask.status.isIdle;\n\n    return (\n      !hasFoldersOnlyActiveFilters &&\n      !hasItemsOnlyActiveFilters &&\n      (multi.showRefreshLoader || isLoadingToolbarAndCollection())\n    );\n  }\n\n  init(params: GridFoldersStateInitParams) {\n    const disposers = [\n      this.collections.init(params),\n      reaction(\n        () => this.effectiveFoldersLocalLimit,\n        (effectiveFoldersLocalLimit) => {\n          this.folders._localLimit = effectiveFoldersLocalLimit;\n        },\n        {\n          fireImmediately: true,\n        },\n      ),\n    ];\n\n    return () => {\n      disposers.forEach((d) => d());\n    };\n  }\n}\n"],"mappings":"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"}

package/dist/cjs/state/GridState.js

@@ -0,0 +1,43 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.GridState = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _ToolbarCollectionState = require("./ToolbarCollectionState");
+var _GridBaseState = require("./GridBaseState");
+var _gridSizePresets = require("./gridSizePresets");
+class GridState {
+  constructor(params) {
+    (0, _defineProperty2.default)(this, "toolbar", void 0);
+    (0, _defineProperty2.default)(this, "container", void 0);
+    (0, _defineProperty2.default)(this, "collection", void 0);
+    (0, _defineProperty2.default)(this, "grid", void 0);
+    (0, _defineProperty2.default)(this, "onAddItemActionComplete", async items => {
+      return this.toolbar.onAddItemActionComplete(items);
+    });
+    this.container = params.container;
+    this.collection = params.collection;
+    this.toolbar = params.toolbar ?? new _ToolbarCollectionState.ToolbarCollectionState({
+      collection: params.collection,
+      container: params.container,
+      componentType: 'Grid'
+    });
+    this.grid = new _GridBaseState.GridBaseState({
+      toolbar: this.toolbar,
+      collection: this.collection,
+      container: this.container,
+      sizePreset: _gridSizePresets.topGridSizePreset
+    });
+  }
+  init(params) {
+    const disposers = [this.toolbar.init(params)];
+    return () => {
+      for (const disposer of disposers) {
+        disposer();
+      }
+    };
+  }
+}
+exports.GridState = GridState;
+//# sourceMappingURL=GridState.js.map

package/dist/cjs/state/GridState.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_ToolbarCollectionState","require","_GridBaseState","_gridSizePresets","GridState","constructor","params","_defineProperty2","default","items","toolbar","onAddItemActionComplete","container","collection","ToolbarCollectionState","componentType","grid","GridBaseState","sizePreset","topGridSizePreset","init","disposers","disposer","exports"],"sources":["../../../src/state/GridState.ts"],"sourcesContent":["import {\n  WixPatternsContainer,\n  CollectionState,\n  FiltersMap,\n} from '@wix/bex-core';\nimport {\n  ToolbarCollectionState,\n  ToolbarCollectionStateParamsInitParams,\n} from './ToolbarCollectionState';\nimport { GridBaseState } from './GridBaseState';\nimport { topGridSizePreset } from './gridSizePresets';\n\nexport interface GridStateParams<T, F extends FiltersMap> {\n  readonly collection: CollectionState<T, F>;\n  readonly container: WixPatternsContainer;\n  readonly toolbar?: ToolbarCollectionState<T, F>;\n}\n\nexport interface GridStateInitParams\n  extends ToolbarCollectionStateParamsInitParams {}\n\nexport interface GridStatePublicAPI<T, F extends FiltersMap> {\n  /**\n   * Underlying [CollectionState](./?path=/story/common-state--collectionstate) instance\n   * @external\n   */\n  readonly collection: CollectionState<T, F>;\n  /**\n   * Underlying [ToolbarCollectionState](./?path=/story/common-state--toolbarcollectionstate) instance\n   * @external\n   */\n  readonly toolbar: ToolbarCollectionState<T, F>;\n\n  /**\n   * Reset active filters & sorting and adds new items to the collection.\n   * @param items - new items to add to the collection\n   * @external\n   */\n  onAddItemActionComplete(items: T[]): void;\n}\n\nexport class GridState<T, F extends FiltersMap> {\n  readonly toolbar;\n  readonly container;\n  readonly collection;\n  readonly grid;\n\n  constructor(params: GridStateParams<T, F>) {\n    this.container = params.container;\n    this.collection = params.collection;\n\n    this.toolbar =\n      params.toolbar ??\n      new ToolbarCollectionState({\n        collection: params.collection,\n        container: params.container,\n        componentType: 'Grid',\n      });\n\n    this.grid = new GridBaseState({\n      toolbar: this.toolbar as ToolbarCollectionState<unknown, Partial<F>>,\n      collection: this.collection,\n      container: this.container,\n      sizePreset: topGridSizePreset,\n    });\n  }\n\n  init(params: GridStateInitParams) {\n    const disposers = [this.toolbar.init(params)];\n\n    return () => {\n      for (const disposer of disposers) {\n        disposer();\n      }\n    };\n  }\n\n  onAddItemActionComplete = async (items: T[]) => {\n    return this.toolbar.onAddItemActionComplete(items);\n  };\n}\n"],"mappings":";;;;;;AAKA,IAAAA,uBAAA,GAAAC,OAAA;AAIA,IAAAC,cAAA,GAAAD,OAAA;AACA,IAAAE,gBAAA,GAAAF,OAAA;AA+BO,MAAMG,SAAS,CAA0B;EAM9CC,WAAWA,CAACC,MAA6B,EAAE;IAAA,IAAAC,gBAAA,CAAAC,OAAA;IAAA,IAAAD,gBAAA,CAAAC,OAAA;IAAA,IAAAD,gBAAA,CAAAC,OAAA;IAAA,IAAAD,gBAAA,CAAAC,OAAA;IAAA,IAAAD,gBAAA,CAAAC,OAAA,mCA8BjB,MAAOC,KAAU,IAAK;MAC9C,OAAO,IAAI,CAACC,OAAO,CAACC,uBAAuB,CAACF,KAAK,CAAC;IACpD,CAAC;IA/BC,IAAI,CAACG,SAAS,GAAGN,MAAM,CAACM,SAAS;IACjC,IAAI,CAACC,UAAU,GAAGP,MAAM,CAACO,UAAU;IAEnC,IAAI,CAACH,OAAO,GACVJ,MAAM,CAACI,OAAO,IACd,IAAII,8CAAsB,CAAC;MACzBD,UAAU,EAAEP,MAAM,CAACO,UAAU;MAC7BD,SAAS,EAAEN,MAAM,CAACM,SAAS;MAC3BG,aAAa,EAAE;IACjB,CAAC,CAAC;IAEJ,IAAI,CAACC,IAAI,GAAG,IAAIC,4BAAa,CAAC;MAC5BP,OAAO,EAAE,IAAI,CAACA,OAAsD;MACpEG,UAAU,EAAE,IAAI,CAACA,UAAU;MAC3BD,SAAS,EAAE,IAAI,CAACA,SAAS;MACzBM,UAAU,EAAEC;IACd,CAAC,CAAC;EACJ;EAEAC,IAAIA,CAACd,MAA2B,EAAE;IAChC,MAAMe,SAAS,GAAG,CAAC,IAAI,CAACX,OAAO,CAACU,IAAI,CAACd,MAAM,CAAC,CAAC;IAE7C,OAAO,MAAM;MACX,KAAK,MAAMgB,QAAQ,IAAID,SAAS,EAAE;QAChCC,QAAQ,CAAC,CAAC;MACZ;IACF,CAAC;EACH;AAKF;AAACC,OAAA,CAAAnB,SAAA,GAAAA,SAAA"}

package/dist/cjs/state/IndeterminateMapState.js

@@ -0,0 +1,77 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.IndeterminateMapState = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _mobx = require("mobx");
+const statuses = {
+  empty: {
+    type: 'empty',
+    toggle: () => statuses.partial,
+    toggleCheckbox: true
+  },
+  partial: {
+    type: 'partial',
+    toggle: () => statuses.full,
+    toggleCheckbox: true
+  },
+  full: {
+    type: 'full',
+    toggle: () => statuses.empty,
+    toggleCheckbox: false
+  }
+};
+class IndeterminateMapState {
+  constructor() {
+    (0, _defineProperty2.default)(this, "_map", _mobx.observable.map([], {
+      deep: false
+    }));
+    (0, _mobx.makeObservable)(this, {
+      toggle: _mobx.action,
+      setManyPartial: _mobx.action,
+      partialModeKeys: _mobx.computed,
+      partialModeKeysSet: _mobx.computed
+    });
+  }
+  toggle(key) {
+    const {
+      _map
+    } = this;
+    const currentStatus = _map.get(key);
+    if (currentStatus == null) {
+      return;
+    }
+    const nextStatus = currentStatus.toggle();
+    _map.set(key, nextStatus);
+    return nextStatus;
+  }
+  setManyPartial(keys) {
+    const {
+      _map
+    } = this;
+    for (const key of keys) {
+      if (!_map.has(key)) {
+        _map.set(key, statuses.partial);
+      }
+    }
+  }
+  isPartial(key) {
+    var _map$get;
+    const {
+      _map
+    } = this;
+    return ((_map$get = _map.get(key)) == null ? void 0 : _map$get.type) === 'partial';
+  }
+  get partialModeKeys() {
+    return Array.from(this._map.entries()).filter(([, value]) => value.type === 'partial').map(([key]) => key);
+  }
+  get partialModeKeysSet() {
+    const {
+      partialModeKeys
+    } = this;
+    return new Set(partialModeKeys);
+  }
+}
+exports.IndeterminateMapState = IndeterminateMapState;
+//# sourceMappingURL=IndeterminateMapState.js.map

package/dist/cjs/state/IndeterminateMapState.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_mobx","require","statuses","empty","type","toggle","partial","toggleCheckbox","full","IndeterminateMapState","constructor","_defineProperty2","default","observable","map","deep","makeObservable","action","setManyPartial","partialModeKeys","computed","partialModeKeysSet","key","_map","currentStatus","get","nextStatus","set","keys","has","isPartial","_map$get","Array","from","entries","filter","value","Set","exports"],"sources":["../../../src/state/IndeterminateMapState.ts"],"sourcesContent":["import { action, computed, makeObservable, observable } from 'mobx';\n\ntype IndeterminateType = 'empty' | 'partial' | 'full';\n\ninterface IndeterminateStatus {\n  type: IndeterminateType;\n  toggle: () => IndeterminateStatus;\n  toggleCheckbox: boolean;\n}\n\nconst statuses: Readonly<Record<IndeterminateType, IndeterminateStatus>> = {\n  empty: {\n    type: 'empty',\n    toggle: () => statuses.partial,\n    toggleCheckbox: true,\n  },\n\n  partial: {\n    type: 'partial',\n    toggle: () => statuses.full,\n    toggleCheckbox: true,\n  },\n  full: {\n    type: 'full',\n    toggle: () => statuses.empty,\n    toggleCheckbox: false,\n  },\n};\n\nexport class IndeterminateMapState {\n  readonly _map = observable.map<string, IndeterminateStatus>([], {\n    deep: false,\n  });\n\n  constructor() {\n    makeObservable(this, {\n      toggle: action,\n      setManyPartial: action,\n      partialModeKeys: computed,\n      partialModeKeysSet: computed,\n    });\n  }\n\n  toggle(key: string) {\n    const { _map } = this;\n\n    const currentStatus = _map.get(key);\n\n    if (currentStatus == null) {\n      return;\n    }\n\n    const nextStatus = currentStatus.toggle();\n    _map.set(key, nextStatus);\n\n    return nextStatus;\n  }\n\n  setManyPartial(keys: string[]) {\n    const { _map } = this;\n\n    for (const key of keys) {\n      if (!_map.has(key)) {\n        _map.set(key, statuses.partial);\n      }\n    }\n  }\n\n  isPartial(key: string) {\n    const { _map } = this;\n    return _map.get(key)?.type === 'partial';\n  }\n\n  get partialModeKeys() {\n    return Array.from(this._map.entries())\n      .filter(([, value]) => value.type === 'partial')\n      .map(([key]) => key);\n  }\n\n  get partialModeKeysSet() {\n    const { partialModeKeys } = this;\n    return new Set(partialModeKeys);\n  }\n}\n"],"mappings":";;;;;;AAAA,IAAAA,KAAA,GAAAC,OAAA;AAUA,MAAMC,QAAkE,GAAG;EACzEC,KAAK,EAAE;IACLC,IAAI,EAAE,OAAO;IACbC,MAAM,EAAEA,CAAA,KAAMH,QAAQ,CAACI,OAAO;IAC9BC,cAAc,EAAE;EAClB,CAAC;EAEDD,OAAO,EAAE;IACPF,IAAI,EAAE,SAAS;IACfC,MAAM,EAAEA,CAAA,KAAMH,QAAQ,CAACM,IAAI;IAC3BD,cAAc,EAAE;EAClB,CAAC;EACDC,IAAI,EAAE;IACJJ,IAAI,EAAE,MAAM;IACZC,MAAM,EAAEA,CAAA,KAAMH,QAAQ,CAACC,KAAK;IAC5BI,cAAc,EAAE;EAClB;AACF,CAAC;AAEM,MAAME,qBAAqB,CAAC;EAKjCC,WAAWA,CAAA,EAAG;IAAA,IAAAC,gBAAA,CAAAC,OAAA,gBAJEC,gBAAU,CAACC,GAAG,CAA8B,EAAE,EAAE;MAC9DC,IAAI,EAAE;IACR,CAAC,CAAC;IAGA,IAAAC,oBAAc,EAAC,IAAI,EAAE;MACnBX,MAAM,EAAEY,YAAM;MACdC,cAAc,EAAED,YAAM;MACtBE,eAAe,EAAEC,cAAQ;MACzBC,kBAAkB,EAAED;IACtB,CAAC,CAAC;EACJ;EAEAf,MAAMA,CAACiB,GAAW,EAAE;IAClB,MAAM;MAAEC;IAAK,CAAC,GAAG,IAAI;IAErB,MAAMC,aAAa,GAAGD,IAAI,CAACE,GAAG,CAACH,GAAG,CAAC;IAEnC,IAAIE,aAAa,IAAI,IAAI,EAAE;MACzB;IACF;IAEA,MAAME,UAAU,GAAGF,aAAa,CAACnB,MAAM,CAAC,CAAC;IACzCkB,IAAI,CAACI,GAAG,CAACL,GAAG,EAAEI,UAAU,CAAC;IAEzB,OAAOA,UAAU;EACnB;EAEAR,cAAcA,CAACU,IAAc,EAAE;IAC7B,MAAM;MAAEL;IAAK,CAAC,GAAG,IAAI;IAErB,KAAK,MAAMD,GAAG,IAAIM,IAAI,EAAE;MACtB,IAAI,CAACL,IAAI,CAACM,GAAG,CAACP,GAAG,CAAC,EAAE;QAClBC,IAAI,CAACI,GAAG,CAACL,GAAG,EAAEpB,QAAQ,CAACI,OAAO,CAAC;MACjC;IACF;EACF;EAEAwB,SAASA,CAACR,GAAW,EAAE;IAAA,IAAAS,QAAA;IACrB,MAAM;MAAER;IAAK,CAAC,GAAG,IAAI;IACrB,OAAO,EAAAQ,QAAA,GAAAR,IAAI,CAACE,GAAG,CAACH,GAAG,CAAC,qBAAbS,QAAA,CAAe3B,IAAI,MAAK,SAAS;EAC1C;EAEA,IAAIe,eAAeA,CAAA,EAAG;IACpB,OAAOa,KAAK,CAACC,IAAI,CAAC,IAAI,CAACV,IAAI,CAACW,OAAO,CAAC,CAAC,CAAC,CACnCC,MAAM,CAAC,CAAC,GAAGC,KAAK,CAAC,KAAKA,KAAK,CAAChC,IAAI,KAAK,SAAS,CAAC,CAC/CU,GAAG,CAAC,CAAC,CAACQ,GAAG,CAAC,KAAKA,GAAG,CAAC;EACxB;EAEA,IAAID,kBAAkBA,CAAA,EAAG;IACvB,MAAM;MAAEF;IAAgB,CAAC,GAAG,IAAI;IAChC,OAAO,IAAIkB,GAAG,CAAClB,eAAe,CAAC;EACjC;AACF;AAACmB,OAAA,CAAA7B,qBAAA,GAAAA,qBAAA"}

package/dist/cjs/state/IntersectionObserverState.js

@@ -0,0 +1,42 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.IntersectionObserverState = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _mobx = require("mobx");
+class IntersectionObserverState {
+  constructor() {
+    (0, _defineProperty2.default)(this, "intersectionRatio", 1);
+    (0, _defineProperty2.default)(this, "observer", void 0);
+    (0, _defineProperty2.default)(this, "dispose", () => {
+      var _this$observer;
+      (_this$observer = this.observer) == null || _this$observer.disconnect();
+    });
+    (0, _mobx.makeObservable)(this, {
+      intersectionRatio: _mobx.observable.ref
+    });
+  }
+  init({
+    root,
+    target,
+    rootMargin
+  }) {
+    if (target == null || typeof IntersectionObserver === 'undefined') {
+      return;
+    }
+    const observer = new IntersectionObserver((0, _mobx.action)(([{
+      intersectionRatio
+    }]) => {
+      this.intersectionRatio = intersectionRatio;
+    }), {
+      root,
+      rootMargin
+    });
+    observer.observe(target);
+    this.observer = observer;
+    return this.dispose;
+  }
+}
+exports.IntersectionObserverState = IntersectionObserverState;
+//# sourceMappingURL=IntersectionObserverState.js.map

package/dist/cjs/state/IntersectionObserverState.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_mobx","require","IntersectionObserverState","constructor","_defineProperty2","default","_this$observer","observer","disconnect","makeObservable","intersectionRatio","observable","ref","init","root","target","rootMargin","IntersectionObserver","action","observe","dispose","exports"],"sources":["../../../src/state/IntersectionObserverState.ts"],"sourcesContent":["import { action, makeObservable, observable } from 'mobx';\n\nexport class IntersectionObserverState {\n  intersectionRatio: number = 1;\n\n  observer?: IntersectionObserver;\n\n  constructor() {\n    makeObservable(this, {\n      intersectionRatio: observable.ref,\n    });\n  }\n\n  dispose = () => {\n    this.observer?.disconnect();\n  };\n\n  init({\n    root,\n    target,\n    rootMargin,\n  }: {\n    target?: Element | null;\n    root?: Element | Document | null;\n    rootMargin?: string;\n  }) {\n    if (target == null || typeof IntersectionObserver === 'undefined') {\n      return;\n    }\n\n    const observer = new IntersectionObserver(\n      action(([{ intersectionRatio }]) => {\n        this.intersectionRatio = intersectionRatio;\n      }),\n      {\n        root,\n        rootMargin,\n      },\n    );\n\n    observer.observe(target);\n\n    this.observer = observer;\n\n    return this.dispose;\n  }\n}\n"],"mappings":";;;;;;AAAA,IAAAA,KAAA,GAAAC,OAAA;AAEO,MAAMC,yBAAyB,CAAC;EAKrCC,WAAWA,CAAA,EAAG;IAAA,IAAAC,gBAAA,CAAAC,OAAA,6BAJc,CAAC;IAAA,IAAAD,gBAAA,CAAAC,OAAA;IAAA,IAAAD,gBAAA,CAAAC,OAAA,mBAUnB,MAAM;MAAA,IAAAC,cAAA;MACd,CAAAA,cAAA,OAAI,CAACC,QAAQ,aAAbD,cAAA,CAAeE,UAAU,CAAC,CAAC;IAC7B,CAAC;IAPC,IAAAC,oBAAc,EAAC,IAAI,EAAE;MACnBC,iBAAiB,EAAEC,gBAAU,CAACC;IAChC,CAAC,CAAC;EACJ;EAMAC,IAAIA,CAAC;IACHC,IAAI;IACJC,MAAM;IACNC;EAKF,CAAC,EAAE;IACD,IAAID,MAAM,IAAI,IAAI,IAAI,OAAOE,oBAAoB,KAAK,WAAW,EAAE;MACjE;IACF;IAEA,MAAMV,QAAQ,GAAG,IAAIU,oBAAoB,CACvC,IAAAC,YAAM,EAAC,CAAC,CAAC;MAAER;IAAkB,CAAC,CAAC,KAAK;MAClC,IAAI,CAACA,iBAAiB,GAAGA,iBAAiB;IAC5C,CAAC,CAAC,EACF;MACEI,IAAI;MACJE;IACF,CACF,CAAC;IAEDT,QAAQ,CAACY,OAAO,CAACJ,MAAM,CAAC;IAExB,IAAI,CAACR,QAAQ,GAAGA,QAAQ;IAExB,OAAO,IAAI,CAACa,OAAO;EACrB;AACF;AAACC,OAAA,CAAAnB,yBAAA,GAAAA,yBAAA"}

package/dist/cjs/state/ItemActionsState.js

@@ -0,0 +1,77 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.ItemActionsState = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _mobx = require("mobx");
+var _bexCore = require("@wix/bex-core");
+class ItemActionsState {
+  constructor(params) {
+    (0, _defineProperty2.default)(this, "keyedItem", void 0);
+    (0, _defineProperty2.default)(this, "fade", void 0);
+    (0, _defineProperty2.default)(this, "collection", void 0);
+    (0, _defineProperty2.default)(this, "confirmModal", new _bexCore.ConditionalModalState());
+    (0, _defineProperty2.default)(this, "actionCellAPI", void 0);
+    this.fade = params.fade;
+    this.keyedItem = params.keyedItem;
+    this.collection = params.collection;
+    (0, _mobx.makeObservable)(this, {
+      keyedItem: _mobx.observable.ref,
+      fade: _mobx.observable.ref,
+      onFadeStart: _mobx.action.bound,
+      onFadeDone: _mobx.action.bound,
+      setItemIfChanged: _mobx.action,
+      openConfirmModal: _mobx.action.bound,
+      openConfirmDeleteModal: _mobx.action.bound
+    });
+    this.actionCellAPI = {
+      openConfirmModal: this.openConfirmModal,
+      openConfirmDeleteModal: this.openConfirmDeleteModal,
+      collection: this.collection,
+      keyedItem: this.keyedItem
+    };
+  }
+  openConfirmModal(props) {
+    const {
+      translate: t
+    } = this.collection;
+    this.confirmModal.open({
+      title: t('cairo.confirmModal.title'),
+      primaryButtonText: t('cairo.confirm.button'),
+      secondaryButtonText: t('cairo.cancel.button'),
+      ...props
+    });
+  }
+  openConfirmDeleteModal(props) {
+    const {
+      translate: t
+    } = this.collection;
+    this.openConfirmModal({
+      theme: 'destructive',
+      title: t('cairo.deleteModal.title'),
+      content: t('cairo.deleteModal.body'),
+      ...props
+    });
+  }
+  onFadeStart() {
+    if (this.fade === 'exit') {
+      this.fade = 'exiting';
+    }
+  }
+  onFadeDone() {
+    const {
+      fade
+    } = this;
+    if (fade === 'exiting') {
+      this.fade = 'idle';
+    }
+  }
+  setItemIfChanged(keyedItem) {
+    if (this.keyedItem !== keyedItem) {
+      this.keyedItem = keyedItem;
+    }
+  }
+}
+exports.ItemActionsState = ItemActionsState;
+//# sourceMappingURL=ItemActionsState.js.map

package/dist/cjs/state/ItemActionsState.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_mobx","require","_bexCore","ItemActionsState","constructor","params","_defineProperty2","default","ConditionalModalState","fade","keyedItem","collection","makeObservable","observable","ref","onFadeStart","action","bound","onFadeDone","setItemIfChanged","openConfirmModal","openConfirmDeleteModal","actionCellAPI","props","translate","t","confirmModal","open","title","primaryButtonText","secondaryButtonText","theme","content","exports"],"sources":["../../../src/state/ItemActionsState.tsx"],"sourcesContent":["import { action, makeObservable, observable } from 'mobx';\nimport type { CollectionState } from '@wix/bex-core';\nimport { ConditionalModalState, FiltersMap, KeyedItem } from '@wix/bex-core';\nimport { MessageModalLayoutProps } from '@wix/design-system';\n\ntype Fade = 'static' | 'idle' | 'exit' | 'exiting';\n\nexport interface ActionCellAPI<T, F extends FiltersMap> {\n  openConfirmModal: (props?: Partial<MessageModalLayoutProps>) => void;\n  openConfirmDeleteModal: (props?: Partial<MessageModalLayoutProps>) => void;\n  collection: CollectionState<T, F>;\n  keyedItem: KeyedItem<T>;\n}\n\nexport interface ItemActionsStateParams<T, F extends FiltersMap = FiltersMap> {\n  fade: Fade;\n  keyedItem: KeyedItem<T>;\n  collection: CollectionState<T, F>;\n}\n\nexport class ItemActionsState<T, F extends FiltersMap = FiltersMap> {\n  keyedItem: KeyedItem<T>;\n  fade: Fade;\n  readonly collection: CollectionState<T, F>;\n\n  readonly confirmModal = new ConditionalModalState<\n    Partial<MessageModalLayoutProps>\n  >();\n\n  readonly actionCellAPI: ActionCellAPI<T, F>;\n\n  constructor(params: ItemActionsStateParams<T, F>) {\n    this.fade = params.fade;\n    this.keyedItem = params.keyedItem;\n    this.collection = params.collection;\n\n    makeObservable(this, {\n      keyedItem: observable.ref,\n      fade: observable.ref,\n      onFadeStart: action.bound,\n      onFadeDone: action.bound,\n      setItemIfChanged: action,\n      openConfirmModal: action.bound,\n      openConfirmDeleteModal: action.bound,\n    });\n\n    this.actionCellAPI = {\n      openConfirmModal: this.openConfirmModal,\n      openConfirmDeleteModal: this.openConfirmDeleteModal,\n      collection: this.collection,\n      keyedItem: this.keyedItem,\n    };\n  }\n\n  openConfirmModal(props?: Partial<MessageModalLayoutProps>) {\n    const { translate: t } = this.collection;\n    this.confirmModal.open({\n      title: t('cairo.confirmModal.title'),\n      primaryButtonText: t('cairo.confirm.button'),\n      secondaryButtonText: t('cairo.cancel.button'),\n      ...props,\n    });\n  }\n\n  openConfirmDeleteModal(props?: Partial<MessageModalLayoutProps>) {\n    const { translate: t } = this.collection;\n    this.openConfirmModal({\n      theme: 'destructive',\n      title: t('cairo.deleteModal.title'),\n      content: t('cairo.deleteModal.body'),\n      ...props,\n    });\n  }\n\n  onFadeStart() {\n    if (this.fade === 'exit') {\n      this.fade = 'exiting';\n    }\n  }\n\n  onFadeDone() {\n    const { fade } = this;\n    if (fade === 'exiting') {\n      this.fade = 'idle';\n    }\n  }\n\n  setItemIfChanged(keyedItem: KeyedItem<T>) {\n    if (this.keyedItem !== keyedItem) {\n      this.keyedItem = keyedItem;\n    }\n  }\n}\n"],"mappings":";;;;;;AAAA,IAAAA,KAAA,GAAAC,OAAA;AAEA,IAAAC,QAAA,GAAAD,OAAA;AAkBO,MAAME,gBAAgB,CAAuC;EAWlEC,WAAWA,CAACC,MAAoC,EAAE;IAAA,IAAAC,gBAAA,CAAAC,OAAA;IAAA,IAAAD,gBAAA,CAAAC,OAAA;IAAA,IAAAD,gBAAA,CAAAC,OAAA;IAAA,IAAAD,gBAAA,CAAAC,OAAA,wBAN1B,IAAIC,8BAAqB,CAE/C,CAAC;IAAA,IAAAF,gBAAA,CAAAC,OAAA;IAKD,IAAI,CAACE,IAAI,GAAGJ,MAAM,CAACI,IAAI;IACvB,IAAI,CAACC,SAAS,GAAGL,MAAM,CAACK,SAAS;IACjC,IAAI,CAACC,UAAU,GAAGN,MAAM,CAACM,UAAU;IAEnC,IAAAC,oBAAc,EAAC,IAAI,EAAE;MACnBF,SAAS,EAAEG,gBAAU,CAACC,GAAG;MACzBL,IAAI,EAAEI,gBAAU,CAACC,GAAG;MACpBC,WAAW,EAAEC,YAAM,CAACC,KAAK;MACzBC,UAAU,EAAEF,YAAM,CAACC,KAAK;MACxBE,gBAAgB,EAAEH,YAAM;MACxBI,gBAAgB,EAAEJ,YAAM,CAACC,KAAK;MAC9BI,sBAAsB,EAAEL,YAAM,CAACC;IACjC,CAAC,CAAC;IAEF,IAAI,CAACK,aAAa,GAAG;MACnBF,gBAAgB,EAAE,IAAI,CAACA,gBAAgB;MACvCC,sBAAsB,EAAE,IAAI,CAACA,sBAAsB;MACnDV,UAAU,EAAE,IAAI,CAACA,UAAU;MAC3BD,SAAS,EAAE,IAAI,CAACA;IAClB,CAAC;EACH;EAEAU,gBAAgBA,CAACG,KAAwC,EAAE;IACzD,MAAM;MAAEC,SAAS,EAAEC;IAAE,CAAC,GAAG,IAAI,CAACd,UAAU;IACxC,IAAI,CAACe,YAAY,CAACC,IAAI,CAAC;MACrBC,KAAK,EAAEH,CAAC,CAAC,0BAA0B,CAAC;MACpCI,iBAAiB,EAAEJ,CAAC,CAAC,sBAAsB,CAAC;MAC5CK,mBAAmB,EAAEL,CAAC,CAAC,qBAAqB,CAAC;MAC7C,GAAGF;IACL,CAAC,CAAC;EACJ;EAEAF,sBAAsBA,CAACE,KAAwC,EAAE;IAC/D,MAAM;MAAEC,SAAS,EAAEC;IAAE,CAAC,GAAG,IAAI,CAACd,UAAU;IACxC,IAAI,CAACS,gBAAgB,CAAC;MACpBW,KAAK,EAAE,aAAa;MACpBH,KAAK,EAAEH,CAAC,CAAC,yBAAyB,CAAC;MACnCO,OAAO,EAAEP,CAAC,CAAC,wBAAwB,CAAC;MACpC,GAAGF;IACL,CAAC,CAAC;EACJ;EAEAR,WAAWA,CAAA,EAAG;IACZ,IAAI,IAAI,CAACN,IAAI,KAAK,MAAM,EAAE;MACxB,IAAI,CAACA,IAAI,GAAG,SAAS;IACvB;EACF;EAEAS,UAAUA,CAAA,EAAG;IACX,MAAM;MAAET;IAAK,CAAC,GAAG,IAAI;IACrB,IAAIA,IAAI,KAAK,SAAS,EAAE;MACtB,IAAI,CAACA,IAAI,GAAG,MAAM;IACpB;EACF;EAEAU,gBAAgBA,CAACT,SAAuB,EAAE;IACxC,IAAI,IAAI,CAACA,SAAS,KAAKA,SAAS,EAAE;MAChC,IAAI,CAACA,SAAS,GAAGA,SAAS;IAC5B;EACF;AACF;AAACuB,OAAA,CAAA9B,gBAAA,GAAAA,gBAAA"}

package/dist/cjs/state/MultiLevelSortingDragAndDrop.js

@@ -0,0 +1,83 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.MultiLevelSortingStateDragAndDrop = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _bexCore = require("@wix/bex-core");
+var _bi = require("@wix/bex-core/bi");
+var _sortable = require("@wix/wix-style-react-incubator/dnd-kit/sortable");
+var _events = _interopRequireDefault(require("events"));
+class MultiLevelSortingStateDragAndDrop {
+  constructor({
+    multiLevelSortingState
+  }) {
+    (0, _defineProperty2.default)(this, "multiLevelSortingState", void 0);
+    (0, _defineProperty2.default)(this, "multiLevelSortingActions", void 0);
+    (0, _defineProperty2.default)(this, "events", new _events.default());
+    this.multiLevelSortingState = multiLevelSortingState;
+    this.multiLevelSortingActions = new _bexCore.CollectionOptimisticActions({
+      container: this.container,
+      collection: this.collection
+    });
+  }
+  get reportBi() {
+    return this.multiLevelSortingState.table.reportBi;
+  }
+  get container() {
+    return this.multiLevelSortingState.container;
+  }
+  get collection() {
+    return this.multiLevelSortingState.sortingCollection;
+  }
+  _onSortReorder(fromColumnId, overColumnId) {
+    const {
+      orderedSortableColumns
+    } = this.multiLevelSortingState;
+    const indexBefore = orderedSortableColumns.findIndex(({
+      columnId
+    }) => columnId === fromColumnId);
+    const indexAfter = orderedSortableColumns.findIndex(({
+      columnId
+    }) => columnId === overColumnId);
+    const newOrder = (0, _sortable.arrayMove)(orderedSortableColumns, indexBefore, indexAfter);
+    this.events.emit('beforeReorder');
+    orderedSortableColumns.replace(newOrder);
+    this.events.emit('afterReorder', {
+      indexBefore,
+      indexAfter,
+      columnId: fromColumnId
+    });
+  }
+  init() {
+    const {
+      reportBi,
+      events,
+      multiLevelSortingState
+    } = this;
+    const disposers = [this.multiLevelSortingActions.init(), (0, _bexCore.addEventListener)(events, 'beforeReorder', () => {
+      const prevSortOrder = JSON.stringify(multiLevelSortingState.currentSortOrder);
+      events.once('afterReorder', ({
+        indexBefore,
+        indexAfter,
+        columnId
+      }) => {
+        const newSortOrder = JSON.stringify(multiLevelSortingState.currentSortOrder);
+        const numSortingColumns = multiLevelSortingState.orderedSortableColumns.length;
+        reportBi((0, _bexCore.withoutDefaults)(_bi.cairoReorderingSortColumns)({
+          columnIndexBefore: indexBefore,
+          columnIndexAfter: indexAfter,
+          numSortingColumns,
+          sortingColumn: columnId,
+          newSortOrder,
+          prevSortOrder
+        }));
+      });
+    })];
+    return () => {
+      disposers.forEach(disposer => disposer == null ? void 0 : disposer());
+    };
+  }
+}
+exports.MultiLevelSortingStateDragAndDrop = MultiLevelSortingStateDragAndDrop;
+//# sourceMappingURL=MultiLevelSortingDragAndDrop.js.map

package/dist/cjs/state/MultiLevelSortingDragAndDrop.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_bexCore","require","_bi","_sortable","_events","_interopRequireDefault","MultiLevelSortingStateDragAndDrop","constructor","multiLevelSortingState","_defineProperty2","default","EventEmitter","multiLevelSortingActions","CollectionOptimisticActions","container","collection","reportBi","table","sortingCollection","_onSortReorder","fromColumnId","overColumnId","orderedSortableColumns","indexBefore","findIndex","columnId","indexAfter","newOrder","arrayMove","events","emit","replace","init","disposers","addEventListener","prevSortOrder","JSON","stringify","currentSortOrder","once","newSortOrder","numSortingColumns","length","withoutDefaults","cairoReorderingSortColumns","columnIndexBefore","columnIndexAfter","sortingColumn","forEach","disposer","exports"],"sources":["../../../src/state/MultiLevelSortingDragAndDrop.ts"],"sourcesContent":["import {\n  CollectionOptimisticActions,\n  FiltersMap,\n  TypedEmitter,\n  addEventListener,\n  withoutDefaults,\n} from '@wix/bex-core';\nimport { cairoReorderingSortColumns } from '@wix/bex-core/bi';\nimport { arrayMove } from '@wix/wix-style-react-incubator/dnd-kit/sortable';\nimport EventEmitter from 'events';\nimport {\n  MultiLevelSortingState,\n  SortableColumn,\n} from './MultiLevelSortingState';\n\nexport interface MultiLevelSortingStateDragAndDropParams<\n  T,\n  F extends FiltersMap,\n> {\n  readonly multiLevelSortingState: MultiLevelSortingState<T, F>;\n}\n\nexport class MultiLevelSortingStateDragAndDrop<T, F extends FiltersMap> {\n  readonly multiLevelSortingState;\n  readonly multiLevelSortingActions: CollectionOptimisticActions<\n    SortableColumn,\n    {}\n  >;\n\n  events = new EventEmitter() as TypedEmitter<{\n    beforeReorder: () => unknown;\n    afterReorder: (params: {\n      indexBefore: number;\n      indexAfter: number;\n      columnId: string;\n    }) => unknown;\n  }>;\n\n  constructor({\n    multiLevelSortingState,\n  }: MultiLevelSortingStateDragAndDropParams<T, F>) {\n    this.multiLevelSortingState = multiLevelSortingState;\n    this.multiLevelSortingActions = new CollectionOptimisticActions<\n      SortableColumn,\n      {}\n    >({\n      container: this.container,\n      collection: this.collection,\n    });\n  }\n\n  get reportBi() {\n    return this.multiLevelSortingState.table.reportBi;\n  }\n\n  get container() {\n    return this.multiLevelSortingState.container;\n  }\n\n  get collection() {\n    return this.multiLevelSortingState.sortingCollection;\n  }\n\n  _onSortReorder(fromColumnId: string, overColumnId: string) {\n    const { orderedSortableColumns } = this.multiLevelSortingState;\n\n    const indexBefore = orderedSortableColumns.findIndex(\n      ({ columnId }) => columnId === fromColumnId,\n    );\n    const indexAfter = orderedSortableColumns.findIndex(\n      ({ columnId }) => columnId === overColumnId,\n    );\n\n    const newOrder = arrayMove(orderedSortableColumns, indexBefore, indexAfter);\n\n    this.events.emit('beforeReorder');\n\n    orderedSortableColumns.replace(newOrder);\n\n    this.events.emit('afterReorder', {\n      indexBefore,\n      indexAfter,\n      columnId: fromColumnId,\n    });\n  }\n\n  init() {\n    const { reportBi, events, multiLevelSortingState } = this;\n\n    const disposers = [\n      this.multiLevelSortingActions.init(),\n      addEventListener(events, 'beforeReorder', () => {\n        const prevSortOrder = JSON.stringify(\n          multiLevelSortingState.currentSortOrder,\n        );\n        events.once('afterReorder', ({ indexBefore, indexAfter, columnId }) => {\n          const newSortOrder = JSON.stringify(\n            multiLevelSortingState.currentSortOrder,\n          );\n          const numSortingColumns =\n            multiLevelSortingState.orderedSortableColumns.length;\n\n          reportBi(\n            withoutDefaults(cairoReorderingSortColumns)({\n              columnIndexBefore: indexBefore,\n              columnIndexAfter: indexAfter,\n              numSortingColumns,\n              sortingColumn: columnId,\n              newSortOrder,\n              prevSortOrder,\n            }),\n          );\n        });\n      }),\n    ];\n\n    return () => {\n      disposers.forEach((disposer) => disposer?.());\n    };\n  }\n}\n"],"mappings":"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"}