@zohodesk/components 1.4.12 → 1.4.14

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

@@ -1,442 +0,0 @@
-.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 {
-    /*css:theme-validation:ignore*/
-}
-
-.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 */
-[data-box-direction="top"]>.shadow {
-    --dropbox_box_shadow: var(--zd_bs_dropbox_top);
-}
-
-[data-box-direction="left"]>.shadow {
-    --dropbox_box_shadow: var(--zd_bs_dropbox_left);
-}
-
-[data-box-direction="right"]>.shadow {
-    --dropbox_box_shadow: var(--zd_bs_dropbox_right);
-}
-
-[data-box-direction="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 using data-box-direction attribute*/
-.arrow[data-box-direction="top"] {
-    padding-bottom: var(--zd_size10) ;
-}
-
-.arrow[data-box-direction="right"] {
-    padding-left: var(--zd_size10) ;
-}
-
-.arrow[data-box-direction="left"] {
-    padding-right: var(--zd_size10) ;
-}
-
-.arrow[data-box-direction="bottom"] {
-    padding-top: var(--zd_size10) ;
-}
-
-/* space from target using data-box-direction attribute*/
-.paddingSpace[data-box-direction="top"] {
-    padding-bottom: var(--zd_size5) ;
-}
-
-.paddingSpace[data-box-direction="right"] {
-    padding-left: var(--zd_size5) ;
-}
-
-.paddingSpace[data-box-direction="left"] {
-    padding-right: var(--zd_size5) ;
-}
-
-.paddingSpace[data-box-direction="bottom"] {
-    padding-top: var(--zd_size5) ;
-}
-
-.arrowBase {
-    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);
-    /*css:theme-validation:ignore*/
-    background-color: var(--dropbox_bg_color);
-    -webkit-transform: rotateZ(-45deg);
-    transform: rotateZ(-45deg);
-}
-
-/* arrow placement styles */
-.arrowPosition {
-    composes: arrowBase;
-}
-
-.boxDirection[data-box-direction="top"][data-arrow-position="start"] .arrowPosition,
-.boxDirection[data-box-direction="top"][data-arrow-position="end"] .arrowPosition,
-.boxDirection[data-box-direction="top"][data-arrow-position="mid"] .arrowPosition {
-    bottom: calc( var(--zd_size17) * -1 ) ;
-}
-
-.boxDirection[data-box-direction="top"][data-arrow-position="start"] .arrowPosition {
-    left: var(--zd_size28) ;
-}
-
-.boxDirection[data-box-direction="top"][data-arrow-position="end"] .arrowPosition {
-    right: var(--zd_size28) ;
-    transform: rotate(180deg) translateX(-50%);
-}
-
-.boxDirection[data-box-direction="top"][data-arrow-position="mid"] .arrowPosition {
-    left: 50% ;
-}
-
-.boxDirection[data-box-direction="top"][data-arrow-position="start"] .arrowPosition,
-.boxDirection[data-box-direction="top"][data-arrow-position="mid"] .arrowPosition {
-    transform: rotate(180deg) translateX(50%);
-}
-
-.boxDirection[data-box-direction="bottom"][data-arrow-position="start"] .arrowPosition,
-.boxDirection[data-box-direction="bottom"][data-arrow-position="end"] .arrowPosition,
-.boxDirection[data-box-direction="bottom"][data-arrow-position="mid"] .arrowPosition {
-    top: calc( var(--zd_size17) * -1 ) ;
-}
-
-.boxDirection[data-box-direction="bottom"][data-arrow-position="start"] .arrowPosition {
-    left: var(--zd_size28) ;
-}
-
-.boxDirection[data-box-direction="bottom"][data-arrow-position="mid"] .arrowPosition {
-    left: 50% ;
-}
-
-.boxDirection[data-box-direction="bottom"][data-arrow-position="end"] .arrowPosition {
-    right: var(--zd_size28) ;
-    transform: translateX(50%);
-}
-
-.boxDirection[data-box-direction="bottom"][data-arrow-position="mid"] .arrowPosition,
-.boxDirection[data-box-direction="bottom"][data-arrow-position="start"] .arrowPosition {
-    transform: translateX(-50%);
-}
-
-.boxDirection[data-box-direction="left"][data-arrow-position="start"] .arrowPosition,
-.boxDirection[data-box-direction="left"][data-arrow-position="mid"] .arrowPosition,
-.boxDirection[data-box-direction="left"][data-arrow-position="end"] .arrowPosition {
-    right: calc( var(--zd_size17) * -1 ) ;
-}
-
-.boxDirection[data-box-direction="left"][data-arrow-position="start"] .arrowPosition {
-    top: var(--zd_size28) ;
-}
-
-.boxDirection[data-box-direction="left"][data-arrow-position="end"] .arrowPosition {
-    transform: rotate(90deg) translateX(50%);
-    bottom: var(--zd_size28) ;
-}
-
-.boxDirection[data-box-direction="left"][data-arrow-position="mid"] .arrowPosition {
-    top: 50% ;
-}
-
-.boxDirection[data-box-direction="left"][data-arrow-position="start"] .arrowPosition,
-.boxDirection[data-box-direction="left"][data-arrow-position="mid"] .arrowPosition {
-    transform: rotate(90deg) translateX(-50%);
-}
-
-.boxDirection[data-box-direction="right"][data-arrow-position="start"] .arrowPosition,
-.boxDirection[data-box-direction="right"][data-arrow-position="mid"] .arrowPosition,
-.boxDirection[data-box-direction="right"][data-arrow-position="end"] .arrowPosition {
-    left: calc( var(--zd_size17) * -1 ) ;
-}
-
-.boxDirection[data-box-direction="right"][data-arrow-position="start"] .arrowPosition {
-    top: var(--zd_size28) ;
-}
-
-.boxDirection[data-box-direction="right"][data-arrow-position="mid"] .arrowPosition {
-    top: 50% ;
-}
-
-.boxDirection[data-box-direction="right"][data-arrow-position="start"] .arrowPosition,
-.boxDirection[data-box-direction="right"][data-arrow-position="mid"] .arrowPosition {
-    transform: rotate(-90deg) translateX(50%);
-}
-
-.boxDirection[data-box-direction="right"][data-arrow-position="end"] .arrowPosition {
-    bottom: var(--zd_size28) ;
-    transform: rotate(-90deg) translateX(-50%);
-}
-[data-visible="hidden"],
-.hidden {
-    visibility: hidden;
-    opacity: 0;
-    z-index: 0;
-    pointer-events: none;
-}
-
-[data-visible="hidden"] .subContainer, .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;
-    /*css:theme-validation:ignore*/
-    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

@@ -1,91 +0,0 @@
-import { useContext } from 'react';
-import LibraryContext from "../../../Provider/LibraryContextInit";
-import { compileClassNames } from '@zohodesk/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]: !isModel && isActive && isArrow && isAbsolute,
-    [style.paddingSpace]: !isModel && isActive && !isArrow && isPadding
-  });
-  let subContainerClass = compileClassNames({
-    [style.subContainer]: true,
-    [customMobileDropBox]: !!isModel,
-    [style.mobRadius]: !!isModel,
-    [style.slideUp]: !!isModel && isActive,
-    [customDropBox]: !isModel,
-    [style.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

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

@@ -1,51 +0,0 @@
-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,
-  isModel: PropTypes.bool,
-  direction: PropTypes.string,
-  positionsOffset: PropTypes.object,
-  targetOffset: PropTypes.object,
-  zIndexStyle: PropTypes.object,
-  subContainerRef: PropTypes.func
-};

package/es/DropBox/DropBoxElement/useDropboxPosCalc.js

@@ -1,54 +0,0 @@
-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
-  };
-}