@majoo-ui/react 1.50.1 → 1.50.2-rc.1

package/components/datePicker/InputDatePicker.d.ts

@@ -19,6 +19,10 @@ export interface InputDatePickerProps {
      * Specify whether the InputDatePicker should be disabled, or not
      */
     disabled?: boolean;
+    /**
+     * ReadOnly state InputDatePicker
+     */
+    readOnly?: boolean;
     /**
      * Specify an `onChange` handler that is called whenever the InputDatePicker value changes.
      */
@@ -61,4 +65,4 @@ export interface InputDatePickerProps {
     maxDate?: Date;
     css?: CSS;
 }
-export declare function InputDatePicker({ type, placeholder, size, disabled, onChange, defaultValue: defaultDateValue, value: dateValue, defaultDate, date, advanceView, placement, css, showTimePicker, minDate, maxDate, }: InputDatePickerProps): JSX.Element;
+export declare function InputDatePicker({ type, placeholder, size, disabled, onChange, defaultValue: defaultDateValue, value: dateValue, defaultDate, date, advanceView, placement, css, showTimePicker, minDate, maxDate, readOnly, }: InputDatePickerProps): JSX.Element;

package/index.esm.js

@@ -4899,7 +4899,7 @@ const Tooltip$1 = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$P,
-      lineNumber: 89,
+      lineNumber: 90,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(TooltipBase, _extends({}, rest, {
@@ -4907,7 +4907,7 @@ const Tooltip$1 = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$P,
-      lineNumber: 90,
+      lineNumber: 91,
       columnNumber: 7
     }
   }), /*#__PURE__*/React__default.createElement(TooltipTrigger, {
@@ -4915,7 +4915,7 @@ const Tooltip$1 = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$P,
-      lineNumber: 91,
+      lineNumber: 92,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(TriggerSpan, {
@@ -4923,10 +4923,17 @@ const Tooltip$1 = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$P,
-      lineNumber: 92,
+      lineNumber: 93,
       columnNumber: 11
     }
-  }, children)), /*#__PURE__*/React__default.createElement(StyledContent$6, {
+  }, children)), /*#__PURE__*/React__default.createElement(TooltipPrimitive.Portal, {
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$P,
+      lineNumber: 95,
+      columnNumber: 9
+    }
+  }, /*#__PURE__*/React__default.createElement(StyledContent$6, {
     align: align,
     side: side,
     sideOffset: 5,
@@ -4934,8 +4941,8 @@ const Tooltip$1 = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$P,
-      lineNumber: 94,
-      columnNumber: 9
+      lineNumber: 96,
+      columnNumber: 11
     }
   }, label, /*#__PURE__*/React__default.createElement(StyledArrow$1, {
     offset: 10,
@@ -4943,10 +4950,10 @@ const Tooltip$1 = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$P,
-      lineNumber: 101,
-      columnNumber: 11
+      lineNumber: 103,
+      columnNumber: 13
     }
-  }))));
+  })))));
 };
 
 Tooltip$1.propTypes = {
@@ -4965,7 +4972,7 @@ Tooltip$1.defaultProps = {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$P,
-      lineNumber: 121,
+      lineNumber: 124,
       columnNumber: 13
     }
   })
@@ -11240,6 +11247,16 @@ const StyledSeparator$1 = styled(SeparatorPrimitive.Root, {
   },
   '&[data-orientation=vertical]': {
     width: 1
+  },
+  variants: {
+    responsive: {
+      true: {
+        display: 'none',
+        '@md': {
+          display: 'block'
+        }
+      }
+    }
   }
 });
 const Separator$2 = StyledSeparator$1;
@@ -14811,6 +14828,7 @@ const Time = styled('p', {
   fontWeight: 600,
   fontStyle: 'normal',
   fontSize: 28,
+  color: '$textPrimary',
   margin: 0,
   letterSpacing: 2,
   userSelect: 'none',
@@ -14900,7 +14918,7 @@ const IconStateFull$1 = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$k,
-      lineNumber: 100,
+      lineNumber: 101,
       columnNumber: 5
     }
   })) : /*#__PURE__*/React__default.createElement(IconDown, _extends({}, props, {
@@ -14910,7 +14928,7 @@ const IconStateFull$1 = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$k,
-      lineNumber: 107,
+      lineNumber: 108,
       columnNumber: 5
     }
   }));
@@ -14967,7 +14985,7 @@ const NativeTimePicker = ({
 
   return /*#__PURE__*/React__default.createElement(Flex$1, {
     direction: "column",
-    gap: 3,
+    gap: size === 'sm' ? 4 : 5,
     align: "center",
     justify: "center",
     css: {
@@ -14976,7 +14994,7 @@ const NativeTimePicker = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$k,
-      lineNumber: 158,
+      lineNumber: 159,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -14985,7 +15003,7 @@ const NativeTimePicker = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$k,
-      lineNumber: 159,
+      lineNumber: 160,
       columnNumber: 7
     }
   }, /*#__PURE__*/React__default.createElement(IconStateFull$1, {
@@ -14995,7 +15013,7 @@ const NativeTimePicker = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$k,
-      lineNumber: 160,
+      lineNumber: 161,
       columnNumber: 9
     }
   }), /*#__PURE__*/React__default.createElement(IconStateFull$1, {
@@ -15005,7 +15023,7 @@ const NativeTimePicker = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$k,
-      lineNumber: 161,
+      lineNumber: 162,
       columnNumber: 9
     }
   })), /*#__PURE__*/React__default.createElement(Input$3, {
@@ -15016,7 +15034,7 @@ const NativeTimePicker = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$k,
-      lineNumber: 163,
+      lineNumber: 164,
       columnNumber: 7
     }
   }), /*#__PURE__*/React__default.createElement(Time, {
@@ -15024,7 +15042,7 @@ const NativeTimePicker = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$k,
-      lineNumber: 164,
+      lineNumber: 165,
       columnNumber: 7
     }
   }, moment(date).format(format)), /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -15033,7 +15051,7 @@ const NativeTimePicker = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$k,
-      lineNumber: 165,
+      lineNumber: 166,
       columnNumber: 7
     }
   }, /*#__PURE__*/React__default.createElement(IconStateFull$1, {
@@ -15043,7 +15061,7 @@ const NativeTimePicker = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$k,
-      lineNumber: 166,
+      lineNumber: 167,
       columnNumber: 9
     }
   }), /*#__PURE__*/React__default.createElement(IconStateFull$1, {
@@ -15053,7 +15071,7 @@ const NativeTimePicker = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$k,
-      lineNumber: 167,
+      lineNumber: 168,
       columnNumber: 9
     }
   })));
@@ -15103,14 +15121,13 @@ const TimePicker = ({
     size: size,
     disabled: disabled,
     direction: "column",
-    gap: 3,
     justify: "center",
     align: "center",
     css: css,
     __self: undefined,
     __source: {
       fileName: _jsxFileName$k,
-      lineNumber: 202,
+      lineNumber: 203,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(NativeTimePicker, {
@@ -15124,7 +15141,7 @@ const TimePicker = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$k,
-      lineNumber: 203,
+      lineNumber: 204,
       columnNumber: 7
     }
   }));
@@ -15189,6 +15206,7 @@ function InputTimePicker({
   placement,
   css,
   disabled,
+  readOnly,
   minDate,
   maxDate
 }) {
@@ -15205,10 +15223,11 @@ function InputTimePicker({
     size: size,
     disabled: disabled,
     onClick: handleChange,
+    readOnly: readOnly,
     __self: this,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 40,
+      lineNumber: 41,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(InputLeftElement, {
@@ -15216,14 +15235,14 @@ function InputTimePicker({
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 41,
+        lineNumber: 42,
         columnNumber: 35
       }
     }),
     __self: this,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 41,
+      lineNumber: 42,
       columnNumber: 7
     }
   }), /*#__PURE__*/React__default.createElement(InputText, {
@@ -15235,7 +15254,7 @@ function InputTimePicker({
     __self: this,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 42,
+      lineNumber: 43,
       columnNumber: 7
     }
   }));
@@ -15251,7 +15270,7 @@ function InputTimePicker({
     __self: this,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 53,
+      lineNumber: 54,
       columnNumber: 5
     }
   });
@@ -15263,7 +15282,7 @@ function InputTimePicker({
     __self: this,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 65,
+      lineNumber: 66,
       columnNumber: 5
     }
   }, disabled ? /*#__PURE__*/React__default.createElement(Box, {
@@ -15271,14 +15290,14 @@ function InputTimePicker({
     __self: this,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 67,
+      lineNumber: 68,
       columnNumber: 9
     }
   }, renderInputGroup()) : /*#__PURE__*/React__default.createElement(PopoverTrigger, {
     __self: this,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 69,
+      lineNumber: 70,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(Box, {
@@ -15286,14 +15305,14 @@ function InputTimePicker({
     __self: this,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 70,
+      lineNumber: 71,
       columnNumber: 11
     }
   }, renderInputGroup())), /*#__PURE__*/React__default.createElement(PopoverContent, {
     __self: this,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 73,
+      lineNumber: 74,
       columnNumber: 7
     }
   }, renderTimePicker())) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Box, {
@@ -15301,7 +15320,7 @@ function InputTimePicker({
     __self: this,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 77,
+      lineNumber: 78,
       columnNumber: 7
     }
   }, renderInputGroup()), /*#__PURE__*/React__default.createElement(Drawer, {
@@ -15311,7 +15330,7 @@ function InputTimePicker({
     __self: this,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 78,
+      lineNumber: 79,
       columnNumber: 7
     }
   }, /*#__PURE__*/React__default.createElement(DrawerContent, {
@@ -15322,7 +15341,7 @@ function InputTimePicker({
     __self: this,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 79,
+      lineNumber: 80,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -15334,7 +15353,7 @@ function InputTimePicker({
     __self: this,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 85,
+      lineNumber: 86,
       columnNumber: 11
     }
   }, renderTimePicker()))));
@@ -15354,6 +15373,11 @@ InputTimePicker.propTypes = {
   */
   disabled: PropTypes.bool,
 
+  /**
+   ReadOnly state.
+  */
+  readOnly: PropTypes.bool,
+
   /**
    Resize time picker.
   */
@@ -15793,7 +15817,8 @@ function InputDatePicker({
   css,
   showTimePicker,
   minDate,
-  maxDate
+  maxDate,
+  readOnly
 }) {
   const [value, setValue] = useState(date || dateValue);
   const [defaultValue, setDefaultValue] = useState(defaultDate || defaultDateValue);
@@ -15827,6 +15852,7 @@ function InputDatePicker({
 
   const renderInputGroup = () => jsxs(InputGroup, Object.assign({
     disabled: disabled,
+    readOnly: readOnly,
     onClick: handleChange,
     size: size
   }, {
@@ -17104,8 +17130,6 @@ function Table({
 
               if (customRowsStyle && customRowsStyle(row.values).length) {
                 for (let _i = 0; _i < customRowsStyle(row.values).length; _i++) {
-                  console.log(customRowsStyle(row.values)[_i]);
-
                   if (customRowsStyle(row.values)[_i].predicate) {
                     customStyle = customRowsStyle(row.values)[_i].css;
                   }
@@ -19094,6 +19118,7 @@ const StyledContent = styled(DropdownMenuPrimitive.Content, {
   backgroundColor: 'white',
   borderRadius: 4,
   padding: 8,
+  zIndex: '$sticky',
   boxShadow: '0px 10px 38px -10px rgba(22, 23, 24, 0.35), 0px 10px 20px -15px rgba(22, 23, 24, 0.2)',
   '@media (prefers-reduced-motion: no-preference)': {
     animationDuration: '400ms',
@@ -19186,7 +19211,7 @@ const DropdownMenuContext = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$a,
-      lineNumber: 119,
+      lineNumber: 120,
       columnNumber: 5
     }
   }), /*#__PURE__*/React__default.createElement(Context.Provider, {
@@ -19197,7 +19222,7 @@ const DropdownMenuContext = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$a,
-      lineNumber: 120,
+      lineNumber: 121,
       columnNumber: 7
     }
   }, children));
@@ -19227,7 +19252,7 @@ const DropdownMenuContentContext = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$a,
-      lineNumber: 138,
+      lineNumber: 139,
       columnNumber: 5
     }
   }), props.children);
@@ -19254,7 +19279,7 @@ const ButtonDropdown = /*#__PURE__*/React__default.forwardRef((props, ref) => /*
   __self: undefined,
   __source: {
     fileName: _jsxFileName$a,
-    lineNumber: 157,
+    lineNumber: 158,
     columnNumber: 3
   }
 }), props.children, props.rightIcon && props.rightIcon));
@@ -21708,7 +21733,7 @@ const Upload = ({
         lineNumber: 559,
         columnNumber: 9
       }
-    }, replaceLabel && replaceLabel.length > 0 ? replaceLabel : `Ubah ${isFile ? 'Berkas' : 'Gambar'}`));
+    }, replaceLabel && replaceLabel.length > 0 ? replaceLabel : `Ubah Berkas`));
   }
 
   const renderPicture = () => {
@@ -21990,7 +22015,7 @@ const Upload = ({
         lineNumber: 665,
         columnNumber: 11
       }
-    }, `${isFile ? 'Berkas' : 'Gambar'} sedang diunggah`)));
+    }, "Berkas sedang diunggah")));
   }
 
   function renderUpload() {
@@ -22072,7 +22097,7 @@ const Upload = ({
         lineNumber: 692,
         columnNumber: 17
       }
-    }, placeholder !== null && placeholder !== void 0 ? placeholder : `Pilih atau letakkan ${isFile ? 'berkas' : 'gambar'} di sini`)))), error && /*#__PURE__*/React__default.createElement(ErrorMessage, {
+    }, placeholder !== null && placeholder !== void 0 ? placeholder : `Pilih atau letakkan berkas di sini`)))), error && /*#__PURE__*/React__default.createElement(ErrorMessage, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,

package/index.umd.js

@@ -4981,7 +4981,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$P,
-        lineNumber: 89,
+        lineNumber: 90,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(TooltipBase, _extends({}, rest, {
@@ -4989,7 +4989,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$P,
-        lineNumber: 90,
+        lineNumber: 91,
         columnNumber: 7
       }
     }), /*#__PURE__*/React__default["default"].createElement(TooltipTrigger, {
@@ -4997,7 +4997,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$P,
-        lineNumber: 91,
+        lineNumber: 92,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(TriggerSpan, {
@@ -5005,10 +5005,17 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$P,
-        lineNumber: 92,
+        lineNumber: 93,
         columnNumber: 11
       }
-    }, children)), /*#__PURE__*/React__default["default"].createElement(StyledContent$6, {
+    }, children)), /*#__PURE__*/React__default["default"].createElement(TooltipPrimitive__namespace.Portal, {
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$P,
+        lineNumber: 95,
+        columnNumber: 9
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(StyledContent$6, {
       align: align,
       side: side,
       sideOffset: 5,
@@ -5016,8 +5023,8 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$P,
-        lineNumber: 94,
-        columnNumber: 9
+        lineNumber: 96,
+        columnNumber: 11
       }
     }, label, /*#__PURE__*/React__default["default"].createElement(StyledArrow$1, {
       offset: 10,
@@ -5025,10 +5032,10 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$P,
-        lineNumber: 101,
-        columnNumber: 11
+        lineNumber: 103,
+        columnNumber: 13
       }
-    }))));
+    })))));
   };
 
   Tooltip$1.propTypes = {
@@ -5047,7 +5054,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$P,
-        lineNumber: 121,
+        lineNumber: 124,
         columnNumber: 13
       }
     })
@@ -11410,6 +11417,16 @@
     },
     '&[data-orientation=vertical]': {
       width: 1
+    },
+    variants: {
+      responsive: {
+        true: {
+          display: 'none',
+          '@md': {
+            display: 'block'
+          }
+        }
+      }
     }
   });
   const Separator$2 = StyledSeparator$1;
@@ -15057,6 +15074,7 @@
     fontWeight: 600,
     fontStyle: 'normal',
     fontSize: 28,
+    color: '$textPrimary',
     margin: 0,
     letterSpacing: 2,
     userSelect: 'none',
@@ -15146,7 +15164,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 100,
+        lineNumber: 101,
         columnNumber: 5
       }
     })) : /*#__PURE__*/React__default["default"].createElement(IconDown, _extends({}, props, {
@@ -15156,7 +15174,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 107,
+        lineNumber: 108,
         columnNumber: 5
       }
     }));
@@ -15213,7 +15231,7 @@
 
     return /*#__PURE__*/React__default["default"].createElement(Flex$1, {
       direction: "column",
-      gap: 3,
+      gap: size === 'sm' ? 4 : 5,
       align: "center",
       justify: "center",
       css: {
@@ -15222,7 +15240,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 158,
+        lineNumber: 159,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -15231,7 +15249,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 159,
+        lineNumber: 160,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default["default"].createElement(IconStateFull$1, {
@@ -15241,7 +15259,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 160,
+        lineNumber: 161,
         columnNumber: 9
       }
     }), /*#__PURE__*/React__default["default"].createElement(IconStateFull$1, {
@@ -15251,7 +15269,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 161,
+        lineNumber: 162,
         columnNumber: 9
       }
     })), /*#__PURE__*/React__default["default"].createElement(Input$3, {
@@ -15262,7 +15280,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 163,
+        lineNumber: 164,
         columnNumber: 7
       }
     }), /*#__PURE__*/React__default["default"].createElement(Time, {
@@ -15270,7 +15288,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 164,
+        lineNumber: 165,
         columnNumber: 7
       }
     }, moment__default["default"](date).format(format)), /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -15279,7 +15297,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 165,
+        lineNumber: 166,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default["default"].createElement(IconStateFull$1, {
@@ -15289,7 +15307,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 166,
+        lineNumber: 167,
         columnNumber: 9
       }
     }), /*#__PURE__*/React__default["default"].createElement(IconStateFull$1, {
@@ -15299,7 +15317,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 167,
+        lineNumber: 168,
         columnNumber: 9
       }
     })));
@@ -15349,14 +15367,13 @@
       size: size,
       disabled: disabled,
       direction: "column",
-      gap: 3,
       justify: "center",
       align: "center",
       css: css,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 202,
+        lineNumber: 203,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(NativeTimePicker, {
@@ -15370,7 +15387,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 203,
+        lineNumber: 204,
         columnNumber: 7
       }
     }));
@@ -15435,6 +15452,7 @@
     placement,
     css,
     disabled,
+    readOnly,
     minDate,
     maxDate
   }) {
@@ -15451,10 +15469,11 @@
       size: size,
       disabled: disabled,
       onClick: handleChange,
+      readOnly: readOnly,
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 40,
+        lineNumber: 41,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(InputLeftElement, {
@@ -15462,14 +15481,14 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$j,
-          lineNumber: 41,
+          lineNumber: 42,
           columnNumber: 35
         }
       }),
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 41,
+        lineNumber: 42,
         columnNumber: 7
       }
     }), /*#__PURE__*/React__default["default"].createElement(InputText, {
@@ -15481,7 +15500,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 42,
+        lineNumber: 43,
         columnNumber: 7
       }
     }));
@@ -15497,7 +15516,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 53,
+        lineNumber: 54,
         columnNumber: 5
       }
     });
@@ -15509,7 +15528,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 65,
+        lineNumber: 66,
         columnNumber: 5
       }
     }, disabled ? /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -15517,14 +15536,14 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 67,
+        lineNumber: 68,
         columnNumber: 9
       }
     }, renderInputGroup()) : /*#__PURE__*/React__default["default"].createElement(PopoverTrigger, {
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 69,
+        lineNumber: 70,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -15532,14 +15551,14 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 70,
+        lineNumber: 71,
         columnNumber: 11
       }
     }, renderInputGroup())), /*#__PURE__*/React__default["default"].createElement(PopoverContent, {
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 73,
+        lineNumber: 74,
         columnNumber: 7
       }
     }, renderTimePicker())) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -15547,7 +15566,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 77,
+        lineNumber: 78,
         columnNumber: 7
       }
     }, renderInputGroup()), /*#__PURE__*/React__default["default"].createElement(Drawer, {
@@ -15557,7 +15576,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 78,
+        lineNumber: 79,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default["default"].createElement(DrawerContent, {
@@ -15568,7 +15587,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 79,
+        lineNumber: 80,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -15580,7 +15599,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 85,
+        lineNumber: 86,
         columnNumber: 11
       }
     }, renderTimePicker()))));
@@ -15600,6 +15619,11 @@
     */
     disabled: PropTypes__default["default"].bool,
 
+    /**
+     ReadOnly state.
+    */
+    readOnly: PropTypes__default["default"].bool,
+
     /**
      Resize time picker.
     */
@@ -16052,7 +16076,8 @@
         css = _a.css,
         showTimePicker = _a.showTimePicker,
         minDate = _a.minDate,
-        maxDate = _a.maxDate;
+        maxDate = _a.maxDate,
+        readOnly = _a.readOnly;
 
     var _f = React.useState(date || dateValue),
         value = _f[0],
@@ -16098,6 +16123,7 @@
     var renderInputGroup = function renderInputGroup() {
       return jsxRuntime.jsxs(InputGroup, __assign({
         disabled: disabled,
+        readOnly: readOnly,
         onClick: handleChange,
         size: size
       }, {
@@ -17425,8 +17451,6 @@
 
                 if (customRowsStyle && customRowsStyle(row.values).length) {
                   for (var i_1 = 0; i_1 < customRowsStyle(row.values).length; i_1++) {
-                    console.log(customRowsStyle(row.values)[i_1]);
-
                     if (customRowsStyle(row.values)[i_1].predicate) {
                       customStyle = customRowsStyle(row.values)[i_1].css;
                     }
@@ -19426,6 +19450,7 @@
     backgroundColor: 'white',
     borderRadius: 4,
     padding: 8,
+    zIndex: '$sticky',
     boxShadow: '0px 10px 38px -10px rgba(22, 23, 24, 0.35), 0px 10px 20px -15px rgba(22, 23, 24, 0.2)',
     '@media (prefers-reduced-motion: no-preference)': {
       animationDuration: '400ms',
@@ -19518,7 +19543,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$a,
-        lineNumber: 119,
+        lineNumber: 120,
         columnNumber: 5
       }
     }), /*#__PURE__*/React__default["default"].createElement(Context.Provider, {
@@ -19529,7 +19554,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$a,
-        lineNumber: 120,
+        lineNumber: 121,
         columnNumber: 7
       }
     }, children));
@@ -19559,7 +19584,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$a,
-        lineNumber: 138,
+        lineNumber: 139,
         columnNumber: 5
       }
     }), props.children);
@@ -19586,7 +19611,7 @@
     __self: undefined,
     __source: {
       fileName: _jsxFileName$a,
-      lineNumber: 157,
+      lineNumber: 158,
       columnNumber: 3
     }
   }), props.children, props.rightIcon && props.rightIcon));
@@ -22074,7 +22099,7 @@
           lineNumber: 559,
           columnNumber: 9
         }
-      }, replaceLabel && replaceLabel.length > 0 ? replaceLabel : `Ubah ${isFile ? 'Berkas' : 'Gambar'}`));
+      }, replaceLabel && replaceLabel.length > 0 ? replaceLabel : `Ubah Berkas`));
     }
 
     const renderPicture = () => {
@@ -22356,7 +22381,7 @@
           lineNumber: 665,
           columnNumber: 11
         }
-      }, `${isFile ? 'Berkas' : 'Gambar'} sedang diunggah`)));
+      }, "Berkas sedang diunggah")));
     }
 
     function renderUpload() {
@@ -22438,7 +22463,7 @@
           lineNumber: 692,
           columnNumber: 17
         }
-      }, placeholder !== null && placeholder !== void 0 ? placeholder : `Pilih atau letakkan ${isFile ? 'berkas' : 'gambar'} di sini`)))), error && /*#__PURE__*/React__default["default"].createElement(ErrorMessage, {
+      }, placeholder !== null && placeholder !== void 0 ? placeholder : `Pilih atau letakkan berkas di sini`)))), error && /*#__PURE__*/React__default["default"].createElement(ErrorMessage, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@majoo-ui/react",
-  "version": "1.50.1",
+  "version": "1.50.2-rc.1",
   "dependencies": {
     "@majoo-ui/core": "^1.31.1",
     "@majoo-ui/helpers": "^1.30.5",