@zohodesk/components 1.6.20 → 1.6.21

package/lib/css.js

@@ -18,8 +18,6 @@ require("./common/transition.module.css");
 
 require("./common/common.module.css");
 
-require("./Layout/Layout.module.css");
-
 require("./Avatar/Avatar.module.css");
 
 require("./AvatarTeam/AvatarTeam.module.css");

package/lib/shared/ArrowIcon/__tests__/__snapshots__/ArrowIcon.spec.js.snap

@@ -4,7 +4,7 @@ exports[`ArrowIcon Should be render isActive is true 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="true"
-    class="arrowIcon  active    inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center arrowIcon  active"
     data-id="undefined_downIcon"
     data-selector-id="container"
     data-test-id="undefined_downIcon"
@@ -25,7 +25,7 @@ exports[`ArrowIcon Should be render isDisabled is true 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="true"
-    class="arrowIcon   disabled   inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center arrowIcon   disabled"
     data-id="undefined_downIcon"
     data-selector-id="container"
     data-test-id="undefined_downIcon"
@@ -46,7 +46,7 @@ exports[`ArrowIcon Should be render isReadOnly is true 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="true"
-    class="arrowIcon    readonly  inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center arrowIcon    readonly"
     data-id="undefined_downIcon"
     data-selector-id="container"
     data-test-id="undefined_downIcon"
@@ -67,7 +67,7 @@ exports[`ArrowIcon Should be render isRotated is true 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="true"
-    class="arrowIcon rotated     inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center arrowIcon rotated"
     data-id="undefined_downIcon"
     data-selector-id="container"
     data-test-id="undefined_downIcon"
@@ -88,7 +88,7 @@ exports[`ArrowIcon Should be render with a11yAttributes 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="true"
-    class="arrowIcon      inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center arrowIcon"
     data-a11y-focus="true"
     data-id="undefined_downIcon"
     data-selector-id="container"
@@ -110,7 +110,7 @@ exports[`ArrowIcon Should be render with customClass 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="true"
-    class="arrowIcon     arrowIcon_containerClass inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center arrowIcon     arrowIcon_containerClass"
     data-id="undefined_downIcon"
     data-selector-id="container"
     data-test-id="undefined_downIcon"
@@ -131,7 +131,7 @@ exports[`ArrowIcon Should be render with customProps 1`] = `
 <DocumentFragment>
   <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="hereIsTestId"
@@ -152,7 +152,7 @@ exports[`ArrowIcon Should be render with dataId 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="true"
-    class="arrowIcon      inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center arrowIcon"
     data-id="ArrowIcon-test-dataId_downIcon"
     data-selector-id="container"
     data-test-id="ArrowIcon-test-dataId_downIcon"
@@ -181,7 +181,7 @@ exports[`ArrowIcon Should be render with tagAttributes 1`] = `
 <DocumentFragment>
   <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"
@@ -203,7 +203,7 @@ exports[`ArrowIcon rendering the defult props 1`] = `
 <DocumentFragment>
   <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"

package/lib/shared/InputFieldLine/__tests__/__snapshots__/InputFieldLine.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`InputFieldLine Should be render hasEffect is false 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    flex rowdir"
+    class="flex row varClass customContainer   border_bottom effect borderColor_default hasBorder"
     data-selector-id="container"
     data-title=""
   />
@@ -13,7 +13,7 @@ exports[`InputFieldLine Should be render hasEffect is false 1`] = `
 exports[`InputFieldLine Should be render hasPadding is true 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    flex rowdir"
+    class="flex row varClass customContainer   border_bottom effect borderColor_default hasBorder"
     data-selector-id="container"
     data-title=""
   />
@@ -23,7 +23,7 @@ exports[`InputFieldLine Should be render hasPadding is true 1`] = `
 exports[`InputFieldLine Should be render isActive is true 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder active   flex rowdir"
+    class="flex row varClass customContainer   border_bottom effect borderColor_default hasBorder active"
     data-selector-id="container"
     data-title=""
   />
@@ -33,7 +33,7 @@ exports[`InputFieldLine Should be render isActive is true 1`] = `
 exports[`InputFieldLine Should be render isDisabled is true 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom disabled borderColor_default hasBorder    flex rowdir"
+    class="flex row varClass customContainer   border_bottom disabled borderColor_default hasBorder"
     data-selector-id="container"
     data-title=""
   />
@@ -43,7 +43,7 @@ exports[`InputFieldLine Should be render isDisabled is true 1`] = `
 exports[`InputFieldLine Should be render isReadOnly is true 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    flex rowdir"
+    class="flex row varClass customContainer   border_bottom effect borderColor_default hasBorder"
     data-selector-id="container"
     data-title=""
   />
@@ -53,7 +53,7 @@ exports[`InputFieldLine Should be render isReadOnly is true 1`] = `
 exports[`InputFieldLine Should be render with title 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    flex rowdir"
+    class="flex row varClass customContainer   border_bottom effect borderColor_default hasBorder"
     data-selector-id="container"
     data-title="InputFieldLine Test Title"
   />
@@ -63,7 +63,7 @@ exports[`InputFieldLine Should be render with title 1`] = `
 exports[`InputFieldLine Should render border - all 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_all effect borderColor_default hasBorder    flex rowdir"
+    class="flex row varClass customContainer   border_all effect borderColor_default hasBorder"
     data-selector-id="container"
     data-title=""
   />
@@ -73,7 +73,7 @@ exports[`InputFieldLine Should render border - all 1`] = `
 exports[`InputFieldLine Should render border - bottom 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    flex rowdir"
+    class="flex row varClass customContainer   border_bottom effect borderColor_default hasBorder"
     data-selector-id="container"
     data-title=""
   />
@@ -83,7 +83,7 @@ exports[`InputFieldLine Should render border - bottom 1`] = `
 exports[`InputFieldLine Should render border - none 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer    effect     flex rowdir"
+    class="flex row varClass customContainer    effect"
     data-selector-id="container"
     data-title=""
   />
@@ -93,7 +93,7 @@ exports[`InputFieldLine Should render border - none 1`] = `
 exports[`InputFieldLine Should render borderColor - dark 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_dark hasBorder    flex rowdir"
+    class="flex row varClass customContainer   border_bottom effect borderColor_dark hasBorder"
     data-selector-id="container"
     data-title=""
   />
@@ -103,7 +103,7 @@ exports[`InputFieldLine Should render borderColor - dark 1`] = `
 exports[`InputFieldLine Should render borderColor - default 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    flex rowdir"
+    class="flex row varClass customContainer   border_bottom effect borderColor_default hasBorder"
     data-selector-id="container"
     data-title=""
   />
@@ -113,7 +113,7 @@ exports[`InputFieldLine Should render borderColor - default 1`] = `
 exports[`InputFieldLine Should render borderColor - error 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_error hasBorder    flex rowdir"
+    class="flex row varClass customContainer   border_bottom effect borderColor_error hasBorder"
     data-selector-id="container"
     data-title=""
   />
@@ -123,7 +123,7 @@ exports[`InputFieldLine Should render borderColor - error 1`] = `
 exports[`InputFieldLine Should render borderColor - transparent 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_transparent hasBorder    flex rowdir"
+    class="flex row varClass customContainer   border_bottom effect borderColor_transparent hasBorder"
     data-selector-id="container"
     data-title=""
   />
@@ -133,7 +133,7 @@ exports[`InputFieldLine Should render borderColor - transparent 1`] = `
 exports[`InputFieldLine Should render customClass 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder   inputFieldLine-custom-class flex rowdir"
+    class="flex row varClass customContainer   border_bottom effect borderColor_default hasBorder   inputFieldLine-custom-class"
     data-selector-id="container"
     data-title=""
   />
@@ -143,7 +143,7 @@ exports[`InputFieldLine Should render customClass 1`] = `
 exports[`InputFieldLine Should render customProps 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    flex rowdir"
+    class="flex row varClass customContainer   border_bottom effect borderColor_default hasBorder"
     data-selector-id="container"
     data-test="inputFieldLine-test"
     data-title=""
@@ -154,7 +154,7 @@ exports[`InputFieldLine Should render customProps 1`] = `
 exports[`InputFieldLine Should render dataId 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    flex rowdir"
+    class="flex row varClass customContainer   border_bottom effect borderColor_default hasBorder"
     data-id="inputFieldLine-test-id"
     data-selector-id="container"
     data-test-id="inputFieldLine-test-id"
@@ -166,7 +166,7 @@ exports[`InputFieldLine Should render dataId 1`] = `
 exports[`InputFieldLine Should render size  - medium 1`] = `
 <DocumentFragment>
   <div
-    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=""
   />
@@ -176,7 +176,7 @@ exports[`InputFieldLine Should render size  - medium 1`] = `
 exports[`InputFieldLine Should render size  - xmedium 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer xmedium padding_xmedium border_bottom effect borderColor_default hasBorder    flex rowdir scrolly"
+    class="flex row scroll_vertical varClass customContainer xmedium padding_xmedium border_bottom effect borderColor_default hasBorder"
     data-selector-id="container"
     data-title=""
   />
@@ -186,7 +186,7 @@ exports[`InputFieldLine Should render size  - xmedium 1`] = `
 exports[`InputFieldLine rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    flex rowdir"
+    class="flex row varClass customContainer   border_bottom effect borderColor_default hasBorder"
     data-selector-id="container"
     data-title=""
   />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.6.20",
+  "version": "1.6.21",
   "main": "es/index.js",
   "module": "es/index.js",
   "private": false,
@@ -82,8 +82,8 @@
     "@zohodesk/docstool": "1.0.0-alpha-2",
     "@zohodesk/dotkit": "1.0.10",
     "@zohodesk/hooks": "2.0.8",
-    "@zohodesk/icons": "1.3.6",
-    "@zohodesk/layout": "3.2.0",
+    "@zohodesk/icons": "1.3.9",
+    "@zohodesk/layout": "3.2.1",
     "@zohodesk/svg": "1.3.8",
     "@zohodesk/utils": "1.3.16",
     "@zohodesk/variables": "1.3.2",
@@ -103,7 +103,7 @@
     "selectn": "1.1.2"
   },
   "peerDependencies": {
-    "@zohodesk/icons": "1.3.6",
+    "@zohodesk/icons": "1.3.9",
     "@zohodesk/variables": "1.3.2",
     "@zohodesk/svg": "1.3.8",
     "@zohodesk/virtualizer": "1.0.13",
@@ -112,7 +112,7 @@
     "@zohodesk/hooks": "2.0.8",
     "@zohodesk/utils": "1.3.16",
     "@zohodesk/a11y": "2.3.9",
-    "@zohodesk/layout": "3.2.0",
+    "@zohodesk/layout": "3.2.1",
     "@zohodesk/dotkit": "1.0.10",
     "color": "4.2.3",
     "@dot-system/css-utility": "0.1.1"

package/es/Layout/Layout.module.css

@@ -1,336 +0,0 @@
-.flex {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.inflex {
-  display: inline-flex;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-}
-
-.cover {
-  width: 100% ;
-  height: 100% ;
-}
-
-/* .flex {
-  -webkit-box-flex: 0;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-} */
-
-.wrap {
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-}
-
-.wrapReverse {
-  -ms-flex-wrap: wrap-reverse;
-  flex-wrap: wrap-reverse;
-}
-
-.coldir {
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-}
-
-.rowdir {
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.rowReverse {
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: reverse;
-  -webkit-flex-direction: row-reverse;
-  -ms-flex-direction: row-reverse;
-  flex-direction: row-reverse;
-}
-
-.colReverse {
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: reverse;
-  -webkit-flex-direction: column-reverse;
-  -ms-flex-direction: column-reverse;
-  flex-direction: column-reverse;
-}
-
-.grow {
-  -webkit-box-flex: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  min-height: 0 ;
-  min-width: 0 ;
-}
-
-.shrinkOff {
-  flex-shrink: 0;
-  -moz-flex-shrink: 0;
-  -webkit-flex-shrink: 0;
-  -ms-flex-shrink: 0;
-}
-
-.shrinkOn {
-  flex-shrink: 1;
-  -moz-flex-shrink: 1;
-  -webkit-flex-shrink: 1;
-  -ms-flex-shrink: 1;
-  min-width: 0 ;
-}
-
-.basis {
-  flex-basis: 0% ;
-  -webkit-flex-basis: 0%;
-  -moz-flex-basis: 0%;
-  -ms-flex-basis: 0%;
-}
-
-.basisAuto {
-  flex-basis: auto ;
-  -webkit-flex-basis: auto;
-  -moz-flex-basis: auto;
-  -ms-flex-basis: auto;
-}
-
-.scrolly {
-  overflow-y: auto;
-  overflow-x: hidden;
-}
-
-.scrollx {
-  overflow-x: auto;
-  overflow-y: hidden;
-}
-
-.scrollnone {
-  overflow: hidden;
-}
-
-.scrollboth {
-  overflow: auto;
-}
-
-.preventScrollBubbleX {
-  overscroll-behavior-x: contain;
-}
-
-.preventScrollBubbleY {
-  overscroll-behavior-y: contain;
-}
-
-.preventScrollBubbleBoth {
-  overscroll-behavior: contain;
-}
-
-/*Column Specification*/
-
-.col-1 {
-  -ms-flex-preferred-size: 8.33333333%;
-  flex-basis: 8.33333333%;
-  max-width: 8.33333333%;
-}
-
-.col-2 {
-  -ms-flex-preferred-size: 16.66666667%;
-  flex-basis: 16.66666667%;
-  max-width: 16.66666667%;
-}
-
-.col-3 {
-  -ms-flex-preferred-size: 25%;
-  flex-basis: 25% ;
-  max-width: 25% ;
-}
-
-.col-4 {
-  -ms-flex-preferred-size: 33.33333333%;
-  flex-basis: 33.33333333%;
-  max-width: 33.33333333%;
-}
-
-.col-5 {
-  -ms-flex-preferred-size: 41.66666667%;
-  flex-basis: 41.66666667%;
-  max-width: 41.66666667%;
-}
-
-.col-6 {
-  -ms-flex-preferred-size: 50%;
-  flex-basis: 50% ;
-  max-width: 50% ;
-}
-
-.col-7 {
-  -ms-flex-preferred-size: 58.33333333%;
-  flex-basis: 58.33333333%;
-  max-width: 58.33333333%;
-}
-
-.col-8 {
-  -ms-flex-preferred-size: 66.66666667%;
-  flex-basis: 66.66666667%;
-  max-width: 66.66666667%;
-}
-
-.col-9 {
-  -ms-flex-preferred-size: 75%;
-  flex-basis: 75% ;
-  max-width: 75% ;
-}
-
-.col-10 {
-  -ms-flex-preferred-size: 83.33333333%;
-  flex-basis: 83.33333333%;
-  max-width: 83.33333333%;
-}
-
-.col-11 {
-  -ms-flex-preferred-size: 91.66666667%;
-  flex-basis: 91.66666667%;
-  max-width: 91.66666667%;
-}
-
-.col-12 {
-  -ms-flex-preferred-size: 100%;
-  flex-basis: 100% ;
-  max-width: 100% ;
-}
-
-.hCenter {
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-}
-
-.vCenter {
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.both {
-  composes: vCenter;
-  composes: hCenter;
-}
-
-.top {
-  -webkit-box-align: start;
-  -ms-flex-align: start;
-  align-items: flex-start;
-}
-
-.bottom {
-  -webkit-box-align: end;
-  -ms-flex-align: end;
-  align-items: flex-end;
-}
-
-.left {
-  -webkit-box-pack: start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-}
-
-.right {
-  -webkit-box-pack: end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.around {
-  -ms-flex-pack: distribute;
-  justify-content: space-around;
-}
-
-.between {
-  -webkit-box-pack: justify;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-}
-
-.baseline {
-  -webkit-box-align: baseline;
-  -ms-flex-align: baseline;
-  align-items: baseline;
-}
-
-.alignStart {
-  align-content: flex-start;
-}
-
-.alignEnd {
-  align-content: flex-end;
-}
-
-.alignCenter {
-  align-content: center;
-}
-
-.alignAround {
-  align-content: space-around;
-}
-
-.alignBetween {
-  align-content: space-between;
-}
-
-.first {
-  -ms-flex-order: -1;
-  order: -1;
-}
-
-.last {
-  -ms-flex-order: 1;
-  order: 1;
-}
-
-.selfStart {
-  align-self: flex-start;
-}
-
-.selfEnd {
-  align-self: flex-end;
-}
-
-.selfCenter {
-  align-self: center;
-}
-
-/*Hidden Responsive*/
-@media only screen and (max-width: 30em) {
-  .hidden-screen-xs {
-    display: none;
-  }
-}
-
-@media only screen and (min-width: 30.063em) and (max-width: 48em) {
-  .hidden-screen-sm {
-    display: none;
-  }
-}
-
-@media only screen and (min-width: 48.063em) and (max-width: 61.25em) {
-  .hidden-screen-md {
-    display: none;
-  }
-}
-
-@media only screen and (min-width: 61.313em) and (max-width: 75em) {
-  .hidden-screen-lg {
-    display: none;
-  }
-}
-
-@media only screen and (min-width: 75.063em) {
-  .hidden-screen-xl {
-    display: none;
-  }
-}

package/es/Layout/__tests__/Box.spec.js

@@ -1,11 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import Box from "../Box";
-describe('Box', () => {
-  test('rendering the defult props', () => {
-    const {
-      asFragment
-    } = render( /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement("div", null, "Test")));
-    expect(asFragment()).toMatchSnapshot();
-  });
-});

package/es/Layout/__tests__/Container.spec.js

@@ -1,11 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import Container from "../Container";
-describe('Container', () => {
-  test('rendering the defult props', () => {
-    const {
-      asFragment
-    } = render( /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement("div", null, "Test")));
-    expect(asFragment()).toMatchSnapshot();
-  });
-});

package/es/Layout/__tests__/__snapshots__/Box.spec.js.snap

@@ -1,16 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Box rendering the defult props 1`] = `
-<DocumentFragment>
-  <div
-    class="shrinkOff"
-    data-id="boxComponent"
-    data-selector-id="box"
-    data-test-id="boxComponent"
-  >
-    <div>
-      Test
-    </div>
-  </div>
-</DocumentFragment>
-`;

package/es/Layout/__tests__/__snapshots__/Container.spec.js.snap

@@ -1,16 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Container rendering the defult props 1`] = `
-<DocumentFragment>
-  <div
-    class="flex cover coldir"
-    data-id="containerComponent"
-    data-selector-id="container"
-    data-test-id="containerComponent"
-  >
-    <div>
-      Test
-    </div>
-  </div>
-</DocumentFragment>
-`;