@zohodesk/components 1.0.0-temp-230.1 → 1.0.0-temp-234

package/lib/TextBoxIcon/props/propTypes.js

@@ -57,7 +57,8 @@ var propTypes = _objectSpread(_objectSpread({}, _propTypes2.propTypes), {}, {
   customClass: _propTypes["default"].shape({
     customTBoxWrap: _propTypes["default"].string,
     customTextBox: _propTypes["default"].string,
-    customTBoxIcon: _propTypes["default"].string
+    customTBoxIcon: _propTypes["default"].string,
+    customTBoxLine: _propTypes["default"].string
   }),
   iconOnHover: _propTypes["default"].bool,
   isFocus: _propTypes["default"].bool,

package/lib/utils/Common.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.DUMMY_OBJECT = exports.DUMMY_FUNCTION = exports.DUMMY_ARRAY = void 0;
+exports.DUMMY_OBJECT = exports.DUMMY_ARRAY = void 0;
 exports.bind = bind;
 exports.bytesToSize = bytesToSize;
 exports.cancelBubblingEffect = cancelBubblingEffect;
@@ -475,7 +475,7 @@ function getElementSpace(elementRef) {
 
 function getSearchString() {
   var charachers = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-  return (charachers || '').toString().toLowerCase(); //.replace(/\s+/g, '');
+  return (charachers || '').toString().toLowerCase().trim(); //.replace(/\s+/g, '');
 }
 
 function findScrollEnd(element) {
@@ -515,11 +515,7 @@ function isTextSelected() {
   return false;
 }
 
-var DUMMY_ARRAY = Object.freeze([]);
-exports.DUMMY_ARRAY = DUMMY_ARRAY;
-var DUMMY_OBJECT = Object.freeze({});
+var DUMMY_OBJECT = {};
 exports.DUMMY_OBJECT = DUMMY_OBJECT;
-
-var DUMMY_FUNCTION = function DUMMY_FUNCTION() {};
-
-exports.DUMMY_FUNCTION = DUMMY_FUNCTION;
+var DUMMY_ARRAY = [];
+exports.DUMMY_ARRAY = DUMMY_ARRAY;

package/lib/utils/dropDownUtils.js

@@ -9,10 +9,6 @@ var _reselect = require("reselect");
 
 var _Common = require("./Common");
 
-var _selectn = _interopRequireDefault(require("selectn"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -56,6 +52,10 @@ var getOptionsOrder = function getOptionsOrder(props) {
   return props.optionsOrder || dummyArray;
 };
 
+var getLimit = function getLimit(props) {
+  return props.limit || 0;
+};
+
 var getSelectedOptionsSel = function getSelectedOptionsSel(props) {
   return props.selectedOptions || dummyArray;
 };
@@ -152,8 +152,14 @@ var getListItemProps = function getListItemProps(props) {
   return props.listItemProps || '';
 };
 
+var getlistItemCustomProps = function getlistItemCustomProps(props) {
+  return props.listItemCustomProps || dummyObj;
+};
+
+var defaultSearchFields = ['value'];
+
 var getSearchFields = function getSearchFields(props) {
-  return props.searchFields || ['value'];
+  return props.searchFields || defaultSearchFields;
 }; // const isObjectContainsSearchString = (searchFields = [], searchStr = '', obj) => {
 //   const matchedFields = searchFields.filter(element => {
 //     return getSearchString(obj[element]).indexOf(searchStr) !== -1
@@ -263,7 +269,7 @@ var extractOptionIdFromJson = function extractOptionIdFromJson(id, localData) {
 exports.extractOptionIdFromJson = extractOptionIdFromJson;
 
 var makeFormatOptions = function makeFormatOptions() {
-  return (0, _reselect.createSelector)([getOptions, getValueField, getTextField, getImageField, getPrefixText, getIconName, getIconSize, getOptionType, getDisabledOptions, getListItemProps, getAllowValueFallback, getSearchFields, getSecondaryField], function (options, valueField, textField, imageField, prefixText, iconName, iconSize, optionType, disabledOptions, listItemProps, allowValueFallback, searchFields, secondaryField) {
+  return (0, _reselect.createSelector)([getOptions, getValueField, getTextField, getImageField, getPrefixText, getIconName, getIconSize, getOptionType, getDisabledOptions, getListItemProps, getlistItemCustomProps, getAllowValueFallback, getSearchFields, getSecondaryField], function (options, valueField, textField, imageField, prefixText, iconName, iconSize, optionType, disabledOptions, listItemProps, listItemCustomProps, allowValueFallback, searchFields, secondaryField) {
     var revampOptions = [];
     var remvampOptionIds = [];
     var normalizedAllOptions = {};
@@ -278,12 +284,12 @@ var makeFormatOptions = function makeFormatOptions() {
             impOptionType = option.optionType,
             impIconName = option.iconName,
             impIconSize = option.iconSize,
-            listStyle = option.listItemProps;
+            listStyle = option.listItemProps,
+            listStyleCustomProps = option.listItemCustomProps;
         var id = _typeof(option) === 'object' ? option[impValueField || valueField] : option;
         var value = _typeof(option) === 'object' ? option[impTextField || textField] : allowValueFallback ? option : '';
         var secondaryValue = _typeof(option) === 'object' ? option[impSecondaryField || secondaryField] : '';
-        var photoURL = _typeof(option) === 'object' ? option[impImageField || imageField] : '';
-        var colorCode = (0, _selectn["default"])('colorCode', option); // grouping options (group select/MultiSelect)
+        var photoURL = _typeof(option) === 'object' ? option[impImageField || imageField] : ''; // grouping options (group select/MultiSelect)
 
         id = !(0, _Common.getIsEmptyValue)(id) ? optionIdGrouping(id, prefixText) : '';
         var additionalSearchFieldData = searchFields.reduce(function (value, item) {
@@ -324,8 +330,8 @@ var makeFormatOptions = function makeFormatOptions() {
             optionDetails.listItemProps = listStyle || listItemProps;
           }
 
-          if (colorCode) {
-            optionDetails.colorCode = colorCode;
+          if (listStyleCustomProps || listItemCustomProps) {
+            optionDetails.listItemCustomProps = listStyleCustomProps || listItemCustomProps;
           }
 
           normalizedFormatOptions[id] = optionDetails;
@@ -348,7 +354,7 @@ var makeFormatOptions = function makeFormatOptions() {
 exports.makeFormatOptions = makeFormatOptions;
 
 var makeGetMultiSelectSelectedOptions = function makeGetMultiSelectSelectedOptions() {
-  return (0, _reselect.createSelector)([getSelectedOptionsSel, getNormalizedFormatOptions, getSelectedOptionsLength, getAllowValueFallback], function (selectedOptions, normalizedFormatOptions, selectedOptionsLength, allowValueFallback) {
+  return (0, _reselect.createSelector)([getSelectedOptionsSel, getNormalizedFormatOptions, getSelectedOptionsLength, getAllowValueFallback, getLimit], function (selectedOptions, normalizedFormatOptions, selectedOptionsLength, allowValueFallback, limit) {
     var output = [];
     var revampSelectedOptions = [];
     var normalizedSelectedOptions = {};
@@ -376,6 +382,12 @@ var makeGetMultiSelectSelectedOptions = function makeGetMultiSelectSelectedOptio
       }
     }
 
+    if (limit && limit > 0) {
+      output = output.slice(0, limit);
+      revampSelectedOptions = revampSelectedOptions.slice(0, limit);
+      normalizedSelectedOptions = Object.fromEntries(Object.entries(normalizedSelectedOptions).slice(0, limit));
+    }
+
     return {
       formatSelectedOptions: output,
       normalizedSelectedOptions: normalizedSelectedOptions,
@@ -477,7 +489,8 @@ var makeGetGroupSelectOptions = function makeGetGroupSelectOptions() {
           groupId = group.id,
           name = group.name,
           valueField = group.valueField,
-          textField = group.textField;
+          textField = group.textField,
+          secondaryField = group.secondaryField;
 
       if (!(0, _Common.getIsEmptyValue)(groupId) && groupIds.indexOf(groupId) === -1) {
         groupIds.push(groupId);
@@ -487,6 +500,7 @@ var makeGetGroupSelectOptions = function makeGetGroupSelectOptions() {
           options: options,
           valueField: valueField,
           textField: textField,
+          secondaryField: secondaryField,
           prefixText: groupId,
           allowValueFallback: allowValueFallback
         }),
@@ -602,7 +616,8 @@ var filterSelectedOptions = function filterSelectedOptions() {
       _ref4$propSelectedOpt = _ref4.propSelectedOptions,
       propSelectedOptions = _ref4$propSelectedOpt === void 0 ? dummyArray : _ref4$propSelectedOpt,
       _ref4$disabledOptions = _ref4.disabledOptions,
-      disabledOptions = _ref4$disabledOptions === void 0 ? dummyArray : _ref4$disabledOptions;
+      disabledOptions = _ref4$disabledOptions === void 0 ? dummyArray : _ref4$disabledOptions,
+      limit = _ref4.limit;
 
   // eslint-disable-next-line no-param-reassign
   selectedOptions = selectedOptions || dummyArray; // eslint-disable-next-line no-param-reassign
@@ -626,8 +641,18 @@ var filterSelectedOptions = function filterSelectedOptions() {
 
     return true;
   });
+  var totalSelectedOptions = [].concat(_toConsumableArray(oldValidSelectedOptions), _toConsumableArray(newlyAddedOptions));
+
+  if (limit && limit > 0) {
+    if (totalSelectedOptions.length > limit) {
+      return {
+        newSelectedOptions: totalSelectedOptions.slice(0, limit)
+      };
+    }
+  }
+
   return {
-    newSelectedOptions: [].concat(_toConsumableArray(oldValidSelectedOptions), _toConsumableArray(newlyAddedOptions))
+    newSelectedOptions: totalSelectedOptions
   };
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.0.0-temp-230.1",
+  "version": "1.0.0-temp-234",
   "main": "es/index.js",
   "module": "es/index.js",
   "private": false,
@@ -39,7 +39,7 @@
     "build:css:umd": "npm run clean &&  npm run init && react-cli build:css:umd",
     "coverage": "react-cli coverage",
     "prepare": "npm run init &&  npm run css:build ",
-    "prepublishOnly": "node prePublish.js",
+    "prepublishOnly": "node prePublish.js && npm run css:review",
     "postpublish": "node postPublish.js",
     "report": "react-cli publish:report",
     "test": "react-cli test",
@@ -77,21 +77,21 @@
     "@zohodesk-private/css-variable-migrator": "1.0.9",
     "@zohodesk-private/node-plugins": "1.1.13",
     "@zohodesk-private/react-prop-validator": "1.2.3",
-    "@zohodesk/a11y": "2.3.6",
+    "@zohodesk/a11y": "2.3.7",
     "@zohodesk/docstool": "1.0.0-alpha-2",
     "@zohodesk/dotkit": "1.0.3",
     "@zohodesk/hooks": "2.0.5",
     "@zohodesk/icons": "1.1.0",
     "@zohodesk/layout": "3.1.0",
-    "@zohodesk/svg": "1.2.1",
+    "@zohodesk/svg": "1.2.2",
     "@zohodesk/utils": "1.3.14",
     "@zohodesk/variables": "1.1.0",
-    "@zohodesk/virtualizer": "1.0.3",
+    "@zohodesk/virtualizer": "1.0.13",
     "react-sortable-hoc": "^0.8.3",
-    "velocity-react": "1.4.3"
+    "velocity-react": "1.4.3",
+    "@zohodesk/react-cli": "1.1.27"
   },
   "dependencies": {
-    "color": "4.2.3",
     "hoist-non-react-statics": "3.0.1",
     "react-transition-group": "2.5.0",
     "reselect": "4.0.0",
@@ -100,13 +100,13 @@
   "peerDependencies": {
     "@zohodesk/icons": "1.1.0",
     "@zohodesk/variables": "1.1.0",
-    "@zohodesk/svg": "1.2.1",
-    "@zohodesk/virtualizer": "1.0.3",
+    "@zohodesk/svg": "1.2.2",
+    "@zohodesk/virtualizer": "1.0.13",
     "velocity-react": "1.4.3",
     "react-sortable-hoc": "^0.8.3",
     "@zohodesk/hooks": "2.0.5",
     "@zohodesk/utils": "1.3.14",
-    "@zohodesk/a11y": "2.3.6",
+    "@zohodesk/a11y": "2.3.7",
     "@zohodesk/layout": "3.1.0",
     "@zohodesk/dotkit": "1.0.3"
   }

package/es/ColorSelect/ColorMultiSelect.js

@@ -1,36 +0,0 @@
-import React from 'react';
-import MultiSelect from "../MultiSelect/MultiSelect";
-import { ColorMultiSelect_propTypes } from "./props/propTypes";
-import { ColorMultiSelect_defaultProps } from "./props/defaultProps";
-import { renderColoredTag, renderColorIndicator } from "./common/helpers";
-
-function ColorMultiSelect(props) {
-  const {
-    options,
-    renderCustomColorIndicator,
-    renderCustomSelectedValue,
-    customProps,
-    ...rest
-  } = props;
-  const renderSelectedValue = renderCustomSelectedValue || renderColoredTag;
-  const colorIndicator = renderCustomColorIndicator || renderColorIndicator;
-  const optionsWithOptionType = options.map(option => {
-    if (typeof option !== 'object') return option;
-    return { ...option,
-      optionType: 'custom'
-    };
-  });
-  return /*#__PURE__*/React.createElement(MultiSelect, { ...rest,
-    options: optionsWithOptionType,
-    renderCustomSelectedValue: renderSelectedValue,
-    customProps: { ...customProps,
-      SuggestionsProps: { ...customProps.SuggestionsProps,
-        renderBeforeChildren: colorIndicator
-      }
-    }
-  });
-}
-
-ColorMultiSelect.propTypes = ColorMultiSelect_propTypes;
-ColorMultiSelect.defaultProps = ColorMultiSelect_defaultProps;
-export default ColorMultiSelect;

package/es/ColorSelect/ColorSingleSelect.js

@@ -1,50 +0,0 @@
-import React from 'react';
-import Select from "../Select/Select";
-import { ColorSingleSelect_propTypes } from "./props/propTypes";
-import { ColorSingleSelect_defaultProps } from "./props/defaultProps";
-import { renderColoredTag, renderColorIndicator } from "./common/helpers";
-import Box from "../Layout/Box";
-import Container from "../Layout/Container";
-import ArrowIcon from "../shared/ArrowIcon/ArrowIcon";
-import arrowIconStyle from "../shared/ArrowIcon/ArrowIcon.module.css";
-
-function ColorSingleSelect(props) {
-  const {
-    options,
-    renderCustomColorIndicator,
-    renderCustomSelectedValue,
-    customClass,
-    customProps,
-    ...rest
-  } = props;
-
-  const renderSelectedValue = data => {
-    const {
-      isPopupOpen
-    } = data;
-    return /*#__PURE__*/React.createElement(Container, {
-      alignBox: "row",
-      align: "between"
-    }, /*#__PURE__*/React.createElement(Box, {
-      shrink: true
-    }, renderCustomSelectedValue ? renderCustomSelectedValue(data) : renderColoredTag(data)), /*#__PURE__*/React.createElement(ArrowIcon, {
-      isRotated: isPopupOpen
-    }));
-  };
-
-  const colorIndicator = renderCustomColorIndicator || renderColorIndicator;
-  return /*#__PURE__*/React.createElement(Select, { ...rest,
-    className: `${arrowIconStyle.arrowIconContainer} ${customClass}`,
-    options: options,
-    renderCustomSelectedValue: renderSelectedValue,
-    customProps: { ...customProps,
-      SuggestionsProps: { ...customProps.SuggestionsProps,
-        renderBeforeChildren: colorIndicator
-      }
-    }
-  });
-}
-
-ColorSingleSelect.propTypes = ColorSingleSelect_propTypes;
-ColorSingleSelect.defaultProps = ColorSingleSelect_defaultProps;
-export default ColorSingleSelect;

package/es/ColorSelect/__tests__/ColorMultiSelect.spec.js

@@ -1,59 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import ColorMultiSelect from "../ColorMultiSelect";
-const options = [{
-  id: 1,
-  text: 'Red',
-  colorCode: '#ff6e6e'
-}, {
-  id: 2,
-  text: 'Green',
-  colorCode: '#77d779'
-}, {
-  id: 3,
-  text: 'Blue',
-  colorCode: '#649cff'
-}];
-describe('ColorMultiSelect', () => {
-  test('rendering the defult props', () => {
-    const {
-      asFragment
-    } = render( /*#__PURE__*/React.createElement(ColorMultiSelect, null));
-    expect(asFragment()).toMatchSnapshot();
-  });
-  test('Should render the default selected value', () => {
-    const {
-      asFragment
-    } = render( /*#__PURE__*/React.createElement(ColorMultiSelect, {
-      options: options
-    }));
-    expect(asFragment()).toMatchSnapshot();
-  });
-  test('Should render the selected value', () => {
-    const {
-      asFragment
-    } = render( /*#__PURE__*/React.createElement(ColorMultiSelect, {
-      options: options,
-      selectedOptions: [1, 2]
-    }));
-    expect(asFragment()).toMatchSnapshot();
-  });
-  test('renders with renderCustomColorIndicator', () => {
-    const {
-      asFragment
-    } = render( /*#__PURE__*/React.createElement(ColorMultiSelect, {
-      options: options,
-      renderCustomColorIndicator: () => /*#__PURE__*/React.createElement("div", null, " custom color indicator")
-    }));
-    expect(asFragment()).toMatchSnapshot();
-  });
-  test('renders with renderCustomSelectedValue', () => {
-    const {
-      asFragment
-    } = render( /*#__PURE__*/React.createElement(ColorMultiSelect, {
-      options: options,
-      renderCustomSelectedValue: () => /*#__PURE__*/React.createElement("span", null, "custom selected value")
-    }));
-    expect(asFragment()).toMatchSnapshot();
-  });
-});

package/es/ColorSelect/__tests__/ColorSingleSelect.spec.js

@@ -1,59 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import ColorSingleSelect from "../ColorSingleSelect";
-const options = [{
-  id: 1,
-  text: 'Red',
-  colorCode: '#ff6e6e'
-}, {
-  id: 2,
-  text: 'Green',
-  colorCode: '#77d779'
-}, {
-  id: 3,
-  text: 'Blue',
-  colorCode: '#649cff'
-}];
-describe('ColorSingleSelect', () => {
-  test('rendering the defult props', () => {
-    const {
-      asFragment
-    } = render( /*#__PURE__*/React.createElement(ColorSingleSelect, null));
-    expect(asFragment()).toMatchSnapshot();
-  });
-  test('Should render the default selected value', () => {
-    const {
-      asFragment
-    } = render( /*#__PURE__*/React.createElement(ColorSingleSelect, {
-      options: options
-    }));
-    expect(asFragment()).toMatchSnapshot();
-  });
-  test('Should render the selected value', () => {
-    const {
-      asFragment
-    } = render( /*#__PURE__*/React.createElement(ColorSingleSelect, {
-      options: options,
-      selectedValue: "green"
-    }));
-    expect(asFragment()).toMatchSnapshot();
-  });
-  test('renders with renderCustomColorIndicator', () => {
-    const {
-      asFragment
-    } = render( /*#__PURE__*/React.createElement(ColorSingleSelect, {
-      options: options,
-      renderCustomColorIndicator: () => /*#__PURE__*/React.createElement("div", null, " custom color indicator")
-    }));
-    expect(asFragment()).toMatchSnapshot();
-  });
-  test('renders with renderCustomSelectedValue', () => {
-    const {
-      asFragment
-    } = render( /*#__PURE__*/React.createElement(ColorSingleSelect, {
-      options: options,
-      renderCustomSelectedValue: () => /*#__PURE__*/React.createElement("span", null, "custom selected value")
-    }));
-    expect(asFragment()).toMatchSnapshot();
-  });
-});