npm - @uva-glass/component-library - Versions diffs - 1.62.12 → 1.64.0 - Mend

@uva-glass/component-library 1.62.12 → 1.64.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (80) hide show

package/dist/components/CheckboxTree/CheckboxTree.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { jsxs as i, jsx as a } from "react/jsx-runtime";
+import { jsxs as n, jsx as a } from "react/jsx-runtime";
 import { useRef as T, useEffect as N } from "react";
 import { c as g } from "../../clsx-OuTLNxxd.js";
 import { Icon as L } from "../Icon/Icon.js";
@@ -17,10 +17,14 @@ import "../IconButton/IconButton.js";
 import "../Input/Input.js";
 import "../InputField/InputField.js";
 import "react-router-dom";
-import "../../TablePlugin-B3ZkyOU_.js";
+import "../../TablePlugin-BLzR0g93.js";
+import "lexical";
+import "@lexical/list";
+import "@lexical/link";
 import "../RteEditor/Providers/LanguageProvider.js";
 import "../RteEditor/Plugins/LinkPlugin/LinkContextMenu/LinkContextMenu.js";
 import "../RteEditor/hooks/components/Flyout.js";
+import "@staartwind.nl/lexical-paste-from-word";
 import "../SelectListbox/SelectListbox.js";
 import "../SelectListbox/SelectProvider.js";
 import "../Sortable/components/SortableItem.js";
@@ -35,18 +39,18 @@ import '../../assets/CheckboxTree.css';const o = {
   "checkbox-tree__leaves": "_checkbox-tree__leaves_xbe4e_39",
   "checkbox-tree__leaves--expanded": "_checkbox-tree__leaves--expanded_xbe4e_48",
   "checkbox-tree__leaf": "_checkbox-tree__leaf_xbe4e_52"
-}, ie = ({ title: p, checkboxTree: A, defaultValue: l, onChange: x }) => {
-  const s = T([]), { lessThan: n } = j(), _ = (r, e = document) => [].slice.call(e.querySelectorAll(r)), E = () => {
+}, pe = ({ title: b, checkboxTree: A, defaultValue: l, onChange: m }) => {
+  const s = T([]), { lessThan: i } = j(), _ = (r, e = document) => [].slice.call(e.querySelectorAll(r)), E = () => {
     const r = s.current.reduce((e, t) => (t.name && t.checked && e.push(t.value), e), []);
-    x && x(r);
-  }, m = (r) => {
+    m && m(r);
+  }, x = (r) => {
     var e, t, d;
     for (; r; ) {
       const c = (t = (e = r.closest("[data-ul]")) == null ? void 0 : e.parentNode) == null ? void 0 : t.querySelector("input"), f = _(
         "input",
         (d = c == null ? void 0 : c.closest("[data-li]")) == null ? void 0 : d.querySelector("[data-ul]")
-      ).reduce((k, v) => (v.disabled || k.push(v.checked), k), []), b = f.every(Boolean), F = f.some(Boolean);
-      if (c && (c.checked = b, c.indeterminate = !b && b !== F), !c || r === c)
+      ).reduce((k, v) => (v.disabled || k.push(v.checked), k), []), p = f.every(Boolean), F = f.some(Boolean);
+      if (c && (c.checked = p, c.indeterminate = !p && p !== F), !c || r === c)
         break;
       r = c;
     }
@@ -62,12 +66,12 @@ import '../../assets/CheckboxTree.css';const o = {
     const e = r.target;
     if (!e || !e.parentNode || !e.parentNode.parentNode) return;
     const t = e.parentNode.parentNode;
-    if (n.md && ((c = e.previousElementSibling) == null ? void 0 : c.tagName) === "BUTTON" && t.getAttribute("aria-expanded") === "false") {
+    if (i.md && ((c = e.previousElementSibling) == null ? void 0 : c.tagName) === "BUTTON" && t.getAttribute("aria-expanded") === "false") {
       r.preventDefault(), u(t.querySelector("button"), t);
       return;
     }
     if (s.current.indexOf(e) === -1) return;
-    (e.parentNode.parentNode ? _("input", e.parentNode.parentNode) : []).forEach((h) => h.checked = h.disabled ? !1 : e.checked), m(e), E();
+    (e.parentNode.parentNode ? _("input", e.parentNode.parentNode) : []).forEach((h) => h.checked = h.disabled ? !1 : e.checked), x(e), E();
   }, B = (r) => {
     const e = r.target, t = e.closest("[data-li]");
     u(e, t);
@@ -76,25 +80,25 @@ import '../../assets/CheckboxTree.css';const o = {
     s.current = _("input") || [];
   }, []), N(() => {
     l && s.current.forEach((r) => {
-      l.includes(r.value) && (r.checked = !0, m(r));
+      l.includes(r.value) && (r.checked = !0, x(r));
     });
-  }, [l]), /* @__PURE__ */ i("div", { children: [
-    p && /* @__PURE__ */ a("span", { className: o["checkbox-tree__header"], children: p }),
-    /* @__PURE__ */ a("div", { onClick: q, "data-ul": !0, role: "tree", tabIndex: 0, children: A.map(({ itemName: r, children: e }) => /* @__PURE__ */ i(
+  }, [l]), /* @__PURE__ */ n("div", { children: [
+    b && /* @__PURE__ */ a("span", { className: o["checkbox-tree__header"], children: b }),
+    /* @__PURE__ */ a("div", { onClick: q, "data-ul": !0, role: "tree", tabIndex: 0, children: A.map(({ itemName: r, children: e }) => /* @__PURE__ */ n(
       "div",
       {
         className: o["checkbox-tree__branch"],
         "data-li": !0,
-        "aria-expanded": n.md ? "false" : "true",
+        "aria-expanded": i.md ? "false" : "true",
         children: [
-          /* @__PURE__ */ i(C, { inline: !0, className: o["checkbox-tree__branch--formfield"], children: [
+          /* @__PURE__ */ n(C, { inline: !0, className: o["checkbox-tree__branch--formfield"], children: [
             /* @__PURE__ */ a(R, { variant: "blank", onClick: B, children: /* @__PURE__ */ a(
               L,
               {
                 name: "CheveronRight",
                 size: 16,
                 className: g(o["checkbox-tree__branch--icon"], {
-                  [o["checkbox-tree__branch--icon--expanded"]]: !n.md
+                  [o["checkbox-tree__branch--icon--expanded"]]: !i.md
                 })
               }
             ) }),
@@ -105,10 +109,10 @@ import '../../assets/CheckboxTree.css';const o = {
             "div",
             {
               className: g(o["checkbox-tree__leaves"], {
-                [o["checkbox-tree__leaves--expanded"]]: !n.md
+                [o["checkbox-tree__leaves--expanded"]]: !i.md
               }),
               "data-ul": !0,
-              children: e.map(({ itemName: t, itemValue: d, disabled: c }) => /* @__PURE__ */ a("div", { className: o["checkbox-tree__leaf"], "data-li": !0, children: /* @__PURE__ */ i(C, { inline: !0, className: o["checkbox-tree__branch--formfield"], children: [
+              children: e.map(({ itemName: t, itemValue: d, disabled: c }) => /* @__PURE__ */ a("div", { className: o["checkbox-tree__leaf"], "data-li": !0, children: /* @__PURE__ */ n(C, { inline: !0, className: o["checkbox-tree__branch--formfield"], children: [
                 /* @__PURE__ */ a(y, { id: t, name: t, value: d, disabled: c }),
                 /* @__PURE__ */ a(S, { htmlFor: t, children: t })
               ] }) }, t))
@@ -121,6 +125,6 @@ import '../../assets/CheckboxTree.css';const o = {
   ] });
 };
 export {
-  ie as CheckboxTree
+  pe as CheckboxTree
 };
 //# sourceMappingURL=CheckboxTree.js.map

package/dist/components/CheckboxTree/CheckboxTree.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CheckboxTree.js","sources":["../../../src/components/CheckboxTree/CheckboxTree.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport type { MouseEventHandler } from 'react';\n\nimport styles from './CheckboxTree.module.css';\n\nimport { Button, Checkbox, FormField, Icon, Label } from 'components';\nimport { useResponsive } from 'components/hooks/useResponsive';\n\n// TODO: Currently the checkbox tree shows odd behavior when a disabled checkbox is checked. When deselecting the parent checkbox, the disabled checkbox is deselected, and will never be checked again. We'll leave this for now, until we run into a real world example where this is necessary.\n\ntype CheckboxLeaf = {\n itemName: string;\n itemValue: string;\n disabled?: boolean;\n};\n\ntype CheckboxBranch = {\n itemName: string;\n children: CheckboxLeaf[];\n};\n\nexport interface CheckboxTreeProps {\n /** The title of the component. /\n title?: string;\n /* Array of checkbox groups with a label and array of children (itemName, itemValue and disabled boolean). /\n checkboxTree: CheckboxBranch[];\n /* Array of selected values. /\n defaultValue?: string[];\n /* Returns array of selected values. /\n onChange?: (value: string[]) => void;\n}\n\n/* Represents a component to render a tree of checkboxes. /\nexport const CheckboxTree = ({ title, checkboxTree, defaultValue, onChange }: CheckboxTreeProps) => {\n const checkboxNodes = useRef<HTMLInputElement[]>([]);\n const { lessThan } = useResponsive();\n\n const nodeArray = (selector: string, parent = document) => [].slice.call(parent.querySelectorAll(selector));\n\n const setValue = () => {\n const values = checkboxNodes.current.reduce((values, checkbox) => {\n if (checkbox.name && checkbox.checked) {\n values.push(checkbox.value);\n }\n return values;\n }, [] as string[]);\n\n if (onChange) onChange(values);\n };\n\n const setCheckboxesState = (check: HTMLInputElement) => {\n while (check) {\n const parent = check.closest('[data-ul]')?.parentNode?.querySelector('input');\n const siblings: HTMLInputElement[] = nodeArray(\n 'input',\n parent?.closest('[data-li]')?.querySelector('[data-ul]') as Document \| undefined\n );\n\n const checkStatus = siblings.reduce((status, check) => {\n if (!check.disabled) status.push(check.checked);\n return status;\n }, [] as boolean[]);\n\n const every = checkStatus.every(Boolean);\n const some = checkStatus.some(Boolean);\n\n if (parent) {\n parent.checked = every;\n parent.indeterminate = !every && every !== some;\n }\n\n if (!parent \|\| check === parent) {\n break;\n }\n\n check = parent;\n }\n };\n\n const setExpandedAttributes = (trigger: HTMLButtonElement, container: Element \| null) => {\n const children = container?.querySelector('[data-ul]');\n\n (trigger.childNodes[0] as Element).classList.toggle(styles['checkbox-tree__branch--icon--expanded']);\n container\n ?.closest('[data-li]')\n ?.setAttribute(\n 'aria-expanded',\n container?.closest('[data-li]')?.getAttribute('aria-expanded') === 'false' ? 'true' : 'false'\n );\n\n if (children) {\n children.classList.toggle(styles['checkbox-tree__leaves--expanded']);\n }\n };\n\n const handleChange: MouseEventHandler<HTMLDivElement> = (event) => {\n const check = event.target as HTMLInputElement;\n\n if (!check \|\| !check.parentNode \|\| !check.parentNode.parentNode) return;\n const parentCheckbox = check.parentNode.parentNode as HTMLElement;\n\n if (\n lessThan.md &&\n check.previousElementSibling?.tagName === 'BUTTON' &&\n parentCheckbox.getAttribute('aria-expanded') === 'false'\n ) {\n event.preventDefault();\n setExpandedAttributes(parentCheckbox.querySelector('button') as HTMLButtonElement, parentCheckbox);\n return;\n }\n\n if (checkboxNodes.current.indexOf(check) === -1) return;\n\n const children: HTMLInputElement[] = (check.parentNode.parentNode as Document)\n ? nodeArray('input', check.parentNode.parentNode as Document)\n : [];\n\n children.forEach((child) => {\n return (child.checked = child.disabled ? false : check.checked);\n });\n\n setCheckboxesState(check);\n setValue();\n };\n\n const handleExpanded: MouseEventHandler<HTMLButtonElement> = (event) => {\n const target = event.target as HTMLButtonElement;\n const parent = target.closest('[data-li]');\n setExpandedAttributes(target, parent);\n };\n\n useEffect(() => {\n checkboxNodes.current = nodeArray('input') \|\| [];\n }, []);\n\n useEffect(() => {\n if (defaultValue) {\n checkboxNodes.current.forEach((checkbox) => {\n if (defaultValue.includes(checkbox.value)) {\n checkbox.checked = true;\n setCheckboxesState(checkbox);\n }\n });\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [defaultValue]);\n\n return (\n <div>\n {title && <span className={styles['checkbox-tree__header']}>{title}</span>}\n {/ eslint-disable-next-line jsx-a11y/click-events-have-key-events */}\n <div onClick={handleChange} data-ul role=\"tree\" tabIndex={0}>\n {checkboxTree.map(({ itemName, children }) => (\n <div\n key={itemName}\n className={styles['checkbox-tree__branch']}\n data-li\n aria-expanded={lessThan.md ? 'false' : 'true'}\n >\n <FormField inline className={styles['checkbox-tree__branch--formfield']}>\n <Button variant=\"blank\" onClick={handleExpanded}>\n <Icon\n name=\"CheveronRight\"\n size={16}\n className={clsx(styles['checkbox-tree__branch--icon'], {\n [styles['checkbox-tree__branch--icon--expanded']]: !lessThan.md,\n })}\n />\n </Button>\n <Checkbox id={itemName} disabled={children.every((checkbox) => checkbox.disabled)} />\n <Label htmlFor={itemName}>{itemName}</Label>\n </FormField>\n <div\n className={clsx(styles['checkbox-tree__leaves'], {\n [styles['checkbox-tree__leaves--expanded']]: !lessThan.md,\n })}\n data-ul\n >\n {children.map(({ itemName, itemValue, disabled }) => (\n <div key={itemName} className={styles['checkbox-tree__leaf']} data-li>\n <FormField inline className={styles['checkbox-tree__branch--formfield']}>\n <Checkbox id={itemName} name={itemName} value={itemValue} disabled={disabled} />\n <Label htmlFor={itemName}>{itemName}</Label>\n </FormField>\n </div>\n ))}\n </div>\n </div>\n ))}\n </div>\n </div>\n );\n};\n"],"names":["CheckboxTree","title","checkboxTree","defaultValue","onChange","checkboxNodes","useRef","lessThan","useResponsive","nodeArray","selector","parent","setValue","values","checkbox","setCheckboxesState","check","_b","_a","checkStatus","_c","status","every","some","setExpandedAttributes","trigger","container","children","styles","handleChange","event","parentCheckbox","child","handleExpanded","target","useEffect","itemName","jsxs","FormField","jsx","Button","Icon","clsx","Checkbox","Label","itemValue","disabled"],"mappings":"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"}
1	+ {"version":3,"file":"CheckboxTree.js","sources":["../../../src/components/CheckboxTree/CheckboxTree.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport type { MouseEventHandler } from 'react';\n\nimport styles from './CheckboxTree.module.css';\n\nimport { Button, Checkbox, FormField, Icon, Label } from 'components';\nimport { useResponsive } from 'components/hooks/useResponsive';\n\n// TODO: Currently the checkbox tree shows odd behavior when a disabled checkbox is checked. When deselecting the parent checkbox, the disabled checkbox is deselected, and will never be checked again. We'll leave this for now, until we run into a real world example where this is necessary.\n\ntype CheckboxLeaf = {\n itemName: string;\n itemValue: string;\n disabled?: boolean;\n};\n\ntype CheckboxBranch = {\n itemName: string;\n children: CheckboxLeaf[];\n};\n\nexport interface CheckboxTreeProps {\n /** The title of the component. /\n title?: string;\n /* Array of checkbox groups with a label and array of children (itemName, itemValue and disabled boolean). /\n checkboxTree: CheckboxBranch[];\n /* Array of selected values. /\n defaultValue?: string[];\n /* Returns array of selected values. /\n onChange?: (value: string[]) => void;\n}\n\n/* Represents a component to render a tree of checkboxes. /\nexport const CheckboxTree = ({ title, checkboxTree, defaultValue, onChange }: CheckboxTreeProps) => {\n const checkboxNodes = useRef<HTMLInputElement[]>([]);\n const { lessThan } = useResponsive();\n\n const nodeArray = (selector: string, parent = document) => [].slice.call(parent.querySelectorAll(selector));\n\n const setValue = () => {\n const values = checkboxNodes.current.reduce((values, checkbox) => {\n if (checkbox.name && checkbox.checked) {\n values.push(checkbox.value);\n }\n return values;\n }, [] as string[]);\n\n if (onChange) onChange(values);\n };\n\n const setCheckboxesState = (check: HTMLInputElement) => {\n while (check) {\n const parent = check.closest('[data-ul]')?.parentNode?.querySelector('input');\n const siblings: HTMLInputElement[] = nodeArray(\n 'input',\n parent?.closest('[data-li]')?.querySelector('[data-ul]') as Document \| undefined\n );\n\n const checkStatus = siblings.reduce((status, check) => {\n if (!check.disabled) status.push(check.checked);\n return status;\n }, [] as boolean[]);\n\n const every = checkStatus.every(Boolean);\n const some = checkStatus.some(Boolean);\n\n if (parent) {\n parent.checked = every;\n parent.indeterminate = !every && every !== some;\n }\n\n if (!parent \|\| check === parent) {\n break;\n }\n\n check = parent;\n }\n };\n\n const setExpandedAttributes = (trigger: HTMLButtonElement, container: Element \| null) => {\n const children = container?.querySelector('[data-ul]');\n\n (trigger.childNodes[0] as Element).classList.toggle(styles['checkbox-tree__branch--icon--expanded']);\n container\n ?.closest('[data-li]')\n ?.setAttribute(\n 'aria-expanded',\n container?.closest('[data-li]')?.getAttribute('aria-expanded') === 'false' ? 'true' : 'false'\n );\n\n if (children) {\n children.classList.toggle(styles['checkbox-tree__leaves--expanded']);\n }\n };\n\n const handleChange: MouseEventHandler<HTMLDivElement> = (event) => {\n const check = event.target as HTMLInputElement;\n\n if (!check \|\| !check.parentNode \|\| !check.parentNode.parentNode) return;\n const parentCheckbox = check.parentNode.parentNode as HTMLElement;\n\n if (\n lessThan.md &&\n check.previousElementSibling?.tagName === 'BUTTON' &&\n parentCheckbox.getAttribute('aria-expanded') === 'false'\n ) {\n event.preventDefault();\n setExpandedAttributes(parentCheckbox.querySelector('button') as HTMLButtonElement, parentCheckbox);\n return;\n }\n\n if (checkboxNodes.current.indexOf(check) === -1) return;\n\n const children: HTMLInputElement[] = (check.parentNode.parentNode as Document)\n ? nodeArray('input', check.parentNode.parentNode as Document)\n : [];\n\n children.forEach((child) => {\n return (child.checked = child.disabled ? false : check.checked);\n });\n\n setCheckboxesState(check);\n setValue();\n };\n\n const handleExpanded: MouseEventHandler<HTMLButtonElement> = (event) => {\n const target = event.target as HTMLButtonElement;\n const parent = target.closest('[data-li]');\n setExpandedAttributes(target, parent);\n };\n\n useEffect(() => {\n checkboxNodes.current = nodeArray('input') \|\| [];\n }, []);\n\n useEffect(() => {\n if (defaultValue) {\n checkboxNodes.current.forEach((checkbox) => {\n if (defaultValue.includes(checkbox.value)) {\n checkbox.checked = true;\n setCheckboxesState(checkbox);\n }\n });\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [defaultValue]);\n\n return (\n <div>\n {title && <span className={styles['checkbox-tree__header']}>{title}</span>}\n {/ eslint-disable-next-line jsx-a11y/click-events-have-key-events */}\n <div onClick={handleChange} data-ul role=\"tree\" tabIndex={0}>\n {checkboxTree.map(({ itemName, children }) => (\n <div\n key={itemName}\n className={styles['checkbox-tree__branch']}\n data-li\n aria-expanded={lessThan.md ? 'false' : 'true'}\n >\n <FormField inline className={styles['checkbox-tree__branch--formfield']}>\n <Button variant=\"blank\" onClick={handleExpanded}>\n <Icon\n name=\"CheveronRight\"\n size={16}\n className={clsx(styles['checkbox-tree__branch--icon'], {\n [styles['checkbox-tree__branch--icon--expanded']]: !lessThan.md,\n })}\n />\n </Button>\n <Checkbox id={itemName} disabled={children.every((checkbox) => checkbox.disabled)} />\n <Label htmlFor={itemName}>{itemName}</Label>\n </FormField>\n <div\n className={clsx(styles['checkbox-tree__leaves'], {\n [styles['checkbox-tree__leaves--expanded']]: !lessThan.md,\n })}\n data-ul\n >\n {children.map(({ itemName, itemValue, disabled }) => (\n <div key={itemName} className={styles['checkbox-tree__leaf']} data-li>\n <FormField inline className={styles['checkbox-tree__branch--formfield']}>\n <Checkbox id={itemName} name={itemName} value={itemValue} disabled={disabled} />\n <Label htmlFor={itemName}>{itemName}</Label>\n </FormField>\n </div>\n ))}\n </div>\n </div>\n ))}\n </div>\n </div>\n );\n};\n"],"names":["CheckboxTree","title","checkboxTree","defaultValue","onChange","checkboxNodes","useRef","lessThan","useResponsive","nodeArray","selector","parent","setValue","values","checkbox","setCheckboxesState","check","_b","_a","checkStatus","_c","status","every","some","setExpandedAttributes","trigger","container","children","styles","handleChange","event","parentCheckbox","child","handleExpanded","target","useEffect","itemName","jsxs","FormField","jsx","Button","Icon","clsx","Checkbox","Label","itemValue","disabled"],"mappings":"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"}

package/dist/components/FormInput/FormInput.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { jsxs as f, jsx as o } from "react/jsx-runtime";
+import { jsxs as f, jsx as i } from "react/jsx-runtime";
 import { c as l } from "../../clsx-OuTLNxxd.js";
 import "react";
 import "../Buttons/Button.js";
@@ -15,10 +15,14 @@ import "../IconButton/IconButton.js";
 import "../Input/Input.js";
 import "../InputField/InputField.js";
 import "react-router-dom";
-import "../../TablePlugin-B3ZkyOU_.js";
+import "../../TablePlugin-BLzR0g93.js";
+import "lexical";
+import "@lexical/list";
+import "@lexical/link";
 import "../RteEditor/Providers/LanguageProvider.js";
 import "../RteEditor/Plugins/LinkPlugin/LinkContextMenu/LinkContextMenu.js";
 import "../RteEditor/hooks/components/Flyout.js";
+import "@staartwind.nl/lexical-paste-from-word";
 import "../SelectListbox/SelectListbox.js";
 import "../SelectListbox/SelectProvider.js";
 import "../Sortable/components/SortableItem.js";
@@ -31,22 +35,22 @@ import '../../assets/FormInput.css';const r = {
   "form-field__input-container": "_form-field__input-container_c9jem_34",
   "form-field__input": "_form-field__input_c9jem_25",
   "form-field__input--error": "_form-field__input--error_c9jem_60"
-}, M = ({
+}, R = ({
   id: t,
   label: m,
   labelPosition: p = "top",
   type: _ = "text",
   required: c = !1,
-  notValidatedText: i = "",
+  notValidatedText: e = "",
   onChange: n
 }) => {
-  const a = (e) => ["e", "E", "+", "-"].includes(e.key) && e.preventDefault(), d = (e) => {
-    typeof n == "function" && n(e.target.value);
+  const a = (o) => ["e", "E", "+", "-"].includes(o.key) && o.preventDefault(), d = (o) => {
+    typeof n == "function" && n(o.target.value);
   };
   return /* @__PURE__ */ f("div", { className: l(r["form-field__container"], r[`form-field__container--label-${p}`]), children: [
-    m && /* @__PURE__ */ o(s, { htmlFor: t, required: c, children: m }),
+    m && /* @__PURE__ */ i(s, { htmlFor: t, required: c, children: m }),
     /* @__PURE__ */ f("div", { className: r["form-field__input-feedback-container"], children: [
-      /* @__PURE__ */ o("div", { className: r["form-field__input-container"], children: /* @__PURE__ */ o(
+      /* @__PURE__ */ i("div", { className: r["form-field__input-container"], children: /* @__PURE__ */ i(
         "input",
         {
           id: t,
@@ -54,15 +58,15 @@ import '../../assets/FormInput.css';const r = {
           ..._ === "number" && { onKeyDown: a },
           onChange: d,
           className: l(r["form-field__input"], [
-            i !== "" && r["form-field__input--error"]
+            e !== "" && r["form-field__input--error"]
           ])
         }
       ) }),
-      i !== "" && /* @__PURE__ */ o(u, { level: "error", feedback: i })
+      e !== "" && /* @__PURE__ */ i(u, { level: "error", feedback: e })
     ] })
   ] });
 };
 export {
-  M as FormInput
+  R as FormInput
 };
 //# sourceMappingURL=FormInput.js.map

package/dist/components/FormInput/FormInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FormInput.js","sources":["../../../src/components/FormInput/FormInput.tsx"],"sourcesContent":["import clsx from 'clsx';\n\nimport styles from './FormInput.module.css';\n\nimport { FeedbackBox, Label } from 'components';\n\nexport interface FormInputProps {\n /** The id of the input element. /\n id: string;\n /* label text if empthy the label is not renderd /\n label: string;\n /* label position `top` or `left`. The default is `top`. /\n labelPosition?: 'top' \| 'left';\n /* The type of the input element. /\n type?: 'text' \| 'password' \| 'email' \| 'number';\n /* Shows red * /\n required?: boolean;\n /* error text to display if set /\n notValidatedText?: string;\n /* Returns array of selected values as number */\n onChange: (value: string) => void;\n}\n\nexport const FormInput = ({\n id,\n label,\n labelPosition = 'top',\n type = 'text',\n required = false,\n notValidatedText = '',\n onChange,\n}: FormInputProps) => {\n const blockInvalidChar = (event: React.KeyboardEvent<HTMLInputElement>) =>\n ['e', 'E', '+', '-'].includes(event.key) && event.preventDefault();\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n if (typeof onChange === 'function') {\n onChange(event.target.value);\n }\n };\n\n return (\n <div className={clsx(styles['form-field__container'], styles[`form-field__container--label-${labelPosition}`])}>\n {label && (\n <Label htmlFor={id} required={required}>\n {label}\n </Label>\n )}\n\n <div className={styles['form-field__input-feedback-container']}>\n <div className={styles['form-field__input-container']}>\n <input\n id={id}\n type={type}\n {...(type === 'number' && { onKeyDown: blockInvalidChar })}\n onChange={handleChange}\n className={clsx(styles['form-field__input'], [\n notValidatedText !== '' && styles['form-field__input--error'],\n ])}\n />\n </div>\n {notValidatedText !== '' && <FeedbackBox level=\"error\" feedback={notValidatedText} />}\n </div>\n </div>\n );\n};\n"],"names":["FormInput","id","label","labelPosition","type","required","notValidatedText","onChange","blockInvalidChar","event","handleChange","jsxs","clsx","styles","jsx","Label","FeedbackBox"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~GAuBaA,IAAY,CAAC;AAAA,EACxB,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,MAAAC,IAAO;AAAA,EACP,UAAAC,IAAW;AAAA,EACX,kBAAAC,IAAmB;AAAA,EACnB,UAAAC;AACF,MAAsB;AACpB,QAAMC,IAAmB,CAACC,MACxB,CAAC,KAAK,KAAK,KAAK,GAAG,EAAE,SAASA,EAAM,GAAG,KAAKA,EAAM,eAAe,GAE7DC,IAAe,CAACD,MAA+C;AAC/D,IAAA,OAAOF,KAAa,cACbA,EAAAE,EAAM,OAAO,KAAK;AAAA,EAC7B;AAGF,SACG,gBAAAE,EAAA,OAAA,EAAI,WAAWC,EAAKC,EAAO,uBAAuB,GAAGA,EAAO,gCAAgCV,CAAa,EAAE,CAAC,GAC1G,UAAA;AAAA,IAAAD,KACE,gBAAAY,EAAAC,GAAA,EAAM,SAASd,GAAI,UAAAI,GACjB,UACHH,GAAA;AAAA,IAGD,gBAAAS,EAAA,OAAA,EAAI,WAAWE,EAAO,sCAAsC,GAC3D,UAAA;AAAA,MAAA,gBAAAC,EAAC,OAAI,EAAA,WAAWD,EAAO,6BAA6B,GAClD,UAAA,gBAAAC;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAAb;AAAA,UACA,MAAAG;AAAA,UACC,GAAIA,MAAS,YAAY,EAAE,WAAWI,EAAiB;AAAA,UACxD,UAAUE;AAAA,UACV,WAAWE,EAAKC,EAAO,mBAAmB,GAAG;AAAA,YAC3CP,MAAqB,MAAMO,EAAO,0BAA0B;AAAA,UAAA,CAC7D;AAAA,QAAA;AAAA,MAAA,GAEL;AAAA,MACCP,MAAqB,MAAM,gBAAAQ,EAACE,KAAY,OAAM,SAAQ,UAAUV,GAAkB;AAAA,IAAA,GACrF;AAAA,EACF,EAAA,CAAA;AAEJ;"}
1	+ {"version":3,"file":"FormInput.js","sources":["../../../src/components/FormInput/FormInput.tsx"],"sourcesContent":["import clsx from 'clsx';\n\nimport styles from './FormInput.module.css';\n\nimport { FeedbackBox, Label } from 'components';\n\nexport interface FormInputProps {\n /** The id of the input element. /\n id: string;\n /* label text if empthy the label is not renderd /\n label: string;\n /* label position `top` or `left`. The default is `top`. /\n labelPosition?: 'top' \| 'left';\n /* The type of the input element. /\n type?: 'text' \| 'password' \| 'email' \| 'number';\n /* Shows red * /\n required?: boolean;\n /* error text to display if set /\n notValidatedText?: string;\n /* Returns array of selected values as number */\n onChange: (value: string) => void;\n}\n\nexport const FormInput = ({\n id,\n label,\n labelPosition = 'top',\n type = 'text',\n required = false,\n notValidatedText = '',\n onChange,\n}: FormInputProps) => {\n const blockInvalidChar = (event: React.KeyboardEvent<HTMLInputElement>) =>\n ['e', 'E', '+', '-'].includes(event.key) && event.preventDefault();\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n if (typeof onChange === 'function') {\n onChange(event.target.value);\n }\n };\n\n return (\n <div className={clsx(styles['form-field__container'], styles[`form-field__container--label-${labelPosition}`])}>\n {label && (\n <Label htmlFor={id} required={required}>\n {label}\n </Label>\n )}\n\n <div className={styles['form-field__input-feedback-container']}>\n <div className={styles['form-field__input-container']}>\n <input\n id={id}\n type={type}\n {...(type === 'number' && { onKeyDown: blockInvalidChar })}\n onChange={handleChange}\n className={clsx(styles['form-field__input'], [\n notValidatedText !== '' && styles['form-field__input--error'],\n ])}\n />\n </div>\n {notValidatedText !== '' && <FeedbackBox level=\"error\" feedback={notValidatedText} />}\n </div>\n </div>\n );\n};\n"],"names":["FormInput","id","label","labelPosition","type","required","notValidatedText","onChange","blockInvalidChar","event","handleChange","jsxs","clsx","styles","jsx","Label","FeedbackBox"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuBaA,IAAY,CAAC;AAAA,EACxB,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,MAAAC,IAAO;AAAA,EACP,UAAAC,IAAW;AAAA,EACX,kBAAAC,IAAmB;AAAA,EACnB,UAAAC;AACF,MAAsB;AACpB,QAAMC,IAAmB,CAACC,MACxB,CAAC,KAAK,KAAK,KAAK,GAAG,EAAE,SAASA,EAAM,GAAG,KAAKA,EAAM,eAAe,GAE7DC,IAAe,CAACD,MAA+C;AAC/D,IAAA,OAAOF,KAAa,cACbA,EAAAE,EAAM,OAAO,KAAK;AAAA,EAC7B;AAGF,SACG,gBAAAE,EAAA,OAAA,EAAI,WAAWC,EAAKC,EAAO,uBAAuB,GAAGA,EAAO,gCAAgCV,CAAa,EAAE,CAAC,GAC1G,UAAA;AAAA,IAAAD,KACE,gBAAAY,EAAAC,GAAA,EAAM,SAASd,GAAI,UAAAI,GACjB,UACHH,GAAA;AAAA,IAGD,gBAAAS,EAAA,OAAA,EAAI,WAAWE,EAAO,sCAAsC,GAC3D,UAAA;AAAA,MAAA,gBAAAC,EAAC,OAAI,EAAA,WAAWD,EAAO,6BAA6B,GAClD,UAAA,gBAAAC;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAAb;AAAA,UACA,MAAAG;AAAA,UACC,GAAIA,MAAS,YAAY,EAAE,WAAWI,EAAiB;AAAA,UACxD,UAAUE;AAAA,UACV,WAAWE,EAAKC,EAAO,mBAAmB,GAAG;AAAA,YAC3CP,MAAqB,MAAMO,EAAO,0BAA0B;AAAA,UAAA,CAC7D;AAAA,QAAA;AAAA,MAAA,GAEL;AAAA,MACCP,MAAqB,MAAM,gBAAAQ,EAACE,KAAY,OAAM,SAAQ,UAAUV,GAAkB;AAAA,IAAA,GACrF;AAAA,EACF,EAAA,CAAA;AAEJ;"}

package/dist/components/InputField/InputField.stories.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { jsx as e } from "react/jsx-runtime";
 import { useState as d, useRef as g } from "react";
-import { fn as l } from "../../index-C9QoqAAt.js";
+import { fn as p } from "../../index-C9QoqAAt.js";
 import { InputField as o } from "./InputField.js";
 import { Container as u } from "../../storyComponents/Container/Container.js";
 import { Icon as f } from "../Icon/Icon.js";
@@ -15,10 +15,14 @@ import "../GridRow/GridRow.js";
 import "../IconButton/IconButton.js";
 import "../Input/Input.js";
 import "react-router-dom";
-import "../../TablePlugin-B3ZkyOU_.js";
+import "../../TablePlugin-BLzR0g93.js";
+import "lexical";
+import "@lexical/list";
+import "@lexical/link";
 import "../RteEditor/Providers/LanguageProvider.js";
 import "../RteEditor/Plugins/LinkPlugin/LinkContextMenu/LinkContextMenu.js";
 import "../RteEditor/hooks/components/Flyout.js";
+import "@staartwind.nl/lexical-paste-from-word";
 import "../SelectListbox/SelectListbox.js";
 import "../SelectListbox/SelectProvider.js";
 import "../Sortable/components/SortableItem.js";
@@ -30,7 +34,7 @@ const C = `
 `, h = (t) => {
   const r = t.variant ?? [];
   return { ...t, variant: r.toString() };
-}, O = {
+}, X = {
   title: "Atoms/InputField",
   component: o,
   argTypes: {
@@ -56,10 +60,10 @@ const C = `
     codeString: C
   }
 }, a = (t) => {
-  const [r, i] = d(""), p = g(null), m = (c) => {
-    i(c.target.value), l()("handleChange");
+  const [r, n] = d(""), l = g(null), m = (c) => {
+    n(c.target.value), p()("handleChange");
   }, s = () => {
-    i(""), l()("handleClear");
+    n(""), p()("handleClear");
   };
   return /* @__PURE__ */ e(u, { children: /* @__PURE__ */ e(
     o,
@@ -68,31 +72,31 @@ const C = `
       value: r,
       onChange: m,
       onClear: s,
-      ref: p
+      ref: l
     }
   ) });
-}, n = {
+}, i = {
   type: "text",
   variant: void 0,
   id: "4f9ca77d"
 }, v = a.bind({});
 v.args = {
-  ...n
+  ...i
 };
 const b = a.bind({});
 b.args = {
-  ...n,
+  ...i,
   clearTrigger: "Clear"
 };
 const y = a.bind({});
 y.args = {
-  ...n,
+  ...i,
   clearTrigger: /* @__PURE__ */ e(f, { name: "Cross" })
 };
 export {
   v as InputFieldExample,
   y as WithIconClearTrigger,
   b as WithStringClearTrigger,
-  O as default
+  X as default
 };
 //# sourceMappingURL=InputField.stories.js.map

package/dist/components/InputField/InputField.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"InputField.stories.js","sources":["../../../src/components/InputField/InputField.stories.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\nimport { fn } from '@storybook/test';\n\nimport type { ChangeEvent } from 'react';\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { InputFieldProps } from './InputField';\n\nimport { InputField } from './InputField';\n\nimport { Container } from 'storyComponents/Container';\nimport { Icon } from 'components';\n\nconst codeString = `\n// Has all HTMLInputElement props available except \"className\" and \"style\" \n<InputField aria-labelledby={aria-labelledby} id={id} onChange={onChangeFunction}\n value={value} type={type} clearTrigger={clearTrigger} />\n`;\n\nconst transformArgs = (args: InputFieldProps) => {\n // args.variant is provided as an array because the control type is set to a checkbox. So this transforms the selected value into its proper value: a string\n const variantArray = (args.variant as unknown as string[]) ?? [];\n return { ...args, ...{ variant: variantArray.toString() } } as InputFieldProps;\n};\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Atoms/InputField',\n component: InputField,\n argTypes: {\n variant: {\n options: ['large'],\n control: 'check',\n },\n type: {\n control: 'radio',\n options: ['text', 'password', 'email'],\n },\n id: {\n control: 'text',\n },\n autoComplete: {\n table: {\n disable: true,\n },\n },\n },\n parameters: {\n inspectComponent: InputField,\n codeString: codeString,\n },\n} as Meta<InputFieldProps>;\n\nconst Template: StoryFn<InputFieldProps> = (args) => {\n const [inputValue, setInputValue] = useState<InputFieldProps['value']>('');\n const inputRef = useRef<HTMLInputElement>(null);\n\n const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n setInputValue(event.target.value);\n fn()('handleChange');\n };\n\n const handleClear = () => {\n setInputValue('');\n fn()('handleClear');\n };\n\n return (\n <Container>\n <InputField\n {...transformArgs(args)}\n value={inputValue}\n onChange={handleChange}\n onClear={handleClear}\n ref={inputRef}\n />\n </Container>\n );\n};\n\nconst defaultArgs: Partial<InputFieldProps> = {\n type: 'text',\n variant: undefined,\n id: '4f9ca77d',\n};\n\nexport const InputFieldExample = Template.bind({});\nInputFieldExample.args = {\n ...defaultArgs,\n};\n\nexport const WithStringClearTrigger = Template.bind({});\nWithStringClearTrigger.args = {\n ...defaultArgs,\n clearTrigger: 'Clear',\n};\n\nexport const WithIconClearTrigger = Template.bind({});\nWithIconClearTrigger.args = {\n ...defaultArgs,\n clearTrigger: <Icon name=\"Cross\" />,\n};\n"],"names":["codeString","transformArgs","args","variantArray","InputField_stories","InputField","Template","inputValue","setInputValue","useState","inputRef","useRef","handleChange","event","fn","handleClear","Container","jsx","defaultArgs","InputFieldExample","WithStringClearTrigger","WithIconClearTrigger","Icon"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;~~AAYA,MAAMA,IAAa;AAAA;AAAA;AAAA;AAAA,GAMbC,IAAgB,CAACC,MAA0B;AAEzC,QAAAC,IAAgBD,EAAK,WAAmC;AACvD,SAAA,EAAE,GAAGA,GAAW,SAASC,EAAa,SAAS;AACxD,GAGeC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS,CAAC,OAAO;AAAA,MACjB,SAAS;AAAA,IACX;AAAA,IACA,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,SAAS,CAAC,QAAQ,YAAY,OAAO;AAAA,IACvC;AAAA,IACA,IAAI;AAAA,MACF,SAAS;AAAA,IACX;AAAA,IACA,cAAc;AAAA,MACZ,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAAA,EACA,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAL;AAAA,EACF;AACF,GAEMM,IAAqC,CAACJ,MAAS;AACnD,QAAM,CAACK,GAAYC,CAAa,IAAIC,EAAmC,EAAE,GACnEC,IAAWC,EAAyB,IAAI,GAExCC,IAAe,CAACC,MAAyC;AAC/C,IAAAL,EAAAK,EAAM,OAAO,KAAK,GAChCC,EAAA,EAAK,cAAc;AAAA,EAAA,GAGfC,IAAc,MAAM;AACxB,IAAAP,EAAc,EAAE,GAChBM,EAAA,EAAK,aAAa;AAAA,EAAA;AAGpB,2BACGE,GACC,EAAA,UAAA,gBAAAC;AAAA,IAACZ;AAAA,IAAA;AAAA,MACE,GAAGJ,EAAcC,CAAI;AAAA,MACtB,OAAOK;AAAA,MACP,UAAUK;AAAA,MACV,SAASG;AAAA,MACT,KAAKL;AAAA,IAAA;AAAA,EAET,EAAA,CAAA;AAEJ,GAEMQ,IAAwC;AAAA,EAC5C,MAAM;AAAA,EACN,SAAS;AAAA,EACT,IAAI;AACN,GAEaC,IAAoBb,EAAS,KAAK,EAAE;AACjDa,EAAkB,OAAO;AAAA,EACvB,GAAGD;AACL;AAEO,MAAME,IAAyBd,EAAS,KAAK,EAAE;AACtDc,EAAuB,OAAO;AAAA,EAC5B,GAAGF;AAAA,EACH,cAAc;AAChB;AAEO,MAAMG,IAAuBf,EAAS,KAAK,EAAE;AACpDe,EAAqB,OAAO;AAAA,EAC1B,GAAGH;AAAA,EACH,cAAc,gBAAAD,EAACK,GAAK,EAAA,MAAK,QAAQ,CAAA;AACnC;"}
1	+ {"version":3,"file":"InputField.stories.js","sources":["../../../src/components/InputField/InputField.stories.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\nimport { fn } from '@storybook/test';\n\nimport type { ChangeEvent } from 'react';\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { InputFieldProps } from './InputField';\n\nimport { InputField } from './InputField';\n\nimport { Container } from 'storyComponents/Container';\nimport { Icon } from 'components';\n\nconst codeString = `\n// Has all HTMLInputElement props available except \"className\" and \"style\" \n<InputField aria-labelledby={aria-labelledby} id={id} onChange={onChangeFunction}\n value={value} type={type} clearTrigger={clearTrigger} />\n`;\n\nconst transformArgs = (args: InputFieldProps) => {\n // args.variant is provided as an array because the control type is set to a checkbox. So this transforms the selected value into its proper value: a string\n const variantArray = (args.variant as unknown as string[]) ?? [];\n return { ...args, ...{ variant: variantArray.toString() } } as InputFieldProps;\n};\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Atoms/InputField',\n component: InputField,\n argTypes: {\n variant: {\n options: ['large'],\n control: 'check',\n },\n type: {\n control: 'radio',\n options: ['text', 'password', 'email'],\n },\n id: {\n control: 'text',\n },\n autoComplete: {\n table: {\n disable: true,\n },\n },\n },\n parameters: {\n inspectComponent: InputField,\n codeString: codeString,\n },\n} as Meta<InputFieldProps>;\n\nconst Template: StoryFn<InputFieldProps> = (args) => {\n const [inputValue, setInputValue] = useState<InputFieldProps['value']>('');\n const inputRef = useRef<HTMLInputElement>(null);\n\n const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n setInputValue(event.target.value);\n fn()('handleChange');\n };\n\n const handleClear = () => {\n setInputValue('');\n fn()('handleClear');\n };\n\n return (\n <Container>\n <InputField\n {...transformArgs(args)}\n value={inputValue}\n onChange={handleChange}\n onClear={handleClear}\n ref={inputRef}\n />\n </Container>\n );\n};\n\nconst defaultArgs: Partial<InputFieldProps> = {\n type: 'text',\n variant: undefined,\n id: '4f9ca77d',\n};\n\nexport const InputFieldExample = Template.bind({});\nInputFieldExample.args = {\n ...defaultArgs,\n};\n\nexport const WithStringClearTrigger = Template.bind({});\nWithStringClearTrigger.args = {\n ...defaultArgs,\n clearTrigger: 'Clear',\n};\n\nexport const WithIconClearTrigger = Template.bind({});\nWithIconClearTrigger.args = {\n ...defaultArgs,\n clearTrigger: <Icon name=\"Cross\" />,\n};\n"],"names":["codeString","transformArgs","args","variantArray","InputField_stories","InputField","Template","inputValue","setInputValue","useState","inputRef","useRef","handleChange","event","fn","handleClear","Container","jsx","defaultArgs","InputFieldExample","WithStringClearTrigger","WithIconClearTrigger","Icon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYA,MAAMA,IAAa;AAAA;AAAA;AAAA;AAAA,GAMbC,IAAgB,CAACC,MAA0B;AAEzC,QAAAC,IAAgBD,EAAK,WAAmC;AACvD,SAAA,EAAE,GAAGA,GAAW,SAASC,EAAa,SAAS;AACxD,GAGeC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS,CAAC,OAAO;AAAA,MACjB,SAAS;AAAA,IACX;AAAA,IACA,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,SAAS,CAAC,QAAQ,YAAY,OAAO;AAAA,IACvC;AAAA,IACA,IAAI;AAAA,MACF,SAAS;AAAA,IACX;AAAA,IACA,cAAc;AAAA,MACZ,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAAA,EACA,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAL;AAAA,EACF;AACF,GAEMM,IAAqC,CAACJ,MAAS;AACnD,QAAM,CAACK,GAAYC,CAAa,IAAIC,EAAmC,EAAE,GACnEC,IAAWC,EAAyB,IAAI,GAExCC,IAAe,CAACC,MAAyC;AAC/C,IAAAL,EAAAK,EAAM,OAAO,KAAK,GAChCC,EAAA,EAAK,cAAc;AAAA,EAAA,GAGfC,IAAc,MAAM;AACxB,IAAAP,EAAc,EAAE,GAChBM,EAAA,EAAK,aAAa;AAAA,EAAA;AAGpB,2BACGE,GACC,EAAA,UAAA,gBAAAC;AAAA,IAACZ;AAAA,IAAA;AAAA,MACE,GAAGJ,EAAcC,CAAI;AAAA,MACtB,OAAOK;AAAA,MACP,UAAUK;AAAA,MACV,SAASG;AAAA,MACT,KAAKL;AAAA,IAAA;AAAA,EAET,EAAA,CAAA;AAEJ,GAEMQ,IAAwC;AAAA,EAC5C,MAAM;AAAA,EACN,SAAS;AAAA,EACT,IAAI;AACN,GAEaC,IAAoBb,EAAS,KAAK,EAAE;AACjDa,EAAkB,OAAO;AAAA,EACvB,GAAGD;AACL;AAEO,MAAME,IAAyBd,EAAS,KAAK,EAAE;AACtDc,EAAuB,OAAO;AAAA,EAC5B,GAAGF;AAAA,EACH,cAAc;AAChB;AAEO,MAAMG,IAAuBf,EAAS,KAAK,EAAE;AACpDe,EAAqB,OAAO;AAAA,EAC1B,GAAGH;AAAA,EACH,cAAc,gBAAAD,EAACK,GAAK,EAAA,MAAK,QAAQ,CAAA;AACnC;"}

package/dist/components/MultiSelect/MultiSelect.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import "react/jsx-runtime";
 import "../../clsx-OuTLNxxd.js";
 import "../../MultiSelectItem-D9PxdX43.js";
-import { M as p } from "../../TablePlugin-B3ZkyOU_.js";
+import { M as p } from "../../TablePlugin-BLzR0g93.js";
 export {
   p as MultiSelect
 };

package/dist/components/MultiSelect/MultiSelect.stories.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { jsxs as S, jsx as r } from "react/jsx-runtime";
 import { fn as d } from "../../index-C9QoqAAt.js";
 import { useState as p } from "react";
-import { M as e } from "../../TablePlugin-B3ZkyOU_.js";
+import { M as e } from "../../TablePlugin-BLzR0g93.js";
 import { Container as M } from "../../storyComponents/Container/Container.js";
 const C = `
   // MultiSelectHeader can be added optionally

package/dist/components/MultiSelect/components/MultiSelectHeader.js CHANGED Viewed

@@ -14,15 +14,19 @@ import "../../IconButton/IconButton.js";
 import "../../Input/Input.js";
 import "../../InputField/InputField.js";
 import "react-router-dom";
-import { a as v } from "../../../TablePlugin-B3ZkyOU_.js";
+import { a as A } from "../../../TablePlugin-BLzR0g93.js";
+import "lexical";
+import "@lexical/list";
+import "@lexical/link";
 import "../../RteEditor/Providers/LanguageProvider.js";
 import "../../RteEditor/Plugins/LinkPlugin/LinkContextMenu/LinkContextMenu.js";
 import "../../RteEditor/hooks/components/Flyout.js";
+import "@staartwind.nl/lexical-paste-from-word";
 import "../../SelectListbox/SelectListbox.js";
 import "../../SelectListbox/SelectProvider.js";
 import "../../Sortable/components/SortableItem.js";
 import "../../../SortableProvider-BUsvniX7.js";
 export {
-  v as MultiSelectHeader
+  A as MultiSelectHeader
 };
 //# sourceMappingURL=MultiSelectHeader.js.map

package/dist/components/MultiSelect/components/MultiSelectHeader.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MultiSelectHeader.js","sources":[],"sourcesContent":[],"names":[],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;~~"}
1	+ {"version":3,"file":"MultiSelectHeader.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/MultiSelect/index.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { M as l } from "../../TablePlugin-B3ZkyOU_.js";
+import { M as l } from "../../TablePlugin-BLzR0g93.js";
 export {
   l as MultiSelect
 };

package/dist/components/PeriodSelector/PeriodSelector.js CHANGED Viewed

@@ -16,27 +16,31 @@ import "../Input/Input.js";
 import "../InputField/InputField.js";
 import { Label as D } from "../Label/Label.js";
 import "react-router-dom";
-import "../../TablePlugin-B3ZkyOU_.js";
+import "../../TablePlugin-BLzR0g93.js";
+import "lexical";
+import "@lexical/list";
+import "@lexical/link";
 import "../RteEditor/Providers/LanguageProvider.js";
 import "../RteEditor/Plugins/LinkPlugin/LinkContextMenu/LinkContextMenu.js";
 import "../RteEditor/hooks/components/Flyout.js";
+import "@staartwind.nl/lexical-paste-from-word";
 import "../SelectListbox/SelectListbox.js";
 import "../SelectListbox/SelectProvider.js";
 import "../Sortable/components/SortableItem.js";
 import "../../SortableProvider-BUsvniX7.js";
-import '../../assets/PeriodSelector.css';const l = {
+import '../../assets/PeriodSelector.css';const p = {
   "period-selector__container": "_period-selector__container_10t7p_1",
   "period-selector__container--label-left": "_period-selector__container--label-left_10t7p_6",
   "period-selector__container--label-top": "_period-selector__container--label-top_10t7p_12",
   "period-selector__selector-container": "_period-selector__selector-container_10t7p_19",
   "period-selector__selector-row": "_period-selector__selector-row_10t7p_25"
-}, S = 0, f = 1, E = 2, p = 3, I = 7, T = (i) => {
+}, S = 0, f = 1, E = 2, l = 3, I = 7, T = (n) => {
   const c = [];
-  for (let t = 0; t < i.length; t += p)
-    c.push(i.slice(t, t + p));
+  for (let t = 0; t < n.length; t += l)
+    c.push(n.slice(t, t + l));
   return c;
-}, ir = ({
-  maxPeriods: i = I,
+}, _r = ({
+  maxPeriods: n = I,
   defaultValues: c,
   label: t,
   labelPosition: b = "top",
@@ -44,33 +48,33 @@ import '../../assets/PeriodSelector.css';const l = {
   notValidatedText: m = "",
   onChange: g
 }) => {
-  const R = Array.from({ length: i }, (r, e) => e + 1), a = T(R), x = a.map((r, e) => r.map((o) => ({
-    label: `${e + 1}${r.length === 1 ? "" : `.${(o - 1) % p + 1}`}`,
+  const R = Array.from({ length: n }, (r, e) => e + 1), a = T(R), x = a.map((r, e) => r.map((o) => ({
+    label: `${e + 1}${r.length === 1 ? "" : `.${(o - 1) % l + 1}`}`,
     value: o.toString()
-  }))), n = M(
+  }))), i = M(
     a.map(
       (r) => r.reduce((e, o) => (c != null && c.includes(o) && e.push(o), e), [])
     )
   ), [P, u] = $([]), d = (r) => r[S].length !== 0 || r[f].length !== 0 ? [E] : r[E].length !== 0 ? [S, f] : [], k = (r, e) => {
-    n.current[e] = r.map((o) => Number(o)), u(d(n.current)), g([...n.current.flat()].sort());
+    i.current[e] = r.map((o) => Number(o)), u(d(i.current)), g([...i.current.flat()].sort());
   };
   return N(() => {
-    u(d(n.current));
+    u(d(i.current));
   }, []), /* @__PURE__ */ h(
     "div",
     {
       className: v(
-        l["period-selector__container"],
-        l[`period-selector__container--label-${b}`]
+        p["period-selector__container"],
+        p[`period-selector__container--label-${b}`]
       ),
       children: [
         t && /* @__PURE__ */ s(D, { htmlFor: "", required: _, children: t }),
-        /* @__PURE__ */ h("div", { className: l["period-selector__selector-container"], children: [
-          /* @__PURE__ */ s("div", { className: l["period-selector__selector-row"], children: x.map((r, e) => /* @__PURE__ */ s(
+        /* @__PURE__ */ h("div", { className: p["period-selector__selector-container"], children: [
+          /* @__PURE__ */ s("div", { className: p["period-selector__selector-row"], children: x.map((r, e) => /* @__PURE__ */ s(
             w,
             {
               checkboxes: r,
-              defaultValues: n.current[e].map((o) => o.toString()),
+              defaultValues: i.current[e].map((o) => o.toString()),
               disableGroup: P.includes(e),
               required: _,
               onSetValues: (o) => k(o, e)
@@ -84,6 +88,6 @@ import '../../assets/PeriodSelector.css';const l = {
   );
 };
 export {
-  ir as PeriodSelector
+  _r as PeriodSelector
 };
 //# sourceMappingURL=PeriodSelector.js.map

package/dist/components/PeriodSelector/PeriodSelector.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PeriodSelector.js","sources":["../../../src/components/PeriodSelector/PeriodSelector.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { useEffect, useRef, useState } from 'react';\n\nimport styles from './PeriodSelector.module.css';\n\nimport { Label, CheckboxButtonBar, FeedbackBox } from 'components';\n\nexport interface PeriodSelectorProps {\n /** Indicates how many periods are shown. /\n // eslint-disable-next-line @typescript-eslint/no-magic-numbers\n maxPeriods: 6 \| 7;\n /* array of period values [3, 5 ...] /\n defaultValues?: number[];\n label: string;\n labelPosition?: 'top' \| 'left';\n /* Shows red * /\n required?: boolean;\n /* error text to display if set /\n notValidatedText?: string;\n /* Returns array of selected values as number /\n onChange: (values: number[]) => void;\n}\n\nconst SEMESTER_1 = 0;\nconst SEMESTER_2 = 1;\nconst SEMESTER_3 = 2;\n\nconst PERIODS_PER_SEMESTER = 3;\nconst MAX_PERIODS = 7;\n\nconst chunkPeriods = (array: number[]): number[][] => {\n const result: number[][] = [];\n for (let count = 0; count < array.length; count += PERIODS_PER_SEMESTER) {\n result.push(array.slice(count, count + PERIODS_PER_SEMESTER));\n }\n return result;\n};\n\n/* Checkbox group for selecting periods */\nexport const PeriodSelector = ({\n maxPeriods = MAX_PERIODS,\n defaultValues,\n label,\n labelPosition = 'top',\n required = false,\n notValidatedText = '',\n onChange,\n}: PeriodSelectorProps) => {\n const maxPeriodsList = Array.from({ length: maxPeriods }, (_, index) => index + 1);\n const chunkedPeriods = chunkPeriods(maxPeriodsList);\n\n const checkboxItems = chunkedPeriods.map((periods, semester) => {\n return periods.map((period) => ({\n label: `${semester + 1}${periods.length === 1 ? '' : `.${((period - 1) % PERIODS_PER_SEMESTER) + 1}`}`,\n value: period.toString(),\n }));\n });\n\n const returnValues = useRef<number[][]>(\n chunkedPeriods.map((semester) =>\n semester.reduce((periods, period) => {\n if (defaultValues?.includes(period)) periods.push(period);\n return periods;\n }, [] as number[])\n )\n );\n const [disableSemesters, setDisableSemesters] = useState<number[]>([]);\n\n const disableGroups = (selects: number[][]) => {\n if (selects[SEMESTER_1].length !== 0 \|\| selects[SEMESTER_2].length !== 0) return [SEMESTER_3];\n if (selects[SEMESTER_3].length !== 0) return [SEMESTER_1, SEMESTER_2];\n return [];\n };\n\n const handleChange = (values: string[], index: number) => {\n returnValues.current[index] = values.map((num) => Number(num));\n setDisableSemesters(disableGroups(returnValues.current));\n onChange([...returnValues.current.flat()].sort());\n };\n\n useEffect(() => {\n setDisableSemesters(disableGroups(returnValues.current));\n }, []);\n\n return (\n <div\n className={clsx(\n styles['period-selector__container'],\n styles[`period-selector__container--label-${labelPosition}`]\n )}\n >\n {label && (\n <Label htmlFor=\"\" required={required}>\n {label}\n </Label>\n )}\n <div className={styles['period-selector__selector-container']}>\n <div className={styles['period-selector__selector-row']}>\n {checkboxItems.map((checkboxes, semester) => (\n <CheckboxButtonBar\n key={`group_${semester}`}\n checkboxes={checkboxes}\n defaultValues={returnValues.current[semester].map((num) => num.toString())}\n disableGroup={disableSemesters.includes(semester)}\n required={required}\n onSetValues={(event) => handleChange(event, semester)}\n />\n ))}\n </div>\n {notValidatedText !== '' && <FeedbackBox level=\"error\" feedback={notValidatedText} />}\n </div>\n </div>\n );\n};\n"],"names":["SEMESTER_1","SEMESTER_2","SEMESTER_3","PERIODS_PER_SEMESTER","MAX_PERIODS","chunkPeriods","array","result","count","PeriodSelector","maxPeriods","defaultValues","label","labelPosition","required","notValidatedText","onChange","maxPeriodsList","_","index","chunkedPeriods","checkboxItems","periods","semester","period","returnValues","useRef","disableSemesters","setDisableSemesters","useState","disableGroups","selects","handleChange","values","num","useEffect","jsxs","clsx","styles","jsx","Label","checkboxes","CheckboxButtonBar","event","FeedbackBox"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~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"}
1	+ {"version":3,"file":"PeriodSelector.js","sources":["../../../src/components/PeriodSelector/PeriodSelector.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { useEffect, useRef, useState } from 'react';\n\nimport styles from './PeriodSelector.module.css';\n\nimport { Label, CheckboxButtonBar, FeedbackBox } from 'components';\n\nexport interface PeriodSelectorProps {\n /** Indicates how many periods are shown. /\n // eslint-disable-next-line @typescript-eslint/no-magic-numbers\n maxPeriods: 6 \| 7;\n /* array of period values [3, 5 ...] /\n defaultValues?: number[];\n label: string;\n labelPosition?: 'top' \| 'left';\n /* Shows red * /\n required?: boolean;\n /* error text to display if set /\n notValidatedText?: string;\n /* Returns array of selected values as number /\n onChange: (values: number[]) => void;\n}\n\nconst SEMESTER_1 = 0;\nconst SEMESTER_2 = 1;\nconst SEMESTER_3 = 2;\n\nconst PERIODS_PER_SEMESTER = 3;\nconst MAX_PERIODS = 7;\n\nconst chunkPeriods = (array: number[]): number[][] => {\n const result: number[][] = [];\n for (let count = 0; count < array.length; count += PERIODS_PER_SEMESTER) {\n result.push(array.slice(count, count + PERIODS_PER_SEMESTER));\n }\n return result;\n};\n\n/* Checkbox group for selecting periods */\nexport const PeriodSelector = ({\n maxPeriods = MAX_PERIODS,\n defaultValues,\n label,\n labelPosition = 'top',\n required = false,\n notValidatedText = '',\n onChange,\n}: PeriodSelectorProps) => {\n const maxPeriodsList = Array.from({ length: maxPeriods }, (_, index) => index + 1);\n const chunkedPeriods = chunkPeriods(maxPeriodsList);\n\n const checkboxItems = chunkedPeriods.map((periods, semester) => {\n return periods.map((period) => ({\n label: `${semester + 1}${periods.length === 1 ? '' : `.${((period - 1) % PERIODS_PER_SEMESTER) + 1}`}`,\n value: period.toString(),\n }));\n });\n\n const returnValues = useRef<number[][]>(\n chunkedPeriods.map((semester) =>\n semester.reduce((periods, period) => {\n if (defaultValues?.includes(period)) periods.push(period);\n return periods;\n }, [] as number[])\n )\n );\n const [disableSemesters, setDisableSemesters] = useState<number[]>([]);\n\n const disableGroups = (selects: number[][]) => {\n if (selects[SEMESTER_1].length !== 0 \|\| selects[SEMESTER_2].length !== 0) return [SEMESTER_3];\n if (selects[SEMESTER_3].length !== 0) return [SEMESTER_1, SEMESTER_2];\n return [];\n };\n\n const handleChange = (values: string[], index: number) => {\n returnValues.current[index] = values.map((num) => Number(num));\n setDisableSemesters(disableGroups(returnValues.current));\n onChange([...returnValues.current.flat()].sort());\n };\n\n useEffect(() => {\n setDisableSemesters(disableGroups(returnValues.current));\n }, []);\n\n return (\n <div\n className={clsx(\n styles['period-selector__container'],\n styles[`period-selector__container--label-${labelPosition}`]\n )}\n >\n {label && (\n <Label htmlFor=\"\" required={required}>\n {label}\n </Label>\n )}\n <div className={styles['period-selector__selector-container']}>\n <div className={styles['period-selector__selector-row']}>\n {checkboxItems.map((checkboxes, semester) => (\n <CheckboxButtonBar\n key={`group_${semester}`}\n checkboxes={checkboxes}\n defaultValues={returnValues.current[semester].map((num) => num.toString())}\n disableGroup={disableSemesters.includes(semester)}\n required={required}\n onSetValues={(event) => handleChange(event, semester)}\n />\n ))}\n </div>\n {notValidatedText !== '' && <FeedbackBox level=\"error\" feedback={notValidatedText} />}\n </div>\n </div>\n );\n};\n"],"names":["SEMESTER_1","SEMESTER_2","SEMESTER_3","PERIODS_PER_SEMESTER","MAX_PERIODS","chunkPeriods","array","result","count","PeriodSelector","maxPeriods","defaultValues","label","labelPosition","required","notValidatedText","onChange","maxPeriodsList","_","index","chunkedPeriods","checkboxItems","periods","semester","period","returnValues","useRef","disableSemesters","setDisableSemesters","useState","disableGroups","selects","handleChange","values","num","useEffect","jsxs","clsx","styles","jsx","Label","checkboxes","CheckboxButtonBar","event","FeedbackBox"],"mappings":"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"}