@zohodesk/dot 1.0.0-temp-202.2 → 1.0.0-temp-203.1

package/README.md

@@ -2,12 +2,21 @@
 
 In this Library, we Provide Some Basic Components to Build Your Application
 
-# 1.7.3 (Yet To Publish)
+# 1.7.3
 
 - **RadioField**
   - `getRef`, `isBoxStyle` props supported
   - Fixed the Radio box hover style applying when disabled
 
+- **version2/notification/DesktopNotificationHeader/DesktopNotificationHeader**
+  - Typography import address changed to v0.
+
+- **version2/DesktopNotification**
+  - description `lineheight` changes.
+
+- **TagsMultiSelect**
+  - isFocus prop added
+
 # 1.7.2
 
 - **Lookup - Search** - renderChildren, isActive, hasSeparator & customStyle props supported & Some customization also opened for this compoenent.

package/es/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/es/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/es/form/fields/PhoneField/PhoneField.js

@@ -80,7 +80,6 @@ export default class PhoneField extends PureComponent {
       errorType,
       isDisabled,
       title,
-      onBlur,
       dataId,
       dataSelectorId,
       onKeyDown,

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

@@ -24,7 +24,7 @@ exports[`RadioField rendering options with isBoxStyle 1`] = `
         >
           <div
             class="radio  
-            hoverprimary medium filled centerPathprimary  shrinkOff"
+            hoverprimary medium filled centerPathprimary   shrinkOff"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
@@ -51,7 +51,7 @@ exports[`RadioField rendering options with isBoxStyle 1`] = `
             </label>
           </div>
           <div
-            class="text grow basis shrinkOff"
+            class="text  grow basis shrinkOff"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
@@ -59,7 +59,7 @@ exports[`RadioField rendering options with isBoxStyle 1`] = `
             <label
               class="label title medium default font_primary
           dotted cursor  
-              primaryLabel pointer  "
+              primaryLabel pointer    "
               data-id="Chennai_label"
               data-selector-id="label"
               data-test-id="Chennai_label"
@@ -86,7 +86,7 @@ exports[`RadioField rendering options with isBoxStyle 1`] = `
         >
           <div
             class="radio  
-             medium filled centerPathprimary  shrinkOff"
+             medium filled centerPathprimary  disabled shrinkOff"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
@@ -113,7 +113,7 @@ exports[`RadioField rendering options with isBoxStyle 1`] = `
             </label>
           </div>
           <div
-            class="text grow basis shrinkOff"
+            class="text disabled grow basis shrinkOff"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
@@ -121,7 +121,7 @@ exports[`RadioField rendering options with isBoxStyle 1`] = `
             <label
               class="label title medium default font_primary
           dotted cursor  
-              primaryLabel disabled  "
+              primaryLabel     "
               data-id="Mumbai_label"
               data-selector-id="label"
               data-test-id="Mumbai_label"
@@ -147,7 +147,7 @@ exports[`RadioField rendering options with isBoxStyle 1`] = `
         >
           <div
             class="radio  
-            hoverprimary medium filled centerPathprimary  shrinkOff"
+            hoverprimary medium filled centerPathprimary   shrinkOff"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
@@ -174,7 +174,7 @@ exports[`RadioField rendering options with isBoxStyle 1`] = `
             </label>
           </div>
           <div
-            class="text grow basis shrinkOff"
+            class="text  grow basis shrinkOff"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
@@ -182,7 +182,7 @@ exports[`RadioField rendering options with isBoxStyle 1`] = `
             <label
               class="label title medium default font_primary
           dotted cursor  
-              primaryLabel pointer  "
+              primaryLabel pointer    "
               data-id="Delhi_label"
               data-selector-id="label"
               data-test-id="Delhi_label"
@@ -217,7 +217,7 @@ exports[`RadioField rendering options with isBoxStyle 1`] = `
         >
           <div
             class="radio  
-            hoverprimary medium filled centerPathprimary  shrinkOff"
+            hoverprimary medium filled centerPathprimary   shrinkOff"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
@@ -244,7 +244,7 @@ exports[`RadioField rendering options with isBoxStyle 1`] = `
             </label>
           </div>
           <div
-            class="text grow basis shrinkOff"
+            class="text  grow basis shrinkOff"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
@@ -252,7 +252,7 @@ exports[`RadioField rendering options with isBoxStyle 1`] = `
             <label
               class="label title medium default font_primary
           dotted cursor  
-              primaryLabel pointer  "
+              primaryLabel pointer    "
               data-id="Kolkata_label"
               data-selector-id="label"
               data-test-id="Kolkata_label"
@@ -305,7 +305,7 @@ exports[`RadioField rendering with options 1`] = `
         >
           <div
             class="radio  
-            hoverprimary medium filled centerPathprimary  shrinkOff"
+            hoverprimary medium filled centerPathprimary   shrinkOff"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
@@ -332,7 +332,7 @@ exports[`RadioField rendering with options 1`] = `
             </label>
           </div>
           <div
-            class="text grow basis shrinkOff"
+            class="text  grow basis shrinkOff"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
@@ -340,7 +340,7 @@ exports[`RadioField rendering with options 1`] = `
             <label
               class="label title medium default font_primary
           dotted cursor  
-              primaryLabel pointer  "
+              primaryLabel pointer    "
               data-id="Chennai_label"
               data-selector-id="label"
               data-test-id="Chennai_label"
@@ -367,7 +367,7 @@ exports[`RadioField rendering with options 1`] = `
         >
           <div
             class="radio  
-             medium filled centerPathprimary  shrinkOff"
+             medium filled centerPathprimary  disabled shrinkOff"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
@@ -394,7 +394,7 @@ exports[`RadioField rendering with options 1`] = `
             </label>
           </div>
           <div
-            class="text grow basis shrinkOff"
+            class="text disabled grow basis shrinkOff"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
@@ -402,7 +402,7 @@ exports[`RadioField rendering with options 1`] = `
             <label
               class="label title medium default font_primary
           dotted cursor  
-              primaryLabel disabled  "
+              primaryLabel     "
               data-id="Mumbai_label"
               data-selector-id="label"
               data-test-id="Mumbai_label"
@@ -428,7 +428,7 @@ exports[`RadioField rendering with options 1`] = `
         >
           <div
             class="radio  
-            hoverprimary medium filled centerPathprimary  shrinkOff"
+            hoverprimary medium filled centerPathprimary   shrinkOff"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
@@ -455,7 +455,7 @@ exports[`RadioField rendering with options 1`] = `
             </label>
           </div>
           <div
-            class="text grow basis shrinkOff"
+            class="text  grow basis shrinkOff"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
@@ -463,7 +463,7 @@ exports[`RadioField rendering with options 1`] = `
             <label
               class="label title medium default font_primary
           dotted cursor  
-              primaryLabel pointer  "
+              primaryLabel pointer    "
               data-id="Delhi_label"
               data-selector-id="label"
               data-test-id="Delhi_label"
@@ -498,7 +498,7 @@ exports[`RadioField rendering with options 1`] = `
         >
           <div
             class="radio  
-            hoverprimary medium filled centerPathprimary  shrinkOff"
+            hoverprimary medium filled centerPathprimary   shrinkOff"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
@@ -525,7 +525,7 @@ exports[`RadioField rendering with options 1`] = `
             </label>
           </div>
           <div
-            class="text grow basis shrinkOff"
+            class="text  grow basis shrinkOff"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
@@ -533,7 +533,7 @@ exports[`RadioField rendering with options 1`] = `
             <label
               class="label title medium default font_primary
           dotted cursor  
-              primaryLabel pointer  "
+              primaryLabel pointer    "
               data-id="Kolkata_label"
               data-selector-id="label"
               data-test-id="Kolkata_label"

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)"

package/es/list/AvatarFlip/__tests__/__snapshots__/AvatarFlip.spec.js.snap

@@ -21,7 +21,7 @@ exports[`AvatarFlip 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"
@@ -29,7 +29,7 @@ exports[`AvatarFlip 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/es/services/components/Attachment/AttachmentViewerWrapper.js

@@ -28,7 +28,7 @@ function AttachmentViewerWrapper(props) {
     hideText = 'Hide',
     showText = 'Show'
   } = i18nKeys;
-  const viewerRef = useRef();
+  const viewerRef = useRef(null);
 
   function addListener() {
     window.addEventListener('keyup', handleKeyUp);

package/es/services/components/ToastNotification/ToastNotificationWrapper.js

@@ -30,7 +30,7 @@ function ToastNotificationWrapper(props) {
   } = props;
   const [notificationView, setnotificationView] = useState(_notificationView);
   const [needHeader, setNeedHeader] = useState(false);
-  const notificationWholeParent = useRef();
+  const notificationWholeParent = useRef(null);
   const notificationCount = messages.length;
   const isStackView = notificationView === 'stack';
   const isListView = notificationView === 'list';

package/es/services/context/AttachmentViewerContext.js

@@ -1,5 +1,6 @@
 import React, { createContext, useState, useCallback, useMemo } from 'react';
 import AttachmentViewer from '../components/Attachment/AttachmentViewer';
+import useGlobalService from '../hooks/useGlobalService';
 export const AttachmentViewerContext = /*#__PURE__*/createContext();
 export const AttachmentViewerProvider = props => {
   const {
@@ -13,13 +14,17 @@ export const AttachmentViewerProvider = props => {
     setAttachment(attachment);
   }, []);
   const hideAttachmentViewer = useCallback(() => {
-    setAttachment([]);
+    setAttachment({});
   }, []);
   const contextValue = useMemo(() => ({
     attachment,
     showAttachmentViewer,
     hideAttachmentViewer
   }), [attachment]);
+  useGlobalService('attachmentViewer', {
+    showAttachmentViewer,
+    hideAttachmentViewer
+  });
   return /*#__PURE__*/React.createElement(AttachmentViewerContext.Provider, {
     value: contextValue
   }, children, /*#__PURE__*/React.createElement(AttachmentViewer, {

package/es/services/context/DOTAttachmentService.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import AttachmentViewer from '../components/Attachment/AttachmentViewer';
+import useDOTAttachmentViewerService from '@zohodesk/dotkit/es/react/service/hooks/useDOTAttachmentViewerService';
+import { hideAtachmentViewer } from '@zohodesk/dotkit/es/react/service/helpers/dotAttachmentServiceMethods';
+export const DOTAttachmentService = props => {
+  const {
+    attachment
+  } = useDOTAttachmentViewerService();
+  return /*#__PURE__*/React.createElement(AttachmentViewer, {
+    attachment: attachment,
+    hideAttachmentViewer: hideAtachmentViewer,
+    ...props
+  });
+};
+export default DOTAttachmentService;

package/es/services/context/DOTToastNotificationService.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import ToastNotification from '../components/ToastNotification/ToastNotification';
+import useDOTToastNotificationService from '@zohodesk/dotkit/es/react/service/hooks/useDOTToastNotificationService';
+import { clearToastNotifications, hideToastNotification } from '@zohodesk/dotkit/es/react/service/helpers/dotToastNotificationsServiceMethods';
+export const DOTToastNotificationService = props => {
+  const {
+    notifications
+  } = useDOTToastNotificationService();
+  return notifications.length > 0 ? /*#__PURE__*/React.createElement(ToastNotification, {
+    messages: notifications,
+    hideToastNotification: hideToastNotification,
+    clearToastNotifications: clearToastNotifications,
+    ...props
+  }) : null;
+};
+export default DOTToastNotificationService;

package/es/services/context/ToastNotificationContext.js

@@ -1,5 +1,6 @@
 import React, { createContext, useState, useRef, useCallback, useMemo } from 'react';
 import ToastNotification from '../components/ToastNotification/ToastNotification';
+import useGlobalService from '../hooks/useGlobalService';
 export const ToastNotificationContext = /*#__PURE__*/createContext();
 export const ToastNotificationProvider = props => {
   const {
@@ -30,6 +31,11 @@ export const ToastNotificationProvider = props => {
     hideToastNotification,
     clearToastNotifications
   }), [toastMessages]);
+  useGlobalService('toastNotification', {
+    showToastNotification,
+    hideToastNotification,
+    clearToastNotifications
+  });
   return /*#__PURE__*/React.createElement(ToastNotificationContext.Provider, {
     value: contextValue
   }, children, /*#__PURE__*/React.createElement(ToastNotification, {

package/es/services/helpers/handleGloabeService.js

@@ -0,0 +1,16 @@
+export const setGlobalService = (serviceName, serviceFunctions) => {
+  if (!global.DOTServices) {
+    global.DOTServices = {};
+  }
+
+  global.DOTServices[serviceName] = serviceFunctions;
+};
+export const removeGlobalService = serviceName => {
+  if (global.DOTServices && global.DOTServices[serviceName]) {
+    delete global.DOTServices[serviceName];
+  }
+
+  if (global.DOTServices && Object.keys(global.DOTServices).length === 0) {
+    delete global.DOTServices;
+  }
+};

package/es/services/hooks/useGlobalService.js

@@ -0,0 +1,13 @@
+import { useEffect } from 'react';
+import { removeGlobalService, setGlobalService } from "../helpers/handleGloabeService";
+
+const useGlobalService = (serviceName, serviceFunctions) => {
+  useEffect(() => {
+    setGlobalService(serviceName, serviceFunctions);
+    return () => {
+      removeGlobalService(serviceName);
+    };
+  }, [serviceName, serviceFunctions]);
+};
+
+export default useGlobalService;

package/es/utils/constants.js

@@ -0,0 +1,3 @@
+export const DUMMY_ARRAY = [];
+export const DUMMY_OBJECT = {};
+export const DUMMY_FUNCTION = () => {};

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/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,