@majoo-ui/react 2.2.1 → 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

@@ -437,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());
@@ -532,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;
     }

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,252 +1,3 @@
-.recharts-pie-sector {
-  outline: none;
-}
-
-.ReactCrop {
-  position: relative;
-  display: inline-block;
-  cursor: crosshair;
-  overflow: hidden;
-  max-width: 100%;
-}
-.ReactCrop *,
-.ReactCrop *::before,
-.ReactCrop *::after {
-  box-sizing: border-box;
-}
-.ReactCrop--disabled,
-.ReactCrop--locked {
-  cursor: inherit;
-}
-.ReactCrop__child-wrapper {
-  max-height: inherit;
-}
-.ReactCrop__child-wrapper > img,
-.ReactCrop__child-wrapper > video {
-  display: block;
-  max-width: 100%;
-  max-height: inherit;
-  touch-action: none;
-}
-.ReactCrop__crop-selection {
-  position: absolute;
-  top: 0;
-  left: 0;
-  transform: translate3d(0, 0, 0);
-  cursor: move;
-  box-shadow: 0 0 0 9999em rgba(0, 0, 0, 0.5);
-  touch-action: none;
-  border: 1px dashed #fff;
-}
-.ReactCrop--disabled .ReactCrop__crop-selection {
-  cursor: inherit;
-}
-.ReactCrop--circular-crop .ReactCrop__crop-selection {
-  border-radius: 50%;
-  box-shadow: 0px 0px 1px 1px #fff, 0 0 0 9999em rgba(0, 0, 0, 0.5);
-}
-.ReactCrop__crop-selection:focus {
-  outline: none;
-  border-color: blue;
-  border-style: solid;
-}
-.ReactCrop--invisible-crop .ReactCrop__crop-selection {
-  display: none;
-}
-.ReactCrop__rule-of-thirds-vt::before,
-.ReactCrop__rule-of-thirds-vt::after,
-.ReactCrop__rule-of-thirds-hz::before,
-.ReactCrop__rule-of-thirds-hz::after {
-  content: '';
-  display: block;
-  position: absolute;
-  background-color: rgba(255, 255, 255, 0.4);
-}
-.ReactCrop__rule-of-thirds-vt::before,
-.ReactCrop__rule-of-thirds-vt::after {
-  width: 1px;
-  height: 100%;
-}
-.ReactCrop__rule-of-thirds-vt::before {
-  left: 33.3333%;
-  left: 33.3333333333%;
-}
-.ReactCrop__rule-of-thirds-vt::after {
-  left: 66.6666%;
-  left: 66.6666666667%;
-}
-.ReactCrop__rule-of-thirds-hz::before,
-.ReactCrop__rule-of-thirds-hz::after {
-  width: 100%;
-  height: 1px;
-}
-.ReactCrop__rule-of-thirds-hz::before {
-  top: 33.3333%;
-  top: 33.3333333333%;
-}
-.ReactCrop__rule-of-thirds-hz::after {
-  top: 66.6666%;
-  top: 66.6666666667%;
-}
-.ReactCrop__drag-handle {
-  position: absolute;
-}
-.ReactCrop__drag-handle::after {
-  position: absolute;
-  content: '';
-  display: block;
-  width: 10px;
-  height: 10px;
-  background-color: rgba(0, 0, 0, 0.2);
-  border: 1px solid rgba(255, 255, 255, 0.7);
-  outline: 1px solid rgba(0, 0, 0, 0);
-}
-.ReactCrop__drag-handle:focus::after {
-  border-color: blue;
-  background: #2dbfff;
-}
-.ReactCrop .ord-nw {
-  top: 0;
-  left: 0;
-  margin-top: -5px;
-  margin-left: -5px;
-  cursor: nw-resize;
-}
-.ReactCrop .ord-nw::after {
-  top: 0;
-  left: 0;
-}
-.ReactCrop .ord-n {
-  top: 0;
-  left: 50%;
-  margin-top: -5px;
-  margin-left: -5px;
-  cursor: n-resize;
-}
-.ReactCrop .ord-n::after {
-  top: 0;
-}
-.ReactCrop .ord-ne {
-  top: 0;
-  right: 0;
-  margin-top: -5px;
-  margin-right: -5px;
-  cursor: ne-resize;
-}
-.ReactCrop .ord-ne::after {
-  top: 0;
-  right: 0;
-}
-.ReactCrop .ord-e {
-  top: 50%;
-  right: 0;
-  margin-top: -5px;
-  margin-right: -5px;
-  cursor: e-resize;
-}
-.ReactCrop .ord-e::after {
-  right: 0;
-}
-.ReactCrop .ord-se {
-  bottom: 0;
-  right: 0;
-  margin-bottom: -5px;
-  margin-right: -5px;
-  cursor: se-resize;
-}
-.ReactCrop .ord-se::after {
-  bottom: 0;
-  right: 0;
-}
-.ReactCrop .ord-s {
-  bottom: 0;
-  left: 50%;
-  margin-bottom: -5px;
-  margin-left: -5px;
-  cursor: s-resize;
-}
-.ReactCrop .ord-s::after {
-  bottom: 0;
-}
-.ReactCrop .ord-sw {
-  bottom: 0;
-  left: 0;
-  margin-bottom: -5px;
-  margin-left: -5px;
-  cursor: sw-resize;
-}
-.ReactCrop .ord-sw::after {
-  bottom: 0;
-  left: 0;
-}
-.ReactCrop .ord-w {
-  top: 50%;
-  left: 0;
-  margin-top: -5px;
-  margin-left: -5px;
-  cursor: w-resize;
-}
-.ReactCrop .ord-w::after {
-  left: 0;
-}
-.ReactCrop__disabled .ReactCrop__drag-handle {
-  cursor: inherit;
-}
-.ReactCrop__drag-bar {
-  position: absolute;
-}
-.ReactCrop__drag-bar.ord-n {
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 6px;
-  margin-top: -3px;
-}
-.ReactCrop__drag-bar.ord-e {
-  right: 0;
-  top: 0;
-  width: 6px;
-  height: 100%;
-  margin-right: -3px;
-}
-.ReactCrop__drag-bar.ord-s {
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 6px;
-  margin-bottom: -3px;
-}
-.ReactCrop__drag-bar.ord-w {
-  top: 0;
-  left: 0;
-  width: 6px;
-  height: 100%;
-  margin-left: -3px;
-}
-.ReactCrop--new-crop .ReactCrop__drag-bar,
-.ReactCrop--new-crop .ReactCrop__drag-handle,
-.ReactCrop--fixed-aspect .ReactCrop__drag-bar {
-  display: none;
-}
-.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-n,
-.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-e,
-.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-s,
-.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-w {
-  display: none;
-}
-@media (pointer: coarse) {
-  .ReactCrop .ord-n,
-  .ReactCrop .ord-e,
-  .ReactCrop .ord-s,
-  .ReactCrop .ord-w {
-    display: none;
-  }
-  .ReactCrop__drag-handle {
-    width: 24px;
-    height: 24px;
-  }
-}
-
 .rdw-option-wrapper {
   padding: 5px;
   min-width: 25px;
@@ -1293,3 +1044,252 @@
 .public-DraftStyleDefault-depth4.public-DraftStyleDefault-reset {
   counter-reset: ol4;
 }
+
+.ReactCrop {
+  position: relative;
+  display: inline-block;
+  cursor: crosshair;
+  overflow: hidden;
+  max-width: 100%;
+}
+.ReactCrop *,
+.ReactCrop *::before,
+.ReactCrop *::after {
+  box-sizing: border-box;
+}
+.ReactCrop--disabled,
+.ReactCrop--locked {
+  cursor: inherit;
+}
+.ReactCrop__child-wrapper {
+  max-height: inherit;
+}
+.ReactCrop__child-wrapper > img,
+.ReactCrop__child-wrapper > video {
+  display: block;
+  max-width: 100%;
+  max-height: inherit;
+  touch-action: none;
+}
+.ReactCrop__crop-selection {
+  position: absolute;
+  top: 0;
+  left: 0;
+  transform: translate3d(0, 0, 0);
+  cursor: move;
+  box-shadow: 0 0 0 9999em rgba(0, 0, 0, 0.5);
+  touch-action: none;
+  border: 1px dashed #fff;
+}
+.ReactCrop--disabled .ReactCrop__crop-selection {
+  cursor: inherit;
+}
+.ReactCrop--circular-crop .ReactCrop__crop-selection {
+  border-radius: 50%;
+  box-shadow: 0px 0px 1px 1px #fff, 0 0 0 9999em rgba(0, 0, 0, 0.5);
+}
+.ReactCrop__crop-selection:focus {
+  outline: none;
+  border-color: blue;
+  border-style: solid;
+}
+.ReactCrop--invisible-crop .ReactCrop__crop-selection {
+  display: none;
+}
+.ReactCrop__rule-of-thirds-vt::before,
+.ReactCrop__rule-of-thirds-vt::after,
+.ReactCrop__rule-of-thirds-hz::before,
+.ReactCrop__rule-of-thirds-hz::after {
+  content: '';
+  display: block;
+  position: absolute;
+  background-color: rgba(255, 255, 255, 0.4);
+}
+.ReactCrop__rule-of-thirds-vt::before,
+.ReactCrop__rule-of-thirds-vt::after {
+  width: 1px;
+  height: 100%;
+}
+.ReactCrop__rule-of-thirds-vt::before {
+  left: 33.3333%;
+  left: 33.3333333333%;
+}
+.ReactCrop__rule-of-thirds-vt::after {
+  left: 66.6666%;
+  left: 66.6666666667%;
+}
+.ReactCrop__rule-of-thirds-hz::before,
+.ReactCrop__rule-of-thirds-hz::after {
+  width: 100%;
+  height: 1px;
+}
+.ReactCrop__rule-of-thirds-hz::before {
+  top: 33.3333%;
+  top: 33.3333333333%;
+}
+.ReactCrop__rule-of-thirds-hz::after {
+  top: 66.6666%;
+  top: 66.6666666667%;
+}
+.ReactCrop__drag-handle {
+  position: absolute;
+}
+.ReactCrop__drag-handle::after {
+  position: absolute;
+  content: '';
+  display: block;
+  width: 10px;
+  height: 10px;
+  background-color: rgba(0, 0, 0, 0.2);
+  border: 1px solid rgba(255, 255, 255, 0.7);
+  outline: 1px solid rgba(0, 0, 0, 0);
+}
+.ReactCrop__drag-handle:focus::after {
+  border-color: blue;
+  background: #2dbfff;
+}
+.ReactCrop .ord-nw {
+  top: 0;
+  left: 0;
+  margin-top: -5px;
+  margin-left: -5px;
+  cursor: nw-resize;
+}
+.ReactCrop .ord-nw::after {
+  top: 0;
+  left: 0;
+}
+.ReactCrop .ord-n {
+  top: 0;
+  left: 50%;
+  margin-top: -5px;
+  margin-left: -5px;
+  cursor: n-resize;
+}
+.ReactCrop .ord-n::after {
+  top: 0;
+}
+.ReactCrop .ord-ne {
+  top: 0;
+  right: 0;
+  margin-top: -5px;
+  margin-right: -5px;
+  cursor: ne-resize;
+}
+.ReactCrop .ord-ne::after {
+  top: 0;
+  right: 0;
+}
+.ReactCrop .ord-e {
+  top: 50%;
+  right: 0;
+  margin-top: -5px;
+  margin-right: -5px;
+  cursor: e-resize;
+}
+.ReactCrop .ord-e::after {
+  right: 0;
+}
+.ReactCrop .ord-se {
+  bottom: 0;
+  right: 0;
+  margin-bottom: -5px;
+  margin-right: -5px;
+  cursor: se-resize;
+}
+.ReactCrop .ord-se::after {
+  bottom: 0;
+  right: 0;
+}
+.ReactCrop .ord-s {
+  bottom: 0;
+  left: 50%;
+  margin-bottom: -5px;
+  margin-left: -5px;
+  cursor: s-resize;
+}
+.ReactCrop .ord-s::after {
+  bottom: 0;
+}
+.ReactCrop .ord-sw {
+  bottom: 0;
+  left: 0;
+  margin-bottom: -5px;
+  margin-left: -5px;
+  cursor: sw-resize;
+}
+.ReactCrop .ord-sw::after {
+  bottom: 0;
+  left: 0;
+}
+.ReactCrop .ord-w {
+  top: 50%;
+  left: 0;
+  margin-top: -5px;
+  margin-left: -5px;
+  cursor: w-resize;
+}
+.ReactCrop .ord-w::after {
+  left: 0;
+}
+.ReactCrop__disabled .ReactCrop__drag-handle {
+  cursor: inherit;
+}
+.ReactCrop__drag-bar {
+  position: absolute;
+}
+.ReactCrop__drag-bar.ord-n {
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 6px;
+  margin-top: -3px;
+}
+.ReactCrop__drag-bar.ord-e {
+  right: 0;
+  top: 0;
+  width: 6px;
+  height: 100%;
+  margin-right: -3px;
+}
+.ReactCrop__drag-bar.ord-s {
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 6px;
+  margin-bottom: -3px;
+}
+.ReactCrop__drag-bar.ord-w {
+  top: 0;
+  left: 0;
+  width: 6px;
+  height: 100%;
+  margin-left: -3px;
+}
+.ReactCrop--new-crop .ReactCrop__drag-bar,
+.ReactCrop--new-crop .ReactCrop__drag-handle,
+.ReactCrop--fixed-aspect .ReactCrop__drag-bar {
+  display: none;
+}
+.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-n,
+.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-e,
+.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-s,
+.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-w {
+  display: none;
+}
+@media (pointer: coarse) {
+  .ReactCrop .ord-n,
+  .ReactCrop .ord-e,
+  .ReactCrop .ord-s,
+  .ReactCrop .ord-w {
+    display: none;
+  }
+  .ReactCrop__drag-handle {
+    width: 24px;
+    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.1",
+  "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 {};

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

@@ -2,6 +2,7 @@ import React from 'react';
 import { Column, Row, SortingRule } from 'react-table';
 import { CSS } from '../../config/stitches.config';
 import { EmptyDataProps } from '../table/Table';
+import { TableLocaleText } from '../table/locale';
 interface CustomRows {
     predicate: boolean;
     css?: CSS;
@@ -88,6 +89,11 @@ interface EditableTableProps<Data extends object> {
      * Sort by changes callback
      */
     onSortByChange?: (sortBy: SortingRule<object>[]) => void;
+    /**
+     * Texts of this table, same as `Table`'s `localeText`. Only `sortColumnTitle`, `emptyDataTitle`
+     * and `emptyDataDescription` apply.
+     */
+    localeText?: Partial<TableLocaleText>;
 }
 interface RemoveProps {
     position?: 'leftBottom' | 'rightBottom' | 'leftTop' | 'rightTop';
@@ -160,9 +166,7 @@ declare namespace EditableTable {
         }) => {
             marginBottom: {
                 readonly [$$ScaleValue]: "space";
-            }; /**
-             * Additional height of the rows.
-             */
+            };
         };
         ml: (value: {
             readonly [$$ScaleValue]: "space";
@@ -194,9 +198,6 @@ declare namespace EditableTable {
         size: (value: {
             readonly [$$PropertyValue]: "width";
         }) => {
-            /**
-             * Change event handler table selection.
-             */
             width: {
                 readonly [$$PropertyValue]: "width";
             };
@@ -273,9 +274,7 @@ declare namespace EditableTable {
         }) => {
             marginBottom: {
                 readonly [$$ScaleValue]: "space";
-            }; /**
-             * Additional height of the rows.
-             */
+            };
         };
         ml: (value: {
             readonly [$$ScaleValue]: "space";
@@ -307,9 +306,6 @@ declare namespace EditableTable {
         size: (value: {
             readonly [$$PropertyValue]: "width";
         }) => {
-            /**
-             * Change event handler table selection.
-             */
             width: {
                 readonly [$$PropertyValue]: "width";
             };
@@ -384,9 +380,7 @@ declare namespace EditableTable {
         }) => {
             marginBottom: {
                 readonly [$$ScaleValue]: "space";
-            }; /**
-             * Additional height of the rows.
-             */
+            };
         };
         ml: (value: {
             readonly [$$ScaleValue]: "space";
@@ -418,9 +412,6 @@ declare namespace EditableTable {
         size: (value: {
             readonly [$$PropertyValue]: "width";
         }) => {
-            /**
-             * Change event handler table selection.
-             */
             width: {
                 readonly [$$PropertyValue]: "width";
             };

package/src/components/table/MobileTable.d.ts

@@ -38,6 +38,7 @@ interface MobileTableProps {
     footerColumnIds?: Set<string>;
     headerRowSpan?: boolean;
     keyId?: string;
+    sortColumnTitle?: string;
 }
 declare const MobileTable: React.ForwardRefExoticComponent<MobileTableProps & React.RefAttributes<HTMLDivElement>>;
 export default MobileTable;

package/src/components/table/index.d.ts

@@ -1,3 +1,5 @@
 export * from './Table';
+export type { PaginationLabel, TableLocaleText } from './locale';
+export { defaultTableLocaleText } from './locale';
 export * from './components';
 export { default as MobileTable } from './MobileTable';

package/src/components/table/locale.d.ts

@@ -0,0 +1,40 @@
+import type { ReactNode } from 'react';
+export interface PaginationLabel {
+    showingText?: string;
+    showingCountText?: string | ((params: {
+        from: number;
+        to: number;
+        total: number;
+    }) => string);
+    dialogShowingText?: string;
+    previousButton?: string;
+    nextButton?: string;
+    gotoPageText?: string;
+    goToPagePlaceholder?: string;
+    btnCancelText?: string;
+    btnSubmitText?: string;
+}
+export interface TableLocaleText {
+    /** Tooltip (`title` attribute) of a sortable header. */
+    sortColumnTitle: string;
+    /** Title of the show/hide column dialog on mobile. */
+    showColumnTitle: ReactNode;
+    emptyDataTitle: ReactNode;
+    emptyDataDescription: ReactNode;
+    /** Receives the `searchQuery` so each language can place it where its grammar needs it. */
+    emptySearchTitle: (params: {
+        query: string;
+    }) => ReactNode;
+    emptySearchDescription: ReactNode;
+    pagination: PaginationLabel;
+}
+export declare const defaultTableLocaleText: TableLocaleText;
+export declare const i18nTableLocaleText: (t: any) => TableLocaleText;
+/** Later sources win; an `undefined` value never erases an earlier one. */
+export declare const mergeTableLocaleText: (base: TableLocaleText, ...overrides: (Partial<TableLocaleText> | undefined)[]) => TableLocaleText;
+/**
+ * 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.
+ */
+export declare const useTableLocaleText: (...localeTexts: (Partial<TableLocaleText> | undefined)[]) => TableLocaleText;

package/src/config/locale/LocaleTextContext.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import type { TableLocaleText } from '../../components/table/locale';
+/**
+ * Component texts supplied once for the whole app through `MajooProvider`'s `localeText`.
+ * Each component reads its own key; any text left unset keeps the component's default.
+ */
+export interface MajooLocaleText {
+    table?: Partial<TableLocaleText>;
+}
+export declare const LocaleTextContext: React.Context<MajooLocaleText>;