components-test-pb 0.0.6 → 0.0.8

package/dist/Components/Button/Button.types.d.ts

@@ -7,8 +7,9 @@ export type ButtonSize = 'small' | 'medium' | 'large';
 export type ButtonProps = ComponentProps<ButtonSlots> & {
     appearance?: 'secondary' | 'primary' | 'tertiary';
     disabled?: boolean;
+    disabledFocusable?: boolean;
     shape?: 'rounded' | 'circular' | 'square';
     size?: ButtonSize;
 };
 export type ButtonBaseProps = DistributiveOmit<ButtonProps, 'appearance' | 'size' | 'shape'>;
-export type ButtonState = ComponentState<ButtonSlots> & Required<Pick<ButtonProps, 'appearance' | 'disabled' | 'shape' | 'size'>>;
+export type ButtonState = ComponentState<ButtonSlots> & Required<Pick<ButtonProps, 'appearance' | 'disabled' | 'disabledFocusable' | 'shape' | 'size'>>;

package/dist/Components/Button/useButton.js

@@ -1,11 +1,19 @@
+import { useARIAButtonProps } from '../../utilities/useARIAButtonProps.js';
 export const useButton = (props) => {
-    const { appearance, shape, size, disabled, ...buttonProps } = props;
+    const { appearance, shape, size, disabled, disabledFocusable, ...buttonProps } = props;
+    const tag = (buttonProps.as ?? 'button');
+    const ariaButtonProps = useARIAButtonProps(tag, {
+        ...buttonProps,
+        disabled,
+        disabledFocusable,
+    });
     return {
         appearance: appearance ?? 'secondary',
         shape: shape ?? 'rounded',
         size: size ?? 'medium',
         disabled: disabled ?? false,
-        components: { root: buttonProps.as ?? 'button' },
-        root: { as: buttonProps.as ?? 'button', disabled: disabled ?? false, ...buttonProps },
+        disabledFocusable: disabledFocusable ?? false,
+        components: { root: tag },
+        root: { as: tag, ...ariaButtonProps },
     };
 };

package/dist/Components/Button/useButtonStyles.styles.js

@@ -93,16 +93,53 @@ const useRootStyles = makeStyles({
     }
 });
 const useRootDisabledstyles = makeStyles({
-    base: {},
-    primary: {},
+    base: {
+        backgroundColor: Tokens.colorNeutralBackgroundDisabled,
+        ...shorthands.borderColor(Tokens.colorNeutralStrokeDisabled),
+        color: Tokens.colorNeutralForegroundDisabled,
+        cursor: 'not-allowed',
+        ':hover': {
+            backgroundColor: Tokens.colorNeutralBackgroundDisabled,
+            ...shorthands.borderColor(Tokens.colorNeutralStrokeDisabled),
+            color: Tokens.colorNeutralForegroundDisabled,
+            cursor: 'not-allowed'
+        },
+        ':hover:active,:active:focus-visible': {
+            backgroundColor: Tokens.colorNeutralBackgroundDisabled,
+            ...shorthands.borderColor(Tokens.colorNeutralStrokeDisabled),
+            color: Tokens.colorNeutralForegroundDisabled,
+            cursor: 'not-allowed'
+        }
+    },
+    primary: {
+        ...shorthands.borderColor('transparent'),
+        ':hover': {
+            ...shorthands.borderColor('transparent')
+        },
+        ':hover:active,:active:focus-visible': {
+            ...shorthands.borderColor('transparent')
+        }
+    },
     secondary: {},
-    tertiary: {}
+    tertiary: {
+        backgroundColor: 'transparent',
+        ...shorthands.borderColor('transparent'),
+        ':hover': {
+            backgroundColor: 'transparent',
+            ...shorthands.borderColor('transparent')
+        },
+        ':hover:active,:active:focus-visible': {
+            backgroundColor: 'transparent',
+            ...shorthands.borderColor('transparent')
+        }
+    }
 });
 export const useButtonStyles = (state) => {
     const rootBaseClassName = useRootBaseClassName();
     const rootStyles = useRootStyles();
     const rootDisabledStyles = useRootDisabledstyles();
-    const { appearance, disabled, shape, size } = state;
-    state.root.className = mergeClasses(buttonClassNames.root, rootBaseClassName, appearance && rootStyles[appearance], rootStyles[size], rootStyles[shape], disabled && rootDisabledStyles.base, appearance && disabled && rootDisabledStyles[appearance], state.root.className);
+    const { appearance, disabled, disabledFocusable, shape, size } = state;
+    const isDisabled = disabled || disabledFocusable;
+    state.root.className = mergeClasses(buttonClassNames.root, rootBaseClassName, appearance && rootStyles[appearance], rootStyles[size], rootStyles[shape], isDisabled && rootDisabledStyles.base, appearance && isDisabled && rootDisabledStyles[appearance], state.root.className);
     return state;
 };

package/dist/index.d.ts

@@ -4,3 +4,5 @@ export { Button, useButton, renderButton, useButtonStyles } from './Components/B
 export type { ButtonSlots, ButtonProps, ButtonBaseProps, ButtonState } from './Components/Button/index.js';
 export * from './Types/compose/index.js';
 export * from './Types/utils/index.js';
+export { useARIAButtonProps } from './utilities/index.js';
+export type { ARIAButtonType, ARIAButtonProps, ARIAButtonResultProps } from './utilities/index.js';

package/dist/index.js

@@ -2,3 +2,4 @@ export { Text, useText, renderText, useTextStyles } from './Components/Text/inde
 export { Button, useButton, renderButton, useButtonStyles } from './Components/Button/index.js';
 export * from './Types/compose/index.js';
 export * from './Types/utils/index.js';
+export { useARIAButtonProps } from './utilities/index.js';

package/dist/utilities/index.d.ts

@@ -0,0 +1,2 @@
+export { useARIAButtonProps } from './useARIAButtonProps.js';
+export type { ARIAButtonType, ARIAButtonProps, ARIAButtonResultProps } from './useARIAButtonProps.js';

package/dist/utilities/index.js

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

package/dist/utilities/useARIAButtonProps.d.ts

@@ -0,0 +1,16 @@
+import type { HTMLAttributes } from '../Types/utils/types.js';
+export type ARIAButtonType = 'button' | 'a' | 'div';
+export type ARIAButtonProps<Tag extends ARIAButtonType = 'button'> = HTMLAttributes<HTMLElement> & {
+    disabled?: boolean;
+    disabledFocusable?: boolean;
+} & (Tag extends 'a' ? {
+    href?: string;
+} : {});
+export type ARIAButtonResultProps<Tag extends ARIAButtonType = 'button'> = HTMLAttributes<HTMLElement> & {
+    disabled?: Tag extends 'button' ? '' | undefined : never;
+    'aria-disabled'?: 'true';
+    role?: string;
+    tabIndex?: number;
+    href?: string;
+};
+export declare const useARIAButtonProps: <Tag extends ARIAButtonType>(tag: Tag, props?: ARIAButtonProps<Tag>) => ARIAButtonResultProps<Tag>;

package/dist/utilities/useARIAButtonProps.js

@@ -0,0 +1,75 @@
+const noop = () => { };
+export const useARIAButtonProps = (tag, props = {}) => {
+    const { disabled, disabledFocusable, onClick, onKeyDown, onKeyUp, ...rest } = props;
+    const isDisabled = disabled || disabledFocusable;
+    const handleClick = (e) => {
+        if (isDisabled) {
+            e.preventDefault();
+            e.stopPropagation();
+            return;
+        }
+        onClick?.(e);
+    };
+    if (tag === 'button') {
+        const result = {
+            ...rest,
+            onClick: handleClick,
+            onKeyDown: isDisabled ? (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+            } : onKeyDown,
+            onKeyUp: isDisabled ? (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+            } : onKeyUp,
+        };
+        if (disabled && !disabledFocusable) {
+            result.disabled = '';
+        }
+        else if (disabledFocusable) {
+            result['aria-disabled'] = 'true';
+        }
+        return result;
+    }
+    const handleKeyDown = (e) => {
+        if (isDisabled) {
+            e.preventDefault();
+            e.stopPropagation();
+            return;
+        }
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            e.target?.click();
+        }
+        onKeyDown?.(e);
+    };
+    const handleKeyUp = (e) => {
+        if (isDisabled) {
+            e.preventDefault();
+            e.stopPropagation();
+            return;
+        }
+        if (e.key === ' ') {
+            e.preventDefault();
+            e.target?.click();
+        }
+        onKeyUp?.(e);
+    };
+    const result = {
+        ...rest,
+        role: 'button',
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
+        onKeyUp: handleKeyUp,
+    };
+    if (isDisabled) {
+        result['aria-disabled'] = 'true';
+        if (tag === 'a') {
+            delete result.href;
+        }
+    }
+    if (!disabled || disabledFocusable) {
+        result.tabIndex = rest.tabIndex ?? 0;
+    }
+    return result;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "components-test-pb",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "description": "",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",

package/src/Components/Button/Button.types.ts

@@ -10,6 +10,7 @@ export type ButtonSize = 'small' | 'medium' | 'large';
 export type ButtonProps = ComponentProps<ButtonSlots> & {
     appearance?: 'secondary' | 'primary' | 'tertiary';
     disabled?: boolean;
+    disabledFocusable?: boolean;
     shape?: 'rounded' | 'circular' | 'square';
     size?: ButtonSize;
 };
@@ -20,6 +21,6 @@ export type ButtonState = ComponentState<ButtonSlots> &
     Required<
         Pick<
             ButtonProps,
-            'appearance' | 'disabled' | 'shape' | 'size'
+            'appearance' | 'disabled' | 'disabledFocusable' | 'shape' | 'size'
         >
     >;

package/src/Components/Button/useButton.ts

@@ -1,16 +1,27 @@
 import type { ButtonProps, ButtonState } from './Button.types.js';
+import { useARIAButtonProps } from '../../utilities/useARIAButtonProps.js';
+import type { ARIAButtonType } from '../../utilities/useARIAButtonProps.js';
 
 export const useButton = (props: ButtonProps): ButtonState => {
-    const { appearance, shape, size, disabled, ...buttonProps } = props;
+    const { appearance, shape, size, disabled, disabledFocusable, ...buttonProps } = props;
+
+    const tag = (buttonProps.as ?? 'button') as ARIAButtonType;
+
+    const ariaButtonProps = useARIAButtonProps(tag, {
+        ...buttonProps,
+        disabled,
+        disabledFocusable,
+    });
 
     return {
         appearance: appearance ?? 'secondary',
         shape: shape ?? 'rounded',
         size: size ?? 'medium',
         disabled: disabled ?? false,
+        disabledFocusable: disabledFocusable ?? false,
 
-        components: { root: buttonProps.as ?? 'button' },
+        components: { root: tag },
 
-        root: { as: buttonProps.as ?? 'button', disabled: disabled ?? false, ...buttonProps } as ButtonState['root'],
+        root: { as: tag, ...ariaButtonProps } as ButtonState['root'],
     };
-};
+};

package/src/Components/Button/useButtonStyles.styles.ts

@@ -117,10 +117,55 @@ const useRootStyles = makeStyles({
 });
 
 const useRootDisabledstyles = makeStyles({
-    base: {},
-    primary: {},
+    base: {
+        backgroundColor: Tokens.colorNeutralBackgroundDisabled,
+        ...shorthands.borderColor(Tokens.colorNeutralStrokeDisabled),
+        color: Tokens.colorNeutralForegroundDisabled,
+
+        cursor: 'not-allowed',
+
+        ':hover': {
+            backgroundColor: Tokens.colorNeutralBackgroundDisabled,
+            ...shorthands.borderColor(Tokens.colorNeutralStrokeDisabled),
+            color: Tokens.colorNeutralForegroundDisabled,
+
+            cursor: 'not-allowed'
+        },
+
+        ':hover:active,:active:focus-visible': {
+            backgroundColor: Tokens.colorNeutralBackgroundDisabled,
+            ...shorthands.borderColor(Tokens.colorNeutralStrokeDisabled),
+            color: Tokens.colorNeutralForegroundDisabled,
+
+            cursor: 'not-allowed'
+        }
+    },
+    primary: {
+        ...shorthands.borderColor('transparent'),
+
+        ':hover': {
+            ...shorthands.borderColor('transparent')
+        },
+
+        ':hover:active,:active:focus-visible': {
+            ...shorthands.borderColor('transparent')
+        }
+    },
     secondary: {},
-    tertiary: {}
+    tertiary: {
+        backgroundColor: 'transparent',
+        ...shorthands.borderColor('transparent'),
+
+        ':hover': {
+            backgroundColor: 'transparent',
+            ...shorthands.borderColor('transparent')
+        },
+
+        ':hover:active,:active:focus-visible': {
+            backgroundColor: 'transparent',
+            ...shorthands.borderColor('transparent')
+        }
+    }
 });
 
 export const useButtonStyles = (state: ButtonState): ButtonState => {
@@ -130,7 +175,9 @@ export const useButtonStyles = (state: ButtonState): ButtonState => {
     const rootStyles = useRootStyles();
     const rootDisabledStyles = useRootDisabledstyles();
 
-    const { appearance, disabled, shape, size } = state;
+    const { appearance, disabled, disabledFocusable, shape, size } = state;
+
+    const isDisabled = disabled || disabledFocusable;
 
     state.root.className = mergeClasses(
         buttonClassNames.root,
@@ -141,8 +188,8 @@ export const useButtonStyles = (state: ButtonState): ButtonState => {
         rootStyles[size],
         rootStyles[shape],
 
-        disabled && rootDisabledStyles.base,
-        appearance && disabled && rootDisabledStyles[appearance],
+        isDisabled && rootDisabledStyles.base,
+        appearance && isDisabled && rootDisabledStyles[appearance],
 
         state.root.className,
     );

package/src/index.ts

@@ -26,4 +26,7 @@ export type {
 } from './Components/Button/index.js';
 
 export * from './Types/compose/index.js';
-export * from './Types/utils/index.js';
+export * from './Types/utils/index.js';
+
+export { useARIAButtonProps } from './utilities/index.js';
+export type { ARIAButtonType, ARIAButtonProps, ARIAButtonResultProps } from './utilities/index.js';

package/src/utilities/index.ts

@@ -0,0 +1,2 @@
+export { useARIAButtonProps } from './useARIAButtonProps.js';
+export type { ARIAButtonType, ARIAButtonProps, ARIAButtonResultProps } from './useARIAButtonProps.js';

package/src/utilities/useARIAButtonProps.ts

@@ -0,0 +1,106 @@
+import type { HTMLAttributes, IntrinsicElementKeys } from '../Types/utils/types.js';
+
+export type ARIAButtonType = 'button' | 'a' | 'div';
+
+export type ARIAButtonProps<Tag extends ARIAButtonType = 'button'> = HTMLAttributes<HTMLElement> & {
+    disabled?: boolean;
+    disabledFocusable?: boolean;
+} & (Tag extends 'a' ? { href?: string } : {});
+
+export type ARIAButtonResultProps<Tag extends ARIAButtonType = 'button'> = HTMLAttributes<HTMLElement> & {
+    disabled?: Tag extends 'button' ? '' | undefined : never;
+    'aria-disabled'?: 'true';
+    role?: string;
+    tabIndex?: number;
+    href?: string;
+};
+
+const noop = () => { };
+
+export const useARIAButtonProps = <Tag extends ARIAButtonType>(
+    tag: Tag,
+    props: ARIAButtonProps<Tag> = {} as ARIAButtonProps<Tag>,
+): ARIAButtonResultProps<Tag> => {
+    const { disabled, disabledFocusable, onClick, onKeyDown, onKeyUp, ...rest } = props as ARIAButtonProps & { href?: string };
+
+    const isDisabled = disabled || disabledFocusable;
+
+    const handleClick = (e: MouseEvent) => {
+        if (isDisabled) {
+            e.preventDefault();
+            e.stopPropagation();
+            return;
+        }
+        onClick?.(e);
+    };
+
+    if (tag === 'button') {
+        const result = {
+            ...rest,
+            onClick: handleClick,
+            onKeyDown: isDisabled ? (e: KeyboardEvent) => {
+                e.preventDefault();
+                e.stopPropagation();
+            } : onKeyDown,
+            onKeyUp: isDisabled ? (e: KeyboardEvent) => {
+                e.preventDefault();
+                e.stopPropagation();
+            } : onKeyUp,
+        } as ARIAButtonResultProps<Tag>;
+
+        if (disabled && !disabledFocusable) {
+            (result as any).disabled = '';
+        } else if (disabledFocusable) {
+            result['aria-disabled'] = 'true';
+        }
+
+        return result;
+    }
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+        if (isDisabled) {
+            e.preventDefault();
+            e.stopPropagation();
+            return;
+        }
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            (e.target as HTMLElement)?.click();
+        }
+        onKeyDown?.(e);
+    };
+
+    const handleKeyUp = (e: KeyboardEvent) => {
+        if (isDisabled) {
+            e.preventDefault();
+            e.stopPropagation();
+            return;
+        }
+        if (e.key === ' ') {
+            e.preventDefault();
+            (e.target as HTMLElement)?.click();
+        }
+        onKeyUp?.(e);
+    };
+
+    const result: ARIAButtonResultProps<Tag> = {
+        ...rest,
+        role: 'button',
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
+        onKeyUp: handleKeyUp,
+    } as ARIAButtonResultProps<Tag>;
+
+    if (isDisabled) {
+        result['aria-disabled'] = 'true';
+        if (tag === 'a') {
+            delete (result as any).href;
+        }
+    }
+
+    if (!disabled || disabledFocusable) {
+        result.tabIndex = rest.tabIndex ?? 0;
+    }
+
+    return result;
+};