@quadrats/react 1.1.8 → 1.1.10

package/toggle-mark/createReactToggleMarkCreator.d.ts

@@ -0,0 +1,6 @@
+import { createToggleMarkCreator, CreateToggleMarkOptions } from '@quadrats/common/toggle-mark';
+import { CreateRenderMarkOptions } from '@quadrats/react';
+import { ReactToggleMark, ReactToggleMarkCreateHandlersOptions } from './typings';
+export type CreateReactToggleMarkCreatorOptions = Required<ReactToggleMarkCreateHandlersOptions & Omit<CreateRenderMarkOptions<boolean>, 'type'>>;
+export type CreateReactToggleMarkOptions = CreateToggleMarkOptions;
+export declare function createReactToggleMarkCreator(createCore: ReturnType<typeof createToggleMarkCreator>, defaults: CreateReactToggleMarkCreatorOptions): ({ type }?: CreateReactToggleMarkOptions) => ReactToggleMark;

package/toggle-mark/createReactToggleMarkCreator.js

@@ -0,0 +1,20 @@
+import isHotkey from 'is-hotkey';
+import { createRenderMark } from '@quadrats/react';
+
+function createReactToggleMarkCreator(createCore, defaults) {
+    return ({ type } = {}) => {
+        const core = createCore({ type });
+        return Object.assign(Object.assign({}, core), { createHandlers: ({ hotkey = defaults.hotkey } = {}) => ({
+                onKeyDown: (event, editor, next) => {
+                    if (isHotkey(hotkey, event)) {
+                        core.toggleMark(editor);
+                    }
+                    else {
+                        next();
+                    }
+                },
+            }), createRenderLeaf: ({ render = defaults.render } = {}) => createRenderMark({ type: core.type, render }) });
+    };
+}
+
+export { createReactToggleMarkCreator };

package/toggle-mark/index.cjs.js

@@ -0,0 +1,22 @@
+'use strict';
+
+var isHotkey = require('is-hotkey');
+var react = require('@quadrats/react');
+
+function createReactToggleMarkCreator(createCore, defaults) {
+    return ({ type } = {}) => {
+        const core = createCore({ type });
+        return Object.assign(Object.assign({}, core), { createHandlers: ({ hotkey = defaults.hotkey } = {}) => ({
+                onKeyDown: (event, editor, next) => {
+                    if (isHotkey(hotkey, event)) {
+                        core.toggleMark(editor);
+                    }
+                    else {
+                        next();
+                    }
+                },
+            }), createRenderLeaf: ({ render = defaults.render } = {}) => react.createRenderMark({ type: core.type, render }) });
+    };
+}
+
+exports.createReactToggleMarkCreator = createReactToggleMarkCreator;

package/toggle-mark/index.d.ts

@@ -0,0 +1,2 @@
+export * from './typings';
+export { CreateReactToggleMarkCreatorOptions, CreateReactToggleMarkOptions, createReactToggleMarkCreator, } from './createReactToggleMarkCreator';

package/toggle-mark/index.js

@@ -0,0 +1 @@
+export { createReactToggleMarkCreator } from './createReactToggleMarkCreator.js';

package/toggle-mark/jsx-serializer/createJsxSerializeToggleMarkCreator.d.ts

@@ -0,0 +1,4 @@
+import { CreateJsxSerializeMarkOptions } from '@quadrats/react/jsx-serializer';
+export type CreateJsxSerializeToggleMarkCreatorOptions = CreateJsxSerializeMarkOptions<boolean>;
+export type CreateJsxSerializeToggleMarkOptions = Partial<CreateJsxSerializeToggleMarkCreatorOptions>;
+export declare function createJsxSerializeToggleMarkCreator(defaults: CreateJsxSerializeToggleMarkCreatorOptions): (options?: CreateJsxSerializeToggleMarkOptions) => (props: Omit<import("@quadrats/react/jsx-serializer").JsxSerializeMarkProps<boolean>, "mark">) => import("react").JSX.Element;

package/toggle-mark/jsx-serializer/createJsxSerializeToggleMarkCreator.js

@@ -0,0 +1,7 @@
+import { createJsxSerializeMark } from '@quadrats/react/jsx-serializer';
+
+function createJsxSerializeToggleMarkCreator(defaults) {
+    return (options) => createJsxSerializeMark(Object.assign(Object.assign({}, defaults), options));
+}
+
+export { createJsxSerializeToggleMarkCreator };

package/toggle-mark/jsx-serializer/index.cjs.js

@@ -0,0 +1,9 @@
+'use strict';
+
+var jsxSerializer = require('@quadrats/react/jsx-serializer');
+
+function createJsxSerializeToggleMarkCreator(defaults) {
+    return (options) => jsxSerializer.createJsxSerializeMark(Object.assign(Object.assign({}, defaults), options));
+}
+
+exports.createJsxSerializeToggleMarkCreator = createJsxSerializeToggleMarkCreator;

package/toggle-mark/jsx-serializer/index.d.ts

@@ -0,0 +1,2 @@
+export * from './typings';
+export { CreateJsxSerializeToggleMarkCreatorOptions, CreateJsxSerializeToggleMarkOptions, createJsxSerializeToggleMarkCreator, } from './createJsxSerializeToggleMarkCreator';

package/toggle-mark/jsx-serializer/index.js

@@ -0,0 +1 @@
+export { createJsxSerializeToggleMarkCreator } from './createJsxSerializeToggleMarkCreator.js';

package/toggle-mark/jsx-serializer/package.json

@@ -1,10 +1,7 @@
 {
   "name": "@quadrats/react/toggle-mark/jsx-serializer",
   "sideEffects": false,
-  "quadratsConfig": {
-    "deps": [
-      "jsx-serializer",
-      "toggle-mark"
-    ]
-  }
+  "main": "./index.cjs.js",
+  "module": "./index.js",
+  "typings": "./index.d.ts"
 }

package/toggle-mark/jsx-serializer/typings.d.ts

@@ -0,0 +1,2 @@
+import { JsxSerializeMarkProps } from '@quadrats/react/jsx-serializer';
+export type JsxSerializeToggleMarkProps = JsxSerializeMarkProps<boolean>;

package/toggle-mark/package.json

@@ -1,9 +1,7 @@
 {
   "name": "@quadrats/react/toggle-mark",
   "sideEffects": false,
-  "quadratsConfig": {
-    "deps": [
-      "__ROOT__"
-    ]
-  }
+  "main": "./index.cjs.js",
+  "module": "./index.js",
+  "typings": "./index.d.ts"
 }

package/toggle-mark/toolbar/ToggleMarkToolbarIcon.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ToolbarIconProps } from '@quadrats/react/toolbar';
+import { ReactToggleMark } from '@quadrats/react/toggle-mark';
+export interface ToggleMarkToolbarIconProps extends Omit<ToolbarIconProps, 'active' | 'onClick'> {
+    controller: ReactToggleMark;
+}
+declare function ToggleMarkToolbarIcon(props: ToggleMarkToolbarIconProps): React.JSX.Element;
+export default ToggleMarkToolbarIcon;

package/toggle-mark/toolbar/ToggleMarkToolbarIcon.js

@@ -0,0 +1,12 @@
+import { __rest } from 'tslib';
+import React from 'react';
+import { ToolbarIcon } from '@quadrats/react/toolbar';
+import { useToggleMarkTool } from './useToggleMarkTool.js';
+
+function ToggleMarkToolbarIcon(props) {
+    const { controller } = props, rest = __rest(props, ["controller"]);
+    const { active, onClick } = useToggleMarkTool(controller);
+    return React.createElement(ToolbarIcon, Object.assign({}, rest, { active: active, onClick: onClick }));
+}
+
+export { ToggleMarkToolbarIcon as default };

package/toggle-mark/toolbar/index.cjs.js

@@ -0,0 +1,23 @@
+'use strict';
+
+var react = require('@quadrats/react');
+var tslib = require('tslib');
+var React = require('react');
+var toolbar = require('@quadrats/react/toolbar');
+
+function useToggleMarkTool(controller) {
+    const editor = react.useQuadrats();
+    return {
+        active: controller.isToggleMarkActive(editor),
+        onClick: () => controller.toggleMark(editor),
+    };
+}
+
+function ToggleMarkToolbarIcon(props) {
+    const { controller } = props, rest = tslib.__rest(props, ["controller"]);
+    const { active, onClick } = useToggleMarkTool(controller);
+    return React.createElement(toolbar.ToolbarIcon, Object.assign({}, rest, { active: active, onClick: onClick }));
+}
+
+exports.ToggleMarkToolbarIcon = ToggleMarkToolbarIcon;
+exports.useToggleMarkTool = useToggleMarkTool;

package/toggle-mark/toolbar/index.js

@@ -0,0 +1,2 @@
+export { useToggleMarkTool } from './useToggleMarkTool.js';
+export { default as ToggleMarkToolbarIcon } from './ToggleMarkToolbarIcon.js';

package/toggle-mark/toolbar/package.json

@@ -1,10 +1,7 @@
 {
   "name": "@quadrats/react/toggle-mark/toolbar",
   "sideEffects": false,
-  "quadratsConfig": {
-    "deps": [
-      "toolbar",
-      "toggle-mark"
-    ]
-  }
+  "main": "./index.cjs.js",
+  "module": "./index.js",
+  "typings": "./index.d.ts"
 }

package/toggle-mark/toolbar/useToggleMarkTool.d.ts

@@ -0,0 +1,5 @@
+import { ReactToggleMark } from '@quadrats/react/toggle-mark';
+export declare function useToggleMarkTool(controller: ReactToggleMark): {
+    active: boolean;
+    onClick: () => void;
+};

package/toggle-mark/toolbar/useToggleMarkTool.js

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

package/toggle-mark/typings.d.ts

@@ -0,0 +1,12 @@
+import { ToggleMark } from '@quadrats/common/toggle-mark';
+import { CreateRenderMarkOptions, Editor, RenderMarkProps, WithCreateHandlers, WithCreateRenderLeaf } from '@quadrats/react';
+export type RenderToggleMarkProps = RenderMarkProps<boolean>;
+export interface ReactToggleMarkCreateHandlersOptions {
+    /**
+     * The hotkey to toggle the mark.
+     */
+    hotkey?: string;
+}
+export type ReactToggleMarkCreateRenderLeafOptions = Partial<Omit<CreateRenderMarkOptions<boolean>, 'type'>>;
+export interface ReactToggleMark extends ToggleMark<Editor>, WithCreateHandlers<[ReactToggleMarkCreateHandlersOptions?]>, WithCreateRenderLeaf<[ReactToggleMarkCreateRenderLeafOptions?]> {
+}

package/toolbar/components/InlineToolbar.d.ts

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

package/toolbar/components/InlineToolbar.js

@@ -0,0 +1,31 @@
+import React, { useRef, Fragment } from 'react';
+import clsx from 'clsx';
+import { Icon } from '@quadrats/react/components';
+import { useClickAway } from '@quadrats/react/utils';
+
+function InlineToolbar({ className, iconGroups, style, onClickAway }) {
+    const validIconsGroup = iconGroups.filter((group) => group.icons.length);
+    const ref = useRef(null);
+    useClickAway(() => {
+        return onClickAway
+            ? () => {
+                onClickAway();
+            }
+            : undefined;
+    }, ref, [onClickAway]);
+    return (React.createElement("div", { ref: ref, contentEditable: false, className: clsx('qdr-inline-toolbar', className), style: style }, validIconsGroup.map((group, index) => (React.createElement(Fragment, { key: index },
+        React.createElement("div", { className: clsx('qdr-inline-toolbar__wrapper', {
+                'qdr-inline-toolbar__wrapper--enabledBgColor': group.enabledBgColor,
+            }) }, group.icons.map((child) => 'icon' in child ? (React.createElement(Icon, { key: child.icon.name, className: clsx('qdr-inline-toolbar__icon', child.className, {
+                'qdr-inline-toolbar__icon--active': child.active,
+                'qdr-inline-toolbar__icon--disabled': child.disabled,
+            }), icon: child.icon, width: 24, height: 24, onClick: (e) => {
+                if (!child.disabled) {
+                    e.preventDefault();
+                    child.onClick();
+                }
+            } })) : (child))),
+        index < validIconsGroup.length - 1 && React.createElement("div", { className: "qdr-inline-toolbar__divider" }))))));
+}
+
+export { InlineToolbar as default };

package/toolbar/components/Toolbar.d.ts

@@ -0,0 +1,25 @@
+import React, { JSX } from 'react';
+export interface ToolbarProps {
+    /**
+     * If there are any nodes which type match it, toolbar will hide.
+     */
+    disabledElementTypes?: string[];
+    /**
+     * A render props which provide a flag `expanded` which useful for rendering different things between collapsed and expanded.
+     */
+    children: (expanded: boolean) => JSX.Element | null | undefined;
+    /**
+     * Toolbar container
+     */
+    containerRef?: React.MutableRefObject<HTMLElement | undefined>;
+    /**
+     * only render expanded case toolbar or not.
+     */
+    onlyRenderExpanded?: boolean;
+    /**
+     * fix main toolbar or not.
+     */
+    fixed?: boolean;
+}
+declare function Toolbar(props: ToolbarProps): JSX.Element | null;
+export default Toolbar;

package/toolbar/components/Toolbar.js

@@ -0,0 +1,137 @@
+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) {
+    if (value < min) {
+        return min;
+    }
+    if (value > max) {
+        return max;
+    }
+    return value;
+}
+/**
+ * @todo
+ * Also round top.
+ */
+function setPosition(el, range) {
+    const rect = range.getBoundingClientRect();
+    const top = rect.top + window.pageYOffset - el.offsetHeight;
+    const left = roundNumber(rect.left + window.pageXOffset - (el.offsetWidth - rect.width) / 2, 0, window.innerWidth - el.offsetWidth);
+    el.style.top = `${top}px`;
+    el.style.left = `${left}px`;
+}
+function Toolbar(props) {
+    const { children, disabledElementTypes, onlyRenderExpanded = false, fixed = false } = props;
+    const { props: themeProps } = useContext(ThemeContext);
+    const editor = useQuadrats();
+    const toolbarRef = useRef(null);
+    const lastNativeRangeRef = useRef(undefined);
+    const focused = ReactEditor.isFocused(editor);
+    const { selection } = editor;
+    const [toolInput, setToolInput] = useState();
+    const startToolInput = useCallback((inputConfig) => setToolInput(Object.assign(Object.assign({}, inputConfig), { currentSelection: selection })), [selection]);
+    let renderExpandedStatus;
+    if (toolInput) {
+        const { currentSelection } = toolInput;
+        if (currentSelection) {
+            if (Range.isExpanded(currentSelection)) {
+                renderExpandedStatus = true;
+            }
+            else {
+                renderExpandedStatus = false;
+            }
+        }
+    }
+    else if (focused) {
+        if (selection && Range.isCollapsed(selection)) {
+            renderExpandedStatus = false;
+        }
+        else if (getSelectionText(editor) !== '') {
+            renderExpandedStatus = true;
+        }
+    }
+    const shouldRender = typeof renderExpandedStatus === 'boolean';
+    useLayoutEffect(() => {
+        /**
+         * The native selection is not yet synchronized while effect invoked.
+         * Thus invoke handler on next frame to avoid from this issue.
+         */
+        window.requestAnimationFrame(() => {
+            /**
+             * Editor will be blurred after getting into input process.
+             * Thus cache the last range of selection to recalculate position of toolbar.
+             */
+            if (!toolInput) {
+                const nativeSelection = window.getSelection();
+                if (nativeSelection && nativeSelection.rangeCount > 0) {
+                    lastNativeRangeRef.current = nativeSelection.getRangeAt(0);
+                }
+            }
+            const el = toolbarRef.current;
+            const range = lastNativeRangeRef.current;
+            if (shouldRender && el && range && !fixed) {
+                setPosition(el, range);
+            }
+        });
+    });
+    const getPortalContainer = useCallback(() => {
+        var _a;
+        if ((_a = props.containerRef) === null || _a === void 0 ? void 0 : _a.current) {
+            return props.containerRef.current;
+        }
+        return document.body;
+    }, [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 }, 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) {
+                    Transforms.select(editor, currentSelection);
+                }
+                ReactEditor.focus(editor);
+                setToolInput(undefined);
+            }, toolInput: toolInput }))));
+    if (fixed) {
+        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;
+    }
+    if (onlyRenderExpanded && !renderExpandedStatus) {
+        return null;
+    }
+    if (!tools) {
+        return null;
+    }
+    return (React.createElement(Portal, { getContainer: getPortalContainer },
+        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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { IconProps } from '@quadrats/react/components';
+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

@@ -0,0 +1,32 @@
+import { __rest } from 'tslib';
+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, 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/ToolbarInput.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ToolInputConfig } from '../typings';
+export interface ToolbarInputProps {
+    exit: VoidFunction;
+    toolInput: ToolInputConfig;
+}
+declare function ToolbarInput({ exit, toolInput }: ToolbarInputProps): React.JSX.Element;
+export default ToolbarInput;

package/toolbar/components/ToolbarInput.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { useLocale } from '@quadrats/react';
+
+function ToolbarInput({ exit, toolInput }) {
+    const { confirm, getPlaceholder } = toolInput;
+    const onExit = (event) => {
+        event.preventDefault();
+        exit();
+    };
+    let composing = false;
+    const onKeyDown = (event) => {
+        if (composing)
+            return;
+        const isEnter = event.key === 'Enter';
+        if (isEnter || event.key === 'Escape') {
+            onExit(event);
+            if (isEnter) {
+                confirm(event.target.value);
+            }
+        }
+    };
+    const locale = useLocale();
+    const placeholder = getPlaceholder(locale);
+    const onCompositionStart = () => {
+        composing = true;
+    };
+    const onCompositionEnd = () => {
+        composing = false;
+    };
+    return (React.createElement("div", { className: "qdr-toolbar__input__wrapper" },
+        React.createElement("input", { defaultValue: toolInput.defaultValue, autoFocus: true, onCompositionStart: onCompositionStart, onCompositionEnd: onCompositionEnd, className: "qdr-toolbar__input", placeholder: placeholder, onKeyDown: onKeyDown, onBlur: exit }),
+        React.createElement("svg", { className: "qdr-toolbar__input__cross", viewBox: "0 0 320 512", onMouseDown: onExit },
+            React.createElement("path", { 
+                // eslint-disable-next-line max-len
+                d: "M193.94 256L296.5 153.44l21.15-21.15c3.12-3.12 3.12-8.19 0-11.31l-22.63-22.63c-3.12-3.12-8.19-3.12-11.31 0L160 222.06 36.29 98.34c-3.12-3.12-8.19-3.12-11.31 0L2.34 120.97c-3.12 3.12-3.12 8.19 0 11.31L126.06 256 2.34 379.71c-3.12 3.12-3.12 8.19 0 11.31l22.63 22.63c3.12 3.12 8.19 3.12 11.31 0L160 289.94 262.56 392.5l21.15 21.15c3.12 3.12 8.19 3.12 11.31 0l22.63-22.63c3.12-3.12 3.12-8.19 0-11.31L193.94 256z" }))));
+}
+
+export { ToolbarInput 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;