@lumx/react 4.18.0 → 4.18.1-alpha.1

package/index.d.ts

@@ -1987,6 +1987,8 @@ interface TextFieldProps$1 extends HasClassName, HasTheme, HasAriaDisabled, HasD
     labelProps?: InputLabelProps$1;
     /** Max string length the input accepts (constrains the input and displays a character counter). */
     maxLength?: number;
+    /** Character counter message formatter. Receives remaining character count, returns accessible label (e.g. \"{n} characters remaining\"). */
+    charCounterMessage?: (charCount: number) => string | JSXElement;
     /** Whether the text field is a textarea or an input. */
     multiline?: boolean;
     /** Placeholder text. */
@@ -2006,7 +2008,7 @@ interface TextFieldProps$1 extends HasClassName, HasTheme, HasAriaDisabled, HasD
     /** Ref to the component root. */
     ref?: CommonRef;
 }
-type TextFieldPropsToOverride = 'input' | 'IconButton' | 'labelProps' | 'textFieldRef' | 'clearButtonProps' | 'helperId' | 'errorId' | 'labelId' | 'isAnyDisabled' | 'isFocus';
+type TextFieldPropsToOverride = 'input' | 'IconButton' | 'labelProps' | 'textFieldRef' | 'clearButtonProps' | 'charCounterMessage' | 'helperId' | 'errorId' | 'labelId' | 'isAnyDisabled' | 'isFocus';
 
 interface InputLabelProps extends ReactToJSX<InputLabelProps$1>, GenericProps$1 {
 }
@@ -2023,6 +2025,8 @@ declare const InputLabel: Comp<InputLabelProps, HTMLLabelElement>;
  * Defines the props of the component.
  */
 interface TextFieldProps extends GenericProps$1, ReactToJSX<TextFieldProps$1, TextFieldPropsToOverride> {
+    /** Character counter message formatter. Receives remaining character count, returns accessible label (e.g. \"{n} characters remaining\"). */
+    charCounterMessage?: (charCount: number) => string | ReactNode;
     /** Props to pass to the clear button (minus those already set by the TextField props). If not specified, the button won't be displayed. */
     clearButtonProps?: Pick<IconButtonProps, 'label'> & Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis'>;
     /** Reference to the <input> or <textarea> element. */
@@ -5493,6 +5497,17 @@ interface TimePickerFieldWrapperProps {
      * Translation labels for clear and show suggestions buttons.
      */
     translations: TimePickerFieldTranslations;
+    /**
+     * Callback to customize individual option props.
+     * Called for each time option with the hour and minute.
+     * Return partial `ComboboxOptionProps` to override default option rendering
+     * (e.g. `before`, `after`, `children`, `tooltipProps`, `actionProps`).
+     * `isDisabled` is merged with the out-of-range state using `||`.
+     */
+    getOptionProps?: ({ hour, minute }: {
+        hour: number;
+        minute: number;
+    }) => Partial<ComboboxOptionProps$1>;
 }
 /**
  * `SelectTextField` props managed internally by the `TimePickerField` wrappers

package/index.js

@@ -7668,6 +7668,7 @@ const TextField$1 = props => {
     multiline,
     placeholder,
     textFieldRef,
+    charCounterMessage,
     helperId,
     errorId,
     labelId,
@@ -7681,6 +7682,15 @@ const TextField$1 = props => {
   } = props;
   const valueLength = (value || '').length;
   const isNotEmpty = valueLength > 0;
+  const remaining = maxLength ? maxLength - valueLength : 0;
+  const charCounter = maxLength ? /*#__PURE__*/jsxs("span", {
+    className: element$M('char-counter'),
+    role: "status",
+    children: [charCounterMessage ? charCounterMessage(remaining) : remaining, remaining === 0 && Icon$1({
+      icon: mdiAlertCircle,
+      size: Size.xxs
+    })]
+  }) : undefined;
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
     className: classnames(className, block$$({
@@ -7698,25 +7708,17 @@ const TextField$1 = props => {
       'is-valid': isValid,
       [`theme-${theme}`]: Boolean(theme)
     })),
-    children: [(label || maxLength) && /*#__PURE__*/jsxs("div", {
+    children: [(label || maxLength) && /*#__PURE__*/jsx("div", {
       className: element$M('header'),
-      children: [label && InputLabel$1({
+      children: InputLabel$1({
         ...labelProps,
         id: labelId,
         htmlFor: textFieldId,
         className: element$M('label'),
         isRequired,
         theme,
-        children: label
-      }), maxLength && /*#__PURE__*/jsxs("div", {
-        className: element$M('char-counter'),
-        children: [/*#__PURE__*/jsx("span", {
-          children: maxLength - valueLength
-        }), maxLength - valueLength === 0 && Icon$1({
-          icon: mdiAlertCircle,
-          size: Size.xxs
-        })]
-      })]
+        children: [label, charCounter]
+      })
     }), /*#__PURE__*/jsxs("div", {
       className: element$M('wrapper'),
       ref: textFieldRef,
@@ -8017,6 +8019,7 @@ const TextField = forwardRef((props, ref) => {
     label,
     labelProps,
     maxLength,
+    charCounterMessage,
     minimumRows,
     multiline,
     name,
@@ -8116,6 +8119,7 @@ const TextField = forwardRef((props, ref) => {
     labelId,
     multiline,
     maxLength,
+    charCounterMessage,
     isRequired,
     errorId,
     placeholder,
@@ -21740,6 +21744,7 @@ const TimePickerField$1 = (props, {
     handleChange,
     handleSearch,
     handleBlur,
+    getOptionProps,
     ...fowardedProps
   } = props;
   return /*#__PURE__*/jsx(SelectTextField, {
@@ -21748,9 +21753,23 @@ const TimePickerField$1 = (props, {
     selectionType: "single",
     options: options,
     getOptionId: "name",
-    renderOption: entry => /*#__PURE__*/jsx(Option, {
-      isDisabled: entry.outOfRange
-    }),
+    renderOption: ({
+      hour,
+      minute,
+      outOfRange
+    }) => {
+      const {
+        isDisabled,
+        ...extraProps
+      } = getOptionProps?.({
+        hour,
+        minute
+      }) || {};
+      return /*#__PURE__*/jsx(Option, {
+        isDisabled: outOfRange || isDisabled,
+        ...extraProps
+      });
+    },
     onChange: handleChange,
     onSearch: handleSearch,
     onBlur: handleBlur,
@@ -21950,6 +21969,7 @@ const TimePickerField = props => {
     theme,
     translations,
     name,
+    getOptionProps,
     ...forwardedProps
   } = props;
 
@@ -22014,7 +22034,8 @@ const TimePickerField = props => {
     handleChange,
     handleSearch,
     handleBlur,
-    searchInputValue
+    searchInputValue,
+    getOptionProps
   }, {
     SelectTextField,
     Option: SelectTextField.Option