@via-profit/ui-kit 0.1.8 → 0.2.1-alpha.1

package/Popper/Popper.d.ts

@@ -0,0 +1,221 @@
+import React from 'react';
+import { PopperContainerProps, 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';
+/**
+ * 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 PopperProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Controls the visibility of the popper.
+     * When `true`, the popper is rendered and positioned.
+     *
+     * @required
+     * @example
+     * ```tsx
+     * <Popper isOpen={true}>...</Popper>
+     * ```
+     */
+    readonly isOpen: boolean;
+    /**
+     * The HTML element to which the popper will be attached and positioned relative to.
+     * If `null` or undefined, the popper will not be positioned.
+     *
+     * @default undefined
+     * @example
+     * ```tsx
+     * const [anchor, setAnchor] = useState<HTMLButtonElement | null>(null);
+     * <Popper anchorElement={anchor}>...</Popper>
+     * ```
+     */
+    readonly anchorElement?: HTMLElement | null;
+    /**
+     * Determines the preferred placement of the popper relative to the anchor element.
+     * The actual placement may change if `autoFlip` is enabled and there's not enough space.
+     *
+     * @default 'auto'
+     * @example
+     * ```tsx
+     * <Popper anchorPos="top-start">...</Popper>
+     * <Popper anchorPos="bottom-end">...</Popper>
+     * ```
+     */
+    readonly anchorPos?: AnchorPos;
+    /**
+     * The z-index value for the popper container.
+     * Used to control the stacking order of the popper relative to other elements.
+     *
+     * @default theme.zIndex.modal
+     * @example
+     * ```tsx
+     * <Popper zIndex={9999}>...</Popper>
+     * ```
+     */
+    readonly zIndex?: number;
+    /**
+     * When enabled, the popper will automatically try to find the best placement
+     * if the preferred placement doesn't fit in the viewport.
+     * The component will iterate through possible placements until it finds one that fits.
+     *
+     * @default true
+     * @example
+     * ```tsx
+     * <Popper autoFlip={true}>...</Popper> // Will flip if needed
+     * <Popper autoFlip={false}>...</Popper> // Will always use preferred placement
+     * ```
+     */
+    readonly autoFlip?: boolean;
+    /**
+     * Additional offset (in pixels) from the anchor element.
+     * Positive values move the popper away from the anchor, negative values move it closer.
+     *
+     * @default 0
+     * @example
+     * ```tsx
+     * <Popper offset={8}>...</Popper> // 8px gap between anchor and popper
+     * <Popper offset={-4}>...</Popper> // Overlap the anchor by 4px
+     * ```
+     */
+    readonly offset?: number;
+    /**
+     * The positioning strategy to use.
+     * - `'fixed'`: Positions relative to the viewport. Works reliably in all cases.
+     * - `'absolute'`: Positions relative to the nearest positioned ancestor.
+     *                 When using 'absolute', make sure a parent element has `position: relative`.
+     *
+     * @default 'absolute'
+     * @example
+     * ```tsx
+     * <Popper positionStrategy="absolute">...</Popper> // Relative to positioned parent  (recommended)
+     * <Popper positionStrategy="fixed">...</Popper> // Relative to viewport
+     * ```
+     */
+    readonly positionStrategy?: PositionStrategy;
+    /**
+     * Minimum distance (in pixels) that the popper must maintain from the viewport edges.
+     * Used to prevent the popper from being positioned too close to the screen boundaries.
+     * The popper will try to flip to another placement if it cannot maintain this margin.
+     *
+     * @default 8
+     * @example
+     * ```tsx
+     * // Larger margin for better visibility
+     * <Popper viewportMargin={16}>...</Popper>
+     *
+     * // No margin (allow touching edges)
+     * <Popper viewportMargin={0}>...</Popper>
+     *
+     * // Different margins for different devices
+     * <Popper viewportMargin={isMobile ? 8 : 16}>...</Popper>
+     * ```
+     */
+    readonly viewportMargin?: number;
+    /**
+     * Overridable components map for customizing the popper's internal structure.
+     * Allows replacing default components with custom implementations while maintaining functionality.
+     *
+     * @default undefined
+     * @example
+     * ```tsx
+     * <Popper
+     *   overrides={{
+     *     Container: CustomContainerComponent,
+     *   }}
+     * >
+     *   ...
+     * </Popper>
+     * ```
+     */
+    readonly overrides?: PopperOverrides;
+}
+export interface PopperOverrides {
+    /**
+     * Custom container component for the popper content.
+     * This component wraps the popper's children and handles positioning styles.
+     *
+     * @default PopperContainer
+     * @example
+     * ```tsx
+     * const CustomContainer = React.forwardRef((props, ref) => (
+     *   <div ref={ref} {...props} className="custom-popper" />
+     * ));
+     *
+     * <Popper overrides={{ Container: CustomContainer }} />
+     * ```
+     */
+    readonly Container?: React.ComponentType<PopperContainerProps & React.RefAttributes<HTMLDivElement>>;
+}
+export declare const PORTAL_ID = "ui-kit-portal";
+declare const _default: React.ForwardRefExoticComponent<PopperProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/Popper/Popper.js

@@ -0,0 +1,99 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+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");
+exports.PORTAL_ID = 'ui-kit-portal';
+const Popper = (props, ref) => {
+    const { isOpen, children, anchorElement, zIndex, overrides, anchorPos = 'auto', positionStrategy = 'absolute', viewportMargin = 30, autoFlip = true, offset = 0 } = props, nativeProps = __rest(props, ["isOpen", "children", "anchorElement", "zIndex", "overrides", "anchorPos", "positionStrategy", "viewportMargin", "autoFlip", "offset"]);
+    const [domLoaded, setDomLoaded] = react_1.default.useState(false);
+    const { actualPlacement, style, popperRef, isVisible, getTransformOrigin } = (0, usePopprer_1.usePopper)({
+        anchorElement,
+        anchorPos,
+        positionStrategy,
+        autoFlip,
+        offset,
+        viewportMargin,
+        isOpen,
+    });
+    const overridesMap = react_1.default.useMemo(() => ({
+        Container: (overrides === null || overrides === void 0 ? void 0 : overrides.Container) || PopperContainer_1.default,
+    }), [overrides]);
+    /**
+     * Client render detection
+     */
+    react_1.default.useEffect(() => {
+        setDomLoaded(true);
+    }, []);
+    const portalEl = react_1.default.useMemo(() => {
+        if (typeof window === 'undefined') {
+            return undefined;
+        }
+        const node = window.document.body.querySelector(`#${exports.PORTAL_ID}`);
+        if (node) {
+            return node;
+        }
+        const newNode = window.document.createElement('div');
+        newNode.setAttribute('id', exports.PORTAL_ID);
+        // Важно для absolute позиционирования
+        if (positionStrategy === 'absolute') {
+            newNode.style.position = 'relative';
+        }
+        window.document.body.appendChild(newNode);
+        return newNode;
+    }, [positionStrategy]);
+    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, 
+            // transform: isVisible ? 'scale(1)' : 'scale(0.95)',
+            transition: 'opacity 120ms ease-in-out, left 120ms cubic-bezier(0.22, 0.61, 0.36, 1), top 120ms cubic-bezier(0.22, 0.61, 0.36, 1)', 
+            // transformOrigin: getTransformOrigin(actualPlacement),
+            pointerEvents: isVisible ? 'auto' : 'none' }), (positionStrategy === 'fixed' && {
+            zIndex: zIndex,
+        })), zIndex: zIndex, "data-placement": actualPlacement, "data-popper-strategy": positionStrategy, ref: el => {
+            popperRef.current = el;
+            if (ref) {
+                if (typeof ref === 'function') {
+                    ref(el);
+                }
+                if (typeof ref === 'object') {
+                    ref.current = el;
+                }
+            }
+        } }), children)), [
+        overridesMap,
+        nativeProps,
+        style,
+        isVisible,
+        getTransformOrigin,
+        actualPlacement,
+        positionStrategy,
+        zIndex,
+        children,
+        ref,
+        popperRef,
+    ]);
+    if (!isOpen) {
+        return null;
+    }
+    if (positionStrategy === 'fixed') {
+        return domLoaded && portalEl ? react_dom_1.default.createPortal(renderNode(), portalEl, exports.PORTAL_ID) : null;
+    }
+    // Для absolute стратегии - рендерим рядом с anchor (in-place)
+    return renderNode();
+};
+exports.default = react_1.default.forwardRef(Popper);

package/Popper/PopperContainer.d.ts

@@ -1,7 +1,9 @@
 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>>;
 export default _default;

package/Popper/PopperContainer.js

@@ -17,14 +17,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 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};
-  pointer-events: none;
-  & > * {
-    pointer-events: all;
-  }
 `;
 const PopperContainer = (props, ref) => {
-    const { children, disablePortal, zIndex } = props, nativeProps = __rest(props, ["children", "disablePortal", "zIndex"]);
-    return (react_1.default.createElement(StyledContainer, Object.assign({ "$disablePortal": disablePortal, "$zIndex": zIndex }, nativeProps, { ref: ref }), children));
+    const { children, disablePortal, zIndex, positionStrategy = 'absolute' } = 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));
 };
 exports.default = react_1.default.forwardRef(PopperContainer);

package/Popper/index.d.ts

@@ -1,22 +1,5 @@
-import React from 'react';
-import { PopperContainerProps } from './PopperContainer';
-export type AnchorPos = 'auto' | 'auto-start-end' | 'top-start' | 'top-end' | 'top' | 'bottom' | 'top-start-end' | 'bottom-start-end' | 'bottom-start' | 'bottom-end' | 'static';
-export interface PopperProps extends React.HTMLAttributes<HTMLDivElement> {
-    readonly isOpen: boolean;
-    readonly anchorElement?: HTMLElement | null;
-    readonly anchorPos?: AnchorPos;
-    readonly zindex?: number;
-    /**
-     * Overridable components map
-     */
-    readonly overrides?: PopperOverrides;
-}
-export interface PopperOverrides {
-    /**
-     * Popper Container
-     */
-    readonly Container?: React.ForwardRefExoticComponent<PopperContainerProps & React.RefAttributes<HTMLDivElement>>;
-}
-export declare const PORTAL_ID = "ui-kit-portal";
-declare const _default: React.ForwardRefExoticComponent<PopperProps & React.RefAttributes<HTMLDivElement>>;
-export default _default;
+import Popper from './Popper';
+export * from './Popper';
+export * from './PopperContainer';
+export * from './usePopprer';
+export default Popper;

package/Popper/index.js

@@ -1,270 +1,24 @@
 "use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-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"));
-exports.PORTAL_ID = 'ui-kit-portal';
-const Popper = (props, ref) => {
-    const { isOpen, children, anchorElement, zindex, overrides, anchorPos = 'auto' } = props, nativeProps = __rest(props, ["isOpen", "children", "anchorElement", "zindex", "overrides", "anchorPos"]);
-    const [style, setStyle] = react_1.default.useState(null);
-    const [domLoaded, setDomLoaded] = react_1.default.useState(false);
-    const disablePortal = react_1.default.useMemo(() => anchorPos === 'static', [anchorPos]);
-    if (anchorPos !== 'static' && typeof anchorElement === 'undefined') {
-        throw new Error('[@via-profit/ui-kit] When the «anchorPos» is «satic» then «anchorElement» most be an element or null, but got undefined');
-    }
-    // if (anchorPos === 'static' && !disablePortal) {
-    //   throw new Error(
-    //     '[@via-profit/ui-kit] When the «anchorPos» is «satic» then «disablePortal» most be false',
-    //   );
-    // }
-    const overridesMap = react_1.default.useMemo(() => ({
-        Container: (overrides === null || overrides === void 0 ? void 0 : overrides.Container) || PopperContainer_1.default,
-    }), [overrides]);
-    /**
-     * Client render detection
-     */
-    react_1.default.useEffect(() => {
-        if (!disablePortal) {
-            setDomLoaded(true);
-        }
-    }, [disablePortal]);
-    const portalEl = react_1.default.useMemo(() => {
-        if (typeof window === 'undefined') {
-            return undefined;
-        }
-        const node = window.document.body.querySelector(`#${exports.PORTAL_ID}`);
-        if (node) {
-            return node;
-        }
-        const newNode = window.document.createElement('div');
-        newNode.setAttribute('id', exports.PORTAL_ID);
-        window.document.body.appendChild(newNode);
-        return newNode;
-    }, []);
-    const calculateStyles = react_1.default.useCallback(() => {
-        // For a static placement
-        if (anchorPos === 'static') {
-            setStyle({
-                // backgroundColor: 'rgba(123, 255, 0, 0.5)',
-                position: 'static',
-            });
-            return;
-        }
-        // For a dinamic position
-        if (anchorElement) {
-            const anchorRect = anchorElement.getBoundingClientRect();
-            switch (anchorPos) {
-                case 'bottom-start':
-                    setStyle({
-                        position: 'absolute',
-                        left: Math.floor(anchorRect.left + window.scrollX),
-                        top: Math.floor(anchorRect.top + window.scrollY + anchorRect.height),
-                        height: Math.floor(window.innerHeight - anchorRect.top - anchorRect.height - 5),
-                        width: Math.floor(window.innerWidth - anchorRect.left - 15),
-                        // backgroundColor: 'rgba(255, 0, 0, .5)',
-                        display: 'flex',
-                        alignItems: 'flex-start',
-                        justifyContent: 'flex-start',
-                    });
-                    break;
-                case 'top-start':
-                    setStyle({
-                        position: 'absolute',
-                        left: Math.floor(anchorRect.left + window.scrollX),
-                        top: window.scrollY,
-                        height: anchorRect.top,
-                        width: Math.floor(window.innerWidth - anchorRect.left - 15),
-                        display: 'flex',
-                        alignItems: 'flex-end',
-                        justifyContent: 'flex-start',
-                        // backgroundColor: 'rgba(0, 102, 255, 0.5)',
-                    });
-                    break;
-                case 'top':
-                    setStyle({
-                        position: 'absolute',
-                        left: Math.floor(anchorRect.left + window.scrollX),
-                        top: window.scrollY,
-                        height: anchorRect.top,
-                        width: anchorRect.width,
-                        // backgroundColor: 'rgba(208, 255, 0, 0.5)',
-                        display: 'flex',
-                        alignItems: 'center',
-                        flexDirection: 'column',
-                        justifyContent: 'flex-end',
-                    });
-                    break;
-                case 'bottom':
-                    setStyle({
-                        position: 'absolute',
-                        left: Math.floor(anchorRect.left + window.scrollX),
-                        top: Math.floor(anchorRect.top + window.scrollY + anchorRect.height),
-                        height: Math.floor(window.innerHeight - anchorRect.top - anchorRect.height - 5),
-                        width: anchorRect.width,
-                        // backgroundColor: 'rgba(0, 247, 255, 0.5)',
-                        display: 'flex',
-                        alignItems: 'center',
-                        flexDirection: 'column',
-                        justifyContent: 'flex-start',
-                    });
-                    break;
-                case 'top-end':
-                    setStyle({
-                        position: 'absolute',
-                        left: 0,
-                        width: Math.floor(anchorRect.left + window.scrollX + anchorRect.width),
-                        top: window.scrollY,
-                        height: anchorRect.top,
-                        display: 'flex',
-                        alignItems: 'flex-end',
-                        justifyContent: 'flex-end',
-                        // backgroundColor: 'rgba(174, 0, 255, 0.5)',
-                    });
-                    break;
-                case 'bottom-end':
-                    setStyle({
-                        position: 'absolute',
-                        left: 0,
-                        width: Math.floor(anchorRect.left + window.scrollX + anchorRect.width),
-                        top: Math.floor(anchorRect.top + window.scrollY + anchorRect.height),
-                        height: Math.floor(window.innerHeight - anchorRect.top - anchorRect.height - 5),
-                        display: 'flex',
-                        alignItems: 'flex-start',
-                        justifyContent: 'flex-end',
-                        // backgroundColor: 'rgba(174, 0, 255, 0.5)',
-                    });
-                    break;
-                case 'top-start-end':
-                    setStyle({
-                        position: 'absolute',
-                        left: Math.floor(anchorRect.left + window.scrollX),
-                        top: window.scrollY,
-                        height: anchorRect.top,
-                        width: anchorRect.width,
-                        // backgroundColor: 'rgba(0, 102, 255, 0.5)',
-                        display: 'flex',
-                        alignItems: 'stretch',
-                        flexDirection: 'column',
-                        justifyContent: 'flex-end',
-                    });
-                    break;
-                case 'bottom-start-end':
-                    setStyle({
-                        position: 'absolute',
-                        left: Math.floor(anchorRect.left + window.scrollX),
-                        top: Math.floor(anchorRect.top + window.scrollY + anchorRect.height),
-                        height: Math.floor(window.innerHeight - anchorRect.top - anchorRect.height - 5),
-                        width: anchorRect.width,
-                        // backgroundColor: 'rgba(255, 81, 0, 0.5)',
-                        display: 'flex',
-                        alignItems: 'stretch',
-                        flexDirection: 'column',
-                        justifyContent: 'flex-start',
-                    });
-                    break;
-                case 'auto-start-end':
-                    {
-                        if (anchorRect.top >
-                            Math.floor(window.innerHeight - anchorRect.top - anchorRect.height - 5)) {
-                            setStyle({
-                                position: 'absolute',
-                                left: Math.floor(anchorRect.left + window.scrollX),
-                                top: window.scrollY,
-                                height: anchorRect.top,
-                                width: anchorRect.width,
-                                display: 'flex',
-                                alignItems: 'stretch',
-                                flexDirection: 'column',
-                                justifyContent: 'flex-end',
-                                // backgroundColor: 'rgba(0, 102, 255, 0.5)',
-                            });
-                        }
-                        else {
-                            setStyle({
-                                position: 'absolute',
-                                left: Math.floor(anchorRect.left + window.scrollX),
-                                top: Math.floor(anchorRect.top + window.scrollY + anchorRect.height),
-                                height: Math.floor(window.innerHeight - anchorRect.top - anchorRect.height - 5),
-                                width: anchorRect.width,
-                                display: 'flex',
-                                alignItems: 'stretch',
-                                flexDirection: 'column',
-                                justifyContent: 'flex-start',
-                                // backgroundColor: 'rgba(255, 187, 0, 0.5)',
-                            });
-                        }
-                    }
-                    break;
-                case 'auto':
-                default:
-                    {
-                        if (anchorRect.top >
-                            Math.floor(window.innerHeight - anchorRect.top - anchorRect.height - 5)) {
-                            setStyle({
-                                position: 'absolute',
-                                left: Math.floor(anchorRect.left + window.scrollX),
-                                top: window.scrollY,
-                                height: anchorRect.top,
-                                width: Math.floor(window.innerWidth - anchorRect.left - 15),
-                                display: 'flex',
-                                alignItems: 'flex-end',
-                                // backgroundColor: 'rgba(0, 102, 255, 0.5)',
-                            });
-                        }
-                        else {
-                            setStyle({
-                                position: 'absolute',
-                                left: Math.floor(anchorRect.left + window.scrollX),
-                                top: Math.floor(anchorRect.top + window.scrollY + anchorRect.height),
-                                height: Math.floor(window.innerHeight - anchorRect.top - anchorRect.height - 5),
-                                width: Math.floor(window.innerWidth - anchorRect.left - 15),
-                                // backgroundColor: 'rgba(255, 0, 0, .5)',
-                                display: 'flex',
-                                alignItems: 'flex-start',
-                            });
-                        }
-                    }
-                    break;
-            }
-            return;
-        }
-        setStyle(null);
-    }, [anchorElement, anchorPos]);
-    react_1.default.useEffect(() => {
-        window.addEventListener('resize', calculateStyles);
-        window.addEventListener('scroll', calculateStyles);
-        return () => {
-            window.removeEventListener('resize', calculateStyles);
-            window.removeEventListener('scroll', calculateStyles);
-        };
-    }, [calculateStyles]);
-    react_1.default.useEffect(() => {
-        if (isOpen && (anchorElement || anchorPos === 'static')) {
-            calculateStyles();
-        }
-    }, [isOpen, anchorElement, anchorPos, calculateStyles]);
-    const renderNode = react_1.default.useCallback(() => (react_1.default.createElement(overridesMap.Container, Object.assign({}, nativeProps, { style: Object.assign(Object.assign({}, style), nativeProps.style), zIndex: zindex, disablePortal: disablePortal, ref: ref }), style && children)), [children, disablePortal, nativeProps, overridesMap, ref, style, zindex]);
-    if (!isOpen || !style) {
-        return null;
-    }
-    if (disablePortal) {
-        return renderNode();
-    }
-    return domLoaded && portalEl ? react_dom_1.default.createPortal(renderNode(), portalEl, exports.PORTAL_ID) : null;
-};
-exports.default = react_1.default.forwardRef(Popper);
+const Popper_1 = __importDefault(require("./Popper"));
+__exportStar(require("./Popper"), exports);
+__exportStar(require("./PopperContainer"), exports);
+__exportStar(require("./usePopprer"), exports);
+exports.default = Popper_1.default;