clayui-date-picker 3.165.0

package/lib/esm/index.js

@@ -0,0 +1,697 @@
+import Button from "@clayui/button";
+import { KeyboardArrowsIndicator } from "@clayui/core";
+import DropDown from "@clayui/drop-down";
+import { ClayInput } from "@clayui/form";
+import Icon from "@clayui/icon";
+import {
+  ClayPortal,
+  FocusScope,
+  sub,
+  useControlledState,
+  useId
+} from "@clayui/shared";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import DateNavigation from "./DateNavigation";
+import DayNumber from "./DayNumber";
+import DaysTable from "./DaysTable";
+import {
+  clamp,
+  formatDate,
+  isAfter,
+  isBefore,
+  isSameDay,
+  isValid,
+  parseDate,
+  range as createRange,
+  setDate,
+  setMonth
+} from "./Helpers";
+import {
+  useCalendarNavigation,
+  useCurrentTime,
+  useDaysSelected,
+  useWeeks
+} from "./Hooks";
+import InputDate from "./InputDate";
+import TimePicker from "./TimePicker";
+import Weekday from "./Weekday";
+import WeekdayHeader from "./WeekdayHeader";
+var FirstDayOfWeek = /* @__PURE__ */ ((FirstDayOfWeek2) => {
+  FirstDayOfWeek2[FirstDayOfWeek2["Sunday"] = 0] = "Sunday";
+  FirstDayOfWeek2[FirstDayOfWeek2["Monday"] = 1] = "Monday";
+  FirstDayOfWeek2[FirstDayOfWeek2["Tuesday"] = 2] = "Tuesday";
+  FirstDayOfWeek2[FirstDayOfWeek2["Wednesday"] = 3] = "Wednesday";
+  FirstDayOfWeek2[FirstDayOfWeek2["Thursday"] = 4] = "Thursday";
+  FirstDayOfWeek2[FirstDayOfWeek2["Friday"] = 5] = "Friday";
+  FirstDayOfWeek2[FirstDayOfWeek2["Saturday"] = 6] = "Saturday";
+  return FirstDayOfWeek2;
+})(FirstDayOfWeek || {});
+const DEFAULT_DATE_TIME = {
+  hours: 12,
+  milliseconds: 0,
+  minutes: 0,
+  seconds: 0
+};
+const NEW_DATE = /* @__PURE__ */ new Date();
+const TIME_FORMAT = "HH:mm";
+const TIME_FORMAT_12H = "hh:mm aa";
+function normalizeTime(date) {
+  return setDate(date, { hours: 12, milliseconds: 0, minutes: 0, seconds: 0 });
+}
+const DatePicker = React.forwardRef(
+  ({
+    ariaLabels = {
+      buttonChooseDate: "Choose date",
+      buttonDot: "Select current date",
+      buttonNextMonth: "Select the next month",
+      buttonPreviousMonth: "Select the previous month",
+      chooseDate: "Use the calendar to choose a Date. Current selection {0}",
+      dialog: "Choose date",
+      openCalendar: "Open Calendar Picker",
+      outOfRange: "The entered value is outside the allowed range and was not applied",
+      selectMonth: "Select a month",
+      selectYear: "Select a year"
+    },
+    dateFormat = "yyyy-MM-dd",
+    defaultExpanded,
+    defaultMonth,
+    defaultValue,
+    disabled,
+    displayKeyboardArrowsIndicator = false,
+    expanded,
+    firstDayOfWeek = 0,
+    footerElement,
+    id,
+    initialExpanded = false,
+    initialMonth,
+    inputName,
+    max,
+    min,
+    months = [
+      "January",
+      "February",
+      "March",
+      "April",
+      "May",
+      "June",
+      "July",
+      "August",
+      "September",
+      "October",
+      "November",
+      "December"
+    ],
+    onChange,
+    onExpandedChange,
+    onNavigation = () => {
+    },
+    onValueChange,
+    placeholder,
+    range,
+    spritemap,
+    time = false,
+    timezone,
+    use12Hours = false,
+    useNative = false,
+    value,
+    weekdaysShort = ["S", "M", "T", "W", "T", "F", "S"],
+    years = {
+      end: NEW_DATE.getFullYear(),
+      start: NEW_DATE.getFullYear()
+    },
+    yearsCheck = true,
+    ...otherProps
+  }, ref) => {
+    const [parsedMin, parsedMax] = useMemo(() => {
+      const parseBound = (value2) => {
+        if (!value2) {
+          return void 0;
+        }
+        const parsed = parseDate(
+          value2,
+          time ? `${dateFormat} ${use12Hours ? TIME_FORMAT_12H : TIME_FORMAT}` : dateFormat,
+          NEW_DATE
+        );
+        return isValid(parsed) ? parsed : void 0;
+      };
+      const minDate = parseBound(min);
+      const maxDate = parseBound(max);
+      if (minDate && maxDate && !isBefore(minDate, maxDate)) {
+        console.warn(
+          "ClayDatePicker: `min` must be earlier than `max`. Both bounds will be ignored."
+        );
+        return [void 0, void 0];
+      }
+      return [minDate, maxDate];
+    }, [min, max, dateFormat, time, use12Hours]);
+    const isDayDisabled = useCallback(
+      (date) => {
+        if (parsedMin && isBefore(date, parsedMin) && !isSameDay(date, parsedMin)) {
+          return true;
+        }
+        if (parsedMax && isAfter(date, parsedMax) && !isSameDay(date, parsedMax)) {
+          return true;
+        }
+        return false;
+      },
+      [parsedMin, parsedMax]
+    );
+    const isDateTimeOutOfRange = useCallback(
+      (date) => {
+        if (parsedMin && isBefore(date, parsedMin)) {
+          return true;
+        }
+        if (parsedMax && isAfter(date, parsedMax)) {
+          return true;
+        }
+        return false;
+      },
+      [parsedMin, parsedMax]
+    );
+    const getDefaultMonth = useCallback(
+      () => clamp(
+        defaultMonth ?? initialMonth ?? /* @__PURE__ */ new Date(),
+        parsedMin,
+        parsedMax
+      ),
+      [defaultMonth, initialMonth, parsedMin, parsedMax]
+    );
+    const [internalValue, setValue, isUncontrolled] = useControlledState({
+      defaultName: "defaultValue",
+      defaultValue,
+      handleName: "onChange",
+      name: "value",
+      onChange: onChange ?? onValueChange,
+      value
+    });
+    const [daysSelected, setDaysSelected] = useDaysSelected(() => {
+      if (internalValue) {
+        const days = hasDaysSelected({
+          checkRangeYears: yearsCheck,
+          dateFormat,
+          is12Hours: use12Hours,
+          isTime: time,
+          value: internalValue,
+          years
+        });
+        if (days) {
+          return [normalizeTime(days[0]), normalizeTime(days[1])];
+        }
+      }
+      const date = normalizeTime(getDefaultMonth());
+      return [date, date];
+    });
+    const [currentMonth, setCurrentMonth] = useState(
+      () => (
+        // Normalize the date to always set noon to avoid time zone problems
+        // and to the 1st of the month.
+        setDate(daysSelected[0], { date: 1, ...DEFAULT_DATE_TIME })
+      )
+    );
+    const chooseDateRef = useRef(null);
+    const [currentTime, setCurrentTime] = useCurrentTime(() => {
+      if (time && internalValue) {
+        const [startDate] = fromStringToRange(
+          internalValue,
+          `${dateFormat} ${use12Hours ? TIME_FORMAT_12H : TIME_FORMAT}`,
+          NEW_DATE
+        );
+        if (startDate.toString() !== "Invalid Date") {
+          const hours = use12Hours ? formatDate(startDate, "hh") : formatDate(startDate, "HH");
+          const minutes = formatDate(startDate, "mm");
+          return use12Hours ? `${hours}:${minutes} ${formatDate(startDate, "a")}` : `${hours}:${minutes}`;
+        }
+      }
+      return "--:--";
+    }, use12Hours);
+    const [weeks, setWeeks] = useWeeks(currentMonth, firstDayOfWeek);
+    const [expandedValue, setExpandedValue] = useControlledState({
+      defaultName: "defaultExpanded",
+      defaultValue: defaultExpanded === void 0 ? initialExpanded : defaultExpanded,
+      handleName: "onExpandedChange",
+      name: "expanded",
+      onChange: onExpandedChange,
+      value: expanded
+    });
+    const triggerElementRef = useRef(null);
+    const liveRegionRef = useRef(null);
+    const announceOutOfRange = useCallback(() => {
+      const node = liveRegionRef.current;
+      if (!node || !ariaLabels.outOfRange) {
+        return;
+      }
+      node.textContent = "";
+      node.textContent = ariaLabels.outOfRange;
+    }, [ariaLabels.outOfRange]);
+    const menuElementRef = useRef(null);
+    const changeMonth = (date) => {
+      const dateNormalized = setDate(date, {
+        date: 1,
+        ...DEFAULT_DATE_TIME
+      });
+      setCurrentMonth(dateNormalized);
+      onNavigation(dateNormalized);
+      if (!useNative) {
+        setWeeks(dateNormalized);
+      }
+    };
+    const timePickerConfig = useMemo(() => {
+      if (!time || use12Hours || !parsedMin && !parsedMax) {
+        return void 0;
+      }
+      const [day] = daysSelected;
+      let hoursMin = 0;
+      let hoursMax = 23;
+      let minutesMin = 0;
+      let minutesMax = 59;
+      const currentHours = Number(currentTime.split(":")[0]);
+      if (parsedMin && isSameDay(day, parsedMin)) {
+        hoursMin = parsedMin.getHours();
+        if (currentHours === hoursMin) {
+          minutesMin = parsedMin.getMinutes();
+        }
+      }
+      if (parsedMax && isSameDay(day, parsedMax)) {
+        hoursMax = parsedMax.getHours();
+        if (currentHours === hoursMax) {
+          minutesMax = parsedMax.getMinutes();
+        }
+      }
+      return {
+        use12Hours: {
+          ampm: { am: "AM", pm: "PM" },
+          hours: { max: 12, min: 1 },
+          minutes: { max: 59, min: 0 }
+        },
+        use24Hours: {
+          ampm: { am: "AM", pm: "PM" },
+          hours: { max: hoursMax, min: hoursMin },
+          minutes: { max: minutesMax, min: minutesMin }
+        }
+      };
+    }, [time, use12Hours, daysSelected, currentTime, parsedMin, parsedMax]);
+    const memoizedYears = useMemo(
+      () => createRange(years).map((elem) => {
+        return {
+          label: elem,
+          value: elem
+        };
+      }),
+      [years]
+    );
+    const memoizedMonths = useMemo(
+      () => months.map((month, index) => {
+        return {
+          label: month,
+          value: index
+        };
+      }),
+      [months]
+    );
+    const handleDayClicked = (date) => {
+      if (isDayDisabled(date)) {
+        announceOutOfRange();
+        return;
+      }
+      const [startDate, endDate] = daysSelected;
+      let newDaysSelected;
+      let daysSelectedToString;
+      if (range) {
+        if (startDate.toString() !== endDate.toString()) {
+          newDaysSelected = [date, date];
+        } else if (date < startDate) {
+          newDaysSelected = [date, endDate];
+        } else {
+          newDaysSelected = [startDate, date];
+        }
+        daysSelectedToString = fromRangeToString(
+          newDaysSelected,
+          dateFormat
+        );
+        const [newStartDate, newEndDate] = newDaysSelected;
+        if (newStartDate.getMonth() !== newEndDate.getMonth()) {
+          changeMonth(startDate);
+        }
+      } else {
+        newDaysSelected = [date, date];
+        daysSelectedToString = formatDate(date, dateFormat);
+        if (time) {
+          daysSelectedToString = `${daysSelectedToString} ${currentTime}`;
+        }
+      }
+      setDaysSelected(newDaysSelected);
+      setValue(daysSelectedToString);
+    };
+    const updateDate = useCallback(
+      (value2) => {
+        const currentDate = getDefaultMonth();
+        if (!value2) {
+          changeMonth(currentDate);
+          setDaysSelected([currentDate, currentDate]);
+          if (time) {
+            setCurrentTime(
+              "--",
+              "--",
+              use12Hours ? "--" : void 0
+            );
+          }
+        } else {
+          const days = hasDaysSelected({
+            checkRangeYears: yearsCheck,
+            dateFormat,
+            is12Hours: use12Hours,
+            isTime: time,
+            value: value2,
+            years
+          });
+          if (days) {
+            const [startDate, endDate] = days;
+            const referenceStart = time ? startDate : setDate(startDate, {
+              hours: 12,
+              milliseconds: 0,
+              minutes: 0,
+              seconds: 0
+            });
+            const referenceEnd = time ? endDate : setDate(endDate, {
+              hours: 12,
+              milliseconds: 0,
+              minutes: 0,
+              seconds: 0
+            });
+            const startOutOfRange = time ? isDateTimeOutOfRange(referenceStart) : isDayDisabled(referenceStart);
+            const endOutOfRange = time ? isDateTimeOutOfRange(referenceEnd) : isDayDisabled(referenceEnd);
+            if (startOutOfRange || endOutOfRange) {
+              announceOutOfRange();
+              return;
+            }
+            if (time) {
+              setCurrentTime(
+                startDate.getHours(),
+                startDate.getMinutes(),
+                use12Hours ? formatDate(
+                  startDate,
+                  "a"
+                ) : void 0
+              );
+            } else {
+              changeMonth(startDate);
+              setDaysSelected([startDate, endDate]);
+            }
+          }
+        }
+      },
+      [
+        dateFormat,
+        use12Hours,
+        time,
+        years,
+        yearsCheck,
+        isDayDisabled,
+        isDateTimeOutOfRange,
+        announceOutOfRange
+      ]
+    );
+    const inputChange = (event) => {
+      const { value: value2 } = event.target;
+      updateDate(value2);
+      setValue(value2);
+    };
+    useEffect(() => {
+      if (!isUncontrolled) {
+        updateDate(internalValue);
+      }
+    }, [isUncontrolled, internalValue]);
+    const handleDotClicked = () => {
+      const currentDateTime = getDefaultMonth();
+      if (isDayDisabled(currentDateTime)) {
+        announceOutOfRange();
+        return;
+      }
+      const [, endDate] = daysSelected;
+      changeMonth(currentDateTime);
+      const newDaysSelected = range && endDate < currentDateTime ? [endDate, currentDateTime] : [currentDateTime, endDate];
+      let dateFormatted;
+      if (range) {
+        dateFormatted = fromRangeToString(newDaysSelected, dateFormat);
+      } else if (time) {
+        dateFormatted = `${formatDate(
+          currentDateTime,
+          dateFormat
+        )} ${setCurrentTime(
+          currentDateTime.getHours(),
+          currentDateTime.getMinutes(),
+          use12Hours ? formatDate(currentDateTime, "a") : void 0
+        )}`;
+      } else {
+        dateFormatted = formatDate(currentDateTime, dateFormat);
+      }
+      setDaysSelected(newDaysSelected);
+      setValue(dateFormatted);
+    };
+    const handleTimeChange = (hours, minutes, ampm) => {
+      const [day] = daysSelected;
+      if (hours === "--" && typeof minutes === "number") {
+        hours = 0;
+      }
+      if (minutes === "--" && typeof hours === "number") {
+        minutes = 0;
+      }
+      if (typeof hours === "number" && typeof minutes === "number" && (parsedMin || parsedMax)) {
+        let hours24 = hours;
+        if (use12Hours) {
+          if (ampm === "PM" && hours < 12) {
+            hours24 = hours + 12;
+          } else if (ampm === "AM" && hours === 12) {
+            hours24 = 0;
+          }
+        }
+        const dateTimeSelected = setDate(day, {
+          hours: hours24,
+          minutes
+        });
+        if (isDateTimeOutOfRange(dateTimeSelected)) {
+          announceOutOfRange();
+          return;
+        }
+      }
+      if (internalValue) {
+        let date = typeof hours === "string" && typeof minutes === "string" ? `${formatDate(day, dateFormat)} ${hours}:${minutes}` : formatDate(
+          setDate(day, { hours, minutes }),
+          `${dateFormat} ${TIME_FORMAT}`
+        );
+        if (use12Hours) {
+          date += ` ${ampm}`;
+        }
+        setValue(date);
+      }
+      setCurrentTime(hours, minutes, use12Hours ? ampm : void 0);
+    };
+    const handleCalendarButtonClicked = () => setExpandedValue(!expandedValue);
+    const calendarNavigation = useCalendarNavigation({
+      daysSelected,
+      isOpen: expandedValue,
+      onChangeMonth: (month, year) => {
+        if (typeof year === "number") {
+          changeMonth(
+            setDate(currentMonth, {
+              year: currentMonth.getFullYear() + year
+            })
+          );
+        } else {
+          const date = setMonth(memoizedYears, month, currentMonth);
+          if (date) {
+            changeMonth(date);
+          }
+        }
+      },
+      weeks
+    });
+    const ariaControls = useId();
+    return /* @__PURE__ */ React.createElement(FocusScope, { arrowKeysUpDown: false }, /* @__PURE__ */ React.createElement("div", { className: "date-picker" }, /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        "aria-atomic": "true",
+        "aria-live": "polite",
+        className: "sr-only",
+        ref: liveRegionRef
+      }
+    ), /* @__PURE__ */ React.createElement(ClayInput.Group, { ref: triggerElementRef }, /* @__PURE__ */ React.createElement(ClayInput.GroupItem, { className: "input-group-item-focusable" }, /* @__PURE__ */ React.createElement(
+      InputDate,
+      {
+        ...otherProps,
+        ariaLabel: ariaLabels.input,
+        disabled,
+        id,
+        inputName,
+        onChange: inputChange,
+        placeholder,
+        ref,
+        useNative,
+        value: internalValue
+      }
+    ), !useNative && /* @__PURE__ */ React.createElement(ClayInput.GroupInsetItem, { after: true }, /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        "aria-controls": ariaControls,
+        "aria-expanded": expandedValue,
+        "aria-haspopup": "dialog",
+        "aria-label": ariaLabels.buttonChooseDate,
+        className: "date-picker-dropdown-toggle",
+        "data-testid": "date-button",
+        disabled,
+        displayType: "unstyled",
+        onClick: handleCalendarButtonClicked,
+        ref: chooseDateRef,
+        title: ariaLabels.openCalendar
+      },
+      /* @__PURE__ */ React.createElement(
+        Icon,
+        {
+          spritemap,
+          symbol: "calendar"
+        }
+      )
+    )))), !useNative && /* @__PURE__ */ React.createElement(
+      DropDown.Menu,
+      {
+        active: expandedValue,
+        alignElementRef: triggerElementRef,
+        "aria-label": ariaLabels.dialog,
+        className: "date-picker date-picker-dropdown-menu",
+        "data-testid": "dropdown",
+        id: ariaControls,
+        lock: true,
+        onActiveChange: setExpandedValue,
+        ref: menuElementRef,
+        role: "dialog",
+        triggerRef: chooseDateRef
+      },
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          "aria-label": ariaLabels.chooseDate && sub(ariaLabels.chooseDate, [
+            formatDate(currentMonth, "MMMM yyyy")
+          ]),
+          className: "date-picker-calendar",
+          role: "group"
+        },
+        /* @__PURE__ */ React.createElement(
+          DateNavigation,
+          {
+            ariaLabels,
+            currentMonth,
+            disabled,
+            months: memoizedMonths,
+            onDotClicked: handleDotClicked,
+            onMonthChange: changeMonth,
+            spritemap,
+            years: memoizedYears
+          }
+        ),
+        /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            ...calendarNavigation.gridProps,
+            className: "date-picker-calendar-body",
+            role: "grid"
+          },
+          /* @__PURE__ */ React.createElement(
+            WeekdayHeader,
+            {
+              firstDayOfWeek,
+              weekdaysShort
+            },
+            ({ key, weekday }) => /* @__PURE__ */ React.createElement(
+              Weekday,
+              {
+                key,
+                weekday
+              }
+            )
+          ),
+          /* @__PURE__ */ React.createElement(DaysTable, { weeks }, ({ day, key }) => /* @__PURE__ */ React.createElement(
+            DayNumber,
+            {
+              day,
+              daysSelected,
+              disabled,
+              index: key,
+              isFocused: calendarNavigation.isFocused(
+                day
+              ),
+              key,
+              onClick: handleDayClicked,
+              outOfRange: isDayDisabled(
+                day.date
+              ),
+              range
+            }
+          ))
+        ),
+        (footerElement || time) && /* @__PURE__ */ React.createElement("div", { className: "date-picker-calendar-footer" }, time && /* @__PURE__ */ React.createElement(
+          TimePicker,
+          {
+            config: timePickerConfig,
+            currentTime,
+            disabled,
+            onTimeChange: handleTimeChange,
+            spritemap,
+            timezone,
+            use12Hours
+          }
+        ), !time && footerElement && React.Children.only(
+          footerElement({ spritemap })
+        ))
+      )
+    ), !useNative && expandedValue && displayKeyboardArrowsIndicator && /* @__PURE__ */ React.createElement(ClayPortal, null, /* @__PURE__ */ React.createElement(
+      KeyboardArrowsIndicator,
+      {
+        anchorRef: menuElementRef,
+        direction: "all"
+      }
+    ))));
+  }
+);
+const RANGE_SEPARATOR = " - ";
+function isYearWithinYears(year, years) {
+  return years.start <= year && year <= years.end;
+}
+function fromStringToRange(value, dateFormat, referenceDate) {
+  const [startDateString, endDateString] = value.split(RANGE_SEPARATOR);
+  const startDate = parseDate(startDateString, dateFormat, referenceDate);
+  return [
+    startDate,
+    endDateString ? parseDate(endDateString, dateFormat, referenceDate) : startDate
+  ];
+}
+function hasDaysSelected({
+  checkRangeYears,
+  dateFormat,
+  is12Hours,
+  isTime,
+  value,
+  years
+}) {
+  const [startDate, endDate] = fromStringToRange(
+    value,
+    isTime ? `${dateFormat} ${is12Hours ? TIME_FORMAT_12H : TIME_FORMAT}` : dateFormat,
+    NEW_DATE
+  );
+  const isValidYear = checkRangeYears ? isYearWithinYears(startDate.getFullYear(), years) && isYearWithinYears(endDate.getFullYear(), years) : true;
+  if (isValid(startDate) && isValid(endDate) && isValidYear) {
+    return [startDate, endDate];
+  }
+}
+function fromRangeToString(range, dateFormat) {
+  const [startDate, endDate] = range;
+  return `${formatDate(startDate, dateFormat)}${RANGE_SEPARATOR}${formatDate(
+    endDate,
+    dateFormat
+  )}`;
+}
+DatePicker.displayName = "ClayDatePicker";
+var index_default = DatePicker;
+export {
+  FirstDayOfWeek,
+  index_default as default
+};

package/lib/esm/types.js

@@ -0,0 +1,13 @@
+var FirstDayOfWeek = /* @__PURE__ */ ((FirstDayOfWeek2) => {
+  FirstDayOfWeek2[FirstDayOfWeek2["Sunday"] = 0] = "Sunday";
+  FirstDayOfWeek2[FirstDayOfWeek2["Monday"] = 1] = "Monday";
+  FirstDayOfWeek2[FirstDayOfWeek2["Tuesday"] = 2] = "Tuesday";
+  FirstDayOfWeek2[FirstDayOfWeek2["Wednesday"] = 3] = "Wednesday";
+  FirstDayOfWeek2[FirstDayOfWeek2["Thursday"] = 4] = "Thursday";
+  FirstDayOfWeek2[FirstDayOfWeek2["Friday"] = 5] = "Friday";
+  FirstDayOfWeek2[FirstDayOfWeek2["Saturday"] = 6] = "Saturday";
+  return FirstDayOfWeek2;
+})(FirstDayOfWeek || {});
+export {
+  FirstDayOfWeek
+};