@ultraviolet/ui 3.0.0-beta.27 → 3.0.0-beta.28

package/dist/components/PasswordCheck/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { CheckCircleOutlineIcon, CloseCircleOutlineIcon } from "@ultraviolet/icons";
 import { Stack } from "../Stack/index.js";
 import { Text } from "../Text/index.js";
@@ -9,10 +9,32 @@ const PasswordCheck = ({
   className,
   "data-testid": dataTestId,
   style
-}) => /* @__PURE__ */ jsx("div", { className: `${className ? `${className} ` : ""}${passwordCheckContainer}`, "data-testid": dataTestId, style, children: rules.map((rule) => /* @__PURE__ */ jsxs(Stack, { alignItems: "center", direction: "row", gap: 1, children: [
-  rule.valid ? /* @__PURE__ */ jsx(CheckCircleOutlineIcon, { prominence: "weak", sentiment: "success", size: "large" }) : /* @__PURE__ */ jsx(CloseCircleOutlineIcon, { prominence: "weak", sentiment: "neutral", size: "large" }),
-  /* @__PURE__ */ jsx(Text, { as: "p", variant: "bodySmall", children: rule.text })
-] }, rule.name)) });
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: `${className ? `${className} ` : ""}${passwordCheckContainer}`,
+    "data-testid": dataTestId,
+    style,
+    children: rules.map((rule) => /* @__PURE__ */ jsxs(Stack, { alignItems: "center", direction: "row", gap: 1, children: [
+      rule.valid ? /* @__PURE__ */ jsx(
+        CheckCircleOutlineIcon,
+        {
+          prominence: "weak",
+          sentiment: "success",
+          size: "large"
+        }
+      ) : /* @__PURE__ */ jsx(
+        CloseCircleOutlineIcon,
+        {
+          prominence: "weak",
+          sentiment: "neutral",
+          size: "large"
+        }
+      ),
+      /* @__PURE__ */ jsx(Text, { as: "p", variant: "bodySmall", children: rule.text })
+    ] }, rule.name))
+  }
+);
 export {
   PasswordCheck
 };

package/dist/components/PieChart/Legends.d.ts

@@ -5,5 +5,5 @@ type LegendsProps = {
     onFocusChange: (index?: string) => void;
     colors: string[];
 };
-export declare const Legends: ({ focused, data, onFocusChange, colors, }: LegendsProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Legends: ({ focused, data, onFocusChange, colors, }: LegendsProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/PieChart/Legends.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { Tooltip } from "../Tooltip/index.js";
 import { listPie, listItemPie, toggleBoxPie, bulletPie, colorBullet, labelPie, textPie, linePie, progressiveLinePie, valuePie } from "./styles.css.js";
@@ -12,25 +12,57 @@ const Legends = ({
 }) => /* @__PURE__ */ jsx("ul", { className: listPie, children: data?.map((item, index) => {
   const isSegmentFocused = focused !== void 0 && item.id === focused;
   const id = `chart-legend-${item.id}`;
-  return /* @__PURE__ */ jsx(Tooltip, { id, text: /* @__PURE__ */ jsx(Tooltip$1, { data: item }), visible: isSegmentFocused, children: /* @__PURE__ */ jsxs("li", { className: listItemPie({
-    isFocused: isSegmentFocused
-  }), children: [
-    /* @__PURE__ */ jsx("div", { className: toggleBoxPie, "data-testid": id, onBlur: () => onFocusChange(), onFocus: () => onFocusChange(item.id), onMouseOut: () => onFocusChange(), onMouseOver: () => onFocusChange(item.id) }),
-    /* @__PURE__ */ jsx("div", { className: bulletPie({
-      isFocused: isSegmentFocused
-    }), color: colors[index], id: `chart-legend-${item.id}`, style: assignInlineVars({
-      [colorBullet]: colors[index]
-    }) }),
-    /* @__PURE__ */ jsxs("div", { className: labelPie, children: [
-      /* @__PURE__ */ jsx("span", { className: textPie({
-        isFocused: isSegmentFocused
-      }), children: item.name }),
-      /* @__PURE__ */ jsx("span", { className: linePie, children: /* @__PURE__ */ jsx("span", { className: progressiveLinePie({
-        isFocused: isSegmentFocused
-      }) }) })
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: valuePie[isSegmentFocused ? "isFocused" : "default"], children: item.value })
-  ] }) }, item.id);
+  return /* @__PURE__ */ jsx(
+    Tooltip,
+    {
+      id,
+      text: /* @__PURE__ */ jsx(Tooltip$1, { data: item }),
+      visible: isSegmentFocused,
+      children: /* @__PURE__ */ jsxs("li", { className: listItemPie({ isFocused: isSegmentFocused }), children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: toggleBoxPie,
+            "data-testid": id,
+            onBlur: () => onFocusChange(),
+            onFocus: () => onFocusChange(item.id),
+            onMouseOut: () => onFocusChange(),
+            onMouseOver: () => onFocusChange(item.id)
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: bulletPie({ isFocused: isSegmentFocused }),
+            color: colors[index],
+            id: `chart-legend-${item.id}`,
+            style: assignInlineVars({
+              [colorBullet]: colors[index]
+            })
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: labelPie, children: [
+          /* @__PURE__ */ jsx("span", { className: textPie({ isFocused: isSegmentFocused }), children: item.name }),
+          /* @__PURE__ */ jsx("span", { className: linePie, children: /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: progressiveLinePie({
+                isFocused: isSegmentFocused
+              })
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: valuePie[isSegmentFocused ? "isFocused" : "default"],
+            children: item.value
+          }
+        )
+      ] })
+    },
+    item.id
+  );
 }) });
 export {
   Legends

package/dist/components/PieChart/Tooltip.d.ts

@@ -8,5 +8,5 @@ type TooltipProps = {
         }[] | null;
     };
 };
-export declare const Tooltip: ({ data }: TooltipProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Tooltip: ({ data }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/PieChart/Tooltip.js

@@ -1,10 +1,8 @@
 "use client";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Text } from "../Text/index.js";
 import { listTooltipPie, itemTooltipPie } from "./styles.css.js";
-const Tooltip = ({
-  data
-}) => /* @__PURE__ */ jsx("div", { role: "tooltip", tabIndex: -1, children: /* @__PURE__ */ jsxs("ul", { className: listTooltipPie, children: [
+const Tooltip = ({ data }) => /* @__PURE__ */ jsx("div", { role: "tooltip", tabIndex: -1, children: /* @__PURE__ */ jsxs("ul", { className: listTooltipPie, children: [
   /* @__PURE__ */ jsxs("li", { className: itemTooltipPie, children: [
     /* @__PURE__ */ jsx(Text, { as: "p", prominence: "stronger", variant: "body", children: data.name }),
     /* @__PURE__ */ jsx(Text, { as: "p", prominence: "stronger", variant: "body", children: data.value })

package/dist/components/PieChart/index.d.ts

@@ -17,5 +17,5 @@ type PieChartProps = {
  * See https://nivo.rocks/pie/ for more information.
  * @experimental This component is experimental and may be subject to breaking changes in the future.
  */
-export declare const PieChart: ({ height, width, data, emptyLegend, content, withLegend, margin, chartProps, style, }: PieChartProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const PieChart: ({ height, width, data, emptyLegend, content, withLegend, margin, chartProps, style, }: PieChartProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/PieChart/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Pie } from "@nivo/pie";
 import { useTheme } from "@ultraviolet/themes";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
@@ -10,12 +10,7 @@ import { Text } from "../Text/index.js";
 import { Legends } from "./Legends.js";
 import { emptyLegendPie, containerPie, contentPie, heightContainerPie } from "./styles.css.js";
 const DEFAULT_CHARTPROPS = {};
-const DEFAULT_MARGIN = {
-  bottom: 10,
-  left: 10,
-  right: 10,
-  top: 10
-};
+const DEFAULT_MARGIN = { bottom: 10, left: 10, right: 10, top: 10 };
 const PieChart = ({
   height = 206,
   width = 206,
@@ -31,40 +26,85 @@ const PieChart = ({
   const [currentFocusIndex, setCurrentFocusIndex] = useState();
   const emptyTooltip = useCallback(() => /* @__PURE__ */ jsx("span", {}), []);
   const isEmpty = !data || data.length === 0;
-  const EmptyLegendDisplayed = useCallback(() => emptyLegend ? /* @__PURE__ */ jsx("div", { className: emptyLegendPie, children: /* @__PURE__ */ jsx(Text, { as: "p", variant: "body", children: emptyLegend }) }) : null, [emptyLegend]);
+  const EmptyLegendDisplayed = useCallback(
+    () => emptyLegend ? /* @__PURE__ */ jsx("div", { className: emptyLegendPie, children: /* @__PURE__ */ jsx(Text, { as: "p", variant: "body", children: emptyLegend }) }) : null,
+    [emptyLegend]
+  );
   const localColors = getLegendColor(theme);
-  const LegendDisplayer = useCallback(() => isEmpty ? /* @__PURE__ */ jsx(EmptyLegendDisplayed, {}) : /* @__PURE__ */ jsx(Legends, { colors: localColors, data, focused: currentFocusIndex, onFocusChange: setCurrentFocusIndex }), [isEmpty, currentFocusIndex, data, EmptyLegendDisplayed, localColors]);
-  return /* @__PURE__ */ jsxs("div", { className: containerPie, style: {
-    ...assignInlineVars({
-      [heightContainerPie]: height ? `${height}px` : ""
-    }),
-    ...style
-  }, children: [
-    /* @__PURE__ */ jsxs("div", { style: {
-      position: "relative"
-    }, children: [
-      /* @__PURE__ */ jsx(Pie, { activeOuterRadiusOffset: !isEmpty ? 4 : 0, colors: localColors, cornerRadius: 0, data: !isEmpty ? data : [{
-        id: "empty",
-        percent: 100
-      }], defs: [{
-        background: "inherit",
-        color: theme.colors.neutral.textStrong,
-        id: "lines",
-        lineWidth: 2,
-        rotation: 0,
-        spacing: 5,
-        type: "patternLines"
-      }], enableArcLabels: false, enableArcLinkLabels: false, height, innerRadius: 0.8, margin, onMouseEnter: (datum, event) => {
-        if (!isEmpty) {
-          const pie = event.currentTarget;
-          pie.style.cursor = "pointer";
-          setCurrentFocusIndex(datum.id.toString());
-        }
-      }, onMouseLeave: () => setCurrentFocusIndex(void 0), padAngle: 1, theme: getNivoTheme(theme), tooltip: emptyTooltip, value: "percent", width, ...chartProps }),
-      content ? /* @__PURE__ */ jsx("div", { className: contentPie, children: content }) : null
-    ] }),
-    withLegend ? /* @__PURE__ */ jsx(LegendDisplayer, {}) : null
-  ] });
+  const LegendDisplayer = useCallback(
+    () => isEmpty ? /* @__PURE__ */ jsx(EmptyLegendDisplayed, {}) : /* @__PURE__ */ jsx(
+      Legends,
+      {
+        colors: localColors,
+        data,
+        focused: currentFocusIndex,
+        onFocusChange: setCurrentFocusIndex
+      }
+    ),
+    [isEmpty, currentFocusIndex, data, EmptyLegendDisplayed, localColors]
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: containerPie,
+      style: {
+        ...assignInlineVars({
+          [heightContainerPie]: height ? `${height}px` : ""
+        }),
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
+          /* @__PURE__ */ jsx(
+            Pie,
+            {
+              activeOuterRadiusOffset: !isEmpty ? 4 : 0,
+              colors: localColors,
+              cornerRadius: 0,
+              data: !isEmpty ? data : [
+                {
+                  id: "empty",
+                  percent: 100
+                }
+              ],
+              defs: [
+                {
+                  background: "inherit",
+                  color: theme.colors.neutral.textStrong,
+                  id: "lines",
+                  lineWidth: 2,
+                  rotation: 0,
+                  spacing: 5,
+                  type: "patternLines"
+                }
+              ],
+              enableArcLabels: false,
+              enableArcLinkLabels: false,
+              height,
+              innerRadius: 0.8,
+              margin,
+              onMouseEnter: (datum, event) => {
+                if (!isEmpty) {
+                  const pie = event.currentTarget;
+                  pie.style.cursor = "pointer";
+                  setCurrentFocusIndex(datum.id.toString());
+                }
+              },
+              onMouseLeave: () => setCurrentFocusIndex(void 0),
+              padAngle: 1,
+              theme: getNivoTheme(theme),
+              tooltip: emptyTooltip,
+              value: "percent",
+              width,
+              ...chartProps
+            }
+          ),
+          content ? /* @__PURE__ */ jsx("div", { className: contentPie, children: content }) : null
+        ] }),
+        withLegend ? /* @__PURE__ */ jsx(LegendDisplayer, {}) : null
+      ]
+    }
+  );
 };
 export {
   PieChart

package/dist/components/Popover/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { CloseIcon } from "@ultraviolet/icons";
 import { forwardRef, useRef, useContext, useState, useEffect, useCallback, useMemo } from "react";
 import { Button } from "../Button/index.js";
@@ -15,53 +15,111 @@ const ContentWrapper = ({
   sentiment
 }) => /* @__PURE__ */ jsxs(Stack, { className: stackPopover, gap: 1, children: [
   /* @__PURE__ */ jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [
-    /* @__PURE__ */ jsx(Text, { as: "h3", prominence: sentiment === "neutral" ? "strong" : "stronger", sentiment: sentiment === "neutral" ? "neutral" : "white", variant: "bodyStrong", children: title }),
-    /* @__PURE__ */ jsx(Button, { "aria-label": "close", onClick: onClose, sentiment: sentiment === "neutral" ? "neutral" : "primary", size: "small", variant: sentiment === "neutral" ? "ghost" : "filled", children: /* @__PURE__ */ jsx(CloseIcon, {}) })
+    /* @__PURE__ */ jsx(
+      Text,
+      {
+        as: "h3",
+        prominence: sentiment === "neutral" ? "strong" : "stronger",
+        sentiment: sentiment === "neutral" ? "neutral" : "white",
+        variant: "bodyStrong",
+        children: title
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        "aria-label": "close",
+        onClick: onClose,
+        sentiment: sentiment === "neutral" ? "neutral" : "primary",
+        size: "small",
+        variant: sentiment === "neutral" ? "ghost" : "filled",
+        children: /* @__PURE__ */ jsx(CloseIcon, {})
+      }
+    )
   ] }),
-  typeof children === "string" ? /* @__PURE__ */ jsx(Text, { as: "p", prominence: sentiment === "neutral" ? "strong" : "stronger", sentiment: sentiment === "neutral" ? "neutral" : "white", variant: "bodySmall", children }) : children
-] });
-const Popover = forwardRef(({
-  visible = false,
-  children,
-  placement,
-  content,
-  title,
-  sentiment = "neutral",
-  size = "medium",
-  onClose,
-  className,
-  maxWidth,
-  maxHeight,
-  "data-testid": dataTestId,
-  portalTarget,
-  dynamicDomRendering,
-  align,
-  style
-}, ref) => {
-  const innerRef = useRef(null);
-  const isInsideModal = useContext(ModalContext);
-  const [localVisible, setLocalVisible] = useState(visible);
-  useEffect(() => {
-    setLocalVisible(visible);
-  }, [visible]);
-  const localOnClose = useCallback(() => {
-    setLocalVisible(false);
-    onClose?.();
-  }, [onClose]);
-  const smartPortalTarget = useMemo(() => {
-    if (!portalTarget && isInsideModal) {
-      return void 0;
-    }
-    if (!portalTarget && !isInsideModal) {
-      return document.body;
+  typeof children === "string" ? /* @__PURE__ */ jsx(
+    Text,
+    {
+      as: "p",
+      prominence: sentiment === "neutral" ? "strong" : "stronger",
+      sentiment: sentiment === "neutral" ? "neutral" : "white",
+      variant: "bodySmall",
+      children
     }
-    return portalTarget;
-  }, [isInsideModal, portalTarget]);
-  return /* @__PURE__ */ jsx(Popup, { align, className: `${className ? `${className} ` : ""}${popover({
-    sentiment,
-    size
-  })}`, "data-testid": dataTestId, debounceDelay: 0, dynamicDomRendering, hideOnClickOutside: true, innerRef, maxHeight, maxWidth, onClose: localOnClose, placement, portalTarget: smartPortalTarget, ref, role: "dialog", style, tabIndex: -1, text: /* @__PURE__ */ jsx(ContentWrapper, { onClose: localOnClose, sentiment, title, children: content }), visible: localVisible, children });
-});
+  ) : children
+] });
+const Popover = forwardRef(
+  ({
+    visible = false,
+    children,
+    placement,
+    content,
+    title,
+    sentiment = "neutral",
+    size = "medium",
+    onClose,
+    className,
+    maxWidth,
+    maxHeight,
+    "data-testid": dataTestId,
+    portalTarget,
+    dynamicDomRendering,
+    align,
+    style
+  }, ref) => {
+    const innerRef = useRef(null);
+    const isInsideModal = useContext(ModalContext);
+    const [localVisible, setLocalVisible] = useState(visible);
+    useEffect(() => {
+      setLocalVisible(visible);
+    }, [visible]);
+    const localOnClose = useCallback(() => {
+      setLocalVisible(false);
+      onClose?.();
+    }, [onClose]);
+    const smartPortalTarget = useMemo(() => {
+      if (!portalTarget && isInsideModal) {
+        return void 0;
+      }
+      if (!portalTarget && !isInsideModal) {
+        return document.body;
+      }
+      return portalTarget;
+    }, [isInsideModal, portalTarget]);
+    return /* @__PURE__ */ jsx(
+      Popup,
+      {
+        align,
+        className: `${className ? `${className} ` : ""}${popover({ sentiment, size })}`,
+        "data-testid": dataTestId,
+        debounceDelay: 0,
+        dynamicDomRendering,
+        hideOnClickOutside: true,
+        innerRef,
+        maxHeight,
+        maxWidth,
+        onClose: localOnClose,
+        placement,
+        portalTarget: smartPortalTarget,
+        ref,
+        role: "dialog",
+        style,
+        tabIndex: -1,
+        text: /* @__PURE__ */ jsx(
+          ContentWrapper,
+          {
+            onClose: localOnClose,
+            sentiment,
+            title,
+            children: content
+          }
+        ),
+        visible: localVisible,
+        children
+      }
+    );
+  }
+);
 export {
   Popover
 };

package/dist/components/Popup/helpers.d.ts

@@ -1,5 +1,9 @@
 import type { RefObject } from 'react';
-export type PopupPlacement = 'top' | 'right' | 'bottom' | 'left' | 'auto' | 'nested-menu';
+declare const PLACEMENTS: readonly ["top", "right", "bottom", "left", "nested-menu"];
+type Placements = (typeof PLACEMENTS)[number];
+type AddPrefixToUnion<T extends string, P extends string> = T extends string ? `${P}${T}` : never;
+type AutoPlacements = AddPrefixToUnion<Exclude<Placements, 'nested-menu'>, 'auto-'> | 'auto';
+export type PopupPlacement = AutoPlacements | Placements;
 export type PopupAlign = 'start' | 'center';
 export declare const DEFAULT_ARROW_WIDTH = 8;
 export declare const DEFAULT_POSITIONS: {

package/dist/components/Popup/helpers.js

@@ -1,3 +1,5 @@
+const PLACEMENTS = ["top", "right", "bottom", "left", "nested-menu"];
+const isGenericPlacement = (placement) => PLACEMENTS.includes(placement);
 const DEFAULT_ARROW_WIDTH = 8;
 const SPACE = 4;
 const TOTAL_USED_SPACE = 0;
@@ -10,13 +12,26 @@ const DEFAULT_POSITIONS = {
   popupPosition: "translate3d(0px, 0px, 0)",
   rotate: 135
 };
+const getOrderOfPlacement = (autoPlacement) => {
+  if (autoPlacement === "auto-bottom") {
+    return ["bottom", "top", "left", "right"];
+  }
+  if (autoPlacement === "auto-left") {
+    return ["left", "right", "top", "bottom"];
+  }
+  if (autoPlacement === "auto-right") {
+    return ["right", "left", "top", "bottom"];
+  }
+  return ["top", "bottom", "left", "right"];
+};
 const computePlacement = ({
   childrenStructuredRef,
   popupStructuredRef,
   offsetParentRect,
   offsetParent,
   popupPortalTarget,
-  isNestedMenu
+  isNestedMenu,
+  autoPlacement
 }) => {
   const {
     top: childrenTop,
@@ -24,34 +39,35 @@ const computePlacement = ({
     right: childrenRight,
     width: childrenWidth
   } = childrenStructuredRef;
-  const {
-    top: parentTop,
-    left: parentLeft
-  } = offsetParentRect;
+  const orderOfPlacement = getOrderOfPlacement(autoPlacement ?? "auto");
+  const { top: parentTop, left: parentLeft } = offsetParentRect;
   const isPopupPortalTargetBody = popupPortalTarget === document.body || offsetParent === document.body;
   const overloadedChildrenLeft = isPopupPortalTargetBody ? childrenLeft : childrenLeft - parentLeft;
   const overloadedChildrenTop = isPopupPortalTargetBody ? childrenTop : childrenTop - parentTop;
   const overloadedChildrenRight = isPopupPortalTargetBody ? childrenRight : childrenLeft - parentLeft + childrenWidth;
-  const {
-    width: popupWidth,
-    height: popupHeight
-  } = popupStructuredRef;
+  const { width: popupWidth, height: popupHeight } = popupStructuredRef;
   if (isNestedMenu) {
     if (overloadedChildrenRight + popupWidth + TOTAL_USED_SPACE > window.innerWidth) {
       return "left";
     }
     return "right";
   }
-  if (overloadedChildrenTop - popupHeight - TOTAL_USED_SPACE < 0) {
-    return "bottom";
+  const conditionsOfPlacement = {
+    bottom: window.innerHeight - overloadedChildrenTop - TOTAL_USED_SPACE >= popupHeight,
+    left: overloadedChildrenLeft - TOTAL_USED_SPACE >= popupWidth,
+    right: window.innerWidth - overloadedChildrenLeft - TOTAL_USED_SPACE >= popupWidth,
+    top: overloadedChildrenTop - popupHeight - TOTAL_USED_SPACE >= 0
+  };
+  if (conditionsOfPlacement[orderOfPlacement[0]]) {
+    return orderOfPlacement[0];
   }
-  if (overloadedChildrenLeft - popupWidth - TOTAL_USED_SPACE < 0) {
-    return "right";
+  if (conditionsOfPlacement[orderOfPlacement[1]]) {
+    return orderOfPlacement[1];
   }
-  if (overloadedChildrenRight + popupWidth + TOTAL_USED_SPACE > window.innerWidth) {
-    return "left";
+  if (conditionsOfPlacement[orderOfPlacement[2]]) {
+    return orderOfPlacement[2];
   }
-  return "top";
+  return orderOfPlacement[3];
 };
 const findOffsetParent = (element) => {
   const offsetParent = element?.current?.offsetParent;
@@ -60,9 +76,7 @@ const findOffsetParent = (element) => {
   }
   let currentElement = element?.current;
   while (currentElement && currentElement.tagName !== "BODY") {
-    const {
-      position
-    } = window.getComputedStyle(currentElement);
+    const { position } = window.getComputedStyle(currentElement);
     if (position !== "static") {
       return currentElement;
     }
@@ -83,10 +97,7 @@ const getPopupOverflowFromParent = (position, offsetParentRect, childrenRect, po
     right: childrenRight,
     width: childrenWidth
   } = childrenRect;
-  const {
-    width: popupWidth,
-    height: popupHeight
-  } = popupStructuredRef;
+  const { width: popupWidth, height: popupHeight } = popupStructuredRef;
   const popupHalfWidthWithArrow = popupWidth / 2 - arrowWidth - 1;
   const popupHalfHeightWithArrow = popupHeight / 2 - arrowWidth - 1;
   if (position === "top" || position === "bottom") {
@@ -129,20 +140,23 @@ const computePositions = ({
 }) => {
   const arrowWidth = hasArrow ? DEFAULT_ARROW_WIDTH : 0;
   const childrenRect = childrenRef.current.getBoundingClientRect();
-  const offsetParent = findOffsetParent(childrenRef);
+  const offsetParent = findOffsetParent(
+    childrenRef
+  );
   const offsetParentRect = offsetParent?.getBoundingClientRect() ?? {
     left: 0,
     right: window?.innerWidth ?? 0,
     top: 0
   };
   const popupStructuredRef = popupRef.current.getBoundingClientRect();
-  const placementBasedOnWindowSize = placement === "auto" ? computePlacement({
+  const placementBasedOnWindowSize = isGenericPlacement(placement) ? placement : computePlacement({
+    autoPlacement: placement,
     childrenStructuredRef: childrenRect,
     offsetParent,
     offsetParentRect,
     popupPortalTarget,
     popupStructuredRef
-  }) : placement;
+  });
   const {
     top: childrenTop,
     left: childrenLeft,
@@ -150,20 +164,20 @@ const computePositions = ({
     width: childrenWidth,
     height: childrenHeight
   } = childrenRect;
-  const {
-    top: parentTop,
-    left: parentLeft
-  } = offsetParentRect;
-  const {
-    width: popupWidth,
-    height: popupHeight
-  } = popupStructuredRef;
+  const { top: parentTop, left: parentLeft } = offsetParentRect;
+  const { width: popupWidth, height: popupHeight } = popupStructuredRef;
   const isPopupPortalTargetBody = popupPortalTarget === document.body || offsetParent === document.body;
   const scrollTopValue = isPopupPortalTargetBody ? document.documentElement.scrollTop : offsetParent.scrollTop;
   const overloadedChildrenLeft = isPopupPortalTargetBody ? childrenLeft : childrenLeft - parentLeft;
   const overloadedChildrenTop = isPopupPortalTargetBody ? childrenTop : childrenTop - parentTop;
   const overloadedChildrenRight = isPopupPortalTargetBody ? childrenRight : childrenLeft - parentLeft + childrenWidth;
-  const popupOverflow = getPopupOverflowFromParent(placementBasedOnWindowSize, offsetParentRect, childrenRect, popupStructuredRef, arrowWidth);
+  const popupOverflow = getPopupOverflowFromParent(
+    placementBasedOnWindowSize,
+    offsetParentRect,
+    childrenRect,
+    popupStructuredRef,
+    arrowWidth
+  );
   const isAligned = align === "start";
   switch (placementBasedOnWindowSize) {
     case "bottom": {