@pie-lib/text-select 3.0.2 → 3.0.3-next.0

package/dist/index.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @synced-from pie-lib/packages/text-select/src/index.js
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+import Tokenizer from './tokenizer/index.js';
+import TokenSelect, { TokenTypes } from './token-select/index.js';
+import TextSelect from './text-select.js';
+import { Legend } from './legend.js';
+import Token from './token-select/token.js';
+import { prepareText } from './utils.js';
+export { TextSelect, TokenTypes, Tokenizer, TokenSelect, Token, prepareText, Legend };

package/dist/index.js

@@ -0,0 +1,7 @@
+import e from "./tokenizer/index.js";
+import t, { TokenTypes as n } from "./token-select/token.js";
+import r from "./token-select/index.js";
+import i from "./text-select.js";
+import { Legend as a } from "./legend.js";
+import { prepareText as o } from "./utils.js";
+export { a as Legend, i as TextSelect, t as Token, r as TokenSelect, n as TokenTypes, e as Tokenizer, o as prepareText };

package/dist/legend.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @synced-from pie-lib/packages/text-select/src/legend.js
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+import React from 'react';
+export declare const Legend: ({ language, showOnlyCorrect }: {
+    language: any;
+    showOnlyCorrect: any;
+}) => React.JSX.Element;

package/dist/legend.js

@@ -0,0 +1,64 @@
+import "react";
+import { styled as e } from "@mui/material/styles";
+import { color as t } from "@pie-lib/render-ui";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import i from "@mui/icons-material/Check";
+import a from "@mui/icons-material/Close";
+import o from "@pie-lib/translator";
+//#region src/legend.tsx
+var { translator: s } = o, c = e("div")(({ theme: e }) => ({
+	display: "flex",
+	flexDirection: "row",
+	alignItems: "center",
+	gap: e.spacing(2),
+	borderBottom: "1px solid lightgrey",
+	borderTop: "1px solid lightgrey",
+	paddingBottom: e.spacing(1),
+	paddingTop: e.spacing(1),
+	marginBottom: e.spacing(1)
+})), l = e("span")(({ theme: e }) => ({
+	fontSize: "14px",
+	fontWeight: "bold",
+	color: t.black(),
+	marginLeft: e.spacing(1)
+})), u = e("div")(() => ({
+	position: "relative",
+	padding: "4px",
+	fontSize: "14px",
+	borderRadius: "4px"
+})), d = e(u)(() => ({ border: `${t.correctTertiary()} solid 2px` })), f = e(u)(() => ({ border: `${t.incorrectWithIcon()} solid 2px` })), p = e(u)(() => ({ border: `${t.incorrectWithIcon()} dashed 2px` })), m = {
+	color: t.white(),
+	position: "absolute",
+	top: "-8px",
+	left: "-8px",
+	borderRadius: "50%",
+	fontSize: "12px",
+	padding: "2px"
+}, h = e(i)(() => ({
+	...m,
+	backgroundColor: t.correctTertiary()
+})), g = e(a)(() => ({
+	...m,
+	backgroundColor: t.incorrectWithIcon()
+})), _ = ({ language: e, showOnlyCorrect: t }) => {
+	let i = [
+		{
+			Icon: h,
+			label: s.t("selectText.correctAnswerSelected", { lng: e }),
+			Container: d
+		},
+		{
+			Icon: g,
+			label: s.t("selectText.incorrectSelection", { lng: e }),
+			Container: f
+		},
+		{
+			Icon: g,
+			label: s.t("selectText.correctAnswerNotSelected", { lng: e }),
+			Container: p
+		}
+	];
+	return t && i.splice(1, 2), /* @__PURE__ */ r(c, { children: [/* @__PURE__ */ n(l, { children: s.t("selectText.key", { lng: e }) }), i.map(({ Icon: e, label: t, Container: i }, a) => /* @__PURE__ */ r(i, { children: [/* @__PURE__ */ n(e, {}), /* @__PURE__ */ n("span", { children: t })] }, a))] });
+};
+//#endregion
+export { _ as Legend };

package/dist/text-select.d.ts

@@ -0,0 +1,34 @@
+/**
+ * @synced-from pie-lib/packages/text-select/src/text-select.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+/**
+ * Built on TokenSelect uses build.normalize to build the token set.
+ */
+export default class TextSelect extends React.Component {
+    static propTypes: {
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        disabled: PropTypes.Requireable<boolean>;
+        tokens: PropTypes.Validator<(PropTypes.InferProps<{
+            text: PropTypes.Requireable<string>;
+            selectable: PropTypes.Requireable<boolean>;
+        }> | null | undefined)[]>;
+        selectedTokens: PropTypes.Validator<(PropTypes.InferProps<{
+            text: PropTypes.Requireable<string>;
+            selectable: PropTypes.Requireable<boolean>;
+        }> | null | undefined)[]>;
+        text: PropTypes.Validator<string>;
+        className: PropTypes.Requireable<string>;
+        highlightChoices: PropTypes.Requireable<boolean>;
+        animationsDisabled: PropTypes.Requireable<boolean>;
+        maxNoOfSelections: PropTypes.Requireable<number>;
+    };
+    change: any;
+    render(): React.JSX.Element;
+}

package/dist/text-select.js

@@ -0,0 +1,53 @@
+import { normalize as e } from "./tokenizer/builder.js";
+import { TokenTypes as t } from "./token-select/token.js";
+import n from "./token-select/index.js";
+import r from "react";
+import i from "prop-types";
+import { jsx as a } from "react/jsx-runtime";
+import o from "debug";
+//#region src/text-select.tsx
+var s = o("@pie-lib:text-select"), c = class extends r.Component {
+	static propTypes = {
+		onChange: i.func,
+		disabled: i.bool,
+		tokens: i.arrayOf(i.shape(t)).isRequired,
+		selectedTokens: i.arrayOf(i.shape(t)).isRequired,
+		text: i.string.isRequired,
+		className: i.string,
+		highlightChoices: i.bool,
+		animationsDisabled: i.bool,
+		maxNoOfSelections: i.number
+	};
+	change = (e) => {
+		let { onChange: t } = this.props;
+		t && t(e.filter((e) => e.selected).map((e) => ({
+			start: e.start,
+			end: e.end
+		})));
+	};
+	render() {
+		let { text: t, disabled: r, tokens: i, selectedTokens: o, className: c, highlightChoices: l, maxNoOfSelections: u, animationsDisabled: d } = this.props, f = e(t, i);
+		s("normalized: ", f);
+		let p = f.map((e) => {
+			let t = o.findIndex((t) => t.start === e.start && t.end === e.end) !== -1, n = t ? e.correct : void 0, i = e.isMissing;
+			return {
+				...e,
+				selectable: !r && e.predefined,
+				selected: t,
+				correct: n,
+				isMissing: i
+			};
+		});
+		return /* @__PURE__ */ a(n, {
+			highlightChoices: !r && l,
+			className: c,
+			tokens: p,
+			disabled: r,
+			onChange: this.change,
+			maxNoOfSelections: u,
+			animationsDisabled: d
+		});
+	}
+};
+//#endregion
+export { c as default };

package/dist/token-select/index.d.ts

@@ -0,0 +1,44 @@
+/**
+ * @synced-from pie-lib/packages/text-select/src/token-select/index.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { TokenTypes } from './token.js';
+export declare class TokenSelect extends React.Component {
+    static propTypes: {
+        tokens: PropTypes.Validator<(PropTypes.InferProps<{
+            text: PropTypes.Requireable<string>;
+            selectable: PropTypes.Requireable<boolean>;
+        }> | null | undefined)[]>;
+        className: PropTypes.Requireable<string>;
+        onChange: PropTypes.Validator<(...args: any[]) => any>;
+        disabled: PropTypes.Requireable<boolean>;
+        highlightChoices: PropTypes.Requireable<boolean>;
+        animationsDisabled: PropTypes.Requireable<boolean>;
+        maxNoOfSelections: PropTypes.Requireable<number>;
+    };
+    static defaultProps: {
+        highlightChoices: boolean;
+        maxNoOfSelections: number;
+        tokens: never[];
+    };
+    selectedCount: () => any;
+    canSelectMore: any;
+    toggleToken: any;
+    /**
+     * Build an HTML string so that non-selectable token text (which may contain arbitrary or even
+     * *partial* HTML — e.g. just an opening <table><tbody><tr><td> in one token and the matching
+     * closing tags in another) is preserved exactly as-is.  Selectable Token components are
+     * serialised via renderToString; their Emotion class names are stable hashes so they match the
+     * CSS that the HiddenCssPrimer forces Emotion to inject into the document.
+     */
+    generateTokensInHtml: any;
+    render(): React.JSX.Element;
+}
+export default TokenSelect;
+export { TokenTypes };

package/dist/token-select/index.js

@@ -0,0 +1,170 @@
+import e, { TokenTypes as t } from "./token.js";
+import n from "react";
+import r from "prop-types";
+import { styled as i } from "@mui/material/styles";
+import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
+import { clone as c, isEqual as l } from "lodash-es";
+import { noSelect as u } from "@pie-lib/style-utils";
+import d from "debug";
+import { renderToString as f } from "react-dom/server";
+//#region src/token-select/index.tsx
+var p = d("@pie-lib:text-select:token-select"), m = i("div")(() => ({
+	backgroundColor: "none",
+	whiteSpace: "pre",
+	...u(),
+	"& p": { whiteSpace: "break-spaces" }
+})), h = i("div")(() => ({
+	display: "none",
+	position: "absolute",
+	visibility: "hidden",
+	pointerEvents: "none"
+})), g = (e = "") => e.replace(/&nbsp;/gi, "\xA0"), _ = (e = "") => g(e).replace(/<\/p>\s*<p[^>]*>/gi, "\n\n").replace(/<br\s*\/?>/gi, "\n").replace(/<\/?(table|tbody|tr|td|p)[^>]*>/gi, ""), v = class extends n.Component {
+	static propTypes = {
+		tokens: r.arrayOf(r.shape(t)).isRequired,
+		className: r.string,
+		onChange: r.func.isRequired,
+		disabled: r.bool,
+		highlightChoices: r.bool,
+		animationsDisabled: r.bool,
+		maxNoOfSelections: r.number
+	};
+	static defaultProps = {
+		highlightChoices: !1,
+		maxNoOfSelections: 0,
+		tokens: []
+	};
+	selectedCount = () => this.props.tokens.filter((e) => e.selected).length;
+	canSelectMore = (e) => {
+		let { maxNoOfSelections: t } = this.props;
+		return t === 1 ? !0 : (p("[canSelectMore] maxNoOfSelections: ", t, "selectedCount: ", e), t <= 0 || isFinite(t) && e < t);
+	};
+	toggleToken = (t) => {
+		let { target: n } = t, { tokens: r, animationsDisabled: i } = this.props, a = c(r), o = (n.closest?.(`.${e.rootClassName}`))?.dataset?.indexkey, s = o === void 0 ? void 0 : a[o];
+		if (s && s.correct === void 0 && !i && !s.isMissing) {
+			let { onChange: e, maxNoOfSelections: t } = this.props, n = !s.selected;
+			if (t === 1 && this.selectedCount() === 1) {
+				let t = (r || []).filter((e) => e.selected), i = a.map((e) => l(e, t[0]) ? {
+					...e,
+					selected: !1
+				} : {
+					...e,
+					selectable: !0
+				}), c = {
+					...s,
+					selected: n
+				};
+				i.splice(o, 1, c), e(i);
+			} else {
+				if (n && t > 0 && this.selectedCount() >= t) {
+					p("skip toggle max reached");
+					return;
+				}
+				let r = {
+					...s,
+					selected: n
+				};
+				a.splice(o, 1, r), e(a);
+			}
+		}
+	};
+	generateTokensInHtml = () => {
+		let { tokens: t, disabled: n, highlightChoices: r, animationsDisabled: i } = this.props, a = this.selectedCount();
+		return (t || []).reduce((t, s, c) => {
+			let l = s.selected || s.selectable && this.canSelectMore(a), u = s.correct !== void 0 && (s.selectable || s.selected);
+			return s.text === "\n\n" ? `${t}</p><p>` : s.text === "\n" ? `${t}<br>` : l && !n || u || s.selected || s.isMissing || i && s.predefined ? t + f(/* @__PURE__ */ o(e, {
+				disabled: n,
+				index: c,
+				...s,
+				text: _(s.text),
+				selectable: l,
+				highlight: r,
+				animationsDisabled: i
+			}, c)) : t + g(s.text);
+		}, "<p>") + "</p>";
+	};
+	render() {
+		let { className: t } = this.props, n = this.generateTokensInHtml();
+		return /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ s(h, {
+			"aria-hidden": "true",
+			children: [
+				/* @__PURE__ */ o(e, {
+					text: " ",
+					index: -1,
+					selectable: !0,
+					disabled: !1,
+					highlight: !1,
+					animationsDisabled: !1
+				}),
+				/* @__PURE__ */ o(e, {
+					text: " ",
+					index: -1,
+					selectable: !0,
+					disabled: !1,
+					highlight: !0,
+					animationsDisabled: !1
+				}),
+				/* @__PURE__ */ o(e, {
+					text: " ",
+					index: -1,
+					selectable: !0,
+					selected: !0,
+					disabled: !1,
+					highlight: !1,
+					animationsDisabled: !1
+				}),
+				/* @__PURE__ */ o(e, {
+					text: " ",
+					index: -1,
+					selectable: !0,
+					selected: !0,
+					disabled: !0,
+					highlight: !1,
+					animationsDisabled: !1
+				}),
+				/* @__PURE__ */ o(e, {
+					text: " ",
+					index: -1,
+					selectable: !0,
+					disabled: !1,
+					highlight: !1,
+					animationsDisabled: !0,
+					predefined: !0
+				}),
+				/* @__PURE__ */ o(e, {
+					text: " ",
+					index: -1,
+					selectable: !0,
+					selected: !0,
+					correct: !0,
+					disabled: !1,
+					highlight: !1,
+					animationsDisabled: !1
+				}),
+				/* @__PURE__ */ o(e, {
+					text: " ",
+					index: -1,
+					selectable: !0,
+					selected: !0,
+					correct: !1,
+					disabled: !1,
+					highlight: !1,
+					animationsDisabled: !1
+				}),
+				/* @__PURE__ */ o(e, {
+					text: " ",
+					index: -1,
+					isMissing: !0,
+					disabled: !1,
+					highlight: !1,
+					animationsDisabled: !1
+				})
+			]
+		}), /* @__PURE__ */ o(m, {
+			className: t,
+			onClick: this.toggleToken,
+			dangerouslySetInnerHTML: { __html: n }
+		})] });
+	}
+};
+//#endregion
+export { v as default };

package/dist/token-select/token.d.ts

@@ -0,0 +1,32 @@
+/**
+ * @synced-from pie-lib/packages/text-select/src/token-select/token.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+export declare const TokenTypes: {
+    text: PropTypes.Requireable<string>;
+    selectable: PropTypes.Requireable<boolean>;
+};
+export declare class Token extends React.Component {
+    static rootClassName: string;
+    static propTypes: {
+        text: PropTypes.Validator<string>;
+        className: PropTypes.Requireable<string>;
+        disabled: PropTypes.Requireable<boolean>;
+        highlight: PropTypes.Requireable<boolean>;
+        correct: PropTypes.Requireable<boolean>;
+        selectable: PropTypes.Requireable<boolean>;
+    };
+    static defaultProps: {
+        selectable: boolean;
+        text: string;
+    };
+    getClassAndIconConfig: any;
+    render(): React.JSX.Element;
+}
+export default Token;

package/dist/token-select/token.js

@@ -0,0 +1,134 @@
+import e from "react";
+import t from "prop-types";
+import { styled as n } from "@mui/material/styles";
+import { color as r } from "@pie-lib/render-ui";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import o from "classnames";
+import s from "@mui/icons-material/Check";
+import c from "@mui/icons-material/Close";
+//#region src/token-select/token.tsx
+var l = 3.2, u = 3.4, d = 2, f = n("span")(({ theme: e }) => ({
+	cursor: "pointer",
+	textIndent: 0,
+	"&.disabled": {
+		cursor: "inherit",
+		color: r.disabled()
+	},
+	"&.disabledBlack": {
+		cursor: "inherit",
+		pointerEvents: "none"
+	},
+	"&.disabledAndSelected": { backgroundColor: r.blueGrey100() },
+	[`@media (min-width: ${e.breakpoints.values.md}px)`]: { "&.selectable:hover": {
+		backgroundColor: r.blueGrey300(),
+		color: e.palette.common.black,
+		"& > *": { backgroundColor: r.blueGrey300() }
+	} },
+	"&.selected": {
+		backgroundColor: r.blueGrey100(),
+		color: e.palette.common.black,
+		lineHeight: `${parseFloat(e.spacing(1)) * l}px`,
+		border: `solid 2px ${r.blueGrey900()}`,
+		borderRadius: "4px",
+		"& > *": { backgroundColor: r.blueGrey100() }
+	},
+	"&.highlight": {
+		border: `dashed 2px ${r.blueGrey600()}`,
+		borderRadius: "4px",
+		lineHeight: `${parseFloat(e.spacing(1)) * l}px`
+	},
+	"&.print": {
+		border: `dashed 2px ${r.blueGrey600()}`,
+		borderRadius: "4px",
+		lineHeight: `${parseFloat(e.spacing(1)) * l}px`,
+		color: r.text()
+	},
+	"&.custom": { display: "initial" }
+})), p = n("span")(({ theme: e }) => ({
+	position: "relative",
+	borderRadius: "4px",
+	color: e.palette.common.black,
+	lineHeight: `${parseFloat(e.spacing(1)) * u + d}px`,
+	padding: `${d}px`
+})), m = n(p)(() => ({ border: `${r.correctTertiary()} solid 2px` })), h = n(p)(() => ({ border: `${r.incorrectWithIcon()} solid 2px` })), g = n(p)(() => ({ border: `${r.incorrectWithIcon()} dashed 2px` })), _ = {
+	color: r.white(),
+	position: "absolute",
+	top: "-8px",
+	left: "-8px",
+	borderRadius: "50%",
+	fontSize: "12px",
+	padding: "2px",
+	display: "inline-block"
+}, v = n(s)(() => ({
+	..._,
+	backgroundColor: r.correctTertiary()
+})), y = n(c)(() => ({
+	..._,
+	backgroundColor: r.incorrectWithIcon()
+})), b = ({ useWrapper: e, children: t, Container: n, Icon: r }) => e ? /* @__PURE__ */ a(n, { children: [t, r ? /* @__PURE__ */ i(r, {}) : null] }) : t;
+b.propTypes = {
+	useWrapper: t.bool,
+	Container: t.elementType,
+	Icon: t.elementType,
+	children: t.node
+};
+var x = {
+	text: t.string,
+	selectable: t.bool
+}, S = class n extends e.Component {
+	static rootClassName = "tokenRootClass";
+	static propTypes = {
+		...x,
+		text: t.string.isRequired,
+		className: t.string,
+		disabled: t.bool,
+		highlight: t.bool,
+		correct: t.bool
+	};
+	static defaultProps = {
+		selectable: !1,
+		text: ""
+	};
+	getClassAndIconConfig = () => {
+		let { selectable: e, selected: t, className: r, disabled: i, highlight: a, correct: s, animationsDisabled: c, isMissing: l } = this.props, u = "ontouchstart" in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0, d = n.rootClassName;
+		if (s === void 0 && t && i) return {
+			className: o(d, "selected", "disabledBlack", r),
+			Component: f
+		};
+		if (s !== void 0) {
+			let e = s === !0;
+			return {
+				className: o(d, "custom", r),
+				Component: f,
+				Container: e ? m : h,
+				Icon: e ? v : y
+			};
+		}
+		return l ? {
+			className: o(d, "custom", "missing", r),
+			Component: f,
+			Container: g,
+			Icon: y
+		} : {
+			className: o(d, i && "disabled", e && !i && !u && "selectable", t && !i && "selected", t && i && "disabledAndSelected", a && e && !i && !t && "highlight", c && "print", r),
+			Component: f,
+			Container: void 0,
+			Icon: void 0
+		};
+	};
+	render() {
+		let { text: e, index: t, correct: n, isMissing: r } = this.props, { className: a, Component: o, Container: s, Icon: c } = this.getClassAndIconConfig();
+		return /* @__PURE__ */ i(b, {
+			useWrapper: n !== void 0 || r,
+			Container: s,
+			Icon: c,
+			children: /* @__PURE__ */ i(o || f, {
+				className: a,
+				dangerouslySetInnerHTML: { __html: (e || "").replace(/\n/g, "<br>") },
+				"data-indexkey": t
+			})
+		});
+	}
+};
+//#endregion
+export { x as TokenTypes, S as default };

package/dist/tokenizer/builder.d.ts

@@ -0,0 +1,27 @@
+/**
+ * @synced-from pie-lib/packages/text-select/src/tokenizer/builder.js
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+export declare const paragraphs: (text: any) => any;
+export declare const handleSentence: (child: any, acc: any) => any;
+export declare const sentences: (text: any) => any;
+export declare const words: (text: any) => any;
+declare class Intersection {
+    constructor(results: any);
+    get hasOverlap(): boolean;
+    get surroundedTokens(): any;
+}
+/**
+ * get intersection info for the selection in relation to tokens.
+ * @param {{start: number, end: number}} selection
+ * @param {{start: number, end: number}[]} tokens
+ * @return {tokens: [], type: 'overlap|no-overlap|contains'}
+ */
+export declare const intersection: (selection: any, tokens: any) => Intersection;
+export declare const sort: (tokens: any) => any;
+export declare const normalize: (textToNormalize: any, tokens: any) => any;
+export {};