pam-grid 1.1.1 → 1.2.0

package/dist/index.mjs

@@ -17,6 +17,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 function PamDropdown({
   trigger,
   items,
+  title,
   placement = "bottom-start",
   offset = 6,
   disabled = false,
@@ -118,7 +119,7 @@ function PamDropdown({
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("span", { ref: triggerRef, className: `pam-dropdown-trigger ${className}`, children: /* @__PURE__ */ jsx("span", { onClick: toggle, style: { display: "inline-flex" }, children: trigger }) }),
     open && createPortal(
-      /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsxs(
         "div",
         {
           ref: menuRef,
@@ -127,17 +128,20 @@ function PamDropdown({
             top: pos.top,
             left: pos.left
           },
-          children: /* @__PURE__ */ jsx(
-            PamDropdownList,
-            {
-              items,
-              closeOnItemClick,
-              onClose: close,
-              openSubKeys,
-              setOpenSubKeys,
-              level: 0
-            }
-          )
+          children: [
+            title && /* @__PURE__ */ jsx("div", { className: "pam-dropdown-title", children: title }),
+            /* @__PURE__ */ jsx("div", { className: "pam-list-wrapper", children: /* @__PURE__ */ jsx(
+              PamDropdownList,
+              {
+                items,
+                closeOnItemClick,
+                onClose: close,
+                openSubKeys,
+                setOpenSubKeys,
+                level: 0
+              }
+            ) })
+          ]
         }
       ),
       portalRoot
@@ -573,62 +577,71 @@ var FacetFilter = ({
   if (facetLoading?.[columnKey]) {
     return /* @__PURE__ */ jsx3("div", { className: "p-3 text-center", children: /* @__PURE__ */ jsx3("p", { className: "text-secondary", children: "Loading..." }) });
   }
-  return /* @__PURE__ */ jsxs3("div", { className: "pam-grid-facet-filter", style: { width: 240 }, children: [
-    /* @__PURE__ */ jsx3("div", { className: "mb-2", children: /* @__PURE__ */ jsx3(
-      "input",
-      {
-        type: "search",
-        className: "form-control form-control-sm",
-        placeholder: "Search...",
-        value: search,
-        onChange: (e) => setSearch(e.target.value)
-      }
-    ) }),
-    /* @__PURE__ */ jsxs3(
-      "div",
-      {
-        className: "list-group list-group-flush text-truncate",
-        style: {
-          maxHeight: 220,
-          overflowY: "auto"
-        },
-        children: [
-          filteredItems.map((item) => {
-            const checked = selected.some((s) => s.id === item.id);
-            return /* @__PURE__ */ jsxs3(
-              "label",
-              {
-                className: "list-group-item list-group-item-action d-flex align-items-center gap-2 py-2",
-                children: [
-                  /* @__PURE__ */ jsx3(
-                    "input",
-                    {
-                      type: "checkbox",
-                      className: "form-check-input mt-0",
-                      checked,
-                      onChange: () => toggleFacetFilter(columnKey, item)
-                    }
-                  ),
-                  /* @__PURE__ */ jsx3("span", { className: "flex-grow-1", children: item.name }),
-                  checked && /* @__PURE__ */ jsx3("i", { className: "bx bx-check text-primary" })
-                ]
-              },
-              item.id
-            );
-          }),
-          !filteredItems.length && /* @__PURE__ */ jsx3("div", { className: "text-center text-muted py-3 small", children: "No results" })
-        ]
-      }
-    ),
-    selected.length > 0 && /* @__PURE__ */ jsx3("div", { className: "pt-2 border-top mt-2 d-flex justify-content-end", children: /* @__PURE__ */ jsx3(
-      "button",
-      {
-        className: "btn btn-sm btn-label-secondary",
-        onClick: clearFacetFilters,
-        children: "Clear"
-      }
-    ) })
-  ] });
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className: "pam-grid-facet-filter",
+      style: { width: 240 },
+      onClick: (e) => e.stopPropagation(),
+      onMouseDown: (e) => e.stopPropagation(),
+      children: [
+        /* @__PURE__ */ jsx3("div", { className: "mb-2", children: /* @__PURE__ */ jsx3(
+          "input",
+          {
+            type: "search",
+            className: "form-control form-control-sm",
+            placeholder: "Search...",
+            value: search,
+            onChange: (e) => setSearch(e.target.value)
+          }
+        ) }),
+        /* @__PURE__ */ jsxs3(
+          "div",
+          {
+            className: "list-group list-group-flush text-truncate",
+            style: {
+              maxHeight: 220,
+              overflowY: "auto"
+            },
+            children: [
+              filteredItems.map((item) => {
+                const checked = selected.some((s) => s.id === item.id);
+                return /* @__PURE__ */ jsxs3(
+                  "label",
+                  {
+                    className: "list-group-item list-group-item-action d-flex align-items-center gap-2 py-2",
+                    children: [
+                      /* @__PURE__ */ jsx3(
+                        "input",
+                        {
+                          type: "checkbox",
+                          className: "form-check-input mt-0",
+                          checked,
+                          onChange: () => toggleFacetFilter(columnKey, item)
+                        }
+                      ),
+                      /* @__PURE__ */ jsx3("span", { className: "flex-grow-1", children: item.name }),
+                      checked && /* @__PURE__ */ jsx3("i", { className: "bx bx-check text-primary" })
+                    ]
+                  },
+                  item.id
+                );
+              }),
+              !filteredItems.length && /* @__PURE__ */ jsx3("div", { className: "text-center text-muted py-3 small", children: "No results" })
+            ]
+          }
+        ),
+        selected.length > 0 && /* @__PURE__ */ jsx3("div", { className: "pt-2 border-top mt-2 d-flex justify-content-end", children: /* @__PURE__ */ jsx3(
+          "button",
+          {
+            className: "btn btn-sm btn-label-secondary",
+            onClick: clearFacetFilters,
+            children: "Clear"
+          }
+        ) })
+      ]
+    }
+  );
 };
 var FacetFilter_default = FacetFilter;
 
@@ -1347,6 +1360,7 @@ var PamGrid = ({
     rows,
     page,
     totalPages,
+    totalRecord,
     pageSize,
     setPage,
     setPageSize,
@@ -1707,20 +1721,32 @@ var PamGrid = ({
         ),
         features.pagination && /* @__PURE__ */ jsxs10("div", { className: "d-flex justify-content-between align-items-center mt-2", children: [
           /* @__PURE__ */ jsxs10("div", { className: "d-flex flex-row align-items-center gap-2", children: [
-            features.pageSizeSelector && /* @__PURE__ */ jsx13(
-              "select",
-              {
-                className: "form-select form-select-sm",
-                style: { width: "80px" },
-                value: pageSize,
-                onChange: (e) => setPageSize(Number(e.target.value)),
-                children: [20, 50, 100].map((n) => /* @__PURE__ */ jsx13("option", { value: n, children: n }, n))
-              }
-            ),
-            " ",
-            /* @__PURE__ */ jsxs10("small", { children: [
-              rows.length,
-              " Record"
+            /* @__PURE__ */ jsxs10("small", { className: "text-secondary", children: [
+              "Showing ",
+              rows.length === 0 ? 0 : (page - 1) * pageSize + 1,
+              " - ",
+              (page - 1) * pageSize + rows.length,
+              " of ",
+              totalRecord
+            ] }),
+            features.pageSizeSelector && /* @__PURE__ */ jsxs10("div", { className: "d-flex align-items-center gap-2 ms-2", children: [
+              /* @__PURE__ */ jsx13(
+                PamDropdown,
+                {
+                  placement: "top-start",
+                  trigger: /* @__PURE__ */ jsxs10("button", { className: "btn btn-sm border bg-white d-flex align-items-center gap-1", children: [
+                    pageSize,
+                    " ",
+                    /* @__PURE__ */ jsx13("i", { className: "bx bx-chevron-down text-muted" })
+                  ] }),
+                  items: [20, 50, 100].map((n) => ({
+                    key: String(n),
+                    label: String(n),
+                    onClick: () => setPageSize(n)
+                  }))
+                }
+              ),
+              /* @__PURE__ */ jsx13("small", { className: "text-secondary", children: "per page" })
             ] })
           ] }),
           /* @__PURE__ */ jsx13("div", { children: /* @__PURE__ */ jsx13(
@@ -2038,6 +2064,7 @@ function useGridCore({
 }) {
   const [page, setPage] = useState6(1);
   const [pageSize, setPageSize] = useState6(initialPageSize);
+  const [totalRecord, setTotalRecord] = useState6(0);
   const [search, setSearch] = useState6("");
   const [debouncedSearch, setDebouncedSearch] = useState6("");
   const [groupBy, setGroupBy] = useState6(null);
@@ -2356,6 +2383,8 @@ function useGridCore({
     setPageSize,
     totalRows,
     totalPages,
+    totalRecord,
+    setTotalRecord,
     // search
     search,
     setSearch,