carbon-react 144.12.1 → 144.14.0

package/esm/components/date/__internal__/date-fns-fp/index.d.ts

@@ -1,5 +1,7 @@
 export { default as format } from "date-fns/fp/format";
 export { default as formatISO } from "date-fns/fp/formatISO";
 export { default as isMatch } from "date-fns/fp/isMatch";
+export { default as isValid } from "date-fns/fp/isValid";
 export { default as parse } from "date-fns/fp/parse";
+export { default as parseWithOptions } from "date-fns/fp/parseWithOptions";
 export { default as parseISO } from "date-fns/fp/parseISO";

package/esm/components/date/__internal__/date-fns-fp/index.js

@@ -3,5 +3,7 @@
 export { default as format } from "date-fns/fp/format";
 export { default as formatISO } from "date-fns/fp/formatISO";
 export { default as isMatch } from "date-fns/fp/isMatch";
+export { default as isValid } from "date-fns/fp/isValid";
 export { default as parse } from "date-fns/fp/parse";
+export { default as parseWithOptions } from "date-fns/fp/parseWithOptions";
 export { default as parseISO } from "date-fns/fp/parseISO";

package/esm/components/date/__internal__/date-picker/date-picker.component.d.ts

@@ -1,18 +1,12 @@
 import React from "react";
-import { DayPickerProps, Modifier } from "react-day-picker";
+import { DayPickerProps, Modifiers } from "react-day-picker";
 declare type CustomRefObject<T> = {
     current?: T | null;
 };
-/** there is an issue with typescript-to-proptypes package that means we need to override these types */
-interface Modifiers {
-    today: NonNullable<Modifier> | NonNullable<Modifier>[];
-    outside: NonNullable<Modifier> | NonNullable<Modifier>[];
-    [other: string]: NonNullable<Modifier> | NonNullable<Modifier>[];
-}
-export interface PickerProps extends Omit<DayPickerProps, "disabledDays" | "modifiers" | "selectedDays"> {
-    disabledDays?: NonNullable<Modifier> | NonNullable<Modifier>[] | undefined[];
+export interface PickerProps extends Omit<DayPickerProps, "mode" | "disabledDays" | "modifiers" | "selectedDays"> {
+    disabledDays?: NonNullable<Date> | NonNullable<Date>[] | undefined[];
     modifiers?: Partial<Modifiers>;
-    selectedDays?: NonNullable<Modifier> | NonNullable<Modifier>[] | undefined[];
+    selectedDays?: NonNullable<Date> | NonNullable<Date>[] | undefined[];
 }
 export interface DatePickerProps {
     /** Boolean to toggle where DatePicker is rendered in relation to the Date Input */
@@ -26,7 +20,7 @@ export interface DatePickerProps {
     /** Element that the DatePicker will be displayed under */
     inputElement: CustomRefObject<HTMLElement>;
     /** Currently selected date */
-    selectedDays?: Date;
+    selectedDays?: Date | undefined;
     /** Callback to handle mousedown event on picker container */
     pickerMouseDown?: () => void;
     /** Sets whether the picker should be displayed */

package/esm/components/date/__internal__/date-picker/date-picker.component.js

@@ -1,19 +1,16 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useCallback, useEffect, useMemo, useRef } from "react";
-import PropTypes from "prop-types";
-import DayPicker from "react-day-picker";
 import { flip, offset } from "@floating-ui/dom";
-import { getDisabledDays } from "../utils";
-import Popover from "../../../../__internal__/popover";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import PropTypes from "prop-types";
+import { DayPicker, defaultLocale } from "react-day-picker";
 import useLocale from "../../../../hooks/__internal__/useLocale";
+import Popover from "../../../../__internal__/popover";
 import Navbar from "../navbar";
 import Weekday from "../weekday";
-import StyledDayPicker from "./day-picker.style";
-import Events from "../../../../__internal__/utils/helpers/events";
+import { getDisabledDays } from "../utils";
 import { defaultFocusableSelectors } from "../../../../__internal__/focus-trap/focus-trap-utils";
-
-/** there is an issue with typescript-to-proptypes package that means we need to override these types */
-
+import Events from "../../../../__internal__/utils/helpers/events";
+import StyledDayPicker from "./day-picker.style";
 const popoverMiddleware = [offset(3), flip({
   fallbackStrategy: "initialPlacement"
 })];
@@ -31,6 +28,7 @@ export const DatePicker = ({
   pickerTabGuardId,
   onPickerClose
 }) => {
+  const [focusedMonth, setFocusedMonth] = useState(selectedDays || new Date());
   const locale = useLocale();
   const {
     localize,
@@ -45,11 +43,6 @@ export const DatePicker = ({
     const month = localize?.month(i);
     return month[0].toUpperCase() + month.slice(1);
   }), [localize]);
-  const monthsShort = useMemo(() => Array.from({
-    length: 12
-  }).map((_, i) => localize?.month(i, {
-    width: "abbreviated"
-  }).substring(0, 3)), [localize]);
   const weekdaysLong = useMemo(() => Array.from({
     length: 7
   }).map((_, i) => localize?.day(i)), [localize]);
@@ -64,54 +57,24 @@ export const DatePicker = ({
     }).substring(0, isGivenLocale("de") ? 2 : 3));
   }, [locale, localize]);
   const ref = useRef(null);
-  useEffect(() => {
-    if (open) {
-      // this is a temporary fix for some axe issues that are baked into the library we use for the picker
-      const captionElement = ref.current?.querySelector(".DayPicker-Caption");
-      /* istanbul ignore else */
-      if (captionElement) {
-        captionElement.removeAttribute("role");
-        captionElement.removeAttribute("aria-live");
-      }
-
-      // focus the selected or today's date first
-      const selectedDay = ref.current?.querySelector(".DayPicker-Day--selected") || ref.current?.querySelector(".DayPicker-Day--today");
-      const firstDay = ref.current?.querySelector(".DayPicker-Day[tabindex='0']");
-
-      /* istanbul ignore else */
-      if (selectedDay && firstDay !== selectedDay) {
-        selectedDay?.setAttribute("tabindex", "0");
-        firstDay?.setAttribute("tabindex", "-1");
-      }
-    }
-  }, [open]);
-  const handleDayClick = (date, modifiers, ev) => {
-    if (!modifiers.disabled) {
-      const {
-        id,
-        name
-      } = inputElement?.current?.firstChild;
-      ev.target = {
-        ...ev.target,
-        id,
-        name
-      };
-      onDayClick?.(date, ev);
-      onPickerClose?.();
-    }
+  const handleDayClick = (date, e) => {
+    /* istanbul ignore else */
+    if (date) onDayClick?.(date, e);
+    onPickerClose?.();
   };
   const handleKeyUp = useCallback(ev => {
     /* istanbul ignore else */
     if (open && Events.isEscKey(ev)) {
+      setFocusedMonth(selectedDays);
       inputElement.current?.querySelector("input")?.focus();
       setOpen(false);
       onPickerClose?.();
       ev.stopPropagation();
     }
-  }, [inputElement, onPickerClose, open, setOpen]);
+  }, [inputElement, onPickerClose, open, selectedDays, setOpen]);
   const handleOnKeyDown = ev => {
     /* istanbul ignore else */
-    if (ref.current?.querySelector(".DayPicker-NavBar button") === document.activeElement && Events.isTabKey(ev) && Events.isShiftKey(ev)) {
+    if (ref.current?.querySelector(".rdp-nav button") === document.activeElement && Events.isTabKey(ev) && Events.isShiftKey(ev)) {
       ev.preventDefault();
       setOpen(false);
       onPickerClose?.();
@@ -137,22 +100,31 @@ export const DatePicker = ({
       }
     }
   };
-  const formatDay = date => `${weekdaysShort[date.getDay()]} ${date.getDate()} ${monthsShort[date.getMonth()]} ${date.getFullYear()}`;
+  useEffect(() => {
+    if (selectedDays) {
+      setFocusedMonth(selectedDays);
+    }
+  }, [selectedDays]);
+  useEffect(() => {
+    if (!open && selectedDays) {
+      const fMonth = focusedMonth?.getMonth();
+      const sMonth = selectedDays?.getMonth();
+      if (fMonth !== sMonth) setFocusedMonth(selectedDays);
+    }
+  }, [focusedMonth, open, selectedDays]);
   if (!open) {
     return null;
   }
-  const localeUtils = {
-    formatDay
-  };
   const handleTabGuardFocus = () => {
     ref.current?.querySelector("button")?.focus();
   };
-  return /*#__PURE__*/React.createElement(Popover, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Popover, {
     placement: "bottom-start",
     reference: inputElement,
     middleware: popoverMiddleware,
     disablePortal: disablePortal
   }, /*#__PURE__*/React.createElement(StyledDayPicker, {
+    id: "styled-day-picker",
     ref: ref,
     onMouseDown: pickerMouseDown,
     onKeyUp: handleKeyUp,
@@ -164,29 +136,61 @@ export const DatePicker = ({
     tabIndex: 0,
     onFocus: handleTabGuardFocus
   }), /*#__PURE__*/React.createElement(DayPicker, _extends({
-    month: selectedDays,
-    months: monthsLong,
-    firstDayOfWeek: weekStartsOn,
-    onDayClick: handleDayClick,
-    selectedDays: selectedDays,
-    weekdayElement: weekdayElementProps => {
-      const {
-        className,
-        weekday
-      } = weekdayElementProps;
-      return /*#__PURE__*/React.createElement(Weekday, {
-        className: className,
-        title: weekdaysLong[weekday]
-      }, weekdaysShort[weekday]);
+    formatters: {
+      formatCaption: month => `${localize?.month(month.getMonth())} ${month.getFullYear()}`
+    },
+    required: false,
+    weekStartsOn: weekStartsOn,
+    onMonthChange: setFocusedMonth,
+    disabled: getDisabledDays(minDate, maxDate),
+    locale: {
+      localize: {
+        ...defaultLocale.localize,
+        months: monthsLong,
+        weekdaysLong,
+        weekdaysShort
+      }
+    },
+    selected: focusedMonth,
+    month: focusedMonth || /* istanbul ignore next */new Date(),
+    onDayClick: (d, _, e) => {
+      const date = d;
+      handleDayClick(date, e);
+    },
+    components: {
+      Nav: props => {
+        return /*#__PURE__*/React.createElement(Navbar, props);
+      },
+      Weekday: props => {
+        const fixedDays = {
+          Sunday: 0,
+          Monday: 1,
+          Tuesday: 2,
+          Wednesday: 3,
+          Thursday: 4,
+          Friday: 5,
+          Saturday: 6
+        };
+        const {
+          className,
+          "aria-label": ariaLabel
+        } = props;
+        const dayIndex = fixedDays[ariaLabel];
+        return /*#__PURE__*/React.createElement(Weekday, {
+          className: className,
+          title: weekdaysLong[dayIndex]
+        }, weekdaysShort[dayIndex]);
+      }
     },
-    navbarElement: /*#__PURE__*/React.createElement(Navbar, null),
     fixedWeeks: true,
-    initialMonth: selectedDays || undefined,
-    disabledDays: getDisabledDays(minDate, maxDate),
-    locale: locale.locale(),
-    localeUtils: localeUtils,
-    onDayKeyDown: handleOnDayKeyDown
-  }, pickerProps))));
+    defaultMonth: selectedDays || undefined,
+    onDayKeyDown: (date, modifiers, e) => {
+      handleOnDayKeyDown(date, modifiers, e);
+    }
+  }, pickerProps, {
+    showOutsideDays: true,
+    mode: "single"
+  })))));
 };
 DatePicker.displayName = "DatePicker";
 export default DatePicker;