@zohodesk/components 1.0.0-temp-83 → 1.0.0-temp-107

package/es/DropDown/DropDownHeading.module.css

@@ -33,14 +33,10 @@
 .light {
   composes: default;
 }
-.light::after, .dark::after {
-  background-color: var(--dropdownheading_underline_bg_color);
-}
-[dir=ltr] .light::after, [dir=ltr] .dark::after {
+.light::after,
+.dark::after {
   left: var(--dropdownheading_underline_left);
-}
-[dir=rtl] .light::after, [dir=rtl] .dark::after {
-  right: var(--dropdownheading_underline_left);
+  background-color: var(--dropdownheading_underline_bg_color);
 }
 
 .dark {

package/es/DropDown/DropDownItem.module.css

@@ -6,32 +6,24 @@
 
   /* dropdownitem user default variables */
   --dropdownitem-user-width: var(--zd_size42);
+  --dropdownitem-user-border-width: 0 0 0 1px/*rtl: 0 1px 0 0*/;
   --dropdownitem-user-border-style: solid;
   --dropdownitem-user-border-color: var(--zdt_dropdown_user_default_border);
   --dropdownitem-user-cursor: pointer;
-}[dir=ltr] .varClass {
-  --dropdownitem-user-border-width: 0 0 0 1px/*rtl: 0 1px 0 0*/;
-}[dir=rtl] .varClass {
-  --dropdownitem-user-border-width: 0 1px 0 0;
 }
 .list {
   composes: varClass;
   composes: dflex alignVertical from '../common/common.module.css';
   position: relative;
+  padding: var(--dropdownitem-padding);
   color: var(--zdt_dropdown_default_text);
   font-size: var(--zd_font_size13);
-  padding: var(--dropdownitem-padding);
+  border-width: 0 0 0 1px/*rtl: 0 1px 0 0*/;
   border-style: solid;
   border-color: var(--dropdownitem-border-color);
   cursor: pointer;
   background-color: var(--dropdownitem-bg-color);
 }
-[dir=ltr] .list {
-  border-width: 0 0 0 1px/*rtl: 0 1px 0 0*/;
-}
-[dir=rtl] .list {
-  border-width: 0 1px 0 0;
-}
 
 .listActive {
   --dropdownitem-border-color: var(--zdt_dropdown_listactive_border);
@@ -41,27 +33,16 @@
   --dropdownitem-bg-color: var(--zdt_dropdown_listhover_bg);
 }
 
-[dir=ltr] .padding {
+.padding {
   --dropdownitem-padding: 0 var(--zd_size50) 0 0/*rtl: 0 0 0 var(--zd_size50)*/;
 }
 
-[dir=rtl] .padding {
-  --dropdownitem-padding: 0 0 0 var(--zd_size50);
-}
-
 .children {
+  margin-right: var(--zd_size10);
   display: inline-block;
   font-size: 0;
 }
 
-[dir=ltr] .children {
-  margin-right: var(--zd_size10);
-}
-
-[dir=rtl] .children {
-  margin-left: var(--zd_size10);
-}
-
 .value {
   composes: dotted flexgrow from '../common/common.module.css';
 }
@@ -70,6 +51,7 @@
   composes: dflex alignVertical alignHorizontal from '../common/common.module.css';
   position: absolute;
   top: 0;
+  right: 0;
   bottom: 0;
   opacity: 0;
   visibility: hidden;
@@ -80,14 +62,6 @@
   cursor: var(--dropdownitem-user-cursor);
 }
 
-[dir=ltr] .user {
-  right: 0;
-}
-
-[dir=rtl] .user {
-  left: 0;
-}
-
 .list:hover .user {
   opacity: 1;
   visibility: visible;

package/es/DropDown/props/propTypes.js

@@ -38,7 +38,8 @@ export const DropDownHeading_propTypes = {
   htmlId: PropTypes.string,
   a11y: PropTypes.shape({
     role: PropTypes.string,
-    ariaLabelledby: PropTypes.string
+    ariaLabelledby: PropTypes.string,
+    ariaLabel: PropTypes.string
   })
 };
 export const DropDownItem_propTypes = {

package/es/FramerAnimation/FramerAnimation.js

@@ -0,0 +1,206 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import { motion, AnimatePresence, AnimateSharedLayout } from "framer-motion";
+export default class FramerAnimation extends Component {
+  constructor(props) {
+    super(props);
+    this.getAnimationVariant = this.getAnimationVariant.bind(this); // this.onDragEnd = this.onDragEnd.bind(this);
+  }
+
+  getAnimationVariant(argm) {
+    const {
+      enterDelay,
+      exitDelay,
+      enterDuration,
+      exitDuration
+    } = this.props;
+
+    switch (argm) {
+      case "fade":
+        return {
+          hide: {
+            opacity: 0,
+            transition: {
+              delay: enterDelay,
+              duration: enterDuration
+            }
+          },
+          show: {
+            opacity: 1,
+            transition: {
+              delay: exitDelay,
+              duration: exitDuration
+            }
+          }
+        };
+
+      case "expand":
+        return {
+          hide: {
+            scale: 0,
+            transition: {
+              delay: enterDelay,
+              duration: enterDuration
+            }
+          },
+          show: {
+            scale: 1,
+            transition: {
+              delay: exitDelay,
+              duration: exitDuration
+            }
+          }
+        };
+
+      case "flyDown":
+        return {
+          hide: {
+            translateY: "-100%",
+            transition: {
+              delay: enterDelay,
+              duration: enterDuration
+            }
+          },
+          show: {
+            translateY: "0%",
+            transition: {
+              delay: exitDelay,
+              duration: exitDuration
+            }
+          }
+        };
+
+      case "flyLeft":
+        return {
+          hide: {
+            translateX: "100%",
+            transition: {
+              delay: enterDelay,
+              duration: enterDuration
+            }
+          },
+          show: {
+            translateX: "0%",
+            transition: {
+              delay: exitDelay,
+              duration: exitDuration
+            }
+          }
+        };
+
+      case "flyRight":
+        return {
+          hide: {
+            translateX: "-100%",
+            transition: {
+              delay: enterDelay,
+              duration: enterDuration
+            }
+          },
+          show: {
+            translateX: "0%",
+            transition: {
+              delay: exitDelay,
+              duration: exitDuration
+            }
+          }
+        };
+
+      case "slideDown":
+        return {
+          hide: {
+            height: 0,
+            overflow: 'hidden',
+            origin: 0,
+            transition: {
+              delay: enterDelay,
+              duration: enterDuration
+            }
+          },
+          show: {
+            height: "auto",
+            overflow: 'hidden',
+            origin: 0,
+            transition: {
+              delay: exitDelay,
+              duration: exitDuration
+            }
+          }
+        };
+    }
+  } // onDragEnd(event, info) {
+  //     const { onDragEnd } = this.props;
+  //     onDragEnd && onDragEnd(event, info)
+  // }
+
+
+  render() {
+    const {
+      runOnMount,
+      children,
+      key,
+      isActive,
+      type,
+      direction,
+      isCustomize,
+      layout,
+      layoutId,
+      animationType,
+      className
+    } = this.props;
+    const variant = this.getAnimationVariant(`${type}${direction}`);
+    return !isCustomize ? runOnMount ? /*#__PURE__*/React.createElement(AnimatePresence, {
+      exitBeforeEnter: true
+    }, isActive ? /*#__PURE__*/React.createElement(motion.div, {
+      key: key,
+      variants: variant,
+      initial: "hide",
+      animate: "show",
+      exit: "hide",
+      layout: layout,
+      layoutId: layoutId,
+      type: animationType,
+      className: className // drag
+      // onDragEnd={this.onDragEnd}
+
+    }, children) : null) : /*#__PURE__*/React.createElement(motion.div, {
+      key: key,
+      variants: variant,
+      animate: isActive ? "hide" : "show",
+      layout: layout,
+      layoutId: layoutId,
+      type: animationType,
+      className: className
+    }, children) : /*#__PURE__*/React.createElement(motion.div, props);
+  }
+
+}
+FramerAnimation.propTypes = {
+  initial: PropTypes.bool,
+  children: PropTypes.node,
+  key: PropTypes.string,
+  type: PropTypes.string,
+  enterDelay: PropTypes.string,
+  exitDelay: PropTypes.string,
+  enterDuration: PropTypes.string,
+  exitDuration: PropTypes.string,
+  layoutId: PropTypes.string,
+  layout: PropTypes.oneOf(["position", "size"]),
+  //or boolean,
+  direction: PropTypes.string,
+  runOnMount: PropTypes.bool,
+  animationType: PropTypes.oneOf(["spring", "tween"]),
+  className: PropTypes.string
+};
+FramerAnimation.defaultProps = {
+  enterDelay: 0,
+  exitDelay: 0,
+  enterDuration: 0.3,
+  exitDuration: 0.3,
+  type: 'fade',
+  direction: '',
+  layout: false,
+  runOnMount: false,
+  className: '',
+  animationType: 'tween'
+};

package/es/FramerAnimation/docs/FramerAnimation__default.docs.js

@@ -0,0 +1,123 @@
+import React from 'react';
+import FramerAnimation from '../FramerAnimation';
+import Select from '../../Select/Select';
+import Button from '../../Button/Button';
+let animationList = [{
+  text: 'fade',
+  type: 'fade',
+  id: 'animate-1'
+}, {
+  text: 'expand',
+  type: 'expand',
+  id: 'animate-2'
+}, {
+  text: 'fly_Left',
+  type: 'fly',
+  direction: 'Left',
+  id: 'animate-3'
+}, {
+  text: 'fly_Right',
+  type: 'fly',
+  direction: 'Right',
+  id: 'animate-4'
+}, {
+  text: 'fly_Down',
+  type: 'fly',
+  direction: 'Down',
+  id: 'animate-5'
+}, {
+  text: 'slide_Down',
+  type: 'slide',
+  direction: 'Down',
+  id: 'animate-6'
+}];
+export default class FramerAnimation__default extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: animationList[0],
+      isActive: false,
+      x: 0,
+      y: 0
+    };
+    this.handleChange = this.handleChange.bind(this);
+    this.handleView = this.handleView.bind(this); // this.onDragEnd = this.onDragEnd.bind(this);
+  }
+
+  handleChange(fieldId, value) {
+    this.setState({
+      value,
+      isActive: false
+    });
+  }
+
+  handleView() {
+    this.setState({
+      isActive: !this.state.isActive
+    });
+  } // onDragEnd(event, info) {
+  //     this.setState({ x: info.point.x, y: info.point.y })
+  // }
+
+
+  render() {
+    let {
+      value,
+      isActive
+    } = this.state;
+    let animate = {
+      width: '200px',
+      height: '100px',
+      background: 'var(--dot_black)',
+      textAlign: 'center',
+      color: 'var(--dot_white)',
+      lineHeight: '100px' // position:' absolute',
+      // left: this.state.x,
+      // top: this.state.y
+
+    };
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: '30%',
+        display: 'flex',
+        marginLeft: "20px"
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginTop: "30px",
+        display: 'flex'
+      }
+    }, /*#__PURE__*/React.createElement(Select, {
+      onChange: this.handleChange,
+      options: animationList,
+      selectedValue: value.id
+    }), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginLeft: "20px",
+        marginRight: "20px"
+      }
+    }, /*#__PURE__*/React.createElement(Button, {
+      onClick: this.handleView
+    }, isActive ? 'show' : 'hide'))), /*#__PURE__*/React.createElement(FramerAnimation, {
+      runOnMount: true,
+      type: value.type,
+      direction: value.direction,
+      isActive: isActive,
+      key: value.id,
+      id: value.id,
+      enterDuration: "0.8",
+      exitrDuration: "0.8" // onDragEnd={this.onDragEnd}
+
+    }, /*#__PURE__*/React.createElement("div", {
+      style: animate
+    }, "Animation"))));
+  }
+
+}
+
+if (false) {
+  FramerAnimation__default.docs = {
+    componentGroup: 'Animation',
+    folderName: 'Animations'
+  };
+}

package/es/Label/Label.js

@@ -19,7 +19,8 @@ export default class Label extends React.Component {
       onClick,
       dataId,
       variant,
-      customClass
+      customClass,
+      id
     } = this.props;
     return /*#__PURE__*/React.createElement("label", {
       className: `${style.label} ${style[type]} ${style[size]} ${colors[palette]} ${style[`font_${variant}`]}
@@ -27,7 +28,8 @@ export default class Label extends React.Component {
       htmlFor: htmlFor,
       "data-title": title,
       "data-id": dataId,
-      onClick: onClick
+      onClick: onClick,
+      id: id
     }, text);
   }
 }

package/es/ListItem/ListContainer.js

@@ -50,7 +50,8 @@ const ListContainer = props => {
   } = useResponsiveReceiver('Helmet', responsiveFunc);
   const {
     role,
-    ariaSelected
+    ariaSelected,
+    ariaLabel
   } = a11y;
   const options = {};
   if (isLink) {
@@ -65,8 +66,8 @@ const ListContainer = props => {
   }
   return /*#__PURE__*/React.createElement(Container, _extends({
     role: role,
-    "data-a11y-inside-focus": true,
     "aria-selected": ariaSelected,
+    "aria-label": ariaLabel,
     isCover: false,
     align: "vertical",
     alignBox: "row",

package/es/ListItem/ListItem.js

@@ -74,7 +74,8 @@ export default class ListItem extends React.Component {
       customTickIcon = ''
     } = customClass;
     let {
-      ariaHidden = true
+      ariaHidden = true,
+      'aria-label': ariaLabel
     } = a11y;
     let tickIconPalette = style[`${palette}Tick`] ? style[`${palette}Tick`] : '';
     let dataIdString = dataId ? dataId : value ? String(value).replace("'", '_') : 'listItem';

package/es/ListItem/ListItem.module.css

@@ -4,6 +4,8 @@
   --listitem_padding: var(--zd_size9) var(--zd_size20);
   --listitem_border_width: 0;
   --listitem_border_color: var(--zdt_listitem_default_border);
+  --listitem_avatar_margin: 0 var(--zd_size15) 0 0
+    /*rtl: 0 0 0 var(--zd_size15)*/;
   --listitem_bg_color: var(--zdt_listitem_default_bg);
   --listitem_active_bg_color: var(--zdt_listitem_primary_bg);
   --listitem_height: auto;
@@ -14,11 +16,6 @@
 
   /* listitem tick icon default variables */
   --listitem_tickicon_color: var(--zdt_listitem_default_tickicon);
-}[dir=ltr] .varClass {
-  --listitem_avatar_margin: 0 var(--zd_size15) 0 0
-    /*rtl: 0 0 0 var(--zd_size15)*/;
-}[dir=rtl] .varClass {
-  --listitem_avatar_margin: 0 0 0 var(--zd_size15);
 }
 .list {
   composes: varClass;
@@ -26,49 +23,40 @@
   list-style: none;
   color: var(--listitem_text_color);
   font-size: var(--zd_font_size13);
-  height: var(--listitem_height);
-  min-height: var(--listitem_min_height);
-  text-decoration: none;
   padding: var(--listitem_padding);
   border-width: var(--listitem_border_width);
   border-style: solid;
   border-color: var(--listitem_border_color);
+  height: var(--listitem_height);
+  min-height: var(--listitem_min_height);
   cursor: pointer;
+  text-decoration: none;
 }
-.list, .default, .secondary {
+.list,
+.default,
+.secondary {
   background-color: var(--listitem_bg_color);
 }
-[dir=ltr] .withBorder {
+.withBorder {
   --listitem_border_width: 0 0 0 1px /*rtl: 0 1px 0 0*/;
 }
-[dir=rtl] .withBorder {
-  --listitem_border_width: 0 1px 0 0;
-}
 .active {
   --listitem_border_color: var(--zdt_listitem_active_border);
 }
-[dir=ltr] .small {
+.small {
   --listitem_padding: var(--zd_size9) var(--zd_size3) var(--zd_size9)
     var(--zd_size5)
     /*rtl: var(--zd_size9) var(--zd_size5) var(--zd_size9) var(--zd_size3)*/;
 }
-[dir=rtl] .small {
-  --listitem_padding: var(--zd_size9) var(--zd_size5) var(--zd_size9) var(--zd_size3);
-}
 .medium {
   --listitem_padding: var(--zd_size9) var(--zd_size20);
   --listitem_min_height: var(--zd_size35);
 }
 .large {
-  --listitem_height: var(--zd_size48);
-}
-[dir=ltr] .large {
   --listitem_padding: var(--zd_size10) var(--zd_size3) var(--zd_size10)
     var(--zd_size25)
     /*rtl: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size3)*/;
-}
-[dir=rtl] .large {
-  --listitem_padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size3);
+  --listitem_height: var(--zd_size48);
 }
 .value,
 .children {
@@ -76,13 +64,8 @@
 }
 .iconBox {
   width: var(--zd_size20);
-  text-align: center;
-}
-[dir=ltr] .iconBox {
   margin-right: var(--zd_size10);
-}
-[dir=rtl] .iconBox {
-  margin-left: var(--zd_size10);
+  text-align: center;
 }
 .iconBox,
 .leftAvatar {
@@ -92,17 +75,15 @@
   margin: var(--listitem_avatar_margin);
 }
 
-.defaultHover, .primaryHover, .secondaryHover, .darkHover {
+.defaultHover,
+.primaryHover,
+.secondaryHover,
+.darkHover {
   background-color: var(--listitem_highlight_bg_color);
 }
 .activewithBorder {
-  --listitem_border_color: var(--zdt_listitem_active_border);
-}
-[dir=ltr] .activewithBorder {
   --listitem_border_width: 0 0 0 1px /*rtl: 0 1px 0 0*/;
-}
-[dir=rtl] .activewithBorder {
-  --listitem_border_width: 0 1px 0 0;
+  --listitem_border_color: var(--zdt_listitem_active_border);
 }
 
 .defaultHover,
@@ -133,7 +114,10 @@
   --listitem_bg_color: var(--zdt_listitem_dark_effect_bg);
   --listitem_highlight_bg_color: var(--zdt_listitem_dark_effect_bg);
 }
-.activedefault, .activeprimary, .activesecondary, .activedark {
+.activedefault,
+.activeprimary,
+.activesecondary,
+.activedark {
   background-color: var(--listitem_active_bg_color);
 }
 .activedefault,
@@ -159,15 +143,8 @@
 .darkTick {
   position: absolute;
   color: var(--listitem_tickicon_color);
-}
-
-[dir=ltr] .tickIcon, [dir=ltr] .defaultTick, [dir=ltr] .darkTick {
   right: var(--zd_size20);
 }
-
-[dir=rtl] .tickIcon, [dir=rtl] .defaultTick, [dir=rtl] .darkTick {
-  left: var(--zd_size20);
-}
 .defaultTick {
   --listitem_tickicon_color: var(--zdt_listitem_default_tickicon);
 }
@@ -177,33 +154,24 @@
 .defaultTick > i {
   display: block;
 }
-[dir=ltr] .smallwithTick {
+.smallwithTick {
   --listitem_padding: var(--zd_size9) var(--zd_size39) var(--zd_size9)
     var(--zd_size5)
     /*rtl: var(--zd_size9) var(--zd_size5) var(--zd_size9) var(--zd_size39)*/;
 }
-[dir=rtl] .smallwithTick {
-  --listitem_padding: var(--zd_size9) var(--zd_size5) var(--zd_size9) var(--zd_size39);
-}
-[dir=ltr] .mediumwithTick {
+.mediumwithTick {
   --listitem_padding: var(--zd_size9) var(--zd_size39) var(--zd_size9)
     var(--zd_size20)
     /*rtl: var(--zd_size9) var(--zd_size20) var(--zd_size9) var(--zd_size39)*/;
 }
-[dir=rtl] .mediumwithTick {
-  --listitem_padding: var(--zd_size9) var(--zd_size20) var(--zd_size9) var(--zd_size39);
-}
-[dir=ltr] .largewithTick {
+.largewithTick {
   --listitem_padding: var(--zd_size10) var(--zd_size39) var(--zd_size10)
     var(--zd_size25)
     /*rtl: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size39)*/;
 }
-[dir=rtl] .largewithTick {
-  --listitem_padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size39);
-}
 .responsiveHeight {
   --listitem_min_height: var(--zd_size45);
-  font-size: var(--zd_font_size15);
   padding-top: var(--zd_size10);
   padding-bottom: var(--zd_size10);
+  font-size: var(--zd_font_size15);
 }

package/es/MultiSelect/MultiSelect.js

@@ -818,7 +818,8 @@ export class MultiSelectComponent extends React.Component {
       disabledOptions,
       boxSize,
       autoComplete,
-      isLoading
+      isLoading,
+      ariaLabelledby
     } = this.props;
     const {
       clearText = 'Clear all',
@@ -907,7 +908,8 @@ export class MultiSelectComponent extends React.Component {
         ariaExpanded: !isReadOnly && !isDisabled && !disableAction && isPopupOpen ? true : false,
         ariaHaspopup: true,
         ariaRequired: true,
-        ariaDescribedby: ariaErrorId
+        ariaDescribedby: ariaErrorId,
+        ariaLabelledby: ariaLabelledby
       },
       autoComplete: autoComplete
     }, /*#__PURE__*/React.createElement(Container, {