@zohodesk/components 1.4.21 → 1.4.22

package/lib/ListItem/__tests__/__snapshots__/ListItem.spec.js.snap

@@ -78,6 +78,53 @@ exports[`ListItem ListItem with renderValueRightPlaceholderNode 1`] = `
 </DocumentFragment>
 `;
 
+exports[`ListItem Should render with renderBeforeChildren 1`] = `
+<DocumentFragment>
+  <li
+    class="list medium  default     withBorder  flex rowdir vCenter"
+    data-a11y-inset-focus="true"
+    data-id="listItem"
+    data-selector-id="listItem"
+    data-test-id="listItem"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      class="leftBox grow basis shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="titleBox shrinkOff"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="beforeChild basisAuto shrinkOn"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <span>
+            Before children
+          </span>
+        </div>
+        <div
+          class="children basisAuto shrinkOn"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          Content
+        </div>
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
 exports[`ListItem rendering the defult props 1`] = `
 <DocumentFragment>
   <li

package/lib/ListItem/props/propTypes.js

@@ -84,6 +84,7 @@ var ListItem_Props = {
     ListItemProps: _propTypes["default"].object
   }),
   secondaryValue: _propTypes["default"].string,
+  renderBeforeChildren: _propTypes["default"].oneOfType([_propTypes["default"].node, _propTypes["default"].func]),
   renderValueRightPlaceholderNode: _propTypes["default"].oneOfType([_propTypes["default"].node, _propTypes["default"].func])
 };
 exports.ListItem_Props = ListItem_Props;

package/lib/MultiSelect/MultiSelect.js

@@ -105,6 +105,9 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
 
 /* eslint-disable react/no-unused-prop-types */
 var dummyArray = [];
+var a11yProps = {
+  role: 'option'
+};
 
 var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
   _inherits(MultiSelectComponent, _React$Component);
@@ -1015,6 +1018,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
           isPopupOpen = _this$props14.isPopupOpen,
           ariaErrorId = _this$props14.ariaErrorId,
           customProps = _this$props14.customProps,
+          renderCustomSelectedValue = _this$props14.renderCustomSelectedValue,
           isFocus = _this$props14.isFocus,
           isPopupReady = _this$props14.isPopupReady,
           renderCustomClearComponent = _this$props14.renderCustomClearComponent,
@@ -1055,7 +1059,11 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         onSelect: this.handleClickSelectedOption,
         size: size,
         palette: palette,
-        dataId: "".concat(dataId, "_selectedOptions")
+        dataId: "".concat(dataId, "_selectedOptions"),
+        renderCustomSelectedValue: renderCustomSelectedValue,
+        isPopupReady: isPopupReady,
+        isPopupOpen: isPopupOpen,
+        isDisabled: isDisabled
       }), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true,
         className: _MultiSelectModule["default"].wrapper,
@@ -1247,6 +1255,8 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
       }, isSearching ? /*#__PURE__*/_react["default"].createElement("div", {
         className: _MultiSelectModule["default"][palette]
       }, searchText) : suggestions.length ? /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], _extends({
+        a11y: a11yProps,
+        needBorder: false,
         key: searchStr.trim(),
         suggestions: suggestions,
         isVirtualizerEnabled: isVirtualizerEnabled,
@@ -1256,13 +1266,9 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         hoverOption: hoverOption,
         onClick: this.handleSelectOption,
         onMouseEnter: this.handleMouseEnter,
-        needBorder: false,
         dataId: "".concat(dataId, "_Options"),
         palette: palette,
         selectedOptions: selectedOptionIds,
-        a11y: {
-          role: 'option'
-        },
         limit: limit,
         limitReachedMessage: limitReachedMessage
       }, SuggestionsProps)) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {

package/lib/MultiSelect/SelectedOptions.js

@@ -68,7 +68,11 @@ var SelectedOptions = /*#__PURE__*/function (_React$PureComponent) {
           size = _this$props.size,
           palette = _this$props.palette,
           dataId = _this$props.dataId,
-          limit = _this$props.limit;
+          limit = _this$props.limit,
+          renderCustomSelectedValue = _this$props.renderCustomSelectedValue,
+          isPopupOpen = _this$props.isPopupOpen,
+          isPopupReady = _this$props.isPopupReady,
+          isInputDisabled = _this$props.isDisabled;
       var isDarkPalette = palette === 'dark' ? 'dark' : 'danger';
       var selectedData = limit && limit > 0 ? selectedOptions.slice(0, limit) : selectedOptions;
       return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, selectedData.map(function (option) {
@@ -111,6 +115,25 @@ var SelectedOptions = /*#__PURE__*/function (_React$PureComponent) {
             iconName: icon,
             iconSize: iconSize
           })));
+        } else if (optionType === 'custom') {
+          return /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+            className: "".concat(_SelectedOptionsModule["default"].tag, " ").concat(_SelectedOptionsModule["default"][size]),
+            key: "".concat(id, "customTag"),
+            dataId: dataId
+          }, typeof renderCustomSelectedValue == 'function' ? renderCustomSelectedValue({
+            onRemove: isDisabled || isReadOnly ? null : onRemove,
+            palette: isDarkPalette,
+            onSelectTag: isReadOnly ? null : onSelect,
+            getRef: getRef,
+            isReadOnly: isReadOnly,
+            isPopupReady: isPopupReady,
+            isPopupOpen: isPopupOpen,
+            isDisabled: isInputDisabled,
+            size: size,
+            highLightedSelectOptions: highLightedSelectOptions,
+            isActive: highLightedSelectOptions.indexOf(id) >= 0,
+            option: option
+          }) : renderCustomSelectedValue);
         }
 
         return /*#__PURE__*/_react["default"].createElement(_Layout.Box, {

package/lib/MultiSelect/Suggestions.js

@@ -25,6 +25,8 @@ var _Layout = require("../Layout");
 
 var _Common = require("../utils/Common");
 
+var _utils = require("@zohodesk/utils");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 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); }
@@ -100,6 +102,7 @@ var Suggestions = /*#__PURE__*/function (_React$PureComponent) {
           needBorder = _this$props.needBorder,
           _this$props$selectedO = _this$props.selectedOptions,
           selectedOptions = _this$props$selectedO === void 0 ? _Common.DUMMY_ARRAY : _this$props$selectedO,
+          renderBeforeChildren = _this$props.renderBeforeChildren,
           activeId = _this$props.activeId,
           hoverId = _this$props.hoverId,
           listItemSize = _this$props.listItemSize,
@@ -214,7 +217,8 @@ var Suggestions = /*#__PURE__*/function (_React$PureComponent) {
         size: listItemSize,
         palette: palette,
         a11y: list_a11y,
-        secondaryValue: secondaryValue
+        secondaryValue: secondaryValue,
+        renderBeforeChildren: (0, _utils.renderNode)(renderBeforeChildren, suggestion)
       }));
     }
   }, {

package/lib/MultiSelect/__tests__/MultiSelect.spec.js

@@ -8,6 +8,35 @@ var _MultiSelect = _interopRequireDefault(require("../MultiSelect"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+var options = [{
+  id: 1,
+  text: 'custom 1',
+  optionType: 'custom'
+}, {
+  id: 2,
+  text: 'custom 2',
+  optionType: 'custom'
+}, {
+  id: 3,
+  text: 'custom 3',
+  optionType: 'custom'
+}, {
+  id: 4,
+  text: 'custom 4',
+  optionType: 'custom'
+}, {
+  id: 5,
+  text: 'custom 5',
+  optionType: 'custom'
+}, {
+  id: 6,
+  text: 'custom 6',
+  optionType: 'custom'
+}, {
+  id: 7,
+  text: 'custom 7',
+  optionType: 'custom'
+}];
 var testData = ['text1', 'text2', 'text3', 'text4', 'text5', 'text6', 'text7', 'text8', 'text9', 'text10'];
 var testSelectedData = ['text1', 'text2', 'text3'];
 describe('MultiSelect', function () {
@@ -17,8 +46,19 @@ describe('MultiSelect', function () {
 
     expect(asFragment()).toMatchSnapshot();
   });
-  test('rendering with limit feature', function () {
+  test('Should render with renderCustomSelectedValue', function () {
     var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelect["default"], {
+      options: options,
+      renderCustomSelectedValue: function renderCustomSelectedValue() {
+        return /*#__PURE__*/_react["default"].createElement("span", null, "MultiSelect Custom Value");
+      }
+    })),
+        asFragment = _render2.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering with limit feature', function () {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelect["default"], {
       valueField: "id",
       textField: "text",
       options: testData,
@@ -36,7 +76,7 @@ describe('MultiSelect', function () {
       needResponsive: true,
       limit: 3
     })),
-        asFragment = _render2.asFragment;
+        asFragment = _render3.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });

package/lib/MultiSelect/__tests__/SelectedOptions.spec.js

@@ -32,4 +32,19 @@ describe('SelectedOptions', function () {
 
     expect(asFragment()).toMatchSnapshot();
   });
+  test('Should render with renderCustomSelectedValue', function () {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_SelectedOptions["default"], {
+      highLightedSelectOptions: [],
+      selectedOptions: [{
+        value: 'SelectedObject1',
+        optionType: 'custom'
+      }],
+      renderCustomSelectedValue: function renderCustomSelectedValue() {
+        return /*#__PURE__*/_react["default"].createElement("span", null, " SelectedOptions Custom Value");
+      }
+    })),
+        asFragment = _render3.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

package/lib/MultiSelect/__tests__/Suggestions.spec.js

@@ -64,14 +64,28 @@ describe('Suggestions', function () {
 
     expect(asFragment()).toMatchSnapshot();
   });
-  test('rendering with limit props', function () {
+  test('Should render with renderBeforeChildren', function () {
     var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], {
+      suggestions: [{
+        value: 'Suggestions Option 1',
+        id: '1'
+      }],
+      renderBeforeChildren: function renderBeforeChildren() {
+        return /*#__PURE__*/_react["default"].createElement("span", null, "Suggestions Before Children");
+      }
+    })),
+        asFragment = _render2.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering with limit props', function () {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], {
       selectedOptions: [1, 2, 3, 4],
       suggestions: sampleData,
       limit: 3,
       limitReachedMessage: "Limit Reached"
     })),
-        asFragment = _render2.asFragment;
+        asFragment = _render3.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });

package/lib/MultiSelect/__tests__/__snapshots__/AdvancedGroupMultiSelect.spec.js.snap

@@ -25,10 +25,8 @@ exports[`AdvancedGroupMultiSelect rendering the defult props 1`] = `
               "
         />
         <div
-          class="container effect  custmInputWrapper  flex rowdir"
-          data-id="containerComponent"
+          class="varClass customContainer   effect     container custmInputWrapper  flex rowdir"
           data-selector-id="textBoxIcon"
-          data-test-id="containerComponent"
         >
           <div
             class="grow basis shrinkOff"

package/lib/MultiSelect/__tests__/__snapshots__/AdvancedMultiSelect.spec.js.snap

@@ -25,10 +25,8 @@ exports[`AdvancedMultiSelect rendering the defult props 1`] = `
               "
         />
         <div
-          class="container effect  custmInputWrapper  flex rowdir"
-          data-id="containerComponent"
+          class="varClass customContainer   effect     container custmInputWrapper  flex rowdir"
           data-selector-id="textBoxIcon"
-          data-test-id="containerComponent"
         >
           <div
             class="grow basis shrinkOff"
@@ -98,10 +96,8 @@ exports[`AdvancedMultiSelect rendering the options array with objects and string
               "
         />
         <div
-          class="container effect  custmInputWrapper  flex rowdir"
-          data-id="containerComponent"
+          class="varClass customContainer   effect     container custmInputWrapper  flex rowdir"
           data-selector-id="textBoxIcon"
-          data-test-id="containerComponent"
         >
           <div
             class="grow basis shrinkOff"
@@ -346,10 +342,8 @@ exports[`AdvancedMultiSelect rendering the options array with only objects using
               "
         />
         <div
-          class="container effect  custmInputWrapper  flex rowdir"
-          data-id="containerComponent"
+          class="varClass customContainer   effect     container custmInputWrapper  flex rowdir"
           data-selector-id="textBoxIcon"
-          data-test-id="containerComponent"
         >
           <div
             class="grow basis shrinkOff"

package/lib/MultiSelect/__tests__/__snapshots__/MultiSelect.spec.js.snap

@@ -1,5 +1,88 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`MultiSelect Should render with renderCustomSelectedValue 1`] = `
+<DocumentFragment>
+  <div
+    class="wrapper     effect"
+    data-id="multiSelect"
+    data-selector-id="multiSelect"
+    data-test-id="multiSelect"
+  >
+    <div
+      class="container medium borderColor_default   hasBorder flex cover rowdir wrap vCenter"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <div
+        class="wrapper grow basisAuto shrinkOn"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <span
+          class=" custmSpan custmSpanMedium 
+          "
+        />
+        <div
+          class="varClass customContainer   effect     container custmInputWrapper  flex rowdir"
+          data-selector-id="textBoxIcon"
+        >
+          <div
+            class="grow basis shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <input
+              aria-expanded="false"
+              aria-haspopup="true"
+              aria-required="true"
+              autocomplete="off"
+              class="  container medium  default  effect  borderColor_default  "
+              data-id="multiSelect_textBox"
+              data-selector-id="textBoxIcon"
+              data-test-id="multiSelect_textBox"
+              maxlength="250"
+              role="combobox"
+              type="text"
+              value=""
+            />
+          </div>
+          <div
+            class="iconContainer  shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="flex cover rowdir"
+              data-id="containerComponent"
+              data-selector-id="container"
+              data-test-id="containerComponent"
+            >
+              <div
+                class="icon  shrinkOff"
+                data-id="boxComponent"
+                data-selector-id="box"
+                data-test-id="boxComponent"
+              >
+                <div
+                  class="rightPlaceholder inflex rowdir vCenter"
+                  data-id="containerComponent"
+                  data-selector-id="container"
+                  data-test-id="containerComponent"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`MultiSelect rendering the defult props 1`] = `
 <DocumentFragment>
   <div
@@ -25,10 +108,8 @@ exports[`MultiSelect rendering the defult props 1`] = `
           "
         />
         <div
-          class="container effect  custmInputWrapper  flex rowdir"
-          data-id="containerComponent"
+          class="varClass customContainer   effect     container custmInputWrapper  flex rowdir"
           data-selector-id="textBoxIcon"
-          data-test-id="containerComponent"
         >
           <div
             class="grow basis shrinkOff"
@@ -106,7 +187,7 @@ exports[`MultiSelect rendering with limit feature 1`] = `
         data-test-id="multiSelect_selectedOptions"
       >
         <div
-          aria-labelledby="5"
+          aria-labelledby="7"
           class="container effect    medium lgRadius danger  pointer "
           data-id="tag_Tag"
           data-selector-id="tag"
@@ -117,7 +198,7 @@ exports[`MultiSelect rendering with limit feature 1`] = `
           <div
             aria-hidden="true"
             class="text mediumtext"
-            id="5"
+            id="7"
           >
             text1
           </div>
@@ -156,7 +237,7 @@ exports[`MultiSelect rendering with limit feature 1`] = `
         data-test-id="multiSelect_selectedOptions"
       >
         <div
-          aria-labelledby="6"
+          aria-labelledby="8"
           class="container effect    medium lgRadius danger  pointer "
           data-id="tag_Tag"
           data-selector-id="tag"
@@ -167,7 +248,7 @@ exports[`MultiSelect rendering with limit feature 1`] = `
           <div
             aria-hidden="true"
             class="text mediumtext"
-            id="6"
+            id="8"
           >
             text2
           </div>
@@ -206,7 +287,7 @@ exports[`MultiSelect rendering with limit feature 1`] = `
         data-test-id="multiSelect_selectedOptions"
       >
         <div
-          aria-labelledby="7"
+          aria-labelledby="9"
           class="container effect    medium lgRadius danger  pointer "
           data-id="tag_Tag"
           data-selector-id="tag"
@@ -217,7 +298,7 @@ exports[`MultiSelect rendering with limit feature 1`] = `
           <div
             aria-hidden="true"
             class="text mediumtext"
-            id="7"
+            id="9"
           >
             text3
           </div>
@@ -260,10 +341,8 @@ exports[`MultiSelect rendering with limit feature 1`] = `
           "
         />
         <div
-          class="container effect  custmInputWrapper  flex rowdir"
-          data-id="containerComponent"
+          class="varClass customContainer   effect     container custmInputWrapper  flex rowdir"
           data-selector-id="textBoxIcon"
-          data-test-id="containerComponent"
         >
           <div
             class="grow basis shrinkOff"

package/lib/MultiSelect/__tests__/__snapshots__/MultiSelectWithAvatar.spec.js.snap

@@ -25,10 +25,8 @@ exports[`MultiSelectWithAvatar rendering the defult props 1`] = `
           "
         />
         <div
-          class="container effect  custmInputWrapper  flex rowdir"
-          data-id="containerComponent"
+          class="varClass customContainer   effect     container custmInputWrapper  flex rowdir"
           data-selector-id="textBoxIcon"
-          data-test-id="containerComponent"
         >
           <div
             class="grow basis shrinkOff"

package/lib/MultiSelect/__tests__/__snapshots__/SelectedOptions.spec.js.snap

@@ -1,5 +1,20 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`SelectedOptions Should render with renderCustomSelectedValue 1`] = `
+<DocumentFragment>
+  <div
+    class="tag medium shrinkOff"
+    data-id="selectedOptions"
+    data-selector-id="box"
+    data-test-id="selectedOptions"
+  >
+    <span>
+       SelectedOptions Custom Value
+    </span>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`SelectedOptions rendering the basic select options 1`] = `
 <DocumentFragment>
   <div

package/lib/MultiSelect/__tests__/__snapshots__/Suggestions.spec.js.snap

@@ -1,5 +1,71 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Suggestions Should render with renderBeforeChildren 1`] = `
+<DocumentFragment>
+  <div
+    class="flex coldir"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+    tabindex="0"
+  >
+    <div
+      class="shrinkOff"
+      data-id="undefined"
+      data-selector-id="box"
+      data-test-id="undefined"
+    >
+      <li
+        aria-label="Suggestions Option 1"
+        aria-selected="false"
+        class="list medium  default     withBorder  flex rowdir vCenter"
+        data-a11y-inset-focus="true"
+        data-a11y-list-active="false"
+        data-id="Suggestions Option 1"
+        data-selector-id="listItem"
+        data-test-id="Suggestions Option 1"
+        data-title="Suggestions Option 1"
+        role="option"
+        tabindex="0"
+      >
+        <div
+          class="leftBox grow basis shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="titleBox shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="beforeChild basisAuto shrinkOn"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              <span>
+                Suggestions Before Children
+              </span>
+            </div>
+            <div
+              class="value basisAuto shrinkOn"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              Suggestions Option 1
+            </div>
+          </div>
+        </div>
+      </li>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`Suggestions rendering the defult props 1`] = `
 <DocumentFragment>
   <div

package/lib/MultiSelect/props/propTypes.js

@@ -139,6 +139,7 @@ var MultiSelect_propTypes = {
   allowValueFallback: _propTypes["default"].bool,
   renderCustomClearComponent: _propTypes["default"].func,
   renderCustomToggleIndicator: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].node]),
+  renderCustomSelectedValue: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].node]),
   limit: _propTypes["default"].number,
   secondaryField: _propTypes["default"].string
 };
@@ -181,6 +182,10 @@ var SelectedOptions_propTypes = {
   size: _propTypes["default"].oneOf(['medium', 'xmedium']),
   palette: _propTypes["default"].string,
   dataId: _propTypes["default"].string,
+  isDisabled: _propTypes["default"].bool,
+  isPopupReady: _propTypes["default"].bool,
+  isPopupOpen: _propTypes["default"].bool,
+  renderCustomSelectedValue: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].node]),
   limit: _propTypes["default"].number
 };
 exports.SelectedOptions_propTypes = SelectedOptions_propTypes;
@@ -216,6 +221,7 @@ var Suggestions_propTypes = {
     optionType: _propTypes["default"].string,
     listItemProps: _propTypes["default"].object
   })),
+  renderBeforeChildren: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].node]),
   limit: _propTypes["default"].number,
   limitReachedMessage: _propTypes["default"].string
 };