@zohodesk/components 1.4.12 → 1.4.13

package/README.md

@@ -2,6 +2,12 @@
 
 Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development across projects.
 
+# 1.4.13
+
+- `Common Css`
+  - added ltr-dir class for change direction to ltr in rtl mode
+
+
 # 1.4.12
 
 - `TextBox`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.4.12",
+  "version": "1.4.13",
   "main": "es/index.js",
   "module": "es/index.js",
   "private": false,
@@ -39,7 +39,7 @@
     "build:css:umd": "npm run clean &&  npm run init && react-cli build:css:umd",
     "coverage": "react-cli coverage",
     "prepare": "npm run init &&  npm run css:build ",
-    "prepublishOnly": "node prePublish.js  && npm run downloadOnly && npm run css:review && npm run review:props ",
+    "prepublishOnly": "node prePublish.js && npm run downloadOnly && npm run test-clean && npm run customTest  && npm run css:review && npm run review:props ",
     "postpublish": "node postPublish.js",
     "report": "react-cli publish:report",
     "test": "react-cli test",

package/es/Accordion/Accordion.js

@@ -1,85 +0,0 @@
-import React from 'react';
-import { Accordion_defaultProps } from "./props/defaultProps";
-import { Accordion_propTypes } from "./props/propTypes";
-export default class Accordion extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      selectedItem: this.props.selectedItem
-    };
-    this.selectMenu = this.selectMenu.bind(this);
-  }
-
-  selectMenu(selectedItem) {
-    let {
-      onSelect,
-      disableInternalState
-    } = this.props;
-
-    if (onSelect) {
-      onSelect(selectedItem);
-    }
-
-    !disableInternalState && this.setState({
-      selectedItem
-    });
-  }
-
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (this.props.selectedItem !== nextProps.selectedItem && !this.props.disableInternalState) {
-      this.setState({
-        selectedItem: nextProps.selectedItem
-      });
-    }
-  }
-
-  render() {
-    let {
-      className,
-      height,
-      unMount,
-      disableInternalState,
-      selectedItem: propSelectedItem,
-      a11y,
-      dataId,
-      dataSelectorId
-    } = this.props;
-    let {
-      selectedItem
-    } = this.state;
-    let children = React.Children.map(this.props.children, child => {
-      if (child) {
-        return /*#__PURE__*/React.cloneElement(child, {
-          selectedItem: disableInternalState ? propSelectedItem : selectedItem,
-          selectMenu: this.selectMenu,
-          unMount: unMount
-        });
-      }
-    });
-    let {
-      role,
-      ariaExpanded,
-      ariaHaspopup
-    } = a11y;
-    return /*#__PURE__*/React.createElement("div", {
-      className: className ? className : '',
-      style: {
-        height
-      },
-      role: role,
-      "aria-expanded": ariaExpanded,
-      "aria-haspopup": ariaHaspopup,
-      "data-id": dataId,
-      "data-test-id": dataId,
-      "data-selector-id": dataSelectorId
-    }, children);
-  }
-
-}
-Accordion.propTypes = Accordion_propTypes;
-Accordion.defaultProps = Accordion_defaultProps; // if (__DOCS__) {
-//   Accordion.docs = {
-//     componentGroup: 'Animation',
-//     folderName: 'Style Guide'
-//   };
-// }

package/es/Accordion/AccordionItem.js

@@ -1,63 +0,0 @@
-import React from 'react';
-import { AccordionItem_defaultProps } from "./props/defaultProps";
-import { AccordionItem_propTypes } from "./props/propTypes";
-import VelocityAnimation from "../VelocityAnimation/VelocityAnimation/VelocityAnimation";
-import VelocityAnimationGroup from "../VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup";
-export default class AccordionItem extends React.Component {
-  constructor(props) {
-    super(props);
-    this.equalityCheck = this.equalityCheck.bind(this);
-  }
-
-  equalityCheck() {
-    let {
-      equalityCheck,
-      selectedItem,
-      id
-    } = this.props;
-    return equalityCheck ? equalityCheck(id, selectedItem) : selectedItem == id;
-  }
-
-  render() {
-    let {
-      id,
-      selectMenu,
-      className,
-      children,
-      dataId,
-      dataSelectorId,
-      unMount,
-      unMountItem,
-      a11y,
-      innerClass
-    } = this.props;
-    unMountItem = unMountItem !== undefined ? unMountItem : unMount;
-    let {
-      role
-    } = a11y;
-    return /*#__PURE__*/React.createElement("div", {
-      className: className ? className : '',
-      "data-id": dataId,
-      "data-test-id": dataId,
-      role: role,
-      "data-selector-id": dataSelectorId
-    }, /*#__PURE__*/React.createElement("div", {
-      className: innerClass ? innerClass : '',
-      onClick: selectMenu.bind(this, id)
-    }, children[0]), unMountItem ? /*#__PURE__*/React.createElement(VelocityAnimationGroup, {
-      name: "slideDown",
-      isActive: this.equalityCheck()
-    }, children[1]) : /*#__PURE__*/React.createElement(VelocityAnimation, {
-      name: "slideDown",
-      isActive: this.equalityCheck()
-    }, children[1]));
-  }
-
-}
-AccordionItem.propTypes = AccordionItem_propTypes;
-AccordionItem.defaultProps = AccordionItem_defaultProps; // if (__DOCS__) {
-//   AccordionItem.docs = {
-//     componentGroup: 'Animation',
-//     folderName: 'Style Guide'
-//   };
-// }

package/es/Accordion/__tests__/Accordion.spec.js

@@ -1,11 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import Accordion from "../Accordion";
-describe('Accordion', () => {
-  test('rendering the defult props', () => {
-    const {
-      asFragment
-    } = render( /*#__PURE__*/React.createElement(Accordion, null));
-    expect(asFragment()).toMatchSnapshot();
-  });
-});

package/es/Accordion/__tests__/AccordionItem.spec.js

@@ -1,16 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import AccordionItem from "../AccordionItem";
-describe('AccordionItem', () => {
-  test('rendering the defult props', () => {
-    const mockOnClick = jest.fn();
-    const mockSelectMenu = jest.fn();
-    const {
-      asFragment
-    } = render( /*#__PURE__*/React.createElement(AccordionItem, {
-      onRemove: mockOnClick,
-      selectMenu: mockSelectMenu
-    }, /*#__PURE__*/React.createElement("div", null, " Accordin list "), /*#__PURE__*/React.createElement("div", null, " Accordin list2 ")));
-    expect(asFragment()).toMatchSnapshot();
-  });
-});

package/es/Accordion/__tests__/__snapshots__/Accordion.spec.js.snap

@@ -1,12 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Accordion rendering the defult props 1`] = `
-<DocumentFragment>
-  <div
-    class=""
-    data-id="Accordion"
-    data-selector-id="accordion"
-    data-test-id="Accordion"
-  />
-</DocumentFragment>
-`;

package/es/Accordion/__tests__/__snapshots__/AccordionItem.spec.js.snap

@@ -1,23 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`AccordionItem rendering the defult props 1`] = `
-<DocumentFragment>
-  <div
-    class=""
-    data-id="AccordionItem"
-    data-selector-id="accordionItem"
-    data-test-id="AccordionItem"
-  >
-    <div
-      class=""
-    >
-      <div>
-         Accordin list 
-      </div>
-    </div>
-    <div>
-       Accordin list2 
-    </div>
-  </div>
-</DocumentFragment>
-`;

package/es/Accordion/index.js

@@ -1,2 +0,0 @@
-export { default as Accordion } from "./Accordion";
-export { default as AccordionItem } from "./AccordionItem";

package/es/Accordion/props/defaultProps.js

@@ -1,12 +0,0 @@
-export const Accordion_defaultProps = {
-  unMount: true,
-  disableInternalState: false,
-  a11y: {},
-  dataId: 'Accordion',
-  dataSelectorId: 'accordion'
-};
-export const AccordionItem_defaultProps = {
-  a11y: {},
-  dataId: 'AccordionItem',
-  dataSelectorId: 'accordionItem'
-};

package/es/Accordion/props/propTypes.js

@@ -1,33 +0,0 @@
-import PropTypes from 'prop-types';
-export const Accordion_propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  dataId: PropTypes.string,
-  dataSelectorId: PropTypes.string,
-  disableInternalState: PropTypes.bool,
-  height: PropTypes.string,
-  onSelect: PropTypes.func,
-  selectedItem: PropTypes.string.isRequired,
-  unMount: PropTypes.bool,
-  a11y: PropTypes.shape({
-    role: PropTypes.string,
-    ariaExpanded: PropTypes.bool,
-    ariaHaspopup: PropTypes.bool
-  })
-};
-export const AccordionItem_propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  dataId: PropTypes.string,
-  dataSelectorId: PropTypes.string,
-  equalityCheck: PropTypes.func,
-  id: PropTypes.string,
-  selectMenu: PropTypes.func,
-  selectedItem: PropTypes.string,
-  unMount: PropTypes.bool,
-  unMountItem: PropTypes.bool,
-  innerClass: PropTypes.string,
-  a11y: PropTypes.shape({
-    role: PropTypes.string
-  })
-};

package/es/Animation/Animation.js

@@ -1,52 +0,0 @@
-import React from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
-import { CSSTransition } from 'react-transition-group';
-import { animationStyle } from "./utils";
-export default class Animation extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    let {
-      name,
-      enterDuration,
-      exitDuration,
-      children,
-      isActive,
-      unmountOnExit,
-      onEntered = () => {},
-      onExit = () => {},
-      delayClassName = null
-    } = this.props;
-    let newClassNames = delayClassName ? Object.assign({}, animationStyle[name], {
-      exit: `${delayClassName} ${animationStyle[name].exit}`
-    }) : animationStyle[name];
-    return /*#__PURE__*/React.createElement(CSSTransition, {
-      classNames: newClassNames && newClassNames,
-      in: isActive,
-      appear: true,
-      enter: true,
-      exit: true,
-      mountOnEnter: false,
-      unmountOnExit: unmountOnExit,
-      timeout: {
-        enter: enterDuration,
-        exit: exitDuration
-      },
-      onEntered: onEntered,
-      onExit: onExit
-    }, /*#__PURE__*/React.createElement(React.Fragment, null, children));
-  }
-
-}
-Animation.propTypes = propTypes;
-Animation.defaultProps = defaultProps; // if (__DOCS__) {
-//   Animation.docs = {
-//     componentGroup: 'Animation',
-//     folderName: 'Style Guide',
-//     external: true,
-//     description: ' '
-//   };
-// }

package/es/Animation/__tests__/Animation.spec.js

@@ -1,14 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import Animation from "../Animation";
-describe('Animation', () => {
-  test('rendering the defult props', () => {
-    const {
-      asFragment
-    } = render( /*#__PURE__*/React.createElement(Animation, {
-      isActive: true,
-      name: "zoomIn"
-    }, /*#__PURE__*/React.createElement("div", null, " Test Animation")));
-    expect(asFragment()).toMatchSnapshot();
-  });
-});

package/es/Animation/__tests__/__snapshots__/Animation.spec.js.snap

@@ -1,11 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Animation rendering the defult props 1`] = `
-<DocumentFragment>
-  <div
-    class="zoomInEnter zoomInEnterActive"
-  >
-     Test Animation
-  </div>
-</DocumentFragment>
-`;

package/es/Animation/props/defaultProps.js

@@ -1,7 +0,0 @@
-export const defaultProps = {
-  enterDuration: 300,
-  exitDuration: 300,
-  isActive: false,
-  name: 'fadeIn',
-  unmountOnExit: true
-};

package/es/Animation/props/propTypes.js

@@ -1,12 +0,0 @@
-import PropTypes from 'prop-types';
-export const propTypes = {
-  children: PropTypes.node,
-  delayClassName: PropTypes.string,
-  enterDuration: PropTypes.number,
-  exitDuration: PropTypes.number,
-  isActive: PropTypes.bool,
-  name: PropTypes.oneOf(['zoomIn', 'scaleIn', 'fadeIn', 'slideLeft', 'slideDown', 'skewIn', 'default', 'none']),
-  onEntered: PropTypes.func,
-  onExit: PropTypes.func,
-  unmountOnExit: PropTypes.bool
-};

package/es/Animation/utils.js

@@ -1,83 +0,0 @@
-import style from "../common/transition.module.css";
-export const animationStyle = {
-  zoomIn: {
-    enter: style.zoomInEnter,
-    enterActive: style.zoomInEnterActive,
-    enterDone: style.zoomInEnterActive,
-    exit: style.zoomInLeave,
-    exitActive: style.zoomInLeaveActive,
-    exitDone: style.zoomInLeaveActive,
-    appear: style.zoomInEnter,
-    appearActive: style.zoomInEnterActive
-  },
-  scaleIn: {
-    enter: style.scaleInEnter,
-    enterActive: style.scaleInEnterActive,
-    enterDone: style.scaleInEnterActive,
-    exit: style.scaleInLeave,
-    exitActive: style.scaleInLeaveActive,
-    exitDone: style.scaleInLeaveActive,
-    appear: style.scaleInEnter,
-    appearActive: style.scaleInEnterActive
-  },
-  fadeIn: {
-    enter: style.fadeInEnter,
-    enterActive: style.fadeInEnterActive,
-    enterDone: style.fadeInEnterActive,
-    exit: style.fadeInLeave,
-    exitActive: style.fadeInLeaveActive,
-    exitDone: style.fadeInLeaveActive,
-    appear: style.fadeInEnter,
-    appearActive: style.fadeInEnterActive
-  },
-  slideLeft: {
-    enter: style.slideLeftEnter,
-    enterActive: style.slideLeftEnterActive,
-    enterDone: style.slideLeftEnterActive,
-    exit: style.slideLeftLeave,
-    exitActive: style.slideLeftLeaveActive,
-    exitDone: style.slideLeftLeaveActive,
-    appear: style.slideLeftEnter,
-    appearActive: style.slideLeftEnterActive
-  },
-  slideDown: {
-    enter: style.slideDownEnter,
-    enterActive: style.slideDownEnterActive,
-    enterDone: style.slideDownEnterActive,
-    exit: style.slideDownLeave,
-    exitActive: style.slideDownLeaveActive,
-    exitDone: style.slideDownLeaveActive,
-    appear: style.slideDownEnter,
-    appearActive: style.slideDownEnterActive
-  },
-  skewIn: {
-    enter: style.skewInEnter,
-    enterActive: style.skewInEnterActive,
-    enterDone: style.skewInEnterActive,
-    exit: style.skewInLeave,
-    exitActive: style.skewInLeaveActive,
-    exitDone: style.skewInLeaveActive,
-    appear: style.skewInEnter,
-    appearActive: style.skewInEnterActive
-  },
-  none: {
-    enter: style.noneEnter,
-    enterActive: style.noneEnterActive,
-    enterDone: style.noneEnterActive,
-    exit: style.noneLeave,
-    exitActive: style.noneLeaveActive,
-    exitDone: style.noneLeaveActive,
-    appear: style.noneEnter,
-    appearActive: style.noneEnterActive
-  },
-  default: {
-    enter: style.defaultEnter,
-    enterActive: style.defaultEnterActive,
-    enterDone: style.defaultEnterActive,
-    exit: style.defaultLeave,
-    exitActive: style.defaultLeaveActive,
-    exitDone: style.defaultLeaveActive,
-    appear: style.defaultEnter,
-    appearActive: style.defaultEnterActive
-  }
-};

package/es/AppContainer/AppContainer.js

@@ -1,139 +0,0 @@
-import React from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
-import { Container, Box } from "../Layout";
-import Tooltip from "../Tooltip/Tooltip";
-import "../common/basic.module.css";
-import '@zohodesk/variables/assets/colorVariables.module.css';
-import '@zohodesk/variables/assets/dotVariables.module.css';
-import '@zohodesk/variables/assets/sizeVariables.module.css';
-import '@zohodesk/variables/assets/fontsizeVariables.module.css';
-import '@zohodesk/variables/es/fontFamilyVariables.module.css';
-import '@zohodesk/variables/assets/transitionVariables.module.css';
-import '@zohodesk/variables/assets/no_transitionVariables.module.css';
-import "../common/a11y.module.css";
-import "../common/boxShadow.module.css";
-import style from "./AppContainer.module.css";
-import { getLibraryConfig, setLibraryConfig } from "../Provider/Config";
-export default class AppContainer extends React.Component {
-  constructor(props) {
-    super(props);
-    this.setTooltipRef = this.setTooltipRef.bind(this);
-    this.handleOver = this.handleOver.bind(this);
-    this.mouseOverDispatch = this.mouseOverDispatch.bind(this);
-    this.removeTimeout = this.removeTimeout.bind(this);
-    this.getContainerRef = this.getContainerRef.bind(this);
-    this.timer = null;
-    this.tooltipDebounce = getLibraryConfig('tooltipDebounce');
-    setLibraryConfig({
-      getTooltipContainer: () => this.containerElement
-    });
-  }
-
-  mouseOverDispatch(e) {
-    if (this.tooltipRef) {
-      this.tooltipRef.handleOver(e, this.containerElement);
-    }
-  }
-
-  removeTimeout() {
-    if (this.timer) {
-      this.timer = clearTimeout(this.timer);
-    }
-  }
-
-  handleOver(e) {
-    if (this.timer) {
-      this.timer = clearTimeout(this.timer);
-    }
-
-    this.timer = setTimeout(() => this.mouseOverDispatch(e), this.tooltipDebounce);
-  }
-
-  getContainerRef(ref) {
-    let {
-      eleRef
-    } = this.props;
-    this.containerElement = ref;
-    eleRef && eleRef(ref);
-  }
-
-  setTooltipRef(ref) {
-    this.tooltipRef = ref;
-  }
-
-  componentDidMount() {
-    let {
-      needTooltip
-    } = this.props;
-
-    if (this.containerElement && needTooltip) {
-      this.containerElement.addEventListener('mouseover', this.handleOver, false);
-      this.containerElement.addEventListener('mouseout', this.removeTimeout, false);
-      this.tooltipRef.observeElement();
-    }
-  }
-
-  componentWillUnmount() {
-    let {
-      needTooltip
-    } = this.props;
-
-    if (this.containerElement && needTooltip) {
-      this.containerElement.removeEventListener('mouseover', this.handleOver, false);
-      this.containerElement.removeEventListener('mouseout', this.removeTimeout, false);
-      this.tooltipRef.unObserveElement();
-    }
-
-    setLibraryConfig({
-      getTooltipContainer: () => null
-    });
-  }
-
-  render() {
-    let {
-      className,
-      children,
-      tagName,
-      dataId,
-      dataSelectorId,
-      tooltipClass,
-      tooltipParentClass,
-      needTooltip,
-      customProps
-    } = this.props;
-    let {
-      ContainerProps = {},
-      TooltipProps = {},
-      ExtraProps = {}
-    } = customProps;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Container, {
-      className: `${style.container} ${className}`,
-      dataId: dataId,
-      dataSelectorId: dataSelectorId,
-      tagName: tagName,
-      eleRef: this.getContainerRef,
-      ...ContainerProps,
-      ...ExtraProps
-    }, /*#__PURE__*/React.createElement(Box, {
-      flexible: true
-    }, children)), needTooltip ? /*#__PURE__*/React.createElement("div", { ...ExtraProps,
-      className: `${style.container} ${style.tooltip} ${tooltipParentClass}`,
-      "data-id": `${dataId}_tooltip`,
-      "data-test-id": `${dataId}_tooltip`,
-      "data-selector-id": `${dataSelectorId}_tooltip`
-    }, /*#__PURE__*/React.createElement(Tooltip, {
-      ref: this.setTooltipRef,
-      customClass: tooltipClass,
-      ...TooltipProps
-    })) : null);
-  }
-
-}
-AppContainer.propTypes = propTypes;
-AppContainer.defaultProps = defaultProps; // if (__DOCS__) {
-//   AppContainer.docs = {
-//     componentGroup: 'Template',
-//     folderName: 'Style Guide'
-//   };
-// }

package/es/AppContainer/AppContainer.module.css

@@ -1,18 +0,0 @@
-.container,
-.container *,
-.container ::after,
-.container ::before {
-  outline: 0;
-  box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  -ms-box-sizing: border-box;
-}
-.container {
-  font-family: var(--zd_regular);
-}
-.tooltip {
-  height: 0 ;
-  font-size: 0 ;
-  /* contain:strict */
-}