@zohodesk/dot 1.0.0-temp-134 → 1.0.0-temp-136

package/README.md

@@ -2,6 +2,9 @@
 
 In this Library, we Provide Some Basic Components to Build Your Application
 
+# 1.0.0-beta.251
+- **ToggleDropdown,StatusDropdown**  - Added New Prop 'needMultiLineText'
+
 # 1.0.0-beta.250
 
 - - **FreezeLayer** - converted to functional component

package/es/deprecated/FreezeLayer/FreezeLayer.js

@@ -3,7 +3,7 @@ import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
 import { Container } from '@zohodesk/components/lib/Layout';
 import VelocityAnimationGroup from '@zohodesk/components/lib/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup';
-import style from './FreezeLayer.module.css';
+import style from './_FreezeLayer.module.css';
 import { getZIndex } from '@zohodesk/components/lib/Provider/ZindexProvider';
 import { getDotLibraryConfig } from '../Provider/Config';
 export default class FreezeLayer extends Component {

package/es/dropdown/ToggleDropDown/ToggleDropDown.js

@@ -520,7 +520,7 @@ export class ToggleDropDown extends Component {
       palette,
       getFooter,
       customProps,
-      isMultiLineNeeded
+      needMultiLineText
     } = this.props;
     let {
       ToggleDropDownProps = {},
@@ -712,7 +712,7 @@ export class ToggleDropDown extends Component {
             getRef: this.itemRef,
             title: title ? title : item[keyName],
             palette: palette,
-            isMultiLineNeeded: isMultiLineNeeded,
+            needMultiLineText: needMultiLineText,
             a11y: {
               role: isSearch ? 'option' : 'menuitem',
               ariaSelected: selectedId === item[idName],
@@ -735,7 +735,7 @@ export class ToggleDropDown extends Component {
             getRef: this.itemRef,
             title: title ? title : item[keyName],
             palette: palette,
-            isMultiLineNeeded: isMultiLineNeeded,
+            needMultiLineText: needMultiLineText,
             a11y: {
               role: isSearch ? 'option' : 'menuitem',
               ariaSelected: selectedId === item[idName],
@@ -783,7 +783,7 @@ export class ToggleDropDown extends Component {
           title: title ? title : item[keyName],
           key: listIndex,
           palette: palette,
-          isMultiLineNeeded: isMultiLineNeeded,
+          needMultiLineText: needMultiLineText,
           a11y: {
             role: isSearch ? 'option' : 'menuitem',
             ariaSelected: selectedId === item[idName],
@@ -806,7 +806,7 @@ export class ToggleDropDown extends Component {
           getRef: this.itemRef,
           title: title ? title : item[keyName],
           palette: palette,
-          isMultiLineNeeded: isMultiLineNeeded,
+          needMultiLineText: needMultiLineText,
           a11y: {
             role: isSearch ? 'option' : 'menuitem',
             ariaSelected: selectedId === item[idName],

package/es/dropdown/ToggleDropDown/ToggleDropDown.module.css

@@ -40,14 +40,7 @@
   visibility: visible;
 }
 .value {
-  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
-}
-.multiLineValue{
-  line-height: var(--zd_size18);
-  composes: clamp from '~@zohodesk/components/lib/common/common.module.css';
-}
-.offSelection{
-  composes: offSelection from '~@zohodesk/components/lib/common/common.module.css';
+  composes: dotted  offSelection from '~@zohodesk/components/lib/common/common.module.css';
 }
 .search {
   padding: var(--zd_size6) var(--zd_size20) 0;

package/es/list/status/StatusDropdown/StatusDropdown.js

@@ -276,7 +276,7 @@ export class StatusDropdown extends React.Component {
       statusColor,
       needExternalPopupState = false,
       isPopupActive = false,
-      isMultiLineNeeded
+      needMultiLineText
     } = this.props;
     let isPopupOpen = needExternalPopupState ? isPopupActive && isOpen : isOpen;
     let {

package/es/list/status/StatusDropdown/props/defaultProps.js

@@ -14,5 +14,6 @@ export const defaultProps = {
   arrowIconPosition: 'default',
   boxSize: 'medium',
   needExternalPopupState: false,
-  statusColor: 'statusColor'
+  statusColor: 'statusColor',
+  needMultiLineText: false
 };

package/es/list/status/StatusDropdown/props/propTypes.js

@@ -46,5 +46,6 @@ export const propTypes = {
   targetAlign: PropTypes.oneOf(['vertical', 'horizontal', 'both', 'top', 'right', 'bottom', 'left', 'between', 'around']),
   title: PropTypes.string,
   togglePopup: PropTypes.func,
-  value: PropTypes.node
+  value: PropTypes.node,
+  needMultiLineText: PropTypes.bool
 };

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

@@ -61,7 +61,7 @@ export default class StatusListItem extends React.Component {
       isDisabled,
       bulletColor,
       a11y,
-      isMultiLineNeeded
+      needMultiLineText
     } = this.props;
     let options = {};
     let {
@@ -93,7 +93,7 @@ export default class StatusListItem extends React.Component {
       "data-title": isDisabled ? null : title,
       flexible: true,
       shrink: true,
-      className: isMultiLineNeeded ? style.multiLineValue : style.value
+      className: needMultiLineText ? style.multiLineValue : style.value
     }, value), needTick && active ? /*#__PURE__*/React.createElement("div", {
       className: style.tickIcon,
       "aria-hidden": ariaHidden

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

@@ -34,6 +34,7 @@
   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';
 }

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

@@ -11,5 +11,5 @@ export const defaultProps = {
   needBorder: true,
   bulletColor: 'black',
   a11y: {},
-  isMultiLineNeeded: false
+  needMultiLineText: false
 };

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

@@ -20,7 +20,7 @@ export const propTypes = {
   target: PropTypes.oneOf(['blank', 'self']),
   title: PropTypes.string,
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-  isMultiLineNeeded: PropTypes.bool,
+  needMultiLineText: PropTypes.bool,
   a11y: PropTypes.shape({
     role: PropTypes.string,
     ariaSelected: PropTypes.bool,

package/lib/deprecated/FreezeLayer/FreezeLayer.js

@@ -10,7 +10,7 @@ var _defaultProps = require("./props/defaultProps");
 var _propTypes = require("./props/propTypes");
 var _Layout = require("@zohodesk/components/lib/Layout");
 var _VelocityAnimationGroup = _interopRequireDefault(require("@zohodesk/components/lib/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup"));
-var _FreezeLayerModule = _interopRequireDefault(require("./FreezeLayer.module.css"));
+var _FreezeLayerModule = _interopRequireDefault(require("./_FreezeLayer.module.css"));
 var _ZindexProvider = require("@zohodesk/components/lib/Provider/ZindexProvider");
 var _Config = require("../Provider/Config");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/lib/dropdown/ToggleDropDown/ToggleDropDown.js

@@ -569,7 +569,7 @@ var ToggleDropDown = /*#__PURE__*/function (_Component) {
         palette = _this$props12.palette,
         getFooter = _this$props12.getFooter,
         customProps = _this$props12.customProps,
-        isMultiLineNeeded = _this$props12.isMultiLineNeeded;
+        needMultiLineText = _this$props12.needMultiLineText;
       var _customProps$ToggleDr = customProps.ToggleDropDownProps,
         ToggleDropDownProps = _customProps$ToggleDr === void 0 ? {} : _customProps$ToggleDr,
         _customProps$DropBoxP = customProps.DropBoxProps,
@@ -758,7 +758,7 @@ var ToggleDropDown = /*#__PURE__*/function (_Component) {
               getRef: _this6.itemRef,
               title: title ? title : item[keyName],
               palette: palette,
-              isMultiLineNeeded: isMultiLineNeeded,
+              needMultiLineText: needMultiLineText,
               a11y: {
                 role: isSearch ? 'option' : 'menuitem',
                 ariaSelected: selectedId === item[idName],
@@ -781,7 +781,7 @@ var ToggleDropDown = /*#__PURE__*/function (_Component) {
               getRef: _this6.itemRef,
               title: title ? title : item[keyName],
               palette: palette,
-              isMultiLineNeeded: isMultiLineNeeded,
+              needMultiLineText: needMultiLineText,
               a11y: {
                 role: isSearch ? 'option' : 'menuitem',
                 ariaSelected: selectedId === item[idName],
@@ -829,7 +829,7 @@ var ToggleDropDown = /*#__PURE__*/function (_Component) {
             title: title ? title : item[keyName],
             key: listIndex,
             palette: palette,
-            isMultiLineNeeded: isMultiLineNeeded,
+            needMultiLineText: needMultiLineText,
             a11y: {
               role: isSearch ? 'option' : 'menuitem',
               ariaSelected: selectedId === item[idName],
@@ -852,7 +852,7 @@ var ToggleDropDown = /*#__PURE__*/function (_Component) {
             getRef: _this6.itemRef,
             title: title ? title : item[keyName],
             palette: palette,
-            isMultiLineNeeded: isMultiLineNeeded,
+            needMultiLineText: needMultiLineText,
             a11y: {
               role: isSearch ? 'option' : 'menuitem',
               ariaSelected: selectedId === item[idName],

package/lib/dropdown/ToggleDropDown/ToggleDropDown.module.css

@@ -40,14 +40,7 @@
   visibility: visible;
 }
 .value {
-  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
-}
-.multiLineValue{
-  line-height: var(--zd_size18);
-  composes: clamp from '~@zohodesk/components/lib/common/common.module.css';
-}
-.offSelection{
-  composes: offSelection from '~@zohodesk/components/lib/common/common.module.css';
+  composes: dotted  offSelection from '~@zohodesk/components/lib/common/common.module.css';
 }
 .search {
   padding: var(--zd_size6) var(--zd_size20) 0;

package/lib/list/status/StatusDropdown/StatusDropdown.js

@@ -327,7 +327,7 @@ var StatusDropdown = /*#__PURE__*/function (_React$Component) {
         needExternalPopupState = _this$props7$needExte === void 0 ? false : _this$props7$needExte,
         _this$props7$isPopupA = _this$props7.isPopupActive,
         isPopupActive = _this$props7$isPopupA === void 0 ? false : _this$props7$isPopupA,
-        isMultiLineNeeded = _this$props7.isMultiLineNeeded;
+        needMultiLineText = _this$props7.needMultiLineText;
       var isPopupOpen = needExternalPopupState ? isPopupActive && isOpen : isOpen;
       var searchString = this.state.searchString;
       var containerClass = "".concat(className ? className : '', " ").concat(isPopupReady ? activeStyle ? activeStyle : '' : showIconOnHover ? _StatusDropdownModule["default"].hoverIcon : '', " ").concat(isDisabled ? _commonModule["default"].disabled : isReadOnly ? _StatusDropdownModule["default"].readOnly : !isEditable ? _StatusDropdownModule["default"].cursorDefault : !showOnHover ? "".concat(_StatusDropdownModule["default"].cursor, " ").concat(hoverStyle ? hoverStyle : '') : "".concat(hoverStyle ? hoverStyle : '', " ").concat(_StatusDropdownModule["default"].cursorDefault));

package/lib/list/status/StatusDropdown/props/defaultProps.js

@@ -20,6 +20,7 @@ var defaultProps = {
   arrowIconPosition: 'default',
   boxSize: 'medium',
   needExternalPopupState: false,
-  statusColor: 'statusColor'
+  statusColor: 'statusColor',
+  needMultiLineText: false
 };
 exports.defaultProps = defaultProps;

package/lib/list/status/StatusDropdown/props/propTypes.js

@@ -28,5 +28,5 @@ var propTypes = (_propTypes = {
   idName: _propTypes2["default"].string,
   isArrow: _propTypes2["default"].bool,
   isDataLoaded: _propTypes2["default"].bool
-}, _defineProperty(_propTypes, "isDataLoaded", _propTypes2["default"].bool), _defineProperty(_propTypes, "isDisabled", _propTypes2["default"].bool), _defineProperty(_propTypes, "isEditable", _propTypes2["default"].bool), _defineProperty(_propTypes, "isNextOptions", _propTypes2["default"].bool), _defineProperty(_propTypes, "isPopupActive", _propTypes2["default"].bool), _defineProperty(_propTypes, "isPopupOpen", _propTypes2["default"].bool), _defineProperty(_propTypes, "isPopupReady", _propTypes2["default"].bool), _defineProperty(_propTypes, "isReadOnly", _propTypes2["default"].bool), _defineProperty(_propTypes, "isSearch", _propTypes2["default"].bool), _defineProperty(_propTypes, "keyName", _propTypes2["default"].string), _defineProperty(_propTypes, "left", _propTypes2["default"].number), _defineProperty(_propTypes, "needExternalPopupState", _propTypes2["default"].bool), _defineProperty(_propTypes, "needResponsive", _propTypes2["default"].bool), _defineProperty(_propTypes, "needTick", _propTypes2["default"].bool), _defineProperty(_propTypes, "onClick", _propTypes2["default"].func), _defineProperty(_propTypes, "onTogglePopup", _propTypes2["default"].func), _defineProperty(_propTypes, "options", _propTypes2["default"].array.isRequired), _defineProperty(_propTypes, "placeHolderText", _propTypes2["default"].string), _defineProperty(_propTypes, "position", _propTypes2["default"].string), _defineProperty(_propTypes, "removeClose", _propTypes2["default"].func), _defineProperty(_propTypes, "right", _propTypes2["default"].number), _defineProperty(_propTypes, "searchBoxSize", _propTypes2["default"].oneOf(['small', 'medium', 'xmedium'])), _defineProperty(_propTypes, "searchEmptyHint", _propTypes2["default"].string), _defineProperty(_propTypes, "searchErrorText", _propTypes2["default"].string), _defineProperty(_propTypes, "showIconOnHover", _propTypes2["default"].bool), _defineProperty(_propTypes, "showOnHover", _propTypes2["default"].bool), _defineProperty(_propTypes, "statusColor", _propTypes2["default"].string), _defineProperty(_propTypes, "targetAlign", _propTypes2["default"].oneOf(['vertical', 'horizontal', 'both', 'top', 'right', 'bottom', 'left', 'between', 'around'])), _defineProperty(_propTypes, "title", _propTypes2["default"].string), _defineProperty(_propTypes, "togglePopup", _propTypes2["default"].func), _defineProperty(_propTypes, "value", _propTypes2["default"].node), _propTypes);
+}, _defineProperty(_propTypes, "isDataLoaded", _propTypes2["default"].bool), _defineProperty(_propTypes, "isDisabled", _propTypes2["default"].bool), _defineProperty(_propTypes, "isEditable", _propTypes2["default"].bool), _defineProperty(_propTypes, "isNextOptions", _propTypes2["default"].bool), _defineProperty(_propTypes, "isPopupActive", _propTypes2["default"].bool), _defineProperty(_propTypes, "isPopupOpen", _propTypes2["default"].bool), _defineProperty(_propTypes, "isPopupReady", _propTypes2["default"].bool), _defineProperty(_propTypes, "isReadOnly", _propTypes2["default"].bool), _defineProperty(_propTypes, "isSearch", _propTypes2["default"].bool), _defineProperty(_propTypes, "keyName", _propTypes2["default"].string), _defineProperty(_propTypes, "left", _propTypes2["default"].number), _defineProperty(_propTypes, "needExternalPopupState", _propTypes2["default"].bool), _defineProperty(_propTypes, "needResponsive", _propTypes2["default"].bool), _defineProperty(_propTypes, "needTick", _propTypes2["default"].bool), _defineProperty(_propTypes, "onClick", _propTypes2["default"].func), _defineProperty(_propTypes, "onTogglePopup", _propTypes2["default"].func), _defineProperty(_propTypes, "options", _propTypes2["default"].array.isRequired), _defineProperty(_propTypes, "placeHolderText", _propTypes2["default"].string), _defineProperty(_propTypes, "position", _propTypes2["default"].string), _defineProperty(_propTypes, "removeClose", _propTypes2["default"].func), _defineProperty(_propTypes, "right", _propTypes2["default"].number), _defineProperty(_propTypes, "searchBoxSize", _propTypes2["default"].oneOf(['small', 'medium', 'xmedium'])), _defineProperty(_propTypes, "searchEmptyHint", _propTypes2["default"].string), _defineProperty(_propTypes, "searchErrorText", _propTypes2["default"].string), _defineProperty(_propTypes, "showIconOnHover", _propTypes2["default"].bool), _defineProperty(_propTypes, "showOnHover", _propTypes2["default"].bool), _defineProperty(_propTypes, "statusColor", _propTypes2["default"].string), _defineProperty(_propTypes, "targetAlign", _propTypes2["default"].oneOf(['vertical', 'horizontal', 'both', 'top', 'right', 'bottom', 'left', 'between', 'around'])), _defineProperty(_propTypes, "title", _propTypes2["default"].string), _defineProperty(_propTypes, "togglePopup", _propTypes2["default"].func), _defineProperty(_propTypes, "value", _propTypes2["default"].node), _defineProperty(_propTypes, "needMultiLineText", _propTypes2["default"].bool), _propTypes);
 exports.propTypes = propTypes;

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

@@ -88,7 +88,7 @@ var StatusListItem = /*#__PURE__*/function (_React$Component) {
         isDisabled = _this$props4.isDisabled,
         bulletColor = _this$props4.bulletColor,
         a11y = _this$props4.a11y,
-        isMultiLineNeeded = _this$props4.isMultiLineNeeded;
+        needMultiLineText = _this$props4.needMultiLineText;
       var options = {};
       var role = a11y.role,
         ariaSelected = a11y.ariaSelected,
@@ -118,7 +118,7 @@ var StatusListItem = /*#__PURE__*/function (_React$Component) {
         "data-title": isDisabled ? null : title,
         flexible: true,
         shrink: true,
-        className: isMultiLineNeeded ? _StatusListItemModule["default"].multiLineValue : _StatusListItemModule["default"].value
+        className: needMultiLineText ? _StatusListItemModule["default"].multiLineValue : _StatusListItemModule["default"].value
       }, value), needTick && active ? /*#__PURE__*/_react["default"].createElement("div", {
         className: _StatusListItemModule["default"].tickIcon,
         "aria-hidden": ariaHidden

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

@@ -34,6 +34,7 @@
   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';
 }

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

@@ -17,6 +17,6 @@ var defaultProps = {
   needBorder: true,
   bulletColor: 'black',
   a11y: {},
-  isMultiLineNeeded: false
+  needMultiLineText: false
 };
 exports.defaultProps = defaultProps;

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

@@ -27,7 +27,7 @@ var propTypes = {
   target: _propTypes["default"].oneOf(['blank', 'self']),
   title: _propTypes["default"].string,
   value: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]).isRequired,
-  isMultiLineNeeded: _propTypes["default"].bool,
+  needMultiLineText: _propTypes["default"].bool,
   a11y: _propTypes["default"].shape({
     role: _propTypes["default"].string,
     ariaSelected: _propTypes["default"].bool,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/dot",
-  "version": "1.0.0-temp-134",
+  "version": "1.0.0-temp-136",
   "main": "lib/index",
   "module": "es/index.js",
   "private": false,
@@ -42,22 +42,24 @@
   "dependencies": {},
   "devDependencies": {
     "velocity-react": "1.4.3",
-    "@zohodesk/variables": "1.0.0-beta.29",
+    "@zohodesk/variables": "1.0.0-beta.30",
     "@zohodesk/i18n": "1.0.0-beta.7",
-    "@zohodesk/components": "1.0.0-alpha-260",
+    "@zohodesk/components": "1.0.0-alpha-261",
     "@zohodesk/icons": "1.0.0-beta.119",
-    "@zohodesk/svg": "1.0.0-beta.49",
+    "@zohodesk/svg": "1.0.0-beta.54",
     "@zohodesk/virtualizer": "1.0.3",
     "react-sortable-hoc": "^0.8.3",
     "@zohodesk/a11y": "1.3.7"
   },
   "peerDependencies": {
     "velocity-react": "1.4.3",
-    "@zohodesk/variables": "1.0.0-beta.29",
+    "@zohodesk/variables": "1.0.0-beta.30",
     "@zohodesk/i18n": "1.0.0-beta.7",
-    "@zohodesk/components": "1.0.0-alpha-260",
+    "@zohodesk/components": "1.0.0-alpha-261",
     "@zohodesk/icons": "1.0.0-beta.119",
-    "@zohodesk/svg": "1.0.0-beta.48",
+    "@zohodesk/svg": "1.0.0-beta.54",
+    "@zohodesk/virtualizer": "1.0.3",
+    "react-sortable-hoc": "^0.8.3",
     "@zohodesk/a11y": "1.3.7"
   },
   "react-cli": {