xmlui 0.9.31 → 0.9.32

package/dist/scripts/src/components/NestedApp/utils.js

@@ -0,0 +1,544 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.handleDownloadZip = exports.INITIAL_PLAYGROUND_STATE = exports.builtInThemes = exports.usePlayground = exports.playgroundReducer = exports.PlaygroundContext = void 0;
+exports.toneChanged = toneChanged;
+exports.textChanged = textChanged;
+exports.contentChanged = contentChanged;
+exports.previewMode = previewMode;
+exports.resetApp = resetApp;
+exports.swapApp = swapApp;
+exports.changeOrientation = changeOrientation;
+exports.appDescriptionInitialized = appDescriptionInitialized;
+exports.optionsInitialized = optionsInitialized;
+exports.activeThemeChanged = activeThemeChanged;
+exports.editorStatusChanged = editorStatusChanged;
+exports.compress = compress;
+exports.decompress = decompress;
+exports.createQueryString = createQueryString;
+exports.serialize = serialize;
+exports.decompressData = decompressData;
+exports.preprocessCode = preprocessCode;
+const react_1 = require("react");
+const immer_1 = __importDefault(require("immer"));
+const xmlui_parser_1 = require("../../components-core/xmlui-parser");
+const react_2 = require("react");
+const xmlui_serializer_1 = require("../../parsers/xmlui-parser/xmlui-serializer");
+const solid_1 = require("../../components-core/theming/themes/solid");
+const xmlui_1 = require("../../components-core/theming/themes/xmlui");
+const jszip_1 = __importDefault(require("jszip"));
+const file_saver_1 = require("file-saver");
+const misc_1 = require("../../components-core/utils/misc");
+exports.PlaygroundContext = (0, react_1.createContext)(undefined);
+var PlaygroundActionKind;
+(function (PlaygroundActionKind) {
+    PlaygroundActionKind["TEXT_CHANGED"] = "PlaygroundActionKind:TEXT_CHANGED";
+    PlaygroundActionKind["CONTENT_CHANGED"] = "PlaygroundActionKind:CONTENT_CHANGED";
+    PlaygroundActionKind["PREVIEW_MODE"] = "PlaygroundActionKind:PREVIEW_MODE";
+    PlaygroundActionKind["RESET_APP"] = "PlaygroundActionKind:RESET_APP";
+    PlaygroundActionKind["APP_SWAPPED"] = "PlaygroundActionKind:APP_SWAPPED";
+    PlaygroundActionKind["ORIENTATION_CHANGED"] = "PlaygroundActionKind:ORIENTATION_CHANGED";
+    PlaygroundActionKind["APP_DESCRIPTION_INITIALIZED"] = "PlaygroundActionKind:APP_DESCRIPTION_INITIALIZED";
+    PlaygroundActionKind["EDITOR_STATUS_CHANGED"] = "PlaygroundActionKind:EDITOR_STATUS_CHANGED";
+    PlaygroundActionKind["OPTIONS_INITIALIZED"] = "PlaygroundActionKind:OPTIONS_INITIALIZED";
+    PlaygroundActionKind["ACTIVE_THEME_CHANGED"] = "PlaygroundActionKind:ACTIVE_THEME_CHANGED";
+    PlaygroundActionKind["TONE_CHANGED"] = "PlaygroundActionKind:TONE_CHANGED";
+})(PlaygroundActionKind || (PlaygroundActionKind = {}));
+function toneChanged(activeTone) {
+    return {
+        type: PlaygroundActionKind.TONE_CHANGED,
+        payload: {
+            activeTone,
+        },
+    };
+}
+function textChanged(text) {
+    return {
+        type: PlaygroundActionKind.TEXT_CHANGED,
+        payload: {
+            text,
+        },
+    };
+}
+function contentChanged(content) {
+    return {
+        type: PlaygroundActionKind.CONTENT_CHANGED,
+        payload: {
+            content,
+        },
+    };
+}
+function previewMode(previewMode) {
+    return {
+        type: PlaygroundActionKind.PREVIEW_MODE,
+        payload: {
+            previewMode,
+        },
+    };
+}
+function resetApp() {
+    return {
+        type: PlaygroundActionKind.RESET_APP,
+        payload: {},
+    };
+}
+function swapApp() {
+    return {
+        type: PlaygroundActionKind.APP_SWAPPED,
+        payload: {},
+    };
+}
+function changeOrientation() {
+    return {
+        type: PlaygroundActionKind.ORIENTATION_CHANGED,
+        payload: {},
+    };
+}
+function appDescriptionInitialized(appDescription) {
+    return {
+        type: PlaygroundActionKind.APP_DESCRIPTION_INITIALIZED,
+        payload: {
+            appDescription,
+        },
+    };
+}
+function optionsInitialized(options) {
+    return {
+        type: PlaygroundActionKind.OPTIONS_INITIALIZED,
+        payload: {
+            options,
+        },
+    };
+}
+function activeThemeChanged(activeTheme) {
+    return {
+        type: PlaygroundActionKind.ACTIVE_THEME_CHANGED,
+        payload: {
+            activeTheme,
+        },
+    };
+}
+function editorStatusChanged(editorStatus) {
+    return {
+        type: PlaygroundActionKind.EDITOR_STATUS_CHANGED,
+        payload: {
+            editorStatus,
+        },
+    };
+}
+exports.playgroundReducer = (0, immer_1.default)((state, action) => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    switch (action.type) {
+        case PlaygroundActionKind.EDITOR_STATUS_CHANGED: {
+            state.editorStatus = action.payload.editorStatus || "idle";
+            break;
+        }
+        case PlaygroundActionKind.APP_DESCRIPTION_INITIALIZED: {
+            state.status = "loading";
+            if (action.payload.appDescription) {
+                const compoundComponents = action.payload.appDescription.components.map((src) => {
+                    if (typeof src === "string") {
+                        let { errors, component, erroneousCompoundComponentName } = (0, xmlui_parser_1.xmlUiMarkupToComponent)(src);
+                        if (errors.length > 0) {
+                            return (0, xmlui_parser_1.errReportComponent)(errors, "Preview source file", erroneousCompoundComponentName);
+                        }
+                        return {
+                            name: component.name,
+                            component: src,
+                        };
+                    }
+                    return src;
+                });
+                state.appDescription.components = compoundComponents;
+                state.appDescription.app = action.payload.appDescription.app;
+                state.appDescription.config = action.payload.appDescription.config;
+                state.appDescription.api = action.payload.appDescription.api;
+                state.text = action.payload.appDescription.app;
+                const themes = action.payload.appDescription.config.themes || [];
+                state.appDescription.availableThemes = [...themes, ...exports.builtInThemes];
+                state.options.activeTheme =
+                    state.appDescription.config.defaultTheme || state.appDescription.availableThemes[0].id;
+                state.originalAppDescription = Object.assign({}, state.appDescription);
+            }
+            state.status = "loaded";
+            break;
+        }
+        case PlaygroundActionKind.OPTIONS_INITIALIZED: {
+            state.options = action.payload.options || state.options;
+            break;
+        }
+        case PlaygroundActionKind.ACTIVE_THEME_CHANGED: {
+            if (action.payload.activeTheme) {
+                state.options.activeTheme = action.payload.activeTheme;
+            }
+            break;
+        }
+        case PlaygroundActionKind.PREVIEW_MODE: {
+            state.options.previewMode = action.payload.previewMode || false;
+            break;
+        }
+        case PlaygroundActionKind.APP_SWAPPED: {
+            state.options.swapped = !state.options.swapped;
+            break;
+        }
+        case PlaygroundActionKind.ORIENTATION_CHANGED: {
+            state.options.orientation =
+                state.options.orientation === "horizontal" ? "vertical" : "horizontal";
+            break;
+        }
+        case PlaygroundActionKind.RESET_APP: {
+            state.options.id = state.options.id + 1;
+            state.appDescription = Object.assign({}, state.originalAppDescription);
+            if (state.options.content === "app") {
+                state.text = state.originalAppDescription.app;
+            }
+            if (state.options.content === "config") {
+                state.text = JSON.stringify(state.originalAppDescription.config, null, 2);
+            }
+            else if (state.appDescription.components
+                .map((c) => c.name.toLowerCase())
+                .includes((_a = state.options.content) === null || _a === void 0 ? void 0 : _a.toLowerCase())) {
+                state.text =
+                    ((_b = state.originalAppDescription.components.find((component) => component.name === state.options.content)) === null || _b === void 0 ? void 0 : _b.component) || "";
+            }
+            break;
+        }
+        case PlaygroundActionKind.CONTENT_CHANGED: {
+            state.options.content = action.payload.content || "app";
+            if (state.options.content === "app") {
+                state.text = state.appDescription.app;
+                state.options.language = "xmlui";
+            }
+            else if (state.options.content === "config") {
+                state.text = JSON.stringify(state.appDescription.config, null, 2);
+                state.options.language = "json";
+            }
+            else if (state.appDescription.components
+                .map((c) => c.name.toLowerCase())
+                .includes((_c = state.options.content) === null || _c === void 0 ? void 0 : _c.toLowerCase())) {
+                state.text =
+                    ((_d = state.appDescription.components.find((component) => component.name === state.options.content)) === null || _d === void 0 ? void 0 : _d.component) || "";
+                state.options.language = "xmlui";
+            }
+            else if (state.appDescription.config.themes
+                .map((t) => t.id.toLowerCase())
+                .includes((_e = state.options.content) === null || _e === void 0 ? void 0 : _e.toLowerCase())) {
+                state.text = JSON.stringify(state.appDescription.config.themes.find((theme) => theme.id === state.options.content), null, 2);
+                state.options.language = "json";
+            }
+            break;
+        }
+        case PlaygroundActionKind.TONE_CHANGED: {
+            state.options.id = state.options.id + 1;
+            state.options.activeTone = action.payload.activeTone;
+            break;
+        }
+        case PlaygroundActionKind.TEXT_CHANGED:
+            state.options.id = state.options.id + 1;
+            {
+                state.text = action.payload.text || "";
+                if (state.options.content === "app") {
+                    state.appDescription.app = state.text;
+                }
+                else if (state.options.content === "config") {
+                    try {
+                        state.appDescription.config = JSON.parse(state.text || "");
+                    }
+                    catch (e) {
+                        console.log(e);
+                    }
+                }
+                else if ((_f = state.appDescription.components) === null || _f === void 0 ? void 0 : _f.some((component) => component.name === state.options.content)) {
+                    state.appDescription.components = state.appDescription.components.map((component) => {
+                        if (component.name === state.options.content) {
+                            return {
+                                name: component.name,
+                                component: state.text || "",
+                            };
+                        }
+                        return component;
+                    });
+                }
+                else if ((_g = state.appDescription.config.themes) === null || _g === void 0 ? void 0 : _g.some((theme) => theme.id === state.options.content)) {
+                    try {
+                        state.appDescription.config.themes = state.appDescription.config.themes.map((theme) => {
+                            if (theme.id === state.options.content) {
+                                return JSON.parse(state.text || "");
+                            }
+                            return theme;
+                        });
+                    }
+                    catch (e) {
+                        console.log(e);
+                    }
+                }
+            }
+            break;
+    }
+});
+const usePlayground = () => {
+    const context = (0, react_2.useContext)(exports.PlaygroundContext);
+    if (context === undefined) {
+        throw new Error("usePlayground must be used within a PlaygroundProvider");
+    }
+    return context;
+};
+exports.usePlayground = usePlayground;
+/**
+ * Convert a string to its UTF-8 bytes and compress it.
+ *
+ * @param {string} str
+ * @returns {Promise<Uint8Array>}
+ */
+function compress(str) {
+    return __awaiter(this, void 0, void 0, function* () {
+        // Convert the string to a byte stream.
+        const stream = new Blob([str]).stream();
+        // Create a compressed stream.
+        const compressedStream = stream.pipeThrough(new CompressionStream("gzip"));
+        // Convert the string to a byte stream.
+        const reader = compressedStream.getReader();
+        const chunks = [];
+        while (true) {
+            const { done, value } = yield reader.read();
+            if (done)
+                break;
+            chunks.push(value);
+        }
+        return yield concatUint8Arrays(chunks);
+    });
+}
+/**
+ * Decompress bytes into a UTF-8 string.
+ *
+ * @param {Uint8Array} compressedBytes
+ * @returns {Promise<string>}
+ */
+function decompress(compressedBytes) {
+    return __awaiter(this, void 0, void 0, function* () {
+        // Convert the bytes to a stream.
+        const stream = new Blob([compressedBytes]).stream();
+        // Create a decompressed stream.
+        const decompressedStream = stream.pipeThrough(new DecompressionStream("gzip"));
+        // Convert the string to a byte stream.
+        const reader = decompressedStream.getReader();
+        const chunks = [];
+        while (true) {
+            const { done, value } = yield reader.read();
+            if (done)
+                break;
+            chunks.push(value);
+        }
+        const stringBytes = yield concatUint8Arrays(chunks);
+        // Convert the bytes to a string.
+        return new TextDecoder().decode(stringBytes);
+    });
+}
+/**
+ * Combine multiple Uint8Arrays into one.
+ *
+ * @param {ReadonlyArray<Uint8Array>} uint8arrays
+ * @returns {Promise<Uint8Array>}
+ */
+function concatUint8Arrays(uint8arrays) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const blob = new Blob(uint8arrays);
+        const buffer = yield blob.arrayBuffer();
+        return new Uint8Array(buffer);
+    });
+}
+function createQueryString(target) {
+    return __awaiter(this, void 0, void 0, function* () {
+        // Convert the Uint8Array to a Base64 string.
+        const compressed = yield compress(target);
+        const base64 = btoa(String.fromCharCode(...compressed));
+        // Create a query string.
+        return encodeURIComponent(base64);
+    });
+}
+function fetchWithoutCache(url) {
+    return __awaiter(this, void 0, void 0, function* () {
+        return fetch((0, misc_1.normalizePath)(url), {
+            headers: {
+                "Cache-Control": "no-cache, no-store",
+            },
+        });
+    });
+}
+function serialize(component) {
+    if (component) {
+        const xh = new xmlui_serializer_1.XmlUiHelper();
+        try {
+            const node = xh.transformComponentDefinition(component);
+            return xh.serialize(node, { prettify: true });
+        }
+        catch (e) {
+            console.log(e);
+            return "";
+        }
+    }
+    return "";
+}
+function decompressData(source) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const base64 = decodeURIComponent(source);
+        const compressed = Uint8Array.from(atob(base64), (c) => c.charCodeAt(0));
+        return yield decompress(compressed);
+    });
+}
+exports.builtInThemes = [
+    Object.assign(Object.assign({}, solid_1.SolidThemeDefinition), { name: "Solid" }),
+    Object.assign(Object.assign({}, xmlui_1.XmlUiThemeDefinition), { name: "Xmlui" }),
+];
+exports.INITIAL_PLAYGROUND_STATE = {
+    editorStatus: "idle",
+    status: "idle",
+    options: {
+        orientation: "horizontal",
+        swapped: false,
+        content: "app",
+        previewMode: false,
+        id: 0,
+        language: "xmlui",
+    },
+    text: "",
+    appDescription: {
+        config: {
+            name: "",
+            appGlobals: {},
+            resources: {},
+            themes: [],
+        },
+        components: [],
+        app: "",
+    },
+    originalAppDescription: {
+        config: {
+            name: "",
+            appGlobals: {},
+            resources: {},
+            themes: [],
+        },
+        components: [],
+        app: "",
+    },
+};
+function removeWhitespace(obj) {
+    if (typeof obj === 'string') {
+        return obj.replace(/\s+/g, ' ').trim(); // Remove extra whitespaces and newlines
+    }
+    else if (typeof obj === 'object' && obj !== null) {
+        const newObj = Array.isArray(obj) ? [] : {};
+        for (const key in obj) {
+            newObj[key] = removeWhitespace(obj[key]);
+        }
+        return newObj;
+    }
+    return obj; // Return the value as is if not a string or object
+}
+const handleDownloadZip = (appDescription) => __awaiter(void 0, void 0, void 0, function* () {
+    const operatingSystem = getOperatingSystem();
+    const zip = new jszip_1.default();
+    const xmluiFolder = zip.folder("xmlui");
+    const xmluiStandalone = yield fetchWithoutCache("/resources/files/for-download/xmlui/xmlui-standalone.umd.js").then((res) => res.blob());
+    xmluiFolder.file("xmlui-standalone.umd.js", xmluiStandalone);
+    zip.file("Main.xmlui", appDescription.app);
+    zip.file("config.json", JSON.stringify(appDescription.config, null, 2));
+    if (appDescription.components.length > 0) {
+        const components = zip.folder("components");
+        appDescription.components.forEach((component) => {
+            components.file(`${component.name}.xmlui`, component.component);
+        });
+    }
+    if (appDescription.config.themes.length > 0) {
+        const themes = zip.folder("themes");
+        appDescription.config.themes.forEach((theme) => {
+            themes.file(`${theme.id}.json`, JSON.stringify(theme, null, 2));
+        });
+    }
+    const emulatedApi = appDescription.api;
+    if (emulatedApi) {
+        const indexWithApiHtml = yield fetchWithoutCache("/resources/files/for-download/index-with-api.html").then((res) => res.blob());
+        zip.file("index.html", indexWithApiHtml);
+        xmluiFolder.file("mockApiDef.js", `window.XMLUI_MOCK_API = ${JSON.stringify(removeWhitespace(emulatedApi), null, 2)};`);
+        const emulatedApiWorker = yield fetchWithoutCache("/resources/files/for-download/mockApi.js").then((res) => res.blob());
+        zip.file("mockApi.js", emulatedApiWorker);
+    }
+    else {
+        const indexHtml = yield fetchWithoutCache("/resources/files/for-download/index.html").then((res) => res.blob());
+        zip.file("index.html", indexHtml);
+    }
+    const startBat = yield fetchWithoutCache("/resources/files/for-download/start.bat").then((res) => res.blob());
+    if (operatingSystem === "Windows") {
+        zip.file("start.bat", startBat);
+    }
+    else {
+        let fileName = operatingSystem === "Linux" ? "start-linux.sh" : "start-darwin.sh";
+        const startSh = yield fetchWithoutCache(`/resources/files/for-download/${fileName}`).then((res) => res.blob());
+        zip.file("start.sh", startSh, {
+            unixPermissions: "777"
+        });
+    }
+    try {
+        const content = yield zip.generateAsync({ type: "blob", platform: operatingSystem === "Windows" ? "DOS" : "UNIX" });
+        (0, file_saver_1.saveAs)(content, `${appDescription.config.name.trim()}.zip`);
+    }
+    catch (error) {
+        console.error("An error occurred while generating the ZIP:", error);
+    }
+});
+exports.handleDownloadZip = handleDownloadZip;
+function preprocessCode(code) {
+    // Split code by newlines
+    const lines = code.split("\n");
+    // Remove whitespace-only lines from the beginning and end
+    let start = 0;
+    while (start < lines.length && lines[start].trim() === "") {
+        start++;
+    }
+    let end = lines.length - 1;
+    while (end >= 0 && lines[end].trim() === "") {
+        end--;
+    }
+    const trimmedLines = lines.slice(start, end + 1);
+    // Calculate the minimum indentation
+    const minIndent = Math.min(...trimmedLines
+        .filter(line => line.trim() !== "") // Ignore empty lines for indentation
+        .map(line => line.match(/^\s*/)[0].length) // Count leading spaces
+    );
+    // Remove minIndent spaces from the beginning of each line
+    const result = trimmedLines.map(line => line.startsWith(" ".repeat(minIndent)) ? line.slice(minIndent) : line);
+    // Join lines back into a single string
+    return result.join("\n");
+}
+function getOperatingSystem() {
+    const userAgent = window.navigator.userAgent;
+    const platform = window.navigator.platform;
+    if (/Win/.test(platform)) {
+        return "Windows";
+    }
+    if (/Mac/.test(platform)) {
+        return "MacOS";
+    }
+    if (/Linux/.test(platform)) {
+        return "Linux";
+    }
+    if (/Android/.test(userAgent)) {
+        return "Android";
+    }
+    if (/iPhone|iPad|iPod/.test(userAgent)) {
+        return "iOS";
+    }
+    return "Unknown OS";
+}

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

@@ -22,8 +22,8 @@ exports.pageRenderer = (0, renderers_1.createComponentRenderer)(PAGE, exports.Pa
 });
 const COMP = "Pages";
 exports.PagesMd = (0, ComponentDefs_1.createMetadata)({
-    description: `The \`${COMP}\` component is used as a container for [\`Page\`](./Page.mdx) components ` +
-        `within an [\`App\`](./App.mdx).`,
+    description: `The \`${COMP}\` component is used as a container for [\`Page\`](/components/Page) components ` +
+        `within an [\`App\`](/components/App).`,
     props: {
         defaultRoute: (0, ComponentDefs_1.d)(`The default route when displaying the app`),
     },

package/dist/scripts/src/components/Select/SelectNative.js

@@ -75,7 +75,7 @@ const SimpleSelect = (0, react_1.forwardRef)(function SimpleSelect(props, forwar
                     [Select_module_scss_1.default.error]: validationStatus === "error",
                     [Select_module_scss_1.default.warning]: validationStatus === "warning",
                     [Select_module_scss_1.default.valid]: validationStatus === "valid",
-                }), ref: ref, autoFocus: autoFocus, children: [(0, jsx_runtime_1.jsx)("div", { className: Select_module_scss_1.default.selectValue, children: readOnly ? (((_a = Array.from(options).find((o) => `${o.value}` === stringValue)) === null || _a === void 0 ? void 0 : _a.label) || (0, jsx_runtime_1.jsx)("span", { children: placeholder })) : ((0, jsx_runtime_1.jsx)(react_select_1.Value, { placeholder: placeholder })) }), (0, jsx_runtime_1.jsx)(react_select_1.Icon, { asChild: true, children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "chevrondown" }) })] }), (0, jsx_runtime_1.jsx)(react_select_1.Portal, { container: root, children: (0, jsx_runtime_1.jsxs)(react_select_1.Content, { className: Select_module_scss_1.default.selectContent, position: "popper", style: { height: height }, children: [(0, jsx_runtime_1.jsx)(react_select_1.ScrollUpButton, { className: Select_module_scss_1.default.selectScrollUpButton, children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "chevronup" }) }), (0, jsx_runtime_1.jsx)(react_select_1.SelectViewport, { className: Select_module_scss_1.default.selectViewport, role: "listbox", children: children }), (0, jsx_runtime_1.jsx)(react_select_1.ScrollDownButton, { className: Select_module_scss_1.default.selectScrollDownButton, children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "chevrondown" }) })] }) })] }));
+                }), ref: ref, autoFocus: autoFocus, children: [(0, jsx_runtime_1.jsx)("div", { className: Select_module_scss_1.default.selectValue, children: readOnly ? (((_a = Array.from(options).find((o) => `${o.value}` === stringValue)) === null || _a === void 0 ? void 0 : _a.label) || ((0, jsx_runtime_1.jsx)("span", { "aria-placeholder": placeholder, children: placeholder }))) : ((0, jsx_runtime_1.jsx)(react_select_1.Value, { "aria-placeholder": placeholder, placeholder: placeholder })) }), (0, jsx_runtime_1.jsx)(react_select_1.Icon, { asChild: true, children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "chevrondown" }) })] }), (0, jsx_runtime_1.jsx)(react_select_1.Portal, { container: root, children: (0, jsx_runtime_1.jsxs)(react_select_1.Content, { className: Select_module_scss_1.default.selectContent, position: "popper", style: { height: height }, children: [(0, jsx_runtime_1.jsx)(react_select_1.ScrollUpButton, { className: Select_module_scss_1.default.selectScrollUpButton, children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "chevronup" }) }), (0, jsx_runtime_1.jsx)(react_select_1.SelectViewport, { className: Select_module_scss_1.default.selectViewport, role: "listbox", children: children }), (0, jsx_runtime_1.jsx)(react_select_1.ScrollDownButton, { className: Select_module_scss_1.default.selectScrollDownButton, children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "chevrondown" }) })] }) })] }));
 });
 exports.Select = (0, react_1.forwardRef)(function Select({ id, initialValue, value, enabled = true, placeholder, updateState = constants_1.noop, validationStatus = "none", onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, registerComponentApi, emptyListTemplate, optionLabelRenderer, optionRenderer, valueRenderer, style, dropdownHeight, children, autoFocus = false, searchable = false, multiSelect = false, label, labelPosition, labelWidth, labelBreak = false, required = false, inProgress = false, inProgressNotificationMessage = "Loading...", readOnly = false, }, ref) {
     var _a;
@@ -188,7 +188,7 @@ exports.Select = (0, react_1.forwardRef)(function Select({ id, initialValue, val
                                                                     event.stopPropagation();
                                                                     toggleOption(v);
                                                                 } })] }, v));
-                                                }) }) })) : ((0, jsx_runtime_1.jsx)("span", { className: Select_module_scss_1.default.placeholder, children: placeholder }))) : value !== undefined && value !== null ? ((0, jsx_runtime_1.jsx)("div", { children: (_a = Array.from(options).find((o) => o.value === value)) === null || _a === void 0 ? void 0 : _a.label })) : ((0, jsx_runtime_1.jsx)("span", { className: Select_module_scss_1.default.placeholder, children: placeholder || "" })), (0, jsx_runtime_1.jsxs)("div", { className: Select_module_scss_1.default.actions, children: [multiSelect && Array.isArray(value) && value.length > 0 && ((0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "close", onClick: (event) => {
+                                                }) }) })) : ((0, jsx_runtime_1.jsx)("span", { "aria-placeholder": placeholder, className: Select_module_scss_1.default.placeholder, children: placeholder }))) : value !== undefined && value !== null ? ((0, jsx_runtime_1.jsx)("div", { children: (_a = Array.from(options).find((o) => o.value === value)) === null || _a === void 0 ? void 0 : _a.label })) : ((0, jsx_runtime_1.jsx)("span", { "aria-placeholder": placeholder, className: Select_module_scss_1.default.placeholder, children: placeholder || "" })), (0, jsx_runtime_1.jsxs)("div", { className: Select_module_scss_1.default.actions, children: [multiSelect && Array.isArray(value) && value.length > 0 && ((0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "close", onClick: (event) => {
                                                         event.stopPropagation();
                                                         clearValue();
                                                     } })), (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "chevrondown" })] })] }), open && ((0, jsx_runtime_1.jsx)(react_select_1.Portal, { container: root, children: (0, jsx_runtime_1.jsx)(react_focus_scope_1.FocusScope, { asChild: true, loop: true, trapped: true, children: (0, jsx_runtime_1.jsx)(react_popover_1.PopoverContent, { style: { width, height: dropdownHeight }, className: Select_module_scss_1.default.selectContent, children: (0, jsx_runtime_1.jsxs)(cmdk_1.Command, { className: Select_module_scss_1.default.command, shouldFilter: searchable, filter: (value, search, keywords) => {