@uva-glass/component-library 3.55.5 → 3.55.7

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

@@ -1,11 +1,11 @@
-import { kt as e } from "../../../../Lexical.prod-sbwgNRjw.js";
-import { S as t, d as n, f as r, g as i, h as a, i as o, r as s, s as c, t as l, v as u, x as d, y as f } from "../../../../LexicalTable.prod-CpIPDW6z.js";
+import { Gt as e } from "../../../../Lexical.prod-CqPLSi0R.js";
+import { C as t, S as n, _ as r, a as i, d as a, f as o, m as s, t as c, u as l, v as u, x as d, y as f } from "../../../../LexicalTable.prod-DlOxUQou.js";
 import { TableWrapperNode as p } from "../../nodes/TableWrapperNode/TableWrapperNode.js";
 //#region src/components/RteEditor/Plugins/TablePlugin/helpers.ts
 var m = 32, h = 48, g = 1, _ = 200, v = 320, y = (t, n) => {
-	let r = o(0, 0, !1);
+	let r = s(0, 0, !1);
 	for (let i = 0; i < t; i++) {
-		let t = s();
+		let t = l();
 		for (let r = 0; r < n; r++) {
 			let n = c(0, void 0, void 0);
 			n.append(e()), t.append(n);
@@ -14,37 +14,37 @@ var m = 32, h = 48, g = 1, _ = 200, v = 320, y = (t, n) => {
 	}
 	return r;
 }, b = (e) => {
-	let t = r(e), n = t.getNextSibling() || t.getPreviousSibling(), i = t.getParentOrThrow();
-	if (i.getChildrenSize() > 1 ? t.remove() : i.remove(), n !== null) {
-		let e = n.getFirstDescendant();
+	let t = n(e), r = t.getNextSibling() || t.getPreviousSibling(), i = t.getParentOrThrow();
+	if (i.getChildrenSize() > 1 ? t.remove() : i.remove(), r !== null) {
+		let e = r.getFirstDescendant();
 		e && e.select();
 	}
 }, x = (e) => {
-	let n = t(e);
-	if (!n) throw Error("Selected node is not a TableCellNode");
-	let r = n.getParent();
-	r instanceof p ? r.remove() : n.remove();
+	let t = u(e);
+	if (!t) throw Error("Selected node is not a TableCellNode");
+	let n = t.getParent();
+	n instanceof p ? n.remove() : t.remove();
 }, S = (e, t) => {
-	if (!l(e)) throw Error("Selected node is not a TableCellNode");
-	let n = s();
+	if (!o(e)) throw Error("Selected node is not a TableCellNode");
+	let n = l();
 	d(t === "insertRowBelow");
 	let r = n.getFirstDescendant();
 	r && r.select();
-}, C = (e, t) => {
-	if (!l(e)) throw Error("Selected node is not a TableCellNode");
-	let r = f(e), a = n(e), o = r.getChildren(), s = i(e), c = u(t === "insertColumnLeft");
-	if (!c) return;
-	let d = n(c);
+}, C = (e, n) => {
+	if (!o(e)) throw Error("Selected node is not a TableCellNode");
+	let r = f(e), s = i(e), c = r.getChildren(), l = a(e), u = t(n === "insertColumnLeft");
+	if (!u) return;
+	let d = i(u);
 	if (d === -1) return;
 	let p = r.getColWidths();
 	if (!p) return;
 	let m = p.map((e, t) => t === d ? 48 : e - Math.ceil(48 / (p.length - 1)));
-	r.setColWidths(m), a = t === "insertColumnLeft" ? a : a + 1;
-	let h = o[s].getChildren()[a];
+	r.setColWidths(m), s = n === "insertColumnLeft" ? s : s + 1;
+	let h = c[l].getChildren()[s];
 	h && h.select();
 }, w = (e) => {
-	if (!l(e)) throw Error("Selected node is not a TableCellNode");
-	(f(e).getFirstChild()?.getChildrenSize() || 0) === 1 ? x(e) : a();
+	if (!o(e)) throw Error("Selected node is not a TableCellNode");
+	(f(e).getFirstChild()?.getChildrenSize() || 0) === 1 ? x(e) : r();
 }, T = (e) => {
 	let t = e.getRootElement();
 	if (!t || typeof window > "u") return 0;
@@ -60,7 +60,7 @@ var m = 32, h = 48, g = 1, _ = 200, v = 320, y = (t, n) => {
 	let t = e.getChildren();
 	for (let e of t) {
 		let t = e.getChildren();
-		for (let e of t) if (l(e) && e.getTextContent().trim().length > 0) return !0;
+		for (let e of t) if (o(e) && e.getTextContent().trim().length > 0) return !0;
 	}
 	return !1;
 };

package/dist/components/RteEditor/Plugins/TablePlugin/helpers.js.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.js","names":[],"sources":["../../../../../src/components/RteEditor/Plugins/TablePlugin/helpers.ts"],"sourcesContent":["import {\n  $createTableNodeWithDimensions,\n  $createTableRowNode,\n  $createTableCellNode,\n  $deleteTableColumnAtSelection,\n  $isTableCellNode,\n  $getTableNodeFromLexicalNodeOrThrow,\n  $getTableRowNodeFromTableCellNodeOrThrow,\n  $getTableRowIndexFromTableCellNode,\n  $getTableColumnIndexFromTableCellNode,\n  $insertTableColumnAtSelection,\n  $insertTableRowAtSelection,\n  $findTableNode,\n} from '@lexical/table';\nimport { $createParagraphNode } from 'lexical';\n\nimport type { TableCellNode, TableNode, TableRowNode } from '@lexical/table';\nimport type { TextNode, ElementNode, LexicalEditor } from 'lexical';\n\nimport { TableWrapperNode } from 'components/RteEditor/nodes';\n\nexport const MIN_COLUMN_WIDTH = 32;\nexport const DEFAULT_COL_WIDTH = 48;\nexport const BORDER_WIDTHS = 1;\nexport const PREVENT_OPEN_DELAY = 200;\nexport const DEFAULT_EDITOR_WIDTH = 320;\n\nexport const createTable = (nrOfRows: number, nrOfColumns: number): ElementNode => {\n  const tableNode = $createTableNodeWithDimensions(0, 0, false);\n  for (let rowIndex = 0; rowIndex < nrOfRows; rowIndex++) {\n    const rowNode = $createTableRowNode();\n    for (let colIndex = 0; colIndex < nrOfColumns; colIndex++) {\n      const cellNode = $createTableCellNode(0, undefined, undefined);\n      cellNode.append($createParagraphNode());\n      rowNode.append(cellNode);\n    }\n    tableNode.append(rowNode);\n  }\n  return tableNode;\n};\n\nexport const deleteRow = (selectedNode: ElementNode) => {\n  const currentRow = $getTableRowNodeFromTableCellNodeOrThrow(selectedNode);\n  const nextRow = currentRow.getNextSibling() || currentRow.getPreviousSibling();\n  const currentTable = currentRow.getParentOrThrow();\n  currentTable.getChildrenSize() > 1 ? currentRow.remove() : currentTable.remove();\n\n  if (nextRow !== null) {\n    const firstDescendant = (nextRow as ElementNode).getFirstDescendant();\n    if (firstDescendant) {\n      (firstDescendant as TextNode).select();\n    }\n  }\n};\n\nexport const deleteTable = (selectedNode: ElementNode) => {\n  const tableNode = $findTableNode(selectedNode);\n  if (!tableNode) {\n    throw new Error('Selected node is not a TableCellNode');\n  }\n\n  const wrapperNode = tableNode.getParent();\n  if (wrapperNode instanceof TableWrapperNode) {\n    wrapperNode.remove();\n  } else {\n    tableNode.remove();\n  }\n};\n\nexport const insertRow = (selectedNode: ElementNode, position: 'insertRowAbove' | 'insertRowBelow') => {\n  if (!$isTableCellNode(selectedNode)) {\n    throw new Error('Selected node is not a TableCellNode');\n  }\n  const newRow = $createTableRowNode();\n\n  $insertTableRowAtSelection(position === 'insertRowBelow');\n\n  const firstDescendant = newRow.getFirstDescendant();\n  if (firstDescendant) {\n    (firstDescendant as TextNode).select();\n  }\n};\n\nexport const insertColumn = (selectedNode: ElementNode, position: 'insertColumnLeft' | 'insertColumnRight') => {\n  if (!$isTableCellNode(selectedNode)) {\n    throw new Error('Selected node is not a TableCellNode');\n  }\n  const currentTable = $getTableNodeFromLexicalNodeOrThrow(selectedNode);\n  let columnIndex = $getTableColumnIndexFromTableCellNode(selectedNode);\n  const rowsInTable: TableCellNode[] = currentTable.getChildren();\n  const rowIndex = $getTableRowIndexFromTableCellNode(selectedNode);\n  const insertedCellNode = $insertTableColumnAtSelection(position === 'insertColumnLeft');\n\n  if (!insertedCellNode) return;\n  const insertedColumnIndex = $getTableColumnIndexFromTableCellNode(insertedCellNode);\n\n  if (insertedColumnIndex === -1) return;\n  const colWidths = currentTable.getColWidths();\n\n  if (!colWidths) return;\n  const newColWidths = colWidths.map((width, index) =>\n    index === insertedColumnIndex ? DEFAULT_COL_WIDTH : width - Math.ceil(DEFAULT_COL_WIDTH / (colWidths.length - 1))\n  );\n\n  currentTable.setColWidths(newColWidths);\n\n  columnIndex = position === 'insertColumnLeft' ? columnIndex : columnIndex + 1;\n  const firstDescendant = rowsInTable[rowIndex].getChildren()[columnIndex];\n  if (firstDescendant) {\n    (firstDescendant as TextNode).select();\n  }\n};\n\nexport const deleteColumn = (selectedNode: ElementNode) => {\n  if (!$isTableCellNode(selectedNode)) {\n    throw new Error('Selected node is not a TableCellNode');\n  }\n  const currentTable = $getTableNodeFromLexicalNodeOrThrow(selectedNode);\n  const numberOfColumns = (currentTable.getFirstChild() as ElementNode)?.getChildrenSize() || 0;\n\n  if (numberOfColumns === 1) {\n    deleteTable(selectedNode);\n  } else {\n    $deleteTableColumnAtSelection();\n  }\n};\n\nexport const getEditorContentWidth = (editor: LexicalEditor): number => {\n  const rootEl = editor.getRootElement();\n  if (!rootEl || typeof window === 'undefined') return 0;\n  const rect = rootEl.getBoundingClientRect();\n  const styles = window.getComputedStyle(rootEl);\n  const insertX = parseFloat(styles.paddingLeft || '0') + parseFloat(styles.paddingRight || '0') + DEFAULT_COL_WIDTH;\n  return Math.max(0, rect.width - insertX);\n};\n\nexport const getEditorParrentCellWidth = (\n  node: TableCellNode | null,\n  nrOfColumns: number,\n  editor: LexicalEditor\n): number => {\n  if (!node) return 0;\n\n  const cell = editor.getElementByKey(node.getKey());\n  if (!cell) return 0;\n\n  const computedStyles = window.getComputedStyle(cell);\n  return parseInt(computedStyles.width) - nrOfColumns * BORDER_WIDTHS - 1;\n};\n\nexport const tableHasContent = (tableNode: TableNode): boolean => {\n  const rows = tableNode.getChildren();\n  for (const row of rows) {\n    const cells = (row as TableRowNode).getChildren();\n    for (const cell of cells) {\n      if ($isTableCellNode(cell)) {\n        const cellText = cell.getTextContent().trim();\n        if (cellText.length > 0) {\n          return true;\n        }\n      }\n    }\n  }\n  return false;\n};\n"],"mappings":"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"}
+{"version":3,"file":"helpers.js","names":[],"sources":["../../../../../src/components/RteEditor/Plugins/TablePlugin/helpers.ts"],"sourcesContent":["import {\n  $createTableNodeWithDimensions,\n  $createTableRowNode,\n  $createTableCellNode,\n  $deleteTableColumnAtSelection,\n  $isTableCellNode,\n  $getTableNodeFromLexicalNodeOrThrow,\n  $getTableRowNodeFromTableCellNodeOrThrow,\n  $getTableRowIndexFromTableCellNode,\n  $getTableColumnIndexFromTableCellNode,\n  $insertTableColumnAtSelection,\n  $insertTableRowAtSelection,\n  $findTableNode,\n} from '@lexical/table';\nimport { $createParagraphNode } from 'lexical';\n\nimport type { TableCellNode, TableNode, TableRowNode } from '@lexical/table';\nimport type { TextNode, ElementNode, LexicalEditor } from 'lexical';\n\nimport { TableWrapperNode } from 'components/RteEditor/nodes';\n\nexport const MIN_COLUMN_WIDTH = 32;\nexport const DEFAULT_COL_WIDTH = 48;\nexport const BORDER_WIDTHS = 1;\nexport const PREVENT_OPEN_DELAY = 200;\nexport const DEFAULT_EDITOR_WIDTH = 320;\n\nexport const createTable = (nrOfRows: number, nrOfColumns: number): ElementNode => {\n  const tableNode = $createTableNodeWithDimensions(0, 0, false);\n  for (let rowIndex = 0; rowIndex < nrOfRows; rowIndex++) {\n    const rowNode = $createTableRowNode();\n    for (let colIndex = 0; colIndex < nrOfColumns; colIndex++) {\n      const cellNode = $createTableCellNode(0, undefined, undefined);\n      cellNode.append($createParagraphNode());\n      rowNode.append(cellNode);\n    }\n    tableNode.append(rowNode);\n  }\n  return tableNode;\n};\n\nexport const deleteRow = (selectedNode: ElementNode) => {\n  const currentRow = $getTableRowNodeFromTableCellNodeOrThrow(selectedNode);\n  const nextRow = currentRow.getNextSibling() || currentRow.getPreviousSibling();\n  const currentTable = currentRow.getParentOrThrow();\n  currentTable.getChildrenSize() > 1 ? currentRow.remove() : currentTable.remove();\n\n  if (nextRow !== null) {\n    const firstDescendant = (nextRow as ElementNode).getFirstDescendant();\n    if (firstDescendant) {\n      (firstDescendant as TextNode).select();\n    }\n  }\n};\n\nexport const deleteTable = (selectedNode: ElementNode) => {\n  const tableNode = $findTableNode(selectedNode);\n  if (!tableNode) {\n    throw new Error('Selected node is not a TableCellNode');\n  }\n\n  const wrapperNode = tableNode.getParent();\n  if (wrapperNode instanceof TableWrapperNode) {\n    wrapperNode.remove();\n  } else {\n    tableNode.remove();\n  }\n};\n\nexport const insertRow = (selectedNode: ElementNode, position: 'insertRowAbove' | 'insertRowBelow') => {\n  if (!$isTableCellNode(selectedNode)) {\n    throw new Error('Selected node is not a TableCellNode');\n  }\n  const newRow = $createTableRowNode();\n\n  $insertTableRowAtSelection(position === 'insertRowBelow');\n\n  const firstDescendant = newRow.getFirstDescendant();\n  if (firstDescendant) {\n    (firstDescendant as TextNode).select();\n  }\n};\n\nexport const insertColumn = (selectedNode: ElementNode, position: 'insertColumnLeft' | 'insertColumnRight') => {\n  if (!$isTableCellNode(selectedNode)) {\n    throw new Error('Selected node is not a TableCellNode');\n  }\n  const currentTable = $getTableNodeFromLexicalNodeOrThrow(selectedNode);\n  let columnIndex = $getTableColumnIndexFromTableCellNode(selectedNode);\n  const rowsInTable: TableCellNode[] = currentTable.getChildren();\n  const rowIndex = $getTableRowIndexFromTableCellNode(selectedNode);\n  const insertedCellNode = $insertTableColumnAtSelection(position === 'insertColumnLeft');\n\n  if (!insertedCellNode) return;\n  const insertedColumnIndex = $getTableColumnIndexFromTableCellNode(insertedCellNode);\n\n  if (insertedColumnIndex === -1) return;\n  const colWidths = currentTable.getColWidths();\n\n  if (!colWidths) return;\n  const newColWidths = colWidths.map((width, index) =>\n    index === insertedColumnIndex ? DEFAULT_COL_WIDTH : width - Math.ceil(DEFAULT_COL_WIDTH / (colWidths.length - 1))\n  );\n\n  currentTable.setColWidths(newColWidths);\n\n  columnIndex = position === 'insertColumnLeft' ? columnIndex : columnIndex + 1;\n  const firstDescendant = rowsInTable[rowIndex].getChildren()[columnIndex];\n  if (firstDescendant) {\n    (firstDescendant as TextNode).select();\n  }\n};\n\nexport const deleteColumn = (selectedNode: ElementNode) => {\n  if (!$isTableCellNode(selectedNode)) {\n    throw new Error('Selected node is not a TableCellNode');\n  }\n  const currentTable = $getTableNodeFromLexicalNodeOrThrow(selectedNode);\n  const numberOfColumns = (currentTable.getFirstChild() as ElementNode)?.getChildrenSize() || 0;\n\n  if (numberOfColumns === 1) {\n    deleteTable(selectedNode);\n  } else {\n    $deleteTableColumnAtSelection();\n  }\n};\n\nexport const getEditorContentWidth = (editor: LexicalEditor): number => {\n  const rootEl = editor.getRootElement();\n  if (!rootEl || typeof window === 'undefined') return 0;\n  const rect = rootEl.getBoundingClientRect();\n  const styles = window.getComputedStyle(rootEl);\n  const insertX = parseFloat(styles.paddingLeft || '0') + parseFloat(styles.paddingRight || '0') + DEFAULT_COL_WIDTH;\n  return Math.max(0, rect.width - insertX);\n};\n\nexport const getEditorParrentCellWidth = (\n  node: TableCellNode | null,\n  nrOfColumns: number,\n  editor: LexicalEditor\n): number => {\n  if (!node) return 0;\n\n  const cell = editor.getElementByKey(node.getKey());\n  if (!cell) return 0;\n\n  const computedStyles = window.getComputedStyle(cell);\n  return parseInt(computedStyles.width) - nrOfColumns * BORDER_WIDTHS - 1;\n};\n\nexport const tableHasContent = (tableNode: TableNode): boolean => {\n  const rows = tableNode.getChildren();\n  for (const row of rows) {\n    const cells = (row as TableRowNode).getChildren();\n    for (const cell of cells) {\n      if ($isTableCellNode(cell)) {\n        const cellText = cell.getTextContent().trim();\n        if (cellText.length > 0) {\n          return true;\n        }\n      }\n    }\n  }\n  return false;\n};\n"],"mappings":"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"}

package/dist/components/RteEditor/Plugins/TablePlugin/index.js

@@ -1,3 +1,3 @@
-import { i as e } from "../../../../components-DAwjkky5.js";
+import { i as e } from "../../../../components-BzxAULjf.js";
 import { t } from "../../../../TableCellContextMenu-D0IMQr3E.js";
 export { t as TableCellContextMenu, e as TablePlugin };

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

@@ -1,2 +1,2 @@
-import { l as e } from "../../../../components-DAwjkky5.js";
+import { l as e } from "../../../../components-BzxAULjf.js";
 export { e as ToolBarPlugin };

package/dist/components/RteEditor/Plugins/ToolbarPlugin/index.js

@@ -1,2 +1,2 @@
-import { l as e } from "../../../../components-DAwjkky5.js";
+import { l as e } from "../../../../components-BzxAULjf.js";
 export { e as ToolBarPlugin };

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

@@ -1,7 +1,7 @@
-import { i as e, l as t, o as n, s as r } from "../../../components-DAwjkky5.js";
-import { t as i } from "../../../TableCellResizerPlugin-Ceof6StD.js";
+import { i as e, l as t, o as n, s as r } from "../../../components-BzxAULjf.js";
+import { t as i } from "../../../TableCellResizerPlugin-Bc5y-Qbx.js";
 import { BlockFormatPlugin as a } from "./BlockFormatPlugin/BlockFormatPlugin.js";
 import { ListPlugin as o } from "./ListPlugin/ListPlugin.js";
 import { t as s } from "../../../TableCellContextMenu-D0IMQr3E.js";
-import { t as c } from "../../../PasteHandlerPlugin-YpQruA-w.js";
+import { t as c } from "../../../PasteHandlerPlugin-BNp8ST0q.js";
 export { a as BlockFormatPlugin, n as HistoryPlugin, r as LinkPlugin, o as ListPlugin, c as PasteHandlerPlugin, s as TableCellContextMenu, i as TableCellResizerPlugin, e as TablePlugin, t as ToolBarPlugin };

package/dist/components/RteEditor/Providers/LanguageProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"LanguageProvider.js","names":[],"sources":["../../../../src/components/RteEditor/Providers/LanguageProvider.tsx"],"sourcesContent":["import { createContext, useContext, useState } from 'react';\n\nimport type { ReactNode } from 'react';\n\ninterface LanguageContextProps {\n  currentLanguage: 'NL' | 'EN';\n  switchLanguage: (currentLanguage: 'NL' | 'EN') => void;\n}\n\nconst LanguageContext = createContext<LanguageContextProps | undefined>(undefined);\n\nexport const LanguageProvider = ({ children }: { children: ReactNode }) => {\n  const [currentLanguage, setCurrentLanguage] = useState<'NL' | 'EN'>('EN');\n\n  const switchLanguage = (currentLanguage: 'NL' | 'EN') => {\n    setCurrentLanguage(currentLanguage);\n  };\n\n  return <LanguageContext.Provider value={{ currentLanguage, switchLanguage }}>{children}</LanguageContext.Provider>;\n};\n\nexport const useLanguage = (): LanguageContextProps => {\n  const context = useContext(LanguageContext);\n  if (!context) {\n    throw new Error('useLanguage must be used within a LanguageProvider');\n  }\n  return context;\n};\n"],"mappings":";;;AASA,IAAM,IAAkB,EAAgD,KAAA,EAAU,EAErE,KAAoB,EAAE,kBAAwC;CACzE,IAAM,CAAC,GAAiB,KAAsB,EAAsB,KAAK;AAMzE,QAAO,kBAAC,EAAgB,UAAjB;EAA0B,OAAO;GAAE;GAAiB,iBAJnC,MAAiC;AACvD,MAAmB,EAAgB;;GAGsC;EAAG;EAAoC,CAAA;GAGvG,UAA0C;CACrD,IAAM,IAAU,EAAW,EAAgB;AAC3C,KAAI,CAAC,EACH,OAAU,MAAM,qDAAqD;AAEvE,QAAO"}
+{"version":3,"file":"LanguageProvider.js","names":[],"sources":["../../../../src/components/RteEditor/Providers/LanguageProvider.tsx"],"sourcesContent":["import { createContext, useContext, useState } from 'react';\n\nimport type { ReactNode } from 'react';\n\ninterface LanguageContextProps {\n  currentLanguage: 'NL' | 'EN';\n  switchLanguage: (currentLanguage: 'NL' | 'EN') => void;\n}\n\nconst LanguageContext = createContext<LanguageContextProps | undefined>(undefined);\n\nexport const LanguageProvider = ({ children }: { children: ReactNode }) => {\n  const [currentLanguage, setCurrentLanguage] = useState<'NL' | 'EN'>('EN');\n\n  const switchLanguage = (currentLanguage: 'NL' | 'EN') => {\n    setCurrentLanguage(currentLanguage);\n  };\n\n  return <LanguageContext.Provider value={{ currentLanguage, switchLanguage }}>{children}</LanguageContext.Provider>;\n};\n\nexport const useLanguage = (): LanguageContextProps => {\n  const context = useContext(LanguageContext);\n  if (!context) {\n    throw new Error('useLanguage must be used within a LanguageProvider');\n  }\n  return context;\n};\n"],"mappings":";;;AASA,IAAM,IAAkB,EAAgD,KAAA,EAAU,EAErE,KAAoB,EAAE,kBAAwC;CACzE,IAAM,CAAC,GAAiB,KAAsB,EAAsB,KAAK;CAMzE,OAAO,kBAAC,EAAgB,UAAjB;EAA0B,OAAO;GAAE;GAAiB,iBAJnC,MAAiC;IACvD,EAAmB,EAAgB;;GAGsC;EAAG;EAAoC,CAAA;GAGvG,UAA0C;CACrD,IAAM,IAAU,EAAW,EAAgB;CAC3C,IAAI,CAAC,GACH,MAAU,MAAM,qDAAqD;CAEvE,OAAO"}

package/dist/components/RteEditor/RteEditor.js

@@ -1,2 +1,2 @@
-import { n as e, t } from "../../components-DAwjkky5.js";
+import { n as e, t } from "../../components-BzxAULjf.js";
 export { t as Rte, e as RteEditor };

package/dist/components/RteEditor/RteEditor.stories.js

@@ -1,4 +1,4 @@
-import { n as e } from "../../components-DAwjkky5.js";
+import { n as e } from "../../components-BzxAULjf.js";
 import { t } from "../../Container-BLjtYDqq.js";
 import "../../storyComponents/Container/index.js";
 import { MOCK_RTE_CONTENT as n } from "./mockRteContent.js";

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

@@ -1 +1 @@
-{"version":3,"file":"RteEditor.stories.js","names":[],"sources":["../../../src/components/RteEditor/RteEditor.stories.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\n\nimport type { PropsWithChildren } from 'react';\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { RteEditorProps } from './RteEditor';\nimport type { SearchResponse } from './Plugins/CourseCataloguePlugin/AddCatalogueLinkForm';\n\nimport { RteEditor } from './RteEditor';\nimport { MOCK_RTE_CONTENT } from './mockRteContent';\nimport { MOCK_SEARCH_COURSES, MOCK_SEARCH_PROGRAMMES } from './mockCatalogueSearchData';\n\nimport { Container } from 'storyComponents/Container';\n\nconst QUERY_SPEED = 1000; // ms\nconst CHARACTER_THRESHOLD = 3;\n\nconst codeString = `<RteEditor\n          editorId=\"editor-id\"\n          initialValue=\"\"\n          currentLanguage=\"NL\"\n          label=\"\"\n          info=\"\"\n          placeholder=\"\"\n          notValidatedText=\"\"\n          onChange={handleChange}\n          onCatalogueLinkSearch={handleCatalogueLinkSearch}\n          catalogueSearchResponse={{ state: 'idle', results: [] }}\n        />`;\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Organisms/RteEditor',\n  component: RteEditor,\n  parameters: {\n    inspectComponent: RteEditor,\n    codeString: codeString,\n  },\n} as Meta<PropsWithChildren<RteEditorProps>>;\n\nconst Template: StoryFn<PropsWithChildren<RteEditorProps>> = (args) => {\n  const [result, setResult] = useState<string>(args.initialValue || '');\n  const [catalogueSearchResponse, setCatalogueSearchResponse] = useState<SearchResponse>({\n    state: 'idle',\n    results: [],\n  });\n  const networkTimer = useRef<NodeJS.Timeout | null>(null);\n\n  const handleSearch = (query: string, linkType: 'course' | 'programme') => {\n    if (query.length < CHARACTER_THRESHOLD) {\n      clearTimeout(networkTimer.current!);\n      setCatalogueSearchResponse({ state: 'idle', results: [] });\n      return;\n    }\n\n    if (networkTimer.current !== null) {\n      clearTimeout(networkTimer.current);\n    }\n\n    const lowerCaseQuery = query.toLowerCase();\n    if (query.length >= CHARACTER_THRESHOLD) {\n      setCatalogueSearchResponse({ state: 'pending', results: [] });\n      const mockResults =\n        linkType === 'course'\n          ? MOCK_SEARCH_COURSES.filter(\n              (item) =>\n                item.name.NL.toLowerCase().includes(lowerCaseQuery) || item.code.toLowerCase().includes(lowerCaseQuery)\n            )\n          : MOCK_SEARCH_PROGRAMMES.filter(\n              (item) =>\n                item.name.NL.toLowerCase().includes(lowerCaseQuery) || item.code.toLowerCase().includes(lowerCaseQuery)\n            );\n\n      networkTimer.current = setTimeout(\n        () =>\n          setCatalogueSearchResponse({\n            state: 'ready',\n            results: mockResults,\n          }),\n        QUERY_SPEED\n      );\n    }\n  };\n\n  return (\n    <>\n      <Container size=\"large-full-height\">\n        <RteEditor\n          {...args}\n          onChange={(evt) => setResult(evt)}\n          onCatalogueLinkSearch={handleSearch}\n          catalogueSearchResponse={catalogueSearchResponse}\n        />\n      </Container>\n      <br />\n      <br />\n\n      <p style={{ margin: '0', marginTop: '2rem' }}>HTML Output:</p>\n      <div\n        style={{\n          marginTop: '0rem',\n          padding: '1rem',\n          backgroundColor: '#F9F9F9',\n          borderRadius: '0.25rem',\n          color: '#666',\n        }}\n      >\n        {result}\n      </div>\n    </>\n  );\n};\n\nexport const RteEditorExample = Template.bind({});\n\nRteEditorExample.args = {\n  editorId: 'test-editor',\n  placeholder: 'Voeg hier tekst in...',\n  currentLanguage: 'NL',\n  label: 'Studiemateriaal',\n  info: \"Studiemateriaal is essentieel voor succesvol leren. Het omvat boeken, artikelen, video's en oefeningen die studenten helpen hun kennis te vergroten, vaardigheden te ontwikkelen en hun studieprestaties te verbeteren.\",\n  required: true,\n  initialValue: MOCK_RTE_CONTENT,\n};\n\nexport const MultipleRteEditors = () => {\n  const [result01, setResult01] = useState<string>(\n    'Students will:<br>• demonstrate digital literacy in an academic context<br>• learn to read and engage with texts from a range of disciplinary perspectives<br>• develop writing and argumentation skills appropriate to different disciplines<br>• learn to recognize and apply different research methodologies<br>• learn how to recognize and practice different genres and modes of academic discourse<br>• develop vocabulary appropriate to an academic environment<br>• improve analytic and critical thinking skills<br>• work independently and as part of a collaborative group<br>• learn to review and critique their own work and that of their peers <br>• improve listening comprehension and develop presentation skills<br>• participate in discussions, workshops and debates'\n  );\n  const [result02, setResult02] = useState<string>(\n    `<p>Editor 2</p>\n    <ul>\n      <li>nesting</li>\n      <li>\n        <ol>\n          <li>nested 1</li>\n          <li>nested 2</li>\n        </ol>\n      </li>\n      <li>nesting 2</li>\n      <li>\n        <ul>\n          <li>deep nested 1</li>\n            <li>deep nested 2</li>\n            <li>\n              <ol>\n                <li>deeper nested 1</li>\n                <li>\n                <ul>\n                <li>deepest nested 1</li>\n                <li>deepest nested 2</li>\n                </ul>\n                </li>\n                <li>deeper nested 2</li>\n                <li>\n                  <ol>\n                    <li>deepest nested 1</li>\n                    <li>deepest nested 2</li>\n                  </ol>\n                </li>\n              </ol>\n            </li>\n          </ul>\n        </li>\n      <li>nesting end</li>\n    </ul>`\n  );\n\n  return (\n    <div\n      style={{\n        display: 'flex',\n        flexDirection: 'row',\n        gap: '1rem',\n        width: '100%',\n        padding: '1rem',\n        backgroundColor: '#FFF',\n      }}\n    >\n      <div style={{ flex: '1' }}>\n        <RteEditor\n          initialValue={result01}\n          editorId=\"editor-one\"\n          label=\"Editor 1\"\n          info=\"Uitleg over editor 1\"\n          placeholder=\"Voeg hier tekst in...\"\n          notValidatedText=\"\"\n          onChange={(evt) => setResult01(evt)}\n        />\n        <br />\n        <p style={{ margin: '0', marginTop: '2rem' }}>HTML Output:</p>\n        <div\n          style={{\n            marginTop: '0rem',\n            padding: '1rem',\n            backgroundColor: '#F9F9F9',\n            borderRadius: '0.25rem',\n            color: '#666',\n          }}\n        >\n          {result01}\n        </div>\n      </div>\n      <div style={{ flex: '1' }}>\n        <RteEditor\n          initialValue={result02}\n          editorId=\"editor-two\"\n          label=\"Editor 2\"\n          info=\"Uitleg over editor 2 wat langer om te kijken of dat ook goed gaat, want je weet maar nooit.\"\n          placeholder=\"Voeg hier tekst in...\"\n          notValidatedText=\"\"\n          onChange={(evt) => setResult02(evt)}\n        />\n        <br />\n        <p style={{ margin: '0', marginTop: '2rem' }}>HTML Output:</p>\n        <div\n          style={{\n            marginTop: '0rem',\n            padding: '1rem',\n            backgroundColor: '#F9F9F9',\n            borderRadius: '0.25rem',\n            color: '#666',\n          }}\n        >\n          {result02}\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"RteEditor.stories.js","names":[],"sources":["../../../src/components/RteEditor/RteEditor.stories.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\n\nimport type { PropsWithChildren } from 'react';\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { RteEditorProps } from './RteEditor';\nimport type { SearchResponse } from './Plugins/CourseCataloguePlugin/AddCatalogueLinkForm';\n\nimport { RteEditor } from './RteEditor';\nimport { MOCK_RTE_CONTENT } from './mockRteContent';\nimport { MOCK_SEARCH_COURSES, MOCK_SEARCH_PROGRAMMES } from './mockCatalogueSearchData';\n\nimport { Container } from 'storyComponents/Container';\n\nconst QUERY_SPEED = 1000; // ms\nconst CHARACTER_THRESHOLD = 3;\n\nconst codeString = `<RteEditor\n          editorId=\"editor-id\"\n          initialValue=\"\"\n          currentLanguage=\"NL\"\n          label=\"\"\n          info=\"\"\n          placeholder=\"\"\n          notValidatedText=\"\"\n          onChange={handleChange}\n          onCatalogueLinkSearch={handleCatalogueLinkSearch}\n          catalogueSearchResponse={{ state: 'idle', results: [] }}\n        />`;\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Organisms/RteEditor',\n  component: RteEditor,\n  parameters: {\n    inspectComponent: RteEditor,\n    codeString: codeString,\n  },\n} as Meta<PropsWithChildren<RteEditorProps>>;\n\nconst Template: StoryFn<PropsWithChildren<RteEditorProps>> = (args) => {\n  const [result, setResult] = useState<string>(args.initialValue || '');\n  const [catalogueSearchResponse, setCatalogueSearchResponse] = useState<SearchResponse>({\n    state: 'idle',\n    results: [],\n  });\n  const networkTimer = useRef<NodeJS.Timeout | null>(null);\n\n  const handleSearch = (query: string, linkType: 'course' | 'programme') => {\n    if (query.length < CHARACTER_THRESHOLD) {\n      clearTimeout(networkTimer.current!);\n      setCatalogueSearchResponse({ state: 'idle', results: [] });\n      return;\n    }\n\n    if (networkTimer.current !== null) {\n      clearTimeout(networkTimer.current);\n    }\n\n    const lowerCaseQuery = query.toLowerCase();\n    if (query.length >= CHARACTER_THRESHOLD) {\n      setCatalogueSearchResponse({ state: 'pending', results: [] });\n      const mockResults =\n        linkType === 'course'\n          ? MOCK_SEARCH_COURSES.filter(\n              (item) =>\n                item.name.NL.toLowerCase().includes(lowerCaseQuery) || item.code.toLowerCase().includes(lowerCaseQuery)\n            )\n          : MOCK_SEARCH_PROGRAMMES.filter(\n              (item) =>\n                item.name.NL.toLowerCase().includes(lowerCaseQuery) || item.code.toLowerCase().includes(lowerCaseQuery)\n            );\n\n      networkTimer.current = setTimeout(\n        () =>\n          setCatalogueSearchResponse({\n            state: 'ready',\n            results: mockResults,\n          }),\n        QUERY_SPEED\n      );\n    }\n  };\n\n  return (\n    <>\n      <Container size=\"large-full-height\">\n        <RteEditor\n          {...args}\n          onChange={(evt) => setResult(evt)}\n          onCatalogueLinkSearch={handleSearch}\n          catalogueSearchResponse={catalogueSearchResponse}\n        />\n      </Container>\n      <br />\n      <br />\n\n      <p style={{ margin: '0', marginTop: '2rem' }}>HTML Output:</p>\n      <div\n        style={{\n          marginTop: '0rem',\n          padding: '1rem',\n          backgroundColor: '#F9F9F9',\n          borderRadius: '0.25rem',\n          color: '#666',\n        }}\n      >\n        {result}\n      </div>\n    </>\n  );\n};\n\nexport const RteEditorExample = Template.bind({});\n\nRteEditorExample.args = {\n  editorId: 'test-editor',\n  placeholder: 'Voeg hier tekst in...',\n  currentLanguage: 'NL',\n  label: 'Studiemateriaal',\n  info: \"Studiemateriaal is essentieel voor succesvol leren. Het omvat boeken, artikelen, video's en oefeningen die studenten helpen hun kennis te vergroten, vaardigheden te ontwikkelen en hun studieprestaties te verbeteren.\",\n  required: true,\n  initialValue: MOCK_RTE_CONTENT,\n};\n\nexport const MultipleRteEditors = () => {\n  const [result01, setResult01] = useState<string>(\n    'Students will:<br>• demonstrate digital literacy in an academic context<br>• learn to read and engage with texts from a range of disciplinary perspectives<br>• develop writing and argumentation skills appropriate to different disciplines<br>• learn to recognize and apply different research methodologies<br>• learn how to recognize and practice different genres and modes of academic discourse<br>• develop vocabulary appropriate to an academic environment<br>• improve analytic and critical thinking skills<br>• work independently and as part of a collaborative group<br>• learn to review and critique their own work and that of their peers <br>• improve listening comprehension and develop presentation skills<br>• participate in discussions, workshops and debates'\n  );\n  const [result02, setResult02] = useState<string>(\n    `<p>Editor 2</p>\n    <ul>\n      <li>nesting</li>\n      <li>\n        <ol>\n          <li>nested 1</li>\n          <li>nested 2</li>\n        </ol>\n      </li>\n      <li>nesting 2</li>\n      <li>\n        <ul>\n          <li>deep nested 1</li>\n            <li>deep nested 2</li>\n            <li>\n              <ol>\n                <li>deeper nested 1</li>\n                <li>\n                <ul>\n                <li>deepest nested 1</li>\n                <li>deepest nested 2</li>\n                </ul>\n                </li>\n                <li>deeper nested 2</li>\n                <li>\n                  <ol>\n                    <li>deepest nested 1</li>\n                    <li>deepest nested 2</li>\n                  </ol>\n                </li>\n              </ol>\n            </li>\n          </ul>\n        </li>\n      <li>nesting end</li>\n    </ul>`\n  );\n\n  return (\n    <div\n      style={{\n        display: 'flex',\n        flexDirection: 'row',\n        gap: '1rem',\n        width: '100%',\n        padding: '1rem',\n        backgroundColor: '#FFF',\n      }}\n    >\n      <div style={{ flex: '1' }}>\n        <RteEditor\n          initialValue={result01}\n          editorId=\"editor-one\"\n          label=\"Editor 1\"\n          info=\"Uitleg over editor 1\"\n          placeholder=\"Voeg hier tekst in...\"\n          notValidatedText=\"\"\n          onChange={(evt) => setResult01(evt)}\n        />\n        <br />\n        <p style={{ margin: '0', marginTop: '2rem' }}>HTML Output:</p>\n        <div\n          style={{\n            marginTop: '0rem',\n            padding: '1rem',\n            backgroundColor: '#F9F9F9',\n            borderRadius: '0.25rem',\n            color: '#666',\n          }}\n        >\n          {result01}\n        </div>\n      </div>\n      <div style={{ flex: '1' }}>\n        <RteEditor\n          initialValue={result02}\n          editorId=\"editor-two\"\n          label=\"Editor 2\"\n          info=\"Uitleg over editor 2 wat langer om te kijken of dat ook goed gaat, want je weet maar nooit.\"\n          placeholder=\"Voeg hier tekst in...\"\n          notValidatedText=\"\"\n          onChange={(evt) => setResult02(evt)}\n        />\n        <br />\n        <p style={{ margin: '0', marginTop: '2rem' }}>HTML Output:</p>\n        <div\n          style={{\n            marginTop: '0rem',\n            padding: '1rem',\n            backgroundColor: '#F9F9F9',\n            borderRadius: '0.25rem',\n            color: '#666',\n          }}\n        >\n          {result02}\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/components/RteEditor/helpers.js

@@ -1,7 +1,7 @@
-import { n as e, on as t } from "../../Lexical.prod-sbwgNRjw.js";
-import { c as n, o as r } from "../../LexicalList.prod-DEtc4lSr.js";
-import { t as i } from "../../LexicalLink.prod-BKLNLyu8.js";
-import { a } from "../../LexicalTable.prod-CpIPDW6z.js";
+import { Zt as e, jt as t } from "../../Lexical.prod-CqPLSi0R.js";
+import { c as n, s as r } from "../../LexicalList.prod-eYlcb5Ao.js";
+import { t as i } from "../../LexicalLink.prod-DMhcqD9x.js";
+import { i as a } from "../../LexicalTable.prod-DlOxUQou.js";
 import { CourseCatalogueNode as o } from "./nodes/CourseCatalogueNode/CourseCatalogueNode.js";
 //#region src/components/RteEditor/helpers.ts
 var s = (e) => {
@@ -12,10 +12,10 @@ var s = (e) => {
 	if (n && n.element instanceof HTMLElement) for (let e of [n.element, ...n.element.querySelectorAll("[style],[class],[dir=\"ltr\"]")]) e.removeAttribute("class"), e.getAttribute("style") && (e.setAttribute("style", ""), e.removeAttribute("style")), e.getAttribute("dir") === "ltr" && e.removeAttribute("dir");
 	return n;
 }, u = new Map([
-	[e, l],
 	[t, l],
-	[r, l],
+	[e, l],
 	[n, l],
+	[r, l],
 	[a, l],
 	[i, l],
 	[o, l]

package/dist/components/RteEditor/helpers.js.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.js","names":[],"sources":["../../../src/components/RteEditor/helpers.ts"],"sourcesContent":["import { LinkNode } from '@lexical/link';\nimport { ListNode, ListItemNode } from '@lexical/list';\nimport { ParagraphNode, TextNode } from 'lexical';\nimport { TableCellNode } from '@lexical/table';\n\nimport type { DOMExportOutput, Klass, LexicalEditor, LexicalNode } from 'lexical';\n\nimport { CourseCatalogueNode } from './nodes';\n\nexport const mergeBoldStrongTags = (html: string): string => {\n  let mergedHtml = html.replace(/<b><strong>/gi, '<strong>');\n  mergedHtml = mergedHtml.replace(/<\\/strong><\\/b>/gi, '</strong>');\n  return mergedHtml;\n};\n\nexport const cleanUpTable = (html: string): string =>\n  html.replace(/<div[^>]*>\\s*(<table[\\s\\S]*?<\\/table>)\\s*<\\/div>/gi, '$1');\n\nexport const removeStylesExportDOM = (editor: LexicalEditor, target: LexicalNode): DOMExportOutput => {\n  const output = target.exportDOM(editor);\n  if (output && output.element instanceof HTMLElement) {\n    for (const el of [output.element, ...output.element.querySelectorAll('[style],[class],[dir=\"ltr\"]')]) {\n      el.removeAttribute('class');\n      if (el.getAttribute('style')) {\n        el.setAttribute('style', '');\n        el.removeAttribute('style');\n      }\n      if (el.getAttribute('dir') === 'ltr') {\n        el.removeAttribute('dir');\n      }\n    }\n  }\n  return output;\n};\n\nexport const exportMap = new Map<Klass<LexicalNode>, (editor: LexicalEditor, target: LexicalNode) => DOMExportOutput>([\n  [ParagraphNode, removeStylesExportDOM],\n  [TextNode, removeStylesExportDOM],\n  [ListNode, removeStylesExportDOM],\n  [ListItemNode, removeStylesExportDOM],\n  [TableCellNode, removeStylesExportDOM],\n  [LinkNode, removeStylesExportDOM],\n  [CourseCatalogueNode, removeStylesExportDOM],\n]);\n\nexport const setScrollableContainers = (fn: (event: Event) => void) => {\n  const scrollableContainers = document.querySelectorAll('*');\n  scrollableContainers.forEach((container) => {\n    if (container.scrollHeight > container.clientHeight) {\n      container.addEventListener('scroll', fn);\n    }\n  });\n};\n\nexport const removeScrollableContainers = (fn: (event: Event) => void) => {\n  const scrollableContainers = document.querySelectorAll('*');\n  scrollableContainers.forEach((container) => {\n    if (container.scrollHeight > container.clientHeight) {\n      container.removeEventListener('scroll', fn);\n    }\n  });\n};\n"],"mappings":";;;;;;AASA,IAAa,KAAuB,MAAyB;CAC3D,IAAI,IAAa,EAAK,QAAQ,iBAAiB,WAAW;AAE1D,QADA,IAAa,EAAW,QAAQ,qBAAqB,YAAY,EAC1D;GAGI,KAAgB,MAC3B,EAAK,QAAQ,sDAAsD,KAAK,EAE7D,KAAyB,GAAuB,MAAyC;CACpG,IAAM,IAAS,EAAO,UAAU,EAAO;AACvC,KAAI,KAAU,EAAO,mBAAmB,YACtC,MAAK,IAAM,KAAM,CAAC,EAAO,SAAS,GAAG,EAAO,QAAQ,iBAAiB,gCAA8B,CAAC,CAMlG,CALA,EAAG,gBAAgB,QAAQ,EACvB,EAAG,aAAa,QAAQ,KAC1B,EAAG,aAAa,SAAS,GAAG,EAC5B,EAAG,gBAAgB,QAAQ,GAEzB,EAAG,aAAa,MAAM,KAAK,SAC7B,EAAG,gBAAgB,MAAM;AAI/B,QAAO;GAGI,IAAY,IAAI,IAAyF;CACpH,CAAC,GAAe,EAAsB;CACtC,CAAC,GAAU,EAAsB;CACjC,CAAC,GAAU,EAAsB;CACjC,CAAC,GAAc,EAAsB;CACrC,CAAC,GAAe,EAAsB;CACtC,CAAC,GAAU,EAAsB;CACjC,CAAC,GAAqB,EAAsB;CAC7C,CAAC,EAEW,KAA2B,MAA+B;AACxC,UAAS,iBAAiB,IAAI,CACtC,SAAS,MAAc;AAC1C,EAAI,EAAU,eAAe,EAAU,gBACrC,EAAU,iBAAiB,UAAU,EAAG;GAE1C;GAGS,KAA8B,MAA+B;AAC3C,UAAS,iBAAiB,IAAI,CACtC,SAAS,MAAc;AAC1C,EAAI,EAAU,eAAe,EAAU,gBACrC,EAAU,oBAAoB,UAAU,EAAG;GAE7C"}
+{"version":3,"file":"helpers.js","names":[],"sources":["../../../src/components/RteEditor/helpers.ts"],"sourcesContent":["import { LinkNode } from '@lexical/link';\nimport { ListNode, ListItemNode } from '@lexical/list';\nimport { ParagraphNode, TextNode } from 'lexical';\nimport { TableCellNode } from '@lexical/table';\n\nimport type { DOMExportOutput, Klass, LexicalEditor, LexicalNode } from 'lexical';\n\nimport { CourseCatalogueNode } from './nodes';\n\nexport const mergeBoldStrongTags = (html: string): string => {\n  let mergedHtml = html.replace(/<b><strong>/gi, '<strong>');\n  mergedHtml = mergedHtml.replace(/<\\/strong><\\/b>/gi, '</strong>');\n  return mergedHtml;\n};\n\nexport const cleanUpTable = (html: string): string =>\n  html.replace(/<div[^>]*>\\s*(<table[\\s\\S]*?<\\/table>)\\s*<\\/div>/gi, '$1');\n\nexport const removeStylesExportDOM = (editor: LexicalEditor, target: LexicalNode): DOMExportOutput => {\n  const output = target.exportDOM(editor);\n  if (output && output.element instanceof HTMLElement) {\n    for (const el of [output.element, ...output.element.querySelectorAll('[style],[class],[dir=\"ltr\"]')]) {\n      el.removeAttribute('class');\n      if (el.getAttribute('style')) {\n        el.setAttribute('style', '');\n        el.removeAttribute('style');\n      }\n      if (el.getAttribute('dir') === 'ltr') {\n        el.removeAttribute('dir');\n      }\n    }\n  }\n  return output;\n};\n\nexport const exportMap = new Map<Klass<LexicalNode>, (editor: LexicalEditor, target: LexicalNode) => DOMExportOutput>([\n  [ParagraphNode, removeStylesExportDOM],\n  [TextNode, removeStylesExportDOM],\n  [ListNode, removeStylesExportDOM],\n  [ListItemNode, removeStylesExportDOM],\n  [TableCellNode, removeStylesExportDOM],\n  [LinkNode, removeStylesExportDOM],\n  [CourseCatalogueNode, removeStylesExportDOM],\n]);\n\nexport const setScrollableContainers = (fn: (event: Event) => void) => {\n  const scrollableContainers = document.querySelectorAll('*');\n  scrollableContainers.forEach((container) => {\n    if (container.scrollHeight > container.clientHeight) {\n      container.addEventListener('scroll', fn);\n    }\n  });\n};\n\nexport const removeScrollableContainers = (fn: (event: Event) => void) => {\n  const scrollableContainers = document.querySelectorAll('*');\n  scrollableContainers.forEach((container) => {\n    if (container.scrollHeight > container.clientHeight) {\n      container.removeEventListener('scroll', fn);\n    }\n  });\n};\n"],"mappings":";;;;;;AASA,IAAa,KAAuB,MAAyB;CAC3D,IAAI,IAAa,EAAK,QAAQ,iBAAiB,WAAW;CAE1D,OADA,IAAa,EAAW,QAAQ,qBAAqB,YAAY,EAC1D;GAGI,KAAgB,MAC3B,EAAK,QAAQ,sDAAsD,KAAK,EAE7D,KAAyB,GAAuB,MAAyC;CACpG,IAAM,IAAS,EAAO,UAAU,EAAO;CACvC,IAAI,KAAU,EAAO,mBAAmB,aACtC,KAAK,IAAM,KAAM,CAAC,EAAO,SAAS,GAAG,EAAO,QAAQ,iBAAiB,gCAA8B,CAAC,EAMlG,AALA,EAAG,gBAAgB,QAAQ,EACvB,EAAG,aAAa,QAAQ,KAC1B,EAAG,aAAa,SAAS,GAAG,EAC5B,EAAG,gBAAgB,QAAQ,GAEzB,EAAG,aAAa,MAAM,KAAK,SAC7B,EAAG,gBAAgB,MAAM;CAI/B,OAAO;GAGI,IAAY,IAAI,IAAyF;CACpH,CAAC,GAAe,EAAsB;CACtC,CAAC,GAAU,EAAsB;CACjC,CAAC,GAAU,EAAsB;CACjC,CAAC,GAAc,EAAsB;CACrC,CAAC,GAAe,EAAsB;CACtC,CAAC,GAAU,EAAsB;CACjC,CAAC,GAAqB,EAAsB;CAC7C,CAAC,EAEW,KAA2B,MAA+B;CAErE,SADsC,iBAAiB,IACvD,CAAqB,SAAS,MAAc;EAC1C,AAAI,EAAU,eAAe,EAAU,gBACrC,EAAU,iBAAiB,UAAU,EAAG;GAE1C;GAGS,KAA8B,MAA+B;CAExE,SADsC,iBAAiB,IACvD,CAAqB,SAAS,MAAc;EAC1C,AAAI,EAAU,eAAe,EAAU,gBACrC,EAAU,oBAAoB,UAAU,EAAG;GAE7C"}

package/dist/components/RteEditor/hooks/useFlyout.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFlyout.js","names":[],"sources":["../../../../src/components/RteEditor/hooks/useFlyout.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\n\nimport type { ReactNode, RefObject } from 'react';\n\nimport { Flyout } from './components/Flyout';\n\nimport { useOnClickOutside } from 'components/hooks/useOnClickOutside';\n\ninterface FlyoutOptions {\n  position: { top: number; left: number };\n  children?: ReactNode;\n}\n\nexport interface FlyoutHookResult {\n  flyout: ReactNode;\n  showFlyout: (options: FlyoutOptions) => void;\n  hideFlyout: () => void;\n  isVisible: boolean;\n}\n\nexport const useFlyout = (): FlyoutHookResult => {\n  const flyoutRef = useRef<HTMLDivElement>(null);\n  const [visible, setVisible] = useState(false);\n  const [options, setOptions] = useState<FlyoutOptions>({\n    position: { top: 0, left: 0 },\n    children: null,\n  });\n\n  const showFlyout = (customOptions: FlyoutOptions): void => {\n    setVisible(true);\n    setOptions({ ...options, ...customOptions });\n  };\n\n  const hideFlyout = (): void => {\n    setVisible(false);\n    setOptions({ ...options });\n  };\n\n  useOnClickOutside(flyoutRef as RefObject<HTMLElement>, hideFlyout);\n\n  const flyout = (\n    <Flyout visible={visible} position={options.position} ref={flyoutRef}>\n      {options.children}\n    </Flyout>\n  );\n\n  return {\n    flyout,\n    showFlyout,\n    hideFlyout,\n    isVisible: visible,\n  };\n};\n"],"mappings":";;;;;AAoBA,IAAa,UAAoC;CAC/C,IAAM,IAAY,EAAuB,KAAK,EACxC,CAAC,GAAS,KAAc,EAAS,GAAM,EACvC,CAAC,GAAS,KAAc,EAAwB;EACpD,UAAU;GAAE,KAAK;GAAG,MAAM;GAAG;EAC7B,UAAU;EACX,CAAC,EAEI,KAAc,MAAuC;AAEzD,EADA,EAAW,GAAK,EAChB,EAAW;GAAE,GAAG;GAAS,GAAG;GAAe,CAAC;IAGxC,UAAyB;AAE7B,EADA,EAAW,GAAM,EACjB,EAAW,EAAE,GAAG,GAAS,CAAC;;AAW5B,QARA,EAAkB,GAAqC,EAAW,EAQ3D;EACL,QANA,kBAAC,GAAD;GAAiB;GAAS,UAAU,EAAQ;GAAU,KAAK;aACxD,EAAQ;GACF,CAAA;EAKT;EACA;EACA,WAAW;EACZ"}
+{"version":3,"file":"useFlyout.js","names":[],"sources":["../../../../src/components/RteEditor/hooks/useFlyout.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\n\nimport type { ReactNode, RefObject } from 'react';\n\nimport { Flyout } from './components/Flyout';\n\nimport { useOnClickOutside } from 'components/hooks/useOnClickOutside';\n\ninterface FlyoutOptions {\n  position: { top: number; left: number };\n  children?: ReactNode;\n}\n\nexport interface FlyoutHookResult {\n  flyout: ReactNode;\n  showFlyout: (options: FlyoutOptions) => void;\n  hideFlyout: () => void;\n  isVisible: boolean;\n}\n\nexport const useFlyout = (): FlyoutHookResult => {\n  const flyoutRef = useRef<HTMLDivElement>(null);\n  const [visible, setVisible] = useState(false);\n  const [options, setOptions] = useState<FlyoutOptions>({\n    position: { top: 0, left: 0 },\n    children: null,\n  });\n\n  const showFlyout = (customOptions: FlyoutOptions): void => {\n    setVisible(true);\n    setOptions({ ...options, ...customOptions });\n  };\n\n  const hideFlyout = (): void => {\n    setVisible(false);\n    setOptions({ ...options });\n  };\n\n  useOnClickOutside(flyoutRef as RefObject<HTMLElement>, hideFlyout);\n\n  const flyout = (\n    <Flyout visible={visible} position={options.position} ref={flyoutRef}>\n      {options.children}\n    </Flyout>\n  );\n\n  return {\n    flyout,\n    showFlyout,\n    hideFlyout,\n    isVisible: visible,\n  };\n};\n"],"mappings":";;;;;AAoBA,IAAa,UAAoC;CAC/C,IAAM,IAAY,EAAuB,KAAK,EACxC,CAAC,GAAS,KAAc,EAAS,GAAM,EACvC,CAAC,GAAS,KAAc,EAAwB;EACpD,UAAU;GAAE,KAAK;GAAG,MAAM;GAAG;EAC7B,UAAU;EACX,CAAC,EAEI,KAAc,MAAuC;EAEzD,AADA,EAAW,GAAK,EAChB,EAAW;GAAE,GAAG;GAAS,GAAG;GAAe,CAAC;IAGxC,UAAyB;EAE7B,AADA,EAAW,GAAM,EACjB,EAAW,EAAE,GAAG,GAAS,CAAC;;CAW5B,OARA,EAAkB,GAAqC,EAAW,EAQ3D;EACL,QANA,kBAAC,GAAD;GAAiB;GAAS,UAAU,EAAQ;GAAU,KAAK;aACxD,EAAQ;GACF,CAIT;EACA;EACA;EACA,WAAW;EACZ"}

package/dist/components/RteEditor/hooks/useTranslation.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTranslation.js","names":[],"sources":["../../../../src/components/RteEditor/hooks/useTranslation.tsx"],"sourcesContent":["import { translations } from 'components/RteEditor/translations';\nimport { useLanguage } from 'components/RteEditor/Providers/LanguageProvider';\n\nexport const useTranslation = () => {\n  const { currentLanguage } = useLanguage() as { currentLanguage: 'NL' | 'EN' };\n  return translations[currentLanguage];\n};\n"],"mappings":";;;AAGA,IAAa,UAAuB;CAClC,IAAM,EAAE,uBAAoB,GAAa;AACzC,QAAO,EAAa"}
+{"version":3,"file":"useTranslation.js","names":[],"sources":["../../../../src/components/RteEditor/hooks/useTranslation.tsx"],"sourcesContent":["import { translations } from 'components/RteEditor/translations';\nimport { useLanguage } from 'components/RteEditor/Providers/LanguageProvider';\n\nexport const useTranslation = () => {\n  const { currentLanguage } = useLanguage() as { currentLanguage: 'NL' | 'EN' };\n  return translations[currentLanguage];\n};\n"],"mappings":";;;AAGA,IAAa,UAAuB;CAClC,IAAM,EAAE,uBAAoB,GAAa;CACzC,OAAO,EAAa"}

package/dist/components/RteEditor/index.js

@@ -1,2 +1,2 @@
-import { n as e, t } from "../../components-DAwjkky5.js";
+import { n as e, t } from "../../components-BzxAULjf.js";
 export { t as Rte, e as RteEditor };

package/dist/components/RteEditor/nodes/CourseCatalogueNode/CourseCatalogueNode.js

@@ -1,9 +1,9 @@
 import { t as e } from "../../../../LexicalComposerContext.prod-Ca-YN_fj.js";
-import { $ as t, Bn as n, Dn as r, Pn as i, fn as a, r as o, vn as s } from "../../../../Lexical.prod-sbwgNRjw.js";
-import { s as c } from "../../../../LexicalUtils.prod-DjjGkphN.js";
+import { An as t, a as n, cn as r, mt as i, on as a, ot as o, v as s } from "../../../../Lexical.prod-CqPLSi0R.js";
+import { n as c } from "../../../../LexicalUtils.prod-BqcriFWV.js";
 import { useEffect as l } from "react";
 //#region src/components/RteEditor/nodes/CourseCatalogueNode/CourseCatalogueNode.tsx
-var u = class e extends t {
+var u = class e extends n {
 	__linkType;
 	__code;
 	__label;
@@ -72,27 +72,27 @@ function f(e) {
 function p(e) {
 	return f(e) ? e.__linkType : null;
 }
-var m = a("insertCourseCatalogueLink"), h = a("removeCourseCatalogueLink");
+var m = t("insertCourseCatalogueLink"), h = t("removeCourseCatalogueLink");
 function g() {
 	let [t] = e();
 	if (!t.hasNodes([u])) throw Error("CourseCataloguePlugin: CourseCatalogueNode is not registered on editor");
 	return l(() => {
 		let e = t.registerCommand(m, (e) => {
-			let t = d(e.linkType, e.code, e.label), n = s(e.label);
+			let t = d(e.linkType, e.code, e.label), n = a(e.label);
 			return t.append(n), r([t]), !0;
-		}, 2), a = t.registerCommand(h, () => {
+		}, 2), n = t.registerCommand(h, () => {
 			let e = o();
-			if (i(e)) {
-				let t = e.anchor.getNode(), r = e.anchor.offset, i = c(t, u);
-				if (n(t) && r === t.getTextContentSize() && t.getNextSibling() instanceof u && (i = t.getNextSibling()), i) {
-					let e = i.getParent();
-					i.remove(), e && e.append(s(" "));
+			if (s(e)) {
+				let t = e.anchor.getNode(), n = e.anchor.offset, r = c(t, u);
+				if (i(t) && n === t.getTextContentSize() && t.getNextSibling() instanceof u && (r = t.getNextSibling()), r) {
+					let e = r.getParent();
+					r.remove(), e && e.append(a(" "));
 				}
 			}
 			return !0;
 		}, 2);
 		return () => {
-			e(), a();
+			e(), n();
 		};
 	}, [t]), null;
 }

package/dist/components/RteEditor/nodes/CourseCatalogueNode/CourseCatalogueNode.js.map

@@ -1 +1 @@
-{"version":3,"file":"CourseCatalogueNode.js","names":[],"sources":["../../../../../src/components/RteEditor/nodes/CourseCatalogueNode/CourseCatalogueNode.tsx"],"sourcesContent":["import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';\r\nimport {\r\n  COMMAND_PRIORITY_NORMAL,\r\n  createCommand,\r\n  ElementNode,\r\n  $insertNodes,\r\n  $createTextNode,\r\n  $isRangeSelection,\r\n  $getSelection,\r\n  $isTextNode,\r\n} from 'lexical';\r\nimport { useEffect } from 'react';\r\nimport { $getNearestNodeOfType } from '@lexical/utils';\r\n\r\nimport type { DOMConversionMap, EditorConfig, LexicalNode, NodeKey, SerializedElementNode, Spread } from 'lexical';\r\n\r\nexport type SerializedCourseCatalogueNode = Spread<\r\n  {\r\n    linkType: 'course' | 'programme';\r\n    code: string;\r\n    label: string;\r\n  },\r\n  SerializedElementNode\r\n>;\r\n\r\nexport class CourseCatalogueNode extends ElementNode {\r\n  __linkType: 'course' | 'programme';\r\n  __code: string;\r\n  __label: string;\r\n\r\n  constructor(linkType: 'course' | 'programme', code: string, label: string, key?: NodeKey) {\r\n    super(key);\r\n    this.__linkType = linkType;\r\n    this.__code = code;\r\n    this.__label = label;\r\n  }\r\n\r\n  isInline(): boolean {\r\n    return true;\r\n  }\r\n\r\n  canBeEmpty(): boolean {\r\n    return false;\r\n  }\r\n\r\n  canInsertTextBefore(): boolean {\r\n    return false;\r\n  }\r\n\r\n  canInsertTextAfter(): boolean {\r\n    return true;\r\n  }\r\n\r\n  static clone(node: CourseCatalogueNode): CourseCatalogueNode {\r\n    return new CourseCatalogueNode(node.__linkType, node.__code, node.__label, node.__key);\r\n  }\r\n\r\n  static getType(): string {\r\n    return 'courseCatalogueLink';\r\n  }\r\n\r\n  createDOM(config: EditorConfig): HTMLElement {\r\n    const element = document.createElement('a');\r\n    element.className = config.theme.courseCatalogueLink;\r\n    // eslint-disable-next-line no-script-url\r\n    element.href = 'javascript:void(0);';\r\n    element.setAttribute('data-linktype', this.__linkType);\r\n    element.setAttribute('data-code', this.__code);\r\n    return element;\r\n  }\r\n\r\n  updateDOM(): false {\r\n    return false;\r\n  }\r\n\r\n  static importDOM(): DOMConversionMap<HTMLAnchorElement> | null {\r\n    return {\r\n      // eslint-disable-next-line id-length\r\n      a: (domNode: HTMLAnchorElement) => {\r\n        const linkTypeAttr = domNode.getAttribute('data-linktype');\r\n        if (linkTypeAttr !== 'course' && linkTypeAttr !== 'programme') {\r\n          return null;\r\n        }\r\n        const linkType = linkTypeAttr;\r\n        const code = domNode.getAttribute('data-code');\r\n        if (!code) {\r\n          return null;\r\n        }\r\n        const label = domNode.textContent || '';\r\n        if (!label) {\r\n          return null;\r\n        }\r\n        return {\r\n          conversion: () => {\r\n            const node = $createCourseCatalogueNode(linkType, code, label);\r\n            return { node };\r\n          },\r\n          priority: 2,\r\n        };\r\n      },\r\n    };\r\n  }\r\n\r\n  static importJSON(serializedNode: SerializedCourseCatalogueNode): CourseCatalogueNode {\r\n    const catalogueNode = $createCourseCatalogueNode(\r\n      serializedNode.linkType,\r\n      serializedNode.code,\r\n      serializedNode.label\r\n    );\r\n    catalogueNode.setFormat(serializedNode.format);\r\n    return catalogueNode;\r\n  }\r\n\r\n  exportJSON(): SerializedCourseCatalogueNode {\r\n    return {\r\n      ...super.exportJSON(),\r\n      type: 'courseCatalogueLink',\r\n      version: 1,\r\n      linkType: this.__linkType,\r\n      code: this.__code,\r\n      label: this.__label,\r\n    };\r\n  }\r\n}\r\n\r\nexport function $createCourseCatalogueNode(\r\n  linkType: 'course' | 'programme',\r\n  code: string,\r\n  label: string = ''\r\n): CourseCatalogueNode {\r\n  return new CourseCatalogueNode(linkType, code, label);\r\n}\r\n\r\nexport function $isCourseCatalogueNode(node: LexicalNode): node is CourseCatalogueNode {\r\n  return node instanceof CourseCatalogueNode;\r\n}\r\n\r\nexport function $getLinkTypeFromNode(node: LexicalNode): 'course' | 'programme' | null {\r\n  if ($isCourseCatalogueNode(node)) {\r\n    return node.__linkType;\r\n  }\r\n  return null;\r\n}\r\n\r\nexport const INSERT_COURSE_CATALOGUE_LINK = createCommand('insertCourseCatalogueLink');\r\n\r\nexport const REMOVE_COURSE_CATALOGUE_LINK = createCommand('removeCourseCatalogueLink');\r\n\r\nexport function CourseCatalogueLinkPlugin(): null {\r\n  const [editor] = useLexicalComposerContext();\r\n  if (!editor.hasNodes([CourseCatalogueNode])) {\r\n    throw new Error('CourseCataloguePlugin: CourseCatalogueNode is not registered on editor');\r\n  }\r\n  useEffect(() => {\r\n    const insertCourseCatalogueLink = editor.registerCommand(\r\n      INSERT_COURSE_CATALOGUE_LINK,\r\n      (payload: { linkType: 'course' | 'programme'; code: string; label: string }) => {\r\n        const courseCatalogueNode = $createCourseCatalogueNode(payload.linkType, payload.code, payload.label);\r\n        const textNode = $createTextNode(payload.label);\r\n        courseCatalogueNode.append(textNode);\r\n        $insertNodes([courseCatalogueNode]);\r\n        return true;\r\n      },\r\n      COMMAND_PRIORITY_NORMAL\r\n    );\r\n    const removeCourseCatalogueLink = editor.registerCommand(\r\n      REMOVE_COURSE_CATALOGUE_LINK,\r\n      () => {\r\n        const selection = $getSelection();\r\n        if ($isRangeSelection(selection)) {\r\n          const node = selection.anchor.getNode();\r\n          const offset = selection.anchor.offset;\r\n          let courseCatalogueNode = $getNearestNodeOfType(node, CourseCatalogueNode);\r\n\r\n          if (\r\n            $isTextNode(node) &&\r\n            offset === node.getTextContentSize() &&\r\n            node.getNextSibling() instanceof CourseCatalogueNode\r\n          ) {\r\n            courseCatalogueNode = node.getNextSibling();\r\n          }\r\n\r\n          if (courseCatalogueNode) {\r\n            const parent = courseCatalogueNode.getParent();\r\n            courseCatalogueNode.remove();\r\n            if (parent) {\r\n              parent.append($createTextNode(' '));\r\n            }\r\n          }\r\n        }\r\n        return true;\r\n      },\r\n      COMMAND_PRIORITY_NORMAL\r\n    );\r\n\r\n    return () => {\r\n      insertCourseCatalogueLink();\r\n      removeCourseCatalogueLink();\r\n    };\r\n  }, [editor]);\r\n\r\n  return null;\r\n}\r\n"],"mappings":"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"}
+{"version":3,"file":"CourseCatalogueNode.js","names":[],"sources":["../../../../../src/components/RteEditor/nodes/CourseCatalogueNode/CourseCatalogueNode.tsx"],"sourcesContent":["import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';\r\nimport {\r\n  COMMAND_PRIORITY_NORMAL,\r\n  createCommand,\r\n  ElementNode,\r\n  $insertNodes,\r\n  $createTextNode,\r\n  $isRangeSelection,\r\n  $getSelection,\r\n  $isTextNode,\r\n} from 'lexical';\r\nimport { useEffect } from 'react';\r\nimport { $getNearestNodeOfType } from '@lexical/utils';\r\n\r\nimport type { DOMConversionMap, EditorConfig, LexicalNode, NodeKey, SerializedElementNode, Spread } from 'lexical';\r\n\r\nexport type SerializedCourseCatalogueNode = Spread<\r\n  {\r\n    linkType: 'course' | 'programme';\r\n    code: string;\r\n    label: string;\r\n  },\r\n  SerializedElementNode\r\n>;\r\n\r\nexport class CourseCatalogueNode extends ElementNode {\r\n  __linkType: 'course' | 'programme';\r\n  __code: string;\r\n  __label: string;\r\n\r\n  constructor(linkType: 'course' | 'programme', code: string, label: string, key?: NodeKey) {\r\n    super(key);\r\n    this.__linkType = linkType;\r\n    this.__code = code;\r\n    this.__label = label;\r\n  }\r\n\r\n  isInline(): boolean {\r\n    return true;\r\n  }\r\n\r\n  canBeEmpty(): boolean {\r\n    return false;\r\n  }\r\n\r\n  canInsertTextBefore(): boolean {\r\n    return false;\r\n  }\r\n\r\n  canInsertTextAfter(): boolean {\r\n    return true;\r\n  }\r\n\r\n  static clone(node: CourseCatalogueNode): CourseCatalogueNode {\r\n    return new CourseCatalogueNode(node.__linkType, node.__code, node.__label, node.__key);\r\n  }\r\n\r\n  static getType(): string {\r\n    return 'courseCatalogueLink';\r\n  }\r\n\r\n  createDOM(config: EditorConfig): HTMLElement {\r\n    const element = document.createElement('a');\r\n    element.className = config.theme.courseCatalogueLink;\r\n    // eslint-disable-next-line no-script-url\r\n    element.href = 'javascript:void(0);';\r\n    element.setAttribute('data-linktype', this.__linkType);\r\n    element.setAttribute('data-code', this.__code);\r\n    return element;\r\n  }\r\n\r\n  updateDOM(): false {\r\n    return false;\r\n  }\r\n\r\n  static importDOM(): DOMConversionMap<HTMLAnchorElement> | null {\r\n    return {\r\n      // eslint-disable-next-line id-length\r\n      a: (domNode: HTMLAnchorElement) => {\r\n        const linkTypeAttr = domNode.getAttribute('data-linktype');\r\n        if (linkTypeAttr !== 'course' && linkTypeAttr !== 'programme') {\r\n          return null;\r\n        }\r\n        const linkType = linkTypeAttr;\r\n        const code = domNode.getAttribute('data-code');\r\n        if (!code) {\r\n          return null;\r\n        }\r\n        const label = domNode.textContent || '';\r\n        if (!label) {\r\n          return null;\r\n        }\r\n        return {\r\n          conversion: () => {\r\n            const node = $createCourseCatalogueNode(linkType, code, label);\r\n            return { node };\r\n          },\r\n          priority: 2,\r\n        };\r\n      },\r\n    };\r\n  }\r\n\r\n  static importJSON(serializedNode: SerializedCourseCatalogueNode): CourseCatalogueNode {\r\n    const catalogueNode = $createCourseCatalogueNode(\r\n      serializedNode.linkType,\r\n      serializedNode.code,\r\n      serializedNode.label\r\n    );\r\n    catalogueNode.setFormat(serializedNode.format);\r\n    return catalogueNode;\r\n  }\r\n\r\n  exportJSON(): SerializedCourseCatalogueNode {\r\n    return {\r\n      ...super.exportJSON(),\r\n      type: 'courseCatalogueLink',\r\n      version: 1,\r\n      linkType: this.__linkType,\r\n      code: this.__code,\r\n      label: this.__label,\r\n    };\r\n  }\r\n}\r\n\r\nexport function $createCourseCatalogueNode(\r\n  linkType: 'course' | 'programme',\r\n  code: string,\r\n  label: string = ''\r\n): CourseCatalogueNode {\r\n  return new CourseCatalogueNode(linkType, code, label);\r\n}\r\n\r\nexport function $isCourseCatalogueNode(node: LexicalNode): node is CourseCatalogueNode {\r\n  return node instanceof CourseCatalogueNode;\r\n}\r\n\r\nexport function $getLinkTypeFromNode(node: LexicalNode): 'course' | 'programme' | null {\r\n  if ($isCourseCatalogueNode(node)) {\r\n    return node.__linkType;\r\n  }\r\n  return null;\r\n}\r\n\r\nexport const INSERT_COURSE_CATALOGUE_LINK = createCommand('insertCourseCatalogueLink');\r\n\r\nexport const REMOVE_COURSE_CATALOGUE_LINK = createCommand('removeCourseCatalogueLink');\r\n\r\nexport function CourseCatalogueLinkPlugin(): null {\r\n  const [editor] = useLexicalComposerContext();\r\n  if (!editor.hasNodes([CourseCatalogueNode])) {\r\n    throw new Error('CourseCataloguePlugin: CourseCatalogueNode is not registered on editor');\r\n  }\r\n  useEffect(() => {\r\n    const insertCourseCatalogueLink = editor.registerCommand(\r\n      INSERT_COURSE_CATALOGUE_LINK,\r\n      (payload: { linkType: 'course' | 'programme'; code: string; label: string }) => {\r\n        const courseCatalogueNode = $createCourseCatalogueNode(payload.linkType, payload.code, payload.label);\r\n        const textNode = $createTextNode(payload.label);\r\n        courseCatalogueNode.append(textNode);\r\n        $insertNodes([courseCatalogueNode]);\r\n        return true;\r\n      },\r\n      COMMAND_PRIORITY_NORMAL\r\n    );\r\n    const removeCourseCatalogueLink = editor.registerCommand(\r\n      REMOVE_COURSE_CATALOGUE_LINK,\r\n      () => {\r\n        const selection = $getSelection();\r\n        if ($isRangeSelection(selection)) {\r\n          const node = selection.anchor.getNode();\r\n          const offset = selection.anchor.offset;\r\n          let courseCatalogueNode = $getNearestNodeOfType(node, CourseCatalogueNode);\r\n\r\n          if (\r\n            $isTextNode(node) &&\r\n            offset === node.getTextContentSize() &&\r\n            node.getNextSibling() instanceof CourseCatalogueNode\r\n          ) {\r\n            courseCatalogueNode = node.getNextSibling();\r\n          }\r\n\r\n          if (courseCatalogueNode) {\r\n            const parent = courseCatalogueNode.getParent();\r\n            courseCatalogueNode.remove();\r\n            if (parent) {\r\n              parent.append($createTextNode(' '));\r\n            }\r\n          }\r\n        }\r\n        return true;\r\n      },\r\n      COMMAND_PRIORITY_NORMAL\r\n    );\r\n\r\n    return () => {\r\n      insertCourseCatalogueLink();\r\n      removeCourseCatalogueLink();\r\n    };\r\n  }, [editor]);\r\n\r\n  return null;\r\n}\r\n"],"mappings":"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"}

package/dist/components/RteEditor/nodes/TableWrapperNode/TableWrapperNode.js

@@ -1,9 +1,9 @@
 import { t as e } from "../../../../LexicalComposerContext.prod-Ca-YN_fj.js";
-import { $ as t, Pn as n, fn as r, kt as i, m as a, r as o } from "../../../../Lexical.prod-sbwgNRjw.js";
-import { g as s, s as c } from "../../../../LexicalUtils.prod-DjjGkphN.js";
+import { An as t, Gt as n, St as r, a as i, ot as a, v as o } from "../../../../Lexical.prod-CqPLSi0R.js";
+import { n as s, p as c } from "../../../../LexicalUtils.prod-BqcriFWV.js";
 import { useEffect as l } from "react";
 //#region src/components/RteEditor/nodes/TableWrapperNode/TableWrapperNode.tsx
-var u = class e extends t {
+var u = class e extends i {
 	static getType() {
 		return "tableWrapper";
 	}
@@ -18,8 +18,8 @@ var u = class e extends t {
 		return !1;
 	}
 	insertNewAfter(e, t) {
-		let n = i(), r = this.getDirection();
-		return n.setDirection(r), this.insertAfter(n, t), n;
+		let r = n(), i = this.getDirection();
+		return r.setDirection(i), this.insertAfter(r, t), r;
 	}
 };
 function d() {
@@ -28,30 +28,30 @@ function d() {
 function f(e) {
 	return e instanceof u;
 }
-var p = r("insertTableWrapperNode"), m = r("removeTableWrapperNode");
+var p = t("insertTableWrapperNode"), m = t("removeTableWrapperNode");
 function h() {
 	let [t] = e();
 	if (!t.hasNodes([u])) throw Error("TableWrapperPlugin: TableWrapperNode is not registered on editor");
 	return l(() => {
 		let e = t.registerCommand(p, () => {
-			let e = o();
-			return n(e) && s(e, d), !0;
-		}, 2), r = t.registerCommand(m, () => {
-			let e = o();
-			if (n(e)) {
+			let e = a();
+			return o(e) && c(e, d), !0;
+		}, 2), i = t.registerCommand(m, () => {
+			let e = a();
+			if (o(e)) {
 				let t = e.anchor.getNode();
-				if (!a(t)) return !1;
-				let n = c(t, u);
-				if (!n) return !1;
-				let r = n?.getChildren();
-				if (!r) return !1;
-				let o = i();
-				r.forEach((e) => o.append(e)), n.replace(o);
+				if (!r(t)) return !1;
+				let i = s(t, u);
+				if (!i) return !1;
+				let a = i?.getChildren();
+				if (!a) return !1;
+				let o = n();
+				a.forEach((e) => o.append(e)), i.replace(o);
 			}
 			return !0;
 		}, 2);
 		return () => {
-			e(), r();
+			e(), i();
 		};
 	}, [t]), null;
 }

package/dist/components/RteEditor/nodes/TableWrapperNode/TableWrapperNode.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableWrapperNode.js","names":[],"sources":["../../../../../src/components/RteEditor/nodes/TableWrapperNode/TableWrapperNode.tsx"],"sourcesContent":["import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';\r\nimport {\r\n  $createParagraphNode,\r\n  $getSelection,\r\n  $isElementNode,\r\n  $isRangeSelection,\r\n  COMMAND_PRIORITY_NORMAL,\r\n  createCommand,\r\n  ElementNode,\r\n} from 'lexical';\r\nimport { $getNearestNodeOfType } from '@lexical/utils';\r\nimport { $setBlocksType } from '@lexical/selection';\r\nimport { useEffect } from 'react';\r\n\r\nimport type { SerializedDecoratorBlockNode } from '@lexical/react/LexicalDecoratorBlockNode';\r\nimport type { EditorConfig, LexicalNode, RangeSelection } from 'lexical';\r\n\r\nexport type SerializedTableWrapperNode = SerializedDecoratorBlockNode;\r\n\r\nexport class TableWrapperNode extends ElementNode {\r\n  static getType(): string {\r\n    return 'tableWrapper';\r\n  }\r\n\r\n  static clone(node: TableWrapperNode): TableWrapperNode {\r\n    return new TableWrapperNode(node.__key);\r\n  }\r\n\r\n  createDOM(config: EditorConfig): HTMLElement {\r\n    const element = document.createElement('div');\r\n    element.className = config.theme.tableWrapper;\r\n    return element;\r\n  }\r\n\r\n  updateDOM(): false {\r\n    return false;\r\n  }\r\n\r\n  insertNewAfter(_selection: RangeSelection, restoreSelection?: boolean | undefined): LexicalNode | null {\r\n    const newBlock = $createParagraphNode();\r\n    const direction = this.getDirection();\r\n    newBlock.setDirection(direction);\r\n    this.insertAfter(newBlock, restoreSelection);\r\n    return newBlock;\r\n  }\r\n}\r\n\r\nexport function $createTableWrapperNode(): TableWrapperNode {\r\n  return new TableWrapperNode();\r\n}\r\n\r\nexport function $isTableWrapperNode(node: LexicalNode): node is TableWrapperNode {\r\n  return node instanceof TableWrapperNode;\r\n}\r\n\r\nexport const INSERT_TABLE_WRAPPER = createCommand('insertTableWrapperNode');\r\n\r\nexport const REMOVE_TABLE_WRAPPER = createCommand('removeTableWrapperNode');\r\n\r\nexport function TableWrapperPlugin(): null {\r\n  const [editor] = useLexicalComposerContext();\r\n  if (!editor.hasNodes([TableWrapperNode])) {\r\n    throw new Error('TableWrapperPlugin: TableWrapperNode is not registered on editor');\r\n  }\r\n  useEffect(() => {\r\n    const insertTableWrapper = editor.registerCommand(\r\n      INSERT_TABLE_WRAPPER,\r\n      () => {\r\n        const selection = $getSelection();\r\n        if ($isRangeSelection(selection)) {\r\n          $setBlocksType(selection, $createTableWrapperNode);\r\n        }\r\n        return true;\r\n      },\r\n      COMMAND_PRIORITY_NORMAL\r\n    );\r\n\r\n    const removeTableWrapper = editor.registerCommand(\r\n      REMOVE_TABLE_WRAPPER,\r\n      () => {\r\n        const selection = $getSelection();\r\n        if ($isRangeSelection(selection)) {\r\n          const node = selection.anchor.getNode();\r\n          if (!$isElementNode(node)) return false;\r\n          const tableWrapperNode = $getNearestNodeOfType(node, TableWrapperNode);\r\n          if (!tableWrapperNode) return false;\r\n          const childrenNodes = tableWrapperNode?.getChildren();\r\n          if (!childrenNodes) return false;\r\n          const paragraphNode = $createParagraphNode();\r\n          childrenNodes.forEach((child) => paragraphNode.append(child));\r\n          tableWrapperNode.replace(paragraphNode);\r\n        }\r\n        return true;\r\n      },\r\n      COMMAND_PRIORITY_NORMAL\r\n    );\r\n\r\n    return () => {\r\n      insertTableWrapper();\r\n      removeTableWrapper();\r\n    };\r\n  }, [editor]);\r\n  return null;\r\n}\r\n"],"mappings":";;;;;AAmBA,IAAa,IAAb,MAAa,UAAyB,EAAY;CAChD,OAAO,UAAkB;AACvB,SAAO;;CAGT,OAAO,MAAM,GAA0C;AACrD,SAAO,IAAI,EAAiB,EAAK,MAAM;;CAGzC,UAAU,GAAmC;EAC3C,IAAM,IAAU,SAAS,cAAc,MAAM;AAE7C,SADA,EAAQ,YAAY,EAAO,MAAM,cAC1B;;CAGT,YAAmB;AACjB,SAAO;;CAGT,eAAe,GAA4B,GAA4D;EACrG,IAAM,IAAW,GAAsB,EACjC,IAAY,KAAK,cAAc;AAGrC,SAFA,EAAS,aAAa,EAAU,EAChC,KAAK,YAAY,GAAU,EAAiB,EACrC;;;AAIX,SAAgB,IAA4C;AAC1D,QAAO,IAAI,GAAkB;;AAG/B,SAAgB,EAAoB,GAA6C;AAC/E,QAAO,aAAgB;;AAGzB,IAAa,IAAuB,EAAc,yBAAyB,EAE9D,IAAuB,EAAc,yBAAyB;AAE3E,SAAgB,IAA2B;CACzC,IAAM,CAAC,KAAU,GAA2B;AAC5C,KAAI,CAAC,EAAO,SAAS,CAAC,EAAiB,CAAC,CACtC,OAAU,MAAM,mEAAmE;AAwCrF,QAtCA,QAAgB;EACd,IAAM,IAAqB,EAAO,gBAChC,SACM;GACJ,IAAM,IAAY,GAAe;AAIjC,UAHI,EAAkB,EAAU,IAC9B,EAAe,GAAW,EAAwB,EAE7C;OAGV,EAEK,IAAqB,EAAO,gBAChC,SACM;GACJ,IAAM,IAAY,GAAe;AACjC,OAAI,EAAkB,EAAU,EAAE;IAChC,IAAM,IAAO,EAAU,OAAO,SAAS;AACvC,QAAI,CAAC,EAAe,EAAK,CAAE,QAAO;IAClC,IAAM,IAAmB,EAAsB,GAAM,EAAiB;AACtE,QAAI,CAAC,EAAkB,QAAO;IAC9B,IAAM,IAAgB,GAAkB,aAAa;AACrD,QAAI,CAAC,EAAe,QAAO;IAC3B,IAAM,IAAgB,GAAsB;AAE5C,IADA,EAAc,SAAS,MAAU,EAAc,OAAO,EAAM,CAAC,EAC7D,EAAiB,QAAQ,EAAc;;AAEzC,UAAO;OAGV;AAED,eAAa;AAEX,GADA,GAAoB,EACpB,GAAoB;;IAErB,CAAC,EAAO,CAAC,EACL"}
+{"version":3,"file":"TableWrapperNode.js","names":[],"sources":["../../../../../src/components/RteEditor/nodes/TableWrapperNode/TableWrapperNode.tsx"],"sourcesContent":["import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';\r\nimport {\r\n  $createParagraphNode,\r\n  $getSelection,\r\n  $isElementNode,\r\n  $isRangeSelection,\r\n  COMMAND_PRIORITY_NORMAL,\r\n  createCommand,\r\n  ElementNode,\r\n} from 'lexical';\r\nimport { $getNearestNodeOfType } from '@lexical/utils';\r\nimport { $setBlocksType } from '@lexical/selection';\r\nimport { useEffect } from 'react';\r\n\r\nimport type { SerializedDecoratorBlockNode } from '@lexical/react/LexicalDecoratorBlockNode';\r\nimport type { EditorConfig, LexicalNode, RangeSelection } from 'lexical';\r\n\r\nexport type SerializedTableWrapperNode = SerializedDecoratorBlockNode;\r\n\r\nexport class TableWrapperNode extends ElementNode {\r\n  static getType(): string {\r\n    return 'tableWrapper';\r\n  }\r\n\r\n  static clone(node: TableWrapperNode): TableWrapperNode {\r\n    return new TableWrapperNode(node.__key);\r\n  }\r\n\r\n  createDOM(config: EditorConfig): HTMLElement {\r\n    const element = document.createElement('div');\r\n    element.className = config.theme.tableWrapper;\r\n    return element;\r\n  }\r\n\r\n  updateDOM(): false {\r\n    return false;\r\n  }\r\n\r\n  insertNewAfter(_selection: RangeSelection, restoreSelection?: boolean | undefined): LexicalNode | null {\r\n    const newBlock = $createParagraphNode();\r\n    const direction = this.getDirection();\r\n    newBlock.setDirection(direction);\r\n    this.insertAfter(newBlock, restoreSelection);\r\n    return newBlock;\r\n  }\r\n}\r\n\r\nexport function $createTableWrapperNode(): TableWrapperNode {\r\n  return new TableWrapperNode();\r\n}\r\n\r\nexport function $isTableWrapperNode(node: LexicalNode): node is TableWrapperNode {\r\n  return node instanceof TableWrapperNode;\r\n}\r\n\r\nexport const INSERT_TABLE_WRAPPER = createCommand('insertTableWrapperNode');\r\n\r\nexport const REMOVE_TABLE_WRAPPER = createCommand('removeTableWrapperNode');\r\n\r\nexport function TableWrapperPlugin(): null {\r\n  const [editor] = useLexicalComposerContext();\r\n  if (!editor.hasNodes([TableWrapperNode])) {\r\n    throw new Error('TableWrapperPlugin: TableWrapperNode is not registered on editor');\r\n  }\r\n  useEffect(() => {\r\n    const insertTableWrapper = editor.registerCommand(\r\n      INSERT_TABLE_WRAPPER,\r\n      () => {\r\n        const selection = $getSelection();\r\n        if ($isRangeSelection(selection)) {\r\n          $setBlocksType(selection, $createTableWrapperNode);\r\n        }\r\n        return true;\r\n      },\r\n      COMMAND_PRIORITY_NORMAL\r\n    );\r\n\r\n    const removeTableWrapper = editor.registerCommand(\r\n      REMOVE_TABLE_WRAPPER,\r\n      () => {\r\n        const selection = $getSelection();\r\n        if ($isRangeSelection(selection)) {\r\n          const node = selection.anchor.getNode();\r\n          if (!$isElementNode(node)) return false;\r\n          const tableWrapperNode = $getNearestNodeOfType(node, TableWrapperNode);\r\n          if (!tableWrapperNode) return false;\r\n          const childrenNodes = tableWrapperNode?.getChildren();\r\n          if (!childrenNodes) return false;\r\n          const paragraphNode = $createParagraphNode();\r\n          childrenNodes.forEach((child) => paragraphNode.append(child));\r\n          tableWrapperNode.replace(paragraphNode);\r\n        }\r\n        return true;\r\n      },\r\n      COMMAND_PRIORITY_NORMAL\r\n    );\r\n\r\n    return () => {\r\n      insertTableWrapper();\r\n      removeTableWrapper();\r\n    };\r\n  }, [editor]);\r\n  return null;\r\n}\r\n"],"mappings":";;;;;AAmBA,IAAa,IAAb,MAAa,UAAyB,EAAY;CAChD,OAAO,UAAkB;EACvB,OAAO;;CAGT,OAAO,MAAM,GAA0C;EACrD,OAAO,IAAI,EAAiB,EAAK,MAAM;;CAGzC,UAAU,GAAmC;EAC3C,IAAM,IAAU,SAAS,cAAc,MAAM;EAE7C,OADA,EAAQ,YAAY,EAAO,MAAM,cAC1B;;CAGT,YAAmB;EACjB,OAAO;;CAGT,eAAe,GAA4B,GAA4D;EACrG,IAAM,IAAW,GAAsB,EACjC,IAAY,KAAK,cAAc;EAGrC,OAFA,EAAS,aAAa,EAAU,EAChC,KAAK,YAAY,GAAU,EAAiB,EACrC;;;AAIX,SAAgB,IAA4C;CAC1D,OAAO,IAAI,GAAkB;;AAG/B,SAAgB,EAAoB,GAA6C;CAC/E,OAAO,aAAgB;;AAGzB,IAAa,IAAuB,EAAc,yBAAyB,EAE9D,IAAuB,EAAc,yBAAyB;AAE3E,SAAgB,IAA2B;CACzC,IAAM,CAAC,KAAU,GAA2B;CAC5C,IAAI,CAAC,EAAO,SAAS,CAAC,EAAiB,CAAC,EACtC,MAAU,MAAM,mEAAmE;CAwCrF,OAtCA,QAAgB;EACd,IAAM,IAAqB,EAAO,gBAChC,SACM;GACJ,IAAM,IAAY,GAAe;GAIjC,OAHI,EAAkB,EAAU,IAC9B,EAAe,GAAW,EAAwB,EAE7C;OAGV,EAEK,IAAqB,EAAO,gBAChC,SACM;GACJ,IAAM,IAAY,GAAe;GACjC,IAAI,EAAkB,EAAU,EAAE;IAChC,IAAM,IAAO,EAAU,OAAO,SAAS;IACvC,IAAI,CAAC,EAAe,EAAK,EAAE,OAAO;IAClC,IAAM,IAAmB,EAAsB,GAAM,EAAiB;IACtE,IAAI,CAAC,GAAkB,OAAO;IAC9B,IAAM,IAAgB,GAAkB,aAAa;IACrD,IAAI,CAAC,GAAe,OAAO;IAC3B,IAAM,IAAgB,GAAsB;IAE5C,AADA,EAAc,SAAS,MAAU,EAAc,OAAO,EAAM,CAAC,EAC7D,EAAiB,QAAQ,EAAc;;GAEzC,OAAO;OAGV;EAED,aAAa;GAEX,AADA,GAAoB,EACpB,GAAoB;;IAErB,CAAC,EAAO,CAAC,EACL"}

package/dist/components/SearchField/SearchField.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchField.js","names":[],"sources":["../../../src/components/SearchField/SearchField.tsx"],"sourcesContent":["import { Children, cloneElement, isValidElement, useEffect, useRef, useState } from 'react';\r\nimport { clsx } from 'clsx';\r\n\r\nimport type { KeyboardEvent, ReactNode, RefObject } from 'react';\r\nimport type { ResultOptionProps } from './components/ResultsOption';\r\n\r\nimport { ResultOption } from './components/ResultsOption';\r\nimport styles from './SearchField.module.css';\r\nimport { ResultOptionBox } from './components/ResultOptionBox';\r\n\r\nimport { Icon } from 'components/Icon';\r\nimport { useOnClickOutside } from 'components/hooks/useOnClickOutside';\r\n\r\nexport interface SearchFieldProps {\r\n  /** Unique identifier for the search field. */\r\n  id: string;\r\n  /** Placeholder text for the search input. */\r\n  placeholder: string;\r\n  /** Indicates if the search field is in a loading state. */\r\n  isLoading?: boolean;\r\n  /** If true, the search field is displayed in a compact style. */\r\n  isCompact?: boolean;\r\n  /** Callback function triggered when the input value changes. */\r\n  onChange: (query: string) => void;\r\n  /** The children elements, typically ResultOption components. */\r\n  children: ReactNode;\r\n  /** Optional row to display the count of results. */\r\n  resultCountRow?: ReactNode;\r\n}\r\n\r\nexport const SearchField = ({\r\n  id,\r\n  placeholder,\r\n  isLoading = false,\r\n  isCompact,\r\n  onChange,\r\n  children,\r\n  resultCountRow,\r\n}: SearchFieldProps) => {\r\n  const inputRef = useRef<HTMLInputElement>(null);\r\n  const [showField, setShowField] = useState<boolean>(false);\r\n  const optionListRef = useRef<HTMLDivElement>(null);\r\n\r\n  const handleReset = () => {\r\n    if (inputRef.current) {\r\n      inputRef.current.value = '';\r\n      inputRef.current.focus();\r\n    }\r\n  };\r\n\r\n  const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\r\n    const target = event.target;\r\n    const value = target.value;\r\n    target.setSelectionRange(value.length, value.length);\r\n    if (value) {\r\n      onChange(value);\r\n    }\r\n  };\r\n\r\n  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\r\n    switch (event.key) {\r\n      case 'Escape':\r\n        event.preventDefault();\r\n        onChange('');\r\n        if (inputRef.current) {\r\n          inputRef.current.value = '';\r\n        }\r\n        if (isCompact) {\r\n          setShowField(false);\r\n          inputRef.current?.blur();\r\n        }\r\n        break;\r\n      case 'ArrowDown': {\r\n        event.preventDefault();\r\n        const container = optionListRef.current;\r\n        const firstFocusable = container?.querySelector<HTMLElement>('li[role=\"option\"]:not([tabindex=\"-1\"])');\r\n        if (firstFocusable) {\r\n          let currentOption: HTMLElement | null = firstFocusable;\r\n          while (currentOption && currentOption.getAttribute('tabindex') === '-1') {\r\n            currentOption = currentOption.nextElementSibling as HTMLElement;\r\n          }\r\n          currentOption?.focus();\r\n        }\r\n        break;\r\n      }\r\n    }\r\n  };\r\n\r\n  useEffect(() => {\r\n    if (!Children.count(children) && inputRef.current?.value.length === 0 && isCompact && resultCountRow === null) {\r\n      setShowField(false);\r\n    }\r\n  }, [children, isCompact, resultCountRow]);\r\n\r\n  useEffect(() => {\r\n    if (inputRef.current === null) return;\r\n\r\n    const handleBlur = () => {\r\n      if (isCompact && !Children.count(children)) {\r\n        setShowField(false);\r\n      }\r\n    };\r\n\r\n    const currentInput = inputRef.current;\r\n    currentInput.addEventListener('blur', handleBlur);\r\n\r\n    return () => {\r\n      currentInput.removeEventListener('blur', handleBlur);\r\n    };\r\n  }, [isCompact, children]);\r\n\r\n  useEffect(() => {\r\n    if (isCompact && showField && inputRef.current) {\r\n      inputRef.current.focus();\r\n    }\r\n  }, [isCompact, showField]);\r\n\r\n  useOnClickOutside(optionListRef as RefObject<HTMLElement>, onChange.bind(null, ''));\r\n\r\n  return (\r\n    <div className={styles['search-field__input-wrapper']}>\r\n      {isCompact && (\r\n        <button\r\n          type=\"button\"\r\n          className={styles['search-field__compact-button']}\r\n          onClick={() => setShowField(true)}\r\n          aria-label={placeholder}\r\n        >\r\n          <Icon name=\"Magnify\" className={styles['search-field__compact-icon']} aria-hidden=\"true\" />\r\n        </button>\r\n      )}\r\n      <div\r\n        className={clsx(styles['search-field__input-container'], {\r\n          [styles['search-field__input-container--hidden']]: isCompact && !showField,\r\n          [styles['search-field__input-container--visible']]: isCompact && showField,\r\n        })}\r\n      >\r\n        <Icon name=\"Magnify\" className={styles['search-field__icon']} aria-hidden=\"true\" />\r\n        <input\r\n          type=\"text\"\r\n          className={styles['search-field__input-field']}\r\n          placeholder={placeholder}\r\n          id={id}\r\n          onChange={(event) => onChange(event.target.value)}\r\n          onFocus={handleFocus}\r\n          onKeyDown={handleKeyDown}\r\n          role=\"combobox\"\r\n          aria-expanded={Boolean(Children.count(children)) || isLoading}\r\n          aria-controls={`${id}-results`}\r\n          aria-autocomplete=\"list\"\r\n          aria-haspopup=\"listbox\"\r\n          aria-label={placeholder}\r\n          autoComplete=\"off\"\r\n          ref={inputRef}\r\n        />\r\n      </div>\r\n      {(children || isLoading) && (\r\n        <ResultOptionBox resultCountRow={resultCountRow ? resultCountRow : null} ref={optionListRef}>\r\n          {Children.map(children, (child, index) => {\r\n            if (isValidElement<ResultOptionProps>(child)) {\r\n              return cloneElement(child, {\r\n                key: index,\r\n                onReset: handleReset,\r\n              });\r\n            }\r\n            return child;\r\n          })}\r\n        </ResultOptionBox>\r\n      )}\r\n    </div>\r\n  );\r\n};\r\n\r\nSearchField.ResultOption = ResultOption;\r\n"],"mappings":";;;;;;;;;AA8BA,IAAa,KAAe,EAC1B,OACA,gBACA,eAAY,IACZ,cACA,aACA,aACA,wBACsB;CACtB,IAAM,IAAW,EAAyB,KAAK,EACzC,CAAC,GAAW,KAAgB,EAAkB,GAAM,EACpD,IAAgB,EAAuB,KAAK,EAE5C,UAAoB;AACxB,EAAI,EAAS,YACX,EAAS,QAAQ,QAAQ,IACzB,EAAS,QAAQ,OAAO;IAItB,KAAe,MAA8C;EACjE,IAAM,IAAS,EAAM,QACf,IAAQ,EAAO;AAErB,EADA,EAAO,kBAAkB,EAAM,QAAQ,EAAM,OAAO,EAChD,KACF,EAAS,EAAM;IAIb,KAAiB,MAA2C;AAChE,UAAQ,EAAM,KAAd;GACE,KAAK;AAMH,IALA,EAAM,gBAAgB,EACtB,EAAS,GAAG,EACR,EAAS,YACX,EAAS,QAAQ,QAAQ,KAEvB,MACF,EAAa,GAAM,EACnB,EAAS,SAAS,MAAM;AAE1B;GACF,KAAK,aAAa;AAChB,MAAM,gBAAgB;IAEtB,IAAM,IADY,EAAc,SACE,cAA2B,6CAAyC;AACtG,QAAI,GAAgB;KAClB,IAAI,IAAoC;AACxC,YAAO,KAAiB,EAAc,aAAa,WAAW,KAAK,MACjE,KAAgB,EAAc;AAEhC,QAAe,OAAO;;AAExB;;;;AAoCN,QA/BA,QAAgB;AACd,EAAI,CAAC,EAAS,MAAM,EAAS,IAAI,EAAS,SAAS,MAAM,WAAW,KAAK,KAAa,MAAmB,QACvG,EAAa,GAAM;IAEpB;EAAC;EAAU;EAAW;EAAe,CAAC,EAEzC,QAAgB;AACd,MAAI,EAAS,YAAY,KAAM;EAE/B,IAAM,UAAmB;AACvB,GAAI,KAAa,CAAC,EAAS,MAAM,EAAS,IACxC,EAAa,GAAM;KAIjB,IAAe,EAAS;AAG9B,SAFA,EAAa,iBAAiB,QAAQ,EAAW,QAEpC;AACX,KAAa,oBAAoB,QAAQ,EAAW;;IAErD,CAAC,GAAW,EAAS,CAAC,EAEzB,QAAgB;AACd,EAAI,KAAa,KAAa,EAAS,WACrC,EAAS,QAAQ,OAAO;IAEzB,CAAC,GAAW,EAAU,CAAC,EAE1B,EAAkB,GAAyC,EAAS,KAAK,MAAM,GAAG,CAAC,EAGjF,kBAAC,OAAD;EAAK,WAAW,EAAO;YAAvB;GACG,KACC,kBAAC,UAAD;IACE,MAAK;IACL,WAAW,EAAO;IAClB,eAAe,EAAa,GAAK;IACjC,cAAY;cAEZ,kBAAC,GAAD;KAAM,MAAK;KAAU,WAAW,EAAO;KAA+B,eAAY;KAAS,CAAA;IACpF,CAAA;GAEX,kBAAC,OAAD;IACE,WAAW,EAAK,EAAO,kCAAkC;MACtD,EAAO,2CAA2C,KAAa,CAAC;MAChE,EAAO,4CAA4C,KAAa;KAClE,CAAC;cAJJ,CAME,kBAAC,GAAD;KAAM,MAAK;KAAU,WAAW,EAAO;KAAuB,eAAY;KAAS,CAAA,EACnF,kBAAC,SAAD;KACE,MAAK;KACL,WAAW,EAAO;KACL;KACT;KACJ,WAAW,MAAU,EAAS,EAAM,OAAO,MAAM;KACjD,SAAS;KACT,WAAW;KACX,MAAK;KACL,iBAAe,EAAQ,EAAS,MAAM,EAAS,IAAK;KACpD,iBAAe,GAAG,EAAG;KACrB,qBAAkB;KAClB,iBAAc;KACd,cAAY;KACZ,cAAa;KACb,KAAK;KACL,CAAA,CACE;;IACJ,KAAY,MACZ,kBAAC,GAAD;IAAiB,gBAAgB,KAAkC;IAAM,KAAK;cAC3E,EAAS,IAAI,IAAW,GAAO,MAC1B,EAAkC,EAAM,GACnC,EAAa,GAAO;KACzB,KAAK;KACL,SAAS;KACV,CAAC,GAEG,EACP;IACc,CAAA;GAEhB;;;AAIV,EAAY,eAAe"}
+{"version":3,"file":"SearchField.js","names":[],"sources":["../../../src/components/SearchField/SearchField.tsx"],"sourcesContent":["import { Children, cloneElement, isValidElement, useEffect, useRef, useState } from 'react';\r\nimport { clsx } from 'clsx';\r\n\r\nimport type { KeyboardEvent, ReactNode, RefObject } from 'react';\r\nimport type { ResultOptionProps } from './components/ResultsOption';\r\n\r\nimport { ResultOption } from './components/ResultsOption';\r\nimport styles from './SearchField.module.css';\r\nimport { ResultOptionBox } from './components/ResultOptionBox';\r\n\r\nimport { Icon } from 'components/Icon';\r\nimport { useOnClickOutside } from 'components/hooks/useOnClickOutside';\r\n\r\nexport interface SearchFieldProps {\r\n  /** Unique identifier for the search field. */\r\n  id: string;\r\n  /** Placeholder text for the search input. */\r\n  placeholder: string;\r\n  /** Indicates if the search field is in a loading state. */\r\n  isLoading?: boolean;\r\n  /** If true, the search field is displayed in a compact style. */\r\n  isCompact?: boolean;\r\n  /** Callback function triggered when the input value changes. */\r\n  onChange: (query: string) => void;\r\n  /** The children elements, typically ResultOption components. */\r\n  children: ReactNode;\r\n  /** Optional row to display the count of results. */\r\n  resultCountRow?: ReactNode;\r\n}\r\n\r\nexport const SearchField = ({\r\n  id,\r\n  placeholder,\r\n  isLoading = false,\r\n  isCompact,\r\n  onChange,\r\n  children,\r\n  resultCountRow,\r\n}: SearchFieldProps) => {\r\n  const inputRef = useRef<HTMLInputElement>(null);\r\n  const [showField, setShowField] = useState<boolean>(false);\r\n  const optionListRef = useRef<HTMLDivElement>(null);\r\n\r\n  const handleReset = () => {\r\n    if (inputRef.current) {\r\n      inputRef.current.value = '';\r\n      inputRef.current.focus();\r\n    }\r\n  };\r\n\r\n  const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\r\n    const target = event.target;\r\n    const value = target.value;\r\n    target.setSelectionRange(value.length, value.length);\r\n    if (value) {\r\n      onChange(value);\r\n    }\r\n  };\r\n\r\n  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\r\n    switch (event.key) {\r\n      case 'Escape':\r\n        event.preventDefault();\r\n        onChange('');\r\n        if (inputRef.current) {\r\n          inputRef.current.value = '';\r\n        }\r\n        if (isCompact) {\r\n          setShowField(false);\r\n          inputRef.current?.blur();\r\n        }\r\n        break;\r\n      case 'ArrowDown': {\r\n        event.preventDefault();\r\n        const container = optionListRef.current;\r\n        const firstFocusable = container?.querySelector<HTMLElement>('li[role=\"option\"]:not([tabindex=\"-1\"])');\r\n        if (firstFocusable) {\r\n          let currentOption: HTMLElement | null = firstFocusable;\r\n          while (currentOption && currentOption.getAttribute('tabindex') === '-1') {\r\n            currentOption = currentOption.nextElementSibling as HTMLElement;\r\n          }\r\n          currentOption?.focus();\r\n        }\r\n        break;\r\n      }\r\n    }\r\n  };\r\n\r\n  useEffect(() => {\r\n    if (!Children.count(children) && inputRef.current?.value.length === 0 && isCompact && resultCountRow === null) {\r\n      setShowField(false);\r\n    }\r\n  }, [children, isCompact, resultCountRow]);\r\n\r\n  useEffect(() => {\r\n    if (inputRef.current === null) return;\r\n\r\n    const handleBlur = () => {\r\n      if (isCompact && !Children.count(children)) {\r\n        setShowField(false);\r\n      }\r\n    };\r\n\r\n    const currentInput = inputRef.current;\r\n    currentInput.addEventListener('blur', handleBlur);\r\n\r\n    return () => {\r\n      currentInput.removeEventListener('blur', handleBlur);\r\n    };\r\n  }, [isCompact, children]);\r\n\r\n  useEffect(() => {\r\n    if (isCompact && showField && inputRef.current) {\r\n      inputRef.current.focus();\r\n    }\r\n  }, [isCompact, showField]);\r\n\r\n  useOnClickOutside(optionListRef as RefObject<HTMLElement>, onChange.bind(null, ''));\r\n\r\n  return (\r\n    <div className={styles['search-field__input-wrapper']}>\r\n      {isCompact && (\r\n        <button\r\n          type=\"button\"\r\n          className={styles['search-field__compact-button']}\r\n          onClick={() => setShowField(true)}\r\n          aria-label={placeholder}\r\n        >\r\n          <Icon name=\"Magnify\" className={styles['search-field__compact-icon']} aria-hidden=\"true\" />\r\n        </button>\r\n      )}\r\n      <div\r\n        className={clsx(styles['search-field__input-container'], {\r\n          [styles['search-field__input-container--hidden']]: isCompact && !showField,\r\n          [styles['search-field__input-container--visible']]: isCompact && showField,\r\n        })}\r\n      >\r\n        <Icon name=\"Magnify\" className={styles['search-field__icon']} aria-hidden=\"true\" />\r\n        <input\r\n          type=\"text\"\r\n          className={styles['search-field__input-field']}\r\n          placeholder={placeholder}\r\n          id={id}\r\n          onChange={(event) => onChange(event.target.value)}\r\n          onFocus={handleFocus}\r\n          onKeyDown={handleKeyDown}\r\n          role=\"combobox\"\r\n          aria-expanded={Boolean(Children.count(children)) || isLoading}\r\n          aria-controls={`${id}-results`}\r\n          aria-autocomplete=\"list\"\r\n          aria-haspopup=\"listbox\"\r\n          aria-label={placeholder}\r\n          autoComplete=\"off\"\r\n          ref={inputRef}\r\n        />\r\n      </div>\r\n      {(children || isLoading) && (\r\n        <ResultOptionBox resultCountRow={resultCountRow ? resultCountRow : null} ref={optionListRef}>\r\n          {Children.map(children, (child, index) => {\r\n            if (isValidElement<ResultOptionProps>(child)) {\r\n              return cloneElement(child, {\r\n                key: index,\r\n                onReset: handleReset,\r\n              });\r\n            }\r\n            return child;\r\n          })}\r\n        </ResultOptionBox>\r\n      )}\r\n    </div>\r\n  );\r\n};\r\n\r\nSearchField.ResultOption = ResultOption;\r\n"],"mappings":";;;;;;;;;AA8BA,IAAa,KAAe,EAC1B,OACA,gBACA,eAAY,IACZ,cACA,aACA,aACA,wBACsB;CACtB,IAAM,IAAW,EAAyB,KAAK,EACzC,CAAC,GAAW,KAAgB,EAAkB,GAAM,EACpD,IAAgB,EAAuB,KAAK,EAE5C,UAAoB;EACxB,AAAI,EAAS,YACX,EAAS,QAAQ,QAAQ,IACzB,EAAS,QAAQ,OAAO;IAItB,KAAe,MAA8C;EACjE,IAAM,IAAS,EAAM,QACf,IAAQ,EAAO;EAErB,AADA,EAAO,kBAAkB,EAAM,QAAQ,EAAM,OAAO,EAChD,KACF,EAAS,EAAM;IAIb,KAAiB,MAA2C;EAChE,QAAQ,EAAM,KAAd;GACE,KAAK;IAMH,AALA,EAAM,gBAAgB,EACtB,EAAS,GAAG,EACR,EAAS,YACX,EAAS,QAAQ,QAAQ,KAEvB,MACF,EAAa,GAAM,EACnB,EAAS,SAAS,MAAM;IAE1B;GACF,KAAK,aAAa;IAChB,EAAM,gBAAgB;IAEtB,IAAM,IADY,EAAc,SACE,cAA2B,6CAAyC;IACtG,IAAI,GAAgB;KAClB,IAAI,IAAoC;KACxC,OAAO,KAAiB,EAAc,aAAa,WAAW,KAAK,OACjE,IAAgB,EAAc;KAEhC,GAAe,OAAO;;IAExB;;;;CAoCN,OA/BA,QAAgB;EACd,AAAI,CAAC,EAAS,MAAM,EAAS,IAAI,EAAS,SAAS,MAAM,WAAW,KAAK,KAAa,MAAmB,QACvG,EAAa,GAAM;IAEpB;EAAC;EAAU;EAAW;EAAe,CAAC,EAEzC,QAAgB;EACd,IAAI,EAAS,YAAY,MAAM;EAE/B,IAAM,UAAmB;GACvB,AAAI,KAAa,CAAC,EAAS,MAAM,EAAS,IACxC,EAAa,GAAM;KAIjB,IAAe,EAAS;EAG9B,OAFA,EAAa,iBAAiB,QAAQ,EAAW,QAEpC;GACX,EAAa,oBAAoB,QAAQ,EAAW;;IAErD,CAAC,GAAW,EAAS,CAAC,EAEzB,QAAgB;EACd,AAAI,KAAa,KAAa,EAAS,WACrC,EAAS,QAAQ,OAAO;IAEzB,CAAC,GAAW,EAAU,CAAC,EAE1B,EAAkB,GAAyC,EAAS,KAAK,MAAM,GAAG,CAAC,EAGjF,kBAAC,OAAD;EAAK,WAAW,EAAO;YAAvB;GACG,KACC,kBAAC,UAAD;IACE,MAAK;IACL,WAAW,EAAO;IAClB,eAAe,EAAa,GAAK;IACjC,cAAY;cAEZ,kBAAC,GAAD;KAAM,MAAK;KAAU,WAAW,EAAO;KAA+B,eAAY;KAAS,CAAA;IACpF,CAAA;GAEX,kBAAC,OAAD;IACE,WAAW,EAAK,EAAO,kCAAkC;MACtD,EAAO,2CAA2C,KAAa,CAAC;MAChE,EAAO,4CAA4C,KAAa;KAClE,CAAC;cAJJ,CAME,kBAAC,GAAD;KAAM,MAAK;KAAU,WAAW,EAAO;KAAuB,eAAY;KAAS,CAAA,EACnF,kBAAC,SAAD;KACE,MAAK;KACL,WAAW,EAAO;KACL;KACT;KACJ,WAAW,MAAU,EAAS,EAAM,OAAO,MAAM;KACjD,SAAS;KACT,WAAW;KACX,MAAK;KACL,iBAAe,EAAQ,EAAS,MAAM,EAAS,IAAK;KACpD,iBAAe,GAAG,EAAG;KACrB,qBAAkB;KAClB,iBAAc;KACd,cAAY;KACZ,cAAa;KACb,KAAK;KACL,CAAA,CACE;;IACJ,KAAY,MACZ,kBAAC,GAAD;IAAiB,gBAAgB,KAAkC;IAAM,KAAK;cAC3E,EAAS,IAAI,IAAW,GAAO,MAC1B,EAAkC,EAAM,GACnC,EAAa,GAAO;KACzB,KAAK;KACL,SAAS;KACV,CAAC,GAEG,EACP;IACc,CAAA;GAEhB;;;AAIV,EAAY,eAAe"}

package/dist/components/SearchField/SearcheField.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearcheField.stories.js","names":[],"sources":["../../../src/components/SearchField/SearcheField.stories.tsx"],"sourcesContent":["import { useState } from 'react';\r\n\r\nimport type { Meta, StoryFn } from '@storybook/react';\r\nimport type { SearchFieldProps } from './SearchField';\r\n\r\nimport { SearchField } from './SearchField';\r\nimport { MOCK_DATA } from './mockData';\r\n\r\nconst codeString = `\r\n// Has all HTMLInputElement props available except \"className\" and \"style\" \r\n<SearchField \r\n  id={string} \r\n  queryLength?={number}\r\n  placeholder?={string} \r\n  isLoading?={boolean} \r\n  isCompact?={boolean} \r\n  onChange={function}\r\n  children={ReactNode}\r\n  resultCountRow?={ReactNode}\r\n>\r\n  <SearchField.ResultOption \r\n    onSelect={function} \r\n    onEscape={function} \r\n    value={string|number} \r\n    key={string|number} \r\n    ariaLabel={string}>\r\n   {loop custom options here}\r\n  </SearchField.ResultOption>\r\n</SearchField>`;\r\n\r\nconst MIN_QUERY_LENGTH = 4;\r\nconst MAX_RESULTS = 12;\r\nconst QUERY_SPEED = 1000; // ms\r\n\r\nenum ProgrammeType {\r\n  DEGREE = 'degree-programme',\r\n  CERTIFICATE = 'certificate-programme',\r\n  ADMINISTRATIVE = 'administrative-programme',\r\n}\r\n\r\ninterface SearchResult {\r\n  __typename: string;\r\n  id: string;\r\n  code: string;\r\n  name: {\r\n    EN: string;\r\n    NL: string;\r\n  };\r\n  programmeType: string;\r\n  programmeCode?: string;\r\n}\r\n\r\n// eslint-disable-next-line import/no-default-export\r\nexport default {\r\n  title: 'Molecules/SearchField',\r\n  component: SearchField,\r\n  args: {},\r\n  argTypes: {\r\n    onSelect: {\r\n      action: 'selected url',\r\n      table: {\r\n        disable: true,\r\n      },\r\n    },\r\n    onChange: {\r\n      table: {\r\n        disable: true,\r\n      },\r\n    },\r\n    children: {\r\n      table: {\r\n        disable: true,\r\n      },\r\n    },\r\n    id: {\r\n      table: {\r\n        disable: true,\r\n      },\r\n    },\r\n    resultCountRow: {\r\n      table: {\r\n        disable: true,\r\n      },\r\n    },\r\n    isCompact: {\r\n      control: 'boolean',\r\n      default: false,\r\n    },\r\n  },\r\n  parameters: {\r\n    inspectComponent: SearchField,\r\n    codeString: codeString,\r\n  },\r\n} as Meta<SearchFieldProps & { onSelect: (value: string | number) => void }>;\r\n\r\nconst Template: StoryFn<SearchFieldProps & { onSelect: (value: string | number) => void }> = (args) => {\r\n  const [loading, setLoading] = useState(false);\r\n  const [searchResults, setSearchResults] = useState<SearchResult[] | null>();\r\n  const academicYear = '2026';\r\n  const currentLanguage = 'NL';\r\n\r\n  const createUrl = (\r\n    academicYear: string,\r\n    programmeType: keyof typeof ProgrammeType,\r\n    programmeCode: string,\r\n    code: string\r\n  ) => `education-preparation/${ProgrammeType[programmeType]}/${academicYear}/${programmeCode}/${code}`;\r\n\r\n  const searchInMockData = (query: string) => {\r\n    if (query.length < MIN_QUERY_LENGTH) {\r\n      setSearchResults(null);\r\n      return;\r\n    }\r\n    setLoading(true);\r\n\r\n    const lowerCaseQuery = query.toLowerCase();\r\n\r\n    const mockResults = MOCK_DATA.filter(\r\n      (item) => item.name.NL.toLowerCase().includes(lowerCaseQuery) || item.code.toLowerCase().includes(lowerCaseQuery)\r\n    );\r\n\r\n    setTimeout(() => {\r\n      setSearchResults(mockResults);\r\n      setLoading(false);\r\n    }, QUERY_SPEED);\r\n  };\r\n\r\n  const getResultMessage = (results: SearchResult[]) => {\r\n    if (results.length > MAX_RESULTS) {\r\n      return `${results.length} resultaten gevonden, alleen de ${MAX_RESULTS} beste resultaten worden weergegeven.`;\r\n    } else if (results.length > 0 && results.length <= MAX_RESULTS) {\r\n      return `${results.length} resultaten gevonden.`;\r\n    } else if (loading) {\r\n      return 'Zoeken...';\r\n    } else {\r\n      return 'Geen resultaten gevonden.';\r\n    }\r\n  };\r\n\r\n  const resultBar = (results: SearchResult[]) =>\r\n    results ? (\r\n      <div key={'result-count'} style={{ padding: '0.5rem 1rem', fontWeight: '600' }}>\r\n        {getResultMessage(results)}\r\n      </div>\r\n    ) : null;\r\n\r\n  const handleSelect = (value: string | number) => {\r\n    setSearchResults(null);\r\n    args.onSelect(value);\r\n  };\r\n\r\n  return (\r\n    <div style={{ width: '20rem', display: 'flex', justifyContent: 'flex-end' }}>\r\n      <SearchField\r\n        placeholder=\"Zoek...\"\r\n        id=\"search-field-1\"\r\n        isLoading={loading}\r\n        isCompact={args.isCompact}\r\n        onChange={(event) => searchInMockData(event)}\r\n        resultCountRow={resultBar(searchResults || [])}\r\n      >\r\n        {searchResults?.map((result) => (\r\n          <SearchField.ResultOption\r\n            key={result.id}\r\n            ariaLabel={`${result.code}, ${result.name[currentLanguage]}`}\r\n            value={createUrl(\r\n              academicYear,\r\n              result.programmeType as keyof typeof ProgrammeType,\r\n              result.programmeCode || '',\r\n              result.code\r\n            )}\r\n            onSelect={handleSelect}\r\n            onEscape={() => setSearchResults(null)}\r\n          >\r\n            <div style={{ display: 'flex', gap: '1rem' }}>\r\n              <span>{result.code}</span>\r\n              <span style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>\r\n                {result.name[currentLanguage]}\r\n              </span>\r\n            </div>\r\n          </SearchField.ResultOption>\r\n        ))}\r\n      </SearchField>\r\n    </div>\r\n  );\r\n};\r\n\r\nexport const InputExample = Template.bind({});\r\n"],"mappings":";;;;;AAQA,IAAM,IAAa,yhBAsBb,IAAmB,GACnB,IAAc,IACd,IAAc,KAEf,IAAL,yBAAA,GAAA;QACE,EAAA,SAAA,oBACA,EAAA,cAAA,yBACA,EAAA,iBAAA;EAHG,KAAA,EAAA,CAIJ,EAeD,IAAe;CACb,OAAO;CACP,WAAW;CACX,MAAM,EAAE;CACR,UAAU;EACR,UAAU;GACR,QAAQ;GACR,OAAO,EACL,SAAS,IACV;GACF;EACD,UAAU,EACR,OAAO,EACL,SAAS,IACV,EACF;EACD,UAAU,EACR,OAAO,EACL,SAAS,IACV,EACF;EACD,IAAI,EACF,OAAO,EACL,SAAS,IACV,EACF;EACD,gBAAgB,EACd,OAAO,EACL,SAAS,IACV,EACF;EACD,WAAW;GACT,SAAS;GACT,SAAS;GACV;EACF;CACD,YAAY;EACV,kBAAkB;EACN;EACb;CACF,EA8FY,MA5FiF,MAAS;CACrG,IAAM,CAAC,GAAS,KAAc,EAAS,GAAM,EACvC,CAAC,GAAe,KAAoB,GAAiC,EAIrE,KACJ,GACA,GACA,GACA,MACG,yBAAyB,EAAc,GAAe,GAAG,EAAa,GAAG,EAAc,GAAG,KAEzF,KAAoB,MAAkB;AAC1C,MAAI,EAAM,SAAS,GAAkB;AACnC,KAAiB,KAAK;AACtB;;AAEF,IAAW,GAAK;EAEhB,IAAM,IAAiB,EAAM,aAAa,EAEpC,IAAc,EAAU,QAC3B,MAAS,EAAK,KAAK,GAAG,aAAa,CAAC,SAAS,EAAe,IAAI,EAAK,KAAK,aAAa,CAAC,SAAS,EAAe,CAClH;AAED,mBAAiB;AAEf,GADA,EAAiB,EAAY,EAC7B,EAAW,GAAM;KAChB,EAAY;IAGX,KAAoB,MACpB,EAAQ,SAAS,IACZ,GAAG,EAAQ,OAAO,kCAAkC,EAAY,yCAC9D,EAAQ,SAAS,KAAK,EAAQ,UAAU,IAC1C,GAAG,EAAQ,OAAO,yBAChB,IACF,cAEA,6BAIL,KAAa,MACjB,IACE,kBAAC,OAAD;EAA0B,OAAO;GAAE,SAAS;GAAe,YAAY;GAAO;YAC3E,EAAiB,EAAQ;EACtB,EAFI,eAEJ,GACJ,MAEA,KAAgB,MAA2B;AAE/C,EADA,EAAiB,KAAK,EACtB,EAAK,SAAS,EAAM;;AAGtB,QACE,kBAAC,OAAD;EAAK,OAAO;GAAE,OAAO;GAAS,SAAS;GAAQ,gBAAgB;GAAY;YACzE,kBAAC,GAAD;GACE,aAAY;GACZ,IAAG;GACH,WAAW;GACX,WAAW,EAAK;GAChB,WAAW,MAAU,EAAiB,EAAM;GAC5C,gBAAgB,EAAU,KAAiB,EAAE,CAAC;aAE7C,GAAe,KAAK,MACnB,kBAAC,EAAY,cAAb;IAEE,WAAW,GAAG,EAAO,KAAK,IAAI,EAAO,KAAK;IAC1C,OAAO,EACL,QACA,EAAO,eACP,EAAO,iBAAiB,IACxB,EAAO,KACR;IACD,UAAU;IACV,gBAAgB,EAAiB,KAAK;cAEtC,kBAAC,OAAD;KAAK,OAAO;MAAE,SAAS;MAAQ,KAAK;MAAQ;eAA5C,CACE,kBAAC,QAAD,EAAA,UAAO,EAAO,MAAY,CAAA,EAC1B,kBAAC,QAAD;MAAM,OAAO;OAAE,YAAY;OAAU,UAAU;OAAU,cAAc;OAAY;gBAChF,EAAO,KAAK;MACR,CAAA,CACH;;IACmB,EAjBpB,EAAO,GAiBa,CAC3B;GACU,CAAA;EACV,CAAA;GAI2B,KAAK,EAAE,CAAC"}
+{"version":3,"file":"SearcheField.stories.js","names":[],"sources":["../../../src/components/SearchField/SearcheField.stories.tsx"],"sourcesContent":["import { useState } from 'react';\r\n\r\nimport type { Meta, StoryFn } from '@storybook/react';\r\nimport type { SearchFieldProps } from './SearchField';\r\n\r\nimport { SearchField } from './SearchField';\r\nimport { MOCK_DATA } from './mockData';\r\n\r\nconst codeString = `\r\n// Has all HTMLInputElement props available except \"className\" and \"style\" \r\n<SearchField \r\n  id={string} \r\n  queryLength?={number}\r\n  placeholder?={string} \r\n  isLoading?={boolean} \r\n  isCompact?={boolean} \r\n  onChange={function}\r\n  children={ReactNode}\r\n  resultCountRow?={ReactNode}\r\n>\r\n  <SearchField.ResultOption \r\n    onSelect={function} \r\n    onEscape={function} \r\n    value={string|number} \r\n    key={string|number} \r\n    ariaLabel={string}>\r\n   {loop custom options here}\r\n  </SearchField.ResultOption>\r\n</SearchField>`;\r\n\r\nconst MIN_QUERY_LENGTH = 4;\r\nconst MAX_RESULTS = 12;\r\nconst QUERY_SPEED = 1000; // ms\r\n\r\nenum ProgrammeType {\r\n  DEGREE = 'degree-programme',\r\n  CERTIFICATE = 'certificate-programme',\r\n  ADMINISTRATIVE = 'administrative-programme',\r\n}\r\n\r\ninterface SearchResult {\r\n  __typename: string;\r\n  id: string;\r\n  code: string;\r\n  name: {\r\n    EN: string;\r\n    NL: string;\r\n  };\r\n  programmeType: string;\r\n  programmeCode?: string;\r\n}\r\n\r\n// eslint-disable-next-line import/no-default-export\r\nexport default {\r\n  title: 'Molecules/SearchField',\r\n  component: SearchField,\r\n  args: {},\r\n  argTypes: {\r\n    onSelect: {\r\n      action: 'selected url',\r\n      table: {\r\n        disable: true,\r\n      },\r\n    },\r\n    onChange: {\r\n      table: {\r\n        disable: true,\r\n      },\r\n    },\r\n    children: {\r\n      table: {\r\n        disable: true,\r\n      },\r\n    },\r\n    id: {\r\n      table: {\r\n        disable: true,\r\n      },\r\n    },\r\n    resultCountRow: {\r\n      table: {\r\n        disable: true,\r\n      },\r\n    },\r\n    isCompact: {\r\n      control: 'boolean',\r\n      default: false,\r\n    },\r\n  },\r\n  parameters: {\r\n    inspectComponent: SearchField,\r\n    codeString: codeString,\r\n  },\r\n} as Meta<SearchFieldProps & { onSelect: (value: string | number) => void }>;\r\n\r\nconst Template: StoryFn<SearchFieldProps & { onSelect: (value: string | number) => void }> = (args) => {\r\n  const [loading, setLoading] = useState(false);\r\n  const [searchResults, setSearchResults] = useState<SearchResult[] | null>();\r\n  const academicYear = '2026';\r\n  const currentLanguage = 'NL';\r\n\r\n  const createUrl = (\r\n    academicYear: string,\r\n    programmeType: keyof typeof ProgrammeType,\r\n    programmeCode: string,\r\n    code: string\r\n  ) => `education-preparation/${ProgrammeType[programmeType]}/${academicYear}/${programmeCode}/${code}`;\r\n\r\n  const searchInMockData = (query: string) => {\r\n    if (query.length < MIN_QUERY_LENGTH) {\r\n      setSearchResults(null);\r\n      return;\r\n    }\r\n    setLoading(true);\r\n\r\n    const lowerCaseQuery = query.toLowerCase();\r\n\r\n    const mockResults = MOCK_DATA.filter(\r\n      (item) => item.name.NL.toLowerCase().includes(lowerCaseQuery) || item.code.toLowerCase().includes(lowerCaseQuery)\r\n    );\r\n\r\n    setTimeout(() => {\r\n      setSearchResults(mockResults);\r\n      setLoading(false);\r\n    }, QUERY_SPEED);\r\n  };\r\n\r\n  const getResultMessage = (results: SearchResult[]) => {\r\n    if (results.length > MAX_RESULTS) {\r\n      return `${results.length} resultaten gevonden, alleen de ${MAX_RESULTS} beste resultaten worden weergegeven.`;\r\n    } else if (results.length > 0 && results.length <= MAX_RESULTS) {\r\n      return `${results.length} resultaten gevonden.`;\r\n    } else if (loading) {\r\n      return 'Zoeken...';\r\n    } else {\r\n      return 'Geen resultaten gevonden.';\r\n    }\r\n  };\r\n\r\n  const resultBar = (results: SearchResult[]) =>\r\n    results ? (\r\n      <div key={'result-count'} style={{ padding: '0.5rem 1rem', fontWeight: '600' }}>\r\n        {getResultMessage(results)}\r\n      </div>\r\n    ) : null;\r\n\r\n  const handleSelect = (value: string | number) => {\r\n    setSearchResults(null);\r\n    args.onSelect(value);\r\n  };\r\n\r\n  return (\r\n    <div style={{ width: '20rem', display: 'flex', justifyContent: 'flex-end' }}>\r\n      <SearchField\r\n        placeholder=\"Zoek...\"\r\n        id=\"search-field-1\"\r\n        isLoading={loading}\r\n        isCompact={args.isCompact}\r\n        onChange={(event) => searchInMockData(event)}\r\n        resultCountRow={resultBar(searchResults || [])}\r\n      >\r\n        {searchResults?.map((result) => (\r\n          <SearchField.ResultOption\r\n            key={result.id}\r\n            ariaLabel={`${result.code}, ${result.name[currentLanguage]}`}\r\n            value={createUrl(\r\n              academicYear,\r\n              result.programmeType as keyof typeof ProgrammeType,\r\n              result.programmeCode || '',\r\n              result.code\r\n            )}\r\n            onSelect={handleSelect}\r\n            onEscape={() => setSearchResults(null)}\r\n          >\r\n            <div style={{ display: 'flex', gap: '1rem' }}>\r\n              <span>{result.code}</span>\r\n              <span style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>\r\n                {result.name[currentLanguage]}\r\n              </span>\r\n            </div>\r\n          </SearchField.ResultOption>\r\n        ))}\r\n      </SearchField>\r\n    </div>\r\n  );\r\n};\r\n\r\nexport const InputExample = Template.bind({});\r\n"],"mappings":";;;;;AAQA,IAAM,IAAa,yhBAsBb,IAAmB,GACnB,IAAc,IACd,IAAc,KAEf,IAAL,yBAAA,GAAA;QACE,EAAA,SAAS,oBACT,EAAA,cAAc,yBACd,EAAA,iBAAiB;EAHd,KAAA,EAAA,CAIJ,EAeD,IAAe;CACb,OAAO;CACP,WAAW;CACX,MAAM,EAAE;CACR,UAAU;EACR,UAAU;GACR,QAAQ;GACR,OAAO,EACL,SAAS,IACV;GACF;EACD,UAAU,EACR,OAAO,EACL,SAAS,IACV,EACF;EACD,UAAU,EACR,OAAO,EACL,SAAS,IACV,EACF;EACD,IAAI,EACF,OAAO,EACL,SAAS,IACV,EACF;EACD,gBAAgB,EACd,OAAO,EACL,SAAS,IACV,EACF;EACD,WAAW;GACT,SAAS;GACT,SAAS;GACV;EACF;CACD,YAAY;EACV,kBAAkB;EACN;EACb;CACF,EA8FY,MA5FiF,MAAS;CACrG,IAAM,CAAC,GAAS,KAAc,EAAS,GAAM,EACvC,CAAC,GAAe,KAAoB,GAAiC,EAIrE,KACJ,GACA,GACA,GACA,MACG,yBAAyB,EAAc,GAAe,GAAG,EAAa,GAAG,EAAc,GAAG,KAEzF,KAAoB,MAAkB;EAC1C,IAAI,EAAM,SAAS,GAAkB;GACnC,EAAiB,KAAK;GACtB;;EAEF,EAAW,GAAK;EAEhB,IAAM,IAAiB,EAAM,aAAa,EAEpC,IAAc,EAAU,QAC3B,MAAS,EAAK,KAAK,GAAG,aAAa,CAAC,SAAS,EAAe,IAAI,EAAK,KAAK,aAAa,CAAC,SAAS,EAAe,CAClH;EAED,iBAAiB;GAEf,AADA,EAAiB,EAAY,EAC7B,EAAW,GAAM;KAChB,EAAY;IAGX,KAAoB,MACpB,EAAQ,SAAS,IACZ,GAAG,EAAQ,OAAO,kCAAkC,EAAY,yCAC9D,EAAQ,SAAS,KAAK,EAAQ,UAAU,IAC1C,GAAG,EAAQ,OAAO,yBAChB,IACF,cAEA,6BAIL,KAAa,MACjB,IACE,kBAAC,OAAD;EAA0B,OAAO;GAAE,SAAS;GAAe,YAAY;GAAO;YAC3E,EAAiB,EAAQ;EACtB,EAFI,eAEJ,GACJ,MAEA,KAAgB,MAA2B;EAE/C,AADA,EAAiB,KAAK,EACtB,EAAK,SAAS,EAAM;;CAGtB,OACE,kBAAC,OAAD;EAAK,OAAO;GAAE,OAAO;GAAS,SAAS;GAAQ,gBAAgB;GAAY;YACzE,kBAAC,GAAD;GACE,aAAY;GACZ,IAAG;GACH,WAAW;GACX,WAAW,EAAK;GAChB,WAAW,MAAU,EAAiB,EAAM;GAC5C,gBAAgB,EAAU,KAAiB,EAAE,CAAC;aAE7C,GAAe,KAAK,MACnB,kBAAC,EAAY,cAAb;IAEE,WAAW,GAAG,EAAO,KAAK,IAAI,EAAO,KAAK;IAC1C,OAAO,EACL,QACA,EAAO,eACP,EAAO,iBAAiB,IACxB,EAAO,KACR;IACD,UAAU;IACV,gBAAgB,EAAiB,KAAK;cAEtC,kBAAC,OAAD;KAAK,OAAO;MAAE,SAAS;MAAQ,KAAK;MAAQ;eAA5C,CACE,kBAAC,QAAD,EAAA,UAAO,EAAO,MAAY,CAAA,EAC1B,kBAAC,QAAD;MAAM,OAAO;OAAE,YAAY;OAAU,UAAU;OAAU,cAAc;OAAY;gBAChF,EAAO,KAAK;MACR,CAAA,CACH;;IACmB,EAjBpB,EAAO,GAiBa,CAC3B;GACU,CAAA;EACV,CAAA;GAI2B,KAAK,EAAE,CAAC"}