@zohodesk/dot 1.0.0-temp-232.1 → 1.0.0-temp-233.1

package/lib/version2/lookup/AlertHeader/css/cssJSLogic.js

@@ -5,7 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = cssJSLogic;
 
-var _utils = require("@zohodesk/utils");
+var _compileClassNames2 = _interopRequireDefault(require("@zohodesk/utils/es/compileClassNames"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
@@ -16,8 +18,10 @@ function cssJSLogic(_ref) {
       style = _ref.style;
   var children = props.children,
       type = props.type,
-      title = props.title;
-  var alertHeaderContainerClass = (0, _utils.compileClassNames)((_compileClassNames = {}, _defineProperty(_compileClassNames, style.container, true), _defineProperty(_compileClassNames, style.headerLayout, !!title || !!children), _defineProperty(_compileClassNames, style[type], !!type), _compileClassNames));
+      title = props.title,
+      customClass = props.customClass;
+  var container = customClass.container;
+  var alertHeaderContainerClass = (0, _compileClassNames2["default"])((_compileClassNames = {}, _defineProperty(_compileClassNames, style.container, true), _defineProperty(_compileClassNames, style.headerLayout, !!title || !!children), _defineProperty(_compileClassNames, style[type], !!type), _defineProperty(_compileClassNames, container, !!container), _compileClassNames));
   return {
     alertHeaderContainerClass: alertHeaderContainerClass
   };

package/lib/version2/lookup/AlertHeader/props/defaultProps.js

@@ -4,11 +4,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+
+var _constants = require("@zohodesk/dotkit/es/utils/constants");
+
 var _default = {
   needIcon: true,
   type: 'danger',
   breakChildren: false,
   dataId: 'alertHeader',
+  isDraggable: true,
+  customClass: _constants.DUMMY_OBJECT,
   dragBoundaryLimit: {
     top: 0,
     left: 50,

package/lib/version2/lookup/AlertHeader/props/propTypes.js

@@ -18,6 +18,15 @@ var _default = {
   onClose: _propTypes["default"].func,
   title: _propTypes["default"].string,
   type: _propTypes["default"].oneOf(['success', 'error', 'danger', 'warning', 'info', 'notification']),
+  isDraggable: _propTypes["default"].bool,
+  customClass: _propTypes["default"].shape({
+    container: _propTypes["default"].string,
+    title: _propTypes["default"].string,
+    iconContainer: _propTypes["default"].string,
+    close: _propTypes["default"].string
+  }),
+  renderSecondaryContent: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].node]),
+  renderRightActions: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].node]),
   htmlId: _propTypes["default"].string,
   customStyle: _propTypes["default"].object,
   dragBoundaryLimit: _propTypes["default"].shape({

package/lib/version2/lookup/AlertLookup/AlertLookup.js

@@ -13,19 +13,23 @@ var _defaultProps = require("./props/defaultProps");
 
 var _propTypes = require("./props/propTypes");
 
+var _Button = _interopRequireDefault(require("@zohodesk/components/es/Button/Button"));
+
+var _Layout = require("@zohodesk/components/es/Layout");
+
+var _IdProvider = require("@zohodesk/components/es/Provider/IdProvider");
+
+var _renderNode = _interopRequireDefault(require("@zohodesk/utils/es/renderNode"));
+
 var _Lookup = _interopRequireDefault(require("../../../lookup/Lookup/Lookup"));
 
 var _AlertHeader = _interopRequireDefault(require("../AlertHeader/AlertHeader"));
 
-var _Button = _interopRequireDefault(require("@zohodesk/components/es/Button/Button"));
-
 var _Section = _interopRequireDefault(require("../../../lookup/Section/Section"));
 
 var _FormAction = _interopRequireDefault(require("../../../FormAction/FormAction"));
 
-var _Layout = require("@zohodesk/components/es/Layout");
-
-var _IdProvider = require("@zohodesk/components/es/Provider/IdProvider");
+var _cssUtility = require("@dot-system/css-utility");
 
 var _AlertLookupNewModule = _interopRequireDefault(require("./AlertLookupNew.module.css"));
 
@@ -150,6 +154,7 @@ var AlertLookup = /*#__PURE__*/function (_Component) {
           needIcon = _this$props.needIcon,
           a11y = _this$props.a11y,
           customProps = _this$props.customProps,
+          renderFooterNode = _this$props.renderFooterNode,
           align = _this$props.align,
           childAnimationName = _this$props.childAnimationName,
           isHtmlContent = _this$props.isHtmlContent,
@@ -212,7 +217,7 @@ var AlertLookup = /*#__PURE__*/function (_Component) {
       }, AlertHeaderProps), headerChildren ? headerChildren() : null)), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true
       }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_AlertLookupNewModule["default"].innerSection, " ").concat(_AlertLookupNewModule["default"]["".concat(scroll, "Scroll")] ? _AlertLookupNewModule["default"]["".concat(scroll, "Scroll")] : '', " ").concat(sectionClass)
+        className: (0, _cssUtility.cn)("".concat(_AlertLookupNewModule["default"].innerSection, " ").concat(_AlertLookupNewModule["default"]["".concat(scroll, "Scroll")] ? _AlertLookupNewModule["default"]["".concat(scroll, "Scroll")] : '', " ").concat(sectionClass))
       }, children ? children : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, isHtmlContent && message ? /*#__PURE__*/_react["default"].createElement("div", {
         id: ariaMessageId,
         dangerouslySetInnerHTML: {
@@ -222,10 +227,10 @@ var AlertLookup = /*#__PURE__*/function (_Component) {
         id: ariaMessageId
       }, message), confirmationMessage && /*#__PURE__*/_react["default"].createElement("div", {
         id: ariaConfirmMsgId,
-        className: "".concat(message ? _AlertLookupNewModule["default"].confirmMsgText : '')
-      }, confirmationMessage)))), submitText || onSubmitClick || cancelText || onCancelClick ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, /*#__PURE__*/_react["default"].createElement("div", {
-        className: _AlertLookupNewModule["default"].footer
-      }, /*#__PURE__*/_react["default"].createElement(_FormAction["default"], {
+        className: (0, _cssUtility.cn)("".concat(message ? _AlertLookupNewModule["default"].confirmMsgText : ''))
+      }, confirmationMessage)))), renderFooterNode || submitText || onSubmitClick || cancelText || onCancelClick ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, /*#__PURE__*/_react["default"].createElement("div", {
+        className: (0, _cssUtility.cn)(_AlertLookupNewModule["default"].footer)
+      }, (0, _renderNode["default"])(renderFooterNode) || /*#__PURE__*/_react["default"].createElement(_FormAction["default"], {
         size: "small",
         paddingLeftSize: "xmedium"
       }, /*#__PURE__*/_react["default"].createElement(_Button["default"], _extends({

package/lib/version2/lookup/AlertLookup/__tests__/__snapshots__/AlertLookup.spec.js.snap

@@ -8,7 +8,7 @@ exports[`AlertLookup rendering isActive is true defult 1`] = `
     style="z-index: 4;"
   >
     <div
-      class="flex cover rowdir hCenter"
+      class="flex fullSize row justifyContent_center"
       data-id="reactFreezeLayer"
       data-selector-id="container"
       data-test-id="reactFreezeLayer"

package/lib/version2/lookup/AlertLookup/props/defaultProps.js

@@ -11,6 +11,7 @@ var defaultProps = {
   dataId: 'alertPopup',
   isDefaultFocus: true,
   customProps: {},
+  renderFooterNode: null,
   align: 'top',
   childAnimationName: 'flyDown',
   isHtmlContent: false,

package/lib/version2/lookup/AlertLookup/props/propTypes.js

@@ -37,6 +37,7 @@ var propTypes = {
     PrimaryButtonProps: _propTypes["default"].object,
     SecondaryButtonProps: _propTypes["default"].object
   }),
+  renderFooterNode: _propTypes["default"].oneOfType([_propTypes["default"].node, _propTypes["default"].func]),
   align: _propTypes["default"].oneOf(['top', 'vertical']),
   childAnimationName: _propTypes["default"].oneOf(['expand', 'flyDown']),
   isHtmlContent: _propTypes["default"].bool,

package/lib/version2/notification/DesktopNotification/DesktopNotification.js

@@ -28,6 +28,8 @@ var _DesktopNotificationHeader = _interopRequireDefault(require("../DesktopNotif
 
 var _CustomResponsive = require("@zohodesk/components/es/Responsive/CustomResponsive");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _DesktopNotificationModule = _interopRequireDefault(require("./DesktopNotification.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -132,7 +134,7 @@ function DesktopNotificationUI(props) {
   }
 
   return /*#__PURE__*/_react["default"].createElement("div", {
-    className: _DesktopNotificationModule["default"].parentElement,
+    className: (0, _cssUtility.cn)(_DesktopNotificationModule["default"].parentElement),
     style: needAutoZindex && isAnimate ? {
       zIndex: "".concat(Zindex)
     } : {},
@@ -143,7 +145,7 @@ function DesktopNotificationUI(props) {
   }, function (_ref3) {
     var uptoTablet = _ref3.uptoTablet;
     return /*#__PURE__*/_react["default"].createElement(_Layout.Container, _extends({
-      className: "".concat(_DesktopNotificationModule["default"].container, " ").concat(isAnimate ? animateClass : animateRemoveClass, "\n            ").concat(isShrinkView ? _DesktopNotificationModule["default"].globalNotify : '', " ").concat(containerClass, "  ").concat(uptoTablet ? _DesktopNotificationModule["default"].tapWidth : _DesktopNotificationModule["default"]["".concat(size)]),
+      className: "".concat(_DesktopNotificationModule["default"].container, " ").concat(isAnimate ? animateClass : animateRemoveClass, "\n            ").concat(isShrinkView ? _DesktopNotificationModule["default"].globalNotify : '', "  ").concat(uptoTablet ? _DesktopNotificationModule["default"].tapWidth : _DesktopNotificationModule["default"]["".concat(size)], " ").concat(containerClass, " "),
       isCover: false,
       dataId: dataId,
       isInline: uiVariantTwo
@@ -161,17 +163,17 @@ function DesktopNotificationUI(props) {
     }, uiVariantOne && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
       flexible: true
     }, /*#__PURE__*/_react["default"].createElement("div", {
-      className: "".concat(_DesktopNotificationModule["default"].section, " ").concat(_DesktopNotificationModule["default"].infoText)
+      className: (0, _cssUtility.cn)("".concat(_DesktopNotificationModule["default"].section, " ").concat(_DesktopNotificationModule["default"].infoText))
     }, subTitle && /*#__PURE__*/_react["default"].createElement("div", {
-      className: "".concat(_DesktopNotificationModule["default"].subTitle, " ").concat(info || secondaryInfo ? _DesktopNotificationModule["default"].subTitleMargin : '')
+      className: (0, _cssUtility.cn)("".concat(_DesktopNotificationModule["default"].subTitle, " ").concat(info || secondaryInfo ? _DesktopNotificationModule["default"].subTitleMargin : ''))
     }, subTitle), info && /*#__PURE__*/_react["default"].createElement("div", null, info), secondaryInfo && /*#__PURE__*/_react["default"].createElement("div", {
-      className: "".concat(info ? _DesktopNotificationModule["default"].secondaryInfo : '')
+      className: (0, _cssUtility.cn)("".concat(info ? _DesktopNotificationModule["default"].secondaryInfo : ''))
     }, secondaryInfo))), getSectionContainer && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
       flexible: true
     }, getSectionContainer()), submitText || cancelText ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, /*#__PURE__*/_react["default"].createElement("div", {
-      className: _DesktopNotificationModule["default"].footer
+      className: (0, _cssUtility.cn)(_DesktopNotificationModule["default"].footer)
     }, isMore ? /*#__PURE__*/_react["default"].createElement("div", {
-      className: "".concat(_DesktopNotificationModule["default"].message),
+      className: (0, _cssUtility.cn)("".concat(_DesktopNotificationModule["default"].message)),
       tagName: "p"
     }, message) : null, /*#__PURE__*/_react["default"].createElement(_FormAction["default"], {
       size: "small",

package/lib/version2/notification/DesktopNotification/__tests__/__snapshots__/DesktopNotification.spec.js.snap

@@ -8,20 +8,19 @@ exports[`DesktopNotification rendering the defult props 1`] = `
     style="z-index: 4;"
   >
     <div
-      class="container leftanimate
-             undefined  undefined flex coldir"
+      class="flex column container leftanimate"
       data-id="toastMessage"
       data-selector-id="container"
       data-test-id="toastMessage"
     >
       <div
-        class="shrinkOff"
+        class="noShrink"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       >
         <div
-          class="container primary_header undefined flex rowdir wrap vCenter"
+          class="flex row wrap alignItems_center container primary_header"
           data-id="containerComponent"
           data-selector-id="container"
           data-test-id="containerComponent"
@@ -101,37 +100,37 @@ exports[`DesktopNotification rendering the defult props 1`] = `
             </div>
           </div>
           <div
-            class="grow basis shrinkOff"
+            class="flexible basis_zero noShrink"
             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="shrinkOn"
+                class="shrink"
                 data-id="boxComponent"
                 data-selector-id="box"
                 data-test-id="boxComponent"
               >
                 <h1
-                  class="reset size18 lineheight_1_2 font_bold title wordBreak_breakWord"
+                  class="reset size18 lineheight_1_2 font_bold wordBreak_breakWord title"
                 />
               </div>
             </div>
           </div>
           <div
-            class="close shrinkOff"
+            class="noShrink close"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
           >
             <div
-              class="close light  inflex rowdir both"
+              class="inlineFlex row alignItems_center justifyContent_center close light"
               data-id="toastMessage_close"
               data-selector-id="container"
               data-test-id="toastMessage_close"
@@ -139,14 +138,14 @@ exports[`DesktopNotification rendering the defult props 1`] = `
               tabindex="0"
             >
               <div
-                class="shrinkOff"
+                class="noShrink"
                 data-id="boxComponent"
                 data-selector-id="box"
                 data-test-id="boxComponent"
               >
                 <i
                   aria-hidden="true"
-                  class="zd_font_icons basic icon-Cross fbold closeIcon  "
+                  class="zd_font_icons basic icon-Cross fbold closeIcon"
                   data-id="fontIcon"
                   data-selector-id="fontIcon"
                   data-test-id="fontIcon"
@@ -158,13 +157,13 @@ exports[`DesktopNotification rendering the defult props 1`] = `
         </div>
       </div>
       <div
-        class="shrinkOff"
+        class="noShrink"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       >
         <div
-          class="flex cover coldir"
+          class="flex fullSize column"
           data-id="containerComponent"
           data-selector-id="container"
           data-test-id="containerComponent"

package/lib/version2/notification/DesktopNotificationHeader/DesktopNotificationHeader.js

@@ -23,6 +23,8 @@ var _CustomResponsive = require("@zohodesk/components/es/Responsive/CustomRespon
 
 var _Typography = _interopRequireDefault(require("@zohodesk/components/es/Typography/Typography"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _DesktopNotificationHeaderModule = _interopRequireDefault(require("./DesktopNotificationHeader.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -98,7 +100,7 @@ var DesktopNotificationHeader = /*#__PURE__*/function (_Component) {
       }, function (_ref2) {
         var uptoTablet = _ref2.uptoTablet;
         return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, needIcon ? /*#__PURE__*/_react["default"].createElement("div", {
-          className: _DesktopNotificationHeaderModule["default"].iconContainer
+          className: (0, _cssUtility.cn)(_DesktopNotificationHeaderModule["default"].iconContainer)
         }, /*#__PURE__*/_react["default"].createElement(_AlertIcons["default"], {
           type: type
         })) : null, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {

package/lib/version2/notification/DesktopNotificationHeader/__tests__/__snapshots__/DesktopNotificationHeader.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`DesktopNotificationHeader rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="container primary_header undefined flex rowdir wrap vCenter"
+    class="flex row wrap alignItems_center container primary_header"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
@@ -83,51 +83,51 @@ exports[`DesktopNotificationHeader rendering the defult props 1`] = `
       </div>
     </div>
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       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="shrinkOn"
+          class="shrink"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <h1
-            class="reset size18 lineheight_1_2 font_bold title wordBreak_breakWord"
+            class="reset size18 lineheight_1_2 font_bold wordBreak_breakWord title"
           />
         </div>
       </div>
     </div>
     <div
-      class="close shrinkOff"
+      class="noShrink close"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="close light  inflex rowdir both"
+        class="inlineFlex row alignItems_center justifyContent_center close light"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
         tabindex="0"
       >
         <div
-          class="shrinkOff"
+          class="noShrink"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <i
             aria-hidden="true"
-            class="zd_font_icons basic icon-Cross fbold closeIcon  "
+            class="zd_font_icons basic icon-Cross fbold closeIcon"
             data-id="fontIcon"
             data-selector-id="fontIcon"
             data-test-id="fontIcon"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/dot",
-  "version": "1.0.0-temp-232.1",
+  "version": "1.0.0-temp-233.1",
   "main": "lib/index",
   "module": "es/index.js",
   "private": false,
@@ -17,7 +17,7 @@
     "LIBRARY"
   ],
   "scripts": {
-    "clean": "react-cli clean lib es coverage assets && mkdir assets",
+    "clean": "cdt clean lib es coverage assets && mkdir assets",
     "dubCheck": "npx z-node-plugins dub:check ../components/src ../internal/desk-components/src node_modules/@zohodesk/icons/es node_modules/@zohodesk/variables/es node_modules/@zohodesk/svg/es",
     "build:lib": "cbt build:lib src,assets lib,assets",
     "build:es": "cbt build:es src,assets es,assets",
@@ -25,8 +25,6 @@
     "build": "npm run theme:validate && npm run build:lib && npm run build:es && npm run cssVariableConvert ",
     "build:watch": "npm run build:es:watch --module:mode=dev -- -w",
     "prepare": "npm run clean && npm run css:build",
-    "lint": "react-cli lint",
-    "lintAll": "react-cli lint ./src",
     "lintAllFix": "npm run lintAll --eslint:fix=true",
     "customTest": "node ./__testUtils__/runTest.js",
     "test": "react-cli test",
@@ -36,9 +34,9 @@
     "common_package_build": "cd ../common && npm run build && cd ../dot",
     "prepublishOnly": "node ../prePublish.js && npm run downloadOnly && npm run css:review  && npm run review:props",
     "postpublish": "node ../postPublish.js",
-    "test-clean": "react-cli clean ./coverage && react-cli clean ./unittest react-cli clean ./es && react-cli clean ./lib &&  react-cli clean ./package-lock.json &&  react-cli clean ./result.json",
+    "test-clean": "cdt clean ./coverage  ./unittest  ./es  ./lib  ./package-lock.json ./result.json",
     "download": "npm run downloadOnly  && cd ../ && npm run download",
-    "downloadOnly": "react-cli clean ./node_modules ./package-lock.json && npm install --legacy-peer-deps",
+    "downloadOnly": "cdt clean ./node_modules ./package-lock.json && npm install --legacy-peer-deps",
     "expublish": "node ../publish.js -- exp",
     "css:lineheight:validate": "npx z-node-plugins lineheight:errorcheck ./src/",
     "variable:addignore": "npx css-variable-migrator addignore ./src",
@@ -65,39 +63,41 @@
     "@testing-library/react": "^11.2.5",
     "@testing-library/react-hooks": "^7.0.2",
     "@testing-library/user-event": "^13.0.10",
-    "@zohodesk-private/color-variable-preprocessor": "1.3.1",
+    "@zohodesk-private/color-variable-preprocessor": "1.3.3",
     "@zohodesk-private/css-variable-migrator": "1.0.11",
-    "@zohodesk-private/node-plugins": "1.1.14",
+    "@zohodesk-private/node-plugins": "1.1.15",
     "@zohodesk-private/react-prop-validator": "1.2.3",
     "@zohodesk/a11y": "2.3.9",
     "@zohodesk/client_build_tool": "0.0.23",
-    "@zohodesk/components": "1.0.0-temp-255",
-    "@zohodesk/dotkit": "1.0.9",
+    "@zohodesk-private/client_deployment_tool": "0.0.7",
+    "@zohodesk/components": "1.6.23",
+    "@zohodesk/dotkit": "1.0.10",
     "@zohodesk/hooks": "2.0.8",
-    "@zohodesk/icons": "1.3.3",
-    "@zohodesk/layout": "3.1.0",
+    "@zohodesk/icons": "1.3.11",
+    "@zohodesk/layout": "3.2.1",
     "@zohodesk/react-cli": "1.1.27",
-    "@zohodesk/svg": "1.3.5",
+    "@zohodesk/svg": "1.3.10",
     "@zohodesk/utils": "1.3.16",
-    "@zohodesk/variables": "1.3.1",
+    "@zohodesk/variables": "1.3.2",
     "@zohodesk/virtualizer": "1.0.13",
     "postcss-discard-comments": "^7.0.5",
     "react-sortable-hoc": "^0.8.3",
     "velocity-react": "1.4.3",
+    "@zohodesk/jsx_attribute_wrapper": "1.0.0",
     "@dot-system/css-utility": "0.1.1"
   },
   "peerDependencies": {
     "velocity-react": "1.4.3",
-    "@zohodesk/variables": "1.3.1",
-    "@zohodesk/components": "1.0.0-temp-255",
-    "@zohodesk/icons": "1.3.3",
-    "@zohodesk/svg": "1.3.5",
+    "@zohodesk/variables": "1.3.2",
+    "@zohodesk/components": "1.6.23",
+    "@zohodesk/icons": "1.3.11",
+    "@zohodesk/svg": "1.3.10",
     "@zohodesk/virtualizer": "1.0.13",
     "react-sortable-hoc": "^0.8.3",
     "@zohodesk/hooks": "2.0.8",
     "@zohodesk/utils": "1.3.16",
     "@zohodesk/a11y": "2.3.9",
-    "@zohodesk/layout": "3.1.0",
+    "@zohodesk/layout": "3.2.1",
     "@dot-system/css-utility": "0.1.1"
   }
-}
+}