@gridkitjs/react 0.12.0 → 0.14.0

package/dist/index.js

@@ -81,6 +81,24 @@ function GroupIcon() {
 function FilterIcon() {
   return /* @__PURE__ */ jsx2(Icon, { children: /* @__PURE__ */ jsx2("path", { d: "M22 3H2l8 9.46V19l4 2v-8.54z" }) });
 }
+function ChevronLeftIcon() {
+  return /* @__PURE__ */ jsx2(Icon, { children: /* @__PURE__ */ jsx2("path", { d: "m15 18-6-6 6-6" }) });
+}
+function ChevronRightIcon() {
+  return /* @__PURE__ */ jsx2(Icon, { children: /* @__PURE__ */ jsx2("path", { d: "m9 18 6-6-6-6" }) });
+}
+function ChevronsLeftIcon() {
+  return /* @__PURE__ */ jsxs(Icon, { children: [
+    /* @__PURE__ */ jsx2("path", { d: "m11 17-5-5 5-5" }),
+    /* @__PURE__ */ jsx2("path", { d: "m18 17-5-5 5-5" })
+  ] });
+}
+function ChevronsRightIcon() {
+  return /* @__PURE__ */ jsxs(Icon, { children: [
+    /* @__PURE__ */ jsx2("path", { d: "m6 17 5-5-5-5" }),
+    /* @__PURE__ */ jsx2("path", { d: "m13 17 5-5-5-5" })
+  ] });
+}
 
 // src/DataGrid/isOwnEvent.ts
 function isOwnEvent(event) {
@@ -119,7 +137,11 @@ function useGridNavigation({
   };
   const [gridFocus] = useState(() => createGridFocus(options));
   gridFocus.setOptions(options);
-  const focus = useSyncExternalStore(gridFocus.subscribe, gridFocus.getFocus);
+  const focus = useSyncExternalStore(
+    gridFocus.subscribe,
+    gridFocus.getFocus,
+    gridFocus.getFocus
+  );
   const [rows] = useState(() => ({
     getHeaderRow: () => headerTableRef.current?.tHead?.rows[0] ?? null,
     getBodyRow: (rowIndex) => findBodyRow(bodyTableRef.current, rowIndex)
@@ -221,7 +243,7 @@ function GridHeader({
       panels.open("filter", { area: "header", columnId });
     }
   }
-  return /* @__PURE__ */ jsxs2("thead", { children: [
+  return /* @__PURE__ */ jsxs2("thead", { role: "rowgroup", children: [
     /* @__PURE__ */ jsx3("tr", { className: "grid-header", role: "row", "aria-rowindex": 1, children: columns.map((entry, index) => {
       const { column } = entry;
       const resizing = resize.activeColumnId === entry.id;
@@ -904,6 +926,7 @@ function GridBody({
   return /* @__PURE__ */ jsxs5(
     "tbody",
     {
+      role: "rowgroup",
       className: "grid-body",
       onFocus: (event) => {
         const group = groupRowFrom(event.target);
@@ -1087,9 +1110,10 @@ function GridFooter({
   aggregates,
   results,
   rows,
-  locale
+  locale,
+  ariaRowIndex
 }) {
-  return /* @__PURE__ */ jsx8("tfoot", { children: /* @__PURE__ */ jsx8("tr", { className: "grid-footer", role: "row", children: columns.map((entry) => {
+  return /* @__PURE__ */ jsx8("tfoot", { role: "rowgroup", children: /* @__PURE__ */ jsx8("tr", { className: "grid-footer", role: "row", "aria-rowindex": ariaRowIndex, children: columns.map((entry) => {
     const specs = aggregates.filter(
       (candidate) => candidate.columnId === entry.id
     );
@@ -1120,10 +1144,37 @@ function GridFooter({
 // src/DataGrid/components/GridPager.tsx
 import { paginationWindow } from "@gridkitjs/core";
 import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+function PagerNavButton({
+  className,
+  label,
+  disabled,
+  onClick,
+  children
+}) {
+  return /* @__PURE__ */ jsx9(
+    "button",
+    {
+      type: "button",
+      className: `grid-pager-button grid-pager-nav ${className}`,
+      "aria-label": label,
+      title: label,
+      ...ariaAttr(disabled, "aria-disabled", true),
+      onClick: () => {
+        if (!disabled) onClick();
+      },
+      children
+    }
+  );
+}
 function GridPager({ pager, config, messages }) {
   const { pagination, pageCount, currentPage } = pager;
   const variant = config?.variant ?? "compact";
   const sizeOptions = config?.sizeOptions;
+  const atFirst = pagination.pageIndex <= 0;
+  const atLast = pagination.pageIndex >= pageCount - 1;
+  const barStyle = {
+    "--gridkit-pager-digits": String(String(Math.max(1, pageCount)).length)
+  };
   return /* @__PURE__ */ jsxs6(
     "div",
     {
@@ -1131,59 +1182,90 @@ function GridPager({ pager, config, messages }) {
       role: "group",
       "aria-label": messages.pagerLabel,
       children: [
-        /* @__PURE__ */ jsx9(
-          "button",
-          {
-            type: "button",
-            className: "grid-pager-button",
-            disabled: pagination.pageIndex <= 0,
-            onClick: () => {
-              pager.previousPage();
-            },
-            children: messages.previousPage
-          }
-        ),
-        variant === "numbered" ? paginationWindow(currentPage, pageCount, {
-          boundaryCount: config?.boundaryCount,
-          siblingCount: config?.siblingCount
-        }).map(
-          (entry, index) => entry === "ellipsis" ? /* @__PURE__ */ jsx9(
-            "span",
+        /* @__PURE__ */ jsxs6("div", { className: "grid-pager-bar", style: barStyle, children: [
+          /* @__PURE__ */ jsx9(
+            PagerNavButton,
             {
-              className: "grid-pager-ellipsis",
-              "aria-hidden": "true",
-              children: "\u2026"
-            },
-            `ellipsis-${String(index)}`
-          ) : /* @__PURE__ */ jsx9(
-            "button",
+              className: "grid-pager-first",
+              label: messages.firstPage,
+              disabled: atFirst,
+              onClick: () => {
+                pager.goToPage(0);
+              },
+              children: /* @__PURE__ */ jsx9(ChevronsLeftIcon, {})
+            }
+          ),
+          /* @__PURE__ */ jsx9(
+            PagerNavButton,
             {
-              type: "button",
-              className: "grid-pager-button",
-              "aria-label": messages.pageButtonLabel(entry),
-              "aria-current": entry === currentPage ? "page" : void 0,
+              className: "grid-pager-previous",
+              label: messages.previousPage,
+              disabled: atFirst,
               onClick: () => {
-                pager.goToPage(entry - 1);
+                pager.previousPage();
               },
-              children: entry
-            },
-            entry
+              children: /* @__PURE__ */ jsx9(ChevronLeftIcon, {})
+            }
+          ),
+          variant === "numbered" ? paginationWindow(currentPage, pageCount, {
+            boundaryCount: config?.boundaryCount,
+            siblingCount: config?.siblingCount
+          }).map(
+            (entry, index) => entry === "ellipsis" ? /* @__PURE__ */ jsx9(
+              "span",
+              {
+                className: "grid-pager-ellipsis",
+                "aria-hidden": "true",
+                children: "\u2026"
+              },
+              `ellipsis-${String(index)}`
+            ) : /* @__PURE__ */ jsx9(
+              "button",
+              {
+                type: "button",
+                className: "grid-pager-button grid-pager-page",
+                "aria-label": messages.pageButtonLabel(entry),
+                "aria-current": entry === currentPage ? "page" : void 0,
+                onClick: () => {
+                  pager.goToPage(entry - 1);
+                },
+                children: entry
+              },
+              entry
+            )
+          ) : /* @__PURE__ */ jsxs6("span", { className: "grid-pager-status-slot", children: [
+            /* @__PURE__ */ jsx9("span", { className: "grid-pager-status", children: messages.pageStatus(
+              pageCount === 0 ? 0 : currentPage,
+              pageCount
+            ) }),
+            /* @__PURE__ */ jsx9("span", { className: "grid-pager-status-sizer", "aria-hidden": "true", children: messages.pageStatus(pageCount, pageCount) })
+          ] }),
+          /* @__PURE__ */ jsx9(
+            PagerNavButton,
+            {
+              className: "grid-pager-next",
+              label: messages.nextPage,
+              disabled: atLast,
+              onClick: () => {
+                pager.nextPage();
+              },
+              children: /* @__PURE__ */ jsx9(ChevronRightIcon, {})
+            }
+          ),
+          /* @__PURE__ */ jsx9(
+            PagerNavButton,
+            {
+              className: "grid-pager-last",
+              label: messages.lastPage,
+              disabled: atLast,
+              onClick: () => {
+                pager.goToPage(pageCount - 1);
+              },
+              children: /* @__PURE__ */ jsx9(ChevronsRightIcon, {})
+            }
           )
-        ) : /* @__PURE__ */ jsx9("span", { className: "grid-pager-status", children: messages.pageStatus(pageCount === 0 ? 0 : currentPage, pageCount) }),
-        /* @__PURE__ */ jsx9(
-          "button",
-          {
-            type: "button",
-            className: "grid-pager-button",
-            disabled: pagination.pageIndex >= pageCount - 1,
-            onClick: () => {
-              pager.nextPage();
-            },
-            children: messages.nextPage
-          }
-        ),
+        ] }),
         sizeOptions !== void 0 && sizeOptions.length > 0 && /* @__PURE__ */ jsxs6("label", { className: "grid-pager-page-size", children: [
-          messages.pageSizeLabel,
           /* @__PURE__ */ jsx9(
             "select",
             {
@@ -1193,7 +1275,8 @@ function GridPager({ pager, config, messages }) {
               },
               children: sizeOptions.map((size) => /* @__PURE__ */ jsx9("option", { value: size, children: size }, size))
             }
-          )
+          ),
+          /* @__PURE__ */ jsx9("span", { className: "grid-pager-page-size-label", children: messages.pageSizeLabel })
         ] })
       ]
     }
@@ -1891,10 +1974,10 @@ function CheckIcon() {
 function ChevronDownIcon() {
   return /* @__PURE__ */ jsx12(Icon, { children: /* @__PURE__ */ jsx12("path", { d: "m6 9 6 6 6-6" }) });
 }
-function ChevronLeftIcon() {
+function ChevronLeftIcon2() {
   return /* @__PURE__ */ jsx12(Icon, { children: /* @__PURE__ */ jsx12("path", { d: "m15 18-6-6 6-6" }) });
 }
-function ChevronRightIcon() {
+function ChevronRightIcon2() {
   return /* @__PURE__ */ jsx12(Icon, { children: /* @__PURE__ */ jsx12("path", { d: "m9 18 6-6-6-6" }) });
 }
 
@@ -1931,7 +2014,7 @@ function MenuItem({
         /* @__PURE__ */ jsx13("span", { className: "menu-item-icon", "aria-hidden": "true", children: checked === true ? /* @__PURE__ */ jsx13(CheckIcon, {}) : /* @__PURE__ */ jsx13(MenuIcon, { name: entry.icon }) }),
         /* @__PURE__ */ jsx13("span", { className: "menu-item-label", children: entry.label }),
         shortcut !== void 0 && /* @__PURE__ */ jsx13("span", { className: "menu-item-shortcut", "aria-hidden": "true", children: shortcut }),
-        !isItem2 && /* @__PURE__ */ jsx13("span", { className: "menu-submenu-indicator", "aria-hidden": "true", children: /* @__PURE__ */ jsx13(ChevronRightIcon, {}) })
+        !isItem2 && /* @__PURE__ */ jsx13("span", { className: "menu-submenu-indicator", "aria-hidden": "true", children: /* @__PURE__ */ jsx13(ChevronRightIcon2, {}) })
       ]
     }
   );
@@ -2571,7 +2654,7 @@ function OperatorMenuButton({
         children: [
           /* @__PURE__ */ jsx16("span", { className: "filter-menu-submenu-icon", "aria-hidden": "true", children: active !== void 0 && /* @__PURE__ */ jsx16(CheckIcon, {}) }),
           label,
-          /* @__PURE__ */ jsx16("span", { className: "filter-menu-submenu-indicator", "aria-hidden": "true", children: /* @__PURE__ */ jsx16(ChevronRightIcon, {}) })
+          /* @__PURE__ */ jsx16("span", { className: "filter-menu-submenu-indicator", "aria-hidden": "true", children: /* @__PURE__ */ jsx16(ChevronRightIcon2, {}) })
         ]
       }
     ),
@@ -3078,7 +3161,7 @@ function ExcelFilterEditor({
             switchTo(null);
           },
           children: [
-            /* @__PURE__ */ jsx20("span", { className: "filter-menu-back-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx20(ChevronLeftIcon, {}) }),
+            /* @__PURE__ */ jsx20("span", { className: "filter-menu-back-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx20(ChevronLeftIcon2, {}) }),
             messages.filterBackToValues
           ]
         }
@@ -4043,7 +4126,11 @@ function useGridController(options) {
     () => createGridController(options)
   );
   controller.setOptions(options);
-  const state = useSyncExternalStore2(controller.subscribe, controller.getState);
+  const state = useSyncExternalStore2(
+    controller.subscribe,
+    controller.getState,
+    controller.getState
+  );
   return { controller, state, view: controller.getView() };
 }
 
@@ -4224,8 +4311,8 @@ function DataGrid(props) {
   const gridId = useId2();
   const announce = useLiveAnnouncer(viewportRef);
   const messages = useMemo5(
-    () => resolveMessages(messageOverrides),
-    [messageOverrides]
+    () => resolveMessages(messageOverrides, locale),
+    [messageOverrides, locale]
   );
   const { controller, state, view } = useGridController({
     ...props,
@@ -4502,6 +4589,7 @@ function DataGrid(props) {
     selection.columnMode === false ? "" : "selectable-columns",
     selection.cellMode === false ? "" : "selectable-cells"
   );
+  const hasFooter = aggregates.length > 0;
   return /* @__PURE__ */ jsxs19("div", { className: "gridkit-data-grid-viewport", ref: viewportRef, children: [
     /* @__PURE__ */ jsx26(
       GridToolbar,
@@ -4535,7 +4623,7 @@ function DataGrid(props) {
         id: gridId,
         className: "gridkit-data-grid-tables",
         role: state.groupBy.length > 0 ? "treegrid" : "grid",
-        "aria-rowcount": view.displayRows.length + 1,
+        "aria-rowcount": view.displayRows.length + (hasFooter ? 2 : 1),
         "aria-colcount": view.columns.length,
         ...ariaAttr(multiselectable, "aria-multiselectable", true),
         ...ariaAttr(labelledBy !== void 0, "aria-labelledby", labelledBy),
@@ -4564,6 +4652,7 @@ function DataGrid(props) {
             "table",
             {
               ref: headerTableRef,
+              role: "presentation",
               style: { width: totalColumnWidth(view.columns) },
               className: classNames(gridTableClassName, "gridkit-data-grid-header"),
               children: [
@@ -4601,6 +4690,7 @@ function DataGrid(props) {
                 "table",
                 {
                   ref: bodyTableRef,
+                  role: "presentation",
                   style: { width: totalColumnWidth(view.columns) },
                   className: gridTableClassName,
                   children: [
@@ -4634,9 +4724,10 @@ function DataGrid(props) {
               )
             }
           ),
-          aggregates.length > 0 && /* @__PURE__ */ jsxs19(
+          hasFooter && /* @__PURE__ */ jsxs19(
             "table",
             {
+              role: "presentation",
               style: { width: totalColumnWidth(view.columns) },
               className: classNames(
                 gridTableClassName,
@@ -4651,7 +4742,8 @@ function DataGrid(props) {
                     aggregates,
                     results: view.grandTotal,
                     rows: view.rows.map((entry) => entry.row),
-                    locale
+                    locale,
+                    ariaRowIndex: view.displayRows.length + 2
                   }
                 )
               ]
@@ -4694,10 +4786,14 @@ function useGridSnapshot(gridRef, getSnapshot, fallback) {
     },
     [gridRef]
   );
-  return useSyncExternalStore3(subscribe, () => {
-    const api = gridRef.current;
-    return api === null ? fallback : getSnapshot(api);
-  });
+  return useSyncExternalStore3(
+    subscribe,
+    () => {
+      const api = gridRef.current;
+      return api === null ? fallback : getSnapshot(api);
+    },
+    () => fallback
+  );
 }
 
 // src/DataGrid/hooks/usePaginationState.ts