@zohodesk/dot 1.7.2 → 1.7.4

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

@@ -1,5 +1,273 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`RadioField rendering options with isBoxStyle 1`] = `
+<DocumentFragment>
+  <div
+    class="container "
+    data-selector-id="radioField"
+  >
+    <div
+      class="fieldContainer radiosWrapper  radioContainer"
+    >
+      <span
+        class=" radioWrap"
+      >
+        <div
+          aria-checked="false"
+          aria-readonly="false"
+          class="container  pointer hoverEfffect  radioBox hoverableRadioBox  flex rowdir both"
+          data-id="1"
+          data-selector-id="container"
+          data-test-id="1"
+          role="radio"
+          tabindex="0"
+        >
+          <div
+            class="radio  
+            hoverprimary medium filled centerPathprimary   shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <input
+              id="0"
+              type="hidden"
+              value="1"
+            />
+            <label
+              class="radioLabel pointer"
+            >
+              <svg
+                viewBox="0 0 40 40"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <circle
+                  class="rdBox"
+                  cx="20"
+                  cy="20"
+                  r="19"
+                />
+              </svg>
+            </label>
+          </div>
+          <div
+            class="text  grow basis shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <label
+              class="label title medium default font_primary
+          dotted cursor  
+              primaryLabel pointer    "
+              data-id="Chennai_label"
+              data-selector-id="label"
+              data-test-id="Chennai_label"
+              data-title="Chennai"
+            >
+              Chennai
+            </label>
+          </div>
+        </div>
+      </span>
+      <span
+        class=" radioWrap"
+      >
+        <div
+          aria-checked="false"
+          aria-readonly="true"
+          class="container  disabled   radioBox   flex rowdir both"
+          data-id="2"
+          data-selector-id="container"
+          data-test-id="2"
+          data-title="Disabled Option"
+          role="radio"
+          tabindex="-1"
+        >
+          <div
+            class="radio  
+             medium filled centerPathprimary  disabled shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <input
+              id="1"
+              type="hidden"
+              value="2"
+            />
+            <label
+              class="radioLabel disabled"
+            >
+              <svg
+                viewBox="0 0 40 40"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <circle
+                  class="rdBox"
+                  cx="20"
+                  cy="20"
+                  r="19"
+                />
+              </svg>
+            </label>
+          </div>
+          <div
+            class="text disabled grow basis shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <label
+              class="label title medium default font_primary
+          dotted cursor  
+              primaryLabel     "
+              data-id="Mumbai_label"
+              data-selector-id="label"
+              data-test-id="Mumbai_label"
+              data-title="Disabled Option"
+            >
+              Mumbai
+            </label>
+          </div>
+        </div>
+      </span>
+      <span
+        class=" radioWrap"
+      >
+        <div
+          aria-checked="false"
+          aria-readonly="false"
+          class="container  pointer hoverEfffect  radioBox hoverableRadioBox  flex rowdir both"
+          data-id="3"
+          data-selector-id="container"
+          data-test-id="3"
+          role="radio"
+          tabindex="-1"
+        >
+          <div
+            class="radio  
+            hoverprimary medium filled centerPathprimary   shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <input
+              id="2"
+              type="hidden"
+              value="3"
+            />
+            <label
+              class="radioLabel pointer"
+            >
+              <svg
+                viewBox="0 0 40 40"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <circle
+                  class="rdBox"
+                  cx="20"
+                  cy="20"
+                  r="19"
+                />
+              </svg>
+            </label>
+          </div>
+          <div
+            class="text  grow basis shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <label
+              class="label title medium default font_primary
+          dotted cursor  
+              primaryLabel pointer    "
+              data-id="Delhi_label"
+              data-selector-id="label"
+              data-test-id="Delhi_label"
+              data-title="Delhi"
+            >
+              Delhi
+            </label>
+          </div>
+          <i
+            aria-hidden="true"
+            class="zd_font_icons basic icon-info  infoIcon  "
+            data-id="fontIcon"
+            data-selector-id="fontIcon"
+            data-test-id="fontIcon"
+            data-title="Capital of India"
+            style="--zd-iconfont-size: var(--zd_font_size16);"
+          />
+        </div>
+      </span>
+      <span
+        class=" radioWrap"
+      >
+        <div
+          aria-checked="false"
+          aria-readonly="false"
+          class="container  pointer hoverEfffect  radioBox hoverableRadioBox  flex rowdir both"
+          data-id="4"
+          data-selector-id="container"
+          data-test-id="4"
+          role="radio"
+          tabindex="-1"
+        >
+          <div
+            class="radio  
+            hoverprimary medium filled centerPathprimary   shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <input
+              id="3"
+              type="hidden"
+              value="4"
+            />
+            <label
+              class="radioLabel pointer"
+            >
+              <svg
+                viewBox="0 0 40 40"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <circle
+                  class="rdBox"
+                  cx="20"
+                  cy="20"
+                  r="19"
+                />
+              </svg>
+            </label>
+          </div>
+          <div
+            class="text  grow basis shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <label
+              class="label title medium default font_primary
+          dotted cursor  
+              primaryLabel pointer    "
+              data-id="Kolkata_label"
+              data-selector-id="label"
+              data-test-id="Kolkata_label"
+              data-title="Kolkata"
+            >
+              Kolkata
+            </label>
+          </div>
+        </div>
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`RadioField rendering the defult props 1`] = `
 <DocumentFragment>
   <div
@@ -7,8 +275,276 @@ exports[`RadioField rendering the defult props 1`] = `
     data-selector-id="radioField"
   >
     <div
-      class="fieldContainer  radioContainer"
+      class="fieldContainer   radioContainer"
     />
   </div>
 </DocumentFragment>
 `;
+
+exports[`RadioField rendering with options 1`] = `
+<DocumentFragment>
+  <div
+    class="container "
+    data-selector-id="radioField"
+  >
+    <div
+      class="fieldContainer   radioContainer"
+    >
+      <span
+        class="radio radioWrap"
+      >
+        <div
+          aria-checked="false"
+          aria-readonly="false"
+          class="container  pointer hoverEfffect   flex rowdir both"
+          data-id="1"
+          data-selector-id="container"
+          data-test-id="1"
+          role="radio"
+          tabindex="0"
+        >
+          <div
+            class="radio  
+            hoverprimary medium filled centerPathprimary   shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <input
+              id="0"
+              type="hidden"
+              value="1"
+            />
+            <label
+              class="radioLabel pointer"
+            >
+              <svg
+                viewBox="0 0 40 40"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <circle
+                  class="rdBox"
+                  cx="20"
+                  cy="20"
+                  r="19"
+                />
+              </svg>
+            </label>
+          </div>
+          <div
+            class="text  grow basis shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <label
+              class="label title medium default font_primary
+          dotted cursor  
+              primaryLabel pointer    "
+              data-id="Chennai_label"
+              data-selector-id="label"
+              data-test-id="Chennai_label"
+              data-title="Chennai"
+            >
+              Chennai
+            </label>
+          </div>
+        </div>
+      </span>
+      <span
+        class="radio radioWrap"
+      >
+        <div
+          aria-checked="false"
+          aria-readonly="true"
+          class="container  disabled    flex rowdir both"
+          data-id="2"
+          data-selector-id="container"
+          data-test-id="2"
+          data-title="Disabled Option"
+          role="radio"
+          tabindex="-1"
+        >
+          <div
+            class="radio  
+             medium filled centerPathprimary  disabled shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <input
+              id="1"
+              type="hidden"
+              value="2"
+            />
+            <label
+              class="radioLabel disabled"
+            >
+              <svg
+                viewBox="0 0 40 40"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <circle
+                  class="rdBox"
+                  cx="20"
+                  cy="20"
+                  r="19"
+                />
+              </svg>
+            </label>
+          </div>
+          <div
+            class="text disabled grow basis shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <label
+              class="label title medium default font_primary
+          dotted cursor  
+              primaryLabel     "
+              data-id="Mumbai_label"
+              data-selector-id="label"
+              data-test-id="Mumbai_label"
+              data-title="Disabled Option"
+            >
+              Mumbai
+            </label>
+          </div>
+        </div>
+      </span>
+      <span
+        class="radio radioWrap"
+      >
+        <div
+          aria-checked="false"
+          aria-readonly="false"
+          class="container  pointer hoverEfffect   flex rowdir both"
+          data-id="3"
+          data-selector-id="container"
+          data-test-id="3"
+          role="radio"
+          tabindex="-1"
+        >
+          <div
+            class="radio  
+            hoverprimary medium filled centerPathprimary   shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <input
+              id="2"
+              type="hidden"
+              value="3"
+            />
+            <label
+              class="radioLabel pointer"
+            >
+              <svg
+                viewBox="0 0 40 40"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <circle
+                  class="rdBox"
+                  cx="20"
+                  cy="20"
+                  r="19"
+                />
+              </svg>
+            </label>
+          </div>
+          <div
+            class="text  grow basis shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <label
+              class="label title medium default font_primary
+          dotted cursor  
+              primaryLabel pointer    "
+              data-id="Delhi_label"
+              data-selector-id="label"
+              data-test-id="Delhi_label"
+              data-title="Delhi"
+            >
+              Delhi
+            </label>
+          </div>
+          <i
+            aria-hidden="true"
+            class="zd_font_icons basic icon-info  infoIcon  "
+            data-id="fontIcon"
+            data-selector-id="fontIcon"
+            data-test-id="fontIcon"
+            data-title="Capital of India"
+            style="--zd-iconfont-size: var(--zd_font_size16);"
+          />
+        </div>
+      </span>
+      <span
+        class="radio radioWrap"
+      >
+        <div
+          aria-checked="false"
+          aria-readonly="false"
+          class="container  pointer hoverEfffect   flex rowdir both"
+          data-id="4"
+          data-selector-id="container"
+          data-test-id="4"
+          role="radio"
+          tabindex="-1"
+        >
+          <div
+            class="radio  
+            hoverprimary medium filled centerPathprimary   shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <input
+              id="3"
+              type="hidden"
+              value="4"
+            />
+            <label
+              class="radioLabel pointer"
+            >
+              <svg
+                viewBox="0 0 40 40"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <circle
+                  class="rdBox"
+                  cx="20"
+                  cy="20"
+                  r="19"
+                />
+              </svg>
+            </label>
+          </div>
+          <div
+            class="text  grow basis shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <label
+              class="label title medium default font_primary
+          dotted cursor  
+              primaryLabel pointer    "
+              data-id="Kolkata_label"
+              data-selector-id="label"
+              data-test-id="Kolkata_label"
+              data-title="Kolkata"
+            >
+              Kolkata
+            </label>
+          </div>
+        </div>
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.defaultProps = void 0;
 var defaultProps = {
   errorType: 'primary',
+  isBoxStyle: false,
   isMandatory: false,
   isDisabled: false,
   isReadOnly: false,

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

@@ -12,8 +12,10 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 var propTypes = {
   dataId: _propTypes["default"].string,
   errorType: _propTypes["default"].oneOf(['primary', 'secondary']),
+  getRef: _propTypes["default"].func,
   id: _propTypes["default"].string,
   isActive: _propTypes["default"].bool,
+  isBoxStyle: _propTypes["default"].bool,
   isDisabled: _propTypes["default"].bool,
   isMandatory: _propTypes["default"].bool,
   isReadOnly: _propTypes["default"].bool,
@@ -33,6 +35,7 @@ var propTypes = {
   customProps: _propTypes["default"].shape({
     LabelProps: _propTypes["default"].object,
     RadioProps: _propTypes["default"].object,
+    InfoIconProps: _propTypes["default"].object,
     ValidationMessageProps1: _propTypes["default"].object,
     ValidationMessageProps2: _propTypes["default"].object
   }),

package/lib/form/fields/TagsMultiSelect/TagsMultiSelect.js

@@ -213,7 +213,8 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
           positionsOffset = _this$props3.positionsOffset,
           targetOffset = _this$props3.targetOffset,
           customClass = _this$props3.customClass,
-          customProps = _this$props3.customProps;
+          customProps = _this$props3.customProps,
+          isFocus = _this$props3.isFocus;
       var showAll = this.state.showAll;
       var chipLimit = !isPopupReady ? showAll ? tagsList.length : chipNeedToShow : tagsList.length;
       var _customClass$tagCusto = customClass.tagCustomClass,
@@ -228,8 +229,9 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
           TagWrapperProps = _customProps$TagWrapp === void 0 ? {} : _customProps$TagWrapp,
           _customProps$TagProps = customProps.TagProps,
           TagProps = _customProps$TagProps === void 0 ? {} : _customProps$TagProps;
+      var isEditable = !isReadOnly;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_TagsMultiSelectModule["default"].container, " ").concat(!isReadOnly ? " ".concat(needBorder ? _TagsMultiSelectModule["default"].hasBorder : '', "\n              ").concat(needBorder ? _TagsMultiSelectModule["default"]["borderColor_".concat(borderColor)] : _TagsMultiSelectModule["default"].borderColor_transparent, " ").concat(isPopupReady && needBorder ? _TagsMultiSelectModule["default"].active : '') : '', " ").concat(className),
+        className: "".concat(_TagsMultiSelectModule["default"].container, " ").concat(!isReadOnly ? " ".concat(needBorder ? _TagsMultiSelectModule["default"].hasBorder : '', "\n              ").concat(needBorder ? _TagsMultiSelectModule["default"]["borderColor_".concat(borderColor)] : _TagsMultiSelectModule["default"].borderColor_transparent, " ").concat(isPopupReady && needBorder || isEditable && isFocus ? _TagsMultiSelectModule["default"].active : '') : '', " ").concat(className),
         onClick: _General.stopBubbling,
         "data-id": "".concat(dataId, "_tagsContainer"),
         "data-test-id": "".concat(dataId, "_tagsContainer"),

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

@@ -63,6 +63,7 @@ var propTypes = {
     TextBoxIconProps: _propTypes["default"].object,
     TagWrapperProps: _propTypes["default"].object,
     TagProps: _propTypes["default"].object
-  })
+  }),
+  isFocus: _propTypes["default"].bool
 };
 exports.propTypes = propTypes;

package/lib/form/fields/TextEditorField/TextEditorField.js

@@ -148,7 +148,6 @@ var TextEditorField = /*#__PURE__*/function (_PureComponent) {
           needInlineAttachment = _this$props4.needInlineAttachment,
           i18nKeys = _this$props4.i18nKeys,
           className = _this$props4.className,
-          children = _this$props4.children,
           ePhiData = _this$props4.ePhiData,
           customProps = _this$props4.customProps;
       var _customProps$LabelPro = customProps.LabelProps,

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

@@ -14,7 +14,7 @@ exports[`TextEditorField rendering the defult props 1`] = `
         data-selector-id="textEditorWrapper"
       >
         <textarea
-          class="textBox  container xsmall primary needBorder noresize     effect borderColor_default"
+          class="textBox  container xsmall primary needBorder noresize     effect  borderColor_default"
           data-id="TextareaComp"
           data-selector-id="textarea"
           data-test-id="TextareaComp"

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

@@ -7,7 +7,7 @@ exports[`TextEditorWrapper rendering the defult props 1`] = `
     data-selector-id="textEditorWrapper"
   >
     <textarea
-      class="textBox  container small primary needBorder noresize  smallanimated   effect borderColor_default"
+      class="textBox  container small primary needBorder noresize  smallanimated   effect  borderColor_default"
       data-id="TextareaComp"
       data-selector-id="textarea"
       data-test-id="TextareaComp"

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

@@ -10,7 +10,7 @@ exports[`TextareaField rendering the defult props 1`] = `
       class="fieldContainer "
     >
       <textarea
-        class="  container xsmall primary needBorder resizeY  xsmallanimated   effect borderColor_default"
+        class="  container xsmall primary needBorder resizeY  xsmallanimated   effect  borderColor_default"
         data-id="property(undefined)"
         data-selector-id="textarea"
         data-test-id="property(undefined)"