@navikt/ds-react 8.10.6 → 8.11.1

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

@@ -6,6 +6,7 @@ import {
   PlusIcon,
 } from "@navikt/aksel-icons";
 import { Button } from "../../../button";
+import { useDataGridContext } from "../../../data-grid/root/DataGridRoot.context";
 import { CheckboxInput } from "../../../form/checkbox/checkbox-input/CheckboxInput";
 import { RadioInput } from "../../../form/radio/radio-input/RadioInput";
 import { Skeleton } from "../../../skeleton";
@@ -19,7 +20,7 @@ import {
   getDataTableDetailsPanelId,
   useDataTableDetailsPanel,
 } from "../hooks/useTableDetailsPanel";
-import type { TableRowEntryId } from "../root/DataTable.types";
+import type { TableRowEntryId } from "../root/DataGridTable.types";
 import {
   useDataTableContext,
   useDataTableLocation,
@@ -33,7 +34,7 @@ const ACTION_CELL_CSS_WIDTH = `${ACTION_CELL_WIDTH}px`;
 type DataTableTrProps = React.HTMLAttributes<HTMLTableRowElement> & {
   selected?: boolean;
   /**
-   * Unique identifier for the row, used for selection..
+   * Unique identifier for the row, used for selection.
    */
   rowId?: TableRowEntryId;
 };
@@ -50,20 +51,21 @@ const DataTableTr = forwardRef<HTMLTableRowElement, DataTableTrProps>(
     },
     forwardedRef,
   ) => {
-    const { layout, stickyHeader, selectionState, onRowClick } =
+    const { layout, selectionState, onRowAction, tableItems } =
       useDataTableContext();
     const { location } = useDataTableLocation();
-    const { tableItems } = useDataTableContext();
 
     const renderFillerCell = layout === "fixed" && children;
 
     const selected =
       selectionState.selection.isRowSelected(rowId ?? "") ?? selectedProp;
 
-    const isSticky = location === "thead" && stickyHeader;
-
     const handleClick =
-      location === "tbody" && rowId !== undefined
+      location === "tbody" &&
+      rowId !== undefined &&
+      ((selectionState.selectionTrigger === "row" &&
+        selectionState.selection.mode !== "none") ||
+        onRowAction)
         ? (event: React.MouseEvent<HTMLTableRowElement>) => {
             if (
               rowId === undefined ||
@@ -75,6 +77,26 @@ const DataTableTr = forwardRef<HTMLTableRowElement, DataTableTrProps>(
               return;
             }
 
+            if (onRowAction) {
+              const rowData = tableItems.itemDetails.get(rowId)?.rowData;
+
+              if (rowData) {
+                onRowAction({
+                  row: rowData,
+                  id: rowId,
+                  event,
+                });
+              } else {
+                consoleWarning(
+                  `DataGrid.Table: Unable to find row data for rowId ${rowId} when calling onRowAction.`,
+                );
+              }
+            }
+
+            if (event.defaultPrevented) {
+              return;
+            }
+
             const selection = window.getSelection();
             if (selection && selection.toString().length > 0) {
               return;
@@ -82,18 +104,17 @@ const DataTableTr = forwardRef<HTMLTableRowElement, DataTableTrProps>(
 
             if (
               selectionState.selectionTrigger === "row" &&
-              selectionState.selection.selectionMode !== "none"
+              selectionState.selection.mode !== "none"
             ) {
               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.`,
+                  `DataGrid.Table: 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);
           }
         : undefined;
 
@@ -107,7 +128,6 @@ const DataTableTr = forwardRef<HTMLTableRowElement, DataTableTrProps>(
         ref={forwardedRef}
         className={cl("aksel-data-table__tr", className)}
         data-selected={selected}
-        data-sticky={isSticky || undefined}
       >
         <RowExpansionCell rowId={rowId} />
         <RowSelectionCell rowId={rowId} />
@@ -126,9 +146,12 @@ const DataTableTr = forwardRef<HTMLTableRowElement, DataTableTrProps>(
 );
 
 function RowExpansionCell({ rowId }: { rowId?: TableRowEntryId }) {
+  const { isLoading } = useDataGridContext();
   const { tableId, loading, stickyStart } = useDataTableContext();
   const stickyExpansion = stickyStart.expansion;
 
+  const expansionHeaderId = useId();
+
   const { location } = useDataTableLocation();
 
   const {
@@ -145,10 +168,11 @@ function RowExpansionCell({ rowId }: { rowId?: TableRowEntryId }) {
     return null;
   }
 
-  if (loading?.isLoading && loading?.variant === "skeleton") {
+  if (isLoading && loading?.variant === "skeleton") {
     if (location === "thead") {
       return (
         <DataTableColumnHeader
+          id={expansionHeaderId}
           width={{ value: ACTION_CELL_CSS_WIDTH }}
           cellType="action"
           data-block-keyboard-nav
@@ -172,6 +196,7 @@ function RowExpansionCell({ rowId }: { rowId?: TableRowEntryId }) {
   if (location === "thead" && !showExpandAll) {
     return (
       <DataTableColumnHeader
+        id={expansionHeaderId}
         width={{ value: ACTION_CELL_CSS_WIDTH }}
         cellType="action"
         data-block-keyboard-nav
@@ -185,7 +210,8 @@ function RowExpansionCell({ rowId }: { rowId?: TableRowEntryId }) {
   if (location === "thead") {
     return (
       <DataTableColumnHeader
-        textAlign="center"
+        id={expansionHeaderId}
+        align="center"
         width={{ value: ACTION_CELL_CSS_WIDTH }}
         cellType="action"
         label=""
@@ -261,6 +287,7 @@ function RowExpansionCell({ rowId }: { rowId?: TableRowEntryId }) {
  * TODO: a11y for labels
  */
 function RowSelectionCell({ rowId }: { rowId?: TableRowEntryId }) {
+  const { isLoading } = useDataGridContext();
   const { selectionState, stickyStart, loading } = useDataTableContext();
   const stickySelection = stickyStart.selection;
   const stickySelectionOffset = stickyStart.selectionOffset;
@@ -269,17 +296,19 @@ function RowSelectionCell({ rowId }: { rowId?: TableRowEntryId }) {
   const { tableItems } = useDataTableContext();
 
   const inputId = useId();
+  const selectionHeaderId = useId();
 
   const { selection, renderSelection } = selectionState;
 
-  if (selection.selectionMode === "none" || !renderSelection) {
+  if (selection.mode === "none" || !renderSelection) {
     return null;
   }
 
-  if (loading?.isLoading && loading?.variant === "skeleton") {
+  if (isLoading && loading?.variant === "skeleton") {
     if (location === "thead") {
       return (
         <DataTableColumnHeader
+          id={selectionHeaderId}
           width={{ value: ACTION_CELL_CSS_WIDTH }}
           cellType="action"
           label=""
@@ -302,7 +331,7 @@ function RowSelectionCell({ rowId }: { rowId?: TableRowEntryId }) {
   }
 
   /* TODO: A11y support */
-  if (selection.selectionMode === "multiple" && location === "thead") {
+  if (selection.mode === "multiple" && location === "thead") {
     const theadCheckboxProps = selection.getTheadCheckboxProps();
 
     let labelText = "Velg alle synlige rader";
@@ -312,7 +341,8 @@ function RowSelectionCell({ rowId }: { rowId?: TableRowEntryId }) {
 
     return (
       <DataTableColumnHeader
-        textAlign="center"
+        id={selectionHeaderId}
+        align="center"
         width={{ value: ACTION_CELL_CSS_WIDTH }}
         cellType="action"
         label=""
@@ -327,9 +357,10 @@ function RowSelectionCell({ rowId }: { rowId?: TableRowEntryId }) {
     );
   }
 
-  if (selection.selectionMode === "single" && location === "thead") {
+  if (selection.mode === "single" && location === "thead") {
     return (
       <DataTableColumnHeader
+        id={selectionHeaderId}
         width={{ value: ACTION_CELL_CSS_WIDTH }}
         cellType="action"
         label=""
@@ -344,7 +375,7 @@ function RowSelectionCell({ rowId }: { rowId?: TableRowEntryId }) {
     return null;
   }
 
-  if (selection.selectionMode === "multiple" && location === "tbody") {
+  if (selection.mode === "multiple" && location === "tbody") {
     return (
       <DataTableTd
         cellType="action"
@@ -362,7 +393,7 @@ function RowSelectionCell({ rowId }: { rowId?: TableRowEntryId }) {
     );
   }
 
-  if (selection.selectionMode === "single" && location === "tbody") {
+  if (selection.mode === "single" && location === "tbody") {
     return (
       <DataTableTd
         cellType="action"

package/src/data/token-filter/TokenFilter.tsx

@@ -23,7 +23,7 @@ type TokenFilterProps = {
   options: ExternalOptions;
 };
 
-/**
+/*
  * TODO:
  * - Implement onChange handler to update query state when user selects an autocomplete option.
  * - Handle token rendering and editing (e.g., show tokens for matched properties/operators/values, allow deleting tokens).

package/src/data-grid/index.ts

@@ -0,0 +1,3 @@
+"use client";
+export { DataGrid } from "./root/DataGridRoot";
+export { DataGridTable } from "../data/table/root/DataGridTableRoot";

package/src/data-grid/root/DataGrid.types.ts

@@ -0,0 +1,46 @@
+type DataGridSettings = {
+  /**
+   * Controls vertical cell padding.
+   * @default "standard"
+   */
+  rowDensity?: "tight" | "standard" | "loose";
+  /**
+   * Zebra striped table
+   * @default false
+   */
+  zebraStripes?: boolean;
+  /**
+   * Truncate content in cells and show ellipsis for overflowed text.
+   *
+   * **NB:** When using this together with `layout="auto"`,
+   * you have to manually set a `maxWidth` on columns that should be truncated.
+   * @default false if layout="auto", else true
+   */
+  truncateContent?: boolean;
+  /**
+   * Sticky columns that remain visible when horizontally scrolling the table.
+   *
+   * You can specify 1 sticky column on the left and 1 on the right.
+   */
+  stickyColumns?: {
+    start?: 1;
+    end?: 1;
+  };
+  /**
+   * Adjusts font-size
+   * @default "medium"
+   */
+  textSize?: "small" | "medium";
+  /**
+   * Optional configuration for column order and visibility.
+   *
+   * If provided, only columns listed here are rendered, and the array order
+   * determines the rendered column order.
+   *
+   * Set `visible: false` to hide a column without removing it from the list.
+   * Each `id` must be unique and match a column `id` in the `columns` prop.
+   */
+  columnDisplay?: { id: string; visible: boolean }[];
+};
+
+export type { DataGridSettings };

package/src/data-grid/root/DataGridRoot.context.ts

@@ -0,0 +1,21 @@
+import type { SelectionProps } from "../../data/table/hooks/useTableSelection";
+import type { ColumnDefinitions } from "../../data/table/root/DataGridTable.types";
+import { createStrictContext } from "../../utils/helpers";
+import type { DataGridSettings } from "./DataGrid.types";
+
+type DataGridContextValue<RowT = unknown> = {
+  data: RowT[];
+  columnDefinitions: ColumnDefinitions<RowT>;
+  getRowId?: (rowData: RowT) => string;
+  selection?: SelectionProps<RowT>;
+  isLoading?: boolean;
+  tableSettings?: DataGridSettings;
+};
+
+const { Provider: DataGridContextProvider, useContext: useDataGridContext } =
+  createStrictContext<DataGridContextValue>({
+    name: "DataGridContext",
+    errorMessage: "DataGrid hooks must be used within a <DataGrid />",
+  });
+
+export { DataGridContextProvider, useDataGridContext };

package/src/data-grid/root/DataGridRoot.tsx

@@ -0,0 +1,154 @@
+import React, { forwardRef, useMemo } from "react";
+import type { SelectionProps } from "../../data/table/hooks/useTableSelection";
+import type { ColumnDefinitions } from "../../data/table/root/DataGridTable.types";
+import { DataGridTable } from "../../data/table/root/DataGridTableRoot";
+import { cl } from "../../utils/helpers";
+import type { DataGridSettings } from "./DataGrid.types";
+import { DataGridContextProvider } from "./DataGridRoot.context";
+
+interface DataGridProps<RowT> {
+  children: React.ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+  /**
+   * Definitions of the columns to display.
+   */
+  columns: ColumnDefinitions<RowT>;
+  /**
+   * The data to display.
+   *
+   * Each object in the array represents a row, and the properties of the
+   * object are used to render the cells based on `columnDefinitions`.
+   */
+  data: RowT[];
+  /**
+   * Function to get unique row ID from row data.
+   *
+   * If not provided, the row index will be used as ID.
+   * This can cause issues if your data changes dynamically,
+   * so it's recommended to provide a stable ID if possible.
+   */
+  getRowId?: (rowData: RowT) => string;
+  /**
+   * Object with props related to row selection.
+   */
+  selection?: SelectionProps<RowT>;
+  /**
+   * Determines if the data grid is in a loading state.
+   * See `loadingContent` prop on the `DataGrid.Table` component for display settings.
+   * @default false
+   */
+  isLoading?: boolean;
+  /**
+   * Settings for the data grid.
+   */
+  settings?: DataGridSettings;
+}
+
+interface DataGridComponent {
+  <RowT>(
+    props: DataGridProps<RowT> & React.RefAttributes<HTMLDivElement>,
+  ): React.ReactElement | null;
+  /**
+   * @see 🏷️ {@link DataGridTableProps}
+   *
+   * @example
+   * <DataGrid columnDefinitions={columnDefs} data={rowData} getRowId={(row) => row.id}>
+   *   <DataGrid.Table />
+   * </DataGrid>
+   */
+  Table: typeof DataGridTable;
+}
+
+/**
+ * Component for displaying tabular data.
+ *
+ * **WARNING: This component is in active development and may receive breaking changes outside major releases!**
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/datagrid)
+ * @see 🏷️ {@link DataGridProps}
+ *
+ * @example
+ * ```jsx
+ * <DataGrid columnDefinitions={columnDefs} data={rowData} getRowId={(row) => row.id}>
+ *   <DataGrid.Table />
+ * </DataGrid>
+ * ```
+ */
+const DataGridInternal = forwardRef<HTMLDivElement, DataGridProps<any>>(
+  (
+    {
+      children,
+      className,
+      columns,
+      data,
+      getRowId,
+      selection,
+      isLoading = false,
+      settings,
+      ...rest
+    }: DataGridProps<unknown>,
+    ref,
+  ) => {
+    const resolvedSettings = useMemo(
+      () => ({
+        rowDensity: settings?.rowDensity ?? "standard",
+        zebraStripes: settings?.zebraStripes ?? false,
+        truncateContent: settings?.truncateContent,
+        stickyColumns: settings?.stickyColumns ?? {},
+        textSize: settings?.textSize ?? "medium",
+        columnDisplay: settings?.columnDisplay,
+      }),
+      [
+        settings?.rowDensity,
+        settings?.zebraStripes,
+        settings?.truncateContent,
+        settings?.stickyColumns,
+        settings?.textSize,
+        settings?.columnDisplay,
+      ],
+    );
+
+    return (
+      <div {...rest} ref={ref} className={cl("aksel-data-grid", className)}>
+        <DataGridContextProvider
+          columnDefinitions={columns}
+          data={data}
+          getRowId={getRowId}
+          selection={selection}
+          isLoading={isLoading}
+          tableSettings={resolvedSettings}
+        >
+          {children}
+        </DataGridContextProvider>
+      </div>
+    );
+  },
+);
+
+const DataGrid = DataGridInternal as unknown as DataGridComponent;
+DataGrid.Table = DataGridTable;
+
+// eslint-disable-next-line @typescript-eslint/no-namespace, import/export
+export namespace DataGrid {
+  export type Props<T = unknown> = DataGridProps<T>;
+  export type Columns<T = unknown> = ColumnDefinitions<T>;
+  export type Selection<T = unknown> = SelectionProps<T>;
+  export type Settings = DataGridSettings;
+
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  export namespace Table {
+    // eslint-disable-next-line @typescript-eslint/no-shadow
+    export type Props<T = unknown> = DataGridTable.Props<T>;
+    export type Sorting = DataGridTable.Sorting;
+    export type SortEntry = DataGridTable.SortEntry;
+    export type SortChangeDetail = DataGridTable.SortChangeDetail;
+    export type LoadingContent = DataGridTable.LoadingContent;
+    export type SubRows<T = unknown> = DataGridTable.SubRows<T>;
+    export type DetailsPanel<T = unknown> = DataGridTable.DetailsPanel<T>;
+  }
+}
+
+// eslint-disable-next-line import/export
+export { DataGrid, DataGridInternal }; // DataGridRoot needs to be exported b.c. of docgen
+export default DataGrid;

package/src/preview.ts

@@ -0,0 +1,2 @@
+"use client";
+export { DataGrid } from "./data-grid";

package/src/primitives/bleed/Bleed.tsx

@@ -13,7 +13,6 @@ export interface BleedProps extends React.HTMLAttributes<HTMLDivElement> {
    * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#space)
    * or an object of spacing tokens for different breakpoints.
    *
-   * The `px` value is useful to nudge by just 1px.
    * The `full` value is used to extend the margin to the full width of the parent.
    *
    * @example
@@ -29,7 +28,6 @@ export interface BleedProps extends React.HTMLAttributes<HTMLDivElement> {
    * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#space)
    * or an object of spacing tokens for different breakpoints.
    *
-   * The `px` value is useful to nudge by just 1px.
    * This prop does **not** accept the `full` value.
    *
    * @example

package/src/table/ColumnHeader.tsx

@@ -45,6 +45,7 @@ export const ColumnHeader: ColumnHeaderType = forwardRef(
         }
         {...rest}
       >
+        {/* TODO: Padding on cell makes clickable area smaller than cell with button. Make cell clickable, have pointer etc */}
         {sortable ? (
           <button
             type="button"

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

@@ -460,6 +460,7 @@ const DismissableLayer = forwardRef<HTMLDivElement, DismissableLayerProps>(
             () => {
               pointerDownOutside.onPointerDownCapture();
               pointerUpOutside.onPointerDownCapture();
+              focusOutside.onPointerDownCapture();
             },
           )}
           onPointerUpCapture={composeEventHandlers(

package/src/utils/components/dismissablelayer/util/useFocusOutside.ts

@@ -1,5 +1,5 @@
 import { useEffect, useRef } from "react";
-import { useEventCallback } from "../../../hooks";
+import { useEventCallback, useTimeout } from "../../../hooks";
 import {
   CUSTOM_EVENTS,
   CustomFocusEvent,
@@ -16,6 +16,8 @@ export function useFocusOutside(
 ) {
   const handleFocusOutside = useEventCallback(callback) as EventListener;
   const isFocusInsideReactTreeRef = useRef(false);
+  const skipFocusCheckRef = useRef(false);
+  const timeout = useTimeout();
 
   useEffect(() => {
     if (!enabled) {
@@ -23,7 +25,11 @@ export function useFocusOutside(
     }
 
     const handleFocus = (event: FocusEvent) => {
-      if (event.target && !isFocusInsideReactTreeRef.current) {
+      if (
+        event.target &&
+        !isFocusInsideReactTreeRef.current &&
+        !skipFocusCheckRef.current
+      ) {
         const eventDetail = { originalEvent: event };
 
         /**
@@ -59,5 +65,11 @@ export function useFocusOutside(
     onBlurCapture: () => {
       isFocusInsideReactTreeRef.current = false;
     },
+    onPointerDownCapture: () => {
+      skipFocusCheckRef.current = true;
+      timeout.start(0, () => {
+        skipFocusCheckRef.current = false;
+      });
+    },
   };
 }

package/src/utils/hooks/useControllableState.ts

@@ -25,16 +25,18 @@ export function useControllableState<StateT, ChangeT extends StateT = StateT>({
   const controlled = valueProp !== undefined;
   const value = controlled ? valueProp : uncontrolledState;
 
-  const setValue = useEventCallback((next: React.SetStateAction<ChangeT>) => {
-    const setter = next as (prevState?: StateT) => ChangeT;
-    const nextValue = typeof next === "function" ? setter(value) : next;
+  const setValue = useEventCallback(
+    (next: ChangeT | ((prevState: StateT) => ChangeT)) => {
+      const setter = next as (prevState?: StateT) => ChangeT;
+      const nextValue = typeof next === "function" ? setter(value) : next;
 
-    if (!controlled) {
-      setUncontrolledState(nextValue);
-    }
+      if (!controlled) {
+        setUncontrolledState(nextValue);
+      }
 
-    onChangeProp(nextValue);
-  });
+      onChangeProp(nextValue);
+    },
+  );
 
   return [value, setValue] as const;
 }

package/cjs/data/data-grid/index.d.ts

@@ -1,2 +0,0 @@
-export { DataGridRoot as DataGrid } from "./root/DataGridRoot";
-export type { DataGridProps } from "./root/DataGridRoot";

package/cjs/data/data-grid/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/data/data-grid/index.ts"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;AACb,oDAA+D;AAAtD,wGAAA,YAAY,OAAY"}

package/cjs/data/data-grid/root/DataGridRoot.context.d.ts

@@ -1,11 +0,0 @@
-import type { ColumnDefinitions } from "../../table/root/DataTable.types";
-type DataGridContextValue<RowDef = unknown> = {
-    data: RowDef[];
-    columnDefinitions: ColumnDefinitions<RowDef>;
-    getRowId?: (rowData: RowDef) => string;
-};
-declare const DataGridContextProvider: import("react").FC<DataGridContextValue<unknown> & {
-    children: React.ReactNode;
-    ref?: never;
-}>, useDataGridContext: <S extends boolean = true>(strict?: S | undefined) => S extends true ? DataGridContextValue<unknown> : DataGridContextValue<unknown> | undefined;
-export { DataGridContextProvider, useDataGridContext };

package/cjs/data/data-grid/root/DataGridRoot.context.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DataGridRoot.context.js","sourceRoot":"","sources":["../../../../src/data/data-grid/root/DataGridRoot.context.ts"],"names":[],"mappings":";;;AAAA,oDAA6D;AAS7D,MAAM,EAAE,QAAQ,EAAE,uBAAuB,EAAE,UAAU,EAAE,kBAAkB,EAAE,GACzE,IAAA,6BAAmB,EAAuB;IACxC,IAAI,EAAE,iBAAiB;IACvB,YAAY,EAAE,mDAAmD;CAClE,CAAC,CAAC;AAEI,0DAAuB;AAAE,gDAAkB"}

package/cjs/data/data-grid/root/DataGridRoot.d.ts

@@ -1,38 +0,0 @@
-import React, { HTMLAttributes } from "react";
-import type { ColumnDefinitions } from "../../table/root/DataTable.types";
-type RowTId = string;
-export interface DataGridProps<RowT> extends HTMLAttributes<HTMLDivElement> {
-    children: React.ReactNode;
-    /**
-     * Definitions of the columns to display in the data grid.
-     *
-     * Each column definition should have a unique `id` and a `cell`-renderer function that takes the row data as argument and returns a React node.
-     */
-    columnDefinitions: ColumnDefinitions<RowT>;
-    /**
-     * The data to display.
-     *
-     * Each object in the array represents a row, and the properties of the object are used to render the cells based on the `columnDefinitions`.
-     */
-    data: RowT[];
-    /**
-     * Function to get unique row id from row data.
-     *
-     * If not provided, the row index will be used as id. This can cause issues if your data changes dynamically, so it's recommended to provide a stable id if possible.
-     */
-    getRowId?: (rowData: RowT) => RowTId;
-}
-type DataGridRootComponent = <RowT>(props: DataGridProps<RowT> & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;
-/**
- * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/data-grid)
- * @see 🏷️ {@link DataGridProps}
- *
- * @example
- * ```jsx
- * <DataGrid columnDefinitions={columnDefs} data={rowData} getRowId={(row) => row.id}>
- *   <DataTable />
- * </DataGrid>
- * ```
- */
-export declare const DataGridRoot: DataGridRootComponent;
-export default DataGridRoot;

package/cjs/data/data-grid/root/DataGridRoot.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DataGridRoot.js","sourceRoot":"","sources":["../../../../src/data/data-grid/root/DataGridRoot.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0D;AAC1D,oDAA4C;AAE5C,iEAAiE;AA8BjE;;;;;;;;;;GAUG;AACU,QAAA,YAAY,GAAG,IAAA,kBAAU,EACpC,CACE,EAOyB,EACzB,GAAG,EACH,EAAE;QATF,EACE,QAAQ,EACR,SAAS,EACT,iBAAiB,EACjB,IAAI,EACJ,QAAQ,OAEe,EADpB,IAAI,cANT,kEAOC,CADQ;IAIT,OAAO,CACL,uDAAS,IAAI,IAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,IAAA,YAAE,EAAC,iBAAiB,EAAE,SAAS,CAAC;QAClE,8BAAC,8CAAuB,IACtB,iBAAiB,EAAE,iBAAiB,EACpC,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,IAEjB,QAAQ,CACe,CACtB,CACP,CAAC;AACJ,CAAC,CACuB,CAAC;AAE3B,kBAAe,oBAAY,CAAC"}

package/cjs/data/table/root/DataTable.types.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DataTable.types.js","sourceRoot":"","sources":["../../../../src/data/table/root/DataTable.types.ts"],"names":[],"mappings":""}