@dmsi/wedgekit-react 0.0.26 → 0.0.27

package/dist/components/DataTable.js

@@ -196,13 +196,14 @@ var EditingProvider = ({ data, children }) => {
       });
     }
   };
-  return /* @__PURE__ */ jsx(EditingContext, { value: context, children });
+  return /* @__PURE__ */ jsx(EditingContext.Provider, { value: context, children });
 };
-var DataTable = ({ data }) => {
-  return /* @__PURE__ */ jsx(EditingProvider, { data, children: /* @__PURE__ */ jsx(DataTableInternals, {}) });
+var DataTable = ({ id, data }) => {
+  return /* @__PURE__ */ jsx(EditingProvider, { data, children: /* @__PURE__ */ jsx(DataTableInternals, { id }) });
 };
 var DraggableTableHeader = ({
-  header
+  header,
+  id
 }) => {
   var _a, _b, _c, _d;
   const { attributes, isDragging, listeners, setNodeRef, transform } = useSortable({
@@ -220,6 +221,7 @@ var DraggableTableHeader = ({
   return /* @__PURE__ */ jsx(
     "th",
     {
+      id,
       colSpan: header.colSpan,
       ref: setNodeRef,
       style,
@@ -234,6 +236,7 @@ var DraggableTableHeader = ({
         /* @__PURE__ */ jsx(
           "button",
           __spreadProps(__spreadValues(__spreadValues({
+            id: id ? `${id}-drag-handle` : void 0,
             className: "cursor-grab shrink-0"
           }, attributes), listeners), {
             children: /* @__PURE__ */ jsx("i", { className: "w-3 h-3" })
@@ -250,13 +253,26 @@ var DraggableTableHeader = ({
             title: header.column.getCanSort() ? header.column.getNextSortingOrder() === "asc" ? "Sort ascending" : header.column.getNextSortingOrder() === "desc" ? "Sort descending" : "Clear sort" : void 0,
             children: [
               /* @__PURE__ */ jsx("div", { children: flexRender(header.column.columnDef.header, header.getContext()) }),
-              /* @__PURE__ */ jsx("div", { children: header.column.getCanFilter() ? /* @__PURE__ */ jsx(Filter, { column: header.column }) : /* @__PURE__ */ jsx("div", { className: "invisible", children: /* @__PURE__ */ jsx(Filter, { column: header.column }) }) })
+              /* @__PURE__ */ jsx("div", { children: header.column.getCanFilter() ? /* @__PURE__ */ jsx(
+                Filter,
+                {
+                  id: id ? `${id}-filter` : void 0,
+                  column: header.column
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: "invisible", children: /* @__PURE__ */ jsx(
+                Filter,
+                {
+                  id: id ? `${id}-filter` : void 0,
+                  column: header.column
+                }
+              ) }) })
             ]
           }
         ),
         /* @__PURE__ */ jsx(
           "div",
           {
+            id: id ? `${id}-sort-button` : void 0,
             className: "shrink-0 cursor-pointer",
             onClick: header.column.getToggleSortingHandler(),
             children: (_d = {
@@ -271,7 +287,8 @@ var DraggableTableHeader = ({
 };
 var DragAlongCell = ({
   cell,
-  setValue
+  setValue,
+  id
 }) => {
   var _a, _b, _c, _d;
   const { isDragging, setNodeRef, transform } = useSortable({
@@ -288,6 +305,7 @@ var DragAlongCell = ({
   return /* @__PURE__ */ jsx(
     EditCell,
     {
+      id,
       ref: setNodeRef,
       style,
       cell,
@@ -302,7 +320,7 @@ var DragAlongCell = ({
     }
   );
 };
-var DataTableInternals = () => {
+var DataTableInternals = ({ id }) => {
   const { data, setValue } = useContext(EditingContext);
   const [columnOrder, setColumnOrder] = React.useState(
     () => columns.map((c) => c.id)
@@ -367,36 +385,51 @@ var DataTableInternals = () => {
       modifiers: [restrictToHorizontalAxis],
       onDragEnd: handleDragEnd,
       sensors,
-      children: /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsxs("div", { className: "border border-gray-300 rounded p-3 m-4 max-w-xl min-w-0", children: [
-          /* @__PURE__ */ jsx("p", { className: "mb-3 font-semibold", children: "Show/Hide Columns" }),
-          /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-2", children: table.getAllColumns().map((column) => /* @__PURE__ */ jsxs(
-            "label",
-            {
-              className: "cursor-pointer flex flex-row items-center space-x-1",
-              children: [
-                /* @__PURE__ */ jsx(
-                  Toggle,
-                  {
-                    enabled: column.getIsVisible(),
-                    onToggle: (checked) => column.getToggleVisibilityHandler()({
-                      target: { checked }
-                    })
-                  }
-                ),
-                /* @__PURE__ */ jsx("span", { className: "block", children: column.columnDef.header })
-              ]
-            },
-            column.id
-          )) })
-        ] }),
+      children: /* @__PURE__ */ jsxs("div", { id, children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            id: id ? `${id}-column-visibility` : void 0,
+            className: "border border-gray-300 rounded p-3 m-4 max-w-xl min-w-0",
+            children: [
+              /* @__PURE__ */ jsx("p", { className: "mb-3 font-semibold", children: "Show/Hide Columns" }),
+              /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-2", children: table.getAllColumns().map((column) => /* @__PURE__ */ jsxs(
+                "label",
+                {
+                  className: "cursor-pointer flex flex-row items-center space-x-1",
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      Toggle,
+                      {
+                        id: id ? `${id}-toggle-${column.id}` : void 0,
+                        enabled: column.getIsVisible(),
+                        onToggle: (checked) => column.getToggleVisibilityHandler()({
+                          target: { checked }
+                        })
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("span", { className: "block", children: column.columnDef.header })
+                  ]
+                },
+                column.id
+              )) })
+            ]
+          }
+        ),
         /* @__PURE__ */ jsx("div", { className: "overflow-x-scroll scrollbar-thin", children: /* @__PURE__ */ jsxs("table", { className: "min-w-full divide-x divide-neutral-500", children: [
           /* @__PURE__ */ jsx("thead", { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
             SortableContext,
             {
               items: columnOrder,
               strategy: horizontalListSortingStrategy,
-              children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx(DraggableTableHeader, { header }, header.id))
+              children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx(
+                DraggableTableHeader,
+                {
+                  id: id ? `${id}-header-${header.id}` : void 0,
+                  header
+                },
+                header.id
+              ))
             }
           ) }, headerGroup.id)) }),
           /* @__PURE__ */ jsx("tbody", { children: table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx(
@@ -411,6 +444,7 @@ var DataTableInternals = () => {
                   children: /* @__PURE__ */ jsx(
                     DragAlongCell,
                     {
+                      id: id ? `${id}-cell-${cell.id}` : void 0,
                       cell,
                       setValue
                     },
@@ -423,132 +457,146 @@ var DataTableInternals = () => {
             row.id
           )) })
         ] }) }),
-        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6 md:flex-row items-center md:gap-2 w-full justify-between p-2", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center", children: [
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                className: clsx(
-                  "group flex items-center justify-center h-8 w-8 border border-gray-500/50 text-gray-700 rounded p-1 hover:bg-dmsi-blue hover:text-white transition-colors cursor-pointer border-r-0 rounded-r-none",
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            id: id ? `${id}-pagination` : void 0,
+            className: "flex flex-col gap-6 md:flex-row items-center md:gap-2 w-full justify-between p-2",
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center", children: [
+                /* @__PURE__ */ jsx(
+                  "button",
                   {
-                    "pointer-events-none": !table.getCanPreviousPage()
+                    id: id ? `${id}-first-page` : void 0,
+                    className: clsx(
+                      "group flex items-center justify-center h-8 w-8 border border-gray-500/50 text-gray-700 rounded p-1 hover:bg-dmsi-blue hover:text-white transition-colors cursor-pointer border-r-0 rounded-r-none",
+                      {
+                        "pointer-events-none": !table.getCanPreviousPage()
+                      }
+                    ),
+                    onClick: () => table.setPageIndex(0),
+                    disabled: !table.getCanPreviousPage(),
+                    children: /* @__PURE__ */ jsx("i", { className: "w-4 h-4 group-disabled:stroke-gray-400" })
                   }
                 ),
-                onClick: () => table.setPageIndex(0),
-                disabled: !table.getCanPreviousPage(),
-                children: /* @__PURE__ */ jsx("i", { className: "w-4 h-4 group-disabled:stroke-gray-400" })
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                className: clsx(
-                  "-mr-px group flex items-center justify-center h-8 w-8 border border-gray-500/50 text-gray-700  p-1 hover:bg-dmsi-blue hover:text-white transition-colors cursor-pointer",
+                /* @__PURE__ */ jsx(
+                  "button",
                   {
-                    "pointer-events-none": !table.getCanPreviousPage()
+                    id: id ? `${id}-prev-page` : void 0,
+                    className: clsx(
+                      "-mr-px group flex items-center justify-center h-8 w-8 border border-gray-500/50 text-gray-700  p-1 hover:bg-dmsi-blue hover:text-white transition-colors cursor-pointer",
+                      {
+                        "pointer-events-none": !table.getCanPreviousPage()
+                      }
+                    ),
+                    onClick: () => table.previousPage(),
+                    disabled: !table.getCanPreviousPage(),
+                    children: /* @__PURE__ */ jsx("i", { className: "w-4 h-4 group-disabled:stroke-gray-400" })
                   }
                 ),
-                onClick: () => table.previousPage(),
-                disabled: !table.getCanPreviousPage(),
-                children: /* @__PURE__ */ jsx("i", { className: "w-4 h-4 group-disabled:stroke-gray-400" })
-              }
-            ),
-            Array.from({ length: Math.min(5, table.getPageCount()) }).map(
-              (_, i) => {
-                const current = table.getState().pagination.pageIndex;
-                const index = current - 2 + i;
-                const active = index === current;
-                if (index < 0) return;
-                if (index > table.getPageCount() - 1) return;
-                return /* @__PURE__ */ jsx(
+                Array.from({ length: Math.min(5, table.getPageCount()) }).map(
+                  (_, i) => {
+                    const current = table.getState().pagination.pageIndex;
+                    const index = current - 2 + i;
+                    const active = index === current;
+                    if (index < 0) return null;
+                    if (index > table.getPageCount() - 1) return null;
+                    return /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        id: id ? `${id}-page-${index + 1}` : void 0,
+                        className: clsx(
+                          "group h-8 w-8 border-y border-gray-500/50 text-gray-700 p-1 hover:bg-dmsi-blue hover:text-white transition-colors cursor-pointer  flex items-center justify-center",
+                          {
+                            "bg-neutral-200 border-x": active,
+                            "border-r-0": !active
+                          }
+                        ),
+                        onClick: () => table.setPageIndex(index),
+                        children: /* @__PURE__ */ jsx("span", { className: clsx({}), children: index + 1 })
+                      },
+                      i
+                    );
+                  }
+                ),
+                /* @__PURE__ */ jsx(
                   "button",
                   {
+                    id: id ? `${id}-next-page` : void 0,
                     className: clsx(
-                      "group h-8 w-8 border-y border-gray-500/50 text-gray-700 p-1 hover:bg-dmsi-blue hover:text-white transition-colors cursor-pointer  flex items-center justify-center",
+                      "-ml-px group flex items-center justify-center h-8 w-8 border border-gray-500/50 text-gray-700  p-1 hover:bg-dmsi-blue hover:text-white transition-colors cursor-pointer border-r-0 group",
                       {
-                        "bg-neutral-200 border-x": active,
-                        "border-r-0": !active
+                        "pointer-events-none": !table.getCanNextPage()
                       }
                     ),
-                    onClick: () => table.setPageIndex(index),
-                    children: /* @__PURE__ */ jsx("span", { className: clsx({}), children: index + 1 })
-                  },
-                  i
-                );
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                className: clsx(
-                  "-ml-px group flex items-center justify-center h-8 w-8 border border-gray-500/50 text-gray-700  p-1 hover:bg-dmsi-blue hover:text-white transition-colors cursor-pointer border-r-0 group",
-                  {
-                    "pointer-events-none": !table.getCanNextPage()
+                    onClick: () => table.nextPage(),
+                    disabled: !table.getCanNextPage(),
+                    children: /* @__PURE__ */ jsx("i", { className: "w-4 h-4 group-disabled:stroke-gray-400 " })
                   }
                 ),
-                onClick: () => table.nextPage(),
-                disabled: !table.getCanNextPage(),
-                children: /* @__PURE__ */ jsx("i", { className: "w-4 h-4 group-disabled:stroke-gray-400 " })
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                className: clsx(
-                  "group flex items-center justify-center h-8 w-8 border border-gray-500/50 text-gray-700 rounded rounded-l-none p-1 hover:bg-dmsi-blue hover:text-white transition-colors cursor-pointer",
+                /* @__PURE__ */ jsx(
+                  "button",
                   {
-                    "pointer-events-none": !table.getCanNextPage()
+                    id: id ? `${id}-last-page` : void 0,
+                    className: clsx(
+                      "group flex items-center justify-center h-8 w-8 border border-gray-500/50 text-gray-700 rounded rounded-l-none p-1 hover:bg-dmsi-blue hover:text-white transition-colors cursor-pointer",
+                      {
+                        "pointer-events-none": !table.getCanNextPage()
+                      }
+                    ),
+                    onClick: () => table.setPageIndex(table.getPageCount() - 1),
+                    disabled: !table.getCanNextPage(),
+                    children: /* @__PURE__ */ jsx("i", { className: "w-4 h-4  group-disabled:stroke-gray-400" })
                   }
-                ),
-                onClick: () => table.setPageIndex(table.getPageCount() - 1),
-                disabled: !table.getCanNextPage(),
-                children: /* @__PURE__ */ jsx("i", { className: "w-4 h-4  group-disabled:stroke-gray-400" })
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center gap-6", children: [
-            /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
-              /* @__PURE__ */ jsx("div", { children: "Page" }),
-              /* @__PURE__ */ jsxs("strong", { children: [
-                table.getState().pagination.pageIndex + 1,
-                " of",
-                " ",
-                table.getPageCount()
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
-              "Page:",
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center gap-6", children: [
+                /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
+                  /* @__PURE__ */ jsx("div", { children: "Page" }),
+                  /* @__PURE__ */ jsxs("strong", { children: [
+                    table.getState().pagination.pageIndex + 1,
+                    " of",
+                    " ",
+                    table.getPageCount()
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+                  "Page:",
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      id: id ? `${id}-page-input` : void 0,
+                      type: "number",
+                      min: "1",
+                      max: table.getPageCount(),
+                      defaultValue: table.getState().pagination.pageIndex + 1,
+                      onChange: (e) => {
+                        const page = e.target.value ? Number(e.target.value) - 1 : 0;
+                        table.setPageIndex(page);
+                      },
+                      className: "border border-gray-500 px-2 py-1 rounded w-16"
+                    }
+                  )
+                ] })
+              ] }),
               /* @__PURE__ */ jsx(
-                "input",
+                "select",
                 {
-                  type: "number",
-                  min: "1",
-                  max: table.getPageCount(),
-                  defaultValue: table.getState().pagination.pageIndex + 1,
+                  id: id ? `${id}-pagesize-select` : void 0,
+                  className: "border border-gray-500 px-2 py-1 rounded",
+                  value: table.getState().pagination.pageSize,
                   onChange: (e) => {
-                    const page = e.target.value ? Number(e.target.value) - 1 : 0;
-                    table.setPageIndex(page);
+                    table.setPageSize(Number(e.target.value));
                   },
-                  className: "border border-gray-500 px-2 py-1 rounded w-16"
+                  children: [10, 20, 30, 40, 50].map((pageSize) => /* @__PURE__ */ jsxs("option", { value: pageSize, children: [
+                    "Show ",
+                    pageSize
+                  ] }, pageSize))
                 }
               )
-            ] })
-          ] }),
-          /* @__PURE__ */ jsx(
-            "select",
-            {
-              className: "border border-gray-500 px-2 py-1 rounded",
-              value: table.getState().pagination.pageSize,
-              onChange: (e) => {
-                table.setPageSize(Number(e.target.value));
-              },
-              children: [10, 20, 30, 40, 50].map((pageSize) => /* @__PURE__ */ jsxs("option", { value: pageSize, children: [
-                "Show ",
-                pageSize
-              ] }, pageSize))
-            }
-          )
-        ] })
+            ]
+          }
+        )
       ] })
     }
   );
@@ -558,7 +606,8 @@ function EditCell({
   cell,
   setValue,
   style,
-  ref
+  ref,
+  id
 }) {
   var _a, _b;
   const [editing, setEditing] = useState(false);
@@ -585,6 +634,7 @@ function EditCell({
   return /* @__PURE__ */ jsxs(
     "td",
     {
+      id,
       className: clsx(
         className,
         (_b = (_a = cell.column.columnDef.meta) == null ? void 0 : _a.className) != null ? _b : "",
@@ -597,6 +647,7 @@ function EditCell({
           /* @__PURE__ */ jsx(
             "input",
             {
+              id: id ? `${id}-input` : void 0,
               type: "text",
               value: editedValue,
               onChange: onEditValue,
@@ -608,6 +659,7 @@ function EditCell({
           /* @__PURE__ */ jsx(
             "button",
             {
+              id: id ? `${id}-save-button` : void 0,
               onClick: onStopEdit,
               className: "border cursor-pointer px-2 py-0.5 rounded flex items-center justify-center w-12 border-dmsi-blue text-dmsi-blue bg-white",
               children: "Save"
@@ -630,15 +682,16 @@ function EditCell({
     cell.id
   );
 }
-function Filter({ column }) {
+function Filter({ column, id }) {
   var _a, _b, _c, _d, _e;
   const columnFilterValue = column.getFilterValue();
   const { filterVariant } = (_a = column.columnDef.meta) != null ? _a : {};
-  return filterVariant === "range" ? /* @__PURE__ */ jsxs("div", { children: [
+  return filterVariant === "range" ? /* @__PURE__ */ jsxs("div", { id, children: [
     /* @__PURE__ */ jsxs("div", { className: "flex space-x-2", children: [
       /* @__PURE__ */ jsx(
         "input",
         {
+          id: id ? `${id}-min` : void 0,
           className: "block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900   outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-400 sm:text-sm/6",
           type: "number",
           value: (_b = columnFilterValue == null ? void 0 : columnFilterValue[0]) != null ? _b : "",
@@ -653,6 +706,7 @@ function Filter({ column }) {
       /* @__PURE__ */ jsx(
         "input",
         {
+          id: id ? `${id}-max` : void 0,
           className: "block  w-full rounded-md bg-white px-3 py-0.5 text-base text-gray-900   outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-400 sm:text-sm/6",
           type: "number",
           value: (_c = columnFilterValue == null ? void 0 : columnFilterValue[1]) != null ? _c : "",
@@ -669,6 +723,7 @@ function Filter({ column }) {
   ] }) : filterVariant === "select" ? /* @__PURE__ */ jsxs(
     "select",
     {
+      id,
       className: "block min-w-36 w-full rounded-md bg-white px-2 py-2 text-base text-gray-900   outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-400 sm:text-sm/6",
       onChange: (e) => column.setFilterValue(e.target.value),
       value: columnFilterValue == null ? void 0 : columnFilterValue.toString(),
@@ -682,6 +737,7 @@ function Filter({ column }) {
   ) : /* @__PURE__ */ jsx(
     "input",
     {
+      id,
       className: "block min-w-36 w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900   outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-400 sm:text-sm/6",
       onChange: (e) => column.setFilterValue(e.target.value),
       placeholder: (_e = (_d = column.columnDef.header) == null ? void 0 : _d.toString()) != null ? _e : "...",
@@ -694,11 +750,13 @@ function Filter({ column }) {
 Switch.displayName = "Switch";
 function Toggle({
   enabled,
-  onToggle
+  onToggle,
+  id
 }) {
   return /* @__PURE__ */ jsx(
     Switch,
     {
+      id,
       checked: enabled,
       onChange: onToggle,
       className: "group relative flex h-4 w-7 cursor-pointer rounded-full   p-0.5 transition-colors duration-200 ease-in-out focus:outline-none data-[focus]:outline-1 data-[focus]:outline-white bg-neutral-900/10 data-[checked]:bg-dmsi-blue",