@deque/cauldron-react 6.12.0 → 6.13.0

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/Dialog/index.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import AriaIsolate from '../../utils/aria-isolate';
 export interface DialogProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
     className?: string;
@@ -14,31 +13,8 @@ export interface DialogProps extends React.HTMLAttributes<HTMLDivElement> {
     closeButtonText?: string;
     portal?: React.RefObject<HTMLElement> | HTMLElement;
 }
-interface DialogState {
-    isolator?: AriaIsolate;
-}
-export default class Dialog extends React.Component<DialogProps, DialogState> {
-    static defaultProps: {
-        onClose: () => void;
-        forceAction: boolean;
-        closeButtonText: string;
-    };
-    private element;
-    private heading;
-    private headingId;
-    constructor(props: DialogProps);
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    componentDidUpdate(prevProps: DialogProps): void;
-    private attachIsolator;
-    render(): React.JSX.Element | null;
-    close(): void;
-    handleClickOutside(): void;
-    focusHeading(): void;
-    private handleEscape;
-    private attachEventListeners;
-    private removeEventListeners;
-}
+declare const Dialog: React.ForwardRefExoticComponent<DialogProps & React.RefAttributes<HTMLDivElement>>;
+export default Dialog;
 interface DialogAlignmentProps {
     align?: 'left' | 'center' | 'right';
 }

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

@@ -1,3 +1,4 @@
+import type { ElementOrRef } from '../../types';
 import React from 'react';
 export interface DrawerProps<T extends HTMLElement = HTMLElement> extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
@@ -5,8 +6,8 @@ export interface DrawerProps<T extends HTMLElement = HTMLElement> extends React.
     open?: boolean;
     behavior?: 'modal' | 'non-modal';
     focusOptions?: {
-        initialFocus?: T | React.RefObject<T> | React.MutableRefObject<T>;
-        returnFocus?: T | React.RefObject<T> | React.MutableRefObject<T>;
+        initialFocus?: ElementOrRef<T>;
+        returnFocus?: ElementOrRef<T>;
     };
     onClose?: () => void;
     portal?: React.RefObject<HTMLElement> | HTMLElement;

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

@@ -2,6 +2,7 @@ import React from 'react';
 export type Column = {
     align: ColumnAlignment;
     width?: ColumnWidth;
+    maxWidth?: ColumnWidth;
 };
 export type ColumnAlignment = 'start' | 'center' | 'end';
 export type ColumnWidth = 'auto' | 'min-content' | 'max-content' | `${number}` | `${number}%` | `${number}fr`;

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
  */