@lidofinance/lido-app-ui 1.13.0 → 1.14.0

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;;;;"}

package/dist/cjs/hooks/useFocusTrap.cjs

@@ -6,28 +6,61 @@ const react = require('react');
 const overlayStack = require('./overlayStack.cjs');
 
 const listenTrapLayer = overlayStack.createLayerStack('keydown');
-const TABBABLE = 'a[href],button,input:not([type="hidden"]),select,textarea,[tabindex]:not([tabindex="-1"]),[contenteditable="true"]';
-const isRendered = el => {
-  const style = getComputedStyle(el);
-  return style.visibility !== 'hidden' && style.display !== 'none';
+const TABBABLE = 'a[href],area[href],button,input:not([type="hidden"]),select,textarea,summary,iframe,audio[controls],video[controls],[tabindex],[contenteditable]:not([contenteditable="false"])';
+
+// jsdom has no checkVisibility, and `display` isn't inherited, so walk up to the container.
+const isRendered = (el, container) => {
+  if (getComputedStyle(el).visibility === 'hidden') return false;
+  for (let node = el; node && node !== container; node = node.parentElement) {
+    if (getComputedStyle(node).display === 'none') return false;
+  }
+  return true;
 };
-const getTabbable = container => Array.from(container.querySelectorAll(TABBABLE)).filter(el => !el.matches(':disabled') && el.getAttribute('aria-hidden') !== 'true' && isRendered(el));
-/** Keeps Tab / Shift+Tab inside `element` while `active`; with nested traps only the newest one handles Tab. */
-const useFocusTrap = function (element, active) {
-  let options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+const getTabbable = container => Array.from(container.querySelectorAll(TABBABLE)).filter(el => !el.matches(':disabled') && !el.getAttribute('tabindex')?.trim().startsWith('-') && el.getAttribute('aria-hidden') !== 'true' && !el.closest('[inert]') && isRendered(el, container));
+const isGroupedRadio = el => el instanceof HTMLInputElement && el.type === 'radio' && el.name !== '';
+
+// A named radio group is one tab stop; the browser may enter or leave it at any of its radios.
+const sameStop = (a, b) => a === b || isGroupedRadio(a) && isGroupedRadio(b) && a.name === b.name && a.form === b.form;
+const isChecked = el => isGroupedRadio(el) && el.checked;
+
+// Browsers enter a radio group at its checked radio.
+const entryPoint = (items, el) => items.find(o => sameStop(o, el) && o.checked) ?? el;
+
+// One tab stop per radio group: unchecked radios are skipped when a sibling is checked.
+const getStops = items => items.filter(el => !isGroupedRadio(el) || el.checked || !items.some(o => o !== el && sameStop(o, el) && isChecked(o)));
+/** Keeps Tab / Shift+Tab inside `element` while `enabled`; with nested traps only the newest one handles Tab. */
+const useFocusTrap = function (element) {
+  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  const {
+    enabled = true
+  } = options;
   const optionsRef = react.useRef(options);
   optionsRef.current = options;
   react.useEffect(() => {
     const container = element;
-    if (!active || !container) return;
-    const previous = document.activeElement;
-    const target = optionsRef.current.initialFocus?.current ?? getTabbable(container)[0] ?? container;
-    if (target === container && !container.hasAttribute('tabindex')) {
-      container.setAttribute('tabindex', '-1');
+    if (!enabled || !container) return;
+    const previous = optionsRef.current.returnFocus ?? document.activeElement;
+    const explicit = optionsRef.current.initialFocus?.current;
+    if (explicit) {
+      explicit.focus({
+        preventScroll: true
+      });
+      explicit.scrollIntoView?.({
+        block: 'nearest'
+      });
+    } else if (!container.contains(document.activeElement)) {
+      const items = getTabbable(container);
+      const target = items[0] ? entryPoint(items, items[0]) : container;
+      if (target === container && !container.hasAttribute('tabindex')) {
+        container.setAttribute('tabindex', '-1');
+      }
+      target.focus({
+        preventScroll: true
+      });
+      target.scrollIntoView?.({
+        block: 'nearest'
+      });
     }
-    target.focus({
-      preventScroll: true
-    });
     const onKeyDown = event => {
       if (event.key !== 'Tab') return;
       const items = getTabbable(container);
@@ -36,18 +69,22 @@ const useFocusTrap = function (element, active) {
         container.focus();
         return;
       }
-      const first = items[0];
-      const last = items[items.length - 1];
+      const stops = getStops(items);
+      const first = stops[0];
+      const last = stops[stops.length - 1];
       const current = document.activeElement;
+      const currentIndex = items.indexOf(current);
+      const atEnd = sameStop(current, last) || currentIndex >= 0 && currentIndex >= items.indexOf(last);
+      const atStart = current === container || sameStop(current, first) || currentIndex >= 0 && currentIndex <= items.indexOf(first);
       if (!container.contains(current)) {
         event.preventDefault();
-        (event.shiftKey ? last : first).focus();
-      } else if (event.shiftKey && (current === first || current === container)) {
+        entryPoint(items, event.shiftKey ? last : first).focus();
+      } else if (event.shiftKey && atStart) {
         event.preventDefault();
-        last.focus();
-      } else if (!event.shiftKey && current === last) {
+        entryPoint(items, last).focus();
+      } else if (!event.shiftKey && atEnd) {
         event.preventDefault();
-        first.focus();
+        entryPoint(items, first).focus();
       }
     };
     const stopListening = listenTrapLayer(onKeyDown);
@@ -59,7 +96,7 @@ const useFocusTrap = function (element, active) {
         });
       }
     };
-  }, [element, active]);
+  }, [element, enabled]);
 };
 
 exports.useFocusTrap = useFocusTrap;

package/dist/cjs/hooks/useFocusTrap.cjs.map

@@ -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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"}
+{"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],area[href],button,input:not([type=\"hidden\"]),select,textarea,summary,iframe,audio[controls],video[controls],[tabindex],[contenteditable]:not([contenteditable=\"false\"])'\n\n// jsdom has no checkVisibility, and `display` isn't inherited, so walk up to the container.\nconst isRendered = (el: HTMLElement, container: HTMLElement) => {\n  if (getComputedStyle(el).visibility === 'hidden') return false\n  for (\n    let node: HTMLElement | null = el;\n    node && node !== container;\n    node = node.parentElement\n  ) {\n    if (getComputedStyle(node).display === 'none') return false\n  }\n  return true\n}\n\nconst getTabbable = (container: HTMLElement) =>\n  Array.from(container.querySelectorAll<HTMLElement>(TABBABLE)).filter(\n    (el) =>\n      !el.matches(':disabled') &&\n      !el.getAttribute('tabindex')?.trim().startsWith('-') &&\n      el.getAttribute('aria-hidden') !== 'true' &&\n      !el.closest('[inert]') &&\n      isRendered(el, container),\n  )\n\nconst isGroupedRadio = (el: Element | null): el is HTMLInputElement =>\n  el instanceof HTMLInputElement && el.type === 'radio' && el.name !== ''\n\n// A named radio group is one tab stop; the browser may enter or leave it at any of its radios.\nconst sameStop = (a: Element | null, b: HTMLElement) =>\n  a === b ||\n  (isGroupedRadio(a) &&\n    isGroupedRadio(b) &&\n    a.name === b.name &&\n    a.form === b.form)\n\nconst isChecked = (el: Element) => isGroupedRadio(el) && el.checked\n\n// Browsers enter a radio group at its checked radio.\nconst entryPoint = (items: HTMLElement[], el: HTMLElement) =>\n  items.find((o) => sameStop(o, el) && (o as HTMLInputElement).checked) ?? el\n\n// One tab stop per radio group: unchecked radios are skipped when a sibling is checked.\nconst getStops = (items: HTMLElement[]) =>\n  items.filter(\n    (el) =>\n      !isGroupedRadio(el) ||\n      el.checked ||\n      !items.some((o) => o !== el && sameStop(o, el) && isChecked(o)),\n  )\n\nexport type FocusTrapOptions = {\n  /** Default true. */\n  enabled?: boolean\n  /** Element to focus on activate; defaults to focus already inside, then first tabbable, then the container. */\n  initialFocus?: RefObject<HTMLElement | null>\n  /** Element to restore focus to; defaults to the active element at activation. */\n  returnFocus?: 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 `enabled`; with nested traps only the newest one handles Tab. */\nexport const useFocusTrap = (\n  element: HTMLElement | null,\n  options: FocusTrapOptions = {},\n) => {\n  const { enabled = true } = options\n  const optionsRef = useRef(options)\n  optionsRef.current = options\n\n  useEffect(() => {\n    const container = element\n    if (!enabled || !container) return\n\n    const previous =\n      optionsRef.current.returnFocus ??\n      (document.activeElement as HTMLElement | null)\n\n    const explicit = optionsRef.current.initialFocus?.current\n    if (explicit) {\n      explicit.focus({ preventScroll: true })\n      explicit.scrollIntoView?.({ block: 'nearest' })\n    } else if (!container.contains(document.activeElement)) {\n      const items = getTabbable(container)\n      const target = items[0] ? entryPoint(items, items[0]) : container\n      if (target === container && !container.hasAttribute('tabindex')) {\n        container.setAttribute('tabindex', '-1')\n      }\n      target.focus({ preventScroll: true })\n      target.scrollIntoView?.({ block: 'nearest' })\n    }\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 stops = getStops(items)\n      const first = stops[0]\n      const last = stops[stops.length - 1]\n      const current = document.activeElement\n      const currentIndex = items.indexOf(current as HTMLElement)\n      const atEnd =\n        sameStop(current, last) ||\n        (currentIndex >= 0 && currentIndex >= items.indexOf(last))\n      const atStart =\n        current === container ||\n        sameStop(current, first) ||\n        (currentIndex >= 0 && currentIndex <= items.indexOf(first))\n      if (!container.contains(current)) {\n        event.preventDefault()\n        entryPoint(items, event.shiftKey ? last : first).focus()\n      } else if (event.shiftKey && atStart) {\n        event.preventDefault()\n        entryPoint(items, last).focus()\n      } else if (!event.shiftKey && atEnd) {\n        event.preventDefault()\n        entryPoint(items, 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, enabled])\n}\n"],"names":["listenTrapLayer","createLayerStack","TABBABLE","isRendered","el","container","getComputedStyle","visibility","node","parentElement","display","getTabbable","Array","from","querySelectorAll","filter","matches","getAttribute","trim","startsWith","closest","isGroupedRadio","HTMLInputElement","type","name","sameStop","a","b","form","isChecked","checked","entryPoint","items","find","o","getStops","some","useFocusTrap","element","options","arguments","length","undefined","enabled","optionsRef","useRef","current","useEffect","previous","returnFocus","document","activeElement","explicit","initialFocus","focus","preventScroll","scrollIntoView","block","contains","target","hasAttribute","setAttribute","onKeyDown","event","key","preventDefault","stops","first","last","currentIndex","indexOf","atEnd","atStart","shiftKey","stopListening","restoreFocus"],"mappings":"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"}

package/dist/cjs/hooks/useHideOthers.cjs

@@ -0,0 +1,51 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const react = require('react');
+
+const KEEP_ATTR = 'data-lido-overlay-keep';
+// Stack in activation order; the top owner's root must stay live.
+const owners = [];
+// How many owners inerted each node, so a lower owner closing can't lift an upper one's inert.
+const counts = new Map();
+const sync = () => {
+  counts.forEach((_, node) => node.setAttribute('inert', ''));
+  owners[owners.length - 1]?.root?.removeAttribute('inert');
+};
+
+// Standalone inputs/iframes/buttons are tabbable (tabIndex >= 0) and must not count as empty hosts.
+const isEmptyHost = node => node.childNodes.length === 0 && node.tabIndex < 0;
+
+/** Sets `inert` on the other `document.body` children while `enabled`; roots mounted later (or empty at activation) and ones marked `data-lido-overlay-keep` stay live. */
+const useHideOthers = function (element) {
+  let enabled = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+  react.useEffect(() => {
+    if (!enabled || !element) return;
+    const root = element.closest('body > *');
+    const owner = {
+      root
+    };
+    // Inert nodes we didn't mark belong to the app, which restores them itself.
+    const others = Array.from(document.body.children).filter(node => node !== root && !isEmptyHost(node) && !node.hasAttribute(KEEP_ATTR) && !(node.hasAttribute('inert') && !counts.has(node)));
+    others.forEach(node => counts.set(node, (counts.get(node) ?? 0) + 1));
+    owners.push(owner);
+    sync();
+    return () => {
+      owners.splice(owners.indexOf(owner), 1);
+      others.forEach(node => {
+        const count = (counts.get(node) ?? 1) - 1;
+        if (count > 0) {
+          counts.set(node, count);
+        } else {
+          counts.delete(node);
+          node.removeAttribute('inert');
+        }
+      });
+      sync();
+    };
+  }, [element, enabled]);
+};
+
+exports.useHideOthers = useHideOthers;
+//# sourceMappingURL=useHideOthers.cjs.map

package/dist/cjs/hooks/useHideOthers.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useHideOthers.cjs","sources":["../../../src/hooks/useHideOthers.ts"],"sourcesContent":["import { useEffect } from 'react'\n\nconst KEEP_ATTR = 'data-lido-overlay-keep'\n\ntype Owner = { root: Element | null }\n\n// Stack in activation order; the top owner's root must stay live.\nconst owners: Owner[] = []\n// How many owners inerted each node, so a lower owner closing can't lift an upper one's inert.\nconst counts = new Map<Element, number>()\n\nconst sync = () => {\n  counts.forEach((_, node) => node.setAttribute('inert', ''))\n  owners[owners.length - 1]?.root?.removeAttribute('inert')\n}\n\n// Standalone inputs/iframes/buttons are tabbable (tabIndex >= 0) and must not count as empty hosts.\nconst isEmptyHost = (node: Element) =>\n  node.childNodes.length === 0 && (node as HTMLElement).tabIndex < 0\n\n/** Sets `inert` on the other `document.body` children while `enabled`; roots mounted later (or empty at activation) and ones marked `data-lido-overlay-keep` stay live. */\nexport const useHideOthers = (element: HTMLElement | null, enabled = true) => {\n  useEffect(() => {\n    if (!enabled || !element) return\n    const root = element.closest('body > *')\n    const owner: Owner = { root }\n    // Inert nodes we didn't mark belong to the app, which restores them itself.\n    const others = Array.from(document.body.children).filter(\n      (node) =>\n        node !== root &&\n        !isEmptyHost(node) &&\n        !node.hasAttribute(KEEP_ATTR) &&\n        !(node.hasAttribute('inert') && !counts.has(node)),\n    )\n    others.forEach((node) => counts.set(node, (counts.get(node) ?? 0) + 1))\n    owners.push(owner)\n    sync()\n    return () => {\n      owners.splice(owners.indexOf(owner), 1)\n      others.forEach((node) => {\n        const count = (counts.get(node) ?? 1) - 1\n        if (count > 0) {\n          counts.set(node, count)\n        } else {\n          counts.delete(node)\n          node.removeAttribute('inert')\n        }\n      })\n      sync()\n    }\n  }, [element, enabled])\n}\n"],"names":["KEEP_ATTR","owners","counts","Map","sync","forEach","_","node","setAttribute","length","root","removeAttribute","isEmptyHost","childNodes","tabIndex","useHideOthers","element","enabled","arguments","undefined","useEffect","closest","owner","others","Array","from","document","body","children","filter","hasAttribute","has","set","get","push","splice","indexOf","count","delete"],"mappings":";;;;;;AAEA,MAAMA,SAAS,GAAG,wBAAwB,CAAA;AAI1C;AACA,MAAMC,MAAe,GAAG,EAAE,CAAA;AAC1B;AACA,MAAMC,MAAM,GAAG,IAAIC,GAAG,EAAmB,CAAA;AAEzC,MAAMC,IAAI,GAAGA,MAAM;AACjBF,EAAAA,MAAM,CAACG,OAAO,CAAC,CAACC,CAAC,EAAEC,IAAI,KAAKA,IAAI,CAACC,YAAY,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,CAAA;AAC3DP,EAAAA,MAAM,CAACA,MAAM,CAACQ,MAAM,GAAG,CAAC,CAAC,EAAEC,IAAI,EAAEC,eAAe,CAAC,OAAO,CAAC,CAAA;AAC3D,CAAC,CAAA;;AAED;AACA,MAAMC,WAAW,GAAIL,IAAa,IAChCA,IAAI,CAACM,UAAU,CAACJ,MAAM,KAAK,CAAC,IAAKF,IAAI,CAAiBO,QAAQ,GAAG,CAAC,CAAA;;AAEpE;MACaC,aAAa,GAAG,UAACC,OAA2B,EAAqB;AAAA,EAAA,IAAnBC,OAAO,GAAAC,SAAA,CAAAT,MAAA,GAAA,CAAA,IAAAS,SAAA,CAAA,CAAA,CAAA,KAAAC,SAAA,GAAAD,SAAA,CAAA,CAAA,CAAA,GAAG,IAAI,CAAA;AACvEE,EAAAA,eAAS,CAAC,MAAM;AACd,IAAA,IAAI,CAACH,OAAO,IAAI,CAACD,OAAO,EAAE,OAAA;AAC1B,IAAA,MAAMN,IAAI,GAAGM,OAAO,CAACK,OAAO,CAAC,UAAU,CAAC,CAAA;AACxC,IAAA,MAAMC,KAAY,GAAG;AAAEZ,MAAAA,IAAAA;KAAM,CAAA;AAC7B;IACA,MAAMa,MAAM,GAAGC,KAAK,CAACC,IAAI,CAACC,QAAQ,CAACC,IAAI,CAACC,QAAQ,CAAC,CAACC,MAAM,CACrDtB,IAAI,IACHA,IAAI,KAAKG,IAAI,IACb,CAACE,WAAW,CAACL,IAAI,CAAC,IAClB,CAACA,IAAI,CAACuB,YAAY,CAAC9B,SAAS,CAAC,IAC7B,EAAEO,IAAI,CAACuB,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC5B,MAAM,CAAC6B,GAAG,CAACxB,IAAI,CAAC,CACrD,CAAC,CAAA;IACDgB,MAAM,CAAClB,OAAO,CAAEE,IAAI,IAAKL,MAAM,CAAC8B,GAAG,CAACzB,IAAI,EAAE,CAACL,MAAM,CAAC+B,GAAG,CAAC1B,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;AACvEN,IAAAA,MAAM,CAACiC,IAAI,CAACZ,KAAK,CAAC,CAAA;AAClBlB,IAAAA,IAAI,EAAE,CAAA;AACN,IAAA,OAAO,MAAM;MACXH,MAAM,CAACkC,MAAM,CAAClC,MAAM,CAACmC,OAAO,CAACd,KAAK,CAAC,EAAE,CAAC,CAAC,CAAA;AACvCC,MAAAA,MAAM,CAAClB,OAAO,CAAEE,IAAI,IAAK;AACvB,QAAA,MAAM8B,KAAK,GAAG,CAACnC,MAAM,CAAC+B,GAAG,CAAC1B,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QACzC,IAAI8B,KAAK,GAAG,CAAC,EAAE;AACbnC,UAAAA,MAAM,CAAC8B,GAAG,CAACzB,IAAI,EAAE8B,KAAK,CAAC,CAAA;AACzB,SAAC,MAAM;AACLnC,UAAAA,MAAM,CAACoC,MAAM,CAAC/B,IAAI,CAAC,CAAA;AACnBA,UAAAA,IAAI,CAACI,eAAe,CAAC,OAAO,CAAC,CAAA;AAC/B,SAAA;AACF,OAAC,CAAC,CAAA;AACFP,MAAAA,IAAI,EAAE,CAAA;KACP,CAAA;AACH,GAAC,EAAE,CAACY,OAAO,EAAEC,OAAO,CAAC,CAAC,CAAA;AACxB;;;;"}

package/dist/cjs/hooks/useOutsideClick.cjs

@@ -9,16 +9,43 @@ const listenOutsideLayer = overlayStack.createLayerStack('pointerdown', {
   capture: true
 });
 
-/** Calls `onOutside` on pointerdown outside `element` while `enabled`; with nested overlays only the newest one handles outside clicks. */
-const useOutsideClick = (element, onOutside, enabled) => {
+/** Calls `onOutside` on pointerdown outside `element` while `enabled`, or on a completed tap for touch so scrolling doesn't dismiss; with nested overlays only the newest one handles outside clicks. */
+const useOutsideClick = function (element, onOutside) {
+  let {
+    enabled = true
+  } = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   const handlerRef = react.useRef(onOutside);
   handlerRef.current = onOutside;
   react.useEffect(() => {
     if (!enabled || !element) return;
-    return listenOutsideLayer(event => {
+    let cancelPending = null;
+    const clearPending = () => {
+      cancelPending?.();
+      cancelPending = null;
+    };
+    const stop = listenOutsideLayer(event => {
       if (event.target instanceof Node && element.contains(event.target)) return;
-      handlerRef.current(event);
+      clearPending();
+      if (event.pointerType !== 'touch') {
+        handlerRef.current(event);
+        return;
+      }
+      // A scroll gesture ends in pointercancel; only a tap reaches pointerup.
+      const onUp = () => {
+        clearPending();
+        handlerRef.current(event);
+      };
+      document.addEventListener('pointerup', onUp, true);
+      document.addEventListener('pointercancel', clearPending, true);
+      cancelPending = () => {
+        document.removeEventListener('pointerup', onUp, true);
+        document.removeEventListener('pointercancel', clearPending, true);
+      };
     });
+    return () => {
+      clearPending();
+      stop();
+    };
   }, [element, enabled]);
 };
 

package/dist/cjs/hooks/useOutsideClick.cjs.map

@@ -1 +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;;;;"}
+{"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`, or on a completed tap for touch so scrolling doesn't dismiss; with nested overlays only the newest one handles outside clicks. */\nexport const useOutsideClick = (\n  element: HTMLElement | null,\n  onOutside: (event: PointerEvent) => void,\n  { enabled = true }: { enabled?: boolean } = {},\n) => {\n  const handlerRef = useRef(onOutside)\n  handlerRef.current = onOutside\n\n  useEffect(() => {\n    if (!enabled || !element) return\n\n    let cancelPending: (() => void) | null = null\n    const clearPending = () => {\n      cancelPending?.()\n      cancelPending = null\n    }\n\n    const stop = listenOutsideLayer((event) => {\n      if (event.target instanceof Node && element.contains(event.target)) return\n      clearPending()\n      if (event.pointerType !== 'touch') {\n        handlerRef.current(event)\n        return\n      }\n      // A scroll gesture ends in pointercancel; only a tap reaches pointerup.\n      const onUp = () => {\n        clearPending()\n        handlerRef.current(event)\n      }\n      document.addEventListener('pointerup', onUp, true)\n      document.addEventListener('pointercancel', clearPending, true)\n      cancelPending = () => {\n        document.removeEventListener('pointerup', onUp, true)\n        document.removeEventListener('pointercancel', clearPending, true)\n      }\n    })\n    return () => {\n      clearPending()\n      stop()\n    }\n  }, [element, enabled])\n}\n"],"names":["listenOutsideLayer","createLayerStack","capture","useOutsideClick","element","onOutside","enabled","arguments","length","undefined","handlerRef","useRef","current","useEffect","cancelPending","clearPending","stop","event","target","Node","contains","pointerType","onUp","document","addEventListener","removeEventListener"],"mappings":";;;;;;;AAIA,MAAMA,kBAAkB,GAAGC,6BAAgB,CAAC,aAAa,EAAE;AAAEC,EAAAA,OAAO,EAAE,IAAA;AAAK,CAAC,CAAC,CAAA;;AAE7E;AACO,MAAMC,eAAe,GAAG,UAC7BC,OAA2B,EAC3BC,SAAwC,EAErC;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,SAAS,CAAC,CAAA;EACpCK,UAAU,CAACE,OAAO,GAAGP,SAAS,CAAA;AAE9BQ,EAAAA,eAAS,CAAC,MAAM;AACd,IAAA,IAAI,CAACP,OAAO,IAAI,CAACF,OAAO,EAAE,OAAA;IAE1B,IAAIU,aAAkC,GAAG,IAAI,CAAA;IAC7C,MAAMC,YAAY,GAAGA,MAAM;AACzBD,MAAAA,aAAa,IAAI,CAAA;AACjBA,MAAAA,aAAa,GAAG,IAAI,CAAA;KACrB,CAAA;AAED,IAAA,MAAME,IAAI,GAAGhB,kBAAkB,CAAEiB,KAAK,IAAK;AACzC,MAAA,IAAIA,KAAK,CAACC,MAAM,YAAYC,IAAI,IAAIf,OAAO,CAACgB,QAAQ,CAACH,KAAK,CAACC,MAAM,CAAC,EAAE,OAAA;AACpEH,MAAAA,YAAY,EAAE,CAAA;AACd,MAAA,IAAIE,KAAK,CAACI,WAAW,KAAK,OAAO,EAAE;AACjCX,QAAAA,UAAU,CAACE,OAAO,CAACK,KAAK,CAAC,CAAA;AACzB,QAAA,OAAA;AACF,OAAA;AACA;MACA,MAAMK,IAAI,GAAGA,MAAM;AACjBP,QAAAA,YAAY,EAAE,CAAA;AACdL,QAAAA,UAAU,CAACE,OAAO,CAACK,KAAK,CAAC,CAAA;OAC1B,CAAA;MACDM,QAAQ,CAACC,gBAAgB,CAAC,WAAW,EAAEF,IAAI,EAAE,IAAI,CAAC,CAAA;MAClDC,QAAQ,CAACC,gBAAgB,CAAC,eAAe,EAAET,YAAY,EAAE,IAAI,CAAC,CAAA;MAC9DD,aAAa,GAAGA,MAAM;QACpBS,QAAQ,CAACE,mBAAmB,CAAC,WAAW,EAAEH,IAAI,EAAE,IAAI,CAAC,CAAA;QACrDC,QAAQ,CAACE,mBAAmB,CAAC,eAAe,EAAEV,YAAY,EAAE,IAAI,CAAC,CAAA;OAClE,CAAA;AACH,KAAC,CAAC,CAAA;AACF,IAAA,OAAO,MAAM;AACXA,MAAAA,YAAY,EAAE,CAAA;AACdC,MAAAA,IAAI,EAAE,CAAA;KACP,CAAA;AACH,GAAC,EAAE,CAACZ,OAAO,EAAEE,OAAO,CAAC,CAAC,CAAA;AACxB;;;;"}

package/dist/cjs/icon-button/IconButton.cjs

@@ -10,6 +10,7 @@ const IconButton_module = require('./IconButton.module.css.cjs');
 const jsxRuntime = require('react/jsx-runtime');
 const IconLoaderCircle = require('../icons/components/base/IconLoaderCircle.cjs');
 
+/** 36px fully rounded icon-only button; `loading` swaps the icon for a spinner and disables it. */
 const IconButton = /*#__PURE__*/react.forwardRef((_ref, ref) => {
   let {
     className,
@@ -19,6 +20,8 @@ const IconButton = /*#__PURE__*/react.forwardRef((_ref, ref) => {
     disabled = false,
     icon,
     counter,
+    counterLabel,
+    'aria-label': ariaLabel,
     dataTestId,
     ...rest
   } = _ref;
@@ -29,6 +32,7 @@ const IconButton = /*#__PURE__*/react.forwardRef((_ref, ref) => {
     "aria-busy": loading || undefined,
     className: cn(IconButton_module.button, IconButton_module[variant], variant === 'surface' && surface_module.surface, loading && !disabled && IconButton_module.loading, className),
     "data-testid": dataTestId?.root,
+    "aria-label": counterLabel ? `${ariaLabel}, ${counterLabel}` : ariaLabel,
     ...rest,
     children: [loading ? /*#__PURE__*/jsxRuntime.jsx(IconLoaderCircle.IconLoaderCircle, {
       className: IconButton_module.spinner,

package/dist/cjs/icon-button/IconButton.cjs.map

@@ -1 +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 surfaceStyles from '../utils/surface.module.css'\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        variant === 'surface' && surfaceStyles.surface,\n        loading && !disabled && 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","surfaceStyles","surface","root","children","_jsx","IconLoaderCircle","spinner","CounterSlot","displayName"],"mappings":";;;;;;;;;;;;AA8BO,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,EACfA,OAAO,KAAK,SAAS,IAAIY,cAAa,CAACC,OAAO,EAC9CZ,OAAO,IAAI,CAACC,QAAQ,IAAIQ,iBAAM,CAACT,OAAO,EACtCH,SACF,CAAE;IACF,aAAaO,EAAAA,UAAU,EAAES,IAAK;AAAA,IAAA,GAC1BR,IAAI;AAAAS,IAAAA,QAAA,EAEPd,CAAAA,OAAO,gBACNe,cAAA,CAACC,iCAAgB,EAAA;MAACnB,SAAS,EAAEY,iBAAM,CAACQ,OAAQ;MAAC,aAAY,EAAA,MAAA;KAAQ,CAAC,gBAElEF,cAAA,CAAA,MAAA,EAAA;MACElB,SAAS,EAAEY,iBAAM,CAACP,IAAK;AACvB,MAAA,aAAA,EAAY,MAAM;MAClB,aAAaE,EAAAA,UAAU,EAAEF,IAAK;AAAAY,MAAAA,QAAA,EAE7BZ,IAAAA;AAAI,KACD,CACP,eACDa,cAAA,CAACG,uBAAW,EAAA;MAACd,UAAU,EAAEA,UAAU,EAAED,OAAQ;AAAAW,MAAAA,QAAA,EAAEX,OAAAA;AAAO,KAAc,CAAC,CAAA;AAAA,GAC/D,CAAC,CAAA;AAAA,CAEb,EAAC;AAEDV,UAAU,CAAC0B,WAAW,GAAG,YAAY;;;;"}
+{"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 surfaceStyles from '../utils/surface.module.css'\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  /**\n   * Corner slot, aria-hidden. A number or string renders a default `Counter`\n   * (`0` shows a \"0\" pill; use `counter={count || null}` to hide it), or pass a\n   * `<Counter variant=...>` element. Announce the count with `counterLabel`.\n   */\n  counter?: ReactNode\n  /** Spoken with the name, e.g. \"3 unread\". */\n  counterLabel?: string\n  dataTestId?: IconButtonDataTestId\n}\n\n/** 36px fully rounded icon-only button; `loading` swaps the icon for a spinner and disables it. */\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      counterLabel,\n      'aria-label': ariaLabel,\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        variant === 'surface' && surfaceStyles.surface,\n        loading && !disabled && styles.loading,\n        className,\n      )}\n      data-testid={dataTestId?.root}\n      aria-label={counterLabel ? `${ariaLabel}, ${counterLabel}` : ariaLabel}\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","counterLabel","ariaLabel","dataTestId","rest","_jsxs","undefined","cn","styles","button","surfaceStyles","surface","root","children","_jsx","IconLoaderCircle","spinner","CounterSlot","displayName"],"mappings":";;;;;;;;;;;;AAoCA;AACO,MAAMA,UAAU,gBAAGC,gBAAU,CAClC,CAAAC,IAAA,EAcEC,GAAG,KAAA;EAAA,IAbH;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,YAAY;AACZ,IAAA,YAAY,EAAEC,SAAS;IACvBC,UAAU;IACV,GAAGC,IAAAA;AACL,GAAC,GAAAZ,IAAA,CAAA;AAAA,EAAA,oBAGDa,eAAA,CAAA,QAAA,EAAA;AACEZ,IAAAA,GAAG,EAAEA,GAAI;AACTE,IAAAA,IAAI,EAAEA,IAAK;IACXG,QAAQ,EAAEA,QAAQ,IAAID,OAAQ;IAC9B,WAAWA,EAAAA,OAAO,IAAIS,SAAU;AAChCZ,IAAAA,SAAS,EAAEa,EAAE,CACXC,iBAAM,CAACC,MAAM,EACbD,iBAAM,CAACZ,OAAO,CAAC,EACfA,OAAO,KAAK,SAAS,IAAIc,cAAa,CAACC,OAAO,EAC9Cd,OAAO,IAAI,CAACC,QAAQ,IAAIU,iBAAM,CAACX,OAAO,EACtCH,SACF,CAAE;IACF,aAAaS,EAAAA,UAAU,EAAES,IAAK;IAC9B,YAAYX,EAAAA,YAAY,GAAG,CAAGC,EAAAA,SAAS,KAAKD,YAAY,CAAA,CAAE,GAAGC,SAAU;AAAA,IAAA,GACnEE,IAAI;AAAAS,IAAAA,QAAA,EAEPhB,CAAAA,OAAO,gBACNiB,cAAA,CAACC,iCAAgB,EAAA;MAACrB,SAAS,EAAEc,iBAAM,CAACQ,OAAQ;MAAC,aAAY,EAAA,MAAA;KAAQ,CAAC,gBAElEF,cAAA,CAAA,MAAA,EAAA;MACEpB,SAAS,EAAEc,iBAAM,CAACT,IAAK;AACvB,MAAA,aAAA,EAAY,MAAM;MAClB,aAAaI,EAAAA,UAAU,EAAEJ,IAAK;AAAAc,MAAAA,QAAA,EAE7Bd,IAAAA;AAAI,KACD,CACP,eACDe,cAAA,CAACG,uBAAW,EAAA;MAACd,UAAU,EAAEA,UAAU,EAAEH,OAAQ;AAAAa,MAAAA,QAAA,EAAEb,OAAAA;AAAO,KAAc,CAAC,CAAA;AAAA,GAC/D,CAAC,CAAA;AAAA,CAEb,EAAC;AAEDV,UAAU,CAAC4B,WAAW,GAAG,YAAY;;;;"}

package/dist/cjs/icons/TokenIcon.cjs

@@ -24,6 +24,8 @@ const iconBySymbol = {
 // True when a symbol has a glyph in the kit — callers with arbitrary token symbols guard
 // on this before rendering an icon, so tokens without art render no icon rather than crash.
 const isTokenIcon = symbol => symbol in iconBySymbol;
+
+/** Resolves a token symbol to its glyph; symbols without art render nothing, so guard with `isTokenIcon` first. */
 const TokenIcon = _ref => {
   let {
     token,

package/dist/cjs/icons/TokenIcon.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TokenIcon.cjs","sources":["../../../src/icons/TokenIcon.tsx"],"sourcesContent":["import type { SVGProps } from 'react'\nimport { TokenEth } from './components/token/TokenEth'\nimport { TokenSteth } from './components/token/TokenSteth'\nimport { TokenUsdc } from './components/token/TokenUsdc'\nimport { TokenUsdt } from './components/token/TokenUsdt'\nimport { TokenUsdy } from './components/token/TokenUsdy'\nimport { TokenWEth } from './components/token/TokenWEth'\nimport { TokenWsteth } from './components/token/TokenWsteth'\n\nexport type TokenIconSymbol =\n  | 'ETH'\n  | 'WETH'\n  | 'stETH'\n  | 'wstETH'\n  | 'USDC'\n  | 'USDT'\n  | 'USDY'\n\nexport type TokenIconProps = SVGProps<SVGSVGElement> & {\n  token: TokenIconSymbol\n}\n\nconst iconBySymbol = {\n  ETH: TokenEth,\n  WETH: TokenWEth,\n  stETH: TokenSteth,\n  wstETH: TokenWsteth,\n  USDC: TokenUsdc,\n  USDT: TokenUsdt,\n  USDY: TokenUsdy,\n} as const\n\n// True when a symbol has a glyph in the kit — callers with arbitrary token symbols guard\n// on this before rendering an icon, so tokens without art render no icon rather than crash.\nexport const isTokenIcon = (symbol: string): symbol is TokenIconSymbol =>\n  symbol in iconBySymbol\n\nexport const TokenIcon = ({ token, ...props }: TokenIconProps) => {\n  const Icon = iconBySymbol[token]\n  if (!Icon) return null\n  return <Icon {...props} />\n}\n"],"names":["iconBySymbol","ETH","TokenEth","WETH","TokenWEth","stETH","TokenSteth","wstETH","TokenWsteth","USDC","TokenUsdc","USDT","TokenUsdt","USDY","TokenUsdy","isTokenIcon","symbol","TokenIcon","_ref","token","props","Icon","_jsx"],"mappings":";;;;;;;;;;;;;AAsBA,MAAMA,YAAY,GAAG;AACnBC,EAAAA,GAAG,EAAEC,iBAAQ;AACbC,EAAAA,IAAI,EAAEC,mBAAS;AACfC,EAAAA,KAAK,EAAEC,qBAAU;AACjBC,EAAAA,MAAM,EAAEC,uBAAW;AACnBC,EAAAA,IAAI,EAAEC,mBAAS;AACfC,EAAAA,IAAI,EAAEC,mBAAS;AACfC,EAAAA,IAAI,EAAEC,mBAAAA;AACR,CAAU,CAAA;;AAEV;AACA;MACaC,WAAW,GAAIC,MAAc,IACxCA,MAAM,IAAIhB,aAAY;AAEXiB,MAAAA,SAAS,GAAGC,IAAA,IAAyC;EAAA,IAAxC;IAAEC,KAAK;IAAE,GAAGC,KAAAA;AAAsB,GAAC,GAAAF,IAAA,CAAA;AAC3D,EAAA,MAAMG,IAAI,GAAGrB,YAAY,CAACmB,KAAK,CAAC,CAAA;AAChC,EAAA,IAAI,CAACE,IAAI,EAAE,OAAO,IAAI,CAAA;EACtB,oBAAOC,cAAA,CAACD,IAAI,EAAA;IAAA,GAAKD,KAAAA;AAAK,GAAG,CAAC,CAAA;AAC5B;;;;;"}
+{"version":3,"file":"TokenIcon.cjs","sources":["../../../src/icons/TokenIcon.tsx"],"sourcesContent":["import type { SVGProps } from 'react'\nimport { TokenEth } from './components/token/TokenEth'\nimport { TokenSteth } from './components/token/TokenSteth'\nimport { TokenUsdc } from './components/token/TokenUsdc'\nimport { TokenUsdt } from './components/token/TokenUsdt'\nimport { TokenUsdy } from './components/token/TokenUsdy'\nimport { TokenWEth } from './components/token/TokenWEth'\nimport { TokenWsteth } from './components/token/TokenWsteth'\n\nexport type TokenIconSymbol =\n  | 'ETH'\n  | 'WETH'\n  | 'stETH'\n  | 'wstETH'\n  | 'USDC'\n  | 'USDT'\n  | 'USDY'\n\nexport type TokenIconProps = SVGProps<SVGSVGElement> & {\n  token: TokenIconSymbol\n}\n\nconst iconBySymbol = {\n  ETH: TokenEth,\n  WETH: TokenWEth,\n  stETH: TokenSteth,\n  wstETH: TokenWsteth,\n  USDC: TokenUsdc,\n  USDT: TokenUsdt,\n  USDY: TokenUsdy,\n} as const\n\n// True when a symbol has a glyph in the kit — callers with arbitrary token symbols guard\n// on this before rendering an icon, so tokens without art render no icon rather than crash.\nexport const isTokenIcon = (symbol: string): symbol is TokenIconSymbol =>\n  symbol in iconBySymbol\n\n/** Resolves a token symbol to its glyph; symbols without art render nothing, so guard with `isTokenIcon` first. */\nexport const TokenIcon = ({ token, ...props }: TokenIconProps) => {\n  const Icon = iconBySymbol[token]\n  if (!Icon) return null\n  return <Icon {...props} />\n}\n"],"names":["iconBySymbol","ETH","TokenEth","WETH","TokenWEth","stETH","TokenSteth","wstETH","TokenWsteth","USDC","TokenUsdc","USDT","TokenUsdt","USDY","TokenUsdy","isTokenIcon","symbol","TokenIcon","_ref","token","props","Icon","_jsx"],"mappings":";;;;;;;;;;;;;AAsBA,MAAMA,YAAY,GAAG;AACnBC,EAAAA,GAAG,EAAEC,iBAAQ;AACbC,EAAAA,IAAI,EAAEC,mBAAS;AACfC,EAAAA,KAAK,EAAEC,qBAAU;AACjBC,EAAAA,MAAM,EAAEC,uBAAW;AACnBC,EAAAA,IAAI,EAAEC,mBAAS;AACfC,EAAAA,IAAI,EAAEC,mBAAS;AACfC,EAAAA,IAAI,EAAEC,mBAAAA;AACR,CAAU,CAAA;;AAEV;AACA;MACaC,WAAW,GAAIC,MAAc,IACxCA,MAAM,IAAIhB,aAAY;;AAExB;AACaiB,MAAAA,SAAS,GAAGC,IAAA,IAAyC;EAAA,IAAxC;IAAEC,KAAK;IAAE,GAAGC,KAAAA;AAAsB,GAAC,GAAAF,IAAA,CAAA;AAC3D,EAAA,MAAMG,IAAI,GAAGrB,YAAY,CAACmB,KAAK,CAAC,CAAA;AAChC,EAAA,IAAI,CAACE,IAAI,EAAE,OAAO,IAAI,CAAA;EACtB,oBAAOC,cAAA,CAACD,IAAI,EAAA;IAAA,GAAKD,KAAAA;AAAK,GAAG,CAAC,CAAA;AAC5B;;;;;"}

package/dist/cjs/identicon/Identicon.cjs

@@ -40,6 +40,8 @@ const Jazzicon = typeof ReactJazzicon__namespace.default === 'function' ? ReactJ
 const {
   jsNumberForAddress
 } = ReactJazzicon__namespace;
+
+/** Jazzicon avatar for a wallet address. */
 const Identicon = /*#__PURE__*/react.forwardRef((_ref, ref) => {
   let {
     address,

package/dist/cjs/identicon/Identicon.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Identicon.cjs","sources":["../../../src/identicon/Identicon.tsx"],"sourcesContent":["import cn from 'classnames'\nimport { type ComponentPropsWithoutRef, forwardRef } from 'react'\nimport * as ReactJazzicon from 'react-jazzicon'\n\nimport styles from './Identicon.module.css'\n\nexport type IdenticonDataTestId = {\n  root?: string\n}\n\nexport type IdenticonProps = ComponentPropsWithoutRef<'span'> & {\n  address?: string\n  size?: number\n  dataTestId?: IdenticonDataTestId\n}\n\n// react-jazzicon's own `dist/index.js` re-exports its default via an\n// Object.defineProperty getter chaining to a nested submodule, rather than a\n// plain assignment. esbuild's CJS interop (used by Vite — including when this\n// package is only pulled in transitively, e.g. by a consuming app that has no\n// direct dependency on react-jazzicon) sets a self-referential `.default`\n// before copying the module's own properties, so that nested getter gets\n// shadowed: `ReactJazzicon.default` can end up being the raw CJS exports\n// object instead of the component. When that happens, the real component is\n// one level deeper, at `.default.default`.\nconst Jazzicon =\n  typeof ReactJazzicon.default === 'function'\n    ? ReactJazzicon.default\n    : (\n        ReactJazzicon.default as unknown as {\n          default: typeof ReactJazzicon.default\n        }\n      ).default\nconst { jsNumberForAddress } = ReactJazzicon\n\nexport const Identicon = forwardRef<HTMLSpanElement, IdenticonProps>(\n  ({ address, size = 40, className, style, dataTestId, ...rest }, ref) => (\n    <span\n      ref={ref}\n      className={cn(styles.root, !address && styles.empty, className)}\n      style={{ width: size, height: size, ...style }}\n      aria-hidden='true'\n      data-testid={dataTestId?.root}\n      {...rest}\n    >\n      {address ? (\n        <Jazzicon diameter={size} seed={jsNumberForAddress(address)} />\n      ) : null}\n    </span>\n  ),\n)\n\nIdenticon.displayName = 'Identicon'\n"],"names":["Jazzicon","ReactJazzicon","default","jsNumberForAddress","Identicon","forwardRef","_ref","ref","address","size","className","style","dataTestId","rest","_jsx","cn","styles","root","empty","width","height","children","diameter","seed","displayName"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMA,QAAQ,GACZ,OAAOC,wBAAa,CAACC,OAAO,KAAK,UAAU,GACvCD,wBAAa,CAACC,OAAO,GAEnBD,wBAAa,CAACC,OAAO,CAGrBA,OAAO,CAAA;AACf,MAAM;AAAEC,EAAAA,kBAAAA;AAAmB,CAAC,GAAGF,wBAAa,CAAA;AAErC,MAAMG,SAAS,gBAAGC,gBAAU,CACjC,CAAAC,IAAA,EAAgEC,GAAG,KAAA;EAAA,IAAlE;IAAEC,OAAO;AAAEC,IAAAA,IAAI,GAAG,EAAE;IAAEC,SAAS;IAAEC,KAAK;IAAEC,UAAU;IAAE,GAAGC,IAAAA;AAAK,GAAC,GAAAP,IAAA,CAAA;AAAA,EAAA,oBAC5DQ,cAAA,CAAA,MAAA,EAAA;AACEP,IAAAA,GAAG,EAAEA,GAAI;AACTG,IAAAA,SAAS,EAAEK,EAAE,CAACC,gBAAM,CAACC,IAAI,EAAE,CAACT,OAAO,IAAIQ,gBAAM,CAACE,KAAK,EAAER,SAAS,CAAE;AAChEC,IAAAA,KAAK,EAAE;AAAEQ,MAAAA,KAAK,EAAEV,IAAI;AAAEW,MAAAA,MAAM,EAAEX,IAAI;MAAE,GAAGE,KAAAA;KAAQ;AAC/C,IAAA,aAAA,EAAY,MAAM;IAClB,aAAaC,EAAAA,UAAU,EAAEK,IAAK;AAAA,IAAA,GAC1BJ,IAAI;AAAAQ,IAAAA,QAAA,EAEPb,OAAO,gBACNM,cAAA,CAACd,QAAQ,EAAA;AAACsB,MAAAA,QAAQ,EAAEb,IAAK;MAACc,IAAI,EAAEpB,kBAAkB,CAACK,OAAO,CAAA;AAAE,KAAE,CAAC,GAC7D,IAAA;AAAI,GACJ,CAAC,CAAA;AAAA,CAEX,EAAC;AAEDJ,SAAS,CAACoB,WAAW,GAAG,WAAW;;;;"}
+{"version":3,"file":"Identicon.cjs","sources":["../../../src/identicon/Identicon.tsx"],"sourcesContent":["import cn from 'classnames'\nimport { type ComponentPropsWithoutRef, forwardRef } from 'react'\nimport * as ReactJazzicon from 'react-jazzicon'\n\nimport styles from './Identicon.module.css'\n\nexport type IdenticonDataTestId = {\n  root?: string\n}\n\nexport type IdenticonProps = ComponentPropsWithoutRef<'span'> & {\n  /** Full address including `0x`; it seeds the pattern, so a trimmed one collapses distinct accounts onto the same picture. */\n  address?: string\n  /** Diameter in px. */\n  size?: number\n  dataTestId?: IdenticonDataTestId\n}\n\n// react-jazzicon's own `dist/index.js` re-exports its default via an\n// Object.defineProperty getter chaining to a nested submodule, rather than a\n// plain assignment. esbuild's CJS interop (used by Vite — including when this\n// package is only pulled in transitively, e.g. by a consuming app that has no\n// direct dependency on react-jazzicon) sets a self-referential `.default`\n// before copying the module's own properties, so that nested getter gets\n// shadowed: `ReactJazzicon.default` can end up being the raw CJS exports\n// object instead of the component. When that happens, the real component is\n// one level deeper, at `.default.default`.\nconst Jazzicon =\n  typeof ReactJazzicon.default === 'function'\n    ? ReactJazzicon.default\n    : (\n        ReactJazzicon.default as unknown as {\n          default: typeof ReactJazzicon.default\n        }\n      ).default\nconst { jsNumberForAddress } = ReactJazzicon\n\n/** Jazzicon avatar for a wallet address. */\nexport const Identicon = forwardRef<HTMLSpanElement, IdenticonProps>(\n  ({ address, size = 40, className, style, dataTestId, ...rest }, ref) => (\n    <span\n      ref={ref}\n      className={cn(styles.root, !address && styles.empty, className)}\n      style={{ width: size, height: size, ...style }}\n      aria-hidden='true'\n      data-testid={dataTestId?.root}\n      {...rest}\n    >\n      {address ? (\n        <Jazzicon diameter={size} seed={jsNumberForAddress(address)} />\n      ) : null}\n    </span>\n  ),\n)\n\nIdenticon.displayName = 'Identicon'\n"],"names":["Jazzicon","ReactJazzicon","default","jsNumberForAddress","Identicon","forwardRef","_ref","ref","address","size","className","style","dataTestId","rest","_jsx","cn","styles","root","empty","width","height","children","diameter","seed","displayName"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMA,QAAQ,GACZ,OAAOC,wBAAa,CAACC,OAAO,KAAK,UAAU,GACvCD,wBAAa,CAACC,OAAO,GAEnBD,wBAAa,CAACC,OAAO,CAGrBA,OAAO,CAAA;AACf,MAAM;AAAEC,EAAAA,kBAAAA;AAAmB,CAAC,GAAGF,wBAAa,CAAA;;AAE5C;AACO,MAAMG,SAAS,gBAAGC,gBAAU,CACjC,CAAAC,IAAA,EAAgEC,GAAG,KAAA;EAAA,IAAlE;IAAEC,OAAO;AAAEC,IAAAA,IAAI,GAAG,EAAE;IAAEC,SAAS;IAAEC,KAAK;IAAEC,UAAU;IAAE,GAAGC,IAAAA;AAAK,GAAC,GAAAP,IAAA,CAAA;AAAA,EAAA,oBAC5DQ,cAAA,CAAA,MAAA,EAAA;AACEP,IAAAA,GAAG,EAAEA,GAAI;AACTG,IAAAA,SAAS,EAAEK,EAAE,CAACC,gBAAM,CAACC,IAAI,EAAE,CAACT,OAAO,IAAIQ,gBAAM,CAACE,KAAK,EAAER,SAAS,CAAE;AAChEC,IAAAA,KAAK,EAAE;AAAEQ,MAAAA,KAAK,EAAEV,IAAI;AAAEW,MAAAA,MAAM,EAAEX,IAAI;MAAE,GAAGE,KAAAA;KAAQ;AAC/C,IAAA,aAAA,EAAY,MAAM;IAClB,aAAaC,EAAAA,UAAU,EAAEK,IAAK;AAAA,IAAA,GAC1BJ,IAAI;AAAAQ,IAAAA,QAAA,EAEPb,OAAO,gBACNM,cAAA,CAACd,QAAQ,EAAA;AAACsB,MAAAA,QAAQ,EAAEb,IAAK;MAACc,IAAI,EAAEpB,kBAAkB,CAACK,OAAO,CAAA;AAAE,KAAE,CAAC,GAC7D,IAAA;AAAI,GACJ,CAAC,CAAA;AAAA,CAEX,EAAC;AAEDJ,SAAS,CAACoB,WAAW,GAAG,WAAW;;;;"}