@wix/patterns 0.8.0

package/dist/cjs/components/DragAndDrop/NestedDragAndDropState.js

@@ -0,0 +1,83 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.NestedDragAndDropState = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _mobx = require("mobx");
+var _DragAndDropState = require("./DragAndDropState");
+class NestedDragAndDropState {
+  constructor(params) {
+    (0, _defineProperty2.default)(this, "dnd", void 0);
+    (0, _defineProperty2.default)(this, "parentCollection", void 0);
+    const {
+      collection
+    } = params;
+    this.parentCollection = collection;
+    this.dnd = new _DragAndDropState.DragAndDropState({
+      ...params,
+      move: this._move.bind(this),
+      announcements: {
+        dragHandleLabel: id => {
+          var _collection$getKeyedI, _item$originalKeyedIt;
+          const {
+            translate: t
+          } = params.container;
+          const item = (_collection$getKeyedI = collection.getKeyedItem(id)) == null ? void 0 : _collection$getKeyedI.item;
+          const itemName = item == null ? void 0 : item.state.collection.itemName;
+          return t('cairo.dragAndDrop.button-role-label.sr', {
+            itemName: item && itemName ? itemName((_item$originalKeyedIt = item.originalKeyedItem) == null ? void 0 : _item$originalKeyedIt.item) : ''
+          });
+        },
+        itemDescription: id => {
+          var _collection$getKeyedI2, _item$originalKeyedIt2;
+          const item = (_collection$getKeyedI2 = collection.getKeyedItem(id)) == null ? void 0 : _collection$getKeyedI2.item;
+          const itemName = item == null ? void 0 : item.state.collection.itemName;
+          return item && itemName ? itemName((_item$originalKeyedIt2 = item.originalKeyedItem) == null ? void 0 : _item$originalKeyedIt2.item) : '';
+        }
+      }
+    });
+  }
+  _move(ev) {
+    var _parentCollection$get, _ev$over;
+    const {
+      parentCollection
+    } = this;
+    const {
+      onSubmit
+    } = this.dnd;
+    const item = (_parentCollection$get = parentCollection.getKeyedItem((_ev$over = ev.over) == null ? void 0 : _ev$over.id)) == null ? void 0 : _parentCollection$get.item;
+    if (!item) {
+      return;
+    }
+    const itemCollection = item == null ? void 0 : item.state.collection;
+    const {
+      optimisticActions
+    } = itemCollection;
+    if (optimisticActions == null) {
+      return;
+    }
+    optimisticActions._orderByMode = 'moves';
+    const dragEndEvent = this.dnd._createDragEndEvent(ev);
+    if (dragEndEvent == null) {
+      return;
+    }
+    optimisticActions.move({
+      ...dragEndEvent,
+      after: dragEndEvent.after && item != null && item.state.collection.getKeyedItem(dragEndEvent.after.key) ? dragEndEvent.after : null,
+      query: itemCollection.originQuery,
+      filtersKeyHash: itemCollection.query.filtersKeyHash
+    }, {
+      submit: onSubmit ? event => onSubmit(this.dnd._createSimpleDragEndEvent(event)) : undefined,
+      collectionSnapshot: (item == null ? void 0 : item.state.getCollectionSnapshot()) ?? {}
+    });
+  }
+  init(params) {
+    const disposers = [this.dnd.init(params)];
+    return (0, _mobx.action)(() => {
+      disposers.forEach(d => d());
+    });
+  }
+}
+exports.NestedDragAndDropState = NestedDragAndDropState;
+//# sourceMappingURL=NestedDragAndDropState.js.map

package/dist/cjs/components/DragAndDrop/NestedDragAndDropState.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_mobx","require","_DragAndDropState","NestedDragAndDropState","constructor","params","_defineProperty2","default","collection","parentCollection","dnd","DragAndDropState","move","_move","bind","announcements","dragHandleLabel","id","_collection$getKeyedI","_item$originalKeyedIt","translate","t","container","item","getKeyedItem","itemName","state","originalKeyedItem","itemDescription","_collection$getKeyedI2","_item$originalKeyedIt2","ev","_parentCollection$get","_ev$over","onSubmit","over","itemCollection","optimisticActions","_orderByMode","dragEndEvent","_createDragEndEvent","after","key","query","originQuery","filtersKeyHash","submit","event","_createSimpleDragEndEvent","undefined","collectionSnapshot","getCollectionSnapshot","init","disposers","action","forEach","d","exports"],"sources":["../../../../src/components/DragAndDrop/NestedDragAndDropState.ts"],"sourcesContent":["import { FiltersMap } from '@wix/bex-core';\nimport { action } from 'mobx';\nimport {\n  DragAndDropBaseStateParams,\n  DragAndDropState,\n  DragItemOver,\n} from './DragAndDropState';\nimport { NestedTableItem } from '../../state';\n\ninterface NestedDragAndDropStateParams<T, F extends FiltersMap>\n  extends DragAndDropBaseStateParams<T, F> {}\nexport class NestedDragAndDropState<C extends string, T, F extends FiltersMap> {\n  dnd: DragAndDropState<T, F>;\n  parentCollection;\n\n  constructor(params: NestedDragAndDropStateParams<T, F>) {\n    const { collection } = params;\n    this.parentCollection = collection;\n\n    this.dnd = new DragAndDropState<T, F>({\n      ...params,\n      move: this._move.bind(this),\n      announcements: {\n        dragHandleLabel: (id) => {\n          const { translate: t } = params.container;\n          const item = collection.getKeyedItem(id as string)?.item;\n          const itemName = item?.state.collection.itemName;\n\n          return t('cairo.dragAndDrop.button-role-label.sr', {\n            itemName:\n              item && itemName ? itemName(item.originalKeyedItem?.item) : '',\n          });\n        },\n        itemDescription: (id) => {\n          const item = collection.getKeyedItem(id as string)?.item;\n          const itemName = item?.state.collection.itemName;\n\n          return item && itemName ? itemName(item.originalKeyedItem?.item) : '';\n        },\n      },\n    });\n  }\n\n  _move(ev: { over: DragItemOver | null }) {\n    const { parentCollection } = this;\n    const { onSubmit } = this.dnd;\n\n    const item: NestedTableItem<C, T, F> | undefined =\n      parentCollection.getKeyedItem(ev.over?.id as string)?.item;\n\n    if (!item) {\n      return;\n    }\n\n    const itemCollection = item?.state.collection;\n    const { optimisticActions } = itemCollection;\n\n    if (optimisticActions == null) {\n      return;\n    }\n\n    optimisticActions._orderByMode = 'moves';\n\n    const dragEndEvent = this.dnd._createDragEndEvent(ev);\n\n    if (dragEndEvent == null) {\n      return;\n    }\n\n    optimisticActions.move(\n      {\n        ...dragEndEvent,\n        after:\n          dragEndEvent.after &&\n          item?.state.collection.getKeyedItem(dragEndEvent.after.key)\n            ? dragEndEvent.after\n            : null,\n        query: itemCollection.originQuery,\n        filtersKeyHash: itemCollection.query.filtersKeyHash,\n      },\n      {\n        submit: onSubmit\n          ? (event) => onSubmit(this.dnd._createSimpleDragEndEvent(event))\n          : undefined,\n        collectionSnapshot: item?.state.getCollectionSnapshot() ?? {},\n      },\n    );\n  }\n\n  init(params: { a11yContainer?: HTMLElement | null | undefined }) {\n    const disposers = [this.dnd.init(params)];\n\n    return action(() => {\n      disposers.forEach((d) => d());\n    });\n  }\n}\n"],"mappings":"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"}

package/dist/cjs/components/DragAndDrop/NestedTableDragAndDropState.js

@@ -0,0 +1,51 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.NestedTableDragAndDropState = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _mobx = require("mobx");
+var _NestedDragAndDropState = require("./NestedDragAndDropState");
+class NestedTableDragAndDropState {
+  constructor(params) {
+    (0, _defineProperty2.default)(this, "tableState", void 0);
+    (0, _defineProperty2.default)(this, "dragAndDrop", void 0);
+    const {
+      nestedState,
+      modalsContainerRef
+    } = params;
+    this.tableState = nestedState.tableState;
+    this.dragAndDrop = new _NestedDragAndDropState.NestedDragAndDropState({
+      state: nestedState.toolbar,
+      collection: nestedState,
+      container: nestedState.tableState.toolbar.container,
+      a11yContainer: modalsContainerRef == null ? void 0 : modalsContainerRef.current
+    });
+    (0, _mobx.makeObservable)(this, {
+      init: _mobx.action
+    });
+  }
+  getStickyColumnsCount({
+    stickyColumns,
+    horizontalScroll
+  }) {
+    const {
+      dragAndDrop
+    } = this;
+    return horizontalScroll && !dragAndDrop.dnd.isDisabled ? stickyColumns + 1 : stickyColumns;
+  }
+  init({
+    a11yContainer
+  }) {
+    const {
+      dragAndDrop,
+      tableState
+    } = this;
+    tableState.tableDragAndDropStateInitialized = true;
+    return dragAndDrop.init({
+      a11yContainer
+    });
+  }
+}
+exports.NestedTableDragAndDropState = NestedTableDragAndDropState;
+//# sourceMappingURL=NestedTableDragAndDropState.js.map

package/dist/cjs/components/DragAndDrop/NestedTableDragAndDropState.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_mobx","require","_NestedDragAndDropState","NestedTableDragAndDropState","constructor","params","_defineProperty2","default","nestedState","modalsContainerRef","tableState","dragAndDrop","NestedDragAndDropState","state","toolbar","collection","container","a11yContainer","current","makeObservable","init","action","getStickyColumnsCount","stickyColumns","horizontalScroll","dnd","isDisabled","tableDragAndDropStateInitialized","exports"],"sources":["../../../../src/components/DragAndDrop/NestedTableDragAndDropState.ts"],"sourcesContent":["import { NestedTableNestedModeState } from '../../state';\nimport { action, makeObservable } from 'mobx';\nimport { NestedDragAndDropState } from './NestedDragAndDropState';\n\nexport interface NestedTableDragAndDropStateParams<C extends string> {\n  readonly nestedState: NestedTableNestedModeState<C>;\n  readonly modalsContainerRef: {\n    current: HTMLElement | null | undefined;\n  };\n}\n\nexport class NestedTableDragAndDropState<C extends string> {\n  readonly tableState;\n  readonly dragAndDrop;\n\n  constructor(params: NestedTableDragAndDropStateParams<C>) {\n    const { nestedState, modalsContainerRef } = params;\n\n    this.tableState = nestedState.tableState;\n\n    this.dragAndDrop = new NestedDragAndDropState({\n      state: nestedState.toolbar,\n      collection: nestedState,\n      container: nestedState.tableState.toolbar.container,\n      a11yContainer: modalsContainerRef?.current,\n    });\n\n    makeObservable(this, {\n      init: action,\n    });\n  }\n\n  getStickyColumnsCount({\n    stickyColumns,\n    horizontalScroll,\n  }: {\n    stickyColumns: number;\n    showSelection?: boolean;\n    horizontalScroll?: boolean;\n  }) {\n    const { dragAndDrop } = this;\n    return horizontalScroll && !dragAndDrop.dnd.isDisabled\n      ? stickyColumns + 1\n      : stickyColumns;\n  }\n\n  init({ a11yContainer }: { a11yContainer?: HTMLElement | null | undefined }) {\n    const { dragAndDrop, tableState } = this;\n\n    tableState.tableDragAndDropStateInitialized = true;\n\n    return dragAndDrop.init({\n      a11yContainer,\n    });\n  }\n}\n"],"mappings":";;;;;;AACA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,uBAAA,GAAAD,OAAA;AASO,MAAME,2BAA2B,CAAmB;EAIzDC,WAAWA,CAACC,MAA4C,EAAE;IAAA,IAAAC,gBAAA,CAAAC,OAAA;IAAA,IAAAD,gBAAA,CAAAC,OAAA;IACxD,MAAM;MAAEC,WAAW;MAAEC;IAAmB,CAAC,GAAGJ,MAAM;IAElD,IAAI,CAACK,UAAU,GAAGF,WAAW,CAACE,UAAU;IAExC,IAAI,CAACC,WAAW,GAAG,IAAIC,8CAAsB,CAAC;MAC5CC,KAAK,EAAEL,WAAW,CAACM,OAAO;MAC1BC,UAAU,EAAEP,WAAW;MACvBQ,SAAS,EAAER,WAAW,CAACE,UAAU,CAACI,OAAO,CAACE,SAAS;MACnDC,aAAa,EAAER,kBAAkB,oBAAlBA,kBAAkB,CAAES;IACrC,CAAC,CAAC;IAEF,IAAAC,oBAAc,EAAC,IAAI,EAAE;MACnBC,IAAI,EAAEC;IACR,CAAC,CAAC;EACJ;EAEAC,qBAAqBA,CAAC;IACpBC,aAAa;IACbC;EAKF,CAAC,EAAE;IACD,MAAM;MAAEb;IAAY,CAAC,GAAG,IAAI;IAC5B,OAAOa,gBAAgB,IAAI,CAACb,WAAW,CAACc,GAAG,CAACC,UAAU,GAClDH,aAAa,GAAG,CAAC,GACjBA,aAAa;EACnB;EAEAH,IAAIA,CAAC;IAAEH;EAAkE,CAAC,EAAE;IAC1E,MAAM;MAAEN,WAAW;MAAED;IAAW,CAAC,GAAG,IAAI;IAExCA,UAAU,CAACiB,gCAAgC,GAAG,IAAI;IAElD,OAAOhB,WAAW,CAACS,IAAI,CAAC;MACtBH;IACF,CAAC,CAAC;EACJ;AACF;AAACW,OAAA,CAAAzB,2BAAA,GAAAA,2BAAA"}

package/dist/cjs/components/DragAndDrop/ReorderModeState.js

@@ -0,0 +1,148 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.ReorderModeState = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _bexCore = require("@wix/bex-core");
+var _mobx = require("mobx");
+var _events = require("events");
+var _bi = require("@wix/bex-core/bi");
+class ReorderModeState {
+  constructor(params) {
+    (0, _defineProperty2.default)(this, "discardChangesModal", new _bexCore.ConditionalModalState());
+    (0, _defineProperty2.default)(this, "feature", 'Drag and Drop');
+    (0, _defineProperty2.default)(this, "origin", 'Table Toolbar');
+    (0, _defineProperty2.default)(this, "toolbar", void 0);
+    (0, _defineProperty2.default)(this, "container", void 0);
+    (0, _defineProperty2.default)(this, "_isReorderModeSubmitted", false);
+    (0, _defineProperty2.default)(this, "pendingPromise", null);
+    (0, _defineProperty2.default)(this, "closeSidePanel", void 0);
+    (0, _defineProperty2.default)(this, "events", new _events.EventEmitter());
+    this.toolbar = params.toolbar;
+    this.container = params.container;
+    this.closeSidePanel = params.closeSidePanel;
+    (0, _mobx.makeObservable)(this, {
+      isReorderModeToolbarVisible: _mobx.computed,
+      isReorderModePending: _mobx.computed,
+      _isReorderModeSubmitted: _mobx.observable.ref,
+      _setIsReorderModeSubmitted: _mobx.action
+    });
+    this.init();
+  }
+  init() {
+    const disposers = [(0, _mobx.reaction)(() => this.moves.length, async () => {
+      if (this.moves.length === 0) {
+        this.pendingPromise = null;
+        this._setIsReorderModeSubmitted(false);
+      } else {
+        var _this$closeSidePanel;
+        (_this$closeSidePanel = this.closeSidePanel) == null || _this$closeSidePanel.call(this);
+      }
+    })];
+    return () => {
+      disposers.forEach(disposer => disposer == null ? void 0 : disposer());
+    };
+  }
+  get optimisticActions() {
+    return this.toolbar.collection._optimisticActions;
+  }
+  get patches() {
+    var _this$optimisticActio;
+    return ((_this$optimisticActio = this.optimisticActions) == null ? void 0 : _this$optimisticActio.state.patches) ?? [];
+  }
+  get dnd() {
+    return this.toolbar._dnd;
+  }
+  get moves() {
+    const {
+      toolbar: {
+        _dnd
+      }
+    } = this;
+    if (_dnd == null) {
+      return [];
+    }
+    return this.patches.filter(patch => patch.move !== undefined && !patch.isStale).map(({
+      move
+    }) => _dnd._createSimpleDragEndEvent(move)) ?? [];
+  }
+  get isReorderModeToolbarVisible() {
+    return this.moves.length > 0 && !this._isReorderModeSubmitted;
+  }
+  get isReorderModePending() {
+    return this.moves.length > 0 && this.pendingPromise !== null;
+  }
+  get snapshot() {
+    var _this$optimisticActio2;
+    return ((_this$optimisticActio2 = this.optimisticActions) == null ? void 0 : _this$optimisticActio2.collection.result.pages) ?? [];
+  }
+  get onSubmit() {
+    if (this.pendingPromise) {
+      return this.pendingPromise;
+    }
+    const {
+      events
+    } = this;
+    return this.pendingPromise = new Promise((resolve, reject) => {
+      events.once('submitSuccess', resolve);
+      events.once('submitError', reject);
+    });
+  }
+  _showSuccessToast() {
+    var _this$container$showT, _this$container;
+    (_this$container$showT = (_this$container = this.container).showToast) == null || _this$container$showT.call(_this$container, {
+      type: 'SUCCESS',
+      message: this.container.translate('cairo.dragAndDrop.reorderMode.toast.success'),
+      biName: 'reorder-mode-submit-success'
+    });
+  }
+  _reportApplyButtonClickedBiEvent() {
+    this.dnd.reportBi((0, _bexCore.withoutDefaults)(_bi.cairoApplyButtonClicked)({
+      numOfActions: this.moves.length,
+      feature: this.feature,
+      origin: this.origin
+    }));
+  }
+  _reportDiscardChangesBeforeApplyBiEvent() {
+    this.dnd.reportBi((0, _bexCore.withoutDefaults)(_bi.cairoDiscardChangesBeforeApply)({
+      numOfActions: this.moves.length,
+      feature: this.feature,
+      origin: this.origin
+    }));
+  }
+  reportLearnMoreClickedBiEvent() {
+    this.dnd.reportBi((0, _bexCore.withoutDefaults)(_bi.cairoLearnMore)({
+      origin: this.origin
+    }));
+  }
+  async onBulkCancel() {
+    this.discardChangesModal.open(null);
+    const {
+      result
+    } = await this.discardChangesModal.modal.promise();
+    if (result === 'confirmed') {
+      var _this$optimisticActio3;
+      this._reportDiscardChangesBeforeApplyBiEvent();
+      this.events.emit('submitError', new Error((_this$optimisticActio3 = this.optimisticActions) == null ? void 0 : _this$optimisticActio3.reorderModeCanceledMessage));
+    }
+  }
+  async onBulkSubmit() {
+    this._reportApplyButtonClickedBiEvent();
+    try {
+      var _this$dnd$onBulkSubmi, _this$dnd;
+      this._setIsReorderModeSubmitted(true);
+      await ((_this$dnd$onBulkSubmi = (_this$dnd = this.dnd).onBulkSubmit) == null ? void 0 : _this$dnd$onBulkSubmi.call(_this$dnd, this.moves, this.snapshot));
+      this._showSuccessToast();
+      this.events.emit('submitSuccess');
+    } catch (error) {
+      this.events.emit('submitError', error);
+      this.pendingPromise = null;
+    }
+  }
+  _setIsReorderModeSubmitted(submitted) {
+    this._isReorderModeSubmitted = submitted;
+  }
+}
+exports.ReorderModeState = ReorderModeState;
+//# sourceMappingURL=ReorderModeState.js.map

package/dist/cjs/components/DragAndDrop/ReorderModeState.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_bexCore","require","_mobx","_events","_bi","ReorderModeState","constructor","params","_defineProperty2","default","ConditionalModalState","EventEmitter","toolbar","container","closeSidePanel","makeObservable","isReorderModeToolbarVisible","computed","isReorderModePending","_isReorderModeSubmitted","observable","ref","_setIsReorderModeSubmitted","action","init","disposers","reaction","moves","length","pendingPromise","_this$closeSidePanel","call","forEach","disposer","optimisticActions","collection","_optimisticActions","patches","_this$optimisticActio","state","dnd","_dnd","filter","patch","move","undefined","isStale","map","_createSimpleDragEndEvent","snapshot","_this$optimisticActio2","result","pages","onSubmit","events","Promise","resolve","reject","once","_showSuccessToast","_this$container$showT","_this$container","showToast","type","message","translate","biName","_reportApplyButtonClickedBiEvent","reportBi","withoutDefaults","cairoApplyButtonClicked","numOfActions","feature","origin","_reportDiscardChangesBeforeApplyBiEvent","cairoDiscardChangesBeforeApply","reportLearnMoreClickedBiEvent","cairoLearnMore","onBulkCancel","discardChangesModal","open","modal","promise","_this$optimisticActio3","emit","Error","reorderModeCanceledMessage","onBulkSubmit","_this$dnd$onBulkSubmi","_this$dnd","error","submitted","exports"],"sources":["../../../../src/components/DragAndDrop/ReorderModeState.ts"],"sourcesContent":["import {\n  WixPatternsContainer,\n  ConditionalModalState,\n  FiltersMap,\n  TypedEmitter,\n  withoutDefaults,\n  CloseSidePanel,\n} from '@wix/bex-core';\nimport { action, computed, makeObservable, observable, reaction } from 'mobx';\nimport { CollectionDragEndEvent } from './DragAndDrop';\nimport { EventEmitter } from 'events';\nimport {\n  cairoApplyButtonClicked,\n  cairoDiscardChangesBeforeApply,\n  cairoLearnMore,\n} from '@wix/bex-core/bi';\nimport { ToolbarCollectionState } from '../../state';\n\nexport class ReorderModeState<T, F extends FiltersMap> {\n  readonly discardChangesModal = new ConditionalModalState<null>();\n  readonly feature = 'Drag and Drop';\n  readonly origin = 'Table Toolbar';\n\n  toolbar: ToolbarCollectionState<T, F>;\n  container: WixPatternsContainer;\n\n  _isReorderModeSubmitted = false;\n  pendingPromise: Promise<void> | null = null;\n\n  closeSidePanel?: CloseSidePanel;\n\n  readonly events = new EventEmitter() as TypedEmitter<{\n    submitSuccess: () => void;\n    submitError: (error: unknown) => void;\n  }>;\n\n  constructor(params: {\n    toolbar: ToolbarCollectionState<T, F>;\n    container: WixPatternsContainer;\n    closeSidePanel?: CloseSidePanel;\n  }) {\n    this.toolbar = params.toolbar;\n    this.container = params.container;\n    this.closeSidePanel = params.closeSidePanel;\n\n    makeObservable(this, {\n      isReorderModeToolbarVisible: computed,\n      isReorderModePending: computed,\n      _isReorderModeSubmitted: observable.ref,\n      _setIsReorderModeSubmitted: action,\n    });\n\n    this.init();\n  }\n\n  init() {\n    const disposers = [\n      reaction(\n        () => this.moves.length,\n        async () => {\n          if (this.moves.length === 0) {\n            this.pendingPromise = null;\n            this._setIsReorderModeSubmitted(false);\n          } else {\n            this.closeSidePanel?.();\n          }\n        },\n      ),\n    ];\n\n    return () => {\n      disposers.forEach((disposer) => disposer?.());\n    };\n  }\n\n  get optimisticActions() {\n    return this.toolbar.collection._optimisticActions;\n  }\n\n  get patches() {\n    return this.optimisticActions?.state.patches ?? [];\n  }\n\n  get dnd() {\n    return this.toolbar._dnd!;\n  }\n\n  get moves(): CollectionDragEndEvent<T, F>[] {\n    const {\n      toolbar: { _dnd },\n    } = this;\n\n    if (_dnd == null) {\n      return [];\n    }\n\n    return (\n      this.patches\n        .filter((patch) => patch.move !== undefined && !patch.isStale)\n        .map(({ move }) => _dnd._createSimpleDragEndEvent(move!)) ?? []\n    );\n  }\n\n  get isReorderModeToolbarVisible() {\n    return this.moves.length > 0 && !this._isReorderModeSubmitted;\n  }\n\n  get isReorderModePending() {\n    return this.moves.length > 0 && this.pendingPromise !== null;\n  }\n\n  get snapshot(): T[][] {\n    return this.optimisticActions?.collection.result.pages ?? [];\n  }\n\n  get onSubmit() {\n    if (this.pendingPromise) {\n      return this.pendingPromise;\n    }\n\n    const { events } = this;\n    return (this.pendingPromise = new Promise<void>((resolve, reject) => {\n      events.once('submitSuccess', resolve);\n      events.once('submitError', reject);\n    }));\n  }\n\n  _showSuccessToast() {\n    this.container.showToast?.({\n      type: 'SUCCESS',\n      message: this.container.translate(\n        'cairo.dragAndDrop.reorderMode.toast.success',\n      ),\n      biName: 'reorder-mode-submit-success',\n    });\n  }\n\n  _reportApplyButtonClickedBiEvent() {\n    this.dnd.reportBi(\n      withoutDefaults(cairoApplyButtonClicked)({\n        numOfActions: this.moves.length,\n        feature: this.feature,\n        origin: this.origin,\n      }),\n    );\n  }\n\n  _reportDiscardChangesBeforeApplyBiEvent() {\n    this.dnd.reportBi(\n      withoutDefaults(cairoDiscardChangesBeforeApply)({\n        numOfActions: this.moves.length,\n        feature: this.feature,\n        origin: this.origin,\n      }),\n    );\n  }\n\n  reportLearnMoreClickedBiEvent() {\n    this.dnd.reportBi(\n      withoutDefaults(cairoLearnMore)({\n        origin: this.origin,\n      }),\n    );\n  }\n\n  async onBulkCancel() {\n    this.discardChangesModal.open(null);\n    const { result } = await this.discardChangesModal.modal.promise();\n    if (result === 'confirmed') {\n      this._reportDiscardChangesBeforeApplyBiEvent();\n      this.events.emit(\n        'submitError',\n        new Error(this.optimisticActions?.reorderModeCanceledMessage),\n      );\n    }\n  }\n\n  async onBulkSubmit() {\n    this._reportApplyButtonClickedBiEvent();\n\n    try {\n      this._setIsReorderModeSubmitted(true);\n      await this.dnd.onBulkSubmit?.(this.moves, this.snapshot);\n      this._showSuccessToast();\n      this.events.emit('submitSuccess');\n    } catch (error) {\n      this.events.emit('submitError', error);\n      this.pendingPromise = null;\n    }\n  }\n\n  _setIsReorderModeSubmitted(submitted: boolean) {\n    this._isReorderModeSubmitted = submitted;\n  }\n}\n"],"mappings":"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"}

package/dist/cjs/components/DragAndDrop/TableDragAndDropState.js

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.TableDragAndDropState = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _mobx = require("mobx");
+var _CollectionDragAndDropState = require("./CollectionDragAndDropState");
+class TableDragAndDropState {
+  constructor(params) {
+    var _params$modalsContain;
+    (0, _defineProperty2.default)(this, "tableState", void 0);
+    (0, _defineProperty2.default)(this, "dragAndDrop", void 0);
+    this.tableState = params.tableState;
+    this.dragAndDrop = new _CollectionDragAndDropState.CollectionDragAndDropState({
+      state: params.tableState.toolbar,
+      container: params.tableState.toolbar.container,
+      a11yContainer: (_params$modalsContain = params.modalsContainerRef) == null ? void 0 : _params$modalsContain.current
+    });
+    (0, _mobx.makeObservable)(this, {
+      init: _mobx.action
+    });
+  }
+  getStickyColumnsCount({
+    stickyColumns,
+    horizontalScroll
+  }) {
+    const {
+      dragAndDrop
+    } = this;
+    return horizontalScroll && !dragAndDrop.dnd.isDisabled ? stickyColumns + 1 : stickyColumns;
+  }
+  init({
+    a11yContainer
+  }) {
+    const {
+      dragAndDrop,
+      tableState
+    } = this;
+    tableState.tableDragAndDropStateInitialized = true;
+    return dragAndDrop.init({
+      a11yContainer
+    });
+  }
+}
+exports.TableDragAndDropState = TableDragAndDropState;
+//# sourceMappingURL=TableDragAndDropState.js.map

package/dist/cjs/components/DragAndDrop/TableDragAndDropState.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_mobx","require","_CollectionDragAndDropState","TableDragAndDropState","constructor","params","_params$modalsContain","_defineProperty2","default","tableState","dragAndDrop","CollectionDragAndDropState","state","toolbar","container","a11yContainer","modalsContainerRef","current","makeObservable","init","action","getStickyColumnsCount","stickyColumns","horizontalScroll","dnd","isDisabled","tableDragAndDropStateInitialized","exports"],"sources":["../../../../src/components/DragAndDrop/TableDragAndDropState.ts"],"sourcesContent":["import { FiltersMap } from '@wix/bex-core';\nimport { TableState } from '../../state';\nimport { action, makeObservable } from 'mobx';\nimport { CollectionDragAndDropState } from './CollectionDragAndDropState';\n\nexport interface TableDragAndDropStateParams<T, F extends FiltersMap> {\n  readonly tableState: TableState<T, F>;\n  readonly modalsContainerRef: {\n    current: HTMLElement | null | undefined;\n  };\n}\n\nexport class TableDragAndDropState<T, F extends FiltersMap> {\n  readonly tableState;\n  readonly dragAndDrop;\n\n  constructor(params: TableDragAndDropStateParams<T, F>) {\n    this.tableState = params.tableState;\n    this.dragAndDrop = new CollectionDragAndDropState({\n      state: params.tableState.toolbar,\n      container: params.tableState.toolbar.container,\n      a11yContainer: params.modalsContainerRef?.current,\n    });\n\n    makeObservable(this, {\n      init: action,\n    });\n  }\n\n  getStickyColumnsCount({\n    stickyColumns,\n    horizontalScroll,\n  }: {\n    stickyColumns: number;\n    showSelection?: boolean;\n    horizontalScroll?: boolean;\n  }) {\n    const { dragAndDrop } = this;\n    return horizontalScroll && !dragAndDrop.dnd.isDisabled\n      ? stickyColumns + 1\n      : stickyColumns;\n  }\n\n  init({ a11yContainer }: { a11yContainer?: HTMLElement | null | undefined }) {\n    const { dragAndDrop, tableState } = this;\n\n    tableState.tableDragAndDropStateInitialized = true;\n\n    return dragAndDrop.init({\n      a11yContainer,\n    });\n  }\n}\n"],"mappings":";;;;;;AAEA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,2BAAA,GAAAD,OAAA;AASO,MAAME,qBAAqB,CAA0B;EAI1DC,WAAWA,CAACC,MAAyC,EAAE;IAAA,IAAAC,qBAAA;IAAA,IAAAC,gBAAA,CAAAC,OAAA;IAAA,IAAAD,gBAAA,CAAAC,OAAA;IACrD,IAAI,CAACC,UAAU,GAAGJ,MAAM,CAACI,UAAU;IACnC,IAAI,CAACC,WAAW,GAAG,IAAIC,sDAA0B,CAAC;MAChDC,KAAK,EAAEP,MAAM,CAACI,UAAU,CAACI,OAAO;MAChCC,SAAS,EAAET,MAAM,CAACI,UAAU,CAACI,OAAO,CAACC,SAAS;MAC9CC,aAAa,GAAAT,qBAAA,GAAED,MAAM,CAACW,kBAAkB,qBAAzBV,qBAAA,CAA2BW;IAC5C,CAAC,CAAC;IAEF,IAAAC,oBAAc,EAAC,IAAI,EAAE;MACnBC,IAAI,EAAEC;IACR,CAAC,CAAC;EACJ;EAEAC,qBAAqBA,CAAC;IACpBC,aAAa;IACbC;EAKF,CAAC,EAAE;IACD,MAAM;MAAEb;IAAY,CAAC,GAAG,IAAI;IAC5B,OAAOa,gBAAgB,IAAI,CAACb,WAAW,CAACc,GAAG,CAACC,UAAU,GAClDH,aAAa,GAAG,CAAC,GACjBA,aAAa;EACnB;EAEAH,IAAIA,CAAC;IAAEJ;EAAkE,CAAC,EAAE;IAC1E,MAAM;MAAEL,WAAW;MAAED;IAAW,CAAC,GAAG,IAAI;IAExCA,UAAU,CAACiB,gCAAgC,GAAG,IAAI;IAElD,OAAOhB,WAAW,CAACS,IAAI,CAAC;MACtBJ;IACF,CAAC,CAAC;EACJ;AACF;AAACY,OAAA,CAAAxB,qBAAA,GAAAA,qBAAA"}

package/dist/cjs/components/DragAndDrop/hasExceededDistance.js

@@ -0,0 +1,22 @@
+"use strict";
+
+exports.__esModule = true;
+exports.hasExceededDistance = hasExceededDistance;
+function hasExceededDistance({
+  delta,
+  measurement,
+  axis = 'all'
+}) {
+  const dx = Math.abs(delta.x);
+  const dy = Math.abs(delta.y);
+  switch (axis) {
+    case 'y':
+      return dy > measurement;
+    case 'x':
+      return dx > measurement;
+    case 'all':
+    default:
+      return Math.sqrt(dx ** 2 + dy ** 2) > measurement;
+  }
+}
+//# sourceMappingURL=hasExceededDistance.js.map

package/dist/cjs/components/DragAndDrop/hasExceededDistance.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["hasExceededDistance","delta","measurement","axis","dx","Math","abs","x","dy","y","sqrt"],"sources":["../../../../src/components/DragAndDrop/hasExceededDistance.ts"],"sourcesContent":["export function hasExceededDistance({\n  delta,\n  measurement,\n  axis = 'all',\n}: {\n  delta: { x: number; y: number };\n  measurement: number;\n  axis?: 'x' | 'y' | 'all';\n}): boolean {\n  const dx = Math.abs(delta.x);\n  const dy = Math.abs(delta.y);\n\n  switch (axis) {\n    case 'y':\n      return dy > measurement;\n    case 'x':\n      return dx > measurement;\n    case 'all':\n    default:\n      return Math.sqrt(dx ** 2 + dy ** 2) > measurement;\n  }\n}\n"],"mappings":";;;;AAAO,SAASA,mBAAmBA,CAAC;EAClCC,KAAK;EACLC,WAAW;EACXC,IAAI,GAAG;AAKT,CAAC,EAAW;EACV,MAAMC,EAAE,GAAGC,IAAI,CAACC,GAAG,CAACL,KAAK,CAACM,CAAC,CAAC;EAC5B,MAAMC,EAAE,GAAGH,IAAI,CAACC,GAAG,CAACL,KAAK,CAACQ,CAAC,CAAC;EAE5B,QAAQN,IAAI;IACV,KAAK,GAAG;MACN,OAAOK,EAAE,GAAGN,WAAW;IACzB,KAAK,GAAG;MACN,OAAOE,EAAE,GAAGF,WAAW;IACzB,KAAK,KAAK;IACV;MACE,OAAOG,IAAI,CAACK,IAAI,CAACN,EAAE,IAAI,CAAC,GAAGI,EAAE,IAAI,CAAC,CAAC,GAAGN,WAAW;EACrD;AACF"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"names":["_DragAndDrop","require","Object","keys","forEach","key","exports","_DragAndDropState","_CollectionDragAndDropState"],"sources":["../../../../src/components/DragAndDrop/index.ts"],"sourcesContent":["export * from './DragAndDrop';\nexport * from './DragAndDropState';\nexport * from './CollectionDragAndDropState';\n"],"mappings":";;;AAAA,IAAAA,YAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAH,YAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAL,YAAA,CAAAK,GAAA;EAAAC,OAAA,CAAAD,GAAA,IAAAL,YAAA,CAAAK,GAAA;AAAA;AACA,IAAAE,iBAAA,GAAAN,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAI,iBAAA,EAAAH,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAE,iBAAA,CAAAF,GAAA;EAAAC,OAAA,CAAAD,GAAA,IAAAE,iBAAA,CAAAF,GAAA;AAAA;AACA,IAAAG,2BAAA,GAAAP,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAK,2BAAA,EAAAJ,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAG,2BAAA,CAAAH,GAAA;EAAAC,OAAA,CAAAD,GAAA,IAAAG,2BAAA,CAAAH,GAAA;AAAA"}

package/dist/cjs/components/DragAndDrop/initReordeModeState.js

@@ -0,0 +1,20 @@
+"use strict";
+
+exports.__esModule = true;
+exports.setReorderModeState = setReorderModeState;
+var _ReorderModeState = require("./ReorderModeState");
+var _mobx = require("mobx");
+function setReorderModeState(toolbar) {
+  (0, _mobx.runInAction)(() => {
+    var _toolbar$_dnd;
+    if (!toolbar._dnd) {
+      return;
+    }
+    (_toolbar$_dnd = toolbar._dnd).reorderModeState ?? (_toolbar$_dnd.reorderModeState = new _ReorderModeState.ReorderModeState({
+      toolbar,
+      container: toolbar.container,
+      closeSidePanel: toolbar.closeSidePanel
+    }));
+  });
+}
+//# sourceMappingURL=initReordeModeState.js.map

package/dist/cjs/components/DragAndDrop/initReordeModeState.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_ReorderModeState","require","_mobx","setReorderModeState","toolbar","runInAction","_toolbar$_dnd","_dnd","reorderModeState","ReorderModeState","container","closeSidePanel"],"sources":["../../../../src/components/DragAndDrop/initReordeModeState.ts"],"sourcesContent":["import { FiltersMap } from '@wix/bex-core';\nimport { ToolbarCollectionState } from '../../state';\nimport { ReorderModeState } from './ReorderModeState';\nimport { runInAction } from 'mobx';\n\nexport function setReorderModeState<T, F extends FiltersMap>(\n  toolbar: ToolbarCollectionState<T, F>,\n) {\n  runInAction(() => {\n    if (!toolbar._dnd) {\n      return;\n    }\n    toolbar._dnd.reorderModeState ??= new ReorderModeState({\n      toolbar,\n      container: toolbar.container,\n      closeSidePanel: toolbar.closeSidePanel,\n    });\n  });\n}\n"],"mappings":";;;;AAEA,IAAAA,iBAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AAEO,SAASE,mBAAmBA,CACjCC,OAAqC,EACrC;EACA,IAAAC,iBAAW,EAAC,MAAM;IAAA,IAAAC,aAAA;IAChB,IAAI,CAACF,OAAO,CAACG,IAAI,EAAE;MACjB;IACF;IACA,CAAAD,aAAA,GAAAF,OAAO,CAACG,IAAI,EAACC,gBAAgB,KAA7BF,aAAA,CAAaE,gBAAgB,GAAK,IAAIC,kCAAgB,CAAC;MACrDL,OAAO;MACPM,SAAS,EAAEN,OAAO,CAACM,SAAS;MAC5BC,cAAc,EAAEP,OAAO,CAACO;IAC1B,CAAC,CAAC;EACJ,CAAC,CAAC;AACJ"}

package/dist/cjs/components/DragAndDrop/rectIntersection.js

@@ -0,0 +1,12 @@
+"use strict";
+
+exports.__esModule = true;
+exports.haveIntersection = haveIntersection;
+function haveIntersection(entry, target) {
+  const top = Math.max(target.top, entry.top);
+  const left = Math.max(target.left, entry.left);
+  const right = Math.min(target.left + target.width, entry.left + entry.width);
+  const bottom = Math.min(target.top + target.height, entry.top + entry.height);
+  return left < right && top < bottom;
+}
+//# sourceMappingURL=rectIntersection.js.map

package/dist/cjs/components/DragAndDrop/rectIntersection.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["haveIntersection","entry","target","top","Math","max","left","right","min","width","bottom","height"],"sources":["../../../../src/components/DragAndDrop/rectIntersection.ts"],"sourcesContent":["interface Rect {\n  height: number;\n  left: number;\n  top: number;\n  width: number;\n}\n\nexport function haveIntersection(entry: Rect, target: Rect) {\n  const top = Math.max(target.top, entry.top);\n  const left = Math.max(target.left, entry.left);\n  const right = Math.min(target.left + target.width, entry.left + entry.width);\n  const bottom = Math.min(target.top + target.height, entry.top + entry.height);\n\n  return left < right && top < bottom;\n}\n"],"mappings":";;;;AAOO,SAASA,gBAAgBA,CAACC,KAAW,EAAEC,MAAY,EAAE;EAC1D,MAAMC,GAAG,GAAGC,IAAI,CAACC,GAAG,CAACH,MAAM,CAACC,GAAG,EAAEF,KAAK,CAACE,GAAG,CAAC;EAC3C,MAAMG,IAAI,GAAGF,IAAI,CAACC,GAAG,CAACH,MAAM,CAACI,IAAI,EAAEL,KAAK,CAACK,IAAI,CAAC;EAC9C,MAAMC,KAAK,GAAGH,IAAI,CAACI,GAAG,CAACN,MAAM,CAACI,IAAI,GAAGJ,MAAM,CAACO,KAAK,EAAER,KAAK,CAACK,IAAI,GAAGL,KAAK,CAACQ,KAAK,CAAC;EAC5E,MAAMC,MAAM,GAAGN,IAAI,CAACI,GAAG,CAACN,MAAM,CAACC,GAAG,GAAGD,MAAM,CAACS,MAAM,EAAEV,KAAK,CAACE,GAAG,GAAGF,KAAK,CAACU,MAAM,CAAC;EAE7E,OAAOL,IAAI,GAAGC,KAAK,IAAIJ,GAAG,GAAGO,MAAM;AACrC"}

package/dist/cjs/components/DragHandle/DragHandle.js

@@ -0,0 +1,52 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.DragHandle = DragHandle;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _DragHandleStCss = require("./DragHandle.st.css.js");
+var _react = _interopRequireDefault(require("react"));
+var _system = require("@wix/wix-ui-icons-common/system");
+var _jsxFileName = "/home/builduser/work/db7ea24852bc3350/packages/cairo/dist/cjs/components/DragHandle/DragHandle.tsx";
+function DragHandle(props) {
+  const {
+    dataHook,
+    domRef,
+    dragging,
+    disabled,
+    className,
+    ...rest
+  } = props;
+  const dragHandleIcon = disabled ? /*#__PURE__*/_react.default.createElement(_system.DragAndDropLockedLarge, {
+    "data-hook": "dnd-locked",
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 18,
+      columnNumber: 5
+    }
+  }) : /*#__PURE__*/_react.default.createElement(_system.DragAndDropLarge, {
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 20,
+      columnNumber: 5
+    }
+  });
+  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+    "data-hook": dataHook,
+    ref: domRef
+  }, rest, {
+    className: (0, _DragHandleStCss.st)(_DragHandleStCss.classes.root, {
+      disabled,
+      dragging
+    }, className),
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 24,
+      columnNumber: 5
+    }
+  }), dragHandleIcon);
+}
+//# sourceMappingURL=DragHandle.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_DragHandleStCss","require","_react","_interopRequireDefault","_system","_jsxFileName","DragHandle","props","dataHook","domRef","dragging","disabled","className","rest","dragHandleIcon","default","createElement","DragAndDropLockedLarge","__self","__source","fileName","lineNumber","columnNumber","DragAndDropLarge","_extends2","ref","st","classes","root"],"sources":["../../../../src/components/DragHandle/DragHandle.tsx"],"sourcesContent":["import { classes, st } from './DragHandle.st.css.js';\nimport React, { HTMLAttributes } from 'react';\nimport {\n  DragAndDropLockedLarge,\n  DragAndDropLarge,\n} from '@wix/wix-ui-icons-common/system';\n\nexport interface DragHandleProps extends HTMLAttributes<HTMLDivElement> {\n  dataHook?: string;\n  dragging?: boolean;\n  disabled?: boolean;\n  domRef?: React.Ref<HTMLDivElement>;\n}\n\nexport function DragHandle(props: DragHandleProps) {\n  const { dataHook, domRef, dragging, disabled, className, ...rest } = props;\n  const dragHandleIcon = disabled ? (\n    <DragAndDropLockedLarge data-hook=\"dnd-locked\" />\n  ) : (\n    <DragAndDropLarge />\n  );\n\n  return (\n    <div\n      data-hook={dataHook}\n      ref={domRef}\n      {...rest}\n      className={st(\n        classes.root,\n        {\n          disabled,\n          dragging,\n        },\n        className,\n      )}\n    >\n      {dragHandleIcon}\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAAA,IAAAA,gBAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,OAAA,GAAAH,OAAA;AAGyC,IAAAI,YAAA;AASlC,SAASC,UAAUA,CAACC,KAAsB,EAAE;EACjD,MAAM;IAAEC,QAAQ;IAAEC,MAAM;IAAEC,QAAQ;IAAEC,QAAQ;IAAEC,SAAS;IAAE,GAAGC;EAAK,CAAC,GAAGN,KAAK;EAC1E,MAAMO,cAAc,GAAGH,QAAQ,gBAC7BT,MAAA,CAAAa,OAAA,CAAAC,aAAA,CAACZ,OAAA,CAAAa,sBAAsB;IAAC,aAAU,YAAY;IAAAC,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAf,YAAA;MAAAgB,UAAA;MAAAC,YAAA;IAAA;EAAA,CAAE,CAAC,gBAEjDpB,MAAA,CAAAa,OAAA,CAAAC,aAAA,CAACZ,OAAA,CAAAmB,gBAAgB;IAAAL,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAf,YAAA;MAAAgB,UAAA;MAAAC,YAAA;IAAA;EAAA,CAAE,CACpB;EAED,oBACEpB,MAAA,CAAAa,OAAA,CAAAC,aAAA,YAAAQ,SAAA,CAAAT,OAAA;IACE,aAAWP,QAAS;IACpBiB,GAAG,EAAEhB;EAAO,GACRI,IAAI;IACRD,SAAS,EAAE,IAAAc,mBAAE,EACXC,wBAAO,CAACC,IAAI,EACZ;MACEjB,QAAQ;MACRD;IACF,CAAC,EACDE,SACF,CAAE;IAAAM,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAf,YAAA;MAAAgB,UAAA;MAAAC,YAAA;IAAA;EAAA,IAEDR,cACE,CAAC;AAEV"}

package/dist/cjs/components/DragHandle/DragHandle.st.css

@@ -0,0 +1,27 @@
+ .root {
+  -st-states: disabled, dragging;
+  display: flex;
+  align-items: center;
+}
+
+.root:not(:disabled) {
+  cursor: grab;
+  color: #A8CAFF;
+}
+
+.root:disabled {
+  color: #ACAFC4
+}
+
+.root:focus-visible:not(:disabled) {
+  outline: none;
+  box-shadow: 0 0 0 3px #A6D0FF;
+}
+
+.root:disabled {
+  pointer-events: none;
+}
+
+.root:dragging:not(:disabled) {
+  cursor: grabbing;
+}

package/dist/cjs/components/DragHandle/DragHandle.st.css.js

@@ -0,0 +1,22 @@
+"use strict";
+
+exports.__esModule = true;
+exports.vars = exports.style = exports.stVars = exports.st = exports.namespace = exports.layers = exports.keyframes = exports.cssStates = exports.containers = exports.classes = void 0;
+var _stylableEsmRuntime = require("../../stylable-esm-runtime.js");
+// @ts-nocheck
+
+var _namespace_ = "DragHandle4102668069";
+var _style_ = _stylableEsmRuntime.classesRuntime.bind(null, _namespace_);
+var cssStates = exports.cssStates = _stylableEsmRuntime.statesRuntime.bind(null, _namespace_);
+var style = exports.style = _style_;
+var st = exports.st = _style_;
+var namespace = exports.namespace = _namespace_;
+var classes = exports.classes = {
+  "root": "DragHandle4102668069__root"
+};
+var keyframes = exports.keyframes = {};
+var layers = exports.layers = {};
+var containers = exports.containers = {};
+var stVars = exports.stVars = {};
+var vars = exports.vars = {};
+//# sourceMappingURL=DragHandle.st.css.js.map

package/dist/cjs/components/DragHandle/DragHandle.st.css.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../src/components/DragHandle/DragHandle.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"DragHandle4102668069\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"DragHandle4102668069__root\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,sBAAsB;AACxC,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAAK,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AACnB,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC;AAA4B,CAAC;AACnD,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG,CAAC,CAAC"}