@uva-glass/component-library 1.1.0 → 1.3.0

package/dist/components/SelectListbox/components/SelectOption.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectOption.js","sources":["../../../../src/components/SelectListbox/components/SelectOption.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useEffect, useRef } from 'react';\n\nimport type { KeyboardEvent, ReactNode } from 'react';\nimport type { OptionValue } from 'components/SelectListbox/SelectProvider';\n\nimport { useSelect } from 'components/SelectListbox/SelectProvider';\nimport styles from 'components/SelectListbox/SelectListbox.module.css';\n\nexport interface SelectOptionProps {\n  option: OptionValue;\n  index: number;\n  key: string;\n  children: ReactNode;\n}\n\nexport const SelectOption = ({ option, index, children }: SelectOptionProps) => {\n  const selectOptionRef = useRef<HTMLLIElement>(null);\n  const { isOpen, activeIndex, setActiveIndex, selectedValue, setSelectedValue, setIsOpen, options } = useSelect();\n\n  const handleSelectOption = (aIndex: number) => {\n    setSelectedValue(options[aIndex]);\n    setIsOpen(false);\n  };\n\n  const onOptionKeyDown = (event: KeyboardEvent<HTMLLIElement>) => {\n    switch (event.key) {\n      case 'Tab':\n        event.preventDefault();\n        if (isOpen) {\n          setIsOpen(false);\n        }\n        break;\n      case 'ArrowDown':\n      case 'ArrowUp':\n        event.preventDefault();\n        if (!isOpen) {\n          return;\n        }\n        if (event.key === 'ArrowDown' && activeIndex < options.length - 1) {\n          setActiveIndex(Number((previousIndex: number) => previousIndex + 1));\n        }\n        if (event.key === 'ArrowUp' && activeIndex > 0) {\n          setActiveIndex(Number((previousIndex: number) => previousIndex - 1));\n        }\n        break;\n      case 'Enter':\n        event.preventDefault();\n        if (options?.length && activeIndex > -1 && !options[activeIndex].disabled) {\n          handleSelectOption(activeIndex);\n        }\n        break;\n      case 'Escape':\n        if (isOpen) {\n          event.stopPropagation();\n          setIsOpen(false);\n        }\n        break;\n    }\n  };\n\n  useEffect(() => {\n    if (index === activeIndex) {\n      isOpen ? selectOptionRef.current?.focus() : selectOptionRef.current?.blur();\n    }\n  }, [activeIndex, index, isOpen]);\n\n  useEffect(() => {\n    if (selectedValue.value === option.value) {\n      setActiveIndex(index);\n    }\n  }, [index, option.value, selectedValue.value, setActiveIndex]);\n\n  return (\n    <li\n      className={clsx(styles['select-listbox-option'], {\n        [styles['select-listbox-option--active']]: index === activeIndex,\n      })}\n      key={`${option.value}`}\n      {...(!option.disabled && {\n        onClick: () => setSelectedValue(option),\n        onKeyDown: onOptionKeyDown,\n        tabIndex: 0,\n        role: 'option',\n        'aria-selected': selectedValue.value === option.value,\n      })}\n      ref={selectOptionRef}\n    >\n      {children}\n    </li>\n  );\n};\n"],"names":["SelectOption","option","index","children","selectOptionRef","useRef","isOpen","activeIndex","setActiveIndex","selectedValue","setSelectedValue","setIsOpen","options","useSelect","handleSelectOption","aIndex","onOptionKeyDown","event","previousIndex","useEffect","_a","_b","jsx","clsx","styles"],"mappings":";;;;;AAgBO,MAAMA,IAAe,CAAC,EAAE,QAAAC,GAAQ,OAAAC,GAAO,UAAAC,QAAkC;AACxE,QAAAC,IAAkBC,EAAsB,IAAI,GAC5C,EAAE,QAAAC,GAAQ,aAAAC,GAAa,gBAAAC,GAAgB,eAAAC,GAAe,kBAAAC,GAAkB,WAAAC,GAAW,SAAAC,MAAYC,KAE/FC,IAAqB,CAACC,MAAmB;AAC5B,IAAAL,EAAAE,EAAQG,CAAM,CAAC,GAChCJ,EAAU,EAAK;AAAA,EAAA,GAGXK,IAAkB,CAACC,MAAwC;AAC/D,YAAQA,EAAM,KAAK;AAAA,MACjB,KAAK;AACH,QAAAA,EAAM,eAAe,GACjBX,KACFK,EAAU,EAAK;AAEjB;AAAA,MACF,KAAK;AAAA,MACL,KAAK;AAEH,YADAM,EAAM,eAAe,GACjB,CAACX;AACH;AAEF,QAAIW,EAAM,QAAQ,eAAeV,IAAcK,EAAQ,SAAS,KAC9DJ,EAAe,OAAO,CAACU,MAA0BA,IAAgB,CAAC,CAAC,GAEjED,EAAM,QAAQ,aAAaV,IAAc,KAC3CC,EAAe,OAAO,CAACU,MAA0BA,IAAgB,CAAC,CAAC;AAErE;AAAA,MACF,KAAK;AACH,QAAAD,EAAM,eAAe,GACjBL,KAAA,QAAAA,EAAS,UAAUL,IAAc,MAAM,CAACK,EAAQL,CAAW,EAAE,YAC/DO,EAAmBP,CAAW;AAEhC;AAAA,MACF,KAAK;AACH,QAAID,MACFW,EAAM,gBAAgB,GACtBN,EAAU,EAAK;AAEjB;AAAA,IACJ;AAAA,EAAA;AAGF,SAAAQ,EAAU,MAAM;;AACd,IAAIjB,MAAUK,MACZD,KAASc,IAAAhB,EAAgB,YAAhB,QAAAgB,EAAyB,WAAUC,IAAAjB,EAAgB,YAAhB,QAAAiB,EAAyB;AAAA,EAEtE,GAAA,CAACd,GAAaL,GAAOI,CAAM,CAAC,GAE/Ba,EAAU,MAAM;AACV,IAAAV,EAAc,UAAUR,EAAO,SACjCO,EAAeN,CAAK;AAAA,EACtB,GACC,CAACA,GAAOD,EAAO,OAAOQ,EAAc,OAAOD,CAAc,CAAC,GAG3D,gBAAAc;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAKC,EAAO,uBAAuB,GAAG;AAAA,QAC/C,CAACA,EAAO,+BAA+B,CAAC,GAAGtB,MAAUK;AAAA,MAAA,CACtD;AAAA,MAEA,GAAI,CAACN,EAAO,YAAY;AAAA,QACvB,SAAS,MAAMS,EAAiBT,CAAM;AAAA,QACtC,WAAWe;AAAA,QACX,UAAU;AAAA,QACV,MAAM;AAAA,QACN,iBAAiBP,EAAc,UAAUR,EAAO;AAAA,MAClD;AAAA,MACA,KAAKG;AAAA,MAEJ,UAAAD;AAAA,IAAA;AAAA,IAVI,GAAGF,EAAO,KAAK;AAAA,EAAA;AAa1B;"}
+{"version":3,"file":"SelectOption.js","sources":["../../../../src/components/SelectListbox/components/SelectOption.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useEffect, useRef } from 'react';\n\nimport type { KeyboardEvent, ReactNode } from 'react';\nimport type { OptionValue } from 'components/SelectListbox/SelectProvider';\n\nimport { useSelect } from 'components/SelectListbox/SelectProvider';\nimport styles from 'components/SelectListbox/SelectListbox.module.css';\n\nexport interface SelectOptionProps {\n  option: OptionValue;\n  index: number;\n  key: string;\n  children: ReactNode;\n}\n\nexport const SelectOption = ({ option, index, children }: SelectOptionProps) => {\n  const selectOptionRef = useRef<HTMLLIElement>(null);\n  const { isOpen, activeIndex, setActiveIndex, selectedValue, setSelectedValue, setIsOpen, options } = useSelect();\n\n  const handleSelectOption = (aIndex: number) => {\n    setSelectedValue(options[aIndex]);\n    setIsOpen(false);\n  };\n\n  const onOptionKeyDown = (event: KeyboardEvent<HTMLLIElement>) => {\n    switch (event.key) {\n      case 'Tab':\n        event.preventDefault();\n        if (isOpen) {\n          setIsOpen(false);\n        }\n        break;\n      case 'ArrowDown':\n      case 'ArrowUp':\n        event.preventDefault();\n        if (!isOpen) {\n          return;\n        }\n        if (event.key === 'ArrowDown' && activeIndex < options.length - 1) {\n          setActiveIndex(activeIndex + 1);\n        }\n        if (event.key === 'ArrowUp' && activeIndex > 0) {\n          setActiveIndex(activeIndex - 1);\n        }\n        break;\n      case 'Enter':\n        event.preventDefault();\n        if (options?.length && activeIndex > -1 && !options[activeIndex].disabled) {\n          handleSelectOption(activeIndex);\n        }\n        break;\n      case 'Escape':\n        if (isOpen) {\n          event.stopPropagation();\n          setIsOpen(false);\n        }\n        break;\n    }\n  };\n\n  useEffect(() => {\n    if (index === activeIndex) {\n      isOpen ? selectOptionRef.current?.focus() : selectOptionRef.current?.blur();\n    }\n  }, [activeIndex, index, isOpen]);\n\n  useEffect(() => {\n    if (selectedValue.value === option.value) {\n      setActiveIndex(index);\n    }\n  }, [index, option.value, selectedValue.value, setActiveIndex]);\n\n  return (\n    <li\n      className={clsx(styles['select-listbox-option'], {\n        [styles['select-listbox-option--active']]: index === activeIndex,\n      })}\n      key={`${option.value}`}\n      {...(!option.disabled && {\n        onClick: () => setSelectedValue(option),\n        onKeyDown: onOptionKeyDown,\n        tabIndex: 0,\n        role: 'option',\n        'aria-selected': selectedValue.value === option.value,\n      })}\n      ref={selectOptionRef}\n    >\n      {children}\n    </li>\n  );\n};\n"],"names":["SelectOption","option","index","children","selectOptionRef","useRef","isOpen","activeIndex","setActiveIndex","selectedValue","setSelectedValue","setIsOpen","options","useSelect","handleSelectOption","aIndex","onOptionKeyDown","event","useEffect","_a","_b","jsx","clsx","styles"],"mappings":";;;;;AAgBO,MAAMA,IAAe,CAAC,EAAE,QAAAC,GAAQ,OAAAC,GAAO,UAAAC,QAAkC;AACxE,QAAAC,IAAkBC,EAAsB,IAAI,GAC5C,EAAE,QAAAC,GAAQ,aAAAC,GAAa,gBAAAC,GAAgB,eAAAC,GAAe,kBAAAC,GAAkB,WAAAC,GAAW,SAAAC,MAAYC,KAE/FC,IAAqB,CAACC,MAAmB;AAC5B,IAAAL,EAAAE,EAAQG,CAAM,CAAC,GAChCJ,EAAU,EAAK;AAAA,EAAA,GAGXK,IAAkB,CAACC,MAAwC;AAC/D,YAAQA,EAAM,KAAK;AAAA,MACjB,KAAK;AACH,QAAAA,EAAM,eAAe,GACjBX,KACFK,EAAU,EAAK;AAEjB;AAAA,MACF,KAAK;AAAA,MACL,KAAK;AAEH,YADAM,EAAM,eAAe,GACjB,CAACX;AACH;AAEF,QAAIW,EAAM,QAAQ,eAAeV,IAAcK,EAAQ,SAAS,KAC9DJ,EAAeD,IAAc,CAAC,GAE5BU,EAAM,QAAQ,aAAaV,IAAc,KAC3CC,EAAeD,IAAc,CAAC;AAEhC;AAAA,MACF,KAAK;AACH,QAAAU,EAAM,eAAe,GACjBL,KAAA,QAAAA,EAAS,UAAUL,IAAc,MAAM,CAACK,EAAQL,CAAW,EAAE,YAC/DO,EAAmBP,CAAW;AAEhC;AAAA,MACF,KAAK;AACH,QAAID,MACFW,EAAM,gBAAgB,GACtBN,EAAU,EAAK;AAEjB;AAAA,IACJ;AAAA,EAAA;AAGF,SAAAO,EAAU,MAAM;;AACd,IAAIhB,MAAUK,MACZD,KAASa,IAAAf,EAAgB,YAAhB,QAAAe,EAAyB,WAAUC,IAAAhB,EAAgB,YAAhB,QAAAgB,EAAyB;AAAA,EAEtE,GAAA,CAACb,GAAaL,GAAOI,CAAM,CAAC,GAE/BY,EAAU,MAAM;AACV,IAAAT,EAAc,UAAUR,EAAO,SACjCO,EAAeN,CAAK;AAAA,EACtB,GACC,CAACA,GAAOD,EAAO,OAAOQ,EAAc,OAAOD,CAAc,CAAC,GAG3D,gBAAAa;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAKC,EAAO,uBAAuB,GAAG;AAAA,QAC/C,CAACA,EAAO,+BAA+B,CAAC,GAAGrB,MAAUK;AAAA,MAAA,CACtD;AAAA,MAEA,GAAI,CAACN,EAAO,YAAY;AAAA,QACvB,SAAS,MAAMS,EAAiBT,CAAM;AAAA,QACtC,WAAWe;AAAA,QACX,UAAU;AAAA,QACV,MAAM;AAAA,QACN,iBAAiBP,EAAc,UAAUR,EAAO;AAAA,MAClD;AAAA,MACA,KAAKG;AAAA,MAEJ,UAAAD;AAAA,IAAA;AAAA,IAVI,GAAGF,EAAO,KAAK;AAAA,EAAA;AAa1B;"}

package/dist/components/SelectListbox/components/SelectOptionBox.d.ts

@@ -1,8 +1,7 @@
-import { ReactNode } from 'react';
+import { CSSProperties, ReactNode } from 'react';
 
 export interface SelectOptionBoxProps {
-    optionPositionRight?: boolean;
-    maxOptionHeight?: string;
+    style: CSSProperties;
     children: ReactNode;
 }
-export declare const SelectOptionBox: ({ optionPositionRight, maxOptionHeight, children }: SelectOptionBoxProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const SelectOptionBox: import('react').ForwardRefExoticComponent<SelectOptionBoxProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/SelectListbox/components/SelectOptionBox.js

@@ -1,33 +1,20 @@
-import { jsx as l } from "react/jsx-runtime";
-import { useRef as m } from "react";
-import { c as a } from "../../../clsx-DB4S2d7J.js";
-import { s } from "../../../SelectListbox.module-wZfvJXBJ.js";
-import { useSelect as f } from "../SelectProvider.js";
-const d = ({ optionPositionRight: t = !1, maxOptionHeight: e, children: r }) => {
-  const { listboxId: o, isOpen: i } = f(), c = m(null);
-  return i ? /* @__PURE__ */ l(
+import { jsx as s } from "react/jsx-runtime";
+import { forwardRef as m, useRef as p } from "react";
+import { s as t } from "../../../SelectListbox.module-iJtzAajj.js";
+import { useSelect as d } from "../SelectProvider.js";
+const u = m((o, e) => {
+  const { style: i, children: l } = o, { listboxId: r, isOpen: c } = d(), n = p(null);
+  return /* @__PURE__ */ s(
     "div",
     {
-      className: a(s["select-listbox__wrapper"], {
-        [s["select-listbox__wrapper--align-right"]]: t
-      }),
-      style: { maxHeight: e || "" },
-      children: /* @__PURE__ */ l(
-        "ul",
-        {
-          className: s["select-listbox"],
-          role: "listbox",
-          ref: c,
-          id: o,
-          tabIndex: -1,
-          style: { maxHeight: e || "" },
-          children: r
-        }
-      )
+      className: t["select-listbox__wrapper"],
+      style: { ...i, visibility: c ? "visible" : "hidden" },
+      ...e && { ref: e },
+      children: /* @__PURE__ */ s("ul", { className: t["select-listbox"], role: "listbox", ref: n, id: r, tabIndex: -1, children: l })
     }
-  ) : null;
-};
+  );
+});
 export {
-  d as SelectOptionBox
+  u as SelectOptionBox
 };
 //# sourceMappingURL=SelectOptionBox.js.map

package/dist/components/SelectListbox/components/SelectOptionBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectOptionBox.js","sources":["../../../../src/components/SelectListbox/components/SelectOptionBox.tsx"],"sourcesContent":["import { useRef } from 'react';\nimport { clsx } from 'clsx';\n\nimport type { ReactNode } from 'react';\n\nimport styles from 'components/SelectListbox/SelectListbox.module.css';\nimport { useSelect } from 'components/SelectListbox/SelectProvider';\n\nexport interface SelectOptionBoxProps {\n  optionPositionRight?: boolean;\n  maxOptionHeight?: string;\n  children: ReactNode;\n}\n\nexport const SelectOptionBox = ({ optionPositionRight = false, maxOptionHeight, children }: SelectOptionBoxProps) => {\n  const { listboxId, isOpen } = useSelect();\n  const selectOptionBoxRef = useRef<HTMLUListElement>(null);\n\n  if (!isOpen) return null;\n\n  return (\n    <div\n      className={clsx(styles['select-listbox__wrapper'], {\n        [styles['select-listbox__wrapper--align-right']]: optionPositionRight,\n      })}\n      style={{ maxHeight: maxOptionHeight ? maxOptionHeight : '' }}\n    >\n      <ul\n        className={styles['select-listbox']}\n        role=\"listbox\"\n        ref={selectOptionBoxRef}\n        id={listboxId}\n        tabIndex={-1}\n        style={{ maxHeight: maxOptionHeight ? maxOptionHeight : '' }}\n      >\n        {children}\n      </ul>\n    </div>\n  );\n};\n"],"names":["SelectOptionBox","optionPositionRight","maxOptionHeight","children","listboxId","isOpen","useSelect","selectOptionBoxRef","useRef","jsx","clsx","styles"],"mappings":";;;;;AAcO,MAAMA,IAAkB,CAAC,EAAE,qBAAAC,IAAsB,IAAO,iBAAAC,GAAiB,UAAAC,QAAqC;AACnH,QAAM,EAAE,WAAAC,GAAW,QAAAC,EAAO,IAAIC,EAAU,GAClCC,IAAqBC,EAAyB,IAAI;AAExD,SAAKH,IAGH,gBAAAI;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAKC,EAAO,yBAAyB,GAAG;AAAA,QACjD,CAACA,EAAO,sCAAsC,CAAC,GAAGV;AAAA,MAAA,CACnD;AAAA,MACD,OAAO,EAAE,WAAWC,KAAoC,GAAG;AAAA,MAE3D,UAAA,gBAAAO;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWE,EAAO,gBAAgB;AAAA,UAClC,MAAK;AAAA,UACL,KAAKJ;AAAA,UACL,IAAIH;AAAA,UACJ,UAAU;AAAA,UACV,OAAO,EAAE,WAAWF,KAAoC,GAAG;AAAA,UAE1D,UAAAC;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAAA,IAlBgB;AAqBtB;"}
+{"version":3,"file":"SelectOptionBox.js","sources":["../../../../src/components/SelectListbox/components/SelectOptionBox.tsx"],"sourcesContent":["import { useRef, forwardRef } from 'react';\n\nimport type { CSSProperties, ReactNode } from 'react';\n\nimport styles from 'components/SelectListbox/SelectListbox.module.css';\nimport { useSelect } from 'components/SelectListbox/SelectProvider';\n\nexport interface SelectOptionBoxProps {\n  style: CSSProperties;\n  children: ReactNode;\n}\n\nexport const SelectOptionBox = forwardRef<HTMLDivElement, SelectOptionBoxProps>((props, ref) => {\n  const { style, children } = props;\n  const { listboxId, isOpen } = useSelect();\n  const selectOptionBoxRef = useRef<HTMLUListElement>(null);\n\n  return (\n    <div\n      className={styles['select-listbox__wrapper']}\n      style={{ ...style, visibility: isOpen ? 'visible' : 'hidden' }}\n      {...(ref && { ref: ref })}\n    >\n      <ul className={styles['select-listbox']} role=\"listbox\" ref={selectOptionBoxRef} id={listboxId} tabIndex={-1}>\n        {children}\n      </ul>\n    </div>\n  );\n});\n"],"names":["SelectOptionBox","forwardRef","props","ref","style","children","listboxId","isOpen","useSelect","selectOptionBoxRef","useRef","jsx","styles"],"mappings":";;;;AAYO,MAAMA,IAAkBC,EAAiD,CAACC,GAAOC,MAAQ;AACxF,QAAA,EAAE,OAAAC,GAAO,UAAAC,EAAa,IAAAH,GACtB,EAAE,WAAAI,GAAW,QAAAC,EAAO,IAAIC,EAAU,GAClCC,IAAqBC,EAAyB,IAAI;AAGtD,SAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAO,yBAAyB;AAAA,MAC3C,OAAO,EAAE,GAAGR,GAAO,YAAYG,IAAS,YAAY,SAAS;AAAA,MAC5D,GAAIJ,KAAO,EAAE,KAAAA,EAAS;AAAA,MAEvB,UAAC,gBAAAQ,EAAA,MAAA,EAAG,WAAWC,EAAO,gBAAgB,GAAG,MAAK,WAAU,KAAKH,GAAoB,IAAIH,GAAW,UAAU,IACvG,UAAAD,GACH;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}

package/dist/components/hooks/usePositionedFloaters.d.ts

@@ -0,0 +1,22 @@
+interface positionProps {
+    style: {
+        style: {
+            inset: string;
+        };
+    };
+    buttonStyle: {
+        buttonStyle: {
+            width: string;
+        };
+    };
+    status: boolean;
+}
+interface optionProps {
+    mouseEvent: 'click' | 'hover';
+    position: 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight';
+    offset: number;
+    maxFixedHeight?: `${number}${'px' | 'rem'}`;
+    horizontalPosition?: 'left' | 'right';
+}
+export declare function usePositionedFloaters<T extends HTMLElement = HTMLElement>(positionedElement: T | null, referenceElement: T | null, options: optionProps): positionProps;
+export {};

package/dist/components/hooks/usePositionedFloaters.js

@@ -0,0 +1,68 @@
+import { useState as h, useEffect as F } from "react";
+const u = 10, P = 80, l = 220;
+function p(d, i, e) {
+  const [v, H] = h(!1), w = {
+    inset: "0 auto auto 0",
+    opacity: 0,
+    maxHeight: "100%",
+    maxWidth: "100%",
+    overflowX: "hidden",
+    overflowY: "auto",
+    margin: "0rem"
+  }, [c, g] = h(w), [L, y] = h({ width: "auto" }), x = (t) => {
+    const o = parseFloat(getComputedStyle(document.documentElement).fontSize);
+    return t.indexOf("rem") !== -1 ? parseFloat(t) * o : parseFloat(t);
+  }, S = (t, o) => {
+    if (!t)
+      return 0;
+    const n = o === "bottom" ? window.innerHeight - t.bottom - e.offset - u : t.top - e.offset - u;
+    return !e.maxFixedHeight || x(e.maxFixedHeight) > n ? n : x(e.maxFixedHeight);
+  }, b = (t, o) => {
+    if (!t)
+      return 0;
+    const n = o === "left" ? window.innerWidth - t.left - u : t.right - u;
+    return n <= l ? l : n;
+  }, m = () => {
+    const t = d == null ? void 0 : d.getBoundingClientRect(), o = i == null ? void 0 : i.getBoundingClientRect();
+    let n = "bottom", a = "left";
+    return !o || !t ? w : (y({ width: t.width + "px" }), window.innerHeight - o.bottom - u < P && (n = "top"), (window.innerWidth - o.left - u < l || e.horizontalPosition === "right") && (a = "right"), {
+      inset: `${n === "bottom" ? o[n] + "px" : "auto"}
+              ${a === "right" ? window.innerWidth - o[a] + "px" : "auto"}
+              ${n === "top" ? window.innerHeight - o[n] + "px" : "auto"}
+              ${a === "left" ? o[a] + "px" : "auto"}`,
+      maxHeight: `${S(o, n)}px`,
+      maxWidth: `${b(o, a)}px`,
+      overflowX: "hidden",
+      overflowY: "auto",
+      opacity: 1,
+      margin: `${e.offset}px 0`
+    });
+  }, r = () => {
+    g({
+      ...c,
+      ...m()
+    }), H(!0);
+  }, f = () => {
+    v && g({
+      ...c,
+      ...m()
+    });
+  }, s = (t) => {
+    !i || i.contains(t.target) || !d || d.contains(t.target);
+  };
+  return F(() => (i !== null && (e.mouseEvent === "click" ? i.addEventListener("click", r) : (i.addEventListener("mouseenter", r), i.addEventListener("mouseleave", s)), document.addEventListener("mousedown", s), document.addEventListener("touchstart", s), window.addEventListener("resize", f)), () => {
+    i !== null && (e.mouseEvent === "click" ? i.removeEventListener("click", r) : (i.removeEventListener("mouseenter", r), i.removeEventListener("mouseleave", s)), document.removeEventListener("mousedown", s), document.removeEventListener("touchstart", s), window.removeEventListener("resize", f));
+  })), {
+    style: {
+      style: c
+    },
+    buttonStyle: {
+      buttonStyle: L
+    },
+    status: v
+  };
+}
+export {
+  p as usePositionedFloaters
+};
+//# sourceMappingURL=usePositionedFloaters.js.map

package/dist/components/hooks/usePositionedFloaters.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePositionedFloaters.js","sources":["../../../src/components/hooks/usePositionedFloaters.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\ninterface positionProps {\n  style: {\n    style: {\n      inset: string;\n    };\n  };\n  buttonStyle: {\n    buttonStyle: {\n      width: string;\n    };\n  };\n  status: boolean;\n}\n\ninterface optionProps {\n  mouseEvent: 'click' | 'hover';\n  position: 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight';\n  offset: number;\n  maxFixedHeight?: `${number}${'px' | 'rem'}`;\n  horizontalPosition?: 'left' | 'right';\n}\n\nconst BODY_PADDING = 10;\nconst MIN_HEIGHT = 80;\nconst MIN_WIDTH = 220;\n\nexport function usePositionedFloaters<T extends HTMLElement = HTMLElement>(\n  positionedElement: T | null,\n  referenceElement: T | null,\n  options: optionProps\n): positionProps {\n  const [status, setStatus] = useState(false);\n  const defaultStyle = {\n    inset: '0 auto auto 0',\n    opacity: 0,\n    maxHeight: '100%',\n    maxWidth: '100%',\n    overflowX: 'hidden',\n    overflowY: 'auto',\n    margin: '0rem',\n  };\n\n  const [style, setStyle] = useState(defaultStyle);\n  const [buttonStyle, setButtonStyle] = useState({ width: 'auto' });\n\n  const sizeToPx = (size: `${number}${'px' | 'rem'}`): number => {\n    const rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);\n    return size.indexOf('rem') !== -1 ? parseFloat(size) * rootFontSize : parseFloat(size);\n  };\n\n  const setHeight = (refRect: DOMRect, pos: string): number => {\n    if (!refRect) return 0;\n\n    const _maxHeight =\n      pos === 'bottom'\n        ? window.innerHeight - refRect.bottom - options.offset - BODY_PADDING\n        : refRect.top - options.offset - BODY_PADDING;\n\n    return !options.maxFixedHeight || sizeToPx(options.maxFixedHeight) > _maxHeight\n      ? _maxHeight\n      : sizeToPx(options.maxFixedHeight);\n  };\n\n  const setWidth = (refRect: DOMRect, pos: string): number => {\n    if (!refRect) return 0;\n\n    const _availableWidth =\n      pos === 'left' ? window.innerWidth - refRect.left - BODY_PADDING : refRect.right - BODY_PADDING;\n\n    return _availableWidth <= MIN_WIDTH ? MIN_WIDTH : _availableWidth;\n  };\n\n  const calcPosition = (): typeof defaultStyle => {\n    const positionedRect = (positionedElement as HTMLElement | null)?.getBoundingClientRect();\n    const referenceRect = (referenceElement as HTMLElement | null)?.getBoundingClientRect();\n    let yPos = 'bottom';\n    let xPos = 'left';\n\n    if (!referenceRect || !positionedRect) {\n      return defaultStyle;\n    }\n\n    setButtonStyle({ width: positionedRect.width + 'px' });\n\n    if (window.innerHeight - referenceRect.bottom - BODY_PADDING < MIN_HEIGHT) {\n      yPos = 'top';\n    }\n\n    if (window.innerWidth - referenceRect.left - BODY_PADDING < MIN_WIDTH || options.horizontalPosition === 'right') {\n      xPos = 'right';\n    }\n\n    return {\n      inset: `${yPos === 'bottom' ? referenceRect[yPos] + 'px' : 'auto'}\n              ${xPos === 'right' ? window.innerWidth - referenceRect[xPos] + 'px' : 'auto'}\n              ${yPos === 'top' ? window.innerHeight - referenceRect[yPos] + 'px' : 'auto'}\n              ${xPos === 'left' ? referenceRect[xPos] + 'px' : 'auto'}`,\n      maxHeight: `${setHeight(referenceRect, yPos)}px`,\n      maxWidth: `${setWidth(referenceRect, xPos)}px`,\n      overflowX: 'hidden',\n      overflowY: 'auto',\n      opacity: 1,\n      margin: `${options.offset}px 0`,\n    };\n  };\n\n  const handleMouseEvent = (): void => {\n    setStyle({\n      ...style,\n      ...calcPosition(),\n    });\n    setStatus(true);\n  };\n\n  const updatePosition = (): void => {\n    if (status) {\n      setStyle({\n        ...style,\n        ...calcPosition(),\n      });\n    }\n  };\n\n  const handleClickOutside = (evt: Event): void => {\n    if (\n      !referenceElement ||\n      (referenceElement as unknown as HTMLElement).contains(evt.target as Node) ||\n      !positionedElement ||\n      (positionedElement as unknown as HTMLElement).contains(evt.target as Node)\n    ) {\n      return;\n    }\n  };\n\n  useEffect(() => {\n    if (referenceElement !== null) {\n      if (options.mouseEvent === 'click') {\n        // eslint-disable-next-line no-extra-semi\n        (referenceElement as unknown as HTMLElement).addEventListener('click', handleMouseEvent);\n      } else {\n        // eslint-disable-next-line no-extra-semi\n        (referenceElement as unknown as HTMLElement).addEventListener('mouseenter', handleMouseEvent);\n        // eslint-disable-next-line no-extra-semi\n        (referenceElement as unknown as HTMLElement).addEventListener('mouseleave', handleClickOutside);\n      }\n      document.addEventListener('mousedown', handleClickOutside);\n      document.addEventListener('touchstart', handleClickOutside);\n      window.addEventListener('resize', updatePosition);\n    }\n\n    return () => {\n      if (referenceElement !== null) {\n        if (options.mouseEvent === 'click') {\n          // eslint-disable-next-line no-extra-semi\n          (referenceElement as unknown as HTMLElement).removeEventListener('click', handleMouseEvent);\n        } else {\n          // eslint-disable-next-line no-extra-semi\n          (referenceElement as unknown as HTMLElement).removeEventListener('mouseenter', handleMouseEvent);\n          // eslint-disable-next-line no-extra-semi\n          (referenceElement as unknown as HTMLElement).removeEventListener('mouseleave', handleClickOutside);\n        }\n        document.removeEventListener('mousedown', handleClickOutside);\n        document.removeEventListener('touchstart', handleClickOutside);\n        window.removeEventListener('resize', updatePosition);\n      }\n    };\n  });\n\n  return {\n    style: {\n      style,\n    },\n    buttonStyle: {\n      buttonStyle,\n    },\n    status,\n  };\n}\n"],"names":["BODY_PADDING","MIN_HEIGHT","MIN_WIDTH","usePositionedFloaters","positionedElement","referenceElement","options","status","setStatus","useState","defaultStyle","style","setStyle","buttonStyle","setButtonStyle","sizeToPx","size","rootFontSize","setHeight","refRect","pos","_maxHeight","setWidth","_availableWidth","calcPosition","positionedRect","referenceRect","yPos","xPos","handleMouseEvent","updatePosition","handleClickOutside","evt","useEffect"],"mappings":"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"}

package/dist/components/storyComponents/ClipboardButton/ClipboardButton.js

@@ -3,15 +3,15 @@ import { jsx as e } from "react/jsx-runtime";
 import { useState as i } from "react";
 const C = {
   "clipboard-button": "_clipboard-button_1ihmb_1"
-}, n = 2e3, c = ({ text: l }) => {
-  const [o, t] = i(!1);
+}, n = 2e3, a = ({ text: o }) => {
+  const [l, t] = i(!1);
   return /* @__PURE__ */ e("div", { style: { position: "relative" }, children: /* @__PURE__ */ e("button", { onClick: () => {
-    o || navigator.clipboard.writeText(l).then(() => {
+    l || navigator.clipboard.writeText(o).then(() => {
       t(!0), setTimeout(() => {
         t(!1);
       }, n);
     });
-  }, className: C["clipboard-button"], children: /* @__PURE__ */ e(
+  }, className: C["clipboard-button"], "aria-label": `Copy ${o}`, children: /* @__PURE__ */ e(
     "svg",
     {
       width: "15",
@@ -20,7 +20,7 @@ const C = {
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       className: "h-3 w-3",
-      children: o ? /* @__PURE__ */ e(
+      children: l ? /* @__PURE__ */ e(
         "path",
         {
           d: "M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z",
@@ -41,6 +41,6 @@ const C = {
   ) }) });
 };
 export {
-  c as ClipboardButton
+  a as ClipboardButton
 };
 //# sourceMappingURL=ClipboardButton.js.map

package/dist/components/storyComponents/ClipboardButton/ClipboardButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ClipboardButton.js","sources":["../../../../src/components/storyComponents/ClipboardButton/ClipboardButton.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport styles from './ClipboardButton.module.css';\n\ninterface ClipboardButtonProps {\n  text: string;\n}\n\nconst DELAY = 2000;\n\nexport const ClipboardButton = ({ text }: ClipboardButtonProps) => {\n  const [isCopied, setIsCopied] = useState(false);\n\n  const handleCopyClick = () => {\n    if (!isCopied) {\n      void navigator.clipboard.writeText(text).then(() => {\n        setIsCopied(true);\n        setTimeout(() => {\n          setIsCopied(false);\n        }, DELAY);\n      });\n    }\n  };\n\n  return (\n    <div style={{ position: 'relative' }}>\n      <button onClick={handleCopyClick} className={styles['clipboard-button']}>\n        <svg\n          width=\"15\"\n          height=\"15\"\n          viewBox=\"0 0 15 15\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          className=\"h-3 w-3\"\n        >\n          {isCopied ? (\n            <path\n              d=\"M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z\"\n              fill=\"currentColor\"\n              fillRule=\"evenodd\"\n              clipRule=\"evenodd\"\n            />\n          ) : (\n            <path\n              d=\"M1 9.50006C1 10.3285 1.67157 11.0001 2.5 11.0001H4L4 10.0001H2.5C2.22386 10.0001 2 9.7762 2 9.50006L2 2.50006C2 2.22392 2.22386 2.00006 2.5 2.00006L9.5 2.00006C9.77614 2.00006 10 2.22392 10 2.50006V4.00002H5.5C4.67158 4.00002 4 4.67159 4 5.50002V12.5C4 13.3284 4.67158 14 5.5 14H12.5C13.3284 14 14 13.3284 14 12.5V5.50002C14 4.67159 13.3284 4.00002 12.5 4.00002H11V2.50006C11 1.67163 10.3284 1.00006 9.5 1.00006H2.5C1.67157 1.00006 1 1.67163 1 2.50006V9.50006ZM5 5.50002C5 5.22388 5.22386 5.00002 5.5 5.00002H12.5C12.7761 5.00002 13 5.22388 13 5.50002V12.5C13 12.7762 12.7761 13 12.5 13H5.5C5.22386 13 5 12.7762 5 12.5V5.50002Z\"\n              fill=\"currentColor\"\n              fillRule=\"evenodd\"\n              clipRule=\"evenodd\"\n            />\n          )}\n        </svg>\n      </button>\n    </div>\n  );\n};\n"],"names":["DELAY","ClipboardButton","text","isCopied","setIsCopied","useState","jsx","styles"],"mappings":";;;;GAQMA,IAAQ,KAEDC,IAAkB,CAAC,EAAE,MAAAC,QAAiC;AACjE,QAAM,CAACC,GAAUC,CAAW,IAAIC,EAAS,EAAK;AAa9C,SACG,gBAAAC,EAAA,OAAA,EAAI,OAAO,EAAE,UAAU,WAAW,GACjC,UAAC,gBAAAA,EAAA,UAAA,EAAO,SAbY,MAAM;AAC5B,IAAKH,KACE,UAAU,UAAU,UAAUD,CAAI,EAAE,KAAK,MAAM;AAClD,MAAAE,EAAY,EAAI,GAChB,WAAW,MAAM;AACf,QAAAA,EAAY,EAAK;AAAA,SAChBJ,CAAK;AAAA,IAAA,CACT;AAAA,EACH,GAKoC,WAAWO,EAAO,kBAAkB,GACpE,UAAA,gBAAAD;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAM;AAAA,MACN,QAAO;AAAA,MACP,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,OAAM;AAAA,MACN,WAAU;AAAA,MAET,UACCH,IAAA,gBAAAG;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,GAAE;AAAA,UACF,MAAK;AAAA,UACL,UAAS;AAAA,UACT,UAAS;AAAA,QAAA;AAAA,MAAA,IAGX,gBAAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,GAAE;AAAA,UACF,MAAK;AAAA,UACL,UAAS;AAAA,UACT,UAAS;AAAA,QAAA;AAAA,MACX;AAAA,IAAA;AAAA,EAAA,EAGN,CAAA,EACF,CAAA;AAEJ;"}
+{"version":3,"file":"ClipboardButton.js","sources":["../../../../src/components/storyComponents/ClipboardButton/ClipboardButton.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport styles from './ClipboardButton.module.css';\n\ninterface ClipboardButtonProps {\n  text: string;\n}\n\nconst DELAY = 2000;\n\nexport const ClipboardButton = ({ text }: ClipboardButtonProps) => {\n  const [isCopied, setIsCopied] = useState(false);\n\n  const handleCopyClick = () => {\n    if (!isCopied) {\n      void navigator.clipboard.writeText(text).then(() => {\n        setIsCopied(true);\n        setTimeout(() => {\n          setIsCopied(false);\n        }, DELAY);\n      });\n    }\n  };\n\n  return (\n    <div style={{ position: 'relative' }}>\n      <button onClick={handleCopyClick} className={styles['clipboard-button']} aria-label={`Copy ${text}`}>\n        <svg\n          width=\"15\"\n          height=\"15\"\n          viewBox=\"0 0 15 15\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          className=\"h-3 w-3\"\n        >\n          {isCopied ? (\n            <path\n              d=\"M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z\"\n              fill=\"currentColor\"\n              fillRule=\"evenodd\"\n              clipRule=\"evenodd\"\n            />\n          ) : (\n            <path\n              d=\"M1 9.50006C1 10.3285 1.67157 11.0001 2.5 11.0001H4L4 10.0001H2.5C2.22386 10.0001 2 9.7762 2 9.50006L2 2.50006C2 2.22392 2.22386 2.00006 2.5 2.00006L9.5 2.00006C9.77614 2.00006 10 2.22392 10 2.50006V4.00002H5.5C4.67158 4.00002 4 4.67159 4 5.50002V12.5C4 13.3284 4.67158 14 5.5 14H12.5C13.3284 14 14 13.3284 14 12.5V5.50002C14 4.67159 13.3284 4.00002 12.5 4.00002H11V2.50006C11 1.67163 10.3284 1.00006 9.5 1.00006H2.5C1.67157 1.00006 1 1.67163 1 2.50006V9.50006ZM5 5.50002C5 5.22388 5.22386 5.00002 5.5 5.00002H12.5C12.7761 5.00002 13 5.22388 13 5.50002V12.5C13 12.7762 12.7761 13 12.5 13H5.5C5.22386 13 5 12.7762 5 12.5V5.50002Z\"\n              fill=\"currentColor\"\n              fillRule=\"evenodd\"\n              clipRule=\"evenodd\"\n            />\n          )}\n        </svg>\n      </button>\n    </div>\n  );\n};\n"],"names":["DELAY","ClipboardButton","text","isCopied","setIsCopied","useState","jsx","styles"],"mappings":";;;;GAQMA,IAAQ,KAEDC,IAAkB,CAAC,EAAE,MAAAC,QAAiC;AACjE,QAAM,CAACC,GAAUC,CAAW,IAAIC,EAAS,EAAK;AAa9C,2BACG,OAAI,EAAA,OAAO,EAAE,UAAU,cACtB,UAAC,gBAAAC,EAAA,UAAA,EAAO,SAbY,MAAM;AAC5B,IAAKH,KACE,UAAU,UAAU,UAAUD,CAAI,EAAE,KAAK,MAAM;AAClD,MAAAE,EAAY,EAAI,GAChB,WAAW,MAAM;AACf,QAAAA,EAAY,EAAK;AAAA,SAChBJ,CAAK;AAAA,IAAA,CACT;AAAA,EACH,GAKoC,WAAWO,EAAO,kBAAkB,GAAG,cAAY,QAAQL,CAAI,IAC/F,UAAA,gBAAAI;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAM;AAAA,MACN,QAAO;AAAA,MACP,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,OAAM;AAAA,MACN,WAAU;AAAA,MAET,UACCH,IAAA,gBAAAG;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,GAAE;AAAA,UACF,MAAK;AAAA,UACL,UAAS;AAAA,UACT,UAAS;AAAA,QAAA;AAAA,MAAA,IAGX,gBAAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,GAAE;AAAA,UACF,MAAK;AAAA,UACL,UAAS;AAAA,UACT,UAAS;AAAA,QAAA;AAAA,MACX;AAAA,IAAA;AAAA,EAAA,EAGN,CAAA,EACF,CAAA;AAEJ;"}