@zohodesk/components 1.4.15 → 1.4.17

package/README.md

@@ -2,7 +2,13 @@
 
 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.14
+# 1.4.17
+
+- **Select, MultiSelect** - Fixed scroll jitter for the highlighted option when the virtualizer is enabled.
+- **Select** - `isAnimate` prop supported
+- `Switch_v1 css` - RTL issue on thumb position fixed.
+
+# 1.4.14, 1.4.15 , 1.4.16
 
 - `Common Css`
   - added ltr class renamed to ltr-zone.
@@ -17,7 +23,7 @@ Dot UI is a customizable React component library built to deliver a clean, acces
 # 1.4.12
 
 - `TextBox`
-  - The event is passed as the 4th argument to both handleBlur and handleFocus  
+  - The event is passed as the 4th argument to both onBlur and onFocus  
 - `Common Css`
   - added ltr class for change direction to ltr in rtl mode.
 

package/es/Accordion/Accordion.js

@@ -0,0 +1,85 @@
+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

@@ -0,0 +1,63 @@
+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

@@ -0,0 +1,11 @@
+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

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1,12 @@
+// 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

@@ -0,0 +1,23 @@
+// 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

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

package/es/Accordion/props/defaultProps.js

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,33 @@
+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

@@ -0,0 +1,52 @@
+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

@@ -0,0 +1,14 @@
+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

@@ -0,0 +1,11 @@
+// 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

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

package/es/Animation/props/propTypes.js

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,83 @@
+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

@@ -0,0 +1,139 @@
+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

@@ -0,0 +1,18 @@
+.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 */
+}