@zohodesk/components 1.0.0-alpha-261 → 1.0.0-alpha-263

package/README.md

@@ -32,11 +32,25 @@ In this Package, we Provide Some Basic Components to Build Web App
 - TextBoxIcon
 - Tooltip
 
+# 1.0.0-alpha-263
+
+- **ListItem, ListItemWithAvatar, ListItemWithCheckbox, ListItemWithIcon, ListItemWithRadio**  - Line height changed 20px and Padding also changed.
+
+# 1.0.0-alpha-262
+
+- **ListItem, ListItemWithAvatar, ListItemWithCheckbox, ListItemWithIcon, ListItemWithRadio**  - Added New Prop `needMultiLineText`
+
+- **MultiSelect, MultiSelectWithAvatar** - `keepSelectedOptions` prop added. When this prop is true, it won't remove selected items from the dropdown instead it highlights each selected item with tick mark.
+
+- **MultiSelectWithAvatar** - `customProps` support.
+
 # 1.0.0-alpha-261
 
 - **Tab,Tabs** - Removed offsection property from css.
-- compileClassNames , mergeStyle utils added
-- index  export object fixed
+
+- compileClassNames , mergeStyle utils added.
+
+- index  export object fixed.
 
 # 1.0.0-alpha-260
 

package/es/DropBox/DropBox.module.css

@@ -65,7 +65,6 @@
 }
 .xxlarge {
   width: var(--zd_size364);
-  max-width: var(--zd_size364);
 }
 .default {
   width: 100%;

package/es/ListItem/ListItem.js

@@ -64,7 +64,8 @@ export default class ListItem extends React.Component {
       dataSelectorId,
       a11y,
       customClass,
-      customProps
+      customProps,
+      needMultiLineText
     } = this.props;
     let {
       ListItemProps = {},
@@ -104,7 +105,7 @@ export default class ListItem extends React.Component {
     }, ContainerProps), value ? /*#__PURE__*/React.createElement(Box, {
       shrink: true,
       adjust: true,
-      className: style.value
+      className: needMultiLineText ? style.multiLineValue : style.value
     }, value) : null, children ? /*#__PURE__*/React.createElement(Box, {
       shrink: true,
       adjust: true,

package/es/ListItem/ListItem.module.css

@@ -48,15 +48,15 @@
   --listitem_border_color: var(--zdt_listitem_active_border);
 }
 [dir=ltr] .small {
-  --listitem_padding: var(--zd_size9) var(--zd_size3) var(--zd_size9)
+  --listitem_padding: var(--zd_size7) var(--zd_size3) var(--zd_size7)
     var(--zd_size5)
-    /*rtl: var(--zd_size9) var(--zd_size5) var(--zd_size9) var(--zd_size3)*/;
+    /*rtl: var(--zd_size7) var(--zd_size5) var(--zd_size7) var(--zd_size3)*/;
 }
 [dir=rtl] .small {
-  --listitem_padding: var(--zd_size9) var(--zd_size5) var(--zd_size9) var(--zd_size3);
+  --listitem_padding: var(--zd_size7) var(--zd_size5) var(--zd_size7) var(--zd_size3);
 }
 .medium {
-  --listitem_padding: var(--zd_size9) var(--zd_size20);
+  --listitem_padding: var(--zd_size7) var(--zd_size20);
   --listitem_min_height: var(--zd_size35);
 }
 .large {
@@ -74,6 +74,13 @@
 .children {
   composes: dotted from '../common/common.module.css';
 }
+.value, .multiLineValue {
+  line-height: var(--zd_size20);
+}
+.multiLineValue{
+  word-break: break-word;
+  composes: clamp from '../common/common.module.css'
+}
 .iconBox {
   width: var(--zd_size20);
   text-align: center;
@@ -178,20 +185,20 @@
   display: block;
 }
 [dir=ltr] .smallwithTick {
-  --listitem_padding: var(--zd_size9) var(--zd_size39) var(--zd_size9)
+  --listitem_padding: var(--zd_size7) var(--zd_size39) var(--zd_size7)
     var(--zd_size5)
-    /*rtl: var(--zd_size9) var(--zd_size5) var(--zd_size9) var(--zd_size39)*/;
+    /*rtl: var(--zd_size7) var(--zd_size5) var(--zd_size7) var(--zd_size39)*/;
 }
 [dir=rtl] .smallwithTick {
-  --listitem_padding: var(--zd_size9) var(--zd_size5) var(--zd_size9) var(--zd_size39);
+  --listitem_padding: var(--zd_size7) var(--zd_size5) var(--zd_size7) var(--zd_size39);
 }
 [dir=ltr] .mediumwithTick {
-  --listitem_padding: var(--zd_size9) var(--zd_size39) var(--zd_size9)
+  --listitem_padding: var(--zd_size7) var(--zd_size39) var(--zd_size7)
     var(--zd_size20)
-    /*rtl: var(--zd_size9) var(--zd_size20) var(--zd_size9) var(--zd_size39)*/;
+    /*rtl: var(--zd_size7) var(--zd_size20) var(--zd_size7) var(--zd_size39)*/;
 }
 [dir=rtl] .mediumwithTick {
-  --listitem_padding: var(--zd_size9) var(--zd_size20) var(--zd_size9) var(--zd_size39);
+  --listitem_padding: var(--zd_size7) var(--zd_size20) var(--zd_size7) var(--zd_size39);
 }
 [dir=ltr] .largewithTick {
   --listitem_padding: var(--zd_size10) var(--zd_size39) var(--zd_size10)

package/es/ListItem/ListItemWithAvatar.js

@@ -69,7 +69,8 @@ export default class ListItemWithAvatar extends React.PureComponent {
       avatarPalette,
       a11y,
       customClass,
-      customProps
+      customProps,
+      needMultiLineText
     } = this.props;
     let {
       ListItemProps = {},
@@ -130,7 +131,7 @@ export default class ListItemWithAvatar extends React.PureComponent {
       flexible: true,
       shrink: true,
       "data-title": isDisabled ? null : title,
-      className: style.value
+      className: needMultiLineText ? style.multiLineValue : style.value
     }, value) : null, needTick && active ? /*#__PURE__*/React.createElement(Box, {
       className: style.tickIcon,
       "aria-hidden": ariaHidden,

package/es/ListItem/ListItemWithCheckBox.js

@@ -55,7 +55,8 @@ export default class ListItemWithCheckBox extends React.Component {
       disableTitle,
       a11y,
       customClass,
-      customProps
+      customProps,
+      needMultiLineText
     } = this.props;
     let {
       ListItemProps = {},
@@ -98,7 +99,7 @@ export default class ListItemWithCheckBox extends React.Component {
       flexible: true,
       shrink: true,
       "data-title": isDisabled ? null : title,
-      className: style.value
+      className: needMultiLineText ? style.multiLineValue : style.value
     }, value));
   }
 }

package/es/ListItem/ListItemWithIcon.js

@@ -65,7 +65,8 @@ export default class ListItemWithIcon extends React.Component {
       disableTitle,
       a11y,
       customClass,
-      customProps
+      customProps,
+      needMultiLineText
     } = this.props;
     let {
       ListItemProps = {},
@@ -110,7 +111,7 @@ export default class ListItemWithIcon extends React.Component {
     }) : null, value && /*#__PURE__*/React.createElement(Box, {
       flexible: true,
       shrink: true,
-      className: style.value,
+      className: needMultiLineText ? style.multiLineValue : style.value,
       "data-title": isDisabled ? null : title,
       dataId: `${dataIdString}_Text`
     }, value), needTick && active ? /*#__PURE__*/React.createElement(Box, {

package/es/ListItem/ListItemWithRadio.js

@@ -56,7 +56,8 @@ export default class ListItemWithRadio extends React.Component {
       disableTitle,
       a11y,
       customClass,
-      customProps
+      customProps,
+      needMultiLineText
     } = this.props;
     let {
       ListItemProps = {},
@@ -100,7 +101,7 @@ export default class ListItemWithRadio extends React.Component {
       flexible: true,
       shrink: true,
       "data-title": disableTitle ? null : title,
-      className: style.value
+      className: needMultiLineText ? style.multiLineValue : style.value
     }, value));
   }
 }

package/es/ListItem/props/defaultProps.js

@@ -11,7 +11,8 @@ export const ListContainerDefaultProps = {
   a11y: {},
   customClass: '',
   customProps: {},
-  dataSelectorId: 'listContainer'
+  dataSelectorId: 'listContainer',
+  needMultiLineText: false
 };
 export const ListItemDefaultProps = {
   active: false,
@@ -27,7 +28,8 @@ export const ListItemDefaultProps = {
   a11y: {},
   customClass: {},
   customProps: {},
-  dataSelectorId: 'listItem'
+  dataSelectorId: 'listItem',
+  needMultiLineText: false
 };
 export const ListItemWithAvatarDefaultProps = {
   active: false,
@@ -44,7 +46,8 @@ export const ListItemWithAvatarDefaultProps = {
   a11y: {},
   customClass: {},
   customProps: {},
-  dataSelectorId: 'listItemWithAvatar'
+  dataSelectorId: 'listItemWithAvatar',
+  needMultiLineText: false
 };
 export const ListItemWithCheckBoxDefaultProps = {
   active: false,
@@ -57,7 +60,8 @@ export const ListItemWithCheckBoxDefaultProps = {
   a11y: {},
   customClass: {},
   customProps: {},
-  dataSelectorId: 'listItemWithCheckBox'
+  dataSelectorId: 'listItemWithCheckBox',
+  needMultiLineText: false
 };
 export const ListItemWithIconDefaultProps = {
   active: false,
@@ -73,7 +77,8 @@ export const ListItemWithIconDefaultProps = {
   a11y: {},
   customClass: '',
   customProps: {},
-  dataSelectorId: 'listItemWithIcon'
+  dataSelectorId: 'listItemWithIcon',
+  needMultiLineText: false
 };
 export const ListItemWithRadioDefaultProps = {
   active: false,
@@ -87,5 +92,6 @@ export const ListItemWithRadioDefaultProps = {
   a11y: {},
   customClass: {},
   customProps: {},
-  dataSelectorId: 'listItemWithRadio'
+  dataSelectorId: 'listItemWithRadio',
+  needMultiLineText: false
 };

package/es/ListItem/props/propTypes.js

@@ -24,7 +24,8 @@ export const ListContainer_Props = {
     ariaSelected: PropTypes.bool
   }),
   customClass: PropTypes.string,
-  customProps: PropTypes.object
+  customProps: PropTypes.object,
+  needMultiLineText: PropTypes.bool
 };
 export const ListItem_Props = {
   active: PropTypes.bool,
@@ -53,6 +54,7 @@ export const ListItem_Props = {
     role: PropTypes.string,
     ariaSelected: PropTypes.bool
   }),
+  needMultiLineText: PropTypes.bool,
   customClass: PropTypes.shape({
     customListItem: PropTypes.string,
     customTickIcon: PropTypes.string
@@ -97,6 +99,7 @@ export const ListItemWithAvatar_Props = {
     customAvatar: PropTypes.string,
     customAvatarTeam: PropTypes.string
   }),
+  needMultiLineText: PropTypes.bool,
   customProps: PropTypes.shape({
     ListItemProps: PropTypes.object
   })
@@ -123,6 +126,7 @@ export const ListItemWithCheckBox_Props = {
     role: PropTypes.string,
     ariaSelected: PropTypes.bool
   }),
+  needMultiLineText: PropTypes.bool,
   customClass: PropTypes.shape({
     customListItem: PropTypes.string,
     customCheckBox: PropTypes.string,
@@ -156,6 +160,7 @@ export const ListItemWithIcon_Props = {
     ariaSelected: PropTypes.bool,
     ariaHidden: PropTypes.bool
   }),
+  needMultiLineText: PropTypes.bool,
   customClass: PropTypes.string,
   customProps: PropTypes.shape({
     ListItemProps: PropTypes.object
@@ -183,6 +188,7 @@ export const ListItemWithRadio_Props = {
     role: PropTypes.string,
     ariaSelected: PropTypes.bool
   }),
+  needMultiLineText: PropTypes.bool,
   customClass: PropTypes.shape({
     customListItem: PropTypes.string,
     customRadio: PropTypes.string,

package/es/MultiSelect/MultiSelect.js

@@ -249,7 +249,8 @@ export class MultiSelectComponent extends React.Component {
     } = this.state;
     const {
       selectedOptions,
-      needLocalSearch
+      needLocalSearch,
+      keepSelectedOptions
     } = this.props;
     const {
       suggestions,
@@ -258,7 +259,8 @@ export class MultiSelectComponent extends React.Component {
       options,
       selectedOptions,
       searchStr: getSearchString(searchStr),
-      needSearch: needLocalSearch
+      needSearch: needLocalSearch,
+      keepSelectedOptions
     });
     this.suggestionsOrder = suggestionIds;
     return suggestions;
@@ -450,7 +452,8 @@ export class MultiSelectComponent extends React.Component {
   handleSelectOption(option, value, index, e) {
     const {
       selectedOptions,
-      isSearchClearOnSelect
+      isSearchClearOnSelect,
+      keepSelectedOptions
     } = this.props;
     const {
       searchStr
@@ -458,7 +461,15 @@ export class MultiSelectComponent extends React.Component {
     if (searchStr.trim() != '' && isSearchClearOnSelect) {
       this.handleSearch('');
     }
-    this.handleChange([...selectedOptions, option], e);
+    if (keepSelectedOptions && selectedOptions.indexOf(option) != -1) {
+      let newSelectedOptions = selectedOptions.filter(id => {
+        return id != option;
+      });
+      this.handleChange(newSelectedOptions, e);
+    } else {
+      this.handleChange([...selectedOptions, option], e);
+    }
+
     // e && e.stopPropagation && this.handlePopupClose(e);
   }
 
@@ -841,7 +852,8 @@ export class MultiSelectComponent extends React.Component {
       highLightedSelectOptions,
       options,
       isFetchingOptions,
-      isActive
+      isActive,
+      selectedOptionIds
     } = this.state;
     const suggestions = this.handleFilterSuggestions();
     const setAriaId = this.getNextAriaId();
@@ -985,6 +997,7 @@ export class MultiSelectComponent extends React.Component {
         needBorder: false,
         dataId: `${dataId}_Options`,
         palette: palette,
+        selectedOptions: selectedOptionIds,
         a11y: {
           role: 'option'
         }

package/es/MultiSelect/MultiSelectWithAvatar.js

@@ -1,3 +1,4 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 /**** Libraries ****/
 import React from 'react';
 import { MultiSelectWithAvatar_propTypes } from './props/propTypes';
@@ -99,8 +100,14 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
       customChildrenClass,
       isBoxPaddingNeed,
       needEffect,
-      isLoading
+      isLoading,
+      keepSelectedOptions,
+      customProps
     } = this.props;
+    let {
+      TextBoxProps = {},
+      SuggestionsProps = {}
+    } = customProps;
     const {
       clearText = 'Clear all'
     } = i18nKeys;
@@ -119,7 +126,8 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
       highLightedSelectOptions,
       options,
       isFetchingOptions,
-      isActive
+      isActive,
+      selectedOptionIds
     } = this.state;
     const suggestions = this.handleFilterSuggestions();
     const setAriaId = this.getNextAriaId();
@@ -183,7 +191,10 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
       customClass: {
         customTBoxWrap: style.custmInputWrapper
       },
-      autoComplete: false
+      autoComplete: false,
+      customProps: {
+        TextBoxProps: TextBoxProps
+      }
     }, /*#__PURE__*/React.createElement(Container, {
       isCover: false,
       alignBox: "row",
@@ -245,7 +256,8 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
         shrink: true,
         customClass: !tabletMode && dropBoxSize ? style[dropBoxSize] : '',
         eleRef: this.suggestionContainerRef
-      }, suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, {
+      }, suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, _extends({
+        needTick: keepSelectedOptions,
         suggestions: suggestions,
         getRef: this.suggestionItemRef,
         hoverOption: hoverOption,
@@ -254,10 +266,11 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
         needBorder: false,
         dataId: `${dataId}_Options`,
         palette: palette,
+        selectedOptions: selectedOptionIds,
         a11y: {
           role: 'option'
         }
-      }) : /*#__PURE__*/React.createElement(EmptyState, {
+      }, SuggestionsProps)) : /*#__PURE__*/React.createElement(EmptyState, {
         isLoading: isFetchingOptions,
         options: options,
         searchString: searchStr,

package/es/MultiSelect/props/defaultProps.js

@@ -106,7 +106,8 @@ export const MultiSelect_defaultProps = {
   needEffect: true,
   boxSize: 'default',
   isLoading: false,
-  dataSelectorId: 'multiSelect'
+  dataSelectorId: 'multiSelect',
+  keepSelectedOptions: false
 };
 export const MultiSelectHeader_defaultProps = {
   dataId: 'MultiSelectHeader'
@@ -138,7 +139,9 @@ export const MultiSelectWithAvatar_defaultProps = {
   isSearchClearOnSelect: true,
   needEffect: true,
   isLoading: false,
-  dataSelectorId: 'multiSelectWithAvatar'
+  dataSelectorId: 'multiSelectWithAvatar',
+  keepSelectedOptions: false,
+  customProps: {}
 };
 export const SelectedOptions_defaultProps = {
   size: 'medium'

package/es/MultiSelect/props/propTypes.js

@@ -239,7 +239,8 @@ export const MultiSelect_propTypes = {
   needEffect: PropTypes.bool,
   boxSize: PropTypes.string,
   isLoading: PropTypes.bool,
-  dataSelectorId: PropTypes.string
+  dataSelectorId: PropTypes.string,
+  keepSelectedOptions: PropTypes.bool
 };
 export const MultiSelectHeader_propTypes = {
   dataId: PropTypes.string,
@@ -294,6 +295,11 @@ export const MultiSelectWithAvatar_propTypes = {
   htmlId: PropTypes.string,
   isBoxPaddingNeed: PropTypes.bool,
   needEffect: PropTypes.bool,
+  keepSelectedOptions: PropTypes.bool,
+  customProps: PropTypes.shape({
+    SuggestionsProps: PropTypes.object,
+    DropBoxProps: PropTypes.object
+  }),
   /**** Popup props ****/
   isPopupOpen: PropTypes.bool,
   isPopupReady: PropTypes.bool,

package/es/utils/Common.js

@@ -349,7 +349,6 @@ export function isTextSelected() {
   let selectedText = '';
   if (window.getSelection) {
     selectedText = window.getSelection().toString();
-    console.log(selectedText, 'selectedText');
   } else if (document.getSelection) {
     selectedText = document.getSelection().toString();
   }

package/es/utils/dropDownUtils.js

@@ -21,9 +21,10 @@ const getSelectedValue = props => getIsEmptyValue(props.selectedValue) ? '' : pr
 const getSelectedFormatOptions = props => props.selectedFormatOptions || dummyObj;
 export const getPrefixText = props => props.prefixText || '';
 const getIsStartWithSearch = props => props.isStartsWithSearch;
+const getKeepSelectedOptions = props => props.keepSelectedOptions;
 const getDisabledOptions = props => props.disabledOptions || dummyArray;
 const getListItemProps = props => props.listItemProps || '';
-export const makeGetMultiSelectFilterSuggestions = () => createSelector([getOptions, getSelectedOptionsSel, getSearchStr, getNeedSearch, getIsStartWithSearch], (options, selectedOptions, searchStr, needSearch, isStartsWithSearch) => {
+export const makeGetMultiSelectFilterSuggestions = () => createSelector([getOptions, getSelectedOptionsSel, getSearchStr, getNeedSearch, getIsStartWithSearch, getKeepSelectedOptions], (options, selectedOptions, searchStr, needSearch, isStartsWithSearch, keepSelectedOptions) => {
   const suggestions = [];
   const suggestionIds = [];
   options.forEach(option => {
@@ -34,7 +35,7 @@ export const makeGetMultiSelectFilterSuggestions = () => createSelector([getOpti
     const valueString = getSearchString(value);
     const searchString = getSearchString(searchStr);
     const isMatch = needSearch ? isStartsWithSearch ? valueString.startsWith(searchString) : valueString.indexOf(searchString) !== -1 : true;
-    if (selectedOptions.indexOf(id) === -1 && isMatch) {
+    if (selectedOptions.indexOf(id) === -1 && isMatch || keepSelectedOptions) {
       suggestions.push(option);
       suggestionIds.push(id);
     }

package/lib/DropBox/DropBox.module.css

@@ -65,7 +65,6 @@
 }
 .xxlarge {
   width: var(--zd_size364);
-  max-width: var(--zd_size364);
 }
 .default {
   width: 100%;

package/lib/ListItem/ListItem.js

@@ -91,7 +91,8 @@ var ListItem = /*#__PURE__*/function (_React$Component) {
         dataSelectorId = _this$props4.dataSelectorId,
         a11y = _this$props4.a11y,
         customClass = _this$props4.customClass,
-        customProps = _this$props4.customProps;
+        customProps = _this$props4.customProps,
+        needMultiLineText = _this$props4.needMultiLineText;
       var _customProps$ListItem = customProps.ListItemProps,
         ListItemProps = _customProps$ListItem === void 0 ? {} : _customProps$ListItem,
         _customProps$Containe = customProps.ContainerProps,
@@ -129,7 +130,7 @@ var ListItem = /*#__PURE__*/function (_React$Component) {
       }, ContainerProps), value ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         shrink: true,
         adjust: true,
-        className: _ListItemModule["default"].value
+        className: needMultiLineText ? _ListItemModule["default"].multiLineValue : _ListItemModule["default"].value
       }, value) : null, children ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         shrink: true,
         adjust: true,

package/lib/ListItem/ListItem.module.css

@@ -48,15 +48,15 @@
   --listitem_border_color: var(--zdt_listitem_active_border);
 }
 [dir=ltr] .small {
-  --listitem_padding: var(--zd_size9) var(--zd_size3) var(--zd_size9)
+  --listitem_padding: var(--zd_size7) var(--zd_size3) var(--zd_size7)
     var(--zd_size5)
-    /*rtl: var(--zd_size9) var(--zd_size5) var(--zd_size9) var(--zd_size3)*/;
+    /*rtl: var(--zd_size7) var(--zd_size5) var(--zd_size7) var(--zd_size3)*/;
 }
 [dir=rtl] .small {
-  --listitem_padding: var(--zd_size9) var(--zd_size5) var(--zd_size9) var(--zd_size3);
+  --listitem_padding: var(--zd_size7) var(--zd_size5) var(--zd_size7) var(--zd_size3);
 }
 .medium {
-  --listitem_padding: var(--zd_size9) var(--zd_size20);
+  --listitem_padding: var(--zd_size7) var(--zd_size20);
   --listitem_min_height: var(--zd_size35);
 }
 .large {
@@ -74,6 +74,13 @@
 .children {
   composes: dotted from '../common/common.module.css';
 }
+.value, .multiLineValue {
+  line-height: var(--zd_size20);
+}
+.multiLineValue{
+  word-break: break-word;
+  composes: clamp from '../common/common.module.css'
+}
 .iconBox {
   width: var(--zd_size20);
   text-align: center;
@@ -178,20 +185,20 @@
   display: block;
 }
 [dir=ltr] .smallwithTick {
-  --listitem_padding: var(--zd_size9) var(--zd_size39) var(--zd_size9)
+  --listitem_padding: var(--zd_size7) var(--zd_size39) var(--zd_size7)
     var(--zd_size5)
-    /*rtl: var(--zd_size9) var(--zd_size5) var(--zd_size9) var(--zd_size39)*/;
+    /*rtl: var(--zd_size7) var(--zd_size5) var(--zd_size7) var(--zd_size39)*/;
 }
 [dir=rtl] .smallwithTick {
-  --listitem_padding: var(--zd_size9) var(--zd_size5) var(--zd_size9) var(--zd_size39);
+  --listitem_padding: var(--zd_size7) var(--zd_size5) var(--zd_size7) var(--zd_size39);
 }
 [dir=ltr] .mediumwithTick {
-  --listitem_padding: var(--zd_size9) var(--zd_size39) var(--zd_size9)
+  --listitem_padding: var(--zd_size7) var(--zd_size39) var(--zd_size7)
     var(--zd_size20)
-    /*rtl: var(--zd_size9) var(--zd_size20) var(--zd_size9) var(--zd_size39)*/;
+    /*rtl: var(--zd_size7) var(--zd_size20) var(--zd_size7) var(--zd_size39)*/;
 }
 [dir=rtl] .mediumwithTick {
-  --listitem_padding: var(--zd_size9) var(--zd_size20) var(--zd_size9) var(--zd_size39);
+  --listitem_padding: var(--zd_size7) var(--zd_size20) var(--zd_size7) var(--zd_size39);
 }
 [dir=ltr] .largewithTick {
   --listitem_padding: var(--zd_size10) var(--zd_size39) var(--zd_size10)

package/lib/ListItem/ListItemWithAvatar.js

@@ -95,7 +95,8 @@ var ListItemWithAvatar = /*#__PURE__*/function (_React$PureComponent) {
         avatarPalette = _this$props4.avatarPalette,
         a11y = _this$props4.a11y,
         customClass = _this$props4.customClass,
-        customProps = _this$props4.customProps;
+        customProps = _this$props4.customProps,
+        needMultiLineText = _this$props4.needMultiLineText;
       var _customProps$ListItem = customProps.ListItemProps,
         ListItemProps = _customProps$ListItem === void 0 ? {} : _customProps$ListItem,
         _customProps$Containe = customProps.ContainerProps,
@@ -155,7 +156,7 @@ var ListItemWithAvatar = /*#__PURE__*/function (_React$PureComponent) {
         flexible: true,
         shrink: true,
         "data-title": isDisabled ? null : title,
-        className: _ListItemModule["default"].value
+        className: needMultiLineText ? _ListItemModule["default"].multiLineValue : _ListItemModule["default"].value
       }, value) : null, needTick && active ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: _ListItemModule["default"].tickIcon,
         "aria-hidden": ariaHidden,

package/lib/ListItem/ListItemWithCheckBox.js

@@ -85,7 +85,8 @@ var ListItemWithCheckBox = /*#__PURE__*/function (_React$Component) {
         disableTitle = _this$props4.disableTitle,
         a11y = _this$props4.a11y,
         customClass = _this$props4.customClass,
-        customProps = _this$props4.customProps;
+        customProps = _this$props4.customProps,
+        needMultiLineText = _this$props4.needMultiLineText;
       var _customProps$ListItem = customProps.ListItemProps,
         ListItemProps = _customProps$ListItem === void 0 ? {} : _customProps$ListItem,
         _customProps$Containe = customProps.ContainerProps,
@@ -128,7 +129,7 @@ var ListItemWithCheckBox = /*#__PURE__*/function (_React$Component) {
         flexible: true,
         shrink: true,
         "data-title": isDisabled ? null : title,
-        className: _ListItemModule["default"].value
+        className: needMultiLineText ? _ListItemModule["default"].multiLineValue : _ListItemModule["default"].value
       }, value));
     }
   }]);

package/lib/ListItem/ListItemWithIcon.js

@@ -93,7 +93,8 @@ var ListItemWithIcon = /*#__PURE__*/function (_React$Component) {
         disableTitle = _this$props4.disableTitle,
         a11y = _this$props4.a11y,
         customClass = _this$props4.customClass,
-        customProps = _this$props4.customProps;
+        customProps = _this$props4.customProps,
+        needMultiLineText = _this$props4.needMultiLineText;
       var _customProps$ListItem = customProps.ListItemProps,
         ListItemProps = _customProps$ListItem === void 0 ? {} : _customProps$ListItem,
         _customProps$Containe = customProps.ContainerProps,
@@ -136,7 +137,7 @@ var ListItemWithIcon = /*#__PURE__*/function (_React$Component) {
       }) : null, value && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true,
         shrink: true,
-        className: _ListItemModule["default"].value,
+        className: needMultiLineText ? _ListItemModule["default"].multiLineValue : _ListItemModule["default"].value,
         "data-title": isDisabled ? null : title,
         dataId: "".concat(dataIdString, "_Text")
       }, value), needTick && active ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {

package/lib/ListItem/ListItemWithRadio.js

@@ -86,7 +86,8 @@ var ListItemWithRadio = /*#__PURE__*/function (_React$Component) {
         disableTitle = _this$props4.disableTitle,
         a11y = _this$props4.a11y,
         customClass = _this$props4.customClass,
-        customProps = _this$props4.customProps;
+        customProps = _this$props4.customProps,
+        needMultiLineText = _this$props4.needMultiLineText;
       var _customProps$ListItem = customProps.ListItemProps,
         ListItemProps = _customProps$ListItem === void 0 ? {} : _customProps$ListItem,
         _customProps$Containe = customProps.ContainerProps,
@@ -130,7 +131,7 @@ var ListItemWithRadio = /*#__PURE__*/function (_React$Component) {
         flexible: true,
         shrink: true,
         "data-title": disableTitle ? null : title,
-        className: _ListItemModule["default"].value
+        className: needMultiLineText ? _ListItemModule["default"].multiLineValue : _ListItemModule["default"].value
       }, value));
     }
   }]);

package/lib/ListItem/props/defaultProps.js

@@ -17,7 +17,8 @@ var ListContainerDefaultProps = {
   a11y: {},
   customClass: '',
   customProps: {},
-  dataSelectorId: 'listContainer'
+  dataSelectorId: 'listContainer',
+  needMultiLineText: false
 };
 exports.ListContainerDefaultProps = ListContainerDefaultProps;
 var ListItemDefaultProps = {
@@ -34,7 +35,8 @@ var ListItemDefaultProps = {
   a11y: {},
   customClass: {},
   customProps: {},
-  dataSelectorId: 'listItem'
+  dataSelectorId: 'listItem',
+  needMultiLineText: false
 };
 exports.ListItemDefaultProps = ListItemDefaultProps;
 var ListItemWithAvatarDefaultProps = {
@@ -52,7 +54,8 @@ var ListItemWithAvatarDefaultProps = {
   a11y: {},
   customClass: {},
   customProps: {},
-  dataSelectorId: 'listItemWithAvatar'
+  dataSelectorId: 'listItemWithAvatar',
+  needMultiLineText: false
 };
 exports.ListItemWithAvatarDefaultProps = ListItemWithAvatarDefaultProps;
 var ListItemWithCheckBoxDefaultProps = {
@@ -66,7 +69,8 @@ var ListItemWithCheckBoxDefaultProps = {
   a11y: {},
   customClass: {},
   customProps: {},
-  dataSelectorId: 'listItemWithCheckBox'
+  dataSelectorId: 'listItemWithCheckBox',
+  needMultiLineText: false
 };
 exports.ListItemWithCheckBoxDefaultProps = ListItemWithCheckBoxDefaultProps;
 var ListItemWithIconDefaultProps = {
@@ -83,7 +87,8 @@ var ListItemWithIconDefaultProps = {
   a11y: {},
   customClass: '',
   customProps: {},
-  dataSelectorId: 'listItemWithIcon'
+  dataSelectorId: 'listItemWithIcon',
+  needMultiLineText: false
 };
 exports.ListItemWithIconDefaultProps = ListItemWithIconDefaultProps;
 var ListItemWithRadioDefaultProps = {
@@ -98,6 +103,7 @@ var ListItemWithRadioDefaultProps = {
   a11y: {},
   customClass: {},
   customProps: {},
-  dataSelectorId: 'listItemWithRadio'
+  dataSelectorId: 'listItemWithRadio',
+  needMultiLineText: false
 };
 exports.ListItemWithRadioDefaultProps = ListItemWithRadioDefaultProps;

package/lib/ListItem/props/propTypes.js

@@ -36,7 +36,8 @@ var ListContainer_Props = {
     ariaSelected: _propTypes["default"].bool
   }),
   customClass: _propTypes["default"].string,
-  customProps: _propTypes["default"].object
+  customProps: _propTypes["default"].object,
+  needMultiLineText: _propTypes["default"].bool
 };
 exports.ListContainer_Props = ListContainer_Props;
 var ListItem_Props = {
@@ -66,6 +67,7 @@ var ListItem_Props = {
     role: _propTypes["default"].string,
     ariaSelected: _propTypes["default"].bool
   }),
+  needMultiLineText: _propTypes["default"].bool,
   customClass: _propTypes["default"].shape({
     customListItem: _propTypes["default"].string,
     customTickIcon: _propTypes["default"].string
@@ -87,7 +89,7 @@ var ListItemWithAvatar_Props = (_ListItemWithAvatar_P = {
   customListItem: _propTypes["default"].string,
   customAvatar: _propTypes["default"].string,
   customAvatarTeam: _propTypes["default"].string
-})), _defineProperty(_ListItemWithAvatar_P, "customProps", _propTypes["default"].shape({
+})), _defineProperty(_ListItemWithAvatar_P, "needMultiLineText", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "customProps", _propTypes["default"].shape({
   ListItemProps: _propTypes["default"].object
 })), _ListItemWithAvatar_P);
 exports.ListItemWithAvatar_Props = ListItemWithAvatar_Props;
@@ -113,6 +115,7 @@ var ListItemWithCheckBox_Props = {
     role: _propTypes["default"].string,
     ariaSelected: _propTypes["default"].bool
   }),
+  needMultiLineText: _propTypes["default"].bool,
   customClass: _propTypes["default"].shape({
     customListItem: _propTypes["default"].string,
     customCheckBox: _propTypes["default"].string,
@@ -147,6 +150,7 @@ var ListItemWithIcon_Props = {
     ariaSelected: _propTypes["default"].bool,
     ariaHidden: _propTypes["default"].bool
   }),
+  needMultiLineText: _propTypes["default"].bool,
   customClass: _propTypes["default"].string,
   customProps: _propTypes["default"].shape({
     ListItemProps: _propTypes["default"].object
@@ -175,6 +179,7 @@ var ListItemWithRadio_Props = {
     role: _propTypes["default"].string,
     ariaSelected: _propTypes["default"].bool
   }),
+  needMultiLineText: _propTypes["default"].bool,
   customClass: _propTypes["default"].shape({
     customListItem: _propTypes["default"].string,
     customRadio: _propTypes["default"].string,

package/lib/MultiSelect/MultiSelect.js

@@ -276,12 +276,14 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         searchStr = _this$state3$searchSt === void 0 ? '' : _this$state3$searchSt;
       var _this$props4 = this.props,
         selectedOptions = _this$props4.selectedOptions,
-        needLocalSearch = _this$props4.needLocalSearch;
+        needLocalSearch = _this$props4.needLocalSearch,
+        keepSelectedOptions = _this$props4.keepSelectedOptions;
       var _this$getFilterSugges = this.getFilterSuggestions({
           options: options,
           selectedOptions: selectedOptions,
           searchStr: (0, _Common.getSearchString)(searchStr),
-          needSearch: needLocalSearch
+          needSearch: needLocalSearch,
+          keepSelectedOptions: keepSelectedOptions
         }),
         suggestions = _this$getFilterSugges.suggestions,
         suggestionIds = _this$getFilterSugges.suggestionIds;
@@ -476,12 +478,21 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
     value: function handleSelectOption(option, value, index, e) {
       var _this$props6 = this.props,
         selectedOptions = _this$props6.selectedOptions,
-        isSearchClearOnSelect = _this$props6.isSearchClearOnSelect;
+        isSearchClearOnSelect = _this$props6.isSearchClearOnSelect,
+        keepSelectedOptions = _this$props6.keepSelectedOptions;
       var searchStr = this.state.searchStr;
       if (searchStr.trim() != '' && isSearchClearOnSelect) {
         this.handleSearch('');
       }
-      this.handleChange([].concat(_toConsumableArray(selectedOptions), [option]), e);
+      if (keepSelectedOptions && selectedOptions.indexOf(option) != -1) {
+        var newSelectedOptions = selectedOptions.filter(function (id) {
+          return id != option;
+        });
+        this.handleChange(newSelectedOptions, e);
+      } else {
+        this.handleChange([].concat(_toConsumableArray(selectedOptions), [option]), e);
+      }
+
       // e && e.stopPropagation && this.handlePopupClose(e);
     }
   }, {
@@ -873,7 +884,8 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         highLightedSelectOptions = _this$state8.highLightedSelectOptions,
         options = _this$state8.options,
         isFetchingOptions = _this$state8.isFetchingOptions,
-        isActive = _this$state8.isActive;
+        isActive = _this$state8.isActive,
+        selectedOptionIds = _this$state8.selectedOptionIds;
       var suggestions = this.handleFilterSuggestions();
       var setAriaId = this.getNextAriaId();
       var ariaErrorId = this.getNextAriaId();
@@ -1012,6 +1024,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
           needBorder: false,
           dataId: "".concat(dataId, "_Options"),
           palette: palette,
+          selectedOptions: selectedOptionIds,
           a11y: {
             role: 'option'
           }

package/lib/MultiSelect/MultiSelectWithAvatar.js

@@ -27,6 +27,7 @@ var _MultiSelectModule = _interopRequireDefault(require("./MultiSelect.module.cs
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
@@ -121,7 +122,13 @@ var MultiSelectWithAvatarComponent = /*#__PURE__*/function (_MultiSelectComponen
         customChildrenClass = _this$props.customChildrenClass,
         isBoxPaddingNeed = _this$props.isBoxPaddingNeed,
         needEffect = _this$props.needEffect,
-        isLoading = _this$props.isLoading;
+        isLoading = _this$props.isLoading,
+        keepSelectedOptions = _this$props.keepSelectedOptions,
+        customProps = _this$props.customProps;
+      var _customProps$TextBoxP = customProps.TextBoxProps,
+        TextBoxProps = _customProps$TextBoxP === void 0 ? {} : _customProps$TextBoxP,
+        _customProps$Suggesti = customProps.SuggestionsProps,
+        SuggestionsProps = _customProps$Suggesti === void 0 ? {} : _customProps$Suggesti;
       var _i18nKeys = i18nKeys,
         _i18nKeys$clearText = _i18nKeys.clearText,
         clearText = _i18nKeys$clearText === void 0 ? 'Clear all' : _i18nKeys$clearText;
@@ -139,7 +146,8 @@ var MultiSelectWithAvatarComponent = /*#__PURE__*/function (_MultiSelectComponen
         highLightedSelectOptions = _this$state.highLightedSelectOptions,
         options = _this$state.options,
         isFetchingOptions = _this$state.isFetchingOptions,
-        isActive = _this$state.isActive;
+        isActive = _this$state.isActive,
+        selectedOptionIds = _this$state.selectedOptionIds;
       var suggestions = this.handleFilterSuggestions();
       var setAriaId = this.getNextAriaId();
       var ariaErrorId = this.getNextAriaId();
@@ -201,7 +209,10 @@ var MultiSelectWithAvatarComponent = /*#__PURE__*/function (_MultiSelectComponen
         customClass: {
           customTBoxWrap: _MultiSelectModule["default"].custmInputWrapper
         },
-        autoComplete: false
+        autoComplete: false,
+        customProps: {
+          TextBoxProps: TextBoxProps
+        }
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         isCover: false,
         alignBox: "row",
@@ -261,7 +272,8 @@ var MultiSelectWithAvatarComponent = /*#__PURE__*/function (_MultiSelectComponen
           shrink: true,
           customClass: !tabletMode && dropBoxSize ? _MultiSelectModule["default"][dropBoxSize] : '',
           eleRef: _this2.suggestionContainerRef
-        }, suggestions.length ? /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], {
+        }, suggestions.length ? /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], _extends({
+          needTick: keepSelectedOptions,
           suggestions: suggestions,
           getRef: _this2.suggestionItemRef,
           hoverOption: hoverOption,
@@ -270,10 +282,11 @@ var MultiSelectWithAvatarComponent = /*#__PURE__*/function (_MultiSelectComponen
           needBorder: false,
           dataId: "".concat(dataId, "_Options"),
           palette: palette,
+          selectedOptions: selectedOptionIds,
           a11y: {
             role: 'option'
           }
-        }) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
+        }, SuggestionsProps)) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
           isLoading: isFetchingOptions,
           options: options,
           searchString: searchStr,

package/lib/MultiSelect/props/defaultProps.js

@@ -115,7 +115,8 @@ var MultiSelect_defaultProps = {
   needEffect: true,
   boxSize: 'default',
   isLoading: false,
-  dataSelectorId: 'multiSelect'
+  dataSelectorId: 'multiSelect',
+  keepSelectedOptions: false
 };
 exports.MultiSelect_defaultProps = MultiSelect_defaultProps;
 var MultiSelectHeader_defaultProps = {
@@ -149,7 +150,9 @@ var MultiSelectWithAvatar_defaultProps = {
   isSearchClearOnSelect: true,
   needEffect: true,
   isLoading: false,
-  dataSelectorId: 'multiSelectWithAvatar'
+  dataSelectorId: 'multiSelectWithAvatar',
+  keepSelectedOptions: false,
+  customProps: {}
 };
 exports.MultiSelectWithAvatar_defaultProps = MultiSelectWithAvatar_defaultProps;
 var SelectedOptions_defaultProps = {

package/lib/MultiSelect/props/propTypes.js

@@ -249,7 +249,8 @@ var MultiSelect_propTypes = {
   needEffect: _propTypes["default"].bool,
   boxSize: _propTypes["default"].string,
   isLoading: _propTypes["default"].bool,
-  dataSelectorId: _propTypes["default"].string
+  dataSelectorId: _propTypes["default"].string,
+  keepSelectedOptions: _propTypes["default"].bool
 };
 exports.MultiSelect_propTypes = MultiSelect_propTypes;
 var MultiSelectHeader_propTypes = {
@@ -306,6 +307,11 @@ var MultiSelectWithAvatar_propTypes = {
   htmlId: _propTypes["default"].string,
   isBoxPaddingNeed: _propTypes["default"].bool,
   needEffect: _propTypes["default"].bool,
+  keepSelectedOptions: _propTypes["default"].bool,
+  customProps: _propTypes["default"].shape({
+    SuggestionsProps: _propTypes["default"].object,
+    DropBoxProps: _propTypes["default"].object
+  }),
   /**** Popup props ****/
   isPopupOpen: _propTypes["default"].bool,
   isPopupReady: _propTypes["default"].bool,

package/lib/utils/Common.js

@@ -396,7 +396,6 @@ function isTextSelected() {
   var selectedText = '';
   if (window.getSelection) {
     selectedText = window.getSelection().toString();
-    console.log(selectedText, 'selectedText');
   } else if (document.getSelection) {
     selectedText = document.getSelection().toString();
   }

package/lib/utils/dropDownUtils.js

@@ -86,6 +86,9 @@ exports.getPrefixText = getPrefixText;
 var getIsStartWithSearch = function getIsStartWithSearch(props) {
   return props.isStartsWithSearch;
 };
+var getKeepSelectedOptions = function getKeepSelectedOptions(props) {
+  return props.keepSelectedOptions;
+};
 var getDisabledOptions = function getDisabledOptions(props) {
   return props.disabledOptions || dummyArray;
 };
@@ -93,7 +96,7 @@ var getListItemProps = function getListItemProps(props) {
   return props.listItemProps || '';
 };
 var makeGetMultiSelectFilterSuggestions = function makeGetMultiSelectFilterSuggestions() {
-  return (0, _reselect.createSelector)([getOptions, getSelectedOptionsSel, getSearchStr, getNeedSearch, getIsStartWithSearch], function (options, selectedOptions, searchStr, needSearch, isStartsWithSearch) {
+  return (0, _reselect.createSelector)([getOptions, getSelectedOptionsSel, getSearchStr, getNeedSearch, getIsStartWithSearch, getKeepSelectedOptions], function (options, selectedOptions, searchStr, needSearch, isStartsWithSearch, keepSelectedOptions) {
     var suggestions = [];
     var suggestionIds = [];
     options.forEach(function (option) {
@@ -103,7 +106,7 @@ var makeGetMultiSelectFilterSuggestions = function makeGetMultiSelectFilterSugge
       var valueString = (0, _Common.getSearchString)(value);
       var searchString = (0, _Common.getSearchString)(searchStr);
       var isMatch = needSearch ? isStartsWithSearch ? valueString.startsWith(searchString) : valueString.indexOf(searchString) !== -1 : true;
-      if (selectedOptions.indexOf(id) === -1 && isMatch) {
+      if (selectedOptions.indexOf(id) === -1 && isMatch || keepSelectedOptions) {
         suggestions.push(option);
         suggestionIds.push(id);
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.0.0-alpha-261",
+  "version": "1.0.0-alpha-263",
   "main": "es/index.js",
   "module": "es/index.js",
   "private": false,
@@ -47,12 +47,12 @@
   },
   "devDependencies": {
     "@zohodesk/docstool": "1.0.0-alpha-2",
-    "@zohodesk/variables": "1.0.0-beta.29",
+    "@zohodesk/variables": "1.0.0-beta.30",
     "@zohodesk/icons": "1.0.0-beta.119",
     "@zohodesk/virtualizer": "1.0.3",
     "velocity-react": "1.4.3",
     "react-sortable-hoc": "^0.8.3",
-    "@zohodesk/svg": "1.0.0-beta.48",
+    "@zohodesk/svg": "1.0.0-beta.54",
     "@zohodesk/a11y": "1.3.7"
   },
   "dependencies": {
@@ -63,8 +63,8 @@
   },
   "peerDependencies": {
     "@zohodesk/icons": "1.0.0-beta.119",
-    "@zohodesk/variables": "1.0.0-beta.29",
-    "@zohodesk/svg": "1.0.0-beta.49",
+    "@zohodesk/variables": "1.0.0-beta.30",
+    "@zohodesk/svg": "1.0.0-beta.54",
     "@zohodesk/virtualizer": "1.0.3",
     "velocity-react": "1.4.3",
     "react-sortable-hoc": "^0.8.3",