@lidofinance/lido-app-ui 1.9.0 → 1.10.0

package/dist/esm/hooks/overlayStack.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"overlayStack.mjs","sources":["../../../src/hooks/overlayStack.ts"],"sourcesContent":["type LayerOptions = { capture?: boolean }\n\n/** Each layer gets a document listener for `type` that only fires while it's the newest layer in its stack. */\nexport const createLayerStack = <K extends keyof DocumentEventMap>(\n  type: K,\n  { capture = false }: LayerOptions = {},\n) => {\n  const layers: object[] = []\n  return (onEvent: (event: DocumentEventMap[K]) => void) => {\n    const layer = {}\n    layers.push(layer)\n    const listener = (event: DocumentEventMap[K]) => {\n      if (layers[layers.length - 1] === layer) onEvent(event)\n    }\n    document.addEventListener(type, listener, capture)\n    return () => {\n      document.removeEventListener(type, listener, capture)\n      layers.splice(layers.indexOf(layer), 1)\n    }\n  }\n}\n"],"names":["createLayerStack","type","capture","arguments","length","undefined","layers","onEvent","layer","push","listener","event","document","addEventListener","removeEventListener","splice","indexOf"],"mappings":"AAEA;MACaA,gBAAgB,GAAG,UAC9BC,IAAO,EAEJ;EAAA,IADH;AAAEC,IAAAA,OAAO,GAAG,KAAA;AAAoB,GAAC,GAAAC,SAAA,CAAAC,MAAA,GAAAD,CAAAA,IAAAA,SAAA,CAAAE,CAAAA,CAAAA,KAAAA,SAAA,GAAAF,SAAA,CAAG,CAAA,CAAA,GAAA,EAAE,CAAA;EAEtC,MAAMG,MAAgB,GAAG,EAAE,CAAA;AAC3B,EAAA,OAAQC,OAA6C,IAAK;IACxD,MAAMC,KAAK,GAAG,EAAE,CAAA;AAChBF,IAAAA,MAAM,CAACG,IAAI,CAACD,KAAK,CAAC,CAAA;IAClB,MAAME,QAAQ,GAAIC,KAA0B,IAAK;AAC/C,MAAA,IAAIL,MAAM,CAACA,MAAM,CAACF,MAAM,GAAG,CAAC,CAAC,KAAKI,KAAK,EAAED,OAAO,CAACI,KAAK,CAAC,CAAA;KACxD,CAAA;IACDC,QAAQ,CAACC,gBAAgB,CAACZ,IAAI,EAAES,QAAQ,EAAER,OAAO,CAAC,CAAA;AAClD,IAAA,OAAO,MAAM;MACXU,QAAQ,CAACE,mBAAmB,CAACb,IAAI,EAAES,QAAQ,EAAER,OAAO,CAAC,CAAA;MACrDI,MAAM,CAACS,MAAM,CAACT,MAAM,CAACU,OAAO,CAACR,KAAK,CAAC,EAAE,CAAC,CAAC,CAAA;KACxC,CAAA;GACF,CAAA;AACH;;;;"}

package/dist/esm/hooks/useBodyScrollLock.mjs

@@ -0,0 +1,46 @@
+import { useEffect } from 'react';
+
+// Ref-counted so stacked overlays only restore on the last unlock.
+let lockCount = 0;
+let saved = {
+  overflow: '',
+  paddingRight: ''
+};
+const lock = () => {
+  if (lockCount === 0) {
+    const {
+      body,
+      documentElement
+    } = document;
+    saved = {
+      overflow: body.style.overflow,
+      paddingRight: body.style.paddingRight
+    };
+    const scrollbarWidth = window.innerWidth - documentElement.clientWidth;
+    if (scrollbarWidth > 0) {
+      const current = parseFloat(getComputedStyle(body).paddingRight) || 0;
+      body.style.paddingRight = `${current + scrollbarWidth}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;
+  }
+};
+
+/** Locks body scroll while `active`, compensating the scrollbar width. */
+const useBodyScrollLock = active => {
+  useEffect(() => {
+    if (!active) return;
+    lock();
+    return unlock;
+  }, [active]);
+};
+
+export { useBodyScrollLock };
+//# sourceMappingURL=useBodyScrollLock.mjs.map

package/dist/esm/hooks/useBodyScrollLock.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBodyScrollLock.mjs","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,SAAS,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;;;;"}

package/dist/esm/hooks/useEscape.mjs

@@ -0,0 +1,21 @@
+import { useRef, useEffect } from 'react';
+import { createLayerStack } from './overlayStack.mjs';
+
+const listenEscapeLayer = createLayerStack('keydown');
+
+/** Calls `handler` on Escape while `active`; with nested overlays only the newest one handles it. */
+const useEscape = (active, handler) => {
+  const handlerRef = useRef(handler);
+  handlerRef.current = handler;
+  useEffect(() => {
+    if (!active) return;
+    return listenEscapeLayer(event => {
+      if (event.key !== 'Escape' || event.defaultPrevented) return;
+      event.preventDefault();
+      handlerRef.current(event);
+    });
+  }, [active]);
+};
+
+export { useEscape };
+//# sourceMappingURL=useEscape.mjs.map

package/dist/esm/hooks/useEscape.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEscape.mjs","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,gBAAgB,CAAC,SAAS,CAAC,CAAA;;AAErD;MACaC,SAAS,GAAGA,CACvBC,MAAe,EACfC,OAAuC,KACpC;AACH,EAAA,MAAMC,UAAU,GAAGC,MAAM,CAACF,OAAO,CAAC,CAAA;EAClCC,UAAU,CAACE,OAAO,GAAGH,OAAO,CAAA;AAE5BI,EAAAA,SAAS,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;;;;"}

package/dist/esm/hooks/useFocusTrap.mjs

@@ -0,0 +1,62 @@
+import { useRef, useEffect } from 'react';
+import { createLayerStack } from './overlayStack.mjs';
+
+const listenTrapLayer = 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 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 optionsRef = useRef(options);
+  optionsRef.current = options;
+  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');
+    }
+    target.focus({
+      preventScroll: true
+    });
+    const onKeyDown = event => {
+      if (event.key !== 'Tab') return;
+      const items = getTabbable(container);
+      if (items.length === 0) {
+        event.preventDefault();
+        container.focus();
+        return;
+      }
+      const first = items[0];
+      const last = items[items.length - 1];
+      const current = document.activeElement;
+      if (!container.contains(current)) {
+        event.preventDefault();
+        (event.shiftKey ? last : first).focus();
+      } else if (event.shiftKey && (current === first || current === container)) {
+        event.preventDefault();
+        last.focus();
+      } else if (!event.shiftKey && current === last) {
+        event.preventDefault();
+        first.focus();
+      }
+    };
+    const stopListening = listenTrapLayer(onKeyDown);
+    return () => {
+      stopListening();
+      if ((optionsRef.current.restoreFocus ?? true) && previous && document.contains(previous)) {
+        previous.focus({
+          preventScroll: true
+        });
+      }
+    };
+  }, [element, active]);
+};
+
+export { useFocusTrap };
+//# sourceMappingURL=useFocusTrap.mjs.map

package/dist/esm/hooks/useFocusTrap.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFocusTrap.mjs","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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"}

package/dist/esm/hooks/useIsomorphicLayoutEffect.mjs

@@ -0,0 +1,6 @@
+import { useEffect, useLayoutEffect } from 'react';
+
+const useIsomorphicLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;
+
+export { useIsomorphicLayoutEffect };
+//# sourceMappingURL=useIsomorphicLayoutEffect.mjs.map

package/dist/esm/hooks/useIsomorphicLayoutEffect.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIsomorphicLayoutEffect.mjs","sources":["../../../src/hooks/useIsomorphicLayoutEffect.ts"],"sourcesContent":["import { useEffect, useLayoutEffect } from 'react'\n\nexport const useIsomorphicLayoutEffect =\n  typeof window === 'undefined' ? useEffect : useLayoutEffect\n"],"names":["useIsomorphicLayoutEffect","window","useEffect","useLayoutEffect"],"mappings":";;AAEO,MAAMA,yBAAyB,GACpC,OAAOC,MAAM,KAAK,WAAW,GAAGC,SAAS,GAAGC;;;;"}

package/dist/esm/hooks/useOutsideClick.mjs

@@ -1,19 +1,21 @@
-import { useEffect } from 'react';
+import { useRef, useEffect } from 'react';
+import { createLayerStack } from './overlayStack.mjs';
 
-const useOutsideClick = (ref, onOutside, enabled) => {
+const listenOutsideLayer = 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) => {
+  const handlerRef = useRef(onOutside);
+  handlerRef.current = onOutside;
   useEffect(() => {
-    if (!enabled) return;
-    const handlePointerDown = event => {
-      const element = ref.current;
-      if (!element) return;
-      if (event.target instanceof Node && element.contains(event.target)) {
-        return;
-      }
-      onOutside();
-    };
-    document.addEventListener('pointerdown', handlePointerDown, true);
-    return () => document.removeEventListener('pointerdown', handlePointerDown, true);
-  }, [ref, onOutside, enabled]);
+    if (!enabled || !element) return;
+    return listenOutsideLayer(event => {
+      if (event.target instanceof Node && element.contains(event.target)) return;
+      handlerRef.current(event);
+    });
+  }, [element, enabled]);
 };
 
 export { useOutsideClick };

package/dist/esm/hooks/useOutsideClick.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useOutsideClick.mjs","sources":["../../../src/hooks/useOutsideClick.ts"],"sourcesContent":["import { useEffect, type RefObject } from 'react'\n\nexport const useOutsideClick = (\n  ref: RefObject<HTMLElement | null>,\n  onOutside: () => void,\n  enabled: boolean,\n) => {\n  useEffect(() => {\n    if (!enabled) return\n\n    const handlePointerDown = (event: PointerEvent) => {\n      const element = ref.current\n      if (!element) return\n      if (event.target instanceof Node && element.contains(event.target)) {\n        return\n      }\n      onOutside()\n    }\n\n    document.addEventListener('pointerdown', handlePointerDown, true)\n    return () =>\n      document.removeEventListener('pointerdown', handlePointerDown, true)\n  }, [ref, onOutside, enabled])\n}\n"],"names":["useOutsideClick","ref","onOutside","enabled","useEffect","handlePointerDown","event","element","current","target","Node","contains","document","addEventListener","removeEventListener"],"mappings":";;AAEO,MAAMA,eAAe,GAAGA,CAC7BC,GAAkC,EAClCC,SAAqB,EACrBC,OAAgB,KACb;AACHC,EAAAA,SAAS,CAAC,MAAM;IACd,IAAI,CAACD,OAAO,EAAE,OAAA;IAEd,MAAME,iBAAiB,GAAIC,KAAmB,IAAK;AACjD,MAAA,MAAMC,OAAO,GAAGN,GAAG,CAACO,OAAO,CAAA;MAC3B,IAAI,CAACD,OAAO,EAAE,OAAA;AACd,MAAA,IAAID,KAAK,CAACG,MAAM,YAAYC,IAAI,IAAIH,OAAO,CAACI,QAAQ,CAACL,KAAK,CAACG,MAAM,CAAC,EAAE;AAClE,QAAA,OAAA;AACF,OAAA;AACAP,MAAAA,SAAS,EAAE,CAAA;KACZ,CAAA;IAEDU,QAAQ,CAACC,gBAAgB,CAAC,aAAa,EAAER,iBAAiB,EAAE,IAAI,CAAC,CAAA;IACjE,OAAO,MACLO,QAAQ,CAACE,mBAAmB,CAAC,aAAa,EAAET,iBAAiB,EAAE,IAAI,CAAC,CAAA;GACvE,EAAE,CAACJ,GAAG,EAAEC,SAAS,EAAEC,OAAO,CAAC,CAAC,CAAA;AAC/B;;;;"}
+{"version":3,"file":"useOutsideClick.mjs","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,gBAAgB,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,MAAM,CAACH,SAAS,CAAC,CAAA;EACpCE,UAAU,CAACE,OAAO,GAAGJ,SAAS,CAAA;AAE9BK,EAAAA,SAAS,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;;;;"}

package/dist/esm/icon-button/IconButton.mjs

@@ -1,10 +1,11 @@
+import { forwardRef } from 'react';
 import cn from 'classnames';
 import { CounterSlot } from '../counter/CounterSlot.mjs';
 import styles from './IconButton.module.css.mjs';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { IconLoaderCircle } from '../icons/components/base/IconLoaderCircle.mjs';
 
-const IconButton = _ref => {
+const IconButton = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     className,
     type = 'button',
@@ -17,6 +18,7 @@ const IconButton = _ref => {
     ...rest
   } = _ref;
   return /*#__PURE__*/jsxs("button", {
+    ref: ref,
     type: type,
     disabled: disabled || loading,
     "aria-busy": loading || undefined,
@@ -36,7 +38,8 @@ const IconButton = _ref => {
       children: counter
     })]
   });
-};
+});
+IconButton.displayName = 'IconButton';
 
 export { IconButton };
 //# sourceMappingURL=IconButton.mjs.map

package/dist/esm/icon-button/IconButton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.mjs","sources":["../../../src/icon-button/IconButton.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes, ReactNode } from 'react'\n\nimport cn from 'classnames'\n\nimport { CounterSlot } from '../counter/CounterSlot'\nimport { IconLoaderCircle } from '../icons'\nimport styles from './IconButton.module.css'\n\nexport type IconButtonVariant = 'outline' | 'ghost'\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 = ({\n  className,\n  type = 'button',\n  variant = 'outline',\n  loading = false,\n  disabled = false,\n  icon,\n  counter,\n  dataTestId,\n  ...rest\n}: IconButtonProps) => (\n  <button\n    type={type}\n    disabled={disabled || loading}\n    aria-busy={loading || undefined}\n    className={cn(\n      styles.button,\n      styles[variant],\n      loading && styles.loading,\n      className,\n    )}\n    data-testid={dataTestId?.root}\n    {...rest}\n  >\n    {loading ? (\n      <IconLoaderCircle className={styles.spinner} aria-hidden='true' />\n    ) : (\n      <span\n        className={styles.icon}\n        aria-hidden='true'\n        data-testid={dataTestId?.icon}\n      >\n        {icon}\n      </span>\n    )}\n    <CounterSlot dataTestId={dataTestId?.counter}>{counter}</CounterSlot>\n  </button>\n)\n"],"names":["IconButton","_ref","className","type","variant","loading","disabled","icon","counter","dataTestId","rest","_jsxs","undefined","cn","styles","button","root","children","_jsx","IconLoaderCircle","spinner","CounterSlot"],"mappings":";;;;;;AA6BO,MAAMA,UAAU,GAAGC,IAAA,IAAA;EAAA,IAAC;IACzBC,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;AACY,GAAC,GAAAT,IAAA,CAAA;AAAA,EAAA,oBAChBU,IAAA,CAAA,QAAA,EAAA;AACER,IAAAA,IAAI,EAAEA,IAAK;IACXG,QAAQ,EAAEA,QAAQ,IAAID,OAAQ;IAC9B,WAAWA,EAAAA,OAAO,IAAIO,SAAU;AAChCV,IAAAA,SAAS,EAAEW,EAAE,CACXC,MAAM,CAACC,MAAM,EACbD,MAAM,CAACV,OAAO,CAAC,EACfC,OAAO,IAAIS,MAAM,CAACT,OAAO,EACzBH,SACF,CAAE;IACF,aAAaO,EAAAA,UAAU,EAAEO,IAAK;AAAA,IAAA,GAC1BN,IAAI;AAAAO,IAAAA,QAAA,EAEPZ,CAAAA,OAAO,gBACNa,GAAA,CAACC,gBAAgB,EAAA;MAACjB,SAAS,EAAEY,MAAM,CAACM,OAAQ;MAAC,aAAY,EAAA,MAAA;KAAQ,CAAC,gBAElEF,GAAA,CAAA,MAAA,EAAA;MACEhB,SAAS,EAAEY,MAAM,CAACP,IAAK;AACvB,MAAA,aAAA,EAAY,MAAM;MAClB,aAAaE,EAAAA,UAAU,EAAEF,IAAK;AAAAU,MAAAA,QAAA,EAE7BV,IAAAA;AAAI,KACD,CACP,eACDW,GAAA,CAACG,WAAW,EAAA;MAACZ,UAAU,EAAEA,UAAU,EAAED,OAAQ;AAAAS,MAAAA,QAAA,EAAET,OAAAA;AAAO,KAAc,CAAC,CAAA;AAAA,GAC/D,CAAC,CAAA;AAAA;;;;"}
+{"version":3,"file":"IconButton.mjs","sources":["../../../src/icon-button/IconButton.tsx"],"sourcesContent":["import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react'\n\nimport cn from 'classnames'\n\nimport { CounterSlot } from '../counter/CounterSlot'\nimport { IconLoaderCircle } from '../icons'\nimport styles from './IconButton.module.css'\n\nexport type IconButtonVariant = 'outline' | 'ghost' | 'surface'\n\nexport type IconButtonDataTestId = {\n  root?: string\n  icon?: string\n  counter?: string\n}\n\nexport type IconButtonProps = Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  'aria-label'\n> & {\n  'aria-label': string\n  icon: ReactNode\n  variant?: IconButtonVariant\n  loading?: boolean\n  /** Corner slot, aria-hidden: put the count into `aria-label`. */\n  counter?: ReactNode\n  dataTestId?: IconButtonDataTestId\n}\n\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n  (\n    {\n      className,\n      type = 'button',\n      variant = 'outline',\n      loading = false,\n      disabled = false,\n      icon,\n      counter,\n      dataTestId,\n      ...rest\n    },\n    ref,\n  ) => (\n    <button\n      ref={ref}\n      type={type}\n      disabled={disabled || loading}\n      aria-busy={loading || undefined}\n      className={cn(\n        styles.button,\n        styles[variant],\n        loading && styles.loading,\n        className,\n      )}\n      data-testid={dataTestId?.root}\n      {...rest}\n    >\n      {loading ? (\n        <IconLoaderCircle className={styles.spinner} aria-hidden='true' />\n      ) : (\n        <span\n          className={styles.icon}\n          aria-hidden='true'\n          data-testid={dataTestId?.icon}\n        >\n          {icon}\n        </span>\n      )}\n      <CounterSlot dataTestId={dataTestId?.counter}>{counter}</CounterSlot>\n    </button>\n  ),\n)\n\nIconButton.displayName = 'IconButton'\n"],"names":["IconButton","forwardRef","_ref","ref","className","type","variant","loading","disabled","icon","counter","dataTestId","rest","_jsxs","undefined","cn","styles","button","root","children","_jsx","IconLoaderCircle","spinner","CounterSlot","displayName"],"mappings":";;;;;;;AA6BO,MAAMA,UAAU,gBAAGC,UAAU,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,IAAA,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,MAAM,CAACC,MAAM,EACbD,MAAM,CAACV,OAAO,CAAC,EACfC,OAAO,IAAIS,MAAM,CAACT,OAAO,EACzBH,SACF,CAAE;IACF,aAAaO,EAAAA,UAAU,EAAEO,IAAK;AAAA,IAAA,GAC1BN,IAAI;AAAAO,IAAAA,QAAA,EAEPZ,CAAAA,OAAO,gBACNa,GAAA,CAACC,gBAAgB,EAAA;MAACjB,SAAS,EAAEY,MAAM,CAACM,OAAQ;MAAC,aAAY,EAAA,MAAA;KAAQ,CAAC,gBAElEF,GAAA,CAAA,MAAA,EAAA;MACEhB,SAAS,EAAEY,MAAM,CAACP,IAAK;AACvB,MAAA,aAAA,EAAY,MAAM;MAClB,aAAaE,EAAAA,UAAU,EAAEF,IAAK;AAAAU,MAAAA,QAAA,EAE7BV,IAAAA;AAAI,KACD,CACP,eACDW,GAAA,CAACG,WAAW,EAAA;MAACZ,UAAU,EAAEA,UAAU,EAAED,OAAQ;AAAAS,MAAAA,QAAA,EAAET,OAAAA;AAAO,KAAc,CAAC,CAAA;AAAA,GAC/D,CAAC,CAAA;AAAA,CAEb,EAAC;AAEDV,UAAU,CAACwB,WAAW,GAAG,YAAY;;;;"}

package/dist/esm/icon-button/IconButton.module.css.mjs

@@ -1,4 +1,4 @@
-const styles = {"button":"IconButton-module_button__5QpG9","icon":"IconButton-module_icon__1WMNC","spinner":"IconButton-module_spinner__-fwrf","spin":"IconButton-module_spin__eNilo","outline":"IconButton-module_outline__91r6g","ghost":"IconButton-module_ghost__WYnGy","loading":"IconButton-module_loading__v67XX"};
+const styles = {"button":"IconButton-module_button__5QpG9","icon":"IconButton-module_icon__1WMNC","spinner":"IconButton-module_spinner__-fwrf","spin":"IconButton-module_spin__eNilo","outline":"IconButton-module_outline__91r6g","surface":"IconButton-module_surface__GQ6lQ","ghost":"IconButton-module_ghost__WYnGy","loading":"IconButton-module_loading__v67XX"};
 
 export { styles as default };
 //# sourceMappingURL=IconButton.module.css.mjs.map