@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":"MessageBox.cjs","sources":["../../../src/message-box/MessageBox.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react'\n\nimport { IconCheck, IconInfo, IconShield, IconWarning } from '../icons'\nimport cn from 'classnames'\n\nimport styles from './MessageBox.module.css'\n\nexport type MessageBoxVariant =\n | 'default'\n | 'info'\n | 'warning'\n | 'error'\n | 'success'\n\nconst variantIcons = {\n default: IconInfo,\n info: IconShield,\n warning: IconWarning,\n error: IconWarning,\n success: IconCheck,\n}\n\nexport type MessageBoxProps = HTMLAttributes<HTMLDivElement> & {\n variant?: MessageBoxVariant\n icon?: boolean\n headline?: ReactNode\n}\n\nexport const MessageBox = ({\n variant = 'default',\n icon = true,\n headline,\n className,\n children,\n ...rest\n}: MessageBoxProps) => {\n const Icon = variantIcons[variant]\n\n return (\n <div
|
|
1
|
+
{"version":3,"file":"MessageBox.cjs","sources":["../../../src/message-box/MessageBox.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react'\n\nimport { IconCheck, IconInfo, IconShield, IconWarning } from '../icons'\nimport cn from 'classnames'\n\nimport styles from './MessageBox.module.css'\n\nexport type MessageBoxVariant =\n | 'default'\n | 'info'\n | 'warning'\n | 'error'\n | 'success'\n\nconst variantIcons = {\n default: IconInfo,\n info: IconShield,\n warning: IconWarning,\n error: IconWarning,\n success: IconCheck,\n}\n\nexport type MessageBoxDataTestId = {\n root?: string\n icon?: string\n headline?: string\n description?: string\n}\n\nexport type MessageBoxProps = HTMLAttributes<HTMLDivElement> & {\n variant?: MessageBoxVariant\n icon?: boolean\n headline?: ReactNode\n dataTestId?: MessageBoxDataTestId\n}\n\nexport const MessageBox = ({\n variant = 'default',\n icon = true,\n headline,\n className,\n children,\n dataTestId,\n ...rest\n}: MessageBoxProps) => {\n const Icon = variantIcons[variant]\n\n return (\n <div\n className={cn(styles.box, styles[variant], className)}\n data-testid={dataTestId?.root}\n {...rest}\n >\n {icon ? (\n <span\n className={styles.icon}\n aria-hidden='true'\n data-testid={dataTestId?.icon}\n >\n <Icon />\n </span>\n ) : null}\n <div className={styles.text}>\n {headline != null ? (\n <div className={styles.headline} data-testid={dataTestId?.headline}>\n {headline}\n </div>\n ) : null}\n <div\n className={styles.description}\n data-testid={dataTestId?.description}\n >\n {children}\n </div>\n </div>\n </div>\n )\n}\n"],"names":["variantIcons","default","IconInfo","info","IconShield","warning","IconWarning","error","success","IconCheck","MessageBox","_ref","variant","icon","headline","className","children","dataTestId","rest","Icon","_jsxs","cn","styles","box","root","_jsx","text","description"],"mappings":";;;;;;;;;;;;AAcA,MAAMA,YAAY,GAAG;AACnBC,EAAAA,OAAO,EAAEC,iBAAQ;AACjBC,EAAAA,IAAI,EAAEC,qBAAU;AAChBC,EAAAA,OAAO,EAAEC,uBAAW;AACpBC,EAAAA,KAAK,EAAED,uBAAW;AAClBE,EAAAA,OAAO,EAAEC,mBAAAA;AACX,CAAC,CAAA;AAgBYC,MAAAA,UAAU,GAAGC,IAAA,IAQH;EAAA,IARI;AACzBC,IAAAA,OAAO,GAAG,SAAS;AACnBC,IAAAA,IAAI,GAAG,IAAI;IACXC,QAAQ;IACRC,SAAS;IACTC,QAAQ;IACRC,UAAU;IACV,GAAGC,IAAAA;AACY,GAAC,GAAAP,IAAA,CAAA;AAChB,EAAA,MAAMQ,IAAI,GAAGnB,YAAY,CAACY,OAAO,CAAC,CAAA;AAElC,EAAA,oBACEQ,eAAA,CAAA,KAAA,EAAA;AACEL,IAAAA,SAAS,EAAEM,EAAE,CAACC,iBAAM,CAACC,GAAG,EAAED,iBAAM,CAACV,OAAO,CAAC,EAAEG,SAAS,CAAE;IACtD,aAAaE,EAAAA,UAAU,EAAEO,IAAK;AAAA,IAAA,GAC1BN,IAAI;IAAAF,QAAA,EAAA,CAEPH,IAAI,gBACHY,cAAA,CAAA,MAAA,EAAA;MACEV,SAAS,EAAEO,iBAAM,CAACT,IAAK;AACvB,MAAA,aAAA,EAAY,MAAM;MAClB,aAAaI,EAAAA,UAAU,EAAEJ,IAAK;AAAAG,MAAAA,QAAA,eAE9BS,cAAA,CAACN,IAAI,EAAE,EAAA,CAAA;AAAC,KACJ,CAAC,GACL,IAAI,eACRC,eAAA,CAAA,KAAA,EAAA;MAAKL,SAAS,EAAEO,iBAAM,CAACI,IAAK;AAAAV,MAAAA,QAAA,EACzBF,CAAAA,QAAQ,IAAI,IAAI,gBACfW,cAAA,CAAA,KAAA,EAAA;QAAKV,SAAS,EAAEO,iBAAM,CAACR,QAAS;QAAC,aAAaG,EAAAA,UAAU,EAAEH,QAAS;AAAAE,QAAAA,QAAA,EAChEF,QAAAA;AAAQ,OACN,CAAC,GACJ,IAAI,eACRW,cAAA,CAAA,KAAA,EAAA;QACEV,SAAS,EAAEO,iBAAM,CAACK,WAAY;QAC9B,aAAaV,EAAAA,UAAU,EAAEU,WAAY;AAAAX,QAAAA,QAAA,EAEpCA,QAAAA;AAAQ,OACN,CAAC,CAAA;AAAA,KACH,CAAC,CAAA;AAAA,GACH,CAAC,CAAA;AAEV;;;;"}
|
package/dist/cjs/modal/Modal.cjs
CHANGED
|
@@ -32,7 +32,9 @@ const Modal = _ref => {
|
|
|
32
32
|
withOverlay = false,
|
|
33
33
|
bodyFill = false,
|
|
34
34
|
children,
|
|
35
|
-
className
|
|
35
|
+
className,
|
|
36
|
+
dataTestId,
|
|
37
|
+
...rest
|
|
36
38
|
} = _ref;
|
|
37
39
|
const titleId = react.useId();
|
|
38
40
|
const backdropMouseDown = react.useRef(false);
|
|
@@ -54,6 +56,8 @@ const Modal = _ref => {
|
|
|
54
56
|
role: "dialog",
|
|
55
57
|
"aria-modal": withOverlay || undefined,
|
|
56
58
|
"aria-labelledby": title ? titleId : undefined,
|
|
59
|
+
"data-testid": dataTestId?.root,
|
|
60
|
+
...rest,
|
|
57
61
|
children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
58
62
|
className: Modal_module.headerGroup,
|
|
59
63
|
children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
@@ -61,19 +65,25 @@ const Modal = _ref => {
|
|
|
61
65
|
children: [/*#__PURE__*/jsxRuntime.jsx("span", {
|
|
62
66
|
id: titleId,
|
|
63
67
|
className: cn(Modal_module.title, !title && Modal_module.titleHidden),
|
|
68
|
+
"data-testid": dataTestId?.title,
|
|
64
69
|
children: title
|
|
65
70
|
}), onClose ? /*#__PURE__*/jsxRuntime.jsx(IconButton.IconButton, {
|
|
66
71
|
variant: "outline",
|
|
67
72
|
"aria-label": "Close",
|
|
68
73
|
icon: /*#__PURE__*/jsxRuntime.jsx(IconCross.IconCross, {}),
|
|
69
|
-
onClick: onClose
|
|
74
|
+
onClick: onClose,
|
|
75
|
+
dataTestId: {
|
|
76
|
+
root: dataTestId?.closeButton
|
|
77
|
+
}
|
|
70
78
|
}) : null]
|
|
71
79
|
}), subtitle != null ? /*#__PURE__*/jsxRuntime.jsx("p", {
|
|
72
80
|
className: Modal_module.subtitle,
|
|
81
|
+
"data-testid": dataTestId?.subtitle,
|
|
73
82
|
children: subtitle
|
|
74
83
|
}) : null]
|
|
75
84
|
}), /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
76
85
|
className: Modal_module.body,
|
|
86
|
+
"data-testid": dataTestId?.body,
|
|
77
87
|
children: children
|
|
78
88
|
})]
|
|
79
89
|
});
|
|
@@ -88,6 +98,7 @@ const Modal = _ref => {
|
|
|
88
98
|
className: Modal_module.overlay,
|
|
89
99
|
onMouseDown: handleOverlayMouseDown,
|
|
90
100
|
onClick: handleOverlayClick,
|
|
101
|
+
"data-testid": dataTestId?.overlay,
|
|
91
102
|
children: card
|
|
92
103
|
})
|
|
93
104
|
);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.cjs","sources":["../../../src/modal/Modal.tsx"],"sourcesContent":["import {\n useEffect,\n useId,\n useRef,\n type MouseEvent,\n type ReactNode,\n} from 'react'\n\nimport { IconButton } from '../icon-button'\nimport { IconCross } from '../icons'\nimport cn from 'classnames'\n\nimport styles from './Modal.module.css'\n\n// Ref-counted so stacked overlays (e.g. connect modal + an action modal) lock on\n// the first and only restore on the last, regardless of close order.\nlet scrollLockCount = 0\nlet restoreOverflow = ''\n\nconst lockBodyScroll = () => {\n if (scrollLockCount === 0) {\n restoreOverflow = document.body.style.overflow\n document.body.style.overflow = 'hidden'\n }\n scrollLockCount += 1\n}\n\nconst unlockBodyScroll = () => {\n scrollLockCount = Math.max(0, scrollLockCount - 1)\n if (scrollLockCount === 0) {\n document.body.style.overflow = restoreOverflow\n }\n}\n\nexport type ModalProps = {\n title?: ReactNode\n subtitle?: ReactNode\n onClose?: () => void\n withOverlay?: boolean\n bodyFill?: boolean\n children: ReactNode\n
|
|
1
|
+
{"version":3,"file":"Modal.cjs","sources":["../../../src/modal/Modal.tsx"],"sourcesContent":["import {\n useEffect,\n useId,\n useRef,\n type ComponentPropsWithoutRef,\n type MouseEvent,\n type ReactNode,\n} from 'react'\n\nimport { IconButton } from '../icon-button'\nimport { IconCross } from '../icons'\nimport cn from 'classnames'\n\nimport styles from './Modal.module.css'\n\n// Ref-counted so stacked overlays (e.g. connect modal + an action modal) lock on\n// the first and only restore on the last, regardless of close order.\nlet scrollLockCount = 0\nlet restoreOverflow = ''\n\nconst lockBodyScroll = () => {\n if (scrollLockCount === 0) {\n restoreOverflow = document.body.style.overflow\n document.body.style.overflow = 'hidden'\n }\n scrollLockCount += 1\n}\n\nconst unlockBodyScroll = () => {\n scrollLockCount = Math.max(0, scrollLockCount - 1)\n if (scrollLockCount === 0) {\n document.body.style.overflow = restoreOverflow\n }\n}\n\nexport type ModalDataTestId = {\n root?: string\n title?: string\n subtitle?: string\n closeButton?: string\n body?: string\n overlay?: string\n}\n\nexport type ModalProps = Omit<\n ComponentPropsWithoutRef<'div'>,\n 'title' | 'children'\n> & {\n title?: ReactNode\n subtitle?: ReactNode\n onClose?: () => void\n withOverlay?: boolean\n bodyFill?: boolean\n children: ReactNode\n dataTestId?: ModalDataTestId\n}\n\nexport const Modal = ({\n title,\n subtitle,\n onClose,\n withOverlay = false,\n bodyFill = false,\n children,\n className,\n dataTestId,\n ...rest\n}: ModalProps) => {\n const titleId = useId()\n const backdropMouseDown = useRef(false)\n\n useEffect(() => {\n if (!withOverlay) return\n lockBodyScroll()\n return unlockBodyScroll\n }, [withOverlay])\n\n const handleOverlayMouseDown = (event: MouseEvent<HTMLDivElement>) => {\n backdropMouseDown.current = event.target === event.currentTarget\n }\n\n const handleOverlayClick = (event: MouseEvent<HTMLDivElement>) => {\n if (event.target !== event.currentTarget) return\n if (!backdropMouseDown.current) return\n onClose?.()\n }\n\n const card = (\n <div\n className={cn(styles.card, bodyFill && styles.cardBodyFill, className)}\n role='dialog'\n aria-modal={withOverlay || undefined}\n aria-labelledby={title ? titleId : undefined}\n data-testid={dataTestId?.root}\n {...rest}\n >\n <div className={styles.headerGroup}>\n <div className={styles.header}>\n <span\n id={titleId}\n className={cn(styles.title, !title && styles.titleHidden)}\n data-testid={dataTestId?.title}\n >\n {title}\n </span>\n {onClose ? (\n <IconButton\n variant='outline'\n aria-label='Close'\n icon={<IconCross />}\n onClick={onClose}\n dataTestId={{ root: dataTestId?.closeButton }}\n />\n ) : null}\n </div>\n {subtitle != null ? (\n <p className={styles.subtitle} data-testid={dataTestId?.subtitle}>\n {subtitle}\n </p>\n ) : null}\n </div>\n <div className={styles.body} data-testid={dataTestId?.body}>\n {children}\n </div>\n </div>\n )\n\n if (!withOverlay) return card\n\n return (\n // The backdrop is a pointer-only affordance — making it focusable would put\n // a stop in the tab order before the dialog. Keyboard users close via the\n // close button.\n // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions\n <div\n className={styles.overlay}\n onMouseDown={handleOverlayMouseDown}\n onClick={handleOverlayClick}\n data-testid={dataTestId?.overlay}\n >\n {card}\n </div>\n )\n}\n"],"names":["scrollLockCount","restoreOverflow","lockBodyScroll","document","body","style","overflow","unlockBodyScroll","Math","max","Modal","_ref","title","subtitle","onClose","withOverlay","bodyFill","children","className","dataTestId","rest","titleId","useId","backdropMouseDown","useRef","useEffect","handleOverlayMouseDown","event","current","target","currentTarget","handleOverlayClick","card","_jsxs","cn","styles","cardBodyFill","role","undefined","root","headerGroup","header","_jsx","id","titleHidden","IconButton","variant","icon","IconCross","onClick","closeButton","overlay","onMouseDown"],"mappings":";;;;;;;;;;;AAiBA,IAAIA,eAAe,GAAG,CAAC,CAAA;AACvB,IAAIC,eAAe,GAAG,EAAE,CAAA;AAExB,MAAMC,cAAc,GAAGA,MAAM;EAC3B,IAAIF,eAAe,KAAK,CAAC,EAAE;AACzBC,IAAAA,eAAe,GAAGE,QAAQ,CAACC,IAAI,CAACC,KAAK,CAACC,QAAQ,CAAA;AAC9CH,IAAAA,QAAQ,CAACC,IAAI,CAACC,KAAK,CAACC,QAAQ,GAAG,QAAQ,CAAA;AACzC,GAAA;AACAN,EAAAA,eAAe,IAAI,CAAC,CAAA;AACtB,CAAC,CAAA;AAED,MAAMO,gBAAgB,GAAGA,MAAM;EAC7BP,eAAe,GAAGQ,IAAI,CAACC,GAAG,CAAC,CAAC,EAAET,eAAe,GAAG,CAAC,CAAC,CAAA;EAClD,IAAIA,eAAe,KAAK,CAAC,EAAE;AACzBG,IAAAA,QAAQ,CAACC,IAAI,CAACC,KAAK,CAACC,QAAQ,GAAGL,eAAe,CAAA;AAChD,GAAA;AACF,CAAC,CAAA;AAwBYS,MAAAA,KAAK,GAAGC,IAAA,IAUH;EAAA,IAVI;IACpBC,KAAK;IACLC,QAAQ;IACRC,OAAO;AACPC,IAAAA,WAAW,GAAG,KAAK;AACnBC,IAAAA,QAAQ,GAAG,KAAK;IAChBC,QAAQ;IACRC,SAAS;IACTC,UAAU;IACV,GAAGC,IAAAA;AACO,GAAC,GAAAT,IAAA,CAAA;AACX,EAAA,MAAMU,OAAO,GAAGC,WAAK,EAAE,CAAA;AACvB,EAAA,MAAMC,iBAAiB,GAAGC,YAAM,CAAC,KAAK,CAAC,CAAA;AAEvCC,EAAAA,eAAS,CAAC,MAAM;IACd,IAAI,CAACV,WAAW,EAAE,OAAA;AAClBb,IAAAA,cAAc,EAAE,CAAA;AAChB,IAAA,OAAOK,gBAAgB,CAAA;AACzB,GAAC,EAAE,CAACQ,WAAW,CAAC,CAAC,CAAA;EAEjB,MAAMW,sBAAsB,GAAIC,KAAiC,IAAK;IACpEJ,iBAAiB,CAACK,OAAO,GAAGD,KAAK,CAACE,MAAM,KAAKF,KAAK,CAACG,aAAa,CAAA;GACjE,CAAA;EAED,MAAMC,kBAAkB,GAAIJ,KAAiC,IAAK;AAChE,IAAA,IAAIA,KAAK,CAACE,MAAM,KAAKF,KAAK,CAACG,aAAa,EAAE,OAAA;AAC1C,IAAA,IAAI,CAACP,iBAAiB,CAACK,OAAO,EAAE,OAAA;AAChCd,IAAAA,OAAO,IAAI,CAAA;GACZ,CAAA;EAED,MAAMkB,IAAI,gBACRC,eAAA,CAAA,KAAA,EAAA;AACEf,IAAAA,SAAS,EAAEgB,EAAE,CAACC,YAAM,CAACH,IAAI,EAAEhB,QAAQ,IAAImB,YAAM,CAACC,YAAY,EAAElB,SAAS,CAAE;AACvEmB,IAAAA,IAAI,EAAC,QAAQ;IACb,YAAYtB,EAAAA,WAAW,IAAIuB,SAAU;AACrC,IAAA,iBAAA,EAAiB1B,KAAK,GAAGS,OAAO,GAAGiB,SAAU;IAC7C,aAAanB,EAAAA,UAAU,EAAEoB,IAAK;AAAA,IAAA,GAC1BnB,IAAI;AAAAH,IAAAA,QAAA,gBAERgB,eAAA,CAAA,KAAA,EAAA;MAAKf,SAAS,EAAEiB,YAAM,CAACK,WAAY;AAAAvB,MAAAA,QAAA,gBACjCgB,eAAA,CAAA,KAAA,EAAA;QAAKf,SAAS,EAAEiB,YAAM,CAACM,MAAO;AAAAxB,QAAAA,QAAA,gBAC5ByB,cAAA,CAAA,MAAA,EAAA;AACEC,UAAAA,EAAE,EAAEtB,OAAQ;AACZH,UAAAA,SAAS,EAAEgB,EAAE,CAACC,YAAM,CAACvB,KAAK,EAAE,CAACA,KAAK,IAAIuB,YAAM,CAACS,WAAW,CAAE;UAC1D,aAAazB,EAAAA,UAAU,EAAEP,KAAM;AAAAK,UAAAA,QAAA,EAE9BL,KAAAA;AAAK,SACF,CAAC,EACNE,OAAO,gBACN4B,cAAA,CAACG,qBAAU,EAAA;AACTC,UAAAA,OAAO,EAAC,SAAS;AACjB,UAAA,YAAA,EAAW,OAAO;AAClBC,UAAAA,IAAI,eAAEL,cAAA,CAACM,mBAAS,IAAE,CAAE;AACpBC,UAAAA,OAAO,EAAEnC,OAAQ;AACjBK,UAAAA,UAAU,EAAE;YAAEoB,IAAI,EAAEpB,UAAU,EAAE+B,WAAAA;AAAY,WAAA;SAC7C,CAAC,GACA,IAAI,CAAA;AAAA,OACL,CAAC,EACLrC,QAAQ,IAAI,IAAI,gBACf6B,cAAA,CAAA,GAAA,EAAA;QAAGxB,SAAS,EAAEiB,YAAM,CAACtB,QAAS;QAAC,aAAaM,EAAAA,UAAU,EAAEN,QAAS;AAAAI,QAAAA,QAAA,EAC9DJ,QAAAA;OACA,CAAC,GACF,IAAI,CAAA;KACL,CAAC,eACN6B,cAAA,CAAA,KAAA,EAAA;MAAKxB,SAAS,EAAEiB,YAAM,CAAC/B,IAAK;MAAC,aAAae,EAAAA,UAAU,EAAEf,IAAK;AAAAa,MAAAA,QAAA,EACxDA,QAAAA;AAAQ,KACN,CAAC,CAAA;AAAA,GACH,CACN,CAAA;AAED,EAAA,IAAI,CAACF,WAAW,EAAE,OAAOiB,IAAI,CAAA;AAE7B,EAAA;AAAA;AACE;AACA;AACA;AACA;IACAU,cAAA,CAAA,KAAA,EAAA;MACExB,SAAS,EAAEiB,YAAM,CAACgB,OAAQ;AAC1BC,MAAAA,WAAW,EAAE1B,sBAAuB;AACpCuB,MAAAA,OAAO,EAAElB,kBAAmB;MAC5B,aAAaZ,EAAAA,UAAU,EAAEgC,OAAQ;AAAAlC,MAAAA,QAAA,EAEhCe,IAAAA;KACE,CAAA;AAAC,IAAA;AAEV;;;;"}
|
|
@@ -11,22 +11,29 @@ const Notification = _ref => {
|
|
|
11
11
|
title,
|
|
12
12
|
children,
|
|
13
13
|
actions,
|
|
14
|
-
className
|
|
14
|
+
className,
|
|
15
|
+
dataTestId,
|
|
16
|
+
...rest
|
|
15
17
|
} = _ref;
|
|
16
18
|
return /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
17
19
|
className: cn(Notification_module.notification, className),
|
|
18
20
|
role: "alert",
|
|
21
|
+
"data-testid": dataTestId?.root,
|
|
22
|
+
...rest,
|
|
19
23
|
children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
20
24
|
className: Notification_module.content,
|
|
21
25
|
children: [/*#__PURE__*/jsxRuntime.jsx("p", {
|
|
22
26
|
className: Notification_module.title,
|
|
27
|
+
"data-testid": dataTestId?.title,
|
|
23
28
|
children: title
|
|
24
29
|
}), children != null ? /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
25
30
|
className: Notification_module.body,
|
|
31
|
+
"data-testid": dataTestId?.body,
|
|
26
32
|
children: children
|
|
27
33
|
}) : null]
|
|
28
34
|
}), actions != null ? /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
29
35
|
className: Notification_module.actions,
|
|
36
|
+
"data-testid": dataTestId?.actions,
|
|
30
37
|
children: actions
|
|
31
38
|
}) : null]
|
|
32
39
|
});
|
|
@@ -36,11 +43,13 @@ const NotificationButton = _ref2 => {
|
|
|
36
43
|
variant = 'primary',
|
|
37
44
|
className,
|
|
38
45
|
type = 'button',
|
|
46
|
+
dataTestId,
|
|
39
47
|
...rest
|
|
40
48
|
} = _ref2;
|
|
41
49
|
return /*#__PURE__*/jsxRuntime.jsx("button", {
|
|
42
50
|
type: type,
|
|
43
51
|
className: cn(Notification_module.button, Notification_module[variant], className),
|
|
52
|
+
"data-testid": dataTestId?.root,
|
|
44
53
|
...rest
|
|
45
54
|
});
|
|
46
55
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Notification.cjs","sources":["../../../src/notification/Notification.tsx"],"sourcesContent":["import type {
|
|
1
|
+
{"version":3,"file":"Notification.cjs","sources":["../../../src/notification/Notification.tsx"],"sourcesContent":["import type {\n ButtonHTMLAttributes,\n ComponentPropsWithoutRef,\n ReactNode,\n} from 'react'\n\nimport cn from 'classnames'\n\nimport styles from './Notification.module.css'\n\nexport type NotificationDataTestId = {\n root?: string\n title?: string\n body?: string\n actions?: string\n}\n\nexport type NotificationProps = Omit<\n ComponentPropsWithoutRef<'div'>,\n 'title'\n> & {\n title: ReactNode\n actions?: ReactNode\n dataTestId?: NotificationDataTestId\n}\n\nexport const Notification = ({\n title,\n children,\n actions,\n className,\n dataTestId,\n ...rest\n}: NotificationProps) => (\n <div\n className={cn(styles.notification, className)}\n role='alert'\n data-testid={dataTestId?.root}\n {...rest}\n >\n <div className={styles.content}>\n <p className={styles.title} data-testid={dataTestId?.title}>\n {title}\n </p>\n {children != null ? (\n <div className={styles.body} data-testid={dataTestId?.body}>\n {children}\n </div>\n ) : null}\n </div>\n {actions != null ? (\n <div className={styles.actions} data-testid={dataTestId?.actions}>\n {actions}\n </div>\n ) : null}\n </div>\n)\n\nexport type NotificationButtonVariant = 'primary' | 'secondary'\n\nexport type NotificationButtonDataTestId = {\n root?: string\n}\n\nexport type NotificationButtonProps =\n ButtonHTMLAttributes<HTMLButtonElement> & {\n variant?: NotificationButtonVariant\n dataTestId?: NotificationButtonDataTestId\n }\n\nexport const NotificationButton = ({\n variant = 'primary',\n className,\n type = 'button',\n dataTestId,\n ...rest\n}: NotificationButtonProps) => (\n <button\n type={type}\n className={cn(styles.button, styles[variant], className)}\n data-testid={dataTestId?.root}\n {...rest}\n />\n)\n"],"names":["Notification","_ref","title","children","actions","className","dataTestId","rest","_jsxs","cn","styles","notification","role","root","content","_jsx","body","NotificationButton","_ref2","variant","type","button"],"mappings":";;;;;;;;AA0BO,MAAMA,YAAY,GAAGC,IAAA,IAAA;EAAA,IAAC;IAC3BC,KAAK;IACLC,QAAQ;IACRC,OAAO;IACPC,SAAS;IACTC,UAAU;IACV,GAAGC,IAAAA;AACc,GAAC,GAAAN,IAAA,CAAA;AAAA,EAAA,oBAClBO,eAAA,CAAA,KAAA,EAAA;IACEH,SAAS,EAAEI,EAAE,CAACC,mBAAM,CAACC,YAAY,EAAEN,SAAS,CAAE;AAC9CO,IAAAA,IAAI,EAAC,OAAO;IACZ,aAAaN,EAAAA,UAAU,EAAEO,IAAK;AAAA,IAAA,GAC1BN,IAAI;AAAAJ,IAAAA,QAAA,gBAERK,eAAA,CAAA,KAAA,EAAA;MAAKH,SAAS,EAAEK,mBAAM,CAACI,OAAQ;AAAAX,MAAAA,QAAA,gBAC7BY,cAAA,CAAA,GAAA,EAAA;QAAGV,SAAS,EAAEK,mBAAM,CAACR,KAAM;QAAC,aAAaI,EAAAA,UAAU,EAAEJ,KAAM;AAAAC,QAAAA,QAAA,EACxDD,KAAAA;AAAK,OACL,CAAC,EACHC,QAAQ,IAAI,IAAI,gBACfY,cAAA,CAAA,KAAA,EAAA;QAAKV,SAAS,EAAEK,mBAAM,CAACM,IAAK;QAAC,aAAaV,EAAAA,UAAU,EAAEU,IAAK;AAAAb,QAAAA,QAAA,EACxDA,QAAAA;OACE,CAAC,GACJ,IAAI,CAAA;AAAA,KACL,CAAC,EACLC,OAAO,IAAI,IAAI,gBACdW,cAAA,CAAA,KAAA,EAAA;MAAKV,SAAS,EAAEK,mBAAM,CAACN,OAAQ;MAAC,aAAaE,EAAAA,UAAU,EAAEF,OAAQ;AAAAD,MAAAA,QAAA,EAC9DC,OAAAA;KACE,CAAC,GACJ,IAAI,CAAA;AAAA,GACL,CAAC,CAAA;AAAA,EACP;AAcM,MAAMa,kBAAkB,GAAGC,KAAA,IAAA;EAAA,IAAC;AACjCC,IAAAA,OAAO,GAAG,SAAS;IACnBd,SAAS;AACTe,IAAAA,IAAI,GAAG,QAAQ;IACfd,UAAU;IACV,GAAGC,IAAAA;AACoB,GAAC,GAAAW,KAAA,CAAA;AAAA,EAAA,oBACxBH,cAAA,CAAA,QAAA,EAAA;AACEK,IAAAA,IAAI,EAAEA,IAAK;AACXf,IAAAA,SAAS,EAAEI,EAAE,CAACC,mBAAM,CAACW,MAAM,EAAEX,mBAAM,CAACS,OAAO,CAAC,EAAEd,SAAS,CAAE;IACzD,aAAaC,EAAAA,UAAU,EAAEO,IAAK;IAAA,GAC1BN,IAAAA;AAAI,GACT,CAAC,CAAA;AAAA;;;;;"}
|
|
@@ -12,12 +12,14 @@ const RadioButton = /*#__PURE__*/react.forwardRef((_ref, ref) => {
|
|
|
12
12
|
label,
|
|
13
13
|
className,
|
|
14
14
|
disabled,
|
|
15
|
+
dataTestId,
|
|
15
16
|
...rest
|
|
16
17
|
} = _ref;
|
|
17
18
|
return /*#__PURE__*/jsxRuntime.jsxs("label", {
|
|
18
19
|
className: cn(RadioButton_module.container, className, {
|
|
19
20
|
[RadioButton_module.containerDisabled]: disabled
|
|
20
21
|
}),
|
|
22
|
+
"data-testid": dataTestId?.root,
|
|
21
23
|
children: [/*#__PURE__*/jsxRuntime.jsxs("span", {
|
|
22
24
|
className: RadioButton_module.control,
|
|
23
25
|
children: [/*#__PURE__*/jsxRuntime.jsx("input", {
|
|
@@ -25,6 +27,7 @@ const RadioButton = /*#__PURE__*/react.forwardRef((_ref, ref) => {
|
|
|
25
27
|
type: "radio",
|
|
26
28
|
className: RadioButton_module.input,
|
|
27
29
|
disabled: disabled,
|
|
30
|
+
"data-testid": dataTestId?.input,
|
|
28
31
|
...rest
|
|
29
32
|
}), /*#__PURE__*/jsxRuntime.jsx("span", {
|
|
30
33
|
className: RadioButton_module.dot
|
|
@@ -33,6 +36,7 @@ const RadioButton = /*#__PURE__*/react.forwardRef((_ref, ref) => {
|
|
|
33
36
|
className: cn(RadioButton_module.label, {
|
|
34
37
|
[RadioButton_module.labelDisabled]: disabled
|
|
35
38
|
}),
|
|
39
|
+
"data-testid": dataTestId?.label,
|
|
36
40
|
children: label
|
|
37
41
|
}) : null]
|
|
38
42
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioButton.cjs","sources":["../../../src/radio-button/RadioButton.tsx"],"sourcesContent":["import { forwardRef, type InputHTMLAttributes, type ReactNode } from 'react'\n\nimport cn from 'classnames'\n\nimport styles from './RadioButton.module.css'\n\nexport type RadioButtonProps = Omit<\n InputHTMLAttributes<HTMLInputElement>,\n 'type'\n> & {\n label?: ReactNode\n}\n\nexport const RadioButton = forwardRef<HTMLInputElement, RadioButtonProps>(\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='radio'\n className={styles.input}\n disabled={disabled}\n {...rest}\n />\n <span className={styles.dot} />\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\nRadioButton.displayName = 'RadioButton'\n"],"names":["RadioButton","forwardRef","_ref","ref","label","className","disabled","rest","_jsxs","cn","styles","container","containerDisabled","children","control","_jsx","type","input","dot","labelDisabled","displayName"],"mappings":";;;;;;;;;
|
|
1
|
+
{"version":3,"file":"RadioButton.cjs","sources":["../../../src/radio-button/RadioButton.tsx"],"sourcesContent":["import { forwardRef, type InputHTMLAttributes, type ReactNode } from 'react'\n\nimport cn from 'classnames'\n\nimport styles from './RadioButton.module.css'\n\nexport type RadioButtonDataTestId = {\n root?: string\n input?: string\n label?: string\n}\n\nexport type RadioButtonProps = Omit<\n InputHTMLAttributes<HTMLInputElement>,\n 'type'\n> & {\n label?: ReactNode\n dataTestId?: RadioButtonDataTestId\n}\n\nexport const RadioButton = forwardRef<HTMLInputElement, RadioButtonProps>(\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='radio'\n className={styles.input}\n disabled={disabled}\n data-testid={dataTestId?.input}\n {...rest}\n />\n <span className={styles.dot} />\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\nRadioButton.displayName = 'RadioButton'\n"],"names":["RadioButton","forwardRef","_ref","ref","label","className","disabled","dataTestId","rest","_jsxs","cn","styles","container","containerDisabled","root","children","control","_jsx","type","input","dot","labelDisabled","displayName"],"mappings":";;;;;;;;;AAoBO,MAAMA,WAAW,gBAAGC,gBAAU,CACnC,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,eAAA,CAAA,OAAA,EAAA;IACEJ,SAAS,EAAEK,EAAE,CAACC,kBAAM,CAACC,SAAS,EAAEP,SAAS,EAAE;MACzC,CAACM,kBAAM,CAACE,iBAAiB,GAAGP,QAAAA;AAC9B,KAAC,CAAE;IACH,aAAaC,EAAAA,UAAU,EAAEO,IAAK;AAAAC,IAAAA,QAAA,gBAE9BN,eAAA,CAAA,MAAA,EAAA;MAAMJ,SAAS,EAAEM,kBAAM,CAACK,OAAQ;AAAAD,MAAAA,QAAA,gBAC9BE,cAAA,CAAA,OAAA,EAAA;AACEd,QAAAA,GAAG,EAAEA,GAAI;AACTe,QAAAA,IAAI,EAAC,OAAO;QACZb,SAAS,EAAEM,kBAAM,CAACQ,KAAM;AACxBb,QAAAA,QAAQ,EAAEA,QAAS;QACnB,aAAaC,EAAAA,UAAU,EAAEY,KAAM;QAAA,GAC3BX,IAAAA;OACL,CAAC,eACFS,cAAA,CAAA,MAAA,EAAA;QAAMZ,SAAS,EAAEM,kBAAM,CAACS,GAAAA;AAAI,OAAE,CAAC,CAAA;AAAA,KAC3B,CAAC,EACNhB,KAAK,gBACJa,cAAA,CAAA,MAAA,EAAA;AACEZ,MAAAA,SAAS,EAAEK,EAAE,CAACC,kBAAM,CAACP,KAAK,EAAE;QAAE,CAACO,kBAAM,CAACU,aAAa,GAAGf,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,WAAW,CAACsB,WAAW,GAAG,aAAa;;;;"}
|
|
@@ -55,6 +55,7 @@ const RichInput = _ref2 => {
|
|
|
55
55
|
className,
|
|
56
56
|
id,
|
|
57
57
|
disabled,
|
|
58
|
+
dataTestId,
|
|
58
59
|
...inputProps
|
|
59
60
|
} = _ref2;
|
|
60
61
|
const inputRef = react.useRef(null);
|
|
@@ -99,11 +100,13 @@ const RichInput = _ref2 => {
|
|
|
99
100
|
jsxRuntime.jsxs("div", {
|
|
100
101
|
className: cn(RichInput_module.root, hasError && RichInput_module.error, className),
|
|
101
102
|
onClick: handleRootClick,
|
|
103
|
+
"data-testid": dataTestId?.root,
|
|
102
104
|
children: [label != null ? /*#__PURE__*/jsxRuntime.jsxs("span", {
|
|
103
105
|
className: RichInput_module.labelRow,
|
|
104
106
|
children: [/*#__PURE__*/jsxRuntime.jsx("label", {
|
|
105
107
|
className: RichInput_module.label,
|
|
106
108
|
htmlFor: inputId,
|
|
109
|
+
"data-testid": dataTestId?.label,
|
|
107
110
|
children: label
|
|
108
111
|
}), labelTooltip != null ? /*#__PURE__*/jsxRuntime.jsx(Tooltip.Tooltip, {
|
|
109
112
|
content: labelTooltip,
|
|
@@ -123,6 +126,7 @@ const RichInput = _ref2 => {
|
|
|
123
126
|
"aria-invalid": hasError || undefined,
|
|
124
127
|
"aria-describedby": showErrorMessage ? errorId : undefined,
|
|
125
128
|
onChange: handleChange,
|
|
129
|
+
"data-testid": dataTestId?.input,
|
|
126
130
|
...inputProps
|
|
127
131
|
}), tokenSelector != null ? /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
128
132
|
className: RichInput_module.token,
|
|
@@ -132,11 +136,13 @@ const RichInput = _ref2 => {
|
|
|
132
136
|
className: RichInput_module.bottomRow,
|
|
133
137
|
children: [secondaryValue != null ? /*#__PURE__*/jsxRuntime.jsx("span", {
|
|
134
138
|
className: RichInput_module.secondary,
|
|
139
|
+
"data-testid": dataTestId?.secondaryValue,
|
|
135
140
|
children: secondaryValue
|
|
136
141
|
}) : null, /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
137
142
|
className: RichInput_module.balanceGroup,
|
|
138
143
|
children: [balance != null ? /*#__PURE__*/jsxRuntime.jsx("span", {
|
|
139
144
|
className: RichInput_module.balance,
|
|
145
|
+
"data-testid": dataTestId?.balance,
|
|
140
146
|
children: balance
|
|
141
147
|
}) : null, showMax ? maxTooltip != null ? /*#__PURE__*/jsxRuntime.jsx(Tooltip.Tooltip, {
|
|
142
148
|
content: maxTooltip,
|
|
@@ -144,16 +150,19 @@ const RichInput = _ref2 => {
|
|
|
144
150
|
width: 240,
|
|
145
151
|
children: /*#__PURE__*/jsxRuntime.jsx(MaxTag, {
|
|
146
152
|
onClick: onMaxClick,
|
|
153
|
+
"data-testid": dataTestId?.maxButton,
|
|
147
154
|
children: "Max"
|
|
148
155
|
})
|
|
149
156
|
}) : /*#__PURE__*/jsxRuntime.jsx(MaxTag, {
|
|
150
157
|
onClick: onMaxClick,
|
|
158
|
+
"data-testid": dataTestId?.maxButton,
|
|
151
159
|
children: "Max"
|
|
152
160
|
}) : null]
|
|
153
161
|
})]
|
|
154
162
|
}) : null, showErrorMessage ? /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
155
163
|
id: errorId,
|
|
156
164
|
className: RichInput_module.errorMessage,
|
|
165
|
+
"data-testid": dataTestId?.error,
|
|
157
166
|
children: errorMessage
|
|
158
167
|
}) : null]
|
|
159
168
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RichInput.cjs","sources":["../../../src/rich-input/RichInput.tsx"],"sourcesContent":["import {\n useId,\n useRef,\n type ChangeEvent,\n type InputHTMLAttributes,\n type KeyboardEvent,\n type MouseEvent,\n type MouseEventHandler,\n type ReactNode,\n} from 'react'\n\nimport cn from 'classnames'\nimport { IconInfo } from '../icons'\nimport { Tag, type TagProps } from '../tag'\nimport { Tooltip } from '../tooltip'\n\nimport styles from './RichInput.module.css'\n\nexport type RichInputProps = InputHTMLAttributes<HTMLInputElement> & {\n label?: ReactNode\n labelTooltip?: ReactNode\n secondaryValue?: ReactNode\n balance?: ReactNode\n tokenSelector?: ReactNode\n error?: ReactNode | boolean\n showMaxButton?: boolean\n onMaxClick?: MouseEventHandler<HTMLSpanElement>\n maxTooltip?: ReactNode\n}\n\nconst MaxTag = ({ onClick, className, ...rest }: TagProps) => (\n <Tag\n role='button'\n tabIndex={0}\n className={cn(styles.maxTag, className)}\n onClick={onClick}\n onKeyDown={(event: KeyboardEvent<HTMLSpanElement>) => {\n if (event.key !== 'Enter' && event.key !== ' ') return\n event.preventDefault()\n onClick?.(event as unknown as MouseEvent<HTMLSpanElement>)\n }}\n {...rest}\n />\n)\n\n// Keep only digits and a single decimal point; comma is treated as the\n// decimal separator and normalized to a dot (en-US canonical form).\nconst sanitizeDecimal = (raw: string): string => {\n const normalized = raw.replace(/,/g, '.').replace(/[^\\d.]/g, '')\n const firstDot = normalized.indexOf('.')\n if (firstDot === -1) return normalized\n const head = normalized.slice(0, firstDot + 1)\n const tail = normalized.slice(firstDot + 1).replace(/\\./g, '')\n return head + tail\n}\n\nexport const RichInput = ({\n label,\n labelTooltip,\n secondaryValue,\n balance,\n tokenSelector,\n error,\n showMaxButton = true,\n onMaxClick,\n maxTooltip,\n onChange,\n className,\n id,\n disabled,\n ...inputProps\n}: RichInputProps) => {\n const inputRef = useRef<HTMLInputElement>(null)\n const fallbackId = useId()\n const inputId = id ?? fallbackId\n\n const hasError = Boolean(error)\n const errorMessage = typeof error === 'boolean' ? null : error\n const showErrorMessage = errorMessage != null && errorMessage !== ''\n const errorId = `${inputId}-error`\n const showMax = showMaxButton && !disabled\n const hasBottomRow = secondaryValue != null || balance != null || showMax\n\n const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n const { value: rawValue, selectionStart } = event.target\n const sanitized = sanitizeDecimal(rawValue)\n\n if (sanitized !== rawValue) {\n // Rewrite the DOM value before bubbling up so the parent (controlled\n // or not) only ever sees the clean value and no invalid char sticks.\n const removed = rawValue.length - sanitized.length\n event.target.value = sanitized\n if (selectionStart != null) {\n const caret = Math.max(0, selectionStart - removed)\n event.target.setSelectionRange(caret, caret)\n }\n }\n\n onChange?.(event)\n }\n\n const handleRootClick = (event: MouseEvent<HTMLDivElement>) => {\n if (!(event.target instanceof Element)) return\n if (event.target.closest('button, input, label, [role=\"listbox\"]')) {\n return\n }\n inputRef.current?.focus()\n }\n\n return (\n // Clicking the padding around the field focuses it — a pointer convenience\n // on top of the real control. Keyboard users tab straight to the input.\n // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions\n <div\n className={cn(styles.root, hasError && styles.error, className)}\n onClick={handleRootClick}\n >\n {label != null ? (\n <span className={styles.labelRow}>\n <label className={styles.label} htmlFor={inputId}>\n {label}\n </label>\n {labelTooltip != null ? (\n <Tooltip content={labelTooltip}>\n <IconInfo\n className={styles.labelTooltipIcon}\n aria-hidden='true'\n />\n </Tooltip>\n ) : null}\n </span>\n ) : null}\n <div className={styles.amountRow}>\n <input\n ref={inputRef}\n id={inputId}\n className={styles.input}\n inputMode='decimal'\n disabled={disabled}\n aria-invalid={hasError || undefined}\n aria-describedby={showErrorMessage ? errorId : undefined}\n onChange={handleChange}\n {...inputProps}\n />\n {tokenSelector != null ? (\n <div className={styles.token}>{tokenSelector}</div>\n ) : null}\n </div>\n {hasBottomRow ? (\n <div className={styles.bottomRow}>\n {secondaryValue != null ? (\n <span className={styles.secondary}>{secondaryValue}</span>\n ) : null}\n <div className={styles.balanceGroup}>\n {balance != null ? (\n <span className={styles.balance}>{balance}</span>\n ) : null}\n {showMax ? (\n maxTooltip != null ? (\n <Tooltip\n content={maxTooltip}\n position='bottom-left'\n width={240}\n >\n <MaxTag onClick={onMaxClick}>Max</MaxTag>\n </Tooltip>\n ) : (\n <MaxTag onClick={onMaxClick}>Max</MaxTag>\n )\n ) : null}\n </div>\n </div>\n ) : null}\n {showErrorMessage ? (\n <div id={errorId} className={styles.errorMessage}>\n {errorMessage}\n </div>\n ) : null}\n </div>\n )\n}\n"],"names":["MaxTag","_ref","onClick","className","rest","_jsx","Tag","role","tabIndex","cn","styles","maxTag","onKeyDown","event","key","preventDefault","sanitizeDecimal","raw","normalized","replace","firstDot","indexOf","head","slice","tail","RichInput","_ref2","label","labelTooltip","secondaryValue","balance","tokenSelector","error","showMaxButton","onMaxClick","maxTooltip","onChange","id","disabled","inputProps","inputRef","useRef","fallbackId","useId","inputId","hasError","Boolean","errorMessage","showErrorMessage","errorId","showMax","hasBottomRow","handleChange","value","rawValue","selectionStart","target","sanitized","removed","length","caret","Math","max","setSelectionRange","handleRootClick","Element","closest","current","focus","_jsxs","root","children","labelRow","htmlFor","Tooltip","content","IconInfo","labelTooltipIcon","amountRow","ref","input","inputMode","undefined","token","bottomRow","secondary","balanceGroup","position","width"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"RichInput.cjs","sources":["../../../src/rich-input/RichInput.tsx"],"sourcesContent":["import {\n useId,\n useRef,\n type ChangeEvent,\n type InputHTMLAttributes,\n type KeyboardEvent,\n type MouseEvent,\n type MouseEventHandler,\n type ReactNode,\n} from 'react'\n\nimport cn from 'classnames'\nimport { IconInfo } from '../icons'\nimport { Tag, type TagProps } from '../tag'\nimport { Tooltip } from '../tooltip'\n\nimport styles from './RichInput.module.css'\n\nexport type RichInputDataTestId = {\n root?: string\n label?: string\n input?: string\n secondaryValue?: string\n balance?: string\n maxButton?: string\n error?: string\n}\n\nexport type RichInputProps = InputHTMLAttributes<HTMLInputElement> & {\n label?: ReactNode\n labelTooltip?: ReactNode\n secondaryValue?: ReactNode\n balance?: ReactNode\n tokenSelector?: ReactNode\n error?: ReactNode | boolean\n showMaxButton?: boolean\n onMaxClick?: MouseEventHandler<HTMLSpanElement>\n maxTooltip?: ReactNode\n dataTestId?: RichInputDataTestId\n}\n\nconst MaxTag = ({ onClick, className, ...rest }: TagProps) => (\n <Tag\n role='button'\n tabIndex={0}\n className={cn(styles.maxTag, className)}\n onClick={onClick}\n onKeyDown={(event: KeyboardEvent<HTMLSpanElement>) => {\n if (event.key !== 'Enter' && event.key !== ' ') return\n event.preventDefault()\n onClick?.(event as unknown as MouseEvent<HTMLSpanElement>)\n }}\n {...rest}\n />\n)\n\n// Keep only digits and a single decimal point; comma is treated as the\n// decimal separator and normalized to a dot (en-US canonical form).\nconst sanitizeDecimal = (raw: string): string => {\n const normalized = raw.replace(/,/g, '.').replace(/[^\\d.]/g, '')\n const firstDot = normalized.indexOf('.')\n if (firstDot === -1) return normalized\n const head = normalized.slice(0, firstDot + 1)\n const tail = normalized.slice(firstDot + 1).replace(/\\./g, '')\n return head + tail\n}\n\nexport const RichInput = ({\n label,\n labelTooltip,\n secondaryValue,\n balance,\n tokenSelector,\n error,\n showMaxButton = true,\n onMaxClick,\n maxTooltip,\n onChange,\n className,\n id,\n disabled,\n dataTestId,\n ...inputProps\n}: RichInputProps) => {\n const inputRef = useRef<HTMLInputElement>(null)\n const fallbackId = useId()\n const inputId = id ?? fallbackId\n\n const hasError = Boolean(error)\n const errorMessage = typeof error === 'boolean' ? null : error\n const showErrorMessage = errorMessage != null && errorMessage !== ''\n const errorId = `${inputId}-error`\n const showMax = showMaxButton && !disabled\n const hasBottomRow = secondaryValue != null || balance != null || showMax\n\n const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n const { value: rawValue, selectionStart } = event.target\n const sanitized = sanitizeDecimal(rawValue)\n\n if (sanitized !== rawValue) {\n // Rewrite the DOM value before bubbling up so the parent (controlled\n // or not) only ever sees the clean value and no invalid char sticks.\n const removed = rawValue.length - sanitized.length\n event.target.value = sanitized\n if (selectionStart != null) {\n const caret = Math.max(0, selectionStart - removed)\n event.target.setSelectionRange(caret, caret)\n }\n }\n\n onChange?.(event)\n }\n\n const handleRootClick = (event: MouseEvent<HTMLDivElement>) => {\n if (!(event.target instanceof Element)) return\n if (event.target.closest('button, input, label, [role=\"listbox\"]')) {\n return\n }\n inputRef.current?.focus()\n }\n\n return (\n // Clicking the padding around the field focuses it — a pointer convenience\n // on top of the real control. Keyboard users tab straight to the input.\n // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions\n <div\n className={cn(styles.root, hasError && styles.error, className)}\n onClick={handleRootClick}\n data-testid={dataTestId?.root}\n >\n {label != null ? (\n <span className={styles.labelRow}>\n <label\n className={styles.label}\n htmlFor={inputId}\n data-testid={dataTestId?.label}\n >\n {label}\n </label>\n {labelTooltip != null ? (\n <Tooltip content={labelTooltip}>\n <IconInfo\n className={styles.labelTooltipIcon}\n aria-hidden='true'\n />\n </Tooltip>\n ) : null}\n </span>\n ) : null}\n <div className={styles.amountRow}>\n <input\n ref={inputRef}\n id={inputId}\n className={styles.input}\n inputMode='decimal'\n disabled={disabled}\n aria-invalid={hasError || undefined}\n aria-describedby={showErrorMessage ? errorId : undefined}\n onChange={handleChange}\n data-testid={dataTestId?.input}\n {...inputProps}\n />\n {tokenSelector != null ? (\n <div className={styles.token}>{tokenSelector}</div>\n ) : null}\n </div>\n {hasBottomRow ? (\n <div className={styles.bottomRow}>\n {secondaryValue != null ? (\n <span\n className={styles.secondary}\n data-testid={dataTestId?.secondaryValue}\n >\n {secondaryValue}\n </span>\n ) : null}\n <div className={styles.balanceGroup}>\n {balance != null ? (\n <span\n className={styles.balance}\n data-testid={dataTestId?.balance}\n >\n {balance}\n </span>\n ) : null}\n {showMax ? (\n maxTooltip != null ? (\n <Tooltip\n content={maxTooltip}\n position='bottom-left'\n width={240}\n >\n <MaxTag\n onClick={onMaxClick}\n data-testid={dataTestId?.maxButton}\n >\n Max\n </MaxTag>\n </Tooltip>\n ) : (\n <MaxTag\n onClick={onMaxClick}\n data-testid={dataTestId?.maxButton}\n >\n Max\n </MaxTag>\n )\n ) : null}\n </div>\n </div>\n ) : null}\n {showErrorMessage ? (\n <div\n id={errorId}\n className={styles.errorMessage}\n data-testid={dataTestId?.error}\n >\n {errorMessage}\n </div>\n ) : null}\n </div>\n )\n}\n"],"names":["MaxTag","_ref","onClick","className","rest","_jsx","Tag","role","tabIndex","cn","styles","maxTag","onKeyDown","event","key","preventDefault","sanitizeDecimal","raw","normalized","replace","firstDot","indexOf","head","slice","tail","RichInput","_ref2","label","labelTooltip","secondaryValue","balance","tokenSelector","error","showMaxButton","onMaxClick","maxTooltip","onChange","id","disabled","dataTestId","inputProps","inputRef","useRef","fallbackId","useId","inputId","hasError","Boolean","errorMessage","showErrorMessage","errorId","showMax","hasBottomRow","handleChange","value","rawValue","selectionStart","target","sanitized","removed","length","caret","Math","max","setSelectionRange","handleRootClick","Element","closest","current","focus","_jsxs","root","children","labelRow","htmlFor","Tooltip","content","IconInfo","labelTooltipIcon","amountRow","ref","input","inputMode","undefined","token","bottomRow","secondary","balanceGroup","position","width","maxButton"],"mappings":"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"}
|
|
@@ -15,10 +15,12 @@ const SectionTitle = _ref => {
|
|
|
15
15
|
tooltip,
|
|
16
16
|
action,
|
|
17
17
|
className,
|
|
18
|
+
dataTestId,
|
|
18
19
|
...rest
|
|
19
20
|
} = _ref;
|
|
20
21
|
return /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
21
22
|
className: cn(SectionTitle_module.root, className),
|
|
23
|
+
"data-testid": dataTestId?.root,
|
|
22
24
|
...rest,
|
|
23
25
|
children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
24
26
|
className: SectionTitle_module.left,
|
|
@@ -26,6 +28,7 @@ const SectionTitle = _ref => {
|
|
|
26
28
|
className: SectionTitle_module.titleRow,
|
|
27
29
|
children: [/*#__PURE__*/jsxRuntime.jsx("p", {
|
|
28
30
|
className: SectionTitle_module.title,
|
|
31
|
+
"data-testid": dataTestId?.title,
|
|
29
32
|
children: title
|
|
30
33
|
}), tooltip != null ? /*#__PURE__*/jsxRuntime.jsx(Tooltip.Tooltip, {
|
|
31
34
|
content: tooltip,
|
|
@@ -36,10 +39,12 @@ const SectionTitle = _ref => {
|
|
|
36
39
|
}) : null]
|
|
37
40
|
}), subtitle != null ? /*#__PURE__*/jsxRuntime.jsx("p", {
|
|
38
41
|
className: SectionTitle_module.subtitle,
|
|
42
|
+
"data-testid": dataTestId?.subtitle,
|
|
39
43
|
children: subtitle
|
|
40
44
|
}) : null]
|
|
41
45
|
}), action != null ? /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
42
46
|
className: SectionTitle_module.action,
|
|
47
|
+
"data-testid": dataTestId?.action,
|
|
43
48
|
children: action
|
|
44
49
|
}) : null]
|
|
45
50
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SectionTitle.cjs","sources":["../../../src/section-title/SectionTitle.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react'\n\nimport cn from 'classnames'\n\nimport { IconInfo } from '../icons'\nimport { Tooltip } from '../tooltip'\nimport styles from './SectionTitle.module.css'\n\nexport type SectionTitleProps = HTMLAttributes<HTMLDivElement> & {\n title: ReactNode\n subtitle?: ReactNode\n /** Renders an info glyph next to the title; hovering it shows this content. */\n tooltip?: ReactNode\n /** Rendered on the right, typically a `Button`. */\n action?: ReactNode\n}\n\nexport const SectionTitle = ({\n title,\n subtitle,\n tooltip,\n action,\n className,\n ...rest\n}: SectionTitleProps) => (\n <div
|
|
1
|
+
{"version":3,"file":"SectionTitle.cjs","sources":["../../../src/section-title/SectionTitle.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react'\n\nimport cn from 'classnames'\n\nimport { IconInfo } from '../icons'\nimport { Tooltip } from '../tooltip'\nimport styles from './SectionTitle.module.css'\n\nexport type SectionTitleDataTestId = {\n root?: string\n title?: string\n subtitle?: string\n action?: string\n}\n\nexport type SectionTitleProps = HTMLAttributes<HTMLDivElement> & {\n title: ReactNode\n subtitle?: ReactNode\n /** Renders an info glyph next to the title; hovering it shows this content. */\n tooltip?: ReactNode\n /** Rendered on the right, typically a `Button`. */\n action?: ReactNode\n dataTestId?: SectionTitleDataTestId\n}\n\nexport const SectionTitle = ({\n title,\n subtitle,\n tooltip,\n action,\n className,\n dataTestId,\n ...rest\n}: SectionTitleProps) => (\n <div\n className={cn(styles.root, className)}\n data-testid={dataTestId?.root}\n {...rest}\n >\n <div className={styles.left}>\n <div className={styles.titleRow}>\n <p className={styles.title} data-testid={dataTestId?.title}>\n {title}\n </p>\n {tooltip != null ? (\n <Tooltip content={tooltip}>\n <IconInfo className={styles.icon} aria-hidden='true' />\n </Tooltip>\n ) : null}\n </div>\n {subtitle != null ? (\n <p className={styles.subtitle} data-testid={dataTestId?.subtitle}>\n {subtitle}\n </p>\n ) : null}\n </div>\n {action != null ? (\n <div className={styles.action} data-testid={dataTestId?.action}>\n {action}\n </div>\n ) : null}\n </div>\n)\n"],"names":["SectionTitle","_ref","title","subtitle","tooltip","action","className","dataTestId","rest","_jsxs","cn","styles","root","children","left","titleRow","_jsx","Tooltip","content","IconInfo","icon"],"mappings":";;;;;;;;;;AAyBO,MAAMA,YAAY,GAAGC,IAAA,IAAA;EAAA,IAAC;IAC3BC,KAAK;IACLC,QAAQ;IACRC,OAAO;IACPC,MAAM;IACNC,SAAS;IACTC,UAAU;IACV,GAAGC,IAAAA;AACc,GAAC,GAAAP,IAAA,CAAA;AAAA,EAAA,oBAClBQ,eAAA,CAAA,KAAA,EAAA;IACEH,SAAS,EAAEI,EAAE,CAACC,mBAAM,CAACC,IAAI,EAAEN,SAAS,CAAE;IACtC,aAAaC,EAAAA,UAAU,EAAEK,IAAK;AAAA,IAAA,GAC1BJ,IAAI;AAAAK,IAAAA,QAAA,gBAERJ,eAAA,CAAA,KAAA,EAAA;MAAKH,SAAS,EAAEK,mBAAM,CAACG,IAAK;AAAAD,MAAAA,QAAA,gBAC1BJ,eAAA,CAAA,KAAA,EAAA;QAAKH,SAAS,EAAEK,mBAAM,CAACI,QAAS;AAAAF,QAAAA,QAAA,gBAC9BG,cAAA,CAAA,GAAA,EAAA;UAAGV,SAAS,EAAEK,mBAAM,CAACT,KAAM;UAAC,aAAaK,EAAAA,UAAU,EAAEL,KAAM;AAAAW,UAAAA,QAAA,EACxDX,KAAAA;SACA,CAAC,EACHE,OAAO,IAAI,IAAI,gBACdY,cAAA,CAACC,eAAO,EAAA;AAACC,UAAAA,OAAO,EAAEd,OAAQ;UAAAS,QAAA,eACxBG,cAAA,CAACG,iBAAQ,EAAA;YAACb,SAAS,EAAEK,mBAAM,CAACS,IAAK;YAAC,aAAY,EAAA,MAAA;WAAQ,CAAA;SAC/C,CAAC,GACR,IAAI,CAAA;AAAA,OACL,CAAC,EACLjB,QAAQ,IAAI,IAAI,gBACfa,cAAA,CAAA,GAAA,EAAA;QAAGV,SAAS,EAAEK,mBAAM,CAACR,QAAS;QAAC,aAAaI,EAAAA,UAAU,EAAEJ,QAAS;AAAAU,QAAAA,QAAA,EAC9DV,QAAAA;OACA,CAAC,GACF,IAAI,CAAA;AAAA,KACL,CAAC,EACLE,MAAM,IAAI,IAAI,gBACbW,cAAA,CAAA,KAAA,EAAA;MAAKV,SAAS,EAAEK,mBAAM,CAACN,MAAO;MAAC,aAAaE,EAAAA,UAAU,EAAEF,MAAO;AAAAQ,MAAAA,QAAA,EAC5DR,MAAAA;KACE,CAAC,GACJ,IAAI,CAAA;AAAA,GACL,CAAC,CAAA;AAAA;;;;"}
|
|
@@ -13,6 +13,7 @@ const Segment = /*#__PURE__*/react.forwardRef((_ref, ref) => {
|
|
|
13
13
|
className,
|
|
14
14
|
children,
|
|
15
15
|
type = 'button',
|
|
16
|
+
dataTestId,
|
|
16
17
|
...rest
|
|
17
18
|
} = _ref;
|
|
18
19
|
return /*#__PURE__*/jsxRuntime.jsx("button", {
|
|
@@ -21,9 +22,11 @@ const Segment = /*#__PURE__*/react.forwardRef((_ref, ref) => {
|
|
|
21
22
|
role: "tab",
|
|
22
23
|
"aria-selected": active,
|
|
23
24
|
className: cn(Segment_module.segment, active && Segment_module.active, className),
|
|
25
|
+
"data-testid": dataTestId?.root,
|
|
24
26
|
...rest,
|
|
25
27
|
children: /*#__PURE__*/jsxRuntime.jsx("span", {
|
|
26
28
|
className: Segment_module.content,
|
|
29
|
+
"data-testid": dataTestId?.content,
|
|
27
30
|
children: children
|
|
28
31
|
})
|
|
29
32
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Segment.cjs","sources":["../../../src/segmented-control/Segment.tsx"],"sourcesContent":["import { forwardRef, type ButtonHTMLAttributes } from 'react'\n\nimport cn from 'classnames'\n\nimport styles from './Segment.module.css'\n\nexport type SegmentProps = ButtonHTMLAttributes<HTMLButtonElement> & {\n active?: boolean\n}\n\nexport const Segment = forwardRef<HTMLButtonElement, SegmentProps>(\n ({
|
|
1
|
+
{"version":3,"file":"Segment.cjs","sources":["../../../src/segmented-control/Segment.tsx"],"sourcesContent":["import { forwardRef, type ButtonHTMLAttributes } from 'react'\n\nimport cn from 'classnames'\n\nimport styles from './Segment.module.css'\n\nexport type SegmentDataTestId = {\n root?: string\n content?: string\n}\n\nexport type SegmentProps = ButtonHTMLAttributes<HTMLButtonElement> & {\n active?: boolean\n dataTestId?: SegmentDataTestId\n}\n\nexport const Segment = forwardRef<HTMLButtonElement, SegmentProps>(\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.segment, active && styles.active, className)}\n data-testid={dataTestId?.root}\n {...rest}\n >\n <span className={styles.content} data-testid={dataTestId?.content}>\n {children}\n </span>\n </button>\n ),\n)\n\nSegment.displayName = 'Segment'\n"],"names":["Segment","forwardRef","_ref","ref","active","className","children","type","dataTestId","rest","_jsx","role","cn","styles","segment","root","content","displayName"],"mappings":";;;;;;;;;AAgBO,MAAMA,OAAO,gBAAGC,gBAAU,CAC/B,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,cAAA,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,cAAM,CAACC,OAAO,EAAEV,MAAM,IAAIS,cAAM,CAACT,MAAM,EAAEC,SAAS,CAAE;IAClE,aAAaG,EAAAA,UAAU,EAAEO,IAAK;AAAA,IAAA,GAC1BN,IAAI;AAAAH,IAAAA,QAAA,eAERI,cAAA,CAAA,MAAA,EAAA;MAAML,SAAS,EAAEQ,cAAM,CAACG,OAAQ;MAAC,aAAaR,EAAAA,UAAU,EAAEQ,OAAQ;AAAAV,MAAAA,QAAA,EAC/DA,QAAAA;KACG,CAAA;AAAC,GACD,CAAC,CAAA;AAAA,CAEb,EAAC;AAEDN,OAAO,CAACiB,WAAW,GAAG,SAAS;;;;"}
|
|
@@ -18,6 +18,7 @@ const SegmentCard = /*#__PURE__*/react.forwardRef((_ref, ref) => {
|
|
|
18
18
|
description,
|
|
19
19
|
className,
|
|
20
20
|
type = 'button',
|
|
21
|
+
dataTestId,
|
|
21
22
|
...rest
|
|
22
23
|
} = _ref;
|
|
23
24
|
return /*#__PURE__*/jsxRuntime.jsx("button", {
|
|
@@ -27,20 +28,26 @@ const SegmentCard = /*#__PURE__*/react.forwardRef((_ref, ref) => {
|
|
|
27
28
|
"aria-selected": active,
|
|
28
29
|
disabled: disabled,
|
|
29
30
|
className: cn(SegmentCard_module.card, active && SegmentCard_module.active, className),
|
|
31
|
+
"data-testid": dataTestId?.root,
|
|
30
32
|
...rest,
|
|
31
33
|
children: /*#__PURE__*/jsxRuntime.jsxs("span", {
|
|
32
34
|
className: SegmentCard_module.content,
|
|
33
35
|
children: [icon != null ? /*#__PURE__*/jsxRuntime.jsx("span", {
|
|
34
36
|
className: SegmentCard_module.icon,
|
|
35
37
|
"aria-hidden": "true",
|
|
38
|
+
"data-testid": dataTestId?.icon,
|
|
36
39
|
children: icon
|
|
37
40
|
}) : null, /*#__PURE__*/jsxRuntime.jsxs("span", {
|
|
38
41
|
className: SegmentCard_module.title,
|
|
42
|
+
"data-testid": dataTestId?.title,
|
|
39
43
|
children: [/*#__PURE__*/jsxRuntime.jsx("span", {
|
|
40
44
|
className: SegmentCard_module.titleText,
|
|
41
45
|
children: title
|
|
42
46
|
}), tag != null ? /*#__PURE__*/jsxRuntime.jsx(Tag.Tag, {
|
|
43
47
|
variant: "neutral",
|
|
48
|
+
dataTestId: {
|
|
49
|
+
root: dataTestId?.tag
|
|
50
|
+
},
|
|
44
51
|
style: disabled ? {
|
|
45
52
|
'--local-text': 'var(--lido-app-ui-color-text-disabled)'
|
|
46
53
|
} : undefined,
|
|
@@ -48,6 +55,7 @@ const SegmentCard = /*#__PURE__*/react.forwardRef((_ref, ref) => {
|
|
|
48
55
|
}) : null]
|
|
49
56
|
}), description != null ? /*#__PURE__*/jsxRuntime.jsx("span", {
|
|
50
57
|
className: SegmentCard_module.description,
|
|
58
|
+
"data-testid": dataTestId?.description,
|
|
51
59
|
children: description
|
|
52
60
|
}) : null]
|
|
53
61
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SegmentCard.cjs","sources":["../../../src/segmented-control/SegmentCard.tsx"],"sourcesContent":["import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react'\n\nimport cn from 'classnames'\n\nimport { Tag } from '../tag'\nimport styles from './SegmentCard.module.css'\n\nexport type SegmentCardProps = Omit<\n ButtonHTMLAttributes<HTMLButtonElement>,\n 'title'\n> & {\n active?: boolean\n icon?: ReactNode\n title: ReactNode\n tag?: ReactNode\n description?: ReactNode\n}\n\nexport const SegmentCard = forwardRef<HTMLButtonElement, SegmentCardProps>(\n (\n {\n active = false,\n disabled = false,\n icon,\n title,\n tag,\n description,\n className,\n type = 'button',\n ...rest\n },\n ref,\n ) => (\n <button\n ref={ref}\n type={type}\n role='tab'\n aria-selected={active}\n disabled={disabled}\n className={cn(styles.card, active && styles.active, className)}\n {...rest}\n >\n <span className={styles.content}>\n {icon != null ? (\n <span
|
|
1
|
+
{"version":3,"file":"SegmentCard.cjs","sources":["../../../src/segmented-control/SegmentCard.tsx"],"sourcesContent":["import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react'\n\nimport cn from 'classnames'\n\nimport { Tag } from '../tag'\nimport styles from './SegmentCard.module.css'\n\nexport type SegmentCardDataTestId = {\n root?: string\n icon?: string\n title?: string\n tag?: string\n description?: string\n}\n\nexport type SegmentCardProps = Omit<\n ButtonHTMLAttributes<HTMLButtonElement>,\n 'title'\n> & {\n active?: boolean\n icon?: ReactNode\n title: ReactNode\n tag?: ReactNode\n description?: ReactNode\n dataTestId?: SegmentCardDataTestId\n}\n\nexport const SegmentCard = forwardRef<HTMLButtonElement, SegmentCardProps>(\n (\n {\n active = false,\n disabled = false,\n icon,\n title,\n tag,\n description,\n className,\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 disabled={disabled}\n className={cn(styles.card, active && styles.active, className)}\n data-testid={dataTestId?.root}\n {...rest}\n >\n <span className={styles.content}>\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 <span className={styles.title} data-testid={dataTestId?.title}>\n <span className={styles.titleText}>{title}</span>\n {tag != null ? (\n <Tag\n variant='neutral'\n dataTestId={{ root: dataTestId?.tag }}\n style={\n disabled\n ? ({\n '--local-text': 'var(--lido-app-ui-color-text-disabled)',\n } as React.CSSProperties)\n : undefined\n }\n >\n {tag}\n </Tag>\n ) : null}\n </span>\n {description != null ? (\n <span\n className={styles.description}\n data-testid={dataTestId?.description}\n >\n {description}\n </span>\n ) : null}\n </span>\n </button>\n ),\n)\n\nSegmentCard.displayName = 'SegmentCard'\n"],"names":["SegmentCard","forwardRef","_ref","ref","active","disabled","icon","title","tag","description","className","type","dataTestId","rest","_jsx","role","cn","styles","card","root","children","_jsxs","content","titleText","Tag","variant","style","undefined","displayName"],"mappings":";;;;;;;;;;AA2BO,MAAMA,WAAW,gBAAGC,gBAAU,CACnC,CAAAC,IAAA,EAaEC,GAAG,KAAA;EAAA,IAZH;AACEC,IAAAA,MAAM,GAAG,KAAK;AACdC,IAAAA,QAAQ,GAAG,KAAK;IAChBC,IAAI;IACJC,KAAK;IACLC,GAAG;IACHC,WAAW;IACXC,SAAS;AACTC,IAAAA,IAAI,GAAG,QAAQ;IACfC,UAAU;IACV,GAAGC,IAAAA;AACL,GAAC,GAAAX,IAAA,CAAA;AAAA,EAAA,oBAGDY,cAAA,CAAA,QAAA,EAAA;AACEX,IAAAA,GAAG,EAAEA,GAAI;AACTQ,IAAAA,IAAI,EAAEA,IAAK;AACXI,IAAAA,IAAI,EAAC,KAAK;AACV,IAAA,eAAA,EAAeX,MAAO;AACtBC,IAAAA,QAAQ,EAAEA,QAAS;AACnBK,IAAAA,SAAS,EAAEM,EAAE,CAACC,kBAAM,CAACC,IAAI,EAAEd,MAAM,IAAIa,kBAAM,CAACb,MAAM,EAAEM,SAAS,CAAE;IAC/D,aAAaE,EAAAA,UAAU,EAAEO,IAAK;AAAA,IAAA,GAC1BN,IAAI;AAAAO,IAAAA,QAAA,eAERC,eAAA,CAAA,MAAA,EAAA;MAAMX,SAAS,EAAEO,kBAAM,CAACK,OAAQ;AAAAF,MAAAA,QAAA,EAC7Bd,CAAAA,IAAI,IAAI,IAAI,gBACXQ,cAAA,CAAA,MAAA,EAAA;QACEJ,SAAS,EAAEO,kBAAM,CAACX,IAAK;AACvB,QAAA,aAAA,EAAY,MAAM;QAClB,aAAaM,EAAAA,UAAU,EAAEN,IAAK;AAAAc,QAAAA,QAAA,EAE7Bd,IAAAA;AAAI,OACD,CAAC,GACL,IAAI,eACRe,eAAA,CAAA,MAAA,EAAA;QAAMX,SAAS,EAAEO,kBAAM,CAACV,KAAM;QAAC,aAAaK,EAAAA,UAAU,EAAEL,KAAM;AAAAa,QAAAA,QAAA,gBAC5DN,cAAA,CAAA,MAAA,EAAA;UAAMJ,SAAS,EAAEO,kBAAM,CAACM,SAAU;AAAAH,UAAAA,QAAA,EAAEb,KAAAA;SAAY,CAAC,EAChDC,GAAG,IAAI,IAAI,gBACVM,cAAA,CAACU,OAAG,EAAA;AACFC,UAAAA,OAAO,EAAC,SAAS;AACjBb,UAAAA,UAAU,EAAE;YAAEO,IAAI,EAAEP,UAAU,EAAEJ,GAAAA;WAAM;UACtCkB,KAAK,EACHrB,QAAQ,GACH;AACC,YAAA,cAAc,EAAE,wCAAA;AAClB,WAAC,GACDsB,SACL;AAAAP,UAAAA,QAAA,EAEAZ,GAAAA;SACE,CAAC,GACJ,IAAI,CAAA;AAAA,OACJ,CAAC,EACNC,WAAW,IAAI,IAAI,gBAClBK,cAAA,CAAA,MAAA,EAAA;QACEJ,SAAS,EAAEO,kBAAM,CAACR,WAAY;QAC9B,aAAaG,EAAAA,UAAU,EAAEH,WAAY;AAAAW,QAAAA,QAAA,EAEpCX,WAAAA;OACG,CAAC,GACL,IAAI,CAAA;KACJ,CAAA;AAAC,GACD,CAAC,CAAA;AAAA,CAEb,EAAC;AAEDT,WAAW,CAAC4B,WAAW,GAAG,aAAa;;;;"}
|
|
@@ -13,7 +13,9 @@ const SegmentedControl = _ref => {
|
|
|
13
13
|
items,
|
|
14
14
|
value,
|
|
15
15
|
onChange,
|
|
16
|
-
className
|
|
16
|
+
className,
|
|
17
|
+
dataTestId,
|
|
18
|
+
...rest
|
|
17
19
|
} = _ref;
|
|
18
20
|
const containerRef = react.useRef(null);
|
|
19
21
|
const activeButtonRef = react.useRef(null);
|
|
@@ -52,6 +54,8 @@ const SegmentedControl = _ref => {
|
|
|
52
54
|
ref: containerRef,
|
|
53
55
|
role: "tablist",
|
|
54
56
|
className: cn(SegmentedControl_module.segmentedControl, className),
|
|
57
|
+
"data-testid": dataTestId?.root,
|
|
58
|
+
...rest,
|
|
55
59
|
children: [/*#__PURE__*/jsxRuntime.jsx("div", {
|
|
56
60
|
ref: selectionRef,
|
|
57
61
|
"aria-hidden": "true",
|
|
@@ -62,6 +66,7 @@ const SegmentedControl = _ref => {
|
|
|
62
66
|
ref: active ? activeButtonRef : undefined,
|
|
63
67
|
active: active,
|
|
64
68
|
disabled: item.disabled,
|
|
69
|
+
dataTestId: item.dataTestId,
|
|
65
70
|
onClick: () => {
|
|
66
71
|
if (item.value !== value) onChange(item.value);
|
|
67
72
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SegmentedControl.cjs","sources":["../../../src/segmented-control/SegmentedControl.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"SegmentedControl.cjs","sources":["../../../src/segmented-control/SegmentedControl.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 { Segment, type SegmentDataTestId } from './Segment'\nimport styles from './SegmentedControl.module.css'\n\nexport type SegmentedControlDataTestId = {\n root?: string\n}\n\nexport type SegmentItem = {\n value: string\n label: ReactNode\n disabled?: boolean\n dataTestId?: SegmentDataTestId\n}\n\nexport type SegmentedControlProps = Omit<\n ComponentPropsWithoutRef<'div'>,\n 'onChange'\n> & {\n items: SegmentItem[]\n value: string\n onChange: (value: string) => void\n dataTestId?: SegmentedControlDataTestId\n}\n\nexport const SegmentedControl = ({\n items,\n value,\n onChange,\n className,\n dataTestId,\n ...rest\n}: SegmentedControlProps) => {\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 pill 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 // The pill is absolutely positioned, so top/left 0 is the container's\n // padding box (inside the border). getBoundingClientRect measures from\n // the border box, so subtract the border to keep the pill from drifting\n // down-right by the border width.\n const style = getComputedStyle(container)\n const borderLeft = parseFloat(style.borderLeftWidth) || 0\n const borderTop = parseFloat(style.borderTopWidth) || 0\n const x = buttonRect.left - containerRect.left - borderLeft\n const y = buttonRect.top - containerRect.top - borderTop\n\n selection.style.width = `${buttonRect.width}px`\n selection.style.height = `${buttonRect.height}px`\n selection.style.transform = `translate(${x}px, ${y}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.segmentedControl, 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 <Segment\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 </Segment>\n )\n })}\n </div>\n )\n}\n"],"names":["SegmentedControl","_ref","items","value","onChange","className","dataTestId","rest","containerRef","useRef","activeButtonRef","selectionRef","animated","setAnimated","useState","useLayoutEffect","updateSelection","button","current","container","selection","buttonRect","getBoundingClientRect","containerRect","style","getComputedStyle","borderLeft","parseFloat","borderLeftWidth","borderTop","borderTopWidth","x","left","y","top","width","height","transform","window","addEventListener","removeEventListener","_jsxs","ref","role","cn","styles","segmentedControl","root","children","_jsx","map","item","active","Segment","undefined","disabled","onClick","label"],"mappings":"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"}
|