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

package/dist/esm/parts/DSPerPageSelector/config/useFocusTracker.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/DSPerPageSelector/config/useFocusTracker.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useCallback, useMemo, useState } from 'react';\nimport { PER_PAGE_SELECTOR_REGION_FOCUSES } from '../constants/index.js';\nimport type { DSPerPageSelectorT } from '../react-desc-prop-types.js';\nimport { getSelectedOptionIndex } from './getSelectedOptionIndex.js';\n\ntype FocusTrackerConfigT = {\n  options: DSPerPageSelectorT.PerPageOption[];\n  pageSize: number;\n};\n\n// the identity of an option is its dsId: stable, never the position in the (virtualized) DOM\nexport const getOptionRegionId = (dsId: string) => `${PER_PAGE_SELECTOR_REGION_FOCUSES.OPTION_PREFIX}${dsId}`;\n\n/**\n * Focus tracker (see .github/memories/project_focus_tracker.md): the handlers declare WHAT must receive focus\n * (a semantic identity), each part checks whether it IS that identity, and only the matching part focuses itself\n * from its ref callback. Nothing in here calls `.focus()`.\n */\nexport const useFocusTracker = ({ options, pageSize }: FocusTrackerConfigT) => {\n  const [focusRegion, setFocusRegion] = useState<string>(PER_PAGE_SELECTOR_REGION_FOCUSES.RESET);\n\n  const focusedIndex = useMemo(\n    () => options.findIndex((option) => getOptionRegionId(option.dsId) === focusRegion),\n    [focusRegion, options],\n  );\n\n  const clampIndex = useCallback((index: number) => Math.min(Math.max(index, 0), options.length - 1), [options.length]);\n\n  const trackFocusRegionReset = useCallback(() => setFocusRegion(PER_PAGE_SELECTOR_REGION_FOCUSES.RESET), []);\n  const trackFocusTrigger = useCallback(() => setFocusRegion(PER_PAGE_SELECTOR_REGION_FOCUSES.TRIGGER), []);\n  const trackFocusOptionAtIndex = useCallback(\n    (index: number) => {\n      if (options.length > 0) setFocusRegion(getOptionRegionId(options[clampIndex(index)].dsId));\n    },\n    [clampIndex, options],\n  );\n  const trackFocusOption = useCallback((dsId: string) => setFocusRegion(getOptionRegionId(dsId)), []);\n  // on open the focus lands on the selected option, or on the first one when the page size is not one of the options\n  const trackFocusSelectedOption = useCallback(\n    () => trackFocusOptionAtIndex(Math.max(getSelectedOptionIndex(options, pageSize), 0)),\n    [options, pageSize, trackFocusOptionAtIndex],\n  );\n\n  return useMemo(\n    () => ({\n      focusRegion,\n      focusedIndex,\n      clampIndex,\n      trackFocusRegionReset,\n      trackFocusTrigger,\n      trackFocusOption,\n      trackFocusOptionAtIndex,\n      trackFocusSelectedOption,\n    }),\n    [\n      focusRegion,\n      focusedIndex,\n      clampIndex,\n      trackFocusRegionReset,\n      trackFocusTrigger,\n      trackFocusOption,\n      trackFocusOptionAtIndex,\n      trackFocusSelectedOption,\n    ],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,aAAa,SAAS,gBAAgB;AAC/C,SAAS,wCAAwC;AAEjD,SAAS,8BAA8B;AAQhC,MAAM,oBAAoB,CAAC,SAAiB,GAAG,iCAAiC,aAAa,GAAG,IAAI;AAOpG,MAAM,kBAAkB,CAAC,EAAE,SAAS,SAAS,MAA2B;AAC7E,QAAM,CAAC,aAAa,cAAc,IAAI,SAAiB,iCAAiC,KAAK;AAE7F,QAAM,eAAe;AAAA,IACnB,MAAM,QAAQ,UAAU,CAAC,WAAW,kBAAkB,OAAO,IAAI,MAAM,WAAW;AAAA,IAClF,CAAC,aAAa,OAAO;AAAA,EACvB;AAEA,QAAM,aAAa,YAAY,CAAC,UAAkB,KAAK,IAAI,KAAK,IAAI,OAAO,CAAC,GAAG,QAAQ,SAAS,CAAC,GAAG,CAAC,QAAQ,MAAM,CAAC;AAEpH,QAAM,wBAAwB,YAAY,MAAM,eAAe,iCAAiC,KAAK,GAAG,CAAC,CAAC;AAC1G,QAAM,oBAAoB,YAAY,MAAM,eAAe,iCAAiC,OAAO,GAAG,CAAC,CAAC;AACxG,QAAM,0BAA0B;AAAA,IAC9B,CAAC,UAAkB;AACjB,UAAI,QAAQ,SAAS,EAAG,gBAAe,kBAAkB,QAAQ,WAAW,KAAK,CAAC,EAAE,IAAI,CAAC;AAAA,IAC3F;AAAA,IACA,CAAC,YAAY,OAAO;AAAA,EACtB;AACA,QAAM,mBAAmB,YAAY,CAAC,SAAiB,eAAe,kBAAkB,IAAI,CAAC,GAAG,CAAC,CAAC;AAElG,QAAM,2BAA2B;AAAA,IAC/B,MAAM,wBAAwB,KAAK,IAAI,uBAAuB,SAAS,QAAQ,GAAG,CAAC,CAAC;AAAA,IACpF,CAAC,SAAS,UAAU,uBAAuB;AAAA,EAC7C;AAEA,SAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
+  "names": []
+}

package/dist/esm/parts/DSPerPageSelector/config/usePerPageSelector.js

@@ -5,48 +5,96 @@ import {
   useMemoMergePropsWithDefault,
   useOwnerProps
 } from "@elliemae/ds-props-helpers";
-import React2, { useEffect, useMemo, useRef, useState } from "react";
+import React2, { useMemo, useRef, useState } from "react";
+import { uid } from "uid";
 import { DSPerPageSelectorPropTypesSchema, defaultProps } from "../react-desc-prop-types.js";
-import { useValidateProps } from "./useValidateProps.js";
 import { generateOption, getOptions } from "./getOptions.js";
-import { useOnElementResize } from "../../shared/useOnElementOnResize.js";
+import { getDialogId, getHeaderId, getListId } from "./getInstanceIds.js";
+import { useFocusTracker } from "./useFocusTracker.js";
+import { usePerPageSelectorFloatingContext } from "./usePerPageSelectorFloatingContext.js";
+import { usePerPageSelectorInteractions } from "./usePerPageSelectorInteractions.js";
+import { usePerPageSelectorSizing } from "./usePerPageSelectorSizing.js";
+import { useValidateProps } from "./useValidateProps.js";
 const usePerPageSelector = (propsFromUser) => {
   const propsWithDefault = useMemoMergePropsWithDefault(propsFromUser, defaultProps);
   useValidateProps(propsWithDefault, DSPerPageSelectorPropTypesSchema);
   const xstyledProps = useGetXstyledProps(propsWithDefault);
   const globalAttributes = useGetGlobalAttributes(propsWithDefault);
   const ownerPropsConfig = useOwnerProps(propsWithDefault);
-  const { pageSize, perPageOptions, perPageStep, minPerPage, maxPerPage } = propsWithDefault;
-  const [isOpened, setIsOpened] = useState(false);
+  const { pageSize, perPageOptions, perPageStep, minPerPage, maxPerPage, listWidth } = propsWithDefault;
+  const instanceUid = useMemo(() => uid(5), []);
+  const [isOpen, setIsOpen] = useState(false);
   const options = useMemo(() => {
     if (perPageOptions) return perPageOptions.map(generateOption);
     return getOptions(perPageStep, minPerPage, maxPerPage);
   }, [maxPerPage, minPerPage, perPageOptions, perPageStep]);
-  const actionRef = useRef({});
-  const btnRef = useRef(null);
+  const triggerRef = useRef(null);
   const chevronRef = useRef(null);
-  const { width: chevronWidth } = useOnElementResize(chevronRef);
-  useEffect(() => {
-    if (isOpened) {
-      actionRef.current.setActiveDescendant(pageSize.toString());
-      actionRef.current.scrollOptionIntoView(pageSize.toString());
-    }
-  }, [isOpened]);
+  const listActionRef = useRef({});
+  const sizing = usePerPageSelectorSizing({ pageSize, options, listWidth, chevronRef, listActionRef });
+  const focusTrackers = useFocusTracker({ options, pageSize });
+  const { floatingStyles, floatingContext, handleTriggerRef, floatingInnerRef, floatingNodeRef } = usePerPageSelectorFloatingContext({
+    isOpen,
+    setIsOpen,
+    triggerRef,
+    trackFocusRegionReset: focusTrackers.trackFocusRegionReset,
+    chevronWidth: sizing.chevronWidth
+  });
+  const interactions = usePerPageSelectorInteractions({
+    propsWithDefault,
+    globalAttributes,
+    options,
+    isOpen,
+    setIsOpen,
+    focusTrackers,
+    triggerRef,
+    floatingNodeRef,
+    listActionRef
+  });
+  const ids = useMemo(
+    () => ({
+      headerId: getHeaderId(instanceUid),
+      listId: getListId(instanceUid),
+      dialogId: getDialogId(instanceUid)
+    }),
+    [instanceUid]
+  );
   return React2.useMemo(
     () => ({
       propsWithDefault,
       xstyledProps,
       globalAttributes,
       ownerPropsConfig,
-      actionRef,
-      btnRef,
-      chevronRef,
-      chevronWidth,
-      isOpened,
+      isOpen,
       options,
-      setIsOpened
+      focusTrackers,
+      triggerRef,
+      chevronRef,
+      listActionRef,
+      floatingStyles,
+      floatingContext,
+      handleTriggerRef,
+      floatingInnerRef,
+      ...sizing,
+      ...ids,
+      ...interactions
     }),
-    [propsWithDefault, xstyledProps, globalAttributes, ownerPropsConfig, isOpened, options, chevronRef, chevronWidth]
+    [
+      propsWithDefault,
+      xstyledProps,
+      globalAttributes,
+      ownerPropsConfig,
+      isOpen,
+      options,
+      focusTrackers,
+      floatingStyles,
+      floatingContext,
+      handleTriggerRef,
+      floatingInnerRef,
+      sizing,
+      ids,
+      interactions
+    ]
   );
 };
 export {

package/dist/esm/parts/DSPerPageSelector/config/usePerPageSelector.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/DSPerPageSelector/config/usePerPageSelector.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { DSButtonV3T } from '@elliemae/ds-button-v2';\nimport {\n  useGetGlobalAttributes,\n  useGetXstyledProps,\n  useMemoMergePropsWithDefault,\n  useOwnerProps,\n} from '@elliemae/ds-props-helpers';\nimport React, { useEffect, useMemo, useRef, useState } from 'react';\n\nimport { type DSPerPageSelectorT, DSPerPageSelectorPropTypesSchema, defaultProps } from '../react-desc-prop-types.js';\nimport { useValidateProps } from './useValidateProps.js';\nimport { generateOption, getOptions } from './getOptions.js';\nimport { useOnElementResize } from '../../shared/useOnElementOnResize.js';\n\nexport const usePerPageSelector = (propsFromUser: DSPerPageSelectorT.Props) => {\n  // =============================================================================\n  // MERGE WITH DEFAULT AND VALIDATE PROPS\n  // =============================================================================\n  const propsWithDefault = useMemoMergePropsWithDefault<DSPerPageSelectorT.InternalProps>(propsFromUser, defaultProps);\n  useValidateProps(propsWithDefault, DSPerPageSelectorPropTypesSchema);\n  // =============================================================================\n  // XSTYLED PROPS\n  // =============================================================================\n  const xstyledProps = useGetXstyledProps(propsWithDefault);\n  // =============================================================================\n  // GLOBAL ATTRIBUTES\n  // =============================================================================\n  const globalAttributes = useGetGlobalAttributes<\n    DSPerPageSelectorT.InternalProps,\n    HTMLButtonElement,\n    DSButtonV3T.Props\n  >(propsWithDefault);\n  // =============================================================================\n  // OWNER PROPS\n  // =============================================================================\n  const ownerPropsConfig = useOwnerProps(propsWithDefault);\n  // AD HOC PER COMPONENT LOGIC\n  // =============================================================================\n  // custom code goes here, this is an example\n  // const instanceUid = React.useMemo(() => `ds-per-page-selector-${uid(5)}`, []);\n\n  const { pageSize, perPageOptions, perPageStep, minPerPage, maxPerPage } = propsWithDefault;\n  const [isOpened, setIsOpened] = useState(false);\n  const options = useMemo(() => {\n    if (perPageOptions) return perPageOptions.map(generateOption);\n    return getOptions(perPageStep, minPerPage, maxPerPage);\n  }, [maxPerPage, minPerPage, perPageOptions, perPageStep]);\n\n  const actionRef = useRef<Record<string, (dsId: string) => void>>({});\n  const btnRef = useRef<HTMLButtonElement>(null);\n\n  const chevronRef = useRef<HTMLElement>(null);\n  const { width: chevronWidth } = useOnElementResize(chevronRef);\n\n  useEffect(() => {\n    if (isOpened) {\n      actionRef.current.setActiveDescendant(pageSize.toString());\n      actionRef.current.scrollOptionIntoView(pageSize.toString());\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isOpened]);\n\n  // =============================================================================\n  // HELPERS HOOKS CONFIGS\n  // =============================================================================\n  // const eventHandlers = useEventHandlers({ propsWithDefault, instanceUid }); // <-- complex logic should be made atomics this way\n\n  return React.useMemo(\n    () => ({\n      propsWithDefault,\n      xstyledProps,\n      globalAttributes,\n      ownerPropsConfig,\n      actionRef,\n      btnRef,\n      chevronRef,\n      chevronWidth,\n      isOpened,\n      options,\n      setIsOpened,\n    }),\n    [propsWithDefault, xstyledProps, globalAttributes, ownerPropsConfig, isOpened, options, chevronRef, chevronWidth],\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACCvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,OAAOA,UAAS,WAAW,SAAS,QAAQ,gBAAgB;AAE5D,SAAkC,kCAAkC,oBAAoB;AACxF,SAAS,wBAAwB;AACjC,SAAS,gBAAgB,kBAAkB;AAC3C,SAAS,0BAA0B;AAE5B,MAAM,qBAAqB,CAAC,kBAA4C;AAI7E,QAAM,mBAAmB,6BAA+D,eAAe,YAAY;AACnH,mBAAiB,kBAAkB,gCAAgC;AAInE,QAAM,eAAe,mBAAmB,gBAAgB;AAIxD,QAAM,mBAAmB,uBAIvB,gBAAgB;AAIlB,QAAM,mBAAmB,cAAc,gBAAgB;AAMvD,QAAM,EAAE,UAAU,gBAAgB,aAAa,YAAY,WAAW,IAAI;AAC1E,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAC9C,QAAM,UAAU,QAAQ,MAAM;AAC5B,QAAI,eAAgB,QAAO,eAAe,IAAI,cAAc;AAC5D,WAAO,WAAW,aAAa,YAAY,UAAU;AAAA,EACvD,GAAG,CAAC,YAAY,YAAY,gBAAgB,WAAW,CAAC;AAExD,QAAM,YAAY,OAA+C,CAAC,CAAC;AACnE,QAAM,SAAS,OAA0B,IAAI;AAE7C,QAAM,aAAa,OAAoB,IAAI;AAC3C,QAAM,EAAE,OAAO,aAAa,IAAI,mBAAmB,UAAU;AAE7D,YAAU,MAAM;AACd,QAAI,UAAU;AACZ,gBAAU,QAAQ,oBAAoB,SAAS,SAAS,CAAC;AACzD,gBAAU,QAAQ,qBAAqB,SAAS,SAAS,CAAC;AAAA,IAC5D;AAAA,EAEF,GAAG,CAAC,QAAQ,CAAC;AAOb,SAAOA,OAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,kBAAkB,cAAc,kBAAkB,kBAAkB,UAAU,SAAS,YAAY,YAAY;AAAA,EAClH;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { DSButtonV3T } from '@elliemae/ds-button-v2';\nimport type { DSFastListT } from '@elliemae/ds-fast-list';\nimport {\n  useGetGlobalAttributes,\n  useGetXstyledProps,\n  useMemoMergePropsWithDefault,\n  useOwnerProps,\n} from '@elliemae/ds-props-helpers';\nimport React, { useMemo, useRef, useState } from 'react';\nimport { uid } from 'uid';\nimport { type DSPerPageSelectorT, DSPerPageSelectorPropTypesSchema, defaultProps } from '../react-desc-prop-types.js';\nimport { generateOption, getOptions } from './getOptions.js';\nimport { getDialogId, getHeaderId, getListId } from './getInstanceIds.js';\nimport { useFocusTracker } from './useFocusTracker.js';\nimport { usePerPageSelectorFloatingContext } from './usePerPageSelectorFloatingContext.js';\nimport { usePerPageSelectorInteractions } from './usePerPageSelectorInteractions.js';\nimport { usePerPageSelectorSizing } from './usePerPageSelectorSizing.js';\nimport { useValidateProps } from './useValidateProps.js';\n\nexport const usePerPageSelector = (propsFromUser: DSPerPageSelectorT.Props) => {\n  // =============================================================================\n  // MERGE WITH DEFAULT AND VALIDATE PROPS\n  // =============================================================================\n  const propsWithDefault = useMemoMergePropsWithDefault<DSPerPageSelectorT.InternalProps>(propsFromUser, defaultProps);\n  useValidateProps(propsWithDefault, DSPerPageSelectorPropTypesSchema);\n  // =============================================================================\n  // XSTYLED PROPS\n  // =============================================================================\n  const xstyledProps = useGetXstyledProps(propsWithDefault);\n  // =============================================================================\n  // GLOBAL ATTRIBUTES\n  // =============================================================================\n  const globalAttributes = useGetGlobalAttributes<\n    DSPerPageSelectorT.InternalProps,\n    HTMLButtonElement,\n    DSButtonV3T.Props\n  >(propsWithDefault);\n  // =============================================================================\n  // OWNER PROPS\n  // =============================================================================\n  const ownerPropsConfig = useOwnerProps(propsWithDefault);\n  // =============================================================================\n  // AD HOC PER COMPONENT LOGIC\n  // =============================================================================\n  const { pageSize, perPageOptions, perPageStep, minPerPage, maxPerPage, listWidth } = propsWithDefault;\n  const instanceUid = useMemo(() => uid(5), []);\n  const [isOpen, setIsOpen] = useState(false);\n  const options = useMemo(() => {\n    if (perPageOptions) return perPageOptions.map(generateOption);\n    return getOptions(perPageStep, minPerPage, maxPerPage);\n  }, [maxPerPage, minPerPage, perPageOptions, perPageStep]);\n\n  const triggerRef = useRef<HTMLButtonElement | null>(null);\n  const chevronRef = useRef<HTMLElement>(null);\n  const listActionRef = useRef<DSFastListT.ActionRef>({});\n\n  const sizing = usePerPageSelectorSizing({ pageSize, options, listWidth, chevronRef, listActionRef });\n\n  const focusTrackers = useFocusTracker({ options, pageSize });\n\n  const { floatingStyles, floatingContext, handleTriggerRef, floatingInnerRef, floatingNodeRef } =\n    usePerPageSelectorFloatingContext({\n      isOpen,\n      setIsOpen,\n      triggerRef,\n      trackFocusRegionReset: focusTrackers.trackFocusRegionReset,\n      chevronWidth: sizing.chevronWidth,\n    });\n\n  const interactions = usePerPageSelectorInteractions({\n    propsWithDefault,\n    globalAttributes,\n    options,\n    isOpen,\n    setIsOpen,\n    focusTrackers,\n    triggerRef,\n    floatingNodeRef,\n    listActionRef,\n  });\n\n  const ids = useMemo(\n    () => ({\n      headerId: getHeaderId(instanceUid),\n      listId: getListId(instanceUid),\n      dialogId: getDialogId(instanceUid),\n    }),\n    [instanceUid],\n  );\n\n  return React.useMemo(\n    () => ({\n      propsWithDefault,\n      xstyledProps,\n      globalAttributes,\n      ownerPropsConfig,\n      isOpen,\n      options,\n      focusTrackers,\n      triggerRef,\n      chevronRef,\n      listActionRef,\n      floatingStyles,\n      floatingContext,\n      handleTriggerRef,\n      floatingInnerRef,\n      ...sizing,\n      ...ids,\n      ...interactions,\n    }),\n    [\n      propsWithDefault,\n      xstyledProps,\n      globalAttributes,\n      ownerPropsConfig,\n      isOpen,\n      options,\n      focusTrackers,\n      floatingStyles,\n      floatingContext,\n      handleTriggerRef,\n      floatingInnerRef,\n      sizing,\n      ids,\n      interactions,\n    ],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACEvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,OAAOA,UAAS,SAAS,QAAQ,gBAAgB;AACjD,SAAS,WAAW;AACpB,SAAkC,kCAAkC,oBAAoB;AACxF,SAAS,gBAAgB,kBAAkB;AAC3C,SAAS,aAAa,aAAa,iBAAiB;AACpD,SAAS,uBAAuB;AAChC,SAAS,yCAAyC;AAClD,SAAS,sCAAsC;AAC/C,SAAS,gCAAgC;AACzC,SAAS,wBAAwB;AAE1B,MAAM,qBAAqB,CAAC,kBAA4C;AAI7E,QAAM,mBAAmB,6BAA+D,eAAe,YAAY;AACnH,mBAAiB,kBAAkB,gCAAgC;AAInE,QAAM,eAAe,mBAAmB,gBAAgB;AAIxD,QAAM,mBAAmB,uBAIvB,gBAAgB;AAIlB,QAAM,mBAAmB,cAAc,gBAAgB;AAIvD,QAAM,EAAE,UAAU,gBAAgB,aAAa,YAAY,YAAY,UAAU,IAAI;AACrF,QAAM,cAAc,QAAQ,MAAM,IAAI,CAAC,GAAG,CAAC,CAAC;AAC5C,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAC1C,QAAM,UAAU,QAAQ,MAAM;AAC5B,QAAI,eAAgB,QAAO,eAAe,IAAI,cAAc;AAC5D,WAAO,WAAW,aAAa,YAAY,UAAU;AAAA,EACvD,GAAG,CAAC,YAAY,YAAY,gBAAgB,WAAW,CAAC;AAExD,QAAM,aAAa,OAAiC,IAAI;AACxD,QAAM,aAAa,OAAoB,IAAI;AAC3C,QAAM,gBAAgB,OAA8B,CAAC,CAAC;AAEtD,QAAM,SAAS,yBAAyB,EAAE,UAAU,SAAS,WAAW,YAAY,cAAc,CAAC;AAEnG,QAAM,gBAAgB,gBAAgB,EAAE,SAAS,SAAS,CAAC;AAE3D,QAAM,EAAE,gBAAgB,iBAAiB,kBAAkB,kBAAkB,gBAAgB,IAC3F,kCAAkC;AAAA,IAChC;AAAA,IACA;AAAA,IACA;AAAA,IACA,uBAAuB,cAAc;AAAA,IACrC,cAAc,OAAO;AAAA,EACvB,CAAC;AAEH,QAAM,eAAe,+BAA+B;AAAA,IAClD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,MAAM;AAAA,IACV,OAAO;AAAA,MACL,UAAU,YAAY,WAAW;AAAA,MACjC,QAAQ,UAAU,WAAW;AAAA,MAC7B,UAAU,YAAY,WAAW;AAAA,IACnC;AAAA,IACA,CAAC,WAAW;AAAA,EACd;AAEA,SAAOA,OAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,IACL;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
   "names": ["React"]
 }

package/dist/esm/parts/DSPerPageSelector/config/usePerPageSelectorFloatingContext.js

@@ -0,0 +1,52 @@
+import * as React from "react";
+import { useFloatingContext } from "@elliemae/ds-floating-context";
+import { useCallback, useMemo, useRef } from "react";
+const usePerPageSelectorFloatingContext = ({
+  isOpen,
+  setIsOpen,
+  triggerRef,
+  trackFocusRegionReset,
+  chevronWidth
+}) => {
+  const floatingNodeRef = useRef(null);
+  const handleClose = useCallback(() => {
+    setIsOpen(false);
+    trackFocusRegionReset();
+  }, [setIsOpen, trackFocusRegionReset]);
+  const floatingContextConfig = useMemo(
+    () => ({
+      // the previous DSPerPageSelector opened upwards (it lives in a footer) and aligned the selected value with the trigger
+      placement: "top-start",
+      placementOrderPreference: ["top-start", "bottom-start"],
+      customOffset: [-(chevronWidth + 7), 2],
+      externallyControlledIsOpen: isOpen,
+      withoutAnimation: true,
+      onClickOutside: handleClose,
+      closeOnEscape: true,
+      onEscape: handleClose,
+      returnFocusToReference: true,
+      externalReferenceElement: triggerRef.current
+    }),
+    [chevronWidth, handleClose, isOpen, triggerRef]
+  );
+  const { refs: floatingRefs, floatingStyles, context: floatingContext } = useFloatingContext(floatingContextConfig);
+  const handleTriggerRef = useCallback(
+    (node) => {
+      triggerRef.current = node;
+      floatingRefs.setReference(node);
+    },
+    [floatingRefs, triggerRef]
+  );
+  const floatingInnerRef = useCallback(
+    (node) => {
+      floatingNodeRef.current = node;
+      floatingRefs.setFloating(node);
+    },
+    [floatingRefs.setFloating]
+  );
+  return { floatingStyles, floatingContext, handleTriggerRef, floatingInnerRef, floatingNodeRef };
+};
+export {
+  usePerPageSelectorFloatingContext
+};
+//# sourceMappingURL=usePerPageSelectorFloatingContext.js.map

package/dist/esm/parts/DSPerPageSelector/config/usePerPageSelectorFloatingContext.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/DSPerPageSelector/config/usePerPageSelectorFloatingContext.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useFloatingContext, type DSHookFloatingContextT } from '@elliemae/ds-floating-context';\nimport type React from 'react';\nimport { useCallback, useMemo, useRef } from 'react';\n\ntype FloatingContextConfigT = {\n  isOpen: boolean;\n  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;\n  triggerRef: React.MutableRefObject<HTMLButtonElement | null>;\n  trackFocusRegionReset: () => void;\n  chevronWidth: number;\n};\n\n/**\n * The single point that wires DSPerPageSelector to `useFloatingContext` (same shape as DSPaginator's one).\n *\n * The open state is owned by the component, so the floating context is \"controlled\" by it\n * (`externallyControlledIsOpen`) and this hook only translates the closing intents of the floating context into it:\n *  - scoped Escape: the floating context routes it to `onEscape` and, because `returnFocusToReference` is on, it also\n *    returns the focus to the trigger. This is the ONLY close path where the floating context moves the focus.\n *  - click outside (panel + trigger): closes, the focus stays where the user clicked.\n * The other close paths (activation, Tab, trigger toggle) live in usePerPageSelectorInteractions.\n */\nexport const usePerPageSelectorFloatingContext = ({\n  isOpen,\n  setIsOpen,\n  triggerRef,\n  trackFocusRegionReset,\n  chevronWidth,\n}: FloatingContextConfigT) => {\n  const floatingNodeRef = useRef<HTMLDivElement | null>(null);\n\n  const handleClose = useCallback(() => {\n    setIsOpen(false);\n    trackFocusRegionReset();\n  }, [setIsOpen, trackFocusRegionReset]);\n\n  const floatingContextConfig = useMemo(\n    () =>\n      ({\n        // the previous DSPerPageSelector opened upwards (it lives in a footer) and aligned the selected value with the trigger\n        placement: 'top-start',\n        placementOrderPreference: ['top-start', 'bottom-start'],\n        customOffset: [-(chevronWidth + 7), 2],\n        externallyControlledIsOpen: isOpen,\n        withoutAnimation: true,\n        onClickOutside: handleClose,\n        closeOnEscape: true,\n        onEscape: handleClose,\n        returnFocusToReference: true,\n        externalReferenceElement: triggerRef.current,\n      }) as DSHookFloatingContextT.Props,\n    [chevronWidth, handleClose, isOpen, triggerRef],\n  );\n\n  const { refs: floatingRefs, floatingStyles, context: floatingContext } = useFloatingContext(floatingContextConfig);\n\n  const handleTriggerRef = useCallback<React.RefCallback<HTMLButtonElement>>(\n    (node) => {\n      // eslint-disable-next-line no-param-reassign\n      triggerRef.current = node;\n      floatingRefs.setReference(node);\n    },\n    [floatingRefs, triggerRef],\n  );\n\n  const floatingInnerRef = useCallback<React.RefCallback<HTMLDivElement>>(\n    (node) => {\n      floatingNodeRef.current = node;\n      (floatingRefs.setFloating as React.RefCallback<HTMLDivElement>)(node);\n    },\n    [floatingRefs.setFloating],\n  );\n\n  return { floatingStyles, floatingContext, handleTriggerRef, floatingInnerRef, floatingNodeRef };\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,0BAAuD;AAEhE,SAAS,aAAa,SAAS,cAAc;AAoBtC,MAAM,oCAAoC,CAAC;AAAA,EAChD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA8B;AAC5B,QAAM,kBAAkB,OAA8B,IAAI;AAE1D,QAAM,cAAc,YAAY,MAAM;AACpC,cAAU,KAAK;AACf,0BAAsB;AAAA,EACxB,GAAG,CAAC,WAAW,qBAAqB,CAAC;AAErC,QAAM,wBAAwB;AAAA,IAC5B,OACG;AAAA;AAAA,MAEC,WAAW;AAAA,MACX,0BAA0B,CAAC,aAAa,cAAc;AAAA,MACtD,cAAc,CAAC,EAAE,eAAe,IAAI,CAAC;AAAA,MACrC,4BAA4B;AAAA,MAC5B,kBAAkB;AAAA,MAClB,gBAAgB;AAAA,MAChB,eAAe;AAAA,MACf,UAAU;AAAA,MACV,wBAAwB;AAAA,MACxB,0BAA0B,WAAW;AAAA,IACvC;AAAA,IACF,CAAC,cAAc,aAAa,QAAQ,UAAU;AAAA,EAChD;AAEA,QAAM,EAAE,MAAM,cAAc,gBAAgB,SAAS,gBAAgB,IAAI,mBAAmB,qBAAqB;AAEjH,QAAM,mBAAmB;AAAA,IACvB,CAAC,SAAS;AAER,iBAAW,UAAU;AACrB,mBAAa,aAAa,IAAI;AAAA,IAChC;AAAA,IACA,CAAC,cAAc,UAAU;AAAA,EAC3B;AAEA,QAAM,mBAAmB;AAAA,IACvB,CAAC,SAAS;AACR,sBAAgB,UAAU;AAC1B,MAAC,aAAa,YAAkD,IAAI;AAAA,IACtE;AAAA,IACA,CAAC,aAAa,WAAW;AAAA,EAC3B;AAEA,SAAO,EAAE,gBAAgB,iBAAiB,kBAAkB,kBAAkB,gBAAgB;AAChG;",
+  "names": []
+}

package/dist/esm/parts/DSPerPageSelector/config/usePerPageSelectorInteractions.js

@@ -0,0 +1,145 @@
+import * as React from "react";
+import { useCallback, useMemo, useRef } from "react";
+import { PER_PAGE_SELECTOR_TYPEAHEAD_RESET_MS } from "../constants/index.js";
+import { NAVIGATION_KEYS } from "./navigationKeys.js";
+const isPrintableCharacter = (key) => key.length === 1 && key !== " ";
+const usePerPageSelectorInteractions = ({
+  propsWithDefault,
+  globalAttributes,
+  options,
+  isOpen,
+  setIsOpen,
+  focusTrackers,
+  triggerRef,
+  floatingNodeRef,
+  listActionRef
+}) => {
+  const { pageSize, onPageSizeChange } = propsWithDefault;
+  const {
+    focusedIndex,
+    clampIndex,
+    trackFocusOptionAtIndex,
+    trackFocusSelectedOption,
+    trackFocusTrigger,
+    trackFocusRegionReset
+  } = focusTrackers;
+  const typeaheadRef = useRef({ buffer: "", lastKeyTimestamp: 0 });
+  const moveFocusToIndex = useCallback(
+    (index) => {
+      const targetIndex = clampIndex(index);
+      trackFocusOptionAtIndex(targetIndex);
+      listActionRef.current.scrollTo?.(targetIndex, { align: "auto" });
+    },
+    [clampIndex, listActionRef, trackFocusOptionAtIndex]
+  );
+  const commitOption = useCallback(
+    (option) => {
+      if (option.value !== pageSize) onPageSizeChange(option.value);
+      setIsOpen(false);
+      trackFocusTrigger();
+    },
+    [onPageSizeChange, pageSize, setIsOpen, trackFocusTrigger]
+  );
+  const handleTriggerClick = useCallback(
+    (e) => {
+      globalAttributes.onClick?.(e);
+      if (isOpen) {
+        setIsOpen(false);
+        trackFocusTrigger();
+        return;
+      }
+      if (options.length === 0) return;
+      setIsOpen(true);
+      trackFocusSelectedOption();
+    },
+    [globalAttributes.onClick, isOpen, options.length, setIsOpen, trackFocusSelectedOption, trackFocusTrigger]
+  );
+  const handleTriggerKeyDown = useCallback(
+    (e) => {
+      globalAttributes.onKeyDown?.(e);
+      if (e.key !== "ArrowDown" && e.key !== "ArrowUp") return;
+      if (isOpen || options.length === 0) return;
+      e.preventDefault();
+      setIsOpen(true);
+      trackFocusSelectedOption();
+    },
+    [globalAttributes.onKeyDown, isOpen, options.length, setIsOpen, trackFocusSelectedOption]
+  );
+  const handlePanelKeyDownCapture = useCallback(
+    (e) => {
+      if (e.key !== "Tab") return;
+      triggerRef.current?.focus();
+      trackFocusRegionReset();
+      const focusedOption = options[focusedIndex];
+      if (focusedOption && focusedOption.value !== pageSize) {
+        onPageSizeChange(focusedOption.value);
+      }
+      setIsOpen(false);
+    },
+    [focusedIndex, onPageSizeChange, options, pageSize, setIsOpen, trackFocusRegionReset, triggerRef]
+  );
+  const handleTypeahead = useCallback(
+    (character) => {
+      const now = Date.now();
+      const typeahead = typeaheadRef.current;
+      const isNewSearch = now - typeahead.lastKeyTimestamp > PER_PAGE_SELECTOR_TYPEAHEAD_RESET_MS;
+      if (isNewSearch) typeahead.buffer = "";
+      typeahead.buffer += character.toLowerCase();
+      typeahead.lastKeyTimestamp = now;
+      const startIndex = isNewSearch ? focusedIndex + 1 : Math.max(focusedIndex, 0);
+      const ordered = [...options.slice(startIndex), ...options.slice(0, startIndex)];
+      const match = ordered.find((option) => option.label.toLowerCase().startsWith(typeahead.buffer));
+      if (match) moveFocusToIndex(options.indexOf(match));
+    },
+    [focusedIndex, moveFocusToIndex, options]
+  );
+  const handlePanelKeyDown = useCallback(
+    (e) => {
+      if (e.ctrlKey || e.metaKey || e.altKey) return;
+      const getTargetIndex = NAVIGATION_KEYS[e.key];
+      if (getTargetIndex) {
+        e.preventDefault();
+        moveFocusToIndex(getTargetIndex(Math.max(focusedIndex, 0), options.length));
+        return;
+      }
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        if (focusedIndex >= 0) commitOption(options[focusedIndex]);
+        return;
+      }
+      if (isPrintableCharacter(e.key)) handleTypeahead(e.key);
+    },
+    [commitOption, focusedIndex, handleTypeahead, moveFocusToIndex, options]
+  );
+  const handleBlurOutOfWidget = useCallback(
+    (e) => {
+      const nextFocused = e.relatedTarget;
+      if (!nextFocused) return;
+      if (triggerRef.current?.contains(nextFocused) || floatingNodeRef.current?.contains(nextFocused)) return;
+      trackFocusRegionReset();
+    },
+    [floatingNodeRef, trackFocusRegionReset, triggerRef]
+  );
+  return useMemo(
+    () => ({
+      commitOption,
+      handleTriggerClick,
+      handleTriggerKeyDown,
+      handlePanelKeyDown,
+      handlePanelKeyDownCapture,
+      handleBlurOutOfWidget
+    }),
+    [
+      commitOption,
+      handleTriggerClick,
+      handleTriggerKeyDown,
+      handlePanelKeyDown,
+      handlePanelKeyDownCapture,
+      handleBlurOutOfWidget
+    ]
+  );
+};
+export {
+  usePerPageSelectorInteractions
+};
+//# sourceMappingURL=usePerPageSelectorInteractions.js.map

package/dist/esm/parts/DSPerPageSelector/config/usePerPageSelectorInteractions.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/DSPerPageSelector/config/usePerPageSelectorInteractions.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { DSFastListT } from '@elliemae/ds-fast-list';\nimport type React from 'react';\nimport { useCallback, useMemo, useRef } from 'react';\nimport { PER_PAGE_SELECTOR_TYPEAHEAD_RESET_MS } from '../constants/index.js';\nimport type { DSPerPageSelectorT } from '../react-desc-prop-types.js';\nimport { NAVIGATION_KEYS } from './navigationKeys.js';\nimport type { useFocusTracker } from './useFocusTracker.js';\n\ntype InteractionsConfigT = {\n  propsWithDefault: DSPerPageSelectorT.InternalProps;\n  globalAttributes: { onClick?: unknown; onKeyDown?: unknown };\n  options: DSPerPageSelectorT.PerPageOption[];\n  isOpen: boolean;\n  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;\n  focusTrackers: ReturnType<typeof useFocusTracker>;\n  triggerRef: React.MutableRefObject<HTMLButtonElement | null>;\n  floatingNodeRef: React.MutableRefObject<HTMLDivElement | null>;\n  listActionRef: React.MutableRefObject<DSFastListT.ActionRef>;\n};\n\nconst isPrintableCharacter = (key: string) => key.length === 1 && key !== ' ';\n\n/**\n * Every user intent on the trigger and on the list. The selection model is the one of a native select (and the same one\n * as DSPaginator):\n *  - moving through the options (arrows, Home/End, PageUp/PageDown, typing the start of a label) only moves the focus:\n *    `onPageSizeChange` is NOT invoked while navigating\n *  - Enter, Space or a click on an option commits it, closes the list and returns the focus to the trigger\n *  - Tab (and Shift+Tab) commits the focused option, closes the list and continues from the trigger\n *  - Escape (see usePerPageSelectorFloatingContext) and click outside close without committing\n * Handlers only declare focus intents through the focus tracker (see useFocusTracker), with ONE documented exception:\n * Tab (see handlePanelKeyDownCapture).\n */\nexport const usePerPageSelectorInteractions = ({\n  propsWithDefault,\n  globalAttributes,\n  options,\n  isOpen,\n  setIsOpen,\n  focusTrackers,\n  triggerRef,\n  floatingNodeRef,\n  listActionRef,\n}: InteractionsConfigT) => {\n  const { pageSize, onPageSizeChange } = propsWithDefault;\n  const {\n    focusedIndex,\n    clampIndex,\n    trackFocusOptionAtIndex,\n    trackFocusSelectedOption,\n    trackFocusTrigger,\n    trackFocusRegionReset,\n  } = focusTrackers;\n  const typeaheadRef = useRef({ buffer: '', lastKeyTimestamp: 0 });\n\n  // the target option may not be mounted (virtualized): the focus intent is declared, the list is scrolled to it and\n  //   the option focuses itself from its ref callback as soon as it mounts\n  const moveFocusToIndex = useCallback(\n    (index: number) => {\n      const targetIndex = clampIndex(index);\n      trackFocusOptionAtIndex(targetIndex);\n      listActionRef.current.scrollTo?.(targetIndex, { align: 'auto' });\n    },\n    [clampIndex, listActionRef, trackFocusOptionAtIndex],\n  );\n\n  const commitOption = useCallback(\n    (option: DSPerPageSelectorT.PerPageOption) => {\n      if (option.value !== pageSize) onPageSizeChange(option.value);\n      setIsOpen(false);\n      trackFocusTrigger();\n    },\n    [onPageSizeChange, pageSize, setIsOpen, trackFocusTrigger],\n  );\n\n  const handleTriggerClick = useCallback(\n    (e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => {\n      (globalAttributes.onClick as ((event: typeof e) => void) | undefined)?.(e);\n      if (isOpen) {\n        setIsOpen(false);\n        trackFocusTrigger();\n        return;\n      }\n      if (options.length === 0) return;\n      setIsOpen(true);\n      trackFocusSelectedOption();\n    },\n    [globalAttributes.onClick, isOpen, options.length, setIsOpen, trackFocusSelectedOption, trackFocusTrigger],\n  );\n\n  // ArrowDown / ArrowUp on the trigger open the list (same as the select-only combobox and menu button patterns)\n  //   Enter and Space are not handled here: the trigger is a native button and they arrive as a click\n  const handleTriggerKeyDown = useCallback(\n    (e: React.KeyboardEvent<HTMLButtonElement>) => {\n      (globalAttributes.onKeyDown as React.KeyboardEventHandler<HTMLButtonElement> | undefined)?.(e);\n      if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp') return;\n      if (isOpen || options.length === 0) return;\n      e.preventDefault();\n      setIsOpen(true);\n      trackFocusSelectedOption();\n    },\n    [globalAttributes.onKeyDown, isOpen, options.length, setIsOpen, trackFocusSelectedOption],\n  );\n\n  /*\n   * Tab is handled in the CAPTURE phase and moves the focus from the handler: the one exception to \"the ref callbacks\n   * are the only place that calls .focus()\". Tab has a browser default action that runs right after the keydown\n   * handlers return and moves the focus from wherever it IS at that moment. The panel is portaled, so from an option\n   * the default would continue after the portal, not after the trigger: the trigger must hold the focus BEFORE the\n   * default runs, and a post-commit mechanism (tracker -> render -> ref callback) can never be ahead of it.\n   * Same decision as DSPaginator and ds-menu-button's `handleMenuTabKeyDownCapture` (see their\n   * KNOWN_INTENTIONAL_DEVIATIONS.md). The tracker is reset (\"nothing to focus\") so nothing can steal the focus back.\n   */\n  const handlePanelKeyDownCapture = useCallback(\n    (e: React.KeyboardEvent<HTMLElement>) => {\n      if (e.key !== 'Tab') return;\n      triggerRef.current?.focus();\n      trackFocusRegionReset();\n      const focusedOption = options[focusedIndex];\n      if (focusedOption && focusedOption.value !== pageSize) {\n        onPageSizeChange(focusedOption.value);\n      }\n      setIsOpen(false);\n    },\n    [focusedIndex, onPageSizeChange, options, pageSize, setIsOpen, trackFocusRegionReset, triggerRef],\n  );\n\n  // APG recommends type-ahead for every listbox: the typed characters (within a second of each other) are the prefix of\n  //   the label to focus. The first character looks from the NEXT option, so repeating a key cycles through its matches\n  const handleTypeahead = useCallback(\n    (character: string) => {\n      const now = Date.now();\n      const typeahead = typeaheadRef.current;\n      const isNewSearch = now - typeahead.lastKeyTimestamp > PER_PAGE_SELECTOR_TYPEAHEAD_RESET_MS;\n      if (isNewSearch) typeahead.buffer = '';\n      typeahead.buffer += character.toLowerCase();\n      typeahead.lastKeyTimestamp = now;\n      const startIndex = isNewSearch ? focusedIndex + 1 : Math.max(focusedIndex, 0);\n      const ordered = [...options.slice(startIndex), ...options.slice(0, startIndex)];\n      const match = ordered.find((option) => option.label.toLowerCase().startsWith(typeahead.buffer));\n      if (match) moveFocusToIndex(options.indexOf(match));\n    },\n    [focusedIndex, moveFocusToIndex, options],\n  );\n\n  const handlePanelKeyDown = useCallback(\n    (e: React.KeyboardEvent<HTMLElement>) => {\n      if (e.ctrlKey || e.metaKey || e.altKey) return;\n      const getTargetIndex = NAVIGATION_KEYS[e.key];\n      if (getTargetIndex) {\n        e.preventDefault(); // the list scrolls through the virtualizer, not through the browser\n        moveFocusToIndex(getTargetIndex(Math.max(focusedIndex, 0), options.length));\n        return;\n      }\n      if (e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault();\n        if (focusedIndex >= 0) commitOption(options[focusedIndex]);\n        return;\n      }\n      if (isPrintableCharacter(e.key)) handleTypeahead(e.key);\n    },\n    [commitOption, focusedIndex, handleTypeahead, moveFocusToIndex, options],\n  );\n\n  /*\n   * The tracker resets when the focus leaves the whole widget (trigger + portaled panel), not on every blur:\n   *  - a blur with no `relatedTarget` is ambiguous (the focused option unmounted because the list scrolled, the\n   *    window lost focus...) and must NOT reset, or an option that is about to mount for a pending focus intent\n   *    would find the intent erased\n   *  - a blur towards the trigger or the panel is internal\n   */\n  const handleBlurOutOfWidget = useCallback(\n    (e: React.FocusEvent<HTMLElement>) => {\n      const nextFocused = e.relatedTarget as Node | null;\n      if (!nextFocused) return;\n      if (triggerRef.current?.contains(nextFocused) || floatingNodeRef.current?.contains(nextFocused)) return;\n      trackFocusRegionReset();\n    },\n    [floatingNodeRef, trackFocusRegionReset, triggerRef],\n  );\n\n  return useMemo(\n    () => ({\n      commitOption,\n      handleTriggerClick,\n      handleTriggerKeyDown,\n      handlePanelKeyDown,\n      handlePanelKeyDownCapture,\n      handleBlurOutOfWidget,\n    }),\n    [\n      commitOption,\n      handleTriggerClick,\n      handleTriggerKeyDown,\n      handlePanelKeyDown,\n      handlePanelKeyDownCapture,\n      handleBlurOutOfWidget,\n    ],\n  );\n};\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/esm/parts/DSPerPageSelector/config/usePerPageSelectorSizing.js

@@ -0,0 +1,42 @@
+import * as React from "react";
+import { useCallback, useMemo } from "react";
+import { useOnElementResize } from "../../shared/useOnElementOnResize.js";
+import {
+  PER_PAGE_SELECTOR_DEFAULT_LIST_WIDTH,
+  PER_PAGE_SELECTOR_HEADER_HEIGHT,
+  PER_PAGE_SELECTOR_PANEL_MAX_HEIGHT,
+  PER_PAGE_SELECTOR_PANEL_PADDING_BOTTOM,
+  PER_PAGE_SELECTOR_VIEWPORT_MARGIN
+} from "../constants/index.js";
+import { getSelectedOptionIndex } from "./getSelectedOptionIndex.js";
+const toCssLength = (value) => typeof value === "number" ? `${value}px` : value;
+const usePerPageSelectorSizing = ({
+  pageSize,
+  options,
+  listWidth,
+  chevronRef,
+  listActionRef
+}) => {
+  const { width: chevronWidth } = useOnElementResize(chevronRef);
+  const configuredWidth = toCssLength(listWidth ?? PER_PAGE_SELECTOR_DEFAULT_LIST_WIDTH);
+  const panelStyle = useMemo(
+    () => ({ width: `min(${configuredWidth}, calc(100vw - ${PER_PAGE_SELECTOR_VIEWPORT_MARGIN}px))` }),
+    [configuredWidth]
+  );
+  const listMaxHeight = PER_PAGE_SELECTOR_PANEL_MAX_HEIGHT - PER_PAGE_SELECTOR_HEADER_HEIGHT - PER_PAGE_SELECTOR_PANEL_PADDING_BOTTOM;
+  const handleListWrapperRef = useCallback(
+    (node) => {
+      const selectedIndex = getSelectedOptionIndex(options, pageSize);
+      if (node && selectedIndex >= 0) listActionRef.current.scrollTo?.(selectedIndex, { align: "center" });
+    },
+    [listActionRef, options, pageSize]
+  );
+  return useMemo(
+    () => ({ chevronWidth, panelStyle, listMaxHeight, handleListWrapperRef }),
+    [chevronWidth, panelStyle, listMaxHeight, handleListWrapperRef]
+  );
+};
+export {
+  usePerPageSelectorSizing
+};
+//# sourceMappingURL=usePerPageSelectorSizing.js.map

package/dist/esm/parts/DSPerPageSelector/config/usePerPageSelectorSizing.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/DSPerPageSelector/config/usePerPageSelectorSizing.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { DSFastListT } from '@elliemae/ds-fast-list';\nimport type React from 'react';\nimport { useCallback, useMemo } from 'react';\nimport { useOnElementResize } from '../../shared/useOnElementOnResize.js';\nimport {\n  PER_PAGE_SELECTOR_DEFAULT_LIST_WIDTH,\n  PER_PAGE_SELECTOR_HEADER_HEIGHT,\n  PER_PAGE_SELECTOR_PANEL_MAX_HEIGHT,\n  PER_PAGE_SELECTOR_PANEL_PADDING_BOTTOM,\n  PER_PAGE_SELECTOR_VIEWPORT_MARGIN,\n} from '../constants/index.js';\nimport type { DSPerPageSelectorT } from '../react-desc-prop-types.js';\nimport { getSelectedOptionIndex } from './getSelectedOptionIndex.js';\n\ntype SizingConfigT = {\n  pageSize: number;\n  options: DSPerPageSelectorT.PerPageOption[];\n  listWidth?: number | string;\n  chevronRef: React.RefObject<HTMLElement>;\n  listActionRef: React.MutableRefObject<DSFastListT.ActionRef>;\n};\n\nconst toCssLength = (value: number | string) => (typeof value === 'number' ? `${value}px` : value);\n\n/**\n * Everything about sizes. The rows of the list are virtualized (out of flow), so nothing inside the list can make the panel\n * grow: its width is an explicit policy, not something derived from its content. The list is `listWidth` wide (100px by\n * default), never wider than the viewport, and the labels WRAP inside it. Nothing here renders or measures every label: that\n * would be O(n) hidden components just to size the list to the widest label, and it forced a one-line (truncating) design.\n */\nexport const usePerPageSelectorSizing = ({\n  pageSize,\n  options,\n  listWidth,\n  chevronRef,\n  listActionRef,\n}: SizingConfigT) => {\n  const { width: chevronWidth } = useOnElementResize(chevronRef);\n  const configuredWidth = toCssLength(listWidth ?? PER_PAGE_SELECTOR_DEFAULT_LIST_WIDTH);\n  const panelStyle = useMemo(\n    () => ({ width: `min(${configuredWidth}, calc(100vw - ${PER_PAGE_SELECTOR_VIEWPORT_MARGIN}px))` }),\n    [configuredWidth],\n  );\n  // the tallest the scrolling list gets: the rows can wrap, so the list is as tall as its rows up to this maximum\n  const listMaxHeight =\n    PER_PAGE_SELECTOR_PANEL_MAX_HEIGHT - PER_PAGE_SELECTOR_HEADER_HEIGHT - PER_PAGE_SELECTOR_PANEL_PADDING_BOTTOM;\n\n  /*\n   * The virtual list mounts at scroll offset 0, but the selected option (where the focus must land on open) can be\n   * anywhere, and the virtualizer resets its scroll element to its initial offset when it binds to it. So the list is told\n   * to scroll once it is bound: React attaches the ref callbacks child first, so this one, on the element that wraps the\n   * list, runs after the list's own layout effects (no effect, no timer). The selected option then mounts in range and\n   * focuses itself (focus tracker). The callback changes only when the page size changes, which closes the list.\n   */\n  const handleListWrapperRef = useCallback(\n    (node: HTMLDivElement | null) => {\n      const selectedIndex = getSelectedOptionIndex(options, pageSize);\n      if (node && selectedIndex >= 0) listActionRef.current.scrollTo?.(selectedIndex, { align: 'center' });\n    },\n    [listActionRef, options, pageSize],\n  );\n\n  return useMemo(\n    () => ({ chevronWidth, panelStyle, listMaxHeight, handleListWrapperRef }),\n    [chevronWidth, panelStyle, listMaxHeight, handleListWrapperRef],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,aAAa,eAAe;AACrC,SAAS,0BAA0B;AACnC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,8BAA8B;AAUvC,MAAM,cAAc,CAAC,UAA4B,OAAO,UAAU,WAAW,GAAG,KAAK,OAAO;AAQrF,MAAM,2BAA2B,CAAC;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAqB;AACnB,QAAM,EAAE,OAAO,aAAa,IAAI,mBAAmB,UAAU;AAC7D,QAAM,kBAAkB,YAAY,aAAa,oCAAoC;AACrF,QAAM,aAAa;AAAA,IACjB,OAAO,EAAE,OAAO,OAAO,eAAe,kBAAkB,iCAAiC,OAAO;AAAA,IAChG,CAAC,eAAe;AAAA,EAClB;AAEA,QAAM,gBACJ,qCAAqC,kCAAkC;AASzE,QAAM,uBAAuB;AAAA,IAC3B,CAAC,SAAgC;AAC/B,YAAM,gBAAgB,uBAAuB,SAAS,QAAQ;AAC9D,UAAI,QAAQ,iBAAiB,EAAG,eAAc,QAAQ,WAAW,eAAe,EAAE,OAAO,SAAS,CAAC;AAAA,IACrG;AAAA,IACA,CAAC,eAAe,SAAS,QAAQ;AAAA,EACnC;AAEA,SAAO;AAAA,IACL,OAAO,EAAE,cAAc,YAAY,eAAe,qBAAqB;AAAA,IACvE,CAAC,cAAc,YAAY,eAAe,oBAAoB;AAAA,EAChE;AACF;",
+  "names": []
+}

package/dist/esm/parts/DSPerPageSelector/constants/index.js

@@ -2,19 +2,58 @@ import * as React from "react";
 import { slotObjectToDataTestIds } from "@elliemae/ds-system";
 import { DSPaginationName } from "../../../constants/index.js";
 const DSPerPageSelectorName = "DSPerPageSelector";
-const EXAMPLE_CONSTANTS = {
-  HELLO: "WORLD",
-  FOO: "BAR"
-};
 const PER_PAGE_SELECTOR_SLOTS = {
-  PER_PAGE_SELECTOR: "per-page-selector"
+  PER_PAGE_SELECTOR: "per-page-selector",
+  // legacy ones...
+  TRIGGER_WRAPPER: "per-page-selector-trigger-wrapper",
+  FLOATING_WRAPPER: "per-page-selector-floating-wrapper",
+  PANEL: "per-page-selector-panel",
+  HEADER: "per-page-selector-header",
+  LIST_WRAPPER: "per-page-selector-list-wrapper",
+  LIST: "per-page-selector-list",
+  OPTION: "per-page-selector-option",
+  OPTION_CHECKMARK: "per-page-selector-option-checkmark",
+  OPTION_LABEL: "per-page-selector-option-label"
+};
+const PER_PAGE_SELECTOR_DATA_TESTID = {
+  ...slotObjectToDataTestIds(DSPaginationName, PER_PAGE_SELECTOR_SLOTS),
+  // legacy values of the DSDropdownMenuV2 the per page selector used to render: it is now its own widget but QA and
+  //   consumers select on these, so they stay on the equivalent element — breaking change if removed
+  TRIGGER_WRAPPER: "dropdown-menu-trigger-wrapper",
+  // wraps the trigger
+  PANEL: "dropdown-menu-wrapper",
+  // wraps the header and the list (it used to be the focus holder of the open menu)
+  HEADER: "ds-dropdownmenu-header-wrapper",
+  LIST: "dropdown-menu-listbox",
+  OPTION: "ds-menu-item"
+  // one per option
+};
+const PER_PAGE_SELECTOR_REGION_FOCUSES = {
+  RESET: "",
+  TRIGGER: "trigger",
+  OPTION_PREFIX: "option-"
 };
-const PER_PAGE_SELECTOR_DATA_TESTID = slotObjectToDataTestIds(DSPaginationName, PER_PAGE_SELECTOR_SLOTS);
+const PER_PAGE_SELECTOR_OPTION_HEIGHT = 32;
+const PER_PAGE_SELECTOR_PANEL_MAX_HEIGHT = 300;
+const PER_PAGE_SELECTOR_HEADER_HEIGHT = 17;
+const PER_PAGE_SELECTOR_PANEL_PADDING_BOTTOM = 4;
+const PER_PAGE_SELECTOR_DEFAULT_LIST_WIDTH = 100;
+const PER_PAGE_SELECTOR_VIEWPORT_MARGIN = 16;
+const PER_PAGE_SELECTOR_PAGE_JUMP = 10;
+const PER_PAGE_SELECTOR_TYPEAHEAD_RESET_MS = 1e3;
 export {
   DSPaginationName,
   DSPerPageSelectorName,
-  EXAMPLE_CONSTANTS,
   PER_PAGE_SELECTOR_DATA_TESTID,
-  PER_PAGE_SELECTOR_SLOTS
+  PER_PAGE_SELECTOR_DEFAULT_LIST_WIDTH,
+  PER_PAGE_SELECTOR_HEADER_HEIGHT,
+  PER_PAGE_SELECTOR_OPTION_HEIGHT,
+  PER_PAGE_SELECTOR_PAGE_JUMP,
+  PER_PAGE_SELECTOR_PANEL_MAX_HEIGHT,
+  PER_PAGE_SELECTOR_PANEL_PADDING_BOTTOM,
+  PER_PAGE_SELECTOR_REGION_FOCUSES,
+  PER_PAGE_SELECTOR_SLOTS,
+  PER_PAGE_SELECTOR_TYPEAHEAD_RESET_MS,
+  PER_PAGE_SELECTOR_VIEWPORT_MARGIN
 };
 //# sourceMappingURL=index.js.map

package/dist/esm/parts/DSPerPageSelector/constants/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/DSPerPageSelector/constants/index.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\nimport { DSPaginationName } from '../../../constants/index.js';\nexport { DSPaginationName };\n\n// This should be used only for displayName, and useValidateProps.\n// For slots definition, use parent component name\nexport const DSPerPageSelectorName = 'DSPerPageSelector';\n\nexport const EXAMPLE_CONSTANTS = {\n  HELLO: 'WORLD',\n  FOO: 'BAR',\n} as const;\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const PER_PAGE_SELECTOR_SLOTS = {\n  PER_PAGE_SELECTOR: 'per-page-selector',\n} as const;\n\n// we are naming this with the ${component_name}_data_testid convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const PER_PAGE_SELECTOR_DATA_TESTID = slotObjectToDataTestIds(DSPaginationName, PER_PAGE_SELECTOR_SLOTS);\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AACxC,SAAS,wBAAwB;AAK1B,MAAM,wBAAwB;AAE9B,MAAM,oBAAoB;AAAA,EAC/B,OAAO;AAAA,EACP,KAAK;AACP;AAGO,MAAM,0BAA0B;AAAA,EACrC,mBAAmB;AACrB;AAGO,MAAM,gCAAgC,wBAAwB,kBAAkB,uBAAuB;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\nimport { DSPaginationName } from '../../../constants/index.js';\nexport { DSPaginationName };\n\n// This should be used only for displayName, and useValidateProps.\n// For slots definition, use parent component name\nexport const DSPerPageSelectorName = 'DSPerPageSelector';\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\n// the slots are owned by DSPagination (DSPaginationName): `per-page-selector` is the legacy one (the trigger), the rest are new\nexport const PER_PAGE_SELECTOR_SLOTS = {\n  PER_PAGE_SELECTOR: 'per-page-selector', // legacy ones...\n  TRIGGER_WRAPPER: 'per-page-selector-trigger-wrapper',\n  FLOATING_WRAPPER: 'per-page-selector-floating-wrapper',\n  PANEL: 'per-page-selector-panel',\n  HEADER: 'per-page-selector-header',\n  LIST_WRAPPER: 'per-page-selector-list-wrapper',\n  LIST: 'per-page-selector-list',\n  OPTION: 'per-page-selector-option',\n  OPTION_CHECKMARK: 'per-page-selector-option-checkmark',\n  OPTION_LABEL: 'per-page-selector-option-label',\n} as const;\n\n// we are naming this with the ${component_name}_data_testid convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const PER_PAGE_SELECTOR_DATA_TESTID = {\n  ...slotObjectToDataTestIds(DSPaginationName, PER_PAGE_SELECTOR_SLOTS),\n  // legacy values of the DSDropdownMenuV2 the per page selector used to render: it is now its own widget but QA and\n  //   consumers select on these, so they stay on the equivalent element \u2014 breaking change if removed\n  TRIGGER_WRAPPER: 'dropdown-menu-trigger-wrapper', // wraps the trigger\n  PANEL: 'dropdown-menu-wrapper', // wraps the header and the list (it used to be the focus holder of the open menu)\n  HEADER: 'ds-dropdownmenu-header-wrapper',\n  LIST: 'dropdown-menu-listbox',\n  OPTION: 'ds-menu-item', // one per option\n};\n\n// we are naming this with the ${component_name}_region_focuses convention to namespace & avoid errors on duplicate exports variables in aggregators\n// semantic identities of the focus tracker: never positional, an option is identified by its dsId\nexport const PER_PAGE_SELECTOR_REGION_FOCUSES = {\n  RESET: '',\n  TRIGGER: 'trigger',\n  OPTION_PREFIX: 'option-',\n} as const;\n\n// the rows of the list are fixed height, the virtual list estimate and the panel height are derived from it\nexport const PER_PAGE_SELECTOR_OPTION_HEIGHT = 32;\n// the max height of the whole panel (header + list), same as the previous DSPerPageSelector (measured: header ~17px)\nexport const PER_PAGE_SELECTOR_PANEL_MAX_HEIGHT = 300;\nexport const PER_PAGE_SELECTOR_HEADER_HEIGHT = 17;\n// the previous DSDropdownMenuV2 wrapper always kept 4px of padding below the list, inside the same max height\nexport const PER_PAGE_SELECTOR_PANEL_PADDING_BOTTOM = 4;\n// the width of the open list: labels wrap inside it instead of the list growing to the widest one (that would need every\n// label rendered and measured up front). 100px is what the previous formula gave for numeric labels and for `All`.\n// Overridable with the `listWidth` prop.\nexport const PER_PAGE_SELECTOR_DEFAULT_LIST_WIDTH = 100;\n// the list never gets wider than the viewport minus this margin (reflow at high zoom levels)\nexport const PER_PAGE_SELECTOR_VIEWPORT_MARGIN = 16;\n// APG listbox / select-only combobox: PageUp / PageDown move 10 options\nexport const PER_PAGE_SELECTOR_PAGE_JUMP = 10;\n// characters typed within this window build a single prefix to look for\nexport const PER_PAGE_SELECTOR_TYPEAHEAD_RESET_MS = 1000;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AACxC,SAAS,wBAAwB;AAK1B,MAAM,wBAAwB;AAI9B,MAAM,0BAA0B;AAAA,EACrC,mBAAmB;AAAA;AAAA,EACnB,iBAAiB;AAAA,EACjB,kBAAkB;AAAA,EAClB,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,kBAAkB;AAAA,EAClB,cAAc;AAChB;AAGO,MAAM,gCAAgC;AAAA,EAC3C,GAAG,wBAAwB,kBAAkB,uBAAuB;AAAA;AAAA;AAAA,EAGpE,iBAAiB;AAAA;AAAA,EACjB,OAAO;AAAA;AAAA,EACP,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,QAAQ;AAAA;AACV;AAIO,MAAM,mCAAmC;AAAA,EAC9C,OAAO;AAAA,EACP,SAAS;AAAA,EACT,eAAe;AACjB;AAGO,MAAM,kCAAkC;AAExC,MAAM,qCAAqC;AAC3C,MAAM,kCAAkC;AAExC,MAAM,yCAAyC;AAI/C,MAAM,uCAAuC;AAE7C,MAAM,oCAAoC;AAE1C,MAAM,8BAA8B;AAEpC,MAAM,uCAAuC;",
   "names": []
 }

package/dist/esm/parts/DSPerPageSelector/parts/OptionRenderer.js

@@ -0,0 +1,64 @@
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Checkmark } from "@elliemae/ds-icons";
+import { useCallback, useContext } from "react";
+import { getSelectedOptionIndex } from "../config/getSelectedOptionIndex.js";
+import { getOptionRegionId } from "../config/useFocusTracker.js";
+import { PER_PAGE_SELECTOR_DATA_TESTID } from "../constants/index.js";
+import { DSPerPageSelectorContext } from "../DSPerPageSelectorCTX.js";
+import { StyledOption, StyledOptionCheckmark, StyledOptionLabel } from "../styled.js";
+const OptionRenderer = ({ index }) => {
+  const {
+    propsWithDefault: { pageSize },
+    ownerPropsConfig: { getOwnerProps },
+    options,
+    chevronWidth,
+    focusTrackers: { focusRegion, trackFocusOption },
+    commitOption
+  } = useContext(DSPerPageSelectorContext);
+  const option = options[index];
+  const isSelected = getSelectedOptionIndex(options, pageSize) === index;
+  const isFocusTarget = focusRegion === getOptionRegionId(option.dsId);
+  const handleRef = useCallback(
+    (node) => {
+      if (node && isFocusTarget) node.focus();
+    },
+    [isFocusTarget]
+  );
+  const handleFocus = useCallback(() => trackFocusOption(option.dsId), [option.dsId, trackFocusOption]);
+  const handleClick = useCallback(() => commitOption(option), [commitOption, option]);
+  const getOwnerPropsArguments = useCallback(() => ({ option, isSelected }), [option, isSelected]);
+  return /* @__PURE__ */ jsxs(
+    StyledOption,
+    {
+      "data-testid": PER_PAGE_SELECTOR_DATA_TESTID.OPTION,
+      role: "option",
+      "aria-selected": isSelected,
+      "aria-setsize": options.length,
+      "aria-posinset": index + 1,
+      tabIndex: isFocusTarget ? 0 : -1,
+      innerRef: handleRef,
+      onFocus: handleFocus,
+      onClick: handleClick,
+      style: { gridTemplateColumns: `${chevronWidth}px auto` },
+      getOwnerProps,
+      getOwnerPropsArguments,
+      children: [
+        /* @__PURE__ */ jsx(
+          StyledOptionCheckmark,
+          {
+            "aria-hidden": "true",
+            getOwnerProps,
+            getOwnerPropsArguments,
+            children: isSelected ? /* @__PURE__ */ jsx(Checkmark, { size: "s", color: ["brand-primary", "600"] }) : null
+          }
+        ),
+        /* @__PURE__ */ jsx(StyledOptionLabel, { getOwnerProps, getOwnerPropsArguments, children: option.label })
+      ]
+    }
+  );
+};
+export {
+  OptionRenderer
+};
+//# sourceMappingURL=OptionRenderer.js.map