@quadrats/react 0.6.7 → 0.7.0

package/toolbar/index.cjs.js

@@ -1,7 +1,5 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var React = require('react');
 var clsx = require('clsx');
 var core = require('@quadrats/core');
@@ -9,157 +7,152 @@ var react = require('@quadrats/react');
 var components = require('@quadrats/react/components');
 var tslib = require('tslib');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e["default"] : e; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var clsx__default = /*#__PURE__*/_interopDefaultLegacy(clsx);
-
-/**
- * A react element constant of toolbar divider.
- */
-const TOOLBAR_DIVIDER = React__default.createElement("span", { className: "qdr-toolbar__divider" });
+/**
+ * A react element constant of toolbar divider.
+ */
+const TOOLBAR_DIVIDER = React.createElement("span", { className: "qdr-toolbar__divider" });
 
 const StartToolInputContext = React.createContext(() => { });
 
-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 = react.useLocale();
-    const placeholder = getPlaceholder(locale);
-    return (React__default.createElement("div", { className: "qdr-toolbar__input__wrapper" },
-        React__default.createElement("input", { defaultValue: toolInput.defaultValue, autoFocus: true, className: "qdr-toolbar__input", placeholder: placeholder, onKeyDown: onKeyDown, onBlur: exit }),
-        React__default.createElement("svg", { className: "qdr-toolbar__input__cross", viewBox: "0 0 320 512", onMouseDown: onExit },
-            React__default.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 = react.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 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 } = React.useContext(react.ThemeContext);
-    const editor = react.useQuadrats();
-    const toolbarRef = React.useRef(null);
-    const lastNativeRangeRef = React.useRef();
-    const focused = react.ReactEditor.isFocused(editor);
-    const { selection } = editor;
-    const [toolInput, setToolInput] = React.useState();
-    const startToolInput = React.useCallback(inputConfig => setToolInput(Object.assign(Object.assign({}, inputConfig), { currentSelection: selection })), [selection]);
-    let renderExpandedStatus;
-    if (toolInput) {
-        const { currentSelection } = toolInput;
-        if (currentSelection) {
-            if (core.Range.isExpanded(currentSelection)) {
-                renderExpandedStatus = true;
-            }
-            else {
-                renderExpandedStatus = false;
-            }
-        }
-    }
-    else if (focused) {
-        if (selection && core.Range.isCollapsed(selection)) {
-            renderExpandedStatus = false;
-        }
-        else if (core.getSelectionText(editor) !== '') {
-            renderExpandedStatus = true;
-        }
-    }
-    const shouldRender = typeof renderExpandedStatus === 'boolean';
-    React.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 = React.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 && core.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__default.createElement(components.Portal, { getContainer: getPortalContainer },
-        React__default.createElement("div", { ref: toolbarRef, className: clsx__default('qdr-toolbar__wrapper', { 'qdr-toolbar__wrapper--inputting': toolInput }, themeProps.className), style: themeProps.style },
-            React__default.createElement("div", { className: "qdr-toolbar__arrow" }),
-            React__default.createElement("div", { className: "qdr-toolbar" },
-                React__default.createElement(StartToolInputContext.Provider, { value: startToolInput }, tools),
-                toolInput && (React__default.createElement(ToolbarInput, { exit: () => {
-                        const { currentSelection } = toolInput;
-                        if (currentSelection) {
-                            core.Transforms.select(editor, currentSelection);
-                        }
-                        react.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 } = React.useContext(react.ThemeContext);
+    const editor = react.useQuadrats();
+    const toolbarRef = React.useRef(null);
+    const lastNativeRangeRef = React.useRef();
+    const focused = react.ReactEditor.isFocused(editor);
+    const { selection } = editor;
+    const [toolInput, setToolInput] = React.useState();
+    const startToolInput = React.useCallback(inputConfig => setToolInput(Object.assign(Object.assign({}, inputConfig), { currentSelection: selection })), [selection]);
+    let renderExpandedStatus;
+    if (toolInput) {
+        const { currentSelection } = toolInput;
+        if (currentSelection) {
+            if (core.Range.isExpanded(currentSelection)) {
+                renderExpandedStatus = true;
+            }
+            else {
+                renderExpandedStatus = false;
+            }
+        }
+    }
+    else if (focused) {
+        if (selection && core.Range.isCollapsed(selection)) {
+            renderExpandedStatus = false;
+        }
+        else if (core.getSelectionText(editor) !== '') {
+            renderExpandedStatus = true;
+        }
+    }
+    const shouldRender = typeof renderExpandedStatus === 'boolean';
+    React.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 = React.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 && core.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(components.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) {
+                            core.Transforms.select(editor, currentSelection);
+                        }
+                        react.ReactEditor.focus(editor);
+                        setToolInput(undefined);
+                    }, toolInput: toolInput }))))));
 }
 
-function ToolbarIcon(props) {
-    const { active, className, onMouseDown } = props, rest = tslib.__rest(props, ["active", "className", "onMouseDown"]);
-    return (React__default.createElement(components.Icon, Object.assign({}, rest, { className: clsx__default('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 = 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);
+        } })));
 }
 
-function useStartToolInput() {
-    return React.useContext(StartToolInputContext);
+function useStartToolInput() {
+    return React.useContext(StartToolInputContext);
 }
 
 exports.TOOLBAR_DIVIDER = TOOLBAR_DIVIDER;

package/toolbar/toolbar.css

@@ -1 +1 @@
-.qdr-toolbar{display:flex;align-items:center;font-size:24px;height:40px;padding:8px 10px;background-color:var(--qdr-surface);border:1px solid var(--qdr-border);border-radius:4px;box-sizing:border-box}.qdr-toolbar__wrapper{position:absolute;z-index:1;padding-bottom:10px;height:40px;box-sizing:content-box}.qdr-toolbar__wrapper--inputting{min-width:250px;max-width:350px}.qdr-toolbar__arrow{position:absolute;top:calc(100% - 10px);left:50%;content:"";width:10px;height:10px;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);margin:0 8px}.qdr-toolbar__icon{position:relative;color:var(--qdr-icon);font-size:24px;display:inline-flex;justify-content:center;align-items:center;margin:0 9px;border:0;background-color:transparent;padding:0;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:10px;width:calc(100% - 20px);height:calc(100% - 26px);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;font-size:24px;height:40px;padding:8px 10px;background-color:var(--qdr-surface);border:1px solid var(--qdr-border);border-radius:4px;box-sizing:border-box}.qdr-toolbar__wrapper{position:absolute;z-index:1;padding-bottom:10px;height:40px;box-sizing:content-box}.qdr-toolbar__wrapper--inputting{min-width:250px;max-width:350px}.qdr-toolbar__arrow{position:absolute;top:calc(100% - 10px);left:50%;content:"";width:10px;height:10px;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);margin:0 8px}.qdr-toolbar__icon{position:relative;color:var(--qdr-icon);font-size:24px;display:inline-flex;justify-content:center;align-items:center;margin:0 9px;border:0;background-color:rgba(0,0,0,0);padding:0;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:10px;width:calc(100% - 20px);height:calc(100% - 26px);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}

package/toolbar/typings.d.ts

@@ -3,4 +3,4 @@ import { InputWidgetConfig } from '@quadrats/common/input-widget';
 export interface ToolInputConfig extends InputWidgetConfig {
     currentSelection: Range | null;
 }
-export declare type StartToolInput = (config: InputWidgetConfig) => void;
+export type StartToolInput = (config: InputWidgetConfig) => void;

package/underline/constants.js

@@ -1,8 +1,8 @@
-/**
- * Default hotkey for toggling underline.
- *
- * @see [is-hotkey]{@link https://www.npmjs.com/package/is-hotkey}
- */
+/**
+ * Default hotkey for toggling underline.
+ *
+ * @see [is-hotkey]{@link https://www.npmjs.com/package/is-hotkey}
+ */
 const UNDERLINE_HOTKEY = 'mod+u';
 
 export { UNDERLINE_HOTKEY };

package/underline/createReactUnderline.d.ts

@@ -1 +1 @@
-export declare const createReactUnderline: (variant?: string | undefined) => import("@quadrats/react/toggle-mark").ReactToggleMark;
+export declare const createReactUnderline: (variant?: string) => import("@quadrats/react/toggle-mark").ReactToggleMark;

package/underline/createReactUnderline.js

@@ -3,9 +3,9 @@ import { createReactToggleMarkCreator } from '@quadrats/react/toggle-mark';
 import { defaultRenderUnderline } from './defaultRenderUnderline.js';
 import { UNDERLINE_HOTKEY } from './constants.js';
 
-const createReactUnderline = (variant) => createReactToggleMarkCreator(createUnderline(variant), {
-    hotkey: UNDERLINE_HOTKEY,
-    render: defaultRenderUnderline,
+const createReactUnderline = (variant) => createReactToggleMarkCreator(createUnderline(variant), {
+    hotkey: UNDERLINE_HOTKEY,
+    render: defaultRenderUnderline,
 })();
 
 export { createReactUnderline };

package/underline/defaultRenderUnderline.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import React from 'react';
 import { RenderMarkPropsBase } from '@quadrats/react/_internal';
-export declare const defaultRenderUnderline: ({ children, leaf }: RenderMarkPropsBase<boolean>) => JSX.Element;
+export declare const defaultRenderUnderline: ({ children, leaf }: RenderMarkPropsBase<boolean>) => React.JSX.Element;

package/underline/defaultRenderUnderline.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { UNDERLINE_TYPE } from '@quadrats/common/underline';
 
-const defaultRenderUnderline = ({ children, leaf }) => (React.createElement("u", { className: leaf.underlineVariant
+const defaultRenderUnderline = ({ children, leaf }) => (React.createElement("u", { className: leaf.underlineVariant
         ? `${UNDERLINE_TYPE}.${leaf.underlineVariant}` : `${UNDERLINE_TYPE}` }, children));
 
 export { defaultRenderUnderline };

package/underline/index.cjs.js

@@ -1,28 +1,22 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var React = require('react');
 var underline = require('@quadrats/common/underline');
 var toggleMark = require('@quadrats/react/toggle-mark');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e["default"] : e; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
-/**
- * Default hotkey for toggling underline.
- *
- * @see [is-hotkey]{@link https://www.npmjs.com/package/is-hotkey}
- */
+/**
+ * Default hotkey for toggling underline.
+ *
+ * @see [is-hotkey]{@link https://www.npmjs.com/package/is-hotkey}
+ */
 const UNDERLINE_HOTKEY = 'mod+u';
 
-const defaultRenderUnderline = ({ children, leaf }) => (React__default.createElement("u", { className: leaf.underlineVariant
+const defaultRenderUnderline = ({ children, leaf }) => (React.createElement("u", { className: leaf.underlineVariant
         ? `${underline.UNDERLINE_TYPE}.${leaf.underlineVariant}` : `${underline.UNDERLINE_TYPE}` }, children));
 
-const createReactUnderline = (variant) => toggleMark.createReactToggleMarkCreator(underline.createUnderline(variant), {
-    hotkey: UNDERLINE_HOTKEY,
-    render: defaultRenderUnderline,
+const createReactUnderline = (variant) => toggleMark.createReactToggleMarkCreator(underline.createUnderline(variant), {
+    hotkey: UNDERLINE_HOTKEY,
+    render: defaultRenderUnderline,
 })();
 
 exports.UNDERLINE_HOTKEY = UNDERLINE_HOTKEY;

package/underline/jsx-serializer/createJsxSerializeUnderline.js

@@ -2,9 +2,9 @@ import { UNDERLINE_TYPE } from '@quadrats/common/underline';
 import { createJsxSerializeToggleMarkCreator } from '@quadrats/react/toggle-mark/jsx-serializer';
 import { defaultRenderUnderline } from '@quadrats/react/underline';
 
-const createJsxSerializeUnderline = createJsxSerializeToggleMarkCreator({
-    type: UNDERLINE_TYPE,
-    render: defaultRenderUnderline,
+const createJsxSerializeUnderline = createJsxSerializeToggleMarkCreator({
+    type: UNDERLINE_TYPE,
+    render: defaultRenderUnderline,
 });
 
 export { createJsxSerializeUnderline };

package/underline/jsx-serializer/index.cjs.js

@@ -1,14 +1,12 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var underline = require('@quadrats/react/underline');
 var underline$1 = require('@quadrats/common/underline');
 var jsxSerializer = require('@quadrats/react/toggle-mark/jsx-serializer');
 
-const createJsxSerializeUnderline = jsxSerializer.createJsxSerializeToggleMarkCreator({
-    type: underline$1.UNDERLINE_TYPE,
-    render: underline.defaultRenderUnderline,
+const createJsxSerializeUnderline = jsxSerializer.createJsxSerializeToggleMarkCreator({
+    type: underline$1.UNDERLINE_TYPE,
+    render: underline.defaultRenderUnderline,
 });
 
 exports.defaultRenderUnderline = underline.defaultRenderUnderline;

package/utils/composeRefs.js

@@ -1,32 +1,32 @@
-/**
- * Compose all refs to single one.
- * It's helpful if you want to use useRef in an forwardRef component.
- *
- * @example
- *
- * const Some = forwardRef((props, ref) => {
- *   const refFromHook = useRef(null);
- *   const composedRef = composeRefs([ref, refFromHook]);
- *
- *   return (
- *     <div ref{composedRef}>
- *       ...
- *     </div>
- *   );
- * });
- */
-function composeRefs(refs) {
-    return (element) => {
-        refs.forEach((ref) => {
-            if (!ref) {
-                return;
-            }
-            if (typeof ref === 'function') {
-                return ref(element);
-            }
-            ref.current = element;
-        });
-    };
+/**
+ * Compose all refs to single one.
+ * It's helpful if you want to use useRef in an forwardRef component.
+ *
+ * @example
+ *
+ * const Some = forwardRef((props, ref) => {
+ *   const refFromHook = useRef(null);
+ *   const composedRef = composeRefs([ref, refFromHook]);
+ *
+ *   return (
+ *     <div ref{composedRef}>
+ *       ...
+ *     </div>
+ *   );
+ * });
+ */
+function composeRefs(refs) {
+    return (element) => {
+        refs.forEach((ref) => {
+            if (!ref) {
+                return;
+            }
+            if (typeof ref === 'function') {
+                return ref(element);
+            }
+            ref.current = element;
+        });
+    };
 }
 
 export { composeRefs };

package/utils/index.cjs.js

@@ -1,36 +1,34 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-/**
- * Compose all refs to single one.
- * It's helpful if you want to use useRef in an forwardRef component.
- *
- * @example
- *
- * const Some = forwardRef((props, ref) => {
- *   const refFromHook = useRef(null);
- *   const composedRef = composeRefs([ref, refFromHook]);
- *
- *   return (
- *     <div ref{composedRef}>
- *       ...
- *     </div>
- *   );
- * });
- */
-function composeRefs(refs) {
-    return (element) => {
-        refs.forEach((ref) => {
-            if (!ref) {
-                return;
-            }
-            if (typeof ref === 'function') {
-                return ref(element);
-            }
-            ref.current = element;
-        });
-    };
+/**
+ * Compose all refs to single one.
+ * It's helpful if you want to use useRef in an forwardRef component.
+ *
+ * @example
+ *
+ * const Some = forwardRef((props, ref) => {
+ *   const refFromHook = useRef(null);
+ *   const composedRef = composeRefs([ref, refFromHook]);
+ *
+ *   return (
+ *     <div ref{composedRef}>
+ *       ...
+ *     </div>
+ *   );
+ * });
+ */
+function composeRefs(refs) {
+    return (element) => {
+        refs.forEach((ref) => {
+            if (!ref) {
+                return;
+            }
+            if (typeof ref === 'function') {
+                return ref(element);
+            }
+            ref.current = element;
+        });
+    };
 }
 
 exports.composeRefs = composeRefs;