@zohodesk/dot 1.2.2 → 1.2.3

package/es/v1/svg/TemplateIcon.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { TemplateIcon_defaultProps } from '../../svg/props/defaultProps';
+import { TemplateIcon_propTypes } from '../../svg/props/propTypes';
+import SVG from '@zohodesk/svg/lib/SVG/SVG';
+export default class TemplateIcon extends React.Component {
+  render() {
+    let {
+      isRender,
+      isSymbol,
+      className
+    } = this.props;
+    return /*#__PURE__*/React.createElement(SVG, {
+      viewBox: "0 0 40 40",
+      name: "TemplateIcon",
+      isRender: isRender,
+      isSymbol: isSymbol,
+      className: className
+    }, /*#__PURE__*/React.createElement("path", {
+      d: "M33.09,3H6.91A3.91,3.91,0,0,0,3,6.91V33.09A3.91,3.91,0,0,0,6.91,37H33.09A3.91,3.91,0,0,0,37,33.09V6.91A3.92,3.92,0,0,0,33.09,3ZM6.91,5H33.09A1.92,1.92,0,0,1,35,6.91v4.62H5V6.91A1.92,1.92,0,0,1,6.91,5ZM33.09,35H6.91A1.92,1.92,0,0,1,5,33.09V13.53H35V33.09A1.92,1.92,0,0,1,33.09,35Z"
+    }), /*#__PURE__*/React.createElement("path", {
+      d: "M9.33,9.33A1.07,1.07,0,1,0,8.27,8.27,1.06,1.06,0,0,0,9.33,9.33Z"
+    }), /*#__PURE__*/React.createElement("path", {
+      d: "M13.6,9.33a1.07,1.07,0,1,0-1.07-1.06A1.06,1.06,0,0,0,13.6,9.33Z"
+    }), /*#__PURE__*/React.createElement("path", {
+      d: "M24.87,23H21V19.13a1,1,0,1,0-2,0V23H15.13a1,1,0,0,0,0,2H19v3.86a1,1,0,0,0,2,0V25h3.87a1,1,0,1,0,0-2Z"
+    }));
+  }
+
+}
+TemplateIcon.propTypes = TemplateIcon_propTypes;
+TemplateIcon.defaultProps = TemplateIcon_defaultProps; // if (__DOCS__) {
+//   TemplateIcon.docs = {
+//     componentGroup: 'SVG'
+//   };
+// }

package/es/v1/svg/index.js

@@ -0,0 +1,3 @@
+export { default as PlusIcon } from './PlusIcon';
+export { default as SnippetIcon } from './SnippetIcon';
+export { default as TemplateIcon } from './TemplateIcon';

package/es/v1/version2/alertIcons/index.js

@@ -0,0 +1,8 @@
+export { default as AlarmAlertIcon } from './AlarmAlertIcon';
+export { default as AlertIcons } from './AlertIcons';
+export { default as DangerAlertIcon } from './DangerAlertIcon';
+export { default as ErrorAlertIcon } from './ErrorAlertIcon';
+export { default as InfoAlertIcon } from './InfoAlertIcon';
+export { default as NotificationAlertIcon } from './NotificationAlertIcon';
+export { default as SuccessAlertIcon } from './SuccessAlertIcon';
+export { default as WarningAlertIcon } from './WarningAlertIcon';

package/es/v1/version2/index.js

@@ -0,0 +1,12 @@
+export { default as AlertClose } from './AlertClose/AlertClose';
+import * as _alertIcons from './alertIcons';
+export { _alertIcons as alertIcons };
+import * as _errorstate from './errorstate';
+export { _errorstate as errorstate };
+export { default as GlobalNotification } from './GlobalNotification/GlobalNotification';
+export { GlobalNotificationUI } from './GlobalNotification/GlobalNotification';
+export { GlobalNotificationNew } from './GlobalNotification/GlobalNotification';
+import * as _lookup from './lookup';
+export { _lookup as lookup };
+import * as _notification from './notification';
+export { _notification as notification };

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

@@ -0,0 +1,79 @@
+import React, { useRef } from 'react'; //AlertDependencies
+
+import { Container, Box } from '@zohodesk/components/lib/Layout';
+import AlertClose from '../../AlertClose/AlertClose';
+import AlertIcons from '../../alertIcons/AlertIcons'; //CSS
+
+import style from '../../../../version2/lookup/AlertHeader/css/AlertHeaderNew.module.css';
+import cssJSLogic from '../../../../version2/lookup/AlertHeader/css/cssJSLogic';
+import { mergeStyle } from '@zohodesk/utils'; //customHooks
+
+import useDragger from '../../../../Hooks/Dragger/useDragger'; //Props
+
+import defaultProps from '../../../../version2/lookup/AlertHeader/props/defaultProps';
+import propTypes from '../../../../version2/lookup/AlertHeader/props/propTypes';
+export default function AlertHeader(props) {
+  const {
+    title,
+    needIcon,
+    onClose,
+    closeTitle,
+    children,
+    breakChildren,
+    dataId,
+    type,
+    htmlId,
+    customStyle,
+    dragBoundaryLimit
+  } = props;
+  const finalStyle = mergeStyle(style, customStyle);
+  const {
+    alertHeaderContainerClass
+  } = cssJSLogic({
+    props,
+    style: finalStyle
+  });
+  const dragRef = useRef(null); //dragRef
+
+  useDragger({
+    isActive: true,
+    ChildRef: dragRef,
+    boundaryLimit: dragBoundaryLimit
+  }); //custom Hook
+
+  return /*#__PURE__*/React.createElement(Container, {
+    align: "vertical",
+    alignBox: "row",
+    className: `${alertHeaderContainerClass}`,
+    isCover: false,
+    wrap: "wrap",
+    "data-drag-hook": "true",
+    eleRef: dragRef
+  }, needIcon && /*#__PURE__*/React.createElement("div", {
+    className: finalStyle.iconContainer
+  }, /*#__PURE__*/React.createElement(AlertIcons, {
+    type: type
+  })), (title || children) && /*#__PURE__*/React.createElement(Box, {
+    flexible: true
+  }, /*#__PURE__*/React.createElement(Container, {
+    alignBox: "row",
+    wrap: breakChildren ? 'wrap' : null
+  }, title && /*#__PURE__*/React.createElement(Box, {
+    className: finalStyle.title,
+    shrink: true,
+    id: htmlId
+  }, title), children && /*#__PURE__*/React.createElement(Box, {
+    adjust: true,
+    flexible: true
+  }, children))), onClose && /*#__PURE__*/React.createElement(Box, {
+    className: style.close
+  }, /*#__PURE__*/React.createElement(AlertClose, {
+    onClose: onClose,
+    dataTitle: closeTitle,
+    dataId: `${dataId}_close`,
+    type: "light"
+  })));
+} //Props
+
+AlertHeader.propTypes = propTypes;
+AlertHeader.defaultProps = defaultProps;

package/es/v1/version2/lookup/AlertLookup/AlertLookup.js

@@ -10,9 +10,9 @@ import { useUniqueId } from '@zohodesk/components/lib/Provider/IdProvider';
 import Button from '@zohodesk/components/lib/Button/Button';
 import { Container, Box } from '@zohodesk/components/lib/Layout';
 import Lookup from '../../../lookup/Lookup/Lookup';
-import AlertHeader from '../../../../version2/lookup/AlertHeader/AlertHeader';
-import Section from '../../../../lookup/Section/Section';
-import FormAction from '../../../../FormAction/FormAction';
+import AlertHeader from '../AlertHeader/AlertHeader';
+import Section from '../../../lookup/Section/Section';
+import FormAction from '../../../FormAction/FormAction';
 /**** CSS ****/
 
 import style from '../../../../version2/lookup/AlertLookup/AlertLookupNew.module.css';
@@ -83,6 +83,8 @@ export default function AlertLookup(props) {
   let ariaMessageId = getAriaId();
   let ariaConfirmMsgId = getAriaId();
   let ariaTitleId = getAriaId();
+  let ariaLeaveButtonId = getAriaId();
+  let ariaStayButtonId = getAriaId();
   a11y = {
     ariaLabelledby: a11y && a11y.ariaLabelledby ? a11y.ariaLabelledby : ariaTitleId,
     ariaDescribedby: a11y && a11y.ariaDescribedby ? a11y.ariaDescribedby : ariaMessageId + ' ' + ariaConfirmMsgId
@@ -141,12 +143,22 @@ export default function AlertLookup(props) {
     customProps: {
       'data-a11y-autofocus': isDefaultFocus
     }
-  }, PrimaryButtonProps)), cancelText && /*#__PURE__*/React.createElement(Button, _extends({
+  }, PrimaryButtonProps, {
+    a11y: {
+      'aria-labelledby': ariaTitleId + ' ' + ariaMessageId + ' ' + ariaLeaveButtonId
+    },
+    id: ariaLeaveButtonId
+  })), cancelText && /*#__PURE__*/React.createElement(Button, _extends({
     dataId: dataId === 'alertPopup' ? 'alertCancelButton' : `${dataId}_cancelButton`,
     text: cancelText,
     onClick: onCancelClick,
     palette: "secondary"
-  }, SecondaryButtonProps))))) : null))));
+  }, SecondaryButtonProps, {
+    a11y: {
+      'aria-labelledby': ariaTitleId + ' ' + ariaMessageId + ' ' + ariaStayButtonId
+    },
+    id: ariaStayButtonId
+  }))))) : null))));
 }
 AlertLookup.propTypes = propTypes;
 AlertLookup.defaultProps = defaultProps;

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

@@ -0,0 +1,164 @@
+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); }
+
+import React, { useState } from 'react';
+import { defaultProps } from '../../../../version2/notification/DesktopNotification/props/defaultProps';
+import { propTypes, DesktopNotificationUI_propTypes } from '../../../../version2/notification/DesktopNotification/props/propTypes';
+import { Container, Box } from '@zohodesk/components/lib/Layout';
+import { useZIndex } from '@zohodesk/components/lib/Provider/ZindexProvider';
+import AutoClose from '../../../actions/AutoClose';
+import Button from '@zohodesk/components/lib/Button/Button';
+import FormAction from '../../../FormAction/FormAction';
+import DesktopNotificationHeader from '../DesktopNotificationHeader/DesktopNotificationHeader';
+import style from '../../../../version2/notification/DesktopNotification/DesktopNotification.module.css';
+let buttonPaletteObject = {
+  success: {
+    buttonPalette: 'successFilled'
+  },
+  error: {
+    buttonPalette: 'dangerFilled'
+  },
+  danger: {
+    buttonPalette: 'dangerFilled'
+  },
+  warning: {
+    buttonPalette: 'dangerFilled'
+  },
+  info: {
+    buttonPalette: 'primaryFilled'
+  },
+  notification: {
+    buttonPalette: 'primaryFilled'
+  }
+};
+export function DesktopNotificationUI(props) {
+  let {
+    type = '',
+    submitText,
+    cancelText,
+    submitType,
+    isMore,
+    message,
+    isAnimate,
+    getBottomContainer,
+    getSubmitContainer,
+    onSubmit,
+    onCancel,
+    dataId,
+    dataSelectorId,
+    isClose,
+    needAutoZindex,
+    title,
+    subTitle,
+    needIcon,
+    info,
+    secondaryInfo,
+    titleVariant,
+    getSectionContainer,
+    isShrinkView,
+    size,
+    onClose,
+    needClose,
+    customClass = {},
+    i18nKeys = {},
+    customProps
+  } = props;
+  let {
+    closeTitle = 'Close'
+  } = i18nKeys;
+  let {
+    containerClass
+  } = customClass;
+  let {
+    buttonPalette = 'dangerFilled'
+  } = buttonPaletteObject[type] || {};
+  let {
+    ExtraProps = {}
+  } = customProps;
+
+  function onClickSubmit(e) {
+    onSubmit && onSubmit();
+  }
+
+  function onClickCancel(e) {
+    onCancel && onCancel();
+  }
+
+  let animateClass = isClose ? style.rightanimate : style.leftanimate;
+  let animateRemoveClass = isClose ? style.rightanimate : style.leftnoanimate;
+  let getNextIndex = useZIndex();
+  let Zindex = isAnimate ? getNextIndex() : null;
+  let uiVariantOne = title && (info || secondaryInfo);
+  let uiVariantTwo = title && !(info || secondaryInfo) && !getSectionContainer;
+  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,
+    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;
+export default function DesktopNotification(props) {
+  return /*#__PURE__*/React.createElement(AutoClose, _extends({}, props, {
+    Element: DesktopNotificationUI
+  }));
+}
+DesktopNotification.propTypes = propTypes;
+DesktopNotification.defaultProps = defaultProps; // if (__DOCS__) {
+//   DesktopNotification.docs = {
+//     componentGroup: 'DesktopNotification',
+//     folderName: 'Alert'
+//   };
+// }

package/lib/TagWithIcon/props/propTypes.js

@@ -16,7 +16,7 @@ var propTypes = {
   title: _propTypes["default"].string,
   isBold: _propTypes["default"].bool,
   palette: _propTypes["default"].oneOf(['yellow', 'blue', 'grey']),
-  size: _propTypes["default"].oneOf('small', 'large'),
+  size: _propTypes["default"].oneOf(['small', 'large']),
   className: _propTypes["default"].string,
   text: _propTypes["default"].string,
   dataId: _propTypes["default"].string

package/lib/dropdown/ToggleDropDown/ToggleDropDown.js

@@ -921,12 +921,14 @@ var ToggleDropDown = /*#__PURE__*/function (_Component) {
 
 exports.ToggleDropDown = ToggleDropDown;
 ToggleDropDown.defaultProps = _defaultProps.defaultProps;
-ToggleDropDown.propTypes = _propTypes.propTypes; // if (__DOCS__) {
+ToggleDropDown.propTypes = _propTypes.propTypes;
+var ToggleDropDown_Component = (0, _Popup["default"])(ToggleDropDown);
+ToggleDropDown_Component.defaultProps = ToggleDropDown.defaultProps;
+ToggleDropDown_Component.propTypes = ToggleDropDown.propTypes; // if (__DOCS__) {
 //   ToggleDropDown.docs = {
 //     componentGroup: 'Molecule'
 //   };
 // }
 
-var _default = (0, _Popup["default"])(ToggleDropDown);
-
+var _default = ToggleDropDown_Component;
 exports["default"] = _default;

package/lib/form/fields/TagsMultiSelectField/TagsMultiSelectField.js

@@ -288,12 +288,15 @@ var TagsMultiSelectField = function TagsMultiSelectField(props) {
   }, ValidationMessageProps)));
 };
 
-var _default = (0, _Popup["default"])(TagsMultiSelectField);
-
-exports["default"] = _default;
 TagsMultiSelectField.propTypes = _propTypes.propTypes;
-TagsMultiSelectField.defaultProps = _defaultProps.defaultProps; // if (__DOCS__) {
+TagsMultiSelectField.defaultProps = _defaultProps.defaultProps;
+var TagsMultiSelectField_Component = (0, _Popup["default"])(TagsMultiSelectField);
+TagsMultiSelectField_Component.defaultProps = TagsMultiSelectField.defaultProps;
+TagsMultiSelectField_Component.propTypes = TagsMultiSelectField.propTypes; // if (__DOCS__) {
 //   TagsMultiSelectField.docs = {
 //     componentGroup: 'TagsMultiSelectField'
 //   };
-// }
+// }
+
+var _default = TagsMultiSelectField_Component;
+exports["default"] = _default;

package/lib/layout/SubtabLayout/props/propTypes.js

@@ -48,7 +48,7 @@ var SubtabContent_propTypes = {
 };
 exports.SubtabContent_propTypes = SubtabContent_propTypes;
 var SubtabLayout_propTypes = {
-  children: _propTypes["default"].oneOf([_propTypes["default"].element, _propTypes["default"].array]),
+  children: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].array]),
   dataId: _propTypes["default"].string
 };
 exports.SubtabLayout_propTypes = SubtabLayout_propTypes;

package/lib/list/status/StatusDropdown/StatusDropdown.js

@@ -535,7 +535,8 @@ var StatusDropdown = /*#__PURE__*/function (_React$Component) {
 exports.StatusDropdown = StatusDropdown;
 StatusDropdown.defaultProps = _defaultProps.defaultProps;
 StatusDropdown.propTypes = _propTypes.propTypes;
-
-var _default = (0, _Popup["default"])(StatusDropdown);
-
+var StatusDropdown_Component = (0, _Popup["default"])(StatusDropdown);
+StatusDropdown_Component.defaultProps = StatusDropdown.defaultProps;
+StatusDropdown_Component.propTypes = StatusDropdown.propTypes;
+var _default = StatusDropdown_Component;
 exports["default"] = _default;

package/lib/list/status/StatusDropdown/props/propTypes.js

@@ -30,5 +30,5 @@ var propTypes = (_propTypes = {
   idName: _propTypes2["default"].string,
   isArrow: _propTypes2["default"].bool,
   isDataLoaded: _propTypes2["default"].bool
-}, _defineProperty(_propTypes, "isDataLoaded", _propTypes2["default"].bool), _defineProperty(_propTypes, "isDisabled", _propTypes2["default"].bool), _defineProperty(_propTypes, "isEditable", _propTypes2["default"].bool), _defineProperty(_propTypes, "isNextOptions", _propTypes2["default"].bool), _defineProperty(_propTypes, "isPopupActive", _propTypes2["default"].bool), _defineProperty(_propTypes, "isPopupOpen", _propTypes2["default"].bool), _defineProperty(_propTypes, "isPopupReady", _propTypes2["default"].bool), _defineProperty(_propTypes, "isReadOnly", _propTypes2["default"].bool), _defineProperty(_propTypes, "isSearch", _propTypes2["default"].bool), _defineProperty(_propTypes, "keyName", _propTypes2["default"].string), _defineProperty(_propTypes, "left", _propTypes2["default"].number), _defineProperty(_propTypes, "needExternalPopupState", _propTypes2["default"].bool), _defineProperty(_propTypes, "needResponsive", _propTypes2["default"].bool), _defineProperty(_propTypes, "needTick", _propTypes2["default"].bool), _defineProperty(_propTypes, "onClick", _propTypes2["default"].func), _defineProperty(_propTypes, "onTogglePopup", _propTypes2["default"].func), _defineProperty(_propTypes, "options", _propTypes2["default"].array.isRequired), _defineProperty(_propTypes, "placeHolderText", _propTypes2["default"].string), _defineProperty(_propTypes, "position", _propTypes2["default"].string), _defineProperty(_propTypes, "removeClose", _propTypes2["default"].func), _defineProperty(_propTypes, "right", _propTypes2["default"].number), _defineProperty(_propTypes, "searchBoxSize", _propTypes2["default"].oneOf(['small', 'medium', 'xmedium'])), _defineProperty(_propTypes, "searchEmptyHint", _propTypes2["default"].string), _defineProperty(_propTypes, "searchErrorText", _propTypes2["default"].string), _defineProperty(_propTypes, "showIconOnHover", _propTypes2["default"].bool), _defineProperty(_propTypes, "showOnHover", _propTypes2["default"].bool), _defineProperty(_propTypes, "statusColor", _propTypes2["default"].string), _defineProperty(_propTypes, "targetAlign", _propTypes2["default"].oneOf(['vertical', 'horizontal', 'both', 'top', 'right', 'bottom', 'left', 'between', 'around'])), _defineProperty(_propTypes, "title", _propTypes2["default"].string), _defineProperty(_propTypes, "togglePopup", _propTypes2["default"].func), _defineProperty(_propTypes, "value", _propTypes2["default"].node), _defineProperty(_propTypes, "needMultiLineText", _propTypes2["default"].bool), _defineProperty(_propTypes, "onSelectLabel", _propTypes2["default"].func), _defineProperty(_propTypes, "top", _propTypes2["default"].number), _propTypes);
+}, _defineProperty(_propTypes, "isDataLoaded", _propTypes2["default"].bool), _defineProperty(_propTypes, "isDisabled", _propTypes2["default"].bool), _defineProperty(_propTypes, "isEditable", _propTypes2["default"].bool), _defineProperty(_propTypes, "isNextOptions", _propTypes2["default"].bool), _defineProperty(_propTypes, "isPopupActive", _propTypes2["default"].bool), _defineProperty(_propTypes, "isPopupOpen", _propTypes2["default"].bool), _defineProperty(_propTypes, "isPopupReady", _propTypes2["default"].bool), _defineProperty(_propTypes, "isReadOnly", _propTypes2["default"].bool), _defineProperty(_propTypes, "isSearch", _propTypes2["default"].bool), _defineProperty(_propTypes, "keyName", _propTypes2["default"].string), _defineProperty(_propTypes, "left", _propTypes2["default"].number), _defineProperty(_propTypes, "needExternalPopupState", _propTypes2["default"].bool), _defineProperty(_propTypes, "needResponsive", _propTypes2["default"].bool), _defineProperty(_propTypes, "needTick", _propTypes2["default"].bool), _defineProperty(_propTypes, "onClick", _propTypes2["default"].func), _defineProperty(_propTypes, "onTogglePopup", _propTypes2["default"].func), _defineProperty(_propTypes, "options", _propTypes2["default"].array.isRequired), _defineProperty(_propTypes, "placeHolderText", _propTypes2["default"].string), _defineProperty(_propTypes, "position", _propTypes2["default"].string), _defineProperty(_propTypes, "removeClose", _propTypes2["default"].func), _defineProperty(_propTypes, "right", _propTypes2["default"].number), _defineProperty(_propTypes, "searchBoxSize", _propTypes2["default"].oneOf(['small', 'medium', 'xmedium'])), _defineProperty(_propTypes, "searchEmptyHint", _propTypes2["default"].string), _defineProperty(_propTypes, "searchErrorText", _propTypes2["default"].string), _defineProperty(_propTypes, "showIconOnHover", _propTypes2["default"].bool), _defineProperty(_propTypes, "showOnHover", _propTypes2["default"].bool), _defineProperty(_propTypes, "statusColor", _propTypes2["default"].string), _defineProperty(_propTypes, "targetAlign", _propTypes2["default"].oneOf(['vertical', 'horizontal', 'both', 'top', 'right', 'bottom', 'left', 'between', 'around'])), _defineProperty(_propTypes, "title", _propTypes2["default"].string), _defineProperty(_propTypes, "togglePopup", _propTypes2["default"].func), _defineProperty(_propTypes, "value", _propTypes2["default"].node), _defineProperty(_propTypes, "needMultiLineText", _propTypes2["default"].bool), _defineProperty(_propTypes, "onSelectLabel", _propTypes2["default"].func), _defineProperty(_propTypes, "top", _propTypes2["default"].number), _defineProperty(_propTypes, "a11y", _propTypes2["default"].object), _propTypes);
 exports.propTypes = propTypes;

package/lib/lookup/header/ViewDropDown/ViewDropDown.js

@@ -209,7 +209,8 @@ var DropDown = /*#__PURE__*/function (_SelectComponent) {
 DropDown.propTypes = _propTypes.propTypes;
 DropDown.defaultProps = _defaultProps.defaultProps;
 var ViewDropDown = (0, _Popup["default"])(DropDown);
-ViewDropDown.defaultProps = DropDown.defaultProps; // if (__DOCS__) {
+ViewDropDown.defaultProps = DropDown.defaultProps;
+ViewDropDown.propTypes = DropDown.propTypes; // if (__DOCS__) {
 //   DropDown.docs = {
 //     componentGroup: 'Lookup'
 //   };

package/lib/setup/helptips/ListGroup/ListGroup.js

@@ -71,7 +71,7 @@ var ListGroup = /*#__PURE__*/function (_React$Component) {
         return /*#__PURE__*/_react["default"].createElement("li", {
           className: _ListGroupModule["default"].unOrderData,
           key: index
-        }, data);
+        }, text);
       }));
     }
   }]);

package/lib/v1/Attachment/Attachment.js

@@ -0,0 +1,140 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _defaultProps = require("../../Attachment/props/defaultProps");
+
+var _propTypes = require("../../Attachment/props/propTypes");
+
+var _icons = require("@zohodesk/icons");
+
+var _Layout = require("@zohodesk/components/lib/Layout");
+
+var _Link = _interopRequireDefault(require("../Link/Link"));
+
+var _AttachmentModule = _interopRequireDefault(require("../../Attachment/Attachment.module.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+var Attachment = /*#__PURE__*/function (_React$Component) {
+  _inherits(Attachment, _React$Component);
+
+  var _super = _createSuper(Attachment);
+
+  function Attachment() {
+    _classCallCheck(this, Attachment);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(Attachment, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          onClick = _this$props.onClick,
+          dataId = _this$props.dataId,
+          size = _this$props.size,
+          iconName = _this$props.iconName,
+          fileName = _this$props.fileName,
+          fileSize = _this$props.fileSize,
+          downloadLink = _this$props.downloadLink,
+          palette = _this$props.palette,
+          tooltip = _this$props.tooltip,
+          fileInfo = _this$props.fileInfo,
+          i18nKeys = _this$props.i18nKeys,
+          dataSelectorId = _this$props.dataSelectorId;
+      var _i18nKeys$downloadTit = i18nKeys.downloadTitle,
+          downloadTitle = _i18nKeys$downloadTit === void 0 ? 'Download' : _i18nKeys$downloadTit;
+      return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+        isInline: true,
+        className: "".concat(_AttachmentModule["default"].attachment, " ").concat(onClick ? _AttachmentModule["default"].attachmentHover : '', " ").concat(_AttachmentModule["default"]["palette_".concat(palette)], " ").concat(_AttachmentModule["default"][size]),
+        onClick: onClick,
+        dataId: dataId,
+        "data-title": tooltip,
+        alignBox: "row",
+        isCover: false,
+        dataSelectorId: dataSelectorId,
+        tabIndex: "0"
+      }, iconName ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        className: _AttachmentModule["default"].attachleft
+      }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+        align: "both"
+      }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
+        name: iconName,
+        iconClass: _AttachmentModule["default"].attachIcon
+      }))) : null, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        flexible: true,
+        className: _AttachmentModule["default"].attachright
+      }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+        align: "horizontal"
+      }, fileName ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        className: _AttachmentModule["default"].atatchName,
+        "data-title": fileName
+      }, fileName) : null, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        className: _AttachmentModule["default"].footer
+      }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+        alignBox: "row",
+        align: "baseline",
+        isCover: false
+      }, fileSize ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        className: _AttachmentModule["default"].attachSize,
+        adjust: true,
+        shrink: true,
+        "data-title": fileSize
+      }, fileSize) : null, fileInfo ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        className: _AttachmentModule["default"].dot
+      }), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        className: _AttachmentModule["default"].attachSize,
+        adjust: true,
+        shrink: true,
+        "data-title": fileInfo
+      }, fileInfo)) : null)))), downloadLink ? /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+        target: "_self",
+        href: downloadLink,
+        className: _AttachmentModule["default"].attachDownload,
+        title: downloadTitle,
+        hasReload: true
+      }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
+        name: "ZD-downloadNew",
+        iconClass: _AttachmentModule["default"].downIcon
+      })) : null);
+    }
+  }]);
+
+  return Attachment;
+}(_react["default"].Component);
+
+exports["default"] = Attachment;
+Attachment.propTypes = _propTypes.propTypes;
+Attachment.defaultProps = _defaultProps.defaultProps; // if (__DOCS__) {
+//   Attachment.docs = {
+//     componentGroup: 'Attachment'
+//   };
+// }