@lumx/react 4.6.1-alpha.0 → 4.7.1-alpha.0

package/index.d.ts

@@ -4,7 +4,7 @@ import * as _lumx_core_js_types from '@lumx/core/js/types';
 import { GenericProps as GenericProps$1, HasTheme as HasTheme$1, ValueOf as ValueOf$1, PropsToOverride, HasCloseMode as HasCloseMode$1, HasClassName as HasClassName$1, JSXElement as JSXElement$1, CommonRef as CommonRef$1, Falsy, HeadingElement as HeadingElement$1, HasAriaDisabled as HasAriaDisabled$1, HasRequiredLinkHref as HasRequiredLinkHref$2, HasAriaLabelOrLabelledBy as HasAriaLabelOrLabelledBy$1 } from '@lumx/core/js/types';
 export * from '@lumx/core/js/types';
 import * as React$1 from 'react';
-import React__default, { Ref, ReactElement, ReactNode, SyntheticEvent, MouseEventHandler, KeyboardEventHandler, RefObject, CSSProperties, ImgHTMLAttributes, AriaAttributes as AriaAttributes$1, SetStateAction, Key, ComponentProps, ElementType as ElementType$1 } from 'react';
+import React__default, { Ref, ReactElement, ReactNode, SyntheticEvent, MouseEventHandler, KeyboardEventHandler, RefObject, CSSProperties, ImgHTMLAttributes, AriaAttributes as AriaAttributes$1, SetStateAction, Key, ComponentProps, ElementType as ElementType$1, HTMLInputTypeAttribute } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 /** LumX Component Type. */
@@ -787,7 +787,7 @@ interface ButtonProps extends GenericProps$1, ReactToJSX<ButtonProps$1> {
  * @param  ref   Component ref.
  * @return React element.
  */
-declare const Button: Comp<ButtonProps, HTMLAnchorElement | HTMLButtonElement>;
+declare const Button: Comp<ButtonProps, HTMLButtonElement | HTMLAnchorElement>;
 
 interface IconButtonProps$1 extends BaseButtonProps {
     /**
@@ -2371,7 +2371,7 @@ interface LinkProps extends GenericProps$1, ReactToJSX<LinkProps$1> {
  * @param  ref   Component ref.
  * @return React element.
  */
-declare const Link: Comp<LinkProps, HTMLAnchorElement | HTMLButtonElement>;
+declare const Link: Comp<LinkProps, HTMLButtonElement | HTMLAnchorElement>;
 
 /**
  * Defines the props of the component.
@@ -3810,29 +3810,29 @@ declare const Text: Comp<TextProps, HTMLElement>;
 /**
  * Defines the props of the component.
  */
-interface TextFieldProps extends GenericProps$1, HasTheme$1, HasAriaDisabled$1 {
+interface TextFieldProps$1 extends HasClassName, HasTheme, HasAriaDisabled, HasDisabled {
     /** Chip Group to be rendered before the main text input. */
-    chips?: ReactNode;
+    chips?: JSXElement;
     /** 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'>;
+    clearButtonProps?: GenericProps;
     /** Error message. */
-    error?: string | ReactNode;
+    error?: string | JSXElement;
     /** Whether we force the focus style or not. */
     forceFocusStyle?: boolean;
     /** Whether the text field is displayed with error style or not. */
     hasError?: boolean;
     /** Additional element to put at the end of the text field. */
-    afterElement?: ReactNode;
+    afterElement?: JSXElement;
     /** Helper text. */
-    helper?: string | ReactNode;
+    helper?: string | JSXElement;
     /** Icon (SVG path). */
     icon?: string;
     /** Native input id property (generated if not provided to link the label element). */
-    id?: string;
-    /** Reference to the <input> or <textarea> element. */
-    inputRef?: Ref<HTMLInputElement | HTMLTextAreaElement>;
-    /** Whether the component is disabled or not. */
-    isDisabled?: boolean;
+    id: string;
+    /** Generated helper id for accessibility attributes. */
+    helperId?: string;
+    /** Generated error id for accessibility attributes. */
+    errorId?: string;
     /** Whether the component is required or not. */
     isRequired?: boolean;
     /** Whether the text field is displayed with valid style or not. */
@@ -3840,23 +3840,46 @@ interface TextFieldProps extends GenericProps$1, HasTheme$1, HasAriaDisabled$1 {
     /** Label text. */
     label?: string;
     /** Additional label props. */
-    labelProps?: InputLabelProps;
+    labelProps?: InputLabelProps$1;
     /** Max string length the input accepts (constrains the input and displays a character counter). */
     maxLength?: number;
-    /** Minimum number of rows displayed in multiline mode (requires `multiline` to be enabled). */
-    minimumRows?: number;
     /** Whether the text field is a textarea or an input. */
     multiline?: boolean;
-    /** Native input name property. */
-    name?: string;
     /** Placeholder text. */
     placeholder?: string;
     /** Reference to the wrapper. */
+    textFieldRef?: CommonRef;
+    /** Value. */
+    value?: string;
+    /** Whether any part is disabled. */
+    isAnyDisabled?: boolean;
+    /** The input element (input or textarea). */
+    input: JSXElement;
+    /** Whether the input is focused. */
+    isFocus?: boolean;
+    /** IconButton component. */
+    IconButton: (props: Record<string, any>) => any;
+    /** Ref to the component root. */
+    ref?: CommonRef;
+}
+type TextFieldPropsToOverride = 'id' | 'input' | 'IconButton' | 'labelProps' | 'textFieldRef' | 'clearButtonProps' | 'helperId' | 'errorId' | 'isFocus';
+
+/**
+ * Defines the props of the component.
+ */
+interface TextFieldProps extends GenericProps$1, ReactToJSX<TextFieldProps$1, TextFieldPropsToOverride> {
+    /** 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. */
+    inputRef?: Ref<HTMLInputElement | HTMLTextAreaElement>;
+    /** Additional label props. */
+    labelProps?: InputLabelProps;
+    /** Native input name property. */
+    name?: string;
+    /** Reference to the wrapper. */
     textFieldRef?: Ref<HTMLDivElement>;
     /** Native input type (only when `multiline` is disabled). */
     type?: React.ComponentProps<'input'>['type'];
-    /** Value. */
-    value?: string;
     /** On blur callback. */
     onBlur?(event: React.FocusEvent): void;
     /** On change callback. */
@@ -3875,19 +3898,22 @@ interface TextFieldProps extends GenericProps$1, HasTheme$1, HasAriaDisabled$1 {
  */
 declare const TextField: Comp<TextFieldProps, HTMLDivElement>;
 
-type NativeInputProps = Omit<ComponentProps<'input'>, 'value' | 'onChange'>;
 /**
  * Defines the props of the component.
  */
-interface RawInputTextProps$1 extends NativeInputProps, HasTheme, HasClassName {
+interface RawInputTextProps$1 extends HasTheme, HasClassName {
     value?: string;
+    type?: HTMLInputTypeAttribute;
+    name?: string | undefined;
+    ref?: CommonRef;
     handleChange?: (value: string, name?: string, event?: any) => void;
 }
 
+type NativeInputProps = Omit<ComponentProps<'input'>, 'value' | 'onChange'>;
 /**
  * Defines the props of the component.
  */
-interface RawInputTextProps extends ReactToJSX<RawInputTextProps$1> {
+interface RawInputTextProps extends NativeInputProps, ReactToJSX<RawInputTextProps$1> {
     onChange?: (value: string, name?: string, event?: SyntheticEvent) => void;
 }
 
@@ -3897,20 +3923,22 @@ interface RawInputTextProps extends ReactToJSX<RawInputTextProps$1> {
  */
 declare const RawInputText: Comp<RawInputTextProps, HTMLInputElement>;
 
-type NativeTextareaProps = Omit<ComponentProps<'textarea'>, 'value' | 'onChange'>;
 /**
  * Defines the props of the component.
  */
-interface RawInputTextareaProps$1 extends NativeTextareaProps, HasTheme, HasClassName {
+interface RawInputTextareaProps$1 extends HasTheme, HasClassName {
     value?: string;
     rows?: number;
+    name?: string | undefined;
+    ref?: CommonRef;
     handleChange?: (value: string, name?: string, event?: any) => void;
 }
 
+type NativeTextareaProps = Omit<ComponentProps<'textarea'>, 'value' | 'onChange'>;
 /**
  * Defines the props of the component.
  */
-interface RawInputTextareaProps extends ReactToJSX<RawInputTextareaProps$1, 'rows'> {
+interface RawInputTextareaProps extends NativeTextareaProps, ReactToJSX<RawInputTextareaProps$1, 'rows'> {
     minimumRows?: number;
     onChange?: (value: string, name?: string, event?: SyntheticEvent) => void;
 }

package/index.js

@@ -14226,7 +14226,158 @@ const CLASSNAME$5 = 'lumx-text-field';
 const INPUT_NATIVE_CLASSNAME = `${CLASSNAME$5}__input-native`;
 
 const {
-  block: block$7
+  block: block$7,
+  element: element$5
+} = bem(CLASSNAME$5);
+
+/**
+ * Defines the props of the component.
+ */
+
+/**
+ * Generate unique accessibility IDs for helper and error texts.
+ * Combines them with any existing aria-describedby in priority order (error > helper > existing).
+ *
+ * @param helper Helper text content
+ * @param error Error text content
+ * @param generatedId Unique ID for this text field instance
+ * @param existingAriaDescribedBy Existing aria-describedby value to merge
+ * @return Object containing helperId, errorId, and combined describedById
+ */
+function generateAccessibilityIds(helper, error, generatedId, existingAriaDescribedBy) {
+  const helperId = helper ? `text-field-helper-${generatedId}` : undefined;
+  const errorId = error ? `text-field-error-${generatedId}` : undefined;
+  const describedByIds = [errorId, helperId, existingAriaDescribedBy].filter(Boolean);
+  const describedById = describedByIds.length === 0 ? undefined : describedByIds.join(' ');
+  return {
+    helperId,
+    errorId,
+    describedById
+  };
+}
+
+/**
+ * TextField component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const TextField$1 = props => {
+  const {
+    chips,
+    className,
+    clearButtonProps,
+    error,
+    forceFocusStyle,
+    hasError,
+    helper,
+    icon,
+    id: textFieldId,
+    isRequired,
+    isValid,
+    label,
+    labelProps,
+    isAnyDisabled,
+    maxLength,
+    multiline,
+    placeholder,
+    textFieldRef,
+    helperId,
+    errorId,
+    theme,
+    value,
+    afterElement,
+    input,
+    isFocus,
+    IconButton,
+    ref
+  } = props;
+  const valueLength = (value || '').length;
+  const isNotEmpty = valueLength > 0;
+  return /*#__PURE__*/jsxs("div", {
+    ref: ref,
+    className: classnames(className, block$7({
+      'has-chips': Boolean(chips),
+      'has-error': !isValid && hasError,
+      'has-icon': Boolean(icon),
+      'has-input': !multiline,
+      'has-input-clear': Boolean(clearButtonProps && isNotEmpty),
+      'has-label': Boolean(label),
+      'has-placeholder': Boolean(placeholder),
+      'has-textarea': multiline,
+      'has-value': Boolean(value),
+      'is-disabled': isAnyDisabled,
+      'is-focus': isFocus || forceFocusStyle,
+      'is-valid': isValid,
+      [`theme-${theme}`]: Boolean(theme)
+    })),
+    children: [(label || maxLength) && /*#__PURE__*/jsxs("div", {
+      className: element$5('header'),
+      children: [label && InputLabel$1({
+        ...labelProps,
+        htmlFor: textFieldId,
+        className: element$5('label'),
+        isRequired,
+        theme,
+        children: label
+      }), maxLength && /*#__PURE__*/jsxs("div", {
+        className: element$5('char-counter'),
+        children: [/*#__PURE__*/jsx("span", {
+          children: maxLength - valueLength
+        }), maxLength - valueLength === 0 && Icon$1({
+          icon: mdiAlertCircle,
+          size: Size.xxs
+        })]
+      })]
+    }), /*#__PURE__*/jsxs("div", {
+      className: element$5('wrapper'),
+      ref: textFieldRef,
+      children: [icon && Icon$1({
+        className: element$5('input-icon'),
+        color: theme === Theme.dark ? 'light' : undefined,
+        icon,
+        size: Size.xs
+      }), chips ? /*#__PURE__*/jsxs("div", {
+        className: element$5('chips'),
+        children: [chips, input]
+      }) : /*#__PURE__*/jsx("div", {
+        className: element$5('input-wrapper'),
+        children: input
+      }), (isValid || hasError) && Icon$1({
+        className: element$5('input-validity'),
+        color: theme === Theme.dark ? 'light' : undefined,
+        icon: isValid ? mdiCheckCircle : mdiAlertCircle,
+        size: Size.xxs
+      }), clearButtonProps && isNotEmpty && !isAnyDisabled && /*#__PURE__*/jsx(IconButton, {
+        ...clearButtonProps,
+        className: element$5('input-clear'),
+        icon: mdiCloseCircle,
+        emphasis: Emphasis.low,
+        size: Size.s,
+        theme: theme,
+        type: "button"
+      }), afterElement && /*#__PURE__*/jsx("div", {
+        className: element$5('after-element'),
+        children: afterElement
+      })]
+    }), hasError && error && InputHelper$1({
+      children: error,
+      className: element$5('helper'),
+      kind: Kind.error,
+      theme,
+      id: errorId
+    }), helper && InputHelper$1({
+      className: element$5('helper'),
+      theme,
+      id: helperId,
+      children: helper
+    })]
+  });
+};
+
+const {
+  block: block$6
 } = bem(INPUT_NATIVE_CLASSNAME);
 
 /**
@@ -14263,7 +14414,7 @@ const RawInputText$1 = props => {
     name: name,
     type: type,
     ref: ref,
-    className: classnames(className, block$7({
+    className: classnames(className, block$6({
       [`theme-${theme}`]: Boolean(theme),
       text: true
     })),
@@ -14292,7 +14443,7 @@ const RawInputText = forwardRef((props, ref) => {
 });
 
 const {
-  block: block$6
+  block: block$5
 } = bem(INPUT_NATIVE_CLASSNAME);
 
 /**
@@ -14328,7 +14479,7 @@ const RawInputTextarea$1 = props => {
     ...forwardedProps,
     name: name,
     ref: ref,
-    className: classnames(className, block$6({
+    className: classnames(className, block$5({
       [`theme-${theme}`]: Boolean(theme),
       textarea: true
     })),
@@ -14415,15 +14566,6 @@ const RawInputTextarea = forwardRef((props, ref) => {
   });
 });
 
-const {
-  block: block$5,
-  element: element$5
-} = classNames.bem(CLASSNAME$5);
-
-/**
- * Defines the props of the component.
- */
-
 /**
  * Component default props.
  */
@@ -14446,20 +14588,15 @@ const TextField = forwardRef((props, ref) => {
   } = useDisableStateProps(props);
   const defaultTheme = useTheme() || Theme$1.light;
   const {
-    chips,
     className,
     clearButtonProps,
     error,
     forceFocusStyle,
     hasError,
     helper,
-    icon,
     id,
     inputRef: inputRefProps,
     isRequired,
-    isValid,
-    label,
-    labelProps,
     maxLength,
     minimumRows,
     multiline,
@@ -14482,19 +14619,12 @@ const TextField = forwardRef((props, ref) => {
   const localInputRef = useRef(null);
   /** Merge prop input ref and local input ref */
   const inputRef = mergeRefs(localInputRef, inputRefProps);
-  /**
-   * 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-${generatedTextFieldId}` : undefined;
-  const errorId = error ? `text-field-error-${generatedTextFieldId}` : undefined;
-  const describedByIds = [errorId, helperId, forwardedProps['aria-describedby']].filter(Boolean);
-  const describedById = describedByIds.length === 0 ? undefined : describedByIds.join(' ');
+  const {
+    helperId,
+    errorId,
+    describedById
+  } = generateAccessibilityIds(helper, error, generatedTextFieldId, forwardedProps['aria-describedby']);
   const [isFocus, setFocus] = useState(false);
-  const valueLength = (value || '').length;
-  const isNotEmpty = valueLength > 0;
 
   /**
    * Function triggered when the Clear Button is clicked.
@@ -14548,85 +14678,32 @@ const TextField = forwardRef((props, ref) => {
     type: type,
     ...inputProps
   });
-  return /*#__PURE__*/jsxs("div", {
-    ref: ref,
-    className: classNames.join(className, block$5({
-      'has-chips': Boolean(chips),
-      'has-error': !isValid && hasError,
-      'has-icon': Boolean(icon),
-      'has-input': !multiline,
-      'has-input-clear': Boolean(clearButtonProps && isNotEmpty),
-      'has-label': Boolean(label),
-      'has-placeholder': Boolean(placeholder),
-      'has-textarea': multiline,
-      'has-value': Boolean(value),
-      'is-disabled': isAnyDisabled,
-      'is-focus': isFocus || forceFocusStyle,
-      'is-valid': isValid,
-      [`theme-${theme}`]: Boolean(theme)
-    })),
-    children: [(label || maxLength) && /*#__PURE__*/jsxs("div", {
-      className: element$5('header'),
-      children: [label && /*#__PURE__*/jsx(InputLabel, {
-        ...labelProps,
-        htmlFor: textFieldId,
-        className: element$5('label'),
-        isRequired: isRequired,
-        theme: theme,
-        children: label
-      }), maxLength && /*#__PURE__*/jsxs("div", {
-        className: element$5('char-counter'),
-        children: [/*#__PURE__*/jsx("span", {
-          children: maxLength - valueLength
-        }), maxLength - valueLength === 0 && /*#__PURE__*/jsx(Icon, {
-          icon: mdiAlertCircle,
-          size: Size$1.xxs
-        })]
-      })]
-    }), /*#__PURE__*/jsxs("div", {
-      className: element$5('wrapper'),
-      ref: textFieldRef,
-      children: [icon && /*#__PURE__*/jsx(Icon, {
-        className: element$5('input-icon'),
-        color: theme === Theme$1.dark ? 'light' : undefined,
-        icon: icon,
-        size: Size$1.xs
-      }), chips ? /*#__PURE__*/jsxs("div", {
-        className: element$5('chips'),
-        children: [chips, input]
-      }) : /*#__PURE__*/jsx("div", {
-        className: element$5('input-wrapper'),
-        children: input
-      }), (isValid || hasError) && /*#__PURE__*/jsx(Icon, {
-        className: element$5('input-validity'),
-        color: theme === Theme$1.dark ? 'light' : undefined,
-        icon: isValid ? mdiCheckCircle : mdiAlertCircle,
-        size: Size$1.xxs
-      }), clearButtonProps && isNotEmpty && !isAnyDisabled && /*#__PURE__*/jsx(IconButton, {
-        ...clearButtonProps,
-        className: element$5('input-clear'),
-        icon: mdiCloseCircle,
-        emphasis: Emphasis$1.low,
-        size: Size$1.s,
-        theme: theme,
-        onClick: handleClear,
-        type: "button"
-      }), afterElement && /*#__PURE__*/jsx("div", {
-        className: element$5('after-element'),
-        children: afterElement
-      })]
-    }), hasError && error && /*#__PURE__*/jsx(InputHelper, {
-      className: element$5('helper'),
-      kind: Kind$1.error,
-      theme: theme,
-      id: errorId,
-      children: error
-    }), helper && /*#__PURE__*/jsx(InputHelper, {
-      className: element$5('helper'),
-      theme: theme,
-      id: helperId,
-      children: helper
-    })]
+  return TextField$1({
+    ref,
+    className,
+    isAnyDisabled,
+    input,
+    id: textFieldId,
+    afterElement,
+    hasError,
+    helperId,
+    multiline,
+    maxLength,
+    isRequired,
+    errorId,
+    placeholder,
+    textFieldRef,
+    value,
+    theme,
+    error,
+    helper,
+    IconButton: IconButton,
+    isFocus,
+    ...forwardedProps,
+    clearButtonProps: clearButtonProps ? {
+      ...clearButtonProps,
+      onClick: handleClear
+    } : undefined
   });
 });
 TextField.displayName = COMPONENT_NAME$4;