@uva-glass/component-library 3.34.7 → 3.34.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/assets/TextArea.css +1 -1
  2. package/dist/components/TextArea/TextArea.js +17 -17
  3. package/dist/components/hooks/usePositionedFloaters.d.ts +1 -0
  4. package/dist/components/hooks/usePositionedFloaters.js +18 -17
  5. package/dist/components/hooks/usePositionedFloaters.js.map +1 -1
  6. package/package.json +3 -3
package/dist/assets/TextArea.css CHANGED
@@ -1 +1 @@
1
- ._text-area__wrapper_iztus_1{display:flex;flex-direction:column;gap:.5rem}._text-area__header_iztus_7{align-items:flex-end;display:flex;justify-content:space-between}._text-area__label-wrapper_iztus_13{display:flex;flex-direction:column;gap:.5rem}._text-area__label_iztus_13{font-family:inherit;font-size:inherit;font-weight:var(--semibold);line-height:var(--line-height-s)}._text-area__sub-label_iztus_26{color:var(--new-color-grey-700);font-size:var(--font-size-text-non-essential)}._text-area__word-count_iztus_31{color:var(--new-color-grey-600);font-size:var(--font-size-text-non-essential)}._text-area__word-count--alert_iztus_36{color:var(--new-color-red-600);font-weight:700}._text-area_iztus_1{border-radius:.5rem;font-family:inherit;font-size:inherit;min-height:5.25rem;overflow:hidden;padding:.5rem;resize:none;white-space:pre-wrap;width:100%;word-wrap:break-word}
1
+ ._text-area__wrapper_2mhm2_1{display:flex;flex-direction:column;gap:.5rem}._text-area__header_2mhm2_7{align-items:flex-end;display:flex;justify-content:space-between}._text-area__label-wrapper_2mhm2_13{display:flex;flex-direction:column;gap:.5rem}._text-area__label_2mhm2_13{font-family:inherit;font-size:inherit;font-weight:var(--semibold)}._text-area__sub-label_2mhm2_25{color:var(--new-color-grey-700);font-size:var(--font-size-text-non-essential)}._text-area__word-count_2mhm2_30{color:var(--new-color-grey-600);font-size:var(--font-size-text-non-essential)}._text-area__word-count--alert_2mhm2_35{color:var(--new-color-red-600);font-weight:700}._text-area_2mhm2_1{border-radius:.5rem;font-family:inherit;font-size:inherit;min-height:5.25rem;overflow:hidden;padding:.5rem;resize:none;white-space:pre-wrap;width:100%;word-wrap:break-word}
package/dist/components/TextArea/TextArea.js CHANGED
@@ -1,28 +1,28 @@
1
1
  import { jsxs as r, jsx as _ } from "react/jsx-runtime";
2
- import { useRef as x, useState as p } from "react";
3
- import { c as d } from "../../clsx-OuTLNxxd.js";
2
+ import { useRef as h, useState as u } from "react";
3
+ import { c as p } from "../../clsx-OuTLNxxd.js";
4
4
  import '../../assets/TextArea.css';const e = {
5
- "text-area__wrapper": "_text-area__wrapper_iztus_1",
6
- "text-area__header": "_text-area__header_iztus_7",
7
- "text-area__label-wrapper": "_text-area__label-wrapper_iztus_13",
8
- "text-area__label": "_text-area__label_iztus_13",
9
- "text-area__sub-label": "_text-area__sub-label_iztus_26",
10
- "text-area__word-count": "_text-area__word-count_iztus_31",
11
- "text-area__word-count--alert": "_text-area__word-count--alert_iztus_36",
12
- "text-area": "_text-area_iztus_1"
5
+ "text-area__wrapper": "_text-area__wrapper_2mhm2_1",
6
+ "text-area__header": "_text-area__header_2mhm2_7",
7
+ "text-area__label-wrapper": "_text-area__label-wrapper_2mhm2_13",
8
+ "text-area__label": "_text-area__label_2mhm2_13",
9
+ "text-area__sub-label": "_text-area__sub-label_2mhm2_25",
10
+ "text-area__word-count": "_text-area__word-count_2mhm2_30",
11
+ "text-area__word-count--alert": "_text-area__word-count--alert_2mhm2_35",
12
+ "text-area": "_text-area_2mhm2_1"
13
13
  };
14
- function b({ onChange: u, label: l, subLabel: s, maxCharacters: a = 0, defaultValue: n = "" }) {
15
- const t = x(null), [c, o] = p(n.length), i = () => {
16
- t.current && (t.current.style.height = "auto", t.current.style.height = `${t.current.scrollHeight}px`, o(t.current.value.length), u(t.current.value.trim()));
14
+ function b({ onChange: o, label: l, subLabel: n, maxCharacters: a = 0, defaultValue: s = "" }) {
15
+ const t = h(null), [c, x] = u(s.length), m = () => {
16
+ t.current && (t.current.style.height = "auto", t.current.style.height = `${t.current.scrollHeight}px`, x(t.current.value.length), o(t.current.value.trim()));
17
17
  };
18
18
  return /* @__PURE__ */ r("div", { className: e["text-area__wrapper"], children: [
19
19
  (l || a > 0) && /* @__PURE__ */ r("div", { className: e["text-area__header"], children: [
20
20
  /* @__PURE__ */ r("span", { className: e["text-area__label-wrapper"], children: [
21
21
  l && /* @__PURE__ */ _("span", { className: e["text-area__label"], children: l }),
22
- s && /* @__PURE__ */ _("span", { className: e["text-area__sub-label"], children: s })
22
+ n && /* @__PURE__ */ _("span", { className: e["text-area__sub-label"], children: n })
23
23
  ] }),
24
24
  a > 0 && /* @__PURE__ */ r("div", { className: e["text-area__word-count"], children: [
25
- /* @__PURE__ */ _("span", { className: d({ [e["text-area__word-count--alert"]]: c === a }), children: c }),
25
+ /* @__PURE__ */ _("span", { className: p({ [e["text-area__word-count--alert"]]: c === a }), children: c }),
26
26
  " / ",
27
27
  a
28
28
  ] })
@@ -33,8 +33,8 @@ function b({ onChange: u, label: l, subLabel: s, maxCharacters: a = 0, defaultVa
33
33
  ref: t,
34
34
  className: e["text-area"],
35
35
  maxLength: a > 0 ? a : void 0,
36
- onInput: i,
37
- defaultValue: n
36
+ onInput: m,
37
+ defaultValue: s
38
38
  }
39
39
  )
40
40
  ] });
package/dist/components/hooks/usePositionedFloaters.d.ts CHANGED
@@ -5,6 +5,7 @@ interface positionProps {
5
5
  };
6
6
  };
7
7
  status: boolean;
8
+ updatePosition: () => void;
8
9
  }
9
10
  interface optionProps {
10
11
  mouseEvent: 'click' | 'hover';
package/dist/components/hooks/usePositionedFloaters.js CHANGED
@@ -1,8 +1,8 @@
1
- import { useState as L, useEffect as P } from "react";
1
+ import { useState as H, useEffect as P } from "react";
2
2
  import { useDebounce as $ } from "./useDebounce.js";
3
3
  const a = 10, F = 90, r = 300, y = 0, B = 768, k = 2;
4
4
  function M(c, n, i) {
5
- const [m, H] = L(!1), w = {
5
+ const [m, p] = H(!1), w = {
6
6
  inset: "0 auto auto 0",
7
7
  opacity: 0,
8
8
  maxHeight: "100%",
@@ -11,30 +11,30 @@ function M(c, n, i) {
11
11
  overflowX: "hidden",
12
12
  overflowY: "auto",
13
13
  margin: "0rem"
14
- }, [l, v] = L(w), h = (t) => {
14
+ }, [l, v] = H(w), h = (t) => {
15
15
  const e = parseFloat(getComputedStyle(document.documentElement).fontSize);
16
16
  return t.indexOf("rem") !== -1 ? parseFloat(t) * e : parseFloat(t);
17
- }, p = (t, e) => {
17
+ }, b = (t, e) => {
18
18
  if (!t) return 0;
19
19
  const o = e === "bottom" ? window.innerHeight - t.bottom - i.offset - a : t.top - i.offset - a;
20
20
  return !i.maxFixedHeight || h(i.maxFixedHeight) > o ? o : h(i.maxFixedHeight);
21
- }, b = (t, e) => {
21
+ }, E = (t, e) => {
22
22
  if (!t) return 0;
23
23
  const o = e === "left" ? window.innerWidth - t.left - a : t.right - a;
24
24
  return o <= r ? r : o;
25
- }, E = (t, e, o) => o ? `${t.left - Math.abs(e.width - t.width) / k}px` : `${t.left}px`, f = () => {
25
+ }, W = (t, e, o) => o ? `${t.left - Math.abs(e.width - t.width) / k}px` : `${t.left}px`, f = () => {
26
26
  const t = c?.getBoundingClientRect(), e = n?.getBoundingClientRect();
27
27
  let o = "bottom", d = "left";
28
- const g = window.matchMedia(
28
+ const L = window.matchMedia(
29
29
  `(max-width: ${i.mobileBreakpoint ? h(i.mobileBreakpoint) : B}px)`
30
30
  ).matches;
31
- return !e || !t ? w : (window.innerHeight - e.bottom - a < F && (o = "top"), (window.innerWidth - e.left - a < r || i.horizontalPosition === "right") && !g && (d = "right"), {
31
+ return !e || !t ? w : (window.innerHeight - e.bottom - a < F && (o = "top"), (window.innerWidth - e.left - a < r || i.horizontalPosition === "right") && !L && (d = "right"), {
32
32
  inset: `${o === "bottom" ? e[o] + "px" : "auto"}
33
33
  ${d === "right" ? window.innerWidth - e[d] + "px" : "auto"}
34
34
  ${o === "top" ? window.innerHeight - e[o] + "px" : "auto"}
35
- ${d === "left" ? E(e, t, g) : "auto"}`,
36
- maxHeight: `${p(e, o)}px`,
37
- maxWidth: `${b(e, d)}px`,
35
+ ${d === "left" ? W(e, t, L) : "auto"}`,
36
+ maxHeight: `${b(e, o)}px`,
37
+ maxWidth: `${E(e, d)}px`,
38
38
  minWidth: i.fullWidth ? e.width : r,
39
39
  overflowX: "hidden",
40
40
  overflowY: "auto",
@@ -45,22 +45,23 @@ function M(c, n, i) {
45
45
  v({
46
46
  ...l,
47
47
  ...f()
48
- }), H(!0);
49
- }, W = () => {
48
+ }), p(!0);
49
+ }, x = () => {
50
50
  m && v({
51
51
  ...l,
52
52
  ...f()
53
53
  });
54
54
  }, s = (t) => {
55
55
  !n || n.contains(t.target) || !c || c.contains(t.target);
56
- }, x = $(W, y);
57
- return P(() => (n !== null && (i.mouseEvent === "click" ? n.addEventListener("click", u) : (n.addEventListener("mouseenter", u), n.addEventListener("mouseleave", s)), document.addEventListener("mousedown", s), document.addEventListener("touchstart", s), window.addEventListener("resize", x)), () => {
58
- n !== null && (i.mouseEvent === "click" ? n.removeEventListener("click", u) : (n.removeEventListener("mouseenter", u), n.removeEventListener("mouseleave", s)), document.removeEventListener("mousedown", s), document.removeEventListener("touchstart", s), window.removeEventListener("resize", x));
56
+ }, g = $(x, y);
57
+ return P(() => (n !== null && (i.mouseEvent === "click" ? n.addEventListener("click", u) : (n.addEventListener("mouseenter", u), n.addEventListener("mouseleave", s)), document.addEventListener("mousedown", s), document.addEventListener("touchstart", s), window.addEventListener("resize", g)), () => {
58
+ n !== null && (i.mouseEvent === "click" ? n.removeEventListener("click", u) : (n.removeEventListener("mouseenter", u), n.removeEventListener("mouseleave", s)), document.removeEventListener("mousedown", s), document.removeEventListener("touchstart", s), window.removeEventListener("resize", g));
59
59
  })), {
60
60
  style: {
61
61
  style: l
62
62
  },
63
- status: m
63
+ status: m,
64
+ updatePosition: x
64
65
  };
65
66
  }
66
67
  export {
package/dist/components/hooks/usePositionedFloaters.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"usePositionedFloaters.js","sources":["../../../src/components/hooks/usePositionedFloaters.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport { useDebounce } from './useDebounce';\n\ninterface positionProps {\n style: {\n style: {\n inset: 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 mobileBreakpoint?: `${number}${'px' | 'rem'}`;\n fullWidth: boolean;\n}\n\nconst BODY_PADDING = 10;\nconst MIN_HEIGHT = 90;\nconst MIN_WIDTH = 300;\nconst DEBOUNCE_DELAY = 0;\nconst MOBILE_BREAKPOINT = 768;\nconst HALF = 2;\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 minWidth: MIN_WIDTH,\n overflowX: 'hidden',\n overflowY: 'auto',\n margin: '0rem',\n };\n\n const [style, setStyle] = useState(defaultStyle);\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 setLeft = (refRect: DOMRect, posRect: DOMRect, isMobile: boolean) => {\n if (isMobile) {\n return `${refRect.left - Math.abs(posRect.width - refRect.width) / HALF}px`;\n } else {\n return `${refRect.left}px`;\n }\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 const isMobile = window.matchMedia(\n `(max-width: ${options.mobileBreakpoint ? sizeToPx(options.mobileBreakpoint) : MOBILE_BREAKPOINT}px)`\n ).matches;\n\n if (!referenceRect || !positionedRect) {\n return defaultStyle;\n }\n\n if (window.innerHeight - referenceRect.bottom - BODY_PADDING < MIN_HEIGHT) {\n yPos = 'top';\n }\n\n if (\n (window.innerWidth - referenceRect.left - BODY_PADDING < MIN_WIDTH || options.horizontalPosition === 'right') &&\n !isMobile\n ) {\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' ? setLeft(referenceRect, positionedRect, isMobile) : 'auto'}`,\n maxHeight: `${setHeight(referenceRect, yPos)}px`,\n maxWidth: `${setWidth(referenceRect, xPos)}px`,\n minWidth: options.fullWidth ? referenceRect.width : MIN_WIDTH,\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 const debouncedUpdatePosition = useDebounce(updatePosition, DEBOUNCE_DELAY);\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', debouncedUpdatePosition);\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', debouncedUpdatePosition);\n }\n };\n });\n\n return {\n style: {\n style,\n },\n status,\n };\n}\n"],"names":["BODY_PADDING","MIN_HEIGHT","MIN_WIDTH","DEBOUNCE_DELAY","MOBILE_BREAKPOINT","HALF","usePositionedFloaters","positionedElement","referenceElement","options","status","setStatus","useState","defaultStyle","style","setStyle","sizeToPx","size","rootFontSize","setHeight","refRect","pos","_maxHeight","setWidth","_availableWidth","setLeft","posRect","isMobile","calcPosition","positionedRect","referenceRect","yPos","xPos","handleMouseEvent","updatePosition","handleClickOutside","evt","debouncedUpdatePosition","useDebounce","useEffect"],"mappings":"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"}
1
+ {"version":3,"file":"usePositionedFloaters.js","sources":["../../../src/components/hooks/usePositionedFloaters.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport { useDebounce } from './useDebounce';\n\ninterface positionProps {\n style: {\n style: {\n inset: string;\n };\n };\n status: boolean;\n updatePosition: () => void;\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 mobileBreakpoint?: `${number}${'px' | 'rem'}`;\n fullWidth: boolean;\n}\n\nconst BODY_PADDING = 10;\nconst MIN_HEIGHT = 90;\nconst MIN_WIDTH = 300;\nconst DEBOUNCE_DELAY = 0;\nconst MOBILE_BREAKPOINT = 768;\nconst HALF = 2;\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 minWidth: MIN_WIDTH,\n overflowX: 'hidden',\n overflowY: 'auto',\n margin: '0rem',\n };\n\n const [style, setStyle] = useState(defaultStyle);\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 setLeft = (refRect: DOMRect, posRect: DOMRect, isMobile: boolean) => {\n if (isMobile) {\n return `${refRect.left - Math.abs(posRect.width - refRect.width) / HALF}px`;\n } else {\n return `${refRect.left}px`;\n }\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 const isMobile = window.matchMedia(\n `(max-width: ${options.mobileBreakpoint ? sizeToPx(options.mobileBreakpoint) : MOBILE_BREAKPOINT}px)`\n ).matches;\n\n if (!referenceRect || !positionedRect) {\n return defaultStyle;\n }\n\n if (window.innerHeight - referenceRect.bottom - BODY_PADDING < MIN_HEIGHT) {\n yPos = 'top';\n }\n\n if (\n (window.innerWidth - referenceRect.left - BODY_PADDING < MIN_WIDTH || options.horizontalPosition === 'right') &&\n !isMobile\n ) {\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' ? setLeft(referenceRect, positionedRect, isMobile) : 'auto'}`,\n maxHeight: `${setHeight(referenceRect, yPos)}px`,\n maxWidth: `${setWidth(referenceRect, xPos)}px`,\n minWidth: options.fullWidth ? referenceRect.width : MIN_WIDTH,\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 const debouncedUpdatePosition = useDebounce(updatePosition, DEBOUNCE_DELAY);\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', debouncedUpdatePosition);\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', debouncedUpdatePosition);\n }\n };\n });\n\n return {\n style: {\n style,\n },\n status,\n updatePosition,\n };\n}\n"],"names":["BODY_PADDING","MIN_HEIGHT","MIN_WIDTH","DEBOUNCE_DELAY","MOBILE_BREAKPOINT","HALF","usePositionedFloaters","positionedElement","referenceElement","options","status","setStatus","useState","defaultStyle","style","setStyle","sizeToPx","size","rootFontSize","setHeight","refRect","pos","_maxHeight","setWidth","_availableWidth","setLeft","posRect","isMobile","calcPosition","positionedRect","referenceRect","yPos","xPos","handleMouseEvent","updatePosition","handleClickOutside","evt","debouncedUpdatePosition","useDebounce","useEffect"],"mappings":"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"}
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@uva-glass/component-library",
3
3
  "author": "Team Glass - Frontend vrienden",
4
4
  "private": false,
5
- "version": "3.34.7",
5
+ "version": "3.34.8",
6
6
  "type": "module",
7
7
  "main": "dist/index.js",
8
8
  "types": "dist/index.d.ts",
@@ -80,7 +80,7 @@
80
80
  "npm-run-all2": "^8.0.4",
81
81
  "react": "^19.1.0",
82
82
  "react-dom": "^19.1.0",
83
- "react-router": "^7.6.3",
83
+ "react-router": "^7.7.0",
84
84
  "semantic-release": "^24.2.7",
85
85
  "storybook": "^9.0.17",
86
86
  "style-dictionary": "^5.0.1",
@@ -90,7 +90,7 @@
90
90
  "stylelint-order": "^7.0.0",
91
91
  "ts-node": "^10.9.2",
92
92
  "typescript": "^5.8.3",
93
- "vite": "^7.0.4",
93
+ "vite": "^7.0.5",
94
94
  "vite-plugin-dts": "^4.5.4",
95
95
  "vite-plugin-lib-inject-css": "^2.2.2",
96
96
  "vite-plugin-static-copy": "^3.1.1",