From a9c9875875061ecd4df634aaba1333b026ff04f9 Mon Sep 17 00:00:00 2001 From: caiofct Date: Fri, 22 Jul 2022 17:12:32 -0300 Subject: [PATCH 1/3] Fix popover top position when scrolling vertically --- src/usePopover.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/usePopover.ts b/src/usePopover.ts index 5e33d15..9f24b9b 100644 --- a/src/usePopover.ts +++ b/src/usePopover.ts @@ -130,6 +130,10 @@ export const usePopover = ({ finalTop = nudgedTop; finalLeft = nudgedLeft; } + + if (window.scrollY > 0) { + finalTop = rect.top; + } popoverRef.current.style.transform = `translate(${finalLeft - scoutRect.left}px, ${ finalTop - scoutRect.top }px)`; From 1e92562f24e0a33f733d5a7684c392605beca47d Mon Sep 17 00:00:00 2001 From: caiofct Date: Fri, 22 Jul 2022 17:25:03 -0300 Subject: [PATCH 2/3] Commit dist directory --- .gitignore | 1 - dist/ArrowContainer.js | 32 ++++++ dist/ArrowContainer.js.map | 1 + dist/Popover.js | 186 ++++++++++++++++++++++++++++++++++ dist/Popover.js.map | 1 + dist/PopoverPortal.js | 19 ++++ dist/PopoverPortal.js.map | 1 + dist/index.d.ts | 118 +++++++++++++++++++++ dist/useArrowContainer.js | 95 +++++++++++++++++ dist/useArrowContainer.js.map | 1 + dist/useElementRef.js | 11 ++ dist/useElementRef.js.map | 1 + dist/useMemoizedArray.js | 25 +++++ dist/useMemoizedArray.js.map | 1 + dist/usePopover.js | 153 ++++++++++++++++++++++++++++ dist/usePopover.js.map | 1 + dist/util.js | 118 +++++++++++++++++++++ dist/util.js.map | 1 + 18 files changed, 765 insertions(+), 1 deletion(-) create mode 100644 dist/ArrowContainer.js create mode 100644 dist/ArrowContainer.js.map create mode 100644 dist/Popover.js create mode 100644 dist/Popover.js.map create mode 100644 dist/PopoverPortal.js create mode 100644 dist/PopoverPortal.js.map create mode 100644 dist/index.d.ts create mode 100644 dist/useArrowContainer.js create mode 100644 dist/useArrowContainer.js.map create mode 100644 dist/useElementRef.js create mode 100644 dist/useElementRef.js.map create mode 100644 dist/useMemoizedArray.js create mode 100644 dist/useMemoizedArray.js.map create mode 100644 dist/usePopover.js create mode 100644 dist/usePopover.js.map create mode 100644 dist/util.js create mode 100644 dist/util.js.map diff --git a/.gitignore b/.gitignore index 18d94ba..d357a9b 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,4 @@ node_modules/ -/dist/ npm-debug.log .idea **/.DS_Store diff --git a/dist/ArrowContainer.js b/dist/ArrowContainer.js new file mode 100644 index 0000000..8ed5a86 --- /dev/null +++ b/dist/ArrowContainer.js @@ -0,0 +1,32 @@ +"use strict"; +var __assign = (this && this.__assign) || function () { + __assign = Object.assign || function(t) { + for (var s, i = 1, n = arguments.length; i < n; i++) { + s = arguments[i]; + for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) + t[p] = s[p]; + } + return t; + }; + return __assign.apply(this, arguments); +}; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.ArrowContainer = void 0; +var jsx_runtime_1 = require("react/jsx-runtime"); +var react_1 = require("react"); +var useArrowContainer_1 = require("./useArrowContainer"); +var ArrowContainer = function (_a) { + var childRect = _a.childRect, popoverRect = _a.popoverRect, position = _a.position, arrowColor = _a.arrowColor, arrowSize = _a.arrowSize, arrowClassName = _a.arrowClassName, externalArrowStyle = _a.arrowStyle, className = _a.className, children = _a.children, externalArrowContainerStyle = _a.style; + var _b = useArrowContainer_1.useArrowContainer({ + childRect: childRect, + popoverRect: popoverRect, + position: position, + arrowColor: arrowColor, + arrowSize: arrowSize, + }), arrowContainerStyle = _b.arrowContainerStyle, arrowStyle = _b.arrowStyle; + var mergedContainerStyle = react_1.useMemo(function () { return (__assign(__assign({}, arrowContainerStyle), externalArrowContainerStyle)); }, [arrowContainerStyle, externalArrowContainerStyle]); + var mergedArrowStyle = react_1.useMemo(function () { return (__assign(__assign({}, arrowStyle), externalArrowStyle)); }, [arrowStyle, externalArrowStyle]); + return (jsx_runtime_1.jsxs("div", __assign({ className: className, style: mergedContainerStyle }, { children: [jsx_runtime_1.jsx("div", { style: mergedArrowStyle, className: arrowClassName }, void 0), children] }), void 0)); +}; +exports.ArrowContainer = ArrowContainer; +//# sourceMappingURL=ArrowContainer.js.map \ No newline at end of file diff --git a/dist/ArrowContainer.js.map b/dist/ArrowContainer.js.map new file mode 100644 index 0000000..ae94178 --- /dev/null +++ b/dist/ArrowContainer.js.map @@ -0,0 +1 @@ +{"version":3,"file":"ArrowContainer.js","sourceRoot":"","sources":["../src/ArrowContainer.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,+BAAoC;AAEpC,yDAAwD;AAEjD,IAAM,cAAc,GAA4B,UAAC,EAWvD;QAVC,SAAS,eAAA,EACT,WAAW,iBAAA,EACX,QAAQ,cAAA,EACR,UAAU,gBAAA,EACV,SAAS,eAAA,EACT,cAAc,oBAAA,EACF,kBAAkB,gBAAA,EAC9B,SAAS,eAAA,EACT,QAAQ,cAAA,EACD,2BAA2B,WAAA;IAE5B,IAAA,KAAsC,qCAAiB,CAAC;QAC5D,SAAS,WAAA;QACT,WAAW,aAAA;QACX,QAAQ,UAAA;QACR,UAAU,YAAA;QACV,SAAS,WAAA;KACV,CAAC,EANM,mBAAmB,yBAAA,EAAE,UAAU,gBAMrC,CAAC;IAEH,IAAM,oBAAoB,GAAG,eAAO,CAClC,cAAM,OAAA,uBACD,mBAAmB,GACnB,2BAA2B,EAC9B,EAHI,CAGJ,EACF,CAAC,mBAAmB,EAAE,2BAA2B,CAAC,CACnD,CAAC;IAEF,IAAM,gBAAgB,GAAG,eAAO,CAC9B,cAAM,OAAA,uBACD,UAAU,GACV,kBAAkB,EACrB,EAHI,CAGJ,EACF,CAAC,UAAU,EAAE,kBAAkB,CAAC,CACjC,CAAC;IAEF,OAAO,CACL,qCAAK,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,oBAAoB,iBACpD,2BAAK,KAAK,EAAE,gBAAgB,EAAE,SAAS,EAAE,cAAc,WAAI,EAC1D,QAAQ,aACL,CACP,CAAC;AACJ,CAAC,CAAC;AA1CW,QAAA,cAAc,kBA0CzB","sourcesContent":["import { useMemo, FC } from 'react';\nimport { ArrowContainerProps } from '.';\nimport { useArrowContainer } from './useArrowContainer';\n\nexport const ArrowContainer: FC = ({\n childRect,\n popoverRect,\n position,\n arrowColor,\n arrowSize,\n arrowClassName,\n arrowStyle: externalArrowStyle,\n className,\n children,\n style: externalArrowContainerStyle,\n}) => {\n const { arrowContainerStyle, arrowStyle } = useArrowContainer({\n childRect,\n popoverRect,\n position,\n arrowColor,\n arrowSize,\n });\n\n const mergedContainerStyle = useMemo(\n () => ({\n ...arrowContainerStyle,\n ...externalArrowContainerStyle,\n }),\n [arrowContainerStyle, externalArrowContainerStyle],\n );\n\n const mergedArrowStyle = useMemo(\n () => ({\n ...arrowStyle,\n ...externalArrowStyle,\n }),\n [arrowStyle, externalArrowStyle],\n );\n\n return (\n
\n
\n {children}\n
\n );\n};\n"]} \ No newline at end of file diff --git a/dist/Popover.js b/dist/Popover.js new file mode 100644 index 0000000..29e1880 --- /dev/null +++ b/dist/Popover.js @@ -0,0 +1,186 @@ +"use strict"; +var __assign = (this && this.__assign) || function () { + __assign = Object.assign || function(t) { + for (var s, i = 1, n = arguments.length; i < n; i++) { + s = arguments[i]; + for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) + t[p] = s[p]; + } + return t; + }; + return __assign.apply(this, arguments); +}; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.Popover = exports.usePopover = exports.ArrowContainer = exports.useArrowContainer = void 0; +var jsx_runtime_1 = require("react/jsx-runtime"); +var react_1 = require("react"); +var PopoverPortal_1 = require("./PopoverPortal"); +var util_1 = require("./util"); +var usePopover_1 = require("./usePopover"); +Object.defineProperty(exports, "usePopover", { enumerable: true, get: function () { return usePopover_1.usePopover; } }); +var useMemoizedArray_1 = require("./useMemoizedArray"); +var useArrowContainer_1 = require("./useArrowContainer"); +Object.defineProperty(exports, "useArrowContainer", { enumerable: true, get: function () { return useArrowContainer_1.useArrowContainer; } }); +var ArrowContainer_1 = require("./ArrowContainer"); +Object.defineProperty(exports, "ArrowContainer", { enumerable: true, get: function () { return ArrowContainer_1.ArrowContainer; } }); +var PopoverInternal = react_1.forwardRef(function (_a, externalRef) { + var isOpen = _a.isOpen, children = _a.children, content = _a.content, _b = _a.positions, externalPositions = _b === void 0 ? util_1.Constants.DEFAULT_POSITIONS : _b, _c = _a.align, align = _c === void 0 ? util_1.Constants.DEFAULT_ALIGN : _c, _d = _a.padding, padding = _d === void 0 ? 0 : _d, _e = _a.reposition, reposition = _e === void 0 ? true : _e, _f = _a.parentElement, parentElement = _f === void 0 ? window.document.body : _f, _g = _a.boundaryElement, boundaryElement = _g === void 0 ? parentElement : _g, _h = _a.containerClassName, containerClassName = _h === void 0 ? 'react-tiny-popover-container' : _h, containerStyle = _a.containerStyle, contentLocation = _a.contentLocation, _j = _a.boundaryInset, boundaryInset = _j === void 0 ? 0 : _j, onClickOutside = _a.onClickOutside; + var positions = useMemoizedArray_1.useMemoizedArray(externalPositions); + // TODO: factor prevs out into a custom prevs hook + var prevIsOpen = react_1.useRef(false); + var prevPositions = react_1.useRef(); + var prevContentLocation = react_1.useRef(); + var prevReposition = react_1.useRef(reposition); + var childRef = react_1.useRef(); + var _k = react_1.useState({ + align: align, + nudgedLeft: 0, + nudgedTop: 0, + position: positions[0], + padding: padding, + childRect: util_1.Constants.EMPTY_CLIENT_RECT, + popoverRect: util_1.Constants.EMPTY_CLIENT_RECT, + parentRect: util_1.Constants.EMPTY_CLIENT_RECT, + boundaryRect: util_1.Constants.EMPTY_CLIENT_RECT, + boundaryInset: boundaryInset, + violations: util_1.Constants.EMPTY_CLIENT_RECT, + hasViolations: false, + }), popoverState = _k[0], setPopoverState = _k[1]; + var onPositionPopover = react_1.useCallback(function (popoverState) { return setPopoverState(popoverState); }, []); + var _l = usePopover_1.usePopover({ + isOpen: isOpen, + childRef: childRef, + containerClassName: containerClassName, + parentElement: parentElement, + boundaryElement: boundaryElement, + contentLocation: contentLocation, + positions: positions, + align: align, + padding: padding, + boundaryInset: boundaryInset, + reposition: reposition, + onPositionPopover: onPositionPopover, + }), positionPopover = _l.positionPopover, popoverRef = _l.popoverRef, scoutRef = _l.scoutRef; + react_1.useLayoutEffect(function () { + var shouldUpdate = true; + var updatePopover = function () { + var _a, _b; + if (isOpen && shouldUpdate) { + var childRect = (_a = childRef === null || childRef === void 0 ? void 0 : childRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect(); + var popoverRect = (_b = popoverRef === null || popoverRef === void 0 ? void 0 : popoverRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect(); + if (childRect != null && + popoverRect != null && + (!util_1.rectsAreEqual(childRect, { + top: popoverState.childRect.top, + left: popoverState.childRect.left, + width: popoverState.childRect.width, + height: popoverState.childRect.height, + bottom: popoverState.childRect.top + popoverState.childRect.height, + right: popoverState.childRect.left + popoverState.childRect.width, + }) || + popoverRect.width !== popoverState.popoverRect.width || + popoverRect.height !== popoverState.popoverRect.height || + popoverState.padding !== padding || + popoverState.align !== align || + positions !== prevPositions.current || + contentLocation !== prevContentLocation.current || + reposition !== prevReposition.current)) { + positionPopover(); + } + // TODO: factor prev checks out into the custom prevs hook + if (positions !== prevPositions.current) { + prevPositions.current = positions; + } + if (contentLocation !== prevContentLocation.current) { + prevContentLocation.current = contentLocation; + } + if (reposition !== prevReposition.current) { + prevReposition.current = reposition; + } + if (shouldUpdate) { + window.requestAnimationFrame(updatePopover); + } + } + prevIsOpen.current = isOpen; + }; + window.requestAnimationFrame(updatePopover); + return function () { + shouldUpdate = false; + }; + }, [ + align, + contentLocation, + isOpen, + padding, + popoverRef, + popoverState.align, + popoverState.childRect.height, + popoverState.childRect.left, + popoverState.childRect.top, + popoverState.childRect.width, + popoverState.padding, + popoverState.popoverRect.height, + popoverState.popoverRect.width, + positionPopover, + positions, + reposition, + ]); + react_1.useEffect(function () { + var popoverElement = popoverRef.current; + Object.assign(popoverElement.style, containerStyle); + return function () { + Object.keys(containerStyle !== null && containerStyle !== void 0 ? containerStyle : {}).forEach(function (key) { + return delete popoverElement.style[key]; + }); + }; + }, [containerStyle, isOpen, popoverRef]); + var handleOnClickOutside = react_1.useCallback(function (e) { + var _a, _b; + if (isOpen && + !((_a = popoverRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target)) && + !((_b = childRef.current) === null || _b === void 0 ? void 0 : _b.contains(e.target))) { + onClickOutside === null || onClickOutside === void 0 ? void 0 : onClickOutside(e); + } + }, [isOpen, onClickOutside, popoverRef]); + var handleWindowResize = react_1.useCallback(function () { + if (childRef.current) { + window.requestAnimationFrame(function () { return positionPopover(); }); + } + }, [positionPopover]); + react_1.useEffect(function () { + window.addEventListener('click', handleOnClickOutside, true); + window.addEventListener('resize', handleWindowResize); + return function () { + window.removeEventListener('click', handleOnClickOutside, true); + window.removeEventListener('resize', handleWindowResize); + }; + }, [handleOnClickOutside, handleWindowResize]); + var handleRef = react_1.useCallback(function (node) { + childRef.current = node; + if (externalRef != null) { + if (typeof externalRef === 'object') { + externalRef.current = node; + } + else if (typeof externalRef === 'function') { + externalRef(node); + } + } + }, [externalRef]); + var renderChild = function () { + return react_1.cloneElement(children, { + ref: handleRef, + }); + }; + var renderPopover = function () { + if (!isOpen) + return null; + return (jsx_runtime_1.jsx(PopoverPortal_1.PopoverPortal, __assign({ element: popoverRef.current, scoutElement: scoutRef.current, container: parentElement }, { children: typeof content === 'function' ? content(popoverState) : content }), void 0)); + }; + return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [renderChild(), renderPopover()] }, void 0)); +}); +exports.Popover = react_1.forwardRef(function (props, ref) { + if (typeof window === 'undefined') + return props.children; + return jsx_runtime_1.jsx(PopoverInternal, __assign({}, props, { ref: ref }), void 0); +}); +//# sourceMappingURL=Popover.js.map \ No newline at end of file diff --git a/dist/Popover.js.map b/dist/Popover.js.map new file mode 100644 index 0000000..d8b869d --- /dev/null +++ b/dist/Popover.js.map @@ -0,0 +1 @@ +{"version":3,"file":"Popover.js","sourceRoot":"","sources":["../src/Popover.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n useRef,\n useLayoutEffect,\n useState,\n useCallback,\n useEffect,\n forwardRef,\n cloneElement,\n} from 'react';\nimport { PopoverPortal } from './PopoverPortal';\nimport {\n ContentLocation,\n ContentLocationGetter,\n PopoverPosition,\n PopoverProps,\n PopoverState,\n} from '.';\nimport { Constants, rectsAreEqual } from './util';\nimport { usePopover } from './usePopover';\nimport { useMemoizedArray } from './useMemoizedArray';\n\nexport { useArrowContainer } from './useArrowContainer';\nexport { ArrowContainer } from './ArrowContainer';\nexport { usePopover };\n\nconst PopoverInternal = forwardRef(\n (\n {\n isOpen,\n children,\n content,\n positions: externalPositions = Constants.DEFAULT_POSITIONS,\n align = Constants.DEFAULT_ALIGN,\n padding = 0,\n reposition = true,\n parentElement = window.document.body,\n boundaryElement = parentElement,\n containerClassName = 'react-tiny-popover-container',\n containerStyle,\n contentLocation,\n boundaryInset = 0,\n onClickOutside,\n },\n externalRef,\n ) => {\n const positions = useMemoizedArray(externalPositions);\n\n // TODO: factor prevs out into a custom prevs hook\n const prevIsOpen = useRef(false);\n const prevPositions = useRef();\n const prevContentLocation = useRef();\n const prevReposition = useRef(reposition);\n\n const childRef = useRef();\n\n const [popoverState, setPopoverState] = useState({\n align,\n nudgedLeft: 0,\n nudgedTop: 0,\n position: positions[0],\n padding,\n childRect: Constants.EMPTY_CLIENT_RECT,\n popoverRect: Constants.EMPTY_CLIENT_RECT,\n parentRect: Constants.EMPTY_CLIENT_RECT,\n boundaryRect: Constants.EMPTY_CLIENT_RECT,\n boundaryInset,\n violations: Constants.EMPTY_CLIENT_RECT,\n hasViolations: false,\n });\n\n const onPositionPopover = useCallback(\n (popoverState: PopoverState) => setPopoverState(popoverState),\n [],\n );\n\n const { positionPopover, popoverRef, scoutRef } = usePopover({\n isOpen,\n childRef,\n containerClassName,\n parentElement,\n boundaryElement,\n contentLocation,\n positions,\n align,\n padding,\n boundaryInset,\n reposition,\n onPositionPopover,\n });\n\n useLayoutEffect(() => {\n let shouldUpdate = true;\n const updatePopover = () => {\n if (isOpen && shouldUpdate) {\n const childRect = childRef?.current?.getBoundingClientRect();\n const popoverRect = popoverRef?.current?.getBoundingClientRect();\n if (\n childRect != null &&\n popoverRect != null &&\n (!rectsAreEqual(childRect, {\n top: popoverState.childRect.top,\n left: popoverState.childRect.left,\n width: popoverState.childRect.width,\n height: popoverState.childRect.height,\n bottom: popoverState.childRect.top + popoverState.childRect.height,\n right: popoverState.childRect.left + popoverState.childRect.width,\n }) ||\n popoverRect.width !== popoverState.popoverRect.width ||\n popoverRect.height !== popoverState.popoverRect.height ||\n popoverState.padding !== padding ||\n popoverState.align !== align ||\n positions !== prevPositions.current ||\n contentLocation !== prevContentLocation.current ||\n reposition !== prevReposition.current)\n ) {\n positionPopover();\n }\n\n // TODO: factor prev checks out into the custom prevs hook\n if (positions !== prevPositions.current) {\n prevPositions.current = positions;\n }\n if (contentLocation !== prevContentLocation.current) {\n prevContentLocation.current = contentLocation;\n }\n if (reposition !== prevReposition.current) {\n prevReposition.current = reposition;\n }\n\n if (shouldUpdate) {\n window.requestAnimationFrame(updatePopover);\n }\n }\n\n prevIsOpen.current = isOpen;\n };\n\n window.requestAnimationFrame(updatePopover);\n\n return () => {\n shouldUpdate = false;\n };\n }, [\n align,\n contentLocation,\n isOpen,\n padding,\n popoverRef,\n popoverState.align,\n popoverState.childRect.height,\n popoverState.childRect.left,\n popoverState.childRect.top,\n popoverState.childRect.width,\n popoverState.padding,\n popoverState.popoverRect.height,\n popoverState.popoverRect.width,\n positionPopover,\n positions,\n reposition,\n ]);\n\n useEffect(() => {\n const popoverElement = popoverRef.current;\n\n Object.assign(popoverElement.style, containerStyle);\n\n return () => {\n Object.keys(containerStyle ?? {}).forEach(\n (key) =>\n delete popoverElement.style[\n key as keyof Omit\n ],\n );\n };\n }, [containerStyle, isOpen, popoverRef]);\n\n const handleOnClickOutside = useCallback(\n (e: MouseEvent) => {\n if (\n isOpen &&\n !popoverRef.current?.contains(e.target as Node) &&\n !childRef.current?.contains(e.target as Node)\n ) {\n onClickOutside?.(e);\n }\n },\n [isOpen, onClickOutside, popoverRef],\n );\n\n const handleWindowResize = useCallback(() => {\n if (childRef.current) {\n window.requestAnimationFrame(() => positionPopover());\n }\n }, [positionPopover]);\n\n useEffect(() => {\n window.addEventListener('click', handleOnClickOutside, true);\n window.addEventListener('resize', handleWindowResize);\n return () => {\n window.removeEventListener('click', handleOnClickOutside, true);\n window.removeEventListener('resize', handleWindowResize);\n };\n }, [handleOnClickOutside, handleWindowResize]);\n\n const handleRef = useCallback(\n (node: HTMLElement) => {\n childRef.current = node;\n if (externalRef != null) {\n if (typeof externalRef === 'object') {\n (externalRef as React.MutableRefObject).current = node;\n } else if (typeof externalRef === 'function') {\n (externalRef as (instance: HTMLElement) => void)(node);\n }\n }\n },\n [externalRef],\n );\n\n const renderChild = () =>\n cloneElement(children as JSX.Element, {\n ref: handleRef,\n });\n\n const renderPopover = () => {\n if (!isOpen) return null;\n return (\n \n {typeof content === 'function' ? content(popoverState) : content}\n \n );\n };\n\n return (\n <>\n {renderChild()}\n {renderPopover()}\n \n );\n },\n);\n\nexport const Popover = forwardRef((props, ref) => {\n if (typeof window === 'undefined') return props.children;\n return ;\n});\n"]} \ No newline at end of file diff --git a/dist/PopoverPortal.js b/dist/PopoverPortal.js new file mode 100644 index 0000000..e41fe2e --- /dev/null +++ b/dist/PopoverPortal.js @@ -0,0 +1,19 @@ +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.PopoverPortal = void 0; +var react_1 = require("react"); +var react_dom_1 = require("react-dom"); +var PopoverPortal = function (_a) { + var container = _a.container, element = _a.element, scoutElement = _a.scoutElement, children = _a.children; + react_1.useLayoutEffect(function () { + container.appendChild(element); + container.appendChild(scoutElement); + return function () { + container.removeChild(element); + container.removeChild(scoutElement); + }; + }, [container, element]); + return react_dom_1.createPortal(children, element); +}; +exports.PopoverPortal = PopoverPortal; +//# sourceMappingURL=PopoverPortal.js.map \ No newline at end of file diff --git a/dist/PopoverPortal.js.map b/dist/PopoverPortal.js.map new file mode 100644 index 0000000..6e420aa --- /dev/null +++ b/dist/PopoverPortal.js.map @@ -0,0 +1 @@ +{"version":3,"file":"PopoverPortal.js","sourceRoot":"","sources":["../src/PopoverPortal.tsx"],"names":[],"mappings":";;;AAAA,+BAA4C;AAC5C,uCAAyC;AAQzC,IAAM,aAAa,GAA2B,UAAC,EAA8C;QAA5C,SAAS,eAAA,EAAE,OAAO,aAAA,EAAE,YAAY,kBAAA,EAAE,QAAQ,cAAA;IACzF,uBAAe,CAAC;QACd,SAAS,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;QAC/B,SAAS,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC;QACpC,OAAO;YACL,SAAS,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;YAC/B,SAAS,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC;QACtC,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC;IAEzB,OAAO,wBAAY,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;AACzC,CAAC,CAAC;AAEO,sCAAa","sourcesContent":["import { useLayoutEffect, FC } from 'react';\nimport { createPortal } from 'react-dom';\n\ninterface PopoverPortalProps {\n container: Element;\n element: Element;\n scoutElement: Element;\n}\n\nconst PopoverPortal: FC = ({ container, element, scoutElement, children }) => {\n useLayoutEffect(() => {\n container.appendChild(element);\n container.appendChild(scoutElement);\n return () => {\n container.removeChild(element);\n container.removeChild(scoutElement);\n };\n }, [container, element]);\n\n return createPortal(children, element);\n};\n\nexport { PopoverPortal };\n"]} \ No newline at end of file diff --git a/dist/index.d.ts b/dist/index.d.ts new file mode 100644 index 0000000..e22e481 --- /dev/null +++ b/dist/index.d.ts @@ -0,0 +1,118 @@ +import { Ref, MutableRefObject, CSSProperties, FC } from 'react'; + +export interface ContentLocation { + top: number; + left: number; +} + +export interface BoundaryViolations { + top: number; + left: number; + right: number; + bottom: number; +} + +export interface PopoverState { + childRect: ClientRect; + popoverRect: ClientRect; + parentRect: ClientRect; + boundaryRect: ClientRect; + position?: PopoverPosition; + align?: PopoverAlign; + padding: number; + nudgedLeft: number; + nudgedTop: number; + boundaryInset: number; + violations: BoundaryViolations; + hasViolations: boolean; +} + +export type ContentRenderer = (popoverState: PopoverState) => JSX.Element; +export type ContentLocationGetter = (popoverState: PopoverState) => ContentLocation; + +export type PopoverPosition = 'left' | 'right' | 'top' | 'bottom'; +export type PopoverAlign = 'start' | 'center' | 'end'; + +export interface UseArrowContainerProps { + childRect: ClientRect; + popoverRect: ClientRect; + position?: PopoverPosition; + arrowSize: number; + arrowColor: string; +} + +export interface ArrowContainerProps extends UseArrowContainerProps { + children: JSX.Element; + className?: string; + style?: React.CSSProperties; + arrowStyle?: React.CSSProperties; + arrowClassName?: string; +} + +export interface UsePopoverProps { + isOpen: boolean; + childRef: React.MutableRefObject; + positions: PopoverPosition[]; + align: PopoverAlign; + padding: number; + reposition: boolean; + boundaryInset: number; + parentElement?: HTMLElement; + boundaryElement?: HTMLElement; + containerClassName?: string; + contentLocation?: ContentLocationGetter | ContentLocation; + onPositionPopover(popoverState: PopoverState): void; +} + +export interface PopoverProps { + isOpen: boolean; + children: JSX.Element; + content: ContentRenderer | JSX.Element; + positions?: PopoverPosition[]; + align?: PopoverAlign; + padding?: number; + reposition?: boolean; + ref?: Ref; + containerClassName?: string; + parentElement?: HTMLElement; + containerStyle?: Partial; + contentLocation?: ContentLocationGetter | ContentLocation; + boundaryElement?: HTMLElement; + boundaryInset?: number; + boundaryTolerance?: number; + onClickOutside?: (e: MouseEvent) => void; +} + +export interface PositionPopoverProps { + positionIndex?: number; + childRect?: ClientRect; + popoverRect?: ClientRect; + parentRect?: ClientRect; + scoutRect?: ClientRect; + parentRectAdjusted?: ClientRect; + boundaryRect?: ClientRect; +} + +export type PositionPopover = (props?: PositionPopoverProps) => void; + +export type PopoverRefs = { + popoverRef: MutableRefObject; + scoutRef: MutableRefObject; +}; + +export type UsePopoverResult = { + positionPopover: PositionPopover; + popoverRef: MutableRefObject; + scoutRef: MutableRefObject; +}; + +export interface UseArrowContainerResult { + arrowStyle: CSSProperties; + arrowContainerStyle: CSSProperties; +} + +export const usePopover: (props: UsePopoverProps) => UsePopoverResult; +export const useArrowContainer: (props: UseArrowContainerProps) => UseArrowContainerResult; + +export const Popover: FC; +export const ArrowContainer: FC; diff --git a/dist/useArrowContainer.js b/dist/useArrowContainer.js new file mode 100644 index 0000000..7670b22 --- /dev/null +++ b/dist/useArrowContainer.js @@ -0,0 +1,95 @@ +"use strict"; +var __assign = (this && this.__assign) || function () { + __assign = Object.assign || function(t) { + for (var s, i = 1, n = arguments.length; i < n; i++) { + s = arguments[i]; + for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) + t[p] = s[p]; + } + return t; + }; + return __assign.apply(this, arguments); +}; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.useArrowContainer = void 0; +var react_1 = require("react"); +var useArrowContainer = function (_a) { + var childRect = _a.childRect, popoverRect = _a.popoverRect, position = _a.position, arrowSize = _a.arrowSize, arrowColor = _a.arrowColor; + var arrowContainerStyle = react_1.useMemo(function () { + return ({ + padding: arrowSize, + }); + }, [arrowSize]); + var arrowStyle = react_1.useMemo(function () { + return (__assign({ position: 'absolute' }, (function () { + var arrowWidth = arrowSize * 2; + var top = childRect.top - popoverRect.top + childRect.height / 2 - arrowWidth / 2; + var left = childRect.left - popoverRect.left + childRect.width / 2 - arrowWidth / 2; + var lowerBound = arrowSize; + var leftUpperBound = popoverRect.width - arrowSize; + var topUpperBound = popoverRect.height - arrowSize; + left = left < lowerBound ? lowerBound : left; + left = left + arrowWidth > leftUpperBound ? leftUpperBound - arrowWidth : left; + top = top < lowerBound ? lowerBound : top; + top = top + arrowWidth > topUpperBound ? topUpperBound - arrowWidth : top; + top = Number.isNaN(top) ? 0 : top; + left = Number.isNaN(left) ? 0 : left; + switch (position) { + case 'right': + return { + borderTop: arrowSize + "px solid transparent", + borderBottom: arrowSize + "px solid transparent", + borderRight: arrowSize + "px solid " + arrowColor, + left: 0, + top: top, + }; + case 'left': + return { + borderTop: arrowSize + "px solid transparent", + borderBottom: arrowSize + "px solid transparent", + borderLeft: arrowSize + "px solid " + arrowColor, + right: 0, + top: top, + }; + case 'bottom': + return { + borderLeft: arrowSize + "px solid transparent", + borderRight: arrowSize + "px solid transparent", + borderBottom: arrowSize + "px solid " + arrowColor, + top: 0, + left: left, + }; + case 'top': + return { + borderLeft: arrowSize + "px solid transparent", + borderRight: arrowSize + "px solid transparent", + borderTop: arrowSize + "px solid " + arrowColor, + bottom: 0, + left: left, + }; + default: + return { + display: 'hidden', + }; + } + })())); + }, [ + arrowColor, + arrowSize, + childRect.height, + childRect.left, + childRect.top, + childRect.width, + popoverRect.height, + popoverRect.left, + popoverRect.top, + popoverRect.width, + position, + ]); + return { + arrowContainerStyle: arrowContainerStyle, + arrowStyle: arrowStyle, + }; +}; +exports.useArrowContainer = useArrowContainer; +//# sourceMappingURL=useArrowContainer.js.map \ No newline at end of file diff --git a/dist/useArrowContainer.js.map b/dist/useArrowContainer.js.map new file mode 100644 index 0000000..cd690e7 --- /dev/null +++ b/dist/useArrowContainer.js.map @@ -0,0 +1 @@ +{"version":3,"file":"useArrowContainer.js","sourceRoot":"","sources":["../src/useArrowContainer.ts"],"names":[],"mappings":"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","sourcesContent":["import { useMemo } from 'react';\nimport { UseArrowContainerProps } from '.';\n\nexport const useArrowContainer = ({\n childRect,\n popoverRect,\n position,\n arrowSize,\n arrowColor,\n}: UseArrowContainerProps) => {\n const arrowContainerStyle = useMemo(\n () =>\n ({\n padding: arrowSize,\n } as React.CSSProperties),\n [arrowSize],\n );\n\n const arrowStyle = useMemo(\n () =>\n ({\n position: 'absolute',\n ...((): React.CSSProperties => {\n const arrowWidth = arrowSize * 2;\n let top = childRect.top - popoverRect.top + childRect.height / 2 - arrowWidth / 2;\n let left = childRect.left - popoverRect.left + childRect.width / 2 - arrowWidth / 2;\n\n const lowerBound = arrowSize;\n const leftUpperBound = popoverRect.width - arrowSize;\n const topUpperBound = popoverRect.height - arrowSize;\n\n left = left < lowerBound ? lowerBound : left;\n left = left + arrowWidth > leftUpperBound ? leftUpperBound - arrowWidth : left;\n top = top < lowerBound ? lowerBound : top;\n top = top + arrowWidth > topUpperBound ? topUpperBound - arrowWidth : top;\n\n top = Number.isNaN(top) ? 0 : top;\n left = Number.isNaN(left) ? 0 : left;\n\n switch (position) {\n case 'right':\n return {\n borderTop: `${arrowSize}px solid transparent`,\n borderBottom: `${arrowSize}px solid transparent`,\n borderRight: `${arrowSize}px solid ${arrowColor}`,\n left: 0,\n top,\n };\n case 'left':\n return {\n borderTop: `${arrowSize}px solid transparent`,\n borderBottom: `${arrowSize}px solid transparent`,\n borderLeft: `${arrowSize}px solid ${arrowColor}`,\n right: 0,\n top,\n };\n case 'bottom':\n return {\n borderLeft: `${arrowSize}px solid transparent`,\n borderRight: `${arrowSize}px solid transparent`,\n borderBottom: `${arrowSize}px solid ${arrowColor}`,\n top: 0,\n left,\n };\n case 'top':\n return {\n borderLeft: `${arrowSize}px solid transparent`,\n borderRight: `${arrowSize}px solid transparent`,\n borderTop: `${arrowSize}px solid ${arrowColor}`,\n bottom: 0,\n left,\n };\n default:\n return {\n display: 'hidden',\n };\n }\n })(),\n } as React.CSSProperties),\n [\n arrowColor,\n arrowSize,\n childRect.height,\n childRect.left,\n childRect.top,\n childRect.width,\n popoverRect.height,\n popoverRect.left,\n popoverRect.top,\n popoverRect.width,\n position,\n ],\n );\n\n return {\n arrowContainerStyle,\n arrowStyle,\n };\n};\n"]} \ No newline at end of file diff --git a/dist/useElementRef.js b/dist/useElementRef.js new file mode 100644 index 0000000..7e4f5b4 --- /dev/null +++ b/dist/useElementRef.js @@ -0,0 +1,11 @@ +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.useElementRef = void 0; +var react_1 = require("react"); +var util_1 = require("./util"); +var useElementRef = function (containerClassName, containerStyle) { + var element = react_1.useMemo(function () { return util_1.createContainer(containerStyle, containerClassName); }, [containerClassName, containerStyle]); + return react_1.useRef(element); +}; +exports.useElementRef = useElementRef; +//# sourceMappingURL=useElementRef.js.map \ No newline at end of file diff --git a/dist/useElementRef.js.map b/dist/useElementRef.js.map new file mode 100644 index 0000000..74b09af --- /dev/null +++ b/dist/useElementRef.js.map @@ -0,0 +1 @@ +{"version":3,"file":"useElementRef.js","sourceRoot":"","sources":["../src/useElementRef.ts"],"names":[],"mappings":";;;AAAA,+BAAwC;AACxC,+BAAyC;AAElC,IAAM,aAAa,GAAG,UAC3B,kBAA2B,EAC3B,cAA6C;IAE7C,IAAM,OAAO,GAAG,eAAO,CACrB,cAAM,OAAA,sBAAe,CAAC,cAAc,EAAE,kBAAkB,CAAC,EAAnD,CAAmD,EACzD,CAAC,kBAAkB,EAAE,cAAc,CAAC,CACrC,CAAC;IAEF,OAAO,cAAM,CAAiB,OAAO,CAAC,CAAC;AACzC,CAAC,CAAC;AAVW,QAAA,aAAa,iBAUxB","sourcesContent":["import { useRef, useMemo } from 'react';\nimport { createContainer } from './util';\n\nexport const useElementRef = (\n containerClassName?: string,\n containerStyle?: Partial,\n) => {\n const element = useMemo(\n () => createContainer(containerStyle, containerClassName),\n [containerClassName, containerStyle],\n );\n\n return useRef(element);\n};\n"]} \ No newline at end of file diff --git a/dist/useMemoizedArray.js b/dist/useMemoizedArray.js new file mode 100644 index 0000000..99246fc --- /dev/null +++ b/dist/useMemoizedArray.js @@ -0,0 +1,25 @@ +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.useMemoizedArray = void 0; +var react_1 = require("react"); +var useMemoizedArray = function (externalArray) { + var prevArrayRef = react_1.useRef(externalArray); + var array = react_1.useMemo(function () { + if (prevArrayRef.current === externalArray) + return prevArrayRef.current; + if (prevArrayRef.current.length !== externalArray.length) { + prevArrayRef.current = externalArray; + return externalArray; + } + for (var i = 0; i < externalArray.length; i += 1) { + if (externalArray[i] !== prevArrayRef.current[i]) { + prevArrayRef.current = externalArray; + return externalArray; + } + } + return prevArrayRef.current; + }, [externalArray]); + return array; +}; +exports.useMemoizedArray = useMemoizedArray; +//# sourceMappingURL=useMemoizedArray.js.map \ No newline at end of file diff --git a/dist/useMemoizedArray.js.map b/dist/useMemoizedArray.js.map new file mode 100644 index 0000000..3436979 --- /dev/null +++ b/dist/useMemoizedArray.js.map @@ -0,0 +1 @@ +{"version":3,"file":"useMemoizedArray.js","sourceRoot":"","sources":["../src/useMemoizedArray.ts"],"names":[],"mappings":";;;AAAA,+BAAwC;AAEjC,IAAM,gBAAgB,GAAG,UAA4B,aAAkB;IAC5E,IAAM,YAAY,GAAG,cAAM,CAAC,aAAa,CAAC,CAAC;IAC3C,IAAM,KAAK,GAAG,eAAO,CAAC;QACpB,IAAI,YAAY,CAAC,OAAO,KAAK,aAAa;YAAE,OAAO,YAAY,CAAC,OAAO,CAAC;QAExE,IAAI,YAAY,CAAC,OAAO,CAAC,MAAM,KAAK,aAAa,CAAC,MAAM,EAAE;YACxD,YAAY,CAAC,OAAO,GAAG,aAAa,CAAC;YACrC,OAAO,aAAa,CAAC;SACtB;QAED,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,aAAa,CAAC,MAAM,EAAE,CAAC,IAAI,CAAC,EAAE;YAChD,IAAI,aAAa,CAAC,CAAC,CAAC,KAAK,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE;gBAChD,YAAY,CAAC,OAAO,GAAG,aAAa,CAAC;gBACrC,OAAO,aAAa,CAAC;aACtB;SACF;QAED,OAAO,YAAY,CAAC,OAAO,CAAC;IAC9B,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,OAAO,KAAK,CAAC;AACf,CAAC,CAAC;AArBW,QAAA,gBAAgB,oBAqB3B","sourcesContent":["import { useRef, useMemo } from 'react';\n\nexport const useMemoizedArray = (externalArray: T[]) => {\n const prevArrayRef = useRef(externalArray);\n const array = useMemo(() => {\n if (prevArrayRef.current === externalArray) return prevArrayRef.current;\n\n if (prevArrayRef.current.length !== externalArray.length) {\n prevArrayRef.current = externalArray;\n return externalArray;\n }\n\n for (let i = 0; i < externalArray.length; i += 1) {\n if (externalArray[i] !== prevArrayRef.current[i]) {\n prevArrayRef.current = externalArray;\n return externalArray;\n }\n }\n\n return prevArrayRef.current;\n }, [externalArray]);\n\n return array;\n};\n"]} \ No newline at end of file diff --git a/dist/usePopover.js b/dist/usePopover.js new file mode 100644 index 0000000..528157e --- /dev/null +++ b/dist/usePopover.js @@ -0,0 +1,153 @@ +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.usePopover = void 0; +var react_1 = require("react"); +var util_1 = require("./util"); +var useElementRef_1 = require("./useElementRef"); +var usePopover = function (_a) { + var isOpen = _a.isOpen, childRef = _a.childRef, positions = _a.positions, containerClassName = _a.containerClassName, parentElement = _a.parentElement, contentLocation = _a.contentLocation, align = _a.align, padding = _a.padding, reposition = _a.reposition, boundaryInset = _a.boundaryInset, boundaryElement = _a.boundaryElement, onPositionPopover = _a.onPositionPopover; + var popoverRef = useElementRef_1.useElementRef(containerClassName, { + position: 'fixed', + overflow: 'visible', + top: '0px', + left: '0px', + }); + var scoutRef = useElementRef_1.useElementRef('react-tiny-popover-scout', { + position: 'fixed', + top: '0px', + left: '0px', + width: '0px', + height: '0px', + visibility: 'hidden', + }); + var positionPopover = react_1.useCallback(function (_a) { + var _b, _c; + var _d = _a === void 0 ? {} : _a, _e = _d.positionIndex, positionIndex = _e === void 0 ? 0 : _e, _f = _d.parentRect, parentRect = _f === void 0 ? parentElement.getBoundingClientRect() : _f, _g = _d.childRect, childRect = _g === void 0 ? (_b = childRef === null || childRef === void 0 ? void 0 : childRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect() : _g, _h = _d.scoutRect, scoutRect = _h === void 0 ? (_c = scoutRef === null || scoutRef === void 0 ? void 0 : scoutRef.current) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect() : _h, _j = _d.popoverRect, popoverRect = _j === void 0 ? popoverRef.current.getBoundingClientRect() : _j, _k = _d.boundaryRect, boundaryRect = _k === void 0 ? boundaryElement === parentElement + ? parentRect + : boundaryElement.getBoundingClientRect() : _k; + if (!childRect || !parentRect || !isOpen) { + return; + } + if (contentLocation) { + var _l = typeof contentLocation === 'function' + ? contentLocation({ + childRect: childRect, + popoverRect: popoverRect, + parentRect: parentRect, + boundaryRect: boundaryRect, + padding: padding, + nudgedTop: 0, + nudgedLeft: 0, + boundaryInset: boundaryInset, + violations: util_1.Constants.EMPTY_CLIENT_RECT, + hasViolations: false, + }) + : contentLocation, inputTop = _l.top, inputLeft = _l.left; + var left_1 = parentRect.left + inputLeft; + var top_1 = parentRect.top + inputTop; + popoverRef.current.style.transform = "translate(" + (left_1 - scoutRect.left) + "px, " + (top_1 - scoutRect.top) + "px)"; + onPositionPopover({ + childRect: childRect, + popoverRect: popoverRect, + parentRect: parentRect, + boundaryRect: boundaryRect, + padding: padding, + nudgedTop: 0, + nudgedLeft: 0, + boundaryInset: boundaryInset, + violations: util_1.Constants.EMPTY_CLIENT_RECT, + hasViolations: false, + }); + return; + } + var isExhausted = positionIndex === positions.length; + var position = isExhausted ? positions[0] : positions[positionIndex]; + var _m = util_1.getNewPopoverRect({ + childRect: childRect, + popoverRect: popoverRect, + boundaryRect: boundaryRect, + position: position, + align: align, + padding: padding, + reposition: reposition, + }, boundaryInset), rect = _m.rect, boundaryViolation = _m.boundaryViolation; + if (boundaryViolation && reposition && !isExhausted) { + positionPopover({ + positionIndex: positionIndex + 1, + childRect: childRect, + popoverRect: popoverRect, + parentRect: parentRect, + boundaryRect: boundaryRect, + }); + return; + } + var top = rect.top, left = rect.left, width = rect.width, height = rect.height; + var shouldNudge = reposition && !isExhausted; + var _o = util_1.getNudgedPopoverRect(rect, boundaryRect, boundaryInset), nudgedLeft = _o.left, nudgedTop = _o.top; + var finalTop = top; + var finalLeft = left; + if (shouldNudge) { + finalTop = nudgedTop; + finalLeft = nudgedLeft; + } + if (window.scrollY > 0) { + finalTop = rect.top; + } + popoverRef.current.style.transform = "translate(" + (finalLeft - scoutRect.left) + "px, " + (finalTop - scoutRect.top) + "px)"; + var potentialViolations = { + top: boundaryRect.top + boundaryInset - finalTop, + left: boundaryRect.left + boundaryInset - finalLeft, + right: finalLeft + width - boundaryRect.right + boundaryInset, + bottom: finalTop + height - boundaryRect.bottom + boundaryInset, + }; + onPositionPopover({ + childRect: childRect, + popoverRect: { + top: finalTop, + left: finalLeft, + width: width, + height: height, + right: finalLeft + width, + bottom: finalTop + height, + }, + parentRect: parentRect, + boundaryRect: boundaryRect, + position: position, + align: align, + padding: padding, + nudgedTop: nudgedTop - top, + nudgedLeft: nudgedLeft - left, + boundaryInset: boundaryInset, + violations: { + top: potentialViolations.top <= 0 ? 0 : potentialViolations.top, + left: potentialViolations.left <= 0 ? 0 : potentialViolations.left, + right: potentialViolations.right <= 0 ? 0 : potentialViolations.right, + bottom: potentialViolations.bottom <= 0 ? 0 : potentialViolations.bottom, + }, + hasViolations: potentialViolations.top > 0 || + potentialViolations.left > 0 || + potentialViolations.right > 0 || + potentialViolations.bottom > 0, + }); + }, [ + parentElement, + childRef, + popoverRef, + boundaryElement, + contentLocation, + positions, + align, + padding, + reposition, + boundaryInset, + onPositionPopover, + isOpen, + ]); + return { + positionPopover: positionPopover, + popoverRef: popoverRef, + scoutRef: scoutRef, + }; +}; +exports.usePopover = usePopover; +//# sourceMappingURL=usePopover.js.map \ No newline at end of file diff --git a/dist/usePopover.js.map b/dist/usePopover.js.map new file mode 100644 index 0000000..00b63d2 --- /dev/null +++ b/dist/usePopover.js.map @@ -0,0 +1 @@ +{"version":3,"file":"usePopover.js","sourceRoot":"","sources":["../src/usePopover.ts"],"names":[],"mappings":"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","sourcesContent":["import { useCallback } from 'react';\nimport { BoundaryViolations, PositionPopover, UsePopoverProps, UsePopoverResult } from '.';\nimport { Constants, getNewPopoverRect, getNudgedPopoverRect } from './util';\nimport { useElementRef } from './useElementRef';\n\nexport const usePopover = ({\n isOpen,\n childRef,\n positions,\n containerClassName,\n parentElement,\n contentLocation,\n align,\n padding,\n reposition,\n boundaryInset,\n boundaryElement,\n onPositionPopover,\n}: UsePopoverProps): UsePopoverResult => {\n const popoverRef = useElementRef(containerClassName, {\n position: 'fixed',\n overflow: 'visible',\n top: '0px',\n left: '0px',\n });\n\n const scoutRef = useElementRef('react-tiny-popover-scout', {\n position: 'fixed',\n top: '0px',\n left: '0px',\n width: '0px',\n height: '0px',\n visibility: 'hidden',\n });\n\n const positionPopover = useCallback(\n ({\n positionIndex = 0,\n parentRect = parentElement.getBoundingClientRect(),\n childRect = childRef?.current?.getBoundingClientRect(),\n scoutRect = scoutRef?.current?.getBoundingClientRect(),\n popoverRect = popoverRef.current.getBoundingClientRect(),\n boundaryRect = boundaryElement === parentElement\n ? parentRect\n : boundaryElement.getBoundingClientRect(),\n } = {}) => {\n if (!childRect || !parentRect || !isOpen) {\n return;\n }\n\n if (contentLocation) {\n const { top: inputTop, left: inputLeft } =\n typeof contentLocation === 'function'\n ? contentLocation({\n childRect,\n popoverRect,\n parentRect,\n boundaryRect,\n padding,\n nudgedTop: 0,\n nudgedLeft: 0,\n boundaryInset,\n violations: Constants.EMPTY_CLIENT_RECT,\n hasViolations: false,\n })\n : contentLocation;\n\n const left = parentRect.left + inputLeft;\n const top = parentRect.top + inputTop;\n\n popoverRef.current.style.transform = `translate(${left - scoutRect.left}px, ${\n top - scoutRect.top\n }px)`;\n\n onPositionPopover({\n childRect,\n popoverRect,\n parentRect,\n boundaryRect,\n padding,\n nudgedTop: 0,\n nudgedLeft: 0,\n boundaryInset,\n violations: Constants.EMPTY_CLIENT_RECT,\n hasViolations: false,\n });\n\n return;\n }\n\n const isExhausted = positionIndex === positions.length;\n const position = isExhausted ? positions[0] : positions[positionIndex];\n\n const { rect, boundaryViolation } = getNewPopoverRect(\n {\n childRect,\n popoverRect,\n boundaryRect,\n position,\n align,\n padding,\n reposition,\n },\n boundaryInset,\n );\n\n if (boundaryViolation && reposition && !isExhausted) {\n positionPopover({\n positionIndex: positionIndex + 1,\n childRect,\n popoverRect,\n parentRect,\n boundaryRect,\n });\n return;\n }\n\n const { top, left, width, height } = rect;\n const shouldNudge = reposition && !isExhausted;\n const { left: nudgedLeft, top: nudgedTop } = getNudgedPopoverRect(\n rect,\n boundaryRect,\n boundaryInset,\n );\n\n let finalTop = top;\n let finalLeft = left;\n\n if (shouldNudge) {\n finalTop = nudgedTop;\n finalLeft = nudgedLeft;\n }\n\n if (window.scrollY > 0) {\n finalTop = rect.top;\n }\n popoverRef.current.style.transform = `translate(${finalLeft - scoutRect.left}px, ${\n finalTop - scoutRect.top\n }px)`;\n\n const potentialViolations: BoundaryViolations = {\n top: boundaryRect.top + boundaryInset - finalTop,\n left: boundaryRect.left + boundaryInset - finalLeft,\n right: finalLeft + width - boundaryRect.right + boundaryInset,\n bottom: finalTop + height - boundaryRect.bottom + boundaryInset,\n };\n\n onPositionPopover({\n childRect,\n popoverRect: {\n top: finalTop,\n left: finalLeft,\n width,\n height,\n right: finalLeft + width,\n bottom: finalTop + height,\n },\n parentRect,\n boundaryRect,\n position,\n align,\n padding,\n nudgedTop: nudgedTop - top,\n nudgedLeft: nudgedLeft - left,\n boundaryInset,\n violations: {\n top: potentialViolations.top <= 0 ? 0 : potentialViolations.top,\n left: potentialViolations.left <= 0 ? 0 : potentialViolations.left,\n right: potentialViolations.right <= 0 ? 0 : potentialViolations.right,\n bottom: potentialViolations.bottom <= 0 ? 0 : potentialViolations.bottom,\n },\n hasViolations:\n potentialViolations.top > 0 ||\n potentialViolations.left > 0 ||\n potentialViolations.right > 0 ||\n potentialViolations.bottom > 0,\n });\n },\n [\n parentElement,\n childRef,\n popoverRef,\n boundaryElement,\n contentLocation,\n positions,\n align,\n padding,\n reposition,\n boundaryInset,\n onPositionPopover,\n isOpen,\n ],\n );\n\n return {\n positionPopover,\n popoverRef,\n scoutRef,\n };\n};\n"]} \ No newline at end of file diff --git a/dist/util.js b/dist/util.js new file mode 100644 index 0000000..b02a9af --- /dev/null +++ b/dist/util.js @@ -0,0 +1,118 @@ +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.getNudgedPopoverRect = exports.getNewPopoverRect = exports.popoverRectForPosition = exports.createContainer = exports.rectsAreEqual = exports.Constants = void 0; +exports.Constants = { + DEFAULT_ALIGN: 'center', + DEFAULT_POSITIONS: ['top', 'left', 'right', 'bottom'], + EMPTY_CLIENT_RECT: { + top: 0, + left: 0, + bottom: 0, + height: 0, + right: 0, + width: 0, + }, +}; +var rectsAreEqual = function (rectA, rectB) { + return rectA === rectB || + ((rectA === null || rectA === void 0 ? void 0 : rectA.bottom) === (rectB === null || rectB === void 0 ? void 0 : rectB.bottom) && + (rectA === null || rectA === void 0 ? void 0 : rectA.height) === (rectB === null || rectB === void 0 ? void 0 : rectB.height) && + (rectA === null || rectA === void 0 ? void 0 : rectA.left) === (rectB === null || rectB === void 0 ? void 0 : rectB.left) && + (rectA === null || rectA === void 0 ? void 0 : rectA.right) === (rectB === null || rectB === void 0 ? void 0 : rectB.right) && + (rectA === null || rectA === void 0 ? void 0 : rectA.top) === (rectB === null || rectB === void 0 ? void 0 : rectB.top) && + (rectA === null || rectA === void 0 ? void 0 : rectA.width) === (rectB === null || rectB === void 0 ? void 0 : rectB.width)); +}; +exports.rectsAreEqual = rectsAreEqual; +var createContainer = function (containerStyle, containerClassName) { + var container = window.document.createElement('div'); + if (containerClassName) + container.className = containerClassName; + Object.assign(container.style, containerStyle); + return container; +}; +exports.createContainer = createContainer; +var popoverRectForPosition = function (position, childRect, popoverRect, padding, align) { + var targetMidX = childRect.left + childRect.width / 2; + var targetMidY = childRect.top + childRect.height / 2; + var width = popoverRect.width, height = popoverRect.height; + var top; + var left; + switch (position) { + case 'left': + top = targetMidY - height / 2; + left = childRect.left - padding - width; + if (align === 'start') { + top = childRect.top; + } + if (align === 'end') { + top = childRect.bottom - height; + } + break; + case 'bottom': + top = childRect.bottom + padding; + left = targetMidX - width / 2; + if (align === 'start') { + left = childRect.left; + } + if (align === 'end') { + left = childRect.right - width; + } + break; + case 'right': + top = targetMidY - height / 2; + left = childRect.right + padding; + if (align === 'start') { + top = childRect.top; + } + if (align === 'end') { + top = childRect.bottom - height; + } + break; + default: + top = childRect.top - height - padding; + left = targetMidX - width / 2; + if (align === 'start') { + left = childRect.left; + } + if (align === 'end') { + left = childRect.right - width; + } + break; + } + return { top: top, left: left, width: width, height: height, right: left + width, bottom: top + height }; +}; +exports.popoverRectForPosition = popoverRectForPosition; +var getNewPopoverRect = function (_a, boundaryInset) { + var position = _a.position, align = _a.align, childRect = _a.childRect, popoverRect = _a.popoverRect, boundaryRect = _a.boundaryRect, padding = _a.padding, reposition = _a.reposition; + var rect = exports.popoverRectForPosition(position, childRect, popoverRect, padding, align); + var boundaryViolation = reposition && + ((position === 'top' && rect.top < boundaryRect.top + boundaryInset) || + (position === 'left' && rect.left < boundaryRect.left + boundaryInset) || + (position === 'right' && rect.right > boundaryRect.right - boundaryInset) || + (position === 'bottom' && rect.bottom > boundaryRect.bottom - boundaryInset)); + return { + rect: rect, + boundaryViolation: boundaryViolation, + }; +}; +exports.getNewPopoverRect = getNewPopoverRect; +var getNudgedPopoverRect = function (popoverRect, boundaryRect, boundaryInset) { + var topBoundary = boundaryRect.top + boundaryInset; + var leftBoundary = boundaryRect.left + boundaryInset; + var rightBoundary = boundaryRect.right - boundaryInset; + var bottomBoundary = boundaryRect.bottom - boundaryInset; + var top = popoverRect.top < topBoundary ? topBoundary : popoverRect.top; + top = top + popoverRect.height > bottomBoundary ? bottomBoundary - popoverRect.height : top; + var left = popoverRect.left < leftBoundary ? leftBoundary : popoverRect.left; + left = left + popoverRect.width > rightBoundary ? rightBoundary - popoverRect.width : left; + return { + top: top, + left: left, + width: popoverRect.width, + height: popoverRect.height, + right: left + popoverRect.width, + bottom: top + popoverRect.height, + }; +}; +exports.getNudgedPopoverRect = getNudgedPopoverRect; +//# sourceMappingURL=util.js.map \ No newline at end of file diff --git a/dist/util.js.map b/dist/util.js.map new file mode 100644 index 0000000..02565ee --- /dev/null +++ b/dist/util.js.map @@ -0,0 +1 @@ +{"version":3,"file":"util.js","sourceRoot":"","sources":["../src/util.ts"],"names":[],"mappings":"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","sourcesContent":["import { PopoverPosition, PopoverState, PopoverAlign } from './index';\n\nexport const Constants = {\n DEFAULT_ALIGN: 'center' as PopoverAlign,\n DEFAULT_POSITIONS: ['top', 'left', 'right', 'bottom'] as PopoverPosition[],\n EMPTY_CLIENT_RECT: {\n top: 0,\n left: 0,\n bottom: 0,\n height: 0,\n right: 0,\n width: 0,\n } as ClientRect,\n} as const;\n\nexport const rectsAreEqual = (rectA: ClientRect, rectB: ClientRect) =>\n rectA === rectB ||\n (rectA?.bottom === rectB?.bottom &&\n rectA?.height === rectB?.height &&\n rectA?.left === rectB?.left &&\n rectA?.right === rectB?.right &&\n rectA?.top === rectB?.top &&\n rectA?.width === rectB?.width);\n\nexport const createContainer = (\n containerStyle?: Partial,\n containerClassName?: string,\n) => {\n const container = window.document.createElement('div');\n if (containerClassName) container.className = containerClassName;\n Object.assign(container.style, containerStyle);\n return container;\n};\n\nexport const popoverRectForPosition = (\n position: PopoverPosition,\n childRect: ClientRect,\n popoverRect: ClientRect,\n padding: number,\n align: PopoverAlign,\n): ClientRect => {\n const targetMidX = childRect.left + childRect.width / 2;\n const targetMidY = childRect.top + childRect.height / 2;\n const { width, height } = popoverRect;\n let top: number;\n let left: number;\n\n switch (position) {\n case 'left':\n top = targetMidY - height / 2;\n left = childRect.left - padding - width;\n if (align === 'start') {\n top = childRect.top;\n }\n if (align === 'end') {\n top = childRect.bottom - height;\n }\n break;\n case 'bottom':\n top = childRect.bottom + padding;\n left = targetMidX - width / 2;\n if (align === 'start') {\n left = childRect.left;\n }\n if (align === 'end') {\n left = childRect.right - width;\n }\n break;\n case 'right':\n top = targetMidY - height / 2;\n left = childRect.right + padding;\n if (align === 'start') {\n top = childRect.top;\n }\n if (align === 'end') {\n top = childRect.bottom - height;\n }\n break;\n default:\n top = childRect.top - height - padding;\n left = targetMidX - width / 2;\n if (align === 'start') {\n left = childRect.left;\n }\n if (align === 'end') {\n left = childRect.right - width;\n }\n break;\n }\n\n return { top, left, width, height, right: left + width, bottom: top + height };\n};\n\ninterface GetNewPopoverRectProps {\n position: PopoverPosition;\n reposition: boolean;\n align: PopoverAlign;\n childRect: ClientRect;\n popoverRect: ClientRect;\n boundaryRect: ClientRect;\n padding: number;\n}\n\nexport const getNewPopoverRect = (\n {\n position,\n align,\n childRect,\n popoverRect,\n boundaryRect,\n padding,\n reposition,\n }: GetNewPopoverRectProps,\n boundaryInset: number,\n) => {\n const rect = popoverRectForPosition(position, childRect, popoverRect, padding, align);\n\n const boundaryViolation =\n reposition &&\n ((position === 'top' && rect.top < boundaryRect.top + boundaryInset) ||\n (position === 'left' && rect.left < boundaryRect.left + boundaryInset) ||\n (position === 'right' && rect.right > boundaryRect.right - boundaryInset) ||\n (position === 'bottom' && rect.bottom > boundaryRect.bottom - boundaryInset));\n\n return {\n rect,\n boundaryViolation,\n } as const;\n};\n\nexport const getNudgedPopoverRect = (\n popoverRect: ClientRect,\n boundaryRect: ClientRect,\n boundaryInset: number,\n): ClientRect => {\n const topBoundary = boundaryRect.top + boundaryInset;\n const leftBoundary = boundaryRect.left + boundaryInset;\n const rightBoundary = boundaryRect.right - boundaryInset;\n const bottomBoundary = boundaryRect.bottom - boundaryInset;\n\n let top = popoverRect.top < topBoundary ? topBoundary : popoverRect.top;\n top = top + popoverRect.height > bottomBoundary ? bottomBoundary - popoverRect.height : top;\n let left = popoverRect.left < leftBoundary ? leftBoundary : popoverRect.left;\n left = left + popoverRect.width > rightBoundary ? rightBoundary - popoverRect.width : left;\n\n return {\n top,\n left,\n width: popoverRect.width,\n height: popoverRect.height,\n right: left + popoverRect.width,\n bottom: top + popoverRect.height,\n };\n};\n"]} \ No newline at end of file From 2360cb48f7e61b86eddd39a4626d328f8567b053 Mon Sep 17 00:00:00 2001 From: caiofct Date: Wed, 27 Jul 2022 13:57:36 -0300 Subject: [PATCH 3/3] Ignore dist directory --- .gitignore | 1 + dist/ArrowContainer.js | 32 ------ dist/ArrowContainer.js.map | 1 - dist/Popover.js | 186 ---------------------------------- dist/Popover.js.map | 1 - dist/PopoverPortal.js | 19 ---- dist/PopoverPortal.js.map | 1 - dist/index.d.ts | 118 --------------------- dist/useArrowContainer.js | 95 ----------------- dist/useArrowContainer.js.map | 1 - dist/useElementRef.js | 11 -- dist/useElementRef.js.map | 1 - dist/useMemoizedArray.js | 25 ----- dist/useMemoizedArray.js.map | 1 - dist/usePopover.js | 153 ---------------------------- dist/usePopover.js.map | 1 - dist/util.js | 118 --------------------- dist/util.js.map | 1 - 18 files changed, 1 insertion(+), 765 deletions(-) delete mode 100644 dist/ArrowContainer.js delete mode 100644 dist/ArrowContainer.js.map delete mode 100644 dist/Popover.js delete mode 100644 dist/Popover.js.map delete mode 100644 dist/PopoverPortal.js delete mode 100644 dist/PopoverPortal.js.map delete mode 100644 dist/index.d.ts delete mode 100644 dist/useArrowContainer.js delete mode 100644 dist/useArrowContainer.js.map delete mode 100644 dist/useElementRef.js delete mode 100644 dist/useElementRef.js.map delete mode 100644 dist/useMemoizedArray.js delete mode 100644 dist/useMemoizedArray.js.map delete mode 100644 dist/usePopover.js delete mode 100644 dist/usePopover.js.map delete mode 100644 dist/util.js delete mode 100644 dist/util.js.map diff --git a/.gitignore b/.gitignore index d357a9b..18d94ba 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,5 @@ node_modules/ +/dist/ npm-debug.log .idea **/.DS_Store diff --git a/dist/ArrowContainer.js b/dist/ArrowContainer.js deleted file mode 100644 index 8ed5a86..0000000 --- a/dist/ArrowContainer.js +++ /dev/null @@ -1,32 +0,0 @@ -"use strict"; -var __assign = (this && this.__assign) || function () { - __assign = Object.assign || function(t) { - for (var s, i = 1, n = arguments.length; i < n; i++) { - s = arguments[i]; - for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) - t[p] = s[p]; - } - return t; - }; - return __assign.apply(this, arguments); -}; -Object.defineProperty(exports, "__esModule", { value: true }); -exports.ArrowContainer = void 0; -var jsx_runtime_1 = require("react/jsx-runtime"); -var react_1 = require("react"); -var useArrowContainer_1 = require("./useArrowContainer"); -var ArrowContainer = function (_a) { - var childRect = _a.childRect, popoverRect = _a.popoverRect, position = _a.position, arrowColor = _a.arrowColor, arrowSize = _a.arrowSize, arrowClassName = _a.arrowClassName, externalArrowStyle = _a.arrowStyle, className = _a.className, children = _a.children, externalArrowContainerStyle = _a.style; - var _b = useArrowContainer_1.useArrowContainer({ - childRect: childRect, - popoverRect: popoverRect, - position: position, - arrowColor: arrowColor, - arrowSize: arrowSize, - }), arrowContainerStyle = _b.arrowContainerStyle, arrowStyle = _b.arrowStyle; - var mergedContainerStyle = react_1.useMemo(function () { return (__assign(__assign({}, arrowContainerStyle), externalArrowContainerStyle)); }, [arrowContainerStyle, externalArrowContainerStyle]); - var mergedArrowStyle = react_1.useMemo(function () { return (__assign(__assign({}, arrowStyle), externalArrowStyle)); }, [arrowStyle, externalArrowStyle]); - return (jsx_runtime_1.jsxs("div", __assign({ className: className, style: mergedContainerStyle }, { children: [jsx_runtime_1.jsx("div", { style: mergedArrowStyle, className: arrowClassName }, void 0), children] }), void 0)); -}; -exports.ArrowContainer = ArrowContainer; -//# sourceMappingURL=ArrowContainer.js.map \ No newline at end of file diff --git a/dist/ArrowContainer.js.map b/dist/ArrowContainer.js.map deleted file mode 100644 index ae94178..0000000 --- a/dist/ArrowContainer.js.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"ArrowContainer.js","sourceRoot":"","sources":["../src/ArrowContainer.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,+BAAoC;AAEpC,yDAAwD;AAEjD,IAAM,cAAc,GAA4B,UAAC,EAWvD;QAVC,SAAS,eAAA,EACT,WAAW,iBAAA,EACX,QAAQ,cAAA,EACR,UAAU,gBAAA,EACV,SAAS,eAAA,EACT,cAAc,oBAAA,EACF,kBAAkB,gBAAA,EAC9B,SAAS,eAAA,EACT,QAAQ,cAAA,EACD,2BAA2B,WAAA;IAE5B,IAAA,KAAsC,qCAAiB,CAAC;QAC5D,SAAS,WAAA;QACT,WAAW,aAAA;QACX,QAAQ,UAAA;QACR,UAAU,YAAA;QACV,SAAS,WAAA;KACV,CAAC,EANM,mBAAmB,yBAAA,EAAE,UAAU,gBAMrC,CAAC;IAEH,IAAM,oBAAoB,GAAG,eAAO,CAClC,cAAM,OAAA,uBACD,mBAAmB,GACnB,2BAA2B,EAC9B,EAHI,CAGJ,EACF,CAAC,mBAAmB,EAAE,2BAA2B,CAAC,CACnD,CAAC;IAEF,IAAM,gBAAgB,GAAG,eAAO,CAC9B,cAAM,OAAA,uBACD,UAAU,GACV,kBAAkB,EACrB,EAHI,CAGJ,EACF,CAAC,UAAU,EAAE,kBAAkB,CAAC,CACjC,CAAC;IAEF,OAAO,CACL,qCAAK,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,oBAAoB,iBACpD,2BAAK,KAAK,EAAE,gBAAgB,EAAE,SAAS,EAAE,cAAc,WAAI,EAC1D,QAAQ,aACL,CACP,CAAC;AACJ,CAAC,CAAC;AA1CW,QAAA,cAAc,kBA0CzB","sourcesContent":["import { useMemo, FC } from 'react';\nimport { ArrowContainerProps } from '.';\nimport { useArrowContainer } from './useArrowContainer';\n\nexport const ArrowContainer: FC = ({\n childRect,\n popoverRect,\n position,\n arrowColor,\n arrowSize,\n arrowClassName,\n arrowStyle: externalArrowStyle,\n className,\n children,\n style: externalArrowContainerStyle,\n}) => {\n const { arrowContainerStyle, arrowStyle } = useArrowContainer({\n childRect,\n popoverRect,\n position,\n arrowColor,\n arrowSize,\n });\n\n const mergedContainerStyle = useMemo(\n () => ({\n ...arrowContainerStyle,\n ...externalArrowContainerStyle,\n }),\n [arrowContainerStyle, externalArrowContainerStyle],\n );\n\n const mergedArrowStyle = useMemo(\n () => ({\n ...arrowStyle,\n ...externalArrowStyle,\n }),\n [arrowStyle, externalArrowStyle],\n );\n\n return (\n
\n
\n {children}\n
\n );\n};\n"]} \ No newline at end of file diff --git a/dist/Popover.js b/dist/Popover.js deleted file mode 100644 index 29e1880..0000000 --- a/dist/Popover.js +++ /dev/null @@ -1,186 +0,0 @@ -"use strict"; -var __assign = (this && this.__assign) || function () { - __assign = Object.assign || function(t) { - for (var s, i = 1, n = arguments.length; i < n; i++) { - s = arguments[i]; - for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) - t[p] = s[p]; - } - return t; - }; - return __assign.apply(this, arguments); -}; -Object.defineProperty(exports, "__esModule", { value: true }); -exports.Popover = exports.usePopover = exports.ArrowContainer = exports.useArrowContainer = void 0; -var jsx_runtime_1 = require("react/jsx-runtime"); -var react_1 = require("react"); -var PopoverPortal_1 = require("./PopoverPortal"); -var util_1 = require("./util"); -var usePopover_1 = require("./usePopover"); -Object.defineProperty(exports, "usePopover", { enumerable: true, get: function () { return usePopover_1.usePopover; } }); -var useMemoizedArray_1 = require("./useMemoizedArray"); -var useArrowContainer_1 = require("./useArrowContainer"); -Object.defineProperty(exports, "useArrowContainer", { enumerable: true, get: function () { return useArrowContainer_1.useArrowContainer; } }); -var ArrowContainer_1 = require("./ArrowContainer"); -Object.defineProperty(exports, "ArrowContainer", { enumerable: true, get: function () { return ArrowContainer_1.ArrowContainer; } }); -var PopoverInternal = react_1.forwardRef(function (_a, externalRef) { - var isOpen = _a.isOpen, children = _a.children, content = _a.content, _b = _a.positions, externalPositions = _b === void 0 ? util_1.Constants.DEFAULT_POSITIONS : _b, _c = _a.align, align = _c === void 0 ? util_1.Constants.DEFAULT_ALIGN : _c, _d = _a.padding, padding = _d === void 0 ? 0 : _d, _e = _a.reposition, reposition = _e === void 0 ? true : _e, _f = _a.parentElement, parentElement = _f === void 0 ? window.document.body : _f, _g = _a.boundaryElement, boundaryElement = _g === void 0 ? parentElement : _g, _h = _a.containerClassName, containerClassName = _h === void 0 ? 'react-tiny-popover-container' : _h, containerStyle = _a.containerStyle, contentLocation = _a.contentLocation, _j = _a.boundaryInset, boundaryInset = _j === void 0 ? 0 : _j, onClickOutside = _a.onClickOutside; - var positions = useMemoizedArray_1.useMemoizedArray(externalPositions); - // TODO: factor prevs out into a custom prevs hook - var prevIsOpen = react_1.useRef(false); - var prevPositions = react_1.useRef(); - var prevContentLocation = react_1.useRef(); - var prevReposition = react_1.useRef(reposition); - var childRef = react_1.useRef(); - var _k = react_1.useState({ - align: align, - nudgedLeft: 0, - nudgedTop: 0, - position: positions[0], - padding: padding, - childRect: util_1.Constants.EMPTY_CLIENT_RECT, - popoverRect: util_1.Constants.EMPTY_CLIENT_RECT, - parentRect: util_1.Constants.EMPTY_CLIENT_RECT, - boundaryRect: util_1.Constants.EMPTY_CLIENT_RECT, - boundaryInset: boundaryInset, - violations: util_1.Constants.EMPTY_CLIENT_RECT, - hasViolations: false, - }), popoverState = _k[0], setPopoverState = _k[1]; - var onPositionPopover = react_1.useCallback(function (popoverState) { return setPopoverState(popoverState); }, []); - var _l = usePopover_1.usePopover({ - isOpen: isOpen, - childRef: childRef, - containerClassName: containerClassName, - parentElement: parentElement, - boundaryElement: boundaryElement, - contentLocation: contentLocation, - positions: positions, - align: align, - padding: padding, - boundaryInset: boundaryInset, - reposition: reposition, - onPositionPopover: onPositionPopover, - }), positionPopover = _l.positionPopover, popoverRef = _l.popoverRef, scoutRef = _l.scoutRef; - react_1.useLayoutEffect(function () { - var shouldUpdate = true; - var updatePopover = function () { - var _a, _b; - if (isOpen && shouldUpdate) { - var childRect = (_a = childRef === null || childRef === void 0 ? void 0 : childRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect(); - var popoverRect = (_b = popoverRef === null || popoverRef === void 0 ? void 0 : popoverRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect(); - if (childRect != null && - popoverRect != null && - (!util_1.rectsAreEqual(childRect, { - top: popoverState.childRect.top, - left: popoverState.childRect.left, - width: popoverState.childRect.width, - height: popoverState.childRect.height, - bottom: popoverState.childRect.top + popoverState.childRect.height, - right: popoverState.childRect.left + popoverState.childRect.width, - }) || - popoverRect.width !== popoverState.popoverRect.width || - popoverRect.height !== popoverState.popoverRect.height || - popoverState.padding !== padding || - popoverState.align !== align || - positions !== prevPositions.current || - contentLocation !== prevContentLocation.current || - reposition !== prevReposition.current)) { - positionPopover(); - } - // TODO: factor prev checks out into the custom prevs hook - if (positions !== prevPositions.current) { - prevPositions.current = positions; - } - if (contentLocation !== prevContentLocation.current) { - prevContentLocation.current = contentLocation; - } - if (reposition !== prevReposition.current) { - prevReposition.current = reposition; - } - if (shouldUpdate) { - window.requestAnimationFrame(updatePopover); - } - } - prevIsOpen.current = isOpen; - }; - window.requestAnimationFrame(updatePopover); - return function () { - shouldUpdate = false; - }; - }, [ - align, - contentLocation, - isOpen, - padding, - popoverRef, - popoverState.align, - popoverState.childRect.height, - popoverState.childRect.left, - popoverState.childRect.top, - popoverState.childRect.width, - popoverState.padding, - popoverState.popoverRect.height, - popoverState.popoverRect.width, - positionPopover, - positions, - reposition, - ]); - react_1.useEffect(function () { - var popoverElement = popoverRef.current; - Object.assign(popoverElement.style, containerStyle); - return function () { - Object.keys(containerStyle !== null && containerStyle !== void 0 ? containerStyle : {}).forEach(function (key) { - return delete popoverElement.style[key]; - }); - }; - }, [containerStyle, isOpen, popoverRef]); - var handleOnClickOutside = react_1.useCallback(function (e) { - var _a, _b; - if (isOpen && - !((_a = popoverRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target)) && - !((_b = childRef.current) === null || _b === void 0 ? void 0 : _b.contains(e.target))) { - onClickOutside === null || onClickOutside === void 0 ? void 0 : onClickOutside(e); - } - }, [isOpen, onClickOutside, popoverRef]); - var handleWindowResize = react_1.useCallback(function () { - if (childRef.current) { - window.requestAnimationFrame(function () { return positionPopover(); }); - } - }, [positionPopover]); - react_1.useEffect(function () { - window.addEventListener('click', handleOnClickOutside, true); - window.addEventListener('resize', handleWindowResize); - return function () { - window.removeEventListener('click', handleOnClickOutside, true); - window.removeEventListener('resize', handleWindowResize); - }; - }, [handleOnClickOutside, handleWindowResize]); - var handleRef = react_1.useCallback(function (node) { - childRef.current = node; - if (externalRef != null) { - if (typeof externalRef === 'object') { - externalRef.current = node; - } - else if (typeof externalRef === 'function') { - externalRef(node); - } - } - }, [externalRef]); - var renderChild = function () { - return react_1.cloneElement(children, { - ref: handleRef, - }); - }; - var renderPopover = function () { - if (!isOpen) - return null; - return (jsx_runtime_1.jsx(PopoverPortal_1.PopoverPortal, __assign({ element: popoverRef.current, scoutElement: scoutRef.current, container: parentElement }, { children: typeof content === 'function' ? content(popoverState) : content }), void 0)); - }; - return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [renderChild(), renderPopover()] }, void 0)); -}); -exports.Popover = react_1.forwardRef(function (props, ref) { - if (typeof window === 'undefined') - return props.children; - return jsx_runtime_1.jsx(PopoverInternal, __assign({}, props, { ref: ref }), void 0); -}); -//# sourceMappingURL=Popover.js.map \ No newline at end of file diff --git a/dist/Popover.js.map b/dist/Popover.js.map deleted file mode 100644 index d8b869d..0000000 --- a/dist/Popover.js.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"Popover.js","sourceRoot":"","sources":["../src/Popover.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n useRef,\n useLayoutEffect,\n useState,\n useCallback,\n useEffect,\n forwardRef,\n cloneElement,\n} from 'react';\nimport { PopoverPortal } from './PopoverPortal';\nimport {\n ContentLocation,\n ContentLocationGetter,\n PopoverPosition,\n PopoverProps,\n PopoverState,\n} from '.';\nimport { Constants, rectsAreEqual } from './util';\nimport { usePopover } from './usePopover';\nimport { useMemoizedArray } from './useMemoizedArray';\n\nexport { useArrowContainer } from './useArrowContainer';\nexport { ArrowContainer } from './ArrowContainer';\nexport { usePopover };\n\nconst PopoverInternal = forwardRef(\n (\n {\n isOpen,\n children,\n content,\n positions: externalPositions = Constants.DEFAULT_POSITIONS,\n align = Constants.DEFAULT_ALIGN,\n padding = 0,\n reposition = true,\n parentElement = window.document.body,\n boundaryElement = parentElement,\n containerClassName = 'react-tiny-popover-container',\n containerStyle,\n contentLocation,\n boundaryInset = 0,\n onClickOutside,\n },\n externalRef,\n ) => {\n const positions = useMemoizedArray(externalPositions);\n\n // TODO: factor prevs out into a custom prevs hook\n const prevIsOpen = useRef(false);\n const prevPositions = useRef();\n const prevContentLocation = useRef();\n const prevReposition = useRef(reposition);\n\n const childRef = useRef();\n\n const [popoverState, setPopoverState] = useState({\n align,\n nudgedLeft: 0,\n nudgedTop: 0,\n position: positions[0],\n padding,\n childRect: Constants.EMPTY_CLIENT_RECT,\n popoverRect: Constants.EMPTY_CLIENT_RECT,\n parentRect: Constants.EMPTY_CLIENT_RECT,\n boundaryRect: Constants.EMPTY_CLIENT_RECT,\n boundaryInset,\n violations: Constants.EMPTY_CLIENT_RECT,\n hasViolations: false,\n });\n\n const onPositionPopover = useCallback(\n (popoverState: PopoverState) => setPopoverState(popoverState),\n [],\n );\n\n const { positionPopover, popoverRef, scoutRef } = usePopover({\n isOpen,\n childRef,\n containerClassName,\n parentElement,\n boundaryElement,\n contentLocation,\n positions,\n align,\n padding,\n boundaryInset,\n reposition,\n onPositionPopover,\n });\n\n useLayoutEffect(() => {\n let shouldUpdate = true;\n const updatePopover = () => {\n if (isOpen && shouldUpdate) {\n const childRect = childRef?.current?.getBoundingClientRect();\n const popoverRect = popoverRef?.current?.getBoundingClientRect();\n if (\n childRect != null &&\n popoverRect != null &&\n (!rectsAreEqual(childRect, {\n top: popoverState.childRect.top,\n left: popoverState.childRect.left,\n width: popoverState.childRect.width,\n height: popoverState.childRect.height,\n bottom: popoverState.childRect.top + popoverState.childRect.height,\n right: popoverState.childRect.left + popoverState.childRect.width,\n }) ||\n popoverRect.width !== popoverState.popoverRect.width ||\n popoverRect.height !== popoverState.popoverRect.height ||\n popoverState.padding !== padding ||\n popoverState.align !== align ||\n positions !== prevPositions.current ||\n contentLocation !== prevContentLocation.current ||\n reposition !== prevReposition.current)\n ) {\n positionPopover();\n }\n\n // TODO: factor prev checks out into the custom prevs hook\n if (positions !== prevPositions.current) {\n prevPositions.current = positions;\n }\n if (contentLocation !== prevContentLocation.current) {\n prevContentLocation.current = contentLocation;\n }\n if (reposition !== prevReposition.current) {\n prevReposition.current = reposition;\n }\n\n if (shouldUpdate) {\n window.requestAnimationFrame(updatePopover);\n }\n }\n\n prevIsOpen.current = isOpen;\n };\n\n window.requestAnimationFrame(updatePopover);\n\n return () => {\n shouldUpdate = false;\n };\n }, [\n align,\n contentLocation,\n isOpen,\n padding,\n popoverRef,\n popoverState.align,\n popoverState.childRect.height,\n popoverState.childRect.left,\n popoverState.childRect.top,\n popoverState.childRect.width,\n popoverState.padding,\n popoverState.popoverRect.height,\n popoverState.popoverRect.width,\n positionPopover,\n positions,\n reposition,\n ]);\n\n useEffect(() => {\n const popoverElement = popoverRef.current;\n\n Object.assign(popoverElement.style, containerStyle);\n\n return () => {\n Object.keys(containerStyle ?? {}).forEach(\n (key) =>\n delete popoverElement.style[\n key as keyof Omit\n ],\n );\n };\n }, [containerStyle, isOpen, popoverRef]);\n\n const handleOnClickOutside = useCallback(\n (e: MouseEvent) => {\n if (\n isOpen &&\n !popoverRef.current?.contains(e.target as Node) &&\n !childRef.current?.contains(e.target as Node)\n ) {\n onClickOutside?.(e);\n }\n },\n [isOpen, onClickOutside, popoverRef],\n );\n\n const handleWindowResize = useCallback(() => {\n if (childRef.current) {\n window.requestAnimationFrame(() => positionPopover());\n }\n }, [positionPopover]);\n\n useEffect(() => {\n window.addEventListener('click', handleOnClickOutside, true);\n window.addEventListener('resize', handleWindowResize);\n return () => {\n window.removeEventListener('click', handleOnClickOutside, true);\n window.removeEventListener('resize', handleWindowResize);\n };\n }, [handleOnClickOutside, handleWindowResize]);\n\n const handleRef = useCallback(\n (node: HTMLElement) => {\n childRef.current = node;\n if (externalRef != null) {\n if (typeof externalRef === 'object') {\n (externalRef as React.MutableRefObject).current = node;\n } else if (typeof externalRef === 'function') {\n (externalRef as (instance: HTMLElement) => void)(node);\n }\n }\n },\n [externalRef],\n );\n\n const renderChild = () =>\n cloneElement(children as JSX.Element, {\n ref: handleRef,\n });\n\n const renderPopover = () => {\n if (!isOpen) return null;\n return (\n \n {typeof content === 'function' ? content(popoverState) : content}\n \n );\n };\n\n return (\n <>\n {renderChild()}\n {renderPopover()}\n \n );\n },\n);\n\nexport const Popover = forwardRef((props, ref) => {\n if (typeof window === 'undefined') return props.children;\n return ;\n});\n"]} \ No newline at end of file diff --git a/dist/PopoverPortal.js b/dist/PopoverPortal.js deleted file mode 100644 index e41fe2e..0000000 --- a/dist/PopoverPortal.js +++ /dev/null @@ -1,19 +0,0 @@ -"use strict"; -Object.defineProperty(exports, "__esModule", { value: true }); -exports.PopoverPortal = void 0; -var react_1 = require("react"); -var react_dom_1 = require("react-dom"); -var PopoverPortal = function (_a) { - var container = _a.container, element = _a.element, scoutElement = _a.scoutElement, children = _a.children; - react_1.useLayoutEffect(function () { - container.appendChild(element); - container.appendChild(scoutElement); - return function () { - container.removeChild(element); - container.removeChild(scoutElement); - }; - }, [container, element]); - return react_dom_1.createPortal(children, element); -}; -exports.PopoverPortal = PopoverPortal; -//# sourceMappingURL=PopoverPortal.js.map \ No newline at end of file diff --git a/dist/PopoverPortal.js.map b/dist/PopoverPortal.js.map deleted file mode 100644 index 6e420aa..0000000 --- a/dist/PopoverPortal.js.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"PopoverPortal.js","sourceRoot":"","sources":["../src/PopoverPortal.tsx"],"names":[],"mappings":";;;AAAA,+BAA4C;AAC5C,uCAAyC;AAQzC,IAAM,aAAa,GAA2B,UAAC,EAA8C;QAA5C,SAAS,eAAA,EAAE,OAAO,aAAA,EAAE,YAAY,kBAAA,EAAE,QAAQ,cAAA;IACzF,uBAAe,CAAC;QACd,SAAS,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;QAC/B,SAAS,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC;QACpC,OAAO;YACL,SAAS,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;YAC/B,SAAS,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC;QACtC,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC;IAEzB,OAAO,wBAAY,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;AACzC,CAAC,CAAC;AAEO,sCAAa","sourcesContent":["import { useLayoutEffect, FC } from 'react';\nimport { createPortal } from 'react-dom';\n\ninterface PopoverPortalProps {\n container: Element;\n element: Element;\n scoutElement: Element;\n}\n\nconst PopoverPortal: FC = ({ container, element, scoutElement, children }) => {\n useLayoutEffect(() => {\n container.appendChild(element);\n container.appendChild(scoutElement);\n return () => {\n container.removeChild(element);\n container.removeChild(scoutElement);\n };\n }, [container, element]);\n\n return createPortal(children, element);\n};\n\nexport { PopoverPortal };\n"]} \ No newline at end of file diff --git a/dist/index.d.ts b/dist/index.d.ts deleted file mode 100644 index e22e481..0000000 --- a/dist/index.d.ts +++ /dev/null @@ -1,118 +0,0 @@ -import { Ref, MutableRefObject, CSSProperties, FC } from 'react'; - -export interface ContentLocation { - top: number; - left: number; -} - -export interface BoundaryViolations { - top: number; - left: number; - right: number; - bottom: number; -} - -export interface PopoverState { - childRect: ClientRect; - popoverRect: ClientRect; - parentRect: ClientRect; - boundaryRect: ClientRect; - position?: PopoverPosition; - align?: PopoverAlign; - padding: number; - nudgedLeft: number; - nudgedTop: number; - boundaryInset: number; - violations: BoundaryViolations; - hasViolations: boolean; -} - -export type ContentRenderer = (popoverState: PopoverState) => JSX.Element; -export type ContentLocationGetter = (popoverState: PopoverState) => ContentLocation; - -export type PopoverPosition = 'left' | 'right' | 'top' | 'bottom'; -export type PopoverAlign = 'start' | 'center' | 'end'; - -export interface UseArrowContainerProps { - childRect: ClientRect; - popoverRect: ClientRect; - position?: PopoverPosition; - arrowSize: number; - arrowColor: string; -} - -export interface ArrowContainerProps extends UseArrowContainerProps { - children: JSX.Element; - className?: string; - style?: React.CSSProperties; - arrowStyle?: React.CSSProperties; - arrowClassName?: string; -} - -export interface UsePopoverProps { - isOpen: boolean; - childRef: React.MutableRefObject; - positions: PopoverPosition[]; - align: PopoverAlign; - padding: number; - reposition: boolean; - boundaryInset: number; - parentElement?: HTMLElement; - boundaryElement?: HTMLElement; - containerClassName?: string; - contentLocation?: ContentLocationGetter | ContentLocation; - onPositionPopover(popoverState: PopoverState): void; -} - -export interface PopoverProps { - isOpen: boolean; - children: JSX.Element; - content: ContentRenderer | JSX.Element; - positions?: PopoverPosition[]; - align?: PopoverAlign; - padding?: number; - reposition?: boolean; - ref?: Ref; - containerClassName?: string; - parentElement?: HTMLElement; - containerStyle?: Partial; - contentLocation?: ContentLocationGetter | ContentLocation; - boundaryElement?: HTMLElement; - boundaryInset?: number; - boundaryTolerance?: number; - onClickOutside?: (e: MouseEvent) => void; -} - -export interface PositionPopoverProps { - positionIndex?: number; - childRect?: ClientRect; - popoverRect?: ClientRect; - parentRect?: ClientRect; - scoutRect?: ClientRect; - parentRectAdjusted?: ClientRect; - boundaryRect?: ClientRect; -} - -export type PositionPopover = (props?: PositionPopoverProps) => void; - -export type PopoverRefs = { - popoverRef: MutableRefObject; - scoutRef: MutableRefObject; -}; - -export type UsePopoverResult = { - positionPopover: PositionPopover; - popoverRef: MutableRefObject; - scoutRef: MutableRefObject; -}; - -export interface UseArrowContainerResult { - arrowStyle: CSSProperties; - arrowContainerStyle: CSSProperties; -} - -export const usePopover: (props: UsePopoverProps) => UsePopoverResult; -export const useArrowContainer: (props: UseArrowContainerProps) => UseArrowContainerResult; - -export const Popover: FC; -export const ArrowContainer: FC; diff --git a/dist/useArrowContainer.js b/dist/useArrowContainer.js deleted file mode 100644 index 7670b22..0000000 --- a/dist/useArrowContainer.js +++ /dev/null @@ -1,95 +0,0 @@ -"use strict"; -var __assign = (this && this.__assign) || function () { - __assign = Object.assign || function(t) { - for (var s, i = 1, n = arguments.length; i < n; i++) { - s = arguments[i]; - for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) - t[p] = s[p]; - } - return t; - }; - return __assign.apply(this, arguments); -}; -Object.defineProperty(exports, "__esModule", { value: true }); -exports.useArrowContainer = void 0; -var react_1 = require("react"); -var useArrowContainer = function (_a) { - var childRect = _a.childRect, popoverRect = _a.popoverRect, position = _a.position, arrowSize = _a.arrowSize, arrowColor = _a.arrowColor; - var arrowContainerStyle = react_1.useMemo(function () { - return ({ - padding: arrowSize, - }); - }, [arrowSize]); - var arrowStyle = react_1.useMemo(function () { - return (__assign({ position: 'absolute' }, (function () { - var arrowWidth = arrowSize * 2; - var top = childRect.top - popoverRect.top + childRect.height / 2 - arrowWidth / 2; - var left = childRect.left - popoverRect.left + childRect.width / 2 - arrowWidth / 2; - var lowerBound = arrowSize; - var leftUpperBound = popoverRect.width - arrowSize; - var topUpperBound = popoverRect.height - arrowSize; - left = left < lowerBound ? lowerBound : left; - left = left + arrowWidth > leftUpperBound ? leftUpperBound - arrowWidth : left; - top = top < lowerBound ? lowerBound : top; - top = top + arrowWidth > topUpperBound ? topUpperBound - arrowWidth : top; - top = Number.isNaN(top) ? 0 : top; - left = Number.isNaN(left) ? 0 : left; - switch (position) { - case 'right': - return { - borderTop: arrowSize + "px solid transparent", - borderBottom: arrowSize + "px solid transparent", - borderRight: arrowSize + "px solid " + arrowColor, - left: 0, - top: top, - }; - case 'left': - return { - borderTop: arrowSize + "px solid transparent", - borderBottom: arrowSize + "px solid transparent", - borderLeft: arrowSize + "px solid " + arrowColor, - right: 0, - top: top, - }; - case 'bottom': - return { - borderLeft: arrowSize + "px solid transparent", - borderRight: arrowSize + "px solid transparent", - borderBottom: arrowSize + "px solid " + arrowColor, - top: 0, - left: left, - }; - case 'top': - return { - borderLeft: arrowSize + "px solid transparent", - borderRight: arrowSize + "px solid transparent", - borderTop: arrowSize + "px solid " + arrowColor, - bottom: 0, - left: left, - }; - default: - return { - display: 'hidden', - }; - } - })())); - }, [ - arrowColor, - arrowSize, - childRect.height, - childRect.left, - childRect.top, - childRect.width, - popoverRect.height, - popoverRect.left, - popoverRect.top, - popoverRect.width, - position, - ]); - return { - arrowContainerStyle: arrowContainerStyle, - arrowStyle: arrowStyle, - }; -}; -exports.useArrowContainer = useArrowContainer; -//# sourceMappingURL=useArrowContainer.js.map \ No newline at end of file diff --git a/dist/useArrowContainer.js.map b/dist/useArrowContainer.js.map deleted file mode 100644 index cd690e7..0000000 --- a/dist/useArrowContainer.js.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"useArrowContainer.js","sourceRoot":"","sources":["../src/useArrowContainer.ts"],"names":[],"mappings":"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","sourcesContent":["import { useMemo } from 'react';\nimport { UseArrowContainerProps } from '.';\n\nexport const useArrowContainer = ({\n childRect,\n popoverRect,\n position,\n arrowSize,\n arrowColor,\n}: UseArrowContainerProps) => {\n const arrowContainerStyle = useMemo(\n () =>\n ({\n padding: arrowSize,\n } as React.CSSProperties),\n [arrowSize],\n );\n\n const arrowStyle = useMemo(\n () =>\n ({\n position: 'absolute',\n ...((): React.CSSProperties => {\n const arrowWidth = arrowSize * 2;\n let top = childRect.top - popoverRect.top + childRect.height / 2 - arrowWidth / 2;\n let left = childRect.left - popoverRect.left + childRect.width / 2 - arrowWidth / 2;\n\n const lowerBound = arrowSize;\n const leftUpperBound = popoverRect.width - arrowSize;\n const topUpperBound = popoverRect.height - arrowSize;\n\n left = left < lowerBound ? lowerBound : left;\n left = left + arrowWidth > leftUpperBound ? leftUpperBound - arrowWidth : left;\n top = top < lowerBound ? lowerBound : top;\n top = top + arrowWidth > topUpperBound ? topUpperBound - arrowWidth : top;\n\n top = Number.isNaN(top) ? 0 : top;\n left = Number.isNaN(left) ? 0 : left;\n\n switch (position) {\n case 'right':\n return {\n borderTop: `${arrowSize}px solid transparent`,\n borderBottom: `${arrowSize}px solid transparent`,\n borderRight: `${arrowSize}px solid ${arrowColor}`,\n left: 0,\n top,\n };\n case 'left':\n return {\n borderTop: `${arrowSize}px solid transparent`,\n borderBottom: `${arrowSize}px solid transparent`,\n borderLeft: `${arrowSize}px solid ${arrowColor}`,\n right: 0,\n top,\n };\n case 'bottom':\n return {\n borderLeft: `${arrowSize}px solid transparent`,\n borderRight: `${arrowSize}px solid transparent`,\n borderBottom: `${arrowSize}px solid ${arrowColor}`,\n top: 0,\n left,\n };\n case 'top':\n return {\n borderLeft: `${arrowSize}px solid transparent`,\n borderRight: `${arrowSize}px solid transparent`,\n borderTop: `${arrowSize}px solid ${arrowColor}`,\n bottom: 0,\n left,\n };\n default:\n return {\n display: 'hidden',\n };\n }\n })(),\n } as React.CSSProperties),\n [\n arrowColor,\n arrowSize,\n childRect.height,\n childRect.left,\n childRect.top,\n childRect.width,\n popoverRect.height,\n popoverRect.left,\n popoverRect.top,\n popoverRect.width,\n position,\n ],\n );\n\n return {\n arrowContainerStyle,\n arrowStyle,\n };\n};\n"]} \ No newline at end of file diff --git a/dist/useElementRef.js b/dist/useElementRef.js deleted file mode 100644 index 7e4f5b4..0000000 --- a/dist/useElementRef.js +++ /dev/null @@ -1,11 +0,0 @@ -"use strict"; -Object.defineProperty(exports, "__esModule", { value: true }); -exports.useElementRef = void 0; -var react_1 = require("react"); -var util_1 = require("./util"); -var useElementRef = function (containerClassName, containerStyle) { - var element = react_1.useMemo(function () { return util_1.createContainer(containerStyle, containerClassName); }, [containerClassName, containerStyle]); - return react_1.useRef(element); -}; -exports.useElementRef = useElementRef; -//# sourceMappingURL=useElementRef.js.map \ No newline at end of file diff --git a/dist/useElementRef.js.map b/dist/useElementRef.js.map deleted file mode 100644 index 74b09af..0000000 --- a/dist/useElementRef.js.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"useElementRef.js","sourceRoot":"","sources":["../src/useElementRef.ts"],"names":[],"mappings":";;;AAAA,+BAAwC;AACxC,+BAAyC;AAElC,IAAM,aAAa,GAAG,UAC3B,kBAA2B,EAC3B,cAA6C;IAE7C,IAAM,OAAO,GAAG,eAAO,CACrB,cAAM,OAAA,sBAAe,CAAC,cAAc,EAAE,kBAAkB,CAAC,EAAnD,CAAmD,EACzD,CAAC,kBAAkB,EAAE,cAAc,CAAC,CACrC,CAAC;IAEF,OAAO,cAAM,CAAiB,OAAO,CAAC,CAAC;AACzC,CAAC,CAAC;AAVW,QAAA,aAAa,iBAUxB","sourcesContent":["import { useRef, useMemo } from 'react';\nimport { createContainer } from './util';\n\nexport const useElementRef = (\n containerClassName?: string,\n containerStyle?: Partial,\n) => {\n const element = useMemo(\n () => createContainer(containerStyle, containerClassName),\n [containerClassName, containerStyle],\n );\n\n return useRef(element);\n};\n"]} \ No newline at end of file diff --git a/dist/useMemoizedArray.js b/dist/useMemoizedArray.js deleted file mode 100644 index 99246fc..0000000 --- a/dist/useMemoizedArray.js +++ /dev/null @@ -1,25 +0,0 @@ -"use strict"; -Object.defineProperty(exports, "__esModule", { value: true }); -exports.useMemoizedArray = void 0; -var react_1 = require("react"); -var useMemoizedArray = function (externalArray) { - var prevArrayRef = react_1.useRef(externalArray); - var array = react_1.useMemo(function () { - if (prevArrayRef.current === externalArray) - return prevArrayRef.current; - if (prevArrayRef.current.length !== externalArray.length) { - prevArrayRef.current = externalArray; - return externalArray; - } - for (var i = 0; i < externalArray.length; i += 1) { - if (externalArray[i] !== prevArrayRef.current[i]) { - prevArrayRef.current = externalArray; - return externalArray; - } - } - return prevArrayRef.current; - }, [externalArray]); - return array; -}; -exports.useMemoizedArray = useMemoizedArray; -//# sourceMappingURL=useMemoizedArray.js.map \ No newline at end of file diff --git a/dist/useMemoizedArray.js.map b/dist/useMemoizedArray.js.map deleted file mode 100644 index 3436979..0000000 --- a/dist/useMemoizedArray.js.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"useMemoizedArray.js","sourceRoot":"","sources":["../src/useMemoizedArray.ts"],"names":[],"mappings":";;;AAAA,+BAAwC;AAEjC,IAAM,gBAAgB,GAAG,UAA4B,aAAkB;IAC5E,IAAM,YAAY,GAAG,cAAM,CAAC,aAAa,CAAC,CAAC;IAC3C,IAAM,KAAK,GAAG,eAAO,CAAC;QACpB,IAAI,YAAY,CAAC,OAAO,KAAK,aAAa;YAAE,OAAO,YAAY,CAAC,OAAO,CAAC;QAExE,IAAI,YAAY,CAAC,OAAO,CAAC,MAAM,KAAK,aAAa,CAAC,MAAM,EAAE;YACxD,YAAY,CAAC,OAAO,GAAG,aAAa,CAAC;YACrC,OAAO,aAAa,CAAC;SACtB;QAED,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,aAAa,CAAC,MAAM,EAAE,CAAC,IAAI,CAAC,EAAE;YAChD,IAAI,aAAa,CAAC,CAAC,CAAC,KAAK,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE;gBAChD,YAAY,CAAC,OAAO,GAAG,aAAa,CAAC;gBACrC,OAAO,aAAa,CAAC;aACtB;SACF;QAED,OAAO,YAAY,CAAC,OAAO,CAAC;IAC9B,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,OAAO,KAAK,CAAC;AACf,CAAC,CAAC;AArBW,QAAA,gBAAgB,oBAqB3B","sourcesContent":["import { useRef, useMemo } from 'react';\n\nexport const useMemoizedArray = (externalArray: T[]) => {\n const prevArrayRef = useRef(externalArray);\n const array = useMemo(() => {\n if (prevArrayRef.current === externalArray) return prevArrayRef.current;\n\n if (prevArrayRef.current.length !== externalArray.length) {\n prevArrayRef.current = externalArray;\n return externalArray;\n }\n\n for (let i = 0; i < externalArray.length; i += 1) {\n if (externalArray[i] !== prevArrayRef.current[i]) {\n prevArrayRef.current = externalArray;\n return externalArray;\n }\n }\n\n return prevArrayRef.current;\n }, [externalArray]);\n\n return array;\n};\n"]} \ No newline at end of file diff --git a/dist/usePopover.js b/dist/usePopover.js deleted file mode 100644 index 528157e..0000000 --- a/dist/usePopover.js +++ /dev/null @@ -1,153 +0,0 @@ -"use strict"; -Object.defineProperty(exports, "__esModule", { value: true }); -exports.usePopover = void 0; -var react_1 = require("react"); -var util_1 = require("./util"); -var useElementRef_1 = require("./useElementRef"); -var usePopover = function (_a) { - var isOpen = _a.isOpen, childRef = _a.childRef, positions = _a.positions, containerClassName = _a.containerClassName, parentElement = _a.parentElement, contentLocation = _a.contentLocation, align = _a.align, padding = _a.padding, reposition = _a.reposition, boundaryInset = _a.boundaryInset, boundaryElement = _a.boundaryElement, onPositionPopover = _a.onPositionPopover; - var popoverRef = useElementRef_1.useElementRef(containerClassName, { - position: 'fixed', - overflow: 'visible', - top: '0px', - left: '0px', - }); - var scoutRef = useElementRef_1.useElementRef('react-tiny-popover-scout', { - position: 'fixed', - top: '0px', - left: '0px', - width: '0px', - height: '0px', - visibility: 'hidden', - }); - var positionPopover = react_1.useCallback(function (_a) { - var _b, _c; - var _d = _a === void 0 ? {} : _a, _e = _d.positionIndex, positionIndex = _e === void 0 ? 0 : _e, _f = _d.parentRect, parentRect = _f === void 0 ? parentElement.getBoundingClientRect() : _f, _g = _d.childRect, childRect = _g === void 0 ? (_b = childRef === null || childRef === void 0 ? void 0 : childRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect() : _g, _h = _d.scoutRect, scoutRect = _h === void 0 ? (_c = scoutRef === null || scoutRef === void 0 ? void 0 : scoutRef.current) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect() : _h, _j = _d.popoverRect, popoverRect = _j === void 0 ? popoverRef.current.getBoundingClientRect() : _j, _k = _d.boundaryRect, boundaryRect = _k === void 0 ? boundaryElement === parentElement - ? parentRect - : boundaryElement.getBoundingClientRect() : _k; - if (!childRect || !parentRect || !isOpen) { - return; - } - if (contentLocation) { - var _l = typeof contentLocation === 'function' - ? contentLocation({ - childRect: childRect, - popoverRect: popoverRect, - parentRect: parentRect, - boundaryRect: boundaryRect, - padding: padding, - nudgedTop: 0, - nudgedLeft: 0, - boundaryInset: boundaryInset, - violations: util_1.Constants.EMPTY_CLIENT_RECT, - hasViolations: false, - }) - : contentLocation, inputTop = _l.top, inputLeft = _l.left; - var left_1 = parentRect.left + inputLeft; - var top_1 = parentRect.top + inputTop; - popoverRef.current.style.transform = "translate(" + (left_1 - scoutRect.left) + "px, " + (top_1 - scoutRect.top) + "px)"; - onPositionPopover({ - childRect: childRect, - popoverRect: popoverRect, - parentRect: parentRect, - boundaryRect: boundaryRect, - padding: padding, - nudgedTop: 0, - nudgedLeft: 0, - boundaryInset: boundaryInset, - violations: util_1.Constants.EMPTY_CLIENT_RECT, - hasViolations: false, - }); - return; - } - var isExhausted = positionIndex === positions.length; - var position = isExhausted ? positions[0] : positions[positionIndex]; - var _m = util_1.getNewPopoverRect({ - childRect: childRect, - popoverRect: popoverRect, - boundaryRect: boundaryRect, - position: position, - align: align, - padding: padding, - reposition: reposition, - }, boundaryInset), rect = _m.rect, boundaryViolation = _m.boundaryViolation; - if (boundaryViolation && reposition && !isExhausted) { - positionPopover({ - positionIndex: positionIndex + 1, - childRect: childRect, - popoverRect: popoverRect, - parentRect: parentRect, - boundaryRect: boundaryRect, - }); - return; - } - var top = rect.top, left = rect.left, width = rect.width, height = rect.height; - var shouldNudge = reposition && !isExhausted; - var _o = util_1.getNudgedPopoverRect(rect, boundaryRect, boundaryInset), nudgedLeft = _o.left, nudgedTop = _o.top; - var finalTop = top; - var finalLeft = left; - if (shouldNudge) { - finalTop = nudgedTop; - finalLeft = nudgedLeft; - } - if (window.scrollY > 0) { - finalTop = rect.top; - } - popoverRef.current.style.transform = "translate(" + (finalLeft - scoutRect.left) + "px, " + (finalTop - scoutRect.top) + "px)"; - var potentialViolations = { - top: boundaryRect.top + boundaryInset - finalTop, - left: boundaryRect.left + boundaryInset - finalLeft, - right: finalLeft + width - boundaryRect.right + boundaryInset, - bottom: finalTop + height - boundaryRect.bottom + boundaryInset, - }; - onPositionPopover({ - childRect: childRect, - popoverRect: { - top: finalTop, - left: finalLeft, - width: width, - height: height, - right: finalLeft + width, - bottom: finalTop + height, - }, - parentRect: parentRect, - boundaryRect: boundaryRect, - position: position, - align: align, - padding: padding, - nudgedTop: nudgedTop - top, - nudgedLeft: nudgedLeft - left, - boundaryInset: boundaryInset, - violations: { - top: potentialViolations.top <= 0 ? 0 : potentialViolations.top, - left: potentialViolations.left <= 0 ? 0 : potentialViolations.left, - right: potentialViolations.right <= 0 ? 0 : potentialViolations.right, - bottom: potentialViolations.bottom <= 0 ? 0 : potentialViolations.bottom, - }, - hasViolations: potentialViolations.top > 0 || - potentialViolations.left > 0 || - potentialViolations.right > 0 || - potentialViolations.bottom > 0, - }); - }, [ - parentElement, - childRef, - popoverRef, - boundaryElement, - contentLocation, - positions, - align, - padding, - reposition, - boundaryInset, - onPositionPopover, - isOpen, - ]); - return { - positionPopover: positionPopover, - popoverRef: popoverRef, - scoutRef: scoutRef, - }; -}; -exports.usePopover = usePopover; -//# sourceMappingURL=usePopover.js.map \ No newline at end of file diff --git a/dist/usePopover.js.map b/dist/usePopover.js.map deleted file mode 100644 index 00b63d2..0000000 --- a/dist/usePopover.js.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"usePopover.js","sourceRoot":"","sources":["../src/usePopover.ts"],"names":[],"mappings":"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","sourcesContent":["import { useCallback } from 'react';\nimport { BoundaryViolations, PositionPopover, UsePopoverProps, UsePopoverResult } from '.';\nimport { Constants, getNewPopoverRect, getNudgedPopoverRect } from './util';\nimport { useElementRef } from './useElementRef';\n\nexport const usePopover = ({\n isOpen,\n childRef,\n positions,\n containerClassName,\n parentElement,\n contentLocation,\n align,\n padding,\n reposition,\n boundaryInset,\n boundaryElement,\n onPositionPopover,\n}: UsePopoverProps): UsePopoverResult => {\n const popoverRef = useElementRef(containerClassName, {\n position: 'fixed',\n overflow: 'visible',\n top: '0px',\n left: '0px',\n });\n\n const scoutRef = useElementRef('react-tiny-popover-scout', {\n position: 'fixed',\n top: '0px',\n left: '0px',\n width: '0px',\n height: '0px',\n visibility: 'hidden',\n });\n\n const positionPopover = useCallback(\n ({\n positionIndex = 0,\n parentRect = parentElement.getBoundingClientRect(),\n childRect = childRef?.current?.getBoundingClientRect(),\n scoutRect = scoutRef?.current?.getBoundingClientRect(),\n popoverRect = popoverRef.current.getBoundingClientRect(),\n boundaryRect = boundaryElement === parentElement\n ? parentRect\n : boundaryElement.getBoundingClientRect(),\n } = {}) => {\n if (!childRect || !parentRect || !isOpen) {\n return;\n }\n\n if (contentLocation) {\n const { top: inputTop, left: inputLeft } =\n typeof contentLocation === 'function'\n ? contentLocation({\n childRect,\n popoverRect,\n parentRect,\n boundaryRect,\n padding,\n nudgedTop: 0,\n nudgedLeft: 0,\n boundaryInset,\n violations: Constants.EMPTY_CLIENT_RECT,\n hasViolations: false,\n })\n : contentLocation;\n\n const left = parentRect.left + inputLeft;\n const top = parentRect.top + inputTop;\n\n popoverRef.current.style.transform = `translate(${left - scoutRect.left}px, ${\n top - scoutRect.top\n }px)`;\n\n onPositionPopover({\n childRect,\n popoverRect,\n parentRect,\n boundaryRect,\n padding,\n nudgedTop: 0,\n nudgedLeft: 0,\n boundaryInset,\n violations: Constants.EMPTY_CLIENT_RECT,\n hasViolations: false,\n });\n\n return;\n }\n\n const isExhausted = positionIndex === positions.length;\n const position = isExhausted ? positions[0] : positions[positionIndex];\n\n const { rect, boundaryViolation } = getNewPopoverRect(\n {\n childRect,\n popoverRect,\n boundaryRect,\n position,\n align,\n padding,\n reposition,\n },\n boundaryInset,\n );\n\n if (boundaryViolation && reposition && !isExhausted) {\n positionPopover({\n positionIndex: positionIndex + 1,\n childRect,\n popoverRect,\n parentRect,\n boundaryRect,\n });\n return;\n }\n\n const { top, left, width, height } = rect;\n const shouldNudge = reposition && !isExhausted;\n const { left: nudgedLeft, top: nudgedTop } = getNudgedPopoverRect(\n rect,\n boundaryRect,\n boundaryInset,\n );\n\n let finalTop = top;\n let finalLeft = left;\n\n if (shouldNudge) {\n finalTop = nudgedTop;\n finalLeft = nudgedLeft;\n }\n\n if (window.scrollY > 0) {\n finalTop = rect.top;\n }\n popoverRef.current.style.transform = `translate(${finalLeft - scoutRect.left}px, ${\n finalTop - scoutRect.top\n }px)`;\n\n const potentialViolations: BoundaryViolations = {\n top: boundaryRect.top + boundaryInset - finalTop,\n left: boundaryRect.left + boundaryInset - finalLeft,\n right: finalLeft + width - boundaryRect.right + boundaryInset,\n bottom: finalTop + height - boundaryRect.bottom + boundaryInset,\n };\n\n onPositionPopover({\n childRect,\n popoverRect: {\n top: finalTop,\n left: finalLeft,\n width,\n height,\n right: finalLeft + width,\n bottom: finalTop + height,\n },\n parentRect,\n boundaryRect,\n position,\n align,\n padding,\n nudgedTop: nudgedTop - top,\n nudgedLeft: nudgedLeft - left,\n boundaryInset,\n violations: {\n top: potentialViolations.top <= 0 ? 0 : potentialViolations.top,\n left: potentialViolations.left <= 0 ? 0 : potentialViolations.left,\n right: potentialViolations.right <= 0 ? 0 : potentialViolations.right,\n bottom: potentialViolations.bottom <= 0 ? 0 : potentialViolations.bottom,\n },\n hasViolations:\n potentialViolations.top > 0 ||\n potentialViolations.left > 0 ||\n potentialViolations.right > 0 ||\n potentialViolations.bottom > 0,\n });\n },\n [\n parentElement,\n childRef,\n popoverRef,\n boundaryElement,\n contentLocation,\n positions,\n align,\n padding,\n reposition,\n boundaryInset,\n onPositionPopover,\n isOpen,\n ],\n );\n\n return {\n positionPopover,\n popoverRef,\n scoutRef,\n };\n};\n"]} \ No newline at end of file diff --git a/dist/util.js b/dist/util.js deleted file mode 100644 index b02a9af..0000000 --- a/dist/util.js +++ /dev/null @@ -1,118 +0,0 @@ -"use strict"; -Object.defineProperty(exports, "__esModule", { value: true }); -exports.getNudgedPopoverRect = exports.getNewPopoverRect = exports.popoverRectForPosition = exports.createContainer = exports.rectsAreEqual = exports.Constants = void 0; -exports.Constants = { - DEFAULT_ALIGN: 'center', - DEFAULT_POSITIONS: ['top', 'left', 'right', 'bottom'], - EMPTY_CLIENT_RECT: { - top: 0, - left: 0, - bottom: 0, - height: 0, - right: 0, - width: 0, - }, -}; -var rectsAreEqual = function (rectA, rectB) { - return rectA === rectB || - ((rectA === null || rectA === void 0 ? void 0 : rectA.bottom) === (rectB === null || rectB === void 0 ? void 0 : rectB.bottom) && - (rectA === null || rectA === void 0 ? void 0 : rectA.height) === (rectB === null || rectB === void 0 ? void 0 : rectB.height) && - (rectA === null || rectA === void 0 ? void 0 : rectA.left) === (rectB === null || rectB === void 0 ? void 0 : rectB.left) && - (rectA === null || rectA === void 0 ? void 0 : rectA.right) === (rectB === null || rectB === void 0 ? void 0 : rectB.right) && - (rectA === null || rectA === void 0 ? void 0 : rectA.top) === (rectB === null || rectB === void 0 ? void 0 : rectB.top) && - (rectA === null || rectA === void 0 ? void 0 : rectA.width) === (rectB === null || rectB === void 0 ? void 0 : rectB.width)); -}; -exports.rectsAreEqual = rectsAreEqual; -var createContainer = function (containerStyle, containerClassName) { - var container = window.document.createElement('div'); - if (containerClassName) - container.className = containerClassName; - Object.assign(container.style, containerStyle); - return container; -}; -exports.createContainer = createContainer; -var popoverRectForPosition = function (position, childRect, popoverRect, padding, align) { - var targetMidX = childRect.left + childRect.width / 2; - var targetMidY = childRect.top + childRect.height / 2; - var width = popoverRect.width, height = popoverRect.height; - var top; - var left; - switch (position) { - case 'left': - top = targetMidY - height / 2; - left = childRect.left - padding - width; - if (align === 'start') { - top = childRect.top; - } - if (align === 'end') { - top = childRect.bottom - height; - } - break; - case 'bottom': - top = childRect.bottom + padding; - left = targetMidX - width / 2; - if (align === 'start') { - left = childRect.left; - } - if (align === 'end') { - left = childRect.right - width; - } - break; - case 'right': - top = targetMidY - height / 2; - left = childRect.right + padding; - if (align === 'start') { - top = childRect.top; - } - if (align === 'end') { - top = childRect.bottom - height; - } - break; - default: - top = childRect.top - height - padding; - left = targetMidX - width / 2; - if (align === 'start') { - left = childRect.left; - } - if (align === 'end') { - left = childRect.right - width; - } - break; - } - return { top: top, left: left, width: width, height: height, right: left + width, bottom: top + height }; -}; -exports.popoverRectForPosition = popoverRectForPosition; -var getNewPopoverRect = function (_a, boundaryInset) { - var position = _a.position, align = _a.align, childRect = _a.childRect, popoverRect = _a.popoverRect, boundaryRect = _a.boundaryRect, padding = _a.padding, reposition = _a.reposition; - var rect = exports.popoverRectForPosition(position, childRect, popoverRect, padding, align); - var boundaryViolation = reposition && - ((position === 'top' && rect.top < boundaryRect.top + boundaryInset) || - (position === 'left' && rect.left < boundaryRect.left + boundaryInset) || - (position === 'right' && rect.right > boundaryRect.right - boundaryInset) || - (position === 'bottom' && rect.bottom > boundaryRect.bottom - boundaryInset)); - return { - rect: rect, - boundaryViolation: boundaryViolation, - }; -}; -exports.getNewPopoverRect = getNewPopoverRect; -var getNudgedPopoverRect = function (popoverRect, boundaryRect, boundaryInset) { - var topBoundary = boundaryRect.top + boundaryInset; - var leftBoundary = boundaryRect.left + boundaryInset; - var rightBoundary = boundaryRect.right - boundaryInset; - var bottomBoundary = boundaryRect.bottom - boundaryInset; - var top = popoverRect.top < topBoundary ? topBoundary : popoverRect.top; - top = top + popoverRect.height > bottomBoundary ? bottomBoundary - popoverRect.height : top; - var left = popoverRect.left < leftBoundary ? leftBoundary : popoverRect.left; - left = left + popoverRect.width > rightBoundary ? rightBoundary - popoverRect.width : left; - return { - top: top, - left: left, - width: popoverRect.width, - height: popoverRect.height, - right: left + popoverRect.width, - bottom: top + popoverRect.height, - }; -}; -exports.getNudgedPopoverRect = getNudgedPopoverRect; -//# sourceMappingURL=util.js.map \ No newline at end of file diff --git a/dist/util.js.map b/dist/util.js.map deleted file mode 100644 index 02565ee..0000000 --- a/dist/util.js.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"util.js","sourceRoot":"","sources":["../src/util.ts"],"names":[],"mappings":";;;AAEa,QAAA,SAAS,GAAG;IACvB,aAAa,EAAE,QAAwB;IACvC,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,CAAsB;IAC1E,iBAAiB,EAAE;QACjB,GAAG,EAAE,CAAC;QACN,IAAI,EAAE,CAAC;QACP,MAAM,EAAE,CAAC;QACT,MAAM,EAAE,CAAC;QACT,KAAK,EAAE,CAAC;QACR,KAAK,EAAE,CAAC;KACK;CACP,CAAC;AAEJ,IAAM,aAAa,GAAG,UAAC,KAAiB,EAAE,KAAiB;IAChE,OAAA,KAAK,KAAK,KAAK;QACf,CAAC,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,OAAK,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,CAAA;YAC9B,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,OAAK,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,CAAA;YAC/B,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,OAAK,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,CAAA;YAC3B,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,OAAK,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,CAAA;YAC7B,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,GAAG,OAAK,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,GAAG,CAAA;YACzB,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,OAAK,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,CAAA,CAAC;AANhC,CAMgC,CAAC;AAPtB,QAAA,aAAa,iBAOS;AAE5B,IAAM,eAAe,GAAG,UAC7B,cAA6C,EAC7C,kBAA2B;IAE3B,IAAM,SAAS,GAAG,MAAM,CAAC,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IACvD,IAAI,kBAAkB;QAAE,SAAS,CAAC,SAAS,GAAG,kBAAkB,CAAC;IACjE,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,EAAE,cAAc,CAAC,CAAC;IAC/C,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC;AARW,QAAA,eAAe,mBAQ1B;AAEK,IAAM,sBAAsB,GAAG,UACpC,QAAyB,EACzB,SAAqB,EACrB,WAAuB,EACvB,OAAe,EACf,KAAmB;IAEnB,IAAM,UAAU,GAAG,SAAS,CAAC,IAAI,GAAG,SAAS,CAAC,KAAK,GAAG,CAAC,CAAC;IACxD,IAAM,UAAU,GAAG,SAAS,CAAC,GAAG,GAAG,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC;IAChD,IAAA,KAAK,GAAa,WAAW,MAAxB,EAAE,MAAM,GAAK,WAAW,OAAhB,CAAiB;IACtC,IAAI,GAAW,CAAC;IAChB,IAAI,IAAY,CAAC;IAEjB,QAAQ,QAAQ,EAAE;QAChB,KAAK,MAAM;YACT,GAAG,GAAG,UAAU,GAAG,MAAM,GAAG,CAAC,CAAC;YAC9B,IAAI,GAAG,SAAS,CAAC,IAAI,GAAG,OAAO,GAAG,KAAK,CAAC;YACxC,IAAI,KAAK,KAAK,OAAO,EAAE;gBACrB,GAAG,GAAG,SAAS,CAAC,GAAG,CAAC;aACrB;YACD,IAAI,KAAK,KAAK,KAAK,EAAE;gBACnB,GAAG,GAAG,SAAS,CAAC,MAAM,GAAG,MAAM,CAAC;aACjC;YACD,MAAM;QACR,KAAK,QAAQ;YACX,GAAG,GAAG,SAAS,CAAC,MAAM,GAAG,OAAO,CAAC;YACjC,IAAI,GAAG,UAAU,GAAG,KAAK,GAAG,CAAC,CAAC;YAC9B,IAAI,KAAK,KAAK,OAAO,EAAE;gBACrB,IAAI,GAAG,SAAS,CAAC,IAAI,CAAC;aACvB;YACD,IAAI,KAAK,KAAK,KAAK,EAAE;gBACnB,IAAI,GAAG,SAAS,CAAC,KAAK,GAAG,KAAK,CAAC;aAChC;YACD,MAAM;QACR,KAAK,OAAO;YACV,GAAG,GAAG,UAAU,GAAG,MAAM,GAAG,CAAC,CAAC;YAC9B,IAAI,GAAG,SAAS,CAAC,KAAK,GAAG,OAAO,CAAC;YACjC,IAAI,KAAK,KAAK,OAAO,EAAE;gBACrB,GAAG,GAAG,SAAS,CAAC,GAAG,CAAC;aACrB;YACD,IAAI,KAAK,KAAK,KAAK,EAAE;gBACnB,GAAG,GAAG,SAAS,CAAC,MAAM,GAAG,MAAM,CAAC;aACjC;YACD,MAAM;QACR;YACE,GAAG,GAAG,SAAS,CAAC,GAAG,GAAG,MAAM,GAAG,OAAO,CAAC;YACvC,IAAI,GAAG,UAAU,GAAG,KAAK,GAAG,CAAC,CAAC;YAC9B,IAAI,KAAK,KAAK,OAAO,EAAE;gBACrB,IAAI,GAAG,SAAS,CAAC,IAAI,CAAC;aACvB;YACD,IAAI,KAAK,KAAK,KAAK,EAAE;gBACnB,IAAI,GAAG,SAAS,CAAC,KAAK,GAAG,KAAK,CAAC;aAChC;YACD,MAAM;KACT;IAED,OAAO,EAAE,GAAG,KAAA,EAAE,IAAI,MAAA,EAAE,KAAK,OAAA,EAAE,MAAM,QAAA,EAAE,KAAK,EAAE,IAAI,GAAG,KAAK,EAAE,MAAM,EAAE,GAAG,GAAG,MAAM,EAAE,CAAC;AACjF,CAAC,CAAC;AAzDW,QAAA,sBAAsB,0BAyDjC;AAYK,IAAM,iBAAiB,GAAG,UAC/B,EAQyB,EACzB,aAAqB;QARnB,QAAQ,cAAA,EACR,KAAK,WAAA,EACL,SAAS,eAAA,EACT,WAAW,iBAAA,EACX,YAAY,kBAAA,EACZ,OAAO,aAAA,EACP,UAAU,gBAAA;IAIZ,IAAM,IAAI,GAAG,8BAAsB,CAAC,QAAQ,EAAE,SAAS,EAAE,WAAW,EAAE,OAAO,EAAE,KAAK,CAAC,CAAC;IAEtF,IAAM,iBAAiB,GACrB,UAAU;QACV,CAAC,CAAC,QAAQ,KAAK,KAAK,IAAI,IAAI,CAAC,GAAG,GAAG,YAAY,CAAC,GAAG,GAAG,aAAa,CAAC;YAClE,CAAC,QAAQ,KAAK,MAAM,IAAI,IAAI,CAAC,IAAI,GAAG,YAAY,CAAC,IAAI,GAAG,aAAa,CAAC;YACtE,CAAC,QAAQ,KAAK,OAAO,IAAI,IAAI,CAAC,KAAK,GAAG,YAAY,CAAC,KAAK,GAAG,aAAa,CAAC;YACzE,CAAC,QAAQ,KAAK,QAAQ,IAAI,IAAI,CAAC,MAAM,GAAG,YAAY,CAAC,MAAM,GAAG,aAAa,CAAC,CAAC,CAAC;IAElF,OAAO;QACL,IAAI,MAAA;QACJ,iBAAiB,mBAAA;KACT,CAAC;AACb,CAAC,CAAC;AAzBW,QAAA,iBAAiB,qBAyB5B;AAEK,IAAM,oBAAoB,GAAG,UAClC,WAAuB,EACvB,YAAwB,EACxB,aAAqB;IAErB,IAAM,WAAW,GAAG,YAAY,CAAC,GAAG,GAAG,aAAa,CAAC;IACrD,IAAM,YAAY,GAAG,YAAY,CAAC,IAAI,GAAG,aAAa,CAAC;IACvD,IAAM,aAAa,GAAG,YAAY,CAAC,KAAK,GAAG,aAAa,CAAC;IACzD,IAAM,cAAc,GAAG,YAAY,CAAC,MAAM,GAAG,aAAa,CAAC;IAE3D,IAAI,GAAG,GAAG,WAAW,CAAC,GAAG,GAAG,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,GAAG,CAAC;IACxE,GAAG,GAAG,GAAG,GAAG,WAAW,CAAC,MAAM,GAAG,cAAc,CAAC,CAAC,CAAC,cAAc,GAAG,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC;IAC5F,IAAI,IAAI,GAAG,WAAW,CAAC,IAAI,GAAG,YAAY,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,WAAW,CAAC,IAAI,CAAC;IAC7E,IAAI,GAAG,IAAI,GAAG,WAAW,CAAC,KAAK,GAAG,aAAa,CAAC,CAAC,CAAC,aAAa,GAAG,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC;IAE3F,OAAO;QACL,GAAG,KAAA;QACH,IAAI,MAAA;QACJ,KAAK,EAAE,WAAW,CAAC,KAAK;QACxB,MAAM,EAAE,WAAW,CAAC,MAAM;QAC1B,KAAK,EAAE,IAAI,GAAG,WAAW,CAAC,KAAK;QAC/B,MAAM,EAAE,GAAG,GAAG,WAAW,CAAC,MAAM;KACjC,CAAC;AACJ,CAAC,CAAC;AAvBW,QAAA,oBAAoB,wBAuB/B","sourcesContent":["import { PopoverPosition, PopoverState, PopoverAlign } from './index';\n\nexport const Constants = {\n DEFAULT_ALIGN: 'center' as PopoverAlign,\n DEFAULT_POSITIONS: ['top', 'left', 'right', 'bottom'] as PopoverPosition[],\n EMPTY_CLIENT_RECT: {\n top: 0,\n left: 0,\n bottom: 0,\n height: 0,\n right: 0,\n width: 0,\n } as ClientRect,\n} as const;\n\nexport const rectsAreEqual = (rectA: ClientRect, rectB: ClientRect) =>\n rectA === rectB ||\n (rectA?.bottom === rectB?.bottom &&\n rectA?.height === rectB?.height &&\n rectA?.left === rectB?.left &&\n rectA?.right === rectB?.right &&\n rectA?.top === rectB?.top &&\n rectA?.width === rectB?.width);\n\nexport const createContainer = (\n containerStyle?: Partial,\n containerClassName?: string,\n) => {\n const container = window.document.createElement('div');\n if (containerClassName) container.className = containerClassName;\n Object.assign(container.style, containerStyle);\n return container;\n};\n\nexport const popoverRectForPosition = (\n position: PopoverPosition,\n childRect: ClientRect,\n popoverRect: ClientRect,\n padding: number,\n align: PopoverAlign,\n): ClientRect => {\n const targetMidX = childRect.left + childRect.width / 2;\n const targetMidY = childRect.top + childRect.height / 2;\n const { width, height } = popoverRect;\n let top: number;\n let left: number;\n\n switch (position) {\n case 'left':\n top = targetMidY - height / 2;\n left = childRect.left - padding - width;\n if (align === 'start') {\n top = childRect.top;\n }\n if (align === 'end') {\n top = childRect.bottom - height;\n }\n break;\n case 'bottom':\n top = childRect.bottom + padding;\n left = targetMidX - width / 2;\n if (align === 'start') {\n left = childRect.left;\n }\n if (align === 'end') {\n left = childRect.right - width;\n }\n break;\n case 'right':\n top = targetMidY - height / 2;\n left = childRect.right + padding;\n if (align === 'start') {\n top = childRect.top;\n }\n if (align === 'end') {\n top = childRect.bottom - height;\n }\n break;\n default:\n top = childRect.top - height - padding;\n left = targetMidX - width / 2;\n if (align === 'start') {\n left = childRect.left;\n }\n if (align === 'end') {\n left = childRect.right - width;\n }\n break;\n }\n\n return { top, left, width, height, right: left + width, bottom: top + height };\n};\n\ninterface GetNewPopoverRectProps {\n position: PopoverPosition;\n reposition: boolean;\n align: PopoverAlign;\n childRect: ClientRect;\n popoverRect: ClientRect;\n boundaryRect: ClientRect;\n padding: number;\n}\n\nexport const getNewPopoverRect = (\n {\n position,\n align,\n childRect,\n popoverRect,\n boundaryRect,\n padding,\n reposition,\n }: GetNewPopoverRectProps,\n boundaryInset: number,\n) => {\n const rect = popoverRectForPosition(position, childRect, popoverRect, padding, align);\n\n const boundaryViolation =\n reposition &&\n ((position === 'top' && rect.top < boundaryRect.top + boundaryInset) ||\n (position === 'left' && rect.left < boundaryRect.left + boundaryInset) ||\n (position === 'right' && rect.right > boundaryRect.right - boundaryInset) ||\n (position === 'bottom' && rect.bottom > boundaryRect.bottom - boundaryInset));\n\n return {\n rect,\n boundaryViolation,\n } as const;\n};\n\nexport const getNudgedPopoverRect = (\n popoverRect: ClientRect,\n boundaryRect: ClientRect,\n boundaryInset: number,\n): ClientRect => {\n const topBoundary = boundaryRect.top + boundaryInset;\n const leftBoundary = boundaryRect.left + boundaryInset;\n const rightBoundary = boundaryRect.right - boundaryInset;\n const bottomBoundary = boundaryRect.bottom - boundaryInset;\n\n let top = popoverRect.top < topBoundary ? topBoundary : popoverRect.top;\n top = top + popoverRect.height > bottomBoundary ? bottomBoundary - popoverRect.height : top;\n let left = popoverRect.left < leftBoundary ? leftBoundary : popoverRect.left;\n left = left + popoverRect.width > rightBoundary ? rightBoundary - popoverRect.width : left;\n\n return {\n top,\n left,\n width: popoverRect.width,\n height: popoverRect.height,\n right: left + popoverRect.width,\n bottom: top + popoverRect.height,\n };\n};\n"]} \ No newline at end of file