@ultraviolet/ui 3.0.0-beta.8 → 3.0.0

package/dist/components/PieChart/styles.css.d.ts

@@ -0,0 +1,49 @@
+export declare const heightContainerPie: `var(--${string})`;
+export declare const colorBullet: `var(--${string})`;
+export declare const containerPie: string;
+export declare const emptyLegendPie: string;
+export declare const contentPie: string;
+export declare const listPie: string;
+export declare const listItemPie: import("@vanilla-extract/recipes").RuntimeFn<{
+    isFocused: {
+        true: {
+            color: `var(--${string})`;
+        };
+        false: {
+            color: `var(--${string})`;
+        };
+    };
+}>;
+export declare const bulletPie: import("@vanilla-extract/recipes").RuntimeFn<{
+    isFocused: {
+        true: {
+            animation: `${string} linear 1500ms infinite`;
+        };
+    };
+}>;
+export declare const labelPie: string;
+export declare const valuePie: Record<"default" | "isFocused", string>;
+export declare const textPie: import("@vanilla-extract/recipes").RuntimeFn<{
+    isFocused: {
+        true: {
+            fontWeight: number;
+        };
+        false: {
+            fontWeight: number;
+        };
+    };
+}>;
+export declare const toggleBoxPie: string;
+export declare const linePie: string;
+export declare const progressiveLinePie: import("@vanilla-extract/recipes").RuntimeFn<{
+    isFocused: {
+        true: {
+            width: "100%";
+        };
+        false: {
+            width: "0%";
+        };
+    };
+}>;
+export declare const listTooltipPie: string;
+export declare const itemTooltipPie: string;

package/dist/components/PieChart/styles.css.js

@@ -0,0 +1,36 @@
+/* empty css                          */
+import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
+var heightContainerPie = "var(--uv_6tpqrj0)";
+var colorBullet = "var(--uv_6tpqrj1)";
+var containerPie = "uv_6tpqrj3";
+var emptyLegendPie = "uv_6tpqrj4";
+var contentPie = "uv_6tpqrj5";
+var listPie = "uv_6tpqrj6";
+var listItemPie = createRuntimeFn({ defaultClassName: "uv_6tpqrj7", variantClassNames: { isFocused: { true: "uv_6tpqrj8", false: "uv_6tpqrj9" } }, defaultVariants: {}, compoundVariants: [] });
+var bulletPie = createRuntimeFn({ defaultClassName: "uv_6tpqrja", variantClassNames: { isFocused: { true: "uv_6tpqrjb" } }, defaultVariants: {}, compoundVariants: [] });
+var labelPie = "uv_6tpqrjc";
+var valuePie = { "default": "uv_6tpqrjd", isFocused: "uv_6tpqrje" };
+var textPie = createRuntimeFn({ defaultClassName: "uv_6tpqrjf", variantClassNames: { isFocused: { true: "uv_6tpqrjg", false: "uv_6tpqrjh" } }, defaultVariants: {}, compoundVariants: [] });
+var toggleBoxPie = "uv_6tpqrji";
+var linePie = "uv_6tpqrjj";
+var progressiveLinePie = createRuntimeFn({ defaultClassName: "uv_6tpqrjk", variantClassNames: { isFocused: { true: "uv_6tpqrjl", false: "uv_6tpqrjm" } }, defaultVariants: {}, compoundVariants: [] });
+var listTooltipPie = "uv_6tpqrjn";
+var itemTooltipPie = "uv_6tpqrjo";
+export {
+  bulletPie,
+  colorBullet,
+  containerPie,
+  contentPie,
+  emptyLegendPie,
+  heightContainerPie,
+  itemTooltipPie,
+  labelPie,
+  linePie,
+  listItemPie,
+  listPie,
+  listTooltipPie,
+  progressiveLinePie,
+  textPie,
+  toggleBoxPie,
+  valuePie
+};

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

@@ -56,5 +56,6 @@ export declare const Popover: import("react").ForwardRefExoticComponent<{
     disableAnimation?: boolean;
     portalTarget?: HTMLElement;
     dynamicDomRendering?: boolean;
-} & import("react").RefAttributes<HTMLDivElement>, "align" | "dynamicDomRendering"> & import("react").RefAttributes<HTMLDivElement>>;
+    style?: import("react").CSSProperties;
+} & import("react").RefAttributes<HTMLDivElement>, "style" | "align" | "dynamicDomRendering"> & import("react").RefAttributes<HTMLDivElement>>;
 export {};

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,52 +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
-}, 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", 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,32 +164,34 @@ 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": {
       const positionX = isAligned ? overloadedChildrenLeft : overloadedChildrenLeft + childrenWidth / 2 - popupWidth / 2;
       const positionY = overloadedChildrenTop + scrollTopValue + childrenHeight + arrowWidth + SPACE;
+      const computedPositionX = !isAligned ? positionX + popupOverflow : positionX;
+      const finalPositionX = isPopupPortalTargetBody ? Math.max(computedPositionX, 0) : computedPositionX;
       return {
         arrowLeft: isAligned ? childrenWidth / 2 - arrowWidth : popupWidth / 2 + popupOverflow * -1,
         arrowTop: -arrowWidth - 5,
         arrowTransform: "",
         placement: "bottom",
-        popupInitialPosition: `translate3d(${!isAligned ? positionX + popupOverflow : positionX}px, ${positionY - TOTAL_USED_SPACE}px, 0)`,
-        popupPosition: `translate3d(${!isAligned ? positionX + popupOverflow : positionX}px, ${positionY}px, 0)`,
+        popupInitialPosition: `translate3d(${finalPositionX}px, ${positionY - TOTAL_USED_SPACE}px, 0)`,
+        popupPosition: `translate3d(${finalPositionX}px, ${positionY}px, 0)`,
         rotate: 180
       };
     }
@@ -241,13 +257,15 @@ const computePositions = ({
     default: {
       const positionX = isAligned ? overloadedChildrenLeft : overloadedChildrenLeft + childrenWidth / 2 - popupWidth / 2;
       const positionY = overloadedChildrenTop + scrollTopValue - popupHeight - arrowWidth - SPACE;
+      const computedPositionX = !isAligned ? positionX + popupOverflow : positionX;
+      const finalPositionX = isPopupPortalTargetBody ? Math.max(computedPositionX, 0) : computedPositionX;
       return {
         arrowLeft: isAligned ? childrenWidth / 2 - arrowWidth : popupWidth / 2 + popupOverflow * -1,
         arrowTop: popupHeight - 1,
         arrowTransform: "",
         placement: "top",
-        popupInitialPosition: `translate3d(${!isAligned ? positionX + popupOverflow : positionX}px, ${positionY + TOTAL_USED_SPACE}px, 0)`,
-        popupPosition: `translate3d(${!isAligned ? positionX + popupOverflow : positionX}px, ${positionY}px, 0)`,
+        popupInitialPosition: `translate3d(${finalPositionX}px, ${positionY + TOTAL_USED_SPACE}px, 0)`,
+        popupPosition: `translate3d(${finalPositionX}px, ${positionY}px, 0)`,
         rotate: 0
       };
     }

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

@@ -1,4 +1,4 @@
-import type { HTMLAttributes, KeyboardEventHandler, ReactNode, Ref, RefObject } from 'react';
+import type { CSSProperties, HTMLAttributes, KeyboardEventHandler, ReactNode, Ref, RefObject } from 'react';
 import type { PopupAlign, PopupPlacement } from './helpers';
 export type PositionsType = {
     arrowLeft: number;
@@ -9,6 +9,7 @@ export type PositionsType = {
     popupInitialPosition: string;
     popupPosition: string;
 };
+type PopupRole = 'dialog' | 'tooltip' | 'popup' | string;
 type PopupProps = {
     /**
      * Id is automatically generated if not set. It is used for associating popup wrapper with popup portal.
@@ -49,7 +50,7 @@ type PopupProps = {
      */
     visible?: boolean;
     innerRef?: Ref<HTMLDivElement | null>;
-    role?: string;
+    role?: PopupRole;
     'data-testid'?: string;
     hasArrow?: boolean;
     onClose?: () => void;
@@ -81,6 +82,7 @@ type PopupProps = {
      * reason you need to disable it, you can set it to `false`.
      */
     dynamicDomRendering?: boolean;
+    style?: CSSProperties;
 };
 /**
  * @experimental This component is experimental and may be subject to breaking changes in the future.