pam-grid 1.1.1 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/dist/index.css +5699 -5689
  2. package/dist/index.css.map +1 -1
  3. package/dist/index.d.mts +4 -1
  4. package/dist/index.d.ts +4 -1
  5. package/dist/index.js +111 -82
  6. package/dist/index.js.map +1 -1
  7. package/dist/index.mjs +111 -82
  8. package/dist/index.mjs.map +1 -1
  9. package/dist/styles/pam.core.css +5670 -5670
  10. package/dist/styles/pam.core.css.map +1 -1
  11. package/dist/styles/pam.grid.css +30 -20
  12. package/dist/styles/pam.grid.css.map +1 -1
  13. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -125,6 +125,8 @@ declare function useGridCore<T extends Record<string, any>>({ data, columns, ser
125
125
  setPageSize: react.Dispatch<react.SetStateAction<number>>;
126
126
  totalRows: number;
127
127
  totalPages: number;
128
+ totalRecord: number;
129
+ setTotalRecord: react.Dispatch<react.SetStateAction<number>>;
128
130
  search: string;
129
131
  setSearch: react.Dispatch<react.SetStateAction<string>>;
130
132
  debouncedSearch: string;
@@ -256,8 +258,9 @@ type PamDropdownProps = {
256
258
  disabled?: boolean;
257
259
  closeOnItemClick?: boolean;
258
260
  className?: string;
261
+ title?: string;
259
262
  };
260
- declare function PamDropdown({ trigger, items, placement, offset, disabled, closeOnItemClick, className, }: PamDropdownProps): react_jsx_runtime.JSX.Element;
263
+ declare function PamDropdown({ trigger, items, title, placement, offset, disabled, closeOnItemClick, className, }: PamDropdownProps): react_jsx_runtime.JSX.Element;
261
264
 
262
265
  declare function getAdvancedFilterType<T extends object>(column: GridColumn<T>): AdvancedFilterType | null;
263
266
  declare function getLeftOffset<T extends object>(colState: GridColumn<T>[], key: GridColumn<T>["key"]): number;
package/dist/index.d.ts CHANGED
@@ -125,6 +125,8 @@ declare function useGridCore<T extends Record<string, any>>({ data, columns, ser
125
125
  setPageSize: react.Dispatch<react.SetStateAction<number>>;
126
126
  totalRows: number;
127
127
  totalPages: number;
128
+ totalRecord: number;
129
+ setTotalRecord: react.Dispatch<react.SetStateAction<number>>;
128
130
  search: string;
129
131
  setSearch: react.Dispatch<react.SetStateAction<string>>;
130
132
  debouncedSearch: string;
@@ -256,8 +258,9 @@ type PamDropdownProps = {
256
258
  disabled?: boolean;
257
259
  closeOnItemClick?: boolean;
258
260
  className?: string;
261
+ title?: string;
259
262
  };
260
- declare function PamDropdown({ trigger, items, placement, offset, disabled, closeOnItemClick, className, }: PamDropdownProps): react_jsx_runtime.JSX.Element;
263
+ declare function PamDropdown({ trigger, items, title, placement, offset, disabled, closeOnItemClick, className, }: PamDropdownProps): react_jsx_runtime.JSX.Element;
261
264
 
262
265
  declare function getAdvancedFilterType<T extends object>(column: GridColumn<T>): AdvancedFilterType | null;
263
266
  declare function getLeftOffset<T extends object>(colState: GridColumn<T>[], key: GridColumn<T>["key"]): number;
package/dist/index.js CHANGED
@@ -55,6 +55,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
55
55
  function PamDropdown({
56
56
  trigger,
57
57
  items,
58
+ title,
58
59
  placement = "bottom-start",
59
60
  offset = 6,
60
61
  disabled = false,
@@ -156,7 +157,7 @@ function PamDropdown({
156
157
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
157
158
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { ref: triggerRef, className: `pam-dropdown-trigger ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { onClick: toggle, style: { display: "inline-flex" }, children: trigger }) }),
158
159
  open && (0, import_react_dom.createPortal)(
159
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
160
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
160
161
  "div",
161
162
  {
162
163
  ref: menuRef,
@@ -165,17 +166,20 @@ function PamDropdown({
165
166
  top: pos.top,
166
167
  left: pos.left
167
168
  },
168
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
169
- PamDropdownList,
170
- {
171
- items,
172
- closeOnItemClick,
173
- onClose: close,
174
- openSubKeys,
175
- setOpenSubKeys,
176
- level: 0
177
- }
178
- )
169
+ children: [
170
+ title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "pam-dropdown-title", children: title }),
171
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "pam-list-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
172
+ PamDropdownList,
173
+ {
174
+ items,
175
+ closeOnItemClick,
176
+ onClose: close,
177
+ openSubKeys,
178
+ setOpenSubKeys,
179
+ level: 0
180
+ }
181
+ ) })
182
+ ]
179
183
  }
180
184
  ),
181
185
  portalRoot
@@ -611,62 +615,71 @@ var FacetFilter = ({
611
615
  if (facetLoading?.[columnKey]) {
612
616
  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "p-3 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "text-secondary", children: "Loading..." }) });
613
617
  }
614
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "pam-grid-facet-filter", style: { width: 240 }, children: [
615
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "mb-2", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
616
- "input",
617
- {
618
- type: "search",
619
- className: "form-control form-control-sm",
620
- placeholder: "Search...",
621
- value: search,
622
- onChange: (e) => setSearch(e.target.value)
623
- }
624
- ) }),
625
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
626
- "div",
627
- {
628
- className: "list-group list-group-flush text-truncate",
629
- style: {
630
- maxHeight: 220,
631
- overflowY: "auto"
632
- },
633
- children: [
634
- filteredItems.map((item) => {
635
- const checked = selected.some((s) => s.id === item.id);
636
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
637
- "label",
638
- {
639
- className: "list-group-item list-group-item-action d-flex align-items-center gap-2 py-2",
640
- children: [
641
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
642
- "input",
643
- {
644
- type: "checkbox",
645
- className: "form-check-input mt-0",
646
- checked,
647
- onChange: () => toggleFacetFilter(columnKey, item)
648
- }
649
- ),
650
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "flex-grow-1", children: item.name }),
651
- checked && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("i", { className: "bx bx-check text-primary" })
652
- ]
653
- },
654
- item.id
655
- );
656
- }),
657
- !filteredItems.length && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "text-center text-muted py-3 small", children: "No results" })
658
- ]
659
- }
660
- ),
661
- selected.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "pt-2 border-top mt-2 d-flex justify-content-end", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
662
- "button",
663
- {
664
- className: "btn btn-sm btn-label-secondary",
665
- onClick: clearFacetFilters,
666
- children: "Clear"
667
- }
668
- ) })
669
- ] });
618
+ return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
619
+ "div",
620
+ {
621
+ className: "pam-grid-facet-filter",
622
+ style: { width: 240 },
623
+ onClick: (e) => e.stopPropagation(),
624
+ onMouseDown: (e) => e.stopPropagation(),
625
+ children: [
626
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "mb-2", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
627
+ "input",
628
+ {
629
+ type: "search",
630
+ className: "form-control form-control-sm",
631
+ placeholder: "Search...",
632
+ value: search,
633
+ onChange: (e) => setSearch(e.target.value)
634
+ }
635
+ ) }),
636
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
637
+ "div",
638
+ {
639
+ className: "list-group list-group-flush text-truncate",
640
+ style: {
641
+ maxHeight: 220,
642
+ overflowY: "auto"
643
+ },
644
+ children: [
645
+ filteredItems.map((item) => {
646
+ const checked = selected.some((s) => s.id === item.id);
647
+ return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
648
+ "label",
649
+ {
650
+ className: "list-group-item list-group-item-action d-flex align-items-center gap-2 py-2",
651
+ children: [
652
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
653
+ "input",
654
+ {
655
+ type: "checkbox",
656
+ className: "form-check-input mt-0",
657
+ checked,
658
+ onChange: () => toggleFacetFilter(columnKey, item)
659
+ }
660
+ ),
661
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "flex-grow-1", children: item.name }),
662
+ checked && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("i", { className: "bx bx-check text-primary" })
663
+ ]
664
+ },
665
+ item.id
666
+ );
667
+ }),
668
+ !filteredItems.length && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "text-center text-muted py-3 small", children: "No results" })
669
+ ]
670
+ }
671
+ ),
672
+ selected.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "pt-2 border-top mt-2 d-flex justify-content-end", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
673
+ "button",
674
+ {
675
+ className: "btn btn-sm btn-label-secondary",
676
+ onClick: clearFacetFilters,
677
+ children: "Clear"
678
+ }
679
+ ) })
680
+ ]
681
+ }
682
+ );
670
683
  };
671
684
  var FacetFilter_default = FacetFilter;
672
685
 
@@ -1385,6 +1398,7 @@ var PamGrid = ({
1385
1398
  rows,
1386
1399
  page,
1387
1400
  totalPages,
1401
+ totalRecord,
1388
1402
  pageSize,
1389
1403
  setPage,
1390
1404
  setPageSize,
@@ -1745,20 +1759,32 @@ var PamGrid = ({
1745
1759
  ),
1746
1760
  features.pagination && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "d-flex justify-content-between align-items-center mt-2", children: [
1747
1761
  /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "d-flex flex-row align-items-center gap-2", children: [
1748
- features.pageSizeSelector && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
1749
- "select",
1750
- {
1751
- className: "form-select form-select-sm",
1752
- style: { width: "80px" },
1753
- value: pageSize,
1754
- onChange: (e) => setPageSize(Number(e.target.value)),
1755
- children: [20, 50, 100].map((n) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("option", { value: n, children: n }, n))
1756
- }
1757
- ),
1758
- " ",
1759
- /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("small", { children: [
1760
- rows.length,
1761
- " Record"
1762
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("small", { className: "text-secondary", children: [
1763
+ "Showing ",
1764
+ rows.length === 0 ? 0 : (page - 1) * pageSize + 1,
1765
+ " - ",
1766
+ (page - 1) * pageSize + rows.length,
1767
+ " of ",
1768
+ totalRecord
1769
+ ] }),
1770
+ features.pageSizeSelector && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "d-flex align-items-center gap-2 ms-2", children: [
1771
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
1772
+ PamDropdown,
1773
+ {
1774
+ placement: "top-start",
1775
+ trigger: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("button", { className: "btn btn-sm border bg-white d-flex align-items-center gap-1", children: [
1776
+ pageSize,
1777
+ " ",
1778
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("i", { className: "bx bx-chevron-down text-muted" })
1779
+ ] }),
1780
+ items: [20, 50, 100].map((n) => ({
1781
+ key: String(n),
1782
+ label: String(n),
1783
+ onClick: () => setPageSize(n)
1784
+ }))
1785
+ }
1786
+ ),
1787
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("small", { className: "text-secondary", children: "per page" })
1762
1788
  ] })
1763
1789
  ] }),
1764
1790
  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
@@ -2076,6 +2102,7 @@ function useGridCore({
2076
2102
  }) {
2077
2103
  const [page, setPage] = (0, import_react6.useState)(1);
2078
2104
  const [pageSize, setPageSize] = (0, import_react6.useState)(initialPageSize);
2105
+ const [totalRecord, setTotalRecord] = (0, import_react6.useState)(0);
2079
2106
  const [search, setSearch] = (0, import_react6.useState)("");
2080
2107
  const [debouncedSearch, setDebouncedSearch] = (0, import_react6.useState)("");
2081
2108
  const [groupBy, setGroupBy] = (0, import_react6.useState)(null);
@@ -2394,6 +2421,8 @@ function useGridCore({
2394
2421
  setPageSize,
2395
2422
  totalRows,
2396
2423
  totalPages,
2424
+ totalRecord,
2425
+ setTotalRecord,
2397
2426
  // search
2398
2427
  search,
2399
2428
  setSearch,