@elliemae/ds-pagination 3.80.0-next.50 → 3.80.0-next.53

package/dist/types/parts/DSPaginator/config/usePaginatorInteractions.d.ts

@@ -0,0 +1,37 @@
+import type { DSFastListT } from '@elliemae/ds-fast-list';
+import type React from 'react';
+import type { DSPaginatorT } from '../react-desc-prop-types.js';
+import type { useFocusTracker } from './useFocusTracker.js';
+type InteractionsConfigT = {
+    propsWithDefault: DSPaginatorT.InternalProps;
+    globalAttributes: {
+        onClick?: unknown;
+        onKeyDown?: unknown;
+    };
+    isOpen: boolean;
+    setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    amountOfPages: number;
+    focusTrackers: ReturnType<typeof useFocusTracker>;
+    triggerRef: React.MutableRefObject<HTMLButtonElement | null>;
+    floatingNodeRef: React.MutableRefObject<HTMLDivElement | null>;
+    listActionRef: React.MutableRefObject<DSFastListT.ActionRef>;
+};
+/**
+ * Every user intent on the trigger and on the list. The selection model is the one of a native select:
+ *  - moving through the options (arrows, Home/End, PageUp/PageDown, typing a page number) only moves the focus:
+ *    `onPageChange` is NOT invoked while navigating, because committing a page is a costly side effect for a paginator
+ *  - Enter, Space or a click on an option commits it, closes the list and returns the focus to the trigger
+ *  - Tab (and Shift+Tab) commits the focused option, closes the list and continues from the trigger
+ *  - Escape (see usePaginatorFloatingContext) and click outside close without committing
+ * Handlers only declare focus intents through the focus tracker (see useFocusTracker), with ONE documented exception:
+ * Tab (see handlePanelKeyDownCapture).
+ */
+export declare const usePaginatorInteractions: ({ propsWithDefault, globalAttributes, isOpen, setIsOpen, amountOfPages, focusTrackers, triggerRef, floatingNodeRef, listActionRef, }: InteractionsConfigT) => {
+    commitPage: (page: number) => void;
+    handleTriggerClick: (e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;
+    handleTriggerKeyDown: (e: React.KeyboardEvent<HTMLButtonElement>) => void;
+    handlePanelKeyDown: (e: React.KeyboardEvent<HTMLElement>) => void;
+    handlePanelKeyDownCapture: (e: React.KeyboardEvent<HTMLElement>) => void;
+    handleBlurOutOfWidget: (e: React.FocusEvent<HTMLElement>) => void;
+};
+export {};

package/dist/types/parts/DSPaginator/config/usePaginatorSizing.d.ts

@@ -0,0 +1,37 @@
+import type { DSFastListT } from '@elliemae/ds-fast-list';
+import type React from 'react';
+type SizingConfigT = {
+    pageCount: number | string;
+    pageIndex: number;
+    pageDetails: string[] | readonly string[];
+    listWidth?: number | string;
+    chevronRef: React.RefObject<HTMLElement>;
+    pageInfoRef: React.RefObject<HTMLDivElement>;
+    listActionRef: React.MutableRefObject<DSFastListT.ActionRef>;
+};
+/**
+ * Everything about sizes. The rows of the list are virtualized (out of flow), so nothing inside the list can make the panel
+ * grow: its width is an explicit policy, not something derived from its content.
+ *  - with `pageDetails` (or when the consumer passes `listWidth`) the list is `listWidth` wide (280px by default), never wider
+ *    than the viewport, and the details WRAP inside it. Nothing here renders or measures every detail: that would be O(n) hidden
+ *    components just to size the list to the widest detail, and it forced a one-line (truncating) design.
+ *  - without details the list is as wide as its page numbers need (the previous formula: chevron + 60px + the digits of the
+ *    page count in `ch`), plain CSS.
+ * The trigger does not reserve the width of the widest detail either: it follows the detail of the current page.
+ */
+export declare const usePaginatorSizing: ({ pageCount, pageIndex, pageDetails, listWidth, chevronRef, pageInfoRef, listActionRef, }: SizingConfigT) => {
+    hasDetails: boolean;
+    chevronWidth: number;
+    pageInfoWidth: number;
+    panelStyle: {
+        width: string;
+        minWidth?: undefined;
+    } | {
+        minWidth: string;
+        width?: undefined;
+    };
+    detailMaxWidth: string | undefined;
+    listMaxHeight: number;
+    handleListWrapperRef: (node: HTMLDivElement | null) => void;
+};
+export {};

package/dist/types/parts/DSPaginator/constants/index.d.ts

@@ -3,7 +3,42 @@ export { DSPaginationName };
 export declare const DSPaginatorName = "DSPaginator";
 export declare const PAGINATOR_SLOTS: {
     readonly PAGINATOR: "paginator";
+    readonly TRIGGER_WRAPPER: "paginator-trigger-wrapper";
+    readonly PAGE_INFO: "paginator-page-info";
+    readonly FLOATING_WRAPPER: "paginator-floating-wrapper";
+    readonly PANEL: "paginator-panel";
+    readonly HEADER: "paginator-header";
+    readonly LIST_WRAPPER: "paginator-list-wrapper";
+    readonly LIST: "paginator-list";
+    readonly OPTION: "paginator-option";
+    readonly OPTION_CHECKMARK: "paginator-option-checkmark";
+    readonly OPTION_PAGE: "paginator-option-page";
+    readonly OPTION_DETAIL: "paginator-option-detail";
 };
 export declare const PAGINATOR_DATA_TESTID: {
-    readonly PAGINATOR: "ds-pagination-paginator";
+    TRIGGER_WRAPPER: string;
+    PANEL: string;
+    HEADER: string;
+    LIST: string;
+    OPTION: string;
+    PAGINATOR: "ds-pagination-paginator";
+    PAGE_INFO: "ds-pagination-paginator-page-info";
+    FLOATING_WRAPPER: "ds-pagination-paginator-floating-wrapper";
+    LIST_WRAPPER: "ds-pagination-paginator-list-wrapper";
+    OPTION_CHECKMARK: "ds-pagination-paginator-option-checkmark";
+    OPTION_PAGE: "ds-pagination-paginator-option-page";
+    OPTION_DETAIL: "ds-pagination-paginator-option-detail";
 };
+export declare const PAGINATOR_REGION_FOCUSES: {
+    readonly RESET: "";
+    readonly TRIGGER: "trigger";
+    readonly OPTION_PREFIX: "option-";
+};
+export declare const PAGINATOR_OPTION_HEIGHT = 32;
+export declare const PAGINATOR_PANEL_MAX_HEIGHT = 300;
+export declare const PAGINATOR_HEADER_HEIGHT = 17;
+export declare const PAGINATOR_PANEL_PADDING_BOTTOM = 4;
+export declare const PAGINATOR_DEFAULT_LIST_WIDTH = 280;
+export declare const PAGINATOR_VIEWPORT_MARGIN = 16;
+export declare const PAGINATOR_PAGE_JUMP = 10;
+export declare const PAGINATOR_TYPEAHEAD_RESET_MS = 1000;

package/dist/types/parts/DSPaginator/parts/OptionRenderer.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+type OptionRendererPropsT = {
+    index: number;
+};
+/**
+ * One page of the list. Rendered by the virtual list, so only the options near the viewport are mounted:
+ * every position-dependent a11y fact (`aria-posinset`, `aria-setsize`) is explicit, and the focus lands on an option by
+ * its page identity from the ref callback (see useFocusTracker), not by its place in the DOM.
+ */
+export declare const OptionRenderer: ({ index }: OptionRendererPropsT) => React.JSX.Element;
+export {};

package/dist/types/parts/DSPaginator/parts/Panel.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const Panel: {
+    (): React.JSX.Element;
+    displayName: string;
+};

package/dist/types/parts/DSPaginator/parts/Trigger.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const Trigger: {
+    (): React.JSX.Element;
+    displayName: string;
+};

package/dist/types/parts/DSPaginator/react-desc-prop-types.d.ts

@@ -4,6 +4,17 @@ import { DSPaginationName, PAGINATOR_SLOTS } from './constants/index.js';
 export declare namespace DSPaginatorT {
     type SlotFunctionArguments = {
         dsPaginationPaginator: () => object;
+        dsPaginationPaginatorTriggerWrapper: () => object;
+        dsPaginationPaginatorPageInfo: () => object;
+        dsPaginationPaginatorFloatingWrapper: () => object;
+        dsPaginationPaginatorPanel: () => object;
+        dsPaginationPaginatorHeader: () => object;
+        dsPaginationPaginatorListWrapper: () => object;
+        dsPaginationPaginatorList: () => object;
+        dsPaginationPaginatorOption: () => object;
+        dsPaginationPaginatorOptionCheckmark: () => object;
+        dsPaginationPaginatorOptionPage: () => object;
+        dsPaginationPaginatorOptionDetail: () => object;
     };
     interface RequiredProps {
     }
@@ -16,6 +27,12 @@ export declare namespace DSPaginatorT {
         pageDetailsTitle: string;
     }
     interface OptionalProps extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSPaginationName, typeof PAGINATOR_SLOTS> {
+        /**
+         * Width of the open list (a number is px, a string is any CSS length) when the paginator has `pageDetails`: the details
+         * wrap inside it. The list is never wider than the viewport. Default: 280px. Without `pageDetails` the list is as wide
+         * as its page numbers need, unless this is passed.
+         */
+        listWidth?: number | string;
     }
     interface Props extends Partial<DefaultProps>, OptionalProps, Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof XstyledProps>, XstyledProps, RequiredProps {
     }

package/dist/types/parts/DSPaginator/styled.d.ts

@@ -1,5 +1,18 @@
-export declare const InvisibleDiv: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
-export declare const PaginationDropdownButtonPaginator: import("styled-components").StyledComponent<import("react").ComponentType<import("@elliemae/ds-button-v2").DSButtonV3T.Props>, import("@elliemae/ds-system").Theme, import("styled-components").ThemeProps<import("@xstyled/system").Theme> & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ComponentType<import("@elliemae/ds-button-v2").DSButtonV3T.Props>>, never>;
-export declare const StyledDropdown: import("styled-components").StyledComponent<import("react").ComponentType<import("@elliemae/ds-dropdownmenu-v2").DSDropdownMenuT.Props>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ComponentType<import("@elliemae/ds-dropdownmenu-v2").DSDropdownMenuT.Props>>, never>;
-export declare const StyledHeader: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>>, never>;
+export declare const StyledTrigger: import("styled-components").StyledComponent<import("react").ComponentType<import("@elliemae/ds-button-v2").DSButtonV3T.Props>, import("@elliemae/ds-system").Theme, import("styled-components").ThemeProps<import("@xstyled/system").Theme> & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ComponentType<import("@elliemae/ds-button-v2").DSButtonV3T.Props>>, never>;
+export declare const StyledTriggerWrapper: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
 export declare const StyledPageInfo: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
+export declare const StyledFloatingWrapper: import("styled-components").StyledComponent<import("react").ComponentType<import("@elliemae/ds-floating-context").DSFloatingWrapperT.Props>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ComponentType<import("@elliemae/ds-floating-context").DSFloatingWrapperT.Props>>, never>;
+export declare const StyledPanel: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
+export declare const StyledHeader: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>>, never>;
+export declare const StyledListWrapper: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
+export declare const StyledList: import("styled-components").StyledComponent<{
+    <T extends object>(props: import("@elliemae/ds-fast-list").DSFastListT.Props<T>): React.JSX.Element;
+    displayName: string;
+}, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<{
+    <T extends object>(props: import("@elliemae/ds-fast-list").DSFastListT.Props<T>): React.JSX.Element;
+    displayName: string;
+}>, never>;
+export declare const StyledOption: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
+export declare const StyledOptionCheckmark: import("styled-components").StyledComponent<"span", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"span">, never>;
+export declare const StyledOptionPage: import("styled-components").StyledComponent<"span", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"span">, never>;
+export declare const StyledOptionDetail: import("styled-components").StyledComponent<"span", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"span">, never>;

package/dist/types/parts/DSPerPageSelector/DSPerPageSelector.d.ts

@@ -1,5 +1,10 @@
 import React from 'react';
 import { type DSPerPageSelectorT } from './react-desc-prop-types.js';
+/**
+ * A trigger (aria-haspopup="dialog") that owns a non-modal dialog, positioned by the floating context, whose content is
+ * a listbox of page sizes (virtualized with DSFastList). It replaced a DSDropdownMenuV2 based implementation keeping its
+ * public contract; same widget as DSPaginator (accepted deviations: KNOWN_INTENTIONAL_DEVIATIONS.md, package root).
+ */
 declare const DSPerPageSelector: React.ComponentType<DSPerPageSelectorT.Props>;
 declare const DSPerPageSelectorWithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").DocumentedReactComponent<DSPerPageSelectorT.Props>;
 export { DSPerPageSelector, DSPerPageSelectorWithSchema };

package/dist/types/parts/DSPerPageSelector/DSPerPageSelectorCTX.d.ts

@@ -0,0 +1,5 @@
+import type { usePerPageSelector } from './config/usePerPageSelector.js';
+export interface DSPerPageSelectorCTX extends ReturnType<typeof usePerPageSelector> {
+}
+/** Single source of truth for the parts of DSPerPageSelector: props, owner props, floating context, focus tracker. */
+export declare const DSPerPageSelectorContext: import("react").Context<DSPerPageSelectorCTX>;

package/dist/types/parts/DSPerPageSelector/config/getInstanceIds.d.ts

@@ -0,0 +1,3 @@
+export declare const getHeaderId: (instanceUid: string) => string;
+export declare const getListId: (instanceUid: string) => string;
+export declare const getDialogId: (instanceUid: string) => string;

package/dist/types/parts/DSPerPageSelector/config/getOptions.d.ts

@@ -1,3 +1,3 @@
-import type { DSDropdownMenuT } from '@elliemae/ds-dropdownmenu-v2';
-export declare const generateOption: (value: number | DSDropdownMenuT.ItemSingleOptions) => DSDropdownMenuT.ItemSingleOptions;
-export declare const getOptions: (step: number, min: number, max: number) => DSDropdownMenuT.ItemSingleOptions[];
+import type { DSPerPageSelectorT } from '../react-desc-prop-types.js';
+export declare const generateOption: (value: number | DSPerPageSelectorT.PerPageOption) => DSPerPageSelectorT.PerPageOption;
+export declare const getOptions: (step: number, min: number, max: number) => DSPerPageSelectorT.PerPageOption[];

package/dist/types/parts/DSPerPageSelector/config/getSelectedOptionIndex.d.ts

@@ -0,0 +1,2 @@
+import type { DSPerPageSelectorT } from '../react-desc-prop-types.js';
+export declare const getSelectedOptionIndex: (options: DSPerPageSelectorT.PerPageOption[], pageSize: number) => number;

package/dist/types/parts/DSPerPageSelector/config/navigationKeys.d.ts

@@ -0,0 +1,3 @@
+type GetTargetIndex = (currentIndex: number, amountOfOptions: number) => number;
+export declare const NAVIGATION_KEYS: Record<string, GetTargetIndex>;
+export {};

package/dist/types/parts/DSPerPageSelector/config/useFocusTracker.d.ts

@@ -0,0 +1,22 @@
+import type { DSPerPageSelectorT } from '../react-desc-prop-types.js';
+type FocusTrackerConfigT = {
+    options: DSPerPageSelectorT.PerPageOption[];
+    pageSize: number;
+};
+export declare const getOptionRegionId: (dsId: string) => string;
+/**
+ * Focus tracker (see .github/memories/project_focus_tracker.md): the handlers declare WHAT must receive focus
+ * (a semantic identity), each part checks whether it IS that identity, and only the matching part focuses itself
+ * from its ref callback. Nothing in here calls `.focus()`.
+ */
+export declare const useFocusTracker: ({ options, pageSize }: FocusTrackerConfigT) => {
+    focusRegion: string;
+    focusedIndex: number;
+    clampIndex: (index: number) => number;
+    trackFocusRegionReset: () => void;
+    trackFocusTrigger: () => void;
+    trackFocusOption: (dsId: string) => void;
+    trackFocusOptionAtIndex: (index: number) => void;
+    trackFocusSelectedOption: () => void;
+};
+export {};

package/dist/types/parts/DSPerPageSelector/config/usePerPageSelector.d.ts

@@ -1,13 +1,29 @@
 import type { DSButtonV3T } from '@elliemae/ds-button-v2';
+import type { DSFastListT } from '@elliemae/ds-fast-list';
 import React from 'react';
 import { type DSPerPageSelectorT } from '../react-desc-prop-types.js';
 export declare const usePerPageSelector: (propsFromUser: DSPerPageSelectorT.Props) => {
+    commitOption: (option: DSPerPageSelectorT.PerPageOption) => void;
+    handleTriggerClick: (e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;
+    handleTriggerKeyDown: (e: React.KeyboardEvent<HTMLButtonElement>) => void;
+    handlePanelKeyDown: (e: React.KeyboardEvent<HTMLElement>) => void;
+    handlePanelKeyDownCapture: (e: React.KeyboardEvent<HTMLElement>) => void;
+    handleBlurOutOfWidget: (e: React.FocusEvent<HTMLElement>) => void;
+    headerId: string;
+    listId: string;
+    dialogId: string;
+    chevronWidth: number;
+    panelStyle: {
+        width: string;
+    };
+    listMaxHeight: number;
+    handleListWrapperRef: (node: HTMLDivElement | null) => void;
     propsWithDefault: DSPerPageSelectorT.InternalProps;
     xstyledProps: import("@elliemae/ds-props-helpers").XstyledProps;
-    globalAttributes: Partial<Pick<DSButtonV3T.Props, "width" | "form" | "list" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "id" | "lang" | "nonce" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | "part" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "async" | "autoComplete" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "cite" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "data" | "dateTime" | "default" | "defer" | "disabled" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "height" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "label" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "name" | "noValidate" | "open" | "optimum" | "pattern" | "placeholder" | "playsInline" | "poster" | "preload" | "readOnly" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "size" | "sizes" | "span" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "step" | "summary" | "target" | "type" | "useMap" | "value" | "wmode" | "wrap"> & Omit<{
-        width?: number | string | undefined | undefined;
-        form?: string | undefined | undefined;
+    globalAttributes: Partial<Pick<DSButtonV3T.Props, "list" | "label" | "form" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "id" | "lang" | "nonce" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | "part" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "async" | "autoComplete" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "cite" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "data" | "dateTime" | "default" | "defer" | "disabled" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "height" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "name" | "noValidate" | "open" | "optimum" | "pattern" | "placeholder" | "playsInline" | "poster" | "preload" | "readOnly" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "size" | "sizes" | "span" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "step" | "summary" | "target" | "type" | "useMap" | "value" | "width" | "wmode" | "wrap"> & Omit<{
         list?: string | undefined | undefined;
+        label?: string | undefined | undefined;
+        form?: string | undefined | undefined;
         "aria-activedescendant"?: string | undefined | undefined;
         "aria-atomic"?: (boolean | "true" | "false") | undefined;
         "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
@@ -317,7 +333,6 @@ export declare const usePerPageSelector: (propsFromUser: DSPerPageSelectorT.Prop
         keyParams?: string | undefined | undefined;
         keyType?: string | undefined | undefined;
         kind?: string | undefined | undefined;
-        label?: string | undefined | undefined;
         loop?: boolean | undefined | undefined;
         low?: number | undefined | undefined;
         manifest?: string | undefined | undefined;
@@ -367,6 +382,7 @@ export declare const usePerPageSelector: (propsFromUser: DSPerPageSelectorT.Prop
         type?: string | undefined | undefined;
         useMap?: string | undefined | undefined;
         value?: string | number | readonly string[] | undefined;
+        width?: number | string | undefined | undefined;
         wmode?: string | undefined | undefined;
         wrap?: string | undefined | undefined;
     }, keyof DSButtonV3T.Props>>;
@@ -374,11 +390,28 @@ export declare const usePerPageSelector: (propsFromUser: DSPerPageSelectorT.Prop
         getOwnerProps: () => DSPerPageSelectorT.InternalProps;
         getOwnerPropsArguments: () => {};
     };
-    actionRef: React.MutableRefObject<Record<string, (dsId: string) => void>>;
-    btnRef: React.RefObject<HTMLButtonElement>;
+    isOpen: boolean;
+    options: DSPerPageSelectorT.PerPageOption[];
+    focusTrackers: {
+        focusRegion: string;
+        focusedIndex: number;
+        clampIndex: (index: number) => number;
+        trackFocusRegionReset: () => void;
+        trackFocusTrigger: () => void;
+        trackFocusOption: (dsId: string) => void;
+        trackFocusOptionAtIndex: (index: number) => void;
+        trackFocusSelectedOption: () => void;
+    };
+    triggerRef: React.MutableRefObject<HTMLButtonElement | null>;
     chevronRef: React.RefObject<HTMLElement>;
-    chevronWidth: number;
-    isOpened: boolean;
-    options: import("@elliemae/ds-dropdownmenu-v2").DSDropdownMenuT.ItemSingleOptions[];
-    setIsOpened: React.Dispatch<React.SetStateAction<boolean>>;
+    listActionRef: React.MutableRefObject<DSFastListT.ActionRef>;
+    floatingStyles: React.CSSProperties;
+    floatingContext: {
+        withoutPortal: boolean;
+        withoutAnimation: boolean;
+        portalDOMContainer: HTMLElement | undefined;
+        animationDuration: number;
+    };
+    handleTriggerRef: (instance: HTMLButtonElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES];
+    floatingInnerRef: (instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES];
 };

package/dist/types/parts/DSPerPageSelector/config/usePerPageSelectorFloatingContext.d.ts

@@ -0,0 +1,31 @@
+import type React from 'react';
+type FloatingContextConfigT = {
+    isOpen: boolean;
+    setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    triggerRef: React.MutableRefObject<HTMLButtonElement | null>;
+    trackFocusRegionReset: () => void;
+    chevronWidth: number;
+};
+/**
+ * The single point that wires DSPerPageSelector to `useFloatingContext` (same shape as DSPaginator's one).
+ *
+ * The open state is owned by the component, so the floating context is "controlled" by it
+ * (`externallyControlledIsOpen`) and this hook only translates the closing intents of the floating context into it:
+ *  - scoped Escape: the floating context routes it to `onEscape` and, because `returnFocusToReference` is on, it also
+ *    returns the focus to the trigger. This is the ONLY close path where the floating context moves the focus.
+ *  - click outside (panel + trigger): closes, the focus stays where the user clicked.
+ * The other close paths (activation, Tab, trigger toggle) live in usePerPageSelectorInteractions.
+ */
+export declare const usePerPageSelectorFloatingContext: ({ isOpen, setIsOpen, triggerRef, trackFocusRegionReset, chevronWidth, }: FloatingContextConfigT) => {
+    floatingStyles: React.CSSProperties;
+    floatingContext: {
+        withoutPortal: boolean;
+        withoutAnimation: boolean;
+        portalDOMContainer: HTMLElement | undefined;
+        animationDuration: number;
+    };
+    handleTriggerRef: (instance: HTMLButtonElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES];
+    floatingInnerRef: (instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES];
+    floatingNodeRef: React.MutableRefObject<HTMLDivElement | null>;
+};
+export {};

package/dist/types/parts/DSPerPageSelector/config/usePerPageSelectorInteractions.d.ts

@@ -0,0 +1,38 @@
+import type { DSFastListT } from '@elliemae/ds-fast-list';
+import type React from 'react';
+import type { DSPerPageSelectorT } from '../react-desc-prop-types.js';
+import type { useFocusTracker } from './useFocusTracker.js';
+type InteractionsConfigT = {
+    propsWithDefault: DSPerPageSelectorT.InternalProps;
+    globalAttributes: {
+        onClick?: unknown;
+        onKeyDown?: unknown;
+    };
+    options: DSPerPageSelectorT.PerPageOption[];
+    isOpen: boolean;
+    setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    focusTrackers: ReturnType<typeof useFocusTracker>;
+    triggerRef: React.MutableRefObject<HTMLButtonElement | null>;
+    floatingNodeRef: React.MutableRefObject<HTMLDivElement | null>;
+    listActionRef: React.MutableRefObject<DSFastListT.ActionRef>;
+};
+/**
+ * Every user intent on the trigger and on the list. The selection model is the one of a native select (and the same one
+ * as DSPaginator):
+ *  - moving through the options (arrows, Home/End, PageUp/PageDown, typing the start of a label) only moves the focus:
+ *    `onPageSizeChange` is NOT invoked while navigating
+ *  - Enter, Space or a click on an option commits it, closes the list and returns the focus to the trigger
+ *  - Tab (and Shift+Tab) commits the focused option, closes the list and continues from the trigger
+ *  - Escape (see usePerPageSelectorFloatingContext) and click outside close without committing
+ * Handlers only declare focus intents through the focus tracker (see useFocusTracker), with ONE documented exception:
+ * Tab (see handlePanelKeyDownCapture).
+ */
+export declare const usePerPageSelectorInteractions: ({ propsWithDefault, globalAttributes, options, isOpen, setIsOpen, focusTrackers, triggerRef, floatingNodeRef, listActionRef, }: InteractionsConfigT) => {
+    commitOption: (option: DSPerPageSelectorT.PerPageOption) => void;
+    handleTriggerClick: (e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;
+    handleTriggerKeyDown: (e: React.KeyboardEvent<HTMLButtonElement>) => void;
+    handlePanelKeyDown: (e: React.KeyboardEvent<HTMLElement>) => void;
+    handlePanelKeyDownCapture: (e: React.KeyboardEvent<HTMLElement>) => void;
+    handleBlurOutOfWidget: (e: React.FocusEvent<HTMLElement>) => void;
+};
+export {};

package/dist/types/parts/DSPerPageSelector/config/usePerPageSelectorSizing.d.ts

@@ -0,0 +1,25 @@
+import type { DSFastListT } from '@elliemae/ds-fast-list';
+import type React from 'react';
+import type { DSPerPageSelectorT } from '../react-desc-prop-types.js';
+type SizingConfigT = {
+    pageSize: number;
+    options: DSPerPageSelectorT.PerPageOption[];
+    listWidth?: number | string;
+    chevronRef: React.RefObject<HTMLElement>;
+    listActionRef: React.MutableRefObject<DSFastListT.ActionRef>;
+};
+/**
+ * Everything about sizes. The rows of the list are virtualized (out of flow), so nothing inside the list can make the panel
+ * grow: its width is an explicit policy, not something derived from its content. The list is `listWidth` wide (100px by
+ * default), never wider than the viewport, and the labels WRAP inside it. Nothing here renders or measures every label: that
+ * would be O(n) hidden components just to size the list to the widest label, and it forced a one-line (truncating) design.
+ */
+export declare const usePerPageSelectorSizing: ({ pageSize, options, listWidth, chevronRef, listActionRef, }: SizingConfigT) => {
+    chevronWidth: number;
+    panelStyle: {
+        width: string;
+    };
+    listMaxHeight: number;
+    handleListWrapperRef: (node: HTMLDivElement | null) => void;
+};
+export {};

package/dist/types/parts/DSPerPageSelector/constants/index.d.ts

@@ -1,13 +1,40 @@
 import { DSPaginationName } from '../../../constants/index.js';
 export { DSPaginationName };
 export declare const DSPerPageSelectorName = "DSPerPageSelector";
-export declare const EXAMPLE_CONSTANTS: {
-    readonly HELLO: "WORLD";
-    readonly FOO: "BAR";
-};
 export declare const PER_PAGE_SELECTOR_SLOTS: {
     readonly PER_PAGE_SELECTOR: "per-page-selector";
+    readonly TRIGGER_WRAPPER: "per-page-selector-trigger-wrapper";
+    readonly FLOATING_WRAPPER: "per-page-selector-floating-wrapper";
+    readonly PANEL: "per-page-selector-panel";
+    readonly HEADER: "per-page-selector-header";
+    readonly LIST_WRAPPER: "per-page-selector-list-wrapper";
+    readonly LIST: "per-page-selector-list";
+    readonly OPTION: "per-page-selector-option";
+    readonly OPTION_CHECKMARK: "per-page-selector-option-checkmark";
+    readonly OPTION_LABEL: "per-page-selector-option-label";
 };
 export declare const PER_PAGE_SELECTOR_DATA_TESTID: {
-    readonly PER_PAGE_SELECTOR: "ds-pagination-per-page-selector";
+    TRIGGER_WRAPPER: string;
+    PANEL: string;
+    HEADER: string;
+    LIST: string;
+    OPTION: string;
+    PER_PAGE_SELECTOR: "ds-pagination-per-page-selector";
+    FLOATING_WRAPPER: "ds-pagination-per-page-selector-floating-wrapper";
+    LIST_WRAPPER: "ds-pagination-per-page-selector-list-wrapper";
+    OPTION_CHECKMARK: "ds-pagination-per-page-selector-option-checkmark";
+    OPTION_LABEL: "ds-pagination-per-page-selector-option-label";
+};
+export declare const PER_PAGE_SELECTOR_REGION_FOCUSES: {
+    readonly RESET: "";
+    readonly TRIGGER: "trigger";
+    readonly OPTION_PREFIX: "option-";
 };
+export declare const PER_PAGE_SELECTOR_OPTION_HEIGHT = 32;
+export declare const PER_PAGE_SELECTOR_PANEL_MAX_HEIGHT = 300;
+export declare const PER_PAGE_SELECTOR_HEADER_HEIGHT = 17;
+export declare const PER_PAGE_SELECTOR_PANEL_PADDING_BOTTOM = 4;
+export declare const PER_PAGE_SELECTOR_DEFAULT_LIST_WIDTH = 100;
+export declare const PER_PAGE_SELECTOR_VIEWPORT_MARGIN = 16;
+export declare const PER_PAGE_SELECTOR_PAGE_JUMP = 10;
+export declare const PER_PAGE_SELECTOR_TYPEAHEAD_RESET_MS = 1000;

package/dist/types/parts/DSPerPageSelector/parts/OptionRenderer.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+type OptionRendererPropsT = {
+    index: number;
+};
+/**
+ * One option of the list. Rendered by the virtual list, so only the options near the viewport are mounted:
+ * every position-dependent a11y fact (`aria-posinset`, `aria-setsize`) is explicit, and the focus lands on an option by
+ * its dsId identity from the ref callback (see useFocusTracker), not by its place in the DOM.
+ */
+export declare const OptionRenderer: ({ index }: OptionRendererPropsT) => React.JSX.Element;
+export {};

package/dist/types/parts/DSPerPageSelector/parts/Panel.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const Panel: {
+    (): React.JSX.Element;
+    displayName: string;
+};

package/dist/types/parts/DSPerPageSelector/parts/Trigger.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const Trigger: {
+    (): React.JSX.Element;
+    displayName: string;
+};

package/dist/types/parts/DSPerPageSelector/react-desc-prop-types.d.ts

@@ -1,11 +1,31 @@
-import type { DSDropdownMenuT } from '@elliemae/ds-dropdownmenu-v2';
 import type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';
 import { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';
 import { DSPaginationName, PER_PAGE_SELECTOR_SLOTS } from './constants/index.js';
 export declare namespace DSPerPageSelectorT {
     type SlotFunctionArguments = {
         dsPaginationPerPageSelector: () => object;
+        dsPaginationPerPageSelectorTriggerWrapper: () => object;
+        dsPaginationPerPageSelectorFloatingWrapper: () => object;
+        dsPaginationPerPageSelectorPanel: () => object;
+        dsPaginationPerPageSelectorHeader: () => object;
+        dsPaginationPerPageSelectorListWrapper: () => object;
+        dsPaginationPerPageSelectorList: () => object;
+        dsPaginationPerPageSelectorOption: () => object;
+        dsPaginationPerPageSelectorOptionCheckmark: () => object;
+        dsPaginationPerPageSelectorOptionLabel: () => object;
     };
+    /**
+     * One option of the list: what the examples use and what the list reads. It used to be typed as a `DSDropdownMenuV2`
+     * single item, which handed consumers a whole contract that was never meant for them nor shown in the examples (`render`,
+     * `disabled`, `onClick`, global attributes, xstyled props...). Some of it happened to work because the options were passed
+     * to the dropdown unchanged; none of it is supported anymore.
+     */
+    interface PerPageOption {
+        type?: 'single';
+        dsId: string;
+        label: string;
+        value: number;
+    }
     interface RequiredProps {
     }
     interface DefaultProps {
@@ -16,7 +36,12 @@ export declare namespace DSPerPageSelectorT {
         maxPerPage: number;
     }
     interface OptionalProps extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSPaginationName, typeof PER_PAGE_SELECTOR_SLOTS> {
-        perPageOptions?: (number | DSDropdownMenuT.ItemSingleOptions)[];
+        perPageOptions?: (number | PerPageOption)[];
+        /**
+         * Width of the open list (a number is px, a string is any CSS length). Labels wrap inside it; the list is never wider
+         * than the viewport. Default: 100px.
+         */
+        listWidth?: number | string;
     }
     interface Props extends Partial<DefaultProps>, OptionalProps, Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof XstyledProps>, XstyledProps, RequiredProps {
     }