@navikt/ds-react 8.8.0 → 8.9.1

package/esm/form/radio/Radio.js

@@ -2,20 +2,22 @@ import React, { forwardRef } from "react";
 import { BodyShort } from "../../typography/index.js";
 import { omit, useId } from "../../utils-external/index.js";
 import { cl } from "../../utils/helpers/index.js";
+import { RadioInput } from "./radio-input/RadioInput.js";
 import { useRadio } from "./useRadio.js";
-export const Radio = forwardRef((props, ref) => {
+export const Radio = forwardRef((props, forwardedRef) => {
     const { inputProps, size, hasError, readOnly } = useRadio(props);
     const descriptionId = useId();
-    return (React.createElement("div", { className: cl(props.className, "aksel-radio", `aksel-radio--${size}`, {
+    const { className, description, children } = props;
+    return (React.createElement("div", { className: cl(className, "aksel-radio", `aksel-radio--${size}`, {
             "aksel-radio--error": hasError,
             "aksel-radio--disabled": inputProps.disabled,
             "aksel-radio--readonly": readOnly,
         }), "data-color": hasError ? "danger" : props["data-color"] },
-        React.createElement("input", Object.assign({}, omit(props, ["children", "size", "description", "readOnly"]), omit(inputProps, ["aria-invalid", "aria-describedby"]), { "aria-describedby": cl(inputProps["aria-describedby"], {
-                [descriptionId]: props.description,
-            }) || undefined, className: "aksel-radio__input", ref: ref })),
-        React.createElement(BodyShort, { as: "label", htmlFor: inputProps.id, className: "aksel-radio__label", size: size }, props.children),
-        props.description && (React.createElement(BodyShort, { id: descriptionId, size: size, className: "aksel-form-field__subdescription aksel-radio__description" }, props.description))));
+        React.createElement(RadioInput, Object.assign({ ref: forwardedRef }, omit(props, ["children", "size", "description", "readOnly"]), omit(inputProps, ["aria-invalid", "aria-describedby"]), { "aria-describedby": cl(inputProps["aria-describedby"], {
+                [descriptionId]: description,
+            }) || undefined, standalone: false })),
+        React.createElement(BodyShort, { as: "label", htmlFor: inputProps.id, className: "aksel-radio__label", size: size }, children),
+        description && (React.createElement(BodyShort, { id: descriptionId, size: size, className: "aksel-form-field__subdescription aksel-radio__description" }, description))));
 });
 export default Radio;
 //# sourceMappingURL=Radio.js.map

package/esm/form/radio/Radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","sourceRoot":"","sources":["../../../src/form/radio/Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,EAAE,EAAE,MAAM,qBAAqB,CAAC;AAEzC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,MAAM,CAAC,MAAM,KAAK,GAAG,UAAU,CAA+B,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IAC3E,MAAM,EAAE,UAAU,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACjE,MAAM,aAAa,GAAG,KAAK,EAAE,CAAC;IAE9B,OAAO,CACL,6BACE,SAAS,EAAE,EAAE,CAAC,KAAK,CAAC,SAAS,EAAE,aAAa,EAAE,gBAAgB,IAAI,EAAE,EAAE;YACpE,oBAAoB,EAAE,QAAQ;YAC9B,uBAAuB,EAAE,UAAU,CAAC,QAAQ;YAC5C,uBAAuB,EAAE,QAAQ;SAClC,CAAC,gBACU,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,YAAY,CAAC;QAErD,+CACM,IAAI,CAAC,KAAK,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,aAAa,EAAE,UAAU,CAAC,CAAC,EAC5D,IAAI,CAAC,UAAU,EAAE,CAAC,cAAc,EAAE,kBAAkB,CAAC,CAAC,wBAExD,EAAE,CAAC,UAAU,CAAC,kBAAkB,CAAC,EAAE;gBACjC,CAAC,aAAa,CAAC,EAAE,KAAK,CAAC,WAAW;aACnC,CAAC,IAAI,SAAS,EAEjB,SAAS,EAAC,oBAAoB,EAC9B,GAAG,EAAE,GAAG,IACR;QACF,oBAAC,SAAS,IACR,EAAE,EAAC,OAAO,EACV,OAAO,EAAE,UAAU,CAAC,EAAE,EACtB,SAAS,EAAC,oBAAoB,EAC9B,IAAI,EAAE,IAAI,IAET,KAAK,CAAC,QAAQ,CACL;QACX,KAAK,CAAC,WAAW,IAAI,CACpB,oBAAC,SAAS,IACR,EAAE,EAAE,aAAa,EACjB,IAAI,EAAE,IAAI,EACV,SAAS,EAAC,2DAA2D,IAEpE,KAAK,CAAC,WAAW,CACR,CACb,CACG,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Radio.js","sourceRoot":"","sources":["../../../src/form/radio/Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,EAAE,EAAE,MAAM,qBAAqB,CAAC;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAEtD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,MAAM,CAAC,MAAM,KAAK,GAAG,UAAU,CAC7B,CAAC,KAAiB,EAAE,YAAY,EAAE,EAAE;IAClC,MAAM,EAAE,UAAU,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACjE,MAAM,aAAa,GAAG,KAAK,EAAE,CAAC;IAE9B,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAEnD,OAAO,CACL,6BACE,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,aAAa,EAAE,gBAAgB,IAAI,EAAE,EAAE;YAC9D,oBAAoB,EAAE,QAAQ;YAC9B,uBAAuB,EAAE,UAAU,CAAC,QAAQ;YAC5C,uBAAuB,EAAE,QAAQ;SAClC,CAAC,gBACU,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,YAAY,CAAC;QAErD,oBAAC,UAAU,kBACT,GAAG,EAAE,YAAY,IACb,IAAI,CAAC,KAAK,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,aAAa,EAAE,UAAU,CAAC,CAAC,EAC5D,IAAI,CAAC,UAAU,EAAE,CAAC,cAAc,EAAE,kBAAkB,CAAC,CAAC,wBAExD,EAAE,CAAC,UAAU,CAAC,kBAAkB,CAAC,EAAE;gBACjC,CAAC,aAAa,CAAC,EAAE,WAAW;aAC7B,CAAC,IAAI,SAAS,EAEjB,UAAU,EAAE,KAAK,IACjB;QACF,oBAAC,SAAS,IACR,EAAE,EAAC,OAAO,EACV,OAAO,EAAE,UAAU,CAAC,EAAE,EACtB,SAAS,EAAC,oBAAoB,EAC9B,IAAI,EAAE,IAAI,IAET,QAAQ,CACC;QACX,WAAW,IAAI,CACd,oBAAC,SAAS,IACR,EAAE,EAAE,aAAa,EACjB,IAAI,EAAE,IAAI,EACV,SAAS,EAAC,2DAA2D,IAEpE,WAAW,CACF,CACb,CACG,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/esm/form/radio/radio-input/RadioInput.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+type RadioInputProps = React.InputHTMLAttributes<HTMLInputElement> & {
+    children?: never;
+    standalone?: boolean;
+    /**
+     * Reduces pseudo-element target-size.
+     */
+    compact?: boolean;
+};
+declare const RadioInput: React.ForwardRefExoticComponent<React.InputHTMLAttributes<HTMLInputElement> & {
+    children?: never;
+    standalone?: boolean;
+    /**
+     * Reduces pseudo-element target-size.
+     */
+    compact?: boolean;
+} & React.RefAttributes<HTMLInputElement>>;
+export { RadioInput };
+export type { RadioInputProps };

package/esm/form/radio/radio-input/RadioInput.js

@@ -0,0 +1,19 @@
+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;
+};
+import React, { forwardRef } from "react";
+import { cl } from "../../../utils/helpers/index.js";
+const RadioInput = forwardRef((_a, forwardedRef) => {
+    var { className, standalone = true, compact } = _a, rest = __rest(_a, ["className", "standalone", "compact"]);
+    return (React.createElement("input", Object.assign({}, rest, { ref: forwardedRef, className: cl("aksel-radio__input", className), "data-standalone": standalone, "data-compact": compact, type: "radio" })));
+});
+export { RadioInput };
+//# sourceMappingURL=RadioInput.js.map

package/esm/form/radio/radio-input/RadioInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioInput.js","sourceRoot":"","sources":["../../../../src/form/radio/radio-input/RadioInput.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,EAAE,EAAE,MAAM,wBAAwB,CAAC;AAW5C,MAAM,UAAU,GAAG,UAAU,CAC3B,CACE,EAAmE,EACnE,YAAY,EACZ,EAAE;QAFF,EAAE,SAAS,EAAE,UAAU,GAAG,IAAI,EAAE,OAAO,OAA4B,EAAvB,IAAI,cAAhD,sCAAkD,CAAF;IAGhD,OAAO,CACL,+CACM,IAAI,IACR,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,EAAE,CAAC,oBAAoB,EAAE,SAAS,CAAC,qBAC7B,UAAU,kBACb,OAAO,EACrB,IAAI,EAAC,OAAO,IACZ,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,OAAO,EAAE,UAAU,EAAE,CAAC"}

package/esm/internal-header/InternalHeaderButton.d.ts

@@ -5,6 +5,11 @@ export interface InternalHeaderButtonProps extends React.ButtonHTMLAttributes<HT
      * Application Button
      */
     children: React.ReactNode;
+    /**
+     * Active state for element.
+     * @default false
+     */
+    isActive?: boolean;
 }
 export declare const InternalHeaderButton: OverridableComponent<InternalHeaderButtonProps, HTMLButtonElement>;
 export default InternalHeaderButton;

package/esm/internal-header/InternalHeaderButton.js

@@ -12,8 +12,8 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React, { forwardRef } from "react";
 import { cl } from "../utils/helpers/index.js";
 export const InternalHeaderButton = forwardRef((_a, ref) => {
-    var { as: Component = "button", className } = _a, rest = __rest(_a, ["as", "className"]);
-    return (React.createElement(Component, Object.assign({}, rest, { ref: ref, className: cl("aksel-internalheader__button", className) })));
+    var { as: Component = "button", className, isActive = false } = _a, rest = __rest(_a, ["as", "className", "isActive"]);
+    return (React.createElement(Component, Object.assign({ "aria-current": isActive || undefined }, rest, { ref: ref, className: cl("aksel-internalheader__button", className), "data-active": isActive })));
 });
 export default InternalHeaderButton;
 //# sourceMappingURL=InternalHeaderButton.js.map

package/esm/internal-header/InternalHeaderButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"InternalHeaderButton.js","sourceRoot":"","sources":["../../src/internal-header/InternalHeaderButton.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAC;AAQtC,MAAM,CAAC,MAAM,oBAAoB,GAG7B,UAAU,CAAC,CAAC,EAAgD,EAAE,GAAG,EAAE,EAAE;QAAzD,EAAE,EAAE,EAAE,SAAS,GAAG,QAAQ,EAAE,SAAS,OAAW,EAAN,IAAI,cAA9C,mBAAgD,CAAF;IAC5D,OAAO,CACL,oBAAC,SAAS,oBACJ,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,8BAA8B,EAAE,SAAS,CAAC,IACxD,CACH,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"InternalHeaderButton.js","sourceRoot":"","sources":["../../src/internal-header/InternalHeaderButton.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAC;AAatC,MAAM,CAAC,MAAM,oBAAoB,GAG7B,UAAU,CACZ,CAAC,EAAkE,EAAE,GAAG,EAAE,EAAE;QAA3E,EAAE,EAAE,EAAE,SAAS,GAAG,QAAQ,EAAE,SAAS,EAAE,QAAQ,GAAG,KAAK,OAAW,EAAN,IAAI,cAAhE,+BAAkE,CAAF;IAC/D,OAAO,CACL,oBAAC,SAAS,kCACM,QAAQ,IAAI,SAAS,IAC/B,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,8BAA8B,EAAE,SAAS,CAAC,iBAC3C,QAAQ,IACrB,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/esm/utils/components/Listbox/group/ListboxGroup.js

@@ -1,9 +1,10 @@
 import React from "react";
+import { Label } from "../../../../typography/index.js";
 import { useId } from "../../../../utils-external/index.js";
 function ListboxGroup({ label, children }) {
     const labelId = useId();
     return (React.createElement("div", { role: "group", className: "aksel-listbox__group", "aria-labelledby": labelId },
-        React.createElement("div", { id: labelId, "aria-hidden": true }, label),
+        React.createElement(Label, { as: "div", size: "small", id: labelId, "aria-hidden": true, className: "aksel-listbox__group-label" }, label),
         children));
 }
 export { ListboxGroup };

package/esm/utils/components/Listbox/group/ListboxGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListboxGroup.js","sourceRoot":"","sources":["../../../../../src/utils/components/Listbox/group/ListboxGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAC;AAOnD,SAAS,YAAY,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAqB;IAC1D,MAAM,OAAO,GAAG,KAAK,EAAE,CAAC;IAExB,OAAO,CACL,6BACE,IAAI,EAAC,OAAO,EACZ,SAAS,EAAC,sBAAsB,qBACf,OAAO;QAExB,6BAAK,EAAE,EAAE,OAAO,yBACb,KAAK,CACF;QACL,QAAQ,CACL,CACP,CAAC;AACJ,CAAC;AAED,OAAO,EAAE,YAAY,EAAE,CAAC"}
+{"version":3,"file":"ListboxGroup.js","sourceRoot":"","sources":["../../../../../src/utils/components/Listbox/group/ListboxGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAC;AAOnD,SAAS,YAAY,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAqB;IAC1D,MAAM,OAAO,GAAG,KAAK,EAAE,CAAC;IAExB,OAAO,CACL,6BACE,IAAI,EAAC,OAAO,EACZ,SAAS,EAAC,sBAAsB,qBACf,OAAO;QAExB,oBAAC,KAAK,IACJ,EAAE,EAAC,KAAK,EACR,IAAI,EAAC,OAAO,EACZ,EAAE,EAAE,OAAO,uBAEX,SAAS,EAAC,4BAA4B,IAErC,KAAK,CACA;QACP,QAAQ,CACL,CACP,CAAC;AACJ,CAAC;AAED,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "8.8.0",
+  "version": "8.9.1",
   "description": "React components from the Norwegian Labour and Welfare Administration.",
   "author": "Aksel, a team part of the Norwegian Labour and Welfare Administration.",
   "license": "MIT",
@@ -705,8 +705,8 @@
   "dependencies": {
     "@floating-ui/react": "0.27.8",
     "@floating-ui/react-dom": "^2.1.8",
-    "@navikt/aksel-icons": "^8.8.0",
-    "@navikt/ds-tokens": "^8.8.0",
+    "@navikt/aksel-icons": "^8.9.1",
+    "@navikt/ds-tokens": "^8.9.1",
     "date-fns": "^4.0.0",
     "react-day-picker": "9.7.0"
   },
@@ -732,7 +732,7 @@
     "tsc-alias": "1.8.16",
     "tsx": "^4.20.6",
     "typescript": "5.9.3",
-    "vitest": "4.0.18"
+    "vitest": "4.1.0"
   },
   "peerDependencies": {
     "@types/react": "^17.0.30 || ^18 || ^19",

package/src/data/drag-and-drop/drag-handler/DragAndDropDragHandler.tsx

@@ -0,0 +1,94 @@
+import React from "react";
+import {
+  CaretDownCircleFillIcon,
+  CaretUpCircleFillIcon,
+  DragVerticalIcon,
+} from "@navikt/aksel-icons";
+import { useDragAndDropContext } from "../root/DragAndDrop.context";
+import { DragAndDropElement } from "../types";
+
+export interface DragAndDropDragHandlerProps {
+  item: DragAndDropElement;
+  itemRef?: React.RefObject<HTMLDivElement | null>;
+}
+
+/**
+ * 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 const DragAndDropDragHandler = React.forwardRef<
+  HTMLDivElement,
+  DragAndDropDragHandlerProps
+>(({ item, itemRef }, forwardedRef) => {
+  const context = useDragAndDropContext();
+  const active =
+    context?.dragHandlerActive &&
+    item &&
+    context?.dragHandlerActive?.id === item.id;
+
+  return (
+    <div className="aksel-data-drag-and-drop__drag-handler" ref={forwardedRef}>
+      {active && (
+        <span
+          className="aksel-data-drag-and-drop__drag-handler__arrow"
+          data-direction="up"
+        >
+          <CaretUpCircleFillIcon aria-hidden fontSize="1.2rem" />
+        </span>
+      )}
+      <button
+        aria-label="Dra for å flytte"
+        className="aksel-data-drag-and-drop__drag-handler__button"
+        data-drag-handler-active={active}
+        onPointerDown={(event) => {
+          event.stopPropagation();
+          context?.startPendingDragStart(event, item, itemRef?.current || null);
+        }}
+        onClick={() => context?.setDragHandlerActive(item)}
+        onKeyDown={(event) => {
+          if (
+            (event.key === "Enter" || event.key === " ") &&
+            context?.dragHandlerActive
+          ) {
+            // Enter or space, currently active item - end keyboard dragging
+            event.preventDefault();
+            context?.setDragHandlerActive(null);
+          } else if (
+            (event.key === "Enter" || event.key === " ") &&
+            !context?.dragHandlerActive
+          ) {
+            // Enter or space, not currently active item - start keyboard dragging
+            event.preventDefault();
+            context?.setDragHandlerActive(item);
+          } else if (event.key === "Escape") {
+            // Cancel dragging
+            // TODO Handle reset
+            context?.setDragHandlerActive(null);
+          } else if (event.key === "ArrowUp") {
+            // Move item up
+            context?.onKeyboardDragEnd(-1);
+          } else if (event.key === "ArrowDown") {
+            // Move item down
+            context?.onKeyboardDragEnd(1);
+          }
+        }}
+      >
+        <DragVerticalIcon
+          aria-hidden
+          title="Dra for å flytte"
+          fontSize="1.5rem"
+        />
+      </button>
+      {active && (
+        <span
+          className="aksel-data-drag-and-drop__drag-handler__arrow"
+          data-direction="down"
+        >
+          <CaretDownCircleFillIcon aria-hidden fontSize="1.2rem" />
+        </span>
+      )}
+    </div>
+  );
+});

package/src/data/drag-and-drop/item/DragAndDropItem.tsx

@@ -0,0 +1,75 @@
+import React from "react";
+import { HStack } from "../../../primitives/stack";
+import { cl } from "../../../utils/helpers";
+import { DragAndDropDragHandler } from "../drag-handler/DragAndDropDragHandler";
+import { useDragAndDropContext } from "../root/DragAndDrop.context";
+
+interface DragAndDropItemProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+  /**
+   * Unique id
+   */
+  id: string;
+  /**
+   * Index of the item being dragged
+   */
+  index: number;
+  /**
+   * Indicates if the item is an overlay
+   */
+  isOverlay?: boolean;
+}
+
+/**
+ * TODO
+ *
+ * @see 🏷️ {@link DragAndDropItemProps}
+ * @example
+ * ```tsx
+ * <DragAndDrop.Item numOfSelectedRows={selectedRows.length} onClear={handleClear}>
+ *   TODO
+ * </DragAndDrop.Item>
+ * ```
+ */
+const DragAndDropItem = React.forwardRef<HTMLDivElement, DragAndDropItemProps>(
+  (
+    { children, id, index, className, isOverlay = false, ...rest },
+    forwardedRef,
+  ) => {
+    const ref = React.useRef<HTMLDivElement>(null);
+    const context = useDragAndDropContext();
+    const item = { id, index };
+    const isDropTarget = context?.dropTarget?.id === id;
+
+    return (
+      <HStack
+        gap="space-8"
+        align="center"
+        wrap={false}
+        asChild
+        ref={forwardedRef}
+        padding="space-4"
+      >
+        {/* TODO Should this be a <li>? */}
+        <div
+          id={isOverlay ? undefined : id}
+          ref={ref}
+          {...rest}
+          data-dnd-id={isOverlay ? undefined : id}
+          data-dnd-index={isOverlay ? undefined : index}
+          className={cl("aksel-data-table__drag-and-drop-item", className)}
+          data-drop-target={isOverlay ? undefined : isDropTarget}
+          data-overlay={isOverlay}
+          tabIndex={isOverlay ? undefined : -1}
+        >
+          <DragAndDropDragHandler item={item} itemRef={ref} />
+          <div>{children}</div>
+        </div>
+      </HStack>
+    );
+  },
+);
+
+export default DragAndDropItem;
+export { DragAndDropItem };
+export type { DragAndDropItemProps };

package/src/data/drag-and-drop/root/DragAndDrop.context.tsx

@@ -0,0 +1,27 @@
+import { createStrictContext } from "../../../utils/helpers";
+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;
+  startPendingDragStart: (
+    event: React.PointerEvent,
+    item: DragAndDropElement,
+    element?: HTMLElement | null,
+  ) => void;
+  cancelDragStart: () => void;
+}
+
+export const {
+  Provider: DragAndDropProvider,
+  useContext: useDragAndDropContext,
+} = createStrictContext<DragAndDropContextType | undefined>({
+  errorMessage:
+    "useDragAndDropContext must be used within a DragAndDropProvider",
+  name: "DragAndDropContext",
+});

package/src/data/drag-and-drop/root/DragAndDropRoot.tsx

@@ -0,0 +1,294 @@
+import React, { forwardRef, useEffect } from "react";
+import { Floating } from "../../../utils/components/floating/Floating";
+import DragAndDropItem, { DragAndDropItemProps } from "../item/DragAndDropItem";
+import { DragAndDropElement } from "../types";
+import { DragAndDropProvider } from "./DragAndDrop.context";
+
+interface DragAndDropProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactElement<DragAndDropItemProps>[];
+  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
+ * [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
+ * [ ] Look into adding a cancel listener event
+ * [ ] Make onClick work on drag handler button, currently blocked by pointer down/up listeners
+ * [ ] Talk to design about what should happen on ESC key press, currently just cancels dragging, should it also reset position?
+ * [ ] Make arrow icons into buttons that react to keyboard events, currently just decorative
+ */
+
+const DragAndDrop = forwardRef<HTMLDivElement, DragAndDropProps>(
+  ({ setItems, children }, forwardedRef) => {
+    const DRAG_THRESHOLD = 4; // Minimum movement in pixels to start dragging
+
+    const [activeItem, setActiveItem] =
+      React.useState<DragAndDropElement | null>(null);
+    const [dropTarget, setDropTarget] =
+      React.useState<DragAndDropElement | null>(null);
+    const [dragHandlerActive, setDragHandlerActive] =
+      React.useState<DragAndDropElement | null>(null);
+    const [overlayWidth, setOverlayWidth] = React.useState<number | null>(null);
+
+    const activeItemRef = React.useRef<DragAndDropElement | null>(null);
+    const dropTargetRef = React.useRef<DragAndDropElement | null>(null);
+    const activeChild = children.find(
+      (child) => child.props.id === activeItem?.id,
+    );
+
+    const [virtualRef, setVirtualRef] = React.useState({
+      getBoundingClientRect: () =>
+        DOMRect.fromRect({ width: 0, height: 0, x: 0, y: 0 }),
+    });
+
+    const pendingDragStartRef = React.useRef<{
+      item: DragAndDropElement;
+      element: HTMLElement | null;
+      pointerId: number;
+      startX: number;
+      startY: number;
+    } | null>(null);
+
+    const startPendingDragStart = (
+      event: React.PointerEvent,
+      item: DragAndDropElement,
+      element?: HTMLElement | null,
+    ) => {
+      pendingDragStartRef.current = {
+        item,
+        element: element || null,
+        pointerId: event.pointerId,
+        startX: event.clientX,
+        startY: event.clientY,
+      };
+    };
+
+    const cancelDragStart = () => {
+      pendingDragStartRef.current = null;
+    };
+
+    const setCombinedActiveItem = React.useCallback(
+      (item: DragAndDropElement | null) => {
+        activeItemRef.current = item;
+        setActiveItem(item);
+      },
+      [],
+    );
+
+    const setCombinedDropTarget = React.useCallback(
+      (item: DragAndDropElement | null) => {
+        dropTargetRef.current = item;
+        setDropTarget(item);
+      },
+      [],
+    );
+
+    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-cursor", "true");
+        document.body.style.userSelect = "none";
+      } else {
+        document.documentElement.removeAttribute("data-dragging-cursor");
+        document.body.style.userSelect = "";
+      }
+
+      return () => {
+        document.documentElement.removeAttribute("data-dragging-cursor");
+        document.body.style.userSelect = "";
+      };
+    }, [activeItem]);
+
+    useEffect(() => {
+      const handlePointerMove = (event: PointerEvent) => {
+        const pendingStart = pendingDragStartRef.current;
+        const activeRef = activeItemRef.current;
+        const element = 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(element?.getBoundingClientRect().width ?? null);
+            setCombinedActiveItem(pendingStart.item);
+            setCombinedDropTarget(pendingStart.item);
+            pendingDragStartRef.current = null;
+          }
+          return;
+        }
+
+        const active = activeItemRef.current;
+        if (!active) return;
+
+        setVirtualRef({
+          getBoundingClientRect: () =>
+            DOMRect.fromRect({
+              width: 0,
+              height: 0,
+              x: event.clientX,
+              y: event.clientY,
+            }),
+        });
+
+        const elements = document.elementsFromPoint(
+          event.clientX,
+          event.clientY,
+        );
+
+        const matchingElements = elements.filter(
+          (el) =>
+            el instanceof HTMLElement && Boolean(el.closest("[data-dnd-id]")),
+        ) as HTMLElement[];
+
+        const itemElements = matchingElements
+          .map((el) => el.closest("[data-dnd-id]") as HTMLElement)
+          .filter((el) => el instanceof HTMLElement);
+
+        const uniqueItemElements = Array.from(new Set(itemElements));
+
+        const targetElement =
+          uniqueItemElements.find((el) => el.dataset.dndId !== active.id) ??
+          uniqueItemElements.find((el) => el.dataset.dndId === active.id) ??
+          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 = () => {
+        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;
+          });
+        }
+        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);
+
+      return () => {
+        window.removeEventListener("pointermove", handlePointerMove);
+        window.removeEventListener("pointerup", handlePointerUp);
+      };
+    }, [setCombinedDropTarget, setCombinedActiveItem, setItems]);
+
+    const onKeyboardDragEnd = (diff: number) => {
+      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({ ...dragHandlerActive, index: targetIndex });
+    };
+
+    return (
+      <DragAndDropProvider
+        activeItem={activeItem}
+        setActiveItem={setCombinedActiveItem}
+        dropTarget={dropTarget}
+        setDropTarget={setCombinedDropTarget}
+        dragHandlerActive={dragHandlerActive}
+        setDragHandlerActive={setDragHandlerActive}
+        onKeyboardDragEnd={onKeyboardDragEnd}
+        startPendingDragStart={startPendingDragStart}
+        cancelDragStart={cancelDragStart}
+      >
+        <div ref={forwardedRef}>{children}</div>
+        {activeItem && activeChild && (
+          <Floating>
+            <Floating.Anchor virtualRef={virtualRef}>
+              <span />
+            </Floating.Anchor>
+            <Floating.Content
+              align="start"
+              updatePositionStrategy="always"
+              style={{
+                pointerEvents: "none",
+                boxSizing: "border-box",
+                width: overlayWidth ? `${overlayWidth}px` : "fit-content",
+              }}
+            >
+              {React.cloneElement(activeChild, {
+                isOverlay: true,
+              })}
+            </Floating.Content>
+          </Floating>
+        )}
+      </DragAndDropProvider>
+    );
+  },
+) as DataDragAndDropRootComponent;
+
+DragAndDrop.Item = DragAndDropItem;
+
+export { DragAndDrop, DragAndDropItem };
+export default DragAndDrop;
+export type { DragAndDropItemProps, DragAndDropProps };

package/src/data/drag-and-drop/types.ts

@@ -0,0 +1,4 @@
+export interface DragAndDropElement {
+  id: string;
+  index: number;
+}