@saptanshuwanjari/react-component-library 0.1.0 → 0.1.8

package/dist/index.mjs

@@ -1,12 +1,12 @@
+import * as React2 from 'react';
 import { createContext, memo, useState, useContext, useTransition, useEffect, useMemo } from 'react';
 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';
-import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
@@ -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) => {
@@ -651,6 +656,120 @@ function Input5({ className, type, ...props }) {
     }
   );
 }
+function setRef(ref, value) {
+  if (typeof ref === "function") {
+    return ref(value);
+  } else if (ref !== null && ref !== void 0) {
+    ref.current = value;
+  }
+}
+function composeRefs(...refs) {
+  return (node) => {
+    let hasCleanup = false;
+    const cleanups = refs.map((ref) => {
+      const cleanup = setRef(ref, node);
+      if (!hasCleanup && typeof cleanup == "function") {
+        hasCleanup = true;
+      }
+      return cleanup;
+    });
+    if (hasCleanup) {
+      return () => {
+        for (let i = 0; i < cleanups.length; i++) {
+          const cleanup = cleanups[i];
+          if (typeof cleanup == "function") {
+            cleanup();
+          } else {
+            setRef(refs[i], null);
+          }
+        }
+      };
+    }
+  };
+}
+// @__NO_SIDE_EFFECTS__
+function createSlot(ownerName) {
+  const SlotClone = /* @__PURE__ */ createSlotClone(ownerName);
+  const Slot2 = React2.forwardRef((props, forwardedRef) => {
+    const { children, ...slotProps } = props;
+    const childrenArray = React2.Children.toArray(children);
+    const slottable = childrenArray.find(isSlottable);
+    if (slottable) {
+      const newElement = slottable.props.children;
+      const newChildren = childrenArray.map((child) => {
+        if (child === slottable) {
+          if (React2.Children.count(newElement) > 1) return React2.Children.only(null);
+          return React2.isValidElement(newElement) ? newElement.props.children : null;
+        } else {
+          return child;
+        }
+      });
+      return /* @__PURE__ */ jsx(SlotClone, { ...slotProps, ref: forwardedRef, children: React2.isValidElement(newElement) ? React2.cloneElement(newElement, void 0, newChildren) : null });
+    }
+    return /* @__PURE__ */ jsx(SlotClone, { ...slotProps, ref: forwardedRef, children });
+  });
+  Slot2.displayName = `${ownerName}.Slot`;
+  return Slot2;
+}
+var Slot = /* @__PURE__ */ createSlot("Slot");
+// @__NO_SIDE_EFFECTS__
+function createSlotClone(ownerName) {
+  const SlotClone = React2.forwardRef((props, forwardedRef) => {
+    const { children, ...slotProps } = props;
+    if (React2.isValidElement(children)) {
+      const childrenRef = getElementRef(children);
+      const props2 = mergeProps(slotProps, children.props);
+      if (children.type !== React2.Fragment) {
+        props2.ref = forwardedRef ? composeRefs(forwardedRef, childrenRef) : childrenRef;
+      }
+      return React2.cloneElement(children, props2);
+    }
+    return React2.Children.count(children) > 1 ? React2.Children.only(null) : null;
+  });
+  SlotClone.displayName = `${ownerName}.SlotClone`;
+  return SlotClone;
+}
+var SLOTTABLE_IDENTIFIER = /* @__PURE__ */ Symbol("radix.slottable");
+function isSlottable(child) {
+  return React2.isValidElement(child) && typeof child.type === "function" && "__radixId" in child.type && child.type.__radixId === SLOTTABLE_IDENTIFIER;
+}
+function mergeProps(slotProps, childProps) {
+  const overrideProps = { ...childProps };
+  for (const propName in childProps) {
+    const slotPropValue = slotProps[propName];
+    const childPropValue = childProps[propName];
+    const isHandler = /^on[A-Z]/.test(propName);
+    if (isHandler) {
+      if (slotPropValue && childPropValue) {
+        overrideProps[propName] = (...args) => {
+          const result = childPropValue(...args);
+          slotPropValue(...args);
+          return result;
+        };
+      } else if (slotPropValue) {
+        overrideProps[propName] = slotPropValue;
+      }
+    } else if (propName === "style") {
+      overrideProps[propName] = { ...slotPropValue, ...childPropValue };
+    } else if (propName === "className") {
+      overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(" ");
+    }
+  }
+  return { ...slotProps, ...overrideProps };
+}
+function getElementRef(element) {
+  let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get;
+  let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+  if (mayWarn) {
+    return element.ref;
+  }
+  getter = Object.getOwnPropertyDescriptor(element, "ref")?.get;
+  mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+  if (mayWarn) {
+    return element.props.ref;
+  }
+  return element.props.ref || element.ref;
+}
 var buttonVariants = cva(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
   {
@@ -882,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,
@@ -900,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)) })
+              ]
+            }
+          )
+        ] })
       ] })
     ] })
   ] });
@@ -1206,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;