superdesk-ui-framework 7.0.0-dev1 → 7.0.0-dev2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "superdesk-ui-framework",
-    "version": "7.0.0-dev1",
+    "version": "7.0.0-dev2",
     "license": "AGPL-3.0",
     "repository": {
         "type": "git",

package/react/components/Dropdown.d.ts

@@ -5,23 +5,24 @@ export interface IMenuItem {
     active?: boolean;
     onSelect(): void;
 }
+export type IMenuElement = IMenuItem | ISubmenu | IMenuGroup | 'divider';
 export interface ISubmenu {
     type: 'submenu';
     label: string | React.ReactNode;
     icon?: string;
-    items: Array<IMenuItem | ISubmenu | IMenuGroup | 'divider'>;
+    items: Array<IMenuElement>;
 }
 export interface IMenuGroup {
     type: 'group';
     label?: string | React.ReactNode;
-    items: Array<IMenuItem | ISubmenu | IMenuGroup | 'divider'>;
+    items: Array<IMenuElement>;
 }
 interface IMenu {
     label?: string | React.ReactNode;
     align?: 'left' | 'right';
-    items: Array<IMenuItem | ISubmenu | IMenuGroup | 'divider'>;
-    header?: Array<IMenuItem | ISubmenu | IMenuGroup | 'divider'>;
-    footer?: Array<IMenuItem | ISubmenu | IMenuGroup | 'divider'>;
+    items: Array<IMenuElement>;
+    header?: Array<IMenuElement>;
+    footer?: Array<IMenuElement>;
     children: React.ReactNode;
     onChange?(event?: any): void;
     maxHeight?: number;

package/react/components/Dropdown.js

@@ -51,155 +51,115 @@ var core_1 = require("@popperjs/core");
 var react_id_generator_1 = require("react-id-generator");
 var zIndex_1 = require("./../zIndex");
 var DROPDOWN_ID_CONTAINER = 'sd-dropdown-constainer';
+function ensureDropdownContainer() {
+    var placeholder = document.getElementById(DROPDOWN_ID_CONTAINER);
+    if (!placeholder) {
+        placeholder = document.createElement('div');
+        placeholder.id = DROPDOWN_ID_CONTAINER;
+        placeholder.style.position = 'absolute';
+        placeholder.style.top = '0';
+        placeholder.style.left = '0';
+        placeholder.style.width = '1px';
+        placeholder.style.height = '1px';
+        placeholder.setAttribute('data-test-id', 'dropdown-overlay');
+        document.body.appendChild(placeholder);
+    }
+    return placeholder;
+}
 var Dropdown = function (_a) {
     var items = _a.items, header = _a.header, footer = _a.footer, children = _a.children, align = _a.align, onChange = _a.onChange, maxHeight = _a.maxHeight;
-    var _b = React.useState(-1), zIndex = _b[0], setZIndex = _b[1];
-    if (zIndex === -1) {
-        setZIndex((0, zIndex_1.getNextZIndex)());
-    }
-    var _c = React.useState(false), open = _c[0], setOpen = _c[1];
-    var _d = React.useState(false), change = _d[0], setChange = _d[1];
+    var zIndex = React.useState(zIndex_1.getNextZIndex)[0];
+    var _b = React.useState(false), open = _b[0], setOpen = _b[1];
+    var _c = React.useState(null), container = _c[0], setContainer = _c[1];
     var menuID = (0, react_id_generator_1.useId)()[0];
-    var ref = React.useRef(null);
+    var menuRef = React.useRef(null);
     var buttonRef = React.useRef(null);
-    var headerElements = header === null || header === void 0 ? void 0 : header.map(function (el, index) {
-        return each(el, index);
-    });
-    var maxHeightStyle = maxHeight ? { maxHeight: maxHeight } : {};
-    var dropdownElements = items.map(function (el, index) {
-        return each(el, index);
-    });
-    var footerElements = footer === null || footer === void 0 ? void 0 : footer.map(function (el, index) {
-        return each(el, index);
-    });
-    React.useEffect(function () {
-        var existingElement = document.getElementById(DROPDOWN_ID_CONTAINER);
-        if (!existingElement) {
-            var el = document.createElement('div');
-            el.id = DROPDOWN_ID_CONTAINER;
-            el.style.position = 'absolute';
-            el.style.top = '0';
-            el.style.left = '0';
-            el.style.width = '1px';
-            el.style.height = '1px';
-            el.setAttribute('data-test-id', 'dropdown-overlay');
-            document.body.appendChild(el);
-        }
-    }, [change]);
+    // Callback refs so the same ref can be attached to either element type
+    // rendered by each branch below (ul/div for the menu, div/button for the toggle).
+    var setMenuRef = React.useCallback(function (element) {
+        menuRef.current = element;
+    }, []);
+    var setButtonRef = React.useCallback(function (element) {
+        buttonRef.current = element;
+    }, []);
+    // Created after mount rather than during render, so render stays side-effect free.
+    // The menu only opens on user interaction, so the container is always ready by then.
     React.useLayoutEffect(function () {
-        if (change) {
-            addInPlaceholder();
-        }
-        setChange(true);
-    }, [open]);
-    function createAppendMenu() {
-        if (header && footer) {
-            return (React.createElement("div", { className: "dropdown__menu dropdown__menu--has-head-foot", id: menuID, role: "menu", ref: ref, style: { zIndex: zIndex } },
-                React.createElement("ul", { className: "dropdown__menu-header" }, headerElements),
-                React.createElement("ul", { className: "dropdown__menu-body" }, dropdownElements),
-                React.createElement("ul", { className: "dropdown__menu-footer dropdown__menu-footer--has-list " }, footerElements)));
-        }
-        else if (header) {
-            return (React.createElement("div", { className: "dropdown__menu dropdown__menu--has-head-foot", id: menuID, role: "menu", ref: ref, style: { zIndex: zIndex } },
-                React.createElement("ul", { className: "dropdown__menu-header" }, headerElements),
-                React.createElement("ul", { className: "dropdown__menu-body" }, dropdownElements)));
-        }
-        else if (footer) {
-            return (React.createElement("div", { className: "dropdown__menu dropdown__menu--has-head-foot", id: menuID, role: "menu", ref: ref, style: { zIndex: zIndex } },
-                React.createElement("ul", { className: "dropdown__menu-body" }, dropdownElements),
-                React.createElement("ul", { className: "dropdown__menu-footer dropdown__menu-footer--has-list " }, footerElements)));
-        }
-        else {
-            return (React.createElement("ul", { className: "dropdown__menu ", id: menuID, role: "menu", ref: ref, style: __assign({ zIndex: zIndex, overflowY: 'auto' }, maxHeightStyle) }, dropdownElements));
-        }
-    }
-    function toggleDisplay() {
+        setContainer(ensureDropdownContainer());
+    }, []);
+    // Any click closes the menu — including clicks on menu items, which defer
+    // their `onSelect` so the menu is gone by the time it runs.
+    React.useEffect(function () {
         if (!open) {
-            var menuRef_1;
-            setOpen(true);
-            setTimeout(function () {
-                menuRef_1 = ref.current;
-                var toggleRef = buttonRef.current;
-                if (toggleRef && menuRef_1) {
-                    (0, core_1.createPopper)(toggleRef, menuRef_1, {
-                        placement: checkAlign() ? 'bottom-end' : 'bottom-start',
-                        strategy: 'fixed',
-                    });
-                    menuRef_1.style.display = 'block';
-                }
-            }, 0);
-            document.addEventListener('click', closeMenu);
-            setTimeout(function () {
-                menuRef_1.getElementsByTagName('button')[0].focus();
-            });
-        }
-        else {
-            setOpen(false);
-        }
-    }
-    function closeMenu() {
-        document.removeEventListener('click', closeMenu);
-        setOpen(false);
-    }
-    function checkAlign() {
-        if (align === 'right') {
-            return true;
-        }
-        else {
-            return false;
+            return;
         }
-    }
-    function addInPlaceholder() {
-        var placeholder = document.getElementById(DROPDOWN_ID_CONTAINER);
-        var menu = createAppendMenu();
-        if (open) {
-            return ReactDOM.render(menu, placeholder);
+        var closeMenu = function () { return setOpen(false); };
+        document.addEventListener('click', closeMenu);
+        return function () { return document.removeEventListener('click', closeMenu); };
+    }, [open]);
+    React.useLayoutEffect(function () {
+        var _a;
+        var toggle = buttonRef.current;
+        var menu = menuRef.current;
+        if (!open || toggle == null || menu == null) {
+            return;
+        }
+        var popper = (0, core_1.createPopper)(toggle, menu, {
+            placement: align === 'right' ? 'bottom-end' : 'bottom-start',
+            strategy: 'fixed',
+        });
+        (_a = menu.getElementsByTagName('button')[0]) === null || _a === void 0 ? void 0 : _a.focus();
+        return function () { return popper.destroy(); };
+    }, [open, align]);
+    function each(item, index) {
+        var _a;
+        if (item === 'divider') {
+            return React.createElement("li", { className: "dropdown__menu-divider", key: index });
         }
-        else {
-            if (placeholder) {
-                ReactDOM.unmountComponentAtNode(placeholder);
+        if ('type' in item && item.type === 'submenu') {
+            // Empty submenu definitions are treated as plain items so we never
+            // portal an empty menu panel.
+            if (item.items.length === 0) {
+                var asItem = item;
+                return (React.createElement(DropdownItem, { key: index, label: item.label, icon: item.icon, active: asItem.active, onSelect: (_a = asItem.onSelect) !== null && _a !== void 0 ? _a : (function () { return undefined; }), onChange: onChange }));
             }
+            return (React.createElement(DropdownItemWithSubmenu, { key: index, item: item, zIndex: zIndex, subMenuItems: item.items.map(each), onChange: onChange }));
         }
-    }
-    function each(item, index) {
-        if (item['type'] === 'submenu') {
-            var submenuItems_1 = [];
-            item['items'].forEach(function (el, key) {
-                submenuItems_1.push(each(el, key));
-            });
-            return (React.createElement(DropdownItemWithSubmenu, { key: index, index: index, item: item, menuID: menuID, subMenuItems: submenuItems_1, onChange: onChange }));
-        }
-        else if (item['type'] === 'group') {
-            var groupItems_1 = [];
-            item['items'].forEach(function (el, key) {
-                groupItems_1.push(each(el, key));
-            });
+        if ('type' in item && item.type === 'group') {
             return (React.createElement(React.Fragment, { key: index },
                 React.createElement("li", null,
-                    React.createElement("div", { className: "dropdown__menu-label" }, item['label'])),
-                groupItems_1));
-        }
-        else if (item === 'divider') {
-            return React.createElement("li", { className: "dropdown__menu-divider", key: index });
-        }
-        else {
-            return (React.createElement(DropdownItem, { key: index, label: item['label'], icon: item['icon'], active: item['active'], onSelect: item['onSelect'], onChange: onChange }));
+                    React.createElement("div", { className: "dropdown__menu-label" }, item.label)),
+                item.items.map(each)));
         }
+        return (React.createElement(DropdownItem, { key: index, label: item.label, icon: item.icon, active: item.active, onSelect: item.onSelect, onChange: onChange }));
+    }
+    function renderMenu() {
+        // Only constrain overflow when scrolling is requested. Submenus are portaled
+        // to document.body so they are not clipped by this overflow.
+        var menuStyle = __assign({ zIndex: zIndex, display: 'block' }, (maxHeight != null ? { maxHeight: maxHeight, overflowY: 'auto' } : {}));
+        if (header == null && footer == null) {
+            return (React.createElement("ul", { className: "dropdown__menu", id: menuID, role: "menu", ref: setMenuRef, style: menuStyle }, items.map(each)));
+        }
+        return (React.createElement("div", { className: "dropdown__menu dropdown__menu--has-head-foot", id: menuID, role: "menu", ref: setMenuRef, style: menuStyle },
+            header != null && React.createElement("ul", { className: "dropdown__menu-header" }, header.map(each)),
+            React.createElement("ul", { className: "dropdown__menu-body" }, items.map(each)),
+            footer != null && (React.createElement("ul", { className: "dropdown__menu-footer dropdown__menu-footer--has-list" }, footer.map(each)))));
     }
-    return (React.createElement("div", { className: 'dropdown ' + (open ? 'open' : '') }, typeof children === 'object' ? (React.isValidElement(children) ? (React.createElement("div", { ref: buttonRef, style: { display: 'content' } }, (function () {
-        var attrs = {
-            className: children.props.className
+    var toggleProps = {
+        'aria-haspopup': 'menu',
+        'aria-expanded': open,
+        onClick: function () { return setOpen(function (currentlyOpen) { return !currentlyOpen; }); },
+    };
+    return (React.createElement("div", { className: open ? 'dropdown open' : 'dropdown' },
+        React.isValidElement(children) ? (
+        // The wrapper (not the cloned child) is the popper anchor, so a plain
+        // function component can be used as the toggle without forwarding a ref.
+        React.createElement("div", { ref: setButtonRef }, React.cloneElement(children, __assign(__assign({}, toggleProps), { className: children.props.className
                 ? children.props.className + ' dropdown__toggle dropdown-toggle'
-                : 'dropdown__toggle dropdown-toggle',
-            'aria-haspopup': 'menu',
-            'aria-expanded': open,
-            onClick: toggleDisplay,
-            ref: buttonRef,
-        };
-        return React.cloneElement(children, attrs);
-    })())) : null) : (React.createElement("button", { style: { whiteSpace: 'nowrap' }, ref: buttonRef, className: " dropdown__toggle dropdown-toggle", "aria-haspopup": "menu", tabIndex: 0, "aria-expanded": open, onClick: toggleDisplay },
-        children,
-        React.createElement("span", { className: "dropdown__caret" })))));
+                : 'dropdown__toggle dropdown-toggle' })))) : (React.createElement("button", __assign({}, toggleProps, { ref: setButtonRef, className: "dropdown__toggle dropdown__toggle--default dropdown-toggle", tabIndex: 0 }),
+            children,
+            React.createElement("span", { className: "dropdown__caret" }))),
+        open && container != null && ReactDOM.createPortal(renderMenu(), container)));
 };
 exports.Dropdown = Dropdown;
 var DropdownItem = function (_a) {
@@ -209,49 +169,84 @@ var DropdownItem = function (_a) {
                 setTimeout(function () {
                     onSelect();
                 });
-                if (onChange) {
-                    onChange();
-                }
+                onChange === null || onChange === void 0 ? void 0 : onChange();
             } },
             React.createElement("i", { className: icon ? 'icon-' + icon : '' }),
             label)));
 };
+var SUBMENU_CLOSE_DELAY_MS = 150;
+var SubmenuHoverContext = React.createContext({
+    keepParentOpen: function () { return undefined; },
+    scheduleParentClose: function () { return undefined; },
+});
+function isMovingToDropdown(relatedTarget) {
+    return relatedTarget instanceof Element ? relatedTarget.closest('.dropdown__menu, .dropdown') != null : false;
+}
 var DropdownItemWithSubmenu = function (_a) {
-    var index = _a.index, item = _a.item, menuID = _a.menuID, subMenuItems = _a.subMenuItems, onChange = _a.onChange;
-    var _b = React.useState(undefined), open = _b[0], setOpen = _b[1];
+    var item = _a.item, zIndex = _a.zIndex, subMenuItems = _a.subMenuItems, onChange = _a.onChange;
+    var _b = React.useState(false), open = _b[0], setOpen = _b[1];
+    var _c = React.useState(zIndex + 1), submenuZIndex = _c[0], setSubmenuZIndex = _c[1];
     var refButtonSubMenu = React.useRef(null);
     var refSubMenu = React.useRef(null);
-    var placeholder = document.getElementById(menuID);
-    React.useEffect(function () {
-        var subMenuRef = refSubMenu.current;
-        var subToggleRef = refButtonSubMenu.current;
-        if (open === true) {
-            placeholder === null || placeholder === void 0 ? void 0 : placeholder.appendChild(subMenuRef);
-            subMenuRef.style.display = 'block';
-        }
-        else if (open === false) {
-            placeholder === null || placeholder === void 0 ? void 0 : placeholder.removeChild(subMenuRef);
-            subMenuRef.style.display = 'none';
+    var closeTimeoutRef = React.useRef(null);
+    var parentHover = React.useContext(SubmenuHoverContext);
+    var onSelect = item.onSelect;
+    var clearCloseTimeout = React.useCallback(function () {
+        if (closeTimeoutRef.current != null) {
+            window.clearTimeout(closeTimeoutRef.current);
+            closeTimeoutRef.current = null;
+        }
+    }, []);
+    var openSubmenu = function () {
+        if (subMenuItems.length === 0) {
+            return;
+        }
+        clearCloseTimeout();
+        parentHover.keepParentOpen();
+        if (!open) {
+            setSubmenuZIndex((0, zIndex_1.getNextZIndex)());
         }
-        if (subMenuRef && subToggleRef) {
-            (0, core_1.createPopper)(subToggleRef, subMenuRef, {
-                placement: 'right-start',
-            });
+        setOpen(true);
+    };
+    var scheduleClose = function (closeAncestors) {
+        clearCloseTimeout();
+        closeTimeoutRef.current = window.setTimeout(function () {
+            setOpen(false);
+            closeTimeoutRef.current = null;
+        }, SUBMENU_CLOSE_DELAY_MS);
+        if (closeAncestors) {
+            parentHover.scheduleParentClose();
         }
+    };
+    var handleMouseLeave = function (event) {
+        scheduleClose(!isMovingToDropdown(event.relatedTarget));
+    };
+    React.useEffect(function () { return clearCloseTimeout; }, [clearCloseTimeout]);
+    React.useLayoutEffect(function () {
+        if (!open || refButtonSubMenu.current == null || refSubMenu.current == null) {
+            return;
+        }
+        // Portal to body so parent overflow (e.g. maxHeight) cannot clip the submenu.
+        var popper = (0, core_1.createPopper)(refButtonSubMenu.current, refSubMenu.current, {
+            placement: 'right-start',
+            strategy: 'fixed',
+        });
+        return function () { return popper.destroy(); };
     }, [open]);
-    return (React.createElement("li", { key: index, ref: refButtonSubMenu },
-        React.createElement("div", { className: "dropdown", onMouseLeave: function () { return setOpen(false); } },
-            React.createElement("button", { className: "dropdown__toggle dropdown-toggle", "aria-haspopup": "menu", tabIndex: 0, onClick: function () {
-                    if (item.onSelect) {
-                        setTimeout(function () {
-                            item.onSelect();
-                        });
-                    }
-                    if (onChange) {
-                        onChange();
+    return (React.createElement("li", { ref: refButtonSubMenu, role: "none" },
+        React.createElement("div", { className: "dropdown", onMouseEnter: openSubmenu, onMouseLeave: handleMouseLeave },
+            React.createElement("button", { className: "dropdown__toggle dropdown-toggle", role: "menuitem", "aria-haspopup": "menu", "aria-expanded": open, tabIndex: 0, onClick: function () {
+                    if (onSelect != null) {
+                        setTimeout(function () { return onSelect(); });
                     }
-                }, onMouseOver: function () { return setOpen(true); } },
-                item['icon'] ? React.createElement("i", { className: 'icon-' + item['icon'] }) : null,
-                item['label']),
-            React.createElement("ul", { role: "menu", ref: refSubMenu, style: { display: 'none' }, className: "dropdown__menu" }, subMenuItems))));
+                    onChange === null || onChange === void 0 ? void 0 : onChange();
+                }, onMouseOver: openSubmenu },
+                item.icon ? React.createElement("i", { className: 'icon-' + item.icon }) : null,
+                item.label)),
+        open &&
+            ReactDOM.createPortal(React.createElement(SubmenuHoverContext.Provider, { value: {
+                    keepParentOpen: openSubmenu,
+                    scheduleParentClose: function () { return scheduleClose(true); },
+                } },
+                React.createElement("ul", { role: "menu", ref: refSubMenu, className: "dropdown__menu", style: { display: 'block', zIndex: submenuZIndex }, onMouseEnter: openSubmenu, onMouseLeave: handleMouseLeave }, subMenuItems)), document.body)));
 };

package/storybook-static/iframe.html

@@ -550,4 +550,4 @@
       
       import './780.b0b7860a.iframe.bundle.js';
       
-      import './main.f0d64657.iframe.bundle.js';</script></body></html>
+      import './main.18fb8930.iframe.bundle.js';</script></body></html>