@elliemae/ds-app-picker 3.70.0-next.6 → 3.70.0-next.60

package/dist/cjs/util/getChipRegionId.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/util/getChipRegionId.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { CHIP_REGION_PREFIX } from '../constants/index.js';\n\n// Maps a chipId (see getChipId) to its focus-region identifier. Standalone leaf util \u2014 depends only\n// on the constants module \u2014 so the hook and the parts can share it without importing through the\n// hook, keeping the dependency graph acyclic.\nexport const getChipRegionId = (chipId: string): string => `${CHIP_REGION_PREFIX}${chipId}`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAmC;AAK5B,MAAM,kBAAkB,CAAC,WAA2B,GAAG,mCAAkB,GAAG,MAAM;",
+  "names": []
+}

package/dist/esm/DSAppPicker.js

@@ -1,153 +1,22 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
-import { useState, useEffect, useMemo, useRef, useCallback } from "react";
-import { DSButtonV2 } from "@elliemae/ds-button-v2";
-import { mergeRefs, styled } from "@elliemae/ds-system";
 import { describe } from "@elliemae/ds-props-helpers";
-import { DSPopover } from "@elliemae/ds-legacy-popover";
-import AppPickerImpl from "./AppPickerImpl.js";
-import { DSAppPickerPropTypes } from "./react-desc-prop-types.js";
-import { DSAppPickerName, DSAppPickerSlots } from "./constants/index.js";
+import React2 from "react";
 import { useAppPicker } from "./config/useAppPicker.js";
-const StyledButton = styled(DSButtonV2, { name: DSAppPickerName, slot: DSAppPickerSlots.BUTTON })``;
+import { DSAppPickerName } from "./constants/index.js";
+import { DSAppPickerContext } from "./DSAppPickerCTX.js";
+import { AppPickerContent } from "./parts/AppPickerFloatingContext/AppPickerContent.js";
+import { DSAppPickerPropTypesSchema } from "./react-desc-prop-types.js";
 const DSAppPicker = (props) => {
-  const { propsWithDefault, ownerPropsConfig } = 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] = useState(false);
-  const [isOverflow, setIsOverflow] = useState(false);
-  const wrapperRef = useRef(null);
-  const defaultTriggerRef = useRef(null);
-  const wasOpenedByKeyboardRef = useRef(false);
-  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]);
-  useEffect(() => {
-    setTimeout(() => {
-      if (wrapperRef.current) {
-        const { scrollHeight, clientHeight } = wrapperRef.current;
-        if (scrollHeight > clientHeight) return setIsOverflow(true);
-      }
-      return setIsOverflow(false);
-    });
-  }, [isOpen, open]);
-  const handleOnClose = useCallback(() => {
-    setOpen(false);
-    onClose?.();
-  }, [onClose]);
-  const handleOnClickOutside = (e) => {
-    setOpen(false);
-    onClose?.();
-    onClickOutside?.(e);
-  };
-  const AppPickerContent = useCallback(
-    () => /* @__PURE__ */ jsx(
-      AppPickerImpl,
-      {
-        ...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 = useMemo(
-    () => renderTrigger || (({ ref }) => /* @__PURE__ */ 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: mergeRefs(ref, triggerRef || defaultTriggerRef),
-        onClick: (e) => {
-          wasOpenedByKeyboardRef.current = e.detail === 0;
-          onClick?.(e);
-          setOpen(true);
-        },
-        getOwnerProps,
-        getOwnerPropsArguments,
-        children: /* @__PURE__ */ jsx(Icon, {})
-      }
-    )),
-    [Icon, getOwnerProps, getOwnerPropsArguments, isOpen, onClick, open, renderTrigger, triggerRef]
-  );
-  return /* @__PURE__ */ jsx(
-    DSPopover,
-    {
-      content: /* @__PURE__ */ 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 = useAppPicker(props);
+  const ctx = React2.useMemo(() => ({ ...appPickerConfig }), [appPickerConfig]);
+  return /* @__PURE__ */ jsx(DSAppPickerContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(AppPickerContent, {}) });
 };
 DSAppPicker.displayName = DSAppPickerName;
 const AppPickerWithSchema = describe(DSAppPicker);
-AppPickerWithSchema.propTypes = DSAppPickerPropTypes;
-var DSAppPicker_default = DSAppPicker;
+AppPickerWithSchema.propTypes = DSAppPickerPropTypesSchema;
 export {
   AppPickerWithSchema,
-  DSAppPicker,
-  DSAppPicker_default as default
+  DSAppPicker
 };
 //# sourceMappingURL=DSAppPicker.js.map

package/dist/esm/DSAppPicker.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSAppPicker.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
-  "mappings": "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",
-  "names": []
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "AAAA,YAAY,WAAW;ACejB;AAfN,SAAS,gBAAgB;AACzB,OAAOA,YAAW;AAClB,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,0BAA+C;AACxD,SAAS,wBAAwB;AAEjC,SAAS,kCAAkC;AAE3C,MAAM,cAAuD,CAAC,UAAU;AACtE,QAAM,kBAAkB,aAAa,KAAK;AAC1C,QAAM,MAAsBA,OAAM,QAAQ,OAAO,EAAE,GAAG,gBAAgB,IAAI,CAAC,eAAe,CAAC;AAE3F,SACE,oBAAC,mBAAmB,UAAnB,EAA4B,OAAO,KAClC,8BAAC,oBAAiB,GACpB;AAEJ;AAEA,YAAY,cAAc;AAC1B,MAAM,sBAAsB,SAAS,WAAW;AAChD,oBAAoB,YAAY;",
+  "names": ["React"]
 }

package/dist/esm/DSAppPickerCTX.js

@@ -0,0 +1,8 @@
+import * as React from "react";
+import { createContext } from "react";
+const defaultContext = {};
+const DSAppPickerContext = createContext(defaultContext);
+export {
+  DSAppPickerContext
+};
+//# sourceMappingURL=DSAppPickerCTX.js.map

package/dist/esm/DSAppPickerCTX.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSAppPickerCTX.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,qBAAqB;AAK9B,MAAM,iBAAiB,CAAC;AAIjB,MAAM,qBAAqB,cAA8B,cAAc;",
+  "names": []
+}

package/dist/esm/config/useAppPicker.js

@@ -1,28 +1,44 @@
 import * as React from "react";
-import React2 from "react";
 import {
+  useGetGlobalAttributes,
+  useGetXstyledProps,
   useMemoMergePropsWithDefault,
-  useOwnerProps,
-  useValidateTypescriptPropTypes,
-  getGlobalAttributes,
-  getXstyledProps
+  useOwnerProps
 } from "@elliemae/ds-props-helpers";
-import { defaultProps, DSAppPickerPropTypes } from "../react-desc-prop-types.js";
-import { DSAppPickerName } from "../constants/index.js";
+import React2, { useMemo, useRef, useState } from "react";
+import { uid } from "uid";
+import { defaultProps, DSAppPickerPropTypesSchema } from "../react-desc-prop-types.js";
+import { useFocusTracker } from "./useFocusTracker.js";
+import { useValidateProps } from "./useValidateProps.js";
 const useAppPicker = (props) => {
   const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
-  useValidateTypescriptPropTypes(propsWithDefault, DSAppPickerPropTypes, DSAppPickerName);
-  const ownerPropsConfig = useOwnerProps(propsWithDefault, { ...props });
-  const globalAttributes = getGlobalAttributes(props);
-  const xstyledProps = getXstyledProps(props);
+  useValidateProps(propsWithDefault, DSAppPickerPropTypesSchema);
+  const ownerPropsConfig = useOwnerProps(propsWithDefault, propsWithDefault);
+  const globalAttributes = useGetGlobalAttributes(props);
+  const xstyledProps = useGetXstyledProps(props);
+  const wasOpenedByKeyboardRef = useRef(false);
+  const { isOpen, apps, customApps, id } = propsWithDefault;
+  const [internalIsOpen, setInternalIsOpen] = useState(false);
+  const resolvedIsOpen = typeof isOpen === "boolean" ? isOpen : internalIsOpen;
+  const mountedOpenAutofocusPendingRef = useRef(resolvedIsOpen);
+  const allApps = useMemo(() => [...apps, ...customApps], [apps, customApps]);
+  const useFocusTrackerConfig = useMemo(() => ({ allApps }), [allApps]);
+  const focusTrackers = useFocusTracker(useFocusTrackerConfig);
+  const instanceUid = React2.useMemo(() => id || `ds-app-picker-${uid(5)}`, [id]);
   return React2.useMemo(
     () => ({
+      focusTrackers,
       propsWithDefault,
       ownerPropsConfig,
       globalAttributes,
-      xstyledProps
+      xstyledProps,
+      wasOpenedByKeyboardRef,
+      mountedOpenAutofocusPendingRef,
+      resolvedIsOpen,
+      setInternalIsOpen,
+      instanceUid
     }),
-    [propsWithDefault, ownerPropsConfig, globalAttributes, xstyledProps]
+    [focusTrackers, propsWithDefault, ownerPropsConfig, globalAttributes, xstyledProps, resolvedIsOpen, instanceUid]
   );
 };
 export {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useAppPicker.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAClB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAA4B,cAAc,4BAA4B;AACtE,SAAS,uBAAuB;AAEzB,MAAM,eAAe,CAAC,UAA8B;AAIzD,QAAM,mBAAmB,6BAAyD,OAAO,YAAY;AACrG,iCAA+B,kBAAkB,sBAAsB,eAAe;AAItF,QAAM,mBAAmB,cAAc,kBAAkB,EAAE,GAAG,MAAM,CAAC;AAErE,QAAM,mBAAmB,oBAAwC,KAAK;AACtE,QAAM,eAAe,gBAAoC,KAAK;AAC9D,SAAOA,OAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,kBAAkB,kBAAkB,kBAAkB,YAAY;AAAA,EACrE;AACF;",
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useAppPicker.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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  const wasOpenedByKeyboardRef = useRef(false);\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      wasOpenedByKeyboardRef,\n      mountedOpenAutofocusPendingRef,\n      resolvedIsOpen,\n      setInternalIsOpen,\n      instanceUid,\n    }),\n    [focusTrackers, propsWithDefault, ownerPropsConfig, globalAttributes, xstyledProps, resolvedIsOpen, instanceUid],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,OAAOA,UAAS,SAAS,QAAQ,gBAAgB;AACjD,SAAS,WAAW;AACpB,SAA4B,cAAc,kCAAkC;AAC5E,SAAS,uBAAuB;AAChC,SAAS,wBAAwB;AAE1B,MAAM,eAAe,CAAC,UAA8B;AAIzD,QAAM,mBAAmB,6BAAyD,OAAO,YAAY;AACrG,mBAAiB,kBAAkB,0BAA0B;AAM7D,QAAM,mBAAmB,cAAc,kBAAkB,gBAAgB;AAEzE,QAAM,mBAAmB,uBAA2C,KAAK;AACzE,QAAM,eAAe,mBAAuC,KAAK;AAIjE,QAAM,yBAAyB,OAAO,KAAK;AAO3C,QAAM,EAAE,QAAQ,MAAM,YAAY,GAAG,IAAI;AACzC,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,KAAK;AAC1D,QAAM,iBAAiB,OAAO,WAAW,YAAY,SAAS;AAO9D,QAAM,iCAAiC,OAAO,cAAc;AAE5D,QAAM,UAAU,QAAQ,MAAM,CAAC,GAAG,MAAM,GAAG,UAAU,GAAG,CAAC,MAAM,UAAU,CAAC;AAC1E,QAAM,wBAAwB,QAAQ,OAAO,EAAE,QAAQ,IAAI,CAAC,OAAO,CAAC;AACpE,QAAM,gBAAgB,gBAAgB,qBAAqB;AAE3D,QAAM,cAAcA,OAAM,QAAQ,MAAM,MAAM,iBAAiB,IAAI,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC;AAE7E,SAAOA,OAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,eAAe,kBAAkB,kBAAkB,kBAAkB,cAAc,gBAAgB,WAAW;AAAA,EACjH;AACF;",
   "names": ["React"]
 }

package/dist/esm/config/useFocusTracker.js

@@ -0,0 +1,74 @@
+import * as React from "react";
+import { useCallback, useMemo, useRef, useState } from "react";
+import { APP_PICKER_REGION_FOCUSES } from "../constants/index.js";
+import { getChipId } from "../util/getChipId.js";
+import { getChipRegionId } from "../util/getChipRegionId.js";
+const useFocusTracker = (config) => {
+  const { allApps } = config;
+  const firstFocusableIdx = useMemo(() => allApps.findIndex((app) => !app.disabled), [allApps]);
+  const lastFocusableIdx = useMemo(() => allApps.reduce((acc, app, i) => !app.disabled ? i : acc, -1), [allApps]);
+  const [focusRegion, setFocusRegion] = useState(APP_PICKER_REGION_FOCUSES.RESET);
+  const firstFocusableRef = useRef(null);
+  const lastFocusableRef = useRef(null);
+  const trackFocusChip = useCallback((chipId) => {
+    setFocusRegion(getChipRegionId(chipId));
+  }, []);
+  const trackFocusRegionReset = useCallback(() => {
+    setFocusRegion(APP_PICKER_REGION_FOCUSES.RESET);
+  }, []);
+  const trackFocusTrigger = useCallback(() => {
+    setFocusRegion(APP_PICKER_REGION_FOCUSES.TRIGGER);
+  }, []);
+  const trackFocusPanel = useCallback(() => {
+    setFocusRegion(APP_PICKER_REGION_FOCUSES.PANEL);
+  }, []);
+  const trackFocusSelectedItem = useCallback(() => {
+    const selectedIdx = allApps.findIndex((app) => app.selected);
+    const index = selectedIdx !== -1 ? selectedIdx : allApps.findIndex((app) => !app.disabled);
+    if (index !== -1) setFocusRegion(getChipRegionId(getChipId(allApps[index], index)));
+  }, [allApps]);
+  const trackFocusFirstItem = useCallback(() => {
+    if (firstFocusableIdx !== -1) {
+      setFocusRegion(getChipRegionId(getChipId(allApps[firstFocusableIdx], firstFocusableIdx)));
+    }
+  }, [firstFocusableIdx, allApps]);
+  const trackFocusItemAtIndex = useCallback(
+    (index) => {
+      const target = allApps[index];
+      if (target) setFocusRegion(getChipRegionId(getChipId(target, index)));
+    },
+    [allApps]
+  );
+  return useMemo(
+    () => ({
+      firstFocusableIdx,
+      lastFocusableIdx,
+      focusRegion,
+      firstFocusableRef,
+      lastFocusableRef,
+      trackFocusChip,
+      trackFocusRegionReset,
+      trackFocusTrigger,
+      trackFocusPanel,
+      trackFocusSelectedItem,
+      trackFocusFirstItem,
+      trackFocusItemAtIndex
+    }),
+    [
+      firstFocusableIdx,
+      lastFocusableIdx,
+      focusRegion,
+      trackFocusChip,
+      trackFocusRegionReset,
+      trackFocusTrigger,
+      trackFocusPanel,
+      trackFocusSelectedItem,
+      trackFocusFirstItem,
+      trackFocusItemAtIndex
+    ]
+  );
+};
+export {
+  useFocusTracker
+};
+//# sourceMappingURL=useFocusTracker.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useFocusTracker.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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  const trackFocusFirstItem = useCallback(() => {\n    if (firstFocusableIdx !== -1) {\n      setFocusRegion(getChipRegionId(getChipId(allApps[firstFocusableIdx], firstFocusableIdx)));\n    }\n  }, [firstFocusableIdx, allApps]);\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      trackFocusFirstItem,\n      trackFocusItemAtIndex,\n    }),\n    [\n      firstFocusableIdx,\n      lastFocusableIdx,\n      focusRegion,\n      trackFocusChip,\n      trackFocusRegionReset,\n      trackFocusTrigger,\n      trackFocusPanel,\n      trackFocusSelectedItem,\n      trackFocusFirstItem,\n      trackFocusItemAtIndex,\n    ],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,aAAa,SAAS,QAAQ,gBAAgB;AACvD,SAAS,iCAAiC;AAE1C,SAAS,iBAAiB;AAC1B,SAAS,uBAAuB;AAMzB,MAAM,kBAAkB,CAAC,WAAgC;AAC9D,QAAM,EAAE,QAAQ,IAAI;AAKpB,QAAM,oBAAoB,QAAQ,MAAM,QAAQ,UAAU,CAAC,QAAQ,CAAC,IAAI,QAAQ,GAAG,CAAC,OAAO,CAAC;AAC5F,QAAM,mBAAmB,QAAQ,MAAM,QAAQ,OAAO,CAAC,KAAK,KAAK,MAAO,CAAC,IAAI,WAAW,IAAI,KAAM,EAAE,GAAG,CAAC,OAAO,CAAC;AAEhH,QAAM,CAAC,aAAa,cAAc,IAAI,SAAiB,0BAA0B,KAAK;AAItF,QAAM,oBAAoB,OAA2B,IAAI;AACzD,QAAM,mBAAmB,OAA2B,IAAI;AAExD,QAAM,iBAAiB,YAAY,CAAC,WAAmB;AACrD,mBAAe,gBAAgB,MAAM,CAAC;AAAA,EACxC,GAAG,CAAC,CAAC;AAEL,QAAM,wBAAwB,YAAY,MAAM;AAC9C,mBAAe,0BAA0B,KAAK;AAAA,EAChD,GAAG,CAAC,CAAC;AAEL,QAAM,oBAAoB,YAAY,MAAM;AAC1C,mBAAe,0BAA0B,OAAO;AAAA,EAClD,GAAG,CAAC,CAAC;AAEL,QAAM,kBAAkB,YAAY,MAAM;AACxC,mBAAe,0BAA0B,KAAK;AAAA,EAChD,GAAG,CAAC,CAAC;AAEL,QAAM,yBAAyB,YAAY,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,gBAAe,gBAAgB,UAAU,QAAQ,KAAK,GAAG,KAAK,CAAC,CAAC;AAAA,EACpF,GAAG,CAAC,OAAO,CAAC;AAEZ,QAAM,sBAAsB,YAAY,MAAM;AAC5C,QAAI,sBAAsB,IAAI;AAC5B,qBAAe,gBAAgB,UAAU,QAAQ,iBAAiB,GAAG,iBAAiB,CAAC,CAAC;AAAA,IAC1F;AAAA,EACF,GAAG,CAAC,mBAAmB,OAAO,CAAC;AAE/B,QAAM,wBAAwB;AAAA,IAC5B,CAAC,UAAkB;AACjB,YAAM,SAAS,QAAQ,KAAK;AAC5B,UAAI,OAAQ,gBAAe,gBAAgB,UAAU,QAAQ,KAAK,CAAC,CAAC;AAAA,IACtE;AAAA,IACA,CAAC,OAAO;AAAA,EACV;AAEA,SAAO;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/esm/config/useValidateProps.js

@@ -0,0 +1,15 @@
+import * as React from "react";
+import { useValidateTypescriptPropTypes } from "@elliemae/ds-props-helpers";
+import { DSAppPickerName } from "../constants/index.js";
+const useValidateProps = (props, propTypes) => {
+  useValidateTypescriptPropTypes(props, propTypes, DSAppPickerName);
+  if (!props.apps.length && !props.customApps.length) {
+    throw new Error(
+      `[${DSAppPickerName}] At least one of "apps" or "customApps" must contain items. Providing both as empty arrays renders an empty picker.`
+    );
+  }
+};
+export {
+  useValidateProps
+};
+//# sourceMappingURL=useValidateProps.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useValidateProps.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,sCAAsC;AAG/C,SAAS,uBAAuB;AAEzB,MAAM,mBAAmB,CAAC,OAAmC,cAA4C;AAC9G,iCAA+B,OAAO,WAAW,eAAe;AAEhE,MAAI,CAAC,MAAM,KAAK,UAAU,CAAC,MAAM,WAAW,QAAQ;AAClD,UAAM,IAAI;AAAA,MACR,IAAI,eAAe;AAAA,IAErB;AAAA,EACF;AACF;",
+  "names": []
+}

package/dist/esm/constants/index.js

@@ -1,14 +1,22 @@
 import * as React from "react";
 import { slotObjectToDataTestIds } from "@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 = {
   ...slotObjectToDataTestIds(DSAppPickerName, DSAppPickerSlots),
@@ -16,6 +24,8 @@ const DSAppPickerDataTestIds = {
   BUTTON: "app-picker__button"
 };
 export {
+  APP_PICKER_REGION_FOCUSES,
+  CHIP_REGION_PREFIX,
   DSAppPickerDataTestIds,
   DSAppPickerName,
   DSAppPickerSlots

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/constants/index.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;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,GAAI,wBAAwB,iBAAiB,gBAAgB;AAAA,EAC7D,MAAM;AAAA,EACN,QAAQ;AACV;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;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,GAAI,wBAAwB,iBAAiB,gBAAgB;AAAA,EAC7D,MAAM;AAAA,EACN,QAAQ;AACV;",
   "names": []
 }

package/dist/esm/index.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/index.ts"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { DSAppPicker, AppPickerWithSchema } from './DSAppPicker.js';\nexport { DSAppPickerName, DSAppPickerSlots, DSAppPickerDataTestIds } from './constants/index.js';\nexport type { DSAppPickerT } from './react-desc-prop-types.js';\n"],
   "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,aAAa,2BAA2B;AACjD,SAAS,iBAAiB,kBAAkB,8BAA8B;",
   "names": []

package/dist/esm/package.json

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

package/dist/esm/parts/AppPanel.js

@@ -0,0 +1,127 @@
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Grid } from "@elliemae/ds-grid";
+import { useFocusTrap } from "@elliemae/ds-hooks-focus-trap";
+import { styled } from "@elliemae/ds-system";
+import React2, { memo, useCallback, useContext, useEffect } from "react";
+import {
+  APP_PICKER_REGION_FOCUSES,
+  DSAppPickerDataTestIds,
+  DSAppPickerName,
+  DSAppPickerSlots
+} from "../constants/index.js";
+import { DSAppPickerContext } from "../DSAppPickerCTX.js";
+import { AppSection } from "./AppSection.js";
+import { StyledListItemFullRow } from "./shared-styles.js";
+const StyledWrapper = styled(Grid, { name: DSAppPickerName, slot: DSAppPickerSlots.ROOT })`
+  background-color: ${({ theme }) => theme.colors.neutral["000"]};
+  min-width: 308px;
+  min-height: 110px;
+  max-height: 449px;
+  width: 308px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  /* Baseline 2024: reserve scrollbar gutter so the layout doesn't shift between overflow/no-overflow.
+     Replaces a JS isOverflow detection effect that toggled right padding. */
+  scrollbar-gutter: stable;
+  margin: 0;
+  padding: 0 0 8px 16px;
+  &:focus {
+    outline: none;
+  }
+`;
+const StyledSeparator = styled("hr", { name: DSAppPickerName, slot: DSAppPickerSlots.SEPARATOR })`
+  border-top: 1px solid ${({ theme }) => theme.colors.neutral[300]};
+  border-bottom: none;
+  width: 100%;
+  margin: 8px 0 0 0;
+`;
+const wrapperGridLayout = {
+  cols: ["repeat(3, 92px)"],
+  // Row tracks are intentionally auto-sized:
+  // - title row picks up its own typography height
+  // - chip rows expand when `wrapText` causes a chip to wrap onto a second line (Reflow story)
+  // - separator row picks up its own 1px height + margin
+  rows: ["auto"]
+};
+const useExecOnceAfterFirstRender = (callback) => {
+  const hasExecutedRef = React2.useRef(false);
+  const executeInitialFocusRef = React2.useRef(callback);
+  executeInitialFocusRef.current = callback;
+  useEffect(() => {
+    if (!hasExecutedRef.current) {
+      executeInitialFocusRef.current();
+      hasExecutedRef.current = true;
+    }
+  }, []);
+};
+const useMountedOpenAutofocusNuance = ({
+  pendingRef,
+  triggerIsInternal,
+  trackFocusPanel,
+  trackFocusFirstItem
+}) => {
+  useExecOnceAfterFirstRender(() => {
+    if (!pendingRef.current) return;
+    pendingRef.current = false;
+    if (triggerIsInternal) trackFocusPanel();
+    else trackFocusFirstItem();
+  });
+};
+const AppPanelBase = () => {
+  const {
+    propsWithDefault: { customApps, renderTrigger, onKeyDown },
+    ownerPropsConfig,
+    globalAttributes,
+    xstyledProps,
+    mountedOpenAutofocusPendingRef,
+    focusTrackers: { focusRegion, firstFocusableRef, lastFocusableRef, trackFocusPanel, trackFocusFirstItem }
+  } = useContext(DSAppPickerContext);
+  const triggerIsInternal = !renderTrigger;
+  const { wrap, onClick, onKeyDown: onKeyDownGlobal, ...safeGlobalAttributes } = globalAttributes;
+  useMountedOpenAutofocusNuance({
+    pendingRef: mountedOpenAutofocusPendingRef,
+    triggerIsInternal,
+    trackFocusPanel,
+    trackFocusFirstItem
+  });
+  const isWrapperFocused = focusRegion === APP_PICKER_REGION_FOCUSES.PANEL;
+  const handleWrapperRef = useCallback(
+    (node) => {
+      if (node && isWrapperFocused) node.focus();
+    },
+    [isWrapperFocused]
+  );
+  const handleOnKeyDown = useFocusTrap({
+    firstElementRef: firstFocusableRef,
+    lastElementRef: lastFocusableRef,
+    onKeyDown
+  });
+  return /* @__PURE__ */ jsxs(
+    StyledWrapper,
+    {
+      innerRef: handleWrapperRef,
+      "data-testid": DSAppPickerDataTestIds.ROOT,
+      cols: wrapperGridLayout.cols,
+      rows: wrapperGridLayout.rows,
+      tabIndex: -1,
+      ...ownerPropsConfig,
+      ...safeGlobalAttributes,
+      ...xstyledProps,
+      onKeyDown: handleOnKeyDown,
+      children: [
+        /* @__PURE__ */ jsx(AppSection, {}),
+        customApps.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(StyledListItemFullRow, { "data-testid": DSAppPickerDataTestIds.ROW, ...ownerPropsConfig, children: /* @__PURE__ */ jsx(StyledSeparator, { "data-testid": DSAppPickerDataTestIds.SEPARATOR, ...ownerPropsConfig }) }),
+          /* @__PURE__ */ jsx(AppSection, { isCustomApps: true })
+        ] })
+      ]
+    }
+  );
+};
+const AppPanel = memo(AppPanelBase);
+AppPanel.displayName = "DSAppPicker.AppPanel";
+export {
+  AppPanel
+};
+//# sourceMappingURL=AppPanel.js.map