@mirohq/design-system-base-button 0.3.0-button.0 → 0.3.0-button.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/main.js +13 -6
- package/dist/main.js.map +1 -1
- package/dist/module.js +13 -6
- package/dist/module.js.map +1 -1
- package/package.json +1 -1
package/dist/main.js
CHANGED
|
@@ -35,6 +35,12 @@ const StyledBaseButton = designSystemStitches.styled(designSystemPrimitive.Primi
|
|
|
35
35
|
}
|
|
36
36
|
});
|
|
37
37
|
|
|
38
|
+
function eventHandler(callback, allowEvent) {
|
|
39
|
+
if (allowEvent) {
|
|
40
|
+
return void 0;
|
|
41
|
+
}
|
|
42
|
+
return callback;
|
|
43
|
+
}
|
|
38
44
|
const BaseButton = React__default["default"].forwardRef(
|
|
39
45
|
({
|
|
40
46
|
disabled = false,
|
|
@@ -60,13 +66,14 @@ const BaseButton = React__default["default"].forwardRef(
|
|
|
60
66
|
const asLink = href != null;
|
|
61
67
|
const ref = React.useRef(null);
|
|
62
68
|
const refWithFallback = forwardRef != null ? forwardRef : ref;
|
|
69
|
+
const allowPressEvents = ariaDisabled === "true" || ariaDisabled === true;
|
|
63
70
|
const commonProps = {
|
|
64
|
-
isDisabled: disabled
|
|
65
|
-
onPress: onPress != null ? onPress : onClick,
|
|
66
|
-
onPressStart,
|
|
67
|
-
onPressEnd,
|
|
68
|
-
onPressChange,
|
|
69
|
-
onFocusChange,
|
|
71
|
+
isDisabled: disabled,
|
|
72
|
+
onPress: eventHandler(onPress != null ? onPress : onClick, allowPressEvents),
|
|
73
|
+
onPressStart: eventHandler(onPressStart, allowPressEvents),
|
|
74
|
+
onPressEnd: eventHandler(onPressEnd, allowPressEvents),
|
|
75
|
+
onPressChange: eventHandler(onPressChange, allowPressEvents),
|
|
76
|
+
onFocusChange: eventHandler(onFocusChange, allowPressEvents),
|
|
70
77
|
onFocus,
|
|
71
78
|
onBlur
|
|
72
79
|
};
|
package/dist/main.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"main.js","sources":["../src/base-button.styled.ts","../src/base-button.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const sizes = {\n medium: '$8',\n large: '$10',\n xLarge: '$12',\n}\n\nexport const StyledBaseButton = styled(Primitive.button, {\n all: 'unset',\n display: 'inline-flex',\n alignItems: 'center',\n boxSizing: 'border-box',\n borderRadius: '$50',\n cursor: 'pointer',\n\n '&[disabled]': {\n pointerEvents: 'none',\n },\n\n '&[aria-disabled=\"true\"]': {\n cursor: 'default',\n },\n})\n\nexport type StyledBaseButtonProps = ComponentPropsWithRef<\n typeof StyledBaseButton\n>\n","import React, { useRef } from 'react'\nimport type { ElementRef, ReactNode } from 'react'\nimport { useButton } from '@react-aria/button'\nimport { useHover } from '@react-aria/interactions'\nimport { mergeProps } from '@react-aria/utils'\nimport { useLink } from '@react-aria/link'\nimport { useFocusRing } from '@react-aria/focus'\nimport type { HoverEvents, FocusEvents } from '@react-types/shared'\nimport type { AriaButtonProps } from '@react-types/button'\n\nimport { StyledBaseButton } from './base-button.styled'\nimport type { StyledBaseButtonProps } from './base-button.styled'\n\ntype ButtonPropsA11y = StyledBaseButtonProps & AriaButtonProps<'button'>\n\nexport interface BaseButtonProps\n extends FocusEvents,\n HoverEvents,\n Omit<\n ButtonPropsA11y,\n | 'onClick'\n | 'isDisabled'\n | 'elementType'\n | 'onBlur'\n | 'onFocus'\n | 'onPressUp'\n > {\n /**\n * The content\n */\n children: ReactNode\n\n /**\n * Prevent pointer events\n */\n disabled?: boolean\n\n /**\n * A URL to link when using the button as a link\n */\n href?: string\n\n /**\n * The target window using the button as a link\n */\n target?: string\n\n /**\n * The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel)\n */\n rel?: string\n\n /**\n * Alias for onPress\n */\n onClick?: AriaButtonProps['onPress']\n}\n\nexport const BaseButton = React.forwardRef<\n ElementRef<typeof StyledBaseButton>,\n BaseButtonProps\n>(\n (\n {\n disabled = false,\n 'aria-disabled': ariaDisabled,\n href,\n target,\n rel,\n children,\n onClick,\n asChild,\n onHoverStart,\n onHoverEnd,\n onHoverChange,\n onPress,\n onPressStart,\n onPressEnd,\n onPressChange,\n onFocus,\n onBlur,\n onFocusChange,\n ...restProps\n },\n forwardRef\n ) => {\n const asLink = href != null\n\n const ref = useRef<HTMLButtonElement | HTMLAnchorElement>(null)\n const refWithFallback = forwardRef ?? ref\n\n
|
|
1
|
+
{"version":3,"file":"main.js","sources":["../src/base-button.styled.ts","../src/base-button.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const sizes = {\n medium: '$8',\n large: '$10',\n xLarge: '$12',\n}\n\nexport const StyledBaseButton = styled(Primitive.button, {\n all: 'unset',\n display: 'inline-flex',\n alignItems: 'center',\n boxSizing: 'border-box',\n borderRadius: '$50',\n cursor: 'pointer',\n\n '&[disabled]': {\n pointerEvents: 'none',\n },\n\n '&[aria-disabled=\"true\"]': {\n cursor: 'default',\n },\n})\n\nexport type StyledBaseButtonProps = ComponentPropsWithRef<\n typeof StyledBaseButton\n>\n","import React, { useRef } from 'react'\nimport type { ElementRef, ReactNode } from 'react'\nimport { useButton } from '@react-aria/button'\nimport { useHover } from '@react-aria/interactions'\nimport { mergeProps } from '@react-aria/utils'\nimport { useLink } from '@react-aria/link'\nimport { useFocusRing } from '@react-aria/focus'\nimport type { HoverEvents, FocusEvents } from '@react-types/shared'\nimport type { AriaButtonProps } from '@react-types/button'\n\nimport { StyledBaseButton } from './base-button.styled'\nimport type { StyledBaseButtonProps } from './base-button.styled'\n\ntype ButtonPropsA11y = StyledBaseButtonProps & AriaButtonProps<'button'>\n\nexport interface BaseButtonProps\n extends FocusEvents,\n HoverEvents,\n Omit<\n ButtonPropsA11y,\n | 'onClick'\n | 'isDisabled'\n | 'elementType'\n | 'onBlur'\n | 'onFocus'\n | 'onPressUp'\n > {\n /**\n * The content\n */\n children: ReactNode\n\n /**\n * Prevent pointer events\n */\n disabled?: boolean\n\n /**\n * A URL to link when using the button as a link\n */\n href?: string\n\n /**\n * The target window using the button as a link\n */\n target?: string\n\n /**\n * The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel)\n */\n rel?: string\n\n /**\n * Alias for onPress\n */\n onClick?: AriaButtonProps['onPress']\n}\n\nfunction eventHandler<T>(\n callback: ((e: T) => void) | undefined,\n allowEvent: boolean\n): ((e: T) => void) | undefined {\n if (allowEvent) {\n return undefined\n }\n\n return callback\n}\n\nexport const BaseButton = React.forwardRef<\n ElementRef<typeof StyledBaseButton>,\n BaseButtonProps\n>(\n (\n {\n disabled = false,\n 'aria-disabled': ariaDisabled,\n href,\n target,\n rel,\n children,\n onClick,\n asChild,\n onHoverStart,\n onHoverEnd,\n onHoverChange,\n onPress,\n onPressStart,\n onPressEnd,\n onPressChange,\n onFocus,\n onBlur,\n onFocusChange,\n ...restProps\n },\n forwardRef\n ) => {\n const asLink = href != null\n\n const ref = useRef<HTMLButtonElement | HTMLAnchorElement>(null)\n const refWithFallback = forwardRef ?? ref\n\n // we cannot rely on useButton with ariaDisabled, because it doesn't support onFocus when isDisabled\n const allowPressEvents = ariaDisabled === 'true' || ariaDisabled === true\n\n const commonProps = {\n isDisabled: disabled,\n onPress: eventHandler(onPress ?? onClick, allowPressEvents),\n onPressStart: eventHandler(onPressStart, allowPressEvents),\n onPressEnd: eventHandler(onPressEnd, allowPressEvents),\n onPressChange: eventHandler(onPressChange, allowPressEvents),\n onFocusChange: eventHandler(onFocusChange, allowPressEvents),\n onFocus,\n onBlur,\n }\n\n const { buttonProps, isPressed } = useButton(\n {\n href,\n // @ts-expect-error\n allowFocusWhenDisabled: false,\n ...commonProps,\n ...restProps,\n },\n refWithFallback\n )\n\n const { linkProps } = useLink(\n { ...commonProps, ...restProps },\n // @ts-expect-error\n refWithFallback\n )\n const tabIndexProp = disabled && {\n tabIndex: -1,\n }\n\n const { isFocusVisible, focusProps: focusPropsRing } = useFocusRing()\n\n const { hoverProps, isHovered } = useHover({\n onHoverStart: e => onHoverStart?.(e),\n onHoverEnd: e => onHoverEnd?.(e),\n onHoverChange: e => onHoverChange?.(e),\n })\n\n const elementProps = mergeProps(\n restProps,\n asLink ? linkProps : buttonProps,\n hoverProps,\n focusPropsRing\n )\n\n return (\n <StyledBaseButton\n {...elementProps}\n disabled={disabled}\n asChild={asLink || asChild}\n {...tabIndexProp}\n data-pressed={isPressed ? '' : undefined}\n data-focused={isFocusVisible ? '' : undefined}\n data-hovered={isHovered ? '' : undefined}\n aria-disabled={ariaDisabled}\n // @ts-expect-error\n ref={refWithFallback}\n >\n {asLink ? (\n <a\n href={href}\n target={target}\n rel={target === '_blank' ? `noopener noreferrer ${rel}` : rel}\n >\n {children}\n </a>\n ) : (\n children\n )}\n </StyledBaseButton>\n )\n }\n)\n"],"names":["styled","Primitive","React","useRef","useButton","useLink","useFocusRing","useHover","mergeProps"],"mappings":"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"}
|
package/dist/module.js
CHANGED
|
@@ -27,6 +27,12 @@ const StyledBaseButton = styled(Primitive.button, {
|
|
|
27
27
|
}
|
|
28
28
|
});
|
|
29
29
|
|
|
30
|
+
function eventHandler(callback, allowEvent) {
|
|
31
|
+
if (allowEvent) {
|
|
32
|
+
return void 0;
|
|
33
|
+
}
|
|
34
|
+
return callback;
|
|
35
|
+
}
|
|
30
36
|
const BaseButton = React.forwardRef(
|
|
31
37
|
({
|
|
32
38
|
disabled = false,
|
|
@@ -52,13 +58,14 @@ const BaseButton = React.forwardRef(
|
|
|
52
58
|
const asLink = href != null;
|
|
53
59
|
const ref = useRef(null);
|
|
54
60
|
const refWithFallback = forwardRef != null ? forwardRef : ref;
|
|
61
|
+
const allowPressEvents = ariaDisabled === "true" || ariaDisabled === true;
|
|
55
62
|
const commonProps = {
|
|
56
|
-
isDisabled: disabled
|
|
57
|
-
onPress: onPress != null ? onPress : onClick,
|
|
58
|
-
onPressStart,
|
|
59
|
-
onPressEnd,
|
|
60
|
-
onPressChange,
|
|
61
|
-
onFocusChange,
|
|
63
|
+
isDisabled: disabled,
|
|
64
|
+
onPress: eventHandler(onPress != null ? onPress : onClick, allowPressEvents),
|
|
65
|
+
onPressStart: eventHandler(onPressStart, allowPressEvents),
|
|
66
|
+
onPressEnd: eventHandler(onPressEnd, allowPressEvents),
|
|
67
|
+
onPressChange: eventHandler(onPressChange, allowPressEvents),
|
|
68
|
+
onFocusChange: eventHandler(onFocusChange, allowPressEvents),
|
|
62
69
|
onFocus,
|
|
63
70
|
onBlur
|
|
64
71
|
};
|
package/dist/module.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"module.js","sources":["../src/base-button.styled.ts","../src/base-button.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const sizes = {\n medium: '$8',\n large: '$10',\n xLarge: '$12',\n}\n\nexport const StyledBaseButton = styled(Primitive.button, {\n all: 'unset',\n display: 'inline-flex',\n alignItems: 'center',\n boxSizing: 'border-box',\n borderRadius: '$50',\n cursor: 'pointer',\n\n '&[disabled]': {\n pointerEvents: 'none',\n },\n\n '&[aria-disabled=\"true\"]': {\n cursor: 'default',\n },\n})\n\nexport type StyledBaseButtonProps = ComponentPropsWithRef<\n typeof StyledBaseButton\n>\n","import React, { useRef } from 'react'\nimport type { ElementRef, ReactNode } from 'react'\nimport { useButton } from '@react-aria/button'\nimport { useHover } from '@react-aria/interactions'\nimport { mergeProps } from '@react-aria/utils'\nimport { useLink } from '@react-aria/link'\nimport { useFocusRing } from '@react-aria/focus'\nimport type { HoverEvents, FocusEvents } from '@react-types/shared'\nimport type { AriaButtonProps } from '@react-types/button'\n\nimport { StyledBaseButton } from './base-button.styled'\nimport type { StyledBaseButtonProps } from './base-button.styled'\n\ntype ButtonPropsA11y = StyledBaseButtonProps & AriaButtonProps<'button'>\n\nexport interface BaseButtonProps\n extends FocusEvents,\n HoverEvents,\n Omit<\n ButtonPropsA11y,\n | 'onClick'\n | 'isDisabled'\n | 'elementType'\n | 'onBlur'\n | 'onFocus'\n | 'onPressUp'\n > {\n /**\n * The content\n */\n children: ReactNode\n\n /**\n * Prevent pointer events\n */\n disabled?: boolean\n\n /**\n * A URL to link when using the button as a link\n */\n href?: string\n\n /**\n * The target window using the button as a link\n */\n target?: string\n\n /**\n * The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel)\n */\n rel?: string\n\n /**\n * Alias for onPress\n */\n onClick?: AriaButtonProps['onPress']\n}\n\nexport const BaseButton = React.forwardRef<\n ElementRef<typeof StyledBaseButton>,\n BaseButtonProps\n>(\n (\n {\n disabled = false,\n 'aria-disabled': ariaDisabled,\n href,\n target,\n rel,\n children,\n onClick,\n asChild,\n onHoverStart,\n onHoverEnd,\n onHoverChange,\n onPress,\n onPressStart,\n onPressEnd,\n onPressChange,\n onFocus,\n onBlur,\n onFocusChange,\n ...restProps\n },\n forwardRef\n ) => {\n const asLink = href != null\n\n const ref = useRef<HTMLButtonElement | HTMLAnchorElement>(null)\n const refWithFallback = forwardRef ?? ref\n\n
|
|
1
|
+
{"version":3,"file":"module.js","sources":["../src/base-button.styled.ts","../src/base-button.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const sizes = {\n medium: '$8',\n large: '$10',\n xLarge: '$12',\n}\n\nexport const StyledBaseButton = styled(Primitive.button, {\n all: 'unset',\n display: 'inline-flex',\n alignItems: 'center',\n boxSizing: 'border-box',\n borderRadius: '$50',\n cursor: 'pointer',\n\n '&[disabled]': {\n pointerEvents: 'none',\n },\n\n '&[aria-disabled=\"true\"]': {\n cursor: 'default',\n },\n})\n\nexport type StyledBaseButtonProps = ComponentPropsWithRef<\n typeof StyledBaseButton\n>\n","import React, { useRef } from 'react'\nimport type { ElementRef, ReactNode } from 'react'\nimport { useButton } from '@react-aria/button'\nimport { useHover } from '@react-aria/interactions'\nimport { mergeProps } from '@react-aria/utils'\nimport { useLink } from '@react-aria/link'\nimport { useFocusRing } from '@react-aria/focus'\nimport type { HoverEvents, FocusEvents } from '@react-types/shared'\nimport type { AriaButtonProps } from '@react-types/button'\n\nimport { StyledBaseButton } from './base-button.styled'\nimport type { StyledBaseButtonProps } from './base-button.styled'\n\ntype ButtonPropsA11y = StyledBaseButtonProps & AriaButtonProps<'button'>\n\nexport interface BaseButtonProps\n extends FocusEvents,\n HoverEvents,\n Omit<\n ButtonPropsA11y,\n | 'onClick'\n | 'isDisabled'\n | 'elementType'\n | 'onBlur'\n | 'onFocus'\n | 'onPressUp'\n > {\n /**\n * The content\n */\n children: ReactNode\n\n /**\n * Prevent pointer events\n */\n disabled?: boolean\n\n /**\n * A URL to link when using the button as a link\n */\n href?: string\n\n /**\n * The target window using the button as a link\n */\n target?: string\n\n /**\n * The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel)\n */\n rel?: string\n\n /**\n * Alias for onPress\n */\n onClick?: AriaButtonProps['onPress']\n}\n\nfunction eventHandler<T>(\n callback: ((e: T) => void) | undefined,\n allowEvent: boolean\n): ((e: T) => void) | undefined {\n if (allowEvent) {\n return undefined\n }\n\n return callback\n}\n\nexport const BaseButton = React.forwardRef<\n ElementRef<typeof StyledBaseButton>,\n BaseButtonProps\n>(\n (\n {\n disabled = false,\n 'aria-disabled': ariaDisabled,\n href,\n target,\n rel,\n children,\n onClick,\n asChild,\n onHoverStart,\n onHoverEnd,\n onHoverChange,\n onPress,\n onPressStart,\n onPressEnd,\n onPressChange,\n onFocus,\n onBlur,\n onFocusChange,\n ...restProps\n },\n forwardRef\n ) => {\n const asLink = href != null\n\n const ref = useRef<HTMLButtonElement | HTMLAnchorElement>(null)\n const refWithFallback = forwardRef ?? ref\n\n // we cannot rely on useButton with ariaDisabled, because it doesn't support onFocus when isDisabled\n const allowPressEvents = ariaDisabled === 'true' || ariaDisabled === true\n\n const commonProps = {\n isDisabled: disabled,\n onPress: eventHandler(onPress ?? onClick, allowPressEvents),\n onPressStart: eventHandler(onPressStart, allowPressEvents),\n onPressEnd: eventHandler(onPressEnd, allowPressEvents),\n onPressChange: eventHandler(onPressChange, allowPressEvents),\n onFocusChange: eventHandler(onFocusChange, allowPressEvents),\n onFocus,\n onBlur,\n }\n\n const { buttonProps, isPressed } = useButton(\n {\n href,\n // @ts-expect-error\n allowFocusWhenDisabled: false,\n ...commonProps,\n ...restProps,\n },\n refWithFallback\n )\n\n const { linkProps } = useLink(\n { ...commonProps, ...restProps },\n // @ts-expect-error\n refWithFallback\n )\n const tabIndexProp = disabled && {\n tabIndex: -1,\n }\n\n const { isFocusVisible, focusProps: focusPropsRing } = useFocusRing()\n\n const { hoverProps, isHovered } = useHover({\n onHoverStart: e => onHoverStart?.(e),\n onHoverEnd: e => onHoverEnd?.(e),\n onHoverChange: e => onHoverChange?.(e),\n })\n\n const elementProps = mergeProps(\n restProps,\n asLink ? linkProps : buttonProps,\n hoverProps,\n focusPropsRing\n )\n\n return (\n <StyledBaseButton\n {...elementProps}\n disabled={disabled}\n asChild={asLink || asChild}\n {...tabIndexProp}\n data-pressed={isPressed ? '' : undefined}\n data-focused={isFocusVisible ? '' : undefined}\n data-hovered={isHovered ? '' : undefined}\n aria-disabled={ariaDisabled}\n // @ts-expect-error\n ref={refWithFallback}\n >\n {asLink ? (\n <a\n href={href}\n target={target}\n rel={target === '_blank' ? `noopener noreferrer ${rel}` : rel}\n >\n {children}\n </a>\n ) : (\n children\n )}\n </StyledBaseButton>\n )\n }\n)\n"],"names":[],"mappings":"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"}
|