@lidofinance/lido-app-ui 1.14.0 → 1.16.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/README.md +33 -14
- package/dist/README.md +33 -14
- package/dist/cjs/breadcrumbs/Breadcrumbs.cjs +10 -3
- package/dist/cjs/breadcrumbs/Breadcrumbs.cjs.map +1 -1
- package/dist/cjs/button/Button.cjs +7 -7
- package/dist/cjs/button/Button.cjs.map +1 -1
- package/dist/cjs/button/ButtonContent.cjs +0 -2
- package/dist/cjs/button/ButtonContent.cjs.map +1 -1
- package/dist/cjs/button/LinkButton.cjs +6 -35
- package/dist/cjs/button/LinkButton.cjs.map +1 -1
- package/dist/cjs/counter/Counter.module.css.cjs +1 -1
- package/dist/cjs/disclaimer/Disclaimer.cjs +0 -1
- package/dist/cjs/disclaimer/Disclaimer.cjs.map +1 -1
- package/dist/cjs/hidden/Hidden.cjs.map +1 -1
- package/dist/cjs/hidden/Hidden.module.css.cjs +1 -1
- package/dist/cjs/icon-button/CloseButton.cjs.map +1 -1
- package/dist/cjs/icon-button/IconButton.cjs +7 -7
- package/dist/cjs/icon-button/IconButton.cjs.map +1 -1
- package/dist/cjs/index.cjs +5 -2
- package/dist/cjs/index.cjs.map +1 -1
- package/dist/cjs/index.css +14 -6
- package/dist/cjs/info-tooltip/InfoTooltip.cjs +4 -4
- package/dist/cjs/info-tooltip/InfoTooltip.cjs.map +1 -1
- package/dist/cjs/info-tooltip/InfoTooltip.module.css.cjs +1 -1
- package/dist/cjs/input/Input.cjs +23 -11
- package/dist/cjs/input/Input.cjs.map +1 -1
- package/dist/cjs/input/Input.module.css.cjs +1 -1
- package/dist/cjs/link-provider/Anchor.cjs +19 -6
- package/dist/cjs/link-provider/Anchor.cjs.map +1 -1
- package/dist/cjs/link-provider/LinkProvider.cjs +1 -1
- package/dist/cjs/link-provider/LinkProvider.cjs.map +1 -1
- package/dist/cjs/logo/Logo.cjs.map +1 -1
- package/dist/cjs/nav-link/NavLink.cjs +7 -3
- package/dist/cjs/nav-link/NavLink.cjs.map +1 -1
- package/dist/cjs/rich-input/RichInput.cjs +46 -16
- package/dist/cjs/rich-input/RichInput.cjs.map +1 -1
- package/dist/cjs/rich-input/RichInput.module.css.cjs +1 -1
- package/dist/cjs/sidebar/Sidebar.cjs +2 -2
- package/dist/cjs/sidebar/Sidebar.cjs.map +1 -1
- package/dist/cjs/sidebar/SidebarToggle.cjs +1 -1
- package/dist/cjs/sidebar/SidebarToggle.cjs.map +1 -1
- package/dist/cjs/small-card/SmallCard.cjs.map +1 -1
- package/dist/cjs/stack/Stack.cjs +1 -1
- package/dist/cjs/stack/Stack.cjs.map +1 -1
- package/dist/cjs/tag/Tag.cjs.map +1 -1
- package/dist/cjs/tag/Tag.module.css.cjs +1 -1
- package/dist/cjs/text-link/TextLink.cjs +1 -3
- package/dist/cjs/text-link/TextLink.cjs.map +1 -1
- package/dist/cjs/theme-switcher/ThemeSwitcher.cjs.map +1 -1
- package/dist/cjs/typography/Typography.cjs +21 -8
- package/dist/cjs/typography/Typography.cjs.map +1 -1
- package/dist/cjs/typography/Typography.module.css.cjs +1 -1
- package/dist/cjs/utils/ActionElement.cjs +1 -1
- package/dist/cjs/utils/ActionElement.cjs.map +1 -1
- package/dist/cjs/utils/breakpoints.cjs +11 -12
- package/dist/cjs/utils/breakpoints.cjs.map +1 -1
- package/dist/cjs/utils/joinAriaLabel.cjs +8 -0
- package/dist/cjs/utils/joinAriaLabel.cjs.map +1 -0
- package/dist/cjs/utils/responsive.cjs.map +1 -1
- package/dist/esm/breadcrumbs/Breadcrumbs.mjs +10 -3
- package/dist/esm/breadcrumbs/Breadcrumbs.mjs.map +1 -1
- package/dist/esm/button/Button.mjs +7 -7
- package/dist/esm/button/Button.mjs.map +1 -1
- package/dist/esm/button/ButtonContent.mjs +1 -2
- package/dist/esm/button/ButtonContent.mjs.map +1 -1
- package/dist/esm/button/LinkButton.mjs +6 -35
- package/dist/esm/button/LinkButton.mjs.map +1 -1
- package/dist/esm/counter/Counter.module.css.mjs +1 -1
- package/dist/esm/disclaimer/Disclaimer.mjs +0 -1
- package/dist/esm/disclaimer/Disclaimer.mjs.map +1 -1
- package/dist/esm/hidden/Hidden.mjs.map +1 -1
- package/dist/esm/hidden/Hidden.module.css.mjs +1 -1
- package/dist/esm/icon-button/CloseButton.mjs.map +1 -1
- package/dist/esm/icon-button/IconButton.mjs +7 -7
- package/dist/esm/icon-button/IconButton.mjs.map +1 -1
- package/dist/esm/index.css +14 -6
- package/dist/esm/index.mjs +2 -2
- package/dist/esm/index.mjs.map +1 -1
- package/dist/esm/info-tooltip/InfoTooltip.mjs +4 -4
- package/dist/esm/info-tooltip/InfoTooltip.mjs.map +1 -1
- package/dist/esm/info-tooltip/InfoTooltip.module.css.mjs +1 -1
- package/dist/esm/input/Input.mjs +23 -11
- package/dist/esm/input/Input.mjs.map +1 -1
- package/dist/esm/input/Input.module.css.mjs +1 -1
- package/dist/esm/link-provider/Anchor.mjs +19 -7
- package/dist/esm/link-provider/Anchor.mjs.map +1 -1
- package/dist/esm/link-provider/LinkProvider.mjs +1 -1
- package/dist/esm/link-provider/LinkProvider.mjs.map +1 -1
- package/dist/esm/logo/Logo.mjs.map +1 -1
- package/dist/esm/nav-link/NavLink.mjs +8 -4
- package/dist/esm/nav-link/NavLink.mjs.map +1 -1
- package/dist/esm/rich-input/RichInput.mjs +46 -16
- package/dist/esm/rich-input/RichInput.mjs.map +1 -1
- package/dist/esm/rich-input/RichInput.module.css.mjs +1 -1
- package/dist/esm/sidebar/Sidebar.mjs +2 -2
- package/dist/esm/sidebar/Sidebar.mjs.map +1 -1
- package/dist/esm/sidebar/SidebarToggle.mjs +1 -1
- package/dist/esm/sidebar/SidebarToggle.mjs.map +1 -1
- package/dist/esm/small-card/SmallCard.mjs.map +1 -1
- package/dist/esm/stack/Stack.mjs +1 -1
- package/dist/esm/stack/Stack.mjs.map +1 -1
- package/dist/esm/tag/Tag.mjs.map +1 -1
- package/dist/esm/tag/Tag.module.css.mjs +1 -1
- package/dist/esm/text-link/TextLink.mjs +1 -3
- package/dist/esm/text-link/TextLink.mjs.map +1 -1
- package/dist/esm/theme-switcher/ThemeSwitcher.mjs.map +1 -1
- package/dist/esm/typography/Typography.mjs +19 -9
- package/dist/esm/typography/Typography.mjs.map +1 -1
- package/dist/esm/typography/Typography.module.css.mjs +1 -1
- package/dist/esm/utils/ActionElement.mjs +1 -1
- package/dist/esm/utils/ActionElement.mjs.map +1 -1
- package/dist/esm/utils/breakpoints.mjs +10 -11
- package/dist/esm/utils/breakpoints.mjs.map +1 -1
- package/dist/esm/utils/joinAriaLabel.mjs +4 -0
- package/dist/esm/utils/joinAriaLabel.mjs.map +1 -0
- package/dist/esm/utils/responsive.mjs.map +1 -1
- package/dist/index.css +14 -6
- package/dist/styles/breakpoints.css +10 -16
- package/dist/styles/typography-mixins.css +14 -4
- package/dist/types/breadcrumbs/Breadcrumbs.d.ts +2 -2
- package/dist/types/breadcrumbs/Breadcrumbs.d.ts.map +1 -1
- package/dist/types/button/Button.d.ts +4 -10
- package/dist/types/button/Button.d.ts.map +1 -1
- package/dist/types/button/ButtonContent.d.ts +0 -1
- package/dist/types/button/ButtonContent.d.ts.map +1 -1
- package/dist/types/button/LinkButton.d.ts +9 -8
- package/dist/types/button/LinkButton.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/button/types.d.ts +4 -0
- package/dist/types/button/types.d.ts.map +1 -1
- package/dist/types/hidden/Hidden.d.ts +4 -4
- package/dist/types/hidden/Hidden.d.ts.map +1 -1
- package/dist/types/icon-button/CloseButton.d.ts +3 -3
- package/dist/types/icon-button/CloseButton.d.ts.map +1 -1
- package/dist/types/icon-button/IconButton.d.ts +4 -38
- 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/icon-button/types.d.ts +26 -0
- package/dist/types/icon-button/types.d.ts.map +1 -0
- package/dist/types/index.d.ts +1 -1
- package/dist/types/index.d.ts.map +1 -1
- package/dist/types/info-tooltip/InfoTooltip.d.ts +4 -1
- package/dist/types/info-tooltip/InfoTooltip.d.ts.map +1 -1
- package/dist/types/input/Input.d.ts +5 -1
- package/dist/types/input/Input.d.ts.map +1 -1
- package/dist/types/link-provider/Anchor.d.ts +3 -2
- package/dist/types/link-provider/Anchor.d.ts.map +1 -1
- package/dist/types/link-provider/LinkProvider.d.ts +1 -1
- package/dist/types/link-provider/LinkProvider.d.ts.map +1 -1
- package/dist/types/logo/Logo.d.ts +5 -8
- package/dist/types/logo/Logo.d.ts.map +1 -1
- package/dist/types/nav-link/NavLink.d.ts +2 -2
- package/dist/types/nav-link/NavLink.d.ts.map +1 -1
- package/dist/types/rich-input/RichInput.d.ts +9 -2
- package/dist/types/rich-input/RichInput.d.ts.map +1 -1
- package/dist/types/sidebar/Sidebar.d.ts +2 -2
- package/dist/types/sidebar/Sidebar.d.ts.map +1 -1
- package/dist/types/sidebar/SidebarToggle.d.ts +4 -4
- package/dist/types/sidebar/SidebarToggle.d.ts.map +1 -1
- package/dist/types/small-card/SmallCard.d.ts +2 -8
- package/dist/types/small-card/SmallCard.d.ts.map +1 -1
- package/dist/types/stack/Stack.d.ts +1 -1
- package/dist/types/stack/Stack.d.ts.map +1 -1
- package/dist/types/tag/Tag.d.ts +3 -1
- package/dist/types/tag/Tag.d.ts.map +1 -1
- package/dist/types/text-link/TextLink.d.ts +3 -9
- package/dist/types/text-link/TextLink.d.ts.map +1 -1
- package/dist/types/theme-switcher/ThemeSwitcher.d.ts +3 -3
- package/dist/types/theme-switcher/ThemeSwitcher.d.ts.map +1 -1
- package/dist/types/typography/Typography.d.ts +15 -6
- package/dist/types/typography/Typography.d.ts.map +1 -1
- package/dist/types/utils/ActionElement.d.ts +11 -1
- package/dist/types/utils/ActionElement.d.ts.map +1 -1
- package/dist/types/utils/breakpoints.d.ts +9 -10
- package/dist/types/utils/breakpoints.d.ts.map +1 -1
- package/dist/types/utils/index.d.ts +3 -2
- package/dist/types/utils/index.d.ts.map +1 -1
- package/dist/types/utils/joinAriaLabel.d.ts +2 -0
- package/dist/types/utils/joinAriaLabel.d.ts.map +1 -0
- package/dist/types/utils/responsive.d.ts +12 -16
- package/dist/types/utils/responsive.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InfoTooltip.cjs","sources":["../../../src/info-tooltip/InfoTooltip.tsx"],"sourcesContent":["import cn from 'classnames'\n\nimport { IconInfo } from '../icons'\nimport { Tooltip, type TooltipProps } from '../tooltip'\nimport styles from './InfoTooltip.module.css'\n\nexport type InfoTooltipSize = 16 | 20\nexport type InfoTooltipTone = 'secondary' | 'tertiary'\n\nexport type InfoTooltipProps = Omit<TooltipProps, 'children'> & {\n size?: InfoTooltipSize\n tone?: InfoTooltipTone\n}\n\nexport const InfoTooltip = ({\n size = 16,\n tone = 'secondary',\n className,\n 'aria-label': ariaLabel,\n ...rest\n}: InfoTooltipProps) => (\n <Tooltip\n tabIndex={0}\n role='img'\n aria-label={ariaLabel ?? 'More info'}\n className={cn(styles.root, styles[`size${size}`], styles[tone], className)}\n {...rest}\n >\n
|
|
1
|
+
{"version":3,"file":"InfoTooltip.cjs","sources":["../../../src/info-tooltip/InfoTooltip.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\n\nimport cn from 'classnames'\n\nimport { IconInfo } from '../icons'\nimport { Tooltip, type TooltipProps } from '../tooltip'\nimport styles from './InfoTooltip.module.css'\n\nexport type InfoTooltipSize = 16 | 20\nexport type InfoTooltipTone = 'secondary' | 'tertiary'\n\nexport type InfoTooltipProps = Omit<TooltipProps, 'children'> & {\n /** Glyph; defaults to the info icon. */\n icon?: ReactNode\n size?: InfoTooltipSize\n tone?: InfoTooltipTone\n}\n\nexport const InfoTooltip = ({\n icon = <IconInfo aria-hidden='true' />,\n size = 16,\n tone = 'secondary',\n className,\n 'aria-label': ariaLabel,\n ...rest\n}: InfoTooltipProps) => (\n <Tooltip\n tabIndex={0}\n role='img'\n aria-label={ariaLabel ?? 'More info'}\n className={cn(styles.root, styles[`size${size}`], styles[tone], className)}\n {...rest}\n >\n {icon}\n </Tooltip>\n)\n\nInfoTooltip.displayName = 'InfoTooltip'\n"],"names":["InfoTooltip","_ref","icon","_jsx","IconInfo","size","tone","className","ariaLabel","rest","Tooltip","tabIndex","role","cn","styles","root","children","displayName"],"mappings":";;;;;;;;;;AAkBO,MAAMA,WAAW,GAAGC,IAAA,IAAA;EAAA,IAAC;IAC1BC,IAAI,gBAAGC,cAAA,CAACC,iBAAQ,EAAA;MAAC,aAAY,EAAA,MAAA;AAAM,KAAE,CAAC;AACtCC,IAAAA,IAAI,GAAG,EAAE;AACTC,IAAAA,IAAI,GAAG,WAAW;IAClBC,SAAS;AACT,IAAA,YAAY,EAAEC,SAAS;IACvB,GAAGC,IAAAA;AACa,GAAC,GAAAR,IAAA,CAAA;EAAA,oBACjBE,cAAA,CAACO,eAAO,EAAA;AACNC,IAAAA,QAAQ,EAAE,CAAE;AACZC,IAAAA,IAAI,EAAC,KAAK;IACV,YAAYJ,EAAAA,SAAS,IAAI,WAAY;IACrCD,SAAS,EAAEM,EAAE,CAACC,kBAAM,CAACC,IAAI,EAAED,kBAAM,CAAC,CAAA,IAAA,EAAOT,IAAI,CAAE,CAAA,CAAC,EAAES,kBAAM,CAACR,IAAI,CAAC,EAAEC,SAAS,CAAE;AAAA,IAAA,GACvEE,IAAI;AAAAO,IAAAA,QAAA,EAEPd,IAAAA;AAAI,GACE,CAAC,CAAA;AAAA,EACX;AAEDF,WAAW,CAACiB,WAAW,GAAG,aAAa;;;;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
const styles = {"root":"InfoTooltip-module_root__HGLUD","secondary":"InfoTooltip-module_secondary__XmntX","tertiary":"InfoTooltip-module_tertiary__L0AVh","
|
|
3
|
+
const styles = {"root":"InfoTooltip-module_root__HGLUD","secondary":"InfoTooltip-module_secondary__XmntX","tertiary":"InfoTooltip-module_tertiary__L0AVh","size16":"InfoTooltip-module_size16__7XWPZ","size20":"InfoTooltip-module_size20__Ivz-f"};
|
|
4
4
|
|
|
5
5
|
module.exports = styles;
|
|
6
6
|
//# sourceMappingURL=InfoTooltip.module.css.cjs.map
|
package/dist/cjs/input/Input.cjs
CHANGED
|
@@ -7,8 +7,9 @@ const cn = require('classnames');
|
|
|
7
7
|
const Input_module = require('./Input.module.css.cjs');
|
|
8
8
|
const jsxRuntime = require('react/jsx-runtime');
|
|
9
9
|
const InfoTooltip = require('../info-tooltip/InfoTooltip.cjs');
|
|
10
|
+
const Skeleton = require('../skeleton/Skeleton.cjs');
|
|
10
11
|
|
|
11
|
-
/** Bordered text field; `icon` adds a leading icon, `label`/`description`/`error` add the field chrome, `tooltip` puts an info icon next to the label. */
|
|
12
|
+
/** Bordered text field; `icon` adds a leading icon, `label`/`description`/`error` add the field chrome, `tooltip` puts an info icon next to the label, `loading` swaps the value for a skeleton. */
|
|
12
13
|
const Input = /*#__PURE__*/react.forwardRef((_ref, ref) => {
|
|
13
14
|
let {
|
|
14
15
|
size = 'default',
|
|
@@ -18,6 +19,8 @@ const Input = /*#__PURE__*/react.forwardRef((_ref, ref) => {
|
|
|
18
19
|
description,
|
|
19
20
|
error,
|
|
20
21
|
disabled,
|
|
22
|
+
loading,
|
|
23
|
+
readOnly,
|
|
21
24
|
className,
|
|
22
25
|
id,
|
|
23
26
|
dataTestId,
|
|
@@ -45,22 +48,31 @@ const Input = /*#__PURE__*/react.forwardRef((_ref, ref) => {
|
|
|
45
48
|
}) : null, /*#__PURE__*/jsxRuntime.jsxs("label", {
|
|
46
49
|
className: cn(Input_module.root, Input_module[size], {
|
|
47
50
|
[Input_module.error]: hasError,
|
|
48
|
-
[Input_module.disabled]: disabled
|
|
51
|
+
[Input_module.disabled]: disabled,
|
|
52
|
+
[Input_module.loading]: loading
|
|
49
53
|
}),
|
|
50
54
|
children: [icon ? /*#__PURE__*/jsxRuntime.jsx("span", {
|
|
51
55
|
className: Input_module.icon,
|
|
52
56
|
"aria-hidden": "true",
|
|
53
57
|
"data-testid": dataTestId?.icon,
|
|
54
58
|
children: icon
|
|
55
|
-
}) : null, /*#__PURE__*/jsxRuntime.
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
59
|
+
}) : null, /*#__PURE__*/jsxRuntime.jsxs("span", {
|
|
60
|
+
className: Input_module.control,
|
|
61
|
+
children: [/*#__PURE__*/jsxRuntime.jsx("input", {
|
|
62
|
+
ref: ref,
|
|
63
|
+
id: inputId,
|
|
64
|
+
className: Input_module.input,
|
|
65
|
+
disabled: disabled,
|
|
66
|
+
readOnly: loading || readOnly,
|
|
67
|
+
"aria-busy": loading || undefined,
|
|
68
|
+
"aria-invalid": hasError || undefined,
|
|
69
|
+
"aria-describedby": showErrorMessage ? errorId : undefined,
|
|
70
|
+
"data-testid": dataTestId?.input,
|
|
71
|
+
...rest
|
|
72
|
+
}), loading ? /*#__PURE__*/jsxRuntime.jsx(Skeleton.Skeleton, {
|
|
73
|
+
variant: "text",
|
|
74
|
+
className: Input_module.skeleton
|
|
75
|
+
}) : null]
|
|
64
76
|
})]
|
|
65
77
|
}), showErrorMessage ? /*#__PURE__*/jsxRuntime.jsx("p", {
|
|
66
78
|
id: errorId,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.cjs","sources":["../../../src/input/Input.tsx"],"sourcesContent":["import {\n forwardRef,\n useId,\n type InputHTMLAttributes,\n type ReactNode,\n} from 'react'\n\nimport cn from 'classnames'\n\nimport { InfoTooltip } from '../info-tooltip'\nimport styles from './Input.module.css'\n\nexport type InputSize = 'default' | 'small'\n\nexport type InputDataTestId = {\n root?: string\n label?: string\n icon?: string\n input?: string\n error?: string\n description?: string\n}\n\nexport type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> & {\n size?: InputSize\n icon?: ReactNode\n label?: ReactNode\n tooltip?: ReactNode\n description?: ReactNode\n error?: ReactNode | boolean\n dataTestId?: InputDataTestId\n}\n\n/** Bordered text field; `icon` adds a leading icon, `label`/`description`/`error` add the field chrome, `tooltip` puts an info icon next to the label. */\nexport const Input = forwardRef<HTMLInputElement, InputProps>(\n (\n {\n size = 'default',\n icon,\n label,\n tooltip,\n description,\n error,\n disabled,\n className,\n id,\n dataTestId,\n ...rest\n },\n ref,\n ) => {\n const fallbackId = useId()\n const inputId = id ?? fallbackId\n const errorId = `${inputId}-error`\n\n const hasError = Boolean(error)\n const errorMessage = typeof error === 'boolean' ? null : error\n const showErrorMessage = errorMessage != null\n\n return (\n <div\n className={cn(styles.field, className)}\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 {tooltip != null ? <InfoTooltip content={tooltip} /> : null}\n </span>\n ) : null}\n <label\n className={cn(styles.root, styles[size], {\n [styles.error]: hasError,\n [styles.disabled]: disabled,\n })}\n >\n {icon ? (\n <span\n className={styles.icon}\n aria-hidden='true'\n data-testid={dataTestId?.icon}\n >\n {icon}\n </span>\n ) : null}\n <input\n
|
|
1
|
+
{"version":3,"file":"Input.cjs","sources":["../../../src/input/Input.tsx"],"sourcesContent":["import {\n forwardRef,\n useId,\n type InputHTMLAttributes,\n type ReactNode,\n} from 'react'\n\nimport cn from 'classnames'\n\nimport { InfoTooltip } from '../info-tooltip'\nimport { Skeleton } from '../skeleton'\nimport styles from './Input.module.css'\n\nexport type InputSize = 'default' | 'small'\n\nexport type InputDataTestId = {\n root?: string\n label?: string\n icon?: string\n input?: string\n error?: string\n description?: string\n}\n\nexport type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> & {\n size?: InputSize\n icon?: ReactNode\n label?: ReactNode\n tooltip?: ReactNode\n description?: ReactNode\n error?: ReactNode | boolean\n /** Swaps the value for a skeleton and makes the field read-only. */\n loading?: boolean\n dataTestId?: InputDataTestId\n}\n\n/** Bordered text field; `icon` adds a leading icon, `label`/`description`/`error` add the field chrome, `tooltip` puts an info icon next to the label, `loading` swaps the value for a skeleton. */\nexport const Input = forwardRef<HTMLInputElement, InputProps>(\n (\n {\n size = 'default',\n icon,\n label,\n tooltip,\n description,\n error,\n disabled,\n loading,\n readOnly,\n className,\n id,\n dataTestId,\n ...rest\n },\n ref,\n ) => {\n const fallbackId = useId()\n const inputId = id ?? fallbackId\n const errorId = `${inputId}-error`\n\n const hasError = Boolean(error)\n const errorMessage = typeof error === 'boolean' ? null : error\n const showErrorMessage = errorMessage != null\n\n return (\n <div\n className={cn(styles.field, className)}\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 {tooltip != null ? <InfoTooltip content={tooltip} /> : null}\n </span>\n ) : null}\n <label\n className={cn(styles.root, styles[size], {\n [styles.error]: hasError,\n [styles.disabled]: disabled,\n [styles.loading]: loading,\n })}\n >\n {icon ? (\n <span\n className={styles.icon}\n aria-hidden='true'\n data-testid={dataTestId?.icon}\n >\n {icon}\n </span>\n ) : null}\n <span className={styles.control}>\n <input\n ref={ref}\n id={inputId}\n className={styles.input}\n disabled={disabled}\n readOnly={loading || readOnly}\n aria-busy={loading || undefined}\n aria-invalid={hasError || undefined}\n aria-describedby={showErrorMessage ? errorId : undefined}\n data-testid={dataTestId?.input}\n {...rest}\n />\n {loading ? (\n <Skeleton variant='text' className={styles.skeleton} />\n ) : null}\n </span>\n </label>\n {showErrorMessage ? (\n <p\n id={errorId}\n className={styles.errorText}\n role='alert'\n data-testid={dataTestId?.error}\n >\n {errorMessage}\n </p>\n ) : null}\n {description != null ? (\n <p\n className={styles.description}\n data-testid={dataTestId?.description}\n >\n {description}\n </p>\n ) : null}\n </div>\n )\n },\n)\n\nInput.displayName = 'Input'\n"],"names":["Input","forwardRef","_ref","ref","size","icon","label","tooltip","description","error","disabled","loading","readOnly","className","id","dataTestId","rest","fallbackId","useId","inputId","errorId","hasError","Boolean","errorMessage","showErrorMessage","_jsxs","cn","styles","field","root","children","labelRow","_jsx","htmlFor","InfoTooltip","content","control","input","undefined","Skeleton","variant","skeleton","errorText","role","displayName"],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
const styles = {"field":"Input-module_field__INC-m","labelRow":"Input-module_labelRow__AT-Kg","label":"Input-module_label__1UZiS","root":"Input-module_root__zCKm2","input":"Input-module_input__paElZ","error":"Input-module_error__kcS-O","disabled":"Input-module_disabled__fbybp","default":"Input-module_default__UeWH5","small":"Input-module_small__ESlJP","icon":"Input-module_icon__2IBf9","errorText":"Input-module_errorText__jYCqP","description":"Input-module_description__EVlJm"};
|
|
3
|
+
const styles = {"field":"Input-module_field__INC-m","labelRow":"Input-module_labelRow__AT-Kg","label":"Input-module_label__1UZiS","root":"Input-module_root__zCKm2","input":"Input-module_input__paElZ","error":"Input-module_error__kcS-O","disabled":"Input-module_disabled__fbybp","default":"Input-module_default__UeWH5","control":"Input-module_control__bTG7Y","small":"Input-module_small__ESlJP","loading":"Input-module_loading__pBWPp","skeleton":"Input-module_skeleton__-STiF","icon":"Input-module_icon__2IBf9","errorText":"Input-module_errorText__jYCqP","description":"Input-module_description__EVlJm"};
|
|
4
4
|
|
|
5
5
|
module.exports = styles;
|
|
6
6
|
//# sourceMappingURL=Input.module.css.cjs.map
|
|
@@ -7,32 +7,44 @@ const LinkProvider = require('./LinkProvider.cjs');
|
|
|
7
7
|
const jsxRuntime = require('react/jsx-runtime');
|
|
8
8
|
|
|
9
9
|
const ABSOLUTE_URL = /^([a-z][a-z\d+.-]*:|\/\/)/i;
|
|
10
|
-
const
|
|
10
|
+
const WEB_URL = /^(https?:)?\/\//i;
|
|
11
|
+
const opensInNewTab = _ref => {
|
|
12
|
+
let {
|
|
13
|
+
href,
|
|
14
|
+
target,
|
|
15
|
+
external
|
|
16
|
+
} = _ref;
|
|
17
|
+
return external ?? (target === undefined && href !== undefined && WEB_URL.test(href));
|
|
18
|
+
};
|
|
19
|
+
const pickLink = (_ref2, href, _ref3) => {
|
|
11
20
|
let {
|
|
12
21
|
component,
|
|
13
22
|
externalComponent
|
|
14
|
-
} =
|
|
23
|
+
} = _ref2;
|
|
15
24
|
let {
|
|
16
25
|
target,
|
|
17
26
|
download
|
|
18
|
-
} =
|
|
27
|
+
} = _ref3;
|
|
19
28
|
if (ABSOLUTE_URL.test(href)) return externalComponent;
|
|
20
29
|
if (href.startsWith('#') || target && target !== '_self' || download != null && download !== false) return undefined;
|
|
21
30
|
return component;
|
|
22
31
|
};
|
|
23
32
|
|
|
24
33
|
/** `<a>` that hands in-app hrefs to `LinkProvider`'s `component` and absolute URLs to its `externalComponent`. */
|
|
25
|
-
const Anchor = /*#__PURE__*/react.forwardRef((
|
|
34
|
+
const Anchor = /*#__PURE__*/react.forwardRef((_ref4, ref) => {
|
|
26
35
|
let {
|
|
27
36
|
external,
|
|
28
37
|
disabled,
|
|
29
38
|
linkProps,
|
|
30
39
|
...rest
|
|
31
|
-
} =
|
|
40
|
+
} = _ref4;
|
|
32
41
|
const links = LinkProvider.useLinkComponents();
|
|
33
42
|
const props = {
|
|
34
43
|
...rest,
|
|
35
|
-
...(
|
|
44
|
+
...(!disabled && opensInNewTab({
|
|
45
|
+
...rest,
|
|
46
|
+
external
|
|
47
|
+
}) && {
|
|
36
48
|
target: rest.target ?? '_blank',
|
|
37
49
|
rel: rest.rel ?? 'noopener noreferrer'
|
|
38
50
|
}),
|
|
@@ -66,4 +78,5 @@ const Anchor = /*#__PURE__*/react.forwardRef((_ref3, ref) => {
|
|
|
66
78
|
Anchor.displayName = 'Anchor';
|
|
67
79
|
|
|
68
80
|
exports.Anchor = Anchor;
|
|
81
|
+
exports.opensInNewTab = opensInNewTab;
|
|
69
82
|
//# sourceMappingURL=Anchor.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Anchor.cjs","sources":["../../../src/link-provider/Anchor.tsx"],"sourcesContent":["import { forwardRef, type AnchorHTMLAttributes } from 'react'\n\nimport {\n useLinkComponents,\n type LinkComponents,\n type LinkRouterProps,\n} from './LinkProvider'\n\nconst ABSOLUTE_URL = /^([a-z][a-z\\d+.-]*:|\\/\\/)/i\n\nexport type AnchorProps = AnchorHTMLAttributes<HTMLAnchorElement> & {\n /**
|
|
1
|
+
{"version":3,"file":"Anchor.cjs","sources":["../../../src/link-provider/Anchor.tsx"],"sourcesContent":["import { forwardRef, type AnchorHTMLAttributes } from 'react'\n\nimport {\n useLinkComponents,\n type LinkComponents,\n type LinkRouterProps,\n} from './LinkProvider'\n\nconst ABSOLUTE_URL = /^([a-z][a-z\\d+.-]*:|\\/\\/)/i\nconst WEB_URL = /^(https?:)?\\/\\//i\n\nexport type AnchorProps = AnchorHTMLAttributes<HTMLAnchorElement> & {\n /** @deprecated Absolute http(s) URLs open in a new tab automatically; pass `target` to override. */\n external?: boolean\n /** Renders an href-less `role='link'` with `aria-disabled`, and drops `onClick`. */\n disabled?: boolean\n /** Router-only props (e.g. `prefetch`), passed to `LinkProvider` components and never to a plain `<a>`. */\n linkProps?: LinkRouterProps\n}\n\nexport const opensInNewTab = ({\n href,\n target,\n external,\n}: Pick<AnchorProps, 'href' | 'target' | 'external'>) =>\n external ?? (target === undefined && href !== undefined && WEB_URL.test(href))\n\nconst pickLink = (\n { component, externalComponent }: LinkComponents,\n href: string,\n { target, download }: AnchorHTMLAttributes<HTMLAnchorElement>,\n) => {\n if (ABSOLUTE_URL.test(href)) return externalComponent\n if (\n href.startsWith('#') ||\n (target && target !== '_self') ||\n (download != null && download !== false)\n )\n return undefined\n return component\n}\n\n/** `<a>` that hands in-app hrefs to `LinkProvider`'s `component` and absolute URLs to its `externalComponent`. */\nexport const Anchor = forwardRef<HTMLAnchorElement, AnchorProps>(\n ({ external, disabled, linkProps, ...rest }, ref) => {\n const links = useLinkComponents()\n const props: AnchorHTMLAttributes<HTMLAnchorElement> = {\n ...rest,\n ...(!disabled &&\n opensInNewTab({ ...rest, external }) && {\n target: rest.target ?? '_blank',\n rel: rest.rel ?? 'noopener noreferrer',\n }),\n ...(disabled && {\n href: undefined,\n onClick: undefined,\n tabIndex: undefined,\n role: rest.role ?? 'link',\n 'aria-disabled': true,\n }),\n }\n const { href } = props\n\n if (href !== undefined) {\n const Link = pickLink(links, href, props)\n if (Link) return <Link ref={ref} {...props} {...linkProps} href={href} />\n }\n\n // eslint-disable-next-line jsx-a11y/anchor-has-content -- children arrive via props\n return <a ref={ref} {...props} />\n },\n)\n\nAnchor.displayName = 'Anchor'\n"],"names":["ABSOLUTE_URL","WEB_URL","opensInNewTab","_ref","href","target","external","undefined","test","pickLink","_ref2","_ref3","component","externalComponent","download","startsWith","Anchor","forwardRef","_ref4","ref","disabled","linkProps","rest","links","useLinkComponents","props","rel","onClick","tabIndex","role","Link","_jsx","displayName"],"mappings":";;;;;;;;AAQA,MAAMA,YAAY,GAAG,4BAA4B,CAAA;AACjD,MAAMC,OAAO,GAAG,kBAAkB,CAAA;AAW3B,MAAMC,aAAa,GAAGC,IAAA,IAAA;EAAA,IAAC;IAC5BC,IAAI;IACJC,MAAM;AACNC,IAAAA,QAAAA;AACiD,GAAC,GAAAH,IAAA,CAAA;AAAA,EAAA,OAClDG,QAAQ,KAAKD,MAAM,KAAKE,SAAS,IAAIH,IAAI,KAAKG,SAAS,IAAIN,OAAO,CAACO,IAAI,CAACJ,IAAI,CAAC,CAAC,CAAA;AAAA,EAAA;AAEhF,MAAMK,QAAQ,GAAGA,CAAAC,KAAA,EAEfN,IAAY,EAAAO,KAAA,KAET;EAAA,IAHH;IAAEC,SAAS;AAAEC,IAAAA,iBAAAA;AAAkC,GAAC,GAAAH,KAAA,CAAA;EAAA,IAEhD;IAAEL,MAAM;AAAES,IAAAA,QAAAA;AAAkD,GAAC,GAAAH,KAAA,CAAA;EAE7D,IAAIX,YAAY,CAACQ,IAAI,CAACJ,IAAI,CAAC,EAAE,OAAOS,iBAAiB,CAAA;EACrD,IACET,IAAI,CAACW,UAAU,CAAC,GAAG,CAAC,IACnBV,MAAM,IAAIA,MAAM,KAAK,OAAQ,IAC7BS,QAAQ,IAAI,IAAI,IAAIA,QAAQ,KAAK,KAAM,EAExC,OAAOP,SAAS,CAAA;AAClB,EAAA,OAAOK,SAAS,CAAA;AAClB,CAAC,CAAA;;AAED;AACO,MAAMI,MAAM,gBAAGC,gBAAU,CAC9B,CAAAC,KAAA,EAA6CC,GAAG,KAAK;EAAA,IAApD;IAAEb,QAAQ;IAAEc,QAAQ;IAAEC,SAAS;IAAE,GAAGC,IAAAA;AAAK,GAAC,GAAAJ,KAAA,CAAA;AACzC,EAAA,MAAMK,KAAK,GAAGC,8BAAiB,EAAE,CAAA;AACjC,EAAA,MAAMC,KAA8C,GAAG;AACrD,IAAA,GAAGH,IAAI;AACP,IAAA,IAAI,CAACF,QAAQ,IACXlB,aAAa,CAAC;AAAE,MAAA,GAAGoB,IAAI;AAAEhB,MAAAA,QAAAA;AAAS,KAAC,CAAC,IAAI;AACtCD,MAAAA,MAAM,EAAEiB,IAAI,CAACjB,MAAM,IAAI,QAAQ;AAC/BqB,MAAAA,GAAG,EAAEJ,IAAI,CAACI,GAAG,IAAI,qBAAA;AACnB,KAAC,CAAC;AACJ,IAAA,IAAIN,QAAQ,IAAI;AACdhB,MAAAA,IAAI,EAAEG,SAAS;AACfoB,MAAAA,OAAO,EAAEpB,SAAS;AAClBqB,MAAAA,QAAQ,EAAErB,SAAS;AACnBsB,MAAAA,IAAI,EAAEP,IAAI,CAACO,IAAI,IAAI,MAAM;AACzB,MAAA,eAAe,EAAE,IAAA;KAClB,CAAA;GACF,CAAA;EACD,MAAM;AAAEzB,IAAAA,IAAAA;AAAK,GAAC,GAAGqB,KAAK,CAAA;EAEtB,IAAIrB,IAAI,KAAKG,SAAS,EAAE;IACtB,MAAMuB,IAAI,GAAGrB,QAAQ,CAACc,KAAK,EAAEnB,IAAI,EAAEqB,KAAK,CAAC,CAAA;AACzC,IAAA,IAAIK,IAAI,EAAE,oBAAOC,cAAA,CAACD,IAAI,EAAA;AAACX,MAAAA,GAAG,EAAEA,GAAI;AAAA,MAAA,GAAKM,KAAK;AAAA,MAAA,GAAMJ,SAAS;AAAEjB,MAAAA,IAAI,EAAEA,IAAAA;AAAK,KAAE,CAAC,CAAA;AAC3E,GAAA;;AAEA;AACA,EAAA,oBAAO2B,cAAA,CAAA,GAAA,EAAA;AAAGZ,IAAAA,GAAG,EAAEA,GAAI;IAAA,GAAKM,KAAAA;AAAK,GAAG,CAAC,CAAA;AACnC,CACF,EAAC;AAEDT,MAAM,CAACgB,WAAW,GAAG,QAAQ;;;;;"}
|
|
@@ -6,7 +6,7 @@ const react = require('react');
|
|
|
6
6
|
const jsxRuntime = require('react/jsx-runtime');
|
|
7
7
|
|
|
8
8
|
const LinkContext = /*#__PURE__*/react.createContext({});
|
|
9
|
-
/** Renders app-ui links with your components: `component` for in-app hrefs
|
|
9
|
+
/** Renders app-ui links with your components: `component` for in-app hrefs, `externalComponent` for absolute URLs. Both must be `forwardRef` components forwarding `ref` to an `<a>`, and stable module-level references, or every link remounts each render. */
|
|
10
10
|
const LinkProvider = _ref => {
|
|
11
11
|
let {
|
|
12
12
|
component,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LinkProvider.cjs","sources":["../../../src/link-provider/LinkProvider.tsx"],"sourcesContent":["import {\n createContext,\n useContext,\n useMemo,\n type AnchorHTMLAttributes,\n type ReactNode,\n type Ref,\n} from 'react'\n\n/** Augment via `declare module '@lidofinance/lido-app-ui'` to type router-only props (e.g. Next's `prefetch`), set per link with `linkProps`. */\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type\nexport interface LinkRouterProps {}\n\nexport type LinkComponentProps = AnchorHTMLAttributes<HTMLAnchorElement> &\n LinkRouterProps & {\n href: string\n ref?: Ref<HTMLAnchorElement>\n }\n\n/** Wrap adapters in `forwardRef`: under React 18 `ref` arrives as the second argument, never as a prop. */\nexport type LinkComponent = (props: LinkComponentProps) => ReactNode\n\nexport type LinkComponents = {\n /** Renders in-app hrefs (relative, not hash, `download` or non-`_self` `target`). */\n component?: LinkComponent\n /** Renders absolute URLs, including `mailto:` and protocol-relative `//`. */\n externalComponent?: LinkComponent\n}\n\nconst LinkContext = createContext<LinkComponents>({})\n\nexport type LinkProviderProps = LinkComponents & {\n children?: ReactNode\n}\n\n/** Renders app-ui links with your components: `component` for in-app hrefs
|
|
1
|
+
{"version":3,"file":"LinkProvider.cjs","sources":["../../../src/link-provider/LinkProvider.tsx"],"sourcesContent":["import {\n createContext,\n useContext,\n useMemo,\n type AnchorHTMLAttributes,\n type ReactNode,\n type Ref,\n} from 'react'\n\n/** Augment via `declare module '@lidofinance/lido-app-ui'` to type router-only props (e.g. Next's `prefetch`), set per link with `linkProps`. */\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type\nexport interface LinkRouterProps {}\n\nexport type LinkComponentProps = AnchorHTMLAttributes<HTMLAnchorElement> &\n LinkRouterProps & {\n href: string\n ref?: Ref<HTMLAnchorElement>\n }\n\n/** Wrap adapters in `forwardRef`: under React 18 `ref` arrives as the second argument, never as a prop. */\nexport type LinkComponent = (props: LinkComponentProps) => ReactNode\n\nexport type LinkComponents = {\n /** Renders in-app hrefs (relative, not hash, `download` or non-`_self` `target`). */\n component?: LinkComponent\n /** Renders absolute URLs, including `mailto:` and protocol-relative `//`. */\n externalComponent?: LinkComponent\n}\n\nconst LinkContext = createContext<LinkComponents>({})\n\nexport type LinkProviderProps = LinkComponents & {\n children?: ReactNode\n}\n\n/** Renders app-ui links with your components: `component` for in-app hrefs, `externalComponent` for absolute URLs. Both must be `forwardRef` components forwarding `ref` to an `<a>`, and stable module-level references, or every link remounts each render. */\nexport const LinkProvider = ({\n component,\n externalComponent,\n children,\n}: LinkProviderProps) => {\n const value = useMemo(\n () => ({ component, externalComponent }),\n [component, externalComponent],\n )\n return <LinkContext.Provider value={value}>{children}</LinkContext.Provider>\n}\n\nexport const useLinkComponents = () => useContext(LinkContext)\n"],"names":["LinkContext","createContext","LinkProvider","_ref","component","externalComponent","children","value","useMemo","_jsx","Provider","useLinkComponents","useContext"],"mappings":";;;;;;;AA6BA,MAAMA,WAAW,gBAAGC,mBAAa,CAAiB,EAAE,CAAC,CAAA;AAMrD;AACaC,MAAAA,YAAY,GAAGC,IAAA,IAIH;EAAA,IAJI;IAC3BC,SAAS;IACTC,iBAAiB;AACjBC,IAAAA,QAAAA;AACiB,GAAC,GAAAH,IAAA,CAAA;AAClB,EAAA,MAAMI,KAAK,GAAGC,aAAO,CACnB,OAAO;IAAEJ,SAAS;AAAEC,IAAAA,iBAAAA;AAAkB,GAAC,CAAC,EACxC,CAACD,SAAS,EAAEC,iBAAiB,CAC/B,CAAC,CAAA;AACD,EAAA,oBAAOI,cAAA,CAACT,WAAW,CAACU,QAAQ,EAAA;AAACH,IAAAA,KAAK,EAAEA,KAAM;AAAAD,IAAAA,QAAA,EAAEA,QAAAA;AAAQ,GAAuB,CAAC,CAAA;AAC9E,EAAC;AAEM,MAAMK,iBAAiB,GAAGA,MAAMC,gBAAU,CAACZ,WAAW;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Logo.cjs","sources":["../../../src/logo/Logo.tsx"],"sourcesContent":["import {\n forwardRef,\n type AnchorHTMLAttributes,\n type HTMLAttributes,\n type Ref,\n} from 'react'\n\nimport cn from 'classnames'\n\nimport { ActionElement } from '../utils'\nimport styles from './Logo.module.css'\n\nexport type LogoVariant = 'full' | 'compact' | 'auto'\n\nexport type LogoDataTestId = { root?: string; product?: string }\n\nexport type LogoProps = Omit<HTMLAttributes<HTMLElement>, 'children'> &\n Pick<AnchorHTMLAttributes<HTMLAnchorElement>, 'target' | 'download'> & {\n /** `full` shows the wordmark, `compact` drops it, `auto` drops it
|
|
1
|
+
{"version":3,"file":"Logo.cjs","sources":["../../../src/logo/Logo.tsx"],"sourcesContent":["import {\n forwardRef,\n type AnchorHTMLAttributes,\n type HTMLAttributes,\n type Ref,\n} from 'react'\n\nimport cn from 'classnames'\n\nimport type { AnchorProps } from '../link-provider/Anchor'\nimport { ActionElement } from '../utils'\nimport styles from './Logo.module.css'\n\nexport type LogoVariant = 'full' | 'compact' | 'auto'\n\nexport type LogoDataTestId = { root?: string; product?: string }\n\nexport type LogoProps = Omit<HTMLAttributes<HTMLElement>, 'children'> &\n Pick<AnchorHTMLAttributes<HTMLAnchorElement>, 'target' | 'download'> & {\n /** `full` shows the wordmark, `compact` drops it, `auto` drops it at `--lido-app-ui-breakpoint-lg` and below (1024px), overridable per instance with `--lido-app-ui-logo-breakpoint`. */\n variant?: LogoVariant\n /** Product name shown after a divider and added to the accessible name. */\n product?: string\n /** Renders a link; with only `onClick` it renders a button, otherwise a plain `role=\"img\"` element. */\n href?: string\n dataTestId?: LogoDataTestId\n } & Pick<AnchorProps, 'external'>\n\nconst DROPLET = (\n <svg\n className={styles.droplet}\n viewBox='38 26 23 32'\n fill='currentColor'\n aria-hidden='true'\n >\n <path\n fillRule='evenodd'\n clipRule='evenodd'\n d='M49.485 26L57.6 38.398l-8.116 4.613-8.117-4.613L49.485 26zM43.85 37.81l5.634-8.602 5.633 8.601-5.633 3.201-5.634-3.2z'\n />\n <path d='M49.478 45.736l-9.416-5.35-.255.39c-2.896 4.428-2.25 10.226 1.554 13.945 4.48 4.372 11.747 4.372 16.233 0 3.812-3.719 4.458-9.517 1.554-13.945l-.254-.39-9.416 5.35z' />\n </svg>\n)\n\nconst WORDMARK = (\n <span className={styles.wordmark}>\n <svg\n className={styles.wordmarkSvg}\n viewBox='61 26 101 32'\n fill='currentColor'\n aria-hidden='true'\n >\n <path d='M90.17 50.449H79.462V33.551h3.267v13.917h7.441v2.981zm16.422 0h-3.267V33.551h3.267V50.45zm13.242 0V33.551h5.597c.85 0 1.54.029 2.062.093 1.351.156 2.519.624 3.492 1.398.988.773 1.735 1.767 2.244 2.98.515 1.207.769 2.534.769 3.982 0 1.448-.254 2.775-.769 3.988-.516 1.207-1.264 2.193-2.244 2.967-.98.773-2.141 1.242-3.492 1.398-.53.064-1.219.092-2.062.092h-5.597zm5.597-3.002c.85 0 1.474-.043 1.873-.12a3.218 3.218 0 001.801-1.001 5.002 5.002 0 001.082-1.923 7.97 7.97 0 00.363-2.406 7.96 7.96 0 00-.371-2.442c-.239-.76-.602-1.398-1.096-1.916a3.123 3.123 0 00-1.779-.972c-.399-.078-1.023-.12-1.873-.12h-2.279V47.44h2.279v.007zm28.191 3.357c-1.707 0-3.188-.362-4.458-1.093a7.432 7.432 0 01-2.919-3.102c-.675-1.327-1.009-2.867-1.009-4.613 0-1.745.334-3.285 1.009-4.613.683-1.327 1.656-2.356 2.919-3.087 1.263-.738 2.751-1.1 4.458-1.1 1.706 0 3.187.37 4.457 1.1a7.27 7.27 0 012.904 3.087c.683 1.328 1.024 2.868 1.024 4.613 0 1.746-.341 3.286-1.024 4.613-.675 1.328-1.641 2.364-2.904 3.102-1.263.73-2.751 1.093-4.457 1.093zm.094-3.002c1.06 0 1.946-.242 2.664-.717.719-.476 1.264-1.15 1.619-2.016.363-.865.538-1.887.538-3.065 0-1.817-.422-3.237-1.271-4.259-.849-1.021-2.098-1.54-3.746-1.54-1.06 0-1.946.242-2.664.717-.719.476-1.264 1.15-1.619 2.016-.363.865-.538 1.887-.538 3.066 0 1.816.421 3.236 1.271 4.258.849 1.022 2.098 1.54 3.746 1.54z' />\n </svg>\n </span>\n)\n\n/** Lido droplet with wordmark and an optional product name. */\nexport const Logo = forwardRef<HTMLElement, LogoProps>(\n (\n {\n variant = 'full',\n product,\n href,\n external,\n onClick,\n className,\n dataTestId,\n ...rest\n },\n ref,\n ) => {\n const label = product ? `Lido ${product}` : 'Lido'\n const content = (\n <>\n <span className={styles.mark}>\n {DROPLET}\n {variant === 'compact' ? null : WORDMARK}\n </span>\n {product ? (\n <>\n <span className={styles.divider} aria-hidden='true' />\n <span className={styles.product} data-testid={dataTestId?.product}>\n {product}\n </span>\n </>\n ) : null}\n </>\n )\n const classes = cn(styles.root, styles[variant], className)\n\n if (href || onClick) {\n return (\n <ActionElement\n ref={ref as Ref<HTMLAnchorElement | HTMLButtonElement>}\n className={cn(classes, styles.interactive)}\n aria-label={label}\n data-testid={dataTestId?.root}\n {...{\n href,\n external: href ? external : undefined,\n onClick,\n ...rest,\n }}\n >\n {content}\n </ActionElement>\n )\n }\n\n return (\n <span\n ref={ref as Ref<HTMLSpanElement>}\n role='img'\n aria-label={label}\n className={classes}\n data-testid={dataTestId?.root}\n {...rest}\n >\n {content}\n </span>\n )\n },\n)\n\nLogo.displayName = 'Logo'\n"],"names":["DROPLET","_jsxs","className","styles","droplet","viewBox","fill","children","_jsx","fillRule","clipRule","d","WORDMARK","wordmark","wordmarkSvg","Logo","forwardRef","_ref","ref","variant","product","href","external","onClick","dataTestId","rest","label","content","_Fragment","mark","divider","classes","cn","root","ActionElement","interactive","undefined","role","displayName"],"mappings":"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"}
|
|
@@ -14,17 +14,21 @@ const NavLink = /*#__PURE__*/react.forwardRef((_ref, ref) => {
|
|
|
14
14
|
let {
|
|
15
15
|
active = false,
|
|
16
16
|
icon,
|
|
17
|
-
external
|
|
17
|
+
external,
|
|
18
18
|
className,
|
|
19
19
|
children,
|
|
20
20
|
dataTestId,
|
|
21
21
|
...rest
|
|
22
22
|
} = _ref;
|
|
23
|
+
const newTab = Anchor.opensInNewTab({
|
|
24
|
+
...rest,
|
|
25
|
+
external
|
|
26
|
+
});
|
|
23
27
|
return /*#__PURE__*/jsxRuntime.jsxs(Anchor.Anchor, {
|
|
24
28
|
ref: ref,
|
|
25
29
|
className: cn(NavLink_module.link, active && NavLink_module.active, className),
|
|
26
30
|
"aria-current": active ? 'page' : undefined,
|
|
27
|
-
external:
|
|
31
|
+
external: newTab,
|
|
28
32
|
"data-testid": dataTestId?.root,
|
|
29
33
|
...rest,
|
|
30
34
|
children: [icon != null ? /*#__PURE__*/jsxRuntime.jsx("span", {
|
|
@@ -32,7 +36,7 @@ const NavLink = /*#__PURE__*/react.forwardRef((_ref, ref) => {
|
|
|
32
36
|
"aria-hidden": "true",
|
|
33
37
|
"data-testid": dataTestId?.icon,
|
|
34
38
|
children: icon
|
|
35
|
-
}) : null, children,
|
|
39
|
+
}) : null, children, newTab ? /*#__PURE__*/jsxRuntime.jsx("span", {
|
|
36
40
|
className: NavLink_module.icon,
|
|
37
41
|
"aria-hidden": "true",
|
|
38
42
|
"data-testid": dataTestId?.externalIcon,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavLink.cjs","sources":["../../../src/nav-link/NavLink.tsx"],"sourcesContent":["import { forwardRef, type AnchorHTMLAttributes, type ReactNode } from 'react'\n\nimport cn from 'classnames'\n\nimport { IconLink } from '../icons'\nimport {
|
|
1
|
+
{"version":3,"file":"NavLink.cjs","sources":["../../../src/nav-link/NavLink.tsx"],"sourcesContent":["import { forwardRef, type AnchorHTMLAttributes, type ReactNode } from 'react'\n\nimport cn from 'classnames'\n\nimport { IconLink } from '../icons'\nimport {\n Anchor,\n opensInNewTab,\n type AnchorProps,\n} from '../link-provider/Anchor'\nimport styles from './NavLink.module.css'\n\nexport type NavLinkDataTestId = {\n root?: string\n icon?: string\n externalIcon?: string\n}\n\nexport type NavLinkProps = AnchorHTMLAttributes<HTMLAnchorElement> & {\n /** Marks the current page: sets `aria-current=\"page\"` and the active style. */\n active?: boolean\n /** Leading icon. */\n icon?: ReactNode\n /** @deprecated Absolute http(s) URLs open in a new tab with the arrow automatically; pass `target` to override. */\n external?: boolean\n linkProps?: AnchorProps['linkProps']\n dataTestId?: NavLinkDataTestId\n}\n\n/** Top-navigation link for a Header; pass `aria-current` for sections active on sub-routes (HeaderNav centers any truthy value). */\nexport const NavLink = forwardRef<HTMLAnchorElement, NavLinkProps>(\n (\n {\n active = false,\n icon,\n external,\n className,\n children,\n dataTestId,\n ...rest\n },\n ref,\n ) => {\n const newTab = opensInNewTab({ ...rest, external })\n return (\n <Anchor\n ref={ref}\n className={cn(styles.link, active && styles.active, className)}\n aria-current={active ? 'page' : undefined}\n external={newTab}\n data-testid={dataTestId?.root}\n {...rest}\n >\n {icon != null ? (\n <span\n className={styles.icon}\n aria-hidden='true'\n data-testid={dataTestId?.icon}\n >\n {icon}\n </span>\n ) : null}\n {children}\n {newTab ? (\n <span\n className={styles.icon}\n aria-hidden='true'\n data-testid={dataTestId?.externalIcon}\n >\n <IconLink />\n </span>\n ) : null}\n </Anchor>\n )\n },\n)\n\nNavLink.displayName = 'NavLink'\n"],"names":["NavLink","forwardRef","_ref","ref","active","icon","external","className","children","dataTestId","rest","newTab","opensInNewTab","_jsxs","Anchor","cn","styles","link","undefined","root","_jsx","externalIcon","IconLink","displayName"],"mappings":";;;;;;;;;;;AA6BA;AACO,MAAMA,OAAO,gBAAGC,gBAAU,CAC/B,CAAAC,IAAA,EAUEC,GAAG,KACA;EAAA,IAVH;AACEC,IAAAA,MAAM,GAAG,KAAK;IACdC,IAAI;IACJC,QAAQ;IACRC,SAAS;IACTC,QAAQ;IACRC,UAAU;IACV,GAAGC,IAAAA;AACL,GAAC,GAAAR,IAAA,CAAA;EAGD,MAAMS,MAAM,GAAGC,oBAAa,CAAC;AAAE,IAAA,GAAGF,IAAI;AAAEJ,IAAAA,QAAAA;AAAS,GAAC,CAAC,CAAA;EACnD,oBACEO,eAAA,CAACC,aAAM,EAAA;AACLX,IAAAA,GAAG,EAAEA,GAAI;AACTI,IAAAA,SAAS,EAAEQ,EAAE,CAACC,cAAM,CAACC,IAAI,EAAEb,MAAM,IAAIY,cAAM,CAACZ,MAAM,EAAEG,SAAS,CAAE;AAC/D,IAAA,cAAA,EAAcH,MAAM,GAAG,MAAM,GAAGc,SAAU;AAC1CZ,IAAAA,QAAQ,EAAEK,MAAO;IACjB,aAAaF,EAAAA,UAAU,EAAEU,IAAK;AAAA,IAAA,GAC1BT,IAAI;AAAAF,IAAAA,QAAA,EAEPH,CAAAA,IAAI,IAAI,IAAI,gBACXe,cAAA,CAAA,MAAA,EAAA;MACEb,SAAS,EAAES,cAAM,CAACX,IAAK;AACvB,MAAA,aAAA,EAAY,MAAM;MAClB,aAAaI,EAAAA,UAAU,EAAEJ,IAAK;AAAAG,MAAAA,QAAA,EAE7BH,IAAAA;KACG,CAAC,GACL,IAAI,EACPG,QAAQ,EACRG,MAAM,gBACLS,cAAA,CAAA,MAAA,EAAA;MACEb,SAAS,EAAES,cAAM,CAACX,IAAK;AACvB,MAAA,aAAA,EAAY,MAAM;MAClB,aAAaI,EAAAA,UAAU,EAAEY,YAAa;AAAAb,MAAAA,QAAA,eAEtCY,cAAA,CAACE,iBAAQ,EAAE,EAAA,CAAA;KACP,CAAC,GACL,IAAI,CAAA;AAAA,GACF,CAAC,CAAA;AAEb,CACF,EAAC;AAEDtB,OAAO,CAACuB,WAAW,GAAG,SAAS;;;;"}
|
|
@@ -8,7 +8,9 @@ const RichInput_module = require('./RichInput.module.css.cjs');
|
|
|
8
8
|
const jsxRuntime = require('react/jsx-runtime');
|
|
9
9
|
const Tag = require('../tag/Tag.cjs');
|
|
10
10
|
const InfoTooltip = require('../info-tooltip/InfoTooltip.cjs');
|
|
11
|
+
const IconLockKeyhole = require('../icons/components/base/IconLockKeyhole.cjs');
|
|
11
12
|
const Tooltip = require('../tooltip/Tooltip.cjs');
|
|
13
|
+
const Skeleton = require('../skeleton/Skeleton.cjs');
|
|
12
14
|
|
|
13
15
|
// Keep only digits and a single decimal point; comma is treated as the
|
|
14
16
|
// decimal separator and normalized to a dot (en-US canonical form).
|
|
@@ -22,7 +24,7 @@ const sanitizeDecimal = raw => {
|
|
|
22
24
|
};
|
|
23
25
|
const noop = () => undefined;
|
|
24
26
|
|
|
25
|
-
/** Amount field for supply and borrow forms: token picker, fiat equivalent, balance and a Max shortcut in one card; input is filtered to decimals as you type. `disabled` dims the card and hides Max. */
|
|
27
|
+
/** Amount field for supply and borrow forms: token picker, fiat equivalent, balance and a Max shortcut in one card; input is filtered to decimals as you type. `disabled` dims the card and hides Max; `locked` makes it read-only without Max; `loading` shows a skeleton for the amount and hides the fiat line. */
|
|
26
28
|
const RichInput = _ref => {
|
|
27
29
|
let {
|
|
28
30
|
label,
|
|
@@ -41,6 +43,10 @@ const RichInput = _ref => {
|
|
|
41
43
|
className,
|
|
42
44
|
id,
|
|
43
45
|
disabled,
|
|
46
|
+
locked,
|
|
47
|
+
lockedTooltip,
|
|
48
|
+
loading,
|
|
49
|
+
readOnly,
|
|
44
50
|
dataTestId,
|
|
45
51
|
...inputProps
|
|
46
52
|
} = _ref;
|
|
@@ -50,8 +56,9 @@ const RichInput = _ref => {
|
|
|
50
56
|
const hasError = !!error;
|
|
51
57
|
const showErrorMessage = !!errorText;
|
|
52
58
|
const errorId = `${inputId}-error`;
|
|
53
|
-
const showMax = showMaxButton && !disabled;
|
|
54
|
-
const
|
|
59
|
+
const showMax = showMaxButton && !disabled && !locked && !loading;
|
|
60
|
+
const showSecondary = secondaryValue != null && !loading;
|
|
61
|
+
const hasBottomRow = showSecondary || balance != null || showMax;
|
|
55
62
|
const maxTag = /*#__PURE__*/jsxRuntime.jsx(Tag.Tag, {
|
|
56
63
|
as: "button",
|
|
57
64
|
dataTestId: {
|
|
@@ -90,7 +97,7 @@ const RichInput = _ref => {
|
|
|
90
97
|
className: cn(RichInput_module.root, className),
|
|
91
98
|
"data-testid": dataTestId?.root,
|
|
92
99
|
children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
93
|
-
className: cn(RichInput_module.card, hasError && RichInput_module.error),
|
|
100
|
+
className: cn(RichInput_module.card, hasError && RichInput_module.error, locked && RichInput_module.locked, loading && RichInput_module.loading),
|
|
94
101
|
onClick: handleRootClick,
|
|
95
102
|
children: [label != null ? /*#__PURE__*/jsxRuntime.jsxs("span", {
|
|
96
103
|
className: RichInput_module.labelRow,
|
|
@@ -102,27 +109,50 @@ const RichInput = _ref => {
|
|
|
102
109
|
}), labelTooltip != null ? /*#__PURE__*/jsxRuntime.jsx(InfoTooltip.InfoTooltip, {
|
|
103
110
|
content: labelTooltip,
|
|
104
111
|
size: 20
|
|
112
|
+
}) : null, locked ? lockedTooltip != null ? /*#__PURE__*/jsxRuntime.jsx(InfoTooltip.InfoTooltip, {
|
|
113
|
+
icon: /*#__PURE__*/jsxRuntime.jsx(IconLockKeyhole.IconLockKeyhole, {
|
|
114
|
+
"aria-hidden": "true"
|
|
115
|
+
}),
|
|
116
|
+
size: 20,
|
|
117
|
+
"aria-label": "Locked",
|
|
118
|
+
content: lockedTooltip,
|
|
119
|
+
className: RichInput_module.lock,
|
|
120
|
+
dataTestId: {
|
|
121
|
+
root: dataTestId?.lock
|
|
122
|
+
}
|
|
123
|
+
}) : /*#__PURE__*/jsxRuntime.jsx(IconLockKeyhole.IconLockKeyhole, {
|
|
124
|
+
"aria-hidden": "true",
|
|
125
|
+
className: cn(RichInput_module.lock, RichInput_module.lockIcon),
|
|
126
|
+
"data-testid": dataTestId?.lock
|
|
105
127
|
}) : null]
|
|
106
128
|
}) : null, /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
107
129
|
className: RichInput_module.amountRow,
|
|
108
|
-
children: [/*#__PURE__*/jsxRuntime.
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
130
|
+
children: [/*#__PURE__*/jsxRuntime.jsxs("span", {
|
|
131
|
+
className: RichInput_module.amount,
|
|
132
|
+
children: [/*#__PURE__*/jsxRuntime.jsx("input", {
|
|
133
|
+
ref: inputRef,
|
|
134
|
+
id: inputId,
|
|
135
|
+
className: RichInput_module.input,
|
|
136
|
+
inputMode: "decimal",
|
|
137
|
+
disabled: disabled,
|
|
138
|
+
readOnly: locked || loading || readOnly,
|
|
139
|
+
"aria-busy": loading || undefined,
|
|
140
|
+
"aria-invalid": hasError || undefined,
|
|
141
|
+
"aria-describedby": showErrorMessage ? errorId : undefined,
|
|
142
|
+
onChange: handleChange,
|
|
143
|
+
"data-testid": dataTestId?.input,
|
|
144
|
+
...inputProps
|
|
145
|
+
}), loading ? /*#__PURE__*/jsxRuntime.jsx(Skeleton.Skeleton, {
|
|
146
|
+
variant: "text",
|
|
147
|
+
className: RichInput_module.amountSkeleton
|
|
148
|
+
}) : null]
|
|
119
149
|
}), tokenSelector != null ? /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
120
150
|
className: RichInput_module.token,
|
|
121
151
|
children: tokenSelector
|
|
122
152
|
}) : null]
|
|
123
153
|
}), hasBottomRow ? /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
124
154
|
className: RichInput_module.bottomRow,
|
|
125
|
-
children: [
|
|
155
|
+
children: [showSecondary ? /*#__PURE__*/jsxRuntime.jsx("span", {
|
|
126
156
|
"data-testid": dataTestId?.secondaryValue,
|
|
127
157
|
className: RichInput_module.secondary,
|
|
128
158
|
children: secondaryValue
|
|
@@ -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 MouseEvent,\n type MouseEventHandler,\n type ReactNode,\n} from 'react'\n\nimport cn from 'classnames'\nimport { InfoTooltip } from '../info-tooltip'\nimport { Tag } from '../tag'\nimport { Tooltip, type TooltipPosition } 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 /** Fiat equivalent, bottom left. */\n secondaryValue?: ReactNode\n /** Wallet balance, bottom right. */\n balance?: ReactNode\n /** Slot for a `TokenSelector`. */\n tokenSelector?: ReactNode\n /** Marks the card invalid. */\n error?: boolean\n errorText?: ReactNode\n showMaxButton?: boolean\n onMaxClick?: MouseEventHandler<HTMLButtonElement>\n /** Dims the Max shortcut, leaving the field editable. */\n maxDisabled?: boolean\n /** Explains what Max actually fills in. */\n maxTooltip?: ReactNode\n maxTooltipPosition?: TooltipPosition\n dataTestId?: RichInputDataTestId\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\nconst noop = () => undefined\n\n/** Amount field for supply and borrow forms: token picker, fiat equivalent, balance and a Max shortcut in one card; input is filtered to decimals as you type. `disabled` dims the card and hides Max. */\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 maxTooltipPosition = 'bottom-left',\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 maxTag = (\n <Tag\n as='button'\n dataTestId={{ root: dataTestId?.maxButton }}\n onClick={onMaxClick ?? noop}\n disabled={maxDisabled}\n >\n Max\n </Tag>\n )\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 (\n event.target.closest('button, input, label, [role=\"listbox\"], [tabindex]')\n ) {\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 <InfoTooltip content={labelTooltip} size={20} />\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 && maxTooltip != null ? (\n <Tooltip\n content={maxTooltip}\n position={maxTooltipPosition}\n width={240}\n >\n {maxTag}\n </Tooltip>\n ) : showMax ? (\n maxTag\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":["sanitizeDecimal","raw","normalized","replace","firstDot","indexOf","head","slice","tail","noop","undefined","RichInput","_ref","label","labelTooltip","secondaryValue","balance","tokenSelector","error","errorText","showMaxButton","onMaxClick","maxDisabled","maxTooltip","maxTooltipPosition","onChange","className","id","disabled","dataTestId","inputProps","inputRef","useRef","fallbackId","useId","inputId","hasError","showErrorMessage","errorId","showMax","hasBottomRow","maxTag","_jsx","Tag","as","root","maxButton","onClick","children","handleChange","event","value","rawValue","selectionStart","target","sanitized","removed","length","caret","Math","max","setSelectionRange","handleRootClick","Element","closest","current","focus","_jsxs","cn","styles","card","labelRow","htmlFor","InfoTooltip","content","size","amountRow","ref","input","inputMode","token","bottomRow","secondary","balanceGroup","Tooltip","position","width","errorMessage"],"mappings":";;;;;;;;;;;;AAiDA;AACA;AACA,MAAMA,eAAe,GAAIC,GAAW,IAAa;AAC/C,EAAA,MAAMC,UAAU,GAAGD,GAAG,CAACE,OAAO,CAAC,IAAI,EAAE,GAAG,CAAC,CAACA,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC,CAAA;AAChE,EAAA,MAAMC,QAAQ,GAAGF,UAAU,CAACG,OAAO,CAAC,GAAG,CAAC,CAAA;AACxC,EAAA,IAAID,QAAQ,KAAK,CAAC,CAAC,EAAE,OAAOF,UAAU,CAAA;EACtC,MAAMI,IAAI,GAAGJ,UAAU,CAACK,KAAK,CAAC,CAAC,EAAEH,QAAQ,GAAG,CAAC,CAAC,CAAA;AAC9C,EAAA,MAAMI,IAAI,GAAGN,UAAU,CAACK,KAAK,CAACH,QAAQ,GAAG,CAAC,CAAC,CAACD,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAA;EAC9D,OAAOG,IAAI,GAAGE,IAAI,CAAA;AACpB,CAAC,CAAA;AAED,MAAMC,IAAI,GAAGA,MAAMC,SAAS,CAAA;;AAE5B;AACaC,MAAAA,SAAS,GAAGC,IAAA,IAmBH;EAAA,IAnBI;IACxBC,KAAK;IACLC,YAAY;IACZC,cAAc;IACdC,OAAO;IACPC,aAAa;IACbC,KAAK;IACLC,SAAS;AACTC,IAAAA,aAAa,GAAG,IAAI;IACpBC,UAAU;IACVC,WAAW;IACXC,UAAU;AACVC,IAAAA,kBAAkB,GAAG,aAAa;IAClCC,QAAQ;IACRC,SAAS;IACTC,EAAE;IACFC,QAAQ;IACRC,UAAU;IACV,GAAGC,UAAAA;AACW,GAAC,GAAAlB,IAAA,CAAA;AACf,EAAA,MAAMmB,QAAQ,GAAGC,YAAM,CAAmB,IAAI,CAAC,CAAA;AAC/C,EAAA,MAAMC,UAAU,GAAGC,WAAK,EAAE,CAAA;AAC1B,EAAA,MAAMC,OAAO,GAAGR,EAAE,IAAIM,UAAU,CAAA;AAEhC,EAAA,MAAMG,QAAQ,GAAG,CAAC,CAAClB,KAAK,CAAA;AACxB,EAAA,MAAMmB,gBAAgB,GAAG,CAAC,CAAClB,SAAS,CAAA;AACpC,EAAA,MAAMmB,OAAO,GAAG,CAAGH,EAAAA,OAAO,CAAQ,MAAA,CAAA,CAAA;AAClC,EAAA,MAAMI,OAAO,GAAGnB,aAAa,IAAI,CAACQ,QAAQ,CAAA;EAC1C,MAAMY,YAAY,GAAGzB,cAAc,IAAI,IAAI,IAAIC,OAAO,IAAI,IAAI,IAAIuB,OAAO,CAAA;AAEzE,EAAA,MAAME,MAAM,gBACVC,cAAA,CAACC,OAAG,EAAA;AACFC,IAAAA,EAAE,EAAC,QAAQ;AACXf,IAAAA,UAAU,EAAE;MAAEgB,IAAI,EAAEhB,UAAU,EAAEiB,SAAAA;KAAY;IAC5CC,OAAO,EAAE1B,UAAU,IAAIZ,IAAK;AAC5BmB,IAAAA,QAAQ,EAAEN,WAAY;AAAA0B,IAAAA,QAAA,EACvB,KAAA;AAED,GAAK,CACN,CAAA;EAED,MAAMC,YAAY,GAAIC,KAAoC,IAAK;IAC7D,MAAM;AAAEC,MAAAA,KAAK,EAAEC,QAAQ;AAAEC,MAAAA,cAAAA;KAAgB,GAAGH,KAAK,CAACI,MAAM,CAAA;AACxD,IAAA,MAAMC,SAAS,GAAGvD,eAAe,CAACoD,QAAQ,CAAC,CAAA;IAE3C,IAAIG,SAAS,KAAKH,QAAQ,EAAE;AAC1B;AACA;MACA,MAAMI,OAAO,GAAGJ,QAAQ,CAACK,MAAM,GAAGF,SAAS,CAACE,MAAM,CAAA;AAClDP,MAAAA,KAAK,CAACI,MAAM,CAACH,KAAK,GAAGI,SAAS,CAAA;MAC9B,IAAIF,cAAc,IAAI,IAAI,EAAE;QAC1B,MAAMK,KAAK,GAAGC,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEP,cAAc,GAAGG,OAAO,CAAC,CAAA;QACnDN,KAAK,CAACI,MAAM,CAACO,iBAAiB,CAACH,KAAK,EAAEA,KAAK,CAAC,CAAA;AAC9C,OAAA;AACF,KAAA;IAEAjC,QAAQ,GAAGyB,KAAK,CAAC,CAAA;GAClB,CAAA;EAED,MAAMY,eAAe,GAAIZ,KAAiC,IAAK;AAC7D,IAAA,IAAI,EAAEA,KAAK,CAACI,MAAM,YAAYS,OAAO,CAAC,EAAE,OAAA;IACxC,IACEb,KAAK,CAACI,MAAM,CAACU,OAAO,CAAC,oDAAoD,CAAC,EAC1E;AACA,MAAA,OAAA;AACF,KAAA;AACAjC,IAAAA,QAAQ,CAACkC,OAAO,EAAEC,KAAK,EAAE,CAAA;GAC1B,CAAA;AAED,EAAA,oBACEC,eAAA,CAAA,KAAA,EAAA;IAAKzC,SAAS,EAAE0C,EAAE,CAACC,gBAAM,CAACxB,IAAI,EAAEnB,SAAS,CAAE;IAAC,aAAaG,EAAAA,UAAU,EAAEgB,IAAK;AAAAG,IAAAA,QAAA,gBAMxEmB,eAAA,CAAA,KAAA,EAAA;AACEzC,MAAAA,SAAS,EAAE0C,EAAE,CAACC,gBAAM,CAACC,IAAI,EAAElC,QAAQ,IAAIiC,gBAAM,CAACnD,KAAK,CAAE;AACrD6B,MAAAA,OAAO,EAAEe,eAAgB;AAAAd,MAAAA,QAAA,EAExBnC,CAAAA,KAAK,IAAI,IAAI,gBACZsD,eAAA,CAAA,MAAA,EAAA;QAAMzC,SAAS,EAAE2C,gBAAM,CAACE,QAAS;AAAAvB,QAAAA,QAAA,gBAC/BN,cAAA,CAAA,OAAA,EAAA;UACE,aAAab,EAAAA,UAAU,EAAEhB,KAAM;UAC/Ba,SAAS,EAAE2C,gBAAM,CAACxD,KAAM;AACxB2D,UAAAA,OAAO,EAAErC,OAAQ;AAAAa,UAAAA,QAAA,EAEhBnC,KAAAA;SACI,CAAC,EACPC,YAAY,IAAI,IAAI,gBACnB4B,cAAA,CAAC+B,uBAAW,EAAA;AAACC,UAAAA,OAAO,EAAE5D,YAAa;AAAC6D,UAAAA,IAAI,EAAE,EAAA;SAAK,CAAC,GAC9C,IAAI,CAAA;AAAA,OACJ,CAAC,GACL,IAAI,eACRR,eAAA,CAAA,KAAA,EAAA;QAAKzC,SAAS,EAAE2C,gBAAM,CAACO,SAAU;AAAA5B,QAAAA,QAAA,gBAC/BN,cAAA,CAAA,OAAA,EAAA;AACEmC,UAAAA,GAAG,EAAE9C,QAAS;AACdJ,UAAAA,EAAE,EAAEQ,OAAQ;UACZT,SAAS,EAAE2C,gBAAM,CAACS,KAAM;AACxBC,UAAAA,SAAS,EAAC,SAAS;AACnBnD,UAAAA,QAAQ,EAAEA,QAAS;UACnB,cAAcQ,EAAAA,QAAQ,IAAI1B,SAAU;AACpC,UAAA,kBAAA,EAAkB2B,gBAAgB,GAAGC,OAAO,GAAG5B,SAAU;AACzDe,UAAAA,QAAQ,EAAEwB,YAAa;UACvB,aAAapB,EAAAA,UAAU,EAAEiD,KAAM;UAAA,GAC3BhD,UAAAA;AAAU,SACf,CAAC,EACDb,aAAa,IAAI,IAAI,gBACpByB,cAAA,CAAA,KAAA,EAAA;UAAKhB,SAAS,EAAE2C,gBAAM,CAACW,KAAM;AAAAhC,UAAAA,QAAA,EAAE/B,aAAAA;SAAmB,CAAC,GACjD,IAAI,CAAA;AAAA,OACL,CAAC,EACLuB,YAAY,gBACX2B,eAAA,CAAA,KAAA,EAAA;QAAKzC,SAAS,EAAE2C,gBAAM,CAACY,SAAU;AAAAjC,QAAAA,QAAA,EAC9BjC,CAAAA,cAAc,IAAI,IAAI,gBACrB2B,cAAA,CAAA,MAAA,EAAA;UACE,aAAab,EAAAA,UAAU,EAAEd,cAAe;UACxCW,SAAS,EAAE2C,gBAAM,CAACa,SAAU;AAAAlC,UAAAA,QAAA,EAE3BjC,cAAAA;AAAc,SACX,CAAC,GACL,IAAI,eACRoD,eAAA,CAAA,KAAA,EAAA;UAAKzC,SAAS,EAAE2C,gBAAM,CAACc,YAAa;AAAAnC,UAAAA,QAAA,EACjChC,CAAAA,OAAO,IAAI,IAAI,gBACd0B,cAAA,CAAA,MAAA,EAAA;YACEhB,SAAS,EAAE2C,gBAAM,CAACrD,OAAQ;YAC1B,aAAaa,EAAAA,UAAU,EAAEb,OAAQ;AAAAgC,YAAAA,QAAA,EAEhChC,OAAAA;AAAO,WACJ,CAAC,GACL,IAAI,EACPuB,OAAO,IAAIhB,UAAU,IAAI,IAAI,gBAC5BmB,cAAA,CAAC0C,eAAO,EAAA;AACNV,YAAAA,OAAO,EAAEnD,UAAW;AACpB8D,YAAAA,QAAQ,EAAE7D,kBAAmB;AAC7B8D,YAAAA,KAAK,EAAE,GAAI;AAAAtC,YAAAA,QAAA,EAEVP,MAAAA;AAAM,WACA,CAAC,GACRF,OAAO,GACTE,MAAM,GACJ,IAAI,CAAA;AAAA,SACL,CAAC,CAAA;OACH,CAAC,GACJ,IAAI,CAAA;AAAA,KACL,CAAC,EACLJ,gBAAgB,gBACfK,cAAA,CAAA,KAAA,EAAA;AACEf,MAAAA,EAAE,EAAEW,OAAQ;MACZZ,SAAS,EAAE2C,gBAAM,CAACkB,YAAa;MAC/B,aAAa1D,EAAAA,UAAU,EAAEX,KAAM;AAAA8B,MAAAA,QAAA,EAE9B7B,SAAAA;KACE,CAAC,GACJ,IAAI,CAAA;AAAA,GACL,CAAC,CAAA;AAEV;;;;"}
|
|
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 MouseEvent,\n type MouseEventHandler,\n type ReactNode,\n} from 'react'\n\nimport cn from 'classnames'\nimport { IconLockKeyhole } from '../icons'\nimport { InfoTooltip } from '../info-tooltip'\nimport { Skeleton } from '../skeleton'\nimport { Tag } from '../tag'\nimport { Tooltip, type TooltipPosition } 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 lock?: string\n}\n\nexport type RichInputProps = InputHTMLAttributes<HTMLInputElement> & {\n label?: ReactNode\n labelTooltip?: ReactNode\n /** Fiat equivalent, bottom left. */\n secondaryValue?: ReactNode\n /** Wallet balance, bottom right. */\n balance?: ReactNode\n /** Slot for a `TokenSelector`. */\n tokenSelector?: ReactNode\n /** Marks the card invalid. */\n error?: boolean\n errorText?: ReactNode\n showMaxButton?: boolean\n onMaxClick?: MouseEventHandler<HTMLButtonElement>\n /** Dims the Max shortcut, leaving the field editable. */\n maxDisabled?: boolean\n /** Explains what Max actually fills in. */\n maxTooltip?: ReactNode\n maxTooltipPosition?: TooltipPosition\n /** Value can't be edited. */\n locked?: boolean\n /** Tooltip on the lock icon. */\n lockedTooltip?: ReactNode\n /** Swaps the amount for a skeleton, hides the fiat line and makes the field read-only without Max. */\n loading?: boolean\n dataTestId?: RichInputDataTestId\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\nconst noop = () => undefined\n\n/** Amount field for supply and borrow forms: token picker, fiat equivalent, balance and a Max shortcut in one card; input is filtered to decimals as you type. `disabled` dims the card and hides Max; `locked` makes it read-only without Max; `loading` shows a skeleton for the amount and hides the fiat line. */\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 maxTooltipPosition = 'bottom-left',\n onChange,\n className,\n id,\n disabled,\n locked,\n lockedTooltip,\n loading,\n readOnly,\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 && !locked && !loading\n const showSecondary = secondaryValue != null && !loading\n const hasBottomRow = showSecondary || balance != null || showMax\n\n const maxTag = (\n <Tag\n as='button'\n dataTestId={{ root: dataTestId?.maxButton }}\n onClick={onMaxClick ?? noop}\n disabled={maxDisabled}\n >\n Max\n </Tag>\n )\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 (\n event.target.closest('button, input, label, [role=\"listbox\"], [tabindex]')\n ) {\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(\n styles.card,\n hasError && styles.error,\n locked && styles.locked,\n loading && styles.loading,\n )}\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 <InfoTooltip content={labelTooltip} size={20} />\n ) : null}\n {locked ? (\n lockedTooltip != null ? (\n <InfoTooltip\n icon={<IconLockKeyhole aria-hidden='true' />}\n size={20}\n aria-label='Locked'\n content={lockedTooltip}\n className={styles.lock}\n dataTestId={{ root: dataTestId?.lock }}\n />\n ) : (\n <IconLockKeyhole\n aria-hidden='true'\n className={cn(styles.lock, styles.lockIcon)}\n data-testid={dataTestId?.lock}\n />\n )\n ) : null}\n </span>\n ) : null}\n <div className={styles.amountRow}>\n <span className={styles.amount}>\n <input\n ref={inputRef}\n id={inputId}\n className={styles.input}\n inputMode='decimal'\n disabled={disabled}\n readOnly={locked || loading || readOnly}\n aria-busy={loading || undefined}\n aria-invalid={hasError || undefined}\n aria-describedby={showErrorMessage ? errorId : undefined}\n onChange={handleChange}\n data-testid={dataTestId?.input}\n {...inputProps}\n />\n {loading ? (\n <Skeleton variant='text' className={styles.amountSkeleton} />\n ) : null}\n </span>\n {tokenSelector != null ? (\n <div className={styles.token}>{tokenSelector}</div>\n ) : null}\n </div>\n {hasBottomRow ? (\n <div className={styles.bottomRow}>\n {showSecondary ? (\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 && maxTooltip != null ? (\n <Tooltip\n content={maxTooltip}\n position={maxTooltipPosition}\n width={240}\n >\n {maxTag}\n </Tooltip>\n ) : showMax ? (\n maxTag\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":["sanitizeDecimal","raw","normalized","replace","firstDot","indexOf","head","slice","tail","noop","undefined","RichInput","_ref","label","labelTooltip","secondaryValue","balance","tokenSelector","error","errorText","showMaxButton","onMaxClick","maxDisabled","maxTooltip","maxTooltipPosition","onChange","className","id","disabled","locked","lockedTooltip","loading","readOnly","dataTestId","inputProps","inputRef","useRef","fallbackId","useId","inputId","hasError","showErrorMessage","errorId","showMax","showSecondary","hasBottomRow","maxTag","_jsx","Tag","as","root","maxButton","onClick","children","handleChange","event","value","rawValue","selectionStart","target","sanitized","removed","length","caret","Math","max","setSelectionRange","handleRootClick","Element","closest","current","focus","_jsxs","cn","styles","card","labelRow","htmlFor","InfoTooltip","content","size","icon","IconLockKeyhole","lock","lockIcon","amountRow","amount","ref","input","inputMode","Skeleton","variant","amountSkeleton","token","bottomRow","secondary","balanceGroup","Tooltip","position","width","errorMessage"],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
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","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"};
|
|
3
|
+
const styles = {"root":"RichInput-module_root__2RrAF","card":"RichInput-module_card__wDqv1","locked":"RichInput-module_locked__fGImq","loading":"RichInput-module_loading__yxt8-","error":"RichInput-module_error__iuacN","input":"RichInput-module_input__G69-P","lock":"RichInput-module_lock__adGaA","lockIcon":"RichInput-module_lockIcon__wJpHd","labelRow":"RichInput-module_labelRow__bh0KF","label":"RichInput-module_label__FNaLW","amountRow":"RichInput-module_amountRow__GWqIG","amount":"RichInput-module_amount__CGSLZ","amountSkeleton":"RichInput-module_amountSkeleton__4wzNO","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"};
|
|
4
4
|
|
|
5
5
|
module.exports = styles;
|
|
6
6
|
//# sourceMappingURL=RichInput.module.css.cjs.map
|
|
@@ -7,14 +7,14 @@ const cn = require('classnames');
|
|
|
7
7
|
const Sidebar_module = require('./Sidebar.module.css.cjs');
|
|
8
8
|
const SidebarContext = require('./SidebarContext.cjs');
|
|
9
9
|
const jsxRuntime = require('react/jsx-runtime');
|
|
10
|
+
const breakpoints = require('../utils/breakpoints.cjs');
|
|
10
11
|
const useIsomorphicLayoutEffect = require('../hooks/useIsomorphicLayoutEffect.cjs');
|
|
11
12
|
const useBodyScrollLock = require('../hooks/useBodyScrollLock.cjs');
|
|
12
13
|
const useFocusTrap = require('../hooks/useFocusTrap.cjs');
|
|
13
14
|
const useEscape = require('../hooks/useEscape.cjs');
|
|
14
15
|
const CloseButton = require('../icon-button/CloseButton.cjs');
|
|
15
|
-
const breakpoints = require('../utils/breakpoints.cjs');
|
|
16
16
|
|
|
17
|
-
const DRAWER_QUERY =
|
|
17
|
+
const DRAWER_QUERY = breakpoints.downQuery('lg');
|
|
18
18
|
const OFFSET_VAR = '--local-measured-offset';
|
|
19
19
|
const useIsDrawerViewport = () => {
|
|
20
20
|
const [matches, setMatches] = react.useState(false);
|