@mond-design-system/react 4.9.0 → 4.10.1

package/dist/index.cjs

@@ -503,7 +503,15 @@ function Field({ label, children, hint, error, required = false, className }) {
         children
       }
     ),
-    message && /* @__PURE__ */ jsxRuntime.jsx("span", { id: messageId, className: cx(Field_module_default.message, error !== void 0 && Field_module_default.error), children: message })
+    message && /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        id: messageId,
+        role: error !== void 0 ? "alert" : void 0,
+        className: cx(Field_module_default.message, error !== void 0 && Field_module_default.error),
+        children: message
+      }
+    )
   ] });
 }
 
@@ -1353,6 +1361,85 @@ function SearchField({
   ] });
 }
 
+// mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Scroller/Scroller.module.css?mds-scoped
+var Scroller_module_default = { "scroller": "mds-Scroller__scroller", "header": "mds-Scroller__header", "trailing": "mds-Scroller__trailing", "track": "mds-Scroller__track", "arrows": "mds-Scroller__arrows" };
+var STEP = 0.8;
+function Scroller({
+  title,
+  labels,
+  level = 2,
+  action,
+  children,
+  className,
+  ...rest
+}) {
+  const track = react.useRef(null);
+  const titleId = react.useId();
+  const [atStart, setAtStart] = react.useState(true);
+  const [atEnd, setAtEnd] = react.useState(true);
+  const measure = react.useCallback(() => {
+    const row = track.current;
+    if (row === null) return;
+    setAtStart(row.scrollLeft <= 0);
+    setAtEnd(row.scrollLeft + row.clientWidth >= row.scrollWidth - 1);
+  }, []);
+  react.useEffect(measure);
+  react.useEffect(() => {
+    window.addEventListener("resize", measure);
+    return () => window.removeEventListener("resize", measure);
+  }, [measure]);
+  const step = (direction) => {
+    const row = track.current;
+    if (row === null) return;
+    row.scrollBy({ left: direction * Math.round(row.clientWidth * STEP) });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: cx(Scroller_module_default.scroller, className), ...rest, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: Scroller_module_default.header, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Heading, { level, variant: "label", id: titleId, children: title }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: Scroller_module_default.trailing, children: [
+        action,
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: Scroller_module_default.arrows, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "sm",
+              iconOnly: true,
+              "aria-label": labels.previous,
+              disabled: atStart,
+              onClick: () => step(-1),
+              children: /* @__PURE__ */ jsxRuntime.jsx(ChevronLeftGlyph, {})
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "sm",
+              iconOnly: true,
+              "aria-label": labels.next,
+              disabled: atEnd,
+              onClick: () => step(1),
+              children: /* @__PURE__ */ jsxRuntime.jsx(ChevronRightGlyph, {})
+            }
+          )
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: Scroller_module_default.track,
+        ref: track,
+        role: "group",
+        "aria-labelledby": titleId,
+        onScroll: measure,
+        children
+      }
+    )
+  ] });
+}
+
 // mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/List/List.module.css?mds-scoped
 var List_module_default = { "group": "mds-List__group", "labelledGroup": "mds-List__labelledGroup", "label": "mds-List__label", "item": "mds-List__item", "surface-card": "mds-List__surface-card", "surface-sunken": "mds-List__surface-sunken", "surface-accent": "mds-List__surface-accent", "surface-plain": "mds-List__surface-plain", "row": "mds-List__row", "interactive": "mds-List__interactive", "withActions": "mds-List__withActions", "actions": "mds-List__actions", "leading": "mds-List__leading", "trailing": "mds-List__trailing", "text": "mds-List__text", "title": "mds-List__title", "description": "mds-List__description" };
 var ListGroupContext = react.createContext(false);
@@ -1411,7 +1498,7 @@ function ListItem({
       ref,
       ...rest,
       children: [
-        href !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(LinkElement, { className: cx(List_module_default.row, List_module_default.interactive), href, children: content }) : onClick !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+        href !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(LinkElement, { className: cx(List_module_default.row, List_module_default.interactive), href, onClick, children: content }) : onClick !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
             type: "button",
@@ -2349,7 +2436,7 @@ function FileDrop({
 var Lightbox_module_default = { "panel": "mds-Lightbox__panel", "bar": "mds-Lightbox__bar", "surface": "mds-Lightbox__surface", "image": "mds-Lightbox__image", "caption": "mds-Lightbox__caption" };
 var MIN_SCALE = 1;
 var MAX_SCALE = 4;
-var STEP = 1;
+var STEP2 = 1;
 var DOUBLE = 2.5;
 var WHEEL = 0.01;
 var ORIGIN = { x: 0, y: 0 };
@@ -2462,7 +2549,7 @@ function Lightbox({ open, onClose, src, alt = "", caption, labels }) {
               variant: "ghost",
               onMedia: true,
               disabled: scale <= MIN_SCALE,
-              onClick: () => zoom(scale - STEP),
+              onClick: () => zoom(scale - STEP2),
               children: /* @__PURE__ */ jsxRuntime.jsx(ZoomOutGlyph, {})
             }
           ),
@@ -2474,7 +2561,7 @@ function Lightbox({ open, onClose, src, alt = "", caption, labels }) {
               variant: "ghost",
               onMedia: true,
               disabled: scale >= MAX_SCALE,
-              onClick: () => zoom(scale + STEP),
+              onClick: () => zoom(scale + STEP2),
               children: /* @__PURE__ */ jsxRuntime.jsx(ZoomInGlyph, {})
             }
           ),
@@ -2781,6 +2868,7 @@ exports.ProgressBar = ProgressBar;
 exports.Radio = Radio;
 exports.Screen = Screen;
 exports.ScreenContent = ScreenContent;
+exports.Scroller = Scroller;
 exports.SearchField = SearchField;
 exports.SegmentedControl = SegmentedControl;
 exports.Select = Select;