@zohodesk/dot 1.7.1 → 1.7.3

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

@@ -1,6 +1,22 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import RadioField from "../RadioField";
+const 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', () => {
   test('rendering the defult props', () => {
     const {
@@ -10,4 +26,21 @@ describe('RadioField', () => {
     }));
     expect(asFragment()).toMatchSnapshot();
   });
+  test('rendering with options', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(RadioField, {
+      options: options
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering options with isBoxStyle', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(RadioField, {
+      options: options,
+      isBoxStyle: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

package/es/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/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

@@ -150,7 +150,8 @@ export default class TagsMultiSelect extends React.Component {
       positionsOffset,
       targetOffset,
       customClass,
-      customProps
+      customProps,
+      isFocus
     } = this.props;
     let {
       showAll
@@ -166,9 +167,10 @@ export default class TagsMultiSelect extends React.Component {
       TagWrapperProps = {},
       TagProps = {}
     } = customProps;
+    const isEditable = !isReadOnly;
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.container} ${!isReadOnly ? ` ${needBorder ? style.hasBorder : ''}
-              ${needBorder ? style[`borderColor_${borderColor}`] : style.borderColor_transparent} ${isPopupReady && needBorder ? style.active : ''}` : ''} ${className}`,
+              ${needBorder ? style[`borderColor_${borderColor}`] : style.borderColor_transparent} ${isPopupReady && needBorder || isEditable && isFocus ? style.active : ''}` : ''} ${className}`,
       onClick: stopBubbling,
       "data-id": `${dataId}_tagsContainer`,
       "data-test-id": `${dataId}_tagsContainer`,

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

@@ -53,5 +53,6 @@ export const propTypes = {
     TextBoxIconProps: PropTypes.object,
     TagWrapperProps: PropTypes.object,
     TagProps: PropTypes.object
-  })
+  }),
+  isFocus: PropTypes.bool
 };

package/es/form/fields/TextEditorField/TextEditorField.js

@@ -98,7 +98,6 @@ export default class TextEditorField extends PureComponent {
       needInlineAttachment,
       i18nKeys,
       className,
-      children,
       ePhiData,
       customProps
     } = this.props;

package/es/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/es/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/es/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)"