@zohodesk/dot 1.7.1 → 1.7.3

package/lib/DotProvider/__tests__/__snapshots__/DotProvider.spec.js.snap

@@ -0,0 +1,478 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DotProvider Snapshot rendering the additional ...rest props 1`] = `
+<DocumentFragment>
+  <div
+    class="testClass"
+    data-id="test-id"
+    data-mode="light"
+    data-theme="blue"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  >
+    This is a DotProvider component
+  </div>
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the baseFontUnit props of 1 1`] = `
+<DocumentFragment>
+  <div
+    data-mode="light"
+    data-theme="blue"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 1;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the baseFontUnit props of 1em 1`] = `
+<DocumentFragment>
+  <div
+    data-mode="light"
+    data-theme="blue"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 1em;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the baseFontUnit props of 1px 1`] = `
+<DocumentFragment>
+  <div
+    data-mode="light"
+    data-theme="blue"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 1px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the baseFontUnit props of 1rem 1`] = `
+<DocumentFragment>
+  <div
+    data-mode="light"
+    data-theme="blue"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 1rem;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the baseZoomUnit props of 0.5 1`] = `
+<DocumentFragment>
+  <div
+    data-mode="light"
+    data-theme="blue"
+    style="--zd_baseUnit: 0.5px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the baseZoomUnit props of 0.8 1`] = `
+<DocumentFragment>
+  <div
+    data-mode="light"
+    data-theme="blue"
+    style="--zd_baseUnit: 0.8px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the baseZoomUnit props of 1 1`] = `
+<DocumentFragment>
+  <div
+    data-mode="light"
+    data-theme="blue"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the baseZoomUnit props of 1.2 1`] = `
+<DocumentFragment>
+  <div
+    data-mode="light"
+    data-theme="blue"
+    style="--zd_baseUnit: 1.2px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the custom themeAppearanceAttr and themeColorAttr props with theme-appearance of dark along with theme-color of blue 1`] = `
+<DocumentFragment>
+  <div
+    data-desk-mode="dark"
+    data-desk-theme="blue"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the custom themeAppearanceAttr and themeColorAttr props with theme-appearance of dark along with theme-color of green 1`] = `
+<DocumentFragment>
+  <div
+    data-desk-mode="dark"
+    data-desk-theme="green"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the custom themeAppearanceAttr and themeColorAttr props with theme-appearance of dark along with theme-color of orange 1`] = `
+<DocumentFragment>
+  <div
+    data-desk-mode="dark"
+    data-desk-theme="orange"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the custom themeAppearanceAttr and themeColorAttr props with theme-appearance of dark along with theme-color of red 1`] = `
+<DocumentFragment>
+  <div
+    data-desk-mode="dark"
+    data-desk-theme="red"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the custom themeAppearanceAttr and themeColorAttr props with theme-appearance of dark along with theme-color of yellow 1`] = `
+<DocumentFragment>
+  <div
+    data-desk-mode="dark"
+    data-desk-theme="yellow"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the custom themeAppearanceAttr and themeColorAttr props with theme-appearance of light along with theme-color of blue 1`] = `
+<DocumentFragment>
+  <div
+    data-desk-mode="light"
+    data-desk-theme="blue"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the custom themeAppearanceAttr and themeColorAttr props with theme-appearance of light along with theme-color of green 1`] = `
+<DocumentFragment>
+  <div
+    data-desk-mode="light"
+    data-desk-theme="green"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the custom themeAppearanceAttr and themeColorAttr props with theme-appearance of light along with theme-color of orange 1`] = `
+<DocumentFragment>
+  <div
+    data-desk-mode="light"
+    data-desk-theme="orange"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the custom themeAppearanceAttr and themeColorAttr props with theme-appearance of light along with theme-color of red 1`] = `
+<DocumentFragment>
+  <div
+    data-desk-mode="light"
+    data-desk-theme="red"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the custom themeAppearanceAttr and themeColorAttr props with theme-appearance of light along with theme-color of yellow 1`] = `
+<DocumentFragment>
+  <div
+    data-desk-mode="light"
+    data-desk-theme="yellow"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the custom themeAppearanceAttr and themeColorAttr props with theme-appearance of pureDark along with theme-color of blue 1`] = `
+<DocumentFragment>
+  <div
+    data-desk-mode="pureDark"
+    data-desk-theme="blue"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the custom themeAppearanceAttr and themeColorAttr props with theme-appearance of pureDark along with theme-color of green 1`] = `
+<DocumentFragment>
+  <div
+    data-desk-mode="pureDark"
+    data-desk-theme="green"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the custom themeAppearanceAttr and themeColorAttr props with theme-appearance of pureDark along with theme-color of orange 1`] = `
+<DocumentFragment>
+  <div
+    data-desk-mode="pureDark"
+    data-desk-theme="orange"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the custom themeAppearanceAttr and themeColorAttr props with theme-appearance of pureDark along with theme-color of red 1`] = `
+<DocumentFragment>
+  <div
+    data-desk-mode="pureDark"
+    data-desk-theme="red"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the custom themeAppearanceAttr and themeColorAttr props with theme-appearance of pureDark along with theme-color of yellow 1`] = `
+<DocumentFragment>
+  <div
+    data-desk-mode="pureDark"
+    data-desk-theme="yellow"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the default attributes, styles and modified the tag props 1`] = `
+<DocumentFragment>
+  <span
+    data-mode="light"
+    data-theme="blue"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  >
+    This is a DotProvider component
+  </span>
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the default attributes, styles and modifying the tag prop to React.Fragment 1`] = `
+<html
+  data-mode="light"
+  data-theme="blue"
+  style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+>
+  <head />
+  <body>
+    <div>
+      This is a DotProvider component
+    </div>
+  </body>
+</html>
+`;
+
+exports[`DotProvider Snapshot rendering the default props 1`] = `
+<DocumentFragment>
+  <div
+    data-mode="light"
+    data-theme="blue"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  >
+    This is a DotProvider component
+  </div>
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the fontUnitVariable prop along with baseFontUnit props 1`] = `
+<DocumentFragment>
+  <div
+    data-mode="light"
+    data-theme="blue"
+    style="--zd_baseUnit: 1px; --gc_baseFontUnit: 14px;"
+  >
+    This is a DotProvider component
+  </div>
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the providerRef props 1`] = `
+<DocumentFragment>
+  <div>
+    This is a DotProvider component
+  </div>
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the theme-appearance of dark along with theme-color of blue 1`] = `
+<DocumentFragment>
+  <div
+    data-mode="dark"
+    data-theme="blue"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the theme-appearance of dark along with theme-color of green 1`] = `
+<DocumentFragment>
+  <div
+    data-mode="dark"
+    data-theme="green"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the theme-appearance of dark along with theme-color of orange 1`] = `
+<DocumentFragment>
+  <div
+    data-mode="dark"
+    data-theme="orange"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the theme-appearance of dark along with theme-color of red 1`] = `
+<DocumentFragment>
+  <div
+    data-mode="dark"
+    data-theme="red"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the theme-appearance of dark along with theme-color of yellow 1`] = `
+<DocumentFragment>
+  <div
+    data-mode="dark"
+    data-theme="yellow"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the theme-appearance of light along with theme-color of blue 1`] = `
+<DocumentFragment>
+  <div
+    data-mode="light"
+    data-theme="blue"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the theme-appearance of light along with theme-color of green 1`] = `
+<DocumentFragment>
+  <div
+    data-mode="light"
+    data-theme="green"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the theme-appearance of light along with theme-color of orange 1`] = `
+<DocumentFragment>
+  <div
+    data-mode="light"
+    data-theme="orange"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the theme-appearance of light along with theme-color of red 1`] = `
+<DocumentFragment>
+  <div
+    data-mode="light"
+    data-theme="red"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the theme-appearance of light along with theme-color of yellow 1`] = `
+<DocumentFragment>
+  <div
+    data-mode="light"
+    data-theme="yellow"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the theme-appearance of pureDark along with theme-color of blue 1`] = `
+<DocumentFragment>
+  <div
+    data-mode="pureDark"
+    data-theme="blue"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the theme-appearance of pureDark along with theme-color of green 1`] = `
+<DocumentFragment>
+  <div
+    data-mode="pureDark"
+    data-theme="green"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the theme-appearance of pureDark along with theme-color of orange 1`] = `
+<DocumentFragment>
+  <div
+    data-mode="pureDark"
+    data-theme="orange"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the theme-appearance of pureDark along with theme-color of red 1`] = `
+<DocumentFragment>
+  <div
+    data-mode="pureDark"
+    data-theme="red"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the theme-appearance of pureDark along with theme-color of yellow 1`] = `
+<DocumentFragment>
+  <div
+    data-mode="pureDark"
+    data-theme="yellow"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the wrong themeAppearance and themeColor 1`] = `
+<DocumentFragment>
+  <div
+    data-mode="ligt"
+    data-theme="gren"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  >
+    This is a DotProvider component
+  </div>
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the zoomUnitVariable prop along with baseZoomUnit props 1`] = `
+<DocumentFragment>
+  <div
+    data-mode="light"
+    data-theme="blue"
+    style="--gc_baseUnit: 1.1px; --zd_baseFontUnit: 16px;"
+  >
+    This is a DotProvider component
+  </div>
+</DocumentFragment>
+`;

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/Fields.module.css

@@ -74,7 +74,7 @@
   border: 1px solid var(--zdt_radiofield_box_border);
   border-radius: 6px
 }
-.radioBox:hover, .radioBoxActive {
+.hoverableRadioBox:hover, .radioBoxActive {
   border-color: var(--zdt_radiofield_box_active_border)
 }
 .radioBoxActive {

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,