@transferwise/components 0.0.0-experimental-7697f94 → 0.0.0-experimental-413ddc2
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/listItem/Button/ListItemButton.js +4 -3
- package/build/listItem/Button/ListItemButton.js.map +1 -1
- package/build/listItem/Button/ListItemButton.mjs +5 -4
- package/build/listItem/Button/ListItemButton.mjs.map +1 -1
- package/build/types/listItem/Button/ListItemButton.d.ts +7 -4
- package/build/types/listItem/Button/ListItemButton.d.ts.map +1 -1
- package/build/types/listItem/ListItem.d.ts +4 -4
- package/package.json +3 -6
- package/src/listItem/Button/ListItemButton.tsx +30 -28
|
@@ -7,11 +7,11 @@ var useListItemControl = require('../useListItemControl.js');
|
|
|
7
7
|
var ListItemContext = require('../ListItemContext.js');
|
|
8
8
|
var jsxRuntime = require('react/jsx-runtime');
|
|
9
9
|
|
|
10
|
-
const Button = ({
|
|
10
|
+
const Button = /*#__PURE__*/React.forwardRef(({
|
|
11
11
|
priority = 'secondary-neutral',
|
|
12
12
|
partiallyInteractive,
|
|
13
13
|
...props
|
|
14
|
-
}) => {
|
|
14
|
+
}, ref) => {
|
|
15
15
|
const {
|
|
16
16
|
baseItemProps
|
|
17
17
|
} = useListItemControl.useListItemControl('button', {
|
|
@@ -33,10 +33,11 @@ const Button = ({
|
|
|
33
33
|
};
|
|
34
34
|
const buttonContentId = props.href || partiallyInteractive ? '' : `${ids.control}_content`;
|
|
35
35
|
return /*#__PURE__*/jsxRuntime.jsx(Button_resolver.default, {
|
|
36
|
+
ref: ref,
|
|
36
37
|
"aria-describedby": `${buttonContentId} ${describedByIds}`,
|
|
37
38
|
...commonProps
|
|
38
39
|
});
|
|
39
|
-
};
|
|
40
|
+
});
|
|
40
41
|
Button.displayName = 'ListItem.Button';
|
|
41
42
|
|
|
42
43
|
exports.Button = Button;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItemButton.js","sources":["../../../src/listItem/Button/ListItemButton.tsx"],"sourcesContent":["import { useContext } from 'react';\nimport { clsx } from 'clsx';\nimport ButtonComp, { type ButtonAddonIcon, type NewButtonProps } from '../../button';\nimport { useListItemControl } from '../useListItemControl';\nimport { ListItemContext } from '../ListItemContext';\n\nexport type ListItemButtonProps = Omit<\n NewButtonProps,\n 'v2' | 'size' | 'disabled' | 'block' | 'addonStart'\n> & {\n /**\n * Toggles the [interactivity strategy](https://storybook.wise.design/?path=/docs/content-listitem--docs#interactivity) for the whole ListItem.\n */\n partiallyInteractive?: boolean;\n addonStart?: ButtonAddonIcon;\n};\n\n/**\n * This component allows for rendering a Button control. It's a thin wrapper around the\n * [Button component](https://storybook.wise.design/?path=/docs/content-button--docs), but offers only\n * a subset of its features in line with the ListItem's constraints. <br />\n * <br />\n * Please refer to the [Design documentation](https://wise.design/components/list-item---button) for details.\n */\nexport const Button = (
|
|
1
|
+
{"version":3,"file":"ListItemButton.js","sources":["../../../src/listItem/Button/ListItemButton.tsx"],"sourcesContent":["import { useContext, forwardRef } from 'react';\nimport { clsx } from 'clsx';\nimport ButtonComp, { type ButtonAddonIcon, type NewButtonProps } from '../../button';\nimport { useListItemControl } from '../useListItemControl';\nimport { ListItemContext } from '../ListItemContext';\n\nexport type ListItemButtonProps = Omit<\n NewButtonProps,\n 'v2' | 'size' | 'disabled' | 'block' | 'addonStart'\n> & {\n /**\n * Toggles the [interactivity strategy](https://storybook.wise.design/?path=/docs/content-listitem--docs#interactivity) for the whole ListItem.\n */\n partiallyInteractive?: boolean;\n addonStart?: ButtonAddonIcon;\n};\n\n/**\n * This component allows for rendering a Button control. It's a thin wrapper around the\n * [Button component](https://storybook.wise.design/?path=/docs/content-button--docs), but offers only\n * a subset of its features in line with the ListItem's constraints. <br />\n * <br />\n * Please refer to the [Design documentation](https://wise.design/components/list-item---button) for details.\n */\nexport const Button = forwardRef<HTMLButtonElement, ListItemButtonProps>(\n (\n { priority = 'secondary-neutral', partiallyInteractive, ...props }: ListItemButtonProps,\n ref,\n ) => {\n const { baseItemProps } = useListItemControl('button', { partiallyInteractive, ...props });\n const { ids, describedByIds } = useContext(ListItemContext);\n\n const commonProps = {\n ...props,\n className: clsx(\n 'wds-list-item-control',\n !partiallyInteractive && props.href && 'wds-list-item-control_pseudo-element',\n ),\n id: ids.control,\n priority,\n v2: true,\n size: 'sm',\n disabled: baseItemProps.disabled,\n };\n\n const buttonContentId = props.href || partiallyInteractive ? '' : `${ids.control}_content`;\n\n return (\n <ButtonComp\n ref={ref}\n aria-describedby={`${buttonContentId} ${describedByIds}`}\n {...(commonProps as NewButtonProps)}\n />\n );\n },\n);\n\nButton.displayName = 'ListItem.Button';\n"],"names":["Button","forwardRef","priority","partiallyInteractive","props","ref","baseItemProps","useListItemControl","ids","describedByIds","useContext","ListItemContext","commonProps","className","clsx","href","id","control","v2","size","disabled","buttonContentId","_jsx","ButtonComp","displayName"],"mappings":";;;;;;;;;AAwBO,MAAMA,MAAM,gBAAGC,gBAAU,CAC9B,CACE;AAAEC,EAAAA,QAAQ,GAAG,mBAAmB;EAAEC,oBAAoB;EAAE,GAAGC;CAA4B,EACvFC,GAAG,KACD;EACF,MAAM;AAAEC,IAAAA;AAAa,GAAE,GAAGC,qCAAkB,CAAC,QAAQ,EAAE;IAAEJ,oBAAoB;IAAE,GAAGC;AAAK,GAAE,CAAC;EAC1F,MAAM;IAAEI,GAAG;AAAEC,IAAAA;AAAc,GAAE,GAAGC,gBAAU,CAACC,+BAAe,CAAC;AAE3D,EAAA,MAAMC,WAAW,GAAG;AAClB,IAAA,GAAGR,KAAK;AACRS,IAAAA,SAAS,EAAEC,SAAI,CACb,uBAAuB,EACvB,CAACX,oBAAoB,IAAIC,KAAK,CAACW,IAAI,IAAI,sCAAsC,CAC9E;IACDC,EAAE,EAAER,GAAG,CAACS,OAAO;IACff,QAAQ;AACRgB,IAAAA,EAAE,EAAE,IAAI;AACRC,IAAAA,IAAI,EAAE,IAAI;IACVC,QAAQ,EAAEd,aAAa,CAACc;GACzB;AAED,EAAA,MAAMC,eAAe,GAAGjB,KAAK,CAACW,IAAI,IAAIZ,oBAAoB,GAAG,EAAE,GAAG,CAAA,EAAGK,GAAG,CAACS,OAAO,CAAA,QAAA,CAAU;EAE1F,oBACEK,cAAA,CAACC,uBAAU,EAAA;AACTlB,IAAAA,GAAG,EAAEA,GAAI;AACT,IAAA,kBAAA,EAAkB,CAAA,EAAGgB,eAAe,CAAA,CAAA,EAAIZ,cAAc,CAAA,CAAG;IAAA,GACpDG;AAA8B,GAAC,CACpC;AAEN,CAAC;AAGHZ,MAAM,CAACwB,WAAW,GAAG,iBAAiB;;;;"}
|
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
import { useContext } from 'react';
|
|
1
|
+
import { forwardRef, useContext } from 'react';
|
|
2
2
|
import { clsx } from 'clsx';
|
|
3
3
|
import Button$1 from '../../button/Button.resolver.mjs';
|
|
4
4
|
import { useListItemControl } from '../useListItemControl.mjs';
|
|
5
5
|
import { ListItemContext } from '../ListItemContext.mjs';
|
|
6
6
|
import { jsx } from 'react/jsx-runtime';
|
|
7
7
|
|
|
8
|
-
const Button = ({
|
|
8
|
+
const Button = /*#__PURE__*/forwardRef(({
|
|
9
9
|
priority = 'secondary-neutral',
|
|
10
10
|
partiallyInteractive,
|
|
11
11
|
...props
|
|
12
|
-
}) => {
|
|
12
|
+
}, ref) => {
|
|
13
13
|
const {
|
|
14
14
|
baseItemProps
|
|
15
15
|
} = useListItemControl('button', {
|
|
@@ -31,10 +31,11 @@ const Button = ({
|
|
|
31
31
|
};
|
|
32
32
|
const buttonContentId = props.href || partiallyInteractive ? '' : `${ids.control}_content`;
|
|
33
33
|
return /*#__PURE__*/jsx(Button$1, {
|
|
34
|
+
ref: ref,
|
|
34
35
|
"aria-describedby": `${buttonContentId} ${describedByIds}`,
|
|
35
36
|
...commonProps
|
|
36
37
|
});
|
|
37
|
-
};
|
|
38
|
+
});
|
|
38
39
|
Button.displayName = 'ListItem.Button';
|
|
39
40
|
|
|
40
41
|
export { Button };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItemButton.mjs","sources":["../../../src/listItem/Button/ListItemButton.tsx"],"sourcesContent":["import { useContext } from 'react';\nimport { clsx } from 'clsx';\nimport ButtonComp, { type ButtonAddonIcon, type NewButtonProps } from '../../button';\nimport { useListItemControl } from '../useListItemControl';\nimport { ListItemContext } from '../ListItemContext';\n\nexport type ListItemButtonProps = Omit<\n NewButtonProps,\n 'v2' | 'size' | 'disabled' | 'block' | 'addonStart'\n> & {\n /**\n * Toggles the [interactivity strategy](https://storybook.wise.design/?path=/docs/content-listitem--docs#interactivity) for the whole ListItem.\n */\n partiallyInteractive?: boolean;\n addonStart?: ButtonAddonIcon;\n};\n\n/**\n * This component allows for rendering a Button control. It's a thin wrapper around the\n * [Button component](https://storybook.wise.design/?path=/docs/content-button--docs), but offers only\n * a subset of its features in line with the ListItem's constraints. <br />\n * <br />\n * Please refer to the [Design documentation](https://wise.design/components/list-item---button) for details.\n */\nexport const Button = (
|
|
1
|
+
{"version":3,"file":"ListItemButton.mjs","sources":["../../../src/listItem/Button/ListItemButton.tsx"],"sourcesContent":["import { useContext, forwardRef } from 'react';\nimport { clsx } from 'clsx';\nimport ButtonComp, { type ButtonAddonIcon, type NewButtonProps } from '../../button';\nimport { useListItemControl } from '../useListItemControl';\nimport { ListItemContext } from '../ListItemContext';\n\nexport type ListItemButtonProps = Omit<\n NewButtonProps,\n 'v2' | 'size' | 'disabled' | 'block' | 'addonStart'\n> & {\n /**\n * Toggles the [interactivity strategy](https://storybook.wise.design/?path=/docs/content-listitem--docs#interactivity) for the whole ListItem.\n */\n partiallyInteractive?: boolean;\n addonStart?: ButtonAddonIcon;\n};\n\n/**\n * This component allows for rendering a Button control. It's a thin wrapper around the\n * [Button component](https://storybook.wise.design/?path=/docs/content-button--docs), but offers only\n * a subset of its features in line with the ListItem's constraints. <br />\n * <br />\n * Please refer to the [Design documentation](https://wise.design/components/list-item---button) for details.\n */\nexport const Button = forwardRef<HTMLButtonElement, ListItemButtonProps>(\n (\n { priority = 'secondary-neutral', partiallyInteractive, ...props }: ListItemButtonProps,\n ref,\n ) => {\n const { baseItemProps } = useListItemControl('button', { partiallyInteractive, ...props });\n const { ids, describedByIds } = useContext(ListItemContext);\n\n const commonProps = {\n ...props,\n className: clsx(\n 'wds-list-item-control',\n !partiallyInteractive && props.href && 'wds-list-item-control_pseudo-element',\n ),\n id: ids.control,\n priority,\n v2: true,\n size: 'sm',\n disabled: baseItemProps.disabled,\n };\n\n const buttonContentId = props.href || partiallyInteractive ? '' : `${ids.control}_content`;\n\n return (\n <ButtonComp\n ref={ref}\n aria-describedby={`${buttonContentId} ${describedByIds}`}\n {...(commonProps as NewButtonProps)}\n />\n );\n },\n);\n\nButton.displayName = 'ListItem.Button';\n"],"names":["Button","forwardRef","priority","partiallyInteractive","props","ref","baseItemProps","useListItemControl","ids","describedByIds","useContext","ListItemContext","commonProps","className","clsx","href","id","control","v2","size","disabled","buttonContentId","_jsx","ButtonComp","displayName"],"mappings":";;;;;;;AAwBO,MAAMA,MAAM,gBAAGC,UAAU,CAC9B,CACE;AAAEC,EAAAA,QAAQ,GAAG,mBAAmB;EAAEC,oBAAoB;EAAE,GAAGC;CAA4B,EACvFC,GAAG,KACD;EACF,MAAM;AAAEC,IAAAA;AAAa,GAAE,GAAGC,kBAAkB,CAAC,QAAQ,EAAE;IAAEJ,oBAAoB;IAAE,GAAGC;AAAK,GAAE,CAAC;EAC1F,MAAM;IAAEI,GAAG;AAAEC,IAAAA;AAAc,GAAE,GAAGC,UAAU,CAACC,eAAe,CAAC;AAE3D,EAAA,MAAMC,WAAW,GAAG;AAClB,IAAA,GAAGR,KAAK;AACRS,IAAAA,SAAS,EAAEC,IAAI,CACb,uBAAuB,EACvB,CAACX,oBAAoB,IAAIC,KAAK,CAACW,IAAI,IAAI,sCAAsC,CAC9E;IACDC,EAAE,EAAER,GAAG,CAACS,OAAO;IACff,QAAQ;AACRgB,IAAAA,EAAE,EAAE,IAAI;AACRC,IAAAA,IAAI,EAAE,IAAI;IACVC,QAAQ,EAAEd,aAAa,CAACc;GACzB;AAED,EAAA,MAAMC,eAAe,GAAGjB,KAAK,CAACW,IAAI,IAAIZ,oBAAoB,GAAG,EAAE,GAAG,CAAA,EAAGK,GAAG,CAACS,OAAO,CAAA,QAAA,CAAU;EAE1F,oBACEK,GAAA,CAACC,QAAU,EAAA;AACTlB,IAAAA,GAAG,EAAEA,GAAI;AACT,IAAA,kBAAA,EAAkB,CAAA,EAAGgB,eAAe,CAAA,CAAA,EAAIZ,cAAc,CAAA,CAAG;IAAA,GACpDG;AAA8B,GAAC,CACpC;AAEN,CAAC;AAGHZ,MAAM,CAACwB,WAAW,GAAG,iBAAiB;;;;"}
|
|
@@ -13,8 +13,11 @@ export type ListItemButtonProps = Omit<NewButtonProps, 'v2' | 'size' | 'disabled
|
|
|
13
13
|
* <br />
|
|
14
14
|
* Please refer to the [Design documentation](https://wise.design/components/list-item---button) for details.
|
|
15
15
|
*/
|
|
16
|
-
export declare const Button: {
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
16
|
+
export declare const Button: import("react").ForwardRefExoticComponent<Omit<NewButtonProps, "disabled" | "size" | "block" | "v2" | "addonStart"> & {
|
|
17
|
+
/**
|
|
18
|
+
* Toggles the [interactivity strategy](https://storybook.wise.design/?path=/docs/content-listitem--docs#interactivity) for the whole ListItem.
|
|
19
|
+
*/
|
|
20
|
+
partiallyInteractive?: boolean;
|
|
21
|
+
addonStart?: ButtonAddonIcon;
|
|
22
|
+
} & import("react").RefAttributes<HTMLButtonElement>>;
|
|
20
23
|
//# sourceMappingURL=ListItemButton.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItemButton.d.ts","sourceRoot":"","sources":["../../../../src/listItem/Button/ListItemButton.tsx"],"names":[],"mappings":"AAEA,OAAmB,EAAE,KAAK,eAAe,EAAE,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAIrF,MAAM,MAAM,mBAAmB,GAAG,IAAI,CACpC,cAAc,EACd,IAAI,GAAG,MAAM,GAAG,UAAU,GAAG,OAAO,GAAG,YAAY,CACpD,GAAG;IACF;;OAEG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,UAAU,CAAC,EAAE,eAAe,CAAC;CAC9B,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,MAAM;
|
|
1
|
+
{"version":3,"file":"ListItemButton.d.ts","sourceRoot":"","sources":["../../../../src/listItem/Button/ListItemButton.tsx"],"names":[],"mappings":"AAEA,OAAmB,EAAE,KAAK,eAAe,EAAE,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAIrF,MAAM,MAAM,mBAAmB,GAAG,IAAI,CACpC,cAAc,EACd,IAAI,GAAG,MAAM,GAAG,UAAU,GAAG,OAAO,GAAG,YAAY,CACpD,GAAG;IACF;;OAEG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,UAAU,CAAC,EAAE,eAAe,CAAC;CAC9B,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,MAAM;IAdjB;;OAEG;2BACoB,OAAO;iBACjB,eAAe;qDAyC7B,CAAC"}
|
|
@@ -103,10 +103,10 @@ export declare const ListItem: {
|
|
|
103
103
|
({ href, ...props }: ListItemNavigationProps): import("react").JSX.Element;
|
|
104
104
|
displayName: string;
|
|
105
105
|
};
|
|
106
|
-
Button: {
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
}
|
|
106
|
+
Button: import("react").ForwardRefExoticComponent<Omit<import("..").ButtonProps, "disabled" | "size" | "block" | "v2" | "addonStart"> & {
|
|
107
|
+
partiallyInteractive?: boolean;
|
|
108
|
+
addonStart?: import("../button").ButtonAddonIcon;
|
|
109
|
+
} & import("react").RefAttributes<HTMLButtonElement>>;
|
|
110
110
|
Switch: {
|
|
111
111
|
(props: ListItemSwitchProps): import("react").JSX.Element;
|
|
112
112
|
displayName: string;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@transferwise/components",
|
|
3
|
-
"version": "0.0.0-experimental-
|
|
3
|
+
"version": "0.0.0-experimental-413ddc2",
|
|
4
4
|
"description": "Neptune React components",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
@@ -88,8 +88,8 @@
|
|
|
88
88
|
"storybook-addon-test-codegen": "^3.0.1",
|
|
89
89
|
"@transferwise/less-config": "3.1.2",
|
|
90
90
|
"@transferwise/neptune-css": "14.26.2",
|
|
91
|
-
"@wise/
|
|
92
|
-
"@wise/
|
|
91
|
+
"@wise/wds-configs": "0.0.0",
|
|
92
|
+
"@wise/components-theming": "1.10.1"
|
|
93
93
|
},
|
|
94
94
|
"peerDependencies": {
|
|
95
95
|
"@transferwise/icons": "^3 || ^4",
|
|
@@ -125,9 +125,6 @@
|
|
|
125
125
|
"access": "public",
|
|
126
126
|
"registry": "https://registry.npmjs.org/"
|
|
127
127
|
},
|
|
128
|
-
"overrides": {
|
|
129
|
-
"@floating-ui/react": "0.27.16"
|
|
130
|
-
},
|
|
131
128
|
"scripts": {
|
|
132
129
|
"dev": "npm-run-all --parallel dev:* dev:*:* storybook:dev",
|
|
133
130
|
"dev:less:watch": "gulp watchLess --dest=src",
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { useContext } from 'react';
|
|
1
|
+
import { useContext, forwardRef } from 'react';
|
|
2
2
|
import { clsx } from 'clsx';
|
|
3
3
|
import ButtonComp, { type ButtonAddonIcon, type NewButtonProps } from '../../button';
|
|
4
4
|
import { useListItemControl } from '../useListItemControl';
|
|
@@ -22,35 +22,37 @@ export type ListItemButtonProps = Omit<
|
|
|
22
22
|
* <br />
|
|
23
23
|
* Please refer to the [Design documentation](https://wise.design/components/list-item---button) for details.
|
|
24
24
|
*/
|
|
25
|
-
export const Button = (
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
25
|
+
export const Button = forwardRef<HTMLButtonElement, ListItemButtonProps>(
|
|
26
|
+
(
|
|
27
|
+
{ priority = 'secondary-neutral', partiallyInteractive, ...props }: ListItemButtonProps,
|
|
28
|
+
ref,
|
|
29
|
+
) => {
|
|
30
|
+
const { baseItemProps } = useListItemControl('button', { partiallyInteractive, ...props });
|
|
31
|
+
const { ids, describedByIds } = useContext(ListItemContext);
|
|
32
32
|
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
33
|
+
const commonProps = {
|
|
34
|
+
...props,
|
|
35
|
+
className: clsx(
|
|
36
|
+
'wds-list-item-control',
|
|
37
|
+
!partiallyInteractive && props.href && 'wds-list-item-control_pseudo-element',
|
|
38
|
+
),
|
|
39
|
+
id: ids.control,
|
|
40
|
+
priority,
|
|
41
|
+
v2: true,
|
|
42
|
+
size: 'sm',
|
|
43
|
+
disabled: baseItemProps.disabled,
|
|
44
|
+
};
|
|
45
45
|
|
|
46
|
-
|
|
46
|
+
const buttonContentId = props.href || partiallyInteractive ? '' : `${ids.control}_content`;
|
|
47
47
|
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
48
|
+
return (
|
|
49
|
+
<ButtonComp
|
|
50
|
+
ref={ref}
|
|
51
|
+
aria-describedby={`${buttonContentId} ${describedByIds}`}
|
|
52
|
+
{...(commonProps as NewButtonProps)}
|
|
53
|
+
/>
|
|
54
|
+
);
|
|
55
|
+
},
|
|
56
|
+
);
|
|
55
57
|
|
|
56
58
|
Button.displayName = 'ListItem.Button';
|