clayui-date-picker 3.165.0

package/lib/cjs/types.js

@@ -0,0 +1,33 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var types_exports = {};
+__export(types_exports, {
+  FirstDayOfWeek: () => FirstDayOfWeek
+});
+module.exports = __toCommonJS(types_exports);
+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 || {});

package/lib/esm/DateNavigation.js

@@ -0,0 +1,94 @@
+import Button from "@clayui/button";
+import Icon from "@clayui/icon";
+import React from "react";
+import { setMonth } from "./Helpers";
+import Select from "./Select";
+function ClayDatePickerDateNavigation({
+  ariaLabels,
+  currentMonth,
+  disabled,
+  months,
+  onDotClicked,
+  onMonthChange,
+  spritemap,
+  years
+}) {
+  function handleChangeMonth(month) {
+    const date = setMonth(years, month, currentMonth);
+    if (date) {
+      onMonthChange(date);
+    }
+  }
+  const handlePreviousMonthClicked = () => handleChangeMonth(-1);
+  const handleNextMonthClicked = () => handleChangeMonth(1);
+  return /* @__PURE__ */ React.createElement("div", { className: "date-picker-calendar-header" }, /* @__PURE__ */ React.createElement("div", { className: "date-picker-nav" }, /* @__PURE__ */ React.createElement("div", { className: "date-picker-nav-item input-date-picker-month" }, /* @__PURE__ */ React.createElement(
+    Select,
+    {
+      "aria-label": ariaLabels.selectMonth,
+      disabled,
+      name: "month",
+      onChange: (event) => onMonthChange(
+        new Date(
+          currentMonth.getFullYear(),
+          Number(event.target.value)
+        )
+      ),
+      options: months,
+      testId: "month-select",
+      value: currentMonth.getMonth()
+    }
+  )), /* @__PURE__ */ React.createElement("div", { className: "date-picker-nav-item input-date-picker-year" }, /* @__PURE__ */ React.createElement(
+    Select,
+    {
+      "aria-label": ariaLabels.selectYear,
+      disabled,
+      name: "year",
+      onChange: (event) => onMonthChange(
+        new Date(
+          Number(event.target.value),
+          currentMonth.getMonth()
+        )
+      ),
+      options: years,
+      testId: "year-select",
+      value: currentMonth.getFullYear()
+    }
+  )), /* @__PURE__ */ React.createElement("div", { className: "date-picker-nav-controls date-picker-nav-item date-picker-nav-item-expand" }, /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      "aria-label": ariaLabels.buttonPreviousMonth,
+      className: "nav-btn nav-btn-monospaced",
+      disabled,
+      displayType: null,
+      onClick: handlePreviousMonthClicked,
+      title: ariaLabels.buttonPreviousMonth
+    },
+    /* @__PURE__ */ React.createElement(Icon, { spritemap, symbol: "angle-left" })
+  ), /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      "aria-label": ariaLabels.buttonDot,
+      className: "nav-btn nav-btn-monospaced",
+      disabled,
+      displayType: null,
+      onClick: onDotClicked,
+      title: ariaLabels.buttonDot
+    },
+    /* @__PURE__ */ React.createElement(Icon, { spritemap, symbol: "simple-circle" })
+  ), /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      "aria-label": ariaLabels.buttonNextMonth,
+      className: "nav-btn nav-btn-monospaced",
+      disabled,
+      displayType: null,
+      onClick: handleNextMonthClicked,
+      title: ariaLabels.buttonNextMonth
+    },
+    /* @__PURE__ */ React.createElement(Icon, { spritemap, symbol: "angle-right" })
+  ))));
+}
+var DateNavigation_default = ClayDatePickerDateNavigation;
+export {
+  DateNavigation_default as default
+};

package/lib/esm/DayNumber.js

@@ -0,0 +1,86 @@
+import { Keys } from "@clayui/shared";
+import classnames from "classnames";
+import React from "react";
+import { setDate } from "./Helpers";
+function ClayDatePickerDayNumber({
+  day,
+  daysSelected,
+  disabled,
+  index,
+  isFocused,
+  onClick,
+  outOfRange,
+  range
+}) {
+  const { date, nextMonth, previousMonth } = day;
+  const [startDate, endDate] = daysSelected;
+  const isStartAndEndDateRange = startDate.toDateString() !== endDate.toDateString() && isWithinInterval(date, daysSelected);
+  const hasEndDateSelected = date.toDateString() === endDate.toDateString();
+  const hasStartDateSelected = date.toDateString() === startDate.toDateString();
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      "aria-selected": isStartAndEndDateRange || hasStartDateSelected ? true : void 0,
+      className: classnames(
+        "date-picker-col",
+        range && {
+          "c-selected": isStartAndEndDateRange,
+          "c-selected-end": hasEndDateSelected && !hasStartDateSelected,
+          "c-selected-start": hasStartDateSelected && !hasEndDateSelected
+        }
+      ),
+      role: "gridcell"
+    },
+    /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        "aria-disabled": outOfRange ? true : void 0,
+        "aria-label": setDate(date, {
+          hours: 12,
+          milliseconds: 0,
+          minutes: 0,
+          seconds: 0
+        }).toDateString(),
+        className: classnames(
+          "date-picker-date date-picker-calendar-item",
+          {
+            "active": hasStartDateSelected || range && hasEndDateSelected,
+            "disabled": disabled || outOfRange,
+            "next-month-date": nextMonth,
+            "previous-month-date": previousMonth
+          }
+        ),
+        "data-index": index,
+        disabled,
+        onClick: () => onClick(date),
+        onKeyDown: (event) => {
+          if (event.key === Keys.Spacebar) {
+            event.preventDefault();
+          }
+        },
+        onKeyUp: (event) => {
+          if (event.key === Keys.Spacebar) {
+            onClick(date);
+          }
+        },
+        tabIndex: isFocused ? void 0 : -1,
+        type: "button"
+      },
+      date.getDate()
+    )
+  );
+}
+function isWithinInterval(date, interval) {
+  const [start, end] = interval;
+  const time = date.getTime();
+  const startTime = start.getTime();
+  const endTime = end.getTime();
+  if (startTime > endTime) {
+    return false;
+  }
+  return time >= startTime && time <= endTime;
+}
+var DayNumber_default = ClayDatePickerDayNumber;
+export {
+  DayNumber_default as default
+};

package/lib/esm/DaysTable.js

@@ -0,0 +1,19 @@
+import React from "react";
+function ClayDatePickerDaysTable({ children, weeks }) {
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, weeks.map((days, index) => /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: "date-picker-date-row date-picker-row",
+      "data-index": index,
+      key: index,
+      role: "row"
+    },
+    days.map((day, index2) => {
+      return React.Children.only(children({ day, key: index2 }));
+    })
+  )));
+}
+var DaysTable_default = ClayDatePickerDaysTable;
+export {
+  DaysTable_default as default
+};

package/lib/esm/Helpers.js

@@ -0,0 +1,68 @@
+import { default as formatDate } from "date-fns/format";
+import { default as parseDate } from "date-fns/parse";
+function addMonths(date, months) {
+  date = clone(date);
+  date.setMonth(date.getMonth() + months);
+  return date;
+}
+function clamp(date, min, max) {
+  if (min && isBefore(date, min)) {
+    return clone(min);
+  }
+  if (max && isAfter(date, max)) {
+    return clone(max);
+  }
+  return clone(date);
+}
+function clone(date) {
+  return new Date(date instanceof Date ? date.getTime() : date);
+}
+function isAfter(a, b) {
+  return a.getTime() > b.getTime();
+}
+function isBefore(a, b) {
+  return a.getTime() < b.getTime();
+}
+function isSameDay(a, b) {
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+}
+function isValid(date) {
+  return date instanceof Date && !isNaN(date.getTime());
+}
+function range({ end, start }) {
+  return Array.from(
+    {
+      length: end - start + 1
+    },
+    (_v, k) => k + start
+  );
+}
+function setDate(date, options) {
+  date = clone(date);
+  return Object.keys(options).reduce((acc, key) => {
+    const method = `set${key.charAt(0).toUpperCase() + key.slice(1)}`;
+    acc[method](options[key]);
+    return acc;
+  }, date);
+}
+function setMonth(range2, month, currentMonth) {
+  const date = addMonths(currentMonth, month);
+  const year = date.getFullYear();
+  if (range2.find((elem) => elem.value === year)) {
+    return date;
+  }
+}
+export {
+  addMonths,
+  clamp,
+  clone,
+  formatDate,
+  isAfter,
+  isBefore,
+  isSameDay,
+  isValid,
+  parseDate,
+  range,
+  setDate,
+  setMonth
+};

package/lib/esm/Hooks.js

@@ -0,0 +1,278 @@
+import { Keys } from "@clayui/shared";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { clone, formatDate, setDate } from "./Helpers";
+function normalizeTime(date) {
+  return setDate(date, { hours: 12, milliseconds: 0, minutes: 0, seconds: 0 });
+}
+function useDaysSelected(defaultDays) {
+  const [daysSelected, set] = useState(defaultDays);
+  const setDaysSelected = useCallback(([start, end]) => {
+    if (start === end) {
+      const date = normalizeTime(start);
+      set([date, date]);
+    } else {
+      set([normalizeTime(start), normalizeTime(end)]);
+    }
+  }, []);
+  return [daysSelected, setDaysSelected];
+}
+function useWeeks(currentMonth, firstDayOfWeek) {
+  const [weeks, set] = useState(
+    () => getWeekArray(currentMonth, firstDayOfWeek)
+  );
+  const setWeeks = useCallback(
+    (value) => set(getWeekArray(value, firstDayOfWeek)),
+    [firstDayOfWeek]
+  );
+  return [weeks, setWeeks];
+}
+function useCurrentTime(defaultTime, use12Hours) {
+  const [currentTime, set] = useState(defaultTime);
+  const setCurrentTime = useCallback(
+    (hours, minutes, ampm) => {
+      const date = setDate(/* @__PURE__ */ new Date(), { hours, minutes });
+      if (typeof hours !== "string") {
+        if (use12Hours) {
+          hours = formatDate(date, "hh");
+        } else {
+          hours = formatDate(date, "HH");
+        }
+      }
+      if (typeof minutes !== "string") {
+        minutes = formatDate(date, "mm");
+      }
+      const value = ampm ? `${hours}:${minutes} ${ampm}` : `${hours}:${minutes}`;
+      set(value);
+      return value;
+    },
+    [use12Hours]
+  );
+  return [currentTime, setCurrentTime];
+}
+function useCalendarNavigation({
+  daysSelected,
+  isOpen,
+  onChangeMonth,
+  weeks
+}) {
+  const [lastItemFocused, setLastItemFocused] = useState(null);
+  const gridRef = useRef(null);
+  const lastKeyPressedRef = useRef("");
+  const hasNextFocusRef = useRef(false);
+  const focusNext = useCallback((day) => {
+    if (!gridRef.current) {
+      return;
+    }
+    const nextFocusElement = gridRef.current.querySelector(
+      `button[aria-label="${setDate(day.date, {
+        hours: 12,
+        milliseconds: 0,
+        minutes: 0,
+        seconds: 0
+      }).toDateString()}"]`
+    );
+    if (nextFocusElement) {
+      nextFocusElement.focus();
+      setLastItemFocused(String(day.date.getDate()));
+    }
+  }, []);
+  const onKeyDown = useCallback(
+    (event) => {
+      switch (event.key) {
+        case Keys.Down:
+        case Keys.Up:
+        case Keys.Right:
+        case Keys.Left: {
+          event.preventDefault();
+          const currentRowPosition = Number(
+            document.activeElement.closest("[role=row]").getAttribute("data-index")
+          );
+          const position = Number(
+            document.activeElement.getAttribute("data-index")
+          );
+          const currentRow = weeks[currentRowPosition];
+          let nextFocus = null;
+          switch (event.key) {
+            case Keys.Right:
+            case Keys.Left: {
+              nextFocus = currentRow[event.key === Keys.Left ? position - 1 : position + 1];
+              if (!nextFocus) {
+                nextFocus = weeks[event.key === Keys.Left ? currentRowPosition - 1 : currentRowPosition + 1]?.[event.key === Keys.Left ? currentRow.length - 1 : 0];
+              }
+              break;
+            }
+            case Keys.Up:
+            case Keys.Down: {
+              nextFocus = weeks[event.key === Keys.Up ? currentRowPosition - 1 : currentRowPosition + 1]?.[position];
+              break;
+            }
+            default:
+              break;
+          }
+          if (nextFocus && !nextFocus.nextMonth && !nextFocus.previousMonth) {
+            focusNext(nextFocus);
+          } else {
+            onChangeMonth(
+              event.key === Keys.Left || event.key === Keys.Up ? -1 : 1
+            );
+            lastKeyPressedRef.current = event.key;
+            hasNextFocusRef.current = true;
+          }
+          break;
+        }
+        case Keys.End:
+        case Keys.Home: {
+          event.preventDefault();
+          const grid = event.currentTarget.querySelectorAll(
+            "button:not(.previous-month-date):not(.next-month-date)"
+          );
+          const day = grid[event.key === Keys.Home ? 0 : grid.length - 1];
+          if (day) {
+            day.focus();
+            setLastItemFocused(day.innerText);
+          }
+          break;
+        }
+        case "PageDown":
+        case "PageUp": {
+          event.preventDefault();
+          const value = event.key === "PageUp" ? -1 : 1;
+          if (event.shiftKey) {
+            onChangeMonth(0, value);
+          } else {
+            onChangeMonth(value);
+          }
+          lastKeyPressedRef.current = event.key;
+          hasNextFocusRef.current = true;
+          break;
+        }
+        default:
+          break;
+      }
+    },
+    [weeks]
+  );
+  const onFocus = useCallback((event) => {
+    setLastItemFocused(event.target.innerText);
+  }, []);
+  const isFocused = useCallback(
+    (day) => {
+      return !day.nextMonth && !day.previousMonth && (lastItemFocused === String(day.date.getDate()) || lastItemFocused === null && day.date.toDateString() === daysSelected[0].toDateString());
+    },
+    [lastItemFocused, daysSelected]
+  );
+  useEffect(() => {
+    if (gridRef.current && isOpen) {
+      focusNext({ date: daysSelected[0] });
+    }
+  }, [daysSelected]);
+  useEffect(() => {
+    if (gridRef.current) {
+      if (isOpen) {
+        const focusNext2 = gridRef.current.querySelector(
+          'button:not([tabindex="-1"])'
+        );
+        if (focusNext2) {
+          focusNext2.focus();
+        }
+      } else {
+        setLastItemFocused(null);
+      }
+    }
+  }, [isOpen]);
+  useEffect(() => {
+    if (hasNextFocusRef.current && gridRef.current) {
+      hasNextFocusRef.current = false;
+      const position = Number(
+        document.activeElement.getAttribute("data-index")
+      );
+      const row = weeks[lastKeyPressedRef.current === Keys.Left || lastKeyPressedRef.current === Keys.Up ? weeks.length - 1 : 0];
+      switch (lastKeyPressedRef.current) {
+        case Keys.Right:
+        case Keys.Left: {
+          const newRow = row.filter(
+            (value) => !value.nextMonth && !value.previousMonth
+          );
+          focusNext(
+            newRow[lastKeyPressedRef.current === Keys.Left ? newRow.length - 1 : 0]
+          );
+          break;
+        }
+        case Keys.Down:
+        case Keys.Up: {
+          let nextFocus = row.map(
+            (value) => !value.nextMonth && !value.previousMonth ? value : null
+          )[position];
+          if (!nextFocus) {
+            nextFocus = weeks[lastKeyPressedRef.current === Keys.Up ? weeks.length - 2 : 1][position];
+          }
+          focusNext(nextFocus);
+          break;
+        }
+        case "PageDown":
+        case "PageUp": {
+          const focusNext2 = gridRef.current.querySelector(
+            'button:not([tabindex="-1"])'
+          );
+          if (focusNext2) {
+            focusNext2.focus();
+          }
+          break;
+        }
+        default:
+          break;
+      }
+      lastKeyPressedRef.current = "";
+    }
+  }, [weeks]);
+  const gridProps = { onFocus, onKeyDown, ref: gridRef };
+  return {
+    gridProps,
+    isFocused
+  };
+}
+function getDaysInMonth(d) {
+  const firstDayOfMonth = new Date(d.getFullYear(), d.getMonth(), 1, 12);
+  firstDayOfMonth.setMonth(firstDayOfMonth.getMonth() + 1);
+  firstDayOfMonth.setDate(firstDayOfMonth.getDate() - 1);
+  return firstDayOfMonth.getDate();
+}
+function getWeekArray(d, firstDayOfWeek = 0) {
+  const daysInMonth = getDaysInMonth(d);
+  const dayArray = [];
+  let week = [];
+  const weekArray = [];
+  for (let i = 1; i <= daysInMonth; i += 1) {
+    const genDay = new Date(d.getFullYear(), d.getMonth(), i, 12);
+    dayArray.push({ date: genDay });
+  }
+  dayArray.forEach((day) => {
+    if (!!week.length && day.date.getDay() === firstDayOfWeek) {
+      weekArray.push(week);
+      week = [];
+    }
+    week.push(day);
+    if (dayArray.indexOf(day) === dayArray.length - 1) {
+      weekArray.push(week);
+    }
+  });
+  const firstWeek = weekArray[0];
+  for (let i = 7 - firstWeek.length; i > 0; i -= 1) {
+    const outsideDate = clone(firstWeek[0].date);
+    outsideDate.setDate(firstWeek[0].date.getDate() - 1);
+    firstWeek.unshift({ date: outsideDate, previousMonth: true });
+  }
+  const lastWeek = weekArray[weekArray.length - 1];
+  for (let i = lastWeek.length; i < 7; i += 1) {
+    const outsideDate = clone(lastWeek[lastWeek.length - 1].date);
+    outsideDate.setDate(lastWeek[lastWeek.length - 1].date.getDate() + 1);
+    lastWeek.push({ date: outsideDate, nextMonth: true });
+  }
+  return weekArray;
+}
+export {
+  useCalendarNavigation,
+  useCurrentTime,
+  useDaysSelected,
+  useWeeks
+};

package/lib/esm/InputDate.js

@@ -0,0 +1,28 @@
+import { ClayInput } from "@clayui/form";
+import React from "react";
+const ClayDatePickerInputDate = React.forwardRef(
+  ({
+    ariaLabel,
+    inputName = "datePicker",
+    useNative = false,
+    value = "",
+    ...otherProps
+  }, ref) => {
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("input", { name: inputName, type: "hidden", value }), /* @__PURE__ */ React.createElement(
+      ClayInput,
+      {
+        ...otherProps,
+        "aria-label": ariaLabel,
+        insetAfter: !useNative,
+        ref,
+        type: useNative ? "date" : "text",
+        value
+      }
+    ));
+  }
+);
+ClayDatePickerInputDate.displayName = "ClayDatePickerInputDate";
+var InputDate_default = ClayDatePickerInputDate;
+export {
+  InputDate_default as default
+};

package/lib/esm/Select.js

@@ -0,0 +1,26 @@
+import React from "react";
+const ClayDatePickerSelect = React.forwardRef(
+  ({ options, testId, ...otherProps }, ref) => /* @__PURE__ */ React.createElement(
+    "select",
+    {
+      ...otherProps,
+      className: "form-control form-control-sm",
+      "data-testid": testId,
+      ref
+    },
+    options.map((option, index) => /* @__PURE__ */ React.createElement(
+      "option",
+      {
+        key: index,
+        selected: option.selected ? true : void 0,
+        value: option.value
+      },
+      option.label
+    ))
+  )
+);
+ClayDatePickerSelect.displayName = "ClayDatePickerSelect";
+var Select_default = ClayDatePickerSelect;
+export {
+  Select_default as default
+};

package/lib/esm/TimePicker.js

@@ -0,0 +1,52 @@
+import ClayTimePicker from "@clayui/time-picker";
+import React from "react";
+const DEFAULT_VALUE = "--";
+function ClayDatePickerTimePicker({
+  config,
+  currentTime,
+  disabled,
+  onTimeChange,
+  spritemap,
+  timezone,
+  use12Hours
+}) {
+  const [values, setValues] = React.useState({
+    ampm: DEFAULT_VALUE,
+    hours: DEFAULT_VALUE,
+    minutes: DEFAULT_VALUE
+  });
+  const handleOnChange = (values2) => {
+    const hours = values2.hours === DEFAULT_VALUE ? DEFAULT_VALUE : Number(values2.hours);
+    const minutes = values2.minutes === DEFAULT_VALUE ? DEFAULT_VALUE : Number(values2.minutes);
+    const ampm = values2.ampm ? values2.ampm : DEFAULT_VALUE;
+    setValues(values2);
+    onTimeChange(hours, minutes, ampm);
+  };
+  React.useEffect(() => {
+    const [hours, minutesAndAmpm] = currentTime.split(":");
+    const [minutes, ampm] = minutesAndAmpm.split(" ");
+    setValues((prevValues) => ({
+      ...prevValues,
+      ampm,
+      hours: String(hours),
+      minutes: String(minutes)
+    }));
+  }, [currentTime, use12Hours]);
+  return /* @__PURE__ */ React.createElement("div", { className: "time-picker" }, /* @__PURE__ */ React.createElement(
+    ClayTimePicker,
+    {
+      config,
+      disabled,
+      icon: true,
+      onInputChange: handleOnChange,
+      spritemap,
+      timezone,
+      use12Hours,
+      values
+    }
+  ));
+}
+var TimePicker_default = ClayDatePickerTimePicker;
+export {
+  TimePicker_default as default
+};

package/lib/esm/Weekday.js

@@ -0,0 +1,8 @@
+import React from "react";
+function ClayDatePickerWeekday({ weekday }) {
+  return /* @__PURE__ */ React.createElement("div", { className: "date-picker-col" }, /* @__PURE__ */ React.createElement("div", { className: "date-picker-calendar-item date-picker-day" }, /* @__PURE__ */ React.createElement("abbr", null, weekday)));
+}
+var Weekday_default = ClayDatePickerWeekday;
+export {
+  Weekday_default as default
+};