@lidofinance/lido-app-ui 1.5.0 → 1.6.0
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/cjs/accordion/Accordion.cjs +5 -0
- package/dist/cjs/accordion/Accordion.cjs.map +1 -1
- package/dist/cjs/badge/Badge.cjs +3 -0
- package/dist/cjs/badge/Badge.cjs.map +1 -1
- package/dist/cjs/banner/Banner.cjs +6 -0
- package/dist/cjs/banner/Banner.cjs.map +1 -1
- package/dist/cjs/button/Button.cjs +5 -0
- package/dist/cjs/button/Button.cjs.map +1 -1
- package/dist/cjs/card/Card.cjs +2 -0
- package/dist/cjs/card/Card.cjs.map +1 -1
- package/dist/cjs/checkbox/Checkbox.cjs +4 -0
- package/dist/cjs/checkbox/Checkbox.cjs.map +1 -1
- package/dist/cjs/counter/Counter.cjs +2 -0
- package/dist/cjs/counter/Counter.cjs.map +1 -1
- package/dist/cjs/data-list/DataList.cjs +5 -1
- package/dist/cjs/data-list/DataList.cjs.map +1 -1
- package/dist/cjs/data-list/DataListRow.cjs +10 -1
- package/dist/cjs/data-list/DataListRow.cjs.map +1 -1
- package/dist/cjs/icon-button/IconButton.cjs +3 -0
- package/dist/cjs/icon-button/IconButton.cjs.map +1 -1
- package/dist/cjs/identicon/Identicon.cjs +8 -2
- package/dist/cjs/identicon/Identicon.cjs.map +1 -1
- package/dist/cjs/input/Input.cjs +7 -0
- package/dist/cjs/input/Input.cjs.map +1 -1
- package/dist/cjs/message-box/MessageBox.cjs +5 -0
- package/dist/cjs/message-box/MessageBox.cjs.map +1 -1
- package/dist/cjs/modal/Modal.cjs +13 -2
- package/dist/cjs/modal/Modal.cjs.map +1 -1
- package/dist/cjs/notification/Notification.cjs +10 -1
- package/dist/cjs/notification/Notification.cjs.map +1 -1
- package/dist/cjs/radio-button/RadioButton.cjs +4 -0
- package/dist/cjs/radio-button/RadioButton.cjs.map +1 -1
- package/dist/cjs/rich-input/RichInput.cjs +9 -0
- package/dist/cjs/rich-input/RichInput.cjs.map +1 -1
- package/dist/cjs/section-title/SectionTitle.cjs +5 -0
- package/dist/cjs/section-title/SectionTitle.cjs.map +1 -1
- package/dist/cjs/segmented-control/Segment.cjs +3 -0
- package/dist/cjs/segmented-control/Segment.cjs.map +1 -1
- package/dist/cjs/segmented-control/SegmentCard.cjs +8 -0
- package/dist/cjs/segmented-control/SegmentCard.cjs.map +1 -1
- package/dist/cjs/segmented-control/SegmentedControl.cjs +6 -1
- package/dist/cjs/segmented-control/SegmentedControl.cjs.map +1 -1
- package/dist/cjs/segmented-control/SegmentedControlCard.cjs +6 -1
- package/dist/cjs/segmented-control/SegmentedControlCard.cjs.map +1 -1
- package/dist/cjs/slider/Slider.cjs +3 -0
- package/dist/cjs/slider/Slider.cjs.map +1 -1
- package/dist/cjs/small-card/SmallCard.cjs +8 -0
- package/dist/cjs/small-card/SmallCard.cjs.map +1 -1
- package/dist/cjs/stat-item/StatItem.cjs +8 -0
- package/dist/cjs/stat-item/StatItem.cjs.map +1 -1
- package/dist/cjs/switch/Switch.cjs +4 -0
- package/dist/cjs/switch/Switch.cjs.map +1 -1
- package/dist/cjs/tabs/Tab.cjs +2 -0
- package/dist/cjs/tabs/Tab.cjs.map +1 -1
- package/dist/cjs/tabs/Tabs.cjs +6 -1
- package/dist/cjs/tabs/Tabs.cjs.map +1 -1
- package/dist/cjs/tag/Tag.cjs +4 -0
- package/dist/cjs/tag/Tag.cjs.map +1 -1
- package/dist/cjs/text-link/TextLink.cjs +3 -0
- package/dist/cjs/text-link/TextLink.cjs.map +1 -1
- package/dist/cjs/token-amount/TokenAmount.cjs +8 -2
- package/dist/cjs/token-amount/TokenAmount.cjs.map +1 -1
- package/dist/cjs/token-selector/TokenSelector.cjs +20 -1
- package/dist/cjs/token-selector/TokenSelector.cjs.map +1 -1
- package/dist/cjs/tooltip/Tooltip.cjs +3 -0
- package/dist/cjs/tooltip/Tooltip.cjs.map +1 -1
- package/dist/cjs/tx-status/TxStatus.cjs +9 -1
- package/dist/cjs/tx-status/TxStatus.cjs.map +1 -1
- package/dist/cjs/typography/Typography.cjs +2 -0
- package/dist/cjs/typography/Typography.cjs.map +1 -1
- package/dist/esm/accordion/Accordion.mjs +5 -0
- package/dist/esm/accordion/Accordion.mjs.map +1 -1
- package/dist/esm/badge/Badge.mjs +3 -0
- package/dist/esm/badge/Badge.mjs.map +1 -1
- package/dist/esm/banner/Banner.mjs +6 -0
- package/dist/esm/banner/Banner.mjs.map +1 -1
- package/dist/esm/button/Button.mjs +5 -0
- package/dist/esm/button/Button.mjs.map +1 -1
- package/dist/esm/card/Card.mjs +2 -0
- package/dist/esm/card/Card.mjs.map +1 -1
- package/dist/esm/checkbox/Checkbox.mjs +4 -0
- package/dist/esm/checkbox/Checkbox.mjs.map +1 -1
- package/dist/esm/counter/Counter.mjs +2 -0
- package/dist/esm/counter/Counter.mjs.map +1 -1
- package/dist/esm/data-list/DataList.mjs +5 -1
- package/dist/esm/data-list/DataList.mjs.map +1 -1
- package/dist/esm/data-list/DataListRow.mjs +10 -1
- package/dist/esm/data-list/DataListRow.mjs.map +1 -1
- package/dist/esm/icon-button/IconButton.mjs +3 -0
- package/dist/esm/icon-button/IconButton.mjs.map +1 -1
- package/dist/esm/identicon/Identicon.mjs +8 -2
- package/dist/esm/identicon/Identicon.mjs.map +1 -1
- package/dist/esm/input/Input.mjs +7 -0
- package/dist/esm/input/Input.mjs.map +1 -1
- package/dist/esm/message-box/MessageBox.mjs +5 -0
- package/dist/esm/message-box/MessageBox.mjs.map +1 -1
- package/dist/esm/modal/Modal.mjs +13 -2
- package/dist/esm/modal/Modal.mjs.map +1 -1
- package/dist/esm/notification/Notification.mjs +10 -1
- package/dist/esm/notification/Notification.mjs.map +1 -1
- package/dist/esm/radio-button/RadioButton.mjs +4 -0
- package/dist/esm/radio-button/RadioButton.mjs.map +1 -1
- package/dist/esm/rich-input/RichInput.mjs +9 -0
- package/dist/esm/rich-input/RichInput.mjs.map +1 -1
- package/dist/esm/section-title/SectionTitle.mjs +5 -0
- package/dist/esm/section-title/SectionTitle.mjs.map +1 -1
- package/dist/esm/segmented-control/Segment.mjs +3 -0
- package/dist/esm/segmented-control/Segment.mjs.map +1 -1
- package/dist/esm/segmented-control/SegmentCard.mjs +8 -0
- package/dist/esm/segmented-control/SegmentCard.mjs.map +1 -1
- package/dist/esm/segmented-control/SegmentedControl.mjs +6 -1
- package/dist/esm/segmented-control/SegmentedControl.mjs.map +1 -1
- package/dist/esm/segmented-control/SegmentedControlCard.mjs +6 -1
- package/dist/esm/segmented-control/SegmentedControlCard.mjs.map +1 -1
- package/dist/esm/slider/Slider.mjs +3 -0
- package/dist/esm/slider/Slider.mjs.map +1 -1
- package/dist/esm/small-card/SmallCard.mjs +8 -0
- package/dist/esm/small-card/SmallCard.mjs.map +1 -1
- package/dist/esm/stat-item/StatItem.mjs +8 -0
- package/dist/esm/stat-item/StatItem.mjs.map +1 -1
- package/dist/esm/switch/Switch.mjs +4 -0
- package/dist/esm/switch/Switch.mjs.map +1 -1
- package/dist/esm/tabs/Tab.mjs +2 -0
- package/dist/esm/tabs/Tab.mjs.map +1 -1
- package/dist/esm/tabs/Tabs.mjs +6 -1
- package/dist/esm/tabs/Tabs.mjs.map +1 -1
- package/dist/esm/tag/Tag.mjs +4 -0
- package/dist/esm/tag/Tag.mjs.map +1 -1
- package/dist/esm/text-link/TextLink.mjs +3 -0
- package/dist/esm/text-link/TextLink.mjs.map +1 -1
- package/dist/esm/token-amount/TokenAmount.mjs +8 -2
- package/dist/esm/token-amount/TokenAmount.mjs.map +1 -1
- package/dist/esm/token-selector/TokenSelector.mjs +20 -1
- package/dist/esm/token-selector/TokenSelector.mjs.map +1 -1
- package/dist/esm/tooltip/Tooltip.mjs +3 -0
- package/dist/esm/tooltip/Tooltip.mjs.map +1 -1
- package/dist/esm/tx-status/TxStatus.mjs +9 -1
- package/dist/esm/tx-status/TxStatus.mjs.map +1 -1
- package/dist/esm/typography/Typography.mjs +2 -0
- package/dist/esm/typography/Typography.mjs.map +1 -1
- package/dist/types/accordion/Accordion.d.ts +8 -1
- package/dist/types/accordion/Accordion.d.ts.map +1 -1
- package/dist/types/badge/Badge.d.ts +6 -1
- package/dist/types/badge/Badge.d.ts.map +1 -1
- package/dist/types/badge/index.d.ts +1 -1
- package/dist/types/badge/index.d.ts.map +1 -1
- package/dist/types/banner/Banner.d.ts +9 -1
- package/dist/types/banner/Banner.d.ts.map +1 -1
- package/dist/types/button/Button.d.ts +8 -1
- package/dist/types/button/Button.d.ts.map +1 -1
- package/dist/types/button/index.d.ts +1 -1
- package/dist/types/button/index.d.ts.map +1 -1
- package/dist/types/card/Card.d.ts +7 -2
- package/dist/types/card/Card.d.ts.map +1 -1
- package/dist/types/card/index.d.ts +1 -1
- package/dist/types/card/index.d.ts.map +1 -1
- package/dist/types/checkbox/Checkbox.d.ts +7 -0
- package/dist/types/checkbox/Checkbox.d.ts.map +1 -1
- package/dist/types/checkbox/index.d.ts +1 -1
- package/dist/types/checkbox/index.d.ts.map +1 -1
- package/dist/types/counter/Counter.d.ts +5 -1
- package/dist/types/counter/Counter.d.ts.map +1 -1
- package/dist/types/counter/index.d.ts +1 -1
- package/dist/types/counter/index.d.ts.map +1 -1
- package/dist/types/data-list/DataList.d.ts +7 -4
- package/dist/types/data-list/DataList.d.ts.map +1 -1
- package/dist/types/data-list/DataListRow.d.ts +11 -4
- package/dist/types/data-list/DataListRow.d.ts.map +1 -1
- package/dist/types/data-list/index.d.ts +2 -2
- package/dist/types/data-list/index.d.ts.map +1 -1
- package/dist/types/icon-button/IconButton.d.ts +6 -1
- package/dist/types/icon-button/IconButton.d.ts.map +1 -1
- package/dist/types/icon-button/index.d.ts +1 -1
- package/dist/types/icon-button/index.d.ts.map +1 -1
- package/dist/types/identicon/Identicon.d.ts +11 -3
- package/dist/types/identicon/Identicon.d.ts.map +1 -1
- package/dist/types/identicon/index.d.ts +1 -1
- package/dist/types/identicon/index.d.ts.map +1 -1
- package/dist/types/input/Input.d.ts +10 -0
- package/dist/types/input/Input.d.ts.map +1 -1
- package/dist/types/message-box/MessageBox.d.ts +8 -1
- package/dist/types/message-box/MessageBox.d.ts.map +1 -1
- package/dist/types/message-box/index.d.ts +1 -1
- package/dist/types/message-box/index.d.ts.map +1 -1
- package/dist/types/modal/Modal.d.ts +12 -4
- package/dist/types/modal/Modal.d.ts.map +1 -1
- package/dist/types/modal/index.d.ts +1 -1
- package/dist/types/modal/index.d.ts.map +1 -1
- package/dist/types/notification/Notification.d.ts +15 -6
- package/dist/types/notification/Notification.d.ts.map +1 -1
- package/dist/types/notification/index.d.ts +1 -1
- package/dist/types/notification/index.d.ts.map +1 -1
- package/dist/types/radio-button/RadioButton.d.ts +7 -0
- package/dist/types/radio-button/RadioButton.d.ts.map +1 -1
- package/dist/types/radio-button/index.d.ts +1 -1
- package/dist/types/radio-button/index.d.ts.map +1 -1
- package/dist/types/rich-input/RichInput.d.ts +11 -1
- package/dist/types/rich-input/RichInput.d.ts.map +1 -1
- package/dist/types/rich-input/index.d.ts +1 -1
- package/dist/types/rich-input/index.d.ts.map +1 -1
- package/dist/types/section-title/SectionTitle.d.ts +8 -1
- package/dist/types/section-title/SectionTitle.d.ts.map +1 -1
- package/dist/types/section-title/index.d.ts +1 -1
- package/dist/types/section-title/index.d.ts.map +1 -1
- package/dist/types/segmented-control/Segment.d.ts +6 -0
- package/dist/types/segmented-control/Segment.d.ts.map +1 -1
- package/dist/types/segmented-control/SegmentCard.d.ts +9 -0
- package/dist/types/segmented-control/SegmentCard.d.ts.map +1 -1
- package/dist/types/segmented-control/SegmentedControl.d.ts +9 -4
- package/dist/types/segmented-control/SegmentedControl.d.ts.map +1 -1
- package/dist/types/segmented-control/SegmentedControlCard.d.ts +9 -4
- package/dist/types/segmented-control/SegmentedControlCard.d.ts.map +1 -1
- package/dist/types/segmented-control/index.d.ts +4 -4
- package/dist/types/segmented-control/index.d.ts.map +1 -1
- package/dist/types/slider/Slider.d.ts +6 -0
- package/dist/types/slider/Slider.d.ts.map +1 -1
- package/dist/types/slider/index.d.ts +1 -1
- package/dist/types/slider/index.d.ts.map +1 -1
- package/dist/types/small-card/SmallCard.d.ts +11 -1
- package/dist/types/small-card/SmallCard.d.ts.map +1 -1
- package/dist/types/small-card/index.d.ts +1 -1
- package/dist/types/small-card/index.d.ts.map +1 -1
- package/dist/types/stat-item/StatItem.d.ts +10 -1
- package/dist/types/stat-item/StatItem.d.ts.map +1 -1
- package/dist/types/stat-item/index.d.ts +1 -1
- package/dist/types/stat-item/index.d.ts.map +1 -1
- package/dist/types/switch/Switch.d.ts +7 -0
- package/dist/types/switch/Switch.d.ts.map +1 -1
- package/dist/types/switch/index.d.ts +1 -1
- package/dist/types/switch/index.d.ts.map +1 -1
- package/dist/types/tabs/Tab.d.ts +5 -0
- package/dist/types/tabs/Tab.d.ts.map +1 -1
- package/dist/types/tabs/Tabs.d.ts +9 -4
- package/dist/types/tabs/Tabs.d.ts.map +1 -1
- package/dist/types/tabs/index.d.ts +2 -2
- package/dist/types/tabs/index.d.ts.map +1 -1
- package/dist/types/tag/Tag.d.ts +7 -1
- package/dist/types/tag/Tag.d.ts.map +1 -1
- package/dist/types/tag/index.d.ts +1 -1
- package/dist/types/tag/index.d.ts.map +1 -1
- package/dist/types/text-link/TextLink.d.ts +6 -1
- package/dist/types/text-link/TextLink.d.ts.map +1 -1
- package/dist/types/text-link/index.d.ts +1 -1
- package/dist/types/text-link/index.d.ts.map +1 -1
- package/dist/types/token-amount/TokenAmount.d.ts +9 -4
- package/dist/types/token-amount/TokenAmount.d.ts.map +1 -1
- package/dist/types/token-selector/TokenSelector.d.ts +17 -4
- package/dist/types/token-selector/TokenSelector.d.ts.map +1 -1
- package/dist/types/token-selector/index.d.ts +1 -1
- package/dist/types/token-selector/index.d.ts.map +1 -1
- package/dist/types/tooltip/Tooltip.d.ts +6 -1
- package/dist/types/tooltip/Tooltip.d.ts.map +1 -1
- package/dist/types/tooltip/index.d.ts +1 -1
- package/dist/types/tooltip/index.d.ts.map +1 -1
- package/dist/types/tx-status/TxStatus.d.ts +11 -4
- package/dist/types/tx-status/TxStatus.d.ts.map +1 -1
- package/dist/types/tx-status/index.d.ts +1 -1
- package/dist/types/tx-status/index.d.ts.map +1 -1
- package/dist/types/typography/Typography.d.ts +5 -1
- package/dist/types/typography/Typography.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StatItem.mjs","sources":["../../../src/stat-item/StatItem.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react'\n\nimport cn from 'classnames'\n\nimport { IconInfo } from '../icons'\nimport { Tooltip } from '../tooltip'\n\nimport styles from './StatItem.module.css'\n\nexport type StatItemAlign = 'left' | 'center'\n\nexport type StatItemProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {\n label: ReactNode\n value: ReactNode\n titleIcon?: ReactNode\n info?: ReactNode\n icon?: ReactNode\n subValue?: ReactNode\n description?: ReactNode\n align?: StatItemAlign\n}\n\nexport const StatItem = ({\n label,\n value,\n titleIcon,\n info,\n icon,\n subValue,\n description,\n align = 'center',\n className,\n ...rest\n}: StatItemProps) => (\n <div
|
|
1
|
+
{"version":3,"file":"StatItem.mjs","sources":["../../../src/stat-item/StatItem.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react'\n\nimport cn from 'classnames'\n\nimport { IconInfo } from '../icons'\nimport { Tooltip } from '../tooltip'\n\nimport styles from './StatItem.module.css'\n\nexport type StatItemAlign = 'left' | 'center'\n\nexport type StatItemDataTestId = {\n root?: string\n label?: string\n icon?: string\n value?: string\n subValue?: string\n description?: string\n}\n\nexport type StatItemProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {\n label: ReactNode\n value: ReactNode\n titleIcon?: ReactNode\n info?: ReactNode\n icon?: ReactNode\n subValue?: ReactNode\n description?: ReactNode\n align?: StatItemAlign\n dataTestId?: StatItemDataTestId\n}\n\nexport const StatItem = ({\n label,\n value,\n titleIcon,\n info,\n icon,\n subValue,\n description,\n align = 'center',\n className,\n dataTestId,\n ...rest\n}: StatItemProps) => (\n <div\n className={cn(styles.item, styles[align], className)}\n data-testid={dataTestId?.root}\n {...rest}\n >\n <div className={styles.title}>\n {titleIcon ? (\n <span className={styles.titleIcon} aria-hidden='true'>\n {titleIcon}\n </span>\n ) : null}\n <div className={styles.label} data-testid={dataTestId?.label}>\n {label}\n </div>\n {info ? (\n <Tooltip content={info} className={styles.info}>\n <IconInfo className={styles.infoIcon} />\n </Tooltip>\n ) : null}\n </div>\n <div className={styles.valueRow}>\n <div className={styles.value} data-testid={dataTestId?.value}>\n {value}\n </div>\n {icon != null ? (\n <span\n className={styles.icon}\n aria-hidden='true'\n data-testid={dataTestId?.icon}\n >\n {icon}\n </span>\n ) : null}\n {align === 'left' && subValue != null ? (\n <div className={styles.subValue} data-testid={dataTestId?.subValue}>\n {subValue}\n </div>\n ) : null}\n </div>\n {align === 'center' && subValue != null ? (\n <div className={styles.subValue} data-testid={dataTestId?.subValue}>\n {subValue}\n </div>\n ) : null}\n {description != null ? (\n <div className={styles.description} data-testid={dataTestId?.description}>\n {description}\n </div>\n ) : null}\n </div>\n)\n"],"names":["StatItem","_ref","label","value","titleIcon","info","icon","subValue","description","align","className","dataTestId","rest","_jsxs","cn","styles","item","root","children","title","_jsx","Tooltip","content","IconInfo","infoIcon","valueRow"],"mappings":"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"}
|
|
@@ -8,12 +8,14 @@ const Switch = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
|
8
8
|
label,
|
|
9
9
|
className,
|
|
10
10
|
disabled,
|
|
11
|
+
dataTestId,
|
|
11
12
|
...rest
|
|
12
13
|
} = _ref;
|
|
13
14
|
return /*#__PURE__*/jsxs("label", {
|
|
14
15
|
className: cn(styles.container, className, {
|
|
15
16
|
[styles.containerDisabled]: disabled
|
|
16
17
|
}),
|
|
18
|
+
"data-testid": dataTestId?.root,
|
|
17
19
|
children: [/*#__PURE__*/jsxs("span", {
|
|
18
20
|
className: styles.control,
|
|
19
21
|
children: [/*#__PURE__*/jsx("input", {
|
|
@@ -22,6 +24,7 @@ const Switch = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
|
22
24
|
role: "switch",
|
|
23
25
|
className: styles.input,
|
|
24
26
|
disabled: disabled,
|
|
27
|
+
"data-testid": dataTestId?.input,
|
|
25
28
|
...rest
|
|
26
29
|
}), /*#__PURE__*/jsx("span", {
|
|
27
30
|
className: styles.knob
|
|
@@ -30,6 +33,7 @@ const Switch = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
|
30
33
|
className: cn(styles.label, {
|
|
31
34
|
[styles.labelDisabled]: disabled
|
|
32
35
|
}),
|
|
36
|
+
"data-testid": dataTestId?.label,
|
|
33
37
|
children: label
|
|
34
38
|
}) : null]
|
|
35
39
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Switch.mjs","sources":["../../../src/switch/Switch.tsx"],"sourcesContent":["import { forwardRef, type InputHTMLAttributes, type ReactNode } from 'react'\n\nimport cn from 'classnames'\n\nimport styles from './Switch.module.css'\n\nexport type SwitchProps = Omit<\n InputHTMLAttributes<HTMLInputElement>,\n 'type'\n> & {\n label?: ReactNode\n}\n\nexport const Switch = forwardRef<HTMLInputElement, SwitchProps>(\n ({ label, className, disabled, ...rest }, ref) => (\n <label\n className={cn(styles.container, className, {\n [styles.containerDisabled]: disabled,\n })}\n >\n <span className={styles.control}>\n <input\n ref={ref}\n type='checkbox'\n role='switch'\n className={styles.input}\n disabled={disabled}\n {...rest}\n />\n <span className={styles.knob} />\n </span>\n {label ? (\n <span\n className={cn(styles.label, { [styles.labelDisabled]: disabled })}\n >\n {label}\n </span>\n ) : null}\n </label>\n ),\n)\n\nSwitch.displayName = 'Switch'\n"],"names":["Switch","forwardRef","_ref","ref","label","className","disabled","rest","_jsxs","cn","styles","container","containerDisabled","children","control","_jsx","type","role","input","knob","labelDisabled","displayName"],"mappings":";;;;;
|
|
1
|
+
{"version":3,"file":"Switch.mjs","sources":["../../../src/switch/Switch.tsx"],"sourcesContent":["import { forwardRef, type InputHTMLAttributes, type ReactNode } from 'react'\n\nimport cn from 'classnames'\n\nimport styles from './Switch.module.css'\n\nexport type SwitchDataTestId = {\n root?: string\n input?: string\n label?: string\n}\n\nexport type SwitchProps = Omit<\n InputHTMLAttributes<HTMLInputElement>,\n 'type'\n> & {\n label?: ReactNode\n dataTestId?: SwitchDataTestId\n}\n\nexport const Switch = forwardRef<HTMLInputElement, SwitchProps>(\n ({ label, className, disabled, dataTestId, ...rest }, ref) => (\n <label\n className={cn(styles.container, className, {\n [styles.containerDisabled]: disabled,\n })}\n data-testid={dataTestId?.root}\n >\n <span className={styles.control}>\n <input\n ref={ref}\n type='checkbox'\n role='switch'\n className={styles.input}\n disabled={disabled}\n data-testid={dataTestId?.input}\n {...rest}\n />\n <span className={styles.knob} />\n </span>\n {label ? (\n <span\n className={cn(styles.label, { [styles.labelDisabled]: disabled })}\n data-testid={dataTestId?.label}\n >\n {label}\n </span>\n ) : null}\n </label>\n ),\n)\n\nSwitch.displayName = 'Switch'\n"],"names":["Switch","forwardRef","_ref","ref","label","className","disabled","dataTestId","rest","_jsxs","cn","styles","container","containerDisabled","root","children","control","_jsx","type","role","input","knob","labelDisabled","displayName"],"mappings":";;;;;AAoBO,MAAMA,MAAM,gBAAGC,UAAU,CAC9B,CAAAC,IAAA,EAAsDC,GAAG,KAAA;EAAA,IAAxD;IAAEC,KAAK;IAAEC,SAAS;IAAEC,QAAQ;IAAEC,UAAU;IAAE,GAAGC,IAAAA;AAAK,GAAC,GAAAN,IAAA,CAAA;AAAA,EAAA,oBAClDO,IAAA,CAAA,OAAA,EAAA;IACEJ,SAAS,EAAEK,EAAE,CAACC,MAAM,CAACC,SAAS,EAAEP,SAAS,EAAE;MACzC,CAACM,MAAM,CAACE,iBAAiB,GAAGP,QAAAA;AAC9B,KAAC,CAAE;IACH,aAAaC,EAAAA,UAAU,EAAEO,IAAK;AAAAC,IAAAA,QAAA,gBAE9BN,IAAA,CAAA,MAAA,EAAA;MAAMJ,SAAS,EAAEM,MAAM,CAACK,OAAQ;AAAAD,MAAAA,QAAA,gBAC9BE,GAAA,CAAA,OAAA,EAAA;AACEd,QAAAA,GAAG,EAAEA,GAAI;AACTe,QAAAA,IAAI,EAAC,UAAU;AACfC,QAAAA,IAAI,EAAC,QAAQ;QACbd,SAAS,EAAEM,MAAM,CAACS,KAAM;AACxBd,QAAAA,QAAQ,EAAEA,QAAS;QACnB,aAAaC,EAAAA,UAAU,EAAEa,KAAM;QAAA,GAC3BZ,IAAAA;OACL,CAAC,eACFS,GAAA,CAAA,MAAA,EAAA;QAAMZ,SAAS,EAAEM,MAAM,CAACU,IAAAA;AAAK,OAAE,CAAC,CAAA;AAAA,KAC5B,CAAC,EACNjB,KAAK,gBACJa,GAAA,CAAA,MAAA,EAAA;AACEZ,MAAAA,SAAS,EAAEK,EAAE,CAACC,MAAM,CAACP,KAAK,EAAE;QAAE,CAACO,MAAM,CAACW,aAAa,GAAGhB,QAAAA;AAAS,OAAC,CAAE;MAClE,aAAaC,EAAAA,UAAU,EAAEH,KAAM;AAAAW,MAAAA,QAAA,EAE9BX,KAAAA;KACG,CAAC,GACL,IAAI,CAAA;AAAA,GACH,CAAC,CAAA;AAAA,CAEZ,EAAC;AAEDJ,MAAM,CAACuB,WAAW,GAAG,QAAQ;;;;"}
|
package/dist/esm/tabs/Tab.mjs
CHANGED
|
@@ -9,6 +9,7 @@ const Tab = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
|
9
9
|
className,
|
|
10
10
|
children,
|
|
11
11
|
type = 'button',
|
|
12
|
+
dataTestId,
|
|
12
13
|
...rest
|
|
13
14
|
} = _ref;
|
|
14
15
|
return /*#__PURE__*/jsx("button", {
|
|
@@ -17,6 +18,7 @@ const Tab = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
|
17
18
|
role: "tab",
|
|
18
19
|
"aria-selected": active,
|
|
19
20
|
className: cn(styles.tab, active && styles.active, className),
|
|
21
|
+
"data-testid": dataTestId?.root,
|
|
20
22
|
...rest,
|
|
21
23
|
children: children
|
|
22
24
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tab.mjs","sources":["../../../src/tabs/Tab.tsx"],"sourcesContent":["import { forwardRef, type ButtonHTMLAttributes } from 'react'\n\nimport cn from 'classnames'\n\nimport styles from './Tab.module.css'\n\nexport type TabProps = ButtonHTMLAttributes<HTMLButtonElement> & {\n active?: boolean\n}\n\nexport const Tab = forwardRef<HTMLButtonElement, TabProps>(\n ({
|
|
1
|
+
{"version":3,"file":"Tab.mjs","sources":["../../../src/tabs/Tab.tsx"],"sourcesContent":["import { forwardRef, type ButtonHTMLAttributes } from 'react'\n\nimport cn from 'classnames'\n\nimport styles from './Tab.module.css'\n\nexport type TabDataTestId = {\n root?: string\n}\n\nexport type TabProps = ButtonHTMLAttributes<HTMLButtonElement> & {\n active?: boolean\n dataTestId?: TabDataTestId\n}\n\nexport const Tab = forwardRef<HTMLButtonElement, TabProps>(\n (\n {\n active = false,\n className,\n children,\n type = 'button',\n dataTestId,\n ...rest\n },\n ref,\n ) => (\n <button\n ref={ref}\n type={type}\n role='tab'\n aria-selected={active}\n className={cn(styles.tab, active && styles.active, className)}\n data-testid={dataTestId?.root}\n {...rest}\n >\n {children}\n </button>\n ),\n)\n\nTab.displayName = 'Tab'\n"],"names":["Tab","forwardRef","_ref","ref","active","className","children","type","dataTestId","rest","_jsx","role","cn","styles","tab","root","displayName"],"mappings":";;;;;AAeO,MAAMA,GAAG,gBAAGC,UAAU,CAC3B,CAAAC,IAAA,EASEC,GAAG,KAAA;EAAA,IARH;AACEC,IAAAA,MAAM,GAAG,KAAK;IACdC,SAAS;IACTC,QAAQ;AACRC,IAAAA,IAAI,GAAG,QAAQ;IACfC,UAAU;IACV,GAAGC,IAAAA;AACL,GAAC,GAAAP,IAAA,CAAA;AAAA,EAAA,oBAGDQ,GAAA,CAAA,QAAA,EAAA;AACEP,IAAAA,GAAG,EAAEA,GAAI;AACTI,IAAAA,IAAI,EAAEA,IAAK;AACXI,IAAAA,IAAI,EAAC,KAAK;AACV,IAAA,eAAA,EAAeP,MAAO;AACtBC,IAAAA,SAAS,EAAEO,EAAE,CAACC,MAAM,CAACC,GAAG,EAAEV,MAAM,IAAIS,MAAM,CAACT,MAAM,EAAEC,SAAS,CAAE;IAC9D,aAAaG,EAAAA,UAAU,EAAEO,IAAK;AAAA,IAAA,GAC1BN,IAAI;AAAAH,IAAAA,QAAA,EAEPA,QAAAA;AAAQ,GACH,CAAC,CAAA;AAAA,CAEb,EAAC;AAEDN,GAAG,CAACgB,WAAW,GAAG,KAAK;;;;"}
|
package/dist/esm/tabs/Tabs.mjs
CHANGED
|
@@ -9,7 +9,9 @@ const Tabs = _ref => {
|
|
|
9
9
|
items,
|
|
10
10
|
value,
|
|
11
11
|
onChange,
|
|
12
|
-
className
|
|
12
|
+
className,
|
|
13
|
+
dataTestId,
|
|
14
|
+
...rest
|
|
13
15
|
} = _ref;
|
|
14
16
|
const containerRef = useRef(null);
|
|
15
17
|
const activeButtonRef = useRef(null);
|
|
@@ -39,6 +41,8 @@ const Tabs = _ref => {
|
|
|
39
41
|
ref: containerRef,
|
|
40
42
|
role: "tablist",
|
|
41
43
|
className: cn(styles.tabs, className),
|
|
44
|
+
"data-testid": dataTestId?.root,
|
|
45
|
+
...rest,
|
|
42
46
|
children: [/*#__PURE__*/jsx("div", {
|
|
43
47
|
ref: selectionRef,
|
|
44
48
|
"aria-hidden": "true",
|
|
@@ -49,6 +53,7 @@ const Tabs = _ref => {
|
|
|
49
53
|
ref: active ? activeButtonRef : undefined,
|
|
50
54
|
active: active,
|
|
51
55
|
disabled: item.disabled,
|
|
56
|
+
dataTestId: item.dataTestId,
|
|
52
57
|
onClick: () => {
|
|
53
58
|
if (item.value !== value) onChange(item.value);
|
|
54
59
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tabs.mjs","sources":["../../../src/tabs/Tabs.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"Tabs.mjs","sources":["../../../src/tabs/Tabs.tsx"],"sourcesContent":["import {\n useLayoutEffect,\n useRef,\n useState,\n type ComponentPropsWithoutRef,\n type ReactNode,\n} from 'react'\n\nimport cn from 'classnames'\n\nimport { Tab, type TabDataTestId } from './Tab'\nimport styles from './Tabs.module.css'\n\nexport type TabsDataTestId = {\n root?: string\n}\n\nexport type TabItem = {\n value: string\n label: ReactNode\n disabled?: boolean\n dataTestId?: TabDataTestId\n}\n\nexport type TabsProps = Omit<ComponentPropsWithoutRef<'div'>, 'onChange'> & {\n items: TabItem[]\n value: string\n onChange: (value: string) => void\n dataTestId?: TabsDataTestId\n}\n\nexport const Tabs = ({\n items,\n value,\n onChange,\n className,\n dataTestId,\n ...rest\n}: TabsProps) => {\n const containerRef = useRef<HTMLDivElement>(null)\n const activeButtonRef = useRef<HTMLButtonElement>(null)\n const selectionRef = useRef<HTMLDivElement>(null)\n // Skip the transition on the first measurement so the bar doesn't fly in from 0,0.\n const [animated, setAnimated] = useState(false)\n\n useLayoutEffect(() => {\n const updateSelection = () => {\n const button = activeButtonRef.current\n const container = containerRef.current\n const selection = selectionRef.current\n if (!button || !container || !selection) return\n\n const buttonRect = button.getBoundingClientRect()\n const containerRect = container.getBoundingClientRect()\n const x = buttonRect.left - containerRect.left\n\n selection.style.width = `${buttonRect.width}px`\n selection.style.transform = `translateX(${x}px)`\n }\n\n updateSelection()\n setAnimated(true)\n\n window.addEventListener('resize', updateSelection)\n return () => {\n window.removeEventListener('resize', updateSelection)\n }\n }, [value, items])\n\n return (\n <div\n ref={containerRef}\n role='tablist'\n className={cn(styles.tabs, className)}\n data-testid={dataTestId?.root}\n {...rest}\n >\n <div\n ref={selectionRef}\n aria-hidden='true'\n className={cn(styles.selection, animated && styles.animated)}\n />\n {items.map((item) => {\n const active = item.value === value\n return (\n <Tab\n key={item.value}\n ref={active ? activeButtonRef : undefined}\n active={active}\n disabled={item.disabled}\n dataTestId={item.dataTestId}\n onClick={() => {\n if (item.value !== value) onChange(item.value)\n }}\n >\n {item.label}\n </Tab>\n )\n })}\n </div>\n )\n}\n"],"names":["Tabs","_ref","items","value","onChange","className","dataTestId","rest","containerRef","useRef","activeButtonRef","selectionRef","animated","setAnimated","useState","useLayoutEffect","updateSelection","button","current","container","selection","buttonRect","getBoundingClientRect","containerRect","x","left","style","width","transform","window","addEventListener","removeEventListener","_jsxs","ref","role","cn","styles","tabs","root","children","_jsx","map","item","active","Tab","undefined","disabled","onClick","label"],"mappings":"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"}
|
package/dist/esm/tag/Tag.mjs
CHANGED
|
@@ -10,20 +10,24 @@ const Tag = _ref => {
|
|
|
10
10
|
onClose,
|
|
11
11
|
className,
|
|
12
12
|
children,
|
|
13
|
+
dataTestId,
|
|
13
14
|
...rest
|
|
14
15
|
} = _ref;
|
|
15
16
|
return /*#__PURE__*/jsxs("span", {
|
|
16
17
|
className: cn(styles.tag, styles[variant], className),
|
|
18
|
+
"data-testid": dataTestId?.root,
|
|
17
19
|
...rest,
|
|
18
20
|
children: [icon != null ? /*#__PURE__*/jsx("span", {
|
|
19
21
|
className: styles.icon,
|
|
20
22
|
"aria-hidden": "true",
|
|
23
|
+
"data-testid": dataTestId?.icon,
|
|
21
24
|
children: icon
|
|
22
25
|
}) : null, children, onClose ? /*#__PURE__*/jsx("button", {
|
|
23
26
|
type: "button",
|
|
24
27
|
className: styles.closeButton,
|
|
25
28
|
"aria-label": "Remove",
|
|
26
29
|
onClick: onClose,
|
|
30
|
+
"data-testid": dataTestId?.closeButton,
|
|
27
31
|
children: /*#__PURE__*/jsx(IconCross, {
|
|
28
32
|
"aria-hidden": "true"
|
|
29
33
|
})
|
package/dist/esm/tag/Tag.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tag.mjs","sources":["../../../src/tag/Tag.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react'\n\nimport cn from 'classnames'\n\nimport { IconCross } from '../icons'\nimport styles from './Tag.module.css'\n\nexport type TagVariant =\n | 'default'\n | 'neutral'\n | 'success'\n | 'warning'\n | 'error'\n | 'info'\n | 'active'\n | 'action'\n\nexport type TagProps = HTMLAttributes<HTMLSpanElement> & {\n variant?: TagVariant\n icon?: ReactNode\n onClose?: () => void\n}\n\nexport const Tag = ({\n variant = 'default',\n icon,\n onClose,\n className,\n children,\n ...rest\n}: TagProps) => (\n <span
|
|
1
|
+
{"version":3,"file":"Tag.mjs","sources":["../../../src/tag/Tag.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react'\n\nimport cn from 'classnames'\n\nimport { IconCross } from '../icons'\nimport styles from './Tag.module.css'\n\nexport type TagVariant =\n | 'default'\n | 'neutral'\n | 'success'\n | 'warning'\n | 'error'\n | 'info'\n | 'active'\n | 'action'\n\nexport type TagDataTestId = {\n root?: string\n icon?: string\n closeButton?: string\n}\n\nexport type TagProps = HTMLAttributes<HTMLSpanElement> & {\n variant?: TagVariant\n icon?: ReactNode\n onClose?: () => void\n dataTestId?: TagDataTestId\n}\n\nexport const Tag = ({\n variant = 'default',\n icon,\n onClose,\n className,\n children,\n dataTestId,\n ...rest\n}: TagProps) => (\n <span\n className={cn(styles.tag, styles[variant], className)}\n data-testid={dataTestId?.root}\n {...rest}\n >\n {icon != null ? (\n <span\n className={styles.icon}\n aria-hidden='true'\n data-testid={dataTestId?.icon}\n >\n {icon}\n </span>\n ) : null}\n {children}\n {onClose ? (\n <button\n type='button'\n className={styles.closeButton}\n aria-label='Remove'\n onClick={onClose}\n data-testid={dataTestId?.closeButton}\n >\n <IconCross aria-hidden='true' />\n </button>\n ) : null}\n </span>\n)\n"],"names":["Tag","_ref","variant","icon","onClose","className","children","dataTestId","rest","_jsxs","cn","styles","tag","root","_jsx","type","closeButton","onClick","IconCross"],"mappings":";;;;;AA8BO,MAAMA,GAAG,GAAGC,IAAA,IAAA;EAAA,IAAC;AAClBC,IAAAA,OAAO,GAAG,SAAS;IACnBC,IAAI;IACJC,OAAO;IACPC,SAAS;IACTC,QAAQ;IACRC,UAAU;IACV,GAAGC,IAAAA;AACK,GAAC,GAAAP,IAAA,CAAA;AAAA,EAAA,oBACTQ,IAAA,CAAA,MAAA,EAAA;AACEJ,IAAAA,SAAS,EAAEK,EAAE,CAACC,MAAM,CAACC,GAAG,EAAED,MAAM,CAACT,OAAO,CAAC,EAAEG,SAAS,CAAE;IACtD,aAAaE,EAAAA,UAAU,EAAEM,IAAK;AAAA,IAAA,GAC1BL,IAAI;AAAAF,IAAAA,QAAA,EAEPH,CAAAA,IAAI,IAAI,IAAI,gBACXW,GAAA,CAAA,MAAA,EAAA;MACET,SAAS,EAAEM,MAAM,CAACR,IAAK;AACvB,MAAA,aAAA,EAAY,MAAM;MAClB,aAAaI,EAAAA,UAAU,EAAEJ,IAAK;AAAAG,MAAAA,QAAA,EAE7BH,IAAAA;KACG,CAAC,GACL,IAAI,EACPG,QAAQ,EACRF,OAAO,gBACNU,GAAA,CAAA,QAAA,EAAA;AACEC,MAAAA,IAAI,EAAC,QAAQ;MACbV,SAAS,EAAEM,MAAM,CAACK,WAAY;AAC9B,MAAA,YAAA,EAAW,QAAQ;AACnBC,MAAAA,OAAO,EAAEb,OAAQ;MACjB,aAAaG,EAAAA,UAAU,EAAES,WAAY;MAAAV,QAAA,eAErCQ,GAAA,CAACI,SAAS,EAAA;QAAC,aAAY,EAAA,MAAA;OAAQ,CAAA;KACzB,CAAC,GACP,IAAI,CAAA;AAAA,GACJ,CAAC,CAAA;AAAA;;;;"}
|
|
@@ -13,6 +13,7 @@ const TextLink = _ref => {
|
|
|
13
13
|
rel,
|
|
14
14
|
href,
|
|
15
15
|
onClick,
|
|
16
|
+
dataTestId,
|
|
16
17
|
...rest
|
|
17
18
|
} = _ref;
|
|
18
19
|
return /*#__PURE__*/jsxs("a", {
|
|
@@ -23,10 +24,12 @@ const TextLink = _ref => {
|
|
|
23
24
|
"aria-disabled": disabled || undefined,
|
|
24
25
|
tabIndex: disabled ? -1 : undefined,
|
|
25
26
|
onClick: disabled ? undefined : onClick,
|
|
27
|
+
"data-testid": dataTestId?.root,
|
|
26
28
|
...rest,
|
|
27
29
|
children: [children, icon != null ? /*#__PURE__*/jsx("span", {
|
|
28
30
|
className: styles.icon,
|
|
29
31
|
"aria-hidden": "true",
|
|
32
|
+
"data-testid": dataTestId?.icon,
|
|
30
33
|
children: icon
|
|
31
34
|
}) : null]
|
|
32
35
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextLink.mjs","sources":["../../../src/text-link/TextLink.tsx"],"sourcesContent":["import type { AnchorHTMLAttributes, ReactNode } from 'react'\n\nimport cn from 'classnames'\n\nimport styles from './TextLink.module.css'\n\nexport type TextLinkProps = AnchorHTMLAttributes<HTMLAnchorElement> & {\n icon?: ReactNode\n external?: boolean\n disabled?: boolean\n}\n\nexport const TextLink = ({\n icon,\n external = false,\n disabled = false,\n className,\n children,\n target,\n rel,\n href,\n onClick,\n ...rest\n}: TextLinkProps) => (\n <a\n className={cn(styles.link, className)}\n target={target ?? (external ? '_blank' : undefined)}\n rel={rel ?? (external ? 'noopener noreferrer' : undefined)}\n href={disabled ? undefined : href}\n aria-disabled={disabled || undefined}\n tabIndex={disabled ? -1 : undefined}\n onClick={disabled ? undefined : onClick}\n {...rest}\n >\n {children}\n {icon != null ? (\n <span
|
|
1
|
+
{"version":3,"file":"TextLink.mjs","sources":["../../../src/text-link/TextLink.tsx"],"sourcesContent":["import type { AnchorHTMLAttributes, ReactNode } from 'react'\n\nimport cn from 'classnames'\n\nimport styles from './TextLink.module.css'\n\nexport type TextLinkDataTestId = {\n root?: string\n icon?: string\n}\n\nexport type TextLinkProps = AnchorHTMLAttributes<HTMLAnchorElement> & {\n icon?: ReactNode\n external?: boolean\n disabled?: boolean\n dataTestId?: TextLinkDataTestId\n}\n\nexport const TextLink = ({\n icon,\n external = false,\n disabled = false,\n className,\n children,\n target,\n rel,\n href,\n onClick,\n dataTestId,\n ...rest\n}: TextLinkProps) => (\n <a\n className={cn(styles.link, className)}\n target={target ?? (external ? '_blank' : undefined)}\n rel={rel ?? (external ? 'noopener noreferrer' : undefined)}\n href={disabled ? undefined : href}\n aria-disabled={disabled || undefined}\n tabIndex={disabled ? -1 : undefined}\n onClick={disabled ? undefined : onClick}\n data-testid={dataTestId?.root}\n {...rest}\n >\n {children}\n {icon != null ? (\n <span\n className={styles.icon}\n aria-hidden='true'\n data-testid={dataTestId?.icon}\n >\n {icon}\n </span>\n ) : null}\n </a>\n)\n"],"names":["TextLink","_ref","icon","external","disabled","className","children","target","rel","href","onClick","dataTestId","rest","_jsxs","cn","styles","link","undefined","tabIndex","root","_jsx"],"mappings":";;;;AAkBO,MAAMA,QAAQ,GAAGC,IAAA,IAAA;EAAA,IAAC;IACvBC,IAAI;AACJC,IAAAA,QAAQ,GAAG,KAAK;AAChBC,IAAAA,QAAQ,GAAG,KAAK;IAChBC,SAAS;IACTC,QAAQ;IACRC,MAAM;IACNC,GAAG;IACHC,IAAI;IACJC,OAAO;IACPC,UAAU;IACV,GAAGC,IAAAA;AACU,GAAC,GAAAX,IAAA,CAAA;AAAA,EAAA,oBACdY,IAAA,CAAA,GAAA,EAAA;IACER,SAAS,EAAES,EAAE,CAACC,MAAM,CAACC,IAAI,EAAEX,SAAS,CAAE;IACtCE,MAAM,EAAEA,MAAM,KAAKJ,QAAQ,GAAG,QAAQ,GAAGc,SAAS,CAAE;IACpDT,GAAG,EAAEA,GAAG,KAAKL,QAAQ,GAAG,qBAAqB,GAAGc,SAAS,CAAE;AAC3DR,IAAAA,IAAI,EAAEL,QAAQ,GAAGa,SAAS,GAAGR,IAAK;IAClC,eAAeL,EAAAA,QAAQ,IAAIa,SAAU;AACrCC,IAAAA,QAAQ,EAAEd,QAAQ,GAAG,CAAC,CAAC,GAAGa,SAAU;AACpCP,IAAAA,OAAO,EAAEN,QAAQ,GAAGa,SAAS,GAAGP,OAAQ;IACxC,aAAaC,EAAAA,UAAU,EAAEQ,IAAK;AAAA,IAAA,GAC1BP,IAAI;AAAAN,IAAAA,QAAA,GAEPA,QAAQ,EACRJ,IAAI,IAAI,IAAI,gBACXkB,GAAA,CAAA,MAAA,EAAA;MACEf,SAAS,EAAEU,MAAM,CAACb,IAAK;AACvB,MAAA,aAAA,EAAY,MAAM;MAClB,aAAaS,EAAAA,UAAU,EAAET,IAAK;AAAAI,MAAAA,QAAA,EAE7BJ,IAAAA;KACG,CAAC,GACL,IAAI,CAAA;AAAA,GACP,CAAC,CAAA;AAAA;;;;"}
|
|
@@ -7,15 +7,21 @@ const TokenAmount = _ref => {
|
|
|
7
7
|
let {
|
|
8
8
|
symbol,
|
|
9
9
|
amount,
|
|
10
|
-
className
|
|
10
|
+
className,
|
|
11
|
+
dataTestId,
|
|
12
|
+
...rest
|
|
11
13
|
} = _ref;
|
|
12
14
|
return /*#__PURE__*/jsxs("span", {
|
|
13
15
|
className: cn(styles.root, className),
|
|
16
|
+
"data-testid": dataTestId?.root,
|
|
17
|
+
...rest,
|
|
14
18
|
children: [/*#__PURE__*/jsx(TokenIcon, {
|
|
15
19
|
token: symbol,
|
|
16
|
-
className: styles.icon
|
|
20
|
+
className: styles.icon,
|
|
21
|
+
"data-testid": dataTestId?.icon
|
|
17
22
|
}), /*#__PURE__*/jsx("span", {
|
|
18
23
|
className: styles.amount,
|
|
24
|
+
"data-testid": dataTestId?.amount,
|
|
19
25
|
children: amount
|
|
20
26
|
})]
|
|
21
27
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TokenAmount.mjs","sources":["../../../src/token-amount/TokenAmount.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\n\nimport { TokenIcon, type TokenIconSymbol } from '../icons'\nimport cn from 'classnames'\n\nimport styles from './TokenAmount.module.css'\n\nexport type TokenAmountProps = {\n symbol: TokenIconSymbol\n amount: ReactNode\n
|
|
1
|
+
{"version":3,"file":"TokenAmount.mjs","sources":["../../../src/token-amount/TokenAmount.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ReactNode } from 'react'\n\nimport { TokenIcon, type TokenIconSymbol } from '../icons'\nimport cn from 'classnames'\n\nimport styles from './TokenAmount.module.css'\n\nexport type TokenAmountDataTestId = {\n root?: string\n icon?: string\n amount?: string\n}\n\nexport type TokenAmountProps = Omit<\n ComponentPropsWithoutRef<'span'>,\n 'children'\n> & {\n symbol: TokenIconSymbol\n amount: ReactNode\n dataTestId?: TokenAmountDataTestId\n}\n\nexport const TokenAmount = ({\n symbol,\n amount,\n className,\n dataTestId,\n ...rest\n}: TokenAmountProps) => (\n <span\n className={cn(styles.root, className)}\n data-testid={dataTestId?.root}\n {...rest}\n >\n <TokenIcon\n token={symbol}\n className={styles.icon}\n data-testid={dataTestId?.icon}\n />\n <span className={styles.amount} data-testid={dataTestId?.amount}>\n {amount}\n </span>\n </span>\n)\n"],"names":["TokenAmount","_ref","symbol","amount","className","dataTestId","rest","_jsxs","cn","styles","root","children","_jsx","TokenIcon","token","icon"],"mappings":";;;;;AAsBO,MAAMA,WAAW,GAAGC,IAAA,IAAA;EAAA,IAAC;IAC1BC,MAAM;IACNC,MAAM;IACNC,SAAS;IACTC,UAAU;IACV,GAAGC,IAAAA;AACa,GAAC,GAAAL,IAAA,CAAA;AAAA,EAAA,oBACjBM,IAAA,CAAA,MAAA,EAAA;IACEH,SAAS,EAAEI,EAAE,CAACC,MAAM,CAACC,IAAI,EAAEN,SAAS,CAAE;IACtC,aAAaC,EAAAA,UAAU,EAAEK,IAAK;AAAA,IAAA,GAC1BJ,IAAI;IAAAK,QAAA,EAAA,cAERC,GAAA,CAACC,SAAS,EAAA;AACRC,MAAAA,KAAK,EAAEZ,MAAO;MACdE,SAAS,EAAEK,MAAM,CAACM,IAAK;AACvB,MAAA,aAAA,EAAaV,UAAU,EAAEU,IAAAA;KAC1B,CAAC,eACFH,GAAA,CAAA,MAAA,EAAA;MAAMR,SAAS,EAAEK,MAAM,CAACN,MAAO;MAAC,aAAaE,EAAAA,UAAU,EAAEF,MAAO;AAAAQ,MAAAA,QAAA,EAC7DR,MAAAA;AAAM,KACH,CAAC,CAAA;AAAA,GACH,CAAC,CAAA;AAAA;;;;"}
|
|
@@ -15,7 +15,9 @@ const TokenSelector = _ref => {
|
|
|
15
15
|
single = false,
|
|
16
16
|
size = 'default',
|
|
17
17
|
placeholder = 'Select',
|
|
18
|
-
className
|
|
18
|
+
className,
|
|
19
|
+
dataTestId,
|
|
20
|
+
...rest
|
|
19
21
|
} = _ref;
|
|
20
22
|
const [open, setOpen] = useState(false);
|
|
21
23
|
const rootRef = useRef(null);
|
|
@@ -36,14 +38,19 @@ const TokenSelector = _ref => {
|
|
|
36
38
|
if (single) {
|
|
37
39
|
return /*#__PURE__*/jsxs("span", {
|
|
38
40
|
className: cn(styles.single, styles[size], className),
|
|
41
|
+
"data-testid": dataTestId?.root,
|
|
42
|
+
...rest,
|
|
39
43
|
children: [selectedOption?.icon ? /*#__PURE__*/jsx("span", {
|
|
40
44
|
className: styles.icon,
|
|
45
|
+
"data-testid": selectedOption.dataTestId?.icon,
|
|
41
46
|
children: selectedOption.icon
|
|
42
47
|
}) : null, /*#__PURE__*/jsx("span", {
|
|
43
48
|
className: styles.label,
|
|
49
|
+
"data-testid": selectedOption?.dataTestId?.label,
|
|
44
50
|
children: selectedOption?.label
|
|
45
51
|
}), size === 'default' && selectedOption?.secondaryLabel != null ? /*#__PURE__*/jsx("span", {
|
|
46
52
|
className: styles.secondaryLabel,
|
|
53
|
+
"data-testid": selectedOption.dataTestId?.secondaryLabel,
|
|
47
54
|
children: selectedOption.secondaryLabel
|
|
48
55
|
}) : null]
|
|
49
56
|
});
|
|
@@ -58,6 +65,8 @@ const TokenSelector = _ref => {
|
|
|
58
65
|
return /*#__PURE__*/jsxs("div", {
|
|
59
66
|
ref: rootRef,
|
|
60
67
|
className: cn(styles.root, className),
|
|
68
|
+
"data-testid": dataTestId?.root,
|
|
69
|
+
...rest,
|
|
61
70
|
children: [/*#__PURE__*/jsxs("button", {
|
|
62
71
|
ref: triggerRef,
|
|
63
72
|
type: "button",
|
|
@@ -65,17 +74,21 @@ const TokenSelector = _ref => {
|
|
|
65
74
|
"aria-expanded": open,
|
|
66
75
|
className: cn(styles.trigger, styles[size], open && styles.open),
|
|
67
76
|
onClick: handleTriggerClick,
|
|
77
|
+
"data-testid": dataTestId?.trigger,
|
|
68
78
|
children: [/*#__PURE__*/jsx("span", {
|
|
69
79
|
className: styles.content,
|
|
70
80
|
children: selectedOption ? /*#__PURE__*/jsxs(Fragment, {
|
|
71
81
|
children: [selectedOption.icon ? /*#__PURE__*/jsx("span", {
|
|
72
82
|
className: styles.icon,
|
|
83
|
+
"data-testid": selectedOption.dataTestId?.icon,
|
|
73
84
|
children: selectedOption.icon
|
|
74
85
|
}) : null, /*#__PURE__*/jsx("span", {
|
|
75
86
|
className: styles.label,
|
|
87
|
+
"data-testid": selectedOption.dataTestId?.label,
|
|
76
88
|
children: selectedOption.label
|
|
77
89
|
}), size === 'default' && selectedOption.secondaryLabel != null ? /*#__PURE__*/jsx("span", {
|
|
78
90
|
className: styles.secondaryLabel,
|
|
91
|
+
"data-testid": selectedOption.dataTestId?.secondaryLabel,
|
|
79
92
|
children: selectedOption.secondaryLabel
|
|
80
93
|
}) : null]
|
|
81
94
|
}) : /*#__PURE__*/jsx("span", {
|
|
@@ -90,6 +103,7 @@ const TokenSelector = _ref => {
|
|
|
90
103
|
}), open ? /*#__PURE__*/jsx("div", {
|
|
91
104
|
role: "listbox",
|
|
92
105
|
className: styles.panel,
|
|
106
|
+
"data-testid": dataTestId?.panel,
|
|
93
107
|
children: /*#__PURE__*/jsx("div", {
|
|
94
108
|
className: styles.list,
|
|
95
109
|
children: options.map(option => {
|
|
@@ -101,8 +115,10 @@ const TokenSelector = _ref => {
|
|
|
101
115
|
disabled: option.disabled,
|
|
102
116
|
className: cn(styles.option, styles[size], selected && styles.selected),
|
|
103
117
|
onClick: () => handleOptionClick(option),
|
|
118
|
+
"data-testid": option.dataTestId?.root,
|
|
104
119
|
children: [option.icon ? /*#__PURE__*/jsx("span", {
|
|
105
120
|
className: styles.icon,
|
|
121
|
+
"data-testid": option.dataTestId?.icon,
|
|
106
122
|
children: option.icon
|
|
107
123
|
}) : null, /*#__PURE__*/jsxs("span", {
|
|
108
124
|
className: styles.optionContent,
|
|
@@ -110,13 +126,16 @@ const TokenSelector = _ref => {
|
|
|
110
126
|
className: styles.optionRow,
|
|
111
127
|
children: [/*#__PURE__*/jsx("span", {
|
|
112
128
|
className: styles.label,
|
|
129
|
+
"data-testid": option.dataTestId?.label,
|
|
113
130
|
children: option.label
|
|
114
131
|
}), size === 'default' && option.secondaryLabel != null ? /*#__PURE__*/jsx("span", {
|
|
115
132
|
className: styles.secondaryLabel,
|
|
133
|
+
"data-testid": option.dataTestId?.secondaryLabel,
|
|
116
134
|
children: option.secondaryLabel
|
|
117
135
|
}) : null]
|
|
118
136
|
}), size === 'default' && option.description != null ? /*#__PURE__*/jsx("span", {
|
|
119
137
|
className: styles.description,
|
|
138
|
+
"data-testid": option.dataTestId?.description,
|
|
120
139
|
children: option.description
|
|
121
140
|
}) : null]
|
|
122
141
|
}), size === 'default' && selected ? /*#__PURE__*/jsx("span", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TokenSelector.mjs","sources":["../../../src/token-selector/TokenSelector.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState, type ReactNode } from 'react'\nimport { useOutsideClick } from '../hooks/useOutsideClick'\nimport { IconCheck, IconChevronDown, IconChevronUp } from '../icons'\nimport cn from 'classnames'\nimport styles from './TokenSelector.module.css'\n\nexport type TokenSelectorOption = {\n value: string\n label: ReactNode\n /** Shown next to `label`, in a muted weight — default size only. */\n secondaryLabel?: ReactNode\n /** Caption line below the label row — default size only. */\n description?: ReactNode\n icon?: ReactNode\n disabled?: boolean\n}\n\nexport type TokenSelectorSize = 'default' | 'small'\n\nexport type TokenSelectorProps = {\n options: TokenSelectorOption[]\n value?: string\n onChange?: (value: string) => void\n single?: boolean\n size?: TokenSelectorSize\n placeholder?: ReactNode\n className?: string\n}\n\nexport const TokenSelector = ({\n options,\n value,\n onChange,\n single = false,\n size = 'default',\n placeholder = 'Select',\n className,\n}: TokenSelectorProps) => {\n const [open, setOpen] = useState(false)\n const rootRef = useRef<HTMLDivElement>(null)\n const triggerRef = useRef<HTMLButtonElement>(null)\n\n const handleClose = useCallback(() => setOpen(false), [])\n useOutsideClick(rootRef, handleClose, open)\n\n useEffect(() => {\n if (!open) return\n\n const handleDocumentKeyDown = (event: KeyboardEvent) => {\n if (event.key !== 'Escape') return\n setOpen(false)\n triggerRef.current?.focus()\n }\n\n document.addEventListener('keydown', handleDocumentKeyDown)\n return () => document.removeEventListener('keydown', handleDocumentKeyDown)\n }, [open])\n\n const selectedOption = options.find((option) => option.value === value)\n\n if (single) {\n return (\n <span className={cn(styles.single, styles[size], className)}>\n {selectedOption?.icon ? (\n <span className={styles.icon}>{selectedOption.icon}</span>\n ) : null}\n <span className={styles.label}>{selectedOption?.label}</span>\n {size === 'default' && selectedOption?.secondaryLabel != null ? (\n <span className={styles.secondaryLabel}>\n {selectedOption.secondaryLabel}\n </span>\n ) : null}\n </span>\n )\n }\n\n const handleTriggerClick = () => setOpen((prev) => !prev)\n\n const handleOptionClick = (option: TokenSelectorOption) => {\n if (option.disabled) return\n onChange?.(option.value)\n setOpen(false)\n triggerRef.current?.focus()\n }\n\n return (\n <div ref={rootRef} className={cn(styles.root, className)}>\n <button\n ref={triggerRef}\n type='button'\n aria-haspopup='listbox'\n aria-expanded={open}\n className={cn(styles.trigger, styles[size], open && styles.open)}\n onClick={handleTriggerClick}\n >\n <span className={styles.content}>\n {selectedOption ? (\n <>\n {selectedOption.icon ? (\n <span className={styles.icon}>{selectedOption.icon}</span>\n ) : null}\n <span className={styles.label}>{selectedOption.label}</span>\n {size === 'default' && selectedOption.secondaryLabel != null ? (\n <span className={styles.secondaryLabel}>\n {selectedOption.secondaryLabel}\n </span>\n ) : null}\n </>\n ) : (\n <span className={styles.placeholder}>{placeholder}</span>\n )}\n </span>\n <span className={styles.chevron} aria-hidden='true'>\n {open ? <IconChevronUp /> : <IconChevronDown />}\n </span>\n </button>\n {open ? (\n <div role='listbox' className={styles.panel}>\n <div className={styles.list}>\n {options.map((option) => {\n const selected = option.value === value\n return (\n <button\n key={option.value}\n type='button'\n role='option'\n aria-selected={selected}\n disabled={option.disabled}\n className={cn(\n styles.option,\n styles[size],\n selected && styles.selected,\n )}\n onClick={() => handleOptionClick(option)}\n >\n {option.icon ? (\n <span className={styles.icon}>{option.icon}</span>\n ) : null}\n <span className={styles.optionContent}>\n <span className={styles.optionRow}>\n <span className={styles.label}>{option.label}</span>\n {size === 'default' && option.secondaryLabel != null ? (\n <span className={styles.secondaryLabel}>\n {option.secondaryLabel}\n </span>\n ) : null}\n </span>\n {size === 'default' && option.description != null ? (\n <span className={styles.description}>\n {option.description}\n </span>\n ) : null}\n </span>\n {size === 'default' && selected ? (\n <span className={styles.indicator} aria-hidden='true'>\n <IconCheck className={styles.checkmark} />\n </span>\n ) : null}\n </button>\n )\n })}\n </div>\n </div>\n ) : null}\n </div>\n )\n}\n"],"names":["TokenSelector","_ref","options","value","onChange","single","size","placeholder","className","open","setOpen","useState","rootRef","useRef","triggerRef","handleClose","useCallback","useOutsideClick","useEffect","handleDocumentKeyDown","event","key","current","focus","document","addEventListener","removeEventListener","selectedOption","find","option","_jsxs","cn","styles","children","icon","_jsx","label","secondaryLabel","handleTriggerClick","prev","handleOptionClick","disabled","ref","root","type","trigger","onClick","content","_Fragment","chevron","IconChevronUp","IconChevronDown","role","panel","list","map","selected","optionContent","optionRow","description","indicator","IconCheck","checkmark"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"TokenSelector.mjs","sources":["../../../src/token-selector/TokenSelector.tsx"],"sourcesContent":["import {\n useCallback,\n useEffect,\n useRef,\n useState,\n type ComponentPropsWithoutRef,\n type ReactNode,\n} from 'react'\nimport { useOutsideClick } from '../hooks/useOutsideClick'\nimport { IconCheck, IconChevronDown, IconChevronUp } from '../icons'\nimport cn from 'classnames'\nimport styles from './TokenSelector.module.css'\n\nexport type TokenSelectorOptionDataTestId = {\n root?: string\n icon?: string\n label?: string\n secondaryLabel?: string\n description?: string\n}\n\nexport type TokenSelectorOption = {\n value: string\n label: ReactNode\n /** Shown next to `label`, in a muted weight — default size only. */\n secondaryLabel?: ReactNode\n /** Caption line below the label row — default size only. */\n description?: ReactNode\n icon?: ReactNode\n disabled?: boolean\n dataTestId?: TokenSelectorOptionDataTestId\n}\n\nexport type TokenSelectorSize = 'default' | 'small'\n\nexport type TokenSelectorDataTestId = {\n root?: string\n trigger?: string\n panel?: string\n}\n\nexport type TokenSelectorProps = Omit<\n ComponentPropsWithoutRef<'div'>,\n 'onChange'\n> & {\n options: TokenSelectorOption[]\n value?: string\n onChange?: (value: string) => void\n single?: boolean\n size?: TokenSelectorSize\n placeholder?: ReactNode\n dataTestId?: TokenSelectorDataTestId\n}\n\nexport const TokenSelector = ({\n options,\n value,\n onChange,\n single = false,\n size = 'default',\n placeholder = 'Select',\n className,\n dataTestId,\n ...rest\n}: TokenSelectorProps) => {\n const [open, setOpen] = useState(false)\n const rootRef = useRef<HTMLDivElement>(null)\n const triggerRef = useRef<HTMLButtonElement>(null)\n\n const handleClose = useCallback(() => setOpen(false), [])\n useOutsideClick(rootRef, handleClose, open)\n\n useEffect(() => {\n if (!open) return\n\n const handleDocumentKeyDown = (event: KeyboardEvent) => {\n if (event.key !== 'Escape') return\n setOpen(false)\n triggerRef.current?.focus()\n }\n\n document.addEventListener('keydown', handleDocumentKeyDown)\n return () => document.removeEventListener('keydown', handleDocumentKeyDown)\n }, [open])\n\n const selectedOption = options.find((option) => option.value === value)\n\n if (single) {\n return (\n <span\n className={cn(styles.single, styles[size], className)}\n data-testid={dataTestId?.root}\n {...rest}\n >\n {selectedOption?.icon ? (\n <span\n className={styles.icon}\n data-testid={selectedOption.dataTestId?.icon}\n >\n {selectedOption.icon}\n </span>\n ) : null}\n <span\n className={styles.label}\n data-testid={selectedOption?.dataTestId?.label}\n >\n {selectedOption?.label}\n </span>\n {size === 'default' && selectedOption?.secondaryLabel != null ? (\n <span\n className={styles.secondaryLabel}\n data-testid={selectedOption.dataTestId?.secondaryLabel}\n >\n {selectedOption.secondaryLabel}\n </span>\n ) : null}\n </span>\n )\n }\n\n const handleTriggerClick = () => setOpen((prev) => !prev)\n\n const handleOptionClick = (option: TokenSelectorOption) => {\n if (option.disabled) return\n onChange?.(option.value)\n setOpen(false)\n triggerRef.current?.focus()\n }\n\n return (\n <div\n ref={rootRef}\n className={cn(styles.root, className)}\n data-testid={dataTestId?.root}\n {...rest}\n >\n <button\n ref={triggerRef}\n type='button'\n aria-haspopup='listbox'\n aria-expanded={open}\n className={cn(styles.trigger, styles[size], open && styles.open)}\n onClick={handleTriggerClick}\n data-testid={dataTestId?.trigger}\n >\n <span className={styles.content}>\n {selectedOption ? (\n <>\n {selectedOption.icon ? (\n <span\n className={styles.icon}\n data-testid={selectedOption.dataTestId?.icon}\n >\n {selectedOption.icon}\n </span>\n ) : null}\n <span\n className={styles.label}\n data-testid={selectedOption.dataTestId?.label}\n >\n {selectedOption.label}\n </span>\n {size === 'default' && selectedOption.secondaryLabel != null ? (\n <span\n className={styles.secondaryLabel}\n data-testid={selectedOption.dataTestId?.secondaryLabel}\n >\n {selectedOption.secondaryLabel}\n </span>\n ) : null}\n </>\n ) : (\n <span className={styles.placeholder}>{placeholder}</span>\n )}\n </span>\n <span className={styles.chevron} aria-hidden='true'>\n {open ? <IconChevronUp /> : <IconChevronDown />}\n </span>\n </button>\n {open ? (\n <div\n role='listbox'\n className={styles.panel}\n data-testid={dataTestId?.panel}\n >\n <div className={styles.list}>\n {options.map((option) => {\n const selected = option.value === value\n return (\n <button\n key={option.value}\n type='button'\n role='option'\n aria-selected={selected}\n disabled={option.disabled}\n className={cn(\n styles.option,\n styles[size],\n selected && styles.selected,\n )}\n onClick={() => handleOptionClick(option)}\n data-testid={option.dataTestId?.root}\n >\n {option.icon ? (\n <span\n className={styles.icon}\n data-testid={option.dataTestId?.icon}\n >\n {option.icon}\n </span>\n ) : null}\n <span className={styles.optionContent}>\n <span className={styles.optionRow}>\n <span\n className={styles.label}\n data-testid={option.dataTestId?.label}\n >\n {option.label}\n </span>\n {size === 'default' && option.secondaryLabel != null ? (\n <span\n className={styles.secondaryLabel}\n data-testid={option.dataTestId?.secondaryLabel}\n >\n {option.secondaryLabel}\n </span>\n ) : null}\n </span>\n {size === 'default' && option.description != null ? (\n <span\n className={styles.description}\n data-testid={option.dataTestId?.description}\n >\n {option.description}\n </span>\n ) : null}\n </span>\n {size === 'default' && selected ? (\n <span className={styles.indicator} aria-hidden='true'>\n <IconCheck className={styles.checkmark} />\n </span>\n ) : null}\n </button>\n )\n })}\n </div>\n </div>\n ) : null}\n </div>\n )\n}\n"],"names":["TokenSelector","_ref","options","value","onChange","single","size","placeholder","className","dataTestId","rest","open","setOpen","useState","rootRef","useRef","triggerRef","handleClose","useCallback","useOutsideClick","useEffect","handleDocumentKeyDown","event","key","current","focus","document","addEventListener","removeEventListener","selectedOption","find","option","_jsxs","cn","styles","root","children","icon","_jsx","label","secondaryLabel","handleTriggerClick","prev","handleOptionClick","disabled","ref","type","trigger","onClick","content","_Fragment","chevron","IconChevronUp","IconChevronDown","role","panel","list","map","selected","optionContent","optionRow","description","indicator","IconCheck","checkmark"],"mappings":"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"}
|
|
@@ -79,6 +79,7 @@ const Tooltip = _ref => {
|
|
|
79
79
|
children,
|
|
80
80
|
onMouseEnter,
|
|
81
81
|
onFocus,
|
|
82
|
+
dataTestId,
|
|
82
83
|
...rest
|
|
83
84
|
} = _ref;
|
|
84
85
|
const rootRef = useRef(null);
|
|
@@ -119,6 +120,7 @@ const Tooltip = _ref => {
|
|
|
119
120
|
className: cn(styles.wrapper, className),
|
|
120
121
|
onMouseEnter: handleMouseEnter,
|
|
121
122
|
onFocus: handleFocus,
|
|
123
|
+
"data-testid": dataTestId?.root,
|
|
122
124
|
...rest,
|
|
123
125
|
children: [children, /*#__PURE__*/jsx("span", {
|
|
124
126
|
ref: contentRef,
|
|
@@ -129,6 +131,7 @@ const Tooltip = _ref => {
|
|
|
129
131
|
'--local-tooltip-shift-y': `${adjustment?.shiftY ?? 0}px`
|
|
130
132
|
},
|
|
131
133
|
role: "tooltip",
|
|
134
|
+
"data-testid": dataTestId?.content,
|
|
132
135
|
children: content
|
|
133
136
|
})]
|
|
134
137
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.mjs","sources":["../../../src/tooltip/Tooltip.tsx"],"sourcesContent":["import {\n useCallback,\n useEffect,\n useRef,\n useState,\n type ComponentPropsWithoutRef,\n type CSSProperties,\n type FocusEvent,\n type MouseEvent,\n type ReactNode,\n} from 'react'\nimport { flushSync } from 'react-dom'\n\nimport cn from 'classnames'\n\nimport styles from './Tooltip.module.css'\n\nexport type TooltipPosition =\n | 'top'\n | 'right'\n | 'bottom'\n | 'left'\n | 'top-left'\n | 'top-right'\n | 'bottom-left'\n | 'bottom-right'\n\nexport type TooltipProps = Omit<ComponentPropsWithoutRef<'span'>, 'content'> & {\n content: ReactNode\n position?: TooltipPosition\n width?: number\n}\n\n// Minimal distance between the tooltip and the viewport edge.\nconst VIEWPORT_MARGIN = 16\n// Distance between the anchor and the content for main (non-corner) positions.\nconst POSITION_GAP = 15\n\ntype TooltipAdjustment = {\n position: TooltipPosition\n shiftX: number\n shiftY: number\n}\n\nconst clampValue = (value: number, min: number, max: number) =>\n Math.min(Math.max(value, min), Math.max(max, min))\n\nconst getMaxWidth = (width: number) =>\n `min(${width}px, calc(100vw - ${VIEWPORT_MARGIN * 2}px))`\n\n// Measures the anchor and the (hidden but laid-out) content, then picks a\n// position/shift that keeps the bubble inside the viewport — flipping sides\n// when there isn't room, sliding along the cross axis otherwise.\nconst getAdjustment = (\n position: TooltipPosition,\n anchor: DOMRect,\n content: DOMRect,\n): TooltipAdjustment => {\n const viewportWidth = document.documentElement.clientWidth\n const viewportHeight = document.documentElement.clientHeight\n\n const spaceTop = anchor.top - VIEWPORT_MARGIN\n const spaceBottom = viewportHeight - anchor.bottom - VIEWPORT_MARGIN\n const spaceLeft = anchor.left - VIEWPORT_MARGIN\n const spaceRight = viewportWidth - anchor.right - VIEWPORT_MARGIN\n\n let [main, corner] = position.split('-')\n const gap = corner ? 0 : POSITION_GAP\n\n // Side positions: flip to the other side, or fall back to a vertical\n // position when the content doesn't fit horizontally on either side.\n if (main === 'left' || main === 'right') {\n const needed = content.width + gap\n if (needed > spaceLeft && needed > spaceRight) {\n main = spaceBottom >= spaceTop ? 'bottom' : 'top'\n } else if (main === 'right' && needed > spaceRight) {\n main = 'left'\n } else if (main === 'left' && needed > spaceLeft) {\n main = 'right'\n }\n }\n\n // Vertical positions: flip when the content doesn't fit and there is more room on the other side.\n if (main === 'top' || main === 'bottom') {\n const space = main === 'top' ? spaceTop : spaceBottom\n const opposite = main === 'top' ? spaceBottom : spaceTop\n if (content.height + gap > space && opposite > space) {\n main = main === 'top' ? 'bottom' : 'top'\n }\n }\n\n // A corner's cut-off edge has to meet the anchor, and sliding breaks that\n // join — so mirror to the other side first and only slide as a last resort.\n if (corner) {\n const space = corner === 'left' ? spaceLeft : spaceRight\n const opposite = corner === 'left' ? spaceRight : spaceLeft\n if (content.width > space && opposite > space) {\n corner = corner === 'left' ? 'right' : 'left'\n }\n }\n\n let shiftX = 0\n let shiftY = 0\n if (main === 'left' || main === 'right') {\n const idealTop = anchor.top + anchor.height / 2 - content.height / 2\n shiftY =\n clampValue(\n idealTop,\n VIEWPORT_MARGIN,\n viewportHeight - VIEWPORT_MARGIN - content.height,\n ) - idealTop\n } else {\n const idealLeft = !corner\n ? anchor.left + anchor.width / 2 - content.width / 2\n : corner === 'left'\n ? anchor.left - content.width\n : anchor.right\n shiftX =\n clampValue(\n idealLeft,\n VIEWPORT_MARGIN,\n viewportWidth - VIEWPORT_MARGIN - content.width,\n ) - idealLeft\n }\n\n return {\n position: (corner ? `${main}-${corner}` : main) as TooltipPosition,\n shiftX,\n shiftY,\n }\n}\n\nexport const Tooltip = ({\n content,\n position = 'top',\n width = 320,\n className,\n children,\n onMouseEnter,\n onFocus,\n ...rest\n}: TooltipProps) => {\n const rootRef = useRef<HTMLSpanElement>(null)\n const contentRef = useRef<HTMLSpanElement>(null)\n const [adjustment, setAdjustment] = useState<TooltipAdjustment | null>(null)\n\n const updatePosition = useCallback(() => {\n const root = rootRef.current\n const contentEl = contentRef.current\n if (!root || !contentEl) return\n\n // React treats mouseenter as a continuous-priority event and would defer\n // the update past the next paint, flashing the tooltip at the old position.\n flushSync(() => {\n setAdjustment(\n getAdjustment(\n position,\n root.getBoundingClientRect(),\n contentEl.getBoundingClientRect(),\n ),\n )\n })\n }, [position])\n\n useEffect(() => {\n setAdjustment(null)\n }, [position])\n\n useEffect(() => {\n const handleResize = () => {\n if (rootRef.current?.matches(':hover')) updatePosition()\n }\n\n window.addEventListener('resize', handleResize)\n return () => window.removeEventListener('resize', handleResize)\n }, [updatePosition])\n\n const handleMouseEnter = (event: MouseEvent<HTMLSpanElement>) => {\n updatePosition()\n onMouseEnter?.(event)\n }\n\n const handleFocus = (event: FocusEvent<HTMLSpanElement>) => {\n updatePosition()\n onFocus?.(event)\n }\n\n const effectivePosition = adjustment?.position ?? position\n\n return (\n <span\n ref={rootRef}\n className={cn(styles.wrapper, className)}\n onMouseEnter={handleMouseEnter}\n onFocus={handleFocus}\n {...rest}\n >\n {children}\n <span\n ref={contentRef}\n className={cn(styles.content, styles[`position-${effectivePosition}`])}\n style={\n {\n '--local-tooltip-width': getMaxWidth(width),\n '--local-tooltip-shift-x': `${adjustment?.shiftX ?? 0}px`,\n '--local-tooltip-shift-y': `${adjustment?.shiftY ?? 0}px`,\n } as CSSProperties\n }\n role='tooltip'\n >\n {content}\n </span>\n </span>\n )\n}\n\nTooltip.displayName = 'Tooltip'\n"],"names":["VIEWPORT_MARGIN","POSITION_GAP","clampValue","value","min","max","Math","getMaxWidth","width","getAdjustment","position","anchor","content","viewportWidth","document","documentElement","clientWidth","viewportHeight","clientHeight","spaceTop","top","spaceBottom","bottom","spaceLeft","left","spaceRight","right","main","corner","split","gap","needed","space","opposite","height","shiftX","shiftY","idealTop","idealLeft","Tooltip","_ref","className","children","onMouseEnter","onFocus","rest","rootRef","useRef","contentRef","adjustment","setAdjustment","useState","updatePosition","useCallback","root","current","contentEl","flushSync","getBoundingClientRect","useEffect","handleResize","matches","window","addEventListener","removeEventListener","handleMouseEnter","event","handleFocus","effectivePosition","_jsxs","ref","cn","styles","wrapper","_jsx","style","role","displayName"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Tooltip.mjs","sources":["../../../src/tooltip/Tooltip.tsx"],"sourcesContent":["import {\n useCallback,\n useEffect,\n useRef,\n useState,\n type ComponentPropsWithoutRef,\n type CSSProperties,\n type FocusEvent,\n type MouseEvent,\n type ReactNode,\n} from 'react'\nimport { flushSync } from 'react-dom'\n\nimport cn from 'classnames'\n\nimport styles from './Tooltip.module.css'\n\nexport type TooltipPosition =\n | 'top'\n | 'right'\n | 'bottom'\n | 'left'\n | 'top-left'\n | 'top-right'\n | 'bottom-left'\n | 'bottom-right'\n\nexport type TooltipDataTestId = {\n root?: string\n content?: string\n}\n\nexport type TooltipProps = Omit<ComponentPropsWithoutRef<'span'>, 'content'> & {\n content: ReactNode\n position?: TooltipPosition\n width?: number\n dataTestId?: TooltipDataTestId\n}\n\n// Minimal distance between the tooltip and the viewport edge.\nconst VIEWPORT_MARGIN = 16\n// Distance between the anchor and the content for main (non-corner) positions.\nconst POSITION_GAP = 15\n\ntype TooltipAdjustment = {\n position: TooltipPosition\n shiftX: number\n shiftY: number\n}\n\nconst clampValue = (value: number, min: number, max: number) =>\n Math.min(Math.max(value, min), Math.max(max, min))\n\nconst getMaxWidth = (width: number) =>\n `min(${width}px, calc(100vw - ${VIEWPORT_MARGIN * 2}px))`\n\n// Measures the anchor and the (hidden but laid-out) content, then picks a\n// position/shift that keeps the bubble inside the viewport — flipping sides\n// when there isn't room, sliding along the cross axis otherwise.\nconst getAdjustment = (\n position: TooltipPosition,\n anchor: DOMRect,\n content: DOMRect,\n): TooltipAdjustment => {\n const viewportWidth = document.documentElement.clientWidth\n const viewportHeight = document.documentElement.clientHeight\n\n const spaceTop = anchor.top - VIEWPORT_MARGIN\n const spaceBottom = viewportHeight - anchor.bottom - VIEWPORT_MARGIN\n const spaceLeft = anchor.left - VIEWPORT_MARGIN\n const spaceRight = viewportWidth - anchor.right - VIEWPORT_MARGIN\n\n let [main, corner] = position.split('-')\n const gap = corner ? 0 : POSITION_GAP\n\n // Side positions: flip to the other side, or fall back to a vertical\n // position when the content doesn't fit horizontally on either side.\n if (main === 'left' || main === 'right') {\n const needed = content.width + gap\n if (needed > spaceLeft && needed > spaceRight) {\n main = spaceBottom >= spaceTop ? 'bottom' : 'top'\n } else if (main === 'right' && needed > spaceRight) {\n main = 'left'\n } else if (main === 'left' && needed > spaceLeft) {\n main = 'right'\n }\n }\n\n // Vertical positions: flip when the content doesn't fit and there is more room on the other side.\n if (main === 'top' || main === 'bottom') {\n const space = main === 'top' ? spaceTop : spaceBottom\n const opposite = main === 'top' ? spaceBottom : spaceTop\n if (content.height + gap > space && opposite > space) {\n main = main === 'top' ? 'bottom' : 'top'\n }\n }\n\n // A corner's cut-off edge has to meet the anchor, and sliding breaks that\n // join — so mirror to the other side first and only slide as a last resort.\n if (corner) {\n const space = corner === 'left' ? spaceLeft : spaceRight\n const opposite = corner === 'left' ? spaceRight : spaceLeft\n if (content.width > space && opposite > space) {\n corner = corner === 'left' ? 'right' : 'left'\n }\n }\n\n let shiftX = 0\n let shiftY = 0\n if (main === 'left' || main === 'right') {\n const idealTop = anchor.top + anchor.height / 2 - content.height / 2\n shiftY =\n clampValue(\n idealTop,\n VIEWPORT_MARGIN,\n viewportHeight - VIEWPORT_MARGIN - content.height,\n ) - idealTop\n } else {\n const idealLeft = !corner\n ? anchor.left + anchor.width / 2 - content.width / 2\n : corner === 'left'\n ? anchor.left - content.width\n : anchor.right\n shiftX =\n clampValue(\n idealLeft,\n VIEWPORT_MARGIN,\n viewportWidth - VIEWPORT_MARGIN - content.width,\n ) - idealLeft\n }\n\n return {\n position: (corner ? `${main}-${corner}` : main) as TooltipPosition,\n shiftX,\n shiftY,\n }\n}\n\nexport const Tooltip = ({\n content,\n position = 'top',\n width = 320,\n className,\n children,\n onMouseEnter,\n onFocus,\n dataTestId,\n ...rest\n}: TooltipProps) => {\n const rootRef = useRef<HTMLSpanElement>(null)\n const contentRef = useRef<HTMLSpanElement>(null)\n const [adjustment, setAdjustment] = useState<TooltipAdjustment | null>(null)\n\n const updatePosition = useCallback(() => {\n const root = rootRef.current\n const contentEl = contentRef.current\n if (!root || !contentEl) return\n\n // React treats mouseenter as a continuous-priority event and would defer\n // the update past the next paint, flashing the tooltip at the old position.\n flushSync(() => {\n setAdjustment(\n getAdjustment(\n position,\n root.getBoundingClientRect(),\n contentEl.getBoundingClientRect(),\n ),\n )\n })\n }, [position])\n\n useEffect(() => {\n setAdjustment(null)\n }, [position])\n\n useEffect(() => {\n const handleResize = () => {\n if (rootRef.current?.matches(':hover')) updatePosition()\n }\n\n window.addEventListener('resize', handleResize)\n return () => window.removeEventListener('resize', handleResize)\n }, [updatePosition])\n\n const handleMouseEnter = (event: MouseEvent<HTMLSpanElement>) => {\n updatePosition()\n onMouseEnter?.(event)\n }\n\n const handleFocus = (event: FocusEvent<HTMLSpanElement>) => {\n updatePosition()\n onFocus?.(event)\n }\n\n const effectivePosition = adjustment?.position ?? position\n\n return (\n <span\n ref={rootRef}\n className={cn(styles.wrapper, className)}\n onMouseEnter={handleMouseEnter}\n onFocus={handleFocus}\n data-testid={dataTestId?.root}\n {...rest}\n >\n {children}\n <span\n ref={contentRef}\n className={cn(styles.content, styles[`position-${effectivePosition}`])}\n style={\n {\n '--local-tooltip-width': getMaxWidth(width),\n '--local-tooltip-shift-x': `${adjustment?.shiftX ?? 0}px`,\n '--local-tooltip-shift-y': `${adjustment?.shiftY ?? 0}px`,\n } as CSSProperties\n }\n role='tooltip'\n data-testid={dataTestId?.content}\n >\n {content}\n </span>\n </span>\n )\n}\n\nTooltip.displayName = 'Tooltip'\n"],"names":["VIEWPORT_MARGIN","POSITION_GAP","clampValue","value","min","max","Math","getMaxWidth","width","getAdjustment","position","anchor","content","viewportWidth","document","documentElement","clientWidth","viewportHeight","clientHeight","spaceTop","top","spaceBottom","bottom","spaceLeft","left","spaceRight","right","main","corner","split","gap","needed","space","opposite","height","shiftX","shiftY","idealTop","idealLeft","Tooltip","_ref","className","children","onMouseEnter","onFocus","dataTestId","rest","rootRef","useRef","contentRef","adjustment","setAdjustment","useState","updatePosition","useCallback","root","current","contentEl","flushSync","getBoundingClientRect","useEffect","handleResize","matches","window","addEventListener","removeEventListener","handleMouseEnter","event","handleFocus","effectivePosition","_jsxs","ref","cn","styles","wrapper","_jsx","style","role","displayName"],"mappings":"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"}
|
|
@@ -36,10 +36,14 @@ const TxStatus = _ref => {
|
|
|
36
36
|
amount,
|
|
37
37
|
message,
|
|
38
38
|
footer,
|
|
39
|
-
className
|
|
39
|
+
className,
|
|
40
|
+
dataTestId,
|
|
41
|
+
...rest
|
|
40
42
|
} = _ref;
|
|
41
43
|
return /*#__PURE__*/jsxs("div", {
|
|
42
44
|
className: cn(styles.root, className),
|
|
45
|
+
"data-testid": dataTestId?.root,
|
|
46
|
+
...rest,
|
|
43
47
|
children: [/*#__PURE__*/jsxs("div", {
|
|
44
48
|
className: styles.graphicGroup,
|
|
45
49
|
children: [/*#__PURE__*/jsx("span", {
|
|
@@ -49,17 +53,21 @@ const TxStatus = _ref => {
|
|
|
49
53
|
className: styles.textGroup,
|
|
50
54
|
children: [/*#__PURE__*/jsx("span", {
|
|
51
55
|
className: styles.title,
|
|
56
|
+
"data-testid": dataTestId?.title,
|
|
52
57
|
children: title
|
|
53
58
|
}), amount ? /*#__PURE__*/jsx("div", {
|
|
54
59
|
className: styles.amount,
|
|
60
|
+
"data-testid": dataTestId?.amount,
|
|
55
61
|
children: amount
|
|
56
62
|
}) : null, message ? /*#__PURE__*/jsx("div", {
|
|
57
63
|
className: styles.message,
|
|
64
|
+
"data-testid": dataTestId?.message,
|
|
58
65
|
children: message
|
|
59
66
|
}) : null]
|
|
60
67
|
})]
|
|
61
68
|
}), footer ? /*#__PURE__*/jsx("div", {
|
|
62
69
|
className: styles.footer,
|
|
70
|
+
"data-testid": dataTestId?.footer,
|
|
63
71
|
children: footer
|
|
64
72
|
}) : null]
|
|
65
73
|
});
|