@zohodesk/dot 1.9.11 → 1.9.13

package/es/list/status/StatusDropdown/StatusDropdown.js

@@ -113,10 +113,9 @@ export class StatusDropdown extends React.Component {
     }
   }
 
-  responsiveFunc(_ref) {
-    let {
-      mediaQueryOR
-    } = _ref;
+  responsiveFunc({
+    mediaQueryOR
+  }) {
     return {
       tabletMode: mediaQueryOR([{
         maxWidth: 700
@@ -234,118 +233,115 @@ export class StatusDropdown extends React.Component {
     }) : null), isPopupOpen && isEditable ? /*#__PURE__*/React.createElement(ResponsiveReceiver, {
       query: this.responsiveFunc,
       responsiveId: "Helmet"
-    }, _ref2 => {
-      let {
-        tabletMode
-      } = _ref2;
-      return /*#__PURE__*/React.createElement(ResponsiveDropBox, {
-        boxPosition: position,
-        isActive: isPopupReady,
-        onClick: removeClose,
-        size: boxSize,
-        right: right,
-        left: left,
-        top: top,
-        bottom: bottom,
-        isArrow: isArrow,
-        isAnimate: true,
-        getRef: getContainerRef,
-        customClass: {
-          customDropBoxWrap: style.dropBoxContainer,
-          customDropBox: dropBoxClass
-        },
-        needResponsive: needResponsive,
-        isResponsivePadding: true,
-        needFocusScope: true,
-        onClose: this.handleTogglePopup,
-        dataId: `${dataId}_dropbox`,
-        isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
-        isRestrictScroll: isRestrictScroll,
-        positionsOffset: positionsOffset,
-        targetOffset: targetOffset,
-        customProps: {
-          focusScopeProps: {
-            loadNextOptions: getNextOptions,
-            searchValue: searchString,
-            isFetchingOptions: isFetchingOptions
-          }
+    }, ({
+      tabletMode
+    }) => /*#__PURE__*/React.createElement(ResponsiveDropBox, {
+      boxPosition: position,
+      isActive: isPopupReady,
+      onClick: removeClose,
+      size: boxSize,
+      right: right,
+      left: left,
+      top: top,
+      bottom: bottom,
+      isArrow: isArrow,
+      isAnimate: true,
+      getRef: getContainerRef,
+      customClass: {
+        customDropBoxWrap: style.dropBoxContainer,
+        customDropBox: dropBoxClass
+      },
+      needResponsive: needResponsive,
+      isResponsivePadding: true,
+      needFocusScope: true,
+      onClose: this.handleTogglePopup,
+      dataId: `${dataId}_dropbox`,
+      isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
+      isRestrictScroll: isRestrictScroll,
+      positionsOffset: positionsOffset,
+      targetOffset: targetOffset,
+      customProps: {
+        focusScopeProps: {
+          loadNextOptions: getNextOptions,
+          searchValue: searchString,
+          isFetchingOptions: isFetchingOptions
         }
-      }, /*#__PURE__*/React.createElement(React.Fragment, null, isSearch ? /*#__PURE__*/React.createElement(Box, {
-        className: style.search
-      }, /*#__PURE__*/React.createElement(TextBoxIcon, {
-        placeHolder: placeHolderText,
-        onChange: this.handleChange,
-        value: searchString,
-        onClear: this.onSearchClear,
-        size: searchBoxSize,
-        customProps: {
-          TextBoxProps: {
-            'data-a11y-autofocus': true
-          }
-        },
-        a11y: {
-          ariaHaspopup: isSearch ? 'listbox' : 'menu',
-          ariaExpanded: isPopupReady,
-          role: 'combobox',
-          ariaActivedescendant: isPopupReady ? value : '',
-          ariaOwns: ariaTitleId
-        },
-        dataId: `${dataId}_search`
-      })) : null, title && options.length != 0 && /*#__PURE__*/React.createElement(Box, {
-        className: style.title
-      }, /*#__PURE__*/React.createElement(DropDownHeading, {
-        htmlId: ariaTitleId,
-        text: title,
+      }
+    }, /*#__PURE__*/React.createElement(React.Fragment, null, isSearch ? /*#__PURE__*/React.createElement(Box, {
+      className: style.search
+    }, /*#__PURE__*/React.createElement(TextBoxIcon, {
+      placeHolder: placeHolderText,
+      onChange: this.handleChange,
+      value: searchString,
+      onClear: this.onSearchClear,
+      size: searchBoxSize,
+      customProps: {
+        TextBoxProps: {
+          'data-a11y-autofocus': true
+        }
+      },
+      a11y: {
+        ariaHaspopup: isSearch ? 'listbox' : 'menu',
+        ariaExpanded: isPopupReady,
+        role: 'combobox',
+        ariaActivedescendant: isPopupReady ? value : '',
+        ariaOwns: ariaTitleId
+      },
+      dataId: `${dataId}_search`
+    })) : null, title && options.length != 0 && /*#__PURE__*/React.createElement(Box, {
+      className: style.title
+    }, /*#__PURE__*/React.createElement(DropDownHeading, {
+      htmlId: ariaTitleId,
+      text: title,
+      a11y: {
+        role: 'heading'
+      }
+    })), /*#__PURE__*/React.createElement(Box, {
+      scroll: "vertical",
+      flexible: true,
+      shrink: true,
+      dataId: `${dataId}_list`,
+      preventParentScroll: "vertical",
+      className: `${tabletMode ? style.responsivemaxHgt : style.maxHgt}`,
+      onScroll: this.handleScroll,
+      role: isSearch ? 'listbox' : 'menu',
+      tabindex: "-1",
+      isScrollAttribute: true
+    }, options.length != 0 && isDataLoaded ? /*#__PURE__*/React.createElement(React.Fragment, null, options.map((item, i) => {
+      const listItemText = item[keyName];
+      const isActive = value === listItemText;
+      return /*#__PURE__*/React.createElement(StatusListItem, {
+        key: i,
+        dataId: `dataid_${i}`,
+        value: listItemText,
+        id: item[idName],
+        active: isActive,
+        onClick: this.onSelect.bind(this, item),
+        index: i,
+        needTick: needTick,
+        needBorder: false,
+        bulletColor: item[statusColor],
+        title: listItemText,
+        needMultiLineText: needMultiLineText,
+        autoHover: true,
         a11y: {
-          role: 'heading'
+          role: isSearch ? 'option' : 'menuitem',
+          ariaSelected: isActive,
+          ariaLabel: listItemText
         }
-      })), /*#__PURE__*/React.createElement(Box, {
-        scroll: "vertical",
-        flexible: true,
-        shrink: true,
-        dataId: `${dataId}_list`,
-        preventParentScroll: "vertical",
-        className: `${tabletMode ? style.responsivemaxHgt : style.maxHgt}`,
-        onScroll: this.handleScroll,
-        role: isSearch ? 'listbox' : 'menu',
-        tabindex: "-1",
-        isScrollAttribute: true
-      }, options.length != 0 && isDataLoaded ? /*#__PURE__*/React.createElement(React.Fragment, null, options.map((item, i) => {
-        const listItemText = item[keyName];
-        const isActive = value === listItemText;
-        return /*#__PURE__*/React.createElement(StatusListItem, {
-          key: i,
-          dataId: `dataid_${i}`,
-          value: listItemText,
-          id: item[idName],
-          active: isActive,
-          onClick: this.onSelect.bind(this, item),
-          index: i,
-          needTick: needTick,
-          needBorder: false,
-          bulletColor: item[statusColor],
-          title: listItemText,
-          needMultiLineText: needMultiLineText,
-          autoHover: true,
-          a11y: {
-            role: isSearch ? 'option' : 'menuitem',
-            ariaSelected: isActive,
-            ariaLabel: listItemText
-          }
-        });
-      }), isFetchingOptions && /*#__PURE__*/React.createElement(Container, {
-        isCover: false,
-        align: "both"
-      }, /*#__PURE__*/React.createElement(Loader, null))) : isDataLoaded ? /*#__PURE__*/React.createElement(CommonEmptyState, {
-        className: style.svgWrapper,
-        title: searchErrorText || 'No results',
-        description: searchEmptyHint,
-        size: "small",
-        getEmptyState: this.emptySearchSVG
-      }) : /*#__PURE__*/React.createElement("div", {
-        className: style.loader
-      }, /*#__PURE__*/React.createElement(Loader, null))), renderFooterElement ? renderFooterElement : null));
-    }) : null);
+      });
+    }), isFetchingOptions && /*#__PURE__*/React.createElement(Container, {
+      isCover: false,
+      align: "both"
+    }, /*#__PURE__*/React.createElement(Loader, null))) : isDataLoaded ? /*#__PURE__*/React.createElement(CommonEmptyState, {
+      className: style.svgWrapper,
+      title: searchErrorText || 'No results',
+      description: searchEmptyHint,
+      size: "small",
+      getEmptyState: this.emptySearchSVG
+    }) : /*#__PURE__*/React.createElement("div", {
+      className: style.loader
+    }, /*#__PURE__*/React.createElement(Loader, null))), renderFooterElement ? renderFooterElement : null))) : null);
   }
 
 } // if (__DOCS__) {

package/es/list/status/StatusDropdown/__tests__/StatusDropdown.spec.js

@@ -8,10 +8,9 @@ describe('StatusDropdown', () => {
     } = render( /*#__PURE__*/React.createElement(StatusDropdown, null));
     expect(asFragment()).toMatchSnapshot();
   }), test('rendering target element', () => {
-    const renderTargetElement = _ref => {
-      let {
-        isPopupOpen
-      } = _ref;
+    const renderTargetElement = ({
+      isPopupOpen
+    }) => {
       return /*#__PURE__*/React.createElement("div", {
         className: isPopupOpen ? 'popupOpened' : 'popupClosed'
       }, "Target Element");

package/es/lookup/header/Search/Search.js

@@ -60,11 +60,10 @@ export default class Search extends Component {
     getRef && getRef(el);
   }
 
-  handleRenderChildren(_ref) {
-    let {
-      isActive,
-      isFocus
-    } = _ref;
+  handleRenderChildren({
+    isActive,
+    isFocus
+  }) {
     const {
       value,
       selectedId,

package/es/lookup/header/Search/__tests__/Search.spec.js

@@ -48,10 +48,9 @@ describe('Search', () => {
       id: '5'
     }];
 
-    function renderChildren(_ref) {
-      let {
-        value
-      } = _ref;
+    function renderChildren({
+      value
+    }) {
       return /*#__PURE__*/React.createElement("div", null, value);
     }
 

package/es/lookup/header/ViewDropDown/ViewDropDown.js

@@ -39,10 +39,9 @@ class DropDown extends SelectComponent {
     }
   }
 
-  responsiveFunc(_ref) {
-    let {
-      mediaQueryOR
-    } = _ref;
+  responsiveFunc({
+    mediaQueryOR
+  }) {
     return {
       tabletMode: mediaQueryOR([{
         maxWidth: 700
@@ -51,8 +50,6 @@ class DropDown extends SelectComponent {
   }
 
   render() {
-    var _this = this;
-
     const {
       needSearch,
       dropBoxSize,
@@ -106,75 +103,70 @@ class DropDown extends SelectComponent {
     }))), isPopupOpen ? /*#__PURE__*/React.createElement(ResponsiveReceiver, {
       query: this.responsiveFunc,
       responsiveId: "Helmet"
-    }, _ref2 => {
-      let {
-        tabletMode
-      } = _ref2;
-      return /*#__PURE__*/React.createElement(ResponsiveDropBox, {
-        isAnimate: true,
-        isArrow: false,
-        isActive: isPopupReady,
-        boxPosition: position || `${defaultDropBoxPosition}Center`,
-        getRef: getContainerRef,
-        onClick: removeClose,
-        animationStyle: animationStyle,
-        size: "large",
-        alignBox: "row",
-        isResponsivePadding: true,
-        dataId: `${dataId}_dropbox`,
-        isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
-        isRestrictScroll: isRestrictScroll,
-        positionsOffset: positionsOffset,
-        targetOffset: targetOffset
-      }, /*#__PURE__*/React.createElement(Box, {
-        flexible: true
-      }, /*#__PURE__*/React.createElement(Card, null, needSearch ? /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement(DropDownSearch, {
-        value: searchStr,
-        onChange: this.handleSearch,
-        onKeyDown: this.onSearchKeyDown,
-        getRef: this.searchInputRef,
-        size: searchBoxSize,
-        variant: searchBoxVariant,
-        placeHolder: searchBoxPlaceHolder,
-        maxLength: maxLength,
-        dataId: `${dataId}_search`
-      })) : null, /*#__PURE__*/React.createElement(CardContent, {
-        shrink: true,
-        eleRef: this.suggestionContainerRef,
-        customClass: !tabletMode && dropBoxSize ? style[dropBoxSize] : ''
-      }, suggestions.length ? /*#__PURE__*/React.createElement("div", {
-        className: style.listItemContainer,
-        "data-id": `${dataId}_Options`
-      }, suggestions.map(function () {
-        let option = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-        let index = arguments.length > 1 ? arguments[1] : undefined;
-        const {
-          id,
-          value
-        } = option;
-        return /*#__PURE__*/React.createElement(ListItem, {
-          active: id === selectedId,
-          getRef: _this.suggestionItemRef,
-          highlight: hoverIndex === index ? true : false,
-          id: id,
-          key: `${id}dropDown`,
-          onClick: _this.handleChange,
-          onMouseEnter: _this.handleMouseEnter,
-          size: "medium",
-          value: value,
-          index: index,
-          needTick: true,
-          needBorder: false
-        });
-      })) : isFetchingOptions ? /*#__PURE__*/React.createElement(Container, {
-        align: "both",
-        className: style.loader
-      }, /*#__PURE__*/React.createElement(Loader, null)) : searchStr ? /*#__PURE__*/React.createElement("div", {
-        className: style.emptyState
-      }, searchEmptyMessage || emptyMessage) : /*#__PURE__*/React.createElement("div", {
-        className: style.emptyState
-      }, emptyMessage)))));
-    }) : null);
+    }, ({
+      tabletMode
+    }) => /*#__PURE__*/React.createElement(ResponsiveDropBox, {
+      isAnimate: true,
+      isArrow: false,
+      isActive: isPopupReady,
+      boxPosition: position || `${defaultDropBoxPosition}Center`,
+      getRef: getContainerRef,
+      onClick: removeClose,
+      animationStyle: animationStyle,
+      size: "large",
+      alignBox: "row",
+      isResponsivePadding: true,
+      dataId: `${dataId}_dropbox`,
+      isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
+      isRestrictScroll: isRestrictScroll,
+      positionsOffset: positionsOffset,
+      targetOffset: targetOffset
+    }, /*#__PURE__*/React.createElement(Box, {
+      flexible: true
+    }, /*#__PURE__*/React.createElement(Card, null, needSearch ? /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement(DropDownSearch, {
+      value: searchStr,
+      onChange: this.handleSearch,
+      onKeyDown: this.onSearchKeyDown,
+      getRef: this.searchInputRef,
+      size: searchBoxSize,
+      variant: searchBoxVariant,
+      placeHolder: searchBoxPlaceHolder,
+      maxLength: maxLength,
+      dataId: `${dataId}_search`
+    })) : null, /*#__PURE__*/React.createElement(CardContent, {
+      shrink: true,
+      eleRef: this.suggestionContainerRef,
+      customClass: !tabletMode && dropBoxSize ? style[dropBoxSize] : ''
+    }, suggestions.length ? /*#__PURE__*/React.createElement("div", {
+      className: style.listItemContainer,
+      "data-id": `${dataId}_Options`
+    }, suggestions.map((option = {}, index) => {
+      const {
+        id,
+        value
+      } = option;
+      return /*#__PURE__*/React.createElement(ListItem, {
+        active: id === selectedId,
+        getRef: this.suggestionItemRef,
+        highlight: hoverIndex === index ? true : false,
+        id: id,
+        key: `${id}dropDown`,
+        onClick: this.handleChange,
+        onMouseEnter: this.handleMouseEnter,
+        size: "medium",
+        value: value,
+        index: index,
+        needTick: true,
+        needBorder: false
+      });
+    })) : isFetchingOptions ? /*#__PURE__*/React.createElement(Container, {
+      align: "both",
+      className: style.loader
+    }, /*#__PURE__*/React.createElement(Loader, null)) : searchStr ? /*#__PURE__*/React.createElement("div", {
+      className: style.emptyState
+    }, searchEmptyMessage || emptyMessage) : /*#__PURE__*/React.createElement("div", {
+      className: style.emptyState
+    }, emptyMessage)))))) : null);
   }
 
 }

package/es/utils/General.js

@@ -3,9 +3,7 @@ export function stopBubbling(event) {
   event.stopPropagation && event.stopPropagation();
   event.nativeEvent && event.nativeEvent.stopImmediatePropagation && event.nativeEvent.stopImmediatePropagation();
 }
-export function getFullName() {
-  let firstName = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-  let lastName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+export function getFullName(firstName = '', lastName = '') {
   let fullName = '';
 
   if (firstName !== null && firstName !== '') {
@@ -18,10 +16,7 @@ export function getFullName() {
 
   return fullName;
 }
-export function shallowDiff() {
-  let a = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  let b = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-
+export function shallowDiff(a = {}, b = {}) {
   for (let i in a) {
     if (!(i in b)) {
       return true;

package/es/utils/editorUtils.js

@@ -176,11 +176,7 @@ export function loadResource(url, type, id, callback) {
   });
 } // bind
 
-export function bind() {
-  for (var _len = arguments.length, handlers = new Array(_len), _key = 0; _key < _len; _key++) {
-    handlers[_key] = arguments[_key];
-  }
-
+export function bind(...handlers) {
   handlers.forEach(handler => {
     if (__DEVELOPMENT__) {
       if (!this[handler]) {

package/es/version2/lookup/AlertHeader/AlertHeader.js

@@ -2,7 +2,8 @@ import React, { useRef } from 'react'; //AlertDependencies
 
 import { Container, Box } from '@zohodesk/components/es/Layout';
 import AlertClose from "../../AlertClose/AlertClose";
-import AlertIcons from "../../alertIcons/AlertIcons"; //CSS
+import AlertIcons from "../../alertIcons/AlertIcons";
+import renderNode from '@zohodesk/utils/es/renderNode'; //CSS
 
 import style from "./css/AlertHeaderNew.module.css";
 import cssJSLogic from "./css/cssJSLogic";
@@ -24,7 +25,8 @@ export default function AlertHeader(props) {
     type,
     htmlId,
     customStyle,
-    dragBoundaryLimit
+    dragBoundaryLimit,
+    renderAlertIcon
   } = props;
   const finalStyle = mergeStyle(style, customStyle);
   const {
@@ -51,7 +53,7 @@ export default function AlertHeader(props) {
     eleRef: dragRef
   }, needIcon && /*#__PURE__*/React.createElement("div", {
     className: finalStyle.iconContainer
-  }, /*#__PURE__*/React.createElement(AlertIcons, {
+  }, renderNode(renderAlertIcon) || /*#__PURE__*/React.createElement(AlertIcons, {
     type: type
   })), (title || children) && /*#__PURE__*/React.createElement(Box, {
     flexible: true

package/es/version2/lookup/AlertHeader/__tests__/AlertHeader.spec.js

@@ -8,4 +8,28 @@ describe('AlertHeader', () => {
     } = render( /*#__PURE__*/React.createElement(AlertHeader, null));
     expect(asFragment()).toMatchSnapshot();
   });
+  test('renders custom renderAlertIcon when needIcon is true', () => {
+    const customIcon = /*#__PURE__*/React.createElement("span", {
+      "data-test-id": "custom-icon"
+    }, "icon");
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AlertHeader, {
+      needIcon: true,
+      renderAlertIcon: customIcon
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('does not render custom renderAlertIcon when needIcon is false', () => {
+    const customIcon = /*#__PURE__*/React.createElement("span", {
+      "data-test-id": "custom-icon"
+    }, "icon");
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AlertHeader, {
+      needIcon: false,
+      renderAlertIcon: customIcon
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

package/es/version2/lookup/AlertHeader/__tests__/__snapshots__/AlertHeader.spec.js.snap

@@ -1,5 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`AlertHeader does not render custom renderAlertIcon when needIcon is false 1`] = `
+<DocumentFragment>
+  <div
+    class="container danger flex rowdir wrap vCenter"
+    data-drag-hook="true"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+  />
+</DocumentFragment>
+`;
+
 exports[`AlertHeader rendering the defult props 1`] = `
 <DocumentFragment>
   <div
@@ -86,3 +98,25 @@ exports[`AlertHeader rendering the defult props 1`] = `
   </div>
 </DocumentFragment>
 `;
+
+exports[`AlertHeader renders custom renderAlertIcon when needIcon is true 1`] = `
+<DocumentFragment>
+  <div
+    class="container danger flex rowdir wrap vCenter"
+    data-drag-hook="true"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+  >
+    <div
+      class="iconContainer"
+    >
+      <span
+        data-test-id="custom-icon"
+      >
+        icon
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/es/version2/lookup/AlertHeader/css/cssJSLogic.js

@@ -1,9 +1,8 @@
 import { compileClassNames } from '@zohodesk/utils';
-export default function cssJSLogic(_ref) {
-  let {
-    props,
-    style
-  } = _ref;
+export default function cssJSLogic({
+  props,
+  style
+}) {
   let {
     children,
     type,

package/es/version2/lookup/AlertHeader/props/propTypes.js

@@ -15,5 +15,6 @@ export default {
     left: PropTypes.number,
     right: PropTypes.number,
     bottom: PropTypes.number
-  })
+  }),
+  renderAlertIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.node])
 };