@zohodesk/dot 1.9.18 → 1.9.19

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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`CurrencyField rendering the defult props 1`] = `
 <DocumentFragment>
@@ -10,11 +10,11 @@ exports[`CurrencyField rendering the defult props 1`] = `
       class="fieldContainer"
     >
       <div
-        class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder container"
+        class="d-flex d-flex-row varClass customContainer border_bottom effect borderColor_default hasBorder container"
         data-selector-id="textBoxIcon"
       >
         <div
-          class="flexible basis_zero noShrink"
+          class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -31,13 +31,13 @@ exports[`CurrencyField rendering the defult props 1`] = `
           />
         </div>
         <div
-          class="noShrink iconContainer"
+          class="d-flex-shrink-0 iconContainer"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <div
-            class="flex fullSize row"
+            class="d-flex d-h-full d-w-full d-flex-row"
             data-id="containerComponent"
             data-selector-id="container"
             data-test-id="containerComponent"

package/es/form/fields/DateField/DateField.js

@@ -13,6 +13,7 @@ import { getUniqueId } from '@zohodesk/components/es/Provider/IdProvider';
 import FieldContainer from "../FieldContainer/FieldContainer";
 /**** CSS ****/
 
+import { cn } from "@dot-system/css-utility";
 import style from "../Fields.module.css";
 export default class DateField extends PureComponent {
   constructor(props) {
@@ -125,7 +126,7 @@ export default class DateField extends PureComponent {
     } = customProps;
     let getAriaId = htmlId ? htmlId : this.getNextId();
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
+      className: cn(`${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`),
       "data-title": isDisabled ? title : null,
       "data-selector-id": dataSelectorId
     }, labelName && /*#__PURE__*/React.createElement(FieldContainer, {
@@ -153,9 +154,9 @@ export default class DateField extends PureComponent {
         }
       }
     }, LabelProps))), /*#__PURE__*/React.createElement("div", {
-      className: `${style.fieldContainer} ${labelName ? style[`fieldMargin_${fieldSize}`] : ''}`
+      className: cn(`${style.fieldContainer} ${labelName ? style[`fieldMargin_${fieldSize}`] : ''}`)
     }, isLocked && lockedValueText ? /*#__PURE__*/React.createElement("div", {
-      className: style.lockText
+      className: cn(style.lockText)
     }, lockedValueText) : /*#__PURE__*/React.createElement(DateWidget, _extends({
       textBoxSize: fieldSize === 'medium' ? textBoxSize : 'xsmall',
       textBoxVariant: textBoxVariant,
@@ -196,9 +197,4 @@ export default class DateField extends PureComponent {
 
 }
 DateField.propTypes = propTypes;
-DateField.defaultProps = defaultProps; // if (__DOCS__) {
-//   DateField.docs = {
-//     componentGroup: 'Form Fields',
-//     folderName: 'General'
-//   };
-// }
+DateField.defaultProps = defaultProps;

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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`DateField rendering the defult props 1`] = `
 <DocumentFragment>
@@ -18,11 +18,11 @@ exports[`DateField rendering the defult props 1`] = `
           data-test-id="dateField(formatted_undefined)_widget"
         >
           <div
-            class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder container placeHolder"
+            class="d-flex d-flex-row varClass customContainer border_bottom effect borderColor_default hasBorder container placeHolder"
             data-selector-id="textBoxIcon"
           >
             <div
-              class="flexible basis_zero noShrink"
+              class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
@@ -40,32 +40,32 @@ exports[`DateField rendering the defult props 1`] = `
               />
             </div>
             <div
-              class="noShrink iconContainer"
+              class="d-flex-shrink-0 iconContainer"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
             >
               <div
-                class="flex fullSize row"
+                class="d-flex d-h-full d-w-full d-flex-row"
                 data-id="containerComponent"
                 data-selector-id="container"
                 data-test-id="containerComponent"
               >
                 <div
-                  class="noShrink icon"
+                  class="d-flex-shrink-0 icon"
                   data-id="boxComponent"
                   data-selector-id="box"
                   data-test-id="boxComponent"
                 >
                   <div
-                    class="inlineFlex column alignItems_center justifyContent_center datePickIcon"
+                    class="d-inline-flex d-flex-col d-items-center d-justify-center datePickIcon"
                     data-id="dateField(formatted_undefined)_datePicker"
                     data-selector-id="container"
                     data-test-id="dateField(formatted_undefined)_datePicker"
                   >
                     <i
                       aria-hidden="true"
-                      class="zd_font_icons basic icon-Datepicker"
+                      class="zd_font_icons ff icon-Datepicker basic d-inline-block d-align-middle"
                       data-id="fontIcon"
                       data-selector-id="fontIcon"
                       data-test-id="fontIcon"

package/es/form/fields/FieldContainer/FieldContainer.js

@@ -10,6 +10,7 @@ import { Container } from '@zohodesk/components/es/Layout';
 import { Icon } from '@zohodesk/icons';
 /**** CSS ****/
 
+import { cn } from "@dot-system/css-utility";
 import style from "../Fields.module.css";
 export default class FieldContainer extends PureComponent {
   constructor(props) {
@@ -57,15 +58,10 @@ export default class FieldContainer extends PureComponent {
       "data-title": ePhiTitle,
       "data-id": `${dataId}_ePHI`,
       "data-test-id": `${dataId}_ePHI`,
-      className: style.ePhiTag
+      className: cn(style.ePhiTag)
     }, ePhiText) : null, renderEnd ? renderEnd() : null);
   }
 
 }
 FieldContainer.propTypes = propTypes;
-FieldContainer.defaultProps = defaultProps; // if (__DOCS__) {
-//   FieldContainer.docs = {
-//     componentGroup: 'Form Fields',
-//     folderName: 'General'
-//   };
-// }
+FieldContainer.defaultProps = defaultProps;

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

@@ -1,9 +1,9 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`FieldContainer rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="flex row alignItems_center"
+    class="d-flex d-flex-row d-items-center"
     data-id="containerComponent"
     data-selector-id="fieldContainer"
     data-test-id="containerComponent"

package/es/form/fields/Fields.module.css

@@ -1,11 +1,11 @@
 .container,
 .checkboxFieldContainer {
-  position: relative;
+  composes: d-relative from global;
   word-break: break-word;
 }
 
 .fieldContainer {
-  position: relative;
+  composes: d-relative from global;
   min-height: var(--zd_size25) ;
 }
 
@@ -54,11 +54,12 @@
 }
 
 .cbTextPointer {
-  cursor: pointer;
+  composes: d-cursor-pointer from global;
 }
 
-.disabled, .readonly {
-  cursor: not-allowed;
+.disabled,
+.readonly {
+  composes: d-cursor-not-allowed from global;
 }
 
 .cbTextReadonly,
@@ -74,15 +75,15 @@
 
 .radio,
 .radioWrap {
-  max-width: 100%  
+  composes: d-max-w-full from global;
 }
 
 .radiosWrapper {
-  gap: var(--zd_size10) 
+  composes: d-gap-[10px] from global;
 }
 
 .radioBox {
-  max-width: 100% ;
+  composes: d-max-w-full from global;
   transition: border var(--zd_transition3);
   border: 1px solid var(--zdt_radiofield_box_border);
   border-radius: 6px;
@@ -121,16 +122,15 @@
 
 .periodContainer {
   composes: dflex flexrow flexwrap from '~@zohodesk/components/es/common/common.module.css';
-  width: 100% ;
+  composes: d-w-full from global;
   /*margin-left: 15px;*/
 }
 
 .phoneIcon {
+  composes: d-inline-block d-cursor-pointer from global;
   color: var(--zdt_fields_phoneicon_icon);
   margin-block: var(--zd_size15) 0 ;
   margin-inline:var(--zd_size10) ;
-  display: inline-block;
-  cursor: pointer;
 }
 
 .phoneIcon:hover {
@@ -138,8 +138,8 @@
 }
 
 .newtabIcon {
+  composes: d-cursor-pointer from global;
   color: var(--zdt_fields_newtabicon_icon);
-  cursor: pointer;
 }
 
 .newtabIcon:hover {
@@ -179,11 +179,10 @@
 }
 
 .newTab {
+  composes: d-hidden d-cursor-pointer from global;
   margin-inline-start: var(--zd_size6) ;
   color: var(--zdt_fields_lockicon_icon);
   font-size: 0 ;
-  display: none;
-  cursor: pointer;
 }
 
 .newTab:hover {
@@ -196,8 +195,8 @@
 
 .lockText {
   font-size: var(--zd_font_size13) ;
-  font-style: italic;
   composes: wbreak from '~@zohodesk/components/es/common/common.module.css';
+  composes: d-italic from global;
 }
 
 .labelMandatory:after {
@@ -221,11 +220,11 @@
 }
 
 .hasChildren {
-  position: relative;
+  composes: d-relative from global;
 }
 
 .rightPlaceholder {
-  position: absolute;
+  composes: d-absolute from global;
   bottom: var(--zd_size4) 
 }
 

package/es/form/fields/MultiSelectField/MultiSelectField.js

@@ -13,6 +13,7 @@ import { getUniqueId } from '@zohodesk/components/es/Provider/IdProvider';
 import FieldContainer from "../FieldContainer/FieldContainer";
 /** CSS */
 
+import { cn } from "@dot-system/css-utility";
 import style from "../Fields.module.css";
 export default class MultiSelectField extends PureComponent {
   constructor(props) {
@@ -137,7 +138,7 @@ export default class MultiSelectField extends PureComponent {
     let isDarkPalette = palette === 'dark';
     let uniqueId = htmlId ? htmlId : this.getNextId();
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
+      className: cn(`${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`),
       "data-title": isDisabled ? title : null,
       "data-selector-id": dataSelectorId
     }, labelName && /*#__PURE__*/React.createElement(FieldContainer, {
@@ -212,9 +213,4 @@ export default class MultiSelectField extends PureComponent {
 
 }
 MultiSelectField.propTypes = propTypes;
-MultiSelectField.defaultProps = defaultProps; // if (__DOCS__) {
-//   MultiSelectField.docs = {
-//     componentGroup: 'Form Fields',
-//     folderName: 'General'
-//   };
-// }
+MultiSelectField.defaultProps = defaultProps;

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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`MultiSelectField rendering the defult props 1`] = `
 <DocumentFragment>
@@ -13,13 +13,13 @@ exports[`MultiSelectField rendering the defult props 1`] = `
       data-test-id="multiSelect"
     >
       <div
-        class="flex fullSize row wrap alignItems_center container medium borderColor_default hasBorder"
+        class="d-flex d-h-full d-w-full d-flex-row d-flex-wrap d-items-center container medium borderColor_default hasBorder"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <div
-          class="flexible basis_auto shrink wrapper"
+          class="d-min-h-0 d-flex-grow d-basis-auto d-min-w-0 d-flex-shrink wrapper"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -28,11 +28,11 @@ exports[`MultiSelectField rendering the defult props 1`] = `
             class="custmSpan custmSpanMedium"
           />
           <div
-            class="flex row varClass customContainer effect container custmInputWrapper"
+            class="d-flex d-flex-row varClass customContainer effect container custmInputWrapper"
             data-selector-id="textBoxIcon"
           >
             <div
-              class="flexible basis_zero noShrink"
+              class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
@@ -54,25 +54,25 @@ exports[`MultiSelectField rendering the defult props 1`] = `
               />
             </div>
             <div
-              class="noShrink iconContainer"
+              class="d-flex-shrink-0 iconContainer"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
             >
               <div
-                class="flex fullSize row"
+                class="d-flex d-h-full d-w-full d-flex-row"
                 data-id="containerComponent"
                 data-selector-id="container"
                 data-test-id="containerComponent"
               >
                 <div
-                  class="noShrink icon"
+                  class="d-flex-shrink-0 icon"
                   data-id="boxComponent"
                   data-selector-id="box"
                   data-test-id="boxComponent"
                 >
                   <div
-                    class="inlineFlex row alignItems_center rightPlaceholder"
+                    class="d-inline-flex d-flex-row d-items-center rightPlaceholder"
                     data-id="containerComponent"
                     data-selector-id="container"
                     data-test-id="containerComponent"

package/es/form/fields/PhoneField/PhoneField.js

@@ -181,9 +181,4 @@ export default class PhoneField extends PureComponent {
 
 }
 PhoneField.propTypes = propTypes;
-PhoneField.defaultProps = defaultProps; // if (__DOCS__) {
-//   PhoneField.docs = {
-//     componentGroup: 'Form Fields',
-//     folderName: 'General'
-//   };
-// }
+PhoneField.defaultProps = defaultProps;

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

@@ -1,15 +1,15 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`PhoneField rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="flex fullSize row container"
+    class="d-flex d-h-full d-w-full d-flex-row container"
     data-id="containerComponent"
     data-selector-id="phoneField"
     data-test-id="containerComponent"
   >
     <div
-      class="flexible basis_zero noShrink phoneField"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 phoneField"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -22,11 +22,11 @@ exports[`PhoneField rendering the defult props 1`] = `
           class="fieldContainer"
         >
           <div
-            class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder container"
+            class="d-flex d-flex-row varClass customContainer border_bottom effect borderColor_default hasBorder container"
             data-selector-id="textBoxIcon"
           >
             <div
-              class="flexible basis_zero noShrink"
+              class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
@@ -43,13 +43,13 @@ exports[`PhoneField rendering the defult props 1`] = `
               />
             </div>
             <div
-              class="noShrink iconContainer"
+              class="d-flex-shrink-0 iconContainer"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
             >
               <div
-                class="flex fullSize row"
+                class="d-flex d-h-full d-w-full d-flex-row"
                 data-id="containerComponent"
                 data-selector-id="container"
                 data-test-id="containerComponent"
@@ -60,7 +60,7 @@ exports[`PhoneField rendering the defult props 1`] = `
       </div>
     </div>
     <div
-      class="noShrink"
+      class="d-flex-shrink-0"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"

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

@@ -13,6 +13,7 @@ import Radio from '@zohodesk/components/es/Radio/Radio';
 import ValidationMessage from "../ValidationMessage/ValidationMessage";
 /** Css */
 
+import { cn } from "@dot-system/css-utility";
 import style from "../Fields.module.css";
 export default class RadioField extends PureComponent {
   constructor(props) {
@@ -119,7 +120,7 @@ export default class RadioField extends PureComponent {
       customRadioClass = ''
     } = customClass;
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''} ${customWrapperClass}`,
+      className: cn(`${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''} ${customWrapperClass}`),
       "data-title": isDisabled ? title : null,
       "data-selector-id": dataSelectorId
     }, labelName && /*#__PURE__*/React.createElement(Label, _extends({
@@ -140,7 +141,7 @@ export default class RadioField extends PureComponent {
         }
       }
     }, LabelProps)), /*#__PURE__*/React.createElement("div", {
-      className: `${style.fieldContainer} ${isBoxStyle ? style.radiosWrapper : ''} ${labelName ? isBoxStyle ? style.fieldMargin_large : style.fieldMargin_medium : ''} ${style.radioContainer}`
+      className: cn(`${style.fieldContainer} ${isBoxStyle ? style.radiosWrapper : ''} ${labelName ? isBoxStyle ? style.fieldMargin_large : style.fieldMargin_medium : ''} ${style.radioContainer}`)
     }, options.map((option, index) => {
       let {
         text,
@@ -170,7 +171,7 @@ export default class RadioField extends PureComponent {
       }) : '';
       return /*#__PURE__*/React.createElement("span", {
         key: text,
-        className: `${!isBoxStyle ? style.radio : ''} ${style.radioWrap} ${customRadioWrapperClass}`
+        className: cn(`${!isBoxStyle ? style.radio : ''} ${style.radioWrap} ${customRadioWrapperClass}`)
       }, /*#__PURE__*/React.createElement(Radio, _extends({}, customProps, {
         id: index,
         value: value,
@@ -220,9 +221,4 @@ export default class RadioField extends PureComponent {
 
 }
 RadioField.propTypes = propTypes;
-RadioField.defaultProps = defaultProps; // if (__DOCS__) {
-//   RadioField.docs = {
-//     componentGroup: 'Form Fields',
-//     folderName: 'General'
-//   };
-// }
+RadioField.defaultProps = defaultProps;