@elliemae/ds-app-picker 3.70.0-next.3 → 3.70.0-next.30

package/dist/cjs/parts/Trigger.js

@@ -0,0 +1,62 @@
+"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 Trigger_exports = {};
+__export(Trigger_exports, {
+  Trigger: () => Trigger
+});
+module.exports = __toCommonJS(Trigger_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_ds_button_v2 = require("@elliemae/ds-button-v2");
+var import_ds_system = require("@elliemae/ds-system");
+var import_constants = require("../constants/index.js");
+const StyledButton = (0, import_ds_system.styled)(import_ds_button_v2.DSButtonV3, { name: import_constants.DSAppPickerName, slot: import_constants.DSAppPickerSlots.BUTTON })``;
+const Trigger = ({ Icon, isOpen, setRef, ownerProps, onClick, renderTrigger }) => {
+  if (renderTrigger) {
+    return renderTrigger({ ref: setRef });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    StyledButton,
+    {
+      "data-testid": import_constants.DSAppPickerDataTestIds.BUTTON,
+      id: "app-picker__button",
+      buttonType: "icon",
+      "aria-haspopup": "true",
+      "aria-expanded": isOpen,
+      "aria-label": "Application picker",
+      innerRef: setRef,
+      onClick,
+      getOwnerProps: ownerProps.getOwnerProps,
+      getOwnerPropsArguments: ownerProps.getOwnerPropsArguments,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, {})
+    }
+  );
+};
+Trigger.displayName = "DSAppPicker.Trigger";
+//# sourceMappingURL=Trigger.js.map

package/dist/cjs/parts/Trigger.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/parts/Trigger.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React from 'react';\nimport { DSButtonV3 } from '@elliemae/ds-button-v2';\nimport { styled } from '@elliemae/ds-system';\nimport type { DSAppPickerT } from '../react-desc-prop-types.js';\nimport { DSAppPickerName, DSAppPickerSlots, DSAppPickerDataTestIds } from '../constants/index.js';\n\nconst StyledButton = styled(DSButtonV3, { name: DSAppPickerName, slot: DSAppPickerSlots.BUTTON })``;\n\ninterface TriggerProps {\n  Icon: DSAppPickerT.InternalProps['icon'];\n  isOpen: boolean;\n  setRef: React.RefCallback<HTMLButtonElement>;\n  ownerProps: { getOwnerProps: () => object; getOwnerPropsArguments: () => object };\n  onClick: (e: React.MouseEvent | React.KeyboardEvent) => void;\n  renderTrigger?: DSAppPickerT.OptionalProps['renderTrigger'];\n}\n\nexport const Trigger: React.FC<TriggerProps> = ({ Icon, isOpen, setRef, ownerProps, onClick, renderTrigger }) => {\n  if (renderTrigger) {\n    // Plain function call (not React element) preserves the legacy DSPopover render-prop contract:\n    // consumers receive `ref` as a regular prop, no forwardRef required.\n    return renderTrigger({ ref: setRef });\n  }\n  return (\n    <StyledButton\n      data-testid={DSAppPickerDataTestIds.BUTTON}\n      id=\"app-picker__button\"\n      buttonType=\"icon\"\n      aria-haspopup=\"true\"\n      aria-expanded={isOpen}\n      aria-label=\"Application picker\"\n      innerRef={setRef}\n      onClick={onClick}\n      getOwnerProps={ownerProps.getOwnerProps}\n      getOwnerPropsArguments={ownerProps.getOwnerPropsArguments}\n    >\n      <Icon />\n    </StyledButton>\n  );\n};\n\nTrigger.displayName = 'DSAppPicker.Trigger';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADoCjB;AAnCN,0BAA2B;AAC3B,uBAAuB;AAEvB,uBAA0E;AAE1E,MAAM,mBAAe,yBAAO,gCAAY,EAAE,MAAM,kCAAiB,MAAM,kCAAiB,OAAO,CAAC;AAWzF,MAAM,UAAkC,CAAC,EAAE,MAAM,QAAQ,QAAQ,YAAY,SAAS,cAAc,MAAM;AAC/G,MAAI,eAAe;AAGjB,WAAO,cAAc,EAAE,KAAK,OAAO,CAAC;AAAA,EACtC;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,wCAAuB;AAAA,MACpC,IAAG;AAAA,MACH,YAAW;AAAA,MACX,iBAAc;AAAA,MACd,iBAAe;AAAA,MACf,cAAW;AAAA,MACX,UAAU;AAAA,MACV;AAAA,MACA,eAAe,WAAW;AAAA,MAC1B,wBAAwB,WAAW;AAAA,MAEnC,sDAAC,QAAK;AAAA;AAAA,EACR;AAEJ;AAEA,QAAQ,cAAc;",
+  "names": []
+}

package/dist/cjs/{styles.js → parts/style.js}

@@ -26,28 +26,39 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var styles_exports = {};
-__export(styles_exports, {
+var style_exports = {};
+__export(style_exports, {
+  StyledAppPickerFloating: () => StyledAppPickerFloating,
   StyledListItem: () => StyledListItem,
   StyledListItemFullRow: () => StyledListItemFullRow,
   StyledSeparator: () => StyledSeparator,
   StyledTitle: () => StyledTitle,
   StyledWrapper: () => StyledWrapper
 });
-module.exports = __toCommonJS(styles_exports);
+module.exports = __toCommonJS(style_exports);
 var React = __toESM(require("react"));
 var import_ds_system = require("@elliemae/ds-system");
 var import_ds_grid = require("@elliemae/ds-grid");
-var import_constants = require("./constants/index.js");
+var import_ds_typography = require("@elliemae/ds-typography");
+var import_ds_floating_context = require("@elliemae/ds-floating-context");
+var import_constants = require("../constants/index.js");
+const StyledAppPickerFloating = (0, import_ds_system.styled)(import_ds_floating_context.FloatingWrapper, {
+  name: import_constants.DSAppPickerName,
+  slot: import_constants.DSAppPickerSlots.FLOATING_WRAPPER
+})``;
 const StyledWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_constants.DSAppPickerName, slot: import_constants.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: ${({ isOverflow }) => isOverflow ? "0 0 8px 16px" : "0 16px 8px 16px"};
+  padding: 0 0 8px 16px;
   &:focus {
     outline: none;
   }
@@ -59,18 +70,19 @@ const StyledListItemFullRow = (0, import_ds_system.styled)("li", { name: import_
   list-style: none;
   grid-column: 1/4;
 `;
-const StyledTitle = (0, import_ds_system.styled)("h3", { name: import_constants.DSAppPickerName, slot: import_constants.DSAppPickerSlots.TITLE })`
+const StyledTitle = (0, import_ds_system.styled)(import_ds_typography.DSTypography, { name: import_constants.DSAppPickerName, slot: import_constants.DSAppPickerSlots.TITLE })`
   color: ${({ theme }) => theme.colors.neutral[700]};
   font-size: ${({ theme }) => theme.fontSizes.value[400]};
   font-weight: ${({ theme }) => theme.fontWeights.semibold};
   margin: 12px 0 8px 0;
   line-height: 1.385;
   text-transform: uppercase;
+  text-align: center;
 `;
 const StyledSeparator = (0, import_ds_system.styled)("hr", { name: import_constants.DSAppPickerName, slot: import_constants.DSAppPickerSlots.SEPARATOR })`
-  border-top: 1px solid ${({ theme }) => theme.colors.neutral[100]};
+  border-top: 1px solid ${({ theme }) => theme.colors.neutral[300]};
   border-bottom: none;
-  width: 99%;
+  width: 100%;
   margin: 8px 0 0 0;
 `;
-//# sourceMappingURL=styles.js.map
+//# sourceMappingURL=style.js.map

package/dist/cjs/parts/style.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/parts/style.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-unsafe-assignment */\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport { FloatingWrapper } from '@elliemae/ds-floating-context';\nimport { DSAppPickerName, DSAppPickerSlots } from '../constants/index.js';\n\nexport const StyledAppPickerFloating = styled(FloatingWrapper, {\n  name: DSAppPickerName,\n  slot: DSAppPickerSlots.FLOATING_WRAPPER,\n})``;\n\nexport const StyledWrapper = styled(Grid, { name: DSAppPickerName, slot: DSAppPickerSlots.ROOT })`\n  background-color: ${({ theme }) => theme.colors.neutral['000']};\n  min-width: 308px;\n  min-height: 110px;\n  max-height: 449px;\n  width: 308px;\n  overflow-y: auto;\n  overflow-x: hidden;\n  /* Baseline 2024: reserve scrollbar gutter so the layout doesn't shift between overflow/no-overflow.\n     Replaces a JS isOverflow detection effect that toggled right padding. */\n  scrollbar-gutter: stable;\n  margin: 0;\n  padding: 0 0 8px 16px;\n  &:focus {\n    outline: none;\n  }\n`;\n\nexport const StyledListItem = styled('li', { name: DSAppPickerName, slot: DSAppPickerSlots.ITEM })`\n  list-style: none;\n`;\n\nexport const StyledListItemFullRow = styled('li', { name: DSAppPickerName, slot: DSAppPickerSlots.ROW })`\n  list-style: none;\n  grid-column: 1/4;\n`;\n\nexport const StyledTitle = styled(DSTypography, { name: DSAppPickerName, slot: DSAppPickerSlots.TITLE })`\n  color: ${({ theme }) => theme.colors.neutral[700]};\n  font-size: ${({ theme }) => theme.fontSizes.value[400]};\n  font-weight: ${({ theme }) => theme.fontWeights.semibold};\n  margin: 12px 0 8px 0;\n  line-height: 1.385;\n  text-transform: uppercase;\n  text-align: center;\n`;\n\nexport const StyledSeparator = styled('hr', { name: DSAppPickerName, slot: DSAppPickerSlots.SEPARATOR })`\n  border-top: 1px solid ${({ theme }) => theme.colors.neutral[300]};\n  border-bottom: none;\n  width: 100%;\n  margin: 8px 0 0 0;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,uBAAuB;AACvB,qBAAqB;AACrB,2BAA6B;AAC7B,iCAAgC;AAChC,uBAAkD;AAE3C,MAAM,8BAA0B,yBAAO,4CAAiB;AAAA,EAC7D,MAAM;AAAA,EACN,MAAM,kCAAiB;AACzB,CAAC;AAEM,MAAM,oBAAgB,yBAAO,qBAAM,EAAE,MAAM,kCAAiB,MAAM,kCAAiB,KAAK,CAAC;AAAA,sBAC1E,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBzD,MAAM,qBAAiB,yBAAO,MAAM,EAAE,MAAM,kCAAiB,MAAM,kCAAiB,KAAK,CAAC;AAAA;AAAA;AAI1F,MAAM,4BAAwB,yBAAO,MAAM,EAAE,MAAM,kCAAiB,MAAM,kCAAiB,IAAI,CAAC;AAAA;AAAA;AAAA;AAKhG,MAAM,kBAAc,yBAAO,mCAAc,EAAE,MAAM,kCAAiB,MAAM,kCAAiB,MAAM,CAAC;AAAA,WAC5F,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,eACpC,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,MAAM,GAAG,CAAC;AAAA,iBACvC,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAOnD,MAAM,sBAAkB,yBAAO,MAAM,EAAE,MAAM,kCAAiB,MAAM,kCAAiB,UAAU,CAAC;AAAA,0BAC7E,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/dist/cjs/react-desc-prop-types.js

@@ -29,6 +29,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var react_desc_prop_types_exports = {};
 __export(react_desc_prop_types_exports, {
   DSAppPickerPropTypes: () => DSAppPickerPropTypes,
+  DSAppPickerPropTypesSchema: () => DSAppPickerPropTypesSchema,
   defaultProps: () => defaultProps
 });
 module.exports = __toCommonJS(react_desc_prop_types_exports);
@@ -38,7 +39,6 @@ var import_ds_icons = require("@elliemae/ds-icons");
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 var import_constants = require("./constants/index.js");
 const defaultProps = {
-  // export const defaultProps: DSAppPickerT.DefaultProps = {
   apps: [],
   customApps: [],
   sectionTitle: "APPLICATIONS",
@@ -47,12 +47,10 @@ const defaultProps = {
 };
 const DSAppPickerPropTypes = {
   ...(0, import_ds_props_helpers.getPropsPerSlotPropTypes)(import_constants.DSAppPickerName, import_constants.DSAppPickerSlots),
-  apps: import_ds_props_helpers.PropTypes.array.description(
-    "Main items. Format: [{ label:string, icon:component, onClick:func, disabled:bool, selected:bool }]"
-  ).isRequired,
-  customApps: import_ds_props_helpers.PropTypes.array.description(
-    "Custom items. Format: [{ label:string, icon:component, onClick:func, disabled:bool, selected:bool }]"
-  ),
+  ...import_ds_props_helpers.globalAttributesPropTypes,
+  ...import_ds_props_helpers.xstyledPropTypes,
+  apps: import_ds_props_helpers.PropTypes.array.description("Main items. Format: [{ label:string, icon:component, onClick:func, disabled:bool, selected:bool }]").defaultValue([]),
+  customApps: import_ds_props_helpers.PropTypes.array.description("Custom items. Format: [{ label:string, icon:component, onClick:func, disabled:bool, selected:bool }]").defaultValue([]),
   sectionTitle: import_ds_props_helpers.PropTypes.string.description("main section title").defaultValue("APPLICATIONS"),
   customSectionTitle: import_ds_props_helpers.PropTypes.string.description("custom section title").defaultValue("CUSTOM APPLICATIONS"),
   icon: import_ds_props_helpers.PropTypes.func.description("trigger button s icon").defaultValue(import_ds_icons.MenuPicker),
@@ -69,4 +67,5 @@ const DSAppPickerPropTypes = {
     "Ref to the trigger button."
   )
 };
+const DSAppPickerPropTypesSchema = DSAppPickerPropTypes;
 //# sourceMappingURL=react-desc-prop-types.js.map

package/dist/cjs/react-desc-prop-types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/react-desc-prop-types.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { MenuPicker } from '@elliemae/ds-icons';\nimport type { SvgIconT } from '@elliemae/ds-icons';\nimport type { GlobalAttributesT, XstyledProps, ValidationMap } from '@elliemae/ds-props-helpers';\nimport { PropTypes, getPropsPerSlotPropTypes } from '@elliemae/ds-props-helpers';\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSAppPickerName, DSAppPickerSlots } from './constants/index.js';\n\nexport declare namespace DSAppPickerT {\n  export interface AppItem {\n    label: string;\n    icon: React.ComponentType<{ className: string; size: string }>;\n    onClick?: (e: React.MouseEvent, item: AppItem) => void | null;\n    disabled?: boolean;\n    applyAriaDisabled?: boolean;\n    id?: string;\n    selected?: boolean;\n    wrapText?: boolean;\n  }\n\n  export type ActionRef = React.MutableRefObject<{\n    focusToIndex?: (index: number) => void;\n    focusSelectedOrFirstAvailable?: () => void;\n    focusWrapper: () => void;\n  }>;\n\n  export interface DefaultProps {\n    apps: AppItem[];\n    customApps: AppItem[];\n    sectionTitle: string;\n    customSectionTitle: string;\n    icon: React.ComponentType<SvgIconT.Props>;\n  }\n\n  interface RenderTriggerProp {\n    ref: React.MutableRefObject<HTMLButtonElement>;\n    [key: string]: unknown;\n  }\n  export interface OptionalProps\n    extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSAppPickerName, typeof DSAppPickerSlots> {\n    onClose?: () => void;\n    onClick?: (e: React.MouseEvent | React.KeyboardEvent) => void;\n    onClickOutside?: (e: React.MouseEvent) => void;\n    onKeyDown?: (e: React.KeyboardEvent) => void;\n    actionRef?: ActionRef;\n    renderTrigger?: React.ComponentType<RenderTriggerProp>;\n    isOpen?: boolean;\n    triggerRef?: React.RefObject<HTMLButtonElement>;\n  }\n\n  export interface Props\n    extends Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof OptionalProps | keyof XstyledProps>,\n      XstyledProps {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof OptionalProps | keyof XstyledProps>,\n      XstyledProps {}\n}\n\nexport const defaultProps: Omit<DSAppPickerT.DefaultProps, `dsAppPicker${Capitalize<string>}`> = {\n  // export const defaultProps: DSAppPickerT.DefaultProps = {\n  apps: [],\n  customApps: [],\n  sectionTitle: 'APPLICATIONS',\n  customSectionTitle: 'CUSTOM APPLICATIONS',\n  icon: () => <MenuPicker color={['brand-primary', '700']} size=\"m\" />,\n};\n\n// =============================================================================\n// PropTypes\n// =============================================================================\n\nexport const DSAppPickerPropTypes = {\n  ...getPropsPerSlotPropTypes(DSAppPickerName, DSAppPickerSlots),\n  apps: PropTypes.array.description(\n    'Main items. Format: [{ label:string, icon:component, onClick:func, disabled:bool, selected:bool }]',\n  ).isRequired,\n  customApps: PropTypes.array.description(\n    'Custom items. Format: [{ label:string, icon:component, onClick:func, disabled:bool, selected:bool }]',\n  ),\n  sectionTitle: PropTypes.string.description('main section title').defaultValue('APPLICATIONS'),\n  customSectionTitle: PropTypes.string.description('custom section title').defaultValue('CUSTOM APPLICATIONS'),\n  icon: PropTypes.func.description('trigger button s icon').defaultValue(MenuPicker),\n  renderTrigger: PropTypes.func.description('Custom trigger component.'),\n  actionRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]).description(\n    'Ref containing a focusToIndex method. This method allows you to focus any App inside the AppPicker.',\n  ),\n  isOpen: PropTypes.bool.description('Wether the AppPicker should be open or not.'),\n  onClose: PropTypes.func.description('Callback function when the AppPicker closes'),\n  onKeyDown: PropTypes.func.description('OnKeyDown handler callback.'),\n  onClick: PropTypes.func.description('Custom onClick for Trigger component.'),\n  onClickOutside: PropTypes.func.description('Callback event when the user clicks outside the App Picker.'),\n  triggerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]).description(\n    'Ref to the trigger button.',\n  ),\n} as ValidationMap<unknown>;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADqET;AApEd,sBAA2B;AAG3B,8BAAoD;AAEpD,uBAAkD;AAyD3C,MAAM,eAAoF;AAAA;AAAA,EAE/F,MAAM,CAAC;AAAA,EACP,YAAY,CAAC;AAAA,EACb,cAAc;AAAA,EACd,oBAAoB;AAAA,EACpB,MAAM,MAAM,4CAAC,8BAAW,OAAO,CAAC,iBAAiB,KAAK,GAAG,MAAK,KAAI;AACpE;AAMO,MAAM,uBAAuB;AAAA,EAClC,OAAG,kDAAyB,kCAAiB,iCAAgB;AAAA,EAC7D,MAAM,kCAAU,MAAM;AAAA,IACpB;AAAA,EACF,EAAE;AAAA,EACF,YAAY,kCAAU,MAAM;AAAA,IAC1B;AAAA,EACF;AAAA,EACA,cAAc,kCAAU,OAAO,YAAY,oBAAoB,EAAE,aAAa,cAAc;AAAA,EAC5F,oBAAoB,kCAAU,OAAO,YAAY,sBAAsB,EAAE,aAAa,qBAAqB;AAAA,EAC3G,MAAM,kCAAU,KAAK,YAAY,uBAAuB,EAAE,aAAa,0BAAU;AAAA,EACjF,eAAe,kCAAU,KAAK,YAAY,2BAA2B;AAAA,EACrE,WAAW,kCAAU,UAAU,CAAC,kCAAU,MAAM,kCAAU,MAAM,EAAE,SAAS,kCAAU,IAAI,CAAC,CAAC,CAAC,EAAE;AAAA,IAC5F;AAAA,EACF;AAAA,EACA,QAAQ,kCAAU,KAAK,YAAY,6CAA6C;AAAA,EAChF,SAAS,kCAAU,KAAK,YAAY,6CAA6C;AAAA,EACjF,WAAW,kCAAU,KAAK,YAAY,6BAA6B;AAAA,EACnE,SAAS,kCAAU,KAAK,YAAY,uCAAuC;AAAA,EAC3E,gBAAgB,kCAAU,KAAK,YAAY,6DAA6D;AAAA,EACxG,YAAY,kCAAU,UAAU,CAAC,kCAAU,MAAM,kCAAU,MAAM,EAAE,SAAS,kCAAU,IAAI,CAAC,CAAC,CAAC,EAAE;AAAA,IAC7F;AAAA,EACF;AACF;",
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-empty-interface */\nimport React from 'react';\nimport { MenuPicker } from '@elliemae/ds-icons';\nimport type { SvgIconT } from '@elliemae/ds-icons';\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema, ValidationMap } from '@elliemae/ds-props-helpers';\nimport {\n  PropTypes,\n  getPropsPerSlotPropTypes,\n  globalAttributesPropTypes,\n  xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSAppPickerName, DSAppPickerSlots } from './constants/index.js';\n\nexport declare namespace DSAppPickerT {\n  export interface AppItem {\n    label: string;\n    icon: React.ComponentType<{ className: string; size: string }>;\n    onClick?: (e: React.MouseEvent, item: AppItem) => void | null;\n    disabled?: boolean;\n    applyAriaDisabled?: boolean;\n    id?: string;\n    selected?: boolean;\n    wrapText?: boolean;\n  }\n\n  export type ActionRef = React.MutableRefObject<{\n    focusToIndex?: (index: number) => void;\n    focusSelectedOrFirstAvailable?: () => void;\n    focusWrapper: () => void;\n  }>;\n\n  export interface RequiredProps {}\n\n  export type SlotFunctionArguments = {\n    dsApppickerRoot: () => object;\n    dsApppickerItem: () => object;\n    dsApppickerTitle: () => object;\n    dsApppickerSeparator: () => object;\n    dsApppickerRow: () => object;\n    dsApppickerChip: () => object;\n    dsApppickerButton: () => object;\n    dsApppickerFloatingWrapper: () => object;\n  };\n\n  export interface DefaultProps {\n    apps: AppItem[];\n    customApps: AppItem[];\n    sectionTitle: string;\n    customSectionTitle: string;\n    icon: React.ComponentType<SvgIconT.Props>;\n  }\n\n  interface RenderTriggerProp {\n    ref: React.RefCallback<HTMLButtonElement>;\n    [key: string]: unknown;\n  }\n\n  export interface OptionalProps\n    extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSAppPickerName, typeof DSAppPickerSlots> {\n    onClose?: () => void;\n    onClick?: (e: React.MouseEvent | React.KeyboardEvent) => void;\n    onClickOutside?: (e: MouseEvent | React.MouseEvent) => void;\n    onKeyDown?: (e: React.KeyboardEvent) => void;\n    actionRef?: ActionRef;\n    renderTrigger?: (props: RenderTriggerProp) => React.ReactElement | null;\n    isOpen?: boolean;\n    triggerRef?: React.RefObject<HTMLButtonElement>;\n  }\n\n  export interface Props\n    extends Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof OptionalProps | keyof XstyledProps>,\n      XstyledProps,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof OptionalProps | keyof XstyledProps>,\n      XstyledProps,\n      RequiredProps {}\n}\n\nexport const defaultProps: DSAppPickerT.DefaultProps = {\n  apps: [],\n  customApps: [],\n  sectionTitle: 'APPLICATIONS',\n  customSectionTitle: 'CUSTOM APPLICATIONS',\n  icon: () => <MenuPicker color={['brand-primary', '700']} size=\"m\" />,\n};\n\n// =============================================================================\n// PropTypes\n// =============================================================================\n\nexport const DSAppPickerPropTypes: DSPropTypesSchema<DSAppPickerT.Props> = {\n  ...getPropsPerSlotPropTypes(DSAppPickerName, DSAppPickerSlots),\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  apps: PropTypes.array\n    .description('Main items. Format: [{ label:string, icon:component, onClick:func, disabled:bool, selected:bool }]')\n    .defaultValue([]),\n  customApps: PropTypes.array\n    .description('Custom items. Format: [{ label:string, icon:component, onClick:func, disabled:bool, selected:bool }]')\n    .defaultValue([]),\n  sectionTitle: PropTypes.string.description('main section title').defaultValue('APPLICATIONS'),\n  customSectionTitle: PropTypes.string.description('custom section title').defaultValue('CUSTOM APPLICATIONS'),\n  icon: PropTypes.func.description('trigger button s icon').defaultValue(MenuPicker),\n  renderTrigger: PropTypes.func.description('Custom trigger component.'),\n  actionRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]).description(\n    'Ref containing a focusToIndex method. This method allows you to focus any App inside the AppPicker.',\n  ),\n  isOpen: PropTypes.bool.description('Wether the AppPicker should be open or not.'),\n  onClose: PropTypes.func.description('Callback function when the AppPicker closes'),\n  onKeyDown: PropTypes.func.description('OnKeyDown handler callback.'),\n  onClick: PropTypes.func.description('Custom onClick for Trigger component.'),\n  onClickOutside: PropTypes.func.description('Callback event when the user clicks outside the App Picker.'),\n  triggerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]).description(\n    'Ref to the trigger button.',\n  ),\n};\n\nexport const DSAppPickerPropTypesSchema = DSAppPickerPropTypes as unknown as ValidationMap<DSAppPickerT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD0FT;AAxFd,sBAA2B;AAG3B,8BAKO;AAEP,uBAAkD;AAyE3C,MAAM,eAA0C;AAAA,EACrD,MAAM,CAAC;AAAA,EACP,YAAY,CAAC;AAAA,EACb,cAAc;AAAA,EACd,oBAAoB;AAAA,EACpB,MAAM,MAAM,4CAAC,8BAAW,OAAO,CAAC,iBAAiB,KAAK,GAAG,MAAK,KAAI;AACpE;AAMO,MAAM,uBAA8D;AAAA,EACzE,OAAG,kDAAyB,kCAAiB,iCAAgB;AAAA,EAC7D,GAAG;AAAA,EACH,GAAG;AAAA,EACH,MAAM,kCAAU,MACb,YAAY,oGAAoG,EAChH,aAAa,CAAC,CAAC;AAAA,EAClB,YAAY,kCAAU,MACnB,YAAY,sGAAsG,EAClH,aAAa,CAAC,CAAC;AAAA,EAClB,cAAc,kCAAU,OAAO,YAAY,oBAAoB,EAAE,aAAa,cAAc;AAAA,EAC5F,oBAAoB,kCAAU,OAAO,YAAY,sBAAsB,EAAE,aAAa,qBAAqB;AAAA,EAC3G,MAAM,kCAAU,KAAK,YAAY,uBAAuB,EAAE,aAAa,0BAAU;AAAA,EACjF,eAAe,kCAAU,KAAK,YAAY,2BAA2B;AAAA,EACrE,WAAW,kCAAU,UAAU,CAAC,kCAAU,MAAM,kCAAU,MAAM,EAAE,SAAS,kCAAU,IAAI,CAAC,CAAC,CAAC,EAAE;AAAA,IAC5F;AAAA,EACF;AAAA,EACA,QAAQ,kCAAU,KAAK,YAAY,6CAA6C;AAAA,EAChF,SAAS,kCAAU,KAAK,YAAY,6CAA6C;AAAA,EACjF,WAAW,kCAAU,KAAK,YAAY,6BAA6B;AAAA,EACnE,SAAS,kCAAU,KAAK,YAAY,uCAAuC;AAAA,EAC3E,gBAAgB,kCAAU,KAAK,YAAY,6DAA6D;AAAA,EACxG,YAAY,kCAAU,UAAU,CAAC,kCAAU,MAAM,kCAAU,MAAM,EAAE,SAAS,kCAAU,IAAI,CAAC,CAAC,CAAC,EAAE;AAAA,IAC7F;AAAA,EACF;AACF;AAEO,MAAM,6BAA6B;",
   "names": []
 }

package/dist/cjs/typescript-testing/typescript-app-picker-valid.js

@@ -25,6 +25,7 @@ var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import__ = require("../index.js");
 const testOptionalProps = {};
+const testRequiredProps = {};
 const testPartialDefaults = {
   apps: [],
   customApps: [],
@@ -34,10 +35,12 @@ const testPartialDefaults = {
 };
 const testProps = {
   ...testOptionalProps,
+  ...testRequiredProps,
   ...testPartialDefaults
 };
 const testPropsAsSyntax = {
   ...testOptionalProps,
+  ...testRequiredProps,
   ...testPartialDefaults
 };
 const testCompleteDefaults = {
@@ -49,10 +52,12 @@ const testCompleteDefaults = {
 };
 const testInternalProps = {
   ...testOptionalProps,
+  ...testRequiredProps,
   ...testCompleteDefaults
 };
 const testInternalPropsAsSyntax = {
   ...testOptionalProps,
+  ...testRequiredProps,
   ...testCompleteDefaults
 };
 const testExplicitDefinition = {

package/dist/cjs/typescript-testing/typescript-app-picker-valid.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/typescript-app-picker-valid.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { DSAppPicker } from '../index.js';\nimport type { DSAppPickerT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSAppPickerT.Props;\ntype ComponentPropsInternals = DSAppPickerT.InternalProps;\ntype ComponentPropsDefaultProps = DSAppPickerT.DefaultProps;\ntype ComponentPropsOptionalProps = DSAppPickerT.OptionalProps;\n\nconst testOptionalProps: ComponentPropsOptionalProps = {};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n//  Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n  apps: [],\n  customApps: [],\n  sectionTitle: '',\n  customSectionTitle: '',\n  icon: () => null,\n};\n\nconst testProps: ComponentPropsForApp = {\n  ...testOptionalProps,\n  ...testPartialDefaults,\n};\nconst testPropsAsSyntax = {\n  ...testOptionalProps,\n  ...testPartialDefaults,\n} as ComponentPropsForApp;\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n  apps: [],\n  customApps: [],\n  sectionTitle: '',\n  customSectionTitle: '',\n  icon: () => null,\n};\n\nconst testInternalProps: ComponentPropsInternals = {\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n};\nconst testInternalPropsAsSyntax = {\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n  apps: [],\n  customApps: [],\n  sectionTitle: '',\n  customSectionTitle: '',\n  icon: () => null,\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n  apps: [],\n  customApps: [],\n  sectionTitle: '',\n  customSectionTitle: '',\n  icon: () => null,\n} as ComponentPropsForApp;\n\nconst ExampleUsageComponent = () => (\n  <>\n    {/* works with explicitly casted props, all syntaxes */}\n    <DSAppPicker {...testExplicitDefinition} />\n    <DSAppPicker {...testInferedTypeCompatibility} />\n    {/* works with inline values */}\n    <DSAppPicker apps={[]} customApps={[]} sectionTitle=\"\" customSectionTitle=\"\" icon={() => null} />\n    {/* multiple auto inference works */}\n    <DSAppPicker apps={[]} customApps={[]} sectionTitle=\"\" customSectionTitle=\"\" icon={() => null} />\n    {/* works with partial defaults */}\n  </>\n);\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA,YAAuB;ACmErB;AAlEF,eAA4B;AAS5B,MAAM,oBAAiD,CAAC;AAIxD,MAAM,sBAA2D;AAAA,EAC/D,MAAM,CAAC;AAAA,EACP,YAAY,CAAC;AAAA,EACb,cAAc;AAAA,EACd,oBAAoB;AAAA,EACpB,MAAM,MAAM;AACd;AAEA,MAAM,YAAkC;AAAA,EACtC,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,uBAA6D;AAAA,EACjE,MAAM,CAAC;AAAA,EACP,YAAY,CAAC;AAAA,EACb,cAAc;AAAA,EACd,oBAAoB;AAAA,EACpB,MAAM,MAAM;AACd;AAEA,MAAM,oBAA6C;AAAA,EACjD,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,yBAA+C;AAAA,EACnD,MAAM,CAAC;AAAA,EACP,YAAY,CAAC;AAAA,EACb,cAAc;AAAA,EACd,oBAAoB;AAAA,EACpB,MAAM,MAAM;AACd;AAGA,MAAM,+BAA+B;AAAA,EACnC,MAAM,CAAC;AAAA,EACP,YAAY,CAAC;AAAA,EACb,cAAc;AAAA,EACd,oBAAoB;AAAA,EACpB,MAAM,MAAM;AACd;AAEA,MAAM,wBAAwB,MAC5B,4EAEE;AAAA,8CAAC,wBAAa,GAAG,wBAAwB;AAAA,EACzC,4CAAC,wBAAa,GAAG,8BAA8B;AAAA,EAE/C,4CAAC,wBAAY,MAAM,CAAC,GAAG,YAAY,CAAC,GAAG,cAAa,IAAG,oBAAmB,IAAG,MAAM,MAAM,MAAM;AAAA,EAE/F,4CAAC,wBAAY,MAAM,CAAC,GAAG,YAAY,CAAC,GAAG,cAAa,IAAG,oBAAmB,IAAG,MAAM,MAAM,MAAM;AAAA,GAEjG;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { DSAppPicker } from '../index.js';\nimport type { DSAppPickerT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSAppPickerT.Props;\ntype ComponentPropsInternals = DSAppPickerT.InternalProps;\ntype ComponentPropsDefaultProps = DSAppPickerT.DefaultProps;\ntype ComponentPropsOptionalProps = DSAppPickerT.OptionalProps;\ntype ComponentPropsRequiredProps = DSAppPickerT.RequiredProps;\n\nconst testOptionalProps: ComponentPropsOptionalProps = {};\nconst testRequiredProps: ComponentPropsRequiredProps = {};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n//  Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n  apps: [],\n  customApps: [],\n  sectionTitle: '',\n  customSectionTitle: '',\n  icon: () => null,\n};\n\nconst testProps: ComponentPropsForApp = {\n  ...testOptionalProps,\n  ...testRequiredProps,\n  ...testPartialDefaults,\n};\nconst testPropsAsSyntax = {\n  ...testOptionalProps,\n  ...testRequiredProps,\n  ...testPartialDefaults,\n} as ComponentPropsForApp;\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n  apps: [],\n  customApps: [],\n  sectionTitle: '',\n  customSectionTitle: '',\n  icon: () => null,\n};\n\nconst testInternalProps: ComponentPropsInternals = {\n  ...testOptionalProps,\n  ...testRequiredProps,\n  ...testCompleteDefaults,\n};\nconst testInternalPropsAsSyntax = {\n  ...testOptionalProps,\n  ...testRequiredProps,\n  ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n  apps: [],\n  customApps: [],\n  sectionTitle: '',\n  customSectionTitle: '',\n  icon: () => null,\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n  apps: [],\n  customApps: [],\n  sectionTitle: '',\n  customSectionTitle: '',\n  icon: () => null,\n} as ComponentPropsForApp;\n\nconst ExampleUsageComponent = () => (\n  <>\n    {/* works with explicitly casted props, all syntaxes */}\n    <DSAppPicker {...testExplicitDefinition} />\n    <DSAppPicker {...testInferedTypeCompatibility} />\n    {/* works with inline values */}\n    <DSAppPicker apps={[]} customApps={[]} sectionTitle=\"\" customSectionTitle=\"\" icon={() => null} />\n    {/* multiple auto inference works */}\n    <DSAppPicker apps={[]} customApps={[]} sectionTitle=\"\" customSectionTitle=\"\" icon={() => null} />\n    {/* works with partial defaults */}\n  </>\n);\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA,YAAuB;ACyErB;AAxEF,eAA4B;AAU5B,MAAM,oBAAiD,CAAC;AACxD,MAAM,oBAAiD,CAAC;AAIxD,MAAM,sBAA2D;AAAA,EAC/D,MAAM,CAAC;AAAA,EACP,YAAY,CAAC;AAAA,EACb,cAAc;AAAA,EACd,oBAAoB;AAAA,EACpB,MAAM,MAAM;AACd;AAEA,MAAM,YAAkC;AAAA,EACtC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,uBAA6D;AAAA,EACjE,MAAM,CAAC;AAAA,EACP,YAAY,CAAC;AAAA,EACb,cAAc;AAAA,EACd,oBAAoB;AAAA,EACpB,MAAM,MAAM;AACd;AAEA,MAAM,oBAA6C;AAAA,EACjD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,yBAA+C;AAAA,EACnD,MAAM,CAAC;AAAA,EACP,YAAY,CAAC;AAAA,EACb,cAAc;AAAA,EACd,oBAAoB;AAAA,EACpB,MAAM,MAAM;AACd;AAGA,MAAM,+BAA+B;AAAA,EACnC,MAAM,CAAC;AAAA,EACP,YAAY,CAAC;AAAA,EACb,cAAc;AAAA,EACd,oBAAoB;AAAA,EACpB,MAAM,MAAM;AACd;AAEA,MAAM,wBAAwB,MAC5B,4EAEE;AAAA,8CAAC,wBAAa,GAAG,wBAAwB;AAAA,EACzC,4CAAC,wBAAa,GAAG,8BAA8B;AAAA,EAE/C,4CAAC,wBAAY,MAAM,CAAC,GAAG,YAAY,CAAC,GAAG,cAAa,IAAG,oBAAmB,IAAG,MAAM,MAAM,MAAM;AAAA,EAE/F,4CAAC,wBAAY,MAAM,CAAC,GAAG,YAAY,CAAC,GAAG,cAAa,IAAG,oBAAmB,IAAG,MAAM,MAAM,MAAM;AAAA,GAEjG;",
   "names": []
 }

package/dist/esm/DSAppPicker.js

@@ -1,153 +1,80 @@
 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 { jsx, jsxs } from "react/jsx-runtime";
 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 { PopoverArrow } from "@elliemae/ds-floating-context";
+import { AppPanel } from "./parts/AppPanel.js";
+import { DSAppPickerPropTypesSchema } from "./react-desc-prop-types.js";
+import { DSAppPickerName } from "./constants/index.js";
 import { useAppPicker } from "./config/useAppPicker.js";
-const StyledButton = styled(DSButtonV2, { name: DSAppPickerName, slot: DSAppPickerSlots.BUTTON })``;
+import { useAppPickerBehavior } from "./config/useAppPickerBehavior.js";
+import { DSAppPickerContext } from "./DSAppPickerCTX.js";
+import { StyledAppPickerFloating } from "./parts/style.js";
+import { Trigger } from "./parts/Trigger.js";
 const DSAppPicker = (props) => {
-  const { propsWithDefault, ownerPropsConfig } = useAppPicker(props);
-  const { getOwnerProps, getOwnerPropsArguments } = ownerPropsConfig;
+  const appPickerConfig = useAppPicker(props);
   const {
-    apps,
-    customApps,
-    sectionTitle,
-    customSectionTitle,
-    icon: 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,
+    resolvedIsOpen,
+    floatingStyles,
+    arrowStyles,
+    floatingContext,
+    ownerPropsConfig,
+    defaultTriggerRef,
+    triggerRef,
+    wasOpenedByKeyboardRef,
+    handleClose,
+    handleTriggerRef,
+    handleTriggerClick,
+    floatingInnerRef,
+    focusTracker
+  } = useAppPickerBehavior(appPickerConfig);
+  return /* @__PURE__ */ jsxs(DSAppPickerContext.Provider, { value: focusTracker, children: [
+    /* @__PURE__ */ jsx(
+      Trigger,
       {
-        ...getOwnerProps(),
-        ...getOwnerPropsArguments(),
-        apps,
-        customApps,
-        sectionTitle,
-        customSectionTitle,
-        close: handleOnClose,
-        wrapperRef,
-        onKeyDown,
-        triggerRef: triggerRef || defaultTriggerRef,
-        actionRef,
-        triggerIsInternal: !renderTrigger,
-        wasOpenedByKeyboardRef,
-        isOverflow
+        Icon,
+        isOpen: resolvedIsOpen,
+        setRef: handleTriggerRef,
+        ownerProps: ownerPropsConfig,
+        onClick: handleTriggerClick,
+        renderTrigger
       }
     ),
-    [
-      actionRef,
-      apps,
-      customApps,
-      customSectionTitle,
-      handleOnClose,
-      isOverflow,
-      onKeyDown,
-      renderTrigger,
-      sectionTitle,
-      triggerRef,
-      getOwnerProps,
-      getOwnerPropsArguments
-    ]
-  );
-  const RenderTrigger = useMemo(
-    () => renderTrigger || (({ ref }) => /* @__PURE__ */ jsx(
-      StyledButton,
+    /* @__PURE__ */ jsxs(
+      StyledAppPickerFloating,
       {
-        "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"
+        innerRef: floatingInnerRef,
+        isOpen: resolvedIsOpen,
+        floatingStyles,
+        context: floatingContext,
+        getOwnerProps: ownerPropsConfig.getOwnerProps,
+        getOwnerPropsArguments: ownerPropsConfig.getOwnerPropsArguments,
+        children: [
+          /* @__PURE__ */ jsx(
+            AppPanel,
+            {
+              ...appPickerConfig.propsWithDefault,
+              ownerPropsConfig,
+              globalAttributes: appPickerConfig.globalAttributes,
+              xstyledProps: appPickerConfig.xstyledProps,
+              close: handleClose,
+              triggerRef: triggerRef || defaultTriggerRef,
+              triggerIsInternal: !renderTrigger,
+              wasOpenedByKeyboardRef
+            }
+          ),
+          /* @__PURE__ */ jsx(PopoverArrow, { ...arrowStyles })
+        ]
       }
-    }
-  );
+    )
+  ] });
 };
 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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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { PopoverArrow } from '@elliemae/ds-floating-context';\nimport { AppPanel } from './parts/AppPanel.js';\nimport type { DSAppPickerT } from './react-desc-prop-types.js';\nimport { DSAppPickerPropTypesSchema } from './react-desc-prop-types.js';\nimport { DSAppPickerName } from './constants/index.js';\nimport { useAppPicker } from './config/useAppPicker.js';\nimport { useAppPickerBehavior } from './config/useAppPickerBehavior.js';\nimport { DSAppPickerContext } from './DSAppPickerCTX.js';\nimport { StyledAppPickerFloating } from './parts/style.js';\nimport { Trigger } from './parts/Trigger.js';\n\nconst DSAppPicker: React.ComponentType<DSAppPickerT.Props> = (props) => {\n  const appPickerConfig = useAppPicker(props);\n  const {\n    Icon,\n    renderTrigger,\n    resolvedIsOpen,\n    floatingStyles,\n    arrowStyles,\n    floatingContext,\n    ownerPropsConfig,\n    defaultTriggerRef,\n    triggerRef,\n    wasOpenedByKeyboardRef,\n    handleClose,\n    handleTriggerRef,\n    handleTriggerClick,\n    floatingInnerRef,\n    focusTracker,\n  } = useAppPickerBehavior(appPickerConfig);\n\n  return (\n    <DSAppPickerContext.Provider value={focusTracker}>\n      <Trigger\n        Icon={Icon}\n        isOpen={resolvedIsOpen}\n        setRef={handleTriggerRef}\n        ownerProps={ownerPropsConfig}\n        onClick={handleTriggerClick}\n        renderTrigger={renderTrigger}\n      />\n      <StyledAppPickerFloating\n        innerRef={floatingInnerRef}\n        isOpen={resolvedIsOpen}\n        floatingStyles={floatingStyles}\n        context={floatingContext}\n        getOwnerProps={ownerPropsConfig.getOwnerProps}\n        getOwnerPropsArguments={ownerPropsConfig.getOwnerPropsArguments}\n      >\n        <AppPanel\n          {...appPickerConfig.propsWithDefault}\n          ownerPropsConfig={ownerPropsConfig}\n          globalAttributes={appPickerConfig.globalAttributes}\n          xstyledProps={appPickerConfig.xstyledProps}\n          close={handleClose}\n          triggerRef={triggerRef || defaultTriggerRef}\n          triggerIsInternal={!renderTrigger}\n          wasOpenedByKeyboardRef={wasOpenedByKeyboardRef}\n        />\n        <PopoverArrow {...arrowStyles} />\n      </StyledAppPickerFloating>\n    </DSAppPickerContext.Provider>\n  );\n};\n\nDSAppPicker.displayName = DSAppPickerName;\nconst AppPickerWithSchema = describe(DSAppPicker);\nAppPickerWithSchema.propTypes = DSAppPickerPropTypesSchema;\n\nexport { DSAppPicker, AppPickerWithSchema };\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACmCjB,cAQA,YARA;AAlCN,SAAS,gBAAgB;AACzB,SAAS,oBAAoB;AAC7B,SAAS,gBAAgB;AAEzB,SAAS,kCAAkC;AAC3C,SAAS,uBAAuB;AAChC,SAAS,oBAAoB;AAC7B,SAAS,4BAA4B;AACrC,SAAS,0BAA0B;AACnC,SAAS,+BAA+B;AACxC,SAAS,eAAe;AAExB,MAAM,cAAuD,CAAC,UAAU;AACtE,QAAM,kBAAkB,aAAa,KAAK;AAC1C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,qBAAqB,eAAe;AAExC,SACE,qBAAC,mBAAmB,UAAnB,EAA4B,OAAO,cAClC;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR,YAAY;AAAA,QACZ,SAAS;AAAA,QACT;AAAA;AAAA,IACF;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,UAAU;AAAA,QACV,QAAQ;AAAA,QACR;AAAA,QACA,SAAS;AAAA,QACT,eAAe,iBAAiB;AAAA,QAChC,wBAAwB,iBAAiB;AAAA,QAEzC;AAAA;AAAA,YAAC;AAAA;AAAA,cACE,GAAG,gBAAgB;AAAA,cACpB;AAAA,cACA,kBAAkB,gBAAgB;AAAA,cAClC,cAAc,gBAAgB;AAAA,cAC9B,OAAO;AAAA,cACP,YAAY,cAAc;AAAA,cAC1B,mBAAmB,CAAC;AAAA,cACpB;AAAA;AAAA,UACF;AAAA,UACA,oBAAC,gBAAc,GAAG,aAAa;AAAA;AAAA;AAAA,IACjC;AAAA,KACF;AAEJ;AAEA,YAAY,cAAc;AAC1B,MAAM,sBAAsB,SAAS,WAAW;AAChD,oBAAoB,YAAY;",
   "names": []
 }

package/dist/esm/DSAppPickerCTX.js

@@ -0,0 +1,28 @@
+import * as React from "react";
+import { createContext } from "react";
+const defaultFocusContext = {
+  focusRegion: "",
+  firstFocusableRef: { current: null },
+  lastFocusableRef: { current: null },
+  registerChip: () => {
+  },
+  trackFocusChip: () => {
+  },
+  trackFocusRegionReset: () => {
+  },
+  trackFocusTrigger: () => {
+  },
+  trackFocusPanel: () => {
+  },
+  trackFocusSelectedItem: () => {
+  },
+  trackFocusFirstItem: () => {
+  },
+  trackFocusItemAtIndex: () => {
+  }
+};
+const DSAppPickerContext = createContext(defaultFocusContext);
+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 React, { createContext } from 'react';\nimport type { useFocusTracker } from './config/useFocusTracker.js';\n\nexport type AppPickerFocusCTX = ReturnType<typeof useFocusTracker>;\n\nconst defaultFocusContext: AppPickerFocusCTX = {\n  focusRegion: '',\n  firstFocusableRef: { current: null } as React.MutableRefObject<HTMLElement | null>,\n  lastFocusableRef: { current: null } as React.MutableRefObject<HTMLElement | null>,\n  registerChip: () => {},\n  trackFocusChip: () => {},\n  trackFocusRegionReset: () => {},\n  trackFocusTrigger: () => {},\n  trackFocusPanel: () => {},\n  trackFocusSelectedItem: () => {},\n  trackFocusFirstItem: () => {},\n  trackFocusItemAtIndex: () => {},\n};\n\n/** Focus tracker context for chip-level focus management inside DSAppPicker. */\nexport const DSAppPickerContext = createContext<AppPickerFocusCTX>(defaultFocusContext);\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAgB,qBAAqB;AAKrC,MAAM,sBAAyC;AAAA,EAC7C,aAAa;AAAA,EACb,mBAAmB,EAAE,SAAS,KAAK;AAAA,EACnC,kBAAkB,EAAE,SAAS,KAAK;AAAA,EAClC,cAAc,MAAM;AAAA,EAAC;AAAA,EACrB,gBAAgB,MAAM;AAAA,EAAC;AAAA,EACvB,uBAAuB,MAAM;AAAA,EAAC;AAAA,EAC9B,mBAAmB,MAAM;AAAA,EAAC;AAAA,EAC1B,iBAAiB,MAAM;AAAA,EAAC;AAAA,EACxB,wBAAwB,MAAM;AAAA,EAAC;AAAA,EAC/B,qBAAqB,MAAM;AAAA,EAAC;AAAA,EAC5B,uBAAuB,MAAM;AAAA,EAAC;AAChC;AAGO,MAAM,qBAAqB,cAAiC,mBAAmB;",
+  "names": []
+}

package/dist/esm/config/useAppPicker.js

@@ -3,16 +3,15 @@ import React2 from "react";
 import {
   useMemoMergePropsWithDefault,
   useOwnerProps,
-  useValidateTypescriptPropTypes,
   getGlobalAttributes,
   getXstyledProps
 } from "@elliemae/ds-props-helpers";
-import { defaultProps, DSAppPickerPropTypes } from "../react-desc-prop-types.js";
-import { DSAppPickerName } from "../constants/index.js";
+import { defaultProps, DSAppPickerPropTypesSchema } from "../react-desc-prop-types.js";
+import { useValidateProps } from "./useValidateProps.js";
 const useAppPicker = (props) => {
   const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
-  useValidateTypescriptPropTypes(propsWithDefault, DSAppPickerPropTypes, DSAppPickerName);
-  const ownerPropsConfig = useOwnerProps(propsWithDefault, { ...props });
+  useValidateProps(propsWithDefault, DSAppPickerPropTypesSchema);
+  const ownerPropsConfig = useOwnerProps(propsWithDefault, propsWithDefault);
   const globalAttributes = getGlobalAttributes(props);
   const xstyledProps = getXstyledProps(props);
   return React2.useMemo(