xmlui 0.4.0

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

@@ -0,0 +1,120 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.markdownComponentRenderer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const renderers_1 = require("@components-core/renderers");
+const react_markdown_1 = __importDefault(require("react-markdown"));
+const Heading_1 = require("@components/Heading/Heading");
+const Text_1 = require("../Text/Text");
+const Markdown_module_scss_1 = __importDefault(require("./Markdown.module.scss"));
+const themeVars_1 = require("@components-core/theming/themeVars");
+const Link_1 = require("@components/Link/Link");
+const Image_1 = require("@components/Image/Image");
+const Markdown = (0, react_1.memo)(function Markdown({ children }) {
+    if (typeof children !== "string") {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(react_markdown_1.default, { components: {
+            h1({ id, children }) {
+                return ((0, jsx_runtime_1.jsx)(Heading_1.Heading, { uid: id, level: "h1", children: children }));
+            },
+            h2({ id, children }) {
+                return ((0, jsx_runtime_1.jsx)(Heading_1.Heading, { uid: id, level: "h2", children: children }));
+            },
+            h3({ id, children }) {
+                return ((0, jsx_runtime_1.jsx)(Heading_1.Heading, { uid: id, level: "h3", children: children }));
+            },
+            h4({ id, children }) {
+                return ((0, jsx_runtime_1.jsx)(Heading_1.Heading, { uid: id, level: "h4", children: children }));
+            },
+            h5({ id, children }) {
+                return ((0, jsx_runtime_1.jsx)(Heading_1.Heading, { uid: id, level: "h5", children: children }));
+            },
+            h6({ id, children }) {
+                return ((0, jsx_runtime_1.jsx)(Heading_1.Heading, { uid: id, level: "h6", children: children }));
+            },
+            p({ id, children }) {
+                return (0, jsx_runtime_1.jsx)(Text_1.Text, { uid: id, children: children });
+            },
+            code({ id, children }) {
+                return ((0, jsx_runtime_1.jsx)(Text_1.Text, { uid: id, variant: "code", children: children }));
+            },
+            pre({ id, children }) {
+                return ((0, jsx_runtime_1.jsx)(Text_1.Text, { uid: id, variant: "codefence", children: children }));
+            },
+            strong({ id, children }) {
+                return ((0, jsx_runtime_1.jsx)(Text_1.Text, { uid: id, variant: "strong", children: children }));
+            },
+            em({ id, children }) {
+                return ((0, jsx_runtime_1.jsx)(Text_1.Text, { uid: id, variant: "em", children: children }));
+            },
+            blockquote({ children }) {
+                return (0, jsx_runtime_1.jsx)(Blockquote, { children: children });
+            },
+            ol({ children }) {
+                return (0, jsx_runtime_1.jsx)(OrderedList, { children: children });
+            },
+            ul({ children }) {
+                return (0, jsx_runtime_1.jsx)(UnorderedList, { children: children });
+            },
+            li({ children }) {
+                return (0, jsx_runtime_1.jsx)(ListItem, { children: children });
+            },
+            // del: variant="deleted" <-- This needs a parser plugin for ~ and ~~ signs that is available via react-markdown-gfm or we roll with an in-house one (?)
+            hr() {
+                return (0, jsx_runtime_1.jsx)(HorizontalRule, {});
+            },
+            a({ href, children }) {
+                return (0, jsx_runtime_1.jsx)(Link_1.LocalLink, { to: href || "/", children: children });
+            },
+            img({ src, alt }) {
+                return (0, jsx_runtime_1.jsx)(Image_1.Image, { src: src, alt: alt });
+            },
+        }, children: children }));
+});
+const metadata = {
+    displayName: "Markdown",
+    description: "This component lets you use markdown syntax to create rich text content.",
+    themeVars: (0, themeVars_1.parseScssVar)(Markdown_module_scss_1.default.themeVars),
+    defaultThemeVars: {
+        "color-border-HorizontalRule": "$color-border",
+        "thickness-border-HorizontalRule": "1px",
+        "style-border-HorizontalRule": "solid",
+        "accent-Blockquote": "$color-primary",
+        "padding-Blockquote": "$space-2 $space-6",
+        "margin-Blockquote": "$space-2",
+        "padding-left-UnorderedList": "$space-6",
+        "padding-left-OrderedList": "$space-6",
+        "padding-left-ListItem": "$space-1",
+        light: {
+        // --- No light-specific theme vars
+        },
+        dark: {
+        // --- No dark-specific theme vars
+        },
+    },
+};
+exports.markdownComponentRenderer = (0, renderers_1.createComponentRenderer)("Markdown", ({ node, renderChild }) => {
+    return (0, jsx_runtime_1.jsx)(Markdown, { children: renderChild(node.children) });
+}, metadata);
+// --------------------------------------------------------------------------------------------------------------------
+// Markdown only components
+const HorizontalRule = () => {
+    return (0, jsx_runtime_1.jsx)("hr", { className: Markdown_module_scss_1.default.horizontalRule });
+};
+const Blockquote = ({ children }) => {
+    return (0, jsx_runtime_1.jsx)("blockquote", { className: Markdown_module_scss_1.default.blockquote, children: children });
+};
+const UnorderedList = ({ children }) => {
+    return (0, jsx_runtime_1.jsx)("ul", { className: Markdown_module_scss_1.default.unorderedList, children: children });
+};
+const OrderedList = ({ children }) => {
+    return (0, jsx_runtime_1.jsx)("ol", { className: Markdown_module_scss_1.default.orderedList, children: children });
+};
+const ListItem = ({ children }) => {
+    return (0, jsx_runtime_1.jsx)("li", { className: Markdown_module_scss_1.default.listItem, children: children });
+};

package/dist/scripts/src/components/ModalDialog/ConfirmationModalContextProvider.js

@@ -0,0 +1,106 @@
+"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.ConfirmationModalContextProvider = exports.useConfirm = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const Button_1 = require("@components/Button/Button");
+const Stack_1 = require("@components/Stack/Stack");
+const Dialog_1 = require("./Dialog");
+const ConfirmationModalContext = react_1.default.createContext({
+    confirm: (title, message, actionLabel) => __awaiter(void 0, void 0, void 0, function* () { return false; }),
+});
+const useConfirm = () => (0, react_1.useContext)(ConfirmationModalContext);
+exports.useConfirm = useConfirm;
+const ConfirmationModalContextProvider = ({ children }) => {
+    // State
+    const [showConfirmationModal, setShowConfirmationModal] = (0, react_1.useState)(false);
+    const [title, setTitle] = (0, react_1.useState)("Are you sure?");
+    const [message, setMessage] = (0, react_1.useState)();
+    const [buttons, setButtons] = (0, react_1.useState)([]);
+    // Refs and other
+    const resolver = (0, react_1.useRef)(null);
+    const buttonsRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        if (showConfirmationModal) {
+            setTimeout(() => {
+                var _a;
+                const focusable = (_a = buttonsRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll("button");
+                if (focusable) {
+                    focusable[focusable.length - 1].focus();
+                }
+            }, 0);
+        }
+    }, [showConfirmationModal]);
+    const handleShow = (0, react_1.useCallback)((title, message, actionLabel) => __awaiter(void 0, void 0, void 0, function* () {
+        if (typeof title === "string") {
+            setTitle(title);
+            setButtons([
+                {
+                    label: actionLabel || "Ok",
+                    value: true,
+                },
+            ]);
+            setMessage(message);
+        }
+        else {
+            setTitle(title.title);
+            setButtons(title.buttons);
+            setMessage(title.message);
+        }
+        setShowConfirmationModal(true);
+        return new Promise(function (resolve) {
+            resolver.current = resolve;
+        });
+    }), []);
+    const handleOk = (0, react_1.useCallback)((value) => {
+        resolver.current && resolver.current(value);
+        setShowConfirmationModal(false);
+    }, []);
+    const handleCancel = (0, react_1.useCallback)(() => {
+        resolver.current && resolver.current(false);
+        setShowConfirmationModal(false);
+    }, []);
+    const contextValue = (0, react_1.useMemo)(() => {
+        return {
+            confirm: handleShow,
+        };
+    }, [handleShow]);
+    return ((0, jsx_runtime_1.jsxs)(ConfirmationModalContext.Provider, { value: contextValue, children: [children, showConfirmationModal && ((0, jsx_runtime_1.jsx)(Dialog_1.Dialog, { title: title, description: message, isOpen: true, onClose: handleCancel, buttons: (0, jsx_runtime_1.jsxs)(Stack_1.Stack, { orientation: "horizontal", horizontalAlignment: "end", layout: { width: "100%", gap: "1em" }, ref: buttonsRef, children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "ghost", themeColor: "secondary", size: "sm", onClick: handleCancel, children: "Cancel" }), buttons.length > 1 ? (0, jsx_runtime_1.jsx)("div", { style: { flex: 1 } }) : undefined, buttons.map(({ label, value, variant = "solid", themeColor = "attention" }, index) => {
+                            return ((0, jsx_runtime_1.jsx)(Button_1.Button, { variant: variant, themeColor: themeColor, size: "sm", type: "submit", onClick: () => {
+                                    handleOk(value);
+                                }, children: label }, index));
+                        })] }) }))] }));
+};
+exports.ConfirmationModalContextProvider = ConfirmationModalContextProvider;

package/dist/scripts/src/components/ModalDialog/Dialog.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Dialog = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Text_1 = require("../Text/Text");
+const Dialog_module_scss_1 = __importDefault(require("./Dialog.module.scss"));
+const ModalDialog_1 = require("./ModalDialog");
+/**
+ * Dialog component that is customizable with action buttons. The children prop accepts React elements.
+ *
+ * Note that clicking outside of the dialog or pressing Escape will call the onClose function.
+ * Thus, if you want to stop that from firing, do so in the onClose function from outside.
+ */
+const Dialog = ({ title, description, children, isOpen, onClose, buttons, }) => {
+    return ((0, jsx_runtime_1.jsxs)(ModalDialog_1.ModalDialog, { onClose: onClose, isInitiallyOpen: isOpen, title: title, children: [(0, jsx_runtime_1.jsxs)("div", { className: Dialog_module_scss_1.default.dialogContent, children: [(0, jsx_runtime_1.jsx)("div", { id: "dialogDesc", children: (0, jsx_runtime_1.jsx)(Text_1.Text, { children: description }) }), children] }), !!buttons && (0, jsx_runtime_1.jsx)("footer", { className: Dialog_module_scss_1.default.dialogActions, children: buttons })] }));
+};
+exports.Dialog = Dialog;

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

@@ -0,0 +1,145 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __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.modalViewComponentRenderer = exports.ModalDialog = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const ModalDialog_module_scss_1 = __importDefault(require("./ModalDialog.module.scss"));
+const classnames_1 = __importDefault(require("@components-core/utils/classnames"));
+const Icon_1 = require("@components/Icon/Icon");
+const renderers_1 = require("@components-core/renderers");
+const ThemeContext_1 = require("@components-core/theming/ThemeContext");
+const Button_1 = require("@components/Button/Button");
+const misc_1 = require("@components-core/utils/misc");
+const react_compose_refs_1 = require("@radix-ui/react-compose-refs");
+const descriptorHelper_1 = require("@components-core/descriptorHelper");
+const themeVars_1 = require("@components-core/theming/themeVars");
+const base_utils_1 = require("@components-core/theming/themes/base-utils");
+const Dialog = __importStar(require("@radix-ui/react-dialog"));
+exports.ModalDialog = react_1.default.forwardRef(({ children, style, isInitiallyOpen, onClose, onOpen, fullScreen, title, registerComponentApi, closeButtonVisible = true, }, ref) => {
+    const [isOpen, setIsOpen] = (0, react_1.useState)(isInitiallyOpen);
+    const isClosing = (0, react_1.useRef)(false);
+    const { root } = (0, ThemeContext_1.useTheme)();
+    const containerRef = (0, react_1.useRef)(null);
+    const modalRef = (0, react_1.useRef)(null);
+    const composedRef = ref ? (0, react_compose_refs_1.composeRefs)(ref, modalRef) : modalRef;
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if (isOpen) {
+            (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }, [isOpen]);
+    const doOpen = (0, misc_1.useEvent)(() => {
+        onOpen === null || onOpen === void 0 ? void 0 : onOpen();
+        setIsOpen(true);
+    });
+    const doClose = (0, misc_1.useEvent)(() => __awaiter(void 0, void 0, void 0, function* () {
+        if (!isClosing.current) {
+            try {
+                isClosing.current = true;
+                const result = yield (onClose === null || onClose === void 0 ? void 0 : onClose());
+                if (result === false) {
+                    return;
+                }
+            }
+            finally {
+                isClosing.current = false;
+            }
+        }
+        setIsOpen(false);
+    }));
+    (0, react_1.useEffect)(() => {
+        registerComponentApi === null || registerComponentApi === void 0 ? void 0 : registerComponentApi({
+            open: doOpen,
+            close: doClose,
+        });
+    }, [doClose, doOpen, registerComponentApi]);
+    // https://github.com/radix-ui/primitives/issues/2122#issuecomment-2140827998
+    (0, react_1.useEffect)(() => {
+        if (isOpen) {
+            // Pushing the change to the end of the call stack
+            const timer = setTimeout(() => {
+                document.body.style.pointerEvents = "";
+            }, 0);
+            return () => clearTimeout(timer);
+        }
+        else {
+            document.body.style.pointerEvents = "auto";
+        }
+    }, [isOpen]);
+    if (!root) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(Dialog.Root, { open: isOpen, onOpenChange: (open) => (open ? doOpen() : doClose()), children: (0, jsx_runtime_1.jsxs)(Dialog.Portal, { container: root, children: [!fullScreen && (0, jsx_runtime_1.jsx)("div", { className: ModalDialog_module_scss_1.default.overlayBg }), (0, jsx_runtime_1.jsx)(Dialog.Overlay, { className: (0, classnames_1.default)(ModalDialog_module_scss_1.default.overlay, {
+                        [ModalDialog_module_scss_1.default.fullScreen]: fullScreen,
+                    }), children: (0, jsx_runtime_1.jsxs)(Dialog.Content, { className: (0, classnames_1.default)(ModalDialog_module_scss_1.default.content), ref: composedRef, style: style, children: [!!title && ((0, jsx_runtime_1.jsx)(Dialog.Title, { children: (0, jsx_runtime_1.jsx)("header", { id: "dialogTitle", className: ModalDialog_module_scss_1.default.dialogTitle, children: title }) })), (0, jsx_runtime_1.jsx)("div", { className: ModalDialog_module_scss_1.default.innerContent, children: isOpen && (typeof children === "function" ? children === null || children === void 0 ? void 0 : children() : children) }), closeButtonVisible && ((0, jsx_runtime_1.jsx)(Dialog.Close, { asChild: true, children: (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: doClose, variant: "ghost", themeColor: "secondary", className: ModalDialog_module_scss_1.default.closeButton, "aria-label": "Close", icon: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "close", size: "sm" }), orientation: "vertical" }) }))] }) })] }) }));
+});
+exports.ModalDialog.displayName = "ModalDialog";
+const metadata = {
+    displayName: "ModalDialog",
+    description: "A container for a modal dialog",
+    props: {
+        fullScreen: {
+            description: "Indicates the modal fills the entire screen",
+            valueType: "boolean",
+        },
+        title: {
+            description: "The title of the modal",
+            valueType: "string",
+        },
+        closeButtonVisible: (0, descriptorHelper_1.desc)("Indicates if the close button is visible"),
+    },
+    events: {
+        close: {
+            description: "The modal is closed",
+            valueType: "ActionSet",
+        },
+    },
+    themeVars: (0, themeVars_1.parseScssVar)(ModalDialog_module_scss_1.default.themeVars),
+    defaultThemeVars: Object.assign(Object.assign({}, (0, base_utils_1.paddingSubject)("ModalDialog", { all: "$space-7" })), { "color-bg-ModalDialog": "$color-bg-primary", "color-bg-overlay-ModalDialog": "$color-bg-overlay", "color-text-ModalDialog": "$color-text-primary", "radius-ModalDialog": "$radius", "font-family-ModalDialog": "$font-family", "max-width-ModalDialog": "450px", "margin-bottom-title-ModalDialog": "0", dark: {
+            "color-bg-ModalDialog": "$color-bg-primary",
+        } }),
+};
+/**
+ * This function define the renderer for the ModalDialog component.
+ */
+exports.modalViewComponentRenderer = (0, renderers_1.createComponentRenderer)("ModalDialog", ({ node, extractValue, layoutCss, renderChild, lookupEventHandler, registerComponentApi }) => {
+    var _a, _b;
+    return ((0, jsx_runtime_1.jsx)(exports.ModalDialog, { isInitiallyOpen: node.when !== undefined, style: layoutCss, onClose: lookupEventHandler("close"), onOpen: lookupEventHandler("open"), fullScreen: extractValue((_a = node.props) === null || _a === void 0 ? void 0 : _a.fullScreen), title: extractValue((_b = node.props) === null || _b === void 0 ? void 0 : _b.title), registerComponentApi: registerComponentApi, closeButtonVisible: extractValue.asOptionalBoolean(node.props.closeButtonVisible), children: () => renderChild(node.children, {
+            type: "Stack",
+        }) }));
+}, metadata);

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

@@ -0,0 +1,249 @@
+"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.multiComboboxComponentRenderer = exports.MultiCombobox = void 0;
+const react_1 = require("react");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const downshift_1 = require("downshift");
+const react_2 = __importStar(require("react"));
+const constants_1 = require("@components-core/constants");
+const renderers_1 = require("@components-core/renderers");
+const container_helpers_1 = require("../container-helpers");
+const MultiCombobox_module_scss_1 = __importDefault(require("./MultiCombobox.module.scss"));
+const classnames_1 = __importDefault(require("@components-core/utils/classnames"));
+const react_dom_1 = require("react-dom");
+const ThemeContext_1 = require("@components-core/theming/ThemeContext");
+const react_popper_1 = require("react-popper");
+const input_abstractions_1 = require("@components/Input/input-abstractions");
+const descriptorHelper_1 = require("@components-core/descriptorHelper");
+const themeVars_1 = require("@components-core/theming/themeVars");
+const SelectContext_1 = require("@components/Select/SelectContext");
+const InputAdornment_1 = require("@components/Input/InputAdornment");
+const component_utils_1 = require("../component-utils");
+const ChevronDownIcon_1 = require("@components/Icon/ChevronDownIcon");
+const ChevronUpIcon_1 = require("@components/Icon/ChevronUpIcon");
+const Icon_1 = __importDefault(require("@components/Icon/Icon"));
+const lodash_es_1 = require("lodash-es");
+function defaultRenderer(item) {
+    return (0, jsx_runtime_1.jsx)("div", { children: item.label });
+}
+const MultiCombobox = ({ id, initialValue = constants_1.EMPTY_ARRAY, value = constants_1.EMPTY_ARRAY, enabled = true, placeholder, updateState = constants_1.noop, validationStatus = "none", onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, registerComponentApi, emptyListTemplate, optionRenderer = defaultRenderer, layout, children, autoFocus, startIcon, startText, endIcon, endText, }) => {
+    const [initValue, setInitValue] = (0, react_2.useState)(initialValue);
+    const { options, selectContextValue } = (0, SelectContext_1.useSelectContextValue)();
+    const inputRef = (0, react_2.useRef)(null);
+    const [referenceElement, setReferenceElement] = (0, react_2.useState)(null);
+    const [popperElement, setPopperElement] = (0, react_2.useState)(null);
+    const { styles: popperStyles, attributes } = (0, react_popper_1.usePopper)(referenceElement, popperElement, {
+        placement: "bottom-start",
+    });
+    const { root } = (0, ThemeContext_1.useTheme)();
+    const [inputValue, setInputValue] = react_2.default.useState("");
+    (0, react_2.useEffect)(() => {
+        if (autoFocus) {
+            setTimeout(() => {
+                var _a;
+                (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }, 0);
+        }
+    }, [autoFocus]);
+    const items = (0, react_2.useMemo)(() => {
+        return (0, component_utils_1.filterOptions)(inputValue, options.filter((option) => !value.includes(option.value)));
+    }, [inputValue, options, value]);
+    const { getSelectedItemProps, getDropdownProps } = (0, downshift_1.useMultipleSelection)({
+        onStateChange({ selectedItems, type }) {
+            switch (type) {
+                case downshift_1.useMultipleSelection.stateChangeTypes.SelectedItemKeyDownBackspace:
+                case downshift_1.useMultipleSelection.stateChangeTypes.SelectedItemKeyDownDelete:
+                case downshift_1.useMultipleSelection.stateChangeTypes.DropdownKeyDownBackspace:
+                case downshift_1.useMultipleSelection.stateChangeTypes.FunctionRemoveSelectedItem:
+                    if (selectedItems) {
+                        onInputChange(selectedItems.map((item) => item.value).concat(value));
+                    }
+                    break;
+                default:
+                    break;
+            }
+        },
+    });
+    const { isOpen, selectedItem, closeMenu, getToggleButtonProps, getMenuProps, getInputProps, highlightedIndex, getItemProps, } = (0, downshift_1.useCombobox)({
+        //labelId: id,
+        // toggleButtonId: id,
+        defaultHighlightedIndex: 0,
+        items,
+        itemToString(item) {
+            return item ? item.label : "";
+        },
+        isItemDisabled: (item) => item.disabled,
+        inputValue,
+        stateReducer(state, actionAndChanges) {
+            const { changes, type } = actionAndChanges;
+            switch (type) {
+                case downshift_1.useCombobox.stateChangeTypes.InputKeyDownEnter:
+                case downshift_1.useCombobox.stateChangeTypes.ItemClick:
+                    return Object.assign(Object.assign({}, changes), { isOpen: true, highlightedIndex: 0 });
+                default:
+                    return changes;
+            }
+        },
+        onStateChange({ inputValue: newInputValue, type, selectedItem }) {
+            switch (type) {
+                case downshift_1.useCombobox.stateChangeTypes.InputKeyDownEnter:
+                case downshift_1.useCombobox.stateChangeTypes.ItemClick:
+                case downshift_1.useCombobox.stateChangeTypes.InputBlur:
+                    handleOnBlur();
+                    if (selectedItem) {
+                        onInputChange([...value, selectedItem.value]);
+                        setInputValue("");
+                        closeMenu();
+                    }
+                    break;
+                case downshift_1.useCombobox.stateChangeTypes.InputKeyDownArrowDown:
+                case downshift_1.useCombobox.stateChangeTypes.InputClick:
+                case downshift_1.useCombobox.stateChangeTypes.InputChange:
+                    handleOnFocus();
+                    setInputValue(newInputValue || "");
+                    break;
+                default:
+                    break;
+            }
+        },
+    });
+    (0, react_2.useEffect)(() => {
+        setInitValue((prevState) => {
+            if ((0, lodash_es_1.isEqual)(prevState, initialValue)) {
+                return prevState;
+            }
+            console.log("Setting initial value", initialValue);
+            return initialValue;
+        });
+    }, [initialValue]);
+    (0, react_2.useEffect)(() => {
+        updateState({ value: initValue });
+    }, [initValue, updateState]);
+    const onInputChange = (0, react_2.useCallback)((newValue) => {
+        updateState({ value: newValue });
+        onDidChange(newValue);
+    }, [onDidChange, updateState]);
+    // --- Manage obtaining and losing the focus
+    const handleOnFocus = (0, react_2.useCallback)(() => {
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus();
+    }, [onFocus]);
+    const handleOnBlur = (0, react_2.useCallback)(() => {
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+    }, [onBlur]);
+    const focus = (0, react_2.useCallback)(() => {
+        referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.focus();
+    }, [referenceElement]);
+    (0, react_2.useEffect)(() => {
+        registerComponentApi === null || registerComponentApi === void 0 ? void 0 : registerComponentApi({
+            focus,
+        });
+    }, [focus, registerComponentApi]);
+    // Sizing the dropdown list width to the reference button size
+    const [width, setWidth] = (0, react_2.useState)(0);
+    const observer = (0, react_2.useRef)();
+    (0, react_2.useEffect)(() => {
+        const current = referenceElement;
+        // --- We are already observing old element
+        if ((observer === null || observer === void 0 ? void 0 : observer.current) && current) {
+            observer.current.unobserve(current);
+        }
+        observer.current = new ResizeObserver(() => setWidth(referenceElement.clientWidth));
+        if (current && observer.current) {
+            observer.current.observe(referenceElement);
+        }
+    }, [referenceElement]);
+    return ((0, jsx_runtime_1.jsxs)(SelectContext_1.SelectContext.Provider, { value: selectContextValue, children: [children, (0, jsx_runtime_1.jsxs)("div", { className: MultiCombobox_module_scss_1.default.comboboxContainer, style: layout, children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(MultiCombobox_module_scss_1.default.comboboxToggleButton, MultiCombobox_module_scss_1.default[validationStatus], {
+                            [MultiCombobox_module_scss_1.default.disabled]: !enabled,
+                        }), ref: (el) => setReferenceElement(el), children: [(0, jsx_runtime_1.jsxs)("div", { className: MultiCombobox_module_scss_1.default.selectedOptions, children: [(0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { text: startText, iconName: startIcon, className: MultiCombobox_module_scss_1.default.adornment }), options
+                                        .filter((option) => value.includes(option.value))
+                                        .map(function renderSelectedItem(selectedItemForRender, index) {
+                                        return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ "data-multi-value-container": true, className: MultiCombobox_module_scss_1.default.multiValue }, getSelectedItemProps({
+                                            selectedItem: selectedItemForRender,
+                                            index,
+                                            disabled: !enabled,
+                                        }), { children: [(0, jsx_runtime_1.jsx)("div", { className: MultiCombobox_module_scss_1.default.multiValueLabel, children: selectedItemForRender.label }), (0, jsx_runtime_1.jsx)("div", { role: "button", className: (0, classnames_1.default)(MultiCombobox_module_scss_1.default.multiValueRemove, {
+                                                        [MultiCombobox_module_scss_1.default.disabled]: !enabled,
+                                                    }), onClick: (e) => {
+                                                        e.stopPropagation();
+                                                        if (enabled) {
+                                                            onInputChange(value.filter((v) => v !== selectedItemForRender.value));
+                                                        }
+                                                    }, children: "\u2715" })] }), `selected-item-${index}`));
+                                    }), (0, jsx_runtime_1.jsx)("div", { className: MultiCombobox_module_scss_1.default.comboboxInputContainer, children: (0, jsx_runtime_1.jsx)("input", Object.assign({}, getInputProps(getDropdownProps({
+                                            preventKeyAction: isOpen,
+                                            id: id,
+                                            ref: inputRef,
+                                            placeholder: placeholder,
+                                            disabled: !enabled,
+                                            className: MultiCombobox_module_scss_1.default.comboboxInput,
+                                        })))) })] }), (0, jsx_runtime_1.jsxs)("div", { style: { display: "flex" }, children: [(0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { text: endText, iconName: endIcon, className: MultiCombobox_module_scss_1.default.adornment }), (0, jsx_runtime_1.jsx)("button", Object.assign({ "aria-label": "toggle-menu", className: MultiCombobox_module_scss_1.default.indicator, type: "button" }, getToggleButtonProps({ disabled: !enabled }), { children: isOpen ? (0, jsx_runtime_1.jsx)(ChevronUpIcon_1.ChevronUpIcon, {}) : (0, jsx_runtime_1.jsx)(ChevronDownIcon_1.ChevronDownIcon, {}) }))] })] }), (0, jsx_runtime_1.jsx)("div", Object.assign({}, getMenuProps(), { children: isOpen &&
+                            root &&
+                            (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)("ul", Object.assign({ className: MultiCombobox_module_scss_1.default.multiComboboxMenu, ref: (el) => setPopperElement(el), style: Object.assign(Object.assign({}, popperStyles.popper), { width }) }, attributes.popper, { children: items.length > 0 ? (items.map((item, index) => {
+                                    const props = getItemProps({ item, index, "aria-disabled": item.disabled });
+                                    return ((0, react_1.createElement)("li", Object.assign({}, props, { key: index, className: (0, classnames_1.default)(MultiCombobox_module_scss_1.default.item, MultiCombobox_module_scss_1.default.selectable, {
+                                            [MultiCombobox_module_scss_1.default.itemActive]: highlightedIndex === index,
+                                            [MultiCombobox_module_scss_1.default.itemSelected]: selectedItem === item,
+                                            [MultiCombobox_module_scss_1.default.itemDisabled]: item.disabled,
+                                        }) }), item.renderer ? item.renderer(item) : optionRenderer(item)));
+                                })) : ((0, jsx_runtime_1.jsx)("li", { className: MultiCombobox_module_scss_1.default.item, children: emptyListTemplate !== null && emptyListTemplate !== void 0 ? emptyListTemplate : ((0, jsx_runtime_1.jsxs)("span", { className: MultiCombobox_module_scss_1.default.empty, children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "noresult" }), "List is empty"] })) })) })), root) }))] })] }));
+};
+exports.MultiCombobox = MultiCombobox;
+const defaultOptionRenderer = {
+    type: "Text",
+    props: {
+        value: "{$item.label}",
+    },
+};
+const metadata = {
+    displayName: "MultiCombobox",
+    description: "A multi combobox component",
+    props: Object.assign(Object.assign({}, input_abstractions_1.inputComponentPropertyDescriptors), { options: (0, descriptorHelper_1.desc)("List of options to display"), optionTemplate: (0, descriptorHelper_1.desc)("Template to render each option"), emptyListTemplate: (0, descriptorHelper_1.desc)("Template to render when the list is empty") }),
+    events: input_abstractions_1.inputComponentEventDescriptors,
+    themeVars: (0, themeVars_1.parseScssVar)(MultiCombobox_module_scss_1.default.themeVars),
+    defaultThemeVars: {
+        "color-bg-menu-MultiCombobox": "$color-bg-primary",
+        "shadow-menu-MultiCombobox": "$shadow-md",
+        "radius-menu-MultiCombobox": "$radius",
+        "color-text-value-MultiCombobox": "$color-text-primary",
+        "color-bg-value-MultiCombobox": "$color-bg-secondary",
+        "color-bg-item-MultiCombobox": "$color-bg-dropdown-item",
+        "color-bg-item-MultiCombobox--hover": "$color-bg-dropdown-item--active",
+        light: {
+            "color-text-item-MultiCombobox--disabled": "$color-surface-200",
+        },
+        dark: {
+            "color-text-item-MultiCombobox--disabled": "$color-surface-800",
+        },
+    },
+};
+exports.multiComboboxComponentRenderer = (0, renderers_1.createComponentRenderer)("MultiCombobox", ({ node, state, updateState, extractValue, renderChild, layoutCss, lookupEventHandler }) => {
+    return ((0, jsx_runtime_1.jsx)(exports.MultiCombobox, { layout: layoutCss, updateState: updateState, value: state === null || state === void 0 ? void 0 : state.value, initialValue: extractValue.asOptionalStringArray(node.props.initialValue), enabled: extractValue.asOptionalBoolean(node.props.enabled), placeholder: extractValue.asOptionalString(node.props.placeholder), validationStatus: extractValue(node.props.validationStatus), onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus), emptyListTemplate: renderChild(node.props.emptyListTemplate), startIcon: extractValue.asOptionalString(node.props.startIcon), startText: extractValue.asOptionalString(node.props.startText), endIcon: extractValue.asOptionalString(node.props.endIcon), endText: extractValue.asOptionalString(node.props.endText), optionRenderer: (item) => {
+            return ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { node: node.props.optionTemplate || defaultOptionRenderer, item: item, renderChild: renderChild }));
+        }, children: renderChild(node.children) }));
+}, metadata);