@zohodesk/dot 1.4.0 → 1.4.2

package/es/v1/list/ListLayout/ListLayout.js

@@ -38,7 +38,7 @@ export default function ListLayout(props) {
     "data-id": dataId,
     "data-test-id": dataId,
     "data-title": dataTitle,
-    tabIndex: "0",
+    tabIndex: onClick ? '0' : null,
     role: role,
     "data-a11y-inset-focus": true,
     "aria-label": ariaLabel,

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

@@ -247,8 +247,8 @@ function StatusDropdown(props) {
     dataId: dataId,
     onClick: removeClose,
     disabled: isDisabled || isReadOnly ? true : false,
-    "aria-haspopup": true,
-    "aria-expanded": isPopupOpen && isEditable ? true : false,
+    "aria-haspopup": isSearch ? 'listbox' : 'menu',
+    "aria-expanded": isPopupReady && isEditable ? true : false,
     tabIndex: tabIndex,
     "aria-labelledby": ariaLabelledby,
     "aria-label": ariaLabel,
@@ -307,10 +307,10 @@ function StatusDropdown(props) {
       inputRef: searchInputRef,
       onKeyDown: handleKeyDown,
       a11y: {
-        ariaHaspopup: true,
-        ariaExpanded: true,
+        ariaHaspopup: isSearch ? 'listbox' : 'menu',
+        ariaExpanded: isPopupReady,
         role: 'combobox',
-        ariaActivedescendant: value,
+        ariaActivedescendant: isPopupReady ? value : '',
         ariaOwns: ariaTitleId
       }
     })) : null, title && optionsList.length != 0 && /*#__PURE__*/React.createElement(Box, {
@@ -332,7 +332,7 @@ function StatusDropdown(props) {
       onScroll: handleScroll,
       role: isSearch ? 'listbox' : 'menu',
       "aria-labelledby": ariaTitleId,
-      tabindex: "0"
+      tabindex: "-1"
     }, optionsList.length != 0 && isDataLoaded ? /*#__PURE__*/React.createElement(React.Fragment, null, optionsList.map((item, i) => /*#__PURE__*/React.createElement(React.Fragment, {
       key: i
     }, /*#__PURE__*/React.createElement(StatusListItem, {

package/es/v1/lookup/Lookup/Lookup.js

@@ -45,7 +45,7 @@ export default function Lookup(props) {
     needRestoreFocus = true,
     needListNavigation = false,
     needFocusLoop = true,
-    needEnterAction = false
+    needEnterAction = true
   } = focusScopeProps;
   const createRef = useRef(null);
   const handleKeyDown = useCallback(e => {

package/es/v1/notification/DesktopNotification/DesktopNotification.js

@@ -9,6 +9,7 @@ import AutoClose from '../../../actions/AutoClose';
 import Button from '@zohodesk/components/es/v1/Button/Button';
 import FormAction from '../../../FormAction/FormAction';
 import DesktopNotificationHeader from '../DesktopNotificationHeader/DesktopNotificationHeader';
+import { ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/CustomResponsive';
 import style from '../../../version2/notification/DesktopNotification/DesktopNotification.module.css';
 let buttonPaletteObject = {
   success: {
@@ -61,7 +62,8 @@ export function DesktopNotificationUI(props) {
     renderAlertIcon,
     customClass = {},
     i18nKeys = {},
-    customProps
+    customProps,
+    responsiveId
   } = props;
   let {
     closeTitle = 'Close'
@@ -90,66 +92,88 @@ export function DesktopNotificationUI(props) {
   let Zindex = isAnimate ? getNextIndex() : null;
   let uiVariantOne = title && (info || secondaryInfo);
   let uiVariantTwo = title && !(info || secondaryInfo) && !getSectionContainer;
+
+  function responsiveFunc(_ref) {
+    let {
+      mediaQueryOR
+    } = _ref;
+    return {
+      uptoTablet: mediaQueryOR([{
+        maxWidth: 760
+      }])
+    };
+  }
+
   return /*#__PURE__*/React.createElement("div", {
     className: style.parentElement,
     style: needAutoZindex && isAnimate ? {
       zIndex: `${Zindex}`
     } : {},
     "data-selector-id": dataSelectorId
-  }, /*#__PURE__*/React.createElement(Container, _extends({
-    className: `${style.container} ${isAnimate ? animateClass : animateRemoveClass} ${style[`${size}`] ? style[`${size}`] : ''} ${isShrinkView ? style.globalNotify : ''} ${containerClass}`,
-    isCover: false,
-    dataId: dataId,
-    isInline: uiVariantTwo
-  }, ExtraProps), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(DesktopNotificationHeader, {
-    type: type,
-    title: title,
-    variant: titleVariant,
-    needIcon: needIcon,
-    onClose: onClose,
-    closeTitle: closeTitle,
-    renderAlertIcon: renderAlertIcon,
-    dataId: `${dataId}_close`,
-    needClose: needClose
-  })), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Container, {
-    alignBox: "column"
-  }, uiVariantOne && /*#__PURE__*/React.createElement(Box, {
-    flexible: true
-  }, /*#__PURE__*/React.createElement("div", {
-    className: `${style.section} ${style.infoText}`
-  }, subTitle && /*#__PURE__*/React.createElement("div", {
-    className: `${style.subTitle} ${info || secondaryInfo ? style.subTitleMargin : ''}`
-  }, subTitle), info && /*#__PURE__*/React.createElement("div", null, info), secondaryInfo && /*#__PURE__*/React.createElement("div", {
-    className: `${info ? style.secondaryInfo : ''}`
-  }, secondaryInfo))), getSectionContainer && /*#__PURE__*/React.createElement(Box, {
-    flexible: true
-  }, getSectionContainer()), submitText || cancelText ? /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement("div", {
-    className: style.footer
-  }, isMore ? /*#__PURE__*/React.createElement("div", {
-    className: `${style.message}`
-  }, message) : null, /*#__PURE__*/React.createElement(FormAction, {
-    size: "small",
-    paddingLeftSize: "xmedium"
-  }, submitText ? /*#__PURE__*/React.createElement("div", {
-    onClick: onClickSubmit,
-    "data-id": `${dataId}_submitButton`,
-    "data-test-id": `${dataId}_submitButton`
-  }, /*#__PURE__*/React.createElement(Container, {
-    align: "vertical",
-    alignBox: "row"
-  }, getSubmitContainer ? /*#__PURE__*/React.createElement(Box, {
-    flexible: true
-  }, getSubmitContainer()) : /*#__PURE__*/React.createElement(Box, {
-    flexible: true
-  }, /*#__PURE__*/React.createElement(Button, {
-    text: submitText,
-    palette: submitType ? submitType : buttonPalette
-  })))) : null, cancelText ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
-    text: cancelText,
-    palette: "secondary",
-    dataId: `${dataId}_cancelButton`,
-    onClick: onClickCancel
-  })) : null))) : null)), getBottomContainer ? /*#__PURE__*/React.createElement(Box, null, getBottomContainer()) : null));
+  }, /*#__PURE__*/React.createElement(ResponsiveReceiver, {
+    query: responsiveFunc,
+    responsiveId: responsiveId
+  }, _ref2 => {
+    let {
+      uptoTablet
+    } = _ref2;
+    return /*#__PURE__*/React.createElement(Container, _extends({
+      className: `${style.container} ${isAnimate ? animateClass : animateRemoveClass}
+             ${isShrinkView ? style.globalNotify : ''} ${containerClass}
+             ${uptoTablet ? style.tapWidth : style[`${size}`]}`,
+      isCover: false,
+      dataId: dataId,
+      isInline: uiVariantTwo
+    }, ExtraProps), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(DesktopNotificationHeader, {
+      type: type,
+      title: title,
+      variant: titleVariant,
+      needIcon: needIcon,
+      onClose: onClose,
+      closeTitle: closeTitle,
+      renderAlertIcon: renderAlertIcon,
+      dataId: `${dataId}_close`,
+      needClose: needClose
+    })), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Container, {
+      alignBox: "column"
+    }, uiVariantOne && /*#__PURE__*/React.createElement(Box, {
+      flexible: true
+    }, /*#__PURE__*/React.createElement("div", {
+      className: `${style.section} ${style.infoText}`
+    }, subTitle && /*#__PURE__*/React.createElement("div", {
+      className: `${style.subTitle} ${info || secondaryInfo ? style.subTitleMargin : ''}`
+    }, subTitle), info && /*#__PURE__*/React.createElement("div", null, info), secondaryInfo && /*#__PURE__*/React.createElement("div", {
+      className: `${info ? style.secondaryInfo : ''}`
+    }, secondaryInfo))), getSectionContainer && /*#__PURE__*/React.createElement(Box, {
+      flexible: true
+    }, getSectionContainer()), submitText || cancelText ? /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement("div", {
+      className: style.footer
+    }, isMore ? /*#__PURE__*/React.createElement("div", {
+      className: `${style.message}`
+    }, message) : null, /*#__PURE__*/React.createElement(FormAction, {
+      size: "small",
+      paddingLeftSize: "xmedium"
+    }, submitText ? /*#__PURE__*/React.createElement("div", {
+      onClick: onClickSubmit,
+      "data-id": `${dataId}_submitButton`,
+      "data-test-id": `${dataId}_submitButton`
+    }, /*#__PURE__*/React.createElement(Container, {
+      align: "vertical",
+      alignBox: "row"
+    }, getSubmitContainer ? /*#__PURE__*/React.createElement(Box, {
+      flexible: true
+    }, getSubmitContainer()) : /*#__PURE__*/React.createElement(Box, {
+      flexible: true
+    }, /*#__PURE__*/React.createElement(Button, {
+      text: submitText,
+      palette: submitType ? submitType : buttonPalette
+    })))) : null, cancelText ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
+      text: cancelText,
+      palette: "secondary",
+      dataId: `${dataId}_cancelButton`,
+      onClick: onClickCancel
+    })) : null))) : null)), getBottomContainer ? /*#__PURE__*/React.createElement(Box, null, getBottomContainer()) : null);
+  }));
 }
 DesktopNotificationUI.propTypes = DesktopNotificationUI_propTypes;
 DesktopNotificationUI.propTypes = defaultProps;

package/es/v1/notification/DesktopNotification/props/defaultProps.js

@@ -1,3 +1,4 @@
+import { getDotLibraryConfig } from '../../../../Provider/Config';
 export default {
   isMore: false,
   isAnimate: true,
@@ -11,5 +12,6 @@ export default {
   isShrinkView: false,
   needClose: true,
   customProps: {},
-  dataSelectorId: 'desktopNotification'
+  dataSelectorId: 'desktopNotification',
+  responsiveId: getDotLibraryConfig('desktopNotificationResponsiveId')
 };

package/es/v1/notification/DesktopNotification/props/propTypes.js

@@ -4,7 +4,8 @@ export const propTypes = {
   onPortalClose: PropTypes.func,
   autoClose: PropTypes.bool,
   hideTime: PropTypes.string,
-  Element: PropTypes.element
+  Element: PropTypes.element,
+  responsiveId: PropTypes.string
 };
 export const DesktopNotificationUI_propTypes = {
   type: PropTypes.oneOf(['success', 'error', 'danger', 'warning', 'info', 'notification', 'alarm']),

package/es/v1/notification/DesktopNotificationHeader/DesktopNotificationHeader.js

@@ -4,6 +4,8 @@ import propTypes from './props/propTypes';
 import { Container, Box } from '@zohodesk/components/es/v1/Layout';
 import AlertClose from '../../alert/AlertClose/AlertClose';
 import AlertIcons from '../../alert/alertIcons/AlertIcons';
+import { ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/CustomResponsive';
+import Typography from '@zohodesk/components/es/v1/Typography/Typography';
 import style from '../../../version2/notification/DesktopNotificationHeader/DesktopNotificationHeader.module.css';
 export default function DesktopNotificationHeader(props) {
   let {
@@ -15,36 +17,70 @@ export default function DesktopNotificationHeader(props) {
     needIcon,
     title,
     renderAlertIcon,
-    needClose
+    needClose,
+    responsiveId
   } = props;
+
+  function responsiveFunc(_ref) {
+    let {
+      mediaQueryOR
+    } = _ref;
+    return {
+      uptoTablet: mediaQueryOR([{
+        maxWidth: 760
+      }])
+    };
+  }
+
   return /*#__PURE__*/React.createElement(Container, {
     align: "vertical",
     alignBox: "row",
     className: `${style.container} ${style[variant]} ${style[type]}`,
     isCover: false,
     wrap: "wrap"
-  }, needIcon ? /*#__PURE__*/React.createElement("div", {
-    className: style.iconContainer
-  }, renderAlertIcon ? renderAlertIcon() : /*#__PURE__*/React.createElement(AlertIcons, {
-    type: type
-  })) : null, /*#__PURE__*/React.createElement(Box, {
-    flexible: true
-  }, /*#__PURE__*/React.createElement(Container, {
-    alignBox: "row",
-    align: "center"
-  }, variant === 'primary' ? /*#__PURE__*/React.createElement(Box, {
-    className: style.title,
-    shrink: true
-  }, title) : /*#__PURE__*/React.createElement(Box, {
-    className: `${style.infoText}`
-  }, title))), needClose ? /*#__PURE__*/React.createElement(Box, {
-    className: style.close
-  }, /*#__PURE__*/React.createElement(AlertClose, {
-    onClose: onClose,
-    dataTitle: closeTitle,
-    dataId: dataId,
-    type: "light"
-  })) : null);
+  }, /*#__PURE__*/React.createElement(ResponsiveReceiver, {
+    query: responsiveFunc,
+    responsiveId: responsiveId
+  }, _ref2 => {
+    let {
+      uptoTablet
+    } = _ref2;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, needIcon ? /*#__PURE__*/React.createElement("div", {
+      className: style.iconContainer
+    }, renderAlertIcon ? renderAlertIcon() : /*#__PURE__*/React.createElement(AlertIcons, {
+      type: type
+    })) : null, /*#__PURE__*/React.createElement(Box, {
+      flexible: true
+    }, /*#__PURE__*/React.createElement(Container, {
+      alignBox: "row",
+      align: "center"
+    }, variant === 'primary' ? /*#__PURE__*/React.createElement(Box, {
+      shrink: true
+    }, /*#__PURE__*/React.createElement(Typography, {
+      $i18n_dataTitle: title,
+      $ui_className: style.title,
+      $ui_tagName: "h1",
+      $ui_size: uptoTablet ? '16' : '18',
+      $ui_lineHeight: "20",
+      $ui_weight: "bold",
+      $flag_reset: true,
+      $ui_wordBreak: "breakWord"
+    }, title)) : /*#__PURE__*/React.createElement(Box, {
+      className: `${style.infoText}`
+    }, /*#__PURE__*/React.createElement(Typography, {
+      $i18n_dataTitle: title,
+      $ui_className: style.title,
+      $ui_size: "14",
+      $ui_wordBreak: "breakWord"
+    }, title)))), needClose ? /*#__PURE__*/React.createElement(Box, {
+      className: style.close
+    }, /*#__PURE__*/React.createElement(AlertClose, {
+      onClose: onClose,
+      dataTitle: closeTitle,
+      dataId: dataId,
+      type: "light"
+    })) : null);
+  }));
 }
 DesktopNotificationHeader.propTypes = propTypes;
 DesktopNotificationHeader.defaultProps = defaultProps; // if (__DOCS__) {

package/es/v1/notification/DesktopNotificationHeader/props/defaultProps.js

@@ -1,5 +1,7 @@
+import { getDotLibraryConfig } from '../../../../Provider/Config';
 export default {
   needIcon: true,
   variant: 'primary',
-  needClose: true
+  needClose: true,
+  responsiveId: getDotLibraryConfig('desktopNotificationResponsiveId')
 };

package/es/v1/notification/DesktopNotificationHeader/props/propTypes.js

@@ -8,5 +8,6 @@ export default {
   title: PropTypes.string,
   renderAlertIcon: PropTypes.func,
   type: PropTypes.oneOf(['success', 'error', 'danger', 'warning', 'info', 'notification', 'alarm']),
-  variant: PropTypes.oneOf(['primary', 'secondary'])
+  variant: PropTypes.oneOf(['primary', 'secondary']),
+  responsiveId: PropTypes.string
 };

package/es/v1/setup/header/Button/Button.js

@@ -3,34 +3,22 @@ import { defaultProps } from '../../../../setup/header/Button/props/defaultProps
 import { propTypes } from '../../../../setup/header/Button/props/propTypes';
 import GenButton from '@zohodesk/components/es/v1/Button/Button';
 import style from '../../../../setup/header/Button/HeaderButton.module.css';
-export default class Button extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    let {
-      palette,
-      text,
-      onClick,
-      id
-    } = this.props;
-    return /*#__PURE__*/React.createElement("div", {
-      className: style.container
-    }, /*#__PURE__*/React.createElement(GenButton, {
-      id: id,
-      onClick: onClick,
-      palette: palette,
-      size: "medium",
-      text: text
-    }));
-  }
-
+export default function Button(props) {
+  let {
+    palette,
+    text,
+    onClick,
+    id
+  } = props;
+  return /*#__PURE__*/React.createElement("div", {
+    className: style.container
+  }, /*#__PURE__*/React.createElement(GenButton, {
+    id: id,
+    onClick: onClick,
+    palette: palette,
+    size: "medium",
+    text: text
+  }));
 }
 Button.defaultProps = defaultProps;
-Button.propTypes = propTypes; // if (__DOCS__) {
-//   Button.docs = {
-//     componentGroup: 'Header',
-//     folderName: 'Setup'
-//   };
-// }
+Button.propTypes = propTypes;

package/es/v1/setup/header/Link/Link.js

@@ -5,40 +5,28 @@ import { Icon } from '@zohodesk/icons';
 import { Box } from '@zohodesk/components/es/v1/Layout';
 import ExternalLink from '../../../ExternalLink/ExternalLink';
 import style from '../../../../setup/header/Link/HeaderLink.module.css';
-export default class Link extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    let {
-      url,
-      text,
-      iconName,
-      iconClass,
-      iconSize
-    } = this.props;
-    return /*#__PURE__*/React.createElement(ExternalLink, {
-      className: style.container,
-      href: url
-    }, /*#__PURE__*/React.createElement(Box, {
-      className: style.icon
-    }, /*#__PURE__*/React.createElement(Icon, {
-      isBold: true,
-      name: iconName,
-      size: iconSize,
-      iconClass: iconClass ? iconClass : ''
-    })), /*#__PURE__*/React.createElement(Box, {
-      className: style.text,
-      flexible: true
-    }, text));
-  }
-
+export default function Link(props) {
+  let {
+    url,
+    text,
+    iconName,
+    iconClass,
+    iconSize
+  } = props;
+  return /*#__PURE__*/React.createElement(ExternalLink, {
+    className: style.container,
+    href: url
+  }, /*#__PURE__*/React.createElement(Box, {
+    className: style.icon
+  }, /*#__PURE__*/React.createElement(Icon, {
+    isBold: true,
+    name: iconName,
+    size: iconSize,
+    iconClass: iconClass ? iconClass : ''
+  })), /*#__PURE__*/React.createElement(Box, {
+    className: style.text,
+    flexible: true
+  }, text));
 }
 Link.defaultProps = defaultProps;
-Link.propTypes = propTypes; // if (__DOCS__) {
-//   Link.docs = {
-//     componentGroup: 'Header',
-//     folderName: 'Setup'
-//   };
-// }
+Link.propTypes = propTypes;

package/es/v1/setup/header/Search/Search.js

@@ -1,81 +1,55 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { defaultProps } from '../../../../setup/header/Search/props/defaultProps';
 import { propTypes } from '../../../../setup/header/Search/props/propTypes';
 import { Icon } from '@zohodesk/icons';
 import TextBox from '@zohodesk/components/es/v1/TextBox/TextBox';
 import style from '../../../../setup/header/Search/Search.module.css';
-export default class Search extends React.Component {
-  constructor(props) {
-    super(props);
-    let {
-      value
-    } = this.props;
-    this.state = {
-      value: value || '',
-      isFocus: false
-    };
-    this.onFocus = this.onFocus.bind(this);
-    this.onBlur = this.onBlur.bind(this);
-  }
+export default function Search(props) {
+  let {
+    placeHolder,
+    maxLength,
+    value,
+    onChange,
+    onKeyPress,
+    onFocus,
+    onBlur,
+    customClass
+  } = props;
+  let [isFocus, setIsFocus] = useState(false);
+  let [resetValue] = useState(value || '');
 
-  onFocus(id, name, value) {
-    let {
-      onFocus
-    } = this.props;
-    this.setState({
-      isFocus: true
-    });
+  const handleFocus = (id, name, value) => {
+    setIsFocus(true);
     onFocus && onFocus(id, name, value);
-  }
+  };
 
-  onBlur(id, name, value) {
-    let {
-      onBlur
-    } = this.props;
-    this.state.value == '' && this.setState({
-      isFocus: false
-    });
-    onBlur && onBlur(id, name, value);
-  }
+  const handleBlur = (id, name, value) => {
+    if (resetValue == '') {
+      setIsFocus(false);
+    }
 
-  render() {
-    let {
-      placeHolder,
-      maxLength,
-      value,
-      onChange,
-      onKeyPress,
-      customClass
-    } = this.props;
-    let {
-      isFocus
-    } = this.state;
-    return /*#__PURE__*/React.createElement("div", {
-      className: `${style.container} ${isFocus ? style.active : ''} ${customClass}`
-    }, /*#__PURE__*/React.createElement(TextBox, {
-      placeHolder: placeHolder,
-      customClass: style.input,
-      maxLength: maxLength,
-      value: value,
-      onChange: onChange,
-      onKeyUp: onKeyPress,
-      onFocus: this.onFocus,
-      needAppearance: false,
-      onBlur: this.onBlur
-    }), value != '' && value ? /*#__PURE__*/React.createElement("span", {
-      className: style.icon,
-      onClick: this.onBlur
-    }, /*#__PURE__*/React.createElement(Icon, {
-      name: "ZD-close",
-      size: "19"
-    })) : null);
-  }
+    onBlur && onBlur(id, name, value);
+  };
 
+  return /*#__PURE__*/React.createElement("div", {
+    className: `${style.container} ${isFocus ? style.active : ''} ${customClass}`
+  }, /*#__PURE__*/React.createElement(TextBox, {
+    placeHolder: placeHolder,
+    customClass: style.input,
+    maxLength: maxLength,
+    value: value,
+    onChange: onChange,
+    onKeyUp: onKeyPress,
+    onFocus: handleFocus,
+    needAppearance: false,
+    onBlur: handleBlur
+  }), value != '' && value ? /*#__PURE__*/React.createElement("span", {
+    className: style.icon,
+    onClick: handleBlur
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "ZD-close",
+    size: "19"
+  })) : null);
 }
 Search.propTypes = propTypes;
-Search.defaultProps = defaultProps; // if (__DOCS__) {
-//   Search.docs = {
-//     componentGroup: 'Header',
-//     folderName: 'Setup'
-//   };
-// }
+Search.defaultProps = defaultProps;