ar-design 0.4.15 → 0.4.16

package/dist/assets/css/components/form/upload/{list.css → list-and-gird.css}

@@ -11,23 +11,40 @@
     width: max-content !important;
   }
 
-  > ul.list {
+  > ul {
     display: flex;
     flex-wrap: wrap;
     gap: 0.75rem;
 
     &.list {
       flex-direction: column;
-    }
 
-    &.column {
-      > li {
-        width: 100%;
+      &.row,
+      &.column {
+        margin: 0;
+
+        > li {
+          width: 100%;
+        }
       }
     }
 
     &.grid {
       flex-direction: row;
+
+      &.row {
+        margin: 0;
+
+        > li {
+          max-width: calc(100% / 4);
+        }
+      }
+
+      &.column {
+        > li {
+          width: 100%;
+        }
+      }
     }
 
     > li {

package/dist/assets/css/components/form/upload/styles.css

@@ -1,3 +1,6 @@
+@import url("./list-and-gird.css");
+@import url("./dropzone.css");
+
 .ar-upload {
   position: relative;
 
@@ -210,6 +213,3 @@
     }
   }
 }
-
-@import url("./list.css");
-@import url("./dropzone.css");

package/dist/components/data-display/table/FilterPopup.d.ts

@@ -1,16 +1,20 @@
 import React, { Dispatch, MutableRefObject, ReactNode, SetStateAction } from "react";
 interface IProps {
-    children: ReactNode;
-    open: {
-        get: boolean;
-        set: Dispatch<SetStateAction<boolean>>;
+    refs: {
+        tableContent: MutableRefObject<HTMLDivElement | null>;
+        buttons: MutableRefObject<(HTMLSpanElement | null)[]>;
+    };
+    states: {
+        open: {
+            get: boolean;
+            set: Dispatch<SetStateAction<boolean>>;
+        };
     };
-    tableContent: MutableRefObject<HTMLDivElement | null>;
+    children: ReactNode;
     coordinate: {
         x: number;
         y: number;
     };
-    buttons: MutableRefObject<(HTMLSpanElement | null)[]>;
 }
-declare const FilterPopup: ({ children, open, tableContent, coordinate, buttons }: IProps) => false | React.ReactPortal;
+declare const FilterPopup: ({ children, refs, states, coordinate }: IProps) => false | React.ReactPortal;
 export default FilterPopup;

package/dist/components/data-display/table/FilterPopup.js

@@ -1,58 +1,58 @@
 "use client";
 import React, { useEffect, useRef } from "react";
 import ReactDOM from "react-dom";
-const FilterPopup = ({ children, open, tableContent, coordinate, buttons }) => {
+const FilterPopup = ({ children, refs, states, coordinate }) => {
     // refs
     const _arTableFilterPopup = useRef(null);
     // methods
     const handleClickOutSide = (event) => {
         const target = event.target;
         const clickedInsidePopup = _arTableFilterPopup.current && _arTableFilterPopup.current.contains(target);
-        const isOneOfButtons = buttons.current.some((button) => button === target || button?.contains(target));
+        const isOneOfButtons = refs.buttons.current.some((button) => button === target || button?.contains(target));
         if (!clickedInsidePopup && !isOneOfButtons)
             handleClose();
     };
     const handleKeys = (event) => {
         const key = event.key;
         if (key === "Escape")
-            open.set(false);
+            states.open.set(false);
     };
-    const handleOpen = () => open.set(true);
-    const handleClose = () => open.set(false);
+    const handleOpen = () => states.open.set(true);
+    const handleClose = () => states.open.set(false);
     // useEffects
     useEffect(() => {
-        buttons.current.map((button) => {
+        refs.buttons.current.map((button) => {
             if (button)
                 button.addEventListener("click", handleOpen);
         });
         return () => {
-            buttons.current.map((button) => {
+            refs.buttons.current.map((button) => {
                 if (button)
                     button.removeEventListener("click", handleOpen);
             });
         };
-    }, [buttons]);
+    }, [refs.buttons]);
     useEffect(() => {
-        const firstFilterButton = buttons.current[0];
+        const firstFilterButton = refs.buttons.current[0];
         if (firstFilterButton) {
             const rect = firstFilterButton.getBoundingClientRect();
             coordinate.x = rect.left;
             coordinate.y = rect.top + rect.height;
         }
-        if (tableContent.current) {
-            tableContent.current.addEventListener("scroll", handleClose);
+        if (refs.tableContent.current) {
+            refs.tableContent.current.addEventListener("scroll", handleClose);
         }
         document.addEventListener("click", handleClickOutSide);
         document.addEventListener("keydown", handleKeys);
         return () => {
             document.removeEventListener("click", handleClickOutSide);
             document.removeEventListener("keydown", handleKeys);
-            if (tableContent.current) {
-                tableContent.current.removeEventListener("scroll", handleClose);
+            if (refs.tableContent.current) {
+                refs.tableContent.current.removeEventListener("scroll", handleClose);
             }
         };
     }, []);
-    return (open.get &&
+    return (states.open.get &&
         ReactDOM.createPortal(React.createElement("div", { ref: _arTableFilterPopup, className: "ar-table-filter-popup", style: { top: coordinate.y, left: coordinate.x } }, children), document.body));
 };
 export default FilterPopup;

package/dist/components/data-display/table/IProps.d.ts

@@ -7,6 +7,12 @@ export type FilterValue = {
     value: string | number | boolean;
     operator: FilterOperator;
 };
+export type Actions = {
+    import?: ImportActionType;
+    export?: ExportActionType;
+    create?: CreateActionType;
+    delete?: DeleteActionType;
+};
 export type Sort<T> = {
     key: keyof T;
     direction: "asc" | "desc" | null;
@@ -16,6 +22,7 @@ export type SearchedParam = {
 };
 export type Config<T> = {
     isServerSide?: boolean;
+    isProperties?: boolean;
     isSearchable?: boolean;
     scroll?: {
         maxHeight: number;
@@ -68,12 +75,7 @@ interface IProps<T> extends IChildren {
     description?: string;
     data: T[];
     columns: TableColumnType<T>[];
-    actions?: {
-        import?: ImportActionType;
-        export?: ExportActionType;
-        create?: CreateActionType;
-        delete?: DeleteActionType;
-    };
+    actions?: Actions;
     rowBackgroundColor?: (item: T) => string;
     selections?: (selectionItems: T[]) => void;
     previousSelections?: T[];

package/dist/components/data-display/table/PropertiesPopup.d.ts

@@ -2,22 +2,26 @@ import React, { Dispatch, MutableRefObject, SetStateAction } from "react";
 import { TableColumnType } from "../../../libs/types";
 import { Sort } from "./IProps";
 interface IProps<T> {
-    open: {
-        get: boolean;
-        set: Dispatch<SetStateAction<boolean>>;
+    refs: {
+        tableContent: MutableRefObject<HTMLDivElement | null>;
+        buttons: MutableRefObject<(HTMLSpanElement | null)[]>;
     };
-    sort: {
-        get: Sort<T>[];
-        set: Dispatch<SetStateAction<Sort<T>[]>>;
-        currentColumn: TableColumnType<T> | null;
+    states: {
+        open: {
+            get: boolean;
+            set: Dispatch<SetStateAction<boolean>>;
+        };
+        sort: {
+            get: Sort<T>[];
+            set: Dispatch<SetStateAction<Sort<T>[]>>;
+            currentColumn: TableColumnType<T> | null;
+        };
     };
-    tableContent: MutableRefObject<HTMLDivElement | null>;
     coordinate: {
         x: number;
         y: number;
     };
-    buttons: MutableRefObject<(HTMLSpanElement | null)[]>;
 }
-declare function PropertiesPopup<T extends object>({ open, sort, tableContent, coordinate, buttons }: IProps<T>): false | React.ReactPortal;
+declare function PropertiesPopup<T extends object>({ refs, states, coordinate }: IProps<T>): false | React.ReactPortal;
 declare const _default: typeof PropertiesPopup;
 export default _default;

package/dist/components/data-display/table/PropertiesPopup.js

@@ -3,7 +3,7 @@ import React, { memo, useCallback, useEffect, useMemo, useRef, } from "react";
 import ReactDOM from "react-dom";
 import { ARIcon } from "../../icons";
 import { ExtractKey } from "./Helpers";
-function PropertiesPopup({ open, sort, tableContent, coordinate, buttons }) {
+function PropertiesPopup({ refs, states, coordinate }) {
     // refs
     const _arTablePropertiesPopup = useRef(null);
     // methods
@@ -11,7 +11,7 @@ function PropertiesPopup({ open, sort, tableContent, coordinate, buttons }) {
         (event) => {
             const target = event.target;
             const clickedInsidePopup = _arTablePropertiesPopup.current && _arTablePropertiesPopup.current.contains(target);
-            const isOneOfButtons = buttons.current.some((button) => button === target || button?.contains(target));
+            const isOneOfButtons = refs.buttons.current.some((button) => button === target || button?.contains(target));
             if (!clickedInsidePopup && !isOneOfButtons)
                 handleClose();
         };
@@ -20,7 +20,7 @@ function PropertiesPopup({ open, sort, tableContent, coordinate, buttons }) {
         return (columnKey, direction) => {
             if (!columnKey)
                 return;
-            sort.set((prev) => {
+            states.sort.set((prev) => {
                 const index = prev.findIndex((s) => s.key === columnKey);
                 if (index !== -1)
                     return [{ key: columnKey, direction }];
@@ -31,46 +31,46 @@ function PropertiesPopup({ open, sort, tableContent, coordinate, buttons }) {
     const handleKeys = (event) => {
         const key = event.key;
         if (key === "Escape")
-            open.set(false);
+            states.open.set(false);
     };
-    const handleOpen = () => open.set(true);
-    const handleClose = () => open.set(false);
+    const handleOpen = () => states.open.set(true);
+    const handleClose = () => states.open.set(false);
     // useEffects
     useEffect(() => {
-        buttons.current.map((button) => {
+        refs.buttons.current.map((button) => {
             if (button)
                 button.addEventListener("click", handleOpen);
         });
         return () => {
-            buttons.current.map((button) => {
+            refs.buttons.current.map((button) => {
                 if (button)
                     button.removeEventListener("click", handleOpen);
             });
         };
-    }, [buttons]);
+    }, [refs.buttons]);
     useEffect(() => {
-        const firstFilterButton = buttons.current[0];
+        const firstFilterButton = refs.buttons.current[0];
         if (firstFilterButton) {
             const rect = firstFilterButton.getBoundingClientRect();
             coordinate.x = rect.left;
             coordinate.y = rect.top + rect.height;
         }
-        if (tableContent.current) {
-            tableContent.current.addEventListener("scroll", handleClose);
+        if (refs.tableContent.current) {
+            refs.tableContent.current.addEventListener("scroll", handleClose);
         }
         document.addEventListener("click", handleClickOutSide);
         document.addEventListener("keydown", handleKeys);
         return () => {
             document.removeEventListener("click", handleClickOutSide);
             document.removeEventListener("keydown", handleKeys);
-            if (tableContent.current) {
-                tableContent.current.removeEventListener("scroll", handleClose);
+            if (refs.tableContent.current) {
+                refs.tableContent.current.removeEventListener("scroll", handleClose);
             }
         };
     }, []);
-    const currentKey = ExtractKey(sort.currentColumn?.key);
-    const currentSort = sort.get?.find((s) => s.key === currentKey);
-    return (open.get &&
+    const currentKey = ExtractKey(states.sort.currentColumn?.key);
+    const currentSort = states.sort.get?.find((s) => s.key === currentKey);
+    return (states.open.get &&
         ReactDOM.createPortal(React.createElement("div", { ref: _arTablePropertiesPopup, className: "ar-table-properties-popup", style: { top: coordinate.y, left: coordinate.x } },
             React.createElement("ul", null,
                 currentSort && (!currentSort.direction || currentSort.direction === "desc") && (React.createElement("li", { onClick: () => handleSort(currentKey, "asc") },
@@ -82,8 +82,8 @@ function PropertiesPopup({ open, sort, tableContent, coordinate, buttons }) {
                         React.createElement(ARIcon, { icon: "ArrowDown" })),
                     React.createElement("span", null, "Sort Descending"))),
                 currentSort && currentSort.direction && (React.createElement("li", { onClick: () => {
-                        sort.set((prev) => prev.filter((s) => s.key !== currentKey));
-                        open.set(false);
+                        states.sort.set((prev) => prev.filter((s) => s.key !== currentKey));
+                        states.open.set(false);
                     } },
                     React.createElement("span", null,
                         React.createElement(ARIcon, { icon: "ChevronExpand" })),

package/dist/components/data-display/table/THeadCell.d.ts

@@ -1,22 +1,31 @@
 import React, { Dispatch, SetStateAction } from "react";
 import { TableColumnType } from "../../../libs/types";
-import { Sort } from "./IProps";
-declare const MemoizedTHeadCell: <T>({ open, sort, columns, propertiesButton, setSortCurrentColumn, setPropertiesButtonCoordinate, }: {
-    open: {
-        get: boolean;
-        set: Dispatch<SetStateAction<boolean>>;
+import { Config, Sort } from "./IProps";
+declare const MemoizedTHeadCell: <T>({ refs, states, columns, config, }: {
+    refs: {
+        propertiesButton: React.MutableRefObject<(HTMLSpanElement | null)[]>;
     };
-    sort: {
-        get: Sort<T>[];
-        set: Dispatch<SetStateAction<Sort<T>[]>>;
+    states: {
+        open: {
+            get: boolean;
+            set: Dispatch<SetStateAction<boolean>>;
+        };
+        sort: {
+            get: Sort<T>[];
+            set: Dispatch<SetStateAction<Sort<T>[]>>;
+        };
+        sortCurrentColumn: {
+            set: React.Dispatch<React.SetStateAction<TableColumnType<T> | null>>;
+        };
+        propertiesButtonCoordinate: {
+            set: React.Dispatch<React.SetStateAction<{
+                x: number;
+                y: number;
+            }>>;
+        };
     };
     columns: TableColumnType<T>[];
-    propertiesButton: React.MutableRefObject<(HTMLSpanElement | null)[]>;
-    setSortCurrentColumn: React.Dispatch<React.SetStateAction<TableColumnType<T> | null>>;
-    setPropertiesButtonCoordinate: React.Dispatch<React.SetStateAction<{
-        x: number;
-        y: number;
-    }>>;
+    config: Config<T>;
 }) => React.JSX.Element;
 declare const THeadCell: typeof MemoizedTHeadCell;
 export default THeadCell;

package/dist/components/data-display/table/THeadCell.js

@@ -2,10 +2,10 @@ import React, { memo } from "react";
 import Button from "../../form/button";
 import { ARIcon } from "../../icons";
 import { ExtractKey } from "./Helpers";
-const MemoizedTHeadCell = function ({ open, sort, columns, propertiesButton, setSortCurrentColumn, setPropertiesButtonCoordinate, }) {
+const MemoizedTHeadCell = function ({ refs, states, columns, config, }) {
     return (React.createElement(React.Fragment, null, columns.map((c, cIndex) => {
         const { isProperties = true } = c.config ?? {};
-        const _direction = sort.get.find((s) => s.key === c.key)?.direction;
+        const _direction = states.sort.get.find((s) => s.key === c.key)?.direction;
         let _className = [];
         if (c.config?.sticky)
             _className.push(`sticky-${c.config.sticky}`);
@@ -30,25 +30,25 @@ const MemoizedTHeadCell = function ({ open, sort, columns, propertiesButton, set
                         _direction === "asc" && React.createElement(ARIcon, { icon: "ArrowUp" }),
                         _direction === "desc" && React.createElement(ARIcon, { icon: "ArrowDown" })),
                     c.title),
-                isProperties && (React.createElement("span", { ref: (element) => (propertiesButton.current[cIndex] = element), className: "properties-field", onClick: (event) => {
+                config.isProperties && isProperties && (React.createElement("span", { ref: (element) => (refs.propertiesButton.current[cIndex] = element), className: "properties-field", onClick: (event) => {
                         event.stopPropagation();
                         const rect = event.currentTarget.getBoundingClientRect();
                         const screenCenterX = window.innerWidth / 2;
                         const coordinateX = rect.x > screenCenterX ? rect.x + rect.width - 225 : rect.x;
                         const coordinateY = rect.y + rect.height;
-                        setSortCurrentColumn(c);
-                        setPropertiesButtonCoordinate({
+                        states.sortCurrentColumn.set(c);
+                        states.propertiesButtonCoordinate.set({
                             x: coordinateX,
                             y: coordinateY,
                         });
-                        sort.set((prev) => {
+                        states.sort.set((prev) => {
                             const key = ExtractKey(c.key);
                             const index = prev.findIndex((s) => s.key === key);
                             if (index === -1)
                                 return [...prev, { key, direction: null }];
                             return prev;
                         });
-                        open.set(true);
+                        states.open.set(true);
                     } },
                     React.createElement(Button, { variant: "borderless", icon: {
                             element: React.createElement(ARIcon, { size: 16, icon: "ThreeDotsVertical", fill: "var(--dark)", strokeWidth: 0 }),

package/dist/components/data-display/table/{Editable.d.ts → body/Editable.d.ts}

@@ -1,5 +1,5 @@
 import React from "react";
-import { Errors, TableColumnType } from "../../../libs/types";
+import { Errors, TableColumnType } from "../../../../libs/types";
 interface IProps<T> {
     c: TableColumnType<T>;
     item: T;

package/dist/components/data-display/table/{Editable.js → body/Editable.js}

@@ -1,8 +1,8 @@
 "use client";
 import React, { useEffect, useState } from "react";
-import Input from "../../form/input";
-import DatePicker from "../../form/date-picker";
-import Select from "../../form/select";
+import Input from "../../../form/input";
+import DatePicker from "../../../form/date-picker";
+import Select from "../../../form/select";
 const Editable = function ({ c, item, trackByValue, onEditable, validation }) {
     // variables
     const key = c.key;

package/dist/components/data-display/table/body/TBody.d.ts

@@ -0,0 +1,28 @@
+import React from "react";
+import { TableColumnType } from "../../../../libs/types";
+import { Config } from "../IProps";
+interface IProps<T> {
+    data: T[];
+    columns: TableColumnType<T>[];
+    states: {
+        showSubitems: {
+            get: {
+                [key: string]: boolean;
+            };
+            set: React.Dispatch<React.SetStateAction<{
+                [key: string]: boolean;
+            }>>;
+        };
+    };
+    methods: {
+        trackBy?: (item: T) => string;
+        selections?: (selectionItems: T[]) => void;
+        onDnD?: (item: T[]) => void;
+        onEditable?: (item: T, trackByValue: string) => void;
+        rowBackgroundColor?: (item: T) => string;
+    };
+    config: Config<T>;
+}
+declare function TBody<T extends object>({ data, columns, methods, states, config }: IProps<T>): React.JSX.Element | React.JSX.Element[];
+declare const _default: typeof TBody;
+export default _default;

package/dist/components/data-display/table/body/TBody.js

@@ -0,0 +1,143 @@
+import React, { Fragment, memo, useEffect, useRef, useState } from "react";
+import { ARIcon } from "../../../icons";
+import Checkbox from "../../../form/checkbox";
+import Editable from "./Editable";
+function TBody({ data, columns, methods, states, config }) {
+    // refs
+    const _tBodyTR = useRef([]);
+    const _checkboxItems = useRef([]);
+    // refs -> Selection
+    const _selectionItems = useRef([]);
+    // states
+    const [_, setTriggerForRender] = useState(false);
+    const [rowHeights, setRowHeights] = useState([]);
+    // variables
+    const _subrowSelector = config.subrow?.selector ?? "subitems";
+    const _subrowButton = config.subrow?.button ?? true;
+    // methods
+    const renderRow = (item, index, deph) => {
+        const isHasSubitems = _subrowSelector in item;
+        return (React.createElement(Fragment, { key: `row-${index}` },
+            React.createElement("tr", { ref: (element) => {
+                    _tBodyTR.current[index] = element;
+                }, ...(methods.rowBackgroundColor ? { style: { backgroundColor: methods.rowBackgroundColor(item) } } : {}), ...(methods.onDnD && data.length > 1 ? { className: "draggable", draggable: true } : {}) },
+                methods.selections && (React.createElement("td", { className: "flex justify-content-center sticky-left", "data-sticky-position": "left" },
+                    React.createElement(Checkbox, { key: Date.now(), ref: (element) => (_checkboxItems.current[index] = element), variant: "filled", color: "green", checked: _selectionItems.current.some((selectionItem) => methods.trackBy?.(selectionItem) === methods.trackBy?.(item)), onChange: (event) => {
+                            const key = methods.trackBy?.(item);
+                            if (event.target.checked) {
+                                if (!_selectionItems.current.some((_item) => methods.trackBy?.(_item) === key)) {
+                                    _selectionItems.current = [..._selectionItems.current, item];
+                                }
+                            }
+                            else {
+                                _selectionItems.current = _selectionItems.current.filter((_item) => methods.trackBy?.(_item) !== key);
+                            }
+                            methods.selections?.(_selectionItems.current);
+                            setTriggerForRender((prev) => !prev);
+                        } }))),
+                isHasSubitems && _subrowButton ? (React.createElement("td", null, item[_subrowSelector] && (React.createElement("div", { className: "subitem-open-button-wrapper" },
+                    React.createElement("span", { className: `subitem-open-button ${(states.showSubitems.get[index] && "opened") ?? ""}`, onClick: () => {
+                            states.showSubitems.set((prev) => ({
+                                ...prev,
+                                [`${index}`]: !prev[`${index}`],
+                            }));
+                        } }))))) : isHasSubitems && _subrowButton ? (React.createElement("td", { style: { width: 0, minWidth: 0 } })) : null,
+                columns.map((column, cIndex) => {
+                    return renderCell({
+                        item,
+                        column,
+                        index,
+                        cIndex,
+                        depth: deph * (config.isTreeView ? 1.75 : 0),
+                        level: 0,
+                        height: rowHeights[index] ?? 0,
+                    });
+                })),
+            states.showSubitems.get[index] && item[_subrowSelector] && (React.createElement(SubitemList, { items: item[_subrowSelector], columns: columns, index: index, depth: 1.5 }))));
+    };
+    const renderCell = ({ item, column, index, cIndex, depth, level, height = 0, isSubrows = false }) => {
+        let render;
+        // `column.key` bir string ise
+        if (typeof column.key !== "object")
+            render = column.render ? column.render(item) : item[column.key];
+        // `column.key` bir nesne ise ve `nestedKey` mevcutsa
+        else if (typeof column.key === "object") {
+            const _item = item[column.key.field];
+            if (_item && typeof _item === "object") {
+                render = column.render ? column.render(item) : _item[column.key.nestedKey];
+            }
+        }
+        else
+            render = null;
+        const _className = [];
+        if (column.config?.alignContent)
+            _className.push(`align-content-${column.config.alignContent}`);
+        if (column.config?.sticky)
+            _className.push(`sticky-${column.config.sticky}`);
+        if (column.config?.textWrap)
+            _className.push(`text-${column.config.textWrap}`);
+        return (React.createElement("td", { key: `cell-${index}-${cIndex}`, className: _className.join(" "), style: {
+                ...(column.config?.sticky ? { height } : {}),
+                ...(column.config?.width
+                    ? { width: column.config.width, minWidth: column.config.width, maxWidth: column.config.width }
+                    : {}),
+            }, "data-sticky-position": column.config?.sticky },
+            React.createElement("div", { style: { paddingLeft: `${depth == 0 ? 1 : depth}rem` }, className: "table-cell" },
+                config.isTreeView && cIndex === 0 && (React.createElement(React.Fragment, null,
+                    isSubrows &&
+                        Array.from({ length: level }).map((_, i) => {
+                            if (i > 0)
+                                i *= 1.655;
+                            return (React.createElement("div", { key: `last-before-${i}`, style: { left: `${i + 0.65}rem` }, className: "last-before" }));
+                        }),
+                    React.createElement("div", { className: "before" }))),
+                React.isValidElement(render) ? (render) : column.editable && methods.onEditable ? (React.createElement(Editable, { c: column, item: item, trackByValue: methods.trackBy?.(item) ?? "", onEditable: methods.onEditable, validation: config.validation })) : (render),
+                config.isTreeView && cIndex === 0 && (React.createElement("div", { className: "after" },
+                    React.createElement("div", { className: "circle" }))))));
+    };
+    const SubitemList = ({ items, columns, index, depth, level = 1 }) => {
+        if (config.subrow?.render) {
+            return (React.createElement("tr", { className: `subrow-item ${_subrowButton ? "type-b" : "type-a"}`, "data-level": level },
+                _subrowButton && React.createElement("td", { style: { ...config.subrow.render.styles, width: 0, minWidth: 0 } }),
+                React.createElement("td", { colSpan: columns.length || 1, style: { ...config.subrow.render.styles, padding: "7.5px 7.5px 7.5px 0" } }, config.subrow?.render.element(items) ?? React.createElement(React.Fragment, null))));
+        }
+        return items.map((subitem, subindex) => {
+            const _subitem = subitem[_subrowSelector];
+            const isHasSubitems = _subrowSelector in subitem;
+            return (React.createElement(Fragment, { key: `subitem-${index}-${subindex}-${Math.random()}` },
+                React.createElement("tr", { className: `subrow-item ${_subrowButton ? "type-b" : "type-a"}`, "data-level": level },
+                    isHasSubitems && _subrowButton ? (React.createElement("td", null,
+                        React.createElement("div", { className: "subitem-open-button-wrapper" },
+                            React.createElement("span", { className: `${(states.showSubitems.get[`${index}.${subindex}`] && "opened") ?? ""} ${!_subitem && "passive"}`, onClick: () => {
+                                    if (!_subitem)
+                                        return;
+                                    states.showSubitems.set((prev) => ({
+                                        ...prev,
+                                        [`${index}.${subindex}`]: !prev[`${index}.${subindex}`],
+                                    }));
+                                } })))) : !isHasSubitems && _subrowButton ? (React.createElement("td", { style: { width: 0, minWidth: 0 } })) : null,
+                    !config.subrow?.render ? (columns.map((column, cIndex) => renderCell({
+                        item: subitem,
+                        column,
+                        index,
+                        cIndex,
+                        depth: depth * (config.isTreeView ? 2.25 : 1.75),
+                        level,
+                        height: 0,
+                        isSubrows: true,
+                    }))) : (React.createElement("td", { colSpan: columns.length || 1 }, config.subrow?.render.element(items) ?? React.createElement(React.Fragment, null)))),
+                states.showSubitems.get[`${index}.${subindex}`] && _subitem && (React.createElement(SubitemList, { items: _subitem, columns: columns, index: subindex, depth: depth + 0.75, level: level + 1 }))));
+        });
+    };
+    // useEffects
+    useEffect(() => {
+        const heights = _tBodyTR.current.map((el) => (el ? el.getBoundingClientRect().height : 0));
+        setRowHeights(heights);
+    }, [data]);
+    return data.length > 0 ? (data.map((item, index) => React.createElement(React.Fragment, { key: index }, renderRow(item, index, 1)))) : (React.createElement("tr", null,
+        React.createElement("td", { colSpan: columns.length || 1 },
+            React.createElement("div", { className: "no-item" },
+                React.createElement(ARIcon, { icon: "Inbox-Fill", fill: "var(--gray-300)", size: 64, style: { position: "relative", zIndex: 1 } }),
+                React.createElement("span", null, "No Data")))));
+}
+export default memo(TBody);

package/dist/components/data-display/table/header/ActionButtons.d.ts

@@ -0,0 +1,7 @@
+import { Actions } from "../IProps";
+import React from "react";
+interface IProps {
+    actions: Actions;
+}
+declare const _default: React.MemoExoticComponent<({ actions }: IProps) => React.JSX.Element>;
+export default _default;