@zohodesk/dot 1.1.0 → 1.2.0

package/lib/v1/ActionButton/ActionButton.js

@@ -0,0 +1,156 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _defaultProps = require("../../ActionButton/props/defaultProps");
+
+var _propTypes = require("../../ActionButton/props/propTypes");
+
+var _Popup = _interopRequireDefault(require("@zohodesk/components/lib/Popup/Popup"));
+
+var _icons = require("@zohodesk/icons");
+
+var _Button = _interopRequireDefault(require("@zohodesk/components/lib/Button/Button"));
+
+var _Layout = require("@zohodesk/components/lib/Layout");
+
+var _ResponsiveDropBox = _interopRequireDefault(require("@zohodesk/components/lib/ResponsiveDropBox/ResponsiveDropBox"));
+
+var _CssProvider = _interopRequireDefault(require("@zohodesk/components/lib/Provider/CssProvider"));
+
+var _semanticButtonModule = _interopRequireDefault(require("@zohodesk/components/lib/semantic/Button/semanticButton.module.css"));
+
+var _ActionButtonModule = _interopRequireDefault(require("../../ActionButton/ActionButton.module.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function ActionButton(props) {
+  var isLoading = props.isLoading,
+      onClick = props.onClick,
+      size = props.size,
+      dataId = props.dataId,
+      dataSelectorId = props.dataSelectorId,
+      isArrow = props.isArrow,
+      text = props.text,
+      subText = props.subText,
+      arrowBoxSize = props.arrowBoxSize,
+      palette = props.palette,
+      onHover = props.onHover,
+      position = props.position,
+      className = props.className,
+      iconName = props.iconName,
+      iconSize = props.iconSize,
+      dataTitle = props.dataTitle,
+      isDisabled = props.isDisabled,
+      isPopupOpen = props.isPopupOpen,
+      removeClose = props.removeClose,
+      children = props.children,
+      dropBoxClass = props.dropBoxClass,
+      isBoxPaddingNeed = props.isBoxPaddingNeed,
+      getContainerRef = props.getContainerRef,
+      getTargetRef = props.getTargetRef,
+      removeChildrenTooltip = props.removeChildrenTooltip,
+      innerClassName = props.innerClassName,
+      popupGroup = props.popupGroup,
+      togglePopup = props.togglePopup,
+      defaultPosition = props.defaultPosition;
+
+  var handleTogglePopup = function handleTogglePopup(e) {
+    togglePopup(e, defaultPosition);
+  };
+
+  return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+    alignBox: "row",
+    isCover: false,
+    className: " ".concat(_ActionButtonModule["default"].container, " ").concat(_ActionButtonModule["default"][palette + 'Box'], " ").concat(_ActionButtonModule["default"][size], " ").concat(className, " ").concat(isDisabled ? (0, _CssProvider["default"])('isDisabled') : '', " ").concat(!onClick ? _ActionButtonModule["default"].wholeDiv : '', " "),
+    onClick: onHover ? removeClose : !onClick ? handleTogglePopup : undefined,
+    onMouseEnter: !onClick ? onHover && handleTogglePopup : undefined,
+    onMouseLeave: !onClick ? onHover && handleTogglePopup : undefined,
+    eleRef: getTargetRef,
+    dataSelectorId: dataSelectorId
+  }, isLoading ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    flexible: true
+  }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    status: "loading",
+    palette: palette,
+    size: "medium",
+    customClass: {
+      customButton: _ActionButtonModule["default"].btn
+    },
+    text: text
+  })) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    flexible: true,
+    onClick: onClick,
+    dataId: dataId,
+    className: "".concat(_semanticButtonModule["default"].buttonReset, " ").concat(_ActionButtonModule["default"].contentBox, " ").concat(_ActionButtonModule["default"][palette + 'Btn'], " ").concat(_ActionButtonModule["default"][size + '_btnBox'], " ").concat(children ? _ActionButtonModule["default"].contentBoxBdr : _ActionButtonModule["default"].contentBoxBdrRds, " ").concat(_ActionButtonModule["default"].clickable, " ").concat(innerClassName, " "),
+    "data-title": dataTitle,
+    tagName: "button",
+    tabIndex: "0"
+  }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+    align: "both"
+  }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    className: _ActionButtonModule["default"].contentwrapper
+  }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+    isCover: false,
+    alignBox: "row",
+    align: "vertical"
+  }, iconName ? /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
+    name: iconName,
+    size: iconSize,
+    iconClass: "".concat(_ActionButtonModule["default"].iconClr, " ").concat(text ? _ActionButtonModule["default"].iconMrgn : '')
+  }) : null, text ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    shrink: true,
+    className: _ActionButtonModule["default"].txt,
+    "data-title": removeChildrenTooltip ? null : text
+  }, text) : null)), subText ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    "data-title": removeChildrenTooltip ? null : subText,
+    className: _ActionButtonModule["default"].subTxt
+  }, subText) : null)), children ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    onClick: onClick ? !onHover && handleTogglePopup : undefined,
+    onMouseEnter: onClick ? onHover && handleTogglePopup : undefined,
+    onMouseLeave: onClick ? onHover && handleTogglePopup : undefined,
+    className: "".concat(_semanticButtonModule["default"].buttonReset, " ").concat(_ActionButtonModule["default"][arrowBoxSize + '_arrowBox'], " ").concat(_ActionButtonModule["default"][palette + 'Arw'], "  ").concat(_ActionButtonModule["default"].arrowWrapper, " ").concat(isPopupOpen ? _ActionButtonModule["default"].arrowActive : ''),
+    dataId: "".concat(dataId, "_arrowButton"),
+    tabIndex: "0",
+    tagName: "button",
+    dataSelectorId: "".concat(dataSelectorId, "_arrowButton")
+  }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+    align: "both"
+  }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
+    name: "ZD-down",
+    size: "6",
+    iconClass: _ActionButtonModule["default"].arrow
+  })), isPopupOpen ? /*#__PURE__*/_react["default"].createElement(_ResponsiveDropBox["default"], {
+    size: "small",
+    isActive: isPopupOpen,
+    boxPosition: position,
+    isAnimate: true,
+    isArrow: isArrow,
+    customClass: {
+      customDropBoxWrap: dropBoxClass
+    },
+    isBoxPaddingNeed: isBoxPaddingNeed,
+    getRef: getContainerRef,
+    popupGroup: popupGroup,
+    needFocusScope: true,
+    onClose: handleTogglePopup
+  }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    flexible: true,
+    shrink: true,
+    scroll: "vertical"
+  }, children)) : null) : null));
+}
+
+ActionButton.defaultProps = _defaultProps.defaultProps;
+ActionButton.propTypes = _propTypes.propTypes; // ActionButton.docs = {
+//   componentGroup: 'Atom'
+// };
+
+var _default = (0, _Popup["default"])(ActionButton);
+
+exports["default"] = _default;

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/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'
+//   };
+// }