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

package/_internal/PopoverDialog-21e5c9dd.js

@@ -1,647 +0,0 @@
-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