ikoncomponents 1.5.8 → 1.5.10

package/dist/ikoncomponents/custom-combo-dropdown/index.js

@@ -0,0 +1,85 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Check, ChevronsUpDown, Plus } from "lucide-react";
+import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "../../shadcn/form";
+import { cn } from "../../utils/cn";
+import { Button } from "../../shadcn/button";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "../../shadcn/command";
+import { Popover, PopoverContent, PopoverTrigger } from "../../shadcn/popover";
+import { Input } from "../../shadcn/input";
+export function CustomComboboxInput({ formControl, name, label, options, placeholder = "Select an option", emptyMessage = "No options found.", onValueChange, className, addNewPlaceholder = "Add custom value...", formDescription, disabled, }) {
+    const [open, setOpen] = React.useState(false);
+    const [searchValue, setSearchValue] = React.useState("");
+    const [items, setItems] = React.useState(options);
+    const [isAddingNew, setIsAddingNew] = React.useState(false);
+    const [newValue, setNewValue] = React.useState("");
+    React.useEffect(() => {
+        setItems(options);
+    }, [options]);
+    return (_jsx(FormField, { control: formControl, name: name, render: ({ field }) => {
+            const selectedItem = items.find((item) => item.value === field.value);
+            const handleAddNewItem = () => {
+                const trimmedValue = newValue.trim();
+                if (!trimmedValue)
+                    return;
+                if (items.some((item) => item.value === trimmedValue)) {
+                    const existingItem = items.find(i => i.value === trimmedValue);
+                    if (existingItem) {
+                        field.onChange(existingItem.value);
+                        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(existingItem.value);
+                        setNewValue("");
+                        setIsAddingNew(false);
+                        setOpen(false);
+                        setSearchValue("");
+                    }
+                    return;
+                }
+                const newOption = {
+                    value: trimmedValue,
+                    label: trimmedValue,
+                    disabled: true,
+                };
+                setItems((prev) => [...prev, newOption]);
+                field.onChange(trimmedValue);
+                onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(trimmedValue);
+                setNewValue("");
+                setIsAddingNew(false);
+                setOpen(false);
+                setSearchValue("");
+            };
+            return (_jsxs(FormItem, { className: cn(className), children: [label && (_jsxs(_Fragment, { children: [_jsx(FormLabel, { children: label }), _jsx("br", {})] })), _jsxs(Popover, { open: open, onOpenChange: (isOpen) => {
+                            setOpen(isOpen);
+                            if (!isOpen) {
+                                setSearchValue("");
+                                setIsAddingNew(false);
+                                setNewValue("");
+                            }
+                        }, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(FormControl, { children: _jsxs(Button, { variant: "outline", role: "combobox", "aria-expanded": open, className: cn("w-full justify-between", !field.value && "text-foreground/50", className), disabled: disabled || field.disabled, children: [_jsx("span", { className: "line-clamp-1 text-left", children: field.value
+                                                    ? selectedItem
+                                                        ? selectedItem.label
+                                                        : field.value
+                                                    : placeholder }), _jsx(ChevronsUpDown, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })] }) }) }), _jsx(PopoverContent, { className: "p-0 w-[--radix-popover-trigger-width]", align: "start", children: _jsxs(Command, { shouldFilter: true, children: [_jsx(CommandInput, { placeholder: "Search...", value: searchValue, onValueChange: setSearchValue }), _jsxs(CommandList, { children: [_jsx(CommandEmpty, { children: searchValue && items.length > 0 ? "No results found." : emptyMessage }), _jsx(CommandGroup, { children: items
+                                                        .filter(item => item.label.toLowerCase().includes(searchValue.toLowerCase()) || item.value.toLowerCase().includes(searchValue.toLowerCase()))
+                                                        .map((item) => (_jsxs(CommandItem, { value: item.value, onSelect: (currentValue) => {
+                                                            field.onChange(currentValue);
+                                                            onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(currentValue);
+                                                            setOpen(false);
+                                                            setSearchValue("");
+                                                        }, className: "cursor-pointer", disabled: item === null || item === void 0 ? void 0 : item.disabled, children: [_jsx(Check, { className: cn("mr-2 h-4 w-4", field.value === item.value
+                                                                    ? "opacity-100"
+                                                                    : "opacity-0") }), item.label] }, item.value))) })] }), _jsx("div", { className: "border-t p-2", children: isAddingNew ? (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Input, { placeholder: addNewPlaceholder, value: newValue, onChange: (e) => setNewValue(e.target.value), onKeyDown: (e) => {
+                                                            if (e.key === "Enter") {
+                                                                e.preventDefault();
+                                                                handleAddNewItem();
+                                                            }
+                                                            if (e.key === "Escape") {
+                                                                setIsAddingNew(false);
+                                                                setNewValue("");
+                                                            }
+                                                        }, autoFocus: true, className: "h-8" }), _jsx(Button, { size: "sm", variant: "ghost", onClick: () => {
+                                                            setIsAddingNew(false);
+                                                            setNewValue("");
+                                                        }, className: "h-8", children: "Cancel" }), _jsx(Button, { size: "sm", variant: "default", onClick: handleAddNewItem, className: "h-8", disabled: !newValue.trim() || items.some(item => item.value === newValue.trim()), children: "Add" })] })) : (_jsxs(Button, { variant: "outline", className: "w-full justify-start", onClick: () => setIsAddingNew(true), children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), "Add new option"] })) })] }) })] }), formDescription && (_jsx(FormDescription, { children: formDescription })), _jsx(FormMessage, {})] }));
+        } }));
+}

package/dist/ikoncomponents/data-table/datatable-column-filter/index.d.ts

@@ -0,0 +1,2 @@
+import { DataTableViewOptionsProps } from "../type";
+export declare function DataTableColumnFilter<TData>({ table, }: DataTableViewOptionsProps<TData>): import("react/jsx-runtime").JSX.Element;

package/dist/ikoncomponents/data-table/datatable-column-filter/index.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, } from "../../../shadcn/command";
+import { Popover, PopoverContent, PopoverTrigger } from "../../../shadcn/popover";
+import { Check, Settings2 } from "lucide-react";
+import { getDataTableColumnTitle } from "../function";
+import { TooltipComponent as Tooltip } from "../../tooltip";
+import { IconTextButton } from "../../buttons";
+import { cn } from "../../../utils/cn";
+export function DataTableColumnFilter({ table, }) {
+    return (_jsxs(Popover, { children: [_jsx(Tooltip, { tooltipContent: "Column View", children: _jsx(PopoverTrigger, { asChild: true, children: _jsxs(IconTextButton, { children: [_jsx(Settings2, {}), "View"] }) }) }), _jsx(PopoverContent, { className: "w-[220px] p-0", align: "end", children: _jsxs(Command, { children: [_jsx(CommandInput, { placeholder: "Search..." }), _jsxs(CommandList, { children: [_jsx(CommandEmpty, { children: "No results found." }), _jsx(CommandGroup, { children: table
+                                        .getAllColumns()
+                                        .filter((column) => typeof column.accessorFn !== "undefined" &&
+                                        column.getCanHide())
+                                        .map((column) => {
+                                        const isVisbile = column.getIsVisible();
+                                        return (_jsxs(CommandItem, { onSelect: () => {
+                                                column.toggleVisibility(!isVisbile);
+                                            }, disabled: column.getIsGrouped(), children: [_jsx("div", { className: cn("mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-black dark:border-white", isVisbile
+                                                        ? "bg-black dark:bg-white text-white dark:text-black"
+                                                        : "opacity-50 [&_svg]:invisible"), children: _jsx(Check, {}) }), _jsx("span", { className: "overflow-hidden text-ellipsis", title: getDataTableColumnTitle(column), children: getDataTableColumnTitle(column) })] }, column.id));
+                                    }) })] })] }) })] }));
+}

package/dist/ikoncomponents/data-table/datatable-faceted-filter/index.d.ts

@@ -0,0 +1,2 @@
+import { DataTableFacetedFilterProps } from "../type";
+export declare function DataTableFacetedFilter<TData, TValue>({ column, }: DataTableFacetedFilterProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;

package/dist/ikoncomponents/data-table/datatable-faceted-filter/index.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { Check, Plus, X } from "lucide-react";
+import { cn } from "../../../utils/cn";
+import { Badge } from "../../../shadcn/badge";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, } from "../../../shadcn/command";
+import { Popover, PopoverContent, PopoverTrigger } from "../../../shadcn/popover";
+import { Separator } from "../../../shadcn/separator";
+import { getDataTableColumnTitle } from "../function";
+import { IconTextButtonWithTooltip } from "../../buttons";
+export function DataTableFacetedFilter({ column, }) {
+    const facets = column === null || column === void 0 ? void 0 : column.getFacetedUniqueValues();
+    const selectedValues = new Set(column === null || column === void 0 ? void 0 : column.getFilterValue());
+    const sortedUniqueValues = React.useMemo(() => Array.from(column.getFacetedUniqueValues().keys()).sort().slice(0, 5000), [column.getFacetedUniqueValues()]);
+    return (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(IconTextButtonWithTooltip, { variant: "dashed", tooltipContent: getDataTableColumnTitle(column), children: [(selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.size) > 0 ?
+                            _jsx(X, {})
+                            :
+                                _jsx(Plus, {}), getDataTableColumnTitle(column), (selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.size) > 0 && (_jsxs(_Fragment, { children: [_jsx(Separator, { orientation: "vertical", className: "mx-2 h-4" }), _jsx(Badge, { variant: "secondary", className: "rounded-sm px-1 font-normal lg:hidden", children: selectedValues.size }), _jsx("div", { className: "hidden space-x-1 lg:flex", children: selectedValues.size > 2 ? (_jsxs(Badge, { variant: "secondary", className: "rounded-sm px-1 font-normal", children: [selectedValues.size, " selected"] })) : (sortedUniqueValues
+                                        .filter((option) => selectedValues.has(option))
+                                        .map((option) => (_jsx(Badge, { variant: "secondary", className: "rounded-sm px-1 font-normal", children: option }, option)))) })] }))] }) }), _jsx(PopoverContent, { className: "max-w-[250px] p-0", align: "start", children: _jsxs(Command, { children: [_jsx(CommandInput, { placeholder: getDataTableColumnTitle(column) }), _jsxs(CommandList, { children: [_jsx(CommandEmpty, { children: "No results found." }), _jsx(CommandGroup, { children: sortedUniqueValues.map((option) => {
+                                        const isSelected = selectedValues.has(option);
+                                        return (_jsxs(CommandItem, { onSelect: () => {
+                                                if (isSelected) {
+                                                    selectedValues.delete(option);
+                                                }
+                                                else {
+                                                    selectedValues.add(option);
+                                                }
+                                                const filterValues = Array.from(selectedValues);
+                                                column === null || column === void 0 ? void 0 : column.setFilterValue(filterValues.length ? filterValues : undefined);
+                                            }, children: [_jsx("div", { className: cn("mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-black dark:border-white", isSelected
+                                                        ? "bg-black dark:bg-white text-white dark:text-black"
+                                                        : "opacity-50 [&_svg]:invisible"), children: _jsx(Check, {}) }), _jsx("span", { className: "overflow-hidden text-ellipsis", title: option, children: option }), (facets === null || facets === void 0 ? void 0 : facets.get(option)) && (_jsx("span", { className: "ml-auto flex h-4 w-4 items-center justify-center font-mono text-xs", children: facets.get(option) }))] }, option));
+                                    }) })] }), selectedValues.size > 0 && (_jsxs(_Fragment, { children: [_jsx(CommandSeparator, {}), _jsx(CommandGroup, { children: _jsx(CommandItem, { onSelect: () => column === null || column === void 0 ? void 0 : column.setFilterValue(undefined), className: "justify-center text-center", children: "Clear filters" }) })] }))] }) })] }));
+}

package/dist/ikoncomponents/data-table/datatable-filter-menu/index.d.ts

@@ -0,0 +1,2 @@
+import { DataTableFilterProps } from "../type";
+export declare function DataTableFilterMenu<TData>({ table }: DataTableFilterProps<TData>): import("react/jsx-runtime").JSX.Element;

package/dist/ikoncomponents/data-table/datatable-filter-menu/index.js

@@ -0,0 +1,38 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, } from "../../../shadcn/command";
+import { Popover, PopoverContent, PopoverTrigger } from "../../../shadcn/popover";
+import { cn } from "../../../utils/cn";
+import { useState } from "react";
+import { TooltipComponent as Tooltip } from "../../tooltip";
+import { IconTextButton } from "../../buttons";
+import { Check, Filter } from "lucide-react";
+import { getDataTableColumnTitle } from "../function";
+import { DataTableFacetedFilter } from "../datatable-faceted-filter";
+export function DataTableFilterMenu({ table }) {
+    const [selectedFilterItems, setSelectedFilterItems] = useState([]);
+    return (_jsxs("div", { className: "flex-grow flex gap-3 items-center overflow-hidden", children: [_jsxs(Popover, { children: [_jsx(Tooltip, { tooltipContent: "Filter", children: _jsx(PopoverTrigger, { asChild: true, children: _jsxs(IconTextButton, { children: [_jsx(Filter, {}), "Filter"] }) }) }), _jsx(PopoverContent, { className: "w-[220px] p-0", align: "start", children: _jsxs(Command, { children: [_jsx(CommandInput, { placeholder: "Search..." }), _jsxs(CommandList, { children: [_jsx(CommandEmpty, { children: "No results found." }), _jsx(CommandGroup, { children: table
+                                                .getAllColumns()
+                                                .filter((column) => typeof column.accessorFn !== "undefined" &&
+                                                column.getCanHide())
+                                                .map((column) => {
+                                                const previousValues = new Set(selectedFilterItems);
+                                                const isSelected = previousValues.has(column.id);
+                                                return (_jsxs(CommandItem, { onSelect: () => {
+                                                        if (isSelected) {
+                                                            previousValues.delete(column.id);
+                                                        }
+                                                        else {
+                                                            previousValues.add(column.id);
+                                                        }
+                                                        setSelectedFilterItems([...previousValues]);
+                                                    }, children: [_jsx("div", { className: cn("mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-black dark:border-white", isSelected
+                                                                ? "bg-black dark:bg-white text-white dark:text-black"
+                                                                : "opacity-50 [&_svg]:invisible"), children: _jsx(Check, {}) }), _jsx("span", { className: "overflow-hidden text-ellipsis", title: getDataTableColumnTitle(column), children: getDataTableColumnTitle(column) })] }, column.id));
+                                            }) })] })] }) })] }), _jsx("div", { className: "flex-grow flex gap-3 items-center overflow-auto", children: selectedFilterItems.map((columnId) => {
+                    const column = table.getColumn(columnId);
+                    if (column) {
+                        return _jsx(DataTableFacetedFilter, { column: column }, columnId);
+                    }
+                }) })] }));
+}

package/dist/ikoncomponents/data-table/datatable-pagination/index.d.ts

@@ -0,0 +1,2 @@
+import { DataTablePaginationProps } from "../type";
+export declare function DataTablePagination<TData>({ table, extraParams, }: DataTablePaginationProps<TData>): import("react/jsx-runtime").JSX.Element;

package/dist/ikoncomponents/data-table/datatable-pagination/index.js

@@ -0,0 +1,13 @@
+import { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight, } from "lucide-react";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "../../../shadcn/select";
+import { IconButtonWithTooltip } from "../../buttons";
+const defaultPageSizeArray = [15, 20, 30, 40, 50, 100];
+export function DataTablePagination({ table, extraParams, }) {
+    return (_jsxs("div", { className: "flex flex-col md:flex-row items-start md:items-center justify-between ", children: [_jsx("small", { className: "flex-1 px-2 text-gray-600 dark:text-gray-400", children: ((extraParams === null || extraParams === void 0 ? void 0 : extraParams.numberOfRows) == undefined ||
+                    (extraParams === null || extraParams === void 0 ? void 0 : extraParams.numberOfRows)) &&
+                    (extraParams === null || extraParams === void 0 ? void 0 : extraParams.checkBoxColumn) ? (_jsxs(_Fragment, { children: [table.getFilteredSelectedRowModel().rows.length, " of", " ", table.getFilteredRowModel().rows.length, " row(s) selected."] })) : (_jsxs(_Fragment, { children: ["Total ", table.getFilteredRowModel().rows.length, " no(s) of rows."] })) }), ((extraParams === null || extraParams === void 0 ? void 0 : extraParams.pagination) == undefined || extraParams.pagination) && (_jsxs("div", { className: "flex items-start md:items-center gap-3 flex-col md:flex-row ", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("small", { className: "text-gray-600 dark:text-gray-400", children: "Rows per page" }), ((extraParams === null || extraParams === void 0 ? void 0 : extraParams.rowsPerPage) == undefined ||
+                                extraParams.rowsPerPage) && (_jsxs(Select, { value: `${table.getState().pagination.pageSize}`, onValueChange: (value) => {
+                                    table.setPageSize(Number(value));
+                                }, children: [_jsx(SelectTrigger, { className: "w-[70px] h-8", children: _jsx(SelectValue, { placeholder: table.getState().pagination.pageSize }) }), _jsx(SelectContent, { side: "top", children: ((extraParams === null || extraParams === void 0 ? void 0 : extraParams.pageSizeArray) || defaultPageSizeArray).map((pageSize) => (_jsx(SelectItem, { value: `${pageSize}`, children: pageSize }, pageSize))) })] }))] }), _jsxs(_Fragment, { children: [_jsxs("small", { className: "flex w-[100px] items-center justify-center text-gray-600 dark:text-gray-400", children: ["Page ", table.getState().pagination.pageIndex + 1, " of", " ", table.getPageCount()] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx(IconButtonWithTooltip, { tooltipContent: "Go to first page", size: "smIcon", className: "dark:bg-accent dark:text-accent-foreground keross:bg-card keross:text-foreground", onClick: () => table.setPageIndex(0), disabled: !table.getCanPreviousPage(), children: _jsx(ChevronsLeft, {}) }), _jsx(IconButtonWithTooltip, { tooltipContent: "Go to previous page", size: "smIcon", className: "dark:bg-accent dark:text-accent-foreground keross:bg-card keross:text-foreground", onClick: () => table.previousPage(), disabled: !table.getCanPreviousPage(), children: _jsx(ChevronLeft, {}) }), _jsx(IconButtonWithTooltip, { tooltipContent: "Go to next page", size: "smIcon", className: "dark:bg-accent dark:text-accent-foreground keross:bg-card keross:text-foreground", onClick: () => table.nextPage(), disabled: !table.getCanNextPage(), children: _jsx(ChevronRight, {}) }), _jsx(IconButtonWithTooltip, { tooltipContent: "Go to last page", size: "smIcon", className: "dark:bg-accent dark:text-accent-foreground keross:bg-card keross:text-foreground", onClick: () => table.setPageIndex(table.getPageCount() - 1), disabled: !table.getCanNextPage(), children: _jsx(ChevronsRight, {}) })] })] })] }))] }));
+}

package/dist/ikoncomponents/data-table/datatable-toolbar/index.d.ts

@@ -0,0 +1,2 @@
+import { DTToolBarProps } from "../type";
+export declare function DataTableToolbar<TData>({ table, extraParams, }: DTToolBarProps<TData>): import("react/jsx-runtime").JSX.Element;

package/dist/ikoncomponents/data-table/datatable-toolbar/index.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from "react";
+import { DataTableFilterMenu } from "../datatable-filter-menu";
+import { DataTableColumnFilter } from "../datatable-column-filter";
+import { SearchInput } from "../../search-input";
+export function DataTableToolbar({ table, extraParams, }) {
+    var _a, _b, _c, _d;
+    return (_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsxs("div", { className: "flex-grow flex items-center justify-between gap-3 overflow-hidden", children: [((extraParams === null || extraParams === void 0 ? void 0 : extraParams.defaultTools) == undefined ||
+                        (extraParams === null || extraParams === void 0 ? void 0 : extraParams.defaultTools) == true ||
+                        (Array.isArray(extraParams === null || extraParams === void 0 ? void 0 : extraParams.defaultTools) &&
+                            ((_a = extraParams === null || extraParams === void 0 ? void 0 : extraParams.defaultTools) === null || _a === void 0 ? void 0 : _a.includes("search")))) && (_jsx(SearchInput, { placeholder: "Search ...", onChange: (event) => table.setGlobalFilter(event.target.value), className: "max-w-sm" })), ((extraParams === null || extraParams === void 0 ? void 0 : extraParams.defaultTools) == undefined ||
+                        (extraParams === null || extraParams === void 0 ? void 0 : extraParams.defaultTools) == true ||
+                        (Array.isArray(extraParams === null || extraParams === void 0 ? void 0 : extraParams.defaultTools) &&
+                            ((_b = extraParams === null || extraParams === void 0 ? void 0 : extraParams.defaultTools) === null || _b === void 0 ? void 0 : _b.includes("filter")))) && (_jsx(DataTableFilterMenu, { table: table }))] }), _jsxs("div", { className: "flex gap-3", children: [(_c = extraParams === null || extraParams === void 0 ? void 0 : extraParams.extraTools) === null || _c === void 0 ? void 0 : _c.map((tool, index) => (_jsx(Fragment, { children: tool }, index))), ((extraParams === null || extraParams === void 0 ? void 0 : extraParams.defaultTools) == undefined ||
+                        (extraParams === null || extraParams === void 0 ? void 0 : extraParams.defaultTools) == true ||
+                        (Array.isArray(extraParams === null || extraParams === void 0 ? void 0 : extraParams.defaultTools) &&
+                            ((_d = extraParams === null || extraParams === void 0 ? void 0 : extraParams.defaultTools) === null || _d === void 0 ? void 0 : _d.includes("columnFilter")))) && (_jsx(DataTableColumnFilter, { table: table }))] })] }));
+}

package/dist/ikoncomponents/data-table/function.d.ts

@@ -0,0 +1 @@
+export declare const getDataTableColumnTitle: (column: any) => any;

package/dist/ikoncomponents/data-table/function.js

@@ -0,0 +1,6 @@
+export const getDataTableColumnTitle = (column) => {
+    var _a, _b, _c;
+    return ((_a = column === null || column === void 0 ? void 0 : column.columnDef) === null || _a === void 0 ? void 0 : _a.title) ||
+        (((_b = column === null || column === void 0 ? void 0 : column.columnDef) === null || _b === void 0 ? void 0 : _b.header) && typeof column.columnDef.header == 'string' && ((_c = column === null || column === void 0 ? void 0 : column.columnDef) === null || _c === void 0 ? void 0 : _c.header)) ||
+        column.id;
+};

package/dist/ikoncomponents/data-table/index.d.ts

@@ -0,0 +1,2 @@
+import { DataTableProps } from "./type";
+export declare const DataTable: <TData, TValue>({ columns, data, extraParams, onTableReady }: DataTableProps<TData, TValue>, ref: any) => false | import("react/jsx-runtime").JSX.Element;

package/dist/ikoncomponents/data-table/index.js

@@ -0,0 +1,223 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, useImperativeHandle, useState, } from "react";
+import { flexRender, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, getGroupedRowModel, getExpandedRowModel, useReactTable, getFacetedUniqueValues, getFacetedMinMaxValues, getFacetedRowModel, } from "@tanstack/react-table";
+import { ChevronDown, ChevronRight, ChevronUp, X, } from "lucide-react";
+import { Button } from "../../shadcn/button";
+import { Table, TableBody, TableCell, TableFooter, TableHead, TableHeader, TableRow, } from "../../shadcn/table";
+import { DataTableToolbar } from "./datatable-toolbar";
+import { getDataTableColumnTitle } from "./function";
+import { Checkbox } from "../../shadcn/checkbox";
+import { DataTablePagination } from "./datatable-pagination";
+import { ActionMenu } from "../action-menu";
+import { cx } from "class-variance-authority";
+export const DataTable = (({ columns, data, extraParams, onTableReady }, ref) => {
+    const [sorting, setSorting] = React.useState([]);
+    const [globalFilter, setGlobalFilter] = React.useState("");
+    const [columnFilters, setColumnFilters] = React.useState([]);
+    const [pagination, setPagination] = React.useState({
+        pageIndex: (extraParams === null || extraParams === void 0 ? void 0 : extraParams.pageIndex) || 0,
+        pageSize: (extraParams === null || extraParams === void 0 ? void 0 : extraParams.pageSize) || 15,
+    });
+    // useImperativeHandle(ref, () => ({
+    //   toggleAllRowsExpanded: (expanded: boolean) => {
+    //     table.toggleAllRowsExpanded(expanded);
+    //   },
+    //   getTableInstance: () => table, // Optional: Expose the entire table instance if needed
+    // }));
+    const [columnVisibility, setColumnVisibility] = React.useState({});
+    const [grouping, setGrouping] = React.useState([]);
+    const [expanded, setExpanded] = React.useState({});
+    const [rowSelection, setRowSelection] = React.useState({});
+    columns = columns.map((column) => {
+        if (!(column === null || column === void 0 ? void 0 : column.filterFn)) {
+            column.filterFn = "arrIncludesSome";
+        }
+        return column;
+    });
+    useEffect(() => {
+        if (extraParams === null || extraParams === void 0 ? void 0 : extraParams.checkBoxColumnCallback)
+            extraParams.checkBoxColumnCallback(table.getFilteredSelectedRowModel().rows);
+    }, [rowSelection]);
+    if (extraParams === null || extraParams === void 0 ? void 0 : extraParams.checkBoxColumn) {
+        columns.splice(0, 0, {
+            id: "checkBoxColumn",
+            header: ({ table }) => (_jsx(Checkbox, { checked: table.getIsAllPageRowsSelected() ||
+                    (table.getIsSomePageRowsSelected() && "indeterminate"), onCheckedChange: (value) => table.toggleAllPageRowsSelected(!!value), "aria-label": "Select all" })),
+            cell: ({ row }) => (_jsx(_Fragment, { children: _jsx(Checkbox, { checked: row.getIsSelected(), onCheckedChange: (value) => row.toggleSelected(!!value), "aria-label": "Select row" }) })),
+            enableSorting: false,
+            enableHiding: false,
+        });
+    }
+    if ((extraParams === null || extraParams === void 0 ? void 0 : extraParams.actionMenu) || (extraParams === null || extraParams === void 0 ? void 0 : extraParams.groupActionMenu)) {
+        columns.push({
+            id: "DTActions",
+            accessorKey: "Actions",
+            header: () => _jsx("div", { className: "text-center", children: "Action" }),
+            size: 20,
+            headerClassName: "text-center",
+            cell: ({ row }) => {
+                if (row.getIsGrouped()) {
+                    return (extraParams === null || extraParams === void 0 ? void 0 : extraParams.groupActionMenu) ? (_jsx("div", { className: "text-end", children: _jsx(ActionMenu, { actionMenus: extraParams.groupActionMenu.items, extraActionParams: {
+                                arguments: [
+                                    row.original,
+                                    ...(extraParams.groupActionMenu.extraArguments || []),
+                                ],
+                            } }) })) : null;
+                }
+                else if (extraParams === null || extraParams === void 0 ? void 0 : extraParams.actionMenu) {
+                    return (_jsx("div", { className: "text-center", children: _jsx(ActionMenu, { actionMenus: extraParams.actionMenu.items, extraActionParams: {
+                                arguments: [
+                                    row.original,
+                                    ...(extraParams.actionMenu.extraArguments || []),
+                                ],
+                            } }) }));
+                }
+                else {
+                    return null;
+                }
+            },
+            enableSorting: false,
+            enableHiding: false,
+        });
+    }
+    // const onPaginationChange = (state: any) => {
+    //   console.warn(state);
+    //   setPagination(state);
+    //   extraParams?.onPaginationChange?.(state);
+    // }
+    useEffect(() => {
+        var _a;
+        (_a = extraParams === null || extraParams === void 0 ? void 0 : extraParams.onPaginationChange) === null || _a === void 0 ? void 0 : _a.call(extraParams, pagination);
+    }, [pagination]);
+    const table = useReactTable({
+        data,
+        columns,
+        state: {
+            sorting,
+            globalFilter,
+            columnFilters,
+            columnVisibility,
+            rowSelection,
+            grouping,
+            expanded,
+            pagination,
+        },
+        onPaginationChange: setPagination,
+        onSortingChange: setSorting,
+        onExpandedChange: setExpanded,
+        onColumnFiltersChange: setColumnFilters,
+        onColumnVisibilityChange: setColumnVisibility,
+        onGroupingChange: setGrouping,
+        onGlobalFilterChange: setGlobalFilter,
+        onRowSelectionChange: setRowSelection,
+        getCoreRowModel: getCoreRowModel(),
+        getPaginationRowModel: getPaginationRowModel(),
+        getSortedRowModel: getSortedRowModel(),
+        getFilteredRowModel: getFilteredRowModel(),
+        getGroupedRowModel: getGroupedRowModel(),
+        getExpandedRowModel: getExpandedRowModel(),
+        getFacetedRowModel: getFacetedRowModel(),
+        getFacetedUniqueValues: getFacetedUniqueValues(),
+        getFacetedMinMaxValues: getFacetedMinMaxValues(),
+        manualPagination: ((extraParams === null || extraParams === void 0 ? void 0 : extraParams.pagination) == undefined || (extraParams === null || extraParams === void 0 ? void 0 : extraParams.pagination) == true) ? undefined : true
+    });
+    useImperativeHandle(ref, () => table);
+    const [droppedHeaders, setDroppedHeaders] = useState([]);
+    // Drag Event Handlers
+    const handleDragStart = (e, header) => {
+        const headerObj = {
+            id: header.id,
+            title: getDataTableColumnTitle(header.column),
+        };
+        e.dataTransfer.setData("headerObj", JSON.stringify(headerObj));
+        e.dataTransfer.effectAllowed = "move";
+    };
+    const handleDrop = (e) => {
+        e.preventDefault();
+        const headerObj = JSON.parse(e.dataTransfer.getData("headerObj"));
+        if (!droppedHeaders.find((e) => e.id == headerObj.id)) {
+            setDroppedHeaders((prevHeaders) => [...prevHeaders, headerObj]);
+            const column = table.getColumn(headerObj.id);
+            if (column) {
+                column.getToggleGroupingHandler()();
+            }
+        }
+    };
+    const handleDragOver = (e) => {
+        e.preventDefault(); // Necessary to allow dropping
+    };
+    const handleRemoveGrouping = (groupId) => {
+        const newDroppedHeaders = droppedHeaders.filter((header) => header.id !== groupId);
+        setDroppedHeaders(() => [...newDroppedHeaders]);
+        const column = table.getColumn(groupId);
+        if (column) {
+            column.getToggleGroupingHandler()();
+        }
+    };
+    const [isMount, setIsMount] = useState(false);
+    useEffect(() => {
+        if (!isMount) {
+            setIsMount(true);
+        }
+        if (extraParams === null || extraParams === void 0 ? void 0 : extraParams.defaultGroups) {
+            table.setGrouping(extraParams === null || extraParams === void 0 ? void 0 : extraParams.defaultGroups);
+        }
+    }, []);
+    useEffect(() => {
+        if (onTableReady) {
+            onTableReady(table);
+        }
+    }, [onTableReady, table]);
+    return (isMount && (_jsxs("div", { className: "w-full h-full flex flex-col gap-3 justify-between", children: [_jsxs("div", { className: "flex-grow flex flex-col gap-3 overflow-hidden", children: [((extraParams === null || extraParams === void 0 ? void 0 : extraParams.defaultTools) == undefined ||
+                        extraParams.defaultTools ||
+                        extraParams.extraTools) && (_jsx(DataTableToolbar, { table: table, extraParams: extraParams })), _jsxs("div", { className: "flex-grow flex flex-col overflow-hidden", children: [((extraParams === null || extraParams === void 0 ? void 0 : extraParams.grouping) == undefined || extraParams.grouping) && (_jsx("div", { className: "w-full border-t min-h-10 px-2 py-1 flex gap-3 items-center text-sm bg-card-new", onDrop: handleDrop, onDragOver: handleDragOver, children: droppedHeaders.length === 0
+                                    ? "Drag a column header here to group its column"
+                                    : droppedHeaders.map((header, index) => (_jsxs("div", { className: "rounded-md px-2 py-1 bg-muted text-muted-foreground flex gap-3 items-center", children: [header.title, _jsx("span", { onClick: () => handleRemoveGrouping(header.id), children: _jsx(X, { size: 15 }) })] }, header.id))) })), _jsx("div", { className: "flex-grow overflow-hidden", children: _jsxs(Table, { className: "border-t whitespace-nowrap bg-card-new", children: [((extraParams === null || extraParams === void 0 ? void 0 : extraParams.header) == undefined || extraParams.header) && (_jsx(TableHeader, { className: "sticky top-0 z-10 border-t bg-card-new", children: table.getHeaderGroups().map((headerGroup) => (_jsx(TableRow, { className: cx(""), children: headerGroup.headers.map((header) => {
+                                                    if (header.column.getIsGrouped()) {
+                                                        if (header.column.getGroupedIndex() <
+                                                            droppedHeaders.length - 1) {
+                                                            return null;
+                                                        }
+                                                        return (_jsx(TableHead, { colSpan: droppedHeaders.length, className: cx("w-36 ", "text-left") }, header.id));
+                                                    }
+                                                    else {
+                                                        return (_jsx(TableHead, Object.assign({}, ((extraParams === null || extraParams === void 0 ? void 0 : extraParams.grouping) == undefined ||
+                                                            extraParams.grouping
+                                                            ? {
+                                                                onDragStart: (e) => handleDragStart(e, header),
+                                                                draggable: true,
+                                                            }
+                                                            : {}), { className: cx("text-left"), children: header.isPlaceholder ? null : ((extraParams === null || extraParams === void 0 ? void 0 : extraParams.sorting) ==
+                                                                undefined ||
+                                                                extraParams.sorting) &&
+                                                                header.column.getCanSort() ? (_jsxs("div", { onClick: header.column.getToggleSortingHandler(), className: cx("-mx-2 inline-flex cursor-pointer select-none items-center gap-2 rounded-md px-2 py-1 hover:bg-muted"), children: [_jsx("div", { children: flexRender(header.column.columnDef.header, header.getContext()) }), header.column.getCanSort() ? (_jsxs("div", { className: "-space-y-2", children: [_jsx(ChevronUp, { className: cx("size-3.5 text-foreground", header.column.getIsSorted() ===
+                                                                                    "desc"
+                                                                                    ? "opacity-30"
+                                                                                    : ""), "aria-hidden": "true" }), _jsx(ChevronDown, { className: cx("size-3.5 text-foreground", header.column.getIsSorted() ===
+                                                                                    "asc"
+                                                                                    ? "opacity-30"
+                                                                                    : ""), "aria-hidden": "true" })] })) : null] })) : (flexRender(header.column.columnDef.header, header.getContext())) }), header.id));
+                                                    }
+                                                }) }, headerGroup.id))) })), _jsx(TableBody, { children: table.getRowModel().rows.length ? (table.getRowModel().rows.map((row) => row.getIsGrouped() ? (_jsx(TableRow, { children: row.getVisibleCells().map((cell) => {
+                                                    var _a;
+                                                    if (cell.column.getIndex() < row.depth) {
+                                                        return null;
+                                                    }
+                                                    return (
+                                                    // colSpan={cell.column.getIndex() == row.depth ? row.depth + 1 : undefined}
+                                                    _jsx(TableCell, { colSpan: cell.column.getIndex() == row.depth
+                                                            ? row.depth + 1
+                                                            : undefined, className: cell.column.getIndex() == row.depth
+                                                            ? "w-36"
+                                                            : "", children: cell.getIsGrouped() ? (_jsxs(Button, { variant: "link", onClick: row.getToggleExpandedHandler(), className: `text-right text-foreground`, style: {
+                                                                marginLeft: row.depth + "rem",
+                                                            }, children: [row.getIsExpanded() ? (_jsx(ChevronDown, {})) : (_jsx(ChevronRight, {})), " ", flexRender(cell.column.columnDef.cell, cell.getContext()), " ", "(", row.subRows.length, ")"] })) : cell.column.id == "DTActions" ? (flexRender(cell.column.columnDef.cell, cell.getContext())) : cell.getIsAggregated() ? (flexRender((_a = cell.column.columnDef.aggregatedCell) !== null && _a !== void 0 ? _a : cell.column.columnDef.cell, cell.getContext())) : cell.getIsPlaceholder() ? null : (flexRender(cell.column.columnDef.cell, cell.getContext())) }, cell.id));
+                                                }) }, row.id)) : (_jsx(TableRow, Object.assign({ className: cx(row.getIsSelected() ? "bg-accent/10" : "") }, ((extraParams === null || extraParams === void 0 ? void 0 : extraParams.checkBoxColumn) && {
+                                                onClick: () => row.toggleSelected(!row.getIsSelected()),
+                                            }), { children: row.getVisibleCells().map((cell, index) => (_jsxs(TableCell, { className: cx(row.getIsSelected() ? "relative" : "", !((extraParams === null || extraParams === void 0 ? void 0 : extraParams.actionMenu) ||
+                                                        (extraParams === null || extraParams === void 0 ? void 0 : extraParams.groupActionMenu)) && "py-2"), children: [index === 0 && row.getIsSelected() && (_jsx("div", { className: "absolute inset-y-0 left-0 w-0.5 bg-primary" })), cell.getIsPlaceholder()
+                                                            ? null
+                                                            : flexRender(cell.column.columnDef.cell, cell.getContext())] }, cell.id))) }), row.id)))) : (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: columns.length, className: "h-24 text-center", children: "No results." }) })) }), (extraParams === null || extraParams === void 0 ? void 0 : extraParams.footer) && (_jsx(TableFooter, { className: "sticky bottom-0 bg-background text-foreground", children: table.getFooterGroups().map((group) => (_jsx(TableRow, { children: group.headers.map((header) => (_jsx(TableCell, { children: header.isPlaceholder ? null : (_jsx("div", { className: "flex items-center", children: flexRender(header.column.columnDef.footer, header.getContext()) })) }))) }))) }))] }) })] })] }), ((extraParams === null || extraParams === void 0 ? void 0 : extraParams.paginationBar) == undefined ||
+                extraParams.paginationBar) && (_jsx(DataTablePagination, { table: table, extraParams: extraParams }))] })));
+});

package/dist/ikoncomponents/data-table/type.d.ts

@@ -0,0 +1,60 @@
+import { Column, ColumnDef, PaginationState, Table } from "@tanstack/react-table";
+import { ActionMenuProps } from "../action-menu/type";
+export interface DataTableProps<TData, TValue> {
+    data: TData[];
+    columns: DTColumnsProps<TData, TValue>[];
+    extraParams?: DTExtraParamsProps;
+    onTableReady?: (table: any) => void;
+}
+export type DTColumnsProps<TData, TValue = unknown> = ColumnDef<TData, TValue> & {
+    title?: string;
+    headerClassName?: string;
+};
+export interface DTExtraParamsProps {
+    defaultGroups?: string[];
+    grouping?: boolean;
+    header?: boolean;
+    footer?: boolean;
+    defaultTools?: ("columnFilter" | "search" | "filter")[] | boolean;
+    extraTools?: any;
+    sorting?: boolean;
+    paginationBar?: boolean;
+    rowsPerPage?: boolean;
+    pagination?: boolean;
+    numberOfRows?: boolean;
+    checkBoxColumn?: boolean;
+    checkBoxColumnCallback?: (selectedRows: any[]) => void;
+    actionMenu?: DTActionMenuProps;
+    groupActionMenu?: DTActionMenuProps;
+    pageSize?: number;
+    pageIndex?: number;
+    pageSizeArray?: number[];
+    rowSelection?: boolean;
+    onPaginationChange?: (state: PaginationState) => void;
+    defaultRowSelection?: (row: any) => boolean;
+}
+export interface DTActionMenuProps {
+    items: ActionMenuProps[];
+    extraArguments?: any[];
+}
+export interface DataTableViewOptionsProps<TData> {
+    table: Table<TData>;
+}
+export interface DTToolBarProps<TData> {
+    table: Table<TData>;
+    extraParams?: DTExtraParamsProps;
+}
+export interface DataTableFilterProps<TData> {
+    table: Table<TData>;
+}
+export interface DataTableFacetedFilterProps<TData, TValue> {
+    column: Column<TData, TValue>;
+}
+export interface DataTablePaginationProps<TData> {
+    table: Table<TData>;
+    extraParams?: DTExtraParamsProps;
+}
+export interface DragDropHeaderProp {
+    id: string;
+    title: string;
+}

package/dist/ikoncomponents/data-table/type.js

@@ -0,0 +1 @@
+export {};

package/dist/ikoncomponents/e-chart/index.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+interface Props {
+    parentDivProps?: any;
+    option?: Record<string | number, any>;
+    style?: Record<string, string>;
+    settings?: Record<string, any>;
+    loading?: boolean;
+    theme?: string | object | null;
+    isConfigurable?: boolean;
+    resizeKey?: null | boolean | number | string;
+    onClick?: (...args: any) => void;
+    onConfigure?: (...args: any) => void;
+}
+export declare const EChart: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLElement>>;
+export {};