xmlui 0.11.3 → 0.11.6

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

@@ -1,80 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.fileInputRenderer = exports.FileInputMd = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const FileInput_module_scss_1 = __importDefault(require("./FileInput.module.scss"));
-const renderers_1 = require("../../components-core/renderers");
-const themeVars_1 = require("../../components-core/theming/themeVars");
-const metadata_helpers_1 = require("../../components/metadata-helpers");
-const abstractions_1 = require("../abstractions");
-const IconNative_1 = require("../Icon/IconNative");
-const FileInputNative_1 = require("./FileInputNative");
-const COMP = "FileInput";
-const DEFAULT_ICON = "browse:FileInput";
-exports.FileInputMd = (0, metadata_helpers_1.createMetadata)({
-    status: "stable",
-    description: "`FileInput` enables users to select files from their device's file system for " +
-        "upload or processing. It combines a text field displaying selected files with " +
-        "a customizable button that opens the system file browser. Use it for forms, " +
-        "media uploads, and document processing workflows.",
-    props: {
-        placeholder: (0, metadata_helpers_1.dPlaceholder)(),
-        initialValue: (0, metadata_helpers_1.dInitialValue)(),
-        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)(),
-        buttonVariant: (0, metadata_helpers_1.d)("The button variant to use", abstractions_1.buttonVariantNames),
-        buttonLabel: (0, metadata_helpers_1.d)(`This property is an optional string to set a label for the button part.`),
-        buttonIcon: (0, metadata_helpers_1.d)(`The ID of the icon to display in the button. You can change the default icon for all ${COMP} ` +
-            `instances with the "icon.browse:FileInput" declaration in the app configuration file.`),
-        buttonIconPosition: (0, metadata_helpers_1.d)(`This optional string determines the location of the button icon.`, abstractions_1.iconPositionNames, "string", "start"),
-        acceptsFileType: (0, metadata_helpers_1.d)(`An optional list of file types the input controls accepts provided as a string array.`),
-        multiple: Object.assign(Object.assign({}, (0, metadata_helpers_1.d)(`This boolean property enables to add not just one (\`false\`), but multiple files to the field ` +
-            `(\`true\`). This is done either by dragging onto the field or by selecting multiple files ` +
-            `in the browser menu after clicking the input field button.`, null, "boolean")), { defaultValue: FileInputNative_1.defaultProps.multiple }),
-        directory: Object.assign(Object.assign({}, (0, metadata_helpers_1.d)(`This boolean property indicates whether the component allows selecting directories (\`true\`) ` +
-            `or files only (\`false\`).`, null, "boolean")), { defaultValue: FileInputNative_1.defaultProps.directory }),
-        buttonPosition: Object.assign(Object.assign({}, (0, metadata_helpers_1.d)(`This property determines the position of the button relative to the input field.`, [
-            "start",
-            "end",
-        ])), { defaultValue: FileInputNative_1.defaultProps.buttonPosition }),
-        buttonSize: (0, metadata_helpers_1.d)("The size of the button (small, medium, large)", abstractions_1.sizeMd),
-        buttonThemeColor: (0, metadata_helpers_1.d)("The button color scheme (primary, secondary, attention)", abstractions_1.buttonThemeNames, "string", FileInputNative_1.defaultProps.buttonThemeColor),
-    },
-    events: {
-        didChange: (0, metadata_helpers_1.dDidChange)(COMP),
-        gotFocus: (0, metadata_helpers_1.dGotFocus)(COMP),
-        lostFocus: (0, metadata_helpers_1.dLostFocus)(COMP),
-    },
-    apis: {
-        value: {
-            description: "This property holds the current value of the component, which is an array of files.",
-            signature: "get value(): File[]",
-        },
-        setValue: {
-            description: "This method sets the current value of the component.",
-            signature: "setValue(files: File[]): void",
-            parameters: {
-                files: "An array of File objects to set as the current value of the component.",
-            },
-        },
-        focus: {
-            description: "This API command focuses the input field of the component.",
-            signature: "focus(): void",
-        },
-        open: {
-            description: "This API command triggers the file browsing dialog to open.",
-            signature: "open(): void",
-        },
-    },
-    themeVars: (0, themeVars_1.parseScssVar)(FileInput_module_scss_1.default.themeVars),
-});
-exports.fileInputRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.FileInputMd, ({ node, state, updateState, extractValue, lookupEventHandler, registerComponentApi, className }) => {
-    const iconName = extractValue.asOptionalString(node.props.buttonIcon) || DEFAULT_ICON;
-    return ((0, jsx_runtime_1.jsx)(FileInputNative_1.FileInput, { enabled: extractValue.asOptionalBoolean(node.props.enabled), variant: extractValue(node.props.buttonVariant), buttonThemeColor: extractValue(node.props.buttonThemeColor), buttonSize: extractValue(node.props.buttonSize), buttonIcon: (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: iconName, fallback: "folder-open" }), buttonIconPosition: extractValue(node.props.buttonIconPosition), buttonLabel: extractValue.asOptionalString(node.props.buttonLabel), updateState: updateState, value: (0, FileInputNative_1.isFileArray)(state === null || state === void 0 ? void 0 : state.value) ? state === null || state === void 0 ? void 0 : state.value : undefined, autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus), onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), validationStatus: extractValue(node.props.validationStatus), registerComponentApi: registerComponentApi, multiple: extractValue.asOptionalBoolean(node.props.multiple), directory: extractValue.asOptionalBoolean(node.props.directory), placeholder: extractValue.asOptionalString(node.props.placeholder), buttonPosition: extractValue.asOptionalString(node.props.buttonPosition), initialValue: extractValue(node.props.initialValue), acceptsFileType: extractValue(node.props.acceptsFileType), required: extractValue.asOptionalBoolean(node.props.required), className: className }));
-});

package/dist/scripts/src/components/FileInput/FileInput.spec.js

@@ -1,285 +0,0 @@
-"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());
-    });
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const fixtures_1 = require("../../testing/fixtures");
-// =============================================================================
-// BASIC FUNCTIONALITY TESTS
-// =============================================================================
-(0, fixtures_1.test)("component renders with basic props", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFileInputDriver }) {
-    yield initTestBed(`<FileInput/>`);
-    const driver = yield createFileInputDriver();
-    yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-}));
-(0, fixtures_1.test)("component displays browse button", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFileInputDriver }) {
-    yield initTestBed(`<FileInput buttonLabel="Choose File"/>`);
-    const driver = yield createFileInputDriver();
-    yield (0, fixtures_1.expect)(driver.getBrowseButton()).toBeVisible();
-    yield (0, fixtures_1.expect)(driver.getBrowseButton()).toContainText("Choose File");
-}));
-(0, fixtures_1.test)("component displays placeholder text", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFileInputDriver }) {
-    yield initTestBed(`<FileInput placeholder="Select a file..."/>`);
-    const driver = yield createFileInputDriver();
-    const placeholder = yield driver.getPlaceholder();
-    (0, fixtures_1.expect)(placeholder).toBe("Select a file...");
-}));
-(0, fixtures_1.test)("component handles disabled state", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFileInputDriver }) {
-    yield initTestBed(`<FileInput enabled="false"/>`);
-    const driver = yield createFileInputDriver();
-    yield (0, fixtures_1.expect)(driver.getBrowseButton()).toBeDisabled();
-    (0, fixtures_1.expect)(yield driver.isEnabled()).toBe(false);
-}));
-(0, fixtures_1.test)("component supports multiple file selection", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFileInputDriver, }) {
-    yield initTestBed(`<FileInput multiple="true"/>`);
-    const driver = yield createFileInputDriver();
-    (0, fixtures_1.expect)(yield driver.isMultiple()).toBe(true);
-}));
-(0, fixtures_1.test)("component supports directory selection", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFileInputDriver }) {
-    yield initTestBed(`<FileInput directory="true"/>`);
-    const driver = yield createFileInputDriver();
-    (0, fixtures_1.expect)(yield driver.isDirectory()).toBe(true);
-}));
-(0, fixtures_1.test)("component accepts specific file types", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFileInputDriver }) {
-    yield initTestBed(`<FileInput acceptsFileType="image/*,application/pdf"/>`);
-    const driver = yield createFileInputDriver();
-    const acceptedTypes = yield driver.getAcceptedFileTypes();
-    (0, fixtures_1.expect)(acceptedTypes).toBe("image/*,application/pdf");
-}));
-(0, fixtures_1.test)("component accepts file type array", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFileInputDriver }) {
-    yield initTestBed(`<FileInput acceptsFileType="['.jpg', '.png', '.pdf']"/>`);
-    const driver = yield createFileInputDriver();
-    const acceptedTypes = yield driver.getAcceptedFileTypes();
-    (0, fixtures_1.expect)(acceptedTypes).toContain(".jpg");
-}));
-// =============================================================================
-// ACCESSIBILITY TESTS (REQUIRED)
-// =============================================================================
-(0, fixtures_1.test)("component has correct accessibility attributes", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFileInputDriver, }) {
-    yield initTestBed(`<FileInput label="Upload Document"/>`);
-    const driver = yield createFileInputDriver();
-    yield (0, fixtures_1.expect)(driver.getBrowseButton()).toHaveRole("button");
-    yield (0, fixtures_1.expect)(driver.getHiddenInput()).toHaveAttribute("type", "file");
-}));
-(0, fixtures_1.test)("component is keyboard accessible", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed, createFileInputDriver }) {
-    yield initTestBed(`
-    <VStack>
-      <FileInput testId="fileInput" label="Input" />
-    </VStack>
-  `);
-    const driver = yield createFileInputDriver("fileInput");
-    yield driver.getTextBox().focus();
-    yield (0, fixtures_1.expect)(driver.getTextBox()).toBeFocused();
-}));
-(0, fixtures_1.test)("component supports tab navigation", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFileInputDriver }) {
-    yield initTestBed(`
-    <VStack>
-      <FileInput testId="fileInput" label="Input" />
-    </VStack>
-  `);
-    const driver = yield createFileInputDriver("fileInput");
-    yield driver.getTextBox().focus();
-    yield (0, fixtures_1.expect)(driver.getTextBox()).toBeFocused();
-    yield driver.getTextBox().press("Tab");
-    yield (0, fixtures_1.expect)(driver.getBrowseButton()).toBeVisible();
-    yield (0, fixtures_1.expect)(driver.getBrowseButton()).not.toBeDisabled();
-    yield (0, fixtures_1.expect)(driver.getBrowseButton()).toBeFocused();
-}));
-(0, fixtures_1.test)("component has hidden file input for screen readers", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFileInputDriver, }) {
-    yield initTestBed(`<FileInput/>`);
-    const driver = yield createFileInputDriver();
-    const hiddenInput = driver.getHiddenInput();
-    yield (0, fixtures_1.expect)(hiddenInput).toBeAttached();
-    yield (0, fixtures_1.expect)(hiddenInput).toHaveAttribute("type", "file");
-}));
-(0, fixtures_1.test)("component textbox is readonly for accessibility", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFileInputDriver, }) {
-    yield initTestBed(`<FileInput/>`);
-    const driver = yield createFileInputDriver();
-    (0, fixtures_1.expect)(yield driver.hasReadOnlyAttribute()).toBe(true);
-}));
-// =============================================================================
-// VISUAL STATE TESTS
-// =============================================================================
-(0, fixtures_1.test)("component applies theme variables correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFileInputDriver, }) {
-    yield initTestBed(`<FileInput/>`, {
-        testThemeVars: {
-            "backgroundColor-Button": "rgb(255, 0, 0)",
-        },
-    });
-    const driver = yield createFileInputDriver();
-    // FileInput uses Button themes, so check the button
-    yield (0, fixtures_1.expect)(driver.getBrowseButton()).toHaveCSS("background-color", "rgb(255, 0, 0)");
-}));
-(0, fixtures_1.test)("component shows validation states", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFileInputDriver }) {
-    yield initTestBed(`<FileInput validationStatus="error"/>`);
-    const driver = yield createFileInputDriver();
-    // Validation should be visible in the component
-    yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-    yield (0, fixtures_1.expect)(driver.getTextBox()).toBeVisible();
-}));
-(0, fixtures_1.test)("component supports different button variants", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFileInputDriver, }) {
-    yield initTestBed(`<FileInput variant="outline"/>`);
-    const driver = yield createFileInputDriver();
-    // Check that variant prop is passed through
-    yield (0, fixtures_1.expect)(driver.getBrowseButton()).toBeVisible();
-    yield (0, fixtures_1.expect)(driver.getBrowseButton()).toContainText("Browse");
-}));
-(0, fixtures_1.test)("component supports different button sizes", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFileInputDriver, }) {
-    yield initTestBed(`<FileInput buttonSize="lg"/>`);
-    const driver = yield createFileInputDriver();
-    yield (0, fixtures_1.expect)(driver.getBrowseButton()).toHaveClass(/lg/);
-}));
-(0, fixtures_1.test)("component supports button positioning", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFileInputDriver }) {
-    yield initTestBed(`<FileInput buttonPosition="start"/>`);
-    const driver = yield createFileInputDriver();
-    yield (0, fixtures_1.expect)(driver.getContainer()).toHaveClass(/buttonStart/);
-}));
-// =============================================================================
-// EDGE CASE TESTS (CRITICAL)
-// =============================================================================
-(0, fixtures_1.test)("component handles null and undefined props gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFileInputDriver, }) {
-    yield initTestBed(`<FileInput/>`);
-    const driver = yield createFileInputDriver();
-    yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-    (0, fixtures_1.expect)(yield driver.getSelectedFiles()).toBe("");
-}));
-(0, fixtures_1.test)("component handles empty acceptsFileType", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFileInputDriver }) {
-    yield initTestBed(`<FileInput acceptsFileType=""/>`);
-    const driver = yield createFileInputDriver();
-    (0, fixtures_1.expect)(yield driver.getAcceptedFileTypes()).toBe("");
-}));
-(0, fixtures_1.test)("component handles special characters in placeholder", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFileInputDriver, }) {
-    yield initTestBed(`<FileInput placeholder="Select file with émojis 🚀 & quotes"/>`);
-    const driver = yield createFileInputDriver();
-    const placeholder = yield driver.getPlaceholder();
-    (0, fixtures_1.expect)(placeholder).toBe("Select file with émojis 🚀 & quotes");
-}));
-(0, fixtures_1.test)("component handles conflicting multiple and directory props", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFileInputDriver, }) {
-    yield initTestBed(`<FileInput multiple="false" directory="true"/>`);
-    const driver = yield createFileInputDriver();
-    // Directory mode should enable multiple files
-    (0, fixtures_1.expect)(yield driver.isDirectory()).toBe(true);
-    (0, fixtures_1.expect)(yield driver.isMultiple()).toBe(true);
-}));
-(0, fixtures_1.test)("component handles empty file selection gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFileInputDriver, }) {
-    yield initTestBed(`<FileInput/>`);
-    const driver = yield createFileInputDriver();
-    (0, fixtures_1.expect)(yield driver.getSelectedFiles()).toBe("");
-}));
-// =============================================================================
-// PERFORMANCE TESTS
-// =============================================================================
-(0, fixtures_1.test)("component handles rapid button clicks efficiently", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFileInputDriver, }) {
-    const { testStateDriver } = yield initTestBed(`
-    <FileInput onFocus="testState = ++testState || 1"/>
-  `);
-    const driver = yield createFileInputDriver();
-    // Multiple rapid clicks should not cause issues
-    yield driver.getBrowseButton().click();
-    yield driver.getBrowseButton().click();
-    yield driver.getBrowseButton().click();
-    yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-}));
-// =============================================================================
-// INTEGRATION TESTS
-// =============================================================================
-(0, fixtures_1.test)("component works correctly in different layout contexts", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFileInputDriver, }) {
-    yield initTestBed(`
-    <VStack>
-      <FileInput label="Layout Test"/>
-    </VStack>
-  `);
-    const driver = yield createFileInputDriver();
-    yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-}));
-(0, fixtures_1.test)("component works in form context", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFileInputDriver }) {
-    yield initTestBed(`
-    <Form>
-      <FileInput label="Upload File" required="true"/>
-    </Form>
-  `);
-    const driver = yield createFileInputDriver();
-    yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-}));
-(0, fixtures_1.test)("gotFocus event fires on focus", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createFileInputDriver }) {
-    const { testStateDriver } = yield initTestBed(`
-      <FileInput testId="fileInput" onGotFocus="testState = 'focused'" />
-    `);
-    const driver = yield createFileInputDriver("fileInput");
-    yield driver.getTextBox().focus();
-    yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("focused");
-}));
-(0, fixtures_1.test)("gotFocus event fires on label focus", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-    const { testStateDriver } = yield initTestBed(`
-    <FileInput testId="fileInput" onGotFocus="testState = 'focused'" label="test" />
-  `);
-    yield page.getByText("test").click();
-    yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("focused");
-}));
-(0, fixtures_1.test)("lostFocus event fires on blue", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createFileInputDriver }) {
-    const { testStateDriver } = yield initTestBed(`
-      <FileInput testId="fileInput" onLostFocus="testState = 'blurred'" />
-    `);
-    const driver = yield createFileInputDriver("fileInput");
-    yield driver.getTextBox().focus();
-    yield driver.getTextBox().blur();
-    yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("blurred");
-}));
-(0, fixtures_1.test)("component supports custom button templates", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFileInputDriver, }) {
-    yield initTestBed(`
-    <FileInput>
-      <property name="buttonIcon">
-        <Icon name="upload"/>
-      </property>
-    </FileInput>
-  `);
-    const driver = yield createFileInputDriver();
-    yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-    yield (0, fixtures_1.expect)(driver.getBrowseButton()).toContainText("Browse");
-}));
-(0, fixtures_1.test)("component handles label positioning correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFileInputDriver, }) {
-    yield initTestBed(`
-    <FileInput 
-      label="Upload Document"
-      labelPosition="top"
-      labelWidth="100px"
-    />
-  `);
-    const driver = yield createFileInputDriver();
-    yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-}));
-// =============================================================================
-// VISUAL STATE TESTS
-// =============================================================================
-(0, fixtures_1.test)("input has correct width in px", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-    yield initTestBed(`<FileInput width="200px" testId="test"/>`, {});
-    const input = page.getByTestId("test");
-    const { width } = yield input.boundingBox();
-    (0, fixtures_1.expect)(width).toBe(200);
-}));
-(0, fixtures_1.test)("input with label has correct width in px", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-    yield initTestBed(`<FileInput width="200px" label="test" testId="test"/>`, {});
-    const input = page.getByTestId("test");
-    const { width } = yield input.boundingBox();
-    (0, fixtures_1.expect)(width).toBe(200);
-}));
-(0, fixtures_1.test)("input has correct width in %", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-    yield page.setViewportSize({ width: 400, height: 300 });
-    yield initTestBed(`<FileInput width="50%" testId="test"/>`, {});
-    const input = page.getByTestId("test");
-    const { width } = yield input.boundingBox();
-    (0, fixtures_1.expect)(width).toBe(200);
-}));
-(0, fixtures_1.test)("input with label has correct width in %", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-    yield page.setViewportSize({ width: 400, height: 300 });
-    yield initTestBed(`<FileInput width="50%" label="test" testId="test"/>`, {});
-    const input = page.getByTestId("test");
-    const { width } = yield input.boundingBox();
-    (0, fixtures_1.expect)(width).toBe(200);
-}));

package/dist/scripts/src/components/FileInput/FileInputNative.js

@@ -1,161 +0,0 @@
-"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;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FileInput = exports.defaultProps = void 0;
-exports.isFile = isFile;
-exports.isFileArray = isFileArray;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const dropzone = __importStar(require("react-dropzone"));
-const VisuallyHidden = __importStar(require("@radix-ui/react-visually-hidden"));
-const classnames_1 = __importDefault(require("classnames"));
-const FileInput_module_scss_1 = __importDefault(require("./FileInput.module.scss"));
-const constants_1 = require("../../components-core/constants");
-const misc_1 = require("../../components-core/utils/misc");
-const ButtonNative_1 = require("../Button/ButtonNative");
-const TextBoxNative_1 = require("../TextBox/TextBoxNative");
-// https://github.com/react-dropzone/react-dropzone/issues/1259
-const { useDropzone } = dropzone;
-exports.defaultProps = {
-    enabled: true,
-    buttonPosition: "end",
-    buttonLabel: "Browse",
-    multiple: false,
-    directory: false,
-    buttonThemeColor: "primary",
-    updateState: constants_1.noop,
-    onDidChange: constants_1.noop,
-    onFocus: constants_1.noop,
-    onBlur: constants_1.noop,
-};
-const FileInput = (_a) => {
-    var { id, enabled = exports.defaultProps.enabled, style, className, placeholder, buttonPosition = exports.defaultProps.buttonPosition, buttonLabel = exports.defaultProps.buttonLabel, buttonIcon, buttonIconPosition, variant, buttonThemeColor, buttonSize, autoFocus, validationStatus, updateState = exports.defaultProps.updateState, onDidChange = exports.defaultProps.onDidChange, onFocus = exports.defaultProps.onFocus, onBlur = exports.defaultProps.onBlur, registerComponentApi, value, initialValue, acceptsFileType, multiple = exports.defaultProps.multiple, directory = exports.defaultProps.directory, required } = _a, rest = __rest(_a, ["id", "enabled", "style", "className", "placeholder", "buttonPosition", "buttonLabel", "buttonIcon", "buttonIconPosition", "variant", "buttonThemeColor", "buttonSize", "autoFocus", "validationStatus", "updateState", "onDidChange", "onFocus", "onBlur", "registerComponentApi", "value", "initialValue", "acceptsFileType", "multiple", "directory", "required"]);
-    const _id = (0, react_1.useId)();
-    id = id || _id;
-    // Don't accept any (initial) value if it is not a File array explicitly
-    const _initialValue = isFileArray(initialValue) ? initialValue : undefined;
-    const _value = isFileArray(value) ? value : undefined;
-    const buttonRef = (0, react_1.useRef)(null);
-    const _acceptsFileType = typeof acceptsFileType === "string" ? acceptsFileType : acceptsFileType === null || acceptsFileType === void 0 ? void 0 : acceptsFileType.join(",");
-    (0, react_1.useEffect)(() => {
-        if (autoFocus) {
-            setTimeout(() => {
-                var _a;
-                (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-            }, 0);
-        }
-    }, [autoFocus]);
-    // --- Initialize the related field with the input's initial value
-    (0, react_1.useEffect)(() => {
-        updateState({ value: _initialValue }, { initial: true });
-    }, [_initialValue, updateState]);
-    // --- Manage obtaining and losing the focus
-    const handleOnFocus = (0, react_1.useCallback)((e) => {
-        // Only fire onFocus if focus is coming from outside the component
-        if (!e.currentTarget.contains(e.relatedTarget)) {
-            onFocus === null || onFocus === void 0 ? void 0 : onFocus();
-        }
-    }, [onFocus]);
-    const handleOnBlur = (0, react_1.useCallback)((e) => {
-        // Only fire onBlur if focus is leaving the component entirely
-        if (!e.currentTarget.contains(e.relatedTarget)) {
-            onBlur === null || onBlur === void 0 ? void 0 : onBlur();
-        }
-    }, [onBlur]);
-    const focus = (0, react_1.useCallback)(() => {
-        var _a;
-        (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    }, []);
-    // --- Handle the value change events for this input
-    const onDrop = (0, react_1.useCallback)((acceptedFiles) => {
-        if (!acceptedFiles.length)
-            return;
-        updateState({ value: acceptedFiles });
-        onDidChange(acceptedFiles);
-    }, [updateState, onDidChange]);
-    const { getRootProps, getInputProps, open } = useDropzone({
-        disabled: !enabled,
-        multiple: multiple || directory,
-        onDrop,
-        noClick: true,
-        noKeyboard: true,
-        noDragEventsBubbling: true,
-        useFsAccessApi: directory === false,
-    });
-    const doOpen = (0, misc_1.useEvent)(() => {
-        open();
-    });
-    (0, react_1.useEffect)(() => {
-        registerComponentApi === null || registerComponentApi === void 0 ? void 0 : registerComponentApi({
-            focus,
-            open: doOpen,
-        });
-    }, [focus, doOpen, registerComponentApi]);
-    // Solution source: https://stackoverflow.com/questions/1084925/input-type-file-show-only-button
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, classnames_1.default)(FileInput_module_scss_1.default.container, className, {
-            [FileInput_module_scss_1.default.buttonStart]: buttonPosition === "start",
-            [FileInput_module_scss_1.default.buttonEnd]: buttonPosition === "end",
-        }), style: style, onFocus: handleOnFocus, onBlur: handleOnBlur, tabIndex: -1 }, rest, { children: [(0, jsx_runtime_1.jsxs)("button", Object.assign({ id: id }, getRootProps({
-                tabIndex: 0,
-                disabled: !enabled,
-                className: FileInput_module_scss_1.default.textBoxWrapper,
-                onClick: open,
-                ref: buttonRef,
-                type: "button",
-            }), { children: [(0, jsx_runtime_1.jsx)(VisuallyHidden.Root, { children: (0, jsx_runtime_1.jsx)("input", Object.assign({}, getInputProps({
-                            webkitdirectory: directory ? "true" : undefined,
-                        }), { accept: _acceptsFileType })) }), (0, jsx_runtime_1.jsx)(TextBoxNative_1.TextBox, { placeholder: placeholder, enabled: enabled, value: (_value === null || _value === void 0 ? void 0 : _value.map((v) => v.name).join(", ")) || "", validationStatus: validationStatus, readOnly: true, tabIndex: -1 })] })), (0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { disabled: !enabled, type: "button", onClick: open, icon: buttonIcon, iconPosition: buttonIconPosition, variant: variant, themeColor: buttonThemeColor, size: buttonSize, className: FileInput_module_scss_1.default.button, autoFocus: autoFocus, children: buttonLabel })] })));
-};
-exports.FileInput = FileInput;
-function isFile(value) {
-    return value instanceof File;
-}
-function isFileArray(value) {
-    return Array.isArray(value) && value.every(isFile);
-}

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

@@ -1,58 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.fileUploadDropZoneComponentRenderer = exports.FileUploadDropZoneMd = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const FileUploadDropZone_module_scss_1 = __importDefault(require("./FileUploadDropZone.module.scss"));
-const renderers_1 = require("../../components-core/renderers");
-const themeVars_1 = require("../../components-core/theming/themeVars");
-const FileUploadDropZoneNative_1 = require("./FileUploadDropZoneNative");
-const metadata_helpers_1 = require("../metadata-helpers");
-const COMP = "FileUploadDropZone";
-exports.FileUploadDropZoneMd = (0, metadata_helpers_1.createMetadata)({
-    status: "stable",
-    description: "`FileUploadDropZone` enables users to upload files by dragging and dropping " +
-        "files from their local file system onto a designated area within the UI.",
-    props: {
-        text: {
-            description: "With this property, you can change the default text to display when files " +
-                "are dragged over the drop zone.",
-            defaultValue: FileUploadDropZoneNative_1.defaultProps.text,
-            type: "string",
-        },
-        allowPaste: {
-            description: "This property indicates if the drop zone accepts files pasted from the " +
-                "clipboard (\`true\`) or " +
-                "only dragged files (\`false\`).",
-            type: "boolean",
-            defaultValue: FileUploadDropZoneNative_1.defaultProps.allowPaste,
-        },
-        enabled: (0, metadata_helpers_1.d)(`If set to \`false\`, the drop zone will be disabled and users will not be able to upload files.`, null, "boolean", true),
-        acceptedFileTypes: (0, metadata_helpers_1.d)(`Accepted file MIME types, separated by commas. For example: 'image/*,application/pdf'.`),
-        maxFiles: (0, metadata_helpers_1.d)(`The maximum number of files that can be selected.`),
-    },
-    events: {
-        upload: (0, metadata_helpers_1.d)(`This component accepts files for upload but does not perform the actual operation. It fires ` +
-            `the \`upload\` event and passes the list files to upload in the method's argument. You can ` +
-            `use the passed file information to implement the upload (according to the protocol your ` +
-            `backend supports).`),
-    },
-    themeVars: (0, themeVars_1.parseScssVar)(FileUploadDropZone_module_scss_1.default.themeVars),
-    defaultThemeVars: {
-        "backgroundColor-FileUploadDropZone": "$backgroundColor",
-        "backgroundColor-dropping-FileUploadDropZone": "$backgroundColor--selected",
-        "opacity-dropping-FileUploadDropZone": "0.5",
-        "textColor-FileUploadDropZone": "$textColor",
-        light: {
-        // --- No light-specific theme vars
-        },
-        dark: {
-        // --- No dark-specific theme vars
-        },
-    },
-});
-exports.fileUploadDropZoneComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.FileUploadDropZoneMd, ({ node, extractValue, updateState, renderChild, lookupEventHandler, registerComponentApi, className }) => {
-    return ((0, jsx_runtime_1.jsx)(FileUploadDropZoneNative_1.FileUploadDropZone, { onUpload: lookupEventHandler("upload"), uid: extractValue(node.uid), registerComponentApi: registerComponentApi, className: className, allowPaste: extractValue(node.props.allowPaste), text: extractValue(node.props.text), disabled: !extractValue.asOptionalBoolean(node.props.enabled, true), updateState: updateState, acceptedFileTypes: extractValue.asOptionalString(node.props.acceptedFileTypes), maxFiles: extractValue.asOptionalNumber(node.props.maxFiles), children: renderChild(node.children, { type: "Stack" }) }));
-});