@zohodesk/dot 1.9.16 → 1.9.17

package/lib/lookup/header/Search/Search.js

@@ -237,7 +237,7 @@ var SearchUI = /*#__PURE__*/function (_Component2) {
         isCover: false,
         alignBox: "row",
         align: "vertical",
-        className: "\n          ".concat(style.wrapper, " ").concat(isBoxed ? style.boxType : style.borderType, " \n          ").concat(isActiveState ? "".concat(style.active, " ").concat(activeClass || '') : '', "\n          ").concat(isFocusWidth ? style.focusWidth : '', "\n        ")
+        className: "\n          ".concat(style.wrapper, " ").concat(isBoxed ? style.boxType : style.borderType, " \n          ").concat(isFocusWidth ? style.focusWidth : '', "  ").concat(isActiveState ? "".concat(style.active, " ").concat(activeClass || '') : '', "\n        ")
       }, typeof renderChildren == 'function' ? renderChildren({
         isActive: isActive,
         isFocus: isFocus

package/lib/lookup/header/Search/__tests__/__snapshots__/Search.spec.js.snap

@@ -3,32 +3,29 @@
 exports[`Search rendering the customized style search 1`] = `
 <DocumentFragment>
   <div
-    class="wrapper searchWrapperClass borderType 
-          
-          
-         flex rowdir vCenter"
+    class="flex row alignItems_center wrapper searchWrapperClass borderType"
     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"
     >
       <div
-        class="varClass customContainer    effect     container   flex rowdir"
+        class="flex row varClass customContainer effect container"
         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"
         >
           <input
-            class="  container small  default  effect  borderColor_default  "
+            class="container small default effect borderColor_default"
             data-a11y-autofocus="true"
             data-id="textBoxIcon"
             data-selector-id="textBoxIcon"
@@ -39,13 +36,13 @@ exports[`Search rendering the customized style search 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"
@@ -60,32 +57,29 @@ exports[`Search rendering the customized style search 1`] = `
 exports[`Search rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="wrapper borderType 
-          
-          
-         flex rowdir vCenter"
+    class="flex row alignItems_center wrapper borderType"
     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"
     >
       <div
-        class="varClass customContainer    effect     container   flex rowdir"
+        class="flex row varClass customContainer effect container"
         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"
         >
           <input
-            class="  container small  default  effect  borderColor_default  "
+            class="container small default effect borderColor_default"
             data-a11y-autofocus="true"
             data-id="textBoxIcon"
             data-selector-id="textBoxIcon"
@@ -96,13 +90,13 @@ exports[`Search 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"
@@ -117,32 +111,29 @@ exports[`Search rendering the defult props 1`] = `
 exports[`Search rendering the prop hasSeparator is false 1`] = `
 <DocumentFragment>
   <div
-    class="wrapper borderType 
-          
-          
-         flex rowdir vCenter"
+    class="flex row alignItems_center wrapper borderType"
     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"
     >
       <div
-        class="varClass customContainer    effect     container   flex rowdir"
+        class="flex row varClass customContainer effect container"
         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"
         >
           <input
-            class="  container small  default  effect  borderColor_default  "
+            class="container small default effect borderColor_default"
             data-a11y-autofocus="true"
             data-id="textBoxIcon"
             data-selector-id="textBoxIcon"
@@ -153,13 +144,13 @@ exports[`Search rendering the prop hasSeparator is false 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"
@@ -174,10 +165,7 @@ exports[`Search rendering the prop hasSeparator is false 1`] = `
 exports[`Search rendering the prop hasSeparator is true 1`] = `
 <DocumentFragment>
   <div
-    class="wrapper borderType 
-          
-          
-         flex rowdir vCenter"
+    class="flex row alignItems_center wrapper borderType"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
@@ -186,23 +174,23 @@ exports[`Search rendering the prop hasSeparator is true 1`] = `
       class="separator"
     />
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="varClass customContainer    effect     container   flex rowdir"
+        class="flex row varClass customContainer effect container"
         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"
         >
           <input
-            class="  container small  default  effect  borderColor_default  "
+            class="container small default effect borderColor_default"
             data-a11y-autofocus="true"
             data-id="textBoxIcon"
             data-selector-id="textBoxIcon"
@@ -213,13 +201,13 @@ exports[`Search rendering the prop hasSeparator is true 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"
@@ -238,16 +226,13 @@ exports[`Search rendering the renderChildren props via function 1`] = `
     data-selector-id="toggleDropdown"
   >
     <div
-      class="flex rowdir vCenter"
+      class="flex row alignItems_center"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
     >
       <div
-        class="wrapper borderType 
-          
-          
-         flex rowdir vCenter"
+        class="flex row alignItems_center wrapper borderType"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
@@ -256,23 +241,23 @@ exports[`Search rendering the renderChildren props via function 1`] = `
           All Fields
         </div>
         <div
-          class="grow basis shrinkOff"
+          class="flexible basis_zero noShrink"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <div
-            class="varClass customContainer    effect     container   flex rowdir"
+            class="flex row varClass customContainer effect container"
             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"
             >
               <input
-                class="  container small  default  effect  borderColor_default  "
+                class="container small default effect borderColor_default"
                 data-a11y-autofocus="true"
                 data-id="textBoxIcon"
                 data-selector-id="textBoxIcon"
@@ -283,13 +268,13 @@ exports[`Search rendering the renderChildren props via function 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"
@@ -306,32 +291,29 @@ exports[`Search rendering the renderChildren props via function 1`] = `
 exports[`Search rendering the search active 1`] = `
 <DocumentFragment>
   <div
-    class="wrapper borderType 
-          active 
-          focusWidth
-         flex rowdir vCenter"
+    class="flex row alignItems_center wrapper borderType focusWidth active"
     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"
     >
       <div
-        class="varClass customContainer    effect  active   container   flex rowdir"
+        class="flex row varClass customContainer effect active container"
         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"
         >
           <input
-            class="  container small  default  effect  borderColor_default  "
+            class="container small default effect borderColor_default"
             data-a11y-autofocus="true"
             data-id="textBoxIcon"
             data-selector-id="textBoxIcon"
@@ -342,13 +324,13 @@ exports[`Search rendering the search active 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"

package/lib/lookup/header/TicketHeader/__tests__/__snapshots__/TicketHeader.spec.js.snap

@@ -3,32 +3,32 @@
 exports[`TicketHeader rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="container default undefined container flex rowdir wrap vCenter"
+    class="flex row wrap alignItems_center container default container"
     data-drag-hook="true"
     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"
     >
       <div
-        class="innerContainer flex coldir wrap"
+        class="flex column wrap innerContainer"
         data-id="lookupView"
         data-selector-id="container"
         data-test-id="lookupView"
       >
         <div
-          class="title shrinkOff"
+          class="noShrink title"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <span
-            class="title default "
+            class="title default"
           />
         </div>
       </div>
@@ -38,7 +38,7 @@ exports[`TicketHeader rendering the defult props 1`] = `
     >
       <button
         aria-pressed="false"
-        class="buttonReset large wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+        class="inlineFlex column alignItems_center justifyContent_center buttonReset large wrapper effect default border defaultHover hoverEffect"
         data-id="close"
         data-ishtml="false"
         data-selector-id="iconButton"
@@ -46,7 +46,7 @@ exports[`TicketHeader rendering the defult props 1`] = `
       >
         <i
           aria-hidden="true"
-          class="zd_font_icons basic icon-cross   icon_button_center  "
+          class="zd_font_icons basic icon-cross icon_button_center"
           data-id="fontIcon"
           data-selector-id="fontIcon"
           data-test-id="fontIcon"

package/lib/lookup/header/Title/__tests__/__snapshots__/Titles.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`Title rendering the defult props 1`] = `
 <DocumentFragment>
   <span
-    class="title default "
+    class="title default"
   />
 </DocumentFragment>
 `;

package/lib/lookup/header/ViewDropDown/__test__/__snapshots__/ViewDropDown.spec.js.snap

@@ -9,7 +9,7 @@ exports[`ViewDropDown rendering the defult props 1`] = `
   >
     <div>
       <div
-        class="labelCnt "
+        class="labelCnt"
       >
         <span
           class="labelText"
@@ -19,7 +19,7 @@ exports[`ViewDropDown rendering the defult props 1`] = `
         />
         <i
           aria-hidden="true"
-          class="zd_font_icons basic icon-down  arrowIcon  "
+          class="zd_font_icons basic icon-down arrowIcon"
           data-id="ViewDropDown_icon"
           data-selector-id="fontIcon"
           data-test-id="ViewDropDown_icon"

package/lib/setup/header/Link/__tests__/__snapshots__/Link.spec.js.snap

@@ -9,14 +9,14 @@ exports[`Link rendering the defult props 1`] = `
     target="_blank"
   >
     <div
-      class="icon shrinkOff"
+      class="noShrink icon"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-newtab fbold   "
+        class="zd_font_icons basic icon-newtab fbold"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -24,7 +24,7 @@ exports[`Link rendering the defult props 1`] = `
       />
     </div>
     <div
-      class="text grow basis shrinkOff"
+      class="flexible basis_zero noShrink text"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"

package/lib/setup/header/Search/__tests__/__snapshots__/Search.spec.js.snap

@@ -3,12 +3,12 @@
 exports[`Search rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="container  "
+    class="container"
     data-id="search_search"
     data-test-id="search_search"
   >
     <input
-      class="  basic borderColor_default  input"
+      class="basic borderColor_default input"
       data-id="textBox"
       data-selector-id="textBox"
       data-test-id="textBox"

package/lib/setup/header/Views/__tests__/__snapshots__/Views.spec.js.snap

@@ -10,7 +10,7 @@ exports[`Views rendering the defult props 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-list22    "
+        class="zd_font_icons basic icon-list22"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -18,12 +18,12 @@ exports[`Views rendering the defult props 1`] = `
       />
     </span>
     <span
-      class="icon last  "
+      class="icon last"
       data-title="Grid View"
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-grid    "
+        class="zd_font_icons basic icon-grid"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"

package/lib/setup/table/Table/__tests__/__snapshots__/Table.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`Table rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="flex cover coldir"
+    class="flex fullSize column"
     data-id="table"
     data-selector-id="container"
     data-test-id="table"

package/lib/setup/table/TableBody/__tests__/__snapshots__/TableBody.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`TableBody rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="grow basis shrinkOff scrolly"
+    class="flexible basis_zero noShrink scroll_vertical"
     data-id="boxComponent"
     data-selector-id="box"
     data-test-id="boxComponent"

package/lib/setup/table/TableData/TableData.js

@@ -67,7 +67,7 @@ var TableData = /*#__PURE__*/function (_React$Component) {
         flexible: flexible,
         shrink: shrink,
         eleRef: eleRef,
-        className: "".concat(customClass, " ").concat(_SetupTableDataModule["default"].container, " ").concat(type ? _SetupTableDataModule["default"][type] : '', " ").concat(align ? _SetupTableDataModule["default"][align] ? _SetupTableDataModule["default"][align] : '' : '')
+        className: "".concat(_SetupTableDataModule["default"].container, " ").concat(type ? _SetupTableDataModule["default"][type] : '', " ").concat(align ? _SetupTableDataModule["default"][align] ? _SetupTableDataModule["default"][align] : '' : '', " ").concat(customClass, " ")
       }, children);
     }
   }]);

package/lib/setup/table/TableData/__tests__/__snapshots__/TableData.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`TableData rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="container   shrinkOff"
+    class="noShrink container"
     data-id="tableData"
     data-selector-id="box"
     data-test-id="tableData"

package/lib/setup/table/TableHead/TableHead.js

@@ -60,7 +60,7 @@ var TableHead = /*#__PURE__*/function (_React$Component) {
           onMouseLeave = _this$props.onMouseLeave,
           dataId = _this$props.dataId;
       return /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        className: "".concat(_SetupTableHeadModule["default"].container, " ").concat(className, " "),
+        className: "".concat(_SetupTableHeadModule["default"].container, " ").concat(className),
         dataId: dataId,
         onMouseEnter: onMouseEnter,
         onMouseLeave: onMouseLeave

package/lib/setup/table/TableHead/__tests__/__snapshots__/TableHead.spec.js.snap

@@ -3,13 +3,13 @@
 exports[`TableHead rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="container   shrinkOff"
+    class="noShrink container"
     data-id="tableHead"
     data-selector-id="box"
     data-test-id="tableHead"
   >
     <div
-      class="subContainer flex cover rowdir vCenter"
+      class="flex fullSize row alignItems_center subContainer"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"

package/lib/setup/table/TableRow/__tests__/__snapshots__/TableRow.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`TableRow rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="container  flex rowdir vCenter"
+    class="flex row alignItems_center container"
     data-id="tableRow"
     data-selector-id="container"
     data-test-id="tableRow"

package/lib/setup/table/Text/Text.js

@@ -67,7 +67,7 @@ var Text = /*#__PURE__*/function (_React$Component) {
           target = _this$props.target;
       title = title || text;
       var textComponent;
-      var classNameCheck = "".concat(type ? _TableTextModule["default"][type] : '', "  ").concat(_TableTextModule["default"]["".concat(palette, "Color")], " ").concat(_TableTextModule["default"][size], " ").concat(className, " ").concat(onClick ? _TableTextModule["default"].isClickable : '');
+      var classNameCheck = "".concat(type ? _TableTextModule["default"][type] : '', "  ").concat(_TableTextModule["default"]["".concat(palette, "Color")], " ").concat(_TableTextModule["default"][size], " ").concat(onClick ? _TableTextModule["default"].isClickable : '', " ").concat(className);
 
       if (url) {
         textComponent = /*#__PURE__*/_react["default"].createElement(_Link["default"], {

package/lib/setup/table/Text/__tests__/__snapshots__/Text.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`Text Should render size  - bold 1`] = `
 <DocumentFragment>
   <div
-    class="bold  defaultColor small  "
+    class="bold defaultColor small"
     data-id="text"
     data-test-id="text"
   />
@@ -13,7 +13,7 @@ exports[`Text Should render size  - bold 1`] = `
 exports[`Text Should render size  - heading 1`] = `
 <DocumentFragment>
   <div
-    class="heading  defaultColor small  "
+    class="heading defaultColor small"
     data-id="text"
     data-test-id="text"
   />
@@ -23,7 +23,7 @@ exports[`Text Should render size  - heading 1`] = `
 exports[`Text Should render size  - semiBold 1`] = `
 <DocumentFragment>
   <div
-    class="semiBold  defaultColor small  "
+    class="semiBold defaultColor small"
     data-id="text"
     data-test-id="text"
   />
@@ -33,7 +33,7 @@ exports[`Text Should render size  - semiBold 1`] = `
 exports[`Text rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="  defaultColor small  "
+    class="defaultColor small"
     data-id="text"
     data-test-id="text"
   />
@@ -43,7 +43,7 @@ exports[`Text rendering the defult props 1`] = `
 exports[`Text rendering the url 1`] = `
 <DocumentFragment>
   <a
-    class="container    defaultColor small  "
+    class="container defaultColor small"
     data-id="text"
     data-test-id="text"
     href="www.google.com"

package/lib/svg/__tests__/__snapshots__/PlusIcon.spec.js.snap

@@ -4,7 +4,7 @@ exports[`PlusIcon rendering the defult props 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="true"
-    class="  default svgCenter "
+    class="default svgCenter"
   >
     <svg
       data-id="SVG"

package/lib/svg/__tests__/__snapshots__/SnippetIcon.spec.js.snap

@@ -4,7 +4,7 @@ exports[`SnippetIcon rendering the defult props 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="true"
-    class="  default svgCenter "
+    class="default svgCenter"
   >
     <svg
       data-id="SVG"

package/lib/svg/__tests__/__snapshots__/TemplateIcon.spec.js.snap

@@ -4,7 +4,7 @@ exports[`TemplateIcon rendering the defult props 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="true"
-    class="  default svgCenter "
+    class="default svgCenter"
   >
     <svg
       data-id="SVG"