@majoo-ui/react 2.1.2 → 2.2.0

package/components/dropdownMenu/DropdownMenu.esm.js

@@ -47,9 +47,7 @@ const slideLeftAndFade = keyframes({
     transform: 'translateX(0)'
   }
 });
-const StyledContent = styled(DropdownMenuPrimitive.Content, {
-  width: 143,
-  maxWidth: 243,
+const contentStyles = {
   backgroundColor: '$bgWhite',
   borderRadius: 4,
   padding: 8,
@@ -75,6 +73,19 @@ const StyledContent = styled(DropdownMenuPrimitive.Content, {
       }
     }
   }
+};
+const StyledContent = styled(DropdownMenuPrimitive.Content, {
+  width: 143,
+  maxWidth: 243,
+  ...contentStyles
+});
+
+// Submenus size to their own content instead of inheriting the trigger-sized width above.
+const StyledSubContent = styled(DropdownMenuPrimitive.SubContent, {
+  width: 'max-content',
+  minWidth: 180,
+  maxWidth: 320,
+  ...contentStyles
 });
 const itemStyles = {
   all: 'unset',
@@ -97,24 +108,105 @@ const itemStyles = {
   '&:active': {
     backgroundColor: '$gray150'
   },
-  '&:focus': {
+  // Radix moves focus to the highlighted item, but data-highlighted is the attribute it
+  // guarantees — keep both so hover and keyboard land on the same style.
+  '&:focus, &[data-highlighted]': {
     backgroundColor: '$gray100'
   }
 };
+const selectedItemStyles = {
+  backgroundColor: '$bgSelectedLight',
+  color: '$textBrand',
+  fontWeight: 600
+};
+
+// Space reserved for the indicator drawn in the item's left gutter.
+const INDICATOR_GUTTER = 28;
 const StyledItem = styled(DropdownMenuPrimitive.Item, {
-  ...itemStyles
+  ...itemStyles,
+  variants: {
+    selected: {
+      true: selectedItemStyles
+    }
+  }
 });
 StyledItem.propTypes = {
   asChild: PropTypes.bool,
   disabled: PropTypes.bool,
-  onSelect: PropTypes.func
+  onSelect: PropTypes.func,
+  selected: PropTypes.bool
 };
 const StyledCheckboxItem = styled(DropdownMenuPrimitive.CheckboxItem, {
-  ...itemStyles
+  ...itemStyles,
+  paddingLeft: INDICATOR_GUTTER,
+  '&[data-state="checked"]': {
+    color: '$textPrimary',
+    fontWeight: 600
+  }
 });
+
+// The ring and dot are drawn here rather than in ItemIndicator because Radix only mounts
+// ItemIndicator while checked — the unchecked ring has to come from the item itself.
 const StyledRadioItem = styled(DropdownMenuPrimitive.RadioItem, {
-  ...itemStyles
+  ...itemStyles,
+  paddingLeft: INDICATOR_GUTTER,
+  '&::before': {
+    content: '',
+    position: 'absolute',
+    left: 0,
+    top: '50%',
+    boxSizing: 'border-box',
+    width: 18,
+    height: 18,
+    borderRadius: '50%',
+    border: '1.5px solid $colors$formDefault',
+    transform: 'translateY(-50%)',
+    transition: 'border-color 120ms ease'
+  },
+  '&::after': {
+    content: '',
+    position: 'absolute',
+    left: 5,
+    top: '50%',
+    width: 8,
+    height: 8,
+    borderRadius: '50%',
+    backgroundColor: '$iconBrand',
+    transform: 'translateY(-50%) scale(0)',
+    transition: 'transform 120ms ease'
+  },
+  '&[data-state="checked"]': {
+    color: '$textPrimary',
+    fontWeight: 600,
+    '&::before': {
+      borderColor: '$formActive'
+    },
+    '&::after': {
+      transform: 'translateY(-50%) scale(1)'
+    }
+  },
+  '&[data-disabled]': {
+    '&::before': {
+      borderColor: '$formDisable'
+    },
+    '&::after': {
+      backgroundColor: '$iconDisable'
+    }
+  }
+});
+const StyledSubTrigger = styled(DropdownMenuPrimitive.SubTrigger, {
+  ...itemStyles,
+  '&[data-state="open"]': selectedItemStyles,
+  variants: {
+    selected: {
+      true: selectedItemStyles
+    }
+  }
 });
+StyledSubTrigger.propTypes = {
+  disabled: PropTypes.bool,
+  selected: PropTypes.bool
+};
 const StyledLabel = styled(DropdownMenuPrimitive.Label, {
   padding: '8px 0',
   fontSize: 12,
@@ -129,7 +221,10 @@ const StyledSeparator = styled(DropdownMenuPrimitive.Separator, {
 const StyledItemIndicator = styled(DropdownMenuPrimitive.ItemIndicator, {
   position: 'absolute',
   left: 0,
-  width: 25,
+  top: '50%',
+  width: 18,
+  height: 18,
+  transform: 'translateY(-50%)',
   display: 'inline-flex',
   alignItems: 'center',
   justifyContent: 'center'
@@ -159,7 +254,7 @@ DropdownMenuContext.propTypes = {
   align: PropTypes.oneOf(['start', 'center', 'end'])
 };
 const DropdownMenuContentContext = ({
-  theme,
+  theme = 'default',
   ...props
 }) => {
   const {
@@ -191,21 +286,43 @@ DropdownMenuContentContext.propTypes = {
   alignOffset: PropTypes.number,
   asChild: PropTypes.bool
 };
-const DropdownTrigger = /*#__PURE__*/React__default.forwardRef(({
+
+// Radix positions submenus itself, so this only carries the theme class across the portal.
+const DropdownMenuSubContentContext = ({
+  theme = 'default',
   children,
   ...props
+}) => {
+  const themeProvider = useThemeProvider(theme);
+  return /*#__PURE__*/jsx(StyledSubContent, {
+    className: `dropdown-content ${themeProvider?.theme || ''}`,
+    ...props,
+    children: children
+  });
+};
+DropdownMenuSubContentContext.propTypes = {
+  sideOffset: PropTypes.number,
+  alignOffset: PropTypes.number,
+  asChild: PropTypes.bool
+};
+
+/**
+ * @type {React.ForwardRefExoticComponent<
+ *   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Trigger> & React.RefAttributes<HTMLButtonElement>
+ * >}
+ */
+const DropdownTrigger = /*#__PURE__*/React__default.forwardRef(({
+  children,
+  asChild,
+  ...rest
 }, ref) => {
-  const {
-    asChild,
-    ...rest
-  } = props;
   return /*#__PURE__*/jsx(DropdownMenuPrimitive.Trigger, {
     ...rest,
     asChild: asChild,
     ref: ref,
-    children: children && /*#__PURE__*/React__default.cloneElement(children, {
+    children: /*#__PURE__*/React__default.isValidElement(children) ? /*#__PURE__*/React__default.cloneElement(children, {
       ...rest
-    })
+    }) : children
   });
 });
 DropdownTrigger.propTypes = {
@@ -213,11 +330,20 @@ DropdownTrigger.propTypes = {
 };
 const RightSlot = styled('div', {
   marginLeft: 'auto',
-  ':focus > &': {
-    color: 'white'
-  },
+  paddingLeft: 16,
+  display: 'inline-flex',
+  alignItems: 'center',
   '[data-disabled] &': {
     color: '$gray400'
+  },
+  variants: {
+    // Secondary text (a hint or shortcut) rather than an icon.
+    muted: {
+      true: {
+        color: '$textDisable',
+        fontSize: 12
+      }
+    }
   }
 });
 const StyledDropdown = styled(Button, {
@@ -261,7 +387,9 @@ const DropdownMenuCheckboxItem = StyledCheckboxItem;
 const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
 const DropdownMenuRadioItem = StyledRadioItem;
 const DropdownMenuItemIndicator = StyledItemIndicator;
-// export const DropdownMenuTriggerItem = StyledTriggerItem;
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+const DropdownMenuSubTrigger = StyledSubTrigger;
+const DropdownMenuSubContent = DropdownMenuSubContentContext;
 const DropdownMenuLabel = StyledLabel;
 const DropdownMenuSeparator = StyledSeparator;
 const DropdownMenuArrow = StyledArrow;
@@ -273,9 +401,11 @@ DropdownMenuCheckboxItem.displayName = 'DropdownMenuCheckboxItem';
 DropdownMenuRadioGroup.displayName = 'DropdownMenuRadioGroup';
 DropdownMenuRadioItem.displayName = 'DropdownMenuRadioItem';
 DropdownMenuItemIndicator.displayName = 'DropdownMenuItemIndicator';
-// DropdownMenuTriggerItem.displayName = 'DropdownMenuTriggerItem';
+DropdownMenuSub.displayName = 'DropdownMenuSub';
+DropdownMenuSubTrigger.displayName = 'DropdownMenuSubTrigger';
+DropdownMenuSubContent.displayName = 'DropdownMenuSubContent';
 DropdownMenuLabel.displayName = 'DropdownMenuLabel';
 DropdownMenuSeparator.displayName = 'DropdownMenuSeparator';
 DropdownMenuArrow.displayName = 'DropdownMenuArrow';
 
-export { ButtonDropdown, DropdownMenu, DropdownMenuArrow, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuItemIndicator, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, RightSlot, StyledDropdown };
+export { ButtonDropdown, DropdownMenu, DropdownMenuArrow, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuItemIndicator, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, RightSlot, StyledDropdown };

package/components/periodSelect/PeriodSelect.esm.js

@@ -0,0 +1,212 @@
+import 'core-js/modules/es.iterator.constructor.js';
+import 'core-js/modules/es.iterator.map.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { CaretDownOutline, ChevronRightOutline } from '@majoo-ui/icons';
+import { styled, colors } from '../../config/stitches.config.esm.js';
+import { weekdayNamesFullEng, weekdayNamesFullId } from '../../utils/calendar.esm.js';
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuSub, DropdownMenuSubTrigger, RightSlot, DropdownMenuSubContent, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem } from '../dropdownMenu/DropdownMenu.esm.js';
+
+const Trigger = styled('button', {
+  all: 'unset',
+  boxSizing: 'border-box',
+  display: 'inline-flex',
+  alignItems: 'center',
+  gap: '$spacing-02',
+  padding: '0 $spacing-04',
+  border: '1px solid $bgOutline',
+  borderRadius: '$lg',
+  backgroundColor: '$bgWhite',
+  color: '$textPrimary',
+  fontFamily: 'inherit',
+  fontSize: '$short-content-regular',
+  lineHeight: '$short-content-regular',
+  letterSpacing: '$short-content-regular',
+  cursor: 'pointer',
+  '&:hover': {
+    borderColor: '$primary600'
+  },
+  '&[data-state="open"]': {
+    borderColor: '$primary400'
+  },
+  variants: {
+    size: {
+      sm: {
+        height: 32
+      },
+      lg: {
+        height: 40
+      }
+    },
+    // Named apart from the DOM attribute so Stitches does not swallow it as a variant —
+    // the button still needs a real `disabled` to block the menu from opening.
+    isDisabled: {
+      true: {
+        backgroundColor: '$formDisable',
+        color: '$textDisable',
+        cursor: 'not-allowed',
+        '&:hover': {
+          borderColor: '$bgOutline'
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    size: 'lg'
+  }
+});
+const TriggerLabel = styled('span', {
+  fontWeight: 600
+});
+const TriggerRange = styled('span', {
+  color: '$textDisable'
+});
+const MENU_ITEM_CSS = {
+  paddingLeft: '$spacing-04',
+  paddingRight: '$spacing-04'
+};
+const DEFAULT_PERIODS = ['day', 'week', 'month'];
+// Listed Monday first, the way the week reads in Indonesian — not in Date#getDay order.
+const START_DAY_ORDER = [1, 2, 3, 4, 5, 6, 0];
+const PeriodSelect = /*#__PURE__*/React__default.forwardRef(({
+  value,
+  onChange,
+  startDay,
+  onStartDayChange,
+  defaultStartDay = 1,
+  resetStartDayOnPeriodChange = true,
+  periods = DEFAULT_PERIODS,
+  showRange = true,
+  disabled = false,
+  size = 'lg',
+  side = 'bottom',
+  align = 'start',
+  periodLabels,
+  startWeekLabel,
+  formatWeekRange,
+  css
+}, ref) => {
+  const {
+    t,
+    i18n: {
+      language
+    }
+  } = useTranslation(['MajooUI/periodSelect', 'translation']);
+  const [open, setOpen] = useState(false);
+  const [internalStartDay, setInternalStartDay] = useState(defaultStartDay);
+  const activeStartDay = startDay !== null && startDay !== void 0 ? startDay : internalStartDay;
+  const weekdayNames = language === 'en' ? weekdayNamesFullEng : weekdayNamesFullId;
+  // A week always spans 7 days, so the last one is always 6 days after the first.
+  const rangeLabel = (day, place) => {
+    const endDay = (day + 6) % 7;
+    const range = {
+      startDay: day,
+      endDay,
+      startName: weekdayNames[day],
+      endName: weekdayNames[endDay],
+      place
+    };
+    return formatWeekRange ? formatWeekRange(range) : `${range.startName} - ${range.endName}`;
+  };
+  const showWeekRange = showRange && value === 'week';
+  const defaultPeriodLabels = {
+    day: t('day', 'Hari'),
+    week: t('week', 'Minggu'),
+    month: t('month', 'Bulan')
+  };
+  const periodLabel = period => {
+    var _a;
+    return (_a = periodLabels === null || periodLabels === void 0 ? void 0 : periodLabels[period]) !== null && _a !== void 0 ? _a : defaultPeriodLabels[period];
+  };
+  const applyStartDay = day => {
+    setInternalStartDay(day);
+    onStartDayChange === null || onStartDayChange === void 0 ? void 0 : onStartDayChange(day);
+  };
+  const selectPeriod = period => {
+    onChange(period);
+    if (resetStartDayOnPeriodChange && period !== 'week' && activeStartDay !== defaultStartDay) {
+      applyStartDay(defaultStartDay);
+    }
+    setOpen(false);
+  };
+  const renderPeriodItem = period => {
+    if (period !== 'week') {
+      return jsx(DropdownMenuItem, {
+        selected: value === period,
+        onSelect: () => selectPeriod(period),
+        css: MENU_ITEM_CSS,
+        children: periodLabel(period)
+      }, period);
+    }
+    return jsxs(DropdownMenuSub, {
+      children: [jsxs(DropdownMenuSubTrigger, {
+        selected: value === 'week',
+        onClick: () => selectPeriod('week'),
+        css: MENU_ITEM_CSS,
+        children: [periodLabel('week'), jsx(RightSlot, {
+          children: jsx(ChevronRightOutline, {
+            size: "16",
+            color: "currentColor"
+          })
+        })]
+      }), jsxs(DropdownMenuSubContent, {
+        sideOffset: 8,
+        alignOffset: -8,
+        css: {
+          padding: '$spacing-04 $spacing-05'
+        },
+        children: [jsx(DropdownMenuLabel, {
+          children: startWeekLabel !== null && startWeekLabel !== void 0 ? startWeekLabel : t('startWeekFrom', 'Mulai minggu dari:')
+        }), jsx(DropdownMenuRadioGroup, {
+          value: String(activeStartDay),
+          onValueChange: day => {
+            applyStartDay(Number(day));
+            onChange('week');
+          },
+          children: START_DAY_ORDER.map(day => jsx(DropdownMenuRadioItem, {
+            value: String(day),
+            children: rangeLabel(day, 'option')
+          }, day))
+        })]
+      })]
+    }, period);
+  };
+  return jsxs(DropdownMenu, {
+    open: open,
+    onOpenChange: setOpen,
+    side: side,
+    align: align,
+    modal: false,
+    children: [jsx(DropdownMenuTrigger, {
+      asChild: true,
+      children: jsxs(Trigger, {
+        ref: ref,
+        size: size,
+        isDisabled: disabled,
+        disabled: disabled,
+        css: css,
+        type: "button",
+        children: [jsxs(TriggerLabel, {
+          children: [periodLabel(value), showWeekRange && ',']
+        }), showWeekRange && jsx(TriggerRange, {
+          children: rangeLabel(activeStartDay, 'trigger')
+        }), jsx(CaretDownOutline, {
+          size: "16",
+          color: disabled ? colors.iconDisable : colors.iconPrimary
+        })]
+      })
+    }), jsx(DropdownMenuContent, {
+      sideOffset: 4,
+      css: {
+        width: 'max-content',
+        minWidth: 160,
+        maxWidth: 'none'
+      },
+      children: periods.map(renderPeriodItem)
+    })]
+  });
+});
+PeriodSelect.displayName = 'PeriodSelect';
+
+export { PeriodSelect as default };

package/components/table/MobileTable.esm.js

@@ -10,6 +10,10 @@ import { styled } from '../../config/stitches.config.esm.js';
 import Box from '../../layout/box/Box.esm.js';
 import Flex from '../../layout/flex/Flex.esm.js';
 import { TableContent, TableHead, TableHeaderCellContainer, TableHeadCellContent, TableBody, addOnCellStyle, TableFoot, TableFootRow, TableFootCell } from './Table.esm.js';
+import { resolveCellCss } from './utils/columnStyles.esm.js';
+import { footerValueOf } from './utils/footerValue.esm.js';
+import { HeaderTooltip } from './utils/HeaderTooltip.esm.js';
+import { isHeaderSortable, getAriaSort } from './utils/headerSort.esm.js';
 import Text from '../text/Text.esm.js';
 import { ConditionalWrapper } from '../../wrapper/ConditionalWrapper.esm.js';
 import { ContextMenuTrigger } from '../contextMenu/ContextMenu.esm.js';
@@ -80,7 +84,11 @@ const MobileTable = /*#__PURE__*/React__default.forwardRef(({
   hideHeader,
   decoration,
   rowVirtualizer,
-  virtualized
+  virtualized,
+  footerData,
+  footerColumnIds,
+  headerRowSpan,
+  keyId = 'id'
 }, ref) => {
   var _a, _b, _c, _d;
   const {
@@ -178,26 +186,29 @@ const MobileTable = /*#__PURE__*/React__default.forwardRef(({
       children: jsxs(TableContent, Object.assign({}, getTableProps(), {
         children: [jsx(TableHead, {
           hiddenHeader: hideHeader,
-          children: headerGroups.map(headerGroup => jsx(TableHeadRow, Object.assign({}, headerGroup.getHeaderGroupProps(), {
+          children: (headerRowSpan ? headerGroups.slice(-1) : headerGroups).map(headerGroup => jsx(TableHeadRow, Object.assign({}, headerGroup.getHeaderGroupProps(), {
             children: headerGroup.headers.filter((column, index) => filterMobileHeader(column, index)).map(column => {
               const headerRender = column.render('Header');
-              return jsx(TableHeadCell, Object.assign({}, column.getHeaderProps(!column.unsortable ? column.getSortByToggleProps({
+              return jsx(TableHeadCell, Object.assign({}, column.getHeaderProps(isHeaderSortable(column) ? column.getSortByToggleProps({
                 title: t('sortColumnTitle', 'Urutkan') || 'Urutkan'
               }) : {
                 onClick: column.onToggle
               }), {
-                children: typeof headerRender === 'string' ? jsx(TableHeaderCellContainer, {
+                "aria-sort": getAriaSort(column),
+                children: typeof headerRender === 'string' ? jsxs(TableHeaderCellContainer, {
                   isMobile: true,
                   isSortedDesc: column.isSortedDesc,
-                  unsortable: column.unsortable,
+                  unsortable: !isHeaderSortable(column),
                   isToggleable: !!column.onToggle,
                   isToggled: column.isToggled,
-                  children: jsx(TableHeadCellContent, {
+                  children: [jsx(TableHeadCellContent, {
                     isMobile: true,
                     heading: "headerTable",
                     color: "secondary",
                     children: headerRender.toUpperCase()
-                  })
+                  }), column.headerTooltip && jsx(HeaderTooltip, {
+                    label: column.headerTooltip
+                  })]
                 }) : headerRender
               }));
             })
@@ -281,6 +292,7 @@ const MobileTable = /*#__PURE__*/React__default.forwardRef(({
                       children: cell.render('Cell')
                     });
                     return jsx(TableCell, Object.assign({}, cell.getCellProps(addOnCellStyle(cell.column.id)), {
+                      css: resolveCellCss(cell),
                       children: cell.column.accessor ? jsxs(Flex, {
                         justify: "between",
                         align: "center",
@@ -341,12 +353,12 @@ const MobileTable = /*#__PURE__*/React__default.forwardRef(({
                           align: "center",
                           justify: "between",
                           gap: 5,
-                          css: {
+                          css: Object.assign({
                             backgroundColor: '$bgGray',
                             padding: `$spacing-04 $spacing-05 ${'selection' in row.values ? '$spacing-04 $spacing-07' : ''}`,
                             borderBottom: '1pt solid $bgBorder',
                             alignItems: cell.column.accessor ? getAlign(cellAlign) : 'center'
-                          },
+                          }, resolveCellCss(cell)),
                           children: [jsx(Heading, {
                             css: {
                               padding: '3px 0px'
@@ -383,6 +395,48 @@ const MobileTable = /*#__PURE__*/React__default.forwardRef(({
                 }) : null]
               }, row.id);
             })
+          }), footerData === null || footerData === void 0 ? void 0 : footerData.map((footerRow, footerRowIndex) => {
+            var _a;
+            return jsx(TableRow, {
+              children: jsx(TableCell, {
+                colSpan: visibleColumns.length,
+                css: {
+                  backgroundColor: '$bgGray'
+                },
+                children: jsx(Flex, {
+                  direction: "column",
+                  children: visibleColumns.map((column, index) => {
+                    // A column without a Footer of its own would only add an empty line.
+                    if (column.isSubRow || !(footerColumnIds === null || footerColumnIds === void 0 ? void 0 : footerColumnIds.has(column.id))) return null;
+                    const isTitle = getIsMobileHeader() ? column.isMobileHeader : index === indexDefaultHeader;
+                    return jsxs(Flex, {
+                      align: "center",
+                      justify: "between",
+                      gap: 5,
+                      css: Object.assign({
+                        padding: '$spacing-04 $spacing-05',
+                        borderBottom: '1pt solid $bgBorder'
+                      }, column.footerCss),
+                      children: [!isTitle && jsx(Heading, {
+                        css: {
+                          padding: '3px 0px'
+                        },
+                        heading: "headerTable",
+                        color: "secondary",
+                        children: typeof column.Header === 'string' ? column.Header.toUpperCase() : column.render('Header')
+                      }), jsx(Paragraph, {
+                        paragraph: "shortContentBold",
+                        children: column.render('Footer', {
+                          footerRow,
+                          footerRowIndex,
+                          value: footerValueOf(column, footerRow, footerRowIndex)
+                        })
+                      })]
+                    }, column.id);
+                  })
+                })
+              })
+            }, (_a = footerRow[keyId]) !== null && _a !== void 0 ? _a : `footer-${footerRowIndex}`);
           }), (_d = decoration === null || decoration === void 0 ? void 0 : decoration.footerRender) === null || _d === void 0 ? void 0 : _d.call(decoration), isInfiniteScroll && paddingBottom > 0 && jsx("tr", {
             children: jsx("td", {
               style: {

package/components/table/Table.esm.js

@@ -4,6 +4,7 @@ import 'core-js/modules/es.iterator.constructor.js';
 import 'core-js/modules/es.iterator.filter.js';
 import 'core-js/modules/es.iterator.for-each.js';
 import 'core-js/modules/es.iterator.map.js';
+import 'core-js/modules/es.iterator.some.js';
 import 'core-js/modules/es.json.parse.js';
 import 'core-js/modules/es.json.stringify.js';
 import 'core-js/modules/es.map.get-or-insert.js';
@@ -15,12 +16,14 @@ import 'core-js/modules/es.set.is-subset-of.v2.js';
 import 'core-js/modules/es.set.is-superset-of.v2.js';
 import 'core-js/modules/es.set.symmetric-difference.v2.js';
 import 'core-js/modules/es.set.union.v2.js';
+import 'core-js/modules/es.weak-map.get-or-insert.js';
+import 'core-js/modules/es.weak-map.get-or-insert-computed.js';
 import { __rest } from 'tslib';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import { useState, useCallback, useMemo, useRef, useLayoutEffect, useEffect } from 'react';
 import InfiniteScroll from 'react-infinite-scroller';
-import { useTable, useSortBy, useExpanded, usePagination, useRowSelect, useColumnOrder, useMountedLayoutEffect } from 'react-table';
+import { useTable, useSortBy, useExpanded, usePagination, useRowSelect, useColumnOrder, useMountedLayoutEffect, emptyRenderer } from 'react-table';
 import { SortableElement, SortableContainer, arrayMove } from 'react-sortable-hoc';
 import Text from '../text/Text.esm.js';
 import Paragraph from '../paragraph/Paragraph.esm.js';
@@ -37,6 +40,10 @@ import useMediaQuery from '../../utils/useMediaQuery.esm.js';
 import { ConditionalWrapper } from '../../wrapper/ConditionalWrapper.esm.js';
 import { ContextMenuTrigger, ContextMenu, ContextMenuItem, ContextMenuSeparator } from '../contextMenu/ContextMenu.esm.js';
 import MobileTable from './MobileTable.esm.js';
+import { alignCss, headerAlignCss, resolveCellCss } from './utils/columnStyles.esm.js';
+import { footerValueOf } from './utils/footerValue.esm.js';
+import { HeaderTooltip } from './utils/HeaderTooltip.esm.js';
+import { isHeaderSortable, getAriaSort } from './utils/headerSort.esm.js';
 import { useSticky, getStickyValue, getMarginRight } from 'react-table-sticky';
 import { useTranslation } from 'react-i18next';
 import { useVirtual } from 'react-virtual';
@@ -283,6 +290,10 @@ const TableRow = styled('tr', {
   borderBottom: '1pt solid $bgBorder',
   '&:hover': {
     backgroundColor: '$bgGray',
+    // Body cells paint a background of their own (white, or a column's cellCss) over the row's.
+    '& > td': {
+      backgroundColor: '$bgGray'
+    },
     '& *[data-sticky-td="true"]': {
       backgroundColor: '$bgGray'
     }
@@ -389,12 +400,6 @@ const stickyShadowStyling = (column, tableScrollPosition, scrollAreaWidth) => {
   }
   return {};
 };
-const resolveCellCss = cell => {
-  const {
-    cellCss
-  } = cell.column;
-  return typeof cellCss === 'function' ? cellCss(cell) : cellCss;
-};
 /**
  * react-table-sticky only decorates header and body cells, so footer cells work out the same
  * sticky offset themselves.
@@ -412,6 +417,23 @@ const getStickyFooterProps = (column, flatHeaders) => {
     'data-sticky-td': true
   };
 };
+/**
+ * react-table-sticky offsets a sticky column by react-table's `width` of the columns beside it, which
+ * stays at its 150px default unless set, so a numeric `colWidth` is passed on as that width.
+ */
+const withStickyWidths = columns => {
+  const needsWidth = column => {
+    var _a;
+    return typeof column.colWidth === 'number' && column.width === undefined || ((_a = column.columns) === null || _a === void 0 ? void 0 : _a.some(needsWidth));
+  };
+  if (!columns.some(needsWidth)) return columns;
+  return columns.map(column => Object.assign(Object.assign(Object.assign({}, column), typeof column.colWidth === 'number' && column.width === undefined && {
+    width: column.colWidth
+  }), column.columns && {
+    columns: withStickyWidths(column.columns)
+  }));
+};
+const isMissingRowId = value => value === undefined || value === null || value === '';
 /**
  * Cells per header row. With `spanRows`, a column outside any group is drawn once across every
  * header row instead of under the empty placeholder cells react-table puts above it.
@@ -443,15 +465,19 @@ const buildHeaderRows = (headerGroups, spanRows) => {
 /**
  * rowSpan of the body cells whose column sets `rowSpan`, looked up by column id then row id. The
  * first row of a run of equal keys spans the run; the rows it covers get 0 and render no cell. A
- * run never crosses an expanded row, whose sub rows sit in between.
+ * run never crosses an expanded row, whose sub rows sit in between. `anchors` maps every row of a
+ * run to its first row, the one whose cell a hover anywhere in the run highlights.
  */
 const getCellRowSpans = (rows, spanColumns) => {
   const spans = new Map();
+  const anchors = new Map();
   spanColumns.forEach(column => {
     // Nested by column: joining ids into one string would let row `0` + column `1.x` collide with
     // sub row `0.1` + column `x`.
     const columnSpans = new Map();
+    const columnAnchors = new Map();
     spans.set(column.id, columnSpans);
+    anchors.set(column.id, columnAnchors);
     let anchorId = null;
     let anchorKey;
     rows.forEach((row, index) => {
@@ -462,14 +488,19 @@ const getCellRowSpans = (rows, spanColumns) => {
       if (anchorId !== null && hasKey && key === anchorKey && !((_a = rows[index - 1]) === null || _a === void 0 ? void 0 : _a.isExpanded)) {
         columnSpans.set(anchorId, columnSpans.get(anchorId) + 1);
         columnSpans.set(row.id, 0);
+        columnAnchors.set(row.id, anchorId);
         return;
       }
       anchorId = hasKey ? row.id : null;
       anchorKey = key;
       columnSpans.set(row.id, 1);
+      columnAnchors.set(row.id, row.id);
     });
   });
-  return spans;
+  return {
+    spans,
+    anchors
+  };
 };
 const formattingData = (rawData, rowGroup) => {
   if ((rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.groupKey) && !(rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.isManuallyFormatted)) {
@@ -734,6 +765,7 @@ function Table({
   }, [filterHeader]);
   const [filteredHeader, setFilteredHeader] = useState([]);
   const [hasDarkParent, setHasDarkParent] = useState(false);
+  const [hoveredRowId, setHoveredRowId] = useState(null);
   const {
     t
   } = useTranslation('MajooUI/table');
@@ -761,18 +793,47 @@ function Table({
         sortBy: initialSortBy
       });
     }
+    // Otherwise react-table's default of 10 rows shows until the pageSize effect below runs.
+    const initialPageSize = withoutLimit ? totalData : rowLimit;
+    if (typeof initialPageSize === 'number') {
+      Object.assign(initialState, {
+        pageSize: initialPageSize
+      });
+    }
     return Object.keys(initialState).length > 0 ? initialState : undefined;
   };
   const records = useMemo(() => formattingData(rawData, rowGroup), [rawData, rowGroup]);
+  // A row without a `keyId` is identified by its JSON; identical rows would share that id, so every
+  // repeat gets an occurrence suffix.
+  const fallbackRowIds = useMemo(() => {
+    const ids = new WeakMap();
+    const occurrences = new Map();
+    const visit = rowList => {
+      if (!Array.isArray(rowList)) return;
+      rowList.forEach(row => {
+        var _a;
+        if (!row || typeof row !== 'object') return;
+        if (isMissingRowId(row[keyId])) {
+          const json = JSON.stringify(row);
+          const count = (_a = occurrences.get(json)) !== null && _a !== void 0 ? _a : 0;
+          occurrences.set(json, count + 1);
+          ids.set(row, count ? `${json}#${count}` : json);
+        }
+        visit(row[subRows]);
+      });
+    };
+    visit(records);
+    return ids;
+  }, [records, keyId, subRows]);
   const filteredColumns = useMemo(() => {
     if (draggable) {
-      return [rowDraggableColumn,
+      return withStickyWidths([rowDraggableColumn,
       // remove all action column
       ...columns.filter(item => !['menu', 'expander', 'multiple-expander', 'selection'].includes(item.id))].map(col => Object.assign(Object.assign({}, col), {
         unsortable: false
-      }));
+      })));
     }
-    return columns;
+    return withStickyWidths(columns);
   }, [draggable, columns]);
   const instance = useTable({
     columns: filteredColumns,
@@ -791,7 +852,10 @@ function Table({
     onExpandedChange,
     autoResetPage: false,
     autoResetSelectedRows: false,
-    getRowId: showDuplicatedData ? undefined : row => row[keyId] || JSON.stringify(row),
+    getRowId: showDuplicatedData ? undefined : row => {
+      var _a;
+      return isMissingRowId(row[keyId]) ? (_a = fallbackRowIds.get(row)) !== null && _a !== void 0 ? _a : JSON.stringify(row) : row[keyId];
+    },
     getSubRows: row => row[subRows] || []
   }, useSortBy, useExpanded, usePagination, useRowSelect, useSticky, useColumnOrder);
   const {
@@ -994,7 +1058,7 @@ function Table({
           return jsx(TableHeadRow, Object.assign({}, headerGroup.getHeaderGroupProps(), {
             children: visibleHeaders.map((column, index) => {
               const headerRender = column.render('Header');
-              return jsx(TableHeadCell, Object.assign({}, column.getHeaderProps(props => [props, !column.unsortable ? column.getSortByToggleProps({
+              return jsx(TableHeadCell, Object.assign({}, column.getHeaderProps(props => [props, isHeaderSortable(column) ? column.getSortByToggleProps({
                 title: t('sortColumnTitle', 'Urutkan') || 'Urutkan'
               }) : {
                 onClick: column.onToggle
@@ -1008,7 +1072,7 @@ function Table({
                 css: Object.assign(Object.assign(Object.assign({}, stickyPositionStyling(column)), stickyShadowStyling(column, tableScrollPosition, scrollAreaWidth)), column.headerCss),
                 children: typeof headerRender === 'string' ? jsx(TableHeaderCellContainer, {
                   isSortedDesc: column.isSortedDesc,
-                  unsortable: column.unsortable,
+                  unsortable: !isHeaderSortable(column),
                   isToggleable: !!column.onToggle,
                   isToggled: column.isToggled,
                   darkTheme: hasDarkParent,
@@ -1040,18 +1104,15 @@ function Table({
         var _a;
         return jsx(TableFootRow, {
           children: footerColumns.map(column => jsx(TableCell, Object.assign({}, getStickyFooterProps(column, flatHeaders), {
-            css: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, cssTableCell), {
+            css: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, cssTableCell), {
               padding: '20px 8px',
               fontWeight: '600',
               verticalAlign: cellAlign
-            }), stickyPositionStyling(column)), stickyShadowStyling(column, tableScrollPosition, scrollAreaWidth)), column.footerCss),
+            }), stickyPositionStyling(column)), stickyShadowStyling(column, tableScrollPosition, scrollAreaWidth)), alignCss(column)), column.footerCss),
             children: column.render('Footer', {
               footerRow,
               footerRowIndex,
-              value: column.accessor ? column.accessor(footerRow, footerRowIndex, {
-                subRows: [],
-                depth: 0
-              }) : undefined
+              value: footerValueOf(column, footerRow, footerRowIndex)
             })
           }), column.id))
         }, (_a = footerRow[keyId]) !== null && _a !== void 0 ? _a : footerRowIndex);
@@ -1241,7 +1302,7 @@ function Table({
                         rowSpan
                       }, index) => {
                         const headerRender = column.render('Header');
-                        return jsx(TableHeadCell, Object.assign({}, column.getHeaderProps(props => [props, !column.unsortable ? column.getSortByToggleProps({
+                        return jsx(TableHeadCell, Object.assign({}, column.getHeaderProps(props => [props, isHeaderSortable(column) ? column.getSortByToggleProps({
                           title: t('sortColumnTitle', 'Urutkan') || 'Urutkan'
                         }) : {
                           onClick: column.onToggle
@@ -1252,27 +1313,33 @@ function Table({
                             minWidth: column.colMinWidth
                           }
                         }]), {
+                          "aria-sort": getAriaSort(column),
                           rowSpan: rowSpan > 1 ? rowSpan : undefined,
                           css: Object.assign(Object.assign(Object.assign(Object.assign({}, stickyPositionStyling(column)), stickyShadowStyling(column, tableScrollPosition, scrollAreaWidth)), column.headerCss), {
                             position: 'sticky',
                             zIndex: column.sticky ? '5 !important' : 3,
                             top: 0
                           }),
-                          children: typeof headerRender === 'string' ? jsx(TableHeaderCellContainer, {
+                          children: typeof headerRender === 'string' ? jsxs(TableHeaderCellContainer, {
                             isSortedDesc: column.isSortedDesc,
-                            unsortable: id ? true : column.unsortable,
+                            unsortable: !isHeaderSortable(column),
                             isToggleable: !!column.onToggle,
                             isToggled: column.isToggled,
                             darkTheme: hasDarkParent,
-                            css: {
+                            css: Object.assign({
                               width: column.colWidth,
                               maxWidth: column.colMaxWidth,
                               minWidth: column.colMinWidth
-                            },
-                            children: jsx(TableHeadCellContent, {
+                            }, headerAlignCss(column)),
+                            children: [jsx(TableHeadCellContent, {
                               heading: "headerTable",
+                              css: Object.assign({
+                                color: 'inherit'
+                              }, alignCss(column)),
                               children: headerRender.toUpperCase()
-                            })
+                            }), column.headerTooltip && jsx(HeaderTooltip, {
+                              label: column.headerTooltip
+                            })]
                           }) : headerRender
                         }));
                       })
@@ -1320,13 +1387,13 @@ function Table({
                           const collId = (_b = cell === null || cell === void 0 ? void 0 : cell.column) === null || _b === void 0 ? void 0 : _b.id;
                           const exceptionId = (_c = [].concat(additionalExceptionIds)) === null || _c === void 0 ? void 0 : _c.includes(collId);
                           return jsx(TableCell, Object.assign({}, cell.getCellProps(addOnCellStyle(cell.column.id)), {
-                            css: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, cssTableCell), {
+                            css: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, cssTableCell), {
                               padding: !isContextMenu || exceptionId ? collId === 'expander' || collId === 'multiple-expander' ? '20px 4px' : '20px 8px' : '',
                               verticalAlign: cell.column.accessor ? cellAlign : 'center',
                               cursor: onRowClick ? 'pointer' : 'unset'
                             }), stickyPositionStyling(cell.column)), stickyShadowStyling(cell.column, tableScrollPosition, scrollAreaWidth)), id && {
                               paddingRight: index + 1 === _row.length ? 30 : null
-                            }), resolveCellCss(cell)),
+                            }), alignCss(cell.column)), resolveCellCss(cell)),
                             onClick: () => {
                               if (!exceptionId) {
                                 handleRowClick(row, i);
@@ -1359,6 +1426,7 @@ function Table({
                     }, row.id);
                   })
                 })) : jsxs(TableBody, Object.assign({}, getTableBodyProps(), {
+                  onMouseLeave: cellRowSpans ? () => setHoveredRowId(null) : undefined,
                   children: [isInfiniteScroll && paddingTop > 0 && jsx("tr", {
                     children: jsx("td", {
                       style: {
@@ -1378,7 +1446,10 @@ function Table({
                     wrapper: child => tableRowData && tableRowData.length > 0 ? jsx(TableRow, {
                       css: {
                         '&:hover': {
-                          backgroundColor: 'unset'
+                          backgroundColor: 'unset',
+                          '& > td': {
+                            backgroundColor: 'unset'
+                          }
                         }
                       },
                       children: jsx(TableCell, {
@@ -1434,9 +1505,10 @@ function Table({
                         })), jsx(TableRow, Object.assign({
                           css: customStyle
                         }, row && (row === null || row === void 0 ? void 0 : row.getRowProps) ? row === null || row === void 0 ? void 0 : row.getRowProps() : {}, {
+                          onMouseEnter: cellRowSpans ? () => setHoveredRowId(row.id) : undefined,
                           children: row.cells.filter(cell => filteredHeader.length > 0 || filterHeader.length > 0 ? filteredHeader.includes(cell.column.id) || filterHeader.includes(cell.column.id) : cell).filter(cell => !cell.column.isSubRow).map((cell, index, _row) => {
-                            var _a, _b, _c, _d;
-                            const cellRowSpan = (_a = cellRowSpans === null || cellRowSpans === void 0 ? void 0 : cellRowSpans.get(cell.column.id)) === null || _a === void 0 ? void 0 : _a.get(row.id);
+                            var _a, _b, _c, _d, _e;
+                            const cellRowSpan = (_a = cellRowSpans === null || cellRowSpans === void 0 ? void 0 : cellRowSpans.spans.get(cell.column.id)) === null || _a === void 0 ? void 0 : _a.get(row.id);
                             if (cellRowSpan === 0) return null;
                             let visibleHeaders = (_b = headerGroups === null || headerGroups === void 0 ? void 0 : headerGroups[0]) === null || _b === void 0 ? void 0 : _b.headers.filter(column => !column.isSubRow);
                             if (filterHeader.length > 0) {
@@ -1446,13 +1518,15 @@ function Table({
                             const exceptionId = (_d = ['expander', 'multiple-expander', 'selection', 'menu', 'eye'].concat(additionalExceptionIds)) === null || _d === void 0 ? void 0 : _d.includes(collId);
                             return jsx(TableCell, Object.assign({}, cell.getCellProps(addOnCellStyle(cell.column.id)), {
                               rowSpan: cellRowSpan > 1 ? cellRowSpan : undefined,
-                              css: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, cssTableCell), {
+                              css: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, cssTableCell), {
                                 padding: !isContextMenu || exceptionId ? collId === 'expander' || collId === 'multiple-expander' ? '20px 4px' : '20px 8px' : '',
                                 verticalAlign: cell.column.accessor ? cellAlign : 'center',
                                 cursor: onRowClick ? 'pointer' : 'unset'
                               }), stickyPositionStyling(cell.column)), stickyShadowStyling(cell.column, tableScrollPosition, scrollAreaWidth)), id && {
                                 paddingRight: index + 1 === _row.length ? 30 : null
-                              }), resolveCellCss(cell)),
+                              }), alignCss(cell.column)), resolveCellCss(cell)), cellRowSpan > 1 && ((_e = cellRowSpans.anchors.get(cell.column.id)) === null || _e === void 0 ? void 0 : _e.get(hoveredRowId)) === row.id && {
+                                backgroundColor: '$bgGray'
+                              }),
                               onClick: () => {
                                 if (!exceptionId) {
                                   handleRowClick(row, i);
@@ -1617,7 +1691,11 @@ function Table({
       additionalExceptionIds: additionalExceptionIds,
       hideHeader: hideHeader,
       decoration: decoration,
-      rowVirtualizer: rowVirtualizer
+      rowVirtualizer: rowVirtualizer,
+      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
     })]
   });
 }

package/components/table/utils/HeaderTooltip.esm.js

@@ -0,0 +1,26 @@
+import 'react';
+import { CircleQuestionOutline } from '@majoo-ui/icons';
+import Box from '../../../layout/box/Box.esm.js';
+import { jsx } from 'react/jsx-runtime';
+import Tooltip from '../../tooltip/Tooltip.esm.js';
+
+const HeaderTooltip = ({
+  label
+}) => /*#__PURE__*/jsx(Tooltip, {
+  label: label,
+  side: "top",
+  children: /*#__PURE__*/jsx(Box, {
+    as: "span",
+    css: {
+      display: 'flex',
+      cursor: 'help'
+    },
+    onClick: event => event.stopPropagation(),
+    children: /*#__PURE__*/jsx(CircleQuestionOutline, {
+      size: 16,
+      color: "currentColor"
+    })
+  })
+});
+
+export { HeaderTooltip };

package/components/table/utils/columnStyles.esm.js

@@ -0,0 +1,22 @@
+const JUSTIFY_CONTENT = {
+  left: 'flex-start',
+  center: 'center',
+  right: 'flex-end'
+};
+/** A column's `cellCss` for one cell, called with the cell when it is a function. */
+const resolveCellCss = cell => {
+  const {
+    cellCss
+  } = cell.column;
+  return typeof cellCss === 'function' ? cellCss(cell) : cellCss;
+};
+/** Horizontal alignment of a column's body cells, footer cells and header label text. */
+const alignCss = column => column.align ? {
+  textAlign: column.align
+} : undefined;
+/** The header label sits in a flex container, which follows the column's alignment through justify-content. */
+const headerAlignCss = column => column.align ? {
+  justifyContent: JUSTIFY_CONTENT[column.align]
+} : undefined;
+
+export { alignCss, headerAlignCss, resolveCellCss };

package/components/table/utils/footerValue.esm.js

@@ -0,0 +1,7 @@
+/** What a column's accessor reads from a footer row: the `value` its `Footer` receives. */
+const footerValueOf = (column, footerRow, footerRowIndex) => typeof column.accessor === 'function' ? column.accessor(footerRow, footerRowIndex, {
+  subRows: [],
+  depth: 0
+}) : undefined;
+
+export { footerValueOf };

package/components/table/utils/headerSort.esm.js

@@ -0,0 +1,15 @@
+/**
+ * Whether a header click should toggle the sort. react-table's `defaultCanSort` makes every header
+ * sortable, but toggling a group header or the placeholder above an ungrouped column throws (neither
+ * is in `allColumns`), and a column without an accessor has nothing to sort on unless it brings its
+ * own `sortType`.
+ */
+const isHeaderSortable = column => !column.unsortable && !column.columns && !column.placeholderOf && (Boolean(column.accessor) || typeof column.sortType === 'function');
+/** `aria-sort` of a header cell; only a header that can sort announces a sort state. */
+const getAriaSort = column => {
+  if (!isHeaderSortable(column)) return undefined;
+  if (!column.isSorted) return 'none';
+  return column.isSortedDesc ? 'descending' : 'ascending';
+};
+
+export { getAriaSort, isHeaderSortable };

package/index.esm.js

@@ -57,6 +57,7 @@ export { default as Skeleton } from './components/skeleton/Skeleton.esm.js';
 export { default as TagList } from './components/tagList/TagList.esm.js';
 export { ScrollSync } from './components/scrollSync/ScrollSync.esm.js';
 export { ScrollSyncNode } from './components/scrollSync/ScrollSyncNode.esm.js';
+export { default as PeriodSelect } from './components/periodSelect/PeriodSelect.esm.js';
 export { useListOption } from './hooks/useListOption/useListOption.esm.js';
 export { useToggle } from './hooks/useToggle/useToggle.esm.js';
 export { Avatar } from './components/avatar/Avatar.esm.js';
@@ -94,7 +95,7 @@ export { default as Upload } from './components/upload/Upload.esm.js';
 export { AlertDialog, AlertDialogCancel, AlertDialogConfirm, AlertDialogContent, AlertDialogDescription, AlertDialogFunction, AlertDialogRoot, AlertDialogTitle, AlertDialogTrigger } from './components/alertDialog/AlertDialog.esm.js';
 export { BOTTOM_LEFT_POSITION, BOTTOM_RIGHT_POSITION, TOP_LEFT_POSITION, TOP_RIGHT_POSITION } from './components/toast/Toast.esm.js';
 export { BreadcrumbItem } from './components/breadcrumb/Breadcrumb.esm.js';
-export { ButtonDropdown, DropdownMenu, DropdownMenuArrow, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuItemIndicator, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, RightSlot, StyledDropdown } from './components/dropdownMenu/DropdownMenu.esm.js';
+export { ButtonDropdown, DropdownMenu, DropdownMenuArrow, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuItemIndicator, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, RightSlot, StyledDropdown } from './components/dropdownMenu/DropdownMenu.esm.js';
 export { ButtonGroup, ButtonGroupItem } from './components/buttonGroup/ButtonGroup.esm.js';
 export { default as ColorPicker } from './components/colorPicker/ColorPicker.esm.js';
 export { Drawer, DrawerBody, DrawerClose, DrawerCloseButton, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger } from './components/drawer/Drawer.esm.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@majoo-ui/react",
-  "version": "2.1.2",
+  "version": "2.2.0",
   "main": "./index.esm.js",
   "sideEffects": [
     "*.css",

package/src/components/index.d.ts

@@ -46,3 +46,4 @@ export * from './contextMenu';
 export * from './skeleton';
 export * from './tagList';
 export * from './scrollSync';
+export * from './periodSelect';

package/src/components/periodSelect/PeriodSelect.d.ts

@@ -0,0 +1,83 @@
+import React from 'react';
+import { CSS } from '../../config/stitches.config';
+export type PeriodValue = 'day' | 'week' | 'month';
+export interface PeriodSelectProps {
+    /**
+     * The selected period.
+     */
+    value: PeriodValue;
+    /**
+     * Called when the user picks a period. Picking a start day also reports `'week'`.
+     */
+    onChange: (value: PeriodValue) => void;
+    /**
+     * First day of the week, indexed like `Date#getDay` (0 = Sunday, 1 = Monday).
+     * Leave undefined to let the component hold it internally.
+     */
+    startDay?: number;
+    /**
+     * Called when the user picks a different first day of the week.
+     */
+    onStartDayChange?: (startDay: number) => void;
+    /**
+     * First day of the week before the user changes anything.
+     */
+    defaultStartDay?: number;
+    /**
+     * If true, leaving the weekly period reports `defaultStartDay` back through
+     * `onStartDayChange`, so returning to weekly starts from the default again.
+     */
+    resetStartDayOnPeriodChange?: boolean;
+    /**
+     * Periods offered, in the order they are listed.
+     */
+    periods?: PeriodValue[];
+    /**
+     * If false, the trigger shows the period alone, without the day range.
+     */
+    showRange?: boolean;
+    /**
+     * If true, the component is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Specify the trigger size.
+     */
+    size?: 'sm' | 'lg';
+    /**
+     * The preferred side of the trigger to render the menu against.
+     */
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    /**
+     * The preferred alignment against the trigger.
+     */
+    align?: 'start' | 'center' | 'end';
+    /**
+     * Replaces the label of one or more periods. Anything left out keeps its default
+     * (`Hari`, `Minggu`, `Bulan`), which already goes through i18n.
+     */
+    periodLabels?: Partial<Record<PeriodValue, React.ReactNode>>;
+    /**
+     * Replaces the submenu heading above the start-day options.
+     */
+    startWeekLabel?: React.ReactNode;
+    /**
+     * Replaces the default `Senin - Minggu` label, both on the trigger and on each option.
+     * `place` says which of the two is being rendered, so the two can read differently.
+     * Days are indexed like `Date#getDay`.
+     */
+    formatWeekRange?: (range: WeekRange) => React.ReactNode;
+    /**
+     * Additional CSS trigger styles.
+     */
+    css?: CSS;
+}
+export interface WeekRange {
+    startDay: number;
+    endDay: number;
+    startName: string;
+    endName: string;
+    place: 'trigger' | 'option';
+}
+declare const PeriodSelect: React.ForwardRefExoticComponent<PeriodSelectProps & React.RefAttributes<HTMLButtonElement>>;
+export default PeriodSelect;

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

@@ -0,0 +1,2 @@
+export { default as PeriodSelect } from './PeriodSelect';
+export * from './PeriodSelect';

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

@@ -34,6 +34,10 @@ interface MobileTableProps {
     decoration?: Decoration;
     rowVirtualizer: IRowVirtualizer;
     virtualized?: boolean;
+    footerData?: Record<string, any>[];
+    footerColumnIds?: Set<string>;
+    headerRowSpan?: boolean;
+    keyId?: string;
 }
 declare const MobileTable: React.ForwardRefExoticComponent<MobileTableProps & React.RefAttributes<HTMLDivElement>>;
 export default MobileTable;

package/src/components/table/utils/columnStyles.d.ts

@@ -0,0 +1,10 @@
+/** A column's `cellCss` for one cell, called with the cell when it is a function. */
+export declare const resolveCellCss: (cell: any) => any;
+/** Horizontal alignment of a column's body cells, footer cells and header label text. */
+export declare const alignCss: (column: any) => {
+    textAlign: any;
+} | undefined;
+/** The header label sits in a flex container, which follows the column's alignment through justify-content. */
+export declare const headerAlignCss: (column: any) => {
+    justifyContent: any;
+} | undefined;

package/src/components/table/utils/footerValue.d.ts

@@ -0,0 +1,2 @@
+/** What a column's accessor reads from a footer row: the `value` its `Footer` receives. */
+export declare const footerValueOf: (column: any, footerRow: any, footerRowIndex: any) => any;

package/src/components/table/utils/headerSort.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Whether a header click should toggle the sort. react-table's `defaultCanSort` makes every header
+ * sortable, but toggling a group header or the placeholder above an ungrouped column throws (neither
+ * is in `allColumns`), and a column without an accessor has nothing to sort on unless it brings its
+ * own `sortType`.
+ */
+export declare const isHeaderSortable: (column: any) => boolean;
+/** `aria-sort` of a header cell; only a header that can sort announces a sort state. */
+export declare const getAriaSort: (column: any) => "none" | "ascending" | "descending" | undefined;

package/utils/calendar.esm.js

@@ -6,6 +6,10 @@ const monthNamesFullId = ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni'
 const monthNamesFullEng = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
 const weekdayNamesShortId = ['Min', 'Sen', 'Sel', 'Rab', 'Kam', 'Jum', 'Sab'];
 const weekdayNamesShortEng = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+
+// Indexed like Date#getDay: 0 = Sunday.
+const weekdayNamesFullId = ['Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu'];
+const weekdayNamesFullEng = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
 const yearRangesList = rangeStart => {
   let start = rangeStart;
   let end = start + 9;
@@ -23,4 +27,4 @@ const getCalendarStartYear = year => year - year % 10 + 1;
 const getCalendarStartYearRange = year => year - year % 100 + 1;
 const toDateFormat = (date, locale = 'id') => moment(date).locale(locale).format('DD MMMM YYYY');
 
-export { getCalendarStartYear, getCalendarStartYearRange, monthNamesFullEng, monthNamesFullId, toDateFormat, weekdayNamesShortEng, weekdayNamesShortId, yearRangesList };
+export { getCalendarStartYear, getCalendarStartYearRange, monthNamesFullEng, monthNamesFullId, toDateFormat, weekdayNamesFullEng, weekdayNamesFullId, weekdayNamesShortEng, weekdayNamesShortId, yearRangesList };