@zohodesk/components 1.6.20 → 1.6.22

package/es/ColorSelect/__tests__/__snapshots__/ColorMultiSelect.spec.js.snap

@@ -9,13 +9,13 @@ exports[`ColorMultiSelect Should render the default selected value 1`] = `
     data-test-id="multiSelect"
   >
     <div
-      class="container medium borderColor_default   hasBorder flex cover rowdir wrap vCenter"
+      class="flex fullSize row wrap alignItems_center container medium borderColor_default  hasBorder"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
     >
       <div
-        class="wrapper grow basisAuto shrinkOn"
+        class="flexible basis_auto shrink wrapper"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
@@ -25,11 +25,11 @@ exports[`ColorMultiSelect Should render the default selected value 1`] = `
           "
         />
         <div
-          class="varClass customContainer    effect     container custmInputWrapper  flex rowdir"
+          class="flex row varClass customContainer    effect     container  custmInputWrapper"
           data-selector-id="textBoxIcon"
         >
           <div
-            class="grow basis shrinkOff"
+            class="flexible basis_zero noShrink"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
@@ -50,25 +50,25 @@ exports[`ColorMultiSelect Should render the default selected value 1`] = `
             />
           </div>
           <div
-            class="iconContainer  shrinkOff"
+            class="noShrink iconContainer"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
           >
             <div
-              class="flex cover rowdir"
+              class="flex fullSize row"
               data-id="containerComponent"
               data-selector-id="container"
               data-test-id="containerComponent"
             >
               <div
-                class="icon  shrinkOff"
+                class="noShrink icon"
                 data-id="boxComponent"
                 data-selector-id="box"
                 data-test-id="boxComponent"
               >
                 <div
-                  class="rightPlaceholder inflex rowdir vCenter"
+                  class="inlineFlex row alignItems_center rightPlaceholder"
                   data-id="containerComponent"
                   data-selector-id="container"
                   data-test-id="containerComponent"
@@ -92,13 +92,13 @@ exports[`ColorMultiSelect Should render the selected value 1`] = `
     data-test-id="multiSelect"
   >
     <div
-      class="container medium borderColor_default   hasBorder flex cover rowdir wrap vCenter"
+      class="flex fullSize row wrap alignItems_center container medium borderColor_default  hasBorder"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
     >
       <div
-        class="tag medium shrinkOff"
+        class="noShrink tag medium"
         data-id="multiSelect_selectedOptions"
         data-selector-id="box"
         data-test-id="multiSelect_selectedOptions"
@@ -123,22 +123,21 @@ exports[`ColorMultiSelect Should render the selected value 1`] = `
           <button
             aria-label="Delete"
             class="buttonReset close 
-            lgRadiusClose 
-             closedanger"
+            lgRadiusClose  closedanger "
             data-id="tag_RemoveTag"
             data-test-id="tag_RemoveTag"
             type="button"
             value="text"
           >
             <div
-              class="flex cover coldir both"
+              class="flex fullSize column alignItems_center justifyContent_center"
               data-id="containerComponent"
               data-selector-id="container"
               data-test-id="containerComponent"
             >
               <i
                 aria-hidden="true"
-                class="zd_font_icons basic icon-close2 fbold   "
+                class="zd_font_icons  basic icon-close2 fbold  "
                 data-id="fontIcon"
                 data-selector-id="fontIcon"
                 data-test-id="fontIcon"
@@ -149,7 +148,7 @@ exports[`ColorMultiSelect Should render the selected value 1`] = `
         </div>
       </div>
       <div
-        class="tag medium shrinkOff"
+        class="noShrink tag medium"
         data-id="multiSelect_selectedOptions"
         data-selector-id="box"
         data-test-id="multiSelect_selectedOptions"
@@ -174,22 +173,21 @@ exports[`ColorMultiSelect Should render the selected value 1`] = `
           <button
             aria-label="Delete"
             class="buttonReset close 
-            lgRadiusClose 
-             closedanger"
+            lgRadiusClose  closedanger "
             data-id="tag_RemoveTag"
             data-test-id="tag_RemoveTag"
             type="button"
             value="text"
           >
             <div
-              class="flex cover coldir both"
+              class="flex fullSize column alignItems_center justifyContent_center"
               data-id="containerComponent"
               data-selector-id="container"
               data-test-id="containerComponent"
             >
               <i
                 aria-hidden="true"
-                class="zd_font_icons basic icon-close2 fbold   "
+                class="zd_font_icons  basic icon-close2 fbold  "
                 data-id="fontIcon"
                 data-selector-id="fontIcon"
                 data-test-id="fontIcon"
@@ -200,7 +198,7 @@ exports[`ColorMultiSelect Should render the selected value 1`] = `
         </div>
       </div>
       <div
-        class="wrapper grow basisAuto shrinkOn"
+        class="flexible basis_auto shrink wrapper"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
@@ -210,11 +208,11 @@ exports[`ColorMultiSelect Should render the selected value 1`] = `
           "
         />
         <div
-          class="varClass customContainer    effect     container custmInputWrapper  flex rowdir"
+          class="flex row varClass customContainer    effect     container  custmInputWrapper"
           data-selector-id="textBoxIcon"
         >
           <div
-            class="grow basis shrinkOff"
+            class="flexible basis_zero noShrink"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
@@ -236,31 +234,31 @@ exports[`ColorMultiSelect Should render the selected value 1`] = `
             />
           </div>
           <div
-            class="iconContainer  shrinkOff"
+            class="noShrink iconContainer"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
           >
             <div
-              class="flex cover rowdir"
+              class="flex fullSize row"
               data-id="containerComponent"
               data-selector-id="container"
               data-test-id="containerComponent"
             >
               <div
-                class="icon  shrinkOff"
+                class="noShrink icon"
                 data-id="boxComponent"
                 data-selector-id="box"
                 data-test-id="boxComponent"
               >
                 <div
-                  class="rightPlaceholder inflex rowdir vCenter"
+                  class="inlineFlex row alignItems_center rightPlaceholder"
                   data-id="containerComponent"
                   data-selector-id="container"
                   data-test-id="containerComponent"
                 >
                   <button
-                    class="delete defaultDelete shrinkOff"
+                    class="noShrink delete defaultDelete"
                     data-id="multiSelect_clearIcon"
                     data-selector-id="box"
                     data-test-id="multiSelect_clearIcon"
@@ -268,7 +266,7 @@ exports[`ColorMultiSelect Should render the selected value 1`] = `
                   >
                     <i
                       aria-hidden="true"
-                      class="zd_font_icons basic icon-delete    rtl "
+                      class="zd_font_icons  rtl basic icon-delete   "
                       data-id="fontIcon"
                       data-selector-id="fontIcon"
                       data-test-id="fontIcon"
@@ -295,13 +293,13 @@ exports[`ColorMultiSelect rendering the defult props 1`] = `
     data-test-id="multiSelect"
   >
     <div
-      class="container medium borderColor_default   hasBorder flex cover rowdir wrap vCenter"
+      class="flex fullSize row wrap alignItems_center container medium borderColor_default  hasBorder"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
     >
       <div
-        class="wrapper grow basisAuto shrinkOn"
+        class="flexible basis_auto shrink wrapper"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
@@ -311,11 +309,11 @@ exports[`ColorMultiSelect rendering the defult props 1`] = `
           "
         />
         <div
-          class="varClass customContainer    effect     container custmInputWrapper  flex rowdir"
+          class="flex row varClass customContainer    effect     container  custmInputWrapper"
           data-selector-id="textBoxIcon"
         >
           <div
-            class="grow basis shrinkOff"
+            class="flexible basis_zero noShrink"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
@@ -336,25 +334,25 @@ exports[`ColorMultiSelect rendering the defult props 1`] = `
             />
           </div>
           <div
-            class="iconContainer  shrinkOff"
+            class="noShrink iconContainer"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
           >
             <div
-              class="flex cover rowdir"
+              class="flex fullSize row"
               data-id="containerComponent"
               data-selector-id="container"
               data-test-id="containerComponent"
             >
               <div
-                class="icon  shrinkOff"
+                class="noShrink icon"
                 data-id="boxComponent"
                 data-selector-id="box"
                 data-test-id="boxComponent"
               >
                 <div
-                  class="rightPlaceholder inflex rowdir vCenter"
+                  class="inlineFlex row alignItems_center rightPlaceholder"
                   data-id="containerComponent"
                   data-selector-id="container"
                   data-test-id="containerComponent"
@@ -378,13 +376,13 @@ exports[`ColorMultiSelect renders with renderCustomColorIndicator 1`] = `
     data-test-id="multiSelect"
   >
     <div
-      class="container medium borderColor_default   hasBorder flex cover rowdir wrap vCenter"
+      class="flex fullSize row wrap alignItems_center container medium borderColor_default  hasBorder"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
     >
       <div
-        class="wrapper grow basisAuto shrinkOn"
+        class="flexible basis_auto shrink wrapper"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
@@ -394,11 +392,11 @@ exports[`ColorMultiSelect renders with renderCustomColorIndicator 1`] = `
           "
         />
         <div
-          class="varClass customContainer    effect     container custmInputWrapper  flex rowdir"
+          class="flex row varClass customContainer    effect     container  custmInputWrapper"
           data-selector-id="textBoxIcon"
         >
           <div
-            class="grow basis shrinkOff"
+            class="flexible basis_zero noShrink"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
@@ -419,25 +417,25 @@ exports[`ColorMultiSelect renders with renderCustomColorIndicator 1`] = `
             />
           </div>
           <div
-            class="iconContainer  shrinkOff"
+            class="noShrink iconContainer"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
           >
             <div
-              class="flex cover rowdir"
+              class="flex fullSize row"
               data-id="containerComponent"
               data-selector-id="container"
               data-test-id="containerComponent"
             >
               <div
-                class="icon  shrinkOff"
+                class="noShrink icon"
                 data-id="boxComponent"
                 data-selector-id="box"
                 data-test-id="boxComponent"
               >
                 <div
-                  class="rightPlaceholder inflex rowdir vCenter"
+                  class="inlineFlex row alignItems_center rightPlaceholder"
                   data-id="containerComponent"
                   data-selector-id="container"
                   data-test-id="containerComponent"
@@ -461,13 +459,13 @@ exports[`ColorMultiSelect renders with renderCustomSelectedValue 1`] = `
     data-test-id="multiSelect"
   >
     <div
-      class="container medium borderColor_default   hasBorder flex cover rowdir wrap vCenter"
+      class="flex fullSize row wrap alignItems_center container medium borderColor_default  hasBorder"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
     >
       <div
-        class="wrapper grow basisAuto shrinkOn"
+        class="flexible basis_auto shrink wrapper"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
@@ -477,11 +475,11 @@ exports[`ColorMultiSelect renders with renderCustomSelectedValue 1`] = `
           "
         />
         <div
-          class="varClass customContainer    effect     container custmInputWrapper  flex rowdir"
+          class="flex row varClass customContainer    effect     container  custmInputWrapper"
           data-selector-id="textBoxIcon"
         >
           <div
-            class="grow basis shrinkOff"
+            class="flexible basis_zero noShrink"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
@@ -502,25 +500,25 @@ exports[`ColorMultiSelect renders with renderCustomSelectedValue 1`] = `
             />
           </div>
           <div
-            class="iconContainer  shrinkOff"
+            class="noShrink iconContainer"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
           >
             <div
-              class="flex cover rowdir"
+              class="flex fullSize row"
               data-id="containerComponent"
               data-selector-id="container"
               data-test-id="containerComponent"
             >
               <div
-                class="icon  shrinkOff"
+                class="noShrink icon"
                 data-id="boxComponent"
                 data-selector-id="box"
                 data-test-id="boxComponent"
               >
                 <div
-                  class="rightPlaceholder inflex rowdir vCenter"
+                  class="inlineFlex row alignItems_center rightPlaceholder"
                   data-id="containerComponent"
                   data-selector-id="container"
                   data-test-id="containerComponent"

package/es/ColorSelect/__tests__/__snapshots__/ColorSingleSelect.spec.js.snap

@@ -18,20 +18,20 @@ exports[`ColorSingleSelect Should render the default selected value 1`] = `
         aria-haspopup="listbox"
         aria-owns="3"
         aria-readonly="false"
-        class="varClass customContainer medium padding_medium border_bottom effect borderColor_default hasBorder    flex rowdir scrolly"
+        class="flex row scroll_vertical varClass customContainer medium padding_medium border_bottom effect borderColor_default hasBorder"
         data-selector-id="container"
         data-title=""
         role="button"
         tabindex="0"
       >
         <div
-          class="flex cover rowdir"
+          class="flex fullSize row"
           data-id="containerComponent"
           data-selector-id="container"
           data-test-id="containerComponent"
         >
           <div
-            class="grow basis shrinkOff"
+            class="flexible basis_zero noShrink"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
@@ -57,14 +57,14 @@ exports[`ColorSingleSelect Should render the default selected value 1`] = `
           </div>
           <div
             aria-hidden="true"
-            class="arrowIcon      inflex coldir both"
+            class="inlineFlex column alignItems_center justifyContent_center arrowIcon"
             data-id="undefined_downIcon"
             data-selector-id="container"
             data-test-id="undefined_downIcon"
           >
             <i
               aria-hidden="true"
-              class="zd_font_icons basic icon-down    "
+              class="zd_font_icons  basic icon-down   "
               data-id="fontIcon"
               data-selector-id="fontIcon"
               data-test-id="fontIcon"
@@ -96,20 +96,20 @@ exports[`ColorSingleSelect Should render the selected value 1`] = `
         aria-haspopup="listbox"
         aria-owns="6"
         aria-readonly="false"
-        class="varClass customContainer medium padding_medium border_bottom effect borderColor_default hasBorder    flex rowdir scrolly"
+        class="flex row scroll_vertical varClass customContainer medium padding_medium border_bottom effect borderColor_default hasBorder"
         data-selector-id="container"
         data-title=""
         role="button"
         tabindex="0"
       >
         <div
-          class="flex cover rowdir"
+          class="flex fullSize row"
           data-id="containerComponent"
           data-selector-id="container"
           data-test-id="containerComponent"
         >
           <div
-            class="grow basis shrinkOff"
+            class="flexible basis_zero noShrink"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
@@ -131,14 +131,14 @@ exports[`ColorSingleSelect Should render the selected value 1`] = `
           </div>
           <div
             aria-hidden="true"
-            class="arrowIcon      inflex coldir both"
+            class="inlineFlex column alignItems_center justifyContent_center arrowIcon"
             data-id="undefined_downIcon"
             data-selector-id="container"
             data-test-id="undefined_downIcon"
           >
             <i
               aria-hidden="true"
-              class="zd_font_icons basic icon-down    "
+              class="zd_font_icons  basic icon-down   "
               data-id="fontIcon"
               data-selector-id="fontIcon"
               data-test-id="fontIcon"
@@ -170,20 +170,20 @@ exports[`ColorSingleSelect rendering the defult props 1`] = `
         aria-haspopup="listbox"
         aria-owns="1"
         aria-readonly="false"
-        class="varClass customContainer medium padding_medium border_bottom effect borderColor_default hasBorder    flex rowdir scrolly"
+        class="flex row scroll_vertical varClass customContainer medium padding_medium border_bottom effect borderColor_default hasBorder"
         data-selector-id="container"
         data-title=""
         role="button"
         tabindex="0"
       >
         <div
-          class="flex cover rowdir"
+          class="flex fullSize row"
           data-id="containerComponent"
           data-selector-id="container"
           data-test-id="containerComponent"
         >
           <div
-            class="grow basis shrinkOff"
+            class="flexible basis_zero noShrink"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
@@ -194,14 +194,14 @@ exports[`ColorSingleSelect rendering the defult props 1`] = `
           </div>
           <div
             aria-hidden="true"
-            class="arrowIcon      inflex coldir both"
+            class="inlineFlex column alignItems_center justifyContent_center arrowIcon"
             data-id="undefined_downIcon"
             data-selector-id="container"
             data-test-id="undefined_downIcon"
           >
             <i
               aria-hidden="true"
-              class="zd_font_icons basic icon-down    "
+              class="zd_font_icons  basic icon-down   "
               data-id="fontIcon"
               data-selector-id="fontIcon"
               data-test-id="fontIcon"
@@ -233,20 +233,20 @@ exports[`ColorSingleSelect rendering with isDefaultSelectValue is false 1`] = `
         aria-haspopup="listbox"
         aria-owns="9"
         aria-readonly="false"
-        class="varClass customContainer medium padding_medium border_bottom effect borderColor_default hasBorder    flex rowdir scrolly"
+        class="flex row scroll_vertical varClass customContainer medium padding_medium border_bottom effect borderColor_default hasBorder"
         data-selector-id="container"
         data-title=""
         role="button"
         tabindex="0"
       >
         <div
-          class="flex cover rowdir"
+          class="flex fullSize row"
           data-id="containerComponent"
           data-selector-id="container"
           data-test-id="containerComponent"
         >
           <div
-            class="grow basis shrinkOff"
+            class="flexible basis_zero noShrink"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
@@ -259,14 +259,14 @@ exports[`ColorSingleSelect rendering with isDefaultSelectValue is false 1`] = `
           </div>
           <div
             aria-hidden="true"
-            class="arrowIcon      inflex coldir both"
+            class="inlineFlex column alignItems_center justifyContent_center arrowIcon"
             data-id="undefined_downIcon"
             data-selector-id="container"
             data-test-id="undefined_downIcon"
           >
             <i
               aria-hidden="true"
-              class="zd_font_icons basic icon-down    "
+              class="zd_font_icons  basic icon-down   "
               data-id="fontIcon"
               data-selector-id="fontIcon"
               data-test-id="fontIcon"
@@ -298,20 +298,20 @@ exports[`ColorSingleSelect renders with renderCustomColorIndicator 1`] = `
         aria-haspopup="listbox"
         aria-owns="11"
         aria-readonly="false"
-        class="varClass customContainer medium padding_medium border_bottom effect borderColor_default hasBorder    flex rowdir scrolly"
+        class="flex row scroll_vertical varClass customContainer medium padding_medium border_bottom effect borderColor_default hasBorder"
         data-selector-id="container"
         data-title=""
         role="button"
         tabindex="0"
       >
         <div
-          class="flex cover rowdir"
+          class="flex fullSize row"
           data-id="containerComponent"
           data-selector-id="container"
           data-test-id="containerComponent"
         >
           <div
-            class="grow basis shrinkOff"
+            class="flexible basis_zero noShrink"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
@@ -337,14 +337,14 @@ exports[`ColorSingleSelect renders with renderCustomColorIndicator 1`] = `
           </div>
           <div
             aria-hidden="true"
-            class="arrowIcon      inflex coldir both"
+            class="inlineFlex column alignItems_center justifyContent_center arrowIcon"
             data-id="undefined_downIcon"
             data-selector-id="container"
             data-test-id="undefined_downIcon"
           >
             <i
               aria-hidden="true"
-              class="zd_font_icons basic icon-down    "
+              class="zd_font_icons  basic icon-down   "
               data-id="fontIcon"
               data-selector-id="fontIcon"
               data-test-id="fontIcon"
@@ -376,20 +376,20 @@ exports[`ColorSingleSelect renders with renderCustomSelectedValue 1`] = `
         aria-haspopup="listbox"
         aria-owns="14"
         aria-readonly="false"
-        class="varClass customContainer medium padding_medium border_bottom effect borderColor_default hasBorder    flex rowdir scrolly"
+        class="flex row scroll_vertical varClass customContainer medium padding_medium border_bottom effect borderColor_default hasBorder"
         data-selector-id="container"
         data-title=""
         role="button"
         tabindex="0"
       >
         <div
-          class="flex cover rowdir"
+          class="flex fullSize row"
           data-id="containerComponent"
           data-selector-id="container"
           data-test-id="containerComponent"
         >
           <div
-            class="grow basis shrinkOff"
+            class="flexible basis_zero noShrink"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
@@ -400,14 +400,14 @@ exports[`ColorSingleSelect renders with renderCustomSelectedValue 1`] = `
           </div>
           <div
             aria-hidden="true"
-            class="arrowIcon      inflex coldir both"
+            class="inlineFlex column alignItems_center justifyContent_center arrowIcon"
             data-id="undefined_downIcon"
             data-selector-id="container"
             data-test-id="undefined_downIcon"
           >
             <i
               aria-hidden="true"
-              class="zd_font_icons basic icon-down    "
+              class="zd_font_icons  basic icon-down   "
               data-id="fontIcon"
               data-selector-id="fontIcon"
               data-test-id="fontIcon"

package/es/DateTime/CalendarView.js

@@ -136,7 +136,7 @@ export default class CalendarView extends React.PureComponent {
             output = /*#__PURE__*/React.createElement(Span, {
               i: i // isActive={isSelectedDay}
               ,
-              tdclass: `${tdclass}  ${style.invalidDate}`,
+              tdclass: `${style.invalidDate} ${tdclass}`,
               handleSelect: this.handleSelect,
               incremday: nextDate,
               userSeeMonth: nextMonth,
@@ -211,7 +211,7 @@ export class Span extends React.PureComponent {
     } = this.props;
     return /*#__PURE__*/React.createElement(Box, {
       dataId: dataId,
-      className: `${tdclass} ${isActive ? style.active : ''} ${isToday ? style.today : ''}`,
+      className: `${isActive ? style.active : ''} ${isToday ? style.today : ''} ${tdclass} `,
       key: i,
       onClick: this.handleSelectChild,
       "aria-label": incremday

package/es/DateTime/DateWidget.js

@@ -1060,11 +1060,11 @@ class DateWidgetComponent extends React.Component {
       "data-test-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : `${dataId}_widget`}`,
       onClick: isDisabled || isReadOnly ? null : this.handleTogglePopup,
       ref: getTargetRef,
-      className: `${className ? className : ''} ${isDisabled ? style.disabled : style.enabled}`
+      className: `${isDisabled ? style.disabled : style.enabled} ${className ? className : ''}`
     }, children) : /*#__PURE__*/React.createElement("div", {
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : `${dataId}_widget`}`,
       "data-test-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : `${dataId}_widget`}`,
-      className: `${className ? className : ''} ${style.textBox} ${isPopupOpen && !isDisabled ? style.textBoxFocus : ''} ${isDisabled ? style.disabled : isReadOnly ? style.readOnly : style.enabled}`,
+      className: ` ${style.textBox} ${isPopupOpen && !isDisabled ? style.textBoxFocus : ''} ${isDisabled ? style.disabled : isReadOnly ? style.readOnly : style.enabled} ${className ? className : ''}`,
       onClick: !isAllowedDateType ? isDisabled || isReadOnly ? null : this.handleTogglePopup : null,
       ref: getTargetRef
     }, /*#__PURE__*/React.createElement(TextBoxIcon, _extends({