@zohodesk/components 1.0.0-temp-199.25 → 1.0.0-temp-250

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

@@ -0,0 +1,445 @@
+.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: 10px 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: 10px 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 '@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

@@ -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,51 @@
+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

@@ -0,0 +1,54 @@
+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/__tests__/DropBox.spec.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import DropBox from "../DropBox";
+describe('DropBox', () => {
+  test('rendering the defult props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(DropBox, null));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/es/DropBox/__tests__/__snapshots__/DropBox.spec.js.snap

@@ -0,0 +1,36 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DropBox rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class="main hidden container bottomStart default"
+    data-a11y-focus-main-area="true"
+    data-arrow-position="end"
+    data-box-direction="bottom"
+    data-id="dropBox"
+    data-position="bottomStart"
+    data-selector-id="dropBox"
+    data-test-id="dropBox"
+    dot-ui-element="dropbox"
+  >
+    <div
+      class="subContainer shadow radius defaultPalette"
+      data-id="dropBox_subcontainer"
+      data-selector-id="dropBox_subcontainer"
+      data-test-id="dropBox_subcontainer"
+      tabindex="-1"
+    >
+      <div
+        class="arrowPosition"
+        data-id="dropBox_arrow"
+        data-selector-id="dropBox_arrow"
+        data-test-id="dropBox_arrow"
+      >
+        <div
+          class="arrowShape"
+        />
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;