@marigold/components 10.1.3 → 10.2.1

package/dist/index.js

@@ -1290,7 +1290,7 @@ var _CheckboxGroup = ({
 
 // src/Checkbox/Checkbox.tsx
 var import_jsx_runtime34 = require("react/jsx-runtime");
-var CheckMark = () => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("svg", { viewBox: "0 0 12 10", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+var CheckMark = () => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("svg", { width: "12px", height: "10px", viewBox: "0 0 12 10", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
   "path",
   {
     fill: "currentColor",
@@ -1298,7 +1298,7 @@ var CheckMark = () => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("svg", { vie
     d: "M11.915 1.548 10.367 0 4.045 6.315 1.557 3.827 0 5.373l4.045 4.046 7.87-7.871Z"
   }
 ) });
-var IndeterminateMark = () => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("svg", { width: "12", height: "3", viewBox: "0 0 12 3", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+var IndeterminateMark = () => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("svg", { width: "12px", height: "3px", viewBox: "0 0 12 3", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
   "path",
   {
     fill: "currentColor",
@@ -3039,6 +3039,14 @@ var _Pagination = ({
 }) => {
   const [currentPage, setCurrentPage] = (0, import_react44.useState)(page != null ? page : defaultPage);
   const totalPages = Math.ceil(totalItems / pageSize);
+  const isFirstRender = (0, import_react44.useRef)(true);
+  (0, import_react44.useEffect)(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    }
+    handlePageChange(1);
+  }, [pageSize]);
   const handlePageChange = (newPage) => {
     setCurrentPage(newPage);
     onChange(newPage);
@@ -4143,12 +4151,26 @@ _Tooltip.Trigger = _TooltipTrigger;
 var import_visually_hidden = require("@react-aria/visually-hidden");
 
 // src/XLoader/XLoader.tsx
+var import_react64 = require("react");
 var import_react_aria_components57 = require("react-aria-components");
 var import_system90 = require("@marigold/system");
 
 // src/XLoader/BaseLoader.tsx
 var import_react_aria_components56 = require("react-aria-components");
+var import_i18n6 = require("@react-aria/i18n");
 var import_system89 = require("@marigold/system");
+
+// src/intl/messages.ts
+var intlMessages2 = {
+  "de-DE": {
+    loadingMessage: "Lade..."
+  },
+  "en-US": {
+    loadingMessage: "Loading..."
+  }
+};
+
+// src/XLoader/BaseLoader.tsx
 var import_jsx_runtime108 = require("react/jsx-runtime");
 var BaseLoader = ({
   variant,
@@ -4157,13 +4179,14 @@ var BaseLoader = ({
   "aria-label": ariaLabel,
   ...props
 }) => {
+  const stringFormatter = (0, import_i18n6.useLocalizedStringFormatter)(intlMessages2, "marigold");
   const className = (0, import_system89.useClassNames)({ component: "XLoader", variant, size });
   return /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)(
     import_react_aria_components56.ProgressBar,
     {
       className: className.container,
       isIndeterminate: true,
-      "aria-label": ariaLabel || children ? ariaLabel : "Loading...",
+      "aria-label": ariaLabel || children ? ariaLabel : stringFormatter.format("loadingMessage"),
       ...props,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)(
@@ -4385,12 +4408,8 @@ var BaseLoader = ({
 // src/XLoader/XLoader.tsx
 var import_jsx_runtime109 = require("react/jsx-runtime");
 var LoaderFullSize = (props) => {
-  const className = (0, import_system90.useClassNames)({
-    component: "Underlay",
-    variant: "modal",
-    className: "fixed left-0 top-0 z-10 h-[--visual-viewport-height] w-screen"
-  });
-  return /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_react_aria_components57.ModalOverlay, { defaultOpen: true, className, isKeyboardDismissDisabled: true, children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_react_aria_components57.Modal, { className: "grid h-[--visual-viewport-height] cursor-progress place-items-center", children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_react_aria_components57.Dialog, { className: "outline-0", "aria-label": "Fullscreen Loader", children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(BaseLoader, { ...props }) }) }) });
+  const id = (0, import_react64.useId)();
+  return /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(Underlay, { defaultOpen: true, keyboardDismissable: true, variant: "modal", children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_react_aria_components57.Modal, { className: "grid h-[--visual-viewport-height] cursor-progress place-items-center", children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_react_aria_components57.Dialog, { className: "outline-0", "aria-labelledby": id, children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(BaseLoader, { id, ...props }) }) }) });
 };
 var LoaderInline = (props) => {
   const className = (0, import_system90.useClassNames)({
@@ -4407,9 +4426,9 @@ var import_react_aria_components61 = require("react-aria-components");
 var import_system93 = require("@marigold/system");
 
 // src/Tabs/Context.ts
-var import_react64 = require("react");
-var TabContext = (0, import_react64.createContext)({});
-var useTabContext = () => (0, import_react64.useContext)(TabContext);
+var import_react65 = require("react");
+var TabContext = (0, import_react65.createContext)({});
+var useTabContext = () => (0, import_react65.useContext)(TabContext);
 
 // src/Tabs/Tab.tsx
 var import_react_aria_components58 = require("react-aria-components");

package/dist/index.mjs

@@ -1198,7 +1198,7 @@ var _CheckboxGroup = ({
 
 // src/Checkbox/Checkbox.tsx
 import { Fragment as Fragment3, jsx as jsx34, jsxs as jsxs14 } from "react/jsx-runtime";
-var CheckMark = () => /* @__PURE__ */ jsx34("svg", { viewBox: "0 0 12 10", children: /* @__PURE__ */ jsx34(
+var CheckMark = () => /* @__PURE__ */ jsx34("svg", { width: "12px", height: "10px", viewBox: "0 0 12 10", children: /* @__PURE__ */ jsx34(
   "path",
   {
     fill: "currentColor",
@@ -1206,7 +1206,7 @@ var CheckMark = () => /* @__PURE__ */ jsx34("svg", { viewBox: "0 0 12 10", child
     d: "M11.915 1.548 10.367 0 4.045 6.315 1.557 3.827 0 5.373l4.045 4.046 7.87-7.871Z"
   }
 ) });
-var IndeterminateMark = () => /* @__PURE__ */ jsx34("svg", { width: "12", height: "3", viewBox: "0 0 12 3", children: /* @__PURE__ */ jsx34(
+var IndeterminateMark = () => /* @__PURE__ */ jsx34("svg", { width: "12px", height: "3px", viewBox: "0 0 12 3", children: /* @__PURE__ */ jsx34(
   "path",
   {
     fill: "currentColor",
@@ -2726,7 +2726,7 @@ var _NumberField = forwardRef19(
 );
 
 // src/Pagination/Pagination.tsx
-import { useEffect as useEffect5, useState as useState5 } from "react";
+import { useEffect as useEffect5, useRef as useRef7, useState as useState5 } from "react";
 
 // src/Pagination/Ellipsis.tsx
 import { jsx as jsx78 } from "react/jsx-runtime";
@@ -2978,6 +2978,14 @@ var _Pagination = ({
 }) => {
   const [currentPage, setCurrentPage] = useState5(page != null ? page : defaultPage);
   const totalPages = Math.ceil(totalItems / pageSize);
+  const isFirstRender = useRef7(true);
+  useEffect5(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    }
+    handlePageChange(1);
+  }, [pageSize]);
   const handlePageChange = (newPage) => {
     setCurrentPage(newPage);
     onChange(newPage);
@@ -3531,7 +3539,7 @@ var _Switch = forwardRef26(
 );
 
 // src/Table/Table.tsx
-import { useRef as useRef13 } from "react";
+import { useRef as useRef14 } from "react";
 import { useTable } from "@react-aria/table";
 import {
   TableBody as Body2,
@@ -3569,14 +3577,14 @@ var TableBody = ({ children, emptyState }) => {
 };
 
 // src/Table/TableCell.tsx
-import { useRef as useRef7 } from "react";
+import { useRef as useRef8 } from "react";
 import { useFocusRing as useFocusRing2 } from "@react-aria/focus";
 import { useTableCell } from "@react-aria/table";
 import { mergeProps as mergeProps3 } from "@react-aria/utils";
 import { cn as cn53, useStateProps as useStateProps2 } from "@marigold/system";
 import { jsx as jsx93 } from "react/jsx-runtime";
 var TableCell = ({ cell, align = "left" }) => {
-  const ref = useRef7(null);
+  const ref = useRef8(null);
   const { interactive, state, classNames: classNames2 } = useTableContext();
   const disabled = state.disabledKeys.has(cell.parentKey);
   const { gridCellProps } = useTableCell(
@@ -3611,7 +3619,7 @@ var TableCell = ({ cell, align = "left" }) => {
 };
 
 // src/Table/TableCheckboxCell.tsx
-import { useRef as useRef8 } from "react";
+import { useRef as useRef9 } from "react";
 import { useFocusRing as useFocusRing3 } from "@react-aria/focus";
 import { useTableCell as useTableCell2, useTableSelectionCheckbox } from "@react-aria/table";
 import { mergeProps as mergeProps4 } from "@react-aria/utils";
@@ -3640,7 +3648,7 @@ var mapCheckboxProps = ({
 // src/Table/TableCheckboxCell.tsx
 import { jsx as jsx94 } from "react/jsx-runtime";
 var TableCheckboxCell = ({ cell }) => {
-  const ref = useRef8(null);
+  const ref = useRef9(null);
   const { state, classNames: classNames2 } = useTableContext();
   const disabled = state.disabledKeys.has(cell.parentKey);
   const { gridCellProps } = useTableCell2(
@@ -3668,7 +3676,7 @@ var TableCheckboxCell = ({ cell }) => {
 };
 
 // src/Table/TableColumnHeader.tsx
-import { useRef as useRef9 } from "react";
+import { useRef as useRef10 } from "react";
 import { useFocusRing as useFocusRing4 } from "@react-aria/focus";
 import { useHover } from "@react-aria/interactions";
 import { useTableColumnHeader } from "@react-aria/table";
@@ -3681,7 +3689,7 @@ var TableColumnHeader = ({
   align = "left"
 }) => {
   var _a, _b;
-  const ref = useRef9(null);
+  const ref = useRef10(null);
   const { state, classNames: classNames2 } = useTableContext();
   const { columnHeaderProps } = useTableColumnHeader(
     {
@@ -3729,18 +3737,18 @@ var TableHeader = ({ stickyHeader, children }) => {
 };
 
 // src/Table/TableHeaderRow.tsx
-import { useRef as useRef10 } from "react";
+import { useRef as useRef11 } from "react";
 import { useTableHeaderRow } from "@react-aria/table";
 import { jsx as jsx97 } from "react/jsx-runtime";
 var TableHeaderRow = ({ item, children }) => {
   const { state } = useTableContext();
-  const ref = useRef10(null);
+  const ref = useRef11(null);
   const { rowProps } = useTableHeaderRow({ node: item }, state, ref);
   return /* @__PURE__ */ jsx97("tr", { ...rowProps, ref, children });
 };
 
 // src/Table/TableRow.tsx
-import { useRef as useRef11 } from "react";
+import { useRef as useRef12 } from "react";
 import { useFocusRing as useFocusRing5 } from "@react-aria/focus";
 import { useHover as useHover2 } from "@react-aria/interactions";
 import { useTableRow } from "@react-aria/table";
@@ -3748,7 +3756,7 @@ import { mergeProps as mergeProps6 } from "@react-aria/utils";
 import { cn as cn56, useClassNames as useClassNames52, useStateProps as useStateProps5 } from "@marigold/system";
 import { jsx as jsx98 } from "react/jsx-runtime";
 var TableRow = ({ children, row }) => {
-  const ref = useRef11(null);
+  const ref = useRef12(null);
   const { interactive, state, ...ctx } = useTableContext();
   const { variant, size } = row.props;
   const classNames2 = useClassNames52({
@@ -3794,7 +3802,7 @@ var TableRow = ({ children, row }) => {
 };
 
 // src/Table/TableSelectAllCell.tsx
-import { useRef as useRef12 } from "react";
+import { useRef as useRef13 } from "react";
 import { useFocusRing as useFocusRing6 } from "@react-aria/focus";
 import { useHover as useHover3 } from "@react-aria/interactions";
 import {
@@ -3813,7 +3821,7 @@ var TableSelectAllCell = ({
   width = "auto",
   align = "left"
 }) => {
-  const ref = useRef12(null);
+  const ref = useRef13(null);
   const { state, classNames: classNames2 } = useTableContext();
   const { columnHeaderProps } = useTableColumnHeader2(
     {
@@ -3855,7 +3863,7 @@ var Table = ({
   ...props
 }) => {
   const interactive = selectionMode !== "none";
-  const tableRef = useRef13(null);
+  const tableRef = useRef14(null);
   const state = useTableState({
     ...props,
     selectionMode,
@@ -4128,12 +4136,26 @@ _Tooltip.Trigger = _TooltipTrigger;
 import { VisuallyHidden } from "@react-aria/visually-hidden";
 
 // src/XLoader/XLoader.tsx
-import { Dialog as Dialog2, Modal as Modal2, ModalOverlay as ModalOverlay2 } from "react-aria-components";
+import { useId as useId2 } from "react";
+import { Dialog as Dialog2, Modal as Modal2 } from "react-aria-components";
 import { useClassNames as useClassNames58 } from "@marigold/system";
 
 // src/XLoader/BaseLoader.tsx
 import { Label as Label2, ProgressBar as ProgressBar2 } from "react-aria-components";
+import { useLocalizedStringFormatter as useLocalizedStringFormatter2 } from "@react-aria/i18n";
 import { useClassNames as useClassNames57 } from "@marigold/system";
+
+// src/intl/messages.ts
+var intlMessages2 = {
+  "de-DE": {
+    loadingMessage: "Lade..."
+  },
+  "en-US": {
+    loadingMessage: "Loading..."
+  }
+};
+
+// src/XLoader/BaseLoader.tsx
 import { jsx as jsx107, jsxs as jsxs41 } from "react/jsx-runtime";
 var BaseLoader = ({
   variant,
@@ -4142,13 +4164,14 @@ var BaseLoader = ({
   "aria-label": ariaLabel,
   ...props
 }) => {
+  const stringFormatter = useLocalizedStringFormatter2(intlMessages2, "marigold");
   const className = useClassNames57({ component: "XLoader", variant, size });
   return /* @__PURE__ */ jsxs41(
     ProgressBar2,
     {
       className: className.container,
       isIndeterminate: true,
-      "aria-label": ariaLabel || children ? ariaLabel : "Loading...",
+      "aria-label": ariaLabel || children ? ariaLabel : stringFormatter.format("loadingMessage"),
       ...props,
       children: [
         /* @__PURE__ */ jsxs41(
@@ -4370,12 +4393,8 @@ var BaseLoader = ({
 // src/XLoader/XLoader.tsx
 import { jsx as jsx108 } from "react/jsx-runtime";
 var LoaderFullSize = (props) => {
-  const className = useClassNames58({
-    component: "Underlay",
-    variant: "modal",
-    className: "fixed left-0 top-0 z-10 h-[--visual-viewport-height] w-screen"
-  });
-  return /* @__PURE__ */ jsx108(ModalOverlay2, { defaultOpen: true, className, isKeyboardDismissDisabled: true, children: /* @__PURE__ */ jsx108(Modal2, { className: "grid h-[--visual-viewport-height] cursor-progress place-items-center", children: /* @__PURE__ */ jsx108(Dialog2, { className: "outline-0", "aria-label": "Fullscreen Loader", children: /* @__PURE__ */ jsx108(BaseLoader, { ...props }) }) }) });
+  const id = useId2();
+  return /* @__PURE__ */ jsx108(Underlay, { defaultOpen: true, keyboardDismissable: true, variant: "modal", children: /* @__PURE__ */ jsx108(Modal2, { className: "grid h-[--visual-viewport-height] cursor-progress place-items-center", children: /* @__PURE__ */ jsx108(Dialog2, { className: "outline-0", "aria-labelledby": id, children: /* @__PURE__ */ jsx108(BaseLoader, { id, ...props }) }) }) });
 };
 var LoaderInline = (props) => {
   const className = useClassNames58({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marigold/components",
-  "version": "10.1.3",
+  "version": "10.2.1",
   "description": "Components for the Marigold Design System",
   "license": "MIT",
   "keywords": [
@@ -43,7 +43,7 @@
     "@react-types/shared": "3.27.0",
     "@react-types/table": "3.10.4",
     "react-aria-components": "1.6.0",
-    "@marigold/system": "10.1.3",
+    "@marigold/system": "10.2.1",
     "@marigold/types": "1.2.1"
   },
   "peerDependencies": {
@@ -55,7 +55,7 @@
     "react": "19.0.0",
     "react-dom": "19.0.0",
     "tsup": "8.3.5",
-    "@marigold/icons": "1.2.62",
+    "@marigold/icons": "1.2.64",
     "@marigold/tsconfig": "0.4.0"
   },
   "scripts": {