@zohodesk/components 1.0.0-temp-129 → 1.0.0-temp-130

package/es/MultiSelect/MultiSelect.js

@@ -249,7 +249,8 @@ export class MultiSelectComponent extends React.Component {
     } = this.state;
     const {
       selectedOptions,
-      needLocalSearch
+      needLocalSearch,
+      isNeedTick
     } = this.props;
     const {
       suggestions,
@@ -258,7 +259,8 @@ export class MultiSelectComponent extends React.Component {
       options,
       selectedOptions,
       searchStr: getSearchString(searchStr),
-      needSearch: needLocalSearch
+      needSearch: needLocalSearch,
+      isNeedTick
     });
     this.suggestionsOrder = suggestionIds;
     return suggestions;
@@ -450,7 +452,8 @@ export class MultiSelectComponent extends React.Component {
   handleSelectOption(option, value, index, e) {
     const {
       selectedOptions,
-      isSearchClearOnSelect
+      isSearchClearOnSelect,
+      isNeedTick
     } = 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 (isNeedTick && 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);
   }
 

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,13 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
       customChildrenClass,
       isBoxPaddingNeed,
       needEffect,
-      isLoading
+      isLoading,
+      isNeedTick
     } = this.props;
+    let {
+      TextBoxProps = {},
+      SuggestionsProps = {}
+    } = customProps;
     const {
       clearText = 'Clear all'
     } = i18nKeys;
@@ -183,7 +189,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 +254,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: isNeedTick,
         suggestions: suggestions,
         getRef: this.suggestionItemRef,
         hoverOption: hoverOption,
@@ -256,8 +266,9 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
         palette: palette,
         a11y: {
           role: 'option'
-        }
-      }) : /*#__PURE__*/React.createElement(EmptyState, {
+        },
+        selectedOptions: this.props.selectedOptions
+      }, 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',
+  isNeedTick: 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',
+  isNeedTick: 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,
+  isNeedTick: 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,
+  isNeedTick: PropTypes.bool,
+  customProps: PropTypes.shape({
+    SuggestionsProps: PropTypes.object,
+    DropBoxProps: PropTypes.object
+  }),
   /**** Popup props ****/
   isPopupOpen: PropTypes.bool,
   isPopupReady: PropTypes.bool,

package/es/index.js

@@ -1,7 +1,6 @@
 // export { default as React } from 'react';
 // export { default as ReactDOM } from 'react-dom';
 // export { renderToStaticMarkup } from 'react-dom/server';
-export { default as Grid } from './ucl/Grid';
 export * from './Layout';
 // export { default as Layout__default } from './Layout/docs/Layout__default.docs';
 // export { default as Layout__two_Column } from './Layout/docs/Layout__two_Column.docs';

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 getIsNeedTick = props => props.isNeedTick;
 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, getIsNeedTick], (options, selectedOptions, searchStr, needSearch, isStartsWithSearch, isNeedTick) => {
   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 || isNeedTick) {
       suggestions.push(option);
       suggestionIds.push(id);
     }

package/lib/MultiSelect/MultiSelect.js

@@ -274,12 +274,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,
+        isNeedTick = _this$props4.isNeedTick;
       var _this$getFilterSugges = this.getFilterSuggestions({
           options: options,
           selectedOptions: selectedOptions,
           searchStr: (0, _Common.getSearchString)(searchStr),
-          needSearch: needLocalSearch
+          needSearch: needLocalSearch,
+          isNeedTick: isNeedTick
         }),
         suggestions = _this$getFilterSugges.suggestions,
         suggestionIds = _this$getFilterSugges.suggestionIds;
@@ -474,12 +476,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,
+        isNeedTick = _this$props6.isNeedTick;
       var searchStr = this.state.searchStr;
       if (searchStr.trim() != '' && isSearchClearOnSelect) {
         this.handleSearch('');
       }
-      this.handleChange([].concat(_toConsumableArray(selectedOptions), [option]), e);
+      if (isNeedTick && 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);
     }
   }, {

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, 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; }
@@ -119,7 +120,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,
+        isNeedTick = _this$props.isNeedTick;
+      var _customProps = customProps,
+        _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;
@@ -199,7 +206,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",
@@ -259,7 +269,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: isNeedTick,
           suggestions: suggestions,
           getRef: _this2.suggestionItemRef,
           hoverOption: hoverOption,
@@ -270,8 +281,9 @@ var MultiSelectWithAvatarComponent = /*#__PURE__*/function (_MultiSelectComponen
           palette: palette,
           a11y: {
             role: 'option'
-          }
-        }) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
+          },
+          selectedOptions: _this2.props.selectedOptions
+        }, 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',
+  isNeedTick: 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',
+  isNeedTick: 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,
+  isNeedTick: _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,
+  isNeedTick: _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/index.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 var _exportNames = {
-  Grid: true,
   AppContainer: true,
   Accordion: true,
   Animation: true,
@@ -135,12 +134,6 @@ Object.defineProperty(exports, "DropDownHeading", {
     return _DropDownHeading["default"];
   }
 });
-Object.defineProperty(exports, "Grid", {
-  enumerable: true,
-  get: function get() {
-    return _Grid["default"];
-  }
-});
 Object.defineProperty(exports, "GroupSelect", {
   enumerable: true,
   get: function get() {
@@ -327,7 +320,6 @@ Object.defineProperty(exports, "VelocityAnimationGroup", {
     return _VelocityAnimationGroup["default"];
   }
 });
-var _Grid = _interopRequireDefault(require("./ucl/Grid"));
 var _Layout = require("./Layout");
 Object.keys(_Layout).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/lib/utils/dropDownUtils.js

@@ -84,6 +84,9 @@ exports.getPrefixText = getPrefixText;
 var getIsStartWithSearch = function getIsStartWithSearch(props) {
   return props.isStartsWithSearch;
 };
+var getIsNeedTick = function getIsNeedTick(props) {
+  return props.isNeedTick;
+};
 var getDisabledOptions = function getDisabledOptions(props) {
   return props.disabledOptions || dummyArray;
 };
@@ -91,7 +94,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, getIsNeedTick], function (options, selectedOptions, searchStr, needSearch, isStartsWithSearch, isNeedTick) {
     var suggestions = [];
     var suggestionIds = [];
     options.forEach(function (option) {
@@ -101,7 +104,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 || isNeedTick) {
         suggestions.push(option);
         suggestionIds.push(id);
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.0.0-temp-129",
+  "version": "1.0.0-temp-130",
   "main": "es/index.js",
   "module": "es/index.js",
   "private": false,
@@ -56,8 +56,6 @@
     "@zohodesk/a11y": "1.3.7"
   },
   "dependencies": {
-    "@zohodesk/hooks": "^1.3.8",
-    "@zohodesk/theme": "^1.3.2",
     "hoist-non-react-statics": "3.0.1",
     "react-transition-group": "2.5.0",
     "reselect": "4.0.0",

package/es/ucl/Grid/Grid.js

@@ -1,42 +0,0 @@
-import React from 'react';
-import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
-import defaultProps from './props/defaultProps';
-import propTypes from './props/propTypes';
-import constantProps from './props/propConstants';
-import cssJSLogic from './css/cssJSLogic';
-import style from './css/Grid.module.css';
-const additionStyle = ['base'];
-const Grid = /*#__PURE__*/React.forwardRef((props, ref) => {
-  let {
-    tagName,
-    customStyle,
-    customId,
-    tagAttributes,
-    tagGeneralAttributes,
-    children,
-    a11y
-  } = props;
-  //  external customization - need memorize?
-  let newStyle = useMergeStyle(style, customStyle, additionStyle);
-  //  css classname added based on logic
-  const className = cssJSLogic(props, newStyle);
-  return /*#__PURE__*/React.createElement(tagName, {
-    ...tagGeneralAttributes,
-    'data-id': customId,
-    className,
-    ref,
-    ...tagAttributes,
-    ...a11y
-  }, children);
-});
-Grid.displayName = 'Grid';
-Grid.defaultProps = defaultProps;
-Grid.propTypes = propTypes;
-Grid.constantProps = constantProps;
-export default Grid;
-Grid.docs = {
-  componentGroup: 'Grid',
-  folderName: 'Style Guide',
-  description: ' ',
-  external: false
-};