@zohodesk/components 1.4.10-exp.1 → 1.4.11

package/README.md

@@ -2,11 +2,24 @@
 
 Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development across projects.
 
+# 1.4.11
+
+- `@zohodesk/virtualizer` version updated from **1.0.3** to **1.0.13**
+
+- **Select, MultiSelect**
+  - `isVirtualizerEnabled` prop supported to manage bulk amount of options rendering
+
+- **Suggestions**
+  - **Virtualizer** adopted to manage bulk amount of options rendering with `isVirtualizerEnabled` prop support
+
 # 1.4.10
 
 - **Select, MultiSelect**
   - Searching with leading spaces is not reflected the results correctly. Issue Fixed.
 
+- **Select**
+  - Fixed performance issue in options formatting caused by unnecessary rendering triggers
+
 # 1.4.9
 
 - **MultiSelect , MultiSelectWithAvatar, AdvancedMultiSelect, AdvancedGroupMultiSelect**

package/es/AppContainer/AppContainer.js

@@ -9,7 +9,6 @@ import '@zohodesk/variables/assets/dotVariables.module.css';
 import '@zohodesk/variables/assets/sizeVariables.module.css';
 import '@zohodesk/variables/assets/fontsizeVariables.module.css';
 import '@zohodesk/variables/es/fontFamilyVariables.module.css';
-import '@zohodesk/variables/es/fontWeightVariables.module.css';
 import '@zohodesk/variables/assets/transitionVariables.module.css';
 import '@zohodesk/variables/assets/no_transitionVariables.module.css';
 import "../common/a11y.module.css";

package/es/AppContainer/AppContainer.module.css

@@ -8,9 +8,8 @@
   -moz-box-sizing: border-box;
   -ms-box-sizing: border-box;
 }
-.container, .container button, .container input, .container textarea ,.container select {
-  /* font-family: var(--zd_regular); */
-  font-family: var(--zd-font-family, ZDLato);
+.container {
+  font-family: var(--zd_regular);
 }
 .tooltip {
   height: 0 ;

package/es/Button/css/Button.module.css

@@ -5,7 +5,7 @@
   --button_cursor: pointer;
   --button_font_size: var(--zd_font_size13);
   --button_text_color: var(--zdt_button_default_text);
-  --button_font_weight: var(--zd-fw-normal);
+  --button_font_family: var(--zd_regular);
   --button_text_transform: capitalize;
   --button_bg_color: var(--zdt_button_default_bg);
   --button_border_radius: 4px;
@@ -49,7 +49,7 @@
   position: relative;
   font-size: var(--button_font_size);
   color: var(--button_text_color);
-  font-weight: var(--button_font_weight);
+  font-family: var(--button_font_family);
   text-transform: var(--button_text_transform);
   min-width: var(--button_min_width);
   height: var(--button_height);
@@ -63,7 +63,7 @@
 }
 
 .bold {
-  --button_font_weight: var(--zd-fw-semibold);
+  --button_font_family: var(--zd_semibold);
   composes: ftsmooth from '../../common/common.module.css';
 }
 
@@ -569,7 +569,7 @@
 }
 
 .loader {
-  color: var(--dot_mirror);
+  color: var(--dot_mirror)
 }
 
 [dir=ltr] .strike {
@@ -579,43 +579,34 @@
 [dir=rtl] .strike {
   background-image: repeating-linear-gradient(-120deg, var(--button_strike_color) 0 1px, transparent 1px 8px);
 }
-
 .primaryStrike {
   --button_strike_color: var(--zdt_button_primary_strike);
 }
-
 .primaryfilledStrike {
   --button_strike_color: var(--zdt_button_primaryFilled_strike);
   --button_border_color: var(--zdt_button_primaryfill_bg);
 }
-
 .dangerStrike {
   --button_strike_color: var(--zdt_button_danger_strike);
 }
-
 .dangerfilledStrike {
   --button_strike_color: var(--zdt_button_dangerFilled_strike);
   --button_border_color: var(--zdt_button_dangerfill_bg);
 }
-
 .secondaryStrike {
   --button_strike_color: var(--zdt_button_secondary_border);
 }
-
 .secondaryfilledStrike {
   --button_strike_color: var(--zdt_button_secondaryFilled_strike);
   --button_border_color: var(--zdt_button_secondaryfill_bg);
 }
-
 .tertiaryfilledStrike {
   --button_strike_color: var(--zdt_button_tertiaryFilled_strike);
   --button_border_color: var(--zdt_button_tertiaryfill_bg);
 }
-
 .successStrike {
   --button_strike_color: var(--zdt_button_success_strike);
 }
-
 .successfilledStrike {
   --button_strike_color: var(--zdt_button_successFilled_strike);
   --button_border_color: var(--zdt_button_successfill_bg);

package/es/DateTime/DateTime.module.css

@@ -1,5 +1,5 @@
 .semibold {
-  font-weight: var(--zd-fw-semibold);
+  font-family: var(--zd_semibold);
 }
 
 [dir=ltr] .boxPadding {
@@ -29,7 +29,7 @@
 }
 
 .datesStr {
-  font-weight: var(--zd-fw-normal);
+  font-family: var(--zd_regular);
 }
 
 .grid {
@@ -122,8 +122,7 @@
   color: var(--zdt_datetime_invalid_text);
 }
 
-.invalidDate.holiday,
-.inActiveDate.holiday:hover {
+.invalidDate.holiday,.inActiveDate.holiday:hover {
   color: var(--zdt_datetime_invaliddate_text);
 }
 
@@ -148,17 +147,15 @@
   background-color: var(--zdt_datetime_selected_bg);
   border-radius: 50%;
 }
-
-.inActiveDate {
-  color: var(--zdt_datetime_invalid_text);
-  cursor: no-drop;
+.inActiveDate{
+color: var(--zdt_datetime_invalid_text);
+cursor: no-drop;
 }
-
-.inActiveDate:hover {
+.inActiveDate:hover
+{
   color: var(--zdt_datetime_invalid_text);
 }
-
-.inActiveDate:hover, .inActiveDate.holiday:hover {
+.inActiveDate:hover, .inActiveDate.holiday:hover{
   background-color: var(--zdt_datetime_inactivedate_hover_bg);
 
 }

package/es/DateTime/YearView.module.css

@@ -61,7 +61,7 @@
 }
 
 .isActive .yearText {
-  font-weight: var(--zd-fw-semibold);
+  font-family: var(--zd_semibold);
   color: var(--zdt_yearview_year_hover_text);
   font-size: var(--zd_font_size11) ;
 }

package/es/Heading/Heading.module.css

@@ -1,4 +1,5 @@
 .reset {
   font-size: inherit ;
+  font-weight: initial;
   margin: initial ;
 }

package/es/Label/Label.module.css

@@ -2,7 +2,7 @@
   /* label default variables */
   --label_font_size: var(--zd_font_size14);
   --label_text_color: var(--zdt_label_default_text);
-  --label_font_weight: var(--zd-fw-normal);
+  --label_font_family: var(--zd_regular);
   --label_cursor: default;
   --label_line_height: 1.286;
 }
@@ -13,24 +13,24 @@
   line-height: var(--label_line_height);
   font-size: var(--label_font_size);
   color: var(--label_text_color);
-  font-weight: var(--label_font_weight);
+  font-family: var(--label_font_family);
   cursor: var(--label_cursor);
 }
 .xsmall {
   --label_font_size: var(--zd_font_size12);
-  --label_line_height: 1.5;
+  --label_line_height:1.5;
 }
 .small {
   --label_font_size: var(--zd_font_size13);
-  --label_line_height: 1.385;
+  --label_line_height:1.385;
 }
 .medium {
   --label_font_size: var(--zd_font_size14);
-  --label_line_height: 1.286;
+  --label_line_height:1.286;
 }
 .large {
   --label_font_size: var(--zd_font_size26);
-  --label_line_height: 0.6923;
+  --label_line_height:0.6923;
   composes: semibold from '../common/common.module.css';
 }
 .pointer {
@@ -46,10 +46,10 @@
   display: inline-block;
 }
 .font_default {
-  --label_font_weight: var(--zd-fw-normal);
+  --label_font_family: var(--zd_regular);
 }
 .font_primary {
-  --label_font_weight: var(--zd-fw-semibold);
+  --label_font_family: var(--zd_semibold);
   composes: ftsmooth from '../common/common.module.css';
 }
 .dotted {

package/es/MultiSelect/MultiSelect.js

@@ -81,6 +81,8 @@ export class MultiSelectComponent extends React.Component {
     this.handleSearchOptions = debounce(this.handleSearchOptions.bind(this), searchDebounceTime);
     this.handleScroll = this.handleScroll.bind(this);
     this.handleScrollFuncCall = debounce(this.handleScrollFuncCall.bind(this), 500);
+    this.getVirtualizerPublicMethods = this.getVirtualizerPublicMethods.bind(this);
+    this.setSuggestionsVirtualizerContainerRefFunction = this.setSuggestionsVirtualizerContainerRefFunction.bind(this);
   }
 
   componentDidMount() {
@@ -140,11 +142,6 @@ export class MultiSelectComponent extends React.Component {
   }
 
   componentDidUpdate(prevProps, prevState) {
-    const {
-      suggestionContainer,
-      selectedOptionContainer,
-      suggestionsOrder
-    } = this;
     const {
       hoverOption,
       highLightedSelectOptions,
@@ -156,7 +153,8 @@ export class MultiSelectComponent extends React.Component {
       isPopupOpen,
       onDropBoxClose,
       onDropBoxOpen,
-      isSearchClearOnClose
+      isSearchClearOnClose,
+      isVirtualizerEnabled
     } = this.props; //handle dropbox open & close
 
     if (prevProps.isPopupOpen !== isPopupOpen) {
@@ -172,12 +170,23 @@ export class MultiSelectComponent extends React.Component {
     } //scrollTo handling
 
 
-    const hoverId = suggestionsOrder[hoverOption] || '';
-    const selectedSuggestion = this[`suggestion_${hoverId}`];
-    const lastHighLightedSelectOption = highLightedSelectOptions.slice(-1).length ? highLightedSelectOptions.slice(-1)[0] : null;
-    const selectedOption = this[`selectedOption_${lastHighLightedSelectOption}`];
-    isPopupOpen && scrollTo(suggestionContainer, selectedSuggestion);
-    selectedOptions.length && selectedOption && scrollTo(selectedOptionContainer, selectedOption); //When suggestions length less than 5, getNextOptions function call
+    if (isVirtualizerEnabled && !!this.virtualizerMethods) {
+      let position = prevState.hoverOption > hoverOption ? 'top' : 'bottom';
+      this.virtualizerMethods.getElementVisiblePercentage(hoverOption) < 50 && this.virtualizerMethods.scrollToIndex(hoverOption, position);
+    } else {
+      const {
+        suggestionContainer,
+        selectedOptionContainer,
+        suggestionsOrder
+      } = this;
+      const hoverId = suggestionsOrder[hoverOption] || '';
+      const selectedSuggestion = this[`suggestion_${hoverId}`];
+      const lastHighLightedSelectOption = highLightedSelectOptions.slice(-1).length ? highLightedSelectOptions.slice(-1)[0] : null;
+      const selectedOption = this[`selectedOption_${lastHighLightedSelectOption}`];
+      isPopupOpen && scrollTo(suggestionContainer, selectedSuggestion);
+      selectedOptions.length && selectedOption && scrollTo(selectedOptionContainer, selectedOption);
+    } //When suggestions length less than 5, getNextOptions function call
+
 
     const {
       isNextOptions,
@@ -798,6 +807,7 @@ export class MultiSelectComponent extends React.Component {
 
   suggestionContainerRef(el) {
     this.suggestionContainer = el;
+    typeof this.setSuggestionsVirtualizerRef === 'function' && this.setSuggestionsVirtualizerRef(el);
   }
 
   suggestionItemRef(el, index, id) {
@@ -862,6 +872,15 @@ export class MultiSelectComponent extends React.Component {
     });
   }
 
+  getVirtualizerPublicMethods(methods) {
+    this.virtualizerMethods = methods;
+  }
+
+  setSuggestionsVirtualizerContainerRefFunction(refFunc) {
+    this.setSuggestionsVirtualizerRef = refFunc;
+    this.suggestionContainer && refFunc(this.suggestionContainer);
+  }
+
   getSelectionUI() {
     let isResponsive = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
     let {
@@ -1042,6 +1061,7 @@ export class MultiSelectComponent extends React.Component {
       isLoading,
       selectAllText,
       needSelectAll,
+      isVirtualizerEnabled,
       limit
     } = this.props;
     const {
@@ -1123,7 +1143,11 @@ export class MultiSelectComponent extends React.Component {
     }, isSearching ? /*#__PURE__*/React.createElement("div", {
       className: style[palette]
     }, searchText) : suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, {
+      key: searchStr.trim(),
       suggestions: suggestions,
+      isVirtualizerEnabled: isVirtualizerEnabled,
+      getVirtualizerPublicMethods: this.getVirtualizerPublicMethods,
+      setVirtualizerContainerRefFunction: this.setSuggestionsVirtualizerContainerRefFunction,
       getRef: this.suggestionItemRef,
       hoverOption: hoverOption,
       onClick: this.handleSelectOption,

package/es/MultiSelect/MultiSelect.module.css

@@ -196,7 +196,7 @@
 .more {
   font-size: var(--zd_font_size14) ;
   color: var(--zdt_multiselect_more_text);
-  font-weight: var(--zd-fw-normal);
+  font-family: inherit;
   cursor: pointer;
   margin-top: var(--zd_size5) ;
   background-color: var(--zdt_multiselect_delete_bg);

package/es/MultiSelect/Suggestions.js

@@ -1,140 +1,114 @@
 /**** Libraries ****/
-import React from 'react';
+import React, { useMemo } from 'react';
 import { Suggestions_propTypes } from "./props/propTypes";
 import { Suggestions_defaultProps } from "./props/defaultProps";
+import { Virtualizer } from '@zohodesk/virtualizer';
 /**** Components ****/
 
 import ListItem from "../ListItem/ListItem";
 import ListItemWithAvatar from "../ListItem/ListItemWithAvatar";
 import ListItemWithIcon from "../ListItem/ListItemWithIcon";
 import { Container, Box } from "../Layout";
+import { DUMMY_OBJECT, DUMMY_ARRAY } from "../utils/Common";
+
+function SuggestionsVirtualizerContainer(_ref) {
+  let {
+    eleRef,
+    children,
+    setVirtualizerContainerRefFunction
+  } = _ref;
+  useMemo(() => {
+    typeof setVirtualizerContainerRefFunction === 'function' && setVirtualizerContainerRefFunction(eleRef);
+  }, [eleRef, setVirtualizerContainerRefFunction]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, children);
+}
+
 export default class Suggestions extends React.PureComponent {
-  render() {
+  constructor(props) {
+    super(props);
+    this.renderSuggestionList = this.renderSuggestionList.bind(this);
+    this.renderVirtualizerSuggestionListItem = this.renderVirtualizerSuggestionListItem.bind(this);
+  }
+
+  renderSuggestionList(_ref2) {
+    let {
+      suggestion,
+      index,
+      ref
+    } = _ref2;
     const {
-      suggestions,
       getRef,
       hoverOption,
       onClick,
       onMouseEnter,
       needTick,
       needBorder,
-      selectedOptions = [],
+      selectedOptions = DUMMY_ARRAY,
       activeId,
       hoverId,
-      dataId,
       listItemSize,
-      className,
       avatarPalette,
       palette,
-      htmlId,
       a11y,
       needMultiLineText,
       limit,
       limitReachedMessage
     } = this.props;
     const {
-      ariaParentRole,
-      ariaMultiselectable
-    } = a11y;
+      id,
+      value,
+      secondaryValue,
+      photoURL,
+      icon,
+      optionType,
+      iconSize,
+      isDisabled,
+      listItemProps,
+      listItemCustomProps = DUMMY_OBJECT
+    } = suggestion;
+    const isActive = activeId === id || selectedOptions.indexOf(id) >= 0;
+    const isHighlight = hoverOption === index || id === hoverId ? true : false;
     const selectedOptionsLength = selectedOptions.length;
-    return /*#__PURE__*/React.createElement(Container, {
-      isCover: false,
-      role: ariaParentRole,
-      id: htmlId,
-      tabindex: "0",
-      "aria-multiselectable": ariaMultiselectable
-    }, /*#__PURE__*/React.createElement(Box, {
-      dataId: `${dataId}`,
-      className: className ? className : ''
-    }, suggestions.map((suggestion, index) => {
-      const {
-        id,
-        value,
-        secondaryValue,
-        photoURL,
-        icon,
-        optionType,
-        iconSize,
-        isDisabled,
-        listItemProps,
-        listItemCustomProps = {}
-      } = suggestion;
-      const isActive = activeId === id || selectedOptions.indexOf(id) >= 0;
-      const isHighlight = hoverOption === index || id === hoverId ? true : false;
-      const isLimitReached = selectedOptionsLength >= limit && !isActive;
-      const list_a11y = Object.assign({}, a11y, {
-        ariaSelected: isActive,
-        ariaLabel: value,
-        'data-a11y-list-active': isHighlight
-      });
-      const commonProps = {
-        isDisabled: isDisabled ? isDisabled : isLimitReached,
-        needMultiLineText,
-        ...listItemCustomProps
+    const isLimitReached = selectedOptionsLength >= limit && !isActive;
+    const list_a11y = Object.assign({}, a11y, {
+      ariaSelected: isActive,
+      ariaLabel: value,
+      'data-a11y-list-active': isHighlight
+    });
+    const commonProps = {
+      isDisabled: isDisabled ? isDisabled : isLimitReached,
+      needMultiLineText,
+      ...listItemCustomProps
+    };
+
+    if (listItemProps) {
+      commonProps.customProps = {
+        ListItemProps: { ...listItemProps
+        }
       };
+    }
 
-      if (listItemProps) {
-        commonProps.customProps = {
-          ListItemProps: { ...listItemProps
-          }
-        };
-      }
+    if (isLimitReached) {
+      commonProps.disableTitle = limitReachedMessage;
+    }
 
-      if (isLimitReached) {
-        commonProps.disableTitle = limitReachedMessage;
-      }
+    function getListItemRef(ele, index, id) {
+      ref && ref(ele);
 
-      if (optionType === 'avatar') {
-        return /*#__PURE__*/React.createElement(ListItemWithAvatar, { ...commonProps,
-          autoHover: false,
-          getRef: getRef,
-          highlight: isHighlight,
-          id: id,
-          imgSrc: photoURL,
-          key: `${id}avatarListItem`,
-          name: value,
-          onClick: onClick,
-          onMouseEnter: onMouseEnter,
-          value: value,
-          title: value,
-          needTick: needTick,
-          needBorder: needBorder,
-          active: isActive,
-          size: listItemSize,
-          avatarPalette: avatarPalette,
-          palette: palette,
-          a11y: list_a11y,
-          secondaryValue: secondaryValue
-        });
-      } else if (optionType === 'icon') {
-        return /*#__PURE__*/React.createElement(ListItemWithIcon, { ...commonProps,
-          autoHover: false,
-          getRef: getRef,
-          highlight: isHighlight,
-          id: id,
-          key: `${id}iconListItem`,
-          onClick: onClick,
-          onMouseEnter: onMouseEnter,
-          value: value,
-          title: value,
-          iconName: icon,
-          needTick: needTick,
-          needBorder: needBorder,
-          active: isActive,
-          iconSize: iconSize,
-          size: listItemSize,
-          palette: palette,
-          a11y: list_a11y,
-          secondaryValue: secondaryValue
-        });
+      if (typeof getRef === 'function') {
+        getRef(ele, index, id);
       }
+    }
 
-      return /*#__PURE__*/React.createElement(ListItem, { ...commonProps,
+    if (optionType === 'avatar') {
+      return /*#__PURE__*/React.createElement(ListItemWithAvatar, { ...commonProps,
         autoHover: false,
-        getRef: getRef,
+        getRef: getListItemRef,
         highlight: isHighlight,
         id: id,
-        key: `${id}listItem`,
+        imgSrc: photoURL,
+        key: `${id}avatarListItem`,
+        name: value,
         onClick: onClick,
         onMouseEnter: onMouseEnter,
         value: value,
@@ -143,8 +117,105 @@ export default class Suggestions extends React.PureComponent {
         needBorder: needBorder,
         active: isActive,
         size: listItemSize,
+        avatarPalette: avatarPalette,
         palette: palette,
-        a11y: list_a11y
+        a11y: list_a11y,
+        secondaryValue: secondaryValue
+      });
+    } else if (optionType === 'icon') {
+      return /*#__PURE__*/React.createElement(ListItemWithIcon, { ...commonProps,
+        autoHover: false,
+        getRef: getListItemRef,
+        highlight: isHighlight,
+        id: id,
+        key: `${id}iconListItem`,
+        onClick: onClick,
+        onMouseEnter: onMouseEnter,
+        value: value,
+        title: value,
+        iconName: icon,
+        needTick: needTick,
+        needBorder: needBorder,
+        active: isActive,
+        iconSize: iconSize,
+        size: listItemSize,
+        palette: palette,
+        a11y: list_a11y,
+        secondaryValue: secondaryValue
+      });
+    }
+
+    return /*#__PURE__*/React.createElement(ListItem, { ...commonProps,
+      autoHover: false,
+      getRef: getListItemRef,
+      highlight: isHighlight,
+      id: id,
+      key: `${id}listItem`,
+      onClick: onClick,
+      onMouseEnter: onMouseEnter,
+      value: value,
+      title: value,
+      needTick: needTick,
+      needBorder: needBorder,
+      active: isActive,
+      size: listItemSize,
+      palette: palette,
+      a11y: list_a11y
+    });
+  }
+
+  renderVirtualizerSuggestionListItem(_ref3) {
+    let {
+      index,
+      ref
+    } = _ref3;
+    const {
+      suggestions
+    } = this.props;
+    const suggestion = suggestions[index];
+    return this.renderSuggestionList({
+      suggestion,
+      index,
+      ref
+    });
+  }
+
+  render() {
+    const {
+      suggestions,
+      dataId,
+      className,
+      isVirtualizerEnabled,
+      htmlId,
+      a11y,
+      getVirtualizerPublicMethods,
+      setVirtualizerContainerRefFunction
+    } = this.props;
+    const {
+      ariaParentRole,
+      ariaMultiselectable
+    } = a11y;
+    return /*#__PURE__*/React.createElement(Container, {
+      isCover: false,
+      role: ariaParentRole,
+      id: htmlId,
+      tabindex: "0",
+      "aria-multiselectable": ariaMultiselectable
+    }, /*#__PURE__*/React.createElement(Box, {
+      dataId: `${dataId}`,
+      className: className ? className : ''
+    }, isVirtualizerEnabled ? /*#__PURE__*/React.createElement(Virtualizer, {
+      containerType: SuggestionsVirtualizerContainer,
+      elementRenderer: this.renderVirtualizerSuggestionListItem,
+      getExposedPublicMethods: getVirtualizerPublicMethods,
+      elementsCount: suggestions.length,
+      isElementsFixedHeight: false,
+      dataId: `${dataId}_virtualizer`,
+      setVirtualizerContainerRefFunction: setVirtualizerContainerRefFunction
+    }) : suggestions.map((suggestion, index) => {
+      return this.renderSuggestionList({
+        suggestion,
+        index
       });
     })));
   }