@majoo-ui/react 1.57.11 → 1.57.13

package/components/editableTable/EditableTable.d.ts

@@ -62,6 +62,10 @@ interface EditableTableProps<Data extends object> {
      * expanded row callback.
      */
     onExpand?: (expanded: boolean) => void;
+    /**
+     * Override isMobile condition
+     */
+    isMobileLayout?: boolean;
 }
 interface RemoveProps {
     position?: 'leftBottom' | 'rightBottom' | 'leftTop' | 'rightTop';

package/components/form/components/InputSelect/InputSelect.d.ts

@@ -587,7 +587,7 @@ export declare const SelectItem: import("@stitches/react/types/styled-component"
         backgroundColor: string;
     };
 }>>;
-export declare const SelectInputSearch: React.ForwardRefExoticComponent<Pick<any, string | number | symbol> & React.RefAttributes<HTMLInputElement | HTMLButtonElement>>;
+export declare const SelectInputSearch: React.ForwardRefExoticComponent<Pick<any, string | number | symbol> & React.RefAttributes<HTMLInputElement>>;
 export declare type Option = {
     value: string;
     name: string;
@@ -713,5 +713,5 @@ interface InputSelectProps extends Omit<DownshiftProps<Option>, 'initialSelected
      */
     renderFooter?: () => React.ReactNode;
 }
-declare const InputSelect: React.ForwardRefExoticComponent<InputSelectProps & React.RefAttributes<HTMLInputElement | HTMLButtonElement>>;
+export declare function InputSelect({ option, onChange, value, placeholder, searchPlaceholder, embedSearch, size, disabled, search, iconColor, hideArrowicon, showLeadingIcon, placement, disabledOptions, textSelector, valueSelector, readOnly, isInvalid, noOptionIcon, fetchData, onSearch, isLoading, showTooltip, css, renderFooter, optionCss, ...props }: InputSelectProps): JSX.Element;
 export default InputSelect;

package/index.esm.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import React__default, { useState, useEffect, createContext, useContext, useRef, useCallback, cloneElement, forwardRef, createElement as createElement$2, useLayoutEffect, useReducer, useMemo, memo } from 'react';
+import React__default, { useState, useEffect, createContext, useContext, useRef, useCallback, cloneElement, createElement as createElement$2, forwardRef, useLayoutEffect, useReducer, useMemo, memo } from 'react';
 import PropTypes from 'prop-types';
 import { createStitches, styled as styled$1 } from '@stitches/react';
 import { foundations } from '@majoo-ui/core';
@@ -7187,7 +7187,6 @@ const InputNumber = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
   return /*#__PURE__*/React__default.createElement(StyledInput, _extends({
     ref: ref,
-    getInputRef: ref,
     placeholder: placeholder,
     value: value,
     size: size,
@@ -9101,7 +9100,7 @@ const SelectInputSearch = /*#__PURE__*/React.forwardRef((_a, forwardedRef) => {
     }, void 0)]
   }), void 0);
 });
-const InputSelect = /*#__PURE__*/forwardRef((_a, ref) => {
+function InputSelect(_a) {
   var {
       option,
       onChange,
@@ -9183,7 +9182,7 @@ const InputSelect = /*#__PURE__*/forwardRef((_a, ref) => {
     setItem(generatedOption);
     setOptions(generatedOption);
   }, [option, disabledOptions, valueSelector, textSelector]);
-  const debouncedSearch = React.useRef(debounce(query => __awaiter(void 0, void 0, void 0, function* () {
+  const debouncedSearch = React.useRef(debounce(query => __awaiter(this, void 0, void 0, function* () {
     setQuery(query);
     if (onSearch) onSearch(query);
   }), 1000)).current;
@@ -9269,7 +9268,6 @@ const InputSelect = /*#__PURE__*/forwardRef((_a, ref) => {
                   }
                 }, {
                   children: jsx(SelectInputSearch, {
-                    ref: ref,
                     showLeadingIcon: showLeadingIcon,
                     showClearIcon: hideArrowicon,
                     disabled: disabled,
@@ -9294,7 +9292,6 @@ const InputSelect = /*#__PURE__*/forwardRef((_a, ref) => {
                 }), void 0) : jsx(Button$3, Object.assign({}, getToggleButtonProps({
                   disabled: disabled || readOnly
                 }), {
-                  ref: ref,
                   disabled: disabled,
                   size: size,
                   readOnly: readOnly,
@@ -9453,7 +9450,7 @@ const InputSelect = /*#__PURE__*/forwardRef((_a, ref) => {
       }), void 0);
     }
   }), void 0);
-});
+}
 
 var tryToString$3 = tryToString$5;
 
@@ -11344,7 +11341,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       }
     }
   });
-  const getOption = useCallback(() => option === null || option === void 0 ? void 0 : option.map(item => {
+  const getOption = maxSelectedItem ? useCallback(() => option === null || option === void 0 ? void 0 : option.map(item => {
     const isMaxSelectedItem = maxSelectedItem && (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.length) >= maxSelectedItem;
     if (isMaxSelectedItem && !(selectedValue !== null && selectedValue !== void 0 && selectedValue.includes(item.id))) {
       item.hideCheck = true;
@@ -11354,7 +11351,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       item.isDisabled = false;
     }
     return item;
-  }), [maxSelectedItem, option, selectedValue]);
+  }), [maxSelectedItem, option, selectedValue]) : () => option;
   useEffect(() => {
     sortItems();
     setItems(isShowSelectAll ? [{
@@ -11365,7 +11362,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       id: '!all',
       name: selectAllLabel != null ? selectAllLabel : t('selectAllLabelText', 'Pilih Semua')
     }, ...getOption()] : getOption());
-  }, [getOption, isShowSelectAll]);
+  }, [option, isShowSelectAll]);
   useEffect(() => {
     if (selectedValue.length > 0 && disabledOptions.length === 0) {
       setInitItems(sortValue);
@@ -47512,7 +47509,8 @@ function EditableTable(props) {
     getCheckboxProps,
     keyId = 'id',
     selectedIds,
-    onExpand
+    onExpand,
+    isMobileLayout
   } = props;
   const {
     t
@@ -47585,7 +47583,7 @@ function EditableTable(props) {
       });
     }
   }, [selectedRowIds, data, onSelectedChange, selectedIndex]);
-  const isDesktop = useMediaQuery('(min-width: 767px)');
+  const isMobile = useMediaQuery(isMobileLayout === undefined ? '(max-width: 767px)' : isMobileLayout ? '(max-width: 8000px)' : '(max-width: 0px)');
   const getCustomRows = (row, renderRow) => {
     var _a;
     let customStyle = {};
@@ -47637,7 +47635,7 @@ function EditableTable(props) {
       })
     }), void 0);
   };
-  return isDesktop ? jsx(TableContainer$1, Object.assign({
+  return !isMobile ? jsx(TableContainer$1, Object.assign({
     css: props === null || props === void 0 ? void 0 : props.css
   }, {
     children: jsxs(TableContent$1, Object.assign({}, getTableProps(), {

package/index.umd.js

@@ -7271,7 +7271,6 @@
       props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
     return /*#__PURE__*/React__default["default"].createElement(StyledInput, _extends({
       ref: ref,
-      getInputRef: ref,
       placeholder: placeholder,
       value: value,
       size: size,
@@ -9183,7 +9182,8 @@
       }, void 0)]
     }), void 0);
   });
-  var InputSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
+  function InputSelect(_a) {
+    var _this = this;
     var option = _a.option,
       onChange = _a.onChange,
       value = _a.value,
@@ -9297,7 +9297,7 @@
       setOptions(generatedOption);
     }, [option, disabledOptions, valueSelector, textSelector]);
     var debouncedSearch = React__namespace.useRef(debounce__default["default"](function (query) {
-      return __awaiter(void 0, void 0, void 0, function () {
+      return __awaiter(_this, void 0, void 0, function () {
         return __generator(this, function (_a) {
           setQuery(query);
           if (onSearch) onSearch(query);
@@ -9392,7 +9392,6 @@
                     }
                   }, {
                     children: jsxRuntime.jsx(SelectInputSearch, {
-                      ref: ref,
                       showLeadingIcon: showLeadingIcon,
                       showClearIcon: hideArrowicon,
                       disabled: disabled,
@@ -9417,7 +9416,6 @@
                   }), void 0) : jsxRuntime.jsx(Button$3, __assign({}, getToggleButtonProps({
                     disabled: disabled || readOnly
                   }), {
-                    ref: ref,
                     disabled: disabled,
                     size: size,
                     readOnly: readOnly,
@@ -9580,7 +9578,7 @@
         }), void 0);
       }
     }), void 0);
-  });
+  }
 
   var tryToString$3 = tryToString$5;
 
@@ -11493,7 +11491,7 @@
         }
       }
     });
-    const getOption = React.useCallback(() => option === null || option === void 0 ? void 0 : option.map(item => {
+    const getOption = maxSelectedItem ? React.useCallback(() => option === null || option === void 0 ? void 0 : option.map(item => {
       const isMaxSelectedItem = maxSelectedItem && (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.length) >= maxSelectedItem;
       if (isMaxSelectedItem && !(selectedValue !== null && selectedValue !== void 0 && selectedValue.includes(item.id))) {
         item.hideCheck = true;
@@ -11503,7 +11501,7 @@
         item.isDisabled = false;
       }
       return item;
-    }), [maxSelectedItem, option, selectedValue]);
+    }), [maxSelectedItem, option, selectedValue]) : () => option;
     React.useEffect(() => {
       sortItems();
       setItems(isShowSelectAll ? [{
@@ -11514,7 +11512,7 @@
         id: '!all',
         name: selectAllLabel != null ? selectAllLabel : t('selectAllLabelText', 'Pilih Semua')
       }, ...getOption()] : getOption());
-    }, [getOption, isShowSelectAll]);
+    }, [option, isShowSelectAll]);
     React.useEffect(() => {
       if (selectedValue.length > 0 && disabledOptions.length === 0) {
         setInitItems(sortValue);
@@ -47930,7 +47928,8 @@
       _a = props.keyId,
       keyId = _a === void 0 ? 'id' : _a,
       selectedIds = props.selectedIds,
-      onExpand = props.onExpand;
+      onExpand = props.onExpand,
+      isMobileLayout = props.isMobileLayout;
     var t = reactI18next.useTranslation('translation').t;
     var _b = React.useState(null),
       selectedIndex = _b[0],
@@ -48002,7 +48001,7 @@
         });
       }
     }, [selectedRowIds, data, onSelectedChange, selectedIndex]);
-    var isDesktop = useMediaQuery('(min-width: 767px)');
+    var isMobile = useMediaQuery(isMobileLayout === undefined ? '(max-width: 767px)' : isMobileLayout ? '(max-width: 8000px)' : '(max-width: 0px)');
     var getCustomRows = function getCustomRows(row, renderRow) {
       var _a;
       var customStyle = {};
@@ -48057,7 +48056,7 @@
         })
       }), void 0);
     };
-    return isDesktop ? jsxRuntime.jsx(TableContainer$1, __assign({
+    return !isMobile ? jsxRuntime.jsx(TableContainer$1, __assign({
       css: props === null || props === void 0 ? void 0 : props.css
     }, {
       children: jsxRuntime.jsxs(TableContent$1, __assign({}, getTableProps(), {

package/package.json

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