@quadrats/react 0.6.7 → 0.7.1

package/blockquote/toolbar/useBlockquoteTool.js

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

package/blockquote/typings.d.ts

@@ -2,7 +2,7 @@
 import { BlockquoteElement, Blockquote } from '@quadrats/common/blockquote';
 import { Editor } from '@quadrats/core';
 import { WithCreateHandlers, WithCreateRenderElement, RenderElementProps } from '@quadrats/react';
-export declare type RenderBlockquoteElementProps = RenderElementProps<BlockquoteElement>;
+export type RenderBlockquoteElementProps = RenderElementProps<BlockquoteElement>;
 export interface ReactBlockquoteCreateHandlersOptions {
     /**
      * The hotkey to toggle blockquote.

package/bold/constants.js

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

package/bold/createReactBold.d.ts

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

package/bold/createReactBold.js

@@ -3,9 +3,9 @@ import { createReactToggleMarkCreator } from '@quadrats/react/toggle-mark';
 import { BOLD_HOTKEY } from './constants.js';
 import { defaultRenderBold } from './defaultRenderBold.js';
 
-const createReactBold = (variant) => createReactToggleMarkCreator(createBold(variant), {
-    hotkey: BOLD_HOTKEY,
-    render: defaultRenderBold,
+const createReactBold = (variant) => createReactToggleMarkCreator(createBold(variant), {
+    hotkey: BOLD_HOTKEY,
+    render: defaultRenderBold,
 })();
 
 export { createReactBold };

package/bold/defaultRenderBold.d.ts

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

package/bold/defaultRenderBold.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { BOLD_TYPE } from '@quadrats/common/bold';
 
-const defaultRenderBold = ({ children, leaf }) => (React.createElement("strong", { className: leaf.boldVariant
+const defaultRenderBold = ({ children, leaf }) => (React.createElement("strong", { className: leaf.boldVariant
         ? `${BOLD_TYPE}.${leaf.boldVariant}` : `${BOLD_TYPE}` }, children));
 
 export { defaultRenderBold };

package/bold/index.cjs.js

@@ -1,28 +1,22 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var React = require('react');
 var bold = require('@quadrats/common/bold');
 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 bold.
- *
- * @see [is-hotkey]{@link https://www.npmjs.com/package/is-hotkey}
- */
+/**
+ * Default hotkey for toggling bold.
+ *
+ * @see [is-hotkey]{@link https://www.npmjs.com/package/is-hotkey}
+ */
 const BOLD_HOTKEY = 'mod+b';
 
-const defaultRenderBold = ({ children, leaf }) => (React__default.createElement("strong", { className: leaf.boldVariant
+const defaultRenderBold = ({ children, leaf }) => (React.createElement("strong", { className: leaf.boldVariant
         ? `${bold.BOLD_TYPE}.${leaf.boldVariant}` : `${bold.BOLD_TYPE}` }, children));
 
-const createReactBold = (variant) => toggleMark.createReactToggleMarkCreator(bold.createBold(variant), {
-    hotkey: BOLD_HOTKEY,
-    render: defaultRenderBold,
+const createReactBold = (variant) => toggleMark.createReactToggleMarkCreator(bold.createBold(variant), {
+    hotkey: BOLD_HOTKEY,
+    render: defaultRenderBold,
 })();
 
 exports.BOLD_HOTKEY = BOLD_HOTKEY;

package/bold/jsx-serializer/createJsxSerializeBold.js

@@ -2,9 +2,9 @@ import { BOLD_TYPE } from '@quadrats/common/bold';
 import { createJsxSerializeToggleMarkCreator } from '@quadrats/react/toggle-mark/jsx-serializer';
 import { defaultRenderBold } from '@quadrats/react/bold';
 
-const createJsxSerializeBold = createJsxSerializeToggleMarkCreator({
-    type: BOLD_TYPE,
-    render: defaultRenderBold,
+const createJsxSerializeBold = createJsxSerializeToggleMarkCreator({
+    type: BOLD_TYPE,
+    render: defaultRenderBold,
 });
 
 export { createJsxSerializeBold };

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

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

package/components/Icon/index.d.ts

@@ -11,5 +11,5 @@ export interface IconProps extends SVGProps<SVGSVGElement> {
      */
     size?: number;
 }
-declare const Icon: React.ForwardRefExoticComponent<Pick<IconProps, "string" | "filter" | "values" | "fill" | "max" | "type" | "accumulate" | "offset" | "key" | "id" | "media" | "origin" | "height" | "width" | "end" | "name" | "alignmentBaseline" | "baselineShift" | "clip" | "clipPath" | "clipRule" | "color" | "colorInterpolation" | "colorInterpolationFilters" | "cursor" | "direction" | "display" | "dominantBaseline" | "fillOpacity" | "fillRule" | "floodColor" | "floodOpacity" | "fontFamily" | "fontSize" | "fontSizeAdjust" | "fontStretch" | "fontStyle" | "fontVariant" | "fontWeight" | "imageRendering" | "letterSpacing" | "lightingColor" | "markerEnd" | "markerMid" | "markerStart" | "mask" | "opacity" | "order" | "overflow" | "paintOrder" | "pointerEvents" | "rotate" | "scale" | "shapeRendering" | "stopColor" | "stopOpacity" | "stroke" | "strokeDasharray" | "strokeDashoffset" | "strokeLinecap" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "textAnchor" | "textDecoration" | "textRendering" | "transform" | "unicodeBidi" | "visibility" | "wordSpacing" | "writingMode" | "alphabetic" | "hanging" | "ideographic" | "style" | "path" | "method" | "target" | "lang" | "className" | "children" | "tabIndex" | "size" | "orientation" | "local" | "x" | "y" | "icon" | "mathematical" | "azimuth" | "colorRendering" | "glyphOrientationVertical" | "vectorEffect" | "additive" | "crossOrigin" | "href" | "min" | "role" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "accentHeight" | "allowReorder" | "amplitude" | "arabicForm" | "ascent" | "attributeName" | "attributeType" | "autoReverse" | "baseFrequency" | "baseProfile" | "bbox" | "begin" | "bias" | "by" | "calcMode" | "capHeight" | "clipPathUnits" | "colorProfile" | "contentScriptType" | "contentStyleType" | "cx" | "cy" | "d" | "decelerate" | "descent" | "diffuseConstant" | "divisor" | "dur" | "dx" | "dy" | "edgeMode" | "elevation" | "enableBackground" | "exponent" | "externalResourcesRequired" | "filterRes" | "filterUnits" | "focusable" | "format" | "fr" | "from" | "fx" | "fy" | "g1" | "g2" | "glyphName" | "glyphOrientationHorizontal" | "glyphRef" | "gradientTransform" | "gradientUnits" | "horizAdvX" | "horizOriginX" | "in2" | "in" | "intercept" | "k1" | "k2" | "k3" | "k4" | "k" | "kernelMatrix" | "kernelUnitLength" | "kerning" | "keyPoints" | "keySplines" | "keyTimes" | "lengthAdjust" | "limitingConeAngle" | "markerHeight" | "markerUnits" | "markerWidth" | "maskContentUnits" | "maskUnits" | "mode" | "numOctaves" | "operator" | "orient" | "overlinePosition" | "overlineThickness" | "panose1" | "pathLength" | "patternContentUnits" | "patternTransform" | "patternUnits" | "points" | "pointsAtX" | "pointsAtY" | "pointsAtZ" | "preserveAlpha" | "preserveAspectRatio" | "primitiveUnits" | "r" | "radius" | "refX" | "refY" | "renderingIntent" | "repeatCount" | "repeatDur" | "requiredExtensions" | "requiredFeatures" | "restart" | "result" | "rx" | "ry" | "seed" | "slope" | "spacing" | "specularConstant" | "specularExponent" | "speed" | "spreadMethod" | "startOffset" | "stdDeviation" | "stemh" | "stemv" | "stitchTiles" | "strikethroughPosition" | "strikethroughThickness" | "surfaceScale" | "systemLanguage" | "tableValues" | "targetX" | "targetY" | "textLength" | "to" | "u1" | "u2" | "underlinePosition" | "underlineThickness" | "unicode" | "unicodeRange" | "unitsPerEm" | "vAlphabetic" | "version" | "vertAdvY" | "vertOriginX" | "vertOriginY" | "vHanging" | "vIdeographic" | "viewBox" | "viewTarget" | "vMathematical" | "widths" | "x1" | "x2" | "xChannelSelector" | "xHeight" | "xlinkActuate" | "xlinkArcrole" | "xlinkHref" | "xlinkRole" | "xlinkShow" | "xlinkTitle" | "xlinkType" | "xmlBase" | "xmlLang" | "xmlns" | "xmlnsXlink" | "xmlSpace" | "y1" | "y2" | "yChannelSelector" | "z" | "zoomAndPan" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & React.RefAttributes<SVGSVGElement>>;
+declare const Icon: React.ForwardRefExoticComponent<Omit<IconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
 export default Icon;

package/components/Icon/index.js

@@ -1,21 +1,21 @@
 import { __rest } from 'tslib';
 import React, { forwardRef } from 'react';
 
-const svgBaseProps = {
-    width: '1em',
-    height: '1em',
-    'aria-hidden': true,
-    focusable: false,
-};
-const Icon = forwardRef((_a, ref) => {
-    var { children, style, icon, size = 1 } = _a, props = __rest(_a, ["children", "style", "icon", "size"]);
-    if (!icon) {
-        throw new Error('The icon definition is needed.');
-    }
-    const { definition } = icon;
-    const svgProps = Object.assign(Object.assign(Object.assign(Object.assign({}, svgBaseProps), definition.svg), props), { style: Object.assign(Object.assign({}, style), { fontSize: `${size}em` }) });
-    return (React.createElement("svg", Object.assign({}, svgProps, { ref: ref }),
-        React.createElement("path", Object.assign({}, definition.path))));
+const svgBaseProps = {
+    width: '1em',
+    height: '1em',
+    'aria-hidden': true,
+    focusable: false,
+};
+const Icon = forwardRef((_a, ref) => {
+    var { children, style, icon, size = 1 } = _a, props = __rest(_a, ["children", "style", "icon", "size"]);
+    if (!icon) {
+        throw new Error('The icon definition is needed.');
+    }
+    const { definition } = icon;
+    const svgProps = Object.assign(Object.assign(Object.assign(Object.assign({}, svgBaseProps), definition.svg), props), { style: Object.assign(Object.assign({}, style), { fontSize: `${size}em` }) });
+    return (React.createElement("svg", Object.assign({}, svgProps, { ref: ref }),
+        React.createElement("path", Object.assign({}, definition.path))));
 });
 
 export { Icon as default };

package/components/Portal/index.d.ts

@@ -1,6 +1,7 @@
 import { FC } from 'react';
 export interface PortalProps {
     getContainer?: () => HTMLElement;
+    children?: React.ReactNode;
 }
 declare const Portal: FC<PortalProps>;
 export default Portal;

package/components/Portal/index.js

@@ -1,8 +1,8 @@
 import ReactDOM from 'react-dom';
 
-const Portal = ({ getContainer, children }) => {
-    const container = getContainer ? getContainer() : document.body;
-    return ReactDOM.createPortal(children, container);
+const Portal = ({ getContainer, children }) => {
+    const container = getContainer ? getContainer() : document.body;
+    return ReactDOM.createPortal(children, container);
 };
 
 export { Portal as default };

package/components/Progress/index.js

@@ -1,16 +1,16 @@
 import React, { forwardRef } from 'react';
 import clsx from 'clsx';
 
-const Progress = forwardRef(function Progress(props, ref) {
-    const { className, percentage = 0 } = props;
-    const transform = `scaleX(${percentage / 100})`;
-    const style = {
-        transform,
-        msTransform: transform,
-    };
-    return (React.createElement("span", { ref: ref, className: clsx('qdr-progress', className) },
-        React.createElement("span", { className: "qdr-progress__backdrop" }),
-        React.createElement("span", { className: "qdr-progress__track", style: style })));
+const Progress = forwardRef(function Progress(props, ref) {
+    const { className, percentage = 0 } = props;
+    const transform = `scaleX(${percentage / 100})`;
+    const style = {
+        transform,
+        msTransform: transform,
+    };
+    return (React.createElement("span", { ref: ref, className: clsx('qdr-progress', className) },
+        React.createElement("span", { className: "qdr-progress__backdrop" }),
+        React.createElement("span", { className: "qdr-progress__track", style: style })));
 });
 
 export { Progress as default };

package/components/Tooltip/calculatePosition.js

@@ -1,69 +1,69 @@
-function isContainerAsDocument(container) {
-    return container === document.documentElement || container === document.body;
-}
-function getTargetRect(container, targetEl) {
-    const triggerRect = targetEl.getBoundingClientRect();
-    if (isContainerAsDocument(container)) {
-        return triggerRect;
-    }
-    const containerRect = container.getBoundingClientRect();
-    const { width, height } = triggerRect;
-    const top = triggerRect.top - containerRect.top;
-    const left = triggerRect.left - containerRect.left;
-    return {
-        width,
-        height,
-        top,
-        bottom: top + height,
-        left,
-        right: left + width,
-    };
-}
-function getScrollLeftAndTop(container) {
-    const isAsDocument = isContainerAsDocument(container);
-    return {
-        scrollTop: isAsDocument ? document.documentElement.scrollTop + document.body.scrollTop : container.scrollTop,
-        scrollLeft: isAsDocument ? document.documentElement.scrollLeft + document.body.scrollLeft : container.scrollLeft,
-    };
-}
-function calculatePosition(props, triggerEl, popupEl) {
-    const { placement, getContainer, horizontalOffset, verticalOffset, } = props;
-    const isTop = placement.includes('top');
-    const isBottom = placement.includes('bottom');
-    const isLeft = placement.includes('left');
-    const isRight = placement.includes('right');
-    const container = getContainer();
-    const triggerRect = getTargetRect(container, triggerEl);
-    const { width: popupWidth, height: popupHeight } = popupEl.getBoundingClientRect();
-    let { scrollTop: top, scrollLeft: left } = getScrollLeftAndTop(container);
-    /**
-     * position
-     */
-    if (isLeft) {
-        left += triggerRect.left;
-    }
-    else if (isRight) {
-        left += triggerRect.right - popupWidth;
-    }
-    else {
-        left += triggerRect.left + (triggerRect.width - popupWidth) / 2;
-    }
-    if (isTop) {
-        top += triggerRect.top - popupHeight;
-    }
-    else if (isBottom) {
-        top += triggerRect.bottom;
-    }
-    else {
-        top += triggerRect.top + (triggerRect.height - popupHeight) / 2;
-        left += isLeft ? -popupWidth : popupWidth;
-    }
-    /**
-     * offset
-     */
-    top += isTop ? -verticalOffset : verticalOffset;
-    left += isLeft ? -horizontalOffset : horizontalOffset;
-    return { top, left };
+function isContainerAsDocument(container) {
+    return container === document.documentElement || container === document.body;
+}
+function getTargetRect(container, targetEl) {
+    const triggerRect = targetEl.getBoundingClientRect();
+    if (isContainerAsDocument(container)) {
+        return triggerRect;
+    }
+    const containerRect = container.getBoundingClientRect();
+    const { width, height } = triggerRect;
+    const top = triggerRect.top - containerRect.top;
+    const left = triggerRect.left - containerRect.left;
+    return {
+        width,
+        height,
+        top,
+        bottom: top + height,
+        left,
+        right: left + width,
+    };
+}
+function getScrollLeftAndTop(container) {
+    const isAsDocument = isContainerAsDocument(container);
+    return {
+        scrollTop: isAsDocument ? document.documentElement.scrollTop + document.body.scrollTop : container.scrollTop,
+        scrollLeft: isAsDocument ? document.documentElement.scrollLeft + document.body.scrollLeft : container.scrollLeft,
+    };
+}
+function calculatePosition(props, triggerEl, popupEl) {
+    const { placement, getContainer, horizontalOffset, verticalOffset, } = props;
+    const isTop = placement.includes('top');
+    const isBottom = placement.includes('bottom');
+    const isLeft = placement.includes('left');
+    const isRight = placement.includes('right');
+    const container = getContainer();
+    const triggerRect = getTargetRect(container, triggerEl);
+    const { width: popupWidth, height: popupHeight } = popupEl.getBoundingClientRect();
+    let { scrollTop: top, scrollLeft: left } = getScrollLeftAndTop(container);
+    /**
+     * position
+     */
+    if (isLeft) {
+        left += triggerRect.left;
+    }
+    else if (isRight) {
+        left += triggerRect.right - popupWidth;
+    }
+    else {
+        left += triggerRect.left + (triggerRect.width - popupWidth) / 2;
+    }
+    if (isTop) {
+        top += triggerRect.top - popupHeight;
+    }
+    else if (isBottom) {
+        top += triggerRect.bottom;
+    }
+    else {
+        top += triggerRect.top + (triggerRect.height - popupHeight) / 2;
+        left += isLeft ? -popupWidth : popupWidth;
+    }
+    /**
+     * offset
+     */
+    top += isTop ? -verticalOffset : verticalOffset;
+    left += isLeft ? -horizontalOffset : horizontalOffset;
+    return { top, left };
 }
 
 export { calculatePosition };

package/components/Tooltip/index.d.ts

@@ -1,10 +1,10 @@
-/// <reference types="react" />
+import React from 'react';
 import { TooltipProps } from './typings';
 /**
  * @todo
  * To implement all placement.
  * Extract Popup from Tooltip.
  */
-declare function Tooltip({ children, triggers, popup, getContainer, placement, horizontalOffset, verticalOffset, transitionClassNames, mouseEnterDelay, mouseLeaveDelay, }: TooltipProps): JSX.Element;
+declare function Tooltip({ children, triggers, popup, getContainer, placement, horizontalOffset, verticalOffset, transitionClassNames, mouseEnterDelay, mouseLeaveDelay, }: TooltipProps): React.JSX.Element;
 export default Tooltip;
 export { TooltipProps };