@elliemae/ds-global-header 2.0.0-alpha.11 → 2.0.0-alpha.12

package/esm/outOfTheBox/PopupMenu/PopupMenu.js

@@ -1,33 +1,32 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import 'core-js/modules/web.dom-collections.iterator.js';
-import { useState, useRef, useCallback, useMemo } from 'react';
-import Popover from '@elliemae/ds-popover';
+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 { jsx } from 'react/jsx-runtime';
 
-const PopupMenu = ({
-  Icon,
-  options,
-  closeOnClick,
-  title,
-  onClick
-}) => {
+const PopupMenu = _ref => {
   var _PopupMenuContent;
 
+  let {
+    Icon,
+    options,
+    closeOnClick,
+    title,
+    onClick
+  } = _ref;
   const [isOpen, setIsOpen] = useState(false);
-  const buttonRef = useRef();
+  const [buttonRef, setButtonRef] = useState(null);
   const handleKeyPress = useCallback(e => {
     if (e.code === 'Enter' || e.code === 'Space') {
       setIsOpen(true);
     }
   }, []);
   const handleOnClose = useCallback(() => {
-    var _buttonRef$current;
-
     setIsOpen(false);
-    (_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 ? void 0 : _buttonRef$current.focus();
-  }, []);
+    buttonRef === null || buttonRef === void 0 ? void 0 : buttonRef.focus();
+  }, [buttonRef]);
   const handleTriggerOnClick = useCallback(e => {
     setIsOpen(true);
     onClick(e);
@@ -35,39 +34,26 @@ const PopupMenu = ({
   const handleItemClick = useCallback(() => {
     if (closeOnClick) handleOnClose();
   }, [closeOnClick, handleOnClose]);
-  const handleClickOutside = useCallback(() => setIsOpen(false), []);
   const content = useMemo(() => _PopupMenuContent || (_PopupMenuContent = /*#__PURE__*/_jsx(PopupMenuContent, {
     options: options,
     onItemClick: handleItemClick,
     onClose: handleOnClose
   })), [options, handleItemClick, handleOnClose]);
-  const trigger = useMemo(() => ({
-    ref
-  }) => /*#__PURE__*/jsx(Button, {
+  return /*#__PURE__*/_jsx("div", {}, void 0, /*#__PURE__*/jsx(Button, {
     onClick: handleTriggerOnClick,
     onKeyPress: handleKeyPress,
     title: title,
-    ref: buttonRef,
+    ref: setButtonRef,
     "data-testid": "gh-toolbar-item",
-    children: /*#__PURE__*/_jsx(Icon, {
-      innerRef: ref,
+    children: Icon && /*#__PURE__*/_jsx(Icon, {
       fill: "#FFF",
       size: "m"
     })
-  }), [Icon, handleKeyPress, handleTriggerOnClick, title]);
-  return useMemo(() => /*#__PURE__*/_jsx(Popover, {
-    isOpen: isOpen,
-    content: content,
-    onClickOutside: handleClickOutside,
-    placement: "bottom",
-    interactionType: "click",
-    showArrow: true,
-    style: {
-      padding: '0',
-      width: 'fit-content'
-    },
-    renderTrigger: trigger
-  }), [content, handleClickOutside, isOpen, trigger]);
+  }), /*#__PURE__*/_jsx(DSPopperJS, {
+    referenceElement: buttonRef,
+    showPopover: isOpen,
+    closeContextMenu: handleOnClose
+  }, void 0, content));
 };
 
 export { PopupMenu };

package/esm/outOfTheBox/PopupMenu/PopupMenuContent.js

@@ -1,37 +1,50 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.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 React, { useContext, useRef, useEffect, useMemo } from 'react';
-import { ItemWrapper, Label, Separator, List } from './styles.js';
+import { getDataProps, getAriaProps } from '@elliemae/ds-props-helpers';
+import { ItemWrapper, Separator, List, Label } from './styles.js';
 import { GlobalHeaderContext } from '../../GlobalHeaderContext.js';
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 
-const PopupMenuContent = /*#__PURE__*/React.memo(({
-  options,
-  onItemClick,
-  onClose
-}) => {
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+const PopupMenuContent = /*#__PURE__*/React.memo(_ref => {
+  let {
+    options,
+    onItemClick,
+    onClose
+  } = _ref;
   const {
     instanceUID
   } = useContext(GlobalHeaderContext);
-  const menuRef = useRef();
+  const menuRef = useRef(null);
   useEffect(() => {
     var _menuRef$current, _menuRef$current$firs;
 
     (_menuRef$current = menuRef.current) === null || _menuRef$current === void 0 ? void 0 : (_menuRef$current$firs = _menuRef$current.firstChild) === null || _menuRef$current$firs === void 0 ? void 0 : _menuRef$current$firs.focus();
   }, []);
   const content = useMemo(() => options.map(option => {
-    var _Content;
-
     const {
       type,
-      icon,
-      label,
+      Icon,
+      label = '',
       onClick,
       Content
     } = option;
 
+    const ariaAndDataProps = _objectSpread(_objectSpread({}, getAriaProps(option)), getDataProps(option));
+
     const handleClick = e => {
       onItemClick(e);
-      onClick(e);
+      if (onClick) onClick(e);
     };
 
     const handleKeyDown = e => {
@@ -40,19 +53,23 @@ const PopupMenuContent = /*#__PURE__*/React.memo(({
 
     switch (type) {
       case 'separator':
-        return /*#__PURE__*/_jsx(Separator, {}, "".concat(instanceUID, "-separator-").concat(label));
+        return /*#__PURE__*/jsx(Separator, _objectSpread({}, ariaAndDataProps), "".concat(instanceUID, "-separator-").concat(label));
 
       case 'custom':
-        return /*#__PURE__*/_jsx(ItemWrapper, {
+        return /*#__PURE__*/jsx(ItemWrapper, _objectSpread(_objectSpread({
           onClick: handleClick,
           onKeyDown: handleKeyDown
-        }, "".concat(instanceUID, "-popup-").concat(label), _Content || (_Content = /*#__PURE__*/_jsx(Content, {})));
+        }, ariaAndDataProps), {}, {
+          children: Content && /*#__PURE__*/_jsx(Content, {})
+        }), "".concat(instanceUID, "-popup-").concat(label));
 
       default:
-        return /*#__PURE__*/_jsx(ItemWrapper, {
+        return /*#__PURE__*/jsxs(ItemWrapper, _objectSpread(_objectSpread({
           onClick: handleClick,
           onKeyDown: handleKeyDown
-        }, "".concat(instanceUID, "-popup-").concat(label), icon, Label && /*#__PURE__*/_jsx(Label, {}, void 0, label));
+        }, ariaAndDataProps), {}, {
+          children: [Icon && /*#__PURE__*/_jsx(Icon, {}), Label && /*#__PURE__*/_jsx(Label, {}, void 0, label)]
+        }), "".concat(instanceUID, "-popup-").concat(label));
     }
   }), [onClose, onItemClick, options, instanceUID]);
   return /*#__PURE__*/jsx(List, {

package/esm/outOfTheBox/PopupMenu/styles.js

@@ -5,9 +5,12 @@ const List = /*#__PURE__*/styled.div.withConfig({
 })(["padding:5px 0px;"]);
 const ItemWrapper = /*#__PURE__*/styled.button.withConfig({
   componentId: "sc-snqcgs-1"
-})(["display:flex;align-items:center;justify-content:center;width:100%;padding:0 20px;cursor:pointer;border:1px solid transparent;background-color:transparent;outline:none;:hover,:focus{border:", ";}"], ({
-  theme
-}) => "1px solid ".concat(theme.colors.brand[600]));
+})(["display:flex;align-items:center;justify-content:center;width:100%;padding:0 20px;cursor:pointer;border:1px solid transparent;background-color:transparent;outline:none;:hover,:focus{border:", ";}"], _ref => {
+  let {
+    theme
+  } = _ref;
+  return "1px solid ".concat(theme.colors.brand[600]);
+});
 const Label = /*#__PURE__*/styled.p.withConfig({
   componentId: "sc-snqcgs-2"
 })(["width:100%;font-size:14px;margin:10px;"]);

package/esm/styles.js

@@ -3,8 +3,11 @@ import { GridContainer } from '@elliemae/ds-grid';
 
 const Wrapper = /*#__PURE__*/styled(GridContainer).withConfig({
   componentId: "sc-1v5zxxm-0"
-})(["background-image:linear-gradient(45deg,#0f364a 0%,#1b6392 54%,#164566 100%);color:", ";width:100%;height:40px;padding:0 24px 0 12px;"], ({
-  theme
-}) => theme.colors.neutral['000']);
+})(["background-image:linear-gradient(45deg,#0f364a 0%,#1b6392 54%,#164566 100%);color:", ";width:100%;height:40px;padding:0 24px 0 12px;"], _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.colors.neutral['000'];
+});
 
 export { Wrapper };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-global-header",
-  "version": "2.0.0-alpha.11",
+  "version": "2.0.0-alpha.12",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Global Header",
   "module": "./esm/index.js",
@@ -120,23 +120,23 @@
     "build": "node ../../scripts/build/build.js"
   },
   "dependencies": {
-    "@elliemae/ds-app-picker": "2.0.0-alpha.11",
-    "@elliemae/ds-classnames": "2.0.0-alpha.11",
-    "@elliemae/ds-grid": "2.0.0-alpha.11",
-    "@elliemae/ds-icons": "2.0.0-alpha.11",
-    "@elliemae/ds-popover": "2.0.0-alpha.11",
-    "@elliemae/ds-utilities": "2.0.0-alpha.11",
+    "@elliemae/ds-app-picker": "2.0.0-alpha.12",
+    "@elliemae/ds-grid": "2.0.0-alpha.12",
+    "@elliemae/ds-icons": "2.0.0-alpha.12",
+    "@elliemae/ds-popperjs": "2.0.0-alpha.12",
+    "@elliemae/ds-props-helpers": "2.0.0-alpha.12",
+    "@elliemae/ds-utilities": "2.0.0-alpha.12",
     "react-desc": "~4.1.3",
     "uid": "~2.0.0"
   },
   "devDependencies": {
-    "styled-components": "~5.3.1"
+    "styled-components": "~5.3.3"
   },
   "peerDependencies": {
     "lodash": "^4.17.21",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "styled-components": "^5.3.1"
+    "styled-components": "^5.3.3"
   },
   "publishConfig": {
     "access": "public",

package/types/GlobalHeader.d.ts

@@ -1,14 +1,39 @@
+/// <reference path="../../../../shared/typings/react-desc.d.ts" />
 /// <reference types="react" />
 import type { GlobalHeaderPropsT as Props } from './index.d';
 declare const GlobalHeader: {
     (props: Props): JSX.Element;
     defaultProps: Props;
     propTypes: {
-        Logo: any;
-        LogoWithBrand: any;
-        breadcrumb: any;
-        toolbar: any;
+        Logo: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
+        LogoWithBrand: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
+        breadcrumb: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
+        toolbar: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
     };
 };
-declare const GlobalHeaderWithSchema: any;
+declare const GlobalHeaderWithSchema: {
+    (props?: Props | undefined): JSX.Element;
+    propTypes: unknown;
+    toTypescript: () => import("react-desc").TypescriptSchema;
+};
 export { GlobalHeader, GlobalHeaderWithSchema };

package/types/components/Breadcrumb/styles.d.ts

@@ -1,5 +1,5 @@
 import type { LabelT, PipeT } from '../../index.d';
-export declare const Pipe: import("styled-components").StyledComponent<"span", any, PipeT, never>;
-export declare const BreadcrumbItem: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const LabelButton: import("styled-components").StyledComponent<"button", any, {}, never>;
-export declare const Label: import("styled-components").StyledComponent<"p", any, LabelT, never>;
+export declare const Pipe: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, PipeT, never>;
+export declare const BreadcrumbItem: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const LabelButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
+export declare const Label: import("styled-components").StyledComponent<"p", import("styled-components").DefaultTheme, LabelT, never>;

package/types/components/Toolbar/styles.d.ts

@@ -1 +1 @@
-export declare const Button: import("styled-components").StyledComponent<"button", any, {}, never>;
+export declare const Button: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;

package/types/config/validateHelpers.d.ts

@@ -20,8 +20,8 @@ export declare const toolbarProps: {
 export declare const isObject: (obj: unknown) => boolean;
 export declare const getVariableType: (arg: unknown) => string;
 export declare const isValidToolbarType: (string: unknown) => boolean;
-export declare const throwBreadcrumbItemError: (validPropKey: string, invalidProp: unknown) => void;
-export declare const throwToolbarPopupItemError: (validPropKey: string, invalidProp: unknown) => void;
-export declare const throwToolbarAppPickerItemError: (validPropKey: string, invalidProp: unknown) => void;
-export declare const throwToolbarItemGenericError: (validPropKey: string, invalidProp: unknown) => void;
+export declare const throwBreadcrumbItemError: (validPropKey: keyof typeof breadcrumbProps, invalidProp: unknown) => void;
+export declare const throwToolbarPopupItemError: (validPropKey: keyof typeof toolbarProps, invalidProp: unknown) => void;
+export declare const throwToolbarAppPickerItemError: (validPropKey: keyof typeof toolbarProps, invalidProp: unknown) => void;
+export declare const throwToolbarItemGenericError: (validPropKey: keyof typeof toolbarProps, invalidProp: unknown) => void;
 export declare const throwLogoError: (validPropKey: string, invalidProp: unknown) => void;

package/types/index.d.d.ts

@@ -1,4 +1,6 @@
 import React from 'react';
+import { DSAppPicker } from '@elliemae/ds-app-picker';
+export declare type AppPickerProps = React.ComponentProps<typeof DSAppPicker>;
 export interface ContextT {
     showIconOnly: boolean;
     setShowIconOnly: React.Dispatch<React.SetStateAction<boolean>>;
@@ -11,11 +13,11 @@ export interface GlobalHeaderContainerT {
     children: React.ReactNode;
 }
 export interface GlobalHeaderPropsT {
-    Logo?: () => JSX.Element;
-    LogoWithBrand?: () => JSX.Element;
+    Logo?: React.ComponentType;
+    LogoWithBrand?: React.ComponentType;
     breadcrumb?: BreadcrumbItemT[];
     toolbar?: ToolbarItemT[];
-    appPickerProps?: AppPickerPropsT;
+    appPickerProps?: AppPickerProps;
 }
 export interface BreadcrumbItemT {
     label: string;
@@ -29,15 +31,7 @@ export interface ToolbarItemT {
     label: string;
     Icon: React.ComponentType<Record<string, unknown>>;
     onClick: (event: React.MouseEvent<HTMLElement>) => void;
-    componentProps?: PopupPropsT | AppPickerPropsT;
-}
-export interface AppPickerPropsT {
-    label?: string;
-    apps: AppPickerMenuItemT[];
-    customApps?: AppPickerMenuItemT[];
-    sectionTitle?: string;
-    customSectionTitle?: string;
-    onClick: (event: React.MouseEvent<HTMLElement>) => void;
+    componentProps?: PopupPropsT | AppPickerProps;
 }
 export interface PopupPropsT {
     Icon?: React.ComponentType<Record<string, unknown>>;
@@ -48,17 +42,17 @@ export interface PopupPropsT {
 }
 export interface AppPickerMenuItemT {
     label: string;
-    icon: () => JSX.Element;
+    icon: React.ComponentType;
     onClick: (event: React.MouseEvent<HTMLElement>) => void;
     disabled?: boolean;
 }
-export interface PopupMenuItemT {
+export interface PopupMenuItemT extends Record<string, unknown> {
     type?: string;
-    icon?: () => JSX.Element;
+    Icon?: React.ComponentType;
     label?: string;
     onClick?: (event: React.MouseEvent<HTMLElement>) => void;
     closeOnClick?: boolean;
-    Content?: () => JSX.Element;
+    Content?: React.ComponentType;
 }
 export interface PopupMenuContentPropsT {
     options: PopupMenuItemT[];

package/types/outOfTheBox/AppPicker/AppPicker.d.ts

@@ -1,3 +1,8 @@
-/// <reference types="react" />
-import type { AppPickerPropsT as Props } from '../../index.d';
-export declare const AppPicker: ({ label, apps, customApps, sectionTitle, customSectionTitle, onClick, actionRef, onKeyDown: customHandleOnKeyDown, }: Props) => JSX.Element;
+import React from 'react';
+import { DSAppPicker } from '@elliemae/ds-app-picker';
+declare type AppPickerProps = React.ComponentProps<typeof DSAppPicker>;
+export declare const AppPicker: ({ label, apps, icon, customApps, sectionTitle, customSectionTitle, actionRef, isOpen: userIsOpen, onKeyDown: userOnKeyDown, onClickOutside: userOnClickOutside, renderTrigger: userRenderTrigger, onClose, triggerRef, triggerOnClick, }: AppPickerProps & {
+    label: string;
+    triggerOnClick?: React.MouseEventHandler<Element> | undefined;
+}) => JSX.Element;
+export {};

package/types/outOfTheBox/PopupMenu/styles.d.ts

@@ -1,4 +1,4 @@
-export declare const List: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ItemWrapper: import("styled-components").StyledComponent<"button", any, {}, never>;
-export declare const Label: import("styled-components").StyledComponent<"p", any, {}, never>;
-export declare const Separator: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const List: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const ItemWrapper: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
+export declare const Label: import("styled-components").StyledComponent<"p", import("styled-components").DefaultTheme, {}, never>;
+export declare const Separator: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

package/types/propTypes.d.ts

@@ -1,8 +1,29 @@
-export declare const breadcrumbItem: any;
-export declare const toolbarItem: any;
+/// <reference path="../../../../shared/typings/react-desc.d.ts" />
+export declare const breadcrumbItem: import("react-desc").PropTypesDescValue;
+export declare const toolbarItem: import("react-desc").PropTypesDescValue;
 export declare const globalHeaderProps: {
-    Logo: any;
-    LogoWithBrand: any;
-    breadcrumb: any;
-    toolbar: any;
+    Logo: {
+        defaultValue<T = unknown>(arg: T): {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        isRequired: import("react-desc").PropTypesDescValidator;
+    };
+    LogoWithBrand: {
+        defaultValue<T = unknown>(arg: T): {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        isRequired: import("react-desc").PropTypesDescValidator;
+    };
+    breadcrumb: {
+        defaultValue<T = unknown>(arg: T): {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        isRequired: import("react-desc").PropTypesDescValidator;
+    };
+    toolbar: {
+        defaultValue<T = unknown>(arg: T): {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        isRequired: import("react-desc").PropTypesDescValidator;
+    };
 };

package/types/styles.d.ts

@@ -1,2 +1,2 @@
 /// <reference types="react" />
-export declare const Wrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").RefAttributes<unknown>>, any, {}, never>;
+export declare const Wrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;