@zohodesk/components 1.2.4 → 1.2.5

package/README.md

@@ -32,6 +32,10 @@ In this Package, we Provide Some Basic Components to Build Web App
 - TextBoxIcon
 - Tooltip
 
+# 1.2.5
+
+- v1 folder remove entry from npmignore
+
 # 1.2.4
 
 - **Typography**  new component added

package/coverage/Button/Button.js.html

@@ -298,7 +298,7 @@ Button.propTypes = propTypes;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2023-08-28T16:23:55.587Z
+                at 2023-08-28T16:48:16.868Z
             </div>
         <script src="../prettify.js"></script>
         <script>

package/coverage/Button/css/Button.module.css.html

@@ -1426,7 +1426,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2023-08-28T16:23:55.587Z
+                at 2023-08-28T16:48:16.868Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/Button/css/cssJSLogic.js.html

@@ -199,7 +199,7 @@ export default function cssJSLogic({ props, style }) {
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2023-08-28T16:23:55.587Z
+                at 2023-08-28T16:48:16.868Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/Button/css/index.html

@@ -116,7 +116,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2023-08-28T16:23:55.587Z
+                at 2023-08-28T16:48:16.868Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/Button/index.html

@@ -101,7 +101,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2023-08-28T16:23:55.587Z
+                at 2023-08-28T16:48:16.868Z
             </div>
         <script src="../prettify.js"></script>
         <script>

package/coverage/Button/props/defaultProps.js.html

@@ -127,7 +127,7 @@ export const defaultProps = {
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2023-08-28T16:23:55.587Z
+                at 2023-08-28T16:48:16.868Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/Button/props/index.html

@@ -116,7 +116,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2023-08-28T16:23:55.587Z
+                at 2023-08-28T16:48:16.868Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/Button/props/propTypes.js.html

@@ -193,7 +193,7 @@ export default propTypes;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2023-08-28T16:23:55.587Z
+                at 2023-08-28T16:48:16.868Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/Buttongroup/Buttongroup.js.html

@@ -205,7 +205,7 @@ Buttongroup.propTypes = propTypes;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2023-08-28T16:23:55.587Z
+                at 2023-08-28T16:48:16.868Z
             </div>
         <script src="../prettify.js"></script>
         <script>

package/coverage/Buttongroup/Buttongroup.module.css.html

@@ -283,7 +283,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2023-08-28T16:23:55.587Z
+                at 2023-08-28T16:48:16.868Z
             </div>
         <script src="../prettify.js"></script>
         <script>

package/coverage/Buttongroup/index.html

@@ -116,7 +116,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2023-08-28T16:23:55.587Z
+                at 2023-08-28T16:48:16.868Z
             </div>
         <script src="../prettify.js"></script>
         <script>

package/coverage/Buttongroup/props/defaultProps.js.html

@@ -88,7 +88,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2023-08-28T16:23:55.587Z
+                at 2023-08-28T16:48:16.868Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/Buttongroup/props/index.html

@@ -116,7 +116,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2023-08-28T16:23:55.587Z
+                at 2023-08-28T16:48:16.868Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/Buttongroup/props/propTypes.js.html

@@ -100,7 +100,7 @@ export const propTypes = {
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2023-08-28T16:23:55.587Z
+                at 2023-08-28T16:48:16.868Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/index.html

@@ -176,7 +176,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2023-08-28T16:23:55.587Z
+                at 2023-08-28T16:48:16.868Z
             </div>
         <script src="prettify.js"></script>
         <script>

package/coverage/utils/dummyFunction.js.html

@@ -73,7 +73,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2023-08-28T16:23:55.587Z
+                at 2023-08-28T16:48:16.868Z
             </div>
         <script src="../prettify.js"></script>
         <script>

package/coverage/utils/index.html

@@ -101,7 +101,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2023-08-28T16:23:55.587Z
+                at 2023-08-28T16:48:16.868Z
             </div>
         <script src="../prettify.js"></script>
         <script>

package/es/v1/Accordion/Accordion.js

@@ -0,0 +1,65 @@
+import React, { useState, useEffect } from 'react';
+import { Accordion_defaultProps } from '../../Accordion/props/defaultProps';
+import { Accordion_propTypes } from '../../Accordion/props/propTypes';
+export default function Accordion(props) {
+  const {
+    className,
+    height,
+    unMount,
+    disableInternalState,
+    selectedItem: propSelectedItem,
+    a11y,
+    dataId,
+    dataSelectorId,
+    onSelect,
+    children
+  } = props;
+  const {
+    role,
+    ariaExpanded,
+    ariaHaspopup
+  } = a11y;
+  const [selectedItem, setSelectedItem] = useState(propSelectedItem);
+
+  function selectMenu(selectedItem) {
+    if (onSelect) {
+      onSelect(selectedItem);
+    }
+
+    !disableInternalState && setSelectedItem(selectedItem);
+  }
+
+  useEffect(() => {
+    if (!disableInternalState) {
+      setSelectedItem(propSelectedItem);
+    }
+  }, [propSelectedItem]);
+  let renderChildren = React.Children.map(children, child => {
+    if (child) {
+      return /*#__PURE__*/React.cloneElement(child, {
+        selectedItem: disableInternalState ? propSelectedItem : selectedItem,
+        selectMenu: selectMenu,
+        unMount: unMount
+      });
+    }
+  });
+  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
+  }, renderChildren);
+}
+Accordion.propTypes = Accordion_propTypes;
+Accordion.defaultProps = Accordion_defaultProps; // if (__DOCS__) {
+//   Accordion.docs = {
+//     componentGroup: 'Animation',
+//     folderName: 'Style Guide'
+//   };
+// }

package/es/v1/Accordion/AccordionItem.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import { AccordionItem_defaultProps } from '../../Accordion/props/defaultProps';
+import { AccordionItem_propTypes } from '../../Accordion/props/propTypes';
+import VelocityAnimation from '../VelocityAnimation/VelocityAnimation/VelocityAnimation';
+import VelocityAnimationGroup from '../VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup';
+export default function AccordionItem(props) {
+  let {
+    id,
+    selectMenu,
+    className,
+    children,
+    dataId,
+    dataSelectorId,
+    unMount,
+    unMountItem,
+    a11y,
+    innerClass,
+    equalityCheck,
+    selectedItem
+  } = props;
+  unMountItem = unMountItem !== undefined ? unMountItem : unMount;
+  let {
+    role
+  } = a11y;
+
+  function equalityChecking() {
+    return equalityCheck ? equalityCheck(id, selectedItem) : selectedItem == id;
+  }
+
+  function handleSelectMenu() {
+    selectMenu(id);
+  }
+
+  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: handleSelectMenu
+  }, children[0]), unMountItem ? /*#__PURE__*/React.createElement(VelocityAnimationGroup, {
+    name: "slideDown",
+    isActive: equalityChecking()
+  }, children[1]) : /*#__PURE__*/React.createElement(VelocityAnimation, {
+    name: "slideDown",
+    isActive: equalityChecking()
+  }, children[1]));
+}
+AccordionItem.propTypes = AccordionItem_propTypes;
+AccordionItem.defaultProps = AccordionItem_defaultProps; // if (__DOCS__) {
+//   AccordionItem.docs = {
+//     componentGroup: 'Animation',
+//     folderName: 'Style Guide'
+//   };
+// }

package/es/v1/Accordion/index.js

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

package/es/v1/Animation/Animation.js

@@ -0,0 +1,127 @@
+import React from 'react';
+import { defaultProps } from '../../Animation/props/defaultProps';
+import { propTypes } from '../../Animation/props/propTypes';
+import { CSSTransition } from 'react-transition-group';
+import style from '../../common/transition.module.css';
+export default function Animation(props) {
+  let {
+    name,
+    enterDuration,
+    exitDuration,
+    children,
+    isActive,
+    unmountOnExit,
+    onEntered = () => {},
+    onExit = () => {},
+    delayClassName = null
+  } = props;
+  const animation = {
+    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
+    }
+  };
+  let newClassNames = delayClassName ? Object.assign({}, animation[name], {
+    exit: `${delayClassName} ${animation[name].exit}`
+  }) : animation[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/v1/AppContainer/AppContainer.js

@@ -0,0 +1,134 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React from 'react';
+import { defaultProps } from '../../AppContainer/props/defaultProps';
+import { propTypes } from '../../AppContainer/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/lib/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/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.addEventListener('mouseout', this.removeTimeout, false);
+      this.tooltipRef.unObserveElement();
+    }
+  }
+
+  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, _extends({
+      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", _extends({}, 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, _extends({
+      ref: this.setTooltipRef,
+      customClass: tooltipClass
+    }, TooltipProps))) : null);
+  }
+
+}
+AppContainer.propTypes = propTypes;
+AppContainer.defaultProps = defaultProps; // if (__DOCS__) {
+//   AppContainer.docs = {
+//     componentGroup: 'Template',
+//     folderName: 'Style Guide'
+//   };
+// }