@bigbinary/neetoui 5.2.17 → 5.2.18

package/index.cjs.js

@@ -23384,7 +23384,7 @@ var menuListCSS = function menuListCSS(_ref5) {
     WebkitOverflowScrolling: 'touch'
   };
 };
-var MenuList = function MenuList(props) {
+var MenuList$1 = function MenuList(props) {
   var children = props.children,
     className = props.className,
     cx = props.cx,
@@ -24245,7 +24245,7 @@ var components = {
   Input: Input$1,
   LoadingIndicator: LoadingIndicator,
   Menu: Menu$1,
-  MenuList: MenuList,
+  MenuList: MenuList$1,
   MenuPortal: MenuPortal,
   LoadingMessage: LoadingMessage,
   NoOptionsMessage: NoOptionsMessage,
@@ -27942,6 +27942,30 @@ var AsyncCreatableSelect = /*#__PURE__*/React$5.forwardRef(function (props, ref)
   }, selectProps));
 });
 
+var Spinner = function Spinner(_ref) {
+  var _ref$theme = _ref.theme,
+    theme = _ref$theme === void 0 ? "dark" : _ref$theme,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? "" : _ref$className;
+  var spinnerItemClassName = classnames$1("neeto-ui-spinner__item", {
+    "neeto-ui-bg-gray-800": theme === "dark"
+  }, {
+    "neeto-ui-bg-white": theme === "light"
+  });
+  return /*#__PURE__*/React__default["default"].createElement("span", {
+    className: classnames$1("neeto-ui-spinner", [className]),
+    "data-testid": "spinner"
+  }, /*#__PURE__*/React__default["default"].createElement("i", {
+    className: spinnerItemClassName
+  }), /*#__PURE__*/React__default["default"].createElement("i", {
+    className: spinnerItemClassName
+  }), /*#__PURE__*/React__default["default"].createElement("i", {
+    className: spinnerItemClassName
+  }), /*#__PURE__*/React__default["default"].createElement("i", {
+    className: spinnerItemClassName
+  }));
+};
+
 var _excluded$c = ["size", "label", "required", "error", "helpText", "className", "innerRef", "isCreateable", "strategy", "id", "labelProps", "value", "defaultValue", "components", "optionRemapping"];
 function ownKeys$b(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$b(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$b(Object(source), !0).forEach(function (key) { _defineProperty$7(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$b(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -28009,6 +28033,41 @@ var ValueContainer = function ValueContainer(props) {
     })
   }));
 };
+var MenuList = function MenuList(props) {
+  var _props$selectProps = props.selectProps,
+    fetchMore = _props$selectProps.fetchMore,
+    totalOptionsCount = _props$selectProps.totalOptionsCount,
+    isAsyncLoadOptionEnabled = _props$selectProps.isAsyncLoadOptionEnabled,
+    options = _props$selectProps.options;
+  var hasMore = isAsyncLoadOptionEnabled && totalOptionsCount > options.length;
+  var loaderRef = React$5.useRef();
+  React$5.useEffect(function () {
+    var observer = null;
+    if (loaderRef.current && isAsyncLoadOptionEnabled) {
+      observer = new IntersectionObserver(function (entries) {
+        return entries[0].isIntersecting && fetchMore();
+      }, {
+        root: null,
+        rootMargin: "0px",
+        threshold: 0.1
+      });
+      observer.observe(loaderRef.current);
+    }
+    return function () {
+      if (loaderRef.current && isAsyncLoadOptionEnabled) {
+        var _observer;
+        (_observer = observer) === null || _observer === void 0 ? void 0 : _observer.unobserve(loaderRef.current);
+      }
+    };
+  }, [hasMore]);
+  return /*#__PURE__*/React__default["default"].createElement(components.MenuList, _extends$4({}, props, {
+    innerProps: _objectSpread$b(_objectSpread$b({}, props.innerProps), {}, _defineProperty$7({}, "data-testid", "menu-list"))
+  }), props.children, hasMore && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "flex w-full items-center justify-center py-3",
+    "data-testid": "loader",
+    ref: loaderRef
+  }, /*#__PURE__*/React__default["default"].createElement(Spinner, null)));
+};
 var Select = function Select(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? SIZES$2.medium : _ref$size,
@@ -28107,7 +28166,8 @@ var Select = function Select(_ref) {
       MultiValueRemove: MultiValueRemove,
       Placeholder: Placeholder,
       Menu: Menu,
-      ValueContainer: ValueContainer
+      ValueContainer: ValueContainer,
+      MenuList: MenuList
     }, componentOverrides)
   }, portalProps, otherProps)), !!error && /*#__PURE__*/React__default["default"].createElement("p", {
     className: "neeto-ui-input__error",
@@ -28206,30 +28266,6 @@ var Slider = function Slider(_ref) {
   }, helpText)));
 };
 
-var Spinner = function Spinner(_ref) {
-  var _ref$theme = _ref.theme,
-    theme = _ref$theme === void 0 ? "dark" : _ref$theme,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? "" : _ref$className;
-  var spinnerItemClassName = classnames$1("neeto-ui-spinner__item", {
-    "neeto-ui-bg-gray-800": theme === "dark"
-  }, {
-    "neeto-ui-bg-white": theme === "light"
-  });
-  return /*#__PURE__*/React__default["default"].createElement("span", {
-    className: classnames$1("neeto-ui-spinner", [className]),
-    "data-testid": "spinner"
-  }, /*#__PURE__*/React__default["default"].createElement("i", {
-    className: spinnerItemClassName
-  }), /*#__PURE__*/React__default["default"].createElement("i", {
-    className: spinnerItemClassName
-  }), /*#__PURE__*/React__default["default"].createElement("i", {
-    className: spinnerItemClassName
-  }), /*#__PURE__*/React__default["default"].createElement("i", {
-    className: spinnerItemClassName
-  }));
-};
-
 var _excluded$a = ["label", "required", "className", "error", "onChange", "labelProps", "children"];
 var Switch = /*#__PURE__*/React$5.forwardRef(function (_ref, ref) {
   var _ref$label = _ref.label,