@zohodesk/dot 1.0.0-temp-175.6 → 1.0.0-temp-181

package/es/v1/GlobalNotification/GlobalNotification.js

@@ -7,28 +7,50 @@ import AutoClose from '../../actions/AutoClose';
 import AlertIcons from '../alert/alertIcons/AlertIcons';
 import AlertClose from '../alert/AlertClose/AlertClose';
 import { Container, Box } from '@zohodesk/components/es/v1/Layout';
+import { cancelBubblingEffect } from '@zohodesk/components/es/utils/Common';
 import style from '../../version2/GlobalNotification/GlobalNotification.module.css';
 export default function GlobalNotification(props) {
   let {
     type,
     message,
     hideMessage,
+    hideTime,
     onClick,
+    onClose,
+    needAutoClose,
     i18nKeys = {},
     customProps,
     dataSelectorId,
-    showMessage
+    id,
+    needShadow,
+    shadowCount,
+    eleRef
   } = props;
+  const hideMessageTimer = useRef(null);
+  const [shadowClose, setShadowClose] = useState(true);
   useEffect(() => {
-    if (!['danger', 'error', 'warning'].includes(type)) {
-      setTimeout(() => {
-        hideMessage();
-      }, 3000);
+    if (needAutoClose) {
+      hideMessageTimer.current = setTimeout(() => {
+        hideMessage(id);
+      }, hideTime);
     }
-  }, [showMessage, type]);
+
+    return () => {
+      if (hideMessageTimer.current) {
+        clearTimeout(hideMessageTimer.current);
+      }
+    };
+  }, []);
   let {
     closeTitle = 'Close'
   } = i18nKeys;
+
+  function onCloseLocal(e) {
+    setShadowClose(false);
+    hideMessage && hideMessage(id);
+    onClose && onClose(e);
+  }
+
   return /*#__PURE__*/React.createElement(GlobalNotificationUI, {
     type: type,
     message: message,
@@ -36,7 +58,12 @@ export default function GlobalNotification(props) {
     onClick: onClick,
     closeTitle: closeTitle,
     customProps: customProps,
-    dataSelectorId: dataSelectorId
+    dataSelectorId: dataSelectorId,
+    id: id,
+    shadowCount: shadowCount,
+    onClose: onCloseLocal,
+    needShadow: shadowClose && needShadow,
+    eleRef: eleRef
   });
 }
 GlobalNotification.propTypes = propTypes;
@@ -48,28 +75,33 @@ GlobalNotification.defaultProps = defaultProps; // if (__DOCS__) {
 // }
 
 export function GlobalNotificationUI(props) {
-  function onClose(e) {
-    let {
-      hideMessage,
-      onClose
-    } = props;
-    hideMessage && hideMessage(e);
-    onClose && onClose(e);
-  }
-
   let {
     type = '',
     message,
     onClick,
     closeTitle = '',
     customProps = {},
-    dataSelectorId
+    dataSelectorId,
+    shadowCount,
+    needShadow,
+    eleRef,
+    onClose
   } = props;
   let {
     ExtraProps = {}
   } = customProps;
+
+  function onCloseLocal(e) {
+    cancelBubblingEffect(e);
+    onClose && onClose(e);
+  }
+
   return /*#__PURE__*/React.createElement("div", _extends({
-    className: `${style.message} ${type ? style[type] : ''}`,
+    ref: eleRef,
+    className: ` ${style.message} 
+        ${needShadow && shadowCount >= 2 ? shadowCount > 2 ? `${style.stackShadowTwo} ${style.stackShadowOne}` : style.stackShadowOne : ''}
+        ${type ? style[type] : ''}
+      `,
     "data-id": `show_${type}_message`,
     "data-test-id": `show_${type}_message`,
     tabIndex: 0,
@@ -100,7 +132,7 @@ export function GlobalNotificationUI(props) {
   }, /*#__PURE__*/React.createElement(AlertClose, {
     dataId: `close_${type}_message`,
     dataTitle: closeTitle,
-    onClose: onClose,
+    onClose: onCloseLocal,
     type: type
   }))));
 }

package/es/v1/GlobalNotification/props/defaultProps.js

@@ -1,4 +1,6 @@
 export const defaultProps = {
   customProps: {},
-  dataSelectorId: 'globalNotification'
+  dataSelectorId: 'globalNotification',
+  needAutoClose: true,
+  hideTime: 3000
 };

package/es/v1/GlobalNotification/props/propTypes.js

@@ -9,7 +9,13 @@ export const propTypes = {
   i18nKeys: PropTypes.object,
   customProps: PropTypes.shape({
     ExtraProps: PropTypes.object
-  })
+  }),
+  id: PropTypes.number,
+  hideTime: PropTypes.number,
+  needAutoClose: PropTypes.bool,
+  isCollapseView: PropTypes.bool,
+  shadowCount: PropTypes.number,
+  needShadow: PropTypes.bool
 };
 export const UI_propTypes = {
   dataSelectorId: PropTypes.string,
@@ -21,7 +27,11 @@ export const UI_propTypes = {
   type: PropTypes.oneOf(['success', 'danger', 'info', 'warning', 'error']),
   customProps: PropTypes.shape({
     ExtraProps: PropTypes.object
-  })
+  }),
+  needShadow: PropTypes.bool,
+  shadowCount: PropTypes.number,
+  id: PropTypes.number,
+  onClose: PropTypes.func
 };
 export const new_propTypes = {
   Element: PropTypes.element,

package/es/v1/IconButton/IconButton.js

@@ -38,8 +38,8 @@ export default function IconButton(props) {
 
   function handleToggle(e) {
     if (e.key === ' ' || e.key === 'Enter' || e.key === 'Spacebar') {
-      e.preventDefault();
-      triggerClick(e);
+      e.preventDefault(); // triggerClick(e);
+
       triggerMouseDown(e);
     }
   }

package/es/v1/form/fields/SelectField/SelectField.js

@@ -11,8 +11,6 @@ import Select from '@zohodesk/components/es/v1/Select/Select';
 import ValidationMessage from '../ValidationMessage/ValidationMessage';
 import { useUniqueId } from '@zohodesk/components/es/v1/Provider/IdProvider';
 import FieldContainer from '../FieldContainer/FieldContainer';
-/**** props ****/
-
 /** CSS */
 
 import style from '../../../../form/fields/Fields.module.css';
@@ -84,13 +82,7 @@ const SelectField = props => {
 
   const handleGetRef = el => {
     getRef && getRef(el, id);
-  }; // handleLabelClick() {
-  //   let { isFocusOnLabelClick } = this.props;
-  //   if (isFocusOnLabelClick && this.selectBox && this.selectBox.focus) {
-  //     this.selectBox.focus();
-  //   }
-  // }
-
+  };
 
   return /*#__PURE__*/React.createElement("div", {
     className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,

package/es/v1/form/fields/TextBoxField/TextBoxField.js

@@ -1,7 +1,7 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 /**** Libraries ****/
-import React, { PureComponent } from 'react';
+import React, { memo } from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
 /**** Components ****/
@@ -9,156 +9,136 @@ import { propTypes } from './props/propTypes';
 import Label from '@zohodesk/components/es/v1/Label/Label';
 import TextBoxIcon from '@zohodesk/components/es/v1/TextBoxIcon/TextBoxIcon';
 import ValidationMessage from '../ValidationMessage/ValidationMessage';
-import { getUniqueId } from '@zohodesk/components/es/v1/Provider/IdProvider';
+import { useUniqueId } from '@zohodesk/components/es/v1/Provider/IdProvider';
 import FieldContainer from '../FieldContainer/FieldContainer';
 /**** CSS ****/
 
 import style from '../../../../form/fields/Fields.module.css';
-export default class TextBoxField extends PureComponent {
-  constructor(props) {
-    super(props);
-    this.handleChange = this.handleChange.bind(this);
-    this.handleGetRef = this.handleGetRef.bind(this); // this.handleLabelClick = this.handleLabelClick.bind(this);
 
-    this.getNextId = getUniqueId(this);
-  }
+const TextBoxField = props => {
+  const {
+    labelName,
+    id,
+    textBoxSize,
+    textBoxVariant,
+    textBoxType,
+    isMandatory,
+    validationMessage,
+    validationPalette,
+    maxLength,
+    isReadOnly,
+    value,
+    errorType,
+    isDisabled,
+    title,
+    onBlur,
+    dataId,
+    dataSelectorId,
+    validationRuleMessage,
+    validationRulePalette,
+    onKeyDown,
+    placeHolder,
+    infoText,
+    borderColor,
+    fieldSize,
+    labelPalette,
+    labelCustomClass,
+    htmlId,
+    lockedInfoText,
+    isLocked,
+    needReadOnlyStyle,
+    isClickable,
+    onFocus,
+    ePhiData,
+    children,
+    customProps,
+    renderLabelProps,
+    onChange,
+    getRef
+  } = props;
+  const {
+    LabelProps = {},
+    TextBoxIconProps = {},
+    ValidationMessageProps1 = {},
+    ValidationMessageProps2 = {}
+  } = customProps;
+  const getNextId = useUniqueId();
+  let uniqueId = htmlId ? htmlId : getNextId();
 
-  handleChange(value) {
-    let {
-      id,
-      onChange
-    } = this.props;
+  const handleChange = value => {
     onChange && onChange(id, value);
-  }
+  };
 
-  handleGetRef(el) {
-    let {
-      getRef,
-      id
-    } = this.props;
-    this.textBox = el;
+  const handleGetRef = el => {
     getRef && getRef(el, id);
-  } // handleLabelClick() {
-  //   // let { isFocusOnLabelClick } = this.props;
-  //   // if (isFocusOnLabelClick && this.textBox && this.textBox.focus) {
-  //   //   this.textBox.focus();
-  //   // }
-  // }
+  };
 
+  return /*#__PURE__*/React.createElement("div", {
+    className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
+    "data-title": isDisabled ? title : null,
+    "data-selector-id": dataSelectorId
+  }, labelName && /*#__PURE__*/React.createElement(FieldContainer, {
+    infoText: infoText,
+    isLocked: isLocked,
+    lockedInfoText: lockedInfoText,
+    ePhiData: ePhiData,
+    dataId: dataId,
+    renderProps: renderLabelProps
+  }, /*#__PURE__*/React.createElement(Label, _extends({
+    text: labelName,
+    size: fieldSize === 'small' ? 'small' : 'medium',
+    palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
+    customClass: `${style.fieldLabel} ${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
+    htmlFor: uniqueId,
+    dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`
+  }, LabelProps, {
+    id: labelName
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: `${style.fieldContainer} ${labelName ? style[`fieldMargin_${fieldSize}`] : ''}`
+  }, /*#__PURE__*/React.createElement(TextBoxIcon, _extends({
+    htmlId: uniqueId,
+    id: id,
+    type: textBoxType,
+    variant: textBoxVariant,
+    size: fieldSize === 'medium' ? textBoxSize : 'xsmall',
+    maxLength: maxLength,
+    isReadOnly: isReadOnly,
+    inputRef: handleGetRef,
+    value: value,
+    onChange: handleChange,
+    dataId: dataId,
+    onBlur: onBlur,
+    onKeyDown: onKeyDown,
+    placeHolder: placeHolder,
+    borderColor: borderColor,
+    onFocus: onFocus,
+    isDisabled: isDisabled,
+    needEffect: isReadOnly || isDisabled ? false : true,
+    isClickable: isClickable,
+    needReadOnlyStyle: needReadOnlyStyle
+  }, TextBoxIconProps, {
+    a11y: {
+      ariaLabelledby: labelName
+    }
+  }), children ? children : null), validationMessage && /*#__PURE__*/React.createElement(ValidationMessage, _extends({
+    text: validationMessage,
+    palette: validationPalette,
+    type: errorType,
+    dataId: `${dataId}_ValidationMessage`,
+    htmlFor: uniqueId
+  }, ValidationMessageProps1)), validationRuleMessage && /*#__PURE__*/React.createElement(ValidationMessage, _extends({
+    text: validationRuleMessage,
+    palette: validationRulePalette,
+    type: errorType,
+    htmlFor: uniqueId,
+    dataId: `${dataId}_ValidationRuleMessage`
+  }, ValidationMessageProps2))));
+};
 
-  render() {
-    let {
-      labelName,
-      id,
-      textBoxSize,
-      textBoxVariant,
-      textBoxType,
-      isMandatory,
-      validationMessage,
-      validationPalette,
-      maxLength,
-      isReadOnly,
-      value,
-      errorType,
-      isDisabled,
-      title,
-      onBlur,
-      dataId,
-      dataSelectorId,
-      validationRuleMessage,
-      validationRulePalette,
-      onKeyDown,
-      placeHolder,
-      infoText,
-      borderColor,
-      fieldSize,
-      labelPalette,
-      labelCustomClass,
-      htmlId,
-      lockedInfoText,
-      isLocked,
-      needReadOnlyStyle,
-      isClickable,
-      onFocus,
-      ePhiData,
-      children,
-      customProps,
-      renderLabelProps
-    } = this.props;
-    const {
-      LabelProps = {},
-      TextBoxIconProps = {},
-      ValidationMessageProps1 = {},
-      ValidationMessageProps2 = {}
-    } = customProps;
-    let uniqueId = htmlId ? htmlId : this.getNextId();
-    return /*#__PURE__*/React.createElement("div", {
-      className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
-      "data-title": isDisabled ? title : null,
-      "data-selector-id": dataSelectorId
-    }, labelName && /*#__PURE__*/React.createElement(FieldContainer, {
-      infoText: infoText,
-      isLocked: isLocked,
-      lockedInfoText: lockedInfoText,
-      ePhiData: ePhiData,
-      dataId: dataId,
-      renderProps: renderLabelProps
-    }, /*#__PURE__*/React.createElement(Label, _extends({
-      text: labelName,
-      size: fieldSize === 'small' ? 'small' : 'medium',
-      palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
-      customClass: `${style.fieldLabel} ${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
-      htmlFor: uniqueId,
-      dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`
-    }, LabelProps, {
-      id: labelName
-    }))), /*#__PURE__*/React.createElement("div", {
-      className: `${style.fieldContainer} ${labelName ? style[`fieldMargin_${fieldSize}`] : ''}`
-    }, /*#__PURE__*/React.createElement(TextBoxIcon, _extends({
-      htmlId: uniqueId,
-      id: id,
-      type: textBoxType,
-      variant: textBoxVariant,
-      size: fieldSize === 'medium' ? textBoxSize : 'xsmall',
-      maxLength: maxLength,
-      isReadOnly: isReadOnly,
-      inputRef: this.handleGetRef,
-      value: value,
-      onChange: this.handleChange,
-      dataId: dataId,
-      onBlur: onBlur,
-      onKeyDown: onKeyDown,
-      placeHolder: placeHolder,
-      borderColor: borderColor,
-      onFocus: onFocus,
-      isDisabled: isDisabled,
-      needEffect: isReadOnly || isDisabled ? false : true,
-      isClickable: isClickable,
-      needReadOnlyStyle: needReadOnlyStyle
-    }, TextBoxIconProps, {
-      a11y: {
-        ariaLabelledby: labelName
-      }
-    }), children ? children : null), validationMessage && /*#__PURE__*/React.createElement(ValidationMessage, _extends({
-      text: validationMessage,
-      palette: validationPalette,
-      type: errorType,
-      dataId: `${dataId}_ValidationMessage`,
-      htmlFor: uniqueId
-    }, ValidationMessageProps1)), validationRuleMessage && /*#__PURE__*/React.createElement(ValidationMessage, _extends({
-      text: validationRuleMessage,
-      palette: validationRulePalette,
-      type: errorType,
-      htmlFor: uniqueId,
-      dataId: `${dataId}_ValidationRuleMessage`
-    }, ValidationMessageProps2))));
-  }
-
-}
 TextBoxField.propTypes = propTypes;
-TextBoxField.defaultProps = defaultProps; // if (__DOCS__) {
-//   TextBoxField.docs = {
-//     componentGroup: 'Form Fields',
-//     folderName: 'General'
-//   };
-// }
+TextBoxField.defaultProps = defaultProps;
+const MemoizedTextBoxField = /*#__PURE__*/memo(TextBoxField);
+MemoizedTextBoxField.propTypes = propTypes;
+MemoizedTextBoxField.defaultProps = defaultProps;
+MemoizedTextBoxField.displayName = 'TextBoxField';
+export default TextBoxField;