@wix/patterns 1.232.0 → 1.234.0

package/dist/esm/components/KanbanDragAndDropDndKit/KanbanDragAndDropContext.js

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { closestCenter, DndContext, KeyboardSensor, PointerSensor, useSensor, useSensors, } from '@wix/wix-style-react-incubator/dnd-kit/core';
+import { AutoScrollActivator, closestCenter, DndContext, KeyboardSensor, PointerSensor, useSensor, useSensors, } from '@wix/wix-style-react-incubator/dnd-kit/core';
 import { restrictToWindowEdges } from '@wix/wix-style-react-incubator/dnd-kit/modifiers';
 import { observer } from 'mobx-react-lite';
 import { usePageContext } from '@wix/bex-core/react';
@@ -28,7 +28,14 @@ function _KanbanDragAndDropContext(props) {
     const handleDragCancel = () => {
         dragAndDropState.handleDragCancel();
     };
-    return (React.createElement(DndContext, { sensors: sensors, accessibility: {
+    return (React.createElement(DndContext, { sensors: sensors, autoScroll: {
+            activator: AutoScrollActivator.DraggableRect,
+            acceleration: 4,
+            threshold: {
+                y: 0.01,
+                x: 0.2,
+            },
+        }, accessibility: {
             container: modalsContainerRef.current,
             announcements: {
                 onDragStart: () => 'Item picked up for dragging',

package/dist/esm/components/KanbanDragAndDropDndKit/KanbanDragAndDropContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"KanbanDragAndDropContext.js","sourceRoot":"","sources":["../../../../src/components/KanbanDragAndDropDndKit/KanbanDragAndDropContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAa,SAAS,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,EACL,aAAa,EACb,UAAU,EAGV,cAAc,EACd,aAAa,EACb,SAAS,EACT,UAAU,GACX,MAAM,6CAA6C,CAAC;AACrD,OAAO,EAAE,qBAAqB,EAAE,MAAM,kDAAkD,CAAC;AACzF,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAI3C,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAQrD,SAAS,yBAAyB,CAChC,KAA6C;IAE7C,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAE/C,MAAM,EAAE,kBAAkB,EAAE,GAAG,cAAc,EAAE,CAAC;IAEhD,MAAM,gBAAgB,GAAG,WAAW,CAAC,gBAAgB,CAAC;IAEtD,MAAM,aAAa,GAAG,SAAS,CAAC,aAAa,EAAE;QAC7C,oBAAoB,EAAE;YACpB,QAAQ,EAAE,CAAC;SACZ;KACF,CAAC,CAAC;IAEH,MAAM,cAAc,GAAG,SAAS,CAAC,cAAc,EAAE;QAC/C,aAAa,EAAE,WAAW,CAAC,gBAAgB,CAAC,aAAa;QACzD,gBAAgB,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC;KAC1C,CAAC,CAAC;IAEH,MAAM,OAAO,GAAG,UAAU,CACxB,GAAG,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,aAAa,EAAE,cAAc,CAAC,CAAC,CAC5E,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE,CAAC,gBAAgB,CAAC,IAAI,EAAE,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC;IAE7D,MAAM,eAAe,GAAG,CAAC,KAAqB,EAAE,EAAE;QAChD,gBAAgB,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;IAC1C,CAAC,CAAC;IAEF,MAAM,cAAc,GAAG,GAAG,EAAE,GAAE,CAAC,CAAC;IAEhC,MAAM,aAAa,GAAG,CAAC,KAAmB,EAAE,EAAE;QAC5C,gBAAgB,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IACxC,CAAC,CAAC;IAEF,MAAM,gBAAgB,GAAG,GAAG,EAAE;QAC5B,gBAAgB,CAAC,gBAAgB,EAAE,CAAC;IACtC,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,UAAU,IACT,OAAO,EAAE,OAAO,EAChB,aAAa,EAAE;YACb,SAAS,EAAE,kBAAkB,CAAC,OAAkC;YAChE,aAAa,EAAE;gBACb,WAAW,EAAE,GAAG,EAAE,CAAC,6BAA6B;gBAChD,UAAU,EAAE,GAAG,EAAE,CAAC,gCAAgC;gBAClD,SAAS,EAAE,GAAG,EAAE,CAAC,cAAc;gBAC/B,YAAY,EAAE,GAAG,EAAE,CAAC,oBAAoB;aACzC;YACD,wBAAwB,EAAE;gBACxB,SAAS,EAAE,mDAAmD;aAC/D;YACD,YAAY,EAAE,KAAK;SACpB,EACD,kBAAkB,EAAE,aAAa,EACjC,SAAS,EAAE,CAAC,qBAAqB,CAAC,EAClC,WAAW,EAAE,eAAe,EAC5B,UAAU,EAAE,cAAc,EAC1B,SAAS,EAAE,aAAa,EACxB,YAAY,EAAE,gBAAgB,IAE7B,QAAQ,CACE,CACd,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,wBAAwB,GAAG,QAAQ,CAAC,yBAAyB,CAAC,CAAC"}
+{"version":3,"file":"KanbanDragAndDropContext.js","sourceRoot":"","sources":["../../../../src/components/KanbanDragAndDropDndKit/KanbanDragAndDropContext.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/KanbanDragAndDropDndKit/KanbanDragOverlay.js

@@ -0,0 +1,16 @@
+import React, { forwardRef } from 'react';
+import { DragOverlay, } from '@wix/wix-style-react-incubator/dnd-kit/core';
+import { createPortal } from 'react-dom';
+import { restrictToWindowEdges } from '@wix/wix-style-react-incubator/dnd-kit/modifiers';
+import { observer } from 'mobx-react-lite';
+import { usePageContext } from '@wix/bex-core/react';
+import { KanbanDragOverlayCardItem } from './KanbanDragOverlayCardItem';
+const KanbanDragOverlayWrapper = forwardRef((props, ref) => React.createElement("div", { "data-hook": "kanban-drag-overlay", ref: ref, ...props }));
+function _KanbanDragOverlay(props) {
+    const { state, renderItem, actionCell, dataExtension, tags } = props;
+    const { modalsContainerRef } = usePageContext();
+    return createPortal(React.createElement(DragOverlay, { modifiers: [restrictToWindowEdges], wrapperElement: KanbanDragOverlayWrapper },
+        React.createElement(KanbanDragOverlayCardItem, { state: state, renderItem: renderItem, actionCell: actionCell, dataExtension: dataExtension, tags: tags })), modalsContainerRef?.current ?? document.body);
+}
+export const KanbanDragOverlay = observer(_KanbanDragOverlay);
+//# sourceMappingURL=KanbanDragOverlay.js.map

package/dist/esm/components/KanbanDragAndDropDndKit/KanbanDragOverlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"KanbanDragOverlay.js","sourceRoot":"","sources":["../../../../src/components/KanbanDragAndDropDndKit/KanbanDragOverlay.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAiC,UAAU,EAAE,MAAM,OAAO,CAAC;AACzE,OAAO,EACL,WAAW,GAEZ,MAAM,6CAA6C,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,EAAE,qBAAqB,EAAE,MAAM,kDAAkD,CAAC;AACzF,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC3C,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAErD,OAAO,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;AAGxE,MAAM,wBAAwB,GAAG,UAAU,CAGzC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE,CAAC,0CAAe,qBAAqB,EAAC,GAAG,EAAE,GAAG,KAAM,KAAK,GAAI,CAAC,CAAC;AAUhF,SAAS,kBAAkB,CACzB,KAAsC;IAEtC,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,aAAa,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC;IAErE,MAAM,EAAE,kBAAkB,EAAE,GAAG,cAAc,EAAE,CAAC;IAEhD,OAAO,YAAY,CACjB,oBAAC,WAAW,IACV,SAAS,EAAE,CAAC,qBAAqB,CAAC,EAClC,cAAc,EACZ,wBAEuD;QAGzD,oBAAC,yBAAyB,IACxB,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,UAAU,EACtB,aAAa,EAAE,aAAa,EAC5B,IAAI,EAAE,IAAI,GACV,CACU,EACd,kBAAkB,EAAE,OAAO,IAAI,QAAQ,CAAC,IAAI,CAC7C,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,iBAAiB,GAAG,QAAQ,CAAC,kBAAkB,CAAC,CAAC"}

package/dist/esm/components/KanbanDragAndDropDndKit/KanbanDragOverlayCardItem.js

@@ -0,0 +1,50 @@
+import { observer } from 'mobx-react-lite';
+import { CardComponent } from '../Kanban/Card';
+import { ItemActionsState } from '../../state';
+import React from 'react';
+function _KanbanDragOverlayCardItem(props) {
+    const { state, renderItem, actionCell, dataExtension, tags } = props;
+    const { activeId } = state.dragAndDropState;
+    if (!activeId) {
+        return null;
+    }
+    // Parse the activeId to get stageKey and itemKey
+    const [stageKey, itemKey] = activeId.split('-##-');
+    if (!stageKey || !itemKey) {
+        return null;
+    }
+    const stageState = state.kanbanStageStates[stageKey];
+    if (!stageState) {
+        return null;
+    }
+    const keyedItem = stageState.itemsCollectionState.getKeyedItem(itemKey);
+    if (!keyedItem) {
+        return null;
+    }
+    const itemActionsState = new ItemActionsState({
+        fade: 'static',
+        keyedItem,
+        collection: stageState.itemsCollectionState,
+    });
+    const cardProps = {
+        keyedItem,
+        stageKey: stageState.stageKey,
+        originalItem: keyedItem.item,
+        itemIndex: 0,
+        itemActionsState,
+        item: {
+            ...renderItem?.({
+                stage: stageState.stage,
+                item: keyedItem.item,
+            }),
+            key: keyedItem.key,
+        },
+        actionCell,
+        dataExtension,
+        tags,
+        isDragging: true,
+    };
+    return React.createElement(CardComponent, { ...cardProps });
+}
+export const KanbanDragOverlayCardItem = observer(_KanbanDragOverlayCardItem);
+//# sourceMappingURL=KanbanDragOverlayCardItem.js.map

package/dist/esm/components/KanbanDragAndDropDndKit/KanbanDragOverlayCardItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"KanbanDragOverlayCardItem.js","sourceRoot":"","sources":["../../../../src/components/KanbanDragAndDropDndKit/KanbanDragOverlayCardItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAG3C,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,SAAS,0BAA0B,CACjC,KAA8C;IAE9C,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,aAAa,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC;IAErE,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC,gBAAgB,CAAC;IAE5C,IAAI,CAAC,QAAQ,EAAE;QACb,OAAO,IAAI,CAAC;KACb;IAED,iDAAiD;IACjD,MAAM,CAAC,QAAQ,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IACnD,IAAI,CAAC,QAAQ,IAAI,CAAC,OAAO,EAAE;QACzB,OAAO,IAAI,CAAC;KACb;IAED,MAAM,UAAU,GAAG,KAAK,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAAC;IACrD,IAAI,CAAC,UAAU,EAAE;QACf,OAAO,IAAI,CAAC;KACb;IAED,MAAM,SAAS,GAAG,UAAU,CAAC,oBAAoB,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;IACxE,IAAI,CAAC,SAAS,EAAE;QACd,OAAO,IAAI,CAAC;KACb;IAED,MAAM,gBAAgB,GAAG,IAAI,gBAAgB,CAAC;QAC5C,IAAI,EAAE,QAAQ;QACd,SAAS;QACT,UAAU,EAAE,UAAU,CAAC,oBAAoB;KAC5C,CAAC,CAAC;IAEH,MAAM,SAAS,GAAG;QAChB,SAAS;QACT,QAAQ,EAAE,UAAU,CAAC,QAAQ;QAC7B,YAAY,EAAE,SAAS,CAAC,IAAI;QAC5B,SAAS,EAAE,CAAC;QACZ,gBAAgB;QAChB,IAAI,EAAE;YACJ,GAAG,UAAU,EAAE,CAAC;gBACd,KAAK,EAAE,UAAU,CAAC,KAAK;gBACvB,IAAI,EAAE,SAAS,CAAC,IAAI;aACrB,CAAC;YACF,GAAG,EAAE,SAAS,CAAC,GAAG;SACnB;QACD,UAAU;QACV,aAAa;QACb,IAAI;QACJ,UAAU,EAAE,IAAI;KACjB,CAAC;IAEF,OAAO,oBAAC,aAAa,OAAK,SAAS,GAAI,CAAC;AAC1C,CAAC;AAED,MAAM,CAAC,MAAM,yBAAyB,GAAG,QAAQ,CAAC,0BAA0B,CAAC,CAAC"}

package/dist/esm/components/KanbanDragAndDropDndKit/KanbanDraggableCardItem.js

@@ -32,24 +32,29 @@ function _KanbanDraggableCardItem(props) {
         transform: transform
             ? `translate3d(${transform.x}px, ${transform.y}px, 0)`
             : undefined,
-        opacity: isDragging ? 0.8 : 1,
+        // Hide the original card when dragging, letting the drag system handle the visual feedback
+        visibility: isDragging ? 'hidden' : 'visible',
         // Allow pointer events to pass through to parent droppable when not dragging
         pointerEvents: isDragging ? 'auto' : 'none',
         // Ensure dragged card appears above all other elements including stages
         zIndex: isDragging ? 1000 : 'auto',
-        position: isDragging ? 'fixed' : 'static',
-        marginTop: isDragging ? '-100px' : undefined,
+        position: 'relative',
     };
     const containerStyle = {
         position: 'relative',
     };
     return (React.createElement("div", { style: containerStyle, "data-hook": "kanban-card-item-events" },
         isDragging && (React.createElement("div", { style: {
+                position: 'absolute',
+                top: 0,
+                left: 0,
                 height: '129px',
                 width: '246px',
                 backgroundColor: '#D6E6FE',
                 borderRadius: '8px',
                 pointerEvents: 'none',
+                zIndex: 1,
+                marginLeft: '12px',
             } })),
         React.createElement("div", { ref: setNodeRef, style: dragStyle },
             React.createElement("div", { ...dragHandleProps, "data-hook": `kanban-card-drag-item-${id}` },

package/dist/esm/components/KanbanDragAndDropDndKit/KanbanDraggableCardItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"KanbanDraggableCardItem.js","sourceRoot":"","sources":["../../../../src/components/KanbanDragAndDropDndKit/KanbanDraggableCardItem.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"KanbanDraggableCardItem.js","sourceRoot":"","sources":["../../../../src/components/KanbanDragAndDropDndKit/KanbanDraggableCardItem.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/LoadingRow/LoadingRow.st.css.js

@@ -1,13 +1,13 @@
 // @ts-nocheck
 import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
-var _namespace_ = "LoadingRow2403931285";
+var _namespace_ = "LoadingRow2636486220";
 var _style_ = classesRuntime.bind(null, _namespace_);
 export var cssStates = statesRuntime.bind(null, _namespace_);
 export var style = _style_;
 export var st = _style_;
 export var namespace = _namespace_;
-export var classes = { "root": "LoadingRow2403931285__root" };
-export var keyframes = { "gradientSwoosh": "LoadingRow2403931285__gradientSwoosh" };
+export var classes = { "root": "LoadingRow2636486220__root" };
+export var keyframes = { "gradientSwoosh": "LoadingRow2636486220__gradientSwoosh" };
 export var layers = {};
 export var containers = {};
 export var stVars = {};

package/dist/esm/components/MaxHeightText/MaxHeightText.st.css.js

@@ -1,12 +1,12 @@
 // @ts-nocheck
 import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
-var _namespace_ = "MaxHeightText2552473019";
+var _namespace_ = "MaxHeightText3097001389";
 var _style_ = classesRuntime.bind(null, _namespace_);
 export var cssStates = statesRuntime.bind(null, _namespace_);
 export var style = _style_;
 export var st = _style_;
 export var namespace = _namespace_;
-export var classes = { "root": "MaxHeightText2552473019__root" };
+export var classes = { "root": "MaxHeightText3097001389__root" };
 export var keyframes = {};
 export var layers = {};
 export var containers = {};

package/dist/esm/components/MaxLines/MaxLines.st.css.js

@@ -1,12 +1,12 @@
 // @ts-nocheck
 import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
-var _namespace_ = "MaxLines4181389707";
+var _namespace_ = "MaxLines3748857465";
 var _style_ = classesRuntime.bind(null, _namespace_);
 export var cssStates = statesRuntime.bind(null, _namespace_);
 export var style = _style_;
 export var st = _style_;
 export var namespace = _namespace_;
-export var classes = { "root": "MaxLines4181389707__root" };
+export var classes = { "root": "MaxLines3748857465__root" };
 export var keyframes = {};
 export var layers = {};
 export var containers = {};

package/dist/esm/components/MultiBulkActionToolbar/MultiBulkActionToolbar.st.css.js

@@ -1,12 +1,12 @@
 // @ts-nocheck
 import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
-var _namespace_ = "MultiBulkActionToolbar3041522110";
+var _namespace_ = "MultiBulkActionToolbar1834809727";
 var _style_ = classesRuntime.bind(null, _namespace_);
 export var cssStates = statesRuntime.bind(null, _namespace_);
 export var style = _style_;
 export var st = _style_;
 export var namespace = _namespace_;
-export var classes = { "root": "MultiBulkActionToolbar3041522110__root" };
+export var classes = { "root": "MultiBulkActionToolbar1834809727__root" };
 export var keyframes = {};
 export var layers = {};
 export var containers = {};

package/dist/esm/components/NestedTable/NestedTablePlaceholderStatesRow.st.css.js

@@ -1,12 +1,12 @@
 // @ts-nocheck
 import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
-var _namespace_ = "NestedTablePlaceholderStatesRow1296006535";
+var _namespace_ = "NestedTablePlaceholderStatesRow1163782693";
 var _style_ = classesRuntime.bind(null, _namespace_);
 export var cssStates = statesRuntime.bind(null, _namespace_);
 export var style = _style_;
 export var st = _style_;
 export var namespace = _namespace_;
-export var classes = { "root": "NestedTablePlaceholderStatesRow1296006535__root" };
+export var classes = { "root": "NestedTablePlaceholderStatesRow1163782693__root" };
 export var keyframes = {};
 export var layers = {};
 export var containers = {};

package/dist/esm/components/NestedTable/NestedTableRow.st.css.js

@@ -1,12 +1,12 @@
 // @ts-nocheck
 import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
-var _namespace_ = "NestedTableRow235545777";
+var _namespace_ = "NestedTableRow787614279";
 var _style_ = classesRuntime.bind(null, _namespace_);
 export var cssStates = statesRuntime.bind(null, _namespace_);
 export var style = _style_;
 export var st = _style_;
 export var namespace = _namespace_;
-export var classes = { "root": "NestedTableRow235545777__root", "firstLevel": "NestedTableRow235545777__firstLevel", "placeholder": "NestedTableRow235545777__placeholder", "parentHovered": "NestedTableRow235545777__parentHovered" };
+export var classes = { "root": "NestedTableRow787614279__root", "firstLevel": "NestedTableRow787614279__firstLevel", "placeholder": "NestedTableRow787614279__placeholder", "parentHovered": "NestedTableRow787614279__parentHovered" };
 export var keyframes = {};
 export var layers = {};
 export var containers = {};

package/dist/esm/components/NestedTableDragAndDrop/MultipleDragOverlayEffect.st.css.js

@@ -1,12 +1,12 @@
 // @ts-nocheck
 import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
-var _namespace_ = "MultipleDragOverlayEffect1463673208";
+var _namespace_ = "MultipleDragOverlayEffect1520763888";
 var _style_ = classesRuntime.bind(null, _namespace_);
 export var cssStates = statesRuntime.bind(null, _namespace_);
 export var style = _style_;
 export var st = _style_;
 export var namespace = _namespace_;
-export var classes = { "root": "MultipleDragOverlayEffect1463673208__root" };
+export var classes = { "root": "MultipleDragOverlayEffect1520763888__root" };
 export var keyframes = {};
 export var layers = {};
 export var containers = {};

package/dist/esm/components/NestedTableDragAndDrop/NestedTableDragAndDropRow.st.css.js

@@ -1,12 +1,12 @@
 // @ts-nocheck
 import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
-var _namespace_ = "NestedTableDragAndDropRow2220825949";
+var _namespace_ = "NestedTableDragAndDropRow2914575864";
 var _style_ = classesRuntime.bind(null, _namespace_);
 export var cssStates = statesRuntime.bind(null, _namespace_);
 export var style = _style_;
 export var st = _style_;
 export var namespace = _namespace_;
-export var classes = { "root": "NestedTableDragAndDropRow2220825949__root" };
+export var classes = { "root": "NestedTableDragAndDropRow2914575864__root" };
 export var keyframes = {};
 export var layers = {};
 export var containers = {};

package/dist/esm/components/PickerContent/PickerContent.st.css.js

@@ -1,12 +1,12 @@
 // @ts-nocheck
 import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
-var _namespace_ = "PickerContent1273649905";
+var _namespace_ = "PickerContent2987356807";
 var _style_ = classesRuntime.bind(null, _namespace_);
 export var cssStates = statesRuntime.bind(null, _namespace_);
 export var style = _style_;
 export var st = _style_;
 export var namespace = _namespace_;
-export var classes = { "root": "PickerContent1273649905__root" };
+export var classes = { "root": "PickerContent2987356807__root" };
 export var keyframes = {};
 export var layers = {};
 export var containers = {};

package/dist/esm/components/PickerContent/PickerContentAdditionalStep.st.css.js

@@ -1,12 +1,12 @@
 // @ts-nocheck
 import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
-var _namespace_ = "PickerContentAdditionalStep3588242279";
+var _namespace_ = "PickerContentAdditionalStep4285359718";
 var _style_ = classesRuntime.bind(null, _namespace_);
 export var cssStates = statesRuntime.bind(null, _namespace_);
 export var style = _style_;
 export var st = _style_;
 export var namespace = _namespace_;
-export var classes = { "root": "PickerContentAdditionalStep3588242279__root", "titles": "PickerContentAdditionalStep3588242279__titles", "suffix": "PickerContentAdditionalStep3588242279__suffix" };
+export var classes = { "root": "PickerContentAdditionalStep4285359718__root", "titles": "PickerContentAdditionalStep4285359718__titles", "suffix": "PickerContentAdditionalStep4285359718__suffix" };
 export var keyframes = {};
 export var layers = {};
 export var containers = {};

package/dist/esm/components/PickerTableListItem/PickerTableListItem.st.css.js

@@ -1,12 +1,12 @@
 // @ts-nocheck
 import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
-var _namespace_ = "PickerTableListItem1563653799";
+var _namespace_ = "PickerTableListItem3199436989";
 var _style_ = classesRuntime.bind(null, _namespace_);
 export var cssStates = statesRuntime.bind(null, _namespace_);
 export var style = _style_;
 export var st = _style_;
 export var namespace = _namespace_;
-export var classes = { "root": "PickerTableListItem1563653799__root" };
+export var classes = { "root": "PickerTableListItem3199436989__root" };
 export var keyframes = {};
 export var layers = {};
 export var containers = {};

package/dist/esm/components/ScrollableContent/ScrollableContent.st.css.js

@@ -1,12 +1,12 @@
 // @ts-nocheck
 import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
-var _namespace_ = "ScrollableContent3526931302";
+var _namespace_ = "ScrollableContent2336302254";
 var _style_ = classesRuntime.bind(null, _namespace_);
 export var cssStates = statesRuntime.bind(null, _namespace_);
 export var style = _style_;
 export var st = _style_;
 export var namespace = _namespace_;
-export var classes = { "root": "ScrollableContent3526931302__root" };
+export var classes = { "root": "ScrollableContent2336302254__root" };
 export var keyframes = {};
 export var layers = {};
 export var containers = {};

package/dist/esm/components/SkeletonCard/SkeletonCard.st.css.js

@@ -1,12 +1,12 @@
 // @ts-nocheck
 import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
-var _namespace_ = "SkeletonCard548346052";
+var _namespace_ = "SkeletonCard1089299225";
 var _style_ = classesRuntime.bind(null, _namespace_);
 export var cssStates = statesRuntime.bind(null, _namespace_);
 export var style = _style_;
 export var st = _style_;
 export var namespace = _namespace_;
-export var classes = { "root": "SkeletonCard548346052__root", "headerLoading": "SkeletonCard548346052__headerLoading" };
+export var classes = { "root": "SkeletonCard1089299225__root", "headerLoading": "SkeletonCard1089299225__headerLoading" };
 export var keyframes = {};
 export var layers = {};
 export var containers = {};

package/dist/esm/components/SkeletonCard/SkeletonCard.st.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"SkeletonCard.st.css.js","sourceRoot":"","sources":["../../../../src/components/SkeletonCard/SkeletonCard.st.css.ts"],"names":[],"mappings":"AAAA,cAAc;AAGd,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAI9E,IAAI,WAAW,GAAG,uBAAuB,CAAC;AAC1C,IAAI,OAAO,GAAG,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAErD,MAAM,CAAC,IAAI,SAAS,GAAG,aAAa,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAC7D,MAAM,CAAC,IAAI,KAAK,GAAG,OAAO,CAAC;AAC3B,MAAM,CAAC,IAAI,EAAE,GAA2C,OAAO,CAAC;AAEhE,MAAM,CAAC,IAAI,SAAS,GAAG,WAAW,CAAC;AACnC,MAAM,CAAC,IAAI,OAAO,GAAG,EAAC,MAAM,EAAC,6BAA6B,EAAC,eAAe,EAAC,sCAAsC,EAAC,CAAC;AACnH,MAAM,CAAC,IAAI,SAAS,GAAG,EAAE,CAAC;AAC1B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,UAAU,GAAG,EAAE,CAAC;AAC3B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,IAAI,GAAG,EAAE,CAAC"}
+{"version":3,"file":"SkeletonCard.st.css.js","sourceRoot":"","sources":["../../../../src/components/SkeletonCard/SkeletonCard.st.css.ts"],"names":[],"mappings":"AAAA,cAAc;AAGd,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAI9E,IAAI,WAAW,GAAG,wBAAwB,CAAC;AAC3C,IAAI,OAAO,GAAG,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAErD,MAAM,CAAC,IAAI,SAAS,GAAG,aAAa,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAC7D,MAAM,CAAC,IAAI,KAAK,GAAG,OAAO,CAAC;AAC3B,MAAM,CAAC,IAAI,EAAE,GAA2C,OAAO,CAAC;AAEhE,MAAM,CAAC,IAAI,SAAS,GAAG,WAAW,CAAC;AACnC,MAAM,CAAC,IAAI,OAAO,GAAG,EAAC,MAAM,EAAC,8BAA8B,EAAC,eAAe,EAAC,uCAAuC,EAAC,CAAC;AACrH,MAAM,CAAC,IAAI,SAAS,GAAG,EAAE,CAAC;AAC1B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,UAAU,GAAG,EAAE,CAAC;AAC3B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,IAAI,GAAG,EAAE,CAAC"}

package/dist/esm/components/SlidingModal/SlidingModal.st.css.js

@@ -1,12 +1,12 @@
 // @ts-nocheck
 import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
-var _namespace_ = "SlidingModal1910542339";
+var _namespace_ = "SlidingModal2673626905";
 var _style_ = classesRuntime.bind(null, _namespace_);
 export var cssStates = statesRuntime.bind(null, _namespace_);
 export var style = _style_;
 export var st = _style_;
 export var namespace = _namespace_;
-export var classes = { "root": "SlidingModal1910542339__root" };
+export var classes = { "root": "SlidingModal2673626905__root" };
 export var keyframes = {};
 export var layers = {};
 export var containers = {};

package/dist/esm/components/TabsFilter/TabsFilter.st.css.js

@@ -1,12 +1,12 @@
 // @ts-nocheck
 import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
-var _namespace_ = "TabsFilter516386815";
+var _namespace_ = "TabsFilter753872323";
 var _style_ = classesRuntime.bind(null, _namespace_);
 export var cssStates = statesRuntime.bind(null, _namespace_);
 export var style = _style_;
 export var st = _style_;
 export var namespace = _namespace_;
-export var classes = { "root": "TabsFilter516386815__root", "title": "TabsFilter516386815__title" };
+export var classes = { "root": "TabsFilter753872323__root", "title": "TabsFilter753872323__title" };
 export var keyframes = {};
 export var layers = {};
 export var containers = {};

package/dist/esm/components/Tags/ManageTags/ManageTagsModal/ManageTagsModal.st.css.js

@@ -1,12 +1,12 @@
 // @ts-nocheck
 import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.js";
-var _namespace_ = "ManageTagsModal4204903436";
+var _namespace_ = "ManageTagsModal2329848611";
 var _style_ = classesRuntime.bind(null, _namespace_);
 export var cssStates = statesRuntime.bind(null, _namespace_);
 export var style = _style_;
 export var st = _style_;
 export var namespace = _namespace_;
-export var classes = { "root": "ManageTagsModal4204903436__root" };
+export var classes = { "root": "ManageTagsModal2329848611__root" };
 export var keyframes = {};
 export var layers = {};
 export var containers = {};

package/dist/esm/components/ToolbarItem/ToolbarItem.st.css.js

@@ -1,12 +1,12 @@
 // @ts-nocheck
 import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
-var _namespace_ = "ToolbarItem2434905212";
+var _namespace_ = "ToolbarItem1028958228";
 var _style_ = classesRuntime.bind(null, _namespace_);
 export var cssStates = statesRuntime.bind(null, _namespace_);
 export var style = _style_;
 export var st = _style_;
 export var namespace = _namespace_;
-export var classes = { "root": "ToolbarItem2434905212__root" };
+export var classes = { "root": "ToolbarItem1028958228__root" };
 export var keyframes = {};
 export var layers = {};
 export var containers = {};

package/dist/esm/components/ToolbarItemBox/ToolbarItemBox.st.css.js

@@ -1,12 +1,12 @@
 // @ts-nocheck
 import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
-var _namespace_ = "ToolbarItemBox1476196712";
+var _namespace_ = "ToolbarItemBox2641474983";
 var _style_ = classesRuntime.bind(null, _namespace_);
 export var cssStates = statesRuntime.bind(null, _namespace_);
 export var style = _style_;
 export var st = _style_;
 export var namespace = _namespace_;
-export var classes = { "root": "ToolbarItemBox1476196712__root" };
+export var classes = { "root": "ToolbarItemBox2641474983__root" };
 export var keyframes = {};
 export var layers = {};
 export var containers = {};

package/dist/esm/components/common.st.css.js

@@ -1,12 +1,12 @@
 // @ts-nocheck
 import { classesRuntime, statesRuntime } from "../stylable-esm-runtime.js";
-var _namespace_ = "common3742643744";
+var _namespace_ = "common3501193721";
 var _style_ = classesRuntime.bind(null, _namespace_);
 export var cssStates = statesRuntime.bind(null, _namespace_);
 export var style = _style_;
 export var st = _style_;
 export var namespace = _namespace_;
-export var classes = { "root": "common3742643744__root", "column": "common3742643744__column", "fullHeight": "common3742643744__fullHeight" };
+export var classes = { "root": "common3501193721__root", "column": "common3501193721__column", "fullHeight": "common3501193721__fullHeight" };
 export var keyframes = {};
 export var layers = {};
 export var containers = {};

package/dist/esm/state/CollectionPage/CollectionPageHeader.st.css.js

@@ -1,12 +1,12 @@
 // @ts-nocheck
 import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
-var _namespace_ = "CollectionPageHeader2788053176";
+var _namespace_ = "CollectionPageHeader540288885";
 var _style_ = classesRuntime.bind(null, _namespace_);
 export var cssStates = statesRuntime.bind(null, _namespace_);
 export var style = _style_;
 export var st = _style_;
 export var namespace = _namespace_;
-export var classes = { "root": "CollectionPageHeader2788053176__root" };
+export var classes = { "root": "CollectionPageHeader540288885__root" };
 export var keyframes = {};
 export var layers = {};
 export var containers = {};

package/dist/esm/state/CollectionPage/CollectionPageHeader.st.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"CollectionPageHeader.st.css.js","sourceRoot":"","sources":["../../../../src/state/CollectionPage/CollectionPageHeader.st.css.ts"],"names":[],"mappings":"AAAA,cAAc;AAGd,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAI9E,IAAI,WAAW,GAAG,gCAAgC,CAAC;AACnD,IAAI,OAAO,GAAG,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAErD,MAAM,CAAC,IAAI,SAAS,GAAG,aAAa,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAC7D,MAAM,CAAC,IAAI,KAAK,GAAG,OAAO,CAAC;AAC3B,MAAM,CAAC,IAAI,EAAE,GAA2C,OAAO,CAAC;AAEhE,MAAM,CAAC,IAAI,SAAS,GAAG,WAAW,CAAC;AACnC,MAAM,CAAC,IAAI,OAAO,GAAG,EAAC,MAAM,EAAC,sCAAsC,EAAC,CAAC;AACrE,MAAM,CAAC,IAAI,SAAS,GAAG,EAAE,CAAC;AAC1B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,UAAU,GAAG,EAAE,CAAC;AAC3B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,IAAI,GAAG,EAAE,CAAC"}
+{"version":3,"file":"CollectionPageHeader.st.css.js","sourceRoot":"","sources":["../../../../src/state/CollectionPage/CollectionPageHeader.st.css.ts"],"names":[],"mappings":"AAAA,cAAc;AAGd,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAI9E,IAAI,WAAW,GAAG,+BAA+B,CAAC;AAClD,IAAI,OAAO,GAAG,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAErD,MAAM,CAAC,IAAI,SAAS,GAAG,aAAa,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAC7D,MAAM,CAAC,IAAI,KAAK,GAAG,OAAO,CAAC;AAC3B,MAAM,CAAC,IAAI,EAAE,GAA2C,OAAO,CAAC;AAEhE,MAAM,CAAC,IAAI,SAAS,GAAG,WAAW,CAAC;AACnC,MAAM,CAAC,IAAI,OAAO,GAAG,EAAC,MAAM,EAAC,qCAAqC,EAAC,CAAC;AACpE,MAAM,CAAC,IAAI,SAAS,GAAG,EAAE,CAAC;AAC1B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,UAAU,GAAG,EAAE,CAAC;AAC3B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,IAAI,GAAG,EAAE,CAAC"}

package/dist/esm/state/FormPage/FormPageHeader.st.css.js

@@ -1,12 +1,12 @@
 // @ts-nocheck
 import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
-var _namespace_ = "FormPageHeader2249138121";
+var _namespace_ = "FormPageHeader1704032490";
 var _style_ = classesRuntime.bind(null, _namespace_);
 export var cssStates = statesRuntime.bind(null, _namespace_);
 export var style = _style_;
 export var st = _style_;
 export var namespace = _namespace_;
-export var classes = { "root": "FormPageHeader2249138121__root" };
+export var classes = { "root": "FormPageHeader1704032490__root" };
 export var keyframes = {};
 export var layers = {};
 export var containers = {};

package/dist/esm/state/KanbanState/KanbanState.js

@@ -111,10 +111,6 @@ export class KanbanState {
     stageKey(stage) {
         return this.stagesCollectionState.itemKey(stage);
     }
-    moveItemBetweenStages(item, fromStageId, toStageId) {
-        this.getStageStateByKey(fromStageId).deleteItem(item);
-        this.getStageStateByKey(toStageId).createItem(item);
-    }
     get hasStagesError() {
         return this.stagesCollectionState.result.status?.isError;
     }
@@ -128,6 +124,9 @@ export class KanbanState {
             await this.stagesCollectionState.refreshAllPages();
             await this.initializeStageStates();
         }
+        catch (error) {
+            this.showErrorToast(error);
+        }
         finally {
             runInAction(() => {
                 this.isRefetching = false;
@@ -255,6 +254,9 @@ export class KanbanState {
             cursor: stageData?.cursor,
         };
     }
+    getStageIdFromItem(item) {
+        return item[this.items.stageField];
+    }
     // optimistic actions
     updateStage(originalStage, updatedStage) {
         const stageId = this.stagesCollectionState.itemKey(originalStage);
@@ -323,5 +325,22 @@ export class KanbanState {
             collectionSnapshot: {},
         });
     }
+    moveItemBetweenStages(originalItem, updatedItem, fromStageId, toStageId) {
+        this.getStageStateByKey(fromStageId).deleteItem(originalItem);
+        this.getStageStateByKey(toStageId).createItem(updatedItem);
+    }
+    // optimistic actions card
+    deleteCard(card) {
+        const stageId = this.getStageIdFromItem(card);
+        this.getStageStateByKey(stageId).deleteItem(card);
+    }
+    createCard(card) {
+        const stageId = this.getStageIdFromItem(card);
+        this.getStageStateByKey(stageId).createItem(card);
+    }
+    updateCard(card) {
+        const stageId = this.getStageIdFromItem(card);
+        this.getStageStateByKey(stageId).updateItem(card);
+    }
 }
 //# sourceMappingURL=KanbanState.js.map