@navikt/ds-react 8.10.3 → 8.10.5

package/src/data/table/root/agent-feature-gap.md

@@ -0,0 +1,96 @@
+### Component: DataTable
+
+**Primitive type:** Data table with optional selection, sorting, nested rows, details panels, sticky columns, column resizing, and keyboard cell navigation.
+**Reference libraries:** React Aria Table / Adobe Spectrum TableView, MUI Data Grid, Base UI table patterns. Cloudscape Table is a useful secondary reference for resize/details behavior.
+
+### Launch Review Findings
+
+1. **The auto API has no visible caption slot or caption prop.**
+   Consumers can still pass `aria-label`/`aria-labelledby` through native table props, but `children?: never` means the preview API cannot render a native `caption` or a built-in visible summary/title. Mature table APIs usually provide at least one clear accessible naming path.
+
+2. **Column resizing is present, but the preview API still reads as unfinished.**
+   Resizing is effectively opt-out in fixed layout because `DataTableColumnHeader` defaults `resizable` to `true`. The interaction also still has unfinished accessibility and i18n details, and `onWidthChange` currently fires for every width step while dragging.
+
+3. **Critical behaviors are under-tested for a preview launch.**
+   Existing tests cover selection trees, item expansion state, and low-level keyboard helpers, but not the end-to-end behaviors users will notice first: sorting, details panels, loading states, row click behavior, column resizing, and selection accessibility.
+
+### Feature Gap Table
+
+| #   | Feature                                             | Status     | Priority        | Reference                    | Notes                                                                   |
+| --- | --------------------------------------------------- | ---------- | --------------- | ---------------------------- | ----------------------------------------------------------------------- |
+| 1   | Arrow/Home/End keyboard cell navigation             | ✅ Present | —               | React Aria, MUI              | Good base coverage in helper tests.                                     |
+| 2   | Controlled/uncontrolled sorting                     | ✅ Present | —               | React Aria, MUI              | Supports controlled and uncontrolled sort arrays.                       |
+| 3   | Multi-column sorting                                | ✅ Present | —               | MUI, Spectrum                | Shift-click is supported.                                               |
+| 4   | Controlled/uncontrolled row selection               | ✅ Present | —               | React Aria, MUI              | Single and multiple selection both exist.                               |
+| 5   | Controlled/uncontrolled nested row expansion        | ✅ Present | —               | MUI, Spectrum                | `subRows` API is already solid for preview.                             |
+| 6   | Controlled/uncontrolled details panel expansion     | ✅ Present | —               | MUI                          | Good baseline, limited to top-level rows by design.                     |
+| 7   | Loading overlay / loading rows / empty state        | ✅ Present | —               | MUI, Spectrum                | Baseline states exist.                                                  |
+| 9   | Visible caption / built-in accessible naming path   | ❌ Missing | 🔴 Expected     | React Aria, Spectrum         | Auto API cannot render `caption`; users only get raw HTML attrs.        |
+| 13  | Opt-in / polished column resize API                 | ⚠️ Partial | 🟡 Valuable     | MUI, Cloudscape              | Feature exists, but defaults and a11y polish are not preview-ready yet. |
+| 14  | Per-row disabled selection callback                 | ❌ Missing | 🟡 Valuable     | React Aria, MUI              | Current API only accepts disabled keys, not row-driven logic.           |
+| 15  | Row-level prop/className callback                   | ❌ Missing | 🟡 Valuable     | MUI                          | No way to attach row-specific attrs/classes without custom rendering.   |
+| 16  | Header-group / multi-row header support in auto API | ❌ Missing | 🟢 Nice-to-have | React Aria, MUI              | Current auto API is intentionally flat.                                 |
+| 17  | Accessor shorthand for simple columns               | ❌ Missing | 🟢 Nice-to-have | MUI, TanStack-style patterns | Would reduce boilerplate for simple data tables.                        |
+| 18  | Typeahead row navigation                            | ❌ Missing | 🟢 Nice-to-have | React Aria                   | Useful on large data sets, not necessary for first preview.             |
+| 19  | RTL-aware sticky/nesting layout                     | ❌ Missing | 🟢 Nice-to-have | React Aria, MUI              | Current sticky/nesting CSS is mostly physical, not logical.             |
+
+### Implementation Notes
+
+#### 9. Visible caption / built-in accessible naming path
+
+- **What it does:** Lets consumers provide a native table caption or a clearly supported naming API without dropping to raw HTML attributes.
+- **Reference behavior:** React Aria tables require an accessible label; Spectrum and MUI also expose a clear naming path.
+- **Approach here:** Keep `children` forbidden, but add a `caption?: React.ReactNode` prop that renders a native `caption`. Optionally add `captionProps` for styling hooks.
+- **Props/API additions needed:** `caption?: React.ReactNode`, optionally `captionProps?: React.HTMLAttributes<HTMLTableCaptionElement>`.
+
+#### 13. Opt-in / polished column resize API
+
+- **What it does:** Makes resize behavior predictable and avoids surprising every preview consumer with advanced header affordances.
+- **Reference behavior:** MUI and Cloudscape treat column resize as an explicit feature and spend a lot of API surface on labels, limits, and commit behavior.
+- **Approach here:** Default `resizable` to `false`, add missing slider aria metadata, and only call `onWidthChange` on commit or with a small debounce. Also move hard-coded Norwegian labels into the same i18n pattern as the rest of the component.
+- **Props/API additions needed:** No new public props required for a first pass. The main change is default behavior and polish.
+
+#### 14. Per-row disabled selection callback
+
+- **What it does:** Lets consumers disable selection from row data instead of precomputing key arrays.
+- **Reference behavior:** Many mature table APIs allow row-driven selection rules.
+- **Approach here:** Resolve disabled state during row collection so selection helpers can still work with ids internally.
+- **Props/API additions needed:** `isRowSelectionDisabled?: (rowData: T) => boolean`.
+
+#### 15. Row-level prop/className callback
+
+- **What it does:** Lets consumers add row-specific classes, test hooks, aria hooks, and state styling without replacing the table implementation.
+- **Reference behavior:** MUI exposes row-class callbacks and row metadata hooks.
+- **Approach here:** Apply callbacks when rendering `DataTableTr` so the row id and row data are both available.
+- **Props/API additions needed:** `getRowProps?: (rowData: T, rowId: string | number) => React.HTMLAttributes<HTMLTableRowElement>` or a narrower `getRowClassName` if you want to keep the API tighter.
+
+### Internal Refactors
+
+1. Split the current root into a small orchestration hook plus presentational sub-components. `DataTableRoot.tsx` currently owns state setup, context assembly, loading/empty rendering, row rendering, and sticky-wrapper logic in one file.
+
+2. Replace object-keyed `itemDetails` lookups with id-keyed row entries. This fixes the duplicate-object bug and simplifies details-panel and selection wiring.
+
+3. Unify loading-state presence checks. `DataTableTBodyContent` uses nullish checks for `loadingState`, while `showLoadingOverlay` in the root uses truthiness checks; those should match.
+
+4. Make localization an explicit seam. The component currently hard-codes visible and aria labels such as sort-resize instructions, expand/collapse labels, and selection labels directly in render code.
+
+5. Revisit the resize default and commit path before large-table performance work. Continuous `onWidthChange` callbacks can easily push rerenders through the whole table if consumers control widths externally.
+
+6. Decide whether the preview API is a plain table or the start of a data-grid abstraction. A few current seams, especially keyboard navigation and selection, are already grid-like, while captioning and row-header semantics still assume a plain table model.
+
+### Test Gaps Before Preview
+
+1. Sorting interaction story/test covering click, keyboard activation, and multi-sort.
+2. Details-panel story/test covering expand, collapse, `aria-controls`, and controlled mode.
+3. Loading/empty-state tests covering overlay vs skeleton vs custom loading content.
+4. Row-click tests covering selection interaction, text-selection guard, and interactive-content guard.
+5. Resize tests covering keyboard resize, pointer resize, and form embedding.
+6. Accessibility test coverage for selection labels and row-header semantics once those are implemented.
+
+### Suggested Order For Follow-up Work
+
+1. Fix selection labeling and row-header semantics together.
+2. Add a built-in caption/naming API.
+3. Harden resize defaults and button semantics.
+4. Refactor row metadata to be id-based.
+5. Fill the missing user-facing stories/tests around sort, details, loading, and row click.

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

@@ -0,0 +1,39 @@
+import React from "react";
+import { ChevronDownIcon, ChevronRightIcon } from "@navikt/aksel-icons";
+import { Button } from "../../../button";
+import { type ItemDetail, useTableItemsContext } from "../hooks/useTableItems";
+
+function DataTableSubRowToggle({ details }: { details: ItemDetail<any> }) {
+  const { isSubRowExpanded, onExpandedRowIdsChange } = useTableItemsContext();
+
+  const subRows = details.children;
+  const hasSubRows = subRows && subRows.length > 0;
+  const isRowExpanded = isSubRowExpanded(details.id);
+
+  return (
+    <div className="aksel-data-table__nested-toggle">
+      {hasSubRows && (
+        <Button
+          variant="tertiary"
+          data-color="neutral"
+          size="small"
+          onClick={(e) => {
+            e.stopPropagation();
+            onExpandedRowIdsChange(details.id);
+          }}
+          aria-expanded={isRowExpanded}
+          aria-label={isRowExpanded ? "Skjul under-rader" : "Vis under-rader"}
+          icon={
+            isRowExpanded ? (
+              <ChevronDownIcon aria-hidden />
+            ) : (
+              <ChevronRightIcon aria-hidden />
+            )
+          }
+        />
+      )}
+    </div>
+  );
+}
+
+export { DataTableSubRowToggle };

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

@@ -15,9 +15,9 @@ import { cl, composeEventHandlers } from "../../../utils/helpers";
 import { DataTableBaseCell } from "../base-cell/DataTableBaseCell";
 import { DataTableColumnHeader } from "../column-header/DataTableColumnHeader";
 import {
-  getDataTableExpansionId,
-  useDataTableExpansion,
-} from "../hooks/useTableExpansion";
+  getDataTableDetailsPanelId,
+  useDataTableDetailsPanel,
+} from "../hooks/useTableDetailsPanel";
 import {
   useDataTableContext,
   useDataTableLocation,
@@ -46,13 +46,8 @@ const DataTableTr = forwardRef<HTMLTableRowElement, DataTableTrProps>(
     },
     forwardedRef,
   ) => {
-    const {
-      layout,
-      stickyHeader,
-      selectionState,
-      onRowClick,
-      disableRowSelectionOnClick,
-    } = useDataTableContext();
+    const { layout, stickyHeader, selectionState, onRowClick } =
+      useDataTableContext();
     const { location } = useDataTableLocation();
 
     const renderFillerCell = layout === "fixed" && children;
@@ -81,7 +76,7 @@ const DataTableTr = forwardRef<HTMLTableRowElement, DataTableTrProps>(
             }
 
             if (
-              !disableRowSelectionOnClick &&
+              !selectionState.disableRowSelectionOnClick &&
               selectionState.selection.selectionMode !== "none"
             ) {
               selectionState.selection.toggleSelection(rowId);
@@ -130,7 +125,7 @@ function RowExpansionCell({ rowId }: { rowId?: string | number }) {
     isAllExpanded,
     toggleAll,
     showExpandAll,
-  } = useDataTableExpansion();
+  } = useDataTableDetailsPanel();
 
   if (!enableDetailsPanel) {
     return null;
@@ -143,6 +138,7 @@ function RowExpansionCell({ rowId }: { rowId?: string | number }) {
           width={SELECTION_CELL_WIDTH}
           UNSAFE_isSelection
           data-block-keyboard-nav
+          label=""
           /* isSticky={stickySelection && "start"} */
         />
       );
@@ -160,6 +156,7 @@ function RowExpansionCell({ rowId }: { rowId?: string | number }) {
         width={SELECTION_CELL_WIDTH}
         UNSAFE_isSelection
         data-block-keyboard-nav
+        label=""
         /* isSticky={stickySelection && "start"} */
       />
     );
@@ -171,6 +168,7 @@ function RowExpansionCell({ rowId }: { rowId?: string | number }) {
         textAlign="center"
         width={SELECTION_CELL_WIDTH}
         UNSAFE_isSelection
+        label=""
         /* isSticky={stickySelection && "start"} */
       >
         <Button
@@ -198,7 +196,7 @@ function RowExpansionCell({ rowId }: { rowId?: string | number }) {
 
   const isRowExpanded = isExpanded(rowId);
   const canExpandRow = isDetailsPanelExpandable(rowId);
-  const expansionId = getDataTableExpansionId(tableId, rowId);
+  const expansionId = getDataTableDetailsPanelId(tableId, rowId);
 
   if (!canExpandRow) {
     return <DataTableTd UNSAFE_isSelection preventRowClick />;
@@ -247,6 +245,7 @@ function RowSelectionCell({ rowId }: { rowId?: string | number }) {
         <DataTableColumnHeader
           width={SELECTION_CELL_WIDTH}
           UNSAFE_isSelection
+          label=""
           data-block-keyboard-nav
           isSticky={stickySelection && "start"}
         />
@@ -274,6 +273,7 @@ function RowSelectionCell({ rowId }: { rowId?: string | number }) {
         textAlign="center"
         width={SELECTION_CELL_WIDTH}
         UNSAFE_isSelection
+        label=""
         isSticky={stickySelection && "start"}
       >
         <Label htmlFor={inputId} visuallyHidden>
@@ -289,6 +289,7 @@ function RowSelectionCell({ rowId }: { rowId?: string | number }) {
       <DataTableColumnHeader
         width={SELECTION_CELL_WIDTH}
         UNSAFE_isSelection
+        label=""
         data-block-keyboard-nav
         isSticky={stickySelection && "start"}
       />

package/src/utils/components/dismissablelayer/DismissableLayer.tsx

@@ -342,7 +342,7 @@ const DismissableLayer = forwardRef<HTMLDivElement, DismissableLayerProps>(
       if (disableOutsidePointerEvents) {
         if (context.layersWithOutsidePointerEventsDisabled.size === 0) {
           originalBodyPointerEvents = ownerDoc.body.style.pointerEvents;
-          ownerDoc.body.style.pointerEvents = "none"; // eslint-disable-line react-hooks/immutability
+          ownerDoc.body.style.pointerEvents = "none";
         }
         context.layersWithOutsidePointerEventsDisabled.add(node);
       }

package/src/utils/components/floating/Floating.tsx

@@ -36,6 +36,22 @@ import {
   transformOrigin,
 } from "./Floating.utils";
 
+/**
+ * Used for menus that prefer top/bottom placements and
+ * use height-var to limit their height.
+ */
+const MENU_COLLISION_AVOIDANCE = {
+  fallbackAxisSide: "none",
+} as const;
+
+/**
+ * Used by regular popovers that usually aren't scrollable and are allowed to
+ * freely flip to any axis of placement.
+ */
+const POPOVER_COLLISION_AVOIDANCE = {
+  fallbackAxisSide: "end",
+} as const;
+
 /**
  * Floating Root
  */
@@ -189,6 +205,7 @@ interface FloatingContentProps extends HTMLAttributes<HTMLDivElement> {
   hideWhenDetached?: boolean;
   updatePositionStrategy?: "optimized" | "always";
   fallbackPlacements?: FlipOptions["fallbackPlacements"];
+  fallbackAxisSideDirection?: FlipOptions["fallbackAxisSideDirection"];
   onPlaced?: () => void;
   /**
    * @default true
@@ -225,6 +242,7 @@ const FloatingContent = forwardRef<HTMLDivElement, FloatingContentProps>(
       fallbackPlacements,
       enabled = true,
       autoUpdateWhileMounted = true,
+      fallbackAxisSideDirection = POPOVER_COLLISION_AVOIDANCE.fallbackAxisSide,
       ...contentProps
     }: FloatingContentProps,
     forwardedRef,
@@ -245,10 +263,31 @@ const FloatingContent = forwardRef<HTMLDivElement, FloatingContentProps>(
     const desiredPlacement = (side +
       (align !== "center" ? "-" + align : "")) as Placement;
 
+    /**
+     * Create a bias to the preferred side.
+     * On iOS, when the mobile software keyboard opens, the input is exactly centered
+     * in the viewport, but this can cause it to flip to the top undesirably.
+     */
+    const bias = 1;
+    const biasTop = side === "bottom" ? bias : 0;
+    const biasBottom = side === "top" ? bias : 0;
+    const biasLeft = side === "right" ? bias : 0;
+    const biasRight = side === "left" ? bias : 0;
+
     const collisionPadding =
       typeof collisionPaddingProp === "number"
-        ? collisionPaddingProp
-        : { top: 0, right: 0, bottom: 0, left: 0, ...collisionPaddingProp };
+        ? {
+            top: collisionPaddingProp + biasTop,
+            right: collisionPaddingProp + biasRight,
+            bottom: collisionPaddingProp + biasBottom,
+            left: collisionPaddingProp + biasLeft,
+          }
+        : {
+            top: (collisionPaddingProp.top || 0) + biasTop,
+            right: (collisionPaddingProp.right || 0) + biasRight,
+            bottom: (collisionPaddingProp.bottom || 0) + biasBottom,
+            left: (collisionPaddingProp.left || 0) + biasLeft,
+          };
 
     const boundary = Array.isArray(collisionBoundary)
       ? collisionBoundary
@@ -256,20 +295,13 @@ const FloatingContent = forwardRef<HTMLDivElement, FloatingContentProps>(
 
     const hasExplicitBoundaries = boundary.length > 0;
 
-    /**
-     * .filter(x => x !== null) does not narrow the type of the array enough.
-     */
-    function isNotNull<T>(value: T | null): value is T {
-      return value !== null;
-    }
-
+    /* https://floating-ui.com/docs/detectOverflow#boundary */
     const detectOverflowOptions: FlipOptions = {
       padding: collisionPadding,
       boundary: boundary.filter(isNotNull),
       // with `strategy: 'fixed'`, this is the only way to get it to respect boundaries
       altBoundary: hasExplicitBoundaries,
-      /* https://floating-ui.com/docs/flip#fallbackaxissidedirection */
-      fallbackAxisSideDirection: "end",
+      fallbackAxisSideDirection,
       fallbackPlacements,
     };
 
@@ -308,7 +340,11 @@ const FloatingContent = forwardRef<HTMLDivElement, FloatingContentProps>(
             crossAxis: false,
             limiter: limitShift(),
           }),
-        avoidCollisions && flip({ ...detectOverflowOptions }),
+        avoidCollisions &&
+          flip({
+            ...detectOverflowOptions,
+            padding: collisionPadding,
+          }),
         size({
           ...detectOverflowOptions,
           apply: ({ elements, rects, availableWidth, availableHeight }) => {
@@ -437,7 +473,14 @@ const FloatingContent = forwardRef<HTMLDivElement, FloatingContentProps>(
   },
 );
 
+/**
+ * .filter(x => x !== null) does not narrow the type of the array enough.
+ */
+function isNotNull<T>(value: T | null): value is T {
+  return value !== null;
+}
+
 Floating.Anchor = FloatingAnchor;
 Floating.Content = FloatingContent;
 
-export { Floating };
+export { Floating, MENU_COLLISION_AVOIDANCE, POPOVER_COLLISION_AVOIDANCE };

package/src/utils/components/floating-menu/Menu.tsx

@@ -9,7 +9,7 @@ import {
   useMergeRefs,
 } from "../../hooks";
 import { DismissableLayer } from "../dismissablelayer/DismissableLayer";
-import { Floating } from "../floating/Floating";
+import { Floating, MENU_COLLISION_AVOIDANCE } from "../floating/Floating";
 import { FocusBoundary } from "../focus-boundary/FocusBoundary";
 import { RovingFocus, RovingFocusProps } from "./parts/RovingFocus";
 import {
@@ -328,6 +328,9 @@ const MenuContentInternal = forwardRef<
               data-state={getOpenState(context.open)}
               data-aksel-menu-content=""
               dir="ltr"
+              fallbackAxisSideDirection={
+                MENU_COLLISION_AVOIDANCE.fallbackAxisSide
+              }
               {...rest}
               ref={composedRefs}
               style={{ outline: "none", ...rest.style }}

package/src/utils/helpers/create-strict-context.tsx

@@ -65,7 +65,7 @@ function createStrictContext<T>(options: {
 
   function Provider({ children, ...context }: ProviderProps<T>) {
     // biome-ignore lint/correctness/useExhaustiveDependencies: Object.values(context) includes all dependencies.
-    const value = React.useMemo(() => context, Object.values(context)) as T; // eslint-disable-line react-hooks/exhaustive-deps, react-hooks/use-memo
+    const value = React.useMemo(() => context, Object.values(context)) as T; // eslint-disable-line react-hooks/exhaustive-deps
 
     return <Context.Provider value={value}>{children}</Context.Provider>;
   }

package/src/utils/hooks/useControllableState.ts

@@ -2,28 +2,31 @@
 import { useState } from "react";
 import { useEventCallback } from "./useEventCallback";
 
-export interface UseControllableStateProps<T> {
-  value?: T;
-  defaultValue: T | (() => T);
-  onChange?: (value: T) => void;
+export interface UseControllableStateProps<
+  StateT,
+  ChangeT extends StateT = StateT,
+> {
+  value?: StateT;
+  defaultValue: StateT | (() => StateT);
+  onChange?: (value: ChangeT) => void;
 }
 
 /**
  * `useControllableState` returns the state and function that updates the state, just like React.useState does.
  */
-export function useControllableState<T>({
+export function useControllableState<StateT, ChangeT extends StateT = StateT>({
   value: valueProp,
   defaultValue,
   onChange,
-}: UseControllableStateProps<T>) {
+}: UseControllableStateProps<StateT, ChangeT>) {
   const onChangeProp = useEventCallback(onChange);
 
   const [uncontrolledState, setUncontrolledState] = useState(defaultValue);
   const controlled = valueProp !== undefined;
   const value = controlled ? valueProp : uncontrolledState;
 
-  const setValue = useEventCallback((next: React.SetStateAction<T>) => {
-    const setter = next as (prevState?: T) => T;
+  const setValue = useEventCallback((next: React.SetStateAction<ChangeT>) => {
+    const setter = next as (prevState?: StateT) => ChangeT;
     const nextValue = typeof next === "function" ? setter(value) : next;
 
     if (!controlled) {

package/src/utils/hooks/useValueAsRef.ts

@@ -6,7 +6,7 @@ import { useRefWithInit } from "./useRefWithInit";
 function useValueAsRef<T>(value: T) {
   const latest = useRefWithInit(createLatestRef, value).current!;
 
-  latest.next = value;
+  latest.next = value; // eslint-disable-line react-hooks/immutability
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
   useClientLayoutEffect(latest.effect);

package/src/utils-external/hooks/useId.ts

@@ -19,7 +19,7 @@ function useGlobalId(idOverride?: string): string | undefined {
       // We can't use it server-side.
       // If you want to use random values please consider the Birthday Problem: https://en.wikipedia.org/wiki/Birthday_problem
       globalId += 1;
-      setDefaultId(`aksel-id-${globalId}`);
+      setDefaultId(`aksel-id-${globalId}`); // eslint-disable-line react-hooks/set-state-in-effect
     }
   }, [defaultId]);
   return id;

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.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 };

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

@@ -1 +0,0 @@
-{"version":3,"file":"DataDragAndDropRoot.js","sourceRoot":"","sources":["../../../../src/data/drag-and-drop-old/root/DataDragAndDropRoot.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,0CAA+D;AAC/D,sDAAqD;AACrD,+CAA0D;AAC1D,qDAAmD;AACnD,sFAEqC;AAuFX,8BAzFnB,6BAAmB,CAyFmB;AAtF7C,uEAAmE;AAwBnE,MAAM,eAAe,GAAG,IAAA,kBAAU,EAChC,CAAC,EAA+B,EAAE,YAAY,EAAE,EAAE;QAAjD,EAAE,QAAQ,EAAE,QAAQ,OAAW,EAAN,IAAI,cAA7B,wBAA+B,CAAF;IAC5B,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,eAAK,CAAC,QAAQ,CAElD,IAAI,CAAC,CAAC;IAER,MAAM,YAAY,GAAG,CAAC,WAAmB,EAAE,WAAmB,EAAE,EAAE;QAChE,QAAQ,CAAC,CAAC,KAAK,EAAE,EAAE;YACjB,MAAM,QAAQ,GAAG,CAAC,GAAG,KAAK,CAAC,CAAC;YAC5B,MAAM,CAAC,SAAS,CAAC,GAAG,QAAQ,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC;YACpD,QAAQ,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC,EAAE,SAAS,CAAC,CAAC;YAC3C,OAAO,QAAQ,CAAC;QAClB,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,OAAO,CACL,8BAAC,gDAAsB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,WAAW,EAAE;QACrD,8BAAC,wBAAgB;QACf,2EAA2E;;YAA3E,2EAA2E;YAC3E,iBAAiB,EAAE,CAAC,KAAK,EAAE,EAAE;;gBAC3B,OAAA,cAAc,CACZ,CAAA,MAAA,KAAK,CAAC,SAAS,CAAC,cAAc,0CAAE,IAAI,MAAK,aAAa;oBACpD,CAAC,CAAC,OAAO;oBACT,CAAC,CAAC,UAAU,CACf,CAAA;aAAA,EAEH,UAAU,EAAE,CAAC,KAAK,EAAE,EAAE;;gBACpB,IAAI,CAAA,MAAA,KAAK,CAAC,SAAS,CAAC,cAAc,0CAAE,IAAI,MAAK,aAAa,EAAE,CAAC;oBAC3D,0GAA0G;oBAC1G,KAAK,CAAC,cAAc,EAAE,CAAC;gBACzB,CAAC;YACH,CAAC,EACD,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE;gBACnB,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC,SAAS,CAAC;gBAC3C,IAAI,CAAC,IAAA,qBAAU,EAAC,MAAM,CAAC,IAAI,CAAC,IAAA,qBAAU,EAAC,MAAM,CAAC;oBAAE,OAAO;gBACvD,YAAY,CAAC,MAAM,CAAC,YAAY,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC;YAClD,CAAC;YAED,8BAAC,cAAM,IAAC,OAAO,QAAC,GAAG,EAAC,UAAU;gBAC5B,uDAAS,IAAI,IAAE,GAAG,EAAE,YAAY,KAC7B,QAAQ,CACL,CACC;YACT,8BAAC,mBAAW,IAAC,aAAa,EAAE,IAAI,IAC7B,CAAC,MAAM,EAAE,EAAE;gBACV,8DAA8D;gBAC9D,IAAI,WAAW,KAAK,UAAU;oBAAE,OAAO,IAAI,CAAC;gBAC5C,IAAI,CAAC,IAAA,qBAAU,EAAC,MAAM,CAAC;oBAAE,OAAO,IAAI,CAAC;gBACrC,IAAI,IAAA,sBAAc,EAAC,QAAQ,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,EAAE,CAAC;oBAClD,OAAO,QAAQ,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC;gBACvC,CAAC;gBACD,OAAO,IAAI,CAAC;YACd,CAAC,CACW,CACG,CACa,CACnC,CAAC;AACJ,CAAC,CAC8B,CAAC;AAIzB,0CAAe;AAFxB,eAAe,CAAC,IAAI,GAAG,6BAAmB,CAAC;AAG3C,kBAAe,eAAe,CAAC"}

package/cjs/data/table/hooks/useTableExpansion.d.ts

@@ -1,27 +0,0 @@
-import React from "react";
-type DataTableExpansionContextT = {
-    isExpanded: (id: string | number) => boolean;
-    isDetailsPanelExpandable: (id: string | number) => boolean;
-    toggleExpansion: (id: string | number) => void;
-    toggleAll: () => void;
-    isAllExpanded: boolean;
-    getDetailsPanelContent?: (row: unknown) => React.ReactNode;
-    getDetailsPanelHeight?: (row: unknown) => number | "auto";
-    showExpandAll: boolean;
-    enableDetailsPanel: boolean;
-};
-declare const useDataTableExpansion: <S extends boolean = true>(strict?: S | undefined) => S extends true ? DataTableExpansionContextT : DataTableExpansionContextT | undefined;
-type TableExpansionOptions<T> = {
-    detailsPanelRowIds?: (string | number)[];
-    defaultDetailsPanelRowIds?: (string | number)[];
-    onDetailsPanelChange?: (ids: (string | number)[]) => void;
-    getDetailsPanelContent?: (row: T) => React.ReactNode;
-    isDetailsPanelExpandable?: (rowData: T) => boolean;
-    getDetailsPanelHeight?: (row: T) => number | "auto";
-    showExpandAll?: boolean;
-};
-declare function getDataTableExpansionId(tableId: string, rowId: string | number): string;
-declare function DataTableExpansionProvider<T>({ children, detailsPanelRowIds, defaultDetailsPanelRowIds, onDetailsPanelChange, getDetailsPanelContent, isDetailsPanelExpandable, getDetailsPanelHeight, showExpandAll, }: TableExpansionOptions<T> & {
-    children: React.ReactNode;
-}): React.JSX.Element;
-export { DataTableExpansionProvider, getDataTableExpansionId, useDataTableExpansion, };

package/cjs/data/table/hooks/useTableExpansion.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useTableExpansion.js","sourceRoot":"","sources":["../../../../src/data/table/hooks/useTableExpansion.tsx"],"names":[],"mappings":"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"}