Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
react-tiny-popover
Advanced tools
react-tiny-popover - npm Package Compare versions
Comparing version 6.0.10 to 7.0.0
@@ -10,2 +10,3 @@ export interface ContentLocation { | ||
| parentRect: ClientRect; | ||
| boundaryRect: ClientRect; | ||
| position?: PopoverPosition; | ||
@@ -48,3 +49,4 @@ align?: PopoverAlign; | ||
| boundaryInset: number; | ||
| containerParent?: HTMLElement; | ||
| parentElement?: HTMLElement; | ||
| boundaryElement?: HTMLElement; | ||
| containerClassName?: string; | ||
@@ -65,5 +67,6 @@ contentLocation?: ContentLocationGetter | ContentLocation; | ||
| containerClassName?: string; | ||
| containerParent?: HTMLElement; | ||
| parentElement?: HTMLElement; | ||
| containerStyle?: Partial<CSSStyleDeclaration>; | ||
| contentLocation?: ContentLocationGetter | ContentLocation; | ||
| boundaryElement?: HTMLElement; | ||
| boundaryInset?: number; | ||
@@ -74,9 +77,13 @@ boundaryTolerance?: number; | ||
| export type PositionPopover = ( | ||
| positionIndex?: number, | ||
| childRect?: ClientRect, | ||
| popoverRect?: ClientRect, | ||
| parentRect?: ClientRect, | ||
| ) => void; | ||
| export interface PositionPopoverProps { | ||
| positionIndex?: number; | ||
| childRect?: ClientRect; | ||
| popoverRect?: ClientRect; | ||
| parentRect?: ClientRect; | ||
| parentRectAdjusted?: ClientRect; | ||
| boundaryRect?: ClientRect; | ||
| } | ||
| export type PositionPopover = (props?: PositionPopoverProps) => void; | ||
| export type UsePopoverResult = readonly [PositionPopover, React.MutableRefObject<HTMLDivElement>]; | ||
@@ -83,0 +90,0 @@ |
@@ -26,4 +26,4 @@ "use strict"; | ||
| Object.defineProperty(exports, "ArrowContainer", { enumerable: true, get: function () { return ArrowContainer_1.ArrowContainer; } }); | ||
| exports.Popover = 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.containerParent, containerParent = _f === void 0 ? window.document.body : _f, _g = _a.containerClassName, containerClassName = _g === void 0 ? 'react-tiny-popover-container' : _g, containerStyle = _a.containerStyle, contentLocation = _a.contentLocation, _h = _a.boundaryInset, boundaryInset = _h === void 0 ? 0 : _h, onClickOutside = _a.onClickOutside; | ||
| 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); | ||
@@ -36,3 +36,3 @@ // TODO: factor prevs out into a custom prevs hook | ||
| var childRef = react_1.useRef(); | ||
| var _j = react_1.useState({ | ||
| var _k = react_1.useState({ | ||
| align: align, | ||
@@ -46,9 +46,11 @@ nudgedLeft: 0, | ||
| parentRect: util_1.Constants.EMPTY_CLIENT_RECT, | ||
| boundaryRect: util_1.Constants.EMPTY_CLIENT_RECT, | ||
| boundaryInset: boundaryInset, | ||
| }), popoverState = _j[0], setPopoverState = _j[1]; | ||
| }), popoverState = _k[0], setPopoverState = _k[1]; | ||
| var onPositionPopover = react_1.useCallback(function (popoverState) { return setPopoverState(popoverState); }, []); | ||
| var _k = usePopover_1.usePopover({ | ||
| var _l = usePopover_1.usePopover({ | ||
| childRef: childRef, | ||
| containerClassName: containerClassName, | ||
| containerParent: containerParent, | ||
| parentElement: parentElement, | ||
| boundaryElement: boundaryElement, | ||
| contentLocation: contentLocation, | ||
@@ -61,3 +63,3 @@ positions: positions, | ||
| onPositionPopover: onPositionPopover, | ||
| }), positionPopover = _k[0], popoverRef = _k[1]; | ||
| }), positionPopover = _l[0], popoverRef = _l[1]; | ||
| react_1.useLayoutEffect(function () { | ||
@@ -176,6 +178,11 @@ var shouldUpdate = true; | ||
| return null; | ||
| return (jsx_runtime_1.jsx(PopoverPortal_1.PopoverPortal, __assign({ element: popoverRef.current, container: containerParent }, { children: typeof content === 'function' ? content(popoverState) : content }), void 0)); | ||
| return (jsx_runtime_1.jsx(PopoverPortal_1.PopoverPortal, __assign({ element: popoverRef.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 |
@@ -8,3 +8,3 @@ "use strict"; | ||
| var usePopover = function (_a) { | ||
| var childRef = _a.childRef, positions = _a.positions, containerClassName = _a.containerClassName, containerParent = _a.containerParent, contentLocation = _a.contentLocation, align = _a.align, padding = _a.padding, reposition = _a.reposition, boundaryInset = _a.boundaryInset, onPositionPopover = _a.onPositionPopover; | ||
| var 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, { | ||
@@ -16,8 +16,7 @@ position: 'fixed', | ||
| }); | ||
| var positionPopover = react_1.useCallback(function (positionIndex, childRect, popoverRect, parentRect) { | ||
| var _a; | ||
| if (positionIndex === void 0) { positionIndex = 0; } | ||
| if (childRect === void 0) { childRect = (_a = childRef === null || childRef === void 0 ? void 0 : childRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect(); } | ||
| if (popoverRect === void 0) { popoverRect = popoverRef.current.getBoundingClientRect(); } | ||
| if (parentRect === void 0) { parentRect = containerParent === null || containerParent === void 0 ? void 0 : containerParent.getBoundingClientRect(); } | ||
| var positionPopover = react_1.useCallback(function (_a) { | ||
| var _b; | ||
| var _c = _a === void 0 ? {} : _a, _d = _c.positionIndex, positionIndex = _d === void 0 ? 0 : _d, _e = _c.parentRect, parentRect = _e === void 0 ? parentElement.getBoundingClientRect() : _e, _f = _c.parentRectAdjusted, parentRectAdjusted = _f === void 0 ? util_1.getBoundingRectNeglectingPositionalTransform(parentElement) : _f, _g = _c.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 = _c.popoverRect, popoverRect = _h === void 0 ? popoverRef.current.getBoundingClientRect() : _h, _j = _c.boundaryRect, boundaryRect = _j === void 0 ? boundaryElement === parentElement | ||
| ? parentRect | ||
| : boundaryElement.getBoundingClientRect() : _j; | ||
| if (!childRect || !parentRect) { | ||
@@ -27,3 +26,3 @@ return; | ||
| if (contentLocation) { | ||
| var _b = typeof contentLocation === 'function' | ||
| var _k = typeof contentLocation === 'function' | ||
| ? contentLocation({ | ||
@@ -33,2 +32,3 @@ childRect: childRect, | ||
| parentRect: parentRect, | ||
| boundaryRect: boundaryRect, | ||
| padding: padding, | ||
@@ -39,3 +39,3 @@ nudgedTop: 0, | ||
| }) | ||
| : contentLocation, inputTop = _b.top, inputLeft = _b.left; | ||
| : contentLocation, inputTop = _k.top, inputLeft = _k.left; | ||
| var left_1 = parentRect.left + inputLeft; | ||
@@ -48,2 +48,3 @@ var top_1 = parentRect.top + inputTop; | ||
| parentRect: parentRect, | ||
| boundaryRect: boundaryRect, | ||
| padding: padding, | ||
@@ -58,6 +59,8 @@ nudgedTop: 0, | ||
| var position = isExhausted ? positions[0] : positions[positionIndex]; | ||
| var _c = util_1.getNewPopoverRect({ | ||
| var _l = util_1.getNewPopoverRect({ | ||
| childRect: childRect, | ||
| popoverRect: popoverRect, | ||
| parentRect: parentRect, | ||
| parentRectAdjusted: parentRectAdjusted, | ||
| boundaryRect: boundaryRect, | ||
| position: position, | ||
@@ -67,5 +70,12 @@ align: align, | ||
| reposition: reposition, | ||
| }, boundaryInset), rect = _c.rect, boundaryViolation = _c.boundaryViolation; | ||
| }, boundaryInset), rect = _l.rect, boundaryViolation = _l.boundaryViolation; | ||
| if (boundaryViolation && reposition && !isExhausted) { | ||
| positionPopover(positionIndex + 1, childRect, popoverRect, parentRect); | ||
| positionPopover({ | ||
| positionIndex: positionIndex + 1, | ||
| childRect: childRect, | ||
| popoverRect: popoverRect, | ||
| parentRect: parentRect, | ||
| parentRectAdjusted: parentRectAdjusted, | ||
| boundaryRect: boundaryRect, | ||
| }); | ||
| return; | ||
@@ -75,3 +85,3 @@ } | ||
| var shouldNudge = reposition && !isExhausted; | ||
| var _d = util_1.getNudgedPopoverRect(rect, parentRect, boundaryInset), nudgedLeft = _d.left, nudgedTop = _d.top; | ||
| var _m = util_1.getNudgedPopoverRect(rect, boundaryRect, boundaryInset), nudgedLeft = _m.left, nudgedTop = _m.top; | ||
| var finalTop = top; | ||
@@ -95,2 +105,3 @@ var finalLeft = left; | ||
| parentRect: parentRect, | ||
| boundaryRect: boundaryRect, | ||
| position: position, | ||
@@ -104,4 +115,7 @@ align: align, | ||
| }, [ | ||
| parentElement, | ||
| childRef, | ||
| popoverRef, | ||
| boundaryElement, | ||
| contentLocation, | ||
| positions, | ||
@@ -112,4 +126,2 @@ align, | ||
| boundaryInset, | ||
| containerParent, | ||
| contentLocation, | ||
| onPositionPopover, | ||
@@ -116,0 +128,0 @@ ]); |
| "use strict"; | ||
| Object.defineProperty(exports, "__esModule", { value: true }); | ||
| exports.getNudgedPopoverRect = exports.getNewPopoverRect = exports.popoverRectForPosition = exports.createContainer = exports.targetPositionHasChanged = exports.popoverStatesAreEqual = exports.rectsAreEqual = exports.arrayUnique = exports.Constants = void 0; | ||
| exports.getNudgedPopoverRect = exports.getNewPopoverRect = exports.popoverRectForPosition = exports.getBoundingRectNeglectingPositionalTransform = exports.createContainer = exports.targetPositionHasChanged = exports.popoverStatesAreEqual = exports.rectsAreEqual = exports.arrayUnique = exports.Constants = void 0; | ||
| exports.Constants = { | ||
@@ -62,2 +62,27 @@ POPOVER_CONTAINER_CLASS_NAME: 'react-tiny-popover-container', | ||
| exports.createContainer = createContainer; | ||
| var getBoundingRectNeglectingPositionalTransform = function (element) { | ||
| if (element == null) | ||
| return undefined; | ||
| var el = element; | ||
| var top = 0; | ||
| var left = 0; | ||
| do { | ||
| top += el.offsetTop; | ||
| left += el.offsetLeft; | ||
| el = el.offsetParent; | ||
| } while (el != null); | ||
| var scrollTop = 0; | ||
| var scrollLeft = 0; | ||
| el = element; | ||
| do { | ||
| scrollTop += el.scrollTop; | ||
| scrollLeft += el.scrollLeft; | ||
| el = el.parentElement; | ||
| } while (el != null); | ||
| top -= scrollTop; | ||
| left -= scrollLeft; | ||
| var _a = element.getBoundingClientRect(), width = _a.width, height = _a.height; | ||
| return { top: top, left: left, width: width, height: height, bottom: top + height, right: left + width }; | ||
| }; | ||
| exports.getBoundingRectNeglectingPositionalTransform = getBoundingRectNeglectingPositionalTransform; | ||
| var popoverRectForPosition = function (position, childRect, popoverRect, padding, align) { | ||
@@ -114,10 +139,27 @@ var targetMidX = childRect.left + childRect.width / 2; | ||
| exports.popoverRectForPosition = popoverRectForPosition; | ||
| var subtractRect = function (a, b) { return ({ | ||
| width: a.width, | ||
| height: a.height, | ||
| bottom: Math.floor(a.bottom - b.bottom), | ||
| left: Math.floor(a.left - b.left), | ||
| right: Math.floor(a.right - b.right), | ||
| top: Math.floor(a.top - b.top), | ||
| }); }; | ||
| var addRect = function (a, b) { return ({ | ||
| width: a.width, | ||
| height: a.height, | ||
| bottom: Math.floor(a.bottom + b.bottom), | ||
| left: Math.floor(a.left + b.left), | ||
| right: Math.floor(a.right + b.right), | ||
| top: Math.floor(a.top + b.top), | ||
| }); }; | ||
| var getNewPopoverRect = function (_a, boundaryInset) { | ||
| var position = _a.position, align = _a.align, childRect = _a.childRect, popoverRect = _a.popoverRect, parentRect = _a.parentRect, padding = _a.padding, reposition = _a.reposition; | ||
| var rect = exports.popoverRectForPosition(position, childRect, popoverRect, padding, align); | ||
| var position = _a.position, align = _a.align, childRect = _a.childRect, popoverRect = _a.popoverRect, parentRect = _a.parentRect, parentRectAdjusted = _a.parentRectAdjusted, boundaryRect = _a.boundaryRect, padding = _a.padding, reposition = _a.reposition; | ||
| var offset = subtractRect(parentRectAdjusted, parentRect); | ||
| var rect = exports.popoverRectForPosition(position, addRect(childRect, offset), popoverRect, padding, align); | ||
| var boundaryViolation = reposition && | ||
| ((position === 'top' && rect.top < parentRect.top + boundaryInset) || | ||
| (position === 'left' && rect.left < parentRect.left + boundaryInset) || | ||
| (position === 'right' && rect.right > parentRect.right - boundaryInset) || | ||
| (position === 'bottom' && rect.bottom > parentRect.bottom - boundaryInset)); | ||
| ((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 { | ||
@@ -129,7 +171,7 @@ rect: rect, | ||
| exports.getNewPopoverRect = getNewPopoverRect; | ||
| var getNudgedPopoverRect = function (popoverRect, parentRect, boundaryInset) { | ||
| var topBoundary = parentRect.top + boundaryInset; | ||
| var leftBoundary = parentRect.left + boundaryInset; | ||
| var rightBoundary = parentRect.right - boundaryInset; | ||
| var bottomBoundary = parentRect.bottom - boundaryInset; | ||
| 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; | ||
@@ -136,0 +178,0 @@ top = top + popoverRect.height > bottomBoundary ? bottomBoundary - popoverRect.height : top; |
| { | ||
| "name": "react-tiny-popover", | ||
| "version": "6.0.10", | ||
| "version": "7.0.0", | ||
| "description": "A simple and highly customizable popover react higher order component with no other dependencies! Typescript friendly.", | ||
@@ -32,3 +32,3 @@ "keywords": [ | ||
| "devDependencies": { | ||
| "@types/react": "^17.0.15", | ||
| "@types/react": "^17.0.19", | ||
| "@types/react-dom": "^17.0.9", | ||
@@ -39,3 +39,3 @@ "@typescript-eslint/eslint-plugin": "^4.29.0", | ||
| "eslint": "^7.32.0", | ||
| "eslint-config-airbnb-typescript": "^12.3.1", | ||
| "eslint-config-airbnb-typescript": "^14.0.0", | ||
| "eslint-config-prettier": "^8.3.0", | ||
@@ -49,3 +49,2 @@ "eslint-config-react-app": "^6.0.0", | ||
| "eslint-plugin-react-hooks": "^4.0.0", | ||
| "eslint-plugin-redux-saga": "^1.1.3", | ||
| "prettier": "^2.0.5", | ||
@@ -52,0 +51,0 @@ "react": "^17.0.2", |
@@ -11,7 +11,7 @@ - [Intro](#react-tiny-popover) | ||
| A lightweight, highly customizable, and non-intrusive popover react HOC with no other dependencies! <b>Typescript friendly</b>, as well! | ||
| A lightweight, highly customizable, non-intrusive, and Typescript friendly popover react HOC with no other dependencies! | ||
| The component renders its child directly, without wrapping it with anything on the DOM, and in addition renders solely the JSX you provide when shown. It simply grabs the child component's coordinates and provides a robust and non-intrusive way for you to position your own content around the child. Your content will be appended to `document.body` when shown, and removed when hidden. You can use it to generate little popups around input or button elements, menu fly-outs, or in pretty much any situation where you want some content to appear and disappear dynamically around a target. You can also specify your own location for your popover content or hook into the existing positioning process, allowing you to essentially make modal windows and the like, as well! | ||
| The component renders its child directly, without wrapping it with anything on the DOM, and in addition renders solely the JSX you provide when shown. It simply grabs the child component's coordinates and provides a robust and non-intrusive way for you to position your own content around the child. Your content will be appended to `document.body` (or an element of your choice) when shown, and removed when hidden. You can use it to generate little popups around input or button elements, menu fly-outs, or in pretty much any situation where you want some content to appear and disappear dynamically around a target. You can also specify your own location for your popover content or hook into the existing positioning process, allowing you to essentially make modal windows and the like, as well! | ||
| `react-tiny-popover` will also guard against your window's current dimensions and reposition itself to prevent any kind of hidden overflow. You can specify a priority of desired positions to fall back to, if you'd like. | ||
| `react-tiny-popover` can also guard against container boundaries and reposition itself to prevent any kind of hidden overflow. You can specify a priority of desired positions to fall back to, if you'd like. | ||
@@ -194,3 +194,3 @@ Optionally, you can provide a renderer function for your popover content that injects the popover's current position, in case your content needs to know where it sits in relation to its target. | ||
| containerClassName, | ||
| containerParent, | ||
| parentElement, | ||
| contentLocation, | ||
@@ -201,2 +201,3 @@ positions, | ||
| boundaryInset, | ||
| boundaryElement, | ||
| reposition, | ||
@@ -267,10 +268,11 @@ onPositionPopover, | ||
| | padding | `number` | | This number determines the gap, in pixels, between your target content and your popover content. Defaults to 6. | | ||
| | reposition | `boolean` | | If false, rather than the popover content repositioning on a boundary collision, the popover content container will move beyond your `containerParent`'s bounds. You are, however, supplied with `nudgedLeft` and `nudgedTop` values by the function you can opt to provide to `content`, so you may choose to handle content overflow as you wish. | | ||
| | position | `string[]` | | You may provide a priority list of preferred positions for your popover content in relation to its target, in the form of an array. Valid values for the array are `'top', 'bottom', 'left', 'right'`. If the popover reaches the edge of the window or its otherwise specified boundary (see 'containerParent`, `boundaryInset`, and `boundaryTolerance`), and repositioning is enabled, it will attempt to render in the order you specify. The default order is `['top', 'left', 'right', 'bottom']`. If you'd like, you can provide a shorter array like `['top', 'left']`. Once the array of positions is exhausted, the popover will no longer attempt to reposition. | | ||
| | reposition | `boolean` | | If false, rather than the popover content repositioning on a boundary collision, the popover content container will move beyond your `parentElement`'s bounds. You are, however, supplied with `nudgedLeft` and `nudgedTop` values by the function you can opt to provide to `content`, so you may choose to handle content overflow as you wish. | | ||
| | position | `string[]` | | You may provide a priority list of preferred positions for your popover content in relation to its target, in the form of an array. Valid values for the array are `'top', 'bottom', 'left', 'right'`. If the popover reaches the edge of the window or its otherwise specified boundary (see 'parentElement`, `boundaryInset`, and `boundaryTolerance`), and repositioning is enabled, it will attempt to render in the order you specify. The default order is `['top', 'left', 'right', 'bottom']`. If you'd like, you can provide a shorter array like `['top', 'left']`. Once the array of positions is exhausted, the popover will no longer attempt to reposition. | | ||
| | align | `string` | | Possible values are `start`, `center`, and `end`. If `start` is specified, the popover content's top or left location is aligned with its target's. With `end` specified, the content's bottom or right location is aligned with its target's. If `center` is specified, the popover content and target's centers are aligned. Defaults to `center`. | | ||
| | ref | `React.Ref` | | Since `Popover` relies on ref forwarding to access its child, it's not simple to obtain a second reference to that child. This property acts as a "pass through" for you to obtain a ref to the child you've provided `Popover`. The value of the ref you provide here will be `Popover`'s child. | | ||
| | ref | `React.Ref` | | Since `Popover` relies on ref forwarding to access its child, it's not simple to obtain a second reference to that child. This property acts as a "pass through" for you to obtain a ref to the child you've provided `Popover`. The value of the ref you provide here will be `Popover`'s child. | | ||
| | onClickOutside | `Function` | | If `react-tiny-popover` detects a click event outside of the target and outside of the popover, you may handle this event here, in the form of `(e: MouseEvent) => void`. | | ||
| | contentLocation | `object` or `Function` | | If you'd like to hook directly into the positioning process, you may do so here! You can provide an object of type `{ top: number, left: number }` to completely override the popover content's (`popoverRect`) location. You can also provide a function that looks like this: `(popoverState: PopoverState) => { top: number, left: number }` (The arguments to this function are the same as the content renderer function above). | | ||
| | containerParent | `HTMLElement` | | Provide an HTML element here to have your popover content rendered within it rather than `document.body`. This element's boundaries will then be adhered to. | | ||
| | boundaryInset | `number` | | This number specifies the inset around your `containerParent`'s border that boundary violations are determined at. Defaults to 0. Can be negative. | | ||
| | parentElement | `HTMLElement` | | Provide an HTML element here to have your popover content appended to it rather than `document.body`. This is useful if you'd like your popover to sit at a particular place within the DOM. Supplying a `parentElement` will not in most cases directly affect the positioning of the popover. | | ||
| | boundaryInset | `number` | | This number specifies the inset around your `parentElement`'s border that boundary violations are determined at. Defaults to 0. Can be negative. | | ||
| | boundaryElement | `HTMLElement` | | If provided (and `reposition` is enabled), your popover will adhere to the boundaries of this element as determined by `Element.getBoundingClientRect()`. | | ||
| | containerStyle | `object` (`CSSStyleDeclaration`) | | Your popover content is rendered to the DOM in a single container `div`. If you'd like to apply style directly to this container `div`, you may do so here! Be aware that as this `div` is a DOM element and not a React element, all style values must be strings. For example, 5 pixels must be represented as `'5px'`, as you'd do with vanilla DOM manipulation in Javascript. | | ||
@@ -281,14 +283,15 @@ | containerClassName | `string` | | If you'd like to apply styles to the single container `div` that your popover content is rendered within via stylesheets, you can specify a custom className for the container here. | | ||
| | <b>Property<b> | Type | Description | | ||
| | -------------- | ------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ||
| | isPositioned | `boolean` | After the popover has positioned its contents, this field is true. Prior, it is false. | | ||
| | childRect | `ClientRect` | The current rect of the popover's child (i.e., the source from which the popover renders). | | ||
| | popoverRect | `ClientRect` | The current rect of the popover's contents. | | ||
| | parentRect | `ClientRect` | The current rect of the popover child's parent. | | ||
| | position | `'left'` \| `'right'` \| `'top'` \| `'bottom'` \| `'custom'` | The current position of the popover in relation to the child. `'custom'` implies the user has set an explicit `contentLocation`. | | ||
| | align | `'start'` \| `'center'` \| `'end'` \| `'custom'` | The cross-axis alignment of the popover's contents. `'custom'` implies the user has set an explicit `contentLocation`. | | ||
| | padding | `number` | The distance between the popover's child and contents. If set to zero, the two are touching. | | ||
| | nudgedLeft | `number` | If the popover's contents encounter a boundary violation that does not warrant a reposition, the contents are instead "nudged" by the appropriate top and left values to keep the contents within the boundary. This is the left value. | | ||
| | nudgedTop | `number` | If the popover's contents encounter a boundary violation that does not warrant a reposition, the contents are instead "nudged" by the appropriate top and left values to keep the contents within the boundary. This is the top value. | | ||
| | boundaryInset | `number` | The popover's contents will encounter boundary violations prior to the actual `containerParent`'s boundaries by this number in pixels. Can be negative. | | ||
| | <b>Property<b> | Type | Description | | ||
| | -------------- | ------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ||
| | isPositioned | `boolean` | After the popover has positioned its contents, this field is true. Prior, it is false. | | ||
| | childRect | `ClientRect` | The current rect of the popover's child (i.e., the source from which the popover renders). | | ||
| | popoverRect | `ClientRect` | The current rect of the popover's contents. | | ||
| | parentRect | `ClientRect` | The current rect of the popover child's parent. | | ||
| | position | `'left'` \| `'right'` \| `'top'` \| `'bottom'` \| `undefined` | The current position of the popover in relation to the child. `undefined` implies the user has set an explicit `contentLocation`. | | ||
| | align | `'start'` \| `'center'` \| `'end'` \| `undefined` | The cross-axis alignment of the popover's contents. `undefined` implies the user has set an explicit `contentLocation`. | | ||
| | padding | `number` | The distance between the popover's child and contents. If set to zero, the two are touching. | | ||
| | nudgedLeft | `number` | If the popover's contents encounter a boundary violation that does not warrant a reposition, the contents are instead "nudged" by the appropriate top and left values to keep the contents within the boundary. This is the left value. | | ||
| | nudgedTop | `number` | If the popover's contents encounter a boundary violation that does not warrant a reposition, the contents are instead "nudged" by the appropriate top and left values to keep the contents within the boundary. This is the top value. | | ||
| | boundaryInset | `number` | The popover's contents will encounter boundary violations prior to the actual `parentElement`'s boundaries by this number in pixels. Can be negative. | | ||
| | boundaryRect | `ClientRect` | The current rect of the popover's boundaries. | | ||
@@ -295,0 +298,0 @@ ### ArrowContainer |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by9.12%
117243
- Dev dependency count
- decreased by-4.76%
20
- Number of package files
- increased by5%
21
- Lines of code
- increased by10.25%
753
- Number of lines in readme file
- increased by0.99%
305
No dependency changes