@lidofinance/lido-app-ui 1.12.0 → 1.14.0

package/dist/cjs/header/HeaderNav.cjs

@@ -6,23 +6,25 @@ const react = require('react');
 const cn = require('classnames');
 const HeaderNav_module = require('./HeaderNav.module.css.cjs');
 const jsxRuntime = require('react/jsx-runtime');
+const useEdgeFade = require('../hooks/useEdgeFade.cjs');
+const useIsomorphicLayoutEffect = require('../hooks/useIsomorphicLayoutEffect.cjs');
 
-const syncFade = nav => {
-  nav.toggleAttribute('data-fade-start', nav.scrollLeft > 0);
-  nav.toggleAttribute('data-fade-end', nav.scrollLeft < nav.scrollWidth - nav.clientWidth - 1);
-};
-const scrollActiveIntoView = nav => {
-  const active = nav.querySelector("[aria-current='page']");
+const ACTIVE = "[aria-current]:not([aria-current='false'], [aria-current=''])";
+const scrollIntoCenter = (nav, active) => {
   if (!active) return;
   const navRect = nav.getBoundingClientRect();
   const activeRect = active.getBoundingClientRect();
   nav.scrollLeft += activeRect.left - navRect.left - (nav.clientWidth - activeRect.width) / 2;
 };
+
+/** `<nav>` for header links (`aria-label` defaults to `Main`); scrolls with an edge fade when narrow and centers the link with a truthy `aria-current`. */
 const HeaderNav = /*#__PURE__*/react.forwardRef((_ref, ref) => {
   let {
     'aria-label': ariaLabel = 'Main',
     className,
     onScroll,
+    onFocus,
+    dataTestId,
     ...rest
   } = _ref;
   const navRef = react.useRef(null);
@@ -30,36 +32,46 @@ const HeaderNav = /*#__PURE__*/react.forwardRef((_ref, ref) => {
     navRef.current = node;
     if (typeof ref === 'function') ref(node);else if (ref) ref.current = node;
   }, [ref]);
-  react.useEffect(() => {
+  const {
+    sync,
+    onFocus: revealFocused
+  } = useEdgeFade.useEdgeFade(navRef);
+  useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
     const nav = navRef.current;
     if (!nav) return;
-    const sync = () => {
-      scrollActiveIntoView(nav);
-      syncFade(nav);
-    };
+    let active = nav.querySelector(ACTIVE);
+    scrollIntoCenter(nav, active);
     sync();
-    const mutations = typeof MutationObserver === 'undefined' ? null : new MutationObserver(sync);
-    mutations?.observe(nav, {
+    if (typeof MutationObserver === 'undefined') return;
+    const mutations = new MutationObserver(() => {
+      const next = nav.querySelector(ACTIVE);
+      if (next !== active) {
+        active = next;
+        scrollIntoCenter(nav, next);
+      }
+      sync();
+    });
+    mutations.observe(nav, {
       childList: true,
       subtree: true,
       attributes: true,
       attributeFilter: ['aria-current']
     });
-    const resizes = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(() => syncFade(nav));
-    resizes?.observe(nav);
-    return () => {
-      mutations?.disconnect();
-      resizes?.disconnect();
-    };
-  }, []);
+    return () => mutations.disconnect();
+  }, [sync]);
   return /*#__PURE__*/jsxRuntime.jsx("nav", {
     ref: setRef,
     "aria-label": ariaLabel,
     className: cn(HeaderNav_module.nav, className),
     onScroll: e => {
-      syncFade(e.currentTarget);
+      sync();
       onScroll?.(e);
     },
+    onFocus: e => {
+      revealFocused(e);
+      onFocus?.(e);
+    },
+    "data-testid": dataTestId?.root,
     ...rest
   });
 });

package/dist/cjs/header/HeaderNav.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderNav.cjs","sources":["../../../src/header/HeaderNav.tsx"],"sourcesContent":["import { forwardRef, useCallback, useEffect, useRef } from 'react'\nimport type { ComponentPropsWithoutRef } from 'react'\n\nimport cn from 'classnames'\n\nimport styles from './HeaderNav.module.css'\n\nexport type HeaderNavProps = ComponentPropsWithoutRef<'nav'>\n\nconst syncFade = (nav: HTMLElement) => {\n  nav.toggleAttribute('data-fade-start', nav.scrollLeft > 0)\n  nav.toggleAttribute(\n    'data-fade-end',\n    nav.scrollLeft < nav.scrollWidth - nav.clientWidth - 1,\n  )\n}\n\nconst scrollActiveIntoView = (nav: HTMLElement) => {\n  const active = nav.querySelector<HTMLElement>(\"[aria-current='page']\")\n  if (!active) return\n  const navRect = nav.getBoundingClientRect()\n  const activeRect = active.getBoundingClientRect()\n  nav.scrollLeft +=\n    activeRect.left - navRect.left - (nav.clientWidth - activeRect.width) / 2\n}\n\nexport const HeaderNav = forwardRef<HTMLElement, HeaderNavProps>(\n  ({ 'aria-label': ariaLabel = 'Main', className, onScroll, ...rest }, ref) => {\n    const navRef = useRef<HTMLElement | null>(null)\n\n    const setRef = useCallback(\n      (node: HTMLElement | null) => {\n        navRef.current = node\n        if (typeof ref === 'function') ref(node)\n        else if (ref) ref.current = node\n      },\n      [ref],\n    )\n\n    useEffect(() => {\n      const nav = navRef.current\n      if (!nav) return\n      const sync = () => {\n        scrollActiveIntoView(nav)\n        syncFade(nav)\n      }\n      sync()\n      const mutations =\n        typeof MutationObserver === 'undefined'\n          ? null\n          : new MutationObserver(sync)\n      mutations?.observe(nav, {\n        childList: true,\n        subtree: true,\n        attributes: true,\n        attributeFilter: ['aria-current'],\n      })\n      const resizes =\n        typeof ResizeObserver === 'undefined'\n          ? null\n          : new ResizeObserver(() => syncFade(nav))\n      resizes?.observe(nav)\n      return () => {\n        mutations?.disconnect()\n        resizes?.disconnect()\n      }\n    }, [])\n\n    return (\n      <nav\n        ref={setRef}\n        aria-label={ariaLabel}\n        className={cn(styles.nav, className)}\n        onScroll={(e) => {\n          syncFade(e.currentTarget)\n          onScroll?.(e)\n        }}\n        {...rest}\n      />\n    )\n  },\n)\n\nHeaderNav.displayName = 'HeaderNav'\n"],"names":["syncFade","nav","toggleAttribute","scrollLeft","scrollWidth","clientWidth","scrollActiveIntoView","active","querySelector","navRect","getBoundingClientRect","activeRect","left","width","HeaderNav","forwardRef","_ref","ref","ariaLabel","className","onScroll","rest","navRef","useRef","setRef","useCallback","node","current","useEffect","sync","mutations","MutationObserver","observe","childList","subtree","attributes","attributeFilter","resizes","ResizeObserver","disconnect","_jsx","cn","styles","e","currentTarget","displayName"],"mappings":"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"}
+{"version":3,"file":"HeaderNav.cjs","sources":["../../../src/header/HeaderNav.tsx"],"sourcesContent":["import { forwardRef, useCallback, useRef } from 'react'\nimport type { ComponentPropsWithoutRef } from 'react'\n\nimport cn from 'classnames'\n\nimport { useEdgeFade, useIsomorphicLayoutEffect } from '../hooks'\nimport styles from './HeaderNav.module.css'\n\nexport type HeaderNavDataTestId = { root?: string }\n\nexport type HeaderNavProps = ComponentPropsWithoutRef<'nav'> & {\n  dataTestId?: HeaderNavDataTestId\n}\n\nconst ACTIVE = \"[aria-current]:not([aria-current='false'], [aria-current=''])\"\n\nconst scrollIntoCenter = (nav: HTMLElement, active: HTMLElement | null) => {\n  if (!active) return\n  const navRect = nav.getBoundingClientRect()\n  const activeRect = active.getBoundingClientRect()\n  nav.scrollLeft +=\n    activeRect.left - navRect.left - (nav.clientWidth - activeRect.width) / 2\n}\n\n/** `<nav>` for header links (`aria-label` defaults to `Main`); scrolls with an edge fade when narrow and centers the link with a truthy `aria-current`. */\nexport const HeaderNav = forwardRef<HTMLElement, HeaderNavProps>(\n  (\n    {\n      'aria-label': ariaLabel = 'Main',\n      className,\n      onScroll,\n      onFocus,\n      dataTestId,\n      ...rest\n    },\n    ref,\n  ) => {\n    const navRef = useRef<HTMLElement | null>(null)\n\n    const setRef = useCallback(\n      (node: HTMLElement | null) => {\n        navRef.current = node\n        if (typeof ref === 'function') ref(node)\n        else if (ref) ref.current = node\n      },\n      [ref],\n    )\n\n    const { sync, onFocus: revealFocused } = useEdgeFade(navRef)\n\n    useIsomorphicLayoutEffect(() => {\n      const nav = navRef.current\n      if (!nav) return\n      let active = nav.querySelector<HTMLElement>(ACTIVE)\n      scrollIntoCenter(nav, active)\n      sync()\n      if (typeof MutationObserver === 'undefined') return\n      const mutations = new MutationObserver(() => {\n        const next = nav.querySelector<HTMLElement>(ACTIVE)\n        if (next !== active) {\n          active = next\n          scrollIntoCenter(nav, next)\n        }\n        sync()\n      })\n      mutations.observe(nav, {\n        childList: true,\n        subtree: true,\n        attributes: true,\n        attributeFilter: ['aria-current'],\n      })\n      return () => mutations.disconnect()\n    }, [sync])\n\n    return (\n      <nav\n        ref={setRef}\n        aria-label={ariaLabel}\n        className={cn(styles.nav, className)}\n        onScroll={(e) => {\n          sync()\n          onScroll?.(e)\n        }}\n        onFocus={(e) => {\n          revealFocused(e)\n          onFocus?.(e)\n        }}\n        data-testid={dataTestId?.root}\n        {...rest}\n      />\n    )\n  },\n)\n\nHeaderNav.displayName = 'HeaderNav'\n"],"names":["ACTIVE","scrollIntoCenter","nav","active","navRect","getBoundingClientRect","activeRect","scrollLeft","left","clientWidth","width","HeaderNav","forwardRef","_ref","ref","ariaLabel","className","onScroll","onFocus","dataTestId","rest","navRef","useRef","setRef","useCallback","node","current","sync","revealFocused","useEdgeFade","useIsomorphicLayoutEffect","querySelector","MutationObserver","mutations","next","observe","childList","subtree","attributes","attributeFilter","disconnect","_jsx","cn","styles","e","root","displayName"],"mappings":"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"}

package/dist/cjs/header/HeaderNav.module.css.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-const styles = {"nav":"HeaderNav-module_nav__YxWpA"};
+const styles = {"nav":"HeaderNav-module_nav__YxWpA ScrollFade-module_scrollFade__bK-Oi"};
 
 module.exports = styles;
 //# sourceMappingURL=HeaderNav.module.css.cjs.map

package/dist/cjs/hex/Hex.cjs

@@ -0,0 +1,41 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const react = require('react');
+const cn = require('classnames');
+const Hex_module = require('./Hex.module.css.cjs');
+const trimHex = require('./trimHex.cjs');
+const jsxRuntime = require('react/jsx-runtime');
+
+const Hex = /*#__PURE__*/react.forwardRef((_ref, ref) => {
+  let {
+    value,
+    symbols = 4,
+    title,
+    className,
+    ...rest
+  } = _ref;
+  const text = trimHex.trimHex(value, symbols);
+  const trimmed = text !== value;
+  return /*#__PURE__*/jsxRuntime.jsx("span", {
+    ref: ref,
+    title: (title ?? (trimmed ? value : undefined)) || undefined,
+    className: cn(trimmed ? Hex_module.root : Hex_module.full, className),
+    ...rest,
+    children: trimmed ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+        "aria-hidden": "true",
+        className: Hex_module.overlay,
+        children: value
+      }), /*#__PURE__*/jsxRuntime.jsx("span", {
+        className: Hex_module.text,
+        children: text
+      })]
+    }) : text
+  });
+});
+Hex.displayName = 'Hex';
+
+exports.Hex = Hex;
+//# sourceMappingURL=Hex.cjs.map

package/dist/cjs/hex/Hex.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Hex.cjs","sources":["../../../src/hex/Hex.tsx"],"sourcesContent":["import { forwardRef, type ComponentPropsWithoutRef } from 'react'\n\nimport cn from 'classnames'\n\nimport styles from './Hex.module.css'\nimport { trimHex } from './trimHex'\n\n// Title defaults to the full value only when trimmed; an empty title opts out.\nexport type HexProps = Omit<ComponentPropsWithoutRef<'span'>, 'children'> & {\n  value: string\n  symbols?: number\n}\n\nexport const Hex = forwardRef<HTMLSpanElement, HexProps>(\n  ({ value, symbols = 4, title, className, ...rest }, ref) => {\n    const text = trimHex(value, symbols)\n    const trimmed = text !== value\n\n    return (\n      <span\n        ref={ref}\n        title={(title ?? (trimmed ? value : undefined)) || undefined}\n        className={cn(trimmed ? styles.root : styles.full, className)}\n        {...rest}\n      >\n        {trimmed ? (\n          <>\n            <span aria-hidden='true' className={styles.overlay}>\n              {value}\n            </span>\n            <span className={styles.text}>{text}</span>\n          </>\n        ) : (\n          text\n        )}\n      </span>\n    )\n  },\n)\n\nHex.displayName = 'Hex'\n"],"names":["Hex","forwardRef","_ref","ref","value","symbols","title","className","rest","text","trimHex","trimmed","_jsx","undefined","cn","styles","root","full","children","_jsxs","_Fragment","overlay","displayName"],"mappings":";;;;;;;;;;AAaO,MAAMA,GAAG,gBAAGC,gBAAU,CAC3B,CAAAC,IAAA,EAAoDC,GAAG,KAAK;EAAA,IAA3D;IAAEC,KAAK;AAAEC,IAAAA,OAAO,GAAG,CAAC;IAAEC,KAAK;IAAEC,SAAS;IAAE,GAAGC,IAAAA;AAAK,GAAC,GAAAN,IAAA,CAAA;AAChD,EAAA,MAAMO,IAAI,GAAGC,eAAO,CAACN,KAAK,EAAEC,OAAO,CAAC,CAAA;AACpC,EAAA,MAAMM,OAAO,GAAGF,IAAI,KAAKL,KAAK,CAAA;AAE9B,EAAA,oBACEQ,cAAA,CAAA,MAAA,EAAA;AACET,IAAAA,GAAG,EAAEA,GAAI;IACTG,KAAK,EAAE,CAACA,KAAK,KAAKK,OAAO,GAAGP,KAAK,GAAGS,SAAS,CAAC,KAAKA,SAAU;AAC7DN,IAAAA,SAAS,EAAEO,EAAE,CAACH,OAAO,GAAGI,UAAM,CAACC,IAAI,GAAGD,UAAM,CAACE,IAAI,EAAEV,SAAS,CAAE;AAAA,IAAA,GAC1DC,IAAI;AAAAU,IAAAA,QAAA,EAEPP,OAAO,gBACNQ,eAAA,CAAAC,mBAAA,EAAA;AAAAF,MAAAA,QAAA,gBACEN,cAAA,CAAA,MAAA,EAAA;AAAM,QAAA,aAAA,EAAY,MAAM;QAACL,SAAS,EAAEQ,UAAM,CAACM,OAAQ;AAAAH,QAAAA,QAAA,EAChDd,KAAAA;OACG,CAAC,eACPQ,cAAA,CAAA,MAAA,EAAA;QAAML,SAAS,EAAEQ,UAAM,CAACN,IAAK;AAAAS,QAAAA,QAAA,EAAET,IAAAA;AAAI,OAAO,CAAC,CAAA;AAAA,KAC3C,CAAC,GAEHA,IAAAA;AACD,GACG,CAAC,CAAA;AAEX,CACF,EAAC;AAEDT,GAAG,CAACsB,WAAW,GAAG,KAAK;;;;"}

package/dist/cjs/hex/Hex.module.css.cjs

@@ -0,0 +1,6 @@
+'use strict';
+
+const styles = {"root":"Hex-module_root__HswaZ","overlay":"Hex-module_overlay__ut9QP","text":"Hex-module_text__cQirb","full":"Hex-module_full__8Nr7J"};
+
+module.exports = styles;
+//# sourceMappingURL=Hex.module.css.cjs.map

package/dist/cjs/hex/Hex.module.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Hex.module.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/cjs/hex/trimHex.cjs

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const ELLIPSIS = '...';
+const trimHex = (value, symbols) => {
+  if (symbols <= 0) return value;
+  const prefix = value.startsWith('0x') ? '0x' : '';
+  const body = value.slice(prefix.length);
+  if (body.length - symbols * 2 <= ELLIPSIS.length) return value;
+  return `${prefix}${body.slice(0, symbols)}${ELLIPSIS}${body.slice(-symbols)}`;
+};
+
+exports.trimHex = trimHex;
+//# sourceMappingURL=trimHex.cjs.map

package/dist/cjs/hex/trimHex.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"trimHex.cjs","sources":["../../../src/hex/trimHex.ts"],"sourcesContent":["const ELLIPSIS = '...'\n\nexport const trimHex = (value: string, symbols: number): string => {\n  if (symbols <= 0) return value\n\n  const prefix = value.startsWith('0x') ? '0x' : ''\n  const body = value.slice(prefix.length)\n  if (body.length - symbols * 2 <= ELLIPSIS.length) return value\n\n  return `${prefix}${body.slice(0, symbols)}${ELLIPSIS}${body.slice(-symbols)}`\n}\n"],"names":["ELLIPSIS","trimHex","value","symbols","prefix","startsWith","body","slice","length"],"mappings":";;;;AAAA,MAAMA,QAAQ,GAAG,KAAK,CAAA;MAETC,OAAO,GAAGA,CAACC,KAAa,EAAEC,OAAe,KAAa;AACjE,EAAA,IAAIA,OAAO,IAAI,CAAC,EAAE,OAAOD,KAAK,CAAA;EAE9B,MAAME,MAAM,GAAGF,KAAK,CAACG,UAAU,CAAC,IAAI,CAAC,GAAG,IAAI,GAAG,EAAE,CAAA;EACjD,MAAMC,IAAI,GAAGJ,KAAK,CAACK,KAAK,CAACH,MAAM,CAACI,MAAM,CAAC,CAAA;AACvC,EAAA,IAAIF,IAAI,CAACE,MAAM,GAAGL,OAAO,GAAG,CAAC,IAAIH,QAAQ,CAACQ,MAAM,EAAE,OAAON,KAAK,CAAA;EAE9D,OAAO,CAAA,EAAGE,MAAM,CAAGE,EAAAA,IAAI,CAACC,KAAK,CAAC,CAAC,EAAEJ,OAAO,CAAC,CAAGH,EAAAA,QAAQ,GAAGM,IAAI,CAACC,KAAK,CAAC,CAACJ,OAAO,CAAC,CAAE,CAAA,CAAA;AAC/E;;;;"}

package/dist/cjs/hidden/Hidden.cjs

@@ -2,24 +2,30 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
+const react = require('react');
 const cn = require('classnames');
 const Hidden_module = require('./Hidden.module.css.cjs');
 const jsxRuntime = require('react/jsx-runtime');
 const responsive = require('../utils/responsive.cjs');
 
-/** CSS-only responsive visibility, safe for SSR. Wrapper is `display: contents` while visible. */
-const Hidden = _ref => {
+/** CSS-only responsive visibility, safe for SSR. Wrapper is `display: contents` while visible. Inside a `<p>` (Typography `body`, `description`...) children must be phrasing content too: a block child closes the paragraph in server HTML and breaks hydration. */
+const Hidden = /*#__PURE__*/react.forwardRef((_ref, ref) => {
   let {
+    as: Tag = 'span',
     below,
     above,
     className,
+    dataTestId,
     ...rest
   } = _ref;
-  return /*#__PURE__*/jsxRuntime.jsx("div", {
+  return /*#__PURE__*/jsxRuntime.jsx(Tag, {
+    ref: ref,
     className: cn(Hidden_module.root, below && Hidden_module[`below${responsive.capitalize(below)}`], above && Hidden_module[`above${responsive.capitalize(above)}`], className),
+    "data-testid": dataTestId?.root,
     ...rest
   });
-};
+});
+Hidden.displayName = 'Hidden';
 
 exports.Hidden = Hidden;
 //# sourceMappingURL=Hidden.cjs.map

package/dist/cjs/hidden/Hidden.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Hidden.cjs","sources":["../../../src/hidden/Hidden.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react'\n\nimport cn from 'classnames'\n\nimport { capitalize, type Breakpoint } from '../utils'\nimport styles from './Hidden.module.css'\n\nexport type HiddenProps = HTMLAttributes<HTMLDivElement> & {\n  /** Hides at this breakpoint's width and below. */\n  below?: Breakpoint\n  /** Hides at widths above this breakpoint. */\n  above?: Breakpoint\n}\n\n/** CSS-only responsive visibility, safe for SSR. Wrapper is `display: contents` while visible. */\nexport const Hidden = ({ below, above, className, ...rest }: HiddenProps) => (\n  <div\n    className={cn(\n      styles.root,\n      below && styles[`below${capitalize(below)}`],\n      above && styles[`above${capitalize(above)}`],\n      className,\n    )}\n    {...rest}\n  />\n)\n"],"names":["Hidden","_ref","below","above","className","rest","_jsx","cn","styles","root","capitalize"],"mappings":";;;;;;;;;AAcA;AACO,MAAMA,MAAM,GAAGC,IAAA,IAAA;EAAA,IAAC;IAAEC,KAAK;IAAEC,KAAK;IAAEC,SAAS;IAAE,GAAGC,IAAAA;AAAkB,GAAC,GAAAJ,IAAA,CAAA;AAAA,EAAA,oBACtEK,cAAA,CAAA,KAAA,EAAA;AACEF,IAAAA,SAAS,EAAEG,EAAE,CACXC,aAAM,CAACC,IAAI,EACXP,KAAK,IAAIM,aAAM,CAAC,CAAQE,KAAAA,EAAAA,qBAAU,CAACR,KAAK,CAAC,CAAE,CAAA,CAAC,EAC5CC,KAAK,IAAIK,aAAM,CAAC,CAAQE,KAAAA,EAAAA,qBAAU,CAACP,KAAK,CAAC,CAAA,CAAE,CAAC,EAC5CC,SACF,CAAE;IAAA,GACEC,IAAAA;AAAI,GACT,CAAC,CAAA;AAAA;;;;"}
+{"version":3,"file":"Hidden.cjs","sources":["../../../src/hidden/Hidden.tsx"],"sourcesContent":["import { forwardRef, type ElementType, type HTMLAttributes } from 'react'\n\nimport cn from 'classnames'\n\nimport { capitalize, type Breakpoint } from '../utils'\nimport styles from './Hidden.module.css'\n\nexport type HiddenDataTestId = { root?: string }\n\nexport type HiddenProps = HTMLAttributes<HTMLElement> & {\n  /** Hides below this breakpoint's width. */\n  below?: Breakpoint\n  /** Hides at this breakpoint's width and above. */\n  above?: Breakpoint\n  /** Wrapper tag; `span` is valid inside text, use `div` around block content. */\n  as?: 'span' | 'div'\n  dataTestId?: HiddenDataTestId\n}\n\n/** CSS-only responsive visibility, safe for SSR. Wrapper is `display: contents` while visible. Inside a `<p>` (Typography `body`, `description`...) children must be phrasing content too: a block child closes the paragraph in server HTML and breaks hydration. */\nexport const Hidden = forwardRef<HTMLElement, HiddenProps>(\n  (\n    {\n      as: Tag = 'span' as ElementType,\n      below,\n      above,\n      className,\n      dataTestId,\n      ...rest\n    },\n    ref,\n  ) => (\n    <Tag\n      ref={ref}\n      className={cn(\n        styles.root,\n        below && styles[`below${capitalize(below)}`],\n        above && styles[`above${capitalize(above)}`],\n        className,\n      )}\n      data-testid={dataTestId?.root}\n      {...rest}\n    />\n  ),\n)\n\nHidden.displayName = 'Hidden'\n"],"names":["Hidden","forwardRef","_ref","ref","as","Tag","below","above","className","dataTestId","rest","_jsx","cn","styles","root","capitalize","displayName"],"mappings":";;;;;;;;;;AAmBA;AACO,MAAMA,MAAM,gBAAGC,gBAAU,CAC9B,CAAAC,IAAA,EASEC,GAAG,KAAA;EAAA,IARH;IACEC,EAAE,EAAEC,GAAG,GAAG,MAAqB;IAC/BC,KAAK;IACLC,KAAK;IACLC,SAAS;IACTC,UAAU;IACV,GAAGC,IAAAA;AACL,GAAC,GAAAR,IAAA,CAAA;EAAA,oBAGDS,cAAA,CAACN,GAAG,EAAA;AACFF,IAAAA,GAAG,EAAEA,GAAI;AACTK,IAAAA,SAAS,EAAEI,EAAE,CACXC,aAAM,CAACC,IAAI,EACXR,KAAK,IAAIO,aAAM,CAAC,CAAQE,KAAAA,EAAAA,qBAAU,CAACT,KAAK,CAAC,CAAE,CAAA,CAAC,EAC5CC,KAAK,IAAIM,aAAM,CAAC,CAAQE,KAAAA,EAAAA,qBAAU,CAACR,KAAK,CAAC,CAAA,CAAE,CAAC,EAC5CC,SACF,CAAE;IACF,aAAaC,EAAAA,UAAU,EAAEK,IAAK;IAAA,GAC1BJ,IAAAA;AAAI,GACT,CAAC,CAAA;AAAA,CAEN,EAAC;AAEDV,MAAM,CAACgB,WAAW,GAAG,QAAQ;;;;"}

package/dist/cjs/hooks/Portal.cjs

@@ -8,10 +8,7 @@ const jsxRuntime = require('react/jsx-runtime');
 
 const THEME_ATTR = 'data-lido-theme';
 
-/**
- * Renders `null` until mounted so SSR and first client render match.
- * Without `container`, mirrors the nearest `data-lido-theme` scope onto the portal root so tokens still resolve.
- */
+/** SSR-safe portal into `container` or `document.body`; without `container` a marker span (dropped once resolved) finds the nearest `data-lido-theme` scope to mirror onto the portal root. */
 const Portal = _ref => {
   let {
     children,
@@ -19,12 +16,19 @@ const Portal = _ref => {
   } = _ref;
   const markerRef = react.useRef(null);
   const [target, setTarget] = react.useState(null);
+  const [tick, retry] = react.useReducer(n => n + 1, 0);
   react.useEffect(() => {
     if (container) {
       setTarget(container);
       return;
     }
-    const scope = markerRef.current?.closest(`[${THEME_ATTR}]`);
+    // Marker is gone after a container -> undefined switch; clear target so it re-renders, then retry.
+    if (!markerRef.current) {
+      setTarget(null);
+      retry();
+      return;
+    }
+    const scope = markerRef.current.closest(`[${THEME_ATTR}]`);
     if (!scope || scope === document.documentElement) {
       setTarget(document.body);
       return;
@@ -44,12 +48,11 @@ const Portal = _ref => {
       observer.disconnect();
       root.remove();
     };
-  }, [container]);
-  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/jsxRuntime.jsx("span", {
-      ref: markerRef,
-      hidden: true
-    }), target ? /*#__PURE__*/reactDom.createPortal(children, target) : null]
+  }, [container, tick]);
+  if (target) return /*#__PURE__*/reactDom.createPortal(children, target);
+  return container ? null : /*#__PURE__*/jsxRuntime.jsx("span", {
+    ref: markerRef,
+    hidden: true
   });
 };
 

package/dist/cjs/hooks/Portal.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Portal.cjs","sources":["../../../src/hooks/Portal.tsx"],"sourcesContent":["import { useEffect, useRef, useState, type ReactNode } from 'react'\nimport { createPortal } from 'react-dom'\n\nexport type PortalProps = {\n  children?: ReactNode\n  /** Defaults to `document.body`. */\n  container?: Element | null\n}\n\nconst THEME_ATTR = 'data-lido-theme'\n\n/**\n * Renders `null` until mounted so SSR and first client render match.\n * Without `container`, mirrors the nearest `data-lido-theme` scope onto the portal root so tokens still resolve.\n */\nexport const Portal = ({ children, container }: PortalProps) => {\n  const markerRef = useRef<HTMLSpanElement>(null)\n  const [target, setTarget] = useState<Element | null>(null)\n\n  useEffect(() => {\n    if (container) {\n      setTarget(container)\n      return\n    }\n    const scope = markerRef.current?.closest(`[${THEME_ATTR}]`)\n    if (!scope || scope === document.documentElement) {\n      setTarget(document.body)\n      return\n    }\n\n    const root = document.createElement('div')\n    root.style.display = 'contents'\n    const sync = () =>\n      root.setAttribute(THEME_ATTR, scope.getAttribute(THEME_ATTR) ?? '')\n    sync()\n    document.body.appendChild(root)\n    const observer = new MutationObserver(sync)\n    observer.observe(scope, { attributes: true, attributeFilter: [THEME_ATTR] })\n    setTarget(root)\n    return () => {\n      observer.disconnect()\n      root.remove()\n    }\n  }, [container])\n\n  return (\n    <>\n      <span ref={markerRef} hidden />\n      {target ? createPortal(children, target) : null}\n    </>\n  )\n}\n"],"names":["THEME_ATTR","Portal","_ref","children","container","markerRef","useRef","target","setTarget","useState","useEffect","scope","current","closest","document","documentElement","body","root","createElement","style","display","sync","setAttribute","getAttribute","appendChild","observer","MutationObserver","observe","attributes","attributeFilter","disconnect","remove","_jsxs","_Fragment","_jsx","ref","hidden","createPortal"],"mappings":";;;;;;;;AASA,MAAMA,UAAU,GAAG,iBAAiB,CAAA;;AAEpC;AACA;AACA;AACA;AACaC,MAAAA,MAAM,GAAGC,IAAA,IAA0C;EAAA,IAAzC;IAAEC,QAAQ;AAAEC,IAAAA,SAAAA;AAAuB,GAAC,GAAAF,IAAA,CAAA;AACzD,EAAA,MAAMG,SAAS,GAAGC,YAAM,CAAkB,IAAI,CAAC,CAAA;EAC/C,MAAM,CAACC,MAAM,EAAEC,SAAS,CAAC,GAAGC,cAAQ,CAAiB,IAAI,CAAC,CAAA;AAE1DC,EAAAA,eAAS,CAAC,MAAM;AACd,IAAA,IAAIN,SAAS,EAAE;MACbI,SAAS,CAACJ,SAAS,CAAC,CAAA;AACpB,MAAA,OAAA;AACF,KAAA;IACA,MAAMO,KAAK,GAAGN,SAAS,CAACO,OAAO,EAAEC,OAAO,CAAC,CAAA,CAAA,EAAIb,UAAU,CAAA,CAAA,CAAG,CAAC,CAAA;IAC3D,IAAI,CAACW,KAAK,IAAIA,KAAK,KAAKG,QAAQ,CAACC,eAAe,EAAE;AAChDP,MAAAA,SAAS,CAACM,QAAQ,CAACE,IAAI,CAAC,CAAA;AACxB,MAAA,OAAA;AACF,KAAA;AAEA,IAAA,MAAMC,IAAI,GAAGH,QAAQ,CAACI,aAAa,CAAC,KAAK,CAAC,CAAA;AAC1CD,IAAAA,IAAI,CAACE,KAAK,CAACC,OAAO,GAAG,UAAU,CAAA;AAC/B,IAAA,MAAMC,IAAI,GAAGA,MACXJ,IAAI,CAACK,YAAY,CAACtB,UAAU,EAAEW,KAAK,CAACY,YAAY,CAACvB,UAAU,CAAC,IAAI,EAAE,CAAC,CAAA;AACrEqB,IAAAA,IAAI,EAAE,CAAA;AACNP,IAAAA,QAAQ,CAACE,IAAI,CAACQ,WAAW,CAACP,IAAI,CAAC,CAAA;AAC/B,IAAA,MAAMQ,QAAQ,GAAG,IAAIC,gBAAgB,CAACL,IAAI,CAAC,CAAA;AAC3CI,IAAAA,QAAQ,CAACE,OAAO,CAAChB,KAAK,EAAE;AAAEiB,MAAAA,UAAU,EAAE,IAAI;MAAEC,eAAe,EAAE,CAAC7B,UAAU,CAAA;AAAE,KAAC,CAAC,CAAA;IAC5EQ,SAAS,CAACS,IAAI,CAAC,CAAA;AACf,IAAA,OAAO,MAAM;MACXQ,QAAQ,CAACK,UAAU,EAAE,CAAA;MACrBb,IAAI,CAACc,MAAM,EAAE,CAAA;KACd,CAAA;AACH,GAAC,EAAE,CAAC3B,SAAS,CAAC,CAAC,CAAA;EAEf,oBACE4B,eAAA,CAAAC,mBAAA,EAAA;AAAA9B,IAAAA,QAAA,gBACE+B,cAAA,CAAA,MAAA,EAAA;AAAMC,MAAAA,GAAG,EAAE9B,SAAU;MAAC+B,MAAM,EAAA,IAAA;KAAE,CAAC,EAC9B7B,MAAM,gBAAG8B,qBAAY,CAAClC,QAAQ,EAAEI,MAAM,CAAC,GAAG,IAAI,CAAA;AAAA,GAC/C,CAAC,CAAA;AAEP;;;;"}
+{"version":3,"file":"Portal.cjs","sources":["../../../src/hooks/Portal.tsx"],"sourcesContent":["import { useEffect, useReducer, useRef, useState, type ReactNode } from 'react'\nimport { createPortal } from 'react-dom'\n\nexport type PortalProps = {\n  children?: ReactNode\n  /** Defaults to `document.body`. */\n  container?: Element | null\n}\n\nconst THEME_ATTR = 'data-lido-theme'\n\n/** SSR-safe portal into `container` or `document.body`; without `container` a marker span (dropped once resolved) finds the nearest `data-lido-theme` scope to mirror onto the portal root. */\nexport const Portal = ({ children, container }: PortalProps) => {\n  const markerRef = useRef<HTMLSpanElement>(null)\n  const [target, setTarget] = useState<Element | null>(null)\n  const [tick, retry] = useReducer((n: number) => n + 1, 0)\n\n  useEffect(() => {\n    if (container) {\n      setTarget(container)\n      return\n    }\n    // Marker is gone after a container -> undefined switch; clear target so it re-renders, then retry.\n    if (!markerRef.current) {\n      setTarget(null)\n      retry()\n      return\n    }\n    const scope = markerRef.current.closest(`[${THEME_ATTR}]`)\n    if (!scope || scope === document.documentElement) {\n      setTarget(document.body)\n      return\n    }\n\n    const root = document.createElement('div')\n    root.style.display = 'contents'\n    const sync = () =>\n      root.setAttribute(THEME_ATTR, scope.getAttribute(THEME_ATTR) ?? '')\n    sync()\n    document.body.appendChild(root)\n    const observer = new MutationObserver(sync)\n    observer.observe(scope, { attributes: true, attributeFilter: [THEME_ATTR] })\n    setTarget(root)\n    return () => {\n      observer.disconnect()\n      root.remove()\n    }\n  }, [container, tick])\n\n  if (target) return createPortal(children, target)\n  return container ? null : <span ref={markerRef} hidden />\n}\n"],"names":["THEME_ATTR","Portal","_ref","children","container","markerRef","useRef","target","setTarget","useState","tick","retry","useReducer","n","useEffect","current","scope","closest","document","documentElement","body","root","createElement","style","display","sync","setAttribute","getAttribute","appendChild","observer","MutationObserver","observe","attributes","attributeFilter","disconnect","remove","createPortal","_jsx","ref","hidden"],"mappings":";;;;;;;;AASA,MAAMA,UAAU,GAAG,iBAAiB,CAAA;;AAEpC;AACaC,MAAAA,MAAM,GAAGC,IAAA,IAA0C;EAAA,IAAzC;IAAEC,QAAQ;AAAEC,IAAAA,SAAAA;AAAuB,GAAC,GAAAF,IAAA,CAAA;AACzD,EAAA,MAAMG,SAAS,GAAGC,YAAM,CAAkB,IAAI,CAAC,CAAA;EAC/C,MAAM,CAACC,MAAM,EAAEC,SAAS,CAAC,GAAGC,cAAQ,CAAiB,IAAI,CAAC,CAAA;AAC1D,EAAA,MAAM,CAACC,IAAI,EAAEC,KAAK,CAAC,GAAGC,gBAAU,CAAEC,CAAS,IAAKA,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAA;AAEzDC,EAAAA,eAAS,CAAC,MAAM;AACd,IAAA,IAAIV,SAAS,EAAE;MACbI,SAAS,CAACJ,SAAS,CAAC,CAAA;AACpB,MAAA,OAAA;AACF,KAAA;AACA;AACA,IAAA,IAAI,CAACC,SAAS,CAACU,OAAO,EAAE;MACtBP,SAAS,CAAC,IAAI,CAAC,CAAA;AACfG,MAAAA,KAAK,EAAE,CAAA;AACP,MAAA,OAAA;AACF,KAAA;IACA,MAAMK,KAAK,GAAGX,SAAS,CAACU,OAAO,CAACE,OAAO,CAAC,CAAA,CAAA,EAAIjB,UAAU,CAAA,CAAA,CAAG,CAAC,CAAA;IAC1D,IAAI,CAACgB,KAAK,IAAIA,KAAK,KAAKE,QAAQ,CAACC,eAAe,EAAE;AAChDX,MAAAA,SAAS,CAACU,QAAQ,CAACE,IAAI,CAAC,CAAA;AACxB,MAAA,OAAA;AACF,KAAA;AAEA,IAAA,MAAMC,IAAI,GAAGH,QAAQ,CAACI,aAAa,CAAC,KAAK,CAAC,CAAA;AAC1CD,IAAAA,IAAI,CAACE,KAAK,CAACC,OAAO,GAAG,UAAU,CAAA;AAC/B,IAAA,MAAMC,IAAI,GAAGA,MACXJ,IAAI,CAACK,YAAY,CAAC1B,UAAU,EAAEgB,KAAK,CAACW,YAAY,CAAC3B,UAAU,CAAC,IAAI,EAAE,CAAC,CAAA;AACrEyB,IAAAA,IAAI,EAAE,CAAA;AACNP,IAAAA,QAAQ,CAACE,IAAI,CAACQ,WAAW,CAACP,IAAI,CAAC,CAAA;AAC/B,IAAA,MAAMQ,QAAQ,GAAG,IAAIC,gBAAgB,CAACL,IAAI,CAAC,CAAA;AAC3CI,IAAAA,QAAQ,CAACE,OAAO,CAACf,KAAK,EAAE;AAAEgB,MAAAA,UAAU,EAAE,IAAI;MAAEC,eAAe,EAAE,CAACjC,UAAU,CAAA;AAAE,KAAC,CAAC,CAAA;IAC5EQ,SAAS,CAACa,IAAI,CAAC,CAAA;AACf,IAAA,OAAO,MAAM;MACXQ,QAAQ,CAACK,UAAU,EAAE,CAAA;MACrBb,IAAI,CAACc,MAAM,EAAE,CAAA;KACd,CAAA;AACH,GAAC,EAAE,CAAC/B,SAAS,EAAEM,IAAI,CAAC,CAAC,CAAA;EAErB,IAAIH,MAAM,EAAE,oBAAO6B,qBAAY,CAACjC,QAAQ,EAAEI,MAAM,CAAC,CAAA;AACjD,EAAA,OAAOH,SAAS,GAAG,IAAI,gBAAGiC,cAAA,CAAA,MAAA,EAAA;AAAMC,IAAAA,GAAG,EAAEjC,SAAU;IAACkC,MAAM,EAAA,IAAA;AAAA,GAAE,CAAC,CAAA;AAC3D;;;;"}

package/dist/cjs/hooks/useBodyScrollLock.cjs

@@ -4,46 +4,82 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const react = require('react');
 
+const SCROLLBAR_VAR = '--lido-app-ui-scrollbar-width';
+
 // Ref-counted so stacked overlays only restore on the last unlock.
 let lockCount = 0;
+const AXES = ['overflow-x', 'overflow-y'];
 let saved = {
-  overflow: '',
+  scroller: null,
+  axes: [],
   paddingRight: ''
 };
 const lock = () => {
   if (lockCount === 0) {
     const {
       body,
-      documentElement
+      documentElement: html
     } = document;
+    // Locking <html> when body is the scroller would detach body's overflow propagation and break sticky headers.
+    const scroller = ['auto', 'scroll'].includes(getComputedStyle(html).overflowY) ? html : body;
     saved = {
-      overflow: body.style.overflow,
+      scroller,
+      axes: AXES.map(name => ({
+        name,
+        value: scroller.style.getPropertyValue(name),
+        priority: scroller.style.getPropertyPriority(name)
+      })),
       paddingRight: body.style.paddingRight
     };
-    const scrollbarWidth = window.innerWidth - documentElement.clientWidth;
-    if (scrollbarWidth > 0) {
+    const before = body.getBoundingClientRect().width;
+    // body's rect updates synchronously after the lock, html.clientWidth doesn't.
+    scroller.style.overflow = 'hidden';
+    const gained = body.getBoundingClientRect().width - before;
+    if (gained > 0) {
       const current = parseFloat(getComputedStyle(body).paddingRight) || 0;
-      body.style.paddingRight = `${current + scrollbarWidth}px`;
+      body.style.paddingRight = `${current + gained}px`;
+      html.style.setProperty(SCROLLBAR_VAR, `${gained}px`);
     }
-    body.style.overflow = 'hidden';
   }
   lockCount += 1;
 };
 const unlock = () => {
   lockCount -= 1;
   if (lockCount === 0) {
-    document.body.style.overflow = saved.overflow;
-    document.body.style.paddingRight = saved.paddingRight;
+    const {
+      body,
+      documentElement: html
+    } = document;
+    const {
+      scroller,
+      axes
+    } = saved;
+    if (scroller) {
+      scroller.style.removeProperty('overflow');
+      axes.forEach(_ref => {
+        let {
+          name,
+          value,
+          priority
+        } = _ref;
+        if (value) scroller.style.setProperty(name, value, priority);else scroller.style.removeProperty(name);
+      });
+    }
+    body.style.paddingRight = saved.paddingRight;
+    html.style.removeProperty(SCROLLBAR_VAR);
   }
 };
 
-/** Locks body scroll while `active`, compensating the scrollbar width. */
-const useBodyScrollLock = active => {
+/** Locks page scroll while `enabled`, compensating the scrollbar width and exposing it as `--lido-app-ui-scrollbar-width`. */
+const useBodyScrollLock = function () {
+  let {
+    enabled = true
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   react.useEffect(() => {
-    if (!active) return;
+    if (!enabled) return;
     lock();
     return unlock;
-  }, [active]);
+  }, [enabled]);
 };
 
 exports.useBodyScrollLock = useBodyScrollLock;

package/dist/cjs/hooks/useBodyScrollLock.cjs.map

@@ -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;;;;"}
+{"version":3,"file":"useBodyScrollLock.cjs","sources":["../../../src/hooks/useBodyScrollLock.ts"],"sourcesContent":["import { useEffect } from 'react'\n\nconst SCROLLBAR_VAR = '--lido-app-ui-scrollbar-width'\n\n// Ref-counted so stacked overlays only restore on the last unlock.\nlet lockCount = 0\nconst AXES = ['overflow-x', 'overflow-y'] as const\n\ntype SavedAxis = { name: string; value: string; priority: string }\n\nlet saved = {\n  scroller: null as HTMLElement | null,\n  axes: [] as SavedAxis[],\n  paddingRight: '',\n}\n\nconst lock = () => {\n  if (lockCount === 0) {\n    const { body, documentElement: html } = document\n    // Locking <html> when body is the scroller would detach body's overflow propagation and break sticky headers.\n    const scroller = ['auto', 'scroll'].includes(\n      getComputedStyle(html).overflowY,\n    )\n      ? html\n      : body\n    saved = {\n      scroller,\n      axes: AXES.map((name) => ({\n        name,\n        value: scroller.style.getPropertyValue(name),\n        priority: scroller.style.getPropertyPriority(name),\n      })),\n      paddingRight: body.style.paddingRight,\n    }\n    const before = body.getBoundingClientRect().width\n    // body's rect updates synchronously after the lock, html.clientWidth doesn't.\n    scroller.style.overflow = 'hidden'\n    const gained = body.getBoundingClientRect().width - before\n    if (gained > 0) {\n      const current = parseFloat(getComputedStyle(body).paddingRight) || 0\n      body.style.paddingRight = `${current + gained}px`\n      html.style.setProperty(SCROLLBAR_VAR, `${gained}px`)\n    }\n  }\n  lockCount += 1\n}\n\nconst unlock = () => {\n  lockCount -= 1\n  if (lockCount === 0) {\n    const { body, documentElement: html } = document\n    const { scroller, axes } = saved\n    if (scroller) {\n      scroller.style.removeProperty('overflow')\n      axes.forEach(({ name, value, priority }) => {\n        if (value) scroller.style.setProperty(name, value, priority)\n        else scroller.style.removeProperty(name)\n      })\n    }\n    body.style.paddingRight = saved.paddingRight\n    html.style.removeProperty(SCROLLBAR_VAR)\n  }\n}\n\n/** Locks page scroll while `enabled`, compensating the scrollbar width and exposing it as `--lido-app-ui-scrollbar-width`. */\nexport const useBodyScrollLock = ({\n  enabled = true,\n}: { enabled?: boolean } = {}) => {\n  useEffect(() => {\n    if (!enabled) return\n    lock()\n    return unlock\n  }, [enabled])\n}\n"],"names":["SCROLLBAR_VAR","lockCount","AXES","saved","scroller","axes","paddingRight","lock","body","documentElement","html","document","includes","getComputedStyle","overflowY","map","name","value","style","getPropertyValue","priority","getPropertyPriority","before","getBoundingClientRect","width","overflow","gained","current","parseFloat","setProperty","unlock","removeProperty","forEach","_ref","useBodyScrollLock","enabled","arguments","length","undefined","useEffect"],"mappings":"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"}

package/dist/cjs/hooks/useEdgeFade.cjs

@@ -0,0 +1,60 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const react = require('react');
+const useIsomorphicLayoutEffect = require('./useIsomorphicLayoutEffect.cjs');
+
+const syncFade = el => {
+  el.toggleAttribute('data-fade-start', el.scrollLeft > 0);
+  el.toggleAttribute('data-fade-end', el.scrollLeft < el.scrollWidth - el.clientWidth - 1);
+};
+
+/** Keeps `data-fade-*` in sync, maps vertical wheel to horizontal scroll, reveals keyboard-focused items. */
+const useEdgeFade = ref => {
+  const sync = react.useCallback(() => {
+    if (ref.current) syncFade(ref.current);
+  }, [ref]);
+  useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    syncFade(el);
+    if (typeof ResizeObserver === 'undefined') return;
+    const observer = new ResizeObserver(() => syncFade(el));
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [ref]);
+  react.useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const onWheel = e => {
+      if (e.ctrlKey || e.metaKey) return;
+      if (Math.abs(e.deltaY) <= Math.abs(e.deltaX)) return;
+      if (el.scrollWidth <= el.clientWidth) return;
+      const before = el.scrollLeft;
+      el.scrollLeft += e.deltaMode === 1 ? e.deltaY * 16 : e.deltaY;
+      if (el.scrollLeft !== before) e.preventDefault();
+    };
+    el.addEventListener('wheel', onWheel, {
+      passive: false
+    });
+    return () => el.removeEventListener('wheel', onWheel);
+  }, [ref]);
+
+  // keyboard only: scrolling on mouse focus would retarget the click away from the link
+  const onFocus = react.useCallback(e => {
+    const target = e.target;
+    if (target === e.currentTarget || !target.matches(':focus-visible')) return;
+    target.scrollIntoView?.({
+      block: 'nearest',
+      inline: 'nearest'
+    });
+  }, []);
+  return {
+    sync,
+    onFocus
+  };
+};
+
+exports.useEdgeFade = useEdgeFade;
+//# sourceMappingURL=useEdgeFade.cjs.map

package/dist/cjs/hooks/useEdgeFade.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEdgeFade.cjs","sources":["../../../src/hooks/useEdgeFade.ts"],"sourcesContent":["import { useCallback, useEffect } from 'react'\nimport type { FocusEvent, RefObject } from 'react'\n\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'\n\nconst syncFade = (el: HTMLElement) => {\n  el.toggleAttribute('data-fade-start', el.scrollLeft > 0)\n  el.toggleAttribute(\n    'data-fade-end',\n    el.scrollLeft < el.scrollWidth - el.clientWidth - 1,\n  )\n}\n\n/** Keeps `data-fade-*` in sync, maps vertical wheel to horizontal scroll, reveals keyboard-focused items. */\nexport const useEdgeFade = (ref: RefObject<HTMLElement>) => {\n  const sync = useCallback(() => {\n    if (ref.current) syncFade(ref.current)\n  }, [ref])\n\n  useIsomorphicLayoutEffect(() => {\n    const el = ref.current\n    if (!el) return\n    syncFade(el)\n    if (typeof ResizeObserver === 'undefined') return\n    const observer = new ResizeObserver(() => syncFade(el))\n    observer.observe(el)\n    return () => observer.disconnect()\n  }, [ref])\n\n  useEffect(() => {\n    const el = ref.current\n    if (!el) return\n    const onWheel = (e: WheelEvent) => {\n      if (e.ctrlKey || e.metaKey) return\n      if (Math.abs(e.deltaY) <= Math.abs(e.deltaX)) return\n      if (el.scrollWidth <= el.clientWidth) return\n      const before = el.scrollLeft\n      el.scrollLeft += e.deltaMode === 1 ? e.deltaY * 16 : e.deltaY\n      if (el.scrollLeft !== before) e.preventDefault()\n    }\n    el.addEventListener('wheel', onWheel, { passive: false })\n    return () => el.removeEventListener('wheel', onWheel)\n  }, [ref])\n\n  // keyboard only: scrolling on mouse focus would retarget the click away from the link\n  const onFocus = useCallback((e: FocusEvent<HTMLElement>) => {\n    const target = e.target as HTMLElement\n    if (target === e.currentTarget || !target.matches(':focus-visible')) return\n    target.scrollIntoView?.({ block: 'nearest', inline: 'nearest' })\n  }, [])\n\n  return { sync, onFocus }\n}\n"],"names":["syncFade","el","toggleAttribute","scrollLeft","scrollWidth","clientWidth","useEdgeFade","ref","sync","useCallback","current","useIsomorphicLayoutEffect","ResizeObserver","observer","observe","disconnect","useEffect","onWheel","e","ctrlKey","metaKey","Math","abs","deltaY","deltaX","before","deltaMode","preventDefault","addEventListener","passive","removeEventListener","onFocus","target","currentTarget","matches","scrollIntoView","block","inline"],"mappings":"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"}

package/dist/cjs/hooks/useEscape.cjs

@@ -7,18 +7,21 @@ const overlayStack = require('./overlayStack.cjs');
 
 const listenEscapeLayer = overlayStack.createLayerStack('keydown');
 
-/** Calls `handler` on Escape while `active`; with nested overlays only the newest one handles it. */
-const useEscape = (active, handler) => {
+/** Calls `handler` on Escape while `enabled`; with nested overlays only the newest one handles it. */
+const useEscape = function (handler) {
+  let {
+    enabled = true
+  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   const handlerRef = react.useRef(handler);
   handlerRef.current = handler;
   react.useEffect(() => {
-    if (!active) return;
+    if (!enabled) return;
     return listenEscapeLayer(event => {
-      if (event.key !== 'Escape' || event.defaultPrevented) return;
+      if (event.key !== 'Escape' || event.defaultPrevented || event.isComposing || event.keyCode === 229) return;
       event.preventDefault();
       handlerRef.current(event);
     });
-  }, [active]);
+  }, [enabled]);
 };
 
 exports.useEscape = useEscape;

package/dist/cjs/hooks/useEscape.cjs.map

@@ -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;;;;"}
+{"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 `enabled`; with nested overlays only the newest one handles it. */\nexport const useEscape = (\n  handler: (event: KeyboardEvent) => void,\n  { enabled = true }: { enabled?: boolean } = {},\n) => {\n  const handlerRef = useRef(handler)\n  handlerRef.current = handler\n\n  useEffect(() => {\n    if (!enabled) return\n\n    return listenEscapeLayer((event) => {\n      if (\n        event.key !== 'Escape' ||\n        event.defaultPrevented ||\n        event.isComposing ||\n        event.keyCode === 229\n      )\n        return\n      event.preventDefault()\n      handlerRef.current(event)\n    })\n  }, [enabled])\n}\n"],"names":["listenEscapeLayer","createLayerStack","useEscape","handler","enabled","arguments","length","undefined","handlerRef","useRef","current","useEffect","event","key","defaultPrevented","isComposing","keyCode","preventDefault"],"mappings":";;;;;;;AAIA,MAAMA,iBAAiB,GAAGC,6BAAgB,CAAC,SAAS,CAAC,CAAA;;AAErD;MACaC,SAAS,GAAG,UACvBC,OAAuC,EAEpC;EAAA,IADH;AAAEC,IAAAA,OAAO,GAAG,IAAA;AAA4B,GAAC,GAAAC,SAAA,CAAAC,MAAA,GAAAD,CAAAA,IAAAA,SAAA,CAAAE,CAAAA,CAAAA,KAAAA,SAAA,GAAAF,SAAA,CAAG,CAAA,CAAA,GAAA,EAAE,CAAA;AAE9C,EAAA,MAAMG,UAAU,GAAGC,YAAM,CAACN,OAAO,CAAC,CAAA;EAClCK,UAAU,CAACE,OAAO,GAAGP,OAAO,CAAA;AAE5BQ,EAAAA,eAAS,CAAC,MAAM;IACd,IAAI,CAACP,OAAO,EAAE,OAAA;IAEd,OAAOJ,iBAAiB,CAAEY,KAAK,IAAK;AAClC,MAAA,IACEA,KAAK,CAACC,GAAG,KAAK,QAAQ,IACtBD,KAAK,CAACE,gBAAgB,IACtBF,KAAK,CAACG,WAAW,IACjBH,KAAK,CAACI,OAAO,KAAK,GAAG,EAErB,OAAA;MACFJ,KAAK,CAACK,cAAc,EAAE,CAAA;AACtBT,MAAAA,UAAU,CAACE,OAAO,CAACE,KAAK,CAAC,CAAA;AAC3B,KAAC,CAAC,CAAA;AACJ,GAAC,EAAE,CAACR,OAAO,CAAC,CAAC,CAAA;AACf;;;;"}