@lumx/react 3.20.1-alpha.36 → 3.20.1-alpha.38

package/_internal/components/date-picker/index-a258d3ce.js

@@ -1,596 +0,0 @@
-import React__default, { useState, useRef, useCallback } from 'react';
-import { f as forwardRef } from '../../8bce732e.js';
-import { getRootClassName } from '@lumx/core/js/utils/className';
-import classNames from 'classnames';
-import last from 'lodash/last';
-import { onEnterPressed } from '@lumx/core/js/utils';
-import { V as VISUALLY_HIDDEN } from '../../d0e3f49e.js';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { I as IconButton } from '../../b83e864b.js';
-import { a as mdiChevronRight, m as mdiChevronLeft } from '../../827b804a.js';
-import { FlexBox } from '../flex-box/index-0d6b6b43.js';
-import { Toolbar } from '../toolbar/index-7041a5a6.js';
-import { Emphasis } from '@lumx/core/js/constants';
-import { TextField } from '../text-field/index-47c98d09.js';
-import { T as Text } from '../../e913a3af.js';
-import { a as Button } from '../../7ad474e4.js';
-import { u as useBooleanState } from '../../2a3d237c.js';
-import { useDisableStateProps } from '../../utils/disabled/index-075b99c3.js';
-import { PopoverDialog } from '../popover-dialog/index-654d2abc.js';
-import { P as Placement } from '../../4f4c0582.js';
-
-/**
- * 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.
- */
-const COMPONENT_NAME$2 = 'DatePicker';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME$2);
-
-/** Get first day of week for locale from the browser API */
-const getFromBrowser = locale => {
-  try {
-    const localeMetadata = new Intl.Locale(locale.code);
-    const {
-      firstDay
-    } = localeMetadata.getWeekInfo?.() || 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, searchBy = 'code') => {
-  // Search for locale (lang + region)
-  for (const {
-    localeRX,
-    firstDay
-  } of FIRST_DAY_FOR_LOCALES) {
-    if (localeRX.test(locale[searchBy])) return firstDay;
-  }
-  // Fallback search for locale lang
-  if (locale.code !== locale.language) {
-    return getFromConstant(locale, 'language');
-  }
-  return undefined;
-};
-
-/**
- * Get first day of the week for the given locale code (language + region).
- */
-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;
-
-/**
- * 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).
- */
-const getWeekDays = locale => {
-  const iterDate = new Date();
-  const firstDay = getFirstDayOfWeek(locale) ?? 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.code, {
-      weekday: 'narrow'
-    });
-    // Weed day long notation
-    const long = iterDate.toLocaleDateString(locale.code, {
-      weekday: 'long'
-    });
-    // Day number (1-based index starting on Monday)
-    const number = iterDate.getDay();
-    weekDays.push({
-      letter,
-      number,
-      long
-    });
-    iterDate.setDate(iterDate.getDate() + 1);
-  }
-  return weekDays;
-};
-
-/** Up to 6 rows can appear in a month calendar => 4 weeks + 1 start of month partial week + 1 send of month partial week */
-const MONTH_ROW_COUNT = 6;
-
-/**
- * Get month calendar.
- * A list of weeks with days indexed by week day number
- */
-const getMonthCalendar = (locale, referenceDate = new Date(), rangeMinDate, rangeMaxDate) => {
-  const month = referenceDate.getMonth();
-  const iterDate = new Date(referenceDate);
-  iterDate.setDate(1);
-  const minDate = rangeMinDate && new Date(rangeMinDate);
-  const maxDate = rangeMaxDate && new Date(rangeMaxDate);
-  // Reset time to compare dates only.
-  iterDate.setUTCHours(0, 0, 0, 0);
-  minDate?.setUTCHours(0, 0, 0, 0);
-  maxDate?.setUTCHours(0, 0, 0, 0);
-  const weekDays = getWeekDays(locale);
-  const lastDayOfWeek = last(weekDays);
-  const weeks = [];
-  let week = {};
-  let rowCount = 0;
-  while (rowCount < MONTH_ROW_COUNT) {
-    const weekDayNumber = iterDate.getDay();
-    const day = {
-      date: new Date(iterDate.getTime())
-    };
-
-    // If a range is specified, check if the day is out of range.
-    // min and max date are included within the valid range.
-    if (minDate && iterDate < minDate || maxDate && iterDate > maxDate) {
-      day.isOutOfRange = true;
-    }
-    if (iterDate.getMonth() === month) {
-      week[weekDayNumber] = day;
-    }
-    if (weekDayNumber === lastDayOfWeek.number) {
-      weeks.push(week);
-      rowCount += 1;
-      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) => isDateValid(date1) && isDateValid(date2) && date1.getFullYear() === date2.getFullYear() && date1.getMonth() === date2.getMonth() && date1.getDate() === date2.getDate();
-
-/**
- * Get current browser locale.
- */
-const getCurrentLocale = () => navigator.languages?.[0] || navigator.language;
-
-/**
- * Parse locale code
- * @example
- *   parseLocale('EN') // => { code: 'en', language: 'en' }
- *   parseLocale('en_us') // => { code: 'en-US', language: 'en', region: 'US' }
- *   parseLocale('EN-US') // => { code: 'en-US', language: 'en', region: 'US' }
- */
-function parseLocale(locale) {
-  const [rawLanguage, rawRegion] = locale.split(/[-_]/);
-  if (!rawLanguage) {
-    return undefined;
-  }
-  const language = rawLanguage.toLowerCase();
-  let region;
-  let code = language;
-  if (rawRegion) {
-    region = rawRegion.toUpperCase();
-    code += `-${region}`;
-  }
-  return {
-    code,
-    region,
-    language
-  };
-}
-
-/**
- * Returns the value from the previous render.
- */
-function usePreviousValue(value) {
-  const prevValueRef = React__default.useRef();
-  const prevValue = prevValueRef.current;
-  React__default.useEffect(() => {
-    prevValueRef.current = value;
-  }, [value]);
-  return prevValue;
-}
-
-const getYearDisplayName = locale => {
-  let label;
-  try {
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    const displayNames = new Intl.DisplayNames(locale, {
-      type: 'dateTimeField'
-    });
-    label = displayNames.of('year');
-  } catch (error) {
-    label = '';
-  }
-  return label;
-};
-
-function formatDayNumber(locale, date) {
-  const formattedDate = date.toLocaleDateString(locale, {
-    day: 'numeric'
-  });
-  if (formattedDate.match(/\d/)) return formattedDate.replace(/\D*(\d+)\D*/g, '$1');
-  return formattedDate;
-}
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME$1 = 'DatePickerControlled';
-
-/**
- * DatePickerControlled component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-const DatePickerControlled = forwardRef((props, ref) => {
-  const {
-    locale = getCurrentLocale(),
-    maxDate,
-    minDate,
-    nextButtonProps,
-    onChange,
-    onNextMonthChange,
-    onPrevMonthChange,
-    previousButtonProps,
-    selectedMonth,
-    todayOrSelectedDateRef,
-    value,
-    onMonthChange,
-    style
-  } = props;
-  const {
-    weeks,
-    weekDays
-  } = React__default.useMemo(() => {
-    const localeObj = parseLocale(locale);
-    return getMonthCalendar(localeObj, selectedMonth, minDate, maxDate);
-  }, [locale, minDate, maxDate, selectedMonth]);
-  const selectedYear = selectedMonth.getFullYear();
-  const formattedYear = selectedMonth.toLocaleDateString(locale, {
-    year: 'numeric'
-  }).slice(0, 4);
-  const [currentYear, setCurrentYear] = React__default.useState(String(selectedYear));
-
-  // Updates month offset when validating year. Adds or removes 12 months per year when updating year value.
-  const updateMonthOffset = React__default.useCallback(newYearValue => {
-    const yearNumber = Number(newYearValue);
-    if (yearNumber < 0 && yearNumber >= 9999) {
-      return;
-    }
-    const previousYearNumber = selectedMonth.getFullYear();
-    const offset = (yearNumber - previousYearNumber) * 12;
-    onMonthChange?.(addMonthResetDay(selectedMonth, offset));
-  }, [selectedMonth, onMonthChange]);
-  const onYearChange = React__default.useCallback((newYearValue, _, event) => {
-    setCurrentYear(newYearValue);
-
-    // Detect if change is coming from the spin up/down arrows
-    const inputType = event?.nativeEvent?.inputType;
-    if (
-    // Chrome/Safari
-    !inputType ||
-    // Firefox
-    inputType === 'insertReplacementText') {
-      updateMonthOffset(newYearValue);
-    }
-  }, [updateMonthOffset]);
-  const updateYear = React__default.useCallback(() => {
-    updateMonthOffset(currentYear);
-  }, [updateMonthOffset, currentYear]);
-  const updateYearOnEnterPressed = React__default.useMemo(() => onEnterPressed(updateYear), [updateYear]);
-  const monthYear = selectedMonth.toLocaleDateString(locale, {
-    year: 'numeric',
-    month: 'long'
-  });
-
-  // Update current year when selected year changes
-  React__default.useEffect(() => {
-    setCurrentYear(String(selectedYear));
-  }, [selectedYear]);
-  const prevSelectedMonth = usePreviousValue(selectedMonth);
-  const monthHasChanged = prevSelectedMonth && !isSameDay(selectedMonth, prevSelectedMonth);
-
-  // Only set the aria-live after the month has changed otherwise it can get announced on mount when used in the popover dialog
-  const [labelAriaLive, setLabelAriaLive] = React__default.useState();
-  React__default.useEffect(() => {
-    if (monthHasChanged) setLabelAriaLive('polite');
-  }, [monthHasChanged]);
-  const yearLabel = getYearDisplayName(locale);
-  return /*#__PURE__*/jsxs("div", {
-    ref: ref,
-    className: `${CLASSNAME}`,
-    style: style,
-    children: [/*#__PURE__*/jsx(Toolbar, {
-      className: `${CLASSNAME}__toolbar`,
-      after: /*#__PURE__*/jsx(IconButton, {
-        ...nextButtonProps,
-        emphasis: Emphasis.low,
-        icon: mdiChevronRight,
-        onClick: onNextMonthChange
-      }),
-      before: /*#__PURE__*/jsx(IconButton, {
-        ...previousButtonProps,
-        emphasis: Emphasis.low,
-        icon: mdiChevronLeft,
-        onClick: onPrevMonthChange
-      }),
-      label: /*#__PURE__*/jsxs(Fragment, {
-        children: [/*#__PURE__*/jsx("span", {
-          "aria-live": labelAriaLive,
-          className: onMonthChange ? VISUALLY_HIDDEN : '',
-          dir: "auto",
-          children: monthYear
-        }), onMonthChange && /*#__PURE__*/jsx(FlexBox, {
-          className: `${CLASSNAME}__month`,
-          orientation: "horizontal",
-          hAlign: "center",
-          gap: "regular",
-          vAlign: "center",
-          dir: "auto",
-          children: RegExp(`(.*)(${formattedYear})(.*)`).exec(monthYear)?.slice(1).filter(part => part !== '').map(part => part === formattedYear ? /*#__PURE__*/jsx(TextField, {
-            value: currentYear,
-            "aria-label": yearLabel,
-            onChange: onYearChange,
-            type: "number",
-            max: 9999,
-            min: 0,
-            onBlur: updateYear,
-            onKeyPress: updateYearOnEnterPressed,
-            className: `${CLASSNAME}__year`
-          }, "year") : /*#__PURE__*/jsx(Text, {
-            as: "p",
-            children: part
-          }, part))
-        })]
-      })
-    }), /*#__PURE__*/jsxs("div", {
-      className: `${CLASSNAME}__calendar`,
-      children: [/*#__PURE__*/jsx("div", {
-        className: `${CLASSNAME}__week-days ${CLASSNAME}__days-wrapper`,
-        children: weekDays.map(({
-          letter,
-          number,
-          long
-        }) => /*#__PURE__*/jsxs("div", {
-          className: `${CLASSNAME}__day-wrapper`,
-          children: [/*#__PURE__*/jsx("span", {
-            className: `${CLASSNAME}__week-day`,
-            "aria-hidden": true,
-            children: letter.toLocaleUpperCase()
-          }), /*#__PURE__*/jsx("span", {
-            className: "visually-hidden",
-            children: long
-          })]
-        }, number))
-      }), /*#__PURE__*/jsx("div", {
-        className: `${CLASSNAME}__month-days ${CLASSNAME}__days-wrapper`,
-        children: 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);
-            return /*#__PURE__*/jsx("div", {
-              className: `${CLASSNAME}__day-wrapper`,
-              children: date && /*#__PURE__*/jsxs(Button, {
-                ref: isSelected || !value && isToday ? todayOrSelectedDateRef : null,
-                className: classNames(`${CLASSNAME}__month-day`, {
-                  [`${CLASSNAME}__month-day--is-today`]: isToday
-                }),
-                disabled: isOutOfRange,
-                isSelected: isSelected,
-                emphasis: "low",
-                onClick: () => onChange(date),
-                children: [/*#__PURE__*/jsx("span", {
-                  "aria-hidden": true,
-                  children: formatDayNumber(locale, date)
-                }), /*#__PURE__*/jsx("span", {
-                  className: VISUALLY_HIDDEN,
-                  children: date.toLocaleDateString(locale, {
-                    day: 'numeric',
-                    month: 'long',
-                    year: 'numeric'
-                  })
-                })]
-              })
-            }, key);
-          });
-        })
-      })]
-    })]
-  });
-});
-DatePickerControlled.displayName = COMPONENT_NAME$1;
-DatePickerControlled.className = CLASSNAME;
-
-/**
- * DatePicker component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-const DatePicker = forwardRef((props, ref) => {
-  const {
-    defaultMonth,
-    locale,
-    value,
-    onChange,
-    ...forwardedProps
-  } = props;
-  let referenceDate = value || defaultMonth || new Date();
-  if (!isDateValid(referenceDate)) {
-    // eslint-disable-next-line no-console
-    console.warn(`[@lumx/react/DatePicker] Invalid date provided ${referenceDate}`);
-    referenceDate = new Date();
-  }
-  const [selectedMonth, setSelectedMonth] = useState(referenceDate);
-  const setPrevMonth = () => setSelectedMonth(current => addMonthResetDay(current, -1));
-  const setNextMonth = () => setSelectedMonth(current => addMonthResetDay(current, +1));
-  const onDatePickerChange = newDate => {
-    onChange(newDate);
-  };
-  return /*#__PURE__*/jsx(DatePickerControlled, {
-    ref: ref,
-    ...forwardedProps,
-    defaultMonth: defaultMonth,
-    locale: locale,
-    value: value,
-    onPrevMonthChange: setPrevMonth,
-    onNextMonthChange: setNextMonth,
-    selectedMonth: selectedMonth,
-    onChange: onDatePickerChange,
-    onMonthChange: setSelectedMonth
-  });
-});
-DatePicker.displayName = COMPONENT_NAME$2;
-DatePicker.className = CLASSNAME;
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'DatePickerField';
-
-/**
- * DatePickerField component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-const DatePickerField = forwardRef((props, ref) => {
-  const {
-    disabledStateProps,
-    otherProps
-  } = useDisableStateProps(props);
-  const {
-    defaultMonth,
-    locale = getCurrentLocale(),
-    maxDate,
-    minDate,
-    name,
-    nextButtonProps,
-    onChange,
-    previousButtonProps,
-    value,
-    ...forwardedProps
-  } = otherProps;
-  const anchorRef = useRef(null);
-  const [isOpen, close,, toggleOpen] = useBooleanState(false);
-  const handleKeyboardNav = useCallback(evt => {
-    if (evt.key === 'Enter' || evt.key === ' ') {
-      toggleOpen();
-    }
-  }, [toggleOpen]);
-  const onTextFieldChange = useCallback((textFieldValue, textFieldName, event) => {
-    if (!textFieldValue) {
-      onChange(undefined, textFieldName, event);
-    }
-  }, [onChange]);
-  const onDatePickerChange = useCallback(newDate => {
-    onChange(newDate, name);
-    close();
-  }, [name, onChange, close]);
-
-  // Format date for text field
-  const textFieldValue = value?.toLocaleDateString(locale, {
-    year: 'numeric',
-    month: 'long',
-    day: 'numeric'
-  }) || '';
-  const todayOrSelectedDateRef = React__default.useRef(null);
-  return /*#__PURE__*/jsxs(Fragment, {
-    children: [/*#__PURE__*/jsx(TextField, {
-      ref: ref,
-      ...forwardedProps,
-      name: name,
-      forceFocusStyle: isOpen,
-      textFieldRef: anchorRef,
-      value: textFieldValue,
-      onClick: toggleOpen,
-      onChange: onTextFieldChange,
-      onKeyPress: handleKeyboardNav,
-      ...disabledStateProps,
-      readOnly: true,
-      "aria-haspopup": "dialog"
-    }), isOpen ? /*#__PURE__*/jsx(PopoverDialog
-    // Can't use `aria-labelledby` targeting the text field label element (not correctly read on some screen readers)
-    , {
-      "aria-label": forwardedProps.label,
-      anchorRef: anchorRef,
-      placement: Placement.BOTTOM_START,
-      isOpen: isOpen,
-      onClose: close
-      // On open, focus the selected day or today
-      ,
-      focusElement: todayOrSelectedDateRef,
-      children: /*#__PURE__*/jsx(DatePicker, {
-        locale: locale,
-        maxDate: maxDate,
-        minDate: minDate,
-        value: value,
-        todayOrSelectedDateRef: todayOrSelectedDateRef,
-        onChange: onDatePickerChange,
-        defaultMonth: defaultMonth,
-        nextButtonProps: nextButtonProps,
-        previousButtonProps: previousButtonProps
-      })
-    }) : null]
-  });
-});
-DatePickerField.displayName = COMPONENT_NAME;
-
-export { DatePicker, DatePickerControlled, DatePickerField };