@navikt/ds-react 8.9.0 → 8.10.0

package/cjs/alert/base-alert/content/BaseAlertContent.js

@@ -47,7 +47,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.BaseAlertContent = void 0;
 const react_1 = __importStar(require("react"));
 const Theme_1 = require("../../../theme/Theme");
+const typography_1 = require("../../../typography");
 const helpers_1 = require("../../../utils/helpers");
+const BaseAlertRoot_context_1 = require("../root/BaseAlertRoot.context");
 /**
  * @see 🏷️ {@link BaseAlertContentProps}
  * @example
@@ -64,7 +66,8 @@ const helpers_1 = require("../../../utils/helpers");
 const BaseAlertContent = (0, react_1.forwardRef)((_a, forwardedRef) => {
     var { children, className } = _a, restProps = __rest(_a, ["children", "className"]);
     const themeContext = (0, Theme_1.useThemeInternal)();
-    return (react_1.default.createElement("div", Object.assign({ ref: forwardedRef, "data-color": themeContext === null || themeContext === void 0 ? void 0 : themeContext.color }, restProps, { className: (0, helpers_1.cl)(className, "aksel-base-alert__content") }), children));
+    const { size } = (0, BaseAlertRoot_context_1.useBaseAlert)();
+    return (react_1.default.createElement(typography_1.BodyLong, Object.assign({ as: "div", ref: forwardedRef, "data-color": themeContext === null || themeContext === void 0 ? void 0 : themeContext.color, size: size }, restProps, { className: (0, helpers_1.cl)(className, "aksel-base-alert__content") }), children));
 });
 exports.BaseAlertContent = BaseAlertContent;
 //# sourceMappingURL=BaseAlertContent.js.map

package/cjs/alert/base-alert/content/BaseAlertContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseAlertContent.js","sourceRoot":"","sources":["../../../../src/alert/base-alert/content/BaseAlertContent.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAC1C,gDAAwD;AACxD,oDAA4C;AAM5C;;;;;;;;;;;;GAYG;AACH,MAAM,gBAAgB,GAAG,IAAA,kBAAU,EACjC,CACE,EAA4D,EAC5D,YAAY,EACZ,EAAE;QAFF,EAAE,QAAQ,EAAE,SAAS,OAAuC,EAAlC,SAAS,cAAnC,yBAAqC,CAAF;IAGnC,MAAM,YAAY,GAAG,IAAA,wBAAgB,GAAE,CAAC;IAExC,OAAO,CACL,qDACE,GAAG,EAAE,YAAY,gBACL,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,KAAK,IAC3B,SAAS,IACb,SAAS,EAAE,IAAA,YAAE,EAAC,SAAS,EAAE,2BAA2B,CAAC,KAEpD,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEO,4CAAgB"}
+{"version":3,"file":"BaseAlertContent.js","sourceRoot":"","sources":["../../../../src/alert/base-alert/content/BaseAlertContent.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAC1C,gDAAwD;AACxD,oDAA+C;AAC/C,oDAA4C;AAC5C,yEAA6D;AAM7D;;;;;;;;;;;;GAYG;AACH,MAAM,gBAAgB,GAAG,IAAA,kBAAU,EACjC,CACE,EAA4D,EAC5D,YAAY,EACZ,EAAE;QAFF,EAAE,QAAQ,EAAE,SAAS,OAAuC,EAAlC,SAAS,cAAnC,yBAAqC,CAAF;IAGnC,MAAM,YAAY,GAAG,IAAA,wBAAgB,GAAE,CAAC;IACxC,MAAM,EAAE,IAAI,EAAE,GAAG,IAAA,oCAAY,GAAE,CAAC;IAEhC,OAAO,CACL,8BAAC,qBAAQ,kBACP,EAAE,EAAC,KAAK,EACR,GAAG,EAAE,YAAY,gBACL,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,KAAK,EAC/B,IAAI,EAAE,IAAI,IACN,SAAS,IACb,SAAS,EAAE,IAAA,YAAE,EAAC,SAAS,EAAE,2BAA2B,CAAC,KAEpD,QAAQ,CACA,CACZ,CAAC;AACJ,CAAC,CACF,CAAC;AAEO,4CAAgB"}

package/cjs/data/drag-and-drop/drag-handler/DragAndDropDragHandler.d.ts

@@ -2,6 +2,9 @@ import React from "react";
 import { DragAndDropElement } from "../types";
 export interface DragAndDropDragHandlerProps {
     item: DragAndDropElement;
+    itemRef: React.RefObject<HTMLLIElement | null>;
+    isOverlay: boolean;
+    itemLabel: string;
 }
 /**
  * DragAndDropDragHandler

package/cjs/data/drag-and-drop/drag-handler/DragAndDropDragHandler.js

@@ -13,45 +13,66 @@ const DragAndDrop_context_1 = require("../root/DragAndDrop.context");
  * A button component that serves as a drag handle for drag and drop operations.
  * Can be used to initiate dragging of elements in a data table or list.
  */
-exports.DragAndDropDragHandler = react_1.default.forwardRef(({ item }, forwardedRef) => {
-    var _a;
+exports.DragAndDropDragHandler = react_1.default.forwardRef(({ item, itemRef, isOverlay, itemLabel }, forwardedRef) => {
+    var _a, _b, _c;
     const context = (0, DragAndDrop_context_1.useDragAndDropContext)();
-    const active = ((_a = context === null || context === void 0 ? void 0 : context.dragHandlerActive) === null || _a === void 0 ? void 0 : _a.id) === item.id;
+    const active = (context === null || context === void 0 ? void 0 : context.dragHandlerActive) &&
+        item &&
+        ((_a = context === null || context === void 0 ? void 0 : context.dragHandlerActive) === null || _a === void 0 ? void 0 : _a.id) === item.id;
+    if (isOverlay) {
+        // Render a simple drag icon for the overlay, which is used as a visual representation of the item being dragged
+        return (react_1.default.createElement("div", { className: "aksel-data-drag-and-drop__drag-handler", ref: forwardedRef, "aria-hidden": true },
+            react_1.default.createElement(aksel_icons_1.DragVerticalIcon, { fontSize: "1.5rem" })));
+    }
     return (react_1.default.createElement("div", { className: "aksel-data-drag-and-drop__drag-handler", ref: forwardedRef },
-        active && (react_1.default.createElement("span", { className: "aksel-data-drag-and-drop__drag-handler__arrow", "data-direction": "up" },
-            react_1.default.createElement(aksel_icons_1.CaretUpCircleFillIcon, { "aria-hidden": true, fontSize: "1.2rem" }))),
-        react_1.default.createElement("button", { "aria-label": "Dra for \u00E5 flytte", className: "aksel-data-drag-and-drop__drag-handler__button", "data-drag-handler-active": active, onPointerDown: (event) => {
+        active && (react_1.default.createElement("button", { className: "aksel-data-drag-and-drop__drag-handler__arrow", "data-direction": "up", onClick: () => context === null || context === void 0 ? void 0 : context.onKeyboardDragEnd(-1), onMouseDown: (e) => e.preventDefault(), disabled: ((_b = context === null || context === void 0 ? void 0 : context.dragHandlerActive) === null || _b === void 0 ? void 0 : _b.index) === 0, type: "button" },
+            react_1.default.createElement(aksel_icons_1.CaretUpCircleFillIcon, { "aria-hidden": true, fontSize: "1.8rem" }))),
+        react_1.default.createElement("button", { "aria-label": active
+                ? `Flytt element ${itemLabel || item.index + 1}. Bruk piltastene for å flytte elementet.`
+                : `Flytt element ${itemLabel || item.index + 1}. Trykk Enter eller Mellomrom for å aktivere flytting.`, "aria-pressed": Boolean(active), "aria-roledescription": "draggable", type: "button", className: "aksel-data-drag-and-drop__drag-handler__button", "data-drag-handler-active": active, onPointerDown: (event) => {
+                if (active)
+                    return;
                 event.stopPropagation();
-                context === null || context === void 0 ? void 0 : context.onDragStart(event, item);
-            }, onClick: () => context === null || context === void 0 ? void 0 : context.setDragHandlerActive(item), onKeyDown: (event) => {
-                if ((event.key === "Enter" || event.key === " ") &&
-                    (context === null || context === void 0 ? void 0 : context.dragHandlerActive)) {
-                    // Enter or space, currently active item - end keyboard dragging
-                    event.preventDefault();
+                context === null || context === void 0 ? void 0 : context.startPendingDrag(event, item, (itemRef === null || itemRef === void 0 ? void 0 : itemRef.current) || null);
+            }, onClick: (event) => {
+                if (!active) {
+                    context === null || context === void 0 ? void 0 : context.setDragHandlerActive(item);
+                    event.currentTarget.focus();
+                }
+                else {
                     context === null || context === void 0 ? void 0 : context.setDragHandlerActive(null);
                 }
-                else if ((event.key === "Enter" || event.key === " ") &&
-                    !(context === null || context === void 0 ? void 0 : context.dragHandlerActive)) {
-                    // Enter or space, not currently active item - start keyboard dragging
+            }, onBlur: () => context === null || context === void 0 ? void 0 : context.setDragHandlerActive(null), onKeyDown: (event) => {
+                if (event.key === "Enter" || event.key === " ") {
+                    // Enter or space, currently active item - end keyboard dragging
                     event.preventDefault();
-                    context === null || context === void 0 ? void 0 : context.setDragHandlerActive(item);
+                    context === null || context === void 0 ? void 0 : context.setDragHandlerActive(active ? null : item);
+                    return;
                 }
-                else if (event.key === "Escape") {
+                if (!active)
+                    return;
+                if (event.key === "Escape") {
                     // Cancel dragging
                     // TODO Handle reset
+                    event.preventDefault();
                     context === null || context === void 0 ? void 0 : context.setDragHandlerActive(null);
+                    return;
                 }
                 else if (event.key === "ArrowUp") {
                     // Move item up
+                    event.preventDefault();
                     context === null || context === void 0 ? void 0 : context.onKeyboardDragEnd(-1);
+                    return;
                 }
                 else if (event.key === "ArrowDown") {
                     // Move item down
+                    event.preventDefault();
                     context === null || context === void 0 ? void 0 : context.onKeyboardDragEnd(1);
+                    return;
                 }
             } },
-            react_1.default.createElement(aksel_icons_1.DragVerticalIcon, { "aria-hidden": true, title: "Dra for \u00E5 flytte", fontSize: "1.5rem" })),
-        active && (react_1.default.createElement("span", { className: "aksel-data-drag-and-drop__drag-handler__arrow", "data-direction": "down" },
-            react_1.default.createElement(aksel_icons_1.CaretDownCircleFillIcon, { "aria-hidden": true, fontSize: "1.2rem" })))));
+            react_1.default.createElement(aksel_icons_1.DragVerticalIcon, { "aria-hidden": true, fontSize: "1.5rem" })),
+        active && (react_1.default.createElement("button", { className: "aksel-data-drag-and-drop__drag-handler__arrow", "data-direction": "down", type: "button", onClick: () => context === null || context === void 0 ? void 0 : context.onKeyboardDragEnd(1), onMouseDown: (e) => e.preventDefault(), disabled: ((_c = context === null || context === void 0 ? void 0 : context.dragHandlerActive) === null || _c === void 0 ? void 0 : _c.index) === (context === null || context === void 0 ? void 0 : context.itemAmount) - 1 },
+            react_1.default.createElement(aksel_icons_1.CaretDownCircleFillIcon, { "aria-hidden": true, fontSize: "1.8rem" })))));
 });
 //# sourceMappingURL=DragAndDropDragHandler.js.map

package/cjs/data/drag-and-drop/drag-handler/DragAndDropDragHandler.js.map

@@ -1 +1 @@
-{"version":3,"file":"DragAndDropDragHandler.js","sourceRoot":"","sources":["../../../../src/data/drag-and-drop/drag-handler/DragAndDropDragHandler.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,qDAI6B;AAC7B,qEAAoE;AAOpE;;;;;GAKG;AACU,QAAA,sBAAsB,GAAG,eAAK,CAAC,UAAU,CAGpD,CAAC,EAAE,IAAI,EAAE,EAAE,YAAY,EAAE,EAAE;;IAC3B,MAAM,OAAO,GAAG,IAAA,2CAAqB,GAAE,CAAC;IACxC,MAAM,MAAM,GAAG,CAAA,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,iBAAiB,0CAAE,EAAE,MAAK,IAAI,CAAC,EAAE,CAAC;IAE1D,OAAO,CACL,uCAAK,SAAS,EAAC,wCAAwC,EAAC,GAAG,EAAE,YAAY;QACtE,MAAM,IAAI,CACT,wCACE,SAAS,EAAC,+CAA+C,oBAC1C,IAAI;YAEnB,8BAAC,mCAAqB,yBAAa,QAAQ,EAAC,QAAQ,GAAG,CAClD,CACR;QACD,wDACa,uBAAkB,EAC7B,SAAS,EAAC,gDAAgD,8BAChC,MAAM,EAChC,aAAa,EAAE,CAAC,KAAK,EAAE,EAAE;gBACvB,KAAK,CAAC,eAAe,EAAE,CAAC;gBACxB,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,WAAW,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;YACpC,CAAC,EACD,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,oBAAoB,CAAC,IAAI,CAAC,EAClD,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE;gBACnB,IACE,CAAC,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,CAAC;qBAC5C,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,iBAAiB,CAAA,EAC1B,CAAC;oBACD,gEAAgE;oBAChE,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,oBAAoB,CAAC,IAAI,CAAC,CAAC;gBACtC,CAAC;qBAAM,IACL,CAAC,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,CAAC;oBAC5C,CAAC,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,iBAAiB,CAAA,EAC3B,CAAC;oBACD,sEAAsE;oBACtE,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,oBAAoB,CAAC,IAAI,CAAC,CAAC;gBACtC,CAAC;qBAAM,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;oBAClC,kBAAkB;oBAClB,oBAAoB;oBACpB,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,oBAAoB,CAAC,IAAI,CAAC,CAAC;gBACtC,CAAC;qBAAM,IAAI,KAAK,CAAC,GAAG,KAAK,SAAS,EAAE,CAAC;oBACnC,eAAe;oBACf,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAC;gBACjC,CAAC;qBAAM,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,EAAE,CAAC;oBACrC,iBAAiB;oBACjB,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC;gBAChC,CAAC;YACH,CAAC;YAED,8BAAC,8BAAgB,yBAEf,KAAK,EAAC,uBAAkB,EACxB,QAAQ,EAAC,QAAQ,GACjB,CACK;QACR,MAAM,IAAI,CACT,wCACE,SAAS,EAAC,+CAA+C,oBAC1C,MAAM;YAErB,8BAAC,qCAAuB,yBAAa,QAAQ,EAAC,QAAQ,GAAG,CACpD,CACR,CACG,CACP,CAAC;AACJ,CAAC,CAAC,CAAC"}
+{"version":3,"file":"DragAndDropDragHandler.js","sourceRoot":"","sources":["../../../../src/data/drag-and-drop/drag-handler/DragAndDropDragHandler.tsx"],"names":[],"mappings":"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"}

package/cjs/data/drag-and-drop/item/DragAndDropItem.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-interface DragAndDropItemProps extends React.HTMLAttributes<HTMLDivElement> {
+interface DragAndDropItemProps extends React.HTMLAttributes<HTMLLIElement> {
     children: React.ReactNode;
     /**
      * Unique id
@@ -9,6 +9,11 @@ interface DragAndDropItemProps extends React.HTMLAttributes<HTMLDivElement> {
      * Index of the item being dragged
      */
     index: number;
+    /**
+     * Indicates if the item is an overlay
+     */
+    isOverlay?: boolean;
+    itemLabel: string;
 }
 /**
  * TODO
@@ -21,7 +26,7 @@ interface DragAndDropItemProps extends React.HTMLAttributes<HTMLDivElement> {
  * </DragAndDrop.Item>
  * ```
  */
-declare const DragAndDropItem: React.ForwardRefExoticComponent<DragAndDropItemProps & React.RefAttributes<HTMLDivElement>>;
+declare const DragAndDropItem: React.ForwardRefExoticComponent<DragAndDropItemProps & React.RefAttributes<HTMLLIElement>>;
 export default DragAndDropItem;
 export { DragAndDropItem };
 export type { DragAndDropItemProps };

package/cjs/data/drag-and-drop/item/DragAndDropItem.js

@@ -18,6 +18,7 @@ exports.DragAndDropItem = void 0;
 const react_1 = __importDefault(require("react"));
 const stack_1 = require("../../../primitives/stack");
 const helpers_1 = require("../../../utils/helpers");
+const hooks_1 = require("../../../utils/hooks");
 const DragAndDropDragHandler_1 = require("../drag-handler/DragAndDropDragHandler");
 const DragAndDrop_context_1 = require("../root/DragAndDrop.context");
 /**
@@ -33,18 +34,15 @@ const DragAndDrop_context_1 = require("../root/DragAndDrop.context");
  */
 const DragAndDropItem = react_1.default.forwardRef((_a, forwardedRef) => {
     var _b;
-    var { children, id, index, className } = _a, rest = __rest(_a, ["children", "id", "index", "className"]);
+    var { children, id, index, className, isOverlay = false, itemLabel } = _a, rest = __rest(_a, ["children", "id", "index", "className", "isOverlay", "itemLabel"]);
     const ref = react_1.default.useRef(null);
+    const mergedRef = (0, hooks_1.useMergeRefs)(forwardedRef, ref);
     const context = (0, DragAndDrop_context_1.useDragAndDropContext)();
     const item = { id, index };
     const isDropTarget = ((_b = context === null || context === void 0 ? void 0 : context.dropTarget) === null || _b === void 0 ? void 0 : _b.id) === id;
-    return (react_1.default.createElement(stack_1.HStack, { gap: "space-8", align: "center", wrap: false, asChild: true, ref: forwardedRef, padding: "space-4" },
-        react_1.default.createElement("div", Object.assign({ id: id, ref: ref }, rest, { "data-dnd-id": id, "data-dnd-index": index, role: "button", className: (0, helpers_1.cl)("aksel-data-table__drag-and-drop-item", className), "data-drop-target": isDropTarget, 
-            /*
-            data-keyboard-dragging={keyboardDragging}
-            */
-            tabIndex: -1 }),
-            react_1.default.createElement(DragAndDropDragHandler_1.DragAndDropDragHandler, { item: item }),
+    return (react_1.default.createElement(stack_1.HStack, { gap: "space-8", align: "center", wrap: false, asChild: true, padding: "space-4" },
+        react_1.default.createElement("li", Object.assign({ id: isOverlay ? undefined : id }, rest, { ref: mergedRef, "data-dnd-id": isOverlay ? undefined : id, "data-dnd-index": isOverlay ? undefined : index, className: (0, helpers_1.cl)("aksel-data-table__drag-and-drop-item", className), "data-drop-target": isOverlay ? undefined : isDropTarget, "data-overlay": isOverlay }),
+            react_1.default.createElement(DragAndDropDragHandler_1.DragAndDropDragHandler, { item: item, itemRef: ref, isOverlay: isOverlay, itemLabel: itemLabel }),
             react_1.default.createElement("div", null, children))));
 });
 exports.DragAndDropItem = DragAndDropItem;

package/cjs/data/drag-and-drop/item/DragAndDropItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"DragAndDropItem.js","sourceRoot":"","sources":["../../../../src/data/drag-and-drop/item/DragAndDropItem.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAC1B,qDAAmD;AACnD,oDAA4C;AAC5C,mFAAgF;AAChF,qEAAoE;AAcpE;;;;;;;;;;GAUG;AACH,MAAM,eAAe,GAAG,eAAK,CAAC,UAAU,CACtC,CAAC,EAA2C,EAAE,YAAY,EAAE,EAAE;;QAA7D,EAAE,QAAQ,EAAE,EAAE,EAAE,KAAK,EAAE,SAAS,OAAW,EAAN,IAAI,cAAzC,wCAA2C,CAAF;IACxC,MAAM,GAAG,GAAG,eAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC/C,MAAM,OAAO,GAAG,IAAA,2CAAqB,GAAE,CAAC;IACxC,MAAM,IAAI,GAAG,EAAE,EAAE,EAAE,KAAK,EAAE,CAAC;IAC3B,MAAM,YAAY,GAAG,CAAA,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,UAAU,0CAAE,EAAE,MAAK,EAAE,CAAC;IAEpD,OAAO,CACL,8BAAC,cAAM,IACL,GAAG,EAAC,SAAS,EACb,KAAK,EAAC,QAAQ,EACd,IAAI,EAAE,KAAK,EACX,OAAO,QACP,GAAG,EAAE,YAAY,EACjB,OAAO,EAAC,SAAS;QAGjB,qDACE,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,GAAG,IACJ,IAAI,mBACK,EAAE,oBACC,KAAK,EACrB,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,IAAA,YAAE,EAAC,sCAAsC,EAAE,SAAS,CAAC,sBAC9C,YAAY;YAC9B;;cAEE;YACF,QAAQ,EAAE,CAAC,CAAC;YAEZ,8BAAC,+CAAsB,IAAC,IAAI,EAAE,IAAI,GAAI;YACtC,2CAAM,QAAQ,CAAO,CACjB,CACC,CACV,CAAC;AACJ,CAAC,CACF,CAAC;AAGO,0CAAe;AADxB,kBAAe,eAAe,CAAC"}
+{"version":3,"file":"DragAndDropItem.js","sourceRoot":"","sources":["../../../../src/data/drag-and-drop/item/DragAndDropItem.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAC1B,qDAAmD;AACnD,oDAA4C;AAC5C,gDAAoD;AACpD,mFAAgF;AAChF,qEAAoE;AAmBpE;;;;;;;;;;GAUG;AACH,MAAM,eAAe,GAAG,eAAK,CAAC,UAAU,CACtC,CACE,EAAyE,EACzE,YAAY,EACZ,EAAE;;QAFF,EAAE,QAAQ,EAAE,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,GAAG,KAAK,EAAE,SAAS,OAAW,EAAN,IAAI,cAAvE,kEAAyE,CAAF;IAGvE,MAAM,GAAG,GAAG,eAAK,CAAC,MAAM,CAAgB,IAAI,CAAC,CAAC;IAC9C,MAAM,SAAS,GAAG,IAAA,oBAAY,EAAC,YAAY,EAAE,GAAG,CAAC,CAAC;IAClD,MAAM,OAAO,GAAG,IAAA,2CAAqB,GAAE,CAAC;IACxC,MAAM,IAAI,GAAG,EAAE,EAAE,EAAE,KAAK,EAAE,CAAC;IAC3B,MAAM,YAAY,GAAG,CAAA,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,UAAU,0CAAE,EAAE,MAAK,EAAE,CAAC;IAEpD,OAAO,CACL,8BAAC,cAAM,IACL,GAAG,EAAC,SAAS,EACb,KAAK,EAAC,QAAQ,EACd,IAAI,EAAE,KAAK,EACX,OAAO,QACP,OAAO,EAAC,SAAS;QAGjB,oDACE,EAAE,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,IAC1B,IAAI,IACR,GAAG,EAAE,SAAS,iBACD,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,oBACvB,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,EAC7C,SAAS,EAAE,IAAA,YAAE,EAAC,sCAAsC,EAAE,SAAS,CAAC,sBAC9C,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,YAAY,kBACxC,SAAS;YAEvB,8BAAC,+CAAsB,IACrB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,GAAG,EACZ,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,SAAS,GACpB;YACF,2CAAM,QAAQ,CAAO,CAClB,CACE,CACV,CAAC;AACJ,CAAC,CACF,CAAC;AAGO,0CAAe;AADxB,kBAAe,eAAe,CAAC"}

package/cjs/data/drag-and-drop/root/DragAndDrop.context.d.ts

@@ -7,7 +7,8 @@ interface DragAndDropContextType {
     dragHandlerActive: DragAndDropElement | null;
     setDragHandlerActive: (active: DragAndDropElement | null) => void;
     onKeyboardDragEnd: (diff: number) => void;
-    onDragStart: (event: React.PointerEvent | React.MouseEvent, item: DragAndDropElement) => void;
+    startPendingDrag: (event: React.PointerEvent, item: DragAndDropElement, element?: HTMLElement | null) => void;
+    itemAmount: number;
 }
 export declare const DragAndDropProvider: import("react").FC<DragAndDropContextType & {
     children: React.ReactNode;

package/cjs/data/drag-and-drop/root/DragAndDrop.context.js.map

@@ -1 +1 @@
-{"version":3,"file":"DragAndDrop.context.js","sourceRoot":"","sources":["../../../../src/data/drag-and-drop/root/DragAndDrop.context.tsx"],"names":[],"mappings":";;;;AAAA,oDAA6D;AAiBhD,KAGT,IAAA,6BAAmB,EAAqC;IAC1D,YAAY,EACV,iEAAiE;IACnE,IAAI,EAAE,oBAAoB;CAC3B,CAAC,EANU,2BAAmB,gBACjB,6BAAqB,iBAKhC"}
+{"version":3,"file":"DragAndDrop.context.js","sourceRoot":"","sources":["../../../../src/data/drag-and-drop/root/DragAndDrop.context.tsx"],"names":[],"mappings":";;;;AAAA,oDAA6D;AAmBhD,KAGT,IAAA,6BAAmB,EAAqC;IAC1D,YAAY,EACV,iEAAiE;IACnE,IAAI,EAAE,oBAAoB;CAC3B,CAAC,EANU,2BAAmB,gBACjB,6BAAqB,iBAKhC"}

package/cjs/data/drag-and-drop/root/DragAndDropRoot.d.ts

@@ -1,36 +1,13 @@
+/** biome-ignore-all lint/correctness/useHookAtTopLevel: False positive because of the way forwardRef() is added */
 import React from "react";
+import { ColumnDefinition, ColumnDefinitions } from "../../table/root/DataTable.types";
 import DragAndDropItem, { DragAndDropItemProps } from "../item/DragAndDropItem";
-interface DragAndDropProps extends React.HTMLAttributes<HTMLDivElement> {
-    children: any[];
-    setItems: React.Dispatch<React.SetStateAction<any[]>>;
+interface DragAndDropProps<T> extends React.HTMLAttributes<HTMLUListElement> {
+    items: ColumnDefinitions<T>;
+    setItems: React.Dispatch<React.SetStateAction<ColumnDefinitions<T>>>;
+    renderItem: (item: ColumnDefinition<T>, index: number) => React.ReactNode;
 }
-interface DataDragAndDropRootComponent extends React.ForwardRefExoticComponent<DragAndDropProps & React.RefAttributes<HTMLDivElement>> {
-    /**
-     * @see 🏷️ {@link DragAndDropItemProps}
-     * * @example
-     * ```jsx
-     * <DragAndDrop>
-     *   <DragAndDrop.Item id="1" index={0}>
-     *     ...
-     *   </DragAndDrop.Item>
-     * </DragAndDrop>
-     * ```
-     */
-    Item: typeof DragAndDropItem;
-}
-/**
- * TODO
- * setItems on root
- * state : active element
- * pointer over listener / state, onPointerEnter, onPointerLeave
- * Overlay - Use floating component
- * Keyboard navigation
- * Handle - button, arrows also button
- * UU - announce on drag start, item moved, drag end
- *
- * []
- */
-declare const DragAndDrop: DataDragAndDropRootComponent;
+declare const DragAndDrop: <T>(props: DragAndDropProps<T> & React.RefAttributes<HTMLUListElement>) => React.ReactElement | null;
 export { DragAndDrop, DragAndDropItem };
 export default DragAndDrop;
 export type { DragAndDropItemProps, DragAndDropProps };

package/cjs/data/drag-and-drop/root/DragAndDropRoot.js

@@ -37,6 +37,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DragAndDropItem = exports.DragAndDrop = void 0;
+/** biome-ignore-all lint/correctness/useHookAtTopLevel: False positive because of the way forwardRef() is added */
 const react_1 = __importStar(require("react"));
 const Floating_1 = require("../../../utils/components/floating/Floating");
 const DragAndDropItem_1 = __importDefault(require("../item/DragAndDropItem"));
@@ -44,52 +45,110 @@ exports.DragAndDropItem = DragAndDropItem_1.default;
 const DragAndDrop_context_1 = require("./DragAndDrop.context");
 /**
  * TODO
- * setItems on root
- * state : active element
- * pointer over listener / state, onPointerEnter, onPointerLeave
- * Overlay - Use floating component
- * Keyboard navigation
- * Handle - button, arrows also button
- * UU - announce on drag start, item moved, drag end
+ * [x] setItems on root
+ * [x] state : active element
+ * [x] pointer over listener / state, onPointerEnter, onPointerLeave
+ * [x] Overlay - Use floating component
+ * [x] Keyboard navigation
+ * [ ] UU - announce on drag start, item moved, drag end
+ * [x] Make overlay same width as the OG item, currently jumps to content width
+ * [x] Look into adding a cancel listener event
+ * [x] Make onClick work on drag handler button, currently blocked by pointer down/up listeners
+ * [x] Talk to design about what should happen on ESC key press, currently just cancels dragging, should it also reset position?
+ * [x] Make arrow icons into buttons that react to keyboard events, currently just decorative
+ * [x] Keep handler focus after clicking arrows for dragging
+ * [x] Look into data-based API vs component-based API
+ * [ ] Should we have hidden instructions for screen readers on how to use the drag and drop, and should we announce the position of the item while dragging?
+ * [x] Discuss if this component should be generic for drag and drop, or if it should be specifically for tables - just for table for now
+ * [x] Discuss items type
+ * [ ] Discuss how to implement label best
+ * [ ] Quick nav (< > samtidig) - få piltastene til å fungere
+ * [x] Implement new type for items - ColumnDefinitions<T>
+ * [ ] Remove announcer div and use a live region component instead
+ * [ ] Make ESC reset position, not just cancel dragging
+ * [ ] Make instructions for keyboard users (visible?)
+ * [ ] Ask design about visible keyboard instructions
  *
- * []
  */
-const DragAndDrop = (0, react_1.forwardRef)(({ setItems, children }, forwardedRef) => {
-    const [activeItem, setActiveItem] = react_1.default.useState(null);
-    const [dropTarget, setDropTarget] = react_1.default.useState(null);
-    const [dragHandlerActive, setDragHandlerActive] = react_1.default.useState(null);
-    const activeItemRef = react_1.default.useRef(null);
-    const dropTargetRef = react_1.default.useRef(null);
-    const [virtualRef, setVirtualRef] = react_1.default.useState({
+const DRAG_THRESHOLD = 4; // Minimum movement in pixels to start dragging
+function DragAndDropInner({ items, setItems, renderItem }, forwardedRef) {
+    const [activeItem, setActiveItem] = (0, react_1.useState)(null);
+    const [dropTarget, setDropTarget] = (0, react_1.useState)(null);
+    const [dragHandlerActive, setDragHandlerActive] = (0, react_1.useState)(null);
+    const [overlayWidth, setOverlayWidth] = (0, react_1.useState)(null);
+    const [announcement, setAnnouncement] = (0, react_1.useState)("");
+    const activeData = items.find((item) => item.id === (activeItem === null || activeItem === void 0 ? void 0 : activeItem.id));
+    const activeItemRef = (0, react_1.useRef)(null);
+    const dropTargetRef = (0, react_1.useRef)(null);
+    const [virtualRef, setVirtualRef] = (0, react_1.useState)({
         getBoundingClientRect: () => DOMRect.fromRect({ width: 0, height: 0, x: 0, y: 0 }),
     });
-    const setCombinedActiveItem = react_1.default.useCallback((item) => {
+    const pendingDragStartRef = (0, react_1.useRef)(null);
+    const startPendingDrag = (event, item, element) => {
+        pendingDragStartRef.current = {
+            item,
+            element: element || null,
+            pointerId: event.pointerId,
+            startX: event.clientX,
+            startY: event.clientY,
+        };
+    };
+    const setCombinedActiveItem = (0, react_1.useCallback)((item) => {
         activeItemRef.current = item;
         setActiveItem(item);
     }, []);
-    const setCombinedDropTarget = react_1.default.useCallback((item) => {
+    const setCombinedDropTarget = (0, react_1.useCallback)((item) => {
         dropTargetRef.current = item;
         setDropTarget(item);
     }, []);
+    const reorderItems = (0, react_1.useCallback)((fromIndex, toIndex) => {
+        setItems((currentItems) => {
+            const newItems = [...currentItems];
+            const [movedItem] = newItems.splice(fromIndex, 1);
+            newItems.splice(toIndex, 0, movedItem);
+            return newItems;
+        });
+    }, [setItems]);
     (0, react_1.useEffect)(() => {
+        /* This useEffect is used to toggle a class on the html element when dragging,
+          to prevent cursor issues when dragging over interactive elements,
+          and to prevent text selection during dragging. */
         if (activeItem) {
-            document.documentElement.setAttribute("data-dragging", "true");
+            document.documentElement.setAttribute("data-dragging-cursor", "true");
             document.body.style.userSelect = "none";
         }
         else {
-            document.documentElement.removeAttribute("data-dragging");
+            document.documentElement.removeAttribute("data-dragging-cursor");
             document.body.style.userSelect = "";
         }
         return () => {
-            document.documentElement.removeAttribute("data-dragging");
+            document.documentElement.removeAttribute("data-dragging-cursor");
             document.body.style.userSelect = "";
         };
     }, [activeItem]);
     (0, react_1.useEffect)(() => {
-        if (!activeItem)
-            return;
         const handlePointerMove = (event) => {
-            var _a, _b;
+            var _a, _b, _c;
+            const pendingStart = pendingDragStartRef.current;
+            const activeRef = activeItemRef.current;
+            const element = pendingStart === null || pendingStart === void 0 ? void 0 : pendingStart.element;
+            if (!activeRef && pendingStart) {
+                const deltaX = Math.abs(event.clientX - pendingStart.startX);
+                const deltaY = Math.abs(event.clientY - pendingStart.startY);
+                if (deltaX > DRAG_THRESHOLD || deltaY > DRAG_THRESHOLD) {
+                    if (element) {
+                        element.setPointerCapture(pendingStart.pointerId);
+                    }
+                    setOverlayWidth((_a = element === null || element === void 0 ? void 0 : element.getBoundingClientRect().width) !== null && _a !== void 0 ? _a : null);
+                    setCombinedActiveItem(pendingStart.item);
+                    setCombinedDropTarget(pendingStart.item);
+                    pendingDragStartRef.current = null;
+                }
+                return;
+            }
+            const active = activeItemRef.current;
+            if (!active)
+                return;
             setVirtualRef({
                 getBoundingClientRect: () => DOMRect.fromRect({
                     width: 0,
@@ -98,16 +157,13 @@ const DragAndDrop = (0, react_1.forwardRef)(({ setItems, children }, forwardedRe
                     y: event.clientY,
                 }),
             });
-            const active = activeItemRef.current;
-            if (!active)
-                return;
             const elements = document.elementsFromPoint(event.clientX, event.clientY);
             const matchingElements = elements.filter((el) => el instanceof HTMLElement && Boolean(el.closest("[data-dnd-id]")));
             const itemElements = matchingElements
                 .map((el) => el.closest("[data-dnd-id]"))
                 .filter((el) => el instanceof HTMLElement);
             const uniqueItemElements = Array.from(new Set(itemElements));
-            const targetElement = (_b = (_a = uniqueItemElements.find((el) => el.dataset.dndId !== active.id)) !== null && _a !== void 0 ? _a : uniqueItemElements.find((el) => el.dataset.dndId === active.id)) !== null && _b !== void 0 ? _b : null;
+            const targetElement = (_c = (_b = uniqueItemElements.find((el) => el.dataset.dndId !== active.id)) !== null && _b !== void 0 ? _b : uniqueItemElements.find((el) => el.dataset.dndId === active.id)) !== null && _c !== void 0 ? _c : null;
             if (!targetElement) {
                 setCombinedDropTarget(null);
                 return;
@@ -121,67 +177,70 @@ const DragAndDrop = (0, react_1.forwardRef)(({ setItems, children }, forwardedRe
             setCombinedDropTarget({ id: hoveredId, index: hoveredIndex });
         };
         const handlePointerUp = () => {
+            if (!activeItemRef.current) {
+                pendingDragStartRef.current = null;
+                return;
+            }
             const active = activeItemRef.current;
             const target = dropTargetRef.current;
             if (active && target && active.id !== target.id) {
-                setItems((items) => {
-                    const newItems = [...items];
-                    const [movedItem] = newItems.splice(active.index, 1);
-                    newItems.splice(target.index, 0, movedItem);
-                    return newItems;
-                });
+                reorderItems(active.index, target.index);
+                setAnnouncement(`Element flyttet til posisjon ${(target === null || target === void 0 ? void 0 : target.index) + 1} av ${items.length}`); // TODO - Bedre formulering?
             }
+            setOverlayWidth(null);
+            setDragHandlerActive(null);
+            setCombinedActiveItem(null);
+            setCombinedDropTarget(null);
+            pendingDragStartRef.current = null;
+        };
+        const handlePointerCancel = () => {
+            setOverlayWidth(null);
+            setDragHandlerActive(null);
             setCombinedActiveItem(null);
             setCombinedDropTarget(null);
+            pendingDragStartRef.current = null;
         };
-        // TODO - Look into adding a cancel listener event
         window.addEventListener("pointermove", handlePointerMove);
         window.addEventListener("pointerup", handlePointerUp);
+        window.addEventListener("pointercancel", handlePointerCancel);
         return () => {
             window.removeEventListener("pointermove", handlePointerMove);
             window.removeEventListener("pointerup", handlePointerUp);
+            window.removeEventListener("pointercancel", handlePointerCancel);
         };
-    }, [activeItem, setCombinedDropTarget, setCombinedActiveItem, setItems]);
+    }, [
+        setCombinedDropTarget,
+        setCombinedActiveItem,
+        reorderItems,
+        items.length,
+    ]);
     const onKeyboardDragEnd = (diff) => {
         if (!dragHandlerActive)
             return;
         const targetIndex = dragHandlerActive.index + diff;
-        if (targetIndex < 0 || targetIndex >= children.length) {
+        if (targetIndex < 0 || targetIndex >= items.length) {
             return;
         }
-        setItems((items) => {
-            const newItems = [...items];
-            const [movedItem] = newItems.splice(dragHandlerActive.index, 1);
-            newItems.splice(targetIndex, 0, movedItem);
-            return newItems;
-        });
+        reorderItems(dragHandlerActive.index, targetIndex);
         setDragHandlerActive(Object.assign(Object.assign({}, dragHandlerActive), { index: targetIndex }));
+        setAnnouncement(`Element flyttet til posisjon ${targetIndex + 1} av ${items.length}`); // TODO - Bedre formulering?
     };
-    const onDragStart = (event, item) => {
-        setVirtualRef({
-            getBoundingClientRect: () => DOMRect.fromRect({
-                width: 0,
-                height: 0,
-                x: event.clientX,
-                y: event.clientY,
-            }),
-        });
-        setCombinedActiveItem(item);
-        setCombinedDropTarget(item);
-    };
-    // TODO - Make overlay same width as the OG item, currently jumps to content width
-    return (react_1.default.createElement(DragAndDrop_context_1.DragAndDropProvider, { activeItem: activeItem, setActiveItem: setCombinedActiveItem, dropTarget: dropTarget, setDropTarget: setCombinedDropTarget, dragHandlerActive: dragHandlerActive, setDragHandlerActive: setDragHandlerActive, onKeyboardDragEnd: onKeyboardDragEnd, onDragStart: onDragStart },
-        react_1.default.createElement("div", { ref: forwardedRef }, children),
-        activeItem && (react_1.default.createElement(Floating_1.Floating, null,
+    return (react_1.default.createElement(DragAndDrop_context_1.DragAndDropProvider, { activeItem: activeItem, setActiveItem: setCombinedActiveItem, dropTarget: dropTarget, setDropTarget: setCombinedDropTarget, dragHandlerActive: dragHandlerActive, setDragHandlerActive: setDragHandlerActive, onKeyboardDragEnd: onKeyboardDragEnd, startPendingDrag: startPendingDrag, itemAmount: items.length },
+        react_1.default.createElement("ul", { ref: forwardedRef, "aria-label": "Dra og slipp elementer" }, items.map((item, index) => {
+            return (react_1.default.createElement(DragAndDropItem_1.default, { key: item.id, id: item.id, index: index, itemLabel: item.label }, renderItem(item, index)));
+        })),
+        activeItem && activeData && (react_1.default.createElement(Floating_1.Floating, null,
             react_1.default.createElement(Floating_1.Floating.Anchor, { virtualRef: virtualRef },
                 react_1.default.createElement("span", null)),
-            react_1.default.createElement(Floating_1.Floating.Content, { align: "start", updatePositionStrategy: "always", style: { pointerEvents: "none" } }, react_1.default.cloneElement(children[activeItem.index], {
-                "data-dnd-id": undefined,
-                "data-dnd-index": undefined,
-                "data-overlay": true,
-            }))))));
-});
+            react_1.default.createElement(Floating_1.Floating.Content, { align: "start", updatePositionStrategy: "always", style: {
+                    pointerEvents: "none",
+                    boxSizing: "border-box",
+                    width: overlayWidth ? `${overlayWidth}px` : "fit-content",
+                } },
+                react_1.default.createElement(DragAndDropItem_1.default, { id: activeItem.id, index: activeItem.index, isOverlay: true, itemLabel: activeData.label }, renderItem(activeData, activeItem.index))))),
+        react_1.default.createElement("div", { "aria-live": "assertive", className: "sr-only", "aria-atomic": "true" }, announcement)));
+}
+const DragAndDrop = (0, react_1.forwardRef)(DragAndDropInner);
 exports.DragAndDrop = DragAndDrop;
-DragAndDrop.Item = DragAndDropItem_1.default;
 exports.default = DragAndDrop;
 //# sourceMappingURL=DragAndDropRoot.js.map

package/cjs/data/drag-and-drop/root/DragAndDropRoot.js.map

@@ -1 +1 @@
-{"version":3,"file":"DragAndDropRoot.js","sourceRoot":"","sources":["../../../../src/data/drag-and-drop/root/DragAndDropRoot.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"DragAndDropRoot.js","sourceRoot":"","sources":["../../../../src/data/drag-and-drop/root/DragAndDropRoot.tsx"],"names":[],"mappings":"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"}

package/cjs/data/drag-and-drop/types.d.ts

@@ -2,3 +2,7 @@ export interface DragAndDropElement {
     id: string;
     index: number;
 }
+export interface DragAndDropItemData {
+    id: string;
+    label: string;
+}