linkedunion-design-kit 1.11.6 → 1.11.8

package/dist/src/components/Table/{Table.js → Table.jsx}

@@ -1,14 +1,3 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 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)
@@ -29,7 +18,6 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "../../lib/utils";
 import { tableSize, tableBodySize, tableFooterSize, collapsibleIconSize, tableVariants, Default_Table_Size, Default_Table_Variant, Default_Table_Section, } from "./index";
@@ -81,52 +69,77 @@ var Table = React.forwardRef(function (_a, ref) {
         window.addEventListener("resize", calculate);
         return function () { return window.removeEventListener("resize", calculate); };
     }, [isResponsive, totalColumns, columnMinWidth]);
-    return (_jsx(TableSizeContext.Provider, { value: size, children: _jsx(TableVariantContext.Provider, { value: variant, children: _jsx(TableResponsiveContext.Provider, { value: {
-                    visibleCount: visibleCount,
-                    totalColumns: totalColumns,
-                    columnMinWidth: columnMinWidth,
-                    isResponsive: isResponsive,
-                    columns: columns,
-                    hasActionColumn: hasActionColumn,
-                }, children: _jsx("div", { className: "relative w-full overflow-auto", children: _jsx("table", __assign({ ref: ref, className: cn("w-full caption-bottom", tableVariants[variant], className), "data-slot": Reset_BS }, props)) }) }) }) }));
+    return (<TableSizeContext.Provider value={size}>
+        <TableVariantContext.Provider value={variant}>
+          <TableResponsiveContext.Provider value={{
+            visibleCount: visibleCount,
+            totalColumns: totalColumns,
+            columnMinWidth: columnMinWidth,
+            isResponsive: isResponsive,
+            columns: columns,
+            hasActionColumn: hasActionColumn,
+        }}>
+            <div className="relative w-full overflow-auto">
+              <table ref={ref} className={cn("w-full caption-bottom", tableVariants[variant], className)} data-slot={Reset_BS} {...props}/>
+            </div>
+          </TableResponsiveContext.Provider>
+        </TableVariantContext.Provider>
+      </TableSizeContext.Provider>);
 });
 Table.displayName = "Table";
 var TableHeader = React.forwardRef(function (_a, ref) {
     var _b;
     var className = _a.className, props = __rest(_a, ["className"]);
     var headerSize = (_b = React.useContext(TableSizeContext)) !== null && _b !== void 0 ? _b : "sm";
-    return (_jsx(TableSectionContext.Provider, { value: "header", children: _jsx("thead", __assign({ ref: ref, className: cn("[&_tr]:border-b bg-gray-100 overflow-hidden", className), "data-table-size": headerSize, "data-slot": Reset_BS }, props)) }));
+    return (<TableSectionContext.Provider value="header">
+      <thead ref={ref} className={cn("[&_tr]:border-b bg-gray-100 overflow-hidden", className)} data-table-size={headerSize} data-slot={Reset_BS} {...props}/>
+    </TableSectionContext.Provider>);
 });
 TableHeader.displayName = "TableHeader";
 var TableBody = React.forwardRef(function (_a, ref) {
     var _b;
     var className = _a.className, props = __rest(_a, ["className"]);
     var contextSize = (_b = React.useContext(TableSizeContext)) !== null && _b !== void 0 ? _b : "sm";
-    return (_jsx(TableSectionContext.Provider, { value: "body", children: _jsx("tbody", __assign({ ref: ref, className: cn(tableBodySize[contextSize], "[&_tr:last-child]:border-0 text-black", className), "data-table-body-size": contextSize, "data-slot": Reset_BS }, props)) }));
+    return (<TableSectionContext.Provider value="body">
+      <tbody ref={ref} className={cn(tableBodySize[contextSize], "[&_tr:last-child]:border-0 text-black", className)} data-table-body-size={contextSize} data-slot={Reset_BS} {...props}/>
+    </TableSectionContext.Provider>);
 });
 TableBody.displayName = "TableBody";
 var TableFooter = React.forwardRef(function (_a, ref) {
     var _b;
     var className = _a.className, props = __rest(_a, ["className"]);
     var footerSize = (_b = React.useContext(TableSizeContext)) !== null && _b !== void 0 ? _b : "sm";
-    return (_jsx(TableSectionContext.Provider, { value: "footer", children: _jsx("tfoot", __assign({ ref: ref, className: cn(tableFooterSize[footerSize], "border-t bg-gray-100 font-medium [&>tr]:last:border-b-0", className), "data-table-footer-size": footerSize, "data-slot": Reset_BS }, props)) }));
+    return (<TableSectionContext.Provider value="footer">
+      <tfoot ref={ref} className={cn(tableFooterSize[footerSize], "border-t bg-gray-100 font-medium [&>tr]:last:border-b-0", className)} data-table-footer-size={footerSize} data-slot={Reset_BS} {...props}/>
+    </TableSectionContext.Provider>);
 });
 TableFooter.displayName = "TableFooter";
 var PaddedCollapsibleContent = function (_a) {
     var hiddenColumns = _a.hiddenColumns, data = _a.data, childrenArray = _a.childrenArray, columns = _a.columns, _b = _a.disableClick, disableClick = _b === void 0 ? false : _b;
-    return (_jsx("div", { className: "border-1 !border-t-0 border-gray-200 rounded-b-2xl -mt-5 overflow-hidden", children: _jsx(Table, { className: "w-full", children: _jsx(TableBody, { children: hiddenColumns.map(function (col) {
-                    var colIndex = columns.findIndex(function (c) { return c.key === col.key; });
-                    var value = colIndex >= 0 && childrenArray[colIndex]
-                        ? childrenArray[colIndex]
-                        : String(data[col.key]);
-                    // Clone the value element and add border-0 class if it's a valid React element
-                    var clonedValue = React.isValidElement(value) && value.type === TableCellPadded
-                        ? React.cloneElement(value, {
-                            className: cn(value.props.className, "w-2/3 border-0 last:border-r-0"),
-                        })
-                        : value;
-                    return (_jsxs(TableRow, { disableClick: disableClick, className: "even:bg-white first:!border-t", children: [_jsx(TableCellPadded, { className: "font-medium border-0 !border-r !border-gray-200", children: col.header }), clonedValue] }, col.key));
-                }) }) }) }));
+    return (<div className="border-1 !border-t-0 border-gray-200 rounded-b-2xl -mt-5 overflow-hidden">
+      <Table className="w-full">
+        <TableBody>
+          {hiddenColumns.map(function (col) {
+            var colIndex = columns.findIndex(function (c) { return c.key === col.key; });
+            var value = colIndex >= 0 && childrenArray[colIndex]
+                ? childrenArray[colIndex]
+                : String(data[col.key]);
+            // Clone the value element and add border-0 class if it's a valid React element
+            var clonedValue = React.isValidElement(value) && value.type === TableCellPadded
+                ? React.cloneElement(value, {
+                    className: cn(value.props.className, "w-2/3 border-0 last:border-r-0"),
+                })
+                : value;
+            return (<TableRow key={col.key} disableClick={disableClick} className="even:bg-white first:!border-t">
+                <TableCellPadded className="font-medium border-0 !border-r !border-gray-200">
+                  {col.header}
+                </TableCellPadded>
+                {clonedValue}
+              </TableRow>);
+        })}
+        </TableBody>
+      </Table>
+    </div>);
 };
 var TableRow = React.forwardRef(function (_a, ref) {
     var className = _a.className, children = _a.children, collapsibleContent = _a.collapsibleContent, showTrigger = _a.showTrigger, data = _a.data, _b = _a.disableClick, disableClick = _b === void 0 ? false : _b, props = __rest(_a, ["className", "children", "collapsibleContent", "showTrigger", "data", "disableClick"]);
@@ -175,15 +188,26 @@ var TableRow = React.forwardRef(function (_a, ref) {
         if (hiddenColumns.length === 0)
             return null;
         if (isPaddedVariant) {
-            return (_jsx(PaddedCollapsibleContent, { hiddenColumns: hiddenColumns, data: data, childrenArray: childrenArray, columns: columns, disableClick: disableClick }));
+            return (<PaddedCollapsibleContent hiddenColumns={hiddenColumns} data={data} childrenArray={childrenArray} columns={columns} disableClick={disableClick}/>);
         }
-        return (_jsx(Table, { className: "w-full", children: _jsx(TableBody, { children: hiddenColumns.map(function (col) {
-                    var colIndex = columns.findIndex(function (c) { return c.key === col.key; });
-                    var value = colIndex >= 0 && childrenArray[colIndex]
-                        ? childrenArray[colIndex]
-                        : String(data[col.key]);
-                    return (_jsxs(TableRow, { disableClick: disableClick, children: [_jsx(TableCell, { className: "font-medium w-1/3 border-r border-gray-200 !border-l-none !border-l-transparent", children: col.header }), _jsx(TableCell, { className: "w-2/3 !border-l-none !border-l-transparent", children: value })] }, col.key));
-                }) }) }));
+        return (<Table className="w-full">
+          <TableBody>
+            {hiddenColumns.map(function (col) {
+                var colIndex = columns.findIndex(function (c) { return c.key === col.key; });
+                var value = colIndex >= 0 && childrenArray[colIndex]
+                    ? childrenArray[colIndex]
+                    : String(data[col.key]);
+                return (<TableRow key={col.key} disableClick={disableClick}>
+                  <TableCell className="font-medium w-1/3 border-r border-gray-200 !border-l-none !border-l-transparent">
+                    {col.header}
+                  </TableCell>
+                  <TableCell className="w-2/3 !border-l-none !border-l-transparent">
+                    {value}
+                  </TableCell>
+                </TableRow>);
+            })}
+          </TableBody>
+        </Table>);
     }, [
         isResponsive,
         data,
@@ -312,16 +336,43 @@ var TableRow = React.forwardRef(function (_a, ref) {
         visibleCount,
     ]);
     if (section === "header") {
-        return (_jsxs("tr", __assign({ ref: ref, className: cn(tableBodySize[bodySize !== null && bodySize !== void 0 ? bodySize : "sm"], "border-b border-gray-200", className), "data-slot": Reset_BS }, props, { children: [isResponsive && hasHiddenColumns && (_jsx("th", { "data-slot": Reset_BS, className: "p-2 align-middle w-12 bg-gray-100" })), headerChildren] })));
+        return (<tr ref={ref} className={cn(tableBodySize[bodySize !== null && bodySize !== void 0 ? bodySize : "sm"], "border-b border-gray-200", className)} data-slot={Reset_BS} {...props}>
+          {isResponsive && hasHiddenColumns && (<th data-slot={Reset_BS} className="p-2 align-middle w-12 bg-gray-100"/>)}
+          {headerChildren}
+        </tr>);
     }
     if (finalCollapsibleContent) {
-        return (_jsx(TableRowStateContext.Provider, { value: { isOpen: isOpen, isPaddedVariant: isPaddedVariant }, children: _jsx(Collapsible, { asChild: true, onOpenChange: setIsOpen, children: _jsxs(_Fragment, { children: [_jsxs("tr", __assign({ ref: ref, className: getTableRowClassNames(), "data-slot": Reset_BS }, props, { children: [isResponsive && (_jsx("td", { "data-slot": Reset_BS, className: cn("py-2 px-3 align-middle w-12", isPaddedVariant
-                                        ? cn("border-y border-gray-200", isOpen
-                                            ? "border-b-0 first:border-l last:border-r first:rounded-tl-2xl last:rounded-tr-2xl"
-                                            : "first:border first:border-r-0 last:border last:border-l-0 first:rounded-l-2xl last:rounded-r-2xl")
-                                        : "first-of-type:border-l-2 first-of-type:border-l-transparent group-hover:first-of-type:border-l-blue-600 group-data-[state=selected]:first-of-type:border-l-blue-600"), children: finalShowTrigger && (_jsx(CollapsibleTrigger, { asChild: true, children: _jsx(LUIcon, { icon: isOpen ? "angle-up" : "angle-right", size: collapsibleIconSize[bodySize], color: "blue" }) })) })), expandedChildren] })), _jsx(CollapsibleContent, { asChild: true, children: _jsx("tr", { "data-slot": Reset_BS, className: cn(!isPaddedVariant && "bg-gray-50"), children: _jsx("td", { "data-slot": Reset_BS, colSpan: isResponsive ? totalColumns + 1 : slicedChildren.length, className: "p-0", children: finalCollapsibleContent }) }) })] }) }) }));
+        return (<TableRowStateContext.Provider value={{ isOpen: isOpen, isPaddedVariant: isPaddedVariant }}>
+          <Collapsible asChild onOpenChange={setIsOpen}>
+            <>
+              <tr ref={ref} className={getTableRowClassNames()} data-slot={Reset_BS} {...props}>
+                {isResponsive && (<td data-slot={Reset_BS} className={cn("py-2 px-3 align-middle w-12", isPaddedVariant
+                    ? cn("border-y border-gray-200", isOpen
+                        ? "border-b-0 first:border-l last:border-r first:rounded-tl-2xl last:rounded-tr-2xl"
+                        : "first:border first:border-r-0 last:border last:border-l-0 first:rounded-l-2xl last:rounded-r-2xl")
+                    : "first-of-type:border-l-2 first-of-type:border-l-transparent group-hover:first-of-type:border-l-blue-600 group-data-[state=selected]:first-of-type:border-l-blue-600")}>
+                    {finalShowTrigger && (<CollapsibleTrigger asChild>
+                        <LUIcon icon={isOpen ? "angle-up" : "angle-right"} size={collapsibleIconSize[bodySize]} color="blue"/>
+                      </CollapsibleTrigger>)}
+                  </td>)}
+                {expandedChildren}
+              </tr>
+
+              <CollapsibleContent asChild>
+                <tr data-slot={Reset_BS} className={cn(!isPaddedVariant && "bg-gray-50")}>
+                  <td data-slot={Reset_BS} colSpan={isResponsive ? totalColumns + 1 : slicedChildren.length} className="p-0">
+                    {finalCollapsibleContent}
+                  </td>
+                </tr>
+              </CollapsibleContent>
+            </>
+          </Collapsible>
+        </TableRowStateContext.Provider>);
     }
-    return (_jsxs("tr", __assign({ "data-slot": Reset_BS, ref: ref, className: getTableRowClassNames() }, props, { children: [isResponsive && hasHiddenColumns && section === "footer" && (_jsx("td", { "data-slot": Reset_BS, className: "py-2 px-3 align-middle w-12" })), slicedChildren] })));
+    return (<tr data-slot={Reset_BS} ref={ref} className={getTableRowClassNames()} {...props}>
+        {isResponsive && hasHiddenColumns && section === "footer" && (<td data-slot={Reset_BS} className="py-2 px-3 align-middle w-12"/>)}
+        {slicedChildren}
+      </tr>);
 });
 TableRow.displayName = "TableRow";
 var TableHead = React.forwardRef(function (_a, ref) {
@@ -329,33 +380,35 @@ var TableHead = React.forwardRef(function (_a, ref) {
     var className = _a.className, size = _a.size, children = _a.children, props = __rest(_a, ["className", "size", "children"]);
     var contextSize = React.useContext(TableSizeContext);
     var headSize = (_b = size !== null && size !== void 0 ? size : contextSize) !== null && _b !== void 0 ? _b : "sm";
-    return (_jsx("th", __assign({ ref: ref, "data-slot": Reset_BS, className: cn(tableSize[headSize], "py-0 px-3 text-left align-middle font-semibold text-gray-950 bg-gray-100 first:rounded-tl-lg last:rounded-tr-lg [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className) }, props, { children: children })));
+    return (<th ref={ref} data-slot={Reset_BS} className={cn(tableSize[headSize], "py-0 px-3 text-left align-middle font-semibold text-gray-950 bg-gray-100 first:rounded-tl-lg last:rounded-tr-lg [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className)} {...props}>
+        {children}
+      </th>);
 });
 TableHead.displayName = "TableHead";
 var TableCell = React.forwardRef(function (_a, ref) {
     var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsx("td", __assign({ ref: ref, className: cn(!useTableResponsive().isResponsive
+    return (<td ref={ref} className={cn(!useTableResponsive().isResponsive
             ? ""
-            : "group-hover:first-of-type:border-l-blue-600 group-data-[state=selected]:first-of-type:border-l-blue-600", "py-2 px-3 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] first-of-type:border-l-2 first-of-type:border-l-transparent", className), "data-slot": Reset_BS }, props)));
+            : "group-hover:first-of-type:border-l-blue-600 group-data-[state=selected]:first-of-type:border-l-blue-600", "py-2 px-3 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] first-of-type:border-l-2 first-of-type:border-l-transparent", className)} data-slot={Reset_BS} {...props}/>);
 });
 TableCell.displayName = "TableCell";
 var TableCellPadded = React.forwardRef(function (_a, ref) {
     var className = _a.className, props = __rest(_a, ["className"]);
     var rowState = React.useContext(TableRowStateContext);
     var isOpen = rowState.isOpen;
-    return (_jsx("td", __assign({ ref: ref, "data-slot": Reset_BS, className: cn("py-2 px-3 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] border-y border-gray-200", isOpen
+    return (<td ref={ref} data-slot={Reset_BS} className={cn("py-2 px-3 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] border-y border-gray-200", isOpen
             ? "border-b-0 last:border-r first:rounded-tl-2xl last:rounded-tr-2xl"
-            : "first:border first:border-r-0 last:border last:border-l-0 first:rounded-l-2xl last:rounded-r-2xl", className) }, props)));
+            : "first:border first:border-r-0 last:border last:border-l-0 first:rounded-l-2xl last:rounded-r-2xl", className)} {...props}/>);
 });
 TableCellPadded.displayName = "TableCellPadded";
 var TableCaption = React.forwardRef(function (_a, ref) {
     var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsx("caption", __assign({ ref: ref, "data-slot": Reset_BS, className: cn("mt-4 text-sm text-muted-foreground", className) }, props)));
+    return (<caption ref={ref} data-slot={Reset_BS} className={cn("mt-4 text-sm text-muted-foreground", className)} {...props}/>);
 });
 TableCaption.displayName = "TableCaption";
 var TableButton = React.forwardRef(function (_a, ref) {
     var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsx("div", __assign({ ref: ref, "data-slot": Reset_BS, className: cn("flex gap-2 justify-center", className) }, props)));
+    return (<div ref={ref} data-slot={Reset_BS} className={cn("flex gap-2 justify-center", className)} {...props}/>);
 });
 TableButton.displayName = "TableButton";
 var useTableResponsive = function () {

package/dist/src/components/Table/Table.stories.d.ts

@@ -10,14 +10,14 @@ export declare const Default: import("@storybook/core/csf").AnnotatedStoryFn<imp
     hasActionColumn?: boolean;
     variant?: import("./types").TableVariant;
 } & React.RefAttributes<HTMLTableElement>>;
-export declare const TableSizes: () => import("react/jsx-runtime").JSX.Element;
-export declare const DisabledRowClickTable: () => import("react/jsx-runtime").JSX.Element;
-export declare const CheckBoxInSmallTable: () => import("react/jsx-runtime").JSX.Element;
-export declare const CheckBoxInMediumTable: () => import("react/jsx-runtime").JSX.Element;
-export declare const CheckBoxInLargeTable: () => import("react/jsx-runtime").JSX.Element;
-export declare const SortingTable: () => import("react/jsx-runtime").JSX.Element;
+export declare const TableSizes: () => React.JSX.Element;
+export declare const DisabledRowClickTable: () => React.JSX.Element;
+export declare const CheckBoxInSmallTable: () => React.JSX.Element;
+export declare const CheckBoxInMediumTable: () => React.JSX.Element;
+export declare const CheckBoxInLargeTable: () => React.JSX.Element;
+export declare const SortingTable: () => React.JSX.Element;
 export declare const BadgesInTable: {
-    (): import("react/jsx-runtime").JSX.Element;
+    (): React.JSX.Element;
     parameters: {
         docs: {
             description: {
@@ -27,7 +27,7 @@ export declare const BadgesInTable: {
     };
 };
 export declare const DropdownInTable: {
-    (): import("react/jsx-runtime").JSX.Element;
+    (): React.JSX.Element;
     parameters: {
         docs: {
             description: {
@@ -37,7 +37,7 @@ export declare const DropdownInTable: {
     };
 };
 export declare const ActionButtonInTable: {
-    (): import("react/jsx-runtime").JSX.Element;
+    (): React.JSX.Element;
     parameters: {
         docs: {
             description: {
@@ -46,7 +46,7 @@ export declare const ActionButtonInTable: {
         };
     };
 };
-export declare const AvatarInTable: () => import("react/jsx-runtime").JSX.Element;
-export declare const ResponsiveTable: () => import("react/jsx-runtime").JSX.Element;
-export declare const ResponsiveTableWithBadgeAndButton: () => import("react/jsx-runtime").JSX.Element;
-export declare const PaddedTableWithFooter: () => import("react/jsx-runtime").JSX.Element;
+export declare const AvatarInTable: () => React.JSX.Element;
+export declare const ResponsiveTable: () => React.JSX.Element;
+export declare const ResponsiveTableWithBadgeAndButton: () => React.JSX.Element;
+export declare const PaddedTableWithFooter: () => React.JSX.Element;