@ilo-org/react 0.16.3 → 0.17.0

package/lib/cjs/components/Breadcrumb/Breadcrumb.js

@@ -8,30 +8,182 @@ var components_ContextMenu_ContextMenu = require('../ContextMenu/ContextMenu.js'
 require('tslib');
 require('../../GlobalCtx-10114bdd.js');
 
-const Breadcrumb = ({ home, links }) => {
+const BreadcrumbItem = ({ url, label, className, labelShown = true, }) => {
     const { prefix } = hooks_useGlobalSettings();
-    const [showContextMenu, enableContextMenu] = React.useState(false);
-    const [toggleMenuOpen, setContextMenuToggleOpen] = React.useState(false);
-    const handleScreenResize = () => {
-        enableContextMenu(window.innerWidth <= 1024); // turn on context menu when screen is resized to a smaller size
-    };
+    const baseClass = `${prefix}--breadcrumb--item`;
+    const linkClass = `${prefix}--breadcrumb--link`;
+    const labelClass = `${linkClass}--label`;
+    const breadcrumbLinkClass = classNames(baseClass, className);
+    return (jsxRuntime.jsx("li", Object.assign({ className: breadcrumbLinkClass }, { children: labelShown ? (jsxRuntime.jsx("a", Object.assign({ className: linkClass, href: url }, { children: jsxRuntime.jsx("span", Object.assign({ className: labelClass }, { children: label })) }))) : (jsxRuntime.jsx("a", { "aria-label": label, className: linkClass, href: url })) })));
+};
+const Breadcrumb = ({ className, links, buttonLabel }) => {
+    const { prefix } = hooks_useGlobalSettings();
+    // State
+    const [isCtxMenuOpen, setIsCtxMenuOpen] = React.useState(false);
+    const [ctxMenuPosition, setCtxMenuPosition] = React.useState({
+        start: 0,
+        top: 0,
+    });
+    const [isMenuCollapsed, setIsMenuCollapsed] = React.useState(false);
+    // Refs
+    const breadcrumbsRef = React.useRef(null);
+    const breadcrumbsWidth = React.useRef(0);
+    const buttonRef = React.useRef(null);
+    const ctxMenuRef = React.useRef(null);
+    // Shortcuts to classnames
+    const baseClass = `${prefix}--breadcrumb`;
+    const innerClass = `${baseClass}--inner`;
+    const itemsClass = `${baseClass}--items`;
+    const itemClass = `${baseClass}--item`;
+    const itemFirstClass = `${itemClass}__first`;
+    const contextClass = `${baseClass}--context`;
+    const contextCollapsedClass = `${contextClass}__collapse`;
+    const contextId = `${baseClass}--menu`;
+    const buttonClass = `${contextClass}--button`;
+    // Dynamic classnames
+    const breadcrumbClass = classNames(baseClass, className);
+    const contextItemsClass = classNames(contextClass, {
+        [contextCollapsedClass]: isMenuCollapsed,
+    });
+    const contextMenuClass = classNames(`${contextClass}--menu`, {
+        [`${contextClass}--menu__visible`]: isCtxMenuOpen,
+    });
+    // Handlers
+    function handleButtonClick() {
+        setIsCtxMenuOpen(!isCtxMenuOpen);
+    }
+    const collapseMenu = React.useCallback((collapse) => {
+        if (collapse && !isMenuCollapsed) {
+            setIsMenuCollapsed(true);
+        }
+        if (!collapse && isMenuCollapsed) {
+            setIsMenuCollapsed(false);
+        }
+    }, [isMenuCollapsed]);
+    // Get the width of the breadcrumbs and store it in a ref
+    React.useLayoutEffect(() => {
+        const breadcrumbs = breadcrumbsRef === null || breadcrumbsRef === void 0 ? void 0 : breadcrumbsRef.current;
+        if (!breadcrumbs || !window || !document) {
+            return;
+        }
+        breadcrumbsWidth.current = breadcrumbs.offsetWidth;
+    }, []);
+    // Collapse or uncollapse the Context Menu depending on body width
+    React.useLayoutEffect(() => {
+        const breadcrumbs = breadcrumbsRef === null || breadcrumbsRef === void 0 ? void 0 : breadcrumbsRef.current;
+        if (!breadcrumbs || !window || !document) {
+            return;
+        }
+        const observer = new ResizeObserver((entries) => {
+            const bodyWidth = entries[0].contentRect.width;
+            if (breadcrumbsWidth.current >= bodyWidth / 1.5) {
+                collapseMenu(true);
+            }
+            else {
+                collapseMenu(false);
+            }
+        });
+        observer.observe(document.body);
+        return () => {
+            observer.disconnect();
+        };
+    }, [collapseMenu]);
+    // Position the Context Menu right below the button
+    React.useLayoutEffect(() => {
+        if (!buttonRef.current || !ctxMenuRef.current) {
+            return;
+        }
+        if (isMenuCollapsed && isCtxMenuOpen) {
+            const buttonRect = buttonRef.current.getBoundingClientRect();
+            const buttonCenterX = buttonRect.left + buttonRect.width / 2;
+            const contextMenuWidth = ctxMenuRef.current.offsetWidth;
+            const navStart = buttonCenterX - contextMenuWidth / 2;
+            const navTop = buttonRect.bottom + 16;
+            setCtxMenuPosition({ start: navStart, top: navTop });
+        }
+    }, [isMenuCollapsed, isCtxMenuOpen]);
+    // If the ContextMenu is open, close it if the user clicks outside of it
     React.useEffect(() => {
-        window.addEventListener("resize", handleScreenResize);
-        handleScreenResize();
+        function handleClickOutside(event) {
+            if (isCtxMenuOpen &&
+                ctxMenuRef.current &&
+                !ctxMenuRef.current.contains(event.target) &&
+                buttonRef.current &&
+                !buttonRef.current.contains(event.target)) {
+                setIsCtxMenuOpen(false);
+            }
+        }
+        document.addEventListener("mousedown", handleClickOutside);
         return () => {
-            window.removeEventListener("resize", handleScreenResize);
+            document.removeEventListener("mousedown", handleClickOutside);
         };
-    }, []);
-    const handleContextMenuToggle = () => {
-        setContextMenuToggleOpen(!toggleMenuOpen);
-    };
-    const showContext = links.length > 4 || showContextMenu ? true : false;
-    const baseClass = `${prefix}--breadcrumb`;
-    const BreadcrumbClasses = classNames(baseClass);
+    }, [isMenuCollapsed, isCtxMenuOpen]);
+    // Close the context menu if the breadcrumbs should un-collapse
+    React.useEffect(() => {
+        if (isCtxMenuOpen && !isMenuCollapsed) {
+            setIsCtxMenuOpen(false);
+        }
+    }, [isMenuCollapsed, isCtxMenuOpen]);
+    // handle tab navigation when the context menu is open
+    React.useEffect(() => {
+        if (!buttonRef.current || !ctxMenuRef.current) {
+            return;
+        }
+        function handleKeyDown(event) {
+            var _a, _b, _c, _d;
+            if (!isCtxMenuOpen || !isMenuCollapsed) {
+                return;
+            }
+            if (event.key === "Tab") {
+                const links = (_a = ctxMenuRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll("a");
+                const lastBreadCrumb = (_c = (_b = breadcrumbsRef.current) === null || _b === void 0 ? void 0 : _b.lastElementChild) === null || _c === void 0 ? void 0 : _c.querySelector("a");
+                if (!links || !lastBreadCrumb) {
+                    return;
+                }
+                const firstLink = links[0];
+                const lastLink = links[links.length - 1];
+                // If the user is tabbing...
+                if (!event.shiftKey) {
+                    // If the context button is focused then the next focusable item
+                    // should be the first item in the context menu
+                    if (document.activeElement === buttonRef.current) {
+                        event.preventDefault();
+                        firstLink.focus();
+                        return;
+                    }
+                    // If the last context item is focused then the focus should go to
+                    // the last breadcrumb item
+                    if (document.activeElement === lastLink) {
+                        event.preventDefault();
+                        lastBreadCrumb.focus();
+                    }
+                }
+                // If the user is shift-tabbing...
+                if (event.shiftKey) {
+                    // If the first item is focused then the focus should go back to the context button
+                    if (event.shiftKey && document.activeElement === firstLink) {
+                        event.preventDefault();
+                        (_d = buttonRef === null || buttonRef === void 0 ? void 0 : buttonRef.current) === null || _d === void 0 ? void 0 : _d.focus();
+                    }
+                    // If the focus is on the last breadcrumb item then the focus should go
+                    // to the last item in the context menu
+                    if (event.shiftKey && document.activeElement === lastBreadCrumb) {
+                        event.preventDefault();
+                        lastLink.focus();
+                    }
+                }
+            }
+        }
+        document.addEventListener("keydown", handleKeyDown);
+        return () => {
+            document.removeEventListener("keydown", handleKeyDown);
+        };
+    });
+    // Separate out the links into first, context and last
+    const firstLink = links[0];
+    const contextLinks = links.slice(1, links.length - 1);
     const lastLink = links[links.length - 1];
-    const menuLinks = links.slice(0, -1);
-    return (jsxRuntime.jsx("nav", Object.assign({ className: `${BreadcrumbClasses} ${showContext ? " contextmenu" : ""}` }, { children: jsxRuntime.jsxs("ol", Object.assign({ className: `${baseClass}--items` }, { children: [jsxRuntime.jsx("li", Object.assign({ className: `${baseClass}--item home` }, { children: jsxRuntime.jsx("a", Object.assign({ className: `${baseClass}--link`, href: home.url }, { children: jsxRuntime.jsx("span", Object.assign({ className: `${baseClass}--link--label` }, { children: home.label })) })) })), jsxRuntime.jsx("li", Object.assign({ className: `${baseClass}--item--context`, onClick: handleContextMenuToggle }, { children: jsxRuntime.jsxs("ul", Object.assign({ className: `${baseClass}--items context--menu ${toggleMenuOpen ? " open" : ""}` }, { children: [showContext && jsxRuntime.jsx(components_ContextMenu_ContextMenu, { links: menuLinks }), !showContext &&
-                                menuLinks.map((link, index) => (jsxRuntime.jsx("li", Object.assign({ className: `${baseClass}--item` }, { children: jsxRuntime.jsx("a", Object.assign({ href: link.url, className: `${baseClass}--link` }, { children: jsxRuntime.jsx("span", Object.assign({ className: `${baseClass}--link--label` }, { children: link.label })) })) }), index)))] })) })), jsxRuntime.jsx("li", Object.assign({ className: `${baseClass}--item final` }, { children: jsxRuntime.jsx("a", Object.assign({ className: `${baseClass}--link`, href: lastLink.url }, { children: jsxRuntime.jsx("span", Object.assign({ className: `${baseClass}--link--label` }, { children: lastLink.label })) })) }))] })) })));
+    return (jsxRuntime.jsxs("nav", Object.assign({ className: breadcrumbClass }, { children: [jsxRuntime.jsx("div", Object.assign({ className: innerClass }, { children: jsxRuntime.jsxs("ol", Object.assign({ className: itemsClass, ref: breadcrumbsRef }, { children: [jsxRuntime.jsx(BreadcrumbItem, { url: firstLink.url, label: firstLink.label, labelShown: false, className: itemFirstClass }), contextLinks && contextLinks.length > 0 ? (jsxRuntime.jsxs("li", Object.assign({ className: contextItemsClass }, { children: [jsxRuntime.jsx("ol", Object.assign({ className: itemsClass }, { children: contextLinks.map((contextLink, i) => (jsxRuntime.jsx(BreadcrumbItem, { url: contextLink.url, label: contextLink.label }, i))) })), jsxRuntime.jsx("button", { "aria-label": buttonLabel, "aria-expanded": isCtxMenuOpen, "aria-controls": contextId, className: buttonClass, onClick: handleButtonClick, ref: buttonRef })] }))) : null, lastLink && (jsxRuntime.jsx(BreadcrumbItem, { url: lastLink.url, label: lastLink.label }))] })) })), jsxRuntime.jsx("div", Object.assign({ className: contextMenuClass, id: contextId, hidden: !isCtxMenuOpen, style: { left: ctxMenuPosition.start, top: ctxMenuPosition.top } }, { children: jsxRuntime.jsx(components_ContextMenu_ContextMenu, { links: contextLinks, ref: ctxMenuRef }) }))] })));
 };
 
 module.exports = Breadcrumb;

package/lib/cjs/components/ContextMenu/ContextMenu.js

@@ -1,20 +1,20 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
 var classNames = require('classnames');
 var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
 require('tslib');
-require('react');
 require('../../GlobalCtx-10114bdd.js');
 
-const ContextMenu = ({ className, links }) => {
+const ContextMenu = React.forwardRef(({ className, links }, ref) => {
     const { prefix } = hooks_useGlobalSettings();
     const baseClass = `${prefix}--context-menu`;
     const contextMenuClasses = classNames(className, {
         [baseClass]: true,
     });
-    return (jsxRuntime.jsx("ul", Object.assign({ className: contextMenuClasses }, { children: links &&
+    return (jsxRuntime.jsx("ol", Object.assign({ className: contextMenuClasses, ref: ref }, { children: links &&
             links.map((link, i) => (jsxRuntime.jsx("li", Object.assign({ className: `${baseClass}--item ${link.endsection ? "endsection" : ""}` }, { children: jsxRuntime.jsx("a", Object.assign({ href: link.url, className: `${baseClass}--link` }, { children: jsxRuntime.jsx("span", Object.assign({ className: `${baseClass}--label` }, { children: link.label })) })) }), `${baseClass}--item-${i}`))) })));
-};
+});
 
 module.exports = ContextMenu;

package/lib/cjs/components/ContextMenu/index.js

@@ -2,10 +2,10 @@
 
 var components_ContextMenu_ContextMenu = require('./ContextMenu.js');
 require('react/jsx-runtime');
+require('react');
 require('classnames');
 require('../../hooks/useGlobalSettings.js');
 require('tslib');
-require('react');
 require('../../GlobalCtx-10114bdd.js');
 
 

package/lib/esm/components/Breadcrumb/Breadcrumb.js

@@ -1,35 +1,187 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useState, useEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useRef, useCallback, useLayoutEffect, useEffect } from 'react';
 import useGlobalSettings from '../../hooks/useGlobalSettings.js';
 import classNames from 'classnames';
 import ContextMenu from '../ContextMenu/ContextMenu.js';
 import 'tslib';
 import '../../GlobalCtx-7fb23cfa.js';
 
-const Breadcrumb = ({ home, links }) => {
+const BreadcrumbItem = ({ url, label, className, labelShown = true, }) => {
     const { prefix } = useGlobalSettings();
-    const [showContextMenu, enableContextMenu] = useState(false);
-    const [toggleMenuOpen, setContextMenuToggleOpen] = useState(false);
-    const handleScreenResize = () => {
-        enableContextMenu(window.innerWidth <= 1024); // turn on context menu when screen is resized to a smaller size
-    };
+    const baseClass = `${prefix}--breadcrumb--item`;
+    const linkClass = `${prefix}--breadcrumb--link`;
+    const labelClass = `${linkClass}--label`;
+    const breadcrumbLinkClass = classNames(baseClass, className);
+    return (jsx("li", Object.assign({ className: breadcrumbLinkClass }, { children: labelShown ? (jsx("a", Object.assign({ className: linkClass, href: url }, { children: jsx("span", Object.assign({ className: labelClass }, { children: label })) }))) : (jsx("a", { "aria-label": label, className: linkClass, href: url })) })));
+};
+const Breadcrumb = ({ className, links, buttonLabel }) => {
+    const { prefix } = useGlobalSettings();
+    // State
+    const [isCtxMenuOpen, setIsCtxMenuOpen] = useState(false);
+    const [ctxMenuPosition, setCtxMenuPosition] = useState({
+        start: 0,
+        top: 0,
+    });
+    const [isMenuCollapsed, setIsMenuCollapsed] = useState(false);
+    // Refs
+    const breadcrumbsRef = useRef(null);
+    const breadcrumbsWidth = useRef(0);
+    const buttonRef = useRef(null);
+    const ctxMenuRef = useRef(null);
+    // Shortcuts to classnames
+    const baseClass = `${prefix}--breadcrumb`;
+    const innerClass = `${baseClass}--inner`;
+    const itemsClass = `${baseClass}--items`;
+    const itemClass = `${baseClass}--item`;
+    const itemFirstClass = `${itemClass}__first`;
+    const contextClass = `${baseClass}--context`;
+    const contextCollapsedClass = `${contextClass}__collapse`;
+    const contextId = `${baseClass}--menu`;
+    const buttonClass = `${contextClass}--button`;
+    // Dynamic classnames
+    const breadcrumbClass = classNames(baseClass, className);
+    const contextItemsClass = classNames(contextClass, {
+        [contextCollapsedClass]: isMenuCollapsed,
+    });
+    const contextMenuClass = classNames(`${contextClass}--menu`, {
+        [`${contextClass}--menu__visible`]: isCtxMenuOpen,
+    });
+    // Handlers
+    function handleButtonClick() {
+        setIsCtxMenuOpen(!isCtxMenuOpen);
+    }
+    const collapseMenu = useCallback((collapse) => {
+        if (collapse && !isMenuCollapsed) {
+            setIsMenuCollapsed(true);
+        }
+        if (!collapse && isMenuCollapsed) {
+            setIsMenuCollapsed(false);
+        }
+    }, [isMenuCollapsed]);
+    // Get the width of the breadcrumbs and store it in a ref
+    useLayoutEffect(() => {
+        const breadcrumbs = breadcrumbsRef === null || breadcrumbsRef === void 0 ? void 0 : breadcrumbsRef.current;
+        if (!breadcrumbs || !window || !document) {
+            return;
+        }
+        breadcrumbsWidth.current = breadcrumbs.offsetWidth;
+    }, []);
+    // Collapse or uncollapse the Context Menu depending on body width
+    useLayoutEffect(() => {
+        const breadcrumbs = breadcrumbsRef === null || breadcrumbsRef === void 0 ? void 0 : breadcrumbsRef.current;
+        if (!breadcrumbs || !window || !document) {
+            return;
+        }
+        const observer = new ResizeObserver((entries) => {
+            const bodyWidth = entries[0].contentRect.width;
+            if (breadcrumbsWidth.current >= bodyWidth / 1.5) {
+                collapseMenu(true);
+            }
+            else {
+                collapseMenu(false);
+            }
+        });
+        observer.observe(document.body);
+        return () => {
+            observer.disconnect();
+        };
+    }, [collapseMenu]);
+    // Position the Context Menu right below the button
+    useLayoutEffect(() => {
+        if (!buttonRef.current || !ctxMenuRef.current) {
+            return;
+        }
+        if (isMenuCollapsed && isCtxMenuOpen) {
+            const buttonRect = buttonRef.current.getBoundingClientRect();
+            const buttonCenterX = buttonRect.left + buttonRect.width / 2;
+            const contextMenuWidth = ctxMenuRef.current.offsetWidth;
+            const navStart = buttonCenterX - contextMenuWidth / 2;
+            const navTop = buttonRect.bottom + 16;
+            setCtxMenuPosition({ start: navStart, top: navTop });
+        }
+    }, [isMenuCollapsed, isCtxMenuOpen]);
+    // If the ContextMenu is open, close it if the user clicks outside of it
     useEffect(() => {
-        window.addEventListener("resize", handleScreenResize);
-        handleScreenResize();
+        function handleClickOutside(event) {
+            if (isCtxMenuOpen &&
+                ctxMenuRef.current &&
+                !ctxMenuRef.current.contains(event.target) &&
+                buttonRef.current &&
+                !buttonRef.current.contains(event.target)) {
+                setIsCtxMenuOpen(false);
+            }
+        }
+        document.addEventListener("mousedown", handleClickOutside);
         return () => {
-            window.removeEventListener("resize", handleScreenResize);
+            document.removeEventListener("mousedown", handleClickOutside);
         };
-    }, []);
-    const handleContextMenuToggle = () => {
-        setContextMenuToggleOpen(!toggleMenuOpen);
-    };
-    const showContext = links.length > 4 || showContextMenu ? true : false;
-    const baseClass = `${prefix}--breadcrumb`;
-    const BreadcrumbClasses = classNames(baseClass);
+    }, [isMenuCollapsed, isCtxMenuOpen]);
+    // Close the context menu if the breadcrumbs should un-collapse
+    useEffect(() => {
+        if (isCtxMenuOpen && !isMenuCollapsed) {
+            setIsCtxMenuOpen(false);
+        }
+    }, [isMenuCollapsed, isCtxMenuOpen]);
+    // handle tab navigation when the context menu is open
+    useEffect(() => {
+        if (!buttonRef.current || !ctxMenuRef.current) {
+            return;
+        }
+        function handleKeyDown(event) {
+            var _a, _b, _c, _d;
+            if (!isCtxMenuOpen || !isMenuCollapsed) {
+                return;
+            }
+            if (event.key === "Tab") {
+                const links = (_a = ctxMenuRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll("a");
+                const lastBreadCrumb = (_c = (_b = breadcrumbsRef.current) === null || _b === void 0 ? void 0 : _b.lastElementChild) === null || _c === void 0 ? void 0 : _c.querySelector("a");
+                if (!links || !lastBreadCrumb) {
+                    return;
+                }
+                const firstLink = links[0];
+                const lastLink = links[links.length - 1];
+                // If the user is tabbing...
+                if (!event.shiftKey) {
+                    // If the context button is focused then the next focusable item
+                    // should be the first item in the context menu
+                    if (document.activeElement === buttonRef.current) {
+                        event.preventDefault();
+                        firstLink.focus();
+                        return;
+                    }
+                    // If the last context item is focused then the focus should go to
+                    // the last breadcrumb item
+                    if (document.activeElement === lastLink) {
+                        event.preventDefault();
+                        lastBreadCrumb.focus();
+                    }
+                }
+                // If the user is shift-tabbing...
+                if (event.shiftKey) {
+                    // If the first item is focused then the focus should go back to the context button
+                    if (event.shiftKey && document.activeElement === firstLink) {
+                        event.preventDefault();
+                        (_d = buttonRef === null || buttonRef === void 0 ? void 0 : buttonRef.current) === null || _d === void 0 ? void 0 : _d.focus();
+                    }
+                    // If the focus is on the last breadcrumb item then the focus should go
+                    // to the last item in the context menu
+                    if (event.shiftKey && document.activeElement === lastBreadCrumb) {
+                        event.preventDefault();
+                        lastLink.focus();
+                    }
+                }
+            }
+        }
+        document.addEventListener("keydown", handleKeyDown);
+        return () => {
+            document.removeEventListener("keydown", handleKeyDown);
+        };
+    });
+    // Separate out the links into first, context and last
+    const firstLink = links[0];
+    const contextLinks = links.slice(1, links.length - 1);
     const lastLink = links[links.length - 1];
-    const menuLinks = links.slice(0, -1);
-    return (jsx("nav", Object.assign({ className: `${BreadcrumbClasses} ${showContext ? " contextmenu" : ""}` }, { children: jsxs("ol", Object.assign({ className: `${baseClass}--items` }, { children: [jsx("li", Object.assign({ className: `${baseClass}--item home` }, { children: jsx("a", Object.assign({ className: `${baseClass}--link`, href: home.url }, { children: jsx("span", Object.assign({ className: `${baseClass}--link--label` }, { children: home.label })) })) })), jsx("li", Object.assign({ className: `${baseClass}--item--context`, onClick: handleContextMenuToggle }, { children: jsxs("ul", Object.assign({ className: `${baseClass}--items context--menu ${toggleMenuOpen ? " open" : ""}` }, { children: [showContext && jsx(ContextMenu, { links: menuLinks }), !showContext &&
-                                menuLinks.map((link, index) => (jsx("li", Object.assign({ className: `${baseClass}--item` }, { children: jsx("a", Object.assign({ href: link.url, className: `${baseClass}--link` }, { children: jsx("span", Object.assign({ className: `${baseClass}--link--label` }, { children: link.label })) })) }), index)))] })) })), jsx("li", Object.assign({ className: `${baseClass}--item final` }, { children: jsx("a", Object.assign({ className: `${baseClass}--link`, href: lastLink.url }, { children: jsx("span", Object.assign({ className: `${baseClass}--link--label` }, { children: lastLink.label })) })) }))] })) })));
+    return (jsxs("nav", Object.assign({ className: breadcrumbClass }, { children: [jsx("div", Object.assign({ className: innerClass }, { children: jsxs("ol", Object.assign({ className: itemsClass, ref: breadcrumbsRef }, { children: [jsx(BreadcrumbItem, { url: firstLink.url, label: firstLink.label, labelShown: false, className: itemFirstClass }), contextLinks && contextLinks.length > 0 ? (jsxs("li", Object.assign({ className: contextItemsClass }, { children: [jsx("ol", Object.assign({ className: itemsClass }, { children: contextLinks.map((contextLink, i) => (jsx(BreadcrumbItem, { url: contextLink.url, label: contextLink.label }, i))) })), jsx("button", { "aria-label": buttonLabel, "aria-expanded": isCtxMenuOpen, "aria-controls": contextId, className: buttonClass, onClick: handleButtonClick, ref: buttonRef })] }))) : null, lastLink && (jsx(BreadcrumbItem, { url: lastLink.url, label: lastLink.label }))] })) })), jsx("div", Object.assign({ className: contextMenuClass, id: contextId, hidden: !isCtxMenuOpen, style: { left: ctxMenuPosition.start, top: ctxMenuPosition.top } }, { children: jsx(ContextMenu, { links: contextLinks, ref: ctxMenuRef }) }))] })));
 };
 
 export { Breadcrumb as default };

package/lib/esm/components/ContextMenu/ContextMenu.js

@@ -1,18 +1,18 @@
 import { jsx } from 'react/jsx-runtime';
+import React from 'react';
 import classNames from 'classnames';
 import useGlobalSettings from '../../hooks/useGlobalSettings.js';
 import 'tslib';
-import 'react';
 import '../../GlobalCtx-7fb23cfa.js';
 
-const ContextMenu = ({ className, links }) => {
+const ContextMenu = React.forwardRef(({ className, links }, ref) => {
     const { prefix } = useGlobalSettings();
     const baseClass = `${prefix}--context-menu`;
     const contextMenuClasses = classNames(className, {
         [baseClass]: true,
     });
-    return (jsx("ul", Object.assign({ className: contextMenuClasses }, { children: links &&
+    return (jsx("ol", Object.assign({ className: contextMenuClasses, ref: ref }, { children: links &&
             links.map((link, i) => (jsx("li", Object.assign({ className: `${baseClass}--item ${link.endsection ? "endsection" : ""}` }, { children: jsx("a", Object.assign({ href: link.url, className: `${baseClass}--link` }, { children: jsx("span", Object.assign({ className: `${baseClass}--label` }, { children: link.label })) })) }), `${baseClass}--item-${i}`))) })));
-};
+});
 
 export { ContextMenu as default };

package/lib/esm/components/ContextMenu/index.js

@@ -1,7 +1,7 @@
 export { default as ContextMenu } from './ContextMenu.js';
 import 'react/jsx-runtime';
+import 'react';
 import 'classnames';
 import '../../hooks/useGlobalSettings.js';
 import 'tslib';
-import 'react';
 import '../../GlobalCtx-7fb23cfa.js';

package/lib/styles/components/accordion.css

@@ -1 +1 @@
-@charset "UTF-8";.ilo--accordion--button{display:flex;flex-direction:row;justify-content:space-between;width:100%;margin:0;padding-block:.857449089rem;padding-inline-end:2.3579849946rem;background-color:#fff;background-position:calc(100% - .3215434084rem) 50%;background-repeat:no-repeat;background-size:1.2861736334rem 1.2861736334rem;border:none;border-top:2px solid #edf0f2;fill:#230050;font-family:Overpass,Noto Sans,Noto Sans CJK JP,Yu Gothic,Hiragino Sans,TakaoPGothic,PingFang SC,Microsoft YaHei,微软雅黑,sans-serif;color:#230050;font-weight:500;transition:all .5s ease-in-out;font-size:16px;letter-spacing:-.02em;line-height:21.6px;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23230050' d='M18 11h-5V6h-2v5H6v2h5v5h2v-5h5v-2z'/%3E%3C/svg%3E")}.ilo--accordion--button__large{font-size:18.66px;letter-spacing:-.035em;line-height:24.26px;padding-block:1.0718113612rem;padding-inline-end:2.3579849946rem}.ilo--accordion--button:focus,.ilo--accordion--button:hover{background-color:#ebf5fd;border-top-color:#1e2dbe;color:#1e2dbe;fill:#1e2dbe;cursor:pointer}.ilo--accordion--button:focus[aria-expanded=true],.ilo--accordion--button:hover[aria-expanded=true]{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231E2DBE' d='M18 11H6v2h12v-2z'/%3E%3C/svg%3E")}.ilo--accordion--button:focus[aria-expanded=false],.ilo--accordion--button:hover[aria-expanded=false]{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231E2DBE' d='M18 11h-5V6h-2v5H6v2h5v5h2v-5h5v-2z'/%3E%3C/svg%3E")}@media screen and (min-width:610px){.ilo--accordion--button{font-size:16px;letter-spacing:-.02em;line-height:21.6px}.ilo--accordion--button__large{font-size:18.66px;letter-spacing:-.035em;line-height:24.26px;padding:1.0718113612rem 0;padding-inline-end:2.3579849946rem}}.ilo--accordion--button[aria-expanded=true]{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23230050' d='M18 11H6v2h12v-2z'/%3E%3C/svg%3E")}.ilo--accordion--button[aria-expanded=false]{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23230050' d='M18 11h-5V6h-2v5H6v2h5v5h2v-5h5v-2z'/%3E%3C/svg%3E")}[dir=rtl] .ilo--accordion--button{background-position:calc(0% + .3215434084rem) 50%}.ilo--accordion--panel{max-height:0;transition:all .5s cubic-bezier(0,1,0,1);overflow:hidden}.ilo--accordion--panel .ilo--accordion--innerpanel{padding-bottom:1.9292604502rem;padding-top:.4287245445rem}.ilo--accordion--panel__open{max-height:100vh;transition:all .5s ease-in-out}.ilo--accordion--panel__open.ilo--accordion--panel__scroll{max-height:300px;overflow-y:auto;padding-right:1.7148981779rem}
+@charset "UTF-8";.ilo--accordion--button{display:flex;flex-direction:row;justify-content:space-between;width:100%;margin:0;padding-block:.857449089rem;padding-inline-end:2.3579849946rem;background-color:#fff;background-position:calc(100% - .3215434084rem) 50%;background-repeat:no-repeat;background-size:1.2861736334rem 1.2861736334rem;border:none;border-top:2px solid #edf0f2;fill:#230050;font-family:Overpass,Noto Sans,Noto Sans CJK JP,Yu Gothic,Hiragino Sans,TakaoPGothic,PingFang SC,Microsoft YaHei,微软雅黑,sans-serif;color:#230050;font-weight:500;transition:all .5s ease-in-out;font-size:16px;letter-spacing:-.02em;line-height:21.6px;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23230050' d='M18 11h-5V6h-2v5H6v2h5v5h2v-5h5v-2z'/%3E%3C/svg%3E")}.ilo--accordion--button__large{font-size:18.66px;letter-spacing:-.035em;line-height:24.26px;padding-block:1.0718113612rem;padding-inline-end:2.3579849946rem}.ilo--accordion--button:focus,.ilo--accordion--button:hover{background-color:#ebf5fd;border-top-color:#1e2dbe;color:#1e2dbe;fill:#1e2dbe;cursor:pointer}.ilo--accordion--button:focus[aria-expanded=true],.ilo--accordion--button:hover[aria-expanded=true]{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231E2DBE' d='M18 11H6v2h12v-2z'/%3E%3C/svg%3E")}.ilo--accordion--button:focus[aria-expanded=false],.ilo--accordion--button:hover[aria-expanded=false]{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231E2DBE' d='M18 11h-5V6h-2v5H6v2h5v5h2v-5h5v-2z'/%3E%3C/svg%3E")}@media screen and (min-width:610px){.ilo--accordion--button{font-size:16px;letter-spacing:-.02em;line-height:21.6px}.ilo--accordion--button__large{font-size:18.66px;letter-spacing:-.035em;line-height:24.26px;padding:1.0718113612rem 0;padding-inline-end:2.3579849946rem}}.ilo--accordion--button[aria-expanded=true]{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23230050' d='M18 11H6v2h12v-2z'/%3E%3C/svg%3E")}.ilo--accordion--button[aria-expanded=false]{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23230050' d='M18 11h-5V6h-2v5H6v2h5v5h2v-5h5v-2z'/%3E%3C/svg%3E")}[dir=rtl] .ilo--accordion--button{background-position:calc(0% + .3215434084rem) 50%}.ilo--accordion--panel{max-height:0;transition:all .5s cubic-bezier(0,1,0,1);overflow:hidden}.ilo--accordion--panel .ilo--accordion--innerpanel{padding-bottom:1.9292604502rem;padding-top:.4287245445rem;padding-inline-end:1.7148981779rem}.ilo--accordion--panel__open{max-height:100vh;transition:all .5s ease-in-out}.ilo--accordion--panel__open.ilo--accordion--panel__scroll{max-height:300px;overflow-y:auto}