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

package/esm/index.js

@@ -1,34 +1 @@
 export { GlobalHeader, GlobalHeaderWithSchema, GlobalHeader as default } from './GlobalHeader.js';
-import 'react';
-import 'react-desc';
-import './propTypes.js';
-import './components/Title/GlobalHeaderTitle.js';
-import '@elliemae/ds-grid';
-import './GlobalHeaderContext.js';
-import './defaultProps.js';
-import './components/Breadcrumb/GlobalHeaderBreadcrumb.js';
-import './components/Breadcrumb/styles.js';
-import 'styled-components';
-import './components/Breadcrumb/PureBreadcrumb.js';
-import '@elliemae/ds-icons';
-import './components/Toolbar/GlobalHeaderToolbar.js';
-import './components/Toolbar/ToolbarItems.js';
-import './outOfTheBox/AppPicker/AppPicker.js';
-import '@babel/runtime/helpers/esm/slicedToArray';
-import '@elliemae/ds-app-picker';
-import './components/Toolbar/styles.js';
-import './outOfTheBox/PopupMenu/PopupMenu.js';
-import '@elliemae/ds-popover';
-import './outOfTheBox/PopupMenu/PopupMenuContent.js';
-import './outOfTheBox/PopupMenu/styles.js';
-import './config/useGlobalHeader.js';
-import '@babel/runtime/helpers/esm/toConsumableArray';
-import 'uid';
-import './config/useGetPropsWithDefaults.js';
-import '@babel/runtime/helpers/esm/defineProperty';
-import './GlobalHeaderContainer.js';
-import './styles.js';
-import './config/useValidateProps.js';
-import './config/validateHelpers.js';
-import '@babel/runtime/helpers/esm/typeof';
-//# sourceMappingURL=index.js.map

package/esm/outOfTheBox/AppPicker/AppPicker.js

@@ -1,83 +1,85 @@
-import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
-import React, { useState, useRef, useCallback, useMemo } from 'react';
+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 { 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 'styled-components';
+import { jsx } from 'react/jsx-runtime';
 
-var AppPicker = function AppPicker(_ref) {
-  var label = _ref.label,
-      apps = _ref.apps,
-      customApps = _ref.customApps,
-      sectionTitle = _ref.sectionTitle,
-      customSectionTitle = _ref.customSectionTitle,
-      _ref$onClick = _ref.onClick,
-      onClick = _ref$onClick === void 0 ? function () {
-    return null;
-  } : _ref$onClick,
-      actionRef = _ref.actionRef,
-      _ref$onKeyDown = _ref.onKeyDown,
-      customHandleOnKeyDown = _ref$onKeyDown === void 0 ? function () {
-    return null;
-  } : _ref$onKeyDown;
-
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isOpen = _useState2[0],
-      setIsOpen = _useState2[1];
-
-  var buttonRef = useRef();
-  var handleTriggerKeyDown = useCallback(function (e) {
+var _MenuPicker;
+const AppPicker = _ref => {
+  let {
+    label,
+    apps,
+    icon,
+    customApps,
+    sectionTitle,
+    customSectionTitle,
+    actionRef,
+    isOpen: userIsOpen,
+    onKeyDown: userOnKeyDown,
+    onClickOutside: userOnClickOutside,
+    renderTrigger: userRenderTrigger,
+    onClose,
+    triggerRef,
+    triggerOnClick
+  } = _ref;
+  const [isOpen, setIsOpen] = useState(false);
+  const buttonRef = useRef(null);
+  const handleTriggerKeyDown = useCallback(e => {
     if (e.code === 'Enter' || e.code === 'Space') {
       setIsOpen(true);
     }
   }, []);
-  var handleAppPickerOnKeyDown = useCallback(function (e) {
-    customHandleOnKeyDown(e);
-
+  const handleAppPickerOnKeyDown = useCallback(e => {
     if (e.code === 'Escape') {
+      var _buttonRef$current;
+
       setIsOpen(false);
+      buttonRef === null || buttonRef === void 0 ? void 0 : (_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 ? void 0 : _buttonRef$current.focus();
     }
-  }, [customHandleOnKeyDown]);
-  var handleOnClickOutside = useCallback(function () {
+  }, []);
+  const handleOnClickOutside = useCallback(() => {
     setIsOpen(false);
   }, []);
-  var handleOnClick = useCallback(function (e) {
+  const handleOnClick = useCallback(() => {
     setIsOpen(true);
-    onClick(e);
-  }, [onClick]);
-  var trigger = useMemo(function () {
-    return function (_ref2) {
-      var ref = _ref2.ref;
-      return /*#__PURE__*/React.createElement("div", {
-        ref: ref
-      }, /*#__PURE__*/React.createElement(Button, {
-        onClick: handleOnClick,
+  }, []);
+  const renderTrigger = useMemo(() => _ref2 => {
+    let {
+      ref
+    } = _ref2;
+    return /*#__PURE__*/jsx("div", {
+      ref: ref,
+      children: /*#__PURE__*/jsx(Button, {
+        onClick: triggerOnClick !== null && triggerOnClick !== void 0 ? triggerOnClick : handleOnClick,
         onKeyDown: handleTriggerKeyDown,
-        ref: buttonRef,
+        ref: mergeRefs(buttonRef, triggerRef),
         title: label,
-        "data-testid": "gh-toolbar-item"
-      }, /*#__PURE__*/React.createElement(MenuPicker, {
-        fill: "#FFF",
-        size: "m"
-      })));
-    };
-  }, [handleOnClick, handleTriggerKeyDown, label]);
-  return useMemo(function () {
-    return /*#__PURE__*/React.createElement(DSAppPicker, {
-      isOpen: isOpen,
-      apps: apps,
-      customApps: customApps,
-      sectionTitle: sectionTitle,
-      customSectionTitle: customSectionTitle,
-      onClickOutside: handleOnClickOutside,
-      renderTrigger: trigger,
-      triggerRef: buttonRef,
-      actionRef: actionRef,
-      onKeyDown: handleAppPickerOnKeyDown
+        "data-testid": "gh-toolbar-item",
+        children: _MenuPicker || (_MenuPicker = /*#__PURE__*/_jsx(MenuPicker, {
+          fill: "#FFF",
+          width: 20.73,
+          height: 20.73
+        }))
+      })
     });
-  }, [actionRef, apps, customApps, customSectionTitle, handleAppPickerOnKeyDown, handleOnClickOutside, isOpen, sectionTitle, trigger]);
+  }, [triggerOnClick, handleOnClick, handleTriggerKeyDown, label]);
+  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

package/esm/outOfTheBox/PopupMenu/PopupMenu.js

@@ -1,86 +1,59 @@
-import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
-import React, { useState, useRef, useCallback, useMemo } from 'react';
-import Popover from '@elliemae/ds-popover';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/web.dom-collections.iterator.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 './styles.js';
-import 'styled-components';
-import '../../GlobalHeaderContext.js';
-import '../../defaultProps.js';
+import { jsx } from 'react/jsx-runtime';
 
-var PopupMenu = function PopupMenu(_ref) {
-  var Icon = _ref.Icon,
-      options = _ref.options,
-      closeOnClick = _ref.closeOnClick,
-      title = _ref.title,
-      onClick = _ref.onClick;
+const PopupMenu = _ref => {
+  var _PopupMenuContent;
 
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isOpen = _useState2[0],
-      setIsOpen = _useState2[1];
-
-  var buttonRef = useRef();
-  var handleKeyPress = useCallback(function (e) {
+  let {
+    Icon,
+    options,
+    closeOnClick,
+    title,
+    onClick
+  } = _ref;
+  const [isOpen, setIsOpen] = useState(false);
+  const [buttonRef, setButtonRef] = useState(null);
+  const handleKeyPress = useCallback(e => {
     if (e.code === 'Enter' || e.code === 'Space') {
       setIsOpen(true);
     }
   }, []);
-  var handleOnClose = useCallback(function () {
-    var _buttonRef$current;
-
+  const handleOnClose = useCallback(() => {
     setIsOpen(false);
-    (_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 ? void 0 : _buttonRef$current.focus();
-  }, []);
-  var handleTriggerOnClick = useCallback(function (e) {
+    buttonRef === null || buttonRef === void 0 ? void 0 : buttonRef.focus();
+  }, [buttonRef]);
+  const handleTriggerOnClick = useCallback(e => {
     setIsOpen(true);
     onClick(e);
   }, [onClick]);
-  var handleItemClick = useCallback(function () {
+  const handleItemClick = useCallback(() => {
     if (closeOnClick) handleOnClose();
   }, [closeOnClick, handleOnClose]);
-  var handleClickOutside = useCallback(function () {
-    return setIsOpen(false);
-  }, []);
-  var content = useMemo(function () {
-    return /*#__PURE__*/React.createElement(PopupMenuContent, {
-      options: options,
-      onItemClick: handleItemClick,
-      onClose: handleOnClose
-    });
-  }, [options, handleItemClick, handleOnClose]);
-  var trigger = useMemo(function () {
-    return function (_ref2) {
-      var ref = _ref2.ref;
-      return /*#__PURE__*/React.createElement(Button, {
-        onClick: handleTriggerOnClick,
-        onKeyPress: handleKeyPress,
-        title: title,
-        ref: buttonRef,
-        "data-testid": "gh-toolbar-item"
-      }, /*#__PURE__*/React.createElement(Icon, {
-        innerRef: ref,
-        fill: "#FFF",
-        size: "m"
-      }));
-    };
-  }, [Icon, handleKeyPress, handleTriggerOnClick, title]);
-  return useMemo(function () {
-    return /*#__PURE__*/React.createElement(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]);
+  const content = useMemo(() => _PopupMenuContent || (_PopupMenuContent = /*#__PURE__*/_jsx(PopupMenuContent, {
+    options: options,
+    onItemClick: handleItemClick,
+    onClose: handleOnClose
+  })), [options, handleItemClick, handleOnClose]);
+  return /*#__PURE__*/_jsx("div", {}, void 0, /*#__PURE__*/jsx(Button, {
+    onClick: handleTriggerOnClick,
+    onKeyPress: handleKeyPress,
+    title: title,
+    ref: setButtonRef,
+    "data-testid": "gh-toolbar-item",
+    children: Icon && /*#__PURE__*/_jsx(Icon, {
+      fill: "#FFF",
+      size: "m"
+    })
+  }), /*#__PURE__*/_jsx(DSPopperJS, {
+    referenceElement: buttonRef,
+    showPopover: isOpen,
+    closeContextMenu: handleOnClose
+  }, void 0, content));
 };
 
 export { PopupMenu };
-//# sourceMappingURL=PopupMenu.js.map

package/esm/outOfTheBox/PopupMenu/PopupMenuContent.js

@@ -1,66 +1,81 @@
+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 'styled-components';
-import '../../defaultProps.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
 
-var PopupMenuContent = /*#__PURE__*/React.memo(function (_ref) {
-  var options = _ref.options,
-      onItemClick = _ref.onItemClick,
-      onClose = _ref.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; }
 
-  var _useContext = useContext(GlobalHeaderContext),
-      instanceUID = _useContext.instanceUID;
-
-  var menuRef = useRef();
-  useEffect(function () {
+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(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();
   }, []);
-  var content = useMemo(function () {
-    return options.map(function (option) {
-      var type = option.type,
-          icon = option.icon,
-          label = option.label,
-          onClick = option.onClick,
-          Content = option.Content;
+  const content = useMemo(() => options.map(option => {
+    const {
+      type,
+      Icon,
+      label = '',
+      onClick,
+      Content
+    } = option;
+
+    const ariaAndDataProps = _objectSpread(_objectSpread({}, getAriaProps(option)), getDataProps(option));
 
-      var handleClick = function handleClick(e) {
-        onItemClick(e);
-        onClick(e);
-      };
+    const handleClick = e => {
+      onItemClick(e);
+      if (onClick) onClick(e);
+    };
 
-      var handleKeyDown = function handleKeyDown(e) {
-        if (e.code === 'Escape') onClose();
-      };
+    const handleKeyDown = e => {
+      if (e.code === 'Escape') onClose();
+    };
 
-      switch (type) {
-        case 'separator':
-          return /*#__PURE__*/React.createElement(Separator, {
-            key: "".concat(instanceUID, "-separator-").concat(label)
-          });
+    switch (type) {
+      case 'separator':
+        return /*#__PURE__*/jsx(Separator, _objectSpread({}, ariaAndDataProps), "".concat(instanceUID, "-separator-").concat(label));
 
-        case 'custom':
-          return /*#__PURE__*/React.createElement(ItemWrapper, {
-            onClick: handleClick,
-            onKeyDown: handleKeyDown,
-            key: "".concat(instanceUID, "-popup-").concat(label)
-          }, /*#__PURE__*/React.createElement(Content, null));
+      case 'custom':
+        return /*#__PURE__*/jsx(ItemWrapper, _objectSpread(_objectSpread({
+          onClick: handleClick,
+          onKeyDown: handleKeyDown
+        }, ariaAndDataProps), {}, {
+          children: Content && /*#__PURE__*/_jsx(Content, {})
+        }), "".concat(instanceUID, "-popup-").concat(label));
 
-        default:
-          return /*#__PURE__*/React.createElement(ItemWrapper, {
-            onClick: handleClick,
-            onKeyDown: handleKeyDown,
-            key: "".concat(instanceUID, "-popup-").concat(label)
-          }, icon, Label && /*#__PURE__*/React.createElement(Label, null, label));
-      }
-    });
-  }, [onClose, onItemClick, options, instanceUID]);
-  return /*#__PURE__*/React.createElement(List, {
-    ref: menuRef
-  }, content);
+      default:
+        return /*#__PURE__*/jsxs(ItemWrapper, _objectSpread(_objectSpread({
+          onClick: handleClick,
+          onKeyDown: handleKeyDown
+        }, 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, {
+    ref: menuRef,
+    children: content
+  });
 });
 
 export { PopupMenuContent };
-//# sourceMappingURL=PopupMenuContent.js.map

package/esm/outOfTheBox/PopupMenu/styles.js

@@ -1,20 +1,21 @@
 import styled from 'styled-components';
 
-var List = /*#__PURE__*/styled.div.withConfig({
+const List = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-snqcgs-0"
 })(["padding:5px 0px;"]);
-var ItemWrapper = /*#__PURE__*/styled.button.withConfig({
+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:", ";}"], function (_ref) {
-  var theme = _ref.theme;
+})(["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]);
 });
-var Label = /*#__PURE__*/styled.p.withConfig({
+const Label = /*#__PURE__*/styled.p.withConfig({
   componentId: "sc-snqcgs-2"
 })(["width:100%;font-size:14px;margin:10px;"]);
-var Separator = /*#__PURE__*/styled.div.withConfig({
+const Separator = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-snqcgs-3"
 })(["width:100%;border:none;border-bottom:1px solid #ccc;"]);
 
 export { ItemWrapper, Label, List, Separator };
-//# sourceMappingURL=styles.js.map

package/esm/outOfTheBox/index.js

@@ -1,14 +1,2 @@
 export { AppPicker } from './AppPicker/AppPicker.js';
 export { PopupMenu } from './PopupMenu/PopupMenu.js';
-import '@babel/runtime/helpers/esm/slicedToArray';
-import 'react';
-import '@elliemae/ds-app-picker';
-import '@elliemae/ds-icons';
-import '../components/Toolbar/styles.js';
-import 'styled-components';
-import '@elliemae/ds-popover';
-import './PopupMenu/PopupMenuContent.js';
-import './PopupMenu/styles.js';
-import '../GlobalHeaderContext.js';
-import '../defaultProps.js';
-//# sourceMappingURL=index.js.map

package/esm/propTypes.js

@@ -1,19 +1,19 @@
 import { PropTypes } from 'react-desc';
 
-var breadcrumbItem = PropTypes.shape({
+const breadcrumbItem = PropTypes.shape({
   label: PropTypes.string.description('breadrcrumb item label'),
   hasNext: PropTypes.bool.description('whether the item has a child or not'),
   isSelected: PropTypes.bool.description('whether the item is selected or not'),
   onClick: PropTypes.func.description('Callback executed on click')
 });
-var toolbarItem = PropTypes.shape({
+const toolbarItem = PropTypes.shape({
   label: PropTypes.string.description('title tag description'),
   type: PropTypes.oneOf(['ds-app-picker', 'ds-popup-menu']).description('use to select one of the out-of-the-box types of items'),
   componentProps: PropTypes.object.description('props of out-of-the-box component'),
   Icon: PropTypes.func.description('Icon to display'),
   onClick: PropTypes.func.description('Callback executed on click')
 });
-var globalHeaderProps = {
+const globalHeaderProps = {
   Logo: PropTypes.func.description('Global Header Logo to render. Logo and LogoWithBrand are going to swap during window resizing.'),
   LogoWithBrand: PropTypes.func.description('Global Header Logo With Brand title to render. Logo and LogoWithBrand are going to swap during window resizing.'),
   breadcrumb: PropTypes.arrayOf(breadcrumbItem).description('Breadcrumb items to display. max 3 levels'),
@@ -21,4 +21,3 @@ var globalHeaderProps = {
 };
 
 export { breadcrumbItem, globalHeaderProps, toolbarItem };
-//# sourceMappingURL=propTypes.js.map

package/esm/styles.js

@@ -1,12 +1,13 @@
 import styled from 'styled-components';
 import { GridContainer } from '@elliemae/ds-grid';
 
-var Wrapper = /*#__PURE__*/styled(GridContainer).withConfig({
+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;"], function (_ref) {
-  var theme = _ref.theme;
+})(["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 };
-//# sourceMappingURL=styles.js.map