@zohodesk/dot 1.7.2 → 1.7.3

package/es/version2/notification/DesktopNotification/DesktopNotification.module.css

@@ -119,7 +119,7 @@
 
 .infoText {
   font-size: var(--zd_font_size14) ;
-  line-height: 1.2857;
+  line-height: 1.43;
   composes: wbreak from '~@zohodesk/components/lib/common/common.module.css';
 }
 

package/es/version2/notification/DesktopNotificationHeader/DesktopNotificationHeader.js

@@ -5,7 +5,7 @@ import { Container, Box } from '@zohodesk/components/lib/Layout';
 import AlertClose from "../../AlertClose/AlertClose";
 import AlertIcons from "../../alertIcons/AlertIcons";
 import { ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/CustomResponsive';
-import Typography from '@zohodesk/components/es/v1/Typography/Typography';
+import Typography from '@zohodesk/components/es/Typography/Typography';
 import style from "./DesktopNotificationHeader.module.css";
 export default class DesktopNotificationHeader extends Component {
   constructor(props) {

package/lib/FlipCard/__tests__/__snapshots__/FlipCard.spec.js.snap

@@ -17,7 +17,7 @@ exports[`FlipCard rendering the defult props 1`] = `
         <div
           aria-checked="false"
           class="container pointer primary 
-          inflex rowdir vCenter"
+           inflex rowdir vCenter"
           data-id="listViewCheckBox_undefined"
           data-selector-id="container"
           data-test-id="listViewCheckBox_undefined"
@@ -25,7 +25,7 @@ exports[`FlipCard rendering the defult props 1`] = `
           tabindex="0"
         >
           <div
-            class="boxContainer medium  filled shrinkOff"
+            class="boxContainer medium  filled  shrinkOff"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"

package/lib/form/fields/CheckBoxField/__tests__/__snapshots__/CheckBoxField.spec.js.snap

@@ -24,7 +24,7 @@ exports[`CheckBoxField rendering the custom children 1`] = `
           <div
             aria-checked="false"
             class="container pointer primary 
-          inflex rowdir vCenter"
+           inflex rowdir vCenter"
             data-id="checkBox"
             data-selector-id="container"
             data-test-id="checkBox"
@@ -32,7 +32,7 @@ exports[`CheckBoxField rendering the custom children 1`] = `
             tabindex="0"
           >
             <div
-              class="boxContainer medium  filled shrinkOff"
+              class="boxContainer medium  filled  shrinkOff"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
@@ -115,7 +115,7 @@ exports[`CheckBoxField rendering the custom label children via renderLabelProps
           <div
             aria-checked="false"
             class="container pointer primary 
-          inflex rowdir vCenter"
+           inflex rowdir vCenter"
             data-id="checkBox"
             data-selector-id="container"
             data-test-id="checkBox"
@@ -123,7 +123,7 @@ exports[`CheckBoxField rendering the custom label children via renderLabelProps
             tabindex="0"
           >
             <div
-              class="boxContainer medium  filled shrinkOff"
+              class="boxContainer medium  filled  shrinkOff"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
@@ -206,7 +206,7 @@ exports[`CheckBoxField rendering the defult props 1`] = `
           <div
             aria-checked="false"
             class="container pointer primary 
-          inflex rowdir vCenter"
+           inflex rowdir vCenter"
             data-id="checkBox"
             data-selector-id="container"
             data-test-id="checkBox"
@@ -214,7 +214,7 @@ exports[`CheckBoxField rendering the defult props 1`] = `
             tabindex="0"
           >
             <div
-              class="boxContainer medium  filled shrinkOff"
+              class="boxContainer medium  filled  shrinkOff"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"

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 {

package/lib/form/fields/PhoneField/PhoneField.js

@@ -130,7 +130,6 @@ var PhoneField = /*#__PURE__*/function (_PureComponent) {
           errorType = _this$props2.errorType,
           isDisabled = _this$props2.isDisabled,
           title = _this$props2.title,
-          onBlur = _this$props2.onBlur,
           dataId = _this$props2.dataId,
           dataSelectorId = _this$props2.dataSelectorId,
           onKeyDown = _this$props2.onKeyDown,

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

@@ -29,6 +29,12 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+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) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -62,45 +68,98 @@ var RadioField = /*#__PURE__*/function (_PureComponent) {
     _classCallCheck(this, RadioField);
 
     _this = _super.call(this, props);
+    _this.data = {
+      radios: {},
+      focus: _this.handleFocus
+    };
     _this.handleChange = _this.handleChange.bind(_assertThisInitialized(_this));
+    _this.updateData = _this.updateData.bind(_assertThisInitialized(_this));
+    _this.handleFocus = _this.handleFocus.bind(_assertThisInitialized(_this));
     return _this;
   }
 
   _createClass(RadioField, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this$props = this.props,
+          getRef = _this$props.getRef,
+          id = _this$props.id;
+      getRef && getRef(this.data, id);
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      var _this$props2 = this.props,
+          getRef = _this$props2.getRef,
+          id = _this$props2.id;
+
+      if (getRef !== prevProps.getRef) {
+        getRef && getRef(this.data, id);
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      var _this$props3 = this.props,
+          getRef = _this$props3.getRef,
+          id = _this$props3.id;
+      getRef && getRef(null, id);
+    }
+  }, {
     key: "handleChange",
     value: function handleChange(value) {
-      var _this$props = this.props,
-          id = _this$props.id,
-          onChange = _this$props.onChange;
+      var _this$props4 = this.props,
+          id = _this$props4.id,
+          onChange = _this$props4.onChange;
       onChange && onChange(id, value);
     }
+  }, {
+    key: "updateData",
+    value: function updateData(ele, val) {
+      this.data.radios[val] = ele;
+    }
+  }, {
+    key: "handleFocus",
+    value: function handleFocus() {
+      var _this$props5 = this.props,
+          selectedValue = _this$props5.selectedValue,
+          options = _this$props5.options;
+      var firstRadioValue = options[0].value;
+
+      if (selectedValue) {
+        this.data.radios[selectedValue].focus();
+      } else {
+        this.data.radios[firstRadioValue].focus();
+      }
+    }
   }, {
     key: "render",
     value: function render() {
       var _this2 = this;
 
-      var _this$props2 = this.props,
-          labelName = _this$props2.labelName,
-          id = _this$props2.id,
-          isMandatory = _this$props2.isMandatory,
-          options = _this$props2.options,
-          validationMessage = _this$props2.validationMessage,
-          validationPalette = _this$props2.validationPalette,
-          errorType = _this$props2.errorType,
-          isDisabled = _this$props2.isDisabled,
-          title = _this$props2.title,
-          labelPalette = _this$props2.labelPalette,
-          labelSize = _this$props2.labelSize,
-          size = _this$props2.size,
-          selectedValue = _this$props2.selectedValue,
-          isActive = _this$props2.isActive,
-          dataId = _this$props2.dataId,
-          dataSelectorId = _this$props2.dataSelectorId,
-          validationRuleMessage = _this$props2.validationRuleMessage,
-          validationRulePalette = _this$props2.validationRulePalette,
-          isReadOnly = _this$props2.isReadOnly,
-          variant = _this$props2.variant,
-          customProps = _this$props2.customProps;
+      var _this$props6 = this.props,
+          labelName = _this$props6.labelName,
+          id = _this$props6.id,
+          isMandatory = _this$props6.isMandatory,
+          options = _this$props6.options,
+          validationMessage = _this$props6.validationMessage,
+          validationPalette = _this$props6.validationPalette,
+          errorType = _this$props6.errorType,
+          isDisabled = _this$props6.isDisabled,
+          title = _this$props6.title,
+          labelPalette = _this$props6.labelPalette,
+          labelSize = _this$props6.labelSize,
+          size = _this$props6.size,
+          selectedValue = _this$props6.selectedValue,
+          isActive = _this$props6.isActive,
+          dataId = _this$props6.dataId,
+          dataSelectorId = _this$props6.dataSelectorId,
+          validationRuleMessage = _this$props6.validationRuleMessage,
+          validationRulePalette = _this$props6.validationRulePalette,
+          isReadOnly = _this$props6.isReadOnly,
+          isBoxStyle = _this$props6.isBoxStyle,
+          variant = _this$props6.variant,
+          customProps = _this$props6.customProps;
       var _customProps$LabelPro = customProps.LabelProps,
           LabelProps = _customProps$LabelPro === void 0 ? {} : _customProps$LabelPro,
           _customProps$RadioPro = customProps.RadioProps,
@@ -123,7 +182,7 @@ var RadioField = /*#__PURE__*/function (_PureComponent) {
         customClass: "".concat(_FieldsModule["default"].fieldLabel, " ").concat(isMandatory ? _FieldsModule["default"].labelMandatory : ''),
         dataId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label")
       }, LabelProps)), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_FieldsModule["default"].fieldContainer, " ").concat(labelName ? _FieldsModule["default"].fieldMargin_medium : '', " ").concat(_FieldsModule["default"].radioContainer)
+        className: "".concat(_FieldsModule["default"].fieldContainer, " ").concat(isBoxStyle ? _FieldsModule["default"].radiosWrapper : '', " ").concat(labelName ? _FieldsModule["default"].fieldMargin_medium : '', " ").concat(_FieldsModule["default"].radioContainer)
       }, options.map(function (option, index) {
         var text = option.text,
             value = option.value,
@@ -131,9 +190,11 @@ var RadioField = /*#__PURE__*/function (_PureComponent) {
             disabled = _option$disabled === void 0 ? false : _option$disabled,
             tooltip = option.tooltip,
             infoTooltip = option.infoTooltip;
+        var isDisabledState = disabled || isDisabled;
+        var isChecked = selectedValue == value;
         return /*#__PURE__*/_react["default"].createElement("span", {
           key: index,
-          className: "".concat(_FieldsModule["default"].radio)
+          className: "".concat(!isBoxStyle ? _FieldsModule["default"].radio : '', " ").concat(_FieldsModule["default"].radioWrap)
         }, /*#__PURE__*/_react["default"].createElement(_Radio["default"], _extends({
           id: index,
           value: value,
@@ -141,17 +202,25 @@ var RadioField = /*#__PURE__*/function (_PureComponent) {
           text: text,
           labelPalette: labelPalette,
           labelSize: labelSize,
-          active: isActive,
-          disabled: disabled || isDisabled,
+          active: isActive || isBoxStyle && isChecked,
+          disabled: isDisabledState,
           disabledTitle: tooltip,
           title: tooltip,
           onChange: _this2.handleChange,
+          getRef: _this2.updateData,
           size: size,
-          checked: selectedValue == value,
+          checked: isChecked,
           dataId: dataId,
           isReadOnly: isReadOnly,
           variant: variant
-        }, RadioProps), !!infoTooltip ? /*#__PURE__*/_react["default"].createElement(_Icon["default"], _extends({
+        }, 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,

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

@@ -8,6 +8,22 @@ var _RadioField = _interopRequireDefault(require("../RadioField"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+var options = [{
+  text: 'Chennai',
+  value: '1'
+}, {
+  text: 'Mumbai',
+  value: '2',
+  tooltip: 'Disabled Option',
+  disabled: true
+}, {
+  text: 'Delhi',
+  value: '3',
+  infoTooltip: 'Capital of India'
+}, {
+  text: 'Kolkata',
+  value: '4'
+}];
 describe('RadioField', function () {
   test('rendering the defult props', function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioField["default"], {
@@ -17,4 +33,21 @@ describe('RadioField', function () {
 
     expect(asFragment()).toMatchSnapshot();
   });
+  test('rendering with options', function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioField["default"], {
+      options: options
+    })),
+        asFragment = _render2.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering options with isBoxStyle', function () {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioField["default"], {
+      options: options,
+      isBoxStyle: true
+    })),
+        asFragment = _render3.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
 });