asma-ui-core 3.106.0 → 3.107.1

package/dist/datetime/components/time-picker/TimePickerInput.js

@@ -1,74 +1,82 @@
-import { ClockOutlineIcon as I } from "../../../components/icons/clock-outline-icon/ClockOutlineIcon.js";
-import { StyledInputField as N } from "../../../components/inputs/input-field/StyledInputField.js";
-import { useInputMask as y } from "../../../helpers/inputMask.js";
-import { HelperText as P, defaultTimePickerHelperMessages as R } from "./components/HelperText.js";
-import { useEffect as v, useRef as w } from "react";
-import { jsx as o, jsxs as H } from "react/jsx-runtime";
-var O = (c) => {
-  const { placeholder: x, disabled: e, inputClassName: u, dataTest: n, width: l, error: f, helperText: h, label: g, locale: k = "en", popupState: a, handleChange: T, handleBlur: C, isValidTime: p, isValidEndTime: m, localValue: b, title: d, readOnly: t } = c, E = y({
+import { ClockOutlineIcon as P } from "../../../components/icons/clock-outline-icon/ClockOutlineIcon.js";
+import { StyledInputField as y } from "../../../components/inputs/input-field/StyledInputField.js";
+import { getTitleLabelling as R } from "../../helpers/getTitleLabelling.js";
+import { useInputMask as v } from "../../../helpers/inputMask.js";
+import { HelperText as w, defaultTimePickerHelperMessages as A } from "./components/HelperText.js";
+import { useEffect as H, useId as M, useRef as V } from "react";
+import { jsx as l, jsxs as j } from "react/jsx-runtime";
+var q = (x) => {
+  const { placeholder: f, disabled: e, inputClassName: h, dataTest: p, width: o, error: g, helperText: T, label: m, locale: k = "en", popupState: i, handleChange: C, handleBlur: I, isValidTime: d, isValidEndTime: c, localValue: b, title: a, readOnly: t, inputAriaProps: E } = x, N = v({
     mask: "xx:xx",
     maskChar: "x",
     showMask: !1
-  }), i = !p || !m || !!f, s = w(null);
-  return v(() => {
-    s.current && a.setAnchorEl(s.current);
-  }, []), /* @__PURE__ */ H("div", {
+  }), s = !d || !c || !!g, n = V(null), u = M();
+  return H(() => {
+    n.current && i.setAnchorEl(n.current);
+  }, []), /* @__PURE__ */ j("div", {
     style: { height: t ? "40px" : "75px" },
-    children: [d && /* @__PURE__ */ o("div", {
+    children: [a && /* @__PURE__ */ l("div", {
+      id: u,
       className: "pb-1 font-roboto font-semibold text-delta-800",
-      children: d
-    }), /* @__PURE__ */ o(N, {
-      inputRef: E,
+      children: a
+    }), /* @__PURE__ */ l(y, {
+      inputRef: N,
       autoComplete: "off",
       type: "text",
-      dataTest: n,
-      "data-testid": n,
-      placeholder: x,
+      dataTest: p,
+      "data-testid": p,
+      placeholder: f,
       size: "small",
-      error: i,
-      helperText: /* @__PURE__ */ o(P, {
-        isValidTime: p,
-        isValidEndTime: m,
-        error: i,
+      error: s,
+      helperText: /* @__PURE__ */ l(w, {
+        isValidTime: d,
+        isValidEndTime: c,
+        error: s,
         localization: k,
-        helperText: h,
-        messages: R
+        helperText: T,
+        messages: A
       }),
-      onChange: T,
-      onBlur: C,
+      onChange: C,
+      onBlur: I,
       slotProps: {
+        htmlInput: R({
+          title: a,
+          titleId: u,
+          label: m,
+          inputAriaProps: E
+        }),
         input: {
-          ref: s,
+          ref: n,
           onClick: (r) => {
-            !e && !t && a.open(r);
+            !e && !t && i.open(r);
           },
-          endAdornment: /* @__PURE__ */ o(I, {
+          endAdornment: /* @__PURE__ */ l(P, {
             width: 24,
             height: 24,
             className: e ? "text-delta-300" : "text-delta-700",
             onClick: (r) => {
-              r.stopPropagation(), !e && !t && a.open(r);
+              r.stopPropagation(), !e && !t && i.open(r);
             }
           })
         },
         formHelperText: {
-          className: i ? "ml-0 mr-[14px] mt-1 leading-[23.24px]" : "mx-[14px] mt-1 leading-[23.24px]",
+          className: s ? "ml-0 mr-[14px] mt-1 leading-[23.24px]" : "mx-[14px] mt-1 leading-[23.24px]",
           hideErrorIcon: !0
         }
       },
       value: b,
       sx: {
-        maxWidth: l ?? 130,
-        width: l,
-        minWidth: l
+        maxWidth: o ?? 130,
+        width: o,
+        minWidth: o
       },
       disabled: e,
       readOnly: t,
-      className: u,
-      label: g
+      className: h,
+      label: m
     })]
   });
 };
 export {
-  O as TimePickerInput
+  q as TimePickerInput
 };

package/dist/datetime/helpers/getTitleLabelling.js

@@ -0,0 +1,10 @@
+var t = ({ title: e, titleId: l, label: b, inputAriaProps: a }) => {
+  const r = !!b || !!a?.["aria-label"] || !!a?.["aria-labelledby"];
+  return {
+    ...e && !r ? { "aria-labelledby": l } : {},
+    ...a
+  };
+};
+export {
+  t as getTitleLabelling
+};

package/dist/src/datetime/components/date-picker/components/BaseDatePickerInput.d.ts

@@ -1,3 +1,4 @@
+import { AriaAttributes } from 'react';
 import { DayPickerProps as ReactDayPickerProps, Matcher } from 'react-day-picker';
 export interface IBaseDatePickerInput {
     dataTest: string;
@@ -23,5 +24,6 @@ export interface IBaseDatePickerInput {
     hideDefaultHelperText?: boolean;
     required?: boolean;
     minDate?: Date;
+    inputAriaProps?: AriaAttributes;
 }
 export declare const BaseDatePickerInput: React.FC<IBaseDatePickerInput>;

package/dist/src/datetime/components/date-picker/types.d.ts

@@ -1,3 +1,4 @@
+import { AriaAttributes } from 'react';
 import { DayPicker, Matcher } from 'react-day-picker';
 export type CalendarProps = React.ComponentProps<typeof DayPicker>;
 type CommonDatePickerProps = {
@@ -25,6 +26,11 @@ export interface DatePickerSingleFieldProps {
     disallowPast?: boolean;
     disallowFuture?: boolean;
     hideDefaultHelperText?: boolean;
+    /**
+     * Extra ARIA attributes for the text input (e.g. `aria-label`, `aria-required`). Without them the
+     * input is named by `title`, which is otherwise plain text above the field.
+     */
+    inputAriaProps?: AriaAttributes;
 }
 export interface DatePickerRangeFieldProps {
     labelFrom?: string;

package/dist/src/datetime/components/time-picker/types.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { AriaAttributes, ReactNode } from 'react';
 /**
     * @param notBeforeTime - Start time of the range. Selected time must be after this value.
 */
@@ -24,5 +24,10 @@ export interface StyledTimePickerProps {
      * Unlike `notBeforeTime`, it never shows an error.
      */
     minTime?: Date;
+    /**
+     * Extra ARIA attributes for the text input (e.g. `aria-label`, `aria-required`) — for a visible
+     * label rendered outside the picker. Without them the input is named by `title` or `label`.
+     */
+    inputAriaProps?: AriaAttributes;
 }
 export type IPopupStateType = JSX.Element;

package/dist/src/datetime/helpers/getTitleLabelling.d.ts

@@ -0,0 +1,12 @@
+import { AriaAttributes } from 'react';
+/**
+ * ARIA naming for a datetime input that shows its `title` as plain text above the field: points the
+ * input at the title unless a floating `label` or an explicit name in `inputAriaProps` already names it
+ * (`aria-labelledby` would otherwise override that name). `inputAriaProps` are spread last.
+ */
+export declare const getTitleLabelling: ({ title, titleId, label, inputAriaProps, }: {
+    title?: string;
+    titleId: string;
+    label?: string;
+    inputAriaProps?: AriaAttributes;
+}) => AriaAttributes;

package/package.json

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