@zohodesk/components 1.0.0-alpha-263 → 1.0.0-alpha-264

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

@@ -0,0 +1,432 @@
+.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: 0 -3px 30px var(--zdt_dropbox_default_box_shadow);
+}
+
+.left_shadow {
+    --dropbox_box_shadow: -4px 0 30px var(--zdt_dropbox_default_box_shadow);
+}
+
+.right_shadow {
+    --dropbox_box_shadow: 4px 0 30px var(--zdt_dropbox_default_box_shadow);
+}
+
+.bottom_shadow {
+    --dropbox_box_shadow: 0 3px 30px var(--zdt_dropbox_default_box_shadow);
+}
+
+[dir=ltr] .defaultShadow {
+    box-shadow: 4px 3px 30px var(--zdt_dropbox_default_box_shadow);
+}
+
+[dir=rtl] .defaultShadow {
+    box-shadow: -4px 3px 30px var(--zdt_dropbox_default_box_shadow);
+}
+
+/* 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),
+            var(--zd_size29),
+            var(--zd_size17),
+            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);
+}
+
+.fadeIn {
+    composes: animationBasic;
+    composes: fadeInScale modeForward 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 {
+    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,89 @@
+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
+  } = customState;
+  const {
+    isReducedMotion
+  } = DropBoxElementContext || {};
+  const {
+    isAnimate,
+    isArrow,
+    size,
+    isRadius,
+    animationStyle,
+    isActive,
+    isModel,
+    isAbsolutePositioningNeeded,
+    isBoxPaddingNeed,
+    isPadding,
+    customClass,
+    positionsOffset,
+    targetOffset,
+    zIndexStyle,
+    customInlineStyle
+  } = props;
+  const {
+    customDropBox = '',
+    customMobileDropBox = '',
+    customDropBoxWrap = '',
+    customMobileDropBoxWrap = ''
+  } = customClass;
+
+  // const {needBoxStyle,boxstyle} = useDropboxPosCalc(props)
+
+  let boxClassName = compileClassNames({
+    [style.main]: true,
+    [style.hidden]: !isActive,
+    [style.responsive]: !!isModel,
+    [customMobileDropBoxWrap]: !!isModel,
+    [customDropBoxWrap]: !isModel,
+    [style.container]: isAbsolutePositioningNeeded && !isModel,
+    [style[boxPosition]]: isAbsolutePositioningNeeded && !isModel,
+    [style.fixedContainer]: !isAbsolutePositioningNeeded && !isModel,
+    [style[size]]: size && !isModel,
+    [style[boxDirection]]: !isModel && isActive && isArrow,
+    [style[`arrow${boxDirection}`]]: !isModel && isActive && isArrow && isAbsolutePositioningNeeded,
+    [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.fadeIn]: !isModel && isAnimate && !isReducedMotion && isActive && animationStyle === 'default',
+    [style.bounce]: !isModel && isAnimate && !isReducedMotion && isActive && animationStyle === 'bounce'
+  });
+  let inlineStyle = !isModel ? isAbsolutePositioningNeeded ? needBoxStyle && boxstyle : positionsOffset && positionsOffset[boxPosition] || {} : {};
+  if (zIndexStyle) {
+    inlineStyle = Object.assign({}, inlineStyle, zIndexStyle);
+  }
+  if (!isModel && !isAbsolutePositioningNeeded && 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']),
+  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
+};

package/es/DropBox/DropBoxElement/useDropboxPosCalc.js

@@ -0,0 +1,51 @@
+import { remConvert } from '../../utils/Common';
+export default function useDropboxPosCalc(props) {
+  let {
+    right,
+    left,
+    top,
+    arrowRight,
+    arrowLeft,
+    arrowTop,
+    arrowBottom,
+    bottom,
+    isModel,
+    direction
+  } = props;
+  const unit = 'rem';
+  let boxstyle = {};
+  let arrowstyle = {};
+  const needBoxStyle = right || left || top || bottom;
+  const needArrowStyle = arrowLeft || arrowRight || arrowTop || arrowBottom;
+  if (needBoxStyle) {
+    boxstyle = !isModel ? direction === 'rtl' ? {
+      right: [remConvert(left)] + unit,
+      left: [remConvert(right)] + unit,
+      top: [remConvert(top)] + unit,
+      bottom: [remConvert(bottom)] + unit
+    } : {
+      right: [remConvert(right)] + unit,
+      left: [remConvert(left)] + unit,
+      top: [remConvert(top)] + unit,
+      bottom: [remConvert(bottom)] + unit
+    } : {};
+  }
+  if (needArrowStyle) {
+    arrowstyle = !isModel ? direction === 'rtl' ? {
+      right: [remConvert(arrowLeft)] + unit,
+      left: [remConvert(arrowRight)] + unit,
+      top: [remConvert(arrowTop)] + unit,
+      bottom: [remConvert(arrowBottom)] + unit
+    } : {
+      right: [remConvert(arrowRight)] + unit,
+      left: [remConvert(arrowLeft)] + unit,
+      top: [remConvert(arrowTop)] + unit,
+      bottom: [remConvert(arrowBottom)] + unit
+    } : {};
+  }
+  return {
+    needBoxStyle,
+    boxstyle,
+    arrowstyle
+  };
+}

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

@@ -0,0 +1,59 @@
+.varClass {
+  /* dropbox default variables */
+  --dropbox_bg_color: var(--zdt_dropbox_default_bg);
+  --dropbox_border_radius: 0;
+  --dropbox_padding: 0;
+  --dropbox_box_shadow: 0 3px 30px var(--zdt_dropbox_default_box_shadow);
+
+  /* dropbox arrow default variables */
+  --dropbox_arrow_box_shadow_color: var(--zdt_dropbox_arrow_shadow);
+
+  /* dropbox responsive default variables */
+  --dropbox_mob_bg_color: var(--zdt_dropbox_mob_bg);
+  --dropbox_mob_close_bg_color: var(--zdt_dropbox_mob_close_bg);
+}
+
+.activateInDelay {
+  composes: modeForward from '../../common/animation.module.css';
+  pointer-events: none;
+}
+
+[dir=ltr] .activateInDelay {
+  animation-duration: var(--zd_transition1);
+  animation-delay: var(--zd_transition2);
+  animation-name: activateInDelay;
+}
+
+[dir=rtl] .activateInDelay {
+  animation-duration: var(--zd_transition1);
+  animation-delay: var(--zd_transition2);
+  animation-name: activateInDelay;
+}
+
+.freezeLayer {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  composes: activateInDelay;
+}
+
+[dir=ltr] .freezeLayer {
+  left: 0;
+  right: 0;
+}
+
+[dir=rtl] .freezeLayer {
+  right: 0;
+  left: 0;
+}
+
+.freeze {
+  composes: varClass;
+  background: var(--dropbox_mob_bg_color);
+}
+
+@keyframes activateInDelay {
+  100% {
+    pointer-events: initial;
+  }
+}

package/es/DropBox/css/cssJSLogic.js

@@ -0,0 +1,14 @@
+import { useZIndex } from '../../Provider/ZindexProvider';
+export default function cssJSLogic(props) {
+  const {
+    isActive,
+    needAutoZindex
+  } = props;
+  const zIndex = useZIndex();
+  const zIndexStyle = isActive && needAutoZindex ? {
+    zIndex: zIndex()
+  } : {};
+  return {
+    zIndexStyle
+  };
+}