@lumx/react 3.2.1 → 3.3.0

package/index.d.ts

@@ -2695,6 +2695,8 @@ interface TextFieldProps extends GenericProps, HasTheme {
     onBlur?(event: React.FocusEvent): void;
     /** On change callback. */
     onChange(value: string, name?: string, event?: SyntheticEvent): void;
+    /** On clear callback. */
+    onClear?(event?: SyntheticEvent): void;
     /** On focus callback. */
     onFocus?(event: React.FocusEvent): void;
 }

package/index.js

@@ -11718,8 +11718,8 @@ TabPanel.displayName = COMPONENT_NAME$1f;
 TabPanel.className = CLASSNAME$1c;
 TabPanel.defaultProps = DEFAULT_PROPS$Z;
 
-const _excluded$1k = ["id", "isDisabled", "isRequired", "placeholder", "multiline", "value", "setFocus", "onChange", "onFocus", "onBlur", "inputRef", "rows", "recomputeNumberOfRows", "type", "name"],
-  _excluded2$3 = ["chips", "className", "clearButtonProps", "disabled", "error", "forceFocusStyle", "hasError", "helper", "icon", "id", "inputRef", "isDisabled", "isRequired", "isValid", "label", "maxLength", "minimumRows", "multiline", "name", "onBlur", "onChange", "onFocus", "placeholder", "textFieldRef", "theme", "type", "value", "afterElement"];
+const _excluded$1k = ["id", "isDisabled", "isRequired", "placeholder", "multiline", "value", "setFocus", "onChange", "onFocus", "onBlur", "inputRef", "rows", "recomputeNumberOfRows", "type", "name", "hasError", "describedById"],
+  _excluded2$3 = ["chips", "className", "clearButtonProps", "disabled", "error", "forceFocusStyle", "hasError", "helper", "icon", "id", "inputRef", "isDisabled", "isRequired", "isValid", "label", "maxLength", "minimumRows", "multiline", "name", "onBlur", "onChange", "onClear", "onFocus", "placeholder", "textFieldRef", "theme", "type", "value", "afterElement"];
 
 /**
  * Defines the props of the component.
@@ -11799,7 +11799,9 @@ const renderInputNative = props => {
       rows,
       recomputeNumberOfRows,
       type,
-      name
+      name,
+      hasError,
+      describedById
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$1k);
   // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -11835,6 +11837,8 @@ const renderInputNative = props => {
     onFocus: onTextFieldFocus,
     onBlur: onTextFieldBlur,
     onChange: handleChange,
+    'aria-invalid': hasError ? 'true' : undefined,
+    'aria-describedby': describedById,
     ref: mergeRefs(inputRef, ref)
   });
   if (multiline) {
@@ -11875,6 +11879,7 @@ const TextField = /*#__PURE__*/forwardRef((props, ref) => {
       name,
       onBlur,
       onChange,
+      onClear,
       onFocus,
       placeholder,
       textFieldRef,
@@ -11885,6 +11890,16 @@ const TextField = /*#__PURE__*/forwardRef((props, ref) => {
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded2$3);
   const textFieldId = useMemo(() => id || `text-field-${uid()}`, [id]);
+  /**
+   * Generate unique ids for both the helper and error texts, in order to
+   * later on add them to the input native as aria-describedby. If both the error and the helper are present,
+   * we want to first use the most important one, which is the errorId. That way, screen readers will read first
+   * the error and then the helper
+   */
+  const helperId = helper ? `text-field-helper-${uid()}` : undefined;
+  const errorId = error ? `text-field-error-${uid()}` : undefined;
+  const describedByIds = [errorId, helperId].filter(Boolean);
+  const describedById = describedByIds.length === 0 ? undefined : describedByIds.join(' ');
   const [isFocus, setFocus] = useState(false);
   const {
     rows,
@@ -11899,11 +11914,14 @@ const TextField = /*#__PURE__*/forwardRef((props, ref) => {
    * and remove focus from the clear button.
    * @param evt On clear event.
    */
-  const onClear = evt => {
+  const handleClear = evt => {
     evt.nativeEvent.preventDefault();
     evt.nativeEvent.stopPropagation();
     evt.currentTarget.blur();
     onChange('');
+    if (onClear) {
+      onClear(evt);
+    }
   };
   return /*#__PURE__*/React.createElement("div", {
     ref: ref,
@@ -11961,7 +11979,9 @@ const TextField = /*#__PURE__*/forwardRef((props, ref) => {
     setFocus,
     type,
     value,
-    name
+    name,
+    hasError,
+    describedById
   }, forwardedProps))), !chips && /*#__PURE__*/React.createElement("div", {
     className: `${CLASSNAME$1d}__input-wrapper`
   }, renderInputNative(_objectSpread2({
@@ -11980,7 +12000,9 @@ const TextField = /*#__PURE__*/forwardRef((props, ref) => {
     setFocus,
     type,
     value,
-    name
+    name,
+    hasError,
+    describedById
   }, forwardedProps))), (isValid || hasError) && /*#__PURE__*/React.createElement(Icon, {
     className: `${CLASSNAME$1d}__input-validity`,
     color: theme === Theme.dark ? 'light' : undefined,
@@ -11992,17 +12014,19 @@ const TextField = /*#__PURE__*/forwardRef((props, ref) => {
     emphasis: Emphasis.low,
     size: Size.s,
     theme: theme,
-    onClick: onClear,
+    onClick: handleClear,
     type: "button"
   })), afterElement && /*#__PURE__*/React.createElement("div", {
     className: `${CLASSNAME$1d}__after-element`
   }, afterElement)), hasError && error && /*#__PURE__*/React.createElement(InputHelper, {
     className: `${CLASSNAME$1d}__helper`,
     kind: Kind.error,
-    theme: theme
+    theme: theme,
+    id: errorId
   }, error), helper && /*#__PURE__*/React.createElement(InputHelper, {
     className: `${CLASSNAME$1d}__helper`,
-    theme: theme
+    theme: theme,
+    id: helperId
   }, helper));
 });
 TextField.displayName = COMPONENT_NAME$1g;