@lidofinance/lido-app-ui 1.9.0 → 1.10.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 +30 -1
- package/dist/README.md +30 -1
- package/dist/cjs/breadcrumbs/Breadcrumbs.cjs +92 -0
- package/dist/cjs/breadcrumbs/Breadcrumbs.cjs.map +1 -0
- package/dist/cjs/breadcrumbs/Breadcrumbs.module.css.cjs +6 -0
- package/dist/cjs/breadcrumbs/Breadcrumbs.module.css.cjs.map +1 -0
- package/dist/cjs/divider/Divider.cjs +26 -0
- package/dist/cjs/divider/Divider.cjs.map +1 -0
- package/dist/cjs/divider/Divider.module.css.cjs +6 -0
- package/dist/cjs/divider/Divider.module.css.cjs.map +1 -0
- package/dist/cjs/grid/Grid.cjs +47 -0
- package/dist/cjs/grid/Grid.cjs.map +1 -0
- package/dist/cjs/grid/Grid.module.css.cjs +6 -0
- package/dist/cjs/grid/Grid.module.css.cjs.map +1 -0
- package/dist/cjs/grid/GridItem.cjs +39 -0
- package/dist/cjs/grid/GridItem.cjs.map +1 -0
- package/dist/cjs/grid/GridItem.module.css.cjs +6 -0
- package/dist/cjs/grid/GridItem.module.css.cjs.map +1 -0
- package/dist/cjs/header/Header.cjs +31 -0
- package/dist/cjs/header/Header.cjs.map +1 -0
- package/dist/cjs/header/Header.module.css.cjs +6 -0
- package/dist/cjs/header/Header.module.css.cjs.map +1 -0
- package/dist/cjs/header/HeaderNav.cjs +69 -0
- package/dist/cjs/header/HeaderNav.cjs.map +1 -0
- package/dist/cjs/header/HeaderNav.module.css.cjs +6 -0
- package/dist/cjs/header/HeaderNav.module.css.cjs.map +1 -0
- package/dist/cjs/hidden/Hidden.cjs +25 -0
- package/dist/cjs/hidden/Hidden.cjs.map +1 -0
- package/dist/cjs/hidden/Hidden.module.css.cjs +6 -0
- package/dist/cjs/hidden/Hidden.module.css.cjs.map +1 -0
- package/dist/cjs/hooks/Portal.cjs +57 -0
- package/dist/cjs/hooks/Portal.cjs.map +1 -0
- package/dist/cjs/hooks/overlayStack.cjs +26 -0
- package/dist/cjs/hooks/overlayStack.cjs.map +1 -0
- package/dist/cjs/hooks/useBodyScrollLock.cjs +50 -0
- package/dist/cjs/hooks/useBodyScrollLock.cjs.map +1 -0
- package/dist/cjs/hooks/useEscape.cjs +25 -0
- package/dist/cjs/hooks/useEscape.cjs.map +1 -0
- package/dist/cjs/hooks/useFocusTrap.cjs +66 -0
- package/dist/cjs/hooks/useFocusTrap.cjs.map +1 -0
- package/dist/cjs/hooks/useIsomorphicLayoutEffect.cjs +10 -0
- package/dist/cjs/hooks/useIsomorphicLayoutEffect.cjs.map +1 -0
- package/dist/cjs/hooks/useOutsideClick.cjs +15 -13
- package/dist/cjs/hooks/useOutsideClick.cjs.map +1 -1
- package/dist/cjs/icon-button/IconButton.cjs +5 -2
- package/dist/cjs/icon-button/IconButton.cjs.map +1 -1
- package/dist/cjs/icon-button/IconButton.module.css.cjs +1 -1
- package/dist/cjs/index.cjs +26 -0
- package/dist/cjs/index.cjs.map +1 -1
- package/dist/cjs/index.css +3 -3
- package/dist/cjs/link-provider/Anchor.cjs +48 -0
- package/dist/cjs/link-provider/Anchor.cjs.map +1 -0
- package/dist/cjs/link-provider/LinkProvider.cjs +29 -0
- package/dist/cjs/link-provider/LinkProvider.cjs.map +1 -0
- package/dist/cjs/logo/Logo.cjs +84 -0
- package/dist/cjs/logo/Logo.cjs.map +1 -0
- package/dist/cjs/logo/Logo.module.css.cjs +6 -0
- package/dist/cjs/logo/Logo.module.css.cjs.map +1 -0
- package/dist/cjs/modal/Modal.cjs +36 -29
- package/dist/cjs/modal/Modal.cjs.map +1 -1
- package/dist/cjs/nav-link/NavLink.cjs +44 -0
- package/dist/cjs/nav-link/NavLink.cjs.map +1 -0
- package/dist/cjs/nav-link/NavLink.module.css.cjs +6 -0
- package/dist/cjs/nav-link/NavLink.module.css.cjs.map +1 -0
- package/dist/cjs/notification/Notification.cjs +20 -4
- package/dist/cjs/notification/Notification.cjs.map +1 -1
- package/dist/cjs/notification/Notification.module.css.cjs +1 -1
- package/dist/cjs/popover/Popover.cjs +136 -0
- package/dist/cjs/popover/Popover.cjs.map +1 -0
- package/dist/cjs/popover/Popover.module.css.cjs +6 -0
- package/dist/cjs/popover/Popover.module.css.cjs.map +1 -0
- package/dist/cjs/segmented-control/SegmentedControl.cjs +2 -1
- package/dist/cjs/segmented-control/SegmentedControl.cjs.map +1 -1
- package/dist/cjs/segmented-control/SegmentedControlCard.cjs +2 -1
- package/dist/cjs/segmented-control/SegmentedControlCard.cjs.map +1 -1
- package/dist/cjs/small-card/SmallCard.cjs +2 -1
- package/dist/cjs/small-card/SmallCard.cjs.map +1 -1
- package/dist/cjs/stack/Stack.cjs +41 -0
- package/dist/cjs/stack/Stack.cjs.map +1 -0
- package/dist/cjs/stack/Stack.module.css.cjs +6 -0
- package/dist/cjs/stack/Stack.module.css.cjs.map +1 -0
- package/dist/cjs/tabs/Tabs.cjs +2 -1
- package/dist/cjs/tabs/Tabs.cjs.map +1 -1
- package/dist/cjs/text-link/TextLink.cjs +2 -1
- package/dist/cjs/text-link/TextLink.cjs.map +1 -1
- package/dist/cjs/theme-switcher/ThemeSwitcher.cjs +39 -0
- package/dist/cjs/theme-switcher/ThemeSwitcher.cjs.map +1 -0
- package/dist/cjs/token-selector/TokenSelector.cjs +3 -3
- package/dist/cjs/token-selector/TokenSelector.cjs.map +1 -1
- package/dist/cjs/tooltip/Tooltip.cjs +2 -1
- package/dist/cjs/tooltip/Tooltip.cjs.map +1 -1
- package/dist/cjs/utils/ActionElement.cjs +41 -0
- package/dist/cjs/utils/ActionElement.cjs.map +1 -0
- package/dist/cjs/utils/responsive.cjs +67 -0
- package/dist/cjs/utils/responsive.cjs.map +1 -0
- package/dist/esm/breadcrumbs/Breadcrumbs.mjs +88 -0
- package/dist/esm/breadcrumbs/Breadcrumbs.mjs.map +1 -0
- package/dist/esm/breadcrumbs/Breadcrumbs.module.css.mjs +4 -0
- package/dist/esm/breadcrumbs/Breadcrumbs.module.css.mjs.map +1 -0
- package/dist/esm/divider/Divider.mjs +22 -0
- package/dist/esm/divider/Divider.mjs.map +1 -0
- package/dist/esm/divider/Divider.module.css.mjs +4 -0
- package/dist/esm/divider/Divider.module.css.mjs.map +1 -0
- package/dist/esm/grid/Grid.mjs +43 -0
- package/dist/esm/grid/Grid.mjs.map +1 -0
- package/dist/esm/grid/Grid.module.css.mjs +4 -0
- package/dist/esm/grid/Grid.module.css.mjs.map +1 -0
- package/dist/esm/grid/GridItem.mjs +35 -0
- package/dist/esm/grid/GridItem.mjs.map +1 -0
- package/dist/esm/grid/GridItem.module.css.mjs +4 -0
- package/dist/esm/grid/GridItem.module.css.mjs.map +1 -0
- package/dist/esm/header/Header.mjs +27 -0
- package/dist/esm/header/Header.mjs.map +1 -0
- package/dist/esm/header/Header.module.css.mjs +4 -0
- package/dist/esm/header/Header.module.css.mjs.map +1 -0
- package/dist/esm/header/HeaderNav.mjs +65 -0
- package/dist/esm/header/HeaderNav.mjs.map +1 -0
- package/dist/esm/header/HeaderNav.module.css.mjs +4 -0
- package/dist/esm/header/HeaderNav.module.css.mjs.map +1 -0
- package/dist/esm/hidden/Hidden.mjs +21 -0
- package/dist/esm/hidden/Hidden.mjs.map +1 -0
- package/dist/esm/hidden/Hidden.module.css.mjs +4 -0
- package/dist/esm/hidden/Hidden.module.css.mjs.map +1 -0
- package/dist/esm/hooks/Portal.mjs +53 -0
- package/dist/esm/hooks/Portal.mjs.map +1 -0
- package/dist/esm/hooks/overlayStack.mjs +22 -0
- package/dist/esm/hooks/overlayStack.mjs.map +1 -0
- package/dist/esm/hooks/useBodyScrollLock.mjs +46 -0
- package/dist/esm/hooks/useBodyScrollLock.mjs.map +1 -0
- package/dist/esm/hooks/useEscape.mjs +21 -0
- package/dist/esm/hooks/useEscape.mjs.map +1 -0
- package/dist/esm/hooks/useFocusTrap.mjs +62 -0
- package/dist/esm/hooks/useFocusTrap.mjs.map +1 -0
- package/dist/esm/hooks/useIsomorphicLayoutEffect.mjs +6 -0
- package/dist/esm/hooks/useIsomorphicLayoutEffect.mjs.map +1 -0
- package/dist/esm/hooks/useOutsideClick.mjs +16 -14
- package/dist/esm/hooks/useOutsideClick.mjs.map +1 -1
- package/dist/esm/icon-button/IconButton.mjs +5 -2
- package/dist/esm/icon-button/IconButton.mjs.map +1 -1
- package/dist/esm/icon-button/IconButton.module.css.mjs +1 -1
- package/dist/esm/index.css +3 -3
- package/dist/esm/index.mjs +13 -0
- package/dist/esm/index.mjs.map +1 -1
- package/dist/esm/link-provider/Anchor.mjs +44 -0
- package/dist/esm/link-provider/Anchor.mjs.map +1 -0
- package/dist/esm/link-provider/LinkProvider.mjs +24 -0
- package/dist/esm/link-provider/LinkProvider.mjs.map +1 -0
- package/dist/esm/logo/Logo.mjs +80 -0
- package/dist/esm/logo/Logo.mjs.map +1 -0
- package/dist/esm/logo/Logo.module.css.mjs +4 -0
- package/dist/esm/logo/Logo.module.css.mjs.map +1 -0
- package/dist/esm/modal/Modal.mjs +38 -31
- package/dist/esm/modal/Modal.mjs.map +1 -1
- package/dist/esm/nav-link/NavLink.mjs +40 -0
- package/dist/esm/nav-link/NavLink.mjs.map +1 -0
- package/dist/esm/nav-link/NavLink.module.css.mjs +4 -0
- package/dist/esm/nav-link/NavLink.module.css.mjs.map +1 -0
- package/dist/esm/notification/Notification.mjs +20 -4
- package/dist/esm/notification/Notification.mjs.map +1 -1
- package/dist/esm/notification/Notification.module.css.mjs +1 -1
- package/dist/esm/popover/Popover.mjs +132 -0
- package/dist/esm/popover/Popover.mjs.map +1 -0
- package/dist/esm/popover/Popover.module.css.mjs +4 -0
- package/dist/esm/popover/Popover.module.css.mjs.map +1 -0
- package/dist/esm/segmented-control/SegmentedControl.mjs +3 -2
- package/dist/esm/segmented-control/SegmentedControl.mjs.map +1 -1
- package/dist/esm/segmented-control/SegmentedControlCard.mjs +3 -2
- package/dist/esm/segmented-control/SegmentedControlCard.mjs.map +1 -1
- package/dist/esm/small-card/SmallCard.mjs +2 -1
- package/dist/esm/small-card/SmallCard.mjs.map +1 -1
- package/dist/esm/stack/Stack.mjs +37 -0
- package/dist/esm/stack/Stack.mjs.map +1 -0
- package/dist/esm/stack/Stack.module.css.mjs +4 -0
- package/dist/esm/stack/Stack.module.css.mjs.map +1 -0
- package/dist/esm/tabs/Tabs.mjs +3 -2
- package/dist/esm/tabs/Tabs.mjs.map +1 -1
- package/dist/esm/text-link/TextLink.mjs +2 -1
- package/dist/esm/text-link/TextLink.mjs.map +1 -1
- package/dist/esm/theme-switcher/ThemeSwitcher.mjs +35 -0
- package/dist/esm/theme-switcher/ThemeSwitcher.mjs.map +1 -0
- package/dist/esm/token-selector/TokenSelector.mjs +3 -3
- package/dist/esm/token-selector/TokenSelector.mjs.map +1 -1
- package/dist/esm/tooltip/Tooltip.mjs +3 -2
- package/dist/esm/tooltip/Tooltip.mjs.map +1 -1
- package/dist/esm/utils/ActionElement.mjs +37 -0
- package/dist/esm/utils/ActionElement.mjs.map +1 -0
- package/dist/esm/utils/responsive.mjs +58 -0
- package/dist/esm/utils/responsive.mjs.map +1 -0
- package/dist/index.css +3 -3
- package/dist/styles/breakpoints.css +6 -0
- package/dist/types/breadcrumbs/Breadcrumbs.d.ts +11 -0
- package/dist/types/breadcrumbs/Breadcrumbs.d.ts.map +1 -0
- package/dist/types/breadcrumbs/index.d.ts +3 -0
- package/dist/types/breadcrumbs/index.d.ts.map +1 -0
- package/dist/types/colors/colorTokens.d.ts.map +1 -1
- package/dist/types/divider/Divider.d.ts +10 -0
- package/dist/types/divider/Divider.d.ts.map +1 -0
- package/dist/types/divider/index.d.ts +3 -0
- package/dist/types/divider/index.d.ts.map +1 -0
- package/dist/types/grid/Grid.d.ts +31 -0
- package/dist/types/grid/Grid.d.ts.map +1 -0
- package/dist/types/grid/GridItem.d.ts +16 -0
- package/dist/types/grid/GridItem.d.ts.map +1 -0
- package/dist/types/grid/index.d.ts +5 -0
- package/dist/types/grid/index.d.ts.map +1 -0
- package/dist/types/header/Header.d.ts +9 -0
- package/dist/types/header/Header.d.ts.map +1 -0
- package/dist/types/header/HeaderNav.d.ts +4 -0
- package/dist/types/header/HeaderNav.d.ts.map +1 -0
- package/dist/types/header/index.d.ts +5 -0
- package/dist/types/header/index.d.ts.map +1 -0
- package/dist/types/hidden/Hidden.d.ts +11 -0
- package/dist/types/hidden/Hidden.d.ts.map +1 -0
- package/dist/types/hidden/index.d.ts +3 -0
- package/dist/types/hidden/index.d.ts.map +1 -0
- package/dist/types/hooks/Portal.d.ts +12 -0
- package/dist/types/hooks/Portal.d.ts.map +1 -0
- package/dist/types/hooks/index.d.ts +9 -0
- package/dist/types/hooks/index.d.ts.map +1 -0
- package/dist/types/hooks/overlayStack.d.ts +7 -0
- package/dist/types/hooks/overlayStack.d.ts.map +1 -0
- package/dist/types/hooks/useBodyScrollLock.d.ts +3 -0
- package/dist/types/hooks/useBodyScrollLock.d.ts.map +1 -0
- package/dist/types/hooks/useEscape.d.ts +3 -0
- package/dist/types/hooks/useEscape.d.ts.map +1 -0
- package/dist/types/hooks/useFocusTrap.d.ts +10 -0
- package/dist/types/hooks/useFocusTrap.d.ts.map +1 -0
- package/dist/types/hooks/useIsomorphicLayoutEffect.d.ts +3 -0
- package/dist/types/hooks/useIsomorphicLayoutEffect.d.ts.map +1 -0
- package/dist/types/hooks/useOutsideClick.d.ts +2 -2
- package/dist/types/hooks/useOutsideClick.d.ts.map +1 -1
- package/dist/types/icon-button/IconButton.d.ts +11 -3
- package/dist/types/icon-button/IconButton.d.ts.map +1 -1
- package/dist/types/index.d.ts +12 -0
- package/dist/types/index.d.ts.map +1 -1
- package/dist/types/link-provider/Anchor.d.ts +4 -0
- package/dist/types/link-provider/Anchor.d.ts.map +1 -0
- package/dist/types/link-provider/LinkProvider.d.ts +17 -0
- package/dist/types/link-provider/LinkProvider.d.ts.map +1 -0
- package/dist/types/link-provider/index.d.ts +3 -0
- package/dist/types/link-provider/index.d.ts.map +1 -0
- package/dist/types/logo/Logo.d.ts +13 -0
- package/dist/types/logo/Logo.d.ts.map +1 -0
- package/dist/types/logo/index.d.ts +3 -0
- package/dist/types/logo/index.d.ts.map +1 -0
- package/dist/types/modal/Modal.d.ts +23 -1
- package/dist/types/modal/Modal.d.ts.map +1 -1
- package/dist/types/nav-link/NavLink.d.ts +12 -0
- package/dist/types/nav-link/NavLink.d.ts.map +1 -0
- package/dist/types/nav-link/index.d.ts +3 -0
- package/dist/types/nav-link/index.d.ts.map +1 -0
- package/dist/types/notification/Notification.d.ts +15 -2
- package/dist/types/notification/Notification.d.ts.map +1 -1
- package/dist/types/popover/Popover.d.ts +21 -0
- package/dist/types/popover/Popover.d.ts.map +1 -0
- package/dist/types/popover/index.d.ts +3 -0
- package/dist/types/popover/index.d.ts.map +1 -0
- package/dist/types/segmented-control/SegmentedControl.d.ts.map +1 -1
- package/dist/types/segmented-control/SegmentedControlCard.d.ts.map +1 -1
- package/dist/types/small-card/SmallCard.d.ts.map +1 -1
- package/dist/types/stack/Stack.d.ts +25 -0
- package/dist/types/stack/Stack.d.ts.map +1 -0
- package/dist/types/stack/index.d.ts +3 -0
- package/dist/types/stack/index.d.ts.map +1 -0
- package/dist/types/tabs/Tabs.d.ts.map +1 -1
- package/dist/types/text-link/TextLink.d.ts.map +1 -1
- package/dist/types/theme-switcher/ThemeSwitcher.d.ts +5 -0
- package/dist/types/theme-switcher/ThemeSwitcher.d.ts.map +1 -0
- package/dist/types/theme-switcher/index.d.ts +3 -0
- package/dist/types/theme-switcher/index.d.ts.map +1 -0
- package/dist/types/tooltip/Tooltip.d.ts.map +1 -1
- package/dist/types/utils/ActionElement.d.ts +10 -0
- package/dist/types/utils/ActionElement.d.ts.map +1 -0
- package/dist/types/utils/index.d.ts +5 -0
- package/dist/types/utils/index.d.ts.map +1 -0
- package/dist/types/utils/responsive.d.ts +27 -0
- package/dist/types/utils/responsive.d.ts.map +1 -0
- package/package.json +2 -2
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
4
|
+
|
|
5
|
+
/** Each layer gets a document listener for `type` that only fires while it's the newest layer in its stack. */
|
|
6
|
+
const createLayerStack = function (type) {
|
|
7
|
+
let {
|
|
8
|
+
capture = false
|
|
9
|
+
} = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
10
|
+
const layers = [];
|
|
11
|
+
return onEvent => {
|
|
12
|
+
const layer = {};
|
|
13
|
+
layers.push(layer);
|
|
14
|
+
const listener = event => {
|
|
15
|
+
if (layers[layers.length - 1] === layer) onEvent(event);
|
|
16
|
+
};
|
|
17
|
+
document.addEventListener(type, listener, capture);
|
|
18
|
+
return () => {
|
|
19
|
+
document.removeEventListener(type, listener, capture);
|
|
20
|
+
layers.splice(layers.indexOf(layer), 1);
|
|
21
|
+
};
|
|
22
|
+
};
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
exports.createLayerStack = createLayerStack;
|
|
26
|
+
//# sourceMappingURL=overlayStack.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"overlayStack.cjs","sources":["../../../src/hooks/overlayStack.ts"],"sourcesContent":["type LayerOptions = { capture?: boolean }\n\n/** Each layer gets a document listener for `type` that only fires while it's the newest layer in its stack. */\nexport const createLayerStack = <K extends keyof DocumentEventMap>(\n type: K,\n { capture = false }: LayerOptions = {},\n) => {\n const layers: object[] = []\n return (onEvent: (event: DocumentEventMap[K]) => void) => {\n const layer = {}\n layers.push(layer)\n const listener = (event: DocumentEventMap[K]) => {\n if (layers[layers.length - 1] === layer) onEvent(event)\n }\n document.addEventListener(type, listener, capture)\n return () => {\n document.removeEventListener(type, listener, capture)\n layers.splice(layers.indexOf(layer), 1)\n }\n }\n}\n"],"names":["createLayerStack","type","capture","arguments","length","undefined","layers","onEvent","layer","push","listener","event","document","addEventListener","removeEventListener","splice","indexOf"],"mappings":";;;;AAEA;MACaA,gBAAgB,GAAG,UAC9BC,IAAO,EAEJ;EAAA,IADH;AAAEC,IAAAA,OAAO,GAAG,KAAA;AAAoB,GAAC,GAAAC,SAAA,CAAAC,MAAA,GAAAD,CAAAA,IAAAA,SAAA,CAAAE,CAAAA,CAAAA,KAAAA,SAAA,GAAAF,SAAA,CAAG,CAAA,CAAA,GAAA,EAAE,CAAA;EAEtC,MAAMG,MAAgB,GAAG,EAAE,CAAA;AAC3B,EAAA,OAAQC,OAA6C,IAAK;IACxD,MAAMC,KAAK,GAAG,EAAE,CAAA;AAChBF,IAAAA,MAAM,CAACG,IAAI,CAACD,KAAK,CAAC,CAAA;IAClB,MAAME,QAAQ,GAAIC,KAA0B,IAAK;AAC/C,MAAA,IAAIL,MAAM,CAACA,MAAM,CAACF,MAAM,GAAG,CAAC,CAAC,KAAKI,KAAK,EAAED,OAAO,CAACI,KAAK,CAAC,CAAA;KACxD,CAAA;IACDC,QAAQ,CAACC,gBAAgB,CAACZ,IAAI,EAAES,QAAQ,EAAER,OAAO,CAAC,CAAA;AAClD,IAAA,OAAO,MAAM;MACXU,QAAQ,CAACE,mBAAmB,CAACb,IAAI,EAAES,QAAQ,EAAER,OAAO,CAAC,CAAA;MACrDI,MAAM,CAACS,MAAM,CAACT,MAAM,CAACU,OAAO,CAACR,KAAK,CAAC,EAAE,CAAC,CAAC,CAAA;KACxC,CAAA;GACF,CAAA;AACH;;;;"}
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
4
|
+
|
|
5
|
+
const react = require('react');
|
|
6
|
+
|
|
7
|
+
// Ref-counted so stacked overlays only restore on the last unlock.
|
|
8
|
+
let lockCount = 0;
|
|
9
|
+
let saved = {
|
|
10
|
+
overflow: '',
|
|
11
|
+
paddingRight: ''
|
|
12
|
+
};
|
|
13
|
+
const lock = () => {
|
|
14
|
+
if (lockCount === 0) {
|
|
15
|
+
const {
|
|
16
|
+
body,
|
|
17
|
+
documentElement
|
|
18
|
+
} = document;
|
|
19
|
+
saved = {
|
|
20
|
+
overflow: body.style.overflow,
|
|
21
|
+
paddingRight: body.style.paddingRight
|
|
22
|
+
};
|
|
23
|
+
const scrollbarWidth = window.innerWidth - documentElement.clientWidth;
|
|
24
|
+
if (scrollbarWidth > 0) {
|
|
25
|
+
const current = parseFloat(getComputedStyle(body).paddingRight) || 0;
|
|
26
|
+
body.style.paddingRight = `${current + scrollbarWidth}px`;
|
|
27
|
+
}
|
|
28
|
+
body.style.overflow = 'hidden';
|
|
29
|
+
}
|
|
30
|
+
lockCount += 1;
|
|
31
|
+
};
|
|
32
|
+
const unlock = () => {
|
|
33
|
+
lockCount -= 1;
|
|
34
|
+
if (lockCount === 0) {
|
|
35
|
+
document.body.style.overflow = saved.overflow;
|
|
36
|
+
document.body.style.paddingRight = saved.paddingRight;
|
|
37
|
+
}
|
|
38
|
+
};
|
|
39
|
+
|
|
40
|
+
/** Locks body scroll while `active`, compensating the scrollbar width. */
|
|
41
|
+
const useBodyScrollLock = active => {
|
|
42
|
+
react.useEffect(() => {
|
|
43
|
+
if (!active) return;
|
|
44
|
+
lock();
|
|
45
|
+
return unlock;
|
|
46
|
+
}, [active]);
|
|
47
|
+
};
|
|
48
|
+
|
|
49
|
+
exports.useBodyScrollLock = useBodyScrollLock;
|
|
50
|
+
//# sourceMappingURL=useBodyScrollLock.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useBodyScrollLock.cjs","sources":["../../../src/hooks/useBodyScrollLock.ts"],"sourcesContent":["import { useEffect } from 'react'\n\n// Ref-counted so stacked overlays only restore on the last unlock.\nlet lockCount = 0\nlet saved = { overflow: '', paddingRight: '' }\n\nconst lock = () => {\n if (lockCount === 0) {\n const { body, documentElement } = document\n saved = {\n overflow: body.style.overflow,\n paddingRight: body.style.paddingRight,\n }\n const scrollbarWidth = window.innerWidth - documentElement.clientWidth\n if (scrollbarWidth > 0) {\n const current = parseFloat(getComputedStyle(body).paddingRight) || 0\n body.style.paddingRight = `${current + scrollbarWidth}px`\n }\n body.style.overflow = 'hidden'\n }\n lockCount += 1\n}\n\nconst unlock = () => {\n lockCount -= 1\n if (lockCount === 0) {\n document.body.style.overflow = saved.overflow\n document.body.style.paddingRight = saved.paddingRight\n }\n}\n\n/** Locks body scroll while `active`, compensating the scrollbar width. */\nexport const useBodyScrollLock = (active: boolean) => {\n useEffect(() => {\n if (!active) return\n lock()\n return unlock\n }, [active])\n}\n"],"names":["lockCount","saved","overflow","paddingRight","lock","body","documentElement","document","style","scrollbarWidth","window","innerWidth","clientWidth","current","parseFloat","getComputedStyle","unlock","useBodyScrollLock","active","useEffect"],"mappings":";;;;;;AAEA;AACA,IAAIA,SAAS,GAAG,CAAC,CAAA;AACjB,IAAIC,KAAK,GAAG;AAAEC,EAAAA,QAAQ,EAAE,EAAE;AAAEC,EAAAA,YAAY,EAAE,EAAA;AAAG,CAAC,CAAA;AAE9C,MAAMC,IAAI,GAAGA,MAAM;EACjB,IAAIJ,SAAS,KAAK,CAAC,EAAE;IACnB,MAAM;MAAEK,IAAI;AAAEC,MAAAA,eAAAA;AAAgB,KAAC,GAAGC,QAAQ,CAAA;AAC1CN,IAAAA,KAAK,GAAG;AACNC,MAAAA,QAAQ,EAAEG,IAAI,CAACG,KAAK,CAACN,QAAQ;AAC7BC,MAAAA,YAAY,EAAEE,IAAI,CAACG,KAAK,CAACL,YAAAA;KAC1B,CAAA;IACD,MAAMM,cAAc,GAAGC,MAAM,CAACC,UAAU,GAAGL,eAAe,CAACM,WAAW,CAAA;IACtE,IAAIH,cAAc,GAAG,CAAC,EAAE;AACtB,MAAA,MAAMI,OAAO,GAAGC,UAAU,CAACC,gBAAgB,CAACV,IAAI,CAAC,CAACF,YAAY,CAAC,IAAI,CAAC,CAAA;MACpEE,IAAI,CAACG,KAAK,CAACL,YAAY,GAAG,CAAGU,EAAAA,OAAO,GAAGJ,cAAc,CAAI,EAAA,CAAA,CAAA;AAC3D,KAAA;AACAJ,IAAAA,IAAI,CAACG,KAAK,CAACN,QAAQ,GAAG,QAAQ,CAAA;AAChC,GAAA;AACAF,EAAAA,SAAS,IAAI,CAAC,CAAA;AAChB,CAAC,CAAA;AAED,MAAMgB,MAAM,GAAGA,MAAM;AACnBhB,EAAAA,SAAS,IAAI,CAAC,CAAA;EACd,IAAIA,SAAS,KAAK,CAAC,EAAE;IACnBO,QAAQ,CAACF,IAAI,CAACG,KAAK,CAACN,QAAQ,GAAGD,KAAK,CAACC,QAAQ,CAAA;IAC7CK,QAAQ,CAACF,IAAI,CAACG,KAAK,CAACL,YAAY,GAAGF,KAAK,CAACE,YAAY,CAAA;AACvD,GAAA;AACF,CAAC,CAAA;;AAED;AACac,MAAAA,iBAAiB,GAAIC,MAAe,IAAK;AACpDC,EAAAA,eAAS,CAAC,MAAM;IACd,IAAI,CAACD,MAAM,EAAE,OAAA;AACbd,IAAAA,IAAI,EAAE,CAAA;AACN,IAAA,OAAOY,MAAM,CAAA;AACf,GAAC,EAAE,CAACE,MAAM,CAAC,CAAC,CAAA;AACd;;;;"}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
4
|
+
|
|
5
|
+
const react = require('react');
|
|
6
|
+
const overlayStack = require('./overlayStack.cjs');
|
|
7
|
+
|
|
8
|
+
const listenEscapeLayer = overlayStack.createLayerStack('keydown');
|
|
9
|
+
|
|
10
|
+
/** Calls `handler` on Escape while `active`; with nested overlays only the newest one handles it. */
|
|
11
|
+
const useEscape = (active, handler) => {
|
|
12
|
+
const handlerRef = react.useRef(handler);
|
|
13
|
+
handlerRef.current = handler;
|
|
14
|
+
react.useEffect(() => {
|
|
15
|
+
if (!active) return;
|
|
16
|
+
return listenEscapeLayer(event => {
|
|
17
|
+
if (event.key !== 'Escape' || event.defaultPrevented) return;
|
|
18
|
+
event.preventDefault();
|
|
19
|
+
handlerRef.current(event);
|
|
20
|
+
});
|
|
21
|
+
}, [active]);
|
|
22
|
+
};
|
|
23
|
+
|
|
24
|
+
exports.useEscape = useEscape;
|
|
25
|
+
//# sourceMappingURL=useEscape.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useEscape.cjs","sources":["../../../src/hooks/useEscape.ts"],"sourcesContent":["import { useEffect, useRef } from 'react'\n\nimport { createLayerStack } from './overlayStack'\n\nconst listenEscapeLayer = createLayerStack('keydown')\n\n/** Calls `handler` on Escape while `active`; with nested overlays only the newest one handles it. */\nexport const useEscape = (\n active: boolean,\n handler: (event: KeyboardEvent) => void,\n) => {\n const handlerRef = useRef(handler)\n handlerRef.current = handler\n\n useEffect(() => {\n if (!active) return\n\n return listenEscapeLayer((event) => {\n if (event.key !== 'Escape' || event.defaultPrevented) return\n event.preventDefault()\n handlerRef.current(event)\n })\n }, [active])\n}\n"],"names":["listenEscapeLayer","createLayerStack","useEscape","active","handler","handlerRef","useRef","current","useEffect","event","key","defaultPrevented","preventDefault"],"mappings":";;;;;;;AAIA,MAAMA,iBAAiB,GAAGC,6BAAgB,CAAC,SAAS,CAAC,CAAA;;AAErD;MACaC,SAAS,GAAGA,CACvBC,MAAe,EACfC,OAAuC,KACpC;AACH,EAAA,MAAMC,UAAU,GAAGC,YAAM,CAACF,OAAO,CAAC,CAAA;EAClCC,UAAU,CAACE,OAAO,GAAGH,OAAO,CAAA;AAE5BI,EAAAA,eAAS,CAAC,MAAM;IACd,IAAI,CAACL,MAAM,EAAE,OAAA;IAEb,OAAOH,iBAAiB,CAAES,KAAK,IAAK;MAClC,IAAIA,KAAK,CAACC,GAAG,KAAK,QAAQ,IAAID,KAAK,CAACE,gBAAgB,EAAE,OAAA;MACtDF,KAAK,CAACG,cAAc,EAAE,CAAA;AACtBP,MAAAA,UAAU,CAACE,OAAO,CAACE,KAAK,CAAC,CAAA;AAC3B,KAAC,CAAC,CAAA;AACJ,GAAC,EAAE,CAACN,MAAM,CAAC,CAAC,CAAA;AACd;;;;"}
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
4
|
+
|
|
5
|
+
const react = require('react');
|
|
6
|
+
const overlayStack = require('./overlayStack.cjs');
|
|
7
|
+
|
|
8
|
+
const listenTrapLayer = overlayStack.createLayerStack('keydown');
|
|
9
|
+
const TABBABLE = 'a[href],button,input:not([type="hidden"]),select,textarea,[tabindex]:not([tabindex="-1"]),[contenteditable="true"]';
|
|
10
|
+
const isRendered = el => {
|
|
11
|
+
const style = getComputedStyle(el);
|
|
12
|
+
return style.visibility !== 'hidden' && style.display !== 'none';
|
|
13
|
+
};
|
|
14
|
+
const getTabbable = container => Array.from(container.querySelectorAll(TABBABLE)).filter(el => !el.matches(':disabled') && el.getAttribute('aria-hidden') !== 'true' && isRendered(el));
|
|
15
|
+
/** Keeps Tab / Shift+Tab inside `element` while `active`; with nested traps only the newest one handles Tab. */
|
|
16
|
+
const useFocusTrap = function (element, active) {
|
|
17
|
+
let options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
|
|
18
|
+
const optionsRef = react.useRef(options);
|
|
19
|
+
optionsRef.current = options;
|
|
20
|
+
react.useEffect(() => {
|
|
21
|
+
const container = element;
|
|
22
|
+
if (!active || !container) return;
|
|
23
|
+
const previous = document.activeElement;
|
|
24
|
+
const target = optionsRef.current.initialFocus?.current ?? getTabbable(container)[0] ?? container;
|
|
25
|
+
if (target === container && !container.hasAttribute('tabindex')) {
|
|
26
|
+
container.setAttribute('tabindex', '-1');
|
|
27
|
+
}
|
|
28
|
+
target.focus({
|
|
29
|
+
preventScroll: true
|
|
30
|
+
});
|
|
31
|
+
const onKeyDown = event => {
|
|
32
|
+
if (event.key !== 'Tab') return;
|
|
33
|
+
const items = getTabbable(container);
|
|
34
|
+
if (items.length === 0) {
|
|
35
|
+
event.preventDefault();
|
|
36
|
+
container.focus();
|
|
37
|
+
return;
|
|
38
|
+
}
|
|
39
|
+
const first = items[0];
|
|
40
|
+
const last = items[items.length - 1];
|
|
41
|
+
const current = document.activeElement;
|
|
42
|
+
if (!container.contains(current)) {
|
|
43
|
+
event.preventDefault();
|
|
44
|
+
(event.shiftKey ? last : first).focus();
|
|
45
|
+
} else if (event.shiftKey && (current === first || current === container)) {
|
|
46
|
+
event.preventDefault();
|
|
47
|
+
last.focus();
|
|
48
|
+
} else if (!event.shiftKey && current === last) {
|
|
49
|
+
event.preventDefault();
|
|
50
|
+
first.focus();
|
|
51
|
+
}
|
|
52
|
+
};
|
|
53
|
+
const stopListening = listenTrapLayer(onKeyDown);
|
|
54
|
+
return () => {
|
|
55
|
+
stopListening();
|
|
56
|
+
if ((optionsRef.current.restoreFocus ?? true) && previous && document.contains(previous)) {
|
|
57
|
+
previous.focus({
|
|
58
|
+
preventScroll: true
|
|
59
|
+
});
|
|
60
|
+
}
|
|
61
|
+
};
|
|
62
|
+
}, [element, active]);
|
|
63
|
+
};
|
|
64
|
+
|
|
65
|
+
exports.useFocusTrap = useFocusTrap;
|
|
66
|
+
//# sourceMappingURL=useFocusTrap.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useFocusTrap.cjs","sources":["../../../src/hooks/useFocusTrap.ts"],"sourcesContent":["import { useEffect, useRef, type RefObject } from 'react'\n\nimport { createLayerStack } from './overlayStack'\n\nconst listenTrapLayer = createLayerStack('keydown')\n\nconst TABBABLE =\n 'a[href],button,input:not([type=\"hidden\"]),select,textarea,[tabindex]:not([tabindex=\"-1\"]),[contenteditable=\"true\"]'\n\nconst isRendered = (el: HTMLElement) => {\n const style = getComputedStyle(el)\n return style.visibility !== 'hidden' && style.display !== 'none'\n}\n\nconst getTabbable = (container: HTMLElement) =>\n Array.from(container.querySelectorAll<HTMLElement>(TABBABLE)).filter(\n (el) =>\n !el.matches(':disabled') &&\n el.getAttribute('aria-hidden') !== 'true' &&\n isRendered(el),\n )\n\nexport type FocusTrapOptions = {\n /** Element to focus on activate; defaults to first tabbable, then the container. */\n initialFocus?: RefObject<HTMLElement | null>\n /** Return focus to the previously focused element on deactivate. Default true. */\n restoreFocus?: boolean\n}\n\n/** Keeps Tab / Shift+Tab inside `element` while `active`; with nested traps only the newest one handles Tab. */\nexport const useFocusTrap = (\n element: HTMLElement | null,\n active: boolean,\n options: FocusTrapOptions = {},\n) => {\n const optionsRef = useRef(options)\n optionsRef.current = options\n\n useEffect(() => {\n const container = element\n if (!active || !container) return\n\n const previous = document.activeElement as HTMLElement | null\n\n const target =\n optionsRef.current.initialFocus?.current ??\n getTabbable(container)[0] ??\n container\n if (target === container && !container.hasAttribute('tabindex')) {\n container.setAttribute('tabindex', '-1')\n }\n target.focus({ preventScroll: true })\n\n const onKeyDown = (event: KeyboardEvent) => {\n if (event.key !== 'Tab') return\n const items = getTabbable(container)\n if (items.length === 0) {\n event.preventDefault()\n container.focus()\n return\n }\n const first = items[0]\n const last = items[items.length - 1]\n const current = document.activeElement\n if (!container.contains(current)) {\n event.preventDefault()\n ;(event.shiftKey ? last : first).focus()\n } else if (\n event.shiftKey &&\n (current === first || current === container)\n ) {\n event.preventDefault()\n last.focus()\n } else if (!event.shiftKey && current === last) {\n event.preventDefault()\n first.focus()\n }\n }\n\n const stopListening = listenTrapLayer(onKeyDown)\n return () => {\n stopListening()\n if (\n (optionsRef.current.restoreFocus ?? true) &&\n previous &&\n document.contains(previous)\n ) {\n previous.focus({ preventScroll: true })\n }\n }\n }, [element, active])\n}\n"],"names":["listenTrapLayer","createLayerStack","TABBABLE","isRendered","el","style","getComputedStyle","visibility","display","getTabbable","container","Array","from","querySelectorAll","filter","matches","getAttribute","useFocusTrap","element","active","options","arguments","length","undefined","optionsRef","useRef","current","useEffect","previous","document","activeElement","target","initialFocus","hasAttribute","setAttribute","focus","preventScroll","onKeyDown","event","key","items","preventDefault","first","last","contains","shiftKey","stopListening","restoreFocus"],"mappings":"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"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
4
|
+
|
|
5
|
+
const react = require('react');
|
|
6
|
+
|
|
7
|
+
const useIsomorphicLayoutEffect = typeof window === 'undefined' ? react.useEffect : react.useLayoutEffect;
|
|
8
|
+
|
|
9
|
+
exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;
|
|
10
|
+
//# sourceMappingURL=useIsomorphicLayoutEffect.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useIsomorphicLayoutEffect.cjs","sources":["../../../src/hooks/useIsomorphicLayoutEffect.ts"],"sourcesContent":["import { useEffect, useLayoutEffect } from 'react'\n\nexport const useIsomorphicLayoutEffect =\n typeof window === 'undefined' ? useEffect : useLayoutEffect\n"],"names":["useIsomorphicLayoutEffect","window","useEffect","useLayoutEffect"],"mappings":";;;;;;AAEO,MAAMA,yBAAyB,GACpC,OAAOC,MAAM,KAAK,WAAW,GAAGC,eAAS,GAAGC;;;;"}
|
|
@@ -3,21 +3,23 @@
|
|
|
3
3
|
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
4
4
|
|
|
5
5
|
const react = require('react');
|
|
6
|
+
const overlayStack = require('./overlayStack.cjs');
|
|
6
7
|
|
|
7
|
-
const
|
|
8
|
+
const listenOutsideLayer = overlayStack.createLayerStack('pointerdown', {
|
|
9
|
+
capture: true
|
|
10
|
+
});
|
|
11
|
+
|
|
12
|
+
/** Calls `onOutside` on pointerdown outside `element` while `enabled`; with nested overlays only the newest one handles outside clicks. */
|
|
13
|
+
const useOutsideClick = (element, onOutside, enabled) => {
|
|
14
|
+
const handlerRef = react.useRef(onOutside);
|
|
15
|
+
handlerRef.current = onOutside;
|
|
8
16
|
react.useEffect(() => {
|
|
9
|
-
if (!enabled) return;
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
}
|
|
16
|
-
onOutside();
|
|
17
|
-
};
|
|
18
|
-
document.addEventListener('pointerdown', handlePointerDown, true);
|
|
19
|
-
return () => document.removeEventListener('pointerdown', handlePointerDown, true);
|
|
20
|
-
}, [ref, onOutside, enabled]);
|
|
17
|
+
if (!enabled || !element) return;
|
|
18
|
+
return listenOutsideLayer(event => {
|
|
19
|
+
if (event.target instanceof Node && element.contains(event.target)) return;
|
|
20
|
+
handlerRef.current(event);
|
|
21
|
+
});
|
|
22
|
+
}, [element, enabled]);
|
|
21
23
|
};
|
|
22
24
|
|
|
23
25
|
exports.useOutsideClick = useOutsideClick;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useOutsideClick.cjs","sources":["../../../src/hooks/useOutsideClick.ts"],"sourcesContent":["import { useEffect,
|
|
1
|
+
{"version":3,"file":"useOutsideClick.cjs","sources":["../../../src/hooks/useOutsideClick.ts"],"sourcesContent":["import { useEffect, useRef } from 'react'\n\nimport { createLayerStack } from './overlayStack'\n\nconst listenOutsideLayer = createLayerStack('pointerdown', { capture: true })\n\n/** Calls `onOutside` on pointerdown outside `element` while `enabled`; with nested overlays only the newest one handles outside clicks. */\nexport const useOutsideClick = (\n element: HTMLElement | null,\n onOutside: (event: PointerEvent) => void,\n enabled: boolean,\n) => {\n const handlerRef = useRef(onOutside)\n handlerRef.current = onOutside\n\n useEffect(() => {\n if (!enabled || !element) return\n\n return listenOutsideLayer((event) => {\n if (event.target instanceof Node && element.contains(event.target)) return\n handlerRef.current(event)\n })\n }, [element, enabled])\n}\n"],"names":["listenOutsideLayer","createLayerStack","capture","useOutsideClick","element","onOutside","enabled","handlerRef","useRef","current","useEffect","event","target","Node","contains"],"mappings":";;;;;;;AAIA,MAAMA,kBAAkB,GAAGC,6BAAgB,CAAC,aAAa,EAAE;AAAEC,EAAAA,OAAO,EAAE,IAAA;AAAK,CAAC,CAAC,CAAA;;AAE7E;AACO,MAAMC,eAAe,GAAGA,CAC7BC,OAA2B,EAC3BC,SAAwC,EACxCC,OAAgB,KACb;AACH,EAAA,MAAMC,UAAU,GAAGC,YAAM,CAACH,SAAS,CAAC,CAAA;EACpCE,UAAU,CAACE,OAAO,GAAGJ,SAAS,CAAA;AAE9BK,EAAAA,eAAS,CAAC,MAAM;AACd,IAAA,IAAI,CAACJ,OAAO,IAAI,CAACF,OAAO,EAAE,OAAA;IAE1B,OAAOJ,kBAAkB,CAAEW,KAAK,IAAK;AACnC,MAAA,IAAIA,KAAK,CAACC,MAAM,YAAYC,IAAI,IAAIT,OAAO,CAACU,QAAQ,CAACH,KAAK,CAACC,MAAM,CAAC,EAAE,OAAA;AACpEL,MAAAA,UAAU,CAACE,OAAO,CAACE,KAAK,CAAC,CAAA;AAC3B,KAAC,CAAC,CAAA;AACJ,GAAC,EAAE,CAACP,OAAO,EAAEE,OAAO,CAAC,CAAC,CAAA;AACxB;;;;"}
|
|
@@ -2,13 +2,14 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
4
4
|
|
|
5
|
+
const react = require('react');
|
|
5
6
|
const cn = require('classnames');
|
|
6
7
|
const CounterSlot = require('../counter/CounterSlot.cjs');
|
|
7
8
|
const IconButton_module = require('./IconButton.module.css.cjs');
|
|
8
9
|
const jsxRuntime = require('react/jsx-runtime');
|
|
9
10
|
const IconLoaderCircle = require('../icons/components/base/IconLoaderCircle.cjs');
|
|
10
11
|
|
|
11
|
-
const IconButton = _ref => {
|
|
12
|
+
const IconButton = /*#__PURE__*/react.forwardRef((_ref, ref) => {
|
|
12
13
|
let {
|
|
13
14
|
className,
|
|
14
15
|
type = 'button',
|
|
@@ -21,6 +22,7 @@ const IconButton = _ref => {
|
|
|
21
22
|
...rest
|
|
22
23
|
} = _ref;
|
|
23
24
|
return /*#__PURE__*/jsxRuntime.jsxs("button", {
|
|
25
|
+
ref: ref,
|
|
24
26
|
type: type,
|
|
25
27
|
disabled: disabled || loading,
|
|
26
28
|
"aria-busy": loading || undefined,
|
|
@@ -40,7 +42,8 @@ const IconButton = _ref => {
|
|
|
40
42
|
children: counter
|
|
41
43
|
})]
|
|
42
44
|
});
|
|
43
|
-
};
|
|
45
|
+
});
|
|
46
|
+
IconButton.displayName = 'IconButton';
|
|
44
47
|
|
|
45
48
|
exports.IconButton = IconButton;
|
|
46
49
|
//# sourceMappingURL=IconButton.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconButton.cjs","sources":["../../../src/icon-button/IconButton.tsx"],"sourcesContent":["import type
|
|
1
|
+
{"version":3,"file":"IconButton.cjs","sources":["../../../src/icon-button/IconButton.tsx"],"sourcesContent":["import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react'\n\nimport cn from 'classnames'\n\nimport { CounterSlot } from '../counter/CounterSlot'\nimport { IconLoaderCircle } from '../icons'\nimport styles from './IconButton.module.css'\n\nexport type IconButtonVariant = 'outline' | 'ghost' | 'surface'\n\nexport type IconButtonDataTestId = {\n root?: string\n icon?: string\n counter?: string\n}\n\nexport type IconButtonProps = Omit<\n ButtonHTMLAttributes<HTMLButtonElement>,\n 'aria-label'\n> & {\n 'aria-label': string\n icon: ReactNode\n variant?: IconButtonVariant\n loading?: boolean\n /** Corner slot, aria-hidden: put the count into `aria-label`. */\n counter?: ReactNode\n dataTestId?: IconButtonDataTestId\n}\n\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n (\n {\n className,\n type = 'button',\n variant = 'outline',\n loading = false,\n disabled = false,\n icon,\n counter,\n dataTestId,\n ...rest\n },\n ref,\n ) => (\n <button\n ref={ref}\n type={type}\n disabled={disabled || loading}\n aria-busy={loading || undefined}\n className={cn(\n styles.button,\n styles[variant],\n loading && styles.loading,\n className,\n )}\n data-testid={dataTestId?.root}\n {...rest}\n >\n {loading ? (\n <IconLoaderCircle className={styles.spinner} aria-hidden='true' />\n ) : (\n <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 </button>\n ),\n)\n\nIconButton.displayName = 'IconButton'\n"],"names":["IconButton","forwardRef","_ref","ref","className","type","variant","loading","disabled","icon","counter","dataTestId","rest","_jsxs","undefined","cn","styles","button","root","children","_jsx","IconLoaderCircle","spinner","CounterSlot","displayName"],"mappings":";;;;;;;;;;;AA6BO,MAAMA,UAAU,gBAAGC,gBAAU,CAClC,CAAAC,IAAA,EAYEC,GAAG,KAAA;EAAA,IAXH;IACEC,SAAS;AACTC,IAAAA,IAAI,GAAG,QAAQ;AACfC,IAAAA,OAAO,GAAG,SAAS;AACnBC,IAAAA,OAAO,GAAG,KAAK;AACfC,IAAAA,QAAQ,GAAG,KAAK;IAChBC,IAAI;IACJC,OAAO;IACPC,UAAU;IACV,GAAGC,IAAAA;AACL,GAAC,GAAAV,IAAA,CAAA;AAAA,EAAA,oBAGDW,eAAA,CAAA,QAAA,EAAA;AACEV,IAAAA,GAAG,EAAEA,GAAI;AACTE,IAAAA,IAAI,EAAEA,IAAK;IACXG,QAAQ,EAAEA,QAAQ,IAAID,OAAQ;IAC9B,WAAWA,EAAAA,OAAO,IAAIO,SAAU;AAChCV,IAAAA,SAAS,EAAEW,EAAE,CACXC,iBAAM,CAACC,MAAM,EACbD,iBAAM,CAACV,OAAO,CAAC,EACfC,OAAO,IAAIS,iBAAM,CAACT,OAAO,EACzBH,SACF,CAAE;IACF,aAAaO,EAAAA,UAAU,EAAEO,IAAK;AAAA,IAAA,GAC1BN,IAAI;AAAAO,IAAAA,QAAA,EAEPZ,CAAAA,OAAO,gBACNa,cAAA,CAACC,iCAAgB,EAAA;MAACjB,SAAS,EAAEY,iBAAM,CAACM,OAAQ;MAAC,aAAY,EAAA,MAAA;KAAQ,CAAC,gBAElEF,cAAA,CAAA,MAAA,EAAA;MACEhB,SAAS,EAAEY,iBAAM,CAACP,IAAK;AACvB,MAAA,aAAA,EAAY,MAAM;MAClB,aAAaE,EAAAA,UAAU,EAAEF,IAAK;AAAAU,MAAAA,QAAA,EAE7BV,IAAAA;AAAI,KACD,CACP,eACDW,cAAA,CAACG,uBAAW,EAAA;MAACZ,UAAU,EAAEA,UAAU,EAAED,OAAQ;AAAAS,MAAAA,QAAA,EAAET,OAAAA;AAAO,KAAc,CAAC,CAAA;AAAA,GAC/D,CAAC,CAAA;AAAA,CAEb,EAAC;AAEDV,UAAU,CAACwB,WAAW,GAAG,YAAY;;;;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
const styles = {"button":"IconButton-module_button__5QpG9","icon":"IconButton-module_icon__1WMNC","spinner":"IconButton-module_spinner__-fwrf","spin":"IconButton-module_spin__eNilo","outline":"IconButton-module_outline__91r6g","ghost":"IconButton-module_ghost__WYnGy","loading":"IconButton-module_loading__v67XX"};
|
|
3
|
+
const styles = {"button":"IconButton-module_button__5QpG9","icon":"IconButton-module_icon__1WMNC","spinner":"IconButton-module_spinner__-fwrf","spin":"IconButton-module_spin__eNilo","outline":"IconButton-module_outline__91r6g","surface":"IconButton-module_surface__GQ6lQ","ghost":"IconButton-module_ghost__WYnGy","loading":"IconButton-module_loading__v67XX"};
|
|
4
4
|
|
|
5
5
|
module.exports = styles;
|
|
6
6
|
//# sourceMappingURL=IconButton.module.css.cjs.map
|
package/dist/cjs/index.cjs
CHANGED
|
@@ -153,6 +153,7 @@ const iconsMap$4 = require('./icons/components/wallets/iconsMap.cjs');
|
|
|
153
153
|
const Accordion = require('./accordion/Accordion.cjs');
|
|
154
154
|
const Badge = require('./badge/Badge.cjs');
|
|
155
155
|
const Banner = require('./banner/Banner.cjs');
|
|
156
|
+
const Breadcrumbs = require('./breadcrumbs/Breadcrumbs.cjs');
|
|
156
157
|
const Button = require('./button/Button.cjs');
|
|
157
158
|
const Card = require('./card/Card.cjs');
|
|
158
159
|
const Checkbox = require('./checkbox/Checkbox.cjs');
|
|
@@ -160,14 +161,24 @@ const Counter = require('./counter/Counter.cjs');
|
|
|
160
161
|
const DataList = require('./data-list/DataList.cjs');
|
|
161
162
|
const DataListRow = require('./data-list/DataListRow.cjs');
|
|
162
163
|
const Disclaimer = require('./disclaimer/Disclaimer.cjs');
|
|
164
|
+
const Divider = require('./divider/Divider.cjs');
|
|
163
165
|
const ErrorPage = require('./error-page/ErrorPage.cjs');
|
|
164
166
|
const Footer = require('./footer/Footer.cjs');
|
|
167
|
+
const Grid = require('./grid/Grid.cjs');
|
|
168
|
+
const GridItem = require('./grid/GridItem.cjs');
|
|
169
|
+
const Header = require('./header/Header.cjs');
|
|
170
|
+
const HeaderNav = require('./header/HeaderNav.cjs');
|
|
171
|
+
const Hidden = require('./hidden/Hidden.cjs');
|
|
165
172
|
const IconButton = require('./icon-button/IconButton.cjs');
|
|
166
173
|
const Identicon = require('./identicon/Identicon.cjs');
|
|
167
174
|
const Input = require('./input/Input.cjs');
|
|
175
|
+
const LinkProvider = require('./link-provider/LinkProvider.cjs');
|
|
176
|
+
const Logo = require('./logo/Logo.cjs');
|
|
168
177
|
const MessageBox = require('./message-box/MessageBox.cjs');
|
|
169
178
|
const Modal = require('./modal/Modal.cjs');
|
|
179
|
+
const NavLink = require('./nav-link/NavLink.cjs');
|
|
170
180
|
const Notification = require('./notification/Notification.cjs');
|
|
181
|
+
const Popover = require('./popover/Popover.cjs');
|
|
171
182
|
const RadioButton = require('./radio-button/RadioButton.cjs');
|
|
172
183
|
const RichInput = require('./rich-input/RichInput.cjs');
|
|
173
184
|
const SectionTitle = require('./section-title/SectionTitle.cjs');
|
|
@@ -178,12 +189,14 @@ const SegmentCard = require('./segmented-control/SegmentCard.cjs');
|
|
|
178
189
|
const Skeleton = require('./skeleton/Skeleton.cjs');
|
|
179
190
|
const Slider = require('./slider/Slider.cjs');
|
|
180
191
|
const SmallCard = require('./small-card/SmallCard.cjs');
|
|
192
|
+
const Stack = require('./stack/Stack.cjs');
|
|
181
193
|
const StatItem = require('./stat-item/StatItem.cjs');
|
|
182
194
|
const Switch = require('./switch/Switch.cjs');
|
|
183
195
|
const Tabs = require('./tabs/Tabs.cjs');
|
|
184
196
|
const Tab = require('./tabs/Tab.cjs');
|
|
185
197
|
const Tag = require('./tag/Tag.cjs');
|
|
186
198
|
const TextLink = require('./text-link/TextLink.cjs');
|
|
199
|
+
const ThemeSwitcher = require('./theme-switcher/ThemeSwitcher.cjs');
|
|
187
200
|
const TokenAmount = require('./token-amount/TokenAmount.cjs');
|
|
188
201
|
const TokenSelector = require('./token-selector/TokenSelector.cjs');
|
|
189
202
|
const Tooltip = require('./tooltip/Tooltip.cjs');
|
|
@@ -343,6 +356,7 @@ exports.WALLETS_ICONS_MAP = iconsMap$4.WALLETS_ICONS_MAP;
|
|
|
343
356
|
exports.Accordion = Accordion.Accordion;
|
|
344
357
|
exports.Badge = Badge.Badge;
|
|
345
358
|
exports.Banner = Banner.Banner;
|
|
359
|
+
exports.Breadcrumbs = Breadcrumbs.Breadcrumbs;
|
|
346
360
|
exports.Button = Button.Button;
|
|
347
361
|
exports.Card = Card.Card;
|
|
348
362
|
exports.Checkbox = Checkbox.Checkbox;
|
|
@@ -350,14 +364,24 @@ exports.Counter = Counter.Counter;
|
|
|
350
364
|
exports.DataList = DataList.DataList;
|
|
351
365
|
exports.DataListRow = DataListRow.DataListRow;
|
|
352
366
|
exports.Disclaimer = Disclaimer.Disclaimer;
|
|
367
|
+
exports.Divider = Divider.Divider;
|
|
353
368
|
exports.ErrorPage = ErrorPage.ErrorPage;
|
|
354
369
|
exports.Footer = Footer.Footer;
|
|
370
|
+
exports.Grid = Grid.Grid;
|
|
371
|
+
exports.GridItem = GridItem.GridItem;
|
|
372
|
+
exports.Header = Header.Header;
|
|
373
|
+
exports.HeaderNav = HeaderNav.HeaderNav;
|
|
374
|
+
exports.Hidden = Hidden.Hidden;
|
|
355
375
|
exports.IconButton = IconButton.IconButton;
|
|
356
376
|
exports.Identicon = Identicon.Identicon;
|
|
357
377
|
exports.Input = Input.Input;
|
|
378
|
+
exports.LinkProvider = LinkProvider.LinkProvider;
|
|
379
|
+
exports.Logo = Logo.Logo;
|
|
358
380
|
exports.MessageBox = MessageBox.MessageBox;
|
|
359
381
|
exports.Modal = Modal.Modal;
|
|
382
|
+
exports.NavLink = NavLink.NavLink;
|
|
360
383
|
exports.Notification = Notification.Notification;
|
|
384
|
+
exports.Popover = Popover.Popover;
|
|
361
385
|
exports.RadioButton = RadioButton.RadioButton;
|
|
362
386
|
exports.RichInput = RichInput.RichInput;
|
|
363
387
|
exports.SectionTitle = SectionTitle.SectionTitle;
|
|
@@ -368,12 +392,14 @@ exports.SegmentCard = SegmentCard.SegmentCard;
|
|
|
368
392
|
exports.Skeleton = Skeleton.Skeleton;
|
|
369
393
|
exports.Slider = Slider.Slider;
|
|
370
394
|
exports.SmallCard = SmallCard.SmallCard;
|
|
395
|
+
exports.Stack = Stack.Stack;
|
|
371
396
|
exports.StatItem = StatItem.StatItem;
|
|
372
397
|
exports.Switch = Switch.Switch;
|
|
373
398
|
exports.Tabs = Tabs.Tabs;
|
|
374
399
|
exports.Tab = Tab.Tab;
|
|
375
400
|
exports.Tag = Tag.Tag;
|
|
376
401
|
exports.TextLink = TextLink.TextLink;
|
|
402
|
+
exports.ThemeSwitcher = ThemeSwitcher.ThemeSwitcher;
|
|
377
403
|
exports.TokenAmount = TokenAmount.TokenAmount;
|
|
378
404
|
exports.TokenSelector = TokenSelector.TokenSelector;
|
|
379
405
|
exports.Tooltip = Tooltip.Tooltip;
|
package/dist/cjs/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|