@westpac/ui 0.59.0 → 0.59.2

package/dist/css/westpac-ui.min.css

@@ -4266,20 +4266,16 @@ body {
   --tw-translate-x: 50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
-.translate-x-\[-6px\] {
-  --tw-translate-x: -6px;
+.translate-x-\[-2\.5px\] {
+  --tw-translate-x: -2.5px;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 .translate-x-\[0\.125rem\] {
   --tw-translate-x: 0.125rem;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
-.translate-x-\[6px\] {
-  --tw-translate-x: 6px;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-.translate-y-0 {
-  --tw-translate-y: 0rem;
+.translate-x-\[14px\] {
+  --tw-translate-x: 14px;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 .-rotate-45 {
@@ -5990,6 +5986,9 @@ body {
 .pb-\[2\.75rem\] {
   padding-bottom: 2.75rem;
 }
+.pb-\[200px\] {
+  padding-bottom: 200px;
+}
 .pb-\[5vh\] {
   padding-bottom: 5vh;
 }
@@ -7972,10 +7971,6 @@ body {
   content: var(--tw-content);
   bottom: 1.5rem;
 }
-.after\:bottom-\[1px\]::after {
-  content: var(--tw-content);
-  bottom: 1px;
-}
 .after\:left-0::after {
   content: var(--tw-content);
   left: 0rem;
@@ -9368,20 +9363,16 @@ body {
     --tw-translate-x: 50%;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
-  .xsl\:translate-x-\[-6px\] {
-    --tw-translate-x: -6px;
+  .xsl\:translate-x-\[-2\.5px\] {
+    --tw-translate-x: -2.5px;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
   .xsl\:translate-x-\[0\.125rem\] {
     --tw-translate-x: 0.125rem;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
-  .xsl\:translate-x-\[6px\] {
-    --tw-translate-x: 6px;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-  }
-  .xsl\:translate-y-0 {
-    --tw-translate-y: 0rem;
+  .xsl\:translate-x-\[14px\] {
+    --tw-translate-x: 14px;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
   .xsl\:-rotate-45 {
@@ -10215,10 +10206,6 @@ body {
     top: 1.25rem;
     bottom: 1.25rem;
   }
-  .xsl\:after\:bottom-\[1px\]::after {
-    content: var(--tw-content);
-    bottom: 1px;
-  }
   .xsl\:after\:left-1::after {
     content: var(--tw-content);
     left: 0.375rem;
@@ -11132,20 +11119,16 @@ body {
     --tw-translate-x: 50%;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
-  .sm\:translate-x-\[-6px\] {
-    --tw-translate-x: -6px;
+  .sm\:translate-x-\[-2\.5px\] {
+    --tw-translate-x: -2.5px;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
   .sm\:translate-x-\[0\.125rem\] {
     --tw-translate-x: 0.125rem;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
-  .sm\:translate-x-\[6px\] {
-    --tw-translate-x: 6px;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-  }
-  .sm\:translate-y-0 {
-    --tw-translate-y: 0rem;
+  .sm\:translate-x-\[14px\] {
+    --tw-translate-x: 14px;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
   .sm\:-rotate-45 {
@@ -12002,10 +11985,6 @@ body {
     top: 1.25rem;
     bottom: 1.25rem;
   }
-  .sm\:after\:bottom-\[1px\]::after {
-    content: var(--tw-content);
-    bottom: 1px;
-  }
   .sm\:after\:left-1::after {
     content: var(--tw-content);
     left: 0.375rem;
@@ -12981,20 +12960,16 @@ body {
     --tw-translate-x: 50%;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
-  .md\:translate-x-\[-6px\] {
-    --tw-translate-x: -6px;
+  .md\:translate-x-\[-2\.5px\] {
+    --tw-translate-x: -2.5px;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
   .md\:translate-x-\[0\.125rem\] {
     --tw-translate-x: 0.125rem;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
-  .md\:translate-x-\[6px\] {
-    --tw-translate-x: 6px;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-  }
-  .md\:translate-y-0 {
-    --tw-translate-y: 0rem;
+  .md\:translate-x-\[14px\] {
+    --tw-translate-x: 14px;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
   .md\:-rotate-45 {
@@ -13859,10 +13834,6 @@ body {
     top: 1.25rem;
     bottom: 1.25rem;
   }
-  .md\:after\:bottom-\[1px\]::after {
-    content: var(--tw-content);
-    bottom: 1px;
-  }
   .md\:after\:left-1::after {
     content: var(--tw-content);
     left: 0.375rem;
@@ -14829,20 +14800,16 @@ body {
     --tw-translate-x: 50%;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
-  .lg\:translate-x-\[-6px\] {
-    --tw-translate-x: -6px;
+  .lg\:translate-x-\[-2\.5px\] {
+    --tw-translate-x: -2.5px;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
   .lg\:translate-x-\[0\.125rem\] {
     --tw-translate-x: 0.125rem;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
-  .lg\:translate-x-\[6px\] {
-    --tw-translate-x: 6px;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-  }
-  .lg\:translate-y-0 {
-    --tw-translate-y: 0rem;
+  .lg\:translate-x-\[14px\] {
+    --tw-translate-x: 14px;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
   .lg\:-rotate-45 {
@@ -15688,10 +15655,6 @@ body {
     top: 1.25rem;
     bottom: 1.25rem;
   }
-  .lg\:after\:bottom-\[1px\]::after {
-    content: var(--tw-content);
-    bottom: 1px;
-  }
   .lg\:after\:left-1::after {
     content: var(--tw-content);
     left: 0.375rem;
@@ -16604,20 +16567,16 @@ body {
     --tw-translate-x: 50%;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
-  .xl\:translate-x-\[-6px\] {
-    --tw-translate-x: -6px;
+  .xl\:translate-x-\[-2\.5px\] {
+    --tw-translate-x: -2.5px;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
   .xl\:translate-x-\[0\.125rem\] {
     --tw-translate-x: 0.125rem;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
-  .xl\:translate-x-\[6px\] {
-    --tw-translate-x: 6px;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-  }
-  .xl\:translate-y-0 {
-    --tw-translate-y: 0rem;
+  .xl\:translate-x-\[14px\] {
+    --tw-translate-x: 14px;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
   .xl\:-rotate-45 {
@@ -17445,10 +17404,6 @@ body {
     top: 1.25rem;
     bottom: 1.25rem;
   }
-  .xl\:after\:bottom-\[1px\]::after {
-    content: var(--tw-content);
-    bottom: 1px;
-  }
   .xl\:after\:left-1::after {
     content: var(--tw-content);
     left: 0.375rem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@westpac/ui",
-  "version": "0.59.0",
+  "version": "0.59.2",
   "license": "MIT",
   "sideEffects": false,
   "type": "module",

package/src/components/button/button.component.tsx

@@ -23,6 +23,7 @@ function BaseButton(
     iconSize,
     children,
     removeLinkPadding,
+    type = Tag === 'button' ? 'button' : undefined,
     ...props
   }: ButtonProps,
   ref: Ref<ButtonRef>,
@@ -41,7 +42,7 @@ function BaseButton(
   });
 
   return (
-    <Tag ref={ref} className={styles.base({ className })} {...mergeProps(props, focusProps)}>
+    <Tag ref={ref} className={styles.base({ className })} {...mergeProps(props, focusProps)} type={type}>
       {IconBefore && (
         <IconBefore look={iconLook} size={btnIconSize} className={styles.iconBefore()} color={iconColor} aria-hidden />
       )}

package/src/components/compacta/compacta.component.tsx

@@ -25,6 +25,8 @@ export function Compacta({
   titleTag: Tag = 'h3',
   addText = 'Add another',
   initialCompactas,
+  onAdd,
+  onRemove,
   ...props
 }: CompactaProps) {
   const [initial, setInitial] = useState(true);
@@ -64,11 +66,16 @@ export function Compacta({
     ]);
 
     setAction({ type: 'add', index: newItems.length });
+
+    onAdd?.();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [id, items]);
 
   const handleRemove = useCallback((id: string, index: number) => {
     setItems(items => items.filter(item => item.id !== id));
     setAction({ type: 'remove', index, id });
+    onRemove?.(id, index);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const handleToggle = useCallback(
@@ -125,7 +132,7 @@ export function Compacta({
         const itemId = item.id ?? `${id}-${generateID()}`;
         return {
           id: itemId,
-          open: index === initialCompactas.length - 1 ? true : false,
+          open: item.open ? item.open : index === initialCompactas.length - 1,
           delay: false,
           title: {
             primary: item.title?.primary ?? '',
@@ -198,6 +205,7 @@ export function Compacta({
                     <div className={styles.content()} id={`gel-compacta-content-${item.id}`}>
                       {children({
                         id: item.id,
+                        index,
                         setPrimaryTitle: (title: string) => setTitle(item.id, 'primary', title),
                         setSecondaryTitle: (title: string) => setTitle(item.id, 'secondary', title),
                         setTertiaryTitle: (title: string) => setTitle(item.id, 'tertiary', title),

package/src/components/compacta/compacta.types.ts

@@ -16,9 +16,19 @@ export type CompactaProps = {
   initialCompactas?: {
     // Compacta id
     id?: string;
+    // If compacta should be open on initial render
+    open?: boolean;
     // Titles to pre-fill, won't be done automatically
     title?: { primary?: string; secondary?: string; tertiary?: string };
   }[];
+  /**
+   * Callback when a compacta is added
+   */
+  onAdd?: () => void;
+  /**
+   * Callback when a compacta is removed, provides the id and index of the removed compacta
+   */
+  onRemove?: (id: string, index: number) => void;
   /**
    * Tag for primary title
    * @default h3
@@ -28,6 +38,7 @@ export type CompactaProps = {
 
 type ContentProps = {
   id: string;
+  index: number;
   setPrimaryTitle: (title: string) => unknown;
   setSecondaryTitle: (title: string) => unknown;
   setTertiaryTitle: (title: string) => unknown;

package/src/components/popover/components/panel/panel.component.tsx

@@ -14,15 +14,21 @@ export function BasePanel({
   heading,
   headingTag: Tag = 'h1',
   content,
-  placement = 'bottom',
+  placement = 'top',
   id,
   triggerRef,
   portal,
 }: PanelProps) {
   const popoverRef = useRef<HTMLDivElement>(null);
   const arrowRef = useRef<HTMLDivElement>(null);
-  const { popoverPosition, arrowPosition } = usePanel({ state, placement, triggerRef, portal });
-  const styles = panelStyles({ placement });
+  const { popoverPosition, arrowPosition, localPlacement } = usePanel({
+    state,
+    placement,
+    triggerRef,
+    portal,
+    popoverRef,
+  });
+  const styles = panelStyles({ placement: localPlacement });
   return (
     <FocusScope autoFocus restoreFocus>
       <div style={popoverPosition} className={styles.popover()} test-id="popover" id={id} ref={popoverRef}>

package/src/components/popover/components/panel/panel.hook.tsx

@@ -1,8 +1,9 @@
-import { RefObject, useEffect, useMemo, useState } from 'react';
+import { RefObject, useCallback, useEffect, useLayoutEffect, useMemo, useState } from 'react';
 
 import { PanelProps } from './panel.types.js';
 
 const PANEL_WIDTH_SIZE = 300;
+const ARROW_HEIGHT = 7; // the border-x value for the before pseudo element in the styles, 2*ARROW_HEIGHT gives the width of the arrow
 
 const getHorizontalPositionPopover = (element: HTMLDivElement, screenWidth: number) => {
   const triggerDOMRect = element.getBoundingClientRect();
@@ -29,10 +30,18 @@ const getLeftOffsetPerHorizontalPosition = (element: HTMLDivElement, screenWidth
     case 'right':
       // For smaller screens, if adjusting for right makes it go off screen on the left, adjust it to have a 16px space from the edge
       if (triggerDOMRect.left + rightOffset <= 0) {
+        // For extra small screens extra adjustment is needed e.g. <320px wide
+        if (triggerDOMRect.left + rightOffset - PANEL_WIDTH_SIZE <= -screenWidth) {
+          return rightOffset - (triggerDOMRect.left + rightOffset) + (screenWidth - PANEL_WIDTH_SIZE) / 2;
+        }
         return rightOffset - (triggerDOMRect.left + rightOffset) + 16;
       }
       return rightOffset;
     default:
+      // For extra small screens extra adjustment is needed e.g. <320px wide
+      if (triggerDOMRect?.left + PANEL_WIDTH_SIZE >= screenWidth) {
+        return -(triggerDOMRect?.left || 0) + (screenWidth - PANEL_WIDTH_SIZE) / 2;
+      }
       return 0;
   }
 };
@@ -51,15 +60,62 @@ export type PanelHookProps = {
  * @returns {Object} return.popoverPosition - The calculated position styles for the popover.
  * @returns {Object} return.arrowPosition - The calculated position styles for the popover arrow.
  */
-export function usePanel({ state, placement = 'bottom', triggerRef, portal }: PanelHookProps) {
+export function usePanel({ state, placement = 'top', triggerRef, portal, popoverRef }: PanelHookProps) {
+  if (!triggerRef.current) {
+    throw new Error('You must pass valid refs.');
+  }
   // using documentElement to get the width of the viewport excluding scrollbar
   const [screenWidth, setScreenWidth] = useState<number>(document.documentElement.clientWidth);
+  const [localPlacement, setLocalPlacement] = useState<PanelProps['placement']>(placement);
+  const [originalPosition, setOriginalPosition] = useState<DOMRect | null>(null);
+  const trigger = triggerRef.current.getBoundingClientRect();
+
+  // used for flipping popover if there is no space
+  const getVerticalPosition = useCallback(() => {
+    // handle vertical position with portal
+    if (portal instanceof Element) {
+      const portalRect = portal.getBoundingClientRect();
+      if (originalPosition && originalPosition?.top < portalRect.top) {
+        setLocalPlacement('bottom');
+      }
+      if (originalPosition && originalPosition?.bottom > portalRect.bottom) {
+        setLocalPlacement('top');
+      }
+      return;
+    }
+    // handle vertical position with no portal
+    if (originalPosition && originalPosition?.height > trigger.top) {
+      setLocalPlacement('bottom');
+    }
+    if (originalPosition && originalPosition?.bottom > document.documentElement.clientHeight) {
+      setLocalPlacement('top');
+    }
+    if (
+      originalPosition &&
+      originalPosition?.bottom <= document.documentElement.clientHeight &&
+      placement === 'bottom'
+    ) {
+      setLocalPlacement('bottom');
+    }
+  }, [placement, portal, originalPosition, trigger.top]);
+
+  useLayoutEffect(() => {
+    setOriginalPosition(popoverRef?.current?.getBoundingClientRect() || null);
+  }, [popoverRef]);
+
+  // So popover can be in correct position on open and doesn't move when opened
+  useLayoutEffect(() => {
+    getVerticalPosition();
+  }, [getVerticalPosition]);
+
   useEffect(() => {
     const handleResize = () => {
       if (portal instanceof Element) {
         setScreenWidth(portal.clientWidth);
+        getVerticalPosition();
       } else {
         setScreenWidth(document.documentElement.clientWidth);
+        getVerticalPosition();
       }
     };
 
@@ -67,7 +123,7 @@ export function usePanel({ state, placement = 'bottom', triggerRef, portal }: Pa
     return () => {
       window.removeEventListener('resize', handleResize);
     };
-  }, [portal]);
+  }, [portal, getVerticalPosition]);
 
   const popoverPosition = useMemo(() => {
     const triggerDOMRect = triggerRef.current?.getBoundingClientRect();
@@ -75,7 +131,7 @@ export function usePanel({ state, placement = 'bottom', triggerRef, portal }: Pa
     const leftOffset = triggerRef.current ? getLeftOffsetPerHorizontalPosition(triggerRef.current, screenWidth) : 0;
     // If it is not portal, we can simplify the logic
     if (!portal) {
-      switch (placement) {
+      switch (localPlacement) {
         case 'top':
           return {
             bottom: '100%',
@@ -92,7 +148,7 @@ export function usePanel({ state, placement = 'bottom', triggerRef, portal }: Pa
 
     // If it is portal, we need to considerate the scroll if there is a scroll in the portal
     const portalElement = portal as Element;
-    switch (placement) {
+    switch (localPlacement) {
       case 'top':
         return {
           // The top is calculated according to the portal element
@@ -109,7 +165,7 @@ export function usePanel({ state, placement = 'bottom', triggerRef, portal }: Pa
         };
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [placement, portal, triggerRef, state.isOpen, screenWidth]);
+  }, [localPlacement, portal, triggerRef, state.isOpen, screenWidth]);
 
   const arrowPosition = useMemo(() => {
     const triggerDOMRect = triggerRef.current?.getBoundingClientRect();
@@ -118,13 +174,14 @@ export function usePanel({ state, placement = 'bottom', triggerRef, portal }: Pa
       : 0;
 
     return {
-      left: `${(triggerDOMRect?.width || 0) / 2 + leftOffset}px`,
+      left: `${leftOffset - ARROW_HEIGHT + (triggerDOMRect?.width || 0) / 2}px`,
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [triggerRef, state.isOpen, screenWidth]);
+  }, [triggerRef, state.isOpen, screenWidth, originalPosition]);
 
   return {
     popoverPosition,
     arrowPosition,
+    localPlacement,
   };
 }

package/src/components/popover/components/panel/panel.styles.ts

@@ -18,11 +18,11 @@ export const styles = tv(
       placement: {
         top: {
           popover: '-mt-2 mb-2',
-          arrow: 'top-full translate-x-[-6px] translate-y-0',
+          arrow: 'top-full translate-x-[-2.5px]',
         },
         bottom: {
           popover: 'mt-2',
-          arrow: 'bottom-full translate-x-[6px] rotate-180 after:bottom-[1px]',
+          arrow: 'bottom-full translate-x-[14px] rotate-180', // rotate-180 moves the arrow to the left, translate needed for centering
         },
       },
     },