@wix/patterns 1.228.0 → 1.230.0

package/dist/esm/components/Kanban/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../../src/components/Kanban/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAE3C,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAG9D,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAwB5C,SAAS,cAAc,CAIrB,EACA,YAAY,EACZ,SAAS,EACT,IAAI,EACJ,QAAQ,EACR,UAAU,EACV,gBAAgB,GACS;IACzB,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;IAExD,OAAO,CACL,6BACE,SAAS,qBAIE,yBAAyB,QAAQ,IAAI,IAAI,CAAC,GAAG,EAAE;QAE1D,oBAAC,aAAa,IAAC,UAAU,EAAE,KAAK;YAC9B,oBAAC,GAAG,IACF,OAAO,EAAC,MAAM,EACd,SAAS,EAAC,UAAU,EACpB,QAAQ,EAAE,eAAe,QAAQ,IAAI,IAAI,CAAC,GAAG,EAAE;gBAE/C,oBAAC,GAAG,IAAC,aAAa,EAAC,KAAK;oBACtB,oBAAC,IAAI,IACH,IAAI,EAAC,OAAO,EACZ,MAAM,EAAC,QAAQ,EACf,QAAQ,EAAE,qBAAqB,QAAQ,IAAI,IAAI,CAAC,GAAG,EAAE,IAEpD,KAAK,CACD,CACH;gBAEN,oBAAC,GAAG,IAAC,SAAS,EAAC,UAAU;oBACvB,oBAAC,GAAG,QAAE,KAAK,CAAO;oBAClB,oBAAC,GAAG,QAAE,QAAQ,CAAO;oBACrB,oBAAC,GAAG,QAAE,cAAc,CAAO,CACvB;gBACN,oBAAC,GAAG,IAAC,KAAK,EAAC,OAAO,EAAC,UAAU,EAAC,KAAK;oBACjC,oBAAC,WAAW,IACV,UAAU,EAAE,UAAU,EACtB,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,SAAS,EACpB,gBAAgB,EAAE,gBAAgB,EAClC,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,GACV,CACE,CACF,CACQ,CACZ,CACP,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,aAAa,GAAG,QAAQ,CAAC,cAAc,CAAC,CAAC"}
+{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../../src/components/Kanban/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAE3C,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAG9D,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAoB5C,SAAS,cAAc,CAA6B,EAClD,YAAY,EACZ,SAAS,EACT,IAAI,EACJ,QAAQ,EACR,UAAU,EACV,gBAAgB,GACS;IACzB,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;IAExD,OAAO,CACL,0CACa,yBAAyB,QAAQ,IAAI,IAAI,CAAC,GAAG,EAAE,EAC1D,KAAK,EAAE;YACL,WAAW,EAAE,MAAM;YACnB,UAAU,EAAE,MAAM;YAClB,QAAQ,EAAE,SAAS;YACnB,KAAK,EAAE,OAAO;SACf;QAED,oBAAC,aAAa,IAAC,UAAU,EAAE,KAAK,EAAE,IAAI,EAAC,QAAQ;YAC7C,oBAAC,GAAG,IACF,OAAO,EAAC,MAAM,EACd,QAAQ,EAAE,eAAe,QAAQ,IAAI,IAAI,CAAC,GAAG,EAAE,EAC/C,SAAS,EAAC,UAAU;gBAEpB,oBAAC,GAAG,IAAC,aAAa,EAAC,KAAK;oBACtB,oBAAC,IAAI,IACH,QAAQ,EAAE,qBAAqB,QAAQ,IAAI,IAAI,CAAC,GAAG,EAAE,EACrD,IAAI,EAAC,OAAO,EACZ,MAAM,EAAC,QAAQ,EACf,QAAQ,EAAE,IAAI,EACd,QAAQ,EAAE,CAAC,IAEV,KAAK,CACD,CACH;gBAEN,oBAAC,GAAG,IAAC,SAAS,EAAC,UAAU,EAAC,GAAG,EAAC,KAAK;oBACjC,oBAAC,GAAG,QAAE,KAAK,CAAO;oBAClB,oBAAC,GAAG,QAAE,QAAQ,CAAO;oBACrB,oBAAC,GAAG,QAAE,cAAc,CAAO,CACvB;gBACN,oBAAC,GAAG,IAAC,KAAK,EAAC,OAAO,EAAC,UAAU,EAAC,KAAK;oBACjC,oBAAC,WAAW,IACV,UAAU,EAAE,UAAU,EACtB,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,SAAS,EACpB,gBAAgB,EAAE,gBAAgB,EAClC,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,GACV,CACE,CACF,CACQ,CACZ,CACP,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,aAAa,GAAG,QAAQ,CAAC,cAAc,CAAC,CAAC"}

package/dist/esm/components/Kanban/CardActions.js

@@ -14,7 +14,7 @@ function _CardActions({ actionCell, originalItem, itemIndex, itemActionsState, s
     });
     return (React.createElement(React.Fragment, null,
         itemActionsState.confirmModal.value && (React.createElement(MessageActionModal, { state: itemActionsState.confirmModal, ...itemActionsState.confirmModal.value })),
-        React.createElement(Box, { gap: "SP2" },
+        React.createElement(Box, { gap: "9px" },
             secondaryActions,
             primaryActionProps && (React.createElement(Button, { style: { zIndex: 50 }, size: "tiny", priority: "secondary", onClick: (e) => {
                     e.stopPropagation();

package/dist/esm/components/Kanban/CardActions.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardActions.js","sourceRoot":"","sources":["../../../../src/components/Kanban/CardActions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAE3C,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,OAAO,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAgBpD,SAAS,YAAY,CAInB,EACA,UAAU,EACV,YAAY,EACZ,SAAS,EACT,gBAAgB,EAChB,QAAQ,EACR,IAAI,GACsB;IAC1B,MAAM,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,GAAG,cAAc,CAAC;QAC9D,UAAU;QACV,YAAY;QACZ,SAAS;QACT,gBAAgB;QAChB,QAAQ;QACR,OAAO,EAAE,IAAI,CAAC,GAAG;KAClB,CAAC,CAAC;IAEH,OAAO,CACL;QAEG,gBAAgB,CAAC,YAAY,CAAC,KAAK,IAAI,CACtC,oBAAC,kBAAkB,IACjB,KAAK,EAAE,gBAAgB,CAAC,YAAY,KAChC,gBAAgB,CAAC,YAAY,CAAC,KAAK,GACvC,CACH;QACD,oBAAC,GAAG,IAAC,GAAG,EAAC,KAAK;YACX,gBAAgB;YAChB,kBAAkB,IAAI,CACrB,oBAAC,MAAM,IACL,KAAK,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,EACrB,IAAI,EAAC,MAAM,EACX,QAAQ,EAAC,WAAW,EACpB,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;oBACb,CAAC,CAAC,eAAe,EAAE,CAAC;oBACpB,kBAAkB,CAAC,OAAO,EAAE,CAAC;gBAC/B,CAAC,EACD,QAAQ,EAAE,kBAAkB,CAAC,QAAQ,EACrC,UAAU,EAAE,kBAAkB,CAAC,UAAU,EACzC,QAAQ,EAAE,8BAA8B,QAAQ,IAAI,IAAI,CAAC,GAAG,EAAE,IAE7D,kBAAkB,CAAC,IAAI,CACjB,CACV,CACG,CACL,CACJ,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAC"}
+{"version":3,"file":"CardActions.js","sourceRoot":"","sources":["../../../../src/components/Kanban/CardActions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAE3C,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,OAAO,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAYpD,SAAS,YAAY,CAA6B,EAChD,UAAU,EACV,YAAY,EACZ,SAAS,EACT,gBAAgB,EAChB,QAAQ,EACR,IAAI,GACsB;IAC1B,MAAM,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,GAAG,cAAc,CAAC;QAC9D,UAAU;QACV,YAAY;QACZ,SAAS;QACT,gBAAgB;QAChB,QAAQ;QACR,OAAO,EAAE,IAAI,CAAC,GAAG;KAClB,CAAC,CAAC;IAEH,OAAO,CACL;QAEG,gBAAgB,CAAC,YAAY,CAAC,KAAK,IAAI,CACtC,oBAAC,kBAAkB,IACjB,KAAK,EAAE,gBAAgB,CAAC,YAAY,KAChC,gBAAgB,CAAC,YAAY,CAAC,KAAK,GACvC,CACH;QACD,oBAAC,GAAG,IAAC,GAAG,EAAC,KAAK;YACX,gBAAgB;YAChB,kBAAkB,IAAI,CACrB,oBAAC,MAAM,IACL,KAAK,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,EACrB,IAAI,EAAC,MAAM,EACX,QAAQ,EAAC,WAAW,EACpB,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;oBACb,CAAC,CAAC,eAAe,EAAE,CAAC;oBACpB,kBAAkB,CAAC,OAAO,EAAE,CAAC;gBAC/B,CAAC,EACD,QAAQ,EAAE,kBAAkB,CAAC,QAAQ,EACrC,UAAU,EAAE,kBAAkB,CAAC,UAAU,EACzC,QAAQ,EAAE,8BAA8B,QAAQ,IAAI,IAAI,CAAC,GAAG,EAAE,IAE7D,kBAAkB,CAAC,IAAI,CACjB,CACV,CACG,CACL,CACJ,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAC"}

package/dist/esm/components/Kanban/CardsSkeleton.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Box, SkeletonCircle, SkeletonGroup, SkeletonLine, SkeletonRectangle, } from '@wix/design-system';
+const numberOfCards = 4;
+function CardSkeleton({ index }) {
+    return (React.createElement(Box, { key: index, "data-hook": "kanban-card-skeleton", padding: "12px", borderRadius: "6px", backgroundColor: "white", direction: "vertical", gap: "12px", border: "1px solid #DFE3EB", height: "120px", marginBottom: index !== numberOfCards - 1 ? '0px' : '12px', boxShadow: "0 4px 10px rgba(0, 0, 0, 0.05)", marginLeft: "12px", marginRight: "12px" },
+        React.createElement(SkeletonGroup, { skin: "light", backgroundColor: "white" },
+            React.createElement(Box, { direction: "vertical", gap: "8px", flex: "1" },
+                React.createElement(SkeletonLine, { width: "162px" }),
+                React.createElement(SkeletonLine, { width: "114px" })),
+            React.createElement(Box, { alignContent: "space-between", marginTop: "70px", justifySelf: "end" },
+                React.createElement(Box, { verticalAlign: "middle", gap: "9px" },
+                    React.createElement(SkeletonCircle, { diameter: "18px" }),
+                    React.createElement(SkeletonRectangle, { width: "114px", height: "18px" }))))));
+}
+export function CardsSkeleton({ stageKey }) {
+    return (React.createElement(Box, { direction: "vertical", gap: "12px", "data-hook": `kanban-cards-skeleton-${stageKey}` }, Array.from({ length: numberOfCards }, (_, index) => (React.createElement(CardSkeleton, { index: index })))));
+}
+//# sourceMappingURL=CardsSkeleton.js.map

package/dist/esm/components/Kanban/CardsSkeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardsSkeleton.js","sourceRoot":"","sources":["../../../../src/components/Kanban/CardsSkeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACL,GAAG,EACH,cAAc,EACd,aAAa,EACb,YAAY,EACZ,iBAAiB,GAClB,MAAM,oBAAoB,CAAC;AAE5B,MAAM,aAAa,GAAG,CAAC,CAAC;AAExB,SAAS,YAAY,CAAC,EAAE,KAAK,EAAqB;IAChD,OAAO,CACL,oBAAC,GAAG,IACF,GAAG,EAAE,KAAK,eACA,sBAAsB,EAChC,OAAO,EAAC,MAAM,EACd,YAAY,EAAC,KAAK,EAClB,eAAe,EAAC,OAAO,EACvB,SAAS,EAAC,UAAU,EACpB,GAAG,EAAC,MAAM,EACV,MAAM,EAAC,mBAAmB,EAC1B,MAAM,EAAC,OAAO,EACd,YAAY,EAAE,KAAK,KAAK,aAAa,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,EAC1D,SAAS,EAAC,gCAAgC,EAC1C,UAAU,EAAC,MAAM,EACjB,WAAW,EAAC,MAAM;QAElB,oBAAC,aAAa,IAAC,IAAI,EAAC,OAAO,EAAC,eAAe,EAAC,OAAO;YAEjD,oBAAC,GAAG,IAAC,SAAS,EAAC,UAAU,EAAC,GAAG,EAAC,KAAK,EAAC,IAAI,EAAC,GAAG;gBAC1C,oBAAC,YAAY,IAAC,KAAK,EAAC,OAAO,GAAG;gBAC9B,oBAAC,YAAY,IAAC,KAAK,EAAC,OAAO,GAAG,CAC1B;YAGN,oBAAC,GAAG,IAAC,YAAY,EAAC,eAAe,EAAC,SAAS,EAAC,MAAM,EAAC,WAAW,EAAC,KAAK;gBAClE,oBAAC,GAAG,IAAC,aAAa,EAAC,QAAQ,EAAC,GAAG,EAAC,KAAK;oBACnC,oBAAC,cAAc,IAAC,QAAQ,EAAC,MAAM,GAAG;oBAClC,oBAAC,iBAAiB,IAAC,KAAK,EAAC,OAAO,EAAC,MAAM,EAAC,MAAM,GAAG,CAC7C,CACF,CACQ,CACZ,CACP,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,aAAa,CAAC,EAAE,QAAQ,EAAwB;IAC9D,OAAO,CACL,oBAAC,GAAG,IACF,SAAS,EAAC,UAAU,EACpB,GAAG,EAAC,MAAM,eACC,yBAAyB,QAAQ,EAAE,IAE7C,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,aAAa,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,CACnD,oBAAC,YAAY,IAAC,KAAK,EAAE,KAAK,GAAI,CAC/B,CAAC,CACE,CACP,CAAC;AACJ,CAAC"}

package/dist/esm/components/Kanban/Kanban.js

@@ -4,25 +4,30 @@ import { observer } from 'mobx-react-lite';
 import { StageComponent } from './Stage';
 import { Box } from '@wix/design-system';
 import { CollectionCard } from '../CollectionCard';
+import { KanbanCardDragAndDrop } from '../KanbanDragAndDropDndKit/KanbanCardDragAndDrop';
+import { StagesSkeleton } from './StagesSkeleton';
 function _Kanban(props) {
     const { state, dataHook } = props;
     const { toolbar } = state;
-    // if (process.env.NODE_ENV !== 'production') {
-    //   minimalRequiredWdsRuntimeCheck({
-    //     required: '^1.64.1',
-    //     requiredBy: 'WixPatterns/Kanban',
-    //   });
-    // }
     useEffect(() => {
         props.state.init();
     }, [props.state]);
     const stages = useMemo(() => {
-        return props.state.stages();
-    }, [props.state.stages()]);
+        return props.state.stages;
+    }, [props.state.stages]);
+    // Calculate active stage key from activeId
+    const activeId = state.dragAndDropState.activeId;
+    const activeStageKey = activeId
+        ? activeId.substring(0, activeId.indexOf('-##-')) || null
+        : null;
+    // Wrap with global drag and drop context - always enabled for Kanban
+    const { KanbanDragAndDropContext } = KanbanCardDragAndDrop;
+    const stagesContent = (React.createElement(KanbanDragAndDropContext, { state: state, stageId: "all" },
+        React.createElement(Box, { direction: "horizontal", gap: "12px" }, stages.map((stage) => (React.createElement(StageComponent, { dataHook: `kanban-stage-${props.state.stageKey(stage)}`, key: props.state.stageKey(stage), activeStageKey: activeStageKey, stageKey: props.state.stageKey(stage), ...props }))))));
     return (React.createElement(CollectionCard, { errorState: false, state: toolbar, dataHook: dataHook },
         React.createElement(ToolbarCollection, { search: true, sticky: true, state: toolbar },
             React.createElement(Box, { dataHook: "kanban-test", margin: "24px", overflow: "auto", direction: "vertical" },
-                React.createElement(Box, { dataHook: "kanban-stages", direction: "vertical" }, props.state.isLoading() ? (React.createElement("div", null, "loading stages...")) : (React.createElement(Box, { direction: "horizontal", gap: "12px" }, stages.map((stage) => (React.createElement(StageComponent, { stageState: props.state.getStageState(stage), dataHook: `kanban-stage-${props.state.stageKey(stage)}`, key: props.state.stageKey(stage), ...props }))))))))));
+                React.createElement(Box, { dataHook: "kanban-stages", direction: "vertical" }, props.state.isLoading() ? React.createElement(StagesSkeleton, null) : stagesContent)))));
 }
 export const Kanban = observer(_Kanban);
 //# sourceMappingURL=Kanban.js.map

package/dist/esm/components/Kanban/Kanban.js.map

@@ -1 +1 @@
-{"version":3,"file":"Kanban.js","sourceRoot":"","sources":["../../../../src/components/Kanban/Kanban.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,EAAoB,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAC3E,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAG3C,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AACzC,OAAO,EAAE,GAAG,EAAE,MAAM,oBAAoB,CAAC;AACzC,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAOnD,SAAS,OAAO,CAA6B,KAA2B;IACtE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAElC,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IAE1B,+CAA+C;IAC/C,qCAAqC;IACrC,2BAA2B;IAC3B,wCAAwC;IACxC,QAAQ;IACR,IAAI;IACJ,SAAS,CAAC,GAAG,EAAE;QACb,KAAK,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;IACrB,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;IAElB,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,EAAE;QAC1B,OAAO,KAAK,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC;IAC9B,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;IAE3B,OAAO,CACL,oBAAC,cAAc,IAAC,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ;QACnE,oBAAC,iBAAiB,IAAC,MAAM,EAAE,IAAI,EAAE,MAAM,QAAC,KAAK,EAAE,OAAO;YACpD,oBAAC,GAAG,IACF,QAAQ,EAAC,aAAa,EACtB,MAAM,EAAC,MAAM,EACb,QAAQ,EAAC,MAAM,EACf,SAAS,EAAC,UAAU;gBAEpB,oBAAC,GAAG,IAAC,QAAQ,EAAC,eAAe,EAAC,SAAS,EAAC,UAAU,IAC/C,KAAK,CAAC,KAAK,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,CACzB,qDAA4B,CAC7B,CAAC,CAAC,CAAC,CACF,oBAAC,GAAG,IAAC,SAAS,EAAC,YAAY,EAAC,GAAG,EAAC,MAAM,IACnC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAQ,EAAE,EAAE,CAAC,CACxB,oBAAC,cAAc,IACb,UAAU,EAAE,KAAK,CAAC,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,EAC5C,QAAQ,EAAE,gBAAgB,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,EACvD,GAAG,EAAE,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,KAC5B,KAAK,GACT,CACH,CAAC,CACE,CACP,CACG,CACF,CACY,CACL,CAClB,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAC"}
+{"version":3,"file":"Kanban.js","sourceRoot":"","sources":["../../../../src/components/Kanban/Kanban.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,EAAoB,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAC3E,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAG3C,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AACzC,OAAO,EAAE,GAAG,EAAE,MAAM,oBAAoB,CAAC;AACzC,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,qBAAqB,EAAE,MAAM,kDAAkD,CAAC;AACzF,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAMlD,SAAS,OAAO,CAA6B,KAA2B;IACtE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAElC,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IAE1B,SAAS,CAAC,GAAG,EAAE;QACb,KAAK,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;IACrB,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;IAElB,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,EAAE;QAC1B,OAAO,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC;IAC5B,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC;IAEzB,2CAA2C;IAC3C,MAAM,QAAQ,GAAG,KAAK,CAAC,gBAAgB,CAAC,QAAQ,CAAC;IACjD,MAAM,cAAc,GAAG,QAAQ;QAC7B,CAAC,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,IAAI,IAAI;QACzD,CAAC,CAAC,IAAI,CAAC;IAET,qEAAqE;IACrE,MAAM,EAAE,wBAAwB,EAAE,GAAG,qBAAqB,CAAC;IAC3D,MAAM,aAAa,GAAG,CACpB,oBAAC,wBAAwB,IAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAC,KAAK;QACnD,oBAAC,GAAG,IAAC,SAAS,EAAC,YAAY,EAAC,GAAG,EAAC,MAAM,IACnC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAQ,EAAE,EAAE,CAAC,CACxB,oBAAC,cAAc,IACb,QAAQ,EAAE,gBAAgB,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,EACvD,GAAG,EAAE,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,EAChC,cAAc,EAAE,cAAc,EAC9B,QAAQ,EAAE,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,KACjC,KAAK,GACT,CACH,CAAC,CACE,CACmB,CAC5B,CAAC;IAEF,OAAO,CACL,oBAAC,cAAc,IAAC,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ;QACnE,oBAAC,iBAAiB,IAAC,MAAM,EAAE,IAAI,EAAE,MAAM,QAAC,KAAK,EAAE,OAAO;YACpD,oBAAC,GAAG,IACF,QAAQ,EAAC,aAAa,EACtB,MAAM,EAAC,MAAM,EACb,QAAQ,EAAC,MAAM,EACf,SAAS,EAAC,UAAU;gBAEpB,oBAAC,GAAG,IAAC,QAAQ,EAAC,eAAe,EAAC,SAAS,EAAC,UAAU,IAC/C,KAAK,CAAC,KAAK,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,oBAAC,cAAc,OAAG,CAAC,CAAC,CAAC,aAAa,CACzD,CACF,CACY,CACL,CAClB,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAC"}

package/dist/esm/components/Kanban/Kanban.uni.driver.js

@@ -1,12 +1,32 @@
 import { CollectionToolbarUniDriver } from '../CollectionToolbar/CollectionToolbar.uni.driver';
 import { baseUniDriverFactory } from '../../unidriver/baseUniDriverFactory';
-import { ButtonUniDriver, CounterBadgeUniDriver, IconButtonUniDriver, MessageModalLayoutUniDriver, PopoverMenuUniDriver, TextUniDriver, } from '@wix/design-system/dist/testkit/unidriver';
+import { AddItemUniDriver, BoxUniDriver, ButtonUniDriver, CounterBadgeUniDriver, IconButtonUniDriver, MessageModalLayoutUniDriver, PopoverMenuUniDriver, TextUniDriver, } from '@wix/design-system/dist/testkit/unidriver';
+import { DragAndDropUniDriver } from '../DragAndDrop/DragAndDrop.uni.driver';
 export function KanbanUniDriver(base, body) {
     const toolbarBase = () => base.$('[data-hook="collection-toolbar"]');
     const toolbar = () => CollectionToolbarUniDriver(toolbarBase(), body);
+    const dragAndDrop = () => DragAndDropUniDriver(base);
+    const dragCardToStage = async ({ sourceStageKey, cardKey, targetStageKey, }) => {
+        const targetStageElement = base.$(`[data-hook^="kanban-stage-container-${targetStageKey}"]`);
+        if (!(await targetStageElement.exists())) {
+            throw new Error(`Target stage with key ${targetStageKey} not found`);
+        }
+        const sourceStageElement = base.$(`[data-hook^="kanban-stage-container-${sourceStageKey}"]`);
+        if (!(await sourceStageElement.exists())) {
+            throw new Error(`Source stage with key ${sourceStageKey} not found`);
+        }
+        const cardElement = base.$(`[data-hook^="kanban-card-drag-item-${sourceStageKey}-##-${cardKey}"]`);
+        if (!(await cardElement.exists())) {
+            throw new Error(`Card with key ${cardKey} not found in stage ${sourceStageKey}`);
+        }
+        const driverDragAndDrop = dragAndDrop();
+        await driverDragAndDrop.dragStart(cardElement);
+        await driverDragAndDrop.dragEnd(targetStageElement);
+    };
     return {
         ...baseUniDriverFactory(base),
         toolbar: () => toolbar(),
+        isKanbanLoading: () => base.$('[data-hook="kanban-stages-skeleton"]').exists(),
         stages: {
             count: () => base.$$('[data-hook^="kanban-stage-container"]').count(),
             stageTitle: (stageId) => {
@@ -47,9 +67,21 @@ export function KanbanUniDriver(base, body) {
                     }
                 }
             },
+            stageSummaryBadge: (stageId) => {
+                const counterBadge = CounterBadgeUniDriver(base.$(`[data-hook^="kanban-stage-title-total-${stageId}"]`), body);
+                return {
+                    ...counterBadge,
+                    exists: () => counterBadge.exists(),
+                    totalItems: () => counterBadge.getContentText(),
+                };
+            },
+            addCardButton: (stageKey) => AddItemUniDriver(base.$(`[data-hook="kanban-stage-add-card-${stageKey}"]`), body),
+            stagesSkeleton: () => BoxUniDriver(base.$('[data-hook="kanban-stages-skeleton"]'), body),
+            cardsSkeleton: (stageKey) => BoxUniDriver(base.$(`[data-hook="kanban-cards-skeleton-${stageKey}"]`), body),
         },
         cards: {
             count: (stageKey) => base.$$(`[data-hook^="kanban-card-${stageKey}-"]`).count(),
+            exists: ({ stageKey, cardKey }) => base.$(`[data-hook^="kanban-card-${stageKey}-${cardKey}"]`).exists(),
             getTitle: ({ stageKey, cardKey, }) => {
                 return TextUniDriver(base.$(`[data-hook^="kanban-card-title-${stageKey}-${cardKey}"]`), body);
             },
@@ -71,6 +103,7 @@ export function KanbanUniDriver(base, body) {
                 };
             },
             getActionModal: () => MessageModalLayoutUniDriver(body.$('[data-hook="collection-action-modal"]'), body),
+            dragCardToStage,
         },
     };
 }

package/dist/esm/components/Kanban/Kanban.uni.driver.js.map

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

package/dist/esm/components/Kanban/Stage.js

@@ -2,8 +2,13 @@ import * as React from 'react';
 import { AddItem, Box, CounterBadge, Text } from '@wix/design-system';
 import { observer } from 'mobx-react-lite';
 import { CardComponent } from './Card';
+import { KanbanCardDragAndDrop } from '../KanbanDragAndDropDndKit/KanbanCardDragAndDrop';
 import { ItemActionsState } from '../../state';
-function _StageComponent({ dataHook, stageState, stageSummary, ...props }) {
+import { useDroppable } from '@wix/wix-style-react-incubator/dnd-kit/core';
+import { action } from 'mobx';
+import { CardsSkeleton } from './CardsSkeleton';
+function _StageComponent({ dataHook, state, stageSummary, activeStageKey, stageKey, ...props }) {
+    const stageState = state.kanbanStageStates[stageKey];
     const handleScroll = (e) => {
         const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
         if (scrollHeight - scrollTop <= clientHeight + 10 &&
@@ -13,6 +18,12 @@ function _StageComponent({ dataHook, stageState, stageSummary, ...props }) {
         }
     };
     const { result: { keyedItems }, } = stageState.itemsCollectionState;
+    // Make the stage droppable
+    const { isOver, setNodeRef: setDroppableRef } = useDroppable({
+        id: stageState.stageKey,
+    });
+    // Check if this stage is the source stage (where drag originated)
+    const isDndSourceStage = activeStageKey === stageState.stageKey;
     const items = React.useMemo(() => {
         return keyedItems.map((keyedItem, index) => {
             const itemActionsState = new ItemActionsState({
@@ -22,7 +33,7 @@ function _StageComponent({ dataHook, stageState, stageSummary, ...props }) {
             });
             return {
                 keyedItem,
-                stageKey: stageState.stageKey(),
+                stageKey: stageState.stageKey,
                 originalItem: keyedItem.item,
                 itemIndex: index,
                 itemActionsState,
@@ -37,29 +48,67 @@ function _StageComponent({ dataHook, stageState, stageSummary, ...props }) {
             };
         });
     }, [keyedItems, keyedItems.length]);
-    return (React.createElement(Box, { width: "270px", dataHook: `kanban-stage-container-${stageState.stageKey()}`, backgroundColor: "#F4F7FF", borderRadius: "8px", paddingLeft: "12px", paddingRight: "12px", direction: "vertical" },
-        React.createElement(Box, { width: "246px", direction: "vertical" },
+    const { DraggableCard } = KanbanCardDragAndDrop;
+    const isStageLoading = stageState.isLoading();
+    return (React.createElement("div", { ref: setDroppableRef, "data-hook": `kanban-stage-container-${stageState.stageKey}`, style: {
+            width: '270px',
+            backgroundColor: isOver && !isDndSourceStage ? '#9C9EA6' : '#F4F7FF',
+            borderRadius: '8px',
+            display: 'flex',
+            flexDirection: 'column',
+            transition: 'background-color 0.2s ease',
+            border: isOver && !isDndSourceStage
+                ? '2px dashed #2196F3'
+                : '2px solid transparent',
+        }, ...(process.env.NODE_ENV === 'test' && {
+            onPointerUp: action(() => {
+                if (state.dragAndDropState.activeId) {
+                    state.dragAndDropState.handleDragEnd({
+                        over: { id: stageState.stageKey },
+                        active: { id: state.dragAndDropState.activeId },
+                    });
+                }
+            }),
+        }) },
+        React.createElement(Box, { width: "270px", direction: "vertical" },
             React.createElement("div", { "data-hook": dataHook },
-                React.createElement(Box, { paddingTop: "12px", direction: "vertical" },
+                React.createElement(Box, { direction: "vertical", padding: "12px" },
                     React.createElement(Box, { marginBottom: "24px", direction: "vertical", padding: "12px 6px 0 6px", borderRadius: "8px" },
                         React.createElement(Box, { gap: "6px" },
-                            React.createElement(Text, { size: "small", weight: "bold", dataHook: `kanban-stage-title-${stageState.stageKey()}` }, stageState.stageName()),
-                            React.createElement(CounterBadge, { dataHook: `kanban-stage-title-total-${stageState.stageKey()}`, skin: "light", truncate: false }, stageState.totalItems())),
-                        React.createElement(Box, null, stageSummary?.({ stage: stageState.stage }))),
-                    React.createElement(Box, { paddingBottom: "12px" },
-                        React.createElement(AddItem, { size: "tiny", removePadding: true },
-                            React.createElement(Box, { paddingTop: "9px", paddingBottom: "9px" }, "Add Card")))),
-                stageState.isLoading() ? (React.createElement("div", null, "loading cards...")) : (React.createElement("div", { "data-hook": `kanban-stage-cards-container-${stageState.stageKey()}`, style: {
-                        overflow: 'auto',
-                        height: '100%',
-                        minHeight: '600px',
-                        maxHeight: 'calc(100vh - 400px)',
-                        display: 'flex',
-                        flexDirection: 'column',
-                        gap: '12px',
-                    }, onScroll: handleScroll },
-                    items.map((itemData) => (React.createElement(CardComponent, { key: `${itemData.stageKey}-${itemData.item?.key}`, keyedItem: itemData.keyedItem, originalItem: itemData.keyedItem.item, itemIndex: itemData.itemIndex, item: itemData.item, stageKey: itemData.stageKey, actionCell: itemData.actionCell, itemActionsState: itemData.itemActionsState, dataExtension: props.dataExtension, tags: props.tags }))),
-                    stageState.itemsCollectionState.status.isLoading && (React.createElement("div", { className: "text-sm text-center text-gray-500" }, "Loading more..."))))))));
+                            React.createElement(Text, { size: "small", weight: "bold", dataHook: `kanban-stage-title-${stageState.stageKey}` }, stageState.stageName),
+                            !isStageLoading ? (React.createElement(CounterBadge, { dataHook: `kanban-stage-title-total-${stageState.stageKey}`, skin: "light", truncate: false }, stageState.totalItems())) : null),
+                        React.createElement(Box, { gap: "0.2em" },
+                            React.createElement(Text, { size: "tiny", weight: "thin" }, "Total:"),
+                            !isStageLoading ? (React.createElement(Text, { size: "tiny", weight: "thin" }, stageSummary?.({ stage: stageState.stage }))) : null)),
+                    !isStageLoading ? (React.createElement(Box, { paddingBottom: "12px" },
+                        React.createElement(AddItem, { size: "tiny", removePadding: true, dataHook: `kanban-stage-add-card-${stageState.stageKey}` },
+                            React.createElement(Box, { paddingTop: "9px", paddingBottom: "9px" }, "Add Card")))) : null),
+                isStageLoading ? (React.createElement(CardsSkeleton, { stageKey: stageState.stageKey })) : (React.createElement(Box, { paddingBottom: "12px", direction: "vertical" },
+                    React.createElement("div", { "data-hook": `kanban-stage-cards-container-${stageState.stageKey}`, style: {
+                            overflow: 'auto',
+                            height: '100%',
+                            minHeight: '430px',
+                            maxHeight: 'calc(100vh - 420px)',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            gap: '12px',
+                            alignItems: 'center',
+                            overflowX: 'hidden',
+                            scrollbarWidth: 'thin',
+                            scrollbarColor: '#CFD1DC transparent',
+                        }, onScroll: handleScroll },
+                        items?.map((item) => (React.createElement(DraggableCard, { key: `${item.stageKey}-##-${item.item.key}`, id: `${item.stageKey}-##-${item.item.key}`, state: state, cardProps: {
+                                keyedItem: item.keyedItem,
+                                originalItem: item.keyedItem.item,
+                                itemIndex: item.itemIndex,
+                                item: item.item,
+                                stageKey: item.stageKey,
+                                actionCell: item.actionCell,
+                                itemActionsState: item.itemActionsState,
+                                dataExtension: props.dataExtension,
+                                tags: props.tags,
+                            } }, CardComponent))),
+                        stageState.itemsCollectionState.status.isLoading && (React.createElement("div", { className: "text-sm text-center text-gray-500" }, "Loading more...")))))))));
 }
 export const StageComponent = observer(_StageComponent);
 //# sourceMappingURL=Stage.js.map

package/dist/esm/components/Kanban/Stage.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stage.js","sourceRoot":"","sources":["../../../../src/components/Kanban/Stage.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Stage.js","sourceRoot":"","sources":["../../../../src/components/Kanban/Stage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,YAAY,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAEtE,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC3C,OAAO,EAAE,aAAa,EAAmB,MAAM,QAAQ,CAAC;AAExD,OAAO,EAAE,qBAAqB,EAAE,MAAM,kDAAkD,CAAC;AACzF,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,6CAA6C,CAAC;AAE3E,OAAO,EAAE,MAAM,EAAE,MAAM,MAAM,CAAC;AAC9B,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAehD,SAAS,eAAe,CAA6B,EACnD,QAAQ,EACR,KAAK,EACL,YAAY,EACZ,cAAc,EACd,QAAQ,EACR,GAAG,KAAK,EACqB;IAC7B,MAAM,UAAU,GAAG,KAAK,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAAC;IAErD,MAAM,YAAY,GAAG,CAAC,CAAgC,EAAE,EAAE;QACxD,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,YAAY,EAAE,GAAG,CAAC,CAAC,aAAa,CAAC;QAClE,IACE,YAAY,GAAG,SAAS,IAAI,YAAY,GAAG,EAAE;YAC7C,CAAC,UAAU,CAAC,oBAAoB,CAAC,eAAe;YAChD,CAAC,UAAU,CAAC,oBAAoB,CAAC,MAAM,CAAC,MAAM,CAAC,UAAU,EACzD;YACA,UAAU,CAAC,SAAS,EAAE,CAAC;SACxB;IACH,CAAC,CAAC;IAEF,MAAM,EACJ,MAAM,EAAE,EAAE,UAAU,EAAE,GACvB,GAAG,UAAU,CAAC,oBAAoB,CAAC;IAEpC,2BAA2B;IAC3B,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,eAAe,EAAE,GAAG,YAAY,CAAC;QAC3D,EAAE,EAAE,UAAU,CAAC,QAAQ;KACxB,CAAC,CAAC;IAEH,kEAAkE;IAClE,MAAM,gBAAgB,GAAG,cAAc,KAAK,UAAU,CAAC,QAAQ,CAAC;IAEhE,MAAM,KAAK,GAA+B,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAC3D,OAAO,UAAU,CAAC,GAAG,CAAC,CAAC,SAAuB,EAAE,KAAa,EAAE,EAAE;YAC/D,MAAM,gBAAgB,GAAG,IAAI,gBAAgB,CAAC;gBAC5C,IAAI,EAAE,QAAQ;gBACd,SAAS;gBACT,UAAU,EAAE,UAAU,CAAC,oBAAoB;aAC5C,CAAC,CAAC;YAEH,OAAO;gBACL,SAAS;gBACT,QAAQ,EAAE,UAAU,CAAC,QAAQ;gBAC7B,YAAY,EAAE,SAAS,CAAC,IAAI;gBAC5B,SAAS,EAAE,KAAK;gBAChB,gBAAgB;gBAChB,IAAI,EAAE;oBACJ,GAAG,KAAK,CAAC,UAAU,EAAE,CAAC;wBACpB,KAAK,EAAE,UAAU,CAAC,KAAK;wBACvB,IAAI,EAAE,SAAS,CAAC,IAAI;qBACrB,CAAC;oBACF,GAAG,EAAE,SAAS,CAAC,GAAG;iBACnB;gBACD,UAAU,EAAE,KAAK,CAAC,UAAU;aAC7B,CAAC;QACJ,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,UAAU,EAAE,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC;IAEpC,MAAM,EAAE,aAAa,EAAE,GAAG,qBAAqB,CAAC;IAEhD,MAAM,cAAc,GAAG,UAAU,CAAC,SAAS,EAAE,CAAC;IAE9C,OAAO,CACL,6BACE,GAAG,EAAE,eAAe,eACT,0BAA0B,UAAU,CAAC,QAAQ,EAAE,EAC1D,KAAK,EAAE;YACL,KAAK,EAAE,OAAO;YACd,eAAe,EAAE,MAAM,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;YACpE,YAAY,EAAE,KAAK;YACnB,OAAO,EAAE,MAAM;YACf,aAAa,EAAE,QAAQ;YACvB,UAAU,EAAE,4BAA4B;YACxC,MAAM,EACJ,MAAM,IAAI,CAAC,gBAAgB;gBACzB,CAAC,CAAC,oBAAoB;gBACtB,CAAC,CAAC,uBAAuB;SAC9B,KACG,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,MAAM,IAAI;YACtC,WAAW,EAAE,MAAM,CAAC,GAAG,EAAE;gBACvB,IAAI,KAAK,CAAC,gBAAgB,CAAC,QAAQ,EAAE;oBACnC,KAAK,CAAC,gBAAgB,CAAC,aAAa,CAAC;wBACnC,IAAI,EAAE,EAAE,EAAE,EAAE,UAAU,CAAC,QAAQ,EAAE;wBACjC,MAAM,EAAE,EAAE,EAAE,EAAE,KAAK,CAAC,gBAAgB,CAAC,QAAQ,EAAE;qBACzC,CAAC,CAAC;iBACX;YACH,CAAC,CAAC;SACH,CAAC;QAEF,oBAAC,GAAG,IAAC,KAAK,EAAC,OAAO,EAAC,SAAS,EAAC,UAAU;YACrC,0CAAgB,QAAQ;gBACtB,oBAAC,GAAG,IAAC,SAAS,EAAC,UAAU,EAAC,OAAO,EAAC,MAAM;oBACtC,oBAAC,GAAG,IACF,YAAY,EAAC,MAAM,EACnB,SAAS,EAAC,UAAU,EACpB,OAAO,EAAC,gBAAgB,EACxB,YAAY,EAAC,KAAK;wBAElB,oBAAC,GAAG,IAAC,GAAG,EAAC,KAAK;4BACZ,oBAAC,IAAI,IACH,IAAI,EAAC,OAAO,EACZ,MAAM,EAAC,MAAM,EACb,QAAQ,EAAE,sBAAsB,UAAU,CAAC,QAAQ,EAAE,IAEpD,UAAU,CAAC,SAAS,CAChB;4BACN,CAAC,cAAc,CAAC,CAAC,CAAC,CACjB,oBAAC,YAAY,IACX,QAAQ,EAAE,4BAA4B,UAAU,CAAC,QAAQ,EAAE,EAC3D,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAE,KAAK,IAEd,UAAU,CAAC,UAAU,EAAE,CACX,CAChB,CAAC,CAAC,CAAC,IAAI,CACJ;wBAEN,oBAAC,GAAG,IAAC,GAAG,EAAC,OAAO;4BACd,oBAAC,IAAI,IAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,aAExB;4BACN,CAAC,cAAc,CAAC,CAAC,CAAC,CACjB,oBAAC,IAAI,IAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,IAC5B,YAAY,EAAE,CAAC,EAAE,KAAK,EAAE,UAAU,CAAC,KAAK,EAAE,CAAC,CACvC,CACR,CAAC,CAAC,CAAC,IAAI,CACJ,CACF;oBACL,CAAC,cAAc,CAAC,CAAC,CAAC,CACjB,oBAAC,GAAG,IAAC,aAAa,EAAC,MAAM;wBACvB,oBAAC,OAAO,IACN,IAAI,EAAC,MAAM,EACX,aAAa,EAAE,IAAI,EACnB,QAAQ,EAAE,yBAAyB,UAAU,CAAC,QAAQ,EAAE;4BAExD,oBAAC,GAAG,IAAC,UAAU,EAAC,KAAK,EAAC,aAAa,EAAC,KAAK,eAEnC,CACE,CACN,CACP,CAAC,CAAC,CAAC,IAAI,CACJ;gBACL,cAAc,CAAC,CAAC,CAAC,CAChB,oBAAC,aAAa,IAAC,QAAQ,EAAE,UAAU,CAAC,QAAQ,GAAI,CACjD,CAAC,CAAC,CAAC,CACF,oBAAC,GAAG,IAAC,aAAa,EAAC,MAAM,EAAC,SAAS,EAAC,UAAU;oBAC5C,0CACa,gCAAgC,UAAU,CAAC,QAAQ,EAAE,EAChE,KAAK,EAAE;4BACL,QAAQ,EAAE,MAAM;4BAChB,MAAM,EAAE,MAAM;4BACd,SAAS,EAAE,OAAO;4BAClB,SAAS,EAAE,qBAAqB;4BAChC,OAAO,EAAE,MAAM;4BACf,aAAa,EAAE,QAAQ;4BACvB,GAAG,EAAE,MAAM;4BACX,UAAU,EAAE,QAAQ;4BACpB,SAAS,EAAE,QAAQ;4BACnB,cAAc,EAAE,MAAM;4BACtB,cAAc,EAAE,qBAAqB;yBACtC,EACD,QAAQ,EAAE,YAAY;wBAErB,KAAK,EAAE,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACpB,oBAAC,aAAa,IACZ,GAAG,EAAE,GAAG,IAAI,CAAC,QAAQ,OAAO,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE,EAC3C,EAAE,EAAE,GAAG,IAAI,CAAC,QAAQ,OAAO,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE,EAC1C,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE;gCACT,SAAS,EAAE,IAAI,CAAC,SAAS;gCACzB,YAAY,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI;gCACjC,SAAS,EAAE,IAAI,CAAC,SAAS;gCACzB,IAAI,EAAE,IAAI,CAAC,IAAI;gCACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;gCACvB,UAAU,EAAE,IAAI,CAAC,UAAU;gCAC3B,gBAAgB,EAAE,IAAI,CAAC,gBAAgB;gCACvC,aAAa,EAAE,KAAK,CAAC,aAAa;gCAClC,IAAI,EAAE,KAAK,CAAC,IAAI;6BACjB,IAEA,aAAa,CACA,CACjB,CAAC;wBACD,UAAU,CAAC,oBAAoB,CAAC,MAAM,CAAC,SAAS,IAAI,CACnD,6BAAK,SAAS,EAAC,mCAAmC,sBAE5C,CACP,CACG,CACF,CACP,CACG,CACF,CACF,CACP,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,cAAc,GAAG,QAAQ,CAAC,eAAe,CAAC,CAAC"}

package/dist/esm/components/Kanban/StagesSkeleton.js

@@ -0,0 +1,17 @@
+import { Box, SkeletonGroup, SkeletonLine } from '@wix/design-system';
+import React from 'react';
+// @ts-expect-error
+import styles from './StagesSkeleton.scss';
+const numberOfStages = 6;
+function StageSkeleton({ index }) {
+    return (React.createElement(Box, { key: index, width: "270px", dataHook: "kanban-stage-skeleton", backgroundColor: "#E5E6E9", borderRadius: "8px", padding: "12px", direction: "vertical", height: "calc(100vh - 300px)" },
+        React.createElement(Box, { width: "246px" },
+            React.createElement(SkeletonGroup, { skin: "dark", backgroundColor: "#E5E6E9" },
+                React.createElement(Box, { direction: "vertical", gap: "12px" },
+                    React.createElement(SkeletonLine, { className: styles.skeletonLine, width: "185px", marginBottom: "5px" }),
+                    React.createElement(SkeletonLine, { className: styles.skeletonLine, width: "104px" }))))));
+}
+export function StagesSkeleton() {
+    return (React.createElement(Box, { direction: "horizontal", gap: "12px", dataHook: "kanban-stages-skeleton" }, Array.from({ length: numberOfStages }, (_, index) => (React.createElement(StageSkeleton, { index: index })))));
+}
+//# sourceMappingURL=StagesSkeleton.js.map

package/dist/esm/components/Kanban/StagesSkeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StagesSkeleton.js","sourceRoot":"","sources":["../../../../src/components/Kanban/StagesSkeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AACtE,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,mBAAmB;AACnB,OAAO,MAAM,MAAM,uBAAuB,CAAC;AAE3C,MAAM,cAAc,GAAG,CAAC,CAAC;AAEzB,SAAS,aAAa,CAAC,EAAE,KAAK,EAAqB;IACjD,OAAO,CACL,oBAAC,GAAG,IACF,GAAG,EAAE,KAAK,EACV,KAAK,EAAC,OAAO,EACb,QAAQ,EAAC,uBAAuB,EAChC,eAAe,EAAC,SAAS,EACzB,YAAY,EAAC,KAAK,EAClB,OAAO,EAAC,MAAM,EACd,SAAS,EAAC,UAAU,EACpB,MAAM,EAAC,qBAAqB;QAE5B,oBAAC,GAAG,IAAC,KAAK,EAAC,OAAO;YAChB,oBAAC,aAAa,IAAC,IAAI,EAAC,MAAM,EAAC,eAAe,EAAC,SAAS;gBAClD,oBAAC,GAAG,IAAC,SAAS,EAAC,UAAU,EAAC,GAAG,EAAC,MAAM;oBAClC,oBAAC,YAAY,IACX,SAAS,EAAE,MAAM,CAAC,YAAY,EAC9B,KAAK,EAAC,OAAO,EACb,YAAY,EAAC,KAAK,GAClB;oBACF,oBAAC,YAAY,IAAC,SAAS,EAAE,MAAM,CAAC,YAAY,EAAE,KAAK,EAAC,OAAO,GAAG,CAC1D,CACQ,CACZ,CACF,CACP,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,cAAc;IAC5B,OAAO,CACL,oBAAC,GAAG,IAAC,SAAS,EAAC,YAAY,EAAC,GAAG,EAAC,MAAM,EAAC,QAAQ,EAAC,wBAAwB,IACrE,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,cAAc,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,CACpD,oBAAC,aAAa,IAAC,KAAK,EAAE,KAAK,GAAI,CAChC,CAAC,CACE,CACP,CAAC;AACJ,CAAC"}

package/dist/esm/components/Kanban/StagesSkeleton.scss

@@ -0,0 +1,10 @@
+.skeleton-line {
+  background-color: white;
+  border-radius: 12px;
+  width: 185px;
+  height: 12px;
+}
+
+.skeleton-line:last-child {
+  width: 105px;
+}

package/dist/esm/components/Kanban/useCardActions.js

@@ -36,7 +36,7 @@ export function useCardActions({ actionCell, originalItem, itemIndex, itemAction
     let secondaryActions = null;
     if (secondaryActionCellPropsWithBI &&
         secondaryActionCellPropsWithBI.length > 0) {
-        secondaryActions = (React.createElement(PopoverMenu, { ...actionCellConfig.popoverMenuProps, ...getDefaultActionCellProps(), dataHook: `kanban-card-more-actions-${stageKey}-${cardKey}`, triggerElement: ({ toggle, close }) => (React.createElement(IconButton, { dataHook: `kanban-card-more-actions-trigger-${stageKey}-${cardKey}`, onClick: (e) => {
+        secondaryActions = (React.createElement(PopoverMenu, { ...actionCellConfig.popoverMenuProps, ...getDefaultActionCellProps(), maxWidth: "260px", dataHook: `kanban-card-more-actions-${stageKey}-${cardKey}`, triggerElement: ({ toggle, close }) => (React.createElement(IconButton, { dataHook: `kanban-card-more-actions-trigger-${stageKey}-${cardKey}`, onClick: (e) => {
                     e.stopPropagation();
                     toggle();
                     reportOnPopoverMenuShow(toolbarBIReporter, actionCellConfig, itemActionsState.keyedItem);

package/dist/esm/components/Kanban/useCardActions.js.map

@@ -1 +1 @@
-{"version":3,"file":"useCardActions.js","sourceRoot":"","sources":["../../../../src/components/Kanban/useCardActions.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"useCardActions.js","sourceRoot":"","sources":["../../../../src/components/Kanban/useCardActions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EACL,kCAAkC,EAClC,mCAAmC,EACnC,uBAAuB,GACxB,MAAM,sDAAsD,CAAC;AAC9D,OAAO,EAAE,qBAAqB,EAAE,MAAM,mCAAmC,CAAC;AAI1E,OAAO,EAAE,2BAA2B,EAAE,MAAM,6BAA6B,CAAC;AAC1E,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAC7D,OAAO,EAAE,yBAAyB,EAAE,MAAM,oDAAoD,CAAC;AAC/F,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAWrD,MAAM,UAAU,kBAAkB,CAA6B,EAC7D,UAAU,EACV,YAAY,EACZ,SAAS,EACT,gBAAgB,GACsC;IACtD,IAAI,CAAC,UAAU,EAAE;QACf,OAAO,EAAE,CAAC;KACX;IAED,IAAI,OAAO,UAAU,KAAK,UAAU,EAAE;QACpC,OAAO,UAAU,CAAC,YAAY,EAAE,SAAS,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;KAC5E;IAED,OAAO,UAAU,CAAC;AACpB,CAAC;AAED,MAAM,UAAU,cAAc,CAA6B,EACzD,UAAU,EACV,YAAY,EACZ,SAAS,EACT,gBAAgB,EAChB,QAAQ,EACR,OAAO,GACiB;IACxB,MAAM,YAAY,GAAG,2BAA2B,EAAE,CAAC;IACnD,MAAM,EAAE,iBAAiB,EAAE,GAAG,YAAY,CAAC;IAE3C,MAAM,gBAAgB,GAAG,kBAAkB,CAAC;QAC1C,UAAU;QACV,YAAY;QACZ,SAAS;QACT,gBAAgB;KACjB,CAAC,CAAC;IAEH,MAAM,kBAAkB,GAAG,qBAAqB,CAAC;QAC/C,WAAW,EAAE,gBAAgB,CAAC,WAAW;KAC1C,CAAC,CAAC;IAEH,MAAM,8BAA8B,GAAG,mCAAmC,CAAC;QACzE,iBAAiB;QACjB,eAAe,EAAE,gBAAgB;QACjC,SAAS,EAAE,gBAAgB,CAAC,SAAS;QACrC,kBAAkB;KACnB,CAAC,CAAC;IAEH,MAAM,4BAA4B,GAAG,kCAAkC,CACrE,iBAAiB,EACjB,gBAAgB,EAChB,gBAAgB,CAAC,SAAS,CAC3B,CAAC;IAEF,IAAI,gBAAgB,GAA2B,IAAI,CAAC;IAEpD,IACE,8BAA8B;QAC9B,8BAA8B,CAAC,MAAM,GAAG,CAAC,EACzC;QACA,gBAAgB,GAAG,CACjB,oBAAC,WAAW,OACN,gBAAgB,CAAC,gBAAgB,KACjC,yBAAyB,EAAE,EAC/B,QAAQ,EAAC,OAAO,EAChB,QAAQ,EAAE,4BAA4B,QAAQ,IAAI,OAAO,EAAE,EAC3D,cAAc,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CACrC,oBAAC,UAAU,IACT,QAAQ,EAAE,oCAAoC,QAAQ,IAAI,OAAO,EAAE,EACnE,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;oBACb,CAAC,CAAC,eAAe,EAAE,CAAC;oBACpB,MAAM,EAAE,CAAC;oBACT,uBAAuB,CACrB,iBAAiB,EACjB,gBAAgB,EAChB,gBAAgB,CAAC,SAAS,CAC3B,CAAC;gBACJ,CAAC,EACD,YAAY,EAAE,KAAK,EACnB,QAAQ,EAAC,WAAW,EACpB,IAAI,EAAC,MAAM;gBAEX,oBAAC,SAAS,OAAG,CACF,CACd,IAEA,8BAA8B,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;YACpD,IAAI,MAAM,CAAC,OAAO,EAAE;gBAClB,OAAO,oBAAC,WAAW,CAAC,OAAO,IAAC,GAAG,EAAE,KAAK,GAAI,CAAC;aAC5C;YACD,MAAM,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,IAAI,EAAE,GAAG,MAAM,CAAC;YAC7C,OAAO,CACL,oBAAC,WAAW,CAAC,QAAQ,IACnB,GAAG,EAAE,KAAK,EACV,UAAU,EAAE,UAAU,EACtB,QAAQ,EACN,MAAM,CAAC,QAAQ;oBACf,iCAAiC,QAAQ,IAAI,OAAO,IAAI,KAAK,EAAE,KAE7D,IAAI,GACR,CACH,CAAC;QACJ,CAAC,CAAC,CACU,CACf,CAAC;KACH;IACD,OAAO;QACL,gBAAgB;QAChB,kBAAkB,EAAE,4BAA4B;KACjD,CAAC;AACJ,CAAC"}

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

@@ -1,2 +1,129 @@
-export const KanbanCardDragAndDrop = {};
+import { KanbanDragAndDropContext } from './KanbanDragAndDropContext';
+import { KanbanDraggableCardItem } from './KanbanDraggableCardItem';
+import { action, makeObservable, observable } from 'mobx';
+export class KanbanDragAndDropState {
+    constructor(params) {
+        this.activeId = null;
+        this.status = 'start';
+        this.setActiveId = (id) => {
+            this.activeId = id;
+        };
+        this.handleDragStart = (event) => {
+            this.status = 'start';
+            this.activeId = event.active.id.toString();
+        };
+        this.handleDragCancel = () => {
+            this.status = 'cancel';
+            this.setActiveId(null);
+        };
+        this.handleDragEnd = (event) => {
+            this.status = 'end';
+            const { active, over } = event;
+            this.setActiveId(null);
+            if (!over) {
+                return;
+            }
+            const activeId = active.id.toString();
+            const overId = over.id.toString();
+            const fromStageId = this._findStageByItemId(activeId);
+            // Determine target stage - could be stage key directly or extracted from item ID
+            let toStageId;
+            if (this.kanbanState.kanbanStageStates[overId]) {
+                // Dropping on a stage background
+                toStageId = overId;
+            }
+            else {
+                // Dropping on an item - extract stage from item ID
+                toStageId = this._findStageByItemId(overId);
+            }
+            // Only return early if we don't have valid source and target stages
+            if (!fromStageId || !toStageId) {
+                return;
+            }
+            // PREVENT MOVEMENT WITHIN THE SAME STAGE
+            if (fromStageId === toStageId) {
+                return; // Don't allow reordering within the same stage
+            }
+            const item = this._findItemById(activeId);
+            if (!item) {
+                return;
+            }
+            // Create the Kanban drag end event
+            const kanbanDragEndEvent = {
+                item,
+                fromStageId,
+                toStageId,
+            };
+            if (this.kanbanState.items.dragAndDrop?.onSubmit) {
+                const submitPromise = async () => {
+                    return Promise.resolve();
+                };
+                this.kanbanState.items.dragAndDrop
+                    ?.onSubmit?.(kanbanDragEndEvent)
+                    .then((newItem) => {
+                    this.kanbanState
+                        .getStageStateByKey(fromStageId)
+                        .itemsCollectionState.optimisticActions.deleteOne(item, {
+                        submit: submitPromise,
+                    });
+                    this.kanbanState
+                        .getStageStateByKey(toStageId)
+                        .itemsCollectionState.optimisticActions.createOne(newItem, {
+                        submit: submitPromise,
+                    });
+                })
+                    .catch((error) => {
+                    console.error('Error submitting drag and drop event:', error);
+                });
+            }
+        };
+        this.kanbanState = params.kanbanState;
+        makeObservable(this, {
+            handleDragEnd: action,
+            setActiveId: action,
+            activeId: observable,
+            status: observable.ref,
+            handleDragStart: action,
+            handleDragCancel: action,
+        });
+    }
+    _parseItemId(combinedId) {
+        // Parse combined ID format: "stageKey-##-itemKey"
+        const [stageKey, itemKey] = combinedId.split('-##-');
+        if (!stageKey || !itemKey) {
+            return null;
+        }
+        return { stageKey, itemKey };
+    }
+    _findItemById(combinedId) {
+        const parsed = this._parseItemId(combinedId);
+        if (!parsed) {
+            return null;
+        }
+        const stageState = this.kanbanState.kanbanStageStates[parsed.stageKey];
+        if (!stageState) {
+            return null;
+        }
+        const item = stageState.itemsCollectionState.getKeyedItem(parsed.itemKey)?.item;
+        return item || null;
+    }
+    _findStageByItemId(combinedId) {
+        const parsed = this._parseItemId(combinedId);
+        return parsed?.stageKey || null;
+    }
+    init() {
+        // No initialization needed for native drag and drop
+    }
+    get keyboardCodes() {
+        return {
+            start: ['Space', 'Enter'],
+            cancel: ['Escape'],
+            end: ['Space', 'Enter'],
+        };
+    }
+}
+export const KanbanCardDragAndDrop = {
+    KanbanDragAndDropContext,
+    DraggableCard: KanbanDraggableCardItem,
+};
 //# sourceMappingURL=KanbanCardDragAndDrop.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"KanbanCardDragAndDrop.js","sourceRoot":"","sources":["../../../../src/components/KanbanDragAndDropDndKit/KanbanCardDragAndDrop.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,qBAAqB,GAAG,EAAE,CAAC"}
+{"version":3,"file":"KanbanCardDragAndDrop.js","sourceRoot":"","sources":["../../../../src/components/KanbanDragAndDropDndKit/KanbanCardDragAndDrop.ts"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,46 @@
+import React, { useEffect } from 'react';
+import { 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';
+function _KanbanDragAndDropContext(props) {
+    const { state: kanbanState, children } = props;
+    const { modalsContainerRef } = usePageContext();
+    const dragAndDropState = kanbanState.dragAndDropState;
+    const pointerSensor = useSensor(PointerSensor, {
+        activationConstraint: {
+            distance: 3,
+        },
+    });
+    const keyboardSensor = useSensor(KeyboardSensor, {
+        keyboardCodes: kanbanState.dragAndDropState.keyboardCodes,
+        coordinateGetter: () => ({ x: 0, y: 25 }),
+    });
+    const sensors = useSensors(...(process.env.NODE_ENV === 'test' ? [] : [pointerSensor, keyboardSensor]));
+    useEffect(() => dragAndDropState.init(), [dragAndDropState]);
+    const handleDragStart = (event) => {
+        dragAndDropState.handleDragStart(event);
+    };
+    const handleDragOver = () => { };
+    const handleDragEnd = (event) => {
+        dragAndDropState.handleDragEnd(event);
+    };
+    const handleDragCancel = () => {
+        dragAndDropState.handleDragCancel();
+    };
+    return (React.createElement(DndContext, { sensors: sensors, accessibility: {
+            container: modalsContainerRef.current,
+            announcements: {
+                onDragStart: () => 'Item picked up for dragging',
+                onDragOver: () => 'Item moved over droppable area',
+                onDragEnd: () => 'Item dropped',
+                onDragCancel: () => 'Dragging cancelled',
+            },
+            screenReaderInstructions: {
+                draggable: 'To pick up a draggable item, press the space bar.',
+            },
+            restoreFocus: false,
+        }, collisionDetection: closestCenter, modifiers: [restrictToWindowEdges], onDragStart: handleDragStart, onDragOver: handleDragOver, onDragEnd: handleDragEnd, onDragCancel: handleDragCancel }, children));
+}
+export const KanbanDragAndDropContext = observer(_KanbanDragAndDropContext);
+//# sourceMappingURL=KanbanDragAndDropContext.js.map

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

@@ -0,0 +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"}