@saptanshuwanjari/react-component-library 0.1.6 → 0.1.8

package/dist/index.mjs

@@ -3,7 +3,7 @@ import { createContext, memo, useState, useContext, useTransition, useEffect, us
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Controller, useForm } from 'react-hook-form';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { Lock, EyeOff, Eye, ChevronDownIcon, Upload, X, Pencil, ArrowUp, ArrowDown, ArrowUpDown, SlidersHorizontal, Table as Table$1, LayoutGrid, CheckIcon, ChevronUpIcon } from 'lucide-react';
+import { Lock, EyeOff, Eye, ChevronDownIcon, Upload, X, Pencil, Table as Table$1, LayoutGrid, ArrowUp, ArrowDown, ArrowUpDown, SlidersHorizontal, CheckIcon, ChevronUpIcon } from 'lucide-react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { useReactTable, getPaginationRowModel, getSortedRowModel, getFilteredRowModel, getCoreRowModel, flexRender } from '@tanstack/react-table';
@@ -574,16 +574,21 @@ function Root2({
   data,
   filters = [],
   defaultViewMode = "table",
+  viewMode: controlledViewMode,
+  onViewModeChange: controlledOnViewModeChange,
   defaultPageSize = 10,
   children
 }) {
-  const [viewMode, setViewMode] = useState(defaultViewMode);
+  const [internalViewMode, setInternalViewMode] = useState(defaultViewMode);
   const [sorting, setSorting] = useState([]);
   const [columnFilters, setColumnFilters] = useState([]);
   const [columnVisibility, setColumnVisibility] = useState({});
   const [globalFilter, setGlobalFilter] = useState("");
   const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: defaultPageSize });
   const [activeFilters, setActiveFilters] = useState({});
+  const isControlled = controlledViewMode !== void 0 && controlledOnViewModeChange !== void 0;
+  const viewMode = isControlled ? controlledViewMode : internalViewMode;
+  const setViewMode = isControlled ? controlledOnViewModeChange : setInternalViewMode;
   const filteredData = useMemo(() => {
     if (Object.keys(activeFilters).length === 0) return data;
     return data.filter((row) => {
@@ -996,8 +1001,41 @@ function Checkbox2({
     }
   );
 }
-function Toolbar() {
-  const { table, viewMode, setViewMode, filters, activeFilters, setActiveFilters } = useDataTable();
+function ViewOptions({ viewMode: propViewMode, onViewModeChange: propOnViewModeChange }) {
+  let contextStr;
+  try {
+    contextStr = useDataTable();
+  } catch (e) {
+  }
+  const mode = propViewMode ?? contextStr?.viewMode ?? "table";
+  const setMode = propOnViewModeChange ?? contextStr?.setViewMode ?? (() => {
+  });
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center border rounded-md bg-background", children: [
+    /* @__PURE__ */ jsx(
+      Button6,
+      {
+        variant: mode === "table" ? "secondary" : "ghost",
+        size: "sm",
+        onClick: () => setMode("table"),
+        className: "rounded-r-none h-8 px-2 lg:px-3",
+        children: /* @__PURE__ */ jsx(Table$1, { className: "h-4 w-4" })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Button6,
+      {
+        variant: mode === "grid" ? "secondary" : "ghost",
+        size: "sm",
+        onClick: () => setMode("grid"),
+        className: "rounded-l-none h-8 px-2 lg:px-3",
+        children: /* @__PURE__ */ jsx(LayoutGrid, { className: "h-4 w-4" })
+      }
+    )
+  ] });
+}
+var view_options_default = ViewOptions;
+function Toolbar({ viewOptions } = {}) {
+  const { table, filters, activeFilters, setActiveFilters } = useDataTable();
   const handleFilterChange = (filterId, value) => {
     setActiveFilters((prev) => ({
       ...prev,
@@ -1014,115 +1052,116 @@ function Toolbar() {
       return { ...prev, [filterId]: newValues };
     });
   };
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4", children: [
-    /* @__PURE__ */ jsx("div", { className: "flex-1 max-w-sm", children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4 py-4", children: [
+    /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsx(
       Input5,
       {
         placeholder: "Search...",
         value: table.getState().globalFilter ?? "",
         onChange: (e) => table.setGlobalFilter(e.target.value),
-        className: "w-full"
+        className: "w-full max-w-sm"
       }
     ) }),
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [
-      filters.length > 0 && /* @__PURE__ */ jsxs(Popover, { children: [
-        /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button6, { variant: "outline", size: "sm", children: [
-          /* @__PURE__ */ jsx(SlidersHorizontal, { className: "h-4 w-4 mr-2" }),
-          "Filters"
-        ] }) }),
-        /* @__PURE__ */ jsx(PopoverContent, { className: "w-80", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-          /* @__PURE__ */ jsx("h4", { className: "font-medium text-sm", children: "Filters" }),
-          filters.map((filter) => /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-            /* @__PURE__ */ jsx("label", { className: "text-sm font-medium", children: filter.label }),
-            filter.multiSelect ? /* @__PURE__ */ jsx("div", { className: "space-y-2", children: filter.options.map((option) => /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
-              /* @__PURE__ */ jsx(
-                Checkbox2,
-                {
-                  id: `${filter.id}-${option.value}`,
-                  checked: Array.isArray(activeFilters[filter.id]) && activeFilters[filter.id].includes(option.value),
-                  onCheckedChange: () => handleMultiFilterToggle(filter.id, option.value)
-                }
-              ),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-wrap flex-1", children: [
+        filters.map((filter) => /* @__PURE__ */ jsx("div", { children: filter.multiSelect ? /* @__PURE__ */ jsxs(Popover, { children: [
+          /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button6, { variant: "outline", size: "sm", className: "h-8 border-dashed", children: [
+            /* @__PURE__ */ jsx(SlidersHorizontal, { className: "h-4 w-4 mr-2" }),
+            filter.label,
+            activeFilters[filter.id] && (Array.isArray(activeFilters[filter.id]) ? activeFilters[filter.id].length > 0 : true) && /* @__PURE__ */ jsx("span", { className: "ml-1 rounded-sm bg-primary px-1 text-xs text-primary-foreground", children: Array.isArray(activeFilters[filter.id]) ? activeFilters[filter.id].length : 1 })
+          ] }) }),
+          /* @__PURE__ */ jsx(PopoverContent, { className: "w-[200px] p-0", align: "start", children: /* @__PURE__ */ jsxs("div", { className: "p-1", children: [
+            filter.options.map((option) => /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "flex items-center space-x-2 rounded-sm px-2 py-1.5 hover:bg-accent cursor-pointer",
+                onClick: () => handleMultiFilterToggle(filter.id, option.value),
+                children: [
+                  /* @__PURE__ */ jsx(
+                    Checkbox2,
+                    {
+                      id: `${filter.id}-${option.value}`,
+                      checked: Array.isArray(activeFilters[filter.id]) && activeFilters[filter.id].includes(option.value),
+                      onCheckedChange: () => handleMultiFilterToggle(filter.id, option.value)
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "label",
+                    {
+                      className: "text-sm cursor-pointer flex-1",
+                      children: option.label
+                    }
+                  )
+                ]
+              },
+              option.value
+            )),
+            activeFilters[filter.id] && (Array.isArray(activeFilters[filter.id]) ? activeFilters[filter.id].length > 0 : false) && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("div", { className: "h-px bg-border my-1" }),
               /* @__PURE__ */ jsx(
-                "label",
+                "div",
                 {
-                  htmlFor: `${filter.id}-${option.value}`,
-                  className: "text-sm cursor-pointer",
-                  children: option.label
+                  className: "px-2 py-1.5 text-center text-sm cursor-pointer hover:bg-accent rounded-sm",
+                  onClick: () => setActiveFilters((prev) => ({ ...prev, [filter.id]: [] })),
+                  children: "Clear filters"
                 }
               )
-            ] }, option.value)) }) : /* @__PURE__ */ jsxs(
-              Select2,
-              {
-                value: activeFilters[filter.id] || "all",
-                onValueChange: (value) => handleFilterChange(filter.id, value),
-                children: [
-                  /* @__PURE__ */ jsx(SelectTrigger, { children: /* @__PURE__ */ jsx(SelectValue2, { placeholder: filter.placeholder || "Select..." }) }),
-                  /* @__PURE__ */ jsxs(SelectContent, { children: [
-                    /* @__PURE__ */ jsx(SelectItem2, { value: "all", children: "All" }),
-                    filter.options.map((option) => /* @__PURE__ */ jsx(SelectItem2, { value: option.value, children: option.label }, option.value))
-                  ] })
-                ]
-              }
-            )
-          ] }, filter.id))
-        ] }) })
-      ] }),
-      /* @__PURE__ */ jsxs(Popover, { children: [
-        /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button6, { variant: "outline", size: "sm", children: [
-          /* @__PURE__ */ jsx(Eye, { className: "h-4 w-4 mr-2" }),
-          "Columns"
-        ] }) }),
-        /* @__PURE__ */ jsx(PopoverContent, { className: "w-56", children: /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ jsx("h4", { className: "font-medium text-sm", children: "Toggle Columns" }),
-          table.getAllColumns().filter((column) => column.getCanHide()).map((column) => /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
-            /* @__PURE__ */ jsx(
-              Checkbox2,
-              {
-                id: column.id,
-                checked: column.getIsVisible(),
-                onCheckedChange: (value) => column.toggleVisibility(!!value)
-              }
-            ),
-            /* @__PURE__ */ jsx("label", { htmlFor: column.id, className: "text-sm cursor-pointer", children: column.id })
-          ] }, column.id))
-        ] }) })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center border rounded-md", children: [
-        /* @__PURE__ */ jsx(
-          Button6,
-          {
-            variant: viewMode === "table" ? "default" : "ghost",
-            size: "sm",
-            onClick: () => setViewMode("table"),
-            className: "rounded-r-none",
-            children: /* @__PURE__ */ jsx(Table$1, { className: "h-4 w-4" })
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Button6,
-          {
-            variant: viewMode === "grid" ? "default" : "ghost",
-            size: "sm",
-            onClick: () => setViewMode("grid"),
-            className: "rounded-l-none",
-            children: /* @__PURE__ */ jsx(LayoutGrid, { className: "h-4 w-4" })
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx("label", { className: "text-sm text-muted-foreground", children: "Rows" }),
-        /* @__PURE__ */ jsxs(
+            ] })
+          ] }) })
+        ] }) : /* @__PURE__ */ jsxs(
           Select2,
           {
-            value: String(table.getState().pagination.pageSize),
-            onValueChange: (value) => table.setPageSize(Number(value)),
+            value: activeFilters[filter.id] || "all",
+            onValueChange: (value) => handleFilterChange(filter.id, value),
             children: [
-              /* @__PURE__ */ jsx(SelectTrigger, { className: "w-20", children: /* @__PURE__ */ jsx(SelectValue2, {}) }),
-              /* @__PURE__ */ jsx(SelectContent, { children: [10, 20, 30, 40, 50].map((size) => /* @__PURE__ */ jsx(SelectItem2, { value: String(size), children: size }, size)) })
+              /* @__PURE__ */ jsx(SelectTrigger, { className: "h-8 w-[150px] border-dashed", children: /* @__PURE__ */ jsx(SelectValue2, { placeholder: filter.placeholder || filter.label }) }),
+              /* @__PURE__ */ jsxs(SelectContent, { children: [
+                /* @__PURE__ */ jsxs(SelectItem2, { value: "all", children: [
+                  "All ",
+                  filter.label
+                ] }),
+                filter.options.map((option) => /* @__PURE__ */ jsx(SelectItem2, { value: option.value, children: option.label }, option.value))
+              ] })
             ]
           }
-        )
+        ) }, filter.id)),
+        /* @__PURE__ */ jsxs(Popover, { children: [
+          /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button6, { variant: "outline", size: "sm", className: "h-8 ml-auto sm:ml-0", children: [
+            /* @__PURE__ */ jsx(Eye, { className: "h-4 w-4 mr-2" }),
+            "Columns"
+          ] }) }),
+          /* @__PURE__ */ jsx(PopoverContent, { className: "w-56", align: "end", children: /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsx("h4", { className: "font-medium text-sm", children: "Toggle Columns" }),
+            table.getAllColumns().filter((column) => column.getCanHide()).map((column) => /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
+              /* @__PURE__ */ jsx(
+                Checkbox2,
+                {
+                  id: column.id,
+                  checked: column.getIsVisible(),
+                  onCheckedChange: (value) => column.toggleVisibility(!!value)
+                }
+              ),
+              /* @__PURE__ */ jsx("label", { htmlFor: column.id, className: "text-sm cursor-pointer", children: column.id })
+            ] }, column.id))
+          ] }) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        viewOptions ? viewOptions : /* @__PURE__ */ jsx(ViewOptions, {}),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx("label", { className: "text-sm text-muted-foreground whitespace-nowrap hidden sm:inline-block", children: "Rows" }),
+          /* @__PURE__ */ jsxs(
+            Select2,
+            {
+              value: String(table.getState().pagination.pageSize),
+              onValueChange: (value) => table.setPageSize(Number(value)),
+              children: [
+                /* @__PURE__ */ jsx(SelectTrigger, { className: "w-16 h-8", children: /* @__PURE__ */ jsx(SelectValue2, {}) }),
+                /* @__PURE__ */ jsx(SelectContent, { children: [10, 20, 30, 40, 50].map((size) => /* @__PURE__ */ jsx(SelectItem2, { value: String(size), children: size }, size)) })
+              ]
+            }
+          )
+        ] })
       ] })
     ] })
   ] });
@@ -1320,7 +1359,8 @@ var DataTable = Object.assign(root_default2, {
   Content: content_default,
   TableView: table_view_default,
   GridView: grid_view_default,
-  Pagination: pagination_default
+  Pagination: pagination_default,
+  ViewOptions: view_options_default
 });
 var data_table_default = DataTable;