@zohodesk/components 1.0.0-temp-234 → 1.0.0-temp-236

package/lib/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/lib/DropBox/DropBoxElement/css/cssJSLogic.js

@@ -1,81 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = cssJSLogic;
-
-var _react = require("react");
-
-var _LibraryContextInit = _interopRequireDefault(require("../../../Provider/LibraryContextInit"));
-
-var _utils = require("@zohodesk/utils");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function cssJSLogic(_ref) {
-  var _compileClassNames, _compileClassNames2;
-
-  var props = _ref.props,
-      style = _ref.style,
-      customState = _ref.customState;
-  var DropBoxElementContext = (0, _react.useContext)(_LibraryContextInit["default"]);
-  var boxPosition = customState.boxPosition,
-      boxDirection = customState.boxDirection,
-      boxstyle = customState.boxstyle,
-      needBoxStyle = customState.needBoxStyle,
-      isAbsolute = customState.isAbsolute;
-
-  var _ref2 = DropBoxElementContext || {},
-      isReducedMotion = _ref2.isReducedMotion;
-
-  var isAnimate = props.isAnimate,
-      isArrow = props.isArrow,
-      size = props.size,
-      isRadius = props.isRadius,
-      animationStyle = props.animationStyle,
-      isActive = props.isActive,
-      isModel = props.isModel,
-      isBoxPaddingNeed = props.isBoxPaddingNeed,
-      isPadding = props.isPadding,
-      customClass = props.customClass,
-      positionsOffset = props.positionsOffset,
-      targetOffset = props.targetOffset,
-      zIndexStyle = props.zIndexStyle,
-      customInlineStyle = props.customInlineStyle;
-  var _customClass$customDr = customClass.customDropBox,
-      customDropBox = _customClass$customDr === void 0 ? '' : _customClass$customDr,
-      _customClass$customMo = customClass.customMobileDropBox,
-      customMobileDropBox = _customClass$customMo === void 0 ? '' : _customClass$customMo,
-      _customClass$customDr2 = customClass.customDropBoxWrap,
-      customDropBoxWrap = _customClass$customDr2 === void 0 ? '' : _customClass$customDr2,
-      _customClass$customMo2 = customClass.customMobileDropBoxWrap,
-      customMobileDropBoxWrap = _customClass$customMo2 === void 0 ? '' : _customClass$customMo2;
-  var animationValue = animationStyle === 'default' ? 'fadeInScale' : animationStyle; // const {needBoxStyle,boxstyle} = useDropboxPosCalc(props)
-
-  var boxClassName = (0, _utils.compileClassNames)((_compileClassNames = {}, _defineProperty(_compileClassNames, style.main, true), _defineProperty(_compileClassNames, style.hidden, !isActive), _defineProperty(_compileClassNames, style.responsive, !!isModel), _defineProperty(_compileClassNames, customMobileDropBoxWrap, !!isModel), _defineProperty(_compileClassNames, customDropBoxWrap, !isModel), _defineProperty(_compileClassNames, style.container, isAbsolute && !isModel), _defineProperty(_compileClassNames, style[boxPosition], isAbsolute && !isModel), _defineProperty(_compileClassNames, style.fixedContainer, !isAbsolute && !isModel), _defineProperty(_compileClassNames, style[size], size && !isModel), _defineProperty(_compileClassNames, style.boxDirection, !isModel && isActive && isArrow), _defineProperty(_compileClassNames, style.arrow, !isModel && isActive && isArrow && isAbsolute), _defineProperty(_compileClassNames, style.paddingSpace, !isModel && isActive && !isArrow && isPadding), _compileClassNames));
-  var subContainerClass = (0, _utils.compileClassNames)((_compileClassNames2 = {}, _defineProperty(_compileClassNames2, style.subContainer, true), _defineProperty(_compileClassNames2, customMobileDropBox, !!isModel), _defineProperty(_compileClassNames2, style.mobRadius, !!isModel), _defineProperty(_compileClassNames2, style.slideUp, !!isModel && isActive), _defineProperty(_compileClassNames2, customDropBox, !isModel), _defineProperty(_compileClassNames2, style.shadow, !isModel), _defineProperty(_compileClassNames2, style.boxPadding, !isModel && isBoxPaddingNeed), _defineProperty(_compileClassNames2, style.radius, !isModel && isRadius), _defineProperty(_compileClassNames2, style[animationValue], !isModel && isAnimate && !isReducedMotion && isActive && !!animationStyle), _compileClassNames2));
-  var 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: boxClassName,
-    subContainerClass: subContainerClass,
-    inlineStyle: inlineStyle
-  };
-}

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

@@ -1,25 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.DropBoxElementDefaultProps = void 0;
-var 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
-};
-exports.DropBoxElementDefaultProps = DropBoxElementDefaultProps;

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

@@ -1,62 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.DropBoxElementPropTypes = void 0;
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-var DropBoxElementPropTypes = {
-  animationStyle: _propTypes["default"].oneOf(['default', 'bounce', 'fadeIn', 'scaleIn']),
-  arrowBottom: _propTypes["default"].number,
-  arrowLeft: _propTypes["default"].number,
-  arrowPosition: _propTypes["default"].oneOf(['start', 'mid', 'end']),
-  arrowRight: _propTypes["default"].number,
-  arrowTop: _propTypes["default"].number,
-  bottom: _propTypes["default"].number,
-  boxPosition: _propTypes["default"].oneOf(['bottomRight', 'bottomLeft', 'bottomCenter', 'topRight', 'topLeft', 'topCenter', 'rightTop', 'rightBottom', 'rightCenter', 'leftTop', 'leftBottom', 'leftCenter']),
-  children: _propTypes["default"].element,
-  dataId: _propTypes["default"].string,
-  dataSelectorId: _propTypes["default"].string,
-  forwardRef: _propTypes["default"].object,
-  getRef: _propTypes["default"].func,
-  isAbsolutePositioningNeeded: _propTypes["default"].bool,
-  isActive: _propTypes["default"].bool,
-  isAnimate: _propTypes["default"].bool,
-  isArrow: _propTypes["default"].bool,
-  isBoxPaddingNeed: _propTypes["default"].bool,
-  isPadding: _propTypes["default"].bool,
-  isRadius: _propTypes["default"].bool,
-  left: _propTypes["default"].number,
-  onClick: _propTypes["default"].func,
-  right: _propTypes["default"].number,
-  size: _propTypes["default"].oneOf(['mini', 'xmini', 'xsmall', 'small', 'medium', 'large', 'mlarge', 'xlarge', 'xxlarge', 'default']),
-  top: _propTypes["default"].number,
-  tourId: _propTypes["default"].string,
-  htmlId: _propTypes["default"].string,
-  tabIndex: _propTypes["default"].number,
-  customClass: _propTypes["default"].shape({
-    customDropBox: _propTypes["default"].string,
-    customMobileDropBox: _propTypes["default"].string,
-    customDropBoxWrap: _propTypes["default"].string,
-    customMobileDropBoxWrap: _propTypes["default"].string
-  }),
-  a11y: _propTypes["default"].shape({
-    role: _propTypes["default"].string,
-    ariaMultiselectable: _propTypes["default"].bool,
-    ariaLabelledby: _propTypes["default"].string
-  }),
-  palette: _propTypes["default"].oneOf(['default', 'dark']),
-  customStyle: _propTypes["default"].object,
-  customInlineStyle: _propTypes["default"].bool,
-  isModel: _propTypes["default"].bool,
-  direction: _propTypes["default"].string,
-  positionsOffset: _propTypes["default"].object,
-  targetOffset: _propTypes["default"].object,
-  zIndexStyle: _propTypes["default"].object,
-  subContainerRef: _propTypes["default"].func
-};
-exports.DropBoxElementPropTypes = DropBoxElementPropTypes;

package/lib/DropBox/DropBoxElement/useDropboxPosCalc.js

@@ -1,60 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = useDropboxPosCalc;
-
-var _Common = require("../../utils/Common");
-
-function useDropboxPosCalc(props) {
-  var right = props.right,
-      left = props.left,
-      top = props.top,
-      arrowRight = props.arrowRight,
-      arrowLeft = props.arrowLeft,
-      arrowTop = props.arrowTop,
-      arrowBottom = props.arrowBottom,
-      bottom = props.bottom,
-      isModel = props.isModel,
-      direction = props.direction;
-  var unit = 'rem';
-  var boxstyle = {};
-  var arrowstyle = {};
-  var needBoxStyle = right || left || top || bottom;
-  var needArrowStyle = arrowLeft || arrowRight || arrowTop || arrowBottom;
-
-  if (needBoxStyle) {
-    boxstyle = !isModel ? direction === 'rtl' ? {
-      right: [(0, _Common.remConvert)(left)] + unit,
-      left: [(0, _Common.remConvert)(right)] + unit,
-      top: [(0, _Common.remConvert)(top)] + unit,
-      bottom: [(0, _Common.remConvert)(bottom)] + unit
-    } : {
-      right: [(0, _Common.remConvert)(right)] + unit,
-      left: [(0, _Common.remConvert)(left)] + unit,
-      top: [(0, _Common.remConvert)(top)] + unit,
-      bottom: [(0, _Common.remConvert)(bottom)] + unit
-    } : {};
-  }
-
-  if (needArrowStyle) {
-    arrowstyle = !isModel ? direction === 'rtl' ? {
-      right: [(0, _Common.remConvert)(arrowLeft)] + unit,
-      left: [(0, _Common.remConvert)(arrowRight)] + unit,
-      top: [(0, _Common.remConvert)(arrowTop)] + unit,
-      bottom: [(0, _Common.remConvert)(arrowBottom)] + unit
-    } : {
-      right: [(0, _Common.remConvert)(arrowRight)] + unit,
-      left: [(0, _Common.remConvert)(arrowLeft)] + unit,
-      top: [(0, _Common.remConvert)(arrowTop)] + unit,
-      bottom: [(0, _Common.remConvert)(arrowBottom)] + unit
-    } : {};
-  }
-
-  return {
-    needBoxStyle: needBoxStyle,
-    boxstyle: boxstyle,
-    arrowstyle: arrowstyle
-  };
-}