@uva-glass/component-library 3.50.14 → 3.50.15

package/dist/components/MultiSelectBox/MultiSelectBox.js

@@ -1,5 +1,5 @@
 import { jsxs as f, jsx as u } from "react/jsx-runtime";
-import { useId as q, useState as d, useRef as O, useCallback as g, useEffect as I } from "react";
+import { useId as q, useState as d, useRef as A, useCallback as g, useEffect as I } from "react";
 import { c as h } from "../../clsx-OuTLNxxd.js";
 import { Icon as G } from "../Icon/Icon.js";
 import { Checkbox as J } from "../Checkbox/Checkbox.js";
@@ -22,19 +22,19 @@ import '../../assets/MultiSelectBox.css';const r = {
   onChange: m,
   defaultSelectedItems: y,
   labelSuffix: E = "geselecteerd",
-  disabled: A = !1,
-  fullWidth: P = !1,
-  darkBorder: B = !1,
-  maxOptionHeight: C,
-  optionPositionRight: L
+  disabled: P = !1,
+  fullWidth: B = !1,
+  darkBorder: C = !1,
+  maxOptionHeight: L,
+  optionPositionRight: F
 }) => {
-  const _ = q(), [n, w] = d(y || []), [S, v] = d(y?.length || 0), [s, a] = d(!1), [b, x] = d(-1), k = O(null), N = O(null), [F, K] = d(null), [R, $] = d(null), { style: D, updatePosition: M } = Q(F, R, {
+  const _ = q(), [n, w] = d(y || []), [S, v] = d(y?.length || 0), [s, a] = d(!1), [b, x] = d(-1), k = A(null), N = A(null), [K, R] = d(null), [$, D] = d(null), { style: M, updatePosition: O } = Q(K, $, {
     mouseEvent: "click",
     offset: 4,
-    maxFixedHeight: C,
-    horizontalPosition: L ? "right" : "left",
+    maxFixedHeight: L,
+    horizontalPosition: F ? "right" : "left",
     mobileBreakpoint: "28rem",
-    fullWidth: P
+    fullWidth: B
   }), p = g(
     ({ target: e }) => {
       !e || !k.current || k.current.contains(e) || a(!1);
@@ -94,7 +94,7 @@ import '../../assets/MultiSelectBox.css';const r = {
   ), z = (e, t) => {
     if (t.disabled || e.target.tagName === "INPUT") return;
     const o = n.some((i) => i.value === t.value) ? n.filter((i) => i.value !== t.value) : [...n, t];
-    w(o), v(o.length), m(o);
+    w(o), v(o.length), m(o), O();
   }, U = g(
     (e) => {
       const { checked: t, value: l } = e.target;
@@ -104,7 +104,7 @@ import '../../assets/MultiSelectBox.css';const r = {
         i && o.push(i);
       } else
         o = o.filter((i) => i.value !== l);
-      w(o), v(o.length), m(o), M();
+      w(o), v(o.length), m(o), O();
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [c, n, m]
@@ -123,7 +123,7 @@ import '../../assets/MultiSelectBox.css';const r = {
       "button",
       {
         className: h(r["multi-select-box-trigger"], {
-          [r["multi-select-box-trigger--darkBorder"]]: B
+          [r["multi-select-box-trigger--darkBorder"]]: C
         }),
         type: "button",
         onClick: () => {
@@ -133,9 +133,9 @@ import '../../assets/MultiSelectBox.css';const r = {
         "aria-expanded": s,
         "aria-haspopup": "listbox",
         "aria-label": `${S} ${E}`,
-        disabled: A,
+        disabled: P,
         ...s && { "aria-controls": _ },
-        ref: $,
+        ref: D,
         children: [
           /* @__PURE__ */ f("span", { className: r["multi-select-box-trigger-label"], children: [
             S,
@@ -160,9 +160,9 @@ import '../../assets/MultiSelectBox.css';const r = {
       {
         id: _,
         className: h(r["multi-select-box-listbox--wrapper"]),
-        style: { ...D.style, visibility: s ? "visible" : "hidden" },
+        style: { ...M.style, visibility: s ? "visible" : "hidden" },
         role: "listbox",
-        ref: K,
+        ref: R,
         children: /* @__PURE__ */ u("ul", { className: r["multi-select-box-listbox"], ref: N, children: c.map(({ label: e, value: t, disabled: l }, o) => /* @__PURE__ */ u(
           "li",
           {

package/dist/components/MultiSelectBox/MultiSelectBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelectBox.js","sources":["../../../src/components/MultiSelectBox/MultiSelectBox.tsx"],"sourcesContent":["import { useRef, useState, useId, useEffect, useCallback } from 'react';\nimport { clsx } from 'clsx';\n\nimport type { KeyboardEvent, ChangeEvent, MouseEvent } from 'react';\n\nimport styles from './MultiSelectBox.module.css';\n\nimport { Icon } from 'components/Icon';\nimport { Checkbox } from 'components/Checkbox';\nimport { usePositionedFloaters } from 'components/hooks/usePositionedFloaters';\n\nexport type MultiSelectData = {\n  label: string;\n  value: string | number;\n  disabled?: boolean;\n};\n\nexport interface MultiSelectBoxProps {\n  /** Array of label, values pairs */\n  selectData: MultiSelectData[];\n  /** Retuns selected label, values */\n  onChange: (values: MultiSelectData[]) => void;\n  /** Array of label, value pairs that should be check by default */\n  defaultSelectedItems?: MultiSelectData[];\n  /** Suffix label in the selectbutton '[count] selected' */\n  labelSuffix?: string;\n  /** Disables the multiselect */\n  disabled?: boolean;\n  /** If true sets the option dropdown min-width to the width of the select button. */\n  fullWidth?: boolean;\n  /** Dark border. */\n  darkBorder?: boolean;\n  /** The max height of the options. */\n  maxOptionHeight?: `${number}${'px' | 'rem'}`;\n  /** `true` to align the right side of the options with the select box; otherwise, `false` to align on the left side. */\n  optionPositionRight?: boolean;\n}\n\nexport const MultiSelectBox = ({\n  selectData,\n  onChange,\n  defaultSelectedItems,\n  labelSuffix = 'geselecteerd',\n  disabled = false,\n  fullWidth = false,\n  darkBorder = false,\n  maxOptionHeight,\n  optionPositionRight,\n}: MultiSelectBoxProps) => {\n  const multiselectboxId = useId();\n  const [selectedItems, setSelectedItems] = useState<MultiSelectData[]>(defaultSelectedItems || []);\n  const [selectedItemsCount, setSelectedItemsCount] = useState(defaultSelectedItems?.length || 0);\n  const [isOpen, setIsOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState(-1);\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const optionListRef = useRef<HTMLUListElement>(null);\n\n  const [positionElement, setPositionElement] = useState<HTMLElement | null>(null);\n  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);\n  const { style: positionStyle, updatePosition } = usePositionedFloaters(positionElement, referenceElement, {\n    mouseEvent: 'click',\n    position: 'bottomLeft',\n    offset: 4,\n    maxFixedHeight: maxOptionHeight,\n    horizontalPosition: optionPositionRight ? 'right' : 'left',\n    mobileBreakpoint: '28rem',\n    fullWidth,\n  });\n\n  const onMouseEventOutside = useCallback(\n    ({ target }: Event | MouseEvent) => {\n      if (!target || !wrapperRef.current) return;\n\n      if (!wrapperRef.current.contains(target as Node)) {\n        setIsOpen(false);\n      }\n    },\n    [setIsOpen]\n  );\n\n  const onTriggerKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLButtonElement>) => {\n      switch (event.key) {\n        case 'Enter':\n          event.preventDefault();\n          setIsOpen(true);\n          break;\n        case 'Escape':\n          if (isOpen) {\n            event.stopPropagation();\n            setIsOpen(false);\n          }\n          break;\n        default:\n          break;\n      }\n    },\n    [isOpen]\n  );\n\n  const onOptionKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLLIElement>) => {\n      if (!isOpen) return;\n\n      switch (event.key) {\n        case 'ArrowDown':\n          event.preventDefault();\n          setActiveIndex((prev) => {\n            let nextIndex = prev;\n            do {\n              nextIndex = nextIndex < selectData.length - 1 ? nextIndex + 1 : 0;\n            } while (selectData[nextIndex]?.disabled);\n            return nextIndex;\n          });\n          break;\n        case 'ArrowUp':\n          event.preventDefault();\n          setActiveIndex((prev) => {\n            let nextIndex = prev;\n            do {\n              nextIndex = nextIndex <= 0 ? selectData.length - 1 : nextIndex - 1;\n            } while (selectData[nextIndex]?.disabled);\n            return nextIndex;\n          });\n          break;\n        case 'Enter': {\n          event.preventDefault();\n          const selectedItem = selectData[activeIndex];\n          if (!selectedItem || selectedItem.disabled) break;\n          const isAlreadySelected = selectedItems.some((item) => item.value === selectedItem.value);\n          const updatedSelectedItems = isAlreadySelected\n            ? selectedItems.filter((item) => item.value !== selectedItem.value)\n            : [...selectedItems, selectedItem];\n\n          setSelectedItems(updatedSelectedItems);\n          setSelectedItemsCount(updatedSelectedItems.length);\n          onChange(updatedSelectedItems);\n          break;\n        }\n        case 'Tab':\n          event.preventDefault();\n          setIsOpen(false);\n          break;\n        case 'Escape':\n          event.stopPropagation();\n          setIsOpen(false);\n          break;\n        default:\n          break;\n      }\n    },\n    [activeIndex, isOpen, selectData, selectedItems, onChange]\n  );\n\n  const onOptionClick = (event: MouseEvent<HTMLLIElement>, option: MultiSelectData) => {\n    if (option.disabled) return;\n\n    // Prevent toggle if click originated from the checkbox\n    if ((event.target as HTMLElement).tagName === 'INPUT') return;\n\n    const isAlreadySelected = selectedItems.some((item) => item.value === option.value);\n    const updatedSelectedItems = isAlreadySelected\n      ? selectedItems.filter((item) => item.value !== option.value)\n      : [...selectedItems, option];\n\n    setSelectedItems(updatedSelectedItems);\n    setSelectedItemsCount(updatedSelectedItems.length);\n    onChange(updatedSelectedItems);\n  };\n\n  const handleSelect = useCallback(\n    (event: ChangeEvent<HTMLInputElement>) => {\n      const { checked, value } = event.target;\n      let updatedSelectedItems = [...selectedItems];\n\n      if (checked) {\n        const selectedItem = selectData.find((item) => item.value === value);\n        if (selectedItem) {\n          updatedSelectedItems.push(selectedItem);\n        }\n      } else {\n        updatedSelectedItems = updatedSelectedItems.filter((item) => item.value !== value);\n      }\n\n      setSelectedItems(updatedSelectedItems);\n      setSelectedItemsCount(updatedSelectedItems.length);\n      onChange(updatedSelectedItems);\n      updatePosition();\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [selectData, selectedItems, onChange]\n  );\n\n  useEffect(() => {\n    if (isOpen) {\n      setActiveIndex(0);\n    }\n  }, [isOpen]);\n\n  useEffect(() => {\n    const activeOption = optionListRef.current?.children[activeIndex] as HTMLElement;\n    activeOption?.focus();\n  }, [activeIndex]);\n\n  useEffect(() => {\n    if (!isOpen) return;\n\n    document.addEventListener('click', onMouseEventOutside, true);\n    document.addEventListener('scroll', onMouseEventOutside, true);\n\n    return () => {\n      document.removeEventListener('click', onMouseEventOutside, true);\n      document.removeEventListener('scroll', onMouseEventOutside, true);\n    };\n  }, [onMouseEventOutside, isOpen]);\n\n  return (\n    <div className={styles['multi-select-box-wrapper']} ref={wrapperRef}>\n      <button\n        className={clsx(styles['multi-select-box-trigger'], {\n          [styles['multi-select-box-trigger--darkBorder']]: darkBorder,\n        })}\n        type=\"button\"\n        onClick={() => {\n          setIsOpen(!isOpen);\n        }}\n        onKeyDown={onTriggerKeyDown}\n        aria-expanded={isOpen}\n        aria-haspopup=\"listbox\"\n        aria-label={`${selectedItemsCount} ${labelSuffix}`}\n        disabled={disabled}\n        {...(isOpen && { 'aria-controls': multiselectboxId })}\n        ref={setReferenceElement}\n      >\n        <span className={styles['multi-select-box-trigger-label']}>\n          {selectedItemsCount} {labelSuffix}\n        </span>\n        <Icon\n          className={clsx(styles['multi-select-box-trigger-icon'], {\n            [styles['multi-select-box-trigger-icon--open']]: isOpen,\n          })}\n          name=\"CheveronDown\"\n          size={16}\n        />\n      </button>\n\n      <div\n        id={multiselectboxId}\n        className={clsx(styles['multi-select-box-listbox--wrapper'])}\n        style={{ ...positionStyle.style, visibility: isOpen ? 'visible' : 'hidden' }}\n        role=\"listbox\"\n        ref={setPositionElement}\n      >\n        <ul className={styles['multi-select-box-listbox']} ref={optionListRef}>\n          {selectData.map(({ label, value, disabled }, index) => (\n            <li\n              className={clsx(styles['multi-select-box-listbox-option'], {\n                [styles['multi-select-box-listbox-option--active']]: index === activeIndex,\n                [styles['multi-select-box-listbox-option--disabled']]: disabled,\n              })}\n              key={value}\n              role=\"option\"\n              onKeyDown={onOptionKeyDown}\n              onClick={(event) => onOptionClick(event, { label, value, disabled })}\n              onMouseOver={() => setActiveIndex(index)}\n              onFocus={() => setActiveIndex(index)}\n              tabIndex={0}\n              aria-selected={selectedItems.some((item) => item.value === value)}\n            >\n              <label htmlFor={label} className={styles['multi-select-box-listbox-option-content']} tabIndex={-1}>\n                <Checkbox\n                  id={`${label}-${multiselectboxId}`}\n                  onChange={handleSelect}\n                  value={value}\n                  tabIndex={-1}\n                  disabled={disabled}\n                  checked={selectedItems.some((item) => item.value === value)}\n                />\n                <span>{label}</span>\n              </label>\n            </li>\n          ))}\n        </ul>\n      </div>\n    </div>\n  );\n};\n"],"names":["MultiSelectBox","selectData","onChange","defaultSelectedItems","labelSuffix","disabled","fullWidth","darkBorder","maxOptionHeight","optionPositionRight","multiselectboxId","useId","selectedItems","setSelectedItems","useState","selectedItemsCount","setSelectedItemsCount","isOpen","setIsOpen","activeIndex","setActiveIndex","wrapperRef","useRef","optionListRef","positionElement","setPositionElement","referenceElement","setReferenceElement","positionStyle","updatePosition","usePositionedFloaters","onMouseEventOutside","useCallback","target","onTriggerKeyDown","event","onOptionKeyDown","prev","nextIndex","selectedItem","updatedSelectedItems","item","onOptionClick","option","handleSelect","checked","value","useEffect","styles","jsxs","clsx","jsx","Icon","label","index","Checkbox"],"mappings":"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"}
+{"version":3,"file":"MultiSelectBox.js","sources":["../../../src/components/MultiSelectBox/MultiSelectBox.tsx"],"sourcesContent":["import { useRef, useState, useId, useEffect, useCallback } from 'react';\nimport { clsx } from 'clsx';\n\nimport type { KeyboardEvent, ChangeEvent, MouseEvent } from 'react';\n\nimport styles from './MultiSelectBox.module.css';\n\nimport { Icon } from 'components/Icon';\nimport { Checkbox } from 'components/Checkbox';\nimport { usePositionedFloaters } from 'components/hooks/usePositionedFloaters';\n\nexport type MultiSelectData = {\n  label: string;\n  value: string | number;\n  disabled?: boolean;\n};\n\nexport interface MultiSelectBoxProps {\n  /** Array of label, values pairs */\n  selectData: MultiSelectData[];\n  /** Retuns selected label, values */\n  onChange: (values: MultiSelectData[]) => void;\n  /** Array of label, value pairs that should be check by default */\n  defaultSelectedItems?: MultiSelectData[];\n  /** Suffix label in the selectbutton '[count] selected' */\n  labelSuffix?: string;\n  /** Disables the multiselect */\n  disabled?: boolean;\n  /** If true sets the option dropdown min-width to the width of the select button. */\n  fullWidth?: boolean;\n  /** Dark border. */\n  darkBorder?: boolean;\n  /** The max height of the options. */\n  maxOptionHeight?: `${number}${'px' | 'rem'}`;\n  /** `true` to align the right side of the options with the select box; otherwise, `false` to align on the left side. */\n  optionPositionRight?: boolean;\n}\n\nexport const MultiSelectBox = ({\n  selectData,\n  onChange,\n  defaultSelectedItems,\n  labelSuffix = 'geselecteerd',\n  disabled = false,\n  fullWidth = false,\n  darkBorder = false,\n  maxOptionHeight,\n  optionPositionRight,\n}: MultiSelectBoxProps) => {\n  const multiselectboxId = useId();\n  const [selectedItems, setSelectedItems] = useState<MultiSelectData[]>(defaultSelectedItems || []);\n  const [selectedItemsCount, setSelectedItemsCount] = useState(defaultSelectedItems?.length || 0);\n  const [isOpen, setIsOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState(-1);\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const optionListRef = useRef<HTMLUListElement>(null);\n\n  const [positionElement, setPositionElement] = useState<HTMLElement | null>(null);\n  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);\n  const { style: positionStyle, updatePosition } = usePositionedFloaters(positionElement, referenceElement, {\n    mouseEvent: 'click',\n    position: 'bottomLeft',\n    offset: 4,\n    maxFixedHeight: maxOptionHeight,\n    horizontalPosition: optionPositionRight ? 'right' : 'left',\n    mobileBreakpoint: '28rem',\n    fullWidth,\n  });\n\n  const onMouseEventOutside = useCallback(\n    ({ target }: Event | MouseEvent) => {\n      if (!target || !wrapperRef.current) return;\n\n      if (!wrapperRef.current.contains(target as Node)) {\n        setIsOpen(false);\n      }\n    },\n    [setIsOpen]\n  );\n\n  const onTriggerKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLButtonElement>) => {\n      switch (event.key) {\n        case 'Enter':\n          event.preventDefault();\n          setIsOpen(true);\n          break;\n        case 'Escape':\n          if (isOpen) {\n            event.stopPropagation();\n            setIsOpen(false);\n          }\n          break;\n        default:\n          break;\n      }\n    },\n    [isOpen]\n  );\n\n  const onOptionKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLLIElement>) => {\n      if (!isOpen) return;\n\n      switch (event.key) {\n        case 'ArrowDown':\n          event.preventDefault();\n          setActiveIndex((prev) => {\n            let nextIndex = prev;\n            do {\n              nextIndex = nextIndex < selectData.length - 1 ? nextIndex + 1 : 0;\n            } while (selectData[nextIndex]?.disabled);\n            return nextIndex;\n          });\n          break;\n        case 'ArrowUp':\n          event.preventDefault();\n          setActiveIndex((prev) => {\n            let nextIndex = prev;\n            do {\n              nextIndex = nextIndex <= 0 ? selectData.length - 1 : nextIndex - 1;\n            } while (selectData[nextIndex]?.disabled);\n            return nextIndex;\n          });\n          break;\n        case 'Enter': {\n          event.preventDefault();\n          const selectedItem = selectData[activeIndex];\n          if (!selectedItem || selectedItem.disabled) break;\n          const isAlreadySelected = selectedItems.some((item) => item.value === selectedItem.value);\n          const updatedSelectedItems = isAlreadySelected\n            ? selectedItems.filter((item) => item.value !== selectedItem.value)\n            : [...selectedItems, selectedItem];\n\n          setSelectedItems(updatedSelectedItems);\n          setSelectedItemsCount(updatedSelectedItems.length);\n          onChange(updatedSelectedItems);\n          break;\n        }\n        case 'Tab':\n          event.preventDefault();\n          setIsOpen(false);\n          break;\n        case 'Escape':\n          event.stopPropagation();\n          setIsOpen(false);\n          break;\n        default:\n          break;\n      }\n    },\n    [activeIndex, isOpen, selectData, selectedItems, onChange]\n  );\n\n  const onOptionClick = (event: MouseEvent<HTMLLIElement>, option: MultiSelectData) => {\n    if (option.disabled) return;\n\n    // Prevent toggle if click originated from the checkbox\n    if ((event.target as HTMLElement).tagName === 'INPUT') return;\n\n    const isAlreadySelected = selectedItems.some((item) => item.value === option.value);\n    const updatedSelectedItems = isAlreadySelected\n      ? selectedItems.filter((item) => item.value !== option.value)\n      : [...selectedItems, option];\n\n    setSelectedItems(updatedSelectedItems);\n    setSelectedItemsCount(updatedSelectedItems.length);\n    onChange(updatedSelectedItems);\n    updatePosition();\n  };\n\n  const handleSelect = useCallback(\n    (event: ChangeEvent<HTMLInputElement>) => {\n      const { checked, value } = event.target;\n      let updatedSelectedItems = [...selectedItems];\n\n      if (checked) {\n        const selectedItem = selectData.find((item) => item.value === value);\n        if (selectedItem) {\n          updatedSelectedItems.push(selectedItem);\n        }\n      } else {\n        updatedSelectedItems = updatedSelectedItems.filter((item) => item.value !== value);\n      }\n\n      setSelectedItems(updatedSelectedItems);\n      setSelectedItemsCount(updatedSelectedItems.length);\n      onChange(updatedSelectedItems);\n      updatePosition();\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [selectData, selectedItems, onChange]\n  );\n\n  useEffect(() => {\n    if (isOpen) {\n      setActiveIndex(0);\n    }\n  }, [isOpen]);\n\n  useEffect(() => {\n    const activeOption = optionListRef.current?.children[activeIndex] as HTMLElement;\n    activeOption?.focus();\n  }, [activeIndex]);\n\n  useEffect(() => {\n    if (!isOpen) return;\n\n    document.addEventListener('click', onMouseEventOutside, true);\n    document.addEventListener('scroll', onMouseEventOutside, true);\n\n    return () => {\n      document.removeEventListener('click', onMouseEventOutside, true);\n      document.removeEventListener('scroll', onMouseEventOutside, true);\n    };\n  }, [onMouseEventOutside, isOpen]);\n\n  return (\n    <div className={styles['multi-select-box-wrapper']} ref={wrapperRef}>\n      <button\n        className={clsx(styles['multi-select-box-trigger'], {\n          [styles['multi-select-box-trigger--darkBorder']]: darkBorder,\n        })}\n        type=\"button\"\n        onClick={() => {\n          setIsOpen(!isOpen);\n        }}\n        onKeyDown={onTriggerKeyDown}\n        aria-expanded={isOpen}\n        aria-haspopup=\"listbox\"\n        aria-label={`${selectedItemsCount} ${labelSuffix}`}\n        disabled={disabled}\n        {...(isOpen && { 'aria-controls': multiselectboxId })}\n        ref={setReferenceElement}\n      >\n        <span className={styles['multi-select-box-trigger-label']}>\n          {selectedItemsCount} {labelSuffix}\n        </span>\n        <Icon\n          className={clsx(styles['multi-select-box-trigger-icon'], {\n            [styles['multi-select-box-trigger-icon--open']]: isOpen,\n          })}\n          name=\"CheveronDown\"\n          size={16}\n        />\n      </button>\n\n      <div\n        id={multiselectboxId}\n        className={clsx(styles['multi-select-box-listbox--wrapper'])}\n        style={{ ...positionStyle.style, visibility: isOpen ? 'visible' : 'hidden' }}\n        role=\"listbox\"\n        ref={setPositionElement}\n      >\n        <ul className={styles['multi-select-box-listbox']} ref={optionListRef}>\n          {selectData.map(({ label, value, disabled }, index) => (\n            <li\n              className={clsx(styles['multi-select-box-listbox-option'], {\n                [styles['multi-select-box-listbox-option--active']]: index === activeIndex,\n                [styles['multi-select-box-listbox-option--disabled']]: disabled,\n              })}\n              key={value}\n              role=\"option\"\n              onKeyDown={onOptionKeyDown}\n              onClick={(event) => onOptionClick(event, { label, value, disabled })}\n              onMouseOver={() => setActiveIndex(index)}\n              onFocus={() => setActiveIndex(index)}\n              tabIndex={0}\n              aria-selected={selectedItems.some((item) => item.value === value)}\n            >\n              <label htmlFor={label} className={styles['multi-select-box-listbox-option-content']} tabIndex={-1}>\n                <Checkbox\n                  id={`${label}-${multiselectboxId}`}\n                  onChange={handleSelect}\n                  value={value}\n                  tabIndex={-1}\n                  disabled={disabled}\n                  checked={selectedItems.some((item) => item.value === value)}\n                />\n                <span>{label}</span>\n              </label>\n            </li>\n          ))}\n        </ul>\n      </div>\n    </div>\n  );\n};\n"],"names":["MultiSelectBox","selectData","onChange","defaultSelectedItems","labelSuffix","disabled","fullWidth","darkBorder","maxOptionHeight","optionPositionRight","multiselectboxId","useId","selectedItems","setSelectedItems","useState","selectedItemsCount","setSelectedItemsCount","isOpen","setIsOpen","activeIndex","setActiveIndex","wrapperRef","useRef","optionListRef","positionElement","setPositionElement","referenceElement","setReferenceElement","positionStyle","updatePosition","usePositionedFloaters","onMouseEventOutside","useCallback","target","onTriggerKeyDown","event","onOptionKeyDown","prev","nextIndex","selectedItem","updatedSelectedItems","item","onOptionClick","option","handleSelect","checked","value","useEffect","styles","jsxs","clsx","jsx","Icon","label","index","Checkbox"],"mappings":"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"}

package/dist/components/MultiSelectBox/MultiSelectBox.stories.js

@@ -1,15 +1,23 @@
-import { jsx as l } from "react/jsx-runtime";
-import { l as n } from "../../index-DvUwfXNb.js";
-import { MultiSelectBox as e } from "./MultiSelectBox.js";
-const c = "<MultiSelectBox selectData={[{label, value}]} onChange={fn} labelSuffix={string} />", f = {
+import { jsxs as m, jsx as a } from "react/jsx-runtime";
+import { l as u } from "../../index-DvUwfXNb.js";
+import { useState as r } from "react";
+import { MultiSelectBox as t } from "./MultiSelectBox.js";
+const b = "<MultiSelectBox selectData={[{label, value}]} onChange={fn} labelSuffix={string} />", S = {
   title: "Organisms/MultiSelectBox",
-  component: e,
-  argTypes: {},
+  component: t,
+  argTypes: {
+    onChange: {
+      action: "Selected values",
+      table: {
+        disable: !0
+      }
+    }
+  },
   parameters: {
-    inspectComponent: e,
-    codeString: c
+    inspectComponent: t,
+    codeString: b
   }
-}, s = [
+}, d = [
   { label: "A.B. Docent", value: "1" },
   { label: "B.C. Docent met lange achternaam", value: "2" },
   {
@@ -26,21 +34,29 @@ const c = "<MultiSelectBox selectData={[{label, value}]} onChange={fn} labelSuff
   },
   { label: "H.I. Docent", value: "9" },
   { label: "K.L. Docent ", value: "10" }
-], t = (o) => /* @__PURE__ */ l("div", { style: { width: "30rem", margin: "0rem auto 0 auto" }, children: /* @__PURE__ */ l(e, { ...o }) }), a = {
+], n = (e) => {
+  const [c, s] = r(e.defaultSelectedItems || []), i = (l) => {
+    e.onChange && e.onChange(l), s(l);
+  };
+  return /* @__PURE__ */ m("div", { style: { width: "30rem", margin: "0rem auto 0 auto" }, children: [
+    /* @__PURE__ */ a("span", { children: c.map((l) => l.label).join(", ") }),
+    /* @__PURE__ */ a(t, { ...e, onChange: i })
+  ] });
+}, o = {
   fullWidth: !1,
   labelSuffix: "geselecteerd",
   maxOptionHeight: "20rem",
   optionPositionRight: !1,
   disabled: !1,
-  selectData: s,
-  onChange: n()
-}, i = t.bind({});
-i.args = {
-  ...a
+  selectData: d,
+  onChange: u()
+}, f = n.bind({});
+f.args = {
+  ...o
 };
-const r = t.bind({});
-r.args = {
-  ...a,
+const g = n.bind({});
+g.args = {
+  ...o,
   defaultSelectedItems: [
     { label: "A.B. Docent", value: "1" },
     { label: "H.I. Docent", value: "4" },
@@ -48,8 +64,8 @@ r.args = {
   ]
 };
 export {
-  i as MultiSelectBoxExample,
-  r as WithDefaultSelectedItems,
-  f as default
+  f as MultiSelectBoxExample,
+  g as WithDefaultSelectedItems,
+  S as default
 };
 //# sourceMappingURL=MultiSelectBox.stories.js.map

package/dist/components/MultiSelectBox/MultiSelectBox.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelectBox.stories.js","sources":["../../../src/components/MultiSelectBox/MultiSelectBox.stories.tsx"],"sourcesContent":["import { fn } from 'storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { MultiSelectBoxProps } from './MultiSelectBox';\n\nimport { MultiSelectBox } from './MultiSelectBox';\n\nconst codeString = `<MultiSelectBox selectData={[{label, value}]} onChange={fn} labelSuffix={string} />`;\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Organisms/MultiSelectBox',\n  component: MultiSelectBox,\n  argTypes: {},\n  parameters: {\n    inspectComponent: MultiSelectBox,\n    codeString: codeString,\n  },\n} as Meta<MultiSelectBoxProps>;\n\nconst mockItems = [\n  { label: 'A.B. Docent', value: '1' },\n  { label: 'B.C. Docent met lange achternaam', value: '2' },\n  {\n    label: 'prof. F.G. Docent met lang achternaam',\n    value: '3',\n  },\n  { label: 'H.I. Docent', value: '4' },\n  { label: 'K.L. Docent ', value: '5' },\n  { label: 'A.B. Docent', value: '6' },\n  { label: 'B.C. Docent met lange achternaam', value: '7' },\n  {\n    label: 'prof. F.G. Docent met lang achternaam',\n    value: '8',\n  },\n  { label: 'H.I. Docent', value: '9' },\n  { label: 'K.L. Docent ', value: '10' },\n];\n\nconst Template: StoryFn<MultiSelectBoxProps> = (args) => {\n  return (\n    <div style={{ width: '30rem', margin: '0rem auto 0 auto' }}>\n      <MultiSelectBox {...args} />\n    </div>\n  );\n};\n\nconst defaultArgs: Partial<MultiSelectBoxProps> = {\n  fullWidth: false,\n  labelSuffix: 'geselecteerd',\n  maxOptionHeight: '20rem',\n  optionPositionRight: false,\n  disabled: false,\n  selectData: mockItems,\n  onChange: fn(),\n};\n\nexport const MultiSelectBoxExample = Template.bind({});\nMultiSelectBoxExample.args = {\n  ...defaultArgs,\n};\n\nexport const WithDefaultSelectedItems = Template.bind({});\nWithDefaultSelectedItems.args = {\n  ...defaultArgs,\n  defaultSelectedItems: [\n    { label: 'A.B. Docent', value: '1' },\n    { label: 'H.I. Docent', value: '4' },\n    { label: 'A.B. Docent', value: '6' },\n  ],\n};\n"],"names":["codeString","MultiSelectBox_stories","MultiSelectBox","mockItems","Template","args","jsx","defaultArgs","fn","MultiSelectBoxExample","WithDefaultSelectedItems"],"mappings":";;;AAOA,MAAMA,IAAa,uFAGnBC,IAAe;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU,CAAA;AAAA,EACV,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAY;AAAA,EAChB,EAAE,OAAO,eAAe,OAAO,IAAA;AAAA,EAC/B,EAAE,OAAO,oCAAoC,OAAO,IAAA;AAAA,EACpD;AAAA,IACE,OAAO;AAAA,IACP,OAAO;AAAA,EAAA;AAAA,EAET,EAAE,OAAO,eAAe,OAAO,IAAA;AAAA,EAC/B,EAAE,OAAO,gBAAgB,OAAO,IAAA;AAAA,EAChC,EAAE,OAAO,eAAe,OAAO,IAAA;AAAA,EAC/B,EAAE,OAAO,oCAAoC,OAAO,IAAA;AAAA,EACpD;AAAA,IACE,OAAO;AAAA,IACP,OAAO;AAAA,EAAA;AAAA,EAET,EAAE,OAAO,eAAe,OAAO,IAAA;AAAA,EAC/B,EAAE,OAAO,gBAAgB,OAAO,KAAA;AAClC,GAEMC,IAAyC,CAACC,MAE5C,gBAAAC,EAAC,OAAA,EAAI,OAAO,EAAE,OAAO,SAAS,QAAQ,mBAAA,GACpC,UAAA,gBAAAA,EAACJ,GAAA,EAAgB,GAAGG,GAAM,GAC5B,GAIEE,IAA4C;AAAA,EAChD,WAAW;AAAA,EACX,aAAa;AAAA,EACb,iBAAiB;AAAA,EACjB,qBAAqB;AAAA,EACrB,UAAU;AAAA,EACV,YAAYJ;AAAA,EACZ,UAAUK,EAAA;AACZ,GAEaC,IAAwBL,EAAS,KAAK,CAAA,CAAE;AACrDK,EAAsB,OAAO;AAAA,EAC3B,GAAGF;AACL;AAEO,MAAMG,IAA2BN,EAAS,KAAK,CAAA,CAAE;AACxDM,EAAyB,OAAO;AAAA,EAC9B,GAAGH;AAAA,EACH,sBAAsB;AAAA,IACpB,EAAE,OAAO,eAAe,OAAO,IAAA;AAAA,IAC/B,EAAE,OAAO,eAAe,OAAO,IAAA;AAAA,IAC/B,EAAE,OAAO,eAAe,OAAO,IAAA;AAAA,EAAI;AAEvC;"}
+{"version":3,"file":"MultiSelectBox.stories.js","sources":["../../../src/components/MultiSelectBox/MultiSelectBox.stories.tsx"],"sourcesContent":["import { fn } from 'storybook/test';\nimport { useState } from 'react';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { MultiSelectBoxProps, MultiSelectData } from './MultiSelectBox';\n\nimport { MultiSelectBox } from './MultiSelectBox';\n\nconst codeString = `<MultiSelectBox selectData={[{label, value}]} onChange={fn} labelSuffix={string} />`;\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Organisms/MultiSelectBox',\n  component: MultiSelectBox,\n  argTypes: {\n    onChange: {\n      action: 'Selected values',\n      table: {\n        disable: true,\n      },\n    },\n  },\n  parameters: {\n    inspectComponent: MultiSelectBox,\n    codeString: codeString,\n  },\n} as Meta<MultiSelectBoxProps>;\n\nconst mockItems = [\n  { label: 'A.B. Docent', value: '1' },\n  { label: 'B.C. Docent met lange achternaam', value: '2' },\n  {\n    label: 'prof. F.G. Docent met lang achternaam',\n    value: '3',\n  },\n  { label: 'H.I. Docent', value: '4' },\n  { label: 'K.L. Docent ', value: '5' },\n  { label: 'A.B. Docent', value: '6' },\n  { label: 'B.C. Docent met lange achternaam', value: '7' },\n  {\n    label: 'prof. F.G. Docent met lang achternaam',\n    value: '8',\n  },\n  { label: 'H.I. Docent', value: '9' },\n  { label: 'K.L. Docent ', value: '10' },\n];\n\nconst Template: StoryFn<MultiSelectBoxProps> = (args) => {\n  const [selectedItems, setSelectedItems] = useState<MultiSelectData[]>(args.defaultSelectedItems || []);\n\n  const handleChange = (items: MultiSelectData[]) => {\n    if (args.onChange) {\n      args.onChange(items);\n    }\n    setSelectedItems(items);\n  };\n\n  return (\n    <div style={{ width: '30rem', margin: '0rem auto 0 auto' }}>\n      <span>{selectedItems.map((item) => item.label).join(', ')}</span>\n      <MultiSelectBox {...args} onChange={handleChange} />\n    </div>\n  );\n};\n\nconst defaultArgs: Partial<MultiSelectBoxProps> = {\n  fullWidth: false,\n  labelSuffix: 'geselecteerd',\n  maxOptionHeight: '20rem',\n  optionPositionRight: false,\n  disabled: false,\n  selectData: mockItems,\n  onChange: fn(),\n};\n\nexport const MultiSelectBoxExample = Template.bind({});\nMultiSelectBoxExample.args = {\n  ...defaultArgs,\n};\n\nexport const WithDefaultSelectedItems = Template.bind({});\nWithDefaultSelectedItems.args = {\n  ...defaultArgs,\n  defaultSelectedItems: [\n    { label: 'A.B. Docent', value: '1' },\n    { label: 'H.I. Docent', value: '4' },\n    { label: 'A.B. Docent', value: '6' },\n  ],\n};\n"],"names":["codeString","MultiSelectBox_stories","MultiSelectBox","mockItems","Template","args","selectedItems","setSelectedItems","useState","handleChange","items","jsxs","jsx","item","defaultArgs","fn","MultiSelectBoxExample","WithDefaultSelectedItems"],"mappings":";;;;AAQA,MAAMA,IAAa,uFAGnBC,IAAe;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,UAAU;AAAA,MACR,QAAQ;AAAA,MACR,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,EACF;AAAA,EAEF,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAY;AAAA,EAChB,EAAE,OAAO,eAAe,OAAO,IAAA;AAAA,EAC/B,EAAE,OAAO,oCAAoC,OAAO,IAAA;AAAA,EACpD;AAAA,IACE,OAAO;AAAA,IACP,OAAO;AAAA,EAAA;AAAA,EAET,EAAE,OAAO,eAAe,OAAO,IAAA;AAAA,EAC/B,EAAE,OAAO,gBAAgB,OAAO,IAAA;AAAA,EAChC,EAAE,OAAO,eAAe,OAAO,IAAA;AAAA,EAC/B,EAAE,OAAO,oCAAoC,OAAO,IAAA;AAAA,EACpD;AAAA,IACE,OAAO;AAAA,IACP,OAAO;AAAA,EAAA;AAAA,EAET,EAAE,OAAO,eAAe,OAAO,IAAA;AAAA,EAC/B,EAAE,OAAO,gBAAgB,OAAO,KAAA;AAClC,GAEMC,IAAyC,CAACC,MAAS;AACvD,QAAM,CAACC,GAAeC,CAAgB,IAAIC,EAA4BH,EAAK,wBAAwB,EAAE,GAE/FI,IAAe,CAACC,MAA6B;AACjD,IAAIL,EAAK,YACPA,EAAK,SAASK,CAAK,GAErBH,EAAiBG,CAAK;AAAA,EACxB;AAEA,SACE,gBAAAC,EAAC,SAAI,OAAO,EAAE,OAAO,SAAS,QAAQ,sBACpC,UAAA;AAAA,IAAA,gBAAAC,EAAC,QAAA,EAAM,UAAAN,EAAc,IAAI,CAACO,MAASA,EAAK,KAAK,EAAE,KAAK,IAAI,EAAA,CAAE;AAAA,IAC1D,gBAAAD,EAACV,GAAA,EAAgB,GAAGG,GAAM,UAAUI,EAAA,CAAc;AAAA,EAAA,GACpD;AAEJ,GAEMK,IAA4C;AAAA,EAChD,WAAW;AAAA,EACX,aAAa;AAAA,EACb,iBAAiB;AAAA,EACjB,qBAAqB;AAAA,EACrB,UAAU;AAAA,EACV,YAAYX;AAAA,EACZ,UAAUY,EAAA;AACZ,GAEaC,IAAwBZ,EAAS,KAAK,CAAA,CAAE;AACrDY,EAAsB,OAAO;AAAA,EAC3B,GAAGF;AACL;AAEO,MAAMG,IAA2Bb,EAAS,KAAK,CAAA,CAAE;AACxDa,EAAyB,OAAO;AAAA,EAC9B,GAAGH;AAAA,EACH,sBAAsB;AAAA,IACpB,EAAE,OAAO,eAAe,OAAO,IAAA;AAAA,IAC/B,EAAE,OAAO,eAAe,OAAO,IAAA;AAAA,IAC/B,EAAE,OAAO,eAAe,OAAO,IAAA;AAAA,EAAI;AAEvC;"}

package/dist/components/hooks/usePositionedFloaters.js

@@ -2,7 +2,7 @@ import { useState as H, useEffect as P } from "react";
 import { useDebounce as $ } from "./useDebounce.js";
 const a = 10, F = 90, r = 300, y = 0, B = 768, k = 2;
 function M(c, n, i) {
-  const [m, p] = H(!1), w = {
+  const [m, p] = H(!1), h = {
     inset: "0 auto auto 0",
     opacity: 0,
     maxHeight: "100%",
@@ -11,13 +11,13 @@ function M(c, n, i) {
     overflowX: "hidden",
     overflowY: "auto",
     margin: "0rem"
-  }, [l, v] = H(w), h = (t) => {
+  }, [w, v] = H(h), l = (t) => {
     const e = parseFloat(getComputedStyle(document.documentElement).fontSize);
     return t.indexOf("rem") !== -1 ? parseFloat(t) * e : parseFloat(t);
   }, b = (t, e) => {
     if (!t) return 0;
     const o = e === "bottom" ? window.innerHeight - t.bottom - i.offset - a : t.top - i.offset - a;
-    return !i.maxFixedHeight || h(i.maxFixedHeight) > o ? o : h(i.maxFixedHeight);
+    return !i.maxFixedHeight || l(i.maxFixedHeight) > o ? o : l(i.maxFixedHeight);
   }, E = (t, e) => {
     if (!t) return 0;
     const o = e === "left" ? window.innerWidth - t.left - a : t.right - a;
@@ -26,9 +26,9 @@ function M(c, n, i) {
     const t = c?.getBoundingClientRect(), e = n?.getBoundingClientRect();
     let o = "bottom", d = "left";
     const L = window.matchMedia(
-      `(max-width: ${i.mobileBreakpoint ? h(i.mobileBreakpoint) : B}px)`
+      `(max-width: ${i.mobileBreakpoint ? l(i.mobileBreakpoint) : B}px)`
     ).matches;
-    return !e || !t ? w : (window.innerHeight - e.bottom - a < F && (o = "top"), (window.innerWidth - e.left - a < r || i.horizontalPosition === "right") && !L && (d = "right"), {
+    return !e || !t ? h : (window.innerHeight - e.bottom - a < F && (o = "top"), (window.innerWidth - e.left - a < r || i.horizontalPosition === "right") && !L && (d = "right"), {
       inset: `${o === "bottom" ? e[o] + "px" : "auto"}
               ${d === "right" ? window.innerWidth - e[d] + "px" : "auto"}
               ${o === "top" ? window.innerHeight - e[o] + "px" : "auto"}
@@ -43,14 +43,16 @@ function M(c, n, i) {
     });
   }, u = () => {
     v({
-      ...l,
+      ...w,
       ...f()
     }), p(!0);
   }, x = () => {
-    m && v({
-      ...l,
-      ...f()
-    });
+    m && setTimeout(() => {
+      v((t) => ({
+        ...t,
+        ...f()
+      }));
+    }, 0);
   }, s = (t) => {
     !n || n.contains(t.target) || !c || c.contains(t.target);
   }, g = $(x, y);
@@ -58,7 +60,7 @@ function M(c, n, i) {
     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));
   })), {
     style: {
-      style: l
+      style: w
     },
     status: m,
     updatePosition: x

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

@@ -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  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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"}
+{"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      setTimeout(() => {\n        setStyle((prevStyle) => ({\n          ...prevStyle,\n          ...calcPosition(),\n        }));\n      }, 0);\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","prevStyle","handleClickOutside","evt","debouncedUpdatePosition","useDebounce","useEffect"],"mappings":";;AAwBA,MAAMA,IAAe,IACfC,IAAa,IACbC,IAAY,KACZC,IAAiB,GACjBC,IAAoB,KACpBC,IAAO;AAEN,SAASC,EACdC,GACAC,GACAC,GACe;AACf,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK,GACpCC,IAAe;AAAA,IACnB,OAAO;AAAA,IACP,SAAS;AAAA,IACT,WAAW;AAAA,IACX,UAAU;AAAA,IACV,UAAUX;AAAA,IACV,WAAW;AAAA,IACX,WAAW;AAAA,IACX,QAAQ;AAAA,EAAA,GAGJ,CAACY,GAAOC,CAAQ,IAAIH,EAASC,CAAY,GAEzCG,IAAW,CAACC,MAA6C;AAC7D,UAAMC,IAAe,WAAW,iBAAiB,SAAS,eAAe,EAAE,QAAQ;AACnF,WAAOD,EAAK,QAAQ,KAAK,MAAM,KAAK,WAAWA,CAAI,IAAIC,IAAe,WAAWD,CAAI;AAAA,EACvF,GAEME,IAAY,CAACC,GAAkBC,MAAwB;AAC3D,QAAI,CAACD,EAAS,QAAO;AAErB,UAAME,IACJD,MAAQ,WACJ,OAAO,cAAcD,EAAQ,SAASX,EAAQ,SAAST,IACvDoB,EAAQ,MAAMX,EAAQ,SAAST;AAErC,WAAO,CAACS,EAAQ,kBAAkBO,EAASP,EAAQ,cAAc,IAAIa,IACjEA,IACAN,EAASP,EAAQ,cAAc;AAAA,EACrC,GAEMc,IAAW,CAACH,GAAkBC,MAAwB;AAC1D,QAAI,CAACD,EAAS,QAAO;AAErB,UAAMI,IACJH,MAAQ,SAAS,OAAO,aAAaD,EAAQ,OAAOpB,IAAeoB,EAAQ,QAAQpB;AAErF,WAAOwB,KAAmBtB,IAAYA,IAAYsB;AAAA,EACpD,GAEMC,IAAU,CAACL,GAAkBM,GAAkBC,MAC/CA,IACK,GAAGP,EAAQ,OAAO,KAAK,IAAIM,EAAQ,QAAQN,EAAQ,KAAK,IAAIf,CAAI,OAEhE,GAAGe,EAAQ,IAAI,MAIpBQ,IAAe,MAA2B;AAC9C,UAAMC,IAAkBtB,GAA0C,sBAAA,GAC5DuB,IAAiBtB,GAAyC,sBAAA;AAChE,QAAIuB,IAAO,UACPC,IAAO;AAEX,UAAML,IAAW,OAAO;AAAA,MACtB,eAAelB,EAAQ,mBAAmBO,EAASP,EAAQ,gBAAgB,IAAIL,CAAiB;AAAA,IAAA,EAChG;AAEF,WAAI,CAAC0B,KAAiB,CAACD,IACdhB,KAGL,OAAO,cAAciB,EAAc,SAAS9B,IAAeC,MAC7D8B,IAAO,SAIN,OAAO,aAAaD,EAAc,OAAO9B,IAAeE,KAAaO,EAAQ,uBAAuB,YACrG,CAACkB,MAEDK,IAAO,UAGF;AAAA,MACL,OAAO,GAAGD,MAAS,WAAWD,EAAcC,CAAI,IAAI,OAAO,MAAM;AAAA,gBACvDC,MAAS,UAAU,OAAO,aAAaF,EAAcE,CAAI,IAAI,OAAO,MAAM;AAAA,gBAC1ED,MAAS,QAAQ,OAAO,cAAcD,EAAcC,CAAI,IAAI,OAAO,MAAM;AAAA,gBACzEC,MAAS,SAASP,EAAQK,GAAeD,GAAgBF,CAAQ,IAAI,MAAM;AAAA,MACrF,WAAW,GAAGR,EAAUW,GAAeC,CAAI,CAAC;AAAA,MAC5C,UAAU,GAAGR,EAASO,GAAeE,CAAI,CAAC;AAAA,MAC1C,UAAUvB,EAAQ,YAAYqB,EAAc,QAAQ5B;AAAA,MACpD,WAAW;AAAA,MACX,WAAW;AAAA,MACX,SAAS;AAAA,MACT,QAAQ,GAAGO,EAAQ,MAAM;AAAA,IAAA;AAAA,EAE7B,GAEMwB,IAAmB,MAAY;AACnC,IAAAlB,EAAS;AAAA,MACP,GAAGD;AAAA,MACH,GAAGc,EAAA;AAAA,IAAa,CACjB,GACDjB,EAAU,EAAI;AAAA,EAChB,GAEMuB,IAAiB,MAAY;AACjC,IAAIxB,KACF,WAAW,MAAM;AACf,MAAAK,EAAS,CAACoB,OAAe;AAAA,QACvB,GAAGA;AAAA,QACH,GAAGP,EAAA;AAAA,MAAa,EAChB;AAAA,IACJ,GAAG,CAAC;AAAA,EAER,GAEMQ,IAAqB,CAACC,MAAqB;AAC/C,IACE,CAAC7B,KACAA,EAA4C,SAAS6B,EAAI,MAAc,KACxE,CAAC9B,KACAA,EAA6C,SAAS8B,EAAI,MAAc;AAAA,EAI7E,GAEMC,IAA0BC,EAAYL,GAAgB/B,CAAc;AAE1E,SAAAqC,EAAU,OACJhC,MAAqB,SACnBC,EAAQ,eAAe,UAExBD,EAA4C,iBAAiB,SAASyB,CAAgB,KAGtFzB,EAA4C,iBAAiB,cAAcyB,CAAgB,GAE3FzB,EAA4C,iBAAiB,cAAc4B,CAAkB,IAEhG,SAAS,iBAAiB,aAAaA,CAAkB,GACzD,SAAS,iBAAiB,cAAcA,CAAkB,GAC1D,OAAO,iBAAiB,UAAUE,CAAuB,IAGpD,MAAM;AACX,IAAI9B,MAAqB,SACnBC,EAAQ,eAAe,UAExBD,EAA4C,oBAAoB,SAASyB,CAAgB,KAGzFzB,EAA4C,oBAAoB,cAAcyB,CAAgB,GAE9FzB,EAA4C,oBAAoB,cAAc4B,CAAkB,IAEnG,SAAS,oBAAoB,aAAaA,CAAkB,GAC5D,SAAS,oBAAoB,cAAcA,CAAkB,GAC7D,OAAO,oBAAoB,UAAUE,CAAuB;AAAA,EAEhE,EACD,GAEM;AAAA,IACL,OAAO;AAAA,MACL,OAAAxB;AAAA,IAAA;AAAA,IAEF,QAAAJ;AAAA,IACA,gBAAAwB;AAAA,EAAA;AAEJ;"}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@uva-glass/component-library",
   "author": "Team Glass - Frontend vrienden",
   "private": false,
-  "version": "3.50.14",
+  "version": "3.50.15",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",