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

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

@@ -0,0 +1,72 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = cssJSLogic;
+var _react = require("react");
+var _LibraryContextInit = _interopRequireDefault(require("../../../Provider/LibraryContextInit"));
+var _utils = require("../../../utils");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+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;
+  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,
+    isAbsolutePositioningNeeded = props.isAbsolutePositioningNeeded,
+    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;
+
+  // 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, isAbsolutePositioningNeeded && !isModel), _defineProperty(_compileClassNames, style[boxPosition], isAbsolutePositioningNeeded && !isModel), _defineProperty(_compileClassNames, style.fixedContainer, !isAbsolutePositioningNeeded && !isModel), _defineProperty(_compileClassNames, style[size], size && !isModel), _defineProperty(_compileClassNames, style[boxDirection], !isModel && isActive && isArrow), _defineProperty(_compileClassNames, style["arrow".concat(boxDirection)], !isModel && isActive && isArrow && isAbsolutePositioningNeeded), _defineProperty(_compileClassNames, style["paddingSpace_".concat(boxDirection)], !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["".concat(boxDirection, "_shadow")], !isModel), _defineProperty(_compileClassNames2, style.boxPadding, !isModel && isBoxPaddingNeed), _defineProperty(_compileClassNames2, style.radius, !isModel && isRadius), _defineProperty(_compileClassNames2, style.fadeIn, !isModel && isAnimate && !isReducedMotion && isActive && animationStyle === 'default'), _defineProperty(_compileClassNames2, style.bounce, !isModel && isAnimate && !isReducedMotion && isActive && animationStyle === 'bounce'), _compileClassNames2));
+  var 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: boxClassName,
+    subContainerClass: subContainerClass,
+    inlineStyle: inlineStyle
+  };
+}

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

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

@@ -0,0 +1,53 @@
+"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']),
+  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
+};
+exports.DropBoxElementPropTypes = DropBoxElementPropTypes;

package/lib/DropBox/DropBoxElement/useDropboxPosCalc.js

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

package/lib/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;
+  }
+}