@majoo-ui/react 2.2.0 → 2.3.0

package/components/mapPicker/hooks/useMapSearch.esm.js

@@ -82,7 +82,19 @@ function useMapSearch({
     }, abortControllerRef.current.signal);
     // getFullAddress returns null if aborted
     if (fullAddress) {
-      handleSelect(fullAddress);
+      // Keep the chosen item's coordinates; the reverse geocode only supplies the address.
+      const {
+        display_name,
+        place_id,
+        address
+      } = fullAddress;
+      handleSelect({
+        lat: item.lat,
+        lon: item.lon,
+        display_name,
+        place_id,
+        address
+      });
     }
   }), [getFullAddress, handleSelect]);
   const handleSearchLatLng = useCallback(latLng => __awaiter(this, void 0, void 0, function* () {
@@ -90,19 +102,26 @@ function useMapSearch({
     // Cancel any previous pending request
     (_b = abortControllerRef.current) === null || _b === void 0 ? void 0 : _b.abort();
     abortControllerRef.current = new AbortController();
+    // Move the center now, so a re-render while the address loads (or a failed lookup)
+    // does not send the map back to the previous point.
+    setCenter({
+      lat: Number(latLng.lat),
+      lng: Number(latLng.lng)
+    });
     const fullAddress = yield getFullAddress(latLng, abortControllerRef.current.signal);
     // getFullAddress returns null if aborted
     if (fullAddress) {
+      // Nominatim answers with the coordinates of the OSM object it matched (for a large
+      // polygon such as a golf course, its centroid), not the point that was asked about.
+      // Keep the requested point; the reverse geocode only supplies the address.
       const {
-        lat,
-        lon,
         display_name,
         place_id,
         address
       } = fullAddress;
       handleSelect({
-        lat,
-        lon,
+        lat: String(latLng.lat),
+        lon: String(latLng.lng),
         display_name,
         place_id,
         address

package/components/popover/Popover.esm.js

@@ -1,9 +1,10 @@
-import { useFloating, offset, shift, flip, useInteractions, useClick, useDismiss, FloatingFocusManager, FloatingPortal } from '@floating-ui/react';
+import { useFloating, autoUpdate, useInteractions, useClick, useDismiss, FloatingFocusManager, FloatingPortal } from '@floating-ui/react';
 import PropTypes from 'prop-types';
 import { useState, useEffect, useContext, cloneElement, createContext } from 'react';
 import Flex from '../../layout/flex/Flex.esm.js';
 import { foundations } from '@majoo-ui/core';
 import { ConditionalWrapper } from '../../wrapper/ConditionalWrapper.esm.js';
+import { createPopoverMiddleware } from './middleware.esm.js';
 import { jsx, Fragment } from 'react/jsx-runtime';
 
 const {
@@ -17,7 +18,7 @@ const Popover = ({
   placement,
   sideOffset = 5,
   hideOnScroll = false,
-  flip: flip$1 = true,
+  flip = true,
   onClose
 }) => {
   const [openState, setOpenState] = useState(false);
@@ -27,9 +28,17 @@ const Popover = ({
   useEffect(() => {
     if (onOpenChange) onOpenChange(openState);
   }, [openState, onOpenChange]);
+
+  // floating-ui measures the element PopoverContent renders, so its children must
+  // be in-flow (see createPopoverMiddleware). autoUpdate recomputes when content
+  // height changes after mount (async options, a menu toggling display).
   const floatingHook = useFloating({
     open: openState,
-    middleware: [offset(sideOffset), shift(), flip$1 && flip()],
+    whileElementsMounted: autoUpdate,
+    middleware: createPopoverMiddleware({
+      sideOffset,
+      flip
+    }),
     onOpenChange: isOpen => {
       setOpenState(isOpen);
       !isOpen && onClose?.();

package/components/popover/middleware.esm.js

@@ -0,0 +1,43 @@
+import { offset, flip, shift, size } from '@floating-ui/react';
+
+/**
+ * The floating-ui middleware every majoo-ui dropdown shares, so Popover and the
+ * components that drive floating-ui themselves (InputSelectCheck) place content
+ * the same way.
+ *
+ * - `flip` treats `placement` as a preference: the other side is used when the
+ *   preferred one lacks room.
+ * - `size` writes two CSS variables on the floating element, which consumers opt
+ *   into: `--majoo-popover-available-height` (room left on the chosen side) and
+ *   `--majoo-popover-reference-width` (width of the trigger).
+ *
+ * floating-ui measures the floating element itself, so its content must be
+ * in-flow — an all-absolute child measures 0px and flip/shift never fire.
+ */
+// Floor for the reported available height. Without it, flip and size lock each
+// other: a menu that opens while still `display: none` measures 0px, flip keeps a
+// side with almost no room, size reports ~0px, the menu's max-height collapses to
+// 0 and never changes size again — so autoUpdate never re-runs flip. With a floor
+// the box always has real height, flip moves it to the roomier side, and size then
+// grows it from there.
+const MIN_AVAILABLE_HEIGHT = 120;
+const createPopoverMiddleware = ({
+  sideOffset = 5,
+  flip: flip$1 = true
+} = {}) => [offset(sideOffset), flip$1 && flip({
+  padding: 8
+}), shift({
+  padding: 8
+}), size({
+  padding: 8,
+  apply({
+    availableHeight,
+    rects,
+    elements
+  }) {
+    elements.floating.style.setProperty('--majoo-popover-available-height', `${Math.max(MIN_AVAILABLE_HEIGHT, availableHeight)}px`);
+    elements.floating.style.setProperty('--majoo-popover-reference-width', `${rects.reference.width}px`);
+  }
+})].filter(Boolean);
+
+export { createPopoverMiddleware };

package/components/table/MobileTable.esm.js

@@ -18,7 +18,7 @@ import Text from '../text/Text.esm.js';
 import { ConditionalWrapper } from '../../wrapper/ConditionalWrapper.esm.js';
 import { ContextMenuTrigger } from '../contextMenu/ContextMenu.esm.js';
 import Paragraph from '../paragraph/Paragraph.esm.js';
-import { useTranslation } from 'react-i18next';
+import { defaultTableLocaleText } from './locale.esm.js';
 
 const TableContainer = styled(Flex, {
   position: 'relative',
@@ -88,12 +88,10 @@ const MobileTable = /*#__PURE__*/React__default.forwardRef(({
   footerData,
   footerColumnIds,
   headerRowSpan,
-  keyId = 'id'
+  keyId = 'id',
+  sortColumnTitle = defaultTableLocaleText.sortColumnTitle
 }, ref) => {
   var _a, _b, _c, _d;
-  const {
-    t
-  } = useTranslation('MajooUI/table');
   const {
     getTableProps,
     getTableBodyProps,
@@ -190,7 +188,7 @@ const MobileTable = /*#__PURE__*/React__default.forwardRef(({
             children: headerGroup.headers.filter((column, index) => filterMobileHeader(column, index)).map(column => {
               const headerRender = column.render('Header');
               return jsx(TableHeadCell, Object.assign({}, column.getHeaderProps(isHeaderSortable(column) ? column.getSortByToggleProps({
-                title: t('sortColumnTitle', 'Urutkan') || 'Urutkan'
+                title: sortColumnTitle
               }) : {
                 onClick: column.onToggle
               }), {

package/components/table/Table.esm.js

@@ -44,8 +44,8 @@ import { alignCss, headerAlignCss, resolveCellCss } from './utils/columnStyles.e
 import { footerValueOf } from './utils/footerValue.esm.js';
 import { HeaderTooltip } from './utils/HeaderTooltip.esm.js';
 import { isHeaderSortable, getAriaSort } from './utils/headerSort.esm.js';
+import { useTableLocaleText, i18nTableLocaleText } from './locale.esm.js';
 import { useSticky, getStickyValue, getMarginRight } from 'react-table-sticky';
-import { useTranslation } from 'react-i18next';
 import { useVirtual } from 'react-virtual';
 import { PlusPrimitive } from '@majoo-ui/icons';
 import '../scrollSync/ScrollSync.esm.js';
@@ -524,9 +524,9 @@ const formattingData = (rawData, rowGroup) => {
   }
   return rawData;
 };
-const defaultEmptyDataProps = (t, isMobile) => ({
+const emptyStateProps = (asset, title, description, isMobile) => ({
   doodleImage: jsx(TableEmptyStateDoodle, {
-    asset: "emptyData",
+    asset: asset,
     "aria-hidden": "true"
   }),
   title: jsx(Paragraph, {
@@ -536,48 +536,31 @@ const defaultEmptyDataProps = (t, isMobile) => ({
     css: {
       marginTop: isMobile ? 0 : '$spacing-05'
     },
-    children: t('dataNotAvailableTitle', 'Data tidak tersedia')
+    children: title
   }),
-  description: !isMobile ? jsxs(Paragraph, {
+  description: !isMobile ? jsx(Paragraph, {
     paragraph: "shortContentRegular",
     color: "secondary",
     align: "center",
-    children: [t('dataNotAvailableDescription_1', 'Belum ada data yang dapat ditampilkan'), ' ', t('dataNotAvailableDescription_2', 'di halaman ini')]
-  }) : jsxs(Text, {
+    children: description
+  }) : jsx(Text, {
     variant: "caption",
     color: "secondary",
     align: "center",
-    children: [t('dataNotAvailableDescription_1', 'Belum ada data yang dapat ditampilkan'), jsx("br", {}), t('dataNotAvailableDescription_2', 'di halaman ini')]
-  })
-});
-const defaultEmptySearchProps = (t, isMobile, query) => ({
-  doodleImage: jsx(TableEmptyStateDoodle, {
-    asset: "emptySearchData",
-    "aria-hidden": "true"
-  }),
-  title: jsx(Paragraph, {
-    paragraph: "shortContentBold",
-    color: "primary",
-    align: "center",
-    css: {
-      marginTop: isMobile ? 0 : '$spacing-05'
-    },
-    children: t('dataNotAvailableTitleSearch', `Oops... ${query} tidak ditemukan`, {
-      query
-    })
-  }),
-  description: !isMobile ? jsxs(Paragraph, {
-    paragraph: "shortContentRegular",
-    color: "secondary",
-    align: "center",
-    children: [t('dataNotAvailableDescriptionSearch_1', 'Coba lagi dengan memasukkan'), ' ', t('dataNotAvailableDescriptionSearch_2', 'kata kunci yang tepat')]
-  }) : jsxs(Text, {
-    variant: "caption",
-    color: "secondary",
-    align: "center",
-    children: [t('dataNotAvailableDescriptionSearch_1', 'Coba lagi dengan memasukkan'), jsx("br", {}), t('dataNotAvailableDescriptionSearch_2', 'kata kunci yang tepat')]
+    children: description
   })
 });
+/**
+ * Builds the default empty state from resolved table texts.
+ * Passing an i18next `t` function as the first argument is deprecated.
+ */
+const defaultEmptyDataProps = (localeText, isMobile) => {
+  const text = typeof localeText === 'function' ? i18nTableLocaleText(localeText) : localeText;
+  return emptyStateProps('emptyData', text.emptyDataTitle, text.emptyDataDescription, isMobile);
+};
+const defaultEmptySearchProps = (localeText, isMobile, query) => emptyStateProps('emptySearchData', localeText.emptySearchTitle({
+  query
+}), localeText.emptySearchDescription, isMobile);
 function HeaderMenuOption(props) {
   const {
     open,
@@ -587,7 +570,8 @@ function HeaderMenuOption(props) {
     headerGroups,
     id,
     filterHeader: items,
-    rowData
+    rowData,
+    title
   } = props;
   const {
     headers = []
@@ -601,7 +585,7 @@ function HeaderMenuOption(props) {
         asChild: true,
         children: children
       }), jsx(ModalDialogTitle, {
-        children: "Tampilkan Kolom"
+        children: title
       }), jsx(ModalDialogContent, {
         css: {
           overflowY: visibleHeaders.filter(val => typeof val.Header === 'string').length > 8 ? 'scroll' : 'none'
@@ -710,8 +694,9 @@ function Table({
   fetchData,
   hideDataInfo = false,
   rowsPerPageOptions = [10, 25, 50, 100],
-  emptyDataMessage = 'Tidak ada data',
+  localeText,
   customEmptyDataProps: emptyDataProps,
+  customEmptySearchProps: emptySearchProps,
   isLoading = false,
   css,
   headerCss,
@@ -766,11 +751,11 @@ function Table({
   const [filteredHeader, setFilteredHeader] = useState([]);
   const [hasDarkParent, setHasDarkParent] = useState(false);
   const [hoveredRowId, setHoveredRowId] = useState(null);
-  const {
-    t
-  } = useTranslation('MajooUI/table');
+  const tableLocaleText = useTableLocaleText(paginationLabel && {
+    pagination: paginationLabel
+  }, localeText);
   const isMobile = useMediaQuery(isMobileLayout === undefined ? '(max-width: 1024px)' : isMobileLayout ? '(max-width: 8000px)' : '(max-width: 0px)');
-  const customEmptyDataProps = searchQuery ? defaultEmptySearchProps(t, isMobile, searchQuery) : emptyDataProps || defaultEmptyDataProps(t, isMobile);
+  const customEmptyDataProps = searchQuery ? emptySearchProps || defaultEmptySearchProps(tableLocaleText, isMobile, searchQuery) : emptyDataProps || defaultEmptyDataProps(tableLocaleText, isMobile);
   const getInitialState = () => {
     const initialState = {};
     if (fetchData) {
@@ -903,56 +888,37 @@ function Table({
     });
     if (fetchData) fetchData(fetchParams);
   };
-  const renderFooter = () => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-    return jsx(Pagination, {
-      hidePagination: hidePagination || isExpandableTree,
-      hideInputPageSection: false,
-      limit: pageSize,
-      currentPage: pageIndex + 1,
-      totalData: totalData,
-      totalPage: totalPage,
-      onLimitChange: selectedItem => {
-        if (selectedItem) {
-          // always reset page when limit changed
-          gotoPage(0);
-          doFetchData(0, selectedItem);
-          setPageSize(selectedItem);
-          setLimit(selectedItem);
-        }
-      },
-      hideDataInfo: hideDataInfo || isExpandableTree,
-      onPageChange: page => {
-        doFetchData(page - 1, pageSize);
-        gotoPage(page - 1);
-      },
-      rowsPerPageOptions: rowsPerPageOptions,
-      showingText: (_a = paginationLabel === null || paginationLabel === void 0 ? void 0 : paginationLabel.showingText) !== null && _a !== void 0 ? _a : t('pagination.showingText', 'Tampilkan:'),
-      showingCountText: (_b = paginationLabel === null || paginationLabel === void 0 ? void 0 : paginationLabel.showingCountText) !== null && _b !== void 0 ? _b : ({
-        from,
-        to,
-        total
-      }) => t('pagination.showingCountText', `Ditampilkan ${from} - ${to} dari ${total} data`, {
-        from,
-        to,
-        total
-      }),
-      dialogShowingText: (_c = paginationLabel === null || paginationLabel === void 0 ? void 0 : paginationLabel.dialogShowingText) !== null && _c !== void 0 ? _c : t('pagination.dialogShowingText', 'Tampilkan Data'),
-      previousButton: (_d = paginationLabel === null || paginationLabel === void 0 ? void 0 : paginationLabel.previousButton) !== null && _d !== void 0 ? _d : t('pagination.previousButton', 'Sebelumnya'),
-      nextButton: (_e = paginationLabel === null || paginationLabel === void 0 ? void 0 : paginationLabel.nextButton) !== null && _e !== void 0 ? _e : t('pagination.nextButton', 'Selanjutnya'),
-      gotoPageText: (_f = paginationLabel === null || paginationLabel === void 0 ? void 0 : paginationLabel.gotoPageText) !== null && _f !== void 0 ? _f : t('pagination.gotoPageText', 'Ke Halaman'),
-      goToPagePlaceholder: (_g = paginationLabel === null || paginationLabel === void 0 ? void 0 : paginationLabel.goToPagePlaceholder) !== null && _g !== void 0 ? _g : t('pagination.goToPagePlaceholder', 'Contoh: 10'),
-      btnCancelText: (_h = paginationLabel === null || paginationLabel === void 0 ? void 0 : paginationLabel.btnCancelText) !== null && _h !== void 0 ? _h : t('pagination.btnCancelText', 'Batal'),
-      btnSubmitText: (_j = paginationLabel === null || paginationLabel === void 0 ? void 0 : paginationLabel.btnSubmitText) !== null && _j !== void 0 ? _j : t('pagination.btnSubmitText', 'Lanjutkan'),
-      css: {
-        backgroundColor: '$bgWhite',
-        padding: '$spacing-04 0',
-        '@md': {
-          padding: '$spacing-06 $spacing-03'
-        }
+  const renderFooter = () => jsx(Pagination, Object.assign({
+    hidePagination: hidePagination || isExpandableTree,
+    hideInputPageSection: false,
+    limit: pageSize,
+    currentPage: pageIndex + 1,
+    totalData: totalData,
+    totalPage: totalPage,
+    onLimitChange: selectedItem => {
+      if (selectedItem) {
+        // always reset page when limit changed
+        gotoPage(0);
+        doFetchData(0, selectedItem);
+        setPageSize(selectedItem);
+        setLimit(selectedItem);
       }
-    });
-  };
+    },
+    hideDataInfo: hideDataInfo || isExpandableTree,
+    onPageChange: page => {
+      doFetchData(page - 1, pageSize);
+      gotoPage(page - 1);
+    },
+    rowsPerPageOptions: rowsPerPageOptions
+  }, tableLocaleText.pagination, {
+    css: {
+      backgroundColor: '$bgWhite',
+      padding: '$spacing-04 0',
+      '@md': {
+        padding: '$spacing-06 $spacing-03'
+      }
+    }
+  }));
   const renderInfiniteScrollWrapper = children => jsx(ConditionalWrapper, {
     condition: isInfiniteScroll && rawData.length > 0,
     wrapper: children => jsx(InfiniteScroll, {
@@ -1059,7 +1025,7 @@ function Table({
             children: visibleHeaders.map((column, index) => {
               const headerRender = column.render('Header');
               return jsx(TableHeadCell, Object.assign({}, column.getHeaderProps(props => [props, isHeaderSortable(column) ? column.getSortByToggleProps({
-                title: t('sortColumnTitle', 'Urutkan') || 'Urutkan'
+                title: tableLocaleText.sortColumnTitle
               }) : {
                 onClick: column.onToggle
               }, {
@@ -1303,7 +1269,7 @@ function Table({
                       }, index) => {
                         const headerRender = column.render('Header');
                         return jsx(TableHeadCell, Object.assign({}, column.getHeaderProps(props => [props, isHeaderSortable(column) ? column.getSortByToggleProps({
-                          title: t('sortColumnTitle', 'Urutkan') || 'Urutkan'
+                          title: tableLocaleText.sortColumnTitle
                         }) : {
                           onClick: column.onToggle
                         }, {
@@ -1621,6 +1587,7 @@ function Table({
             onChange: handleFilterHeaderChange,
             headerGroups: headerGroups,
             filterHeader: filterHeader,
+            title: tableLocaleText.showColumnTitle,
             children: jsx(IconButton, {
               css: {
                 zIndex: '$docked',
@@ -1695,7 +1662,8 @@ function Table({
       footerData: footerData,
       footerColumnIds: (footerData === null || footerData === void 0 ? void 0 : footerData.length) ? new Set(visibleColumns.filter(column => column.Footer !== emptyRenderer).map(column => column.id)) : undefined,
       headerRowSpan: headerRowSpan,
-      keyId: keyId
+      keyId: keyId,
+      sortColumnTitle: tableLocaleText.sortColumnTitle
     })]
   });
 }

package/components/table/components/columns/RowMenuColumn.esm.js

@@ -3,7 +3,6 @@ import 'core-js/modules/es.iterator.map.js';
 import React__default, { useState } from 'react';
 import { EllipsisHorizontalOutline } from '@majoo-ui/icons';
 import Box from '../../../../layout/box/Box.esm.js';
-import { useTranslation } from 'react-i18next';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { DropdownMenu, DropdownMenuTrigger, DropdownMenuPortal, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator } from '../../../dropdownMenu/DropdownMenu.esm.js';
 import IconButton from '../../../iconButton/IconButton.esm.js';
@@ -13,11 +12,7 @@ const rowMenuColumn = (options, icon, config) => ({
   options,
   Header: () => null,
   Cell: props => {
-    const {
-      t
-    } = useTranslation('MajooUI/table');
     const defaultConfig = {
-      mobileTitle: t('rowMenuMobileLabel', 'Aksi'),
       cssContent: {},
       cssMenuItem: {},
       align: 'end'

package/components/table/locale.esm.js

@@ -0,0 +1,91 @@
+import 'core-js/modules/es.iterator.constructor.js';
+import 'core-js/modules/es.iterator.filter.js';
+import 'core-js/modules/es.iterator.reduce.js';
+import { useContext, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { LocaleTextContext } from '../../config/locale/LocaleTextContext.esm.js';
+
+const defaultTableLocaleText = {
+  sortColumnTitle: 'Urutkan',
+  showColumnTitle: 'Tampilkan Kolom',
+  emptyDataTitle: 'Data tidak tersedia',
+  emptyDataDescription: 'Belum ada data yang dapat ditampilkan di halaman ini',
+  emptySearchTitle: ({
+    query
+  }) => `Oops... ${query} tidak ditemukan`,
+  emptySearchDescription: 'Coba lagi dengan memasukkan kata kunci yang tepat',
+  pagination: {
+    showingText: 'Tampilkan:',
+    showingCountText: ({
+      from,
+      to,
+      total
+    }) => `Ditampilkan ${from} - ${to} dari ${total} data`,
+    dialogShowingText: 'Tampilkan Data',
+    previousButton: 'Sebelumnya',
+    nextButton: 'Selanjutnya',
+    gotoPageText: 'Ke Halaman',
+    goToPagePlaceholder: 'Contoh: 10',
+    btnCancelText: 'Batal',
+    btnSubmitText: 'Lanjutkan'
+  }
+};
+// Transitional: keeps apps that still ship `MajooUI/table` locale files translated until they pass
+// `localeText`. Remove together with the react-i18next dependency of the table family.
+const i18nTableLocaleText = t => {
+  const d = defaultTableLocaleText;
+  return {
+    sortColumnTitle: t('sortColumnTitle', d.sortColumnTitle),
+    showColumnTitle: t('customColumnTitle', d.showColumnTitle),
+    emptyDataTitle: t('dataNotAvailableTitle', d.emptyDataTitle),
+    emptyDataDescription: `${t('dataNotAvailableDescription_1', 'Belum ada data yang dapat ditampilkan')} ${t('dataNotAvailableDescription_2', 'di halaman ini')}`,
+    emptySearchTitle: ({
+      query
+    }) => t('dataNotAvailableTitleSearch', `Oops... ${query} tidak ditemukan`, {
+      query
+    }),
+    emptySearchDescription: `${t('dataNotAvailableDescriptionSearch_1', 'Coba lagi dengan memasukkan')} ${t('dataNotAvailableDescriptionSearch_2', 'kata kunci yang tepat')}`,
+    pagination: {
+      showingText: t('pagination.showingText', d.pagination.showingText),
+      showingCountText: ({
+        from,
+        to,
+        total
+      }) => t('pagination.showingCountText', `Ditampilkan ${from} - ${to} dari ${total} data`, {
+        from,
+        to,
+        total
+      }),
+      dialogShowingText: t('pagination.dialogShowingText', d.pagination.dialogShowingText),
+      previousButton: t('pagination.previousButton', d.pagination.previousButton),
+      nextButton: t('pagination.nextButton', d.pagination.nextButton),
+      gotoPageText: t('pagination.gotoPageText', d.pagination.gotoPageText),
+      goToPagePlaceholder: t('pagination.goToPagePlaceholder', d.pagination.goToPagePlaceholder),
+      btnCancelText: t('pagination.btnCancelText', d.pagination.btnCancelText),
+      btnSubmitText: t('pagination.btnSubmitText', d.pagination.btnSubmitText)
+    }
+  };
+};
+const definedEntries = obj => obj ? Object.fromEntries(Object.entries(obj).filter(([, value]) => value !== undefined)) : {};
+/** Later sources win; an `undefined` value never erases an earlier one. */
+const mergeTableLocaleText = (base, ...overrides) => overrides.reduce((merged, override) => Object.assign(Object.assign(Object.assign({}, merged), definedEntries(override)), {
+  pagination: Object.assign(Object.assign({}, merged.pagination), definedEntries(override === null || override === void 0 ? void 0 : override.pagination))
+}), base);
+/**
+ * Resolves the table texts. Precedence: the table's own `localeText`, then `MajooProvider`'s
+ * `localeText.table`, then the app's `MajooUI/table` translations, then the Indonesian defaults.
+ * Several table-level overrides may be passed; later ones win. Pass the same number on every render.
+ */
+const useTableLocaleText = (...localeTexts) => {
+  const {
+    t
+  } = useTranslation('MajooUI/table');
+  const {
+    table: appLocaleText
+  } = useContext(LocaleTextContext);
+  return useMemo(() => mergeTableLocaleText(i18nTableLocaleText(t), appLocaleText, ...localeTexts),
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [t, appLocaleText, ...localeTexts]);
+};
+
+export { defaultTableLocaleText, i18nTableLocaleText, mergeTableLocaleText, useTableLocaleText };

package/config/locale/LocaleTextContext.esm.js

@@ -0,0 +1,5 @@
+import * as React from 'react';
+
+const LocaleTextContext = /*#__PURE__*/React.createContext({});
+
+export { LocaleTextContext };

package/index.esm.css

@@ -1,7 +1,3 @@
-.recharts-pie-sector {
-  outline: none;
-}
-
 .rdw-option-wrapper {
   padding: 5px;
   min-width: 25px;
@@ -1293,3 +1289,7 @@
     height: 24px;
   }
 }
+
+.recharts-pie-sector {
+  outline: none;
+}

package/index.esm.js

@@ -42,6 +42,7 @@ export { NativeTimePicker, TimePicker } from './components/datePicker/timePicker
 export { InputTimePicker } from './components/datePicker/timePicker/InputTimePicker.esm.js';
 export { DatePickerMulti } from './components/datePicker/DatePickerMulti.esm.js';
 export { Cell, Table, TableBody, TableCell, TableColumn, TableContent, TableFoot, TableFootCell, TableFootRow, TableHead, TableHeadCellContent, TableHeaderCellContainer, TableRow, addOnCellStyle, defaultEmptyDataProps, defaultFetchDataParams } from './components/table/Table.esm.js';
+export { defaultTableLocaleText } from './components/table/locale.esm.js';
 export { default as MobileTable } from './components/table/MobileTable.esm.js';
 export { PageDialog, PageDialogContent, PageDialogFooter, PageDialogTitle, PageDialogTrigger } from './components/pageDialog/PageDialog.esm.js';
 export { default as DevicePreview, ImageDevicePreview } from './components/devicePreview/DevicePreview.esm.js';

package/majoo-provider/MajooProvider.esm.js

@@ -5,14 +5,17 @@ import { theme } from '../config/stitches.config.esm.js';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import moment from 'moment';
+import { LocaleTextContext } from '../config/locale/LocaleTextContext.esm.js';
 import { jsx } from 'react/jsx-runtime';
 
+const EMPTY_LOCALE_TEXT = {};
 function MajooProvider({
   children,
   name,
   theme: theme$1 = theme,
   extendStyle,
-  disableGlobalStyle
+  disableGlobalStyle,
+  localeText = EMPTY_LOCALE_TEXT
 }) {
   !disableGlobalStyle && applyGlobalStyles(extendStyle, theme$1);
   const {
@@ -22,7 +25,10 @@ function MajooProvider({
   return /*#__PURE__*/jsx(ThemeProvider, {
     name: name,
     theme: theme$1,
-    children: children
+    children: /*#__PURE__*/jsx(LocaleTextContext.Provider, {
+      value: localeText,
+      children: children
+    })
   });
 }
 MajooProvider.propTypes = {
@@ -30,7 +36,14 @@ MajooProvider.propTypes = {
   theme: PropTypes.object.isRequired,
   children: PropTypes.node.isRequired,
   extendStyle: PropTypes.object,
-  disableGlobalStyle: PropTypes.bool
+  disableGlobalStyle: PropTypes.bool,
+  /**
+   * Component texts for the whole app, e.g. `{ table: { emptyDataTitle: 'No data' } }`.
+   * Memoize it: every new object re-renders all components that read it.
+   */
+  localeText: PropTypes.shape({
+    table: PropTypes.object
+  })
 };
 MajooProvider.defaultProps = {
   name: 'default',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@majoo-ui/react",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "main": "./index.esm.js",
   "sideEffects": [
     "*.css",
@@ -37,7 +37,7 @@
     "@floating-ui/react": "^0.19.2",
     "@majoo-ui/core": "1.32.0",
     "@majoo-ui/helpers": "1.30.9",
-    "@majoo-ui/icons": "1.40.3",
+    "@majoo-ui/icons": "1.40.4",
     "@monsonjeremy/react-leaflet": "^3.2.2",
     "@radix-ui/react-accordion": "^1.0.0",
     "@radix-ui/react-alert-dialog": "^1.0.3",

package/src/components/editableTable/EditableMobile.d.ts

@@ -18,6 +18,7 @@ interface EditableMobileProps<Data extends object> {
     hiddenColumns?: string[];
     customEmptyDataProps?: EmptyDataProps;
     virtualized?: boolean;
+    sortColumnTitle?: string;
 }
 export default function EditableTableMobile(props: EditableMobileProps<any>): JSX.Element;
 export {};