@cimpress-ui/react 1.34.0 → 1.34.2
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/commonjs/components/button/button.d.ts.map +1 -1
- package/dist/commonjs/components/button/button.js +4 -1
- package/dist/commonjs/components/button/button.js.map +1 -1
- package/dist/commonjs/components/button/disabled-with-reason.js +26 -0
- package/dist/commonjs/components/button/disabled-with-reason.js.map +1 -1
- package/dist/commonjs/components/button/icon-button.d.ts.map +1 -1
- package/dist/commonjs/components/button/icon-button.js +4 -1
- package/dist/commonjs/components/button/icon-button.js.map +1 -1
- package/dist/commonjs/components/button/icon-link-button.d.ts.map +1 -1
- package/dist/commonjs/components/button/icon-link-button.js +10 -2
- package/dist/commonjs/components/button/icon-link-button.js.map +1 -1
- package/dist/commonjs/components/button/link-button.d.ts.map +1 -1
- package/dist/commonjs/components/button/link-button.js +10 -2
- package/dist/commonjs/components/button/link-button.js.map +1 -1
- package/dist/esm/components/button/button.d.ts.map +1 -1
- package/dist/esm/components/button/button.js +5 -2
- package/dist/esm/components/button/button.js.map +1 -1
- package/dist/esm/components/button/disabled-with-reason.js +25 -0
- package/dist/esm/components/button/disabled-with-reason.js.map +1 -1
- package/dist/esm/components/button/icon-button.d.ts.map +1 -1
- package/dist/esm/components/button/icon-button.js +5 -2
- package/dist/esm/components/button/icon-button.js.map +1 -1
- package/dist/esm/components/button/icon-link-button.d.ts.map +1 -1
- package/dist/esm/components/button/icon-link-button.js +10 -2
- package/dist/esm/components/button/icon-link-button.js.map +1 -1
- package/dist/esm/components/button/link-button.d.ts.map +1 -1
- package/dist/esm/components/button/link-button.js +10 -2
- package/dist/esm/components/button/link-button.js.map +1 -1
- package/dist-styles/core.css +1 -1
- package/dist-styles/styles.css +1 -1
- package/package.json +1 -1
|
@@ -1,18 +1,26 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import clsx from 'clsx';
|
|
4
|
+
import { useRef } from 'react';
|
|
5
|
+
import { useObjectRef } from 'react-aria';
|
|
4
6
|
import { Link as RACLink } from 'react-aria-components';
|
|
5
7
|
import { forwardRef } from '../../forward-ref.js';
|
|
6
8
|
import { withStyleProps } from '../../with-style-props.js';
|
|
7
9
|
import { Button } from './button.js';
|
|
10
|
+
import { usePreserveFocus } from './disabled-with-reason.js';
|
|
8
11
|
function LinkButton({ children, variant = 'secondary', tone = 'base', size = 'medium', iconStart, iconEnd, isDisabled = false, fullWidth = false, UNSAFE_className, UNSAFE_style, ...props }, ref) {
|
|
12
|
+
const linkRef = useObjectRef(ref);
|
|
13
|
+
const buttonRef = useRef(null);
|
|
9
14
|
const hasDisabledReason = typeof isDisabled === 'object' && isDisabled.reason !== '';
|
|
15
|
+
const onFocusChange = usePreserveFocus(linkRef, buttonRef, isDisabled ?? false);
|
|
10
16
|
if (hasDisabledReason) {
|
|
11
17
|
// `RACLink` doesn't support aria-disabled while keeping interactivity, so we render a `Button` instead
|
|
12
18
|
const { href, target, hrefLang, download, ping, referrerPolicy, rel, routerOptions, ...buttonProps } = props;
|
|
13
|
-
return (_jsx(Button, { ...buttonProps, variant: variant, tone: tone, size: size, iconStart: iconStart, iconEnd: iconEnd, isDisabled: isDisabled, fullWidth: fullWidth, UNSAFE_className: UNSAFE_className, UNSAFE_style: UNSAFE_style,
|
|
19
|
+
return (_jsx(Button, { ...buttonProps, ref: buttonRef, variant: variant, tone: tone, size: size, iconStart: iconStart, iconEnd: iconEnd, isDisabled: isDisabled, fullWidth: fullWidth, UNSAFE_className: UNSAFE_className, UNSAFE_style: UNSAFE_style,
|
|
20
|
+
// @ts-expect-error our buttons don't expose `onFocusChange`, but it gets passed to React Aria anyway
|
|
21
|
+
onFocusChange: onFocusChange, children: children }));
|
|
14
22
|
}
|
|
15
|
-
return (_jsxs(RACLink, { ...props, ref:
|
|
23
|
+
return (_jsxs(RACLink, { ...props, ref: linkRef, className: clsx('cim-button', UNSAFE_className), style: UNSAFE_style, "data-variant": variant, "data-tone": tone, "data-size": size, "data-full-width": fullWidth || undefined, isDisabled: !!isDisabled, onFocusChange: onFocusChange, children: [iconStart, _jsx("span", { className: "cim-button-text", children: children }), iconEnd] }));
|
|
16
24
|
}
|
|
17
25
|
/**
|
|
18
26
|
* Displays a labelled button that allows users to navigate to another page or resource.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"link-button.js","sourceRoot":"","sources":["../../../../src/components/button/link-button.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"link-button.js","sourceRoot":"","sources":["../../../../src/components/button/link-button.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,MAAM,EAAqB,MAAM,OAAO,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAC1C,OAAO,EAAE,IAAI,IAAI,OAAO,EAAkC,MAAM,uBAAuB,CAAC;AACxF,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAE3D,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAoB7D,SAAS,UAAU,CACjB,EACE,QAAQ,EACR,OAAO,GAAG,WAAW,EACrB,IAAI,GAAG,MAAM,EACb,IAAI,GAAG,QAAQ,EACf,SAAS,EACT,OAAO,EACP,UAAU,GAAG,KAAK,EAClB,SAAS,GAAG,KAAK,EACjB,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACQ,EAClB,GAAoC;IAEpC,MAAM,OAAO,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC;IAClC,MAAM,SAAS,GAAG,MAAM,CAA2B,IAAI,CAAC,CAAC;IAEzD,MAAM,iBAAiB,GAAG,OAAO,UAAU,KAAK,QAAQ,IAAI,UAAU,CAAC,MAAM,KAAK,EAAE,CAAC;IACrF,MAAM,aAAa,GAAG,gBAAgB,CAAC,OAAO,EAAE,SAAS,EAAE,UAAU,IAAI,KAAK,CAAC,CAAC;IAEhF,IAAI,iBAAiB,EAAE,CAAC;QACtB,uGAAuG;QACvG,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,cAAc,EAAE,GAAG,EAAE,aAAa,EAAE,GAAG,WAAW,EAAE,GAAG,KAAK,CAAC;QAE7G,OAAO,CACL,KAAC,MAAM,OACD,WAAW,EACf,GAAG,EAAE,SAAS,EACd,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,EACpB,gBAAgB,EAAE,gBAAgB,EAClC,YAAY,EAAE,YAAY;YAC1B,qGAAqG;YACrG,aAAa,EAAE,aAAa,YAE3B,QAAQ,GACF,CACV,CAAC;IACJ,CAAC;IAED,OAAO,CACL,MAAC,OAAO,OACF,KAAK,EACT,GAAG,EAAE,OAAO,EACZ,SAAS,EAAE,IAAI,CAAC,YAAY,EAAE,gBAAgB,CAAC,EAC/C,KAAK,EAAE,YAAY,kBACL,OAAO,eACV,IAAI,eACJ,IAAI,qBACE,SAAS,IAAI,SAAS,EACvC,UAAU,EAAE,CAAC,CAAC,UAAU,EACxB,aAAa,EAAE,aAAa,aAE3B,SAAS,EACV,eAAM,SAAS,EAAC,iBAAiB,YAAE,QAAQ,GAAQ,EAClD,OAAO,IACA,CACX,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,WAAW,GAAG,cAAc,CAAC,UAAU,CAAC,UAAU,CAAC,EAAE,YAAY,CAAC,CAAC;AAEzE,OAAO,EAAE,WAAW,IAAI,UAAU,EAAE,CAAC","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { useRef, type ForwardedRef } from 'react';\nimport { useObjectRef } from 'react-aria';\nimport { Link as RACLink, type LinkProps as RACLinkProps } from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type { NavigationProps, WithRequired } from '../types.js';\nimport { Button } from './button.js';\nimport { usePreserveFocus } from './disabled-with-reason.js';\nimport type { BaseButtonProps, TextButtonProps } from './types.js';\n\nexport interface LinkButtonProps\n extends\n Omit<BaseButtonProps, 'id'>,\n TextButtonProps,\n WithRequired<NavigationProps, 'href'>,\n Pick<RACLinkProps, 'onHoverStart' | 'onHoverEnd'> {\n /**\n * Whether the button is disabled.\n *\n * Optionally, you can provide an object with the `reason` property explaining why the button is disabled.\n * This information will be shown to the end-users as a tooltip or a popover.\n *\n * @default false\n */\n isDisabled?: boolean | { reason: string };\n}\n\nfunction LinkButton(\n {\n children,\n variant = 'secondary',\n tone = 'base',\n size = 'medium',\n iconStart,\n iconEnd,\n isDisabled = false,\n fullWidth = false,\n UNSAFE_className,\n UNSAFE_style,\n ...props\n }: LinkButtonProps,\n ref: ForwardedRef<HTMLAnchorElement>,\n) {\n const linkRef = useObjectRef(ref);\n const buttonRef = useRef<HTMLButtonElement | null>(null);\n\n const hasDisabledReason = typeof isDisabled === 'object' && isDisabled.reason !== '';\n const onFocusChange = usePreserveFocus(linkRef, buttonRef, isDisabled ?? false);\n\n if (hasDisabledReason) {\n // `RACLink` doesn't support aria-disabled while keeping interactivity, so we render a `Button` instead\n const { href, target, hrefLang, download, ping, referrerPolicy, rel, routerOptions, ...buttonProps } = props;\n\n return (\n <Button\n {...buttonProps}\n ref={buttonRef}\n variant={variant}\n tone={tone}\n size={size}\n iconStart={iconStart}\n iconEnd={iconEnd}\n isDisabled={isDisabled}\n fullWidth={fullWidth}\n UNSAFE_className={UNSAFE_className}\n UNSAFE_style={UNSAFE_style}\n // @ts-expect-error our buttons don't expose `onFocusChange`, but it gets passed to React Aria anyway\n onFocusChange={onFocusChange}\n >\n {children}\n </Button>\n );\n }\n\n return (\n <RACLink\n {...props}\n ref={linkRef}\n className={clsx('cim-button', UNSAFE_className)}\n style={UNSAFE_style}\n data-variant={variant}\n data-tone={tone}\n data-size={size}\n data-full-width={fullWidth || undefined}\n isDisabled={!!isDisabled}\n onFocusChange={onFocusChange}\n >\n {iconStart}\n <span className=\"cim-button-text\">{children}</span>\n {iconEnd}\n </RACLink>\n );\n}\n\n/**\n * Displays a labelled button that allows users to navigate to another page or resource.\n *\n * See [button usage guidelines](https://ui.cimpress.io/components/button/).\n */\nconst _LinkButton = withStyleProps(forwardRef(LinkButton), 'LinkButton');\n\nexport { _LinkButton as LinkButton };\n"]}
|