xmlui 0.7.13 → 0.7.15

package/dist/scripts/src/components/Text/Text.js

@@ -0,0 +1,122 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.textComponentRenderer = exports.TextMd = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Text_module_scss_1 = __importDefault(require("./Text.module.scss"));
+const ComponentDefs_1 = require("@abstractions/ComponentDefs");
+const renderers_1 = require("@components-core/renderers");
+const themeVars_1 = require("@components-core/theming/themeVars");
+const TextNative_1 = require("./TextNative");
+const COMP = "Text";
+exports.TextMd = (0, ComponentDefs_1.createMetadata)({
+    description: `The \`${COMP}\` component displays textual information in a number of optional ` +
+        `styles and variants.`,
+    props: {
+        value: (0, ComponentDefs_1.d)(`The text to be displayed. This value can also be set via nesting the text into ` +
+            `the \`${COMP}\` component.`),
+        variant: (0, ComponentDefs_1.d)(`Optional string value that provides named presets for text variants with a ` +
+            `unique combination of font style, weight, size, color and other parameters.`, TextNative_1.variantOptionsMd),
+        maxLines: (0, ComponentDefs_1.d)(`This property determines the maximum number of lines the component can wrap to. ` +
+            `If there is no space to display all the contents, the component displays up to ` +
+            `as many lines as specified in this property.`),
+        preserveLinebreaks: (0, ComponentDefs_1.d)(`This property indicates if linebreaks should be preserved when displaying text.`),
+        ellipses: (0, ComponentDefs_1.d)(`This property indicates whether ellipses should be displayed when the text is ` +
+            `cropped (\`true\`) or not (\`false\`).`),
+    },
+    themeVars: (0, themeVars_1.parseScssVar)(Text_module_scss_1.default.themeVars),
+    defaultThemeVars: {
+        [`border-radius-${COMP}`]: "$radius",
+        [`style-border-${COMP}`]: "solid",
+        [`font-size-${COMP}`]: "$font-size-small",
+        [`thickness-border-${COMP}`]: "$space-0",
+        [`font-weight-${COMP}-abbr`]: "$font-weight-bold",
+        [`transform-${COMP}-abbr`]: "uppercase",
+        [`font-size-${COMP}-secondary`]: "$font-size-small",
+        [`font-style-${COMP}-cite`]: "italic",
+        [`color-${COMP}`]: "$color-text-primary",
+        [`font-family-${COMP}`]: "$font-family",
+        [`font-weight-${COMP}`]: "$font-weight-normal",
+        [`font-family-${COMP}-code`]: "$font-family-monospace",
+        [`font-size-${COMP}-code`]: "$font-size-small",
+        [`thickness-border-${COMP}-code`]: "1px",
+        [`padding-horizontal-${COMP}-code`]: "$space-1",
+        [`line-decoration-${COMP}-deleted`]: "line-through",
+        [`line-decoration-${COMP}-inserted`]: "underline",
+        [`font-family-${COMP}-keyboard`]: "$font-family-monospace",
+        [`font-size-${COMP}-keyboard`]: "$font-size-small",
+        [`font-weight-${COMP}-keyboard`]: "$font-weight-bold",
+        [`thickness-border-${COMP}-keyboard`]: "1px",
+        [`padding-horizontal-${COMP}-keyboard`]: "$space-1",
+        [`font-family-${COMP}-sample`]: "$font-family-monospace",
+        [`font-size-${COMP}-sample`]: "$font-size-small",
+        [`font-size-${COMP}-sup`]: "$font-size-smaller",
+        [`align-vertical-${COMP}-sup`]: "super",
+        [`font-size-${COMP}-sub`]: "$font-size-smaller",
+        [`align-vertical-${COMP}-sub`]: "sub",
+        [`font-style-${COMP}-var`]: "italic",
+        [`font-family-${COMP}-mono`]: "$font-family-monospace",
+        [`font-size-${COMP}-title`]: "$font-size-large",
+        [`font-size-${COMP}-subtitle`]: "$font-size-medium",
+        [`font-size-${COMP}-small`]: "$font-size-small",
+        [`line-height-${COMP}-small`]: "$line-height-tight",
+        [`letter-spacing-${COMP}-caption`]: "0.05rem",
+        [`font-size-${COMP}-placeholder`]: "$font-size-small",
+        [`font-family-${COMP}-codefence`]: "$font-family-monospace",
+        [`padding-horizontal-${COMP}-codefence`]: "$space-3",
+        [`padding-vertical-${COMP}-codefence`]: "$space-2",
+        [`padding-vertical-${COMP}-paragraph`]: "$space-1",
+        [`font-size-${COMP}-subheading`]: "$font-size-H6",
+        [`font-weight-${COMP}-subheading`]: "$font-weight-bold",
+        [`letter-spacing-${COMP}-subheading`]: "0.04em",
+        [`transform-${COMP}-subheading`]: "uppercase",
+        [`margin-top-${COMP}-tableheading`]: "$space-1",
+        [`margin-bottom-${COMP}-tableheading`]: "$space-4",
+        [`padding-horizontal-${COMP}-tableheading`]: "$space-1",
+        [`font-weight-${COMP}-tableheading`]: "$font-weight-bold",
+        light: {
+            [`color-bg-${COMP}-code`]: "$color-surface-100",
+            [`color-border-${COMP}-code`]: "$color-surface-200",
+            [`color-bg-${COMP}-keyboard`]: "$color-surface-200",
+            [`color-border-${COMP}-keyboard`]: "$color-surface-300",
+            [`color-bg-${COMP}-marked`]: "yellow",
+            [`color-${COMP}-placeholder`]: "$color-surface-500",
+            [`color-bg-${COMP}-codefence`]: "$color-primary-100",
+            [`color-${COMP}-codefence`]: "$color-surface-900",
+            [`color-${COMP}-subheading`]: "$color-text-secondary",
+            [`color-${COMP}-secondary`]: "$color-text-secondary",
+        },
+        dark: {
+            [`color-bg-${COMP}-code`]: "$color-surface-800",
+            [`color-border-${COMP}-code`]: "$color-surface-700",
+            [`color-bg-${COMP}-keyboard`]: "$color-surface-800",
+            [`color-border-${COMP}-keyboard`]: "$color-surface-700",
+            [`color-bg-${COMP}-marked`]: "orange",
+            [`color-${COMP}-placeholder`]: "$color-surface-500",
+            [`color-bg-${COMP}-codefence`]: "$color-primary-800",
+            [`color-${COMP}-codefence`]: "$color-surface-200",
+            [`color-${COMP}-subheading`]: "$color-text-secondary",
+            [`color-${COMP}-secondary`]: "$color-text-secondary",
+        },
+    },
+});
+exports.textComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.TextMd, ({ node, extractValue, layoutCss, renderChild }) => {
+    const _a = node.props, { variant, maxLines, preserveLinebreaks, ellipses, value } = _a, variantSpecific = __rest(_a, ["variant", "maxLines", "preserveLinebreaks", "ellipses", "value"]);
+    const variantSpecificProps = Object.fromEntries(Object.entries(variantSpecific)
+        .filter(([key, _]) => TextNative_1.VariantPropsKeys.includes(key))
+        .map(([key, value]) => [key, extractValue(value)]));
+    return ((0, jsx_runtime_1.jsx)(TextNative_1.Text, Object.assign({ variant: extractValue(variant), maxLines: extractValue.asOptionalNumber(maxLines), style: layoutCss, preserveLinebreaks: extractValue.asOptionalBoolean(preserveLinebreaks, false), ellipses: extractValue.asOptionalBoolean(ellipses, true) }, variantSpecificProps, { children: extractValue.asDisplayText(value) || renderChild(node.children) })));
+});

package/dist/scripts/src/components/Text/TextNative.js

@@ -0,0 +1,124 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Text = exports.VariantPropsKeys = exports.variantOptionsMd = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("react");
+const Text_module_scss_1 = __importDefault(require("./Text.module.scss"));
+const classnames_1 = __importDefault(require("@components-core/utils/classnames"));
+const css_utils_1 = require("@components-core/utils/css-utils");
+const react_compose_refs_1 = require("@radix-ui/react-compose-refs");
+const TextVariantKeys = [
+    "abbr", // use <abbr>
+    "cite", // use <cite>
+    "code", // use <code>
+    "codefence", // use uniquely styled <![CDATA[
+    "deleted", // use <del>
+    "inserted", // use <ins>
+    "keyboard", // use <kbd>,
+    "marked", // use <mark>
+    "sample", // use <samp>
+    "sub", // use <sub>
+    "sup", // use <sup>
+    "var", // use <var>
+    "strong", // use <strong> element for content that is of greater importance (used in Markdown)
+    "em", // use <em> element changes the meaning of a sentence - as spoken emphasis does (used in Markdown)
+    "mono", // use monospace font with <![CDATA[
+    "title", // Title text in the particular context
+    "subtitle", // Subtitle text in the particular context
+    "small", // Small text in the particular context
+    "caption", // Caption text in the particular context
+    "placeholder", // Placeholder text in the particular context
+    "paragraph", // use <p>
+    "subheading", // use a H6 with some specific defaults
+    "tableheading", // use a H3 with some specific defaults
+    "secondary", // use a secondary text style
+];
+const TextVariantElement = {
+    abbr: "abbr",
+    cite: "cite",
+    code: "code",
+    codefence: "pre",
+    deleted: "del",
+    inserted: "ins",
+    keyboard: "kbd",
+    marked: "mark",
+    sample: "samp",
+    sub: "sub",
+    sup: "sup",
+    var: "var",
+    mono: "pre",
+    strong: "strong",
+    em: "em",
+    title: "span",
+    subtitle: "span",
+    small: "span",
+    caption: "span",
+    placeholder: "span",
+    paragraph: "p",
+    subheading: "h6",
+    tableheading: "h6",
+    secondary: "span",
+};
+exports.variantOptionsMd = [
+    { value: "abbr", description: "Represents an abbreviation or acronym" },
+    { value: "caption", description: "Represents the caption (or title) of a table" },
+    { value: "cite", description: "Is used to mark up the title of a cited work" },
+    { value: "code", description: "Represents a line of code" },
+    { value: "codefence", description: "Handles the display of code blocks if combined with a `code` variant" },
+    { value: "deleted", description: "Represents text that has been deleted" },
+    { value: "em", description: "Marks text to stress emphasis" },
+    { value: "inserted", description: "Represents a range of text that has been added to a document" },
+    { value: "keyboard", description: "Represents a span of text denoting textual user input from a keyboard or voice input" },
+    { value: "marked", description: "Represents text which is marked or highlighted for reference or notation" },
+    { value: "mono", description: "Text using a mono style font family" },
+    { value: "paragraph", description: "Represents a paragraph" },
+    { value: "placeholder", description: "Text that is mostly used as the placeholder style in input controls" },
+    { value: "sample", description: "Represents sample (or quoted) output from a computer program" },
+    { value: "secondary", description: "Represents a bit dimmed secondary text" },
+    { value: "small", description: "Represents side-comments and small print" },
+    { value: "sub", description: "Specifies inline text as subscript" },
+    { value: "strong", description: "Contents have strong importance" },
+    { value: "subheading", description: "Indicates that the text is the subtitle in a heading" },
+    { value: "subtitle", description: "Indicates that the text is the subtitle of some other content" },
+    { value: "sup", description: "Specifies inline text as superscript" },
+    { value: "tableheading", description: "Indicates that the text is a table heading" },
+    { value: "title", description: "Indicates that the text is the title of some other content" },
+    { value: "var", description: "Represents the name of a variable in a mathematical expression" },
+];
+const AbbreviationKeys = ["title"];
+const InsertedKeys = ["cite", "dateTime"];
+exports.VariantPropsKeys = [...AbbreviationKeys, ...InsertedKeys];
+exports.Text = (0, react_1.forwardRef)(function Text(_a, forwardedRef) {
+    var { uid, variant, maxLines = 0, style, children, preserveLinebreaks, ellipses = true } = _a, variantSpecificProps = __rest(_a, ["uid", "variant", "maxLines", "style", "children", "preserveLinebreaks", "ellipses"]);
+    const innerRef = (0, react_2.useRef)(null);
+    const ref = forwardedRef ? (0, react_compose_refs_1.composeRefs)(innerRef, forwardedRef) : innerRef;
+    const Element = (0, react_2.useMemo)(() => {
+        if (!variant || !TextVariantElement[variant])
+            return "div"; //todo illesg, could be a span?
+        return TextVariantElement[variant];
+    }, [variant]);
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(Element, Object.assign({}, variantSpecificProps, { ref: ref, className: (0, classnames_1.default)([
+                Text_module_scss_1.default.text,
+                Text_module_scss_1.default[variant || "default"],
+                {
+                    [Text_module_scss_1.default.truncateOverflow]: maxLines > 0,
+                    [Text_module_scss_1.default.preserveLinebreaks]: preserveLinebreaks,
+                    [Text_module_scss_1.default.noEllipsis]: !ellipses,
+                },
+            ]), style: Object.assign(Object.assign({}, style), (0, css_utils_1.getMaxLinesStyle)(maxLines)), children: children })) }));
+});

package/dist/scripts/src/components/TextArea/TextArea.js

@@ -0,0 +1,65 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.textAreaComponentRenderer = exports.TextAreaMd = exports.resizeOptionsMd = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const TextArea_module_scss_1 = __importDefault(require("./TextArea.module.scss"));
+const renderers_1 = require("@components-core/renderers");
+const themeVars_1 = require("@components-core/theming/themeVars");
+const ComponentDefs_1 = require("@abstractions/ComponentDefs");
+const TextAreaNative_1 = require("./TextAreaNative");
+const metadata_helpers_1 = require("@components/metadata-helpers");
+const COMP = "TextArea";
+exports.resizeOptionsMd = [
+    { value: "undefined", description: "No resizing" },
+    { value: "horizontal", description: "Can only resize horizontally" },
+    { value: "vertical", description: "Can only resize vertically" },
+    { value: "both", description: "Can resize in both dimensions" },
+];
+exports.TextAreaMd = (0, ComponentDefs_1.createMetadata)({
+    status: "experimental",
+    description: `\`${COMP}\` is a component that provides a multiline text input area.`,
+    props: {
+        enterSubmits: (0, ComponentDefs_1.d)(`This optional boolean property indicates whether pressing the \`Enter\` key on the ` +
+            `keyboard prompts the parent \`Form\` component to submit. The default value is is \`true\`.`),
+        escResets: (0, ComponentDefs_1.d)(`This boolean property indicates whether the ${COMP} contents should be reset when pressing ` +
+            `the ESC key.`),
+        maxRows: (0, ComponentDefs_1.d)(`This optional number property maximizes the number of lines the \`${COMP}\` can grow to.`),
+        minRows: (0, ComponentDefs_1.d)(`This optional number property indicates the minimum number of lines the \`${COMP}\` ` +
+            `has and specifies its size accordingly.`),
+        rows: (0, ComponentDefs_1.d)(`Specifies the number of lines or rows (and thus, its size) the component has.`),
+        autoSize: (0, ComponentDefs_1.d)(`If set to \`true\`, this boolean property enables the \`${COMP}\` to resize ` +
+            `automatically based on the number of lines inside it.`, null, "boolean", false),
+        placeholder: (0, metadata_helpers_1.dPlaceholder)(),
+        initialValue: (0, metadata_helpers_1.dInitialValue)(),
+        label: (0, metadata_helpers_1.dLabel)(),
+        labelPosition: (0, metadata_helpers_1.dLabelPosition)("top"),
+        labelWidth: (0, metadata_helpers_1.dLabelWidth)(COMP),
+        labelBreak: (0, metadata_helpers_1.dLabelBreak)(COMP),
+        maxLength: (0, metadata_helpers_1.dMaxLength)(),
+        autoFocus: (0, metadata_helpers_1.dAutoFocus)(),
+        required: (0, metadata_helpers_1.dRequired)(),
+        readOnly: (0, metadata_helpers_1.dReadonly)(),
+        enabled: (0, metadata_helpers_1.dEnabled)(),
+        validationStatus: (0, metadata_helpers_1.dValidationStatus)(),
+        resize: (0, ComponentDefs_1.d)(`This optional property specifies in which dimensions can the \`TextArea\` ` +
+            `be resized by the user.`, exports.resizeOptionsMd),
+    },
+    events: {
+        gotFocus: (0, metadata_helpers_1.dGotFocus)(COMP),
+        lostFocus: (0, metadata_helpers_1.dLostFocus)(COMP),
+        didChange: (0, metadata_helpers_1.dDidChange)(COMP),
+    },
+    apis: {
+        focus: (0, metadata_helpers_1.dFocus)(COMP),
+        value: (0, ComponentDefs_1.d)(`You can query the component's value. If no value is set, it will retrieve \`undefined\`.`),
+        setValue: (0, metadata_helpers_1.dSetValueApi)(),
+    },
+    themeVars: (0, themeVars_1.parseScssVar)(TextArea_module_scss_1.default.themeVars),
+});
+exports.textAreaComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.TextAreaMd, ({ node, extractValue, state, updateState, layoutCss, registerComponentApi, lookupEventHandler, }) => {
+    const initialValue = extractValue(node.props.initialValue);
+    return ((0, jsx_runtime_1.jsx)(TextAreaNative_1.TextArea, { value: state === null || state === void 0 ? void 0 : state.value, initialValue: initialValue, updateState: updateState, autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus), enabled: extractValue.asOptionalBoolean(node.props.enabled), placeholder: extractValue(node.props.placeholder), onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), readOnly: extractValue.asOptionalBoolean(node.props.readOnly), resize: node.props.resize, enterSubmits: extractValue.asOptionalBoolean(node.props.enterSubmits), escResets: extractValue.asOptionalBoolean(node.props.escResets), style: layoutCss, registerComponentApi: registerComponentApi, maxRows: extractValue.asOptionalNumber(node.props.maxRows), minRows: extractValue.asOptionalNumber(node.props.minRows), maxLength: extractValue.asOptionalNumber(node.props.maxLength), rows: extractValue.asOptionalNumber(node.props.rows), autoSize: extractValue.asOptionalBoolean(node.props.autoSize), validationStatus: extractValue(node.props.validationStatus), label: extractValue(node.props.label), labelPosition: extractValue(node.props.labelPosition), labelWidth: extractValue(node.props.labelWidth), labelBreak: extractValue.asOptionalBoolean(node.props.labelBreak), required: extractValue.asOptionalBoolean(node.props.required) }, `${node.uid}-${initialValue}`));
+});

package/dist/scripts/src/components/TextArea/TextAreaNative.js

@@ -0,0 +1,176 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextArea = exports.resizeOptionKeys = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const TextArea_module_scss_1 = __importDefault(require("./TextArea.module.scss"));
+const classnames_1 = __importDefault(require("@components-core/utils/classnames"));
+const constants_1 = require("@components-core/constants");
+const TextAreaResizable_1 = __importDefault(require("./TextAreaResizable"));
+const react_textarea_autosize_1 = __importDefault(require("react-textarea-autosize"));
+const lodash_es_1 = require("lodash-es");
+const misc_1 = require("@components-core/utils/misc");
+const ItemWithLabel_1 = require("@components/FormItem/ItemWithLabel");
+exports.resizeOptionKeys = ["horizontal", "vertical", "both"];
+const resizeMap = {
+    horizontal: TextArea_module_scss_1.default.resizeHorizontal,
+    vertical: TextArea_module_scss_1.default.resizeVertical,
+    both: TextArea_module_scss_1.default.resizeBoth,
+};
+exports.TextArea = (0, react_1.forwardRef)(function TextArea({ id, value = "", placeholder = "", required = false, readOnly = false, allowCopy = true, updateState = constants_1.noop, validationStatus, autoFocus = false, initialValue = "", resize, onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, controlled = true, enterSubmits = true, escResets, style, registerComponentApi, autoSize, maxRows, minRows, maxLength, rows = 2, enabled = true, label, labelPosition, labelWidth, labelBreak, }, forwardedRef) {
+    // --- The component is initially unfocused
+    const inputRef = (0, react_1.useRef)(null);
+    const [cursorPosition, setCursorPosition] = (0, react_1.useState)(null);
+    const [focused, setFocused] = react_1.default.useState(false);
+    const updateValue = (0, react_1.useCallback)((value) => {
+        updateState({ value: value });
+        onDidChange(value);
+    }, [onDidChange, updateState]);
+    const onInputChange = (0, react_1.useCallback)((event) => {
+        updateValue(event.target.value);
+    }, [updateValue]);
+    (0, react_1.useEffect)(() => {
+        updateState({ value: initialValue }, { initial: true });
+    }, [initialValue, updateState]);
+    // --- Execute this function when the user copies the value
+    const handleCopy = (event) => {
+        if (allowCopy) {
+            return true;
+        }
+        else {
+            event.preventDefault();
+            return false;
+        }
+    };
+    // --- Manage obtaining and losing the focus
+    const handleOnFocus = () => {
+        setFocused(true);
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus();
+    };
+    const handleOnBlur = () => {
+        setFocused(false);
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+    };
+    const focus = (0, react_1.useCallback)(() => {
+        setTimeout(() => {
+            var _a;
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }, 0);
+    }, []);
+    const insert = (0, react_1.useCallback)((text) => {
+        const input = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current;
+        if (input && text) {
+            const start = input.selectionStart;
+            const value = input.value;
+            onInputChange({
+                // @ts-ignore
+                target: {
+                    value: value.substring(0, start) + text + value.substring(start),
+                },
+            });
+            setCursorPosition(start + text.length);
+        }
+    }, [inputRef, onInputChange]);
+    const setValue = (0, misc_1.useEvent)((val) => {
+        updateValue(val);
+    });
+    (0, react_1.useEffect)(() => {
+        if (cursorPosition) {
+            const input = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current;
+            if (input) {
+                input.setSelectionRange(cursorPosition, cursorPosition);
+                setCursorPosition(null);
+            }
+        }
+    }, [value, cursorPosition, inputRef]);
+    (0, react_1.useEffect)(() => {
+        registerComponentApi === null || registerComponentApi === void 0 ? void 0 : registerComponentApi({
+            focus,
+            insert,
+            setValue,
+        });
+    }, [focus, insert, registerComponentApi, setValue]);
+    // --- Handle the Enter key press
+    const handleEnter = (0, react_1.useCallback)((e) => {
+        var _a, _b;
+        if (e.currentTarget.form && enterSubmits && e.key.toLowerCase() === "enter" && !e.shiftKey) {
+            // -- Do not generate a new line
+            e.preventDefault();
+            (_a = e.currentTarget.form) === null || _a === void 0 ? void 0 : _a.requestSubmit();
+        }
+        if (e.currentTarget.form && escResets && e.key.toLowerCase() === "escape" && !e.shiftKey) {
+            e.preventDefault();
+            (_b = e.currentTarget.form) === null || _b === void 0 ? void 0 : _b.reset();
+        }
+    }, [enterSubmits, escResets]);
+    const textareaProps = {
+        className: (0, classnames_1.default)(TextArea_module_scss_1.default.textarea, resize ? resizeMap[resize] : "", {
+            [TextArea_module_scss_1.default.focused]: focused,
+            [TextArea_module_scss_1.default.disabled]: !enabled,
+            [TextArea_module_scss_1.default.error]: validationStatus === "error",
+            [TextArea_module_scss_1.default.warning]: validationStatus === "warning",
+            [TextArea_module_scss_1.default.valid]: validationStatus === "valid",
+        }),
+        ref: inputRef,
+        style: style,
+        value: controlled ? value || "" : undefined,
+        disabled: !enabled,
+        autoFocus,
+        name: id,
+        placeholder,
+        required,
+        maxLength,
+        "aria-multiline": true,
+        "aria-readonly": readOnly,
+        readOnly: readOnly,
+        onChange: onInputChange,
+        onCopy: handleCopy,
+        onFocus: handleOnFocus,
+        onBlur: handleOnBlur,
+        onKeyDown: handleEnter,
+        autoComplete: "off",
+    };
+    if (resize === "both" || resize === "horizontal" || resize === "vertical") {
+        return ((0, jsx_runtime_1.jsx)(ItemWithLabel_1.ItemWithLabel, { ref: forwardedRef, labelPosition: labelPosition, label: label, labelWidth: labelWidth, labelBreak: labelBreak, required: required, enabled: enabled, onFocus: onFocus, onBlur: onBlur, style: style, children: (0, jsx_runtime_1.jsx)(TextAreaResizable_1.default, Object.assign({}, textareaProps, { style: style, maxRows: maxRows, minRows: minRows, rows: rows })) }));
+    }
+    if (autoSize || !(0, lodash_es_1.isNil)(maxRows) || !(0, lodash_es_1.isNil)(minRows)) {
+        return ((0, jsx_runtime_1.jsx)(ItemWithLabel_1.ItemWithLabel, { ref: forwardedRef, labelPosition: labelPosition, label: label, labelWidth: labelWidth, labelBreak: labelBreak, required: required, enabled: enabled, onFocus: onFocus, onBlur: onBlur, style: style, children: (0, jsx_runtime_1.jsx)(react_textarea_autosize_1.default, Object.assign({}, textareaProps, { style: style, maxRows: maxRows, minRows: minRows, rows: rows })) }));
+    }
+    return ((0, jsx_runtime_1.jsx)(ItemWithLabel_1.ItemWithLabel, { ref: forwardedRef, labelPosition: labelPosition, label: label, labelWidth: labelWidth, labelBreak: labelBreak, required: required, enabled: enabled, onFocus: onFocus, onBlur: onBlur, style: style, children: (0, jsx_runtime_1.jsx)("textarea", Object.assign({}, textareaProps, { rows: rows })) }));
+});

package/dist/scripts/src/components/TextArea/TextAreaResizable.js

@@ -0,0 +1,73 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const react_1 = require("react");
+const useComposedRef_1 = require("./useComposedRef");
+const noop = () => { };
+const TextAreaResizable = (_a, userRef) => {
+    var { maxRows, minRows, onChange = noop, style } = _a, props = __rest(_a, ["maxRows", "minRows", "onChange", "style"]);
+    const libRef = (0, react_1.useRef)(null);
+    const ref = (0, useComposedRef_1.useComposedRef)(libRef, userRef);
+    const [minCompHeight, setMinCompHeight] = React.useState();
+    const [maxCompHeight, setMaxCompHeight] = React.useState();
+    (0, react_1.useEffect)(() => {
+        if (!libRef.current)
+            return;
+        // --- Simple get the physical sizes of the component...
+        const style = getComputedStyle(libRef.current);
+        const lineHeight = parseFloat(style.lineHeight);
+        const paddingSize = parseFloat(style.paddingTop) + parseFloat(style.paddingBottom);
+        const borderSize = parseFloat(style.borderTop) + parseFloat(style.borderBottom);
+        const extraSize = (style.boxSizing === "border-box" ? borderSize : 0) + paddingSize;
+        // --- ... and calculate the min and max heights based on the line height
+        setMinCompHeight(lineHeight * (minRows !== null && minRows !== void 0 ? minRows : 1) + extraSize);
+        setMaxCompHeight(lineHeight * (maxRows !== null && maxRows !== void 0 ? maxRows : 10000) + extraSize);
+    }, [libRef.current, maxRows, minRows]);
+    return ((0, jsx_runtime_1.jsx)("textarea", Object.assign({ ref: ref }, props, { onChange: onChange, style: Object.assign(Object.assign({}, style), { minHeight: minCompHeight, maxHeight: maxCompHeight }) })));
+};
+exports.default = React.forwardRef(TextAreaResizable);

package/dist/scripts/src/components/TextArea/useComposedRef.js

@@ -0,0 +1,60 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useComposedRef = void 0;
+const React = __importStar(require("react"));
+const updateRef = (ref, value) => {
+    if (typeof ref === 'function') {
+        ref(value);
+        return;
+    }
+    ;
+    ref.current = value;
+};
+const useComposedRef = (libRef, userRef) => {
+    const prevUserRef = React.useRef();
+    return React.useCallback((instance) => {
+        libRef.current = instance;
+        if (prevUserRef.current) {
+            updateRef(prevUserRef.current, null);
+        }
+        prevUserRef.current = userRef;
+        if (!userRef) {
+            return;
+        }
+        updateRef(userRef, instance);
+    }, [userRef]);
+};
+exports.useComposedRef = useComposedRef;