@elliemae/ds-global-header 2.0.0-rc.13 → 2.0.0-rc.17

package/esm/outOfTheBox/PopupMenu/PopupMenu.js

@@ -1,58 +1,90 @@
+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); 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 PopupMenu = _ref => {
   var _PopupMenuContent;
 
   let {
     Icon,
-    options,
-    closeOnClick,
     title,
-    onClick
-  } = _ref;
+    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(() => {
-    setIsOpen(false);
+    if (userIsOpen === undefined) {
+      setIsOpen(false);
+    }
+
     buttonRef === null || buttonRef === void 0 ? void 0 : buttonRef.focus();
-  }, [buttonRef]);
+  }, [buttonRef, userIsOpen]);
   const handleTriggerOnClick = useCallback(e => {
-    setIsOpen(true);
+    if (userIsOpen === undefined) setIsOpen(true);
     onClick(e);
-  }, [onClick]);
+  }, [onClick, userIsOpen]);
   const handleItemClick = useCallback(() => {
-    if (closeOnClick) handleOnClose();
-  }, [closeOnClick, handleOnClose]);
+    if (closeOnClick && userIsOpen === undefined) handleOnClose();
+  }, [closeOnClick, handleOnClose, userIsOpen]);
   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, {
+    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, {
+  })), /*#__PURE__*/_jsx(DSPopperJS, {
     referenceElement: buttonRef,
-    showPopover: isOpen,
-    closeContextMenu: handleOnClose
+    showPopover: userIsOpen !== null && userIsOpen !== void 0 ? userIsOpen : isOpen,
+    closeContextMenu: handleOnClose,
+    onClickOutside: onClickOutside
   }, void 0, content));
 };
 

package/esm/outOfTheBox/PopupMenu/PopupMenuContent.js

@@ -20,7 +20,8 @@ const PopupMenuContent = /*#__PURE__*/React.memo(_ref => {
   let {
     options,
     onItemClick,
-    onClose
+    onClose,
+    popupOnKeyPress
   } = _ref;
   const {
     instanceUID
@@ -37,7 +38,8 @@ const PopupMenuContent = /*#__PURE__*/React.memo(_ref => {
       Icon,
       label = '',
       onClick,
-      Content
+      Content,
+      id
     } = option;
 
     const ariaAndDataProps = _objectSpread(_objectSpread({}, getAriaProps(option)), getDataProps(option));
@@ -49,6 +51,7 @@ const PopupMenuContent = /*#__PURE__*/React.memo(_ref => {
 
     const handleKeyDown = e => {
       if (e.code === 'Escape') onClose();
+      if (popupOnKeyPress) popupOnKeyPress(e);
     };
 
     switch (type) {
@@ -58,7 +61,8 @@ const PopupMenuContent = /*#__PURE__*/React.memo(_ref => {
       case 'custom':
         return /*#__PURE__*/jsx(ItemWrapper, _objectSpread(_objectSpread({
           onClick: handleClick,
-          onKeyDown: handleKeyDown
+          onKeyDown: handleKeyDown,
+          id: id
         }, ariaAndDataProps), {}, {
           children: Content && /*#__PURE__*/_jsx(Content, {})
         }), "".concat(instanceUID, "-popup-").concat(label));
@@ -66,12 +70,13 @@ const PopupMenuContent = /*#__PURE__*/React.memo(_ref => {
       default:
         return /*#__PURE__*/jsxs(ItemWrapper, _objectSpread(_objectSpread({
           onClick: handleClick,
-          onKeyDown: handleKeyDown
+          onKeyDown: handleKeyDown,
+          id: id
         }, ariaAndDataProps), {}, {
           children: [Icon && /*#__PURE__*/_jsx(Icon, {}), Label && /*#__PURE__*/_jsx(Label, {}, void 0, label)]
         }), "".concat(instanceUID, "-popup-").concat(label));
     }
-  }), [onClose, onItemClick, options, instanceUID]);
+  }), [options, onItemClick, onClose, popupOnKeyPress, instanceUID]);
   return /*#__PURE__*/jsx(List, {
     ref: menuRef,
     children: content

package/esm/outOfTheBox/PopupMenu/styles.js

@@ -2,7 +2,7 @@ import styled from 'styled-components';
 
 const List = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-snqcgs-0"
-})(["padding:5px 0px;"]);
+})(["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 => {

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); 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 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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-global-header",
-  "version": "2.0.0-rc.13",
+  "version": "2.0.0-rc.17",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Global Header",
   "module": "./esm/index.js",
@@ -19,6 +19,14 @@
       "import": "./esm/propTypes.js",
       "require": "./cjs/propTypes.js"
     },
+    "./outOfTheBox/SearchToggle/styles": {
+      "import": "./esm/outOfTheBox/SearchToggle/styles.js",
+      "require": "./cjs/outOfTheBox/SearchToggle/styles.js"
+    },
+    "./outOfTheBox/SearchToggle/SearchToggle": {
+      "import": "./esm/outOfTheBox/SearchToggle/SearchToggle.js",
+      "require": "./cjs/outOfTheBox/SearchToggle/SearchToggle.js"
+    },
     "./outOfTheBox/PopupMenu/styles": {
       "import": "./esm/outOfTheBox/PopupMenu/styles.js",
       "require": "./cjs/outOfTheBox/PopupMenu/styles.js"
@@ -39,6 +47,10 @@
       "import": "./esm/outOfTheBox/AppPicker/AppPicker.js",
       "require": "./cjs/outOfTheBox/AppPicker/AppPicker.js"
     },
+    "./GlobalHeaderTypes": {
+      "import": "./esm/GlobalHeaderTypes.js",
+      "require": "./cjs/GlobalHeaderTypes.js"
+    },
     "./GlobalHeaderContext": {
       "import": "./esm/GlobalHeaderContext.js",
       "require": "./cjs/GlobalHeaderContext.js"
@@ -120,12 +132,12 @@
     "build": "node ../../scripts/build/build.js"
   },
   "dependencies": {
-    "@elliemae/ds-app-picker": "2.0.0-rc.13",
-    "@elliemae/ds-grid": "2.0.0-rc.13",
-    "@elliemae/ds-icons": "2.0.0-rc.13",
-    "@elliemae/ds-popperjs": "2.0.0-rc.13",
-    "@elliemae/ds-props-helpers": "2.0.0-rc.13",
-    "@elliemae/ds-utilities": "2.0.0-rc.13",
+    "@elliemae/ds-app-picker": "2.0.0-rc.17",
+    "@elliemae/ds-grid": "2.0.0-rc.17",
+    "@elliemae/ds-icons": "2.0.0-rc.17",
+    "@elliemae/ds-popperjs": "2.0.0-rc.17",
+    "@elliemae/ds-props-helpers": "2.0.0-rc.17",
+    "@elliemae/ds-utilities": "2.0.0-rc.17",
     "react-desc": "~4.1.3",
     "uid": "~2.0.0"
   },

package/types/GlobalHeader.d.ts

@@ -1,6 +1,6 @@
 /// <reference path="../../../../shared/typings/react-desc.d.ts" />
 /// <reference types="react" />
-import type { GlobalHeaderPropsT as Props } from './index.d';
+import type { GlobalHeaderPropsT as Props } from './GlobalHeaderTypes';
 declare const GlobalHeader: {
     (props: Props): JSX.Element;
     defaultProps: Props;

package/types/GlobalHeaderContainer.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-import type { GlobalHeaderContainerT } from './index.d';
+import type { GlobalHeaderContainerT } from './GlobalHeaderTypes';
 export declare const GlobalHeaderContainer: ({ children }: GlobalHeaderContainerT) => JSX.Element;

package/types/GlobalHeaderContext.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-import type { ContextT } from './index.d';
+import type { ContextT } from './GlobalHeaderTypes';
 export declare const GlobalHeaderContext: import("react").Context<ContextT>;

package/types/{index.d.d.ts → GlobalHeaderTypes.d.ts}

@@ -27,11 +27,11 @@ export interface BreadcrumbItemT {
     length: number;
 }
 export interface ToolbarItemT {
-    type?: 'ds-app-picker' | 'ds-popup-menu';
+    type?: 'ds-app-picker' | 'ds-popup-menu' | 'ds-search-toggle';
     label: string;
     Icon: React.ComponentType<Record<string, unknown>>;
     onClick: (event: React.MouseEvent<HTMLElement>) => void;
-    componentProps?: PopupPropsT | AppPickerProps;
+    componentProps?: PopupPropsT | AppPickerProps | SearchTogglePropsT;
 }
 export interface PopupPropsT {
     Icon?: React.ComponentType<Record<string, unknown>>;
@@ -66,3 +66,17 @@ export interface LabelT {
     isSelected: boolean;
     isOnlyItem: boolean;
 }
+export interface SearchTogglePropsT {
+    onNext: () => void;
+    onPrevious: () => void;
+    currentResultIndex: number;
+    totalResults: number;
+    placeholder: string;
+    value: string;
+    onChange: () => void;
+    onBlur: () => void;
+    onClear: () => void;
+    isOpen: boolean;
+    onKeyDown: (e: React.KeyboardEvent) => void;
+    onClick: (e: React.MouseEvent) => void;
+}

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

@@ -1,3 +1,3 @@
 import React from 'react';
-import type { BreadcrumbItemT as Props } from '../../index.d';
-export declare const PureBreadcrumb: React.MemoExoticComponent<({ onClick, isSelected, length, label, hasNext }: Props) => JSX.Element>;
+import type { BreadcrumbItemT as Props } from '../../GlobalHeaderTypes';
+export declare const PureBreadcrumb: React.MemoExoticComponent<({ onClick, isSelected, length, label, hasNext, id, ...rest }: Props) => JSX.Element>;

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

@@ -1,4 +1,4 @@
-import type { LabelT, PipeT } from '../../index.d';
+import type { LabelT, PipeT } from '../../GlobalHeaderTypes';
 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>;

package/types/config/useGetPropsWithDefaults.d.ts

@@ -1,2 +1,2 @@
-import type { GlobalHeaderPropsT } from '../index.d';
+import type { GlobalHeaderPropsT } from '../GlobalHeaderTypes';
 export declare const useGetPropsWithDefaults: (props: GlobalHeaderPropsT) => GlobalHeaderPropsT;

package/types/config/useGlobalHeader.d.ts

@@ -1,2 +1,2 @@
-import type { ContextT, GlobalHeaderPropsT } from '../index.d';
+import type { ContextT, GlobalHeaderPropsT } from '../GlobalHeaderTypes';
 export declare const useGlobalHeader: (props: GlobalHeaderPropsT) => ContextT;

package/types/config/useValidateProps.d.ts

@@ -1,2 +1,2 @@
-import { GlobalHeaderPropsT } from '../index.d';
+import { GlobalHeaderPropsT } from '../GlobalHeaderTypes';
 export declare const useValidateProps: (props: GlobalHeaderPropsT) => void;

package/types/defaultProps.d.ts

@@ -1,2 +1,2 @@
-import type { GlobalHeaderPropsT } from './index.d';
+import type { GlobalHeaderPropsT } from './GlobalHeaderTypes';
 export declare const defaultProps: GlobalHeaderPropsT;

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

@@ -1,7 +1,7 @@
 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 & {
+export declare const AppPicker: ({ label, id, componentProps, ...otherProps }: AppPickerProps & {
     label: string;
     triggerOnClick?: React.MouseEventHandler<Element> | undefined;
 }) => JSX.Element;

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

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-import type { PopupPropsT as Props } from '../../index.d';
-export declare const PopupMenu: ({ Icon, options, closeOnClick, title, onClick }: Props) => JSX.Element;
+import type { PopupPropsT as Props } from '../../GlobalHeaderTypes';
+export declare const PopupMenu: ({ Icon, title, onClick, id, componentProps, ...otherProps }: Props) => JSX.Element;

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

@@ -1,3 +1,3 @@
 import React from 'react';
-import type { PopupMenuContentPropsT as Props } from '../../index.d';
-export declare const PopupMenuContent: React.MemoExoticComponent<({ options, onItemClick, onClose }: Props) => JSX.Element>;
+import type { PopupMenuContentPropsT as Props } from '../../GlobalHeaderTypes';
+export declare const PopupMenuContent: React.MemoExoticComponent<({ options, onItemClick, onClose, popupOnKeyPress }: Props) => JSX.Element>;

package/types/outOfTheBox/SearchToggle/SearchToggle.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const SearchToggle: ({ id, componentProps, ...otherProps }: SearchTogglePropsT) => JSX.Element;

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

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

package/types/outOfTheBox/index.d.ts

@@ -1,2 +1,3 @@
 export * from './AppPicker/AppPicker';
 export * from './PopupMenu/PopupMenu';
+export * from './SearchToggle/SearchToggle';