@zohodesk/dot 1.0.0-beta.27 → 1.0.0-beta.271

package/es/Drawer/Drawer.js

@@ -1,368 +1,288 @@
-import _Object$getPrototypeOf from 'babel-runtime/core-js/object/get-prototype-of';
-import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
-import _createClass from 'babel-runtime/helpers/createClass';
-import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
-import _inherits from 'babel-runtime/helpers/inherits';
 import React from 'react';
-import PropTypes from 'prop-types';
+import { Header_defaultProps, Footer_defaultProps, Drawer_defaultProps } from './props/defaultProps';
+import { Header_propTypes, Content_propTypes, Footer_propTypes, Drawer_propTypes } from './props/propTypes';
 import FreezeLayer from '../FreezeLayer/FreezeLayer';
 import { Container, Box } from '@zohodesk/components/lib/Layout';
-import Icon from '@zohodesk/icons/lib/Icon';
 import { Card, CardHeader, CardContent } from '@zohodesk/components/lib/Card';
 import FormAction from '../FormAction/FormAction';
 import VelocityAnimationGroup from '@zohodesk/components/lib/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup';
-import { ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/Responsive';
+import { ResponsiveSender, ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/CustomResponsive';
+import Heading from '@zohodesk/components/lib/Heading/Heading';
 import IconButton from '../IconButton/IconButton';
+import { Icon } from '@zohodesk/icons';
+import { getZIndex } from '@zohodesk/components/lib/Provider/ZindexProvider';
 import style from './Drawer.module.css';
-export var Header = function (_React$Component) {
-  _inherits(Header, _React$Component);
-
-  function Header() {
-    _classCallCheck(this, Header);
-
-    return _possibleConstructorReturn(this, (Header.__proto__ || _Object$getPrototypeOf(Header)).apply(this, arguments));
+import FocusScope from '@zohodesk/a11y/es/FocusScope/FocusScope';
+export class Header extends React.Component {
+  render() {
+    let {
+      title,
+      onClose,
+      children,
+      className,
+      paddingSize,
+      closeTitle,
+      iconName,
+      iconSize,
+      onIconClick,
+      isIconBold,
+      dataId,
+      flexible,
+      getChildren,
+      iconTitle,
+      isBoxIcon,
+      getTitleChildren
+    } = this.props;
+    return /*#__PURE__*/React.createElement(CardHeader, {
+      customClass: `${style.header} ${style[`${paddingSize}HeaderPadding`]} ${className ? className : ''}`,
+      dataId: dataId
+    }, /*#__PURE__*/React.createElement(Container, {
+      alignBox: "row",
+      align: "vertical",
+      isCover: false,
+      className: style.subheader
+    }, /*#__PURE__*/React.createElement(Box, {
+      flexible: true,
+      shrink: true
+    }, /*#__PURE__*/React.createElement(Container, {
+      alignBox: "row",
+      isCover: false,
+      align: "vertical"
+    }, iconName ? /*#__PURE__*/React.createElement(Box, {
+      className: style.iconWrapper
+    }, isBoxIcon ? /*#__PURE__*/React.createElement(IconButton, {
+      iconName: iconName,
+      iconSize: iconSize,
+      onClick: onIconClick,
+      hoverType: "border",
+      isBold: isIconBold,
+      title: iconTitle
+    }) : /*#__PURE__*/React.createElement(Icon, {
+      name: iconName,
+      size: iconSize,
+      onClick: onIconClick,
+      title: iconTitle
+    })) : null, title || getTitleChildren ? /*#__PURE__*/React.createElement(Box, {
+      flexible: flexible,
+      shrink: true
+    }, /*#__PURE__*/React.createElement(Container, {
+      alignBox: "row",
+      align: "vertical"
+    }, title ? /*#__PURE__*/React.createElement(Box, {
+      "data-title": title,
+      shrink: true
+    }, /*#__PURE__*/React.createElement(Heading, {
+      title: title,
+      className: style.title,
+      a11y: {
+        tabindex: '0'
+      }
+    })) : null, getTitleChildren ? /*#__PURE__*/React.createElement(Box, null, getTitleChildren()) : null)) : null, children ? /*#__PURE__*/React.createElement(Box, null, children) : null)), onClose ? /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(IconButton, {
+      onClick: onClose,
+      dataId: "closeButton",
+      title: closeTitle,
+      iconName: "ZD-cross",
+      iconSize: "11",
+      a11y: {
+        ariaLabel: 'Close'
+      }
+    })) : null), getChildren ? /*#__PURE__*/React.createElement(Container, {
+      isCover: false
+    }, /*#__PURE__*/React.createElement(Box, {
+      flexible: true
+    }, getChildren())) : null);
   }
 
-  _createClass(Header, [{
-    key: 'render',
-    value: function render() {
-      var _props = this.props,
-          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;
-
-      return React.createElement(
-        CardHeader,
-        {
-          className: style.header + ' ' + style[paddingSize + 'HeaderPadding'] + ' ' + (className ? className : ''),
-          dataId: dataId
-        },
-        React.createElement(
-          Container,
-          {
-            alignBox: 'row',
-            align: 'vertical',
-            isCover: false,
-            className: style.subheader
-          },
-          React.createElement(
-            Box,
-            { flexible: true, shrink: true },
-            React.createElement(
-              Container,
-              { alignBox: 'row', isCover: false, align: 'vertical' },
-              iconName ? React.createElement(
-                Box,
-                { className: style.icon },
-                React.createElement(Icon, {
-                  name: iconName,
-                  size: iconSize,
-                  onClick: onIconClick,
-                  isBold: isIconBold
-                })
-              ) : null,
-              title ? React.createElement(
-                Box,
-                {
-                  className: style.title,
-                  flexible: flexible,
-                  shrink: true,
-                  'data-title': title
-                },
-                title
-              ) : null,
-              children ? React.createElement(
-                Box,
-                null,
-                children
-              ) : null
-            )
-          ),
-          onClose ? React.createElement(
-            Box,
-            null,
-            React.createElement(IconButton, {
-              onClick: onClose,
-              dataId: 'closeButton',
-              dataTitle: closeTitle,
-              iconName: 'ZD-cross',
-              iconSize: '11'
-            })
-          ) : null
-        ),
-        getChildren ? React.createElement(
-          Container,
-          { isCover: false },
-          React.createElement(
-            Box,
-            { flexible: true },
-            getChildren()
-          )
-        ) : null
-      );
-    }
-  }]);
-
-  return Header;
-}(React.Component);
-
-Header.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  closeTitle: PropTypes.string,
-  dataId: PropTypes.string,
-  flexible: PropTypes.bool,
-  iconName: PropTypes.string,
-  iconSize: PropTypes.string,
-  isIconBold: PropTypes.bool,
-  onClose: PropTypes.func,
-  onIconClick: PropTypes.func,
-  paddingSize: PropTypes.oneOf(['small', 'medium', 'large']),
-  title: PropTypes.string,
-  getChildren: PropTypes.func
-};
-Header.defaultProps = {
-  flexible: false,
-  paddingSize: 'small'
-};
-
-export var Content = function (_React$Component2) {
-  _inherits(Content, _React$Component2);
-
-  function Content() {
-    _classCallCheck(this, Content);
-
-    return _possibleConstructorReturn(this, (Content.__proto__ || _Object$getPrototypeOf(Content)).apply(this, arguments));
+}
+Header.propTypes = Header_propTypes;
+Header.defaultProps = Header_defaultProps;
+export class Content extends React.Component {
+  render() {
+    let {
+      children,
+      className,
+      paddingSize,
+      eleRef
+    } = this.props;
+    return /*#__PURE__*/React.createElement(CardContent, {
+      scroll: "vertical",
+      isScrollAttribute: true,
+      customClass: `${className ? className : ''} ${paddingSize ? style[`${paddingSize}ContentPadding`] : ''}`,
+      eleRef: eleRef
+    }, children);
   }
 
-  _createClass(Content, [{
-    key: 'render',
-    value: function render() {
-      var _props2 = this.props,
-          children = _props2.children,
-          className = _props2.className,
-          paddingSize = _props2.paddingSize,
-          eleRef = _props2.eleRef;
-
-      return React.createElement(
-        CardContent,
-        {
-          scroll: 'vertical',
-          isScrollAttribute: true,
-          className: (className ? className : '') + ' ' + (paddingSize ? style[paddingSize + 'ContentPadding'] : ''),
-          eleRef: eleRef
-        },
-        children
-      );
-    }
-  }]);
-
-  return Content;
-}(React.Component);
-
-Content.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  eleRef: PropTypes.func,
-  paddingSize: PropTypes.oneOf(['small', 'medium', 'large'])
-};
-
-export var Footer = function (_React$Component3) {
-  _inherits(Footer, _React$Component3);
-
-  function Footer() {
-    _classCallCheck(this, Footer);
-
-    return _possibleConstructorReturn(this, (Footer.__proto__ || _Object$getPrototypeOf(Footer)).apply(this, arguments));
+}
+Content.propTypes = Content_propTypes;
+export class Footer extends React.Component {
+  render() {
+    let {
+      paddingLeftSize,
+      paddingRightClass,
+      children,
+      size
+    } = this.props;
+    return /*#__PURE__*/React.createElement(FormAction, {
+      size: size,
+      paddingLeftSize: paddingLeftSize,
+      paddingRightClass: paddingRightClass
+    }, children);
   }
 
-  _createClass(Footer, [{
-    key: 'render',
-    value: function render() {
-      var _props3 = this.props,
-          paddingLeftSize = _props3.paddingLeftSize,
-          paddingRightClass = _props3.paddingRightClass,
-          children = _props3.children,
-          size = _props3.size;
-
-      return React.createElement(
-        FormAction,
-        {
-          size: size,
-          paddingLeftSize: paddingLeftSize,
-          paddingRightClass: paddingRightClass
-        },
-        children
-      );
-    }
-  }]);
-
-  return Footer;
-}(React.Component);
-
-Footer.propTypes = {
-  children: PropTypes.node,
-  paddingLeftSize: PropTypes.string,
-  paddingRightClass: PropTypes.string,
-  size: PropTypes.string
-};
-Footer.defaultProps = {
-  size: 'small'
-};
-
-var Drawer = function (_React$Component4) {
-  _inherits(Drawer, _React$Component4);
-
-  function Drawer() {
-    _classCallCheck(this, Drawer);
-
-    return _possibleConstructorReturn(this, (Drawer.__proto__ || _Object$getPrototypeOf(Drawer)).apply(this, arguments));
+}
+Footer.propTypes = Footer_propTypes;
+Footer.defaultProps = Footer_defaultProps;
+export default class Drawer extends React.Component {
+  constructor(props) {
+    super(props);
+    this.drawers = this.drawers.bind(this);
+    this.responsiveFunc = this.responsiveFunc.bind(this);
+    this.getNextIndex = getZIndex(this);
+    this.createRef = /*#__PURE__*/React.createRef();
   }
 
-  _createClass(Drawer, [{
-    key: 'render',
-    value: function render() {
-      var _props4 = this.props,
-          children = _props4.children,
-          needFreeze = _props4.needFreeze,
-          palette = _props4.palette,
-          size = _props4.size,
-          paddingSize = _props4.paddingSize,
-          isActive = _props4.isActive,
-          onClose = _props4.onClose,
-          forwardRef = _props4.forwardRef,
-          responsiveId = _props4.responsiveId;
-
-      var childrenWithProps = React.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 ? React.cloneElement(child, {
-            paddingSize: childPaddingSize ? childPaddingSize : paddingSize
-          }) : child;
-        }
-        return child;
-      });
-      return needFreeze ? React.createElement(
-        FreezeLayer,
-        {
-          onClick: onClose,
-          isActive: isActive,
-          animationName: 'fade',
-          childAnimationName: 'slideRight',
-          palette: palette,
-          forwardRef: forwardRef
-        },
-        React.createElement(
-          Box,
-          { flexible: true },
-          React.createElement(
-            Container,
-            { alignBox: 'row' },
-            React.createElement(
-              ResponsiveReceiver,
-              { responsiveId: responsiveId },
-              function (_ref2) {
-                var deviceUpto = _ref2.deviceUpto,
-                    deviceBetween = _ref2.deviceBetween;
-                return React.createElement(
-                  React.Fragment,
-                  null,
-                  deviceUpto('TABLET') ? React.createElement(Box, { flexible: true }) : null,
-                  React.createElement(Box, {
-                    flexible: true,
-                    className: deviceUpto('TABLET') ? style.mobModal : style.drawerModal,
-                    'data-portal': 'drawerModal'
-                  }),
-                  React.createElement(
-                    Box,
-                    {
-                      className: style.container + ' ' + (deviceUpto('MOBILE') ? style.mbleSize : style[size])
-                    },
-                    React.createElement(
-                      Card,
-                      {
-                        onClick: function onClick(e) {
-                          e.stopPropagation();
-                        }
-                      },
-                      childrenWithProps
-                    )
-                  )
-                );
-              }
-            )
-          )
-        )
-      ) : React.createElement(
-        VelocityAnimationGroup,
-        { isActive: isActive, name: 'slideRight' },
-        React.createElement(
-          ResponsiveReceiver,
-          { responsiveId: responsiveId },
-          function (_ref3) {
-            var deviceUpto = _ref3.deviceUpto;
-            return React.createElement(
-              'div',
-              {
-                className: style.container + ' ' + style.isOverlay + ' ' + (deviceUpto('MOBILE') ? style.mbleSize : style[size]) + ' ',
-                ref: forwardRef
-              },
-              React.createElement(
-                Card,
-                {
-                  onClick: function onClick(e) {
-                    e.stopPropagation();
-                  }
-                },
-                childrenWithProps
-              )
-            );
-          }
-        )
-      );
-    }
-  }]);
-
-  return Drawer;
-}(React.Component);
-
-export default Drawer;
-
+  drawers(uptoTablet, styleByResolutions) {
+    let {
+      children,
+      size,
+      paddingSize,
+      subDrawerActive,
+      subDrawerChildren,
+      onBodyClick,
+      onClose,
+      needFocusScope,
+      customProps
+    } = this.props;
+    const {
+      focusScopeProps = {}
+    } = customProps;
+    const {
+      autoFocus = true,
+      restoreFocus = true,
+      needArrowLoop = false,
+      needTabLoop = true,
+      enableEnterAction = false
+    } = focusScopeProps;
+    let childrenWithProps = React.Children.map(children, child => {
+      if (child.type === Header || child.type === Footer || child.type === Content) {
+        let {
+          paddingSize: childPaddingSize
+        } = child.props || {};
+        return paddingSize || childPaddingSize ? /*#__PURE__*/React.cloneElement(child, {
+          paddingSize: childPaddingSize ? childPaddingSize : paddingSize
+        }) : child;
+      }
+
+      return child;
+    });
+    let content = /*#__PURE__*/React.createElement(Box, {
+      className: `${style.container} ${style.columns} ${style.drawerModal} ${uptoTablet ? style.mbleSize : style[size]}`,
+      "data-a11y-need-focus-style": "false",
+      tabindex: -1,
+      eleRef: this.createRef
+    }, /*#__PURE__*/React.createElement(Card, {
+      onClick: e => {
+        e && e.stopPropagation && e.stopPropagation();
+        onBodyClick(e);
+      }
+    }, childrenWithProps));
+    return /*#__PURE__*/React.createElement(React.Fragment, null, subDrawerChildren ? /*#__PURE__*/React.createElement(Box, {
+      className: style.columns
+    }, /*#__PURE__*/React.createElement(VelocityAnimationGroup, {
+      name: "slideRight",
+      isActive: subDrawerActive
+    }, /*#__PURE__*/React.createElement(ResponsiveSender, null, /*#__PURE__*/React.createElement(Container, {
+      className: styleByResolutions,
+      onClick: e => {
+        e && e.stopPropagation && e.stopPropagation();
+      }
+    }, /*#__PURE__*/React.createElement(Box, {
+      flexible: true
+    }, subDrawerChildren))))) : null, needFocusScope ? /*#__PURE__*/React.createElement(FocusScope, {
+      elementRef: this.createRef,
+      autoFocus: autoFocus,
+      needTabLoop: needTabLoop,
+      restoreFocus: restoreFocus,
+      needArrowLoop: needArrowLoop,
+      onClose: onClose,
+      enableEnterAction: enableEnterAction
+    }, content) : content);
+  }
 
-Drawer.propTypes = {
-  children: PropTypes.node,
-  forwardRef: PropTypes.object,
-  isActive: PropTypes.bool,
-  needFreeze: PropTypes.bool,
-  onClose: PropTypes.func,
-  paddingSize: PropTypes.oneOf(['small', 'medium', 'large']),
-  palette: PropTypes.oneOf(['dark', 'default', 'darkLight', 'plain']),
-  responsiveId: PropTypes.string,
-  size: PropTypes.oneOf(['small', 'xsmall', 'medium', 'xmedium', 'large', 'xlarge', 'xxlarge'])
-};
+  responsiveFunc(_ref) {
+    let {
+      mediaQueryOR
+    } = _ref;
+    return {
+      uptoTablet: mediaQueryOR([{
+        maxWidth: 768
+      }])
+    };
+  }
 
-Drawer.defaultProps = {
-  isActive: false,
-  palette: 'default',
-  responsiveId: 'Helmet',
-  size: 'xsmall'
-};
+  render() {
+    let {
+      needFreeze,
+      palette,
+      isActive,
+      onClose,
+      forwardRef,
+      responsiveId,
+      subDrawerSize,
+      subDrawerClass,
+      subDrawerActive,
+      customClass,
+      needAutoZindex,
+      innerPortalName
+    } = this.props;
+    return /*#__PURE__*/React.createElement(ResponsiveReceiver, {
+      query: this.responsiveFunc,
+      responsiveId: responsiveId
+    }, _ref2 => {
+      let {
+        uptoTablet
+      } = _ref2;
+      let styleByResolutions = `${subDrawerClass} ${style.secondDrawer} ${uptoTablet ? `${style.secondMobDrawer} ${style.mbleSize}` : `${style[subDrawerSize]}`} `;
+      return needFreeze ? /*#__PURE__*/React.createElement(FreezeLayer, {
+        onClick: onClose,
+        isActive: isActive,
+        animationName: "fade",
+        childAnimationName: "slideRight",
+        palette: palette,
+        forwardRef: forwardRef,
+        customClass: customClass,
+        needAutoZindex: needAutoZindex
+      }, /*#__PURE__*/React.createElement(Box, {
+        flexible: true
+      }, /*#__PURE__*/React.createElement(Container, {
+        alignBox: "row"
+      }, /*#__PURE__*/React.createElement(React.Fragment, null, uptoTablet ? /*#__PURE__*/React.createElement(Box, {
+        flexible: true
+      }) : null, /*#__PURE__*/React.createElement(ResponsiveSender, null, /*#__PURE__*/React.createElement(Box, {
+        flexible: true,
+        className: uptoTablet ? style.mobModal : style.drawerModal
+      }, !subDrawerActive && innerPortalName ? /*#__PURE__*/React.createElement("div", {
+        "data-portal": innerPortalName
+      }) : null)), this.drawers(uptoTablet, styleByResolutions))))) : /*#__PURE__*/React.createElement(VelocityAnimationGroup, {
+        isActive: isActive,
+        name: "slideRight"
+      }, /*#__PURE__*/React.createElement(Container, {
+        align: "right",
+        alignBox: "row",
+        scroll: "none",
+        eleRef: forwardRef,
+        className: `${style.isOverlay} ${customClass}`,
+        style: isActive && needAutoZindex ? {
+          zIndex: `${this.getNextIndex()}`
+        } : {}
+      }, this.drawers(uptoTablet, styleByResolutions)));
+    });
+  }
 
-if (false) {
-  Drawer.docs = {
-    componentGroup: 'Template',
-    folderName: 'Style Guide'
-  };
-}
+}
+Drawer.propTypes = Drawer_propTypes;
+Drawer.defaultProps = Drawer_defaultProps; // if (__DOCS__) {
+//   Drawer.docs = {
+//     componentGroup: 'Template'
+//   };
+// }