@lumx/react 3.14.0 → 3.14.1-alpha.0

package/package.json

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

package/src/components/button/Button.stories.tsx

@@ -178,6 +178,7 @@ export const StateVariations = {
                     Active: { isActive: true },
                     Focused: { isFocused: true },
                     Disabled: { isDisabled: true },
+                    AriaDisabled: { 'aria-disabled': true },
                 },
                 // Emphasis/Background
                 sections: {
@@ -212,6 +213,7 @@ export const Theming = {
                     Active: { isActive: true },
                     Focused: { isFocused: true },
                     Disabled: { isDisabled: true },
+                    AriaDisabled: { 'aria-disabled': true },
                 },
                 rows: {
                     Default: {},

package/src/components/button/Button.test.tsx

@@ -63,6 +63,12 @@ describe(`<${Button.displayName}>`, () => {
             expect(buttonWrapper).toBeInTheDocument();
             expect(button).toBe(within(buttonWrapper as any).queryByRole('button', { name: label }));
         });
+
+        it('should prevent click when aria-disabled', () => {
+            const onClick = jest.fn();
+            const { button } = setup({ children: 'Label', 'aria-disabled': true, onClick });
+            expect(button.onclick).toBeFalsy();
+        });
     });
 
     // Common tests suite.

package/src/components/button/ButtonRoot.tsx

@@ -20,7 +20,7 @@ export type ButtonSize = Extract<Size, 's' | 'm'>;
 
 export interface BaseButtonProps
     extends GenericProps,
-        Pick<AriaAttributes, 'aria-expanded' | 'aria-haspopup' | 'aria-pressed' | 'aria-label'>,
+        Pick<AriaAttributes, 'aria-expanded' | 'aria-haspopup' | 'aria-pressed' | 'aria-label' | 'aria-disabled'>,
         HasTheme {
     /** Color variant. */
     color?: ColorPalette;
@@ -106,6 +106,7 @@ export const ButtonRoot = forwardRef<ButtonRootProps, HTMLButtonElement | HTMLAn
         hasBackground,
         href,
         isDisabled = disabled,
+        'aria-disabled': ariaDisabled = isDisabled,
         isSelected,
         isActive,
         isFocused,
@@ -172,8 +173,9 @@ export const ButtonRoot = forwardRef<ButtonRootProps, HTMLButtonElement | HTMLAn
     return (
         <button
             {...forwardedProps}
+            {...(ariaDisabled ? { onClick: undefined } : undefined)}
             disabled={isDisabled}
-            aria-disabled={isDisabled}
+            aria-disabled={ariaDisabled}
             aria-label={ariaLabel}
             ref={ref as RefObject<HTMLButtonElement>}
             className={buttonClassName}

package/src/components/thumbnail/useFocusPointStyle.tsx

@@ -62,21 +62,18 @@ export const useFocusPointStyle = (
     );
 
     // Compute style.
-    const [style, setStyle] = useState<CSSProperties>({});
-    useEffect(() => {
+    const style: CSSProperties = useMemo(() => {
         // Focus point is not applicable => exit early
         if (!image || aspectRatio === AspectRatio.original || (!focusPoint?.x && !focusPoint?.y)) {
-            return;
+            return {};
         }
         if (!element || !imageSize) {
             // Focus point can be computed but now right now (image size unknown).
-            setStyle({ visibility: 'hidden' });
-            return;
+            return { visibility: 'hidden' };
         }
         if (!containerSize || !imageSize.height || !imageSize.width) {
             // Missing container or image size abort focus point compute.
-            setStyle({});
-            return;
+            return {};
         }
 
         const heightScale = imageSize.height / containerSize.height;
@@ -102,8 +99,8 @@ export const useFocusPointStyle = (
         });
 
         const objectPosition = `${x}% ${y}%`;
-        // Update only if needed.
-        setStyle((oldStyle) => (oldStyle.objectPosition === objectPosition ? oldStyle : { objectPosition }));
+
+        return { objectPosition };
     }, [aspectRatio, containerSize, element, focusPoint?.x, focusPoint?.y, image, imageSize]);
 
     return style;