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

package/dist/cjs/parts/DSPaginator/config/usePaginator.js

@@ -34,11 +34,15 @@ module.exports = __toCommonJS(usePaginator_exports);
 var React = __toESM(require("react"));
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 var import_react = __toESM(require("react"));
+var import_uid = require("uid");
 var import_react_desc_prop_types = require("../react-desc-prop-types.js");
+var import_getAmountOfPages = require("./getAmountOfPages.js");
+var import_getInstanceIds = require("./getInstanceIds.js");
+var import_useFocusTracker = require("./useFocusTracker.js");
+var import_usePaginatorFloatingContext = require("./usePaginatorFloatingContext.js");
+var import_usePaginatorInteractions = require("./usePaginatorInteractions.js");
+var import_usePaginatorSizing = require("./usePaginatorSizing.js");
 var import_useValidateProps = require("./useValidateProps.js");
-var import_useOnElementOnResize = require("../../shared/useOnElementOnResize.js");
-var import_getOptions = require("./getOptions.js");
-var import_usePaginationSearch = require("./usePaginationSearch.js");
 const usePaginator = (propsFromUser) => {
   const propsWithDefault = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(propsFromUser, import_react_desc_prop_types.defaultProps);
   (0, import_useValidateProps.useValidateProps)(propsWithDefault, import_react_desc_prop_types.DSPaginatorPropTypesSchema);
@@ -47,66 +51,86 @@ const usePaginator = (propsFromUser) => {
     propsWithDefault
   );
   const ownerPropsConfig = (0, import_ds_props_helpers.useOwnerProps)(propsWithDefault);
-  const { pageIndex, pageCount, pageDetails } = propsWithDefault;
-  const [isOpened, setIsOpened] = (0, import_react.useState)(false);
-  const btnRef = (0, import_react.useRef)(null);
-  const actionRef = (0, import_react.useRef)({});
-  const widestChildRef = import_react.default.useRef(null);
-  const pageInfoRef = import_react.default.useRef(null);
-  const checkMarkRef = (0, import_react.useRef)(null);
-  const { width: btnWidth } = (0, import_useOnElementOnResize.useOnElementResize)(btnRef);
-  const { width: checkMarkWidth } = (0, import_useOnElementOnResize.useOnElementResize)(checkMarkRef);
-  const { width: pageInfoWidth } = (0, import_useOnElementOnResize.useOnElementResize)(pageInfoRef);
-  const { width: detailWidth } = (0, import_useOnElementOnResize.useOnElementResize)(widestChildRef);
-  const options = (0, import_react.useMemo)(
-    () => (0, import_getOptions.getOptions)({ pageCount, pageIndex, pageDetails, pageInfoWidth, checkMarkWidth }),
-    [pageCount, pageIndex, pageDetails, pageInfoWidth, checkMarkWidth]
+  const { pageIndex, pageCount, pageDetails, listWidth } = propsWithDefault;
+  const instanceUid = (0, import_react.useMemo)(() => (0, import_uid.uid)(5), []);
+  const [isOpen, setIsOpen] = (0, import_react.useState)(false);
+  const amountOfPages = (0, import_getAmountOfPages.getAmountOfPages)(pageCount, pageIndex);
+  const triggerRef = (0, import_react.useRef)(null);
+  const chevronRef = (0, import_react.useRef)(null);
+  const pageInfoRef = (0, import_react.useRef)(null);
+  const listActionRef = (0, import_react.useRef)({});
+  const sizing = (0, import_usePaginatorSizing.usePaginatorSizing)({
+    pageCount,
+    pageIndex,
+    pageDetails,
+    listWidth,
+    chevronRef,
+    pageInfoRef,
+    listActionRef
+  });
+  const focusTrackers = (0, import_useFocusTracker.useFocusTracker)({ amountOfPages, pageIndex });
+  const { floatingStyles, floatingContext, handleTriggerRef, floatingInnerRef, floatingNodeRef } = (0, import_usePaginatorFloatingContext.usePaginatorFloatingContext)({
+    isOpen,
+    setIsOpen,
+    triggerRef,
+    trackFocusRegionReset: focusTrackers.trackFocusRegionReset,
+    chevronWidth: sizing.chevronWidth
+  });
+  const interactions = (0, import_usePaginatorInteractions.usePaginatorInteractions)({
+    propsWithDefault,
+    globalAttributes,
+    isOpen,
+    setIsOpen,
+    amountOfPages,
+    focusTrackers,
+    triggerRef,
+    floatingNodeRef,
+    listActionRef
+  });
+  const ids = (0, import_react.useMemo)(
+    () => ({
+      headerId: (0, import_getInstanceIds.getHeaderId)(instanceUid),
+      listId: (0, import_getInstanceIds.getListId)(instanceUid),
+      dialogId: (0, import_getInstanceIds.getDialogId)(instanceUid)
+    }),
+    [instanceUid]
   );
-  const onKeyDown = (0, import_usePaginationSearch.usePaginationSearch)(pageCount, actionRef);
-  (0, import_react.useEffect)(() => {
-    if (isOpened) {
-      actionRef.current.setActiveDescendant(pageIndex.toString());
-      actionRef.current.scrollOptionIntoView(pageIndex.toString());
-    }
-  }, [isOpened]);
   return import_react.default.useMemo(
     () => ({
       propsWithDefault,
       xstyledProps,
       globalAttributes,
       ownerPropsConfig,
-      btnRef,
-      btnWidth,
-      pageInfoWidth,
+      isOpen,
+      amountOfPages,
+      focusTrackers,
+      triggerRef,
+      chevronRef,
       pageInfoRef,
-      options,
-      isOpened,
-      detailWidth,
-      actionRef,
-      widestChildRef,
-      checkMarkRef,
-      checkMarkWidth,
-      setIsOpened,
-      onKeyDown
+      listActionRef,
+      floatingStyles,
+      floatingContext,
+      handleTriggerRef,
+      floatingInnerRef,
+      ...sizing,
+      ...ids,
+      ...interactions
     }),
     [
       propsWithDefault,
       xstyledProps,
       globalAttributes,
       ownerPropsConfig,
-      btnRef,
-      btnWidth,
-      pageInfoWidth,
-      options,
-      isOpened,
-      detailWidth,
-      actionRef,
-      widestChildRef,
-      checkMarkRef,
-      checkMarkWidth,
-      pageInfoRef,
-      setIsOpened,
-      onKeyDown
+      isOpen,
+      amountOfPages,
+      focusTrackers,
+      floatingStyles,
+      floatingContext,
+      handleTriggerRef,
+      floatingInnerRef,
+      sizing,
+      ids,
+      interactions
     ]
   );
 };

package/dist/cjs/parts/DSPaginator/config/usePaginator.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/parts/DSPaginator/config/usePaginator.ts", "../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-statements */\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 { DSButtonV3T } from '@elliemae/ds-button-v2';\nimport { type DSPaginatorT, DSPaginatorPropTypesSchema, defaultProps } from '../react-desc-prop-types.js';\nimport { useValidateProps } from './useValidateProps.js';\nimport { useOnElementResize } from '../../shared/useOnElementOnResize.js';\nimport { getOptions } from './getOptions.js';\nimport { usePaginationSearch } from './usePaginationSearch.js';\n\nexport const usePaginator = (propsFromUser: DSPaginatorT.Props) => {\n  // =============================================================================\n  // MERGE WITH DEFAULT AND VALIDATE PROPS\n  // =============================================================================\n  const propsWithDefault = useMemoMergePropsWithDefault<DSPaginatorT.InternalProps>(propsFromUser, defaultProps);\n  useValidateProps(propsWithDefault, DSPaginatorPropTypesSchema);\n  // =============================================================================\n  // XSTYLED PROPS\n  // =============================================================================\n  const xstyledProps = useGetXstyledProps(propsWithDefault);\n  // =============================================================================\n  // GLOBAL ATTRIBUTES\n  // =============================================================================\n  const globalAttributes = useGetGlobalAttributes<DSPaginatorT.InternalProps, HTMLButtonElement, DSButtonV3T.Props>(\n    propsWithDefault,\n  );\n  // =============================================================================\n  // OWNER PROPS\n  // =============================================================================\n  const ownerPropsConfig = useOwnerProps(propsWithDefault);\n  // =============================================================================\n  // AD HOC PER COMPONENT LOGIC\n  // =============================================================================\n\n  const { pageIndex, pageCount, pageDetails } = propsWithDefault;\n\n  const [isOpened, setIsOpened] = useState(false);\n\n  const btnRef = useRef<HTMLButtonElement>(null);\n  const actionRef = useRef<Record<string, (dsId: string) => void>>({});\n  const widestChildRef = React.useRef<HTMLDivElement | null>(null);\n  const pageInfoRef = React.useRef<HTMLDivElement | null>(null);\n  const checkMarkRef = useRef<HTMLDivElement>(null);\n\n  // btnWidth is used to calculate dropdown min-width when pageDetails are provided\n  const { width: btnWidth } = useOnElementResize(btnRef);\n\n  // checkMarkWidth is used to calculate dropdown offset so, when opening the dropdown,\n  // selected page is aligned properly with the available options.\n  // It is also used to calculate paginatorHeader and options custom render.\n  const { width: checkMarkWidth } = useOnElementResize(checkMarkRef);\n  // pageInfoWidth is used to calculate dropdown min-width when pageDetails are provided on segmented pagination\n  // pageInfoWidth || detailWidth\n  const { width: pageInfoWidth } = useOnElementResize(pageInfoRef);\n  // detailWidth is used to calculate dropdown min-width when pageDetails are provided on segmented pagination\n  // pageInfoWidth || detailWidth\n  const { width: detailWidth } = useOnElementResize(widestChildRef);\n  const options = useMemo(\n    () => getOptions({ pageCount, pageIndex, pageDetails, pageInfoWidth, checkMarkWidth }),\n    [pageCount, pageIndex, pageDetails, pageInfoWidth, checkMarkWidth],\n  );\n  // =============================================================================\n  // HELPERS HOOKS CONFIGS\n  // =============================================================================\n  // const eventHandlers = useEventHandlers({ propsWithDefault, instanceUid }); // <-- complex logic should be made atomics this way\n  const onKeyDown = usePaginationSearch(pageCount, actionRef);\n\n  useEffect(() => {\n    if (isOpened) {\n      actionRef.current.setActiveDescendant(pageIndex.toString());\n      actionRef.current.scrollOptionIntoView(pageIndex.toString());\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isOpened]);\n\n  return React.useMemo(\n    () => ({\n      propsWithDefault,\n      xstyledProps,\n      globalAttributes,\n      ownerPropsConfig,\n      btnRef,\n      btnWidth,\n      pageInfoWidth,\n      pageInfoRef,\n      options,\n      isOpened,\n      detailWidth,\n      actionRef,\n      widestChildRef,\n      checkMarkRef,\n      checkMarkWidth,\n      setIsOpened,\n      onKeyDown,\n    }),\n    [\n      propsWithDefault,\n      xstyledProps,\n      globalAttributes,\n      ownerPropsConfig,\n      btnRef,\n      btnWidth,\n      pageInfoWidth,\n      options,\n      isOpened,\n      detailWidth,\n      actionRef,\n      widestChildRef,\n      checkMarkRef,\n      checkMarkWidth,\n      pageInfoRef,\n      setIsOpened,\n      onKeyDown,\n    ],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,8BAKO;AACP,mBAA4D;AAG5D,mCAA4E;AAC5E,8BAAiC;AACjC,kCAAmC;AACnC,wBAA2B;AAC3B,iCAAoC;AAE7B,MAAM,eAAe,CAAC,kBAAsC;AAIjE,QAAM,uBAAmB,sDAAyD,eAAe,yCAAY;AAC7G,gDAAiB,kBAAkB,uDAA0B;AAI7D,QAAM,mBAAe,4CAAmB,gBAAgB;AAIxD,QAAM,uBAAmB;AAAA,IACvB;AAAA,EACF;AAIA,QAAM,uBAAmB,uCAAc,gBAAgB;AAKvD,QAAM,EAAE,WAAW,WAAW,YAAY,IAAI;AAE9C,QAAM,CAAC,UAAU,WAAW,QAAI,uBAAS,KAAK;AAE9C,QAAM,aAAS,qBAA0B,IAAI;AAC7C,QAAM,gBAAY,qBAA+C,CAAC,CAAC;AACnE,QAAM,iBAAiB,aAAAA,QAAM,OAA8B,IAAI;AAC/D,QAAM,cAAc,aAAAA,QAAM,OAA8B,IAAI;AAC5D,QAAM,mBAAe,qBAAuB,IAAI;AAGhD,QAAM,EAAE,OAAO,SAAS,QAAI,gDAAmB,MAAM;AAKrD,QAAM,EAAE,OAAO,eAAe,QAAI,gDAAmB,YAAY;AAGjE,QAAM,EAAE,OAAO,cAAc,QAAI,gDAAmB,WAAW;AAG/D,QAAM,EAAE,OAAO,YAAY,QAAI,gDAAmB,cAAc;AAChE,QAAM,cAAU;AAAA,IACd,UAAM,8BAAW,EAAE,WAAW,WAAW,aAAa,eAAe,eAAe,CAAC;AAAA,IACrF,CAAC,WAAW,WAAW,aAAa,eAAe,cAAc;AAAA,EACnE;AAKA,QAAM,gBAAY,gDAAoB,WAAW,SAAS;AAE1D,8BAAU,MAAM;AACd,QAAI,UAAU;AACZ,gBAAU,QAAQ,oBAAoB,UAAU,SAAS,CAAC;AAC1D,gBAAU,QAAQ,qBAAqB,UAAU,SAAS,CAAC;AAAA,IAC7D;AAAA,EAEF,GAAG,CAAC,QAAQ,CAAC;AAEb,SAAO,aAAAA,QAAM;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;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,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
+  "sourcesContent": ["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 { DSPaginatorPropTypesSchema, defaultProps, type DSPaginatorT } from '../react-desc-prop-types.js';\nimport { getAmountOfPages } from './getAmountOfPages.js';\nimport { getDialogId, getHeaderId, getListId } from './getInstanceIds.js';\nimport { useFocusTracker } from './useFocusTracker.js';\nimport { usePaginatorFloatingContext } from './usePaginatorFloatingContext.js';\nimport { usePaginatorInteractions } from './usePaginatorInteractions.js';\nimport { usePaginatorSizing } from './usePaginatorSizing.js';\nimport { useValidateProps } from './useValidateProps.js';\n\nexport const usePaginator = (propsFromUser: DSPaginatorT.Props) => {\n  // =============================================================================\n  // MERGE WITH DEFAULT AND VALIDATE PROPS\n  // =============================================================================\n  const propsWithDefault = useMemoMergePropsWithDefault<DSPaginatorT.InternalProps>(propsFromUser, defaultProps);\n  useValidateProps(propsWithDefault, DSPaginatorPropTypesSchema);\n  // =============================================================================\n  // XSTYLED PROPS\n  // =============================================================================\n  const xstyledProps = useGetXstyledProps(propsWithDefault);\n  // =============================================================================\n  // GLOBAL ATTRIBUTES\n  // =============================================================================\n  const globalAttributes = useGetGlobalAttributes<DSPaginatorT.InternalProps, HTMLButtonElement, DSButtonV3T.Props>(\n    propsWithDefault,\n  );\n  // =============================================================================\n  // OWNER PROPS\n  // =============================================================================\n  const ownerPropsConfig = useOwnerProps(propsWithDefault);\n  // =============================================================================\n  // AD HOC PER COMPONENT LOGIC\n  // =============================================================================\n  const { pageIndex, pageCount, pageDetails, listWidth } = propsWithDefault;\n  const instanceUid = useMemo(() => uid(5), []);\n  const [isOpen, setIsOpen] = useState(false);\n  const amountOfPages = getAmountOfPages(pageCount, pageIndex);\n\n  const triggerRef = useRef<HTMLButtonElement | null>(null);\n  const chevronRef = useRef<HTMLElement>(null);\n  const pageInfoRef = useRef<HTMLDivElement>(null);\n  const listActionRef = useRef<DSFastListT.ActionRef>({});\n\n  const sizing = usePaginatorSizing({\n    pageCount,\n    pageIndex,\n    pageDetails,\n    listWidth,\n    chevronRef,\n    pageInfoRef,\n    listActionRef,\n  });\n\n  const focusTrackers = useFocusTracker({ amountOfPages, pageIndex });\n\n  const { floatingStyles, floatingContext, handleTriggerRef, floatingInnerRef, floatingNodeRef } =\n    usePaginatorFloatingContext({\n      isOpen,\n      setIsOpen,\n      triggerRef,\n      trackFocusRegionReset: focusTrackers.trackFocusRegionReset,\n      chevronWidth: sizing.chevronWidth,\n    });\n\n  const interactions = usePaginatorInteractions({\n    propsWithDefault,\n    globalAttributes,\n    isOpen,\n    setIsOpen,\n    amountOfPages,\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      amountOfPages,\n      focusTrackers,\n      triggerRef,\n      chevronRef,\n      pageInfoRef,\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      amountOfPages,\n      focusTrackers,\n      floatingStyles,\n      floatingContext,\n      handleTriggerRef,\n      floatingInnerRef,\n      sizing,\n      ids,\n      interactions,\n    ],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,8BAKO;AACP,mBAAiD;AACjD,iBAAoB;AACpB,mCAA4E;AAC5E,8BAAiC;AACjC,4BAAoD;AACpD,6BAAgC;AAChC,yCAA4C;AAC5C,sCAAyC;AACzC,gCAAmC;AACnC,8BAAiC;AAE1B,MAAM,eAAe,CAAC,kBAAsC;AAIjE,QAAM,uBAAmB,sDAAyD,eAAe,yCAAY;AAC7G,gDAAiB,kBAAkB,uDAA0B;AAI7D,QAAM,mBAAe,4CAAmB,gBAAgB;AAIxD,QAAM,uBAAmB;AAAA,IACvB;AAAA,EACF;AAIA,QAAM,uBAAmB,uCAAc,gBAAgB;AAIvD,QAAM,EAAE,WAAW,WAAW,aAAa,UAAU,IAAI;AACzD,QAAM,kBAAc,sBAAQ,UAAM,gBAAI,CAAC,GAAG,CAAC,CAAC;AAC5C,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAS,KAAK;AAC1C,QAAM,oBAAgB,0CAAiB,WAAW,SAAS;AAE3D,QAAM,iBAAa,qBAAiC,IAAI;AACxD,QAAM,iBAAa,qBAAoB,IAAI;AAC3C,QAAM,kBAAc,qBAAuB,IAAI;AAC/C,QAAM,oBAAgB,qBAA8B,CAAC,CAAC;AAEtD,QAAM,aAAS,8CAAmB;AAAA,IAChC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,oBAAgB,wCAAgB,EAAE,eAAe,UAAU,CAAC;AAElE,QAAM,EAAE,gBAAgB,iBAAiB,kBAAkB,kBAAkB,gBAAgB,QAC3F,gEAA4B;AAAA,IAC1B;AAAA,IACA;AAAA,IACA;AAAA,IACA,uBAAuB,cAAc;AAAA,IACrC,cAAc,OAAO;AAAA,EACvB,CAAC;AAEH,QAAM,mBAAe,0DAAyB;AAAA,IAC5C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,UAAM;AAAA,IACV,OAAO;AAAA,MACL,cAAU,mCAAY,WAAW;AAAA,MACjC,YAAQ,iCAAU,WAAW;AAAA,MAC7B,cAAU,mCAAY,WAAW;AAAA,IACnC;AAAA,IACA,CAAC,WAAW;AAAA,EACd;AAEA,SAAO,aAAAA,QAAM;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;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/cjs/parts/DSPaginator/config/usePaginatorFloatingContext.js

@@ -0,0 +1,86 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var usePaginatorFloatingContext_exports = {};
+__export(usePaginatorFloatingContext_exports, {
+  usePaginatorFloatingContext: () => usePaginatorFloatingContext
+});
+module.exports = __toCommonJS(usePaginatorFloatingContext_exports);
+var React = __toESM(require("react"));
+var import_ds_floating_context = require("@elliemae/ds-floating-context");
+var import_react = require("react");
+const usePaginatorFloatingContext = ({
+  isOpen,
+  setIsOpen,
+  triggerRef,
+  trackFocusRegionReset,
+  chevronWidth
+}) => {
+  const floatingNodeRef = (0, import_react.useRef)(null);
+  const handleClickOutside = (0, import_react.useCallback)(() => {
+    setIsOpen(false);
+    trackFocusRegionReset();
+  }, [setIsOpen, trackFocusRegionReset]);
+  const handleScopedEscape = (0, import_react.useCallback)(() => {
+    setIsOpen(false);
+    trackFocusRegionReset();
+  }, [setIsOpen, trackFocusRegionReset]);
+  const floatingContextConfig = (0, import_react.useMemo)(
+    () => ({
+      // the existing DSPaginator opens upwards (it lives in a footer) and aligns the selected page with the trigger
+      placement: "top-start",
+      placementOrderPreference: ["top-start", "bottom-start"],
+      customOffset: [-(chevronWidth + 7), 2],
+      externallyControlledIsOpen: isOpen,
+      withoutAnimation: true,
+      onClickOutside: handleClickOutside,
+      closeOnEscape: true,
+      onEscape: handleScopedEscape,
+      returnFocusToReference: true,
+      externalReferenceElement: triggerRef.current
+    }),
+    [chevronWidth, handleClickOutside, handleScopedEscape, isOpen, triggerRef]
+  );
+  const { refs: floatingRefs, floatingStyles, context: floatingContext } = (0, import_ds_floating_context.useFloatingContext)(floatingContextConfig);
+  const handleTriggerRef = (0, import_react.useCallback)(
+    (node) => {
+      triggerRef.current = node;
+      floatingRefs.setReference(node);
+    },
+    [floatingRefs, triggerRef]
+  );
+  const floatingInnerRef = (0, import_react.useCallback)(
+    (node) => {
+      floatingNodeRef.current = node;
+      floatingRefs.setFloating(node);
+    },
+    [floatingRefs.setFloating]
+  );
+  return { floatingStyles, floatingContext, handleTriggerRef, floatingInnerRef, floatingNodeRef };
+};
+//# sourceMappingURL=usePaginatorFloatingContext.js.map

package/dist/cjs/parts/DSPaginator/config/usePaginatorFloatingContext.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/parts/DSPaginator/config/usePaginatorFloatingContext.ts", "../../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["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 DSPaginator to `useFloatingContext` (same shape as ds-app-picker'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 usePaginatorInteractions.\n */\nexport const usePaginatorFloatingContext = ({\n  isOpen,\n  setIsOpen,\n  triggerRef,\n  trackFocusRegionReset,\n  chevronWidth,\n}: FloatingContextConfigT) => {\n  const floatingNodeRef = useRef<HTMLDivElement | null>(null);\n\n  const handleClickOutside = useCallback(() => {\n    setIsOpen(false);\n    trackFocusRegionReset();\n  }, [setIsOpen, trackFocusRegionReset]);\n\n  const handleScopedEscape = useCallback(() => {\n    setIsOpen(false);\n    trackFocusRegionReset();\n  }, [setIsOpen, trackFocusRegionReset]);\n\n  const floatingContextConfig = useMemo(\n    () =>\n      ({\n        // the existing DSPaginator opens upwards (it lives in a footer) and aligns the selected page 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: handleClickOutside,\n        closeOnEscape: true,\n        onEscape: handleScopedEscape,\n        returnFocusToReference: true,\n        externalReferenceElement: triggerRef.current,\n      }) as DSHookFloatingContextT.Props,\n    [chevronWidth, handleClickOutside, handleScopedEscape, 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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,iCAAgE;AAEhE,mBAA6C;AAoBtC,MAAM,8BAA8B,CAAC;AAAA,EAC1C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA8B;AAC5B,QAAM,sBAAkB,qBAA8B,IAAI;AAE1D,QAAM,yBAAqB,0BAAY,MAAM;AAC3C,cAAU,KAAK;AACf,0BAAsB;AAAA,EACxB,GAAG,CAAC,WAAW,qBAAqB,CAAC;AAErC,QAAM,yBAAqB,0BAAY,MAAM;AAC3C,cAAU,KAAK;AACf,0BAAsB;AAAA,EACxB,GAAG,CAAC,WAAW,qBAAqB,CAAC;AAErC,QAAM,4BAAwB;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,oBAAoB,oBAAoB,QAAQ,UAAU;AAAA,EAC3E;AAEA,QAAM,EAAE,MAAM,cAAc,gBAAgB,SAAS,gBAAgB,QAAI,+CAAmB,qBAAqB;AAEjH,QAAM,uBAAmB;AAAA,IACvB,CAAC,SAAS;AAER,iBAAW,UAAU;AACrB,mBAAa,aAAa,IAAI;AAAA,IAChC;AAAA,IACA,CAAC,cAAc,UAAU;AAAA,EAC3B;AAEA,QAAM,uBAAmB;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/cjs/parts/DSPaginator/config/usePaginatorInteractions.js

@@ -0,0 +1,170 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var usePaginatorInteractions_exports = {};
+__export(usePaginatorInteractions_exports, {
+  usePaginatorInteractions: () => usePaginatorInteractions
+});
+module.exports = __toCommonJS(usePaginatorInteractions_exports);
+var React = __toESM(require("react"));
+var import_react = require("react");
+var import_constants = require("../constants/index.js");
+var import_navigationKeys = require("./navigationKeys.js");
+const DIGIT_REGEXP = /^[0-9]$/;
+const usePaginatorInteractions = ({
+  propsWithDefault,
+  globalAttributes,
+  isOpen,
+  setIsOpen,
+  amountOfPages,
+  focusTrackers,
+  triggerRef,
+  floatingNodeRef,
+  listActionRef
+}) => {
+  const { pageIndex, pageCount, onPageChange } = propsWithDefault;
+  const {
+    focusedPage,
+    clampPage,
+    trackFocusOption,
+    trackFocusSelectedOption,
+    trackFocusTrigger,
+    trackFocusRegionReset
+  } = focusTrackers;
+  const typeaheadRef = (0, import_react.useRef)({ buffer: "", lastKeyTimestamp: 0 });
+  const moveFocusToPage = (0, import_react.useCallback)(
+    (page) => {
+      const targetPage = clampPage(page);
+      trackFocusOption(targetPage);
+      listActionRef.current.scrollTo?.(targetPage - 1, { align: "auto" });
+    },
+    [clampPage, listActionRef, trackFocusOption]
+  );
+  const commitPage = (0, import_react.useCallback)(
+    (page) => {
+      if (page !== pageIndex) onPageChange(page);
+      setIsOpen(false);
+      trackFocusTrigger();
+    },
+    [onPageChange, pageIndex, setIsOpen, trackFocusTrigger]
+  );
+  const handleTriggerClick = (0, import_react.useCallback)(
+    (e) => {
+      globalAttributes.onClick?.(e);
+      if (isOpen) {
+        setIsOpen(false);
+        trackFocusTrigger();
+        return;
+      }
+      if (amountOfPages === 0) return;
+      setIsOpen(true);
+      trackFocusSelectedOption();
+    },
+    [amountOfPages, globalAttributes.onClick, isOpen, setIsOpen, trackFocusSelectedOption, trackFocusTrigger]
+  );
+  const handleTriggerKeyDown = (0, import_react.useCallback)(
+    (e) => {
+      globalAttributes.onKeyDown?.(e);
+      if (e.key !== "ArrowDown" && e.key !== "ArrowUp") return;
+      if (isOpen || amountOfPages === 0) return;
+      e.preventDefault();
+      setIsOpen(true);
+      trackFocusSelectedOption();
+    },
+    [amountOfPages, globalAttributes.onKeyDown, isOpen, setIsOpen, trackFocusSelectedOption]
+  );
+  const handlePanelKeyDownCapture = (0, import_react.useCallback)(
+    (e) => {
+      if (e.key !== "Tab") return;
+      triggerRef.current?.focus();
+      trackFocusRegionReset();
+      if (focusedPage !== null && focusedPage !== pageIndex) onPageChange(focusedPage);
+      setIsOpen(false);
+    },
+    [focusedPage, onPageChange, pageIndex, setIsOpen, trackFocusRegionReset, triggerRef]
+  );
+  const handleDigitTypeahead = (0, import_react.useCallback)(
+    (digit) => {
+      if (typeof pageCount === "string") return;
+      const now = Date.now();
+      const typeahead = typeaheadRef.current;
+      if (now - typeahead.lastKeyTimestamp > import_constants.PAGINATOR_TYPEAHEAD_RESET_MS) typeahead.buffer = "";
+      typeahead.buffer += digit;
+      typeahead.lastKeyTimestamp = now;
+      const targetPage = Number.parseInt(typeahead.buffer, 10);
+      if (targetPage >= 1 && targetPage <= amountOfPages) moveFocusToPage(targetPage);
+    },
+    [amountOfPages, moveFocusToPage, pageCount]
+  );
+  const handlePanelKeyDown = (0, import_react.useCallback)(
+    (e) => {
+      if (e.ctrlKey || e.metaKey || e.altKey) return;
+      const getTargetPage = import_navigationKeys.NAVIGATION_KEYS[e.key];
+      if (getTargetPage) {
+        e.preventDefault();
+        moveFocusToPage(getTargetPage(focusedPage ?? pageIndex, amountOfPages));
+        return;
+      }
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        if (focusedPage !== null) commitPage(focusedPage);
+        return;
+      }
+      if (DIGIT_REGEXP.test(e.key)) handleDigitTypeahead(e.key);
+    },
+    [amountOfPages, commitPage, focusedPage, handleDigitTypeahead, moveFocusToPage, pageIndex]
+  );
+  const handleBlurOutOfWidget = (0, import_react.useCallback)(
+    (e) => {
+      const nextFocused = e.relatedTarget;
+      if (!nextFocused) return;
+      if (triggerRef.current?.contains(nextFocused) || floatingNodeRef.current?.contains(nextFocused)) return;
+      trackFocusRegionReset();
+    },
+    [floatingNodeRef, trackFocusRegionReset, triggerRef]
+  );
+  return (0, import_react.useMemo)(
+    () => ({
+      commitPage,
+      handleTriggerClick,
+      handleTriggerKeyDown,
+      handlePanelKeyDown,
+      handlePanelKeyDownCapture,
+      handleBlurOutOfWidget
+    }),
+    [
+      commitPage,
+      handleTriggerClick,
+      handleTriggerKeyDown,
+      handlePanelKeyDown,
+      handlePanelKeyDownCapture,
+      handleBlurOutOfWidget
+    ]
+  );
+};
+//# sourceMappingURL=usePaginatorInteractions.js.map

package/dist/cjs/parts/DSPaginator/config/usePaginatorInteractions.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/parts/DSPaginator/config/usePaginatorInteractions.ts", "../../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import type { DSFastListT } from '@elliemae/ds-fast-list';\nimport type React from 'react';\nimport { useCallback, useMemo, useRef } from 'react';\nimport { PAGINATOR_TYPEAHEAD_RESET_MS } from '../constants/index.js';\nimport { NAVIGATION_KEYS } from './navigationKeys.js';\nimport type { DSPaginatorT } from '../react-desc-prop-types.js';\nimport type { useFocusTracker } from './useFocusTracker.js';\n\ntype InteractionsConfigT = {\n  propsWithDefault: DSPaginatorT.InternalProps;\n  globalAttributes: { onClick?: unknown; onKeyDown?: unknown };\n  isOpen: boolean;\n  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;\n  amountOfPages: number;\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 DIGIT_REGEXP = /^[0-9]$/;\n\n/**\n * Every user intent on the trigger and on the list. The selection model is the one of a native select:\n *  - moving through the options (arrows, Home/End, PageUp/PageDown, typing a page number) only moves the focus:\n *    `onPageChange` is NOT invoked while navigating, because committing a page is a costly side effect for a paginator\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 usePaginatorFloatingContext) 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 usePaginatorInteractions = ({\n  propsWithDefault,\n  globalAttributes,\n  isOpen,\n  setIsOpen,\n  amountOfPages,\n  focusTrackers,\n  triggerRef,\n  floatingNodeRef,\n  listActionRef,\n}: InteractionsConfigT) => {\n  const { pageIndex, pageCount, onPageChange } = propsWithDefault;\n  const {\n    focusedPage,\n    clampPage,\n    trackFocusOption,\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 moveFocusToPage = useCallback(\n    (page: number) => {\n      const targetPage = clampPage(page);\n      trackFocusOption(targetPage);\n      listActionRef.current.scrollTo?.(targetPage - 1, { align: 'auto' });\n    },\n    [clampPage, listActionRef, trackFocusOption],\n  );\n\n  const commitPage = useCallback(\n    (page: number) => {\n      if (page !== pageIndex) onPageChange(page);\n      setIsOpen(false);\n      trackFocusTrigger();\n    },\n    [onPageChange, pageIndex, 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 (amountOfPages === 0) return;\n      setIsOpen(true);\n      trackFocusSelectedOption();\n    },\n    [amountOfPages, globalAttributes.onClick, isOpen, setIsOpen, trackFocusSelectedOption, trackFocusTrigger],\n  );\n\n  // ArrowDown / ArrowUp on the trigger open the list (same as the select-only combobox and the 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 || amountOfPages === 0) return;\n      e.preventDefault();\n      setIsOpen(true);\n      trackFocusSelectedOption();\n    },\n    [amountOfPages, globalAttributes.onKeyDown, isOpen, 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 ds-menu-button's `handleMenuTabKeyDownCapture` (see its KNOWN_INTENTIONAL_DEVIATIONS.md).\n   * 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      if (focusedPage !== null && focusedPage !== pageIndex) onPageChange(focusedPage);\n      setIsOpen(false);\n    },\n    [focusedPage, onPageChange, pageIndex, setIsOpen, trackFocusRegionReset, triggerRef],\n  );\n\n  const handleDigitTypeahead = useCallback(\n    (digit: string) => {\n      // an unknown page count (string) only exposes the pages up to the next one: nothing meaningful to type\n      if (typeof pageCount === 'string') return;\n      const now = Date.now();\n      const typeahead = typeaheadRef.current;\n      if (now - typeahead.lastKeyTimestamp > PAGINATOR_TYPEAHEAD_RESET_MS) typeahead.buffer = '';\n      typeahead.buffer += digit;\n      typeahead.lastKeyTimestamp = now;\n      const targetPage = Number.parseInt(typeahead.buffer, 10);\n      if (targetPage >= 1 && targetPage <= amountOfPages) moveFocusToPage(targetPage);\n    },\n    [amountOfPages, moveFocusToPage, pageCount],\n  );\n\n  const handlePanelKeyDown = useCallback(\n    (e: React.KeyboardEvent<HTMLElement>) => {\n      if (e.ctrlKey || e.metaKey || e.altKey) return;\n      const getTargetPage = NAVIGATION_KEYS[e.key];\n      if (getTargetPage) {\n        e.preventDefault(); // the list scrolls through the virtualizer, not through the browser\n        moveFocusToPage(getTargetPage(focusedPage ?? pageIndex, amountOfPages));\n        return;\n      }\n      if (e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault();\n        if (focusedPage !== null) commitPage(focusedPage);\n        return;\n      }\n      if (DIGIT_REGEXP.test(e.key)) handleDigitTypeahead(e.key);\n    },\n    [amountOfPages, commitPage, focusedPage, handleDigitTypeahead, moveFocusToPage, pageIndex],\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      commitPage,\n      handleTriggerClick,\n      handleTriggerKeyDown,\n      handlePanelKeyDown,\n      handlePanelKeyDownCapture,\n      handleBlurOutOfWidget,\n    }),\n    [\n      commitPage,\n      handleTriggerClick,\n      handleTriggerKeyDown,\n      handlePanelKeyDown,\n      handlePanelKeyDownCapture,\n      handleBlurOutOfWidget,\n    ],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/cjs/parts/DSPaginator/config/usePaginatorSizing.js

@@ -0,0 +1,80 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var usePaginatorSizing_exports = {};
+__export(usePaginatorSizing_exports, {
+  usePaginatorSizing: () => usePaginatorSizing
+});
+module.exports = __toCommonJS(usePaginatorSizing_exports);
+var React = __toESM(require("react"));
+var import_react = require("react");
+var import_useOnElementOnResize = require("../../shared/useOnElementOnResize.js");
+var import_constants = require("../constants/index.js");
+const toCssLength = (value) => typeof value === "number" ? `${value}px` : value;
+const usePaginatorSizing = ({
+  pageCount,
+  pageIndex,
+  pageDetails,
+  listWidth,
+  chevronRef,
+  pageInfoRef,
+  listActionRef
+}) => {
+  const { width: chevronWidth } = (0, import_useOnElementOnResize.useOnElementResize)(chevronRef);
+  const { width: pageInfoWidth } = (0, import_useOnElementOnResize.useOnElementResize)(pageInfoRef);
+  const hasDetails = pageDetails.length !== 0;
+  const configuredWidth = (0, import_react.useMemo)(() => {
+    if (listWidth !== void 0) return toCssLength(listWidth);
+    return hasDetails ? `${import_constants.PAGINATOR_DEFAULT_LIST_WIDTH}px` : void 0;
+  }, [hasDetails, listWidth]);
+  const cappedWidth = configuredWidth ? `min(${configuredWidth}, calc(100vw - ${import_constants.PAGINATOR_VIEWPORT_MARGIN}px))` : void 0;
+  const panelStyle = (0, import_react.useMemo)(
+    () => cappedWidth ? { width: cappedWidth } : { minWidth: `calc(${chevronWidth + 60}px + ${pageCount.toString().length}ch)` },
+    [cappedWidth, chevronWidth, pageCount]
+  );
+  const listMaxHeight = import_constants.PAGINATOR_PANEL_MAX_HEIGHT - import_constants.PAGINATOR_HEADER_HEIGHT - import_constants.PAGINATOR_PANEL_PADDING_BOTTOM;
+  const handleListWrapperRef = (0, import_react.useCallback)(
+    (node) => {
+      if (node) listActionRef.current.scrollTo?.(pageIndex - 1, { align: "center" });
+    },
+    [listActionRef, pageIndex]
+  );
+  return (0, import_react.useMemo)(
+    () => ({
+      hasDetails,
+      chevronWidth,
+      pageInfoWidth,
+      panelStyle,
+      detailMaxWidth: cappedWidth,
+      listMaxHeight,
+      handleListWrapperRef
+    }),
+    [hasDetails, chevronWidth, pageInfoWidth, panelStyle, cappedWidth, listMaxHeight, handleListWrapperRef]
+  );
+};
+//# sourceMappingURL=usePaginatorSizing.js.map

package/dist/cjs/parts/DSPaginator/config/usePaginatorSizing.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/parts/DSPaginator/config/usePaginatorSizing.ts", "../../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["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  PAGINATOR_DEFAULT_LIST_WIDTH,\n  PAGINATOR_HEADER_HEIGHT,\n  PAGINATOR_PANEL_MAX_HEIGHT,\n  PAGINATOR_PANEL_PADDING_BOTTOM,\n  PAGINATOR_VIEWPORT_MARGIN,\n} from '../constants/index.js';\n\ntype SizingConfigT = {\n  pageCount: number | string;\n  pageIndex: number;\n  pageDetails: string[] | readonly string[];\n  listWidth?: number | string;\n  chevronRef: React.RefObject<HTMLElement>;\n  pageInfoRef: React.RefObject<HTMLDivElement>;\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.\n *  - with `pageDetails` (or when the consumer passes `listWidth`) the list is `listWidth` wide (280px by default), never wider\n *    than the viewport, and the details WRAP inside it. Nothing here renders or measures every detail: that would be O(n) hidden\n *    components just to size the list to the widest detail, and it forced a one-line (truncating) design.\n *  - without details the list is as wide as its page numbers need (the previous formula: chevron + 60px + the digits of the\n *    page count in `ch`), plain CSS.\n * The trigger does not reserve the width of the widest detail either: it follows the detail of the current page.\n */\nexport const usePaginatorSizing = ({\n  pageCount,\n  pageIndex,\n  pageDetails,\n  listWidth,\n  chevronRef,\n  pageInfoRef,\n  listActionRef,\n}: SizingConfigT) => {\n  const { width: chevronWidth } = useOnElementResize(chevronRef);\n  const { width: pageInfoWidth } = useOnElementResize(pageInfoRef);\n  const hasDetails = pageDetails.length !== 0;\n\n  const configuredWidth = useMemo(() => {\n    if (listWidth !== undefined) return toCssLength(listWidth);\n    return hasDetails ? `${PAGINATOR_DEFAULT_LIST_WIDTH}px` : undefined;\n  }, [hasDetails, listWidth]);\n  const cappedWidth = configuredWidth\n    ? `min(${configuredWidth}, calc(100vw - ${PAGINATOR_VIEWPORT_MARGIN}px))`\n    : undefined;\n  const panelStyle = useMemo(\n    () =>\n      cappedWidth\n        ? { width: cappedWidth }\n        : { minWidth: `calc(${chevronWidth + 60}px + ${pageCount.toString().length}ch)` },\n    [cappedWidth, chevronWidth, pageCount],\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 = PAGINATOR_PANEL_MAX_HEIGHT - PAGINATOR_HEADER_HEIGHT - PAGINATOR_PANEL_PADDING_BOTTOM;\n\n  /*\n   * The virtual list mounts at scroll offset 0, but the selected page (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 (measured: a\n   * `scrollTop` set when the container mounts is overwritten with 0). So the list is told to scroll once it is bound:\n   * React attaches the ref callbacks child first, so this one, on the element that wraps the list, runs after the list's\n   * own layout effects (no effect, no timer). The selected option then mounts in range and focuses itself (focus tracker).\n   * The callback changes only when `pageIndex` changes, which closes the list.\n   */\n  const handleListWrapperRef = useCallback(\n    (node: HTMLDivElement | null) => {\n      if (node) listActionRef.current.scrollTo?.(pageIndex - 1, { align: 'center' });\n    },\n    [listActionRef, pageIndex],\n  );\n\n  return useMemo(\n    () => ({\n      hasDetails,\n      chevronWidth,\n      pageInfoWidth,\n      panelStyle,\n      detailMaxWidth: cappedWidth,\n      listMaxHeight,\n      handleListWrapperRef,\n    }),\n    [hasDetails, chevronWidth, pageInfoWidth, panelStyle, cappedWidth, listMaxHeight, handleListWrapperRef],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,mBAAqC;AACrC,kCAAmC;AACnC,uBAMO;AAYP,MAAM,cAAc,CAAC,UAA4B,OAAO,UAAU,WAAW,GAAG,KAAK,OAAO;AAYrF,MAAM,qBAAqB,CAAC;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAqB;AACnB,QAAM,EAAE,OAAO,aAAa,QAAI,gDAAmB,UAAU;AAC7D,QAAM,EAAE,OAAO,cAAc,QAAI,gDAAmB,WAAW;AAC/D,QAAM,aAAa,YAAY,WAAW;AAE1C,QAAM,sBAAkB,sBAAQ,MAAM;AACpC,QAAI,cAAc,OAAW,QAAO,YAAY,SAAS;AACzD,WAAO,aAAa,GAAG,6CAA4B,OAAO;AAAA,EAC5D,GAAG,CAAC,YAAY,SAAS,CAAC;AAC1B,QAAM,cAAc,kBAChB,OAAO,eAAe,kBAAkB,0CAAyB,SACjE;AACJ,QAAM,iBAAa;AAAA,IACjB,MACE,cACI,EAAE,OAAO,YAAY,IACrB,EAAE,UAAU,QAAQ,eAAe,EAAE,QAAQ,UAAU,SAAS,EAAE,MAAM,MAAM;AAAA,IACpF,CAAC,aAAa,cAAc,SAAS;AAAA,EACvC;AAEA,QAAM,gBAAgB,8CAA6B,2CAA0B;AAU7E,QAAM,2BAAuB;AAAA,IAC3B,CAAC,SAAgC;AAC/B,UAAI,KAAM,eAAc,QAAQ,WAAW,YAAY,GAAG,EAAE,OAAO,SAAS,CAAC;AAAA,IAC/E;AAAA,IACA,CAAC,eAAe,SAAS;AAAA,EAC3B;AAEA,aAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,gBAAgB;AAAA,MAChB;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,YAAY,cAAc,eAAe,YAAY,aAAa,eAAe,oBAAoB;AAAA,EACxG;AACF;",
+  "names": []
+}

package/dist/cjs/parts/DSPaginator/config/useValidateProps.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/parts/DSPaginator/config/useValidateProps.ts", "../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport type { ValidationMap } from '@elliemae/ds-props-helpers';\nimport { type DSPaginatorT } from '../react-desc-prop-types.js';\nimport { DSPaginatorName } from '../constants/index.js';\n\nexport const useValidateProps = (\n  props: DSPaginatorT.InternalProps,\n  propTypes: ValidationMap<DSPaginatorT.Props>,\n): void => {\n  // we validate the \"required if\" via 'isRequiredIf from our custom PropTypes\n  useValidateTypescriptPropTypes(props, propTypes, DSPaginatorName);\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAA+C;AAG/C,uBAAgC;AAEzB,MAAM,mBAAmB,CAC9B,OACA,cACS;AAET,8DAA+B,OAAO,WAAW,gCAAe;AAClE;",
+  "sourcesContent": ["import { useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport type { ValidationMap } from '@elliemae/ds-props-helpers';\nimport { type DSPaginatorT } from '../react-desc-prop-types.js';\nimport { DSPaginatorName } from '../constants/index.js';\n\nexport const useValidateProps = (\n  props: DSPaginatorT.InternalProps,\n  propTypes: ValidationMap<DSPaginatorT.Props>,\n): void => {\n  useValidateTypescriptPropTypes(props, propTypes, DSPaginatorName);\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAA+C;AAG/C,uBAAgC;AAEzB,MAAM,mBAAmB,CAC9B,OACA,cACS;AACT,8DAA+B,OAAO,WAAW,gCAAe;AAClE;",
   "names": []
 }