@quadrats/react 0.6.7 → 0.7.1

package/toggle-mark/createReactToggleMarkCreator.d.ts

@@ -1,6 +1,6 @@
 import { createToggleMarkCreator, CreateToggleMarkOptions } from '@quadrats/common/toggle-mark';
 import { CreateRenderMarkOptions } from '@quadrats/react';
 import { ReactToggleMark, ReactToggleMarkCreateHandlersOptions } from './typings';
-export declare type CreateReactToggleMarkCreatorOptions = Required<ReactToggleMarkCreateHandlersOptions & Omit<CreateRenderMarkOptions<boolean>, 'type'>>;
-export declare type CreateReactToggleMarkOptions = CreateToggleMarkOptions;
+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

@@ -1,20 +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 }) });
-    };
+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

@@ -1,28 +1,22 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var isHotkey = require('is-hotkey');
 var react = require('@quadrats/react');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e["default"] : e; }
-
-var isHotkey__default = /*#__PURE__*/_interopDefaultLegacy(isHotkey);
-
-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__default(hotkey, event)) {
-                        core.toggleMark(editor);
-                    }
-                    else {
-                        next();
-                    }
-                },
-            }), createRenderLeaf: ({ render = defaults.render } = {}) => react.createRenderMark({ type: core.type, render }) });
-    };
+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/jsx-serializer/createJsxSerializeToggleMarkCreator.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { CreateJsxSerializeMarkOptions } from '@quadrats/react/jsx-serializer';
-export declare type CreateJsxSerializeToggleMarkCreatorOptions = CreateJsxSerializeMarkOptions<boolean>;
-export declare type CreateJsxSerializeToggleMarkOptions = Partial<CreateJsxSerializeToggleMarkCreatorOptions>;
-export declare function createJsxSerializeToggleMarkCreator(defaults: CreateJsxSerializeToggleMarkCreatorOptions): (options?: Partial<CreateJsxSerializeToggleMarkCreatorOptions> | undefined) => (props: Omit<import("@quadrats/react/jsx-serializer").JsxSerializeMarkProps<boolean>, "mark">) => JSX.Element;
+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">) => JSX.Element;

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

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

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

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

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

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

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

@@ -1,8 +1,8 @@
-/// <reference types="react" />
+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): JSX.Element;
+declare function ToggleMarkToolbarIcon(props: ToggleMarkToolbarIconProps): React.JSX.Element;
 export default ToggleMarkToolbarIcon;

package/toggle-mark/toolbar/ToggleMarkToolbarIcon.js

@@ -3,10 +3,10 @@ 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 }));
+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

@@ -1,28 +1,22 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var react = require('@quadrats/react');
 var tslib = require('tslib');
 var React = require('react');
 var toolbar = require('@quadrats/react/toolbar');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e["default"] : e; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
-function useToggleMarkTool(controller) {
-    const editor = react.useQuadrats();
-    return {
-        active: controller.isToggleMarkActive(editor),
-        onClick: () => controller.toggleMark(editor),
-    };
+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__default.createElement(toolbar.ToolbarIcon, Object.assign({}, rest, { active: active, onClick: onClick }));
+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;

package/toggle-mark/toolbar/useToggleMarkTool.js

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

package/toggle-mark/typings.d.ts

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

package/toolbar/components/Toolbar.d.ts

@@ -13,5 +13,5 @@ export interface ToolbarProps {
      */
     containerRef?: React.MutableRefObject<HTMLElement | undefined>;
 }
-declare function Toolbar(props: ToolbarProps): JSX.Element | null;
+declare function Toolbar(props: ToolbarProps): React.JSX.Element | null;
 export default Toolbar;

package/toolbar/components/Toolbar.js

@@ -6,108 +6,108 @@ import { Portal } from '@quadrats/react/components';
 import { StartToolInputContext } from '../contexts/StartToolInputContext.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 } = props;
-    const { props: themeProps } = useContext(ThemeContext);
-    const editor = useQuadrats();
-    const toolbarRef = useRef(null);
-    const lastNativeRangeRef = useRef();
-    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) {
-                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]);
-    if (!shouldRender || (disabledElementTypes && isNodesTypeIn(editor, disabledElementTypes, { mode: 'all' }))) {
-        return null;
-    }
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    const tools = children(renderExpandedStatus);
-    if (!tools) {
-        return null;
-    }
-    return (React.createElement(Portal, { getContainer: getPortalContainer },
-        React.createElement("div", { ref: toolbarRef, className: clsx('qdr-toolbar__wrapper', { 'qdr-toolbar__wrapper--inputting': toolInput }, themeProps.className), style: themeProps.style },
-            React.createElement("div", { className: "qdr-toolbar__arrow" }),
-            React.createElement("div", { className: "qdr-toolbar" },
-                React.createElement(StartToolInputContext.Provider, { value: startToolInput }, tools),
-                toolInput && (React.createElement(ToolbarInput, { exit: () => {
-                        const { currentSelection } = toolInput;
-                        if (currentSelection) {
-                            Transforms.select(editor, currentSelection);
-                        }
-                        ReactEditor.focus(editor);
-                        setToolInput(undefined);
-                    }, toolInput: toolInput }))))));
+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 } = props;
+    const { props: themeProps } = useContext(ThemeContext);
+    const editor = useQuadrats();
+    const toolbarRef = useRef(null);
+    const lastNativeRangeRef = useRef();
+    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) {
+                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]);
+    if (!shouldRender || (disabledElementTypes && isNodesTypeIn(editor, disabledElementTypes, { mode: 'all' }))) {
+        return null;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const tools = children(renderExpandedStatus);
+    if (!tools) {
+        return null;
+    }
+    return (React.createElement(Portal, { getContainer: getPortalContainer },
+        React.createElement("div", { ref: toolbarRef, className: clsx('qdr-toolbar__wrapper', { 'qdr-toolbar__wrapper--inputting': toolInput }, themeProps.className), style: themeProps.style },
+            React.createElement("div", { className: "qdr-toolbar__arrow" }),
+            React.createElement("div", { className: "qdr-toolbar" },
+                React.createElement(StartToolInputContext.Provider, { value: startToolInput }, tools),
+                toolInput && (React.createElement(ToolbarInput, { exit: () => {
+                        const { currentSelection } = toolInput;
+                        if (currentSelection) {
+                            Transforms.select(editor, currentSelection);
+                        }
+                        ReactEditor.focus(editor);
+                        setToolInput(undefined);
+                    }, toolInput: toolInput }))))));
 }
 
 export { Toolbar as default };

package/toolbar/components/ToolbarIcon.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import React from 'react';
 import { IconProps } from '@quadrats/react/components';
 export interface ToolbarIconProps extends Omit<IconProps, 'ref'> {
     active?: boolean;
 }
-declare function ToolbarIcon(props: ToolbarIconProps): JSX.Element;
+declare function ToolbarIcon(props: ToolbarIconProps): React.JSX.Element;
 export default ToolbarIcon;

package/toolbar/components/ToolbarIcon.js

@@ -3,12 +3,12 @@ import React from 'react';
 import clsx from 'clsx';
 import { Icon } from '@quadrats/react/components';
 
-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);
-        } })));
+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);
+        } })));
 }
 
 export { ToolbarIcon as default };

package/toolbar/components/ToolbarInput.d.ts

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

package/toolbar/components/ToolbarInput.js

@@ -1,29 +1,29 @@
 import React from 'react';
 import { useLocale } from '@quadrats/react';
 
-function ToolbarInput({ exit, toolInput }) {
-    const { confirm, getPlaceholder } = toolInput;
-    const onExit = (event) => {
-        event.preventDefault();
-        exit();
-    };
-    const onKeyDown = (event) => {
-        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);
-    return (React.createElement("div", { className: "qdr-toolbar__input__wrapper" },
-        React.createElement("input", { defaultValue: toolInput.defaultValue, autoFocus: true, 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" }))));
+function ToolbarInput({ exit, toolInput }) {
+    const { confirm, getPlaceholder } = toolInput;
+    const onExit = (event) => {
+        event.preventDefault();
+        exit();
+    };
+    const onKeyDown = (event) => {
+        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);
+    return (React.createElement("div", { className: "qdr-toolbar__input__wrapper" },
+        React.createElement("input", { defaultValue: toolInput.defaultValue, autoFocus: true, 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/constants.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
+import React from 'react';
 /**
  * A react element constant of toolbar divider.
  */
-export declare const TOOLBAR_DIVIDER: JSX.Element;
+export declare const TOOLBAR_DIVIDER: React.JSX.Element;

package/toolbar/constants.js

@@ -1,8 +1,8 @@
 import React from 'react';
 
-/**
- * A react element constant of toolbar divider.
- */
+/**
+ * A react element constant of toolbar divider.
+ */
 const TOOLBAR_DIVIDER = React.createElement("span", { className: "qdr-toolbar__divider" });
 
 export { TOOLBAR_DIVIDER };

package/toolbar/hooks/useStartToolInput.js

@@ -1,8 +1,8 @@
 import { useContext } from 'react';
 import { StartToolInputContext } from '../contexts/StartToolInputContext.js';
 
-function useStartToolInput() {
-    return useContext(StartToolInputContext);
+function useStartToolInput() {
+    return useContext(StartToolInputContext);
 }
 
 export { useStartToolInput };