@lidofinance/lido-app-ui 1.5.0 → 1.7.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/index.css +2 -2
- 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 +5 -1
- package/dist/cjs/text-link/TextLink.cjs.map +1 -1
- package/dist/cjs/text-link/TextLink.module.css.cjs +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/index.css +2 -2
- 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 +5 -1
- package/dist/esm/text-link/TextLink.mjs.map +1 -1
- package/dist/esm/text-link/TextLink.module.css.mjs +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/index.css +2 -2
- 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 +8 -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 +3 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.cjs","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.cjs","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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"}
|
|
@@ -40,10 +40,14 @@ const TxStatus = _ref => {
|
|
|
40
40
|
amount,
|
|
41
41
|
message,
|
|
42
42
|
footer,
|
|
43
|
-
className
|
|
43
|
+
className,
|
|
44
|
+
dataTestId,
|
|
45
|
+
...rest
|
|
44
46
|
} = _ref;
|
|
45
47
|
return /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
46
48
|
className: cn(TxStatus_module.root, className),
|
|
49
|
+
"data-testid": dataTestId?.root,
|
|
50
|
+
...rest,
|
|
47
51
|
children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
48
52
|
className: TxStatus_module.graphicGroup,
|
|
49
53
|
children: [/*#__PURE__*/jsxRuntime.jsx("span", {
|
|
@@ -53,17 +57,21 @@ const TxStatus = _ref => {
|
|
|
53
57
|
className: TxStatus_module.textGroup,
|
|
54
58
|
children: [/*#__PURE__*/jsxRuntime.jsx("span", {
|
|
55
59
|
className: TxStatus_module.title,
|
|
60
|
+
"data-testid": dataTestId?.title,
|
|
56
61
|
children: title
|
|
57
62
|
}), amount ? /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
58
63
|
className: TxStatus_module.amount,
|
|
64
|
+
"data-testid": dataTestId?.amount,
|
|
59
65
|
children: amount
|
|
60
66
|
}) : null, message ? /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
61
67
|
className: TxStatus_module.message,
|
|
68
|
+
"data-testid": dataTestId?.message,
|
|
62
69
|
children: message
|
|
63
70
|
}) : null]
|
|
64
71
|
})]
|
|
65
72
|
}), footer ? /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
66
73
|
className: TxStatus_module.footer,
|
|
74
|
+
"data-testid": dataTestId?.footer,
|
|
67
75
|
children: footer
|
|
68
76
|
}) : null]
|
|
69
77
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TxStatus.cjs","sources":["../../../src/tx-status/TxStatus.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\n\nimport { IconCheck, IconCross, IconExclamation, IconSpinner } from '../icons'\nimport cn from 'classnames'\n\nimport styles from './TxStatus.module.css'\n\nexport type TxStatusVariant = 'loading' | 'success' | 'error' | 'warning'\n\nexport type TxStatusProps = {\n status: TxStatusVariant\n title: ReactNode\n amount?: ReactNode\n message?: ReactNode\n footer?: ReactNode\n
|
|
1
|
+
{"version":3,"file":"TxStatus.cjs","sources":["../../../src/tx-status/TxStatus.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ReactNode } from 'react'\n\nimport { IconCheck, IconCross, IconExclamation, IconSpinner } from '../icons'\nimport cn from 'classnames'\n\nimport styles from './TxStatus.module.css'\n\nexport type TxStatusVariant = 'loading' | 'success' | 'error' | 'warning'\n\nexport type TxStatusDataTestId = {\n root?: string\n title?: string\n amount?: string\n message?: string\n footer?: string\n}\n\nexport type TxStatusProps = Omit<ComponentPropsWithoutRef<'div'>, 'title'> & {\n status: TxStatusVariant\n title: ReactNode\n amount?: ReactNode\n message?: ReactNode\n footer?: ReactNode\n dataTestId?: TxStatusDataTestId\n}\n\nconst graphicByStatus: Record<TxStatusVariant, ReactNode> = {\n loading: <IconSpinner className={styles.spinner} />,\n success: (\n <span className={cn(styles.circle, styles.circleSuccess)}>\n <IconCheck className={styles.circleIcon} />\n </span>\n ),\n error: (\n <span className={cn(styles.circle, styles.circleError)}>\n <IconCross className={styles.circleIcon} />\n </span>\n ),\n warning: (\n <span className={cn(styles.circle, styles.circleWarning)}>\n <IconExclamation className={styles.circleIcon} />\n </span>\n ),\n}\n\nexport const TxStatus = ({\n status,\n title,\n amount,\n message,\n footer,\n className,\n dataTestId,\n ...rest\n}: TxStatusProps) => (\n <div\n className={cn(styles.root, className)}\n data-testid={dataTestId?.root}\n {...rest}\n >\n <div className={styles.graphicGroup}>\n <span className={styles.graphic}>{graphicByStatus[status]}</span>\n <div className={styles.textGroup}>\n <span className={styles.title} data-testid={dataTestId?.title}>\n {title}\n </span>\n {amount ? (\n <div className={styles.amount} data-testid={dataTestId?.amount}>\n {amount}\n </div>\n ) : null}\n {message ? (\n <div className={styles.message} data-testid={dataTestId?.message}>\n {message}\n </div>\n ) : null}\n </div>\n </div>\n {footer ? (\n <div className={styles.footer} data-testid={dataTestId?.footer}>\n {footer}\n </div>\n ) : null}\n </div>\n)\n"],"names":["graphicByStatus","loading","_jsx","IconSpinner","className","styles","spinner","success","cn","circle","circleSuccess","children","IconCheck","circleIcon","error","circleError","IconCross","warning","circleWarning","IconExclamation","TxStatus","_ref","status","title","amount","message","footer","dataTestId","rest","_jsxs","root","graphicGroup","graphic","textGroup"],"mappings":"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"}
|
|
@@ -24,11 +24,13 @@ const Typography = _ref => {
|
|
|
24
24
|
as,
|
|
25
25
|
className,
|
|
26
26
|
children,
|
|
27
|
+
dataTestId,
|
|
27
28
|
...rest
|
|
28
29
|
} = _ref;
|
|
29
30
|
const Component = as ?? variantTag[variant];
|
|
30
31
|
return /*#__PURE__*/jsxRuntime.jsx(Component, {
|
|
31
32
|
className: cn(Typography_module.root, Typography_module[variant], weight === 'semibold' && isBodyVariant(variant) && Typography_module.semibold, className),
|
|
33
|
+
"data-testid": dataTestId?.root,
|
|
32
34
|
...rest,
|
|
33
35
|
children: children
|
|
34
36
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Typography.cjs","sources":["../../../src/typography/Typography.tsx"],"sourcesContent":["import type { ElementType, HTMLAttributes } from 'react'\n\nimport cn from 'classnames'\n\nimport styles from './Typography.module.css'\n\nexport type TypographyVariant =\n | 'h1'\n | 'h2'\n | 'h3'\n | 'richInput'\n | 'bodyLarge'\n | 'body'\n | 'description'\n | 'groupName'\n\n// Weight only applies to bodyLarge/body/description; headings are single-weight by design.\nexport type TypographyWeight = 'regular' | 'semibold'\n\nexport type TypographyProps = HTMLAttributes<HTMLElement> & {\n variant: TypographyVariant\n weight?: TypographyWeight\n as?: ElementType\n}\n\nconst variantTag: Record<TypographyVariant, ElementType> = {\n h1: 'h1',\n h2: 'h2',\n h3: 'h3',\n richInput: 'p',\n bodyLarge: 'p',\n body: 'p',\n description: 'p',\n groupName: 'p',\n}\n\nconst isBodyVariant = (variant: TypographyVariant): boolean =>\n variant === 'bodyLarge' || variant === 'body' || variant === 'description'\n\nexport const Typography = ({\n variant,\n weight,\n as,\n className,\n children,\n ...rest\n}: TypographyProps) => {\n const Component = as ?? variantTag[variant]\n\n return (\n <Component\n className={cn(\n styles.root,\n styles[variant],\n weight === 'semibold' && isBodyVariant(variant) && styles.semibold,\n className,\n )}\n {...rest}\n >\n {children}\n </Component>\n )\n}\n\ntype ShorthandProps = Omit<TypographyProps, 'variant'>\n\nexport const H1 = (props: ShorthandProps) => (\n <Typography {...props} variant='h1' />\n)\n\nexport const H2 = (props: ShorthandProps) => (\n <Typography {...props} variant='h2' />\n)\n\nexport const H3 = (props: ShorthandProps) => (\n <Typography {...props} variant='h3' />\n)\n\nexport const BodyLarge = (props: ShorthandProps) => (\n <Typography {...props} variant='bodyLarge' />\n)\n\nexport const Body = (props: ShorthandProps) => (\n <Typography {...props} variant='body' />\n)\n\nexport const Description = (props: ShorthandProps) => (\n <Typography {...props} variant='description' />\n)\n\nexport const GroupName = (props: ShorthandProps) => (\n <Typography {...props} variant='groupName' />\n)\n"],"names":["variantTag","h1","h2","h3","richInput","bodyLarge","body","description","groupName","isBodyVariant","variant","Typography","_ref","weight","as","className","children","rest","Component","_jsx","cn","styles","root","semibold","H1","props","H2","H3","BodyLarge","Body","Description","GroupName"],"mappings":";;;;;;;;
|
|
1
|
+
{"version":3,"file":"Typography.cjs","sources":["../../../src/typography/Typography.tsx"],"sourcesContent":["import type { ElementType, HTMLAttributes } from 'react'\n\nimport cn from 'classnames'\n\nimport styles from './Typography.module.css'\n\nexport type TypographyVariant =\n | 'h1'\n | 'h2'\n | 'h3'\n | 'richInput'\n | 'bodyLarge'\n | 'body'\n | 'description'\n | 'groupName'\n\n// Weight only applies to bodyLarge/body/description; headings are single-weight by design.\nexport type TypographyWeight = 'regular' | 'semibold'\n\nexport type TypographyDataTestId = {\n root?: string\n}\n\nexport type TypographyProps = HTMLAttributes<HTMLElement> & {\n variant: TypographyVariant\n weight?: TypographyWeight\n as?: ElementType\n dataTestId?: TypographyDataTestId\n}\n\nconst variantTag: Record<TypographyVariant, ElementType> = {\n h1: 'h1',\n h2: 'h2',\n h3: 'h3',\n richInput: 'p',\n bodyLarge: 'p',\n body: 'p',\n description: 'p',\n groupName: 'p',\n}\n\nconst isBodyVariant = (variant: TypographyVariant): boolean =>\n variant === 'bodyLarge' || variant === 'body' || variant === 'description'\n\nexport const Typography = ({\n variant,\n weight,\n as,\n className,\n children,\n dataTestId,\n ...rest\n}: TypographyProps) => {\n const Component = as ?? variantTag[variant]\n\n return (\n <Component\n className={cn(\n styles.root,\n styles[variant],\n weight === 'semibold' && isBodyVariant(variant) && styles.semibold,\n className,\n )}\n data-testid={dataTestId?.root}\n {...rest}\n >\n {children}\n </Component>\n )\n}\n\ntype ShorthandProps = Omit<TypographyProps, 'variant'>\n\nexport const H1 = (props: ShorthandProps) => (\n <Typography {...props} variant='h1' />\n)\n\nexport const H2 = (props: ShorthandProps) => (\n <Typography {...props} variant='h2' />\n)\n\nexport const H3 = (props: ShorthandProps) => (\n <Typography {...props} variant='h3' />\n)\n\nexport const BodyLarge = (props: ShorthandProps) => (\n <Typography {...props} variant='bodyLarge' />\n)\n\nexport const Body = (props: ShorthandProps) => (\n <Typography {...props} variant='body' />\n)\n\nexport const Description = (props: ShorthandProps) => (\n <Typography {...props} variant='description' />\n)\n\nexport const GroupName = (props: ShorthandProps) => (\n <Typography {...props} variant='groupName' />\n)\n"],"names":["variantTag","h1","h2","h3","richInput","bodyLarge","body","description","groupName","isBodyVariant","variant","Typography","_ref","weight","as","className","children","dataTestId","rest","Component","_jsx","cn","styles","root","semibold","H1","props","H2","H3","BodyLarge","Body","Description","GroupName"],"mappings":";;;;;;;;AA8BA,MAAMA,UAAkD,GAAG;AACzDC,EAAAA,EAAE,EAAE,IAAI;AACRC,EAAAA,EAAE,EAAE,IAAI;AACRC,EAAAA,EAAE,EAAE,IAAI;AACRC,EAAAA,SAAS,EAAE,GAAG;AACdC,EAAAA,SAAS,EAAE,GAAG;AACdC,EAAAA,IAAI,EAAE,GAAG;AACTC,EAAAA,WAAW,EAAE,GAAG;AAChBC,EAAAA,SAAS,EAAE,GAAA;AACb,CAAC,CAAA;AAED,MAAMC,aAAa,GAAIC,OAA0B,IAC/CA,OAAO,KAAK,WAAW,IAAIA,OAAO,KAAK,MAAM,IAAIA,OAAO,KAAK,aAAa,CAAA;AAE/DC,MAAAA,UAAU,GAAGC,IAAA,IAQH;EAAA,IARI;IACzBF,OAAO;IACPG,MAAM;IACNC,EAAE;IACFC,SAAS;IACTC,QAAQ;IACRC,UAAU;IACV,GAAGC,IAAAA;AACY,GAAC,GAAAN,IAAA,CAAA;AAChB,EAAA,MAAMO,SAAS,GAAGL,EAAE,IAAId,UAAU,CAACU,OAAO,CAAC,CAAA;EAE3C,oBACEU,cAAA,CAACD,SAAS,EAAA;IACRJ,SAAS,EAAEM,EAAE,CACXC,iBAAM,CAACC,IAAI,EACXD,iBAAM,CAACZ,OAAO,CAAC,EACfG,MAAM,KAAK,UAAU,IAAIJ,aAAa,CAACC,OAAO,CAAC,IAAIY,iBAAM,CAACE,QAAQ,EAClET,SACF,CAAE;IACF,aAAaE,EAAAA,UAAU,EAAEM,IAAK;AAAA,IAAA,GAC1BL,IAAI;AAAAF,IAAAA,QAAA,EAEPA,QAAAA;AAAQ,GACA,CAAC,CAAA;AAEhB,EAAC;MAIYS,EAAE,GAAIC,KAAqB,iBACtCN,cAAA,CAACT,UAAU,EAAA;AAAA,EAAA,GAAKe,KAAK;AAAEhB,EAAAA,OAAO,EAAC,IAAA;AAAI,CAAE,EACtC;MAEYiB,EAAE,GAAID,KAAqB,iBACtCN,cAAA,CAACT,UAAU,EAAA;AAAA,EAAA,GAAKe,KAAK;AAAEhB,EAAAA,OAAO,EAAC,IAAA;AAAI,CAAE,EACtC;MAEYkB,EAAE,GAAIF,KAAqB,iBACtCN,cAAA,CAACT,UAAU,EAAA;AAAA,EAAA,GAAKe,KAAK;AAAEhB,EAAAA,OAAO,EAAC,IAAA;AAAI,CAAE,EACtC;MAEYmB,SAAS,GAAIH,KAAqB,iBAC7CN,cAAA,CAACT,UAAU,EAAA;AAAA,EAAA,GAAKe,KAAK;AAAEhB,EAAAA,OAAO,EAAC,WAAA;AAAW,CAAE,EAC7C;MAEYoB,IAAI,GAAIJ,KAAqB,iBACxCN,cAAA,CAACT,UAAU,EAAA;AAAA,EAAA,GAAKe,KAAK;AAAEhB,EAAAA,OAAO,EAAC,MAAA;AAAM,CAAE,EACxC;MAEYqB,WAAW,GAAIL,KAAqB,iBAC/CN,cAAA,CAACT,UAAU,EAAA;AAAA,EAAA,GAAKe,KAAK;AAAEhB,EAAAA,OAAO,EAAC,aAAA;AAAa,CAAE,EAC/C;MAEYsB,SAAS,GAAIN,KAAqB,iBAC7CN,cAAA,CAACT,UAAU,EAAA;AAAA,EAAA,GAAKe,KAAK;AAAEhB,EAAAA,OAAO,EAAC,WAAA;AAAW,CAAE;;;;;;;;;;;"}
|
|
@@ -14,6 +14,7 @@ const Accordion = _ref => {
|
|
|
14
14
|
onExpandedChange,
|
|
15
15
|
children,
|
|
16
16
|
className,
|
|
17
|
+
dataTestId,
|
|
17
18
|
...rest
|
|
18
19
|
} = _ref;
|
|
19
20
|
const [uncontrolledExpanded, setUncontrolledExpanded] = useState(defaultExpanded);
|
|
@@ -28,6 +29,7 @@ const Accordion = _ref => {
|
|
|
28
29
|
className: cn(styles.accordion, className, {
|
|
29
30
|
[styles.borderless]: !border
|
|
30
31
|
}),
|
|
32
|
+
"data-testid": dataTestId?.root,
|
|
31
33
|
...rest,
|
|
32
34
|
children: [/*#__PURE__*/jsxs("button", {
|
|
33
35
|
type: "button",
|
|
@@ -35,8 +37,10 @@ const Accordion = _ref => {
|
|
|
35
37
|
"aria-expanded": isExpanded,
|
|
36
38
|
"aria-controls": contentId,
|
|
37
39
|
onClick: handleToggle,
|
|
40
|
+
"data-testid": dataTestId?.header,
|
|
38
41
|
children: [/*#__PURE__*/jsx("span", {
|
|
39
42
|
className: styles.title,
|
|
43
|
+
"data-testid": dataTestId?.title,
|
|
40
44
|
children: title
|
|
41
45
|
}), /*#__PURE__*/jsx("span", {
|
|
42
46
|
className: styles.chevron,
|
|
@@ -52,6 +56,7 @@ const Accordion = _ref => {
|
|
|
52
56
|
className: styles.content,
|
|
53
57
|
children: /*#__PURE__*/jsx("div", {
|
|
54
58
|
className: styles.contentInner,
|
|
59
|
+
"data-testid": dataTestId?.content,
|
|
55
60
|
children: children
|
|
56
61
|
})
|
|
57
62
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Accordion.mjs","sources":["../../../src/accordion/Accordion.tsx"],"sourcesContent":["import {\n useId,\n useState,\n type ComponentPropsWithoutRef,\n type ReactNode,\n} from 'react'\n\nimport { IconChevronDown, IconChevronUp } from '../icons'\nimport cn from 'classnames'\n\nimport styles from './Accordion.module.css'\n\nexport type AccordionProps = Omit<ComponentPropsWithoutRef<'div'>, 'title'> & {\n title: ReactNode\n border?: boolean\n defaultExpanded?: boolean\n expanded?: boolean\n onExpandedChange?: (expanded: boolean) => void\n}\n\nexport const Accordion = ({\n title,\n border = true,\n defaultExpanded = false,\n expanded,\n onExpandedChange,\n children,\n className,\n ...rest\n}: AccordionProps) => {\n const [uncontrolledExpanded, setUncontrolledExpanded] =\n useState(defaultExpanded)\n const isExpanded = expanded ?? uncontrolledExpanded\n const contentId = useId()\n\n const handleToggle = () => {\n const next = !isExpanded\n if (expanded == null) setUncontrolledExpanded(next)\n onExpandedChange?.(next)\n }\n\n return (\n <div\n className={cn(styles.accordion, className, {\n [styles.borderless]: !border,\n })}\n {...rest}\n >\n <button\n type='button'\n className={styles.header}\n aria-expanded={isExpanded}\n aria-controls={contentId}\n onClick={handleToggle}\n >\n <span className={styles.title}
|
|
1
|
+
{"version":3,"file":"Accordion.mjs","sources":["../../../src/accordion/Accordion.tsx"],"sourcesContent":["import {\n useId,\n useState,\n type ComponentPropsWithoutRef,\n type ReactNode,\n} from 'react'\n\nimport { IconChevronDown, IconChevronUp } from '../icons'\nimport cn from 'classnames'\n\nimport styles from './Accordion.module.css'\n\nexport type AccordionDataTestId = {\n root?: string\n header?: string\n title?: string\n content?: string\n}\n\nexport type AccordionProps = Omit<ComponentPropsWithoutRef<'div'>, 'title'> & {\n title: ReactNode\n border?: boolean\n defaultExpanded?: boolean\n expanded?: boolean\n onExpandedChange?: (expanded: boolean) => void\n dataTestId?: AccordionDataTestId\n}\n\nexport const Accordion = ({\n title,\n border = true,\n defaultExpanded = false,\n expanded,\n onExpandedChange,\n children,\n className,\n dataTestId,\n ...rest\n}: AccordionProps) => {\n const [uncontrolledExpanded, setUncontrolledExpanded] =\n useState(defaultExpanded)\n const isExpanded = expanded ?? uncontrolledExpanded\n const contentId = useId()\n\n const handleToggle = () => {\n const next = !isExpanded\n if (expanded == null) setUncontrolledExpanded(next)\n onExpandedChange?.(next)\n }\n\n return (\n <div\n className={cn(styles.accordion, className, {\n [styles.borderless]: !border,\n })}\n data-testid={dataTestId?.root}\n {...rest}\n >\n <button\n type='button'\n className={styles.header}\n aria-expanded={isExpanded}\n aria-controls={contentId}\n onClick={handleToggle}\n data-testid={dataTestId?.header}\n >\n <span className={styles.title} data-testid={dataTestId?.title}>\n {title}\n </span>\n <span className={styles.chevron} aria-hidden='true'>\n {isExpanded ? <IconChevronUp /> : <IconChevronDown />}\n </span>\n </button>\n <div\n id={contentId}\n className={cn(styles.contentWrapper, {\n [styles.expanded]: isExpanded,\n })}\n >\n <div className={styles.content}>\n <div\n className={styles.contentInner}\n data-testid={dataTestId?.content}\n >\n {children}\n </div>\n </div>\n </div>\n </div>\n )\n}\n\nAccordion.displayName = 'Accordion'\n"],"names":["Accordion","_ref","title","border","defaultExpanded","expanded","onExpandedChange","children","className","dataTestId","rest","uncontrolledExpanded","setUncontrolledExpanded","useState","isExpanded","contentId","useId","handleToggle","next","_jsxs","cn","styles","accordion","borderless","root","type","header","onClick","_jsx","chevron","IconChevronUp","IconChevronDown","id","contentWrapper","content","contentInner","displayName"],"mappings":";;;;;;;AA4BaA,MAAAA,SAAS,GAAGC,IAAA,IAUH;EAAA,IAVI;IACxBC,KAAK;AACLC,IAAAA,MAAM,GAAG,IAAI;AACbC,IAAAA,eAAe,GAAG,KAAK;IACvBC,QAAQ;IACRC,gBAAgB;IAChBC,QAAQ;IACRC,SAAS;IACTC,UAAU;IACV,GAAGC,IAAAA;AACW,GAAC,GAAAT,IAAA,CAAA;EACf,MAAM,CAACU,oBAAoB,EAAEC,uBAAuB,CAAC,GACnDC,QAAQ,CAACT,eAAe,CAAC,CAAA;AAC3B,EAAA,MAAMU,UAAU,GAAGT,QAAQ,IAAIM,oBAAoB,CAAA;AACnD,EAAA,MAAMI,SAAS,GAAGC,KAAK,EAAE,CAAA;EAEzB,MAAMC,YAAY,GAAGA,MAAM;IACzB,MAAMC,IAAI,GAAG,CAACJ,UAAU,CAAA;AACxB,IAAA,IAAIT,QAAQ,IAAI,IAAI,EAAEO,uBAAuB,CAACM,IAAI,CAAC,CAAA;IACnDZ,gBAAgB,GAAGY,IAAI,CAAC,CAAA;GACzB,CAAA;AAED,EAAA,oBACEC,IAAA,CAAA,KAAA,EAAA;IACEX,SAAS,EAAEY,EAAE,CAACC,MAAM,CAACC,SAAS,EAAEd,SAAS,EAAE;AACzC,MAAA,CAACa,MAAM,CAACE,UAAU,GAAG,CAACpB,MAAAA;AACxB,KAAC,CAAE;IACH,aAAaM,EAAAA,UAAU,EAAEe,IAAK;AAAA,IAAA,GAC1Bd,IAAI;AAAAH,IAAAA,QAAA,gBAERY,IAAA,CAAA,QAAA,EAAA;AACEM,MAAAA,IAAI,EAAC,QAAQ;MACbjB,SAAS,EAAEa,MAAM,CAACK,MAAO;AACzB,MAAA,eAAA,EAAeZ,UAAW;AAC1B,MAAA,eAAA,EAAeC,SAAU;AACzBY,MAAAA,OAAO,EAAEV,YAAa;MACtB,aAAaR,EAAAA,UAAU,EAAEiB,MAAO;AAAAnB,MAAAA,QAAA,gBAEhCqB,GAAA,CAAA,MAAA,EAAA;QAAMpB,SAAS,EAAEa,MAAM,CAACnB,KAAM;QAAC,aAAaO,EAAAA,UAAU,EAAEP,KAAM;AAAAK,QAAAA,QAAA,EAC3DL,KAAAA;OACG,CAAC,eACP0B,GAAA,CAAA,MAAA,EAAA;QAAMpB,SAAS,EAAEa,MAAM,CAACQ,OAAQ;AAAC,QAAA,aAAA,EAAY,MAAM;AAAAtB,QAAAA,QAAA,EAChDO,UAAU,gBAAGc,GAAA,CAACE,aAAa,EAAE,EAAA,CAAC,gBAAGF,GAAA,CAACG,eAAe,EAAE,EAAA,CAAA;AAAC,OACjD,CAAC,CAAA;KACD,CAAC,eACTH,GAAA,CAAA,KAAA,EAAA;AACEI,MAAAA,EAAE,EAAEjB,SAAU;AACdP,MAAAA,SAAS,EAAEY,EAAE,CAACC,MAAM,CAACY,cAAc,EAAE;QACnC,CAACZ,MAAM,CAAChB,QAAQ,GAAGS,UAAAA;AACrB,OAAC,CAAE;AAAAP,MAAAA,QAAA,eAEHqB,GAAA,CAAA,KAAA,EAAA;QAAKpB,SAAS,EAAEa,MAAM,CAACa,OAAQ;AAAA3B,QAAAA,QAAA,eAC7BqB,GAAA,CAAA,KAAA,EAAA;UACEpB,SAAS,EAAEa,MAAM,CAACc,YAAa;UAC/B,aAAa1B,EAAAA,UAAU,EAAEyB,OAAQ;AAAA3B,UAAAA,QAAA,EAEhCA,QAAAA;SACE,CAAA;OACF,CAAA;AAAC,KACH,CAAC,CAAA;AAAA,GACH,CAAC,CAAA;AAEV,EAAC;AAEDP,SAAS,CAACoC,WAAW,GAAG,WAAW;;;;"}
|
package/dist/esm/badge/Badge.mjs
CHANGED
|
@@ -7,14 +7,17 @@ const Badge = _ref => {
|
|
|
7
7
|
icon,
|
|
8
8
|
className,
|
|
9
9
|
children,
|
|
10
|
+
dataTestId,
|
|
10
11
|
...rest
|
|
11
12
|
} = _ref;
|
|
12
13
|
return /*#__PURE__*/jsxs("span", {
|
|
13
14
|
className: cn(styles.badge, className),
|
|
15
|
+
"data-testid": dataTestId?.root,
|
|
14
16
|
...rest,
|
|
15
17
|
children: [icon && /*#__PURE__*/jsx("span", {
|
|
16
18
|
className: styles.icon,
|
|
17
19
|
"aria-hidden": "true",
|
|
20
|
+
"data-testid": dataTestId?.icon,
|
|
18
21
|
children: icon
|
|
19
22
|
}), children]
|
|
20
23
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Badge.mjs","sources":["../../../src/badge/Badge.tsx"],"sourcesContent":["import cn from 'classnames'\nimport type { HTMLAttributes, ReactNode } from 'react'\nimport styles from './Badge.module.css'\n\nexport type BadgeProps = HTMLAttributes<HTMLSpanElement> & {\n /** Optional glyph before the label. Omitted entirely when not passed. */\n icon?: ReactNode\n}\n\nexport const Badge = ({
|
|
1
|
+
{"version":3,"file":"Badge.mjs","sources":["../../../src/badge/Badge.tsx"],"sourcesContent":["import cn from 'classnames'\nimport type { HTMLAttributes, ReactNode } from 'react'\nimport styles from './Badge.module.css'\n\nexport type BadgeDataTestId = {\n root?: string\n icon?: string\n}\n\nexport type BadgeProps = HTMLAttributes<HTMLSpanElement> & {\n /** Optional glyph before the label. Omitted entirely when not passed. */\n icon?: ReactNode\n dataTestId?: BadgeDataTestId\n}\n\nexport const Badge = ({\n icon,\n className,\n children,\n dataTestId,\n ...rest\n}: BadgeProps) => (\n <span\n className={cn(styles.badge, 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 )}\n {children}\n </span>\n)\n"],"names":["Badge","_ref","icon","className","children","dataTestId","rest","_jsxs","cn","styles","badge","root","_jsx"],"mappings":";;;;AAeO,MAAMA,KAAK,GAAGC,IAAA,IAAA;EAAA,IAAC;IACpBC,IAAI;IACJC,SAAS;IACTC,QAAQ;IACRC,UAAU;IACV,GAAGC,IAAAA;AACO,GAAC,GAAAL,IAAA,CAAA;AAAA,EAAA,oBACXM,IAAA,CAAA,MAAA,EAAA;IACEJ,SAAS,EAAEK,EAAE,CAACC,MAAM,CAACC,KAAK,EAAEP,SAAS,CAAE;IACvC,aAAaE,EAAAA,UAAU,EAAEM,IAAK;AAAA,IAAA,GAC1BL,IAAI;IAAAF,QAAA,EAAA,CAEPF,IAAI,iBACHU,GAAA,CAAA,MAAA,EAAA;MACET,SAAS,EAAEM,MAAM,CAACP,IAAK;AACvB,MAAA,aAAA,EAAY,MAAM;MAClB,aAAaG,EAAAA,UAAU,EAAEH,IAAK;AAAAE,MAAAA,QAAA,EAE7BF,IAAAA;KACG,CACP,EACAE,QAAQ,CAAA;AAAA,GACL,CAAC,CAAA;AAAA;;;;"}
|
|
@@ -9,28 +9,34 @@ const Banner = _ref => {
|
|
|
9
9
|
description,
|
|
10
10
|
action,
|
|
11
11
|
className,
|
|
12
|
+
dataTestId,
|
|
12
13
|
...rest
|
|
13
14
|
} = _ref;
|
|
14
15
|
return /*#__PURE__*/jsxs("div", {
|
|
15
16
|
className: cn(styles.banner, className),
|
|
17
|
+
"data-testid": dataTestId?.root,
|
|
16
18
|
...rest,
|
|
17
19
|
children: [/*#__PURE__*/jsxs("div", {
|
|
18
20
|
className: styles.content,
|
|
19
21
|
children: [icon ? /*#__PURE__*/jsx("span", {
|
|
20
22
|
className: styles.icon,
|
|
23
|
+
"data-testid": dataTestId?.icon,
|
|
21
24
|
children: icon
|
|
22
25
|
}) : null, /*#__PURE__*/jsxs("div", {
|
|
23
26
|
className: styles.text,
|
|
24
27
|
children: [/*#__PURE__*/jsx("p", {
|
|
25
28
|
className: styles.title,
|
|
29
|
+
"data-testid": dataTestId?.title,
|
|
26
30
|
children: title
|
|
27
31
|
}), description ? /*#__PURE__*/jsx("p", {
|
|
28
32
|
className: styles.description,
|
|
33
|
+
"data-testid": dataTestId?.description,
|
|
29
34
|
children: description
|
|
30
35
|
}) : null]
|
|
31
36
|
})]
|
|
32
37
|
}), action ? /*#__PURE__*/jsx("div", {
|
|
33
38
|
className: styles.action,
|
|
39
|
+
"data-testid": dataTestId?.action,
|
|
34
40
|
children: action
|
|
35
41
|
}) : null]
|
|
36
42
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Banner.mjs","sources":["../../../src/banner/Banner.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ReactNode } from 'react'\n\nimport cn from 'classnames'\n\nimport styles from './Banner.module.css'\n\nexport type BannerProps = ComponentPropsWithoutRef<'div'> & {\n icon?: ReactNode\n title: ReactNode\n description?: ReactNode\n action?: ReactNode\n}\n\nexport const Banner = ({\n icon,\n title,\n description,\n action,\n className,\n ...rest\n}: BannerProps) => (\n <div
|
|
1
|
+
{"version":3,"file":"Banner.mjs","sources":["../../../src/banner/Banner.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ReactNode } from 'react'\n\nimport cn from 'classnames'\n\nimport styles from './Banner.module.css'\n\nexport type BannerDataTestId = {\n root?: string\n icon?: string\n title?: string\n description?: string\n action?: string\n}\n\nexport type BannerProps = ComponentPropsWithoutRef<'div'> & {\n icon?: ReactNode\n title: ReactNode\n description?: ReactNode\n action?: ReactNode\n dataTestId?: BannerDataTestId\n}\n\nexport const Banner = ({\n icon,\n title,\n description,\n action,\n className,\n dataTestId,\n ...rest\n}: BannerProps) => (\n <div\n className={cn(styles.banner, className)}\n data-testid={dataTestId?.root}\n {...rest}\n >\n <div className={styles.content}>\n {icon ? (\n <span className={styles.icon} data-testid={dataTestId?.icon}>\n {icon}\n </span>\n ) : null}\n <div className={styles.text}>\n <p className={styles.title} data-testid={dataTestId?.title}>\n {title}\n </p>\n {description ? (\n <p\n className={styles.description}\n data-testid={dataTestId?.description}\n >\n {description}\n </p>\n ) : null}\n </div>\n </div>\n {action ? (\n <div className={styles.action} data-testid={dataTestId?.action}>\n {action}\n </div>\n ) : null}\n </div>\n)\n\nBanner.displayName = 'Banner'\n"],"names":["Banner","_ref","icon","title","description","action","className","dataTestId","rest","_jsxs","cn","styles","banner","root","children","content","_jsx","text","displayName"],"mappings":";;;;AAsBO,MAAMA,MAAM,GAAGC,IAAA,IAAA;EAAA,IAAC;IACrBC,IAAI;IACJC,KAAK;IACLC,WAAW;IACXC,MAAM;IACNC,SAAS;IACTC,UAAU;IACV,GAAGC,IAAAA;AACQ,GAAC,GAAAP,IAAA,CAAA;AAAA,EAAA,oBACZQ,IAAA,CAAA,KAAA,EAAA;IACEH,SAAS,EAAEI,EAAE,CAACC,MAAM,CAACC,MAAM,EAAEN,SAAS,CAAE;IACxC,aAAaC,EAAAA,UAAU,EAAEM,IAAK;AAAA,IAAA,GAC1BL,IAAI;AAAAM,IAAAA,QAAA,gBAERL,IAAA,CAAA,KAAA,EAAA;MAAKH,SAAS,EAAEK,MAAM,CAACI,OAAQ;MAAAD,QAAA,EAAA,CAC5BZ,IAAI,gBACHc,GAAA,CAAA,MAAA,EAAA;QAAMV,SAAS,EAAEK,MAAM,CAACT,IAAK;QAAC,aAAaK,EAAAA,UAAU,EAAEL,IAAK;AAAAY,QAAAA,QAAA,EACzDZ,IAAAA;AAAI,OACD,CAAC,GACL,IAAI,eACRO,IAAA,CAAA,KAAA,EAAA;QAAKH,SAAS,EAAEK,MAAM,CAACM,IAAK;AAAAH,QAAAA,QAAA,gBAC1BE,GAAA,CAAA,GAAA,EAAA;UAAGV,SAAS,EAAEK,MAAM,CAACR,KAAM;UAAC,aAAaI,EAAAA,UAAU,EAAEJ,KAAM;AAAAW,UAAAA,QAAA,EACxDX,KAAAA;AAAK,SACL,CAAC,EACHC,WAAW,gBACVY,GAAA,CAAA,GAAA,EAAA;UACEV,SAAS,EAAEK,MAAM,CAACP,WAAY;UAC9B,aAAaG,EAAAA,UAAU,EAAEH,WAAY;AAAAU,UAAAA,QAAA,EAEpCV,WAAAA;SACA,CAAC,GACF,IAAI,CAAA;AAAA,OACL,CAAC,CAAA;AAAA,KACH,CAAC,EACLC,MAAM,gBACLW,GAAA,CAAA,KAAA,EAAA;MAAKV,SAAS,EAAEK,MAAM,CAACN,MAAO;MAAC,aAAaE,EAAAA,UAAU,EAAEF,MAAO;AAAAS,MAAAA,QAAA,EAC5DT,MAAAA;KACE,CAAC,GACJ,IAAI,CAAA;AAAA,GACL,CAAC,CAAA;AAAA,EACP;AAEDL,MAAM,CAACkB,WAAW,GAAG,QAAQ;;;;"}
|
|
@@ -14,6 +14,7 @@ const Button = _ref => {
|
|
|
14
14
|
disabled = false,
|
|
15
15
|
iconLeft,
|
|
16
16
|
iconRight,
|
|
17
|
+
dataTestId,
|
|
17
18
|
...rest
|
|
18
19
|
} = _ref;
|
|
19
20
|
return /*#__PURE__*/jsxs("button", {
|
|
@@ -21,6 +22,7 @@ const Button = _ref => {
|
|
|
21
22
|
disabled: disabled || loading,
|
|
22
23
|
"aria-busy": loading || undefined,
|
|
23
24
|
className: cn(styles.button, styles[variant], styles[size], loading && styles.loading, className),
|
|
25
|
+
"data-testid": dataTestId?.root,
|
|
24
26
|
...rest,
|
|
25
27
|
children: [loading ? /*#__PURE__*/jsx(IconLoaderCircle, {
|
|
26
28
|
className: styles.spinner,
|
|
@@ -28,13 +30,16 @@ const Button = _ref => {
|
|
|
28
30
|
}) : iconLeft != null && /*#__PURE__*/jsx("span", {
|
|
29
31
|
className: styles.icon,
|
|
30
32
|
"aria-hidden": "true",
|
|
33
|
+
"data-testid": dataTestId?.iconLeft,
|
|
31
34
|
children: iconLeft
|
|
32
35
|
}), /*#__PURE__*/jsx("span", {
|
|
33
36
|
className: styles.content,
|
|
37
|
+
"data-testid": dataTestId?.content,
|
|
34
38
|
children: children
|
|
35
39
|
}), !loading && iconRight != null ? /*#__PURE__*/jsx("span", {
|
|
36
40
|
className: styles.icon,
|
|
37
41
|
"aria-hidden": "true",
|
|
42
|
+
"data-testid": dataTestId?.iconRight,
|
|
38
43
|
children: iconRight
|
|
39
44
|
}) : null]
|
|
40
45
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.mjs","sources":["../../../src/button/Button.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes, ReactNode } from 'react'\n\nimport cn from 'classnames'\n\nimport { IconLoaderCircle } from '../icons'\nimport styles from './Button.module.css'\n\nexport type ButtonVariant = 'primary' | 'outline' | 'subtle' | 'ghost' | 'error'\n\nexport type ButtonSize = 'big' | 'small'\n\nexport type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {\n variant?: ButtonVariant\n size?: ButtonSize\n loading?: boolean\n iconLeft?: ReactNode\n iconRight?: ReactNode\n}\n\nexport const Button = ({\n className,\n children,\n type = 'button',\n variant = 'primary',\n size = 'big',\n loading = false,\n disabled = false,\n iconLeft,\n iconRight,\n ...rest\n}: ButtonProps) => (\n <button\n type={type}\n disabled={disabled || loading}\n aria-busy={loading || undefined}\n className={cn(\n styles.button,\n styles[variant],\n styles[size],\n loading && styles.loading,\n className,\n )}\n {...rest}\n >\n {loading ? (\n <IconLoaderCircle className={styles.spinner} aria-hidden='true' />\n ) : (\n iconLeft != null && (\n <span
|
|
1
|
+
{"version":3,"file":"Button.mjs","sources":["../../../src/button/Button.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes, ReactNode } from 'react'\n\nimport cn from 'classnames'\n\nimport { IconLoaderCircle } from '../icons'\nimport styles from './Button.module.css'\n\nexport type ButtonVariant = 'primary' | 'outline' | 'subtle' | 'ghost' | 'error'\n\nexport type ButtonSize = 'big' | 'small'\n\nexport type ButtonDataTestId = {\n root?: string\n iconLeft?: string\n iconRight?: string\n content?: string\n}\n\nexport type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {\n variant?: ButtonVariant\n size?: ButtonSize\n loading?: boolean\n iconLeft?: ReactNode\n iconRight?: ReactNode\n dataTestId?: ButtonDataTestId\n}\n\nexport const Button = ({\n className,\n children,\n type = 'button',\n variant = 'primary',\n size = 'big',\n loading = false,\n disabled = false,\n iconLeft,\n iconRight,\n dataTestId,\n ...rest\n}: ButtonProps) => (\n <button\n type={type}\n disabled={disabled || loading}\n aria-busy={loading || undefined}\n className={cn(\n styles.button,\n styles[variant],\n styles[size],\n loading && styles.loading,\n className,\n )}\n data-testid={dataTestId?.root}\n {...rest}\n >\n {loading ? (\n <IconLoaderCircle className={styles.spinner} aria-hidden='true' />\n ) : (\n iconLeft != null && (\n <span\n className={styles.icon}\n aria-hidden='true'\n data-testid={dataTestId?.iconLeft}\n >\n {iconLeft}\n </span>\n )\n )}\n <span className={styles.content} data-testid={dataTestId?.content}>\n {children}\n </span>\n {!loading && iconRight != null ? (\n <span\n className={styles.icon}\n aria-hidden='true'\n data-testid={dataTestId?.iconRight}\n >\n {iconRight}\n </span>\n ) : null}\n </button>\n)\n"],"names":["Button","_ref","className","children","type","variant","size","loading","disabled","iconLeft","iconRight","dataTestId","rest","_jsxs","undefined","cn","styles","button","root","_jsx","IconLoaderCircle","spinner","icon","content"],"mappings":";;;;;AA2BO,MAAMA,MAAM,GAAGC,IAAA,IAAA;EAAA,IAAC;IACrBC,SAAS;IACTC,QAAQ;AACRC,IAAAA,IAAI,GAAG,QAAQ;AACfC,IAAAA,OAAO,GAAG,SAAS;AACnBC,IAAAA,IAAI,GAAG,KAAK;AACZC,IAAAA,OAAO,GAAG,KAAK;AACfC,IAAAA,QAAQ,GAAG,KAAK;IAChBC,QAAQ;IACRC,SAAS;IACTC,UAAU;IACV,GAAGC,IAAAA;AACQ,GAAC,GAAAX,IAAA,CAAA;AAAA,EAAA,oBACZY,IAAA,CAAA,QAAA,EAAA;AACET,IAAAA,IAAI,EAAEA,IAAK;IACXI,QAAQ,EAAEA,QAAQ,IAAID,OAAQ;IAC9B,WAAWA,EAAAA,OAAO,IAAIO,SAAU;IAChCZ,SAAS,EAAEa,EAAE,CACXC,MAAM,CAACC,MAAM,EACbD,MAAM,CAACX,OAAO,CAAC,EACfW,MAAM,CAACV,IAAI,CAAC,EACZC,OAAO,IAAIS,MAAM,CAACT,OAAO,EACzBL,SACF,CAAE;IACF,aAAaS,EAAAA,UAAU,EAAEO,IAAK;AAAA,IAAA,GAC1BN,IAAI;AAAAT,IAAAA,QAAA,EAEPI,CAAAA,OAAO,gBACNY,GAAA,CAACC,gBAAgB,EAAA;MAAClB,SAAS,EAAEc,MAAM,CAACK,OAAQ;MAAC,aAAY,EAAA,MAAA;AAAM,KAAE,CAAC,GAElEZ,QAAQ,IAAI,IAAI,iBACdU,GAAA,CAAA,MAAA,EAAA;MACEjB,SAAS,EAAEc,MAAM,CAACM,IAAK;AACvB,MAAA,aAAA,EAAY,MAAM;MAClB,aAAaX,EAAAA,UAAU,EAAEF,QAAS;AAAAN,MAAAA,QAAA,EAEjCM,QAAAA;KACG,CAET,eACDU,GAAA,CAAA,MAAA,EAAA;MAAMjB,SAAS,EAAEc,MAAM,CAACO,OAAQ;MAAC,aAAaZ,EAAAA,UAAU,EAAEY,OAAQ;AAAApB,MAAAA,QAAA,EAC/DA,QAAAA;KACG,CAAC,EACN,CAACI,OAAO,IAAIG,SAAS,IAAI,IAAI,gBAC5BS,GAAA,CAAA,MAAA,EAAA;MACEjB,SAAS,EAAEc,MAAM,CAACM,IAAK;AACvB,MAAA,aAAA,EAAY,MAAM;MAClB,aAAaX,EAAAA,UAAU,EAAED,SAAU;AAAAP,MAAAA,QAAA,EAElCO,SAAAA;KACG,CAAC,GACL,IAAI,CAAA;AAAA,GACF,CAAC,CAAA;AAAA;;;;"}
|
package/dist/esm/card/Card.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.mjs","sources":["../../../src/card/Card.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react'\n\nimport cn from 'classnames'\n\nimport styles from './Card.module.css'\n\nexport type CardProps = HTMLAttributes<HTMLDivElement
|
|
1
|
+
{"version":3,"file":"Card.mjs","sources":["../../../src/card/Card.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react'\n\nimport cn from 'classnames'\n\nimport styles from './Card.module.css'\n\nexport type CardDataTestId = {\n root?: string\n}\n\nexport type CardProps = HTMLAttributes<HTMLDivElement> & {\n dataTestId?: CardDataTestId\n}\n\nexport const Card = ({\n className,\n children,\n dataTestId,\n ...rest\n}: CardProps) => (\n <div\n className={cn(styles.card, className)}\n data-testid={dataTestId?.root}\n {...rest}\n >\n {children}\n </div>\n)\n"],"names":["Card","_ref","className","children","dataTestId","rest","_jsx","cn","styles","card","root"],"mappings":";;;;AAcO,MAAMA,IAAI,GAAGC,IAAA,IAAA;EAAA,IAAC;IACnBC,SAAS;IACTC,QAAQ;IACRC,UAAU;IACV,GAAGC,IAAAA;AACM,GAAC,GAAAJ,IAAA,CAAA;AAAA,EAAA,oBACVK,GAAA,CAAA,KAAA,EAAA;IACEJ,SAAS,EAAEK,EAAE,CAACC,MAAM,CAACC,IAAI,EAAEP,SAAS,CAAE;IACtC,aAAaE,EAAAA,UAAU,EAAEM,IAAK;AAAA,IAAA,GAC1BL,IAAI;AAAAF,IAAAA,QAAA,EAEPA,QAAAA;AAAQ,GACN,CAAC,CAAA;AAAA;;;;"}
|
|
@@ -9,12 +9,14 @@ const Checkbox = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
|
9
9
|
label,
|
|
10
10
|
className,
|
|
11
11
|
disabled,
|
|
12
|
+
dataTestId,
|
|
12
13
|
...rest
|
|
13
14
|
} = _ref;
|
|
14
15
|
return /*#__PURE__*/jsxs("label", {
|
|
15
16
|
className: cn(styles.container, className, {
|
|
16
17
|
[styles.containerDisabled]: disabled
|
|
17
18
|
}),
|
|
19
|
+
"data-testid": dataTestId?.root,
|
|
18
20
|
children: [/*#__PURE__*/jsxs("span", {
|
|
19
21
|
className: styles.control,
|
|
20
22
|
children: [/*#__PURE__*/jsx("input", {
|
|
@@ -22,6 +24,7 @@ const Checkbox = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
|
22
24
|
type: "checkbox",
|
|
23
25
|
className: styles.input,
|
|
24
26
|
disabled: disabled,
|
|
27
|
+
"data-testid": dataTestId?.input,
|
|
25
28
|
...rest
|
|
26
29
|
}), /*#__PURE__*/jsx(IconCheck, {
|
|
27
30
|
className: styles.tick
|
|
@@ -30,6 +33,7 @@ const Checkbox = /*#__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":"Checkbox.mjs","sources":["../../../src/checkbox/Checkbox.tsx"],"sourcesContent":["import { forwardRef, type InputHTMLAttributes, type ReactNode } from 'react'\n\nimport { IconCheck } from '../icons'\nimport cn from 'classnames'\n\nimport styles from './Checkbox.module.css'\n\nexport type CheckboxProps = Omit<\n InputHTMLAttributes<HTMLInputElement>,\n 'type'\n> & {\n label?: ReactNode\n}\n\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(\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 className={styles.input}\n disabled={disabled}\n {...rest}\n />\n <IconCheck className={styles.tick} />\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\nCheckbox.displayName = 'Checkbox'\n"],"names":["Checkbox","forwardRef","_ref","ref","label","className","disabled","rest","_jsxs","cn","styles","container","containerDisabled","children","control","_jsx","type","input","IconCheck","tick","labelDisabled","displayName"],"mappings":";;;;;;
|
|
1
|
+
{"version":3,"file":"Checkbox.mjs","sources":["../../../src/checkbox/Checkbox.tsx"],"sourcesContent":["import { forwardRef, type InputHTMLAttributes, type ReactNode } from 'react'\n\nimport { IconCheck } from '../icons'\nimport cn from 'classnames'\n\nimport styles from './Checkbox.module.css'\n\nexport type CheckboxDataTestId = {\n root?: string\n input?: string\n label?: string\n}\n\nexport type CheckboxProps = Omit<\n InputHTMLAttributes<HTMLInputElement>,\n 'type'\n> & {\n label?: ReactNode\n dataTestId?: CheckboxDataTestId\n}\n\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(\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 className={styles.input}\n disabled={disabled}\n data-testid={dataTestId?.input}\n {...rest}\n />\n <IconCheck className={styles.tick} />\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\nCheckbox.displayName = 'Checkbox'\n"],"names":["Checkbox","forwardRef","_ref","ref","label","className","disabled","dataTestId","rest","_jsxs","cn","styles","container","containerDisabled","root","children","control","_jsx","type","input","IconCheck","tick","labelDisabled","displayName"],"mappings":";;;;;;AAqBO,MAAMA,QAAQ,gBAAGC,UAAU,CAChC,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;QACfb,SAAS,EAAEM,MAAM,CAACQ,KAAM;AACxBb,QAAAA,QAAQ,EAAEA,QAAS;QACnB,aAAaC,EAAAA,UAAU,EAAEY,KAAM;QAAA,GAC3BX,IAAAA;AAAI,OACT,CAAC,eACFS,GAAA,CAACG,SAAS,EAAA;QAACf,SAAS,EAAEM,MAAM,CAACU,IAAAA;AAAK,OAAE,CAAC,CAAA;AAAA,KACjC,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,QAAQ,CAACuB,WAAW,GAAG,UAAU;;;;"}
|
|
@@ -7,10 +7,12 @@ const Counter = _ref => {
|
|
|
7
7
|
variant = 'default',
|
|
8
8
|
className,
|
|
9
9
|
children,
|
|
10
|
+
dataTestId,
|
|
10
11
|
...rest
|
|
11
12
|
} = _ref;
|
|
12
13
|
return /*#__PURE__*/jsx("span", {
|
|
13
14
|
className: cn(styles.counter, styles[variant], className),
|
|
15
|
+
"data-testid": dataTestId?.root,
|
|
14
16
|
...rest,
|
|
15
17
|
children: children
|
|
16
18
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Counter.mjs","sources":["../../../src/counter/Counter.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react'\n\nimport cn from 'classnames'\n\nimport styles from './Counter.module.css'\n\nexport type CounterVariant =\n | 'default'\n | 'neutral'\n | 'error'\n | 'warning'\n | 'action'\n | 'active'\n\nexport type CounterProps = HTMLAttributes<HTMLSpanElement> & {\n variant?: CounterVariant\n}\n\nexport const Counter = ({\n variant = 'default',\n className,\n children,\n ...rest\n}: CounterProps) => (\n <span
|
|
1
|
+
{"version":3,"file":"Counter.mjs","sources":["../../../src/counter/Counter.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react'\n\nimport cn from 'classnames'\n\nimport styles from './Counter.module.css'\n\nexport type CounterVariant =\n | 'default'\n | 'neutral'\n | 'error'\n | 'warning'\n | 'action'\n | 'active'\n\nexport type CounterDataTestId = {\n root?: string\n}\n\nexport type CounterProps = HTMLAttributes<HTMLSpanElement> & {\n variant?: CounterVariant\n dataTestId?: CounterDataTestId\n}\n\nexport const Counter = ({\n variant = 'default',\n className,\n children,\n dataTestId,\n ...rest\n}: CounterProps) => (\n <span\n className={cn(styles.counter, styles[variant], className)}\n data-testid={dataTestId?.root}\n {...rest}\n >\n {children}\n </span>\n)\n"],"names":["Counter","_ref","variant","className","children","dataTestId","rest","_jsx","cn","styles","counter","root"],"mappings":";;;;AAuBO,MAAMA,OAAO,GAAGC,IAAA,IAAA;EAAA,IAAC;AACtBC,IAAAA,OAAO,GAAG,SAAS;IACnBC,SAAS;IACTC,QAAQ;IACRC,UAAU;IACV,GAAGC,IAAAA;AACS,GAAC,GAAAL,IAAA,CAAA;AAAA,EAAA,oBACbM,GAAA,CAAA,MAAA,EAAA;AACEJ,IAAAA,SAAS,EAAEK,EAAE,CAACC,MAAM,CAACC,OAAO,EAAED,MAAM,CAACP,OAAO,CAAC,EAAEC,SAAS,CAAE;IAC1D,aAAaE,EAAAA,UAAU,EAAEM,IAAK;AAAA,IAAA,GAC1BL,IAAI;AAAAF,IAAAA,QAAA,EAEPA,QAAAA;AAAQ,GACL,CAAC,CAAA;AAAA;;;;"}
|
|
@@ -6,10 +6,14 @@ const DataList = _ref => {
|
|
|
6
6
|
let {
|
|
7
7
|
children,
|
|
8
8
|
className,
|
|
9
|
-
divided = false
|
|
9
|
+
divided = false,
|
|
10
|
+
dataTestId,
|
|
11
|
+
...rest
|
|
10
12
|
} = _ref;
|
|
11
13
|
return /*#__PURE__*/jsx("div", {
|
|
12
14
|
className: cn(styles.card, divided && styles.divided, className),
|
|
15
|
+
"data-testid": dataTestId?.root,
|
|
16
|
+
...rest,
|
|
13
17
|
children: children
|
|
14
18
|
});
|
|
15
19
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataList.mjs","sources":["../../../src/data-list/DataList.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\n\nimport cn from 'classnames'\n\nimport styles from './DataList.module.css'\n\nexport type DataListProps = {\n children: ReactNode\n
|
|
1
|
+
{"version":3,"file":"DataList.mjs","sources":["../../../src/data-list/DataList.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ReactNode } from 'react'\n\nimport cn from 'classnames'\n\nimport styles from './DataList.module.css'\n\nexport type DataListDataTestId = {\n root?: string\n}\n\nexport type DataListProps = Omit<\n ComponentPropsWithoutRef<'div'>,\n 'children'\n> & {\n children: ReactNode\n divided?: boolean\n dataTestId?: DataListDataTestId\n}\n\nexport const DataList = ({\n children,\n className,\n divided = false,\n dataTestId,\n ...rest\n}: DataListProps) => (\n <div\n className={cn(styles.card, divided && styles.divided, className)}\n data-testid={dataTestId?.root}\n {...rest}\n >\n {children}\n </div>\n)\n"],"names":["DataList","_ref","children","className","divided","dataTestId","rest","_jsx","cn","styles","card","root"],"mappings":";;;;AAmBO,MAAMA,QAAQ,GAAGC,IAAA,IAAA;EAAA,IAAC;IACvBC,QAAQ;IACRC,SAAS;AACTC,IAAAA,OAAO,GAAG,KAAK;IACfC,UAAU;IACV,GAAGC,IAAAA;AACU,GAAC,GAAAL,IAAA,CAAA;AAAA,EAAA,oBACdM,GAAA,CAAA,KAAA,EAAA;AACEJ,IAAAA,SAAS,EAAEK,EAAE,CAACC,MAAM,CAACC,IAAI,EAAEN,OAAO,IAAIK,MAAM,CAACL,OAAO,EAAED,SAAS,CAAE;IACjE,aAAaE,EAAAA,UAAU,EAAEM,IAAK;AAAA,IAAA,GAC1BL,IAAI;AAAAJ,IAAAA,QAAA,EAEPA,QAAAA;AAAQ,GACN,CAAC,CAAA;AAAA;;;;"}
|
|
@@ -14,19 +14,25 @@ const DataListRow = _ref => {
|
|
|
14
14
|
infoFaint = false,
|
|
15
15
|
description,
|
|
16
16
|
descriptionInfo,
|
|
17
|
-
className
|
|
17
|
+
className,
|
|
18
|
+
dataTestId,
|
|
19
|
+
...rest
|
|
18
20
|
} = _ref;
|
|
19
21
|
return /*#__PURE__*/jsxs("div", {
|
|
20
22
|
className: cn(styles.row, className),
|
|
23
|
+
"data-testid": dataTestId?.root,
|
|
24
|
+
...rest,
|
|
21
25
|
children: [/*#__PURE__*/jsxs("span", {
|
|
22
26
|
className: styles.mainRow,
|
|
23
27
|
children: [/*#__PURE__*/jsxs("span", {
|
|
24
28
|
className: styles.labelGroup,
|
|
25
29
|
children: [icon ? /*#__PURE__*/jsx("span", {
|
|
26
30
|
className: styles.leadingIcon,
|
|
31
|
+
"data-testid": dataTestId?.icon,
|
|
27
32
|
children: icon
|
|
28
33
|
}) : null, /*#__PURE__*/jsx("span", {
|
|
29
34
|
className: styles.label,
|
|
35
|
+
"data-testid": dataTestId?.label,
|
|
30
36
|
children: label
|
|
31
37
|
}), info ? /*#__PURE__*/jsx(Tooltip, {
|
|
32
38
|
content: info,
|
|
@@ -37,6 +43,7 @@ const DataListRow = _ref => {
|
|
|
37
43
|
}) : null]
|
|
38
44
|
}), isChangeValue(value) ? /*#__PURE__*/jsxs("span", {
|
|
39
45
|
className: styles.value,
|
|
46
|
+
"data-testid": dataTestId?.value,
|
|
40
47
|
children: [/*#__PURE__*/jsx("span", {
|
|
41
48
|
className: styles.valueOld,
|
|
42
49
|
children: value.from
|
|
@@ -49,12 +56,14 @@ const DataListRow = _ref => {
|
|
|
49
56
|
})]
|
|
50
57
|
}) : /*#__PURE__*/jsx("span", {
|
|
51
58
|
className: styles.value,
|
|
59
|
+
"data-testid": dataTestId?.value,
|
|
52
60
|
children: value
|
|
53
61
|
})]
|
|
54
62
|
}), description ? /*#__PURE__*/jsxs("span", {
|
|
55
63
|
className: styles.descriptionRow,
|
|
56
64
|
children: [/*#__PURE__*/jsx("span", {
|
|
57
65
|
className: styles.description,
|
|
66
|
+
"data-testid": dataTestId?.description,
|
|
58
67
|
children: description
|
|
59
68
|
}), descriptionInfo ? /*#__PURE__*/jsx(Tooltip, {
|
|
60
69
|
content: descriptionInfo,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataListRow.mjs","sources":["../../../src/data-list/DataListRow.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\n\nimport { IconInfo } from '../icons'\nimport cn from 'classnames'\nimport { Tooltip } from '../tooltip'\n\nimport styles from './DataList.module.css'\n\nexport type DetailRowValue = ReactNode | { from: ReactNode; to: ReactNode }\n\nexport type DetailRowProps = {\n label: ReactNode\n value: DetailRowValue\n icon?: ReactNode\n info?: ReactNode\n infoFaint?: boolean\n description?: ReactNode\n descriptionInfo?: ReactNode\n
|
|
1
|
+
{"version":3,"file":"DataListRow.mjs","sources":["../../../src/data-list/DataListRow.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ReactNode } from 'react'\n\nimport { IconInfo } from '../icons'\nimport cn from 'classnames'\nimport { Tooltip } from '../tooltip'\n\nimport styles from './DataList.module.css'\n\nexport type DetailRowValue = ReactNode | { from: ReactNode; to: ReactNode }\n\nexport type DataListRowDataTestId = {\n root?: string\n label?: string\n value?: string\n icon?: string\n description?: string\n}\n\nexport type DetailRowProps = ComponentPropsWithoutRef<'div'> & {\n label: ReactNode\n value: DetailRowValue\n icon?: ReactNode\n info?: ReactNode\n infoFaint?: boolean\n description?: ReactNode\n descriptionInfo?: ReactNode\n dataTestId?: DataListRowDataTestId\n}\n\nconst isChangeValue = (\n value: DetailRowValue,\n): value is { from: ReactNode; to: ReactNode } =>\n typeof value === 'object' &&\n value !== null &&\n 'from' in value &&\n 'to' in value\n\nexport const DataListRow = ({\n label,\n value,\n icon,\n info,\n infoFaint = false,\n description,\n descriptionInfo,\n className,\n dataTestId,\n ...rest\n}: DetailRowProps) => (\n <div\n className={cn(styles.row, className)}\n data-testid={dataTestId?.root}\n {...rest}\n >\n <span className={styles.mainRow}>\n <span className={styles.labelGroup}>\n {icon ? (\n <span className={styles.leadingIcon} data-testid={dataTestId?.icon}>\n {icon}\n </span>\n ) : null}\n <span className={styles.label} data-testid={dataTestId?.label}>\n {label}\n </span>\n {info ? (\n <Tooltip\n content={info}\n className={cn(styles.info, infoFaint && styles.infoFaint)}\n >\n <IconInfo className={styles.infoIcon} />\n </Tooltip>\n ) : null}\n </span>\n {isChangeValue(value) ? (\n <span className={styles.value} data-testid={dataTestId?.value}>\n <span className={styles.valueOld}>{value.from}</span>\n <span className={styles.valueArrow} aria-hidden='true'>\n →\n </span>\n <span>{value.to}</span>\n </span>\n ) : (\n <span className={styles.value} data-testid={dataTestId?.value}>\n {value}\n </span>\n )}\n </span>\n {description ? (\n <span className={styles.descriptionRow}>\n <span\n className={styles.description}\n data-testid={dataTestId?.description}\n >\n {description}\n </span>\n {descriptionInfo ? (\n <Tooltip content={descriptionInfo} className={styles.info}>\n <IconInfo className={styles.descriptionIcon} />\n </Tooltip>\n ) : null}\n </span>\n ) : null}\n </div>\n)\n"],"names":["isChangeValue","value","DataListRow","_ref","label","icon","info","infoFaint","description","descriptionInfo","className","dataTestId","rest","_jsxs","cn","styles","row","root","children","mainRow","labelGroup","_jsx","leadingIcon","Tooltip","content","IconInfo","infoIcon","valueOld","from","valueArrow","to","descriptionRow","descriptionIcon"],"mappings":"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"}
|