@zohodesk/components 1.0.0-test-252 → 1.0.0

package/es/DropBox/DropBoxElement/DropBoxElement.js

@@ -0,0 +1,132 @@
+import React from 'react';
+import useDropboxPosCalc from './useDropboxPosCalc';
+import cssJSLogic from './css/cssJSLogic';
+import { positionMapping } from '../DropBoxPositionMapping.json';
+import { DropBoxElementDefaultProps } from './props/defaultProps';
+import { DropBoxElementPropTypes } from './props/propTypes';
+import { mergeStyle } from '../../utils';
+import style from './css/DropBoxElement.module.css';
+export default function DropBoxElement(props) {
+  let {
+    children,
+    isAnimate,
+    isArrow,
+    arrowPosition,
+    boxPosition,
+    size,
+    onClick,
+    isActive,
+    dataId,
+    dataSelectorId,
+    isModel,
+    isAbsolutePositioningNeeded,
+    tourId,
+    htmlId,
+    a11y,
+    tabIndex,
+    palette,
+    subContainerRef,
+    customStyle,
+    animationStyle
+  } = props;
+  let isAbsolute = isAbsolutePositioningNeeded;
+
+  const FireOnAnimationEnd = () => {
+    let eleClassList = subContainerRef && subContainerRef.current.classList;
+    let animationStyles = animationStyle == 'default' ? style.fadeInScale : style[animationStyle];
+    animationStyles.split(' ').map(rmStyle => {
+      if (eleClassList && eleClassList.contains(rmStyle)) {
+        eleClassList.remove(rmStyle);
+      }
+    });
+  };
+
+  const getRef = ele => {
+    const {
+      getRef,
+      forwardRef
+    } = props;
+    getRef && getRef(ele);
+
+    if (forwardRef) {
+      forwardRef.current = ele;
+    }
+  };
+
+  if (!isAbsolutePositioningNeeded && size === 'default' && !isActive) {
+    isAbsolute = true;
+  }
+
+  const {
+    role,
+    ariaMultiselectable,
+    ariaLabelledby
+  } = a11y;
+  boxPosition = boxPosition && boxPosition != 'undefined' ? boxPosition : 'bottomCenter';
+  const boxDirection = positionMapping[boxPosition].direction;
+
+  if (isAbsolute) {
+    arrowPosition = arrowPosition ? arrowPosition : positionMapping[boxPosition].arrowPosition;
+    boxPosition = positionMapping[boxPosition].positionStyle;
+  } else {
+    arrowPosition = positionMapping[boxPosition].arrowPosition;
+  }
+
+  const {
+    arrowstyle,
+    boxstyle,
+    needBoxStyle
+  } = useDropboxPosCalc(props);
+  const mergedStyle = mergeStyle(style, customStyle);
+  const {
+    boxClassName,
+    subContainerClass,
+    inlineStyle
+  } = cssJSLogic({
+    props,
+    style: mergedStyle,
+    customState: {
+      boxPosition,
+      boxDirection,
+      boxstyle,
+      needBoxStyle,
+      isAbsolute
+    }
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: boxClassName,
+    "data-id": `${dataId}`,
+    "data-test-id": `${dataId}`,
+    "data-selector-id": dataSelectorId,
+    ref: getRef,
+    style: inlineStyle,
+    "data-tour": tourId,
+    "data-position": boxPosition,
+    id: htmlId,
+    role: role,
+    "aria-multiselectable": ariaMultiselectable,
+    "aria-labelledby": ariaLabelledby,
+    tabIndex: tabIndex,
+    onAnimationEnd: isAnimate && FireOnAnimationEnd
+  }, /*#__PURE__*/React.createElement("div", {
+    tabIndex: "-1",
+    className: `${subContainerClass} ${style[`${palette}Palette`]}`,
+    onClick: onClick,
+    "data-id": `${dataId}_subcontainer`,
+    "data-test-id": `${dataId}_subcontainer`,
+    "data-selector-id": `${dataSelectorId}_subcontainer`,
+    ref: subContainerRef
+  }, isModel ? /*#__PURE__*/React.createElement("div", {
+    className: style.closeBar
+  }) : null, isArrow && !isModel && /*#__PURE__*/React.createElement("div", {
+    className: style[arrowPosition],
+    style: arrowstyle,
+    "data-id": `${dataId}_arrow`,
+    "data-test-id": `${dataId}_arrow`,
+    "data-selector-id": `${dataSelectorId}_arrow`
+  }, /*#__PURE__*/React.createElement("div", {
+    className: style.arrowShape
+  })), children));
+}
+DropBoxElement.propTypes = DropBoxElementPropTypes;
+DropBoxElement.defaultProps = DropBoxElementDefaultProps;

package/es/DropBox/DropBoxElement/css/DropBoxElement.module.css

@@ -0,0 +1,435 @@
+.main {
+    z-index: 3;
+    composes: varClass from '../../css/DropBox.module.css';
+}
+
+.container {
+    position: absolute;
+}
+
+.fixedContainer {
+    position: fixed;
+}
+
+.subContainer {
+    position: relative;
+    border-radius: var(--dropbox_border_radius);
+    padding: var(--dropbox_padding);
+    box-shadow: var(--dropbox_box_shadow);
+}
+
+.defaultPalette, .darkPalette {
+    background-color: var(--dropbox_bg_color);
+}
+
+.radius {
+    --dropbox_border_radius: 3px;
+}
+
+.mobRadius {
+    --dropbox_border_radius: 30px 30px 0 0;
+    --dropbox_padding: var(--zd_size10) 0 0 0;
+}
+
+/* sizes */
+.mini {
+    width: var(--zd_size140) ;
+}
+
+.xmini {
+    width: var(--zd_size160) ;
+}
+
+.xsmall {
+    width: var(--zd_size180) ;
+}
+
+.small {
+    width: var(--zd_size200) ;
+}
+
+.medium {
+    width: var(--zd_size220) ;
+}
+
+.large {
+    width: var(--zd_size260) ;
+}
+
+.mlarge {
+    width: var(--zd_size280) ;
+}
+
+.xlarge {
+    width: var(--zd_size304) ;
+}
+
+.xxlarge {
+    width: var(--zd_size364) ;
+}
+
+.default {
+    width: 100% ;
+}
+
+/* shadow */
+.top_shadow {
+    --dropbox_box_shadow: var(--zd_bs_dropbox_top);
+}
+
+.left_shadow {
+    --dropbox_box_shadow: var(--zd_bs_dropbox_left);
+}
+
+.right_shadow {
+    --dropbox_box_shadow: var(--zd_bs_dropbox_right);
+}
+
+.bottom_shadow {
+    --dropbox_box_shadow: var(--zd_bs_dropbox_bottom);
+}
+
+.defaultShadow {
+    box-shadow: var(--zd_bs_dropbox_default);
+}
+
+/* box direction styles */
+.topStart {
+    bottom: 100% ;
+    right: 0 ;
+}
+
+.topEnd {
+    bottom: 100% ;
+    left: 0 ;
+}
+
+.topMid {
+    bottom: 100% ;
+    left: 50% ;
+    transform: translateX(-50%);
+}
+
+.bottomStart {
+    top: 100% ;
+    right: 0 ;
+}
+
+.bottomEnd {
+    top: 100% ;
+    left: 0 ;
+}
+
+.bottomMid {
+    top: 100% ;
+    left: 50% ;
+    transform: translateX(-50%);
+}
+
+.rightStart {
+    left: 100% ;
+    bottom: 0 ;
+}
+
+.rightEnd {
+    left: 100% ;
+    top: 0 ;
+}
+
+.rightMid {
+    left: 100% ;
+    top: 50% ;
+    transform: translateY(-50%);
+}
+
+.leftStart {
+    right: 100% ;
+    bottom: 0 ;
+}
+
+.leftEnd {
+    right: 100% ;
+    top: 0 ;
+}
+
+.leftMid {
+    right: 100% ;
+    top: 50% ;
+    transform: translateY(-50%);
+}
+
+/* space for arrow */
+.arrowtop {
+    padding-bottom: var(--zd_size10) ;
+}
+
+.arrowright {
+    padding-left: var(--zd_size10) ;
+}
+
+.arrowleft {
+    padding-right: var(--zd_size10) ;
+}
+
+.arrowbottom {
+    padding-top: var(--zd_size10) ;
+}
+
+/* space from target */
+.paddingSpace_top {
+    padding-bottom: var(--zd_size5) ;
+}
+
+.paddingSpace_right {
+    padding-left: var(--zd_size5) ;
+}
+
+.paddingSpace_left {
+    padding-right: var(--zd_size5) ;
+}
+
+.paddingSpace_bottom {
+    padding-top: var(--zd_size5) ;
+}
+
+.arrow {
+    position: absolute;
+    height: var(--zd_size34) ;
+    width: var(--zd_size34) ;
+    clip: rect(var(--zd_size3),
+ undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined var(--zd_size29),
+ undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined var(--zd_size17),
+ undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined var(--zd_size8)) ;
+    padding: var(--zd_size4) ;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.arrowShape {
+    height: var(--zd_size10) ;
+    width: var(--zd_size10) ;
+    box-shadow: 1px -1px 2px 0 var(--dropbox_arrow_box_shadow_color);
+    background-color: var(--dropbox_bg_color);
+    -webkit-transform: rotateZ(-45deg);
+    transform: rotateZ(-45deg);
+}
+
+/* arrow placement styles */
+.start,
+.end,
+.mid {
+    composes: arrow;
+}
+
+.top .start,
+.top .end,
+.top .mid {
+    bottom: calc( var(--zd_size17) * -1 ) ;
+}
+
+.top .start {
+    left: var(--zd_size28) ;
+}
+
+.top .end {
+    right: var(--zd_size28) ;
+    transform: rotate(180deg) translateX(-50%);
+}
+
+.top .mid {
+    left: 50% ;
+}
+
+.top .start,
+.top .mid {
+    transform: rotate(180deg) translateX(50%);
+}
+
+.bottom .start,
+.bottom .end,
+.bottom .mid {
+    top: calc( var(--zd_size17) * -1 ) ;
+}
+
+.bottom .start {
+    left: var(--zd_size28) ;
+}
+
+.bottom .mid {
+    left: 50% ;
+}
+
+.bottom .end {
+    right: var(--zd_size28) ;
+    transform: translateX(50%);
+}
+
+.bottom .mid,
+.bottom .start {
+    transform: translateX(-50%);
+}
+
+.left .start,
+.left .mid,
+.left .end {
+    right: calc( var(--zd_size17) * -1 ) ;
+}
+
+.left .start {
+    top: var(--zd_size28) ;
+}
+
+.left .end {
+    transform: rotate(90deg) translateX(50%);
+    bottom: var(--zd_size28) ;
+}
+
+.left .mid {
+    top: 50% ;
+}
+
+.left .start,
+.left .mid {
+    transform: rotate(90deg) translateX(-50%);
+}
+
+.right .start,
+.right .mid,
+.right .end {
+    left: calc( var(--zd_size17) * -1 ) ;
+}
+
+.right .start {
+    top: var(--zd_size28) ;
+}
+
+.right .mid {
+    top: 50% ;
+}
+
+.right .start,
+.right .mid {
+    transform: rotate(-90deg) translateX(50%);
+}
+
+.right .end {
+    bottom: var(--zd_size28) ;
+    transform: rotate(-90deg) translateX(-50%);
+}
+.hidden {
+    visibility: hidden;
+    opacity: 0;
+    z-index: 0;
+    pointer-events: none;
+}
+
+.hidden .subContainer {
+    box-shadow: none;
+}
+
+[dir=ltr] .animationBasic {
+    animation-duration: var(--zd_transition2);
+}
+
+[dir=rtl] .animationBasic {
+    animation-duration: var(--zd_transition2);
+}
+
+.fadeInScale {
+    composes: animationBasic;
+    composes: fadeInScale modeForward from '../../../common/animation.module.css';
+}
+
+.fadeIn {
+    composes: animationBasic;
+    composes: fadeIn modeForward from '../../../common/animation.module.css';
+}
+.scaleIn {
+    composes: animationBasic;
+    composes: scaleIn from '../../../common/animation.module.css';
+}
+.bounce {
+    composes: animationBasic;
+}
+[dir=ltr] .bounce {
+    animation-name: animation;
+    animation-timing-function: cubic-bezier(0.4, 1, 0.65, 1.1);
+}
+[dir=rtl] .bounce {
+    animation-name: animation;
+    animation-timing-function: cubic-bezier(0.4, 1, 0.65, 1.1);
+}
+
+.slideUp {
+    composes: modeForward from '../../../common/animation.module.css';
+}
+
+[dir=ltr] .slideUp {
+    animation-duration: var(--zd_transition3);
+    animation-name: slideUp;
+    animation-timing-function: cubic-bezier(0.4, 1, 0.65, 1);
+}
+
+[dir=rtl] .slideUp {
+    animation-duration: var(--zd_transition3);
+    animation-name: slideUp;
+    animation-timing-function: cubic-bezier(0.4, 1, 0.65, 1);
+}
+
+@keyframes animation {
+    0% {
+        transform: scaleY(0.6) perspective(1px);
+        opacity: 0;
+        transform-origin: top center;
+    }
+
+    100% {
+        transform-origin: top center;
+        opacity: 1;
+        transform: scaleY(1) perspective(1px);
+    }
+}
+
+@keyframes slideUp {
+    0% {
+        transform: translateY(90%) perspective(1px);
+    }
+
+    100% {
+        transform: translateY(0%) perspective(1px);
+    }
+}
+
+.responsive {
+    position: absolute;
+    bottom: 0 ;
+    width: 100% ;
+    max-height: 90% ;
+}
+
+[dir=ltr] .responsive {
+    left: 0 ;
+}
+
+[dir=rtl] .responsive {
+    right: 0 ;
+}
+
+.closeBar {
+  /*  Variable:Ignore  */
+    height: 6px;
+    width: 20% ;
+    border-radius: 5px;
+    background-color: var(--dropbox_mob_close_bg_color);
+    cursor: pointer;
+    margin: 0 auto var(--zd_size10) ;
+}
+
+.boxPadding {
+    --dropbox_padding: var(--zd_size10) 0;
+}
+
+.darkPalette {
+    --dropbox_bg_color: var(--zdt_dropbox_dark_bg);
+}

package/es/DropBox/DropBoxElement/css/cssJSLogic.js

@@ -0,0 +1,91 @@
+import { useContext } from 'react';
+import LibraryContext from '../../../Provider/LibraryContextInit';
+import { compileClassNames } from '../../../utils';
+export default function cssJSLogic(_ref) {
+  let {
+    props,
+    style,
+    customState
+  } = _ref;
+  const DropBoxElementContext = useContext(LibraryContext);
+  const {
+    boxPosition,
+    boxDirection,
+    boxstyle,
+    needBoxStyle,
+    isAbsolute
+  } = customState;
+  const {
+    isReducedMotion
+  } = DropBoxElementContext || {};
+  const {
+    isAnimate,
+    isArrow,
+    size,
+    isRadius,
+    animationStyle,
+    isActive,
+    isModel,
+    isBoxPaddingNeed,
+    isPadding,
+    customClass,
+    positionsOffset,
+    targetOffset,
+    zIndexStyle,
+    customInlineStyle
+  } = props;
+  const {
+    customDropBox = '',
+    customMobileDropBox = '',
+    customDropBoxWrap = '',
+    customMobileDropBoxWrap = ''
+  } = customClass;
+  const animationValue = animationStyle === 'default' ? 'fadeInScale' : animationStyle; // const {needBoxStyle,boxstyle} = useDropboxPosCalc(props)
+
+  let boxClassName = compileClassNames({
+    [style.main]: true,
+    [style.hidden]: !isActive,
+    [style.responsive]: !!isModel,
+    [customMobileDropBoxWrap]: !!isModel,
+    [customDropBoxWrap]: !isModel,
+    [style.container]: isAbsolute && !isModel,
+    [style[boxPosition]]: isAbsolute && !isModel,
+    [style.fixedContainer]: !isAbsolute && !isModel,
+    [style[size]]: size && !isModel,
+    [style[boxDirection]]: !isModel && isActive && isArrow,
+    [style[`arrow${boxDirection}`]]: !isModel && isActive && isArrow && isAbsolute,
+    [style[`paddingSpace_${boxDirection}`]]: !isModel && isActive && !isArrow && isPadding
+  });
+  let subContainerClass = compileClassNames({
+    [style.subContainer]: true,
+    [customMobileDropBox]: !!isModel,
+    [style.mobRadius]: !!isModel,
+    [style.slideUp]: !!isModel && isActive,
+    [customDropBox]: !isModel,
+    [style[`${boxDirection}_shadow`]]: !isModel,
+    [style.boxPadding]: !isModel && isBoxPaddingNeed,
+    [style.radius]: !isModel && isRadius,
+    [style[animationValue]]: !isModel && isAnimate && !isReducedMotion && isActive && !!animationStyle
+  });
+  let inlineStyle = !isModel ? isAbsolute ? needBoxStyle && boxstyle : positionsOffset && positionsOffset[boxPosition] || {} : {};
+
+  if (zIndexStyle) {
+    inlineStyle = Object.assign({}, inlineStyle, zIndexStyle);
+  }
+
+  if (!isModel && !isAbsolute && size === 'default' && targetOffset && isActive) {
+    inlineStyle = Object.assign({}, inlineStyle, {
+      width: targetOffset.width
+    });
+  }
+
+  if (customInlineStyle) {
+    inlineStyle = Object.assign({}, inlineStyle, customInlineStyle);
+  }
+
+  return {
+    boxClassName,
+    subContainerClass,
+    inlineStyle
+  };
+}

package/es/DropBox/DropBoxElement/props/defaultProps.js

@@ -0,0 +1,18 @@
+export const DropBoxElementDefaultProps = {
+  animationStyle: 'default',
+  boxPosition: 'bottomLeft',
+  dataId: 'dropBox',
+  dataSelectorId: 'dropBox',
+  isActive: false,
+  isAnimate: false,
+  isArrow: true,
+  isRadius: true,
+  size: 'default',
+  isAbsolutePositioningNeeded: true,
+  isBoxPaddingNeed: false,
+  isPadding: true,
+  customClass: {},
+  a11y: {},
+  palette: 'default',
+  customInlineStyle: false
+};

package/es/DropBox/DropBoxElement/props/propTypes.js

@@ -0,0 +1,45 @@
+import PropTypes from 'prop-types';
+export const DropBoxElementPropTypes = {
+  animationStyle: PropTypes.oneOf(['default', 'bounce', 'fadeIn', 'scaleIn']),
+  arrowBottom: PropTypes.number,
+  arrowLeft: PropTypes.number,
+  arrowPosition: PropTypes.oneOf(['start', 'mid', 'end']),
+  arrowRight: PropTypes.number,
+  arrowTop: PropTypes.number,
+  bottom: PropTypes.number,
+  boxPosition: PropTypes.oneOf(['bottomRight', 'bottomLeft', 'bottomCenter', 'topRight', 'topLeft', 'topCenter', 'rightTop', 'rightBottom', 'rightCenter', 'leftTop', 'leftBottom', 'leftCenter']),
+  children: PropTypes.element,
+  dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string,
+  forwardRef: PropTypes.object,
+  getRef: PropTypes.func,
+  isAbsolutePositioningNeeded: PropTypes.bool,
+  isActive: PropTypes.bool,
+  isAnimate: PropTypes.bool,
+  isArrow: PropTypes.bool,
+  isBoxPaddingNeed: PropTypes.bool,
+  isPadding: PropTypes.bool,
+  isRadius: PropTypes.bool,
+  left: PropTypes.number,
+  onClick: PropTypes.func,
+  right: PropTypes.number,
+  size: PropTypes.oneOf(['mini', 'xmini', 'xsmall', 'small', 'medium', 'large', 'mlarge', 'xlarge', 'xxlarge', 'default']),
+  top: PropTypes.number,
+  tourId: PropTypes.string,
+  htmlId: PropTypes.string,
+  tabIndex: PropTypes.number,
+  customClass: PropTypes.shape({
+    customDropBox: PropTypes.string,
+    customMobileDropBox: PropTypes.string,
+    customDropBoxWrap: PropTypes.string,
+    customMobileDropBoxWrap: PropTypes.string
+  }),
+  a11y: PropTypes.shape({
+    role: PropTypes.string,
+    ariaMultiselectable: PropTypes.bool,
+    ariaLabelledby: PropTypes.string
+  }),
+  palette: PropTypes.oneOf(['default', 'dark']),
+  customStyle: PropTypes.object,
+  customInlineStyle: PropTypes.bool
+};