@capillarytech/blaze-ui 5.23.3-beta.3 → 5.23.3-beta.4

package/CapVirtualSelect/index.js

@@ -1,314 +1,313 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-/**
- *
- * CapVirtualSelect
- *
- */
-
-//Please refer the below link for the detailed documentation and integration steps
-//https://capillarytech.atlassian.net/wiki/spaces/UT/pages/4392911108/CapVirtualSelect+Single+option+selection+dropdown
-
-import classNames from 'classnames';
-import debounce from 'lodash/debounce';
-import get from 'lodash/get';
-import PropTypes from 'prop-types';
-import React, { useState, useEffect, useCallback, useRef } from 'react';
-import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
-import { connect } from 'react-redux';
-import { Virtuoso } from 'react-virtuoso';
-import { compose, bindActionCreators } from 'redux';
-import { createStructuredSelector } from 'reselect';
-import CapIcon from "../CapIcon";
-import CapSearch from "../CapInput/Search";
-import CapRow from "../CapRow";
-import CapSpin from "../CapSpin";
-import clearDataOnUnmount from "../ClearDataOnUnmountHoc";
-import * as actions from "./actions";
-import { dataTestIdPrefix, defaultNamespace, FAILURE, REQUEST, SUCCESS } from "./constants";
-import messages from "./messages";
-import { makeSelectGetOptionById, makeSelectGetPaginatedOptions } from "./selectors";
-import "./styles.scss";
-import { convertApiParamsMapperToObject } from "./utils";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-var classPrefix = 'cap-virtual-select';
-var NoOptionsFound = () => {
-  return /*#__PURE__*/_jsxs(CapRow, {
-    className: classNames(classPrefix + "-no-options"),
-    "data-testid": dataTestIdPrefix + "-no-options",
-    children: [/*#__PURE__*/_jsx(CapIcon, {
-      className: classNames(classPrefix + "-no-options-image"),
-      type: "alert"
-    }), /*#__PURE__*/_jsx(CapRow, {
-      className: classNames(classPrefix + "-no-options-text"),
-      children: /*#__PURE__*/_jsx(FormattedMessage, _extends({}, messages.noOptionsFound))
-    })]
-  });
+import { jsx, jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
+import debounce from "lodash/debounce";
+import get from "lodash/get";
+import PropTypes from "prop-types";
+import { useState, useRef, useCallback, useEffect } from "react";
+import { intlShape, FormattedMessage, injectIntl } from "react-intl";
+import { connect } from "react-redux";
+import { Virtuoso } from "react-virtuoso";
+import { compose, bindActionCreators } from "redux";
+import { createStructuredSelector } from "reselect";
+import CapIcon from "../CapIcon/index.js";
+import CapSearch from "../CapInput/Search.js";
+import CapRow from "../CapRow/index.js";
+import CapSpin from "../CapSpin/index.js";
+import clearDataOnUnmount from "../ClearDataOnUnmountHoc/index.js";
+import * as actions from "./actions.js";
+import { defaultNamespace, dataTestIdPrefix, SUCCESS, FAILURE, REQUEST } from "./constants.js";
+import messages from "./messages.js";
+import { makeSelectGetOptionById, makeSelectGetPaginatedOptions } from "./selectors.js";
+import './styles.css';/* empty css            */
+import { convertApiParamsMapperToObject } from "./utils.js";
+const classPrefix = "cap-virtual-select";
+const NoOptionsFound = () => {
+  return /* @__PURE__ */ jsxs(
+    CapRow,
+    {
+      className: classNames(`${classPrefix}-no-options`),
+      "data-testid": `${dataTestIdPrefix}-no-options`,
+      children: [
+        /* @__PURE__ */ jsx(CapIcon, { className: classNames(`${classPrefix}-no-options-image`), type: "alert" }),
+        /* @__PURE__ */ jsx(CapRow, { className: classNames(`${classPrefix}-no-options-text`), children: /* @__PURE__ */ jsx(FormattedMessage, { ...messages.noOptionsFound }) })
+      ]
+    }
+  );
 };
-export function CapVirtualSelect(_ref) {
-  var _listingApiConfig$api2, _listingApiConfig$api3, _listingApiConfig$api4, _listingApiConfig$pay3, _listingApiConfig$pay4;
-  var {
-    intl: {
-      formatMessage: _formatMessage
-    },
-    namespace: _namespace,
-    listingApiConfig,
-    getByIdApiConfig,
-    selectedOption,
-    isSearchable,
-    searchDebounceTime,
-    disabled,
-    selectedOptionPlaceholderLabel,
-    searchPlaceholderLabel,
-    loadingOptionsPlaceholder,
-    EmptyPlaceholder,
-    EmptySearchPlaceholder,
-    width,
-    height,
-    buttonProps,
-    searchbarProps,
-    virtuosoProps,
-    onOptionClick,
-    renderOptionRow,
-    renderSelectedOptionRow,
-    transformOptions,
-    actions,
-    paginatedOptions: {
-      getPaginatedOptionsStatus,
-      getPaginatedOptions,
-      getUnTransformedPaginatedOptions,
-      getPaginatedOptionsTotalCount
-    },
-    optionById: {
-      getOptionByIdStatus,
-      getOptionById
+function CapVirtualSelect({
+  intl: { formatMessage: _formatMessage },
+  namespace: _namespace,
+  listingApiConfig,
+  getByIdApiConfig,
+  selectedOption,
+  isSearchable,
+  searchDebounceTime,
+  disabled,
+  selectedOptionPlaceholderLabel,
+  searchPlaceholderLabel,
+  loadingOptionsPlaceholder,
+  EmptyPlaceholder,
+  EmptySearchPlaceholder,
+  width,
+  height,
+  buttonProps,
+  searchbarProps,
+  virtuosoProps,
+  onOptionClick,
+  renderOptionRow,
+  renderSelectedOptionRow,
+  transformOptions,
+  actions: actions2,
+  paginatedOptions: {
+    getPaginatedOptionsStatus,
+    getPaginatedOptions,
+    getUnTransformedPaginatedOptions,
+    getPaginatedOptionsTotalCount
+  },
+  optionById: { getOptionByIdStatus, getOptionById }
+}) {
+  var _a, _b, _c, _d, _e, _f, _g, _h;
+  const [isDropdownVisible, setIsDropdownListVisible] = useState(false);
+  const [listingApiQueryParams, setListingApiQueryParams] = useState(
+    () => convertApiParamsMapperToObject(listingApiConfig == null ? void 0 : listingApiConfig.apiParamsMapper)
+  );
+  const [defaultSelectedOption, _setDefaultSelectedOption] = useState(() => selectedOption);
+  const [selectedOptionNode, setSelectedOptionNode] = useState({});
+  const [searchValue, setSearchValue] = useState("");
+  const [basePageIndex, setBasePageIndex] = useState(
+    () => {
+      var _a2, _b2;
+      return (_b2 = (_a2 = listingApiConfig == null ? void 0 : listingApiConfig.apiParamsMapper) == null ? void 0 : _a2.page) == null ? void 0 : _b2.value;
     }
-  } = _ref;
-  var [isDropdownVisible, setIsDropdownListVisible] = useState(false); //this state is used to toggle the dropdown visibility
-  var [listingApiQueryParams, setListingApiQueryParams] = useState(() => convertApiParamsMapperToObject(listingApiConfig == null ? void 0 : listingApiConfig.apiParamsMapper)); //this state is used to store the api query params
-  var [defaultSelectedOption, _setDefaultSelectedOption] = useState(() => selectedOption); //this state is used to store the default selected option identifier
-  var [selectedOptionNode, setSelectedOptionNode] = useState({}); //this state is used to store the selected option details
-  var [searchValue, setSearchValue] = useState(''); //this state is used to store the search value
-  var [basePageIndex, setBasePageIndex] = useState(() => {
-    var _listingApiConfig$api;
-    return listingApiConfig == null || (_listingApiConfig$api = listingApiConfig.apiParamsMapper) == null || (_listingApiConfig$api = _listingApiConfig$api.page) == null ? void 0 : _listingApiConfig$api.value;
-  }); //this state is used to store the base page index
-
-  //this ref is used to handle the dropdown close event on outside click
-  var dropdownRef = useRef(null);
-
-  //these constants are used to extract the search and page keys from the api params mapper
-  var searchKey = listingApiConfig == null || (_listingApiConfig$api2 = listingApiConfig.apiParamsMapper) == null || (_listingApiConfig$api2 = _listingApiConfig$api2.search) == null ? void 0 : _listingApiConfig$api2.key;
-  var pageKey = listingApiConfig == null || (_listingApiConfig$api3 = listingApiConfig.apiParamsMapper) == null || (_listingApiConfig$api3 = _listingApiConfig$api3.page) == null ? void 0 : _listingApiConfig$api3.key;
-  var pageValue = listingApiConfig == null || (_listingApiConfig$api4 = listingApiConfig.apiParamsMapper) == null || (_listingApiConfig$api4 = _listingApiConfig$api4.page) == null ? void 0 : _listingApiConfig$api4.value;
-
-  //this constant is used to check if the options are loading
-  var areOptionsLoading = getPaginatedOptionsStatus === REQUEST || getOptionByIdStatus === REQUEST;
-
-  // this function is used to handle the option selection event
-  var handleOptionChange = selectedOptionNodeValue => {
+  );
+  const dropdownRef = useRef(null);
+  const searchKey = (_b = (_a = listingApiConfig == null ? void 0 : listingApiConfig.apiParamsMapper) == null ? void 0 : _a.search) == null ? void 0 : _b.key;
+  const pageKey = (_d = (_c = listingApiConfig == null ? void 0 : listingApiConfig.apiParamsMapper) == null ? void 0 : _c.page) == null ? void 0 : _d.key;
+  const pageValue = (_f = (_e = listingApiConfig == null ? void 0 : listingApiConfig.apiParamsMapper) == null ? void 0 : _e.page) == null ? void 0 : _f.value;
+  const areOptionsLoading = getPaginatedOptionsStatus === REQUEST || getOptionByIdStatus === REQUEST;
+  const handleOptionChange = (selectedOptionNodeValue) => {
     setSelectedOptionNode(selectedOptionNodeValue);
     onOptionClick(selectedOptionNodeValue);
     setIsDropdownListVisible(false);
   };
-
-  // this function is used to handle the search event with debounce
-  var handleDebouncedSearch = useCallback(debounce(value => {
-    setListingApiQueryParams(prevState => _extends({}, prevState, {
-      [searchKey]: value,
-      [pageKey]: pageValue
-    }));
-  }, searchDebounceTime), []);
-
-  // this function is used to handle the search event
-  var handleSearchChange = value => {
+  const handleDebouncedSearch = useCallback(
+    debounce((value) => {
+      setListingApiQueryParams((prevState) => ({
+        ...prevState,
+        [searchKey]: value,
+        [pageKey]: pageValue
+      }));
+    }, searchDebounceTime),
+    []
+  );
+  const handleSearchChange = (value) => {
     setSearchValue(value);
     if (searchValue) {
       handleDebouncedSearch(value);
     }
   };
-
-  // this function is used to handle the load more options(infinite scroll) event
-  var handleLoadMoreOptions = () => {
-    var loadedUnTransformedPaginatedOptionsLength = (getUnTransformedPaginatedOptions == null ? void 0 : getUnTransformedPaginatedOptions.length) || 0;
-    var loadedPaginatedOptionsLength = defaultSelectedOption && !searchValue ? loadedUnTransformedPaginatedOptionsLength + 1 : loadedUnTransformedPaginatedOptionsLength;
-    var areAllOptionsLoaded = loadedPaginatedOptionsLength === getPaginatedOptionsTotalCount;
+  const handleLoadMoreOptions = () => {
+    const loadedUnTransformedPaginatedOptionsLength = (getUnTransformedPaginatedOptions == null ? void 0 : getUnTransformedPaginatedOptions.length) || 0;
+    const loadedPaginatedOptionsLength = defaultSelectedOption && !searchValue ? loadedUnTransformedPaginatedOptionsLength + 1 : loadedUnTransformedPaginatedOptionsLength;
+    const areAllOptionsLoaded = loadedPaginatedOptionsLength === getPaginatedOptionsTotalCount;
     if (areOptionsLoading || areAllOptionsLoaded || getPaginatedOptionsStatus === FAILURE) return;
-    setListingApiQueryParams(prevState => _extends({}, prevState, {
+    setListingApiQueryParams((prevState) => ({
+      ...prevState,
       [pageKey]: prevState[pageKey] + 1
     }));
   };
-
-  // this function is used to render the visible option rows and handle the option selection event
-  var renderVisibleOptionNodes = (index, visibleNode) => {
-    var _listingApiConfig$pay, _listingApiConfig$pay2;
-    var selectedOptionValue = get(selectedOptionNode, listingApiConfig == null || (_listingApiConfig$pay = listingApiConfig.payloadPath) == null ? void 0 : _listingApiConfig$pay.value, '');
-    var currentSelectedOptionValue = get(visibleNode, listingApiConfig == null || (_listingApiConfig$pay2 = listingApiConfig.payloadPath) == null ? void 0 : _listingApiConfig$pay2.value, '');
-    return /*#__PURE__*/_jsx(CapRow, {
-      onClick: event => {
-        event.stopPropagation();
-        handleOptionChange(visibleNode);
+  const renderVisibleOptionNodes = (index, visibleNode) => {
+    var _a2, _b2;
+    const selectedOptionValue = get(selectedOptionNode, (_a2 = listingApiConfig == null ? void 0 : listingApiConfig.payloadPath) == null ? void 0 : _a2.value, "");
+    const currentSelectedOptionValue = get(visibleNode, (_b2 = listingApiConfig == null ? void 0 : listingApiConfig.payloadPath) == null ? void 0 : _b2.value, "");
+    return /* @__PURE__ */ jsx(
+      CapRow,
+      {
+        onClick: (event) => {
+          event.stopPropagation();
+          handleOptionChange(visibleNode);
+        },
+        className: classNames(
+          selectedOptionValue === currentSelectedOptionValue ? `${classPrefix}-selected-option-row` : `${classPrefix}-option-row`
+        ),
+        "data-testid": `${dataTestIdPrefix}-option-row`,
+        children: renderOptionRow(visibleNode)
       },
-      className: classNames(selectedOptionValue === currentSelectedOptionValue ? classPrefix + "-selected-option-row" : classPrefix + "-option-row"),
-      "data-testid": dataTestIdPrefix + "-option-row",
-      children: renderOptionRow(visibleNode)
-    }, index);
+      index
+    );
   };
-
-  //this effect is used to fetch the selected option details, set the base page index on initial mount
   useEffect(() => {
     if (selectedOption) {
-      var getByIdApiQueryParams = convertApiParamsMapperToObject(getByIdApiConfig == null ? void 0 : getByIdApiConfig.apiParamsMapper);
-      actions.getOptionById(selectedOption, getByIdApiConfig, getByIdApiQueryParams);
+      const getByIdApiQueryParams = convertApiParamsMapperToObject(
+        getByIdApiConfig == null ? void 0 : getByIdApiConfig.apiParamsMapper
+      );
+      actions2.getOptionById(selectedOption, getByIdApiConfig, getByIdApiQueryParams);
     }
     setBasePageIndex(convertApiParamsMapperToObject(listingApiConfig == null ? void 0 : listingApiConfig.apiParamsMapper)[pageKey]);
   }, []);
-
-  //this effect is used to store the selected option details in the local state on successful fetch
   useEffect(() => {
     if ([SUCCESS, FAILURE].includes(getOptionByIdStatus)) {
       setSelectedOptionNode(getOptionById);
     }
   }, [getOptionByIdStatus]);
-
-  //this effect is used to fetch the paginated options on initial mount and on subsequent search and page value change
   useEffect(() => {
     if (areOptionsLoading || listingApiQueryParams[pageKey] > (listingApiConfig == null ? void 0 : listingApiConfig.rpmLimit)) return;
     if (!defaultSelectedOption || defaultSelectedOption && [SUCCESS, FAILURE].includes(getOptionByIdStatus)) {
-      actions.getPaginatedOptions(listingApiConfig, listingApiQueryParams, transformOptions);
+      actions2.getPaginatedOptions(listingApiConfig, listingApiQueryParams, transformOptions);
     }
   }, [listingApiQueryParams[pageKey], listingApiQueryParams[searchKey], getOptionByIdStatus]);
-
-  //this effect is used to close the dropdown on outside click
   useEffect(() => {
-    var handleClickOutside = event => {
-      var _dropdownRef$current;
-      if (!((_dropdownRef$current = dropdownRef.current) != null && _dropdownRef$current.contains(event.target))) {
+    const handleClickOutside = (event) => {
+      var _a2;
+      if (!((_a2 = dropdownRef.current) == null ? void 0 : _a2.contains(event.target))) {
         setIsDropdownListVisible(false);
       }
     };
-    document.addEventListener('mousedown', handleClickOutside);
+    document.addEventListener("mousedown", handleClickOutside);
     return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
+      document.removeEventListener("mousedown", handleClickOutside);
     };
   }, []);
-  return /*#__PURE__*/_jsxs("div", {
-    ref: dropdownRef,
-    className: classNames(classPrefix + "-container"),
-    style: {
-      width: width
-    },
-    "data-testid": dataTestIdPrefix + "-container",
-    children: [/*#__PURE__*/_jsxs("button", _extends({
-      className: classNames(classPrefix + "-button", {
-        [classPrefix + "-button-disabled"]: disabled || areOptionsLoading
-      }),
-      "data-testid": dataTestIdPrefix + "-button",
-      onClick: () => setIsDropdownListVisible(true),
-      disabled: disabled || areOptionsLoading
-    }, buttonProps, {
-      children: [/*#__PURE__*/_jsx(CapRow, {
-        className: classNames(classPrefix + "-button-label"),
-        children: areOptionsLoading && !(listingApiQueryParams[pageKey] > basePageIndex) ? /*#__PURE__*/_jsx(CapRow, {
-          children: loadingOptionsPlaceholder
-        }) : /*#__PURE__*/_jsx(CapRow, {
-          className: classNames({
-            [classPrefix + "-button-defined-label"]: get(selectedOptionNode, listingApiConfig == null || (_listingApiConfig$pay3 = listingApiConfig.payloadPath) == null ? void 0 : _listingApiConfig$pay3.label, selectedOptionPlaceholderLabel) !== selectedOptionPlaceholderLabel
-          }),
-          children: renderSelectedOptionRow(selectedOptionNode, get(selectedOptionNode, listingApiConfig == null || (_listingApiConfig$pay4 = listingApiConfig.payloadPath) == null ? void 0 : _listingApiConfig$pay4.label, selectedOptionPlaceholderLabel))
-        })
-      }), /*#__PURE__*/_jsx(CapIcon, {
-        type: "chevron-down",
-        className: classNames(classPrefix + "-button-arrow")
-      })]
-    })), isDropdownVisible && /*#__PURE__*/_jsxs(CapRow, {
-      className: classNames(classPrefix + "-dropdown"),
-      style: {
-        width: width
-      },
-      "data-testid": dataTestIdPrefix + "-dropdown",
-      children: [isSearchable && /*#__PURE__*/_jsx(CapSearch, _extends({
-        className: classNames(classPrefix + "-search-bar"),
-        "data-testid": dataTestIdPrefix + "-search-bar",
-        value: searchValue,
-        onChange: event => handleSearchChange(event.target.value),
-        placeholder: searchPlaceholderLabel,
-        allowClear: false
-      }, searchbarProps)), /*#__PURE__*/_jsx(CapSpin, {
-        className: classNames(classPrefix + "-options-list-spinner"),
-        size: "small",
-        spinning: areOptionsLoading,
-        children: /*#__PURE__*/_jsx(Virtuoso, _extends({
-          style: {
-            width: width,
-            height: isSearchable ? height : height + 64
-          },
-          className: classNames(classPrefix + "-options-list"),
-          "data-testid": dataTestIdPrefix + "-options-list",
-          totalCount: getPaginatedOptions == null ? void 0 : getPaginatedOptions.length,
-          data: getPaginatedOptions,
-          endReached: handleLoadMoreOptions,
-          itemContent: renderVisibleOptionNodes,
-          components: {
-            EmptyPlaceholder: searchValue ? EmptySearchPlaceholder : EmptyPlaceholder
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: dropdownRef,
+      className: classNames(`${classPrefix}-container`),
+      style: { width },
+      "data-testid": `${dataTestIdPrefix}-container`,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            className: classNames(`${classPrefix}-button`, {
+              [`${classPrefix}-button-disabled`]: disabled || areOptionsLoading
+            }),
+            "data-testid": `${dataTestIdPrefix}-button`,
+            onClick: () => setIsDropdownListVisible(true),
+            disabled: disabled || areOptionsLoading,
+            ...buttonProps,
+            children: [
+              /* @__PURE__ */ jsx(CapRow, { className: classNames(`${classPrefix}-button-label`), children: areOptionsLoading && !(listingApiQueryParams[pageKey] > basePageIndex) ? /* @__PURE__ */ jsx(CapRow, { children: loadingOptionsPlaceholder }) : /* @__PURE__ */ jsx(
+                CapRow,
+                {
+                  className: classNames({
+                    [`${classPrefix}-button-defined-label`]: get(
+                      selectedOptionNode,
+                      (_g = listingApiConfig == null ? void 0 : listingApiConfig.payloadPath) == null ? void 0 : _g.label,
+                      selectedOptionPlaceholderLabel
+                    ) !== selectedOptionPlaceholderLabel
+                  }),
+                  children: renderSelectedOptionRow(
+                    selectedOptionNode,
+                    get(
+                      selectedOptionNode,
+                      (_h = listingApiConfig == null ? void 0 : listingApiConfig.payloadPath) == null ? void 0 : _h.label,
+                      selectedOptionPlaceholderLabel
+                    )
+                  )
+                }
+              ) }),
+              /* @__PURE__ */ jsx(CapIcon, { type: "chevron-down", className: classNames(`${classPrefix}-button-arrow`) })
+            ]
           }
-        }, virtuosoProps))
-      })]
-    })]
-  });
+        ),
+        isDropdownVisible && /* @__PURE__ */ jsxs(
+          CapRow,
+          {
+            className: classNames(`${classPrefix}-dropdown`),
+            style: { width },
+            "data-testid": `${dataTestIdPrefix}-dropdown`,
+            children: [
+              isSearchable && /* @__PURE__ */ jsx(
+                CapSearch,
+                {
+                  className: classNames(`${classPrefix}-search-bar`),
+                  "data-testid": `${dataTestIdPrefix}-search-bar`,
+                  value: searchValue,
+                  onChange: (event) => handleSearchChange(event.target.value),
+                  placeholder: searchPlaceholderLabel,
+                  allowClear: false,
+                  ...searchbarProps
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                CapSpin,
+                {
+                  className: classNames(`${classPrefix}-options-list-spinner`),
+                  size: "small",
+                  spinning: areOptionsLoading,
+                  children: /* @__PURE__ */ jsx(
+                    Virtuoso,
+                    {
+                      style: { width, height: isSearchable ? height : height + 64 },
+                      className: classNames(`${classPrefix}-options-list`),
+                      "data-testid": `${dataTestIdPrefix}-options-list`,
+                      totalCount: getPaginatedOptions == null ? void 0 : getPaginatedOptions.length,
+                      data: getPaginatedOptions,
+                      endReached: handleLoadMoreOptions,
+                      itemContent: renderVisibleOptionNodes,
+                      components: {
+                        EmptyPlaceholder: searchValue ? EmptySearchPlaceholder : EmptyPlaceholder
+                      },
+                      ...virtuosoProps
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
 }
 CapVirtualSelect.propTypes = {
   intl: intlShape.isRequired,
   namespace: PropTypes.string,
-  listingApiConfig: PropTypes.objectOf(PropTypes.shape({
-    method: PropTypes.func,
-    rpmLimit: PropTypes.number,
-    payloadPath: PropTypes.objectOf(PropTypes.shape({
-      successStatus: PropTypes.string,
-      success: PropTypes.string,
-      error: PropTypes.string,
-      label: PropTypes.string,
-      value: PropTypes.string,
-      totalCount: PropTypes.string
-    })),
-    apiParamsMapper: PropTypes.objectOf(PropTypes.shape({
-      page: {
-        key: PropTypes.string,
-        value: PropTypes.any
-      },
-      limit: {
-        key: PropTypes.string,
-        value: PropTypes.any
-      },
-      search: {
-        key: PropTypes.string,
-        value: PropTypes.any
-      }
-    }))
-  })),
-  getByIdApiConfig: PropTypes.objectOf(PropTypes.shape({
-    method: PropTypes.func,
-    rpmLimit: PropTypes.number,
-    payloadPath: PropTypes.objectOf(PropTypes.shape({
-      successStatus: PropTypes.string,
-      success: PropTypes.string,
-      error: PropTypes.string,
-      value: PropTypes.string
-    })),
-    apiParamsMapper: PropTypes.objectOf(PropTypes.shape({
-      page: {
-        key: PropTypes.string,
-        value: PropTypes.any
-      },
-      limit: {
-        key: PropTypes.string,
-        value: PropTypes.any
-      },
-      search: {
-        key: PropTypes.string,
-        value: PropTypes.any
-      }
-    }))
-  })),
+  listingApiConfig: PropTypes.objectOf(
+    PropTypes.shape({
+      method: PropTypes.func,
+      rpmLimit: PropTypes.number,
+      payloadPath: PropTypes.objectOf(
+        PropTypes.shape({
+          successStatus: PropTypes.string,
+          success: PropTypes.string,
+          error: PropTypes.string,
+          label: PropTypes.string,
+          value: PropTypes.string,
+          totalCount: PropTypes.string
+        })
+      ),
+      apiParamsMapper: PropTypes.objectOf(
+        PropTypes.shape({
+          page: { key: PropTypes.string, value: PropTypes.any },
+          limit: { key: PropTypes.string, value: PropTypes.any },
+          search: { key: PropTypes.string, value: PropTypes.any }
+        })
+      )
+    })
+  ),
+  getByIdApiConfig: PropTypes.objectOf(
+    PropTypes.shape({
+      method: PropTypes.func,
+      rpmLimit: PropTypes.number,
+      payloadPath: PropTypes.objectOf(
+        PropTypes.shape({
+          successStatus: PropTypes.string,
+          success: PropTypes.string,
+          error: PropTypes.string,
+          value: PropTypes.string
+        })
+      ),
+      apiParamsMapper: PropTypes.objectOf(
+        PropTypes.shape({
+          page: { key: PropTypes.string, value: PropTypes.any },
+          limit: { key: PropTypes.string, value: PropTypes.any },
+          search: { key: PropTypes.string, value: PropTypes.any }
+        })
+      )
+    })
+  ),
   selectedOption: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool]),
   isSearchable: PropTypes.bool,
   searchDebounceTime: PropTypes.number,
@@ -335,36 +334,27 @@ CapVirtualSelect.defaultProps = {
     method: () => Promise.resolve([]),
     rpmLimit: 20,
     payloadPath: {
-      successStatus: 'success',
-      success: 'data',
-      error: 'error',
-      label: 'name',
-      value: 'id',
-      totalCount: 'totalCount'
+      successStatus: "success",
+      success: "data",
+      error: "error",
+      label: "name",
+      value: "id",
+      totalCount: "totalCount"
     },
     apiParamsMapper: {
-      page: {
-        key: 'page',
-        value: 0
-      },
-      limit: {
-        key: 'limit',
-        value: 10
-      },
-      search: {
-        key: 'search',
-        value: ''
-      }
+      page: { key: "page", value: 0 },
+      limit: { key: "limit", value: 10 },
+      search: { key: "search", value: "" }
     }
   },
   getByIdApiConfig: {
     method: () => Promise.resolve(null),
     rpmLimit: 20,
     payloadPath: {
-      successStatus: 'success',
-      success: 'data',
-      error: 'error',
-      value: 'id'
+      successStatus: "success",
+      success: "data",
+      error: "error",
+      value: "id"
     },
     apiParamsMapper: {}
   },
@@ -372,43 +362,35 @@ CapVirtualSelect.defaultProps = {
   isSearchable: false,
   searchDebounceTime: 1500,
   disabled: false,
-  selectedOptionPlaceholderLabel: 'Select an option',
-  searchPlaceholderLabel: 'Search',
-  loadingOptionsPlaceholder: 'Loading options...',
+  selectedOptionPlaceholderLabel: "Select an option",
+  searchPlaceholderLabel: "Search",
+  loadingOptionsPlaceholder: "Loading options...",
   width: 250,
   height: 188,
   buttonProps: {},
   searchbarProps: {},
   virtuosoProps: {},
-  transformOptions: options => options,
-  onOptionClick: option => option,
-  renderOptionRow: option => /*#__PURE__*/_jsx("div", {
-    children: (option == null ? void 0 : option.name) || 'N/A'
-  }),
-  renderSelectedOptionRow: (selectedOption, selectedOptionValue) => /*#__PURE__*/_jsx("div", {
-    children: selectedOptionValue
-  }),
+  transformOptions: (options) => options,
+  onOptionClick: (option) => option,
+  renderOptionRow: (option) => /* @__PURE__ */ jsx("div", { children: (option == null ? void 0 : option.name) || "N/A" }),
+  renderSelectedOptionRow: (selectedOption, selectedOptionValue) => /* @__PURE__ */ jsx("div", { children: selectedOptionValue }),
   EmptyPlaceholder: NoOptionsFound,
   EmptySearchPlaceholder: NoOptionsFound
 };
-
-// this is the wrapper to create unique instance of the CapVirtualSelect by namespace
-export var CapVirtualSelectInjected = function CapVirtualSelectInjected(namespace) {
-  if (namespace === void 0) {
-    namespace = defaultNamespace;
-  }
-  var mapStateToProps = createStructuredSelector({
+const CapVirtualSelectInjected = (namespace = defaultNamespace) => {
+  const mapStateToProps = createStructuredSelector({
     paginatedOptions: makeSelectGetPaginatedOptions(),
     optionById: makeSelectGetOptionById()
   });
   function mapDispatchToProps(dispatch) {
-    //this logic is appending namespace to all the actions for unique instance
-    var updatedActions = _extends({}, actions);
-    var allActions = Object.keys(updatedActions);
-    allActions.forEach(actionName => {
-      var actionCreator = updatedActions[actionName];
-      updatedActions[actionName] = function () {
-        var actionReturnValue = actionCreator(...arguments);
+    const updatedActions = {
+      ...actions
+    };
+    const allActions = Object.keys(updatedActions);
+    allActions.forEach((actionName) => {
+      const actionCreator = updatedActions[actionName];
+      updatedActions[actionName] = (...args) => {
+        const actionReturnValue = actionCreator(...args);
         actionReturnValue.namespace = namespace;
         return actionReturnValue;
       };
@@ -417,7 +399,11 @@ export var CapVirtualSelectInjected = function CapVirtualSelectInjected(namespac
       actions: bindActionCreators(updatedActions, dispatch)
     };
   }
-  var withConnect = connect(mapStateToProps, mapDispatchToProps);
+  const withConnect = connect(mapStateToProps, mapDispatchToProps);
   return compose(withConnect)(injectIntl(clearDataOnUnmount(CapVirtualSelect)));
 };
-export default CapVirtualSelectInjected;
+export {
+  CapVirtualSelect,
+  CapVirtualSelectInjected,
+  CapVirtualSelectInjected as default
+};