@zohodesk/dot 1.0.0-test.239 → 1.1.0

package/es/FlipCard/FlipCard.module.css

@@ -1,44 +1,44 @@
-.flip,
-.flipNone {
-  color: var(--zdt_flipcard_default_text);
-}.flip, .flipNone {
-  background-color: var(--zdt_flipcard_default_bg);
-}
-.container {
-  position: relative;
-  transition: var(--zd_transition3) all;
-  transform-style: preserve-3d;
-}
-.container,
-.front,
-.back {
-  width: inherit;
-  height: inherit;
-}
-.front,
-.back {
-  position: absolute;
-  backface-visibility: hidden;
-  -webkit-backface-visibility: hidden;
-}
-[dir=ltr] .front {
-  transform: rotateY(180deg) perspective(1px);
-}
-[dir=rtl] .front {
-  transform: rotateY(-180deg) perspective(1px);
-}
-.back {
-  transform: rotateY(0deg) perspective(1px);
-}
-[dir=ltr] .notFlip .container {
-  transform: rotateY(180deg);
-}
-[dir=rtl] .notFlip .container {
-  transform: rotateY(-180deg);
-}
-[dir=ltr] .flip:hover .container, [dir=ltr] .hoverContainer:hover .container {
-  transform: rotateY(180deg);
-}
-[dir=rtl] .flip:hover .container, [dir=rtl] .hoverContainer:hover .container {
-  transform: rotateY(-180deg);
-}
+.flip,
+.flipNone {
+  color: var(--zdt_flipcard_default_text);
+}.flip, .flipNone {
+  background-color: var(--zdt_flipcard_default_bg);
+}
+.container {
+  position: relative;
+  transition: var(--zd_transition3) all;
+  transform-style: preserve-3d;
+}
+.container,
+.front,
+.back {
+  width: inherit ;
+  height: inherit ;
+}
+.front,
+.back {
+  position: absolute;
+  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+}
+[dir=ltr] .front {
+  transform: rotateY(180deg) perspective(1px);
+}
+[dir=rtl] .front {
+  transform: rotateY(-180deg) perspective(1px);
+}
+.back {
+  transform: rotateY(0deg) perspective(1px);
+}
+[dir=ltr] .notFlip .container {
+  transform: rotateY(180deg);
+}
+[dir=rtl] .notFlip .container {
+  transform: rotateY(-180deg);
+}
+[dir=ltr] .flip:hover .container, [dir=ltr] .hoverContainer:hover .container {
+  transform: rotateY(180deg);
+}
+[dir=rtl] .flip:hover .container, [dir=rtl] .hoverContainer:hover .container {
+  transform: rotateY(-180deg);
+}

package/es/FormAction/FormAction.js

@@ -18,11 +18,12 @@ export default class FormAction extends React.Component {
       size,
       children,
       paddingLeftSize,
-      paddingRightClass
+      paddingRightClass,
+      dataSelectorId
     } = this.props;
     let leftbuttonGroup = [],
-      rightbuttonGroup = [],
-      centerbuttonGroup = [];
+        rightbuttonGroup = [],
+        centerbuttonGroup = [];
     React.Children.map(children, child => {
       if (!child) {
         return child;
@@ -40,7 +41,8 @@ export default class FormAction extends React.Component {
     let hasRightChild = rightbuttonGroup.length > 0;
     let hasCenterChild = centerbuttonGroup.length > 0;
     return /*#__PURE__*/React.createElement("div", {
-      className: style.wrapperDiv
+      className: style.wrapperDiv,
+      "data-selector-id": dataSelectorId
     }, /*#__PURE__*/React.createElement(Container, {
       alignBox: "row",
       isCover: false,
@@ -53,22 +55,24 @@ export default class FormAction extends React.Component {
     }, hasLeftChild ? /*#__PURE__*/React.createElement(Box, {
       flexible: hasRightChild ? true : false,
       shrink: !hasRightChild && hasLeftChild ? true : false
-    }, leftbuttonGroup.length > 1 ? leftbuttonGroup.map(item => /*#__PURE__*/React.createElement("div", {
-      className: style.marginRight
+    }, leftbuttonGroup.length > 1 ? leftbuttonGroup.map((item, index) => /*#__PURE__*/React.createElement("div", {
+      className: style.marginRight,
+      key: index
     }, item)) : leftbuttonGroup[0]) : null, hasRightChild ? /*#__PURE__*/React.createElement(Box, {
       shrink: hasRightChild && !hasLeftChild ? true : false
-    }, rightbuttonGroup.length > 1 ? rightbuttonGroup.map(item => /*#__PURE__*/React.createElement("div", {
-      className: style.marginRight
+    }, rightbuttonGroup.length > 1 ? rightbuttonGroup.map((item, index) => /*#__PURE__*/React.createElement("div", {
+      className: style.marginRight,
+      key: index
     }, item)) : rightbuttonGroup[0]) : null, hasCenterChild ? /*#__PURE__*/React.createElement(Box, null, centerbuttonGroup.length > 1 ? centerbuttonGroup.map((item, index) => /*#__PURE__*/React.createElement("div", {
       className: style.marginRight,
       key: index
     }, item)) : centerbuttonGroup[0]) : null));
   }
+
 }
 FormAction.propTypes = propTypes;
-FormAction.defaultProps = defaultProps;
-if (false) {
-  FormAction.docs = {
-    componentGroup: 'Atom'
-  };
-}
+FormAction.defaultProps = defaultProps; // if (__DOCS__) {
+//   FormAction.docs = {
+//     componentGroup: 'Atom'
+//   };
+// }

package/es/FormAction/FormAction.module.css

@@ -1,82 +1,82 @@
-.varClass {
-  --footerBg: var(--zdt_formAction_bg);
-  --footerBorder: var(--zdt_formAction_border);
-}
-.wrapperDiv {
-  position: relative;
-  z-index: 1;
-  composes: varClass;
-}
-.footerParent {
-  position: relative;
-  background-color: var(--footerBg);
-  border-top: solid 1px var(--footerBorder);
-}
-.largeFooter {
-  padding-top: var(--zd_size24);
-  padding-bottom: var(--zd_size24);
-}
-.mediumFooter {
-  padding-top: var(--zd_size20);
-  padding-bottom: var(--zd_size20);
-}
-.smallFooter {
-  padding-top: var(--zd_size10);
-  padding-bottom: var(--zd_size10);
-}
-
-[dir=ltr] .largePadding {
-  padding-left: var(--zd_size60);
-}
-
-[dir=rtl] .largePadding {
-  padding-right: var(--zd_size60);
-}
-[dir=ltr] .mediumPadding {
-  padding-left: var(--zd_size50);
-}
-[dir=rtl] .mediumPadding {
-  padding-right: var(--zd_size50);
-}
-[dir=ltr] .xmediumPadding {
-  padding-left: var(--zd_size30);
-}
-[dir=rtl] .xmediumPadding {
-  padding-right: var(--zd_size30);
-}
-[dir=ltr] .smallPadding {
-  padding-left: var(--zd_size25);
-}
-[dir=rtl] .smallPadding {
-  padding-right: var(--zd_size25);
-}
-[dir=ltr] .xsmallPadding {
-  padding-left: var(--zd_size20);
-}
-[dir=rtl] .xsmallPadding {
-  padding-right: var(--zd_size20);
-}
-
-.marginRight {
-  composes: dinblk from '~@zohodesk/components/lib/common/common.module.css';
-}
-[dir=ltr] .largeFooter .marginRight, [dir=ltr] .mediumFooter .marginRight {
-  margin-right: var(--zd_size15);
-}
-[dir=rtl] .largeFooter .marginRight, [dir=rtl] .mediumFooter .marginRight {
-  margin-left: var(--zd_size15);
-}
-[dir=ltr] .smallFooter .marginRight {
-  margin-right: var(--zd_size12);
-}
-[dir=rtl] .smallFooter .marginRight {
-  margin-left: var(--zd_size12);
-}
-
-[dir=ltr] .marginRight:last-child {
-  margin-right: 0;
-}
-
-[dir=rtl] .marginRight:last-child {
-  margin-left: 0;
-}
+.varClass {
+  --footerBg: var(--zdt_formAction_bg);
+  --footerBorder: var(--zdt_formAction_border);
+}
+.wrapperDiv {
+  position: relative;
+  z-index: 1;
+  composes: varClass;
+}
+.footerParent {
+  position: relative;
+  background-color: var(--footerBg);
+  border-top: solid 1px var(--footerBorder);
+}
+.largeFooter {
+  padding-top: var(--zd_size24) ;
+  padding-bottom: var(--zd_size24) ;
+}
+.mediumFooter {
+  padding-top: var(--zd_size20) ;
+  padding-bottom: var(--zd_size20) ;
+}
+.smallFooter {
+  padding-top: var(--zd_size10) ;
+  padding-bottom: var(--zd_size10) ;
+}
+
+[dir=ltr] .largePadding {
+  padding-left: var(--zd_size60) ;
+}
+
+[dir=rtl] .largePadding {
+  padding-right: var(--zd_size60) ;
+}
+[dir=ltr] .mediumPadding {
+  padding-left: var(--zd_size50) ;
+}
+[dir=rtl] .mediumPadding {
+  padding-right: var(--zd_size50) ;
+}
+[dir=ltr] .xmediumPadding {
+  padding-left: var(--zd_size30) ;
+}
+[dir=rtl] .xmediumPadding {
+  padding-right: var(--zd_size30) ;
+}
+[dir=ltr] .smallPadding {
+  padding-left: var(--zd_size25) ;
+}
+[dir=rtl] .smallPadding {
+  padding-right: var(--zd_size25) ;
+}
+[dir=ltr] .xsmallPadding {
+  padding-left: var(--zd_size20) ;
+}
+[dir=rtl] .xsmallPadding {
+  padding-right: var(--zd_size20) ;
+}
+
+.marginRight {
+  composes: dinblk from '~@zohodesk/components/lib/common/common.module.css';
+}
+[dir=ltr] .largeFooter .marginRight, [dir=ltr] .mediumFooter .marginRight {
+  margin-right: var(--zd_size15) ;
+}
+[dir=rtl] .largeFooter .marginRight, [dir=rtl] .mediumFooter .marginRight {
+  margin-left: var(--zd_size15) ;
+}
+[dir=ltr] .smallFooter .marginRight {
+  margin-right: var(--zd_size12) ;
+}
+[dir=rtl] .smallFooter .marginRight {
+  margin-left: var(--zd_size12) ;
+}
+
+[dir=ltr] .marginRight:last-child {
+  margin-right: 0 ;
+}
+
+[dir=rtl] .marginRight:last-child {
+  margin-left: 0 ;
+}

package/es/FormAction/props/defaultProps.js

@@ -1,4 +1,5 @@
 export const defaultProps = {
   size: 'medium',
-  paddingRightClass: ''
+  paddingRightClass: '',
+  dataSelectorId: 'formAction'
 };

package/es/FormAction/props/propTypes.js

@@ -3,5 +3,6 @@ export const propTypes = {
   children: PropTypes.node,
   paddingLeftSize: PropTypes.oneOf(['large', 'medium', 'xmedium', 'small', 'xsmall']),
   paddingRightClass: PropTypes.string,
-  size: PropTypes.oneOf(['large', 'medium', 'small'])
+  size: PropTypes.oneOf(['large', 'medium', 'small']),
+  dataSelectorId: PropTypes.string
 };

package/es/FreezeLayer/FreezeLayer.js

@@ -1,127 +1,74 @@
-import React, { Component } from 'react';
+import React from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
 import { Container } from '@zohodesk/components/lib/Layout';
+import { mergeStyle } from '@zohodesk/components/es/utils/';
 import VelocityAnimationGroup from '@zohodesk/components/lib/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup';
-import style from './FreezeLayer.module.css';
-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;
-  }
-  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();
-    }
-  }
-  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
-          });
-        });
-      }
-    }
-  }
-  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))));
-  }
+import { useZIndex } from '@zohodesk/components/lib/Provider/ZindexProvider';
+import cssJSLogic from './css/cssJSLogic';
+import useFreezeLayer from './useFreezeLayer';
+import style from './css/FreezeLayer.module.css';
+export default function FreezeLayer(props) {
+  let {
+    isActive: propsActive,
+    children,
+    align,
+    childAnimationName,
+    palette,
+    onClick,
+    animationName,
+    runOnMount,
+    forwardRef,
+    isSvgMask,
+    needAutoZindex,
+    customStyle
+  } = props;
+  const finalStyle = mergeStyle(style, customStyle);
+  const {
+    freezeClass
+  } = cssJSLogic({
+    props,
+    style: finalStyle
+  });
+  const getNextIndex = useZIndex();
+  const {
+    isActive,
+    isChildActive,
+    handleClick
+  } = useFreezeLayer({
+    isActive: propsActive,
+    onClick
+  });
+  return /*#__PURE__*/React.createElement(VelocityAnimationGroup, {
+    name: animationName && animationName,
+    isActive: isActive,
+    runOnMount: runOnMount
+  }, /*#__PURE__*/React.createElement("div", {
+    style: isActive && needAutoZindex ? {
+      zIndex: `${getNextIndex()}`
+    } : {},
+    className: freezeClass,
+    onClick: handleClick,
+    "data-drag-parent": true,
+    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',
-    folderName: 'General'
-  };
-}
+FreezeLayer.defaultProps = defaultProps; // if (__DOCS__) {
+//   FreezeLayer.docs = {
+//     componentGroup: 'Atom',
+//     folderName: 'General'
+//   };
+// }

package/es/FreezeLayer/{FreezeLayer.module.css → css/FreezeLayer.module.css}

@@ -1,42 +1,42 @@
-.container {
-  top: 0;
-  bottom: 0;
-  position: absolute;
-  overflow: hidden;
-}[dir=ltr] .container {
-  left: 0;
-  right: 0;
-}[dir=rtl] .container {
-  right: 0;
-  left: 0;
-}
-.default {
-  background-color: var(--zdt_freezelayer_default_bg);
-}
-.dark {
-  background-color: var(--zdt_freezelayer_dark_bg);
-}
-.darkLight {
-  background-color: var(--zdt_freezelayer_darklight_bg);
-}
-.plain {
-  background-color: var(--zdt_freezelayer_plain_bg);
-}
-.snow {
-  background-color: var(--zdt_freezelayer_snow_bg);
-}
-.index3 {
-  z-index: 3;
-}
-.index5 {
-  z-index: 5;
-}
-.index7 {
-  z-index: 7;
-}
-.index10 {
-  z-index: 10;
-}
-.delay {
-  transition-delay: var(--zd_transition2);
-}
+.container {
+  top: 0 ;
+  bottom: 0 ;
+  position: absolute;
+  overflow: hidden;
+}[dir=ltr] .container {
+  left: 0 ;
+  right: 0 ;
+}[dir=rtl] .container {
+  right: 0 ;
+  left: 0 ;
+}
+.default {
+  background-color: var(--zdt_freezelayer_default_bg);
+}
+.dark {
+  background-color: var(--zdt_freezelayer_dark_bg);
+}
+.darkLight {
+  background-color: var(--zdt_freezelayer_darklight_bg);
+}
+.plain {
+  background-color: var(--zdt_freezelayer_plain_bg);
+}
+.snow {
+  background-color: var(--zdt_freezelayer_snow_bg);
+}
+.index3 {
+  z-index: 3;
+}
+.index5 {
+  z-index: 5;
+}
+.index7 {
+  z-index: 7;
+}
+.index10 {
+  z-index: 10;
+}
+.delay {
+  transition-delay: var(--zd_transition2);
+}

package/es/FreezeLayer/css/cssJSLogic.js

@@ -0,0 +1,23 @@
+import { compileClassNames } from '@zohodesk/components/es/utils';
+export default function cssJSLogic(_ref) {
+  let {
+    props,
+    style
+  } = _ref;
+  let {
+    zIndex,
+    palette,
+    isSvgMask,
+    customClass
+  } = props;
+  let zIndexClass = `index${zIndex}`;
+  let freezeClass = compileClassNames({
+    [style.container]: true,
+    [customClass]: !!customClass,
+    [style[zIndexClass]]: !!zIndex,
+    [style[palette]]: !isSvgMask && !!palette
+  });
+  return {
+    freezeClass
+  };
+}

package/es/FreezeLayer/index.js

@@ -0,0 +1,2 @@
+export { default as FreezeLayer } from './FreezeLayer';
+export { default as FreezeLayerPropTypes } from './props/propTypes';

package/es/FreezeLayer/props/defaultProps.js

@@ -4,5 +4,6 @@ export const defaultProps = {
   zIndex: '5',
   isSvgMask: false,
   customClass: '',
+  customStyle: {},
   needAutoZindex: true
 };

package/es/FreezeLayer/props/propTypes.js

@@ -13,5 +13,7 @@ export const propTypes = {
   onClick: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
   palette: PropTypes.oneOf(['dark', 'default', 'darkLight', 'plain', 'snow']),
   runOnMount: PropTypes.bool,
+  customStyle: PropTypes.object,
   zIndex: PropTypes.oneOf(['3', '5', '7', '10'])
-};
+};
+export default propTypes;