@telia/teddy 0.0.37 → 0.0.38

package/dist/components/date-picker/date-picker.js

@@ -0,0 +1,597 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
+import "../../assets/sprite.269ba410-teddy.svg";
+import { Icon } from "../icon/icon.js";
+import { uniqueId } from "./date-picker-unique-id.js";
+import { cleanValue } from "./dialog-utils.js";
+import navigationKey from "./date-picker-navigation-key.js";
+import localization from "./date-picker-localization.js";
+import DatePickerInput from "./date-picker-input.js";
+import DatePickerMonth from "./date-picker-month.js";
+import DatePickerYear from "./date-picker-year.js";
+import { css } from "./css.js";
+import { parseDate, printDate, DaysOfWeek, inRange, setYear, startOfMonth, endOfMonth, clamp, printISODate, addDays, setMonth } from "./date-utils.js";
+const DateDisabledPredicate = () => false;
+const cn = (classes) => {
+  return Object.keys(classes).filter((key) => classes[key]).join(" ");
+};
+const DISALLOWED_CHARACTERS = /[^0-9\s.-]+/g;
+const DatePicker = ({
+  name = "date",
+  label,
+  additional,
+  range = { past: 23, future: 1 },
+  disabled = false,
+  role,
+  buttonLabel,
+  readonly = false,
+  required = false,
+  value = "",
+  min = "",
+  max = "",
+  modalOpen = false,
+  invalidErrorMessage = "Ugyldig dato format",
+  invalidMinErrorMessage = "Dato er for tidlig",
+  invalidMaxErrorMessage = "Dato er for ny",
+  requiredErrorMessage = "Feltet er påkrevd",
+  isDateDisabled = () => false,
+  formId = void 0
+}) => {
+  const inputId = uniqueId("input");
+  const labelId = uniqueId("dateLabel");
+  const labelYearId = uniqueId("dateYearLabel");
+  const errorId = uniqueId("error");
+  const additionalId = uniqueId("additional");
+  let datePickerButton;
+  let datePickerInput;
+  let focusTimeoutId;
+  const setToggleRef = (element) => {
+    datePickerButton = element;
+  };
+  const setTextInputRef = (element) => {
+    datePickerInput = element;
+  };
+  let initialTouchX;
+  let initialTouchY;
+  const [currentValue, setCurrentValue] = useState(value ?? "");
+  const [focusedDay, setFocusedDay] = useState(/* @__PURE__ */ new Date());
+  const [errorMessage, setErrorMessage] = useState("");
+  const [touched, setTouched] = useState(false);
+  const [open, setOpen] = useState(modalOpen);
+  const [showYearDialog, setShowYearDialog] = useState(false);
+  const [wrapperRef, setWrapperRef] = useState();
+  const openRef = useRef(open);
+  const wrapperRefRef = useRef(wrapperRef);
+  const dateFormatShort = new Intl.DateTimeFormat(localization.locale, {
+    day: "numeric",
+    month: "long"
+  });
+  const dateFormatLong = new Intl.DateTimeFormat(localization.locale, {
+    day: "numeric",
+    month: "long",
+    year: "numeric"
+  });
+  const handleDocumentClick = (e) => {
+    if (!openRef.current) {
+      return false;
+    }
+    const isClickOutside = e.composedPath().every(
+      (node) => node !== wrapperRefRef.current
+    );
+    if (isClickOutside) {
+      hide(false);
+    }
+  };
+  useEffect(() => {
+    openRef.current = open;
+  }, [open]);
+  useEffect(() => {
+    wrapperRefRef.current = wrapperRef;
+  }, [wrapperRef]);
+  useEffect(() => {
+    if (typeof document !== "undefined" && document) {
+      document.addEventListener("click", handleDocumentClick);
+    }
+    return () => {
+      document.removeEventListener("click", handleDocumentClick);
+    };
+  });
+  const show = () => {
+    setOpen(true);
+    setFocusedDay(parseDate(currentValue) || /* @__PURE__ */ new Date());
+  };
+  const hide = (moveFocusToButton = true) => {
+    setOpen(false);
+    clearTimeout(focusTimeoutId);
+    const TRANSITION_MS = 300;
+    if (moveFocusToButton) {
+      setTimeout(
+        () => {
+          var _a;
+          return (_a = datePickerButton == null ? void 0 : datePickerButton.querySelector("button")) == null ? void 0 : _a.focus();
+        },
+        TRANSITION_MS + 150
+      );
+    }
+  };
+  const setValue = (date) => {
+    const newDate = printISODate(date);
+    if (newDate != currentValue) {
+      setCurrentValue(newDate);
+    }
+  };
+  const handleInputChange = () => {
+    const target = datePickerInput;
+    cleanValue(target, DISALLOWED_CHARACTERS);
+    if (target.value.length < currentValue.length) {
+      setCurrentValue(target.value);
+    } else {
+      const parsed = parseDate(target.value);
+      if (parsed || target.value === "") {
+        setValue(parsed);
+        hide();
+      } else {
+        setCurrentValue(target.value);
+      }
+    }
+  };
+  const updateErrorMessage = (message) => {
+    var _a, _b;
+    if (errorMessage !== message) {
+      if (message) {
+        (_a = datePickerInput == null ? void 0 : datePickerInput.setCustomValidity) == null ? void 0 : _a.call(datePickerInput, message);
+      } else {
+        (_b = datePickerInput == null ? void 0 : datePickerInput.setCustomValidity) == null ? void 0 : _b.call(datePickerInput, "");
+      }
+      setErrorMessage(message);
+    }
+  };
+  const isValueLessThanMinDate = () => {
+    const inputValue = datePickerInput.value;
+    const parsedDate = parseDate(inputValue);
+    if (parsedDate === void 0)
+      return false;
+    const minDate2 = parseDate(min);
+    if (!minDate2)
+      return false;
+    return parsedDate < minDate2;
+  };
+  const isValueLargerThanMaxDate = () => {
+    const inputValue = datePickerInput.value;
+    const parsedDate = parseDate(inputValue);
+    if (parsedDate === void 0)
+      return false;
+    const maxDate2 = parseDate(min);
+    if (!maxDate2)
+      return false;
+    return parsedDate > maxDate2;
+  };
+  const isValueValid = () => {
+    const inputValue = datePickerInput.value;
+    const parsedDate = parseDate(inputValue);
+    if (parsedDate === void 0)
+      return false;
+    const isInRange = inRange(
+      parsedDate,
+      parseDate(min),
+      parseDate(max)
+    );
+    if (!isInRange)
+      return false;
+    const isDisabled = isDateDisabled(parsedDate);
+    return !isDisabled;
+  };
+  const makeTouched = () => {
+    if (touched !== true) {
+      setTouched(true);
+    }
+  };
+  const updateErrorState = () => {
+    var _a;
+    const requiredError = !!(requiredErrorMessage == null ? void 0 : requiredErrorMessage.length);
+    const invalidError = !!(invalidErrorMessage == null ? void 0 : invalidErrorMessage.length);
+    const invalidMinError = !!(invalidMinErrorMessage == null ? void 0 : invalidMinErrorMessage.length);
+    const invalidMaxError = !!(invalidMaxErrorMessage == null ? void 0 : invalidMaxErrorMessage.length);
+    const length = ((_a = datePickerInput == null ? void 0 : datePickerInput.value) == null ? void 0 : _a.length) ?? 0;
+    let error = null;
+    let isTouched = touched;
+    if (length > 0) {
+      if (invalidError) {
+        if (!isValueValid()) {
+          if (invalidMinError && isValueLessThanMinDate()) {
+            error = invalidMinErrorMessage;
+          } else if (invalidMaxError && isValueLargerThanMaxDate()) {
+            error = invalidMaxErrorMessage;
+          } else {
+            error = invalidErrorMessage;
+          }
+          isTouched = true;
+        }
+      }
+    }
+    if (length === 0) {
+      if (required) {
+        if (requiredError) {
+          error = requiredErrorMessage;
+        }
+      }
+    }
+    if (isTouched) {
+      makeTouched();
+    }
+    updateErrorMessage(error);
+  };
+  const onHandleYearSelected = (_event, year) => {
+    if (showYearDialog) {
+      _event.stopPropagation();
+      updateYear(parseInt(year.toString(), 10));
+      setShowYearDialog(false);
+    }
+  };
+  const handleDaySelect = (_event, day) => {
+    const isInRange = inRange(
+      day,
+      parseDate(min),
+      parseDate(max)
+    );
+    const isAllowed = !isDateDisabled(day);
+    if (isInRange && isAllowed) {
+      setValue(day);
+      setErrorMessage("");
+      hide();
+    } else {
+      setFocusedDay(day);
+    }
+  };
+  const handleBlur = (event) => {
+    event.stopPropagation();
+    updateErrorState();
+  };
+  const handleFocus = (event) => {
+    event.stopPropagation();
+    event.preventDefault();
+    open ? hide(false) : show();
+  };
+  const showAdditional = !!additional;
+  const showError = !!(errorMessage == null ? void 0 : errorMessage.length);
+  const describedBy = cn({
+    [additionalId]: showAdditional,
+    [errorId]: showError
+  });
+  const valueAsDate = parseDate(currentValue);
+  const focusedMonth = focusedDay.getMonth();
+  const focusedYear = focusedDay.getFullYear();
+  const minDate = parseDate(min);
+  const maxDate = parseDate(max);
+  const prevMonthDisabled = minDate !== void 0 && minDate.getMonth() === focusedMonth && minDate.getFullYear() === focusedYear;
+  const nextMonthDisabled = maxDate !== void 0 && maxDate.getMonth() === focusedMonth && maxDate.getFullYear() === focusedYear;
+  const nextYearDisabled = maxDate !== void 0 && maxDate.getFullYear() === focusedYear;
+  const past = range.past;
+  const future = range.future;
+  const minYear = minDate !== void 0 ? minDate.getFullYear() : (/* @__PURE__ */ new Date()).getFullYear() - past;
+  const maxYear = maxDate !== void 0 ? maxDate.getFullYear() : (/* @__PURE__ */ new Date()).getFullYear() + future;
+  const updateFocusedDay = (month) => {
+    const min2 = setMonth(startOfMonth(focusedDay), month);
+    const max2 = endOfMonth(min2);
+    const date = setMonth(focusedDay, month);
+    setFocusedDay(clamp(date, min2, max2));
+  };
+  const updateYear = (year) => {
+    const minY = setYear(startOfMonth(focusedDay), year);
+    const maxM = endOfMonth(minY);
+    const date = setYear(focusedDay, year);
+    const day = clamp(date, minY, maxM);
+    const res = clamp(
+      day,
+      parseDate(min),
+      parseDate(max)
+    );
+    setFocusedDay(res);
+  };
+  const addMonths = (months) => {
+    updateFocusedDay(focusedDay.getMonth() + months);
+  };
+  const handleTouchStart = (event) => {
+    const touch = event.changedTouches[0];
+    initialTouchX = touch.pageX;
+    initialTouchY = touch.pageY;
+  };
+  const handleTouchEnd = (event) => {
+    const touch = event.changedTouches[0];
+    const distX = touch.pageX - initialTouchX;
+    const distY = touch.pageY - initialTouchY;
+    const threshold = 70;
+    const isHorizontalSwipe = Math.abs(distX) >= threshold && Math.abs(distY) <= threshold;
+    const isDownwardsSwipe = Math.abs(distY) >= threshold && Math.abs(distX) <= threshold && distY > 0;
+    if (isHorizontalSwipe) {
+      addMonths(distX < 0 ? 1 : -1);
+    } else if (isDownwardsSwipe) {
+      hide(false);
+      event.preventDefault();
+    }
+    initialTouchY = 0;
+    initialTouchX = 0;
+  };
+  const handleEscKey = (event) => {
+    var _a;
+    if (event.keyCode === navigationKey.ESC) {
+      (_a = document.getElementById(inputId)) == null ? void 0 : _a.blur();
+      hide();
+    }
+  };
+  const setDialogWrapperRef = (element) => {
+    setWrapperRef(element);
+  };
+  const handlePreviousMonthClick = (event) => {
+    event.preventDefault();
+    addMonths(-1);
+  };
+  const handleNextMonthClick = (event) => {
+    event.preventDefault();
+    addMonths(1);
+  };
+  const handleOnYearDialogOpenClick = () => {
+    if (!showYearDialog) {
+      setShowYearDialog(true);
+    }
+  };
+  const handleOnYearDialogCloseClick = () => {
+    if (showYearDialog) {
+      setShowYearDialog(false);
+    }
+  };
+  const updateDays = (days) => {
+    const d = addDays(focusedDay, days);
+    const clamped = clamp(
+      d,
+      parseDate(min),
+      parseDate(max)
+    );
+    setFocusedDay(clamped);
+  };
+  const handleKeyboardNavigation = (event) => {
+    let handled = true;
+    switch (event.keyCode) {
+      case navigationKey.TAB:
+        updateDays(event.shiftKey ? -1 : 1);
+        break;
+      case navigationKey.RIGHT:
+        updateDays(1);
+        break;
+      case navigationKey.LEFT:
+        updateDays(-1);
+        break;
+      case navigationKey.DOWN:
+        updateDays(7);
+        break;
+      case navigationKey.UP:
+        updateDays(-7);
+        break;
+      case navigationKey.PAGE_UP:
+        if (event.shiftKey) {
+          updateYear(-1);
+        } else {
+          addMonths(-1);
+        }
+        break;
+      case navigationKey.PAGE_DOWN:
+        if (event.shiftKey) {
+          updateYear(1);
+        } else {
+          addMonths(1);
+        }
+        break;
+      case navigationKey.HOME:
+        break;
+      case navigationKey.END:
+        break;
+      default: {
+        handled = false;
+      }
+    }
+    if (handled) {
+      event.preventDefault();
+    }
+  };
+  const handleKeyboardNavigationYear = (event) => {
+    let handled = true;
+    const year = focusedDay.getFullYear();
+    switch (event.keyCode) {
+      case navigationKey.TAB:
+        updateYear(event.shiftKey ? year - 1 : year + 1);
+        break;
+      case navigationKey.RIGHT:
+        updateYear(year + 1);
+        break;
+      case navigationKey.LEFT:
+        updateYear(year - 1);
+        break;
+      case navigationKey.DOWN:
+        updateYear(year - 4);
+        break;
+      case navigationKey.UP:
+        updateYear(year + 4);
+        break;
+      case navigationKey.PAGE_UP:
+        if (event.shiftKey) {
+          updateYear(year + 4);
+        } else {
+          updateYear(year - 4);
+        }
+        break;
+      case navigationKey.PAGE_DOWN:
+        if (event.shiftKey) {
+          updateYear(year - 4);
+        } else {
+          updateYear(year + 4);
+        }
+        break;
+      case navigationKey.HOME:
+        break;
+      case navigationKey.END:
+        break;
+      default: {
+        handled = false;
+      }
+    }
+    if (handled) {
+      event.preventDefault();
+    }
+  };
+  const displayDate = printDate(currentValue);
+  const containerCss = css("__container");
+  return /* @__PURE__ */ jsx("div", { className: containerCss, ref: setDialogWrapperRef, children: /* @__PURE__ */ jsxs("div", { className: css(""), onKeyDown: handleEscKey, children: [
+    /* @__PURE__ */ jsx("label", { htmlFor: inputId, children: (required ? "* " : "") + (label ?? "Velg dato") }),
+    /* @__PURE__ */ jsx(
+      DatePickerInput,
+      {
+        describedBy: buttonLabel + " " + describedBy,
+        value: currentValue,
+        dateFormatter: dateFormatLong,
+        valueAsDate,
+        formattedValue: displayDate,
+        onInput: handleInputChange,
+        onBlur: handleBlur,
+        onFocus: handleFocus,
+        name,
+        disabled,
+        readonly,
+        role,
+        required,
+        identifier: inputId,
+        localization,
+        buttonLabel,
+        buttonRef: setToggleRef,
+        inputRef: setTextInputRef,
+        touched,
+        makeTouched,
+        formId
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: css("__dialog-container"), children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: css("__dialog") + " " + (open ? css("is-active") : ""),
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-hidden": open ? "false" : "true",
+        "aria-labelledby": labelId,
+        onTouchStart: handleTouchStart,
+        onTouchEnd: handleTouchEnd,
+        children: /* @__PURE__ */ jsxs("div", { className: css("__dialog-content"), children: [
+          /* @__PURE__ */ jsxs("div", { className: css("__header"), children: [
+            /* @__PURE__ */ jsxs(
+              "h2",
+              {
+                id: labelId,
+                className: css("__vhidden"),
+                "aria-live": "polite",
+                "aria-atomic": "true",
+                children: [
+                  localization.monthNames[focusedMonth],
+                  " ",
+                  focusedDay.getFullYear()
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: css("__nav"), children: [
+              /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  className: css("__year-button"),
+                  onClick: handleOnYearDialogOpenClick,
+                  disabled: nextYearDisabled,
+                  type: "button",
+                  "aria-label": localization.nextMonthLabel,
+                  children: [
+                    /* @__PURE__ */ jsx("span", { children: focusedYear }),
+                    /* @__PURE__ */ jsx(Icon, { name: "chevron-down", className: css("__year-chevron") })
+                  ]
+                }
+              ) }),
+              !showYearDialog && /* @__PURE__ */ jsxs("div", { className: css("__nav-month"), children: [
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    className: css("__prev"),
+                    onClick: handlePreviousMonthClick,
+                    disabled: prevMonthDisabled,
+                    type: "button",
+                    "aria-label": localization.prevMonthLabel,
+                    children: /* @__PURE__ */ jsx(Icon, { name: "chevron-left" })
+                  }
+                ),
+                /* @__PURE__ */ jsx("div", { className: css("__select-label"), children: /* @__PURE__ */ jsx("span", { children: localization.monthNames[focusedMonth] }) }),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    className: css("__next"),
+                    onClick: handleNextMonthClick,
+                    disabled: nextMonthDisabled,
+                    type: "button",
+                    "aria-label": localization.nextMonthLabel,
+                    children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right" })
+                  }
+                )
+              ] }),
+              showYearDialog && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+                "button",
+                {
+                  className: css("__close_year"),
+                  onClick: handleOnYearDialogCloseClick,
+                  type: "button",
+                  "aria-label": "Lukk",
+                  children: /* @__PURE__ */ jsx(Icon, { name: "close" })
+                }
+              ) })
+            ] })
+          ] }),
+          showYearDialog && /* @__PURE__ */ jsx(
+            DatePickerYear,
+            {
+              selectedYear: valueAsDate ? valueAsDate.getFullYear() : (/* @__PURE__ */ new Date()).getFullYear(),
+              focusedYear,
+              onYearSelect: onHandleYearSelected,
+              labelledById: labelYearId,
+              localization,
+              onKeyboardNavigation: handleKeyboardNavigationYear,
+              min: minYear,
+              max: maxYear
+            }
+          ),
+          !showYearDialog && /* @__PURE__ */ jsx(
+            DatePickerMonth,
+            {
+              dateFormatter: dateFormatShort,
+              selectedDate: valueAsDate,
+              focusedDate: focusedDay,
+              onDateSelect: handleDaySelect,
+              labelledById: labelId,
+              localization,
+              firstDayOfWeek: DaysOfWeek.Monday,
+              onKeyboardNavigation: handleKeyboardNavigation,
+              min: minDate,
+              max: maxDate,
+              isDateDisabled
+            }
+          )
+        ] })
+      }
+    ) }),
+    showError && /* @__PURE__ */ jsxs(
+      "label",
+      {
+        className: css("__error"),
+        id: errorId,
+        children: [
+          /* @__PURE__ */ jsx(Icon, { name: "error" }),
+          errorMessage
+        ]
+      }
+    )
+  ] }) });
+};
+export {
+  DateDisabledPredicate,
+  DatePicker
+};