@navikt/ds-react 8.7.0 → 8.9.0

package/cjs/alert/base-alert/root/BaseAlertRoot.js

@@ -57,8 +57,7 @@ const BaseAlert = (0, react_1.forwardRef)((_a, forwardedRef) => {
     const translate = (0, i18n_hooks_1.useI18n)("global");
     const alertColor = status ? (0, BaseAlertRoot_utils_1.baseAlertStatusToDataColor)(status) : dataColor;
     return (react_1.default.createElement(BaseAlertRoot_context_1.BaseAlertProvider, { size: size, status: status, color: alertColor, statusId: type === "strong" ? statusId : undefined },
-        react_1.default.createElement(Component, Object.assign({ "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : (!status || Component === "div" ? undefined : translate(status)), ref: forwardedRef }, restProps, { className: (0, helpers_1.cl)(className, "aksel-base-alert"), "data-size": size, "data-color": alertColor, "data-variant": type, "data-global": global }),
-            react_1.default.createElement("div", { role: role }, children))));
+        react_1.default.createElement(Component, Object.assign({ "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : (!status || Component === "div" ? undefined : translate(status)), ref: forwardedRef }, restProps, { className: (0, helpers_1.cl)(className, "aksel-base-alert"), "data-size": size, "data-color": alertColor, "data-variant": type, "data-global": global }), role ? react_1.default.createElement("div", { role: role }, children) : children)));
 });
 exports.BaseAlert = BaseAlert;
 //# sourceMappingURL=BaseAlertRoot.js.map

package/cjs/alert/base-alert/root/BaseAlertRoot.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseAlertRoot.js","sourceRoot":"","sources":["../../../../src/alert/base-alert/root/BaseAlertRoot.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAE1C,4DAAgD;AAChD,oDAA4C;AAC5C,+DAAyD;AACzD,mEAGiC;AACjC,+DAAmE;AA0CnE,MAAM,SAAS,GAAG,IAAA,kBAAU,EAC1B,CACE,EAYiB,EACjB,YAAY,EACZ,EAAE;QAdF,EACE,QAAQ,EACR,SAAS,EACT,IAAI,GAAG,QAAQ,EACf,YAAY,EAAE,SAAS,EACvB,IAAI,EACJ,MAAM,GAAG,KAAK,EACd,MAAM,EACN,EAAE,EAAE,SAAS,GAAG,SAAS,EACzB,YAAY,EAAE,SAAS,EACvB,IAAI,OAEW,EADZ,SAAS,cAXd,uGAYC,CADa;IAId,MAAM,QAAQ,GAAG,IAAA,sBAAK,GAAE,CAAC;IACzB,MAAM,SAAS,GAAG,IAAA,oBAAO,EAAC,QAAQ,CAAC,CAAC;IAEpC,MAAM,UAAU,GAAG,MAAM,CAAC,CAAC,CAAC,IAAA,gDAA0B,EAAC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IAE3E,OAAO,CACL,8BAAC,yCAAiB,IAChB,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS;QAElD,8BAAC,SAAS,gCAEN,SAAS,aAAT,SAAS,cAAT,SAAS,GACT,CAAC,CAAC,MAAM,IAAI,SAAS,KAAK,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,EAElE,GAAG,EAAE,YAAY,IACb,SAAS,IACb,SAAS,EAAE,IAAA,YAAE,EAAC,SAAS,EAAE,kBAAkB,CAAC,eACjC,IAAI,gBACH,UAAU,kBACR,IAAI,iBACL,MAAM;YAEnB,uCAAK,IAAI,EAAE,IAAI,IAAG,QAAQ,CAAO,CACvB,CACM,CACrB,CAAC;AACJ,CAAC,CACF,CAAC;AAEO,8BAAS"}
+{"version":3,"file":"BaseAlertRoot.js","sourceRoot":"","sources":["../../../../src/alert/base-alert/root/BaseAlertRoot.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAE1C,4DAAgD;AAChD,oDAA4C;AAC5C,+DAAyD;AACzD,mEAGiC;AACjC,+DAAmE;AA0CnE,MAAM,SAAS,GAAG,IAAA,kBAAU,EAC1B,CACE,EAYiB,EACjB,YAAY,EACZ,EAAE;QAdF,EACE,QAAQ,EACR,SAAS,EACT,IAAI,GAAG,QAAQ,EACf,YAAY,EAAE,SAAS,EACvB,IAAI,EACJ,MAAM,GAAG,KAAK,EACd,MAAM,EACN,EAAE,EAAE,SAAS,GAAG,SAAS,EACzB,YAAY,EAAE,SAAS,EACvB,IAAI,OAEW,EADZ,SAAS,cAXd,uGAYC,CADa;IAId,MAAM,QAAQ,GAAG,IAAA,sBAAK,GAAE,CAAC;IACzB,MAAM,SAAS,GAAG,IAAA,oBAAO,EAAC,QAAQ,CAAC,CAAC;IAEpC,MAAM,UAAU,GAAG,MAAM,CAAC,CAAC,CAAC,IAAA,gDAA0B,EAAC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IAE3E,OAAO,CACL,8BAAC,yCAAiB,IAChB,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS;QAElD,8BAAC,SAAS,gCAEN,SAAS,aAAT,SAAS,cAAT,SAAS,GACT,CAAC,CAAC,MAAM,IAAI,SAAS,KAAK,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,EAElE,GAAG,EAAE,YAAY,IACb,SAAS,IACb,SAAS,EAAE,IAAA,YAAE,EAAC,SAAS,EAAE,kBAAkB,CAAC,eACjC,IAAI,gBACH,UAAU,kBACR,IAAI,iBACL,MAAM,KAElB,IAAI,CAAC,CAAC,CAAC,uCAAK,IAAI,EAAE,IAAI,IAAG,QAAQ,CAAO,CAAC,CAAC,CAAC,QAAQ,CAC1C,CACM,CACrB,CAAC;AACJ,CAAC,CACF,CAAC;AAEO,8BAAS"}

package/cjs/alert/info-card/index.d.ts

@@ -1,2 +1,2 @@
-export { InfoCard, InfoCardHeader, InfoCardTitle, InfoCardContent, } from "./root/InfoCardRoot";
-export type { InfoCardProps, InfoCardHeaderProps, InfoCardTitleProps, InfoCardContentProps, } from "./root/InfoCardRoot";
+export { InfoCard, InfoCardHeader, InfoCardTitle, InfoCardContent, InfoCardMessage, } from "./root/InfoCardRoot";
+export type { InfoCardProps, InfoCardHeaderProps, InfoCardTitleProps, InfoCardContentProps, InfoCardMessageProps, } from "./root/InfoCardRoot";

package/cjs/alert/info-card/index.js

@@ -1,10 +1,11 @@
 "use strict";
 "use client";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.InfoCardContent = exports.InfoCardTitle = exports.InfoCardHeader = exports.InfoCard = void 0;
+exports.InfoCardMessage = exports.InfoCardContent = exports.InfoCardTitle = exports.InfoCardHeader = exports.InfoCard = void 0;
 var InfoCardRoot_1 = require("./root/InfoCardRoot");
 Object.defineProperty(exports, "InfoCard", { enumerable: true, get: function () { return InfoCardRoot_1.InfoCard; } });
 Object.defineProperty(exports, "InfoCardHeader", { enumerable: true, get: function () { return InfoCardRoot_1.InfoCardHeader; } });
 Object.defineProperty(exports, "InfoCardTitle", { enumerable: true, get: function () { return InfoCardRoot_1.InfoCardTitle; } });
 Object.defineProperty(exports, "InfoCardContent", { enumerable: true, get: function () { return InfoCardRoot_1.InfoCardContent; } });
+Object.defineProperty(exports, "InfoCardMessage", { enumerable: true, get: function () { return InfoCardRoot_1.InfoCardMessage; } });
 //# sourceMappingURL=index.js.map

package/cjs/alert/info-card/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/alert/info-card/index.ts"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;AACb,oDAK6B;AAJ3B,wGAAA,QAAQ,OAAA;AACR,8GAAA,cAAc,OAAA;AACd,6GAAA,aAAa,OAAA;AACb,+GAAA,eAAe,OAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/alert/info-card/index.ts"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;AACb,oDAM6B;AAL3B,wGAAA,QAAQ,OAAA;AACR,8GAAA,cAAc,OAAA;AACd,6GAAA,aAAa,OAAA;AACb,+GAAA,eAAe,OAAA;AACf,+GAAA,eAAe,OAAA"}

package/cjs/alert/info-card/message/InfoCardMessage.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+interface InfoCardMessageProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Icon to display in message.
+     */
+    icon: React.ReactNode;
+}
+/**
+ * A component for displaying informational messages.
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/infocard)
+ * @see 🏷️ {@link InfoCardMessageProps}
+ * @example
+ * ```jsx
+ * <InfoCard data-color="info">
+ *   <InfoCard.Message icon={<InformationSquareIcon aria-hidden />}>
+ *     Message contents
+ *   </InfoCard.Message>
+ * </InfoCard>
+ * ```
+ */
+declare const InfoCardMessage: React.ForwardRefExoticComponent<InfoCardMessageProps & React.RefAttributes<HTMLDivElement>>;
+export { InfoCardMessage };
+export type { InfoCardMessageProps };

package/cjs/alert/info-card/message/InfoCardMessage.js

@@ -0,0 +1,73 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InfoCardMessage = void 0;
+const react_1 = __importStar(require("react"));
+const typography_1 = require("../../../typography");
+const helpers_1 = require("../../../utils/helpers");
+const BaseAlertRoot_context_1 = require("../../base-alert/root/BaseAlertRoot.context");
+/**
+ * A component for displaying informational messages.
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/infocard)
+ * @see 🏷️ {@link InfoCardMessageProps}
+ * @example
+ * ```jsx
+ * <InfoCard data-color="info">
+ *   <InfoCard.Message icon={<InformationSquareIcon aria-hidden />}>
+ *     Message contents
+ *   </InfoCard.Message>
+ * </InfoCard>
+ * ```
+ */
+const InfoCardMessage = (0, react_1.forwardRef)((_a, forwardedRef) => {
+    var { children, className, icon } = _a, restProps = __rest(_a, ["children", "className", "icon"]);
+    const context = (0, BaseAlertRoot_context_1.useBaseAlert)();
+    return (react_1.default.createElement("div", Object.assign({ ref: forwardedRef, className: (0, helpers_1.cl)(className, "aksel-base-alert__message") }, restProps),
+        react_1.default.createElement("div", { className: "aksel-base-alert__icon" }, icon),
+        react_1.default.createElement(typography_1.BodyLong, { size: context.size, as: "div", textColor: "default" }, children)));
+});
+exports.InfoCardMessage = InfoCardMessage;
+//# sourceMappingURL=InfoCardMessage.js.map

package/cjs/alert/info-card/message/InfoCardMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InfoCardMessage.js","sourceRoot":"","sources":["../../../../src/alert/info-card/message/InfoCardMessage.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAC1C,oDAA+C;AAC/C,oDAA4C;AAC5C,uFAA2E;AAS3E;;;;;;;;;;;;GAYG;AACH,MAAM,eAAe,GAAG,IAAA,kBAAU,EAChC,CACE,EAAiE,EACjE,YAAY,EACZ,EAAE;QAFF,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,OAAsC,EAAjC,SAAS,cAAzC,iCAA2C,CAAF;IAGzC,MAAM,OAAO,GAAG,IAAA,oCAAY,GAAE,CAAC;IAC/B,OAAO,CACL,qDACE,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,IAAA,YAAE,EAAC,SAAS,EAAE,2BAA2B,CAAC,IACjD,SAAS;QAEb,uCAAK,SAAS,EAAC,wBAAwB,IAAE,IAAI,CAAO;QACpD,8BAAC,qBAAQ,IAAC,IAAI,EAAE,OAAO,CAAC,IAAI,EAAE,EAAE,EAAC,KAAK,EAAC,SAAS,EAAC,SAAS,IACvD,QAAQ,CACA,CACP,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEO,0CAAe"}

package/cjs/alert/info-card/root/InfoCardRoot.d.ts

@@ -2,6 +2,7 @@ import React from "react";
 import { BaseAlert } from "../../base-alert";
 import { InfoCardContent, type InfoCardContentProps } from "../content/InfoCardContent";
 import { InfoCardHeader, type InfoCardHeaderProps } from "../header/InfoCardHeader";
+import { InfoCardMessage, type InfoCardMessageProps } from "../message/InfoCardMessage";
 import { InfoCardTitle, type InfoCardTitleProps } from "../title/InfoCardTitle";
 type InfoCardProps = Omit<BaseAlert.RootProps, "type" | "global" | "status" | "as"> & {
     /**
@@ -55,6 +56,18 @@ interface InfoCardComponent extends React.ForwardRefExoticComponent<InfoCardProp
      * ```
      */
     Content: typeof InfoCardContent;
+    /**
+     * @see 🏷️ {@link InfoCardMessageProps}
+     * @example
+     * ```jsx
+     * <InfoCard data-color="info">
+     *   <InfoCard.Message icon={<InformationSquareIcon aria-hidden />}>
+     *     Message contents
+     *   </InfoCard.Message>
+     * </InfoCard>
+     * ```
+     */
+    Message: typeof InfoCardMessage;
 }
 /**
  * A component for displaying informational content in a card format.
@@ -72,5 +85,5 @@ interface InfoCardComponent extends React.ForwardRefExoticComponent<InfoCardProp
  */
 export declare const InfoCard: InfoCardComponent;
 export default InfoCard;
-export { InfoCardContent, InfoCardHeader, InfoCardTitle };
-export type { InfoCardProps, InfoCardHeaderProps, InfoCardTitleProps, InfoCardContentProps, };
+export { InfoCardContent, InfoCardHeader, InfoCardTitle, InfoCardMessage };
+export type { InfoCardProps, InfoCardHeaderProps, InfoCardTitleProps, InfoCardContentProps, InfoCardMessageProps, };

package/cjs/alert/info-card/root/InfoCardRoot.js

@@ -44,13 +44,15 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.InfoCardTitle = exports.InfoCardHeader = exports.InfoCardContent = exports.InfoCard = void 0;
+exports.InfoCardMessage = exports.InfoCardTitle = exports.InfoCardHeader = exports.InfoCardContent = exports.InfoCard = void 0;
 const react_1 = __importStar(require("react"));
 const base_alert_1 = require("../../base-alert");
 const InfoCardContent_1 = require("../content/InfoCardContent");
 Object.defineProperty(exports, "InfoCardContent", { enumerable: true, get: function () { return InfoCardContent_1.InfoCardContent; } });
 const InfoCardHeader_1 = require("../header/InfoCardHeader");
 Object.defineProperty(exports, "InfoCardHeader", { enumerable: true, get: function () { return InfoCardHeader_1.InfoCardHeader; } });
+const InfoCardMessage_1 = require("../message/InfoCardMessage");
+Object.defineProperty(exports, "InfoCardMessage", { enumerable: true, get: function () { return InfoCardMessage_1.InfoCardMessage; } });
 const InfoCardTitle_1 = require("../title/InfoCardTitle");
 Object.defineProperty(exports, "InfoCardTitle", { enumerable: true, get: function () { return InfoCardTitle_1.InfoCardTitle; } });
 /**
@@ -74,5 +76,6 @@ exports.InfoCard = (0, react_1.forwardRef)((_a, forwardedRef) => {
 exports.InfoCard.Header = InfoCardHeader_1.InfoCardHeader;
 exports.InfoCard.Title = InfoCardTitle_1.InfoCardTitle;
 exports.InfoCard.Content = InfoCardContent_1.InfoCardContent;
+exports.InfoCard.Message = InfoCardMessage_1.InfoCardMessage;
 exports.default = exports.InfoCard;
 //# sourceMappingURL=InfoCardRoot.js.map

package/cjs/alert/info-card/root/InfoCardRoot.js.map

@@ -1 +1 @@
-{"version":3,"file":"InfoCardRoot.js","sourceRoot":"","sources":["../../../../src/alert/info-card/root/InfoCardRoot.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAC1C,iDAA6C;AAC7C,gEAGoC;AA8G3B,gGAhHP,iCAAe,OAgHO;AA7GxB,6DAGkC;AA0GR,+FA5GxB,+BAAc,OA4GwB;AAzGxC,0DAAgF;AAyGtC,8FAzGjC,6BAAa,OAyGiC;AAzCvD;;;;;;;;;;;;;GAaG;AACU,QAAA,QAAQ,GAAG,IAAA,kBAAU,EAChC,CACE,EAIgB,EAChB,YAAY,EACZ,EAAE;QANF,EACE,YAAY,EAAE,SAAS,GAAG,MAAM,EAChC,EAAE,GAAG,KAAK,OAEI,EADX,SAAS,cAHd,oBAIC,CADa;IAId,OAAO,CACL,8BAAC,sBAAS,CAAC,IAAI,kBACb,GAAG,EAAE,YAAY,gBACL,SAAS,IACjB,SAAS,IACb,IAAI,EAAC,UAAU,EACf,MAAM,EAAE,KAAK,EACb,EAAE,EAAE,EAAE,IACN,CACH,CAAC;AACJ,CAAC,CACmB,CAAC;AAEvB,gBAAQ,CAAC,MAAM,GAAG,+BAAc,CAAC;AACjC,gBAAQ,CAAC,KAAK,GAAG,6BAAa,CAAC;AAC/B,gBAAQ,CAAC,OAAO,GAAG,iCAAe,CAAC;AAEnC,kBAAe,gBAAQ,CAAC"}
+{"version":3,"file":"InfoCardRoot.js","sourceRoot":"","sources":["../../../../src/alert/info-card/root/InfoCardRoot.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAC1C,iDAA6C;AAC7C,gEAGoC;AAgI3B,gGAlIP,iCAAe,OAkIO;AA/HxB,6DAGkC;AA4HR,+FA9HxB,+BAAc,OA8HwB;AA3HxC,gEAGoC;AAwHqB,gGA1HvD,iCAAe,OA0HuD;AAvHxE,0DAAgF;AAuHtC,8FAvHjC,6BAAa,OAuHiC;AA1CvD;;;;;;;;;;;;;GAaG;AACU,QAAA,QAAQ,GAAG,IAAA,kBAAU,EAChC,CACE,EAIgB,EAChB,YAAY,EACZ,EAAE;QANF,EACE,YAAY,EAAE,SAAS,GAAG,MAAM,EAChC,EAAE,GAAG,KAAK,OAEI,EADX,SAAS,cAHd,oBAIC,CADa;IAId,OAAO,CACL,8BAAC,sBAAS,CAAC,IAAI,kBACb,GAAG,EAAE,YAAY,gBACL,SAAS,IACjB,SAAS,IACb,IAAI,EAAC,UAAU,EACf,MAAM,EAAE,KAAK,EACb,EAAE,EAAE,EAAE,IACN,CACH,CAAC;AACJ,CAAC,CACmB,CAAC;AAEvB,gBAAQ,CAAC,MAAM,GAAG,+BAAc,CAAC;AACjC,gBAAQ,CAAC,KAAK,GAAG,6BAAa,CAAC;AAC/B,gBAAQ,CAAC,OAAO,GAAG,iCAAe,CAAC;AACnC,gBAAQ,CAAC,OAAO,GAAG,iCAAe,CAAC;AAEnC,kBAAe,gBAAQ,CAAC"}

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

@@ -0,0 +1,12 @@
+import React from "react";
+import { DragAndDropElement } from "../types";
+export interface DragAndDropDragHandlerProps {
+    item: DragAndDropElement;
+}
+/**
+ * DragAndDropDragHandler
+ *
+ * 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.
+ */
+export declare const DragAndDropDragHandler: React.ForwardRefExoticComponent<DragAndDropDragHandlerProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,57 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DragAndDropDragHandler = void 0;
+const react_1 = __importDefault(require("react"));
+const aksel_icons_1 = require("@navikt/aksel-icons");
+const DragAndDrop_context_1 = require("../root/DragAndDrop.context");
+/**
+ * DragAndDropDragHandler
+ *
+ * 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;
+    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;
+    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) => {
+                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.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
+                    event.preventDefault();
+                    context === null || context === void 0 ? void 0 : context.setDragHandlerActive(item);
+                }
+                else if (event.key === "Escape") {
+                    // Cancel dragging
+                    // TODO Handle reset
+                    context === null || context === void 0 ? void 0 : context.setDragHandlerActive(null);
+                }
+                else if (event.key === "ArrowUp") {
+                    // Move item up
+                    context === null || context === void 0 ? void 0 : context.onKeyboardDragEnd(-1);
+                }
+                else if (event.key === "ArrowDown") {
+                    // Move item down
+                    context === null || context === void 0 ? void 0 : context.onKeyboardDragEnd(1);
+                }
+            } },
+            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" })))));
+});
+//# sourceMappingURL=DragAndDropDragHandler.js.map

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

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

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

@@ -0,0 +1,27 @@
+import React from "react";
+interface DragAndDropItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    /**
+     * Unique id
+     */
+    id: string;
+    /**
+     * Index of the item being dragged
+     */
+    index: number;
+}
+/**
+ * TODO
+ *
+ * @see 🏷️ {@link DragAndDropItemProps}
+ * @example
+ * ```tsx
+ * <DragAndDrop.Item numOfSelectedRows={selectedRows.length} onClear={handleClear}>
+ *   TODO
+ * </DragAndDrop.Item>
+ * ```
+ */
+declare const DragAndDropItem: React.ForwardRefExoticComponent<DragAndDropItemProps & React.RefAttributes<HTMLDivElement>>;
+export default DragAndDropItem;
+export { DragAndDropItem };
+export type { DragAndDropItemProps };

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

@@ -0,0 +1,52 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DragAndDropItem = void 0;
+const react_1 = __importDefault(require("react"));
+const stack_1 = require("../../../primitives/stack");
+const helpers_1 = require("../../../utils/helpers");
+const DragAndDropDragHandler_1 = require("../drag-handler/DragAndDropDragHandler");
+const DragAndDrop_context_1 = require("../root/DragAndDrop.context");
+/**
+ * TODO
+ *
+ * @see 🏷️ {@link DragAndDropItemProps}
+ * @example
+ * ```tsx
+ * <DragAndDrop.Item numOfSelectedRows={selectedRows.length} onClear={handleClear}>
+ *   TODO
+ * </DragAndDrop.Item>
+ * ```
+ */
+const DragAndDropItem = react_1.default.forwardRef((_a, forwardedRef) => {
+    var _b;
+    var { children, id, index, className } = _a, rest = __rest(_a, ["children", "id", "index", "className"]);
+    const ref = react_1.default.useRef(null);
+    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 }),
+            react_1.default.createElement("div", null, children))));
+});
+exports.DragAndDropItem = DragAndDropItem;
+exports.default = DragAndDropItem;
+//# sourceMappingURL=DragAndDropItem.js.map

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

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

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

@@ -0,0 +1,16 @@
+import { DragAndDropElement } from "../types";
+interface DragAndDropContextType {
+    activeItem: DragAndDropElement | null;
+    setActiveItem: (id: DragAndDropElement | null) => void;
+    dropTarget: DragAndDropElement | null;
+    setDropTarget: (id: DragAndDropElement | null) => void;
+    dragHandlerActive: DragAndDropElement | null;
+    setDragHandlerActive: (active: DragAndDropElement | null) => void;
+    onKeyboardDragEnd: (diff: number) => void;
+    onDragStart: (event: React.PointerEvent | React.MouseEvent, item: DragAndDropElement) => void;
+}
+export declare const DragAndDropProvider: import("react").FC<DragAndDropContextType & {
+    children: React.ReactNode;
+    ref?: never;
+}>, useDragAndDropContext: <S extends boolean = true>(strict?: S | undefined) => S extends true ? DragAndDropContextType | undefined : DragAndDropContextType | undefined;
+export {};

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

@@ -0,0 +1,10 @@
+"use strict";
+var _a;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDragAndDropContext = exports.DragAndDropProvider = void 0;
+const helpers_1 = require("../../../utils/helpers");
+_a = (0, helpers_1.createStrictContext)({
+    errorMessage: "useDragAndDropContext must be used within a DragAndDropProvider",
+    name: "DragAndDropContext",
+}), exports.DragAndDropProvider = _a.Provider, exports.useDragAndDropContext = _a.useContext;
+//# sourceMappingURL=DragAndDrop.context.js.map

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

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

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

@@ -0,0 +1,36 @@
+import React from "react";
+import DragAndDropItem, { DragAndDropItemProps } from "../item/DragAndDropItem";
+interface DragAndDropProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: any[];
+    setItems: React.Dispatch<React.SetStateAction<any[]>>;
+}
+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;
+export { DragAndDrop, DragAndDropItem };
+export default DragAndDrop;
+export type { DragAndDropItemProps, DragAndDropProps };

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

@@ -0,0 +1,187 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DragAndDropItem = exports.DragAndDrop = void 0;
+const react_1 = __importStar(require("react"));
+const Floating_1 = require("../../../utils/components/floating/Floating");
+const DragAndDropItem_1 = __importDefault(require("../item/DragAndDropItem"));
+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
+ *
+ * []
+ */
+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({
+        getBoundingClientRect: () => DOMRect.fromRect({ width: 0, height: 0, x: 0, y: 0 }),
+    });
+    const setCombinedActiveItem = react_1.default.useCallback((item) => {
+        activeItemRef.current = item;
+        setActiveItem(item);
+    }, []);
+    const setCombinedDropTarget = react_1.default.useCallback((item) => {
+        dropTargetRef.current = item;
+        setDropTarget(item);
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (activeItem) {
+            document.documentElement.setAttribute("data-dragging", "true");
+            document.body.style.userSelect = "none";
+        }
+        else {
+            document.documentElement.removeAttribute("data-dragging");
+            document.body.style.userSelect = "";
+        }
+        return () => {
+            document.documentElement.removeAttribute("data-dragging");
+            document.body.style.userSelect = "";
+        };
+    }, [activeItem]);
+    (0, react_1.useEffect)(() => {
+        if (!activeItem)
+            return;
+        const handlePointerMove = (event) => {
+            var _a, _b;
+            setVirtualRef({
+                getBoundingClientRect: () => DOMRect.fromRect({
+                    width: 0,
+                    height: 0,
+                    x: event.clientX,
+                    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;
+            if (!targetElement) {
+                setCombinedDropTarget(null);
+                return;
+            }
+            const hoveredId = targetElement.dataset.dndId;
+            const hoveredIndex = Number(targetElement.dataset.dndIndex);
+            if (!hoveredId || Number.isNaN(hoveredIndex)) {
+                setCombinedDropTarget(null);
+                return;
+            }
+            setCombinedDropTarget({ id: hoveredId, index: hoveredIndex });
+        };
+        const handlePointerUp = () => {
+            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;
+                });
+            }
+            setCombinedActiveItem(null);
+            setCombinedDropTarget(null);
+        };
+        // TODO - Look into adding a cancel listener event
+        window.addEventListener("pointermove", handlePointerMove);
+        window.addEventListener("pointerup", handlePointerUp);
+        return () => {
+            window.removeEventListener("pointermove", handlePointerMove);
+            window.removeEventListener("pointerup", handlePointerUp);
+        };
+    }, [activeItem, setCombinedDropTarget, setCombinedActiveItem, setItems]);
+    const onKeyboardDragEnd = (diff) => {
+        if (!dragHandlerActive)
+            return;
+        const targetIndex = dragHandlerActive.index + diff;
+        if (targetIndex < 0 || targetIndex >= children.length) {
+            return;
+        }
+        setItems((items) => {
+            const newItems = [...items];
+            const [movedItem] = newItems.splice(dragHandlerActive.index, 1);
+            newItems.splice(targetIndex, 0, movedItem);
+            return newItems;
+        });
+        setDragHandlerActive(Object.assign(Object.assign({}, dragHandlerActive), { index: targetIndex }));
+    };
+    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,
+            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,
+            }))))));
+});
+exports.DragAndDrop = DragAndDrop;
+DragAndDrop.Item = DragAndDropItem_1.default;
+exports.default = DragAndDrop;
+//# sourceMappingURL=DragAndDropRoot.js.map