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

package/dist/cjs/parts/DSPerPageSelector/config/navigationKeys.js

@@ -0,0 +1,44 @@
+"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 navigationKeys_exports = {};
+__export(navigationKeys_exports, {
+  NAVIGATION_KEYS: () => NAVIGATION_KEYS
+});
+module.exports = __toCommonJS(navigationKeys_exports);
+var React = __toESM(require("react"));
+var import_constants = require("../constants/index.js");
+const NAVIGATION_KEYS = {
+  ArrowDown: (currentIndex) => currentIndex + 1,
+  ArrowUp: (currentIndex) => currentIndex - 1,
+  PageDown: (currentIndex) => currentIndex + import_constants.PER_PAGE_SELECTOR_PAGE_JUMP,
+  PageUp: (currentIndex) => currentIndex - import_constants.PER_PAGE_SELECTOR_PAGE_JUMP,
+  Home: () => 0,
+  End: (_currentIndex, amountOfOptions) => amountOfOptions - 1
+};
+//# sourceMappingURL=navigationKeys.js.map

package/dist/cjs/parts/DSPerPageSelector/config/navigationKeys.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/parts/DSPerPageSelector/config/navigationKeys.ts", "../../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { PER_PAGE_SELECTOR_PAGE_JUMP } from '../constants/index.js';\n\ntype GetTargetIndex = (currentIndex: number, amountOfOptions: number) => number;\n\n// the keys that only MOVE the focus through the options (APG listbox / select-only combobox navigation)\nexport const NAVIGATION_KEYS: Record<string, GetTargetIndex> = {\n  ArrowDown: (currentIndex) => currentIndex + 1,\n  ArrowUp: (currentIndex) => currentIndex - 1,\n  PageDown: (currentIndex) => currentIndex + PER_PAGE_SELECTOR_PAGE_JUMP,\n  PageUp: (currentIndex) => currentIndex - PER_PAGE_SELECTOR_PAGE_JUMP,\n  Home: () => 0,\n  End: (_currentIndex, amountOfOptions) => amountOfOptions - 1,\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA4C;AAKrC,MAAM,kBAAkD;AAAA,EAC7D,WAAW,CAAC,iBAAiB,eAAe;AAAA,EAC5C,SAAS,CAAC,iBAAiB,eAAe;AAAA,EAC1C,UAAU,CAAC,iBAAiB,eAAe;AAAA,EAC3C,QAAQ,CAAC,iBAAiB,eAAe;AAAA,EACzC,MAAM,MAAM;AAAA,EACZ,KAAK,CAAC,eAAe,oBAAoB,kBAAkB;AAC7D;",
+  "names": []
+}

package/dist/cjs/parts/DSPerPageSelector/config/useFocusTracker.js

@@ -0,0 +1,83 @@
+"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 useFocusTracker_exports = {};
+__export(useFocusTracker_exports, {
+  getOptionRegionId: () => getOptionRegionId,
+  useFocusTracker: () => useFocusTracker
+});
+module.exports = __toCommonJS(useFocusTracker_exports);
+var React = __toESM(require("react"));
+var import_react = require("react");
+var import_constants = require("../constants/index.js");
+var import_getSelectedOptionIndex = require("./getSelectedOptionIndex.js");
+const getOptionRegionId = (dsId) => `${import_constants.PER_PAGE_SELECTOR_REGION_FOCUSES.OPTION_PREFIX}${dsId}`;
+const useFocusTracker = ({ options, pageSize }) => {
+  const [focusRegion, setFocusRegion] = (0, import_react.useState)(import_constants.PER_PAGE_SELECTOR_REGION_FOCUSES.RESET);
+  const focusedIndex = (0, import_react.useMemo)(
+    () => options.findIndex((option) => getOptionRegionId(option.dsId) === focusRegion),
+    [focusRegion, options]
+  );
+  const clampIndex = (0, import_react.useCallback)((index) => Math.min(Math.max(index, 0), options.length - 1), [options.length]);
+  const trackFocusRegionReset = (0, import_react.useCallback)(() => setFocusRegion(import_constants.PER_PAGE_SELECTOR_REGION_FOCUSES.RESET), []);
+  const trackFocusTrigger = (0, import_react.useCallback)(() => setFocusRegion(import_constants.PER_PAGE_SELECTOR_REGION_FOCUSES.TRIGGER), []);
+  const trackFocusOptionAtIndex = (0, import_react.useCallback)(
+    (index) => {
+      if (options.length > 0) setFocusRegion(getOptionRegionId(options[clampIndex(index)].dsId));
+    },
+    [clampIndex, options]
+  );
+  const trackFocusOption = (0, import_react.useCallback)((dsId) => setFocusRegion(getOptionRegionId(dsId)), []);
+  const trackFocusSelectedOption = (0, import_react.useCallback)(
+    () => trackFocusOptionAtIndex(Math.max((0, import_getSelectedOptionIndex.getSelectedOptionIndex)(options, pageSize), 0)),
+    [options, pageSize, trackFocusOptionAtIndex]
+  );
+  return (0, import_react.useMemo)(
+    () => ({
+      focusRegion,
+      focusedIndex,
+      clampIndex,
+      trackFocusRegionReset,
+      trackFocusTrigger,
+      trackFocusOption,
+      trackFocusOptionAtIndex,
+      trackFocusSelectedOption
+    }),
+    [
+      focusRegion,
+      focusedIndex,
+      clampIndex,
+      trackFocusRegionReset,
+      trackFocusTrigger,
+      trackFocusOption,
+      trackFocusOptionAtIndex,
+      trackFocusSelectedOption
+    ]
+  );
+};
+//# sourceMappingURL=useFocusTracker.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/parts/DSPerPageSelector/config/useFocusTracker.ts", "../../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA+C;AAC/C,uBAAiD;AAEjD,oCAAuC;AAQhC,MAAM,oBAAoB,CAAC,SAAiB,GAAG,kDAAiC,aAAa,GAAG,IAAI;AAOpG,MAAM,kBAAkB,CAAC,EAAE,SAAS,SAAS,MAA2B;AAC7E,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAiB,kDAAiC,KAAK;AAE7F,QAAM,mBAAe;AAAA,IACnB,MAAM,QAAQ,UAAU,CAAC,WAAW,kBAAkB,OAAO,IAAI,MAAM,WAAW;AAAA,IAClF,CAAC,aAAa,OAAO;AAAA,EACvB;AAEA,QAAM,iBAAa,0BAAY,CAAC,UAAkB,KAAK,IAAI,KAAK,IAAI,OAAO,CAAC,GAAG,QAAQ,SAAS,CAAC,GAAG,CAAC,QAAQ,MAAM,CAAC;AAEpH,QAAM,4BAAwB,0BAAY,MAAM,eAAe,kDAAiC,KAAK,GAAG,CAAC,CAAC;AAC1G,QAAM,wBAAoB,0BAAY,MAAM,eAAe,kDAAiC,OAAO,GAAG,CAAC,CAAC;AACxG,QAAM,8BAA0B;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,uBAAmB,0BAAY,CAAC,SAAiB,eAAe,kBAAkB,IAAI,CAAC,GAAG,CAAC,CAAC;AAElG,QAAM,+BAA2B;AAAA,IAC/B,MAAM,wBAAwB,KAAK,QAAI,sDAAuB,SAAS,QAAQ,GAAG,CAAC,CAAC;AAAA,IACpF,CAAC,SAAS,UAAU,uBAAuB;AAAA,EAC7C;AAEA,aAAO;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/cjs/parts/DSPerPageSelector/config/usePerPageSelector.js

@@ -34,47 +34,95 @@ module.exports = __toCommonJS(usePerPageSelector_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_useValidateProps = require("./useValidateProps.js");
 var import_getOptions = require("./getOptions.js");
-var import_useOnElementOnResize = require("../../shared/useOnElementOnResize.js");
+var import_getInstanceIds = require("./getInstanceIds.js");
+var import_useFocusTracker = require("./useFocusTracker.js");
+var import_usePerPageSelectorFloatingContext = require("./usePerPageSelectorFloatingContext.js");
+var import_usePerPageSelectorInteractions = require("./usePerPageSelectorInteractions.js");
+var import_usePerPageSelectorSizing = require("./usePerPageSelectorSizing.js");
+var import_useValidateProps = require("./useValidateProps.js");
 const usePerPageSelector = (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.DSPerPageSelectorPropTypesSchema);
   const xstyledProps = (0, import_ds_props_helpers.useGetXstyledProps)(propsWithDefault);
   const globalAttributes = (0, import_ds_props_helpers.useGetGlobalAttributes)(propsWithDefault);
   const ownerPropsConfig = (0, import_ds_props_helpers.useOwnerProps)(propsWithDefault);
-  const { pageSize, perPageOptions, perPageStep, minPerPage, maxPerPage } = propsWithDefault;
-  const [isOpened, setIsOpened] = (0, import_react.useState)(false);
+  const { pageSize, perPageOptions, perPageStep, minPerPage, maxPerPage, listWidth } = propsWithDefault;
+  const instanceUid = (0, import_react.useMemo)(() => (0, import_uid.uid)(5), []);
+  const [isOpen, setIsOpen] = (0, import_react.useState)(false);
   const options = (0, import_react.useMemo)(() => {
     if (perPageOptions) return perPageOptions.map(import_getOptions.generateOption);
     return (0, import_getOptions.getOptions)(perPageStep, minPerPage, maxPerPage);
   }, [maxPerPage, minPerPage, perPageOptions, perPageStep]);
-  const actionRef = (0, import_react.useRef)({});
-  const btnRef = (0, import_react.useRef)(null);
+  const triggerRef = (0, import_react.useRef)(null);
   const chevronRef = (0, import_react.useRef)(null);
-  const { width: chevronWidth } = (0, import_useOnElementOnResize.useOnElementResize)(chevronRef);
-  (0, import_react.useEffect)(() => {
-    if (isOpened) {
-      actionRef.current.setActiveDescendant(pageSize.toString());
-      actionRef.current.scrollOptionIntoView(pageSize.toString());
-    }
-  }, [isOpened]);
+  const listActionRef = (0, import_react.useRef)({});
+  const sizing = (0, import_usePerPageSelectorSizing.usePerPageSelectorSizing)({ pageSize, options, listWidth, chevronRef, listActionRef });
+  const focusTrackers = (0, import_useFocusTracker.useFocusTracker)({ options, pageSize });
+  const { floatingStyles, floatingContext, handleTriggerRef, floatingInnerRef, floatingNodeRef } = (0, import_usePerPageSelectorFloatingContext.usePerPageSelectorFloatingContext)({
+    isOpen,
+    setIsOpen,
+    triggerRef,
+    trackFocusRegionReset: focusTrackers.trackFocusRegionReset,
+    chevronWidth: sizing.chevronWidth
+  });
+  const interactions = (0, import_usePerPageSelectorInteractions.usePerPageSelectorInteractions)({
+    propsWithDefault,
+    globalAttributes,
+    options,
+    isOpen,
+    setIsOpen,
+    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]
+  );
   return import_react.default.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
+    ]
   );
 };
 //# sourceMappingURL=usePerPageSelector.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/parts/DSPerPageSelector/config/usePerPageSelector.ts", "../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,8BAKO;AACP,mBAA4D;AAE5D,mCAAwF;AACxF,8BAAiC;AACjC,wBAA2C;AAC3C,kCAAmC;AAE5B,MAAM,qBAAqB,CAAC,kBAA4C;AAI7E,QAAM,uBAAmB,sDAA+D,eAAe,yCAAY;AACnH,gDAAiB,kBAAkB,6DAAgC;AAInE,QAAM,mBAAe,4CAAmB,gBAAgB;AAIxD,QAAM,uBAAmB,gDAIvB,gBAAgB;AAIlB,QAAM,uBAAmB,uCAAc,gBAAgB;AAMvD,QAAM,EAAE,UAAU,gBAAgB,aAAa,YAAY,WAAW,IAAI;AAC1E,QAAM,CAAC,UAAU,WAAW,QAAI,uBAAS,KAAK;AAC9C,QAAM,cAAU,sBAAQ,MAAM;AAC5B,QAAI,eAAgB,QAAO,eAAe,IAAI,gCAAc;AAC5D,eAAO,8BAAW,aAAa,YAAY,UAAU;AAAA,EACvD,GAAG,CAAC,YAAY,YAAY,gBAAgB,WAAW,CAAC;AAExD,QAAM,gBAAY,qBAA+C,CAAC,CAAC;AACnE,QAAM,aAAS,qBAA0B,IAAI;AAE7C,QAAM,iBAAa,qBAAoB,IAAI;AAC3C,QAAM,EAAE,OAAO,aAAa,QAAI,gDAAmB,UAAU;AAE7D,8BAAU,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,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,IACF;AAAA,IACA,CAAC,kBAAkB,cAAc,kBAAkB,kBAAkB,UAAU,SAAS,YAAY,YAAY;AAAA,EAClH;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 { 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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,8BAKO;AACP,mBAAiD;AACjD,iBAAoB;AACpB,mCAAwF;AACxF,wBAA2C;AAC3C,4BAAoD;AACpD,6BAAgC;AAChC,+CAAkD;AAClD,4CAA+C;AAC/C,sCAAyC;AACzC,8BAAiC;AAE1B,MAAM,qBAAqB,CAAC,kBAA4C;AAI7E,QAAM,uBAAmB,sDAA+D,eAAe,yCAAY;AACnH,gDAAiB,kBAAkB,6DAAgC;AAInE,QAAM,mBAAe,4CAAmB,gBAAgB;AAIxD,QAAM,uBAAmB,gDAIvB,gBAAgB;AAIlB,QAAM,uBAAmB,uCAAc,gBAAgB;AAIvD,QAAM,EAAE,UAAU,gBAAgB,aAAa,YAAY,YAAY,UAAU,IAAI;AACrF,QAAM,kBAAc,sBAAQ,UAAM,gBAAI,CAAC,GAAG,CAAC,CAAC;AAC5C,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAS,KAAK;AAC1C,QAAM,cAAU,sBAAQ,MAAM;AAC5B,QAAI,eAAgB,QAAO,eAAe,IAAI,gCAAc;AAC5D,eAAO,8BAAW,aAAa,YAAY,UAAU;AAAA,EACvD,GAAG,CAAC,YAAY,YAAY,gBAAgB,WAAW,CAAC;AAExD,QAAM,iBAAa,qBAAiC,IAAI;AACxD,QAAM,iBAAa,qBAAoB,IAAI;AAC3C,QAAM,oBAAgB,qBAA8B,CAAC,CAAC;AAEtD,QAAM,aAAS,0DAAyB,EAAE,UAAU,SAAS,WAAW,YAAY,cAAc,CAAC;AAEnG,QAAM,oBAAgB,wCAAgB,EAAE,SAAS,SAAS,CAAC;AAE3D,QAAM,EAAE,gBAAgB,iBAAiB,kBAAkB,kBAAkB,gBAAgB,QAC3F,4EAAkC;AAAA,IAChC;AAAA,IACA;AAAA,IACA;AAAA,IACA,uBAAuB,cAAc;AAAA,IACrC,cAAc,OAAO;AAAA,EACvB,CAAC;AAEH,QAAM,mBAAe,sEAA+B;AAAA,IAClD;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,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/DSPerPageSelector/config/usePerPageSelectorFloatingContext.js

@@ -0,0 +1,82 @@
+"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 usePerPageSelectorFloatingContext_exports = {};
+__export(usePerPageSelectorFloatingContext_exports, {
+  usePerPageSelectorFloatingContext: () => usePerPageSelectorFloatingContext
+});
+module.exports = __toCommonJS(usePerPageSelectorFloatingContext_exports);
+var React = __toESM(require("react"));
+var import_ds_floating_context = require("@elliemae/ds-floating-context");
+var import_react = require("react");
+const usePerPageSelectorFloatingContext = ({
+  isOpen,
+  setIsOpen,
+  triggerRef,
+  trackFocusRegionReset,
+  chevronWidth
+}) => {
+  const floatingNodeRef = (0, import_react.useRef)(null);
+  const handleClose = (0, import_react.useCallback)(() => {
+    setIsOpen(false);
+    trackFocusRegionReset();
+  }, [setIsOpen, trackFocusRegionReset]);
+  const floatingContextConfig = (0, import_react.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 } = (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=usePerPageSelectorFloatingContext.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/parts/DSPerPageSelector/config/usePerPageSelectorFloatingContext.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 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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,iCAAgE;AAEhE,mBAA6C;AAoBtC,MAAM,oCAAoC,CAAC;AAAA,EAChD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA8B;AAC5B,QAAM,sBAAkB,qBAA8B,IAAI;AAE1D,QAAM,kBAAc,0BAAY,MAAM;AACpC,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,aAAa,QAAQ,UAAU;AAAA,EAChD;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/DSPerPageSelector/config/usePerPageSelectorInteractions.js

@@ -0,0 +1,175 @@
+"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 usePerPageSelectorInteractions_exports = {};
+__export(usePerPageSelectorInteractions_exports, {
+  usePerPageSelectorInteractions: () => usePerPageSelectorInteractions
+});
+module.exports = __toCommonJS(usePerPageSelectorInteractions_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 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 = (0, import_react.useRef)({ buffer: "", lastKeyTimestamp: 0 });
+  const moveFocusToIndex = (0, import_react.useCallback)(
+    (index) => {
+      const targetIndex = clampIndex(index);
+      trackFocusOptionAtIndex(targetIndex);
+      listActionRef.current.scrollTo?.(targetIndex, { align: "auto" });
+    },
+    [clampIndex, listActionRef, trackFocusOptionAtIndex]
+  );
+  const commitOption = (0, import_react.useCallback)(
+    (option) => {
+      if (option.value !== pageSize) onPageSizeChange(option.value);
+      setIsOpen(false);
+      trackFocusTrigger();
+    },
+    [onPageSizeChange, pageSize, setIsOpen, trackFocusTrigger]
+  );
+  const handleTriggerClick = (0, import_react.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 = (0, import_react.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 = (0, import_react.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 = (0, import_react.useCallback)(
+    (character) => {
+      const now = Date.now();
+      const typeahead = typeaheadRef.current;
+      const isNewSearch = now - typeahead.lastKeyTimestamp > import_constants.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 = (0, import_react.useCallback)(
+    (e) => {
+      if (e.ctrlKey || e.metaKey || e.altKey) return;
+      const getTargetIndex = import_navigationKeys.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 = (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)(
+    () => ({
+      commitOption,
+      handleTriggerClick,
+      handleTriggerKeyDown,
+      handlePanelKeyDown,
+      handlePanelKeyDownCapture,
+      handleBlurOutOfWidget
+    }),
+    [
+      commitOption,
+      handleTriggerClick,
+      handleTriggerKeyDown,
+      handlePanelKeyDown,
+      handlePanelKeyDownCapture,
+      handleBlurOutOfWidget
+    ]
+  );
+};
+//# sourceMappingURL=usePerPageSelectorInteractions.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/parts/DSPerPageSelector/config/usePerPageSelectorInteractions.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 { 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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
+  "names": []
+}