@zohodesk/dot 1.0.0-beta.24 → 1.0.0-beta.240

package/es/FreezeLayer/FreezeLayer.js

@@ -1,141 +1,124 @@
-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, { Component } from 'react';
-import PropTypes from 'prop-types';
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 import { Container } from '@zohodesk/components/lib/Layout';
 import VelocityAnimationGroup from '@zohodesk/components/lib/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup';
 import style from './FreezeLayer.module.css';
-import { Shortcut } from '../utils/KeyboardApi';
-
-var FreezeLayer = function (_Component) {
-  _inherits(FreezeLayer, _Component);
-
-  function FreezeLayer(props) {
-    _classCallCheck(this, FreezeLayer);
-
-    var _this = _possibleConstructorReturn(this, (FreezeLayer.__proto__ || _Object$getPrototypeOf(FreezeLayer)).call(this, props));
-
-    _this.state = { isActive: props.isActive, isChildActive: false };
-    return _this;
+import { getZIndex } from '@zohodesk/components/lib/Provider/ZindexProvider';
+import { getDotLibraryConfig } from '../Provider/Config';
+export default class FreezeLayer extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isActive: props.isActive,
+      isChildActive: false
+    };
+    this.getNextIndex = getZIndex(this);
+    this.isFreezeLayerEnabled = false;
   }
-
-  // componentDidMount(){
-  //   Shortcut && Shortcut.setState(false);
-  // }
-  //
-  // componentWillUnmount(){
-  //   Shortcut && Shortcut.setState(true);
-  // }
-
-  _createClass(FreezeLayer, [{
-    key: 'componentDidUpdate',
-    value: function componentDidUpdate(prevProps) {
-      var isActive = this.props.isActive;
-
-      if (isActive != prevProps.isActive) {
-        if (isActive) {
-          Shortcut && Shortcut.setState(false);
-        } else {
-          Shortcut && Shortcut.setState(true);
-        }
-      }
+  enableFreeze() {
+    if (!this.isFreezeLayerEnabled) {
+      this.isFreezeLayerEnabled = true;
+      const freezeLayerEnable = (getDotLibraryConfig('freezeLayer') || {}).enable;
+      freezeLayerEnable && freezeLayerEnable();
+    }
+  }
+  disableFreeze() {
+    if (this.isFreezeLayerEnabled) {
+      this.isFreezeLayerEnabled = false;
+      const freezeLayerDisable = (getDotLibraryConfig('freezeLayer') || {}).disable;
+      freezeLayerDisable && freezeLayerDisable();
+    }
+  }
+  componentDidMount() {
+    let {
+      isActive
+    } = this.props;
+    if (isActive) {
+      this.setState({
+        isChildActive: true
+      });
+      this.enableFreeze();
     }
-  }, {
-    key: 'render',
-    value: function render() {
-      var _props = this.props,
-          children = _props.children,
-          align = _props.align,
-          childAnimationName = _props.childAnimationName,
-          palette = _props.palette,
-          onClick = _props.onClick,
-          animationName = _props.animationName,
-          zIndex = _props.zIndex,
-          isActive = _props.isActive,
-          runOnMount = _props.runOnMount,
-          forwardRef = _props.forwardRef,
-          isSvgMask = _props.isSvgMask;
-
-      return React.createElement(
-        VelocityAnimationGroup,
-        {
-          name: animationName && animationName,
-          isActive: isActive,
-          runOnMount: runOnMount
-        },
-        React.createElement(
-          'div',
-          {
-            className: '\n              ' + style.container + ' ' + style['index' + zIndex] + '  ' + (!isSvgMask ? style[palette] : '') + '\n            ',
-            onClick: onClick ? onClick : null,
-            ref: forwardRef
-          },
-          children && React.createElement(
-            React.Fragment,
-            null,
-            childAnimationName ? React.createElement(
-              VelocityAnimationGroup,
-              {
-                name: childAnimationName,
-                isActive: true,
-                runOnMount: true,
-                enterDelay: palette === 'plain' ? 0 : 300,
-                component: Container,
-                alignBox: 'row',
-                align: align,
-                dataId: 'reactFreezeLayer'
-              },
-              children
-            ) : isSvgMask ? React.createElement(
-              React.Fragment,
-              null,
-              children
-            ) : React.createElement(
-              Container,
-              {
-                alignBox: 'row',
-                align: align,
-                dataId: 'reactFreezeLayer'
-              },
-              children
-            )
-          )
-        )
-      );
+  }
+  componentDidUpdate(prevProps) {
+    let {
+      isActive
+    } = this.props;
+    if (isActive != prevProps.isActive) {
+      if (isActive) {
+        this.enableFreeze();
+        this.setState({
+          isActive: true
+        }, () => {
+          this.setState({
+            isChildActive: true
+          });
+        });
+      } else {
+        this.disableFreeze();
+        this.setState({
+          isChildActive: false
+        }, () => {
+          this.setState({
+            isActive: false
+          });
+        });
+      }
     }
-  }]);
-
-  return FreezeLayer;
-}(Component);
-
-export default FreezeLayer;
-
-
-var animationValues = ['fade', 'shrink', 'expand', 'slideRight', 'slideDown', 'flyDown'];
-
-FreezeLayer.propTypes = {
-  align: PropTypes.oneOf(['horizontal', 'vertical', 'both']),
-  animationName: PropTypes.oneOf(animationValues),
-  childAnimationName: PropTypes.oneOf(animationValues),
-  children: PropTypes.node,
-  forwardRef: PropTypes.object,
-  isActive: PropTypes.bool,
-  onClick: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
-  palette: PropTypes.oneOf(['dark', 'default', 'darkLight', 'plain', 'snow']),
-  runOnMount: PropTypes.bool,
-  zIndex: PropTypes.oneOf(['3', '5', '7', '10']),
-  isSvgMask: PropTypes.bool
-};
-FreezeLayer.defaultProps = {
-  isActive: false,
-  palette: 'default',
-  zIndex: '5',
-  isSvgMask: false
-};
-
+  }
+  componentWillUnmount() {
+    this.disableFreeze();
+  }
+  render() {
+    let {
+      children,
+      align,
+      childAnimationName,
+      palette,
+      onClick,
+      animationName,
+      zIndex,
+      runOnMount,
+      forwardRef,
+      isSvgMask,
+      customClass,
+      needAutoZindex
+    } = this.props;
+    let {
+      isActive,
+      isChildActive
+    } = this.state;
+    return /*#__PURE__*/React.createElement(VelocityAnimationGroup, {
+      name: animationName && animationName,
+      isActive: isActive,
+      runOnMount: runOnMount
+    }, /*#__PURE__*/React.createElement("div", {
+      style: isActive && needAutoZindex ? {
+        zIndex: `${this.getNextIndex()}`
+      } : {},
+      className: `
+              ${style.container} ${customClass} ${style[`index${zIndex}`]}  ${!isSvgMask ? style[palette] : ''}
+            `,
+      onClick: onClick ? onClick : null,
+      ref: forwardRef
+    }, children && /*#__PURE__*/React.createElement(React.Fragment, null, childAnimationName ? /*#__PURE__*/React.createElement(VelocityAnimationGroup, {
+      name: childAnimationName,
+      isActive: isChildActive,
+      enterDelay: palette === 'plain' ? 0 : 300,
+      component: Container,
+      alignBox: "row",
+      align: align,
+      dataId: "reactFreezeLayer"
+    }, children) : isSvgMask ? /*#__PURE__*/React.createElement(React.Fragment, null, children) : /*#__PURE__*/React.createElement(Container, {
+      alignBox: "row",
+      align: align,
+      dataId: "reactFreezeLayer"
+    }, children))));
+  }
+}
+FreezeLayer.propTypes = propTypes;
+FreezeLayer.defaultProps = defaultProps;
 if (false) {
   FreezeLayer.docs = {
     componentGroup: 'Atom',

package/es/FreezeLayer/FreezeLayer.module.css

@@ -2,6 +2,7 @@
   top: 0;
   bottom: 0;
   position: absolute;
+  overflow: hidden;
 }[dir=ltr] .container {
   left: 0;
   right: 0;
@@ -10,19 +11,19 @@
   left: 0;
 }
 .default {
-  background-color: rgba(0, 0, 0, 0.45);
+  background-color: var(--zdt_freezelayer_default_bg);
 }
 .dark {
-  background-color: rgba(0, 0, 0, 0.9);
+  background-color: var(--zdt_freezelayer_dark_bg);
 }
 .darkLight {
-  background-color: var(--zd_bg_dark16);
+  background-color: var(--zdt_freezelayer_darklight_bg);
 }
 .plain {
-  background-color: transparent;
+  background-color: var(--zdt_freezelayer_plain_bg);
 }
 .snow {
-  background-color: rgba(30, 38, 51, 0.4);
+  background-color: var(--zdt_freezelayer_snow_bg);
 }
 .index3 {
   z-index: 3;
@@ -37,5 +38,5 @@
   z-index: 10;
 }
 .delay {
-  transition-delay: 0.2s;
+  transition-delay: var(--zd_transition2);
 }

package/es/FreezeLayer/props/defaultProps.js

@@ -0,0 +1,8 @@
+export const defaultProps = {
+  isActive: false,
+  palette: 'default',
+  zIndex: '5',
+  isSvgMask: false,
+  customClass: '',
+  needAutoZindex: true
+};

package/es/FreezeLayer/props/propTypes.js

@@ -0,0 +1,17 @@
+import PropTypes from 'prop-types';
+let animationValues = ['fade', 'shrink', 'expand', 'slideRight', 'slideDown', 'flyDown'];
+export const propTypes = {
+  align: PropTypes.oneOf(['horizontal', 'vertical', 'both']),
+  animationName: PropTypes.oneOf(animationValues),
+  childAnimationName: PropTypes.oneOf(animationValues),
+  children: PropTypes.node,
+  customClass: PropTypes.string,
+  forwardRef: PropTypes.object,
+  isActive: PropTypes.bool,
+  isSvgMask: PropTypes.bool,
+  needAutoZindex: PropTypes.bool,
+  onClick: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
+  palette: PropTypes.oneOf(['dark', 'default', 'darkLight', 'plain', 'snow']),
+  runOnMount: PropTypes.bool,
+  zIndex: PropTypes.oneOf(['3', '5', '7', '10'])
+};

package/es/IconButton/IconButton.js

@@ -1,87 +1,138 @@
-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 { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 import Icon from '@zohodesk/icons/lib/Icon';
 import { Container } from '@zohodesk/components/lib/Layout';
-import { CssProvider } from '@zohodesk/components/lib/CssProvider';
+import btnStyle from '@zohodesk/components/lib/semantic/Button/semanticButton.module.css';
+import RippleEffect from '@zohodesk/components/lib/RippleEffect/RippleEffect';
 import style from './IconButton.module.css';
-
-var IconButton = function (_React$Component) {
-  _inherits(IconButton, _React$Component);
-
-  function IconButton() {
-    _classCallCheck(this, IconButton);
-
-    return _possibleConstructorReturn(this, (IconButton.__proto__ || _Object$getPrototypeOf(IconButton)).apply(this, arguments));
+export default class IconButton extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isPressed: false
+    };
+    this.handleToggle = this.handleToggle.bind(this);
+    this.triggerClick = this.triggerClick.bind(this);
+    this.triggerMouseDown = this.triggerMouseDown.bind(this);
+    this.triggerMouseOver = this.triggerMouseOver.bind(this);
+    this.onBlur = this.onBlur.bind(this);
   }
-
-  _createClass(IconButton, [{
-    key: 'render',
-    value: function render() {
-      var _props = this.props,
-          palette = _props.palette,
-          iconSize = _props.iconSize,
-          iconName = _props.iconName,
-          className = _props.className,
-          iconClass = _props.iconClass,
-          dataId = _props.dataId,
-          onClick = _props.onClick,
-          dataTitle = _props.dataTitle,
-          eleRef = _props.eleRef,
-          isActive = _props.isActive,
-          tourId = _props.tourId,
-          isDisabled = _props.isDisabled;
-
-      return React.createElement(
-        Container,
-        {
-          isInline: true,
-          tourId: tourId,
-          align: 'both',
-          isCover: false,
-          className: ' ' + (isDisabled ? CssProvider('isDisabled') : style.enable) + ' ' + style.wrapper + ' ' + (isActive ? style[palette + '_active'] : style[palette]) + ' ' + className,
-          dataId: dataId,
-          onClick: !isDisabled && onClick,
-          'data-title': dataTitle,
-          eleRef: eleRef
-        },
-        React.createElement(Icon, { size: iconSize, name: iconName, iconClass: iconClass })
-      );
+  handleToggle(e) {
+    if (e.key === ' ' || e.key === 'Enter' || e.key === 'Spacebar') {
+      e.preventDefault();
+      this.triggerClick(e);
+      this.triggerMouseDown(e);
     }
-  }]);
-
-  return IconButton;
-}(React.Component);
-
-export default IconButton;
-
-
-IconButton.propTypes = {
-  palette: PropTypes.oneOf('primary', 'primaryFilled', 'secondary'),
-  iconSize: PropTypes.string,
-  iconName: PropTypes.string,
-  className: PropTypes.string,
-  iconClass: PropTypes.string,
-  dataId: PropTypes.string,
-  onClick: PropTypes.func,
-  dataTitle: PropTypes.string,
-  eleRef: PropTypes.func,
-  isActive: PropTypes.bool,
-  tourId: PropTypes.string,
-  isDisabled: PropTypes.bool
-};
-
-IconButton.defaultProps = {
-  palette: 'secondary',
-  iconSize: '13',
-  className: '',
-  iconClass: '',
-  dataId: 'iconContainer',
-  dataTitle: '',
-  isActive: false,
-  isDisabled: false
-};
+  }
+  triggerClick(e) {
+    let {
+      onClick,
+      isDisabled
+    } = this.props;
+    !isDisabled ? (onClick && onClick(e), this.setState({
+      isPressed: true
+    })) : null;
+  }
+  triggerMouseOver(e) {
+    let {
+      onMouseOver,
+      isDisabled
+    } = this.props;
+    !isDisabled ? (onMouseOver && onMouseOver(e), this.setState({
+      isPressed: true
+    })) : null;
+  }
+  triggerMouseDown(e) {
+    let {
+      onMouseDown,
+      isDisabled
+    } = this.props;
+    !isDisabled ? (onMouseDown && onMouseDown(e), this.setState({
+      isPressed: true
+    })) : null;
+  }
+  onBlur(e) {
+    let {
+      isDisabled
+    } = this.props;
+    !isDisabled ? this.setState({
+      isPressed: false
+    }) : null;
+  }
+  render() {
+    let {
+      palette,
+      iconSize,
+      iconName,
+      className,
+      iconClass,
+      dataId,
+      eleRef,
+      isActive,
+      tourId,
+      isDisabled,
+      children,
+      hoverType,
+      title,
+      isBold,
+      isNeedEffect,
+      needButtonTag,
+      a11y,
+      dataIsHtml
+    } = this.props;
+    let {
+      isPressed
+    } = this.state;
+    let {
+      ariaHaspopup,
+      ariaExpanded,
+      ariaLabel,
+      ariaControls,
+      ariaLabelledby
+    } = a11y;
+    return /*#__PURE__*/React.createElement(RippleEffect, {
+      palette: palette,
+      isActive: isActive,
+      hoverType: hoverType,
+      isDisabled: isDisabled,
+      isNeedEffect: isNeedEffect
+    }, /*#__PURE__*/React.createElement(Container, {
+      "aria-label": ariaLabel,
+      "aria-haspopup": ariaHaspopup,
+      "aria-expanded": ariaExpanded,
+      "aria-controls": ariaControls,
+      "aria-labelledby": ariaLabelledby,
+      tagName: needButtonTag ? 'button' : 'div',
+      isInline: true,
+      tourId: tourId,
+      align: "both",
+      isCover: false,
+      className: `${needButtonTag && btnStyle.buttonReset} ${style.wrapper} ${className ? className : ''} ${isActive ? style[`${palette}_active`] : style[palette]}`,
+      dataId: dataId,
+      onClick: this.triggerClick,
+      "data-title": title,
+      "data-ishtml": dataIsHtml,
+      eleRef: eleRef,
+      onMouseDown: this.triggerMouseDown,
+      onMouseEnter: this.triggerMouseOver,
+      "aria-pressed": isPressed,
+      onKeyDown: this.handleToggle,
+      onFocus: this.triggerMouseOver,
+      onBlur: this.onBlur,
+      disabled: isDisabled
+    }, iconName ? /*#__PURE__*/React.createElement(Icon, {
+      isBold: isBold,
+      size: iconSize,
+      name: iconName,
+      iconClass: iconClass
+    }) : null, children ? children : null));
+  }
+}
+IconButton.propTypes = propTypes;
+IconButton.defaultProps = defaultProps;
+if (false) {
+  IconButton.docs = {
+    componentGroup: 'Atom'
+  };
+}

package/es/IconButton/IconButton.module.css

@@ -1,37 +1,22 @@
+.varClass {
+  --iconColor: var(--zdt_iconButton_icon_black);
+}
 .wrapper {
   height: var(--zd_size28);
-  position: relative;
   width: var(--zd_size28);
+  composes: offSelection from '~@zohodesk/components/lib/common/common.module.css';
+  composes: varClass;
+  color: var(--iconColor);
   cursor: pointer;
-  border-radius: var(--zd_size4);
-}
-.secondary {
-  border: 1px solid var(--dot_border_paleBlue);
-}
-.enable.secondary:hover {
-  border-color: var(--dot_border_slateGrey);
 }
 .primary {
-  color: var(--dot_text_primary);
-  border: 1px solid var(--dot_border_primary);
-}
-.enable.primary:hover {
-  color: var(--dot_text_cobalt);
-  border-color: var(--dot_border_cobalt);
-}
-
-.secondary_active {
-  border: 1px solid var(--dot_border_tropicalBlue);
-  background-color: var(--dot_bg_aliceBlue);
-}
-.primary_active {
-  color: var(--dot_text_white);
-  background-color: var(--dot_bg_primary);
+  --iconColor: var(--zdt_iconButton_icon_primary);
 }
-.primaryFilled {
-  color: var(--dot_text_white);
-  background-color: var(--dot_bg_primary);
+.primary:hover {
+  --iconColor: var(--zdt_iconButton_icon_primaryHover);
 }
-.primaryFilled_active, .enable.primaryFilled:hover {
-  background-color: var(--dot_bg_cobalt);
+.primary_active,
+.primaryFilled,
+.primaryFilled_active {
+  --iconColor: var(--zdt_iconButton_icon_primaryActive);
 }

package/es/IconButton/props/defaultProps.js

@@ -0,0 +1,15 @@
+export const defaultProps = {
+  palette: 'default',
+  iconSize: '13',
+  className: '',
+  iconClass: '',
+  dataId: 'iconContainer',
+  isActive: false,
+  isDisabled: false,
+  hoverType: 'default',
+  isBold: false,
+  isNeedEffect: true,
+  needButtonTag: true,
+  a11y: {},
+  dataIsHtml: false
+};

package/es/IconButton/props/propTypes.js

@@ -0,0 +1,31 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  dataId: PropTypes.string,
+  eleRef: PropTypes.func,
+  hoverType: PropTypes.oneOf(['default', 'border', 'bg']),
+  iconClass: PropTypes.string,
+  iconName: PropTypes.string,
+  iconSize: PropTypes.string,
+  isActive: PropTypes.bool,
+  isBold: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  isNeedEffect: PropTypes.bool,
+  onClick: PropTypes.func,
+  onMouseDown: PropTypes.func,
+  onMouseOver: PropTypes.func,
+  palette: PropTypes.oneOf(['primary', 'primaryFilled', 'default']),
+  title: PropTypes.string,
+  tourId: PropTypes.string,
+  isNeedEffect: PropTypes.bool,
+  needButtonTag: PropTypes.bool,
+  a11y: PropTypes.shape({
+    ariaHaspopup: PropTypes.bool,
+    ariaExpanded: PropTypes.bool,
+    ariaLabel: PropTypes.string,
+    ariaControls: PropTypes.string,
+    ariaLabelledby: PropTypes.string
+  }),
+  dataIsHtml: PropTypes.bool
+};