@lidofinance/lido-app-ui 1.14.0 → 1.15.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 +22 -1
- package/dist/README.md +22 -1
- 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/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 +3 -0
- package/dist/cjs/index.cjs.map +1 -1
- package/dist/cjs/index.css +10 -4
- 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/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 +23 -3
- 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/SidebarToggle.cjs.map +1 -1
- package/dist/cjs/small-card/SmallCard.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/joinAriaLabel.cjs +8 -0
- package/dist/cjs/utils/joinAriaLabel.cjs.map +1 -0
- 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/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 +10 -4
- package/dist/esm/index.mjs +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/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 +23 -3
- 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/SidebarToggle.mjs.map +1 -1
- package/dist/esm/small-card/SmallCard.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/joinAriaLabel.mjs +4 -0
- package/dist/esm/utils/joinAriaLabel.mjs.map +1 -0
- package/dist/index.css +10 -4
- 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/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/info-tooltip/InfoTooltip.d.ts +4 -1
- package/dist/types/info-tooltip/InfoTooltip.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 +3 -6
- 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 +7 -2
- package/dist/types/rich-input/RichInput.d.ts.map +1 -1
- package/dist/types/sidebar/SidebarToggle.d.ts +3 -3
- 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/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/index.d.ts +2 -1
- 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/package.json +1 -1
package/README.md
CHANGED
|
@@ -32,7 +32,7 @@ Theme providers (`ThemeProvider`, `CookieThemeProvider`) are re-exported from `@
|
|
|
32
32
|
|
|
33
33
|
## Router links
|
|
34
34
|
|
|
35
|
-
Every app-ui link (`TextLink`, `NavLink`, `
|
|
35
|
+
Every app-ui link (`TextLink`, `NavLink`, `Button` and `IconButton` with `href`, `SmallCard`, `Tag` with `href`, `Breadcrumbs` items with `href`, `Logo` with `href`) renders a plain `<a>` by default. Wrap the app in `LinkProvider` to route in-app hrefs through your router's link component; `externalComponent` does the same for absolute URLs. In-app hash links, `download` links and links with a non-`_self` `target` stay a plain `<a>`; absolute URLs always go to `externalComponent` when one is set. Absolute `http(s)` URLs open in a new tab (`target="_blank"`, `rel="noopener noreferrer"`) unless `target` is passed. Adapters must be `forwardRef` components: under React 18 `ref` is never passed as a prop.
|
|
36
36
|
|
|
37
37
|
Next.js 13+ — `next/link` renders its own `<a>` and forwards its ref, so pass it directly:
|
|
38
38
|
|
|
@@ -94,6 +94,27 @@ declare module '@lidofinance/lido-app-ui' {
|
|
|
94
94
|
;<SmallCard href='/keys' title='Keys' linkProps={{ prefetch: false }} />
|
|
95
95
|
```
|
|
96
96
|
|
|
97
|
+
## Typography
|
|
98
|
+
|
|
99
|
+
`Typography` renders the type scale; it sets no color unless asked.
|
|
100
|
+
|
|
101
|
+
- `variant`: `h1`, `h2`, `h3`, `amount`, `bodyLarge`, `body` (default), `description`, `caption`. Also decides the tag; override with `as`.
|
|
102
|
+
- `weight`: `thin` | `regular` | `medium` | `semibold` | `bold`; overrides the variant's weight on any variant. `thin` is Manrope ExtraLight (200).
|
|
103
|
+
- `color`: `default`, `secondary`, `tertiary`, `neutral`, `active`, `success`, `warning`, `error`, `info`, `inverse`, `disabled`. Omit to inherit.
|
|
104
|
+
- Shortcuts: `H1`, `H2`, `H3`, `BodyLarge`, `Body`, `Description`, `Caption`.
|
|
105
|
+
|
|
106
|
+
app-ui sets no default text color, so set it once in the app:
|
|
107
|
+
|
|
108
|
+
```css
|
|
109
|
+
body {
|
|
110
|
+
color: var(--lido-app-ui-color-text-default);
|
|
111
|
+
}
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
PostCSS mixins: `font-amount`, `font-caption` (plus `font-h1`, `font-body`, ...). `font-rich-input` and `font-group-name` are deprecated.
|
|
115
|
+
|
|
116
|
+
Deprecated aliases: `GroupName` (use `Caption`), variants `richInput` (use `amount`) and `groupName` (use `caption`).
|
|
117
|
+
|
|
97
118
|
## Customization
|
|
98
119
|
|
|
99
120
|
Override any token after importing the stylesheet. Non-color tokens (radii, typography, z-index, spacing, `--lido-app-ui-shadow-dropdown`) are theme-independent and live on `:root`. Color tokens and `--lido-app-ui-shadow-popover` (it reads color tokens) are redeclared on every theme scope, so override them on `:root, [data-lido-theme]` or per theme, not on `:root` alone:
|
package/dist/README.md
CHANGED
|
@@ -32,7 +32,7 @@ Theme providers (`ThemeProvider`, `CookieThemeProvider`) are re-exported from `@
|
|
|
32
32
|
|
|
33
33
|
## Router links
|
|
34
34
|
|
|
35
|
-
Every app-ui link (`TextLink`, `NavLink`, `
|
|
35
|
+
Every app-ui link (`TextLink`, `NavLink`, `Button` and `IconButton` with `href`, `SmallCard`, `Tag` with `href`, `Breadcrumbs` items with `href`, `Logo` with `href`) renders a plain `<a>` by default. Wrap the app in `LinkProvider` to route in-app hrefs through your router's link component; `externalComponent` does the same for absolute URLs. In-app hash links, `download` links and links with a non-`_self` `target` stay a plain `<a>`; absolute URLs always go to `externalComponent` when one is set. Absolute `http(s)` URLs open in a new tab (`target="_blank"`, `rel="noopener noreferrer"`) unless `target` is passed. Adapters must be `forwardRef` components: under React 18 `ref` is never passed as a prop.
|
|
36
36
|
|
|
37
37
|
Next.js 13+ — `next/link` renders its own `<a>` and forwards its ref, so pass it directly:
|
|
38
38
|
|
|
@@ -94,6 +94,27 @@ declare module '@lidofinance/lido-app-ui' {
|
|
|
94
94
|
;<SmallCard href='/keys' title='Keys' linkProps={{ prefetch: false }} />
|
|
95
95
|
```
|
|
96
96
|
|
|
97
|
+
## Typography
|
|
98
|
+
|
|
99
|
+
`Typography` renders the type scale; it sets no color unless asked.
|
|
100
|
+
|
|
101
|
+
- `variant`: `h1`, `h2`, `h3`, `amount`, `bodyLarge`, `body` (default), `description`, `caption`. Also decides the tag; override with `as`.
|
|
102
|
+
- `weight`: `thin` | `regular` | `medium` | `semibold` | `bold`; overrides the variant's weight on any variant. `thin` is Manrope ExtraLight (200).
|
|
103
|
+
- `color`: `default`, `secondary`, `tertiary`, `neutral`, `active`, `success`, `warning`, `error`, `info`, `inverse`, `disabled`. Omit to inherit.
|
|
104
|
+
- Shortcuts: `H1`, `H2`, `H3`, `BodyLarge`, `Body`, `Description`, `Caption`.
|
|
105
|
+
|
|
106
|
+
app-ui sets no default text color, so set it once in the app:
|
|
107
|
+
|
|
108
|
+
```css
|
|
109
|
+
body {
|
|
110
|
+
color: var(--lido-app-ui-color-text-default);
|
|
111
|
+
}
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
PostCSS mixins: `font-amount`, `font-caption` (plus `font-h1`, `font-body`, ...). `font-rich-input` and `font-group-name` are deprecated.
|
|
115
|
+
|
|
116
|
+
Deprecated aliases: `GroupName` (use `Caption`), variants `richInput` (use `amount`) and `groupName` (use `caption`).
|
|
117
|
+
|
|
97
118
|
## Customization
|
|
98
119
|
|
|
99
120
|
Override any token after importing the stylesheet. Non-color tokens (radii, typography, z-index, spacing, `--lido-app-ui-shadow-dropdown`) are theme-independent and live on `:root`. Color tokens and `--lido-app-ui-shadow-popover` (it reads color tokens) are redeclared on every theme scope, so override them on `:root, [data-lido-theme]` or per theme, not on `:root` alone:
|
|
@@ -24,9 +24,7 @@ const syncTitle = e => {
|
|
|
24
24
|
if (!el) return;
|
|
25
25
|
if (el.scrollWidth > el.clientWidth) el.setAttribute('title', el.textContent ?? '');else el.removeAttribute('title');
|
|
26
26
|
};
|
|
27
|
-
|
|
28
|
-
/** Trail of ancestors ending in the current page (`aria-current="page"`); scrolls horizontally with an edge fade when it overflows. */
|
|
29
|
-
const Breadcrumbs = /*#__PURE__*/react.forwardRef((_ref, ref) => {
|
|
27
|
+
const BreadcrumbsTrail = /*#__PURE__*/react.forwardRef((_ref, ref) => {
|
|
30
28
|
let {
|
|
31
29
|
items,
|
|
32
30
|
className,
|
|
@@ -115,6 +113,15 @@ const Breadcrumbs = /*#__PURE__*/react.forwardRef((_ref, ref) => {
|
|
|
115
113
|
})
|
|
116
114
|
});
|
|
117
115
|
});
|
|
116
|
+
BreadcrumbsTrail.displayName = 'BreadcrumbsTrail';
|
|
117
|
+
|
|
118
|
+
/** Trail of ancestors ending in the current page (`aria-current="page"`); scrolls horizontally with an edge fade when it overflows. */
|
|
119
|
+
const Breadcrumbs = /*#__PURE__*/react.forwardRef((props, ref) =>
|
|
120
|
+
// Separate component so its mount effects attach once the list exists.
|
|
121
|
+
props.items.length === 0 ? null : /*#__PURE__*/jsxRuntime.jsx(BreadcrumbsTrail, {
|
|
122
|
+
ref: ref,
|
|
123
|
+
...props
|
|
124
|
+
}));
|
|
118
125
|
Breadcrumbs.displayName = 'Breadcrumbs';
|
|
119
126
|
|
|
120
127
|
exports.Breadcrumbs = Breadcrumbs;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Breadcrumbs.cjs","sources":["../../../src/breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef } from 'react'\nimport type { HTMLAttributes, PointerEvent, ReactNode } from 'react'\n\nimport cn from 'classnames'\n\nimport { useEdgeFade, useIsomorphicLayoutEffect } from '../hooks'\nimport { IconChevronRight } from '../icons'\nimport { ActionElement, type ActionElementProps } from '../utils'\nimport styles from './Breadcrumbs.module.css'\n\nexport type BreadcrumbItemDataTestId = { root?: string }\n\nexport type BreadcrumbItem = ActionElementProps & {\n label: ReactNode\n children?: never\n /** Test id of the item's label element, for link, plain and current items alike. */\n dataTestId?: BreadcrumbItemDataTestId\n}\n\nexport type BreadcrumbsDataTestId = { root?: string; list?: string }\n\nexport type BreadcrumbsProps = HTMLAttributes<HTMLElement> & {\n /** `href` renders a link, only `onClick` a button, anything else (and `disabled`) plain text; the last item is the current page. */\n items: BreadcrumbItem[]\n dataTestId?: BreadcrumbsDataTestId\n}\n\nconst ANCHOR_ONLY = [\n 'href',\n 'onClick',\n 'disabled',\n 'external',\n 'linkProps',\n 'type',\n 'target',\n 'rel',\n 'download',\n] as const\n\nconst spanAttrs = (props: Omit<BreadcrumbItem, 'label'>) => {\n const attrs: Record<string, unknown> = { ...props }\n for (const key of ANCHOR_ONLY) delete attrs[key]\n return attrs as HTMLAttributes<HTMLSpanElement>\n}\n\nconst syncTitle = (e: PointerEvent<HTMLElement>) => {\n const el = (e.target as Element).closest('[data-label]')\n if (!el) return\n if (el.scrollWidth > el.clientWidth)\n el.setAttribute('title', el.textContent ?? '')\n else el.removeAttribute('title')\n}\n\n/** Trail of ancestors ending in the current page (`aria-current=\"page\"`); scrolls horizontally with an edge fade when it overflows. */\nexport const Breadcrumbs = forwardRef<HTMLElement, BreadcrumbsProps>(\n ({ items, className, dataTestId, ...rest }, ref) => {\n const listRef = useRef<HTMLOListElement>(null)\n\n const { sync, onFocus } = useEdgeFade(listRef)\n const trailRef = useRef<string>()\n\n useIsomorphicLayoutEffect(() => {\n const list = listRef.current\n if (!list) return\n const trail = Array.from(list.children, (li) => li.textContent).join(\n '\\u0000',\n )\n if (trail !== trailRef.current) {\n trailRef.current = trail\n list.scrollLeft = list.scrollWidth\n }\n sync()\n })\n\n // A list mounted hidden (display: none) can't scroll on mount, so scroll once it gets a width.\n useEffect(() => {\n const list = listRef.current\n if (!list || typeof ResizeObserver === 'undefined') return\n let hidden = list.clientWidth === 0\n const observer = new ResizeObserver(() => {\n const wasHidden = hidden\n hidden = list.clientWidth === 0\n if (!wasHidden || hidden) return\n list.scrollLeft = list.scrollWidth\n sync()\n })\n observer.observe(list)\n return () => observer.disconnect()\n }, [sync])\n\n return (\n <nav\n ref={ref}\n aria-label='Breadcrumb'\n className={cn(styles.nav, className)}\n data-testid={dataTestId?.root}\n {...rest}\n >\n <ol\n ref={listRef}\n className={styles.list}\n data-testid={dataTestId?.list}\n onScroll={sync}\n onFocus={onFocus}\n onPointerOver={syncTitle}\n >\n {items.map(\n ({ label, dataTestId: itemTestId, ...itemProps }, index) => {\n const current = index === items.length - 1\n const labelAttrs =\n itemProps.title === undefined ? { 'data-label': '' } : {}\n const interactive =\n !current &&\n (itemProps.href !== undefined ||\n itemProps.onClick !== undefined) &&\n !itemProps.disabled\n return (\n <li key={index} className={styles.item}>\n {interactive ? (\n <ActionElement\n data-testid={itemTestId?.root}\n {...itemProps}\n {...labelAttrs}\n className={cn(\n styles.label,\n styles.link,\n itemProps.className,\n )}\n >\n {label}\n </ActionElement>\n ) : (\n <span\n data-testid={itemTestId?.root}\n {...spanAttrs(itemProps)}\n {...labelAttrs}\n {...(current && { 'aria-current': 'page' as const })}\n className={cn(\n styles.label,\n current && styles.current,\n itemProps.className,\n )}\n >\n {label}\n </span>\n )}\n {!current && (\n <IconChevronRight\n className={styles.separator}\n aria-hidden='true'\n />\n )}\n </li>\n )\n },\n )}\n </ol>\n </nav>\n )\n },\n)\n\nBreadcrumbs.displayName = 'Breadcrumbs'\n"],"names":["ANCHOR_ONLY","spanAttrs","props","attrs","key","syncTitle","e","el","target","closest","scrollWidth","clientWidth","setAttribute","textContent","removeAttribute","Breadcrumbs","forwardRef","_ref","ref","items","className","dataTestId","rest","listRef","useRef","sync","onFocus","useEdgeFade","trailRef","useIsomorphicLayoutEffect","list","current","trail","Array","from","children","li","join","scrollLeft","useEffect","ResizeObserver","hidden","observer","wasHidden","observe","disconnect","_jsx","cn","styles","nav","root","onScroll","onPointerOver","map","_ref2","index","label","itemTestId","itemProps","length","labelAttrs","title","undefined","interactive","href","onClick","disabled","_jsxs","item","ActionElement","link","IconChevronRight","separator","displayName"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Breadcrumbs.cjs","sources":["../../../src/breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef } from 'react'\nimport type { HTMLAttributes, PointerEvent, ReactNode } from 'react'\n\nimport cn from 'classnames'\n\nimport { useEdgeFade, useIsomorphicLayoutEffect } from '../hooks'\nimport { IconChevronRight } from '../icons'\nimport { ActionElement, type ActionElementProps } from '../utils'\nimport styles from './Breadcrumbs.module.css'\n\nexport type BreadcrumbItemDataTestId = { root?: string }\n\nexport type BreadcrumbItem = ActionElementProps & {\n label: ReactNode\n children?: never\n /** Test id of the item's label element, for link, plain and current items alike. */\n dataTestId?: BreadcrumbItemDataTestId\n}\n\nexport type BreadcrumbsDataTestId = { root?: string; list?: string }\n\nexport type BreadcrumbsProps = HTMLAttributes<HTMLElement> & {\n /** `href` renders a link, only `onClick` a button, anything else (and `disabled`) plain text; the last item is the current page; an empty array renders nothing. */\n items: BreadcrumbItem[]\n dataTestId?: BreadcrumbsDataTestId\n}\n\nconst ANCHOR_ONLY = [\n 'href',\n 'onClick',\n 'disabled',\n 'external',\n 'linkProps',\n 'type',\n 'target',\n 'rel',\n 'download',\n] as const\n\nconst spanAttrs = (props: Omit<BreadcrumbItem, 'label'>) => {\n const attrs: Record<string, unknown> = { ...props }\n for (const key of ANCHOR_ONLY) delete attrs[key]\n return attrs as HTMLAttributes<HTMLSpanElement>\n}\n\nconst syncTitle = (e: PointerEvent<HTMLElement>) => {\n const el = (e.target as Element).closest('[data-label]')\n if (!el) return\n if (el.scrollWidth > el.clientWidth)\n el.setAttribute('title', el.textContent ?? '')\n else el.removeAttribute('title')\n}\n\nconst BreadcrumbsTrail = forwardRef<HTMLElement, BreadcrumbsProps>(\n ({ items, className, dataTestId, ...rest }, ref) => {\n const listRef = useRef<HTMLOListElement>(null)\n\n const { sync, onFocus } = useEdgeFade(listRef)\n const trailRef = useRef<string>()\n\n useIsomorphicLayoutEffect(() => {\n const list = listRef.current\n if (!list) return\n const trail = Array.from(list.children, (li) => li.textContent).join(\n '\\u0000',\n )\n if (trail !== trailRef.current) {\n trailRef.current = trail\n list.scrollLeft = list.scrollWidth\n }\n sync()\n })\n\n // A list mounted hidden (display: none) can't scroll on mount, so scroll once it gets a width.\n useEffect(() => {\n const list = listRef.current\n if (!list || typeof ResizeObserver === 'undefined') return\n let hidden = list.clientWidth === 0\n const observer = new ResizeObserver(() => {\n const wasHidden = hidden\n hidden = list.clientWidth === 0\n if (!wasHidden || hidden) return\n list.scrollLeft = list.scrollWidth\n sync()\n })\n observer.observe(list)\n return () => observer.disconnect()\n }, [sync])\n\n return (\n <nav\n ref={ref}\n aria-label='Breadcrumb'\n className={cn(styles.nav, className)}\n data-testid={dataTestId?.root}\n {...rest}\n >\n <ol\n ref={listRef}\n className={styles.list}\n data-testid={dataTestId?.list}\n onScroll={sync}\n onFocus={onFocus}\n onPointerOver={syncTitle}\n >\n {items.map(\n ({ label, dataTestId: itemTestId, ...itemProps }, index) => {\n const current = index === items.length - 1\n const labelAttrs =\n itemProps.title === undefined ? { 'data-label': '' } : {}\n const interactive =\n !current &&\n (itemProps.href !== undefined ||\n itemProps.onClick !== undefined) &&\n !itemProps.disabled\n return (\n <li key={index} className={styles.item}>\n {interactive ? (\n <ActionElement\n data-testid={itemTestId?.root}\n {...itemProps}\n {...labelAttrs}\n className={cn(\n styles.label,\n styles.link,\n itemProps.className,\n )}\n >\n {label}\n </ActionElement>\n ) : (\n <span\n data-testid={itemTestId?.root}\n {...spanAttrs(itemProps)}\n {...labelAttrs}\n {...(current && { 'aria-current': 'page' as const })}\n className={cn(\n styles.label,\n current && styles.current,\n itemProps.className,\n )}\n >\n {label}\n </span>\n )}\n {!current && (\n <IconChevronRight\n className={styles.separator}\n aria-hidden='true'\n />\n )}\n </li>\n )\n },\n )}\n </ol>\n </nav>\n )\n },\n)\n\nBreadcrumbsTrail.displayName = 'BreadcrumbsTrail'\n\n/** Trail of ancestors ending in the current page (`aria-current=\"page\"`); scrolls horizontally with an edge fade when it overflows. */\nexport const Breadcrumbs = forwardRef<HTMLElement, BreadcrumbsProps>(\n (props, ref) =>\n // Separate component so its mount effects attach once the list exists.\n props.items.length === 0 ? null : <BreadcrumbsTrail ref={ref} {...props} />,\n)\n\nBreadcrumbs.displayName = 'Breadcrumbs'\n"],"names":["ANCHOR_ONLY","spanAttrs","props","attrs","key","syncTitle","e","el","target","closest","scrollWidth","clientWidth","setAttribute","textContent","removeAttribute","BreadcrumbsTrail","forwardRef","_ref","ref","items","className","dataTestId","rest","listRef","useRef","sync","onFocus","useEdgeFade","trailRef","useIsomorphicLayoutEffect","list","current","trail","Array","from","children","li","join","scrollLeft","useEffect","ResizeObserver","hidden","observer","wasHidden","observe","disconnect","_jsx","cn","styles","nav","root","onScroll","onPointerOver","map","_ref2","index","label","itemTestId","itemProps","length","labelAttrs","title","undefined","interactive","href","onClick","disabled","_jsxs","item","ActionElement","link","IconChevronRight","separator","displayName","Breadcrumbs"],"mappings":"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"}
|
|
@@ -7,13 +7,14 @@ const cn = require('classnames');
|
|
|
7
7
|
const Button_module = require('./Button.module.css.cjs');
|
|
8
8
|
const ButtonContent = require('./ButtonContent.cjs');
|
|
9
9
|
const jsxRuntime = require('react/jsx-runtime');
|
|
10
|
+
const ActionElement = require('../utils/ActionElement.cjs');
|
|
11
|
+
const joinAriaLabel = require('../utils/joinAriaLabel.cjs');
|
|
10
12
|
|
|
11
|
-
/** Fully rounded call to action; `size` is big (52px) or small (36px), `loading` swaps the icon slot for a spinner and disables
|
|
13
|
+
/** Fully rounded call to action; `size` is big (52px) or small (36px), `loading` swaps the icon slot for a spinner and disables it. With `href` it renders a link that routes through `LinkProvider`. */
|
|
12
14
|
const Button = /*#__PURE__*/react.forwardRef((_ref, ref) => {
|
|
13
15
|
let {
|
|
14
16
|
className,
|
|
15
17
|
children,
|
|
16
|
-
type = 'button',
|
|
17
18
|
variant = 'primary',
|
|
18
19
|
size = 'big',
|
|
19
20
|
loading = false,
|
|
@@ -26,14 +27,13 @@ const Button = /*#__PURE__*/react.forwardRef((_ref, ref) => {
|
|
|
26
27
|
'aria-label': ariaLabel,
|
|
27
28
|
...rest
|
|
28
29
|
} = _ref;
|
|
29
|
-
return /*#__PURE__*/jsxRuntime.jsx(
|
|
30
|
+
return /*#__PURE__*/jsxRuntime.jsx(ActionElement.ActionElement, {
|
|
30
31
|
ref: ref,
|
|
31
|
-
type: type,
|
|
32
|
-
disabled: disabled || loading,
|
|
33
|
-
"aria-busy": loading || undefined,
|
|
34
32
|
className: cn(Button_module.button, Button_module[variant], Button_module[size], loading && !disabled && Button_module.loading, className),
|
|
35
33
|
"data-testid": dataTestId?.root,
|
|
36
|
-
"aria-label":
|
|
34
|
+
"aria-label": joinAriaLabel.joinAriaLabel(ariaLabel, counterLabel),
|
|
35
|
+
"aria-busy": loading || undefined,
|
|
36
|
+
disabled: disabled || loading,
|
|
37
37
|
...rest,
|
|
38
38
|
children: /*#__PURE__*/jsxRuntime.jsx(ButtonContent.ButtonContent, {
|
|
39
39
|
loading: loading,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.cjs","sources":["../../../src/button/Button.tsx"],"sourcesContent":["import { forwardRef
|
|
1
|
+
{"version":3,"file":"Button.cjs","sources":["../../../src/button/Button.tsx"],"sourcesContent":["import { forwardRef } from 'react'\n\nimport cn from 'classnames'\n\nimport { ActionElement, joinAriaLabel } from '../utils'\nimport styles from './Button.module.css'\nimport { ButtonContent } from './ButtonContent'\nimport type {\n ButtonAsButtonProps,\n ButtonAsLinkProps,\n ButtonDataTestId,\n ButtonProps,\n ButtonSize,\n ButtonVariant,\n} from './types'\n\nexport type {\n ButtonAsButtonProps,\n ButtonAsLinkProps,\n ButtonDataTestId,\n ButtonProps,\n ButtonSize,\n ButtonVariant,\n}\n\n/** Fully rounded call to action; `size` is big (52px) or small (36px), `loading` swaps the icon slot for a spinner and disables it. With `href` it renders a link that routes through `LinkProvider`. */\nexport const Button = forwardRef<\n HTMLButtonElement | HTMLAnchorElement,\n ButtonProps\n>(\n (\n {\n className,\n children,\n variant = 'primary',\n size = 'big',\n loading = false,\n disabled = false,\n iconLeft,\n iconRight,\n counter,\n counterLabel,\n dataTestId,\n 'aria-label': ariaLabel,\n ...rest\n },\n ref,\n ) => (\n <ActionElement\n ref={ref}\n className={cn(\n styles.button,\n styles[variant],\n styles[size],\n loading && !disabled && styles.loading,\n className,\n )}\n data-testid={dataTestId?.root}\n aria-label={joinAriaLabel(ariaLabel, counterLabel)}\n aria-busy={loading || undefined}\n disabled={disabled || loading}\n {...rest}\n >\n <ButtonContent\n loading={loading}\n iconLeft={iconLeft}\n iconRight={iconRight}\n counter={counter}\n counterLabel={counterLabel}\n dataTestId={dataTestId}\n >\n {children}\n </ButtonContent>\n </ActionElement>\n ),\n)\n\nButton.displayName = 'Button'\n"],"names":["Button","forwardRef","_ref","ref","className","children","variant","size","loading","disabled","iconLeft","iconRight","counter","counterLabel","dataTestId","ariaLabel","rest","_jsx","ActionElement","cn","styles","button","root","joinAriaLabel","undefined","ButtonContent","displayName"],"mappings":";;;;;;;;;;;;AAyBA;AACO,MAAMA,MAAM,gBAAGC,gBAAU,CAI9B,CAAAC,IAAA,EAgBEC,GAAG,KAAA;EAAA,IAfH;IACEC,SAAS;IACTC,QAAQ;AACRC,IAAAA,OAAO,GAAG,SAAS;AACnBC,IAAAA,IAAI,GAAG,KAAK;AACZC,IAAAA,OAAO,GAAG,KAAK;AACfC,IAAAA,QAAQ,GAAG,KAAK;IAChBC,QAAQ;IACRC,SAAS;IACTC,OAAO;IACPC,YAAY;IACZC,UAAU;AACV,IAAA,YAAY,EAAEC,SAAS;IACvB,GAAGC,IAAAA;AACL,GAAC,GAAAd,IAAA,CAAA;EAAA,oBAGDe,cAAA,CAACC,2BAAa,EAAA;AACZf,IAAAA,GAAG,EAAEA,GAAI;IACTC,SAAS,EAAEe,EAAE,CACXC,aAAM,CAACC,MAAM,EACbD,aAAM,CAACd,OAAO,CAAC,EACfc,aAAM,CAACb,IAAI,CAAC,EACZC,OAAO,IAAI,CAACC,QAAQ,IAAIW,aAAM,CAACZ,OAAO,EACtCJ,SACF,CAAE;IACF,aAAaU,EAAAA,UAAU,EAAEQ,IAAK;AAC9B,IAAA,YAAA,EAAYC,2BAAa,CAACR,SAAS,EAAEF,YAAY,CAAE;IACnD,WAAWL,EAAAA,OAAO,IAAIgB,SAAU;IAChCf,QAAQ,EAAEA,QAAQ,IAAID,OAAQ;AAAA,IAAA,GAC1BQ,IAAI;IAAAX,QAAA,eAERY,cAAA,CAACQ,2BAAa,EAAA;AACZjB,MAAAA,OAAO,EAAEA,OAAQ;AACjBE,MAAAA,QAAQ,EAAEA,QAAS;AACnBC,MAAAA,SAAS,EAAEA,SAAU;AACrBC,MAAAA,OAAO,EAAEA,OAAQ;AACjBC,MAAAA,YAAY,EAAEA,YAAa;AAC3BC,MAAAA,UAAU,EAAEA,UAAW;AAAAT,MAAAA,QAAA,EAEtBA,QAAAA;KACY,CAAA;AAAC,GACH,CAAC,CAAA;AAAA,CAEpB,EAAC;AAEDL,MAAM,CAAC0B,WAAW,GAAG,QAAQ;;;;"}
|
|
@@ -7,7 +7,6 @@ const Button_module = require('./Button.module.css.cjs');
|
|
|
7
7
|
const jsxRuntime = require('react/jsx-runtime');
|
|
8
8
|
const IconLoaderCircle = require('../icons/components/base/IconLoaderCircle.cjs');
|
|
9
9
|
|
|
10
|
-
const joinAriaLabel = (ariaLabel, counterLabel) => ariaLabel && counterLabel ? `${ariaLabel}, ${counterLabel}` : ariaLabel;
|
|
11
10
|
const ButtonContent = _ref => {
|
|
12
11
|
let {
|
|
13
12
|
loading = false,
|
|
@@ -46,5 +45,4 @@ const ButtonContent = _ref => {
|
|
|
46
45
|
};
|
|
47
46
|
|
|
48
47
|
exports.ButtonContent = ButtonContent;
|
|
49
|
-
exports.joinAriaLabel = joinAriaLabel;
|
|
50
48
|
//# sourceMappingURL=ButtonContent.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ButtonContent.cjs","sources":["../../../src/button/ButtonContent.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\n\nimport { CounterLabel, CounterSlot } from '../counter/CounterSlot'\nimport { IconLoaderCircle } from '../icons'\nimport styles from './Button.module.css'\nimport type { ButtonOwnProps } from './types'\n\
|
|
1
|
+
{"version":3,"file":"ButtonContent.cjs","sources":["../../../src/button/ButtonContent.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\n\nimport { CounterLabel, CounterSlot } from '../counter/CounterSlot'\nimport { IconLoaderCircle } from '../icons'\nimport styles from './Button.module.css'\nimport type { ButtonOwnProps } from './types'\n\ntype ButtonContentProps = Pick<\n ButtonOwnProps,\n 'iconLeft' | 'iconRight' | 'counter' | 'counterLabel' | 'dataTestId'\n> & {\n loading?: boolean\n children?: ReactNode\n}\n\nexport const ButtonContent = ({\n loading = false,\n iconLeft,\n iconRight,\n counter,\n counterLabel,\n dataTestId,\n children,\n}: ButtonContentProps) => (\n <>\n {loading ? (\n <IconLoaderCircle className={styles.spinner} aria-hidden='true' />\n ) : (\n iconLeft != null && (\n <span\n className={styles.icon}\n aria-hidden='true'\n data-testid={dataTestId?.iconLeft}\n >\n {iconLeft}\n </span>\n )\n )}\n <span className={styles.content} data-testid={dataTestId?.content}>\n {children}\n </span>\n {!loading && iconRight != null ? (\n <span\n className={styles.icon}\n aria-hidden='true'\n data-testid={dataTestId?.iconRight}\n >\n {iconRight}\n </span>\n ) : null}\n <CounterSlot dataTestId={dataTestId?.counter}>{counter}</CounterSlot>\n <CounterLabel>{counterLabel}</CounterLabel>\n </>\n)\n"],"names":["ButtonContent","_ref","loading","iconLeft","iconRight","counter","counterLabel","dataTestId","children","_jsxs","_Fragment","_jsx","IconLoaderCircle","className","styles","spinner","icon","content","CounterSlot","CounterLabel"],"mappings":";;;;;;;;;AAeO,MAAMA,aAAa,GAAGC,IAAA,IAAA;EAAA,IAAC;AAC5BC,IAAAA,OAAO,GAAG,KAAK;IACfC,QAAQ;IACRC,SAAS;IACTC,OAAO;IACPC,YAAY;IACZC,UAAU;AACVC,IAAAA,QAAAA;AACkB,GAAC,GAAAP,IAAA,CAAA;EAAA,oBACnBQ,eAAA,CAAAC,mBAAA,EAAA;AAAAF,IAAAA,QAAA,EACGN,CAAAA,OAAO,gBACNS,cAAA,CAACC,iCAAgB,EAAA;MAACC,SAAS,EAAEC,aAAM,CAACC,OAAQ;MAAC,aAAY,EAAA,MAAA;AAAM,KAAE,CAAC,GAElEZ,QAAQ,IAAI,IAAI,iBACdQ,cAAA,CAAA,MAAA,EAAA;MACEE,SAAS,EAAEC,aAAM,CAACE,IAAK;AACvB,MAAA,aAAA,EAAY,MAAM;MAClB,aAAaT,EAAAA,UAAU,EAAEJ,QAAS;AAAAK,MAAAA,QAAA,EAEjCL,QAAAA;KACG,CAET,eACDQ,cAAA,CAAA,MAAA,EAAA;MAAME,SAAS,EAAEC,aAAM,CAACG,OAAQ;MAAC,aAAaV,EAAAA,UAAU,EAAEU,OAAQ;AAAAT,MAAAA,QAAA,EAC/DA,QAAAA;KACG,CAAC,EACN,CAACN,OAAO,IAAIE,SAAS,IAAI,IAAI,gBAC5BO,cAAA,CAAA,MAAA,EAAA;MACEE,SAAS,EAAEC,aAAM,CAACE,IAAK;AACvB,MAAA,aAAA,EAAY,MAAM;MAClB,aAAaT,EAAAA,UAAU,EAAEH,SAAU;AAAAI,MAAAA,QAAA,EAElCJ,SAAAA;AAAS,KACN,CAAC,GACL,IAAI,eACRO,cAAA,CAACO,uBAAW,EAAA;MAACX,UAAU,EAAEA,UAAU,EAAEF,OAAQ;AAAAG,MAAAA,QAAA,EAAEH,OAAAA;AAAO,KAAc,CAAC,eACrEM,cAAA,CAACQ,wBAAY,EAAA;AAAAX,MAAAA,QAAA,EAAEF,YAAAA;AAAY,KAAe,CAAC,CAAA;AAAA,GAC3C,CAAC,CAAA;AAAA;;;;"}
|
|
@@ -3,43 +3,14 @@
|
|
|
3
3
|
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
4
4
|
|
|
5
5
|
const react = require('react');
|
|
6
|
-
const
|
|
7
|
-
const Anchor = require('../link-provider/Anchor.cjs');
|
|
8
|
-
const Button_module = require('./Button.module.css.cjs');
|
|
9
|
-
const ButtonContent = require('./ButtonContent.cjs');
|
|
6
|
+
const Button = require('./Button.cjs');
|
|
10
7
|
const jsxRuntime = require('react/jsx-runtime');
|
|
11
8
|
|
|
12
|
-
/**
|
|
13
|
-
const LinkButton = /*#__PURE__*/react.forwardRef((
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
variant = 'primary',
|
|
18
|
-
size = 'big',
|
|
19
|
-
iconLeft,
|
|
20
|
-
iconRight,
|
|
21
|
-
counter,
|
|
22
|
-
counterLabel,
|
|
23
|
-
dataTestId,
|
|
24
|
-
'aria-label': ariaLabel,
|
|
25
|
-
...rest
|
|
26
|
-
} = _ref;
|
|
27
|
-
return /*#__PURE__*/jsxRuntime.jsx(Anchor.Anchor, {
|
|
28
|
-
ref: ref,
|
|
29
|
-
className: cn(Button_module.button, Button_module[variant], Button_module[size], className),
|
|
30
|
-
"data-testid": dataTestId?.root,
|
|
31
|
-
"aria-label": ButtonContent.joinAriaLabel(ariaLabel, counterLabel),
|
|
32
|
-
...rest,
|
|
33
|
-
children: /*#__PURE__*/jsxRuntime.jsx(ButtonContent.ButtonContent, {
|
|
34
|
-
iconLeft: iconLeft,
|
|
35
|
-
iconRight: iconRight,
|
|
36
|
-
counter: counter,
|
|
37
|
-
counterLabel: counterLabel,
|
|
38
|
-
dataTestId: dataTestId,
|
|
39
|
-
children: children
|
|
40
|
-
})
|
|
41
|
-
});
|
|
42
|
-
});
|
|
9
|
+
/** @deprecated Use `Button` with `href`. */
|
|
10
|
+
const LinkButton = /*#__PURE__*/react.forwardRef((props, ref) => /*#__PURE__*/jsxRuntime.jsx(Button.Button, {
|
|
11
|
+
ref: ref,
|
|
12
|
+
...props
|
|
13
|
+
}));
|
|
43
14
|
LinkButton.displayName = 'LinkButton';
|
|
44
15
|
|
|
45
16
|
exports.LinkButton = LinkButton;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LinkButton.cjs","sources":["../../../src/button/LinkButton.tsx"],"sourcesContent":["import { forwardRef } from 'react'\n\nimport
|
|
1
|
+
{"version":3,"file":"LinkButton.cjs","sources":["../../../src/button/LinkButton.tsx"],"sourcesContent":["import { forwardRef } from 'react'\n\nimport type { AnchorProps } from '../link-provider/Anchor'\nimport { Button } from './Button'\nimport type { ButtonAsLinkProps } from './types'\n\n/** @deprecated Use `Button` with `href`. */\nexport type LinkButtonProps = ButtonAsLinkProps & Pick<AnchorProps, 'external'>\n\n/** @deprecated Use `Button` with `href`. */\nexport const LinkButton = forwardRef<HTMLAnchorElement, LinkButtonProps>(\n (props, ref) => <Button ref={ref} {...props} />,\n)\n\nLinkButton.displayName = 'LinkButton'\n"],"names":["LinkButton","forwardRef","props","ref","_jsx","Button","displayName"],"mappings":";;;;;;;;AASA;AACaA,MAAAA,UAAU,gBAAGC,gBAAU,CAClC,CAACC,KAAK,EAAEC,GAAG,kBAAKC,cAAA,CAACC,aAAM,EAAA;AAACF,EAAAA,GAAG,EAAEA,GAAI;EAAA,GAAKD,KAAAA;AAAK,CAAG,CAChD,EAAC;AAEDF,UAAU,CAACM,WAAW,GAAG,YAAY;;;;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
const styles = {"counter":"Counter-module_counter__qutVl","neutral":"Counter-module_neutral__Z5iCI","
|
|
3
|
+
const styles = {"counter":"Counter-module_counter__qutVl","neutral":"Counter-module_neutral__Z5iCI","error":"Counter-module_error__srNOJ","warning":"Counter-module_warning__5OY4o","action":"Counter-module_action__ywkeX","active":"Counter-module_active__AZ4oD"};
|
|
4
4
|
|
|
5
5
|
module.exports = styles;
|
|
6
6
|
//# sourceMappingURL=Counter.module.css.cjs.map
|
|
@@ -11,7 +11,6 @@ const TextLink = require('../text-link/TextLink.cjs');
|
|
|
11
11
|
const defaultContent = /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
12
12
|
children: ["Your privacy matters. We use cookieless analytics and collect only anonymized data for improvements. Cookies are used for functionality only. For more info read", ' ', /*#__PURE__*/jsxRuntime.jsx(TextLink.TextLink, {
|
|
13
13
|
href: "https://lido.fi/privacy-notice",
|
|
14
|
-
external: true,
|
|
15
14
|
size: "inherit",
|
|
16
15
|
children: "Privacy Notice"
|
|
17
16
|
}), "."]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Disclaimer.cjs","sources":["../../../src/disclaimer/Disclaimer.tsx"],"sourcesContent":["import { forwardRef, type ComponentPropsWithoutRef, type Ref } from 'react'\n\nimport cn from 'classnames'\n\nimport { TextLink } from '../text-link'\nimport styles from './Disclaimer.module.css'\n\nexport type DisclaimerDataTestId = {\n root?: string\n}\n\nexport type DisclaimerProps = ComponentPropsWithoutRef<'p'> & {\n /** Root element; use `div` when `children` contain block content. */\n as?: 'p' | 'div'\n dataTestId?: DisclaimerDataTestId\n}\n\nconst defaultContent = (\n <>\n Your privacy matters. We use cookieless analytics and collect only\n anonymized data for improvements. Cookies are used for functionality only.\n For more info read{' '}\n <TextLink href='https://lido.fi/privacy-notice'
|
|
1
|
+
{"version":3,"file":"Disclaimer.cjs","sources":["../../../src/disclaimer/Disclaimer.tsx"],"sourcesContent":["import { forwardRef, type ComponentPropsWithoutRef, type Ref } from 'react'\n\nimport cn from 'classnames'\n\nimport { TextLink } from '../text-link'\nimport styles from './Disclaimer.module.css'\n\nexport type DisclaimerDataTestId = {\n root?: string\n}\n\nexport type DisclaimerProps = ComponentPropsWithoutRef<'p'> & {\n /** Root element; use `div` when `children` contain block content. */\n as?: 'p' | 'div'\n dataTestId?: DisclaimerDataTestId\n}\n\nconst defaultContent = (\n <>\n Your privacy matters. We use cookieless analytics and collect only\n anonymized data for improvements. Cookies are used for functionality only.\n For more info read{' '}\n <TextLink href='https://lido.fi/privacy-notice' size='inherit'>\n Privacy Notice\n </TextLink>\n .\n </>\n)\n\n/** Page-level note that defaults to the privacy text and pins to the bottom (`margin-top: auto`) as the last child of a flex column. */\nexport const Disclaimer = forwardRef<HTMLElement, DisclaimerProps>(\n (\n {\n as: Component = 'p',\n className,\n children = defaultContent,\n dataTestId,\n ...rest\n },\n ref,\n ) => (\n <Component\n ref={ref as Ref<HTMLDivElement & HTMLParagraphElement>}\n className={cn(styles.root, className)}\n data-testid={dataTestId?.root}\n {...rest}\n >\n {children}\n </Component>\n ),\n)\n\nDisclaimer.displayName = 'Disclaimer'\n"],"names":["defaultContent","_jsxs","_Fragment","children","_jsx","TextLink","href","size","Disclaimer","forwardRef","_ref","ref","as","Component","className","dataTestId","rest","cn","styles","root","displayName"],"mappings":";;;;;;;;;;AAiBA,MAAMA,cAAc,gBAClBC,eAAA,CAAAC,mBAAA,EAAA;AAAAC,EAAAA,QAAA,GAAE,kKAGkB,EAAC,GAAG,eACtBC,cAAA,CAACC,iBAAQ,EAAA;AAACC,IAAAA,IAAI,EAAC,gCAAgC;AAACC,IAAAA,IAAI,EAAC,SAAS;AAAAJ,IAAAA,QAAA,EAAC,gBAAA;AAE/D,GAAU,CAAC,EAEb,GAAA,CAAA;AAAA,CAAE,CACH,CAAA;;AAED;AACO,MAAMK,UAAU,gBAAGC,gBAAU,CAClC,CAAAC,IAAA,EAQEC,GAAG,KAAA;EAAA,IAPH;IACEC,EAAE,EAAEC,SAAS,GAAG,GAAG;IACnBC,SAAS;AACTX,IAAAA,QAAQ,GAAGH,cAAc;IACzBe,UAAU;IACV,GAAGC,IAAAA;AACL,GAAC,GAAAN,IAAA,CAAA;EAAA,oBAGDN,cAAA,CAACS,SAAS,EAAA;AACRF,IAAAA,GAAG,EAAEA,GAAkD;IACvDG,SAAS,EAAEG,EAAE,CAACC,iBAAM,CAACC,IAAI,EAAEL,SAAS,CAAE;IACtC,aAAaC,EAAAA,UAAU,EAAEI,IAAK;AAAA,IAAA,GAC1BH,IAAI;AAAAb,IAAAA,QAAA,EAEPA,QAAAA;AAAQ,GACA,CAAC,CAAA;AAAA,CAEhB,EAAC;AAEDK,UAAU,CAACY,WAAW,GAAG,YAAY;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CloseButton.cjs","sources":["../../../src/icon-button/CloseButton.tsx"],"sourcesContent":["import { forwardRef } from 'react'\n\nimport { IconCross } from '../icons'\nimport { IconButton
|
|
1
|
+
{"version":3,"file":"CloseButton.cjs","sources":["../../../src/icon-button/CloseButton.tsx"],"sourcesContent":["import { forwardRef } from 'react'\n\nimport { IconCross } from '../icons'\nimport { IconButton } from './IconButton'\nimport type { IconButtonAsButtonProps } from './types'\n\nexport type CloseButtonProps = Omit<\n IconButtonAsButtonProps,\n 'icon' | 'variant' | 'aria-label'\n> & { 'aria-label'?: string }\n\n/** Ghost `IconButton` with a cross icon; `aria-label` defaults to \"Close\". */\nexport const CloseButton = forwardRef<HTMLButtonElement, CloseButtonProps>(\n ({ 'aria-label': ariaLabel = 'Close', ...rest }, ref) => (\n <IconButton\n ref={ref}\n variant='ghost'\n icon={<IconCross />}\n aria-label={ariaLabel}\n {...rest}\n />\n ),\n)\n\nCloseButton.displayName = 'CloseButton'\n"],"names":["CloseButton","forwardRef","_ref","ref","ariaLabel","rest","_jsx","IconButton","variant","icon","IconCross","displayName"],"mappings":";;;;;;;;;AAWA;AACO,MAAMA,WAAW,gBAAGC,gBAAU,CACnC,CAAAC,IAAA,EAAiDC,GAAG,KAAA;EAAA,IAAnD;IAAE,YAAY,EAAEC,SAAS,GAAG,OAAO;IAAE,GAAGC,IAAAA;AAAK,GAAC,GAAAH,IAAA,CAAA;EAAA,oBAC7CI,cAAA,CAACC,qBAAU,EAAA;AACTJ,IAAAA,GAAG,EAAEA,GAAI;AACTK,IAAAA,OAAO,EAAC,OAAO;AACfC,IAAAA,IAAI,eAAEH,cAAA,CAACI,mBAAS,IAAE,CAAE;AACpB,IAAA,YAAA,EAAYN,SAAU;IAAA,GAClBC,IAAAA;AAAI,GACT,CAAC,CAAA;AAAA,CAEN,EAAC;AAEDL,WAAW,CAACW,WAAW,GAAG,aAAa;;;;"}
|
|
@@ -8,13 +8,14 @@ const CounterSlot = require('../counter/CounterSlot.cjs');
|
|
|
8
8
|
const surface_module = require('../utils/surface.module.css.cjs');
|
|
9
9
|
const IconButton_module = require('./IconButton.module.css.cjs');
|
|
10
10
|
const jsxRuntime = require('react/jsx-runtime');
|
|
11
|
+
const ActionElement = require('../utils/ActionElement.cjs');
|
|
12
|
+
const joinAriaLabel = require('../utils/joinAriaLabel.cjs');
|
|
11
13
|
const IconLoaderCircle = require('../icons/components/base/IconLoaderCircle.cjs');
|
|
12
14
|
|
|
13
|
-
/** 36px fully rounded icon-only button; `loading` swaps the icon for a spinner and disables it. */
|
|
15
|
+
/** 36px fully rounded icon-only button; `loading` swaps the icon for a spinner and disables it. With `href` it renders a link that routes through `LinkProvider`. */
|
|
14
16
|
const IconButton = /*#__PURE__*/react.forwardRef((_ref, ref) => {
|
|
15
17
|
let {
|
|
16
18
|
className,
|
|
17
|
-
type = 'button',
|
|
18
19
|
variant = 'outline',
|
|
19
20
|
loading = false,
|
|
20
21
|
disabled = false,
|
|
@@ -25,14 +26,13 @@ const IconButton = /*#__PURE__*/react.forwardRef((_ref, ref) => {
|
|
|
25
26
|
dataTestId,
|
|
26
27
|
...rest
|
|
27
28
|
} = _ref;
|
|
28
|
-
return /*#__PURE__*/jsxRuntime.jsxs(
|
|
29
|
+
return /*#__PURE__*/jsxRuntime.jsxs(ActionElement.ActionElement, {
|
|
29
30
|
ref: ref,
|
|
30
|
-
type: type,
|
|
31
|
-
disabled: disabled || loading,
|
|
32
|
-
"aria-busy": loading || undefined,
|
|
33
31
|
className: cn(IconButton_module.button, IconButton_module[variant], variant === 'surface' && surface_module.surface, loading && !disabled && IconButton_module.loading, className),
|
|
34
32
|
"data-testid": dataTestId?.root,
|
|
35
|
-
"aria-label":
|
|
33
|
+
"aria-label": joinAriaLabel.joinAriaLabel(ariaLabel, counterLabel),
|
|
34
|
+
"aria-busy": loading || undefined,
|
|
35
|
+
disabled: disabled || loading,
|
|
36
36
|
...rest,
|
|
37
37
|
children: [loading ? /*#__PURE__*/jsxRuntime.jsx(IconLoaderCircle.IconLoaderCircle, {
|
|
38
38
|
className: IconButton_module.spinner,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconButton.cjs","sources":["../../../src/icon-button/IconButton.tsx"],"sourcesContent":["import { forwardRef
|
|
1
|
+
{"version":3,"file":"IconButton.cjs","sources":["../../../src/icon-button/IconButton.tsx"],"sourcesContent":["import { forwardRef } from 'react'\n\nimport cn from 'classnames'\n\nimport { CounterSlot } from '../counter/CounterSlot'\nimport { IconLoaderCircle } from '../icons'\nimport { ActionElement, joinAriaLabel } from '../utils'\nimport surfaceStyles from '../utils/surface.module.css'\nimport styles from './IconButton.module.css'\nimport type {\n IconButtonAsButtonProps,\n IconButtonAsLinkProps,\n IconButtonDataTestId,\n IconButtonProps,\n IconButtonVariant,\n} from './types'\n\nexport type {\n IconButtonAsButtonProps,\n IconButtonAsLinkProps,\n IconButtonDataTestId,\n IconButtonProps,\n IconButtonVariant,\n}\n\n/** 36px fully rounded icon-only button; `loading` swaps the icon for a spinner and disables it. With `href` it renders a link that routes through `LinkProvider`. */\nexport const IconButton = forwardRef<\n HTMLButtonElement | HTMLAnchorElement,\n IconButtonProps\n>(\n (\n {\n className,\n variant = 'outline',\n loading = false,\n disabled = false,\n icon,\n counter,\n counterLabel,\n 'aria-label': ariaLabel,\n dataTestId,\n ...rest\n },\n ref,\n ) => (\n <ActionElement\n ref={ref}\n className={cn(\n styles.button,\n styles[variant],\n variant === 'surface' && surfaceStyles.surface,\n loading && !disabled && styles.loading,\n className,\n )}\n data-testid={dataTestId?.root}\n aria-label={joinAriaLabel(ariaLabel, counterLabel)}\n aria-busy={loading || undefined}\n disabled={disabled || loading}\n {...rest}\n >\n {loading ? (\n <IconLoaderCircle className={styles.spinner} aria-hidden='true' />\n ) : (\n <span\n className={styles.icon}\n aria-hidden='true'\n data-testid={dataTestId?.icon}\n >\n {icon}\n </span>\n )}\n <CounterSlot dataTestId={dataTestId?.counter}>{counter}</CounterSlot>\n </ActionElement>\n ),\n)\n\nIconButton.displayName = 'IconButton'\n"],"names":["IconButton","forwardRef","_ref","ref","className","variant","loading","disabled","icon","counter","counterLabel","ariaLabel","dataTestId","rest","_jsxs","ActionElement","cn","styles","button","surfaceStyles","surface","root","joinAriaLabel","undefined","children","_jsx","IconLoaderCircle","spinner","CounterSlot","displayName"],"mappings":";;;;;;;;;;;;;;AAyBA;AACO,MAAMA,UAAU,gBAAGC,gBAAU,CAIlC,CAAAC,IAAA,EAaEC,GAAG,KAAA;EAAA,IAZH;IACEC,SAAS;AACTC,IAAAA,OAAO,GAAG,SAAS;AACnBC,IAAAA,OAAO,GAAG,KAAK;AACfC,IAAAA,QAAQ,GAAG,KAAK;IAChBC,IAAI;IACJC,OAAO;IACPC,YAAY;AACZ,IAAA,YAAY,EAAEC,SAAS;IACvBC,UAAU;IACV,GAAGC,IAAAA;AACL,GAAC,GAAAX,IAAA,CAAA;EAAA,oBAGDY,eAAA,CAACC,2BAAa,EAAA;AACZZ,IAAAA,GAAG,EAAEA,GAAI;AACTC,IAAAA,SAAS,EAAEY,EAAE,CACXC,iBAAM,CAACC,MAAM,EACbD,iBAAM,CAACZ,OAAO,CAAC,EACfA,OAAO,KAAK,SAAS,IAAIc,cAAa,CAACC,OAAO,EAC9Cd,OAAO,IAAI,CAACC,QAAQ,IAAIU,iBAAM,CAACX,OAAO,EACtCF,SACF,CAAE;IACF,aAAaQ,EAAAA,UAAU,EAAES,IAAK;AAC9B,IAAA,YAAA,EAAYC,2BAAa,CAACX,SAAS,EAAED,YAAY,CAAE;IACnD,WAAWJ,EAAAA,OAAO,IAAIiB,SAAU;IAChChB,QAAQ,EAAEA,QAAQ,IAAID,OAAQ;AAAA,IAAA,GAC1BO,IAAI;AAAAW,IAAAA,QAAA,EAEPlB,CAAAA,OAAO,gBACNmB,cAAA,CAACC,iCAAgB,EAAA;MAACtB,SAAS,EAAEa,iBAAM,CAACU,OAAQ;MAAC,aAAY,EAAA,MAAA;KAAQ,CAAC,gBAElEF,cAAA,CAAA,MAAA,EAAA;MACErB,SAAS,EAAEa,iBAAM,CAACT,IAAK;AACvB,MAAA,aAAA,EAAY,MAAM;MAClB,aAAaI,EAAAA,UAAU,EAAEJ,IAAK;AAAAgB,MAAAA,QAAA,EAE7BhB,IAAAA;AAAI,KACD,CACP,eACDiB,cAAA,CAACG,uBAAW,EAAA;MAAChB,UAAU,EAAEA,UAAU,EAAEH,OAAQ;AAAAe,MAAAA,QAAA,EAAEf,OAAAA;AAAO,KAAc,CAAC,CAAA;AAAA,GACxD,CAAC,CAAA;AAAA,CAEpB,EAAC;AAEDT,UAAU,CAAC6B,WAAW,GAAG,YAAY;;;;"}
|
package/dist/cjs/index.cjs
CHANGED
|
@@ -469,12 +469,15 @@ exports.Tooltip = Tooltip.Tooltip;
|
|
|
469
469
|
exports.TxStatus = TxStatus.TxStatus;
|
|
470
470
|
exports.Body = Typography.Body;
|
|
471
471
|
exports.BodyLarge = Typography.BodyLarge;
|
|
472
|
+
exports.Caption = Typography.Caption;
|
|
472
473
|
exports.Description = Typography.Description;
|
|
473
474
|
exports.GroupName = Typography.GroupName;
|
|
474
475
|
exports.H1 = Typography.H1;
|
|
475
476
|
exports.H2 = Typography.H2;
|
|
476
477
|
exports.H3 = Typography.H3;
|
|
477
478
|
exports.Typography = Typography.Typography;
|
|
479
|
+
exports.typographyColors = Typography.typographyColors;
|
|
480
|
+
exports.typographyWeights = Typography.typographyWeights;
|
|
478
481
|
exports.ThemeToggler = ThemeToggler;
|
|
479
482
|
Object.keys(lidoSharedUi).forEach(k => {
|
|
480
483
|
if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
|
package/dist/cjs/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../src/index.ts"],"sourcesContent":["import { ThemeToggler as SharedThemeToggler } from '@lidofinance/lido-shared-ui'\n\nexport * from './icons'\n\nexport * from './accordion'\nexport * from './address'\nexport * from './address-button'\nexport * from './badge'\nexport * from './banner'\nexport * from './breadcrumbs'\nexport * from './button'\nexport * from './card'\nexport * from './checkbox'\nexport * from './copy'\nexport * from './counter'\nexport * from './data-list'\nexport * from './disclaimer'\nexport * from './divider'\nexport * from './error-page'\nexport * from './footer'\nexport * from './grid'\nexport * from './header'\nexport * from './hex'\nexport * from './hidden'\nexport {\n Portal,\n useBodyScrollLock,\n useEscape,\n useFocusTrap,\n useOutsideClick,\n} from './hooks'\nexport type { FocusTrapOptions, PortalProps } from './hooks'\nexport * from './icon-button'\nexport * from './identicon'\nexport * from './info-tooltip'\nexport * from './input'\nexport * from './link-provider'\nexport * from './logo'\nexport * from './message-box'\nexport * from './modal'\nexport * from './nav-link'\nexport * from './notification'\nexport * from './page-layout'\nexport * from './pagination'\nexport * from './popover'\nexport * from './radio-button'\nexport * from './rich-input'\nexport * from './section-title'\nexport * from './segmented-control'\nexport * from './sidebar'\nexport * from './skeleton'\nexport * from './skip-link'\nexport * from './slider'\nexport * from './small-card'\nexport * from './stack'\nexport * from './stat-item'\nexport * from './switch'\nexport * from './tabs'\nexport * from './tag'\nexport * from './text-link'\nexport * from './theme-switcher'\nexport * from './token-amount'\nexport * from './token-selector'\nexport * from './tooltip'\nexport * from './tx-status'\nexport * from './typography'\nexport {\n breakpoints,\n breakpointWidths,\n logoBreakpointWidth,\n sidebarBreakpointWidth,\n spaces,\n} from './utils'\nexport type { Breakpoint, Responsive, Space } from './utils'\n\n// Everything lido-shared-ui exposes is re-exported, so app products get the\n// same non-production banner and theming primitives as the landing. Their\n// styles come in through src/styles/global.css.\nexport * from '@lidofinance/lido-shared-ui'\n\n/** Unstyled in app-ui (relies on `--lido-ui-*` tokens); prefer `ThemeSwitcher`. */\nexport const ThemeToggler = SharedThemeToggler\n"],"names":["ThemeToggler","SharedThemeToggler"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgFA;AACO,MAAMA,YAAY,GAAGC
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../src/index.ts"],"sourcesContent":["import { ThemeToggler as SharedThemeToggler } from '@lidofinance/lido-shared-ui'\n\nexport * from './icons'\n\nexport * from './accordion'\nexport * from './address'\nexport * from './address-button'\nexport * from './badge'\nexport * from './banner'\nexport * from './breadcrumbs'\nexport * from './button'\nexport * from './card'\nexport * from './checkbox'\nexport * from './copy'\nexport * from './counter'\nexport * from './data-list'\nexport * from './disclaimer'\nexport * from './divider'\nexport * from './error-page'\nexport * from './footer'\nexport * from './grid'\nexport * from './header'\nexport * from './hex'\nexport * from './hidden'\nexport {\n Portal,\n useBodyScrollLock,\n useEscape,\n useFocusTrap,\n useOutsideClick,\n} from './hooks'\nexport type { FocusTrapOptions, PortalProps } from './hooks'\nexport * from './icon-button'\nexport * from './identicon'\nexport * from './info-tooltip'\nexport * from './input'\nexport * from './link-provider'\nexport * from './logo'\nexport * from './message-box'\nexport * from './modal'\nexport * from './nav-link'\nexport * from './notification'\nexport * from './page-layout'\nexport * from './pagination'\nexport * from './popover'\nexport * from './radio-button'\nexport * from './rich-input'\nexport * from './section-title'\nexport * from './segmented-control'\nexport * from './sidebar'\nexport * from './skeleton'\nexport * from './skip-link'\nexport * from './slider'\nexport * from './small-card'\nexport * from './stack'\nexport * from './stat-item'\nexport * from './switch'\nexport * from './tabs'\nexport * from './tag'\nexport * from './text-link'\nexport * from './theme-switcher'\nexport * from './token-amount'\nexport * from './token-selector'\nexport * from './tooltip'\nexport * from './tx-status'\nexport * from './typography'\nexport {\n breakpoints,\n breakpointWidths,\n logoBreakpointWidth,\n sidebarBreakpointWidth,\n spaces,\n} from './utils'\nexport type { Breakpoint, Responsive, Space } from './utils'\n\n// Everything lido-shared-ui exposes is re-exported, so app products get the\n// same non-production banner and theming primitives as the landing. Their\n// styles come in through src/styles/global.css.\nexport * from '@lidofinance/lido-shared-ui'\n\n/** Unstyled in app-ui (relies on `--lido-ui-*` tokens); prefer `ThemeSwitcher`. */\nexport const ThemeToggler = SharedThemeToggler\n"],"names":["ThemeToggler","SharedThemeToggler"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgFA;AACO,MAAMA,YAAY,GAAGC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|