@quadrats/react 0.7.7 → 1.0.0

package/toolbar/index.cjs.js

@@ -2,18 +2,192 @@
 
 var React = require('react');
 var clsx = require('clsx');
+var components = require('@quadrats/react/components');
 var core = require('@quadrats/core');
+var icons = require('@quadrats/icons');
 var react = require('@quadrats/react');
-var components = require('@quadrats/react/components');
 var tslib = require('tslib');
+var utils = require('@quadrats/react/utils');
 
 /**
  * A react element constant of toolbar divider.
  */
 const TOOLBAR_DIVIDER = React.createElement("span", { className: "qdr-toolbar__divider" });
 
+function InlineToolbar({ className, leftIcons, rightIcons }) {
+    return (React.createElement("div", { contentEditable: false, className: clsx('qdr-inline-toolbar', className) },
+        leftIcons.length > 0 && (React.createElement("div", { className: "qdr-inline-toolbar__wrapper" }, leftIcons.map((icon) => (React.createElement(components.Icon, { key: icon.icon.name, className: clsx('qdr-inline-toolbar__icon', {
+                'qdr-inline-toolbar__icon--active': icon.active,
+                'qdr-inline-toolbar__icon--disabled': icon.disabled,
+            }), icon: icon.icon, width: 24, height: 24, onClick: (e) => {
+                if (!icon.disabled) {
+                    e.preventDefault();
+                    icon.onClick();
+                }
+            } }))))),
+        leftIcons.length > 0 && rightIcons.length > 0 && React.createElement("div", { className: "qdr-inline-toolbar__divider" }),
+        rightIcons.map((icon) => (React.createElement(components.Icon, { key: icon.icon.name, className: clsx('qdr-inline-toolbar__icon', {
+                'qdr-inline-toolbar__icon--disabled': icon.disabled,
+            }), icon: icon.icon, width: 24, height: 24, onClick: (e) => {
+                if (!icon.disabled) {
+                    e.preventDefault();
+                    icon.onClick();
+                }
+            } })))));
+}
+
+const ToolbarContext = React.createContext({
+    fixed: false,
+});
+function useToolbar() {
+    return React.useContext(ToolbarContext);
+}
+
+const ToolbarMenuContext = React.createContext({
+    isInGroup: false,
+    menuExpanded: false,
+});
+function useToolbarMenu() {
+    return React.useContext(ToolbarMenuContext);
+}
+
+function ToolbarGroupIcon(props) {
+    const { className, children, withArrow = true } = props, rest = tslib.__rest(props, ["className", "children", "withArrow"]);
+    const wrapperRef = React.useRef(null);
+    const iconRef = React.useRef(null);
+    const menuRef = React.useRef(null);
+    const { toolbarRef } = useToolbar();
+    const [placement, setPlacement] = React.useState('bottom');
+    const [menuExpanded, setMenuExpanded] = React.useState(false);
+    utils.useClickAway(() => {
+        if (!menuExpanded) {
+            return;
+        }
+        return () => {
+            setMenuExpanded(false);
+        };
+    }, wrapperRef, [menuExpanded, wrapperRef]);
+    React.useLayoutEffect(() => {
+        function handler() {
+            const icon = iconRef.current;
+            const menu = menuRef.current;
+            const toolbar = toolbarRef === null || toolbarRef === void 0 ? void 0 : toolbarRef.current;
+            if (icon && menu) {
+                const rect = icon.getBoundingClientRect();
+                const toolbarRect = toolbar === null || toolbar === void 0 ? void 0 : toolbar.getBoundingClientRect();
+                const menuWidth = menu.clientWidth;
+                const menuHeight = menu.clientHeight;
+                if (rect.left + menuWidth > window.innerWidth) {
+                    if (rect.left + (menuWidth + rect.width) / 2 > window.innerWidth) {
+                        menu.style.right = '0';
+                        menu.style.left = 'unset';
+                    }
+                    else {
+                        menu.style.right = 'unset';
+                        menu.style.left = `-${(menuWidth - rect.width) / 2}px`;
+                    }
+                }
+                else {
+                    menu.style.right = 'unset';
+                    menu.style.left = '0';
+                }
+                if (toolbarRect && toolbarRect.top + toolbarRect.height + menuHeight > window.innerHeight) {
+                    setPlacement('top');
+                }
+                else {
+                    setPlacement('bottom');
+                }
+            }
+        }
+        handler();
+        window.addEventListener('resize', handler);
+        window.addEventListener('scroll', handler);
+        return () => {
+            window.removeEventListener('resize', handler);
+            window.removeEventListener('scroll', handler);
+        };
+    }, [toolbarRef]);
+    const onClick = React.useCallback(() => {
+        setMenuExpanded(expanded => !expanded);
+    }, []);
+    return (React.createElement(ToolbarMenuContext.Provider, { value: {
+            isInGroup: true,
+            menuExpanded,
+        } },
+        React.createElement("div", { ref: wrapperRef, className: "qdr-toolbar__icon__wrapper" },
+            React.createElement("div", { ref: iconRef, className: clsx('qdr-toolbar__icon', { 'qdr-toolbar__icon--expanded': menuExpanded }, className), onClick: onClick },
+                React.createElement(components.Icon, Object.assign({}, rest)),
+                withArrow && (React.createElement(components.Icon, { icon: icons.ArrowDown, className: "qdr-toolbar__icon__arrow", width: 12, height: 12 }))),
+            React.createElement("div", { ref: menuRef, className: clsx('qdr-toolbar__icon__menu', { 'qdr-toolbar__icon__menu--expanded': menuExpanded }, { 'qdr-toolbar__icon__menu--top': placement === 'top' }, { 'qdr-toolbar__icon__menu--bottom': placement === 'bottom' }) }, children))));
+}
+
 const StartToolInputContext = React.createContext(() => { });
 
+function usePreviousValue(value) {
+    const ref = React.useRef(value);
+    React.useEffect(() => {
+        ref.current = value;
+    }, [value]);
+    return ref.current;
+}
+function useAutoGroupIcons(tools, renderExpandedStatus) {
+    const preRenderExpandedStatus = usePreviousValue(renderExpandedStatus);
+    const fakeToolbarId = React.useMemo(() => (renderExpandedStatus ? 'fake-expanded-tools-wrapper' : 'fake-tools-wrapper'), [renderExpandedStatus]);
+    const fakeTools = React.useMemo(() => (React.createElement("div", { id: fakeToolbarId, className: "qdr-toolbar", style: { position: 'absolute', top: 0, left: 0, visibility: 'hidden', pointerEvents: 'none' } }, tools)), [fakeToolbarId, tools]);
+    const [takeCount, setTakeCount] = React.useState(0);
+    const toolsElements = React.useMemo(() => {
+        var _a, _b;
+        return (_b = (_a = tools === null || tools === void 0 ? void 0 : tools.props.children) === null || _a === void 0 ? void 0 : _a.filter(c => !!c).map((c, index) => (Object.assign(Object.assign({}, c), { id: index })))) !== null && _b !== void 0 ? _b : [];
+    }, [tools]);
+    const calcGroupIcons = React.useCallback(() => {
+        const fakeToolsWrapper = document.getElementById(fakeToolbarId);
+        if (fakeToolsWrapper) {
+            const toolbarRect = fakeToolsWrapper.getBoundingClientRect();
+            if (toolbarRect.right - window.innerWidth > 0) {
+                const iconWrappers = fakeToolsWrapper.getElementsByClassName('qdr-toolbar__icon__wrapper');
+                const targetIndex = Array.from(iconWrappers).findIndex((wrapper) => {
+                    const rect = wrapper.getBoundingClientRect();
+                    return rect.right > window.innerWidth;
+                });
+                const groupIcons = Array.from(iconWrappers).slice(targetIndex - 1, iconWrappers.length);
+                setTakeCount(groupIcons.length);
+            }
+            else {
+                setTakeCount(0);
+            }
+        }
+    }, [fakeToolbarId]);
+    React.useLayoutEffect(() => {
+        calcGroupIcons();
+        window.addEventListener('resize', calcGroupIcons);
+        return () => {
+            window.removeEventListener('resize', calcGroupIcons);
+        };
+    }, [calcGroupIcons]);
+    React.useEffect(() => {
+        if (renderExpandedStatus !== preRenderExpandedStatus) {
+            calcGroupIcons();
+        }
+    }, [renderExpandedStatus, preRenderExpandedStatus, calcGroupIcons]);
+    const takeIndex = React.useMemo(() => toolsElements.findIndex(el => el.id === toolsElements.filter(e => e.type !== 'span').slice(-takeCount)[0].id), [toolsElements, takeCount]);
+    const shownElements = React.useMemo(() => toolsElements.slice(0, takeIndex), [toolsElements, takeIndex]);
+    const groupElements = React.useMemo(() => toolsElements.slice(takeIndex).filter(g => g.type !== 'span').map((g) => {
+        var _a, _b;
+        if (((_b = (_a = g.props) === null || _a === void 0 ? void 0 : _a.children) === null || _b === void 0 ? void 0 : _b.length) > 0) {
+            return g.props.children;
+        }
+        return g;
+    }).reduce((acc, val) => {
+        return acc.concat(val);
+    }, []), [toolsElements, takeIndex]);
+    return {
+        fakeTools,
+        takeCount,
+        shownElements,
+        groupElements,
+    };
+}
+
 function ToolbarInput({ exit, toolInput }) {
     const { confirm, getPlaceholder } = toolInput;
     const onExit = (event) => {
@@ -117,7 +291,7 @@ function Toolbar(props) {
             }
             const el = toolbarRef.current;
             const range = lastNativeRangeRef.current;
-            if (shouldRender && el && range) {
+            if (shouldRender && el && range && !fixed) {
                 setPosition(el, range);
             }
         });
@@ -131,8 +305,11 @@ function Toolbar(props) {
     }, [props.containerRef]);
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     const tools = children(renderExpandedStatus && !fixed);
+    const { fakeTools, takeCount, shownElements, groupElements } = useAutoGroupIcons(tools, renderExpandedStatus && !fixed);
     const toolbarBody = (React.createElement(React.Fragment, null,
-        React.createElement(StartToolInputContext.Provider, { value: startToolInput }, tools),
+        React.createElement(StartToolInputContext.Provider, { value: startToolInput }, takeCount > 0 ? (React.createElement(React.Fragment, null,
+            shownElements,
+            React.createElement(ToolbarGroupIcon, { icon: icons.More, withArrow: false }, groupElements))) : tools),
         toolInput && (React.createElement(ToolbarInput, { exit: () => {
                 const { currentSelection } = toolInput;
                 if (currentSelection) {
@@ -142,8 +319,13 @@ function Toolbar(props) {
                 setToolInput(undefined);
             }, toolInput: toolInput }))));
     if (fixed) {
-        return (React.createElement("div", { className: clsx('qdr-toolbar__wrapper', 'qdr-toolbar__wrapper--fixed', { 'qdr-toolbar__wrapper--inputting': toolInput }, themeProps.className), style: themeProps.style },
-            React.createElement("div", { className: "qdr-toolbar" }, toolbarBody)));
+        return (React.createElement(ToolbarContext.Provider, { value: {
+                fixed: true,
+                toolbarRef: toolbarRef,
+            } },
+            React.createElement("div", { ref: toolbarRef, className: clsx('qdr-toolbar__wrapper', 'qdr-toolbar__wrapper--fixed', { 'qdr-toolbar__wrapper--inputting': toolInput }, themeProps.className), style: themeProps.style },
+                React.createElement("div", { className: "qdr-toolbar" }, toolbarBody),
+                fakeTools)));
     }
     if (!shouldRender || (disabledElementTypes && core.isNodesTypeIn(editor, disabledElementTypes, { mode: 'all' }))) {
         return null;
@@ -155,23 +337,129 @@ function Toolbar(props) {
         return null;
     }
     return (React.createElement(components.Portal, { getContainer: getPortalContainer },
-        React.createElement("div", { ref: toolbarRef, className: clsx('qdr-toolbar__wrapper', 'qdr-toolbar__wrapper--float', { 'qdr-toolbar__wrapper--inputting': toolInput }, themeProps.className), style: themeProps.style },
-            React.createElement("div", { className: "qdr-toolbar qdr-toolbar--radius qdr-toolbar--shadow" }, toolbarBody))));
+        React.createElement(ToolbarContext.Provider, { value: {
+                fixed: false,
+                toolbarRef: toolbarRef,
+            } },
+            React.createElement("div", { ref: toolbarRef, className: clsx('qdr-toolbar__wrapper', 'qdr-toolbar__wrapper--float', { 'qdr-toolbar__wrapper--inputting': toolInput }, themeProps.className), style: themeProps.style },
+                React.createElement("div", { className: "qdr-toolbar qdr-toolbar--radius qdr-toolbar--shadow" }, toolbarBody),
+                fakeTools))));
+}
+
+function getIconNameInGroup(iconOriginName, locale) {
+    switch (iconOriginName) {
+        case 'accordion':
+            return locale.editor.toolbar.accordion;
+        case 'align-center':
+            return locale.editor.toolbar.alignCenter;
+        case 'align-left':
+            return locale.editor.toolbar.alignLeft;
+        case 'align-right':
+            return locale.editor.toolbar.alignRight;
+        case 'blockquote':
+            return locale.editor.toolbar.quote;
+        case 'bold':
+            return locale.editor.toolbar.bold;
+        case 'card':
+            return locale.editor.toolbar.card;
+        case 'carousel':
+            return locale.editor.toolbar.carousel;
+        case 'dance':
+            return locale.editor.toolbar.dance;
+        case 'divider':
+            return locale.editor.toolbar.divider;
+        case 'drama':
+            return locale.editor.toolbar.drama;
+        case 'erase':
+            return locale.editor.toolbar.erase;
+        case 'facebook':
+            return locale.editor.toolbar.facebook;
+        case 'fn':
+            return locale.editor.toolbar.footnote;
+        case 'heading1':
+            return locale.editor.toolbar.heading1;
+        case 'heading2':
+            return locale.editor.toolbar.heading2;
+        case 'heading3':
+            return locale.editor.toolbar.heading3;
+        case 'heading4':
+            return locale.editor.toolbar.heading4;
+        case 'heading5':
+            return locale.editor.toolbar.heading5;
+        case 'heading6':
+            return locale.editor.toolbar.heading6;
+        case 'highlight':
+            return locale.editor.toolbar.highlight;
+        case 'image':
+            return locale.editor.toolbar.image;
+        case 'instagram':
+            return locale.editor.toolbar.instagram;
+        case 'italic':
+            return locale.editor.toolbar.italic;
+        case 'link':
+            return locale.editor.toolbar.link;
+        case 'ordered list':
+            return locale.editor.toolbar.orderedList;
+        case 'paragraph':
+            return locale.editor.toolbar.paragraph;
+        case 'podcast-apple':
+            return locale.editor.toolbar.podcastApple;
+        case 'read-more':
+            return locale.editor.toolbar.readMore;
+        case 'sheet-music':
+            return locale.editor.toolbar.sheetMusic;
+        case 'spotify':
+            return locale.editor.toolbar.spotify;
+        case 'strikethrough':
+            return locale.editor.toolbar.strikethrough;
+        case 'twitter':
+            return locale.editor.toolbar.twitter;
+        case 'underline':
+            return locale.editor.toolbar.underline;
+        case 'unlink':
+            return locale.editor.toolbar.unlink;
+        case 'unordered list':
+            return locale.editor.toolbar.unorderedList;
+        case 'video':
+            return locale.editor.toolbar.video;
+        case 'vimeo':
+            return locale.editor.toolbar.vimeo;
+        case 'youtube':
+            return locale.editor.toolbar.youtube;
+        default:
+            return '';
+    }
 }
 
 function ToolbarIcon(props) {
-    const { active, className, onMouseDown } = props, rest = tslib.__rest(props, ["active", "className", "onMouseDown"]);
-    return (React.createElement(components.Icon, Object.assign({}, rest, { className: clsx('qdr-toolbar__icon', { 'qdr-toolbar__icon--active': active }, className), onMouseDown: (event) => {
-            event.preventDefault();
-            onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(event);
-        } })));
+    const { active, className, icon, onClick: onClickProps, onMouseDown: onMouseDownProps } = props, rest = tslib.__rest(props, ["active", "className", "icon", "onClick", "onMouseDown"]);
+    const locale = react.useLocale();
+    const { isInGroup } = useToolbarMenu();
+    const onClick = React.useCallback((event) => {
+        onClickProps === null || onClickProps === void 0 ? void 0 : onClickProps(event);
+    }, [onClickProps]);
+    const onMouseDown = React.useCallback((event) => {
+        event.preventDefault();
+        onMouseDownProps === null || onMouseDownProps === void 0 ? void 0 : onMouseDownProps(event);
+    }, [onMouseDownProps]);
+    if (isInGroup) {
+        return (React.createElement("div", { className: clsx('qdr-toolbar__icon', 'qdr-toolbar__icon--with-name', { 'qdr-toolbar__icon--with-name--active': active }, className), onClick: onClick, onMouseDown: onMouseDown },
+            React.createElement(components.Icon, Object.assign({}, rest, { icon: icon, width: 20, height: 20 })),
+            React.createElement("p", { className: "qdr-toolbar__icon__name" }, getIconNameInGroup(icon.name, locale)),
+            active && (React.createElement(components.Icon, { className: "qdr-toolbar__icon__check", icon: icons.Check, width: 20, height: 20 }))));
+    }
+    return (React.createElement("div", { className: "qdr-toolbar__icon__wrapper" },
+        React.createElement("div", { className: clsx('qdr-toolbar__icon', { 'qdr-toolbar__icon--active': active }, className), onClick: onClick, onMouseDown: onMouseDown },
+            React.createElement(components.Icon, Object.assign({}, rest, { icon: icon })))));
 }
 
 function useStartToolInput() {
     return React.useContext(StartToolInputContext);
 }
 
+exports.InlineToolbar = InlineToolbar;
 exports.TOOLBAR_DIVIDER = TOOLBAR_DIVIDER;
 exports.Toolbar = Toolbar;
+exports.ToolbarGroupIcon = ToolbarGroupIcon;
 exports.ToolbarIcon = ToolbarIcon;
 exports.useStartToolInput = useStartToolInput;

package/toolbar/index.d.ts

@@ -1,5 +1,7 @@
 export { TOOLBAR_DIVIDER } from './constants';
 export * from './typings';
+export { InlineToolbarProps, default as InlineToolbar } from './components/InlineToolbar';
 export { ToolbarProps, default as Toolbar } from './components/Toolbar';
 export { ToolbarIconProps, default as ToolbarIcon } from './components/ToolbarIcon';
+export { ToolbarGroupIconProps, default as ToolbarGroupIcon } from './components/ToolbarGroupIcon';
 export { useStartToolInput } from './hooks/useStartToolInput';

package/toolbar/index.js

@@ -1,4 +1,6 @@
 export { TOOLBAR_DIVIDER } from './constants.js';
+export { default as InlineToolbar } from './components/InlineToolbar.js';
 export { default as Toolbar } from './components/Toolbar.js';
 export { default as ToolbarIcon } from './components/ToolbarIcon.js';
+export { default as ToolbarGroupIcon } from './components/ToolbarGroupIcon.js';
 export { useStartToolInput } from './hooks/useStartToolInput.js';

package/toolbar/toolbar.css

@@ -1 +1 @@
-.qdr-toolbar{display:flex;align-items:center;gap:8px;font-size:24px;height:48px;padding:8px 8px;background-color:var(--qdr-surface);border:1px solid var(--qdr-border);box-sizing:border-box}.qdr-toolbar--radius{border-radius:8px}.qdr-toolbar--shadow{box-shadow:0 4px 8px -2px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.04)}.qdr-toolbar__wrapper{box-sizing:content-box;height:48px}.qdr-toolbar__wrapper--fixed{position:sticky;top:0;z-index:1}.qdr-toolbar__wrapper--float{position:absolute;z-index:1;padding-bottom:8px}.qdr-toolbar__wrapper--inputting{min-width:250px;max-width:350px}.qdr-toolbar__arrow{position:absolute;top:calc(100% - 8px);left:50%;content:"";width:8px;height:8px;background:var(--qdr-surface);border:1px solid var(--qdr-border);border-top:none;border-left:none;transform:translateX(-50%) translateY(-50%) rotate(45deg)}.qdr-toolbar__divider{width:1px;height:20px;background-color:var(--qdr-divider)}.qdr-toolbar__icon{position:relative;color:var(--qdr-icon);font-size:24px;display:inline-flex;justify-content:center;align-items:center;border:0;background-color:rgba(0,0,0,0);padding:4px;outline:none;box-shadow:none;border-radius:0;transition:color .2s ease-out;cursor:pointer}.qdr-toolbar__icon:hover,.qdr-toolbar__icon--active{color:var(--qdr-primary)}.qdr-toolbar__input{font-size:13px;background:var(--qdr-surface);color:var(--qdr-placeholder);width:calc(100% - 14px);height:100%;border:none;padding:0;outline:none}.qdr-toolbar__input__wrapper{display:flex;align-items:center;position:absolute;top:8px;left:8px;width:calc(100% - 16px);height:calc(100% - 24px);background:var(--qdr-surface);box-sizing:border-box}.qdr-toolbar__input__cross{fill:var(--qdr-placeholder);font-size:14px;width:1em;height:1em;cursor:pointer}
+.qdr-toolbar{display:flex;align-items:center;gap:var(--qdr-spacing-4);height:var(--qdr-spacing-14);padding:var(--qdr-spacing-4) var(--qdr-spacing-4);background-color:var(--qdr-surface);border:1px solid var(--qdr-border);box-sizing:border-box}.qdr-toolbar--radius{border-radius:var(--qdr-radius-3)}.qdr-toolbar--shadow{box-shadow:var(--qdr-shadow-s)}.qdr-toolbar__input{font-size:.8125rem;background:var(--qdr-block);color:var(--qdr-text-secondary);width:calc(100% - var(--qdr-spacing-7));height:100%;border:none;padding:0;outline:none}.qdr-toolbar__input__wrapper{display:flex;align-items:center;position:absolute;top:var(--qdr-spacing-4);left:var(--qdr-spacing-4);width:calc(100% - var(--qdr-spacing-4)*2);height:calc(100% - (var(--qdr-spacing-4)*2 + var(--qdr-spacing-4)));background:var(--qdr-block);box-sizing:border-box}.qdr-toolbar__input__cross{fill:var(--qdr-text-secondary);font-size:var(--qdr-spacing-7);width:var(--qdr-spacing-7);height:var(--qdr-spacing-7);cursor:pointer}.qdr-toolbar__wrapper{box-sizing:content-box;height:var(--qdr-spacing-14)}.qdr-toolbar__wrapper--fixed{position:sticky;top:0;z-index:1}.qdr-toolbar__wrapper--fixed .qdr-toolbar__input__wrapper{height:calc(100% - var(--qdr-spacing-4)*2)}.qdr-toolbar__wrapper--float{position:absolute;z-index:1;padding-bottom:var(--qdr-spacing-4)}.qdr-toolbar__wrapper--float .qdr-toolbar{background-color:var(--qdr-block)}.qdr-toolbar__wrapper--inputting{min-width:250px}.qdr-toolbar__arrow{position:absolute;top:calc(100% - var(--qdr-spacing-4));left:50%;content:"";width:var(--qdr-spacing-4);height:var(--qdr-spacing-4);background:var(--qdr-surface);border:1px solid var(--qdr-border);border-top:none;border-left:none;transform:translateX(-50%) translateY(-50%) rotate(45deg)}.qdr-toolbar__divider{width:1px;height:var(--qdr-spacing-8);background-color:var(--qdr-divider)}.qdr-toolbar__icon{position:relative;color:var(--qdr-action-inactive);font-size:24px;display:inline-flex;justify-content:center;align-items:center;gap:var(--qdr-spacing-1);border:0;background-color:rgba(0,0,0,0);padding:var(--qdr-spacing-2);outline:none;box-shadow:none;border-radius:var(--qdr-radius-1);transition:color var(--qdr-duration-short) var(--qdr-easing-standard),background var(--qdr-duration-short) var(--qdr-easing-standard);cursor:pointer}.qdr-toolbar__icon:hover,.qdr-toolbar__icon--expanded{color:var(--qdr-action-active);background:var(--qdr-secondary-hover-bg)}.qdr-toolbar__icon--active{color:var(--qdr-primary)}.qdr-toolbar__icon--with-name{display:flex;align-items:center;justify-content:flex-start;border-radius:0;gap:var(--qdr-spacing-4);padding:0 var(--qdr-spacing-6)}.qdr-toolbar__icon--with-name:hover{color:var(--qdr-action-inactive);background:var(--qdr-primary-hover-bg)}.qdr-toolbar__icon--with-name--active{color:var(--qdr-action-inactive);background:var(--qdr-primary-active-bg)}.qdr-toolbar__icon__wrapper{display:flex;align-items:center;justify-content:center;position:relative}.qdr-toolbar__icon__arrow{color:var(--qdr-action-disabled)}.qdr-toolbar__icon__name{flex:1;margin:0;font-size:var(--qdr-typography-basic-input1-font-size);line-height:var(--qdr-typography-basic-input1-line-height);letter-spacing:var(--qdr-typography-basic-input1-letter-spacing);font-weight:var(--qdr-typography-basic-input1-font-weight);color:var(--qdr-text-primary)}.qdr-toolbar__icon__check{color:var(--qdr-primary)}.qdr-toolbar__icon__menu{opacity:0;position:absolute;background:var(--qdr-surface);border:1px solid var(--qdr-border);padding:var(--qdr-spacing-2) 0;width:200px;max-height:240px;box-shadow:var(--qdr-shadow-xl);pointer-events:none;overflow-y:auto;transition:opacity var(--qdr-duration-short) var(--qdr-easing-standard)}.qdr-toolbar__icon__menu--expanded{pointer-events:auto;opacity:1}.qdr-toolbar__icon__menu--top{bottom:var(--qdr-spacing-14)}.qdr-toolbar__icon__menu--bottom{top:var(--qdr-spacing-14)}.qdr-inline-toolbar{position:absolute;top:var(--qdr-spacing-4);right:var(--qdr-spacing-4);display:flex;align-items:center;justify-content:flex-start;gap:var(--qdr-spacing-3);background-color:var(--qdr-bg);padding:var(--qdr-spacing-3);border:1px solid var(--qdr-border);border-radius:var(--qdr-radius-3);pointer-events:none;opacity:0;transition:opacity var(--qdr-duration-short) var(--qdr-easing-standard);z-index:1}.qdr-inline-toolbar__wrapper{display:flex;align-items:center;justify-content:flex-start;gap:var(--qdr-spacing-1);padding:var(--qdr-spacing-1);background-color:var(--qdr-divider);border-radius:var(--qdr-radius-1)}.qdr-inline-toolbar__divider{width:1px;height:16px;background-color:var(--qdr-divider)}.qdr-inline-toolbar__icon{color:var(--qdr-action-inactive);border-radius:var(--qdr-radius-1);transition:color var(--qdr-duration-short) var(--qdr-easing-standard),background-color var(--qdr-duration-short) var(--qdr-easing-standard);cursor:pointer}.qdr-inline-toolbar__icon:hover{color:var(--qdr-primary-light)}.qdr-inline-toolbar__icon--active{color:var(--qdr-primary-light);background-color:var(--qdr-block)}.qdr-inline-toolbar__icon--disabled:hover{color:var(--qdr-action-inactive);cursor:not-allowed}