@lumx/react 3.20.1-alpha.29 → 3.20.1-alpha.30

package/_internal/PopoverDialog-35b2d87d.js

@@ -0,0 +1,657 @@
+import React__default, { useState, useRef, useCallback } from 'react';
+import { f as forwardRef } from './forwardRef-8bce732e.js';
+import { getRootClassName } from '@lumx/core/js/utils/className';
+import classNames from 'classnames';
+import { mdiChevronLeft } from '@lumx/icons/esm/chevron-left';
+import { mdiChevronRight } from '@lumx/icons/esm/chevron-right';
+import { last } from '@lumx/core/js/utils/collection/last';
+import { onEnterPressed } from '@lumx/core/js/utils';
+import { V as VISUALLY_HIDDEN } from './constants-d0e3f49e.js';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { I as IconButton } from './IconButton-8d61f5be.js';
+import { FlexBox } from './components/flex-box-15be92f6.js';
+import { Toolbar } from './components/toolbar-e7c984e6.js';
+import { Emphasis } from '@lumx/core/js/constants';
+import { TextField } from './components/text-field-8f13957e.js';
+import { T as Text } from './index-25c9e8c2.js';
+import { a as Button } from './Button-4b67daa8.js';
+import { u as useBooleanState } from './useBooleanState-2a3d237c.js';
+import { u as useDisableStateProps } from './useDisableStateProps-69e16b7c.js';
+import { P as Popover } from './index-25d2a45e.js';
+import { H as HeadingLevelProvider } from './HeadingLevelProvider-ebdcb0c7.js';
+import { P as Placement } from './constants-43721918.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$3 = 'DatePicker';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME$1 = getRootClassName(COMPONENT_NAME$3);
+
+/** 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$2 = '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$1}`,
+    style: style,
+    children: [/*#__PURE__*/jsx(Toolbar, {
+      className: `${CLASSNAME$1}__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$1}__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$1}__year`
+          }, "year") : /*#__PURE__*/jsx(Text, {
+            as: "p",
+            children: part
+          }, part))
+        })]
+      })
+    }), /*#__PURE__*/jsxs("div", {
+      className: `${CLASSNAME$1}__calendar`,
+      children: [/*#__PURE__*/jsx("div", {
+        className: `${CLASSNAME$1}__week-days ${CLASSNAME$1}__days-wrapper`,
+        children: weekDays.map(({
+          letter,
+          number,
+          long
+        }) => /*#__PURE__*/jsxs("div", {
+          className: `${CLASSNAME$1}__day-wrapper`,
+          children: [/*#__PURE__*/jsx("span", {
+            className: `${CLASSNAME$1}__week-day`,
+            "aria-hidden": true,
+            children: letter.toLocaleUpperCase()
+          }), /*#__PURE__*/jsx("span", {
+            className: "visually-hidden",
+            children: long
+          })]
+        }, number))
+      }), /*#__PURE__*/jsx("div", {
+        className: `${CLASSNAME$1}__month-days ${CLASSNAME$1}__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$1}__day-wrapper`,
+              children: date && /*#__PURE__*/jsxs(Button, {
+                ref: isSelected || !value && isToday ? todayOrSelectedDateRef : null,
+                className: classNames(`${CLASSNAME$1}__month-day`, {
+                  [`${CLASSNAME$1}__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$2;
+DatePickerControlled.className = CLASSNAME$1;
+
+/**
+ * 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$3;
+DatePicker.className = CLASSNAME$1;
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME$1 = '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$1;
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'PopoverDialog';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS = {};
+
+/**
+ * PopoverDialog component.
+ * Defines a popover that acts like a dialog
+ * * Has a dialog aria role
+ * * Sets a focus trap within the popover
+ * * Closes on click away and escape.
+ */
+const PopoverDialog = forwardRef((props, ref) => {
+  const {
+    children,
+    isOpen,
+    focusElement,
+    'aria-label': ariaLabel,
+    label = ariaLabel,
+    className,
+    ...forwardedProps
+  } = props;
+  return /*#__PURE__*/jsx(Popover, {
+    ...forwardedProps,
+    ref: ref,
+    className: classNames(className, CLASSNAME),
+    role: "dialog",
+    "aria-modal": "true"
+    /**
+     * If a label is set, set as aria-label.
+     * If it is undefined, the label can be set using the `aria-label` and `aria-labelledby` props
+     */,
+    "aria-label": label,
+    isOpen: isOpen,
+    focusElement: focusElement,
+    closeOnClickAway: true,
+    closeOnEscape: true,
+    withFocusTrap: true,
+    children: /*#__PURE__*/jsx(HeadingLevelProvider, {
+      level: 2,
+      children: children
+    })
+  });
+});
+PopoverDialog.displayName = COMPONENT_NAME;
+PopoverDialog.className = CLASSNAME;
+PopoverDialog.defaultProps = DEFAULT_PROPS;
+
+export { DatePicker as D, PopoverDialog as P, DatePickerControlled as a, DatePickerField as b };
+//# sourceMappingURL=PopoverDialog-35b2d87d.js.map