xmlui 0.4.0

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

@@ -0,0 +1,175 @@
+"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 __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.menuSeparatorRenderer = exports.subMenuItemRenderer = exports.menuItemRenderer = exports.dropdownMenuComponentRenderer = void 0;
+exports.DropdownMenu = DropdownMenu;
+exports.MenuItem = MenuItem;
+exports.MenuSeparator = MenuSeparator;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ReactDropdownMenu = __importStar(require("@radix-ui/react-dropdown-menu"));
+const DropdownMenu_module_scss_1 = __importDefault(require("./DropdownMenu.module.scss"));
+const renderers_1 = require("@components-core/renderers");
+const themeVars_1 = require("@components-core/theming/themeVars");
+const Button_1 = require("@components/Button/Button");
+const ThemeContext_1 = require("@components-core/theming/ThemeContext");
+const descriptorHelper_1 = require("@components-core/descriptorHelper");
+const Icon_1 = require("@components/Icon/Icon");
+const constants_1 = require("@components-core/constants");
+function DropdownMenu({ triggerTemplate, children, label, registerComponentApi, layout, onWillOpen, alignment = "start", disabled = false, triggerButtonVariant = "ghost", triggerButtonThemeColor = "primary", }) {
+    const { root } = (0, ThemeContext_1.useTheme)();
+    const [open, setOpen] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        registerComponentApi === null || registerComponentApi === void 0 ? void 0 : registerComponentApi({
+            close: () => setOpen(false),
+        });
+    }, [registerComponentApi]);
+    return ((0, jsx_runtime_1.jsxs)(ReactDropdownMenu.Root, { open: open, onOpenChange: (isOpen) => __awaiter(this, void 0, void 0, function* () {
+            if (isOpen) {
+                const willOpenResult = yield (onWillOpen === null || onWillOpen === void 0 ? void 0 : onWillOpen());
+                if (willOpenResult === false) {
+                    return;
+                }
+            }
+            setOpen(isOpen);
+        }), children: [(0, jsx_runtime_1.jsx)(ReactDropdownMenu.Trigger, { asChild: true, disabled: disabled, children: triggerTemplate ? (triggerTemplate) : ((0, jsx_runtime_1.jsx)(Button_1.Button, { icon: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "chevrondown" }), type: "button", variant: triggerButtonVariant, themeColor: triggerButtonThemeColor, children: label })) }), (0, jsx_runtime_1.jsx)(ReactDropdownMenu.Portal, { container: root, children: (0, jsx_runtime_1.jsx)(ReactDropdownMenu.Content, { align: alignment, style: layout, className: DropdownMenu_module_scss_1.default.DropdownMenuContent, children: children }) })] }));
+}
+const metadata = {
+    displayName: "DropdownMenu",
+    description: "It represents a dropdown menu with multiple menu items. Clicking it displays the available menu items.",
+    props: {
+        label: (0, descriptorHelper_1.desc)("The label to display on the button"),
+        triggerTemplate: (0, descriptorHelper_1.desc)("The trigger template to use"),
+        alignment: (0, descriptorHelper_1.desc)("The alignment of the drop-down menu"),
+        enabled: (0, descriptorHelper_1.desc)("Enables or disables the component"),
+        triggerButtonVariant: (0, descriptorHelper_1.desc)("The variant of the trigger button"),
+        triggerButtonThemeColor: (0, descriptorHelper_1.desc)("The theme color of the trigger button"),
+    },
+    themeVars: (0, themeVars_1.parseScssVar)(DropdownMenu_module_scss_1.default.themeVars),
+    defaultThemeVars: {
+        "color-bg-DropdownMenu": "$color-bg-primary",
+        "min-width-DropdownMenu": "160px",
+        "shadow-DropdownMenu": "$shadow-md",
+        "style-border-DropdownMenu-content": "solid",
+    },
+};
+exports.dropdownMenuComponentRenderer = (0, renderers_1.createComponentRenderer)("DropdownMenu", ({ node, extractValue, renderChild, registerComponentApi, layoutCss, lookupEventHandler, }) => {
+    var _a, _b, _c;
+    return ((0, jsx_runtime_1.jsx)(DropdownMenu, { triggerTemplate: renderChild((_a = node.props) === null || _a === void 0 ? void 0 : _a.triggerTemplate), label: extractValue((_b = node.props) === null || _b === void 0 ? void 0 : _b.label), registerComponentApi: registerComponentApi, onWillOpen: lookupEventHandler("willOpen"), layout: layoutCss, alignment: extractValue((_c = node.props) === null || _c === void 0 ? void 0 : _c.alignment), disabled: !extractValue.asOptionalBoolean(node.props.enabled, true), triggerButtonThemeColor: extractValue(node.props.triggerButtonThemeColor), triggerButtonVariant: extractValue(node.props.triggerButtonVariant), children: renderChild(node.children) }));
+}, metadata);
+function MenuItem({ children, onClick = constants_1.noop, label, style, icon, iconPosition = "start", }) {
+    const iconToLeft = iconPosition === "left" || iconPosition === "start";
+    return ((0, jsx_runtime_1.jsxs)(ReactDropdownMenu.Item, { style: style, className: DropdownMenu_module_scss_1.default.DropdownMenuItem, onClick: (event) => {
+            event.stopPropagation();
+            onClick(event);
+        }, children: [iconToLeft && icon, (0, jsx_runtime_1.jsx)("div", { className: DropdownMenu_module_scss_1.default.wrapper, children: label !== null && label !== void 0 ? label : children }), !iconToLeft && icon] }));
+}
+const menuItemMetadata = {
+    displayName: "MenuItem",
+    description: "Represents a menu item within a DropDownMenu, clicking of which triggers an action",
+    props: {
+        iconPosition: (0, descriptorHelper_1.desc)("Position of the icon displayed"),
+        icon: (0, descriptorHelper_1.desc)("Optional icon ID to display the particular icon"),
+        label: (0, descriptorHelper_1.desc)("The label to display on the button"),
+        to: (0, descriptorHelper_1.desc)("The target URL"),
+    },
+    events: {
+        click: (0, descriptorHelper_1.desc)("Triggers when the menu item is clicked"),
+    },
+    themeVars: (0, themeVars_1.parseScssVar)(DropdownMenu_module_scss_1.default.themeVars),
+    defaultThemeVars: {
+        "color-bg-MenuItem": "$color-bg-dropdown-item",
+        "color-MenuItem": "$color-text-primary",
+        "font-family-MenuItem": "$font-family",
+        "font-size-MenuItem": "inherit",
+        "padding-vertical-MenuItem": "$space-2",
+        "padding-horizontal-MenuItem": "$space-3",
+        "color-bg-MenuItem--hover": "$color-bg-dropdown-item--active",
+        "color-MenuItem--hover": "inherit",
+        "gap-MenuItem": "$space-2",
+    },
+};
+exports.menuItemRenderer = (0, renderers_1.createComponentRenderer)("MenuItem", ({ node, renderChild, lookupEventHandler, lookupAction, extractValue, layoutCss, }) => {
+    var _a, _b;
+    const clickEventHandler = lookupEventHandler("click");
+    let clickHandler;
+    const to = extractValue(node.props.to);
+    if (!clickEventHandler && (to === null || to === void 0 ? void 0 : to.trim())) {
+        const navigateAction = lookupAction("navigate", { signError: false });
+        clickHandler = () => {
+            navigateAction === null || navigateAction === void 0 ? void 0 : navigateAction({ pathname: to });
+        };
+    }
+    return ((0, jsx_runtime_1.jsx)(MenuItem, { onClick: clickHandler, label: extractValue((_a = node.props) === null || _a === void 0 ? void 0 : _a.label), style: layoutCss, iconPosition: extractValue(node.props.iconPosition), icon: ((_b = node.props) === null || _b === void 0 ? void 0 : _b.icon) && (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: extractValue(node.props.icon) }), children: renderChild(node.children) }));
+}, menuItemMetadata);
+function SubMenuItem({ children, label, triggerTemplate }) {
+    const { root } = (0, ThemeContext_1.useTheme)();
+    return ((0, jsx_runtime_1.jsxs)(ReactDropdownMenu.Sub, { children: [(0, jsx_runtime_1.jsx)(ReactDropdownMenu.SubTrigger, { className: DropdownMenu_module_scss_1.default.DropdownMenuSubTrigger, asChild: true, children: triggerTemplate ? triggerTemplate : (0, jsx_runtime_1.jsx)("div", { children: label }) }), (0, jsx_runtime_1.jsx)(ReactDropdownMenu.Portal, { container: root, children: (0, jsx_runtime_1.jsx)(ReactDropdownMenu.SubContent, { className: DropdownMenu_module_scss_1.default.DropdownMenuSubContent, children: children }) })] }));
+}
+const subMenuItemMetadata = {
+    displayName: "SubMenuItem",
+    description: "Represents a nested menu item within another menu or menu item",
+    props: {
+        label: (0, descriptorHelper_1.desc)("The label to display as the name of the submenu"),
+        triggerTemplate: (0, descriptorHelper_1.desc)("The trigger template to use for this submenu"),
+    },
+};
+exports.subMenuItemRenderer = (0, renderers_1.createComponentRenderer)("SubMenuItem", ({ node, renderChild, extractValue }) => {
+    var _a, _b;
+    return ((0, jsx_runtime_1.jsx)(SubMenuItem, { label: extractValue((_a = node.props) === null || _a === void 0 ? void 0 : _a.label), triggerTemplate: renderChild((_b = node.props) === null || _b === void 0 ? void 0 : _b.triggerTemplate), children: renderChild(node.children) }));
+}, subMenuItemMetadata);
+// ====================================================================================================================
+// React MenuSeparator component implementation
+function MenuSeparator() {
+    return ((0, jsx_runtime_1.jsx)(ReactDropdownMenu.Separator, { className: DropdownMenu_module_scss_1.default.DropdownMenuSeparator }));
+}
+const menuSeparatorMetadata = {
+    displayName: "MenuSeparator",
+    description: "Displays a separator line between menu items",
+    themeVars: (0, themeVars_1.parseScssVar)(DropdownMenu_module_scss_1.default.themeVars),
+    defaultThemeVars: {
+        "margin-top-MenuSeparator": "$space-1",
+        "margin-bottom-MenuSeparator": "$space-1",
+        "width-MenuSeparator": "100%",
+        "height-MenuSeparator": "1px",
+        "color-MenuSeparator": "$color-border-dropdown-item",
+        "margin-horizontal-MenuSeparator": "12px",
+    },
+};
+exports.menuSeparatorRenderer = (0, renderers_1.createComponentRenderer)("MenuSeparator", () => {
+    return (0, jsx_runtime_1.jsx)(MenuSeparator, {});
+}, menuSeparatorMetadata);

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

@@ -0,0 +1,56 @@
+"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 __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 });
+exports.emojiSelectorRenderer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const renderers_1 = require("@components-core/renderers");
+const constants_1 = require("@components-core/constants");
+const emoji_picker_react_1 = __importStar(require("emoji-picker-react"));
+const ThemeContext_1 = require("@components-core/theming/ThemeContext");
+const descriptorHelper_1 = require("@components-core/descriptorHelper");
+const EmojiSelector = ({ select = constants_1.noop, theme = emoji_picker_react_1.Theme.LIGHT, autoFocus = false }) => ((0, jsx_runtime_1.jsx)(emoji_picker_react_1.default, { autoFocusSearch: autoFocus, onEmojiClick: (emojiObject) => __awaiter(void 0, void 0, void 0, function* () {
+        yield select(emojiObject.emoji);
+    }), lazyLoadEmojis: true, theme: theme, previewConfig: { showPreview: false }, skinTonesDisabled: true, height: 360, emojiStyle: emoji_picker_react_1.EmojiStyle.NATIVE }));
+const metadata = {
+    displayName: "EmojiSelector",
+    description: "A panel to select an emoji from the available ones",
+    events: {
+        select: (0, descriptorHelper_1.desc)("Sign that an emoji has been selected"),
+    },
+};
+exports.emojiSelectorRenderer = (0, renderers_1.createComponentRenderer)("EmojiSelector", ({ node, lookupEventHandler, extractValue }) => {
+    const onActionSelect = lookupEventHandler("select");
+    const theme = (0, ThemeContext_1.useTheme)();
+    return ((0, jsx_runtime_1.jsx)(EmojiSelector, { select: onActionSelect, theme: theme.activeThemeTone, autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus) }));
+}, metadata);

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

@@ -0,0 +1,127 @@
+"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.fileInputRenderer = exports.FileInput = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Icon_1 = require("@components/Icon/Icon");
+const FileInput_module_scss_1 = __importDefault(require("./FileInput.module.scss"));
+const renderers_1 = require("@components-core/renderers");
+const Button_1 = require("@components/Button/Button");
+const input_abstractions_1 = require("@components/Input/input-abstractions");
+const constants_1 = require("@components-core/constants");
+const react_dropzone_1 = require("react-dropzone");
+const misc_1 = require("@components-core/utils/misc");
+const VisuallyHidden = __importStar(require("@radix-ui/react-visually-hidden"));
+const TextBox_1 = require("@components/TextBox/TextBox");
+const themeVars_1 = require("@components-core/theming/themeVars");
+const descriptorHelper_1 = require("@components-core/descriptorHelper");
+const FileInput = ({ id, enabled = true, buttonLabel = "Browse", buttonIcon, buttonIconPosition, variant, buttonThemeColor, buttonSize, autoFocus, validationStatus, updateState = constants_1.noop, onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, registerComponentApi, value, initialValue, acceptsFileType, multiple = false, directory = false, }) => {
+    // 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 });
+    }, [_initialValue, updateState]);
+    const handleOnBlur = (0, react_1.useCallback)(() => {
+        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 } = (0, react_dropzone_1.useDropzone)({
+        disabled: !enabled,
+        multiple: multiple || directory,
+        onDrop,
+        noClick: true,
+        noKeyboard: true,
+        noDragEventsBubbling: true,
+        useFsAccessApi: directory === false,
+    });
+    // --- Manage obtaining and losing the focus
+    const handleOnFocus = (0, react_1.useCallback)(() => {
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus();
+    }, [onFocus]);
+    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", { className: FileInput_module_scss_1.default.container, children: [(0, jsx_runtime_1.jsxs)("button", Object.assign({}, getRootProps({
+                tabIndex: 0,
+                onFocus: handleOnFocus,
+                onBlur: handleOnBlur,
+                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)(TextBox_1.TextBox, { 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)(Button_1.Button, { id: id, 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;
+const metadata = {
+    displayName: "FileInputBox",
+    description: "Represents an input component for textual data entry",
+    props: Object.assign(Object.assign(Object.assign({}, input_abstractions_1.inputComponentPropertyDescriptors), Button_1.buttonStylingProps), { buttonLabel: (0, descriptorHelper_1.desc)("The label of the button that opens the file dialog"), buttonIcon: (0, descriptorHelper_1.desc)("The ID of the icon to display in the button"), buttonIconPosition: (0, descriptorHelper_1.desc)("The position of the icon within the button (left, right)"), acceptsFileType: (0, descriptorHelper_1.desc)("A list of file types the open dialog accepts"), multiple: (0, descriptorHelper_1.desc)("Allow selecting multiple files?"), directory: (0, descriptorHelper_1.desc)("Allow selecting a directory?"), buttonSize: (0, descriptorHelper_1.desc)("The size of the button"), buttonThemeColor: (0, descriptorHelper_1.desc)("The theme color of the button") }),
+    events: input_abstractions_1.inputComponentEventDescriptors,
+    themeVars: (0, themeVars_1.parseScssVar)(FileInput_module_scss_1.default.themeVars),
+};
+exports.fileInputRenderer = (0, renderers_1.createComponentRenderer)("FileInput", ({ node, state, updateState, extractValue, lookupEventHandler, registerComponentApi }) => {
+    const iconName = extractValue.asString(node.props.buttonIcon);
+    return ((0, jsx_runtime_1.jsx)(exports.FileInput, { enabled: extractValue.asOptionalBoolean(node.props.enabled), variant: extractValue(node.props.variant), buttonThemeColor: extractValue(node.props.buttonThemeColor), buttonSize: extractValue(node.props.buttonSize), buttonIcon: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: iconName }), buttonIconPosition: extractValue(node.props.buttonIconPosition), buttonLabel: extractValue.asOptionalString(node.props.buttonLabel), updateState: updateState, value: 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), initialValue: extractValue(node.props.initialValue), acceptsFileType: extractValue(node.props.acceptsFileType) }));
+}, metadata);
+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

@@ -0,0 +1,106 @@
+"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.fileUploadDropZoneComponentRenderer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_dropzone_1 = require("react-dropzone");
+const Icon_1 = require("@components/Icon/Icon");
+const FileUploadDropZone_module_scss_1 = __importDefault(require("./FileUploadDropZone.module.scss"));
+const misc_1 = require("@components-core/utils/misc");
+const renderers_1 = require("@components-core/renderers");
+const constants_1 = require("@components-core/constants");
+const descriptorHelper_1 = require("@components-core/descriptorHelper");
+const themeVars_1 = require("@components-core/theming/themeVars");
+function FileUploadDropZone({ children, onUpload = constants_1.asyncNoop, uid = "fileUploadDialog", registerComponentApi, style, allowPaste = true, text = "Drop files here", disabled = false, }) {
+    const onDrop = (0, react_1.useCallback)((acceptedFiles) => __awaiter(this, void 0, void 0, function* () {
+        if (!acceptedFiles.length) {
+            return;
+        }
+        onUpload === null || onUpload === void 0 ? void 0 : onUpload(acceptedFiles);
+    }), [onUpload]);
+    const { getRootProps, getInputProps, isDragActive, open, inputRef } = (0, react_dropzone_1.useDropzone)({
+        onDrop,
+        noClick: true,
+        noKeyboard: true,
+        noDragEventsBubbling: true,
+        disabled,
+    });
+    const doOpen = (0, misc_1.useEvent)(() => {
+        open();
+    });
+    const handleOnPaste = (0, react_1.useCallback)((event) => {
+        var _a, _b;
+        if (!allowPaste) {
+            return;
+        }
+        if (!inputRef.current) {
+            return;
+        }
+        if ((_a = event.clipboardData) === null || _a === void 0 ? void 0 : _a.files) {
+            const items = ((_b = event.clipboardData) === null || _b === void 0 ? void 0 : _b.items) || [];
+            const files = [];
+            for (let i = 0; i < items.length; i++) {
+                const item = items[i];
+                if (item.kind === "file") {
+                    const file = item.getAsFile();
+                    if (file !== null) {
+                        files.push(file);
+                    }
+                }
+            }
+            if (files.length > 0) {
+                //the clipboardData.files doesn't necessarily contains files... so we have to double check it
+                event.stopPropagation(); //it's for nested file upload dropzones
+                event.preventDefault(); // and this one is for preventing to paste in the file name, if we a have stored file on the clipboard (copied from finder/windows explorer for example)
+                //stolen from here: https://github.com/react-dropzone/react-dropzone/issues/1210#issuecomment-1537862105
+                inputRef.current.files = event.clipboardData.files;
+                inputRef.current.dispatchEvent(new Event("change", { bubbles: true }));
+            }
+        }
+    }, [allowPaste, inputRef]);
+    (0, react_1.useEffect)(() => {
+        registerComponentApi({
+            open: doOpen,
+        });
+    }, [doOpen, registerComponentApi, uid]);
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, getRootProps(), { style: style, className: FileUploadDropZone_module_scss_1.default.wrapper, onPaste: handleOnPaste, children: [(0, jsx_runtime_1.jsx)("input", Object.assign({}, getInputProps())), children, isDragActive && ((0, jsx_runtime_1.jsxs)("div", { className: FileUploadDropZone_module_scss_1.default.dropPlaceholder, children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "upload" }), text] }))] })));
+}
+const metadata = {
+    displayName: "FileUploadDropZone",
+    description: "A screen area to drop files to upload",
+    props: {
+        text: (0, descriptorHelper_1.desc)("Text to display"),
+        allowPaste: (0, descriptorHelper_1.desc)("Allow paste files?"),
+    },
+    events: {
+        upload: (0, descriptorHelper_1.desc)("Triggered when a file is about to upload"),
+    },
+    themeVars: (0, themeVars_1.parseScssVar)(FileUploadDropZone_module_scss_1.default.themeVars),
+    defaultThemeVars: {
+        "color-bg-FileUploadDropZone": "$color-bg",
+        "color-bg-dropping-FileUploadDropZone": "$color-bg--selected",
+        "opacity-dropping-FileUploadDropZone": "0.5",
+        "color-text-FileUploadDropZone": "$color-text",
+        light: {
+        // --- No light-specific theme vars
+        },
+        dark: {
+        // --- No dark-specific theme vars
+        },
+    },
+};
+exports.fileUploadDropZoneComponentRenderer = (0, renderers_1.createComponentRenderer)("FileUploadDropZone", ({ node, extractValue, renderChild, lookupEventHandler, registerComponentApi, layoutCss }) => {
+    return ((0, jsx_runtime_1.jsx)(FileUploadDropZone, { onUpload: lookupEventHandler("upload"), uid: extractValue(node.uid), registerComponentApi: registerComponentApi, style: layoutCss, allowPaste: extractValue(node.props.allowPaste), text: extractValue(node.props.text), disabled: !extractValue.asOptionalBoolean(node.props.enabled, true), children: renderChild(node.children, { type: "Stack" }) }));
+}, metadata);

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

@@ -0,0 +1,139 @@
+"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.flowLayoutComponentRenderer = void 0;
+exports.FlowLayout = FlowLayout;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const FlowLayout_module_scss_1 = __importDefault(require("./FlowLayout.module.scss"));
+const renderers_1 = require("@components-core/renderers");
+const misc_1 = require("@components-core/utils/misc");
+const EngineError_1 = require("@components-core/EngineError");
+const classnames_1 = __importDefault(require("@components-core/utils/classnames"));
+const style_compiler_1 = require("../../parsers/style-parser/style-compiler");
+const ThemeContext_1 = require("@components-core/theming/ThemeContext");
+const themeVars_1 = require("@components-core/theming/themeVars");
+const descriptorHelper_1 = require("@components-core/descriptorHelper");
+const lodash_es_1 = require("lodash-es");
+const css_utils_1 = require("@components-core/utils/css-utils");
+const hooks_1 = require("@components-core/utils/hooks");
+const resolvedCssVars = {};
+const FlowLayoutContext = (0, react_1.createContext)({
+    rowGap: 0,
+    columnGap: 0,
+    setNumberOfChildren: lodash_es_1.noop,
+});
+function FlowItemWrapper(_a) {
+    var { children } = _a, restProps = __rest(_a, ["children"]);
+    const { rowGap, columnGap, setNumberOfChildren } = (0, react_1.useContext)(FlowLayoutContext);
+    (0, hooks_1.useIsomorphicLayoutEffect)(() => {
+        setNumberOfChildren((prev) => prev + 1);
+        return () => {
+            setNumberOfChildren((prev) => prev - 1);
+        };
+    }, [setNumberOfChildren]);
+    const { activeTheme, root } = (0, ThemeContext_1.useTheme)();
+    const _width = restProps.width || "100%";
+    const _minWidth = restProps.minWidth || undefined;
+    const _maxWidth = restProps.maxWidth || undefined;
+    const { width = _width, minWidth, maxWidth, flex, } = (0, react_1.useMemo)(() => {
+        return ((0, style_compiler_1.compileLayout)({ width: _width, maxWidth: _maxWidth, minWidth: _minWidth }, activeTheme.themeVars, {
+            type: "Stack",
+            orientation: "horizontal",
+        }).cssProps || {});
+    }, [_maxWidth, _minWidth, _width, activeTheme.themeVars]);
+    const resolvedWidth = (0, react_1.useMemo)(() => {
+        if (width && typeof width === "string" && width.startsWith("var(")) {
+            if (!resolvedCssVars[width]) {
+                const varName = width.substring(4, width.length - 1);
+                const resolved = getComputedStyle(root).getPropertyValue(varName);
+                resolvedCssVars[width] = resolved || _width;
+            }
+            return resolvedCssVars[width];
+        }
+        return width || _width;
+    }, [_width, root, width]);
+    const isWidthPercentage = typeof resolvedWidth === "string" && resolvedWidth.endsWith("%");
+    const _columnGap = (0, css_utils_1.normalizeCssValueForCalc)(columnGap);
+    const isViewportPhone = (0, hooks_1.useMediaQuery)("(max-width: 420px)"); //TODO useContainerQuery
+    const isViewportTablet = (0, hooks_1.useMediaQuery)("(max-width: 800px)");
+    const outerWrapperStyle = {
+        minWidth,
+        maxWidth,
+        width: isWidthPercentage
+            ? `min(${width} * ${isViewportPhone ? "8" : isViewportTablet ? "4" : "1"}, 100%)`
+            : `min(calc(${width} + ${_columnGap}), 100%)`,
+        paddingBottom: rowGap,
+        flex,
+    };
+    const isStarSizing = flex !== undefined;
+    if (isStarSizing) {
+        //star sizing
+        outerWrapperStyle.width = "100%";
+        outerWrapperStyle.minWidth = minWidth || "1px";
+    }
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: outerWrapperStyle, children: (0, jsx_runtime_1.jsx)("div", { style: { paddingRight: _columnGap }, className: FlowLayout_module_scss_1.default.flowItem, children: children }) }), isStarSizing && (0, jsx_runtime_1.jsx)("div", { className: FlowLayout_module_scss_1.default.break })] }));
+}
+function FlowLayout({ style, columnGap, rowGap, children }) {
+    const [numberOfChildren, setNumberOfChildren] = (0, react_1.useState)(0);
+    const safeColumnGap = numberOfChildren === 1 ? 0 : columnGap;
+    // --- Be smart about rowGap
+    const _rowGap = (0, css_utils_1.getSizeString)(rowGap);
+    const _columnGap = (0, css_utils_1.getSizeString)(safeColumnGap);
+    const outerStyle = Object.assign({ overflow: "auto" }, style);
+    const innerStyle = {
+        // We put a negative margin on the container to fill the space for the row's last columnGap
+        marginRight: `calc(-1 * ${_columnGap})`,
+        marginBottom: `calc(-1 * ${_rowGap})`,
+    };
+    const flowLayoutContextValue = (0, react_1.useMemo)(() => {
+        return {
+            rowGap: _rowGap,
+            columnGap: _columnGap,
+            setNumberOfChildren,
+        };
+    }, [_columnGap, _rowGap]);
+    return ((0, jsx_runtime_1.jsx)(FlowLayoutContext.Provider, { value: flowLayoutContextValue, children: (0, jsx_runtime_1.jsx)("div", { style: outerStyle, children: (0, jsx_runtime_1.jsx)("div", { style: { overflow: "hidden" }, children: (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(FlowLayout_module_scss_1.default.flowContainer, FlowLayout_module_scss_1.default.horizontal), style: innerStyle, children: children }) }) }) }));
+}
+const metadata = {
+    displayName: "FlowLayout",
+    description: "",
+    props: {
+        columnGap: (0, descriptorHelper_1.desc)("Gap between flow layout items in a row"),
+        rowGap: (0, descriptorHelper_1.desc)("Gap between flow layout rows"),
+    },
+    themeVars: (0, themeVars_1.parseScssVar)(FlowLayout_module_scss_1.default.themeVars),
+};
+exports.flowLayoutComponentRenderer = (0, renderers_1.createComponentRenderer)("FlowLayout", ({ node, renderChild, layoutCss, extractValue }) => {
+    var _a, _b;
+    if (!(0, misc_1.isComponentDefChildren)(node.children)) {
+        throw new EngineError_1.NotAComponentDefError();
+    }
+    // Only calculate column gaps if there are more than 1 child
+    const columnGap = extractValue.asSize((_a = node.props) === null || _a === void 0 ? void 0 : _a.columnGap) || layoutCss.gap || 0;
+    const rowGap = extractValue.asSize((_b = node.props) === null || _b === void 0 ? void 0 : _b.rowGap) || layoutCss.gap || 0;
+    return ((0, jsx_runtime_1.jsx)(FlowLayout, { style: layoutCss, columnGap: columnGap, rowGap: rowGap, children: renderChild(node.children, {
+            wrapChild: ({ node, extractValue }, renderedChild, hints) => {
+                var _a, _b, _c;
+                if (hints === null || hints === void 0 ? void 0 : hints.opaque) {
+                    return renderedChild;
+                }
+                // Handle SpaceFiller as a * width item
+                const width = node.type === "SpaceFiller" ? "*" : extractValue((_a = node.props) === null || _a === void 0 ? void 0 : _a.width);
+                return ((0, jsx_runtime_1.jsx)(FlowItemWrapper, { width: width, minWidth: extractValue((_b = node.props) === null || _b === void 0 ? void 0 : _b.minWidth), maxWidth: extractValue((_c = node.props) === null || _c === void 0 ? void 0 : _c.maxWidth), children: renderedChild }));
+            },
+        }) }));
+}, metadata);

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

@@ -0,0 +1,42 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.footerRenderer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Footer_module_scss_1 = __importDefault(require("./Footer.module.scss"));
+const renderers_1 = require("@components-core/renderers");
+const themeVars_1 = require("@components-core/theming/themeVars");
+const base_utils_1 = require("@components-core/theming/themes/base-utils");
+const AppLayoutContext_1 = require("@components/App/AppLayoutContext");
+const react_dom_1 = require("react-dom");
+const classnames_1 = __importDefault(require("@components-core/utils/classnames"));
+// =====================================================================================================================
+// React Footer component implementation
+function Footer({ children, style, className, }) {
+    const appLayoutContext = (0, AppLayoutContext_1.useAppLayoutContext)();
+    const content = ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(Footer_module_scss_1.default.wrapper, className), style: style, children: children }));
+    const { footerRoot } = appLayoutContext || {};
+    if (footerRoot) {
+        return (0, react_dom_1.createPortal)(content, footerRoot);
+    }
+    return content;
+}
+const metadata = {
+    displayName: "Footer",
+    description: "Display an application footer",
+    themeVars: (0, themeVars_1.parseScssVar)(Footer_module_scss_1.default.themeVars),
+    defaultThemeVars: Object.assign(Object.assign({ "color-bg-Footer": "$color-bg-AppHeader", "vertical-alignment-Footer": "center", "max-content-width-Footer": "$max-content-width-App" }, (0, base_utils_1.paddingSubject)("Footer", { horizontal: "$space-4", vertical: "$space-1" })), { light: {
+        // --- No light-specific theme vars
+        }, dark: {
+        // --- No dark-specific theme vars
+        } }),
+};
+exports.footerRenderer = (0, renderers_1.createComponentRenderer)("Footer", ({ node, renderChild, layoutCss, layoutContext }) => {
+    return ((0, jsx_runtime_1.jsx)(Footer, { style: layoutCss, className: layoutContext === null || layoutContext === void 0 ? void 0 : layoutContext.themeClassName, children: renderChild(node.children, {
+            // Since the Footer is a flex container, it's children should behave the same as in a stack
+            type: "Stack",
+            orientation: "horizontal"
+        }) }));
+}, metadata);