@uva-glass/component-library 3.27.0 → 3.27.2

package/dist/components/MultiSelectBox/MultiSelectBox.js

@@ -1,41 +1,43 @@
 import { jsxs as g, jsx as u } from "react/jsx-runtime";
-import { useId as U, useState as b, useRef as S, useCallback as _, useEffect as y } from "react";
-import { c as I } from "../../clsx-OuTLNxxd.js";
-import { Icon as H } from "../Icon/Icon.js";
-import { Checkbox as q } from "../Checkbox/Checkbox.js";
-import { usePositionedFloaters as G } from "../hooks/usePositionedFloaters.js";
-import '../../assets/MultiSelectBox.css';const n = {
-  "multi-select-box-wrapper": "_multi-select-box-wrapper_4fwo9_1",
-  "multi-select-box-trigger": "_multi-select-box-trigger_4fwo9_5",
-  "multi-select-box-trigger-label": "_multi-select-box-trigger-label_4fwo9_32",
-  "multi-select-box-trigger-icon": "_multi-select-box-trigger-icon_4fwo9_41",
-  "multi-select-box-trigger-icon--open": "_multi-select-box-trigger-icon--open_4fwo9_46",
-  "multi-select-box-listbox--wrapper": "_multi-select-box-listbox--wrapper_4fwo9_50",
-  "multi-select-box-listbox": "_multi-select-box-listbox_4fwo9_50",
-  "multi-select-box-listbox-option": "_multi-select-box-listbox-option_4fwo9_77",
-  "multi-select-box-listbox-option--active": "_multi-select-box-listbox-option--active_4fwo9_88",
-  "multi-select-box-listbox-option-content": "_multi-select-box-listbox-option-content_4fwo9_99",
-  "multi-select-box-listbox-option--disabled": "_multi-select-box-listbox-option--disabled_4fwo9_113"
-}, Z = ({
+import { useId as H, useState as b, useRef as S, useCallback as _, useEffect as I } from "react";
+import { c as h } from "../../clsx-OuTLNxxd.js";
+import { Icon as q } from "../Icon/Icon.js";
+import { Checkbox as G } from "../Checkbox/Checkbox.js";
+import { usePositionedFloaters as J } from "../hooks/usePositionedFloaters.js";
+import '../../assets/MultiSelectBox.css';const r = {
+  "multi-select-box-wrapper": "_multi-select-box-wrapper_134e4_1",
+  "multi-select-box-trigger": "_multi-select-box-trigger_134e4_5",
+  "multi-select-box-trigger--darkBorder": "_multi-select-box-trigger--darkBorder_134e4_22",
+  "multi-select-box-trigger-label": "_multi-select-box-trigger-label_134e4_36",
+  "multi-select-box-trigger-icon": "_multi-select-box-trigger-icon_134e4_45",
+  "multi-select-box-trigger-icon--open": "_multi-select-box-trigger-icon--open_134e4_50",
+  "multi-select-box-listbox--wrapper": "_multi-select-box-listbox--wrapper_134e4_54",
+  "multi-select-box-listbox": "_multi-select-box-listbox_134e4_54",
+  "multi-select-box-listbox-option": "_multi-select-box-listbox-option_134e4_81",
+  "multi-select-box-listbox-option--active": "_multi-select-box-listbox-option--active_134e4_92",
+  "multi-select-box-listbox-option-content": "_multi-select-box-listbox-option-content_134e4_103",
+  "multi-select-box-listbox-option--disabled": "_multi-select-box-listbox-option--disabled_134e4_117"
+}, ee = ({
   selectData: c,
   onChange: m,
   defaultSelectedItems: f,
   labelSuffix: E = "geselecteerd",
   disabled: P = !1,
-  fullWidth: C = !1,
+  fullWidth: B = !1,
+  darkBorder: C = !1,
   maxOptionHeight: L,
   optionPositionRight: O
 }) => {
-  const w = U(), [r, h] = b(f || []), [N, v] = b((f == null ? void 0 : f.length) || 0), [i, a] = b(!1), [d, x] = b(-1), k = S(null), A = S(null), [F, K] = b(null), [R, $] = b(null), { style: D } = G(F, R, {
+  const v = H(), [n, k] = b(f || []), [N, w] = b((f == null ? void 0 : f.length) || 0), [s, a] = b(!1), [d, x] = b(-1), y = S(null), A = S(null), [F, K] = b(null), [R, $] = b(null), { style: D } = J(F, R, {
     mouseEvent: "click",
     offset: 4,
     maxFixedHeight: L,
     horizontalPosition: O ? "right" : "left",
     mobileBreakpoint: "28rem",
-    fullWidth: C
+    fullWidth: B
   }), p = _(
     ({ target: e }) => {
-      !e || !k.current || k.current.contains(e) || a(!1);
+      !e || !y.current || y.current.contains(e) || a(!1);
     },
     [a]
   ), M = _(
@@ -45,41 +47,41 @@ import '../../assets/MultiSelectBox.css';const n = {
           e.preventDefault(), a(!0);
           break;
         case "Escape":
-          i && (e.stopPropagation(), a(!1));
+          s && (e.stopPropagation(), a(!1));
           break;
       }
     },
-    [i]
+    [s]
   ), T = _(
     (e) => {
-      if (i)
+      if (s)
         switch (e.key) {
           case "ArrowDown":
             e.preventDefault(), x((t) => {
-              var o;
-              let l = t;
+              var l;
+              let o = t;
               do
-                l = l < c.length - 1 ? l + 1 : 0;
-              while ((o = c[l]) != null && o.disabled);
-              return l;
+                o = o < c.length - 1 ? o + 1 : 0;
+              while ((l = c[o]) != null && l.disabled);
+              return o;
             });
             break;
           case "ArrowUp":
             e.preventDefault(), x((t) => {
-              var o;
-              let l = t;
+              var l;
+              let o = t;
               do
-                l = l <= 0 ? c.length - 1 : l - 1;
-              while ((o = c[l]) != null && o.disabled);
-              return l;
+                o = o <= 0 ? c.length - 1 : o - 1;
+              while ((l = c[o]) != null && l.disabled);
+              return o;
             });
             break;
           case "Enter": {
             e.preventDefault();
             const t = c[d];
             if (!t || t.disabled) break;
-            const o = r.some((s) => s.value === t.value) ? r.filter((s) => s.value !== t.value) : [...r, t];
-            h(o), v(o.length), m(o);
+            const l = n.some((i) => i.value === t.value) ? n.filter((i) => i.value !== t.value) : [...n, t];
+            k(l), w(l.length), m(l);
             break;
           }
           case "Tab":
@@ -90,62 +92,64 @@ import '../../assets/MultiSelectBox.css';const n = {
             break;
         }
     },
-    [d, i, c, r, m]
+    [d, s, c, n, m]
   ), j = (e, t) => {
     if (t.disabled || e.target.tagName === "INPUT") return;
-    const o = r.some((s) => s.value === t.value) ? r.filter((s) => s.value !== t.value) : [...r, t];
-    h(o), v(o.length), m(o);
+    const l = n.some((i) => i.value === t.value) ? n.filter((i) => i.value !== t.value) : [...n, t];
+    k(l), w(l.length), m(l);
   }, z = _(
     (e) => {
-      const { checked: t, value: l } = e.target;
-      let o = [...r];
+      const { checked: t, value: o } = e.target;
+      let l = [...n];
       if (t) {
-        const s = c.find((B) => B.value === l);
-        s && o.push(s);
+        const i = c.find((U) => U.value === o);
+        i && l.push(i);
       } else
-        o = o.filter((s) => s.value !== l);
-      h(o), v(o.length), m(o);
+        l = l.filter((i) => i.value !== o);
+      k(l), w(l.length), m(l);
     },
-    [c, r, m]
+    [c, n, m]
   );
-  return y(() => {
-    i && x(0);
-  }, [i]), y(() => {
+  return I(() => {
+    s && x(0);
+  }, [s]), I(() => {
     var t;
     const e = (t = A.current) == null ? void 0 : t.children[d];
     e == null || e.focus();
-  }, [d]), y(() => {
-    if (i)
+  }, [d]), I(() => {
+    if (s)
       return document.addEventListener("click", p, !0), document.addEventListener("scroll", p, !0), () => {
         document.removeEventListener("click", p, !0), document.removeEventListener("scroll", p, !0);
       };
-  }, [p, i]), /* @__PURE__ */ g("div", { className: n["multi-select-box-wrapper"], ref: k, children: [
+  }, [p, s]), /* @__PURE__ */ g("div", { className: r["multi-select-box-wrapper"], ref: y, children: [
     /* @__PURE__ */ g(
       "button",
       {
-        className: n["multi-select-box-trigger"],
+        className: h(r["multi-select-box-trigger"], {
+          [r["multi-select-box-trigger--darkBorder"]]: C
+        }),
         type: "button",
         onClick: () => {
-          a(!i);
+          a(!s);
         },
         onKeyDown: M,
-        "aria-expanded": i,
+        "aria-expanded": s,
         "aria-haspopup": "listbox",
         "aria-label": `${N} ${E}`,
         disabled: P,
-        ...i && { "aria-controls": w },
+        ...s && { "aria-controls": v },
         ref: $,
         children: [
-          /* @__PURE__ */ g("span", { className: n["multi-select-box-trigger-label"], children: [
+          /* @__PURE__ */ g("span", { className: r["multi-select-box-trigger-label"], children: [
             N,
             " ",
             E
           ] }),
           /* @__PURE__ */ u(
-            H,
+            q,
             {
-              className: I(n["multi-select-box-trigger-icon"], {
-                [n["multi-select-box-trigger-icon--open"]]: i
+              className: h(r["multi-select-box-trigger-icon"], {
+                [r["multi-select-box-trigger-icon--open"]]: s
               }),
               name: "CheveronDown",
               size: 16
@@ -157,35 +161,35 @@ import '../../assets/MultiSelectBox.css';const n = {
     /* @__PURE__ */ u(
       "div",
       {
-        id: w,
-        className: I(n["multi-select-box-listbox--wrapper"]),
-        style: { ...D.style, visibility: i ? "visible" : "hidden" },
+        id: v,
+        className: h(r["multi-select-box-listbox--wrapper"]),
+        style: { ...D.style, visibility: s ? "visible" : "hidden" },
         role: "listbox",
         ref: K,
-        children: /* @__PURE__ */ u("ul", { className: n["multi-select-box-listbox"], ref: A, children: c.map(({ label: e, value: t, disabled: l }, o) => /* @__PURE__ */ u(
+        children: /* @__PURE__ */ u("ul", { className: r["multi-select-box-listbox"], ref: A, children: c.map(({ label: e, value: t, disabled: o }, l) => /* @__PURE__ */ u(
           "li",
           {
-            className: I(n["multi-select-box-listbox-option"], {
-              [n["multi-select-box-listbox-option--active"]]: o === d,
-              [n["multi-select-box-listbox-option--disabled"]]: l
+            className: h(r["multi-select-box-listbox-option"], {
+              [r["multi-select-box-listbox-option--active"]]: l === d,
+              [r["multi-select-box-listbox-option--disabled"]]: o
             }),
             role: "option",
             onKeyDown: T,
-            onClick: (s) => j(s, { label: e, value: t, disabled: l }),
-            onMouseOver: () => x(o),
-            onFocus: () => x(o),
+            onClick: (i) => j(i, { label: e, value: t, disabled: o }),
+            onMouseOver: () => x(l),
+            onFocus: () => x(l),
             tabIndex: 0,
-            "aria-selected": r.some((s) => s.value === t),
-            children: /* @__PURE__ */ g("label", { htmlFor: e, className: n["multi-select-box-listbox-option-content"], tabIndex: -1, children: [
+            "aria-selected": n.some((i) => i.value === t),
+            children: /* @__PURE__ */ g("label", { htmlFor: e, className: r["multi-select-box-listbox-option-content"], tabIndex: -1, children: [
               /* @__PURE__ */ u(
-                q,
+                G,
                 {
-                  id: `${e}-${w}`,
+                  id: `${e}-${v}`,
                   onChange: z,
                   value: t,
                   tabIndex: -1,
-                  disabled: l,
-                  checked: r.some((s) => s.value === t)
+                  disabled: o,
+                  checked: n.some((i) => i.value === t)
                 }
               ),
               /* @__PURE__ */ u("span", { children: e })
@@ -198,6 +202,6 @@ import '../../assets/MultiSelectBox.css';const n = {
   ] });
 };
 export {
-  Z as MultiSelectBox
+  ee as MultiSelectBox
 };
 //# sourceMappingURL=MultiSelectBox.js.map

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  /** 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  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 } = 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    },\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={styles['multi-select-box-trigger']}\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","maxOptionHeight","optionPositionRight","multiselectboxId","useId","selectedItems","setSelectedItems","useState","selectedItemsCount","setSelectedItemsCount","isOpen","setIsOpen","activeIndex","setActiveIndex","wrapperRef","useRef","optionListRef","positionElement","setPositionElement","referenceElement","setReferenceElement","positionStyle","usePositionedFloaters","onMouseEventOutside","useCallback","target","onTriggerKeyDown","event","onOptionKeyDown","prev","nextIndex","_a","selectedItem","updatedSelectedItems","item","onOptionClick","option","handleSelect","checked","value","useEffect","activeOption","styles","jsxs","jsx","Icon","clsx","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 } = 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    },\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","usePositionedFloaters","onMouseEventOutside","useCallback","target","onTriggerKeyDown","event","onOptionKeyDown","prev","nextIndex","_a","selectedItem","updatedSelectedItems","item","onOptionClick","option","handleSelect","checked","value","useEffect","activeOption","styles","jsxs","clsx","jsx","Icon","label","index","Checkbox"],"mappings":";;;;;;;;;;;;;;;;;;;GAsCaA,KAAiB,CAAC;AAAA,EAC7B,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,sBAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,YAAAC,IAAa;AAAA,EACb,iBAAAC;AAAA,EACA,qBAAAC;AACF,MAA2B;AACzB,QAAMC,IAAmBC,EAAM,GACzB,CAACC,GAAeC,CAAgB,IAAIC,EAA4BX,KAAwB,CAAA,CAAE,GAC1F,CAACY,GAAoBC,CAAqB,IAAIF,GAASX,KAAA,gBAAAA,EAAsB,WAAU,CAAC,GACxF,CAACc,GAAQC,CAAS,IAAIJ,EAAS,EAAK,GACpC,CAACK,GAAaC,CAAc,IAAIN,EAAS,EAAE,GAC3CO,IAAaC,EAAuB,IAAI,GACxCC,IAAgBD,EAAyB,IAAI,GAE7C,CAACE,GAAiBC,CAAkB,IAAIX,EAA6B,IAAI,GACzE,CAACY,GAAkBC,CAAmB,IAAIb,EAAmC,IAAI,GACjF,EAAE,OAAOc,EAAA,IAAkBC,EAAsBL,GAAiBE,GAAkB;AAAA,IACxF,YAAY;AAAA,IAEZ,QAAQ;AAAA,IACR,gBAAgBlB;AAAA,IAChB,oBAAoBC,IAAsB,UAAU;AAAA,IACpD,kBAAkB;AAAA,IAClB,WAAAH;AAAA,EAAA,CACD,GAEKwB,IAAsBC;AAAA,IAC1B,CAAC,EAAE,QAAAC,EAAA,MAAiC;AAClC,MAAI,CAACA,KAAU,CAACX,EAAW,WAEtBA,EAAW,QAAQ,SAASW,CAAc,KAC7Cd,EAAU,EAAK;AAAA,IAEnB;AAAA,IACA,CAACA,CAAS;AAAA,EACZ,GAEMe,IAAmBF;AAAA,IACvB,CAACG,MAA4C;AAC3C,cAAQA,EAAM,KAAK;AAAA,QACjB,KAAK;AACH,UAAAA,EAAM,eAAe,GACrBhB,EAAU,EAAI;AACd;AAAA,QACF,KAAK;AACH,UAAID,MACFiB,EAAM,gBAAgB,GACtBhB,EAAU,EAAK;AAEjB;AAAA,MAEA;AAAA,IAEN;AAAA,IACA,CAACD,CAAM;AAAA,EACT,GAEMkB,IAAkBJ;AAAA,IACtB,CAACG,MAAwC;AACvC,UAAKjB;AAEL,gBAAQiB,EAAM,KAAK;AAAA,UACjB,KAAK;AACH,YAAAA,EAAM,eAAe,GACrBd,EAAe,CAACgB,MAAS;;AACvB,kBAAIC,IAAYD;AACb;AACD,gBAAAC,IAAYA,IAAYpC,EAAW,SAAS,IAAIoC,IAAY,IAAI;AAAA,sBACzDC,IAAArC,EAAWoC,CAAS,MAApB,QAAAC,EAAuB;AACzB,qBAAAD;AAAA,YAAA,CACR;AACD;AAAA,UACF,KAAK;AACH,YAAAH,EAAM,eAAe,GACrBd,EAAe,CAACgB,MAAS;;AACvB,kBAAIC,IAAYD;AACb;AACD,gBAAAC,IAAYA,KAAa,IAAIpC,EAAW,SAAS,IAAIoC,IAAY;AAAA,sBAC1DC,IAAArC,EAAWoC,CAAS,MAApB,QAAAC,EAAuB;AACzB,qBAAAD;AAAA,YAAA,CACR;AACD;AAAA,UACF,KAAK,SAAS;AACZ,YAAAH,EAAM,eAAe;AACf,kBAAAK,IAAetC,EAAWkB,CAAW;AACvC,gBAAA,CAACoB,KAAgBA,EAAa,SAAU;AAE5C,kBAAMC,IADoB5B,EAAc,KAAK,CAAC6B,MAASA,EAAK,UAAUF,EAAa,KAAK,IAEpF3B,EAAc,OAAO,CAAC6B,MAASA,EAAK,UAAUF,EAAa,KAAK,IAChE,CAAC,GAAG3B,GAAe2B,CAAY;AAEnC,YAAA1B,EAAiB2B,CAAoB,GACrCxB,EAAsBwB,EAAqB,MAAM,GACjDtC,EAASsC,CAAoB;AAC7B;AAAA,UAAA;AAAA,UAEF,KAAK;AACH,YAAAN,EAAM,eAAe,GACrBhB,EAAU,EAAK;AACf;AAAA,UACF,KAAK;AACH,YAAAgB,EAAM,gBAAgB,GACtBhB,EAAU,EAAK;AACf;AAAA,QAEA;AAAA,IAEN;AAAA,IACA,CAACC,GAAaF,GAAQhB,GAAYW,GAAeV,CAAQ;AAAA,EAC3D,GAEMwC,IAAgB,CAACR,GAAkCS,MAA4B;AAI9E,QAHDA,EAAO,YAGNT,EAAM,OAAuB,YAAY,QAAS;AAGvD,UAAMM,IADoB5B,EAAc,KAAK,CAAC6B,MAASA,EAAK,UAAUE,EAAO,KAAK,IAE9E/B,EAAc,OAAO,CAAC6B,MAASA,EAAK,UAAUE,EAAO,KAAK,IAC1D,CAAC,GAAG/B,GAAe+B,CAAM;AAE7B,IAAA9B,EAAiB2B,CAAoB,GACrCxB,EAAsBwB,EAAqB,MAAM,GACjDtC,EAASsC,CAAoB;AAAA,EAC/B,GAEMI,IAAeb;AAAA,IACnB,CAACG,MAAyC;AACxC,YAAM,EAAE,SAAAW,GAAS,OAAAC,EAAM,IAAIZ,EAAM;AAC7B,UAAAM,IAAuB,CAAC,GAAG5B,CAAa;AAE5C,UAAIiC,GAAS;AACX,cAAMN,IAAetC,EAAW,KAAK,CAACwC,MAASA,EAAK,UAAUK,CAAK;AACnE,QAAIP,KACFC,EAAqB,KAAKD,CAAY;AAAA,MACxC;AAEA,QAAAC,IAAuBA,EAAqB,OAAO,CAACC,MAASA,EAAK,UAAUK,CAAK;AAGnF,MAAAjC,EAAiB2B,CAAoB,GACrCxB,EAAsBwB,EAAqB,MAAM,GACjDtC,EAASsC,CAAoB;AAAA,IAC/B;AAAA,IACA,CAACvC,GAAYW,GAAeV,CAAQ;AAAA,EACtC;AAEA,SAAA6C,EAAU,MAAM;AACd,IAAI9B,KACFG,EAAe,CAAC;AAAA,EAClB,GACC,CAACH,CAAM,CAAC,GAEX8B,EAAU,MAAM;;AACd,UAAMC,KAAeV,IAAAf,EAAc,YAAd,gBAAAe,EAAuB,SAASnB;AACrD,IAAA6B,KAAA,QAAAA,EAAc;AAAA,EAAM,GACnB,CAAC7B,CAAW,CAAC,GAEhB4B,EAAU,MAAM;AACd,QAAK9B;AAEI,sBAAA,iBAAiB,SAASa,GAAqB,EAAI,GACnD,SAAA,iBAAiB,UAAUA,GAAqB,EAAI,GAEtD,MAAM;AACF,iBAAA,oBAAoB,SAASA,GAAqB,EAAI,GACtD,SAAA,oBAAoB,UAAUA,GAAqB,EAAI;AAAA,MAClE;AAAA,EAAA,GACC,CAACA,GAAqBb,CAAM,CAAC,qBAG7B,OAAI,EAAA,WAAWgC,EAAO,0BAA0B,GAAG,KAAK5B,GACvD,UAAA;AAAA,IAAA,gBAAA6B;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWC,EAAKF,EAAO,0BAA0B,GAAG;AAAA,UAClD,CAACA,EAAO,sCAAsC,CAAC,GAAG1C;AAAA,QAAA,CACnD;AAAA,QACD,MAAK;AAAA,QACL,SAAS,MAAM;AACb,UAAAW,EAAU,CAACD,CAAM;AAAA,QACnB;AAAA,QACA,WAAWgB;AAAA,QACX,iBAAehB;AAAA,QACf,iBAAc;AAAA,QACd,cAAY,GAAGF,CAAkB,IAAIX,CAAW;AAAA,QAChD,UAAAC;AAAA,QACC,GAAIY,KAAU,EAAE,iBAAiBP,EAAiB;AAAA,QACnD,KAAKiB;AAAA,QAEL,UAAA;AAAA,UAAA,gBAAAuB,EAAC,QAAK,EAAA,WAAWD,EAAO,gCAAgC,GACrD,UAAA;AAAA,YAAAlC;AAAA,YAAmB;AAAA,YAAEX;AAAA,UAAA,GACxB;AAAA,UACA,gBAAAgD;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,WAAWF,EAAKF,EAAO,+BAA+B,GAAG;AAAA,gBACvD,CAACA,EAAO,qCAAqC,CAAC,GAAGhC;AAAA,cAAA,CAClD;AAAA,cACD,MAAK;AAAA,cACL,MAAM;AAAA,YAAA;AAAA,UAAA;AAAA,QACR;AAAA,MAAA;AAAA,IACF;AAAA,IAEA,gBAAAmC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI1C;AAAA,QACJ,WAAWyC,EAAKF,EAAO,mCAAmC,CAAC;AAAA,QAC3D,OAAO,EAAE,GAAGrB,EAAc,OAAO,YAAYX,IAAS,YAAY,SAAS;AAAA,QAC3E,MAAK;AAAA,QACL,KAAKQ;AAAA,QAEL,4BAAC,MAAG,EAAA,WAAWwB,EAAO,0BAA0B,GAAG,KAAK1B,GACrD,UAAWtB,EAAA,IAAI,CAAC,EAAE,OAAAqD,GAAO,OAAAR,GAAO,UAAAzC,KAAYkD,MAC3C,gBAAAH;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWD,EAAKF,EAAO,iCAAiC,GAAG;AAAA,cACzD,CAACA,EAAO,yCAAyC,CAAC,GAAGM,MAAUpC;AAAA,cAC/D,CAAC8B,EAAO,2CAA2C,CAAC,GAAG5C;AAAAA,YAAA,CACxD;AAAA,YAED,MAAK;AAAA,YACL,WAAW8B;AAAA,YACX,SAAS,CAACD,MAAUQ,EAAcR,GAAO,EAAE,OAAAoB,GAAO,OAAAR,GAAO,UAAAzC,GAAU;AAAA,YACnE,aAAa,MAAMe,EAAemC,CAAK;AAAA,YACvC,SAAS,MAAMnC,EAAemC,CAAK;AAAA,YACnC,UAAU;AAAA,YACV,iBAAe3C,EAAc,KAAK,CAAC6B,MAASA,EAAK,UAAUK,CAAK;AAAA,YAEhE,UAAA,gBAAAI,EAAC,WAAM,SAASI,GAAO,WAAWL,EAAO,yCAAyC,GAAG,UAAU,IAC7F,UAAA;AAAA,cAAA,gBAAAG;AAAA,gBAACI;AAAA,gBAAA;AAAA,kBACC,IAAI,GAAGF,CAAK,IAAI5C,CAAgB;AAAA,kBAChC,UAAUkC;AAAA,kBACV,OAAAE;AAAA,kBACA,UAAU;AAAA,kBACV,UAAUzC;AAAAA,kBACV,SAASO,EAAc,KAAK,CAAC6B,MAASA,EAAK,UAAUK,CAAK;AAAA,gBAAA;AAAA,cAC5D;AAAA,cACA,gBAAAM,EAAC,UAAM,UAAME,EAAA,CAAA;AAAA,YAAA,EACf,CAAA;AAAA,UAAA;AAAA,UAnBKR;AAAA,QAAA,CAqBR,EACH,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;"}

package/dist/components/PeriodSelector/PeriodSelector.js

@@ -17,7 +17,7 @@ import "../Input/Input.js";
 import "../InputField/InputField.js";
 import { Label as B } from "../Label/Label.js";
 import "react-router";
-import "../../TablePlugin-CykqKW6X.js";
+import "../../TablePlugin-NmJsn2fm.js";
 import "../RteEditor/Providers/LanguageProvider.js";
 import "../RteEditor/Plugins/LinkPlugin/LinkContextMenu/LinkContextMenu.js";
 import "../RteEditor/hooks/components/Flyout.js";

package/dist/components/ProgrammeCard/ProgrammeCard.stories.js

@@ -17,7 +17,7 @@ import "../GridRow/GridRow.js";
 import "../IconButton/IconButton.js";
 import "../Input/Input.js";
 import "../InputField/InputField.js";
-import "../../TablePlugin-CykqKW6X.js";
+import "../../TablePlugin-NmJsn2fm.js";
 import "../RteEditor/Providers/LanguageProvider.js";
 import "../RteEditor/Plugins/LinkPlugin/LinkContextMenu/LinkContextMenu.js";
 import "../RteEditor/hooks/components/Flyout.js";

package/dist/components/RadioTabSelector/RadioTabSelector.js

@@ -17,7 +17,7 @@ import "../IconButton/IconButton.js";
 import "../Input/Input.js";
 import "../InputField/InputField.js";
 import "react-router";
-import "../../TablePlugin-CykqKW6X.js";
+import "../../TablePlugin-NmJsn2fm.js";
 import "../RteEditor/Providers/LanguageProvider.js";
 import "../RteEditor/Plugins/LinkPlugin/LinkContextMenu/LinkContextMenu.js";
 import "../RteEditor/hooks/components/Flyout.js";

package/dist/components/RteEditor/EditorHeader/EditorHeader.js

@@ -14,7 +14,7 @@ import "../../IconButton/IconButton.js";
 import "../../Input/Input.js";
 import "../../InputField/InputField.js";
 import "react-router";
-import "../../../TablePlugin-CykqKW6X.js";
+import "../../../TablePlugin-NmJsn2fm.js";
 import "../Providers/LanguageProvider.js";
 import "../Plugins/LinkPlugin/LinkContextMenu/LinkContextMenu.js";
 import "../hooks/components/Flyout.js";

package/dist/components/RteEditor/Plugins/BlockFormatPlugin/BlockFormatPlugin.js

@@ -1,7 +1,7 @@
 import { jsx as s } from "react/jsx-runtime";
 import { o as u } from "../../../../LexicalComposerContext.prod-DLlRM5wP.js";
 import { c as f } from "../../../../clsx-OuTLNxxd.js";
-import { N as _, c as p, M as h } from "../../../../Lexical.prod-m3GJsAAT.js";
+import { N as _, c as p, R as h } from "../../../../Lexical.prod-UwAbgYpF.js";
 import { useState as l, useEffect as k } from "react";
 import { Icon as I } from "../../../Icon/Icon.js";
 import { s as a } from "../../../../RteEditor.module-B_3uFnFu.js";

package/dist/components/RteEditor/Plugins/HistoryPlugin/HistoryPlugin.js

@@ -1,7 +1,7 @@
 import { jsxs as f, jsx as a } from "react/jsx-runtime";
 import { c as i } from "../../../../clsx-OuTLNxxd.js";
 import { o as h } from "../../../../LexicalComposerContext.prod-DLlRM5wP.js";
-import { aq as _, ar as C, as as y, at as k } from "../../../../Lexical.prod-m3GJsAAT.js";
+import { ar as _, as as C, at as y, au as k } from "../../../../Lexical.prod-UwAbgYpF.js";
 import { useState as s, useEffect as m } from "react";
 import { Icon as n } from "../../../Icon/Icon.js";
 import "../../../Buttons/Button.js";
@@ -17,7 +17,7 @@ import "../../../IconButton/IconButton.js";
 import "../../../Input/Input.js";
 import "../../../InputField/InputField.js";
 import "react-router";
-import "../../../../TablePlugin-CykqKW6X.js";
+import "../../../../TablePlugin-NmJsn2fm.js";
 import { s as r } from "../../../../RteEditor.module-B_3uFnFu.js";
 import { useTranslation as x } from "../../hooks/useTranslation.js";
 import "../LinkPlugin/LinkContextMenu/LinkContextMenu.js";

package/dist/components/RteEditor/Plugins/LinkPlugin/AddLinkForm/AddLinkFrom.js

@@ -1,7 +1,7 @@
 import "react/jsx-runtime";
 import "react";
-import { A as D } from "../../../../../TablePlugin-CykqKW6X.js";
-import "../../../../../helpers-5AryUrYu.js";
+import { A as D } from "../../../../../TablePlugin-NmJsn2fm.js";
+import "../../../../../helpers-DZIm3MiJ.js";
 import "../../../../Icon/Icon.js";
 import "../../../../Buttons/Button.js";
 import "../../../../Buttons/LinkButton.js";

package/dist/components/RteEditor/Plugins/LinkPlugin/LinkContextMenu/LinkContextMenu.js

@@ -1,6 +1,6 @@
 import { jsxs as k, Fragment as K, jsx as n } from "react/jsx-runtime";
 import { forwardRef as N, useState as b, useRef as T, useImperativeHandle as g, useLayoutEffect as E } from "react";
-import { e as R } from "../../../../../helpers-5AryUrYu.js";
+import { e as R } from "../../../../../helpers-DZIm3MiJ.js";
 import { Icon as m } from "../../../../Icon/Icon.js";
 import { useTranslation as S } from "../../../hooks/useTranslation.js";
 import { Button as y } from "../../../../Buttons/Button.js";

package/dist/components/RteEditor/Plugins/LinkPlugin/LinkPlugin.js

@@ -1,11 +1,11 @@
-import { jsx as k, jsxs as Y } from "react/jsx-runtime";
+import { jsx as k, jsxs as X } from "react/jsx-runtime";
 import { o as W } from "../../../../LexicalComposerContext.prod-DLlRM5wP.js";
-import { c as q } from "../../../../clsx-OuTLNxxd.js";
-import { p as U, k as G, v as J } from "../../../../LexicalLink.prod-D0qasaVP.js";
+import { c as Y } from "../../../../clsx-OuTLNxxd.js";
+import { p as U, k as G, v as J } from "../../../../LexicalLink.prod-Bsa9J7L-.js";
 import { useRef as a, useState as Q, useEffect as m } from "react";
-import { Y as Z, N as f, n as $, ap as tt, c as N, L as et, y as ot, X as rt } from "../../../../Lexical.prod-m3GJsAAT.js";
-import { A as nt } from "../../../../TablePlugin-CykqKW6X.js";
-import { e as it } from "../../../../helpers-5AryUrYu.js";
+import { _ as Z, N as f, q as $, aq as tt, c as N, L as et, m as ot, X as rt } from "../../../../Lexical.prod-UwAbgYpF.js";
+import { A as nt } from "../../../../TablePlugin-NmJsn2fm.js";
+import { e as it } from "../../../../helpers-DZIm3MiJ.js";
 import { LinkContextMenu as st } from "./LinkContextMenu/LinkContextMenu.js";
 import { useFlyout as ct } from "../../hooks/useFlyout.js";
 import { Icon as lt } from "../../../Icon/Icon.js";
@@ -51,8 +51,8 @@ const mt = 200, I = (p) => {
     n = n.getParent();
   }
   return !1;
-}, Xt = ({ parentScrollPosition: p }) => {
-  const n = ut(), [c] = W(), { flyout: A, showFlyout: _, hideFlyout: y, isVisible: u } = ct(), d = a(void 0), w = a(!1), C = a(""), g = a(""), [L, H] = Q({ active: !1, url: "", linktext: "" }), P = a(u), x = a(null), S = a(null), T = a(void 0), v = () => {
+}, qt = ({ parentScrollPosition: p }) => {
+  const n = ut(), [c] = W(), { flyout: A, showFlyout: E, hideFlyout: C, isVisible: u } = ct(), d = a(void 0), w = a(!1), L = a(""), g = a(""), [v, H] = Q({ active: !1, url: "", linktext: "" }), P = a(u), x = a(null), S = a(null), T = a(void 0), y = () => {
     c.update(() => {
       const e = f();
       x.current = e;
@@ -62,7 +62,7 @@ const mt = 200, I = (p) => {
       x.current && ot(x.current);
     });
   }, M = (e, t) => {
-    _({
+    E({
       position: t,
       children: /* @__PURE__ */ k(
         st,
@@ -77,16 +77,16 @@ const mt = 200, I = (p) => {
     });
   }, D = () => {
     var e;
-    (e = T.current) == null || e.clearForm(), y(), R();
+    (e = T.current) == null || e.clearForm(), C(), R();
   }, F = () => {
     var t;
     const e = (t = S.current) == null ? void 0 : t.getBoundingClientRect();
-    !w.current && e && (v(), _({ position: { top: e.bottom, left: e.left }, ...j }), setTimeout(() => {
+    !w.current && e && (y(), E({ position: { top: e.bottom, left: e.left }, ...j }), setTimeout(() => {
       var o;
       return (o = d.current) == null ? void 0 : o.setDefaults("", g.current);
     }, 0));
   }, b = () => {
-    y(), R();
+    C(), R();
   }, K = (e, t) => {
     c.update(() => {
       const o = f();
@@ -97,9 +97,9 @@ const mt = 200, I = (p) => {
             const l = rt(t);
             s.replace(l), l.select();
           }
-          if (t !== C.current && C.current === "") {
-            const { anchor: l, focus: E } = o;
-            o.insertText(t), l.offset -= t.length, E.offset = l.offset + t.length;
+          if (t !== L.current && L.current === "") {
+            const { anchor: l, focus: _ } = o;
+            o.insertText(t), l.offset -= t.length, _.offset = l.offset + t.length;
           }
         }
         J(it(e), { target: "_blank" });
@@ -112,7 +112,7 @@ const mt = 200, I = (p) => {
     children: /* @__PURE__ */ k(
       nt,
       {
-        isLink: L,
+        isLink: v,
         onCloseHandler: b,
         onSaveHandler: (e, t) => K(e, t),
         ref: d
@@ -121,7 +121,7 @@ const mt = 200, I = (p) => {
   };
   return m(() => {
     var e, t;
-    u ? (w.current = !0, (t = d.current) == null || t.focusFirstField()) : ((e = d.current) == null || e.clearForm(), C.current = g.current = "", setTimeout(() => w.current = !1, mt));
+    u ? (w.current = !0, (t = d.current) == null || t.focusFirstField()) : ((e = d.current) == null || e.clearForm(), L.current = g.current = "", setTimeout(() => w.current = !1, mt));
   }, [d, u]), m(() => {
     const e = (r) => {
       if (N(r) && r.isCollapsed()) {
@@ -143,7 +143,7 @@ const mt = 200, I = (p) => {
       $,
       (r) => {
         const i = f();
-        return v(), r.preventDefault(), r.stopPropagation(), r.stopImmediatePropagation(), e(i), !1;
+        return y(), r.preventDefault(), r.stopPropagation(), r.stopImmediatePropagation(), e(i), !1;
       },
       0
     );
@@ -156,16 +156,16 @@ const mt = 200, I = (p) => {
       (o) => {
         if (o.ctrlKey && o.shiftKey && o.key === "U") {
           const r = f();
-          if (v(), !N(r))
+          if (y(), !N(r))
             return !1;
-          const i = O(r.anchor.getNode()), s = (E = "", X = "") => {
+          const i = O(r.anchor.getNode()), s = (_ = "", q = "") => {
             F(), setTimeout(() => {
               var B;
-              return (B = d.current) == null ? void 0 : B.setDefaults(E, X);
+              return (B = d.current) == null ? void 0 : B.setDefaults(_, q);
             }, 0);
           };
           if (i)
-            return o.preventDefault(), o.stopPropagation(), o.stopImmediatePropagation(), C.current = i.linktext, s(i.url, i.linktext), !0;
+            return o.preventDefault(), o.stopPropagation(), o.stopImmediatePropagation(), L.current = i.linktext, s(i.url, i.linktext), !0;
           const l = r.getTextContent();
           return l !== "" ? (g.current = l, s("", g.current), !0) : (F(), !0);
         }
@@ -176,7 +176,7 @@ const mt = 200, I = (p) => {
       H(
         o.read(() => {
           const r = f();
-          if (v(), N(r)) {
+          if (y(), N(r)) {
             const i = r.anchor.getNode(), s = I(i);
             if (s)
               return {
@@ -202,26 +202,26 @@ const mt = 200, I = (p) => {
   }, [u]), m(() => {
     u && b();
   }, [p]), m(() => {
-    L.active || y();
-  }, [L]), m(() => {
+    v.active || C();
+  }, [v]), m(() => {
     const e = (o) => (z(t), o.key === "Escape" && P.current && (o.preventDefault(), o.stopPropagation(), b()), !0);
     window.addEventListener("keydown", e, { capture: !0 });
     const t = () => {
-      y();
+      C();
     };
     return z(t), window.addEventListener("scroll", t), window.addEventListener("resize", t), () => {
       window.removeEventListener("keydown", e), window.removeEventListener("scroll", t), window.removeEventListener("resize", t), at(t);
     };
-  }, []), /* @__PURE__ */ k("div", { className: h["editor__toolbar-button-group"], children: /* @__PURE__ */ Y("div", { className: h["editor__toolbar-button-flyoutwrapper"], children: [
+  }, []), /* @__PURE__ */ k("div", { className: h["editor__toolbar-button-group"], children: /* @__PURE__ */ X("div", { className: h["editor__toolbar-button-flyoutwrapper"], children: [
     /* @__PURE__ */ k(
       "button",
       {
         onClick: F,
         title: n.links.linkTooltip,
-        className: q(
+        className: Y(
           h["editor__toolbar-button"],
           h["editor__toolbar-button--link"],
-          L.active && h["editor__toolbar-button--active"]
+          v.active && h["editor__toolbar-button--active"]
         ),
         "aria-label": n.aria.labels.link,
         "aria-keyshortcuts": n.aria.keyshortcuts.link,
@@ -234,7 +234,7 @@ const mt = 200, I = (p) => {
   ] }) });
 };
 export {
-  Xt as LinkPlugin,
+  qt as LinkPlugin,
   O as getLinkNodeTag
 };
 //# sourceMappingURL=LinkPlugin.js.map

package/dist/components/RteEditor/Plugins/LinkPlugin/helpers.js

@@ -1,4 +1,4 @@
-import { M as e, e as r, a as s, v as l } from "../../../../helpers-5AryUrYu.js";
+import { M as e, e as r, a as s, v as l } from "../../../../helpers-DZIm3MiJ.js";
 export {
   e as MATCHERS,
   r as ensureHttps,