@via-profit/ui-kit 0.2.4 → 0.2.5

package/Autocomplete/AutocompleteContainer.d.ts

@@ -2,7 +2,8 @@ import React from 'react';
 import { TextFieldProps } from '../TextField';
 import { PositionStrategy } from '../Popper';
 import { AnchorPos, GetOptionSelected, MenuItemProps, OnRequestClose, Value } from '../Menu';
-export interface AutocompleteProps<T, Multiple extends boolean | undefined = undefined> extends Omit<TextFieldProps, 'value' | 'onChange' | 'children' | 'overrides'> {
+export type AutocompleteTextFieldProps = Omit<TextFieldProps, 'value' | 'onChange' | 'children' | 'overrides'>;
+export interface AutocompleteProps<T, Multiple extends boolean | undefined = undefined> extends AutocompleteTextFieldProps {
     readonly items: readonly T[];
     readonly value: Value<T, Multiple>;
     /**

package/Calendar/CalendarComponent.d.ts

@@ -217,9 +217,11 @@ export type CalendarBadge = {
 };
 export type CalendarRef<IsRangeValue extends boolean | undefined = undefined> = {
     readonly setView: (view: CalendarView) => void;
+    readonly setViews: (views: readonly CalendarView[]) => void;
     readonly getActiveView: () => CalendarView;
     readonly setValue: (value: CalendarValue<IsRangeValue>) => void;
     readonly setCalendarDate: (date: Date) => void;
+    readonly getCalendarDate: () => Date;
     readonly reset: () => void;
 };
 declare const CalendarComponent: React.ForwardRefExoticComponent<CalendarProps<boolean | undefined> & React.RefAttributes<CalendarRef<boolean | undefined>>>;

package/Calendar/CalendarComponent.js

@@ -199,15 +199,19 @@ const CalendarComponent = react_1.default.forwardRef((props, ref) => {
     /**
      * List of possibility views
      */
-    const [views] = react_1.default.useState(() => computeViews(inputViews, range));
+    const [views, setComputedViews] = react_1.default.useState(() => computeViews(inputViews, range));
+    const setViews = react_1.default.useCallback((variants) => setComputedViews(variants), []);
     const selectView = react_1.default.useCallback((view) => {
         var _a;
+        if (!views.includes(view)) {
+            setViews([...views, view]);
+        }
         setView(view);
         const index = views.findIndex(v => v === view);
         if (index > -1) {
             (_a = swiperRef.current) === null || _a === void 0 ? void 0 : _a.goToIndex(index);
         }
-    }, [views]);
+    }, [setViews, views]);
     const resetVariablesRef = react_1.default.useRef({
         calendarDate,
         value,
@@ -503,6 +507,7 @@ const CalendarComponent = react_1.default.forwardRef((props, ref) => {
     ]);
     const initialIndex = react_1.default.useMemo(() => views.findIndex(v => v === view), [views, view]);
     const getActiveView = react_1.default.useCallback(() => view, [view]);
+    const getCalendarDate = react_1.default.useCallback(() => calendarDate, [calendarDate]);
     /**
      * API
      */
@@ -510,9 +515,11 @@ const CalendarComponent = react_1.default.forwardRef((props, ref) => {
         setView: selectView,
         reset: handleReset,
         setValue,
+        getCalendarDate,
         setCalendarDate,
         getActiveView,
-    }), [selectView, handleReset, getActiveView]);
+        setViews,
+    }), [selectView, handleReset, getActiveView, setViews, getCalendarDate]);
     return (react_1.default.createElement(overridesMap.Paper, null,
         react_1.default.createElement(overridesMap.Header, null,
             typeof heading !== 'undefined' && react_1.default.createElement(overridesMap.Heading, null, heading),

package/Calendar/use-calendar.d.ts

@@ -1,4 +1,4 @@
-export type CalendarValue<Range> = Range extends undefined ? Date | null : [Date, Date] | [Date | null] | null;
+export type CalendarValue<Range> = Range extends undefined ? Date | null : [Date, Date] | [Date, Date | null] | null;
 export type WeekDayName = 'sunday' | 'monday' | 'tuesday' | 'wednesday' | 'thursday' | 'friday' | 'saturday';
 export type Day = {
     readonly date: Date;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@via-profit/ui-kit",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "description": "UI Kit",
   "repository": {
     "type": "git",

package/Autocomplete/AutocompleteTextField.d.ts

@@ -1,18 +0,0 @@
-import React from 'react';
-import { TextFieldProps } from '../TextField';
-import { AnchorPos } from '../Menu';
-export interface AutocompleteTextFieldProps extends TextFieldProps {
-    /**
-     * Text field loading state\
-     * If `true` then text field has been contained the loading indicator, otherwise - nop
-     */
-    readonly isLoading?: boolean;
-    readonly anchorPos?: AnchorPos;
-    readonly isOpen?: boolean;
-    /**
-     * Native <input> element reference
-     */
-    readonly inputRef?: React.MutableRefObject<HTMLInputElement | null> | React.RefCallback<HTMLInputElement>;
-}
-declare const _default: React.ForwardRefExoticComponent<AutocompleteTextFieldProps & React.RefAttributes<HTMLDivElement>>;
-export default _default;

package/Autocomplete/AutocompleteTextField.js

@@ -1,71 +0,0 @@
-"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 });
-const react_1 = __importDefault(require("react"));
-const styled_1 = __importDefault(require("@emotion/styled"));
-const react_2 = require("@emotion/react");
-const TextField_1 = __importDefault(require("../TextField"));
-const TextFieldInputWrapper_1 = __importDefault(require("../TextField/TextFieldInputWrapper"));
-const StyledTextFieldInputWrapper = (0, styled_1.default)(TextFieldInputWrapper_1.default) `
-  ${({ theme, $isOpen, $anchorPos }) => $isOpen &&
-    $anchorPos &&
-    ['bottom-fill', 'top-fill'].includes($anchorPos) &&
-    (0, react_2.css) `
-      border-width: 1px;
-      border-style: solid;
-      border-color: ${theme.isDark
-        ? theme.color.textPrimary.darken(100).toString()
-        : theme.color.textPrimary.lighten(150).toString()};
-    `};
-
-  ${({ focused, $anchorPos, $isOpen }) => $isOpen &&
-    $anchorPos &&
-    ['bottom-fill', 'top-fill'].includes($anchorPos) &&
-    focused &&
-    (0, react_2.css) `
-      outline: none;
-    `};
-
-  ${({ $anchorPos, $isOpen }) => $isOpen &&
-    $anchorPos === 'bottom-fill' &&
-    (0, react_2.css) `
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
-      border-bottom: 0;
-    `};
-
-  ${({ $anchorPos, $isOpen }) => $isOpen &&
-    $anchorPos === 'top-fill' &&
-    (0, react_2.css) `
-      border-top-left-radius: 0;
-      border-top-right-radius: 0;
-      border-top: 0;
-    `};
-`;
-const WrapperContext = react_1.default.createContext({ anchorPos: undefined, isOpen: false });
-const InputWrapper = react_1.default.forwardRef(function StyledInputWrapper(props, ref) {
-    const ctx = react_1.default.useContext(WrapperContext);
-    const { anchorPos, isOpen } = ctx;
-    return (react_1.default.createElement(StyledTextFieldInputWrapper, Object.assign({ "$anchorPos": anchorPos, "$isOpen": isOpen, ref: ref }, props)));
-});
-const AutocompleteTextField = (props, ref) => {
-    const { anchorPos, isOpen } = props, restProps = __rest(props, ["anchorPos", "isOpen"]);
-    return (react_1.default.createElement(WrapperContext.Provider, { value: { anchorPos, isOpen } },
-        react_1.default.createElement(TextField_1.default, Object.assign({ overrides: {
-                InputWrapper,
-            } }, restProps, { ref: ref }))));
-};
-exports.default = react_1.default.forwardRef(AutocompleteTextField);

package/Highlighted/splitTextIntoParts.d.ts

@@ -1,5 +0,0 @@
-export declare const splitTextIntoParts: (text: string, regex: RegExp, patterns: string[]) => {
-    text: string;
-    highlighted: boolean;
-}[];
-export default splitTextIntoParts;

package/Highlighted/splitTextIntoParts.js

@@ -1,46 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.splitTextIntoParts = void 0;
-const MAX_MATCHES = 1000;
-const splitTextIntoParts = (text, regex, patterns) => {
-    if (patterns.length === 0) {
-        return [{ text, highlighted: false }];
-    }
-    const parts = [];
-    let lastIndex = 0;
-    let match;
-    let matchCount = 0;
-    const cleanRegex = new RegExp(regex.source, regex.flags);
-    while ((match = cleanRegex.exec(text)) !== null) {
-        matchCount++;
-        if (matchCount > MAX_MATCHES) {
-            console.warn(`splitTextIntoParts: Too many matches (${matchCount}), stopping at ${MAX_MATCHES} matches`);
-            break;
-        }
-        const matchStart = match.index;
-        const matchEnd = matchStart + match[0].length;
-        if (matchStart > lastIndex) {
-            parts.push({
-                text: text.substring(lastIndex, matchStart),
-                highlighted: false,
-            });
-        }
-        parts.push({
-            text: match[0],
-            highlighted: true,
-        });
-        lastIndex = matchEnd;
-        if (match[0].length === 0) {
-            break;
-        }
-    }
-    if (lastIndex < text.length) {
-        parts.push({
-            text: text.substring(lastIndex),
-            highlighted: false,
-        });
-    }
-    return parts;
-};
-exports.splitTextIntoParts = splitTextIntoParts;
-exports.default = exports.splitTextIntoParts;

package/Popper/usePopprer.d.ts

@@ -1,110 +0,0 @@
-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 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: ({ anchorElement, anchorPos, positionStrategy, autoFlip, offset, viewportMargin, isOpen, }: UsePopperProps) => UsePopperResult;
-export default usePopper;

package/Popper/usePopprer.js

@@ -1,505 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.usePopper = exports.findScrollableAncestor = void 0;
-const react_1 = __importDefault(require("react"));
-/**
- * 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
- */
-const findScrollableAncestor = (element, includeHidden = false) => {
-    if (!element) {
-        return null;
-    }
-    // Helper to check if an element is scrollable
-    const isScrollable = (el) => {
-        const style = window.getComputedStyle(el);
-        const overflow = style.overflow + style.overflowY + style.overflowX;
-        // Check if element has overflow that enables scrolling
-        const hasOverflow = overflow.includes('auto') ||
-            overflow.includes('scroll') ||
-            (includeHidden && overflow.includes('hidden'));
-        if (!hasOverflow) {
-            return false;
-        }
-        // Check if element actually has scrollable content
-        return el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth;
-    };
-    // Start from parent (skip the element itself)
-    let parent = element.parentElement;
-    while (parent) {
-        if (isScrollable(parent)) {
-            return parent;
-        }
-        parent = parent.parentElement;
-    }
-    // If no scrollable ancestor found, return window (which is scrollable)
-    return window;
-};
-exports.findScrollableAncestor = findScrollableAncestor;
-const usePopper = ({ anchorElement, anchorPos = 'auto', positionStrategy = 'fixed', autoFlip = true, offset = 0, viewportMargin = 10, isOpen = false, }) => {
-    const [actualPlacement, setActualPlacement] = react_1.default.useState(anchorPos);
-    const [style, setStyle] = react_1.default.useState(null);
-    const [isVisible, setIsVisible] = react_1.default.useState(false);
-    const popperRef = react_1.default.useRef(null);
-    // Finding the nearest scrollable ancestor
-    const scrollableAncestor = react_1.default.useMemo(() => {
-        if (!anchorElement || typeof window === 'undefined') {
-            return null;
-        }
-        return (0, exports.findScrollableAncestor)(anchorElement);
-    }, [anchorElement]);
-    // Synchronizing actualPlacement with anchorPos
-    react_1.default.useEffect(() => {
-        if (actualPlacement !== anchorPos) {
-            setActualPlacement(anchorPos);
-        }
-    }, [actualPlacement, anchorPos]);
-    const getPositionStyle = react_1.default.useCallback((props) => {
-        const { place, anchorRect, popperRect, forViewportCheck = false } = props;
-        const [direction, modifier = ''] = place.split('-');
-        let left = anchorRect.left;
-        let top = anchorRect.top;
-        let width = undefined;
-        // Calculating the position relative to the viewport
-        switch (direction) {
-            case 'top':
-                top = anchorRect.top - popperRect.height - offset;
-                if (modifier === 'fill') {
-                    left = anchorRect.left;
-                    width = anchorRect.width;
-                }
-                else if (modifier === 'left' || modifier === 'start') {
-                    left = anchorRect.left;
-                }
-                else if (modifier === 'right' || modifier === 'end') {
-                    left = anchorRect.right - popperRect.width;
-                }
-                else {
-                    left = anchorRect.left + (anchorRect.width - popperRect.width) / 2;
-                }
-                break;
-            case 'bottom':
-                top = anchorRect.bottom + offset;
-                if (modifier === 'fill') {
-                    left = anchorRect.left;
-                    width = anchorRect.width;
-                }
-                else if (modifier === 'left' || modifier === 'start') {
-                    left = anchorRect.left;
-                }
-                else if (modifier === 'right' || modifier === 'end') {
-                    left = anchorRect.right - popperRect.width;
-                }
-                else {
-                    left = anchorRect.left + (anchorRect.width - popperRect.width) / 2;
-                }
-                break;
-            case 'left':
-                left = anchorRect.left - popperRect.width - offset;
-                if (modifier === 'top' || modifier === 'start') {
-                    top = anchorRect.top;
-                }
-                else if (modifier === 'bottom' || modifier === 'end') {
-                    top = anchorRect.bottom - popperRect.height;
-                }
-                else {
-                    top = anchorRect.top + (anchorRect.height - popperRect.height) / 2;
-                }
-                break;
-            case 'right':
-                left = anchorRect.right + offset;
-                if (modifier === 'top' || modifier === 'start') {
-                    top = anchorRect.top;
-                }
-                else if (modifier === 'bottom' || modifier === 'end') {
-                    top = anchorRect.bottom - popperRect.height;
-                }
-                else {
-                    top = anchorRect.top + (anchorRect.height - popperRect.height) / 2;
-                }
-                break;
-            default:
-                left = anchorRect.left + (anchorRect.width - popperRect.width) / 2;
-                top = anchorRect.bottom + offset;
-        }
-        // Returning the viewport coordinates for verification or the final coordinates
-        if (forViewportCheck) {
-            return { left, top, width };
-        }
-        // For the final positioning, we take into account the strategy
-        if (positionStrategy === 'absolute') {
-            return {
-                left: left + window.scrollX,
-                top: top + window.scrollY,
-                width,
-            };
-        }
-        return { left, top, width };
-    }, [offset, positionStrategy]);
-    // const clampPopperToContainer = React.useCallback(
-    //   (style: { left: number; top: number; width?: number }, _popperRect: DOMRect) => style,
-    //   [],
-    // );
-    const clampPopperToContainer = react_1.default.useCallback((style, popperRect) => {
-        // Если нет scrollableAncestor, используем document.documentElement как fallback
-        const container = scrollableAncestor instanceof HTMLElement ? scrollableAncestor : document.documentElement;
-        const containerRect = container.getBoundingClientRect();
-        // Базовые границы контейнера с учетом отступа
-        let minLeft = containerRect.left + viewportMargin;
-        let maxLeft = containerRect.right - popperRect.width - viewportMargin;
-        let minTop = containerRect.top + viewportMargin;
-        let maxTop = containerRect.bottom - popperRect.height - viewportMargin;
-        // Для fixed позиционирования добавляем ограничения viewport
-        if (positionStrategy === 'fixed') {
-            // Границы viewport с учетом отступа
-            const viewportMinLeft = viewportMargin;
-            const viewportMaxLeft = window.innerWidth - popperRect.width - viewportMargin;
-            const viewportMinTop = viewportMargin;
-            const viewportMaxTop = window.innerHeight - popperRect.height - viewportMargin;
-            // Берем пересечение границ контейнера и viewport
-            minLeft = Math.max(minLeft, viewportMinLeft);
-            maxLeft = Math.min(maxLeft, viewportMaxLeft);
-            minTop = Math.max(minTop, viewportMinTop);
-            maxTop = Math.min(maxTop, viewportMaxTop);
-        }
-        // Убеждаемся, что границы валидны (min не больше max)
-        const validMinLeft = Math.min(minLeft, maxLeft);
-        const validMaxLeft = Math.max(minLeft, maxLeft);
-        const validMinTop = Math.min(minTop, maxTop);
-        const validMaxTop = Math.max(minTop, maxTop);
-        // Ограничиваем позицию
-        const clampedLeft = Math.max(validMinLeft, Math.min(style.left, validMaxLeft));
-        const clampedTop = Math.max(validMinTop, Math.min(style.top, validMaxTop));
-        return {
-            left: clampedLeft,
-            top: clampedTop,
-            width: style.width,
-        };
-    }, [positionStrategy, scrollableAncestor, viewportMargin]);
-    const checkIfViewportFits = react_1.default.useCallback((style, popperRect) => {
-        const left = style.left;
-        const top = style.top;
-        const right = left + popperRect.width;
-        const bottom = top + popperRect.height;
-        if (positionStrategy === 'absolute' && scrollableAncestor instanceof HTMLElement) {
-            const containerRect = scrollableAncestor.getBoundingClientRect();
-            const relativeLeft = left - containerRect.left;
-            const relativeTop = top - containerRect.top;
-            const relativeRight = relativeLeft + popperRect.width;
-            const relativeBottom = relativeTop + popperRect.height;
-            const isWithinHorizontal = relativeLeft >= viewportMargin && relativeRight <= containerRect.width - viewportMargin;
-            const isWithinVertical = relativeTop >= viewportMargin && relativeBottom <= containerRect.height - viewportMargin;
-            return isWithinHorizontal && isWithinVertical;
-        }
-        const viewportWidth = window.innerWidth;
-        const viewportHeight = window.innerHeight;
-        const isWithinHorizontal = left >= viewportMargin && right <= viewportWidth - viewportMargin;
-        const isWithinVertical = top >= viewportMargin && bottom <= viewportHeight - viewportMargin;
-        const hasValidPosition = left >= 0 && top >= 0;
-        return hasValidPosition && isWithinHorizontal && isWithinVertical;
-    }, [viewportMargin, scrollableAncestor, positionStrategy]);
-    const placementsOrder = react_1.default.useMemo(() => {
-        const basePlacements = {
-            top: ['top', 'top-left', 'top-right', 'top-start', 'top-end'],
-            bottom: ['bottom', 'bottom-left', 'bottom-right', 'bottom-start', 'bottom-end'],
-            left: ['left', 'left-top', 'left-bottom'],
-            right: ['right', 'right-top', 'right-bottom'],
-        };
-        const allPlacements = [
-            ...basePlacements.top,
-            ...basePlacements.bottom,
-            ...basePlacements.left,
-            ...basePlacements.right,
-        ];
-        const order = {};
-        allPlacements.forEach(placement => {
-            const [direction] = placement.split('-');
-            // Priority: same direction > opposite > the rest
-            const opposite = direction === 'top'
-                ? 'bottom'
-                : direction === 'bottom'
-                    ? 'top'
-                    : direction === 'left'
-                        ? 'right'
-                        : 'left';
-            order[placement] = [
-                placement,
-                ...basePlacements[direction].filter(p => p !== placement),
-                ...(basePlacements[opposite] || []),
-                ...(direction !== 'left' && direction !== 'right' ? basePlacements.left : []),
-                ...(direction !== 'left' && direction !== 'right' ? basePlacements.right : []),
-            ];
-        });
-        // console.log(order);
-        return order;
-    }, []);
-    const getPreferredPlacements = react_1.default.useCallback((preferredPlacement, anchorRect, popperRect) => {
-        // Check the auto placements
-        if (preferredPlacement.startsWith('auto')) {
-            const [, preferredDirection = 'bottom'] = preferredPlacement.split('-');
-            const allPlacements = [
-                'bottom',
-                'bottom-start',
-                'bottom-end',
-                'bottom-left',
-                'bottom-right',
-                'top',
-                'top-left',
-                'top-right',
-                'top-start',
-                'top-end',
-                'left',
-                'left-top',
-                'left-bottom',
-                'right',
-                'right-top',
-                'right-bottom',
-            ];
-            // Sorting placements
-            const sortedPlacements = [...allPlacements].sort((a, b) => {
-                const aDir = a.split('-')[0];
-                const bDir = b.split('-')[0];
-                if (aDir === preferredDirection && bDir !== preferredDirection)
-                    return -1;
-                if (aDir !== preferredDirection && bDir === preferredDirection)
-                    return 1;
-                return 0;
-            });
-            for (const place of sortedPlacements) {
-                const viewportStyle = getPositionStyle({
-                    place,
-                    anchorRect,
-                    popperRect,
-                    forViewportCheck: true,
-                });
-                const fits = checkIfViewportFits(viewportStyle, popperRect);
-                if (fits) {
-                    const finalStyle = getPositionStyle({
-                        place,
-                        anchorRect,
-                        popperRect,
-                        forViewportCheck: false,
-                    });
-                    return {
-                        found: true,
-                        placement: place,
-                        style: clampPopperToContainer(finalStyle, popperRect),
-                    };
-                }
-            }
-        }
-        if (!autoFlip) {
-            const finalStyle = getPositionStyle({
-                place: preferredPlacement,
-                anchorRect,
-                popperRect,
-                forViewportCheck: false,
-            });
-            return {
-                found: false,
-                placement: preferredPlacement,
-                style: clampPopperToContainer(finalStyle, popperRect),
-            };
-        }
-        /**
-         * bottom-fill, top-fill
-         */
-        if (preferredPlacement.endsWith('fill')) {
-            const [preferredDirection = 'bottom'] = preferredPlacement.split('-');
-            const allPlacements = ['top-fill', 'bottom-fill'];
-            const sortedPlacements = [...allPlacements].sort((a, b) => {
-                const aDir = a.split('-')[0];
-                const bDir = b.split('-')[0];
-                if (aDir === preferredDirection && bDir !== preferredDirection)
-                    return -1;
-                if (aDir !== preferredDirection && bDir === preferredDirection)
-                    return 1;
-                return 0;
-            });
-            for (const place of sortedPlacements) {
-                const viewportStyle = getPositionStyle({
-                    place,
-                    anchorRect,
-                    popperRect,
-                    forViewportCheck: true,
-                });
-                const fits = checkIfViewportFits(viewportStyle, popperRect);
-                if (fits) {
-                    const finalStyle = getPositionStyle({
-                        place,
-                        anchorRect,
-                        popperRect,
-                        forViewportCheck: false,
-                    });
-                    return {
-                        found: true,
-                        placement: place,
-                        style: clampPopperToContainer(finalStyle, popperRect),
-                    };
-                }
-            }
-        }
-        /**
-         * Other
-         */
-        const order = placementsOrder[preferredPlacement] || placementsOrder.bottom;
-        for (const place of order) {
-            const viewportStyle = getPositionStyle({
-                place,
-                anchorRect,
-                popperRect,
-                forViewportCheck: true,
-            });
-            const fits = checkIfViewportFits(viewportStyle, popperRect);
-            if (fits) {
-                const finalStyle = getPositionStyle({
-                    place,
-                    anchorRect,
-                    popperRect,
-                    forViewportCheck: false,
-                });
-                return {
-                    found: true,
-                    placement: place,
-                    style: clampPopperToContainer(finalStyle, popperRect),
-                };
-            }
-        }
-        const finalStyle = getPositionStyle({
-            place: preferredPlacement,
-            anchorRect,
-            popperRect,
-            forViewportCheck: false,
-        });
-        return {
-            found: false,
-            placement: preferredPlacement,
-            style: clampPopperToContainer(finalStyle, popperRect),
-        };
-    }, [autoFlip, getPositionStyle, checkIfViewportFits, clampPopperToContainer, placementsOrder]);
-    const calculatePosition = react_1.default.useCallback(() => {
-        if (!anchorElement || !popperRef.current) {
-            return;
-        }
-        const anchorRect = anchorElement.getBoundingClientRect();
-        const popperRect = popperRef.current.getBoundingClientRect();
-        const { style, placement, found } = getPreferredPlacements(anchorPos, anchorRect, popperRect);
-        if (found) {
-            setActualPlacement(placement);
-        }
-        setStyle(style);
-    }, [anchorElement, anchorPos, getPreferredPlacements]);
-    // const getTransformOrigin = React.useCallback((placement: AnchorPos): string => {
-    //   if (placement.startsWith('top')) return 'bottom center';
-    //   if (placement.startsWith('bottom')) return 'top center';
-    //   if (placement.startsWith('left')) return 'right center';
-    //   if (placement.startsWith('right')) return 'left center';
-    //
-    //   return 'top center';
-    // }, []);
-    /**
-     * Open / Close popper logic
-     */
-    react_1.default.useEffect(() => {
-        if (!isOpen) {
-            setIsVisible(false);
-            setStyle(null);
-        }
-        else if (anchorElement && isOpen && popperRef.current) {
-            calculatePosition();
-            setIsVisible(true);
-        }
-    }, [actualPlacement, anchorElement, getPreferredPlacements, isOpen, calculatePosition]);
-    /**
-     * The anchor element changes
-     */
-    react_1.default.useEffect(() => {
-        if (!isOpen || !anchorElement) {
-            return;
-        }
-        const observer = new MutationObserver(() => {
-            window.requestAnimationFrame(() => {
-                // console.log('The anchor element was change');
-                calculatePosition();
-            });
-        });
-        observer.observe(anchorElement, {
-            attributes: true,
-            childList: true,
-            subtree: true,
-        });
-        // eslint-disable-next-line consistent-return
-        return () => {
-            observer.disconnect();
-        };
-    }, [isOpen, anchorElement, calculatePosition]);
-    /**
-     * On scroll - recalculate position
-     */
-    react_1.default.useEffect(() => {
-        if (!isOpen || !scrollableAncestor) {
-            return;
-        }
-        const handleScroll = () => {
-            window.requestAnimationFrame(() => {
-                calculatePosition();
-            });
-        };
-        // parent scroll listener
-        if (scrollableAncestor instanceof HTMLElement) {
-            scrollableAncestor.addEventListener('scroll', handleScroll, { passive: true });
-        }
-        else if (scrollableAncestor === window) {
-            window.addEventListener('scroll', handleScroll, { passive: true });
-        }
-        // eslint-disable-next-line consistent-return
-        return () => {
-            if (scrollableAncestor instanceof HTMLElement) {
-                scrollableAncestor.removeEventListener('scroll', handleScroll);
-            }
-            else if (scrollableAncestor === window) {
-                window.removeEventListener('scroll', handleScroll);
-            }
-        };
-    }, [isOpen, scrollableAncestor, calculatePosition]);
-    /**
-     * On window resize - recalculate position
-     */
-    react_1.default.useEffect(() => {
-        if (!isOpen) {
-            return;
-        }
-        const handleResize = () => {
-            window.requestAnimationFrame(() => {
-                calculatePosition();
-            });
-        };
-        // parent scroll listener
-        window.addEventListener('resize', handleResize);
-        // eslint-disable-next-line consistent-return
-        return () => {
-            window.removeEventListener('resize', handleResize);
-        };
-    }, [calculatePosition, isOpen]);
-    return {
-        actualPlacement,
-        style,
-        popperRef,
-        isVisible,
-        scrollableAncestor,
-        calculatePosition,
-        setActualPlacement,
-        setStyle,
-        setIsVisible,
-    };
-};
-exports.usePopper = usePopper;
-exports.default = exports.usePopper;