@navikt/ds-react 8.10.4 → 8.10.6

package/src/data/table/sub-row-toggle/DataTableSubRowToggle.tsx

@@ -1,14 +1,15 @@
 import React from "react";
 import { ChevronDownIcon, ChevronRightIcon } from "@navikt/aksel-icons";
 import { Button } from "../../../button";
-import { type ItemDetail, useTableItemsContext } from "../hooks/useTableItems";
+import { type ItemDetail } from "../hooks/useTableItems";
+import { useDataTableContext } from "../root/DataTableRoot.context";
 
 function DataTableSubRowToggle({ details }: { details: ItemDetail<any> }) {
-  const { isSubRowExpanded, onExpandedRowIdsChange } = useTableItemsContext();
+  const { tableItems } = useDataTableContext();
 
   const subRows = details.children;
   const hasSubRows = subRows && subRows.length > 0;
-  const isRowExpanded = isSubRowExpanded(details.id);
+  const isRowExpanded = tableItems.isSubRowExpanded(details.id);
 
   return (
     <div className="aksel-data-table__nested-toggle">
@@ -19,7 +20,7 @@ function DataTableSubRowToggle({ details }: { details: ItemDetail<any> }) {
           size="small"
           onClick={(e) => {
             e.stopPropagation();
-            onExpandedRowIdsChange(details.id);
+            tableItems.onExpandedRowIdsChange(details.id);
           }}
           aria-expanded={isRowExpanded}
           aria-label={isRowExpanded ? "Skjul under-rader" : "Vis under-rader"}

package/src/data/table/tbody/DataTableTbody.tsx

@@ -11,7 +11,7 @@ const inertValue = parseInt(version.split(".")[0], 10) > 18 ? true : ""; // Supp
 
 const DataTableTbody = forwardRef<HTMLTableSectionElement, DataTableTbodyProps>(
   ({ className, ...rest }, forwardedRef) => {
-    const { showLoadingOverlay } = useDataTableContext();
+    const { loading } = useDataTableContext();
     return (
       <DataTableLocationProvider location="tbody">
         <tbody
@@ -19,7 +19,11 @@ const DataTableTbody = forwardRef<HTMLTableSectionElement, DataTableTbodyProps>(
           ref={forwardedRef}
           className={cl("aksel-data-table__tbody", className)}
           // @ts-expect-error - inert is not yet recognized by React's type definitions, but we want to use it for better accessibility when showing the loading overlay.
-          inert={showLoadingOverlay ? inertValue : false}
+          inert={
+            loading?.isLoading && loading.variant === "overlay"
+              ? inertValue
+              : false
+          }
         />
       </DataTableLocationProvider>
     );

package/src/data/table/tr/DataTableTr.tsx

@@ -12,26 +12,30 @@ import { Skeleton } from "../../../skeleton";
 import { Label } from "../../../typography";
 import { useId } from "../../../utils-external";
 import { cl, composeEventHandlers } from "../../../utils/helpers";
+import { consoleWarning } from "../../../utils/helpers/consoleWarning";
 import { DataTableBaseCell } from "../base-cell/DataTableBaseCell";
 import { DataTableColumnHeader } from "../column-header/DataTableColumnHeader";
 import {
   getDataTableDetailsPanelId,
   useDataTableDetailsPanel,
 } from "../hooks/useTableDetailsPanel";
+import type { TableRowEntryId } from "../root/DataTable.types";
 import {
   useDataTableContext,
   useDataTableLocation,
 } from "../root/DataTableRoot.context";
 import { DataTableTd } from "../td/DataTableTd";
 
-const SELECTION_CELL_WIDTH = "50px";
+const ACTION_CELL_WIDTH = 50;
+
+const ACTION_CELL_CSS_WIDTH = `${ACTION_CELL_WIDTH}px`;
 
 type DataTableTrProps = React.HTMLAttributes<HTMLTableRowElement> & {
   selected?: boolean;
   /**
    * Unique identifier for the row, used for selection..
    */
-  rowId?: string | number;
+  rowId?: TableRowEntryId;
 };
 
 const DataTableTr = forwardRef<HTMLTableRowElement, DataTableTrProps>(
@@ -49,6 +53,7 @@ const DataTableTr = forwardRef<HTMLTableRowElement, DataTableTrProps>(
     const { layout, stickyHeader, selectionState, onRowClick } =
       useDataTableContext();
     const { location } = useDataTableLocation();
+    const { tableItems } = useDataTableContext();
 
     const renderFillerCell = layout === "fixed" && children;
 
@@ -76,10 +81,17 @@ const DataTableTr = forwardRef<HTMLTableRowElement, DataTableTrProps>(
             }
 
             if (
-              !selectionState.disableRowSelectionOnClick &&
+              selectionState.selectionTrigger === "row" &&
               selectionState.selection.selectionMode !== "none"
             ) {
-              selectionState.selection.toggleSelection(rowId);
+              const rowData = tableItems.itemDetails.get(rowId)?.rowData;
+
+              if (!rowData) {
+                consoleWarning(
+                  `No row data found for rowId ${rowId}. This may cause issues with selection if enableRowSelection is used.`,
+                );
+              }
+              selectionState.selection.toggleSelection(rowId, rowData);
             }
             onRowClick?.(rowId, event);
           }
@@ -113,8 +125,10 @@ const DataTableTr = forwardRef<HTMLTableRowElement, DataTableTrProps>(
   },
 );
 
-function RowExpansionCell({ rowId }: { rowId?: string | number }) {
-  const { tableId, showLoadingSkeletons } = useDataTableContext();
+function RowExpansionCell({ rowId }: { rowId?: TableRowEntryId }) {
+  const { tableId, loading, stickyStart } = useDataTableContext();
+  const stickyExpansion = stickyStart.expansion;
+
   const { location } = useDataTableLocation();
 
   const {
@@ -131,20 +145,25 @@ function RowExpansionCell({ rowId }: { rowId?: string | number }) {
     return null;
   }
 
-  if (showLoadingSkeletons) {
+  if (loading?.isLoading && loading?.variant === "skeleton") {
     if (location === "thead") {
       return (
         <DataTableColumnHeader
-          width={SELECTION_CELL_WIDTH}
-          UNSAFE_isSelection
+          width={{ value: ACTION_CELL_CSS_WIDTH }}
+          cellType="action"
           data-block-keyboard-nav
           label=""
-          /* isSticky={stickySelection && "start"} */
+          isSticky={stickyExpansion && "start"}
+          style={stickyExpansion ? { left: 0 } : undefined}
         />
       );
     }
     return (
-      <DataTableBaseCell as="td">
+      <DataTableBaseCell
+        as="td"
+        isSticky={stickyExpansion && "start"}
+        style={stickyExpansion ? { left: 0 } : undefined}
+      >
         <Skeleton variant="text" />
       </DataTableBaseCell>
     );
@@ -153,11 +172,12 @@ function RowExpansionCell({ rowId }: { rowId?: string | number }) {
   if (location === "thead" && !showExpandAll) {
     return (
       <DataTableColumnHeader
-        width={SELECTION_CELL_WIDTH}
-        UNSAFE_isSelection
+        width={{ value: ACTION_CELL_CSS_WIDTH }}
+        cellType="action"
         data-block-keyboard-nav
         label=""
-        /* isSticky={stickySelection && "start"} */
+        isSticky={stickyExpansion && "start"}
+        style={stickyExpansion ? { left: 0 } : undefined}
       />
     );
   }
@@ -166,10 +186,11 @@ function RowExpansionCell({ rowId }: { rowId?: string | number }) {
     return (
       <DataTableColumnHeader
         textAlign="center"
-        width={SELECTION_CELL_WIDTH}
-        UNSAFE_isSelection
+        width={{ value: ACTION_CELL_CSS_WIDTH }}
+        cellType="action"
         label=""
-        /* isSticky={stickySelection && "start"} */
+        isSticky={stickyExpansion && "start"}
+        style={stickyExpansion ? { left: 0 } : undefined}
       >
         <Button
           variant="tertiary"
@@ -199,11 +220,23 @@ function RowExpansionCell({ rowId }: { rowId?: string | number }) {
   const expansionId = getDataTableDetailsPanelId(tableId, rowId);
 
   if (!canExpandRow) {
-    return <DataTableTd UNSAFE_isSelection preventRowClick />;
+    return (
+      <DataTableTd
+        cellType="action"
+        preventRowClick
+        isSticky={stickyExpansion && "start"}
+        style={stickyExpansion ? { left: 0 } : undefined}
+      />
+    );
   }
 
   return (
-    <DataTableTd UNSAFE_isSelection preventRowClick>
+    <DataTableTd
+      cellType="action"
+      preventRowClick
+      isSticky={stickyExpansion && "start"}
+      style={stickyExpansion ? { left: 0 } : undefined}
+    >
       <Button
         variant="tertiary"
         data-color="neutral"
@@ -227,10 +260,14 @@ function RowExpansionCell({ rowId }: { rowId?: string | number }) {
  * TODO: How do these cells handle multiple thead rows, or col/row-spans?
  * TODO: a11y for labels
  */
-function RowSelectionCell({ rowId }: { rowId?: string | number }) {
-  const { selectionState, stickySelection, showLoadingSkeletons } =
-    useDataTableContext();
+function RowSelectionCell({ rowId }: { rowId?: TableRowEntryId }) {
+  const { selectionState, stickyStart, loading } = useDataTableContext();
+  const stickySelection = stickyStart.selection;
+  const stickySelectionOffset = stickyStart.selectionOffset;
   const { location } = useDataTableLocation();
+
+  const { tableItems } = useDataTableContext();
+
   const inputId = useId();
 
   const { selection, renderSelection } = selectionState;
@@ -239,21 +276,26 @@ function RowSelectionCell({ rowId }: { rowId?: string | number }) {
     return null;
   }
 
-  if (showLoadingSkeletons) {
+  if (loading?.isLoading && loading?.variant === "skeleton") {
     if (location === "thead") {
       return (
         <DataTableColumnHeader
-          width={SELECTION_CELL_WIDTH}
-          UNSAFE_isSelection
+          width={{ value: ACTION_CELL_CSS_WIDTH }}
+          cellType="action"
           label=""
           data-block-keyboard-nav
           isSticky={stickySelection && "start"}
+          style={stickySelection ? { left: stickySelectionOffset } : undefined}
         />
       );
     }
 
     return (
-      <DataTableBaseCell as="td">
+      <DataTableBaseCell
+        as="td"
+        isSticky={stickySelection && "start"}
+        style={stickySelection ? { left: stickySelectionOffset } : undefined}
+      >
         <Skeleton variant="text" />
       </DataTableBaseCell>
     );
@@ -271,10 +313,11 @@ function RowSelectionCell({ rowId }: { rowId?: string | number }) {
     return (
       <DataTableColumnHeader
         textAlign="center"
-        width={SELECTION_CELL_WIDTH}
-        UNSAFE_isSelection
+        width={{ value: ACTION_CELL_CSS_WIDTH }}
+        cellType="action"
         label=""
         isSticky={stickySelection && "start"}
+        style={stickySelection ? { left: stickySelectionOffset } : undefined}
       >
         <Label htmlFor={inputId} visuallyHidden>
           {labelText}
@@ -287,11 +330,12 @@ function RowSelectionCell({ rowId }: { rowId?: string | number }) {
   if (selection.selectionMode === "single" && location === "thead") {
     return (
       <DataTableColumnHeader
-        width={SELECTION_CELL_WIDTH}
-        UNSAFE_isSelection
+        width={{ value: ACTION_CELL_CSS_WIDTH }}
+        cellType="action"
         label=""
         data-block-keyboard-nav
         isSticky={stickySelection && "start"}
+        style={stickySelection ? { left: stickySelectionOffset } : undefined}
       />
     );
   }
@@ -302,16 +346,35 @@ function RowSelectionCell({ rowId }: { rowId?: string | number }) {
 
   if (selection.selectionMode === "multiple" && location === "tbody") {
     return (
-      <DataTableTd UNSAFE_isSelection isSticky={stickySelection && "start"}>
-        <CheckboxInput {...selection.getRowCheckboxProps(rowId)} compact />
+      <DataTableTd
+        cellType="action"
+        isSticky={stickySelection && "start"}
+        style={stickySelection ? { left: stickySelectionOffset } : undefined}
+      >
+        <CheckboxInput
+          {...selection.getRowCheckboxProps(
+            rowId,
+            tableItems.itemDetails.get(rowId)?.rowData,
+          )}
+          compact
+        />
       </DataTableTd>
     );
   }
 
   if (selection.selectionMode === "single" && location === "tbody") {
     return (
-      <DataTableTd UNSAFE_isSelection isSticky={stickySelection && "start"}>
-        <RadioInput {...selection.getRowRadioProps(rowId)} />
+      <DataTableTd
+        cellType="action"
+        isSticky={stickySelection && "start"}
+        style={stickySelection ? { left: stickySelectionOffset } : undefined}
+      >
+        <RadioInput
+          {...selection.getRowRadioProps(
+            rowId,
+            tableItems.itemDetails.get(rowId)?.rowData,
+          )}
+        />
       </DataTableTd>
     );
   }
@@ -326,5 +389,5 @@ function isInteractiveTarget(target: EventTarget | null): boolean {
   );
 }
 
-export { DataTableTr };
+export { DataTableTr, ACTION_CELL_WIDTH };
 export type { DataTableTrProps };

package/src/table/ColumnHeader.tsx

@@ -4,6 +4,7 @@ import {
   SortDownIcon,
   SortUpIcon,
 } from "@navikt/aksel-icons";
+import { consoleWarning } from "../utils/helpers/consoleWarning";
 import HeaderCell, { HeaderCellProps } from "./HeaderCell";
 import { TableContext } from "./context";
 
@@ -28,7 +29,7 @@ export const ColumnHeader: ColumnHeaderType = forwardRef(
     const context = useContext(TableContext);
 
     if (sortable && !sortKey) {
-      console.warn("ColumnHeader with `sortable=true` must have a sortKey.");
+      consoleWarning("ColumnHeader with `sortable=true` must have a sortKey.");
     }
 
     return (

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

@@ -1,22 +0,0 @@
-import React from "react";
-export interface DataDragAndDropDragHandlerProps {
-    /**
-     * Whether the drag handler is disabled
-     */
-    /**
-     * Wether dragging is done by keyboard. Used to conditionally render drag indicators.
-     */
-    keyboardDragging?: boolean;
-    /**
-     * Handle ref is forwarded to the button element serving as drag handle.
-     */
-    handleRef: React.Ref<HTMLDivElement>;
-    alt?: boolean;
-}
-/**
- * DataDragAndDropDragHandler
- *
- * 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 DataDragAndDropDragHandler: React.ForwardRefExoticComponent<DataDragAndDropDragHandlerProps & React.RefAttributes<HTMLButtonElement>>;

package/cjs/data/drag-and-drop-old/drag-handler/DataDragAndDropDragHandler.js

@@ -1,35 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DataDragAndDropDragHandler = void 0;
-const react_1 = __importDefault(require("react"));
-const aksel_icons_1 = require("@navikt/aksel-icons");
-const Floating_1 = require("../../../utils/components/floating/Floating");
-/**
- * DataDragAndDropDragHandler
- *
- * 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.DataDragAndDropDragHandler = react_1.default.forwardRef(({ keyboardDragging, handleRef, alt }) => {
-    if (alt) {
-        return (react_1.default.createElement("div", { className: "aksel-data-drag-and-drop__drag-handler__alt" },
-            keyboardDragging && (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("div", { ref: handleRef, className: "aksel-data-drag-and-drop__drag-handler__button" },
-                react_1.default.createElement(aksel_icons_1.DragVerticalIcon, { "aria-hidden": true, title: "Dra for \u00E5 flytte", fontSize: "1.5rem" })),
-            keyboardDragging && (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" })))));
-    }
-    return (react_1.default.createElement(Floating_1.Floating, null,
-        keyboardDragging && (react_1.default.createElement(Floating_1.Floating.Content, { side: "top", avoidCollisions: false, updatePositionStrategy: "always", className: "aksel-data-drag-and-drop__drag-handler__arrow" },
-            react_1.default.createElement(aksel_icons_1.CaretUpCircleFillIcon, { "aria-hidden": true, fontSize: "1.2rem" }))),
-        react_1.default.createElement(Floating_1.Floating.Anchor, { asChild: true },
-            react_1.default.createElement("div", { ref: handleRef, className: "aksel-data-drag-and-drop__drag-handler__button" },
-                react_1.default.createElement(aksel_icons_1.DragVerticalIcon, { "aria-hidden": true, title: "Dra for \u00E5 flytte", fontSize: "1.5rem" }))),
-        keyboardDragging && (react_1.default.createElement(Floating_1.Floating.Content, { avoidCollisions: false, updatePositionStrategy: "always", className: "aksel-data-drag-and-drop__drag-handler__arrow" },
-            react_1.default.createElement(aksel_icons_1.CaretDownCircleFillIcon, { "aria-hidden": true, fontSize: "1.2rem" })))));
-});
-//# sourceMappingURL=DataDragAndDropDragHandler.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"DataDragAndDropDragHandler.js","sourceRoot":"","sources":["../../../../src/data/drag-and-drop-old/drag-handler/DataDragAndDropDragHandler.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,qDAI6B;AAC7B,0EAAuE;AAmBvE;;;;;GAKG;AACU,QAAA,0BAA0B,GAAG,eAAK,CAAC,UAAU,CAGxD,CAAC,EAAE,gBAAgB,EAAE,SAAS,EAAE,GAAG,EAAE,EAAE,EAAE;IACzC,IAAI,GAAG,EAAE,CAAC;QACR,OAAO,CACL,uCAAK,SAAS,EAAC,6CAA6C;YACzD,gBAAgB,IAAI,CACnB,wCACE,SAAS,EAAC,+CAA+C,oBAC1C,IAAI;gBAEnB,8BAAC,mCAAqB,yBAAa,QAAQ,EAAC,QAAQ,GAAG,CAClD,CACR;YACD,uCACE,GAAG,EAAE,SAAS,EACd,SAAS,EAAC,gDAAgD;gBAE1D,8BAAC,8BAAgB,yBAEf,KAAK,EAAC,uBAAkB,EACxB,QAAQ,EAAC,QAAQ,GACjB,CACE;YACL,gBAAgB,IAAI,CACnB,wCACE,SAAS,EAAC,+CAA+C,oBAC1C,MAAM;gBAErB,8BAAC,qCAAuB,yBAAa,QAAQ,EAAC,QAAQ,GAAG,CACpD,CACR,CACG,CACP,CAAC;IACJ,CAAC;IAED,OAAO,CACL,8BAAC,mBAAQ;QACN,gBAAgB,IAAI,CACnB,8BAAC,mBAAQ,CAAC,OAAO,IACf,IAAI,EAAC,KAAK,EACV,eAAe,EAAE,KAAK,EACtB,sBAAsB,EAAC,QAAQ,EAC/B,SAAS,EAAC,+CAA+C;YAEzD,8BAAC,mCAAqB,yBAAa,QAAQ,EAAC,QAAQ,GAAG,CACtC,CACpB;QACD,8BAAC,mBAAQ,CAAC,MAAM,IAAC,OAAO;YACtB,uCACE,GAAG,EAAE,SAAS,EACd,SAAS,EAAC,gDAAgD;gBAE1D,8BAAC,8BAAgB,yBAEf,KAAK,EAAC,uBAAkB,EACxB,QAAQ,EAAC,QAAQ,GACjB,CACE,CACU;QACjB,gBAAgB,IAAI,CACnB,8BAAC,mBAAQ,CAAC,OAAO,IACf,eAAe,EAAE,KAAK,EACtB,sBAAsB,EAAC,QAAQ,EAC/B,SAAS,EAAC,+CAA+C;YAEzD,8BAAC,qCAAuB,yBAAa,QAAQ,EAAC,QAAQ,GAAG,CACxC,CACpB,CACQ,CACZ,CAAC;AACJ,CAAC,CAAC,CAAC"}

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

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

package/cjs/data/drag-and-drop-old/item/DataDragAndDropItem.js

@@ -1,86 +0,0 @@
-"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.DataDragAndDropItem = void 0;
-const sortable_1 = require("@dnd-kit/react/sortable");
-const react_1 = __importStar(require("react"));
-const stack_1 = require("../../../primitives/stack");
-const helpers_1 = require("../../../utils/helpers");
-const hooks_1 = require("../../../utils/hooks");
-const DataDragAndDropDragHandler_1 = require("../drag-handler/DataDragAndDropDragHandler");
-const DataDragAndDrop_context_1 = require("../root/DataDragAndDrop.context");
-/**
- * TODO
- *
- * @see 🏷️ {@link DataDragAndDropItemProps}
- * @example
- * ```tsx
- * <DragAndDrop.Item numOfSelectedRows={selectedRows.length} onClear={handleClear}>
- *   TODO
- * </DragAndDrop.Item>
- * ```
- */
-const DataDragAndDropItem = react_1.default.forwardRef((_a, forwardedRef) => {
-    var { children, id, index, className } = _a, rest = __rest(_a, ["children", "id", "index", "className"]);
-    const handleRef = (0, react_1.useRef)(null);
-    const { ref, isDragging, isDropTarget } = (0, sortable_1.useSortable)({
-        id,
-        index,
-        handle: handleRef,
-    });
-    const mergedRef = (0, hooks_1.useMergeRefs)(ref, forwardedRef);
-    const context = react_1.default.useContext(DataDragAndDrop_context_1.DataDragAndDropContext);
-    const mouseDragging = isDragging && (context === null || context === void 0 ? void 0 : context.inputMethod) === "mouse";
-    const mouseDropTarget = isDropTarget && (context === null || context === void 0 ? void 0 : context.inputMethod) === "mouse";
-    const keyboardDragging = isDragging && (context === null || context === void 0 ? void 0 : context.inputMethod) === "keyboard";
-    return (react_1.default.createElement(stack_1.HStack, { gap: "space-8", align: "center", wrap: false, asChild: true },
-        react_1.default.createElement("div", Object.assign({ ref: mergedRef }, rest, { className: (0, helpers_1.cl)("aksel-data-table__drag-and-drop-item", className), "data-dragging": isDragging, "data-mouse-dragging": mouseDragging, "data-keyboard-dragging": keyboardDragging, "data-drop-target": mouseDropTarget, tabIndex: -1 }),
-            react_1.default.createElement(DataDragAndDropDragHandler_1.DataDragAndDropDragHandler, { handleRef: handleRef, keyboardDragging: keyboardDragging, alt: true }),
-            react_1.default.createElement("div", null, children))));
-});
-exports.DataDragAndDropItem = DataDragAndDropItem;
-exports.default = DataDragAndDropItem;
-//# sourceMappingURL=DataDragAndDropItem.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"DataDragAndDropItem.js","sourceRoot":"","sources":["../../../../src/data/drag-and-drop-old/item/DataDragAndDropItem.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,sDAAsD;AACtD,+CAAsC;AACtC,qDAAmD;AACnD,oDAA4C;AAC5C,gDAAoD;AACpD,2FAAwF;AACxF,6EAAyE;AAczE;;;;;;;;;;GAUG;AACH,MAAM,mBAAmB,GAAG,eAAK,CAAC,UAAU,CAG1C,CAAC,EAA2C,EAAE,YAAY,EAAE,EAAE;QAA7D,EAAE,QAAQ,EAAE,EAAE,EAAE,KAAK,EAAE,SAAS,OAAW,EAAN,IAAI,cAAzC,wCAA2C,CAAF;IAC1C,MAAM,SAAS,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IAC/C,MAAM,EAAE,GAAG,EAAE,UAAU,EAAE,YAAY,EAAE,GAAG,IAAA,sBAAW,EAAC;QACpD,EAAE;QACF,KAAK;QACL,MAAM,EAAE,SAAS;KAClB,CAAC,CAAC;IACH,MAAM,SAAS,GAAG,IAAA,oBAAY,EAAC,GAAG,EAAE,YAAY,CAAC,CAAC;IAClD,MAAM,OAAO,GAAG,eAAK,CAAC,UAAU,CAAC,gDAAsB,CAAC,CAAC;IACzD,MAAM,aAAa,GAAG,UAAU,IAAI,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,WAAW,MAAK,OAAO,CAAC;IACrE,MAAM,eAAe,GAAG,YAAY,IAAI,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,WAAW,MAAK,OAAO,CAAC;IACzE,MAAM,gBAAgB,GAAG,UAAU,IAAI,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,WAAW,MAAK,UAAU,CAAC;IAE3E,OAAO,CACL,8BAAC,cAAM,IAAC,GAAG,EAAC,SAAS,EAAC,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAE,KAAK,EAAE,OAAO;QAEvD,qDACE,GAAG,EAAE,SAAS,IACV,IAAI,IACR,SAAS,EAAE,IAAA,YAAE,EAAC,sCAAsC,EAAE,SAAS,CAAC,mBACjD,UAAU,yBACJ,aAAa,4BACV,gBAAgB,sBACtB,eAAe,EACjC,QAAQ,EAAE,CAAC,CAAC;YAEZ,8BAAC,uDAA0B,IACzB,SAAS,EAAE,SAAS,EACpB,gBAAgB,EAAE,gBAAgB,EAClC,GAAG,SACH;YACF,2CAAM,QAAQ,CAAO,CACjB,CACC,CACV,CAAC;AACJ,CAAC,CAAC,CAAC;AAGM,kDAAmB;AAD5B,kBAAe,mBAAmB,CAAC"}

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

@@ -1,5 +0,0 @@
-interface DataDragAndDropContextType {
-    inputMethod: "mouse" | "keyboard" | null;
-}
-export declare const DataDragAndDropContext: import("react").Context<DataDragAndDropContextType | undefined>;
-export {};

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

@@ -1,6 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DataDragAndDropContext = void 0;
-const react_1 = require("react");
-exports.DataDragAndDropContext = (0, react_1.createContext)(undefined);
-//# sourceMappingURL=DataDragAndDrop.context.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"DataDragAndDrop.context.js","sourceRoot":"","sources":["../../../../src/data/drag-and-drop-old/root/DataDragAndDrop.context.tsx"],"names":[],"mappings":";;;AAAA,iCAAsC;AAQzB,QAAA,sBAAsB,GAAG,IAAA,qBAAa,EAEjD,SAAS,CAAC,CAAC"}

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

@@ -1,24 +0,0 @@
-import React from "react";
-import DataDragAndDropItem, { DataDragAndDropItemProps } from "../item/DataDragAndDropItem";
-interface DataDragAndDropProps extends React.HTMLAttributes<HTMLDivElement> {
-    children: any[];
-    setItems: React.Dispatch<React.SetStateAction<any[]>>;
-}
-interface DataDragAndDropRootComponent extends React.ForwardRefExoticComponent<DataDragAndDropProps & React.RefAttributes<HTMLDivElement>> {
-    /**
-     * @see 🏷️ {@link DataDragAndDropItemProps}
-     * * @example
-     * ```jsx
-     * <DragAndDrop>
-     *   <DragAndDrop.Item id="1" index={0}>
-     *     ...
-     *   </DragAndDrop.Item>
-     * </DragAndDrop>
-     * ```
-     */
-    Item: typeof DataDragAndDropItem;
-}
-declare const DataDragAndDrop: DataDragAndDropRootComponent;
-export { DataDragAndDrop, DataDragAndDropItem };
-export default DataDragAndDrop;
-export type { DataDragAndDropItemProps, DataDragAndDropProps };