@smwb/ui-react 2.7.0 → 2.8.0

package/dist/components/inputs/floatingButton/floatingButton.js

@@ -1,43 +1,45 @@
-import { jsxs as R, jsx as d } from "react/jsx-runtime";
+import { jsxs as d, jsx as x } from "react/jsx-runtime";
 import '../../../assets/styles/less/components/floatingButton/floatingButton.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
 /* empty css                                                                       */
-import n from "react";
-import w from "clsx";
-import { Ripple as x } from "../../base/ripple/ripple.js";
-const N = n.forwardRef(function({
-  children: i,
-  className: e,
-  onMouseDown: t,
-  variant: f = "default",
-  size: a = "medium",
-  color: s = "primary",
-  type: c = "button",
-  ...l
-}, p) {
-  const r = n.useRef(null), u = (o) => {
-    t == null || t(o);
-  }, b = (o) => {
-    var m;
-    (m = r.current) == null || m.onRipple(o);
+import s from "react";
+import $ from "clsx";
+import { Ripple as g } from "../../base/ripple/ripple.js";
+const _ = s.forwardRef(function({
+  children: c,
+  className: l,
+  onMouseDown: m,
+  // The button sets this on its root too; its own handler calls the caller's first.
+  onPointerDown: f,
+  variant: r = "default",
+  size: e = "medium",
+  color: u = "primary",
+  type: b = "button",
+  ...n
+}, o) {
+  const i = s.useRef(null), R = (t) => {
+    m == null || m(t);
+  }, p = (t) => {
+    var a;
+    f == null || f(t), (a = i.current) == null || a.onRipple(t);
   };
-  return /* @__PURE__ */ R(
+  return /* @__PURE__ */ d(
     "button",
     {
-      ref: p,
-      type: c,
-      className: w("smwb-fab", `smwb-${f}`, `smwb-${a}`, `smwb-fab_color-${s}`, e),
-      onMouseDown: u,
-      onPointerDown: b,
-      ...l,
+      ref: o,
+      type: b,
+      className: $("smwb-fab", `smwb-${r}`, `smwb-${e}`, `smwb-fab_color-${u}`, l),
+      onMouseDown: R,
+      onPointerDown: p,
+      ...n,
       children: [
-        i,
-        /* @__PURE__ */ d(x, { actionRef: r })
+        c,
+        /* @__PURE__ */ x(g, { actionRef: i })
       ]
     }
   );
 });
 export {
-  N as FloatingButton,
-  N as default
+  _ as FloatingButton,
+  _ as default
 };
 //# sourceMappingURL=floatingButton.js.map

package/dist/components/inputs/floatingButton/floatingButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"floatingButton.js","sources":["../../../../src/components/inputs/floatingButton/floatingButton.tsx"],"sourcesContent":["import React, { ButtonHTMLAttributes } from \"react\";\nimport cn from \"clsx\";\nimport { Ripple, RippleActionsRef } from \"../../base/ripple/ripple\";\n\nexport type FloatingButtonColor = \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n\nexport interface FloatingButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  className?: string;\n  variant?: \"extended\" | \"default\";\n  size?: \"small\" | \"medium\" | \"large\";\n  /** Semantic color. Resolves through the shared `--smui-*Color*` tokens. */\n  color?: FloatingButtonColor;\n}\n\nexport const FloatingButton = React.forwardRef<HTMLButtonElement, FloatingButtonProps>(function FloatingButton(\n  {\n    children,\n    className,\n    onMouseDown: onMouseDownProp,\n    variant = \"default\",\n    size = \"medium\",\n    color = \"primary\",\n    type = \"button\",\n    ...rest\n  },\n  ref\n) {\n  const rippleRef = React.useRef<RippleActionsRef>(null);\n\n  const onMouseDown = (event: React.MouseEvent<HTMLButtonElement>) => {\n    onMouseDownProp?.(event);\n  };\n\n  // Ripple on pointerdown so it fires for touch and pen, not just mouse.\n  const onPointerDown = (event: React.PointerEvent<HTMLButtonElement>) => {\n    rippleRef.current?.onRipple(event);\n  };\n\n  return (\n    <button\n      ref={ref}\n      type={type}\n      className={cn(\"smwb-fab\", `smwb-${variant}`, `smwb-${size}`, `smwb-fab_color-${color}`, className)}\n      onMouseDown={onMouseDown}\n      onPointerDown={onPointerDown}\n      {...rest}\n    >\n      {children}\n      <Ripple actionRef={rippleRef} />\n    </button>\n  );\n});\n\nexport default FloatingButton;\n"],"names":["FloatingButton","React","children","className","onMouseDownProp","variant","size","color","type","rest","ref","rippleRef","onMouseDown","event","onPointerDown","_a","jsxs","cn","jsx","Ripple"],"mappings":";;;;;;AAgBO,MAAMA,IAAiBC,EAAM,WAAmD,SACrF;AAAA,EACE,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,aAAaC;AAAA,EACb,SAAAC,IAAU;AAAA,EACV,MAAAC,IAAO;AAAA,EACP,OAAAC,IAAQ;AAAA,EACR,MAAAC,IAAO;AAAA,EACP,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAYV,EAAM,OAAyB,IAAI,GAE/CW,IAAc,CAACC,MAA+C;AAClE,IAAAT,KAAA,QAAAA,EAAkBS;AAAA,EACpB,GAGMC,IAAgB,CAACD,MAAiD;;AACtE,KAAAE,IAAAJ,EAAU,YAAV,QAAAI,EAAmB,SAASF;AAAA,EAC9B;AAEA,SACE,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAN;AAAA,MACA,MAAAF;AAAA,MACA,WAAWS,EAAG,YAAY,QAAQZ,CAAO,IAAI,QAAQC,CAAI,IAAI,kBAAkBC,CAAK,IAAIJ,CAAS;AAAA,MACjG,aAAAS;AAAA,MACA,eAAAE;AAAA,MACC,GAAGL;AAAA,MAEH,UAAA;AAAA,QAAAP;AAAA,QACD,gBAAAgB,EAACC,GAAA,EAAO,WAAWR,EAAA,CAAW;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGpC,CAAC;"}
+{"version":3,"file":"floatingButton.js","sources":["../../../../src/components/inputs/floatingButton/floatingButton.tsx"],"sourcesContent":["import React, { ButtonHTMLAttributes } from \"react\";\nimport cn from \"clsx\";\nimport { Ripple, RippleActionsRef } from \"../../base/ripple/ripple\";\n\nexport type FloatingButtonColor = \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n\nexport interface FloatingButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  className?: string;\n  variant?: \"extended\" | \"default\";\n  size?: \"small\" | \"medium\" | \"large\";\n  /** Semantic color. Resolves through the shared `--smui-*Color*` tokens. */\n  color?: FloatingButtonColor;\n}\n\nexport const FloatingButton = React.forwardRef<HTMLButtonElement, FloatingButtonProps>(function FloatingButton(\n  {\n    children,\n    className,\n    onMouseDown: onMouseDownProp,\n    // The button sets this on its root too; its own handler calls the caller's first.\n    onPointerDown: onPointerDownProp,\n    variant = \"default\",\n    size = \"medium\",\n    color = \"primary\",\n    type = \"button\",\n    ...rest\n  },\n  ref\n) {\n  const rippleRef = React.useRef<RippleActionsRef>(null);\n\n  const onMouseDown = (event: React.MouseEvent<HTMLButtonElement>) => {\n    onMouseDownProp?.(event);\n  };\n\n  // Ripple on pointerdown so it fires for touch and pen, not just mouse.\n  const onPointerDown = (event: React.PointerEvent<HTMLButtonElement>) => {\n    onPointerDownProp?.(event);\n    rippleRef.current?.onRipple(event);\n  };\n\n  return (\n    <button\n      ref={ref}\n      type={type}\n      className={cn(\"smwb-fab\", `smwb-${variant}`, `smwb-${size}`, `smwb-fab_color-${color}`, className)}\n      onMouseDown={onMouseDown}\n      onPointerDown={onPointerDown}\n      {...rest}\n    >\n      {children}\n      <Ripple actionRef={rippleRef} />\n    </button>\n  );\n});\n\nexport default FloatingButton;\n"],"names":["FloatingButton","React","children","className","onMouseDownProp","onPointerDownProp","variant","size","color","type","rest","ref","rippleRef","onMouseDown","event","onPointerDown","_a","jsxs","cn","jsx","Ripple"],"mappings":";;;;;;AAgBO,MAAMA,IAAiBC,EAAM,WAAmD,SACrF;AAAA,EACE,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,aAAaC;AAAA;AAAA,EAEb,eAAeC;AAAA,EACf,SAAAC,IAAU;AAAA,EACV,MAAAC,IAAO;AAAA,EACP,OAAAC,IAAQ;AAAA,EACR,MAAAC,IAAO;AAAA,EACP,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAYX,EAAM,OAAyB,IAAI,GAE/CY,IAAc,CAACC,MAA+C;AAClE,IAAAV,KAAA,QAAAA,EAAkBU;AAAA,EACpB,GAGMC,IAAgB,CAACD,MAAiD;;AACtE,IAAAT,KAAA,QAAAA,EAAoBS,KACpBE,IAAAJ,EAAU,YAAV,QAAAI,EAAmB,SAASF;AAAA,EAC9B;AAEA,SACE,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAN;AAAA,MACA,MAAAF;AAAA,MACA,WAAWS,EAAG,YAAY,QAAQZ,CAAO,IAAI,QAAQC,CAAI,IAAI,kBAAkBC,CAAK,IAAIL,CAAS;AAAA,MACjG,aAAAU;AAAA,MACA,eAAAE;AAAA,MACC,GAAGL;AAAA,MAEH,UAAA;AAAA,QAAAR;AAAA,QACD,gBAAAiB,EAACC,GAAA,EAAO,WAAWR,EAAA,CAAW;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGpC,CAAC;"}

package/dist/components/inputs/radioButton/radioButton.d.ts

@@ -3,6 +3,13 @@ import type { SelectionControlColor, SelectionControlSize } from "../checkbox/ch
 export interface RadioButtonProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChange" | "size"> {
     label?: string;
     disabled?: boolean;
+    /**
+     * Keeps the radio as it is: clicks on it or its label, Space and the arrow keys of its group do not check it, and
+     * `onChange` is not called. It stays focusable.
+     *
+     * The input does not tell assistive technology it is read-only: ARIA has no read-only state for a single radio,
+     * only for its group. Put `role="radiogroup"`, a name and `aria-readonly="true"` on the element around the radios.
+     */
     readOnly?: boolean;
     required?: boolean;
     name?: string;
@@ -14,6 +21,8 @@ export interface RadioButtonProps extends Omit<InputHTMLAttributes<HTMLInputElem
     error?: boolean;
     /** Unified handler: `(event, value, data)` where `value` is the radio's value (or checked state). */
     onChange?: (event: React.ChangeEvent<HTMLInputElement>, value: string | number | readonly string[] | boolean | undefined, data: RadioButtonProps) => void;
+    /** Test id of the `<input>`; `radio` unless given. */
+    "data-testid"?: string;
 }
 export declare const RadioButton: React.ForwardRefExoticComponent<RadioButtonProps & React.RefAttributes<HTMLInputElement>>;
 export default RadioButton;

package/dist/components/inputs/radioButton/radioButton.js

@@ -1,70 +1,89 @@
-import { jsx as e, jsxs as c } from "react/jsx-runtime";
+import { jsx as d, jsxs as h } from "react/jsx-runtime";
 import '../../../assets/styles/less/components/radioButton/radioButton.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
 /* empty css                                                                 */
-import x from "react";
-import i from "clsx";
-import { useId as g } from "../../../hooks/useId.js";
-import { TextFieldWrapper as y } from "../textField/textFieldWrapper.js";
-const $ = x.forwardRef(function(r, b) {
+import B from "react";
+import s from "clsx";
+import { useHelperText as C } from "../../../hooks/useHelperText.js";
+import { useId as R } from "../../../hooks/useId.js";
+import { cancelToggle as I, forgetCancelledToggle as j } from "../../../utils/readOnlyToggle.js";
+import { TextFieldWrapper as q } from "../textField/textFieldWrapper.js";
+const G = B.forwardRef(function(e, u) {
   const {
-    label: m,
-    disabled: a,
-    readOnly: s,
-    required: t,
-    name: p,
-    id: u,
-    size: w = "medium",
-    color: f = "primary",
-    helperText: _,
-    error: l,
-    onChange: d,
-    className: h,
-    ...N
-  } = r, n = g(u), v = (o) => {
-    if (s) {
-      o.preventDefault();
+    label: t,
+    disabled: i,
+    readOnly: r,
+    required: o,
+    name: w,
+    id: _,
+    size: g = "medium",
+    color: x = "primary",
+    "data-testid": y = "radio",
+    helperText: c,
+    error: m,
+    onChange: l,
+    className: N,
+    "aria-describedby": k,
+    ...p
+  } = e, n = R(_), b = C(c, { describedBy: k }), T = (a) => {
+    if (r) {
+      j(a, e.checked);
       return;
     }
-    d == null || d(o, r.value !== void 0 ? r.value : o.target.checked, r);
+    l == null || l(a, e.value !== void 0 ? e.value : a.target.checked, e);
+  }, v = (a) => {
+    var f;
+    (f = e.onClick) == null || f.call(e, a), r && I(a, e.checked);
   };
-  return /* @__PURE__ */ e(y, { helperText: _, disabled: a, error: l, className: "smwb-text-field-checkbox", children: /* @__PURE__ */ c(
-    "label",
+  return /* @__PURE__ */ d(
+    q,
     {
-      htmlFor: n,
-      className: i("smwb-radio", `smwb-radio_size-${w}`, `smwb-radio_color-${f}`, {
-        "smwb-disabled": a,
-        "smwb-readonly": s
-      }),
-      children: [
-        /* @__PURE__ */ c("span", { className: "smwb-radio__wrapper", children: [
-          /* @__PURE__ */ e(
-            "input",
-            {
-              id: n,
-              name: p,
-              disabled: a,
-              readOnly: s,
-              required: t,
-              "aria-invalid": l || void 0,
-              "aria-required": t || void 0,
-              className: i("smwb-radio__input", h),
-              type: "radio",
-              "data-testid": "radio",
-              ref: b,
-              ...N,
-              onChange: v
-            }
-          ),
-          /* @__PURE__ */ e("span", { className: i("smwb-radio__btn", { "smwb-disabled": a }) }),
-          /* @__PURE__ */ e("span", { className: i("smwb-radio__bg", { "smwb-disabled": a }) })
-        ] }),
-        m && /* @__PURE__ */ e("span", { className: "smwb-radio__label", children: m })
-      ]
+      helperText: c,
+      helperTextId: b.id,
+      disabled: i,
+      error: m,
+      className: "smwb-text-field-checkbox",
+      children: /* @__PURE__ */ h(
+        "label",
+        {
+          htmlFor: n,
+          className: s("smwb-radio", `smwb-radio_size-${g}`, `smwb-radio_color-${x}`, {
+            "smwb-disabled": i,
+            "smwb-readonly": r
+          }),
+          children: [
+            /* @__PURE__ */ h("span", { className: "smwb-radio__wrapper", children: [
+              /* @__PURE__ */ d(
+                "input",
+                {
+                  id: n,
+                  name: w,
+                  disabled: i,
+                  readOnly: r,
+                  required: o,
+                  "aria-invalid": m || void 0,
+                  "aria-required": o || void 0,
+                  "aria-describedby": b.describedBy,
+                  className: s("smwb-radio__input", N),
+                  type: "radio",
+                  "data-testid": y,
+                  ref: u,
+                  ...p,
+                  onChange: T,
+                  onClick: v
+                }
+              ),
+              /* @__PURE__ */ d("span", { className: s("smwb-radio__btn", { "smwb-disabled": i }) }),
+              /* @__PURE__ */ d("span", { className: s("smwb-radio__bg", { "smwb-disabled": i }) })
+            ] }),
+            t && /* @__PURE__ */ d("span", { className: "smwb-radio__label", children: t })
+          ]
+        }
+      )
     }
-  ) });
+  );
 });
 export {
-  $ as RadioButton,
-  $ as default
+  G as RadioButton,
+  G as default
 };
 //# sourceMappingURL=radioButton.js.map

package/dist/components/inputs/radioButton/radioButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"radioButton.js","sources":["../../../../src/components/inputs/radioButton/radioButton.tsx"],"sourcesContent":["import React, { InputHTMLAttributes } from \"react\";\nimport cn from \"clsx\";\nimport { TextFieldWrapper } from \"../textField\";\nimport { useId } from \"../../../hooks/useId\";\nimport type { SelectionControlColor, SelectionControlSize } from \"../checkbox/checkbox\";\n\nexport interface RadioButtonProps extends Omit<InputHTMLAttributes<HTMLInputElement>, \"onChange\" | \"size\"> {\n  label?: string;\n  disabled?: boolean;\n  readOnly?: boolean;\n  required?: boolean;\n  name?: string;\n  id?: string;\n  checked?: boolean;\n  size?: SelectionControlSize;\n  color?: SelectionControlColor;\n  helperText?: React.ReactNode;\n  error?: boolean;\n  /** Unified handler: `(event, value, data)` where `value` is the radio's value (or checked state). */\n  onChange?: (\n    event: React.ChangeEvent<HTMLInputElement>,\n    value: string | number | readonly string[] | boolean | undefined,\n    data: RadioButtonProps\n  ) => void;\n}\n\nexport const RadioButton = React.forwardRef<HTMLInputElement, RadioButtonProps>(function RadioButton(props, ref) {\n  const {\n    label,\n    disabled,\n    readOnly,\n    required,\n    name,\n    id: idProp,\n    size = \"medium\",\n    color = \"primary\",\n    helperText,\n    error,\n    onChange,\n    className,\n    ...args\n  } = props;\n  const id = useId(idProp);\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    if (readOnly) {\n      e.preventDefault();\n      return;\n    }\n    onChange?.(e, props.value !== undefined ? props.value : e.target.checked, props);\n  };\n\n  return (\n    <TextFieldWrapper helperText={helperText} disabled={disabled} error={error} className=\"smwb-text-field-checkbox\">\n      <label\n        htmlFor={id}\n        className={cn(\"smwb-radio\", `smwb-radio_size-${size}`, `smwb-radio_color-${color}`, {\n          \"smwb-disabled\": disabled,\n          \"smwb-readonly\": readOnly,\n        })}\n      >\n        <span className=\"smwb-radio__wrapper\">\n          <input\n            id={id}\n            name={name}\n            disabled={disabled}\n            readOnly={readOnly}\n            required={required}\n            aria-invalid={error || undefined}\n            aria-required={required || undefined}\n            className={cn(\"smwb-radio__input\", className)}\n            type=\"radio\"\n            data-testid=\"radio\"\n            ref={ref}\n            {...args}\n            onChange={handleChange}\n          />\n          <span className={cn(\"smwb-radio__btn\", { \"smwb-disabled\": disabled })} />\n          <span className={cn(\"smwb-radio__bg\", { \"smwb-disabled\": disabled })} />\n        </span>\n        {label && <span className=\"smwb-radio__label\">{label}</span>}\n      </label>\n    </TextFieldWrapper>\n  );\n});\n\nexport default RadioButton;\n"],"names":["RadioButton","React","props","ref","label","disabled","readOnly","required","name","idProp","size","color","helperText","error","onChange","className","args","id","useId","handleChange","e","TextFieldWrapper","jsxs","cn","jsx"],"mappings":";;;;;;;AA4BO,MAAMA,IAAcC,EAAM,WAA+C,SAAqBC,GAAOC,GAAK;AAC/G,QAAM;AAAA,IACJ,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,MAAAC;AAAA,IACA,IAAIC;AAAA,IACJ,MAAAC,IAAO;AAAA,IACP,OAAAC,IAAQ;AAAA,IACR,YAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDd,GACEe,IAAKC,EAAMT,CAAM,GAEjBU,IAAe,CAACC,MAA2C;AAC/D,QAAId,GAAU;AACZ,MAAAc,EAAE,eAAA;AACF;AAAA,IACF;AACA,IAAAN,KAAA,QAAAA,EAAWM,GAAGlB,EAAM,UAAU,SAAYA,EAAM,QAAQkB,EAAE,OAAO,SAASlB;AAAA,EAC5E;AAEA,2BACGmB,GAAA,EAAiB,YAAAT,GAAwB,UAAAP,GAAoB,OAAAQ,GAAc,WAAU,4BACpF,UAAA,gBAAAS;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAASL;AAAA,MACT,WAAWM,EAAG,cAAc,mBAAmBb,CAAI,IAAI,oBAAoBC,CAAK,IAAI;AAAA,QAClF,iBAAiBN;AAAA,QACjB,iBAAiBC;AAAA,MAAA,CAClB;AAAA,MAED,UAAA;AAAA,QAAA,gBAAAgB,EAAC,QAAA,EAAK,WAAU,uBACd,UAAA;AAAA,UAAA,gBAAAE;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAAP;AAAA,cACA,MAAAT;AAAA,cACA,UAAAH;AAAA,cACA,UAAAC;AAAA,cACA,UAAAC;AAAA,cACA,gBAAcM,KAAS;AAAA,cACvB,iBAAeN,KAAY;AAAA,cAC3B,WAAWgB,EAAG,qBAAqBR,CAAS;AAAA,cAC5C,MAAK;AAAA,cACL,eAAY;AAAA,cACZ,KAAAZ;AAAA,cACC,GAAGa;AAAA,cACJ,UAAUG;AAAA,YAAA;AAAA,UAAA;AAAA,UAEZ,gBAAAK,EAAC,UAAK,WAAWD,EAAG,mBAAmB,EAAE,iBAAiBlB,EAAA,CAAU,GAAG;AAAA,UACvE,gBAAAmB,EAAC,UAAK,WAAWD,EAAG,kBAAkB,EAAE,iBAAiBlB,EAAA,CAAU,EAAA,CAAG;AAAA,QAAA,GACxE;AAAA,QACCD,KAAS,gBAAAoB,EAAC,QAAA,EAAK,WAAU,qBAAqB,UAAApB,EAAA,CAAM;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAEzD;AAEJ,CAAC;"}
+{"version":3,"file":"radioButton.js","sources":["../../../../src/components/inputs/radioButton/radioButton.tsx"],"sourcesContent":["import React, { InputHTMLAttributes } from \"react\";\nimport cn from \"clsx\";\nimport { TextFieldWrapper } from \"../textField\";\nimport { useHelperText } from \"../../../hooks/useHelperText\";\nimport { useId } from \"../../../hooks/useId\";\nimport { cancelToggle, forgetCancelledToggle } from \"../../../utils/readOnlyToggle\";\nimport type { SelectionControlColor, SelectionControlSize } from \"../checkbox/checkbox\";\n\nexport interface RadioButtonProps extends Omit<InputHTMLAttributes<HTMLInputElement>, \"onChange\" | \"size\"> {\n  label?: string;\n  disabled?: boolean;\n  /**\n   * Keeps the radio as it is: clicks on it or its label, Space and the arrow keys of its group do not check it, and\n   * `onChange` is not called. It stays focusable.\n   *\n   * The input does not tell assistive technology it is read-only: ARIA has no read-only state for a single radio,\n   * only for its group. Put `role=\"radiogroup\"`, a name and `aria-readonly=\"true\"` on the element around the radios.\n   */\n  readOnly?: boolean;\n  required?: boolean;\n  name?: string;\n  id?: string;\n  checked?: boolean;\n  size?: SelectionControlSize;\n  color?: SelectionControlColor;\n  helperText?: React.ReactNode;\n  error?: boolean;\n  /** Unified handler: `(event, value, data)` where `value` is the radio's value (or checked state). */\n  onChange?: (\n    event: React.ChangeEvent<HTMLInputElement>,\n    value: string | number | readonly string[] | boolean | undefined,\n    data: RadioButtonProps\n  ) => void;\n  /** Test id of the `<input>`; `radio` unless given. */\n  \"data-testid\"?: string;\n}\n\nexport const RadioButton = React.forwardRef<HTMLInputElement, RadioButtonProps>(function RadioButton(props, ref) {\n  const {\n    label,\n    disabled,\n    readOnly,\n    required,\n    name,\n    id: idProp,\n    size = \"medium\",\n    color = \"primary\",\n    \"data-testid\": dataTestId = \"radio\",\n    helperText,\n    error,\n    onChange,\n    className,\n    \"aria-describedby\": ariaDescribedBy,\n    ...args\n  } = props;\n  const id = useId(idProp);\n  const helper = useHelperText(helperText, { describedBy: ariaDescribedBy });\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    if (readOnly) {\n      forgetCancelledToggle(e, props.checked);\n      return;\n    }\n    onChange?.(e, props.value !== undefined ? props.value : e.target.checked, props);\n  };\n\n  const handleClick = (e: React.MouseEvent<HTMLInputElement>) => {\n    props.onClick?.(e);\n    if (readOnly) cancelToggle(e, props.checked);\n  };\n\n  return (\n    <TextFieldWrapper\n      helperText={helperText}\n      helperTextId={helper.id}\n      disabled={disabled}\n      error={error}\n      className=\"smwb-text-field-checkbox\"\n    >\n      <label\n        htmlFor={id}\n        className={cn(\"smwb-radio\", `smwb-radio_size-${size}`, `smwb-radio_color-${color}`, {\n          \"smwb-disabled\": disabled,\n          \"smwb-readonly\": readOnly,\n        })}\n      >\n        <span className=\"smwb-radio__wrapper\">\n          <input\n            id={id}\n            name={name}\n            disabled={disabled}\n            readOnly={readOnly}\n            required={required}\n            aria-invalid={error || undefined}\n            aria-required={required || undefined}\n            aria-describedby={helper.describedBy}\n            className={cn(\"smwb-radio__input\", className)}\n            type=\"radio\"\n            data-testid={dataTestId}\n            ref={ref}\n            {...args}\n            onChange={handleChange}\n            onClick={handleClick}\n          />\n          <span className={cn(\"smwb-radio__btn\", { \"smwb-disabled\": disabled })} />\n          <span className={cn(\"smwb-radio__bg\", { \"smwb-disabled\": disabled })} />\n        </span>\n        {label && <span className=\"smwb-radio__label\">{label}</span>}\n      </label>\n    </TextFieldWrapper>\n  );\n});\n\nexport default RadioButton;\n"],"names":["RadioButton","React","props","ref","label","disabled","readOnly","required","name","idProp","size","color","dataTestId","helperText","error","onChange","className","ariaDescribedBy","args","id","useId","helper","useHelperText","handleChange","e","forgetCancelledToggle","handleClick","_a","cancelToggle","jsx","TextFieldWrapper","jsxs","cn"],"mappings":";;;;;;;;;AAuCO,MAAMA,IAAcC,EAAM,WAA+C,SAAqBC,GAAOC,GAAK;AAC/G,QAAM;AAAA,IACJ,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,MAAAC;AAAA,IACA,IAAIC;AAAA,IACJ,MAAAC,IAAO;AAAA,IACP,OAAAC,IAAQ;AAAA,IACR,eAAeC,IAAa;AAAA,IAC5B,YAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,oBAAoBC;AAAA,IACpB,GAAGC;AAAA,EAAA,IACDhB,GACEiB,IAAKC,EAAMX,CAAM,GACjBY,IAASC,EAAcT,GAAY,EAAE,aAAaI,GAAiB,GAEnEM,IAAe,CAACC,MAA2C;AAC/D,QAAIlB,GAAU;AACZ,MAAAmB,EAAsBD,GAAGtB,EAAM,OAAO;AACtC;AAAA,IACF;AACA,IAAAa,KAAA,QAAAA,EAAWS,GAAGtB,EAAM,UAAU,SAAYA,EAAM,QAAQsB,EAAE,OAAO,SAAStB;AAAA,EAC5E,GAEMwB,IAAc,CAACF,MAA0C;;AAC7D,KAAAG,IAAAzB,EAAM,YAAN,QAAAyB,EAAA,KAAAzB,GAAgBsB,IACZlB,KAAUsB,EAAaJ,GAAGtB,EAAM,OAAO;AAAA,EAC7C;AAEA,SACE,gBAAA2B;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,YAAAjB;AAAA,MACA,cAAcQ,EAAO;AAAA,MACrB,UAAAhB;AAAA,MACA,OAAAS;AAAA,MACA,WAAU;AAAA,MAEV,UAAA,gBAAAiB;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAASZ;AAAA,UACT,WAAWa,EAAG,cAAc,mBAAmBtB,CAAI,IAAI,oBAAoBC,CAAK,IAAI;AAAA,YAClF,iBAAiBN;AAAA,YACjB,iBAAiBC;AAAA,UAAA,CAClB;AAAA,UAED,UAAA;AAAA,YAAA,gBAAAyB,EAAC,QAAA,EAAK,WAAU,uBACd,UAAA;AAAA,cAAA,gBAAAF;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,IAAAV;AAAA,kBACA,MAAAX;AAAA,kBACA,UAAAH;AAAA,kBACA,UAAAC;AAAA,kBACA,UAAAC;AAAA,kBACA,gBAAcO,KAAS;AAAA,kBACvB,iBAAeP,KAAY;AAAA,kBAC3B,oBAAkBc,EAAO;AAAA,kBACzB,WAAWW,EAAG,qBAAqBhB,CAAS;AAAA,kBAC5C,MAAK;AAAA,kBACL,eAAaJ;AAAA,kBACb,KAAAT;AAAA,kBACC,GAAGe;AAAA,kBACJ,UAAUK;AAAA,kBACV,SAASG;AAAA,gBAAA;AAAA,cAAA;AAAA,cAEX,gBAAAG,EAAC,UAAK,WAAWG,EAAG,mBAAmB,EAAE,iBAAiB3B,EAAA,CAAU,GAAG;AAAA,cACvE,gBAAAwB,EAAC,UAAK,WAAWG,EAAG,kBAAkB,EAAE,iBAAiB3B,EAAA,CAAU,EAAA,CAAG;AAAA,YAAA,GACxE;AAAA,YACCD,KAAS,gBAAAyB,EAAC,QAAA,EAAK,WAAU,qBAAqB,UAAAzB,EAAA,CAAM;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACvD;AAAA,EAAA;AAGN,CAAC;"}

package/dist/components/inputs/rating/rating.d.ts

@@ -24,7 +24,15 @@ export interface RatingProps {
     error?: boolean;
     /** Supporting text shown below the control. */
     helperText?: ReactNode;
+    /** Id of the control: the slider, or the image of a read-only rating. */
     id?: string;
+    /**
+     * What is rated: the accessible name of the slider, "Rating" by default. A read-only rating is an image named by
+     * its value ("3 of 5"), after this label.
+     */
+    "aria-label"?: string;
+    /** Ids of more elements that describe the control, after its helper text. */
+    "aria-describedby"?: string;
     onChange?: (value: number) => void;
 }
 export declare const Rating: import("react").ForwardRefExoticComponent<RatingProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/components/inputs/rating/rating.js

@@ -1,86 +1,101 @@
-import { jsxs as N, jsx as a } from "react/jsx-runtime";
+import { jsxs as H, jsx as s } from "react/jsx-runtime";
 import '../../../assets/styles/less/components/rating/rating.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
 /* empty css                                                       */
-import { forwardRef as I, useState as v } from "react";
-import $ from "clsx";
-import { Icon as H } from "../../base/icon/icon.js";
-const Z = I(function({
-  className: L,
-  value: d,
-  defaultValue: j = 0,
-  max: o = 5,
-  precision: c = 1,
-  readOnly: g = !1,
-  disabled: y = !1,
-  size: m = 28,
-  icon: u,
-  emptyIcon: w,
-  name: h,
-  color: k = "primary",
-  error: D,
-  helperText: _,
-  id: E,
-  onChange: s
-}, K) {
-  const M = d !== void 0, [S, R] = v(j), [p, b] = v(null), n = d !== void 0 ? d : S, B = p != null ? p : n, l = !g && !y, A = (t, r) => {
-    if (c === 1)
+import { forwardRef as Q, useState as B } from "react";
+import j from "clsx";
+import { Icon as E } from "../../base/icon/icon.js";
+import { useHelperText as V, hasHelperText as W } from "../../../hooks/useHelperText.js";
+const at = Q(function({
+  className: K,
+  value: u,
+  defaultValue: S = 0,
+  max: n = 5,
+  precision: m = 1,
+  readOnly: i = !1,
+  disabled: w = !1,
+  size: d = 28,
+  icon: _,
+  emptyIcon: p,
+  name: k,
+  color: D = "primary",
+  error: M,
+  helperText: b,
+  id: T,
+  "aria-label": g,
+  "aria-describedby": x,
+  onChange: e
+}, F) {
+  const R = u !== void 0, [L, N] = B(S), [v, h] = B(null), l = u !== void 0 ? u : L, U = v != null ? v : l, a = !i && !w, $ = (t, r) => {
+    if (m === 1)
       return r + 1;
-    const { left: i, width: e } = t.currentTarget.getBoundingClientRect(), G = t.clientX - i < e / 2;
-    return r + (G ? 0.5 : 1);
-  }, F = (t, r) => {
-    if (!l)
+    const { left: o, width: c } = t.currentTarget.getBoundingClientRect(), P = t.clientX - o < c / 2;
+    return r + (P ? 0.5 : 1);
+  }, X = (t, r) => {
+    if (!a)
       return;
-    const i = A(t, r);
-    M || R(i), s == null || s(i);
-  }, U = u != null ? u : /* @__PURE__ */ a(H, { name: "star", fill: 1, size: m }), X = w != null ? w : /* @__PURE__ */ a(H, { name: "star", size: m }), f = (t) => {
-    const r = Math.max(0, Math.min(o, t));
-    M || R(r), s == null || s(r);
-  }, q = (t) => {
-    l && (t.key === "ArrowRight" || t.key === "ArrowUp" ? (t.preventDefault(), f(n + c)) : t.key === "ArrowLeft" || t.key === "ArrowDown" ? (t.preventDefault(), f(n - c)) : t.key === "Home" ? (t.preventDefault(), f(0)) : t.key === "End" && (t.preventDefault(), f(o)));
-  };
-  return /* @__PURE__ */ N(
+    const o = $(t, r);
+    R || N(o), e == null || e(o);
+  }, q = _ != null ? _ : /* @__PURE__ */ s(E, { name: "star", fill: 1, size: d }), G = p != null ? p : /* @__PURE__ */ s(E, { name: "star", size: d }), f = (t) => {
+    const r = Math.max(0, Math.min(n, t));
+    R || N(r), e == null || e(r);
+  }, I = (t) => {
+    a && (t.key === "ArrowRight" || t.key === "ArrowUp" ? (t.preventDefault(), f(l + m)) : t.key === "ArrowLeft" || t.key === "ArrowDown" ? (t.preventDefault(), f(l - m)) : t.key === "Home" ? (t.preventDefault(), f(0)) : t.key === "End" && (t.preventDefault(), f(n)));
+  }, A = V(b, { describedBy: x }), y = `${l} of ${n}`, J = i ? g ? `${g} ${y}` : y : g || "Rating";
+  return /* @__PURE__ */ H(
     "span",
     {
-      ref: K,
-      id: E,
-      className: $(
+      className: j(
         "smwb-rating",
-        { "smwb-rating_readonly": g, "smwb-rating_disabled": y, "smwb-rating_error": D },
-        k !== "primary" && `smwb-rating_color-${k}`,
-        L
+        { "smwb-rating_readonly": i, "smwb-rating_disabled": w, "smwb-rating_error": M },
+        D !== "primary" && `smwb-rating_color-${D}`,
+        K
       ),
-      "data-testid": "rating",
-      role: "img",
-      "aria-label": `${n} of ${o}`,
-      tabIndex: l ? 0 : void 0,
-      onKeyDown: l ? q : void 0,
       children: [
-        Array.from({ length: o }, (t, r) => {
-          const i = Math.max(0, Math.min(1, B - r));
-          return /* @__PURE__ */ N(
-            "span",
-            {
-              className: "smwb-rating__item",
-              style: { width: m, height: m, cursor: l ? "pointer" : "default" },
-              onClick: (e) => F(e, r),
-              onMouseMove: l && c === 0.5 ? (e) => b(A(e, r)) : l ? () => b(r + 1) : void 0,
-              onMouseLeave: l ? () => b(null) : void 0,
-              children: [
-                /* @__PURE__ */ a("span", { className: "smwb-rating__icon smwb-rating__icon_empty", children: X }),
-                /* @__PURE__ */ a("span", { className: "smwb-rating__icon smwb-rating__icon_filled", style: { width: `${i * 100}%` }, children: U })
-              ]
-            },
-            r
-          );
-        }),
-        h ? /* @__PURE__ */ a("input", { type: "hidden", name: h, value: n, readOnly: !0 }) : null,
-        _ != null && _ !== !1 ? /* @__PURE__ */ a("span", { className: $("smwb-rating__helper", D && "smwb-rating__helper_error"), children: _ }) : null
+        /* @__PURE__ */ s(
+          "span",
+          {
+            ref: F,
+            id: T,
+            className: "smwb-rating__control",
+            "data-testid": "rating",
+            role: i ? "img" : "slider",
+            "aria-label": J,
+            "aria-valuemin": i ? void 0 : 0,
+            "aria-valuemax": i ? void 0 : n,
+            "aria-valuenow": i ? void 0 : l,
+            "aria-valuetext": i ? void 0 : y,
+            "aria-disabled": !i && w ? !0 : void 0,
+            "aria-describedby": A.describedBy,
+            tabIndex: a ? 0 : void 0,
+            onKeyDown: a ? I : void 0,
+            children: Array.from({ length: n }, (t, r) => {
+              const o = Math.max(0, Math.min(1, U - r));
+              return /* @__PURE__ */ H(
+                "span",
+                {
+                  className: "smwb-rating__item",
+                  style: { width: d, height: d, cursor: a ? "pointer" : "default" },
+                  onClick: (c) => X(c, r),
+                  onMouseMove: a && m === 0.5 ? (c) => h($(c, r)) : a ? () => h(r + 1) : void 0,
+                  onMouseLeave: () => h(null),
+                  children: [
+                    /* @__PURE__ */ s("span", { className: "smwb-rating__icon smwb-rating__icon_empty", children: G }),
+                    /* @__PURE__ */ s("span", { className: "smwb-rating__icon smwb-rating__icon_filled", style: { width: `${o * 100}%` }, children: q })
+                  ]
+                },
+                r
+              );
+            })
+          }
+        ),
+        k ? /* @__PURE__ */ s("input", { type: "hidden", name: k, value: l, readOnly: !0 }) : null,
+        W(b) ? /* @__PURE__ */ s("span", { id: A.id, className: j("smwb-rating__helper", M && "smwb-rating__helper_error"), children: b }) : null
       ]
     }
   );
 });
 export {
-  Z as Rating,
-  Z as default
+  at as Rating,
+  at as default
 };
 //# sourceMappingURL=rating.js.map

package/dist/components/inputs/rating/rating.js.map

@@ -1 +1 @@
-{"version":3,"file":"rating.js","sources":["../../../../src/components/inputs/rating/rating.tsx"],"sourcesContent":["import { forwardRef, KeyboardEvent, MouseEvent, ReactNode, useState } from \"react\";\nimport cn from \"clsx\";\nimport Icon from \"../../base/icon/icon\";\n\nexport type RatingColor = \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n\nexport interface RatingProps {\n  className?: string;\n  /** Controlled value. */\n  value?: number;\n  /** Uncontrolled initial value. */\n  defaultValue?: number;\n  /** Number of icons. */\n  max?: number;\n  /** Smallest selectable increment: 1 (whole) or 0.5 (half). */\n  precision?: 1 | 0.5;\n  readOnly?: boolean;\n  disabled?: boolean;\n  size?: number;\n  /** Filled icon (Material Symbols name). */\n  icon?: ReactNode;\n  /** Empty icon (Material Symbols name). */\n  emptyIcon?: ReactNode;\n  name?: string;\n  /** Color of the filled icons. */\n  color?: RatingColor;\n  /** Renders the control in an error state. */\n  error?: boolean;\n  /** Supporting text shown below the control. */\n  helperText?: ReactNode;\n  id?: string;\n  onChange?: (value: number) => void;\n}\n\nexport const Rating = forwardRef<HTMLSpanElement, RatingProps>(function Rating(\n  {\n    className,\n    value,\n    defaultValue = 0,\n    max = 5,\n    precision = 1,\n    readOnly = false,\n    disabled = false,\n    size = 28,\n    icon,\n    emptyIcon,\n    name,\n    color = \"primary\",\n    error,\n    helperText,\n    id,\n    onChange,\n  },\n  ref\n) {\n  const isControlled = value !== undefined;\n  const [internal, setInternal] = useState(defaultValue);\n  const [hover, setHover] = useState<number | null>(null);\n\n  const current = value !== undefined ? value : internal;\n  const display = hover ?? current;\n\n  const interactive = !readOnly && !disabled;\n\n  const valueFromEvent = (event: MouseEvent<HTMLSpanElement>, starIndex: number): number => {\n    if (precision === 1) {\n      return starIndex + 1;\n    }\n    const { left, width } = event.currentTarget.getBoundingClientRect();\n    const isLeftHalf = event.clientX - left < width / 2;\n    return starIndex + (isLeftHalf ? 0.5 : 1);\n  };\n\n  const handleSelect = (event: MouseEvent<HTMLSpanElement>, starIndex: number) => {\n    if (!interactive) {\n      return;\n    }\n    const next = valueFromEvent(event, starIndex);\n    if (!isControlled) {\n      setInternal(next);\n    }\n    onChange?.(next);\n  };\n\n  const filledIcon = icon ?? <Icon name=\"star\" fill={1} size={size} />;\n  const blankIcon = emptyIcon ?? <Icon name=\"star\" size={size} />;\n\n  const commit = (next: number) => {\n    const clamped = Math.max(0, Math.min(max, next));\n    if (!isControlled) {\n      setInternal(clamped);\n    }\n    onChange?.(clamped);\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLSpanElement>) => {\n    if (!interactive) {\n      return;\n    }\n    if (event.key === \"ArrowRight\" || event.key === \"ArrowUp\") {\n      event.preventDefault();\n      commit(current + precision);\n    } else if (event.key === \"ArrowLeft\" || event.key === \"ArrowDown\") {\n      event.preventDefault();\n      commit(current - precision);\n    } else if (event.key === \"Home\") {\n      event.preventDefault();\n      commit(0);\n    } else if (event.key === \"End\") {\n      event.preventDefault();\n      commit(max);\n    }\n  };\n\n  return (\n    <span\n      ref={ref}\n      id={id}\n      className={cn(\n        \"smwb-rating\",\n        { \"smwb-rating_readonly\": readOnly, \"smwb-rating_disabled\": disabled, \"smwb-rating_error\": error },\n        color !== \"primary\" && `smwb-rating_color-${color}`,\n        className\n      )}\n      data-testid=\"rating\"\n      role=\"img\"\n      aria-label={`${current} of ${max}`}\n      tabIndex={interactive ? 0 : undefined}\n      onKeyDown={interactive ? handleKeyDown : undefined}\n    >\n      {Array.from({ length: max }, (_, index) => {\n        const fillRatio = Math.max(0, Math.min(1, display - index));\n        return (\n          <span\n            key={index}\n            className=\"smwb-rating__item\"\n            style={{ width: size, height: size, cursor: interactive ? \"pointer\" : \"default\" }}\n            onClick={(event) => handleSelect(event, index)}\n            onMouseMove={\n              interactive && precision === 0.5\n                ? (event) => setHover(valueFromEvent(event, index))\n                : interactive\n                  ? () => setHover(index + 1)\n                  : undefined\n            }\n            onMouseLeave={interactive ? () => setHover(null) : undefined}\n          >\n            <span className=\"smwb-rating__icon smwb-rating__icon_empty\">{blankIcon}</span>\n            <span className=\"smwb-rating__icon smwb-rating__icon_filled\" style={{ width: `${fillRatio * 100}%` }}>\n              {filledIcon}\n            </span>\n          </span>\n        );\n      })}\n      {name ? <input type=\"hidden\" name={name} value={current} readOnly /> : null}\n      {helperText != null && helperText !== false ? (\n        <span className={cn(\"smwb-rating__helper\", error && \"smwb-rating__helper_error\")}>{helperText}</span>\n      ) : null}\n    </span>\n  );\n});\n\nexport default Rating;\n"],"names":["Rating","forwardRef","className","value","defaultValue","max","precision","readOnly","disabled","size","icon","emptyIcon","name","color","error","helperText","id","onChange","ref","isControlled","internal","setInternal","useState","hover","setHover","current","display","interactive","valueFromEvent","event","starIndex","left","width","isLeftHalf","handleSelect","next","filledIcon","jsx","Icon","blankIcon","commit","clamped","handleKeyDown","jsxs","cn","_","index","fillRatio"],"mappings":"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"}
+{"version":3,"file":"rating.js","sources":["../../../../src/components/inputs/rating/rating.tsx"],"sourcesContent":["import { forwardRef, KeyboardEvent, MouseEvent, ReactNode, useState } from \"react\";\nimport cn from \"clsx\";\nimport Icon from \"../../base/icon/icon\";\nimport { hasHelperText, useHelperText } from \"../../../hooks/useHelperText\";\n\nexport type RatingColor = \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n\nexport interface RatingProps {\n  className?: string;\n  /** Controlled value. */\n  value?: number;\n  /** Uncontrolled initial value. */\n  defaultValue?: number;\n  /** Number of icons. */\n  max?: number;\n  /** Smallest selectable increment: 1 (whole) or 0.5 (half). */\n  precision?: 1 | 0.5;\n  readOnly?: boolean;\n  disabled?: boolean;\n  size?: number;\n  /** Filled icon (Material Symbols name). */\n  icon?: ReactNode;\n  /** Empty icon (Material Symbols name). */\n  emptyIcon?: ReactNode;\n  name?: string;\n  /** Color of the filled icons. */\n  color?: RatingColor;\n  /** Renders the control in an error state. */\n  error?: boolean;\n  /** Supporting text shown below the control. */\n  helperText?: ReactNode;\n  /** Id of the control: the slider, or the image of a read-only rating. */\n  id?: string;\n  /**\n   * What is rated: the accessible name of the slider, \"Rating\" by default. A read-only rating is an image named by\n   * its value (\"3 of 5\"), after this label.\n   */\n  \"aria-label\"?: string;\n  /** Ids of more elements that describe the control, after its helper text. */\n  \"aria-describedby\"?: string;\n  onChange?: (value: number) => void;\n}\n\nexport const Rating = forwardRef<HTMLSpanElement, RatingProps>(function Rating(\n  {\n    className,\n    value,\n    defaultValue = 0,\n    max = 5,\n    precision = 1,\n    readOnly = false,\n    disabled = false,\n    size = 28,\n    icon,\n    emptyIcon,\n    name,\n    color = \"primary\",\n    error,\n    helperText,\n    id,\n    \"aria-label\": ariaLabel,\n    \"aria-describedby\": ariaDescribedBy,\n    onChange,\n  },\n  ref\n) {\n  const isControlled = value !== undefined;\n  const [internal, setInternal] = useState(defaultValue);\n  const [hover, setHover] = useState<number | null>(null);\n\n  const current = value !== undefined ? value : internal;\n  const display = hover ?? current;\n\n  const interactive = !readOnly && !disabled;\n\n  const valueFromEvent = (event: MouseEvent<HTMLSpanElement>, starIndex: number): number => {\n    if (precision === 1) {\n      return starIndex + 1;\n    }\n    const { left, width } = event.currentTarget.getBoundingClientRect();\n    const isLeftHalf = event.clientX - left < width / 2;\n    return starIndex + (isLeftHalf ? 0.5 : 1);\n  };\n\n  const handleSelect = (event: MouseEvent<HTMLSpanElement>, starIndex: number) => {\n    if (!interactive) {\n      return;\n    }\n    const next = valueFromEvent(event, starIndex);\n    if (!isControlled) {\n      setInternal(next);\n    }\n    onChange?.(next);\n  };\n\n  const filledIcon = icon ?? <Icon name=\"star\" fill={1} size={size} />;\n  const blankIcon = emptyIcon ?? <Icon name=\"star\" size={size} />;\n\n  const commit = (next: number) => {\n    const clamped = Math.max(0, Math.min(max, next));\n    if (!isControlled) {\n      setInternal(clamped);\n    }\n    onChange?.(clamped);\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLSpanElement>) => {\n    if (!interactive) {\n      return;\n    }\n    if (event.key === \"ArrowRight\" || event.key === \"ArrowUp\") {\n      event.preventDefault();\n      commit(current + precision);\n    } else if (event.key === \"ArrowLeft\" || event.key === \"ArrowDown\") {\n      event.preventDefault();\n      commit(current - precision);\n    } else if (event.key === \"Home\") {\n      event.preventDefault();\n      commit(0);\n    } else if (event.key === \"End\") {\n      event.preventDefault();\n      commit(max);\n    }\n  };\n\n  const helper = useHelperText(helperText, { describedBy: ariaDescribedBy });\n  const valueText = `${current} of ${max}`;\n  // The slider is named by what is rated. An image has no value, so its name\n  // carries the value too.\n  const label = readOnly ? (ariaLabel ? `${ariaLabel} ${valueText}` : valueText) : ariaLabel || \"Rating\";\n\n  // The control is a slider, or an image named by its value when the rating is\n  // read-only. The helper text stays outside it: the children of a slider or an\n  // image are presentational, so assistive technology would never read it.\n  return (\n    <span\n      className={cn(\n        \"smwb-rating\",\n        { \"smwb-rating_readonly\": readOnly, \"smwb-rating_disabled\": disabled, \"smwb-rating_error\": error },\n        color !== \"primary\" && `smwb-rating_color-${color}`,\n        className\n      )}\n    >\n      <span\n        ref={ref}\n        id={id}\n        className=\"smwb-rating__control\"\n        data-testid=\"rating\"\n        role={readOnly ? \"img\" : \"slider\"}\n        aria-label={label}\n        aria-valuemin={readOnly ? undefined : 0}\n        aria-valuemax={readOnly ? undefined : max}\n        aria-valuenow={readOnly ? undefined : current}\n        aria-valuetext={readOnly ? undefined : valueText}\n        aria-disabled={!readOnly && disabled ? true : undefined}\n        aria-describedby={helper.describedBy}\n        tabIndex={interactive ? 0 : undefined}\n        onKeyDown={interactive ? handleKeyDown : undefined}\n      >\n        {Array.from({ length: max }, (_, index) => {\n          const fillRatio = Math.max(0, Math.min(1, display - index));\n          return (\n            <span\n              key={index}\n              className=\"smwb-rating__item\"\n              style={{ width: size, height: size, cursor: interactive ? \"pointer\" : \"default\" }}\n              onClick={(event) => handleSelect(event, index)}\n              onMouseMove={\n                interactive && precision === 0.5\n                  ? (event) => setHover(valueFromEvent(event, index))\n                  : interactive\n                    ? () => setHover(index + 1)\n                    : undefined\n              }\n              // Always clears the preview, so a rating that turns read-only while\n              // hovered does not keep it.\n              onMouseLeave={() => setHover(null)}\n            >\n              <span className=\"smwb-rating__icon smwb-rating__icon_empty\">{blankIcon}</span>\n              <span className=\"smwb-rating__icon smwb-rating__icon_filled\" style={{ width: `${fillRatio * 100}%` }}>\n                {filledIcon}\n              </span>\n            </span>\n          );\n        })}\n      </span>\n      {name ? <input type=\"hidden\" name={name} value={current} readOnly /> : null}\n      {hasHelperText(helperText) ? (\n        <span id={helper.id} className={cn(\"smwb-rating__helper\", error && \"smwb-rating__helper_error\")}>\n          {helperText}\n        </span>\n      ) : null}\n    </span>\n  );\n});\n\nexport default Rating;\n"],"names":["Rating","forwardRef","className","value","defaultValue","max","precision","readOnly","disabled","size","icon","emptyIcon","name","color","error","helperText","id","ariaLabel","ariaDescribedBy","onChange","ref","isControlled","internal","setInternal","useState","hover","setHover","current","display","interactive","valueFromEvent","event","starIndex","left","width","isLeftHalf","handleSelect","next","filledIcon","jsx","Icon","blankIcon","commit","clamped","handleKeyDown","helper","useHelperText","valueText","label","jsxs","cn","_","index","fillRatio","hasHelperText"],"mappings":"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"}

package/dist/components/inputs/selectField/dropdownMenu.d.ts

@@ -36,5 +36,24 @@ export interface DropdownItemProps<T extends HTMLElement = HTMLElement> {
     virtualized?: boolean;
     /** Row height (px) used when `virtualized`. */
     itemHeight?: number;
+    /** Id of the listbox; the options' ids follow from it (`dropdownOptionId`). */
+    listboxId?: string;
+    /** Ids of the elements that name the listbox and the search box in the menu. */
+    labelledBy?: string;
+    /** Names the listbox and the search box in the menu when no element does. */
+    label?: string;
+    /** Several options can be selected (`aria-multiselectable`). */
+    multiple?: boolean;
+    /** Index of the active option, counting `items` and then the create option; -1 for none. */
+    activeIndex?: number;
+    /** Marks the active option and keeps it in view: the keyboard moved to it. */
+    showActive?: boolean;
+    /** Attributes and handlers of the search box in the menu, which the field makes a combobox. */
+    searchInputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+    searchInputRef?: React.Ref<HTMLInputElement>;
+    /** The menu's root element. */
+    menuRef?: React.Ref<HTMLDivElement>;
 }
-export declare function DropdownMenu<T extends HTMLElement>({ menuMaxHeight, menuMiddleware, search, onSearchInputChange, items, searchValue, isOpen, onClose, anchorElementRef, value, onItemClick, isLoading, optionRenderer, menuNoItemsMessage, container, createOption, virtualized, itemHeight, }: DropdownItemProps<T>): React.ReactPortal | null;
+/** Id of the option at `index` in the listbox `listboxId`. */
+export declare function dropdownOptionId(listboxId: string, index: number): string;
+export declare function DropdownMenu<T extends HTMLElement>({ menuMaxHeight, menuMiddleware, search, onSearchInputChange, items, searchValue, isOpen, onClose, anchorElementRef, value, onItemClick, isLoading, optionRenderer, menuNoItemsMessage, container, createOption, virtualized, itemHeight, listboxId, labelledBy, label, multiple, activeIndex, showActive, searchInputProps, searchInputRef, menuRef, }: DropdownItemProps<T>): React.ReactPortal | null;