@majoo-ui/react 1.55.26 → 1.55.27

package/components/modalDialog/ModalDialog.d.ts

@@ -387,7 +387,7 @@ export declare const ModalDialogTrigger: import("@stitches/react/types/styled-co
     };
 }>>;
 declare type IDialog = React.ComponentProps<typeof Dialog>;
-interface ModalDialogProps extends Omit<IDialog, "children">, DialogContentProps {
+interface ModalDialogProps extends Omit<IDialog, 'children'>, DialogContentProps {
     /** set PageDialog zIndex, default is set to 1400 */
     layer?: number | string;
     /** Force to mobile view or desktop view, if undefined ModalDialog will be responsive according to current screen size */

package/index.esm.js

@@ -8473,7 +8473,7 @@ fixRegExpWellKnownSymbolLogic$1('search', function (SEARCH, nativeSearch, maybeC
   ];
 });
 
-const StyledOverlay$2 = styled(DialogPrimitive.Overlay, {
+const StyledOverlay$3 = styled(DialogPrimitive.Overlay, {
   backgroundColor: '$bgDimmer',
   position: 'fixed',
   inset: 0
@@ -8563,7 +8563,7 @@ const DialogContent = Content$2;
 const DialogTitle = StyledTitle$1;
 const DialogDescription = StyledDescription$2;
 const DialogClose = DialogPrimitive.Close;
-const DialogOverlay = StyledOverlay$2;
+const DialogOverlay = StyledOverlay$3;
 const DialogPortal = DialogPrimitive.Portal;
 DialogTrigger.displayName = 'DialogTrigger';
 DialogContent.displayName = 'DialogContent';
@@ -9704,7 +9704,7 @@ const CheckOutline = props => /*#__PURE__*/React.createElement("svg", _extends({
   }
 }));
 
-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"];
+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", "toggleInput"];
 var _jsxFileName$w = "/Users/apple/Documents/project/majoo/majoo-ui/packages/react/src/components/form/components/InputSelectCheck/InputSelectCheck.js";
 const Wrapper$1 = styled('div', {
   margin: 0,
@@ -9960,7 +9960,8 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       css,
       showCounter,
       labelCounter,
-      collapsible
+      collapsible,
+      toggleInput
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
   const {
@@ -10193,7 +10194,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 523,
+      lineNumber: 524,
       columnNumber: 7
     }
   }), /*#__PURE__*/React__default.createElement(Select, {
@@ -10203,7 +10204,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 524,
+      lineNumber: 525,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(InputWrapper$1, _extends({}, getComboboxProps(getDropdownProps({
@@ -10218,7 +10219,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 525,
+      lineNumber: 526,
       columnNumber: 11
     }
   }), /*#__PURE__*/React__default.createElement(Input$6, _extends({}, getInputProps({
@@ -10227,6 +10228,8 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     ref
   }, {
     suppressRefError: true
+  }), toggleInput && getToggleButtonProps({
+    disabled: disabled || readOnly
   }), {
     placeholder: placeholder != null ? placeholder : t('placeholder', 'Pilih Item'),
     disabled: disabled || readOnly,
@@ -10234,7 +10237,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 535,
+      lineNumber: 536,
       columnNumber: 13
     }
   })), /*#__PURE__*/React__default.createElement(Button$2, _extends({}, getToggleButtonProps({
@@ -10247,7 +10250,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 541,
+      lineNumber: 543,
       columnNumber: 13
     }
   }), placeholder != null ? placeholder : t('placeholder', 'Pilih Item'))), /*#__PURE__*/React__default.createElement(IconWrapper, _extends({}, getToggleButtonProps({
@@ -10258,7 +10261,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 551,
+      lineNumber: 553,
       columnNumber: 11
     }
   }), /*#__PURE__*/React__default.createElement(IconCaretDown, {
@@ -10266,7 +10269,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 556,
+      lineNumber: 558,
       columnNumber: 13
     }
   }))), helperText && /*#__PURE__*/React__default.createElement(Paragraph, {
@@ -10279,7 +10282,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 560,
+      lineNumber: 562,
       columnNumber: 11
     }
   }, helperText), showSelectedTag && !showCounter && selectedItems.length !== 0 && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TagWrapper$1, {
@@ -10287,7 +10290,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 566,
+      lineNumber: 568,
       columnNumber: 13
     }
   }, selectedItems === null || selectedItems === void 0 ? void 0 : (_selectedItems$filter = selectedItems.filter(item => (item === null || item === void 0 ? void 0 : item.id) !== '!all')) === null || _selectedItems$filter === void 0 ? void 0 : (_selectedItems$filter2 = _selectedItems$filter.filter((_, idx) => {
@@ -10317,7 +10320,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 577,
+      lineNumber: 579,
       columnNumber: 19
     }
   }), selectedItem.name))), collapsible && (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) > 5 && /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -10327,14 +10330,14 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 598,
+      lineNumber: 600,
       columnNumber: 15
     }
   }, /*#__PURE__*/React__default.createElement(Separator$2, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 599,
+      lineNumber: 601,
       columnNumber: 17
     }
   }), /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -10348,7 +10351,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 600,
+      lineNumber: 602,
       columnNumber: 17
     }
   }, showAllTags ? /*#__PURE__*/React__default.createElement(ChevronUpOutline, {
@@ -10356,7 +10359,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 606,
+      lineNumber: 608,
       columnNumber: 21
     }
   }) : /*#__PURE__*/React__default.createElement(ChevronDownOutline, {
@@ -10364,7 +10367,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 608,
+      lineNumber: 610,
       columnNumber: 21
     }
   }), /*#__PURE__*/React__default.createElement(Paragraph, {
@@ -10376,14 +10379,14 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 610,
+      lineNumber: 612,
       columnNumber: 19
     }
   }, showAllTags ? t('showSomeText', 'Tampilkan Sebagian') : t('showAllText', 'Tampilkan Semua'))), /*#__PURE__*/React__default.createElement(Separator$2, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 614,
+      lineNumber: 616,
       columnNumber: 17
     }
   }))), showSelectedTag && showCounter && Boolean(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) && /*#__PURE__*/React__default.createElement(TagWrapper$1, {
@@ -10391,7 +10394,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 620,
+      lineNumber: 622,
       columnNumber: 11
     }
   }, /*#__PURE__*/React__default.createElement(Tag, {
@@ -10419,7 +10422,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 621,
+      lineNumber: 623,
       columnNumber: 13
     }
   }, `${selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length} ${labelCounter != null ? labelCounter : t('labelCounterText', 'Item terpilih')}`)), /*#__PURE__*/React__default.createElement(OptionWrapper$1, {
@@ -10431,7 +10434,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 641,
+      lineNumber: 643,
       columnNumber: 9
     }
   }, items.length !== 0 ? /*#__PURE__*/React__default.createElement(Option, _extends({}, getMenuProps({}, {
@@ -10440,7 +10443,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 646,
+      lineNumber: 648,
       columnNumber: 13
     }
   }), isOpen && items.map((item, index) => /*#__PURE__*/React__default.createElement(ItemWrapper$1, _extends({
@@ -10458,7 +10461,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 649,
+      lineNumber: 651,
       columnNumber: 19
     }
   }), /*#__PURE__*/React__default.createElement(IconWrapper, {
@@ -10471,7 +10474,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 662,
+      lineNumber: 664,
       columnNumber: 21
     }
   }, item.isDisabled ? /*#__PURE__*/React__default.createElement(CheckOutline, {
@@ -10479,7 +10482,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 671,
+      lineNumber: 673,
       columnNumber: 25
     }
   }) : selectedValue.includes(item.id) && (item.isDisabled === false || item.isDisabled === undefined) && /*#__PURE__*/React__default.createElement(CheckOutline, {
@@ -10487,21 +10490,21 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 675,
+      lineNumber: 677,
       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$w,
-      lineNumber: 682,
+      lineNumber: 684,
       columnNumber: 25
     }
   }, "-") : /*#__PURE__*/React__default.createElement("div", {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 684,
+      lineNumber: 686,
       columnNumber: 25
     }
   })), /*#__PURE__*/React__default.createElement(Item$3, {
@@ -10511,7 +10514,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 687,
+      lineNumber: 689,
       columnNumber: 21
     }
   }, item.name)))) : /*#__PURE__*/React__default.createElement(Option, _extends({
@@ -10524,14 +10527,14 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 692,
+      lineNumber: 694,
       columnNumber: 13
     }
   }), /*#__PURE__*/React__default.createElement(StyledDiv, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 693,
+      lineNumber: 695,
       columnNumber: 15
     }
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -10541,7 +10544,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 694,
+      lineNumber: 696,
       columnNumber: 17
     }
   }, /*#__PURE__*/React__default.createElement(CircleInfoOutline, {
@@ -10553,7 +10556,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 695,
+      lineNumber: 697,
       columnNumber: 19
     }
   })), textEmptyItem != null ? textEmptyItem : t('emptyItemText', 'Item tidak ditemukan')))));
@@ -10581,7 +10584,8 @@ InputSelectCheck.propTypes = {
   helperText: PropTypes.string,
   showCounter: PropTypes.bool,
   labelCounter: PropTypes.string,
-  collapsible: PropTypes.bool
+  collapsible: PropTypes.bool,
+  toggleInput: PropTypes.bool
 };
 InputSelectCheck.defaultProps = {
   size: 'lg',
@@ -10596,7 +10600,8 @@ InputSelectCheck.defaultProps = {
   sortBy: 'name',
   showSelectAll: false,
   showCounter: false,
-  collapsible: true
+  collapsible: true,
+  toggleInput: true
 };
 
 var _jsxFileName$v = "/Users/apple/Documents/project/majoo/majoo-ui/packages/react/src/components/form/components/InputSelectTag/InputSelectTag.js";
@@ -10632,7 +10637,8 @@ InputSelectTag.propTypes = {
   helperText: PropTypes.string,
   showCounter: PropTypes.bool,
   labelCounter: PropTypes.string,
-  collapsible: PropTypes.bool
+  collapsible: PropTypes.bool,
+  toggleInput: PropTypes.bool
 };
 InputSelectTag.defaultProps = {
   size: 'lg',
@@ -10646,7 +10652,8 @@ InputSelectTag.defaultProps = {
   unremovableTags: [],
   sortBy: 'name',
   showCounter: false,
-  collapsible: true
+  collapsible: true,
+  toggleInput: true
 };
 
 var _jsxFileName$u = "/Users/apple/Documents/project/majoo/majoo-ui/packages/react/src/components/form/components/InputCreatable/InputCreatable.js";
@@ -14268,6 +14275,11 @@ const StyledContent$3 = styled(DialogContent, {
     }
   }
 });
+const StyledOverlay$2 = styled(Box, {
+  backgroundColor: '$bgDimmer',
+  position: 'fixed',
+  inset: 0
+});
 const findNodeChild$1 = (array, displayName) => {
   const result = array.find(child => {
     if ( /*#__PURE__*/React__default.isValidElement(child)) {
@@ -14331,7 +14343,7 @@ const ModalDialog = props => {
   }, []);
   return jsxs(Dialog, Object.assign({}, rest, {
     children: [modalDialogTrigger && jsx(DialogTrigger, Object.assign({}, modalDialogTrigger.props), void 0), jsxs(DialogPortal, {
-      children: [jsx(DialogOverlay, {
+      children: [jsx(StyledOverlay$2, {
         css: {
           zIndex: layer
         }
@@ -16542,7 +16554,6 @@ function InputTimePicker({
   isInvalid
 }) {
   const [openPicker, setOpenPicker] = useState(false);
-  const isMobile = useMediaQuery(`(max-width: 480px)`);
   function handleChange() {
     if (!disabled && !readOnly) {
       setOpenPicker(!openPicker);
@@ -16557,7 +16568,7 @@ function InputTimePicker({
     __self: this,
     __source: {
       fileName: _jsxFileName$l,
-      lineNumber: 43,
+      lineNumber: 39,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(InputLeftElement, {
@@ -16566,14 +16577,14 @@ function InputTimePicker({
       __self: this,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 44,
+        lineNumber: 40,
         columnNumber: 35
       }
     }),
     __self: this,
     __source: {
       fileName: _jsxFileName$l,
-      lineNumber: 44,
+      lineNumber: 40,
       columnNumber: 7
     }
   }), /*#__PURE__*/React__default.createElement(InputText, {
@@ -16588,7 +16599,7 @@ function InputTimePicker({
     __self: this,
     __source: {
       fileName: _jsxFileName$l,
-      lineNumber: 45,
+      lineNumber: 41,
       columnNumber: 7
     }
   }));
@@ -16603,18 +16614,18 @@ function InputTimePicker({
     __self: this,
     __source: {
       fileName: _jsxFileName$l,
-      lineNumber: 58,
+      lineNumber: 54,
       columnNumber: 5
     }
   });
-  return !isMobile ? /*#__PURE__*/React__default.createElement(Popover, {
+  return /*#__PURE__*/React__default.createElement(Popover, {
     open: openPicker,
     onOpenChange: setOpenPicker,
     placement: placement,
     __self: this,
     __source: {
       fileName: _jsxFileName$l,
-      lineNumber: 70,
+      lineNumber: 66,
       columnNumber: 5
     }
   }, disabled || readOnly ? /*#__PURE__*/React__default.createElement(Box, {
@@ -16622,14 +16633,14 @@ function InputTimePicker({
     __self: this,
     __source: {
       fileName: _jsxFileName$l,
-      lineNumber: 72,
+      lineNumber: 68,
       columnNumber: 9
     }
   }, renderInputGroup()) : /*#__PURE__*/React__default.createElement(PopoverTrigger, {
     __self: this,
     __source: {
       fileName: _jsxFileName$l,
-      lineNumber: 74,
+      lineNumber: 70,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(Box, {
@@ -16637,58 +16648,17 @@ function InputTimePicker({
     __self: this,
     __source: {
       fileName: _jsxFileName$l,
-      lineNumber: 75,
+      lineNumber: 71,
       columnNumber: 11
     }
   }, renderInputGroup())), /*#__PURE__*/React__default.createElement(PopoverContent, {
     __self: this,
     __source: {
       fileName: _jsxFileName$l,
-      lineNumber: 78,
-      columnNumber: 7
-    }
-  }, renderTimePicker())) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Box, {
-    css: css,
-    __self: this,
-    __source: {
-      fileName: _jsxFileName$l,
-      lineNumber: 82,
-      columnNumber: 7
-    }
-  }, renderInputGroup()), /*#__PURE__*/React__default.createElement(Drawer, {
-    open: openPicker,
-    onOpenChange: handleChange,
-    side: "bottom",
-    __self: this,
-    __source: {
-      fileName: _jsxFileName$l,
-      lineNumber: 83,
+      lineNumber: 74,
       columnNumber: 7
     }
-  }, /*#__PURE__*/React__default.createElement(DrawerContent, {
-    css: {
-      position: 'fixed',
-      left: 0
-    },
-    __self: this,
-    __source: {
-      fileName: _jsxFileName$l,
-      lineNumber: 84,
-      columnNumber: 9
-    }
-  }, /*#__PURE__*/React__default.createElement(Flex$1, {
-    justify: "center",
-    align: "center",
-    css: {
-      padding: '20px 0px'
-    },
-    __self: this,
-    __source: {
-      fileName: _jsxFileName$l,
-      lineNumber: 90,
-      columnNumber: 11
-    }
-  }, renderTimePicker()))));
+  }, renderTimePicker()));
 }
 InputTimePicker.defaultProps = {
   placement: 'bottom-start',
@@ -23057,7 +23027,7 @@ function canvasPreview(image, canvas, crop, scale = 1, rotate = 0, ratio) {
     if (ratio === 1) {
       scaleY = scaleX;
     }
-    const pixelRatio = window.devicePixelRatio;
+    const pixelRatio = 1;
     canvas.width = Math.floor(crop.width * scaleX * pixelRatio);
     canvas.height = Math.floor(crop.height * scaleY * pixelRatio);
     ctx.scale(pixelRatio, pixelRatio);

package/index.umd.js

@@ -8549,7 +8549,7 @@
     ];
   });
 
-  var StyledOverlay$2 = styled(DialogPrimitive__namespace.Overlay, {
+  var StyledOverlay$3 = styled(DialogPrimitive__namespace.Overlay, {
     backgroundColor: '$bgDimmer',
     position: 'fixed',
     inset: 0
@@ -8637,7 +8637,7 @@
   var DialogTitle = StyledTitle$1;
   var DialogDescription = StyledDescription$2;
   var DialogClose = DialogPrimitive__namespace.Close;
-  var DialogOverlay = StyledOverlay$2;
+  var DialogOverlay = StyledOverlay$3;
   var DialogPortal = DialogPrimitive__namespace.Portal;
   DialogTrigger.displayName = 'DialogTrigger';
   DialogContent.displayName = 'DialogContent';
@@ -9822,7 +9822,7 @@
     }
   }));
 
-  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"];
+  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", "toggleInput"];
   var _jsxFileName$w = "/Users/apple/Documents/project/majoo/majoo-ui/packages/react/src/components/form/components/InputSelectCheck/InputSelectCheck.js";
   const Wrapper$1 = styled('div', {
     margin: 0,
@@ -10078,7 +10078,8 @@
         css,
         showCounter,
         labelCounter,
-        collapsible
+        collapsible,
+        toggleInput
       } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
     const {
@@ -10311,7 +10312,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 523,
+        lineNumber: 524,
         columnNumber: 7
       }
     }), /*#__PURE__*/React__default["default"].createElement(Select, {
@@ -10321,7 +10322,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 524,
+        lineNumber: 525,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(InputWrapper$1, _extends({}, getComboboxProps(getDropdownProps({
@@ -10336,7 +10337,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 525,
+        lineNumber: 526,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default["default"].createElement(Input$6, _extends({}, getInputProps({
@@ -10345,6 +10346,8 @@
       ref
     }, {
       suppressRefError: true
+    }), toggleInput && getToggleButtonProps({
+      disabled: disabled || readOnly
     }), {
       placeholder: placeholder != null ? placeholder : t('placeholder', 'Pilih Item'),
       disabled: disabled || readOnly,
@@ -10352,7 +10355,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 535,
+        lineNumber: 536,
         columnNumber: 13
       }
     })), /*#__PURE__*/React__default["default"].createElement(Button$2, _extends({}, getToggleButtonProps({
@@ -10365,7 +10368,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 541,
+        lineNumber: 543,
         columnNumber: 13
       }
     }), placeholder != null ? placeholder : t('placeholder', 'Pilih Item'))), /*#__PURE__*/React__default["default"].createElement(IconWrapper, _extends({}, getToggleButtonProps({
@@ -10376,7 +10379,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 551,
+        lineNumber: 553,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default["default"].createElement(IconCaretDown, {
@@ -10384,7 +10387,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 556,
+        lineNumber: 558,
         columnNumber: 13
       }
     }))), helperText && /*#__PURE__*/React__default["default"].createElement(Paragraph, {
@@ -10397,7 +10400,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 560,
+        lineNumber: 562,
         columnNumber: 11
       }
     }, helperText), showSelectedTag && !showCounter && selectedItems.length !== 0 && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(TagWrapper$1, {
@@ -10405,7 +10408,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 566,
+        lineNumber: 568,
         columnNumber: 13
       }
     }, selectedItems === null || selectedItems === void 0 ? void 0 : (_selectedItems$filter = selectedItems.filter(item => (item === null || item === void 0 ? void 0 : item.id) !== '!all')) === null || _selectedItems$filter === void 0 ? void 0 : (_selectedItems$filter2 = _selectedItems$filter.filter((_, idx) => {
@@ -10435,7 +10438,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 577,
+        lineNumber: 579,
         columnNumber: 19
       }
     }), selectedItem.name))), collapsible && (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) > 5 && /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -10445,14 +10448,14 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 598,
+        lineNumber: 600,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default["default"].createElement(Separator$2, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 599,
+        lineNumber: 601,
         columnNumber: 17
       }
     }), /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -10466,7 +10469,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 600,
+        lineNumber: 602,
         columnNumber: 17
       }
     }, showAllTags ? /*#__PURE__*/React__default["default"].createElement(icons.ChevronUpOutline, {
@@ -10474,7 +10477,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 606,
+        lineNumber: 608,
         columnNumber: 21
       }
     }) : /*#__PURE__*/React__default["default"].createElement(icons.ChevronDownOutline, {
@@ -10482,7 +10485,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 608,
+        lineNumber: 610,
         columnNumber: 21
       }
     }), /*#__PURE__*/React__default["default"].createElement(Paragraph, {
@@ -10494,14 +10497,14 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 610,
+        lineNumber: 612,
         columnNumber: 19
       }
     }, showAllTags ? t('showSomeText', 'Tampilkan Sebagian') : t('showAllText', 'Tampilkan Semua'))), /*#__PURE__*/React__default["default"].createElement(Separator$2, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 614,
+        lineNumber: 616,
         columnNumber: 17
       }
     }))), showSelectedTag && showCounter && Boolean(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) && /*#__PURE__*/React__default["default"].createElement(TagWrapper$1, {
@@ -10509,7 +10512,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 620,
+        lineNumber: 622,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default["default"].createElement(Tag, {
@@ -10537,7 +10540,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 621,
+        lineNumber: 623,
         columnNumber: 13
       }
     }, `${selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length} ${labelCounter != null ? labelCounter : t('labelCounterText', 'Item terpilih')}`)), /*#__PURE__*/React__default["default"].createElement(OptionWrapper$1, {
@@ -10549,7 +10552,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 641,
+        lineNumber: 643,
         columnNumber: 9
       }
     }, items.length !== 0 ? /*#__PURE__*/React__default["default"].createElement(Option, _extends({}, getMenuProps({}, {
@@ -10558,7 +10561,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 646,
+        lineNumber: 648,
         columnNumber: 13
       }
     }), isOpen && items.map((item, index) => /*#__PURE__*/React__default["default"].createElement(ItemWrapper$1, _extends({
@@ -10576,7 +10579,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 649,
+        lineNumber: 651,
         columnNumber: 19
       }
     }), /*#__PURE__*/React__default["default"].createElement(IconWrapper, {
@@ -10589,7 +10592,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 662,
+        lineNumber: 664,
         columnNumber: 21
       }
     }, item.isDisabled ? /*#__PURE__*/React__default["default"].createElement(CheckOutline, {
@@ -10597,7 +10600,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 671,
+        lineNumber: 673,
         columnNumber: 25
       }
     }) : selectedValue.includes(item.id) && (item.isDisabled === false || item.isDisabled === undefined) && /*#__PURE__*/React__default["default"].createElement(CheckOutline, {
@@ -10605,21 +10608,21 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 675,
+        lineNumber: 677,
         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$w,
-        lineNumber: 682,
+        lineNumber: 684,
         columnNumber: 25
       }
     }, "-") : /*#__PURE__*/React__default["default"].createElement("div", {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 684,
+        lineNumber: 686,
         columnNumber: 25
       }
     })), /*#__PURE__*/React__default["default"].createElement(Item$3, {
@@ -10629,7 +10632,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 687,
+        lineNumber: 689,
         columnNumber: 21
       }
     }, item.name)))) : /*#__PURE__*/React__default["default"].createElement(Option, _extends({
@@ -10642,14 +10645,14 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 692,
+        lineNumber: 694,
         columnNumber: 13
       }
     }), /*#__PURE__*/React__default["default"].createElement(StyledDiv, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 693,
+        lineNumber: 695,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -10659,7 +10662,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 694,
+        lineNumber: 696,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.CircleInfoOutline, {
@@ -10671,7 +10674,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 695,
+        lineNumber: 697,
         columnNumber: 19
       }
     })), textEmptyItem != null ? textEmptyItem : t('emptyItemText', 'Item tidak ditemukan')))));
@@ -10699,7 +10702,8 @@
     helperText: PropTypes__default["default"].string,
     showCounter: PropTypes__default["default"].bool,
     labelCounter: PropTypes__default["default"].string,
-    collapsible: PropTypes__default["default"].bool
+    collapsible: PropTypes__default["default"].bool,
+    toggleInput: PropTypes__default["default"].bool
   };
   InputSelectCheck.defaultProps = {
     size: 'lg',
@@ -10714,7 +10718,8 @@
     sortBy: 'name',
     showSelectAll: false,
     showCounter: false,
-    collapsible: true
+    collapsible: true,
+    toggleInput: true
   };
 
   var _jsxFileName$v = "/Users/apple/Documents/project/majoo/majoo-ui/packages/react/src/components/form/components/InputSelectTag/InputSelectTag.js";
@@ -10750,7 +10755,8 @@
     helperText: PropTypes__default["default"].string,
     showCounter: PropTypes__default["default"].bool,
     labelCounter: PropTypes__default["default"].string,
-    collapsible: PropTypes__default["default"].bool
+    collapsible: PropTypes__default["default"].bool,
+    toggleInput: PropTypes__default["default"].bool
   };
   InputSelectTag.defaultProps = {
     size: 'lg',
@@ -10764,7 +10770,8 @@
     unremovableTags: [],
     sortBy: 'name',
     showCounter: false,
-    collapsible: true
+    collapsible: true,
+    toggleInput: true
   };
 
   var _jsxFileName$u = "/Users/apple/Documents/project/majoo/majoo-ui/packages/react/src/components/form/components/InputCreatable/InputCreatable.js";
@@ -14415,6 +14422,11 @@
       }
     }
   });
+  var StyledOverlay$2 = styled(Box, {
+    backgroundColor: '$bgDimmer',
+    position: 'fixed',
+    inset: 0
+  });
   var findNodeChild$1 = function findNodeChild(array, displayName) {
     var result = array.find(function (child) {
       if ( /*#__PURE__*/React__default["default"].isValidElement(child)) {
@@ -14476,7 +14488,7 @@
     }, []);
     return jsxRuntime.jsxs(Dialog, __assign({}, rest, {
       children: [modalDialogTrigger && jsxRuntime.jsx(DialogTrigger, __assign({}, modalDialogTrigger.props), void 0), jsxRuntime.jsxs(DialogPortal, {
-        children: [jsxRuntime.jsx(DialogOverlay, {
+        children: [jsxRuntime.jsx(StyledOverlay$2, {
           css: {
             zIndex: layer
           }
@@ -16763,7 +16775,6 @@
     isInvalid
   }) {
     const [openPicker, setOpenPicker] = React.useState(false);
-    const isMobile = useMediaQuery(`(max-width: 480px)`);
     function handleChange() {
       if (!disabled && !readOnly) {
         setOpenPicker(!openPicker);
@@ -16778,7 +16789,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 43,
+        lineNumber: 39,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(InputLeftElement, {
@@ -16787,14 +16798,14 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$l,
-          lineNumber: 44,
+          lineNumber: 40,
           columnNumber: 35
         }
       }),
       __self: this,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 44,
+        lineNumber: 40,
         columnNumber: 7
       }
     }), /*#__PURE__*/React__default["default"].createElement(InputText, {
@@ -16809,7 +16820,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 45,
+        lineNumber: 41,
         columnNumber: 7
       }
     }));
@@ -16824,18 +16835,18 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 58,
+        lineNumber: 54,
         columnNumber: 5
       }
     });
-    return !isMobile ? /*#__PURE__*/React__default["default"].createElement(Popover, {
+    return /*#__PURE__*/React__default["default"].createElement(Popover, {
       open: openPicker,
       onOpenChange: setOpenPicker,
       placement: placement,
       __self: this,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 70,
+        lineNumber: 66,
         columnNumber: 5
       }
     }, disabled || readOnly ? /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -16843,14 +16854,14 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 72,
+        lineNumber: 68,
         columnNumber: 9
       }
     }, renderInputGroup()) : /*#__PURE__*/React__default["default"].createElement(PopoverTrigger, {
       __self: this,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 74,
+        lineNumber: 70,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -16858,58 +16869,17 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 75,
+        lineNumber: 71,
         columnNumber: 11
       }
     }, renderInputGroup())), /*#__PURE__*/React__default["default"].createElement(PopoverContent, {
       __self: this,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 78,
-        columnNumber: 7
-      }
-    }, renderTimePicker())) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Box, {
-      css: css,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$l,
-        lineNumber: 82,
-        columnNumber: 7
-      }
-    }, renderInputGroup()), /*#__PURE__*/React__default["default"].createElement(Drawer, {
-      open: openPicker,
-      onOpenChange: handleChange,
-      side: "bottom",
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$l,
-        lineNumber: 83,
+        lineNumber: 74,
         columnNumber: 7
       }
-    }, /*#__PURE__*/React__default["default"].createElement(DrawerContent, {
-      css: {
-        position: 'fixed',
-        left: 0
-      },
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$l,
-        lineNumber: 84,
-        columnNumber: 9
-      }
-    }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
-      justify: "center",
-      align: "center",
-      css: {
-        padding: '20px 0px'
-      },
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$l,
-        lineNumber: 90,
-        columnNumber: 11
-      }
-    }, renderTimePicker()))));
+    }, renderTimePicker()));
   }
   InputTimePicker.defaultProps = {
     placement: 'bottom-start',
@@ -23395,7 +23365,7 @@
         if (ratio === 1) {
           scaleY = scaleX;
         }
-        pixelRatio = window.devicePixelRatio;
+        pixelRatio = 1;
         canvas.width = Math.floor(crop.width * scaleX * pixelRatio);
         canvas.height = Math.floor(crop.height * scaleY * pixelRatio);
         ctx.scale(pixelRatio, pixelRatio);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@majoo-ui/react",
-  "version": "1.55.26",
+  "version": "1.55.27",
   "dependencies": {
     "@majoo-ui/core": "^1.31.3",
     "@majoo-ui/helpers": "^1.30.5",