asma-ui-core 3.58.5 → 3.60.0

package/dist/components/inputs/field-styles.js

@@ -1,4 +1,4 @@
-import { cn as a } from "../../helpers/cn.js";
+import { cn as n } from "../../helpers/cn.js";
 var d = () => ({
   boxSizing: "border-box",
   height: 40,
@@ -22,7 +22,7 @@ var d = () => ({
 } : {
   top: "50%",
   transform: "translateY(-50%)"
-}, x = ({ focused: e, error: r, disabled: t, readOnly: o }) => a("pointer-events-none absolute inset-0 rounded border border-solid transition-colors", t ? "border-delta-300" : o ? "border-delta-200" : r ? a("border-error-500", e && "border-2") : e ? "border-2 border-gama-400" : "border-delta-500 group-hover:border-2 group-hover:border-gama-300"), s = ({ focused: e, error: r, disabled: t, readOnly: o, notched: n = !0 }) => a("pointer-events-none absolute z-0 m-0 box-border min-w-0 overflow-hidden rounded border border-solid transition-colors", n ? "inset-x-0 bottom-0 top-[-5px] px-2 py-0" : "inset-0", t ? "border-delta-300" : o ? "border-delta-200" : r ? "border-error-500" : e ? "border-2 border-gama-400" : "border-delta-500 group-hover:border-2 group-hover:border-gama-300"), g = (e) => a("invisible block h-[11px] overflow-hidden p-0 text-xs leading-[23px] transition-[max-width] duration-150", e ? "max-w-full" : "max-w-[0.01px]"), p = ({ shrink: e, focused: r, error: t, disabled: o, readOnly: n }) => a("pointer-events-none absolute left-[14px] z-10 max-w-[calc(100%-1.75rem)] truncate transition-colors duration-150", o ? "text-delta-300" : n ? "text-delta-800" : t ? "text-error-500" : r ? "text-gama-500" : e ? "text-delta-800" : "text-delta-500", e ? "bg-white px-1 text-xs leading-[16px] tracking-[0.24px]" : "text-base leading-[23px] tracking-[0.00938em]");
+}, x = ({ focused: e, error: r, disabled: t, readOnly: o, borderless: a }) => n("pointer-events-none absolute inset-0 rounded border border-solid transition-colors", a && !e ? "border-transparent" : t ? "border-delta-300" : o ? "border-delta-200" : r ? n("border-error-500", e && "border-2") : e ? "border-2 border-gama-400" : "border-delta-500 group-hover:border-2 group-hover:border-gama-300"), s = ({ focused: e, error: r, disabled: t, readOnly: o, notched: a = !0 }) => n("pointer-events-none absolute z-0 m-0 box-border min-w-0 overflow-hidden rounded border border-solid transition-colors", a ? "inset-x-0 bottom-0 top-[-5px] px-2 py-0" : "inset-0", t ? "border-delta-300" : o ? "border-delta-200" : r ? "border-error-500" : e ? "border-2 border-gama-400" : "border-delta-500 group-hover:border-2 group-hover:border-gama-300"), g = (e) => n("invisible block h-[11px] overflow-hidden p-0 text-xs leading-[23px] transition-[max-width] duration-150", e ? "max-w-full" : "max-w-[0.01px]"), p = ({ shrink: e, focused: r, error: t, disabled: o, readOnly: a }) => n("pointer-events-none absolute left-[14px] z-10 max-w-[calc(100%-1.75rem)] truncate transition-colors duration-150", o ? "text-delta-300" : a ? "text-delta-800" : t ? "text-error-500" : r ? "text-gama-500" : e ? "text-delta-800" : "text-delta-500", e ? "bg-white px-1 text-xs leading-[16px] tracking-[0.24px]" : "text-base leading-[23px] tracking-[0.00938em]");
 export {
   p as floatingLabelClass,
   b as floatingLabelLayoutStyle,

package/dist/components/inputs/select/StyledSelect.js

@@ -1,19 +1,19 @@
 import { cn as f } from "../../../helpers/cn.js";
-import { resolveSx as ue } from "../../../helpers/sx.js";
+import { resolveSx as fe } from "../../../helpers/sx.js";
 import { ChevronDownIcon as pe } from "../../icons/chevron-down-icon/ChevronDownIcon.js";
 import { CloseIcon as me } from "../../icons/close-icon/CloseIcon.js";
-import { ErrorOutlineIcon as xe } from "../../icons/error-outline-icon/ErrorOutlineIcon.js";
-import { TOP_LAYER_PROPS as ge, TOP_LAYER_RESET_STYLE as ye, getOpenModalDialogAncestor as be, useTopLayerRef as he } from "../../../hooks/useTopLayer.hook.js";
+import { ErrorOutlineIcon as ye } from "../../icons/error-outline-icon/ErrorOutlineIcon.js";
+import { TOP_LAYER_PROPS as ge, TOP_LAYER_RESET_STYLE as xe, getOpenModalDialogAncestor as be, useTopLayerRef as he } from "../../../hooks/useTopLayer.hook.js";
 import { outlineClass as we } from "../field-styles.js";
 import { useFormControlContext as Ae } from "../../miscellaneous/FormControlContext.js";
 import { StyledFormHelperText as ve } from "../../miscellaneous/StyledFormHelperText.js";
-import { Children as S, cloneElement as Re, isValidElement as E, useEffect as I, useMemo as ke, useRef as De, useState as C } from "react";
-import { jsx as n, jsxs as y } from "react/jsx-runtime";
-import { FloatingPortal as Fe, autoUpdate as Se, flip as Ee, offset as Ce, shift as Ne, size as _e, useClick as Pe, useDismiss as Te, useFloating as je, useInteractions as qe, useMergeRefs as K, useRole as Ue } from "@floating-ui/react";
-var Ge = ({ dataTest: N, value: _, defaultValue: L, onChange: P, error: M, errorText: H, allowClear: T, disabled: O, readOnly: i, name: u, placeholder: b, displayEmpty: h, multiple: c, renderValue: j, fullWidth: Y, className: z, style: W, sx: $, variant: G, children: w, MenuProps: J, onFocus: Q, onBlur: X, labelId: p }) => {
-  const a = Ae(), q = `${N}-listbox`, A = G === "standard", U = M ?? a?.error ?? !1, o = O ?? a?.disabled ?? !1, [s, m] = C(!1), [v, R] = C(!1), [Z, V] = C(L), k = _ !== void 0, r = k ? _ : Z, l = Array.isArray(r) ? r.length > 0 : r !== void 0 && r !== "" && r !== null, x = De(null), { refs: d, floatingStyles: ee, context: D } = je({
-    open: s,
-    onOpenChange: m,
+import { Children as S, cloneElement as Re, isValidElement as E, useEffect as C, useMemo as ke, useRef as De, useState as N } from "react";
+import { jsx as n, jsxs as x } from "react/jsx-runtime";
+import { FloatingPortal as Fe, autoUpdate as Se, flip as Ee, offset as Ce, shift as Ne, size as _e, useClick as qe, useDismiss as Pe, useFloating as Te, useInteractions as Ve, useMergeRefs as K, useRole as je } from "@floating-ui/react";
+var Ge = ({ dataTest: _, value: q, defaultValue: L, onChange: P, error: M, errorText: H, allowClear: T, disabled: O, readOnly: c, name: p, placeholder: b, displayEmpty: h, multiple: d, renderValue: V, fullWidth: Y, className: z, style: W, sx: $, variant: G, children: w, MenuProps: J, onFocus: Q, onBlur: X, labelId: m }) => {
+  const a = Ae(), j = `${_}-listbox`, A = G === "standard", I = M ?? a?.error ?? !1, s = O ?? a?.disabled ?? !1, [o, y] = N(!1), [v, R] = N(!1), [Z, U] = N(L), k = q !== void 0, r = k ? q : Z, l = Array.isArray(r) ? r.length > 0 : r !== void 0 && r !== "" && r !== null, i = De(null), { refs: u, floatingStyles: ee, context: D } = Te({
+    open: o,
+    onOpenChange: y,
     placement: "bottom-start",
     strategy: "fixed",
     whileElementsMounted: Se,
@@ -25,79 +25,87 @@ var Ge = ({ dataTest: N, value: _, defaultValue: L, onChange: P, error: M, error
         t.floating.style.minWidth = `${e.reference.width + 20}px`;
       } })
     ]
-  }), { getReferenceProps: te, getFloatingProps: re } = qe([
-    Pe(D, { enabled: !o && !i }),
-    Te(D),
-    Ue(D, { role: "listbox" })
-  ]), oe = K([d.setReference]), se = K([he(d.setFloating), x]), ne = ke(() => s ? be(d.reference.current) : void 0, [s, d]);
-  I(() => a?.setFocused(s || v), [
-    s,
+  }), { getReferenceProps: te, getFloatingProps: re } = Ve([
+    qe(D, { enabled: !s && !c }),
+    Pe(D),
+    je(D, { role: "listbox" })
+  ]), oe = K([u.setReference]), se = K([he(u.setFloating), i]), ne = ke(() => o ? be(u.reference.current) : void 0, [o, u]);
+  C(() => a?.setFocused(o || v), [
+    o,
     v,
     a
-  ]), I(() => a?.setFilled(l || !!b || !!h), [
+  ]), C(() => a?.setFilled(l || !!b || !!h), [
     l,
     b,
     h,
     a
-  ]);
+  ]), C(() => {
+    if (!o) return;
+    const e = requestAnimationFrame(() => {
+      const t = i.current?.querySelector('[role="option"][aria-selected="true"]');
+      t && (t.scrollIntoView({ block: "nearest" }), t.focus());
+    });
+    return () => cancelAnimationFrame(e);
+  }, [o]);
   const le = (e, t) => {
-    const g = c ? Array.isArray(r) && r.includes(e) ? r.filter((F) => F !== e) : [...Array.isArray(r) ? r : [], e] : e;
-    k || V(g), P?.({ target: {
+    const g = d ? Array.isArray(r) && r.includes(e) ? r.filter((F) => F !== e) : [...Array.isArray(r) ? r : [], e] : e;
+    k || U(g), P?.({ target: {
       value: g,
-      name: u
-    } }, t), c || (m(!1), requestAnimationFrame(() => d.domReference.current?.focus()));
+      name: p
+    } }, t), d || (y(!1), requestAnimationFrame(() => u.domReference.current?.focus()));
   }, B = () => {
-    const e = c ? [] : "";
-    k || V(e), P?.({ target: {
+    const e = d ? [] : "";
+    k || U(e), P?.({ target: {
       value: e,
-      name: u
-    } }, null), m(!1), R(!1);
+      name: p
+    } }, null), y(!1), R(!1);
   }, ae = S.map(w, (e) => {
     if (!E(e)) return e;
     const t = e.props.value;
     return Re(e, {
-      selected: c ? Array.isArray(r) && r.includes(t) : t === r,
+      selected: d ? Array.isArray(r) && r.includes(t) : t === r,
       onClick: () => le(t, e.props.children)
     });
-  }), ie = S.toArray(w).find((e) => E(e) && e.props.value === r), ce = j ? j(r) : c && Array.isArray(r) ? S.toArray(w).filter((e) => E(e) && r.includes(e.props.value)).map((e) => {
+  }), ie = S.toArray(w).find((e) => E(e) && e.props.value === r), ce = V ? V(r) : d && Array.isArray(r) ? S.toArray(w).filter((e) => E(e) && r.includes(e.props.value)).map((e) => {
     const t = e.props.children;
     return typeof t == "string" || typeof t == "number" ? String(t) : "";
   }).join(", ") : ie?.props.children, de = (e) => {
-    if ((e.key === "Backspace" || e.key === "Delete") && T && l && !o && !i) {
+    if ((e.key === "Backspace" || e.key === "Delete") && T && l && !s && !c) {
       e.preventDefault(), B();
       return;
     }
-    e.key !== "ArrowDown" && e.key !== "ArrowUp" || o || i || (e.preventDefault(), m(!0), requestAnimationFrame(() => {
-      const t = x.current?.querySelectorAll('[role="option"]:not([aria-disabled="true"])');
+    e.key !== "ArrowDown" && e.key !== "ArrowUp" || s || c || (e.preventDefault(), y(!0), requestAnimationFrame(() => {
+      if (i.current?.querySelector('[role="option"][aria-selected="true"]')) return;
+      const t = i.current?.querySelectorAll('[role="option"]:not([aria-disabled="true"])');
       t?.length && t[e.key === "ArrowUp" ? t.length - 1 : 0]?.focus();
     }));
-  }, fe = (e) => {
-    const t = x.current ? Array.from(x.current.querySelectorAll('[role="option"]:not([aria-disabled="true"])')) : [];
+  }, ue = (e) => {
+    const t = i.current ? Array.from(i.current.querySelectorAll('[role="option"]:not([aria-disabled="true"])')) : [];
     if (t.length === 0) return;
     const g = t.findIndex((F) => F === document.activeElement);
     e.key === "ArrowDown" || e.key === "ArrowUp" ? (e.preventDefault(), t[(g + (e.key === "ArrowDown" ? 1 : -1) + t.length) % t.length]?.focus()) : (e.key === "Enter" || e.key === " ") && (e.preventDefault(), document.activeElement?.click());
   };
-  return /* @__PURE__ */ y("div", {
+  return /* @__PURE__ */ x("div", {
     className: f("group relative inline-flex flex-col", Y && "w-full", z),
     style: {
       fontFamily: "Roboto, Helvetica, Arial, sans-serif",
-      ...ue($),
+      ...fe($),
       ...W
     },
     children: [
-      /* @__PURE__ */ y("button", {
+      /* @__PURE__ */ x("button", {
         ref: oe,
         type: "button",
-        "data-testid": N,
+        "data-testid": _,
         ...te({ onKeyDown: de }),
         role: "combobox",
         "aria-haspopup": "listbox",
-        "aria-expanded": s,
-        "aria-controls": q,
-        "aria-labelledby": p,
-        "aria-label": p ? void 0 : u,
-        "aria-disabled": o ? !0 : void 0,
-        disabled: o,
+        "aria-expanded": o,
+        "aria-controls": j,
+        "aria-labelledby": m,
+        "aria-label": m ? void 0 : p,
+        "aria-disabled": s ? !0 : void 0,
+        disabled: s,
         onFocus: (e) => {
           R(!0), Q?.(e);
         },
@@ -105,15 +113,15 @@ var Ge = ({ dataTest: N, value: _, defaultValue: L, onChange: P, error: M, error
           R(!1), X?.(e);
         },
         style: { minWidth: l && !A ? 105 : void 0 },
-        className: f("relative flex w-full items-center justify-between bg-transparent text-left text-delta-800 outline-none", A ? "h-10 min-w-0 border-0 px-0 text-base" : "h-10 rounded-lg border-0 px-3 text-base", o && "cursor-not-allowed text-delta-300", i && "pointer-events-none"),
+        className: f("relative flex w-full items-center justify-between bg-transparent text-left text-delta-800 outline-none", "h-10 rounded-lg border-0 px-3 text-base", A && "min-w-0", s && "cursor-not-allowed text-delta-300", c && "pointer-events-none"),
         children: [
           /* @__PURE__ */ n("span", {
             className: f("min-w-0 flex-1 truncate", !l && "text-delta-500"),
             children: l || h ? ce : b
           }),
-          /* @__PURE__ */ y("span", {
+          /* @__PURE__ */ x("span", {
             className: "flex items-center gap-1",
-            children: [T && l && !o && /* @__PURE__ */ n("span", {
+            children: [T && l && !s && /* @__PURE__ */ n("span", {
               "aria-hidden": "true",
               "data-testid": "select-clear-button",
               className: "flex items-center justify-center rounded-full p-[2px] hover:bg-gama-100",
@@ -127,40 +135,41 @@ var Ge = ({ dataTest: N, value: _, defaultValue: L, onChange: P, error: M, error
             }), /* @__PURE__ */ n(pe, {
               width: 24,
               height: 24,
-              className: f("shrink-0 transition-transform", o ? "text-delta-300" : "text-delta-700", s && "rotate-180")
+              className: f("shrink-0 transition-transform", s ? "text-delta-300" : "text-delta-700", o && "rotate-180")
             })]
           }),
-          !A && /* @__PURE__ */ n("div", { className: we({
-            focused: s || v,
-            error: U,
-            disabled: o,
-            readOnly: i
+          /* @__PURE__ */ n("div", { className: we({
+            focused: o || v,
+            error: I,
+            disabled: s,
+            readOnly: c,
+            borderless: A
           }) })
         ]
       }),
-      s && /* @__PURE__ */ n(Fe, {
+      o && /* @__PURE__ */ n(Fe, {
         root: ne,
         children: /* @__PURE__ */ n("ul", {
           ref: se,
-          id: q,
+          id: j,
           role: "listbox",
-          "aria-labelledby": p,
-          "aria-label": p ? void 0 : u,
+          "aria-labelledby": m,
+          "aria-label": m ? void 0 : p,
           ...ge,
           style: {
-            ...ye,
+            ...xe,
             ...ee,
             fontFamily: "Roboto, Helvetica, Arial, sans-serif"
           },
           ...re(),
-          onKeyDown: fe,
+          onKeyDown: ue,
           className: f("z-[1300] m-0 max-h-72 list-none overflow-auto rounded-lg border border-solid border-delta-300 bg-white px-0 py-1 shadow-[0px_2px_4px_0px_rgba(34,33,51,0.15)]", J?.className),
           children: ae
         })
       }),
-      U && /* @__PURE__ */ y(ve, {
+      I && /* @__PURE__ */ x(ve, {
         className: "m-0 flex items-center gap-1 pt-1 text-sm text-error-500",
-        children: [/* @__PURE__ */ n(xe, {
+        children: [/* @__PURE__ */ n(ye, {
           width: 20,
           height: 20
         }), H ?? "Required"]

package/dist/datetime/components/date-picker/components/StyledCalendarPickerSelectMonth.js

@@ -9,7 +9,7 @@ function g(a) {
   return /* @__PURE__ */ l(S, {
     style: {
       marginLeft: "-2px",
-      marginRight: "8px"
+      marginRight: "4px"
     },
     children: /* @__PURE__ */ l(s, {
       dataTest: "StyledCalendarPickerSelectMonth",

package/dist/datetime/components/date-picker/components/StyledCalendarPickerSelectYear.js

@@ -3,20 +3,17 @@ import { StyledSelectItem as u } from "../../../../components/inputs/select/Styl
 import { StyledFormControl as S } from "../../../../components/miscellaneous/StyledFormControl.js";
 import y from "./StyledCalendarPickerSelectPeriod.module.js";
 import { jsx as a } from "react/jsx-runtime";
-function C(l) {
-  const { options: r = [], onChange: t, value: d, disabled: i, className: n, style: m, name: c } = l, s = l["aria-label"];
+function h(l) {
+  const { options: r = [], onChange: t, value: d, disabled: n, className: i, style: m, name: c } = l, s = l["aria-label"];
   return /* @__PURE__ */ a(S, {
-    style: {
-      width: "70px",
-      marginLeft: "5px"
-    },
+    style: { marginLeft: "4px" },
     children: /* @__PURE__ */ a(o, {
       dataTest: "StyledCalendarPickerSelectYear",
       size: "small",
       variant: "standard",
       name: s ?? c,
-      disabled: i,
-      className: n,
+      disabled: n,
+      className: i,
       style: m,
       value: d ?? "",
       onChange: (e) => t?.(e),
@@ -30,5 +27,5 @@ function C(l) {
   });
 }
 export {
-  C as StyledCalendarPickerSelectYear
+  h as StyledCalendarPickerSelectYear
 };

package/dist/src/components/inputs/field-styles.d.ts

@@ -21,9 +21,11 @@ interface FieldState {
     error?: boolean;
     disabled?: boolean;
     readOnly?: boolean;
+    /** `variant="standard"`: same geometry as the outlined field, but the border is painted on focus only. */
+    borderless?: boolean;
 }
 /** The border overlay (an absolutely-positioned sibling so width changes never reflow the input). */
-export declare const outlineClass: ({ focused, error, disabled, readOnly }: FieldState) => string;
+export declare const outlineClass: ({ focused, error, disabled, readOnly, borderless }: FieldState) => string;
 /** MUI-compatible fieldset outline used by text fields with floating labels. */
 export declare const notchedOutlineClass: ({ focused, error, disabled, readOnly, notched, }: FieldState & {
     notched?: boolean;

package/package.json

@@ -3,7 +3,7 @@
     "publishConfig": {
         "access": "public"
     },
-    "version": "3.58.5",
+    "version": "3.60.0",
     "type": "module",
     "sideEffects": [
         "**/*.css",