@mond-design-system/react 4.1.0 → 4.3.0

package/dist/index.d.cts

@@ -773,6 +773,12 @@ interface SegmentedControlProps<T extends string = string> {
         bar with an avatar and a menu, where the medium step is the tallest
         thing up there. */
     size?: SegmentedControlSize;
+    /** Report the segment already chosen being picked again. Off by default:
+        a radio only fires when its checked state changes, and for most choices
+        that is the whole story. Turn it on where confirming the value on screen
+        is itself an act — pinning a language that until now was inferred from
+        the browser, so it stops following it. */
+    repick?: boolean;
     /** Drop the frame: no tray, no padding around the segments. The tray is
         what makes the group read as a form field, and in a header bar a field
         is what it is not. The chosen segment still carries its own surface. */
@@ -795,7 +801,7 @@ interface SegmentedControlProps<T extends string = string> {
  * />
  * ```
  */
-declare function SegmentedControl<T extends string = string>({ label, options, value, onChange, disabled, fullWidth, size, bare, className, }: SegmentedControlProps<T>): ReactElement;
+declare function SegmentedControl<T extends string = string>({ label, options, value, onChange, disabled, fullWidth, size, bare, repick, className, }: SegmentedControlProps<T>): ReactElement;
 
 interface SearchFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "size" | "value" | "onChange"> {
     /** Accessible name. */

package/dist/index.d.ts

@@ -773,6 +773,12 @@ interface SegmentedControlProps<T extends string = string> {
         bar with an avatar and a menu, where the medium step is the tallest
         thing up there. */
     size?: SegmentedControlSize;
+    /** Report the segment already chosen being picked again. Off by default:
+        a radio only fires when its checked state changes, and for most choices
+        that is the whole story. Turn it on where confirming the value on screen
+        is itself an act — pinning a language that until now was inferred from
+        the browser, so it stops following it. */
+    repick?: boolean;
     /** Drop the frame: no tray, no padding around the segments. The tray is
         what makes the group read as a form field, and in a header bar a field
         is what it is not. The chosen segment still carries its own surface. */
@@ -795,7 +801,7 @@ interface SegmentedControlProps<T extends string = string> {
  * />
  * ```
  */
-declare function SegmentedControl<T extends string = string>({ label, options, value, onChange, disabled, fullWidth, size, bare, className, }: SegmentedControlProps<T>): ReactElement;
+declare function SegmentedControl<T extends string = string>({ label, options, value, onChange, disabled, fullWidth, size, bare, repick, className, }: SegmentedControlProps<T>): ReactElement;
 
 interface SearchFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "size" | "value" | "onChange"> {
     /** Accessible name. */

package/dist/index.js

@@ -1237,6 +1237,7 @@ function SegmentedControl({
   fullWidth = false,
   size = "md",
   bare = false,
+  repick = false,
   className
 }) {
   const name = useId();
@@ -1261,6 +1262,7 @@ function SegmentedControl({
             value: option.value,
             checked: option.value === value,
             onChange: () => onChange(option.value),
+            onClick: repick && option.value === value ? () => onChange(option.value) : void 0,
             disabled,
             className: SegmentedControl_module_default.input
           }
@@ -1519,34 +1521,42 @@ function ToastProvider({
   const value = useMemo(() => ({ toast, dismiss }), [toast, dismiss]);
   return /* @__PURE__ */ jsxs(ToastContext.Provider, { value, children: [
     children,
-    /* @__PURE__ */ jsx("div", { role: "region", "aria-label": regionLabel, className: Toast_module_default.viewport, children: toasts.map((entry) => /* @__PURE__ */ jsxs("div", { role: "status", className: cx(Toast_module_default.toast, Toast_module_default[`tone-${entry.tone}`]), children: [
-      /* @__PURE__ */ jsxs("span", { className: Toast_module_default.body, children: [
-        /* @__PURE__ */ jsx("span", { className: Toast_module_default.title, children: entry.title }),
-        entry.description !== void 0 && /* @__PURE__ */ jsx("span", { className: Toast_module_default.description, children: entry.description })
-      ] }),
-      entry.action !== void 0 && /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          className: Toast_module_default.action,
-          onClick: () => {
-            entry.action?.onClick();
-            dismiss(entry.id);
-          },
-          children: entry.action.label
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          "aria-label": `${dismissLabel}: ${entry.title}`,
-          className: Toast_module_default.close,
-          onClick: () => dismiss(entry.id),
-          children: /* @__PURE__ */ jsx(CloseGlyph, { className: Toast_module_default.closeGlyph })
-        }
-      )
-    ] }, entry.id)) })
+    /* @__PURE__ */ jsx("div", { role: "region", "aria-label": regionLabel, className: Toast_module_default.viewport, children: toasts.map((entry) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: entry.tone === "danger" ? "alert" : "status",
+        className: cx(Toast_module_default.toast, Toast_module_default[`tone-${entry.tone}`]),
+        children: [
+          /* @__PURE__ */ jsxs("span", { className: Toast_module_default.body, children: [
+            /* @__PURE__ */ jsx("span", { className: Toast_module_default.title, children: entry.title }),
+            entry.description !== void 0 && /* @__PURE__ */ jsx("span", { className: Toast_module_default.description, children: entry.description })
+          ] }),
+          entry.action !== void 0 && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: Toast_module_default.action,
+              onClick: () => {
+                entry.action?.onClick();
+                dismiss(entry.id);
+              },
+              children: entry.action.label
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": `${dismissLabel}: ${entry.title}`,
+              className: Toast_module_default.close,
+              onClick: () => dismiss(entry.id),
+              children: /* @__PURE__ */ jsx(CloseGlyph, { className: Toast_module_default.closeGlyph })
+            }
+          )
+        ]
+      },
+      entry.id
+    )) })
   ] });
 }