@via-profit/ui-kit 0.2.2 → 0.2.3

package/Popper/Popper.js

@@ -32,19 +32,20 @@ exports.PORTAL_ID = void 0;
 const react_1 = __importDefault(require("react"));
 const react_dom_1 = __importDefault(require("react-dom"));
 const PopperContainer_1 = __importDefault(require("./PopperContainer"));
-const usePopprer_1 = require("./usePopprer");
-__exportStar(require("./usePopprer"), exports);
+const usePopper_1 = require("./usePopper");
+__exportStar(require("./usePopper"), exports);
 exports.PORTAL_ID = 'ui-kit-portal';
 const Popper = (props, ref) => {
-    const { isOpen, children, anchorElement, zIndex, overrides, anchorPos = 'auto', positionStrategy = 'fixed', viewportMargin = 30, autoFlip = true, offset = 0, onAnchorPosChanged } = props, nativeProps = __rest(props, ["isOpen", "children", "anchorElement", "zIndex", "overrides", "anchorPos", "positionStrategy", "viewportMargin", "autoFlip", "offset", "onAnchorPosChanged"]);
+    const { isOpen, children, anchorElement, zIndex, overrides, anchorPos = 'auto', positionStrategy = 'fixed', viewportMargin = 30, autoFlip = false, alternativePlacements, offset = 0, onAnchorPosChanged } = props, nativeProps = __rest(props, ["isOpen", "children", "anchorElement", "zIndex", "overrides", "anchorPos", "positionStrategy", "viewportMargin", "autoFlip", "alternativePlacements", "offset", "onAnchorPosChanged"]);
     const [domLoaded, setDomLoaded] = react_1.default.useState(false);
-    const { actualPlacement, style, popperRef, isVisible } = (0, usePopprer_1.usePopper)({
+    const { actualPlacement, style, popperRef, isVisible } = (0, usePopper_1.usePopper)({
         anchorElement,
         anchorPos,
         positionStrategy,
         autoFlip,
         offset,
         viewportMargin,
+        alternativePlacements,
         isOpen,
     });
     const overridesMap = react_1.default.useMemo(() => ({
@@ -77,8 +78,9 @@ const Popper = (props, ref) => {
             onAnchorPosChanged(actualPlacement);
         }
     }, [anchorPos, actualPlacement, onAnchorPosChanged]);
+    const childrenMemo = react_1.default.useMemo(() => children, [children]);
     const renderNode = react_1.default.useCallback(() => (react_1.default.createElement(overridesMap.Container, Object.assign({}, nativeProps, { style: Object.assign(Object.assign(Object.assign(Object.assign({}, style), nativeProps.style), { opacity: isVisible ? 1 : 0, pointerEvents: isVisible ? 'auto' : 'none' }), (positionStrategy === 'fixed' && {
-            zIndex: zIndex,
+            position: 'fixed',
         })), zIndex: zIndex, positionStrategy: positionStrategy, "data-popper-placement": actualPlacement, "data-popper-strategy": positionStrategy, ref: el => {
             popperRef.current = el;
             if (ref) {
@@ -89,7 +91,7 @@ const Popper = (props, ref) => {
                     ref.current = el;
                 }
             }
-        } }), children)), [
+        } }), childrenMemo)), [
         overridesMap,
         nativeProps,
         style,
@@ -98,7 +100,7 @@ const Popper = (props, ref) => {
         actualPlacement,
         positionStrategy,
         zIndex,
-        children,
+        childrenMemo,
         popperRef,
         ref,
     ]);

package/Popper/PopperContainer.d.ts

@@ -2,7 +2,6 @@ import React from 'react';
 export type PositionStrategy = 'absolute' | 'fixed';
 export interface PopperContainerProps extends React.HTMLAttributes<HTMLDivElement> {
     readonly zIndex?: number;
-    readonly disablePortal?: boolean;
     readonly positionStrategy?: PositionStrategy;
 }
 declare const _default: React.ForwardRefExoticComponent<PopperContainerProps & React.RefAttributes<HTMLDivElement>>;

package/Popper/PopperContainer.js

@@ -18,10 +18,15 @@ const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
 const StyledContainer = styled_1.default.div `
   position: ${({ $positionStrategy }) => $positionStrategy};
-  z-index: ${({ theme, $zIndex, $disablePortal }) => typeof $zIndex !== 'undefined' ? $zIndex : $disablePortal ? undefined : theme.zIndex.modal};
+  z-index: ${({ theme, $zIndex, $positionStrategy }) => {
+    if (typeof $zIndex !== 'undefined') {
+        return $zIndex;
+    }
+    return $positionStrategy === 'fixed' ? theme.zIndex.modal : undefined;
+}};
 `;
 const PopperContainer = (props, ref) => {
-    const { children, disablePortal, zIndex, positionStrategy = 'fixed' } = props, nativeProps = __rest(props, ["children", "disablePortal", "zIndex", "positionStrategy"]);
-    return (react_1.default.createElement(StyledContainer, Object.assign({ "$disablePortal": disablePortal, "$zIndex": zIndex, "$positionStrategy": positionStrategy }, nativeProps, { ref: ref }), children));
+    const { children, zIndex, positionStrategy = 'fixed' } = props, nativeProps = __rest(props, ["children", "zIndex", "positionStrategy"]);
+    return (react_1.default.createElement(StyledContainer, Object.assign({ "$zIndex": zIndex, "$positionStrategy": positionStrategy }, nativeProps, { ref: ref }), children));
 };
 exports.default = react_1.default.forwardRef(PopperContainer);

package/Popper/index.d.ts

@@ -1,5 +1,5 @@
 import Popper from './Popper';
 export * from './Popper';
 export * from './PopperContainer';
-export * from './usePopprer';
+export * from './usePopper';
 export default Popper;

package/Popper/index.js

@@ -20,5 +20,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const Popper_1 = __importDefault(require("./Popper"));
 __exportStar(require("./Popper"), exports);
 __exportStar(require("./PopperContainer"), exports);
-__exportStar(require("./usePopprer"), exports);
+__exportStar(require("./usePopper"), exports);
 exports.default = Popper_1.default;

package/Popper/usePopper.d.ts

@@ -0,0 +1,111 @@
+import React from 'react';
+import { PositionStrategy } from './PopperContainer';
+/**
+ * Base directions for popper positioning.
+ * These are the primary axes around which the popper can be placed.
+ *
+ * @default 'bottom' (when used as anchorPos)
+ * @example
+ * ```tsx
+ * type Direction = 'top' | 'bottom' | 'left' | 'right';
+ * ```
+ */
+export type Direction = 'top' | 'left' | 'right' | 'bottom';
+/**
+ * Auto placement modifiers that enable intelligent positioning.
+ * The popper will automatically choose the best placement that fits in the viewport.
+ * - `auto`: Dynamically selects the optimal direction
+ * - `auto-top`, `auto-bottom`, `auto-left`, `auto-right`: Auto placement with priority given to the specified direction
+ *
+ * @example
+ * ```tsx
+ * // Will try to place on top first, but will flip if needed
+ * <Popper anchorPos="auto-top">...</Popper>
+ *
+ * // Will try all directions equally
+ * <Popper anchorPos="auto">...</Popper>
+ * ```
+ */
+export type AutoModifier = 'auto' | 'auto-top' | 'auto-bottom' | 'auto-left' | 'auto-right';
+/**
+ * Precise placement modifiers for fine-tuned positioning.
+ * These combine a base direction with specific alignment options:
+ * - `start`/`end`: Aligns to the beginning or end of the anchor (useful for RTL layouts)
+ * - `left`/`right`: Horizontal alignment for vertical placements
+ * - `top`/`bottom`: Vertical alignment for horizontal placements
+ *
+ * @example
+ * ```tsx
+ * // Corner placements
+ * <Popper anchorPos="top-left">Aligns to top-left corner</Popper>
+ *
+ * // Logical placements (RTL-friendly)
+ * <Popper anchorPos="bottom-start">Aligns to bottom edge, start side</Popper>
+ *
+ * // Side alignments
+ * <Popper anchorPos="left-top">Aligns to left side, top edge</Popper>
+ * ```
+ */
+export type Modifier = 'top-start' | 'top-end' | 'top-left' | 'top-right' | 'bottom-end' | 'bottom-start' | 'bottom-right' | 'bottom-left' | 'left-top' | 'left-bottom' | 'right-top' | 'right-bottom' | 'bottom-fill' | 'top-fill';
+/**
+ * Available placement options for the popper.
+ * Combines basic directions, precise modifiers, and auto-placement options
+ * to provide full control over popper positioning.
+ *
+ * Categories:
+ * - **Basic directions**: `top`, `bottom`, `left`, `right` - Centered placement
+ * - **Corner placements**: `top-left`, `top-right`, `bottom-left`, `bottom-right` - Aligned to corners
+ * - **Logical placements**: `top-start`, `top-end`, `bottom-start`, `bottom-end` - RTL-aware alignment
+ * - **Side alignments**: `left-top`, `left-bottom`, `right-top`, `right-bottom` - Edge-aligned
+ * - **Auto placements**: `auto`, `auto-top`, `auto-bottom`, `auto-left`, `auto-right` - Intelligent positioning
+ *
+ * @default 'bottom'
+ * @example
+ * ```tsx
+ * // Basic centered placement
+ * <Popper anchorPos="bottom">Centered below anchor</Popper>
+ *
+ * // Corner placement
+ * <Popper anchorPos="top-right">Attached to top-right corner</Popper>
+ *
+ * // Auto placement with priority
+ * <Popper anchorPos="auto-left">Try left first, then find best fit</Popper>
+ *
+ * // RTL-aware placement
+ * <Popper anchorPos="top-start">Respects text direction</Popper>
+ * ```
+ */
+export type AnchorPos = Direction | Modifier | AutoModifier;
+export interface UsePopperProps {
+    readonly anchorElement: HTMLElement | null;
+    readonly anchorPos?: AnchorPos;
+    readonly alternativePlacements?: readonly AnchorPos[];
+    readonly positionStrategy?: PositionStrategy;
+    readonly autoFlip?: boolean;
+    readonly offset?: number;
+    readonly viewportMargin?: number;
+    readonly isOpen?: boolean;
+}
+export interface UsePopperResult {
+    readonly actualPlacement: AnchorPos;
+    readonly style: React.CSSProperties | null;
+    readonly popperRef: React.MutableRefObject<HTMLDivElement | null>;
+    readonly isVisible: boolean;
+    readonly calculatePosition: () => void;
+    readonly scrollableAncestor: HTMLElement | Window | null;
+    readonly setActualPlacement: React.Dispatch<React.SetStateAction<AnchorPos>>;
+    readonly setStyle: React.Dispatch<React.SetStateAction<React.CSSProperties | null>>;
+    readonly setIsVisible: React.Dispatch<React.SetStateAction<boolean>>;
+}
+/**
+ * Finds the closest scrollable ancestor of an element.
+ * A scrollable element is one that has overflow set to auto, scroll, or overlay
+ * and has content that overflows, allowing scrolling.
+ *
+ * @param element - The element to start searching from
+ * @param includeHidden - Whether to consider elements with overflow: hidden
+ * @returns The closest scrollable ancestor or window if none found
+ */
+export declare const findScrollableAncestor: (element: HTMLElement | null, includeHidden?: boolean) => HTMLElement | Window | null;
+export declare const usePopper: (props: UsePopperProps) => UsePopperResult;
+export default usePopper;