@elliemae/ds-global-header 2.2.0-alpha.2 → 2.2.0-beta.0

package/esm/config/useGetPropsWithDefaults.js

@@ -1,14 +1,23 @@
-import * as React from "react";
-import { useMemo } from "react";
-import { defaultProps } from "../defaultProps";
-const useGetPropsWithDefaults = (props) => {
-  const { toolbar, breadcrumb, Logo, LogoWithBrand } = props;
-  return useMemo(() => ({
-    ...defaultProps,
-    ...props
-  }), [toolbar, breadcrumb, Logo, LogoWithBrand]);
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import { useMemo } from 'react';
+import { defaultProps } from '../defaultProps.js';
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+const useGetPropsWithDefaults = props => {
+  const {
+    toolbar,
+    breadcrumb,
+    Logo,
+    LogoWithBrand
+  } = props;
+  return useMemo(() => _objectSpread(_objectSpread({}, defaultProps), props), [toolbar, breadcrumb, Logo, LogoWithBrand]);
 };
-export {
-  useGetPropsWithDefaults
-};
-//# sourceMappingURL=useGetPropsWithDefaults.js.map
+
+export { useGetPropsWithDefaults };

package/esm/config/useGlobalHeader.js

@@ -1,14 +1,23 @@
-import * as React from "react";
-import React2, { useState, useMemo } from "react";
-import { uid } from "uid";
-import { useGetPropsWithDefaults } from "./useGetPropsWithDefaults";
-const useGlobalHeader = (props) => {
+import 'core-js/modules/web.dom-collections.iterator.js';
+import React, { useState, useMemo } from 'react';
+import { uid } from 'uid';
+import { useGetPropsWithDefaults } from './useGetPropsWithDefaults.js';
+
+const useGlobalHeader = props => {
   const [showIconOnly, setShowIconOnly] = useState(false);
   const instanceUID = useMemo(() => uid(5), []);
-  const globalHeaderToolbarGrid = useMemo(() => new Array(props?.toolbar?.length ?? 0).fill("auto"), [props.toolbar]);
-  const globalHeaderBreadcrumbGrid = useMemo(() => ["auto", ...new Array(props?.breadcrumb?.length ?? 0).fill("auto"), "1fr"], [props.breadcrumb]);
+  const globalHeaderToolbarGrid = useMemo(() => {
+    var _props$toolbar$length, _props$toolbar;
+
+    return new Array((_props$toolbar$length = props === null || props === void 0 ? void 0 : (_props$toolbar = props.toolbar) === null || _props$toolbar === void 0 ? void 0 : _props$toolbar.length) !== null && _props$toolbar$length !== void 0 ? _props$toolbar$length : 0).fill('auto');
+  }, [props.toolbar]);
+  const globalHeaderBreadcrumbGrid = useMemo(() => {
+    var _props$breadcrumb$len, _props$breadcrumb;
+
+    return ['auto', ...new Array((_props$breadcrumb$len = props === null || props === void 0 ? void 0 : (_props$breadcrumb = props.breadcrumb) === null || _props$breadcrumb === void 0 ? void 0 : _props$breadcrumb.length) !== null && _props$breadcrumb$len !== void 0 ? _props$breadcrumb$len : 0).fill('auto'), '1fr'];
+  }, [props.breadcrumb]);
   const propsWithDefaults = useGetPropsWithDefaults(props);
-  const ctx = React2.useMemo(() => ({
+  const ctx = React.useMemo(() => ({
     props: propsWithDefaults,
     showIconOnly,
     setShowIconOnly,
@@ -18,7 +27,5 @@ const useGlobalHeader = (props) => {
   }), [propsWithDefaults, showIconOnly, instanceUID, globalHeaderToolbarGrid, globalHeaderBreadcrumbGrid]);
   return ctx;
 };
-export {
-  useGlobalHeader
-};
-//# sourceMappingURL=useGlobalHeader.js.map
+
+export { useGlobalHeader };

package/esm/config/useValidateProps.js

@@ -1,88 +1,88 @@
-import * as React from "react";
-import {
-  throwToolbarPopupItemError,
-  throwToolbarAppPickerItemError,
-  throwToolbarItemGenericError,
-  throwLogoError,
-  throwBreadcrumbItemError,
-  isValidToolbarType,
-  isObject
-} from "./validateHelpers";
-const validatePopupItem = (componentProps) => {
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import { throwLogoError, throwBreadcrumbItemError, isValidToolbarType, throwToolbarItemGenericError, isObject, throwToolbarPopupItemError, throwToolbarAppPickerItemError } from './validateHelpers.js';
+
+const validatePopupItem = componentProps => {
   if (componentProps.options && !Array.isArray(componentProps.options)) {
-    throwToolbarPopupItemError("options", componentProps.options);
+    throwToolbarPopupItemError('options', componentProps.options);
   }
-  if (componentProps.closeOnClick && typeof componentProps.closeOnClick !== "boolean") {
-    throwToolbarPopupItemError("closeOnClick", componentProps.closeOnClick);
+
+  if (componentProps.closeOnClick && typeof componentProps.closeOnClick !== 'boolean') {
+    throwToolbarPopupItemError('closeOnClick', componentProps.closeOnClick);
   }
 };
-const validateAppPickerItem = (componentProps) => {
+
+const validateAppPickerItem = componentProps => {
   if (componentProps.apps && !Array.isArray(componentProps.apps)) {
-    throwToolbarAppPickerItemError("apps", componentProps.apps);
+    throwToolbarAppPickerItemError('apps', componentProps.apps);
   }
+
   if (componentProps.customApps && !Array.isArray(componentProps.customApps)) {
-    throwToolbarAppPickerItemError("customApps", componentProps.customApps);
+    throwToolbarAppPickerItemError('customApps', componentProps.customApps);
   }
-  if (componentProps.sectionTitle && typeof componentProps.sectionTitle !== "string") {
-    throwToolbarAppPickerItemError("sectionTitle", componentProps.sectionTitle);
+
+  if (componentProps.sectionTitle && typeof componentProps.sectionTitle !== 'string') {
+    throwToolbarAppPickerItemError('sectionTitle', componentProps.sectionTitle);
   }
-  if (componentProps.customSectionTitle && typeof componentProps.customSectionTitle !== "string") {
-    throwToolbarAppPickerItemError("customSectionTitle", componentProps.customSectionTitle);
+
+  if (componentProps.customSectionTitle && typeof componentProps.customSectionTitle !== 'string') {
+    throwToolbarAppPickerItemError('customSectionTitle', componentProps.customSectionTitle);
   }
 };
-const validateGenericToolbarItem = (item) => {
-  if (item.label && typeof item.label !== "string") {
-    throwToolbarItemGenericError("label", item.label);
+
+const useValidateProps = props => {
+  const {
+    breadcrumb,
+    toolbar,
+    Logo,
+    LogoWithBrand
+  } = props;
+
+  if (Logo && typeof Logo !== 'function') {
+    throwLogoError('Logo', Logo);
   }
-  if (item.onClick && typeof item.onClick !== "function") {
-    throwToolbarItemGenericError("onClick", item.onClick);
+
+  if (LogoWithBrand && typeof LogoWithBrand !== 'function') {
+    throwLogoError('LogoWithBrand', LogoWithBrand);
   }
-  if (item.Icon && typeof item.Icon !== "function") {
-    if (item.type === "ds-app-picker")
-      return;
-    throwToolbarItemGenericError("Icon", item.Icon);
-  }
-};
-const useValidateProps = (props) => {
-  const { breadcrumb, toolbar, Logo, LogoWithBrand } = props;
-  if (Logo && typeof Logo !== "function") {
-    throwLogoError("Logo", Logo);
-  }
-  if (LogoWithBrand && typeof LogoWithBrand !== "function") {
-    throwLogoError("LogoWithBrand", LogoWithBrand);
-  }
-  breadcrumb?.forEach((breadcrumbItem) => {
-    if (breadcrumbItem.label && typeof breadcrumbItem.label !== "string") {
-      throwBreadcrumbItemError("label", breadcrumbItem.label);
+
+  breadcrumb === null || breadcrumb === void 0 ? void 0 : breadcrumb.forEach(breadcrumbItem => {
+    if (breadcrumbItem.label && typeof breadcrumbItem.label !== 'string') {
+      throwBreadcrumbItemError('label', breadcrumbItem.label);
     }
-    if (breadcrumbItem.onClick && typeof breadcrumbItem.onClick !== "function") {
-      throwBreadcrumbItemError("onClick", breadcrumbItem.onClick);
+
+    if (breadcrumbItem.onClick && typeof breadcrumbItem.onClick !== 'function') {
+      throwBreadcrumbItemError('onClick', breadcrumbItem.onClick);
     }
-    if (breadcrumbItem.hasNext && typeof breadcrumbItem.hasNext !== "boolean") {
-      throwBreadcrumbItemError("hasNext", breadcrumbItem.hasNext);
+
+    if (breadcrumbItem.hasNext && typeof breadcrumbItem.hasNext !== 'boolean') {
+      throwBreadcrumbItemError('hasNext', breadcrumbItem.hasNext);
     }
-    if (breadcrumbItem.isSelected && typeof breadcrumbItem.isSelected !== "boolean") {
-      throwBreadcrumbItemError("isSelected", breadcrumbItem.isSelected);
+
+    if (breadcrumbItem.isSelected && typeof breadcrumbItem.isSelected !== 'boolean') {
+      throwBreadcrumbItemError('isSelected', breadcrumbItem.isSelected);
     }
   });
-  toolbar?.forEach((toolbarItem) => {
+  toolbar === null || toolbar === void 0 ? void 0 : toolbar.forEach(toolbarItem => {
     if (toolbarItem.type) {
       if (!isValidToolbarType(toolbarItem.type)) {
-        throwToolbarItemGenericError("type", toolbarItem.type);
+        throwToolbarItemGenericError('type', toolbarItem.type);
       }
+
       if (toolbarItem.componentProps && !isObject(toolbarItem.componentProps)) {
-        throwToolbarItemGenericError("componentProps", toolbarItem.componentProps);
+        throwToolbarItemGenericError('componentProps', toolbarItem.componentProps);
       }
-      if (toolbarItem.type === "ds-popup-menu") {
+
+      if (toolbarItem.type === 'ds-popup-menu') {
         validatePopupItem(toolbarItem.componentProps);
       }
-      if (toolbarItem.type === "ds-app-picker") {
+
+      if (toolbarItem.type === 'ds-app-picker') {
         validateAppPickerItem(toolbarItem.componentProps);
       }
     }
   });
 };
-export {
-  useValidateProps
-};
-//# sourceMappingURL=useValidateProps.js.map
+
+export { useValidateProps };

package/esm/config/validateHelpers.js

@@ -1,82 +1,44 @@
-import * as React from "react";
 const breadcrumbProps = {
-  label: "string",
-  onClick: "function",
-  hasNext: "boolean",
-  isSelected: "boolean"
+  label: 'string',
+  onClick: 'function',
+  hasNext: 'boolean',
+  isSelected: 'boolean'
 };
 const toolbarProps = {
-  label: "string",
+  label: 'string',
   type: '"ds-app-picker" or "ds-popup-menu" or "ds-search-toggle"',
-  componentProps: "object",
-  Icon: "react component",
-  onClick: "function",
-  options: "array",
-  closeOnClick: "boolean",
-  apps: "array",
-  customApps: "array",
-  sectionTitle: "string",
-  customSectionTitle: "string"
-};
-const isObject = (obj) => typeof obj === "object" && !!obj && !Array.isArray(obj);
-const getVariableType = (arg) => {
-  if (Array.isArray(arg))
-    return "array";
-  if (arg === null)
-    return "null";
-  if (arg === void 0)
-    return "undefined";
+  componentProps: 'object',
+  Icon: 'react component',
+  onClick: 'function',
+  options: 'array',
+  closeOnClick: 'boolean',
+  apps: 'array',
+  customApps: 'array',
+  sectionTitle: 'string',
+  customSectionTitle: 'string'
+};
+const isObject = obj => typeof obj === 'object' && !!obj && !Array.isArray(obj);
+const getVariableType = arg => {
+  if (Array.isArray(arg)) return 'array';
+  if (arg === null) return 'null';
+  if (arg === undefined) return 'undefined';
   return typeof arg;
 };
-const isValidToolbarType = (string) => string === "ds-app-picker" || string === "ds-popup-menu" || string === "ds-search-toggle" || string === "custom";
+const isValidToolbarType = string => string === 'ds-app-picker' || string === 'ds-popup-menu' || string === 'ds-search-toggle' || string === 'custom';
 const throwBreadcrumbItemError = (validPropKey, invalidProp) => {
-  throw new Error(`You are trying to pass a not valid "${validPropKey}" property for a breadcrumb item, please provide a valid type.
-
-  Received: ${invalidProp} (${typeof invalidProp})
-  Expected: (${breadcrumbProps[validPropKey]})
-  `);
+  throw new Error("You are trying to pass a not valid \"".concat(validPropKey, "\" property for a breadcrumb item, please provide a valid type.\n\n  Received: ").concat(invalidProp, " (").concat(typeof invalidProp, ")\n  Expected: (").concat(breadcrumbProps[validPropKey], ")\n  "));
 };
 const throwToolbarPopupItemError = (validPropKey, invalidProp) => {
-  throw new Error(`You are trying to pass a not valid "${validPropKey}" property inside componentProps for a ds-popup-menu 
-    toolbar item, please provide a valid type.
-
-  Received: ${invalidProp} (${getVariableType(invalidProp)})
-  Expected: (${toolbarProps[validPropKey]})
-  `);
+  throw new Error("You are trying to pass a not valid \"".concat(validPropKey, "\" property inside componentProps for a ds-popup-menu \n    toolbar item, please provide a valid type.\n\n  Received: ").concat(invalidProp, " (").concat(getVariableType(invalidProp), ")\n  Expected: (").concat(toolbarProps[validPropKey], ")\n  "));
 };
 const throwToolbarAppPickerItemError = (validPropKey, invalidProp) => {
-  throw new Error(`You are trying to pass a not valid "${validPropKey}" property inside componentProps for a ds-app-picker 
-    toolbar item, please provide a valid type.
-
-  Received: ${invalidProp} (${getVariableType(invalidProp)})
-  Expected: (${toolbarProps[validPropKey]})
-  `);
+  throw new Error("You are trying to pass a not valid \"".concat(validPropKey, "\" property inside componentProps for a ds-app-picker \n    toolbar item, please provide a valid type.\n\n  Received: ").concat(invalidProp, " (").concat(getVariableType(invalidProp), ")\n  Expected: (").concat(toolbarProps[validPropKey], ")\n  "));
 };
 const throwToolbarItemGenericError = (validPropKey, invalidProp) => {
-  throw new Error(`You are trying to pass a not valid "${validPropKey}" property for a toolbar item, please provide a valid type.
-
-  Received: ${invalidProp} (${getVariableType(invalidProp)})
-  Expected: (${toolbarProps[validPropKey]})
-  `);
+  throw new Error("You are trying to pass a not valid \"".concat(validPropKey, "\" property for a toolbar item, please provide a valid type.\n\n  Received: ").concat(invalidProp, " (").concat(getVariableType(invalidProp), ")\n  Expected: (").concat(toolbarProps[validPropKey], ")\n  "));
 };
 const throwLogoError = (validPropKey, invalidProp) => {
-  throw new Error(`You are trying to pass a not valid "${validPropKey}" property for a global header, 
-    remember to provide both Logo and LogoWithBrand properties with a valid type.
-
-  Received: ${invalidProp} (${getVariableType(invalidProp)}).
-  Expected: (react component).
-  `);
+  throw new Error("You are trying to pass a not valid \"".concat(validPropKey, "\" property for a global header, \n    remember to provide both Logo and LogoWithBrand properties with a valid type.\n\n  Received: ").concat(invalidProp, " (").concat(getVariableType(invalidProp), ").\n  Expected: (react component).\n  "));
 };
-export {
-  breadcrumbProps,
-  getVariableType,
-  isObject,
-  isValidToolbarType,
-  throwBreadcrumbItemError,
-  throwLogoError,
-  throwToolbarAppPickerItemError,
-  throwToolbarItemGenericError,
-  throwToolbarPopupItemError,
-  toolbarProps
-};
-//# sourceMappingURL=validateHelpers.js.map
+
+export { breadcrumbProps, getVariableType, isObject, isValidToolbarType, throwBreadcrumbItemError, throwLogoError, throwToolbarAppPickerItemError, throwToolbarItemGenericError, throwToolbarPopupItemError, toolbarProps };

package/esm/defaultProps.js

@@ -1,12 +1,10 @@
-import * as React from "react";
 const emptyComp = () => null;
+
 const defaultProps = {
   breadcrumb: [],
   toolbar: [],
   LogoWithBrand: emptyComp,
   Logo: emptyComp
 };
-export {
-  defaultProps
-};
-//# sourceMappingURL=defaultProps.js.map
+
+export { defaultProps };

package/esm/index.js

@@ -1,7 +1 @@
-import * as React from "react";
-export * from "./GlobalHeader";
-import { GlobalHeader } from "./GlobalHeader";
-export {
-  GlobalHeader as default
-};
-//# sourceMappingURL=index.js.map
+export { GlobalHeader, GlobalHeaderWithSchema, GlobalHeader as default } from './GlobalHeader.js';

package/esm/outOfTheBox/AppPicker/AppPicker.js

@@ -1,16 +1,35 @@
-import * as React from "react";
-import React2, { useState, useRef, useCallback, useMemo } from "react";
-import { DSAppPicker } from "@elliemae/ds-app-picker";
-import { mergeRefs } from "@elliemae/ds-utilities";
-import { MenuPicker } from "@elliemae/ds-icons";
-import { getDataProps } from "@elliemae/ds-props-helpers";
-import { Button } from "../../components/Toolbar/styles";
-const AppPicker = ({
-  label,
-  id,
-  componentProps,
-  ...otherProps
-}) => {
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import { useState, useRef, useCallback, useMemo } from 'react';
+import { DSAppPicker } from '@elliemae/ds-app-picker';
+import { mergeRefs } from '@elliemae/ds-utilities';
+import { MenuPicker } from '@elliemae/ds-icons';
+import { Button } from '../../components/Toolbar/styles.js';
+import { getDataProps } from '@elliemae/ds-props-helpers';
+import { jsx } from 'react/jsx-runtime';
+
+var _MenuPicker;
+
+const _excluded = ["label", "id", "componentProps"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+const AppPicker = _ref => {
+  let {
+    label,
+    id,
+    componentProps
+  } = _ref,
+      otherProps = _objectWithoutProperties(_ref, _excluded);
+
   const [isOpen, setIsOpen] = useState(false);
   const buttonRef = useRef(null);
   const {
@@ -28,15 +47,17 @@ const AppPicker = ({
     triggerRef,
     triggerOnClick
   } = componentProps;
-  const handleTriggerKeyDown = useCallback((e) => {
-    if (e.code === "Enter" || e.code === "Space") {
+  const handleTriggerKeyDown = useCallback(e => {
+    if (e.code === 'Enter' || e.code === 'Space') {
       setIsOpen(true);
     }
   }, []);
-  const handleAppPickerOnKeyDown = useCallback((e) => {
-    if (e.code === "Escape") {
+  const handleAppPickerOnKeyDown = useCallback(e => {
+    if (e.code === 'Escape') {
+      var _buttonRef$current;
+
       setIsOpen(false);
-      buttonRef?.current?.focus();
+      buttonRef === null || buttonRef === void 0 ? void 0 : (_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 ? void 0 : _buttonRef$current.focus();
     }
   }, []);
   const handleOnClickOutside = useCallback(() => {
@@ -45,37 +66,42 @@ const AppPicker = ({
   const handleOnClick = useCallback(() => {
     setIsOpen(true);
   }, []);
-  const renderTrigger = useMemo(() => ({ ref }) => /* @__PURE__ */ React2.createElement("div", {
-    ref
-  }, /* @__PURE__ */ React2.createElement(Button, {
-    onClick: triggerOnClick ?? handleOnClick,
-    onKeyDown: handleTriggerKeyDown,
-    ref: mergeRefs(buttonRef, triggerRef),
-    title: label,
-    "data-testid": "gh-toolbar-item",
-    id,
-    ...getDataProps(otherProps)
-  }, /* @__PURE__ */ React2.createElement(MenuPicker, {
-    fill: "#FFF",
-    width: 20.73,
-    height: 20.73
-  }))), [triggerOnClick, handleOnClick, handleTriggerKeyDown, triggerRef, label, id, otherProps]);
-  return /* @__PURE__ */ React2.createElement(DSAppPicker, {
-    apps,
-    customApps,
-    sectionTitle,
-    customSectionTitle,
-    icon,
-    onKeyDown: userOnKeyDown ?? handleAppPickerOnKeyDown,
-    actionRef,
-    onClickOutside: userOnClickOutside ?? handleOnClickOutside,
-    renderTrigger: userRenderTrigger ?? renderTrigger,
-    isOpen: userIsOpen ?? isOpen,
-    onClose,
-    triggerRef
+  const renderTrigger = useMemo(() => _ref2 => {
+    let {
+      ref
+    } = _ref2;
+    return /*#__PURE__*/jsx("div", {
+      ref: ref,
+      children: /*#__PURE__*/jsx(Button, _objectSpread(_objectSpread({
+        onClick: triggerOnClick !== null && triggerOnClick !== void 0 ? triggerOnClick : handleOnClick,
+        onKeyDown: handleTriggerKeyDown,
+        ref: mergeRefs(buttonRef, triggerRef),
+        title: label,
+        "data-testid": "gh-toolbar-item",
+        id: id
+      }, getDataProps(otherProps)), {}, {
+        children: _MenuPicker || (_MenuPicker = /*#__PURE__*/_jsx(MenuPicker, {
+          fill: "#FFF",
+          width: 20.73,
+          height: 20.73
+        }))
+      }))
+    });
+  }, [triggerOnClick, handleOnClick, handleTriggerKeyDown, triggerRef, label, id, otherProps]);
+  return /*#__PURE__*/_jsx(DSAppPicker, {
+    apps: apps,
+    customApps: customApps,
+    sectionTitle: sectionTitle,
+    customSectionTitle: customSectionTitle,
+    icon: icon,
+    onKeyDown: userOnKeyDown !== null && userOnKeyDown !== void 0 ? userOnKeyDown : handleAppPickerOnKeyDown,
+    actionRef: actionRef,
+    onClickOutside: userOnClickOutside !== null && userOnClickOutside !== void 0 ? userOnClickOutside : handleOnClickOutside,
+    renderTrigger: userRenderTrigger !== null && userRenderTrigger !== void 0 ? userRenderTrigger : renderTrigger,
+    isOpen: userIsOpen !== null && userIsOpen !== void 0 ? userIsOpen : isOpen,
+    onClose: onClose,
+    triggerRef: triggerRef
   });
 };
-export {
-  AppPicker
-};
-//# sourceMappingURL=AppPicker.js.map
+
+export { AppPicker };

package/esm/outOfTheBox/PopupMenu/PopupMenu.js

@@ -1,10 +1,36 @@
-import * as React from "react";
-import React2, { useState, useCallback, useMemo } from "react";
-import { DSPopperJS } from "@elliemae/ds-popperjs";
-import { PopupMenuContent } from "./PopupMenuContent";
-import { Button } from "../../components/Toolbar/styles";
-import { getDataProps } from "@elliemae/ds-props-helpers";
-const PopupMenu = ({ Icon, title, onClick, id, componentProps, ...otherProps }) => {
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import { useState, useCallback, useMemo } from 'react';
+import { DSPopperJS } from '@elliemae/ds-popperjs';
+import { PopupMenuContent } from './PopupMenuContent.js';
+import { Button } from '../../components/Toolbar/styles.js';
+import { getDataProps } from '@elliemae/ds-props-helpers';
+import { jsx } from 'react/jsx-runtime';
+
+const _excluded = ["Icon", "title", "onClick", "id", "componentProps"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+const PopupMenu = _ref => {
+  var _PopupMenuContent;
+
+  let {
+    Icon,
+    title,
+    onClick,
+    id,
+    componentProps
+  } = _ref,
+      otherProps = _objectWithoutProperties(_ref, _excluded);
+
   const [isOpen, setIsOpen] = useState(false);
   const [buttonRef, setButtonRef] = useState(null);
   const {
@@ -15,53 +41,51 @@ const PopupMenu = ({ Icon, title, onClick, id, componentProps, ...otherProps })
     options,
     closeOnClick
   } = componentProps;
-  const handleKeyPress = useCallback((e) => {
-    if (e.code === "Enter" || e.code === "Space") {
+  const handleKeyPress = useCallback(e => {
+    if (e.code === 'Enter' || e.code === 'Space') {
       setIsOpen(true);
     }
-    if (onKeyPress)
-      onKeyPress(e);
+
+    if (onKeyPress) onKeyPress(e);
   }, [onKeyPress]);
   const handleOnClose = useCallback(() => {
-    if (userIsOpen === void 0) {
+    if (userIsOpen === undefined) {
       setIsOpen(false);
     }
-    buttonRef?.focus();
+
+    buttonRef === null || buttonRef === void 0 ? void 0 : buttonRef.focus();
   }, [buttonRef, userIsOpen]);
-  const handleTriggerOnClick = useCallback((e) => {
-    if (userIsOpen === void 0)
-      setIsOpen(true);
+  const handleTriggerOnClick = useCallback(e => {
+    if (userIsOpen === undefined) setIsOpen(true);
     onClick(e);
   }, [onClick, userIsOpen]);
   const handleItemClick = useCallback(() => {
-    if (closeOnClick && userIsOpen === void 0)
-      handleOnClose();
+    if (closeOnClick && userIsOpen === undefined) handleOnClose();
   }, [closeOnClick, handleOnClose, userIsOpen]);
-  const content = useMemo(() => /* @__PURE__ */ React2.createElement(PopupMenuContent, {
-    options,
+  const content = useMemo(() => _PopupMenuContent || (_PopupMenuContent = /*#__PURE__*/_jsx(PopupMenuContent, {
+    options: options,
     onItemClick: handleItemClick,
     onClose: handleOnClose,
-    popupOnKeyPress
-  }), [options, handleItemClick, handleOnClose, popupOnKeyPress]);
-  return /* @__PURE__ */ React2.createElement("div", null, /* @__PURE__ */ React2.createElement(Button, {
+    popupOnKeyPress: popupOnKeyPress
+  })), [options, handleItemClick, handleOnClose, popupOnKeyPress]);
+  return /*#__PURE__*/_jsx("div", {}, void 0, /*#__PURE__*/jsx(Button, _objectSpread(_objectSpread({
     onClick: handleTriggerOnClick,
     onKeyPress: handleKeyPress,
-    title,
+    title: title,
     ref: setButtonRef,
     "data-testid": "gh-toolbar-item",
-    id,
-    ...getDataProps(otherProps)
-  }, Icon && /* @__PURE__ */ React2.createElement(Icon, {
-    fill: "#FFF",
-    size: "m"
-  })), /* @__PURE__ */ React2.createElement(DSPopperJS, {
+    id: id
+  }, getDataProps(otherProps)), {}, {
+    children: Icon && /*#__PURE__*/_jsx(Icon, {
+      fill: "#FFF",
+      size: "m"
+    })
+  })), /*#__PURE__*/_jsx(DSPopperJS, {
     referenceElement: buttonRef,
-    showPopover: userIsOpen ?? isOpen,
+    showPopover: userIsOpen !== null && userIsOpen !== void 0 ? userIsOpen : isOpen,
     closeContextMenu: handleOnClose,
-    onClickOutside
-  }, content));
-};
-export {
-  PopupMenu
+    onClickOutside: onClickOutside
+  }, void 0, content));
 };
-//# sourceMappingURL=PopupMenu.js.map
+
+export { PopupMenu };