@lumx/react 3.18.2-alpha.3 → 3.19.0

package/package.json

@@ -6,8 +6,8 @@
         "url": "https://github.com/lumapps/design-system/issues"
     },
     "dependencies": {
-        "@lumx/core": "^3.18.2-alpha.3",
-        "@lumx/icons": "^3.18.2-alpha.3",
+        "@lumx/core": "^3.19.0",
+        "@lumx/icons": "^3.19.0",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.3.2",
@@ -105,5 +105,5 @@
         "build:storybook": "storybook build"
     },
     "sideEffects": false,
-    "version": "3.18.2-alpha.3"
+    "version": "3.19.0"
 }

package/src/components/navigation/NavigationItem.tsx

@@ -42,7 +42,7 @@ export const NavigationItem = Object.assign(
     forwardRefPolymorphic(<E extends ElementType = 'a'>(props: NavigationItemProps<E>, ref: ComponentRef<E>) => {
         const { className, icon, label, isCurrentPage, as: Element = 'a', ...forwardedProps } = props;
         const theme = useTheme();
-        const { tooltipLabel, labelRef } = useOverflowTooltipLabel();
+        const { tooltipLabel, labelRef } = useOverflowTooltipLabel(label);
 
         const buttonProps = Element === 'button' ? { type: 'button' } : {};
 

package/src/components/text/Text.stories.tsx

@@ -6,7 +6,7 @@ import { textElementArgType } from '@lumx/react/stories/controls/element';
 import { withUndefined } from '@lumx/react/stories/controls/withUndefined';
 import { loremIpsum } from '@lumx/react/stories/utils/lorem';
 import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';
-import { ColorPalette, ColorVariant, Icon, WhiteSpace } from '@lumx/react';
+import { Button, ColorPalette, ColorVariant, Icon, WhiteSpace } from '@lumx/react';
 import { mdiEarth, mdiHeart } from '@lumx/icons';
 import { withResizableBox } from '@lumx/react/stories/decorators/withResizableBox';
 import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
@@ -107,6 +107,28 @@ export const Truncate = {
     },
 };
 
+/**
+ * Test the update of the `title` attribute when text overflows
+ */
+export const TestUpdateTruncateTitleLabel = {
+    render(args: any) {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const [content, setContent] = React.useState<string>('Some text');
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const lengthen = React.useCallback(() => setContent((prevContent) => `${prevContent} ${prevContent}`), []);
+        return (
+            <>
+                <Button onClick={lengthen}>Lengthen text</Button>
+                <Text as="p" truncate style={{ maxWidth: 300 }} {...args}>
+                    {content}
+                </Text>
+            </>
+        );
+    },
+    // Disables Chromatic snapshot (not relevant for this story).
+    parameters: { chromatic: { disable: true } },
+};
+
 /**
  * Long text with multi line truncate ellipsis
  */

package/src/components/text/Text.tsx

@@ -112,7 +112,7 @@ export const Text = forwardRef<TextProps>((props, ref) => {
         !(isTruncated && !isTruncatedMultiline) &&
         whiteSpace && { '--lumx-text-white-space': whiteSpace };
 
-    const { tooltipLabel, labelRef } = useOverflowTooltipLabel();
+    const { tooltipLabel, labelRef } = useOverflowTooltipLabel(children);
 
     return (
         <Component

package/src/components/uploader/Uploader.stories.tsx

@@ -8,6 +8,8 @@ import { withWrapper } from '@lumx/react/stories/decorators/withWrapper';
 
 import { AspectRatio, GridColumn, Size, Uploader, UploaderVariant } from '@lumx/react';
 import { mdiTextBoxPlus } from '@lumx/icons';
+import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
+import { withUndefined } from '@lumx/react/stories/controls/withUndefined';
 
 export default {
     title: 'LumX components/uploader/Uploader',
@@ -15,11 +17,13 @@ export default {
     argTypes: {
         onClick: { action: true },
         icon: iconArgType,
+        aspectRatio: getSelectArgType(AspectRatio),
     },
 };
 
 const UPLOADER_VARIANTS = [UploaderVariant.square, UploaderVariant.rounded, UploaderVariant.circle];
 const UPLOADER_SIZES = [Size.xl, Size.xxl];
+const ASPECT_RATIOS = [AspectRatio.wide, AspectRatio.horizontal, AspectRatio.vertical, AspectRatio.square];
 
 export const WithLabel = {
     args: { label: 'Pick a file' },
@@ -71,13 +75,18 @@ export const Variants = {
         withCombinations({
             combinations: {
                 rows: { key: 'variant', options: UPLOADER_VARIANTS },
+                cols: {
+                    Default: {},
+                    Disabled: { isDisabled: true },
+                    'Aria Disabled': { 'aria-disabled': true },
+                },
                 sections: {
                     Button: {},
                     'File input': { fileInputProps: {} },
                 },
             },
         }),
-        withWrapper({ maxColumns: 2, itemMinWidth: 300 }, GridColumn),
+        withWrapper({ maxColumns: 2, itemMinWidth: 470 }, GridColumn),
     ],
 };
 
@@ -88,13 +97,13 @@ export const RatioAndSize = {
         withCombinations({
             combinations: {
                 cols: { key: 'size', options: UPLOADER_SIZES },
-                rows: { key: 'aspectRatio', options: Object.values(AspectRatio) },
+                rows: { key: 'aspectRatio', options: withUndefined(ASPECT_RATIOS) },
                 sections: {
                     Button: {},
                     'File input': { fileInputProps: {} },
                 },
             },
         }),
-        withWrapper({ maxColumns: 2, itemMinWidth: 200 }, GridColumn),
+        withWrapper({ maxColumns: 2, itemMinWidth: 470 }, GridColumn),
     ],
 };

package/src/components/uploader/Uploader.test.tsx

@@ -22,8 +22,9 @@ const setup = (propsOverride: SetupProps = {}, { wrapper }: SetupRenderOptions =
     const uploader = getByClassName(document.body, CLASSNAME);
     const label = queryByClassName(uploader, `${CLASSNAME}__label`);
     const icon = queryByClassName(uploader, `${CLASSNAME}__icon`);
+    const input = queryByClassName(uploader, `${CLASSNAME}__input`);
 
-    return { props, uploader, label, icon };
+    return { props, uploader, label, icon, input };
 };
 
 describe(`<${Uploader.displayName}>`, () => {
@@ -83,31 +84,51 @@ describe(`<${Uploader.displayName}>`, () => {
         });
     });
 
-    describe('Events', () => {
+    describe.each`
+        name                      | props
+        ${'button'}               | ${{}}
+        ${'button isDisabled   '} | ${{ isDisabled: true }}
+        ${'button aria-disabled'} | ${{ 'aria-disabled': true }}
+        ${'file input          '} | ${{ fileInputProps: { onChange: jest.fn() } }}
+    `('Events $name', ({ props }) => {
+        const onClick = jest.fn();
+        beforeEach(() => onClick.mockClear());
+        const assertClick = () => {
+            if (props.isDisabled || props['aria-disabled']) {
+                expect(onClick).not.toHaveBeenCalled();
+            } else {
+                expect(onClick).toHaveBeenCalled();
+            }
+        };
+
         it('should trigger `onClick` when clicked', async () => {
-            const onClick = jest.fn();
-            const { uploader } = setup({ onClick });
+            const { uploader } = setup({ ...props, onClick });
 
             await userEvent.click(uploader);
-            expect(onClick).toHaveBeenCalled();
+            assertClick();
         });
 
         it('should trigger `onClick` when pressing Enter or Escape', async () => {
-            const onClick = jest.fn();
-            const { uploader } = setup({ onClick });
+            const { uploader, input } = setup({ ...props, onClick });
+
+            if (props.isDisabled) {
+                expect(props.fileInputProps ? input : uploader).toBeDisabled();
+                //Cannot test focus or activation
+                return;
+            }
 
             await userEvent.tab();
-            expect(uploader).toHaveFocus();
+            expect(props.fileInputProps ? input : uploader).toHaveFocus();
 
             // Activate with Enter
             await userEvent.keyboard('[Enter]');
-            expect(onClick).toHaveBeenCalled();
+            assertClick();
 
             onClick.mockClear();
 
             // Activate with Space
             await userEvent.keyboard('[Space]');
-            expect(onClick).toHaveBeenCalled();
+            assertClick();
         });
     });
 

package/src/components/uploader/Uploader.tsx

@@ -9,6 +9,9 @@ import { useBooleanState } from '@lumx/react/hooks/useBooleanState';
 import { useId } from '@lumx/react/hooks/useId';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
+import { HasAriaDisabled } from '@lumx/react/utils/type/HasAriaDisabled';
+import { useDisableStateProps } from '@lumx/react/utils/disabled';
+import { VISUALLY_HIDDEN } from '@lumx/react/constants';
 
 /**
  * Uploader variants.
@@ -35,11 +38,13 @@ interface FileInputProps extends Omit<React.ComponentProps<'input'>, 'onChange'>
 /**
  * Defines the props of the component.
  */
-export interface UploaderProps extends GenericProps, HasTheme {
+export interface UploaderProps extends GenericProps, HasTheme, HasAriaDisabled {
     /** Image aspect ratio. */
     aspectRatio?: AspectRatio;
     /** Icon (SVG path). */
     icon?: string;
+    /** Disabled state */
+    isDisabled?: boolean;
     /** Label text. */
     label?: string;
     /** Size variant. */
@@ -79,6 +84,7 @@ const DEFAULT_PROPS: Partial<UploaderProps> = {
  * @return React element.
  */
 export const Uploader = forwardRef<UploaderProps>((props, ref) => {
+    const { disabledStateProps, otherProps, isAnyDisabled } = useDisableStateProps(props);
     const defaultTheme = useTheme() || Theme.light;
     const {
         aspectRatio = DEFAULT_PROPS.aspectRatio,
@@ -89,32 +95,45 @@ export const Uploader = forwardRef<UploaderProps>((props, ref) => {
         theme = defaultTheme,
         variant = DEFAULT_PROPS.variant,
         fileInputProps,
+        onClick,
         ...forwardedProps
-    } = props;
+    } = otherProps;
     // Adjust to square aspect ratio when using circle variants.
     const adjustedAspectRatio = variant === UploaderVariant.circle ? AspectRatio.square : aspectRatio;
 
+    const handleClick: React.MouseEventHandler = React.useCallback(
+        (evt) => {
+            if (isAnyDisabled) {
+                evt.preventDefault();
+            } else {
+                onClick?.(evt);
+            }
+        },
+        [isAnyDisabled, onClick],
+    );
+
     const generatedInputId = useId();
     const inputId = fileInputProps?.id || generatedInputId;
     const [isDragHovering, unsetDragHovering, setDragHovering] = useBooleanState(false);
     const wrapper = fileInputProps
-        ? { Component: 'label' as const, props: { htmlFor: inputId } as const }
-        : { Component: 'button' as const, props: { type: 'button' } as const };
+        ? ({ Component: 'label', props: { htmlFor: inputId } } as const)
+        : ({ Component: 'button', props: { type: 'button', ...disabledStateProps } } as const);
 
     const onChange = React.useMemo(() => {
-        if (!fileInputProps?.onChange) return undefined;
+        if (isAnyDisabled || !fileInputProps?.onChange) return undefined;
         return (evt: React.ChangeEvent<HTMLInputElement>) => {
             const fileList = evt.target.files;
             const files = fileList ? Array.from(fileList) : [];
             fileInputProps.onChange(files, evt);
         };
-    }, [fileInputProps]);
+    }, [isAnyDisabled, fileInputProps]);
 
     return (
         <wrapper.Component
             ref={ref as any}
             {...wrapper.props}
             {...forwardedProps}
+            onClick={handleClick}
             className={classNames(
                 className,
                 handleBasicClasses({
@@ -124,6 +143,7 @@ export const Uploader = forwardRef<UploaderProps>((props, ref) => {
                     theme,
                     variant,
                     isDragHovering,
+                    isDisabled: isAnyDisabled,
                 }),
             )}
         >
@@ -139,8 +159,10 @@ export const Uploader = forwardRef<UploaderProps>((props, ref) => {
                 <input
                     type="file"
                     id={inputId}
-                    className={`${CLASSNAME}__input`}
+                    className={`${CLASSNAME}__input ${VISUALLY_HIDDEN}`}
+                    {...disabledStateProps}
                     {...fileInputProps}
+                    readOnly={isAnyDisabled}
                     onChange={onChange}
                     onDragEnter={setDragHovering}
                     onDragLeave={unsetDragHovering}

package/src/hooks/useOverflowTooltipLabel.tsx

@@ -1,29 +1,32 @@
 import React from 'react';
 import { useTooltipContext } from '@lumx/react/components/tooltip/context';
+import { VISUALLY_HIDDEN } from '@lumx/react/constants';
 
 /**
  * Compute a tooltip label based on a label element `innerText` if the text overflows.
- *
- * Warning: only works on first render, does not update on label element resize.
+ * Updates dynamically on content changes (but not on resize!)
  */
-export const useOverflowTooltipLabel = () => {
+export const useOverflowTooltipLabel = (content: React.ReactNode) => {
     const parentTooltip = useTooltipContext();
     const [tooltipLabel, setTooltipLabel] = React.useState<string | undefined>(undefined);
-    const labelRef = React.useCallback(
-        (labelElement: HTMLElement | null) => {
-            if (!labelElement || !!parentTooltip) {
-                // Skip if label element is unknown
-                // Skip if the parent has a tooltip
-                return;
-            }
+    const [labelElement, setLabelElement] = React.useState<HTMLElement | null>(null);
 
-            // Label overflowing
-            if (labelElement.offsetWidth < labelElement.scrollWidth) {
-                setTooltipLabel(labelElement.innerText);
-            }
-        },
-        [parentTooltip],
-    );
+    React.useLayoutEffect(() => {
+        if (
+            // Not inside a tooltip
+            !parentTooltip &&
+            labelElement &&
+            // Not inside a visually hidden
+            !labelElement?.closest(`.${VISUALLY_HIDDEN}`) &&
+            // Text overflows
+            labelElement.offsetWidth < labelElement.scrollWidth
+        ) {
+            // Set tooltip label
+            setTooltipLabel(labelElement.innerText);
+        } else {
+            setTooltipLabel(undefined);
+        }
+    }, [labelElement, parentTooltip, content]);
 
-    return { labelRef, tooltipLabel };
+    return { labelRef: setLabelElement, tooltipLabel };
 };

package/src/utils/disabled/DisabledStateProvider.stories.tsx

@@ -13,6 +13,7 @@ import {
     Switch,
     TextField,
     Thumbnail,
+    Uploader,
 } from '@lumx/react';
 import { DisabledStateProvider } from '@lumx/react/utils';
 import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
@@ -87,6 +88,7 @@ export const AllComponents = {
             <Switch>Switch</Switch>
             <TextField label="texfield" onChange={() => {}} value="" />
             <Thumbnail alt="Thumbnail" image={LANDSCAPE_IMAGES.landscape1s200} onClick={() => {}} />
+            <Uploader label="Upload a file" fileInputProps={{ onChange: () => {} }} />
         </DisabledStateProvider>
     ),
 };