@transferwise/components 0.0.0-experimental-5c1f9a4 → 0.0.0-experimental-739bfcf
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/build/avatarLayout/AvatarLayout.js +9 -2
- package/build/avatarLayout/AvatarLayout.js.map +1 -1
- package/build/avatarLayout/AvatarLayout.mjs +9 -2
- package/build/avatarLayout/AvatarLayout.mjs.map +1 -1
- package/build/button/Button.js +78 -79
- package/build/button/Button.js.map +1 -1
- package/build/button/Button.mjs +79 -80
- package/build/button/Button.mjs.map +1 -1
- package/build/button/Button.resolver.js +78 -0
- package/build/button/Button.resolver.js.map +1 -0
- package/build/button/Button.resolver.mjs +76 -0
- package/build/button/Button.resolver.mjs.map +1 -0
- package/build/button/LegacyButton.js +114 -0
- package/build/button/LegacyButton.js.map +1 -0
- package/build/button/LegacyButton.mjs +112 -0
- package/build/button/LegacyButton.mjs.map +1 -0
- package/build/criticalBanner/CriticalCommsBanner.js +2 -2
- package/build/criticalBanner/CriticalCommsBanner.js.map +1 -1
- package/build/criticalBanner/CriticalCommsBanner.mjs +1 -1
- package/build/header/Header.js +2 -2
- package/build/header/Header.js.map +1 -1
- package/build/header/Header.mjs +1 -1
- package/build/index.js +2 -2
- package/build/index.mjs +1 -1
- package/build/link/Link.js +8 -3
- package/build/link/Link.js.map +1 -1
- package/build/link/Link.mjs +8 -3
- package/build/link/Link.mjs.map +1 -1
- package/build/main.css +250 -0
- package/build/primitives/PrimitiveAnchor/src/PrimitiveAnchor.js +1 -3
- package/build/primitives/PrimitiveAnchor/src/PrimitiveAnchor.js.map +1 -1
- package/build/primitives/PrimitiveAnchor/src/PrimitiveAnchor.mjs +1 -3
- package/build/primitives/PrimitiveAnchor/src/PrimitiveAnchor.mjs.map +1 -1
- package/build/primitives/PrimitiveButton/src/PrimitiveButton.js +1 -4
- package/build/primitives/PrimitiveButton/src/PrimitiveButton.js.map +1 -1
- package/build/primitives/PrimitiveButton/src/PrimitiveButton.mjs +1 -4
- package/build/primitives/PrimitiveButton/src/PrimitiveButton.mjs.map +1 -1
- package/build/select/Select.js +5 -3
- package/build/select/Select.js.map +1 -1
- package/build/select/Select.mjs +4 -2
- package/build/select/Select.mjs.map +1 -1
- package/build/styles/avatarLayout/AvatarLayout.css +11 -0
- package/build/styles/button/Button.css +231 -15
- package/build/styles/button/Button.vars.css +38 -0
- package/build/styles/button/LegacyButton.css +23 -0
- package/build/styles/main.css +250 -0
- package/build/types/avatarLayout/AvatarLayout.d.ts +1 -2
- package/build/types/avatarLayout/AvatarLayout.d.ts.map +1 -1
- package/build/types/avatarLayout/index.d.ts +1 -0
- package/build/types/avatarLayout/index.d.ts.map +1 -1
- package/build/types/button/Button.d.ts +1 -23
- package/build/types/button/Button.d.ts.map +1 -1
- package/build/types/button/Button.resolver.d.ts +31 -0
- package/build/types/button/Button.resolver.d.ts.map +1 -0
- package/build/types/button/Button.types.d.ts +65 -0
- package/build/types/button/Button.types.d.ts.map +1 -0
- package/build/types/button/LegacyButton.d.ts +30 -0
- package/build/types/button/LegacyButton.d.ts.map +1 -0
- package/build/types/button/index.d.ts +2 -2
- package/build/types/button/index.d.ts.map +1 -1
- package/build/types/link/Link.d.ts +2 -2
- package/build/types/link/Link.d.ts.map +1 -1
- package/build/types/primitives/PrimitiveAnchor/src/PrimitiveAnchor.d.ts.map +1 -1
- package/build/types/primitives/PrimitiveAnchor/src/PrimitiveAnchor.types.d.ts +5 -1
- package/build/types/primitives/PrimitiveAnchor/src/PrimitiveAnchor.types.d.ts.map +1 -1
- package/build/types/primitives/PrimitiveButton/src/PrimitiveButton.d.ts.map +1 -1
- package/build/types/select/Select.d.ts.map +1 -1
- package/build/upload/steps/completeStep/completeStep.js +2 -2
- package/build/upload/steps/completeStep/completeStep.js.map +1 -1
- package/build/upload/steps/completeStep/completeStep.mjs +1 -1
- package/build/upload/steps/processingStep/processingStep.js +2 -2
- package/build/upload/steps/processingStep/processingStep.js.map +1 -1
- package/build/upload/steps/processingStep/processingStep.mjs +1 -1
- package/build/uploadInput/UploadInput.js +3 -3
- package/build/uploadInput/UploadInput.js.map +1 -1
- package/build/uploadInput/UploadInput.mjs +1 -1
- package/package.json +3 -3
- package/src/avatarLayout/AvatarLayout.css +11 -0
- package/src/avatarLayout/AvatarLayout.less +18 -1
- package/src/avatarLayout/AvatarLayout.tsx +11 -3
- package/src/avatarLayout/index.ts +1 -0
- package/src/button/Button.css +231 -15
- package/src/button/Button.less +232 -14
- package/src/button/Button.resolver.tsx +120 -0
- package/src/button/Button.spec.tsx +54 -231
- package/src/button/Button.story.tsx +612 -137
- package/src/button/Button.tsx +88 -132
- package/src/button/Button.types.ts +86 -0
- package/src/button/Button.vars.css +38 -0
- package/src/button/Button.vars.less +46 -0
- package/src/button/LegacyButton.css +23 -0
- package/src/button/LegacyButton.less +24 -0
- package/src/button/LegacyButton.spec.tsx +146 -0
- package/src/button/LegacyButton.story.tsx +224 -0
- package/src/button/LegacyButton.tsx +161 -0
- package/src/button/index.ts +2 -3
- package/src/flowNavigation/__snapshots__/FlowNavigation.spec.js.snap +1 -1
- package/src/inputs/SelectInput.story.tsx +1 -1
- package/src/link/Link.tsx +15 -6
- package/src/main.css +250 -0
- package/src/main.less +1 -0
- package/src/primitives/PrimitiveAnchor/src/PrimitiveAnchor.tsx +1 -7
- package/src/primitives/PrimitiveAnchor/src/PrimitiveAnchor.types.ts +6 -1
- package/src/primitives/PrimitiveAnchor/test/PrimitiveAnchor.spec.tsx +1 -3
- package/src/primitives/PrimitiveButton/src/PrimitiveButton.tsx +1 -8
- package/src/primitives/PrimitiveButton/test/PrimitiveButton.spec.tsx +2 -5
- package/src/select/Select.tsx +1 -0
- package/src/button/__snapshots__/Button.spec.tsx.snap +0 -309
package/build/index.js
CHANGED
|
@@ -21,7 +21,7 @@ require('react/jsx-runtime');
|
|
|
21
21
|
var Image = require('./image/Image.js');
|
|
22
22
|
require('@transferwise/icons');
|
|
23
23
|
var Body = require('./body/Body.js');
|
|
24
|
-
var
|
|
24
|
+
var Button_resolver = require('./button/Button.resolver.js');
|
|
25
25
|
var IconButton = require('./iconButton/IconButton.js');
|
|
26
26
|
var Carousel = require('./carousel/Carousel.js');
|
|
27
27
|
var Card = require('./card/Card.js');
|
|
@@ -164,7 +164,7 @@ Object.defineProperty(exports, "Breakpoint", {
|
|
|
164
164
|
});
|
|
165
165
|
exports.Image = Image.default;
|
|
166
166
|
exports.Body = Body;
|
|
167
|
-
exports.Button =
|
|
167
|
+
exports.Button = Button_resolver;
|
|
168
168
|
exports.IconButton = IconButton;
|
|
169
169
|
exports.Carousel = Carousel;
|
|
170
170
|
exports.Card = Card;
|
package/build/index.mjs
CHANGED
|
@@ -19,7 +19,7 @@ import 'react/jsx-runtime';
|
|
|
19
19
|
export { default as Image } from './image/Image.mjs';
|
|
20
20
|
import '@transferwise/icons';
|
|
21
21
|
export { default as Body } from './body/Body.mjs';
|
|
22
|
-
export { default as Button } from './button/Button.mjs';
|
|
22
|
+
export { default as Button } from './button/Button.resolver.mjs';
|
|
23
23
|
export { default as IconButton } from './iconButton/IconButton.mjs';
|
|
24
24
|
export { default as Carousel } from './carousel/Carousel.mjs';
|
|
25
25
|
export { default as Card } from './card/Card.mjs';
|
package/build/link/Link.js
CHANGED
|
@@ -3,6 +3,8 @@
|
|
|
3
3
|
var icons = require('@transferwise/icons');
|
|
4
4
|
var clsx = require('clsx');
|
|
5
5
|
var reactIntl = require('react-intl');
|
|
6
|
+
require('../primitives/PrimitiveButton/src/PrimitiveButton.js');
|
|
7
|
+
var PrimitiveAnchor = require('../primitives/PrimitiveAnchor/src/PrimitiveAnchor.js');
|
|
6
8
|
var Link_messages = require('./Link.messages.js');
|
|
7
9
|
var jsxRuntime = require('react/jsx-runtime');
|
|
8
10
|
|
|
@@ -16,14 +18,17 @@ const Link = ({
|
|
|
16
18
|
onClick,
|
|
17
19
|
...props
|
|
18
20
|
}) => {
|
|
19
|
-
const isBlank = target === '_blank';
|
|
20
21
|
const {
|
|
21
22
|
formatMessage
|
|
22
23
|
} = reactIntl.useIntl();
|
|
23
|
-
|
|
24
|
+
const isBlank = target === '_blank';
|
|
25
|
+
const classNames = clsx.clsx('np-link', 'd-inline-flex', {
|
|
26
|
+
[`np-text-${type}`]: type
|
|
27
|
+
}, className);
|
|
28
|
+
return /*#__PURE__*/jsxRuntime.jsxs(PrimitiveAnchor, {
|
|
24
29
|
href: href,
|
|
25
30
|
target: target,
|
|
26
|
-
className:
|
|
31
|
+
className: classNames,
|
|
27
32
|
"aria-label": ariaLabel,
|
|
28
33
|
rel: isBlank ? 'noreferrer' : undefined,
|
|
29
34
|
onClick: onClick,
|
package/build/link/Link.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Link.js","sources":["../../src/link/Link.tsx"],"sourcesContent":["import { NavigateAway as NavigateAwayIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport {
|
|
1
|
+
{"version":3,"file":"Link.js","sources":["../../src/link/Link.tsx"],"sourcesContent":["import { NavigateAway as NavigateAwayIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\nimport { PrimitiveAnchor } from '../primitives';\nimport type { PrimitiveAnchorProps } from '../primitives';\n\nimport { LinkLarge, LinkDefault } from '../common';\n\nimport messages from './Link.messages';\n\nexport type Props = PrimitiveAnchorProps & { type?: LinkLarge | LinkDefault };\n\n/**\n * Standard Link component with navigate away icon\n *\n * Documentation: https://transferwise.github.io/neptune-web/components/content/Link\n */\nconst Link = ({\n className,\n children,\n href,\n target,\n type,\n 'aria-label': ariaLabel,\n onClick,\n ...props\n}: Props) => {\n const { formatMessage } = useIntl();\n const isBlank = target === '_blank';\n\n const classNames = clsx(\n 'np-link',\n 'd-inline-flex',\n {\n [`np-text-${type}`]: type,\n },\n className,\n );\n\n return (\n <PrimitiveAnchor\n href={href}\n target={target}\n className={classNames}\n aria-label={ariaLabel}\n rel={isBlank ? 'noreferrer' : undefined}\n onClick={onClick}\n {...props}\n >\n {children} {isBlank && <NavigateAwayIcon title={formatMessage(messages.opensInNewTab)} />}\n </PrimitiveAnchor>\n );\n};\n\nexport default Link;\n"],"names":["Link","className","children","href","target","type","ariaLabel","onClick","props","formatMessage","useIntl","isBlank","classNames","clsx","_jsxs","PrimitiveAnchor","rel","undefined","_jsx","NavigateAwayIcon","title","messages","opensInNewTab"],"mappings":";;;;;;;;;;AAiBMA,MAAAA,IAAI,GAAGA,CAAC;EACZC,SAAS;EACTC,QAAQ;EACRC,IAAI;EACJC,MAAM;EACNC,IAAI;AACJ,EAAA,YAAY,EAAEC,SAAS;EACvBC,OAAO;EACP,GAAGC,KAAAA;AACG,CAAA,KAAI;EACV,MAAM;AAAEC,IAAAA,aAAAA;GAAe,GAAGC,iBAAO,EAAE,CAAA;AACnC,EAAA,MAAMC,OAAO,GAAGP,MAAM,KAAK,QAAQ,CAAA;AAEnC,EAAA,MAAMQ,UAAU,GAAGC,SAAI,CACrB,SAAS,EACT,eAAe,EACf;IACE,CAAC,CAAA,QAAA,EAAWR,IAAI,CAAA,CAAE,GAAGA,IAAAA;GACtB,EACDJ,SAAS,CACV,CAAA;EAED,oBACEa,eAAA,CAACC,eAAe,EAAA;AACdZ,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,MAAM,EAAEA,MAAO;AACfH,IAAAA,SAAS,EAAEW,UAAW;AACtB,IAAA,YAAA,EAAYN,SAAU;AACtBU,IAAAA,GAAG,EAAEL,OAAO,GAAG,YAAY,GAAGM,SAAU;AACxCV,IAAAA,OAAO,EAAEA,OAAQ;AAAA,IAAA,GACbC,KAAK;IAAAN,QAAA,EAAA,CAERA,QAAQ,EAAE,GAAA,EAACS,OAAO,iBAAIO,cAAA,CAACC,kBAAgB,EAAA;AAACC,MAAAA,KAAK,EAAEX,aAAa,CAACY,aAAQ,CAACC,aAAa,CAAA;AAAE,MAAG,CAAA;AAAA,GAC1E,CAAC,CAAA;AAEtB;;;;"}
|
package/build/link/Link.mjs
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import { NavigateAway } from '@transferwise/icons';
|
|
2
2
|
import { clsx } from 'clsx';
|
|
3
3
|
import { useIntl } from 'react-intl';
|
|
4
|
+
import '../primitives/PrimitiveButton/src/PrimitiveButton.mjs';
|
|
5
|
+
import PrimitiveAnchor from '../primitives/PrimitiveAnchor/src/PrimitiveAnchor.mjs';
|
|
4
6
|
import messages from './Link.messages.mjs';
|
|
5
7
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
6
8
|
|
|
@@ -14,14 +16,17 @@ const Link = ({
|
|
|
14
16
|
onClick,
|
|
15
17
|
...props
|
|
16
18
|
}) => {
|
|
17
|
-
const isBlank = target === '_blank';
|
|
18
19
|
const {
|
|
19
20
|
formatMessage
|
|
20
21
|
} = useIntl();
|
|
21
|
-
|
|
22
|
+
const isBlank = target === '_blank';
|
|
23
|
+
const classNames = clsx('np-link', 'd-inline-flex', {
|
|
24
|
+
[`np-text-${type}`]: type
|
|
25
|
+
}, className);
|
|
26
|
+
return /*#__PURE__*/jsxs(PrimitiveAnchor, {
|
|
22
27
|
href: href,
|
|
23
28
|
target: target,
|
|
24
|
-
className:
|
|
29
|
+
className: classNames,
|
|
25
30
|
"aria-label": ariaLabel,
|
|
26
31
|
rel: isBlank ? 'noreferrer' : undefined,
|
|
27
32
|
onClick: onClick,
|
package/build/link/Link.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Link.mjs","sources":["../../src/link/Link.tsx"],"sourcesContent":["import { NavigateAway as NavigateAwayIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport {
|
|
1
|
+
{"version":3,"file":"Link.mjs","sources":["../../src/link/Link.tsx"],"sourcesContent":["import { NavigateAway as NavigateAwayIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\nimport { PrimitiveAnchor } from '../primitives';\nimport type { PrimitiveAnchorProps } from '../primitives';\n\nimport { LinkLarge, LinkDefault } from '../common';\n\nimport messages from './Link.messages';\n\nexport type Props = PrimitiveAnchorProps & { type?: LinkLarge | LinkDefault };\n\n/**\n * Standard Link component with navigate away icon\n *\n * Documentation: https://transferwise.github.io/neptune-web/components/content/Link\n */\nconst Link = ({\n className,\n children,\n href,\n target,\n type,\n 'aria-label': ariaLabel,\n onClick,\n ...props\n}: Props) => {\n const { formatMessage } = useIntl();\n const isBlank = target === '_blank';\n\n const classNames = clsx(\n 'np-link',\n 'd-inline-flex',\n {\n [`np-text-${type}`]: type,\n },\n className,\n );\n\n return (\n <PrimitiveAnchor\n href={href}\n target={target}\n className={classNames}\n aria-label={ariaLabel}\n rel={isBlank ? 'noreferrer' : undefined}\n onClick={onClick}\n {...props}\n >\n {children} {isBlank && <NavigateAwayIcon title={formatMessage(messages.opensInNewTab)} />}\n </PrimitiveAnchor>\n );\n};\n\nexport default Link;\n"],"names":["Link","className","children","href","target","type","ariaLabel","onClick","props","formatMessage","useIntl","isBlank","classNames","clsx","_jsxs","PrimitiveAnchor","rel","undefined","_jsx","NavigateAwayIcon","title","messages","opensInNewTab"],"mappings":";;;;;;;;AAiBMA,MAAAA,IAAI,GAAGA,CAAC;EACZC,SAAS;EACTC,QAAQ;EACRC,IAAI;EACJC,MAAM;EACNC,IAAI;AACJ,EAAA,YAAY,EAAEC,SAAS;EACvBC,OAAO;EACP,GAAGC,KAAAA;AACG,CAAA,KAAI;EACV,MAAM;AAAEC,IAAAA,aAAAA;GAAe,GAAGC,OAAO,EAAE,CAAA;AACnC,EAAA,MAAMC,OAAO,GAAGP,MAAM,KAAK,QAAQ,CAAA;AAEnC,EAAA,MAAMQ,UAAU,GAAGC,IAAI,CACrB,SAAS,EACT,eAAe,EACf;IACE,CAAC,CAAA,QAAA,EAAWR,IAAI,CAAA,CAAE,GAAGA,IAAAA;GACtB,EACDJ,SAAS,CACV,CAAA;EAED,oBACEa,IAAA,CAACC,eAAe,EAAA;AACdZ,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,MAAM,EAAEA,MAAO;AACfH,IAAAA,SAAS,EAAEW,UAAW;AACtB,IAAA,YAAA,EAAYN,SAAU;AACtBU,IAAAA,GAAG,EAAEL,OAAO,GAAG,YAAY,GAAGM,SAAU;AACxCV,IAAAA,OAAO,EAAEA,OAAQ;AAAA,IAAA,GACbC,KAAK;IAAAN,QAAA,EAAA,CAERA,QAAQ,EAAE,GAAA,EAACS,OAAO,iBAAIO,GAAA,CAACC,YAAgB,EAAA;AAACC,MAAAA,KAAK,EAAEX,aAAa,CAACY,QAAQ,CAACC,aAAa,CAAA;AAAE,MAAG,CAAA;AAAA,GAC1E,CAAC,CAAA;AAEtB;;;;"}
|
package/build/main.css
CHANGED
|
@@ -518,10 +518,18 @@ div.critical-comms .critical-comms-body {
|
|
|
518
518
|
-webkit-mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) right calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
|
|
519
519
|
mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) right calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
|
|
520
520
|
}
|
|
521
|
+
[dir="rtl"] .np-avatar-layout-diagonal-mask {
|
|
522
|
+
-webkit-mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) left calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
|
|
523
|
+
mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) left calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
|
|
524
|
+
}
|
|
521
525
|
.np-avatar-layout-diagonal-child {
|
|
522
526
|
margin-left: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
|
|
523
527
|
margin-top: calc(var(--np-avatar-layout-size) - var(--np-avatar-size));
|
|
524
528
|
}
|
|
529
|
+
[dir="rtl"] .np-avatar-layout-diagonal-child {
|
|
530
|
+
margin-left: 0;
|
|
531
|
+
margin-right: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
|
|
532
|
+
}
|
|
525
533
|
.np-avatar-layout-horizontal {
|
|
526
534
|
width: calc(var(--np-avatar-size) * 2 - var(--np-avatar-offset));
|
|
527
535
|
height: var(--np-avatar-layout-size);
|
|
@@ -535,6 +543,9 @@ div.critical-comms .critical-comms-body {
|
|
|
535
543
|
.np-avatar-layout-horizontal-child {
|
|
536
544
|
margin-left: calc(var(--np-avatar-offset) * -1);
|
|
537
545
|
}
|
|
546
|
+
[dir="rtl"] .np-avatar-layout-horizontal-child {
|
|
547
|
+
margin-right: calc(var(--np-avatar-offset) * -1);
|
|
548
|
+
}
|
|
538
549
|
.np-icon-button {
|
|
539
550
|
border: none;
|
|
540
551
|
}
|
|
@@ -705,6 +716,245 @@ div.critical-comms .critical-comms-body {
|
|
|
705
716
|
.np-btn.disabled[class] {
|
|
706
717
|
pointer-events: auto;
|
|
707
718
|
}
|
|
719
|
+
.wds-Button {
|
|
720
|
+
--Button-background: var(--color-interactive-accent);
|
|
721
|
+
--Button-background-hover: var(--color-interactive-accent-hover);
|
|
722
|
+
--Button-background-active: var(--color-interactive-accent-active);
|
|
723
|
+
--Button-color: var(--color-interactive-control);
|
|
724
|
+
--Button-padding: var(--size-8) var(--size-12);
|
|
725
|
+
--Button-border-radius: var(--radius-full);
|
|
726
|
+
--Button-size-small-padding: 5px var(--size-12);
|
|
727
|
+
--Button-size-medium-padding: var(--size-8) var(--size-12);
|
|
728
|
+
--Button-size-large-padding: var(--size-12) var(--size-16);
|
|
729
|
+
--Button-transition-duration: 150ms;
|
|
730
|
+
--Button-transition-easing: ease-in-out;
|
|
731
|
+
--Button-secondary-background: var(--color-interactive-neutral);
|
|
732
|
+
--Button-secondary-background-hover: var(--color-interactive-neutral-hover);
|
|
733
|
+
--Button-secondary-background-active: var(--color-interactive-neutral-active);
|
|
734
|
+
--Button-secondary-color: var(--color-interactive-primary);
|
|
735
|
+
--Button-tertiary-background: var(--color-background-neutral);
|
|
736
|
+
--Button-tertiary-background-hover: var(--color-background-neutral-hover);
|
|
737
|
+
--Button-tertiary-background-active: var(--color-background-neutral-active);
|
|
738
|
+
--Button-tertiary-color: var(--color-content-primary);
|
|
739
|
+
--Button-minimal-background: transparent;
|
|
740
|
+
--Button-minimal-background-hover: var(--color-background-screen-hover);
|
|
741
|
+
--Button-minimal-background-active: var(--color-background-screen-active);
|
|
742
|
+
--Button-minimal-color: var(--color-interactive-primary);
|
|
743
|
+
--Button-primary-negative-background: var(--color-sentiment-negative-primary);
|
|
744
|
+
--Button-primary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
|
|
745
|
+
--Button-primary-negative-background-active: var(--color-sentiment-negative-primary-active);
|
|
746
|
+
--Button-primary-negative-color: var(--color-contrast);
|
|
747
|
+
--Button-secondary-negative-background: var(--color-sentiment-negative-secondary);
|
|
748
|
+
--Button-secondary-negative-background-hover: var(--color-sentiment-negative-secondary-hover);
|
|
749
|
+
--Button-secondary-negative-background-active: var(--color-sentiment-negative-secondary-active);
|
|
750
|
+
--Button-secondary-negative-color: var(--color-sentiment-negative-primary);
|
|
751
|
+
}
|
|
752
|
+
.np-theme-personal--bright-green .wds-Button {
|
|
753
|
+
--color-contrast: #FFFFFF;
|
|
754
|
+
--Button-secondary-color: var(--color-interactive-control);
|
|
755
|
+
--Button-secondary-negative-color: var(--color-contrast);
|
|
756
|
+
}
|
|
757
|
+
/* Button Styles */
|
|
758
|
+
.wds-Button {
|
|
759
|
+
display: inline-flex;
|
|
760
|
+
flex: none;
|
|
761
|
+
width: auto;
|
|
762
|
+
align-items: center;
|
|
763
|
+
justify-content: center;
|
|
764
|
+
vertical-align: middle;
|
|
765
|
+
text-align: center;
|
|
766
|
+
-webkit-text-decoration: none;
|
|
767
|
+
text-decoration: none;
|
|
768
|
+
white-space: nowrap;
|
|
769
|
+
word-wrap: break-word;
|
|
770
|
+
-webkit-appearance: none;
|
|
771
|
+
-moz-appearance: none;
|
|
772
|
+
appearance: none;
|
|
773
|
+
background-color: var(--Button-background);
|
|
774
|
+
border: none;
|
|
775
|
+
border-radius: var(--Button-border-radius);
|
|
776
|
+
color: var(--Button-color);
|
|
777
|
+
cursor: pointer;
|
|
778
|
+
padding: var(--Button-padding);
|
|
779
|
+
transition: color, background-color var(--Button-transition-duration) var(--Button-transition-easing);
|
|
780
|
+
}
|
|
781
|
+
.wds-Button:focus {
|
|
782
|
+
-webkit-text-decoration: none;
|
|
783
|
+
text-decoration: none;
|
|
784
|
+
}
|
|
785
|
+
.wds-Button:hover {
|
|
786
|
+
background-color: var(--Button-background-hover);
|
|
787
|
+
-webkit-text-decoration: none;
|
|
788
|
+
text-decoration: none;
|
|
789
|
+
}
|
|
790
|
+
.wds-Button:active {
|
|
791
|
+
background-color: var(--Button-background-active);
|
|
792
|
+
-webkit-text-decoration: none;
|
|
793
|
+
text-decoration: none;
|
|
794
|
+
}
|
|
795
|
+
.wds-Button.wds-Button--disabled,
|
|
796
|
+
.wds-Button:disabled {
|
|
797
|
+
mix-blend-mode: luminosity;
|
|
798
|
+
opacity: 0.45;
|
|
799
|
+
cursor: not-allowed;
|
|
800
|
+
}
|
|
801
|
+
.wds-Button.wds-Button--disabled:hover,
|
|
802
|
+
.wds-Button:disabled:hover,
|
|
803
|
+
.wds-Button.wds-Button--disabled:active,
|
|
804
|
+
.wds-Button:disabled:active {
|
|
805
|
+
background-color: var(--Button-background);
|
|
806
|
+
}
|
|
807
|
+
.wds-Button--secondary {
|
|
808
|
+
--Button-background: var(--Button-secondary-background);
|
|
809
|
+
--Button-background-hover: var(--Button-secondary-background-hover);
|
|
810
|
+
--Button-background-active: var(--Button-secondary-background-active);
|
|
811
|
+
--Button-color: var(--Button-secondary-color);
|
|
812
|
+
}
|
|
813
|
+
.wds-Button--tertiary {
|
|
814
|
+
--Button-background: var(--Button-tertiary-background);
|
|
815
|
+
--Button-background-hover: var(--Button-tertiary-background-hover);
|
|
816
|
+
--Button-background-active: var(--Button-tertiary-background-active);
|
|
817
|
+
--Button-color: var(--Button-tertiary-color);
|
|
818
|
+
}
|
|
819
|
+
.wds-Button--tertiary .wds-Button-icon--end {
|
|
820
|
+
color: var(--color-interactive-primary);
|
|
821
|
+
}
|
|
822
|
+
.wds-Button--minimal {
|
|
823
|
+
--Button-background: var(--Button-minimal-background);
|
|
824
|
+
--Button-background-hover: var(--Button-minimal-background-hover);
|
|
825
|
+
--Button-background-active: var(--Button-minimal-background-active);
|
|
826
|
+
--Button-color: var(--Button-minimal-color);
|
|
827
|
+
-webkit-text-decoration: underline;
|
|
828
|
+
text-decoration: underline;
|
|
829
|
+
text-underline-offset: 3px;
|
|
830
|
+
text-decoration-thickness: 1px;
|
|
831
|
+
}
|
|
832
|
+
.wds-Button--minimal:hover,
|
|
833
|
+
.wds-Button--minimal:hover:active {
|
|
834
|
+
-webkit-text-decoration: underline;
|
|
835
|
+
text-decoration: underline;
|
|
836
|
+
}
|
|
837
|
+
.wds-Button--negative.wds-Button--primary {
|
|
838
|
+
--Button-background: var(--Button-primary-negative-background);
|
|
839
|
+
--Button-background-hover: var(--Button-primary-negative-background-hover);
|
|
840
|
+
--Button-background-active: var(--Button-primary-negative-background-active);
|
|
841
|
+
--Button-color: var(--Button-primary-negative-color);
|
|
842
|
+
}
|
|
843
|
+
.wds-Button--negative.wds-Button--secondary {
|
|
844
|
+
--Button-background: var(--Button-secondary-negative-background);
|
|
845
|
+
--Button-background-hover: var(--Button-secondary-negative-background-hover);
|
|
846
|
+
--Button-background-active: var(--Button-secondary-negative-background-active);
|
|
847
|
+
--Button-color: var(--Button-secondary-negative-color);
|
|
848
|
+
}
|
|
849
|
+
.wds-Button--small {
|
|
850
|
+
--Button-padding: var(--Button-size-small-padding);
|
|
851
|
+
}
|
|
852
|
+
.wds-Button--small .wds-Button-icon--start {
|
|
853
|
+
margin-right: 4px;
|
|
854
|
+
margin-right: var(--size-4);
|
|
855
|
+
}
|
|
856
|
+
[dir="rtl"] .wds-Button--small .wds-Button-icon--start {
|
|
857
|
+
margin-right: 0;
|
|
858
|
+
margin-left: 4px;
|
|
859
|
+
margin-left: var(--size-4);
|
|
860
|
+
}
|
|
861
|
+
.wds-Button--medium {
|
|
862
|
+
--Button-padding: var(--Button-size-medium-padding);
|
|
863
|
+
}
|
|
864
|
+
.wds-Button--large {
|
|
865
|
+
--Button-padding: var(--Button-size-large-padding);
|
|
866
|
+
}
|
|
867
|
+
.wds-Button--block {
|
|
868
|
+
width: 100%;
|
|
869
|
+
}
|
|
870
|
+
.wds-Button-avatars {
|
|
871
|
+
display: inline-flex;
|
|
872
|
+
margin-right: 5px;
|
|
873
|
+
margin-left: calc(4px * -1);
|
|
874
|
+
margin-left: calc(var(--size-4) * -1);
|
|
875
|
+
}
|
|
876
|
+
[dir="rtl"] .wds-Button-avatars {
|
|
877
|
+
margin-right: 0;
|
|
878
|
+
margin-left: 5px;
|
|
879
|
+
}
|
|
880
|
+
.wds-Button-avatars .np-avatar-view .np-avatar-view-content {
|
|
881
|
+
color: var(--Button-color);
|
|
882
|
+
}
|
|
883
|
+
.wds-Button-icon {
|
|
884
|
+
display: inline-block;
|
|
885
|
+
}
|
|
886
|
+
.wds-Button-icon--start {
|
|
887
|
+
margin-right: 8px;
|
|
888
|
+
margin-right: var(--size-8);
|
|
889
|
+
}
|
|
890
|
+
[dir="rtl"] .wds-Button-icon--start {
|
|
891
|
+
margin-right: 0;
|
|
892
|
+
margin-left: 8px;
|
|
893
|
+
margin-left: var(--size-8);
|
|
894
|
+
}
|
|
895
|
+
.wds-Button-icon--end {
|
|
896
|
+
margin-left: 4px;
|
|
897
|
+
margin-left: var(--size-4);
|
|
898
|
+
}
|
|
899
|
+
[dir="rtl"] .wds-Button-icon--end {
|
|
900
|
+
margin-left: 0;
|
|
901
|
+
margin-right: 4px;
|
|
902
|
+
margin-right: var(--size-4);
|
|
903
|
+
}
|
|
904
|
+
.wds-Button-content {
|
|
905
|
+
position: relative;
|
|
906
|
+
}
|
|
907
|
+
.wds-Button-content--loading .wds-Button-label,
|
|
908
|
+
.wds-Button-content--loading .wds-Button-media,
|
|
909
|
+
.wds-Button-content--loading .wds-Button-icon {
|
|
910
|
+
visibility: hidden;
|
|
911
|
+
opacity: 0;
|
|
912
|
+
}
|
|
913
|
+
.wds-Button-label {
|
|
914
|
+
display: flex;
|
|
915
|
+
justify-content: center;
|
|
916
|
+
align-items: center;
|
|
917
|
+
position: relative;
|
|
918
|
+
}
|
|
919
|
+
.wds-Button-loader {
|
|
920
|
+
position: absolute;
|
|
921
|
+
display: flex;
|
|
922
|
+
justify-content: center;
|
|
923
|
+
align-items: center;
|
|
924
|
+
width: 100%;
|
|
925
|
+
height: 100%;
|
|
926
|
+
}
|
|
927
|
+
.wds-Button-loader .process-circle {
|
|
928
|
+
stroke: var(--Button-color);
|
|
929
|
+
}
|
|
930
|
+
/* RTL Styles */
|
|
931
|
+
[dir="rtl"] .wds-Button .tw-icon-chevron-right,[dir="rtl"] .wds-Button .tw-icon-arrow-right {
|
|
932
|
+
transform: rotate(180deg);
|
|
933
|
+
}
|
|
934
|
+
[dir="rtl"] .wds-Button .tw-icon-chevron-left,[dir="rtl"] .wds-Button .tw-icon-arrow-left {
|
|
935
|
+
transform: rotate(180deg);
|
|
936
|
+
}
|
|
937
|
+
/* Avatar border transparency */
|
|
938
|
+
/* dark buttons get 20% transparency, light buttons get 12% */
|
|
939
|
+
.wds-Button-avatars .np-circle {
|
|
940
|
+
--circle-border-color: color-mix(in srgb, var(--Button-color) 20%, transparent);
|
|
941
|
+
}
|
|
942
|
+
.np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--secondary.wds-Button--negative .wds-Button-avatars .np-circle,
|
|
943
|
+
.np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--secondary .wds-Button-avatars .np-circle,
|
|
944
|
+
.np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--tertiary .wds-Button-avatars .np-circle,
|
|
945
|
+
.np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--minimal .wds-Button-avatars .np-circle {
|
|
946
|
+
--circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
|
|
947
|
+
}
|
|
948
|
+
.np-theme-personal--dark .wds-Button--primary .wds-Button-avatars .np-circle,
|
|
949
|
+
.np-theme-personal--dark .wds-Button--primary.wds-Button--negative .wds-Button-avatars .np-circle,
|
|
950
|
+
.np-theme-personal--forest-green .wds-Button--primary .wds-Button-avatars .np-circle,
|
|
951
|
+
.np-theme-personal--forest-green .wds-Button--primary.wds-Button--negative .wds-Button-avatars .np-circle {
|
|
952
|
+
--circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
|
|
953
|
+
}
|
|
954
|
+
.np-theme-personal--bright-green .wds-Button--tertiary .wds-Button-avatars .np-circle,
|
|
955
|
+
.np-theme-personal--bright-green .wds-Button--minimal .wds-Button-avatars .np-circle {
|
|
956
|
+
--circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
|
|
957
|
+
}
|
|
708
958
|
.np-card {
|
|
709
959
|
overflow: hidden;
|
|
710
960
|
transition-property: transform, box-shadow;
|
|
@@ -19,9 +19,7 @@ const PrimitiveAnchor = /*#__PURE__*/React.forwardRef(({
|
|
|
19
19
|
onKeyDown,
|
|
20
20
|
...props
|
|
21
21
|
}, ref) => {
|
|
22
|
-
const anchorClasses = clsx.clsx(
|
|
23
|
-
'wds-Anchor--disabled': disabled
|
|
24
|
-
}, className);
|
|
22
|
+
const anchorClasses = clsx.clsx(className);
|
|
25
23
|
const handleClick = React.useCallback(event => {
|
|
26
24
|
if (disabled) {
|
|
27
25
|
event.preventDefault();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PrimitiveAnchor.js","sources":["../../../../src/primitives/PrimitiveAnchor/src/PrimitiveAnchor.tsx"],"sourcesContent":["import React, { forwardRef, useCallback } from 'react';\nimport { clsx } from 'clsx';\nimport type { PrimitiveAnchorProps } from '..';\n\n/**\n * The Primitive `PrimitiveAnchor` component is customisable link element that can be\n * used in various parts of the Wise Design System internally. It supports\n * different states such as disabled and provides event handlers for common\n * interactions like click, focus, blur, mouse enter, mouse leave, and key down.\n *\n * @see {@link PrimitiveAnchor} for further information.\n * @see {@link https://storybook.wise.design/?path=/docs/primitive-anchor--docs|Storybook Wise Design}\n */\nconst PrimitiveAnchor = forwardRef<HTMLAnchorElement, PrimitiveAnchorProps>(\n (\n {\n children,\n className,\n href,\n id,\n disabled = false,\n testId,\n onClick,\n onFocus,\n onBlur,\n onMouseEnter,\n onMouseLeave,\n onKeyDown,\n ...props\n },\n ref,\n ) => {\n const anchorClasses = clsx(
|
|
1
|
+
{"version":3,"file":"PrimitiveAnchor.js","sources":["../../../../src/primitives/PrimitiveAnchor/src/PrimitiveAnchor.tsx"],"sourcesContent":["import React, { forwardRef, useCallback } from 'react';\nimport { clsx } from 'clsx';\nimport type { PrimitiveAnchorProps } from '..';\n\n/**\n * The Primitive `PrimitiveAnchor` component is customisable link element that can be\n * used in various parts of the Wise Design System internally. It supports\n * different states such as disabled and provides event handlers for common\n * interactions like click, focus, blur, mouse enter, mouse leave, and key down.\n *\n * @see {@link PrimitiveAnchor} for further information.\n * @see {@link https://storybook.wise.design/?path=/docs/primitive-anchor--docs|Storybook Wise Design}\n */\nconst PrimitiveAnchor = forwardRef<HTMLAnchorElement, PrimitiveAnchorProps>(\n (\n {\n children,\n className,\n href,\n id,\n disabled = false,\n testId,\n onClick,\n onFocus,\n onBlur,\n onMouseEnter,\n onMouseLeave,\n onKeyDown,\n ...props\n },\n ref,\n ) => {\n const anchorClasses = clsx(className);\n\n const handleClick = useCallback(\n (event: React.MouseEvent<HTMLAnchorElement>) => {\n if (disabled) {\n event.preventDefault();\n } else {\n onClick?.(event);\n }\n },\n [disabled, onClick],\n );\n\n const handleFocus = useCallback(\n (event: React.FocusEvent<HTMLAnchorElement>) => {\n onFocus?.(event);\n },\n [onFocus],\n );\n\n const handleBlur = useCallback(\n (event: React.FocusEvent<HTMLAnchorElement>) => {\n onBlur?.(event);\n },\n [onBlur],\n );\n\n const handleMouseEnter = useCallback(\n (event: React.MouseEvent<HTMLAnchorElement>) => {\n onMouseEnter?.(event);\n },\n [onMouseEnter],\n );\n\n const handleMouseLeave = useCallback(\n (event: React.MouseEvent<HTMLAnchorElement>) => {\n onMouseLeave?.(event);\n },\n [onMouseLeave],\n );\n\n const handleKeyDown = useCallback(\n (event: React.KeyboardEvent<HTMLAnchorElement>) => {\n onKeyDown?.(event);\n },\n [onKeyDown],\n );\n\n /**\n * The following props are set to handle the `disabled` state for the link:\n *\n * - `aria-disabled`: Exposes the link as disabled to assistive technologies.\n * - `href`: Removed when `disabled` is true to prevent navigation.\n * - `role`: Set to 'link' when `disabled` is true to ensure the element\n * is still exposed as a link.\n *\n * For more details, refer to Scott O'Hara's article on disabling links:\n * https://www.scottohara.me/blog/2021/05/28/disabled-links.html\n */\n const anchorProps = {\n 'aria-disabled': disabled,\n className: anchorClasses,\n 'data-testid': testId,\n href: disabled ? undefined : href,\n id,\n ref,\n role: disabled ? 'link' : undefined,\n rel: props.target === '_blank' ? 'noopener noreferrer' : undefined,\n onClick: handleClick,\n onFocus: handleFocus,\n onBlur: handleBlur,\n onMouseEnter: handleMouseEnter,\n onMouseLeave: handleMouseLeave,\n onKeyDown: handleKeyDown,\n ...props,\n };\n\n return <a {...anchorProps}>{children}</a>;\n },\n);\n\nPrimitiveAnchor.displayName = 'PrimitiveAnchor';\n\nexport default PrimitiveAnchor;\n"],"names":["PrimitiveAnchor","forwardRef","children","className","href","id","disabled","testId","onClick","onFocus","onBlur","onMouseEnter","onMouseLeave","onKeyDown","props","ref","anchorClasses","clsx","handleClick","useCallback","event","preventDefault","handleFocus","handleBlur","handleMouseEnter","handleMouseLeave","handleKeyDown","anchorProps","undefined","role","rel","target","_jsx","displayName"],"mappings":";;;;;;AAaA,MAAMA,eAAe,gBAAGC,gBAAU,CAChC,CACE;EACEC,QAAQ;EACRC,SAAS;EACTC,IAAI;EACJC,EAAE;AACFC,EAAAA,QAAQ,GAAG,KAAK;EAChBC,MAAM;EACNC,OAAO;EACPC,OAAO;EACPC,MAAM;EACNC,YAAY;EACZC,YAAY;EACZC,SAAS;EACT,GAAGC,KAAAA;CACJ,EACDC,GAAG,KACD;AACF,EAAA,MAAMC,aAAa,GAAGC,SAAI,CAACd,SAAS,CAAC,CAAA;AAErC,EAAA,MAAMe,WAAW,GAAGC,iBAAW,CAC5BC,KAA0C,IAAI;AAC7C,IAAA,IAAId,QAAQ,EAAE;MACZc,KAAK,CAACC,cAAc,EAAE,CAAA;AACxB,KAAC,MAAM;MACLb,OAAO,GAAGY,KAAK,CAAC,CAAA;AAClB,KAAA;AACF,GAAC,EACD,CAACd,QAAQ,EAAEE,OAAO,CAAC,CACpB,CAAA;AAED,EAAA,MAAMc,WAAW,GAAGH,iBAAW,CAC5BC,KAA0C,IAAI;IAC7CX,OAAO,GAAGW,KAAK,CAAC,CAAA;AAClB,GAAC,EACD,CAACX,OAAO,CAAC,CACV,CAAA;AAED,EAAA,MAAMc,UAAU,GAAGJ,iBAAW,CAC3BC,KAA0C,IAAI;IAC7CV,MAAM,GAAGU,KAAK,CAAC,CAAA;AACjB,GAAC,EACD,CAACV,MAAM,CAAC,CACT,CAAA;AAED,EAAA,MAAMc,gBAAgB,GAAGL,iBAAW,CACjCC,KAA0C,IAAI;IAC7CT,YAAY,GAAGS,KAAK,CAAC,CAAA;AACvB,GAAC,EACD,CAACT,YAAY,CAAC,CACf,CAAA;AAED,EAAA,MAAMc,gBAAgB,GAAGN,iBAAW,CACjCC,KAA0C,IAAI;IAC7CR,YAAY,GAAGQ,KAAK,CAAC,CAAA;AACvB,GAAC,EACD,CAACR,YAAY,CAAC,CACf,CAAA;AAED,EAAA,MAAMc,aAAa,GAAGP,iBAAW,CAC9BC,KAA6C,IAAI;IAChDP,SAAS,GAAGO,KAAK,CAAC,CAAA;AACpB,GAAC,EACD,CAACP,SAAS,CAAC,CACZ,CAAA;AAED;;;;;;;;;;AAUG;AACH,EAAA,MAAMc,WAAW,GAAG;AAClB,IAAA,eAAe,EAAErB,QAAQ;AACzBH,IAAAA,SAAS,EAAEa,aAAa;AACxB,IAAA,aAAa,EAAET,MAAM;AACrBH,IAAAA,IAAI,EAAEE,QAAQ,GAAGsB,SAAS,GAAGxB,IAAI;IACjCC,EAAE;IACFU,GAAG;AACHc,IAAAA,IAAI,EAAEvB,QAAQ,GAAG,MAAM,GAAGsB,SAAS;IACnCE,GAAG,EAAEhB,KAAK,CAACiB,MAAM,KAAK,QAAQ,GAAG,qBAAqB,GAAGH,SAAS;AAClEpB,IAAAA,OAAO,EAAEU,WAAW;AACpBT,IAAAA,OAAO,EAAEa,WAAW;AACpBZ,IAAAA,MAAM,EAAEa,UAAU;AAClBZ,IAAAA,YAAY,EAAEa,gBAAgB;AAC9BZ,IAAAA,YAAY,EAAEa,gBAAgB;AAC9BZ,IAAAA,SAAS,EAAEa,aAAa;IACxB,GAAGZ,KAAAA;GACJ,CAAA;AAED,EAAA,oBAAOkB,cAAA,CAAA,GAAA,EAAA;AAAA,IAAA,GAAOL,WAAW;AAAAzB,IAAAA,QAAA,EAAGA,QAAAA;AAAQ,GAAI,CAAC,CAAA;AAC3C,CAAC,EACF;AAEDF,eAAe,CAACiC,WAAW,GAAG,iBAAiB;;;;"}
|
|
@@ -17,9 +17,7 @@ const PrimitiveAnchor = /*#__PURE__*/forwardRef(({
|
|
|
17
17
|
onKeyDown,
|
|
18
18
|
...props
|
|
19
19
|
}, ref) => {
|
|
20
|
-
const anchorClasses = clsx(
|
|
21
|
-
'wds-Anchor--disabled': disabled
|
|
22
|
-
}, className);
|
|
20
|
+
const anchorClasses = clsx(className);
|
|
23
21
|
const handleClick = useCallback(event => {
|
|
24
22
|
if (disabled) {
|
|
25
23
|
event.preventDefault();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PrimitiveAnchor.mjs","sources":["../../../../src/primitives/PrimitiveAnchor/src/PrimitiveAnchor.tsx"],"sourcesContent":["import React, { forwardRef, useCallback } from 'react';\nimport { clsx } from 'clsx';\nimport type { PrimitiveAnchorProps } from '..';\n\n/**\n * The Primitive `PrimitiveAnchor` component is customisable link element that can be\n * used in various parts of the Wise Design System internally. It supports\n * different states such as disabled and provides event handlers for common\n * interactions like click, focus, blur, mouse enter, mouse leave, and key down.\n *\n * @see {@link PrimitiveAnchor} for further information.\n * @see {@link https://storybook.wise.design/?path=/docs/primitive-anchor--docs|Storybook Wise Design}\n */\nconst PrimitiveAnchor = forwardRef<HTMLAnchorElement, PrimitiveAnchorProps>(\n (\n {\n children,\n className,\n href,\n id,\n disabled = false,\n testId,\n onClick,\n onFocus,\n onBlur,\n onMouseEnter,\n onMouseLeave,\n onKeyDown,\n ...props\n },\n ref,\n ) => {\n const anchorClasses = clsx(
|
|
1
|
+
{"version":3,"file":"PrimitiveAnchor.mjs","sources":["../../../../src/primitives/PrimitiveAnchor/src/PrimitiveAnchor.tsx"],"sourcesContent":["import React, { forwardRef, useCallback } from 'react';\nimport { clsx } from 'clsx';\nimport type { PrimitiveAnchorProps } from '..';\n\n/**\n * The Primitive `PrimitiveAnchor` component is customisable link element that can be\n * used in various parts of the Wise Design System internally. It supports\n * different states such as disabled and provides event handlers for common\n * interactions like click, focus, blur, mouse enter, mouse leave, and key down.\n *\n * @see {@link PrimitiveAnchor} for further information.\n * @see {@link https://storybook.wise.design/?path=/docs/primitive-anchor--docs|Storybook Wise Design}\n */\nconst PrimitiveAnchor = forwardRef<HTMLAnchorElement, PrimitiveAnchorProps>(\n (\n {\n children,\n className,\n href,\n id,\n disabled = false,\n testId,\n onClick,\n onFocus,\n onBlur,\n onMouseEnter,\n onMouseLeave,\n onKeyDown,\n ...props\n },\n ref,\n ) => {\n const anchorClasses = clsx(className);\n\n const handleClick = useCallback(\n (event: React.MouseEvent<HTMLAnchorElement>) => {\n if (disabled) {\n event.preventDefault();\n } else {\n onClick?.(event);\n }\n },\n [disabled, onClick],\n );\n\n const handleFocus = useCallback(\n (event: React.FocusEvent<HTMLAnchorElement>) => {\n onFocus?.(event);\n },\n [onFocus],\n );\n\n const handleBlur = useCallback(\n (event: React.FocusEvent<HTMLAnchorElement>) => {\n onBlur?.(event);\n },\n [onBlur],\n );\n\n const handleMouseEnter = useCallback(\n (event: React.MouseEvent<HTMLAnchorElement>) => {\n onMouseEnter?.(event);\n },\n [onMouseEnter],\n );\n\n const handleMouseLeave = useCallback(\n (event: React.MouseEvent<HTMLAnchorElement>) => {\n onMouseLeave?.(event);\n },\n [onMouseLeave],\n );\n\n const handleKeyDown = useCallback(\n (event: React.KeyboardEvent<HTMLAnchorElement>) => {\n onKeyDown?.(event);\n },\n [onKeyDown],\n );\n\n /**\n * The following props are set to handle the `disabled` state for the link:\n *\n * - `aria-disabled`: Exposes the link as disabled to assistive technologies.\n * - `href`: Removed when `disabled` is true to prevent navigation.\n * - `role`: Set to 'link' when `disabled` is true to ensure the element\n * is still exposed as a link.\n *\n * For more details, refer to Scott O'Hara's article on disabling links:\n * https://www.scottohara.me/blog/2021/05/28/disabled-links.html\n */\n const anchorProps = {\n 'aria-disabled': disabled,\n className: anchorClasses,\n 'data-testid': testId,\n href: disabled ? undefined : href,\n id,\n ref,\n role: disabled ? 'link' : undefined,\n rel: props.target === '_blank' ? 'noopener noreferrer' : undefined,\n onClick: handleClick,\n onFocus: handleFocus,\n onBlur: handleBlur,\n onMouseEnter: handleMouseEnter,\n onMouseLeave: handleMouseLeave,\n onKeyDown: handleKeyDown,\n ...props,\n };\n\n return <a {...anchorProps}>{children}</a>;\n },\n);\n\nPrimitiveAnchor.displayName = 'PrimitiveAnchor';\n\nexport default PrimitiveAnchor;\n"],"names":["PrimitiveAnchor","forwardRef","children","className","href","id","disabled","testId","onClick","onFocus","onBlur","onMouseEnter","onMouseLeave","onKeyDown","props","ref","anchorClasses","clsx","handleClick","useCallback","event","preventDefault","handleFocus","handleBlur","handleMouseEnter","handleMouseLeave","handleKeyDown","anchorProps","undefined","role","rel","target","_jsx","displayName"],"mappings":";;;;AAaA,MAAMA,eAAe,gBAAGC,UAAU,CAChC,CACE;EACEC,QAAQ;EACRC,SAAS;EACTC,IAAI;EACJC,EAAE;AACFC,EAAAA,QAAQ,GAAG,KAAK;EAChBC,MAAM;EACNC,OAAO;EACPC,OAAO;EACPC,MAAM;EACNC,YAAY;EACZC,YAAY;EACZC,SAAS;EACT,GAAGC,KAAAA;CACJ,EACDC,GAAG,KACD;AACF,EAAA,MAAMC,aAAa,GAAGC,IAAI,CAACd,SAAS,CAAC,CAAA;AAErC,EAAA,MAAMe,WAAW,GAAGC,WAAW,CAC5BC,KAA0C,IAAI;AAC7C,IAAA,IAAId,QAAQ,EAAE;MACZc,KAAK,CAACC,cAAc,EAAE,CAAA;AACxB,KAAC,MAAM;MACLb,OAAO,GAAGY,KAAK,CAAC,CAAA;AAClB,KAAA;AACF,GAAC,EACD,CAACd,QAAQ,EAAEE,OAAO,CAAC,CACpB,CAAA;AAED,EAAA,MAAMc,WAAW,GAAGH,WAAW,CAC5BC,KAA0C,IAAI;IAC7CX,OAAO,GAAGW,KAAK,CAAC,CAAA;AAClB,GAAC,EACD,CAACX,OAAO,CAAC,CACV,CAAA;AAED,EAAA,MAAMc,UAAU,GAAGJ,WAAW,CAC3BC,KAA0C,IAAI;IAC7CV,MAAM,GAAGU,KAAK,CAAC,CAAA;AACjB,GAAC,EACD,CAACV,MAAM,CAAC,CACT,CAAA;AAED,EAAA,MAAMc,gBAAgB,GAAGL,WAAW,CACjCC,KAA0C,IAAI;IAC7CT,YAAY,GAAGS,KAAK,CAAC,CAAA;AACvB,GAAC,EACD,CAACT,YAAY,CAAC,CACf,CAAA;AAED,EAAA,MAAMc,gBAAgB,GAAGN,WAAW,CACjCC,KAA0C,IAAI;IAC7CR,YAAY,GAAGQ,KAAK,CAAC,CAAA;AACvB,GAAC,EACD,CAACR,YAAY,CAAC,CACf,CAAA;AAED,EAAA,MAAMc,aAAa,GAAGP,WAAW,CAC9BC,KAA6C,IAAI;IAChDP,SAAS,GAAGO,KAAK,CAAC,CAAA;AACpB,GAAC,EACD,CAACP,SAAS,CAAC,CACZ,CAAA;AAED;;;;;;;;;;AAUG;AACH,EAAA,MAAMc,WAAW,GAAG;AAClB,IAAA,eAAe,EAAErB,QAAQ;AACzBH,IAAAA,SAAS,EAAEa,aAAa;AACxB,IAAA,aAAa,EAAET,MAAM;AACrBH,IAAAA,IAAI,EAAEE,QAAQ,GAAGsB,SAAS,GAAGxB,IAAI;IACjCC,EAAE;IACFU,GAAG;AACHc,IAAAA,IAAI,EAAEvB,QAAQ,GAAG,MAAM,GAAGsB,SAAS;IACnCE,GAAG,EAAEhB,KAAK,CAACiB,MAAM,KAAK,QAAQ,GAAG,qBAAqB,GAAGH,SAAS;AAClEpB,IAAAA,OAAO,EAAEU,WAAW;AACpBT,IAAAA,OAAO,EAAEa,WAAW;AACpBZ,IAAAA,MAAM,EAAEa,UAAU;AAClBZ,IAAAA,YAAY,EAAEa,gBAAgB;AAC9BZ,IAAAA,YAAY,EAAEa,gBAAgB;AAC9BZ,IAAAA,SAAS,EAAEa,aAAa;IACxB,GAAGZ,KAAAA;GACJ,CAAA;AAED,EAAA,oBAAOkB,GAAA,CAAA,GAAA,EAAA;AAAA,IAAA,GAAOL,WAAW;AAAAzB,IAAAA,QAAA,EAAGA,QAAAA;AAAQ,GAAI,CAAC,CAAA;AAC3C,CAAC,EACF;AAEDF,eAAe,CAACiC,WAAW,GAAG,iBAAiB;;;;"}
|
|
@@ -24,10 +24,7 @@ const PrimitiveButton = /*#__PURE__*/React.forwardRef(({
|
|
|
24
24
|
...props
|
|
25
25
|
}, ref) => {
|
|
26
26
|
const intl = reactIntl.useIntl();
|
|
27
|
-
const classNames = clsx.clsx(
|
|
28
|
-
'wds-Button--disabled': disabled,
|
|
29
|
-
'wds-Button--loading': loading
|
|
30
|
-
}, className);
|
|
27
|
+
const classNames = clsx.clsx(className);
|
|
31
28
|
const handleClick = React.useCallback(event => {
|
|
32
29
|
if (disabled || loading) {
|
|
33
30
|
event.preventDefault();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PrimitiveButton.js","sources":["../../../../src/primitives/PrimitiveButton/src/PrimitiveButton.tsx"],"sourcesContent":["/* eslint-disable react/button-has-type */\nimport React, { forwardRef, useCallback } from 'react';\nimport { clsx } from 'clsx';\nimport { useIntl, MessageDescriptor } from 'react-intl';\nimport messages from '../../../i18n/commonMessages/Button.messages';\nimport type { PrimitiveButtonProps } from '..';\n\n/**\n * The Primitive `PrimitiveButton` component can be used in various parts the Wise Design\n * System internally. It supports different states such as disabled and loading,\n * and provides event handlers for common interactions like click, focus, blur,\n * mouse enter, mouse leave, and keydown.\n *\n * @see {@link PrimitiveButton} for further information.\n * @see {@link https://storybook.wise.design/?path=/docs/primitive-button--docs|Storybook Wise Design}\n */\nconst PrimitiveButton = forwardRef<HTMLButtonElement, PrimitiveButtonProps>(\n (\n {\n children,\n className,\n id,\n disabled = false,\n loading = false,\n testId,\n type = 'button',\n onClick,\n onFocus,\n onBlur,\n onMouseEnter,\n onMouseLeave,\n onKeyDown,\n ...props\n },\n ref,\n ) => {\n const intl = useIntl();\n const classNames = clsx(
|
|
1
|
+
{"version":3,"file":"PrimitiveButton.js","sources":["../../../../src/primitives/PrimitiveButton/src/PrimitiveButton.tsx"],"sourcesContent":["/* eslint-disable react/button-has-type */\nimport React, { forwardRef, useCallback } from 'react';\nimport { clsx } from 'clsx';\nimport { useIntl, MessageDescriptor } from 'react-intl';\nimport messages from '../../../i18n/commonMessages/Button.messages';\nimport type { PrimitiveButtonProps } from '..';\n\n/**\n * The Primitive `PrimitiveButton` component can be used in various parts the Wise Design\n * System internally. It supports different states such as disabled and loading,\n * and provides event handlers for common interactions like click, focus, blur,\n * mouse enter, mouse leave, and keydown.\n *\n * @see {@link PrimitiveButton} for further information.\n * @see {@link https://storybook.wise.design/?path=/docs/primitive-button--docs|Storybook Wise Design}\n */\nconst PrimitiveButton = forwardRef<HTMLButtonElement, PrimitiveButtonProps>(\n (\n {\n children,\n className,\n id,\n disabled = false,\n loading = false,\n testId,\n type = 'button',\n onClick,\n onFocus,\n onBlur,\n onMouseEnter,\n onMouseLeave,\n onKeyDown,\n ...props\n },\n ref,\n ) => {\n const intl = useIntl();\n const classNames = clsx(className);\n\n const handleClick = useCallback(\n (event: React.MouseEvent<HTMLButtonElement>) => {\n if (disabled || loading) {\n event.preventDefault();\n } else {\n onClick?.(event);\n }\n },\n [disabled, loading, onClick],\n );\n\n const handleFocus = useCallback(\n (event: React.FocusEvent<HTMLButtonElement>) => {\n onFocus?.(event);\n },\n [onFocus],\n );\n\n const handleBlur = useCallback(\n (event: React.FocusEvent<HTMLButtonElement>) => {\n onBlur?.(event);\n },\n [onBlur],\n );\n\n const handleMouseEnter = useCallback(\n (event: React.MouseEvent<HTMLButtonElement>) => {\n onMouseEnter?.(event);\n },\n [onMouseEnter],\n );\n\n const handleMouseLeave = useCallback(\n (event: React.MouseEvent<HTMLButtonElement>) => {\n onMouseLeave?.(event);\n },\n [onMouseLeave],\n );\n\n const handleKeyDown = useCallback(\n (event: React.KeyboardEvent<HTMLButtonElement>) => {\n onKeyDown?.(event);\n },\n [onKeyDown],\n );\n\n /**\n * The following props are used to manage the `disabled` and `loading`\n * states for the button:\n *\n * - `aria-disabled`: Communicates to assistive technologies that the button\n * is disabled when it is either disabled or loading.\n * - `aria-label`: Provides an accessible label for the button, using a\n * localized loading message when the button is in a loading state.\n * - `aria-live`: Ensures that updates to the button's content are announced\n * by assistive technologies, set to 'polite' during loading.\n */\n const buttonProps = {\n 'aria-disabled': disabled || loading,\n 'aria-label': loading\n ? intl.formatMessage(messages.loadingAriaLabel as MessageDescriptor)\n : props['aria-label'],\n 'aria-live': (loading ? 'polite' : 'off') as 'polite' | 'off' | 'assertive' | undefined,\n className: classNames,\n 'data-testid': testId,\n disabled,\n id,\n ref,\n type,\n onBlur: handleBlur,\n onClick: handleClick,\n onFocus: handleFocus,\n onMouseEnter: handleMouseEnter,\n onMouseLeave: handleMouseLeave,\n onKeyDown: handleKeyDown,\n ...props,\n };\n\n return <button {...buttonProps}>{children}</button>;\n },\n);\n\nPrimitiveButton.displayName = 'PrimitiveButton';\n\nexport default PrimitiveButton;\n"],"names":["PrimitiveButton","forwardRef","children","className","id","disabled","loading","testId","type","onClick","onFocus","onBlur","onMouseEnter","onMouseLeave","onKeyDown","props","ref","intl","useIntl","classNames","clsx","handleClick","useCallback","event","preventDefault","handleFocus","handleBlur","handleMouseEnter","handleMouseLeave","handleKeyDown","buttonProps","formatMessage","messages","loadingAriaLabel","_jsx","displayName"],"mappings":";;;;;;;;AAAA;AAgBA,MAAMA,eAAe,gBAAGC,gBAAU,CAChC,CACE;EACEC,QAAQ;EACRC,SAAS;EACTC,EAAE;AACFC,EAAAA,QAAQ,GAAG,KAAK;AAChBC,EAAAA,OAAO,GAAG,KAAK;EACfC,MAAM;AACNC,EAAAA,IAAI,GAAG,QAAQ;EACfC,OAAO;EACPC,OAAO;EACPC,MAAM;EACNC,YAAY;EACZC,YAAY;EACZC,SAAS;EACT,GAAGC,KAAAA;CACJ,EACDC,GAAG,KACD;AACF,EAAA,MAAMC,IAAI,GAAGC,iBAAO,EAAE,CAAA;AACtB,EAAA,MAAMC,UAAU,GAAGC,SAAI,CAACjB,SAAS,CAAC,CAAA;AAElC,EAAA,MAAMkB,WAAW,GAAGC,iBAAW,CAC5BC,KAA0C,IAAI;IAC7C,IAAIlB,QAAQ,IAAIC,OAAO,EAAE;MACvBiB,KAAK,CAACC,cAAc,EAAE,CAAA;AACxB,KAAC,MAAM;MACLf,OAAO,GAAGc,KAAK,CAAC,CAAA;AAClB,KAAA;GACD,EACD,CAAClB,QAAQ,EAAEC,OAAO,EAAEG,OAAO,CAAC,CAC7B,CAAA;AAED,EAAA,MAAMgB,WAAW,GAAGH,iBAAW,CAC5BC,KAA0C,IAAI;IAC7Cb,OAAO,GAAGa,KAAK,CAAC,CAAA;AAClB,GAAC,EACD,CAACb,OAAO,CAAC,CACV,CAAA;AAED,EAAA,MAAMgB,UAAU,GAAGJ,iBAAW,CAC3BC,KAA0C,IAAI;IAC7CZ,MAAM,GAAGY,KAAK,CAAC,CAAA;AACjB,GAAC,EACD,CAACZ,MAAM,CAAC,CACT,CAAA;AAED,EAAA,MAAMgB,gBAAgB,GAAGL,iBAAW,CACjCC,KAA0C,IAAI;IAC7CX,YAAY,GAAGW,KAAK,CAAC,CAAA;AACvB,GAAC,EACD,CAACX,YAAY,CAAC,CACf,CAAA;AAED,EAAA,MAAMgB,gBAAgB,GAAGN,iBAAW,CACjCC,KAA0C,IAAI;IAC7CV,YAAY,GAAGU,KAAK,CAAC,CAAA;AACvB,GAAC,EACD,CAACV,YAAY,CAAC,CACf,CAAA;AAED,EAAA,MAAMgB,aAAa,GAAGP,iBAAW,CAC9BC,KAA6C,IAAI;IAChDT,SAAS,GAAGS,KAAK,CAAC,CAAA;AACpB,GAAC,EACD,CAACT,SAAS,CAAC,CACZ,CAAA;AAED;;;;;;;;;;AAUG;AACH,EAAA,MAAMgB,WAAW,GAAG;IAClB,eAAe,EAAEzB,QAAQ,IAAIC,OAAO;AACpC,IAAA,YAAY,EAAEA,OAAO,GACjBW,IAAI,CAACc,aAAa,CAACC,eAAQ,CAACC,gBAAqC,CAAC,GAClElB,KAAK,CAAC,YAAY,CAAC;AACvB,IAAA,WAAW,EAAGT,OAAO,GAAG,QAAQ,GAAG,KAAoD;AACvFH,IAAAA,SAAS,EAAEgB,UAAU;AACrB,IAAA,aAAa,EAAEZ,MAAM;IACrBF,QAAQ;IACRD,EAAE;IACFY,GAAG;IACHR,IAAI;AACJG,IAAAA,MAAM,EAAEe,UAAU;AAClBjB,IAAAA,OAAO,EAAEY,WAAW;AACpBX,IAAAA,OAAO,EAAEe,WAAW;AACpBb,IAAAA,YAAY,EAAEe,gBAAgB;AAC9Bd,IAAAA,YAAY,EAAEe,gBAAgB;AAC9Bd,IAAAA,SAAS,EAAEe,aAAa;IACxB,GAAGd,KAAAA;GACJ,CAAA;AAED,EAAA,oBAAOmB,cAAA,CAAA,QAAA,EAAA;AAAA,IAAA,GAAYJ,WAAW;AAAA5B,IAAAA,QAAA,EAAGA,QAAAA;AAAQ,GAAS,CAAC,CAAA;AACrD,CAAC,EACF;AAEDF,eAAe,CAACmC,WAAW,GAAG,iBAAiB;;;;"}
|
|
@@ -22,10 +22,7 @@ const PrimitiveButton = /*#__PURE__*/forwardRef(({
|
|
|
22
22
|
...props
|
|
23
23
|
}, ref) => {
|
|
24
24
|
const intl = useIntl();
|
|
25
|
-
const classNames = clsx(
|
|
26
|
-
'wds-Button--disabled': disabled,
|
|
27
|
-
'wds-Button--loading': loading
|
|
28
|
-
}, className);
|
|
25
|
+
const classNames = clsx(className);
|
|
29
26
|
const handleClick = useCallback(event => {
|
|
30
27
|
if (disabled || loading) {
|
|
31
28
|
event.preventDefault();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PrimitiveButton.mjs","sources":["../../../../src/primitives/PrimitiveButton/src/PrimitiveButton.tsx"],"sourcesContent":["/* eslint-disable react/button-has-type */\nimport React, { forwardRef, useCallback } from 'react';\nimport { clsx } from 'clsx';\nimport { useIntl, MessageDescriptor } from 'react-intl';\nimport messages from '../../../i18n/commonMessages/Button.messages';\nimport type { PrimitiveButtonProps } from '..';\n\n/**\n * The Primitive `PrimitiveButton` component can be used in various parts the Wise Design\n * System internally. It supports different states such as disabled and loading,\n * and provides event handlers for common interactions like click, focus, blur,\n * mouse enter, mouse leave, and keydown.\n *\n * @see {@link PrimitiveButton} for further information.\n * @see {@link https://storybook.wise.design/?path=/docs/primitive-button--docs|Storybook Wise Design}\n */\nconst PrimitiveButton = forwardRef<HTMLButtonElement, PrimitiveButtonProps>(\n (\n {\n children,\n className,\n id,\n disabled = false,\n loading = false,\n testId,\n type = 'button',\n onClick,\n onFocus,\n onBlur,\n onMouseEnter,\n onMouseLeave,\n onKeyDown,\n ...props\n },\n ref,\n ) => {\n const intl = useIntl();\n const classNames = clsx(
|
|
1
|
+
{"version":3,"file":"PrimitiveButton.mjs","sources":["../../../../src/primitives/PrimitiveButton/src/PrimitiveButton.tsx"],"sourcesContent":["/* eslint-disable react/button-has-type */\nimport React, { forwardRef, useCallback } from 'react';\nimport { clsx } from 'clsx';\nimport { useIntl, MessageDescriptor } from 'react-intl';\nimport messages from '../../../i18n/commonMessages/Button.messages';\nimport type { PrimitiveButtonProps } from '..';\n\n/**\n * The Primitive `PrimitiveButton` component can be used in various parts the Wise Design\n * System internally. It supports different states such as disabled and loading,\n * and provides event handlers for common interactions like click, focus, blur,\n * mouse enter, mouse leave, and keydown.\n *\n * @see {@link PrimitiveButton} for further information.\n * @see {@link https://storybook.wise.design/?path=/docs/primitive-button--docs|Storybook Wise Design}\n */\nconst PrimitiveButton = forwardRef<HTMLButtonElement, PrimitiveButtonProps>(\n (\n {\n children,\n className,\n id,\n disabled = false,\n loading = false,\n testId,\n type = 'button',\n onClick,\n onFocus,\n onBlur,\n onMouseEnter,\n onMouseLeave,\n onKeyDown,\n ...props\n },\n ref,\n ) => {\n const intl = useIntl();\n const classNames = clsx(className);\n\n const handleClick = useCallback(\n (event: React.MouseEvent<HTMLButtonElement>) => {\n if (disabled || loading) {\n event.preventDefault();\n } else {\n onClick?.(event);\n }\n },\n [disabled, loading, onClick],\n );\n\n const handleFocus = useCallback(\n (event: React.FocusEvent<HTMLButtonElement>) => {\n onFocus?.(event);\n },\n [onFocus],\n );\n\n const handleBlur = useCallback(\n (event: React.FocusEvent<HTMLButtonElement>) => {\n onBlur?.(event);\n },\n [onBlur],\n );\n\n const handleMouseEnter = useCallback(\n (event: React.MouseEvent<HTMLButtonElement>) => {\n onMouseEnter?.(event);\n },\n [onMouseEnter],\n );\n\n const handleMouseLeave = useCallback(\n (event: React.MouseEvent<HTMLButtonElement>) => {\n onMouseLeave?.(event);\n },\n [onMouseLeave],\n );\n\n const handleKeyDown = useCallback(\n (event: React.KeyboardEvent<HTMLButtonElement>) => {\n onKeyDown?.(event);\n },\n [onKeyDown],\n );\n\n /**\n * The following props are used to manage the `disabled` and `loading`\n * states for the button:\n *\n * - `aria-disabled`: Communicates to assistive technologies that the button\n * is disabled when it is either disabled or loading.\n * - `aria-label`: Provides an accessible label for the button, using a\n * localized loading message when the button is in a loading state.\n * - `aria-live`: Ensures that updates to the button's content are announced\n * by assistive technologies, set to 'polite' during loading.\n */\n const buttonProps = {\n 'aria-disabled': disabled || loading,\n 'aria-label': loading\n ? intl.formatMessage(messages.loadingAriaLabel as MessageDescriptor)\n : props['aria-label'],\n 'aria-live': (loading ? 'polite' : 'off') as 'polite' | 'off' | 'assertive' | undefined,\n className: classNames,\n 'data-testid': testId,\n disabled,\n id,\n ref,\n type,\n onBlur: handleBlur,\n onClick: handleClick,\n onFocus: handleFocus,\n onMouseEnter: handleMouseEnter,\n onMouseLeave: handleMouseLeave,\n onKeyDown: handleKeyDown,\n ...props,\n };\n\n return <button {...buttonProps}>{children}</button>;\n },\n);\n\nPrimitiveButton.displayName = 'PrimitiveButton';\n\nexport default PrimitiveButton;\n"],"names":["PrimitiveButton","forwardRef","children","className","id","disabled","loading","testId","type","onClick","onFocus","onBlur","onMouseEnter","onMouseLeave","onKeyDown","props","ref","intl","useIntl","classNames","clsx","handleClick","useCallback","event","preventDefault","handleFocus","handleBlur","handleMouseEnter","handleMouseLeave","handleKeyDown","buttonProps","formatMessage","messages","loadingAriaLabel","_jsx","displayName"],"mappings":";;;;;;AAAA;AAgBA,MAAMA,eAAe,gBAAGC,UAAU,CAChC,CACE;EACEC,QAAQ;EACRC,SAAS;EACTC,EAAE;AACFC,EAAAA,QAAQ,GAAG,KAAK;AAChBC,EAAAA,OAAO,GAAG,KAAK;EACfC,MAAM;AACNC,EAAAA,IAAI,GAAG,QAAQ;EACfC,OAAO;EACPC,OAAO;EACPC,MAAM;EACNC,YAAY;EACZC,YAAY;EACZC,SAAS;EACT,GAAGC,KAAAA;CACJ,EACDC,GAAG,KACD;AACF,EAAA,MAAMC,IAAI,GAAGC,OAAO,EAAE,CAAA;AACtB,EAAA,MAAMC,UAAU,GAAGC,IAAI,CAACjB,SAAS,CAAC,CAAA;AAElC,EAAA,MAAMkB,WAAW,GAAGC,WAAW,CAC5BC,KAA0C,IAAI;IAC7C,IAAIlB,QAAQ,IAAIC,OAAO,EAAE;MACvBiB,KAAK,CAACC,cAAc,EAAE,CAAA;AACxB,KAAC,MAAM;MACLf,OAAO,GAAGc,KAAK,CAAC,CAAA;AAClB,KAAA;GACD,EACD,CAAClB,QAAQ,EAAEC,OAAO,EAAEG,OAAO,CAAC,CAC7B,CAAA;AAED,EAAA,MAAMgB,WAAW,GAAGH,WAAW,CAC5BC,KAA0C,IAAI;IAC7Cb,OAAO,GAAGa,KAAK,CAAC,CAAA;AAClB,GAAC,EACD,CAACb,OAAO,CAAC,CACV,CAAA;AAED,EAAA,MAAMgB,UAAU,GAAGJ,WAAW,CAC3BC,KAA0C,IAAI;IAC7CZ,MAAM,GAAGY,KAAK,CAAC,CAAA;AACjB,GAAC,EACD,CAACZ,MAAM,CAAC,CACT,CAAA;AAED,EAAA,MAAMgB,gBAAgB,GAAGL,WAAW,CACjCC,KAA0C,IAAI;IAC7CX,YAAY,GAAGW,KAAK,CAAC,CAAA;AACvB,GAAC,EACD,CAACX,YAAY,CAAC,CACf,CAAA;AAED,EAAA,MAAMgB,gBAAgB,GAAGN,WAAW,CACjCC,KAA0C,IAAI;IAC7CV,YAAY,GAAGU,KAAK,CAAC,CAAA;AACvB,GAAC,EACD,CAACV,YAAY,CAAC,CACf,CAAA;AAED,EAAA,MAAMgB,aAAa,GAAGP,WAAW,CAC9BC,KAA6C,IAAI;IAChDT,SAAS,GAAGS,KAAK,CAAC,CAAA;AACpB,GAAC,EACD,CAACT,SAAS,CAAC,CACZ,CAAA;AAED;;;;;;;;;;AAUG;AACH,EAAA,MAAMgB,WAAW,GAAG;IAClB,eAAe,EAAEzB,QAAQ,IAAIC,OAAO;AACpC,IAAA,YAAY,EAAEA,OAAO,GACjBW,IAAI,CAACc,aAAa,CAACC,QAAQ,CAACC,gBAAqC,CAAC,GAClElB,KAAK,CAAC,YAAY,CAAC;AACvB,IAAA,WAAW,EAAGT,OAAO,GAAG,QAAQ,GAAG,KAAoD;AACvFH,IAAAA,SAAS,EAAEgB,UAAU;AACrB,IAAA,aAAa,EAAEZ,MAAM;IACrBF,QAAQ;IACRD,EAAE;IACFY,GAAG;IACHR,IAAI;AACJG,IAAAA,MAAM,EAAEe,UAAU;AAClBjB,IAAAA,OAAO,EAAEY,WAAW;AACpBX,IAAAA,OAAO,EAAEe,WAAW;AACpBb,IAAAA,YAAY,EAAEe,gBAAgB;AAC9Bd,IAAAA,YAAY,EAAEe,gBAAgB;AAC9Bd,IAAAA,SAAS,EAAEe,aAAa;IACxB,GAAGd,KAAAA;GACJ,CAAA;AAED,EAAA,oBAAOmB,GAAA,CAAA,QAAA,EAAA;AAAA,IAAA,GAAYJ,WAAW;AAAA5B,IAAAA,QAAA,EAAGA,QAAAA;AAAQ,GAAS,CAAC,CAAA;AACrD,CAAC,EACF;AAEDF,eAAe,CAACmC,WAAW,GAAG,iBAAiB;;;;"}
|
package/build/select/Select.js
CHANGED
|
@@ -4,7 +4,7 @@ var componentsTheming = require('@wise/components-theming');
|
|
|
4
4
|
var clsx = require('clsx');
|
|
5
5
|
var React = require('react');
|
|
6
6
|
var reactIntl = require('react-intl');
|
|
7
|
-
var
|
|
7
|
+
var Button_resolver = require('../button/Button.resolver.js');
|
|
8
8
|
var Chevron = require('../chevron/Chevron.js');
|
|
9
9
|
var documentIosClick = require('../common/domHelpers/documentIosClick.js');
|
|
10
10
|
require('../common/theme.js');
|
|
@@ -456,7 +456,7 @@ function Select({
|
|
|
456
456
|
onTouchMove: handleTouchStart,
|
|
457
457
|
onFocus: handleOnFocus,
|
|
458
458
|
onBlur: handleOnBlur,
|
|
459
|
-
children: [/*#__PURE__*/jsxRuntime.jsxs(
|
|
459
|
+
children: [/*#__PURE__*/jsxRuntime.jsxs(Button_resolver, {
|
|
460
460
|
ref: dropdownButtonReference,
|
|
461
461
|
...inputAttributes,
|
|
462
462
|
id: computedId,
|
|
@@ -471,7 +471,9 @@ function Select({
|
|
|
471
471
|
disabled: disabled,
|
|
472
472
|
"aria-controls": listboxId,
|
|
473
473
|
"aria-expanded": open,
|
|
474
|
-
onClick: handleOnClick
|
|
474
|
+
onClick: handleOnClick
|
|
475
|
+
// @ts-expect-error Spread types may only be created from object types.
|
|
476
|
+
,
|
|
475
477
|
...buttonProps,
|
|
476
478
|
children: [selected ? /*#__PURE__*/jsxRuntime.jsx(Option, {
|
|
477
479
|
label: undefined,
|