lecom-ui 5.3.22 → 5.3.24

package/README.md

@@ -1 +1 @@
-lecom-ui
+lecom-ui

package/dist/_virtual/_commonjsHelpers.js

@@ -0,0 +1,5 @@
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
+export { getDefaultExportFromCjs };

package/dist/_virtual/index.js

@@ -0,0 +1,7 @@
+import { getDefaultExportFromCjs } from './_commonjsHelpers.js';
+import { __require as requireLib } from '../node_modules/hex-color-opacity/lib/index.js';
+
+var libExports = requireLib();
+var opacity = /*@__PURE__*/getDefaultExportFromCjs(libExports);
+
+export { opacity as default };

package/dist/components/Accordion/Accordion.js

@@ -2,33 +2,24 @@ import * as React from 'react';
 import { cn } from '../../lib/utils.js';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import { cva } from 'class-variance-authority';
-import { ChevronRight, ChevronDown } from 'lucide-react';
+import { ChevronDown } from 'lucide-react';
 
 const accordionVariants = cva(
-  "flex flex-1 items-center gap-4 transition-all text-left outline-none w-full",
+  "flex flex-1 items-start justify-between gap-4 transition-all text-left [&[data-state=open]>svg]:rotate-180 w-full text-center outline-none",
   {
     variants: {
       variant: {
-        default: "border-t border-grey-400 text-grey-950 hover:bg-grey-200 hover:rounded-lg hover:border-t-transparent hover:ring-0 focus:hover:ring-0 active:bg-grey-400 active:border-transparent active:ring-0 disabled:text-grey-300 disabled:bg-transparent disabled:cursor-not-allowed disabled:hover:bg-none disabled:hover:rounded-none disabled:hover:border-grey-400 disabled:focus:ring-0 disabled:active:bg-transparent",
-        collapse: "bg-transparent border-none data-[state=open]:font-semibold hover:bg-transparent"
+        default: "border-t border-grey-400 text-grey-950 hover:bg-grey-200 hover:rounded-lg hover:border-t-transparent hover:ring-0 focus:hover:ring-0 active:bg-grey-400 active:border-transparent active:ring-0 disabled:text-grey-300 disabled:bg-transparent disabled:cursor-not-allowed disabled:hover:bg-none disabled:hover:rounded-none disabled:hover:border-grey-400 disabled:focus:ring-0 disabled:active:bg-transparent"
       },
       size: {
         small: "heading-xxsmall-600 py-1.5 px-4 min-h-8",
         medium: "heading-xsmall-600 py-2.5 px-4 min-h-10",
-        large: "heading-small-600 py-3 px-4 min-h-12",
-        "collapse-small": "text-sm py-1.5 px-4 min-h-8",
-        "collapse-medium": "text-base py-2.5 px-4 min-h-10",
-        "collapse-large": "text-lg py-3 px-4 min-h-12"
-      },
-      iconPosition: {
-        start: "justify-start",
-        end: "justify-between"
+        large: "heading-small-600 py-3 px-4 min-h-12"
       }
     },
     defaultVariants: {
       variant: "default",
-      size: "large",
-      iconPosition: "end"
+      size: "large"
     }
   }
 );
@@ -36,93 +27,47 @@ const Accordion = AccordionPrimitive.Root;
 const AccordionItem = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(AccordionPrimitive.Item, { ref, className: cn(className), ...props }));
 AccordionItem.displayName = "AccordionItem";
 const AccordionTrigger = React.forwardRef(
-  ({
-    className,
-    children,
-    variant = "default",
-    size,
-    disabled,
-    asChild,
-    iconPosition = "end",
-    ghost = false,
-    mode,
-    header,
-    extra,
-    ...props
-  }, ref) => {
-    const isCollapseMode = mode === "collapse";
-    const finalVariant = isCollapseMode || ghost ? "collapse" : variant;
-    const finalIconPosition = isCollapseMode ? "start" : iconPosition;
-    const allowedSizes = ["small", "medium", "large"];
-    let finalSize = size;
-    if ((isCollapseMode || ghost) && size && allowedSizes.includes(size) && typeof size === "string") {
-      if (size === "collapse-small" || size === "collapse-medium" || size === "collapse-large") {
-        finalSize = size;
-      } else {
-        finalSize = `collapse-${size}`;
-      }
-    }
-    const content = isCollapseMode ? header : children;
-    const renderTriggerContent = () => {
-      if (asChild) {
-        return content;
-      }
-      if (isCollapseMode || ghost && finalIconPosition === "start") {
-        return /* @__PURE__ */ React.createElement("div", { className: "flex flex-1 items-center justify-between gap-4 w-full" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 truncate" }, /* @__PURE__ */ React.createElement("span", { className: "flex items-center justify-center flex-shrink-0 min-w-4 min-h-4 transition-transform duration-300 group-data-[state=open]:rotate-90 text-grey-700 text-lg select-none font-normal" }, /* @__PURE__ */ React.createElement(ChevronRight, { className: "size-4" })), /* @__PURE__ */ React.createElement("span", { className: "font-normal" }, content)), extra && /* @__PURE__ */ React.createElement("div", { className: "text-sm text-grey-500" }, extra));
-      }
-      return /* @__PURE__ */ React.createElement(React.Fragment, null, finalIconPosition === "start" && /* @__PURE__ */ React.createElement(
-        ChevronDown,
-        {
-          className: cn(
-            "size-5 shrink-0 text-grey-800 transition-transform duration-200 [&[data-state=open]]:rotate-90",
-            disabled && "text-grey-300"
-          )
-        }
-      ), /* @__PURE__ */ React.createElement("span", { className: "flex-1" }, content), finalIconPosition === "end" && /* @__PURE__ */ React.createElement(
-        ChevronDown,
-        {
-          className: cn(
-            "size-5 shrink-0 text-grey-800 transition-transform duration-200 [&[data-state=open]]:rotate-180",
-            disabled && "text-grey-300"
-          )
-        }
-      ));
-    };
-    return /* @__PURE__ */ React.createElement(AccordionPrimitive.Header, null, /* @__PURE__ */ React.createElement(
-      AccordionPrimitive.Trigger,
+  ({ className, children, variant, size, disabled, asChild, ...props }, ref) => /* @__PURE__ */ React.createElement(AccordionPrimitive.Header, { className: "" }, /* @__PURE__ */ React.createElement(
+    AccordionPrimitive.Trigger,
+    {
+      ref,
+      className: cn(accordionVariants({ variant, size, className })),
+      ...props,
+      disabled,
+      asChild
+    },
+    asChild ? children : /* @__PURE__ */ React.createElement(React.Fragment, null, children, /* @__PURE__ */ React.createElement(
+      ChevronDown,
       {
-        ref,
         className: cn(
-          accordionVariants({
-            variant: finalVariant,
-            size: finalSize,
-            iconPosition: finalIconPosition,
-            className
-          }),
-          (isCollapseMode || ghost) && "group"
-        ),
-        ...props,
-        disabled,
-        asChild
-      },
-      renderTriggerContent()
-    ));
-  }
+          "size-5 shrink-0 text-grey-800 transition-transform duration-200",
+          disabled && "text-grey-300"
+        )
+      }
+    ))
+  ))
 );
-const AccordionContent = React.forwardRef(({ className, children, disabled, ...props }, ref) => /* @__PURE__ */ React.createElement(
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+const AccordionContent = React.forwardRef(({ className, children, disabled = false, ...props }, ref) => /* @__PURE__ */ React.createElement(
   AccordionPrimitive.Content,
   {
-    ref,
-    className: cn(
-      "overflow-hidden data-[state=open]:animate-accordion-down data-[state=closed]:animate-accordion-up",
-      className
-    ),
     "aria-disabled": disabled,
+    className: "overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
     ...props
   },
-  /* @__PURE__ */ React.createElement("div", { className: "pt-2 pb-4 px-4" }, children)
+  /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ref,
+      className: cn(
+        "body-medium-400 text-grey-800 pt-2 pb-4 px-4",
+        disabled && "text-grey-300",
+        className
+      )
+    },
+    children
+  )
 ));
-AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
 AccordionContent.displayName = AccordionPrimitive.Content.displayName;
 
 export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, accordionVariants };

package/dist/components/Collapse/Collapse.js

@@ -2,93 +2,127 @@ import * as React from 'react';
 import { cn } from '../../lib/utils.js';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import { cva } from 'class-variance-authority';
-import { ChevronRight } from 'lucide-react';
+import { ChevronRight, ChevronDown } from 'lucide-react';
 
-const collapseTriggerVariants = cva(
-  "flex items-center justify-between w-full transition-all text-left outline-none data-[state=open]:font-semibold",
+const collapseVariants = cva(
+  "flex flex-1 items-center gap-4 transition-all text-left outline-none w-full",
   {
     variants: {
+      variant: {
+        default: "border-t border-grey-400 text-grey-950 hover:bg-grey-200 hover:rounded-lg hover:border-t-transparent hover:ring-0 focus:hover:ring-0 active:bg-grey-400 active:border-transparent active:ring-0 disabled:text-grey-300 disabled:bg-transparent disabled:cursor-not-allowed disabled:hover:bg-none disabled:hover:rounded-none disabled:hover:border-grey-400 disabled:focus:ring-0 disabled:active:bg-transparent",
+        collapse: "bg-transparent border-none data-[state=open]:font-semibold hover:bg-transparent"
+      },
       size: {
-        small: "text-sm py-1.5 px-4 min-h-8",
-        medium: "text-base py-2.5 px-4 min-h-10",
-        large: "text-lg py-3 px-4 min-h-12"
+        small: "heading-xxsmall-600 py-1.5 px-4 min-h-8",
+        medium: "heading-xsmall-600 py-2.5 px-4 min-h-10",
+        large: "heading-small-600 py-3 px-4 min-h-12",
+        "collapse-small": "text-sm py-1.5 px-4 min-h-8",
+        "collapse-medium": "text-base py-2.5 px-4 min-h-10",
+        "collapse-large": "text-lg py-3 px-4 min-h-12"
       },
-      ghost: {
-        true: "bg-transparent border-none",
-        false: "border-t-none border-grey-400"
+      iconPosition: {
+        start: "justify-start",
+        end: "justify-between"
       }
     },
     defaultVariants: {
+      variant: "default",
       size: "large",
-      ghost: false
+      iconPosition: "end"
     }
   }
 );
-const CollapseRoot = AccordionPrimitive.Root;
-const CollapseItem = AccordionPrimitive.Item;
-const CollapsePanel = React.forwardRef(
+const Collapse = AccordionPrimitive.Root;
+const CollapseItem = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(AccordionPrimitive.Item, { ref, className: cn(className), ...props }));
+CollapseItem.displayName = "CollapseItem";
+const CollapseTrigger = React.forwardRef(
   ({
-    header,
+    className,
     children,
-    extra,
-    expandIconPosition = "start",
-    size = "large",
+    variant = "default",
+    size,
+    disabled,
+    asChild,
+    iconPosition = "end",
     ghost = false,
-    disabled = false,
-    className,
+    mode,
+    header,
+    extra,
     ...props
-  }, ref) => /* @__PURE__ */ React.createElement(
-    CollapseItem,
-    {
-      ref,
-      ...props,
-      className: cn(
-        "group w-full",
-        disabled && "pointer-events-none opacity-50",
-        className
-      )
-    },
-    /* @__PURE__ */ React.createElement(AccordionPrimitive.Header, { asChild: true }, /* @__PURE__ */ React.createElement(
-      AccordionPrimitive.Trigger,
-      {
-        disabled,
-        className: cn(
-          collapseTriggerVariants({ size, ghost }),
-          "flex gap-2 items-center text-left font-normal"
-        )
-      },
-      /* @__PURE__ */ React.createElement(
-        "div",
+  }, ref) => {
+    const isCollapseMode = mode === "collapse";
+    const finalVariant = isCollapseMode || ghost ? "collapse" : variant;
+    const finalIconPosition = isCollapseMode ? "start" : iconPosition;
+    const allowedSizes = ["small", "medium", "large"];
+    let finalSize = size;
+    if ((isCollapseMode || ghost) && size && allowedSizes.includes(size) && typeof size === "string") {
+      if (size === "collapse-small" || size === "collapse-medium" || size === "collapse-large") {
+        finalSize = size;
+      } else {
+        finalSize = `collapse-${size}`;
+      }
+    }
+    const content = isCollapseMode ? header : children;
+    const renderTriggerContent = () => {
+      if (asChild) {
+        return content;
+      }
+      if (isCollapseMode || ghost && finalIconPosition === "start") {
+        return /* @__PURE__ */ React.createElement("div", { className: "flex flex-1 items-center justify-between gap-4 w-full" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 truncate" }, /* @__PURE__ */ React.createElement("span", { className: "flex items-center justify-center flex-shrink-0 min-w-4 min-h-4 transition-transform duration-300 group-data-[state=open]:rotate-90 text-grey-700 text-lg select-none font-normal" }, /* @__PURE__ */ React.createElement(ChevronRight, { className: "size-4" })), /* @__PURE__ */ React.createElement("span", { className: "font-normal" }, content)), extra && /* @__PURE__ */ React.createElement("div", { className: "text-sm text-grey-500" }, extra));
+      }
+      return /* @__PURE__ */ React.createElement(React.Fragment, null, finalIconPosition === "start" && /* @__PURE__ */ React.createElement(
+        ChevronDown,
+        {
+          className: cn(
+            "size-5 shrink-0 text-grey-800 transition-transform duration-200 [&[data-state=open]]:rotate-90",
+            disabled && "text-grey-300"
+          )
+        }
+      ), /* @__PURE__ */ React.createElement("span", { className: "flex-1" }, content), finalIconPosition === "end" && /* @__PURE__ */ React.createElement(
+        ChevronDown,
         {
           className: cn(
-            "flex flex-1 items-center justify-between gap-4 w-full",
-            expandIconPosition === "end" ? "flex-row-reverse" : ""
+            "size-5 shrink-0 text-grey-800 transition-transform duration-200 [&[data-state=open]]:rotate-180",
+            disabled && "text-grey-300"
           )
-        },
-        /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 truncate" }, /* @__PURE__ */ React.createElement(
-          "span",
-          {
-            className: "flex items-center justify-center flex-shrink-0 min-w-4 min-h-4 transition-transform duration-300 group-data-[state=open]:rotate-90 text-grey-700 text-lg select-none font-normal"
-          },
-          /* @__PURE__ */ React.createElement(ChevronRight, { className: "size-4" })
-        ), /* @__PURE__ */ React.createElement("span", { className: "font-normal" }, header)),
-        extra && /* @__PURE__ */ React.createElement("div", { className: "text-sm text-grey-500" }, extra)
-      )
-    )),
-    /* @__PURE__ */ React.createElement(
-      AccordionPrimitive.Content,
+        }
+      ));
+    };
+    return /* @__PURE__ */ React.createElement(AccordionPrimitive.Header, null, /* @__PURE__ */ React.createElement(
+      AccordionPrimitive.Trigger,
       {
+        ref,
         className: cn(
-          "overflow-hidden data-[state=open]:animate-accordion-down data-[state=closed]:animate-accordion-up"
-        )
+          collapseVariants({
+            variant: finalVariant,
+            size: finalSize,
+            iconPosition: finalIconPosition,
+            className
+          }),
+          (isCollapseMode || ghost) && "group"
+        ),
+        ...props,
+        disabled,
+        asChild
       },
-      /* @__PURE__ */ React.createElement("div", { className: "text-sm text-grey-800 pt-2 pb-4 px-4" }, children)
-    )
-  )
+      renderTriggerContent()
+    ));
+  }
 );
-CollapsePanel.displayName = "CollapsePanel";
-const Collapse = Object.assign(CollapseRoot, {
-  Panel: CollapsePanel
-});
+const CollapseContent = React.forwardRef(({ className, children, disabled, ...props }, ref) => /* @__PURE__ */ React.createElement(
+  AccordionPrimitive.Content,
+  {
+    ref,
+    className: cn(
+      "overflow-hidden data-[state=open]:animate-accordion-down data-[state=closed]:animate-accordion-up",
+      className
+    ),
+    "aria-disabled": disabled,
+    ...props
+  },
+  /* @__PURE__ */ React.createElement("div", { className: "pt-2 pb-4 px-4" }, children)
+));
+CollapseTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+CollapseContent.displayName = AccordionPrimitive.Content.displayName;
 
-export { Collapse, collapseTriggerVariants };
+export { Collapse, CollapseContent, CollapseItem, CollapseTrigger, collapseVariants };

package/dist/components/DataTable/DataTable.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { cn } from '../../lib/utils.js';
-import { useReactTable, getSortedRowModel, getCoreRowModel } from '@tanstack/react-table';
+import { getExpandedRowModel, getSortedRowModel, getCoreRowModel, useReactTable } from '@tanstack/react-table';
 import { Pagination } from '../Pagination/Pagination.js';
 import { ScrollArea, ScrollBar } from '../ScrollArea/ScrollArea.js';
 import { buildColumns } from './DataTable.utils.js';
@@ -18,29 +18,71 @@ function DataTable({
   noScroll,
   size = "middle",
   skeleton,
-  onIsSelected
+  onIsSelected,
+  expandedContent,
+  initialExpanded,
+  onExpandedChange
 }) {
   const [sorting, setSorting] = React.useState([]);
-  const table = useReactTable({
-    data,
-    columns: buildColumns({ columns, size }),
-    getCoreRowModel: getCoreRowModel(),
-    onSortingChange: setSorting,
-    getSortedRowModel: getSortedRowModel(),
-    state: {
-      sorting
-    }
-  });
-  const styleDataTableContainer = () => ({
-    width: vwDiff ? `calc(100vw - ${vwDiff}px)` : "100%",
-    height: vhDiff ? `calc(100vh - ${vhDiff}px)` : "100%"
-  });
-  const hasPagination = () => {
+  const [expanded, setExpanded] = React.useState(
+    initialExpanded || {}
+  );
+  const memoizedColumns = React.useMemo(
+    () => buildColumns({
+      columns,
+      size,
+      expandedContent: !!expandedContent
+    }),
+    [columns, size, expandedContent]
+  );
+  const handleExpandedChange = React.useCallback(
+    (updaterOrValue) => {
+      setExpanded((prevExpanded) => {
+        const newExpanded = typeof updaterOrValue === "function" ? updaterOrValue(prevExpanded) : updaterOrValue;
+        onExpandedChange?.(newExpanded);
+        return newExpanded;
+      });
+    },
+    [onExpandedChange]
+  );
+  const tableConfig = React.useMemo(
+    () => ({
+      data,
+      columns: memoizedColumns,
+      getCoreRowModel: getCoreRowModel(),
+      onSortingChange: setSorting,
+      getSortedRowModel: getSortedRowModel(),
+      getExpandedRowModel: getExpandedRowModel(),
+      enableExpanding: !!expandedContent,
+      onExpandedChange: handleExpandedChange,
+      state: {
+        sorting,
+        expanded
+      }
+    }),
+    [
+      data,
+      memoizedColumns,
+      handleExpandedChange,
+      sorting,
+      expanded,
+      expandedContent
+    ]
+  );
+  const table = useReactTable(tableConfig);
+  const styleDataTableContainer = React.useMemo(
+    () => ({
+      width: vwDiff ? `calc(100vw - ${vwDiff}px)` : "100%",
+      height: vhDiff ? `calc(100vh - ${vhDiff}px)` : "100%"
+    }),
+    [vwDiff, vhDiff]
+  );
+  const hasPagination = React.useCallback(() => {
     if (!pagination) {
       return null;
     }
     return /* @__PURE__ */ React.createElement(Pagination, { ...pagination });
-  };
+  }, [pagination]);
   React.useEffect(() => {
     if (!isLoading) {
       const listRows = document.querySelectorAll(`table#data-table tr`);
@@ -66,7 +108,27 @@ function DataTable({
       });
     }
   }, [isLoading]);
-  const onScroll = (e) => {
+  const throttle = React.useCallback(
+    (func, delay) => {
+      let timeoutId = null;
+      let lastExecTime = 0;
+      return (e) => {
+        const currentTime = Date.now();
+        if (currentTime - lastExecTime > delay) {
+          func(e);
+          lastExecTime = currentTime;
+        } else {
+          if (timeoutId) clearTimeout(timeoutId);
+          timeoutId = setTimeout(() => {
+            func(e);
+            lastExecTime = Date.now();
+          }, delay - (currentTime - lastExecTime));
+        }
+      };
+    },
+    []
+  );
+  const handleScroll = React.useCallback((e) => {
     const target = e.target;
     const elemSeparator = document.querySelectorAll("[data-separator-fixed]");
     const countSeparator = elemSeparator.length - 1;
@@ -89,11 +151,20 @@ function DataTable({
         }
       });
     }
-  };
-  React.useEffect(() => {
-    document.querySelector("[data-radix-scroll-area-viewport]")?.addEventListener("scroll", onScroll);
-    return () => document.querySelector("[data-radix-scroll-area-viewport]")?.removeEventListener("scroll", onScroll);
   }, []);
+  const onScroll = React.useMemo(
+    () => throttle(handleScroll, 16),
+    [throttle, handleScroll]
+  );
+  React.useEffect(() => {
+    const scrollElement = document.querySelector(
+      "[data-radix-scroll-area-viewport]"
+    );
+    if (scrollElement) {
+      scrollElement.addEventListener("scroll", onScroll);
+      return () => scrollElement.removeEventListener("scroll", onScroll);
+    }
+  }, [onScroll]);
   const renderTable = () => /* @__PURE__ */ React.createElement(
     Table,
     {
@@ -103,7 +174,8 @@ function DataTable({
       onIsSelected,
       isLoading,
       size,
-      skeleton
+      skeleton,
+      expandedContent
     }
   );
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
@@ -113,18 +185,19 @@ function DataTable({
         "bg-white rounded-[8px] p-2 transition-all duration-500",
         className
       ),
-      style: noScroll ? void 0 : { width: styleDataTableContainer().width }
+      style: noScroll ? void 0 : { width: styleDataTableContainer.width }
     },
     noScroll ? renderTable() : /* @__PURE__ */ React.createElement(ScrollArea, { type: "always", className: "p-2" }, /* @__PURE__ */ React.createElement(
       "div",
       {
         className: "transition-all duration-500",
-        style: { maxHeight: styleDataTableContainer().height }
+        style: { maxHeight: styleDataTableContainer.height }
       },
       renderTable()
     ), /* @__PURE__ */ React.createElement(ScrollBar, { orientation: "horizontal" }))
   ), hasPagination());
 }
-DataTable.displayName = "DataTable";
+const MemoizedDataTable = React.memo(DataTable);
+MemoizedDataTable.displayName = "DataTable";
 
-export { DataTable };
+export { MemoizedDataTable as DataTable };

package/dist/components/DataTable/DataTable.utils.js

@@ -68,9 +68,16 @@ function renderSortArrow({
     }
   );
 }
+function createExpandToggle(row) {
+  return {
+    isExpanded: row.getIsExpanded(),
+    toggleExpanded: () => row.toggleExpanded()
+  };
+}
 function buildColumns({
   columns,
-  size = "middle"
+  size = "middle",
+  expandedContent
 }) {
   const mappedColumns = columns.map((externalColumn) => ({
     accessorKey: externalColumn.key,
@@ -122,9 +129,12 @@ function buildColumns({
       }
       if (externalColumn.render) {
         if (typeof externalColumn.render === "function") {
+          const expandToggle = expandedContent ? createExpandToggle(row) : void 0;
           return externalColumn.render({
             value: row.getValue(externalColumn.key),
-            row
+            row,
+            toggleExpanded: expandToggle?.toggleExpanded,
+            isExpanded: expandToggle?.isExpanded
           });
         }
         return externalColumn.render;
@@ -139,6 +149,7 @@ function buildColumns({
         row.getValue(externalColumn.key)
       );
     },
+    enableExpanding: externalColumn.enableExpand && !!expandedContent,
     meta: {
       width: externalColumn.width,
       fixed: externalColumn.fixed,
@@ -159,4 +170,4 @@ function buildColumns({
   return mappedColumns;
 }
 
-export { buildColumns };
+export { buildColumns, createExpandToggle };

package/dist/components/DataTable/Table.js

@@ -10,9 +10,10 @@ function Table({
   noResults,
   size = "middle",
   skeleton,
-  onIsSelected
+  onIsSelected,
+  expandedContent
 }) {
-  const styleColumn = (meta, elem) => {
+  const styleColumn = React.useCallback((meta, elem) => {
     if (elem === "td" && meta.truncate) {
       return {
         width: meta.width,
@@ -27,8 +28,8 @@ function Table({
       width: meta.width,
       textAlign: meta.align || "left"
     };
-  };
-  const getFixed = (meta) => meta.fixed;
+  }, []);
+  const getFixed = React.useCallback((meta) => meta.fixed, []);
   if (isLoading) {
     if (skeleton) {
       return skeleton;
@@ -63,10 +64,9 @@ function Table({
       header.column.columnDef.header,
       header.getContext()
     )
-  ))))), /* @__PURE__ */ React.createElement("tbody", { className: "[&_tr:last-child]:border-0 [&_tr:last-child_td]:shadow-none" }, table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ React.createElement(
+  ))))), /* @__PURE__ */ React.createElement("tbody", { className: "[&_tr:last-child]:border-0 [&_tr:last-child_td]:shadow-none" }, table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ React.createElement(React.Fragment, { key: row.id }, /* @__PURE__ */ React.createElement(
     "tr",
     {
-      key: row.id,
       "data-state": onIsSelected?.(row) ? "selected" : "",
       className: "[&_td]:hover:bg-grey-100 [&_td]:data-[state=selected]:bg-grey-100"
     },
@@ -80,11 +80,14 @@ function Table({
         ),
         "data-column": cell.column.id,
         "data-fixed": getFixed(cell.column.columnDef.meta),
-        style: styleColumn(cell.column.columnDef.meta, "td")
+        style: styleColumn(
+          cell.column.columnDef.meta,
+          "td"
+        )
       },
       flexRender(cell.column.columnDef.cell, cell.getContext())
     ))
-  )) : /* @__PURE__ */ React.createElement("tr", { className: "border-b-[0.5px] [&_td]:hover:bg-grey-100 [&_td]:data-[state=selected]:bg-grey-100" }, /* @__PURE__ */ React.createElement(
+  ), row.getIsExpanded() && expandedContent && /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("td", { colSpan: columns.length, className: "p-0" }, expandedContent(row))))) : /* @__PURE__ */ React.createElement("tr", { className: "border-b-[0.5px] [&_td]:hover:bg-grey-100 [&_td]:data-[state=selected]:bg-grey-100" }, /* @__PURE__ */ React.createElement(
     "td",
     {
       colSpan: columns.length,