@deque/cauldron-react 6.11.0 → 6.12.0-canary.67739754

package/lib/components/AnchoredOverlay/index.d.ts

@@ -0,0 +1,20 @@
+import { type Placement } from '@floating-ui/dom';
+import React from 'react';
+declare const AnchoredOverlay: React.ForwardRefExoticComponent<{
+    /** A target element or ref to attach the overlay anchor element. */
+    target: HTMLElement | React.RefObject<HTMLElement> | React.MutableRefObject<HTMLElement>;
+    /** Positional placement value to anchor the overlay element relative to its anchored target. */
+    placement?: "auto" | Placement | "auto-start" | "auto-end" | undefined;
+    /** Determines if the overlay anchor is currently visible. */
+    open?: boolean | undefined;
+    /** A callback function that is called when the overlay state changes. */
+    onOpenChange?: ((open: boolean) => void) | undefined;
+    /** A callback function that is called when the placement of the overlay changes. */
+    onPlacementChange?: ((placement: Placement) => void) | undefined;
+    /** An optional offset number to position the anchor element from its anchored target. */
+    offset?: number | undefined;
+    children?: React.ReactNode;
+} & React.HTMLAttributes<HTMLElement> & {
+    as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
+} & React.RefAttributes<HTMLElement>>;
+export default AnchoredOverlay;

package/lib/components/Listbox/Listbox.d.ts

@@ -2,15 +2,29 @@ import React from 'react';
 import type { ListboxOption } from './ListboxContext';
 import type { ListboxValue } from './ListboxOption';
 import type { PolymorphicProps, PolymorphicComponent } from '../../utils/polymorphicComponent';
-interface ListboxProps extends PolymorphicProps<Omit<React.HTMLAttributes<HTMLElement>, 'onSelect'>> {
-    value?: ListboxValue;
+interface BaseListboxProps extends PolymorphicProps<Omit<React.HTMLAttributes<HTMLElement>, 'onSelect' | 'defaultValue'>> {
     navigation?: 'cycle' | 'bound';
-    onSelectionChange?: <T extends HTMLElement = HTMLElement>({ value }: {
+    onActiveChange?: (option: ListboxOption) => void;
+}
+interface SingleSelectListboxProps extends BaseListboxProps {
+    multiselect?: false;
+    value?: ListboxValue;
+    defaultValue?: ListboxValue;
+    onSelectionChange?: <T extends HTMLElement = HTMLElement>(props: {
         target: T;
         previousValue: ListboxValue;
         value: ListboxValue;
     }) => void;
-    onActiveChange?: (option: ListboxOption) => void;
 }
-declare const Listbox: PolymorphicComponent<ListboxProps>;
+interface MultiSelectListboxProps extends BaseListboxProps {
+    multiselect: true;
+    value?: ListboxValue[];
+    defaultValue?: ListboxValue[];
+    onSelectionChange?: <T extends HTMLElement = HTMLElement>(props: {
+        target: T;
+        previousValue: ListboxValue[];
+        value: ListboxValue[];
+    }) => void;
+}
+declare const Listbox: PolymorphicComponent<SingleSelectListboxProps | MultiSelectListboxProps>;
 export default Listbox;

package/lib/components/Listbox/ListboxContext.d.ts

@@ -8,7 +8,8 @@ type ListboxOption<Element = HTMLElement, Value = string | number> = {
 type ListboxContext<T extends ListboxOption> = {
     options: T[];
     active: T | null;
-    selected: T | null;
+    selected: T[] | null;
+    multiselect: boolean;
     setOptions: React.Dispatch<React.SetStateAction<T[]>>;
     onSelect: (option: T) => void;
 };
@@ -19,9 +20,10 @@ declare const ListboxContext: React.Context<{
     options: never[];
     active: null;
     selected: null;
+    multiselect: boolean;
     setOptions: () => null;
     onSelect: () => null;
 }>;
-declare function ListboxProvider<T extends ListboxOption>({ options, active, selected, setOptions, onSelect, children }: ListboxProvider<T>): React.JSX.Element;
+declare function ListboxProvider<T extends ListboxOption>({ options, active, selected, multiselect, setOptions, onSelect, children }: ListboxProvider<T>): React.JSX.Element;
 declare function useListboxContext<T extends ListboxOption>(): ListboxContext<T>;
 export { ListboxProvider, useListboxContext, ListboxOption };

package/lib/components/Listbox/ListboxOption.d.ts

@@ -4,6 +4,7 @@ export type ListboxValue = Readonly<string | number | undefined>;
 interface ListboxOptionProps extends PolymorphicProps<React.HTMLAttributes<HTMLElement>> {
     value?: ListboxValue;
     disabled?: boolean;
+    selected?: boolean;
     activeClass?: string;
 }
 declare const ListboxOption: PolymorphicComponent<ListboxOptionProps>;

package/lib/components/Pagination/Pagination.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Placement } from '@popperjs/core';
+import type AnchoredOverlay from '../AnchoredOverlay';
 import { ContentNode } from '../../types';
 interface Props extends React.HTMLAttributes<HTMLDivElement> {
     totalItems: number;
@@ -15,7 +15,7 @@ interface Props extends React.HTMLAttributes<HTMLDivElement> {
     onPreviousPageClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
     onFirstPageClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
     onLastPageClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
-    tooltipPlacement?: Placement;
+    tooltipPlacement?: React.ComponentProps<typeof AnchoredOverlay>['placement'];
     thin?: boolean;
     className?: string;
 }

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

@@ -1,13 +1,13 @@
 import React, { ReactNode } from 'react';
-import { Placement } from '@popperjs/core';
 import { Cauldron } from '../../types';
+import AnchoredOverlay from '../AnchoredOverlay';
 export type PopoverVariant = 'prompt' | 'custom';
 type BaseProps = React.HTMLAttributes<HTMLDivElement> & {
     target: React.RefObject<HTMLElement> | HTMLElement;
     variant?: PopoverVariant;
     show: boolean;
     onClose: () => void;
-    placement?: Placement;
+    placement?: React.ComponentProps<typeof AnchoredOverlay>['placement'];
     portal?: React.RefObject<HTMLElement> | HTMLElement;
 };
 type CustomProps = BaseProps & {

package/lib/components/Table/Table.d.ts

@@ -1,9 +1,21 @@
-import React, { TableHTMLAttributes } from 'react';
-interface TableProps extends TableHTMLAttributes<HTMLTableElement> {
+import React from 'react';
+export type Column = {
+    align: ColumnAlignment;
+    width?: ColumnWidth;
+};
+export type ColumnAlignment = 'start' | 'center' | 'end';
+export type ColumnWidth = 'auto' | 'min-content' | 'max-content' | `${number}` | `${number}%` | `${number}fr`;
+export type RowAlignment = 'start' | 'center';
+type TableBaseProps = {
+    layout: never;
+    columns: never;
+    variant?: 'border';
+};
+type TableGridProps = {
+    layout: 'grid';
+    columns?: Array<Column> | number;
     variant?: 'border';
-}
-declare const Table: {
-    ({ children, className, variant, ...other }: TableProps): React.JSX.Element;
-    displayName: string;
 };
+type TableProps = (TableBaseProps | Partial<TableGridProps>) & React.TableHTMLAttributes<HTMLTableElement>;
+declare const Table: React.ForwardRefExoticComponent<TableProps & React.RefAttributes<HTMLTableElement>>;
 export default Table;

package/lib/components/Table/TableBody.d.ts

@@ -1,6 +1,5 @@
-import React, { HTMLAttributes } from 'react';
-declare const TableBody: {
-    ({ children, className, ...other }: HTMLAttributes<HTMLTableSectionElement>): React.JSX.Element;
-    displayName: string;
-};
+import React from 'react';
+declare const TableBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & {
+    className?: string | undefined;
+} & React.RefAttributes<HTMLTableSectionElement>>;
 export default TableBody;

package/lib/components/Table/TableCell.d.ts

@@ -1,6 +1,7 @@
-import React, { TdHTMLAttributes } from 'react';
-declare const TableCell: {
-    ({ children, className, ...other }: TdHTMLAttributes<HTMLTableCellElement>): React.JSX.Element;
-    displayName: string;
-};
+import type { ColumnAlignment } from './Table';
+import React from 'react';
+interface TableCellProps extends Omit<React.TdHTMLAttributes<HTMLTableDataCellElement>, 'align'> {
+    align?: ColumnAlignment;
+}
+declare const TableCell: React.ForwardRefExoticComponent<TableCellProps & React.RefAttributes<HTMLTableCellElement>>;
 export default TableCell;

package/lib/components/Table/TableContext.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { Column } from './Table';
+type TableContext = {
+    layout: 'table' | 'grid';
+    columns: Array<Column>;
+};
+type TableProvider = {
+    children: React.ReactNode;
+    layout: 'table' | 'grid';
+    columns: Array<Column>;
+};
+declare const TableContext: React.Context<TableContext>;
+declare function TableProvider({ children, layout, columns }: TableProvider): JSX.Element;
+declare function useTable(): TableContext;
+export { TableProvider, useTable };

package/lib/components/Table/TableFooter.d.ts

@@ -1,6 +1,5 @@
-import React, { HTMLAttributes } from 'react';
-declare const TableFooter: {
-    ({ children, className, ...other }: HTMLAttributes<HTMLTableSectionElement>): React.JSX.Element;
-    displayName: string;
-};
+import React from 'react';
+declare const TableFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & {
+    className?: string | undefined;
+} & React.RefAttributes<HTMLTableSectionElement>>;
 export default TableFooter;

package/lib/components/Table/TableHead.d.ts

@@ -1,6 +1,5 @@
-import React, { HTMLAttributes } from 'react';
-declare const TableHead: {
-    ({ children, className, ...other }: HTMLAttributes<HTMLTableSectionElement>): React.JSX.Element;
-    displayName: string;
-};
+import React from 'react';
+declare const TableHead: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & {
+    className?: string | undefined;
+} & React.RefAttributes<HTMLTableSectionElement>>;
 export default TableHead;

package/lib/components/Table/TableHeader.d.ts

@@ -1,13 +1,12 @@
-import React, { ThHTMLAttributes } from 'react';
+import type { ColumnAlignment } from './Table';
+import React from 'react';
 type SortDirection = 'ascending' | 'descending' | 'none';
-interface TableHeaderProps extends ThHTMLAttributes<HTMLTableCellElement> {
+interface TableHeaderProps extends Omit<React.ThHTMLAttributes<HTMLTableHeaderCellElement>, 'align'> {
     sortDirection?: SortDirection;
     onSort?: () => void;
     sortAscendingAnnouncement?: string;
     sortDescendingAnnouncement?: string;
+    align?: ColumnAlignment;
 }
-declare const TableHeader: {
-    ({ children, sortDirection, onSort, className, sortAscendingAnnouncement, sortDescendingAnnouncement, ...other }: TableHeaderProps): React.JSX.Element;
-    displayName: string;
-};
+declare const TableHeader: React.ForwardRefExoticComponent<TableHeaderProps & React.RefAttributes<HTMLTableHeaderCellElement>>;
 export default TableHeader;

package/lib/components/Table/useTableGridStyles.d.ts

@@ -0,0 +1,10 @@
+import type { useTable } from './TableContext';
+import type { Column, ColumnAlignment } from './Table';
+interface useTableGridStylesParameters<E extends HTMLTableCellElement = HTMLTableCellElement> {
+    elementRef: React.RefObject<E | null>;
+    align?: ColumnAlignment;
+    layout: ReturnType<typeof useTable>['layout'];
+    columns: Array<Column>;
+}
+export default function useTableGridStyles<E extends HTMLTableCellElement>({ elementRef, align, layout, columns }: useTableGridStylesParameters<E>): React.CSSProperties;
+export {};

package/lib/components/Tooltip/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Placement } from '@popperjs/core';
+import AnchoredOverlay from '../AnchoredOverlay';
 export interface TooltipProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
     className?: string;
@@ -8,7 +8,7 @@ export interface TooltipProps extends React.HTMLAttributes<HTMLDivElement> {
     association?: 'aria-labelledby' | 'aria-describedby' | 'none';
     show?: boolean | undefined;
     defaultShow?: boolean;
-    placement?: Placement;
+    placement?: React.ComponentProps<typeof AnchoredOverlay>['placement'];
     portal?: React.RefObject<HTMLElement> | HTMLElement;
     hideElementOnHidden?: boolean;
 }

package/lib/index.d.ts

@@ -61,6 +61,7 @@ export { default as TextEllipsis } from './components/TextEllipsis';
 export { default as CopyButton } from './components/CopyButton';
 export { default as Drawer } from './components/Drawer';
 export { default as BottomSheet } from './components/BottomSheet';
+export { default as AnchoredOverlay } from './components/AnchoredOverlay';
 /**
  * Helpers / Utils
  */

package/lib/index.js

@@ -9,7 +9,8 @@ var nextId = require('react-id-generator');
 var keyname = require('keyname');
 var reactDom = require('react-dom');
 var FocusTrap = require('focus-trap-react');
-var reactPopper = require('react-popper');
+var dom = require('@floating-ui/dom');
+var reactDom$1 = require('@floating-ui/react-dom');
 var SyntaxHighlighter = require('react-syntax-highlighter/dist/cjs/light');
 var js = require('react-syntax-highlighter/dist/cjs/languages/hljs/javascript');
 var css = require('react-syntax-highlighter/dist/cjs/languages/hljs/css');
@@ -1282,7 +1283,7 @@ var SideBar = /** @class */ (function (_super) {
 }(React.Component));
 
 var SideBarItem = function (_a) {
-    var children = _a.children, autoClickLink = _a.autoClickLink, other = tslib.__rest(_a, ["children", "autoClickLink"]);
+    var children = _a.children, _b = _a.autoClickLink, autoClickLink = _b === void 0 ? true : _b, other = tslib.__rest(_a, ["children", "autoClickLink"]);
     var onClick = function (e) {
         if (!autoClickLink) {
             return;
@@ -1294,9 +1295,6 @@ var SideBarItem = function (_a) {
     /* eslint-enable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */
 };
 SideBarItem.displayName = 'SideBarItem';
-SideBarItem.defaultProps = {
-    autoClickLink: true
-};
 
 /**
  * Handles aria-hidden for dialogs.
@@ -1587,40 +1585,25 @@ var Button = React.forwardRef(function (_a, ref) {
 Button.displayName = 'Button';
 
 /**
- * Returns a unique set of id refs from the provided string
- * @param ids - string of id refs
- */
-function idRefs(ids) {
-    if (!ids || !ids.trim()) {
-        return new Set();
-    }
-    return new Set(ids.trim().split(/\s+/));
-}
-/**
- * Returns an updated id ref string with the provided id value added
- * @param ids - string of id refs
- * @param id - id to add
- */
-function addIdRef(ids, id) {
-    return tslib.__spreadArray([], tslib.__read(idRefs(ids).add(id)), false).join(' ');
-}
-/**
- * Returns an updated id ref string with the provided id value removed
- * @param ids - string of id refs
- * @param id - id to remove
- */
-function removeIdRef(_ids, id) {
-    var ids = idRefs(_ids);
-    ids.delete(id);
-    return tslib.__spreadArray([], tslib.__read(ids), false).join(' ');
-}
-/**
- * Returns if an id ref string contains the provided id value
- * @param ids - string of id refs
- * @param id - id to check if it exists in the provided idRef string
+ * When a component needs to track an internal ref on a component that has a
+ * forwarded ref, useSharedRef will return a MutableRefObject<T> that will
+ * correctly invoke the parent ref as well providing an internal ref.
+ *
+ * @example
+ * React.forwardRef(function Component({ children }, ref) {
+ *   const internalRef = useSharedRef<HTMLElement>(ref)
+ *   if (internalRef.current) {
+ *     // do something with the internal ref...
+ *   }
+ *   return (<div ref={internalRef}>...</div>)
+ * })
  */
-function hasIdRef(ids, id) {
-    return idRefs(ids).has(id);
+function useSharedRef(ref) {
+    var internalRef = React.useRef();
+    React.useEffect(function () {
+        setRef(ref, internalRef.current);
+    }, [ref]);
+    return internalRef;
 }
 
 var isEscapeKey = function (event) {
@@ -1663,6 +1646,99 @@ function useEscapeKey(options, dependencies) {
     ], tslib.__read(dependencies), false));
 }
 
+function getAutoAlignment(placement) {
+    switch (placement) {
+        case 'auto-start':
+            return 'start';
+        case 'auto-end':
+            return 'end';
+        default:
+            return null;
+    }
+}
+var AnchoredOverlay = React.forwardRef(function (_a, refProp) {
+    var as = _a.as, _b = _a.placement, initialPlacement = _b === void 0 ? 'auto' : _b, target = _a.target, children = _a.children, style = _a.style, _c = _a.open, open = _c === void 0 ? false : _c, offset = _a.offset, onOpenChange = _a.onOpenChange, onPlacementChange = _a.onPlacementChange, props = tslib.__rest(_a, ["as", "placement", "target", "children", "style", "open", "offset", "onOpenChange", "onPlacementChange"]);
+    var ref = useSharedRef(refProp);
+    var Component = as || 'div';
+    var _d = reactDom$1.useFloating({
+        open: open,
+        // default to initial placement on top when placement is auto
+        // @ts-expect-error auto placement is not a valid placement for floating-ui
+        placement: initialPlacement.startsWith('auto') ? 'top' : initialPlacement,
+        middleware: [
+            reactDom$1.offset(offset !== null && offset !== void 0 ? offset : 0),
+            initialPlacement.startsWith('auto')
+                ? reactDom$1.autoPlacement({
+                    alignment: getAutoAlignment(initialPlacement)
+                })
+                : reactDom$1.flip()
+        ].filter(Boolean),
+        elements: {
+            reference: resolveElement(target),
+            floating: ref.current
+        },
+        whileElementsMounted: dom.autoUpdate
+    }), floatingStyles = _d.floatingStyles, placement = _d.placement;
+    useEscapeKey({
+        active: open,
+        capture: true,
+        defaultPrevented: true,
+        callback: function (event) {
+            // when an anchored overlay is open, we want to prevent other potential "escape"
+            // keypress events, like the closing of modals from occurring
+            event.preventDefault();
+            // istanbul ignore else
+            if (typeof onOpenChange === 'function') {
+                onOpenChange(!open);
+            }
+        }
+    });
+    React.useEffect(function () {
+        if (typeof onPlacementChange === 'function') {
+            onPlacementChange(placement);
+        }
+    }, [placement]);
+    return (React__default["default"].createElement(Component, tslib.__assign({ ref: ref }, props, { style: tslib.__assign(tslib.__assign({}, floatingStyles), style) }), children));
+});
+AnchoredOverlay.displayName = 'AnchoredOverlay';
+
+/**
+ * Returns a unique set of id refs from the provided string
+ * @param ids - string of id refs
+ */
+function idRefs(ids) {
+    if (!ids || !ids.trim()) {
+        return new Set();
+    }
+    return new Set(ids.trim().split(/\s+/));
+}
+/**
+ * Returns an updated id ref string with the provided id value added
+ * @param ids - string of id refs
+ * @param id - id to add
+ */
+function addIdRef(ids, id) {
+    return tslib.__spreadArray([], tslib.__read(idRefs(ids).add(id)), false).join(' ');
+}
+/**
+ * Returns an updated id ref string with the provided id value removed
+ * @param ids - string of id refs
+ * @param id - id to remove
+ */
+function removeIdRef(_ids, id) {
+    var ids = idRefs(_ids);
+    ids.delete(id);
+    return tslib.__spreadArray([], tslib.__read(ids), false).join(' ');
+}
+/**
+ * Returns if an id ref string contains the provided id value
+ * @param ids - string of id refs
+ * @param id - id to check if it exists in the provided idRef string
+ */
+function hasIdRef(ids, id) {
+    return idRefs(ids).has(id);
+}
+
 var TIP_HIDE_DELAY = 100;
 // fires a custom "cauldron:tooltip:show" / "cauldron:tooltip:hide" event
 // to allow projects using cauldron to hook into when a tooltip is shown/hidden
@@ -1681,50 +1757,27 @@ function Tooltip(_a) {
     var _g = tslib.__read(propId ? [propId] : nextId.useId(1, 'tooltip'), 1), id = _g[0];
     var hideTimeoutRef = React.useRef(null);
     var _h = tslib.__read(React.useState(!!showProp || defaultShow), 2), showTooltip = _h[0], setShowTooltip = _h[1];
-    var _j = tslib.__read(React.useState(null), 2), targetElement = _j[0], setTargetElement = _j[1];
-    var _k = tslib.__read(React.useState(null), 2), tooltipElement = _k[0], setTooltipElement = _k[1];
-    var _l = tslib.__read(React.useState(null), 2), arrowElement = _l[0], setArrowElement = _l[1];
+    var _j = tslib.__read(React.useState(null), 2), tooltipElement = _j[0], setTooltipElement = _j[1];
+    var _k = tslib.__read(React.useState(initialPlacement), 2), placement = _k[0], setPlacement = _k[1];
     var hasAriaAssociation = association !== 'none';
-    var _m = reactPopper.usePopper(targetElement, tooltipElement, {
-        placement: initialPlacement,
-        modifiers: [
-            { name: 'preventOverflow', options: { padding: 8 } },
-            {
-                name: 'flip',
-                options: { fallbackPlacements: ['left', 'right', 'top', 'bottom'] }
-            },
-            { name: 'offset', options: { offset: [0, 8] } },
-            { name: 'arrow', options: { padding: 5, element: arrowElement } }
-        ]
-    }), styles = _m.styles, attributes = _m.attributes, update = _m.update;
     // Show the tooltip
     var show = React.useCallback(function () { return tslib.__awaiter(_this, void 0, void 0, function () {
+        var targetElement;
         return tslib.__generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    // Clear the hide timeout if there was one pending
-                    if (hideTimeoutRef.current) {
-                        clearTimeout(hideTimeoutRef.current);
-                        hideTimeoutRef.current = null;
-                    }
-                    if (!update) return [3 /*break*/, 2];
-                    return [4 /*yield*/, update()];
-                case 1:
-                    _a.sent();
-                    _a.label = 2;
-                case 2:
-                    setShowTooltip(true);
-                    fireCustomEvent(true, targetElement);
-                    return [2 /*return*/];
+            targetElement = resolveElement(target);
+            // Clear the hide timeout if there was one pending
+            if (hideTimeoutRef.current) {
+                clearTimeout(hideTimeoutRef.current);
+                hideTimeoutRef.current = null;
             }
+            setShowTooltip(true);
+            fireCustomEvent(true, targetElement);
+            return [2 /*return*/];
         });
-    }); }, [
-        targetElement,
-        // update starts off as null
-        update
-    ]);
+    }); }, [target]);
     // Hide the tooltip
     var hide = React.useCallback(function () {
+        var targetElement = resolveElement(target);
         if (!hideTimeoutRef.current) {
             hideTimeoutRef.current = setTimeout(function () {
                 hideTimeoutRef.current = null;
@@ -1735,32 +1788,15 @@ function Tooltip(_a) {
         return function () {
             clearTimeout(hideTimeoutRef.current);
         };
-    }, [targetElement]);
-    // Keep targetElement in sync with target prop
-    React.useEffect(function () {
-        var targetElement = target && 'current' in target ? target.current : target;
-        setTargetElement(targetElement);
     }, [target]);
     React.useEffect(function () {
         if (typeof showProp === 'boolean') {
             setShowTooltip(showProp);
         }
     }, [showProp]);
-    // Get popper placement
-    var placement = (attributes.popper &&
-        attributes.popper['data-popper-placement']) ||
-        initialPlacement;
-    // Only listen to key ups when the tooltip is visible
-    useEscapeKey({
-        callback: function (event) {
-            event.preventDefault();
-            setShowTooltip(false);
-        },
-        capture: true,
-        active: showTooltip && typeof showProp !== 'boolean'
-    }, [setShowTooltip]);
     // Handle hover and focus events for the targetElement
     React.useEffect(function () {
+        var targetElement = resolveElement(target);
         if (typeof showProp !== 'boolean') {
             targetElement === null || targetElement === void 0 ? void 0 : targetElement.addEventListener('mouseenter', show);
             targetElement === null || targetElement === void 0 ? void 0 : targetElement.addEventListener('mouseleave', hide);
@@ -1773,7 +1809,7 @@ function Tooltip(_a) {
             targetElement === null || targetElement === void 0 ? void 0 : targetElement.removeEventListener('focusin', show);
             targetElement === null || targetElement === void 0 ? void 0 : targetElement.removeEventListener('focusout', hide);
         };
-    }, [targetElement, show, hide, showProp]);
+    }, [target, show, hide, showProp]);
     // Handle hover events for the tooltipElement
     React.useEffect(function () {
         if (typeof showProp !== 'boolean') {
@@ -1787,6 +1823,7 @@ function Tooltip(_a) {
     }, [tooltipElement, show, hide, showProp]);
     // Keep the target's id in sync
     React.useEffect(function () {
+        var targetElement = resolveElement(target);
         if (hasAriaAssociation) {
             var idRefs = targetElement === null || targetElement === void 0 ? void 0 : targetElement.getAttribute(association);
             if (!hasIdRef(idRefs, id)) {
@@ -1799,14 +1836,14 @@ function Tooltip(_a) {
                 targetElement.setAttribute(association, removeIdRef(idRefs, id));
             }
         };
-    }, [targetElement, id, association]);
+    }, [target, id, association]);
     return (React__default["default"].createElement(React__default["default"].Fragment, null, (showTooltip || hideElementOnHidden) && isBrowser()
-        ? reactDom.createPortal(React__default["default"].createElement("div", tslib.__assign({ id: id, className: classNames__default["default"]('Tooltip', "Tooltip--".concat(placement), className, {
+        ? reactDom.createPortal(React__default["default"].createElement(AnchoredOverlay, tslib.__assign({ id: id, target: target, placement: initialPlacement, onPlacementChange: setPlacement, open: showTooltip && typeof showProp !== 'boolean', onOpenChange: setShowTooltip, className: classNames__default["default"]('Tooltip', "Tooltip--".concat(placement), className, {
                 TooltipInfo: variant === 'info',
                 'Tooltip--hidden': !showTooltip && hideElementOnHidden,
                 'Tooltip--big': variant === 'big'
-            }), ref: setTooltipElement, role: "tooltip", style: styles.popper }, attributes.popper, props),
-            variant !== 'big' && (React__default["default"].createElement("div", { className: "TooltipArrow", ref: setArrowElement, style: styles.arrow })),
+            }), ref: setTooltipElement, role: "tooltip", offset: 8 }, props),
+            variant !== 'big' && React__default["default"].createElement("div", { className: "TooltipArrow" }),
             children), (portal && 'current' in portal ? portal.current : portal) ||
             (
             // eslint-disable-next-line ssr-friendly/no-dom-globals-in-react-fc
@@ -2522,28 +2559,6 @@ var SearchField = React.forwardRef(function (_a, ref) {
 });
 SearchField.displayName = 'SearchField';
 
-/**
- * When a component needs to track an internal ref on a component that has a
- * forwarded ref, useSharedRef will return a MutableRefObject<T> that will
- * correctly invoke the parent ref as well providing an internal ref.
- *
- * @example
- * React.forwardRef(function Component({ children }, ref) {
- *   const internalRef = useSharedRef<HTMLElement>(ref)
- *   if (internalRef.current) {
- *     // do something with the internal ref...
- *   }
- *   return (<div ref={internalRef}>...</div>)
- * })
- */
-function useSharedRef(ref) {
-    var internalRef = React.useRef();
-    React.useEffect(function () {
-        setRef(ref, internalRef.current);
-    }, [ref]);
-    return internalRef;
-}
-
 function copyTextToClipboard(text) {
     return tslib.__awaiter(this, void 0, void 0, function () {
         var copied, element, range, selection;
@@ -2783,32 +2798,138 @@ var TagButton = React__default["default"].forwardRef(function (_a, ref) {
 });
 TagButton.displayName = 'TagButton';
 
-var Table = function (_a) {
-    var children = _a.children, className = _a.className, variant = _a.variant, other = tslib.__rest(_a, ["children", "className", "variant"]);
-    return (React__default["default"].createElement("table", tslib.__assign({ className: classNames__default["default"]('Table', variant === 'border' && 'Table--border', className) }, other), children));
-};
+var TableContext = React.createContext({
+    layout: 'table',
+    columns: []
+});
+function TableProvider(_a) {
+    var children = _a.children, layout = _a.layout, columns = _a.columns;
+    var Provider = TableContext.Provider;
+    var contextValue = React.useMemo(function () { return ({
+        layout: layout,
+        columns: columns
+    }); }, [layout, columns]);
+    return React__default["default"].createElement(Provider, { value: contextValue }, children);
+}
+function useTable() {
+    return React.useContext(TableContext);
+}
+
+var Table = React__default["default"].forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, variant = _a.variant, layout = _a.layout, _b = _a.columns, columnsProp = _b === void 0 ? [] : _b, style = _a.style, other = tslib.__rest(_a, ["children", "className", "variant", "layout", "columns", "style"]);
+    var isGridLayout = layout === 'grid';
+    var columns = React.useMemo(function () {
+        if (typeof columnsProp === 'number') {
+            return columnsProp > 0
+                ? Array(columnsProp).fill({ align: 'start' })
+                : [{ align: 'start' }];
+        }
+        return columnsProp;
+    }, [columnsProp]);
+    var styleTemplateColumns = React.useMemo(function () {
+        if (layout !== 'grid') {
+            return;
+        }
+        if (!columns) {
+            return 'auto';
+        }
+        return columns
+            .map(function (_a) {
+            var width = _a.width;
+            return width || 'auto';
+        })
+            .join(' ');
+    }, [layout, columns]);
+    var tableGridStyles = isGridLayout
+        ? {
+            '--table-grid-template-columns': styleTemplateColumns
+        }
+        : {};
+    return (React__default["default"].createElement("table", tslib.__assign({ ref: ref, style: tslib.__assign(tslib.__assign({}, tableGridStyles), style), className: classNames__default["default"]('Table', className, {
+            'Table--border': variant === 'border',
+            TableGrid: isGridLayout
+        }) }, other),
+        React__default["default"].createElement(TableProvider, { layout: isGridLayout ? 'grid' : 'table', columns: columns }, children)));
+});
 Table.displayName = 'Table';
 
-var TableBody = function (_a) {
+var TableBody = React.forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, other = tslib.__rest(_a, ["children", "className"]);
-    return (React__default["default"].createElement("tbody", tslib.__assign({ className: classNames__default["default"]('TableBody', className) }, other), children));
-};
+    return (React__default["default"].createElement("tbody", tslib.__assign({ ref: ref, className: classNames__default["default"]('TableBody', className) }, other), children));
+});
 TableBody.displayName = 'TableBody';
 
-var TableCell = function (_a) {
-    var children = _a.children, className = _a.className, other = tslib.__rest(_a, ["children", "className"]);
-    return (React__default["default"].createElement("td", tslib.__assign({ className: classNames__default["default"]('TableCell', className) }, other), children));
-};
+function useTableGridStyles(_a) {
+    var elementRef = _a.elementRef, align = _a.align, layout = _a.layout, columns = _a.columns;
+    var isGridLayout = layout === 'grid';
+    var _b = tslib.__read(React.useState(align || 'start'), 2), columnAlignment = _b[0], setColumnAlignment = _b[1];
+    var _c = tslib.__read(React.useState(1), 2), gridColumnSpan = _c[0], setGridColumnSpan = _c[1];
+    var _d = tslib.__read(React.useState(1), 2), gridRowSpan = _d[0], setGridRowSpan = _d[1];
+    React.useEffect(function () {
+        var _a;
+        if (!isGridLayout) {
+            return;
+        }
+        var element = elementRef.current;
+        var column = typeof columns !== 'number' && columns[(_a = element === null || element === void 0 ? void 0 : element.cellIndex) !== null && _a !== void 0 ? _a : -1];
+        if (!column) {
+            setColumnAlignment(align || 'start');
+        }
+        else {
+            setColumnAlignment(column.align);
+        }
+        if (element === null || element === void 0 ? void 0 : element.colSpan) {
+            setGridColumnSpan(element.colSpan);
+        }
+        else {
+            setGridColumnSpan(1);
+        }
+        if (element === null || element === void 0 ? void 0 : element.rowSpan) {
+            setGridRowSpan(element.rowSpan);
+        }
+        else {
+            setGridRowSpan(1);
+        }
+    }, [isGridLayout, columns, align]);
+    return isGridLayout
+        ? {
+            textAlign: columnAlignment,
+            gridColumn: gridColumnSpan > 1 ? "span ".concat(gridColumnSpan) : undefined,
+            gridRow: gridRowSpan > 1 ? "span ".concat(gridRowSpan) : undefined
+        }
+        : {};
+}
+
+var TableCell = React.forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, align = _a.align, style = _a.style, other = tslib.__rest(_a, ["children", "className", "align", "style"]);
+    var tableCellRef = useSharedRef(ref);
+    var _b = useTable(), layout = _b.layout, columns = _b.columns;
+    var tableGridStyles = useTableGridStyles({
+        elementRef: tableCellRef,
+        align: align,
+        columns: columns,
+        layout: layout
+    });
+    return (React__default["default"].createElement("td", tslib.__assign({ ref: tableCellRef, style: tslib.__assign(tslib.__assign({}, tableGridStyles), style), className: classNames__default["default"]('TableCell', className) }, other), children));
+});
 TableCell.displayName = 'TableCell';
 
-var TableHead = function (_a) {
+var TableHead = React.forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, other = tslib.__rest(_a, ["children", "className"]);
-    return (React__default["default"].createElement("thead", tslib.__assign({ className: classNames__default["default"]('TableHead', className) }, other), children));
-};
+    return (React__default["default"].createElement("thead", tslib.__assign({ ref: ref, className: classNames__default["default"]('TableHead', className) }, other), children));
+});
 TableHead.displayName = 'TableHead';
 
-var TableHeader = function (_a) {
-    var children = _a.children, sortDirection = _a.sortDirection, onSort = _a.onSort, className = _a.className, _b = _a.sortAscendingAnnouncement, sortAscendingAnnouncement = _b === void 0 ? 'sorted ascending' : _b, _c = _a.sortDescendingAnnouncement, sortDescendingAnnouncement = _c === void 0 ? 'sorted descending' : _c, other = tslib.__rest(_a, ["children", "sortDirection", "onSort", "className", "sortAscendingAnnouncement", "sortDescendingAnnouncement"]);
+var TableHeader = React.forwardRef(function (_a, ref) {
+    var children = _a.children, sortDirection = _a.sortDirection, onSort = _a.onSort, className = _a.className, _b = _a.sortAscendingAnnouncement, sortAscendingAnnouncement = _b === void 0 ? 'sorted ascending' : _b, _c = _a.sortDescendingAnnouncement, sortDescendingAnnouncement = _c === void 0 ? 'sorted descending' : _c, align = _a.align, style = _a.style, other = tslib.__rest(_a, ["children", "sortDirection", "onSort", "className", "sortAscendingAnnouncement", "sortDescendingAnnouncement", "align", "style"]);
+    var tableHeaderRef = useSharedRef(ref);
+    var _d = useTable(), layout = _d.layout, columns = _d.columns;
+    var tableGridStyles = useTableGridStyles({
+        elementRef: tableHeaderRef,
+        align: align,
+        columns: columns,
+        layout: layout
+    });
     // When the sort direction changes, we want to announce the change in a live region
     // because changes to the sort value is not widely supported yet
     // see: https://a11ysupport.io/tech/aria/aria-sort_attribute
@@ -2817,15 +2938,15 @@ var TableHeader = function (_a) {
         : sortDirection === 'descending'
             ? sortDescendingAnnouncement
             : '';
-    return (React__default["default"].createElement("th", tslib.__assign({ "aria-sort": sortDirection, className: classNames__default["default"]('TableHeader', className, {
+    return (React__default["default"].createElement("th", tslib.__assign({ ref: tableHeaderRef, "aria-sort": sortDirection, className: classNames__default["default"]('TableHeader', className, {
             'TableHeader--sort-ascending': sortDirection === 'ascending',
             'TableHeader--sort-descending': sortDirection === 'descending'
-        }) }, other), !!onSort && !!sortDirection ? (React__default["default"].createElement("button", { onClick: onSort, className: "TableHeader__sort-button", type: "button" },
+        }), style: tslib.__assign(tslib.__assign({}, tableGridStyles), style) }, other), !!onSort && !!sortDirection ? (React__default["default"].createElement("button", { onClick: onSort, className: "TableHeader__sort-button", type: "button" },
         children,
         React__default["default"].createElement("span", { "aria-hidden": "true" }, sortDirection === 'none' ? (React__default["default"].createElement(Icon, { type: "sort-triangle" })) : sortDirection === 'ascending' ? (React__default["default"].createElement(Icon, { type: "table-sort-ascending" })) : (React__default["default"].createElement(Icon, { type: "table-sort-descending" }))),
         React__default["default"].createElement(Offscreen, null,
             React__default["default"].createElement("span", { role: "status", "aria-live": "polite" }, announcement)))) : (children)));
-};
+});
 TableHeader.displayName = 'TableHeader';
 
 var TableRow = function (_a) {
@@ -2834,10 +2955,10 @@ var TableRow = function (_a) {
 };
 TableRow.displayName = 'TableRow';
 
-var TableFooter = function (_a) {
+var TableFooter = React.forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, other = tslib.__rest(_a, ["children", "className"]);
-    return (React__default["default"].createElement("tfoot", tslib.__assign({ className: classNames__default["default"]('TableFooter', className) }, other), children));
-};
+    return (React__default["default"].createElement("tfoot", tslib.__assign({ ref: ref, className: classNames__default["default"]('TableFooter', className) }, other), children));
+});
 TableFooter.displayName = 'TableFooter';
 
 var Tab = React__default["default"].forwardRef(function (_a, ref) {
@@ -3341,19 +3462,21 @@ var ListboxContext = React.createContext({
     options: [],
     active: null,
     selected: null,
+    multiselect: false,
     setOptions: function () { return null; },
     onSelect: function () { return null; }
 });
 function ListboxProvider(_a) {
-    var options = _a.options, active = _a.active, selected = _a.selected, setOptions = _a.setOptions, onSelect = _a.onSelect, children = _a.children;
+    var options = _a.options, active = _a.active, selected = _a.selected, multiselect = _a.multiselect, setOptions = _a.setOptions, onSelect = _a.onSelect, children = _a.children;
     var Provider = ListboxContext.Provider;
     var value = React.useMemo(function () { return ({
         options: options,
         active: active,
         selected: selected,
+        multiselect: multiselect,
         setOptions: setOptions,
         onSelect: onSelect
-    }); }, [options, active, selected, setOptions]);
+    }); }, [options, active, selected, multiselect, setOptions]);
     return React__default["default"].createElement(Provider, { value: value }, children);
 }
 function useListboxContext() {
@@ -3375,40 +3498,78 @@ var optionMatchesValue = function (option, value) {
         option.value === value;
 };
 var Listbox = React.forwardRef(function (_a, ref) {
-    var _b = _a.as, Component = _b === void 0 ? 'ul' : _b, children = _a.children, defaultValue = _a.defaultValue, value = _a.value, _c = _a.navigation, navigation = _c === void 0 ? 'bound' : _c, onKeyDown = _a.onKeyDown, onFocus = _a.onFocus, onSelectionChange = _a.onSelectionChange, onActiveChange = _a.onActiveChange, props = tslib.__rest(_a, ["as", "children", "defaultValue", "value", "navigation", "onKeyDown", "onFocus", "onSelectionChange", "onActiveChange"]);
-    var _d = tslib.__read(React.useState([]), 2), options = _d[0], setOptions = _d[1];
-    var _e = tslib.__read(React.useState(null), 2), activeOption = _e[0], setActiveOption = _e[1];
-    var _f = tslib.__read(React.useState(null), 2), selectedOption = _f[0], setSelectedOption = _f[1];
+    var _b = _a.as, Component = _b === void 0 ? 'ul' : _b, children = _a.children, defaultValue = _a.defaultValue, value = _a.value, _c = _a.navigation, navigation = _c === void 0 ? 'bound' : _c, _d = _a.multiselect, multiselect = _d === void 0 ? false : _d, onKeyDown = _a.onKeyDown, onFocus = _a.onFocus, onSelectionChange = _a.onSelectionChange, onActiveChange = _a.onActiveChange, props = tslib.__rest(_a, ["as", "children", "defaultValue", "value", "navigation", "multiselect", "onKeyDown", "onFocus", "onSelectionChange", "onActiveChange"]);
+    var _e = tslib.__read(React.useState([]), 2), options = _e[0], setOptions = _e[1];
+    var _f = tslib.__read(React.useState(null), 2), activeOption = _f[0], setActiveOption = _f[1];
+    var _g = tslib.__read(React.useState([]), 2), selectedOptions = _g[0], setSelectedOptions = _g[1];
     var listboxRef = useSharedRef(ref);
     var isControlled = typeof value !== 'undefined';
     React.useLayoutEffect(function () {
-        if (!isControlled && selectedOption) {
+        if (!isControlled && selectedOptions.length > 0) {
             return;
         }
         var listboxValue = isControlled ? value : defaultValue;
-        var matchingOption = options.find(function (option) {
-            return optionMatchesValue(option, listboxValue);
-        });
-        setSelectedOption(matchingOption || null);
-        setActiveOption(matchingOption || null);
-    }, [isControlled, options, value]);
+        if (!listboxValue) {
+            return;
+        }
+        if (multiselect) {
+            var matchingOptions = options.filter(function (option) {
+                return listboxValue.find(function (value) {
+                    return optionMatchesValue(option, value);
+                });
+            });
+            setSelectedOptions(matchingOptions);
+            setActiveOption(matchingOptions[0] || null);
+        }
+        else {
+            var matchingOption = options.find(function (option) {
+                return optionMatchesValue(option, listboxValue);
+            });
+            setSelectedOptions(matchingOption ? [matchingOption] : []);
+            setActiveOption(matchingOption || null);
+        }
+    }, [isControlled, options, value, defaultValue]);
     React.useEffect(function () {
         if (activeOption) {
             onActiveChange === null || onActiveChange === void 0 ? void 0 : onActiveChange(activeOption);
         }
     }, [activeOption]);
     var handleSelect = React.useCallback(function (option) {
+        var _a;
         setActiveOption(option);
+        var optionIsSelected = selectedOptions.some(function (selected) { return selected.element === option.element; });
+        var previousValues = selectedOptions.map(function (selected) { return selected.value; });
         // istanbul ignore else
         if (!isControlled) {
-            setSelectedOption(option);
+            if (!multiselect) {
+                setSelectedOptions([option]);
+            }
+            else {
+                setSelectedOptions(optionIsSelected
+                    ? tslib.__spreadArray([], tslib.__read(selectedOptions.filter(function (selected) { return selected.element !== option.element; })), false) : tslib.__spreadArray(tslib.__spreadArray([], tslib.__read(selectedOptions), false), [option], false));
+            }
         }
-        onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange({
-            target: option.element,
-            value: option.value,
-            previousValue: selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value
-        });
-    }, [isControlled, selectedOption]);
+        if (multiselect) {
+            onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange({
+                target: option.element,
+                value: optionIsSelected
+                    ? selectedOptions
+                        .filter(function (selectedOption) {
+                        return selectedOption.element !== option.element;
+                    })
+                        .map(function (selectedOption) { return selectedOption.value; })
+                    : tslib.__spreadArray(tslib.__spreadArray([], tslib.__read(previousValues), false), [option.value], false),
+                previousValue: previousValues
+            });
+        }
+        else {
+            onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange({
+                target: option.element,
+                value: option.value,
+                previousValue: (_a = selectedOptions[0]) === null || _a === void 0 ? void 0 : _a.value
+            });
+        }
+    }, [isControlled, selectedOptions, multiselect, onSelectionChange]);
     var handleKeyDown = React.useCallback(function (event) {
         onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
         if (!keys.includes(event.key)) {
@@ -3458,9 +3619,9 @@ var Listbox = React.forwardRef(function (_a, ref) {
                 activeOption && handleSelect(activeOption);
                 break;
         }
-    }, [options, activeOption, navigation]);
+    }, [options, activeOption, navigation, handleSelect]);
     var handleFocus = React.useCallback(function (event) {
-        if (!activeOption && !selectedOption) {
+        if (!activeOption) {
             var firstOption = options.find(function (option) { return !isDisabledOption(option); });
             // istanbul ignore else
             if (firstOption) {
@@ -3468,13 +3629,14 @@ var Listbox = React.forwardRef(function (_a, ref) {
             }
             // istanbul ignore else
         }
-        else if (event.target === listboxRef.current) {
-            setActiveOption(selectedOption);
+        else if (selectedOptions.length &&
+            event.target === listboxRef.current) {
+            setActiveOption(selectedOptions[selectedOptions.length - 1]);
         }
         onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
-    }, [options, activeOption, selectedOption]);
-    return (React__default["default"].createElement(Component, tslib.__assign({ role: "listbox", ref: listboxRef, tabIndex: "0", onKeyDown: handleKeyDown, onFocus: handleFocus, "aria-activedescendant": activeOption ? getOptionId(activeOption) : undefined }, props),
-        React__default["default"].createElement(ListboxProvider, { options: options, active: activeOption, selected: selectedOption, setOptions: setOptions, onSelect: handleSelect }, children)));
+    }, [options, activeOption, selectedOptions]);
+    return (React__default["default"].createElement(Component, tslib.__assign({ role: "listbox", ref: listboxRef, tabIndex: "0", onKeyDown: handleKeyDown, onFocus: handleFocus, "aria-multiselectable": multiselect ? true : undefined, "aria-activedescendant": activeOption ? getOptionId(activeOption) : undefined }, props),
+        React__default["default"].createElement(ListboxProvider, { options: options, active: activeOption, multiselect: multiselect, selected: selectedOptions, setOptions: setOptions, onSelect: handleSelect }, children)));
 });
 Listbox.displayName = 'Listbox';
 
@@ -3484,12 +3646,15 @@ function isElementPreceding(a, b) {
 var ListboxOption = React.forwardRef(function (_a, ref) {
     var _b;
     var _c;
-    var propId = _a.id, className = _a.className, _d = _a.as, Component = _d === void 0 ? 'li' : _d, children = _a.children, value = _a.value, disabled = _a.disabled, _e = _a.activeClass, activeClass = _e === void 0 ? 'ListboxOption--active' : _e, onClick = _a.onClick, props = tslib.__rest(_a, ["id", "className", "as", "children", "value", "disabled", "activeClass", "onClick"]);
+    var propId = _a.id, className = _a.className, _d = _a.as, Component = _d === void 0 ? 'li' : _d, children = _a.children, value = _a.value, disabled = _a.disabled, selectedProp = _a.selected, _e = _a.activeClass, activeClass = _e === void 0 ? 'ListboxOption--active' : _e, onClick = _a.onClick, props = tslib.__rest(_a, ["id", "className", "as", "children", "value", "disabled", "selected", "activeClass", "onClick"]);
     var _f = useListboxContext(), active = _f.active, selected = _f.selected, setOptions = _f.setOptions, onSelect = _f.onSelect;
     var listboxOptionRef = useSharedRef(ref);
     var _g = tslib.__read(propId ? [propId] : nextId.useId(1, 'listbox-option'), 1), id = _g[0];
-    var isActive = active !== null && active.element === listboxOptionRef.current;
-    var isSelected = selected !== null && selected.element === listboxOptionRef.current;
+    var isActive = (active === null || active === void 0 ? void 0 : active.element) === listboxOptionRef.current;
+    var isSelected = typeof selectedProp === 'boolean'
+        ? selectedProp
+        : selected !== null &&
+            !!selected.find(function (option) { return option.element === listboxOptionRef.current; });
     var optionValue = typeof value !== 'undefined'
         ? value
         : (_c = listboxOptionRef.current) === null || _c === void 0 ? void 0 : _c.innerText;
@@ -3539,7 +3704,7 @@ var ListboxOption = React.forwardRef(function (_a, ref) {
         }
         onSelect({ element: listboxOptionRef.current, value: optionValue });
         onClick === null || onClick === void 0 ? void 0 : onClick(event);
-    }, [optionValue]);
+    }, [optionValue, onSelect, onClick, disabled]);
     return (React__default["default"].createElement(Component, tslib.__assign({ id: id, className: classNames__default["default"](className, (_b = {},
             _b[activeClass] = isActive,
             _b)), role: "option", ref: listboxOptionRef, "aria-disabled": typeof disabled === 'boolean' ? disabled : undefined, "aria-selected": isSelected, onClick: handleClick }, props), children));
@@ -3661,17 +3826,20 @@ var ComboboxMatch = function (_a) {
         React__default["default"].createElement("span", null, matchAfter)));
 };
 var ComboboxOption = React.forwardRef(function (_a, ref) {
+    var _b;
     var className = _a.className, children = _a.children, disabled = _a.disabled, propId = _a.id, description = _a.description, propValue = _a.value, formValue = _a.formValue, props = tslib.__rest(_a, ["className", "children", "disabled", "id", "description", "value", "formValue"]);
-    var _b = tslib.__read(propId ? [propId] : nextId.useId(1, 'combobox-option'), 1), id = _b[0];
-    var _c = useListboxContext(), selected = _c.selected, active = _c.active;
-    var _d = useComboboxContext(), selectedValue = _d.selectedValue, matches = _d.matches, setMatchingOptions = _d.setMatchingOptions, setFormValue = _d.setFormValue;
+    var _c = tslib.__read(propId ? [propId] : nextId.useId(1, 'combobox-option'), 1), id = _c[0];
+    var _d = useListboxContext(), selected = _d.selected, active = _d.active;
+    var _e = useComboboxContext(), selectedValue = _e.selectedValue, matches = _e.matches, setMatchingOptions = _e.setMatchingOptions, setFormValue = _e.setFormValue;
     var comboboxOptionRef = useSharedRef(ref);
     var intersectionRef = useIntersectionRef(comboboxOptionRef, {
         root: null,
         threshold: 1.0
     });
     var isActive = !!(active === null || active === void 0 ? void 0 : active.element) && active.element === comboboxOptionRef.current;
-    var isSelected = !!(selected === null || selected === void 0 ? void 0 : selected.element) && selected.element === comboboxOptionRef.current;
+    var isSelected = !!(selected &&
+        !!((_b = selected[0]) === null || _b === void 0 ? void 0 : _b.element) &&
+        selected[0].element === comboboxOptionRef.current);
     var isMatching = (typeof matches === 'boolean' && matches) ||
         (typeof matches === 'function' && matches(children));
     // istanbul ignore next
@@ -4007,19 +4175,7 @@ var Popover = React.forwardRef(function (_a, ref) {
     var _f = tslib.__read(React.useState(null), 2), targetElement = _f[0], setTargetElement = _f[1];
     var _g = tslib.__read(React.useState(null), 2), isolator = _g[0], setIsolator = _g[1];
     var popoverRef = useSharedRef(ref);
-    var _h = tslib.__read(React.useState(null), 2), arrowElement = _h[0], setArrowElement = _h[1];
-    var _j = reactPopper.usePopper(targetElement, popoverRef === null || popoverRef === void 0 ? void 0 : popoverRef.current, {
-        placement: initialPlacement,
-        modifiers: [
-            { name: 'preventOverflow', options: { padding: 8 } },
-            { name: 'flip' },
-            { name: 'offset', options: { offset: [0, 8] } },
-            { name: 'arrow', options: { padding: 5, element: arrowElement } }
-        ]
-    }), styles = _j.styles, attributes = _j.attributes;
-    var placement = (attributes.popper &&
-        attributes.popper['data-popper-placement']) ||
-        initialPlacement;
+    var _h = tslib.__read(React.useState(initialPlacement), 2), placement = _h[0], setPlacement = _h[1];
     var additionalProps = variant === 'prompt' && !props['aria-label']
         ? { 'aria-labelledby': "".concat(id, "-label") }
         : {};
@@ -4100,11 +4256,11 @@ var Popover = React.forwardRef(function (_a, ref) {
             fallbackFocus: '.Popover__borderLeft'
         } },
         React__default["default"].createElement(ClickOutsideListener$1, { onClickOutside: handleClickOutside },
-            React__default["default"].createElement("div", tslib.__assign({ id: id, className: classNames__default["default"]('Popover', "Popover--".concat(placement), className, {
+            React__default["default"].createElement(AnchoredOverlay, tslib.__assign({ id: id, className: classNames__default["default"]('Popover', "Popover--".concat(placement), className, {
                     'Popover--hidden': !show,
                     'Popover--prompt': variant === 'prompt'
-                }), ref: popoverRef, role: "dialog", style: styles.popper }, attributes.popper, additionalProps, props),
-                React__default["default"].createElement("div", { className: "Popover__popoverArrow", ref: setArrowElement, style: styles.arrow }),
+                }), ref: popoverRef, role: "dialog", target: target, open: show, placement: initialPlacement, onPlacementChange: setPlacement, offset: 8 }, additionalProps, props),
+                React__default["default"].createElement("div", { className: "Popover__popoverArrow" }),
                 React__default["default"].createElement("div", { className: "Popover__borderLeft" }),
                 variant === 'prompt' ? (React__default["default"].createElement(PromptPopoverContent, { applyButtonText: applyButtonText, onApply: onApply, closeButtonText: closeButtonText, infoText: infoText || '', onClose: handleClosePopover, infoTextId: "".concat(id, "-label") })) : (children)))), (portal && 'current' in portal ? portal.current : portal) ||
         // Dependent on "isBrowser" check above:
@@ -4373,6 +4529,7 @@ exports.AddressLine = AddressLine;
 exports.Alert = Alert;
 exports.AlertActions = AlertActions;
 exports.AlertContent = AlertContent;
+exports.AnchoredOverlay = AnchoredOverlay;
 exports.AriaIsolate = AriaIsolate;
 exports.Badge = Badge;
 exports.BadgeLabel = BadgeLabel;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-react",
-  "version": "6.11.0",
+  "version": "6.12.0-canary.67739754",
   "license": "MPL-2.0",
   "description": "Fully accessible react components library for Deque Cauldron",
   "homepage": "https://cauldron.dequelabs.com/",
@@ -23,13 +23,12 @@
     "test": "jest --maxWorkers=1 --coverage"
   },
   "dependencies": {
-    "@popperjs/core": "^2.5.4",
+    "@floating-ui/react-dom": "^2.1.2",
     "classnames": "^2.2.6",
     "focus-trap-react": "^10.2.3",
     "focusable": "^2.3.0",
     "keyname": "^0.1.0",
     "react-id-generator": "^3.0.1",
-    "react-popper": "^2.2.4",
     "react-syntax-highlighter": "^15.5.0",
     "tslib": "^2.4.0"
   },