@mirohq/design-system-base-button 0.4.40 → 0.4.42
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 +8 -2
- package/dist/main.js.map +1 -1
- package/dist/module.js +8 -2
- package/dist/module.js.map +1 -1
- package/dist/types.d.ts +1 -0
- package/package.json +5 -5
package/dist/main.js
CHANGED
|
@@ -129,16 +129,22 @@ const BaseButton = React__default["default"].forwardRef(
|
|
|
129
129
|
if (relProp === "") {
|
|
130
130
|
relProp = void 0;
|
|
131
131
|
}
|
|
132
|
+
const tabIndexProps = typeof tabIndex === "number" ? {
|
|
133
|
+
tabIndex
|
|
134
|
+
} : {};
|
|
135
|
+
if (disabled && (asLink || asChild === true)) {
|
|
136
|
+
tabIndexProps.tabIndex = -1;
|
|
137
|
+
}
|
|
132
138
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
133
139
|
StyledBaseButton,
|
|
134
140
|
{
|
|
135
141
|
...elementProps,
|
|
136
|
-
|
|
142
|
+
...tabIndexProps,
|
|
143
|
+
"data-hovered": isHovered ? "" : elementProps["data-hovered"],
|
|
137
144
|
asChild: asLink || asChild,
|
|
138
145
|
disabled,
|
|
139
146
|
role: role != null ? role : asChild === true ? "button" : void 0,
|
|
140
147
|
"aria-disabled": designSystemUtils.booleanify(ariaDisabled) ? "true" : ariaDisabled,
|
|
141
|
-
tabIndex: disabled && (asLink || asChild === true) ? -1 : tabIndex,
|
|
142
148
|
ref: forwardRef,
|
|
143
149
|
children: asLink ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
144
150
|
designSystemPrimitive.Primitive.a,
|
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]': {\n cursor: 'default',\n },\n})\n\nexport type StyledBaseButtonProps = ComponentPropsWithRef<\n typeof StyledBaseButton\n>\n","import React from 'react'\nimport type { ElementRef, AnchorHTMLAttributes } from 'react'\nimport { mergeProps } from '@react-aria/utils'\nimport { booleanify, removeEventProps } from '@mirohq/design-system-utils'\nimport { useHover } from '@react-aria/interactions'\nimport type { HoverEvents } from '@react-types/shared'\nimport { usePress } from '@mirohq/design-system-use-press'\nimport type { PressProps } from '@mirohq/design-system-use-press'\nimport type { DOMEventAttributes } from '@mirohq/design-system-types'\nimport { Primitive } from '@mirohq/design-system-primitive'\n\nimport { StyledBaseButton } from './base-button.styled'\nimport type { StyledBaseButtonProps } from './base-button.styled'\n\n// DO NOT export it in the index\n// Fix TS2742, option 3.1 in the comment bellow\n// https://github.com/microsoft/TypeScript/issues/47663#issuecomment-1519138189\nexport type { HoverEvents } from '@react-types/shared'\n\ntype AsButtonProps = StyledBaseButtonProps & PressProps & HoverEvents\ntype AsLinkProps = AsButtonProps & AnchorHTMLAttributes<'a'> & { href: string }\n\nexport type BaseButtonProps = AsButtonProps | AsLinkProps\n\nconst ariaDisabledEventExceptions: Array<\n keyof DOMEventAttributes<'button' | 'a'>\n> = [\n 'onAnimationEnd',\n 'onAnimationEndCapture',\n 'onAnimationIteration',\n 'onAnimationIterationCapture',\n 'onAnimationStartCapture',\n 'onBlur',\n 'onBlurCapture',\n 'onDragEnter',\n 'onDragEnterCapture',\n 'onDragExit',\n 'onDragExitCapture',\n 'onDragLeave',\n 'onDragLeave',\n 'onDragLeaveCapture',\n 'onDragLeaveCapture',\n 'onDragOver',\n 'onDragOver',\n 'onDragOverCapture',\n 'onDragOverCapture',\n 'onFocus',\n 'onFocusCapture',\n 'onGotPointerCapture',\n 'onGotPointerCaptureCapture',\n 'onLostPointerCapture',\n 'onLostPointerCaptureCapture',\n 'onMouseEnter',\n 'onMouseLeave',\n 'onMouseMove',\n 'onMouseMoveCapture',\n 'onMouseOut',\n 'onMouseOutCapture',\n 'onMouseOver',\n 'onMouseOverCapture',\n 'onPointerEnter',\n 'onPointerEnterCapture',\n 'onPointerLeave',\n 'onPointerLeaveCapture',\n 'onPointerMove',\n 'onPointerMoveCapture',\n 'onPointerOut',\n 'onPointerOutCapture',\n 'onPointerOver',\n 'onPointerOverCapture',\n 'onTouchMove',\n 'onTouchMoveCapture',\n 'onTransitionEnd',\n 'onTransitionEndCapture',\n 'onWheel',\n 'onWheelCapture',\n]\n\nexport const BaseButton = React.forwardRef<\n ElementRef<'button' | 'a'>,\n BaseButtonProps\n>(\n (\n {\n disabled = false,\n 'aria-disabled': ariaDisabled,\n children,\n asChild,\n role,\n onHoverStart,\n onHoverEnd,\n onHoverChange,\n tabIndex,\n ...restProps\n },\n forwardRef\n ) => {\n const asLink = 'href' in restProps\n const { href, target, rel = '' } = restProps as AsLinkProps\n\n let elementProps = restProps\n\n if (booleanify(ariaDisabled)) {\n elementProps = removeEventProps(elementProps, ariaDisabledEventExceptions)\n }\n\n const { pressProps } = usePress({\n preventFocusOnPress: true,\n disabled: disabled || booleanify(ariaDisabled),\n ...elementProps,\n })\n\n const { hoverProps, isHovered } = useHover({\n onHoverStart,\n onHoverEnd,\n onHoverChange,\n })\n\n elementProps = mergeProps(pressProps, hoverProps)\n\n let relProp: string | undefined = rel\n\n if (asLink && target === '_blank') {\n if (!relProp.includes('noreferrer')) {\n relProp = `noreferrer ${relProp}`\n }\n\n if (!relProp.includes('noopener')) {\n relProp = `noopener ${relProp}`\n }\n\n relProp = relProp.trim()\n }\n\n if (relProp === '') {\n relProp = undefined\n }\n\n return (\n <StyledBaseButton\n {...elementProps}\n data-hovered={isHovered ? '' :
|
|
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]': {\n cursor: 'default',\n },\n})\n\nexport type StyledBaseButtonProps = ComponentPropsWithRef<\n typeof StyledBaseButton\n>\n","import React from 'react'\nimport type { ElementRef, AnchorHTMLAttributes } from 'react'\nimport { mergeProps } from '@react-aria/utils'\nimport { booleanify, removeEventProps } from '@mirohq/design-system-utils'\nimport { useHover } from '@react-aria/interactions'\nimport type { HoverEvents } from '@react-types/shared'\nimport { usePress } from '@mirohq/design-system-use-press'\nimport type { PressProps } from '@mirohq/design-system-use-press'\nimport type { DOMEventAttributes } from '@mirohq/design-system-types'\nimport { Primitive } from '@mirohq/design-system-primitive'\n\nimport { StyledBaseButton } from './base-button.styled'\nimport type { StyledBaseButtonProps } from './base-button.styled'\n\n// DO NOT export it in the index\n// Fix TS2742, option 3.1 in the comment bellow\n// https://github.com/microsoft/TypeScript/issues/47663#issuecomment-1519138189\nexport type { HoverEvents } from '@react-types/shared'\n\ntype AsButtonProps = StyledBaseButtonProps & PressProps & HoverEvents\ntype AsLinkProps = AsButtonProps & AnchorHTMLAttributes<'a'> & { href: string }\n\nexport type BaseButtonProps = AsButtonProps | AsLinkProps\n\nconst ariaDisabledEventExceptions: Array<\n keyof DOMEventAttributes<'button' | 'a'>\n> = [\n 'onAnimationEnd',\n 'onAnimationEndCapture',\n 'onAnimationIteration',\n 'onAnimationIterationCapture',\n 'onAnimationStartCapture',\n 'onBlur',\n 'onBlurCapture',\n 'onDragEnter',\n 'onDragEnterCapture',\n 'onDragExit',\n 'onDragExitCapture',\n 'onDragLeave',\n 'onDragLeave',\n 'onDragLeaveCapture',\n 'onDragLeaveCapture',\n 'onDragOver',\n 'onDragOver',\n 'onDragOverCapture',\n 'onDragOverCapture',\n 'onFocus',\n 'onFocusCapture',\n 'onGotPointerCapture',\n 'onGotPointerCaptureCapture',\n 'onLostPointerCapture',\n 'onLostPointerCaptureCapture',\n 'onMouseEnter',\n 'onMouseLeave',\n 'onMouseMove',\n 'onMouseMoveCapture',\n 'onMouseOut',\n 'onMouseOutCapture',\n 'onMouseOver',\n 'onMouseOverCapture',\n 'onPointerEnter',\n 'onPointerEnterCapture',\n 'onPointerLeave',\n 'onPointerLeaveCapture',\n 'onPointerMove',\n 'onPointerMoveCapture',\n 'onPointerOut',\n 'onPointerOutCapture',\n 'onPointerOver',\n 'onPointerOverCapture',\n 'onTouchMove',\n 'onTouchMoveCapture',\n 'onTransitionEnd',\n 'onTransitionEndCapture',\n 'onWheel',\n 'onWheelCapture',\n]\n\nexport const BaseButton = React.forwardRef<\n ElementRef<'button' | 'a'>,\n BaseButtonProps\n>(\n (\n {\n disabled = false,\n 'aria-disabled': ariaDisabled,\n children,\n asChild,\n role,\n onHoverStart,\n onHoverEnd,\n onHoverChange,\n tabIndex,\n ...restProps\n },\n forwardRef\n ) => {\n const asLink = 'href' in restProps\n const { href, target, rel = '' } = restProps as AsLinkProps\n\n let elementProps = restProps\n\n if (booleanify(ariaDisabled)) {\n elementProps = removeEventProps(elementProps, ariaDisabledEventExceptions)\n }\n\n const { pressProps } = usePress({\n preventFocusOnPress: true,\n disabled: disabled || booleanify(ariaDisabled),\n ...elementProps,\n })\n\n const { hoverProps, isHovered } = useHover({\n onHoverStart,\n onHoverEnd,\n onHoverChange,\n })\n\n elementProps = mergeProps(pressProps, hoverProps)\n\n let relProp: string | undefined = rel\n\n if (asLink && target === '_blank') {\n if (!relProp.includes('noreferrer')) {\n relProp = `noreferrer ${relProp}`\n }\n\n if (!relProp.includes('noopener')) {\n relProp = `noopener ${relProp}`\n }\n\n relProp = relProp.trim()\n }\n\n if (relProp === '') {\n relProp = undefined\n }\n\n const tabIndexProps =\n typeof tabIndex === 'number'\n ? {\n tabIndex,\n }\n : {}\n\n if (disabled && (asLink || asChild === true)) {\n tabIndexProps.tabIndex = -1\n }\n\n return (\n <StyledBaseButton\n {...elementProps}\n {...tabIndexProps}\n data-hovered={isHovered ? '' : (elementProps as any)['data-hovered']}\n asChild={asLink || asChild}\n disabled={disabled}\n role={role ?? (asChild === true ? 'button' : undefined)}\n aria-disabled={booleanify(ariaDisabled) ? 'true' : ariaDisabled}\n // Button can be an <a> but TS will never know because it will only happen in runtime via asChild\n // @ts-expect-error\n ref={forwardRef}\n >\n {asLink ? (\n <Primitive.a\n href={href}\n target={target}\n rel={relProp}\n asChild={asChild}\n >\n {children}\n </Primitive.a>\n ) : (\n children\n )}\n </StyledBaseButton>\n )\n }\n)\n"],"names":["styled","Primitive","React","booleanify","removeEventProps","usePress","useHover","mergeProps","jsx"],"mappings":"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"}
|
package/dist/module.js
CHANGED
|
@@ -121,16 +121,22 @@ const BaseButton = React.forwardRef(
|
|
|
121
121
|
if (relProp === "") {
|
|
122
122
|
relProp = void 0;
|
|
123
123
|
}
|
|
124
|
+
const tabIndexProps = typeof tabIndex === "number" ? {
|
|
125
|
+
tabIndex
|
|
126
|
+
} : {};
|
|
127
|
+
if (disabled && (asLink || asChild === true)) {
|
|
128
|
+
tabIndexProps.tabIndex = -1;
|
|
129
|
+
}
|
|
124
130
|
return /* @__PURE__ */ jsx(
|
|
125
131
|
StyledBaseButton,
|
|
126
132
|
{
|
|
127
133
|
...elementProps,
|
|
128
|
-
|
|
134
|
+
...tabIndexProps,
|
|
135
|
+
"data-hovered": isHovered ? "" : elementProps["data-hovered"],
|
|
129
136
|
asChild: asLink || asChild,
|
|
130
137
|
disabled,
|
|
131
138
|
role: role != null ? role : asChild === true ? "button" : void 0,
|
|
132
139
|
"aria-disabled": booleanify(ariaDisabled) ? "true" : ariaDisabled,
|
|
133
|
-
tabIndex: disabled && (asLink || asChild === true) ? -1 : tabIndex,
|
|
134
140
|
ref: forwardRef,
|
|
135
141
|
children: asLink ? /* @__PURE__ */ jsx(
|
|
136
142
|
Primitive.a,
|
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]': {\n cursor: 'default',\n },\n})\n\nexport type StyledBaseButtonProps = ComponentPropsWithRef<\n typeof StyledBaseButton\n>\n","import React from 'react'\nimport type { ElementRef, AnchorHTMLAttributes } from 'react'\nimport { mergeProps } from '@react-aria/utils'\nimport { booleanify, removeEventProps } from '@mirohq/design-system-utils'\nimport { useHover } from '@react-aria/interactions'\nimport type { HoverEvents } from '@react-types/shared'\nimport { usePress } from '@mirohq/design-system-use-press'\nimport type { PressProps } from '@mirohq/design-system-use-press'\nimport type { DOMEventAttributes } from '@mirohq/design-system-types'\nimport { Primitive } from '@mirohq/design-system-primitive'\n\nimport { StyledBaseButton } from './base-button.styled'\nimport type { StyledBaseButtonProps } from './base-button.styled'\n\n// DO NOT export it in the index\n// Fix TS2742, option 3.1 in the comment bellow\n// https://github.com/microsoft/TypeScript/issues/47663#issuecomment-1519138189\nexport type { HoverEvents } from '@react-types/shared'\n\ntype AsButtonProps = StyledBaseButtonProps & PressProps & HoverEvents\ntype AsLinkProps = AsButtonProps & AnchorHTMLAttributes<'a'> & { href: string }\n\nexport type BaseButtonProps = AsButtonProps | AsLinkProps\n\nconst ariaDisabledEventExceptions: Array<\n keyof DOMEventAttributes<'button' | 'a'>\n> = [\n 'onAnimationEnd',\n 'onAnimationEndCapture',\n 'onAnimationIteration',\n 'onAnimationIterationCapture',\n 'onAnimationStartCapture',\n 'onBlur',\n 'onBlurCapture',\n 'onDragEnter',\n 'onDragEnterCapture',\n 'onDragExit',\n 'onDragExitCapture',\n 'onDragLeave',\n 'onDragLeave',\n 'onDragLeaveCapture',\n 'onDragLeaveCapture',\n 'onDragOver',\n 'onDragOver',\n 'onDragOverCapture',\n 'onDragOverCapture',\n 'onFocus',\n 'onFocusCapture',\n 'onGotPointerCapture',\n 'onGotPointerCaptureCapture',\n 'onLostPointerCapture',\n 'onLostPointerCaptureCapture',\n 'onMouseEnter',\n 'onMouseLeave',\n 'onMouseMove',\n 'onMouseMoveCapture',\n 'onMouseOut',\n 'onMouseOutCapture',\n 'onMouseOver',\n 'onMouseOverCapture',\n 'onPointerEnter',\n 'onPointerEnterCapture',\n 'onPointerLeave',\n 'onPointerLeaveCapture',\n 'onPointerMove',\n 'onPointerMoveCapture',\n 'onPointerOut',\n 'onPointerOutCapture',\n 'onPointerOver',\n 'onPointerOverCapture',\n 'onTouchMove',\n 'onTouchMoveCapture',\n 'onTransitionEnd',\n 'onTransitionEndCapture',\n 'onWheel',\n 'onWheelCapture',\n]\n\nexport const BaseButton = React.forwardRef<\n ElementRef<'button' | 'a'>,\n BaseButtonProps\n>(\n (\n {\n disabled = false,\n 'aria-disabled': ariaDisabled,\n children,\n asChild,\n role,\n onHoverStart,\n onHoverEnd,\n onHoverChange,\n tabIndex,\n ...restProps\n },\n forwardRef\n ) => {\n const asLink = 'href' in restProps\n const { href, target, rel = '' } = restProps as AsLinkProps\n\n let elementProps = restProps\n\n if (booleanify(ariaDisabled)) {\n elementProps = removeEventProps(elementProps, ariaDisabledEventExceptions)\n }\n\n const { pressProps } = usePress({\n preventFocusOnPress: true,\n disabled: disabled || booleanify(ariaDisabled),\n ...elementProps,\n })\n\n const { hoverProps, isHovered } = useHover({\n onHoverStart,\n onHoverEnd,\n onHoverChange,\n })\n\n elementProps = mergeProps(pressProps, hoverProps)\n\n let relProp: string | undefined = rel\n\n if (asLink && target === '_blank') {\n if (!relProp.includes('noreferrer')) {\n relProp = `noreferrer ${relProp}`\n }\n\n if (!relProp.includes('noopener')) {\n relProp = `noopener ${relProp}`\n }\n\n relProp = relProp.trim()\n }\n\n if (relProp === '') {\n relProp = undefined\n }\n\n return (\n <StyledBaseButton\n {...elementProps}\n data-hovered={isHovered ? '' :
|
|
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]': {\n cursor: 'default',\n },\n})\n\nexport type StyledBaseButtonProps = ComponentPropsWithRef<\n typeof StyledBaseButton\n>\n","import React from 'react'\nimport type { ElementRef, AnchorHTMLAttributes } from 'react'\nimport { mergeProps } from '@react-aria/utils'\nimport { booleanify, removeEventProps } from '@mirohq/design-system-utils'\nimport { useHover } from '@react-aria/interactions'\nimport type { HoverEvents } from '@react-types/shared'\nimport { usePress } from '@mirohq/design-system-use-press'\nimport type { PressProps } from '@mirohq/design-system-use-press'\nimport type { DOMEventAttributes } from '@mirohq/design-system-types'\nimport { Primitive } from '@mirohq/design-system-primitive'\n\nimport { StyledBaseButton } from './base-button.styled'\nimport type { StyledBaseButtonProps } from './base-button.styled'\n\n// DO NOT export it in the index\n// Fix TS2742, option 3.1 in the comment bellow\n// https://github.com/microsoft/TypeScript/issues/47663#issuecomment-1519138189\nexport type { HoverEvents } from '@react-types/shared'\n\ntype AsButtonProps = StyledBaseButtonProps & PressProps & HoverEvents\ntype AsLinkProps = AsButtonProps & AnchorHTMLAttributes<'a'> & { href: string }\n\nexport type BaseButtonProps = AsButtonProps | AsLinkProps\n\nconst ariaDisabledEventExceptions: Array<\n keyof DOMEventAttributes<'button' | 'a'>\n> = [\n 'onAnimationEnd',\n 'onAnimationEndCapture',\n 'onAnimationIteration',\n 'onAnimationIterationCapture',\n 'onAnimationStartCapture',\n 'onBlur',\n 'onBlurCapture',\n 'onDragEnter',\n 'onDragEnterCapture',\n 'onDragExit',\n 'onDragExitCapture',\n 'onDragLeave',\n 'onDragLeave',\n 'onDragLeaveCapture',\n 'onDragLeaveCapture',\n 'onDragOver',\n 'onDragOver',\n 'onDragOverCapture',\n 'onDragOverCapture',\n 'onFocus',\n 'onFocusCapture',\n 'onGotPointerCapture',\n 'onGotPointerCaptureCapture',\n 'onLostPointerCapture',\n 'onLostPointerCaptureCapture',\n 'onMouseEnter',\n 'onMouseLeave',\n 'onMouseMove',\n 'onMouseMoveCapture',\n 'onMouseOut',\n 'onMouseOutCapture',\n 'onMouseOver',\n 'onMouseOverCapture',\n 'onPointerEnter',\n 'onPointerEnterCapture',\n 'onPointerLeave',\n 'onPointerLeaveCapture',\n 'onPointerMove',\n 'onPointerMoveCapture',\n 'onPointerOut',\n 'onPointerOutCapture',\n 'onPointerOver',\n 'onPointerOverCapture',\n 'onTouchMove',\n 'onTouchMoveCapture',\n 'onTransitionEnd',\n 'onTransitionEndCapture',\n 'onWheel',\n 'onWheelCapture',\n]\n\nexport const BaseButton = React.forwardRef<\n ElementRef<'button' | 'a'>,\n BaseButtonProps\n>(\n (\n {\n disabled = false,\n 'aria-disabled': ariaDisabled,\n children,\n asChild,\n role,\n onHoverStart,\n onHoverEnd,\n onHoverChange,\n tabIndex,\n ...restProps\n },\n forwardRef\n ) => {\n const asLink = 'href' in restProps\n const { href, target, rel = '' } = restProps as AsLinkProps\n\n let elementProps = restProps\n\n if (booleanify(ariaDisabled)) {\n elementProps = removeEventProps(elementProps, ariaDisabledEventExceptions)\n }\n\n const { pressProps } = usePress({\n preventFocusOnPress: true,\n disabled: disabled || booleanify(ariaDisabled),\n ...elementProps,\n })\n\n const { hoverProps, isHovered } = useHover({\n onHoverStart,\n onHoverEnd,\n onHoverChange,\n })\n\n elementProps = mergeProps(pressProps, hoverProps)\n\n let relProp: string | undefined = rel\n\n if (asLink && target === '_blank') {\n if (!relProp.includes('noreferrer')) {\n relProp = `noreferrer ${relProp}`\n }\n\n if (!relProp.includes('noopener')) {\n relProp = `noopener ${relProp}`\n }\n\n relProp = relProp.trim()\n }\n\n if (relProp === '') {\n relProp = undefined\n }\n\n const tabIndexProps =\n typeof tabIndex === 'number'\n ? {\n tabIndex,\n }\n : {}\n\n if (disabled && (asLink || asChild === true)) {\n tabIndexProps.tabIndex = -1\n }\n\n return (\n <StyledBaseButton\n {...elementProps}\n {...tabIndexProps}\n data-hovered={isHovered ? '' : (elementProps as any)['data-hovered']}\n asChild={asLink || asChild}\n disabled={disabled}\n role={role ?? (asChild === true ? 'button' : undefined)}\n aria-disabled={booleanify(ariaDisabled) ? 'true' : ariaDisabled}\n // Button can be an <a> but TS will never know because it will only happen in runtime via asChild\n // @ts-expect-error\n ref={forwardRef}\n >\n {asLink ? (\n <Primitive.a\n href={href}\n target={target}\n rel={relProp}\n asChild={asChild}\n >\n {children}\n </Primitive.a>\n ) : (\n children\n )}\n </StyledBaseButton>\n )\n }\n)\n"],"names":[],"mappings":";;;;;;;;;AAIO,MAAM,KAAQ,GAAA;AAAA,EACnB,MAAQ,EAAA,IAAA;AAAA,EACR,KAAO,EAAA,KAAA;AAAA,EACP,MAAQ,EAAA,KAAA;AACV,EAAA;AAEa,MAAA,gBAAA,GAAmB,MAAO,CAAA,SAAA,CAAU,MAAQ,EAAA;AAAA,EACvD,GAAK,EAAA,OAAA;AAAA,EACL,OAAS,EAAA,aAAA;AAAA,EACT,UAAY,EAAA,QAAA;AAAA,EACZ,SAAW,EAAA,YAAA;AAAA,EACX,YAAc,EAAA,KAAA;AAAA,EACd,MAAQ,EAAA,SAAA;AAAA,EAER,aAAe,EAAA;AAAA,IACb,aAAe,EAAA,MAAA;AAAA,GACjB;AAAA,EAEA,kBAAoB,EAAA;AAAA,IAClB,MAAQ,EAAA,SAAA;AAAA,GACV;AACF,CAAC,CAAA;;ACDD,MAAM,2BAEF,GAAA;AAAA,EACF,gBAAA;AAAA,EACA,uBAAA;AAAA,EACA,sBAAA;AAAA,EACA,6BAAA;AAAA,EACA,yBAAA;AAAA,EACA,QAAA;AAAA,EACA,eAAA;AAAA,EACA,aAAA;AAAA,EACA,oBAAA;AAAA,EACA,YAAA;AAAA,EACA,mBAAA;AAAA,EACA,aAAA;AAAA,EACA,aAAA;AAAA,EACA,oBAAA;AAAA,EACA,oBAAA;AAAA,EACA,YAAA;AAAA,EACA,YAAA;AAAA,EACA,mBAAA;AAAA,EACA,mBAAA;AAAA,EACA,SAAA;AAAA,EACA,gBAAA;AAAA,EACA,qBAAA;AAAA,EACA,4BAAA;AAAA,EACA,sBAAA;AAAA,EACA,6BAAA;AAAA,EACA,cAAA;AAAA,EACA,cAAA;AAAA,EACA,aAAA;AAAA,EACA,oBAAA;AAAA,EACA,YAAA;AAAA,EACA,mBAAA;AAAA,EACA,aAAA;AAAA,EACA,oBAAA;AAAA,EACA,gBAAA;AAAA,EACA,uBAAA;AAAA,EACA,gBAAA;AAAA,EACA,uBAAA;AAAA,EACA,eAAA;AAAA,EACA,sBAAA;AAAA,EACA,cAAA;AAAA,EACA,qBAAA;AAAA,EACA,eAAA;AAAA,EACA,sBAAA;AAAA,EACA,aAAA;AAAA,EACA,oBAAA;AAAA,EACA,iBAAA;AAAA,EACA,wBAAA;AAAA,EACA,SAAA;AAAA,EACA,gBAAA;AACF,CAAA,CAAA;AAEO,MAAM,aAAa,KAAM,CAAA,UAAA;AAAA,EAI9B,CACE;AAAA,IACE,QAAW,GAAA,KAAA;AAAA,IACX,eAAiB,EAAA,YAAA;AAAA,IACjB,QAAA;AAAA,IACA,OAAA;AAAA,IACA,IAAA;AAAA,IACA,YAAA;AAAA,IACA,UAAA;AAAA,IACA,aAAA;AAAA,IACA,QAAA;AAAA,IACA,GAAG,SAAA;AAAA,KAEL,UACG,KAAA;AACH,IAAA,MAAM,SAAS,MAAU,IAAA,SAAA,CAAA;AACzB,IAAA,MAAM,EAAE,IAAA,EAAM,MAAQ,EAAA,GAAA,GAAM,IAAO,GAAA,SAAA,CAAA;AAEnC,IAAA,IAAI,YAAe,GAAA,SAAA,CAAA;AAEnB,IAAI,IAAA,UAAA,CAAW,YAAY,CAAG,EAAA;AAC5B,MAAe,YAAA,GAAA,gBAAA,CAAiB,cAAc,2BAA2B,CAAA,CAAA;AAAA,KAC3E;AAEA,IAAM,MAAA,EAAE,UAAW,EAAA,GAAI,QAAS,CAAA;AAAA,MAC9B,mBAAqB,EAAA,IAAA;AAAA,MACrB,QAAA,EAAU,QAAY,IAAA,UAAA,CAAW,YAAY,CAAA;AAAA,MAC7C,GAAG,YAAA;AAAA,KACJ,CAAA,CAAA;AAED,IAAA,MAAM,EAAE,UAAA,EAAY,SAAU,EAAA,GAAI,QAAS,CAAA;AAAA,MACzC,YAAA;AAAA,MACA,UAAA;AAAA,MACA,aAAA;AAAA,KACD,CAAA,CAAA;AAED,IAAe,YAAA,GAAA,UAAA,CAAW,YAAY,UAAU,CAAA,CAAA;AAEhD,IAAA,IAAI,OAA8B,GAAA,GAAA,CAAA;AAElC,IAAI,IAAA,MAAA,IAAU,WAAW,QAAU,EAAA;AACjC,MAAA,IAAI,CAAC,OAAA,CAAQ,QAAS,CAAA,YAAY,CAAG,EAAA;AACnC,QAAA,OAAA,GAAU,aAAc,CAAA,MAAA,CAAA,OAAA,CAAA,CAAA;AAAA,OAC1B;AAEA,MAAA,IAAI,CAAC,OAAA,CAAQ,QAAS,CAAA,UAAU,CAAG,EAAA;AACjC,QAAA,OAAA,GAAU,WAAY,CAAA,MAAA,CAAA,OAAA,CAAA,CAAA;AAAA,OACxB;AAEA,MAAA,OAAA,GAAU,QAAQ,IAAK,EAAA,CAAA;AAAA,KACzB;AAEA,IAAA,IAAI,YAAY,EAAI,EAAA;AAClB,MAAU,OAAA,GAAA,KAAA,CAAA,CAAA;AAAA,KACZ;AAEA,IAAM,MAAA,aAAA,GACJ,OAAO,QAAA,KAAa,QAChB,GAAA;AAAA,MACE,QAAA;AAAA,QAEF,EAAC,CAAA;AAEP,IAAI,IAAA,QAAA,KAAa,MAAU,IAAA,OAAA,KAAY,IAAO,CAAA,EAAA;AAC5C,MAAA,aAAA,CAAc,QAAW,GAAA,CAAA,CAAA,CAAA;AAAA,KAC3B;AAEA,IACE,uBAAA,GAAA;AAAA,MAAC,gBAAA;AAAA,MAAA;AAAA,QACE,GAAG,YAAA;AAAA,QACH,GAAG,aAAA;AAAA,QACJ,cAAc,EAAA,SAAA,GAAY,EAAM,GAAA,YAAA,CAAqB,cAAc,CAAA;AAAA,QACnE,SAAS,MAAU,IAAA,OAAA;AAAA,QACnB,QAAA;AAAA,QACA,IAAM,EAAA,IAAA,IAAA,IAAA,GAAA,IAAA,GAAS,OAAY,KAAA,IAAA,GAAO,QAAW,GAAA,KAAA,CAAA;AAAA,QAC7C,eAAe,EAAA,UAAA,CAAW,YAAY,CAAA,GAAI,MAAS,GAAA,YAAA;AAAA,QAGnD,GAAK,EAAA,UAAA;AAAA,QAEJ,QACC,EAAA,MAAA,mBAAA,GAAA;AAAA,UAAC,SAAU,CAAA,CAAA;AAAA,UAAV;AAAA,YACC,IAAA;AAAA,YACA,MAAA;AAAA,YACA,GAAK,EAAA,OAAA;AAAA,YACL,OAAA;AAAA,YAEC,QAAA;AAAA,WAAA;AAAA,SAGH,GAAA,QAAA;AAAA,OAAA;AAAA,KAEJ,CAAA;AAAA,GAEJ;AACF;;;;"}
|
package/dist/types.d.ts
CHANGED
|
@@ -278,6 +278,7 @@ declare const StyledBaseButton: react.ForwardRefExoticComponent<Omit<Omit<_miroh
|
|
|
278
278
|
"focus-small-outline": any;
|
|
279
279
|
"focus-large": any;
|
|
280
280
|
"focus-controls": any;
|
|
281
|
+
"focus-small-error": any;
|
|
281
282
|
"focus-controls-error": any;
|
|
282
283
|
"focus-controls-success": any;
|
|
283
284
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mirohq/design-system-base-button",
|
|
3
|
-
"version": "0.4.
|
|
3
|
+
"version": "0.4.42",
|
|
4
4
|
"description": "",
|
|
5
5
|
"author": "Miro",
|
|
6
6
|
"source": "src/index.ts",
|
|
@@ -30,10 +30,10 @@
|
|
|
30
30
|
"@react-aria/utils": "^3.13.0",
|
|
31
31
|
"@react-types/shared": "^3.16.0",
|
|
32
32
|
"@mirohq/design-system-primitive": "^1.1.2",
|
|
33
|
-
"@mirohq/design-system-
|
|
34
|
-
"@mirohq/design-system-
|
|
35
|
-
"@mirohq/design-system-
|
|
36
|
-
"@mirohq/design-system-types": "^0.
|
|
33
|
+
"@mirohq/design-system-stitches": "^2.6.6",
|
|
34
|
+
"@mirohq/design-system-use-press": "^0.3.2",
|
|
35
|
+
"@mirohq/design-system-utils": "^0.15.1",
|
|
36
|
+
"@mirohq/design-system-types": "^0.7.0"
|
|
37
37
|
},
|
|
38
38
|
"scripts": {
|
|
39
39
|
"build": "rollup -c ../../../../rollup.config.js",
|