@elliemae/ds-app-picker 3.70.0-next.7 → 3.70.0-next.70

package/dist/cjs/DSAppPicker.js

@@ -29,155 +29,24 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var DSAppPicker_exports = {};
 __export(DSAppPicker_exports, {
   AppPickerWithSchema: () => AppPickerWithSchema,
-  DSAppPicker: () => DSAppPicker,
-  default: () => DSAppPicker_default
+  DSAppPicker: () => DSAppPicker
 });
 module.exports = __toCommonJS(DSAppPicker_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_react = require("react");
-var import_ds_button_v2 = require("@elliemae/ds-button-v2");
-var import_ds_system = require("@elliemae/ds-system");
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
-var import_ds_legacy_popover = require("@elliemae/ds-legacy-popover");
-var import_AppPickerImpl = __toESM(require("./AppPickerImpl.js"));
-var import_react_desc_prop_types = require("./react-desc-prop-types.js");
-var import_constants = require("./constants/index.js");
+var import_react = __toESM(require("react"));
 var import_useAppPicker = require("./config/useAppPicker.js");
-const StyledButton = (0, import_ds_system.styled)(import_ds_button_v2.DSButtonV2, { name: import_constants.DSAppPickerName, slot: import_constants.DSAppPickerSlots.BUTTON })``;
+var import_constants = require("./constants/index.js");
+var import_DSAppPickerCTX = require("./DSAppPickerCTX.js");
+var import_AppPickerContent = require("./parts/AppPickerFloatingContext/AppPickerContent.js");
+var import_react_desc_prop_types = require("./react-desc-prop-types.js");
 const DSAppPicker = (props) => {
-  const { propsWithDefault, ownerPropsConfig } = (0, import_useAppPicker.useAppPicker)(props);
-  const { getOwnerProps, getOwnerPropsArguments } = ownerPropsConfig;
-  const {
-    apps,
-    customApps,
-    sectionTitle,
-    customSectionTitle,
-    icon: Icon,
-    renderTrigger,
-    isOpen,
-    onClose,
-    actionRef,
-    onKeyDown,
-    onClick,
-    onClickOutside,
-    triggerRef
-  } = propsWithDefault;
-  const [open, setOpen] = (0, import_react.useState)(false);
-  const [isOverflow, setIsOverflow] = (0, import_react.useState)(false);
-  const wrapperRef = (0, import_react.useRef)(null);
-  const defaultTriggerRef = (0, import_react.useRef)(null);
-  const wasOpenedByKeyboardRef = (0, import_react.useRef)(false);
-  (0, import_react.useEffect)(() => {
-    if (actionRef && actionRef.current) {
-      actionRef.current.focusToIndex = (index) => {
-        if (wrapperRef.current) {
-          const parent = wrapperRef.current;
-          const buttons = [...parent.querySelectorAll("button")];
-          buttons[index].focus();
-        }
-      };
-      actionRef.current.focusWrapper = () => {
-        wrapperRef.current?.focus();
-      };
-    }
-  }, [actionRef, apps, customApps]);
-  (0, import_react.useEffect)(() => {
-    setTimeout(() => {
-      if (wrapperRef.current) {
-        const { scrollHeight, clientHeight } = wrapperRef.current;
-        if (scrollHeight > clientHeight) return setIsOverflow(true);
-      }
-      return setIsOverflow(false);
-    });
-  }, [isOpen, open]);
-  const handleOnClose = (0, import_react.useCallback)(() => {
-    setOpen(false);
-    onClose?.();
-  }, [onClose]);
-  const handleOnClickOutside = (e) => {
-    setOpen(false);
-    onClose?.();
-    onClickOutside?.(e);
-  };
-  const AppPickerContent = (0, import_react.useCallback)(
-    () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_AppPickerImpl.default,
-      {
-        ...getOwnerProps(),
-        ...getOwnerPropsArguments(),
-        apps,
-        customApps,
-        sectionTitle,
-        customSectionTitle,
-        close: handleOnClose,
-        wrapperRef,
-        onKeyDown,
-        triggerRef: triggerRef || defaultTriggerRef,
-        actionRef,
-        triggerIsInternal: !renderTrigger,
-        wasOpenedByKeyboardRef,
-        isOverflow
-      }
-    ),
-    [
-      actionRef,
-      apps,
-      customApps,
-      customSectionTitle,
-      handleOnClose,
-      isOverflow,
-      onKeyDown,
-      renderTrigger,
-      sectionTitle,
-      triggerRef,
-      getOwnerProps,
-      getOwnerPropsArguments
-    ]
-  );
-  const RenderTrigger = (0, import_react.useMemo)(
-    () => renderTrigger || (({ ref }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      StyledButton,
-      {
-        "data-testid": "app-picker__button",
-        id: "app-picker__button",
-        buttonType: "icon",
-        "aria-haspopup": "true",
-        "aria-expanded": isOpen ?? open,
-        "aria-label": "Application picker",
-        innerRef: (0, import_ds_system.mergeRefs)(ref, triggerRef || defaultTriggerRef),
-        onClick: (e) => {
-          wasOpenedByKeyboardRef.current = e.detail === 0;
-          onClick?.(e);
-          setOpen(true);
-        },
-        getOwnerProps,
-        getOwnerPropsArguments,
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, {})
-      }
-    )),
-    [Icon, getOwnerProps, getOwnerPropsArguments, isOpen, onClick, open, renderTrigger, triggerRef]
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_ds_legacy_popover.DSPopover,
-    {
-      content: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AppPickerContent, {}),
-      isOpen: typeof isOpen === "boolean" ? isOpen : open,
-      onClickOutside: handleOnClickOutside,
-      placement: "bottom",
-      interactionType: "click",
-      renderTrigger: RenderTrigger,
-      showArrow: true,
-      style: {
-        padding: "0",
-        maxWidth: "1000px",
-        width: "fit-content"
-      }
-    }
-  );
+  const appPickerConfig = (0, import_useAppPicker.useAppPicker)(props);
+  const ctx = import_react.default.useMemo(() => ({ ...appPickerConfig }), [appPickerConfig]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DSAppPickerCTX.DSAppPickerContext.Provider, { value: ctx, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_AppPickerContent.AppPickerContent, {}) });
 };
 DSAppPicker.displayName = import_constants.DSAppPickerName;
 const AppPickerWithSchema = (0, import_ds_props_helpers.describe)(DSAppPicker);
-AppPickerWithSchema.propTypes = import_react_desc_prop_types.DSAppPickerPropTypes;
-var DSAppPicker_default = DSAppPicker;
+AppPickerWithSchema.propTypes = import_react_desc_prop_types.DSAppPickerPropTypesSchema;
 //# sourceMappingURL=DSAppPicker.js.map

package/dist/cjs/DSAppPicker.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/DSAppPicker.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useState, useEffect, useMemo, useRef, useCallback } from 'react';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { mergeRefs, styled } from '@elliemae/ds-system';\nimport { describe } from '@elliemae/ds-props-helpers';\n\nimport { DSPopover } from '@elliemae/ds-legacy-popover';\nimport AppPickerImpl from './AppPickerImpl.js';\nimport type { DSAppPickerT } from './react-desc-prop-types.js';\nimport { DSAppPickerPropTypes } from './react-desc-prop-types.js';\nimport { DSAppPickerName, DSAppPickerSlots } from './constants/index.js';\nimport { useAppPicker } from './config/useAppPicker.js';\n\nconst StyledButton = styled(DSButtonV2, { name: DSAppPickerName, slot: DSAppPickerSlots.BUTTON })``;\nconst DSAppPicker: React.ComponentType<DSAppPickerT.Props> = (props) => {\n  const { propsWithDefault, ownerPropsConfig } = useAppPicker(props);\n\n  const { getOwnerProps, getOwnerPropsArguments } = ownerPropsConfig;\n\n  const {\n    apps,\n    customApps,\n    sectionTitle,\n    customSectionTitle,\n    icon: Icon,\n    renderTrigger,\n    isOpen,\n    onClose,\n    actionRef,\n    onKeyDown,\n    onClick,\n    onClickOutside,\n    triggerRef,\n  } = propsWithDefault;\n\n  const [open, setOpen] = useState(false);\n  const [isOverflow, setIsOverflow] = useState(false);\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const defaultTriggerRef = useRef(null);\n  const wasOpenedByKeyboardRef = useRef(false);\n\n  useEffect(() => {\n    if (actionRef && actionRef.current) {\n      actionRef.current.focusToIndex = (index: number) => {\n        if (wrapperRef.current) {\n          const parent = wrapperRef.current;\n          const buttons = [...parent.querySelectorAll('button')];\n          buttons[index].focus();\n        }\n      };\n      actionRef.current.focusWrapper = () => {\n        wrapperRef.current?.focus();\n      };\n    }\n  }, [actionRef, apps, customApps]);\n\n  useEffect(() => {\n    setTimeout(() => {\n      if (wrapperRef.current) {\n        const { scrollHeight, clientHeight } = wrapperRef.current;\n        if (scrollHeight > clientHeight) return setIsOverflow(true);\n      }\n      return setIsOverflow(false);\n    });\n  }, [isOpen, open]);\n\n  const handleOnClose = useCallback(() => {\n    setOpen(false);\n    onClose?.();\n  }, [onClose]);\n\n  const handleOnClickOutside = (e: React.MouseEvent) => {\n    setOpen(false);\n    onClose?.();\n    onClickOutside?.(e);\n  };\n\n  const AppPickerContent = useCallback(\n    () => (\n      <AppPickerImpl\n        {...getOwnerProps()}\n        {...getOwnerPropsArguments()}\n        apps={apps}\n        customApps={customApps}\n        sectionTitle={sectionTitle}\n        customSectionTitle={customSectionTitle}\n        close={handleOnClose}\n        wrapperRef={wrapperRef}\n        onKeyDown={onKeyDown}\n        triggerRef={triggerRef || defaultTriggerRef}\n        actionRef={actionRef}\n        triggerIsInternal={!renderTrigger}\n        wasOpenedByKeyboardRef={wasOpenedByKeyboardRef}\n        isOverflow={isOverflow}\n      />\n    ),\n    [\n      actionRef,\n      apps,\n      customApps,\n      customSectionTitle,\n      handleOnClose,\n      isOverflow,\n      onKeyDown,\n      renderTrigger,\n      sectionTitle,\n      triggerRef,\n      getOwnerProps,\n      getOwnerPropsArguments,\n    ],\n  );\n\n  const RenderTrigger = useMemo(\n    () =>\n      renderTrigger ||\n      (({ ref }: { ref: React.RefObject<HTMLButtonElement> }) => (\n        <StyledButton\n          data-testid=\"app-picker__button\"\n          id=\"app-picker__button\"\n          buttonType=\"icon\"\n          aria-haspopup=\"true\"\n          aria-expanded={isOpen ?? open}\n          aria-label=\"Application picker\"\n          innerRef={mergeRefs(ref, triggerRef || defaultTriggerRef)}\n          onClick={(e: React.MouseEvent | React.KeyboardEvent) => {\n            wasOpenedByKeyboardRef.current = e.detail === 0;\n            onClick?.(e);\n            setOpen(true);\n          }}\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        >\n          <Icon />\n        </StyledButton>\n      )),\n    [Icon, getOwnerProps, getOwnerPropsArguments, isOpen, onClick, open, renderTrigger, triggerRef],\n  );\n\n  return (\n    <DSPopover\n      content={<AppPickerContent />}\n      isOpen={typeof isOpen === 'boolean' ? isOpen : open}\n      onClickOutside={handleOnClickOutside}\n      placement=\"bottom\"\n      interactionType=\"click\"\n      renderTrigger={RenderTrigger}\n      showArrow\n      style={{\n        padding: '0',\n        maxWidth: '1000px',\n        width: 'fit-content',\n      }}\n    />\n  );\n};\n\nDSAppPicker.displayName = DSAppPickerName;\nconst AppPickerWithSchema = describe(DSAppPicker);\nAppPickerWithSchema.propTypes = DSAppPickerPropTypes;\n\nexport { DSAppPicker, AppPickerWithSchema };\nexport default DSAppPicker;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
-  "names": ["AppPickerImpl"]
+  "sourcesContent": ["import { describe } from '@elliemae/ds-props-helpers';\nimport React from 'react';\nimport { useAppPicker } from './config/useAppPicker.js';\nimport { DSAppPickerName } from './constants/index.js';\nimport { DSAppPickerContext, type DSAppPickerCTX } from './DSAppPickerCTX.js';\nimport { AppPickerContent } from './parts/AppPickerFloatingContext/AppPickerContent.js';\nimport type { DSAppPickerT } from './react-desc-prop-types.js';\nimport { DSAppPickerPropTypesSchema } from './react-desc-prop-types.js';\n\nconst DSAppPicker: React.ComponentType<DSAppPickerT.Props> = (props) => {\n  const appPickerConfig = useAppPicker(props);\n  const ctx: DSAppPickerCTX = React.useMemo(() => ({ ...appPickerConfig }), [appPickerConfig]);\n\n  return (\n    <DSAppPickerContext.Provider value={ctx}>\n      <AppPickerContent />\n    </DSAppPickerContext.Provider>\n  );\n};\n\nDSAppPicker.displayName = DSAppPickerName;\nconst AppPickerWithSchema = describe(DSAppPicker);\nAppPickerWithSchema.propTypes = DSAppPickerPropTypesSchema;\n\nexport { AppPickerWithSchema, DSAppPicker };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADejB;AAfN,8BAAyB;AACzB,mBAAkB;AAClB,0BAA6B;AAC7B,uBAAgC;AAChC,4BAAwD;AACxD,8BAAiC;AAEjC,mCAA2C;AAE3C,MAAM,cAAuD,CAAC,UAAU;AACtE,QAAM,sBAAkB,kCAAa,KAAK;AAC1C,QAAM,MAAsB,aAAAA,QAAM,QAAQ,OAAO,EAAE,GAAG,gBAAgB,IAAI,CAAC,eAAe,CAAC;AAE3F,SACE,4CAAC,yCAAmB,UAAnB,EAA4B,OAAO,KAClC,sDAAC,4CAAiB,GACpB;AAEJ;AAEA,YAAY,cAAc;AAC1B,MAAM,0BAAsB,kCAAS,WAAW;AAChD,oBAAoB,YAAY;",
+  "names": ["React"]
 }

package/dist/cjs/{utils.js → DSAppPickerCTX.js}

@@ -26,30 +26,13 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var utils_exports = {};
-__export(utils_exports, {
-  focusSelectedOrFirstAvailable: () => focusSelectedOrFirstAvailable,
-  keys: () => keys
+var DSAppPickerCTX_exports = {};
+__export(DSAppPickerCTX_exports, {
+  DSAppPickerContext: () => DSAppPickerContext
 });
-module.exports = __toCommonJS(utils_exports);
+module.exports = __toCommonJS(DSAppPickerCTX_exports);
 var React = __toESM(require("react"));
-const keys = {
-  LEFT: "ArrowLeft",
-  UP: "ArrowUp",
-  RIGHT: "ArrowRight",
-  DOWN: "ArrowDown",
-  ENTER: "Enter",
-  SPACE: "",
-  TAB: "Tab",
-  ESC: "Escape",
-  HOME: "Home",
-  END: "End"
-};
-const focusSelectedOrFirstAvailable = (wrapperRef, allFocusableButtonsRef, selectedButtonRef) => {
-  if (selectedButtonRef.current !== null) {
-    wrapperRef?.current?.querySelectorAll("button")[selectedButtonRef.current].focus();
-  } else {
-    allFocusableButtonsRef?.[0]?.focus();
-  }
-};
-//# sourceMappingURL=utils.js.map
+var import_react = require("react");
+const defaultContext = {};
+const DSAppPickerContext = (0, import_react.createContext)(defaultContext);
+//# sourceMappingURL=DSAppPickerCTX.js.map

package/dist/cjs/DSAppPickerCTX.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/DSAppPickerCTX.ts", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { createContext } from 'react';\nimport type { useAppPicker } from './config/useAppPicker.js';\n\nexport interface DSAppPickerCTX extends ReturnType<typeof useAppPicker> {}\n\nconst defaultContext = {} as DSAppPickerCTX;\n\n/** Single source of truth for DSAppPicker's parts \u2014 props, owner-props config, floating-context\n * render state, and focus tracker. Replaces per-part prop drilling. */\nexport const DSAppPickerContext = createContext<DSAppPickerCTX>(defaultContext);\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA8B;AAK9B,MAAM,iBAAiB,CAAC;AAIjB,MAAM,yBAAqB,4BAA8B,cAAc;",
+  "names": []
+}

package/dist/cjs/config/useAppPicker.js

@@ -32,24 +32,41 @@ __export(useAppPicker_exports, {
 });
 module.exports = __toCommonJS(useAppPicker_exports);
 var React = __toESM(require("react"));
-var import_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_constants = require("../constants/index.js");
+var import_useFocusTracker = require("./useFocusTracker.js");
+var import_useValidateProps = require("./useValidateProps.js");
 const useAppPicker = (props) => {
   const propsWithDefault = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(props, import_react_desc_prop_types.defaultProps);
-  (0, import_ds_props_helpers.useValidateTypescriptPropTypes)(propsWithDefault, import_react_desc_prop_types.DSAppPickerPropTypes, import_constants.DSAppPickerName);
-  const ownerPropsConfig = (0, import_ds_props_helpers.useOwnerProps)(propsWithDefault, { ...props });
-  const globalAttributes = (0, import_ds_props_helpers.getGlobalAttributes)(props);
-  const xstyledProps = (0, import_ds_props_helpers.getXstyledProps)(props);
+  (0, import_useValidateProps.useValidateProps)(propsWithDefault, import_react_desc_prop_types.DSAppPickerPropTypesSchema);
+  const ownerPropsConfig = (0, import_ds_props_helpers.useOwnerProps)(propsWithDefault, propsWithDefault);
+  const globalAttributes = (0, import_ds_props_helpers.useGetGlobalAttributes)(props);
+  const xstyledProps = (0, import_ds_props_helpers.useGetXstyledProps)(props);
+  const openIntentRef = (0, import_react.useRef)("pointer");
+  const { isOpen, apps, customApps, id } = propsWithDefault;
+  const [internalIsOpen, setInternalIsOpen] = (0, import_react.useState)(false);
+  const resolvedIsOpen = typeof isOpen === "boolean" ? isOpen : internalIsOpen;
+  const mountedOpenAutofocusPendingRef = (0, import_react.useRef)(resolvedIsOpen);
+  const allApps = (0, import_react.useMemo)(() => [...apps, ...customApps], [apps, customApps]);
+  const useFocusTrackerConfig = (0, import_react.useMemo)(() => ({ allApps }), [allApps]);
+  const focusTrackers = (0, import_useFocusTracker.useFocusTracker)(useFocusTrackerConfig);
+  const instanceUid = import_react.default.useMemo(() => id || `ds-app-picker-${(0, import_uid.uid)(5)}`, [id]);
   return import_react.default.useMemo(
     () => ({
+      focusTrackers,
       propsWithDefault,
       ownerPropsConfig,
       globalAttributes,
-      xstyledProps
+      xstyledProps,
+      openIntentRef,
+      mountedOpenAutofocusPendingRef,
+      resolvedIsOpen,
+      setInternalIsOpen,
+      instanceUid
     }),
-    [propsWithDefault, ownerPropsConfig, globalAttributes, xstyledProps]
+    [focusTrackers, propsWithDefault, ownerPropsConfig, globalAttributes, xstyledProps, resolvedIsOpen, instanceUid]
   );
 };
 //# sourceMappingURL=useAppPicker.js.map

package/dist/cjs/config/useAppPicker.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../src/config/useAppPicker.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport {\n  useMemoMergePropsWithDefault,\n  useOwnerProps,\n  useValidateTypescriptPropTypes,\n  getGlobalAttributes,\n  getXstyledProps,\n} from '@elliemae/ds-props-helpers';\nimport { type DSAppPickerT, defaultProps, DSAppPickerPropTypes } from '../react-desc-prop-types.js';\nimport { DSAppPickerName } from '../constants/index.js';\n\nexport const useAppPicker = (props: DSAppPickerT.Props) => {\n  // =============================================================================\n  // MERGE WITH DEFAULT AND VALIDATE PROPS\n  // =============================================================================\n  const propsWithDefault = useMemoMergePropsWithDefault<DSAppPickerT.InternalProps>(props, defaultProps);\n  useValidateTypescriptPropTypes(propsWithDefault, DSAppPickerPropTypes, DSAppPickerName);\n  // =============================================================================\n  // GLOBAL ATTRIBUTES & XSTYLED PROPS\n  // =============================================================================\n  const ownerPropsConfig = useOwnerProps(propsWithDefault, { ...props });\n\n  const globalAttributes = getGlobalAttributes<DSAppPickerT.Props>(props);\n  const xstyledProps = getXstyledProps<DSAppPickerT.Props>(props);\n  return React.useMemo(\n    () => ({\n      propsWithDefault,\n      ownerPropsConfig,\n      globalAttributes,\n      xstyledProps,\n    }),\n    [propsWithDefault, ownerPropsConfig, globalAttributes, xstyledProps],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,8BAMO;AACP,mCAAsE;AACtE,uBAAgC;AAEzB,MAAM,eAAe,CAAC,UAA8B;AAIzD,QAAM,uBAAmB,sDAAyD,OAAO,yCAAY;AACrG,8DAA+B,kBAAkB,mDAAsB,gCAAe;AAItF,QAAM,uBAAmB,uCAAc,kBAAkB,EAAE,GAAG,MAAM,CAAC;AAErE,QAAM,uBAAmB,6CAAwC,KAAK;AACtE,QAAM,mBAAe,yCAAoC,KAAK;AAC9D,SAAO,aAAAA,QAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,kBAAkB,kBAAkB,kBAAkB,YAAY;AAAA,EACrE;AACF;",
+  "sources": ["../../../src/config/useAppPicker.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import {\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 DSAppPickerT, defaultProps, DSAppPickerPropTypesSchema } from '../react-desc-prop-types.js';\nimport { useFocusTracker } from './useFocusTracker.js';\nimport { useValidateProps } from './useValidateProps.js';\n\nexport const useAppPicker = (props: DSAppPickerT.Props) => {\n  // =============================================================================\n  // MERGE WITH DEFAULT AND VALIDATE PROPS\n  // =============================================================================\n  const propsWithDefault = useMemoMergePropsWithDefault<DSAppPickerT.InternalProps>(props, defaultProps);\n  useValidateProps(propsWithDefault, DSAppPickerPropTypesSchema);\n  // =============================================================================\n  // GLOBAL ATTRIBUTES & XSTYLED PROPS\n  // =============================================================================\n  // Use propsWithDefault (stable, deep-comparison memoized) instead of { ...props }\n  // to prevent getOwnerPropsArguments from creating a new object reference every render.\n  const ownerPropsConfig = useOwnerProps(propsWithDefault, propsWithDefault);\n\n  const globalAttributes = useGetGlobalAttributes<DSAppPickerT.Props>(props);\n  const xstyledProps = useGetXstyledProps<DSAppPickerT.Props>(props);\n  // =============================================================================\n  // Specific component state and logics\n  // =============================================================================\n  /*\n   * HOW the pending open was triggered, which is the only input to where initial focus lands.\n   *\n   * A union rather than a boolean because there are three landings, not two: a pointer open goes to the\n   * panel, ArrowDown-style keyboard activation goes to the selection or the FIRST item, and ArrowUp goes to\n   * the selection or the LAST one. Keeping it as one value means there is exactly one thing to read in\n   * handleFloatingOpen, so nothing else can end up writing a competing focus intent.\n   */\n  const openIntentRef = useRef<DSAppPickerT.OpenIntent>('pointer');\n\n  // \"Is the panel open\" is top-level component state. `isOpen` (controlled) takes precedence over\n  // the internal state when provided. resolvedIsOpen feeds useFloatingContext's\n  // externallyControlledIsOpen; initial-focus-on-open is driven off useFloatingContext's onOpen\n  // (which fires on that transition), so the focus tracker itself stays a pure region tracker with\n  // no open-state awareness.\n  const { isOpen, apps, customApps, id } = propsWithDefault;\n  const [internalIsOpen, setInternalIsOpen] = useState(false);\n  const resolvedIsOpen = typeof isOpen === 'boolean' ? isOpen : internalIsOpen;\n\n  // Was DSAppPicker rendered already-open at mount (declarative `isOpen`, before any user\n  // interaction)? Such an open is not a transition, so useAppPickerFloatingContext's onOpen seed\n  // never fires for it \u2014 AppPanel's useMountedOpenAutofocusNuance consumes this to seed that one\n  // case. Captured once; the nuance flips it false after consuming so a later controlled reopen\n  // (a real transition, handled by onOpen) doesn't re-trigger it.\n  const mountedOpenAutofocusPendingRef = useRef(resolvedIsOpen);\n\n  const allApps = useMemo(() => [...apps, ...customApps], [apps, customApps]);\n  const useFocusTrackerConfig = useMemo(() => ({ allApps }), [allApps]);\n  const focusTrackers = useFocusTracker(useFocusTrackerConfig);\n\n  const instanceUid = React.useMemo(() => id || `ds-app-picker-${uid(5)}`, [id]);\n\n  return React.useMemo(\n    () => ({\n      focusTrackers,\n      propsWithDefault,\n      ownerPropsConfig,\n      globalAttributes,\n      xstyledProps,\n      openIntentRef,\n      mountedOpenAutofocusPendingRef,\n      resolvedIsOpen,\n      setInternalIsOpen,\n      instanceUid,\n    }),\n    [focusTrackers, propsWithDefault, ownerPropsConfig, globalAttributes, xstyledProps, resolvedIsOpen, instanceUid],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAKO;AACP,mBAAiD;AACjD,iBAAoB;AACpB,mCAA4E;AAC5E,6BAAgC;AAChC,8BAAiC;AAE1B,MAAM,eAAe,CAAC,UAA8B;AAIzD,QAAM,uBAAmB,sDAAyD,OAAO,yCAAY;AACrG,gDAAiB,kBAAkB,uDAA0B;AAM7D,QAAM,uBAAmB,uCAAc,kBAAkB,gBAAgB;AAEzE,QAAM,uBAAmB,gDAA2C,KAAK;AACzE,QAAM,mBAAe,4CAAuC,KAAK;AAYjE,QAAM,oBAAgB,qBAAgC,SAAS;AAO/D,QAAM,EAAE,QAAQ,MAAM,YAAY,GAAG,IAAI;AACzC,QAAM,CAAC,gBAAgB,iBAAiB,QAAI,uBAAS,KAAK;AAC1D,QAAM,iBAAiB,OAAO,WAAW,YAAY,SAAS;AAO9D,QAAM,qCAAiC,qBAAO,cAAc;AAE5D,QAAM,cAAU,sBAAQ,MAAM,CAAC,GAAG,MAAM,GAAG,UAAU,GAAG,CAAC,MAAM,UAAU,CAAC;AAC1E,QAAM,4BAAwB,sBAAQ,OAAO,EAAE,QAAQ,IAAI,CAAC,OAAO,CAAC;AACpE,QAAM,oBAAgB,wCAAgB,qBAAqB;AAE3D,QAAM,cAAc,aAAAA,QAAM,QAAQ,MAAM,MAAM,qBAAiB,gBAAI,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC;AAE7E,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,IACF;AAAA,IACA,CAAC,eAAe,kBAAkB,kBAAkB,kBAAkB,cAAc,gBAAgB,WAAW;AAAA,EACjH;AACF;",
   "names": ["React"]
 }

package/dist/cjs/config/useFocusTracker.js

@@ -0,0 +1,104 @@
+"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, {
+  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_getChipId = require("../util/getChipId.js");
+var import_getChipRegionId = require("../util/getChipRegionId.js");
+const useFocusTracker = (config) => {
+  const { allApps } = config;
+  const firstFocusableIdx = (0, import_react.useMemo)(() => allApps.findIndex((app) => !app.disabled), [allApps]);
+  const lastFocusableIdx = (0, import_react.useMemo)(() => allApps.reduce((acc, app, i) => !app.disabled ? i : acc, -1), [allApps]);
+  const [focusRegion, setFocusRegion] = (0, import_react.useState)(import_constants.APP_PICKER_REGION_FOCUSES.RESET);
+  const firstFocusableRef = (0, import_react.useRef)(null);
+  const lastFocusableRef = (0, import_react.useRef)(null);
+  const trackFocusChip = (0, import_react.useCallback)((chipId) => {
+    setFocusRegion((0, import_getChipRegionId.getChipRegionId)(chipId));
+  }, []);
+  const trackFocusRegionReset = (0, import_react.useCallback)(() => {
+    setFocusRegion(import_constants.APP_PICKER_REGION_FOCUSES.RESET);
+  }, []);
+  const trackFocusTrigger = (0, import_react.useCallback)(() => {
+    setFocusRegion(import_constants.APP_PICKER_REGION_FOCUSES.TRIGGER);
+  }, []);
+  const trackFocusPanel = (0, import_react.useCallback)(() => {
+    setFocusRegion(import_constants.APP_PICKER_REGION_FOCUSES.PANEL);
+  }, []);
+  const trackFocusSelectedItem = (0, import_react.useCallback)(() => {
+    const selectedIdx = allApps.findIndex((app) => app.selected);
+    const index = selectedIdx !== -1 ? selectedIdx : allApps.findIndex((app) => !app.disabled);
+    if (index !== -1) setFocusRegion((0, import_getChipRegionId.getChipRegionId)((0, import_getChipId.getChipId)(allApps[index], index)));
+  }, [allApps]);
+  const trackFocusSelectedOrLastItem = (0, import_react.useCallback)(() => {
+    const selectedIdx = allApps.findIndex((app) => app.selected);
+    const index = selectedIdx !== -1 ? selectedIdx : lastFocusableIdx;
+    if (index !== -1) setFocusRegion((0, import_getChipRegionId.getChipRegionId)((0, import_getChipId.getChipId)(allApps[index], index)));
+  }, [allApps, lastFocusableIdx]);
+  const trackFocusItemAtIndex = (0, import_react.useCallback)(
+    (index) => {
+      const target = allApps[index];
+      if (target) setFocusRegion((0, import_getChipRegionId.getChipRegionId)((0, import_getChipId.getChipId)(target, index)));
+    },
+    [allApps]
+  );
+  return (0, import_react.useMemo)(
+    () => ({
+      firstFocusableIdx,
+      lastFocusableIdx,
+      focusRegion,
+      firstFocusableRef,
+      lastFocusableRef,
+      trackFocusChip,
+      trackFocusRegionReset,
+      trackFocusTrigger,
+      trackFocusPanel,
+      trackFocusSelectedItem,
+      trackFocusSelectedOrLastItem,
+      trackFocusItemAtIndex
+    }),
+    [
+      firstFocusableIdx,
+      lastFocusableIdx,
+      focusRegion,
+      trackFocusChip,
+      trackFocusRegionReset,
+      trackFocusTrigger,
+      trackFocusPanel,
+      trackFocusSelectedItem,
+      trackFocusSelectedOrLastItem,
+      trackFocusItemAtIndex
+    ]
+  );
+};
+//# sourceMappingURL=useFocusTracker.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/config/useFocusTracker.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { useCallback, useMemo, useRef, useState } from 'react';\nimport { APP_PICKER_REGION_FOCUSES } from '../constants/index.js';\nimport type { DSAppPickerT } from '../react-desc-prop-types.js';\nimport { getChipId } from '../util/getChipId.js';\nimport { getChipRegionId } from '../util/getChipRegionId.js';\n\ntype FocusTrackerConfigT = {\n  allApps: DSAppPickerT.AppItem[];\n};\n\nexport const useFocusTracker = (config: FocusTrackerConfigT) => {\n  const { allApps } = config;\n\n  // Flat indices of the first/last non-disabled item, used to mark the focus-trap edges.\n  // AppSection passes isFirstFocusable/isLastFocusable to AppPickerItem, which sets\n  // firstFocusableRef/lastFocusableRef when its innerRef fires.\n  const firstFocusableIdx = useMemo(() => allApps.findIndex((app) => !app.disabled), [allApps]);\n  const lastFocusableIdx = useMemo(() => allApps.reduce((acc, app, i) => (!app.disabled ? i : acc), -1), [allApps]);\n\n  const [focusRegion, setFocusRegion] = useState<string>(APP_PICKER_REGION_FOCUSES.RESET);\n\n  // DOM refs for the first and last focusable chips \u2014 set by AppPickerItem's innerRef.\n  // Used by useFocusTrap in AppPanel so the focus trap needs no DOM query.\n  const firstFocusableRef = useRef<HTMLElement | null>(null);\n  const lastFocusableRef = useRef<HTMLElement | null>(null);\n\n  const trackFocusChip = useCallback((chipId: string) => {\n    setFocusRegion(getChipRegionId(chipId));\n  }, []);\n\n  const trackFocusRegionReset = useCallback(() => {\n    setFocusRegion(APP_PICKER_REGION_FOCUSES.RESET);\n  }, []);\n\n  const trackFocusTrigger = useCallback(() => {\n    setFocusRegion(APP_PICKER_REGION_FOCUSES.TRIGGER);\n  }, []);\n\n  const trackFocusPanel = useCallback(() => {\n    setFocusRegion(APP_PICKER_REGION_FOCUSES.PANEL);\n  }, []);\n\n  const trackFocusSelectedItem = useCallback(() => {\n    const selectedIdx = allApps.findIndex((app) => app.selected);\n    const index = selectedIdx !== -1 ? selectedIdx : allApps.findIndex((app) => !app.disabled);\n    if (index !== -1) setFocusRegion(getChipRegionId(getChipId(allApps[index], index)));\n  }, [allApps]);\n\n  // ArrowUp's counterpart to trackFocusSelectedItem. Same first clause \u2014 the selection wins \u2014 but the\n  // fallback is the LAST available item rather than the first, because \"open upwards\" lands at the end.\n  const trackFocusSelectedOrLastItem = useCallback(() => {\n    const selectedIdx = allApps.findIndex((app) => app.selected);\n    const index = selectedIdx !== -1 ? selectedIdx : lastFocusableIdx;\n    if (index !== -1) setFocusRegion(getChipRegionId(getChipId(allApps[index], index)));\n  }, [allApps, lastFocusableIdx]);\n\n  const trackFocusItemAtIndex = useCallback(\n    (index: number) => {\n      const target = allApps[index];\n      if (target) setFocusRegion(getChipRegionId(getChipId(target, index)));\n    },\n    [allApps],\n  );\n\n  return useMemo(\n    () => ({\n      firstFocusableIdx,\n      lastFocusableIdx,\n      focusRegion,\n      firstFocusableRef,\n      lastFocusableRef,\n      trackFocusChip,\n      trackFocusRegionReset,\n      trackFocusTrigger,\n      trackFocusPanel,\n      trackFocusSelectedItem,\n      trackFocusSelectedOrLastItem,\n      trackFocusItemAtIndex,\n    }),\n    [\n      firstFocusableIdx,\n      lastFocusableIdx,\n      focusRegion,\n      trackFocusChip,\n      trackFocusRegionReset,\n      trackFocusTrigger,\n      trackFocusPanel,\n      trackFocusSelectedItem,\n      trackFocusSelectedOrLastItem,\n      trackFocusItemAtIndex,\n    ],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAuD;AACvD,uBAA0C;AAE1C,uBAA0B;AAC1B,6BAAgC;AAMzB,MAAM,kBAAkB,CAAC,WAAgC;AAC9D,QAAM,EAAE,QAAQ,IAAI;AAKpB,QAAM,wBAAoB,sBAAQ,MAAM,QAAQ,UAAU,CAAC,QAAQ,CAAC,IAAI,QAAQ,GAAG,CAAC,OAAO,CAAC;AAC5F,QAAM,uBAAmB,sBAAQ,MAAM,QAAQ,OAAO,CAAC,KAAK,KAAK,MAAO,CAAC,IAAI,WAAW,IAAI,KAAM,EAAE,GAAG,CAAC,OAAO,CAAC;AAEhH,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAiB,2CAA0B,KAAK;AAItF,QAAM,wBAAoB,qBAA2B,IAAI;AACzD,QAAM,uBAAmB,qBAA2B,IAAI;AAExD,QAAM,qBAAiB,0BAAY,CAAC,WAAmB;AACrD,uBAAe,wCAAgB,MAAM,CAAC;AAAA,EACxC,GAAG,CAAC,CAAC;AAEL,QAAM,4BAAwB,0BAAY,MAAM;AAC9C,mBAAe,2CAA0B,KAAK;AAAA,EAChD,GAAG,CAAC,CAAC;AAEL,QAAM,wBAAoB,0BAAY,MAAM;AAC1C,mBAAe,2CAA0B,OAAO;AAAA,EAClD,GAAG,CAAC,CAAC;AAEL,QAAM,sBAAkB,0BAAY,MAAM;AACxC,mBAAe,2CAA0B,KAAK;AAAA,EAChD,GAAG,CAAC,CAAC;AAEL,QAAM,6BAAyB,0BAAY,MAAM;AAC/C,UAAM,cAAc,QAAQ,UAAU,CAAC,QAAQ,IAAI,QAAQ;AAC3D,UAAM,QAAQ,gBAAgB,KAAK,cAAc,QAAQ,UAAU,CAAC,QAAQ,CAAC,IAAI,QAAQ;AACzF,QAAI,UAAU,GAAI,oBAAe,4CAAgB,4BAAU,QAAQ,KAAK,GAAG,KAAK,CAAC,CAAC;AAAA,EACpF,GAAG,CAAC,OAAO,CAAC;AAIZ,QAAM,mCAA+B,0BAAY,MAAM;AACrD,UAAM,cAAc,QAAQ,UAAU,CAAC,QAAQ,IAAI,QAAQ;AAC3D,UAAM,QAAQ,gBAAgB,KAAK,cAAc;AACjD,QAAI,UAAU,GAAI,oBAAe,4CAAgB,4BAAU,QAAQ,KAAK,GAAG,KAAK,CAAC,CAAC;AAAA,EACpF,GAAG,CAAC,SAAS,gBAAgB,CAAC;AAE9B,QAAM,4BAAwB;AAAA,IAC5B,CAAC,UAAkB;AACjB,YAAM,SAAS,QAAQ,KAAK;AAC5B,UAAI,OAAQ,oBAAe,4CAAgB,4BAAU,QAAQ,KAAK,CAAC,CAAC;AAAA,IACtE;AAAA,IACA,CAAC,OAAO;AAAA,EACV;AAEA,aAAO;AAAA,IACL,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,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
+  "names": []
+}

package/dist/cjs/config/useValidateProps.js

@@ -0,0 +1,63 @@
+"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 useValidateProps_exports = {};
+__export(useValidateProps_exports, {
+  useValidateProps: () => useValidateProps
+});
+module.exports = __toCommonJS(useValidateProps_exports);
+var React = __toESM(require("react"));
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
+var import_constants = require("../constants/index.js");
+const useValidateProps = (props, propTypes) => {
+  (0, import_ds_props_helpers.useValidateTypescriptPropTypes)(props, propTypes, import_constants.DSAppPickerName);
+  if (!props.apps.length && !props.customApps.length) {
+    throw new Error(
+      `[${import_constants.DSAppPickerName}] At least one of "apps" or "customApps" must contain items. Providing both as empty arrays renders an empty picker.`
+    );
+  }
+  const suppliedAppIds = [...props.apps, ...props.customApps].map((app) => app.id).filter((id) => id !== void 0);
+  const seen = /* @__PURE__ */ new Set();
+  const duplicates = /* @__PURE__ */ new Set();
+  for (const id of suppliedAppIds) {
+    if (seen.has(id)) duplicates.add(id);
+    else seen.add(id);
+  }
+  const duplicatedAppIds = [...duplicates];
+  if (duplicatedAppIds.length) {
+    throw new Error(
+      `[${import_constants.DSAppPickerName}] Every app "id" must be unique across "apps" and "customApps" \u2014 each one is rendered as that chip's DOM id, and duplicates produce an invalid document. Duplicated: ${duplicatedAppIds.map((id) => `"${id}"`).join(", ")}.`
+    );
+  }
+  if (props.id !== void 0 && suppliedAppIds.includes(props.id)) {
+    throw new Error(
+      `[${import_constants.DSAppPickerName}] The app "id" "${props.id}" collides with the "id" given to the component, which is rendered on the root element. Every other id is suffixed away from it \u2014 see getIdForAppPickerTrigger / getIdForAppPickerSectionTitle / getIdForAppPickerCustomSectionTitle \u2014 but this one is not ours to move.`
+    );
+  }
+};
+//# sourceMappingURL=useValidateProps.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/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 DSAppPickerT } from '../react-desc-prop-types.js';\nimport { DSAppPickerName } from '../constants/index.js';\n\nexport const useValidateProps = (props: DSAppPickerT.InternalProps, propTypes: ValidationMap<unknown>): void => {\n  useValidateTypescriptPropTypes(props, propTypes, DSAppPickerName);\n\n  if (!props.apps.length && !props.customApps.length) {\n    throw new Error(\n      `[${DSAppPickerName}] At least one of \"apps\" or \"customApps\" must contain items. ` +\n        `Providing both as empty arrays renders an empty picker.`,\n    );\n  }\n\n  /*\n   * An app's `id` is rendered verbatim as the chip's DOM id \u2014 it is the consumer's own value, deliberately\n   * left un-namespaced so they can address their chips by the identity they already know. `apps` and\n   * `customApps` are two independent arrays, so nothing about the shape of the API stops the same value\n   * appearing twice, and a duplicate DOM id is a broken document: `getElementById`, `document.querySelector`\n   * and every `aria-*` reference silently resolve to the first match only.\n   *\n   * We do not fix that by rewriting their ids \u2014 that would take away the surface the field exists to\n   * provide. We make it impossible to ship instead. Uniqueness stays the consumer's responsibility; this\n   * turns \"silently wrong in production\" into \"cannot render\", which is the only version of that\n   * responsibility that actually holds.\n   *\n   * Scoped to ids the consumer supplied: id-less apps are legal (AppSection falls back to a positional key\n   * and getChipId to a label-index identity), and no chip id is emitted for them at all.\n   */\n  const suppliedAppIds = [...props.apps, ...props.customApps]\n    .map((app) => app.id)\n    .filter((id): id is string => id !== undefined);\n\n  const seen = new Set<string>();\n  const duplicates = new Set<string>();\n  for (const id of suppliedAppIds) {\n    if (seen.has(id)) duplicates.add(id);\n    else seen.add(id);\n  }\n  const duplicatedAppIds = [...duplicates];\n  if (duplicatedAppIds.length) {\n    throw new Error(\n      `[${DSAppPickerName}] Every app \"id\" must be unique across \"apps\" and \"customApps\" \u2014 each one is ` +\n        `rendered as that chip's DOM id, and duplicates produce an invalid document. ` +\n        `Duplicated: ${duplicatedAppIds.map((id) => `\"${id}\"`).join(', ')}.`,\n    );\n  }\n\n  /*\n   * Same defect, one level up: the consumer's `id` lands unmodified on the ROOT (see util/instanceIds), so\n   * an app carrying that same value collides with it. Every id this component generates for itself is\n   * suffixed through that module and therefore cannot participate \u2014 this is the one remaining pair where\n   * two consumer-supplied values meet.\n   */\n  if (props.id !== undefined && suppliedAppIds.includes(props.id)) {\n    throw new Error(\n      `[${DSAppPickerName}] The app \"id\" \"${props.id}\" collides with the \"id\" given to the component, ` +\n        `which is rendered on the root element. Every other id is suffixed away from it \u2014 see ` +\n        `getIdForAppPickerTrigger / getIdForAppPickerSectionTitle / getIdForAppPickerCustomSectionTitle \u2014 but this one is not ours to move.`,\n    );\n  }\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,CAAC,OAAmC,cAA4C;AAC9G,8DAA+B,OAAO,WAAW,gCAAe;AAEhE,MAAI,CAAC,MAAM,KAAK,UAAU,CAAC,MAAM,WAAW,QAAQ;AAClD,UAAM,IAAI;AAAA,MACR,IAAI,gCAAe;AAAA,IAErB;AAAA,EACF;AAiBA,QAAM,iBAAiB,CAAC,GAAG,MAAM,MAAM,GAAG,MAAM,UAAU,EACvD,IAAI,CAAC,QAAQ,IAAI,EAAE,EACnB,OAAO,CAAC,OAAqB,OAAO,MAAS;AAEhD,QAAM,OAAO,oBAAI,IAAY;AAC7B,QAAM,aAAa,oBAAI,IAAY;AACnC,aAAW,MAAM,gBAAgB;AAC/B,QAAI,KAAK,IAAI,EAAE,EAAG,YAAW,IAAI,EAAE;AAAA,QAC9B,MAAK,IAAI,EAAE;AAAA,EAClB;AACA,QAAM,mBAAmB,CAAC,GAAG,UAAU;AACvC,MAAI,iBAAiB,QAAQ;AAC3B,UAAM,IAAI;AAAA,MACR,IAAI,gCAAe,6KAEF,iBAAiB,IAAI,CAAC,OAAO,IAAI,EAAE,GAAG,EAAE,KAAK,IAAI,CAAC;AAAA,IACrE;AAAA,EACF;AAQA,MAAI,MAAM,OAAO,UAAa,eAAe,SAAS,MAAM,EAAE,GAAG;AAC/D,UAAM,IAAI;AAAA,MACR,IAAI,gCAAe,mBAAmB,MAAM,EAAE;AAAA,IAGhD;AAAA,EACF;AACF;",
+  "names": []
+}

package/dist/cjs/constants/index.js

@@ -28,6 +28,8 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var constants_exports = {};
 __export(constants_exports, {
+  APP_PICKER_REGION_FOCUSES: () => APP_PICKER_REGION_FOCUSES,
+  CHIP_REGION_PREFIX: () => CHIP_REGION_PREFIX,
   DSAppPickerDataTestIds: () => DSAppPickerDataTestIds,
   DSAppPickerName: () => DSAppPickerName,
   DSAppPickerSlots: () => DSAppPickerSlots
@@ -36,14 +38,22 @@ module.exports = __toCommonJS(constants_exports);
 var React = __toESM(require("react"));
 var import_ds_system = require("@elliemae/ds-system");
 const DSAppPickerName = "DSApppicker";
+const APP_PICKER_REGION_FOCUSES = {
+  RESET: "",
+  TRIGGER: "trigger",
+  PANEL: "panel"
+};
+const CHIP_REGION_PREFIX = "chip-";
 const DSAppPickerSlots = {
   ROOT: "root",
+  GROUP: "group",
   ITEM: "item",
   TITLE: "title",
   SEPARATOR: "separator",
   ROW: "row",
   CHIP: "chip",
-  BUTTON: "button"
+  BUTTON: "button",
+  FLOATING_WRAPPER: "floating-wrapper"
 };
 const DSAppPickerDataTestIds = {
   ...(0, import_ds_system.slotObjectToDataTestIds)(DSAppPickerName, DSAppPickerSlots),

package/dist/cjs/constants/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/constants/index.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSAppPickerName = 'DSApppicker';\n\nexport const DSAppPickerSlots = {\n  ROOT: 'root',\n  ITEM: 'item',\n  TITLE: 'title',\n  SEPARATOR: 'separator',\n  ROW: 'row',\n  CHIP: 'chip',\n  BUTTON: 'button',\n};\n\nexport const DSAppPickerDataTestIds = {\n  ...(slotObjectToDataTestIds(DSAppPickerName, DSAppPickerSlots) as Record<keyof typeof DSAppPickerSlots, string>),\n  CHIP: 'app-picker__chip',\n  BUTTON: 'app-picker__button',\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;AAEjC,MAAM,kBAAkB;AAExB,MAAM,mBAAmB;AAAA,EAC9B,MAAM;AAAA,EACN,MAAM;AAAA,EACN,OAAO;AAAA,EACP,WAAW;AAAA,EACX,KAAK;AAAA,EACL,MAAM;AAAA,EACN,QAAQ;AACV;AAEO,MAAM,yBAAyB;AAAA,EACpC,OAAI,0CAAwB,iBAAiB,gBAAgB;AAAA,EAC7D,MAAM;AAAA,EACN,QAAQ;AACV;",
+  "sourcesContent": ["import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\n// DEV-001: triple-p \"DSApppicker\" is the legacy public name. Renaming would break consumers.\n// See KNOWN_INTENTIONAL_DEVIATIONS.md.\nexport const DSAppPickerName = 'DSApppicker';\n\n// we are naming this with the ${component_name}_region_focuses convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const APP_PICKER_REGION_FOCUSES = {\n  RESET: '',\n  TRIGGER: 'trigger',\n  PANEL: 'panel',\n} as const;\n\n// Prefix for the per-chip focus-region identifiers (see getChipRegionId in src/util).\nexport const CHIP_REGION_PREFIX = 'chip-';\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const DSAppPickerSlots = {\n  ROOT: 'root',\n  GROUP: 'group',\n  ITEM: 'item',\n  TITLE: 'title',\n  SEPARATOR: 'separator',\n  ROW: 'row',\n  CHIP: 'chip',\n  BUTTON: 'button',\n  FLOATING_WRAPPER: 'floating-wrapper',\n} as const;\n\n// Layer 2 legacy data-testid overrides:\n// CHIP and BUTTON predate the slot naming scheme; existing QA selectors must keep matching.\n// See project_compatibility.md (legacy data-testid 3-layer override pattern).\nexport const DSAppPickerDataTestIds = {\n  ...(slotObjectToDataTestIds(DSAppPickerName, DSAppPickerSlots) as Record<keyof typeof DSAppPickerSlots, string>),\n  CHIP: 'app-picker__chip',\n  BUTTON: 'app-picker__button',\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;AAIjC,MAAM,kBAAkB;AAGxB,MAAM,4BAA4B;AAAA,EACvC,OAAO;AAAA,EACP,SAAS;AAAA,EACT,OAAO;AACT;AAGO,MAAM,qBAAqB;AAG3B,MAAM,mBAAmB;AAAA,EAC9B,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM;AAAA,EACN,OAAO;AAAA,EACP,WAAW;AAAA,EACX,KAAK;AAAA,EACL,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,kBAAkB;AACpB;AAKO,MAAM,yBAAyB;AAAA,EACpC,OAAI,0CAAwB,iBAAiB,gBAAgB;AAAA,EAC7D,MAAM;AAAA,EACN,QAAQ;AACV;",
   "names": []
 }

package/dist/cjs/index.js

@@ -32,10 +32,17 @@ __export(index_exports, {
   DSAppPicker: () => import_DSAppPicker.DSAppPicker,
   DSAppPickerDataTestIds: () => import_constants.DSAppPickerDataTestIds,
   DSAppPickerName: () => import_constants.DSAppPickerName,
-  DSAppPickerSlots: () => import_constants.DSAppPickerSlots
+  DSAppPickerSlots: () => import_constants.DSAppPickerSlots,
+  getDSAppPickerContractProps: () => import_getDSAppPickerContractProps.getDSAppPickerContractProps,
+  getIdForAppPickerCustomSectionTitle: () => import_instanceIds.getIdForAppPickerCustomSectionTitle,
+  getIdForAppPickerRoot: () => import_instanceIds.getIdForAppPickerRoot,
+  getIdForAppPickerSectionTitle: () => import_instanceIds.getIdForAppPickerSectionTitle,
+  getIdForAppPickerTrigger: () => import_instanceIds.getIdForAppPickerTrigger
 });
 module.exports = __toCommonJS(index_exports);
 var React = __toESM(require("react"));
 var import_DSAppPicker = require("./DSAppPicker.js");
 var import_constants = require("./constants/index.js");
+var import_getDSAppPickerContractProps = require("./util/getDSAppPickerContractProps.js");
+var import_instanceIds = require("./util/instanceIds.js");
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../src/index.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["export { DSAppPicker, AppPickerWithSchema } from './DSAppPicker.js';\nexport { DSAppPickerName, DSAppPickerSlots, DSAppPickerDataTestIds } from './constants/index.js';\nexport type { DSAppPickerT } from './react-desc-prop-types.js';\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,yBAAiD;AACjD,uBAA0E;",
+  "sources": ["../../src/index.ts", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["export { DSAppPicker, AppPickerWithSchema } from './DSAppPicker.js';\nexport { DSAppPickerName, DSAppPickerSlots, DSAppPickerDataTestIds } from './constants/index.js';\nexport { getDSAppPickerContractProps } from './util/getDSAppPickerContractProps.js';\nexport {\n  getIdForAppPickerRoot,\n  getIdForAppPickerTrigger,\n  getIdForAppPickerSectionTitle,\n  getIdForAppPickerCustomSectionTitle,\n} from './util/instanceIds.js';\nexport type { DSAppPickerT } from './react-desc-prop-types.js';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,yBAAiD;AACjD,uBAA0E;AAC1E,yCAA4C;AAC5C,yBAKO;",
   "names": []
 }

package/dist/cjs/package.json

@@ -3,8 +3,5 @@
   "sideEffects": [
     "*.css",
     "*.scss"
-  ],
-  "publishConfig": {
-    "access": "public"
-  }
+  ]
 }