xmlui 0.4.0

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

@@ -0,0 +1,192 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.multiSelectComponentRenderer = void 0;
+exports.MultiSelect = MultiSelect;
+const react_1 = require("react");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const downshift_1 = require("downshift");
+const react_2 = require("react");
+const constants_1 = require("@components-core/constants");
+const renderers_1 = require("@components-core/renderers");
+const MultiSelect_module_scss_1 = __importDefault(require("./MultiSelect.module.scss"));
+const container_helpers_1 = require("@components/container-helpers");
+const classnames_1 = __importDefault(require("@components-core/utils/classnames"));
+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 ThemeContext_1 = require("@components-core/theming/ThemeContext");
+const react_popper_1 = require("react-popper");
+const react_dom_1 = require("react-dom");
+const SelectContext_1 = require("@components/Select/SelectContext");
+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");
+const InputAdornment_1 = require("@components/Input/InputAdornment");
+function defaultRenderer(item) {
+    return (0, jsx_runtime_1.jsx)("div", { children: item.label });
+}
+function MultiSelect({ id, emptyListTemplate, initialValue = constants_1.EMPTY_ARRAY, value = constants_1.EMPTY_ARRAY, placeholder, updateState = constants_1.noop, onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, registerComponentApi, validationStatus = "none", enabled = true, optionRenderer = defaultRenderer, children, startText, startIcon, endText, endIcon, }) {
+    const [initValue, setInitValue] = (0, react_2.useState)(initialValue);
+    const { options, selectContextValue } = (0, SelectContext_1.useSelectContextValue)();
+    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 onInputChange = (0, react_2.useCallback)((newValue) => {
+        updateState({ value: newValue });
+        onDidChange(newValue);
+    }, [onDidChange, updateState]);
+    const { getSelectedItemProps, getDropdownProps } = (0, downshift_1.useMultipleSelection)({
+        onSelectedItemsChange: ({ selectedItems }) => {
+            if (selectedItems) {
+                onInputChange(selectedItems.map((item) => item.value) || []);
+            }
+        },
+    });
+    const items = (0, react_2.useMemo)(() => options.filter((option) => !value.includes(option.value)), [options, value]);
+    const { isOpen, selectedItem, getToggleButtonProps, getMenuProps, highlightedIndex, getItemProps, closeMenu } = (0, downshift_1.useSelect)({
+        items,
+        toggleButtonId: id,
+        itemToString(item) {
+            return item ? item.label : "";
+        },
+        isItemDisabled: (item) => item.disabled,
+        stateReducer: (state, actionAndChanges) => {
+            const { changes, type } = actionAndChanges;
+            switch (type) {
+                case downshift_1.useSelect.stateChangeTypes.ToggleButtonKeyDownEnter:
+                case downshift_1.useSelect.stateChangeTypes.ToggleButtonKeyDownSpaceButton:
+                case downshift_1.useSelect.stateChangeTypes.ItemClick:
+                    return Object.assign(Object.assign({}, changes), { isOpen: true, highlightedIndex: 0 });
+            }
+            return changes;
+        },
+        onStateChange: ({ type, selectedItem }) => {
+            switch (type) {
+                case downshift_1.useSelect.stateChangeTypes.ToggleButtonKeyDownEnter:
+                case downshift_1.useSelect.stateChangeTypes.ToggleButtonKeyDownSpaceButton:
+                case downshift_1.useSelect.stateChangeTypes.ItemClick:
+                case downshift_1.useSelect.stateChangeTypes.ToggleButtonBlur:
+                    handleOnBlur();
+                    if (selectedItem) {
+                        onInputChange([...value, selectedItem.value]);
+                        closeMenu();
+                    }
+                    break;
+                case downshift_1.useSelect.stateChangeTypes.ToggleButtonClick:
+                    handleOnFocus();
+                    break;
+                default:
+                    break;
+            }
+        },
+    });
+    (0, react_2.useEffect)(() => {
+        setInitValue((prevState) => {
+            if ((0, lodash_es_1.isEqual)(prevState, initialValue)) {
+                return prevState;
+            }
+            return initialValue;
+        });
+    }, [initialValue]);
+    (0, react_2.useEffect)(() => {
+        updateState({ value: initValue });
+    }, [initValue, 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(() => referenceElement && 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: MultiSelect_module_scss_1.default.multiSelectContainer, children: [(0, jsx_runtime_1.jsxs)("button", Object.assign({ type: "button", disabled: !enabled, className: (0, classnames_1.default)(MultiSelect_module_scss_1.default.selectToggleButton, MultiSelect_module_scss_1.default[validationStatus], {
+                            [MultiSelect_module_scss_1.default.disabled]: !enabled,
+                        }) }, getToggleButtonProps(Object.assign({}, getDropdownProps({
+                        preventKeyAction: isOpen,
+                        ref: (el) => setReferenceElement(el),
+                    }))), { children: [(0, jsx_runtime_1.jsxs)("div", { className: MultiSelect_module_scss_1.default.selectedOptions, children: [(0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { text: startText, iconName: startIcon, className: MultiSelect_module_scss_1.default.adornment }), value.length === 0 ? ((0, jsx_runtime_1.jsx)("span", { className: MultiSelect_module_scss_1.default.placeholder, children: placeholder })) : (options
+                                        .filter((option) => value.includes(option.value))
+                                        .map(function renderSelectedItem(selectedItemForRender, index) {
+                                        return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: MultiSelect_module_scss_1.default.multiValue }, getSelectedItemProps({
+                                            selectedItem: selectedItemForRender,
+                                            index,
+                                        }), { children: [(0, jsx_runtime_1.jsx)("div", { className: MultiSelect_module_scss_1.default.multiValueLabel, children: selectedItemForRender === null || selectedItemForRender === void 0 ? void 0 : selectedItemForRender.label }), (0, jsx_runtime_1.jsx)("div", { role: "button", className: (0, classnames_1.default)(MultiSelect_module_scss_1.default.multiValueRemove, {
+                                                        [MultiSelect_module_scss_1.default.disabled]: !enabled,
+                                                    }), onClick: (e) => {
+                                                        if (enabled) {
+                                                            e.stopPropagation();
+                                                            onInputChange(value.filter((v) => v !== selectedItemForRender.value));
+                                                        }
+                                                    }, children: "\u2715" })] }), `selected-item-${index}`));
+                                    }))] }), (0, jsx_runtime_1.jsxs)("div", { style: { display: "flex" }, children: [(0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { text: endText, iconName: endIcon, className: MultiSelect_module_scss_1.default.adornment }), (0, jsx_runtime_1.jsx)("span", { "aria-label": "toggle menu", className: MultiSelect_module_scss_1.default.indicator, 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: MultiSelect_module_scss_1.default.selectMenu, 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 });
+                                    return ((0, react_1.createElement)("li", Object.assign({}, props, { key: `${item.value}${index}`, className: (0, classnames_1.default)(MultiSelect_module_scss_1.default.item, {
+                                            [MultiSelect_module_scss_1.default.itemActive]: highlightedIndex === index,
+                                            [MultiSelect_module_scss_1.default.itemSelected]: selectedItem === item,
+                                            [MultiSelect_module_scss_1.default.itemDisabled]: item.disabled,
+                                        }) }), optionRenderer(item)));
+                                })) : ((0, jsx_runtime_1.jsx)("li", { className: MultiSelect_module_scss_1.default.item, children: emptyListTemplate !== null && emptyListTemplate !== void 0 ? emptyListTemplate : ((0, jsx_runtime_1.jsxs)("span", { className: MultiSelect_module_scss_1.default.empty, children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "noresult" }), "List is empty"] })) })) })), root) }))] })] }));
+}
+const defaultOptionRenderer = {
+    type: "Text",
+    props: {
+        value: "{$item.label}",
+    },
+};
+const metadata = {
+    displayName: "MultiSelect",
+    description: "A multi-select dropdown 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") }),
+    events: input_abstractions_1.inputComponentEventDescriptors,
+    themeVars: (0, themeVars_1.parseScssVar)(MultiSelect_module_scss_1.default.themeVars),
+    defaultThemeVars: {
+        "color-bg-menu-MultiSelect": "$color-bg-primary",
+        "shadow-menu-MultiSelect": "$shadow-md",
+        "radius-menu-MultiSelect": "$radius",
+        "color-text-value-MultiSelect": "$color-text-primary",
+        "color-bg-value-MultiSelect": "$color-bg-primary",
+        "color-bg-item-MultiSelect": "$color-bg-dropdown-item",
+        "color-bg-item-MultiSelect--hover": "$color-bg-dropdown-item--active",
+        light: {
+            "color-text-item-MultiSelect--disabled": "$color-surface-200",
+        },
+        dark: {
+            "color-text-item-MultiSelect--disabled": "$color-surface-800",
+        },
+    },
+};
+exports.multiSelectComponentRenderer = (0, renderers_1.createComponentRenderer)("MultiSelect", ({ node, state, updateState, extractValue, renderChild, lookupEventHandler }) => {
+    return ((0, jsx_runtime_1.jsx)(MultiSelect, { placeholder: extractValue(node.props.placeholder), updateState: updateState, enabled: extractValue.asOptionalBoolean(node.props.enabled), initialValue: extractValue.asOptionalStringArray(node.props.initialValue), value: state === null || state === void 0 ? void 0 : state.value, validationStatus: extractValue(node.props.validationStatus), onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), emptyListTemplate: renderChild(node.props.emptyListTemplate), startText: extractValue.asOptionalString(node.props.startText), startIcon: extractValue.asOptionalString(node.props.startIcon), endText: extractValue.asOptionalString(node.props.endText), endIcon: extractValue.asOptionalString(node.props.endIcon), 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);

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

@@ -0,0 +1,113 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.navGroupComponentRenderer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const renderers_1 = require("@components-core/renderers");
+const react_dropdown_menu_1 = require("@radix-ui/react-dropdown-menu");
+const NavGroup_module_scss_1 = __importDefault(require("./NavGroup.module.scss"));
+const Icon_1 = require("@components/Icon/Icon");
+const NavLink_1 = require("@components/NavLink/NavLink");
+const NavLink_module_scss_1 = __importDefault(require("@components/NavLink/NavLink.module.scss"));
+const descriptorHelper_1 = require("@components-core/descriptorHelper");
+const themeVars_1 = require("@components-core/theming/themeVars");
+const AppLayoutContext_1 = require("@components/App/AppLayoutContext");
+const NavPanel_1 = require("@components/NavPanel/NavPanel");
+const constants_1 = require("@components-core/constants");
+const classnames_1 = __importDefault(require("@components-core/utils/classnames"));
+const mergeProps_1 = require("@components-core/utils/mergeProps");
+const ThemeContext_1 = require("@components-core/theming/ThemeContext");
+const NavGroupContext = (0, react_1.createContext)({
+    level: -1,
+});
+const NavGroup = (0, react_1.forwardRef)(function NavGroup({ node, style, label, icon, renderChild }, ref) {
+    const { level } = (0, react_1.useContext)(NavGroupContext);
+    const appLayoutContext = (0, AppLayoutContext_1.useAppLayoutContext)();
+    const navPanelContext = (0, react_1.useContext)(NavPanel_1.NavPanelContext);
+    let inline = (appLayoutContext === null || appLayoutContext === void 0 ? void 0 : appLayoutContext.layout) === "vertical" ||
+        (appLayoutContext === null || appLayoutContext === void 0 ? void 0 : appLayoutContext.layout) === "vertical-sticky" ||
+        (appLayoutContext === null || appLayoutContext === void 0 ? void 0 : appLayoutContext.layout) === "vertical-full-header";
+    if (navPanelContext !== null) {
+        inline = navPanelContext.inDrawer;
+    }
+    const navGroupContextValue = (0, react_1.useMemo)(() => {
+        return {
+            level: level + 1,
+        };
+    }, [level]);
+    return ((0, jsx_runtime_1.jsx)(NavGroupContext.Provider, { value: navGroupContextValue, children: inline ? ((0, jsx_runtime_1.jsx)(ExpandableNavGroup, { style: style, label: label, icon: icon, node: node, renderChild: renderChild, ref: ref })) : ((0, jsx_runtime_1.jsx)(DropDownNavGroup, { label: label, icon: icon, node: node, renderChild: renderChild, ref: ref })) }));
+});
+const ExpandableNavGroup = (0, react_1.forwardRef)(function ExpandableNavGroup({ style = constants_1.EMPTY_OBJECT, label, icon, renderChild, node, }, ref) {
+    const { level } = (0, react_1.useContext)(NavGroupContext);
+    const [expanded, setExpanded] = (0, react_1.useState)(false);
+    const toggleStyle = Object.assign(Object.assign({}, style), { paddingLeft: level >= 1 ? (level * 2) + "em" : undefined });
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(NavLink_1.NavLink, { style: toggleStyle, onClick: () => setExpanded((prev) => !prev), icon: icon, children: [label, (0, jsx_runtime_1.jsx)("div", { style: { flex: 1 } }), (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: expanded ? "chevronup" : "chevrondown" })] }), expanded &&
+                renderChild(node.children, {
+                    wrapChild: ({ node }, renderedChild) => {
+                        if (node.type === "NavLink") {
+                            const element = renderedChild;
+                            return (0, react_1.cloneElement)(element, Object.assign({}, (0, mergeProps_1.mergeProps)(renderedChild.props, {
+                                style: {
+                                    paddingLeft: ((level + 1) * 2) + "em",
+                                },
+                            })));
+                        }
+                        return renderedChild;
+                    },
+                })] }));
+});
+const DropDownNavGroup = (0, react_1.forwardRef)(function DropDownNavGroup({ style, label, icon, renderChild, node, }, ref) {
+    const { level } = (0, react_1.useContext)(NavGroupContext);
+    const { root } = (0, ThemeContext_1.useTheme)();
+    let Wrapper = react_dropdown_menu_1.DropdownMenu;
+    let Trigger = react_dropdown_menu_1.DropdownMenuTrigger;
+    let Content = react_dropdown_menu_1.DropdownMenuContent;
+    if (level >= 1) {
+        Wrapper = react_dropdown_menu_1.DropdownMenuSub;
+        Trigger = react_dropdown_menu_1.DropdownMenuSubTrigger;
+        Content = react_dropdown_menu_1.DropdownMenuSubContent;
+    }
+    return ((0, jsx_runtime_1.jsxs)(Wrapper, { children: [(0, jsx_runtime_1.jsx)(Trigger, { asChild: true, children: (0, jsx_runtime_1.jsx)(NavLink_1.NavLink, { icon: icon, style: { flexShrink: 0 }, vertical: level >= 1, children: (0, jsx_runtime_1.jsx)("span", { className: (0, classnames_1.default)(NavGroup_module_scss_1.default.withNavGroupChevron, {
+                            [NavGroup_module_scss_1.default.pointRight]: level >= 1
+                        }), children: label }) }) }), (0, jsx_runtime_1.jsx)(react_dropdown_menu_1.DropdownMenuPortal, { container: root, children: (0, jsx_runtime_1.jsx)(Content, { className: NavGroup_module_scss_1.default.dropdownList, style: { display: "flex", flexDirection: "column" }, side: "bottom", align: "start", children: renderChild(node.children, {
+                        wrapChild: ({ node }, renderedChild, hints) => {
+                            if (hints === null || hints === void 0 ? void 0 : hints.opaque) {
+                                return renderedChild;
+                            }
+                            if (node.type === "List") {
+                                return renderedChild;
+                            }
+                            if (node.type === "NavGroup") {
+                                return renderedChild;
+                            }
+                            let child = renderedChild;
+                            if (node.type === "NavLink") {
+                                child = (0, react_1.cloneElement)(renderedChild, Object.assign({}, (0, mergeProps_1.mergeProps)(renderedChild.props, {
+                                    vertical: true
+                                })));
+                            }
+                            return (0, jsx_runtime_1.jsx)(react_dropdown_menu_1.DropdownMenuItem, { asChild: true, children: child });
+                        },
+                    }) }) })] }));
+});
+const metadata = {
+    displayName: "NavGroup",
+    description: "Groups related navigation components",
+    props: {
+        label: (0, descriptorHelper_1.desc)("Specifies the optional text to display in the navigation group. " +
+            "If omitted, children can be used to set the group's content."),
+        icon: (0, descriptorHelper_1.desc)("Optional icon ID to display the particular icon in the navigation group"),
+    },
+    themeVars: (0, themeVars_1.parseScssVar)(NavGroup_module_scss_1.default.themeVars),
+    defaultThemeVars: {
+        "color-bg-dropdown-NavGroup": "$color-bg-primary",
+        "radius-dropdown-NavGroup": "$radius",
+        "shadow-dropdown-NavGroup": "$shadow-spread"
+    }
+};
+exports.navGroupComponentRenderer = (0, renderers_1.createComponentRenderer)("NavGroup", ({ node, extractValue, renderChild }) => {
+    return ((0, jsx_runtime_1.jsx)(NavGroup, { label: extractValue.asDisplayText(node.props.label), icon: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: extractValue.asString(node.props.icon), className: NavLink_module_scss_1.default.icon }), node: node, renderChild: renderChild }));
+}, metadata);

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

@@ -0,0 +1,115 @@
+"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.navLinkComponentRenderer = exports.NavLink = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const NavLink_module_scss_1 = __importDefault(require("./NavLink.module.scss"));
+const react_2 = require("@remix-run/react");
+const classnames_1 = __importDefault(require("@components-core/utils/classnames"));
+const renderers_1 = require("@components-core/renderers");
+const Icon_1 = require("@components/Icon/Icon");
+const descriptorHelper_1 = require("@components-core/descriptorHelper");
+const themeVars_1 = require("@components-core/theming/themeVars");
+const App_1 = require("@components/App/App");
+const AppLayoutContext_1 = require("@components/App/AppLayoutContext");
+const NavPanel_1 = require("@components/NavPanel/NavPanel");
+const component_utils_1 = require("@components/component-utils");
+exports.NavLink = (0, react_1.forwardRef)(function NavLink(_a, ref) {
+    var { 
+    /* eslint-disable react/prop-types */
+    uid, children, disabled, to, sx = {}, displayActive = true, vertical, style, onClick, icon, forceActive } = _a, rest = __rest(_a, ["uid", "children", "disabled", "to", "sx", "displayActive", "vertical", "style", "onClick", "icon", "forceActive"]);
+    const appLayoutContext = (0, AppLayoutContext_1.useAppLayoutContext)();
+    const navPanelContext = (0, react_1.useContext)(NavPanel_1.NavPanelContext);
+    let safeVertical = vertical;
+    if (appLayoutContext && safeVertical === undefined) {
+        safeVertical = (0, App_1.getAppLayoutOrientation)(appLayoutContext.layout) === "vertical" || (navPanelContext === null || navPanelContext === void 0 ? void 0 : navPanelContext.inDrawer);
+    }
+    const smartTo = (0, react_1.useMemo)(() => {
+        if (to) {
+            return (0, component_utils_1.createUrlWithQueryParams)(to);
+        }
+    }, [to]);
+    const styleObj = Object.assign(Object.assign({}, sx), style);
+    const baseClasses = (0, classnames_1.default)(NavLink_module_scss_1.default.base, {
+        [NavLink_module_scss_1.default.disabled]: disabled,
+        [NavLink_module_scss_1.default.vertical]: safeVertical,
+        [NavLink_module_scss_1.default.includeHoverIndicator]: displayActive,
+        [NavLink_module_scss_1.default.navItemActive]: displayActive && forceActive,
+    });
+    let content;
+    if (disabled || !smartTo) {
+        content = ((0, jsx_runtime_1.jsxs)("button", Object.assign({}, rest, { ref: ref, onClick: onClick, className: baseClasses, style: styleObj, disabled: disabled, children: [icon, children] })));
+    }
+    else {
+        content = ((0, jsx_runtime_1.jsxs)(react_2.NavLink, Object.assign({ id: uid }, rest, { ref: ref, to: smartTo, style: styleObj, onClick: onClick, className: ({ isActive }) => (0, classnames_1.default)(baseClasses, {
+                [NavLink_module_scss_1.default.displayActive]: displayActive,
+                [NavLink_module_scss_1.default.navItemActive]: displayActive && (isActive || forceActive),
+            }), children: [icon, children] })));
+    }
+    return content;
+});
+const metadata = {
+    displayName: "NavLink",
+    description: "Represents a navigation link",
+    props: {
+        to: (0, descriptorHelper_1.desc)("The target URL"),
+        enabled: (0, descriptorHelper_1.desc)("Is the link enabled?"),
+        active: (0, descriptorHelper_1.desc)("Indicates if the link is active"),
+        target: (0, descriptorHelper_1.desc)("the target type of the link: '_self', '_blank', '_parent', '_top'"),
+        label: (0, descriptorHelper_1.desc)("Specifies the optional text to display in the navigation group. " +
+            "If omitted, children can be used to set the group's content."),
+        vertical: (0, descriptorHelper_1.desc)("Use vertical orientation instead of the default horizontal?"),
+        displayActive: (0, descriptorHelper_1.desc)("Allow displaying the active state of this navigation link?"),
+        icon: (0, descriptorHelper_1.desc)("Optional icon ID to display the particular icon in the navigation group"),
+    },
+    events: {
+        click: (0, descriptorHelper_1.desc)("Triggers when the button is clicked"),
+    },
+    themeVars: (0, themeVars_1.parseScssVar)(NavLink_module_scss_1.default.themeVars),
+    defaultThemeVars: {
+        "radius-NavLink": "$radius",
+        "color-bg-NavLink": "transparent",
+        "padding-horizontal-NavLink": "$space-4",
+        "padding-vertical-NavLink": "$space-2",
+        "font-size-NavLink": "$font-size",
+        "font-weight-NavLink": "$font-weight-normal",
+        "color-text-NavLink": "$color-text-primary",
+        "color-icon-NavLink": "$color-text-NavLink",
+        "font-weight-NavLink--pressed": "$font-weight-normal",
+        "thickness-indicator-NavLink": "$space-0_5",
+        "color-outline-NavLink--focus": "$color-outline--focus",
+        "thickness-outline-NavLink--focus": "$thickness-outline--focus",
+        "style-outline-NavLink--focus": "$style-outline--focus",
+        "offset-outline-NavLink--focus": "-1px",
+        "radius-indicator-NavLink": "$radius",
+        light: {
+            "color-indicator-NavLink--active": "$color-primary-500",
+            "color-indicator-NavLink--pressed": "$color-primary-500",
+            "color-indicator-NavLink--hover": "$color-primary-600",
+        },
+        dark: {
+            "color-indicator-NavLink--active": "$color-primary-500",
+            "color-indicator-NavLink--pressed": "$color-primary-500",
+            "color-indicator-NavLink--hover": "$color-primary-400",
+        }
+    },
+};
+exports.navLinkComponentRenderer = (0, renderers_1.createComponentRenderer)("NavLink", ({ node, extractValue, renderChild, layoutCss }) => {
+    var _a, _b;
+    const iconName = extractValue.asString(node.props.icon);
+    return ((0, jsx_runtime_1.jsx)(exports.NavLink, { uid: node.uid, to: extractValue(node.props.to), disabled: !extractValue.asOptionalBoolean((_a = node.props.enabled) !== null && _a !== void 0 ? _a : true), vertical: extractValue.asOptionalBoolean(node.props.vertical), displayActive: extractValue.asOptionalBoolean(node.props.displayActive), forceActive: extractValue.asOptionalBoolean(node.props.active), style: layoutCss, target: extractValue((_b = node.props) === null || _b === void 0 ? void 0 : _b.target), icon: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: iconName, className: NavLink_module_scss_1.default.icon }), children: extractValue.asDisplayText(node.props.label) || renderChild(node.children) }));
+}, metadata);

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

@@ -0,0 +1,101 @@
+"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.navPanelRenderer = exports.NavPanelContext = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const NavPanel_module_scss_1 = __importDefault(require("./NavPanel.module.scss"));
+const renderers_1 = require("@components-core/renderers");
+const classnames_1 = __importDefault(require("@components-core/utils/classnames"));
+const Logo_1 = require("@components/Logo/Logo");
+const ScrollContext_1 = require("@components-core/ScrollContext");
+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 App_1 = require("@components/App/App");
+const hooks_1 = require("@components-core/utils/hooks");
+exports.NavPanelContext = react_1.default.createContext(null);
+const contextValue = {
+    inDrawer: true,
+};
+function DrawerNavPanel({ logoContent, children, className, style, }) {
+    const scrollContainerRef = (0, react_1.useRef)(null);
+    return ((0, jsx_runtime_1.jsx)(exports.NavPanelContext.Provider, { value: contextValue, children: (0, jsx_runtime_1.jsx)("div", { ref: scrollContainerRef, className: (0, classnames_1.default)(NavPanel_module_scss_1.default.wrapper, className), children: (0, jsx_runtime_1.jsxs)(ScrollContext_1.ScrollContext.Provider, { value: scrollContainerRef, children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(NavPanel_module_scss_1.default.logoWrapper, NavPanel_module_scss_1.default.inDrawer), children: logoContent || (0, jsx_runtime_1.jsx)(Logo_1.Logo, { inDrawer: true }) }), (0, jsx_runtime_1.jsx)("div", { className: NavPanel_module_scss_1.default.wrapperInner, style: style, children: children })] }) }) }));
+}
+function NavPanel({ children, style, logoContent, className, }) {
+    const id = (0, react_1.useId)();
+    const scrollContainerRef = (0, react_1.useRef)(null);
+    const appLayoutContext = (0, AppLayoutContext_1.useAppLayoutContext)();
+    const horizontal = (0, App_1.getAppLayoutOrientation)(appLayoutContext === null || appLayoutContext === void 0 ? void 0 : appLayoutContext.layout) === "horizontal";
+    const showLogo = (appLayoutContext === null || appLayoutContext === void 0 ? void 0 : appLayoutContext.layout) === "vertical" || (appLayoutContext === null || appLayoutContext === void 0 ? void 0 : appLayoutContext.layout) === "vertical-sticky";
+    const registered = (0, react_1.useRef)(false);
+    (0, hooks_1.useIsomorphicLayoutEffect)(() => {
+        if (!appLayoutContext || registered.current) {
+            return;
+        }
+        appLayoutContext.registerNavPanel(id);
+        registered.current = true;
+        return () => {
+            registered.current = false;
+            appLayoutContext.unregisterNavPanel(id);
+        };
+    }, [appLayoutContext, id]);
+    if (appLayoutContext) {
+        const { navPanelRoot, navPanelVisible, drawerVisible, drawerRoot } = appLayoutContext;
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [navPanelRoot &&
+                    navPanelVisible &&
+                    (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)("div", { ref: scrollContainerRef, className: (0, classnames_1.default)(NavPanel_module_scss_1.default.wrapper, className, {
+                            [NavPanel_module_scss_1.default.horizontal]: horizontal,
+                        }), children: (0, jsx_runtime_1.jsxs)(ScrollContext_1.ScrollContext.Provider, { value: scrollContainerRef, children: [showLogo && (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(NavPanel_module_scss_1.default.logoWrapper), children: logoContent || (0, jsx_runtime_1.jsx)(Logo_1.Logo, {}) }), (0, jsx_runtime_1.jsx)("div", { className: NavPanel_module_scss_1.default.wrapperInner, style: style, children: children })] }) }), navPanelRoot), drawerRoot &&
+                    drawerVisible &&
+                    (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(DrawerNavPanel, { className: className, style: style, logoContent: logoContent, children: children }), drawerRoot)] }));
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { ref: scrollContainerRef, className: (0, classnames_1.default)(NavPanel_module_scss_1.default.wrapper, className, {
+            [NavPanel_module_scss_1.default.horizontal]: horizontal,
+        }), children: (0, jsx_runtime_1.jsxs)(ScrollContext_1.ScrollContext.Provider, { value: scrollContainerRef, children: [showLogo && (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(NavPanel_module_scss_1.default.logoWrapper), children: logoContent || (0, jsx_runtime_1.jsx)(Logo_1.Logo, {}) }), (0, jsx_runtime_1.jsx)("div", { className: NavPanel_module_scss_1.default.wrapperInner, style: style, children: children })] }) }));
+}
+const metadata = {
+    displayName: "NavPanel",
+    description: "Display an avatar associated with an entity",
+    props: {
+        logoTemplate: {
+            description: "Optional logo template for the navigation panel. " + "It may be different than the one used for the app",
+            valueType: "ComponentDef",
+        },
+    },
+    themeVars: (0, themeVars_1.parseScssVar)(NavPanel_module_scss_1.default.themeVars),
+    defaultThemeVars: Object.assign(Object.assign({ "color-bg-NavPanel": "transparent" }, (0, base_utils_1.borderSubject)("NavPanel", {})), { "padding-horizontal-NavPanel": "$space-4", "padding-vertical-logo-NavPanel": "$space-4", "padding-horizontal-logo-NavPanel": "$space-4", "margin-bottom-logo-NavPanel": "$space-4", light: {
+            "shadow-NavPanel-vertical": "4px 0 4px 0 rgb(0 0 0 / 10%)",
+        }, dark: {
+            "shadow-NavPanel-vertical": "4px 0 6px 0 rgba(0, 0, 0, 0.2)",
+        } }),
+};
+exports.navPanelRenderer = (0, renderers_1.createComponentRenderer)("NavPanel", ({ node, renderChild, layoutCss, layoutContext }) => {
+    return ((0, jsx_runtime_1.jsx)(NavPanel, { style: layoutCss, logoContent: renderChild(node.props.logoTemplate) || (layoutContext === null || layoutContext === void 0 ? void 0 : layoutContext.logoContent), className: layoutContext === null || layoutContext === void 0 ? void 0 : layoutContext.themeClassName, children: renderChild(node.children) }));
+}, metadata);

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

@@ -0,0 +1,39 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.noResultComponentRenderer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Icon_1 = require("@components/Icon/Icon");
+const NoResult_module_scss_1 = __importDefault(require("./NoResult.module.scss"));
+const renderers_1 = require("@components-core/renderers");
+const descriptorHelper_1 = require("@components-core/descriptorHelper");
+const themeVars_1 = require("@components-core/theming/themeVars");
+const NoResult = ({ label, icon, hideIcon = false, style }) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: NoResult_module_scss_1.default.wrapper, style: style, children: [!hideIcon && (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: icon !== null && icon !== void 0 ? icon : "noResult", className: NoResult_module_scss_1.default.icon }), label] }));
+};
+const metadata = {
+    displayName: "NoResult",
+    description: "Component representing a date fetch result with an empty result set",
+    props: {
+        label: (0, descriptorHelper_1.desc)("Optional label to display"),
+        icon: (0, descriptorHelper_1.desc)("Optional icon ID to display"),
+        hideIcon: (0, descriptorHelper_1.desc)("Indicates if the icon should be hidden"),
+    },
+    themeVars: (0, themeVars_1.parseScssVar)(NoResult_module_scss_1.default.themeVars),
+    defaultThemeVars: {
+        "padding-vertical-NoResult": "$space-2",
+        "gap-icon-NoResult": "$space-2",
+        "size-icon-NoResult": "$space-8",
+        light: {
+        // --- No light-specific theme vars
+        },
+        dark: {
+        // --- No dark-specific theme vars
+        },
+    },
+};
+exports.noResultComponentRenderer = (0, renderers_1.createComponentRenderer)("NoResult", ({ node, extractValue, layoutCss }) => {
+    return ((0, jsx_runtime_1.jsx)(NoResult, { label: extractValue.asDisplayText(node.props.label || node.children || "No results found"), icon: node.props.icon, hideIcon: extractValue.asOptionalBoolean(node.props.hideIcon), style: layoutCss }));
+}, metadata);