@lumx/react 4.19.0-next.0 → 4.19.0-next.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. */

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,