@majoo-ui/react 1.55.16 → 1.55.17

package/index.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('prop-types'), require('@stitches/react'), require('@majoo-ui/core'), require('@majoo-ui/icons'), require('react-transition-group'), require('react/jsx-runtime'), require('@majoo-ui/helpers'), require('react-i18next'), require('moment'), require('@radix-ui/react-avatar'), require('@radix-ui/react-tooltip'), require('@radix-ui/react-progress'), require('@radix-ui/react-label'), require('@radix-ui/react-checkbox'), require('@radix-ui/react-radio-group'), require('react-number-format'), require('@radix-ui/react-switch'), require('downshift'), require('react-infinite-scroller'), require('lodash.debounce'), require('otp-input-react'), require('@floating-ui/react-dom-interactions'), require('@radix-ui/react-slider'), require('@radix-ui/react-tabs'), require('@radix-ui/react-separator'), require('@radix-ui/react-toggle-group'), require('@radix-ui/react-dialog'), require('@radix-ui/react-accordion'), require('dayzed'), require('react-table'), require('react-dom'), require('@radix-ui/react-alert-dialog'), require('@radix-ui/react-dropdown-menu'), require('@radix-ui/react-aspect-ratio'), require('react-color/lib/components/common'), require('react-color/lib/helpers/color'), require('react-step-wizard'), require('@react-google-maps/api'), require('superagent'), require('recharts'), require('draft-js'), require('react-draft-wysiwyg'), require('react-contextmenu'), require('react-loading-skeleton'), require('react-loading-skeleton/dist/skeleton.css'), require('react-ui-scrollspy'), require('react-image-crop'), require('browser-image-compression'), require('react-table-sticky')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react', 'prop-types', '@stitches/react', '@majoo-ui/core', '@majoo-ui/icons', 'react-transition-group', 'react/jsx-runtime', '@majoo-ui/helpers', 'react-i18next', 'moment', '@radix-ui/react-avatar', '@radix-ui/react-tooltip', '@radix-ui/react-progress', '@radix-ui/react-label', '@radix-ui/react-checkbox', '@radix-ui/react-radio-group', 'react-number-format', '@radix-ui/react-switch', 'downshift', 'react-infinite-scroller', 'lodash.debounce', 'otp-input-react', '@floating-ui/react-dom-interactions', '@radix-ui/react-slider', '@radix-ui/react-tabs', '@radix-ui/react-separator', '@radix-ui/react-toggle-group', '@radix-ui/react-dialog', '@radix-ui/react-accordion', 'dayzed', 'react-table', 'react-dom', '@radix-ui/react-alert-dialog', '@radix-ui/react-dropdown-menu', '@radix-ui/react-aspect-ratio', 'react-color/lib/components/common', 'react-color/lib/helpers/color', 'react-step-wizard', '@react-google-maps/api', 'superagent', 'recharts', 'draft-js', 'react-draft-wysiwyg', 'react-contextmenu', 'react-loading-skeleton', 'react-loading-skeleton/dist/skeleton.css', 'react-ui-scrollspy', 'react-image-crop', 'browser-image-compression', 'react-table-sticky'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.React = {}, global.React, global.PropTypes, global.react, global.core, global.icons, global.reactTransitionGroup, global.jsxRuntime, global.helpers, global.reactI18next, global.moment, global.AvatarPrimitive, global.TooltipPrimitive, global.ProgressPrimitive, global.LabelPrimitive, global.CheckboxPrimitive, global.RadioGroupPrimitive, global.NumberFormat, global.SwitchPrimitive, global.Downshift, global.InfiniteScroll, global.debounce, global.OTPInput, global.reactDomInteractions, global.SliderPrimitive, global.TabsPrimitive, global.SeparatorPrimitive, global.ToggleGroupPrimitive, global.DialogPrimitive, global.AccordionPrimitive, global.dayzed, global.reactTable, global.ReactDOM, global.ADialog, global.DropdownMenuPrimitive, global.AspectRatioPrimitive, global.common, global.color, global.StepWizard$1, global.api, global.request, global.recharts, global.draftJs, global.reactDraftWysiwyg, global.reactContextmenu, global.ReactSkeleton, null, global.ScrollSpy, global.ReactCrop, global.imageCompressionComponent, global.reactTableSticky));
-})(this, (function (exports, React, PropTypes, react, core, icons, reactTransitionGroup, jsxRuntime, helpers, reactI18next, moment, AvatarPrimitive, TooltipPrimitive, ProgressPrimitive, LabelPrimitive, CheckboxPrimitive, RadioGroupPrimitive, NumberFormat, SwitchPrimitive, Downshift, InfiniteScroll, debounce, OTPInput, reactDomInteractions, SliderPrimitive, TabsPrimitive, SeparatorPrimitive, ToggleGroupPrimitive, DialogPrimitive, AccordionPrimitive, dayzed, reactTable, ReactDOM, ADialog, DropdownMenuPrimitive, AspectRatioPrimitive, common, color, StepWizard$1, api, request, recharts, draftJs, reactDraftWysiwyg, reactContextmenu, ReactSkeleton, skeleton_css, ScrollSpy, ReactCrop, imageCompressionComponent, reactTableSticky) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('prop-types'), require('@stitches/react'), require('@majoo-ui/core'), require('@majoo-ui/icons'), require('react-transition-group'), require('react/jsx-runtime'), require('@majoo-ui/helpers'), require('react-i18next'), require('moment'), require('@radix-ui/react-avatar'), require('@radix-ui/react-tooltip'), require('@radix-ui/react-progress'), require('@radix-ui/react-label'), require('@radix-ui/react-checkbox'), require('@radix-ui/react-radio-group'), require('react-number-format'), require('@radix-ui/react-switch'), require('downshift'), require('react-infinite-scroller'), require('lodash.debounce'), require('@floating-ui/react-dom-interactions'), require('otp-input-react'), require('@radix-ui/react-slider'), require('@radix-ui/react-tabs'), require('@radix-ui/react-separator'), require('@radix-ui/react-toggle-group'), require('@radix-ui/react-dialog'), require('@radix-ui/react-accordion'), require('dayzed'), require('react-table'), require('react-dom'), require('@radix-ui/react-alert-dialog'), require('@radix-ui/react-dropdown-menu'), require('@radix-ui/react-aspect-ratio'), require('react-color/lib/components/common'), require('react-color/lib/helpers/color'), require('react-step-wizard'), require('@react-google-maps/api'), require('superagent'), require('recharts'), require('draft-js'), require('react-draft-wysiwyg'), require('react-contextmenu'), require('react-loading-skeleton'), require('react-loading-skeleton/dist/skeleton.css'), require('react-ui-scrollspy'), require('react-image-crop'), require('browser-image-compression'), require('react-table-sticky')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react', 'prop-types', '@stitches/react', '@majoo-ui/core', '@majoo-ui/icons', 'react-transition-group', 'react/jsx-runtime', '@majoo-ui/helpers', 'react-i18next', 'moment', '@radix-ui/react-avatar', '@radix-ui/react-tooltip', '@radix-ui/react-progress', '@radix-ui/react-label', '@radix-ui/react-checkbox', '@radix-ui/react-radio-group', 'react-number-format', '@radix-ui/react-switch', 'downshift', 'react-infinite-scroller', 'lodash.debounce', '@floating-ui/react-dom-interactions', 'otp-input-react', '@radix-ui/react-slider', '@radix-ui/react-tabs', '@radix-ui/react-separator', '@radix-ui/react-toggle-group', '@radix-ui/react-dialog', '@radix-ui/react-accordion', 'dayzed', 'react-table', 'react-dom', '@radix-ui/react-alert-dialog', '@radix-ui/react-dropdown-menu', '@radix-ui/react-aspect-ratio', 'react-color/lib/components/common', 'react-color/lib/helpers/color', 'react-step-wizard', '@react-google-maps/api', 'superagent', 'recharts', 'draft-js', 'react-draft-wysiwyg', 'react-contextmenu', 'react-loading-skeleton', 'react-loading-skeleton/dist/skeleton.css', 'react-ui-scrollspy', 'react-image-crop', 'browser-image-compression', 'react-table-sticky'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.React = {}, global.React, global.PropTypes, global.react, global.core, global.icons, global.reactTransitionGroup, global.jsxRuntime, global.helpers, global.reactI18next, global.moment, global.AvatarPrimitive, global.TooltipPrimitive, global.ProgressPrimitive, global.LabelPrimitive, global.CheckboxPrimitive, global.RadioGroupPrimitive, global.NumberFormat, global.SwitchPrimitive, global.Downshift, global.InfiniteScroll, global.debounce, global.reactDomInteractions, global.OTPInput, global.SliderPrimitive, global.TabsPrimitive, global.SeparatorPrimitive, global.ToggleGroupPrimitive, global.DialogPrimitive, global.AccordionPrimitive, global.dayzed, global.reactTable, global.ReactDOM, global.ADialog, global.DropdownMenuPrimitive, global.AspectRatioPrimitive, global.common, global.color, global.StepWizard$1, global.api, global.request, global.recharts, global.draftJs, global.reactDraftWysiwyg, global.reactContextmenu, global.ReactSkeleton, null, global.ScrollSpy, global.ReactCrop, global.imageCompressionComponent, global.reactTableSticky));
+})(this, (function (exports, React, PropTypes, react, core, icons, reactTransitionGroup, jsxRuntime, helpers, reactI18next, moment, AvatarPrimitive, TooltipPrimitive, ProgressPrimitive, LabelPrimitive, CheckboxPrimitive, RadioGroupPrimitive, NumberFormat, SwitchPrimitive, Downshift, InfiniteScroll, debounce, reactDomInteractions, OTPInput, SliderPrimitive, TabsPrimitive, SeparatorPrimitive, ToggleGroupPrimitive, DialogPrimitive, AccordionPrimitive, dayzed, reactTable, ReactDOM, ADialog, DropdownMenuPrimitive, AspectRatioPrimitive, common, color, StepWizard$1, api, request, recharts, draftJs, reactDraftWysiwyg, reactContextmenu, ReactSkeleton, skeleton_css, ScrollSpy, ReactCrop, imageCompressionComponent, reactTableSticky) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -2818,7 +2818,7 @@
           fontWeight: '600'
         },
         pageTitle: {
-          fontSize: '$page-title',
+          fontSize: '$page-title-2',
           lineHeight: '$page-title',
           letterSpacing: '$page-title',
           fontWeight: '600'
@@ -2854,7 +2854,7 @@
     color: 'primary',
     heading: 'h1'
   };
-  Heading.displayName = "Heading";
+  Heading.displayName = 'Heading';
 
   const Paragraph = styled(Text$1, {
     variants: {
@@ -5439,7 +5439,7 @@
         color: "disable",
         css: {
           alignSelf: 'end',
-          marginBottom: '$spacing-03'
+          marginBottom: '$spacing-03 !important'
         },
         __self: undefined,
         __source: {
@@ -6708,6 +6708,10 @@
       }
     }]
   });
+  const ContainerLabel = styled('label', {
+    width: 'fit-content',
+    cursor: 'pointer'
+  });
   const InputRadio = _ref => {
     let {
         id,
@@ -6719,28 +6723,38 @@
         readOnly
       } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
-    function renderInputType(type, checked) {
+    function renderInputType(type, checkedValue, onValueChange) {
       switch (type) {
         case 'number':
           return /*#__PURE__*/React__default["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["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
             }
           }));
@@ -6754,12 +6768,12 @@
               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);
@@ -6769,28 +6783,37 @@
       __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["default"].createElement(Container$a, {
+      const checkedValue = value != null ? value : defaultValue;
+      return /*#__PURE__*/React__default["default"].createElement(ContainerLabel, {
+        htmlFor: id,
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$G,
+          lineNumber: 213,
+          columnNumber: 11
+        }
+      }, /*#__PURE__*/React__default["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["default"].createElement(Flex$1, {
         align: "center",
@@ -6798,8 +6821,8 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$G,
-          lineNumber: 206,
-          columnNumber: 13
+          lineNumber: 223,
+          columnNumber: 15
         }
       }, /*#__PURE__*/React__default["default"].createElement(StyledRadio, _extends({
         id: id,
@@ -6809,17 +6832,17 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$G,
-          lineNumber: 207,
-          columnNumber: 15
+          lineNumber: 224,
+          columnNumber: 17
         }
       }), /*#__PURE__*/React__default["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["default"].createElement(Text$1, {
+      })), renderInputType(inputType, checkedValue, onValueChange)), description && /*#__PURE__*/React__default["default"].createElement(Text$1, {
         variant: "caption",
         color: "secondary",
         css: {
@@ -6828,10 +6851,10 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$G,
-          lineNumber: 213,
-          columnNumber: 15
+          lineNumber: 230,
+          columnNumber: 17
         }
-      }, description));
+      }, description)));
     });
   };
   InputRadio.propTypes = {
@@ -8248,7 +8271,7 @@
     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;
@@ -8256,20 +8279,25 @@
         size,
         onChange,
         css,
-        disabled
+        disabled,
+        withDebounce,
+        defaultValue
       } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
     const {
       t
     } = reactI18next.useTranslation(['MajooUI/inputSearchbox', 'translation']);
-    const [value, setValue] = React__default["default"].useState('');
+    const [value, setValue] = React.useState(defaultValue);
     const inputValue = (_props$value = props === null || props === void 0 ? void 0 : props.value) != null ? _props$value : value;
-    const handleChange = React__default["default"].useCallback(e => {
+    const debounceChange = React.useCallback(() => debounce__default["default"](e => onChange === null || onChange === void 0 ? void 0 : onChange(e.target.value), 1000), [onChange]);
+    const handleChange = React.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) {
@@ -8284,7 +8312,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$z,
-        lineNumber: 33,
+        lineNumber: 38,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(InputLeftElement, {
@@ -8292,14 +8320,14 @@
         __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["default"].createElement(InputText, _extends({
@@ -8314,30 +8342,30 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$z,
-        lineNumber: 35,
+        lineNumber: 40,
         columnNumber: 7
       }
     })), /*#__PURE__*/React__default["default"].createElement(InputRightElement, {
-      children: inputValue.length > 0 ? /*#__PURE__*/React__default["default"].createElement(SvgCloseFilled, {
+      children: (inputValue === null || inputValue === void 0 ? void 0 : inputValue.length) > 0 ? /*#__PURE__*/React__default["default"].createElement(SvgCloseFilled, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$z,
-          lineNumber: 46,
-          columnNumber: 43
+          lineNumber: 51,
+          columnNumber: 44
         }
       }) : /*#__PURE__*/React__default["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
       }
     }));
@@ -8349,7 +8377,8 @@
     isInvalid: PropTypes__default["default"].bool,
     readOnly: PropTypes__default["default"].bool,
     disabled: PropTypes__default["default"].bool,
-    onChange: PropTypes__default["default"].func
+    onChange: PropTypes__default["default"].func,
+    withDebounce: PropTypes__default["default"].bool
   };
   InputSearchbox.defaultProps = {
     size: 'sm'
@@ -8507,6 +8536,144 @@
     ];
   });
 
+  const _excluded$d = ["children"];
+  var _jsxFileName$y = "C:\\Users\\Acer\\Documents\\project\\majoo\\majoo-ui\\packages\\react\\src\\components\\popover\\Popover.js";
+  const {
+    zIndices
+  } = core.foundations;
+  const PopoverContext = /*#__PURE__*/React.createContext();
+  const Popover = ({
+    children,
+    open: _open = false,
+    onOpenChange,
+    placement,
+    sideOffset: _sideOffset = 5,
+    hideOnScroll: _hideOnScroll = false
+  }) => {
+    const [openState, setOpenState] = React.useState(false);
+    React.useEffect(() => {
+      setOpenState(_open);
+    }, [_open]);
+    React.useEffect(() => {
+      if (onOpenChange) onOpenChange(openState);
+    }, [openState, onOpenChange]);
+    const floatingHook = reactDomInteractions.useFloating({
+      open: openState,
+      onOpenChange: setOpenState,
+      middleware: [reactDomInteractions.offset(_sideOffset), reactDomInteractions.flip(), reactDomInteractions.shift()],
+      placement
+    });
+    const {
+      getReferenceProps,
+      getFloatingProps
+    } = reactDomInteractions.useInteractions([reactDomInteractions.useClick(floatingHook.context), reactDomInteractions.useDismiss(floatingHook.context, {
+      ancestorScroll: _hideOnScroll
+    })]);
+    const value = {
+      openState,
+      setOpenState,
+      floatingHook,
+      getReferenceProps,
+      getFloatingProps
+    };
+    return /*#__PURE__*/React__default["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
+    } = React.useContext(PopoverContext);
+    return disabled ? children : /*#__PURE__*/React.cloneElement(children, getReferenceProps(Object.assign({
+      ref: reference
+    }, children.props)));
+  };
+  const PopoverContent = ({
+    children,
+    isMobile,
+    style
+  }) => {
+    const {
+      openState,
+      floatingHook: {
+        x,
+        y,
+        floating,
+        strategy,
+        context
+      },
+      getFloatingProps
+    } = React.useContext(PopoverContext);
+    return openState ? /*#__PURE__*/React__default["default"].createElement(reactDomInteractions.FloatingFocusManager, {
+      context: context,
+      modal: false,
+      order: ['reference', 'content'],
+      returnFocus: false,
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$y,
+        lineNumber: 64,
+        columnNumber: 5
+      }
+    }, /*#__PURE__*/React__default["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["default"].createElement(React__default["default"].Fragment, null);
+  };
+  const PopoverClose = _ref => {
+    let {
+        children
+      } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
+    const {
+      setOpenState
+    } = React.useContext(PopoverContext);
+    return /*#__PURE__*/React__default["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__default["default"].bool,
+    onOpenChange: PropTypes__default["default"].func,
+    placement: PropTypes__default["default"].oneOf(['top', 'top-start', 'top-end', 'right', 'right-start', 'right-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end']),
+    sideOffset: PropTypes__default["default"].number,
+    hideOnScroll: PropTypes__default["default"].bool
+  };
+  Popover.displayName = 'Popover';
+
   var SelectContainer = styled('div', {
     margin: 0,
     flexDirection: 'column',
@@ -8664,6 +8831,11 @@
   var 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',
@@ -8852,6 +9024,10 @@
     var _u = React.useState(),
       query = _u[0],
       setQuery = _u[1];
+    var _v = React.useState(false),
+      openOptions = _v[0],
+      setOpenOptions = _v[1];
+    var selectBoxRef = React.useRef(null);
     var scrollerRef = React.useRef(null);
     React.useEffect(function () {
       var _a;
@@ -8939,6 +9115,7 @@
       }
     }, {
       children: function (_a) {
+        var _b, _c;
         var getRootProps = _a.getRootProps,
           getToggleButtonProps = _a.getToggleButtonProps,
           getMenuProps = _a.getMenuProps,
@@ -8962,200 +9139,227 @@
             }, void 0)
           }), void 0);
         };
-        return jsxRuntime.jsxs(SelectContainer, __assign({
-          css: css
+        return jsxRuntime.jsx(Popover, __assign({
+          open: openOptions,
+          onOpenChange: setOpenOptions,
+          placement: placement,
+          hideOnScroll: true
         }, {
-          children: [jsxRuntime.jsx(ConditionalWrapper, __assign({
-            condition: showTooltip && selectedValue,
-            wrapper: function (children) {
-              return jsxRuntime.jsx(Tooltip$1, __assign({
-                color: "dark",
-                label: selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.name
-              }, {
-                children: children
-              }), void 0);
-            }
+          children: jsxRuntime.jsxs(SelectContainer, __assign({
+            css: css,
+            ref: selectBoxRef
           }, {
-            children: jsxRuntime.jsxs(SelectBox, __assign({}, getRootProps({
-              refKey: 'ref'
-            }, {
-              suppressRefError: true
-            }), {
-              size: size,
-              disabled: disabled,
-              readOnly: readOnly,
-              isInvalid: isInvalid
+            children: [jsxRuntime.jsx(ConditionalWrapper, __assign({
+              condition: showTooltip && selectedValue,
+              wrapper: function (children) {
+                return jsxRuntime.jsx(Tooltip$1, __assign({
+                  color: "dark",
+                  label: selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.name
+                }, {
+                  children: children
+                }), void 0);
+              }
             }, {
-              children: [search ? jsxRuntime.jsx(Box, __assign({
-                style: {
-                  width: '100%',
-                  flex: 1
-                }
-              }, {
-                children: jsxRuntime.jsx(SelectInputSearch, {
-                  showLeadingIcon: showLeadingIcon,
-                  showClearIcon: hideArrowicon,
+              children: jsxRuntime.jsx(PopoverTrigger, {
+                children: jsxRuntime.jsxs(SelectBox, __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 : function (query) {
-                    if (onSearch) onSearch(query);
-                    setQuery(query);
-                  },
-                  inputProps: getInputProps({
-                    onChange: function (event) {
-                      if (event.type !== 'change') return;
-                      var query = event.target.value;
-                      if (!fetchData) handleInputValue(query);else debouncedSearch(query);
-                    },
-                    disabled: disabled
-                  }),
-                  onClick: !isOpen ? getToggleButtonProps({
-                    disabled: disabled || readOnly
-                  }).onClick : undefined
-                }, void 0)
-              }), void 0) : jsxRuntime.jsx(Button$3, __assign({}, getToggleButtonProps({
-                disabled: disabled || readOnly
-              }), {
-                disabled: disabled,
-                size: size,
-                readOnly: readOnly,
-                type: "button"
-              }, {
-                children: selectedItem ? selectedItem.render ? selectedItem.render(selectedItem) : jsxRuntime.jsx(Text$1, __assign({
-                  color: disabled ? 'disable' : 'primary',
-                  css: StyledText$1
-                }, {
-                  children: selectedItem.name
-                }), void 0) : jsxRuntime.jsx(Text$1, __assign({
-                  color: "disable",
-                  css: StyledText$1
+                  isInvalid: isInvalid
                 }, {
-                  children: placeholder !== null && placeholder !== void 0 ? placeholder : t('placeholder', 'Pilih Item')
+                  children: [search ? jsxRuntime.jsx(Box, __assign({
+                    style: {
+                      width: '100%',
+                      flex: 1
+                    }
+                  }, {
+                    children: jsxRuntime.jsx(SelectInputSearch, {
+                      showLeadingIcon: showLeadingIcon,
+                      showClearIcon: hideArrowicon,
+                      disabled: disabled,
+                      placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : t('placeholder', 'Pilih Item'),
+                      readOnly: readOnly,
+                      handleInputValue: !fetchData ? handleInputValue : function (query) {
+                        if (onSearch) onSearch(query);
+                        setQuery(query);
+                      },
+                      inputProps: getInputProps({
+                        onChange: function (event) {
+                          if (event.type !== 'change') return;
+                          var query = event.target.value;
+                          if (!fetchData) handleInputValue(query);else debouncedSearch(query);
+                        },
+                        disabled: disabled
+                      }),
+                      onClick: !isOpen ? getToggleButtonProps({
+                        disabled: disabled || readOnly
+                      }).onClick : undefined
+                    }, void 0)
+                  }), void 0) : jsxRuntime.jsx(Button$3, __assign({}, getToggleButtonProps({
+                    disabled: disabled || readOnly
+                  }), {
+                    disabled: disabled,
+                    size: size,
+                    readOnly: readOnly,
+                    type: "button"
+                  }, {
+                    children: selectedItem ? selectedItem.render ? selectedItem.render(selectedItem) : jsxRuntime.jsx(Text$1, __assign({
+                      color: disabled ? 'disable' : 'primary',
+                      css: StyledText$1
+                    }, {
+                      children: selectedItem.name
+                    }), void 0) : jsxRuntime.jsx(Text$1, __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 && jsxRuntime.jsx(Flex$1, __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: jsxRuntime.jsx(Text$1, __assign({
-              variant: "caption"
-            }, {
-              children: "Loading...."
-            }), void 0)
-          }), void 0), jsxRuntime.jsx(ConditionalWrapper, __assign({
-            condition: renderFooter && typeof renderFooter === 'function',
-            wrapper: function (child) {
-              return jsxRuntime.jsxs(Box, __assign({
-                css: {
-                  position: 'absolute',
-                  float: 'left',
-                  display: isOpen ? 'block' : 'none',
-                  zIndex: '$popover',
-                  width: '100%'
-                }
-              }, {
-                children: [child, renderFooter && typeof renderFooter === 'function' && jsxRuntime.jsx(StyledFooter, {
-                  children: renderFooter === null || renderFooter === void 0 ? void 0 : renderFooter()
-                }, void 0)]
-              }), void 0);
-            }
-          }, {
-            children: jsxRuntime.jsxs(OptionWrapper$2, __assign({}, getMenuProps({
-              ref: scrollerRef
-            }, {
-              suppressRefError: true
-            }), {
-              css: {
-                display: isOpen ? 'block' : 'none',
-                zIndex: '$popover'
-              },
-              withFooter: renderFooter && typeof renderFooter === 'function',
-              placement: placement
-            }, {
-              children: [!search && embedSearch && isOpen && jsxRuntime.jsx(SelectContainer, __assign({
-                css: {
-                  position: 'sticky',
-                  top: 0,
-                  zIndex: '$sticky',
-                  padding: '$spacing-04 $spacing-05 0',
-                  backgroundColor: '$bgWhite'
+              }, void 0)
+            }), void 0), jsxRuntime.jsx(helpers.Portal, {
+              children: jsxRuntime.jsx(PopoverContent, __assign({
+                style: {
+                  width: (_c = (_b = selectBoxRef === null || selectBoxRef === void 0 ? void 0 : selectBoxRef.current) === null || _b === void 0 ? void 0 : _b.clientWidth) !== null && _c !== void 0 ? _c : 0
                 }
               }, {
-                children: jsxRuntime.jsx(InputSearchbox, {
-                  size: 'sm',
-                  onChange: handleInputValue,
-                  placeholder: searchPlaceholder !== null && searchPlaceholder !== void 0 ? searchPlaceholder : t('searchPlaceholder', 'Cari ...')
-                }, void 0)
-              }), void 0), item.length > 0 || isLoading ? jsxRuntime.jsx(ConditionalWrapper, __assign({
-                condition: !!fetchData && item.length > 0,
-                wrapper: function (children) {
-                  return jsxRuntime.jsx(InfiniteScroll__default["default"], __assign({
-                    loadMore: function (_) {
-                      if (!isLoading && fetchData) fetchData({
-                        query: query
-                      });
-                    },
-                    hasMore: true,
-                    threshold: 5,
-                    useWindow: false
+                children: jsxRuntime.jsxs(jsxRuntime.Fragment, {
+                  children: [isOpen && isLoading && jsxRuntime.jsx(Flex$1, __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: children
-                  }), void 0);
-                }
-              }, {
-                children: jsxRuntime.jsx(SelectOption, {
-                  children: item.map(function (item, index) {
-                    var _a;
-                    return /*#__PURE__*/React.createElement(SelectItem, __assign({}, getItemProps({
-                      item: 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) : jsxRuntime.jsx(SelectOption, {
-                children: jsxRuntime.jsxs(StyledDiv$2, {
-                  children: [jsxRuntime.jsx("div", __assign({
-                    style: {
-                      marginRight: '6px'
+                    children: jsxRuntime.jsx(Text$1, __assign({
+                      variant: "caption"
+                    }, {
+                      children: "Loading...."
+                    }), void 0)
+                  }), void 0), jsxRuntime.jsx(ConditionalWrapper, __assign({
+                    condition: renderFooter && typeof renderFooter === 'function',
+                    wrapper: function (child) {
+                      return jsxRuntime.jsxs(Box, __assign({
+                        css: {
+                          position: 'absolute',
+                          float: 'left',
+                          display: isOpen ? 'block' : 'none',
+                          zIndex: '$popover',
+                          width: '100%'
+                        }
+                      }, {
+                        children: [child, renderFooter && typeof renderFooter === 'function' && jsxRuntime.jsx(StyledFooter, {
+                          children: renderFooter === null || renderFooter === void 0 ? void 0 : renderFooter()
+                        }, void 0)]
+                      }), void 0);
                     }
                   }, {
-                    children: jsxRuntime.jsx(icons.CircleInfoOutline, {
-                      size: "16px",
-                      color: colors$4.iconDisable,
-                      style: {
-                        verticalAlign: 'text-bottom'
-                      }
-                    }, void 0)
-                  }), void 0), t('noItemPlaceholder', 'Item tidak ditemukan')]
+                    children: jsxRuntime.jsxs(OptionWrapper$2, __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 && jsxRuntime.jsx(SelectContainer, __assign({
+                        css: {
+                          position: 'sticky',
+                          top: 0,
+                          zIndex: '$sticky',
+                          padding: '$spacing-04 $spacing-05 0',
+                          backgroundColor: '$bgWhite'
+                        }
+                      }, {
+                        children: jsxRuntime.jsx(InputSearchbox, {
+                          size: 'sm',
+                          onChange: handleInputValue,
+                          placeholder: searchPlaceholder !== null && searchPlaceholder !== void 0 ? searchPlaceholder : t('searchPlaceholder', 'Cari ...')
+                        }, void 0)
+                      }), void 0), item.length > 0 || isLoading ? jsxRuntime.jsx(ConditionalWrapper, __assign({
+                        condition: !!fetchData && item.length > 0,
+                        wrapper: function (children) {
+                          return jsxRuntime.jsx(InfiniteScroll__default["default"], __assign({
+                            loadMore: function (_) {
+                              if (!isLoading && fetchData) fetchData({
+                                query: query
+                              });
+                            },
+                            hasMore: true,
+                            threshold: 5,
+                            useWindow: false
+                          }, {
+                            children: children
+                          }), void 0);
+                        }
+                      }, {
+                        children: jsxRuntime.jsx(PopoverClose, __assign({
+                          css: {
+                            display: 'block !important'
+                          }
+                        }, {
+                          children: jsxRuntime.jsx(SelectOption, {
+                            children: item.map(function (item, index) {
+                              var _a;
+                              return /*#__PURE__*/React.createElement(SelectItem, __assign({}, getItemProps({
+                                item: 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) : jsxRuntime.jsx(SelectOption, {
+                        children: jsxRuntime.jsxs(StyledDiv$2, {
+                          children: [jsxRuntime.jsx("div", __assign({
+                            style: {
+                              marginRight: '6px'
+                            }
+                          }, {
+                            children: jsxRuntime.jsx(icons.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);
@@ -9441,7 +9645,7 @@
     }
   });
 
-  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__namespace.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
     xmlSpace: "preserve",
@@ -9458,7 +9662,7 @@
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$y,
+      fileName: _jsxFileName$x,
       lineNumber: 4,
       columnNumber: 3
     }
@@ -9470,7 +9674,7 @@
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$y,
+      fileName: _jsxFileName$x,
       lineNumber: 19,
       columnNumber: 5
     }
@@ -9482,14 +9686,14 @@
     },
     __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',
@@ -9746,7 +9950,7 @@
         labelCounter,
         collapsible
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
     const {
       t
     } = reactI18next.useTranslation(['MajooUI/inputSelectCheck', 'translation']);
@@ -9976,7 +10180,7 @@
     }, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$x,
+        fileName: _jsxFileName$w,
         lineNumber: 523,
         columnNumber: 7
       }
@@ -9986,7 +10190,7 @@
       isInvalid: isInvalid,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$x,
+        fileName: _jsxFileName$w,
         lineNumber: 524,
         columnNumber: 9
       }
@@ -10001,7 +10205,7 @@
       disabled: disabled || readOnly,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$x,
+        fileName: _jsxFileName$w,
         lineNumber: 525,
         columnNumber: 11
       }
@@ -10017,7 +10221,7 @@
       hiddden: !search,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$x,
+        fileName: _jsxFileName$w,
         lineNumber: 535,
         columnNumber: 13
       }
@@ -10030,7 +10234,7 @@
       hiddden: search,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$x,
+        fileName: _jsxFileName$w,
         lineNumber: 541,
         columnNumber: 13
       }
@@ -10041,7 +10245,7 @@
       readOnly: readOnly,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$x,
+        fileName: _jsxFileName$w,
         lineNumber: 551,
         columnNumber: 11
       }
@@ -10049,7 +10253,7 @@
       color: disabled || readOnly ? colors$4.iconDisable : colors$4.iconPrimary,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$x,
+        fileName: _jsxFileName$w,
         lineNumber: 556,
         columnNumber: 13
       }
@@ -10062,7 +10266,7 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$x,
+        fileName: _jsxFileName$w,
         lineNumber: 560,
         columnNumber: 11
       }
@@ -10070,7 +10274,7 @@
       disabled: disabled,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$x,
+        fileName: _jsxFileName$w,
         lineNumber: 566,
         columnNumber: 13
       }
@@ -10100,7 +10304,7 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$x,
+        fileName: _jsxFileName$w,
         lineNumber: 577,
         columnNumber: 19
       }
@@ -10110,14 +10314,14 @@
       onClick: toggleCollapsible,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$x,
+        fileName: _jsxFileName$w,
         lineNumber: 598,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default["default"].createElement(Separator$2, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$x,
+        fileName: _jsxFileName$w,
         lineNumber: 599,
         columnNumber: 17
       }
@@ -10131,7 +10335,7 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$x,
+        fileName: _jsxFileName$w,
         lineNumber: 600,
         columnNumber: 17
       }
@@ -10139,7 +10343,7 @@
       color: colors$4.iconSecondary,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$x,
+        fileName: _jsxFileName$w,
         lineNumber: 606,
         columnNumber: 21
       }
@@ -10147,7 +10351,7 @@
       color: colors$4.iconSecondary,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$x,
+        fileName: _jsxFileName$w,
         lineNumber: 608,
         columnNumber: 21
       }
@@ -10159,14 +10363,14 @@
       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["default"].createElement(Separator$2, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$x,
+        fileName: _jsxFileName$w,
         lineNumber: 614,
         columnNumber: 17
       }
@@ -10174,7 +10378,7 @@
       disabled: disabled,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$x,
+        fileName: _jsxFileName$w,
         lineNumber: 620,
         columnNumber: 11
       }
@@ -10202,7 +10406,7 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$x,
+        fileName: _jsxFileName$w,
         lineNumber: 621,
         columnNumber: 13
       }
@@ -10214,7 +10418,7 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$x,
+        fileName: _jsxFileName$w,
         lineNumber: 641,
         columnNumber: 9
       }
@@ -10223,7 +10427,7 @@
     }), {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$x,
+        fileName: _jsxFileName$w,
         lineNumber: 646,
         columnNumber: 13
       }
@@ -10241,7 +10445,7 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$x,
+        fileName: _jsxFileName$w,
         lineNumber: 649,
         columnNumber: 19
       }
@@ -10254,7 +10458,7 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$x,
+        fileName: _jsxFileName$w,
         lineNumber: 662,
         columnNumber: 21
       }
@@ -10262,7 +10466,7 @@
       color: colors$4.iconDisable,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$x,
+        fileName: _jsxFileName$w,
         lineNumber: 671,
         columnNumber: 25
       }
@@ -10270,21 +10474,21 @@
       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["default"].createElement(IndeterminateFilled, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$x,
+        fileName: _jsxFileName$w,
         lineNumber: 682,
         columnNumber: 25
       }
     }, "-") : /*#__PURE__*/React__default["default"].createElement("div", {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$x,
+        fileName: _jsxFileName$w,
         lineNumber: 684,
         columnNumber: 25
       }
@@ -10294,7 +10498,7 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$x,
+        fileName: _jsxFileName$w,
         lineNumber: 687,
         columnNumber: 21
       }
@@ -10307,14 +10511,14 @@
     }), {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$x,
+        fileName: _jsxFileName$w,
         lineNumber: 692,
         columnNumber: 13
       }
     }), /*#__PURE__*/React__default["default"].createElement(StyledDiv$1, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$x,
+        fileName: _jsxFileName$w,
         lineNumber: 693,
         columnNumber: 15
       }
@@ -10324,7 +10528,7 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$x,
+        fileName: _jsxFileName$w,
         lineNumber: 694,
         columnNumber: 17
       }
@@ -10336,7 +10540,7 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$x,
+        fileName: _jsxFileName$w,
         lineNumber: 695,
         columnNumber: 19
       }
@@ -10383,7 +10587,7 @@
     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__namespace.forwardRef((props, ref) => {
     return /*#__PURE__*/React__namespace.createElement(InputSelectCheck, _extends({
       ref: ref,
@@ -10391,7 +10595,7 @@
     }, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$w,
+        fileName: _jsxFileName$v,
         lineNumber: 6,
         columnNumber: 10
       }
@@ -10433,7 +10637,7 @@
     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',
@@ -10606,7 +10810,7 @@
     return /*#__PURE__*/React__default["default"].createElement(Wrapper, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$v,
+        fileName: _jsxFileName$u,
         lineNumber: 169,
         columnNumber: 5
       }
@@ -10616,7 +10820,7 @@
       disabled: disabled || readOnly,
       __self: this,
       __source: {
-        fileName: _jsxFileName$v,
+        fileName: _jsxFileName$u,
         lineNumber: 170,
         columnNumber: 7
       }
@@ -10630,7 +10834,7 @@
       onChange: event => handleInputValue(event.target.value),
       __self: this,
       __source: {
-        fileName: _jsxFileName$v,
+        fileName: _jsxFileName$u,
         lineNumber: 171,
         columnNumber: 9
       }
@@ -10640,14 +10844,14 @@
       },
       __self: this,
       __source: {
-        fileName: _jsxFileName$v,
+        fileName: _jsxFileName$u,
         lineNumber: 181,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default["default"].createElement(ItemWrapper, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$v,
+        fileName: _jsxFileName$u,
         lineNumber: 182,
         columnNumber: 9
       }
@@ -10655,7 +10859,7 @@
       color: colors$4.iconGreen,
       __self: this,
       __source: {
-        fileName: _jsxFileName$v,
+        fileName: _jsxFileName$u,
         lineNumber: 183,
         columnNumber: 11
       }
@@ -10666,7 +10870,7 @@
       },
       __self: this,
       __source: {
-        fileName: _jsxFileName$v,
+        fileName: _jsxFileName$u,
         lineNumber: 184,
         columnNumber: 11
       }
@@ -11064,7 +11268,18 @@
     var _g = React.useState(items),
       inputItems = _g[0],
       setInputItems = _g[1];
-    var _h = Downshift.useCombobox({
+    var _h = React.useState(false),
+      openOptions = _h[0],
+      setOpenOptions = _h[1];
+    var selectBoxRef = React.useRef(null);
+    var _j = React.useState(0),
+      optionsWidth = _j[0],
+      setOptionsWidth = _j[1];
+    React.useLayoutEffect(function () {
+      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]);
+    var _k = Downshift.useCombobox({
         items: inputItems,
         defaultInputValue: defaultValue,
         onInputValueChange: function (_a) {
@@ -11076,51 +11291,70 @@
           }));
         }
       }),
-      isOpen = _h.isOpen,
-      getMenuProps = _h.getMenuProps,
-      getInputProps = _h.getInputProps,
-      getComboboxProps = _h.getComboboxProps,
-      highlightedIndex = _h.highlightedIndex,
-      getItemProps = _h.getItemProps;
-    return jsxRuntime.jsxs(SelectContainer, __assign({
-      css: css
+      isOpen = _k.isOpen,
+      getMenuProps = _k.getMenuProps,
+      getInputProps = _k.getInputProps,
+      getComboboxProps = _k.getComboboxProps,
+      highlightedIndex = _k.highlightedIndex,
+      getItemProps = _k.getItemProps;
+    return jsxRuntime.jsx(Popover, __assign({
+      open: openOptions || isOpen,
+      onOpenChange: setOpenOptions,
+      placement: placement,
+      hideOnScroll: true
     }, {
-      children: [jsxRuntime.jsx(SelectBox, __assign({}, getComboboxProps(), {
-        size: size,
-        disabled: disabled,
-        isInvalid: isInvalid
-      }, {
-        children: jsxRuntime.jsx(SelectInputSearch, __assign({
-          showLeadingIcon: showLeadingIcon,
-          disabled: disabled,
-          placeholder: placeholder,
-          inputProps: getInputProps({}, {
-            suppressRefError: true
-          })
-        }, props, {
-          ref: forwardedRef
-        }), void 0)
-      }), void 0), inputItems.length > 0 && jsxRuntime.jsx(OptionWrapper$2, __assign({}, getMenuProps(), {
-        css: {
-          display: isOpen ? 'block' : 'none'
-        },
-        placement: placement
+      children: jsxRuntime.jsxs(SelectContainer, __assign({
+        css: css,
+        ref: selectBoxRef
       }, {
-        children: jsxRuntime.jsx(SelectOption, {
-          children: inputItems.map(function (item, index) {
-            return /*#__PURE__*/React.createElement(SelectItem, __assign({}, getItemProps({
-              item: item,
-              index: index
-            }), {
-              key: "".concat(item).concat(index),
+        children: [jsxRuntime.jsx(PopoverTrigger, {
+          children: jsxRuntime.jsx(SelectBox, __assign({}, getComboboxProps(), {
+            size: size,
+            disabled: disabled,
+            isInvalid: isInvalid
+          }, {
+            children: jsxRuntime.jsx(SelectInputSearch, __assign({
+              showLeadingIcon: showLeadingIcon,
+              disabled: disabled,
+              placeholder: placeholder,
+              inputProps: getInputProps({}, {
+                suppressRefError: true
+              })
+            }, props, {
+              ref: forwardedRef
+            }), void 0)
+          }), void 0)
+        }, void 0), jsxRuntime.jsx(helpers.Portal, {
+          children: jsxRuntime.jsx(PopoverContent, __assign({
+            style: {
+              width: optionsWidth
+            }
+          }, {
+            children: inputItems.length > 0 && jsxRuntime.jsx(OptionWrapper$2, __assign({}, getMenuProps(), {
               css: {
-                backgroundColor: highlightedIndex === index ? '$bgGray' : 'white',
-                fontWeight: 'normal'
-              }
-            }), item);
-          })
-        }, void 0)
-      }), void 0)]
+                display: isOpen ? 'block' : 'none',
+                pointerEvents: 'auto'
+              },
+              placement: placement
+            }, {
+              children: jsxRuntime.jsx(SelectOption, {
+                children: inputItems.map(function (item, index) {
+                  return /*#__PURE__*/React.createElement(SelectItem, __assign({}, getItemProps({
+                    item: item,
+                    index: index
+                  }), {
+                    key: "".concat(item).concat(index),
+                    css: {
+                      backgroundColor: highlightedIndex === index ? '$bgGray' : 'white',
+                      fontWeight: 'normal'
+                    }
+                  }), item);
+                })
+              }, void 0)
+            }), void 0)
+          }), void 0)
+        }, void 0)]
+      }), void 0)
     }), void 0);
   });
 
@@ -11438,140 +11672,6 @@
     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
-  } = core.foundations;
-  const PopoverContext = /*#__PURE__*/React.createContext();
-  const Popover = ({
-    children,
-    open: _open = false,
-    onOpenChange,
-    placement,
-    sideOffset: _sideOffset = 5
-  }) => {
-    const [openState, setOpenState] = React.useState(false);
-    React.useEffect(() => {
-      setOpenState(_open);
-    }, [_open]);
-    React.useEffect(() => {
-      if (onOpenChange) onOpenChange(openState);
-    }, [openState, onOpenChange]);
-    const floatingHook = reactDomInteractions.useFloating({
-      open: openState,
-      onOpenChange: setOpenState,
-      middleware: [reactDomInteractions.offset(_sideOffset), reactDomInteractions.flip(), reactDomInteractions.shift()],
-      placement
-    });
-    const {
-      getReferenceProps,
-      getFloatingProps
-    } = reactDomInteractions.useInteractions([reactDomInteractions.useClick(floatingHook.context), reactDomInteractions.useDismiss(floatingHook.context)]);
-    const value = {
-      openState,
-      setOpenState,
-      floatingHook,
-      getReferenceProps,
-      getFloatingProps
-    };
-    return /*#__PURE__*/React__default["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
-    } = React.useContext(PopoverContext);
-    return disabled ? children : /*#__PURE__*/React.cloneElement(children, getReferenceProps(Object.assign({
-      ref: reference
-    }, children.props)));
-  };
-  const PopoverContent = ({
-    children,
-    isMobile,
-    style
-  }) => {
-    const {
-      openState,
-      floatingHook: {
-        x,
-        y,
-        floating,
-        strategy,
-        context
-      },
-      getFloatingProps
-    } = React.useContext(PopoverContext);
-    return openState ? /*#__PURE__*/React__default["default"].createElement(reactDomInteractions.FloatingFocusManager, {
-      context: context,
-      modal: false,
-      order: ['reference', 'content'],
-      returnFocus: false,
-      __self: undefined,
-      __source: {
-        fileName: _jsxFileName$u,
-        lineNumber: 62,
-        columnNumber: 5
-      }
-    }, /*#__PURE__*/React__default["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["default"].createElement(React__default["default"].Fragment, null);
-  };
-  const PopoverClose = _ref => {
-    let {
-        children
-      } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
-    const {
-      setOpenState
-    } = React.useContext(PopoverContext);
-    return /*#__PURE__*/React__default["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__default["default"].bool,
-    onOpenChange: PropTypes__default["default"].func,
-    placement: PropTypes__default["default"].oneOf(['top', 'top-start', 'top-end', 'right', 'right-start', 'right-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end']),
-    sideOffset: PropTypes__default["default"].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 = react.styled(SliderPrimitive__namespace.Root, {