@zohodesk/dot 1.1.0 → 1.2.1

package/lib/v1/AlphabeticList/AlphabeticList.js

@@ -0,0 +1,111 @@
+"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 = _interopRequireWildcard(require("react"));
+
+var _defaultProps = require("../../AlphabeticList/props/defaultProps");
+
+var _propTypes = require("../../AlphabeticList/props/propTypes");
+
+var _Layout = require("@zohodesk/components/lib/Layout");
+
+var _AlphabeticListModule = _interopRequireDefault(require("../../AlphabeticList/AlphabeticList.module.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/*** Libraries ***/
+
+/*** CSS ***/
+var AlphabeticListItemMemo = /*#__PURE__*/(0, _react.memo)(AlphabeticListItem);
+
+function AlphabeticList(props) {
+  var onSelect = props.onSelect,
+      selectedCharacter = props.selectedCharacter,
+      align = props.align,
+      type = props.type,
+      i18nKeys = props.i18nKeys,
+      dataId = props.dataId,
+      dataSelectorId = props.dataSelectorId;
+  var _i18nKeys$allText = i18nKeys.allText,
+      allText = _i18nKeys$allText === void 0 ? 'All' : _i18nKeys$allText,
+      _i18nKeys$allTitle = i18nKeys.allTitle,
+      allTitle = _i18nKeys$allTitle === void 0 ? 'All' : _i18nKeys$allTitle;
+  var alignType = align === 'vertical' ? _AlphabeticListModule["default"].column : _AlphabeticListModule["default"].row;
+  var letters = type == 'alphabeticalwithhash' ? _propTypes.AlphabeticCharactersWithHash : type == 'alphabetical' ? _propTypes.AlphabeticCharacters : _propTypes.NumberList;
+
+  var handleSelectAll = function handleSelectAll() {
+    onSelect && selectedCharacter != 'ALL' && onSelect('ALL');
+  };
+
+  var handleSelect = function handleSelect(id) {
+    onSelect && selectedCharacter !== id && onSelect(id);
+  };
+
+  return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+    tagName: "ul",
+    isCover: false,
+    alignBox: align === 'vertical' ? 'column' : 'row',
+    className: "".concat(_AlphabeticListModule["default"].container, " ").concat(alignType, " ").concat(type != 'alphabetical' ? _AlphabeticListModule["default"].numbers : ''),
+    dataId: "navigationDiv",
+    dataSelectorId: dataSelectorId
+  }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    tagName: "li",
+    className: "".concat(_AlphabeticListModule["default"].list, " ").concat(_AlphabeticListModule["default"].title, " ").concat(selectedCharacter === 'ALL' ? _AlphabeticListModule["default"].selected : ''),
+    dataId: "All_".concat(dataId)
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    onClick: handleSelectAll,
+    className: "".concat(_AlphabeticListModule["default"].heading, " ").concat(_AlphabeticListModule["default"].letter),
+    "data-title": allTitle
+  }, allText)), letters.map(function (letter) {
+    return /*#__PURE__*/_react["default"].createElement(AlphabeticListItemMemo, {
+      id: letter,
+      isActive: letter === selectedCharacter,
+      onClick: handleSelect,
+      text: letter,
+      key: letter,
+      dataId: dataId
+    });
+  }));
+}
+
+AlphabeticList.propTypes = _propTypes.AlphabeticList_propTypes;
+AlphabeticList.defaultProps = _defaultProps.AlphabeticList_defaultProps;
+
+function AlphabeticListItem(props) {
+  var isActive = props.isActive,
+      text = props.text,
+      dataId = props.dataId,
+      onClick = props.onClick,
+      id = props.id;
+
+  var handleClick = function handleClick() {
+    onClick && onClick(id);
+  };
+
+  return /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    flexible: true,
+    tagName: "li",
+    className: "".concat(_AlphabeticListModule["default"].list, " ").concat(isActive ? _AlphabeticListModule["default"].selected : ''),
+    onClick: handleClick,
+    dataId: "".concat(text, "_").concat(dataId)
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: _AlphabeticListModule["default"].letter
+  }, text));
+}
+
+AlphabeticListItem.propTypes = _propTypes.AlphabeticListItem_propTypes;
+AlphabeticListItem.defaultProps = _defaultProps.AlphabeticListItem_defaultProps;
+
+var _default = /*#__PURE__*/(0, _react.memo)(AlphabeticList);
+
+exports["default"] = _default;

package/lib/v1/ChannelIcon/ChannelIcon.js

@@ -0,0 +1,113 @@
+"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 = _interopRequireWildcard(require("react"));
+
+var _icons = require("@zohodesk/icons");
+
+var _Avatar = _interopRequireDefault(require("@zohodesk/components/lib/Avatar/Avatar"));
+
+var _AvatarIcon = _interopRequireDefault(require("../../avatar/AvatarIcon/AvatarIcon"));
+
+var _defaultProps = require("../../ChannelIcon/props/defaultProps");
+
+var _propTypes = require("../../ChannelIcon/props/propTypes");
+
+var _ChannelIconMapping = require("../../utils/ChannelIconMapping");
+
+var _ChannelIconModule = _interopRequireDefault(require("../../ChannelIcon/ChannelIcon.module.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var ChannelIcon = function ChannelIcon(props) {
+  var name = props.name,
+      action = props.action,
+      iconSize = props.iconSize,
+      iconTitle = props.iconTitle,
+      size = props.size,
+      topicIcon = props.topicIcon,
+      topicIconTitle = props.topicIconTitle,
+      topicIconSize = props.topicIconSize,
+      topicIconColor = props.topicIconColor,
+      iconClass = props.iconClass,
+      dataId = props.dataId,
+      className = props.className,
+      palette = props.palette,
+      textPalette = props.textPalette,
+      customTextClass = props.customTextClass,
+      iconColor = props.iconColor,
+      needTopicBorder = props.needTopicBorder,
+      topicClass = props.topicClass,
+      renderIconOnly = props.renderIconOnly,
+      iconName = props.iconName,
+      title = props.title,
+      dataSelectorId = props.dataSelectorId;
+  var defaultChannelObj = name && !iconName && (0, _ChannelIconMapping.getChannelMappingObj)()[name.toUpperCase()];
+  var customizedChannelName = null;
+
+  if (!defaultChannelObj) {
+    customizedChannelName = name;
+  } else {
+    iconName = defaultChannelObj[action];
+  }
+
+  return /*#__PURE__*/_react["default"].createElement("span", {
+    className: _ChannelIconModule["default"].container,
+    "data-selector-id": dataSelectorId
+  }, customizedChannelName ? /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
+    name: customizedChannelName,
+    size: size,
+    palette: palette,
+    textPalette: textPalette,
+    customClass: customTextClass,
+    dataId: dataId,
+    needTitle: title,
+    title: title
+  }) : !renderIconOnly ? iconName ? /*#__PURE__*/_react["default"].createElement(_AvatarIcon["default"], {
+    name: iconName,
+    iconSize: iconSize,
+    size: size,
+    iconClass: "".concat(_ChannelIconModule["default"].iconStyle, " ").concat(name && action ? _ChannelIconModule["default"]["".concat(name.toLowerCase(), "_").concat(action.toLowerCase())] : '', " ").concat(iconClass ? iconClass : '', " "),
+    dataId: dataId,
+    className: className,
+    iconColor: iconColor,
+    title: iconTitle
+  }) : /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
+    name: name,
+    size: size,
+    palette: palette,
+    textPalette: textPalette,
+    customClass: customTextClass,
+    needTitle: title,
+    title: title
+  }) : /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
+    name: iconName,
+    size: iconSize,
+    iconClass: "".concat(iconClass ? iconClass : '', " ").concat(_ChannelIconModule["default"].iconStyle, " ").concat(name && action ? _ChannelIconModule["default"]["".concat(name.toLowerCase(), "_").concat(action.toLowerCase())] : ''),
+    title: iconTitle,
+    dataId: dataId
+  }), topicIcon ? /*#__PURE__*/_react["default"].createElement("span", {
+    className: "".concat(_ChannelIconModule["default"].thread, " ").concat(needTopicBorder ? _ChannelIconModule["default"].threadBorder : '', " ").concat(topicClass ? topicClass : ''),
+    "data-title": topicIconTitle
+  }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
+    name: topicIcon,
+    size: topicIconSize,
+    iconClass: _ChannelIconModule["default"]["topic_".concat(topicIconColor)] ? "".concat(_ChannelIconModule["default"].topicIcon, " ").concat(_ChannelIconModule["default"]["topic_".concat(topicIconColor)]) : '',
+    dataId: dataId
+  })) : null);
+};
+
+ChannelIcon.defaultProps = _defaultProps.defaultProps;
+ChannelIcon.propTypes = _propTypes.propTypes;
+var _default = ChannelIcon;
+exports["default"] = _default;

package/lib/v1/Drawer/Drawer.js

@@ -0,0 +1,302 @@
+"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.Content = Content;
+exports.Footer = Footer;
+exports.Header = Header;
+exports["default"] = Drawer;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _defaultProps = require("../../Drawer/props/defaultProps");
+
+var _propTypes = require("../../Drawer/props/propTypes");
+
+var _Layout = require("@zohodesk/components/lib/Layout");
+
+var _Card = require("@zohodesk/components/lib/Card");
+
+var _VelocityAnimationGroup = _interopRequireDefault(require("@zohodesk/components/lib/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup"));
+
+var _CustomResponsive = require("@zohodesk/components/lib/Responsive/CustomResponsive");
+
+var _icons = require("@zohodesk/icons");
+
+var _ZindexProvider = require("@zohodesk/components/lib/Provider/ZindexProvider");
+
+var _FocusScope = _interopRequireDefault(require("@zohodesk/a11y/es/FocusScope/FocusScope"));
+
+var _Heading = _interopRequireDefault(require("@zohodesk/components/lib/Heading/Heading"));
+
+var _FreezeLayer = _interopRequireDefault(require("../../FreezeLayer/FreezeLayer"));
+
+var _FormAction = _interopRequireDefault(require("../FormAction/FormAction"));
+
+var _IconButton = _interopRequireDefault(require("../IconButton/IconButton"));
+
+var _DrawerModule = _interopRequireDefault(require("../../Drawer/Drawer.module.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function Header(props) {
+  var title = props.title,
+      onClose = props.onClose,
+      children = props.children,
+      className = props.className,
+      paddingSize = props.paddingSize,
+      closeTitle = props.closeTitle,
+      iconName = props.iconName,
+      iconSize = props.iconSize,
+      onIconClick = props.onIconClick,
+      isIconBold = props.isIconBold,
+      dataId = props.dataId,
+      flexible = props.flexible,
+      getChildren = props.getChildren,
+      iconTitle = props.iconTitle,
+      isBoxIcon = props.isBoxIcon,
+      getTitleChildren = props.getTitleChildren;
+  return /*#__PURE__*/_react["default"].createElement(_Card.CardHeader, {
+    customClass: "".concat(_DrawerModule["default"].header, " ").concat(_DrawerModule["default"]["".concat(paddingSize, "HeaderPadding")], " ").concat(className ? className : ''),
+    dataId: dataId
+  }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+    alignBox: "row",
+    align: "vertical",
+    isCover: false,
+    className: _DrawerModule["default"].subheader
+  }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    flexible: true,
+    shrink: true
+  }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+    alignBox: "row",
+    isCover: false,
+    align: "vertical"
+  }, iconName ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    className: _DrawerModule["default"].iconWrapper
+  }, isBoxIcon ? /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+    iconName: iconName,
+    iconSize: iconSize,
+    onClick: onIconClick,
+    hoverType: "border",
+    isBold: isIconBold,
+    title: iconTitle
+  }) : /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
+    name: iconName,
+    size: iconSize,
+    onClick: onIconClick,
+    title: iconTitle
+  })) : null, title || getTitleChildren ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    flexible: flexible,
+    shrink: true
+  }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+    alignBox: "row",
+    align: "vertical"
+  }, title ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    "data-title": title,
+    shrink: true
+  }, /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
+    title: title,
+    className: _DrawerModule["default"].title,
+    a11y: {
+      tabindex: '0'
+    }
+  })) : null, getTitleChildren ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, getTitleChildren()) : null)) : null, children ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, children) : null)), onClose ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+    onClick: onClose,
+    dataId: "closeButton",
+    title: closeTitle,
+    iconName: "ZD-cross",
+    iconSize: "11",
+    a11y: {
+      ariaLabel: 'Close'
+    }
+  })) : null), getChildren ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+    isCover: false
+  }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    flexible: true
+  }, getChildren())) : null);
+}
+
+Header.propTypes = _propTypes.Header_propTypes;
+Header.defaultProps = _defaultProps.Header_defaultProps;
+
+function Content(props) {
+  var children = props.children,
+      className = props.className,
+      paddingSize = props.paddingSize,
+      eleRef = props.eleRef;
+  return /*#__PURE__*/_react["default"].createElement(_Card.CardContent, {
+    scroll: "vertical",
+    isScrollAttribute: true,
+    customClass: "".concat(className ? className : '', " ").concat(paddingSize ? _DrawerModule["default"]["".concat(paddingSize, "ContentPadding")] : ''),
+    eleRef: eleRef
+  }, children);
+}
+
+Content.propTypes = _propTypes.Content_propTypes;
+
+function Footer(props) {
+  var paddingLeftSize = props.paddingLeftSize,
+      paddingRightClass = props.paddingRightClass,
+      children = props.children,
+      size = props.size;
+  return /*#__PURE__*/_react["default"].createElement(_FormAction["default"], {
+    size: size,
+    paddingLeftSize: paddingLeftSize,
+    paddingRightClass: paddingRightClass
+  }, children);
+}
+
+Footer.propTypes = _propTypes.Footer_propTypes;
+Footer.defaultProps = _defaultProps.Footer_defaultProps;
+
+function Drawer(props) {
+  var contentRef = (0, _react.useRef)(null);
+  var getNextIndex = (0, _ZindexProvider.useZIndex)();
+
+  function drawers(uptoTablet, styleByResolutions) {
+    var children = props.children,
+        size = props.size,
+        paddingSize = props.paddingSize,
+        subDrawerActive = props.subDrawerActive,
+        subDrawerChildren = props.subDrawerChildren,
+        onBodyClick = props.onBodyClick,
+        onClose = props.onClose,
+        needFocusScope = props.needFocusScope,
+        customProps = props.customProps;
+    var _customProps$focusSco = customProps.focusScopeProps,
+        focusScopeProps = _customProps$focusSco === void 0 ? {} : _customProps$focusSco;
+    var _focusScopeProps$auto = focusScopeProps.autoFocus,
+        autoFocus = _focusScopeProps$auto === void 0 ? true : _focusScopeProps$auto,
+        _focusScopeProps$rest = focusScopeProps.restoreFocus,
+        restoreFocus = _focusScopeProps$rest === void 0 ? true : _focusScopeProps$rest,
+        _focusScopeProps$need = focusScopeProps.needArrowLoop,
+        needArrowLoop = _focusScopeProps$need === void 0 ? false : _focusScopeProps$need,
+        _focusScopeProps$need2 = focusScopeProps.needTabLoop,
+        needTabLoop = _focusScopeProps$need2 === void 0 ? true : _focusScopeProps$need2,
+        _focusScopeProps$enab = focusScopeProps.enableEnterAction,
+        enableEnterAction = _focusScopeProps$enab === void 0 ? false : _focusScopeProps$enab;
+
+    var childrenWithProps = _react["default"].Children.map(children, function (child) {
+      if (child.type === Header || child.type === Footer || child.type === Content) {
+        var _ref = child.props || {},
+            childPaddingSize = _ref.paddingSize;
+
+        return paddingSize || childPaddingSize ? /*#__PURE__*/_react["default"].cloneElement(child, {
+          paddingSize: childPaddingSize ? childPaddingSize : paddingSize
+        }) : child;
+      }
+
+      return child;
+    });
+
+    var content = /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      className: "".concat(_DrawerModule["default"].container, " ").concat(_DrawerModule["default"].columns, " ").concat(_DrawerModule["default"].drawerModal, " ").concat(uptoTablet ? _DrawerModule["default"].mbleSize : _DrawerModule["default"][size]),
+      "data-a11y-need-focus-style": "false",
+      tabindex: -1,
+      eleRef: contentRef
+    }, /*#__PURE__*/_react["default"].createElement(_Card.Card, {
+      onClick: function onClick(e) {
+        e && e.stopPropagation && e.stopPropagation();
+        onBodyClick(e);
+      }
+    }, childrenWithProps));
+
+    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, subDrawerChildren ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      className: _DrawerModule["default"].columns
+    }, /*#__PURE__*/_react["default"].createElement(_VelocityAnimationGroup["default"], {
+      name: "slideRight",
+      isActive: subDrawerActive
+    }, /*#__PURE__*/_react["default"].createElement(_CustomResponsive.ResponsiveSender, null, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+      className: styleByResolutions,
+      onClick: function onClick(e) {
+        e && e.stopPropagation && e.stopPropagation();
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      flexible: true
+    }, subDrawerChildren))))) : null, needFocusScope ? /*#__PURE__*/_react["default"].createElement(_FocusScope["default"], {
+      elementRef: contentRef,
+      autoFocus: autoFocus,
+      needTabLoop: needTabLoop,
+      restoreFocus: restoreFocus,
+      needArrowLoop: needArrowLoop,
+      onClose: onClose,
+      enableEnterAction: enableEnterAction
+    }, content) : content);
+  }
+
+  function responsiveFunc(_ref2) {
+    var mediaQueryOR = _ref2.mediaQueryOR;
+    return {
+      uptoTablet: mediaQueryOR([{
+        maxWidth: 768
+      }])
+    };
+  }
+
+  var needFreeze = props.needFreeze,
+      palette = props.palette,
+      isActive = props.isActive,
+      onClose = props.onClose,
+      forwardRef = props.forwardRef,
+      responsiveId = props.responsiveId,
+      subDrawerSize = props.subDrawerSize,
+      subDrawerClass = props.subDrawerClass,
+      subDrawerActive = props.subDrawerActive,
+      customClass = props.customClass,
+      needAutoZindex = props.needAutoZindex,
+      innerPortalName = props.innerPortalName;
+  return /*#__PURE__*/_react["default"].createElement(_CustomResponsive.ResponsiveReceiver, {
+    query: responsiveFunc,
+    responsiveId: responsiveId
+  }, function (_ref3) {
+    var uptoTablet = _ref3.uptoTablet;
+    var styleByResolutions = "".concat(subDrawerClass, " ").concat(_DrawerModule["default"].secondDrawer, " ").concat(uptoTablet ? "".concat(_DrawerModule["default"].secondMobDrawer, " ").concat(_DrawerModule["default"].mbleSize) : "".concat(_DrawerModule["default"][subDrawerSize]), " ");
+    return needFreeze ? /*#__PURE__*/_react["default"].createElement(_FreezeLayer["default"], {
+      onClick: onClose,
+      isActive: isActive,
+      animationName: "fade",
+      childAnimationName: "slideRight",
+      palette: palette,
+      forwardRef: forwardRef,
+      customClass: customClass,
+      needAutoZindex: needAutoZindex
+    }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      flexible: true
+    }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+      alignBox: "row"
+    }, /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, uptoTablet ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      flexible: true
+    }) : null, /*#__PURE__*/_react["default"].createElement(_CustomResponsive.ResponsiveSender, null, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      flexible: true,
+      className: uptoTablet ? _DrawerModule["default"].mobModal : _DrawerModule["default"].drawerModal
+    }, !subDrawerActive && innerPortalName ? /*#__PURE__*/_react["default"].createElement("div", {
+      "data-portal": innerPortalName
+    }) : null)), drawers(uptoTablet, styleByResolutions))))) : /*#__PURE__*/_react["default"].createElement(_VelocityAnimationGroup["default"], {
+      isActive: isActive,
+      name: "slideRight"
+    }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+      align: "right",
+      alignBox: "row",
+      scroll: "none",
+      eleRef: forwardRef,
+      className: "".concat(_DrawerModule["default"].isOverlay, " ").concat(customClass),
+      style: isActive && needAutoZindex ? {
+        zIndex: "".concat(getNextIndex())
+      } : {}
+    }, drawers(uptoTablet, styleByResolutions)));
+  });
+}
+
+Drawer.propTypes = _propTypes.Drawer_propTypes;
+Drawer.defaultProps = _defaultProps.Drawer_defaultProps; // if (__DOCS__) {
+//   Drawer.docs = {
+//     componentGroup: 'Template'
+//   };
+// }

package/lib/v1/ExternalLink/ExternalLink.js

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _defaultProps = require("../../ExternalLink/props/defaultProps");
+
+var _propTypes = require("../../ExternalLink/props/propTypes");
+
+var _ExternalLinkModule = _interopRequireDefault(require("../../ExternalLink/ExternalLink.module.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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); }
+
+var ExternalLink = function ExternalLink(props) {
+  var href = props.href,
+      title = props.title,
+      target = props.target,
+      className = props.className,
+      children = props.children,
+      rel = props.rel,
+      dataId = props.dataId,
+      onClick = props.onClick,
+      customProps = props.customProps;
+
+  var addHttp = function addHttp(url) {
+    var regEx = new RegExp(/(^(ftp|https|mailto|tel|http|simplehelp|dynamicsnav?):)/i);
+
+    if (!regEx.test(url)) {
+      return "http://".concat(url);
+    }
+
+    return url;
+  };
+
+  var urlOutput = href && typeof href !== 'boolean' ? addHttp(String(href)) : 'javascript:void(0);';
+  return /*#__PURE__*/_react["default"].createElement("a", _extends({
+    href: urlOutput,
+    target: target,
+    className: "".concat(_ExternalLinkModule["default"].link, " ").concat(className ? className : ''),
+    "data-title": title,
+    rel: rel,
+    "data-id": dataId,
+    "data-test-id": dataId,
+    onClick: onClick
+  }, customProps), children);
+};
+
+ExternalLink.defaultProps = _defaultProps.defaultProps;
+ExternalLink.propTypes = _propTypes.propTypes;
+var _default = ExternalLink;
+exports["default"] = _default;