@smwb/ui-react 2.6.2 → 2.7.0

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

@@ -1,21 +1,22 @@
 import { jsx as e, jsxs as c } from "react/jsx-runtime";
-import '../../../assets/styles/less/components/radioButton/radioButton.entry.css';/* empty css                                                                 */
+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 T = x.forwardRef(function(r, b) {
+const $ = x.forwardRef(function(r, b) {
   const {
     label: m,
     disabled: a,
     readOnly: s,
-    required: l,
+    required: t,
     name: p,
     id: u,
     size: w = "medium",
     color: f = "primary",
     helperText: _,
-    error: t,
+    error: l,
     onChange: d,
     className: h,
     ...N
@@ -26,7 +27,7 @@ const T = x.forwardRef(function(r, b) {
     }
     d == null || d(o, r.value !== void 0 ? r.value : o.target.checked, r);
   };
-  return /* @__PURE__ */ e(y, { helperText: _, disabled: a, error: t, className: "smwb-text-field-checkbox", children: /* @__PURE__ */ c(
+  return /* @__PURE__ */ e(y, { helperText: _, disabled: a, error: l, className: "smwb-text-field-checkbox", children: /* @__PURE__ */ c(
     "label",
     {
       htmlFor: n,
@@ -43,9 +44,9 @@ const T = x.forwardRef(function(r, b) {
               name: p,
               disabled: a,
               readOnly: s,
-              required: l,
-              "aria-invalid": t || void 0,
-              "aria-required": l || void 0,
+              required: t,
+              "aria-invalid": l || void 0,
+              "aria-required": t || void 0,
               className: i("smwb-radio__input", h),
               type: "radio",
               "data-testid": "radio",
@@ -63,7 +64,7 @@ const T = x.forwardRef(function(r, b) {
   ) });
 });
 export {
-  T as RadioButton,
-  T as default
+  $ as RadioButton,
+  $ 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":";;;;;;AA2BO,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 { 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;"}

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

@@ -1,9 +1,10 @@
-import { jsxs as N, jsx as i } from "react/jsx-runtime";
-import '../../../assets/styles/less/components/rating/rating.entry.css';/* empty css                                                       */
+import { jsxs as N, jsx as a } 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 Y = I(function({
+const Z = I(function({
   className: L,
   value: d,
   defaultValue: j = 0,
@@ -11,7 +12,7 @@ const Y = I(function({
   precision: c = 1,
   readOnly: g = !1,
   disabled: y = !1,
-  size: f = 28,
+  size: m = 28,
   icon: u,
   emptyIcon: w,
   name: h,
@@ -24,18 +25,18 @@ const Y = I(function({
   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)
       return r + 1;
-    const { left: a, width: e } = t.currentTarget.getBoundingClientRect(), G = t.clientX - a < e / 2;
+    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)
       return;
-    const a = A(t, r);
-    M || R(a), s == null || s(a);
-  }, U = u != null ? u : /* @__PURE__ */ i(H, { name: "star", fill: 1, size: f }), X = w != null ? w : /* @__PURE__ */ i(H, { name: "star", size: f }), m = (t) => {
+    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(), m(n + c)) : t.key === "ArrowLeft" || t.key === "ArrowDown" ? (t.preventDefault(), m(n - c)) : t.key === "Home" ? (t.preventDefault(), m(0)) : t.key === "End" && (t.preventDefault(), m(o)));
+    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(
     "span",
@@ -55,31 +56,31 @@ const Y = I(function({
       onKeyDown: l ? q : void 0,
       children: [
         Array.from({ length: o }, (t, r) => {
-          const a = Math.max(0, Math.min(1, B - r));
+          const i = Math.max(0, Math.min(1, B - r));
           return /* @__PURE__ */ N(
             "span",
             {
               className: "smwb-rating__item",
-              style: { width: f, height: f, cursor: l ? "pointer" : "default" },
+              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__ */ i("span", { className: "smwb-rating__icon smwb-rating__icon_empty", children: X }),
-                /* @__PURE__ */ i("span", { className: "smwb-rating__icon smwb-rating__icon_filled", style: { width: `${a * 100}%` }, children: U })
+                /* @__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__ */ i("input", { type: "hidden", name: h, value: n, readOnly: !0 }) : null,
-        _ != null && _ !== !1 ? /* @__PURE__ */ i("span", { className: $("smwb-rating__helper", D && "smwb-rating__helper_error"), children: _ }) : null
+        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
       ]
     }
   );
 });
 export {
-  Y as Rating,
-  Y as default
+  Z as Rating,
+  Z 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\";\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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"}

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

@@ -37,4 +37,4 @@ export interface DropdownItemProps<T extends HTMLElement = HTMLElement> {
     /** Row height (px) used when `virtualized`. */
     itemHeight?: number;
 }
-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;
+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;

package/dist/components/inputs/selectField/dropdownMenu.js

@@ -1,54 +1,55 @@
-import { jsxs as u, Fragment as $, jsx as t } from "react/jsx-runtime";
-import b, { useEffect as I } from "react";
-import { useVirtualList as K } from "../../../hooks/useVirtualList.js";
-import { ProgressIndicator as q } from "../../feedBack/progressIndicator/progressIndicator.js";
-import { createPortal as z } from "react-dom";
-import { Menu as B } from "../../navigation/menu/menu.js";
-import { TextField as J } from "../textField/textField.js";
-import { MenuDivider as Q } from "../../navigation/menu/menuDivider.js";
-import { MenuItem as g } from "../../navigation/menu/menuItem.js";
-function re({
-  menuMaxHeight: a,
-  menuMiddleware: x,
-  search: N,
+import { jsxs as f, Fragment as K, jsx as t } from "react/jsx-runtime";
+import x, { useState as S, useEffect as q } from "react";
+import { useVirtualList as z } from "../../../hooks/useVirtualList.js";
+import { useSafeLayoutEffect as B } from "../../../hooks/useSafeLayoutEffect.js";
+import { ProgressIndicator as J } from "../../feedBack/progressIndicator/progressIndicator.js";
+import { createPortal as Q } from "react-dom";
+import { Menu as R } from "../../navigation/menu/menu.js";
+import { TextField as U } from "../textField/textField.js";
+import { MenuDivider as X } from "../../navigation/menu/menuDivider.js";
+import { MenuItem as N } from "../../navigation/menu/menuItem.js";
+function ae({
+  menuMaxHeight: d,
+  menuMiddleware: k,
+  search: M,
   onSearchInputChange: n,
   items: l,
-  searchValue: k,
-  isOpen: i,
-  onClose: d,
-  anchorElementRef: s,
+  searchValue: W,
+  isOpen: s,
+  onClose: m,
+  anchorElementRef: i,
   value: c,
-  onItemClick: M,
+  onItemClick: D,
   isLoading: p,
-  optionRenderer: W,
+  optionRenderer: E,
   menuNoItemsMessage: Y,
-  container: A = document.body,
-  createOption: o,
-  virtualized: D,
-  itemHeight: E = 40
+  container: o,
+  createOption: a,
+  virtualized: A,
+  itemHeight: L = 40
 }) {
   const T = Array.isArray(c) ? c : [c], _ = l.some((e) => !!e.group);
-  let f;
-  const h = !!D && !_ && !p && l.length > 0, v = a || 240, { startIndex: j, endIndex: F, totalHeight: G, offsetY: H, onScroll: L } = K({
-    itemCount: h ? l.length : 0,
-    itemHeight: E,
-    viewportHeight: v
-  }), w = (e) => {
-    var y;
+  let h;
+  const v = !!A && !_ && !p && l.length > 0, w = d || 240, { startIndex: j, endIndex: F, totalHeight: G, offsetY: H, onScroll: P } = z({
+    itemCount: v ? l.length : 0,
+    itemHeight: L,
+    viewportHeight: w
+  }), y = (e) => {
+    var g;
     const r = [];
-    return _ && e.group !== f && (f = e.group, r.push(
-      /* @__PURE__ */ t("li", { className: "smwb-select-field__group-label", role: "presentation", children: e.group }, `group-${(y = e.group) != null ? y : "ungrouped"}`)
+    return _ && e.group !== h && (h = e.group, r.push(
+      /* @__PURE__ */ t("li", { className: "smwb-select-field__group-label", role: "presentation", children: e.group }, `group-${(g = e.group) != null ? g : "ungrouped"}`)
     )), r.push(
-      /* @__PURE__ */ u(
-        g,
+      /* @__PURE__ */ f(
+        N,
         {
           value: e.value,
           disabled: e.disabled,
-          selected: !!T.find((m) => m === e.value),
-          onClick: (m) => {
-            e.disabled || M(m, e);
+          selected: !!T.find((u) => u === e.value),
+          onClick: (u) => {
+            e.disabled || D(u, e);
           },
-          optionRenderer: W,
+          optionRenderer: E,
           children: [
             e.text,
             e.helperText ? /* @__PURE__ */ t("span", { className: "smwb-select-field__option__helper-text", children: e.helperText }) : null
@@ -57,79 +58,81 @@ function re({
         e.key || e.value
       )
     ), r;
-  }, [P, V] = b.useState();
-  return I(() => {
-    i && s.current && V(s.current.clientWidth);
-  }, [s, i]), b.useEffect(() => {
+  }, [V, $] = x.useState(), [b, I] = S();
+  return B(() => {
+    I(o != null ? o : document.body);
+  }, [o]), q(() => {
+    s && i.current && $(i.current.clientWidth);
+  }, [i, s]), x.useEffect(() => {
     const e = (r) => {
-      i && r.key === "Escape" && d();
+      s && r.key === "Escape" && m();
     };
     return document.addEventListener("keydown", e), () => {
       document.removeEventListener("keydown", e);
     };
-  }, [i, d]), z(
-    /* @__PURE__ */ u(
-      B,
+  }, [s, m]), b ? Q(
+    /* @__PURE__ */ f(
+      R,
       {
-        isOpen: i,
-        onClose: d,
-        anchorElement: s.current,
-        middleware: x,
+        isOpen: s,
+        onClose: m,
+        anchorElement: i.current,
+        middleware: k,
         "data-smwb-overlay-layer": "",
         style: {
-          minWidth: P,
-          maxHeight: a || void 0,
-          overflowY: a ? "auto" : void 0
+          minWidth: V,
+          maxHeight: d || void 0,
+          overflowY: d ? "auto" : void 0
         },
         children: [
-          N && /* @__PURE__ */ u($, { children: [
+          M && /* @__PURE__ */ f(K, { children: [
             /* @__PURE__ */ t("li", { className: "smwb-select-field__menu-search", children: /* @__PURE__ */ t(
-              J,
+              U,
               {
                 className: "smwb-select-field__menu-search-input",
                 type: "text",
                 placeholder: "Найти...",
-                value: k,
+                value: W,
                 onChange: (e, r) => n == null ? void 0 : n(e, r.value),
                 fullWidth: !0
               }
             ) }),
-            /* @__PURE__ */ t(Q, {})
+            /* @__PURE__ */ t(X, {})
           ] }),
-          p ? /* @__PURE__ */ t("div", { className: "smwb-select-field__menu-loading", children: /* @__PURE__ */ t(q, { type: "indeterminate", variant: "circular", className: "smwb-select-field__menu__loader" }) }) : h ? /* @__PURE__ */ t("li", { role: "presentation", className: "smwb-select-field__virtual-viewport", children: /* @__PURE__ */ t(
+          p ? /* @__PURE__ */ t("div", { className: "smwb-select-field__menu-loading", children: /* @__PURE__ */ t(J, { type: "indeterminate", variant: "circular", className: "smwb-select-field__menu__loader" }) }) : v ? /* @__PURE__ */ t("li", { role: "presentation", className: "smwb-select-field__virtual-viewport", children: /* @__PURE__ */ t(
             "div",
             {
               className: "smwb-select-field__virtual-scroller",
-              style: { maxHeight: v, overflowY: "auto" },
-              onScroll: L,
+              style: { maxHeight: w, overflowY: "auto" },
+              onScroll: P,
               children: /* @__PURE__ */ t("div", { style: { height: G, position: "relative" }, children: /* @__PURE__ */ t(
                 "ul",
                 {
                   role: "presentation",
                   className: "smwb-select-field__virtual-list",
                   style: { transform: `translateY(${H}px)`, listStyle: "none", margin: 0, padding: 0 },
-                  children: l.slice(j, F).map((e) => w(e))
+                  children: l.slice(j, F).map((e) => y(e))
                 }
               ) })
             }
-          ) }) : l.length ? l.map((e) => w(e)) : o ? null : /* @__PURE__ */ t("li", { className: "smwb-select-field__empty-items", children: Y || "Опций не найдено." }),
-          o ? /* @__PURE__ */ t(
-            g,
+          ) }) : l.length ? l.map((e) => y(e)) : a ? null : /* @__PURE__ */ t("li", { className: "smwb-select-field__empty-items", children: Y || "Опций не найдено." }),
+          a ? /* @__PURE__ */ t(
+            N,
             {
               value: "__create__",
-              onClick: (e) => o.onCreate(e),
+              onClick: (e) => a.onCreate(e),
               className: "smwb-select-field__create-option",
-              children: o.text
+              children: a.text
             },
             "__create__"
           ) : null
         ]
       }
     ),
-    A
-  );
+    b
+  ) : null;
 }
 export {
-  re as DropdownMenu
+  ae as DropdownMenu
 };
 //# sourceMappingURL=dropdownMenu.js.map

package/dist/components/inputs/selectField/dropdownMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdownMenu.js","sources":["../../../../src/components/inputs/selectField/dropdownMenu.tsx"],"sourcesContent":["import React, { useEffect } from \"react\";\nimport { useVirtualList } from \"../../../hooks/useVirtualList\";\nimport { Menu, MenuDivider, MenuItem, MenuItemProps } from \"../../navigation/menu\";\nimport { TextField } from \"../textField\";\nimport ProgressIndicator from \"../../feedBack/progressIndicator/progressIndicator\";\nimport { createPortal } from \"react-dom\";\nimport { MenuFloatingProps } from \"../../navigation/menu/menuFloating\";\n\nexport interface DropdownItem {\n  key?: string | number;\n  text: string;\n  value: string | number | undefined | null;\n  helperText?: string;\n  /** Disables selection of this option. */\n  disabled?: boolean;\n  /** Optional group label; consecutive items sharing it get a group header. */\n  group?: string;\n}\n\nexport interface DropdownItemProps<T extends HTMLElement = HTMLElement> {\n  menuMaxHeight?: number;\n  menuMiddleware?: MenuFloatingProps[\"middleware\"];\n  menuNoItemsMessage?: React.ReactNode;\n  search?: boolean;\n  onSearchInputChange?: (event: React.ChangeEvent<HTMLInputElement>, value: string | number | undefined) => void;\n  items: DropdownItem[];\n  searchValue?: string | number;\n  isOpen: boolean;\n  onClose: () => void;\n  anchorElementRef: React.RefObject<T>;\n  value?: undefined | null | string | number | (undefined | null | string | number)[];\n  onItemClick: (event: React.SyntheticEvent, item: DropdownItem) => void;\n  isLoading?: boolean;\n  optionRenderer?: (args: MenuItemProps) => React.ReactNode;\n  container?: HTMLElement;\n  /** Renders a trailing \"create\" affordance (used by `creatable` SelectField). */\n  createOption?: { text: React.ReactNode; onCreate: (event: React.SyntheticEvent) => void };\n  /** Windows the option list for large datasets (fixed row height). */\n  virtualized?: boolean;\n  /** Row height (px) used when `virtualized`. */\n  itemHeight?: number;\n}\n\nexport function DropdownMenu<T extends HTMLElement>({\n  menuMaxHeight,\n  menuMiddleware,\n  search,\n  onSearchInputChange,\n  items,\n  searchValue,\n  isOpen,\n  onClose,\n  anchorElementRef,\n  value,\n  onItemClick,\n  isLoading,\n  optionRenderer,\n  menuNoItemsMessage,\n  container = document.body,\n  createOption,\n  virtualized,\n  itemHeight = 40,\n}: DropdownItemProps<T>) {\n  const valueArray = Array.isArray(value) ? value : [value];\n  const hasGroups = items.some((i) => !!i.group);\n  let lastGroup: string | undefined;\n\n  const useVirtual = !!virtualized && !hasGroups && !isLoading && items.length > 0;\n  const viewportHeight = menuMaxHeight || 240;\n  const { startIndex, endIndex, totalHeight, offsetY, onScroll } = useVirtualList({\n    itemCount: useVirtual ? items.length : 0,\n    itemHeight,\n    viewportHeight,\n  });\n\n  const renderItem = (el: DropdownItem) => {\n    const node: React.ReactNode[] = [];\n    if (hasGroups && el.group !== lastGroup) {\n      lastGroup = el.group;\n      node.push(\n        <li key={`group-${el.group ?? \"ungrouped\"}`} className=\"smwb-select-field__group-label\" role=\"presentation\">\n          {el.group}\n        </li>\n      );\n    }\n    node.push(\n      <MenuItem\n        key={el.key || el.value}\n        value={el.value}\n        disabled={el.disabled}\n        selected={!!valueArray.find((v) => v === el.value)}\n        onClick={(e: React.SyntheticEvent) => {\n          if (!el.disabled) {\n            onItemClick(e, el);\n          }\n        }}\n        optionRenderer={optionRenderer}\n      >\n        {el.text}\n        {el.helperText ? <span className=\"smwb-select-field__option__helper-text\">{el.helperText}</span> : null}\n      </MenuItem>\n    );\n    return node;\n  };\n  const [menuMinWidth, setMenuMinWidth] = React.useState<number>();\n\n  useEffect(() => {\n    if (isOpen && anchorElementRef.current) {\n      setMenuMinWidth(anchorElementRef.current.clientWidth);\n    }\n  }, [anchorElementRef, isOpen]);\n\n  React.useEffect(() => {\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (isOpen && event.key === \"Escape\") {\n        onClose();\n      }\n    };\n\n    document.addEventListener(\"keydown\", onKeyDown);\n\n    return () => {\n      document.removeEventListener(\"keydown\", onKeyDown);\n    };\n  }, [isOpen, onClose]);\n\n  return createPortal(\n    <Menu\n      isOpen={isOpen}\n      onClose={onClose}\n      anchorElement={anchorElementRef.current}\n      middleware={menuMiddleware}\n      data-smwb-overlay-layer=\"\"\n      style={{\n        minWidth: menuMinWidth,\n        maxHeight: menuMaxHeight || undefined,\n        overflowY: menuMaxHeight ? \"auto\" : undefined,\n      }}\n    >\n      {search && (\n        <>\n          <li className=\"smwb-select-field__menu-search\">\n            <TextField\n              className=\"smwb-select-field__menu-search-input\"\n              type=\"text\"\n              placeholder=\"Найти...\"\n              value={searchValue}\n              onChange={(e, data) => onSearchInputChange?.(e, data.value)}\n              fullWidth\n            />\n          </li>\n          <MenuDivider />\n        </>\n      )}\n      {isLoading ? (\n        <div className=\"smwb-select-field__menu-loading\">\n          <ProgressIndicator type=\"indeterminate\" variant=\"circular\" className=\"smwb-select-field__menu__loader\" />\n        </div>\n      ) : useVirtual ? (\n        <li role=\"presentation\" className=\"smwb-select-field__virtual-viewport\">\n          <div\n            className=\"smwb-select-field__virtual-scroller\"\n            style={{ maxHeight: viewportHeight, overflowY: \"auto\" }}\n            onScroll={onScroll}\n          >\n            <div style={{ height: totalHeight, position: \"relative\" }}>\n              <ul\n                role=\"presentation\"\n                className=\"smwb-select-field__virtual-list\"\n                style={{ transform: `translateY(${offsetY}px)`, listStyle: \"none\", margin: 0, padding: 0 }}\n              >\n                {items.slice(startIndex, endIndex).map((el) => renderItem(el))}\n              </ul>\n            </div>\n          </div>\n        </li>\n      ) : items.length ? (\n        items.map((el) => renderItem(el))\n      ) : !createOption ? (\n        <li className=\"smwb-select-field__empty-items\">{menuNoItemsMessage || \"Опций не найдено.\"}</li>\n      ) : null}\n      {createOption ? (\n        <MenuItem\n          key=\"__create__\"\n          value=\"__create__\"\n          onClick={(e: React.SyntheticEvent) => createOption.onCreate(e)}\n          className=\"smwb-select-field__create-option\"\n        >\n          {createOption.text}\n        </MenuItem>\n      ) : null}\n    </Menu>,\n    container\n  );\n}\n"],"names":["DropdownMenu","menuMaxHeight","menuMiddleware","search","onSearchInputChange","items","searchValue","isOpen","onClose","anchorElementRef","value","onItemClick","isLoading","optionRenderer","menuNoItemsMessage","container","createOption","virtualized","itemHeight","valueArray","hasGroups","i","lastGroup","useVirtual","viewportHeight","startIndex","endIndex","totalHeight","offsetY","onScroll","useVirtualList","renderItem","el","node","jsx","_a","jsxs","MenuItem","v","e","menuMinWidth","setMenuMinWidth","React","useEffect","onKeyDown","event","createPortal","Menu","Fragment","TextField","data","MenuDivider","ProgressIndicator"],"mappings":";;;;;;;;;AA2CO,SAASA,GAAoC;AAAA,EAClD,eAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,QAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,WAAAC,IAAY,SAAS;AAAA,EACrB,cAAAC;AAAA,EACA,aAAAC;AAAA,EACA,YAAAC,IAAa;AACf,GAAyB;AACvB,QAAMC,IAAa,MAAM,QAAQT,CAAK,IAAIA,IAAQ,CAACA,CAAK,GAClDU,IAAYf,EAAM,KAAK,CAACgB,MAAM,CAAC,CAACA,EAAE,KAAK;AAC7C,MAAIC;AAEJ,QAAMC,IAAa,CAAC,CAACN,KAAe,CAACG,KAAa,CAACR,KAAaP,EAAM,SAAS,GACzEmB,IAAiBvB,KAAiB,KAClC,EAAE,YAAAwB,GAAY,UAAAC,GAAU,aAAAC,GAAa,SAAAC,GAAS,UAAAC,EAAA,IAAaC,EAAe;AAAA,IAC9E,WAAWP,IAAalB,EAAM,SAAS;AAAA,IACvC,YAAAa;AAAA,IACA,gBAAAM;AAAA,EAAA,CACD,GAEKO,IAAa,CAACC,MAAqB;;AACvC,UAAMC,IAA0B,CAAA;AAChC,WAAIb,KAAaY,EAAG,UAAUV,MAC5BA,IAAYU,EAAG,OACfC,EAAK;AAAA,MACH,gBAAAC,EAAC,MAAA,EAA4C,WAAU,kCAAiC,MAAK,gBAC1F,UAAAF,EAAG,MAAA,GADG,UAASG,IAAAH,EAAG,UAAH,OAAAG,IAAY,WAAW,EAEzC;AAAA,IAAA,IAGJF,EAAK;AAAA,MACH,gBAAAG;AAAA,QAACC;AAAA,QAAA;AAAA,UAEC,OAAOL,EAAG;AAAA,UACV,UAAUA,EAAG;AAAA,UACb,UAAU,CAAC,CAACb,EAAW,KAAK,CAACmB,MAAMA,MAAMN,EAAG,KAAK;AAAA,UACjD,SAAS,CAACO,MAA4B;AACpC,YAAKP,EAAG,YACNrB,EAAY4B,GAAGP,CAAE;AAAA,UAErB;AAAA,UACA,gBAAAnB;AAAA,UAEC,UAAA;AAAA,YAAAmB,EAAG;AAAA,YACHA,EAAG,aAAa,gBAAAE,EAAC,QAAA,EAAK,WAAU,0CAA0C,UAAAF,EAAG,YAAW,IAAU;AAAA,UAAA;AAAA,QAAA;AAAA,QAZ9FA,EAAG,OAAOA,EAAG;AAAA,MAAA;AAAA,IAapB,GAEKC;AAAA,EACT,GACM,CAACO,GAAcC,CAAe,IAAIC,EAAM,SAAA;AAE9C,SAAAC,EAAU,MAAM;AACd,IAAIpC,KAAUE,EAAiB,WAC7BgC,EAAgBhC,EAAiB,QAAQ,WAAW;AAAA,EAExD,GAAG,CAACA,GAAkBF,CAAM,CAAC,GAE7BmC,EAAM,UAAU,MAAM;AACpB,UAAME,IAAY,CAACC,MAAyB;AAC1C,MAAItC,KAAUsC,EAAM,QAAQ,YAC1BrC,EAAA;AAAA,IAEJ;AAEA,oBAAS,iBAAiB,WAAWoC,CAAS,GAEvC,MAAM;AACX,eAAS,oBAAoB,WAAWA,CAAS;AAAA,IACnD;AAAA,EACF,GAAG,CAACrC,GAAQC,CAAO,CAAC,GAEbsC;AAAA,IACL,gBAAAV;AAAA,MAACW;AAAA,MAAA;AAAA,QACC,QAAAxC;AAAA,QACA,SAAAC;AAAA,QACA,eAAeC,EAAiB;AAAA,QAChC,YAAYP;AAAA,QACZ,2BAAwB;AAAA,QACxB,OAAO;AAAA,UACL,UAAUsC;AAAA,UACV,WAAWvC,KAAiB;AAAA,UAC5B,WAAWA,IAAgB,SAAS;AAAA,QAAA;AAAA,QAGrC,UAAA;AAAA,UAAAE,KACC,gBAAAiC,EAAAY,GAAA,EACE,UAAA;AAAA,YAAA,gBAAAd,EAAC,MAAA,EAAG,WAAU,kCACZ,UAAA,gBAAAA;AAAA,cAACe;AAAA,cAAA;AAAA,gBACC,WAAU;AAAA,gBACV,MAAK;AAAA,gBACL,aAAY;AAAA,gBACZ,OAAO3C;AAAA,gBACP,UAAU,CAAC,GAAG4C,MAAS9C,KAAA,gBAAAA,EAAsB,GAAG8C,EAAK;AAAA,gBACrD,WAAS;AAAA,cAAA;AAAA,YAAA,GAEb;AAAA,8BACCC,GAAA,CAAA,CAAY;AAAA,UAAA,GACf;AAAA,UAEDvC,sBACE,OAAA,EAAI,WAAU,mCACb,UAAA,gBAAAsB,EAACkB,GAAA,EAAkB,MAAK,iBAAgB,SAAQ,YAAW,WAAU,kCAAA,CAAkC,GACzG,IACE7B,sBACD,MAAA,EAAG,MAAK,gBAAe,WAAU,uCAChC,UAAA,gBAAAW;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,OAAO,EAAE,WAAWV,GAAgB,WAAW,OAAA;AAAA,cAC/C,UAAAK;AAAA,cAEA,UAAA,gBAAAK,EAAC,SAAI,OAAO,EAAE,QAAQP,GAAa,UAAU,cAC3C,UAAA,gBAAAO;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,MAAK;AAAA,kBACL,WAAU;AAAA,kBACV,OAAO,EAAE,WAAW,cAAcN,CAAO,OAAO,WAAW,QAAQ,QAAQ,GAAG,SAAS,EAAA;AAAA,kBAEtF,UAAAvB,EAAM,MAAMoB,GAAYC,CAAQ,EAAE,IAAI,CAACM,MAAOD,EAAWC,CAAE,CAAC;AAAA,gBAAA;AAAA,cAAA,EAC/D,CACF;AAAA,YAAA;AAAA,UAAA,GAEJ,IACE3B,EAAM,SACRA,EAAM,IAAI,CAAC2B,MAAOD,EAAWC,CAAE,CAAC,IAC7BhB,IAED,OADF,gBAAAkB,EAAC,MAAA,EAAG,WAAU,kCAAkC,UAAApB,KAAsB,qBAAoB;AAAA,UAE3FE,IACC,gBAAAkB;AAAA,YAACG;AAAA,YAAA;AAAA,cAEC,OAAM;AAAA,cACN,SAAS,CAAC,MAA4BrB,EAAa,SAAS,CAAC;AAAA,cAC7D,WAAU;AAAA,cAET,UAAAA,EAAa;AAAA,YAAA;AAAA,YALV;AAAA,UAAA,IAOJ;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAEND;AAAA,EAAA;AAEJ;"}
+{"version":3,"file":"dropdownMenu.js","sources":["../../../../src/components/inputs/selectField/dropdownMenu.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport { useVirtualList } from \"../../../hooks/useVirtualList\";\nimport { useSafeLayoutEffect } from \"../../../hooks/useSafeLayoutEffect\";\nimport { Menu, MenuDivider, MenuItem, MenuItemProps } from \"../../navigation/menu\";\nimport { TextField } from \"../textField\";\nimport ProgressIndicator from \"../../feedBack/progressIndicator/progressIndicator\";\nimport { createPortal } from \"react-dom\";\nimport { MenuFloatingProps } from \"../../navigation/menu/menuFloating\";\n\nexport interface DropdownItem {\n  key?: string | number;\n  text: string;\n  value: string | number | undefined | null;\n  helperText?: string;\n  /** Disables selection of this option. */\n  disabled?: boolean;\n  /** Optional group label; consecutive items sharing it get a group header. */\n  group?: string;\n}\n\nexport interface DropdownItemProps<T extends HTMLElement = HTMLElement> {\n  menuMaxHeight?: number;\n  menuMiddleware?: MenuFloatingProps[\"middleware\"];\n  menuNoItemsMessage?: React.ReactNode;\n  search?: boolean;\n  onSearchInputChange?: (event: React.ChangeEvent<HTMLInputElement>, value: string | number | undefined) => void;\n  items: DropdownItem[];\n  searchValue?: string | number;\n  isOpen: boolean;\n  onClose: () => void;\n  anchorElementRef: React.RefObject<T>;\n  value?: undefined | null | string | number | (undefined | null | string | number)[];\n  onItemClick: (event: React.SyntheticEvent, item: DropdownItem) => void;\n  isLoading?: boolean;\n  optionRenderer?: (args: MenuItemProps) => React.ReactNode;\n  container?: HTMLElement;\n  /** Renders a trailing \"create\" affordance (used by `creatable` SelectField). */\n  createOption?: { text: React.ReactNode; onCreate: (event: React.SyntheticEvent) => void };\n  /** Windows the option list for large datasets (fixed row height). */\n  virtualized?: boolean;\n  /** Row height (px) used when `virtualized`. */\n  itemHeight?: number;\n}\n\nexport function DropdownMenu<T extends HTMLElement>({\n  menuMaxHeight,\n  menuMiddleware,\n  search,\n  onSearchInputChange,\n  items,\n  searchValue,\n  isOpen,\n  onClose,\n  anchorElementRef,\n  value,\n  onItemClick,\n  isLoading,\n  optionRenderer,\n  menuNoItemsMessage,\n  container,\n  createOption,\n  virtualized,\n  itemHeight = 40,\n}: DropdownItemProps<T>) {\n  const valueArray = Array.isArray(value) ? value : [value];\n  const hasGroups = items.some((i) => !!i.group);\n  let lastGroup: string | undefined;\n\n  const useVirtual = !!virtualized && !hasGroups && !isLoading && items.length > 0;\n  const viewportHeight = menuMaxHeight || 240;\n  const { startIndex, endIndex, totalHeight, offsetY, onScroll } = useVirtualList({\n    itemCount: useVirtual ? items.length : 0,\n    itemHeight,\n    viewportHeight,\n  });\n\n  const renderItem = (el: DropdownItem) => {\n    const node: React.ReactNode[] = [];\n    if (hasGroups && el.group !== lastGroup) {\n      lastGroup = el.group;\n      node.push(\n        <li key={`group-${el.group ?? \"ungrouped\"}`} className=\"smwb-select-field__group-label\" role=\"presentation\">\n          {el.group}\n        </li>\n      );\n    }\n    node.push(\n      <MenuItem\n        key={el.key || el.value}\n        value={el.value}\n        disabled={el.disabled}\n        selected={!!valueArray.find((v) => v === el.value)}\n        onClick={(e: React.SyntheticEvent) => {\n          if (!el.disabled) {\n            onItemClick(e, el);\n          }\n        }}\n        optionRenderer={optionRenderer}\n      >\n        {el.text}\n        {el.helperText ? <span className=\"smwb-select-field__option__helper-text\">{el.helperText}</span> : null}\n      </MenuItem>\n    );\n    return node;\n  };\n  const [menuMinWidth, setMenuMinWidth] = React.useState<number>();\n  // The menu is portalled: its target is resolved in the browser only. A server\n  // render (no document) and the first client render emit nothing here, so the\n  // select renders and hydrates on a server-rendered page.\n  const [domRoot, setDomRoot] = useState<HTMLElement>();\n  useSafeLayoutEffect(() => {\n    setDomRoot(container ?? document.body);\n  }, [container]);\n\n  useEffect(() => {\n    if (isOpen && anchorElementRef.current) {\n      setMenuMinWidth(anchorElementRef.current.clientWidth);\n    }\n  }, [anchorElementRef, isOpen]);\n\n  React.useEffect(() => {\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (isOpen && event.key === \"Escape\") {\n        onClose();\n      }\n    };\n\n    document.addEventListener(\"keydown\", onKeyDown);\n\n    return () => {\n      document.removeEventListener(\"keydown\", onKeyDown);\n    };\n  }, [isOpen, onClose]);\n\n  if (!domRoot) {\n    return null;\n  }\n\n  return createPortal(\n    <Menu\n      isOpen={isOpen}\n      onClose={onClose}\n      anchorElement={anchorElementRef.current}\n      middleware={menuMiddleware}\n      data-smwb-overlay-layer=\"\"\n      style={{\n        minWidth: menuMinWidth,\n        maxHeight: menuMaxHeight || undefined,\n        overflowY: menuMaxHeight ? \"auto\" : undefined,\n      }}\n    >\n      {search && (\n        <>\n          <li className=\"smwb-select-field__menu-search\">\n            <TextField\n              className=\"smwb-select-field__menu-search-input\"\n              type=\"text\"\n              placeholder=\"Найти...\"\n              value={searchValue}\n              onChange={(e, data) => onSearchInputChange?.(e, data.value)}\n              fullWidth\n            />\n          </li>\n          <MenuDivider />\n        </>\n      )}\n      {isLoading ? (\n        <div className=\"smwb-select-field__menu-loading\">\n          <ProgressIndicator type=\"indeterminate\" variant=\"circular\" className=\"smwb-select-field__menu__loader\" />\n        </div>\n      ) : useVirtual ? (\n        <li role=\"presentation\" className=\"smwb-select-field__virtual-viewport\">\n          <div\n            className=\"smwb-select-field__virtual-scroller\"\n            style={{ maxHeight: viewportHeight, overflowY: \"auto\" }}\n            onScroll={onScroll}\n          >\n            <div style={{ height: totalHeight, position: \"relative\" }}>\n              <ul\n                role=\"presentation\"\n                className=\"smwb-select-field__virtual-list\"\n                style={{ transform: `translateY(${offsetY}px)`, listStyle: \"none\", margin: 0, padding: 0 }}\n              >\n                {items.slice(startIndex, endIndex).map((el) => renderItem(el))}\n              </ul>\n            </div>\n          </div>\n        </li>\n      ) : items.length ? (\n        items.map((el) => renderItem(el))\n      ) : !createOption ? (\n        <li className=\"smwb-select-field__empty-items\">{menuNoItemsMessage || \"Опций не найдено.\"}</li>\n      ) : null}\n      {createOption ? (\n        <MenuItem\n          key=\"__create__\"\n          value=\"__create__\"\n          onClick={(e: React.SyntheticEvent) => createOption.onCreate(e)}\n          className=\"smwb-select-field__create-option\"\n        >\n          {createOption.text}\n        </MenuItem>\n      ) : null}\n    </Menu>,\n    domRoot\n  );\n}\n"],"names":["DropdownMenu","menuMaxHeight","menuMiddleware","search","onSearchInputChange","items","searchValue","isOpen","onClose","anchorElementRef","value","onItemClick","isLoading","optionRenderer","menuNoItemsMessage","container","createOption","virtualized","itemHeight","valueArray","hasGroups","i","lastGroup","useVirtual","viewportHeight","startIndex","endIndex","totalHeight","offsetY","onScroll","useVirtualList","renderItem","el","node","jsx","_a","jsxs","MenuItem","v","e","menuMinWidth","setMenuMinWidth","React","domRoot","setDomRoot","useState","useSafeLayoutEffect","useEffect","onKeyDown","event","createPortal","Menu","Fragment","TextField","data","MenuDivider","ProgressIndicator"],"mappings":"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"}

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

@@ -23,6 +23,8 @@ export interface SelectFieldProps {
     items: DropdownItem[];
     label?: string;
     variant?: "outlined" | "filled";
+    /** Height of the field, as for TextField: `small` (40px, for toolbars), `medium` (default) or `large`. */
+    size?: "small" | "medium" | "large";
     fullWidth?: boolean;
     helperText?: React.ReactNode;
     onSearch?: (e: React.ChangeEvent<HTMLInputElement>) => void;