@zohodesk/components 1.0.0-temp-220.11 → 1.0.0-temp-231

package/es/Select/__tests__/__snapshots__/Select.spec.js.snap

@@ -1926,6 +1926,287 @@ exports[`Select - Should render the only options matching search value 1`] = `
 </DocumentFragment>
 `;
 
+exports[`Select - Should render the only options matching search value even with additional spaces before and after 1`] = `
+<DocumentFragment>
+  <div
+    class="container box_medium   "
+    data-selector-id="select"
+  >
+    <div
+      class=""
+      data-id="selectComponent"
+      data-test-id="selectComponent"
+    >
+      <div
+        class="container effect effectFocused input  flex rowdir"
+        data-id="containerComponent"
+        data-selector-id="textBoxIcon"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="grow basis shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <input
+            aria-activedescendant="1"
+            aria-controls="1"
+            aria-expanded="true"
+            aria-haspopup="true"
+            aria-label="click to select options"
+            aria-owns="1"
+            aria-readonly="true"
+            autocomplete="off"
+            class=" pointer container medium  default  effect focus borderColor_default inputDotted "
+            data-id="selectComponent_textBox"
+            data-selector-id="textBoxIcon"
+            data-test-id="selectComponent_textBox"
+            data-title="Option 1"
+            maxlength="250"
+            placeholder=""
+            readonly=""
+            role="Menuitem"
+            type="text"
+            value="Option 1"
+          />
+        </div>
+        <div
+          class="iconContainer  shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="flex cover rowdir"
+            data-id="containerComponent"
+            data-selector-id="container"
+            data-test-id="containerComponent"
+          >
+            <div
+              class="icon rotated shrinkOff"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              <div
+                class="rightPlaceholder inflex rowdir both"
+                data-id="containerComponent"
+                data-selector-id="container"
+                data-test-id="containerComponent"
+              >
+                <div
+                  aria-hidden="true"
+                  class="arrowIcon flex cover coldir both"
+                  data-id="selectComponent_downIcon"
+                  data-selector-id="container"
+                  data-test-id="selectComponent_downIcon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="zd_font_icons basic icon-down    "
+                    data-id="fontIcon"
+                    data-selector-id="fontIcon"
+                    data-test-id="fontIcon"
+                    style="--zd-iconfont-size: var(--zd_font_size7);"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="line borderColor_default "
+        />
+      </div>
+    </div>
+    <div
+      class="main container bottomMid default"
+      data-a11y-focus-main-area="true"
+      data-arrow-position="mid"
+      data-box-direction="bottom"
+      data-id="selectComponent_suggestions"
+      data-position="bottomMid"
+      data-selector-id="dropBox"
+      data-test-id="selectComponent_suggestions"
+      dot-ui-element="dropbox"
+      style="z-index: 4;"
+    >
+      <div
+        class="subContainer shadow radius bounce defaultPalette"
+        data-id="selectComponent_suggestions_subcontainer"
+        data-selector-id="dropBox_subcontainer"
+        data-test-id="selectComponent_suggestions_subcontainer"
+        tabindex="-1"
+      >
+        <div
+          class="flex rowdir"
+          data-id="containerComponent"
+          data-selector-id="container"
+          data-test-id="containerComponent"
+        >
+          <div
+            class="grow basis shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="flex cover coldir"
+              data-id="containerComponent"
+              data-selector-id="container"
+              data-test-id="containerComponent"
+            >
+              <div
+                class="notScroll  shrinkOff"
+                data-id="CardHeader"
+                data-selector-id="cardHeader"
+                data-test-id="CardHeader"
+              >
+                <div
+                  class="search medium"
+                >
+                  <div
+                    class="container effect effectFocused   flex rowdir"
+                    data-id="containerComponent"
+                    data-selector-id="textBoxIcon"
+                    data-test-id="containerComponent"
+                  >
+                    <div
+                      class="grow basis shrinkOff"
+                      data-id="boxComponent"
+                      data-selector-id="box"
+                      data-test-id="boxComponent"
+                    >
+                      <input
+                        aria-autocomplete="list"
+                        aria-controls="1"
+                        aria-describedby="2"
+                        autocomplete="off"
+                        class="  container small  default  effect  borderColor_default  "
+                        data-id="selectComponent_search"
+                        data-selector-id="textBoxIcon"
+                        data-test-id="selectComponent_search"
+                        maxlength="250"
+                        placeholder="Search"
+                        type="text"
+                        value="  2  "
+                      />
+                    </div>
+                    <div
+                      class="iconContainer  shrinkOff"
+                      data-id="boxComponent"
+                      data-selector-id="box"
+                      data-test-id="boxComponent"
+                    >
+                      <div
+                        class="flex cover rowdir"
+                        data-id="containerComponent"
+                        data-selector-id="container"
+                        data-test-id="containerComponent"
+                      >
+                        <button
+                          class="buttonReset icon shrinkOff"
+                          data-id="selectComponent_search_ClearIcon"
+                          data-selector-id="box"
+                          data-test-id="selectComponent_search_ClearIcon"
+                          data-title="Clear"
+                        >
+                          <div
+                            aria-hidden="true"
+                            class="flex cover coldir both"
+                            data-id="containerComponent"
+                            data-selector-id="container"
+                            data-test-id="containerComponent"
+                          >
+                            <i
+                              aria-hidden="true"
+                              class="zd_font_icons basic icon-delete    rtl "
+                              data-id="fontIcon"
+                              data-selector-id="fontIcon"
+                              data-test-id="fontIcon"
+                              style="--zd-iconfont-size: var(--zd_font_size14);"
+                            />
+                          </div>
+                        </button>
+                      </div>
+                    </div>
+                    <div
+                      class="line borderColor_default "
+                    />
+                  </div>
+                </div>
+              </div>
+              <div
+                class="small grow basis shrinkOn scrolly"
+                data-id="CardContent"
+                data-selector-id="cardContent"
+                data-test-id="CardContent"
+              >
+                <div
+                  class="flex coldir"
+                  data-id="containerComponent"
+                  data-selector-id="container"
+                  data-test-id="containerComponent"
+                  id="1"
+                  role="listbox"
+                  tabindex="0"
+                >
+                  <div
+                    class="listItemContainer shrinkOff"
+                    data-id="selectComponent_Options"
+                    data-selector-id="box"
+                    data-test-id="selectComponent_Options"
+                  >
+                    <li
+                      aria-label="Option 2"
+                      aria-selected="false"
+                      ariaparentrole="listbox"
+                      class="list medium  default defaultHover  mediumwithTick    flex rowdir vCenter"
+                      data-a11y-inset-focus="true"
+                      data-a11y-list-active="true"
+                      data-id="Option 2"
+                      data-selector-id="listItem"
+                      data-test-id="Option 2"
+                      data-title="Option 2"
+                      role="option"
+                      tabindex="0"
+                    >
+                      <div
+                        class="leftBox grow basis shrinkOff"
+                        data-id="boxComponent"
+                        data-selector-id="box"
+                        data-test-id="boxComponent"
+                      >
+                        <div
+                          class="titleBox shrinkOff"
+                          data-id="boxComponent"
+                          data-selector-id="box"
+                          data-test-id="boxComponent"
+                        >
+                          <div
+                            class="value basisAuto shrinkOn"
+                            data-id="boxComponent"
+                            data-selector-id="box"
+                            data-test-id="boxComponent"
+                          >
+                            Option 2
+                          </div>
+                        </div>
+                      </div>
+                    </li>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`Select - Should render the placeholder when there is no default value 1`] = `
 <DocumentFragment>
   <div

package/es/common/basic.module.css

@@ -1,5 +1,3 @@
-@charset 'utf-8';
-
 @font-face {
   font-family: Regular;
   src: url('https://static.zohocdn.com/webfonts/lato2regular/font.woff2') format('woff2');

package/es/components_layer.module.css

@@ -0,0 +1 @@
+@layer dot-components, dot-components.theme, dot-components.core, dot-components.reset, dot-components.base, dot-components.animation, dot-components.transition, dot-components.utility, dot-components.layout, dot-components.semantic, dot-components.atom, dot-components.molecule, dot-components.organism, dot-components.page, dot-components.effect;

package/es/v1/Popup/Popup.js

@@ -120,7 +120,7 @@ const Popup = function (Component) {
       }
     }
 
-    componentWillReceiveProps(nextProps) {
+    UNSAFE_componentWillReceiveProps(nextProps) {
       const {
         isPopupOpen
       } = this.state;

package/es/v1/Select/Select.js

@@ -119,7 +119,7 @@ export class SelectComponent extends Component {
     //   suggestionContainer.addEventListener('scroll', this.handleScroll);
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     let {
       selectedValue,
       isDefaultSelectValue,

package/lib/Accordion/Accordion.js

@@ -69,8 +69,8 @@ var Accordion = /*#__PURE__*/function (_React$Component) {
       });
     }
   }, {
-    key: "componentWillReceiveProps",
-    value: function componentWillReceiveProps(nextProps) {
+    key: "UNSAFE_componentWillReceiveProps",
+    value: function UNSAFE_componentWillReceiveProps(nextProps) {
       if (this.props.selectedItem !== nextProps.selectedItem && !this.props.disableInternalState) {
         this.setState({
           selectedItem: nextProps.selectedItem

package/lib/AppContainer/AppContainer.js

@@ -27,7 +27,7 @@ require("@zohodesk/variables/assets/sizeVariables.module.css");
 
 require("@zohodesk/variables/assets/fontsizeVariables.module.css");
 
-require("@zohodesk/variables/lib/fontFamilyVariables.module.css");
+require("@zohodesk/variables/es/fontFamilyVariables.module.css");
 
 require("@zohodesk/variables/assets/transitionVariables.module.css");
 

package/lib/Card/Card.js

@@ -175,15 +175,17 @@ var Card = /*#__PURE__*/function (_Component3) {
     _this2.to = from + 3 * limit;
     _this2.isFetching = false;
     _this2.lastScrollTop = 0;
-    _this2.onScroll = _this2.onScroll.bind(_assertThisInitialized(_this2)); //this.onSetScroll = debounce(this.setScroll.bind(this, true), 10, true);
+    _this2.onScroll = _this2.onScroll.bind(_assertThisInitialized(_this2));
+    _this2.setScrollRef = _this2.setScrollRef.bind(_assertThisInitialized(_this2));
+    _this2.childEleRef = null; //this.onSetScroll = debounce(this.setScroll.bind(this, true), 10, true);
     //this.onClearScroll = debounce(this.setScroll.bind(this, false), 500);
 
     return _this2;
   }
 
   _createClass(Card, [{
-    key: "componentWillReceiveProps",
-    value: function componentWillReceiveProps(nextProps) {
+    key: "UNSAFE_componentWillReceiveProps",
+    value: function UNSAFE_componentWillReceiveProps(nextProps) {
       if (this.from !== nextProps.from) {
         this.from = nextProps.from;
       }
@@ -204,24 +206,35 @@ var Card = /*#__PURE__*/function (_Component3) {
           noMoreData = _this$props3.noMoreData,
           scrollAt = _this$props3.scrollAt,
           noNeedUpScroll = _this$props3.noNeedUpScroll,
-          isPercentageScroll = _this$props3.isPercentageScroll;
+          isPercentageScroll = _this$props3.isPercentageScroll,
+          scrollDirection = _this$props3.scrollDirection;
+      var scrollLimitHeight = scrollHeight - scrollAt;
+      var currentVisibleBottom = scrollTop + offsetHeight;
 
       if (scrollTop > this.lastScrollTop) {
-        this.scrollDirection = 'down';
+        this.scrollingDirection = 'down';
       } else {
-        this.scrollDirection = 'up';
+        this.scrollingDirection = 'up';
       }
 
       this.lastScrollTop = scrollTop;
 
       if (fetchData && !this.isFetching) {
-        if (this.scrollDirection === 'down' && !noMoreData) {
-          var scrollingPercentage = (scrollTop + offsetHeight) / (scrollHeight - scrollAt) * 100;
-          var prefetch = isPercentageScroll ? scrollingPercentage >= (0, _Config.getLibraryConfig)('scrollFetchLimit') : scrollHeight - scrollAt <= scrollTop + offsetHeight;
+        var fetchDirection = scrollDirection === 'bottomToTop' ? 'up' : 'down';
+
+        if (this.scrollingDirection === fetchDirection && !noMoreData) {
+          var prefetch = false;
+
+          if (isPercentageScroll) {
+            var scrollingPercentage = scrollDirection === 'bottomToTop' ? (scrollHeight - scrollTop) / scrollLimitHeight * 100 : currentVisibleBottom / scrollLimitHeight * 100;
+            prefetch = scrollingPercentage >= (0, _Config.getLibraryConfig)('scrollFetchLimit');
+          } else {
+            prefetch = scrollDirection === 'bottomToTop' ? scrollTop <= scrollAt : scrollLimitHeight <= currentVisibleBottom;
+          }
 
           if (prefetch) {
             this.isFetching = true;
-            fetchData(this.from + this.limit, this.limit + this.to, this.scrollDirection).then(function () {
+            fetchData(this.from + this.limit, this.limit + this.to, this.scrollingDirection).then(function () {
               _this3.to = _this3.limit + _this3.to;
               _this3.isFetching = false;
             }, function () {
@@ -229,9 +242,11 @@ var Card = /*#__PURE__*/function (_Component3) {
             });
           }
         } else {
-          if (0 >= scrollTop - scrollAt && this.from !== 0 && !noNeedUpScroll) {
+          var _prefetch = scrollDirection === 'bottomToTop' ? scrollLimitHeight <= currentVisibleBottom : 0 >= scrollTop - scrollAt;
+
+          if (_prefetch && this.from !== 0 && !noNeedUpScroll) {
             this.isFetching = true;
-            fetchData(this.from - this.limit, this.to - this.limit, this.scrollDirection).then(function () {
+            fetchData(this.from - this.limit, this.to - this.limit, this.scrollingDirection).then(function () {
               _this3.to = _this3.to - _this3.limit;
               _this3.isFetching = false;
             }, function () {
@@ -242,9 +257,12 @@ var Card = /*#__PURE__*/function (_Component3) {
       }
 
       if (fetchData && !noNeedUpScroll) {
-        if (this.from !== 0 && scrollTop === 0 && !noNeedUpScroll) {
+        var topFetch = scrollDirection === 'bottomToTop' ? !noMoreData : !noNeedUpScroll && this.from !== 0;
+        var bottomFetch = scrollDirection === 'bottomToTop' ? !noNeedUpScroll && this.from !== 0 : !noMoreData;
+
+        if (scrollTop === 0 && topFetch) {
           scrollContainerObj.scrollTop = scrollTop + offsetHeight / 3;
-        } else if (scrollHeight === scrollTop + offsetHeight && !noMoreData) {
+        } else if (scrollHeight === currentVisibleBottom && bottomFetch) {
           scrollContainerObj.scrollTop = scrollTop - offsetHeight / 2;
         }
       } // if (isScrollShadow) {
@@ -262,21 +280,36 @@ var Card = /*#__PURE__*/function (_Component3) {
     //   }
     // }
 
+  }, {
+    key: "setScrollRef",
+    value: function setScrollRef(el) {
+      var _this$props4 = this.props,
+          scrollAt = _this$props4.scrollAt,
+          scrollDirection = _this$props4.scrollDirection;
+
+      if (el && scrollDirection === 'bottomToTop') {
+        requestAnimationFrame(function () {
+          el.scrollTop = el.scrollHeight + Number(scrollAt);
+        });
+      }
+
+      this.childEleRef && this.childEleRef(el);
+    }
   }, {
     key: "render",
     value: function render() {
       var _this4 = this;
 
-      var _this$props4 = this.props,
-          onClick = _this$props4.onClick,
-          children = _this$props4.children,
-          isScrollAttribute = _this$props4.isScrollAttribute,
-          dataId = _this$props4.dataId,
-          eleRef = _this$props4.eleRef,
-          _this$props4$customCl = _this$props4.customClass,
-          customClass = _this$props4$customCl === void 0 ? '' : _this$props4$customCl,
-          htmlId = _this$props4.htmlId,
-          a11y = _this$props4.a11y;
+      var _this$props5 = this.props,
+          onClick = _this$props5.onClick,
+          children = _this$props5.children,
+          isScrollAttribute = _this$props5.isScrollAttribute,
+          dataId = _this$props5.dataId,
+          eleRef = _this$props5.eleRef,
+          _this$props5$customCl = _this$props5.customClass,
+          customClass = _this$props5$customCl === void 0 ? '' : _this$props5$customCl,
+          htmlId = _this$props5.htmlId,
+          a11y = _this$props5.a11y;
       var isScroll = this.state.isScroll;
       var role = a11y.role;
       return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
@@ -295,6 +328,7 @@ var Card = /*#__PURE__*/function (_Component3) {
             isScroll: isScroll
           });
         } else if (child.type === CardContent || _this4.props.childTypes && child.type === _this4.props.childTypes.cardContent) {
+          _this4.childEleRef = child.props.eleRef;
           return /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
             id: htmlId,
             role: role,
@@ -302,7 +336,7 @@ var Card = /*#__PURE__*/function (_Component3) {
             scroll: child.props.scroll,
             preventParentScroll: child.props.preventParentScroll,
             onScroll: _this4.onScroll,
-            eleRef: child.props.eleRef,
+            eleRef: _this4.setScrollRef,
             isScrollAttribute: child.props.isScrollAttribute,
             dataId: child.props.dataId,
             shrink: child.props.shrink,
@@ -344,11 +378,11 @@ var CardFooter = /*#__PURE__*/function (_Component4) {
   _createClass(CardFooter, [{
     key: "render",
     value: function render() {
-      var _this$props5 = this.props,
-          children = _this$props5.children,
-          dataId = _this$props5.dataId,
-          customClass = _this$props5.customClass,
-          dataSelectorId = _this$props5.dataSelectorId;
+      var _this$props6 = this.props,
+          children = _this$props6.children,
+          dataId = _this$props6.dataId,
+          customClass = _this$props6.customClass,
+          dataSelectorId = _this$props6.dataSelectorId;
       return /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: "".concat(customClass),
         dataId: dataId,