@nexgrid/react 0.1.0

package/dist/index.cjs

@@ -0,0 +1,944 @@
+"use client";
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  DEFAULT_LOCALE: () => import_core4.DEFAULT_LOCALE,
+  DEFAULT_PAGE_SIZE: () => import_core4.DEFAULT_PAGE_SIZE,
+  NexGrid: () => NexGrid,
+  PAGE_SIZES: () => import_core4.PAGE_SIZES,
+  buildODataUrl: () => import_core4.buildODataUrl,
+  buildQueryUrl: () => import_core4.buildQueryUrl,
+  defaultQuery: () => import_core4.defaultQuery,
+  fromODataResponse: () => import_core4.fromODataResponse,
+  isPageSize: () => import_core4.isPageSize,
+  parseQuery: () => import_core4.parseQuery,
+  primarySort: () => import_core4.primarySort,
+  queryClientData: () => import_core4.queryClientData,
+  resolveLocale: () => import_core4.resolveLocale,
+  serializeQuery: () => import_core4.serializeQuery,
+  toODataParams: () => import_core4.toODataParams,
+  totalPagesFor: () => import_core4.totalPagesFor,
+  useClientNexGrid: () => useClientNexGrid,
+  withFilter: () => import_core4.withFilter,
+  withPage: () => import_core4.withPage,
+  withPageSize: () => import_core4.withPageSize,
+  withSearch: () => import_core4.withSearch,
+  withSort: () => import_core4.withSort,
+  withToggledSort: () => import_core4.withToggledSort
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/nex-grid.tsx
+var React4 = __toESM(require("react"), 1);
+var import_core2 = require("@nexgrid/core");
+
+// src/icons.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function Icon({
+  className,
+  size,
+  children
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      focusable: "false",
+      className,
+      width: size,
+      height: size,
+      children
+    }
+  );
+}
+function SearchIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Icon, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "11", cy: "11", r: "8" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m21 21-4.3-4.3" })
+  ] });
+}
+function XIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Icon, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M18 6 6 18" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m6 6 12 12" })
+  ] });
+}
+function SlidersIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Icon, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "21", x2: "14", y1: "4", y2: "4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "10", x2: "3", y1: "4", y2: "4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "21", x2: "12", y1: "12", y2: "12" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "8", x2: "3", y1: "12", y2: "12" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "21", x2: "16", y1: "20", y2: "20" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "12", x2: "3", y1: "20", y2: "20" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "14", x2: "14", y1: "2", y2: "6" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "8", x2: "8", y1: "10", y2: "14" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "16", x2: "16", y1: "18", y2: "22" })
+  ] });
+}
+function FilterIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polygon", { points: "22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3" }) });
+}
+function DownloadIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Icon, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polyline", { points: "7 10 12 15 17 10" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "12", x2: "12", y1: "15", y2: "3" })
+  ] });
+}
+function FileSpreadsheetIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Icon, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M14 2v4a2 2 0 0 0 2 2h4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M8 13h2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M14 13h2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M8 17h2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M14 17h2" })
+  ] });
+}
+function FileTextIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Icon, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M14 2v4a2 2 0 0 0 2 2h4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M10 9H8" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M16 13H8" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M16 17H8" })
+  ] });
+}
+function ChevronLeftIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m15 18-6-6 6-6" }) });
+}
+function ChevronRightIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m9 18 6-6-6-6" }) });
+}
+function ArrowUpIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Icon, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m5 12 7-7 7 7" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 19V5" })
+  ] });
+}
+function ArrowDownIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Icon, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 5v14" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m19 12-7 7-7-7" })
+  ] });
+}
+function ArrowUpDownIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Icon, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m21 16-4 4-4-4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M17 20V4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m3 8 4-4 4 4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M7 4v16" })
+  ] });
+}
+function CheckIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M20 6 9 17l-5-5" }) });
+}
+
+// src/render.tsx
+var React = __toESM(require("react"), 1);
+var import_core = require("@nexgrid/core");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var DEFAULT_MIN_WIDTH = 120;
+function renderColumnHeader(col) {
+  const header = col.header;
+  if (typeof header === "function") return header({});
+  if (typeof header === "string") return header;
+  return (0, import_core.getColumnId)(col);
+}
+function renderCellContent(col, row, labels) {
+  const cell = col.cell;
+  if (typeof cell === "function") {
+    return cell({ row: { original: row }, getValue: () => (0, import_core.getCellValue)(col, row) });
+  }
+  return (0, import_core.getCellText)((0, import_core.getCellValue)(col, row), labels);
+}
+function headerCellStyle(col) {
+  const meta = col.meta;
+  const style = meta?.width === void 0 ? { minWidth: `${meta?.minWidth ?? DEFAULT_MIN_WIDTH}px` } : { width: `${meta.width}px` };
+  if (meta?.align !== void 0) style.textAlign = meta.align;
+  return style;
+}
+function bodyCellStyle(col) {
+  const align = col.meta?.align;
+  return align === void 0 ? void 0 : { textAlign: align };
+}
+function headerInnerClass(col) {
+  const align = col.meta?.align;
+  if (align === "center") return "nxg-th-inner nxg-th-inner--center";
+  if (align === "right") return "nxg-th-inner nxg-th-inner--right";
+  return "nxg-th-inner";
+}
+function renderTemplate(template, values) {
+  const parts = [];
+  const pattern = /\{(\w+)\}/g;
+  let cursor = 0;
+  for (let match = pattern.exec(template); match !== null; match = pattern.exec(template)) {
+    const key = match[1];
+    const replacement = key === void 0 ? void 0 : values[key];
+    if (replacement === void 0) continue;
+    if (match.index > cursor) parts.push(template.slice(cursor, match.index));
+    parts.push(replacement);
+    cursor = match.index + match[0].length;
+  }
+  if (cursor < template.length) parts.push(template.slice(cursor));
+  return parts.map((part, index) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(React.Fragment, { children: part }, index));
+}
+
+// src/use-debounced-search.ts
+var React2 = __toESM(require("react"), 1);
+var SEARCH_DEBOUNCE_MS = 350;
+function useDebouncedSearch(value, commit, delayMs = SEARCH_DEBOUNCE_MS) {
+  const [text, setText] = React2.useState(value);
+  const commitRef = React2.useRef(commit);
+  React2.useEffect(() => {
+    commitRef.current = commit;
+  });
+  const lastExternal = React2.useRef(value);
+  React2.useEffect(() => {
+    if (lastExternal.current === value) return;
+    lastExternal.current = value;
+    setText(value);
+  }, [value]);
+  React2.useEffect(() => {
+    if (text === value) return;
+    const timer = setTimeout(() => commitRef.current(text), delayMs);
+    return () => clearTimeout(timer);
+  }, [text, value, delayMs]);
+  return [text, setText];
+}
+
+// src/use-dropdown.ts
+var React3 = __toESM(require("react"), 1);
+function useDropdown() {
+  const [isOpen, setIsOpen] = React3.useState(false);
+  const containerRef = React3.useRef(null);
+  const triggerRef = React3.useRef(null);
+  React3.useEffect(() => {
+    if (!isOpen) return;
+    const onPointerDown = (event) => {
+      const container = containerRef.current;
+      const target = event.target;
+      if (container && target instanceof Node && container.contains(target)) return;
+      setIsOpen(false);
+    };
+    const onKeyDown = (event) => {
+      if (event.key !== "Escape") return;
+      setIsOpen(false);
+      triggerRef.current?.focus();
+    };
+    document.addEventListener("pointerdown", onPointerDown, true);
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("pointerdown", onPointerDown, true);
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [isOpen]);
+  const toggle = React3.useCallback(() => setIsOpen((open) => !open), []);
+  const close = React3.useCallback(() => setIsOpen(false), []);
+  return { isOpen, toggle, close, containerRef, triggerRef };
+}
+
+// src/nex-grid.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function defaultRowId(row) {
+  const record = row;
+  const id = record === null || record === void 0 ? void 0 : record["id"];
+  return String(id ?? row);
+}
+var DENSITY_LABEL_KEY = {
+  compact: "densityCompact",
+  default: "densityDefault",
+  comfortable: "densityComfortable"
+};
+function NexGrid({
+  columns,
+  data,
+  total,
+  query,
+  onQueryChange,
+  caption,
+  density: initialDensity = "default",
+  isLoading = false,
+  error = false,
+  onRetry,
+  enableSelection = false,
+  onSelectionChange,
+  enableSearch = true,
+  searchPlaceholder,
+  toolbarActions,
+  onRowClick,
+  getRowId = defaultRowId,
+  className,
+  showSerialNumber = true,
+  enableExport = true,
+  exportFileName,
+  onExportAll,
+  fetchEndpoint,
+  badgeRules,
+  locale: localeOverrides,
+  onNotify,
+  theme = "light"
+}) {
+  const locale = (0, import_core2.resolveLocale)(localeOverrides);
+  const boolLabels = { yes: locale.booleanYes, no: locale.booleanNo };
+  const [density, setDensity] = React4.useState(initialDensity);
+  const [hiddenCols, setHiddenCols] = React4.useState(
+    () => (0, import_core2.initialHiddenColumns)(columns)
+  );
+  const [selectedIds, setSelectedIds] = React4.useState(
+    () => /* @__PURE__ */ new Set()
+  );
+  const [isExporting, setIsExporting] = React4.useState(false);
+  const columnsMenu = useDropdown();
+  const densityMenu = useDropdown();
+  const exportMenu = useDropdown();
+  const instanceId = React4.useId();
+  const columnsButtonId = `${instanceId}-columns`;
+  const densityButtonId = `${instanceId}-density`;
+  const exportButtonId = `${instanceId}-export`;
+  const jumpInputId = `${instanceId}-jump`;
+  const notify = (type, message) => {
+    onNotify?.({ type, message });
+  };
+  const currentPage = Math.max(1, query.page);
+  const pageSize = query.pageSize;
+  const totalPages = (0, import_core2.totalPagesFor)(total, pageSize);
+  const range = (0, import_core2.getRecordRange)(currentPage, pageSize, total);
+  const sort = (0, import_core2.primarySort)(query);
+  const visible = React4.useMemo(
+    () => (0, import_core2.visibleColumns)(columns, hiddenCols),
+    [columns, hiddenCols]
+  );
+  const hideable = React4.useMemo(() => columns.filter(import_core2.isHideable), [columns]);
+  const pageItems = React4.useMemo(
+    () => (0, import_core2.getPageNumbers)(currentPage, totalPages),
+    [currentPage, totalPages]
+  );
+  const pageRowIds = React4.useMemo(() => data.map((row) => getRowId(row)), [data, getRowId]);
+  const columnCount = visible.length + (showSerialNumber ? 1 : 0) + (enableSelection ? 1 : 0);
+  const [searchText, setSearchText] = useDebouncedSearch(query.q ?? "", (text) => {
+    onQueryChange((0, import_core2.withSearch)(query, text));
+  });
+  const [jumpText, setJumpText] = React4.useState(() => String(currentPage));
+  React4.useEffect(() => setJumpText(String(currentPage)), [currentPage]);
+  const submitJump = (event) => {
+    event?.preventDefault();
+    const parsed = Number.parseInt(jumpText, 10);
+    if (Number.isFinite(parsed) && parsed >= 1 && parsed <= totalPages) {
+      setJumpText(String(parsed));
+      if (parsed !== currentPage) onQueryChange((0, import_core2.withPage)(query, parsed, totalPages));
+      return;
+    }
+    setJumpText(String(currentPage));
+  };
+  const toggleSort = (columnId) => {
+    onQueryChange((0, import_core2.withToggledSort)(query, columnId));
+  };
+  const selectedOnPage = pageRowIds.filter((id) => selectedIds.has(id)).length;
+  const allPageSelected = pageRowIds.length > 0 && selectedOnPage === pageRowIds.length;
+  const somePageSelected = selectedOnPage > 0 && !allPageSelected;
+  const commitSelection = (next) => {
+    setSelectedIds(next);
+    onSelectionChange?.(Array.from(next), false);
+  };
+  const toggleSelectAll = () => {
+    const next = new Set(selectedIds);
+    for (const id of pageRowIds) {
+      if (allPageSelected) next.delete(id);
+      else next.add(id);
+    }
+    commitSelection(next);
+  };
+  const toggleSelectRow = (id) => {
+    const next = new Set(selectedIds);
+    if (next.has(id)) next.delete(id);
+    else next.add(id);
+    commitSelection(next);
+  };
+  const toggleColumn = (columnId) => {
+    setHiddenCols((prev) => ({ ...prev, [columnId]: prev[columnId] !== true }));
+  };
+  const collectExportRows = async () => {
+    if (data.length >= total || !fetchEndpoint) return data;
+    notify("info", (0, import_core2.formatMessage)(locale.exportFetchingAll, { total: total.toLocaleString() }));
+    try {
+      const result = await (0, import_core2.fetchAllPages)(async (page, size) => {
+        const url = (0, import_core2.buildQueryUrl)(fetchEndpoint, {
+          ...query,
+          page,
+          pageSize: (0, import_core2.isPageSize)(size) ? size : query.pageSize
+        });
+        const response = await fetch(url, { cache: "no-store" });
+        if (!response.ok) throw new Error(`HTTP ${response.status}`);
+        return await response.json();
+      });
+      return result.items;
+    } catch {
+      notify("error", locale.exportFetchFailed);
+      return data;
+    }
+  };
+  const handleExport = async (format) => {
+    exportMenu.close();
+    if (onExportAll) {
+      void onExportAll();
+      return;
+    }
+    setIsExporting(true);
+    try {
+      const rows = await collectExportRows();
+      if (rows.length === 0) {
+        notify("error", locale.exportNoData);
+        return;
+      }
+      const exportColumns = (0, import_core2.toExportColumns)(visible, boolLabels);
+      const prefix = exportFileName ?? (0, import_core2.filePrefixFromCaption)(caption);
+      if (format === "excel") {
+        const count = (0, import_core2.downloadExcel)({
+          filename: prefix,
+          caption,
+          rows,
+          columns: exportColumns,
+          badgeRules,
+          serialHeader: locale.serialHeader
+        });
+        notify(
+          "success",
+          (0, import_core2.formatMessage)(locale.exportExcelSuccess, { count: count.toLocaleString() })
+        );
+      } else {
+        const count = (0, import_core2.downloadCsv)((0, import_core2.timestampedFilename)(prefix), rows, exportColumns);
+        notify(
+          "success",
+          (0, import_core2.formatMessage)(locale.exportCsvSuccess, { count: count.toLocaleString() })
+        );
+      }
+    } finally {
+      setIsExporting(false);
+    }
+  };
+  const rootClassName = [
+    "nxg-root",
+    theme === "dark" ? "nxg-dark" : theme === "auto" ? "nxg-auto" : void 0,
+    className
+  ].filter((part) => Boolean(part)).join(" ");
+  if (error) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: rootClassName, "data-density": density, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "nxg-state-card", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "nxg-state-text", children: locale.errorText }),
+      onRetry ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", className: "nxg-btn", onClick: onRetry, children: locale.retryButton }) : null
+    ] }) });
+  }
+  const rowIsClickable = typeof onRowClick === "function";
+  const activateRow = (row) => () => {
+    onRowClick?.(row);
+  };
+  const rowKeyDown = (row) => (event) => {
+    if (event.key !== "Enter") return;
+    event.preventDefault();
+    onRowClick?.(row);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: rootClassName, "data-density": density, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "nxg-toolbar", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "nxg-toolbar-group", children: [
+        enableSearch ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "nxg-search", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SearchIcon, { className: "nxg-search-icon" }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "input",
+            {
+              type: "search",
+              className: "nxg-search-input",
+              value: searchText,
+              onChange: (event) => setSearchText(event.target.value),
+              placeholder: searchPlaceholder ?? locale.searchPlaceholder,
+              "aria-label": `Search ${caption}`
+            }
+          ),
+          searchText ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+            "button",
+            {
+              type: "button",
+              className: "nxg-search-clear",
+              onClick: () => setSearchText(""),
+              "aria-label": locale.clearSearch,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(XIcon, { className: "nxg-icon" }),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "nxg-sr-only", children: locale.clearSearch })
+              ]
+            }
+          ) : null
+        ] }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "nxg-menu-wrap", ref: columnsMenu.containerRef, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+            "button",
+            {
+              type: "button",
+              id: columnsButtonId,
+              className: "nxg-btn",
+              ref: columnsMenu.triggerRef,
+              "aria-haspopup": "menu",
+              "aria-expanded": columnsMenu.isOpen,
+              onClick: columnsMenu.toggle,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SlidersIcon, { className: "nxg-icon" }),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: locale.columnsButton })
+              ]
+            }
+          ),
+          columnsMenu.isOpen ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "nxg-menu", role: "menu", "aria-labelledby": columnsButtonId, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "nxg-menu-label", children: locale.toggleColumnsLabel }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "nxg-menu-separator" }),
+            hideable.map((col) => {
+              const id = (0, import_core2.getColumnId)(col);
+              const checked = hiddenCols[id] !== true;
+              return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                "button",
+                {
+                  type: "button",
+                  className: "nxg-menu-item",
+                  role: "menuitemcheckbox",
+                  "aria-checked": checked,
+                  onClick: () => toggleColumn(id),
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CheckIcon, { className: "nxg-check" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: (0, import_core2.getColumnTitle)(col) || id })
+                  ]
+                },
+                id
+              );
+            })
+          ] }) : null
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "nxg-menu-wrap", ref: densityMenu.containerRef, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+            "button",
+            {
+              type: "button",
+              id: densityButtonId,
+              className: "nxg-btn nxg-capitalize",
+              ref: densityMenu.triggerRef,
+              "aria-haspopup": "menu",
+              "aria-expanded": densityMenu.isOpen,
+              onClick: densityMenu.toggle,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FilterIcon, { className: "nxg-icon" }),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: (0, import_core2.formatMessage)(locale.densityButton, { density }) })
+              ]
+            }
+          ),
+          densityMenu.isOpen ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "nxg-menu", role: "menu", "aria-labelledby": densityButtonId, children: import_core2.DENSITIES.map((option) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+            "button",
+            {
+              type: "button",
+              className: "nxg-menu-item",
+              role: "menuitemcheckbox",
+              "aria-checked": density === option,
+              onClick: () => {
+                setDensity(option);
+                densityMenu.close();
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CheckIcon, { className: "nxg-check" }),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: locale[DENSITY_LABEL_KEY[option]] })
+              ]
+            },
+            option
+          )) }) : null
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "nxg-toolbar-group nxg-toolbar-group--end", children: [
+        enableExport ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "nxg-menu-wrap", ref: exportMenu.containerRef, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+            "button",
+            {
+              type: "button",
+              id: exportButtonId,
+              className: "nxg-btn nxg-btn--export",
+              ref: exportMenu.triggerRef,
+              disabled: isExporting,
+              "aria-haspopup": "menu",
+              "aria-expanded": exportMenu.isOpen,
+              onClick: exportMenu.toggle,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(DownloadIcon, { className: "nxg-icon" }),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: isExporting ? locale.exportingButton : locale.exportButton })
+              ]
+            }
+          ),
+          exportMenu.isOpen ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+            "div",
+            {
+              className: "nxg-menu nxg-menu--end",
+              role: "menu",
+              "aria-labelledby": exportButtonId,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                  "button",
+                  {
+                    type: "button",
+                    className: "nxg-menu-item",
+                    role: "menuitem",
+                    onClick: () => void handleExport("excel"),
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FileSpreadsheetIcon, { className: "nxg-icon--excel" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "nxg-menu-item-title", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("strong", { children: locale.exportExcelTitle }),
+                        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("small", { children: locale.exportExcelSubtitle })
+                      ] })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                  "button",
+                  {
+                    type: "button",
+                    className: "nxg-menu-item",
+                    role: "menuitem",
+                    onClick: () => void handleExport("csv"),
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FileTextIcon, { className: "nxg-icon--csv" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "nxg-menu-item-title", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("strong", { children: locale.exportCsvTitle }),
+                        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("small", { children: locale.exportCsvSubtitle })
+                      ] })
+                    ]
+                  }
+                )
+              ]
+            }
+          ) : null
+        ] }) : null,
+        toolbarActions
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "nxg-table-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("table", { className: "nxg-table", "aria-label": caption, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("tr", { children: [
+        showSerialNumber ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("th", { className: "nxg-th nxg-th--serial", scope: "col", children: locale.serialHeader }) : null,
+        enableSelection ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("th", { className: "nxg-th nxg-th--select", scope: "col", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "input",
+          {
+            type: "checkbox",
+            className: "nxg-checkbox",
+            checked: allPageSelected,
+            ref: (el) => {
+              if (el) el.indeterminate = somePageSelected;
+            },
+            onChange: toggleSelectAll,
+            "aria-label": locale.selectAllLabel
+          }
+        ) }) : null,
+        visible.map((col, index) => {
+          const id = (0, import_core2.getColumnId)(col);
+          const sortable = (0, import_core2.isSortable)(col);
+          const sorted = sortable && id !== "" && sort?.field === id;
+          const title = (0, import_core2.getColumnTitle)(col) || id;
+          return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "th",
+            {
+              scope: "col",
+              className: sortable ? "nxg-th nxg-th--sortable" : "nxg-th",
+              style: headerCellStyle(col),
+              "aria-sort": sorted ? sort?.dir === "asc" ? "ascending" : "descending" : sortable ? "none" : void 0,
+              "aria-label": title || void 0,
+              tabIndex: sortable ? 0 : void 0,
+              onClick: sortable ? () => toggleSort(id) : void 0,
+              onKeyDown: sortable ? (event) => {
+                if (event.key !== "Enter" && event.key !== " ") return;
+                event.preventDefault();
+                toggleSort(id);
+              } : void 0,
+              children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: headerInnerClass(col), children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: renderColumnHeader(col) }),
+                sortable ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: sorted ? sort?.dir === "asc" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ArrowUpIcon, { className: "nxg-sort-icon" }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ArrowDownIcon, { className: "nxg-sort-icon" }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ArrowUpDownIcon, { className: "nxg-sort-icon nxg-sort-icon--idle" }) }) : null
+              ] })
+            },
+            id || `col-${index}`
+          );
+        })
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("tbody", { children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("td", { className: "nxg-state", colSpan: Math.max(1, columnCount), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "nxg-spinner", "aria-hidden": "true" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { "aria-live": "polite", children: locale.loadingText })
+      ] }) }) : data.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("td", { className: "nxg-state", colSpan: Math.max(1, columnCount), children: locale.emptyText }) }) : data.map((row, index) => {
+        const id = pageRowIds[index] ?? String(index);
+        const isSelected = selectedIds.has(id);
+        return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+          "tr",
+          {
+            className: [
+              "nxg-row",
+              isSelected ? "nxg-row--selected" : void 0,
+              rowIsClickable ? "nxg-row--clickable" : void 0
+            ].filter(Boolean).join(" "),
+            onClick: rowIsClickable ? activateRow(row) : void 0,
+            onKeyDown: rowIsClickable ? rowKeyDown(row) : void 0,
+            tabIndex: rowIsClickable ? 0 : void 0,
+            children: [
+              showSerialNumber ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("td", { className: "nxg-td nxg-td--serial", children: (0, import_core2.serialNumber)(currentPage, pageSize, index) }) : null,
+              enableSelection ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "td",
+                {
+                  className: "nxg-td nxg-td--select",
+                  onClick: (event) => event.stopPropagation(),
+                  children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    "input",
+                    {
+                      type: "checkbox",
+                      className: "nxg-checkbox",
+                      checked: isSelected,
+                      onChange: () => toggleSelectRow(id),
+                      onClick: (event) => event.stopPropagation(),
+                      "aria-label": (0, import_core2.formatMessage)(locale.selectRowLabel, { id })
+                    }
+                  )
+                }
+              ) : null,
+              visible.map((col, colIndex) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "td",
+                {
+                  className: "nxg-td",
+                  style: bodyCellStyle(col),
+                  children: renderCellContent(col, row, boolLabels)
+                },
+                (0, import_core2.getColumnId)(col) || `col-${colIndex}`
+              ))
+            ]
+          },
+          id || index
+        );
+      }) })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "nxg-cards", children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "nxg-card", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "nxg-state", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "nxg-spinner", "aria-hidden": "true" }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { "aria-live": "polite", children: locale.loadingText })
+    ] }) }) : data.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "nxg-card", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "nxg-state", children: locale.emptyText }) }) : data.map((row, index) => {
+      const id = pageRowIds[index] ?? String(index);
+      const isSelected = selectedIds.has(id);
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+        "div",
+        {
+          className: [
+            "nxg-card",
+            isSelected ? "nxg-card--selected" : void 0,
+            rowIsClickable ? "nxg-card--clickable" : void 0
+          ].filter(Boolean).join(" "),
+          onClick: rowIsClickable ? activateRow(row) : void 0,
+          onKeyDown: rowIsClickable ? rowKeyDown(row) : void 0,
+          tabIndex: rowIsClickable ? 0 : void 0,
+          children: [
+            showSerialNumber || enableSelection ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "nxg-card-head", children: [
+              showSerialNumber ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "nxg-card-serial", children: [
+                "#",
+                (0, import_core2.serialNumber)(currentPage, pageSize, index)
+              ] }) : null,
+              enableSelection ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "span",
+                {
+                  className: "nxg-card-select",
+                  onClick: (event) => event.stopPropagation(),
+                  children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    "input",
+                    {
+                      type: "checkbox",
+                      className: "nxg-checkbox",
+                      checked: isSelected,
+                      onChange: () => toggleSelectRow(id),
+                      onClick: (event) => event.stopPropagation(),
+                      "aria-label": (0, import_core2.formatMessage)(locale.selectRowLabel, { id })
+                    }
+                  )
+                }
+              ) : null
+            ] }) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("dl", { className: "nxg-card-rows", children: visible.map((col, colIndex) => {
+              const colId = (0, import_core2.getColumnId)(col);
+              return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "nxg-card-row", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("dt", { children: (0, import_core2.getColumnTitle)(col) || colId }),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("dd", { children: renderCellContent(col, row, boolLabels) })
+              ] }, colId || `col-${colIndex}`);
+            }) })
+          ]
+        },
+        id || index
+      );
+    }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "nxg-footer", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "nxg-range", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: renderTemplate(locale.showingRange, {
+          start: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("strong", { children: range.start }),
+          end: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("strong", { children: range.end }),
+          total: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("strong", { className: "nxg-range-total", children: total.toLocaleString() })
+        }) }),
+        selectedIds.size > 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "nxg-selected-badge", children: (0, import_core2.formatMessage)(locale.selectedBadge, { count: selectedIds.size }) }) : null
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "nxg-pagination", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "nxg-rows-per-page", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: locale.rowsPerPage }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "select",
+            {
+              className: "nxg-rows-select",
+              value: String(pageSize),
+              onChange: (event) => {
+                onQueryChange((0, import_core2.withPageSize)(query, Number.parseInt(event.target.value, 10)));
+              },
+              "aria-label": locale.rowsPerPage,
+              children: import_core2.PAGE_SIZES.map((size) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: size, children: size }, size))
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "nxg-pager", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+            "button",
+            {
+              type: "button",
+              className: "nxg-page-nav",
+              disabled: currentPage <= 1,
+              onClick: () => onQueryChange((0, import_core2.withPage)(query, currentPage - 1, totalPages)),
+              "aria-label": locale.previousPage,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ChevronLeftIcon, { size: 16 }),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "nxg-sr-only", children: locale.previousPage })
+              ]
+            }
+          ),
+          pageItems.map(
+            (item, index) => item === "..." ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "nxg-page-ellipsis", children: "\u2026" }, `gap-${index}`) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "button",
+              {
+                type: "button",
+                className: item === currentPage ? "nxg-page-btn nxg-page-btn--current" : "nxg-page-btn",
+                onClick: () => onQueryChange((0, import_core2.withPage)(query, item, totalPages)),
+                "aria-label": (0, import_core2.formatMessage)(locale.pageLabel, { page: item }),
+                "aria-current": item === currentPage ? "page" : void 0,
+                children: item
+              },
+              `page-${item}`
+            )
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+            "button",
+            {
+              type: "button",
+              className: "nxg-page-nav",
+              disabled: currentPage >= totalPages,
+              onClick: () => onQueryChange((0, import_core2.withPage)(query, currentPage + 1, totalPages)),
+              "aria-label": locale.nextPage,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ChevronRightIcon, { size: 16 }),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "nxg-sr-only", children: locale.nextPage })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("form", { className: "nxg-jump", onSubmit: submitJump, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("label", { className: "nxg-jump-label", htmlFor: jumpInputId, children: locale.goToPage }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "input",
+            {
+              id: jumpInputId,
+              type: "number",
+              className: "nxg-jump-input",
+              min: 1,
+              max: totalPages,
+              value: jumpText,
+              onChange: (event) => setJumpText(event.target.value),
+              onBlur: () => submitJump(),
+              "aria-label": locale.goToPageOf
+            }
+          )
+        ] })
+      ] })
+    ] })
+  ] });
+}
+
+// src/use-client-nex-grid.ts
+var import_react = require("react");
+var import_core3 = require("@nexgrid/core");
+function useClientNexGrid(allData, options) {
+  const [query, setQuery] = (0, import_react.useState)(() => ({
+    ...(0, import_core3.defaultQuery)(),
+    ...options?.initialQuery
+  }));
+  const page = (0, import_react.useMemo)(
+    () => (0, import_core3.queryClientData)(allData, query, options),
+    [allData, query, options]
+  );
+  return {
+    data: page.items,
+    total: page.total,
+    query,
+    onQueryChange: setQuery,
+    page: page.page,
+    pageSize: page.pageSize,
+    totalPages: page.totalPages,
+    setQuery
+  };
+}
+
+// src/index.ts
+var import_core4 = require("@nexgrid/core");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DEFAULT_LOCALE,
+  DEFAULT_PAGE_SIZE,
+  NexGrid,
+  PAGE_SIZES,
+  buildODataUrl,
+  buildQueryUrl,
+  defaultQuery,
+  fromODataResponse,
+  isPageSize,
+  parseQuery,
+  primarySort,
+  queryClientData,
+  resolveLocale,
+  serializeQuery,
+  toODataParams,
+  totalPagesFor,
+  useClientNexGrid,
+  withFilter,
+  withPage,
+  withPageSize,
+  withSearch,
+  withSort,
+  withToggledSort
+});
+//# sourceMappingURL=index.cjs.map