xmlui 0.4.0

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

@@ -0,0 +1,194 @@
+"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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __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.textAreaComponentRenderer = exports.TextArea = 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 renderers_1 = require("@components-core/renderers");
+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 themeVars_1 = require("@components-core/theming/themeVars");
+const misc_1 = require("@components-core/utils/misc");
+// =====================================================================================================================
+// Helper types
+const ResizeOptionKeys = ["horizontal", "vertical", "both"];
+const isResizeOption = (str) => ResizeOptionKeys.indexOf(str) !== -1;
+const resizeMap = {
+    horizontal: TextArea_module_scss_1.default.resizeHorizontal,
+    vertical: TextArea_module_scss_1.default.resizeVertical,
+    both: TextArea_module_scss_1.default.resizeBoth,
+};
+const 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, }) => {
+    // --- 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 });
+    }, [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 (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 (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,
+        id: id,
+        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)(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)(react_textarea_autosize_1.default, Object.assign({}, textareaProps, { style: style, maxRows: maxRows, minRows: minRows, rows: rows }));
+    }
+    return (0, jsx_runtime_1.jsx)("textarea", Object.assign({}, textareaProps, { rows: rows }));
+};
+exports.TextArea = TextArea;
+/**
+ * This object defines the hints for TextArea
+ */
+const metadata = {
+    displayName: "Text Area",
+    description: "Provide a multiple-line text editing area for plain text content",
+    themeVars: (0, themeVars_1.parseScssVar)(TextArea_module_scss_1.default.themeVars),
+    props: {
+        resize: {
+            isValid: (p) => isResizeOption(p)
+                ? null
+                : `Resize option must be one of these values: ${[...ResizeOptionKeys].join(", ")}. Current value: '${p}'`,
+        },
+    },
+};
+/**
+ * This function defines the renderer for the TextArea component.
+ */
+exports.textAreaComponentRenderer = (0, renderers_1.createComponentRenderer)("TextArea", ({ node, extractValue, state, updateState, layoutCss, registerComponentApi, lookupEventHandler }) => {
+    const initialValue = extractValue(node.props.initialValue);
+    return ((0, jsx_runtime_1.jsx)(exports.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) }, `${node.uid}-${initialValue}`));
+}, metadata);

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

@@ -0,0 +1,63 @@
+"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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __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,50 @@
+"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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __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;

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

@@ -0,0 +1,145 @@
+"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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __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.passwordInputComponentRenderer = exports.textBoxComponentRenderer = exports.TextBox = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const input_abstractions_1 = require("@components/Input/input-abstractions");
+const renderers_1 = require("@components-core/renderers");
+const react_1 = __importStar(require("react"));
+const classnames_1 = __importDefault(require("@components-core/utils/classnames"));
+const TextBox_module_scss_1 = __importDefault(require("./TextBox.module.scss"));
+const constants_1 = require("@components-core/constants");
+const InputAdornment_1 = require("@components/Input/InputAdornment");
+const themeVars_1 = require("@components-core/theming/themeVars");
+const misc_1 = require("@components-core/utils/misc");
+const TextBox = ({ id, type = "text", value = "", updateState = constants_1.noop, initialValue = "", style, maxLength, enabled = true, placeholder, validationStatus = "none", onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, registerComponentApi, startText, startIcon, endText, endIcon, autoFocus, readOnly, tabIndex, }) => {
+    const inputRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        if (autoFocus) {
+            setTimeout(() => {
+                var _a;
+                (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }, 0);
+        }
+    }, [autoFocus]);
+    // --- NOTE: This is a workaround for the jumping caret issue.
+    // --- Local state can sync up values that can get set asynchronously outside the component.
+    const [localValue, setLocalValue] = react_1.default.useState(value);
+    (0, react_1.useEffect)(() => {
+        setLocalValue(value);
+    }, [value]);
+    // --- End NOTE
+    // --- Initialize the related field with the input's initial value
+    (0, react_1.useEffect)(() => {
+        updateState({ value: initialValue });
+    }, [initialValue, updateState]);
+    const updateValue = (0, react_1.useCallback)((value) => {
+        setLocalValue(value);
+        updateState({ value });
+        onDidChange(value);
+    }, [onDidChange, updateState]);
+    // --- Handle the value change events for this input
+    const onInputChange = (0, react_1.useCallback)((event) => {
+        updateValue(event.target.value);
+    }, [updateValue]);
+    // --- Manage obtaining and losing the focus
+    const handleOnFocus = (0, react_1.useCallback)(() => {
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus();
+    }, [onFocus]);
+    const handleOnBlur = (0, react_1.useCallback)(() => {
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+    }, [onBlur]);
+    const focus = (0, react_1.useCallback)(() => {
+        var _a;
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, []);
+    const setValue = (0, misc_1.useEvent)((newValue) => {
+        updateValue(newValue);
+    });
+    (0, react_1.useEffect)(() => {
+        registerComponentApi === null || registerComponentApi === void 0 ? void 0 : registerComponentApi({
+            focus,
+            setValue,
+        });
+    }, [focus, registerComponentApi, setValue]);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(TextBox_module_scss_1.default.inputRoot, {
+            [TextBox_module_scss_1.default.disabled]: !enabled,
+            [TextBox_module_scss_1.default.readOnly]: readOnly,
+            [TextBox_module_scss_1.default.error]: validationStatus === "error",
+            [TextBox_module_scss_1.default.warning]: validationStatus === "warning",
+            [TextBox_module_scss_1.default.valid]: validationStatus === "valid",
+        }), tabIndex: -1, onFocus: () => {
+            var _a;
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }, style: style, children: [(0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { text: startText, iconName: startIcon, className: TextBox_module_scss_1.default.adornment }), (0, jsx_runtime_1.jsx)("input", { id: id, type: type, className: (0, classnames_1.default)(TextBox_module_scss_1.default.input, { [TextBox_module_scss_1.default.readOnly]: readOnly }), disabled: !enabled, value: localValue, maxLength: maxLength, placeholder: placeholder, onChange: onInputChange, onFocus: handleOnFocus, onBlur: handleOnBlur, ref: inputRef, readOnly: readOnly, autoFocus: autoFocus, tabIndex: tabIndex }), (0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { text: endText, iconName: endIcon, className: TextBox_module_scss_1.default.adornment })] }));
+};
+exports.TextBox = TextBox;
+const metadata = {
+    displayName: "TextBox",
+    description: "Represents an input component for textual data entry",
+    props: input_abstractions_1.inputComponentPropertyDescriptors,
+    events: input_abstractions_1.inputComponentEventDescriptors,
+    themeVars: (0, themeVars_1.parseScssVar)(TextBox_module_scss_1.default.themeVars),
+    defaultThemeVars: {
+        // TODO: When FormItem is themed, move these defaults there
+        "radius-Input": "$radius",
+        "color-text-Input": "$color-text-primary",
+        "color-bg-Input--disabled": "$color-bg--disabled",
+        "thickness-border-Input": "1px",
+        "min-height-Input": "39px",
+        "style-border-Input": "solid",
+        "color-border-Input--disabled": "$color-border--disabled",
+        "color-text-Input--disabled": "$color-text--disabled",
+        "color-border-Input-error": "$color-border-Input-default--error",
+        "color-border-Input-warning": "$color-border-Input-default--warning",
+        "color-border-Input-success": "$color-border-Input-default--success",
+        "color-placeholder-Input": "$color-text-subtitle",
+        "color-adornment-Input": "$color-text-subtitle",
+        "color-outline-Input--focus": "$color-outline--focus",
+        "thickness-outline-Input--focus": "$thickness-outline--focus",
+        "style-outline-Input--focus": "$style-outline--focus",
+        "offset-outline-Input--focus": "$offset-outline--focus",
+        light: {
+        // --- No light-specific theme vars
+        },
+        dark: {
+        // --- No dark-specific theme vars
+        },
+    },
+};
+function renderTextBox(layoutCss, state, updateState, extractValue, node, lookupEventHandler, registerComponentApi, type = "text") {
+    //if we provide a value through props, we don't sync the textbox value to it's container's state,
+    // but handle it like a 'controlled' input (use the value from the prop as the current value, assume that the user sets the value prop in response to input changes).
+    return ((0, jsx_runtime_1.jsx)(exports.TextBox, { type: type, style: layoutCss, value: state.value, updateState: updateState, initialValue: extractValue(node.props.initialValue), maxLength: extractValue(node.props.maxLength), enabled: extractValue.asOptionalBoolean(node.props.enabled), placeholder: extractValue.asOptionalString(node.props.placeholder), validationStatus: extractValue(node.props.validationStatus), onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), registerComponentApi: registerComponentApi, startText: extractValue.asOptionalString(node.props.startText), startIcon: extractValue.asOptionalString(node.props.startIcon), endText: extractValue.asOptionalString(node.props.endText), endIcon: extractValue.asOptionalString(node.props.endIcon), autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus), readOnly: extractValue.asOptionalBoolean(node.props.readOnly) }));
+}
+exports.textBoxComponentRenderer = (0, renderers_1.createComponentRenderer)("TextBox", ({ node, state, updateState, lookupEventHandler, extractValue, layoutCss, registerComponentApi }) => {
+    return renderTextBox(layoutCss, state, updateState, extractValue, node, lookupEventHandler, registerComponentApi);
+}, metadata);
+exports.passwordInputComponentRenderer = (0, renderers_1.createComponentRenderer)("PasswordInput", ({ node, state, updateState, lookupEventHandler, extractValue, layoutCss, registerComponentApi }) => {
+    return renderTextBox(layoutCss, state, updateState, extractValue, node, lookupEventHandler, registerComponentApi, "password");
+}, metadata);

package/dist/scripts/src/components/Theme/NotificationToast.js

@@ -0,0 +1,39 @@
+"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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NotificationToast = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_hot_toast_1 = __importStar(require("react-hot-toast"));
+const TOASTER_CONTAINER_STYLE = {
+    top: 40,
+    right: 40,
+    bottom: 40,
+    left: 40,
+    position: "absolute",
+};
+const NotificationToast = ({ toastDuration }) => {
+    return ((0, jsx_runtime_1.jsx)(react_hot_toast_1.Toaster, { position: "top-right", containerStyle: TOASTER_CONTAINER_STYLE, toastOptions: { style: { padding: "12px 16px" }, duration: toastDuration }, children: (t) => ((0, jsx_runtime_1.jsx)("div", { onClick: () => react_hot_toast_1.default.dismiss(t.id), children: (0, jsx_runtime_1.jsx)(react_hot_toast_1.ToastBar, { position: t.position, toast: t, style: { wordBreak: "break-word" }, children: ({ icon, message }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [icon, message] })) }) })) }));
+};
+exports.NotificationToast = NotificationToast;

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

@@ -0,0 +1,153 @@
+"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.themeComponentRenderer = void 0;
+exports.Theme = Theme;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const renderers_1 = require("@components-core/renderers");
+const react_1 = require("react");
+const Theme_module_scss_1 = __importDefault(require("./Theme.module.scss"));
+const ThemeProvider_1 = require("@components-core/theming/ThemeProvider");
+const ThemeContext_1 = require("@components-core/theming/ThemeContext");
+const classnames_1 = __importDefault(require("@components-core/utils/classnames"));
+const react_helmet_async_1 = require("react-helmet-async");
+const react_dom_1 = require("react-dom");
+const constants_1 = require("@components-core/constants");
+const descriptorHelper_1 = require("@components-core/descriptorHelper");
+const ErrorBoundary_1 = require("@components-core/ErrorBoundary");
+const NotificationToast_1 = require("./NotificationToast");
+function getClassName(css) {
+    return `theme-${calculateHash(css)}`;
+}
+function calculateHash(str) {
+    let hash = 0, i, chr;
+    if (str.length === 0)
+        return hash;
+    for (i = 0; i < str.length; i++) {
+        chr = str.charCodeAt(i);
+        hash = (hash << 5) - hash + chr;
+        hash |= 0; // Convert to 32bit integer
+    }
+    return hash;
+}
+function Theme({ id, isRoot = false, renderChild, node, tone, toastDuration = 5000, themeVars = constants_1.EMPTY_OBJECT, layoutContext, }) {
+    const generatedId = (0, react_1.useId)();
+    const { themes, resources, resourceMap, activeThemeId, setRoot, root } = (0, ThemeContext_1.useThemes)();
+    const { activeTheme, activeThemeTone } = (0, ThemeContext_1.useTheme)();
+    const themeTone = tone || activeThemeTone;
+    const currentTheme = (0, react_1.useMemo)(() => {
+        var _a, _b, _c;
+        const themeToExtend = id ? themes.find((theme) => theme.id === id) : activeTheme;
+        if (!themeToExtend) {
+            throw new Error("Theme not found");
+        }
+        const foundTheme = Object.assign(Object.assign({}, themeToExtend), { id: generatedId, tones: Object.assign(Object.assign({}, themeToExtend.tones), { [themeTone]: Object.assign(Object.assign({}, (_a = themeToExtend.tones) === null || _a === void 0 ? void 0 : _a[themeTone]), { themeVars: Object.assign(Object.assign({}, (_c = (_b = themeToExtend.tones) === null || _b === void 0 ? void 0 : _b[themeTone]) === null || _c === void 0 ? void 0 : _c.themeVars), themeVars) }) }) });
+        return foundTheme;
+    }, [activeTheme, generatedId, id, themeTone, themeVars, themes]);
+    const { themeCssVars, getResourceUrl, fontLinks, allThemeVarsWithResolvedHierarchicalVars, getThemeVar } = (0, ThemeProvider_1.useCompiledTheme)(currentTheme, themeTone, themes, resources, resourceMap);
+    const { css, className, rangeClassName, fromClass, toClass } = (0, react_1.useMemo)(() => {
+        const vars = Object.assign(Object.assign({}, themeCssVars), { "color-scheme": themeTone });
+        // const vars = themeCssVars;
+        const css = Object.entries(vars)
+            .map(([key, value]) => {
+            return key + ":" + value + ";";
+        })
+            .join(" ");
+        const className = getClassName(css);
+        const fromClass = `${className}-from`;
+        const toClass = `${className}-to`;
+        let rangeClassName;
+        if (!isRoot) {
+            rangeClassName = `${fromClass} ~ *:has(~ .${toClass})`;
+        }
+        return {
+            className,
+            rangeClassName,
+            fromClass,
+            toClass,
+            css,
+        };
+    }, [getThemeVar, isRoot, themeCssVars, themeTone]);
+    // useInsertionEffect(() => {
+    //   //PERF OPT IDEA: don't inject the css content that we already have
+    //   // (e.g. in Items component we inject and generate classes for all items if we use a theme for an item, but they have the same content.
+    //   // We could inject one class, and use that instead. The harder part is keeping track of them, and remove when nobody uses them)
+    //   injectCSS(`.${className} {${css}}`, className);
+    //   if (rangeClassName) {
+    //     injectCSS(`.${rangeClassName} {${css}}`, rangeClassName);
+    //   }
+    //   let injectedClassNames = [className, rangeClassName];
+    //   return () => {
+    //     injectedClassNames.forEach(injectedClassName => {
+    //       if (injectedClassName) {
+    //         cleanupCss(injectedClassName);
+    //       }
+    //     });
+    //   };
+    // }, [className, css]);
+    const [themeRoot, setThemeRoot] = (0, react_1.useState)(root);
+    const currentThemeContextValue = (0, react_1.useMemo)(() => {
+        const themeVal = {
+            root: themeRoot,
+            activeThemeId,
+            activeThemeTone: themeTone,
+            activeTheme: currentTheme,
+            themeStyles: themeCssVars,
+            themeVars: allThemeVarsWithResolvedHierarchicalVars,
+            getResourceUrl,
+            getThemeVar,
+        };
+        return themeVal;
+    }, [
+        themeRoot,
+        activeThemeId,
+        themeTone,
+        currentTheme,
+        themeCssVars,
+        allThemeVarsWithResolvedHierarchicalVars,
+        getResourceUrl,
+        getThemeVar,
+    ]);
+    if (isRoot) {
+        const faviconUrl = getResourceUrl("resource:favicon");
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_helmet_async_1.Helmet, { children: [!!faviconUrl && (0, jsx_runtime_1.jsx)("link", { rel: "icon", type: "image/svg+xml", href: faviconUrl }), fontLinks === null || fontLinks === void 0 ? void 0 : fontLinks.map((fontLink) => ((0, jsx_runtime_1.jsx)("link", { href: fontLink, rel: "stylesheet" }, fontLink)))] }), (0, jsx_runtime_1.jsx)("style", { children: `.${className} {${css}}` }), (0, jsx_runtime_1.jsxs)("div", { id: "_ui-engine-theme-root", className: (0, classnames_1.default)(Theme_module_scss_1.default.baseRootComponent, className), ref: (el) => {
+                        if (el) {
+                            setRoot(el);
+                        }
+                    }, children: [(0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { node: node, location: "theme-root", children: renderChild(node.children) }), (0, jsx_runtime_1.jsx)(NotificationToast_1.NotificationToast, { toastDuration: toastDuration })] })] }));
+    }
+    return ((0, jsx_runtime_1.jsxs)(ThemeContext_1.ThemeContext.Provider, { value: currentThemeContextValue, children: [(0, jsx_runtime_1.jsx)("style", { children: `.${rangeClassName} {${css}}` }), (0, jsx_runtime_1.jsx)("style", { children: `.${className} {${css}}` }), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(Theme_module_scss_1.default.from, fromClass) }), renderChild(node.children, Object.assign(Object.assign({}, layoutContext), { themeClassName: className })), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(Theme_module_scss_1.default.to, toClass) }), root &&
+                (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(className), ref: (el) => {
+                        if (el) {
+                            setThemeRoot(el);
+                        }
+                    } }), root)] }));
+}
+const metadata = {
+    displayName: "Theme",
+    description: "This component allows defining a particular theming context for its nested components",
+    props: {
+        themeId: (0, descriptorHelper_1.desc)("The id of the theme to use"),
+        tone: (0, descriptorHelper_1.desc)("The tone to use in the theming context"),
+    },
+    opaque: true,
+};
+exports.themeComponentRenderer = (0, renderers_1.createComponentRenderer)("Theme", ({ node, extractValue, renderChild, layoutContext, appContext }) => {
+    var _a, _b;
+    const _c = node.props, { tone } = _c, restProps = __rest(_c, ["tone"]);
+    const toastDuration = (_b = (_a = appContext === null || appContext === void 0 ? void 0 : appContext.globals) === null || _a === void 0 ? void 0 : _a.notifications) === null || _b === void 0 ? void 0 : _b.duration;
+    return ((0, jsx_runtime_1.jsx)(Theme, { id: extractValue.asOptionalString(node.props.themeId), isRoot: extractValue.asOptionalBoolean(node.props.root), layoutContext: layoutContext, renderChild: renderChild, tone: extractValue.asOptionalString(tone), toastDuration: toastDuration, themeVars: extractValue(restProps), node: node }));
+}, metadata);