@quadrats/react 0.7.7 → 1.0.0

package/paragraph/toolbar/useToggleParagraphTool.d.ts

@@ -0,0 +1,5 @@
+import { Paragraph } from '@quadrats/common/paragraph';
+export declare function useToggleParagraphTool(controller: Paragraph): {
+    active: boolean;
+    onClick: () => void;
+};

package/paragraph/toolbar/useToggleParagraphTool.js

@@ -0,0 +1,11 @@
+import { useQuadrats } from '@quadrats/react';
+
+function useToggleParagraphTool(controller) {
+    const editor = useQuadrats();
+    return {
+        active: controller.isSelectionInParagraph(editor),
+        onClick: () => controller.setParagraphNodes(editor),
+    };
+}
+
+export { useToggleParagraphTool };

package/read-more/components/ReadMore.js

@@ -2,11 +2,13 @@ import React from 'react';
 import { useLocale } from '@quadrats/react';
 
 function ReadMore(props) {
-    const { attributes, children } = props;
+    const { attributes } = props;
     const { readMore } = useLocale().editor;
     return (React.createElement("div", Object.assign({}, attributes, { className: "qdr-read-more", contentEditable: false }),
-        React.createElement("span", { className: "qdr-read-more__description" }, readMore),
-        attributes ? children : undefined));
+        React.createElement("div", { className: "qdr-read-more__container" },
+            React.createElement("div", { className: "qdr-read-more__container__line" }),
+            React.createElement("span", { className: "qdr-read-more__container__description" }, readMore),
+            React.createElement("div", { className: "qdr-read-more__container__line" }))));
 }
 
 export { ReadMore as default };

package/read-more/index.cjs.js

@@ -5,11 +5,13 @@ var react = require('@quadrats/react');
 var readMore = require('@quadrats/common/read-more');
 
 function ReadMore(props) {
-    const { attributes, children } = props;
+    const { attributes } = props;
     const { readMore } = react.useLocale().editor;
     return (React.createElement("div", Object.assign({}, attributes, { className: "qdr-read-more", contentEditable: false }),
-        React.createElement("span", { className: "qdr-read-more__description" }, readMore),
-        attributes ? children : undefined));
+        React.createElement("div", { className: "qdr-read-more__container" },
+            React.createElement("div", { className: "qdr-read-more__container__line" }),
+            React.createElement("span", { className: "qdr-read-more__container__description" }, readMore),
+            React.createElement("div", { className: "qdr-read-more__container__line" }))));
 }
 
 const defaultRenderReadMoreElement = (props) => React.createElement(ReadMore, Object.assign({}, props));

package/read-more/read-more.css

@@ -1 +1 @@
-.qdr-read-more{position:relative;margin:18px 0;width:100%;color:var(--qdr-divider);text-align:center}.qdr-read-more::before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;background-image:linear-gradient(to right, var(--qdr-divider) 50%, rgba(255, 255, 255, 0) 0%);background-position:center;background-size:1em 1px;background-repeat:repeat-x}.qdr-read-more__description{position:relative;z-index:1;padding:0 1em;background:var(--qdr-background);transition:background-color 300ms ease-in-out,color 300ms ease-in-out;will-change:background-color,color}
+.qdr-read-more{position:relative;margin:var(--qdr-spacing-14) 0;width:100%;color:var(--qdr-divider);text-align:center}.qdr-read-more__container{display:flex;align-items:center;justify-content:space-between}.qdr-read-more__container__description{color:var(--qdr-text-secondary);position:relative;z-index:1;padding:0 var(--qdr-spacing-7);font-size:var(--qdr-typography-article-body2-font-size);line-height:var(--qdr-typography-article-body2-line-height);letter-spacing:var(--qdr-typography-article-body2-letter-spacing);font-weight:var(--qdr-typography-article-body2-font-weight)}.qdr-read-more__container__line{flex:1;height:2px;background-image:repeating-linear-gradient(to right, var(--qdr-border), var(--qdr-border) 10px, transparent 10px, transparent 15px)}

package/read-more/read-more.scss

@@ -1,29 +1,36 @@
 .qdr-read-more {
   position: relative;
-  margin: 18px 0;
+  margin: var(--qdr-spacing-14) 0;
   width: 100%;
   color: var(--qdr-divider);
   text-align: center;
 
-  &::before {
-    position: absolute;
-    content: '';
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-image: linear-gradient(to right, var(--qdr-divider) 50%, rgba(255, 255, 255, 0) 0%);
-    background-position: center;
-    background-size: 1em 1px;
-    background-repeat: repeat-x;
-  }
+  &__container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    &__description {
+      color: var(--qdr-text-secondary);
+      position: relative;
+      z-index: 1;
+      padding: 0 var(--qdr-spacing-7);
+      font-size: var(--qdr-typography-article-body2-font-size);
+      line-height: var(--qdr-typography-article-body2-line-height);
+      letter-spacing: var(--qdr-typography-article-body2-letter-spacing);
+      font-weight: var(--qdr-typography-article-body2-font-weight);
+    }
 
-  &__description {
-    position: relative;
-    z-index: 1;
-    padding: 0 1em;
-    background: var(--qdr-background);
-    transition: background-color 300ms ease-in-out, color 300ms ease-in-out;
-    will-change: background-color, color;
+    &__line {
+      flex: 1;
+      height: 2px;
+      background-image: repeating-linear-gradient(
+        to right,
+        var(--qdr-border),
+        var(--qdr-border) 10px,
+        transparent 10px,
+        transparent 15px
+      );
+    }
   }
 }

package/toolbar/components/InlineToolbar.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { IconDefinition } from '@quadrats/icons';
+export interface InlineToolbarProps {
+    className?: string;
+    leftIcons: {
+        icon: IconDefinition;
+        onClick: VoidFunction;
+        active: boolean;
+        disabled?: boolean;
+    }[];
+    rightIcons: {
+        icon: IconDefinition;
+        onClick: VoidFunction;
+        disabled?: boolean;
+    }[];
+}
+declare function InlineToolbar({ className, leftIcons, rightIcons }: InlineToolbarProps): React.JSX.Element;
+export default InlineToolbar;

package/toolbar/components/InlineToolbar.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import clsx from 'clsx';
+import { Icon } from '@quadrats/react/components';
+
+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(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(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();
+                }
+            } })))));
+}
+
+export { InlineToolbar as default };

package/toolbar/components/Toolbar.js

@@ -1,9 +1,13 @@
 import React, { useContext, useRef, useState, useCallback, useLayoutEffect } from 'react';
 import clsx from 'clsx';
 import { Range, getSelectionText, Transforms, isNodesTypeIn } from '@quadrats/core';
+import { More } from '@quadrats/icons';
 import { ThemeContext, useQuadrats, ReactEditor } from '@quadrats/react';
 import { Portal } from '@quadrats/react/components';
+import ToolbarGroupIcon from './ToolbarGroupIcon.js';
+import { ToolbarContext } from '../contexts/toolbar.js';
 import { StartToolInputContext } from '../contexts/StartToolInputContext.js';
+import { useAutoGroupIcons } from '../hooks/useAutoGroupIcons.js';
 import ToolbarInput from './ToolbarInput.js';
 
 function roundNumber(value, min, max) {
@@ -75,7 +79,7 @@ function Toolbar(props) {
             }
             const el = toolbarRef.current;
             const range = lastNativeRangeRef.current;
-            if (shouldRender && el && range) {
+            if (shouldRender && el && range && !fixed) {
                 setPosition(el, range);
             }
         });
@@ -89,8 +93,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: More, withArrow: false }, groupElements))) : tools),
         toolInput && (React.createElement(ToolbarInput, { exit: () => {
                 const { currentSelection } = toolInput;
                 if (currentSelection) {
@@ -100,8 +107,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 && isNodesTypeIn(editor, disabledElementTypes, { mode: 'all' }))) {
         return null;
@@ -113,8 +125,13 @@ function Toolbar(props) {
         return null;
     }
     return (React.createElement(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))));
 }
 
 export { Toolbar as default };

package/toolbar/components/ToolbarGroupIcon.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { IconProps } from '@quadrats/react/components';
+export interface ToolbarGroupIconProps extends Omit<IconProps, 'ref' | 'onClick' | 'onMouseDown'> {
+    withArrow?: boolean;
+}
+declare function ToolbarGroupIcon(props: ToolbarGroupIconProps): React.JSX.Element;
+export default ToolbarGroupIcon;

package/toolbar/components/ToolbarGroupIcon.js

@@ -0,0 +1,80 @@
+import { __rest } from 'tslib';
+import React, { useRef, useState, useLayoutEffect, useCallback } from 'react';
+import clsx from 'clsx';
+import { ArrowDown } from '@quadrats/icons';
+import { Icon } from '@quadrats/react/components';
+import { useClickAway } from '@quadrats/react/utils';
+import { useToolbar } from '../contexts/toolbar.js';
+import { ToolbarMenuContext } from '../contexts/toolbarMenu.js';
+
+function ToolbarGroupIcon(props) {
+    const { className, children, withArrow = true } = props, rest = __rest(props, ["className", "children", "withArrow"]);
+    const wrapperRef = useRef(null);
+    const iconRef = useRef(null);
+    const menuRef = useRef(null);
+    const { toolbarRef } = useToolbar();
+    const [placement, setPlacement] = useState('bottom');
+    const [menuExpanded, setMenuExpanded] = useState(false);
+    useClickAway(() => {
+        if (!menuExpanded) {
+            return;
+        }
+        return () => {
+            setMenuExpanded(false);
+        };
+    }, wrapperRef, [menuExpanded, wrapperRef]);
+    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 = 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(Icon, Object.assign({}, rest)),
+                withArrow && (React.createElement(Icon, { icon: 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))));
+}
+
+export { ToolbarGroupIcon as default };

package/toolbar/components/ToolbarIcon.d.ts

@@ -1,7 +1,9 @@
 import React from 'react';
 import { IconProps } from '@quadrats/react/components';
-export interface ToolbarIconProps extends Omit<IconProps, 'ref'> {
+export interface ToolbarIconProps extends Omit<IconProps, 'ref' | 'onClick' | 'onMouseDown'> {
     active?: boolean;
+    onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    onMouseDown?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
 }
 declare function ToolbarIcon(props: ToolbarIconProps): React.JSX.Element;
 export default ToolbarIcon;

package/toolbar/components/ToolbarIcon.js

@@ -1,14 +1,32 @@
 import { __rest } from 'tslib';
-import React from 'react';
+import React, { useCallback } from 'react';
 import clsx from 'clsx';
+import { Check } from '@quadrats/icons';
 import { Icon } from '@quadrats/react/components';
+import { useLocale } from '@quadrats/react';
+import { getIconNameInGroup } from './toolbarIconName.js';
+import { useToolbarMenu } from '../contexts/toolbarMenu.js';
 
 function ToolbarIcon(props) {
-    const { active, className, onMouseDown } = props, rest = __rest(props, ["active", "className", "onMouseDown"]);
-    return (React.createElement(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 = __rest(props, ["active", "className", "icon", "onClick", "onMouseDown"]);
+    const locale = useLocale();
+    const { isInGroup } = useToolbarMenu();
+    const onClick = useCallback((event) => {
+        onClickProps === null || onClickProps === void 0 ? void 0 : onClickProps(event);
+    }, [onClickProps]);
+    const onMouseDown = 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(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(Icon, { className: "qdr-toolbar__icon__check", icon: 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(Icon, Object.assign({}, rest, { icon: icon })))));
 }
 
 export { ToolbarIcon as default };

package/toolbar/components/toolbarIconName.d.ts

@@ -0,0 +1,2 @@
+import { LocaleDefinition } from '@quadrats/locales';
+export declare function getIconNameInGroup(iconOriginName: string, locale: LocaleDefinition): string;

package/toolbar/components/toolbarIconName.js

@@ -0,0 +1,86 @@
+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 '';
+    }
+}
+
+export { getIconNameInGroup };

package/toolbar/contexts/toolbar.d.ts

@@ -0,0 +1,7 @@
+import { RefObject } from 'react';
+export interface ToolbarContextValue {
+    fixed: boolean;
+    toolbarRef?: RefObject<HTMLDivElement | null>;
+}
+export declare const ToolbarContext: import("react").Context<ToolbarContextValue>;
+export declare function useToolbar(): ToolbarContextValue;

package/toolbar/contexts/toolbar.js

@@ -0,0 +1,10 @@
+import { createContext, useContext } from 'react';
+
+const ToolbarContext = createContext({
+    fixed: false,
+});
+function useToolbar() {
+    return useContext(ToolbarContext);
+}
+
+export { ToolbarContext, useToolbar };

package/toolbar/contexts/toolbarMenu.d.ts

@@ -0,0 +1,6 @@
+export interface ToolbarMenuContextValue {
+    isInGroup: boolean;
+    menuExpanded: boolean;
+}
+export declare const ToolbarMenuContext: import("react").Context<ToolbarMenuContextValue>;
+export declare function useToolbarMenu(): ToolbarMenuContextValue;

package/toolbar/contexts/toolbarMenu.js

@@ -0,0 +1,11 @@
+import { createContext, useContext } from 'react';
+
+const ToolbarMenuContext = createContext({
+    isInGroup: false,
+    menuExpanded: false,
+});
+function useToolbarMenu() {
+    return useContext(ToolbarMenuContext);
+}
+
+export { ToolbarMenuContext, useToolbarMenu };

package/toolbar/hooks/useAutoGroupIcons.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export declare function useAutoGroupIcons(tools: JSX.Element | null | undefined, renderExpandedStatus: boolean): {
+    fakeTools: React.JSX.Element;
+    takeCount: number;
+    shownElements: {
+        id: number;
+        type: string | React.JSXElementConstructor<any>;
+        props: unknown;
+        key: string | null;
+    }[];
+    groupElements: any;
+};

package/toolbar/hooks/useAutoGroupIcons.js

@@ -0,0 +1,68 @@
+import React, { useMemo, useState, useCallback, useLayoutEffect, useEffect, useRef } from 'react';
+
+function usePreviousValue(value) {
+    const ref = useRef(value);
+    useEffect(() => {
+        ref.current = value;
+    }, [value]);
+    return ref.current;
+}
+function useAutoGroupIcons(tools, renderExpandedStatus) {
+    const preRenderExpandedStatus = usePreviousValue(renderExpandedStatus);
+    const fakeToolbarId = useMemo(() => (renderExpandedStatus ? 'fake-expanded-tools-wrapper' : 'fake-tools-wrapper'), [renderExpandedStatus]);
+    const fakeTools = 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] = useState(0);
+    const toolsElements = 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 = 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]);
+    useLayoutEffect(() => {
+        calcGroupIcons();
+        window.addEventListener('resize', calcGroupIcons);
+        return () => {
+            window.removeEventListener('resize', calcGroupIcons);
+        };
+    }, [calcGroupIcons]);
+    useEffect(() => {
+        if (renderExpandedStatus !== preRenderExpandedStatus) {
+            calcGroupIcons();
+        }
+    }, [renderExpandedStatus, preRenderExpandedStatus, calcGroupIcons]);
+    const takeIndex = useMemo(() => toolsElements.findIndex(el => el.id === toolsElements.filter(e => e.type !== 'span').slice(-takeCount)[0].id), [toolsElements, takeCount]);
+    const shownElements = useMemo(() => toolsElements.slice(0, takeIndex), [toolsElements, takeIndex]);
+    const groupElements = 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,
+    };
+}
+
+export { useAutoGroupIcons };