@elliemae/ds-global-header 2.3.0-alpha.8 → 2.3.0-next.2

package/esm/outOfTheBox/AppPicker/AppPicker.js

@@ -0,0 +1,107 @@
+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 {
+    apps,
+    icon,
+    customApps,
+    sectionTitle,
+    customSectionTitle,
+    actionRef,
+    isOpen: userIsOpen,
+    onKeyDown: userOnKeyDown,
+    onClickOutside: userOnClickOutside,
+    renderTrigger: userRenderTrigger,
+    onClose,
+    triggerRef,
+    triggerOnClick
+  } = componentProps;
+  const handleTriggerKeyDown = useCallback(e => {
+    if (e.code === 'Enter' || e.code === 'Space') {
+      setIsOpen(true);
+    }
+  }, []);
+  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();
+    }
+  }, []);
+  const handleOnClickOutside = useCallback(() => {
+    setIsOpen(false);
+  }, []);
+  const handleOnClick = useCallback(() => {
+    setIsOpen(true);
+  }, []);
+  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 };

package/esm/outOfTheBox/PopupMenu/PopupMenu.js

@@ -0,0 +1,91 @@
+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 {
+    onClickOutside = () => null,
+    onKeyPress,
+    popupOnKeyPress,
+    isOpen: userIsOpen,
+    options,
+    closeOnClick
+  } = componentProps;
+  const handleKeyPress = useCallback(e => {
+    if (e.code === 'Enter' || e.code === 'Space') {
+      setIsOpen(true);
+    }
+
+    if (onKeyPress) onKeyPress(e);
+  }, [onKeyPress]);
+  const handleOnClose = useCallback(() => {
+    if (userIsOpen === undefined) {
+      setIsOpen(false);
+    }
+
+    buttonRef === null || buttonRef === void 0 ? void 0 : buttonRef.focus();
+  }, [buttonRef, userIsOpen]);
+  const handleTriggerOnClick = useCallback(e => {
+    if (userIsOpen === undefined) setIsOpen(true);
+    onClick(e);
+  }, [onClick, userIsOpen]);
+  const handleItemClick = useCallback(() => {
+    if (closeOnClick && userIsOpen === undefined) handleOnClose();
+  }, [closeOnClick, handleOnClose, userIsOpen]);
+  const content = useMemo(() => _PopupMenuContent || (_PopupMenuContent = /*#__PURE__*/_jsx(PopupMenuContent, {
+    options: options,
+    onItemClick: handleItemClick,
+    onClose: handleOnClose,
+    popupOnKeyPress: popupOnKeyPress
+  })), [options, handleItemClick, handleOnClose, popupOnKeyPress]);
+  return /*#__PURE__*/_jsx("div", {}, void 0, /*#__PURE__*/jsx(Button, _objectSpread(_objectSpread({
+    onClick: handleTriggerOnClick,
+    onKeyPress: handleKeyPress,
+    title: title,
+    ref: setButtonRef,
+    "data-testid": "gh-toolbar-item",
+    id: id
+  }, getDataProps(otherProps)), {}, {
+    children: Icon && /*#__PURE__*/_jsx(Icon, {
+      fill: "#FFF",
+      size: "m"
+    })
+  })), /*#__PURE__*/_jsx(DSPopperJS, {
+    referenceElement: buttonRef,
+    showPopover: userIsOpen !== null && userIsOpen !== void 0 ? userIsOpen : isOpen,
+    closeContextMenu: handleOnClose,
+    onClickOutside: onClickOutside
+  }, void 0, content));
+};
+
+export { PopupMenu };

package/esm/outOfTheBox/PopupMenu/PopupMenuContent.js

@@ -0,0 +1,86 @@
+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 { getDataProps, getAriaProps } from '@elliemae/ds-props-helpers';
+import { ItemWrapper, Separator, List, Label } from './styles.js';
+import { GlobalHeaderContext } from '../../GlobalHeaderContext.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+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 PopupMenuContent = /*#__PURE__*/React.memo(_ref => {
+  let {
+    options,
+    onItemClick,
+    onClose,
+    popupOnKeyPress
+  } = _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();
+  }, []);
+  const content = useMemo(() => options.map(option => {
+    const {
+      type,
+      Icon,
+      label = '',
+      onClick,
+      Content,
+      id
+    } = option;
+
+    const ariaAndDataProps = _objectSpread(_objectSpread({}, getAriaProps(option)), getDataProps(option));
+
+    const handleClick = e => {
+      onItemClick(e);
+      if (onClick) onClick(e);
+    };
+
+    const handleKeyDown = e => {
+      if (e.code === 'Escape') onClose();
+      if (popupOnKeyPress) popupOnKeyPress(e);
+    };
+
+    switch (type) {
+      case 'separator':
+        return /*#__PURE__*/jsx(Separator, _objectSpread({}, ariaAndDataProps), "".concat(instanceUID, "-separator-").concat(label));
+
+      case 'custom':
+        return /*#__PURE__*/jsx(ItemWrapper, _objectSpread(_objectSpread({
+          onClick: handleClick,
+          onKeyDown: handleKeyDown,
+          id: id
+        }, ariaAndDataProps), {}, {
+          children: Content && /*#__PURE__*/_jsx(Content, {})
+        }), "".concat(instanceUID, "-popup-").concat(label));
+
+      default:
+        return /*#__PURE__*/jsxs(ItemWrapper, _objectSpread(_objectSpread({
+          onClick: handleClick,
+          onKeyDown: handleKeyDown,
+          id: id
+        }, ariaAndDataProps), {}, {
+          children: [Icon && /*#__PURE__*/_jsx(Icon, {}), Label && /*#__PURE__*/_jsx(Label, {}, void 0, label)]
+        }), "".concat(instanceUID, "-popup-").concat(label));
+    }
+  }), [options, onItemClick, onClose, popupOnKeyPress, instanceUID]);
+  return /*#__PURE__*/jsx(List, {
+    ref: menuRef,
+    children: content
+  });
+});
+
+export { PopupMenuContent };

package/esm/outOfTheBox/PopupMenu/styles.js

@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+
+const List = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-snqcgs-0"
+})(["padding:5px 0px;background:white;"]);
+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:", ";}"], _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;"]);
+const Separator = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-snqcgs-3"
+})(["width:100%;border:none;border-bottom:1px solid #ccc;"]);
+
+export { ItemWrapper, Label, List, Separator };

package/esm/outOfTheBox/SearchToggle/SearchToggle.js

@@ -0,0 +1,103 @@
+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 } from 'react';
+import { Search } from '@elliemae/ds-icons';
+import { getDataProps } from '@elliemae/ds-props-helpers';
+import { DSIconColors } from '@elliemae/ds-icon';
+import { DSNavSearchBox } from '@elliemae/ds-form';
+import { StyledNavSearchBoxContainer } from './styles.js';
+import { Button } from '../../components/Toolbar/styles.js';
+import { jsx } from 'react/jsx-runtime';
+
+const _excluded = ["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 SearchToggle = _ref => {
+  let {
+    id,
+    componentProps
+  } = _ref,
+      otherProps = _objectWithoutProperties(_ref, _excluded);
+
+  const [isOpen, setIsOpen] = useState(false);
+  const inputRef = useRef(null);
+  const triggerRef = useRef(null);
+  const containerRef = useRef(null);
+  const {
+    onNext,
+    onPrevious,
+    currentResultIndex,
+    totalResults,
+    placeholder,
+    value,
+    onChange,
+    onBlur,
+    onClear,
+    isOpen: userIsOpen,
+    onKeyDown,
+    onClick
+  } = componentProps;
+  const handleOnClick = useCallback(e => {
+    if (userIsOpen === undefined) setIsOpen(true);
+    if (onClick) onClick(e);
+  }, [onClick, userIsOpen]);
+  const handleOnKeyDown = useCallback(e => {
+    if (userIsOpen === undefined) {
+      if (e.code === 'Escape') {
+        setIsOpen(false);
+        setTimeout(() => {
+          var _triggerRef$current;
+
+          return (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : _triggerRef$current.focus();
+        });
+      }
+    }
+
+    if (onKeyDown) onKeyDown(e);
+  }, [onKeyDown, userIsOpen]);
+  const handleOnBlur = useCallback(() => {
+    setTimeout(() => {
+      var _containerRef$current;
+
+      const contains = (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.contains(document.activeElement);
+      if (value === '' && !contains) setIsOpen(false);
+    });
+  }, [value]);
+  return userIsOpen || isOpen ? /*#__PURE__*/jsx(StyledNavSearchBoxContainer, {
+    onKeyDown: handleOnKeyDown,
+    ref: containerRef,
+    onBlur: handleOnBlur,
+    children: /*#__PURE__*/_jsx(DSNavSearchBox, {
+      onNext: onNext,
+      onPrevious: onPrevious,
+      currentResultIndex: currentResultIndex,
+      totalResults: totalResults,
+      onClear: onClear,
+      placeholder: placeholder,
+      onChange: onChange,
+      value: value,
+      onBlur: onBlur,
+      innerRef: inputRef,
+      autoFocus: true
+    })
+  }) : /*#__PURE__*/jsx(Button, _objectSpread(_objectSpread({
+    onClick: handleOnClick,
+    ref: triggerRef,
+    id: id
+  }, getDataProps(otherProps)), {}, {
+    children: /*#__PURE__*/_jsx(Search, {
+      color: DSIconColors.WHITE
+    })
+  }));
+};
+
+export { SearchToggle };

package/esm/outOfTheBox/SearchToggle/styles.js

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+
+const StyledNavSearchBoxContainer = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-1dlcqwh-0"
+})(["background:white;position:relative;min-width:260px;& .em-ds-button{margin-right:2px;height:24px;width:24px;}& .em-ds-input{border:none;outline:none;box-shadow:none;}& .em-ds-input:focus{border:none;box-shadow:none;}& .em-ds-input.em-ds-input--clearable:hover{border:none;outline:none;box-shadow:none;}& .em-ds-input-addon-wrapper{box-shadow:none;}& .em-ds-input-addon-wrapper:hover{outline:none;}& .em-ds-input-addon-wrapper__addon:hover{outline:none;}& .em-ds-input:not(.floating-label-input-controller):hover:active{border:none;outline:none;box-shadow:none;}"]);
+
+export { StyledNavSearchBoxContainer };

package/esm/outOfTheBox/index.js

@@ -0,0 +1,3 @@
+export { AppPicker } from './AppPicker/AppPicker.js';
+export { PopupMenu } from './PopupMenu/PopupMenu.js';
+export { SearchToggle } from './SearchToggle/SearchToggle.js';

package/esm/propTypes.js

@@ -0,0 +1,23 @@
+import { PropTypes } from 'react-desc';
+
+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')
+});
+const toolbarItem = PropTypes.shape({
+  label: PropTypes.string.description('title tag description'),
+  type: PropTypes.oneOf(['ds-app-picker', 'ds-popup-menu', 'ds-search-toggle', 'custom']).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')
+});
+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'),
+  toolbar: PropTypes.arrayOf(toolbarItem).description('Toolbar items')
+};
+
+export { breadcrumbItem, globalHeaderProps, toolbarItem };

package/esm/styles.js

@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+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;"], _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.colors.neutral['000'];
+});
+
+export { Wrapper };