@lumx/react 3.20.1-alpha.14 → 3.20.1-alpha.15

package/_internal/PopoverDialog-21e5c9dd.js

@@ -0,0 +1,647 @@
+import { f as forwardRef, _ as _extends, c as classNames } from './forwardRef-49d2bb84.js';
+import React__default, { useState, useRef, useCallback } from 'react';
+import { getRootClassName } from '@lumx/core/js/utils/className';
+import { mdiChevronRight, mdiChevronLeft } from '@lumx/icons';
+import last from 'lodash/last';
+import { onEnterPressed } from '@lumx/core/js/utils';
+import { V as VISUALLY_HIDDEN } from './constants-d0e3f49e.js';
+import { I as IconButton } from './IconButton-10585058.js';
+import { FlexBox } from './components/flex-box-c8701a85.js';
+import { Toolbar } from './components/toolbar-155562be.js';
+import { Emphasis } from '@lumx/core/js/constants';
+import { TextField } from './components/text-field-82733568.js';
+import { T as Text } from './index-b4d256e7.js';
+import { a as Button } from './Button-f19e18df.js';
+import { u as useBooleanState } from './useBooleanState-2a3d237c.js';
+import { u as useDisableStateProps } from './useDisableStateProps-fffc365f.js';
+import { P as Popover } from './index-f415b08e.js';
+import { H as HeadingLevelProvider } from './HeadingLevelProvider-e4817816.js';
+import { P as Placement } from './constants-b9e57936.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;
+}
+
+/**
+ * Defines the props of the component.
+ */
+
+/**
+ * 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__*/React__default.createElement("div", {
+    ref: ref,
+    className: `${CLASSNAME$1}`,
+    style: style
+  }, /*#__PURE__*/React__default.createElement(Toolbar, {
+    className: `${CLASSNAME$1}__toolbar`,
+    after: /*#__PURE__*/React__default.createElement(IconButton, _extends({}, nextButtonProps, {
+      emphasis: Emphasis.low,
+      icon: mdiChevronRight,
+      onClick: onNextMonthChange
+    })),
+    before: /*#__PURE__*/React__default.createElement(IconButton, _extends({}, previousButtonProps, {
+      emphasis: Emphasis.low,
+      icon: mdiChevronLeft,
+      onClick: onPrevMonthChange
+    })),
+    label: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("span", {
+      "aria-live": labelAriaLive,
+      className: onMonthChange ? VISUALLY_HIDDEN : '',
+      dir: "auto"
+    }, monthYear), onMonthChange && /*#__PURE__*/React__default.createElement(FlexBox, {
+      className: `${CLASSNAME$1}__month`,
+      orientation: "horizontal",
+      hAlign: "center",
+      gap: "regular",
+      vAlign: "center",
+      dir: "auto"
+    }, RegExp(`(.*)(${formattedYear})(.*)`).exec(monthYear)?.slice(1).filter(part => part !== '').map(part => part === formattedYear ? /*#__PURE__*/React__default.createElement(TextField, {
+      value: currentYear,
+      "aria-label": yearLabel,
+      onChange: onYearChange,
+      type: "number",
+      max: 9999,
+      min: 0,
+      onBlur: updateYear,
+      onKeyPress: updateYearOnEnterPressed,
+      key: "year",
+      className: `${CLASSNAME$1}__year`
+    }) : /*#__PURE__*/React__default.createElement(Text, {
+      as: "p",
+      key: part
+    }, part))))
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: `${CLASSNAME$1}__calendar`
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: `${CLASSNAME$1}__week-days ${CLASSNAME$1}__days-wrapper`
+  }, weekDays.map(({
+    letter,
+    number,
+    long
+  }) => /*#__PURE__*/React__default.createElement("div", {
+    key: number,
+    className: `${CLASSNAME$1}__day-wrapper`
+  }, /*#__PURE__*/React__default.createElement("span", {
+    className: `${CLASSNAME$1}__week-day`,
+    "aria-hidden": true
+  }, letter.toLocaleUpperCase()), /*#__PURE__*/React__default.createElement("span", {
+    className: "visually-hidden"
+  }, long)))), /*#__PURE__*/React__default.createElement("div", {
+    className: `${CLASSNAME$1}__month-days ${CLASSNAME$1}__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);
+      return /*#__PURE__*/React__default.createElement("div", {
+        key: key,
+        className: `${CLASSNAME$1}__day-wrapper`
+      }, date && /*#__PURE__*/React__default.createElement(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)
+      }, /*#__PURE__*/React__default.createElement("span", {
+        "aria-hidden": true
+      }, formatDayNumber(locale, date)), /*#__PURE__*/React__default.createElement("span", {
+        className: VISUALLY_HIDDEN
+      }, date.toLocaleDateString(locale, {
+        day: 'numeric',
+        month: 'long',
+        year: 'numeric'
+      }))));
+    });
+  }))));
+});
+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__*/React.createElement(DatePickerControlled, _extends({
+    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;
+
+/**
+ * Defines the props of the component.
+ */
+
+/**
+ * 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__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TextField, _extends({
+    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__*/React__default.createElement(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
+  }, /*#__PURE__*/React__default.createElement(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;
+
+/**
+ * PopoverDialog props.
+ * The PopoverDialog has the same props as the Popover but requires an accessible label.
+ */
+
+/**
+ * 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__*/React.createElement(Popover, _extends({}, 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
+  }), /*#__PURE__*/React.createElement(HeadingLevelProvider, {
+    level: 2
+  }, 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-21e5c9dd.js.map