@majoo-ui/react 2.1.3 → 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/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.3",
+  "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/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 };