@majoo-ui/react 1.46.2-rc.1 → 1.46.2-rc.2

package/components/editableTable/Columns.d.ts

@@ -0,0 +1,59 @@
+/// <reference types="react" />
+interface ColumnsInterface {
+    /**
+     * Title header of a column.
+     */
+    Header: string | null;
+    /**
+     * Accessor is the "key" in the data.
+     */
+    accessor: string;
+    /**
+     * Additional column width.
+     */
+    width: number;
+    /**
+     * Additional column minWidth.
+     */
+    minWidth: number;
+    /**
+     * Additional column maxWidth.
+     */
+    maxWidth: number;
+    /**
+     * Header displayed in mobile view.
+     */
+    isMobileHeader: boolean;
+    /**
+     * Column that is only shown when mobile view.
+     */
+    isMobileOnly: boolean;
+    /**
+     * Required fields.
+     */
+    isRequired: boolean;
+    /**
+     * Additional custom subrow table.
+     */
+    isSubRow: boolean;
+    /**
+     * Vertically align in a table subRow cell.
+     */
+    verticalAlign: 'top' | 'middle' | 'bottom';
+    /**
+     * Is a call back that will return a custom component in a cell.
+     */
+    Cell: any;
+}
+declare function Columns(props: ColumnsInterface): JSX.Element;
+declare namespace Columns {
+    var defaultProps: {
+        isMobileHeader: boolean;
+        isMobileOnly: boolean;
+        isRequired: boolean;
+        isSubRow: boolean;
+        Cell: undefined;
+        verticalAlign: string;
+    };
+}
+export default Columns;

package/components/editableTable/EditableTable.d.ts

@@ -13,6 +13,14 @@ interface EditableTableProps<Data extends object> {
      * Displayed message if data does not exist.
      */
     emptyDataMessage?: string;
+    /**
+     * Additional height of the rows.
+     */
+    rowHeight?: number;
+    /**
+     * Additional align items of the rows.
+     */
+    align?: string;
 }
 interface RemoveProps {
     position?: 'leftBottom' | 'rightBottom' | 'leftTop' | 'rightTop';

package/index.esm.js

@@ -7695,7 +7695,7 @@ const SelectBox = styled('div', {
         height: 32
       },
       lg: {
-        height: 44
+        height: 40
       }
     },
     disabled: {
@@ -15454,6 +15454,8 @@ function InputDatePicker({
   size = 'sm',
   disabled,
   onChange,
+  defaultValue: defaultDateValue,
+  value: dateValue,
   defaultDate,
   date,
   advanceView,
@@ -15463,20 +15465,28 @@ function InputDatePicker({
   minDate,
   maxDate
 }) {
+  const [value, setValue] = useState(date || dateValue);
+  const [defaultValue, setDefaultValue] = useState(defaultDate || defaultDateValue);
+  useEffect(() => {
+    setValue(date || dateValue);
+  }, [date, dateValue]);
+  useEffect(() => {
+    setDefaultValue(defaultDate || defaultDateValue);
+  }, [defaultDate, defaultDateValue]);
   const [{
     selectedDate
   }, dispatch] = useReducer(dateReducer, {
-    selectedDate: defaultDate != null ? defaultDate : date
+    selectedDate: defaultValue != null ? defaultValue : value
   });
   const [openPicker, setOpenPicker] = useState(false);
   useEffect(() => {
-    if (date) {
+    if (value) {
       dispatch({
         type: UPDATE,
-        payload: date
+        payload: value
       });
     }
-  }, [date]);
+  }, [value]);
   const isMobile = useMediaQuery(`(max-width: ${type === SINGLE_PICKER ? '480px' : '767px'})`);
 
   function handleChange() {
@@ -15485,48 +15495,49 @@ function InputDatePicker({
     }
   }
 
-  const renderInputGroup = () => /*#__PURE__*/React__default.createElement(InputGroup, {
+  const renderInputGroup = () => /*#__PURE__*/React.createElement(InputGroup, {
     disabled: disabled,
     onClick: handleChange,
     size: size,
     __self: this,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 131,
+      lineNumber: 145,
       columnNumber: 5
     }
-  }, /*#__PURE__*/React__default.createElement(InputLeftElement, {
-    children: /*#__PURE__*/React__default.createElement(CalendarOutline, {
+  }, /*#__PURE__*/React.createElement(InputLeftElement, {
+    children: /*#__PURE__*/React.createElement(CalendarOutline, {
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 132,
+        lineNumber: 146,
         columnNumber: 35
       }
     }),
     __self: this,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 132,
+      lineNumber: 146,
       columnNumber: 7
     }
-  }), /*#__PURE__*/React__default.createElement(InputText, {
+  }), /*#__PURE__*/React.createElement(InputText, {
     placeholder: placeholder,
-    value: getInputPickerValue(type, selectedDate),
+    value: getInputPickerValue(type, selectedDate) // eslint-disable-next-line @typescript-eslint/no-empty-function
+    ,
     onChange: () => {},
-    defaultValue: defaultDate,
+    defaultValue: defaultValue,
     isPicker: true,
     tabIndex: "-1",
     __self: this,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 133,
+      lineNumber: 147,
       columnNumber: 7
     }
   }));
 
-  const renderDatePicker = () => /*#__PURE__*/React__default.createElement(DatePicker, {
-    advanceView: type === ADVANCE_PICKER && (!advanceView ? /*#__PURE__*/React__default.createElement(AdvancedOption, {
+  const renderDatePicker = () => /*#__PURE__*/React.createElement(DatePicker, {
+    advanceView: type === ADVANCE_PICKER && (!advanceView ? /*#__PURE__*/React.createElement(AdvancedOption, {
       options: options,
       disabled: disabled,
       optionHandler: value => dispatch({
@@ -15535,7 +15546,7 @@ function InputDatePicker({
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 148,
+        lineNumber: 163,
         columnNumber: 11
       }
     }) : {
@@ -15543,7 +15554,7 @@ function InputDatePicker({
     }),
     type: type,
     disabled: disabled,
-    date: date ? date === null || date === void 0 ? void 0 : date[1] : selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate[1],
+    date: value ? value === null || value === void 0 ? void 0 : value[1] : selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate[1],
     selected: selectedDate,
     multiDatePicker: type !== SINGLE_PICKER,
     onChange: value => {
@@ -15560,70 +15571,70 @@ function InputDatePicker({
     __self: this,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 144,
+      lineNumber: 159,
       columnNumber: 5
     }
   });
 
-  return !isMobile ? /*#__PURE__*/React__default.createElement(Popover, {
+  return !isMobile ? /*#__PURE__*/React.createElement(Popover, {
     open: openPicker,
     onOpenChange: setOpenPicker,
     placement: placement,
     __self: this,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 169,
+      lineNumber: 184,
       columnNumber: 5
     }
-  }, disabled ? /*#__PURE__*/React__default.createElement(Box, {
+  }, disabled ? /*#__PURE__*/React.createElement(Box, {
     css: css,
     __self: this,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 171,
+      lineNumber: 186,
       columnNumber: 9
     }
-  }, renderInputGroup()) : /*#__PURE__*/React__default.createElement(PopoverTrigger, {
+  }, renderInputGroup()) : /*#__PURE__*/React.createElement(PopoverTrigger, {
     __self: this,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 173,
+      lineNumber: 188,
       columnNumber: 9
     }
-  }, /*#__PURE__*/React__default.createElement(Box, {
+  }, /*#__PURE__*/React.createElement(Box, {
     css: css,
     __self: this,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 174,
+      lineNumber: 189,
       columnNumber: 11
     }
-  }, renderInputGroup())), /*#__PURE__*/React__default.createElement(PopoverContent, {
+  }, renderInputGroup())), /*#__PURE__*/React.createElement(PopoverContent, {
     __self: this,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 177,
+      lineNumber: 192,
       columnNumber: 7
     }
-  }, renderDatePicker())) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Box, {
+  }, renderDatePicker())) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
     css: css,
     __self: this,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 181,
+      lineNumber: 196,
       columnNumber: 7
     }
-  }, renderInputGroup()), /*#__PURE__*/React__default.createElement(Drawer, {
+  }, renderInputGroup()), /*#__PURE__*/React.createElement(Drawer, {
     open: openPicker,
     onOpenChange: handleChange,
     side: "bottom",
     __self: this,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 182,
+      lineNumber: 197,
       columnNumber: 7
     }
-  }, /*#__PURE__*/React__default.createElement(DrawerContent, {
+  }, /*#__PURE__*/React.createElement(DrawerContent, {
     css: {
       position: 'fixed',
       left: 0
@@ -15631,7 +15642,7 @@ function InputDatePicker({
     __self: this,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 183,
+      lineNumber: 198,
       columnNumber: 9
     }
   }, renderDatePicker())));
@@ -15643,7 +15654,18 @@ InputDatePicker.propTypes = {
   size: PropTypes.oneOf(['lg', 'sm']),
   disabled: PropTypes.bool,
   onChange: PropTypes.func,
+  value: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+  defaultValue: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+
+  /**
+   * DEPRECATED, changed to 'defaultValue'
+   */
   date: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+
+  /**
+  * DEPRECATED, changed to 'value'
+  */
+  defaultDate: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
   advanceView: PropTypes.oneOfType([PropTypes.element, PropTypes.node]),
   css: PropTypes.object,
   showTimePicker: PropTypes.bool,
@@ -16338,7 +16360,8 @@ const TableHead$2 = styled('thead', {
   top: 0,
   backgroundColor: '$bgWhite',
   boxShadow: '0 4px 4px rgba(0, 0, 0, 0.025)',
-  borderBottom: '1pt solid $bgBorder'
+  borderBottom: '1pt solid $bgBorder',
+  color: '$textPrimary'
 });
 const TableHeadRow$2 = styled('tr');
 const TableHeadCell$2 = styled('th', {
@@ -16663,6 +16686,9 @@ function Table({
     children: children
   }), void 0);
 
+  useEffect(() => {
+    setPageSize(rowLimit);
+  }, [rowLimit]);
   useEffect(() => {
     if (isMobile) {
       allColumns.map(column => {
@@ -18371,7 +18397,7 @@ const TemplateAlertFunction = props => {
     css: {
       position: 'absolute',
       bottom: 0,
-      width: '-webkit-fill-available'
+      width: '100%'
     },
     __self: undefined,
     __source: {
@@ -18566,7 +18592,7 @@ function AlertDialog(props) {
     css: {
       position: 'absolute',
       bottom: 0,
-      width: '-webkit-fill-available'
+      width: '100%'
     },
     __self: this,
     __source: {
@@ -25088,7 +25114,7 @@ const Navigation = props => {
           lineNumber: 116,
           columnNumber: 30
         }
-      }), data[i - 1].title, " EEK KUCING", ((_data = data[i - 1]) === null || _data === void 0 ? void 0 : _data.withTolltip) && /*#__PURE__*/React__default.createElement(Tooltip, {
+      }), data[i - 1].title, ((_data = data[i - 1]) === null || _data === void 0 ? void 0 : _data.withTolltip) && /*#__PURE__*/React__default.createElement(Tooltip, {
         align: "center",
         label: (_data2 = data[i - 1]) === null || _data2 === void 0 ? void 0 : _data2.tooltipsContents,
         __self: undefined,
@@ -25232,6 +25258,11 @@ const Default = props => {
     isComplete: [],
     hide: false
   }, props.state));
+  useEffect(() => {
+    updateState(current => Object.assign({}, current, {
+      isComplete: props.completedSteps || []
+    }));
+  }, [props.completedSteps]);
 
   const toogleVisibility = value => {
     updateState(Object.assign({}, state, {
@@ -25294,7 +25325,7 @@ const Default = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 253,
+      lineNumber: 260,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(StepWizardContext.Provider, {
@@ -25315,7 +25346,7 @@ const Default = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 254,
+      lineNumber: 261,
       columnNumber: 7
     }
   }, /*#__PURE__*/React__default.createElement(Stepper, _extends({}, props, {
@@ -25327,7 +25358,7 @@ const Default = props => {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 275,
+        lineNumber: 282,
         columnNumber: 16
       }
     }),
@@ -25337,7 +25368,7 @@ const Default = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 270,
+      lineNumber: 277,
       columnNumber: 9
     }
   }), props.children)));
@@ -25981,7 +26012,11 @@ const TableContainer = styled('div', {
   flexDirection: 'column',
   maxWidth: '100%',
   position: 'relative',
-  height: '100%'
+  height: '100%',
+  overflow: 'auto',
+  '& input': {
+    backgroundColor: 'white'
+  }
 });
 const TableContent = styled('table', {
   width: '100%',
@@ -26032,11 +26067,12 @@ const TableCell = styled('td', {
   color: '$textPrimary',
   position: 'relative',
   paddingLeft: 8,
+  height: 'auto',
   '&:last-child': {
     paddingRight: 8
   },
   '@md': {
-    height: '95px'
+    height: '80px'
   },
   variants: {
     verticalAlign: {
@@ -26052,6 +26088,24 @@ const TableCell = styled('td', {
     }
   }
 });
+const TableCellContent = styled('div', {
+  height: '100%',
+  paddingTop: 15,
+  display: 'flex',
+  variants: {
+    align: {
+      top: {
+        alignItems: 'start'
+      },
+      center: {
+        alignItems: 'center'
+      },
+      bottom: {
+        alignItems: 'end'
+      }
+    }
+  }
+});
 const TableFoot = styled('tfoot', {
   position: 'sticky',
   bottom: 0,
@@ -26244,7 +26298,9 @@ function EditableTable(props) {
   const {
     columns,
     data,
-    emptyDataMessage
+    emptyDataMessage,
+    rowHeight,
+    align
   } = props;
   const instance = useTable({
     columns,
@@ -26298,11 +26354,14 @@ function EditableTable(props) {
                     maxWidth: cell.column.maxWidth
                   }
                 }), {
-                  children: jsx(Box, Object.assign({
-                    css: {
-                      height: '100%',
-                      paddingTop: 15
+                  css: {
+                    '@md': {
+                      height: rowHeight
                     }
+                  }
+                }, {
+                  children: jsx(TableCellContent, Object.assign({
+                    align: align
                   }, {
                     children: cell.render('Cell')
                   }), void 0)
@@ -26322,7 +26381,10 @@ function EditableTable(props) {
                     verticalAlign: (_a = cell.column) === null || _a === void 0 ? void 0 : _a.verticalAlign,
                     css: {
                       paddingTop: '$spacing-03 !important',
-                      paddingBottom: '$spacing-03 !important'
+                      paddingBottom: '$spacing-03 !important',
+                      '@md': {
+                        height: rowHeight
+                      }
                     }
                   }, {
                     children: jsx(Paragraph, Object.assign({

package/index.umd.js

@@ -7779,7 +7779,7 @@
           height: 32
         },
         lg: {
-          height: 44
+          height: 40
         }
       },
       disabled: {
@@ -15573,6 +15573,8 @@
     size = 'sm',
     disabled,
     onChange,
+    defaultValue: defaultDateValue,
+    value: dateValue,
     defaultDate,
     date,
     advanceView,
@@ -15582,20 +15584,28 @@
     minDate,
     maxDate
   }) {
+    const [value, setValue] = React.useState(date || dateValue);
+    const [defaultValue, setDefaultValue] = React.useState(defaultDate || defaultDateValue);
+    React.useEffect(() => {
+      setValue(date || dateValue);
+    }, [date, dateValue]);
+    React.useEffect(() => {
+      setDefaultValue(defaultDate || defaultDateValue);
+    }, [defaultDate, defaultDateValue]);
     const [{
       selectedDate
     }, dispatch] = React.useReducer(dateReducer, {
-      selectedDate: defaultDate != null ? defaultDate : date
+      selectedDate: defaultValue != null ? defaultValue : value
     });
     const [openPicker, setOpenPicker] = React.useState(false);
     React.useEffect(() => {
-      if (date) {
+      if (value) {
         dispatch({
           type: UPDATE,
-          payload: date
+          payload: value
         });
       }
-    }, [date]);
+    }, [value]);
     const isMobile = useMediaQuery(`(max-width: ${type === SINGLE_PICKER ? '480px' : '767px'})`);
 
     function handleChange() {
@@ -15604,48 +15614,49 @@
       }
     }
 
-    const renderInputGroup = () => /*#__PURE__*/React__default["default"].createElement(InputGroup, {
+    const renderInputGroup = () => /*#__PURE__*/React__namespace.createElement(InputGroup, {
       disabled: disabled,
       onClick: handleChange,
       size: size,
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 131,
+        lineNumber: 145,
         columnNumber: 5
       }
-    }, /*#__PURE__*/React__default["default"].createElement(InputLeftElement, {
-      children: /*#__PURE__*/React__default["default"].createElement(icons.CalendarOutline, {
+    }, /*#__PURE__*/React__namespace.createElement(InputLeftElement, {
+      children: /*#__PURE__*/React__namespace.createElement(icons.CalendarOutline, {
         __self: this,
         __source: {
           fileName: _jsxFileName$j,
-          lineNumber: 132,
+          lineNumber: 146,
           columnNumber: 35
         }
       }),
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 132,
+        lineNumber: 146,
         columnNumber: 7
       }
-    }), /*#__PURE__*/React__default["default"].createElement(InputText, {
+    }), /*#__PURE__*/React__namespace.createElement(InputText, {
       placeholder: placeholder,
-      value: getInputPickerValue(type, selectedDate),
+      value: getInputPickerValue(type, selectedDate) // eslint-disable-next-line @typescript-eslint/no-empty-function
+      ,
       onChange: () => {},
-      defaultValue: defaultDate,
+      defaultValue: defaultValue,
       isPicker: true,
       tabIndex: "-1",
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 133,
+        lineNumber: 147,
         columnNumber: 7
       }
     }));
 
-    const renderDatePicker = () => /*#__PURE__*/React__default["default"].createElement(DatePicker, {
-      advanceView: type === ADVANCE_PICKER && (!advanceView ? /*#__PURE__*/React__default["default"].createElement(AdvancedOption, {
+    const renderDatePicker = () => /*#__PURE__*/React__namespace.createElement(DatePicker, {
+      advanceView: type === ADVANCE_PICKER && (!advanceView ? /*#__PURE__*/React__namespace.createElement(AdvancedOption, {
         options: options,
         disabled: disabled,
         optionHandler: value => dispatch({
@@ -15654,7 +15665,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$j,
-          lineNumber: 148,
+          lineNumber: 163,
           columnNumber: 11
         }
       }) : {
@@ -15662,7 +15673,7 @@
       }),
       type: type,
       disabled: disabled,
-      date: date ? date === null || date === void 0 ? void 0 : date[1] : selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate[1],
+      date: value ? value === null || value === void 0 ? void 0 : value[1] : selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate[1],
       selected: selectedDate,
       multiDatePicker: type !== SINGLE_PICKER,
       onChange: value => {
@@ -15679,70 +15690,70 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 144,
+        lineNumber: 159,
         columnNumber: 5
       }
     });
 
-    return !isMobile ? /*#__PURE__*/React__default["default"].createElement(Popover, {
+    return !isMobile ? /*#__PURE__*/React__namespace.createElement(Popover, {
       open: openPicker,
       onOpenChange: setOpenPicker,
       placement: placement,
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 169,
+        lineNumber: 184,
         columnNumber: 5
       }
-    }, disabled ? /*#__PURE__*/React__default["default"].createElement(Box, {
+    }, disabled ? /*#__PURE__*/React__namespace.createElement(Box, {
       css: css,
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 171,
+        lineNumber: 186,
         columnNumber: 9
       }
-    }, renderInputGroup()) : /*#__PURE__*/React__default["default"].createElement(PopoverTrigger, {
+    }, renderInputGroup()) : /*#__PURE__*/React__namespace.createElement(PopoverTrigger, {
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 173,
+        lineNumber: 188,
         columnNumber: 9
       }
-    }, /*#__PURE__*/React__default["default"].createElement(Box, {
+    }, /*#__PURE__*/React__namespace.createElement(Box, {
       css: css,
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 174,
+        lineNumber: 189,
         columnNumber: 11
       }
-    }, renderInputGroup())), /*#__PURE__*/React__default["default"].createElement(PopoverContent, {
+    }, renderInputGroup())), /*#__PURE__*/React__namespace.createElement(PopoverContent, {
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 177,
+        lineNumber: 192,
         columnNumber: 7
       }
-    }, renderDatePicker())) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Box, {
+    }, renderDatePicker())) : /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(Box, {
       css: css,
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 181,
+        lineNumber: 196,
         columnNumber: 7
       }
-    }, renderInputGroup()), /*#__PURE__*/React__default["default"].createElement(Drawer, {
+    }, renderInputGroup()), /*#__PURE__*/React__namespace.createElement(Drawer, {
       open: openPicker,
       onOpenChange: handleChange,
       side: "bottom",
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 182,
+        lineNumber: 197,
         columnNumber: 7
       }
-    }, /*#__PURE__*/React__default["default"].createElement(DrawerContent, {
+    }, /*#__PURE__*/React__namespace.createElement(DrawerContent, {
       css: {
         position: 'fixed',
         left: 0
@@ -15750,7 +15761,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 183,
+        lineNumber: 198,
         columnNumber: 9
       }
     }, renderDatePicker())));
@@ -15762,7 +15773,18 @@
     size: PropTypes__default["default"].oneOf(['lg', 'sm']),
     disabled: PropTypes__default["default"].bool,
     onChange: PropTypes__default["default"].func,
+    value: PropTypes__default["default"].oneOfType([PropTypes__default["default"].object, PropTypes__default["default"].array]),
+    defaultValue: PropTypes__default["default"].oneOfType([PropTypes__default["default"].object, PropTypes__default["default"].array]),
+
+    /**
+     * DEPRECATED, changed to 'defaultValue'
+     */
     date: PropTypes__default["default"].oneOfType([PropTypes__default["default"].object, PropTypes__default["default"].array]),
+
+    /**
+    * DEPRECATED, changed to 'value'
+    */
+    defaultDate: PropTypes__default["default"].oneOfType([PropTypes__default["default"].object, PropTypes__default["default"].array]),
     advanceView: PropTypes__default["default"].oneOfType([PropTypes__default["default"].element, PropTypes__default["default"].node]),
     css: PropTypes__default["default"].object,
     showTimePicker: PropTypes__default["default"].bool,
@@ -16460,7 +16482,8 @@
     top: 0,
     backgroundColor: '$bgWhite',
     boxShadow: '0 4px 4px rgba(0, 0, 0, 0.025)',
-    borderBottom: '1pt solid $bgBorder'
+    borderBottom: '1pt solid $bgBorder',
+    color: '$textPrimary'
   });
   var TableHeadRow$2 = styled('tr');
   var TableHeadCell$2 = styled('th', {
@@ -16812,6 +16835,9 @@
       }), void 0);
     };
 
+    React.useEffect(function () {
+      setPageSize(rowLimit);
+    }, [rowLimit]);
     React.useEffect(function () {
       if (isMobile) {
         allColumns.map(function (column) {
@@ -18543,7 +18569,7 @@
       css: {
         position: 'absolute',
         bottom: 0,
-        width: '-webkit-fill-available'
+        width: '100%'
       },
       __self: undefined,
       __source: {
@@ -18738,7 +18764,7 @@
       css: {
         position: 'absolute',
         bottom: 0,
-        width: '-webkit-fill-available'
+        width: '100%'
       },
       __self: this,
       __source: {
@@ -25310,7 +25336,7 @@
             lineNumber: 116,
             columnNumber: 30
           }
-        }), data[i - 1].title, " EEK KUCING", ((_data = data[i - 1]) === null || _data === void 0 ? void 0 : _data.withTolltip) && /*#__PURE__*/React__default["default"].createElement(Tooltip, {
+        }), data[i - 1].title, ((_data = data[i - 1]) === null || _data === void 0 ? void 0 : _data.withTolltip) && /*#__PURE__*/React__default["default"].createElement(Tooltip, {
           align: "center",
           label: (_data2 = data[i - 1]) === null || _data2 === void 0 ? void 0 : _data2.tooltipsContents,
           __self: undefined,
@@ -25454,6 +25480,11 @@
       isComplete: [],
       hide: false
     }, props.state));
+    React.useEffect(() => {
+      updateState(current => Object.assign({}, current, {
+        isComplete: props.completedSteps || []
+      }));
+    }, [props.completedSteps]);
 
     const toogleVisibility = value => {
       updateState(Object.assign({}, state, {
@@ -25516,7 +25547,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 253,
+        lineNumber: 260,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(StepWizardContext.Provider, {
@@ -25537,7 +25568,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 254,
+        lineNumber: 261,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default["default"].createElement(Stepper, _extends({}, props, {
@@ -25549,7 +25580,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 275,
+          lineNumber: 282,
           columnNumber: 16
         }
       }),
@@ -25559,7 +25590,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 270,
+        lineNumber: 277,
         columnNumber: 9
       }
     }), props.children)));
@@ -26203,7 +26234,11 @@
     flexDirection: 'column',
     maxWidth: '100%',
     position: 'relative',
-    height: '100%'
+    height: '100%',
+    overflow: 'auto',
+    '& input': {
+      backgroundColor: 'white'
+    }
   });
   var TableContent = styled('table', {
     width: '100%',
@@ -26254,11 +26289,12 @@
     color: '$textPrimary',
     position: 'relative',
     paddingLeft: 8,
+    height: 'auto',
     '&:last-child': {
       paddingRight: 8
     },
     '@md': {
-      height: '95px'
+      height: '80px'
     },
     variants: {
       verticalAlign: {
@@ -26274,6 +26310,24 @@
       }
     }
   });
+  var TableCellContent = styled('div', {
+    height: '100%',
+    paddingTop: 15,
+    display: 'flex',
+    variants: {
+      align: {
+        top: {
+          alignItems: 'start'
+        },
+        center: {
+          alignItems: 'center'
+        },
+        bottom: {
+          alignItems: 'end'
+        }
+      }
+    }
+  });
   var TableFoot = styled('tfoot', {
     position: 'sticky',
     bottom: 0,
@@ -26467,7 +26521,9 @@
   function EditableTable(props) {
     var columns = props.columns,
         data = props.data,
-        emptyDataMessage = props.emptyDataMessage;
+        emptyDataMessage = props.emptyDataMessage,
+        rowHeight = props.rowHeight,
+        align = props.align;
     var instance = reactTable.useTable({
       columns: columns,
       data: data,
@@ -26528,11 +26584,14 @@
                       maxWidth: cell.column.maxWidth
                     }
                   }), {
-                    children: jsxRuntime.jsx(Box, __assign({
-                      css: {
-                        height: '100%',
-                        paddingTop: 15
+                    css: {
+                      '@md': {
+                        height: rowHeight
                       }
+                    }
+                  }, {
+                    children: jsxRuntime.jsx(TableCellContent, __assign({
+                      align: align
                     }, {
                       children: cell.render('Cell')
                     }), void 0)
@@ -26552,7 +26611,10 @@
                       verticalAlign: (_a = cell.column) === null || _a === void 0 ? void 0 : _a.verticalAlign,
                       css: {
                         paddingTop: '$spacing-03 !important',
-                        paddingBottom: '$spacing-03 !important'
+                        paddingBottom: '$spacing-03 !important',
+                        '@md': {
+                          height: rowHeight
+                        }
                       }
                     }, {
                       children: jsxRuntime.jsx(Paragraph, __assign({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@majoo-ui/react",
-  "version": "1.46.2-rc.1",
+  "version": "1.46.2-rc.2",
   "dependencies": {
     "@majoo-ui/core": "^1.31.1",
     "@majoo-ui/helpers": "^1.30.4",