@zohodesk/dot 1.0.0-temp-187.4 → 1.0.0-temp-201

package/README.md

@@ -2,6 +2,12 @@
 
 In this Library, we Provide Some Basic Components to Build Your Application
 
+# 1.7.3
+
+- **RadioField**
+  - `getRef`, `isBoxStyle` props supported
+  - Fixed the Radio box hover style applying when disabled
+
 # 1.7.2
 
 - **Lookup - Search** - renderChildren, isActive, hasSeparator & customStyle props supported & Some customization also opened for this compoenent.

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

@@ -74,7 +74,7 @@
   border: 1px solid var(--zdt_radiofield_box_border);
   border-radius: 6px
 }
-.radioBox:hover, .radioBoxActive {
+.hoverableRadioBox:hover, .radioBoxActive {
   border-color: var(--zdt_radiofield_box_active_border)
 }
 .radioBoxActive {

package/es/form/fields/RadioField/RadioField.js

@@ -14,7 +14,40 @@ import style from "../Fields.module.css";
 export default class RadioField extends PureComponent {
   constructor(props) {
     super(props);
+    this.data = {
+      radios: {},
+      focus: this.handleFocus
+    };
     this.handleChange = this.handleChange.bind(this);
+    this.updateData = this.updateData.bind(this);
+    this.handleFocus = this.handleFocus.bind(this);
+  }
+
+  componentDidMount() {
+    const {
+      getRef,
+      id
+    } = this.props;
+    getRef && getRef(this.data, id);
+  }
+
+  componentDidUpdate(prevProps) {
+    const {
+      getRef,
+      id
+    } = this.props;
+
+    if (getRef !== prevProps.getRef) {
+      getRef && getRef(this.data, id);
+    }
+  }
+
+  componentWillUnmount() {
+    const {
+      getRef,
+      id
+    } = this.props;
+    getRef && getRef(null, id);
   }
 
   handleChange(value) {
@@ -25,6 +58,24 @@ export default class RadioField extends PureComponent {
     onChange && onChange(id, value);
   }
 
+  updateData(ele, val) {
+    this.data.radios[val] = ele;
+  }
+
+  handleFocus() {
+    const {
+      selectedValue,
+      options
+    } = this.props;
+    const firstRadioValue = options[0].value;
+
+    if (selectedValue) {
+      this.data.radios[selectedValue].focus();
+    } else {
+      this.data.radios[firstRadioValue].focus();
+    }
+  }
+
   render() {
     let {
       labelName,
@@ -46,6 +97,7 @@ export default class RadioField extends PureComponent {
       validationRuleMessage,
       validationRulePalette,
       isReadOnly,
+      isBoxStyle,
       variant,
       customProps
     } = this.props;
@@ -69,7 +121,7 @@ export default class RadioField extends PureComponent {
       dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
       ...LabelProps
     }), /*#__PURE__*/React.createElement("div", {
-      className: `${style.fieldContainer} ${labelName ? style.fieldMargin_medium : ''} ${style.radioContainer}`
+      className: `${style.fieldContainer} ${isBoxStyle ? style.radiosWrapper : ''} ${labelName ? style.fieldMargin_medium : ''} ${style.radioContainer}`
     }, options.map((option, index) => {
       let {
         text,
@@ -78,9 +130,11 @@ export default class RadioField extends PureComponent {
         tooltip,
         infoTooltip
       } = option;
+      let isDisabledState = disabled || isDisabled;
+      let isChecked = selectedValue == value;
       return /*#__PURE__*/React.createElement("span", {
         key: index,
-        className: `${style.radio}`
+        className: `${!isBoxStyle ? style.radio : ''} ${style.radioWrap}`
       }, /*#__PURE__*/React.createElement(Radio, {
         id: index,
         value: value,
@@ -88,17 +142,26 @@ export default class RadioField extends PureComponent {
         text: text,
         labelPalette: labelPalette,
         labelSize: labelSize,
-        active: isActive,
-        disabled: disabled || isDisabled,
+        active: isActive || isBoxStyle && isChecked,
+        disabled: isDisabledState,
         disabledTitle: tooltip,
         title: tooltip,
         onChange: this.handleChange,
+        getRef: this.updateData,
         size: size,
-        checked: selectedValue == value,
+        checked: isChecked,
         dataId: dataId,
         isReadOnly: isReadOnly,
         variant: variant,
-        ...RadioProps
+        ...RadioProps,
+        a11y: {
+          tabIndex: !!selectedValue ? isChecked ? '0' : '-1' : index === 0 ? '0' : '-1',
+          ...RadioProps.a11y
+        },
+        customClass: {
+          customRadioWrap: isBoxStyle ? `${style.radioBox} ${!isDisabledState ? style.hoverableRadioBox : ''} ${isChecked ? style.radioBoxActive : ''}` : '',
+          ...RadioProps.customClass
+        }
       }, !!infoTooltip ? /*#__PURE__*/React.createElement(Icon, {
         name: "ZD-GN-info",
         size: "16",

package/es/form/fields/RadioField/props/defaultProps.js

@@ -1,5 +1,6 @@
 export const defaultProps = {
   errorType: 'primary',
+  isBoxStyle: false,
   isMandatory: false,
   isDisabled: false,
   isReadOnly: false,

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

@@ -2,8 +2,10 @@ import PropTypes from 'prop-types';
 export const propTypes = {
   dataId: PropTypes.string,
   errorType: PropTypes.oneOf(['primary', 'secondary']),
+  getRef: PropTypes.func,
   id: PropTypes.string,
   isActive: PropTypes.bool,
+  isBoxStyle: PropTypes.bool,
   isDisabled: PropTypes.bool,
   isMandatory: PropTypes.bool,
   isReadOnly: PropTypes.bool,
@@ -23,6 +25,7 @@ export const propTypes = {
   customProps: PropTypes.shape({
     LabelProps: PropTypes.object,
     RadioProps: PropTypes.object,
+    InfoIconProps: PropTypes.object,
     ValidationMessageProps1: PropTypes.object,
     ValidationMessageProps2: PropTypes.object
   }),

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

@@ -164,8 +164,7 @@ export default class TagsMultiSelect extends React.Component {
     const {
       TextBoxIconProps = {},
       TagWrapperProps = {},
-      TagProps = {},
-      listProps = {}
+      TagProps = {}
     } = customProps;
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.container} ${!isReadOnly ? ` ${needBorder ? style.hasBorder : ''}
@@ -299,8 +298,7 @@ export default class TagsMultiSelect extends React.Component {
           getRef: this.getSelectedItemRef,
           isDisabled: listDisabled,
           customProps: listItemProps,
-          customClass: listItemClass,
-          ...listProps
+          customClass: listItemClass
         }, isNew ? /*#__PURE__*/React.createElement(Container, {
           alignBox: "row",
           align: "vertical"

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

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

package/es/list/DepartmentDropDown/DepartmentDropDown.js

@@ -48,12 +48,8 @@ class DepartmentDropDown extends Component {
       onSearch,
       needSearchFetching,
       searchStr,
-      i18nKeys,
-      customProps
+      i18nKeys
     } = this.props;
-    const {
-      toggleDropDownProps = {}
-    } = customProps;
     let {
       title = 'Move Department',
       searchEmptyText = 'No results found',
@@ -88,8 +84,7 @@ class DepartmentDropDown extends Component {
       getNextOptions: getNextOptions,
       isNextOptions: isNextOptions,
       onSearch: onSearch,
-      needSearchFetching: needSearchFetching,
-      ...toggleDropDownProps
+      needSearchFetching: needSearchFetching
     });
   }
 

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/StatusListItem/StatusListItem.module.css

@@ -6,58 +6,43 @@
   min-height: var(--zd_size35) ;
   cursor: pointer;
 }
-
 [dir=ltr] .withBorder {
   border-left: 1px solid var(--zdt_statuslistitem_default_border);
 }
-
 [dir=rtl] .withBorder {
   border-right: 1px solid var(--zdt_statuslistitem_default_border);
 }
-
 [dir=ltr] .small {
   padding: var(--zd_size7) var(--zd_size3) var(--zd_size7) var(--zd_size5) ;
 }
-
 [dir=rtl] .small {
   padding: var(--zd_size7) var(--zd_size5) var(--zd_size7) var(--zd_size3) ;
 }
-
 .medium {
   padding: var(--zd_size7) var(--zd_size20) ;
 }
-
 .large {
   height: var(--zd_size48) ;
 }
-
 [dir=ltr] .large {
   padding: var(--zd_size10) var(--zd_size3) var(--zd_size10) var(--zd_size25) ;
 }
-
 [dir=rtl] .large {
   padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size3) ;
 }
-
-.value,
-.multiLineValue {
+.value,.multiLineValue {
   line-height: 1.5385;
 }
-
 .value {
   composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
 }
-
-.multiLineValue {
+.multiLineValue{
   word-break: break-word;
-  -webkit-line-clamp: 3;
   composes: clamp from '~@zohodesk/components/lib/common/common.module.css';
 }
-
 [dir=ltr] .withBorder.active {
   border-left-color: var(--zdt_statuslistitem_default_active_border);
 }
-
 [dir=rtl] .withBorder.active {
   border-right-color: var(--zdt_statuslistitem_default_active_border);
 }
@@ -65,56 +50,44 @@
 .default.hover, .default.effect:hover {
   background-color: var(--zdt_statuslistitem_default_effect_bg);
 }
-
 .primary.hover, .primary.effect:hover, .selected {
   background-color: var(--zdt_statuslistitem_primary_efffect_bg);
 }
-
 .secondary.hover, .secondary.effect:hover {
   background-color: var(--zdt_statuslistitem_secondary_effect_bg);
 }
-
 .list.active.default, .list.active.primary {
   background-color: var(--zdt_statuslistitem_primary_efffect_bg);
 }
-
 .list.active.secondary {
   background-color: var(--zdt_statuslistitem_secondary_effect_bg);
 }
-
 .secondary.hover,
 .secondary.effect:hover,
 .list.active.secondary {
   color: var(--zdt_statuslistitem_secondary_effect_text);
 }
-
 .tickIcon {
   color: var(--zdt_statuslistitem_tickicon);
   position: absolute;
-  top: 50% ;
+  top:50% ;
   transform: translateY(-50%);
 }
-
 [dir=ltr] .tickIcon {
   right: var(--zd_size20) ;
 }
-
 [dir=rtl] .tickIcon {
   left: var(--zd_size20) ;
 }
-
-.tickIcon>i {
+.tickIcon > i {
   display: block;
 }
-
 [dir=ltr] .active.withTick {
   padding-right: var(--zd_size39) ;
 }
-
 [dir=rtl] .active.withTick {
   padding-left: var(--zd_size39) ;
 }
-
 /* Status Type */
 .statusType {
   width: var(--zd_size8) ;
@@ -127,15 +100,12 @@
 [dir=rtl] .statusType {
   margin-left: var(--zd_size13) ;
 }
-
 .black {
   background-color: var(--zdt_statuslistitem_black_bg);
 }
-
 .orange {
   background-color: var(--zdt_statuslistitem_orange_bg);
 }
-
 .green {
   background-color: var(--zdt_statuslistitem_green_bg);
-}
+}

package/es/v1/form/fields/RadioField/RadioField.js

@@ -81,6 +81,7 @@ const RadioField = props => {
       tooltip,
       infoTooltip
     } = option;
+    let isDisabledState = disabled || isDisabled;
     let isChecked = selectedValue == value;
     return /*#__PURE__*/React.createElement("span", {
       key: index,
@@ -93,7 +94,7 @@ const RadioField = props => {
       labelPalette: labelPalette,
       labelSize: labelSize,
       active: isActive || isBoxStyle && isChecked,
-      disabled: disabled || isDisabled,
+      disabled: isDisabledState,
       disabledTitle: tooltip,
       title: tooltip,
       onChange: handleChange,
@@ -109,7 +110,7 @@ const RadioField = props => {
         ...RadioProps.a11y
       },
       customClass: {
-        customRadioWrap: `${isBoxStyle ? style.radioBox : ''} ${isBoxStyle && isChecked ? style.radioBoxActive : ''}`,
+        customRadioWrap: isBoxStyle ? `${style.radioBox} ${!isDisabledState ? style.hoverableRadioBox : ''} ${isChecked ? style.radioBoxActive : ''}` : '',
         ...RadioProps.customClass
       }
     }, !!infoTooltip ? /*#__PURE__*/React.createElement(Icon, {

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

@@ -164,8 +164,7 @@ export default class TagsMultiSelect extends React.Component {
     const {
       TextBoxIconProps = {},
       TagWrapperProps = {},
-      TagProps = {},
-      listProps = {}
+      TagProps = {}
     } = customProps;
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.container} ${!isReadOnly ? ` ${needBorder ? style.hasBorder : ''}
@@ -299,8 +298,7 @@ export default class TagsMultiSelect extends React.Component {
           getRef: this.getSelectedItemRef,
           isDisabled: listDisabled,
           customProps: listItemProps,
-          customClass: listItemClass,
-          ...listProps
+          customClass: listItemClass
         }, isNew ? /*#__PURE__*/React.createElement(Container, {
           alignBox: "row",
           align: "vertical"

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

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

package/es/v1/list/DepartmentDropDown/DepartmentDropDown.js

@@ -21,12 +21,8 @@ function DepartmentDropDown(props) {
     searchStr,
     i18nKeys,
     onMoveDepartment,
-    getDepartment,
-    customProps
+    getDepartment
   } = props;
-  const {
-    toggleDropDownProps = {}
-  } = customProps;
   let {
     title = 'Move Department',
     searchEmptyText = 'No results found',
@@ -75,8 +71,7 @@ function DepartmentDropDown(props) {
     getNextOptions: getNextOptions,
     isNextOptions: isNextOptions,
     onSearch: onSearch,
-    needSearchFetching: needSearchFetching,
-    ...toggleDropDownProps
+    needSearchFetching: needSearchFetching
   });
 }
 

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

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

package/es/v1/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/lib/form/fields/Fields.module.css

@@ -74,7 +74,7 @@
   border: 1px solid var(--zdt_radiofield_box_border);
   border-radius: 6px
 }
-.radioBox:hover, .radioBoxActive {
+.hoverableRadioBox:hover, .radioBoxActive {
   border-color: var(--zdt_radiofield_box_active_border)
 }
 .radioBoxActive {