@lumx/react 3.18.1 → 3.18.2-alpha.0

package/src/components/switch/Switch.stories.tsx

@@ -1,6 +1,7 @@
 import { Alignment, Switch, SwitchProps } from '@lumx/react';
 import { withValueOnChange } from '@lumx/react/stories/decorators/withValueOnChange';
 import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
+import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';
 
 export default {
     title: 'LumX components/switch/Switch',
@@ -28,7 +29,16 @@ export const Default = {};
  * Switch disabled
  */
 export const Disabled = {
-    args: { isDisabled: true },
+    decorators: [
+        withCombinations({
+            combinations: {
+                rows: {
+                    disabled: { isDisabled: true },
+                    'aria-disabled': { 'aria-disabled': true },
+                },
+            },
+        }),
+    ],
 };
 
 /**

package/src/components/switch/Switch.test.tsx

@@ -100,6 +100,36 @@ describe(`<${Switch.displayName}>`, () => {
         });
     });
 
+    describe('Disabled state', () => {
+        it('should be disabled with isDisabled', async () => {
+            const onChange = jest.fn();
+            const { switchWrapper, input } = setup({ isDisabled: true, onChange });
+
+            expect(switchWrapper).toHaveClass('lumx-switch--is-disabled');
+            expect(input).toBeDisabled();
+            expect(input).toHaveAttribute('readOnly');
+
+            // Should not trigger onChange.
+            await userEvent.click(input);
+            expect(onChange).not.toHaveBeenCalled();
+        });
+
+        it('should be disabled with aria-disabled', async () => {
+            const onChange = jest.fn();
+            const { switchWrapper, input } = setup({ 'aria-disabled': true, onChange });
+
+            expect(switchWrapper).toHaveClass('lumx-switch--is-disabled');
+            // Note: input is not disabled (so it can be focused) but it's readOnly.
+            expect(input).not.toBeDisabled();
+            expect(input).toHaveAttribute('aria-disabled', 'true');
+            expect(input).toHaveAttribute('readOnly');
+
+            // Should not trigger onChange.
+            await userEvent.click(input);
+            expect(onChange).not.toHaveBeenCalled();
+        });
+    });
+
     // Common tests suite.
     commonTestsSuiteRTL(setup, {
         baseClassName: CLASSNAME,

package/src/components/switch/Switch.tsx

@@ -9,11 +9,13 @@ import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/classNam
 import { useId } from '@lumx/react/hooks/useId';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
+import { useDisableStateProps } from '@lumx/react/utils/disabled/useDisableStateProps';
+import { HasAriaDisabled } from '@lumx/react/utils/type/HasAriaDisabled';
 
 /**
  * Defines the props of the component.
  */
-export interface SwitchProps extends GenericProps, HasTheme {
+export interface SwitchProps extends GenericProps, HasTheme, HasAriaDisabled {
     /** Helper text. */
     helper?: string;
     /** Whether it is checked or not. */
@@ -59,16 +61,15 @@ const DEFAULT_PROPS: Partial<SwitchProps> = {
  * @return React element.
  */
 export const Switch = forwardRef<SwitchProps, HTMLDivElement>((props, ref) => {
+    const { isAnyDisabled, disabledStateProps, otherProps } = useDisableStateProps(props);
     const defaultTheme = useTheme() || Theme.light;
     const {
         checked,
         children,
         className,
-        disabled,
         helper,
         id,
         isChecked = checked,
-        isDisabled = disabled,
         name,
         onChange,
         position = DEFAULT_PROPS.position,
@@ -76,7 +77,7 @@ export const Switch = forwardRef<SwitchProps, HTMLDivElement>((props, ref) => {
         value,
         inputProps = {},
         ...forwardedProps
-    } = props;
+    } = otherProps;
     const generatedInputId = useId();
     const inputId = id || generatedInputId;
     const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -94,13 +95,12 @@ export const Switch = forwardRef<SwitchProps, HTMLDivElement>((props, ref) => {
                 handleBasicClasses({
                     prefix: CLASSNAME,
                     isChecked,
-                    isDisabled,
+                    isDisabled: isAnyDisabled,
                     position,
                     theme,
                     isUnchecked: !isChecked,
                 }),
             )}
-            aria-disabled={isDisabled}
         >
             <div className={`${CLASSNAME}__input-wrapper`}>
                 <input
@@ -110,7 +110,8 @@ export const Switch = forwardRef<SwitchProps, HTMLDivElement>((props, ref) => {
                     className={`${CLASSNAME}__input-native`}
                     name={name}
                     value={value}
-                    disabled={isDisabled}
+                    {...disabledStateProps}
+                    readOnly={inputProps.readOnly || isAnyDisabled}
                     checked={isChecked}
                     aria-checked={Boolean(isChecked)}
                     onChange={handleChange}

package/src/components/table/TableRow.tsx

@@ -5,6 +5,7 @@ import classNames from 'classnames';
 import { GenericProps } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
+import { useDisableStateProps } from '@lumx/react/utils/disabled/useDisableStateProps';
 
 /**
  * Defines the props of the component.
@@ -43,23 +44,24 @@ const DEFAULT_PROPS: Partial<TableRowProps> = {};
  * @return React element.
  */
 export const TableRow = forwardRef<TableRowProps, HTMLTableRowElement>((props, ref) => {
-    const { children, className, disabled, isClickable, isDisabled = disabled, isSelected, ...forwardedProps } = props;
+    const { isAnyDisabled, disabledStateProps, otherProps } = useDisableStateProps(props);
+    const { children, className, isClickable, isSelected, ...forwardedProps } = otherProps;
 
     return (
         <tr
             ref={ref}
-            tabIndex={isClickable && !isDisabled ? 0 : -1}
+            tabIndex={isClickable && !disabledStateProps.disabled ? 0 : -1}
             {...forwardedProps}
             className={classNames(
                 className,
                 handleBasicClasses({
-                    isClickable: isClickable && !isDisabled,
-                    isDisabled,
-                    isSelected: isSelected && !isDisabled,
+                    isClickable: isClickable && !isAnyDisabled,
+                    isDisabled: isAnyDisabled,
+                    isSelected: isSelected && !isAnyDisabled,
                     prefix: CLASSNAME,
                 }),
             )}
-            aria-disabled={isDisabled}
+            aria-disabled={isAnyDisabled}
         >
             {children}
         </tr>

package/src/components/tabs/Tab.tsx

@@ -8,6 +8,7 @@ import { GenericProps } from '@lumx/react/utils/type';
 import { handleBasicClasses } from '@lumx/react/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
+import { useDisableStateProps } from '@lumx/react/utils/disabled/useDisableStateProps';
 import { useTabProviderContext } from './state';
 
 /**
@@ -55,29 +56,28 @@ const DEFAULT_PROPS: Partial<TabProps> = {};
  * @return React element.
  */
 export const Tab = forwardRef<TabProps, HTMLButtonElement>((props, ref) => {
+    const { isAnyDisabled, otherProps } = useDisableStateProps(props);
     const {
         className,
-        disabled,
         icon,
         iconProps = {},
         id,
         isActive: propIsActive,
-        isDisabled = disabled,
         label,
         onFocus,
         onKeyPress,
         tabIndex = -1,
         ...forwardedProps
-    } = props;
+    } = otherProps;
     const state = useTabProviderContext('tab', id);
     const isActive = propIsActive || state?.isActive;
 
     const changeToCurrentTab = useCallback(() => {
-        if (isDisabled) {
+        if (isAnyDisabled) {
             return;
         }
         state?.changeToTab();
-    }, [isDisabled, state]);
+    }, [isAnyDisabled, state]);
 
     const handleFocus: FocusEventHandler = useCallback(
         (event) => {
@@ -92,12 +92,12 @@ export const Tab = forwardRef<TabProps, HTMLButtonElement>((props, ref) => {
     const handleKeyPress: KeyboardEventHandler = useCallback(
         (event) => {
             onKeyPress?.(event);
-            if (event.key !== 'Enter') {
+            if (event.key !== 'Enter' || isAnyDisabled) {
                 return;
             }
             changeToCurrentTab();
         },
-        [changeToCurrentTab, onKeyPress],
+        [changeToCurrentTab, isAnyDisabled, onKeyPress],
     );
 
     return (
@@ -106,13 +106,16 @@ export const Tab = forwardRef<TabProps, HTMLButtonElement>((props, ref) => {
             {...forwardedProps}
             type="button"
             id={state?.tabId}
-            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, isActive, isDisabled }))}
+            className={classNames(
+                className,
+                handleBasicClasses({ prefix: CLASSNAME, isActive, isDisabled: isAnyDisabled }),
+            )}
             onClick={changeToCurrentTab}
             onKeyPress={handleKeyPress}
             onFocus={handleFocus}
             role="tab"
             tabIndex={isActive ? 0 : tabIndex}
-            aria-disabled={isDisabled}
+            aria-disabled={isAnyDisabled}
             aria-selected={isActive}
             aria-controls={state?.tabPanelId}
         >

package/src/components/text-field/TextField.stories.tsx

@@ -3,6 +3,7 @@ import { mdiTranslate } from '@lumx/icons';
 import { Chip, IconButton, TextField, Typography } from '@lumx/react';
 import { withValueOnChange } from '@lumx/react/stories/decorators/withValueOnChange';
 import { loremIpsum } from '@lumx/react/stories/utils/lorem';
+import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';
 
 export default {
     title: 'LumX components/text-field/TextField',
@@ -156,3 +157,24 @@ export const WithChips = {
         ),
     },
 };
+
+/**
+ * Disabled state
+ */
+export const Disabled = {
+    args: {
+        value: 'Some value',
+        label: 'Label',
+        helper: 'Helper',
+    },
+    decorators: [
+        withCombinations({
+            combinations: {
+                rows: {
+                    disabled: { disabled: true },
+                    'aria-disabled': { 'aria-disabled': true },
+                },
+            },
+        }),
+    ],
+};

package/src/components/text-field/TextField.test.tsx

@@ -227,6 +227,62 @@ describe(`<${TextField.displayName}>`, () => {
         });
     });
 
+    describe('Disabled state', () => {
+        it('should render with "isDisabled"', async () => {
+            const onChange = jest.fn();
+            const { element, inputNative } = setup({
+                label: 'Label',
+                isDisabled: true,
+                value: 'test',
+                onChange,
+            });
+
+            expect(element).toHaveClass('lumx-text-field--is-disabled');
+            expect(inputNative).toBeDisabled();
+
+            // Cannot type in disabled input.
+            await userEvent.type(inputNative, 'new value');
+            expect(onChange).not.toHaveBeenCalled();
+        });
+
+        it('should not render clear button when disabled', () => {
+            const { clearButton } = setup({
+                value: 'initial value',
+                clearButtonProps: { label: 'Clear' },
+                isDisabled: true,
+            });
+            expect(clearButton).not.toBeInTheDocument();
+        });
+
+        it('should render with "aria-disabled"', async () => {
+            const onChange = jest.fn();
+            const { element, inputNative } = setup({
+                label: 'Label',
+                'aria-disabled': true,
+                value: 'test',
+                onChange,
+            });
+
+            expect(element).toHaveClass('lumx-text-field--is-disabled');
+            expect(inputNative).not.toBeDisabled();
+            expect(inputNative).toHaveAttribute('aria-disabled', 'true');
+            expect(inputNative).toHaveAttribute('readonly');
+
+            // Cannot type in readonly input.
+            await userEvent.type(inputNative, 'new value');
+            expect(onChange).not.toHaveBeenCalled();
+        });
+
+        it('should not render clear button when aria-disabled', () => {
+            const { clearButton } = setup({
+                value: 'initial value',
+                clearButtonProps: { label: 'Clear' },
+                'aria-disabled': true,
+            });
+            expect(clearButton).not.toBeInTheDocument();
+        });
+    });
+
     // Common tests suite.
     commonTestsSuiteRTL(setup, {
         baseClassName: CLASSNAME,

package/src/components/text-field/TextField.tsx

@@ -22,11 +22,13 @@ import { mergeRefs } from '@lumx/react/utils/react/mergeRefs';
 import { useId } from '@lumx/react/hooks/useId';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
+import { useDisableStateProps } from '@lumx/react/utils/disabled/useDisableStateProps';
+import { HasAriaDisabled } from '@lumx/react/utils/type/HasAriaDisabled';
 
 /**
  * Defines the props of the component.
  */
-export interface TextFieldProps extends GenericProps, HasTheme {
+export interface TextFieldProps extends GenericProps, HasTheme, HasAriaDisabled {
     /** Chip Group to be rendered before the main text input. */
     chips?: 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. */
@@ -158,7 +160,9 @@ interface InputNativeProps {
     id?: string;
     inputRef?: TextFieldProps['inputRef'];
     isDisabled?: boolean;
+    'aria-disabled'?: boolean;
     isRequired?: boolean;
+    readOnly?: boolean;
     multiline?: boolean;
     maxLength?: number;
     placeholder?: string;
@@ -178,7 +182,6 @@ interface InputNativeProps {
 const renderInputNative: React.FC<InputNativeProps> = (props) => {
     const {
         id,
-        isDisabled,
         isRequired,
         placeholder,
         multiline,
@@ -231,13 +234,13 @@ const renderInputNative: React.FC<InputNativeProps> = (props) => {
         placeholder,
         value,
         name,
-        disabled: isDisabled,
         required: isRequired,
         onFocus: onTextFieldFocus,
         onBlur: onTextFieldBlur,
         onChange: handleChange,
         'aria-invalid': hasError ? 'true' : undefined,
         'aria-describedby': describedById,
+        readOnly: forwardedProps.readOnly || forwardedProps['aria-disabled'],
         ref: mergeRefs(inputRef as any, ref) as any,
     };
     if (multiline) {
@@ -256,12 +259,12 @@ const renderInputNative: React.FC<InputNativeProps> = (props) => {
  * @return React element.
  */
 export const TextField = forwardRef<TextFieldProps, HTMLDivElement>((props, ref) => {
+    const { isAnyDisabled, disabledStateProps, otherProps } = useDisableStateProps(props);
     const defaultTheme = useTheme() || Theme.light;
     const {
         chips,
         className,
         clearButtonProps,
-        disabled,
         error,
         forceFocusStyle,
         hasError,
@@ -269,7 +272,6 @@ export const TextField = forwardRef<TextFieldProps, HTMLDivElement>((props, ref)
         icon,
         id,
         inputRef: inputRefProps,
-        isDisabled = disabled,
         isRequired,
         isValid,
         label,
@@ -289,7 +291,7 @@ export const TextField = forwardRef<TextFieldProps, HTMLDivElement>((props, ref)
         value,
         afterElement,
         ...forwardedProps
-    } = props;
+    } = otherProps;
     const generatedTextFieldId = useId();
     const textFieldId = id || generatedTextFieldId;
     /** Keep a clean local input ref to manage focus */
@@ -352,7 +354,7 @@ export const TextField = forwardRef<TextFieldProps, HTMLDivElement>((props, ref)
                     hasPlaceholder: Boolean(placeholder),
                     hasTextarea: multiline,
                     hasValue: Boolean(value),
-                    isDisabled,
+                    isDisabled: isAnyDisabled,
                     isFocus: isFocus || forceFocusStyle,
                     isValid,
                     prefix: CLASSNAME,
@@ -400,7 +402,7 @@ export const TextField = forwardRef<TextFieldProps, HTMLDivElement>((props, ref)
                         {renderInputNative({
                             id: textFieldId,
                             inputRef,
-                            isDisabled,
+                            ...disabledStateProps,
                             isRequired,
                             maxLength,
                             multiline,
@@ -426,7 +428,7 @@ export const TextField = forwardRef<TextFieldProps, HTMLDivElement>((props, ref)
                         {renderInputNative({
                             id: textFieldId,
                             inputRef,
-                            isDisabled,
+                            ...disabledStateProps,
                             isRequired,
                             maxLength,
                             multiline,
@@ -456,7 +458,7 @@ export const TextField = forwardRef<TextFieldProps, HTMLDivElement>((props, ref)
                     />
                 )}
 
-                {clearButtonProps && isNotEmpty && (
+                {clearButtonProps && isNotEmpty && !isAnyDisabled && (
                     <IconButton
                         {...clearButtonProps}
                         className={`${CLASSNAME}__input-clear`}

package/src/utils/disabled/index.ts

@@ -0,0 +1 @@
+export { useDisableStateProps } from './useDisableStateProps';

package/src/utils/disabled/useDisableStateProps.tsx

@@ -0,0 +1,34 @@
+type GenericProps = {
+    disabled?: boolean;
+    isDisabled?: boolean;
+    'aria-disabled'?: boolean | 'true' | 'false';
+    onClick?: any;
+    onChange?: any;
+};
+
+interface Output<TProps extends GenericProps> {
+    /** Is disabled or aria-disabled */
+    isAnyDisabled?: boolean;
+    disabledStateProps: { disabled?: boolean; 'aria-disabled'?: boolean };
+    otherProps: TProps & { disabled: never; 'aria-disabled': never; isDisabled: never };
+}
+
+/**
+ * Resolve disabled state from props.
+ * (handles `disabled`, `isDisabled` and `aria-disabled`)
+ *
+ * @params component props
+ */
+export function useDisableStateProps<TProps extends GenericProps>(props: TProps): Output<TProps> {
+    const { disabled, isDisabled = disabled, 'aria-disabled': ariaDisabled, onClick, onChange, ...otherProps } = props;
+    const disabledStateProps = {
+        disabled: isDisabled,
+        'aria-disabled': ariaDisabled === true || ariaDisabled === 'true',
+    };
+    const isAnyDisabled = disabledStateProps['aria-disabled'] || disabledStateProps.disabled;
+    if (!isAnyDisabled) {
+        (otherProps as any).onClick = onClick;
+        (otherProps as any).onChange = onChange;
+    }
+    return { disabledStateProps, otherProps: otherProps as Output<TProps>['otherProps'], isAnyDisabled };
+}

package/src/utils/type/HasAriaDisabled.ts

@@ -0,0 +1,6 @@
+import type { AriaAttributes } from 'react';
+
+export interface HasAriaDisabled {
+    /** Similar to `disabled` but does not block pointer events or focus */
+    'aria-disabled'?: AriaAttributes['aria-disabled'];
+}