@westpac/ui 1.0.0-canary.9 → 1.0.0

package/src/components/multi-select/components/multi-select-searchbar/multi-select-searchbar.component.tsx

@@ -0,0 +1,81 @@
+import React, { useContext, useCallback, KeyboardEvent } from 'react';
+
+import { Button } from '../../../../components/button/index.js';
+import { ClearIcon, SearchIcon } from '../../../../components/icon/index.js';
+import { InputGroup } from '../../../../components/input-group/index.js';
+import { Input } from '../../../input/index.js';
+import { MultiSelectContext } from '../../multi-select.component.js';
+
+import { styles as searchbarStyles } from './multi-select-searchbar.styles.js';
+
+import type { MultiSelectSearchbarProps } from './multi-select-searchbar.types.js';
+
+export function MultiSelectSearchbar({
+  filterText,
+  setFilterText,
+  closeBtnRef,
+}: Pick<MultiSelectSearchbarProps, 'filterText' | 'setFilterText' | 'closeBtnRef'>) {
+  const { size, inputRef, selectAllRef, listBoxRef } = useContext(MultiSelectContext);
+  const styles = searchbarStyles();
+  const handleInputKeyDown = useCallback(
+    (e: KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        if (selectAllRef.current) {
+          selectAllRef.current.focus();
+        } else {
+          const firstItem = listBoxRef.current?.querySelector('[data-key]') as HTMLElement;
+          firstItem?.focus();
+        }
+      }
+      if (e.key === 'Escape' && filterText.length > 0) {
+        e.stopPropagation();
+        setFilterText('');
+      }
+      if (e.key === 'Tab' && filterText.length > 0) {
+        e.preventDefault();
+        e.stopPropagation();
+        closeBtnRef.current?.focus();
+      }
+    },
+    [filterText.length, setFilterText, selectAllRef, listBoxRef, closeBtnRef],
+  );
+  return (
+    <div className={styles.searchInputWrapper()}>
+      <InputGroup
+        before={{
+          icon: props => <SearchIcon {...props} color="muted" />,
+        }}
+        after={
+          filterText.length > 0 && {
+            inset: true,
+            element: (
+              <Button
+                onClick={() => {
+                  setFilterText('');
+                  inputRef.current?.focus();
+                }}
+                look="unstyled"
+                className={styles.clearButton()}
+                ref={closeBtnRef}
+                aria-label="Clear filter text"
+              >
+                <ClearIcon color="muted" size="small" />
+              </Button>
+            ),
+          }
+        }
+        aria-label="Filter options"
+      >
+        <Input
+          ref={inputRef}
+          size={size}
+          value={filterText}
+          onChange={e => setFilterText(e.target.value)}
+          onKeyDown={handleInputKeyDown}
+          tabIndex={-1}
+        />
+      </InputGroup>
+    </div>
+  );
+}

package/src/components/multi-select/components/multi-select-searchbar/multi-select-searchbar.styles.ts

@@ -0,0 +1,8 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv({
+  slots: {
+    searchInputWrapper: 'border-b border-b-border-muted-soft p-2',
+    clearButton: 'mb-0.5 px-2',
+  },
+});

package/src/components/multi-select/components/multi-select-searchbar/multi-select-searchbar.types.ts

@@ -0,0 +1,7 @@
+import { ButtonRef } from '../../../../components/button/button.types.js';
+
+export type MultiSelectSearchbarProps = {
+  filterText: string;
+  setFilterText: (text: string) => void;
+  closeBtnRef: React.RefObject<ButtonRef>;
+};

package/src/components/multi-select/index.ts

@@ -0,0 +1,2 @@
+export { MultiSelect, MultiSelectItem, MultiSelectSection } from './multi-select.component.js';
+export { type MultiSelectValue } from './multi-select.types.js';

package/src/components/multi-select/multi-select.component.tsx

@@ -0,0 +1,116 @@
+'use client';
+
+import { Node } from '@react-types/shared';
+import React, { useRef, useState, memo, createContext } from 'react';
+import { useFilter, useOverlayTrigger } from 'react-aria';
+import { Item, useListState, useOverlayTriggerState } from 'react-stately';
+
+import { MultiSelectDropdown } from './components/multi-select-dropdown/multi-select-dropdown.component.js';
+import { MultiSelectListBoxTrigger } from './components/multi-select-list-box-trigger/multi-select-list-box-trigger.component.js';
+import { styles as multiSelectStyles } from './multi-select.styles.js';
+import { filterNodes } from './utils/filter-nodes.js';
+
+import type {
+  MultiSelectContextProps,
+  MultiSelectItemProps,
+  MultiSelectProps,
+  MultiSelectValue,
+} from './multi-select.types.js';
+
+export const MultiSelectContext = createContext<MultiSelectContextProps>({
+  overlayState: {} as MultiSelectContextProps['overlayState'],
+  listState: {} as MultiSelectContextProps['listState'],
+  listBoxRef: { current: null },
+  buttonRef: { current: null },
+  popoverRef: { current: null },
+  selectAllRef: { current: null },
+  inputRef: { current: null },
+  filterText: '',
+  overlayProps: {},
+});
+
+export function BaseMultiSelect<T extends MultiSelectValue = MultiSelectValue>({
+  size = 'medium',
+  listBoxProps,
+  selectionMode = 'multiple',
+  selectedKeys,
+  onSelectionChange,
+  placeholder = 'Select',
+  showSingleSectionTitle = false,
+  placement,
+  portalContainer,
+  id,
+  ...props
+}: MultiSelectProps<T>) {
+  const [filterText, setFilterText] = useState('');
+  const filter = useFilter({ sensitivity: 'base' });
+
+  const listState = useListState<T>({
+    ...props,
+    selectedKeys,
+    selectionMode,
+    onSelectionChange,
+    // Need to provide a custom filter as the default filtering in react-stately does not work with sections
+    // https://github.com/adobe/react-spectrum/issues/4930
+    filter: (nodes: Iterable<Node<T>>) =>
+      filterNodes(nodes, filterText, (value, string) => filter.contains(value, string)),
+  });
+
+  // refs
+  const inputRef = useRef<HTMLInputElement>(null);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const popoverRef = useRef<HTMLDivElement>(null);
+  const selectAllRef = useRef<HTMLInputElement>(null);
+  const listBoxRef = useRef<HTMLUListElement>(null);
+
+  const overlayState = useOverlayTriggerState({
+    onOpenChange: isOpen => {
+      if (isOpen) {
+        requestAnimationFrame(() => {
+          inputRef.current?.focus();
+        });
+      }
+      if (!isOpen) {
+        buttonRef.current?.focus();
+      }
+    },
+  });
+  const { triggerProps, overlayProps } = useOverlayTrigger({ type: 'dialog' }, overlayState, buttonRef);
+
+  const styles = multiSelectStyles({});
+
+  return (
+    <MultiSelectContext.Provider
+      value={{
+        filterText,
+        size,
+        overlayState,
+        listState,
+        buttonRef,
+        popoverRef,
+        placement,
+        selectAllRef,
+        listBoxRef,
+        inputRef,
+        overlayProps,
+        portalContainer,
+      }}
+    >
+      <div className={styles.root()}>
+        <MultiSelectListBoxTrigger
+          placeholder={placeholder}
+          selectedKeys={selectedKeys}
+          showSingleSectionTitle={showSingleSectionTitle}
+          triggerProps={triggerProps}
+          id={id}
+        />
+        {overlayState.isOpen && <MultiSelectDropdown setFilterText={setFilterText} {...listBoxProps} />}
+      </div>
+    </MultiSelectContext.Provider>
+  );
+}
+export const MultiSelect = memo(BaseMultiSelect);
+
+// Exporting react-stately's Item with custom props/naming and Section with custom naming to align with other components
+export const MultiSelectItem = Item as (props: MultiSelectItemProps) => JSX.Element;
+export { Section as MultiSelectSection } from 'react-stately';

package/src/components/multi-select/multi-select.styles.ts

@@ -0,0 +1,7 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv({
+  slots: {
+    root: 'relative flex flex-col gap-1',
+  },
+});

package/src/components/multi-select/multi-select.types.ts

@@ -0,0 +1,60 @@
+import { DOMProps } from '@react-types/shared';
+import { Key, ReactNode, RefObject } from 'react';
+import { AriaListBoxOptions, AriaPopoverProps } from 'react-aria';
+import { ItemProps, ListProps, ListState, OverlayTriggerState } from 'react-stately';
+
+import { MultiSelectSize } from './components/multi-select-list-box-trigger/multi-select-list-box-trigger.types.js';
+
+export type MultiSelectContextProps<T extends object = object> = {
+  size?: MultiSelectSize;
+  overlayState: OverlayTriggerState;
+  listState: ListState<T>;
+  buttonRef: RefObject<HTMLButtonElement>;
+  listBoxRef: RefObject<HTMLUListElement>;
+  popoverRef: RefObject<HTMLDivElement>;
+  selectAllRef: RefObject<HTMLInputElement>;
+  inputRef: RefObject<HTMLInputElement>;
+  filterText: string;
+  overlayProps: DOMProps;
+  placement?: AriaPopoverProps['placement'];
+  portalContainer?: Element;
+};
+
+export type MultiSelectItemProps<T extends object = object> = { description?: string } & ItemProps<T>;
+
+// Props for the items that can be passed to the MultiSelect component
+export type MultiSelectValue = { textValue?: string; content?: ReactNode; key: Key; description?: string };
+
+export type MultiSelectProps<T> = {
+  /**
+   * Props for the list box within the multi-select
+   */
+  listBoxProps?: Omit<AriaListBoxOptions<T>, 'state' | 'selectionMode'>;
+  /**
+   * id for the base multi-select container for accessibility/other uses
+   */
+  id?: string;
+  /**
+   * Placeholder text for the input
+   */
+  placeholder?: string;
+  /**
+   * Manual placement of the dropdown, will flip automatically if there is not enough space
+   * @default bottom
+   */
+  placement?: AriaPopoverProps['placement'];
+  /**
+   * Element where the popover will be rendered, by default it will be into the body
+   */
+  portalContainer?: Element;
+  /**
+   * Whether to show the section for the selected option in the field i.e. "Transaction: Savings" rather than "Savings"
+   * NOTE: Only works with single selectionMode multi-selects
+   */
+  showSingleSectionTitle?: boolean;
+  /**
+   * Size of input
+   * @default medium
+   */
+  size?: MultiSelectSize;
+} & ListProps<T>;

package/src/components/multi-select/utils/filter-nodes.ts

@@ -0,0 +1,29 @@
+import { Node } from '@react-types/shared';
+
+export function filterNodes<T>(
+  nodes: Iterable<Node<T>>,
+  filterText: string,
+  contains: (value: string, search: string) => boolean,
+): Iterable<Node<T>> {
+  if (!filterText) return nodes;
+
+  const arr = Array.from(nodes);
+
+  return arr.flatMap((node: Node<T>) => {
+    if (node.type !== 'section') {
+      return contains(node.textValue ?? '', filterText) ? [node] : [];
+    }
+
+    // See https://github.com/adobe/react-spectrum/discussions/4348 for why this deprecation is ignored
+    // eslint-disable-next-line sonarjs/deprecation
+    const childNodesArr = Array.from(node.childNodes || []);
+    const matchedChildren: Node<T>[] = childNodesArr.filter((child: Node<T>) =>
+      contains(child.textValue ?? '', filterText),
+    );
+
+    if (matchedChildren.length === 0) return [];
+
+    const sectionWithMatches = { ...node, childNodes: matchedChildren } as Node<T>;
+    return [sectionWithMatches];
+  });
+}

package/src/components/pictogram/pictogram.styles.ts

@@ -8,9 +8,8 @@ export const fill = tv({
   base: '',
   variants: {
     mode: {
-      dark: 'fill-surface-pictogram-base',
-      light: 'fill-surface-mono',
-      reversed: 'fill-surface-reversed',
+      base: 'fill-surface-pictogram-base',
+      mono: 'fill-surface-mono',
       duo: '',
     },
     highlight: {

package/src/components/pictogram/pictogram.types.ts

@@ -1,6 +1,6 @@
 import { type SVGAttributes } from 'react';
 
-export type PictogramMode = 'dark' | 'light' | 'duo' | 'reversed';
+export type PictogramMode = 'base' | 'mono' | 'duo';
 
 export type PictogramProps = SVGAttributes<SVGElement> & {
   /**

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

@@ -1,9 +1,9 @@
-import React, { useRef } from 'react';
-import { FocusScope } from 'react-aria';
+import React, { useEffect, useRef } from 'react';
 import { createPortal } from 'react-dom';
 
 import { useBreakpoint } from '../../../../hook/breakpoints.hook.js';
 import { resolveResponsiveVariant } from '../../../../utils/breakpoint.util.js';
+import { ButtonRef } from '../../../button/button.types.js';
 import { Button } from '../../../button/index.js';
 import { CloseIcon } from '../../../icon/index.js';
 
@@ -16,42 +16,66 @@ export function BasePanel({
   heading,
   headingTag: Tag = 'h1',
   content,
-  placement = 'bottom',
+  placement = 'top',
   id,
   triggerRef,
+  onClose,
+  open,
   portal,
 }: PanelProps) {
   const popoverRef = useRef<HTMLDivElement>(null);
   const arrowRef = useRef<HTMLDivElement>(null);
   const breakpoint = useBreakpoint();
-  const resolvedPlacement = resolveResponsiveVariant(placement, breakpoint);
-  const { popoverPosition, arrowPosition } = usePanel({ state, placement: resolvedPlacement, triggerRef, portal });
+  const headingRef = useRef<HTMLHeadingElement>(null);
+  const buttonRef = useRef<ButtonRef>(null);
+  const { popoverPosition, arrowPosition, localPlacement } = usePanel({
+    state,
+    placement,
+    triggerRef,
+    portal,
+    popoverRef,
+  });
+  const resolvedPlacement = resolveResponsiveVariant(localPlacement, breakpoint);
 
   const styles = panelStyles({ placement: resolvedPlacement });
+  useEffect(() => {
+    if (state.isOpen && !open) {
+      if (headingRef.current) {
+        headingRef.current.focus();
+      } else {
+        buttonRef.current?.focus();
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [state.isOpen]);
+
   return (
-    <FocusScope autoFocus restoreFocus>
-      <div style={popoverPosition} className={styles.popover()} test-id="popover" id={id} ref={popoverRef}>
-        <div className={styles.content()}>
-          {heading && (
-            <Tag tabIndex={0} className={styles.heading()}>
-              {heading}
-            </Tag>
-          )}
-          <div className={styles.body()} tabIndex={0}>
-            {content}
-          </div>
-          <Button
-            look="link"
-            size="small"
-            onClick={() => state.close()}
-            className={styles.closeBtn()}
-            iconAfter={() => <CloseIcon color="primary" size="small" aria-hidden />}
-            aria-label="Close popover"
-          />
+    <div style={popoverPosition} className={styles.popover()} test-id="popover" id={id} ref={popoverRef} role="dialog">
+      <div className={styles.content()}>
+        {heading && (
+          <Tag className={styles.heading()} tabIndex={-1} ref={headingRef}>
+            {heading}
+          </Tag>
+        )}
+        <div className={styles.body()} id="popover-content">
+          {content}
         </div>
-        <div aria-hidden className={styles.arrow()} style={arrowPosition} test-id="arrow" ref={arrowRef} />
+        <Button
+          look="link"
+          tag="button"
+          size="small"
+          ref={buttonRef}
+          onClick={() => {
+            onClose?.();
+            state.close();
+          }}
+          className={styles.closeBtn()}
+          iconAfter={() => <CloseIcon color="primary" size="small" aria-hidden />}
+          aria-label="Close popover"
+        />
       </div>
-    </FocusScope>
+      <div aria-hidden className={styles.arrow()} style={arrowPosition} test-id="arrow" ref={arrowRef} />
+    </div>
   );
 }
 

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

@@ -1,41 +1,47 @@
-import { useMemo } from 'react';
+import { RefObject, useCallback, useEffect, useLayoutEffect, useMemo, useState } from 'react';
 
 import { PanelProps } from './panel.types.js';
 
-const PANEL_WIDTH_SIZE = 282;
+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 getVerticalPositionPopover = (element: HTMLDivElement) => {
+const getHorizontalPositionPopover = (element: HTMLDivElement, screenWidth: number) => {
   const triggerDOMRect = element.getBoundingClientRect();
-
-  const offsetLeftToCenter = (PANEL_WIDTH_SIZE - (triggerDOMRect?.width || 0) / 2) * -1;
+  const offsetLeftToCenter = ((PANEL_WIDTH_SIZE - (triggerDOMRect?.width || 0)) / 2) * -1;
   if (triggerDOMRect.left + offsetLeftToCenter <= 0) {
     return 'left';
   }
-  if (
-    triggerDOMRect.left + offsetLeftToCenter >= 0 &&
-    triggerDOMRect.right + offsetLeftToCenter * -1 <= window.innerWidth
-  ) {
+  if (triggerDOMRect.left + offsetLeftToCenter >= 0 && triggerDOMRect.right + offsetLeftToCenter * -1 <= screenWidth) {
     return 'center';
   }
-  if (PANEL_WIDTH_SIZE + (triggerDOMRect?.left || 0) >= window.innerWidth) {
+  if (PANEL_WIDTH_SIZE + (triggerDOMRect?.left || 0) >= screenWidth) {
     return 'right';
   }
 };
 
-const getLeftOffsetPerVerticalPosition = (element: HTMLDivElement) => {
+const getLeftOffsetPerHorizontalPosition = (element: HTMLDivElement, screenWidth: number) => {
   const triggerDOMRect = element.getBoundingClientRect();
-  switch (getVerticalPositionPopover(element)) {
+
+  const rightOffset =
+    (PANEL_WIDTH_SIZE + (triggerDOMRect?.left || 0) - screenWidth + (screenWidth - (triggerDOMRect?.right || 0))) * -1;
+  switch (getHorizontalPositionPopover(element, screenWidth)) {
     case 'center':
       return ((PANEL_WIDTH_SIZE - (triggerDOMRect?.width || 0)) / 2) * -1;
     case 'right':
-      return (
-        (PANEL_WIDTH_SIZE +
-          (triggerDOMRect?.left || 0) -
-          window.innerWidth +
-          (window.innerWidth - (triggerDOMRect?.right || 0))) *
-        -1
-      );
+      // 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;
   }
 };
@@ -45,6 +51,7 @@ export type PanelHookProps = {
   portal: PanelProps['portal'];
   state: PanelProps['state'];
   triggerRef: PanelProps['triggerRef'];
+  popoverRef?: RefObject<HTMLDivElement>;
 };
 
 /**
@@ -53,14 +60,78 @@ 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();
+      }
+    };
+
+    window.addEventListener('resize', handleResize);
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, [portal, getVerticalPosition]);
+
   const popoverPosition = useMemo(() => {
     const triggerDOMRect = triggerRef.current?.getBoundingClientRect();
     // The offset is calculated according if the popover will overflow the window
-    const leftOffset = triggerRef.current ? getLeftOffsetPerVerticalPosition(triggerRef.current) : 0;
+    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%',
@@ -77,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
@@ -94,20 +165,23 @@ export function usePanel({ state, placement = 'bottom', triggerRef, portal }: Pa
         };
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [placement, portal, triggerRef, state.isOpen]);
+  }, [localPlacement, portal, triggerRef, state.isOpen, screenWidth]);
 
   const arrowPosition = useMemo(() => {
     const triggerDOMRect = triggerRef.current?.getBoundingClientRect();
-    const leftOffset = triggerRef.current ? getLeftOffsetPerVerticalPosition(triggerRef.current) * -1 : 0;
+    const leftOffset = triggerRef.current
+      ? getLeftOffsetPerHorizontalPosition(triggerRef.current, screenWidth) * -1
+      : 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]);
+  }, [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
       },
     },
   },

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

@@ -16,6 +16,14 @@ export type PanelProps = {
    * Tag to render
    */
   headingTag?: keyof Pick<JSX.IntrinsicElements, 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'>;
+  /**
+   * onClose callback
+   */
+  onClose?: () => void;
+  /**
+   * Whether the popover is open by default
+   */
+  open?: boolean;
   /**
    * Placement of popover. If no placement provided it will default to top unless there is no space then will appear on bottom.
    */