@zohodesk/dot 1.0.0-temp-187.17 → 1.0.0-temp-222

package/es/form/fields/TagsMultiSelect/TagsMultiSelect.js

@@ -160,14 +160,12 @@ export default class TagsMultiSelect extends React.Component {
     let {
       tagCustomClass = '',
       listItemClass = '',
-      textBoxIconWrapperClass = '',
-      dropBoxClass = ''
+      textBoxIconWrapperClass = ''
     } = customClass;
     const {
       TextBoxIconProps = {},
       TagWrapperProps = {},
-      TagProps = {},
-      ListItemProps = {}
+      TagProps = {}
     } = customProps;
     const isEditable = !isReadOnly;
     return /*#__PURE__*/React.createElement("div", {
@@ -256,8 +254,7 @@ export default class TagsMultiSelect extends React.Component {
         boxPosition: boxPosition,
         isPadding: false,
         customClass: {
-          customDropBoxWrap: style.dropdown,
-          customDropBox: dropBoxClass
+          customDropBoxWrap: style.dropdown
         },
         dataId: `${dataId}_dropbox`,
         isResponsivePadding: true,
@@ -289,7 +286,7 @@ export default class TagsMultiSelect extends React.Component {
         let {
           name,
           isNew,
-          listProps
+          listItemProps
         } = item;
         return /*#__PURE__*/React.createElement(React.Fragment, null, searchList.length > 1 && isNew ? /*#__PURE__*/React.createElement(DropDownSeparator, null) : null, /*#__PURE__*/React.createElement(ListItem, {
           key: index,
@@ -302,9 +299,8 @@ export default class TagsMultiSelect extends React.Component {
           highlight: selectSearchIndex === index,
           getRef: this.getSelectedItemRef,
           isDisabled: listDisabled,
-          customProps: listProps,
-          customClass: listItemClass,
-          ...ListItemProps
+          customProps: listItemProps,
+          customClass: listItemClass
         }, isNew ? /*#__PURE__*/React.createElement(Container, {
           alignBox: "row",
           align: "vertical"

package/es/form/fields/TagsMultiSelect/props/propTypes.js

@@ -52,8 +52,7 @@ export const propTypes = {
   customProps: PropTypes.shape({
     TextBoxIconProps: PropTypes.object,
     TagWrapperProps: PropTypes.object,
-    TagProps: PropTypes.object,
-    ListItemProps: PropTypes.object
+    TagProps: PropTypes.object
   }),
   isFocus: PropTypes.bool
 };

package/es/list/DepartmentDropDown/DepartmentDropDown.js

@@ -48,19 +48,15 @@ class DepartmentDropDown extends Component {
       onSearch,
       needSearchFetching,
       searchStr,
-      i18nKeys,
-      customProps
+      i18nKeys
     } = this.props;
-    const {
-      ToggleDropDownProps = {}
-    } = customProps;
     let {
       title = 'Move Department',
       searchEmptyText = 'No results found',
       searchErrorText = 'No results',
       placeholder = 'Search Department'
     } = i18nKeys;
-    return /*#__PURE__*/React.createElement(ToggleDropDown, { ...ToggleDropDownProps,
+    return /*#__PURE__*/React.createElement(ToggleDropDown, {
       title: title,
       options: departmentList,
       value: /*#__PURE__*/React.createElement(DepartmentText, {

package/es/list/DepartmentDropDown/props/defaultProps.js

@@ -3,6 +3,5 @@ export const defaultProps = {
   isPopupActive: true,
   isNextOptions: false,
   searchStr: '',
-  i18nKeys: {},
-  customProps: {}
+  i18nKeys: {}
 };

package/es/list/DepartmentDropDown/props/propTypes.js

@@ -20,8 +20,5 @@ export const propTypes = {
     searchEmptyText: PropTypes.string,
     searchErrorText: PropTypes.string,
     placeholder: PropTypes.string
-  }),
-  customProps: PropTypes.shape({
-    ToggleDropDownProps: PropTypes.object
   })
 };

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

@@ -178,12 +178,8 @@ export class StatusDropdown extends React.Component {
       targetOffset,
       renderTargetElement,
       renderFooterElement,
-      a11y = {},
-      customClass
+      a11y = {}
     } = this.props;
-    const {
-      dropBoxClass = ''
-    } = customClass;
     const {
       tabIndex = 0,
       ariaLabelledby,
@@ -251,8 +247,7 @@ export class StatusDropdown extends React.Component {
         isAnimate: true,
         getRef: getContainerRef,
         customClass: {
-          customDropBoxWrap: style.dropBoxContainer,
-          customDropBox: dropBoxClass
+          customDropBoxWrap: style.dropBoxContainer
         },
         needResponsive: needResponsive,
         isResponsivePadding: true,

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

@@ -18,6 +18,5 @@ export const defaultProps = {
   needMultiLineText: false,
   isFetchingOptions: false,
   isAbsolutePositioningNeeded: true,
-  isRestrictScroll: false,
-  customClass: {}
+  isRestrictScroll: false
 };

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

@@ -56,8 +56,5 @@ export const propTypes = {
   positionsOffset: PropTypes.object,
   renderTargetElement: PropTypes.func,
   renderFooterElement: PropTypes.node,
-  targetOffset: PropTypes.object,
-  customClass: PropTypes.shape({
-    dropBoxClass: PropTypes.string
-  })
+  targetOffset: PropTypes.object
 };

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

@@ -36,8 +36,9 @@
 .value {
   composes: dotted from '~@zohodesk/components/es/common/common.module.css';
 }
-.multiLineValue {
-  composes: lineClamp from '~@zohodesk/components/es/common/common.module.css';
+.multiLineValue{
+  word-break: break-word;
+  composes: clamp from '~@zohodesk/components/es/common/common.module.css';
 }
 [dir=ltr] .withBorder.active {
   border-left-color: var(--zdt_statuslistitem_default_active_border);
@@ -89,10 +90,6 @@
 }
 /* Status Type */
 .statusType {
-  --status_listitem_bullet_min_height: var(--zd_size8);
-  --status_listitem_bullet_min_width: var(--zd_size8);
-  min-height: var(--status_listitem_bullet_min_height);
-  min-width: var(--status_listitem_bullet_min_width);
   width: var(--zd_size8) ;
   height: var(--zd_size8) ;
   border-radius: 50%;

package/lib/form/fields/Fields.module.css

@@ -71,11 +71,16 @@
 }
 .radioBox {
   max-width: 100% ;
-  height: var(--zd_size36) ;
   transition: border var(--zd_transition3);
-  padding: 0 var(--zd_size10) ;
   border: 1px solid var(--zdt_radiofield_box_border);
-  border-radius: 6px
+  border-radius: 6px;
+}
+.radioBox.primaryTextOnly {
+  height: var(--zd_size36) ;
+  padding: 0 var(--zd_size10) ;
+}
+.radioBox.withSecondaryText {
+  padding: var(--zd_size18) var(--zd_size16) ;
 }
 .hoverableRadioBox:hover, .radioBoxActive {
   border-color: var(--zdt_radiofield_box_active_border)
@@ -221,10 +226,7 @@ position: relative;
 [dir=rtl] .rightPlaceholder{
   left:var(--zd_size15) 
 }
+   
 .phoneField{
   composes: ltr-zone  from '~@zohodesk/components/es/common/common.module.css';
-}
-
-.lineClampPickListItem{
-  --line-clamp: var(--picklist-field-line-clamp,3);
 }

package/lib/form/fields/RadioField/RadioField.js

@@ -9,6 +9,8 @@ exports["default"] = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _utils = require("@zohodesk/utils");
+
 var _defaultProps = require("./props/defaultProps");
 
 var _propTypes = require("./props/propTypes");
@@ -184,18 +186,30 @@ var RadioField = /*#__PURE__*/function (_PureComponent) {
       }, LabelProps)), /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_FieldsModule["default"].fieldContainer, " ").concat(isBoxStyle ? _FieldsModule["default"].radiosWrapper : '', " ").concat(labelName ? isBoxStyle ? _FieldsModule["default"].fieldMargin_large : _FieldsModule["default"].fieldMargin_medium : '', " ").concat(_FieldsModule["default"].radioContainer)
       }, options.map(function (option, index) {
+        var _compileClassNames;
+
         var text = option.text,
             value = option.value,
             _option$disabled = option.disabled,
             disabled = _option$disabled === void 0 ? false : _option$disabled,
             tooltip = option.tooltip,
-            infoTooltip = option.infoTooltip;
+            infoTooltip = option.infoTooltip,
+            secondaryText = option.secondaryText,
+            renderRightPlaceholderNode = option.renderRightPlaceholderNode,
+            customProps = option.customProps;
         var isDisabledState = disabled || isDisabled;
         var isChecked = selectedValue == value;
+        var rightPlaceholderNode = !!infoTooltip ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Icon["default"], _extends({
+          name: "ZD-GN-info",
+          size: "16",
+          title: infoTooltip,
+          iconClass: _FieldsModule["default"].infoIcon
+        }, InfoIconProps)), renderRightPlaceholderNode) : renderRightPlaceholderNode;
+        var radioBoxClasses = isBoxStyle ? (0, _utils.compileClassNames)((_compileClassNames = {}, _defineProperty(_compileClassNames, _FieldsModule["default"].radioBox, true), _defineProperty(_compileClassNames, _FieldsModule["default"].withSecondaryText, !!secondaryText), _defineProperty(_compileClassNames, _FieldsModule["default"].primaryTextOnly, !secondaryText), _defineProperty(_compileClassNames, _FieldsModule["default"].hoverableRadioBox, !isDisabledState), _defineProperty(_compileClassNames, _FieldsModule["default"].radioBoxActive, isChecked), _compileClassNames)) : '';
         return /*#__PURE__*/_react["default"].createElement("span", {
           key: index,
           className: "".concat(!isBoxStyle ? _FieldsModule["default"].radio : '', " ").concat(_FieldsModule["default"].radioWrap)
-        }, /*#__PURE__*/_react["default"].createElement(_Radio["default"], _extends({
+        }, /*#__PURE__*/_react["default"].createElement(_Radio["default"], _extends({}, customProps, {
           id: index,
           value: value,
           name: id,
@@ -212,20 +226,21 @@ var RadioField = /*#__PURE__*/function (_PureComponent) {
           checked: isChecked,
           dataId: dataId,
           isReadOnly: isReadOnly,
-          variant: variant
+          variant: variant,
+          secondaryText: secondaryText
         }, RadioProps, {
           a11y: _objectSpread({
             tabIndex: !!selectedValue ? isChecked ? '0' : '-1' : index === 0 ? '0' : '-1'
           }, RadioProps.a11y),
           customClass: _objectSpread({
-            customRadioWrap: isBoxStyle ? "".concat(_FieldsModule["default"].radioBox, " ").concat(!isDisabledState ? _FieldsModule["default"].hoverableRadioBox : '', " ").concat(isChecked ? _FieldsModule["default"].radioBoxActive : '') : ''
-          }, RadioProps.customClass)
-        }), !!infoTooltip ? /*#__PURE__*/_react["default"].createElement(_Icon["default"], _extends({
-          name: "ZD-GN-info",
-          size: "16",
-          title: infoTooltip,
-          iconClass: _FieldsModule["default"].infoIcon
-        }, InfoIconProps)) : null));
+            customRadioWrap: radioBoxClasses
+          }, RadioProps.customClass),
+          customProps: _objectSpread({
+            LabelProps: _objectSpread(_objectSpread({}, RadioProps.customProps ? RadioProps.customProps.LabelProps : undefined), {}, {
+              renderRightPlaceholderNode: rightPlaceholderNode
+            })
+          }, RadioProps.customProps)
+        })));
       })), validationMessage && /*#__PURE__*/_react["default"].createElement(_ValidationMessage["default"], _extends({
         text: validationMessage,
         palette: validationPalette,

package/lib/form/fields/RadioField/__tests__/RadioField.spec.js

@@ -24,6 +24,22 @@ var options = [{
   text: 'Kolkata',
   value: '4'
 }];
+var optionsWithsecondaryText = [{
+  text: 'Chennai',
+  value: '1',
+  secondaryText: 'Tamil Nadu Capital'
+}, {
+  text: 'Mumbai',
+  value: '2',
+  secondaryText: 'Maharashtra Capital',
+  tooltip: 'Disabled Option',
+  disabled: true
+}, {
+  text: 'Delhi',
+  value: '3',
+  secondaryText: 'Capital of India',
+  infoTooltip: 'Capital of India'
+}];
 describe('RadioField', function () {
   test('rendering the defult props', function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioField["default"], {
@@ -50,4 +66,21 @@ describe('RadioField', function () {
 
     expect(asFragment()).toMatchSnapshot();
   });
+  test('rendering with secondaryTextOptions', function () {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioField["default"], {
+      options: optionsWithsecondaryText
+    })),
+        asFragment = _render4.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering with secondaryTextOptions & isBoxStyle', function () {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioField["default"], {
+      options: optionsWithsecondaryText,
+      isBoxStyle: true
+    })),
+        asFragment = _render5.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
 });