@majoo-ui/react 1.55.16 → 1.55.17

package/index.esm.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import React__default, { useState, createContext, useContext, useEffect, useRef, createElement as createElement$2, forwardRef, cloneElement, useLayoutEffect, useCallback, useReducer, useMemo } from 'react';
+import React__default, { useState, createContext, useContext, useEffect, useRef, useCallback, cloneElement, createElement as createElement$2, forwardRef, useLayoutEffect, useReducer, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { createStitches, styled as styled$1 } from '@stitches/react';
 import { foundations } from '@majoo-ui/core';
@@ -20,8 +20,8 @@ import * as SwitchPrimitive from '@radix-ui/react-switch';
 import Downshift, { useMultipleSelection, useCombobox } from 'downshift';
 import InfiniteScroll from 'react-infinite-scroller';
 import debounce from 'lodash.debounce';
-import OTPInput, { ResendOTP as ResendOTP$1 } from 'otp-input-react';
 import { useFloating, offset, flip, shift as shift$2, useInteractions, useClick, useDismiss, FloatingFocusManager } from '@floating-ui/react-dom-interactions';
+import OTPInput, { ResendOTP as ResendOTP$1 } from 'otp-input-react';
 import * as SliderPrimitive from '@radix-ui/react-slider';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
@@ -2708,7 +2708,7 @@ const Heading = styled(Text$1, {
         fontWeight: '600'
       },
       pageTitle: {
-        fontSize: '$page-title',
+        fontSize: '$page-title-2',
         lineHeight: '$page-title',
         letterSpacing: '$page-title',
         fontWeight: '600'
@@ -2744,7 +2744,7 @@ Heading.defaultProps = {
   color: 'primary',
   heading: 'h1'
 };
-Heading.displayName = "Heading";
+Heading.displayName = 'Heading';
 
 const Paragraph = styled(Text$1, {
   variants: {
@@ -5363,7 +5363,7 @@ const FormGroup = _ref => {
       color: "disable",
       css: {
         alignSelf: 'end',
-        marginBottom: '$spacing-03'
+        marginBottom: '$spacing-03 !important'
       },
       __self: undefined,
       __source: {
@@ -6632,6 +6632,10 @@ const Container$a = styled(Flex$1, {
     }
   }]
 });
+const ContainerLabel = styled('label', {
+  width: 'fit-content',
+  cursor: 'pointer'
+});
 const InputRadio = _ref => {
   let {
       id,
@@ -6643,28 +6647,38 @@ const InputRadio = _ref => {
       readOnly
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
-  function renderInputType(type, checked) {
+  function renderInputType(type, checkedValue, onValueChange) {
     switch (type) {
       case 'number':
         return /*#__PURE__*/React__default.createElement(InputNumber, _extends({}, inputProps, {
-          readOnly: readOnly || checked !== props.value,
+          readOnly: readOnly,
+          onFocus: () => {
+            var _inputProps$onFocus;
+            onValueChange(props.value);
+            inputProps === null || inputProps === void 0 ? void 0 : (_inputProps$onFocus = inputProps.onFocus) === null || _inputProps$onFocus === void 0 ? void 0 : _inputProps$onFocus.call(inputProps);
+          },
           asChild: true,
           __self: this,
           __source: {
             fileName: _jsxFileName$G,
-            lineNumber: 159,
-            columnNumber: 16
+            lineNumber: 162,
+            columnNumber: 11
           }
         }));
       case 'text':
         return /*#__PURE__*/React__default.createElement(InputText, _extends({}, inputProps, {
-          disabled: disabled || checked !== props.value,
-          readOnly: readOnly || checked !== props.value,
+          disabled: disabled,
+          readOnly: readOnly,
+          onFocus: () => {
+            var _inputProps$onFocus2;
+            onValueChange(props.value);
+            inputProps === null || inputProps === void 0 ? void 0 : (_inputProps$onFocus2 = inputProps.onFocus) === null || _inputProps$onFocus2 === void 0 ? void 0 : _inputProps$onFocus2.call(inputProps);
+          },
           asChild: true,
           __self: this,
           __source: {
             fileName: _jsxFileName$G,
-            lineNumber: 163,
+            lineNumber: 175,
             columnNumber: 11
           }
         }));
@@ -6678,12 +6692,12 @@ const InputRadio = _ref => {
             letterSpacing: '$long-content-regular',
             fontWeight: '400',
             cursor: 'pointer',
-            color: disabled || readOnly && checked !== props.value ? '$textDisable' : '$textPrimary'
+            color: disabled || readOnly && checkedValue !== props.value ? '$textDisable' : '$textPrimary'
           },
           __self: this,
           __source: {
             fileName: _jsxFileName$G,
-            lineNumber: 173,
+            lineNumber: 189,
             columnNumber: 11
           }
         }, props.label);
@@ -6693,28 +6707,37 @@ const InputRadio = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$G,
-      lineNumber: 192,
+      lineNumber: 208,
       columnNumber: 5
     }
   }, ({
     defaultValue,
     value,
-    outlined
+    outlined,
+    onValueChange
   }) => {
-    const checked = value != null ? value : defaultValue;
-    return /*#__PURE__*/React__default.createElement(Container$a, {
+    const checkedValue = value != null ? value : defaultValue;
+    return /*#__PURE__*/React__default.createElement(ContainerLabel, {
+      htmlFor: id,
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$G,
+        lineNumber: 213,
+        columnNumber: 11
+      }
+    }, /*#__PURE__*/React__default.createElement(Container$a, {
       direction: "column",
       outlined: outlined,
       disabledOutlined: outlined && (readOnly || disabled),
       disabled: disabled,
-      active: outlined && checked === props.value && !disabled && !readOnly,
+      active: outlined && checkedValue === props.value && !disabled && !readOnly,
       withInputProps: !!inputProps,
       css: css,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$G,
-        lineNumber: 197,
-        columnNumber: 11
+        lineNumber: 214,
+        columnNumber: 13
       }
     }, /*#__PURE__*/React__default.createElement(Flex$1, {
       align: "center",
@@ -6722,8 +6745,8 @@ const InputRadio = _ref => {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$G,
-        lineNumber: 206,
-        columnNumber: 13
+        lineNumber: 223,
+        columnNumber: 15
       }
     }, /*#__PURE__*/React__default.createElement(StyledRadio, _extends({
       id: id,
@@ -6733,17 +6756,17 @@ const InputRadio = _ref => {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$G,
-        lineNumber: 207,
-        columnNumber: 15
+        lineNumber: 224,
+        columnNumber: 17
       }
     }), /*#__PURE__*/React__default.createElement(StyledIndicator$1, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$G,
-        lineNumber: 208,
-        columnNumber: 17
+        lineNumber: 225,
+        columnNumber: 19
       }
-    })), renderInputType(inputType, checked)), description && /*#__PURE__*/React__default.createElement(Text$1, {
+    })), renderInputType(inputType, checkedValue, onValueChange)), description && /*#__PURE__*/React__default.createElement(Text$1, {
       variant: "caption",
       color: "secondary",
       css: {
@@ -6752,10 +6775,10 @@ const InputRadio = _ref => {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$G,
-        lineNumber: 213,
-        columnNumber: 15
+        lineNumber: 230,
+        columnNumber: 17
       }
-    }, description));
+    }, description)));
   });
 };
 InputRadio.propTypes = {
@@ -8172,7 +8195,7 @@ SvgSearchOutline.defaultProps = {
   size: 24
 };
 
-const _excluded$e = ["size", "onChange", "css", "disabled"];
+const _excluded$e = ["size", "onChange", "css", "disabled", "withDebounce", "defaultValue"];
 var _jsxFileName$z = "C:\\Users\\Acer\\Documents\\project\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputSearchbox\\InputSearchbox.js";
 const InputSearchbox = _ref => {
   var _props$value;
@@ -8180,20 +8203,25 @@ const InputSearchbox = _ref => {
       size,
       onChange,
       css,
-      disabled
+      disabled,
+      withDebounce,
+      defaultValue
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
   const {
     t
   } = useTranslation(['MajooUI/inputSearchbox', 'translation']);
-  const [value, setValue] = React__default.useState('');
+  const [value, setValue] = useState(defaultValue);
   const inputValue = (_props$value = props === null || props === void 0 ? void 0 : props.value) != null ? _props$value : value;
-  const handleChange = React__default.useCallback(e => {
+  const debounceChange = useCallback(() => debounce(e => onChange === null || onChange === void 0 ? void 0 : onChange(e.target.value), 1000), [onChange]);
+  const handleChange = useCallback(e => {
     setValue(e.target.value);
-    if (onChange) {
-      onChange(e.target.value);
+    if (withDebounce) {
+      debounceChange(e);
+    } else {
+      onChange === null || onChange === void 0 ? void 0 : onChange(e.target.value);
     }
-  }, [onChange]);
+  }, [onChange, debounceChange, withDebounce]);
   const handleClearButtonClick = e => {
     e.preventDefault();
     if (!disabled) {
@@ -8208,7 +8236,7 @@ const InputSearchbox = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$z,
-      lineNumber: 33,
+      lineNumber: 38,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(InputLeftElement, {
@@ -8216,14 +8244,14 @@ const InputSearchbox = _ref => {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$z,
-        lineNumber: 34,
+        lineNumber: 39,
         columnNumber: 35
       }
     }),
     __self: undefined,
     __source: {
       fileName: _jsxFileName$z,
-      lineNumber: 34,
+      lineNumber: 39,
       columnNumber: 7
     }
   }), /*#__PURE__*/React__default.createElement(InputText, _extends({
@@ -8238,30 +8266,30 @@ const InputSearchbox = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$z,
-      lineNumber: 35,
+      lineNumber: 40,
       columnNumber: 7
     }
   })), /*#__PURE__*/React__default.createElement(InputRightElement, {
-    children: inputValue.length > 0 ? /*#__PURE__*/React__default.createElement(SvgCloseFilled, {
+    children: (inputValue === null || inputValue === void 0 ? void 0 : inputValue.length) > 0 ? /*#__PURE__*/React__default.createElement(SvgCloseFilled, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$z,
-        lineNumber: 46,
-        columnNumber: 43
+        lineNumber: 51,
+        columnNumber: 44
       }
     }) : /*#__PURE__*/React__default.createElement("div", {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$z,
-        lineNumber: 46,
-        columnNumber: 61
+        lineNumber: 51,
+        columnNumber: 62
       }
     }),
     onClick: handleClearButtonClick,
     __self: undefined,
     __source: {
       fileName: _jsxFileName$z,
-      lineNumber: 45,
+      lineNumber: 50,
       columnNumber: 7
     }
   }));
@@ -8273,7 +8301,8 @@ InputSearchbox.propTypes = {
   isInvalid: PropTypes.bool,
   readOnly: PropTypes.bool,
   disabled: PropTypes.bool,
-  onChange: PropTypes.func
+  onChange: PropTypes.func,
+  withDebounce: PropTypes.bool
 };
 InputSearchbox.defaultProps = {
   size: 'sm'
@@ -8431,6 +8460,144 @@ fixRegExpWellKnownSymbolLogic$1('search', function (SEARCH, nativeSearch, maybeC
   ];
 });
 
+const _excluded$d = ["children"];
+var _jsxFileName$y = "C:\\Users\\Acer\\Documents\\project\\majoo\\majoo-ui\\packages\\react\\src\\components\\popover\\Popover.js";
+const {
+  zIndices
+} = foundations;
+const PopoverContext = /*#__PURE__*/createContext();
+const Popover = ({
+  children,
+  open: _open = false,
+  onOpenChange,
+  placement,
+  sideOffset: _sideOffset = 5,
+  hideOnScroll: _hideOnScroll = false
+}) => {
+  const [openState, setOpenState] = useState(false);
+  useEffect(() => {
+    setOpenState(_open);
+  }, [_open]);
+  useEffect(() => {
+    if (onOpenChange) onOpenChange(openState);
+  }, [openState, onOpenChange]);
+  const floatingHook = useFloating({
+    open: openState,
+    onOpenChange: setOpenState,
+    middleware: [offset(_sideOffset), flip(), shift$2()],
+    placement
+  });
+  const {
+    getReferenceProps,
+    getFloatingProps
+  } = useInteractions([useClick(floatingHook.context), useDismiss(floatingHook.context, {
+    ancestorScroll: _hideOnScroll
+  })]);
+  const value = {
+    openState,
+    setOpenState,
+    floatingHook,
+    getReferenceProps,
+    getFloatingProps
+  };
+  return /*#__PURE__*/React__default.createElement(PopoverContext.Provider, {
+    value: value,
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$y,
+      lineNumber: 46,
+      columnNumber: 10
+    }
+  }, children);
+};
+const PopoverTrigger = ({
+  children,
+  disabled
+}) => {
+  const {
+    floatingHook: {
+      reference
+    },
+    getReferenceProps
+  } = useContext(PopoverContext);
+  return disabled ? children : /*#__PURE__*/cloneElement(children, getReferenceProps(Object.assign({
+    ref: reference
+  }, children.props)));
+};
+const PopoverContent = ({
+  children,
+  isMobile,
+  style
+}) => {
+  const {
+    openState,
+    floatingHook: {
+      x,
+      y,
+      floating,
+      strategy,
+      context
+    },
+    getFloatingProps
+  } = useContext(PopoverContext);
+  return openState ? /*#__PURE__*/React__default.createElement(FloatingFocusManager, {
+    context: context,
+    modal: false,
+    order: ['reference', 'content'],
+    returnFocus: false,
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$y,
+      lineNumber: 64,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/React__default.createElement("div", _extends({}, getFloatingProps({
+    ref: floating,
+    style: Object.assign({
+      position: strategy,
+      top: isMobile ? 0 : y != null ? y : '',
+      left: isMobile ? 0 : x != null ? x : '',
+      zIndex: zIndices.popover
+    }, style)
+  }), {
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$y,
+      lineNumber: 65,
+      columnNumber: 7
+    }
+  }), children)) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null);
+};
+const PopoverClose = _ref => {
+  let {
+      children
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
+  const {
+    setOpenState
+  } = useContext(PopoverContext);
+  return /*#__PURE__*/React__default.createElement(Flex$1, _extends({}, props, {
+    onClick: () => {
+      if (props.onClick) props.onClick();
+      setOpenState(false);
+    },
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$y,
+      lineNumber: 88,
+      columnNumber: 5
+    }
+  }), children);
+};
+Popover.propTypes = {
+  open: PropTypes.bool,
+  onOpenChange: PropTypes.func,
+  placement: PropTypes.oneOf(['top', 'top-start', 'top-end', 'right', 'right-start', 'right-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end']),
+  sideOffset: PropTypes.number,
+  hideOnScroll: PropTypes.bool
+};
+Popover.displayName = 'Popover';
+
 const SelectContainer = styled('div', {
   margin: 0,
   flexDirection: 'column',
@@ -8588,6 +8755,11 @@ const IconContainer = styled('div', {
 const OptionWrapper$2 = styled('div', {
   display: 'none',
   overflow: 'auto',
+  fontFamily: 'inherit',
+  fontVariantNumeric: 'tabular-nums',
+  fontSize: '$short-content-regular',
+  fontWeight: '400',
+  textAlign: 'left',
   zIndex: 1,
   borderRadius: '$sm',
   backgroundColor: '$bgWhite',
@@ -8757,6 +8929,8 @@ function InputSelect(_a) {
   const [item, setItem] = useState([]);
   const [selectedValue, setSelectedValue] = useState(value);
   const [query, setQuery] = useState();
+  const [openOptions, setOpenOptions] = useState(false);
+  const selectBoxRef = useRef(null);
   const scrollerRef = useRef(null);
   useEffect(() => {
     var _a;
@@ -8833,6 +9007,7 @@ function InputSelect(_a) {
       selectedItem,
       highlightedIndex
     }) => {
+      var _a, _b;
       const handleDownOption = () => {
         if (hideArrowicon || noOptionIcon) {
           return null;
@@ -8848,194 +9023,221 @@ function InputSelect(_a) {
           }, void 0)
         }), void 0);
       };
-      return jsxs(SelectContainer, Object.assign({
-        css: css
+      return jsx(Popover, Object.assign({
+        open: openOptions,
+        onOpenChange: setOpenOptions,
+        placement: placement,
+        hideOnScroll: true
       }, {
-        children: [jsx(ConditionalWrapper, Object.assign({
-          condition: showTooltip && selectedValue,
-          wrapper: children => jsx(Tooltip$1, Object.assign({
-            color: "dark",
-            label: selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.name
-          }, {
-            children: children
-          }), void 0)
+        children: jsxs(SelectContainer, Object.assign({
+          css: css,
+          ref: selectBoxRef
         }, {
-          children: jsxs(SelectBox, Object.assign({}, getRootProps({
-            refKey: 'ref'
-          }, {
-            suppressRefError: true
-          }), {
-            size: size,
-            disabled: disabled,
-            readOnly: readOnly,
-            isInvalid: isInvalid
-          }, {
-            children: [search ? jsx(Box, Object.assign({
-              style: {
-                width: '100%',
-                flex: 1
-              }
+          children: [jsx(ConditionalWrapper, Object.assign({
+            condition: showTooltip && selectedValue,
+            wrapper: children => jsx(Tooltip$1, Object.assign({
+              color: "dark",
+              label: selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.name
             }, {
-              children: jsx(SelectInputSearch, {
-                showLeadingIcon: showLeadingIcon,
-                showClearIcon: hideArrowicon,
+              children: children
+            }), void 0)
+          }, {
+            children: jsx(PopoverTrigger, {
+              children: jsxs(SelectBox, Object.assign({}, getRootProps({
+                refKey: 'ref'
+              }, {
+                suppressRefError: true
+              }), {
+                size: size,
                 disabled: disabled,
-                placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : t('placeholder', 'Pilih Item'),
                 readOnly: readOnly,
-                handleInputValue: !fetchData ? handleInputValue : query => {
-                  if (onSearch) onSearch(query);
-                  setQuery(query);
-                },
-                inputProps: getInputProps({
-                  onChange: event => {
-                    if (event.type !== 'change') return;
-                    const query = event.target.value;
-                    if (!fetchData) handleInputValue(query);else debouncedSearch(query);
-                  },
-                  disabled
-                }),
-                onClick: !isOpen ? getToggleButtonProps({
-                  disabled: disabled || readOnly
-                }).onClick : undefined
-              }, void 0)
-            }), void 0) : jsx(Button$3, Object.assign({}, getToggleButtonProps({
-              disabled: disabled || readOnly
-            }), {
-              disabled: disabled,
-              size: size,
-              readOnly: readOnly,
-              type: "button"
-            }, {
-              children: selectedItem ? selectedItem.render ? selectedItem.render(selectedItem) : jsx(Text$1, Object.assign({
-                color: disabled ? 'disable' : 'primary',
-                css: StyledText$1
+                isInvalid: isInvalid
               }, {
-                children: selectedItem.name
-              }), void 0) : jsx(Text$1, Object.assign({
-                color: "disable",
-                css: StyledText$1
-              }, {
-                children: placeholder !== null && placeholder !== void 0 ? placeholder : t('placeholder', 'Pilih Item')
+                children: [search ? jsx(Box, Object.assign({
+                  style: {
+                    width: '100%',
+                    flex: 1
+                  }
+                }, {
+                  children: jsx(SelectInputSearch, {
+                    showLeadingIcon: showLeadingIcon,
+                    showClearIcon: hideArrowicon,
+                    disabled: disabled,
+                    placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : t('placeholder', 'Pilih Item'),
+                    readOnly: readOnly,
+                    handleInputValue: !fetchData ? handleInputValue : query => {
+                      if (onSearch) onSearch(query);
+                      setQuery(query);
+                    },
+                    inputProps: getInputProps({
+                      onChange: event => {
+                        if (event.type !== 'change') return;
+                        const query = event.target.value;
+                        if (!fetchData) handleInputValue(query);else debouncedSearch(query);
+                      },
+                      disabled
+                    }),
+                    onClick: !isOpen ? getToggleButtonProps({
+                      disabled: disabled || readOnly
+                    }).onClick : undefined
+                  }, void 0)
+                }), void 0) : jsx(Button$3, Object.assign({}, getToggleButtonProps({
+                  disabled: disabled || readOnly
+                }), {
+                  disabled: disabled,
+                  size: size,
+                  readOnly: readOnly,
+                  type: "button"
+                }, {
+                  children: selectedItem ? selectedItem.render ? selectedItem.render(selectedItem) : jsx(Text$1, Object.assign({
+                    color: disabled ? 'disable' : 'primary',
+                    css: StyledText$1
+                  }, {
+                    children: selectedItem.name
+                  }), void 0) : jsx(Text$1, Object.assign({
+                    color: "disable",
+                    css: StyledText$1
+                  }, {
+                    children: placeholder !== null && placeholder !== void 0 ? placeholder : t('placeholder', 'Pilih Item')
+                  }), void 0)
+                }), void 0), handleDownOption()]
               }), void 0)
-            }), void 0), handleDownOption()]
-          }), void 0)
-        }), void 0), isOpen && isLoading && jsx(Flex$1, Object.assign({
-          justify: "center",
-          align: "center",
-          css: {
-            position: 'absolute',
-            inset: 0,
-            zIndex: '$sticky',
-            top: placement === 'top' ? '-20px' : item.length > 0 ? size === 'lg' ? '40px' : '32px' : size === 'lg' ? '64px' : '56px',
-            // bottom: '80px',
-            width: '100%',
-            height: scrollerRef.current ? scrollerRef.current.clientHeight : '40px',
-            backgroundColor: '$bgWhite',
-            opacity: 0.8,
-            transform: placement === 'top' ? 'translate(0, -100%)' : 'none'
-          }
-        }, {
-          children: jsx(Text$1, Object.assign({
-            variant: "caption"
-          }, {
-            children: "Loading...."
-          }), void 0)
-        }), void 0), jsx(ConditionalWrapper, Object.assign({
-          condition: renderFooter && typeof renderFooter === 'function',
-          wrapper: child => jsxs(Box, Object.assign({
-            css: {
-              position: 'absolute',
-              float: 'left',
-              display: isOpen ? 'block' : 'none',
-              zIndex: '$popover',
-              width: '100%'
-            }
-          }, {
-            children: [child, renderFooter && typeof renderFooter === 'function' && jsx(StyledFooter, {
-              children: renderFooter === null || renderFooter === void 0 ? void 0 : renderFooter()
-            }, void 0)]
-          }), void 0)
-        }, {
-          children: jsxs(OptionWrapper$2, Object.assign({}, getMenuProps({
-            ref: scrollerRef
-          }, {
-            suppressRefError: true
-          }), {
-            css: {
-              display: isOpen ? 'block' : 'none',
-              zIndex: '$popover'
-            },
-            withFooter: renderFooter && typeof renderFooter === 'function',
-            placement: placement
-          }, {
-            children: [!search && embedSearch && isOpen && jsx(SelectContainer, Object.assign({
-              css: {
-                position: 'sticky',
-                top: 0,
-                zIndex: '$sticky',
-                padding: '$spacing-04 $spacing-05 0',
-                backgroundColor: '$bgWhite'
+            }, void 0)
+          }), void 0), jsx(Portal, {
+            children: jsx(PopoverContent, Object.assign({
+              style: {
+                width: (_b = (_a = selectBoxRef === null || selectBoxRef === void 0 ? void 0 : selectBoxRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) !== null && _b !== void 0 ? _b : 0
               }
             }, {
-              children: jsx(InputSearchbox, {
-                size: 'sm',
-                onChange: handleInputValue,
-                placeholder: searchPlaceholder !== null && searchPlaceholder !== void 0 ? searchPlaceholder : t('searchPlaceholder', 'Cari ...')
-              }, void 0)
-            }), void 0), item.length > 0 || isLoading ? jsx(ConditionalWrapper, Object.assign({
-              condition: !!fetchData && item.length > 0,
-              wrapper: children => jsx(InfiniteScroll, Object.assign({
-                loadMore: _ => {
-                  if (!isLoading && fetchData) fetchData({
-                    query
-                  });
-                },
-                hasMore: true,
-                threshold: 5,
-                useWindow: false
-              }, {
-                children: children
-              }), void 0)
-            }, {
-              children: jsx(SelectOption, {
-                children: item.map((item, index) => {
-                  var _a;
-                  return /*#__PURE__*/createElement$2(SelectItem, Object.assign({}, getItemProps({
-                    item,
-                    disabled: item.isDisabled
-                  }), {
-                    key: (_a = item.value) !== null && _a !== void 0 ? _a : index,
-                    css: item.isDisabled ? {
-                      backgroundColor: 'unset',
-                      cursor: 'not-allowed',
-                      color: '$textDisable'
-                    } : {
-                      backgroundColor: highlightedIndex === index ? '$bgGray' : 'white',
-                      fontWeight: 'normal',
-                      color: selectedItem && selectedItem.value === item.value ? '$textGreen' : '$textPrimary'
-                    }
-                  }), item.render ? item.render(selectedItem) : item.name);
-                })
-              }, void 0)
-            }), void 0) : jsx(SelectOption, {
-              children: jsxs(StyledDiv$2, {
-                children: [jsx("div", Object.assign({
-                  style: {
-                    marginRight: '6px'
+              children: jsxs(Fragment, {
+                children: [isOpen && isLoading && jsx(Flex$1, Object.assign({
+                  justify: "center",
+                  align: "center",
+                  css: {
+                    position: 'absolute',
+                    inset: 0,
+                    zIndex: '$tooltip',
+                    top: item.length > 0 ? '0px' : placement === 'top' ? '-20px' : '20px',
+                    // bottom: '80px',
+                    width: '100%',
+                    height: scrollerRef.current ? scrollerRef.current.clientHeight : '40px',
+                    backgroundColor: '$bgWhite',
+                    opacity: 0.8,
+                    transform: placement === 'top' ? 'translate(0, -100%)' : 'none'
                   }
                 }, {
-                  children: jsx(CircleInfoOutline, {
-                    size: "16px",
-                    color: colors$4.iconDisable,
-                    style: {
-                      verticalAlign: 'text-bottom'
+                  children: jsx(Text$1, Object.assign({
+                    variant: "caption"
+                  }, {
+                    children: "Loading...."
+                  }), void 0)
+                }), void 0), jsx(ConditionalWrapper, Object.assign({
+                  condition: renderFooter && typeof renderFooter === 'function',
+                  wrapper: child => jsxs(Box, Object.assign({
+                    css: {
+                      position: 'absolute',
+                      float: 'left',
+                      display: isOpen ? 'block' : 'none',
+                      zIndex: '$popover',
+                      width: '100%'
                     }
-                  }, void 0)
-                }), void 0), t('noItemPlaceholder', 'Item tidak ditemukan')]
+                  }, {
+                    children: [child, renderFooter && typeof renderFooter === 'function' && jsx(StyledFooter, {
+                      children: renderFooter === null || renderFooter === void 0 ? void 0 : renderFooter()
+                    }, void 0)]
+                  }), void 0)
+                }, {
+                  children: jsxs(OptionWrapper$2, Object.assign({}, getMenuProps({
+                    ref: scrollerRef
+                  }, {
+                    suppressRefError: true
+                  }), {
+                    css: {
+                      display: isOpen ? 'block' : 'none',
+                      zIndex: '$popover',
+                      pointerEvents: 'auto'
+                    },
+                    withFooter: renderFooter && typeof renderFooter === 'function',
+                    placement: placement
+                  }, {
+                    children: [!search && embedSearch && isOpen && jsx(SelectContainer, Object.assign({
+                      css: {
+                        position: 'sticky',
+                        top: 0,
+                        zIndex: '$sticky',
+                        padding: '$spacing-04 $spacing-05 0',
+                        backgroundColor: '$bgWhite'
+                      }
+                    }, {
+                      children: jsx(InputSearchbox, {
+                        size: 'sm',
+                        onChange: handleInputValue,
+                        placeholder: searchPlaceholder !== null && searchPlaceholder !== void 0 ? searchPlaceholder : t('searchPlaceholder', 'Cari ...')
+                      }, void 0)
+                    }), void 0), item.length > 0 || isLoading ? jsx(ConditionalWrapper, Object.assign({
+                      condition: !!fetchData && item.length > 0,
+                      wrapper: children => jsx(InfiniteScroll, Object.assign({
+                        loadMore: _ => {
+                          if (!isLoading && fetchData) fetchData({
+                            query
+                          });
+                        },
+                        hasMore: true,
+                        threshold: 5,
+                        useWindow: false
+                      }, {
+                        children: children
+                      }), void 0)
+                    }, {
+                      children: jsx(PopoverClose, Object.assign({
+                        css: {
+                          display: 'block !important'
+                        }
+                      }, {
+                        children: jsx(SelectOption, {
+                          children: item.map((item, index) => {
+                            var _a;
+                            return /*#__PURE__*/createElement$2(SelectItem, Object.assign({}, getItemProps({
+                              item,
+                              disabled: item.isDisabled
+                            }), {
+                              key: (_a = item.value) !== null && _a !== void 0 ? _a : index,
+                              css: item.isDisabled ? {
+                                backgroundColor: 'unset',
+                                cursor: 'not-allowed',
+                                color: '$textDisable'
+                              } : {
+                                backgroundColor: highlightedIndex === index ? '$bgGray' : 'white',
+                                fontWeight: 'normal',
+                                color: selectedItem && selectedItem.value === item.value ? '$textGreen' : '$textPrimary'
+                              }
+                            }), item.render ? item.render(selectedItem) : item.name);
+                          })
+                        }, void 0)
+                      }), void 0)
+                    }), void 0) : jsx(SelectOption, {
+                      children: jsxs(StyledDiv$2, {
+                        children: [jsx("div", Object.assign({
+                          style: {
+                            marginRight: '6px'
+                          }
+                        }, {
+                          children: jsx(CircleInfoOutline, {
+                            size: "16px",
+                            color: colors$4.iconDisable,
+                            style: {
+                              verticalAlign: 'text-bottom'
+                            }
+                          }, void 0)
+                        }), void 0), t('noItemPlaceholder', 'Item tidak ditemukan')]
+                      }, void 0)
+                    }, void 0)]
+                  }), void 0)
+                }), void 0)]
               }, void 0)
-            }, void 0)]
-          }), void 0)
-        }), void 0)]
+            }), void 0)
+          }, void 0)]
+        }), void 0)
       }), void 0);
     }
   }), void 0);
@@ -9321,7 +9523,7 @@ $$f({ target: 'Array', proto: true, forced: !STRICT_METHOD || CHROME_BUG }, {
   }
 });
 
-var _jsxFileName$y = "C:\\Users\\Acer\\Documents\\project\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputSelectCheck\\icon\\CheckOutline.js";
+var _jsxFileName$x = "C:\\Users\\Acer\\Documents\\project\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputSelectCheck\\icon\\CheckOutline.js";
 const CheckOutline = props => /*#__PURE__*/React.createElement("svg", _extends({
   xmlns: "http://www.w3.org/2000/svg",
   xmlSpace: "preserve",
@@ -9338,7 +9540,7 @@ const CheckOutline = props => /*#__PURE__*/React.createElement("svg", _extends({
 }, props, {
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$y,
+    fileName: _jsxFileName$x,
     lineNumber: 4,
     columnNumber: 3
   }
@@ -9350,7 +9552,7 @@ const CheckOutline = props => /*#__PURE__*/React.createElement("svg", _extends({
   },
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$y,
+    fileName: _jsxFileName$x,
     lineNumber: 19,
     columnNumber: 5
   }
@@ -9362,14 +9564,14 @@ const CheckOutline = props => /*#__PURE__*/React.createElement("svg", _extends({
   },
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$y,
+    fileName: _jsxFileName$x,
     lineNumber: 26,
     columnNumber: 5
   }
 }));
 
-const _excluded$d = ["placeholder", "option", "value", "size", "disabled", "onChange", "search", "readOnly", "placement", "disabledOptions", "textEmptyItem", "onRemoveItem", "isInvalid", "sortBy", "showSelectAll", "selectAllLabel", "showSelectedTag", "unremovableTags", "helperText", "css", "showCounter", "labelCounter", "collapsible"];
-var _jsxFileName$x = "C:\\Users\\Acer\\Documents\\project\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputSelectCheck\\InputSelectCheck.js";
+const _excluded$c = ["placeholder", "option", "value", "size", "disabled", "onChange", "search", "readOnly", "placement", "disabledOptions", "textEmptyItem", "onRemoveItem", "isInvalid", "sortBy", "showSelectAll", "selectAllLabel", "showSelectedTag", "unremovableTags", "helperText", "css", "showCounter", "labelCounter", "collapsible"];
+var _jsxFileName$w = "C:\\Users\\Acer\\Documents\\project\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputSelectCheck\\InputSelectCheck.js";
 const Wrapper$1 = styled('div', {
   margin: 0,
   flexDirection: 'column',
@@ -9626,7 +9828,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       labelCounter,
       collapsible
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
   const {
     t
   } = useTranslation(['MajooUI/inputSelectCheck', 'translation']);
@@ -9856,7 +10058,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$x,
+      fileName: _jsxFileName$w,
       lineNumber: 523,
       columnNumber: 7
     }
@@ -9866,7 +10068,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     isInvalid: isInvalid,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$x,
+      fileName: _jsxFileName$w,
       lineNumber: 524,
       columnNumber: 9
     }
@@ -9881,7 +10083,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     disabled: disabled || readOnly,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$x,
+      fileName: _jsxFileName$w,
       lineNumber: 525,
       columnNumber: 11
     }
@@ -9897,7 +10099,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     hiddden: !search,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$x,
+      fileName: _jsxFileName$w,
       lineNumber: 535,
       columnNumber: 13
     }
@@ -9910,7 +10112,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     hiddden: search,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$x,
+      fileName: _jsxFileName$w,
       lineNumber: 541,
       columnNumber: 13
     }
@@ -9921,7 +10123,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     readOnly: readOnly,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$x,
+      fileName: _jsxFileName$w,
       lineNumber: 551,
       columnNumber: 11
     }
@@ -9929,7 +10131,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     color: disabled || readOnly ? colors$4.iconDisable : colors$4.iconPrimary,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$x,
+      fileName: _jsxFileName$w,
       lineNumber: 556,
       columnNumber: 13
     }
@@ -9942,7 +10144,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$x,
+      fileName: _jsxFileName$w,
       lineNumber: 560,
       columnNumber: 11
     }
@@ -9950,7 +10152,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     disabled: disabled,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$x,
+      fileName: _jsxFileName$w,
       lineNumber: 566,
       columnNumber: 13
     }
@@ -9980,7 +10182,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$x,
+      fileName: _jsxFileName$w,
       lineNumber: 577,
       columnNumber: 19
     }
@@ -9990,14 +10192,14 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     onClick: toggleCollapsible,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$x,
+      fileName: _jsxFileName$w,
       lineNumber: 598,
       columnNumber: 15
     }
   }, /*#__PURE__*/React__default.createElement(Separator$2, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$x,
+      fileName: _jsxFileName$w,
       lineNumber: 599,
       columnNumber: 17
     }
@@ -10011,7 +10213,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$x,
+      fileName: _jsxFileName$w,
       lineNumber: 600,
       columnNumber: 17
     }
@@ -10019,7 +10221,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     color: colors$4.iconSecondary,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$x,
+      fileName: _jsxFileName$w,
       lineNumber: 606,
       columnNumber: 21
     }
@@ -10027,7 +10229,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     color: colors$4.iconSecondary,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$x,
+      fileName: _jsxFileName$w,
       lineNumber: 608,
       columnNumber: 21
     }
@@ -10039,14 +10241,14 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     color: "secondary",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$x,
+      fileName: _jsxFileName$w,
       lineNumber: 610,
       columnNumber: 19
     }
   }, showAllTags ? t('showSomeText', 'Tampilkan Sebagian') : t('showAllText', 'Tampilkan Semua'))), /*#__PURE__*/React__default.createElement(Separator$2, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$x,
+      fileName: _jsxFileName$w,
       lineNumber: 614,
       columnNumber: 17
     }
@@ -10054,7 +10256,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     disabled: disabled,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$x,
+      fileName: _jsxFileName$w,
       lineNumber: 620,
       columnNumber: 11
     }
@@ -10082,7 +10284,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$x,
+      fileName: _jsxFileName$w,
       lineNumber: 621,
       columnNumber: 13
     }
@@ -10094,7 +10296,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$x,
+      fileName: _jsxFileName$w,
       lineNumber: 641,
       columnNumber: 9
     }
@@ -10103,7 +10305,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
   }), {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$x,
+      fileName: _jsxFileName$w,
       lineNumber: 646,
       columnNumber: 13
     }
@@ -10121,7 +10323,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$x,
+      fileName: _jsxFileName$w,
       lineNumber: 649,
       columnNumber: 19
     }
@@ -10134,7 +10336,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$x,
+      fileName: _jsxFileName$w,
       lineNumber: 662,
       columnNumber: 21
     }
@@ -10142,7 +10344,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     color: colors$4.iconDisable,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$x,
+      fileName: _jsxFileName$w,
       lineNumber: 671,
       columnNumber: 25
     }
@@ -10150,21 +10352,21 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     color: colors$4.iconGreen,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$x,
+      fileName: _jsxFileName$w,
       lineNumber: 675,
       columnNumber: 27
     }
   }), showSelectAll && (item === null || item === void 0 ? void 0 : item.id) === '!all' && selectedValue !== null && selectedValue !== void 0 && selectedValue.length && (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.length) < (items === null || items === void 0 ? void 0 : items.length) ? /*#__PURE__*/React__default.createElement(IndeterminateFilled, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$x,
+      fileName: _jsxFileName$w,
       lineNumber: 682,
       columnNumber: 25
     }
   }, "-") : /*#__PURE__*/React__default.createElement("div", {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$x,
+      fileName: _jsxFileName$w,
       lineNumber: 684,
       columnNumber: 25
     }
@@ -10174,7 +10376,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$x,
+      fileName: _jsxFileName$w,
       lineNumber: 687,
       columnNumber: 21
     }
@@ -10187,14 +10389,14 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
   }), {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$x,
+      fileName: _jsxFileName$w,
       lineNumber: 692,
       columnNumber: 13
     }
   }), /*#__PURE__*/React__default.createElement(StyledDiv$1, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$x,
+      fileName: _jsxFileName$w,
       lineNumber: 693,
       columnNumber: 15
     }
@@ -10204,7 +10406,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$x,
+      fileName: _jsxFileName$w,
       lineNumber: 694,
       columnNumber: 17
     }
@@ -10216,7 +10418,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$x,
+      fileName: _jsxFileName$w,
       lineNumber: 695,
       columnNumber: 19
     }
@@ -10263,7 +10465,7 @@ InputSelectCheck.defaultProps = {
   collapsible: true
 };
 
-var _jsxFileName$w = "C:\\Users\\Acer\\Documents\\project\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputSelectTag\\InputSelectTag.js";
+var _jsxFileName$v = "C:\\Users\\Acer\\Documents\\project\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputSelectTag\\InputSelectTag.js";
 const InputSelectTag = /*#__PURE__*/React.forwardRef((props, ref) => {
   return /*#__PURE__*/React.createElement(InputSelectCheck, _extends({
     ref: ref,
@@ -10271,7 +10473,7 @@ const InputSelectTag = /*#__PURE__*/React.forwardRef((props, ref) => {
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$w,
+      fileName: _jsxFileName$v,
       lineNumber: 6,
       columnNumber: 10
     }
@@ -10313,7 +10515,7 @@ InputSelectTag.defaultProps = {
   collapsible: true
 };
 
-var _jsxFileName$v = "C:\\Users\\Acer\\Documents\\project\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputCreatable\\InputCreatable.js";
+var _jsxFileName$u = "C:\\Users\\Acer\\Documents\\project\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputCreatable\\InputCreatable.js";
 const Wrapper = styled('div', {
   margin: 0,
   flexDirection: 'column',
@@ -10486,7 +10688,7 @@ function InputCreatable({
   return /*#__PURE__*/React__default.createElement(Wrapper, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$v,
+      fileName: _jsxFileName$u,
       lineNumber: 169,
       columnNumber: 5
     }
@@ -10496,7 +10698,7 @@ function InputCreatable({
     disabled: disabled || readOnly,
     __self: this,
     __source: {
-      fileName: _jsxFileName$v,
+      fileName: _jsxFileName$u,
       lineNumber: 170,
       columnNumber: 7
     }
@@ -10510,7 +10712,7 @@ function InputCreatable({
     onChange: event => handleInputValue(event.target.value),
     __self: this,
     __source: {
-      fileName: _jsxFileName$v,
+      fileName: _jsxFileName$u,
       lineNumber: 171,
       columnNumber: 9
     }
@@ -10520,14 +10722,14 @@ function InputCreatable({
     },
     __self: this,
     __source: {
-      fileName: _jsxFileName$v,
+      fileName: _jsxFileName$u,
       lineNumber: 181,
       columnNumber: 7
     }
   }, /*#__PURE__*/React__default.createElement(ItemWrapper, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$v,
+      fileName: _jsxFileName$u,
       lineNumber: 182,
       columnNumber: 9
     }
@@ -10535,7 +10737,7 @@ function InputCreatable({
     color: colors$4.iconGreen,
     __self: this,
     __source: {
-      fileName: _jsxFileName$v,
+      fileName: _jsxFileName$u,
       lineNumber: 183,
       columnNumber: 11
     }
@@ -10546,7 +10748,7 @@ function InputCreatable({
     },
     __self: this,
     __source: {
-      fileName: _jsxFileName$v,
+      fileName: _jsxFileName$u,
       lineNumber: 184,
       columnNumber: 11
     }
@@ -10916,6 +11118,13 @@ const InputCombobox = /*#__PURE__*/React.forwardRef((_a, forwardedRef) => {
     } = _a,
     props = __rest(_a, ["options", "defaultValue", "disabled", "placeholder", "showLeadingIcon", "placement", "size", "isInvalid", "css", "onValueChange"]);
   const [inputItems, setInputItems] = useState(items);
+  const [openOptions, setOpenOptions] = useState(false);
+  const selectBoxRef = useRef(null);
+  const [optionsWidth, setOptionsWidth] = useState(0);
+  useLayoutEffect(() => {
+    var _a, _b;
+    setOptionsWidth((_b = (_a = selectBoxRef === null || selectBoxRef === void 0 ? void 0 : selectBoxRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) !== null && _b !== void 0 ? _b : 0);
+  }, [selectBoxRef]);
   const {
     isOpen,
     getMenuProps,
@@ -10933,43 +11142,62 @@ const InputCombobox = /*#__PURE__*/React.forwardRef((_a, forwardedRef) => {
       setInputItems(items.filter(item => item.toLowerCase().startsWith(_inputValue.toLowerCase())));
     }
   });
-  return jsxs(SelectContainer, Object.assign({
-    css: css
+  return jsx(Popover, Object.assign({
+    open: openOptions || isOpen,
+    onOpenChange: setOpenOptions,
+    placement: placement,
+    hideOnScroll: true
   }, {
-    children: [jsx(SelectBox, Object.assign({}, getComboboxProps(), {
-      size: size,
-      disabled: disabled,
-      isInvalid: isInvalid
-    }, {
-      children: jsx(SelectInputSearch, Object.assign({
-        showLeadingIcon: showLeadingIcon,
-        disabled: disabled,
-        placeholder: placeholder,
-        inputProps: getInputProps({}, {
-          suppressRefError: true
-        })
-      }, props, {
-        ref: forwardedRef
-      }), void 0)
-    }), void 0), inputItems.length > 0 && jsx(OptionWrapper$2, Object.assign({}, getMenuProps(), {
-      css: {
-        display: isOpen ? 'block' : 'none'
-      },
-      placement: placement
+    children: jsxs(SelectContainer, Object.assign({
+      css: css,
+      ref: selectBoxRef
     }, {
-      children: jsx(SelectOption, {
-        children: inputItems.map((item, index) => /*#__PURE__*/createElement$2(SelectItem, Object.assign({}, getItemProps({
-          item,
-          index
-        }), {
-          key: `${item}${index}`,
-          css: {
-            backgroundColor: highlightedIndex === index ? '$bgGray' : 'white',
-            fontWeight: 'normal'
+      children: [jsx(PopoverTrigger, {
+        children: jsx(SelectBox, Object.assign({}, getComboboxProps(), {
+          size: size,
+          disabled: disabled,
+          isInvalid: isInvalid
+        }, {
+          children: jsx(SelectInputSearch, Object.assign({
+            showLeadingIcon: showLeadingIcon,
+            disabled: disabled,
+            placeholder: placeholder,
+            inputProps: getInputProps({}, {
+              suppressRefError: true
+            })
+          }, props, {
+            ref: forwardedRef
+          }), void 0)
+        }), void 0)
+      }, void 0), jsx(Portal, {
+        children: jsx(PopoverContent, Object.assign({
+          style: {
+            width: optionsWidth
           }
-        }), item))
-      }, void 0)
-    }), void 0)]
+        }, {
+          children: inputItems.length > 0 && jsx(OptionWrapper$2, Object.assign({}, getMenuProps(), {
+            css: {
+              display: isOpen ? 'block' : 'none',
+              pointerEvents: 'auto'
+            },
+            placement: placement
+          }, {
+            children: jsx(SelectOption, {
+              children: inputItems.map((item, index) => /*#__PURE__*/createElement$2(SelectItem, Object.assign({}, getItemProps({
+                item,
+                index
+              }), {
+                key: `${item}${index}`,
+                css: {
+                  backgroundColor: highlightedIndex === index ? '$bgGray' : 'white',
+                  fontWeight: 'normal'
+                }
+              }), item))
+            }, void 0)
+          }), void 0)
+        }), void 0)
+      }, void 0)]
+    }), void 0)
   }), void 0);
 });
 
@@ -11293,140 +11521,6 @@ InputCounter.defaultProps = {
   size: 'lg'
 };
 
-const _excluded$c = ["children"];
-var _jsxFileName$u = "C:\\Users\\Acer\\Documents\\project\\majoo\\majoo-ui\\packages\\react\\src\\components\\popover\\Popover.js";
-const {
-  zIndices
-} = foundations;
-const PopoverContext = /*#__PURE__*/createContext();
-const Popover = ({
-  children,
-  open: _open = false,
-  onOpenChange,
-  placement,
-  sideOffset: _sideOffset = 5
-}) => {
-  const [openState, setOpenState] = useState(false);
-  useEffect(() => {
-    setOpenState(_open);
-  }, [_open]);
-  useEffect(() => {
-    if (onOpenChange) onOpenChange(openState);
-  }, [openState, onOpenChange]);
-  const floatingHook = useFloating({
-    open: openState,
-    onOpenChange: setOpenState,
-    middleware: [offset(_sideOffset), flip(), shift$2()],
-    placement
-  });
-  const {
-    getReferenceProps,
-    getFloatingProps
-  } = useInteractions([useClick(floatingHook.context), useDismiss(floatingHook.context)]);
-  const value = {
-    openState,
-    setOpenState,
-    floatingHook,
-    getReferenceProps,
-    getFloatingProps
-  };
-  return /*#__PURE__*/React__default.createElement(PopoverContext.Provider, {
-    value: value,
-    __self: undefined,
-    __source: {
-      fileName: _jsxFileName$u,
-      lineNumber: 44,
-      columnNumber: 10
-    }
-  }, children);
-};
-const PopoverTrigger = ({
-  children,
-  disabled
-}) => {
-  const {
-    floatingHook: {
-      reference
-    },
-    getReferenceProps
-  } = useContext(PopoverContext);
-  return disabled ? children : /*#__PURE__*/cloneElement(children, getReferenceProps(Object.assign({
-    ref: reference
-  }, children.props)));
-};
-const PopoverContent = ({
-  children,
-  isMobile,
-  style
-}) => {
-  const {
-    openState,
-    floatingHook: {
-      x,
-      y,
-      floating,
-      strategy,
-      context
-    },
-    getFloatingProps
-  } = useContext(PopoverContext);
-  return openState ? /*#__PURE__*/React__default.createElement(FloatingFocusManager, {
-    context: context,
-    modal: false,
-    order: ['reference', 'content'],
-    returnFocus: false,
-    __self: undefined,
-    __source: {
-      fileName: _jsxFileName$u,
-      lineNumber: 62,
-      columnNumber: 5
-    }
-  }, /*#__PURE__*/React__default.createElement("div", _extends({}, getFloatingProps({
-    ref: floating,
-    style: Object.assign({
-      position: strategy,
-      top: isMobile ? 0 : y != null ? y : '',
-      left: isMobile ? 0 : x != null ? x : '',
-      zIndex: zIndices.popover
-    }, style)
-  }), {
-    __self: undefined,
-    __source: {
-      fileName: _jsxFileName$u,
-      lineNumber: 63,
-      columnNumber: 7
-    }
-  }), children)) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null);
-};
-const PopoverClose = _ref => {
-  let {
-      children
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
-  const {
-    setOpenState
-  } = useContext(PopoverContext);
-  return /*#__PURE__*/React__default.createElement(Flex$1, _extends({}, props, {
-    onClick: () => {
-      if (props.onClick) props.onClick();
-      setOpenState(false);
-    },
-    __self: undefined,
-    __source: {
-      fileName: _jsxFileName$u,
-      lineNumber: 86,
-      columnNumber: 5
-    }
-  }), children);
-};
-Popover.propTypes = {
-  open: PropTypes.bool,
-  onOpenChange: PropTypes.func,
-  placement: PropTypes.oneOf(['top', 'top-start', 'top-end', 'right', 'right-start', 'right-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end']),
-  sideOffset: PropTypes.number
-};
-Popover.displayName = 'Popover';
-
 const _excluded$b = ["className", "defaultValue", "value", "name", "disabled", "orientation", "dir", "min", "max", "step", "onValueChange", "minStepsBetweenThumbs", "color", "size", "width", "height"];
 var _jsxFileName$t = "C:\\Users\\Acer\\Documents\\project\\majoo\\majoo-ui\\packages\\react\\src\\components\\slider\\Slider.js";
 const StyledSlider = styled$1(SliderPrimitive.Root, {