@majoo-ui/react 2.2.0 → 2.3.0

package/components/editableTable/EditableMobile.esm.js

@@ -12,7 +12,7 @@ import Flex from '../../layout/flex/Flex.esm.js';
 import { Grid, GridItem } from '../../layout/grid/Grid.esm.js';
 import Collapalse from './transition.esm.js';
 import { TableHeaderCellContainer, TableHeadCellContent } from '../table/Table.esm.js';
-import { useTranslation } from 'react-i18next';
+import { defaultTableLocaleText } from '../table/locale.esm.js';
 
 const TableContainer = styled('div', {
   display: 'block',
@@ -101,7 +101,8 @@ function EditableTableMobile(props) {
     onExpand,
     hiddenColumns,
     customEmptyDataProps,
-    virtualized
+    virtualized,
+    sortColumnTitle = defaultTableLocaleText.sortColumnTitle
   } = props;
   const {
     getTableProps,
@@ -113,9 +114,6 @@ function EditableTableMobile(props) {
     toggleAllRowsExpanded,
     setHiddenColumns
   } = instance;
-  const {
-    t
-  } = useTranslation('MajooUI/table');
   useEffect(() => {
     if (hiddenColumns === null || hiddenColumns === void 0 ? void 0 : hiddenColumns.length) {
       setHiddenColumns(hiddenColumns);
@@ -275,7 +273,7 @@ function EditableTableMobile(props) {
             const isSelector = (column === null || column === void 0 ? void 0 : column.id) === 'selection';
             const headerRender = column.render('Header');
             return (isMobileHeader || isSelector) && (/*#__PURE__*/createElement(TableHeadCell, Object.assign({}, column.getHeaderProps(props => [props, column.sortable ? column.getSortByToggleProps({
-              title: t('sortColumnTitle', 'Urutkan') || 'Urutkan'
+              title: sortColumnTitle
             }) : {
               onClick: column.onToggle
             }, {

package/components/editableTable/EditableTable.esm.js

@@ -15,9 +15,9 @@ import InputCheckbox from '../form/components/InputCheckbox/InputCheckbox.esm.js
 import Flex from '../../layout/flex/Flex.esm.js';
 import useMediaQuery from '../../utils/useMediaQuery.esm.js';
 import EditableTableMobile from './EditableMobile.esm.js';
-import { useTranslation } from 'react-i18next';
 import { pick, isEqual } from 'lodash';
 import { defaultEmptyDataProps, TableHeaderCellContainer, TableHeadCellContent } from '../table/Table.esm.js';
+import { useTableLocaleText } from '../table/locale.esm.js';
 import { useVirtual } from 'react-virtual';
 import Tooltip from '../tooltip/Tooltip.esm.js';
 
@@ -309,11 +309,10 @@ function EditableTable(props) {
     hiddenColumns,
     customEmptyDataProps: emptyDataProps,
     virtualized = false,
-    onSortByChange
+    onSortByChange,
+    localeText
   } = props;
-  const {
-    t
-  } = useTranslation('MajooUI/table');
+  const tableLocaleText = useTableLocaleText(localeText);
   const [selectedIndex, setSelectedIndex] = useState(null);
   const isMobile = useMediaQuery(isMobileLayout === undefined ? '(max-width: 767px)' : isMobileLayout ? '(max-width: 8000px)' : '(max-width: 0px)');
   const IndeterminateCheckbox = props => {
@@ -403,7 +402,7 @@ function EditableTable(props) {
       });
     }
   }, [selectedRowIds, data, onSelectedChange, selectedIndex]);
-  const customEmptyDataProps = emptyDataProps || defaultEmptyDataProps(t, isMobile);
+  const customEmptyDataProps = emptyDataProps || defaultEmptyDataProps(tableLocaleText, isMobile);
   const getCustomRows = (row, renderRow) => {
     var _a;
     let customStyle = {};
@@ -473,7 +472,7 @@ function EditableTable(props) {
             children: visibleHeaders.map(column => {
               const headerRender = column.render('Header');
               return !(column === null || column === void 0 ? void 0 : column.isMobileOnly) && jsx(TableHeadCell, Object.assign({}, column.getHeaderProps(props => [props, column.sortable ? column.getSortByToggleProps({
-                title: t('sortColumnTitle', 'Urutkan') || 'Urutkan'
+                title: tableLocaleText.sortColumnTitle
               }) : {
                 onClick: column.onToggle
               }, {
@@ -597,6 +596,7 @@ function EditableTable(props) {
     onExpand: onExpand,
     hiddenColumns: hiddenColumns,
     customEmptyDataProps: customEmptyDataProps,
+    sortColumnTitle: tableLocaleText.sortColumnTitle,
     virtualized: virtualized,
     rowVirtualizer: rowVirtualizer,
     tableContainerRef: tableContainerRef

package/components/form/components/InputSelect/InputSelect.esm.js

@@ -219,23 +219,17 @@ const OptionWrapper = styled('div', {
   backgroundColor: '$bgWhite',
   boxShadow: '0px 2px 12px #00000014',
   width: '100%',
-  maxHeight: '300px',
-  position: 'absolute',
-  float: 'left',
-  top: '100%',
-  left: '0',
+  // In-flow on purpose: Popover's flip/shift/size measure the floating element,
+  // which is only as tall as this wrapper. An absolute wrapper measures 0px and
+  // the dropdown never flips. The cap shrinks to the space Popover reports.
+  maxHeight: 'min(300px, var(--majoo-popover-available-height, 300px))',
+  position: 'relative',
   variants: {
+    // Kept for API compatibility only — Popover (floating-ui) owns placement now,
+    // treating it as a preference that flips when the preferred side lacks room.
     placement: {
-      bottom: {
-        top: '100%',
-        left: '0',
-        transform: 'none'
-      },
-      top: {
-        top: '0',
-        left: '0',
-        transform: 'translate(0, -100%)'
-      }
+      bottom: {},
+      top: {}
     },
     withFooter: {
       true: {
@@ -443,7 +437,10 @@ const InputSelect = /*#__PURE__*/React.forwardRef((_a, ref) => {
       return setItem(options);
     } else {
       setItem(options.filter(item => {
-        const nameIsIncluded = item.name.toLowerCase().includes(value.toLocaleLowerCase());
+        var _a;
+        // textSelector can point at a non-string field (numeric id, null), so never
+        // assume item.name is a string here.
+        const nameIsIncluded = String((_a = item.name) !== null && _a !== void 0 ? _a : '').toLowerCase().includes(value.toLocaleLowerCase());
         if (item.render && isFunction(item.render)) {
           const extractedString = item.render() ? extractStringFromHTML(renderToString(item.render())).join(',') : '';
           return nameIsIncluded || extractedString.toLowerCase().includes(value.toLocaleLowerCase());
@@ -538,12 +535,23 @@ const InputSelect = /*#__PURE__*/React.forwardRef((_a, ref) => {
       return addedGroupItems;
     }, []));
   }, [item]);
-  const stateReducer = (_, changes) => {
+  const stateReducer = (state, changes) => {
     switch (changes.type) {
       case Downshift.stateChangeTypes.blurButton:
         return {
           isOpen: true
         };
+      // Downshift wipes selectedItem on Escape whenever its own isOpen is already false,
+      // firing onChange(null) on consumers that never asked to clear the selection.
+      // Escape only closes the menu and restores the label of the current selection.
+      case Downshift.stateChangeTypes.keyDownEscape:
+        {
+          const nextChanges = Object.assign(Object.assign({}, changes), {
+            inputValue: state.selectedItem ? state.selectedItem.name : ''
+          });
+          delete nextChanges.selectedItem;
+          return nextChanges;
+        }
       default:
         return changes;
     }
@@ -683,13 +691,8 @@ const InputSelect = /*#__PURE__*/React.forwardRef((_a, ref) => {
                     position: 'absolute',
                     inset: 0,
                     zIndex: '$tooltip',
-                    top: item.length > 0 ? '0px' : placement === 'top' ? '-20px' : '20px',
-                    // bottom: '80px',
-                    width: '100%',
-                    height: scrollerRef.current ? scrollerRef.current.clientHeight : '40px',
                     backgroundColor: '$bgWhite',
-                    opacity: 0.8,
-                    transform: placement === 'top' ? 'translate(0, -100%)' : 'none'
+                    opacity: 0.8
                   },
                   children: jsx(Text, {
                     variant: "caption",
@@ -699,9 +702,10 @@ const InputSelect = /*#__PURE__*/React.forwardRef((_a, ref) => {
                   condition: renderFooter && typeof renderFooter === 'function',
                   wrapper: child => jsxs(Box, {
                     css: {
-                      position: 'absolute',
-                      float: 'left',
-                      display: isOpen ? 'block' : 'none',
+                      position: 'relative',
+                      display: isOpen ? 'flex' : 'none',
+                      flexDirection: 'column',
+                      maxHeight: 'var(--majoo-popover-available-height, calc(100vh - 160px))',
                       zIndex: '$popover',
                       width: '100%'
                     },
@@ -714,11 +718,16 @@ const InputSelect = /*#__PURE__*/React.forwardRef((_a, ref) => {
                   }, {
                     suppressRefError: true
                   }), {
-                    css: Object.assign({
+                    css: Object.assign(Object.assign({
                       display: isOpen ? 'block' : 'none',
                       zIndex: '$popover',
-                      pointerEvents: 'auto'
-                    }, optionCss),
+                      pointerEvents: 'auto',
+                      minHeight: isLoading ? '40px' : undefined
+                    }, renderFooter && typeof renderFooter === 'function' ? {
+                      flex: 1,
+                      minHeight: 0,
+                      maxHeight: 'none'
+                    } : {}), optionCss),
                     withFooter: renderFooter && typeof renderFooter === 'function',
                     placement: placement,
                     children: [!search && embedSearch && isOpen && jsx(SelectContainer, {

package/components/form/components/InputSelectCheck/InputSelectCheck.esm.js

@@ -36,6 +36,9 @@ import { ConditionalWrapper } from '../../../../wrapper/ConditionalWrapper.esm.j
 import OptionGroupItem from './OptionGroupItem.esm.js';
 import { useMountedLayoutEffect } from 'react-table';
 import { useVirtual } from 'react-virtual';
+import { useFloating, autoUpdate } from '@floating-ui/react';
+import { Portal } from '@majoo-ui/helpers';
+import { createPopoverMiddleware } from '../../../popover/middleware.esm.js';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 const startTransition = React__default.startTransition || (callback => {
@@ -223,34 +226,23 @@ const TagWrapper = styled(Box, {
   margin: '10px 0',
   gap: '5px'
 });
+
+// Positioned by floating-ui (see `useFloating` below) and portalled, so it is
+// neither clipped by an `overflow: hidden` ancestor nor pushed off the viewport.
+// Its children stay in-flow: floating-ui measures this element to decide flips.
 const OptionWrapper = styled('div', {
   display: 'none',
   overflow: 'hidden',
-  zIndex: 12,
+  zIndex: '$tooltip',
+  pointerEvents: 'auto',
   borderRadius: '$sm',
   backgroundColor: '$bgWhite',
   boxShadow: '0px 2px 12px #00000014',
-  width: '100%',
-  // height: '160px',
-  position: 'absolute',
-  float: 'left',
-  // top: '40px',
-  left: '0px',
+  width: 'var(--majoo-popover-reference-width, 100%)',
   color: '$textPrimary',
-  variants: {
-    placement: {
-      bottom: {
-        top: '100%',
-        left: '0',
-        transform: 'none'
-      },
-      top: {
-        top: '0',
-        left: '0',
-        transform: 'translate(0, -100%)'
-      }
-    }
-  }
+  fontFamily: 'inherit',
+  fontSize: '$short-content-regular',
+  textAlign: 'left'
 });
 const Option = styled('div', {
   flexDirection: 'column',
@@ -258,7 +250,7 @@ const Option = styled('div', {
   borderRadius: '$lg',
   overflowY: 'auto',
   padding: '8px 16px',
-  maxHeight: '160px',
+  maxHeight: 'min(160px, var(--majoo-popover-available-height, 160px))',
   height: 'auto',
   '@sm': {
     borderRadius: 'unset'
@@ -815,6 +807,20 @@ const InputSelectCheck = /*#__PURE__*/forwardRef(({
       }
     }
   });
+
+  // downshift owns open/close and outside-click; floating-ui only positions the
+  // menu. The floating ref is attached only while the menu is shown, so a closed
+  // select does not keep autoUpdate's scroll/resize listeners alive.
+  // `placement` is a preference: the menu flips when that side lacks room.
+  const isMenuShown = isOpen && disabled === false;
+  const floating = useFloating({
+    open: isMenuShown,
+    placement,
+    whileElementsMounted: autoUpdate,
+    middleware: createPopoverMiddleware({
+      sideOffset: 4
+    })
+  });
   const memoOptions = useMemo(() => {
     // Skip expensive operations for very large datasets
     const isVeryLarge = option?.length > 10000;
@@ -1019,6 +1025,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef(({
     mobileOnly: mobileOnly,
     desktopOnly: desktopOnly,
     children: [/*#__PURE__*/jsxs(Select, {
+      ref: floating.refs.setReference,
       size: size,
       disabled: disabled || readOnly,
       isInvalid: isInvalid,
@@ -1162,152 +1169,153 @@ const InputSelectCheck = /*#__PURE__*/forwardRef(({
       },
       color: "brand",
       children: `${totalOptions ? totalOptions : selectedItems?.filter(item => item?.id !== '!all')?.length} ${labelCounter || t('labelCounterText', 'Item terpilih')}`
-    }), /*#__PURE__*/jsxs(OptionWrapper, {
-      placement: placement,
-      css: {
-        display: isOpen && disabled === false ? 'block' : 'none',
-        top: size === 'lg' ? '45px' : '35px',
-        minHeight: isLoading ? 40 : 0
-      },
-      children: [isLoading && /*#__PURE__*/jsx(Flex, {
-        justify: "center",
-        align: "center",
+    }), /*#__PURE__*/jsx(Portal, {
+      children: /*#__PURE__*/jsxs(OptionWrapper, {
+        ref: isMenuShown ? floating.refs.setFloating : null,
+        style: {
+          position: floating.strategy,
+          top: floating.y ?? 0,
+          left: floating.x ?? 0
+        },
         css: {
-          position: 'absolute',
-          inset: 0,
-          zIndex: '$tooltip',
-          top: items.length > 0 ? '0px' : placement === 'top' ? '-20px' : '0px',
-          // bottom: '80px',
-          width: '100%',
-          minHeight: 40,
-          height: scrollerRef.current ? scrollerRef.current.clientHeight : '40px',
-          backgroundColor: '$bgWhite',
-          opacity: 0.8,
-          transform: placement === 'top' ? 'translate(0, -100%)' : 'none'
+          display: isMenuShown ? 'block' : 'none',
+          minHeight: isLoading ? 40 : 0
         },
-        children: /*#__PURE__*/jsx(Text, {
-          variant: "caption",
-          children: "Loading...."
-        })
-      }), items.length > 0 || isLoading ? /*#__PURE__*/jsx(Option, {
-        ...getMenuProps({
-          ref: scrollerRef
-        }, {
-          suppressRefError: true
-        }),
-        css: optionListCss,
-        children: /*#__PURE__*/jsx(ConditionalWrapper, {
-          condition: !!fetchData && items.length > 0,
-          wrapper: child => /*#__PURE__*/jsx(InfiniteScroll, {
-            loadMore: () => {
-              if (!isLoading) {
-                if (scrollerRef.current) {
-                  scrollerRef.current.scrollBy(0, -5);
+        children: [isLoading && /*#__PURE__*/jsx(Flex, {
+          justify: "center",
+          align: "center",
+          css: {
+            position: 'absolute',
+            inset: 0,
+            zIndex: '$tooltip',
+            minHeight: 40,
+            backgroundColor: '$bgWhite',
+            opacity: 0.8
+          },
+          children: /*#__PURE__*/jsx(Text, {
+            variant: "caption",
+            children: "Loading...."
+          })
+        }), items.length > 0 || isLoading ? /*#__PURE__*/jsx(Option, {
+          ...getMenuProps({
+            ref: scrollerRef
+          }, {
+            suppressRefError: true
+          }),
+          css: optionListCss,
+          children: /*#__PURE__*/jsx(ConditionalWrapper, {
+            condition: !!fetchData && items.length > 0,
+            wrapper: child => /*#__PURE__*/jsx(InfiniteScroll, {
+              loadMore: () => {
+                if (!isLoading) {
+                  if (scrollerRef.current) {
+                    scrollerRef.current.scrollBy(0, -5);
+                  }
+                  fetchData?.({
+                    query
+                  });
                 }
-                fetchData?.({
-                  query
-                });
-              }
-            },
-            hasMore: true,
-            threshold: 0,
-            useWindow: false,
-            children: child
-          }, isLoading),
-          children: isOpen && shouldVirtualize ?
-          /*#__PURE__*/
-          // Virtualized rendering for large lists
-          jsx(Fragment, {
-            children: /*#__PURE__*/jsx("div", {
-              style: {
-                height: `${rowVirtualizer.totalSize}px`,
-                position: 'relative',
-                width: '100%'
               },
-              children: rowVirtualizer.virtualItems.map(virtualRow => {
-                const virtualItem = getItemAtIndex(virtualRow.index);
-                if (!virtualItem) return null;
-                const {
-                  type,
-                  item
-                } = virtualItem;
-                return /*#__PURE__*/jsx("div", {
-                  style: {
-                    position: 'absolute',
-                    top: 0,
-                    left: 0,
-                    width: '100%',
-                    transform: `translateY(${virtualRow.start}px)`
-                  },
-                  children: type === 'group' ?
-                  /*#__PURE__*/
-                  // Render option group header (without children, as they're rendered separately)
-                  jsxs(ItemWrapper, {
-                    ...getItemProps({
-                      item,
-                      index: virtualRow.index,
-                      disabled: item.isDisabled
-                    }),
-                    css: {
-                      backgroundColor: highlightedIndex === virtualRow.index ? '$bgGray' : '$bgWhite',
-                      cursor: item.isDisabled ? 'not-allowed' : 'pointer',
-                      color: item.isDisabled ? '$textDisable' : 'textPrimary',
-                      fontWeight: 600
+              hasMore: true,
+              threshold: 0,
+              useWindow: false,
+              children: child
+            }, isLoading),
+            children: isOpen && shouldVirtualize ?
+            /*#__PURE__*/
+            // Virtualized rendering for large lists
+            jsx(Fragment, {
+              children: /*#__PURE__*/jsx("div", {
+                style: {
+                  height: `${rowVirtualizer.totalSize}px`,
+                  position: 'relative',
+                  width: '100%'
+                },
+                children: rowVirtualizer.virtualItems.map(virtualRow => {
+                  const virtualItem = getItemAtIndex(virtualRow.index);
+                  if (!virtualItem) return null;
+                  const {
+                    type,
+                    item
+                  } = virtualItem;
+                  return /*#__PURE__*/jsx("div", {
+                    style: {
+                      position: 'absolute',
+                      top: 0,
+                      left: 0,
+                      width: '100%',
+                      transform: `translateY(${virtualRow.start}px)`
                     },
-                    children: [/*#__PURE__*/jsx(IconWrapper, {
+                    children: type === 'group' ?
+                    /*#__PURE__*/
+                    // Render option group header (without children, as they're rendered separately)
+                    jsxs(ItemWrapper, {
+                      ...getItemProps({
+                        item,
+                        index: virtualRow.index,
+                        disabled: item.isDisabled
+                      }),
                       css: {
-                        width: '16px',
-                        height: '16px',
-                        border: '1px solid $bgBorder',
+                        backgroundColor: highlightedIndex === virtualRow.index ? '$bgGray' : '$bgWhite',
                         cursor: item.isDisabled ? 'not-allowed' : 'pointer',
-                        ...checkBoxCss
+                        color: item.isDisabled ? '$textDisable' : 'textPrimary',
+                        fontWeight: 600
                       },
-                      children: !item?.hideCheck && item.isDisabled ? /*#__PURE__*/jsx(CheckOutline, {
-                        color: colors.iconDisable
-                      }) : item?.children?.filter(e => selectedValueSet.has(e.id) && !e.isDisabled)?.length === item?.children?.filter(e => !e.isDisabled)?.length ? /*#__PURE__*/jsx(CheckOutline, {
-                        color: colors.iconBrand
-                      }) : item?.children?.filter(e => selectedValueSet.has(e.id) && !e.isDisabled)?.length > 0 ? /*#__PURE__*/jsx(IndeterminateFilled, {
-                        children: "-"
-                      }) : null
-                    }), /*#__PURE__*/jsx(Item, {
-                      css: {
-                        backgroundColor: 'unset',
-                        width: '100%'
-                      },
-                      children: item.render ? item.render?.(item.name) : item.name
-                    })]
-                  }) :
-                  // Render regular item or child item
-                  renderOptionItem(item, virtualRow.index, type === 'child')
-                }, `${type}-${item.id}-${virtualRow.index}`);
+                      children: [/*#__PURE__*/jsx(IconWrapper, {
+                        css: {
+                          width: '16px',
+                          height: '16px',
+                          border: '1px solid $bgBorder',
+                          cursor: item.isDisabled ? 'not-allowed' : 'pointer',
+                          ...checkBoxCss
+                        },
+                        children: !item?.hideCheck && item.isDisabled ? /*#__PURE__*/jsx(CheckOutline, {
+                          color: colors.iconDisable
+                        }) : item?.children?.filter(e => selectedValueSet.has(e.id) && !e.isDisabled)?.length === item?.children?.filter(e => !e.isDisabled)?.length ? /*#__PURE__*/jsx(CheckOutline, {
+                          color: colors.iconBrand
+                        }) : item?.children?.filter(e => selectedValueSet.has(e.id) && !e.isDisabled)?.length > 0 ? /*#__PURE__*/jsx(IndeterminateFilled, {
+                          children: "-"
+                        }) : null
+                      }), /*#__PURE__*/jsx(Item, {
+                        css: {
+                          backgroundColor: 'unset',
+                          width: '100%'
+                        },
+                        children: item.render ? item.render?.(item.name) : item.name
+                      })]
+                    }) :
+                    // Render regular item or child item
+                    renderOptionItem(item, virtualRow.index, type === 'child')
+                  }, `${type}-${item.id}-${virtualRow.index}`);
+                })
               })
-            })
-          }) :
-          // Non-virtualized rendering for small lists
-          isOpen && items.map((item, index) => item?.children ? renderOptionGroupItem(item) : renderOptionItem(item, index))
-        })
-      }) : /*#__PURE__*/jsx(Option, {
-        css: {
-          height: 'auto'
-        },
-        ...getMenuProps({}, {
-          suppressRefError: true
-        }),
-        children: /*#__PURE__*/jsxs(StyledDiv, {
-          children: [/*#__PURE__*/jsx("div", {
-            style: {
-              marginRight: '6px'
-            },
-            children: /*#__PURE__*/jsx(CircleInfoOutline, {
-              size: "16px",
-              color: colors.iconDisable,
+            }) :
+            // Non-virtualized rendering for small lists
+            isOpen && items.map((item, index) => item?.children ? renderOptionGroupItem(item) : renderOptionItem(item, index))
+          })
+        }) : /*#__PURE__*/jsx(Option, {
+          css: {
+            height: 'auto'
+          },
+          ...getMenuProps({}, {
+            suppressRefError: true
+          }),
+          children: /*#__PURE__*/jsxs(StyledDiv, {
+            children: [/*#__PURE__*/jsx("div", {
               style: {
-                verticalAlign: 'text-bottom'
-              }
-            })
-          }), textEmptyItem ?? t('emptyItemText', 'Item tidak ditemukan')]
-        })
-      })]
+                marginRight: '6px'
+              },
+              children: /*#__PURE__*/jsx(CircleInfoOutline, {
+                size: "16px",
+                color: colors.iconDisable,
+                style: {
+                  verticalAlign: 'text-bottom'
+                }
+              })
+            }), textEmptyItem ?? t('emptyItemText', 'Item tidak ditemukan')]
+          })
+        })]
+      })
     })]
   });
 });

package/components/mapPicker/MapPicker.esm.js

@@ -34,7 +34,6 @@ function MapPicker(props) {
   const isDesktop = useMediaQuery('(min-width: 767px)');
   const {
     center,
-    setCenter,
     places,
     searchQuery,
     searchResult,
@@ -49,12 +48,15 @@ function MapPicker(props) {
     showSelectButton,
     onChange
   });
+  // Keyed on the coordinates, not the object: a parent re-rendering with a new but equal
+  // `value` must not pull the map back from where the user dragged it. handleSearchLatLng is
+  // left out because it changes with every new `onChange`, which InputMapPicker passes inline.
   useEffect(() => {
     if (value && (value === null || value === void 0 ? void 0 : value.lat) && (value === null || value === void 0 ? void 0 : value.lng)) {
-      setCenter(value);
       handleSearchLatLng(value);
     }
-  }, [value, setCenter]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value === null || value === void 0 ? void 0 : value.lat, value === null || value === void 0 ? void 0 : value.lng]);
   function handleMarkerClick() {
     if (places.length > 0) {
       const mapObject = {