@elliemae/ds-app-picker 3.70.0-next.4 → 3.70.0-next.40

package/dist/types/react-desc-prop-types.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { SvgIconT } from '@elliemae/ds-icons';
-import type { GlobalAttributesT, XstyledProps, ValidationMap } from '@elliemae/ds-props-helpers';
+import type { GlobalAttributesT, XstyledProps, DSPropTypesSchema, ValidationMap } from '@elliemae/ds-props-helpers';
 import type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';
 import { DSAppPickerName, DSAppPickerSlots } from './constants/index.js';
 export declare namespace DSAppPickerT {
@@ -22,6 +22,18 @@ export declare namespace DSAppPickerT {
         focusSelectedOrFirstAvailable?: () => void;
         focusWrapper: () => void;
     }>;
+    interface RequiredProps {
+    }
+    type SlotFunctionArguments = {
+        dsApppickerRoot: () => object;
+        dsApppickerItem: () => object;
+        dsApppickerTitle: () => object;
+        dsApppickerSeparator: () => object;
+        dsApppickerRow: () => object;
+        dsApppickerChip: () => object;
+        dsApppickerButton: () => object;
+        dsApppickerFloatingWrapper: () => object;
+    };
     interface DefaultProps {
         apps: AppItem[];
         customApps: AppItem[];
@@ -30,23 +42,24 @@ export declare namespace DSAppPickerT {
         icon: React.ComponentType<SvgIconT.Props>;
     }
     interface RenderTriggerProp {
-        ref: React.MutableRefObject<HTMLButtonElement>;
+        ref: React.RefCallback<HTMLButtonElement>;
         [key: string]: unknown;
     }
     interface OptionalProps extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSAppPickerName, typeof DSAppPickerSlots> {
         onClose?: () => void;
         onClick?: (e: React.MouseEvent | React.KeyboardEvent) => void;
-        onClickOutside?: (e: React.MouseEvent) => void;
+        onClickOutside?: (e: MouseEvent | React.MouseEvent) => void;
         onKeyDown?: (e: React.KeyboardEvent) => void;
         actionRef?: ActionRef;
-        renderTrigger?: React.ComponentType<RenderTriggerProp>;
+        renderTrigger?: (props: RenderTriggerProp) => React.ReactElement | null;
         isOpen?: boolean;
         triggerRef?: React.RefObject<HTMLButtonElement>;
     }
-    interface Props extends Partial<DefaultProps>, OptionalProps, Omit<GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof OptionalProps | keyof XstyledProps>, XstyledProps {
+    interface Props extends Partial<DefaultProps>, OptionalProps, Omit<GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof OptionalProps | keyof XstyledProps>, XstyledProps, RequiredProps {
     }
-    interface InternalProps extends DefaultProps, OptionalProps, Omit<GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof OptionalProps | keyof XstyledProps>, XstyledProps {
+    interface InternalProps extends DefaultProps, OptionalProps, Omit<GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof OptionalProps | keyof XstyledProps>, XstyledProps, RequiredProps {
     }
 }
-export declare const defaultProps: Omit<DSAppPickerT.DefaultProps, `dsAppPicker${Capitalize<string>}`>;
-export declare const DSAppPickerPropTypes: ValidationMap<unknown>;
+export declare const defaultProps: DSAppPickerT.DefaultProps;
+export declare const DSAppPickerPropTypes: DSPropTypesSchema<DSAppPickerT.Props>;
+export declare const DSAppPickerPropTypesSchema: ValidationMap<DSAppPickerT.Props>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-app-picker",
-  "version": "3.70.0-next.4",
+  "version": "3.70.0-next.40",
   "license": "MIT",
   "description": "ICE MT - Dimsum - App Picker",
   "files": [
@@ -36,31 +36,33 @@
     "indent": 4
   },
   "dependencies": {
-    "@elliemae/ds-legacy-popover": "1.0.16",
-    "@elliemae/ds-button-v2": "3.70.0-next.4",
-    "@elliemae/ds-grid": "3.70.0-next.4",
-    "@elliemae/ds-props-helpers": "3.70.0-next.4",
-    "@elliemae/ds-system": "3.70.0-next.4",
-    "@elliemae/ds-icons": "3.70.0-next.4",
-    "@elliemae/ds-chip": "3.70.0-next.4",
-    "@elliemae/ds-hooks-focus-trap": "3.70.0-next.4",
-    "@elliemae/ds-typescript-helpers": "3.70.0-next.4"
+    "uid": "^2.0.2",
+    "@elliemae/ds-button-v2": "3.70.0-next.40",
+    "@elliemae/ds-chip": "3.70.0-next.40",
+    "@elliemae/ds-floating-context": "3.70.0-next.40",
+    "@elliemae/ds-icons": "3.70.0-next.40",
+    "@elliemae/ds-hooks-focus-trap": "3.70.0-next.40",
+    "@elliemae/ds-props-helpers": "3.70.0-next.40",
+    "@elliemae/ds-system": "3.70.0-next.40",
+    "@elliemae/ds-typography": "3.70.0-next.40",
+    "@elliemae/ds-grid": "3.70.0-next.40"
   },
   "devDependencies": {
+    "@playwright/experimental-ct-react": "^1.60.0",
     "jest": "^30.0.0",
     "styled-components": "~5.3.9",
-    "@elliemae/ds-monorepo-devops": "3.70.0-next.4",
-    "@elliemae/ds-test-utils": "3.70.0-next.4"
+    "@elliemae/ds-typescript-helpers": "3.70.0-next.40",
+    "@elliemae/ds-monorepo-devops": "3.70.0-next.40",
+    "@elliemae/ds-test-utils": "3.70.0-next.40"
   },
   "peerDependencies": {
-    "lodash-es": "^4.17.21",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "styled-components": "~5.3.9"
   },
   "publishConfig": {
     "access": "public",
-    "typeSafety": false
+    "typeSafety": true
   },
   "scripts": {
     "dev": "cross-env NODE_ENV=development node ../../../scripts/build/build.mjs --watch",

package/dist/cjs/AppPickerImpl.js

@@ -1,204 +0,0 @@
-"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 AppPickerImpl_exports = {};
-__export(AppPickerImpl_exports, {
-  default: () => AppPickerImpl_default
-});
-module.exports = __toCommonJS(AppPickerImpl_exports);
-var React = __toESM(require("react"));
-var import_jsx_runtime = require("react/jsx-runtime");
-var import_react = require("react");
-var import_ds_system = require("@elliemae/ds-system");
-var import_ds_chip = require("@elliemae/ds-chip");
-var import_ds_hooks_focus_trap = require("@elliemae/ds-hooks-focus-trap");
-var import_utils = require("./utils.js");
-var import_styles = require("./styles.js");
-var import_useKeepTrackButtons = require("./hooks/useKeepTrackButtons.js");
-var import_constants = require("./constants/index.js");
-var import_useAppPicker = require("./config/useAppPicker.js");
-const StyledChip = (0, import_ds_system.styled)(import_ds_chip.DSChip, { name: import_constants.DSAppPickerName, slot: import_constants.DSAppPickerSlots.CHIP })``;
-const AppPickerImpl = (props) => {
-  const {
-    apps,
-    customApps,
-    sectionTitle,
-    customSectionTitle,
-    close,
-    wrapperRef,
-    onKeyDown,
-    triggerRef,
-    isOverflow,
-    actionRef,
-    wasOpenedByKeyboardRef,
-    triggerIsInternal
-  } = props;
-  const { ownerPropsConfig, globalAttributes, xstyledProps } = (0, import_useAppPicker.useAppPicker)(props);
-  const { wrap, onClick, onKeyDown: onKeyDownGlobal, ...safeGlobalAttributes } = globalAttributes;
-  const { allFocusableButtons } = (0, import_useKeepTrackButtons.useKeepTrackButtons)({
-    wrapperRef,
-    wasOpenedByKeyboardRef,
-    actionRef,
-    triggerIsInternal
-  });
-  const firstElementRef = (0, import_react.useRef)(null);
-  const lastElementRef = (0, import_react.useRef)(null);
-  const handleOnClick = (0, import_react.useCallback)(
-    (app) => (e) => {
-      if (app.onClick) app.onClick(e, app);
-    },
-    []
-  );
-  const handleOnKeyDownWrapper = (0, import_react.useCallback)(
-    (e) => {
-      if (onKeyDown) onKeyDown(e);
-      if (!onKeyDown && e.key === import_utils.keys.ESC) {
-        triggerRef?.current?.focus();
-        close();
-      }
-    },
-    [onKeyDown, triggerRef, close]
-  );
-  const [firstButton] = allFocusableButtons;
-  firstElementRef.current = firstButton;
-  lastElementRef.current = allFocusableButtons[allFocusableButtons.length - 1];
-  const handleOnKeyDown = (0, import_ds_hooks_focus_trap.useFocusTrap)({
-    firstElementRef,
-    lastElementRef,
-    onKeyDown: handleOnKeyDownWrapper
-  });
-  const totalAppsLength = (0, import_react.useMemo)(() => apps.length + customApps.length, [apps.length, customApps.length]);
-  const buildRows = (0, import_react.useCallback)(
-    (appList, prevIndex, title) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: appList.map((app, index) => {
-      const { label, disabled, applyAriaDisabled, selected, icon: Icon, id, wrapText } = app;
-      const IconComp = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { className: "app-picker__icon", size: "m" });
-      const getOwnerPropsArguments = () => app;
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_styles.StyledListItem,
-        {
-          "data-testid": import_constants.DSAppPickerDataTestIds.ITEM,
-          role: "presentation",
-          getOwnerProps: ownerPropsConfig.getOwnerProps,
-          getOwnerPropsArguments,
-          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            StyledChip,
-            {
-              onClick: handleOnClick(app),
-              "data-testid": "app-picker__chip",
-              disabled,
-              applyAriaDisabled,
-              selected,
-              "aria-selected": selected,
-              role: "option",
-              id,
-              "aria-label": `${label}. ${title} (${index + prevIndex} of ${totalAppsLength})`,
-              icon: IconComp,
-              label,
-              getOwnerProps: ownerPropsConfig.getOwnerProps,
-              getOwnerPropsArguments,
-              wrapText
-            },
-            index
-          )
-        }
-      );
-    }) }),
-    [ownerPropsConfig, handleOnClick, totalAppsLength]
-  );
-  const AppsRows = (0, import_react.useMemo)(() => buildRows(apps, 1, sectionTitle), [apps, buildRows, sectionTitle]);
-  const CustomRows = (0, import_react.useMemo)(
-    () => buildRows(customApps, apps.length + 1, customSectionTitle),
-    [apps.length, buildRows, customApps, customSectionTitle]
-  );
-  const layout = (0, import_react.useMemo)(() => {
-    const cols = ["repeat(3, 92px)"];
-    let appsRows = 0;
-    let customRows = 0;
-    const rows = [];
-    if (apps.length > 0) {
-      appsRows = apps.length / 3;
-      rows.push("68px", `repeat(${appsRows}, 68px})`);
-    }
-    if (customApps.length > 0) {
-      customRows = customApps.length / 3;
-      rows.push("9px", "68px", `repeat(${customRows}, 68px})`);
-    }
-    return {
-      rows,
-      cols
-    };
-  }, [apps.length, customApps.length]);
-  const convertedTypeReference = wrapperRef;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    import_styles.StyledWrapper,
-    {
-      forwardedAs: "ul",
-      role: "listbox",
-      innerRef: convertedTypeReference,
-      "data-testid": import_constants.DSAppPickerDataTestIds.ROOT,
-      isOverflow,
-      cols: layout.cols,
-      rows: layout.rows,
-      tabIndex: -1,
-      "aria-label": `Application picker, ${sectionTitle} (${apps.length} apps)${customApps.length > 0 ? `, ${customSectionTitle} (${customApps.length} apps)` : ""}`,
-      ...ownerPropsConfig,
-      ...safeGlobalAttributes,
-      ...xstyledProps,
-      onKeyDown: handleOnKeyDown,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledListItemFullRow, { "data-testid": import_constants.DSAppPickerDataTestIds.ROW, "aria-hidden": true, role: "group", ...ownerPropsConfig, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledTitle, { "data-testid": import_constants.DSAppPickerDataTestIds.TITLE, role: "presentation", ...ownerPropsConfig, children: sectionTitle }) }),
-        AppsRows,
-        customApps.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_styles.StyledListItemFullRow,
-            {
-              "data-testid": import_constants.DSAppPickerDataTestIds.ROW,
-              "aria-hidden": true,
-              role: "group",
-              ...ownerPropsConfig,
-              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledSeparator, { "data-testid": import_constants.DSAppPickerDataTestIds.SEPARATOR, role: "presentation", ...ownerPropsConfig })
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_styles.StyledListItemFullRow,
-            {
-              "data-testid": import_constants.DSAppPickerDataTestIds.ROW,
-              "aria-hidden": true,
-              role: "group",
-              ...ownerPropsConfig,
-              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledTitle, { "data-testid": import_constants.DSAppPickerDataTestIds.TITLE, role: "presentation", ...ownerPropsConfig, children: customSectionTitle })
-            }
-          ),
-          CustomRows
-        ] })
-      ]
-    }
-  );
-};
-var AppPickerImpl_default = AppPickerImpl;
-//# sourceMappingURL=AppPickerImpl.js.map

package/dist/cjs/AppPickerImpl.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/AppPickerImpl.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable react/no-array-index-key */\nimport React, { useCallback, useRef, useMemo } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { DSChip } from '@elliemae/ds-chip';\nimport { useFocusTrap } from '@elliemae/ds-hooks-focus-trap';\nimport { keys } from './utils.js';\nimport { StyledWrapper, StyledSeparator, StyledListItemFullRow, StyledListItem, StyledTitle } from './styles.js';\nimport { useKeepTrackButtons } from './hooks/useKeepTrackButtons.js';\nimport type { DSAppPickerT } from './react-desc-prop-types.js';\nimport { DSAppPickerDataTestIds, DSAppPickerName, DSAppPickerSlots } from './constants/index.js';\nimport { useAppPicker } from './config/useAppPicker.js';\n\nconst StyledChip = styled(DSChip, { name: DSAppPickerName, slot: DSAppPickerSlots.CHIP })``;\n\ninterface AppPickerImplProps\n  extends Omit<\n    DSAppPickerT.InternalProps,\n    'onClose' | 'icon' | 'onClick' | 'onClickOutside' | 'renderTrigger' | 'isOpen'\n  > {\n  close: () => void;\n  wrapperRef: React.RefObject<HTMLDivElement>;\n  isOverflow: boolean;\n  wasOpenedByKeyboardRef: React.MutableRefObject<boolean>;\n  triggerIsInternal: boolean;\n}\n\nconst AppPickerImpl: React.ComponentType<AppPickerImplProps> = (props) => {\n  const {\n    apps,\n    customApps,\n    sectionTitle,\n    customSectionTitle,\n    close,\n    wrapperRef,\n    onKeyDown,\n    triggerRef,\n    isOverflow,\n    actionRef,\n    wasOpenedByKeyboardRef,\n    triggerIsInternal,\n  } = props;\n\n  const { ownerPropsConfig, globalAttributes, xstyledProps } = useAppPicker(props);\n\n  // at this point is hard to understand where to put the globals props in the app picker\n  // because we dont have a common wrapper that contains both the ul and the popover and the button\n  // so we put them in the ul for now\n  // wrap is extracted to avoid passing it to the UL element\n  // onClick and onKeyDown because we use it as props in the api for a different purpose\n  const { wrap, onClick, onKeyDown: onKeyDownGlobal, ...safeGlobalAttributes } = globalAttributes;\n\n  const { allFocusableButtons } = useKeepTrackButtons({\n    wrapperRef,\n    wasOpenedByKeyboardRef,\n    actionRef,\n    triggerIsInternal,\n  });\n\n  const firstElementRef = useRef<HTMLElement | null>(null);\n  const lastElementRef = useRef<HTMLElement | null>(null);\n\n  const handleOnClick = useCallback(\n    (app: DSAppPickerT.AppItem) => (e: React.MouseEvent) => {\n      if (app.onClick) app.onClick(e, app);\n    },\n    [],\n  );\n\n  const handleOnKeyDownWrapper: React.KeyboardEventHandler = useCallback(\n    (e) => {\n      if (onKeyDown) onKeyDown(e);\n      if (!onKeyDown && e.key === keys.ESC) {\n        triggerRef?.current?.focus();\n        close();\n      }\n    },\n    [onKeyDown, triggerRef, close],\n  );\n  const [firstButton] = allFocusableButtons;\n  firstElementRef.current = firstButton;\n  lastElementRef.current = allFocusableButtons[allFocusableButtons.length - 1];\n\n  const handleOnKeyDown = useFocusTrap({\n    firstElementRef,\n    lastElementRef,\n    onKeyDown: handleOnKeyDownWrapper,\n  });\n\n  const totalAppsLength = useMemo(() => apps.length + customApps.length, [apps.length, customApps.length]);\n\n  const buildRows = useCallback(\n    (appList: DSAppPickerT.AppItem[], prevIndex: number, title: string): JSX.Element => (\n      <>\n        {appList.map((app, index) => {\n          const { label, disabled, applyAriaDisabled, selected, icon: Icon, id, wrapText } = app;\n\n          // eslint-disable-next-line react/no-unstable-nested-components\n          const IconComp = () => <Icon className=\"app-picker__icon\" size=\"m\" />;\n          const getOwnerPropsArguments = () => app;\n          return (\n            <StyledListItem\n              data-testid={DSAppPickerDataTestIds.ITEM}\n              role=\"presentation\"\n              getOwnerProps={ownerPropsConfig.getOwnerProps}\n              getOwnerPropsArguments={getOwnerPropsArguments}\n            >\n              <StyledChip\n                key={index}\n                onClick={handleOnClick(app)}\n                data-testid=\"app-picker__chip\"\n                disabled={disabled}\n                applyAriaDisabled={applyAriaDisabled}\n                selected={selected}\n                aria-selected={selected}\n                role=\"option\"\n                id={id}\n                aria-label={`${label}. ${title} (${index + prevIndex} of ${totalAppsLength})`}\n                icon={IconComp}\n                label={label}\n                getOwnerProps={ownerPropsConfig.getOwnerProps}\n                getOwnerPropsArguments={getOwnerPropsArguments}\n                wrapText={wrapText}\n              />\n            </StyledListItem>\n          );\n        })}\n      </>\n    ),\n    [ownerPropsConfig, handleOnClick, totalAppsLength],\n  );\n\n  const AppsRows = useMemo(() => buildRows(apps, 1, sectionTitle), [apps, buildRows, sectionTitle]);\n  const CustomRows = useMemo(\n    () => buildRows(customApps, apps.length + 1, customSectionTitle),\n    [apps.length, buildRows, customApps, customSectionTitle],\n  );\n\n  const layout = useMemo(() => {\n    const cols = ['repeat(3, 92px)'];\n    let appsRows = 0;\n    let customRows = 0;\n    const rows = [];\n    if (apps.length > 0) {\n      appsRows = apps.length / 3;\n      rows.push('68px', `repeat(${appsRows}, 68px})`);\n    }\n    if (customApps.length > 0) {\n      customRows = customApps.length / 3;\n      rows.push('9px', '68px', `repeat(${customRows}, 68px})`);\n    }\n    return {\n      rows,\n      cols,\n    };\n  }, [apps.length, customApps.length]);\n\n  // Needed just for typescript reasons\n  const convertedTypeReference = wrapperRef as unknown as React.RefObject<HTMLDivElement> &\n    React.RefObject<HTMLUListElement>;\n\n  return (\n    <StyledWrapper\n      forwardedAs=\"ul\"\n      role=\"listbox\"\n      innerRef={convertedTypeReference}\n      data-testid={DSAppPickerDataTestIds.ROOT}\n      isOverflow={isOverflow}\n      cols={layout.cols}\n      rows={layout.rows}\n      tabIndex={-1}\n      aria-label={`Application picker, ${sectionTitle} (${apps.length} apps)${\n        customApps.length > 0 ? `, ${customSectionTitle} (${customApps.length} apps)` : ''\n      }`}\n      {...ownerPropsConfig}\n      {...safeGlobalAttributes}\n      {...xstyledProps}\n      onKeyDown={handleOnKeyDown}\n    >\n      <StyledListItemFullRow data-testid={DSAppPickerDataTestIds.ROW} aria-hidden role=\"group\" {...ownerPropsConfig}>\n        <StyledTitle data-testid={DSAppPickerDataTestIds.TITLE} role=\"presentation\" {...ownerPropsConfig}>\n          {sectionTitle}\n        </StyledTitle>\n      </StyledListItemFullRow>\n      {AppsRows}\n      {customApps.length > 0 && (\n        <>\n          <StyledListItemFullRow\n            data-testid={DSAppPickerDataTestIds.ROW}\n            aria-hidden\n            role=\"group\"\n            {...ownerPropsConfig}\n          >\n            <StyledSeparator data-testid={DSAppPickerDataTestIds.SEPARATOR} role=\"presentation\" {...ownerPropsConfig} />\n          </StyledListItemFullRow>\n          <StyledListItemFullRow\n            data-testid={DSAppPickerDataTestIds.ROW}\n            aria-hidden\n            role=\"group\"\n            {...ownerPropsConfig}\n          >\n            <StyledTitle data-testid={DSAppPickerDataTestIds.TITLE} role=\"presentation\" {...ownerPropsConfig}>\n              {customSectionTitle}\n            </StyledTitle>\n          </StyledListItemFullRow>\n          {CustomRows}\n        </>\n      )}\n    </StyledWrapper>\n  );\n};\n\nexport default AppPickerImpl;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
-  "names": []
-}

package/dist/cjs/hooks/useKeepTrackButtons.js

@@ -1,69 +0,0 @@
-"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 useKeepTrackButtons_exports = {};
-__export(useKeepTrackButtons_exports, {
-  useKeepTrackButtons: () => useKeepTrackButtons
-});
-module.exports = __toCommonJS(useKeepTrackButtons_exports);
-var React = __toESM(require("react"));
-var import_react = require("react");
-var import_utils = require("../utils.js");
-const useKeepTrackButtons = ({
-  wrapperRef,
-  wasOpenedByKeyboardRef,
-  actionRef,
-  triggerIsInternal
-}) => {
-  const [allFocusableButtons, setAllFocusableButtons] = (0, import_react.useState)([]);
-  const selectedButton = (0, import_react.useRef)(null);
-  (0, import_react.useEffect)(() => {
-    if (actionRef && actionRef.current) {
-      actionRef.current.focusSelectedOrFirstAvailable = () => setTimeout(() => {
-        (0, import_utils.focusSelectedOrFirstAvailable)(wrapperRef, allFocusableButtons, selectedButton);
-      });
-    }
-  }, [actionRef, allFocusableButtons, wrapperRef]);
-  (0, import_react.useEffect)(() => {
-    wrapperRef?.current?.querySelectorAll("button").forEach((e, index) => {
-      if (!e.hasAttribute("disabled")) setAllFocusableButtons((prev) => [...prev, e]);
-      if (e.getAttribute("aria-selected") === "true") {
-        selectedButton.current = index;
-      }
-    });
-  }, [wasOpenedByKeyboardRef, wrapperRef, triggerIsInternal]);
-  (0, import_react.useEffect)(() => {
-    if (wasOpenedByKeyboardRef?.current || !triggerIsInternal) {
-      (0, import_utils.focusSelectedOrFirstAvailable)(wrapperRef, allFocusableButtons, selectedButton);
-    } else {
-      wrapperRef.current?.focus();
-    }
-  }, [wasOpenedByKeyboardRef, wrapperRef, triggerIsInternal, allFocusableButtons]);
-  return { allFocusableButtons, selectedButton };
-};
-//# sourceMappingURL=useKeepTrackButtons.js.map

package/dist/cjs/hooks/useKeepTrackButtons.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/hooks/useKeepTrackButtons.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import type React from 'react';\nimport { useEffect, useRef, useState } from 'react';\nimport type { DSAppPickerT } from '../react-desc-prop-types.js';\nimport { focusSelectedOrFirstAvailable } from '../utils.js';\n\ninterface UseKeepTrackButtonsT {\n  wrapperRef: React.RefObject<HTMLDivElement>;\n  wasOpenedByKeyboardRef: React.MutableRefObject<boolean>;\n  actionRef?: DSAppPickerT.ActionRef;\n  triggerIsInternal?: boolean;\n}\n\nexport const useKeepTrackButtons = ({\n  wrapperRef,\n  wasOpenedByKeyboardRef,\n  actionRef,\n  triggerIsInternal,\n}: UseKeepTrackButtonsT) => {\n  const [allFocusableButtons, setAllFocusableButtons] = useState<HTMLButtonElement[]>([]);\n  const selectedButton = useRef<number | null>(null);\n\n  useEffect(() => {\n    if (actionRef && actionRef.current) {\n      actionRef.current.focusSelectedOrFirstAvailable = () =>\n        setTimeout(() => {\n          focusSelectedOrFirstAvailable(wrapperRef, allFocusableButtons, selectedButton);\n        });\n    }\n  }, [actionRef, allFocusableButtons, wrapperRef]);\n\n  useEffect(() => {\n    wrapperRef?.current?.querySelectorAll('button').forEach((e, index) => {\n      if (!e.hasAttribute('disabled')) setAllFocusableButtons((prev) => [...prev, e]);\n      if (e.getAttribute('aria-selected') === 'true') {\n        selectedButton.current = index;\n      }\n    });\n  }, [wasOpenedByKeyboardRef, wrapperRef, triggerIsInternal]);\n\n  useEffect(() => {\n    if (wasOpenedByKeyboardRef?.current || !triggerIsInternal) {\n      focusSelectedOrFirstAvailable(wrapperRef, allFocusableButtons, selectedButton);\n    } else {\n      wrapperRef.current?.focus();\n    }\n  }, [wasOpenedByKeyboardRef, wrapperRef, triggerIsInternal, allFocusableButtons]);\n\n  return { allFocusableButtons, selectedButton };\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAA4C;AAE5C,mBAA8C;AASvC,MAAM,sBAAsB,CAAC;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA4B;AAC1B,QAAM,CAAC,qBAAqB,sBAAsB,QAAI,uBAA8B,CAAC,CAAC;AACtF,QAAM,qBAAiB,qBAAsB,IAAI;AAEjD,8BAAU,MAAM;AACd,QAAI,aAAa,UAAU,SAAS;AAClC,gBAAU,QAAQ,gCAAgC,MAChD,WAAW,MAAM;AACf,wDAA8B,YAAY,qBAAqB,cAAc;AAAA,MAC/E,CAAC;AAAA,IACL;AAAA,EACF,GAAG,CAAC,WAAW,qBAAqB,UAAU,CAAC;AAE/C,8BAAU,MAAM;AACd,gBAAY,SAAS,iBAAiB,QAAQ,EAAE,QAAQ,CAAC,GAAG,UAAU;AACpE,UAAI,CAAC,EAAE,aAAa,UAAU,EAAG,wBAAuB,CAAC,SAAS,CAAC,GAAG,MAAM,CAAC,CAAC;AAC9E,UAAI,EAAE,aAAa,eAAe,MAAM,QAAQ;AAC9C,uBAAe,UAAU;AAAA,MAC3B;AAAA,IACF,CAAC;AAAA,EACH,GAAG,CAAC,wBAAwB,YAAY,iBAAiB,CAAC;AAE1D,8BAAU,MAAM;AACd,QAAI,wBAAwB,WAAW,CAAC,mBAAmB;AACzD,sDAA8B,YAAY,qBAAqB,cAAc;AAAA,IAC/E,OAAO;AACL,iBAAW,SAAS,MAAM;AAAA,IAC5B;AAAA,EACF,GAAG,CAAC,wBAAwB,YAAY,mBAAmB,mBAAmB,CAAC;AAE/E,SAAO,EAAE,qBAAqB,eAAe;AAC/C;",
-  "names": []
-}

package/dist/cjs/styles.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/styles.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-unsafe-assignment */\n/* eslint-disable max-lines */\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSAppPickerName, DSAppPickerSlots } from './constants/index.js';\n\nexport const StyledWrapper = styled(Grid, { name: DSAppPickerName, slot: DSAppPickerSlots.ROOT })<{\n  isOverflow: boolean;\n}>`\n  min-width: 308px;\n  min-height: 110px;\n  max-height: 449px;\n  width: 308px;\n  overflow-y: auto;\n  overflow-x: hidden;\n  margin: 0;\n  padding: ${({ isOverflow }) => (isOverflow ? '0 0 8px 16px' : '0 16px 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('h3', { 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`;\n\nexport const StyledSeparator = styled('hr', { name: DSAppPickerName, slot: DSAppPickerSlots.SEPARATOR })`\n  border-top: 1px solid ${({ theme }) => theme.colors.neutral[100]};\n  border-bottom: none;\n  width: 99%;\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;ACAA,YAAuB;ADEvB,uBAAuB;AACvB,qBAAqB;AACrB,uBAAkD;AAE3C,MAAM,oBAAgB,yBAAO,qBAAM,EAAE,MAAM,kCAAiB,MAAM,kCAAiB,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAUnF,CAAC,EAAE,WAAW,MAAO,aAAa,iBAAiB,iBAAkB;AAAA;AAAA;AAAA;AAAA;AAM3E,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,MAAM,EAAE,MAAM,kCAAiB,MAAM,kCAAiB,MAAM,CAAC;AAAA,WACpF,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;AAMnD,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/utils.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/utils.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import type React from 'react';\n\nexport const keys = {\n  LEFT: 'ArrowLeft',\n  UP: 'ArrowUp',\n  RIGHT: 'ArrowRight',\n  DOWN: 'ArrowDown',\n  ENTER: 'Enter',\n  SPACE: '',\n  TAB: 'Tab',\n  ESC: 'Escape',\n  HOME: 'Home',\n  END: 'End',\n};\n\nexport const focusSelectedOrFirstAvailable = (\n  wrapperRef: React.RefObject<HTMLDivElement>,\n  allFocusableButtonsRef: HTMLButtonElement[],\n  selectedButtonRef: React.MutableRefObject<number | null>,\n) => {\n  if (selectedButtonRef.current !== null) {\n    wrapperRef?.current?.querySelectorAll('button')[selectedButtonRef.current].focus();\n  } else {\n    allFocusableButtonsRef?.[0]?.focus();\n  }\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEhB,MAAM,OAAO;AAAA,EAClB,MAAM;AAAA,EACN,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO;AAAA,EACP,KAAK;AAAA,EACL,KAAK;AAAA,EACL,MAAM;AAAA,EACN,KAAK;AACP;AAEO,MAAM,gCAAgC,CAC3C,YACA,wBACA,sBACG;AACH,MAAI,kBAAkB,YAAY,MAAM;AACtC,gBAAY,SAAS,iBAAiB,QAAQ,EAAE,kBAAkB,OAAO,EAAE,MAAM;AAAA,EACnF,OAAO;AACL,6BAAyB,CAAC,GAAG,MAAM;AAAA,EACrC;AACF;",
-  "names": []
-}

package/dist/esm/AppPickerImpl.js

@@ -1,174 +0,0 @@
-import * as React from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useCallback, useRef, useMemo } from "react";
-import { styled } from "@elliemae/ds-system";
-import { DSChip } from "@elliemae/ds-chip";
-import { useFocusTrap } from "@elliemae/ds-hooks-focus-trap";
-import { keys } from "./utils.js";
-import { StyledWrapper, StyledSeparator, StyledListItemFullRow, StyledListItem, StyledTitle } from "./styles.js";
-import { useKeepTrackButtons } from "./hooks/useKeepTrackButtons.js";
-import { DSAppPickerDataTestIds, DSAppPickerName, DSAppPickerSlots } from "./constants/index.js";
-import { useAppPicker } from "./config/useAppPicker.js";
-const StyledChip = styled(DSChip, { name: DSAppPickerName, slot: DSAppPickerSlots.CHIP })``;
-const AppPickerImpl = (props) => {
-  const {
-    apps,
-    customApps,
-    sectionTitle,
-    customSectionTitle,
-    close,
-    wrapperRef,
-    onKeyDown,
-    triggerRef,
-    isOverflow,
-    actionRef,
-    wasOpenedByKeyboardRef,
-    triggerIsInternal
-  } = props;
-  const { ownerPropsConfig, globalAttributes, xstyledProps } = useAppPicker(props);
-  const { wrap, onClick, onKeyDown: onKeyDownGlobal, ...safeGlobalAttributes } = globalAttributes;
-  const { allFocusableButtons } = useKeepTrackButtons({
-    wrapperRef,
-    wasOpenedByKeyboardRef,
-    actionRef,
-    triggerIsInternal
-  });
-  const firstElementRef = useRef(null);
-  const lastElementRef = useRef(null);
-  const handleOnClick = useCallback(
-    (app) => (e) => {
-      if (app.onClick) app.onClick(e, app);
-    },
-    []
-  );
-  const handleOnKeyDownWrapper = useCallback(
-    (e) => {
-      if (onKeyDown) onKeyDown(e);
-      if (!onKeyDown && e.key === keys.ESC) {
-        triggerRef?.current?.focus();
-        close();
-      }
-    },
-    [onKeyDown, triggerRef, close]
-  );
-  const [firstButton] = allFocusableButtons;
-  firstElementRef.current = firstButton;
-  lastElementRef.current = allFocusableButtons[allFocusableButtons.length - 1];
-  const handleOnKeyDown = useFocusTrap({
-    firstElementRef,
-    lastElementRef,
-    onKeyDown: handleOnKeyDownWrapper
-  });
-  const totalAppsLength = useMemo(() => apps.length + customApps.length, [apps.length, customApps.length]);
-  const buildRows = useCallback(
-    (appList, prevIndex, title) => /* @__PURE__ */ jsx(Fragment, { children: appList.map((app, index) => {
-      const { label, disabled, applyAriaDisabled, selected, icon: Icon, id, wrapText } = app;
-      const IconComp = () => /* @__PURE__ */ jsx(Icon, { className: "app-picker__icon", size: "m" });
-      const getOwnerPropsArguments = () => app;
-      return /* @__PURE__ */ jsx(
-        StyledListItem,
-        {
-          "data-testid": DSAppPickerDataTestIds.ITEM,
-          role: "presentation",
-          getOwnerProps: ownerPropsConfig.getOwnerProps,
-          getOwnerPropsArguments,
-          children: /* @__PURE__ */ jsx(
-            StyledChip,
-            {
-              onClick: handleOnClick(app),
-              "data-testid": "app-picker__chip",
-              disabled,
-              applyAriaDisabled,
-              selected,
-              "aria-selected": selected,
-              role: "option",
-              id,
-              "aria-label": `${label}. ${title} (${index + prevIndex} of ${totalAppsLength})`,
-              icon: IconComp,
-              label,
-              getOwnerProps: ownerPropsConfig.getOwnerProps,
-              getOwnerPropsArguments,
-              wrapText
-            },
-            index
-          )
-        }
-      );
-    }) }),
-    [ownerPropsConfig, handleOnClick, totalAppsLength]
-  );
-  const AppsRows = useMemo(() => buildRows(apps, 1, sectionTitle), [apps, buildRows, sectionTitle]);
-  const CustomRows = useMemo(
-    () => buildRows(customApps, apps.length + 1, customSectionTitle),
-    [apps.length, buildRows, customApps, customSectionTitle]
-  );
-  const layout = useMemo(() => {
-    const cols = ["repeat(3, 92px)"];
-    let appsRows = 0;
-    let customRows = 0;
-    const rows = [];
-    if (apps.length > 0) {
-      appsRows = apps.length / 3;
-      rows.push("68px", `repeat(${appsRows}, 68px})`);
-    }
-    if (customApps.length > 0) {
-      customRows = customApps.length / 3;
-      rows.push("9px", "68px", `repeat(${customRows}, 68px})`);
-    }
-    return {
-      rows,
-      cols
-    };
-  }, [apps.length, customApps.length]);
-  const convertedTypeReference = wrapperRef;
-  return /* @__PURE__ */ jsxs(
-    StyledWrapper,
-    {
-      forwardedAs: "ul",
-      role: "listbox",
-      innerRef: convertedTypeReference,
-      "data-testid": DSAppPickerDataTestIds.ROOT,
-      isOverflow,
-      cols: layout.cols,
-      rows: layout.rows,
-      tabIndex: -1,
-      "aria-label": `Application picker, ${sectionTitle} (${apps.length} apps)${customApps.length > 0 ? `, ${customSectionTitle} (${customApps.length} apps)` : ""}`,
-      ...ownerPropsConfig,
-      ...safeGlobalAttributes,
-      ...xstyledProps,
-      onKeyDown: handleOnKeyDown,
-      children: [
-        /* @__PURE__ */ jsx(StyledListItemFullRow, { "data-testid": DSAppPickerDataTestIds.ROW, "aria-hidden": true, role: "group", ...ownerPropsConfig, children: /* @__PURE__ */ jsx(StyledTitle, { "data-testid": DSAppPickerDataTestIds.TITLE, role: "presentation", ...ownerPropsConfig, children: sectionTitle }) }),
-        AppsRows,
-        customApps.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(
-            StyledListItemFullRow,
-            {
-              "data-testid": DSAppPickerDataTestIds.ROW,
-              "aria-hidden": true,
-              role: "group",
-              ...ownerPropsConfig,
-              children: /* @__PURE__ */ jsx(StyledSeparator, { "data-testid": DSAppPickerDataTestIds.SEPARATOR, role: "presentation", ...ownerPropsConfig })
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            StyledListItemFullRow,
-            {
-              "data-testid": DSAppPickerDataTestIds.ROW,
-              "aria-hidden": true,
-              role: "group",
-              ...ownerPropsConfig,
-              children: /* @__PURE__ */ jsx(StyledTitle, { "data-testid": DSAppPickerDataTestIds.TITLE, role: "presentation", ...ownerPropsConfig, children: customSectionTitle })
-            }
-          ),
-          CustomRows
-        ] })
-      ]
-    }
-  );
-};
-var AppPickerImpl_default = AppPickerImpl;
-export {
-  AppPickerImpl_default as default
-};
-//# sourceMappingURL=AppPickerImpl.js.map