diff --git a/package.json b/package.json index 62b1390..b3d5074 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ "author": "Alex Katz", "main": "dist/Popover.js", "types": "dist/index.d.ts", + "sideEffects": false, "scripts": { "build": "tsc -p . && pnpm run copy-types", "clean": "rimraf dist/", @@ -50,4 +51,4 @@ "react-dom": ">=16.8.0" }, "packageManager": "pnpm@10.1.0+sha512.c89847b0667ddab50396bbbd008a2a43cf3b581efd59cf5d9aa8923ea1fb4b8106c041d540d08acb095037594d73ebc51e1ec89ee40c88b30b8a66c0fae0ac1b" -} +} \ No newline at end of file diff --git a/src/index.d.ts b/src/index.d.ts index 92f4065..4b2f3dc 100644 --- a/src/index.d.ts +++ b/src/index.d.ts @@ -42,7 +42,11 @@ export type PositionTransform = | ((popoverState: PopoverState) => PositionTransformValue); export type PopoverPosition = 'left' | 'right' | 'top' | 'bottom'; -export type PopoverAlign = 'start' | 'center' | 'end'; +export type PopoverAlignValue = 'start' | 'center' | 'end'; + +export type PopoverAlign = + | PopoverAlignValue + | ((popoverPosition: PopoverPosition) => PopoverAlignValue); export type UseArrowContainerProps = { childRect: Rect; diff --git a/src/usePopover.ts b/src/usePopover.ts index 3b7c0d5..22f5e0e 100644 --- a/src/usePopover.ts +++ b/src/usePopover.ts @@ -48,8 +48,8 @@ export const usePopover = ({ const popoverRef = useElementRef({ containerClassName: containerClassName != null && - containerClassName.length > 0 && - containerClassName !== 'react-tiny-popover-container' + containerClassName.length > 0 && + containerClassName !== 'react-tiny-popover-container' ? `react-tiny-popover-container ${containerClassName}` : 'react-tiny-popover-container', containerStyle: POPOVER_STYLE, @@ -74,18 +74,18 @@ export const usePopover = ({ const { top: inputTop, left: inputLeft } = typeof transform === 'function' ? transform({ - childRect, - popoverRect, - parentRect, - boundaryRect, - padding, - align, - nudgedTop: 0, - nudgedLeft: 0, - boundaryInset, - violations: EMPTY_RECT, - hasViolations: false, - }) + childRect, + popoverRect, + parentRect, + boundaryRect, + padding, + align, + nudgedTop: 0, + nudgedLeft: 0, + boundaryInset, + violations: EMPTY_RECT, + hasViolations: false, + }) : transform; const finalLeft = Math.round(parentRect.left + inputLeft - scoutRect.left); @@ -119,13 +119,15 @@ export const usePopover = ({ const isExhausted = positionIndex === positions.length; const position = isExhausted ? positions[0] : positions[positionIndex]; + const calculatedAlign = typeof align === 'function' ? align(position) : align; + const { rect, boundaryViolation } = getNewPopoverRect( { childRect, popoverRect, boundaryRect, position, - align, + align: calculatedAlign, padding, reposition, },