orcs-design-system 3.3.33 → 3.3.35

package/es/components/Avatar/Avatar.stories.js

@@ -386,7 +386,8 @@ export const headerAvatarVariants = () => {
       headerAvatar: true,
       sizing: "small",
       image: "https://randomuser.me/api/portraits/men/32.jpg",
-      imageAlt: "Avatar for John Doe"
+      imageAlt: "Avatar for John Doe",
+      onClick: handleClick
     }), /*#__PURE__*/_jsx(Avatar, {
       headerAvatar: true,
       sizing: "large",
@@ -399,7 +400,8 @@ export const headerAvatarVariants = () => {
       sizing: "small",
       shape: "square",
       image: "https://images.unsplash.com/photo-1464802686167-b939a6910659?q=80&w=3500&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
-      imageAlt: "Avatar for Nebula UI"
+      imageAlt: "Avatar for Nebula UI",
+      onClick: handleClick
     })]
   });
 };

package/es/components/Avatar/index.js

@@ -360,47 +360,54 @@ const HeaderAvatarShape = styled("div").withConfig({
     })
   };
 });
-const HeaderAvatarActionPopover = styled(Popover).withConfig({
-  displayName: "Avatar__HeaderAvatarActionPopover",
+const HeaderAvatarAction = styled("button").withConfig({
+  displayName: "Avatar__HeaderAvatarAction",
   componentId: "sc-1wtet2j-11"
+})(() => ({
+  cursor: "pointer",
+  padding: "0",
+  background: "none",
+  border: "none",
+  outline: "none",
+  appearance: "none",
+  position: "relative",
+  "&:hover": {
+    "& > .icon-container": {
+      opacity: "1"
+    }
+  }
+}));
+const IconContainer = styled("div").withConfig({
+  displayName: "Avatar__IconContainer",
+  componentId: "sc-1wtet2j-12"
 })(_ref6 => {
   let {
-    $shape
+    $shape,
+    $sizing
   } = _ref6;
   return {
+    opacity: "0",
+    transition: "opacity 0.2s ease-in-out",
     position: "absolute",
-    top: 0,
-    right: 0,
-    transform: $shape === "circle" ? "translate(-5%, 5%)" : "translate(20%, -20%)"
-  };
-});
-const HeaderAvatarAction = styled("button").withConfig({
-  displayName: "Avatar__HeaderAvatarAction",
-  componentId: "sc-1wtet2j-12"
-})(_ref7 => {
-  let {
-    ...props
-  } = _ref7;
-  return {
-    width: "36px",
-    height: "36px",
-    borderRadius: "50%",
-    background: "#e6e6e6",
-    border: "solid 2px #fff",
-    boxShadow: "0 2px 8px 0 rgba(0,0,0,0.10)",
+    top: $sizing === "large" ? "6px" : "4px",
+    left: $sizing === "large" ? "6px" : "4px",
+    width: $sizing === "large" ? "calc(100% - 12px)" : "calc(100% - 8px)",
+    height: $sizing === "large" ? "calc(100% - 18px)" : "calc(100% - 12px)",
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    cursor: "pointer",
-    zIndex: 2,
-    padding: 0,
-    transition: "background 0.2s ease-in-out",
-    "&:hover, &:focus": {
-      background: themeGet("colors.primaryLighter")(props)
-    }
+    background: "rgba(0, 0, 0, 0.5)",
+    zIndex: "2",
+    borderRadius: $shape === "circle" || !$shape ? "50%" : "0",
+    ...($shape === "hexagon" && {
+      clipPath: "polygon(50% 0, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%)"
+    }),
+    ...($shape === "tag" && {
+      clipPath: "polygon(6% 0, 95% 0, 95% 65%, 50% 100%, 6% 65%)"
+    })
   };
 });
-const Avatar = _ref8 => {
+const Avatar = _ref7 => {
   let {
     sizing,
     image,
@@ -419,7 +426,7 @@ const Avatar = _ref8 => {
     headerAvatar = false,
     onClick,
     ...props
-  } = _ref8;
+  } = _ref7;
   const hasTitle = !!title;
   const hasSubtitle = !!subtitle;
   const hasSubtitleContent = !!subtitleContent;
@@ -443,11 +450,11 @@ const Avatar = _ref8 => {
         theme
       }) || customSize;
     }
-    return /*#__PURE__*/_jsxs(HeaderAvatarWrapper, {
+    const avatarContent = /*#__PURE__*/_jsx(HeaderAvatarWrapper, {
       ...props,
       $size: size,
       $shape: shape,
-      children: [/*#__PURE__*/_jsx(HeaderAvatarBorder, {
+      children: /*#__PURE__*/_jsx(HeaderAvatarBorder, {
         $size: size,
         $shape: shape,
         $sizing: sizing,
@@ -469,27 +476,36 @@ const Avatar = _ref8 => {
             icon: ["fas", "user"]
           })
         })
-      }), onClick && sizing === "large" && /*#__PURE__*/_jsx(HeaderAvatarActionPopover, {
+      })
+    });
+    if (onClick) {
+      return /*#__PURE__*/_jsx(Popover, {
         direction: "right",
         width: "fit-content",
         $shape: shape,
         text: shape === "circle" ? "Upload profile picture" : "Change image",
-        children: /*#__PURE__*/_jsx(HeaderAvatarAction, {
+        headerAvatarSizing: sizing,
+        children: /*#__PURE__*/_jsxs(HeaderAvatarAction, {
           onClick: onClick,
           "aria-label": "Edit avatar",
-          children: shape === "circle" ? /*#__PURE__*/_jsx(Icon, {
-            icon: ["fas", "camera"],
-            size: "lg",
-            color: "greyDarker"
-          }) : /*#__PURE__*/_jsx(Icon, {
-            icon: ["fas", "edit"],
-            size: "lg",
-            color: "greyDarker",
-            transform: "right-1"
-          })
+          children: [/*#__PURE__*/_jsx(IconContainer, {
+            $shape: shape,
+            $sizing: sizing,
+            className: "icon-container",
+            children: shape === "circle" ? /*#__PURE__*/_jsx(Icon, {
+              icon: ["fas", "camera"],
+              size: sizing === "large" ? "lg" : "1x",
+              color: "white"
+            }) : /*#__PURE__*/_jsx(Icon, {
+              icon: ["fas", "image"],
+              size: sizing === "large" ? "lg" : "1x",
+              color: "white"
+            })
+          }), avatarContent]
         })
-      })]
-    });
+      });
+    }
+    return avatarContent;
   }
   const component = /*#__PURE__*/_jsxs(AvatarWrapper, {
     ...props,

package/es/components/ColorPicker/index.js

@@ -1,14 +1,17 @@
-import React, { useState, useEffect, useRef } from "react";
+import React, { useState, useMemo } from "react";
 import PropTypes from "prop-types";
 import Box from "../Box";
 import ColorPickerLib from "react-best-gradient-color-picker";
+import { FloatingPortal } from "@floating-ui/react";
+import { getFloatingUiRootElement } from "../../utils/floatingUiHelpers";
+import useActionMenu from "../ActionsMenu/useActionMenu";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ColorPicker = _ref => {
   let {
     value,
     onChange,
     children,
-    position = "bottom-start",
+    position = "bottom-end",
     zIndex = 20,
     bg = "#202020",
     p = "s",
@@ -33,131 +36,52 @@ const ColorPicker = _ref => {
     ...colorPickerProps
   } = _ref;
   const [isOpen, setIsOpen] = useState(false);
-  const colorPickerRef = useRef(null);
-  const triggerRef = useRef(null);
-
-  // Handle clicks outside to close
-  useEffect(() => {
-    function handleClickOutside(event) {
-      if (colorPickerRef.current && !colorPickerRef.current.contains(event.target) && triggerRef.current && !triggerRef.current.contains(event.target)) {
-        setIsOpen(false);
-      }
-    }
-    if (isOpen) {
-      document.addEventListener("mousedown", handleClickOutside);
-      return () => {
-        document.removeEventListener("mousedown", handleClickOutside);
-      };
-    }
-    return undefined;
-  }, [isOpen]);
   const toggleColorPicker = () => setIsOpen(!isOpen);
-
-  // Calculate position based on position prop
-  const getPositionStyles = () => {
-    const baseStyles = {
-      position: "absolute",
-      zIndex,
-      bg,
-      p,
-      borderRadius
-    };
-    switch (position) {
-      case "top-start":
-        return {
-          ...baseStyles,
-          bottom: "100%",
-          right: "0",
-          mb: "s"
-        };
-      case "top-end":
-        return {
-          ...baseStyles,
-          bottom: "100%",
-          left: "0",
-          mb: "s"
-        };
-      case "bottom-start":
-        return {
-          ...baseStyles,
-          top: "100%",
-          right: "0",
-          mt: "s"
-        };
-      case "bottom-end":
-        return {
-          ...baseStyles,
-          top: "100%",
-          left: "0",
-          mt: "s"
-        };
-      case "left-start":
-        return {
-          ...baseStyles,
-          right: "100%",
-          top: "0",
-          mr: "s"
-        };
-      case "left-end":
-        return {
-          ...baseStyles,
-          right: "100%",
-          bottom: "0",
-          mr: "s"
-        };
-      case "right-start":
-        return {
-          ...baseStyles,
-          left: "100%",
-          top: "0",
-          ml: "s"
-        };
-      case "right-end":
-        return {
-          ...baseStyles,
-          left: "100%",
-          bottom: "0",
-          ml: "s"
-        };
-      default:
-        return {
-          ...baseStyles,
-          top: "100%",
-          right: "0",
-          mt: "s"
-        };
-    }
-  };
+  const baseStyles = useMemo(() => ({
+    zIndex,
+    bg,
+    p,
+    borderRadius
+  }), [zIndex, bg, p, borderRadius]);
+  const actionMenu = useActionMenu({
+    placement: position,
+    open: isOpen,
+    onOpenChange: setIsOpen
+  });
   return /*#__PURE__*/_jsxs(Box, {
-    position: "relative",
-    children: [/*#__PURE__*/_jsx(Box, {
-      ref: triggerRef,
-      children: typeof children === "function" ? children({
-        isOpen,
-        toggleColorPicker
-      }) : children
-    }), isOpen && /*#__PURE__*/_jsx(Box, {
-      ref: colorPickerRef,
-      ...getPositionStyles(),
-      children: /*#__PURE__*/_jsx(ColorPickerLib, {
-        value: value,
-        onChange: onChange,
-        width: width,
-        height: height,
-        hidePresets: hidePresets,
-        hideInputs: hideInputs,
-        hideControls: hideControls,
-        hideOpacity: hideOpacity,
-        hideEyeDrop: hideEyeDrop,
-        hideAdvancedSliders: hideAdvancedSliders,
-        hideColorGuide: hideColorGuide,
-        hideInputType: hideInputType,
-        hideColorTypeBtns: hideColorTypeBtns,
-        hideGradientType: hideGradientType,
-        hideGradientAngle: hideGradientAngle,
-        hideGradientStop: hideGradientStop,
-        hideGradientControls: hideGradientControls,
-        ...colorPickerProps
+    ref: actionMenu.refs.setReference,
+    ...actionMenu.getReferenceProps(),
+    children: [typeof children === "function" ? children({
+      isOpen,
+      toggleColorPicker
+    }) : children, isOpen && /*#__PURE__*/_jsx(FloatingPortal, {
+      root: getFloatingUiRootElement(actionMenu.refs.reference),
+      preserveTabOrder: true,
+      children: /*#__PURE__*/_jsx(Box, {
+        ref: actionMenu.refs.setFloating,
+        style: actionMenu.floatingStyles,
+        ...baseStyles,
+        ...actionMenu.getFloatingProps(),
+        children: /*#__PURE__*/_jsx(ColorPickerLib, {
+          value: value,
+          onChange: onChange,
+          width: width,
+          height: height,
+          hidePresets: hidePresets,
+          hideInputs: hideInputs,
+          hideControls: hideControls,
+          hideOpacity: hideOpacity,
+          hideEyeDrop: hideEyeDrop,
+          hideAdvancedSliders: hideAdvancedSliders,
+          hideColorGuide: hideColorGuide,
+          hideInputType: hideInputType,
+          hideColorTypeBtns: hideColorTypeBtns,
+          hideGradientType: hideGradientType,
+          hideGradientAngle: hideGradientAngle,
+          hideGradientStop: hideGradientStop,
+          hideGradientControls: hideGradientControls,
+          ...colorPickerProps
+        })
       })
     })]
   });
@@ -197,7 +121,7 @@ ColorPicker.__docgenInfo = {
   "props": {
     "position": {
       "defaultValue": {
-        "value": "\"bottom-start\"",
+        "value": "\"bottom-end\"",
         "computed": false
       },
       "description": "",

package/es/components/Popover/Popover.stories.js

@@ -21,6 +21,7 @@ export default {
 };
 export const defaultPopover = () => /*#__PURE__*/_jsx(Popover, {
   text: "Description that explains child element",
+  width: "fit-content",
   children: /*#__PURE__*/_jsx(Button, {
     onClick: () => alert("Maintains original click"),
     children: "Hover Me!"
@@ -38,6 +39,7 @@ export const direction = () => /*#__PURE__*/_jsx(Box, {
     children: [/*#__PURE__*/_jsx(Popover, {
       direction: "topLeft",
       text: "Description that explains child element",
+      width: "fit-content",
       children: /*#__PURE__*/_jsx(Button, {
         width: "125px",
         children: "Top left"
@@ -45,6 +47,7 @@ export const direction = () => /*#__PURE__*/_jsx(Box, {
     }), /*#__PURE__*/_jsx(Popover, {
       direction: "top",
       text: "Description that explains child element",
+      width: "fit-content",
       children: /*#__PURE__*/_jsx(Button, {
         width: "125px",
         children: "Top"
@@ -52,6 +55,7 @@ export const direction = () => /*#__PURE__*/_jsx(Box, {
     }), /*#__PURE__*/_jsx(Popover, {
       direction: "topRight",
       text: "Description that explains child element",
+      width: "fit-content",
       children: /*#__PURE__*/_jsx(Button, {
         width: "125px",
         children: "Top right"
@@ -59,6 +63,7 @@ export const direction = () => /*#__PURE__*/_jsx(Box, {
     }), /*#__PURE__*/_jsx(Popover, {
       direction: "left",
       text: "Description that explains child element",
+      width: "fit-content",
       children: /*#__PURE__*/_jsx(Button, {
         width: "125px",
         children: "Left"
@@ -70,6 +75,7 @@ export const direction = () => /*#__PURE__*/_jsx(Box, {
     }), /*#__PURE__*/_jsx(Popover, {
       direction: "right",
       text: "Description that explains child element",
+      width: "fit-content",
       children: /*#__PURE__*/_jsx(Button, {
         width: "125px",
         children: "Right"
@@ -77,6 +83,7 @@ export const direction = () => /*#__PURE__*/_jsx(Box, {
     }), /*#__PURE__*/_jsx(Popover, {
       direction: "bottomLeft",
       text: "Description that explains child element",
+      width: "fit-content",
       children: /*#__PURE__*/_jsx(Button, {
         width: "125px",
         children: "Bottom left"
@@ -84,6 +91,7 @@ export const direction = () => /*#__PURE__*/_jsx(Box, {
     }), /*#__PURE__*/_jsx(Popover, {
       direction: "bottom",
       text: "Description that explains child element",
+      width: "fit-content",
       children: /*#__PURE__*/_jsx(Button, {
         width: "125px",
         children: "Bottom"
@@ -91,6 +99,7 @@ export const direction = () => /*#__PURE__*/_jsx(Box, {
     }), /*#__PURE__*/_jsx(Popover, {
       direction: "bottomRight",
       text: "Description that explains child element",
+      width: "fit-content",
       children: /*#__PURE__*/_jsx(Button, {
         width: "125px",
         children: "Bottom right"
@@ -100,8 +109,8 @@ export const direction = () => /*#__PURE__*/_jsx(Box, {
 });
 direction.storyName = "Direction";
 export const specifiedWidth = () => /*#__PURE__*/_jsx(Popover, {
-  text: "Description that explains child element",
-  width: "240px",
+  text: "Long description that you might not want to show on one line, and instead would like it to wrap",
+  width: "200px",
   children: /*#__PURE__*/_jsx(Button, {
     children: "Hover Me"
   })
@@ -109,6 +118,7 @@ export const specifiedWidth = () => /*#__PURE__*/_jsx(Popover, {
 export const textAlignment = () => /*#__PURE__*/_jsx(Popover, {
   textAlign: "center",
   text: "Centered description that explains child element",
+  width: "fit-content",
   children: /*#__PURE__*/_jsx(Button, {
     children: "Hover Me"
   })
@@ -120,23 +130,27 @@ export const DisplayInlineBlock = () => /*#__PURE__*/_jsx(Flex, {
     children: [/*#__PURE__*/_jsx(Popover, {
       text: "Description that explains child element",
       inlineBlock: true,
+      width: "fit-content",
       children: /*#__PURE__*/_jsx(Button, {
         children: "Inline Block Set"
       })
     }), /*#__PURE__*/_jsx(Popover, {
       text: "Description that explains child element",
       inlineBlock: true,
+      width: "fit-content",
       children: /*#__PURE__*/_jsx(Button, {
         children: "Inline Block Set"
       })
     }), /*#__PURE__*/_jsx(Popover, {
       text: "Because it is display: block, the triggering container is wider than the button",
+      width: "fit-content",
       children: /*#__PURE__*/_jsx(Button, {
         children: "Not Inline"
       })
     }), /*#__PURE__*/_jsx(Popover, {
       direction: "top",
       text: "Description that explains child element",
+      width: "fit-content",
       children: /*#__PURE__*/_jsx(Button, {
         children: "Not Inline"
       })
@@ -146,7 +160,8 @@ export const DisplayInlineBlock = () => /*#__PURE__*/_jsx(Flex, {
 export const tooltipExample = () => /*#__PURE__*/_jsx(Popover, {
   text: "This tooltip helps explain stuff",
   direction: "top",
-  variant: "tooltip"
+  variant: "tooltip",
+  width: "fit-content"
 });
 tooltipExample.storyName = "Tooltip Example";
 export const tooltipWithLinkExample = () => /*#__PURE__*/_jsx(Popover, {
@@ -160,7 +175,8 @@ export const tooltipWithLinkExample = () => /*#__PURE__*/_jsx(Popover, {
   arialLabel: "Link to TeamForm",
   direction: "right",
   variant: "tooltip",
-  enableSelectAll: false
+  enableSelectAll: false,
+  width: "fit-content"
 });
 tooltipWithLinkExample.storyName = "Tooltip with link Example";
 export const iconExample = () => /*#__PURE__*/_jsx(Popover, {
@@ -179,12 +195,90 @@ export const keepInViewExample = () => /*#__PURE__*/_jsx(Flex, {
   width: "100%",
   children: /*#__PURE__*/_jsx(Popover, {
     text: "Description that explains child element",
+    width: "fit-content",
     children: /*#__PURE__*/_jsx(Button, {
       children: "Hover Me!"
     })
   })
 });
 keepInViewExample.storyName = "Keep In View Example";
+export const customOffset = () => /*#__PURE__*/_jsx("div", {
+  children: /*#__PURE__*/_jsxs(Spacer, {
+    mb: "r",
+    children: [/*#__PURE__*/_jsx(Popover, {
+      text: "Default offset (10px mainAxis)",
+      direction: "right",
+      width: "fit-content",
+      inlineBlock: true,
+      children: /*#__PURE__*/_jsx(Button, {
+        height: "130px",
+        children: "Default Offset"
+      })
+    }), /*#__PURE__*/_jsx(Popover, {
+      text: "Custom offset: 30px mainAxis (moved further away)",
+      direction: "right",
+      offset: {
+        mainAxis: 30
+      },
+      width: "fit-content",
+      inlineBlock: true,
+      children: /*#__PURE__*/_jsx(Button, {
+        height: "130px",
+        children: "30px Main Axis (Right)"
+      })
+    }), /*#__PURE__*/_jsx(Popover, {
+      text: "Custom offset: -10px mainAxis (moved closer)",
+      direction: "right",
+      offset: {
+        mainAxis: -10
+      },
+      width: "fit-content",
+      inlineBlock: true,
+      children: /*#__PURE__*/_jsx(Button, {
+        height: "130px",
+        children: "-10px Main Axis (Left)"
+      })
+    }), /*#__PURE__*/_jsx(Popover, {
+      text: "Custom offset: 20px alignmentAxis (moved down)",
+      direction: "right",
+      offset: {
+        alignmentAxis: 20
+      },
+      width: "fit-content",
+      inlineBlock: true,
+      children: /*#__PURE__*/_jsx(Button, {
+        height: "130px",
+        children: "20px Alignment Axis (Down)"
+      })
+    }), /*#__PURE__*/_jsx(Popover, {
+      text: "Custom offset: -20px alignmentAxis (moved up)",
+      direction: "right",
+      offset: {
+        alignmentAxis: -20
+      },
+      width: "fit-content",
+      inlineBlock: true,
+      children: /*#__PURE__*/_jsx(Button, {
+        height: "130px",
+        children: "-20px Alignment Axis (Up)"
+      })
+    }), /*#__PURE__*/_jsx(Popover, {
+      text: "Custom offset: both axes combined",
+      direction: "right",
+      offset: {
+        mainAxis: 25,
+        alignmentAxis: -25
+      },
+      width: "fit-content",
+      inlineBlock: true,
+      children: /*#__PURE__*/_jsx(Button, {
+        height: "130px",
+        children: "Combined Axes (right and up)"
+      })
+    })]
+  })
+});
+customOffset.storyName = "Custom Offset";
 defaultPopover.__docgenInfo = {
   "description": "",
   "methods": [],
@@ -229,4 +323,9 @@ keepInViewExample.__docgenInfo = {
   "description": "",
   "methods": [],
   "displayName": "keepInViewExample"
+};
+customOffset.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "customOffset"
 };

package/es/components/Popover/index.js

@@ -84,9 +84,39 @@ export default function Popover(_ref) {
     ariaLabel,
     inlineBlock,
     withFocusControl = true,
+    offset: customOffset,
+    headerAvatarSizing,
     ...props
   } = _ref;
   const [visible, setVisible] = useState(false);
+  const middleware = useMemo(() => [offset(_ref2 => {
+    let {
+      rects
+    } = _ref2;
+    const defaultOffset = {
+      mainAxis: 10,
+      alignmentAxis: -rects.floating.width
+    };
+    if (customOffset) {
+      // For simple placements (right, left, top, bottom), use crossAxis instead of alignmentAxis
+      const placement = DIRECTIONS_MAP[direction] || direction || "right";
+      const isSimplePlacement = !placement.includes("-");
+      if (isSimplePlacement && customOffset.alignmentAxis !== undefined) {
+        return {
+          ...defaultOffset,
+          mainAxis: customOffset.mainAxis !== undefined ? customOffset.mainAxis : defaultOffset.mainAxis,
+          crossAxis: customOffset.alignmentAxis
+        };
+      }
+      return {
+        ...defaultOffset,
+        ...customOffset
+      };
+    }
+    return defaultOffset;
+  }), flip({
+    fallbackAxisSideDirection: "start"
+  }), shift()], [direction, customOffset]);
   const {
     refs,
     floatingStyles,
@@ -96,17 +126,7 @@ export default function Popover(_ref) {
     onOpenChange: setVisible,
     placement: DIRECTIONS_MAP[direction] || direction || "right",
     whileElementsMounted: autoUpdate,
-    middleware: [offset(_ref2 => {
-      let {
-        rects
-      } = _ref2;
-      return {
-        mainAxis: 10,
-        alignmentAxis: -rects.floating.width
-      };
-    }), flip({
-      fallbackAxisSideDirection: "start"
-    }), shift()]
+    middleware
   });
   const hover = useHover(context, {
     move: false,
@@ -132,10 +152,19 @@ export default function Popover(_ref) {
     tabIndex: "0"
   }), [getReferenceProps, refs.setReference]);
   const directionClass = useMemo(() => context.placement === DIRECTIONS_MAP[direction] ? direction : context.placement, [context.placement, direction]);
-  const style = useMemo(() => ({
-    ...floatingStyles,
-    zIndex: getFloatingUiZIndex(context.refs.reference)
-  }), [floatingStyles, context.refs.reference]);
+  const style = useMemo(() => {
+    const baseStyle = {
+      ...floatingStyles,
+      zIndex: getFloatingUiZIndex(context.refs.reference)
+    };
+
+    // Add CSS-based positioning for Header Avatar sizing changes
+    if (headerAvatarSizing) {
+      const translateY = headerAvatarSizing === "large" ? -56 : -3;
+      baseStyle.transform = `${baseStyle.transform || ""} translateY(${translateY}px)`;
+    }
+    return baseStyle;
+  }, [floatingStyles, context.refs.reference, headerAvatarSizing]);
   const containsLinks = withFocusControl && refs.floating?.current?.querySelectorAll("a").length;
   const visiblePopoverClassName = useMemo(() => `Tooltip popover visible ${directionClass}`, [directionClass]);
   const floatingProps = useMemo(() => getFloatingProps({
@@ -230,7 +259,11 @@ Popover.propTypes = {
   tabIndex: PropTypes.number,
   className: PropTypes.string,
   /** Render tooltip with focus control when there is link inside, defaults to true */
-  withFocusControl: PropTypes.bool
+  withFocusControl: PropTypes.bool,
+  /** Custom offset configuration for the popover positioning. Can be an object with mainAxis and/or alignmentAxis properties, or a function that returns an offset object. */
+  offset: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+  /** Special prop for Header Avatar to apply CSS-based positioning adjustments when sizing changes dynamically */
+  headerAvatarSizing: PropTypes.oneOf(["large", "default", "small"])
 };
 Popover.__docgenInfo = {
   "description": "",
@@ -356,6 +389,35 @@ Popover.__docgenInfo = {
         "name": "string"
       },
       "required": false
+    },
+    "offset": {
+      "description": "Custom offset configuration for the popover positioning. Can be an object with mainAxis and/or alignmentAxis properties, or a function that returns an offset object.",
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "object"
+        }, {
+          "name": "func"
+        }]
+      },
+      "required": false
+    },
+    "headerAvatarSizing": {
+      "description": "Special prop for Header Avatar to apply CSS-based positioning adjustments when sizing changes dynamically",
+      "type": {
+        "name": "enum",
+        "value": [{
+          "value": "\"large\"",
+          "computed": false
+        }, {
+          "value": "\"default\"",
+          "computed": false
+        }, {
+          "value": "\"small\"",
+          "computed": false
+        }]
+      },
+      "required": false
     }
   }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orcs-design-system",
-  "version": "3.3.33",
+  "version": "3.3.35",
   "engines": {
     "node": "20.12.2"
   },