@uva-glass/component-library 3.55.1 → 3.55.3

package/dist/StatusPill-DM7n3I4W.js

@@ -0,0 +1,30 @@
+import { t as e } from "./clsx-BD2qMUU1.js";
+import { Icon as t } from "./components/Icon/Icon.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import './assets/StatusPill.css';//#region src/components/StatusPill/StatusPill.module.css
+var i = {
+	"status-pill": "_status-pill_15n23_1",
+	"status-pill__possible": "_status-pill__possible_15n23_10",
+	"status-pill__impossible": "_status-pill__impossible_15n23_15",
+	"status-pill__new": "_status-pill__new_15n23_20",
+	"status-pill__dark": "_status-pill__dark_15n23_26",
+	"status-pill--bar": "_status-pill--bar_15n23_33",
+	"status-pill--compact": "_status-pill--compact_15n23_40"
+}, a = {
+	possible: "CheckCircleFillMini",
+	impossible: "CrossCircleFillMini"
+};
+function o({ status: o, variant: s = "default", label: c }) {
+	return /* @__PURE__ */ r("span", {
+		className: e(i["status-pill"], i[`status-pill__${o}`], s !== "default" && i[`status-pill--${s}`]),
+		children: [(o === "possible" || o === "impossible") && /* @__PURE__ */ n(t, {
+			name: a[o],
+			title: o,
+			size: 16
+		}), c]
+	});
+}
+//#endregion
+export { o as t };
+
+//# sourceMappingURL=StatusPill-DM7n3I4W.js.map

package/dist/StatusPill-DM7n3I4W.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusPill-DM7n3I4W.js","names":[],"sources":["../src/components/StatusPill/StatusPill.module.css","../src/components/StatusPill/StatusPill.tsx"],"sourcesContent":[".status-pill {\n  align-items: center;\n  border-radius: 1.5rem;\n  display: flex;\n  gap: 0.25rem;\n  padding: 0.25rem 0.5rem;\n  width: fit-content;\n}\n\n.status-pill__possible {\n  background-color: var(--color-forest-100);\n  color: var(--color-forest-900);\n}\n\n.status-pill__impossible {\n  background-color: var(--color-red-100);\n  color: var(--color-red-800);\n}\n\n.status-pill__new {\n  background-color: var(--color-navy-100);\n  color: var(--color-navy-600);\n  font-size: var(--font-size-text-non-essential);\n}\n\n.status-pill__dark {\n  background-color: var(--color-uva-black);\n  color: var(--color-uva-white);\n  font-size: var(--font-size-text-non-essential);\n  font-weight: var(--semibold);\n}\n\n.status-pill--bar {\n  border-radius: 0;\n  justify-content: center;\n  padding: 0.5rem;\n  width: 100%;\n}\n\n.status-pill--compact {\n  height: 1.125rem;\n  padding: 0.125rem 0.5rem 0 0.5rem;\n}\n","import { clsx } from 'clsx';\n\nimport type { IconProps } from 'components/Icon';\n\nimport styles from './StatusPill.module.css';\n\nimport { Icon } from 'components/Icon';\n\nexport interface StatusPillProps {\n  /** The status to convey. */\n  status: 'possible' | 'impossible' | 'new' | 'dark';\n  /** The variant of the pill. */\n  variant?: 'default' | 'bar' | 'compact';\n  /** A description of the status. */\n  label: string;\n}\n\nconst iconNameMap: Partial<Record<StatusPillProps['status'], IconProps['name']>> = {\n  possible: 'CheckCircleFillMini',\n  impossible: 'CrossCircleFillMini',\n};\n\n/** Represents a component for a status pill. */\nexport function StatusPill({ status, variant = 'default', label }: StatusPillProps) {\n  return (\n    <span\n      className={clsx(\n        styles['status-pill'],\n        styles[`status-pill__${status}`],\n        variant !== 'default' && styles[`status-pill--${variant}`]\n      )}\n    >\n      {(status === 'possible' || status === 'impossible') && (\n        <Icon name={iconNameMap[status]!} title={status} size={16} />\n      )}\n      {label}\n    </span>\n  );\n}\n"],"mappings":";;;;;;;;;;;;GCiBM,IAA6E;CACjF,UAAU;CACV,YAAY;CACb;AAGD,SAAgB,EAAW,EAAE,WAAQ,aAAU,WAAW,YAA0B;AAClF,QACE,kBAAC,QAAD;EACE,WAAW,EACT,EAAO,gBACP,EAAO,gBAAgB,MACvB,MAAY,aAAa,EAAO,gBAAgB,KACjD;YALH,EAOI,MAAW,cAAc,MAAW,iBACpC,kBAAC,GAAD;GAAM,MAAM,EAAY;GAAU,OAAO;GAAQ,MAAM;GAAM,CAAA,EAE9D,EACI"}

package/dist/TableCellContextMenu-D0IMQr3E.js

@@ -0,0 +1,119 @@
+import { t as e } from "./clsx-BD2qMUU1.js";
+import { Icon as t } from "./components/Icon/Icon.js";
+import { t as n } from "./LexicalComposerContext.prod-Ca-YN_fj.js";
+import { useTranslation as r } from "./components/RteEditor/hooks/useTranslation.js";
+import { useEffect as i, useRef as a, useState as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import './assets/TableCellContextMenu.css';//#region src/components/RteEditor/Plugins/TablePlugin/TableCellContextMenu/TableCellContextMenu.module.css
+var l = {
+	"context-menu__wrapper": "_context-menu__wrapper_c2vuh_1",
+	"context-menu__button": "_context-menu__button_c2vuh_10",
+	"context-menu": "_context-menu_c2vuh_1",
+	"context-menu--open": "_context-menu--open_c2vuh_38",
+	"context-menu__item": "_context-menu__item_c2vuh_43",
+	"context-menu__item-divider": "_context-menu__item-divider_c2vuh_57",
+	"context-menu__wrapper--hidden": "_context-menu__wrapper--hidden_c2vuh_61"
+}, u = 25, d = 10, f = 4, p = 25, m = (e) => {
+	let t = e.cloneNode(!0);
+	t.style.height = "auto", t.style.left = "-3000px", document.body.appendChild(t);
+	let n = t.getBoundingClientRect().height;
+	return document.body.removeChild(t), n;
+}, h = ({ position: h, parentScrollPosition: g, onAction: _ }) => {
+	let v = r(), [y, b] = o(!1), [x, S] = o(!1), [C, w] = o({
+		xPos: 0,
+		yPos: 0,
+		height: 0
+	}), [T, E] = o(0), D = a(0), O = a(null), k = a(null), A = a(null), [j] = n(), M = (e) => {
+		_(e), b(!1);
+	}, N = () => {
+		let e = O.current ? O.current.getBoundingClientRect().width : 0;
+		k.current && O.current && A.current && (C.xPos < e && k.current ? (k.current.style.left = `${e - C.xPos + d}px`, A.current.style.right = `${e - C.xPos + f + d}px`) : (k.current.style.left = "0px", A.current.style.right = `${f}px`), T || E(m(O.current)), T > document.documentElement.clientHeight - C.yPos ? (k.current.style.top = `-${T + C.height}px`, A.current.style.top = `${T + f}px`, A.current.style.transform = "rotate(180deg)") : (k.current.style.top = "0px", A.current.style.top = `-${p}px`, A.current.style.transform = "none"));
+	};
+	return i(() => {
+		w(h), h && (D.current = g), b(!1), S(!1);
+	}, [h]), i(() => {
+		if (A.current) {
+			let e = A.current.getBoundingClientRect(), t = j.getRootElement();
+			if (!t) return;
+			e.top - t.getBoundingClientRect().top <= 0 || e.top - t.getBoundingClientRect().bottom + u >= 0 ? S(!0) : S(!1), N();
+		}
+	}, [g]), /* @__PURE__ */ c("div", {
+		className: e(l["context-menu__wrapper"], [x && l["context-menu__wrapper--hidden"]]),
+		style: { transform: `${N(), `translate(${(C?.xPos ?? 0) - (O.current ? O.current.getBoundingClientRect().width : 0)}px, ${C.yPos - (g - D.current)}px)`}` },
+		ref: k,
+		children: [/* @__PURE__ */ s("button", {
+			type: "button",
+			onClick: () => b((e) => !e),
+			className: l["context-menu__button"],
+			ref: A,
+			children: /* @__PURE__ */ s(t, {
+				name: "CheveronDown",
+				size: 16
+			})
+		}), /* @__PURE__ */ c("ul", {
+			ref: O,
+			className: e(l["context-menu"], y && l["context-menu--open"]),
+			children: [
+				/* @__PURE__ */ s("li", { children: /* @__PURE__ */ s("button", {
+					type: "button",
+					onClick: () => M("insertRowAbove"),
+					className: l["context-menu__item"],
+					"aria-label": v.aria.labels.tableInsertRowAbove,
+					children: v.table.insertRowAbove
+				}) }),
+				/* @__PURE__ */ s("li", { children: /* @__PURE__ */ s("button", {
+					type: "button",
+					onClick: () => M("insertRowBelow"),
+					className: l["context-menu__item"],
+					"aria-label": v.aria.labels.tableInsertRowBelow,
+					children: v.table.insertRowBelow
+				}) }),
+				/* @__PURE__ */ s("li", {
+					className: l["context-menu__item-divider"],
+					children: /* @__PURE__ */ s("button", {
+						type: "button",
+						onClick: () => M("deleteRow"),
+						className: l["context-menu__item"],
+						"aria-label": v.aria.labels.tableDeleteRow,
+						children: v.table.deleteRow
+					})
+				}),
+				/* @__PURE__ */ s("li", { children: /* @__PURE__ */ s("button", {
+					type: "button",
+					onClick: () => M("insertColumnLeft"),
+					className: l["context-menu__item"],
+					"aria-label": v.aria.labels.tableInsertColumnLeft,
+					children: v.table.insertColumnLeft
+				}) }),
+				/* @__PURE__ */ s("li", { children: /* @__PURE__ */ s("button", {
+					type: "button",
+					onClick: () => M("insertColumnRight"),
+					className: l["context-menu__item"],
+					"aria-label": v.aria.labels.tableInsertColumnRight,
+					children: v.table.insertColumnRight
+				}) }),
+				/* @__PURE__ */ s("li", {
+					className: l["context-menu__item-divider"],
+					children: /* @__PURE__ */ s("button", {
+						type: "button",
+						onClick: () => M("deleteColumn"),
+						className: l["context-menu__item"],
+						"aria-label": v.aria.labels.tableDeleteColumn,
+						children: v.table.deleteColumn
+					})
+				}),
+				/* @__PURE__ */ s("li", { children: /* @__PURE__ */ s("button", {
+					type: "button",
+					onClick: () => M("deleteTable"),
+					className: l["context-menu__item"],
+					"aria-label": v.aria.labels.tableDeleteTable,
+					children: v.table.deleteTable
+				}) })
+			]
+		})]
+	});
+};
+//#endregion
+export { h as t };
+
+//# sourceMappingURL=TableCellContextMenu-D0IMQr3E.js.map

package/dist/TableCellContextMenu-D0IMQr3E.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableCellContextMenu-D0IMQr3E.js","names":[],"sources":["../src/components/RteEditor/Plugins/TablePlugin/TableCellContextMenu/TableCellContextMenu.module.css","../src/components/RteEditor/Plugins/TablePlugin/TableCellContextMenu/TableCellContextMenu.tsx"],"sourcesContent":[".context-menu__wrapper {\n  left: 0;\n  min-width: 10rem;\n  position: fixed;\n  top: 0;\n  visibility: visible;\n  z-index: 1000;\n}\n\n.context-menu__button {\n  align-items: center;\n  background-color: var(--color-grey-300);\n  border: 0;\n  border-radius: 4px;\n  color: var(--color-grey-700);\n  display: flex;\n  height: 1.35rem;\n  justify-content: center;\n  position: absolute;\n  right: 0.25rem;\n  top: -1.6rem;\n  width: 1.35rem;\n}\n\n.context-menu {\n  background-color: var(--color-uva-white);\n  border: 1px solid var(--color-grey-500);\n  border-radius: 4px;\n  box-shadow: 0 2px 6px rgba(0 0 0 / 20%);\n  height: 0;\n  list-style-type: none;\n  margin: -2px 0 0;\n  overflow: hidden;\n  padding: 0;\n  visibility: hidden;\n}\n\n.context-menu--open {\n  height: auto;\n  visibility: visible;\n}\n\n.context-menu__item {\n  align-items: center;\n  background-color: var(--color-uva-white);\n  border: none;\n  color: var(--color-uva-black);\n  display: flex;\n  padding: 0.65rem;\n  width: 100%;\n}\n\n.context-menu__item:hover {\n  background-color: var(--color-grey-300);\n}\n\n.context-menu__item-divider {\n  border-bottom: 1px solid var(--color-grey-500);\n}\n\n.context-menu__wrapper--hidden,\n.context-menu__wrapper--hidden .context-menu {\n  visibility: hidden;\n}\n","import { useEffect, useRef, useState } from 'react';\nimport { clsx } from 'clsx';\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';\n\nimport type { Position } from 'components/RteEditor/Plugins/ToolbarPlugin';\n\nimport styles from './TableCellContextMenu.module.css';\n\nimport { Icon } from 'components/Icon';\nimport { useTranslation } from 'components/RteEditor/hooks/useTranslation';\n\nexport type Actions =\n  | 'insertRowAbove'\n  | 'insertRowBelow'\n  | 'deleteRow'\n  | 'deleteTable'\n  | 'insertColumnLeft'\n  | 'insertColumnRight'\n  | 'deleteColumn';\ninterface TableCellContextMenuProps {\n  position: Position;\n  parentScrollPosition: number;\n  onAction: (action: Actions) => void;\n}\n\nconst CONTEXT_MENU_OFFSET = 25;\nconst WHITE_SPACE = 10;\nconst BUTTON_SHIFT = 4;\nconst BUTTON_RESET = 25;\n\nconst measureElement = (srcElement: HTMLElement) => {\n  const measureElement = srcElement.cloneNode(true) as HTMLElement;\n  measureElement.style.height = 'auto';\n  measureElement.style.left = '-3000px';\n  document.body.appendChild(measureElement);\n  const height = measureElement.getBoundingClientRect().height;\n  document.body.removeChild(measureElement);\n  return height;\n};\n\nexport const TableCellContextMenu = ({ position, parentScrollPosition, onAction }: TableCellContextMenuProps) => {\n  const t = useTranslation();\n  const [isOpen, setIsOpen] = useState(false);\n  const [isHidden, setIsHidden] = useState(false);\n  const [localPosition, setLocalPosition] = useState<Position>({ xPos: 0, yPos: 0, height: 0 });\n  const [menuHeight, setMenuHeight] = useState(0);\n  const startScrollPosition = useRef(0);\n  const menuRef = useRef<HTMLUListElement>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const [editor] = useLexicalComposerContext();\n\n  const handleAction = (action: Actions) => {\n    onAction(action);\n    setIsOpen(false);\n  };\n\n  const flipMenuIfNotInViewport = () => {\n    const menuWidth = menuRef.current ? menuRef.current.getBoundingClientRect().width : 0;\n\n    if (containerRef.current && menuRef.current && buttonRef.current) {\n      if (localPosition.xPos < menuWidth && containerRef.current) {\n        containerRef.current.style.left = `${menuWidth - localPosition.xPos + WHITE_SPACE}px`;\n        buttonRef.current.style.right = `${menuWidth - localPosition.xPos + BUTTON_SHIFT + WHITE_SPACE}px`;\n      } else {\n        containerRef.current.style.left = '0px';\n        buttonRef.current.style.right = `${BUTTON_SHIFT}px`;\n      }\n\n      if (!menuHeight) {\n        setMenuHeight(measureElement(menuRef.current));\n      }\n\n      if (menuHeight > document.documentElement.clientHeight - localPosition.yPos) {\n        containerRef.current.style.top = `-${menuHeight + localPosition.height}px`;\n        buttonRef.current.style.top = `${menuHeight + BUTTON_SHIFT}px`;\n        buttonRef.current.style.transform = 'rotate(180deg)';\n      } else {\n        containerRef.current.style.top = '0px';\n        buttonRef.current.style.top = `-${BUTTON_RESET}px`;\n        buttonRef.current.style.transform = 'none';\n      }\n    }\n  };\n\n  const setMenuPosition = () => {\n    flipMenuIfNotInViewport();\n    return `translate(${(localPosition?.xPos ?? 0) - (menuRef.current ? menuRef.current.getBoundingClientRect().width : 0)}px, ${localPosition.yPos - (parentScrollPosition - startScrollPosition.current)}px)`;\n  };\n\n  useEffect(() => {\n    setLocalPosition(position);\n    if (position) {\n      startScrollPosition.current = parentScrollPosition;\n    }\n    setIsOpen(false);\n    setIsHidden(false);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [position]);\n\n  useEffect(() => {\n    if (buttonRef.current) {\n      const rect = buttonRef.current.getBoundingClientRect();\n      const rootElement = editor.getRootElement();\n      if (!rootElement) return;\n      if (\n        rect.top - rootElement.getBoundingClientRect().top <= 0 ||\n        rect.top - rootElement.getBoundingClientRect().bottom + CONTEXT_MENU_OFFSET >= 0\n      ) {\n        setIsHidden(true);\n      } else {\n        setIsHidden(false);\n      }\n      flipMenuIfNotInViewport();\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [parentScrollPosition]);\n\n  return (\n    <div\n      className={clsx(styles['context-menu__wrapper'], [isHidden && styles['context-menu__wrapper--hidden']])}\n      style={{\n        transform: `${setMenuPosition()}`,\n      }}\n      ref={containerRef}\n    >\n      <button\n        type=\"button\"\n        onClick={() => setIsOpen((prev) => !prev)}\n        className={styles['context-menu__button']}\n        ref={buttonRef}\n      >\n        <Icon name=\"CheveronDown\" size={16} />\n      </button>\n      <ul ref={menuRef} className={clsx(styles['context-menu'], isOpen && styles['context-menu--open'])}>\n        <li>\n          <button\n            type=\"button\"\n            onClick={() => handleAction('insertRowAbove')}\n            className={styles['context-menu__item']}\n            aria-label={t.aria.labels.tableInsertRowAbove}\n          >\n            {t.table.insertRowAbove}\n          </button>\n        </li>\n        <li>\n          <button\n            type=\"button\"\n            onClick={() => handleAction('insertRowBelow')}\n            className={styles['context-menu__item']}\n            aria-label={t.aria.labels.tableInsertRowBelow}\n          >\n            {t.table.insertRowBelow}\n          </button>\n        </li>\n        <li className={styles['context-menu__item-divider']}>\n          <button\n            type=\"button\"\n            onClick={() => handleAction('deleteRow')}\n            className={styles['context-menu__item']}\n            aria-label={t.aria.labels.tableDeleteRow}\n          >\n            {t.table.deleteRow}\n          </button>\n        </li>\n\n        <li>\n          <button\n            type=\"button\"\n            onClick={() => handleAction('insertColumnLeft')}\n            className={styles['context-menu__item']}\n            aria-label={t.aria.labels.tableInsertColumnLeft}\n          >\n            {t.table.insertColumnLeft}\n          </button>\n        </li>\n        <li>\n          <button\n            type=\"button\"\n            onClick={() => handleAction('insertColumnRight')}\n            className={styles['context-menu__item']}\n            aria-label={t.aria.labels.tableInsertColumnRight}\n          >\n            {t.table.insertColumnRight}\n          </button>\n        </li>\n        <li className={styles['context-menu__item-divider']}>\n          <button\n            type=\"button\"\n            onClick={() => handleAction('deleteColumn')}\n            className={styles['context-menu__item']}\n            aria-label={t.aria.labels.tableDeleteColumn}\n          >\n            {t.table.deleteColumn}\n          </button>\n        </li>\n\n        <li>\n          <button\n            type=\"button\"\n            onClick={() => handleAction('deleteTable')}\n            className={styles['context-menu__item']}\n            aria-label={t.aria.labels.tableDeleteTable}\n          >\n            {t.table.deleteTable}\n          </button>\n        </li>\n      </ul>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/TableCellResizerPlugin-CgYsYsuY.js

@@ -0,0 +1,208 @@
+import { t as e } from "./LexicalComposerContext.prod-Ca-YN_fj.js";
+import { at as t, q as n } from "./Lexical.prod-DIglXatJ.js";
+import { f as r, s as i } from "./LexicalUtils.prod-BBTLliac.js";
+import { C as a, T as o, b as s, g as c, l, o as u, t as d, u as f, y as p } from "./LexicalTable.prod-D16GW-aZ.js";
+import { $createTableWrapperNode as m, TableWrapperNode as h } from "./components/RteEditor/nodes/TableWrapperNode/TableWrapperNode.js";
+import { getEditorContentWidth as g, getEditorParrentCellWidth as _, tableHasContent as v } from "./components/RteEditor/Plugins/TablePlugin/helpers.js";
+import { useCallback as y, useEffect as b, useLayoutEffect as x, useMemo as S, useRef as C, useState as w } from "react";
+import { Fragment as T, jsx as E, jsxs as D } from "react/jsx-runtime";
+import { createPortal as O } from "react-dom";
+import './assets/TableCellResizerPlugin.css';//#region node_modules/@lexical/react/useLexicalEditable.prod.mjs
+var k = typeof window < "u" && window.document !== void 0 && window.document.createElement !== void 0 ? x : b;
+function A(e) {
+	return {
+		initialValueFn: () => e.isEditable(),
+		subscribe: (t) => e.registerEditableListener(t)
+	};
+}
+function j() {
+	return function(t) {
+		let [n] = e(), r = S(() => t(n), [n, t]), [i, a] = w(() => r.initialValueFn()), o = C(i);
+		return k(() => {
+			let { initialValueFn: e, subscribe: t } = r, n = e();
+			return o.current !== n && (o.current = n, a(n)), t((e) => {
+				o.current = e, a(e);
+			});
+		}, [r, t]), i;
+	}(A);
+}
+//#endregion
+//#region src/components/RteEditor/Plugins/TableCellResizerPlugin/TableCellResizerPlugin.module.css
+var M = { "table-cell-resizer__resizer": "_table-cell-resizer__resizer_2hhfo_17" }, N = 33, P = 32, F = 2;
+function I({ editor: e }) {
+	let x = C(null), S = C(null), O = C(null), k = C(null), [A, j] = w(null), [I, L] = w(null), [R, z] = w(!1), [B, V] = w(null), H = y(() => {
+		L(null), x.current = null, V(null), k.current = null, O.current = null;
+	}, []), U = (e) => (e.buttons & 1) == 1;
+	b(() => e.registerNodeTransform(l, (t) => {
+		if (!t.getColWidths()) {
+			let n = t.getChildren(), r = t.getColumnCount(), a = Array(r).fill(void 0);
+			n[0].getChildren().forEach((n, o) => {
+				let s = e.getElementByKey(n.getKey());
+				if (s && s.style.width) a[o] = parseInt(s.style.width, 10), s.style.width = "";
+				else if (v(t)) {
+					let n = t ? i(t, u) : null, s = (n ? _(n, r, e) : g(e)) / r;
+					a[o] = Math.max(s, P);
+				} else a[o] = P;
+			}), t.setColWidths(a);
+		}
+		if (t && !(t.getParent() instanceof h)) {
+			let e = m();
+			t.replace(e), e.append(t);
+		}
+		return t;
+	}), [e]), b(() => {
+		let r = (r) => {
+			let i = r.target;
+			if (t(i)) {
+				if (B) {
+					j({
+						x: r.clientX,
+						y: r.clientY
+					});
+					return;
+				}
+				if (z(U(r)), !(S.current && S.current.contains(i)) && x.current !== i) {
+					x.current = i;
+					let t = s(i);
+					t && I !== t ? e.getEditorState().read(() => {
+						let r = n(t.elem);
+						if (!r) throw Error("TableCellResizer: Table cell node not found.");
+						let a = p(r), s = o(a, e.getElementByKey(a.getKey()));
+						if (!s) throw Error("TableCellResizer: Table element not found.");
+						x.current = i, O.current = s.getBoundingClientRect(), L(t);
+					}, { editor: e }) : t ?? H();
+				}
+			}
+		}, i = () => {
+			z(!0);
+		}, a = () => {
+			z(!1);
+		}, c = e.registerRootListener((e, t) => {
+			t?.removeEventListener("mousemove", r), t?.removeEventListener("mousedown", i), t?.removeEventListener("mouseup", a), e?.addEventListener("mousemove", r), e?.addEventListener("mousedown", i), e?.addEventListener("mouseup", a);
+		});
+		return () => {
+			c();
+		};
+	}, [
+		I,
+		B,
+		e,
+		H
+	]);
+	let W = (e) => e === "bottom", G = y((t) => {
+		if (!I) throw Error("TableCellResizer: Expected active cell.");
+		e.update(() => {
+			let r = n(I.elem);
+			if (!d(r)) throw Error("TableCellResizer: Table cell node not found.");
+			let i = p(r), a = c(r) + r.getRowSpan() - 1, o = i.getChildren();
+			if (a >= o.length || a < 0) throw Error("Expected table cell to be inside of table row.");
+			let s = o[a];
+			if (!f(s)) throw Error("Expected table row");
+			let l = s.getHeight();
+			if (l === void 0) {
+				let t = s.getChildren();
+				l = Math.min(...t.map((t) => K(t, e) ?? Infinity));
+			}
+			let u = Math.max(l + t, N);
+			s.setHeight(u);
+		}, { tag: "skip-scroll-into-view" });
+	}, [I, e]), K = (e, t) => t.getElementByKey(e.getKey())?.clientHeight, q = (e, t) => {
+		for (let n = 0; n < t.length; n++) for (let r = 0; r < t[n].length; r++) if (t[n][r].cell === e) return r;
+		return -1;
+	}, J = y((t) => {
+		if (!I) throw Error("TableCellResizer: Expected active cell.");
+		e.update(() => {
+			let e = n(I.elem);
+			if (!d(e)) throw Error("TableCellResizer: Table cell node not found.");
+			let r = p(e), [i] = a(r, null, null), o = q(e, i);
+			if (o === void 0) throw Error("TableCellResizer: Table column not found.");
+			let s = r.getColWidths();
+			if (!s) return;
+			let c = s[o];
+			if (c === void 0) return;
+			let l = [...s];
+			if (l[o] = Math.max(c + t, P), r.setColWidths(l), o < r.getColumnCount() - 1) {
+				let e = r.getColWidths();
+				if (!e) return;
+				let n = [...e], i = o + 1, a = e[i];
+				n[i] = Math.max(a - t, P), r.setColWidths(n);
+			}
+		}, { tag: "skip-scroll-into-view" });
+	}, [I, e]), Y = y((e) => {
+		let t = (n) => {
+			if (n.preventDefault(), n.stopPropagation(), !I) throw Error("TableCellResizer: Expected active cell.");
+			if (k.current) {
+				let { x: i, y: a } = k.current;
+				if (I === null) return;
+				let o = r(n.target);
+				W(e) ? G((n.clientY - a) / o) : J((n.clientX - i) / o), H(), document.removeEventListener("mouseup", t);
+			}
+		};
+		return t;
+	}, [
+		I,
+		H,
+		J,
+		G
+	]), X = y((e) => (t) => {
+		if (t.preventDefault(), t.stopPropagation(), !I) throw Error("TableCellResizer: Expected active cell.");
+		k.current = {
+			x: t.clientX,
+			y: t.clientY
+		}, j(k.current), V(e), document.addEventListener("mouseup", Y(e));
+	}, [I, Y]), Z = y(() => {
+		if (I) {
+			let { height: e, width: t, top: n, left: i } = I.elem.getBoundingClientRect(), a = r(I.elem), o = {
+				bottom: {
+					backgroundColor: "none",
+					cursor: "ns-resize",
+					height: "10px",
+					left: `${window.pageXOffset + i}px`,
+					top: `${window.pageYOffset + n + e - 10 / F}px`,
+					width: `${t}px`,
+					zIndex: 5e3
+				},
+				right: {
+					backgroundColor: "none",
+					cursor: "ew-resize",
+					height: `${e}px`,
+					left: `${window.pageXOffset + i + t - 10 / F}px`,
+					top: `${window.pageYOffset + n}px`,
+					width: "10px",
+					zIndex: 5e3
+				}
+			}, s = O.current;
+			return B && A && s && (W(B) ? (o[B].left = `${window.pageXOffset + s.left}px`, o[B].top = `${window.pageYOffset + A.y / a}px`, o[B].height = "3px", o[B].width = `${s.width}px`) : (o[B].top = `${window.pageYOffset + s.top}px`, o[B].left = `${window.pageXOffset + A.x / a}px`, o[B].width = "3px", o[B].height = `${s.height}px`), o[B].backgroundColor = "#adf"), o;
+		}
+		return {
+			bottom: null,
+			left: null,
+			right: null,
+			top: null
+		};
+	}, [
+		I,
+		B,
+		A
+	])();
+	return /* @__PURE__ */ E("div", {
+		ref: S,
+		children: I != null && !R && /* @__PURE__ */ D(T, { children: [/* @__PURE__ */ E("div", {
+			className: M["table-cell-resizer__resizer"],
+			style: Z.right || void 0,
+			onMouseDown: X("right")
+		}), /* @__PURE__ */ E("div", {
+			className: M["table-cell-resizer__resizer"],
+			style: Z.bottom || void 0,
+			onMouseDown: X("bottom")
+		})] })
+	});
+}
+var L = () => {
+	let [t] = e(), n = j();
+	return S(() => n ? O(/* @__PURE__ */ E(I, { editor: t }), document.body) : null, [t, n]);
+};
+//#endregion
+export { j as n, L as t };
+
+//# sourceMappingURL=TableCellResizerPlugin-CgYsYsuY.js.map

package/dist/TableCellResizerPlugin-CgYsYsuY.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableCellResizerPlugin-CgYsYsuY.js","names":["n","t","e","i","r","o"],"sources":["../node_modules/@lexical/react/useLexicalEditable.prod.mjs","../src/components/RteEditor/Plugins/TableCellResizerPlugin/TableCellResizerPlugin.module.css","../src/components/RteEditor/Plugins/TableCellResizerPlugin/TableCellResizerPlugin.tsx"],"sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport{useLexicalComposerContext as e}from\"@lexical/react/LexicalComposerContext\";import{useLayoutEffect as n,useEffect as t,useMemo as i,useState as r,useRef as o}from\"react\";const c=\"undefined\"!=typeof window&&void 0!==window.document&&void 0!==window.document.createElement?n:t;function u(e){return{initialValueFn:()=>e.isEditable(),subscribe:n=>e.registerEditableListener(n)}}function a(){return function(n){const[t]=e(),u=i(()=>n(t),[t,n]),[a,l]=r(()=>u.initialValueFn()),d=o(a);return c(()=>{const{initialValueFn:e,subscribe:n}=u,t=e();return d.current!==t&&(d.current=t,l(t)),n(e=>{d.current=e,l(e)})},[u,n]),a}(u)}export{a as useLexicalEditable};\n","/**\r\n * Copyright (c) Meta Platforms, Inc. and affiliates.\r\n *\r\n * This source code is licensed under the MIT license found in the\r\n * LICENSE file in the root directory of this source tree.\r\n *\r\n *\r\n */\n\n.table-cell-resizer__resizer {\n  position: absolute;\n}\n","/* eslint-disable jsx-a11y/no-static-element-interactions */\r\n/**\r\n * Copyright (c) Meta Platforms, Inc. and affiliates.\r\n *\r\n * This source code is licensed under the MIT license found in the\r\n * LICENSE file in the root directory of this source tree.\r\n *\r\n * Modified from original to fit project needs wim jurriaans.\r\n *\r\n *\r\n */\r\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react';\r\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';\r\nimport { useLexicalEditable } from '@lexical/react/useLexicalEditable';\r\nimport {\r\n  $computeTableMapSkipCellCheck,\r\n  $getTableNodeFromLexicalNodeOrThrow,\r\n  $getTableRowIndexFromTableCellNode,\r\n  $isTableCellNode,\r\n  $isTableRowNode,\r\n  TableNode,\r\n  getDOMCellFromTarget,\r\n  getTableElement,\r\n  TableCellNode,\r\n} from '@lexical/table';\r\nimport { $getNearestNodeOfType, calculateZoomLevel } from '@lexical/utils';\r\nimport { $getNearestNodeFromDOMNode, isHTMLElement } from 'lexical';\r\nimport { createPortal } from 'react-dom';\r\n\r\nimport type { LexicalEditor } from 'lexical';\r\nimport type { TableDOMCell, TableMapType, TableRowNode } from '@lexical/table';\r\nimport type { JSX, MouseEventHandler, ReactPortal } from 'react';\r\n\r\nimport styles from './TableCellResizerPlugin.module.css';\r\n\r\nimport {\r\n  getEditorContentWidth,\r\n  getEditorParrentCellWidth,\r\n  tableHasContent,\r\n} from 'components/RteEditor/Plugins/TablePlugin/helpers';\r\nimport { $createTableWrapperNode, TableWrapperNode } from 'components/RteEditor/nodes';\r\n\r\ntype MousePosition = {\r\n  x: number;\r\n  y: number;\r\n};\r\n\r\ntype MouseDraggingDirection = 'right' | 'bottom';\r\n\r\nconst MIN_ROW_HEIGHT = 33;\r\nconst MIN_COLUMN_WIDTH = 32;\r\nconst HALF = 2;\r\n\r\nfunction TableCellResizer({ editor }: { editor: LexicalEditor }): JSX.Element {\r\n  const targetRef = useRef<HTMLElement | null>(null);\r\n  const resizerRef = useRef<HTMLDivElement | null>(null);\r\n  const tableRectRef = useRef<DOMRect | null>(null);\r\n\r\n  const mouseStartPosRef = useRef<MousePosition | null>(null);\r\n  const [mouseCurrentPos, updateMouseCurrentPos] = useState<MousePosition | null>(null);\r\n\r\n  const [activeCell, updateActiveCell] = useState<TableDOMCell | null>(null);\r\n  const [isMouseDown, updateIsMouseDown] = useState<boolean>(false);\r\n  const [draggingDirection, updateDraggingDirection] = useState<MouseDraggingDirection | null>(null);\r\n\r\n  const resetState = useCallback(() => {\r\n    updateActiveCell(null);\r\n    targetRef.current = null;\r\n    updateDraggingDirection(null);\r\n    mouseStartPosRef.current = null;\r\n    tableRectRef.current = null;\r\n  }, []);\r\n\r\n  const isMouseDownOnEvent = (event: MouseEvent) => {\r\n    return (event.buttons & 1) === 1;\r\n  };\r\n\r\n  useEffect(() => {\r\n    return editor.registerNodeTransform(TableNode, (tableNode) => {\r\n      // modification: set default column widths if not defined or table cells of imported tables has the width set\r\n      if (!tableNode.getColWidths()) {\r\n        const tableRows = tableNode.getChildren();\r\n        const columnCount = tableNode.getColumnCount();\r\n        const colWidths = new Array(columnCount).fill(undefined);\r\n\r\n        const firstRow = tableRows[0] as TableRowNode;\r\n        const cells = firstRow.getChildren();\r\n        cells.forEach((cell, colIdx) => {\r\n          const domCell = editor.getElementByKey(cell.getKey());\r\n          if (domCell && domCell.style.width) {\r\n            colWidths[colIdx] = parseInt(domCell.style.width, 10);\r\n            domCell.style.width = '';\r\n          } else if (tableHasContent(tableNode)) {\r\n            const isNested = tableNode ? $getNearestNodeOfType(tableNode, TableCellNode) : null;\r\n\r\n            const availableWidth = isNested\r\n              ? getEditorParrentCellWidth(isNested, columnCount, editor)\r\n              : getEditorContentWidth(editor);\r\n            const newColWidth = availableWidth / columnCount;\r\n            colWidths[colIdx] = Math.max(newColWidth, MIN_COLUMN_WIDTH);\r\n          } else {\r\n            colWidths[colIdx] = MIN_COLUMN_WIDTH;\r\n          }\r\n        });\r\n\r\n        tableNode.setColWidths(colWidths);\r\n      }\r\n\r\n      // modification: wrap table node in a wrapper node if there is no wrapper node present\r\n      if (tableNode && !(tableNode.getParent() instanceof TableWrapperNode)) {\r\n        const wrapperNode = $createTableWrapperNode();\r\n        tableNode.replace(wrapperNode);\r\n        wrapperNode.append(tableNode);\r\n      }\r\n\r\n      return tableNode;\r\n    });\r\n  }, [editor]);\r\n\r\n  useEffect(() => {\r\n    const onMouseMove = (event: MouseEvent) => {\r\n      const target = event.target;\r\n      if (!isHTMLElement(target)) {\r\n        return;\r\n      }\r\n\r\n      if (draggingDirection) {\r\n        updateMouseCurrentPos({\r\n          x: event.clientX,\r\n          y: event.clientY,\r\n        });\r\n        return;\r\n      }\r\n      updateIsMouseDown(isMouseDownOnEvent(event));\r\n      if (resizerRef.current && resizerRef.current.contains(target)) {\r\n        return;\r\n      }\r\n\r\n      if (targetRef.current !== target) {\r\n        targetRef.current = target;\r\n        const cell = getDOMCellFromTarget(target);\r\n\r\n        if (cell && activeCell !== cell) {\r\n          editor.getEditorState().read(\r\n            () => {\r\n              const tableCellNode = $getNearestNodeFromDOMNode(cell.elem);\r\n              if (!tableCellNode) {\r\n                throw new Error('TableCellResizer: Table cell node not found.');\r\n              }\r\n\r\n              const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);\r\n              const tableElement = getTableElement(tableNode, editor.getElementByKey(tableNode.getKey()));\r\n\r\n              if (!tableElement) {\r\n                throw new Error('TableCellResizer: Table element not found.');\r\n              }\r\n\r\n              targetRef.current = target;\r\n              tableRectRef.current = tableElement.getBoundingClientRect();\r\n              updateActiveCell(cell);\r\n            },\r\n            { editor }\r\n          );\r\n        } else if (cell == null) {\r\n          resetState();\r\n        }\r\n      }\r\n    };\r\n\r\n    const onMouseDown = () => {\r\n      updateIsMouseDown(true);\r\n    };\r\n\r\n    const onMouseUp = () => {\r\n      updateIsMouseDown(false);\r\n    };\r\n\r\n    const removeRootListener = editor.registerRootListener((rootElement, prevRootElement) => {\r\n      prevRootElement?.removeEventListener('mousemove', onMouseMove);\r\n      prevRootElement?.removeEventListener('mousedown', onMouseDown);\r\n      prevRootElement?.removeEventListener('mouseup', onMouseUp);\r\n      rootElement?.addEventListener('mousemove', onMouseMove);\r\n      rootElement?.addEventListener('mousedown', onMouseDown);\r\n      rootElement?.addEventListener('mouseup', onMouseUp);\r\n    });\r\n\r\n    return () => {\r\n      removeRootListener();\r\n    };\r\n  }, [activeCell, draggingDirection, editor, resetState]);\r\n\r\n  const isHeightChanging = (direction: MouseDraggingDirection) => {\r\n    if (direction === 'bottom') {\r\n      return true;\r\n    }\r\n    return false;\r\n  };\r\n\r\n  const updateRowHeight = useCallback(\r\n    (heightChange: number) => {\r\n      if (!activeCell) {\r\n        throw new Error('TableCellResizer: Expected active cell.');\r\n      }\r\n\r\n      editor.update(\r\n        () => {\r\n          const tableCellNode = $getNearestNodeFromDOMNode(activeCell.elem);\r\n          if (!$isTableCellNode(tableCellNode)) {\r\n            throw new Error('TableCellResizer: Table cell node not found.');\r\n          }\r\n\r\n          const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);\r\n\r\n          const tableRowIndex = $getTableRowIndexFromTableCellNode(tableCellNode) + tableCellNode.getRowSpan() - 1;\r\n\r\n          const tableRows = tableNode.getChildren();\r\n\r\n          if (tableRowIndex >= tableRows.length || tableRowIndex < 0) {\r\n            throw new Error('Expected table cell to be inside of table row.');\r\n          }\r\n\r\n          const tableRow = tableRows[tableRowIndex];\r\n\r\n          if (!$isTableRowNode(tableRow)) {\r\n            throw new Error('Expected table row');\r\n          }\r\n\r\n          let height = tableRow.getHeight();\r\n          if (height === undefined) {\r\n            const rowCells = tableRow.getChildren<TableCellNode>();\r\n            height = Math.min(...rowCells.map((cell) => getCellNodeHeight(cell, editor) ?? Infinity));\r\n          }\r\n\r\n          const newHeight = Math.max(height + heightChange, MIN_ROW_HEIGHT);\r\n          tableRow.setHeight(newHeight);\r\n        },\r\n        { tag: 'skip-scroll-into-view' }\r\n      );\r\n    },\r\n    [activeCell, editor]\r\n  );\r\n\r\n  const getCellNodeHeight = (cell: TableCellNode, activeEditor: LexicalEditor): number | undefined => {\r\n    const domCellNode = activeEditor.getElementByKey(cell.getKey());\r\n    return domCellNode?.clientHeight;\r\n  };\r\n\r\n  const getCellColumnIndex = (tableCellNode: TableCellNode, tableMap: TableMapType) => {\r\n    for (let row = 0; row < tableMap.length; row++) {\r\n      for (let column = 0; column < tableMap[row].length; column++) {\r\n        if (tableMap[row][column].cell === tableCellNode) {\r\n          return column;\r\n        }\r\n      }\r\n    }\r\n    return -1;\r\n  };\r\n\r\n  const updateColumnWidth = useCallback(\r\n    (widthChange: number) => {\r\n      if (!activeCell) {\r\n        throw new Error('TableCellResizer: Expected active cell.');\r\n      }\r\n      editor.update(\r\n        () => {\r\n          const tableCellNode = $getNearestNodeFromDOMNode(activeCell.elem);\r\n          if (!$isTableCellNode(tableCellNode)) {\r\n            throw new Error('TableCellResizer: Table cell node not found.');\r\n          }\r\n\r\n          const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);\r\n          const [tableMap] = $computeTableMapSkipCellCheck(tableNode, null, null);\r\n          const columnIndex = getCellColumnIndex(tableCellNode, tableMap);\r\n          if (columnIndex === undefined) {\r\n            throw new Error('TableCellResizer: Table column not found.');\r\n          }\r\n\r\n          const colWidths = tableNode.getColWidths();\r\n          if (!colWidths) {\r\n            return;\r\n          }\r\n          const width = colWidths[columnIndex];\r\n          if (width === undefined) {\r\n            return;\r\n          }\r\n          const newColWidths = [...colWidths];\r\n          const newWidth = Math.max(width + widthChange, MIN_COLUMN_WIDTH);\r\n          newColWidths[columnIndex] = newWidth;\r\n          tableNode.setColWidths(newColWidths);\r\n\r\n          // modification: when resizing a column, also resize the next column so the table doesn't overflow\r\n          if (columnIndex < tableNode.getColumnCount() - 1) {\r\n            const nextColWidths = tableNode.getColWidths();\r\n            if (!nextColWidths) {\r\n              return;\r\n            }\r\n            const newNextColWidths = [...nextColWidths];\r\n            const newColumnIndex = columnIndex + 1;\r\n            const newNextWidth = nextColWidths[newColumnIndex];\r\n            const nextWidth = Math.max(newNextWidth - widthChange, MIN_COLUMN_WIDTH);\r\n            newNextColWidths[newColumnIndex] = nextWidth;\r\n            tableNode.setColWidths(newNextColWidths);\r\n          }\r\n        },\r\n        { tag: 'skip-scroll-into-view' }\r\n      );\r\n    },\r\n    [activeCell, editor]\r\n  );\r\n\r\n  const mouseUpHandler = useCallback(\r\n    (direction: MouseDraggingDirection) => {\r\n      const handler = (event: MouseEvent) => {\r\n        event.preventDefault();\r\n        event.stopPropagation();\r\n\r\n        if (!activeCell) {\r\n          throw new Error('TableCellResizer: Expected active cell.');\r\n        }\r\n\r\n        if (mouseStartPosRef.current) {\r\n          const { x, y } = mouseStartPosRef.current;\r\n\r\n          if (activeCell === null) {\r\n            return;\r\n          }\r\n          const zoom = calculateZoomLevel(event.target as Element);\r\n\r\n          if (isHeightChanging(direction)) {\r\n            const heightChange = (event.clientY - y) / zoom;\r\n            updateRowHeight(heightChange);\r\n          } else {\r\n            const widthChange = (event.clientX - x) / zoom;\r\n            updateColumnWidth(widthChange);\r\n          }\r\n\r\n          resetState();\r\n          document.removeEventListener('mouseup', handler);\r\n        }\r\n      };\r\n      return handler;\r\n    },\r\n    [activeCell, resetState, updateColumnWidth, updateRowHeight]\r\n  );\r\n\r\n  const toggleResize = useCallback(\r\n    (direction: MouseDraggingDirection): MouseEventHandler<HTMLDivElement> =>\r\n      (event) => {\r\n        event.preventDefault();\r\n        event.stopPropagation();\r\n\r\n        if (!activeCell) {\r\n          throw new Error('TableCellResizer: Expected active cell.');\r\n        }\r\n\r\n        mouseStartPosRef.current = {\r\n          x: event.clientX,\r\n          y: event.clientY,\r\n        };\r\n        updateMouseCurrentPos(mouseStartPosRef.current);\r\n        updateDraggingDirection(direction);\r\n\r\n        document.addEventListener('mouseup', mouseUpHandler(direction));\r\n      },\r\n    [activeCell, mouseUpHandler]\r\n  );\r\n\r\n  const getResizers = useCallback(() => {\r\n    if (activeCell) {\r\n      const { height, width, top, left } = activeCell.elem.getBoundingClientRect();\r\n      const zoom = calculateZoomLevel(activeCell.elem);\r\n      const zoneWidth = 10; // Pixel width of the zone where you can drag the edge\r\n      const styles = {\r\n        bottom: {\r\n          backgroundColor: 'none',\r\n          cursor: 'ns-resize',\r\n          height: `${zoneWidth}px`,\r\n          left: `${window.pageXOffset + left}px`,\r\n          top: `${window.pageYOffset + top + height - zoneWidth / HALF}px`,\r\n          width: `${width}px`,\r\n          zIndex: 5000,\r\n        },\r\n        right: {\r\n          backgroundColor: 'none',\r\n          cursor: 'ew-resize',\r\n          height: `${height}px`,\r\n          left: `${window.pageXOffset + left + width - zoneWidth / HALF}px`,\r\n          top: `${window.pageYOffset + top}px`,\r\n          width: `${zoneWidth}px`,\r\n          zIndex: 5000,\r\n        },\r\n      };\r\n\r\n      const tableRect = tableRectRef.current;\r\n\r\n      if (draggingDirection && mouseCurrentPos && tableRect) {\r\n        if (isHeightChanging(draggingDirection)) {\r\n          styles[draggingDirection].left = `${window.pageXOffset + tableRect.left}px`;\r\n          styles[draggingDirection].top = `${window.pageYOffset + mouseCurrentPos.y / zoom}px`;\r\n          styles[draggingDirection].height = '3px';\r\n          styles[draggingDirection].width = `${tableRect.width}px`;\r\n        } else {\r\n          styles[draggingDirection].top = `${window.pageYOffset + tableRect.top}px`;\r\n          styles[draggingDirection].left = `${window.pageXOffset + mouseCurrentPos.x / zoom}px`;\r\n          styles[draggingDirection].width = '3px';\r\n          styles[draggingDirection].height = `${tableRect.height}px`;\r\n        }\r\n\r\n        styles[draggingDirection].backgroundColor = '#adf';\r\n      }\r\n\r\n      return styles;\r\n    }\r\n\r\n    return {\r\n      bottom: null,\r\n      left: null,\r\n      right: null,\r\n      top: null,\r\n    };\r\n  }, [activeCell, draggingDirection, mouseCurrentPos]);\r\n\r\n  const resizerStyles = getResizers();\r\n\r\n  return (\r\n    <div ref={resizerRef}>\r\n      {activeCell != null && !isMouseDown && (\r\n        <>\r\n          <div\r\n            className={styles['table-cell-resizer__resizer']}\r\n            style={resizerStyles.right || undefined}\r\n            onMouseDown={toggleResize('right')}\r\n          />\r\n          <div\r\n            className={styles['table-cell-resizer__resizer']}\r\n            style={resizerStyles.bottom || undefined}\r\n            onMouseDown={toggleResize('bottom')}\r\n          />\r\n        </>\r\n      )}\r\n    </div>\r\n  );\r\n}\r\n\r\nexport const TableCellResizerPlugin = (): null | ReactPortal => {\r\n  const [editor] = useLexicalComposerContext();\r\n  const isEditable = useLexicalEditable();\r\n\r\n  return useMemo(\r\n    () => (isEditable ? createPortal(<TableCellResizer editor={editor} />, document.body) : null),\r\n    [editor, isEditable]\r\n  );\r\n};\r\n"],"x_google_ignoreList":[0],"mappings":"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"}

package/dist/TextArea-DqKIpOfT.js

@@ -0,0 +1,68 @@
+import { t as e } from "./clsx-BD2qMUU1.js";
+import { useEffect as t, useRef as n, useState as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import './assets/TextArea.css';//#region src/components/TextArea/TextArea.module.css
+var o = "_required_19dqk_25", s = {
+	"text-area__wrapper": "_text-area__wrapper_19dqk_1",
+	"text-area__header": "_text-area__header_19dqk_7",
+	"text-area__label-wrapper": "_text-area__label-wrapper_19dqk_13",
+	"text-area__label": "_text-area__label_19dqk_13",
+	required: o,
+	"text-area__sub-label": "_text-area__sub-label_19dqk_33",
+	"text-area__word-count": "_text-area__word-count_19dqk_38",
+	"text-area__word-count--alert": "_text-area__word-count--alert_19dqk_43",
+	"text-area": "_text-area_19dqk_1",
+	"text-area--oneLine": "_text-area--oneLine_19dqk_61",
+	"not-valid": "_not-valid_19dqk_66"
+};
+//#endregion
+//#region src/components/TextArea/TextArea.tsx
+function c({ onChange: o, label: c, subLabel: l, maxCharacters: u = 0, heightAsTextField: d = !1, defaultValue: f = "", required: p = !1, notValid: m = !1 }) {
+	let h = n(null), [g, _] = r(f.length), v = () => {
+		h.current && (h.current.style.height = "auto", h.current.style.height = `${h.current.scrollHeight}px`, _(h.current.value.length), o(h.current.value.trim()));
+	}, y = () => {
+		let e = h.current;
+		e && (e.style.height = "auto", e.style.height = `${e.scrollHeight}px`);
+	};
+	return t(() => {
+		d || y();
+	}, []), /* @__PURE__ */ a("div", {
+		className: s["text-area__wrapper"],
+		children: [(c || u > 0) && /* @__PURE__ */ a("div", {
+			className: s["text-area__header"],
+			children: [/* @__PURE__ */ a("span", {
+				className: s["text-area__label-wrapper"],
+				children: [c && /* @__PURE__ */ i("span", {
+					className: e(s["text-area__label"], { [s.required]: p }),
+					children: c
+				}), l && /* @__PURE__ */ i("span", {
+					className: s["text-area__sub-label"],
+					children: l
+				})]
+			}), u > 0 && /* @__PURE__ */ a("div", {
+				className: s["text-area__word-count"],
+				children: [
+					/* @__PURE__ */ i("span", {
+						className: e({ [s["text-area__word-count--alert"]]: g === u }),
+						children: g
+					}),
+					"\xA0/\xA0",
+					u
+				]
+			})]
+		}), /* @__PURE__ */ i("textarea", {
+			ref: h,
+			className: e(s["text-area"], {
+				[s["not-valid"]]: m,
+				[s["text-area--oneLine"]]: d
+			}),
+			maxLength: u > 0 ? u : void 0,
+			onInput: v,
+			defaultValue: f
+		})]
+	});
+}
+//#endregion
+export { c as t };
+
+//# sourceMappingURL=TextArea-DqKIpOfT.js.map

package/dist/TextArea-DqKIpOfT.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea-DqKIpOfT.js","names":[],"sources":["../src/components/TextArea/TextArea.module.css","../src/components/TextArea/TextArea.tsx"],"sourcesContent":[".text-area__wrapper {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.text-area__header {\n  align-items: flex-end;\n  display: flex;\n  justify-content: space-between;\n}\n\n.text-area__label-wrapper {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.text-area__label {\n  font-family: inherit;\n  font-size: inherit;\n  font-weight: var(--semibold);\n}\n\n.text-area__label.required::after {\n  color: var(--color-red-600);\n  content: \"\\2605\";\n  font-size: 0.5rem;\n  margin-left: 0.25rem;\n  vertical-align: top;\n}\n\n.text-area__sub-label {\n  color: var(--color-grey-700);\n  font-size: var(--font-size-text-non-essential);\n}\n\n.text-area__word-count {\n  color: var(--color-grey-600);\n  font-size: var(--font-size-text-non-essential);\n}\n\n.text-area__word-count--alert {\n  color: var(--color-red-600);\n  font-weight: bold;\n}\n\n.text-area {\n  border-radius: 0.5rem;\n  font-family: inherit;\n  font-size: inherit;\n  min-height: 5.25rem;\n  overflow: hidden;\n  padding: 0.5rem;\n  resize: none;\n  white-space: pre-wrap;\n  width: 100%;\n  word-wrap: break-word;\n}\n\n.text-area--oneLine {\n  max-height: 2.5rem;\n  min-height: 2.5rem;\n}\n\n.text-area.not-valid {\n  border-color: var(--color-red-600);\n}\n","import { useEffect, useRef, useState } from 'react';\nimport { clsx } from 'clsx';\n\nimport styles from './TextArea.module.css';\n\nexport interface TextAreaProps {\n  /** Returns entered values as trimmed string */\n  onChange: (value: string) => void;\n  /** The label for the text area */\n  label?: string;\n  /** Optional sub label for the text area */\n  subLabel?: string;\n  /** The max amount of allowed charecters in the text area */\n  maxCharacters?: number;\n  /** The max number of visible lines in the text area */\n  heightAsTextField?: boolean;\n  /** The default value for the text area */\n  defaultValue?: string;\n  /** `true` to show an asterisk to indicate an item is required; otherwise, `false`. */\n  required?: boolean;\n  /** `true` to color border red to show not valid; otherwise, `false`. */\n  notValid?: boolean;\n}\n\nexport function TextArea({\n  onChange,\n  label,\n  subLabel,\n  maxCharacters = 0,\n  heightAsTextField = false,\n  defaultValue = '',\n  required = false,\n  notValid = false,\n}: TextAreaProps) {\n  const textAreaRef = useRef<HTMLTextAreaElement>(null);\n  const [characterCount, setCharacterCount] = useState(defaultValue.length);\n\n  const handleInput = () => {\n    if (textAreaRef.current) {\n      textAreaRef.current.style.height = 'auto';\n      textAreaRef.current.style.height = `${textAreaRef.current.scrollHeight}px`;\n\n      setCharacterCount(textAreaRef.current.value.length);\n      onChange(textAreaRef.current.value.trim());\n    }\n  };\n\n  const autoResize = () => {\n    const el = textAreaRef.current;\n    if (!el) return;\n    el.style.height = 'auto';\n    el.style.height = `${el.scrollHeight}px`;\n  };\n\n  useEffect(() => {\n    if (!heightAsTextField) {\n      autoResize();\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  return (\n    <div className={styles['text-area__wrapper']}>\n      {(label || maxCharacters > 0) && (\n        <div className={styles['text-area__header']}>\n          <span className={styles['text-area__label-wrapper']}>\n            {label && (\n              <span className={clsx(styles['text-area__label'], { [styles['required']]: required })}>{label}</span>\n            )}\n            {subLabel && <span className={styles['text-area__sub-label']}>{subLabel}</span>}\n          </span>\n          {maxCharacters > 0 && (\n            <div className={styles['text-area__word-count']}>\n              <span className={clsx({ [styles['text-area__word-count--alert']]: characterCount === maxCharacters })}>\n                {characterCount}\n              </span>\n              &nbsp;/&nbsp;{maxCharacters}\n            </div>\n          )}\n        </div>\n      )}\n\n      <textarea\n        ref={textAreaRef}\n        className={clsx(styles['text-area'], {\n          [styles['not-valid']]: notValid,\n          [styles['text-area--oneLine']]: heightAsTextField,\n        })}\n        maxLength={maxCharacters > 0 ? maxCharacters : undefined}\n        onInput={handleInput}\n        defaultValue={defaultValue}\n      />\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;ACwBA,SAAgB,EAAS,EACvB,aACA,UACA,aACA,mBAAgB,GAChB,uBAAoB,IACpB,kBAAe,IACf,cAAW,IACX,cAAW,MACK;CAChB,IAAM,IAAc,EAA4B,KAAK,EAC/C,CAAC,GAAgB,KAAqB,EAAS,EAAa,OAAO,EAEnE,UAAoB;AACxB,EAAI,EAAY,YACd,EAAY,QAAQ,MAAM,SAAS,QACnC,EAAY,QAAQ,MAAM,SAAS,GAAG,EAAY,QAAQ,aAAa,KAEvE,EAAkB,EAAY,QAAQ,MAAM,OAAO,EACnD,EAAS,EAAY,QAAQ,MAAM,MAAM,CAAC;IAIxC,UAAmB;EACvB,IAAM,IAAK,EAAY;AAClB,QACL,EAAG,MAAM,SAAS,QAClB,EAAG,MAAM,SAAS,GAAG,EAAG,aAAa;;AAUvC,QAPA,QAAgB;AACd,EAAK,KACH,GAAY;IAGb,EAAE,CAAC,EAGJ,kBAAC,OAAD;EAAK,WAAW,EAAO;YAAvB,EACI,KAAS,IAAgB,MACzB,kBAAC,OAAD;GAAK,WAAW,EAAO;aAAvB,CACE,kBAAC,QAAD;IAAM,WAAW,EAAO;cAAxB,CACG,KACC,kBAAC,QAAD;KAAM,WAAW,EAAK,EAAO,qBAAqB,GAAG,EAAO,WAAc,GAAU,CAAC;eAAG;KAAa,CAAA,EAEtG,KAAY,kBAAC,QAAD;KAAM,WAAW,EAAO;eAA0B;KAAgB,CAAA,CAC1E;OACN,IAAgB,KACf,kBAAC,OAAD;IAAK,WAAW,EAAO;cAAvB;KACE,kBAAC,QAAD;MAAM,WAAW,EAAK,GAAG,EAAO,kCAAkC,MAAmB,GAAe,CAAC;gBAClG;MACI,CAAA;;KACO;KACV;MAEJ;MAGR,kBAAC,YAAD;GACE,KAAK;GACL,WAAW,EAAK,EAAO,cAAc;KAClC,EAAO,eAAe;KACtB,EAAO,wBAAwB;IACjC,CAAC;GACF,WAAW,IAAgB,IAAI,IAAgB,KAAA;GAC/C,SAAS;GACK;GACd,CAAA,CACE"}

package/dist/ToggleSwitch-C7z7JVtx.js

@@ -0,0 +1,51 @@
+import { t as e } from "./clsx-BD2qMUU1.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import './assets/ToggleSwitch.css';//#region src/components/ToggleSwitch/ToggleSwitch.module.css
+var r = {
+	"toggle-switch": "_toggle-switch_lh249_1",
+	"toggle-switch__visible": "_toggle-switch__visible_lh249_9",
+	"toggle-switch--disabled": "_toggle-switch--disabled_lh249_54",
+	"toggle-switch--loading": "_toggle-switch--loading_lh249_64",
+	"toggle-switch--visually-hidden": "_toggle-switch--visually-hidden_lh249_74",
+	"toggle-switch--disabled-label": "_toggle-switch--disabled-label_lh249_87",
+	"toggle-switch--loading-cursor": "_toggle-switch--loading-cursor_lh249_91",
+	"toggle-switch--extra-left-gap": "_toggle-switch--extra-left-gap_lh249_95"
+};
+//#endregion
+//#region src/components/ToggleSwitch/ToggleSwitch.tsx
+function i({ condition: e, wrapper: t, children: n }) {
+	return e ? t(n) : n;
+}
+function a({ label: a, labelPosition: o = "after", labelVisible: s = !0, loading: c = !1, extraLeftGap: l, ...u }) {
+	let d = /* @__PURE__ */ t("span", {
+		className: e({ [r["toggle-switch--visually-hidden"]]: !s }, { [r["toggle-switch--disabled-label"]]: u.disabled }),
+		children: a
+	});
+	return /* @__PURE__ */ t(i, {
+		condition: c,
+		wrapper: (e) => /* @__PURE__ */ t("div", {
+			className: r["toggle-switch--loading-cursor"],
+			children: e
+		}),
+		children: /* @__PURE__ */ n("label", {
+			className: e(r["toggle-switch"], { [r["toggle-switch--disabled"]]: u.disabled }, { [r["toggle-switch--loading"]]: c }, { [r["toggle-switch--extra-left-gap"]]: l }),
+			children: [
+				o === "before" && d,
+				/* @__PURE__ */ t("input", {
+					className: r["toggle-switch--visually-hidden"],
+					...u,
+					type: "checkbox"
+				}),
+				/* @__PURE__ */ t("span", {
+					className: r["toggle-switch__visible"],
+					title: s ? "" : a
+				}),
+				o === "after" && d
+			]
+		})
+	});
+}
+//#endregion
+export { a as t };
+
+//# sourceMappingURL=ToggleSwitch-C7z7JVtx.js.map

package/dist/ToggleSwitch-C7z7JVtx.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleSwitch-C7z7JVtx.js","names":[],"sources":["../src/components/ToggleSwitch/ToggleSwitch.module.css","../src/components/ToggleSwitch/ToggleSwitch.tsx"],"sourcesContent":[".toggle-switch {\n  align-items: center;\n  cursor: pointer;\n  display: inline-flex;\n  gap: 1ch;\n  user-select: none;\n}\n\n.toggle-switch__visible {\n  align-items: center;\n  background-color: var(--color-uva-white);\n  border: 1px solid var(--color-uva-black);\n  border-radius: 0.75rem;\n  box-shadow:\n    0 1px 1px hsla(0deg 0% 0% / 6%),\n    0 1px 2px hsl(0deg 0% 0% / 10%);\n  display: flex;\n  height: 1.5rem;\n  outline: 0.125rem dotted transparent;\n  outline-offset: 0.125rem;\n  padding: 0.25rem;\n  transition: background-color 150ms;\n  width: 3.125rem;\n}\n\n:focus-visible + .toggle-switch__visible {\n  outline-color: var(--color-navy-600);\n}\n\n:checked + .toggle-switch__visible {\n  background-color: var(--color-forest-600);\n}\n\n.toggle-switch__visible::before {\n  background-color: var(--color-grey-300);\n  border: 1px solid var(--color-uva-black);\n  border-radius: 0.75rem;\n  content: \"\";\n  display: inline-block;\n  height: 1rem;\n  min-width: 1rem;\n  transform: translateX(-0.1rem);\n  transition:\n    background-color 150ms,\n    transform 150ms,\n    width 150ms;\n}\n\n:checked + .toggle-switch__visible::before {\n  background-color: var(--color-uva-white);\n  transform: translateX(1.6rem);\n}\n\n.toggle-switch--disabled .toggle-switch__visible::before {\n  background-color: hsl(0deg 0% 0% / 10%);\n  border-color: hsl(0deg 0% 0% / 10%);\n}\n\n:checked:active + .toggle-switch__visible::before {\n  transform: translateX(1.25rem);\n}\n\n.toggle-switch--disabled,\n.toggle-switch--loading {\n  pointer-events: none;\n}\n\n.toggle-switch--disabled .toggle-switch__visible {\n  background-color: var(--color-grey-300);\n  border-color: hsl(0deg 0% 0% / 10%);\n  box-shadow: none;\n}\n\n.toggle-switch--visually-hidden {\n  border: 0;\n  clip: rect(0, 0, 0, 0);\n  clip-path: inset(50%);\n  height: 1px;\n  margin: 0 -1px -1px 0;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n.toggle-switch--disabled-label {\n  color: var(--color-grey-700);\n}\n\n.toggle-switch--loading-cursor {\n  cursor: wait;\n}\n\n.toggle-switch--extra-left-gap {\n  margin-left: 0.5rem;\n}\n","import classNames from 'clsx';\n\nimport type { InputHTMLAttributes, ReactNode } from 'react';\n\nimport styles from './ToggleSwitch.module.css';\n\nexport interface ToggleSwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'style' | 'className'> {\n  /** The label for the toggle switch. */\n  label: string;\n  /** Boolean value if label should be visible. */\n  labelVisible?: boolean;\n  /** Selection for label placement compared to toggle switch. */\n  labelPosition?: 'before' | 'after';\n  /** Boolean value to be used if the toggle mutates. If true the toggle is disabled in a loading state. */\n  loading?: boolean;\n  /** Boolean value if extra gap is needed on left of component. */\n  extraLeftGap?: boolean;\n}\n\nfunction ConditionalWrapper({\n  condition,\n  wrapper,\n  children,\n}: {\n  condition: boolean;\n  wrapper: (children: ReactNode) => ReactNode;\n  children: ReactNode;\n}) {\n  return condition ? wrapper(children) : children;\n}\n\n/** Represents a component for a toggle switch. */\nexport function ToggleSwitch({\n  label,\n  labelPosition = 'after',\n  labelVisible = true,\n  loading = false,\n  extraLeftGap,\n  ...restProps\n}: ToggleSwitchProps) {\n  const labelComponent = (\n    <span\n      className={classNames(\n        { [styles['toggle-switch--visually-hidden']]: !labelVisible },\n        { [styles['toggle-switch--disabled-label']]: restProps.disabled }\n      )}\n    >\n      {label}\n    </span>\n  );\n\n  return (\n    <ConditionalWrapper\n      condition={loading}\n      wrapper={(children) => <div className={styles['toggle-switch--loading-cursor']}>{children}</div>}\n    >\n      <label\n        className={classNames(\n          styles['toggle-switch'],\n          { [styles['toggle-switch--disabled']]: restProps.disabled },\n          { [styles['toggle-switch--loading']]: loading },\n          { [styles['toggle-switch--extra-left-gap']]: extraLeftGap }\n        )}\n      >\n        {labelPosition === 'before' && labelComponent}\n        <input className={styles['toggle-switch--visually-hidden']} {...restProps} type=\"checkbox\" />\n        <span className={styles['toggle-switch__visible']} title={!labelVisible ? label : ''} />\n        {labelPosition === 'after' && labelComponent}\n      </label>\n    </ConditionalWrapper>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;ACmBA,SAAS,EAAmB,EAC1B,cACA,YACA,eAKC;AACD,QAAO,IAAY,EAAQ,EAAS,GAAG;;AAIzC,SAAgB,EAAa,EAC3B,UACA,mBAAgB,SAChB,kBAAe,IACf,aAAU,IACV,iBACA,GAAG,KACiB;CACpB,IAAM,IACJ,kBAAC,QAAD;EACE,WAAW,EACT,GAAG,EAAO,oCAAoC,CAAC,GAAc,EAC7D,GAAG,EAAO,mCAAmC,EAAU,UAAU,CAClE;YAEA;EACI,CAAA;AAGT,QACE,kBAAC,GAAD;EACE,WAAW;EACX,UAAU,MAAa,kBAAC,OAAD;GAAK,WAAW,EAAO;GAAmC;GAAe,CAAA;YAEhG,kBAAC,SAAD;GACE,WAAW,EACT,EAAO,kBACP,GAAG,EAAO,6BAA6B,EAAU,UAAU,EAC3D,GAAG,EAAO,4BAA4B,GAAS,EAC/C,GAAG,EAAO,mCAAmC,GAAc,CAC5D;aANH;IAQG,MAAkB,YAAY;IAC/B,kBAAC,SAAD;KAAO,WAAW,EAAO;KAAmC,GAAI;KAAW,MAAK;KAAa,CAAA;IAC7F,kBAAC,QAAD;KAAM,WAAW,EAAO;KAA2B,OAAQ,IAAuB,KAAR;KAAc,CAAA;IACvF,MAAkB,WAAW;IACxB;;EACW,CAAA"}