@lidofinance/lido-app-ui 1.7.0 → 1.8.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/icons/TokenIcon.cjs +9 -1
- package/dist/cjs/icons/TokenIcon.cjs.map +1 -1
- package/dist/cjs/icons/components/base/IconEtherscan.cjs +25 -0
- package/dist/cjs/icons/components/base/IconEtherscan.cjs.map +1 -0
- package/dist/cjs/icons/components/base/IconNumber.cjs +28 -0
- package/dist/cjs/icons/components/base/IconNumber.cjs.map +1 -0
- package/dist/cjs/icons/components/base/iconsMap.cjs +5 -1
- package/dist/cjs/icons/components/base/iconsMap.cjs.map +1 -1
- package/dist/cjs/identicon/Identicon.cjs +35 -3
- package/dist/cjs/identicon/Identicon.cjs.map +1 -1
- package/dist/cjs/index.cjs +4 -1
- package/dist/cjs/index.cjs.map +1 -1
- package/dist/cjs/index.css +2 -2
- package/dist/cjs/notification/Notification.cjs +29 -36
- package/dist/cjs/notification/Notification.cjs.map +1 -1
- package/dist/cjs/notification/Notification.module.css.cjs +1 -1
- package/dist/cjs/rich-input/RichInput.cjs +28 -25
- package/dist/cjs/rich-input/RichInput.cjs.map +1 -1
- package/dist/cjs/rich-input/RichInput.module.css.cjs +1 -1
- package/dist/cjs/tag/Tag.cjs +12 -8
- package/dist/cjs/tag/Tag.cjs.map +1 -1
- package/dist/cjs/tag/Tag.module.css.cjs +1 -1
- package/dist/cjs/token-selector/TokenSelector.cjs +6 -6
- package/dist/cjs/token-selector/TokenSelector.cjs.map +1 -1
- package/dist/cjs/tooltip/Tooltip.cjs +85 -48
- package/dist/cjs/tooltip/Tooltip.cjs.map +1 -1
- package/dist/cjs/tooltip/Tooltip.module.css.cjs +1 -1
- package/dist/cjs/tx-status/TxStatus.cjs +2 -2
- package/dist/cjs/tx-status/TxStatus.cjs.map +1 -1
- package/dist/esm/icons/TokenIcon.mjs +9 -1
- package/dist/esm/icons/TokenIcon.mjs.map +1 -1
- package/dist/esm/icons/components/base/IconEtherscan.mjs +21 -0
- package/dist/esm/icons/components/base/IconEtherscan.mjs.map +1 -0
- package/dist/esm/icons/components/base/IconNumber.mjs +24 -0
- package/dist/esm/icons/components/base/IconNumber.mjs.map +1 -0
- package/dist/esm/icons/components/base/iconsMap.mjs +5 -1
- package/dist/esm/icons/components/base/iconsMap.mjs.map +1 -1
- package/dist/esm/identicon/Identicon.mjs +15 -2
- package/dist/esm/identicon/Identicon.mjs.map +1 -1
- package/dist/esm/index.css +2 -2
- package/dist/esm/index.mjs +3 -1
- package/dist/esm/index.mjs.map +1 -1
- package/dist/esm/notification/Notification.mjs +31 -37
- package/dist/esm/notification/Notification.mjs.map +1 -1
- package/dist/esm/notification/Notification.module.css.mjs +1 -1
- package/dist/esm/rich-input/RichInput.mjs +28 -25
- package/dist/esm/rich-input/RichInput.mjs.map +1 -1
- package/dist/esm/rich-input/RichInput.module.css.mjs +1 -1
- package/dist/esm/tag/Tag.mjs +13 -9
- package/dist/esm/tag/Tag.mjs.map +1 -1
- package/dist/esm/tag/Tag.module.css.mjs +1 -1
- package/dist/esm/token-selector/TokenSelector.mjs +6 -6
- package/dist/esm/token-selector/TokenSelector.mjs.map +1 -1
- package/dist/esm/tooltip/Tooltip.mjs +87 -50
- package/dist/esm/tooltip/Tooltip.mjs.map +1 -1
- package/dist/esm/tooltip/Tooltip.module.css.mjs +1 -1
- package/dist/esm/tx-status/TxStatus.mjs +2 -2
- package/dist/esm/tx-status/TxStatus.mjs.map +1 -1
- package/dist/index.css +2 -2
- package/dist/types/icons/TokenIcon.d.ts +1 -1
- package/dist/types/icons/TokenIcon.d.ts.map +1 -1
- package/dist/types/icons/components/base/IconEtherscan.d.ts +3 -0
- package/dist/types/icons/components/base/IconEtherscan.d.ts.map +1 -0
- package/dist/types/icons/components/base/IconNumber.d.ts +3 -0
- package/dist/types/icons/components/base/IconNumber.d.ts.map +1 -0
- package/dist/types/icons/components/base/iconsMap.d.ts +2 -0
- package/dist/types/icons/components/base/iconsMap.d.ts.map +1 -1
- package/dist/types/icons/components/base/index.d.ts +2 -0
- package/dist/types/icons/components/base/index.d.ts.map +1 -1
- package/dist/types/identicon/Identicon.d.ts.map +1 -1
- package/dist/types/notification/Notification.d.ts +5 -11
- package/dist/types/notification/Notification.d.ts.map +1 -1
- package/dist/types/notification/index.d.ts +2 -2
- package/dist/types/notification/index.d.ts.map +1 -1
- package/dist/types/rich-input/RichInput.d.ts +4 -2
- package/dist/types/rich-input/RichInput.d.ts.map +1 -1
- package/dist/types/tag/Tag.d.ts +4 -1
- package/dist/types/tag/Tag.d.ts.map +1 -1
- package/dist/types/tooltip/Tooltip.d.ts +1 -1
- package/dist/types/tooltip/Tooltip.d.ts.map +1 -1
- package/dist/types/tx-status/TxStatus.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -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 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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"}
|
|
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?: boolean\n errorText?: ReactNode\n showMaxButton?: boolean\n onMaxClick?: MouseEventHandler<HTMLSpanElement>\n maxDisabled?: boolean\n maxTooltip?: ReactNode\n dataTestId?: RichInputDataTestId\n}\n\nconst MaxTag = ({\n onClick,\n className,\n disabled,\n ...rest\n}: TagProps & { disabled?: boolean }) => (\n <Tag\n role='button'\n tabIndex={disabled ? -1 : 0}\n aria-disabled={disabled || undefined}\n className={cn(styles.maxTag, disabled && styles.maxTagDisabled, className)}\n onClick={disabled ? undefined : onClick}\n onKeyDown={(event: KeyboardEvent<HTMLSpanElement>) => {\n if (disabled) return\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 errorText,\n showMaxButton = true,\n onMaxClick,\n maxDisabled,\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 = !!error\n const showErrorMessage = !!errorText\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 <div className={cn(styles.root, className)} data-testid={dataTestId?.root}>\n {/*\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 */}\n {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}\n <div\n className={cn(styles.card, hasError && styles.error)}\n onClick={handleRootClick}\n >\n {label != null ? (\n <span className={styles.labelRow}>\n <label\n data-testid={dataTestId?.label}\n className={styles.label}\n htmlFor={inputId}\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 data-testid={dataTestId?.secondaryValue}\n className={styles.secondary}\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 data-testid={dataTestId?.maxButton}\n onClick={onMaxClick}\n disabled={maxDisabled}\n >\n Max\n </MaxTag>\n </Tooltip>\n ) : (\n <MaxTag\n data-testid={dataTestId?.maxButton}\n onClick={onMaxClick}\n disabled={maxDisabled}\n >\n Max\n </MaxTag>\n )\n ) : null}\n </div>\n </div>\n ) : null}\n </div>\n {showErrorMessage ? (\n <div\n id={errorId}\n className={styles.errorMessage}\n data-testid={dataTestId?.error}\n >\n {errorText}\n </div>\n ) : null}\n </div>\n )\n}\n"],"names":["MaxTag","_ref","onClick","className","disabled","rest","_jsx","Tag","role","tabIndex","undefined","cn","styles","maxTag","maxTagDisabled","onKeyDown","event","key","preventDefault","sanitizeDecimal","raw","normalized","replace","firstDot","indexOf","head","slice","tail","RichInput","_ref2","label","labelTooltip","secondaryValue","balance","tokenSelector","error","errorText","showMaxButton","onMaxClick","maxDisabled","maxTooltip","onChange","id","dataTestId","inputProps","inputRef","useRef","fallbackId","useId","inputId","hasError","showErrorMessage","errorId","showMax","hasBottomRow","handleChange","value","rawValue","selectionStart","target","sanitized","removed","length","caret","Math","max","setSelectionRange","handleRootClick","Element","closest","current","focus","_jsxs","root","children","card","labelRow","htmlFor","Tooltip","content","IconInfo","labelTooltipIcon","amountRow","ref","input","inputMode","token","bottomRow","secondary","balanceGroup","position","width","maxButton","errorMessage"],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
const styles = {"root":"RichInput-module_root__2RrAF","error":"RichInput-module_error__iuacN","input":"RichInput-module_input__G69-P","labelRow":"RichInput-module_labelRow__bh0KF","label":"RichInput-module_label__FNaLW","labelTooltipIcon":"RichInput-module_labelTooltipIcon__A4QBG","amountRow":"RichInput-module_amountRow__GWqIG","token":"RichInput-module_token__qSEX1","bottomRow":"RichInput-module_bottomRow__2SnLx","secondary":"RichInput-module_secondary__pftTQ","balanceGroup":"RichInput-module_balanceGroup__q4-lT","balance":"RichInput-module_balance__y-Ukz","errorMessage":"RichInput-module_errorMessage__axdve","maxTag":"RichInput-module_maxTag__gQd1Y"};
|
|
3
|
+
const styles = {"root":"RichInput-module_root__2RrAF","card":"RichInput-module_card__wDqv1","error":"RichInput-module_error__iuacN","input":"RichInput-module_input__G69-P","labelRow":"RichInput-module_labelRow__bh0KF","label":"RichInput-module_label__FNaLW","labelTooltipIcon":"RichInput-module_labelTooltipIcon__A4QBG","amountRow":"RichInput-module_amountRow__GWqIG","token":"RichInput-module_token__qSEX1","bottomRow":"RichInput-module_bottomRow__2SnLx","secondary":"RichInput-module_secondary__pftTQ","balanceGroup":"RichInput-module_balanceGroup__q4-lT","balance":"RichInput-module_balance__y-Ukz","balanceError":"RichInput-module_balanceError__pwA4q","errorMessage":"RichInput-module_errorMessage__axdve","maxTag":"RichInput-module_maxTag__gQd1Y","maxTagDisabled":"RichInput-module_maxTagDisabled__VD8AE"};
|
|
4
4
|
|
|
5
5
|
module.exports = styles;
|
|
6
6
|
//# sourceMappingURL=RichInput.module.css.cjs.map
|
package/dist/cjs/tag/Tag.cjs
CHANGED
|
@@ -10,30 +10,34 @@ const IconCross = require('../icons/components/base/IconCross.cjs');
|
|
|
10
10
|
const Tag = _ref => {
|
|
11
11
|
let {
|
|
12
12
|
variant = 'default',
|
|
13
|
+
active = false,
|
|
13
14
|
icon,
|
|
15
|
+
iconPosition = 'left',
|
|
14
16
|
onClose,
|
|
15
17
|
className,
|
|
16
18
|
children,
|
|
17
19
|
dataTestId,
|
|
18
20
|
...rest
|
|
19
21
|
} = _ref;
|
|
22
|
+
const iconElement = icon != null ? /*#__PURE__*/jsxRuntime.jsx("span", {
|
|
23
|
+
className: Tag_module.icon,
|
|
24
|
+
"aria-hidden": "true",
|
|
25
|
+
"data-testid": dataTestId?.icon,
|
|
26
|
+
children: icon
|
|
27
|
+
}) : null;
|
|
20
28
|
return /*#__PURE__*/jsxRuntime.jsxs("span", {
|
|
21
|
-
className: cn(Tag_module.tag, Tag_module[variant], className),
|
|
29
|
+
className: cn(Tag_module.tag, Tag_module[variant], active && Tag_module.isActive, className),
|
|
22
30
|
"data-testid": dataTestId?.root,
|
|
23
31
|
...rest,
|
|
24
|
-
children: [
|
|
25
|
-
className: Tag_module.icon,
|
|
26
|
-
"aria-hidden": "true",
|
|
27
|
-
"data-testid": dataTestId?.icon,
|
|
28
|
-
children: icon
|
|
29
|
-
}) : null, children, onClose ? /*#__PURE__*/jsxRuntime.jsx("button", {
|
|
32
|
+
children: [iconPosition === 'left' ? iconElement : null, children, iconPosition === 'right' ? iconElement : null, onClose ? /*#__PURE__*/jsxRuntime.jsx("button", {
|
|
30
33
|
type: "button",
|
|
31
34
|
className: Tag_module.closeButton,
|
|
32
35
|
"aria-label": "Remove",
|
|
33
36
|
onClick: onClose,
|
|
34
37
|
"data-testid": dataTestId?.closeButton,
|
|
35
38
|
children: /*#__PURE__*/jsxRuntime.jsx(IconCross.IconCross, {
|
|
36
|
-
"aria-hidden": "true"
|
|
39
|
+
"aria-hidden": "true",
|
|
40
|
+
className: Tag_module.crossIcon
|
|
37
41
|
})
|
|
38
42
|
}) : null]
|
|
39
43
|
});
|
package/dist/cjs/tag/Tag.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tag.cjs","sources":["../../../src/tag/Tag.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react'\n\nimport cn from 'classnames'\n\nimport { IconCross } from '../icons'\nimport styles from './Tag.module.css'\n\nexport type TagVariant =\n | 'default'\n | 'neutral'\n | 'success'\n | 'warning'\n | 'error'\n | 'info'\n | 'active'\n | 'action'\n\nexport type TagDataTestId = {\n root?: string\n icon?: string\n closeButton?: string\n}\n\nexport type TagProps = HTMLAttributes<HTMLSpanElement> & {\n variant?: TagVariant\n icon?: ReactNode\n onClose?: () => void\n dataTestId?: TagDataTestId\n}\n\nexport const Tag = ({\n variant = 'default',\n icon,\n onClose,\n className,\n children,\n dataTestId,\n ...rest\n}: TagProps) =>
|
|
1
|
+
{"version":3,"file":"Tag.cjs","sources":["../../../src/tag/Tag.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react'\n\nimport cn from 'classnames'\n\nimport { IconCross } from '../icons'\nimport styles from './Tag.module.css'\n\nexport type TagVariant =\n | 'default'\n | 'neutral'\n | 'success'\n | 'warning'\n | 'error'\n | 'info'\n | 'active'\n | 'action'\n\nexport type TagDataTestId = {\n root?: string\n icon?: string\n closeButton?: string\n}\n\nexport type TagIconPosition = 'left' | 'right'\n\nexport type TagProps = HTMLAttributes<HTMLSpanElement> & {\n variant?: TagVariant\n active?: boolean\n icon?: ReactNode\n iconPosition?: TagIconPosition\n onClose?: () => void\n dataTestId?: TagDataTestId\n}\n\nexport const Tag = ({\n variant = 'default',\n active = false,\n icon,\n iconPosition = 'left',\n onClose,\n className,\n children,\n dataTestId,\n ...rest\n}: TagProps) => {\n const iconElement =\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\n return (\n <span\n className={cn(\n styles.tag,\n styles[variant],\n active && styles.isActive,\n className,\n )}\n data-testid={dataTestId?.root}\n {...rest}\n >\n {iconPosition === 'left' ? iconElement : null}\n {children}\n {iconPosition === 'right' ? iconElement : null}\n {onClose ? (\n <button\n type='button'\n className={styles.closeButton}\n aria-label='Remove'\n onClick={onClose}\n data-testid={dataTestId?.closeButton}\n >\n <IconCross aria-hidden='true' className={styles.crossIcon} />\n </button>\n ) : null}\n </span>\n )\n}\n"],"names":["Tag","_ref","variant","active","icon","iconPosition","onClose","className","children","dataTestId","rest","iconElement","_jsx","styles","_jsxs","cn","tag","isActive","root","type","closeButton","onClick","IconCross","crossIcon"],"mappings":";;;;;;;;;AAkCaA,MAAAA,GAAG,GAAGC,IAAA,IAUH;EAAA,IAVI;AAClBC,IAAAA,OAAO,GAAG,SAAS;AACnBC,IAAAA,MAAM,GAAG,KAAK;IACdC,IAAI;AACJC,IAAAA,YAAY,GAAG,MAAM;IACrBC,OAAO;IACPC,SAAS;IACTC,QAAQ;IACRC,UAAU;IACV,GAAGC,IAAAA;AACK,GAAC,GAAAT,IAAA,CAAA;AACT,EAAA,MAAMU,WAAW,GACfP,IAAI,IAAI,IAAI,gBACVQ,cAAA,CAAA,MAAA,EAAA;IACEL,SAAS,EAAEM,UAAM,CAACT,IAAK;AACvB,IAAA,aAAA,EAAY,MAAM;IAClB,aAAaK,EAAAA,UAAU,EAAEL,IAAK;AAAAI,IAAAA,QAAA,EAE7BJ,IAAAA;GACG,CAAC,GACL,IAAI,CAAA;AAEV,EAAA,oBACEU,eAAA,CAAA,MAAA,EAAA;AACEP,IAAAA,SAAS,EAAEQ,EAAE,CACXF,UAAM,CAACG,GAAG,EACVH,UAAM,CAACX,OAAO,CAAC,EACfC,MAAM,IAAIU,UAAM,CAACI,QAAQ,EACzBV,SACF,CAAE;IACF,aAAaE,EAAAA,UAAU,EAAES,IAAK;AAAA,IAAA,GAC1BR,IAAI;IAAAF,QAAA,EAAA,CAEPH,YAAY,KAAK,MAAM,GAAGM,WAAW,GAAG,IAAI,EAC5CH,QAAQ,EACRH,YAAY,KAAK,OAAO,GAAGM,WAAW,GAAG,IAAI,EAC7CL,OAAO,gBACNM,cAAA,CAAA,QAAA,EAAA;AACEO,MAAAA,IAAI,EAAC,QAAQ;MACbZ,SAAS,EAAEM,UAAM,CAACO,WAAY;AAC9B,MAAA,YAAA,EAAW,QAAQ;AACnBC,MAAAA,OAAO,EAAEf,OAAQ;MACjB,aAAaG,EAAAA,UAAU,EAAEW,WAAY;MAAAZ,QAAA,eAErCI,cAAA,CAACU,mBAAS,EAAA;AAAC,QAAA,aAAA,EAAY,MAAM;QAACf,SAAS,EAAEM,UAAM,CAACU,SAAAA;OAAY,CAAA;KACtD,CAAC,GACP,IAAI,CAAA;AAAA,GACJ,CAAC,CAAA;AAEX;;;;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
const styles = {"tag":"Tag-module_tag__dpq60","icon":"Tag-module_icon__7I-oU","closeButton":"Tag-module_closeButton__d5-N3","neutral":"Tag-module_neutral__D18sJ","success":"Tag-module_success__JX1nP","warning":"Tag-module_warning__0pWSo","error":"Tag-module_error__o3vZs","info":"Tag-module_info__TJ9YE","active":"Tag-module_active__C6eCL","action":"Tag-module_action__6xjY6"};
|
|
3
|
+
const styles = {"tag":"Tag-module_tag__dpq60","isActive":"Tag-module_isActive__h4p9Z","icon":"Tag-module_icon__7I-oU","crossIcon":"Tag-module_crossIcon__LDgT7","closeButton":"Tag-module_closeButton__d5-N3","neutral":"Tag-module_neutral__D18sJ","success":"Tag-module_success__JX1nP","warning":"Tag-module_warning__0pWSo","error":"Tag-module_error__o3vZs","info":"Tag-module_info__TJ9YE","active":"Tag-module_active__C6eCL","action":"Tag-module_action__6xjY6"};
|
|
4
4
|
|
|
5
5
|
module.exports = styles;
|
|
6
6
|
//# sourceMappingURL=Tag.module.css.cjs.map
|
|
@@ -120,15 +120,15 @@ const TokenSelector = _ref => {
|
|
|
120
120
|
className: cn(TokenSelector_module.option, TokenSelector_module[size], selected && TokenSelector_module.selected),
|
|
121
121
|
onClick: () => handleOptionClick(option),
|
|
122
122
|
"data-testid": option.dataTestId?.root,
|
|
123
|
-
children: [
|
|
124
|
-
className: TokenSelector_module.icon,
|
|
125
|
-
"data-testid": option.dataTestId?.icon,
|
|
126
|
-
children: option.icon
|
|
127
|
-
}) : null, /*#__PURE__*/jsxRuntime.jsxs("span", {
|
|
123
|
+
children: [/*#__PURE__*/jsxRuntime.jsxs("span", {
|
|
128
124
|
className: TokenSelector_module.optionContent,
|
|
129
125
|
children: [/*#__PURE__*/jsxRuntime.jsxs("span", {
|
|
130
126
|
className: TokenSelector_module.optionRow,
|
|
131
|
-
children: [/*#__PURE__*/jsxRuntime.jsx("span", {
|
|
127
|
+
children: [option.icon ? /*#__PURE__*/jsxRuntime.jsx("span", {
|
|
128
|
+
className: TokenSelector_module.icon,
|
|
129
|
+
"data-testid": option.dataTestId?.icon,
|
|
130
|
+
children: option.icon
|
|
131
|
+
}) : null, /*#__PURE__*/jsxRuntime.jsx("span", {
|
|
132
132
|
className: TokenSelector_module.label,
|
|
133
133
|
"data-testid": option.dataTestId?.label,
|
|
134
134
|
children: option.label
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TokenSelector.cjs","sources":["../../../src/token-selector/TokenSelector.tsx"],"sourcesContent":["import {\n useCallback,\n useEffect,\n useRef,\n useState,\n type ComponentPropsWithoutRef,\n type ReactNode,\n} from 'react'\nimport { useOutsideClick } from '../hooks/useOutsideClick'\nimport { IconCheck, IconChevronDown, IconChevronUp } from '../icons'\nimport cn from 'classnames'\nimport styles from './TokenSelector.module.css'\n\nexport type TokenSelectorOptionDataTestId = {\n root?: string\n icon?: string\n label?: string\n secondaryLabel?: string\n description?: string\n}\n\nexport type TokenSelectorOption = {\n value: string\n label: ReactNode\n /** Shown next to `label`, in a muted weight — default size only. */\n secondaryLabel?: ReactNode\n /** Caption line below the label row — default size only. */\n description?: ReactNode\n icon?: ReactNode\n disabled?: boolean\n dataTestId?: TokenSelectorOptionDataTestId\n}\n\nexport type TokenSelectorSize = 'default' | 'small'\n\nexport type TokenSelectorDataTestId = {\n root?: string\n trigger?: string\n panel?: string\n}\n\nexport type TokenSelectorProps = Omit<\n ComponentPropsWithoutRef<'div'>,\n 'onChange'\n> & {\n options: TokenSelectorOption[]\n value?: string\n onChange?: (value: string) => void\n single?: boolean\n size?: TokenSelectorSize\n placeholder?: ReactNode\n dataTestId?: TokenSelectorDataTestId\n}\n\nexport const TokenSelector = ({\n options,\n value,\n onChange,\n single = false,\n size = 'default',\n placeholder = 'Select',\n className,\n dataTestId,\n ...rest\n}: TokenSelectorProps) => {\n const [open, setOpen] = useState(false)\n const rootRef = useRef<HTMLDivElement>(null)\n const triggerRef = useRef<HTMLButtonElement>(null)\n\n const handleClose = useCallback(() => setOpen(false), [])\n useOutsideClick(rootRef, handleClose, open)\n\n useEffect(() => {\n if (!open) return\n\n const handleDocumentKeyDown = (event: KeyboardEvent) => {\n if (event.key !== 'Escape') return\n setOpen(false)\n triggerRef.current?.focus()\n }\n\n document.addEventListener('keydown', handleDocumentKeyDown)\n return () => document.removeEventListener('keydown', handleDocumentKeyDown)\n }, [open])\n\n const selectedOption = options.find((option) => option.value === value)\n\n if (single) {\n return (\n <span\n className={cn(styles.single, styles[size], className)}\n data-testid={dataTestId?.root}\n {...rest}\n >\n {selectedOption?.icon ? (\n <span\n className={styles.icon}\n data-testid={selectedOption.dataTestId?.icon}\n >\n {selectedOption.icon}\n </span>\n ) : null}\n <span\n className={styles.label}\n data-testid={selectedOption?.dataTestId?.label}\n >\n {selectedOption?.label}\n </span>\n {size === 'default' && selectedOption?.secondaryLabel != null ? (\n <span\n className={styles.secondaryLabel}\n data-testid={selectedOption.dataTestId?.secondaryLabel}\n >\n {selectedOption.secondaryLabel}\n </span>\n ) : null}\n </span>\n )\n }\n\n const handleTriggerClick = () => setOpen((prev) => !prev)\n\n const handleOptionClick = (option: TokenSelectorOption) => {\n if (option.disabled) return\n onChange?.(option.value)\n setOpen(false)\n triggerRef.current?.focus()\n }\n\n return (\n <div\n ref={rootRef}\n className={cn(styles.root, className)}\n data-testid={dataTestId?.root}\n {...rest}\n >\n <button\n ref={triggerRef}\n type='button'\n aria-haspopup='listbox'\n aria-expanded={open}\n className={cn(styles.trigger, styles[size], open && styles.open)}\n onClick={handleTriggerClick}\n data-testid={dataTestId?.trigger}\n >\n <span className={styles.content}>\n {selectedOption ? (\n <>\n {selectedOption.icon ? (\n <span\n className={styles.icon}\n data-testid={selectedOption.dataTestId?.icon}\n >\n {selectedOption.icon}\n </span>\n ) : null}\n <span\n className={styles.label}\n data-testid={selectedOption.dataTestId?.label}\n >\n {selectedOption.label}\n </span>\n {size === 'default' && selectedOption.secondaryLabel != null ? (\n <span\n className={styles.secondaryLabel}\n data-testid={selectedOption.dataTestId?.secondaryLabel}\n >\n {selectedOption.secondaryLabel}\n </span>\n ) : null}\n </>\n ) : (\n <span className={styles.placeholder}>{placeholder}</span>\n )}\n </span>\n <span className={styles.chevron} aria-hidden='true'>\n {open ? <IconChevronUp /> : <IconChevronDown />}\n </span>\n </button>\n {open ? (\n <div\n role='listbox'\n className={styles.panel}\n data-testid={dataTestId?.panel}\n >\n <div className={styles.list}>\n {options.map((option) => {\n const selected = option.value === value\n return (\n <button\n key={option.value}\n type='button'\n role='option'\n aria-selected={selected}\n disabled={option.disabled}\n className={cn(\n styles.option,\n styles[size],\n selected && styles.selected,\n )}\n onClick={() => handleOptionClick(option)}\n data-testid={option.dataTestId?.root}\n >\n {option.icon ? (\n <span\n className={styles.icon}\n data-testid={option.dataTestId?.icon}\n >\n {option.icon}\n </span>\n ) : null}\n <span className={styles.optionContent}>\n <span className={styles.optionRow}>\n <span\n className={styles.label}\n data-testid={option.dataTestId?.label}\n >\n {option.label}\n </span>\n {size === 'default' && option.secondaryLabel != null ? (\n <span\n className={styles.secondaryLabel}\n data-testid={option.dataTestId?.secondaryLabel}\n >\n {option.secondaryLabel}\n </span>\n ) : null}\n </span>\n {size === 'default' && option.description != null ? (\n <span\n className={styles.description}\n data-testid={option.dataTestId?.description}\n >\n {option.description}\n </span>\n ) : null}\n </span>\n {size === 'default' && selected ? (\n <span className={styles.indicator} aria-hidden='true'>\n <IconCheck className={styles.checkmark} />\n </span>\n ) : null}\n </button>\n )\n })}\n </div>\n </div>\n ) : null}\n </div>\n )\n}\n"],"names":["TokenSelector","_ref","options","value","onChange","single","size","placeholder","className","dataTestId","rest","open","setOpen","useState","rootRef","useRef","triggerRef","handleClose","useCallback","useOutsideClick","useEffect","handleDocumentKeyDown","event","key","current","focus","document","addEventListener","removeEventListener","selectedOption","find","option","_jsxs","cn","styles","root","children","icon","_jsx","label","secondaryLabel","handleTriggerClick","prev","handleOptionClick","disabled","ref","type","trigger","onClick","content","_Fragment","chevron","IconChevronUp","IconChevronDown","role","panel","list","map","selected","optionContent","optionRow","description","indicator","IconCheck","checkmark"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"TokenSelector.cjs","sources":["../../../src/token-selector/TokenSelector.tsx"],"sourcesContent":["import {\n useCallback,\n useEffect,\n useRef,\n useState,\n type ComponentPropsWithoutRef,\n type ReactNode,\n} from 'react'\nimport { useOutsideClick } from '../hooks/useOutsideClick'\nimport { IconCheck, IconChevronDown, IconChevronUp } from '../icons'\nimport cn from 'classnames'\nimport styles from './TokenSelector.module.css'\n\nexport type TokenSelectorOptionDataTestId = {\n root?: string\n icon?: string\n label?: string\n secondaryLabel?: string\n description?: string\n}\n\nexport type TokenSelectorOption = {\n value: string\n label: ReactNode\n /** Shown next to `label`, in a muted weight — default size only. */\n secondaryLabel?: ReactNode\n /** Caption line below the label row — default size only. */\n description?: ReactNode\n icon?: ReactNode\n disabled?: boolean\n dataTestId?: TokenSelectorOptionDataTestId\n}\n\nexport type TokenSelectorSize = 'default' | 'small'\n\nexport type TokenSelectorDataTestId = {\n root?: string\n trigger?: string\n panel?: string\n}\n\nexport type TokenSelectorProps = Omit<\n ComponentPropsWithoutRef<'div'>,\n 'onChange'\n> & {\n options: TokenSelectorOption[]\n value?: string\n onChange?: (value: string) => void\n single?: boolean\n size?: TokenSelectorSize\n placeholder?: ReactNode\n dataTestId?: TokenSelectorDataTestId\n}\n\nexport const TokenSelector = ({\n options,\n value,\n onChange,\n single = false,\n size = 'default',\n placeholder = 'Select',\n className,\n dataTestId,\n ...rest\n}: TokenSelectorProps) => {\n const [open, setOpen] = useState(false)\n const rootRef = useRef<HTMLDivElement>(null)\n const triggerRef = useRef<HTMLButtonElement>(null)\n\n const handleClose = useCallback(() => setOpen(false), [])\n useOutsideClick(rootRef, handleClose, open)\n\n useEffect(() => {\n if (!open) return\n\n const handleDocumentKeyDown = (event: KeyboardEvent) => {\n if (event.key !== 'Escape') return\n setOpen(false)\n triggerRef.current?.focus()\n }\n\n document.addEventListener('keydown', handleDocumentKeyDown)\n return () => document.removeEventListener('keydown', handleDocumentKeyDown)\n }, [open])\n\n const selectedOption = options.find((option) => option.value === value)\n\n if (single) {\n return (\n <span\n className={cn(styles.single, styles[size], className)}\n data-testid={dataTestId?.root}\n {...rest}\n >\n {selectedOption?.icon ? (\n <span\n className={styles.icon}\n data-testid={selectedOption.dataTestId?.icon}\n >\n {selectedOption.icon}\n </span>\n ) : null}\n <span\n className={styles.label}\n data-testid={selectedOption?.dataTestId?.label}\n >\n {selectedOption?.label}\n </span>\n {size === 'default' && selectedOption?.secondaryLabel != null ? (\n <span\n className={styles.secondaryLabel}\n data-testid={selectedOption.dataTestId?.secondaryLabel}\n >\n {selectedOption.secondaryLabel}\n </span>\n ) : null}\n </span>\n )\n }\n\n const handleTriggerClick = () => setOpen((prev) => !prev)\n\n const handleOptionClick = (option: TokenSelectorOption) => {\n if (option.disabled) return\n onChange?.(option.value)\n setOpen(false)\n triggerRef.current?.focus()\n }\n\n return (\n <div\n ref={rootRef}\n className={cn(styles.root, className)}\n data-testid={dataTestId?.root}\n {...rest}\n >\n <button\n ref={triggerRef}\n type='button'\n aria-haspopup='listbox'\n aria-expanded={open}\n className={cn(styles.trigger, styles[size], open && styles.open)}\n onClick={handleTriggerClick}\n data-testid={dataTestId?.trigger}\n >\n <span className={styles.content}>\n {selectedOption ? (\n <>\n {selectedOption.icon ? (\n <span\n className={styles.icon}\n data-testid={selectedOption.dataTestId?.icon}\n >\n {selectedOption.icon}\n </span>\n ) : null}\n <span\n className={styles.label}\n data-testid={selectedOption.dataTestId?.label}\n >\n {selectedOption.label}\n </span>\n {size === 'default' && selectedOption.secondaryLabel != null ? (\n <span\n className={styles.secondaryLabel}\n data-testid={selectedOption.dataTestId?.secondaryLabel}\n >\n {selectedOption.secondaryLabel}\n </span>\n ) : null}\n </>\n ) : (\n <span className={styles.placeholder}>{placeholder}</span>\n )}\n </span>\n <span className={styles.chevron} aria-hidden='true'>\n {open ? <IconChevronUp /> : <IconChevronDown />}\n </span>\n </button>\n {open ? (\n <div\n role='listbox'\n className={styles.panel}\n data-testid={dataTestId?.panel}\n >\n <div className={styles.list}>\n {options.map((option) => {\n const selected = option.value === value\n return (\n <button\n key={option.value}\n type='button'\n role='option'\n aria-selected={selected}\n disabled={option.disabled}\n className={cn(\n styles.option,\n styles[size],\n selected && styles.selected,\n )}\n onClick={() => handleOptionClick(option)}\n data-testid={option.dataTestId?.root}\n >\n <span className={styles.optionContent}>\n <span className={styles.optionRow}>\n {option.icon ? (\n <span\n className={styles.icon}\n data-testid={option.dataTestId?.icon}\n >\n {option.icon}\n </span>\n ) : null}\n <span\n className={styles.label}\n data-testid={option.dataTestId?.label}\n >\n {option.label}\n </span>\n {size === 'default' && option.secondaryLabel != null ? (\n <span\n className={styles.secondaryLabel}\n data-testid={option.dataTestId?.secondaryLabel}\n >\n {option.secondaryLabel}\n </span>\n ) : null}\n </span>\n {size === 'default' && option.description != null ? (\n <span\n className={styles.description}\n data-testid={option.dataTestId?.description}\n >\n {option.description}\n </span>\n ) : null}\n </span>\n {size === 'default' && selected ? (\n <span className={styles.indicator} aria-hidden='true'>\n <IconCheck className={styles.checkmark} />\n </span>\n ) : null}\n </button>\n )\n })}\n </div>\n </div>\n ) : null}\n </div>\n )\n}\n"],"names":["TokenSelector","_ref","options","value","onChange","single","size","placeholder","className","dataTestId","rest","open","setOpen","useState","rootRef","useRef","triggerRef","handleClose","useCallback","useOutsideClick","useEffect","handleDocumentKeyDown","event","key","current","focus","document","addEventListener","removeEventListener","selectedOption","find","option","_jsxs","cn","styles","root","children","icon","_jsx","label","secondaryLabel","handleTriggerClick","prev","handleOptionClick","disabled","ref","type","trigger","onClick","content","_Fragment","chevron","IconChevronUp","IconChevronDown","role","panel","list","map","selected","optionContent","optionRow","description","indicator","IconCheck","checkmark"],"mappings":"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"}
|
|
@@ -10,15 +10,19 @@ const jsxRuntime = require('react/jsx-runtime');
|
|
|
10
10
|
|
|
11
11
|
// Minimal distance between the tooltip and the viewport edge.
|
|
12
12
|
const VIEWPORT_MARGIN = 16;
|
|
13
|
-
//
|
|
14
|
-
const
|
|
13
|
+
// Visual gap between the anchor and the content.
|
|
14
|
+
const MAIN_GAP = 8;
|
|
15
|
+
const CORNER_GAP = 2;
|
|
16
|
+
// Extra buffer used only to decide whether a position still "fits" — bigger
|
|
17
|
+
// than the visual gap so a flip triggers before the bubble visually crowds the edge.
|
|
18
|
+
const FIT_BUFFER = 15;
|
|
15
19
|
const clampValue = (value, min, max) => Math.min(Math.max(value, min), Math.max(max, min));
|
|
16
20
|
const getMaxWidth = width => `min(${width}px, calc(100vw - ${VIEWPORT_MARGIN * 2}px))`;
|
|
17
21
|
|
|
18
|
-
// Measures the anchor and the
|
|
19
|
-
//
|
|
20
|
-
//
|
|
21
|
-
const getAdjustment = (position, anchor,
|
|
22
|
+
// Measures the anchor and the content, then picks a position that keeps the
|
|
23
|
+
// bubble inside the viewport — flipping sides when there isn't room, sliding
|
|
24
|
+
// along the cross axis otherwise — and resolves it to fixed-position coordinates.
|
|
25
|
+
const getAdjustment = (position, anchor, contentWidth, contentHeight) => {
|
|
22
26
|
const viewportWidth = document.documentElement.clientWidth;
|
|
23
27
|
const viewportHeight = document.documentElement.clientHeight;
|
|
24
28
|
const spaceTop = anchor.top - VIEWPORT_MARGIN;
|
|
@@ -26,12 +30,12 @@ const getAdjustment = (position, anchor, content) => {
|
|
|
26
30
|
const spaceLeft = anchor.left - VIEWPORT_MARGIN;
|
|
27
31
|
const spaceRight = viewportWidth - anchor.right - VIEWPORT_MARGIN;
|
|
28
32
|
let [main, corner] = position.split('-');
|
|
29
|
-
const
|
|
33
|
+
const fitGap = corner ? 0 : FIT_BUFFER;
|
|
30
34
|
|
|
31
35
|
// Side positions: flip to the other side, or fall back to a vertical
|
|
32
36
|
// position when the content doesn't fit horizontally on either side.
|
|
33
37
|
if (main === 'left' || main === 'right') {
|
|
34
|
-
const needed =
|
|
38
|
+
const needed = contentWidth + fitGap;
|
|
35
39
|
if (needed > spaceLeft && needed > spaceRight) {
|
|
36
40
|
main = spaceBottom >= spaceTop ? 'bottom' : 'top';
|
|
37
41
|
} else if (main === 'right' && needed > spaceRight) {
|
|
@@ -45,7 +49,7 @@ const getAdjustment = (position, anchor, content) => {
|
|
|
45
49
|
if (main === 'top' || main === 'bottom') {
|
|
46
50
|
const space = main === 'top' ? spaceTop : spaceBottom;
|
|
47
51
|
const opposite = main === 'top' ? spaceBottom : spaceTop;
|
|
48
|
-
if (
|
|
52
|
+
if (contentHeight + fitGap > space && opposite > space) {
|
|
49
53
|
main = main === 'top' ? 'bottom' : 'top';
|
|
50
54
|
}
|
|
51
55
|
}
|
|
@@ -55,25 +59,33 @@ const getAdjustment = (position, anchor, content) => {
|
|
|
55
59
|
if (corner) {
|
|
56
60
|
const space = corner === 'left' ? spaceLeft : spaceRight;
|
|
57
61
|
const opposite = corner === 'left' ? spaceRight : spaceLeft;
|
|
58
|
-
if (
|
|
62
|
+
if (contentWidth > space && opposite > space) {
|
|
59
63
|
corner = corner === 'left' ? 'right' : 'left';
|
|
60
64
|
}
|
|
61
65
|
}
|
|
62
|
-
|
|
63
|
-
let
|
|
66
|
+
const resolvedPosition = corner ? `${main}-${corner}` : main;
|
|
67
|
+
let left;
|
|
68
|
+
let top;
|
|
64
69
|
if (main === 'left' || main === 'right') {
|
|
65
|
-
const idealTop = anchor.top + anchor.height / 2 -
|
|
66
|
-
|
|
70
|
+
const idealTop = anchor.top + anchor.height / 2 - contentHeight / 2;
|
|
71
|
+
top = clampValue(idealTop, VIEWPORT_MARGIN, viewportHeight - VIEWPORT_MARGIN - contentHeight);
|
|
72
|
+
left = main === 'right' ? anchor.right + MAIN_GAP : anchor.left - MAIN_GAP - contentWidth;
|
|
67
73
|
} else {
|
|
68
|
-
const idealLeft = !corner ? anchor.left + anchor.width / 2 -
|
|
69
|
-
|
|
74
|
+
const idealLeft = !corner ? anchor.left + anchor.width / 2 - contentWidth / 2 : corner === 'left' ? anchor.left - contentWidth - CORNER_GAP : anchor.right + CORNER_GAP;
|
|
75
|
+
left = clampValue(idealLeft, VIEWPORT_MARGIN, viewportWidth - VIEWPORT_MARGIN - contentWidth);
|
|
76
|
+
const gap = corner ? CORNER_GAP : MAIN_GAP;
|
|
77
|
+
top = main === 'top' ? anchor.top - gap - contentHeight : anchor.bottom + gap;
|
|
70
78
|
}
|
|
71
79
|
return {
|
|
72
|
-
position:
|
|
73
|
-
|
|
74
|
-
|
|
80
|
+
position: resolvedPosition,
|
|
81
|
+
left,
|
|
82
|
+
top
|
|
75
83
|
};
|
|
76
84
|
};
|
|
85
|
+
|
|
86
|
+
// Rendered into document.body so a clipping ancestor (overflow: clip/hidden, or a
|
|
87
|
+
// transform/filter/backdrop-filter that would otherwise capture position: fixed)
|
|
88
|
+
// can't cut the bubble off — it sits outside that ancestor's DOM subtree entirely.
|
|
77
89
|
const Tooltip = _ref => {
|
|
78
90
|
let {
|
|
79
91
|
content,
|
|
@@ -82,62 +94,87 @@ const Tooltip = _ref => {
|
|
|
82
94
|
className,
|
|
83
95
|
children,
|
|
84
96
|
onMouseEnter,
|
|
97
|
+
onMouseLeave,
|
|
85
98
|
onFocus,
|
|
99
|
+
onBlur,
|
|
86
100
|
dataTestId,
|
|
87
101
|
...rest
|
|
88
102
|
} = _ref;
|
|
89
|
-
const
|
|
103
|
+
const anchorRef = react.useRef(null);
|
|
90
104
|
const contentRef = react.useRef(null);
|
|
91
|
-
const [
|
|
105
|
+
const [open, setOpen] = react.useState(false);
|
|
106
|
+
const tooltipId = react.useId();
|
|
92
107
|
const updatePosition = react.useCallback(() => {
|
|
93
|
-
const
|
|
108
|
+
const anchor = anchorRef.current;
|
|
94
109
|
const contentEl = contentRef.current;
|
|
95
|
-
if (!
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
110
|
+
if (!anchor || !contentEl) return;
|
|
111
|
+
const {
|
|
112
|
+
left,
|
|
113
|
+
top,
|
|
114
|
+
position: resolved
|
|
115
|
+
} = getAdjustment(position, anchor.getBoundingClientRect(), contentEl.offsetWidth, contentEl.offsetHeight);
|
|
116
|
+
contentEl.style.left = `${left}px`;
|
|
117
|
+
contentEl.style.top = `${top}px`;
|
|
118
|
+
contentEl.dataset.position = resolved;
|
|
119
|
+
contentEl.dataset.placed = 'true';
|
|
105
120
|
}, [position]);
|
|
121
|
+
react.useLayoutEffect(() => {
|
|
122
|
+
if (!open) return;
|
|
123
|
+
updatePosition();
|
|
124
|
+
window.addEventListener('scroll', updatePosition, true);
|
|
125
|
+
window.addEventListener('resize', updatePosition);
|
|
126
|
+
return () => {
|
|
127
|
+
window.removeEventListener('scroll', updatePosition, true);
|
|
128
|
+
window.removeEventListener('resize', updatePosition);
|
|
129
|
+
};
|
|
130
|
+
}, [open, updatePosition]);
|
|
131
|
+
|
|
132
|
+
// A hover-opened tooltip has no focus to catch the key, so Escape is heard document-wide.
|
|
106
133
|
react.useEffect(() => {
|
|
107
|
-
|
|
108
|
-
|
|
134
|
+
if (!open) return;
|
|
135
|
+
const handleKeyDown = event => {
|
|
136
|
+
if (event.key === 'Escape') setOpen(false);
|
|
109
137
|
};
|
|
110
|
-
|
|
111
|
-
return () =>
|
|
112
|
-
}, [
|
|
138
|
+
document.addEventListener('keydown', handleKeyDown);
|
|
139
|
+
return () => document.removeEventListener('keydown', handleKeyDown);
|
|
140
|
+
}, [open]);
|
|
113
141
|
const handleMouseEnter = event => {
|
|
114
|
-
updatePosition();
|
|
115
142
|
onMouseEnter?.(event);
|
|
143
|
+
setOpen(true);
|
|
144
|
+
};
|
|
145
|
+
const handleMouseLeave = event => {
|
|
146
|
+
onMouseLeave?.(event);
|
|
147
|
+
setOpen(false);
|
|
116
148
|
};
|
|
117
149
|
const handleFocus = event => {
|
|
118
|
-
updatePosition();
|
|
119
150
|
onFocus?.(event);
|
|
151
|
+
setOpen(true);
|
|
152
|
+
};
|
|
153
|
+
const handleBlur = event => {
|
|
154
|
+
onBlur?.(event);
|
|
155
|
+
setOpen(false);
|
|
120
156
|
};
|
|
121
|
-
const effectivePosition = adjustment?.position ?? position;
|
|
122
157
|
return /*#__PURE__*/jsxRuntime.jsxs("span", {
|
|
123
|
-
ref:
|
|
158
|
+
ref: anchorRef,
|
|
124
159
|
className: cn(Tooltip_module.wrapper, className),
|
|
160
|
+
"aria-describedby": open ? tooltipId : undefined,
|
|
125
161
|
onMouseEnter: handleMouseEnter,
|
|
162
|
+
onMouseLeave: handleMouseLeave,
|
|
126
163
|
onFocus: handleFocus,
|
|
164
|
+
onBlur: handleBlur,
|
|
127
165
|
"data-testid": dataTestId?.root,
|
|
128
166
|
...rest,
|
|
129
|
-
children: [children, /*#__PURE__*/jsxRuntime.jsx("span", {
|
|
167
|
+
children: [children, open ? /*#__PURE__*/reactDom.createPortal(/*#__PURE__*/jsxRuntime.jsx("span", {
|
|
130
168
|
ref: contentRef,
|
|
131
|
-
|
|
169
|
+
id: tooltipId,
|
|
170
|
+
role: "tooltip",
|
|
171
|
+
className: Tooltip_module.content,
|
|
132
172
|
style: {
|
|
133
|
-
'--local-tooltip-width': getMaxWidth(width)
|
|
134
|
-
'--local-tooltip-shift-x': `${adjustment?.shiftX ?? 0}px`,
|
|
135
|
-
'--local-tooltip-shift-y': `${adjustment?.shiftY ?? 0}px`
|
|
173
|
+
'--local-tooltip-width': getMaxWidth(width)
|
|
136
174
|
},
|
|
137
|
-
role: "tooltip",
|
|
138
175
|
"data-testid": dataTestId?.content,
|
|
139
176
|
children: content
|
|
140
|
-
})]
|
|
177
|
+
}), document.body) : null]
|
|
141
178
|
});
|
|
142
179
|
};
|
|
143
180
|
Tooltip.displayName = 'Tooltip';
|
|
@@ -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 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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"}
|
|
1
|
+
{"version":3,"file":"Tooltip.cjs","sources":["../../../src/tooltip/Tooltip.tsx"],"sourcesContent":["import {\n useCallback,\n useEffect,\n useId,\n useLayoutEffect,\n useRef,\n useState,\n type ComponentPropsWithoutRef,\n type CSSProperties,\n type FocusEvent,\n type MouseEvent,\n type ReactNode,\n} from 'react'\nimport { createPortal } 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// Visual gap between the anchor and the content.\nconst MAIN_GAP = 8\nconst CORNER_GAP = 2\n// Extra buffer used only to decide whether a position still \"fits\" — bigger\n// than the visual gap so a flip triggers before the bubble visually crowds the edge.\nconst FIT_BUFFER = 15\n\ntype Adjustment = {\n position: TooltipPosition\n left: number\n top: 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 content, then picks a position that keeps the\n// bubble inside the viewport — flipping sides when there isn't room, sliding\n// along the cross axis otherwise — and resolves it to fixed-position coordinates.\nconst getAdjustment = (\n position: TooltipPosition,\n anchor: DOMRect,\n contentWidth: number,\n contentHeight: number,\n): Adjustment => {\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('-') as [string, string | undefined]\n const fitGap = corner ? 0 : FIT_BUFFER\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 = contentWidth + fitGap\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 (contentHeight + fitGap > 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 (contentWidth > space && opposite > space) {\n corner = corner === 'left' ? 'right' : 'left'\n }\n }\n\n const resolvedPosition = (\n corner ? `${main}-${corner}` : main\n ) as TooltipPosition\n\n let left: number\n let top: number\n\n if (main === 'left' || main === 'right') {\n const idealTop = anchor.top + anchor.height / 2 - contentHeight / 2\n top = clampValue(\n idealTop,\n VIEWPORT_MARGIN,\n viewportHeight - VIEWPORT_MARGIN - contentHeight,\n )\n left =\n main === 'right'\n ? anchor.right + MAIN_GAP\n : anchor.left - MAIN_GAP - contentWidth\n } else {\n const idealLeft = !corner\n ? anchor.left + anchor.width / 2 - contentWidth / 2\n : corner === 'left'\n ? anchor.left - contentWidth - CORNER_GAP\n : anchor.right + CORNER_GAP\n left = clampValue(\n idealLeft,\n VIEWPORT_MARGIN,\n viewportWidth - VIEWPORT_MARGIN - contentWidth,\n )\n const gap = corner ? CORNER_GAP : MAIN_GAP\n top =\n main === 'top' ? anchor.top - gap - contentHeight : anchor.bottom + gap\n }\n\n return { position: resolvedPosition, left, top }\n}\n\n// Rendered into document.body so a clipping ancestor (overflow: clip/hidden, or a\n// transform/filter/backdrop-filter that would otherwise capture position: fixed)\n// can't cut the bubble off — it sits outside that ancestor's DOM subtree entirely.\nexport const Tooltip = ({\n content,\n position = 'top',\n width = 320,\n className,\n children,\n onMouseEnter,\n onMouseLeave,\n onFocus,\n onBlur,\n dataTestId,\n ...rest\n}: TooltipProps) => {\n const anchorRef = useRef<HTMLSpanElement>(null)\n const contentRef = useRef<HTMLSpanElement>(null)\n const [open, setOpen] = useState(false)\n const tooltipId = useId()\n\n const updatePosition = useCallback(() => {\n const anchor = anchorRef.current\n const contentEl = contentRef.current\n if (!anchor || !contentEl) return\n const {\n left,\n top,\n position: resolved,\n } = getAdjustment(\n position,\n anchor.getBoundingClientRect(),\n contentEl.offsetWidth,\n contentEl.offsetHeight,\n )\n contentEl.style.left = `${left}px`\n contentEl.style.top = `${top}px`\n contentEl.dataset.position = resolved\n contentEl.dataset.placed = 'true'\n }, [position])\n\n useLayoutEffect(() => {\n if (!open) return\n updatePosition()\n window.addEventListener('scroll', updatePosition, true)\n window.addEventListener('resize', updatePosition)\n return () => {\n window.removeEventListener('scroll', updatePosition, true)\n window.removeEventListener('resize', updatePosition)\n }\n }, [open, updatePosition])\n\n // A hover-opened tooltip has no focus to catch the key, so Escape is heard document-wide.\n useEffect(() => {\n if (!open) return\n const handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'Escape') setOpen(false)\n }\n document.addEventListener('keydown', handleKeyDown)\n return () => document.removeEventListener('keydown', handleKeyDown)\n }, [open])\n\n const handleMouseEnter = (event: MouseEvent<HTMLSpanElement>) => {\n onMouseEnter?.(event)\n setOpen(true)\n }\n\n const handleMouseLeave = (event: MouseEvent<HTMLSpanElement>) => {\n onMouseLeave?.(event)\n setOpen(false)\n }\n\n const handleFocus = (event: FocusEvent<HTMLSpanElement>) => {\n onFocus?.(event)\n setOpen(true)\n }\n\n const handleBlur = (event: FocusEvent<HTMLSpanElement>) => {\n onBlur?.(event)\n setOpen(false)\n }\n\n return (\n <span\n ref={anchorRef}\n className={cn(styles.wrapper, className)}\n aria-describedby={open ? tooltipId : undefined}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n onFocus={handleFocus}\n onBlur={handleBlur}\n data-testid={dataTestId?.root}\n {...rest}\n >\n {children}\n {open\n ? createPortal(\n <span\n ref={contentRef}\n id={tooltipId}\n role='tooltip'\n className={styles.content}\n style={\n { '--local-tooltip-width': getMaxWidth(width) } as CSSProperties\n }\n data-testid={dataTestId?.content}\n >\n {content}\n </span>,\n document.body,\n )\n : null}\n </span>\n )\n}\n\nTooltip.displayName = 'Tooltip'\n"],"names":["VIEWPORT_MARGIN","MAIN_GAP","CORNER_GAP","FIT_BUFFER","clampValue","value","min","max","Math","getMaxWidth","width","getAdjustment","position","anchor","contentWidth","contentHeight","viewportWidth","document","documentElement","clientWidth","viewportHeight","clientHeight","spaceTop","top","spaceBottom","bottom","spaceLeft","left","spaceRight","right","main","corner","split","fitGap","needed","space","opposite","resolvedPosition","idealTop","height","idealLeft","gap","Tooltip","_ref","content","className","children","onMouseEnter","onMouseLeave","onFocus","onBlur","dataTestId","rest","anchorRef","useRef","contentRef","open","setOpen","useState","tooltipId","useId","updatePosition","useCallback","current","contentEl","resolved","getBoundingClientRect","offsetWidth","offsetHeight","style","dataset","placed","useLayoutEffect","window","addEventListener","removeEventListener","useEffect","handleKeyDown","event","key","handleMouseEnter","handleMouseLeave","handleFocus","handleBlur","_jsxs","ref","cn","styles","wrapper","undefined","root","createPortal","_jsx","id","role","body","displayName"],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
const styles = {"wrapper":"Tooltip-module_wrapper__-h7ZD","content":"Tooltip-module_content__Yqdc-"
|
|
3
|
+
const styles = {"wrapper":"Tooltip-module_wrapper__-h7ZD","content":"Tooltip-module_content__Yqdc-"};
|
|
4
4
|
|
|
5
5
|
module.exports = styles;
|
|
6
6
|
//# sourceMappingURL=Tooltip.module.css.cjs.map
|
|
@@ -5,13 +5,13 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
|
5
5
|
const cn = require('classnames');
|
|
6
6
|
const TxStatus_module = require('./TxStatus.module.css.cjs');
|
|
7
7
|
const jsxRuntime = require('react/jsx-runtime');
|
|
8
|
-
const IconSpinner = require('../icons/components/base/IconSpinner.cjs');
|
|
9
8
|
const IconExclamation = require('../icons/components/base/IconExclamation.cjs');
|
|
9
|
+
const IconLoaderCircle = require('../icons/components/base/IconLoaderCircle.cjs');
|
|
10
10
|
const IconCheck = require('../icons/components/base/IconCheck.cjs');
|
|
11
11
|
const IconCross = require('../icons/components/base/IconCross.cjs');
|
|
12
12
|
|
|
13
13
|
const graphicByStatus = {
|
|
14
|
-
loading: /*#__PURE__*/jsxRuntime.jsx(
|
|
14
|
+
loading: /*#__PURE__*/jsxRuntime.jsx(IconLoaderCircle.IconLoaderCircle, {
|
|
15
15
|
className: TxStatus_module.spinner
|
|
16
16
|
}),
|
|
17
17
|
success: /*#__PURE__*/jsxRuntime.jsx("span", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TxStatus.cjs","sources":["../../../src/tx-status/TxStatus.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ReactNode } from 'react'\n\nimport {
|
|
1
|
+
{"version":3,"file":"TxStatus.cjs","sources":["../../../src/tx-status/TxStatus.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ReactNode } from 'react'\n\nimport {\n IconCheck,\n IconCross,\n IconExclamation,\n IconLoaderCircle,\n} 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: <IconLoaderCircle 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","IconLoaderCircle","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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"}
|