@zohodesk/dot 1.0.0-beta.251 → 1.0.0-beta.252

package/README.md

@@ -2,6 +2,12 @@
 
 In this Library, we Provide Some Basic Components to Build Your Application
 
+# 1.0.0-beta.252
+
+- **ToggleDropdown**  - customClass (customDropBox and customListBox) Support added.
+
+- **StatusDropdown** - align item value changed (center => baseline) and Line-height changed(18px => 20px)
+
 # 1.0.0-beta.251
 
 - **ToggleDropdown, StatusDropdown, StatusListItem**  - Added New Prop `needMultiLineText`

package/es/dropdown/ToggleDropDown/ToggleDropDown.js

@@ -520,7 +520,8 @@ export class ToggleDropDown extends Component {
       palette,
       getFooter,
       customProps,
-      needMultiLineText
+      needMultiLineText,
+      customClass
     } = this.props;
     let {
       ToggleDropDownProps = {},
@@ -529,6 +530,10 @@ export class ToggleDropDown extends Component {
       ListItemWithIconProps = {},
       ListItemProps = {}
     } = customProps;
+    let {
+      customDropBox = '',
+      customListBox = ''
+    } = customClass;
     const isPopupOpen = needExternalPopupState ? isPopupActive && isOpen : isOpen;
     const Component = isToggleStateNeeded ? children.type : null,
       componentProps = isToggleStateNeeded ? children.props : null;
@@ -613,7 +618,8 @@ export class ToggleDropDown extends Component {
         isAnimate: true,
         getRef: getContainerRef,
         customClass: {
-          customDropBoxWrap: style.dropBoxContainer
+          customDropBoxWrap: style.dropBoxContainer,
+          customDropBox: customDropBox
         },
         needResponsive: needResponsive,
         isPadding: isPadding,
@@ -659,7 +665,7 @@ export class ToggleDropDown extends Component {
         scroll: "vertical",
         preventParentScroll: "vertical",
         dataId: `${dataId}_list`,
-        className: `${tabletMode ? style.responsivemaxHgt : style.maxHgt}`,
+        className: `${tabletMode ? style.responsivemaxHgt : style.maxHgt} ${customListBox}`,
         eleRef: this.scrollContentRef,
         onScroll: this.handleScroll,
         role: isSearch ? 'listbox' : undefined,

package/es/dropdown/ToggleDropDown/props/defaultProps.js

@@ -22,5 +22,6 @@ export const defaultProps = {
   customProps: {},
   preventPopupClose: false,
   dataSelectorId: 'toggleDropdown',
-  needMultiLineText: false
+  needMultiLineText: false,
+  customClass: {}
 };

package/es/dropdown/ToggleDropDown/props/propTypes.js

@@ -68,5 +68,9 @@ export const propTypes = {
     ListItemProps: PropTypes.object
   }),
   preventPopupClose: PropTypes.bool,
-  needMultiLineText: PropTypes.bool
+  needMultiLineText: PropTypes.bool,
+  customClass: PropTypes.shape({
+    customDropBox: PropTypes.string,
+    customListBox: PropTypes.string
+  })
 };

package/es/list/status/StatusListItem/StatusListItem.js

@@ -77,7 +77,7 @@ export default class StatusListItem extends React.Component {
       role: role,
       "aria-selected": ariaSelected,
       isCover: false,
-      align: "vertical",
+      align: "baseline",
       alignBox: "row",
       className: `${style.list} ${style[size]} ${style[palette]} ${active ? style.active : highlight && !isDisabled ? style.hover : ''} ${autoHover && !isDisabled ? style.effect : ''} ${needTick ? style.withTick : ''} ${isDisabled ? CssProvider('isDisable') : ''} ${needBorder ? style.withBorder : ''}`,
       dataId: String(value).replace("'", '_'),

package/es/list/status/StatusListItem/StatusListItem.module.css

@@ -3,6 +3,7 @@
   font-size: var(--zd_font_size13);
   position: relative;
   list-style: none;
+  min-height: var(--zd_size35);
   cursor: pointer;
 }
 [dir=ltr] .withBorder {
@@ -12,13 +13,13 @@
   border-right: 1px solid var(--zdt_statuslistitem_default_border);
 }
 [dir=ltr] .small {
-  padding: var(--zd_size9) var(--zd_size3) var(--zd_size9) var(--zd_size5);
+  padding: var(--zd_size7) var(--zd_size3) var(--zd_size7) var(--zd_size5);
 }
 [dir=rtl] .small {
-  padding: var(--zd_size9) var(--zd_size5) var(--zd_size9) var(--zd_size3);
+  padding: var(--zd_size7) var(--zd_size5) var(--zd_size7) var(--zd_size3);
 }
 .medium {
-  padding: var(--zd_size9) var(--zd_size20);
+  padding: var(--zd_size7) var(--zd_size20);
 }
 .large {
   height: var(--zd_size48);
@@ -29,13 +30,14 @@
 [dir=rtl] .large {
   padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size3);
 }
-
+.value,.multiLineValue {
+  line-height: var(--zd_size20);
+}
 .value {
   composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
 }
 .multiLineValue{
   word-break: break-word;
-  line-height: var(--zd_size18);
   composes: clamp from '~@zohodesk/components/lib/common/common.module.css';
 }
 [dir=ltr] .withBorder.active {

package/lib/dropdown/ToggleDropDown/ToggleDropDown.js

@@ -569,7 +569,8 @@ var ToggleDropDown = /*#__PURE__*/function (_Component) {
         palette = _this$props12.palette,
         getFooter = _this$props12.getFooter,
         customProps = _this$props12.customProps,
-        needMultiLineText = _this$props12.needMultiLineText;
+        needMultiLineText = _this$props12.needMultiLineText,
+        customClass = _this$props12.customClass;
       var _customProps$ToggleDr = customProps.ToggleDropDownProps,
         ToggleDropDownProps = _customProps$ToggleDr === void 0 ? {} : _customProps$ToggleDr,
         _customProps$DropBoxP = customProps.DropBoxProps,
@@ -580,6 +581,10 @@ var ToggleDropDown = /*#__PURE__*/function (_Component) {
         ListItemWithIconProps = _customProps$ListItem === void 0 ? {} : _customProps$ListItem,
         _customProps$ListItem2 = customProps.ListItemProps,
         ListItemProps = _customProps$ListItem2 === void 0 ? {} : _customProps$ListItem2;
+      var _customClass$customDr = customClass.customDropBox,
+        customDropBox = _customClass$customDr === void 0 ? '' : _customClass$customDr,
+        _customClass$customLi = customClass.customListBox,
+        customListBox = _customClass$customLi === void 0 ? '' : _customClass$customLi;
       var isPopupOpen = needExternalPopupState ? isPopupActive && isOpen : isOpen;
       var Component = isToggleStateNeeded ? children.type : null,
         componentProps = isToggleStateNeeded ? children.props : null;
@@ -661,7 +666,8 @@ var ToggleDropDown = /*#__PURE__*/function (_Component) {
           isAnimate: true,
           getRef: getContainerRef,
           customClass: {
-            customDropBoxWrap: _ToggleDropDownModule["default"].dropBoxContainer
+            customDropBoxWrap: _ToggleDropDownModule["default"].dropBoxContainer,
+            customDropBox: customDropBox
           },
           needResponsive: needResponsive,
           isPadding: isPadding,
@@ -707,7 +713,7 @@ var ToggleDropDown = /*#__PURE__*/function (_Component) {
           scroll: "vertical",
           preventParentScroll: "vertical",
           dataId: "".concat(dataId, "_list"),
-          className: "".concat(tabletMode ? _ToggleDropDownModule["default"].responsivemaxHgt : _ToggleDropDownModule["default"].maxHgt),
+          className: "".concat(tabletMode ? _ToggleDropDownModule["default"].responsivemaxHgt : _ToggleDropDownModule["default"].maxHgt, " ").concat(customListBox),
           eleRef: _this6.scrollContentRef,
           onScroll: _this6.handleScroll,
           role: isSearch ? 'listbox' : undefined,

package/lib/dropdown/ToggleDropDown/props/defaultProps.js

@@ -28,6 +28,7 @@ var defaultProps = {
   customProps: {},
   preventPopupClose: false,
   dataSelectorId: 'toggleDropdown',
-  needMultiLineText: false
+  needMultiLineText: false,
+  customClass: {}
 };
 exports.defaultProps = defaultProps;

package/lib/dropdown/ToggleDropDown/props/propTypes.js

@@ -75,6 +75,10 @@ var propTypes = {
     ListItemProps: _propTypes["default"].object
   }),
   preventPopupClose: _propTypes["default"].bool,
-  needMultiLineText: _propTypes["default"].bool
+  needMultiLineText: _propTypes["default"].bool,
+  customClass: _propTypes["default"].shape({
+    customDropBox: _propTypes["default"].string,
+    customListBox: _propTypes["default"].string
+  })
 };
 exports.propTypes = propTypes;

package/lib/list/status/StatusListItem/StatusListItem.js

@@ -102,7 +102,7 @@ var StatusListItem = /*#__PURE__*/function (_React$Component) {
         role: role,
         "aria-selected": ariaSelected,
         isCover: false,
-        align: "vertical",
+        align: "baseline",
         alignBox: "row",
         className: "".concat(_StatusListItemModule["default"].list, " ").concat(_StatusListItemModule["default"][size], " ").concat(_StatusListItemModule["default"][palette], " ").concat(active ? _StatusListItemModule["default"].active : highlight && !isDisabled ? _StatusListItemModule["default"].hover : '', " ").concat(autoHover && !isDisabled ? _StatusListItemModule["default"].effect : '', " ").concat(needTick ? _StatusListItemModule["default"].withTick : '', " ").concat(isDisabled ? (0, _CssProvider["default"])('isDisable') : '', " ").concat(needBorder ? _StatusListItemModule["default"].withBorder : ''),
         dataId: String(value).replace("'", '_'),

package/lib/list/status/StatusListItem/StatusListItem.module.css

@@ -3,6 +3,7 @@
   font-size: var(--zd_font_size13);
   position: relative;
   list-style: none;
+  min-height: var(--zd_size35);
   cursor: pointer;
 }
 [dir=ltr] .withBorder {
@@ -12,13 +13,13 @@
   border-right: 1px solid var(--zdt_statuslistitem_default_border);
 }
 [dir=ltr] .small {
-  padding: var(--zd_size9) var(--zd_size3) var(--zd_size9) var(--zd_size5);
+  padding: var(--zd_size7) var(--zd_size3) var(--zd_size7) var(--zd_size5);
 }
 [dir=rtl] .small {
-  padding: var(--zd_size9) var(--zd_size5) var(--zd_size9) var(--zd_size3);
+  padding: var(--zd_size7) var(--zd_size5) var(--zd_size7) var(--zd_size3);
 }
 .medium {
-  padding: var(--zd_size9) var(--zd_size20);
+  padding: var(--zd_size7) var(--zd_size20);
 }
 .large {
   height: var(--zd_size48);
@@ -29,13 +30,14 @@
 [dir=rtl] .large {
   padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size3);
 }
-
+.value,.multiLineValue {
+  line-height: var(--zd_size20);
+}
 .value {
   composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
 }
 .multiLineValue{
   word-break: break-word;
-  line-height: var(--zd_size18);
   composes: clamp from '~@zohodesk/components/lib/common/common.module.css';
 }
 [dir=ltr] .withBorder.active {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/dot",
-  "version": "1.0.0-beta.251",
+  "version": "1.0.0-beta.252",
   "main": "lib/index",
   "module": "es/index.js",
   "private": false,
@@ -44,7 +44,7 @@
     "velocity-react": "1.4.3",
     "@zohodesk/variables": "1.0.0-beta.30",
     "@zohodesk/i18n": "1.0.0-beta.7",
-    "@zohodesk/components": "1.0.0-alpha-262",
+    "@zohodesk/components": "1.0.0-alpha-263",
     "@zohodesk/icons": "1.0.0-beta.119",
     "@zohodesk/svg": "1.0.0-beta.54",
     "@zohodesk/virtualizer": "1.0.3",
@@ -55,7 +55,7 @@
     "velocity-react": "1.4.3",
     "@zohodesk/variables": "1.0.0-beta.30",
     "@zohodesk/i18n": "1.0.0-beta.7",
-    "@zohodesk/components": "1.0.0-alpha-262",
+    "@zohodesk/components": "1.0.0-alpha-263",
     "@zohodesk/icons": "1.0.0-beta.119",
     "@zohodesk/svg": "1.0.0-beta.54",
     "@zohodesk/virtualizer": "1.0.3",