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

package/lib/DropBox/css/cssJSLogic.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = cssJSLogic;
+var _ZindexProvider = require("../../Provider/ZindexProvider");
+function cssJSLogic(props) {
+  var isActive = props.isActive,
+    needAutoZindex = props.needAutoZindex;
+  var zIndex = (0, _ZindexProvider.useZIndex)();
+  var zIndexStyle = isActive && needAutoZindex ? {
+    zIndex: zIndex()
+  } : {};
+  return {
+    zIndexStyle: zIndexStyle
+  };
+}

package/lib/DropBox/props/defaultProps.js

@@ -3,27 +3,23 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.defaultProps = void 0;
+exports.defaultProps = exports.DropBoxDefaultProps = void 0;
+var _defaultProps = require("../DropBoxElement/props/defaultProps");
+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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+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); }
 var defaultProps = {
-  animationStyle: 'default',
-  boxPosition: 'bottomLeft',
-  dataId: 'dropBox',
-  dataSelectorId: 'dropBox',
-  isActive: false,
-  isAnimate: false,
-  isArrow: true,
-  isRadius: true,
-  size: 'default',
   needResponsive: true,
-  isAbsolutePositioningNeeded: true,
-  isBoxPaddingNeed: false,
-  isPadding: true,
-  customClass: {},
-  a11y: {},
-  palette: 'default',
-  needAutoZindex: true,
   portalId: 'portal1',
+  isActive: false,
+  isAbsolutePositioningNeeded: true,
   isRestrictScroll: false,
-  needFocusScope: false
+  needFocusScope: false,
+  needAutoZindex: true
 };
-exports.defaultProps = defaultProps;
+exports.defaultProps = defaultProps;
+var DropBoxDefaultProps = _objectSpread(_objectSpread({}, _defaultProps.DropBoxElementDefaultProps), defaultProps);
+exports.DropBoxDefaultProps = DropBoxDefaultProps;

package/lib/DropBox/props/propTypes.js

@@ -3,55 +3,25 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.propTypes = void 0;
+exports.propTypes = exports.DropBoxPropTypes = void 0;
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _propTypes2 = require("../DropBoxElement/props/propTypes");
 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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+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); }
 var propTypes = {
-  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,
   needResponsive: _propTypes["default"].bool,
-  onClick: _propTypes["default"].func,
-  needFocusScope: _propTypes["default"].bool,
-  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']),
-  needAutoZindex: _propTypes["default"].bool,
   portalId: _propTypes["default"].string,
+  isActive: _propTypes["default"].bool,
+  isAbsolutePositioningNeeded: _propTypes["default"].bool,
   isRestrictScroll: _propTypes["default"].bool,
-  customStyle: _propTypes["default"].object
+  needFocusScope: _propTypes["default"].bool,
+  needAutoZindex: _propTypes["default"].bool
 };
-exports.propTypes = propTypes;
+exports.propTypes = propTypes;
+var DropBoxPropTypes = _objectSpread(_objectSpread({}, _propTypes2.DropBoxElementPropTypes), propTypes);
+exports.DropBoxPropTypes = DropBoxPropTypes;

package/lib/ListItem/ListItem.module.css

@@ -48,15 +48,15 @@
   --listitem_border_color: var(--zdt_listitem_active_border);
 }
 [dir=ltr] .small {
-  --listitem_padding: var(--zd_size9) var(--zd_size3) var(--zd_size9)
+  --listitem_padding: var(--zd_size7) var(--zd_size3) var(--zd_size7)
     var(--zd_size5)
-    /*rtl: var(--zd_size9) var(--zd_size5) var(--zd_size9) var(--zd_size3)*/;
+    /*rtl: var(--zd_size7) var(--zd_size5) var(--zd_size7) var(--zd_size3)*/;
 }
 [dir=rtl] .small {
-  --listitem_padding: var(--zd_size9) var(--zd_size5) var(--zd_size9) var(--zd_size3);
+  --listitem_padding: var(--zd_size7) var(--zd_size5) var(--zd_size7) var(--zd_size3);
 }
 .medium {
-  --listitem_padding: var(--zd_size9) var(--zd_size20);
+  --listitem_padding: var(--zd_size7) var(--zd_size20);
   --listitem_min_height: var(--zd_size35);
 }
 .large {
@@ -74,9 +74,11 @@
 .children {
   composes: dotted from '../common/common.module.css';
 }
+.value, .multiLineValue {
+  line-height: var(--zd_size20);
+}
 .multiLineValue{
   word-break: break-word;
-  line-height: var(--zd_size18);
   composes: clamp from '../common/common.module.css'
 }
 .iconBox {
@@ -183,20 +185,20 @@
   display: block;
 }
 [dir=ltr] .smallwithTick {
-  --listitem_padding: var(--zd_size9) var(--zd_size39) var(--zd_size9)
+  --listitem_padding: var(--zd_size7) var(--zd_size39) var(--zd_size7)
     var(--zd_size5)
-    /*rtl: var(--zd_size9) var(--zd_size5) var(--zd_size9) var(--zd_size39)*/;
+    /*rtl: var(--zd_size7) var(--zd_size5) var(--zd_size7) var(--zd_size39)*/;
 }
 [dir=rtl] .smallwithTick {
-  --listitem_padding: var(--zd_size9) var(--zd_size5) var(--zd_size9) var(--zd_size39);
+  --listitem_padding: var(--zd_size7) var(--zd_size5) var(--zd_size7) var(--zd_size39);
 }
 [dir=ltr] .mediumwithTick {
-  --listitem_padding: var(--zd_size9) var(--zd_size39) var(--zd_size9)
+  --listitem_padding: var(--zd_size7) var(--zd_size39) var(--zd_size7)
     var(--zd_size20)
-    /*rtl: var(--zd_size9) var(--zd_size20) var(--zd_size9) var(--zd_size39)*/;
+    /*rtl: var(--zd_size7) var(--zd_size20) var(--zd_size7) var(--zd_size39)*/;
 }
 [dir=rtl] .mediumwithTick {
-  --listitem_padding: var(--zd_size9) var(--zd_size20) var(--zd_size9) var(--zd_size39);
+  --listitem_padding: var(--zd_size7) var(--zd_size20) var(--zd_size7) var(--zd_size39);
 }
 [dir=ltr] .largewithTick {
   --listitem_padding: var(--zd_size10) var(--zd_size39) var(--zd_size10)

package/lib/css.js

@@ -33,7 +33,8 @@ require("./Tag/Tag.module.css");
 require("./Stencils/Stencils.module.css");
 require("./PopOver/PopOver.module.css");
 require("./DropDown/DropDown.module.css");
-require("./DropBox/DropBox.module.css");
+require("./DropBox/css/DropBox.module.css");
+require("./DropBox/DropBoxElement/css/DropBoxElement.module.css");
 require("./DateTime/DateTime.module.css");
 require("./DateTime/DateWidget.module.css");
 require("./Card/Card.module.css");

package/lib/utils/css/mergeStyle.js

@@ -15,7 +15,8 @@ var REPLACER_SYMBOL = '$';
 // $ startWith is used for replace the existing style.
 // all other will be append
 
-function mergeStyle(defaultStyle, customStyle) {
+function mergeStyle(defaultStyle) {
+  var customStyle = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   var additionalStyle = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
   // if(!Object.keys(defaultStyle).includes('base')) {
   //   throw new Error(`STYLE CUSTOMIZATION RULE - Your style sheet should have "base" class name for customization`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.0.0-alpha-262",
+  "version": "1.0.0-alpha-264",
   "main": "es/index.js",
   "module": "es/index.js",
   "private": false,

package/docs/external/active-line.js

@@ -1,72 +0,0 @@
-// CodeMirror, copyright (c) by Marijn Haverbeke and others
-// Distributed under an MIT license: http://codemirror.net/LICENSE
-
-(function(mod) {
-  if (typeof exports == "object" && typeof module == "object") // CommonJS
-    mod(require("../../lib/codemirror"));
-  else if (typeof define == "function" && define.amd) // AMD
-    define(["../../lib/codemirror"], mod);
-  else // Plain browser env
-    mod(CodeMirror);
-})(function(CodeMirror) {
-  "use strict";
-  var WRAP_CLASS = "CodeMirror-activeline";
-  var BACK_CLASS = "CodeMirror-activeline-background";
-  var GUTT_CLASS = "CodeMirror-activeline-gutter";
-
-  CodeMirror.defineOption("styleActiveLine", false, function(cm, val, old) {
-    var prev = old == CodeMirror.Init ? false : old;
-    if (val == prev) return
-    if (prev) {
-      cm.off("beforeSelectionChange", selectionChange);
-      clearActiveLines(cm);
-      delete cm.state.activeLines;
-    }
-    if (val) {
-      cm.state.activeLines = [];
-      updateActiveLines(cm, cm.listSelections());
-      cm.on("beforeSelectionChange", selectionChange);
-    }
-  });
-
-  function clearActiveLines(cm) {
-    for (var i = 0; i < cm.state.activeLines.length; i++) {
-      cm.removeLineClass(cm.state.activeLines[i], "wrap", WRAP_CLASS);
-      cm.removeLineClass(cm.state.activeLines[i], "background", BACK_CLASS);
-      cm.removeLineClass(cm.state.activeLines[i], "gutter", GUTT_CLASS);
-    }
-  }
-
-  function sameArray(a, b) {
-    if (a.length != b.length) return false;
-    for (var i = 0; i < a.length; i++)
-      if (a[i] != b[i]) return false;
-    return true;
-  }
-
-  function updateActiveLines(cm, ranges) {
-    var active = [];
-    for (var i = 0; i < ranges.length; i++) {
-      var range = ranges[i];
-      var option = cm.getOption("styleActiveLine");
-      if (typeof option == "object" && option.nonEmpty ? range.anchor.line != range.head.line : !range.empty())
-        continue
-      var line = cm.getLineHandleVisualStart(range.head.line);
-      if (active[active.length - 1] != line) active.push(line);
-    }
-    if (sameArray(cm.state.activeLines, active)) return;
-    cm.operation(function() {
-      clearActiveLines(cm);
-      for (var i = 0; i < active.length; i++) {
-        cm.addLineClass(active[i], "wrap", WRAP_CLASS);
-        cm.addLineClass(active[i], "background", BACK_CLASS);
-        cm.addLineClass(active[i], "gutter", GUTT_CLASS);
-      }
-      cm.state.activeLines = active;
-    });
-  }
-
-  function selectionChange(cm, sel) {
-    updateActiveLines(cm, sel.ranges);
-  }
-});

package/docs/external/autorefresh.js

@@ -1,47 +0,0 @@
-// CodeMirror, copyright (c) by Marijn Haverbeke and others
-// Distributed under an MIT license: https://codemirror.net/LICENSE
-
-(function(mod) {
-  if (typeof exports == "object" && typeof module == "object") // CommonJS
-    mod(require("../../lib/codemirror"))
-  else if (typeof define == "function" && define.amd) // AMD
-    define(["../../lib/codemirror"], mod)
-  else // Plain browser env
-    mod(CodeMirror)
-})(function(CodeMirror) {
-  "use strict"
-
-  CodeMirror.defineOption("autoRefresh", false, function(cm, val) {
-    if (cm.state.autoRefresh) {
-      stopListening(cm, cm.state.autoRefresh)
-      cm.state.autoRefresh = null
-    }
-    if (val && cm.display.wrapper.offsetHeight == 0)
-      startListening(cm, cm.state.autoRefresh = {delay: val.delay || 250})
-  })
-
-  function startListening(cm, state) {
-    function check() {
-      if (cm.display.wrapper.offsetHeight) {
-        stopListening(cm, state)
-        if (cm.display.lastWrapHeight != cm.display.wrapper.clientHeight)
-          cm.refresh()
-      } else {
-        state.timeout = setTimeout(check, state.delay)
-      }
-    }
-    state.timeout = setTimeout(check, state.delay)
-    state.hurry = function() {
-      clearTimeout(state.timeout)
-      state.timeout = setTimeout(check, 50)
-    }
-    CodeMirror.on(window, "mouseup", state.hurry)
-    CodeMirror.on(window, "keyup", state.hurry)
-  }
-
-  function stopListening(_cm, state) {
-    clearTimeout(state.timeout)
-    CodeMirror.off(window, "mouseup", state.hurry)
-    CodeMirror.off(window, "keyup", state.hurry)
-  }
-});