@elliemae/ds-global-header 2.0.0-rc.9 → 2.0.2

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

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

package/esm/propTypes.js

@@ -8,7 +8,7 @@ const breadcrumbItem = 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'),
+  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')

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-global-header",
-  "version": "2.0.0-rc.9",
+  "version": "2.0.2",
   "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,10 +132,12 @@
     "build": "node ../../scripts/build/build.js"
   },
   "dependencies": {
-    "@elliemae/ds-app-picker": "2.0.0-rc.9",
-    "@elliemae/ds-grid": "2.0.0-rc.9",
-    "@elliemae/ds-icons": "2.0.0-rc.9",
-    "@elliemae/ds-popover": "2.0.0-rc.9",
+    "@elliemae/ds-app-picker": "2.0.2",
+    "@elliemae/ds-grid": "2.0.2",
+    "@elliemae/ds-icons": "2.0.2",
+    "@elliemae/ds-popperjs": "2.0.2",
+    "@elliemae/ds-props-helpers": "2.0.2",
+    "@elliemae/ds-utilities": "2.0.2",
     "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}

@@ -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;
@@ -25,19 +27,14 @@ 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' | 'custom';
     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 | SearchTogglePropsT;
+    CustomComponent?: React.ComponentType<{
+        item: ToolbarItemT;
+    }>;
 }
 export interface PopupPropsT {
     Icon?: React.ComponentType<Record<string, unknown>>;
@@ -48,17 +45,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[];
@@ -72,3 +69,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/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/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,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, id, componentProps, ...otherProps }: AppPickerProps & {
+    label: string;
+    triggerOnClick?: React.MouseEventHandler<Element> | undefined;
+}) => JSX.Element;
+export {};

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