@lumx/react 3.5.4-alpha-remove-moment.0 → 3.5.4-alpha-optimize-lumx-react-bundle.0

package/index.d.ts

@@ -542,7 +542,7 @@ interface DatePickerProps extends GenericProps {
     /** Default month. */
     defaultMonth?: Date;
     /** Locale (language or region) to use. */
-    locale?: string;
+    locale: string;
     /** Date after which dates can't be selected. */
     maxDate?: Date;
     /** Date before which dates can't be selected. */
@@ -597,7 +597,7 @@ interface DatePickerFieldProps extends GenericProps {
     /** Whether the component is disabled or not. */
     isDisabled?: boolean;
     /** Locale (language or region) to use. */
-    locale?: string;
+    locale: string;
     /** Date after which dates can't be selected. */
     maxDate?: Date;
     /** Date before which dates can't be selected. */

package/index.js

@@ -5,6 +5,9 @@ import isEmpty from 'lodash/isEmpty';
 import noop from 'lodash/noop';
 import get from 'lodash/get';
 import isFunction from 'lodash/isFunction';
+import moment$1 from 'moment';
+import range from 'lodash/range';
+import { extendMoment } from 'moment-range';
 import last from 'lodash/last';
 import pull from 'lodash/pull';
 import { createPortal } from 'react-dom';
@@ -20,7 +23,6 @@ import isInteger from 'lodash/isInteger';
 import isObject from 'lodash/isObject';
 import take from 'lodash/take';
 import uniqueId from 'lodash/uniqueId';
-import range from 'lodash/range';
 import chunk from 'lodash/chunk';
 import isUndefined from 'lodash/isUndefined';
 import set from 'lodash/set';
@@ -2024,21 +2026,6 @@ CommentBlock.displayName = COMPONENT_NAME$c;
 CommentBlock.className = CLASSNAME$b;
 CommentBlock.defaultProps = DEFAULT_PROPS$b;
 
-/**
- * Add a number of months from a date while resetting the day to prevent month length mismatches.
- */
-function addMonthResetDay(date, monthOffset) {
-  const newDate = new Date(date.getTime());
-  newDate.setDate(1);
-  newDate.setMonth(date.getMonth() + monthOffset);
-  return newDate;
-}
-
-/**
- * Check if given date is valid.
- */
-const isDateValid = date => date instanceof Date && !Number.isNaN(date.getTime());
-
 /**
  * Component display name.
  */
@@ -2049,169 +2036,56 @@ const COMPONENT_NAME$d = 'DatePicker';
  */
 const CLASSNAME$c = getRootClassName(COMPONENT_NAME$d);
 
+const moment = extendMoment(moment$1);
+const DAYS_PER_WEEK = 7;
 /**
- * Get current browser locale.
- */
-const getCurrentLocale = () => {
-  var _navigator$languages;
-  return ((_navigator$languages = navigator.languages) === null || _navigator$languages === void 0 ? void 0 : _navigator$languages[0]) || navigator.language;
-};
-
-/**
- * Get the language part of a locale code.
- * ex: `en-us` => `en`
+ * Get the list of days in a week based on locale.
+ *
+ * @param  locale The locale using to generate the order of days in a week.
+ * @return The list of days in a week based on locale.
  */
-const getLocaleLang = locale => locale.split('-')[0];
-
-/** Get first day of week for locale from the browser API */
-const getFromBrowser = locale => {
-  try {
-    var _localeMetadata$getWe;
-    const localeMetadata = new Intl.Locale(locale);
-    const {
-      firstDay
-    } = ((_localeMetadata$getWe = localeMetadata.getWeekInfo) === null || _localeMetadata$getWe === void 0 ? void 0 : _localeMetadata$getWe.call(localeMetadata)) || localeMetadata.weekInfo;
-    // Sunday is represented as `0` in Date.getDay()
-    if (firstDay === 7) return 0;
-    return firstDay;
-  } catch (e) {
-    return undefined;
-  }
-};
-
-/** List first day for each locale (could be removed when all browser implement Locale weekInfo) */
-const FIRST_DAY_FOR_LOCALES = [{
-  // Locales with Sunday as the first day of the week
-  localeRX: /^(af|ar-(dz|eg|sa)|bn|cy|en-(ca|us|za)|fr-ca|gd|he|hi|ja|km|ko|pt-br|te|th|ug|zh-hk)$/i,
-  firstDay: 0
-}, {
-  // Locales with Monday as the first day of the week
-  localeRX: /^(ar-(ma|tn)|az|be|bg|bs|ca|cs|da|de|el|en-(au|gb|ie|in|nz)|eo|es|et|eu|fi|fr|fy|gl|gu|hr|ht|hu|hy|id|is|it|ka|kk|kn|lb|lt|lv|mk|mn|ms|mt|nb|nl|nn|oc|pl|pt|ro|ru|sk|sl|sq|sr|sv|ta|tr|uk|uz|vi|zh-(cn|tw))$/i,
-  firstDay: 1
-}, {
-  // Locales with Saturday as the first day of the week
-  localeRX: /^(ar|fa-ir)$/i,
-  firstDay: 6
-}];
-
-/** Find first day of week for locale from the constant */
-const getFromConstant = locale => {
-  // Search for locale (lang + region)
-  for (const {
-    localeRX,
-    firstDay
-  } of FIRST_DAY_FOR_LOCALES) {
-    if (localeRX.test(locale)) return firstDay;
-  }
-  // Fallback search for locale lang
-  const localeLang = getLocaleLang(locale);
-  if (localeLang !== locale) {
-    return getFromConstant(localeLang);
-  }
-  return undefined;
-};
+function getWeekDays(locale) {
+  return range(DAYS_PER_WEEK).map((_, i) => moment().locale(locale).weekday(i));
+}
 
 /**
- * Get first day of the week for the given locale code (language + region).
+ * Get month calendar based on locale and start date.
+ *
+ * @param  locale        The locale using to generate the order of days in a week.
+ * @param  selectedMonth The selected month.
+ * @return The list of days in a week based on locale.
  */
-const getFirstDayOfWeek = locale => {
-  // Get from browser API
-  const firstDay = getFromBrowser(locale);
-  if (firstDay !== undefined) return firstDay;
-
-  // Get from constant
-  return getFromConstant(locale);
-};
-
-const DAYS_PER_WEEK = 7;
+function getMonthCalendar(locale, selectedMonth) {
+  const firstDayOfMonth = moment(selectedMonth).startOf('month');
+  const endDayOfMonth = moment(selectedMonth).endOf('month');
+  // The first day of the week depends on the locale used. In FR the first day is a monday but in EN the first day is sunday
+  const firstDay = firstDayOfMonth.locale(locale).startOf('week');
+  const monthRange = moment.range(firstDay.toDate(), endDayOfMonth.toDate());
+  return Array.from(monthRange.by('day'));
+}
 
 /**
- * List week days (based on locale) with the week day letter (ex: "M" for "Monday") and week day number
- * (0-based index starting on Sunday).
+ * Get month calendar based on locale and start date.
+ * Each day is annotated to know if they are displayed and/or clickable.
+ *
+ * @param  locale        The locale using to generate the order of days in a week.
+ * @param  minDate       The first selectable date.
+ * @param  maxDate       The last selectable date.
+ * @param  selectedMonth The selected month.
+ * @return The list of days in a week based on locale.
  */
-const getWeekDays = function () {
-  var _getFirstDayOfWeek;
-  let locale = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : getCurrentLocale();
-  let referenceDate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : new Date();
-  const iterDate = new Date(referenceDate.getTime());
-  const firstDay = (_getFirstDayOfWeek = getFirstDayOfWeek(locale)) !== null && _getFirstDayOfWeek !== void 0 ? _getFirstDayOfWeek : 1;
-
-  // Go to start of the week
-  const offset = firstDay - iterDate.getDay();
-  iterDate.setDate(iterDate.getDate() + offset);
-
-  // Iterate through the days of the week
-  const weekDays = [];
-  for (let i = 0; i < DAYS_PER_WEEK; i++) {
-    // Single letter week day (ex: "M" for "Monday", "L" for "Lundi", etc.)
-    const letter = iterDate.toLocaleDateString(locale, {
-      weekday: 'narrow'
-    });
-    // Day number (1-based index starting on Monday)
-    const number = iterDate.getDay();
-    weekDays.push({
-      letter,
-      number
-    });
-    iterDate.setDate(iterDate.getDate() + 1);
-  }
-  return weekDays;
-};
-
-/**
- * Get month calendar.
- * A list of weeks with days indexed by week day number
- */
-const getMonthCalendar = function () {
-  let locale = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : getCurrentLocale();
-  let referenceDate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : new Date();
-  let rangeMinDate = arguments.length > 2 ? arguments[2] : undefined;
-  let rangeMaxDate = arguments.length > 3 ? arguments[3] : undefined;
-  const month = referenceDate.getMonth();
-  const iterDate = new Date(referenceDate.getTime());
-  iterDate.setDate(1);
-  const weekDays = getWeekDays(locale, referenceDate);
-  const lastDayOfWeek = last(weekDays);
-  const weeks = [];
-  let week = {};
-  while (iterDate.getMonth() === month) {
-    const weekDayNumber = iterDate.getDay();
-    const day = {
-      date: new Date(iterDate.getTime())
+function getAnnotatedMonthCalendar(locale, minDate, maxDate, selectedMonth) {
+  const month = moment(selectedMonth).locale(locale).month();
+  const clickableRange = moment.range(minDate, maxDate);
+  return getMonthCalendar(locale, selectedMonth).map(date => {
+    return {
+      date,
+      isClickable: clickableRange.contains(date),
+      isDisplayed: date.month() === month,
+      isToday: date.isSame(moment(), 'day')
     };
-
-    // If a range is specified, check if the day is out of range.
-    if (rangeMinDate && iterDate <= rangeMinDate || rangeMaxDate && iterDate >= rangeMaxDate) {
-      day.isOutOfRange = true;
-    }
-    week[weekDayNumber] = day;
-    if (weekDayNumber === lastDayOfWeek.number) {
-      weeks.push(week);
-      week = {};
-    }
-    iterDate.setDate(iterDate.getDate() + 1);
-  }
-  if (Object.keys(week).length) weeks.push(week);
-  return {
-    weeks,
-    weekDays
-  };
-};
-
-/**
- * Check `date1` is on the same day as `date2`.
- */
-const isSameDay = (date1, date2) => date1.getDate() === date2.getDate() && date1.getMonth() === date2.getMonth() && date1.getFullYear() === date2.getFullYear();
-
-const formatMonthYear = (date, locale) => date.toLocaleDateString(locale, {
-  year: 'numeric',
-  month: 'long'
-});
-
-/** Format date month day number */
-const formatDayNumber = (date, locale) => date.toLocaleDateString(locale, {
-  day: 'numeric'
-});
+  });
+}
 
 /**
  * Defines the props of the component.
@@ -2231,7 +2105,7 @@ const COMPONENT_NAME$e = 'DatePickerControlled';
  */
 const DatePickerControlled = /*#__PURE__*/forwardRef((props, ref) => {
   const {
-    locale = getCurrentLocale(),
+    locale,
     maxDate,
     minDate,
     nextButtonProps,
@@ -2243,12 +2117,12 @@ const DatePickerControlled = /*#__PURE__*/forwardRef((props, ref) => {
     todayOrSelectedDateRef,
     value
   } = props;
-  const {
-    weeks,
-    weekDays
-  } = React.useMemo(() => {
-    return getMonthCalendar(locale, selectedMonth, minDate, maxDate);
+  const days = React.useMemo(() => {
+    return getAnnotatedMonthCalendar(locale, minDate, maxDate, moment$1(selectedMonth));
   }, [locale, minDate, maxDate, selectedMonth]);
+  const weekDays = React.useMemo(() => {
+    return getWeekDays(locale);
+  }, [locale]);
   return /*#__PURE__*/React.createElement("div", {
     ref: ref,
     className: `${CLASSNAME$c}`
@@ -2266,46 +2140,37 @@ const DatePickerControlled = /*#__PURE__*/forwardRef((props, ref) => {
     })),
     label: /*#__PURE__*/React.createElement("span", {
       className: `${CLASSNAME$c}__month`
-    }, formatMonthYear(selectedMonth, locale))
+    }, moment$1(selectedMonth).locale(locale).format('MMMM YYYY'))
   }), /*#__PURE__*/React.createElement("div", {
     className: `${CLASSNAME$c}__calendar`
   }, /*#__PURE__*/React.createElement("div", {
     className: `${CLASSNAME$c}__week-days ${CLASSNAME$c}__days-wrapper`
-  }, weekDays.map(_ref => {
-    let {
-      letter,
-      number
-    } = _ref;
-    return /*#__PURE__*/React.createElement("div", {
-      key: number,
-      className: `${CLASSNAME$c}__day-wrapper`
-    }, /*#__PURE__*/React.createElement("span", {
-      className: `${CLASSNAME$c}__week-day`
-    }, letter.toLocaleUpperCase()));
-  })), /*#__PURE__*/React.createElement("div", {
+  }, weekDays.map(weekDay => /*#__PURE__*/React.createElement("div", {
+    key: weekDay.unix(),
+    className: `${CLASSNAME$c}__day-wrapper`
+  }, /*#__PURE__*/React.createElement("span", {
+    className: `${CLASSNAME$c}__week-day`
+  }, weekDay.format('dddd').slice(0, 1).toLocaleUpperCase())))), /*#__PURE__*/React.createElement("div", {
     className: `${CLASSNAME$c}__month-days ${CLASSNAME$c}__days-wrapper`
-  }, weeks.flatMap((week, weekIndex) => {
-    return weekDays.map((weekDay, dayIndex) => {
-      const {
-        date,
-        isOutOfRange
-      } = week[weekDay.number] || {};
-      const key = `${weekIndex}-${dayIndex}`;
-      const isToday = !isOutOfRange && date && isSameDay(date, new Date());
-      const isSelected = date && value && isSameDay(value, date);
+  }, days.map(annotatedDate => {
+    if (annotatedDate.isDisplayed) {
       return /*#__PURE__*/React.createElement("div", {
-        key: key,
+        key: annotatedDate.date.unix(),
         className: `${CLASSNAME$c}__day-wrapper`
-      }, date && /*#__PURE__*/React.createElement("button", {
-        ref: isSelected || !value && isToday ? todayOrSelectedDateRef : null,
+      }, /*#__PURE__*/React.createElement("button", {
+        ref: value && annotatedDate.date.isSame(value, 'day') || !value && annotatedDate.isToday ? todayOrSelectedDateRef : null,
         className: classnames(`${CLASSNAME$c}__month-day`, {
-          [`${CLASSNAME$c}__month-day--is-selected`]: isSelected,
-          [`${CLASSNAME$c}__month-day--is-today`]: isToday
+          [`${CLASSNAME$c}__month-day--is-selected`]: value && annotatedDate.date.isSame(value, 'day'),
+          [`${CLASSNAME$c}__month-day--is-today`]: annotatedDate.isClickable && annotatedDate.isToday
         }),
-        disabled: isOutOfRange,
+        disabled: !annotatedDate.isClickable,
         type: "button",
-        onClick: () => onChange(date)
-      }, /*#__PURE__*/React.createElement("span", null, formatDayNumber(date, locale))));
+        onClick: () => onChange(moment$1(annotatedDate.date).toDate())
+      }, /*#__PURE__*/React.createElement("span", null, annotatedDate.date.format('DD'))));
+    }
+    return /*#__PURE__*/React.createElement("div", {
+      key: annotatedDate.date.unix(),
+      className: `${CLASSNAME$c}__day-wrapper`
     });
   }))));
 });
@@ -2328,12 +2193,17 @@ const DatePicker = /*#__PURE__*/forwardRef((props, ref) => {
       onChange
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$f);
-  let referenceDate = value || defaultMonth || new Date();
-  if (!isDateValid(referenceDate)) {
+  let castedValue;
+  if (value) {
+    castedValue = moment$1(value);
+  } else if (defaultMonth) {
+    castedValue = moment$1(defaultMonth);
+  }
+  if (castedValue && !castedValue.isValid()) {
     // eslint-disable-next-line no-console
-    console.warn(`[@lumx/react/DatePicker] Invalid date provided ${referenceDate}`);
-    referenceDate = new Date();
+    console.warn(`[@lumx/react/DatePicker] Invalid date provided ${castedValue}`);
   }
+  const selectedDay = castedValue && castedValue.isValid() ? castedValue : moment$1();
   const [monthOffset, setMonthOffset] = useState(0);
   const setPrevMonth = () => setMonthOffset(monthOffset - 1);
   const setNextMonth = () => setMonthOffset(monthOffset + 1);
@@ -2341,7 +2211,7 @@ const DatePicker = /*#__PURE__*/forwardRef((props, ref) => {
     onChange(newDate);
     setMonthOffset(0);
   };
-  const selectedMonth = addMonthResetDay(referenceDate, monthOffset);
+  const selectedMonth = moment$1(selectedDay).locale(locale).add(monthOffset, 'months').toDate();
   return /*#__PURE__*/React.createElement(DatePickerControlled, _extends({
     ref: ref
   }, forwardedProps, {
@@ -2499,15 +2369,6 @@ function useFocusTrap(focusZoneElement, focusElement) {
   }, [focusElement, focusZoneElement]);
 }
 
-/**
- * Standard date format based on locale.
- */
-const formatDate = (value, locale) => value.toLocaleDateString(locale, {
-  year: 'numeric',
-  month: 'long',
-  day: 'numeric'
-});
-
 const _excluded$g = ["defaultMonth", "disabled", "isDisabled", "locale", "maxDate", "minDate", "name", "nextButtonProps", "onChange", "previousButtonProps", "value"];
 
 /**
@@ -2531,7 +2392,7 @@ const DatePickerField = /*#__PURE__*/forwardRef((props, ref) => {
       defaultMonth,
       disabled,
       isDisabled = disabled,
-      locale = getCurrentLocale(),
+      locale,
       maxDate,
       minDate,
       name,
@@ -2575,7 +2436,7 @@ const DatePickerField = /*#__PURE__*/forwardRef((props, ref) => {
     name: name,
     forceFocusStyle: isOpen,
     textFieldRef: anchorRef,
-    value: value ? formatDate(value, locale) : '',
+    value: value ? moment$1(value).locale(locale).format('LL') : '',
     onClick: toggleSimpleMenu,
     onChange: onTextFieldChange,
     onKeyPress: handleKeyboardNav,