@helpwave/hightide/dist/components/date/DatePicker.mjs

helpwave's component and theming library

// src/components/date/DatePicker.tsx
import { useEffect as useEffect5, useState as useState6 } from "react";
import { ArrowDown, ArrowUp, ChevronDown as ChevronDown2 } from "lucide-react";

// src/hooks/useLanguage.tsx
import { createContext, useContext, useEffect as useEffect2, useState as useState2 } from "react";

// src/hooks/useLocalStorage.tsx
import { useCallback, useEffect, useState } from "react";

// src/hooks/useLanguage.tsx
import { jsx } from "react/jsx-runtime";
var DEFAULT_LANGUAGE = "en";
var LanguageContext = createContext({ language: DEFAULT_LANGUAGE, setLanguage: (v) => v });
var useLanguage = () => useContext(LanguageContext);
var useLocale = (overWriteLanguage) => {
  const { language } = useLanguage();
  const mapping = {
    en: "en-US",
    de: "de-DE"
  };
  return mapping[overWriteLanguage ?? language];
};

// src/hooks/useTranslation.ts
var useTranslation = (defaults, translationOverwrite = {}) => {
  const { language: languageProp, translation: overwrite } = translationOverwrite;
  const { language: inferredLanguage } = useLanguage();
  const usedLanguage = languageProp ?? inferredLanguage;
  let defaultValues = defaults[usedLanguage];
  if (overwrite && overwrite[usedLanguage]) {
    defaultValues = { ...defaultValues, ...overwrite[usedLanguage] };
  }
  return defaultValues;
};

// src/util/noop.ts
var noop = () => void 0;

// src/util/array.ts
var equalSizeGroups = (array, groupSize) => {
  if (groupSize <= 0) {
    console.warn(`group size should be greater than 0: groupSize = ${groupSize}`);
    return [[...array]];
  }
  const groups = [];
  for (let i = 0; i < array.length; i += groupSize) {
    groups.push(array.slice(i, Math.min(i + groupSize, array.length)));
  }
  return groups;
};
var range = (start, end, allowEmptyRange = false) => {
  if (end < start) {
    if (!allowEmptyRange) {
      console.warn(`range: end (${end}) < start (${start}) should be allowed explicitly, set allowEmptyRange to true`);
    }
    return [];
  }
  return Array.from({ length: end - start + 1 }, (_, index) => index + start);
};

// src/util/date.ts
var monthsList = ["january", "february", "march", "april", "may", "june", "july", "august", "september", "october", "november", "december"];
var weekDayList = ["sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday"];
var changeDuration = (date, duration, isAdding) => {
  const {
    years = 0,
    months = 0,
    days = 0,
    hours = 0,
    minutes = 0,
    seconds = 0,
    milliseconds = 0
  } = duration;
  if (years < 0) {
    console.error(`Range error years must be greater than 0: received ${years}`);
    return new Date(date);
  }
  if (months < 0 || months > 11) {
    console.error(`Range error month must be 0 <= month <= 11: received ${months}`);
    return new Date(date);
  }
  if (days < 0) {
    console.error(`Range error days must be greater than 0: received ${days}`);
    return new Date(date);
  }
  if (hours < 0 || hours > 23) {
    console.error(`Range error hours must be 0 <= hours <= 23: received ${hours}`);
    return new Date(date);
  }
  if (minutes < 0 || minutes > 59) {
    console.error(`Range error minutes must be 0 <= minutes <= 59: received ${minutes}`);
    return new Date(date);
  }
  if (seconds < 0 || seconds > 59) {
    console.error(`Range error seconds must be 0 <= seconds <= 59: received ${seconds}`);
    return new Date(date);
  }
  if (milliseconds < 0) {
    console.error(`Range error seconds must be greater than 0: received ${milliseconds}`);
    return new Date(date);
  }
  const multiplier = isAdding ? 1 : -1;
  const newDate = new Date(date);
  newDate.setFullYear(newDate.getFullYear() + multiplier * years);
  newDate.setMonth(newDate.getMonth() + multiplier * months);
  newDate.setDate(newDate.getDate() + multiplier * days);
  newDate.setHours(newDate.getHours() + multiplier * hours);
  newDate.setMinutes(newDate.getMinutes() + multiplier * minutes);
  newDate.setSeconds(newDate.getSeconds() + multiplier * seconds);
  newDate.setMilliseconds(newDate.getMilliseconds() + multiplier * milliseconds);
  return newDate;
};
var addDuration = (date, duration) => {
  return changeDuration(date, duration, true);
};
var subtractDuration = (date, duration) => {
  return changeDuration(date, duration, false);
};
var isInTimeSpan = (value, startDate, endDate) => {
  if (startDate && endDate) {
    console.assert(startDate <= endDate);
    return startDate <= value && value <= endDate;
  } else if (startDate) {
    return startDate <= value;
  } else if (endDate) {
    return endDate >= value;
  } else {
    return true;
  }
};
var equalDate = (date1, date2) => {
  return date1.getFullYear() === date2.getFullYear() && date1.getMonth() === date2.getMonth() && date1.getDate() === date2.getDate();
};
var getWeeksForCalenderMonth = (date, weekStart, weeks = 6) => {
  const month = date.getMonth();
  const year = date.getFullYear();
  const dayList = [];
  let currentDate = new Date(year, month, 1);
  const weekStartIndex = weekDayList.indexOf(weekStart);
  while (currentDate.getDay() !== weekStartIndex) {
    currentDate = subtractDuration(currentDate, { days: 1 });
  }
  while (dayList.length < 7 * weeks) {
    const date2 = new Date(currentDate);
    date2.setHours(date2.getHours(), date2.getMinutes());
    dayList.push(date2);
    currentDate = addDuration(currentDate, { days: 1 });
  }
  return equalSizeGroups(dayList, 7);
};

// src/components/date/DatePicker.tsx
import clsx5 from "clsx";

// src/components/Button.tsx
import clsx from "clsx";
import { jsx as jsx2, jsxs } from "react/jsx-runtime";
var ButtonSizePaddings = {
  small: "btn-sm",
  medium: "btn-md",
  large: "btn-lg"
};
var SolidButton = ({
  children,
  disabled = false,
  color = "primary",
  size = "medium",
  startIcon,
  endIcon,
  onClick,
  className,
  ...restProps
}) => {
  const colorClasses = {
    primary: "bg-button-solid-primary-background text-button-solid-primary-text",
    secondary: "bg-button-solid-secondary-background text-button-solid-secondary-text",
    tertiary: "bg-button-solid-tertiary-background text-button-solid-tertiary-text",
    positive: "bg-button-solid-positive-background text-button-solid-positive-text",
    warning: "bg-button-solid-warning-background text-button-solid-warning-text",
    negative: "bg-button-solid-negative-background text-button-solid-negative-text"
  }[color];
  const iconColorClasses = {
    primary: "text-button-solid-primary-icon",
    secondary: "text-button-solid-secondary-icon",
    tertiary: "text-button-solid-tertiary-icon",
    positive: "text-button-solid-positive-icon",
    warning: "text-button-solid-warning-icon",
    negative: "text-button-solid-negative-icon"
  }[color];
  return /* @__PURE__ */ jsxs(
    "button",
    {
      onClick: disabled ? void 0 : onClick,
      disabled: disabled || onClick === void 0,
      className: clsx(
        className,
        {
          "text-disabled-text bg-disabled-background": disabled,
          [clsx(colorClasses, "hover:brightness-90")]: !disabled
        },
        ButtonSizePaddings[size]
      ),
      ...restProps,
      children: [
        startIcon && /* @__PURE__ */ jsx2(
          "span",
          {
            className: clsx({
              [iconColorClasses]: !disabled,
              [`text-disabled-icon`]: disabled
            }),
            children: startIcon
          }
        ),
        children,
        endIcon && /* @__PURE__ */ jsx2(
          "span",
          {
            className: clsx({
              [iconColorClasses]: !disabled,
              [`text-disabled-icon`]: disabled
            }),
            children: endIcon
          }
        )
      ]
    }
  );
};
var TextButton = ({
  children,
  disabled = false,
  color = "neutral",
  size = "medium",
  startIcon,
  endIcon,
  onClick,
  className,
  ...restProps
}) => {
  const colorClasses = {
    negative: "bg-transparent text-button-text-negative-text",
    neutral: "bg-transparent text-button-text-neutral-text"
  }[color];
  const iconColorClasses = {
    negative: "text-button-text-negative-icon",
    neutral: "text-button-text-neutral-icon"
  }[color];
  return /* @__PURE__ */ jsxs(
    "button",
    {
      onClick: disabled ? void 0 : onClick,
      disabled: disabled || onClick === void 0,
      className: clsx(
        className,
        {
          "text-disabled-text": disabled,
          [clsx(colorClasses, "hover:bg-button-text-hover-background rounded-full")]: !disabled
        },
        ButtonSizePaddings[size]
      ),
      ...restProps,
      children: [
        startIcon && /* @__PURE__ */ jsx2(
          "span",
          {
            className: clsx({
              [iconColorClasses]: !disabled,
              [`text-disabled-icon`]: disabled
            }),
            children: startIcon
          }
        ),
        children,
        endIcon && /* @__PURE__ */ jsx2(
          "span",
          {
            className: clsx({
              [iconColorClasses]: !disabled,
              [`text-disabled-icon`]: disabled
            }),
            children: endIcon
          }
        )
      ]
    }
  );
};

// src/components/date/YearMonthPicker.tsx
import { useEffect as useEffect3, useRef, useState as useState4 } from "react";
import { Scrollbars } from "react-custom-scrollbars-2";
import clsx3 from "clsx";

// src/components/Expandable.tsx
import { forwardRef, useState as useState3 } from "react";
import { ChevronDown, ChevronUp } from "lucide-react";
import clsx2 from "clsx";
import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
var DefaultIcon = (expanded) => expanded ? /* @__PURE__ */ jsx3(ChevronUp, { size: 16, className: "min-w-[16px]" }) : /* @__PURE__ */ jsx3(ChevronDown, { size: 16, className: "min-w-[16px]" });
var Expandable = forwardRef(({
  children,
  label,
  icon,
  initialExpansion = false,
  clickOnlyOnHeader = true,
  className = "",
  headerClassName = ""
}, ref) => {
  const [isExpanded, setIsExpanded] = useState3(initialExpansion);
  icon ??= DefaultIcon;
  return /* @__PURE__ */ jsxs2(
    "div",
    {
      ref,
      className: clsx2("col bg-surface text-on-surface group rounded-lg shadow-sm", { "cursor-pointer": !clickOnlyOnHeader }, className),
      onClick: () => !clickOnlyOnHeader && setIsExpanded(!isExpanded),
      children: [
        /* @__PURE__ */ jsxs2(
          "button",
          {
            className: clsx2("btn-md rounded-lg justify-between items-center bg-surface text-on-surface", { "group-hover:brightness-95": !isExpanded }, headerClassName),
            onClick: () => clickOnlyOnHeader && setIsExpanded(!isExpanded),
            children: [
              label,
              icon(isExpanded)
            ]
          }
        ),
        isExpanded && /* @__PURE__ */ jsx3("div", { className: "col", children })
      ]
    }
  );
});
Expandable.displayName = "Expandable";

// src/components/date/YearMonthPicker.tsx
import { jsx as jsx4 } from "react/jsx-runtime";
var YearMonthPicker = ({
  displayedYearMonth = /* @__PURE__ */ new Date(),
  start = subtractDuration(/* @__PURE__ */ new Date(), { years: 50 }),
  end = addDuration(/* @__PURE__ */ new Date(), { years: 50 }),
  onChange = noop,
  className = "",
  maxHeight = 300,
  showValueOpen = true
}) => {
  const locale = useLocale();
  const ref = useRef(null);
  useEffect3(() => {
    const scrollToItem = () => {
      if (ref.current) {
        ref.current.scrollIntoView({
          behavior: "instant",
          block: "center"
        });
      }
    };
    scrollToItem();
  }, [ref]);
  if (end < start) {
    console.error(`startYear: (${start}) less than endYear: (${end})`);
    return null;
  }
  const years = range(start.getFullYear(), end.getFullYear());
  return /* @__PURE__ */ jsx4("div", { className: clsx3("col select-none", className), children: /* @__PURE__ */ jsx4(Scrollbars, { autoHeight: true, autoHeightMax: maxHeight, style: { height: "100%" }, children: /* @__PURE__ */ jsx4("div", { className: "col gap-y-1 mr-3", children: years.map((year) => {
    const selectedYear = displayedYearMonth.getFullYear() === year;
    return /* @__PURE__ */ jsx4(
      Expandable,
      {
        ref: (displayedYearMonth.getFullYear() ?? (/* @__PURE__ */ new Date()).getFullYear()) === year ? ref : void 0,
        label: /* @__PURE__ */ jsx4("span", { className: clsx3({ "text-primary font-bold": selectedYear }), children: year }),
        initialExpansion: showValueOpen && selectedYear,
        children: /* @__PURE__ */ jsx4("div", { className: "col gap-y-1 px-2 pb-2", children: equalSizeGroups([...monthsList], 3).map((monthList, index) => /* @__PURE__ */ jsx4("div", { className: "row", children: monthList.map((month) => {
          const monthIndex = monthsList.indexOf(month);
          const newDate = new Date(year, monthIndex);
          const selectedMonth = selectedYear && monthIndex === displayedYearMonth.getMonth();
          const firstOfMonth = new Date(year, monthIndex, 1);
          const lastOfMonth = new Date(year, monthIndex, 1);
          const isAfterStart = start === void 0 || start <= addDuration(subtractDuration(lastOfMonth, { days: 1 }), { months: 1 });
          const isBeforeEnd = end === void 0 || firstOfMonth <= end;
          const isValid = isAfterStart && isBeforeEnd;
          return /* @__PURE__ */ jsx4(
            "button",
            {
              disabled: !isValid,
              className: clsx3(
                "chip hover:brightness-95 flex-1",
                {
                  "bg-gray-50 text-black": !selectedMonth && isValid,
                  "bg-primary text-on-primary": selectedMonth && isValid,
                  "bg-disabled-background text-disabled-text": !isValid
                }
              ),
              onClick: () => {
                onChange(newDate);
              },
              children: new Intl.DateTimeFormat(locale, { month: "short" }).format(newDate)
            },
            month
          );
        }) }, index)) })
      },
      year
    );
  }) }) }) });
};

// src/components/date/DayPicker.tsx
import clsx4 from "clsx";
import { useEffect as useEffect4, useState as useState5 } from "react";
import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
var DayPicker = ({
  displayedMonth,
  selected,
  start,
  end,
  onChange = noop,
  weekStart = "monday",
  markToday = true,
  className = ""
}) => {
  const locale = useLocale();
  const month = displayedMonth.getMonth();
  const weeks = getWeeksForCalenderMonth(displayedMonth, weekStart);
  return /* @__PURE__ */ jsxs3("div", { className: clsx4("col gap-y-1 min-w-[220px] select-none", className), children: [
    /* @__PURE__ */ jsx5("div", { className: "row text-center", children: weeks[0].map((weekDay, index) => /* @__PURE__ */ jsx5("div", { className: "flex-1 font-semibold", children: new Intl.DateTimeFormat(locale, { weekday: "long" }).format(weekDay).substring(0, 2) }, index)) }),
    weeks.map((week, index) => /* @__PURE__ */ jsx5("div", { className: "row text-center", children: week.map((date) => {
      const isSelected = !!selected && equalDate(selected, date);
      const isToday = equalDate(/* @__PURE__ */ new Date(), date);
      const isSameMonth = date.getMonth() === month;
      const isDayValid = isInTimeSpan(date, start, end);
      return /* @__PURE__ */ jsx5(
        "button",
        {
          disabled: !isDayValid,
          className: clsx4(
            "flex-1 rounded-full border-2 border-transparent shadow-sm",
            {
              "text-gray-700 bg-gray-100": !isSameMonth && isDayValid,
              "text-black bg-white": !isSelected && isSameMonth && isDayValid,
              "text-on-primary bg-primary": isSelected,
              "border-black": isToday && markToday,
              "hover:brightness-90 hover:bg-primary hover:text-on-primary": isDayValid,
              "text-disabled-text bg-disabled-background": !isDayValid
            }
          ),
          onClick: () => onChange(date),
          children: date.getDate()
        },
        date.getDate()
      );
    }) }, index))
  ] });
};

// src/components/date/DatePicker.tsx
import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
var defaultDatePickerTranslation = {
  en: {
    today: "Today"
  },
  de: {
    today: "Heute"
  }
};
var DatePicker = ({
  overwriteTranslation,
  value = /* @__PURE__ */ new Date(),
  start = subtractDuration(/* @__PURE__ */ new Date(), { years: 50 }),
  end = addDuration(/* @__PURE__ */ new Date(), { years: 50 }),
  initialDisplay = "day",
  onChange = noop,
  yearMonthPickerProps,
  dayPickerProps,
  className = ""
}) => {
  const locale = useLocale();
  const translation = useTranslation(defaultDatePickerTranslation, overwriteTranslation);
  const [displayedMonth, setDisplayedMonth] = useState6(value);
  const [displayMode, setDisplayMode] = useState6(initialDisplay);
  useEffect5(() => {
    setDisplayedMonth(value);
  }, [value]);
  return /* @__PURE__ */ jsxs4("div", { className: clsx5("col gap-y-4", className), children: [
    /* @__PURE__ */ jsxs4("div", { className: "row items-center justify-between h-7", children: [
      /* @__PURE__ */ jsxs4(
        TextButton,
        {
          className: clsx5("row gap-x-1 items-center cursor-pointer select-none", {
            "text-disabled-text": displayMode !== "day"
          }),
          onClick: () => setDisplayMode(displayMode === "day" ? "yearMonth" : "day"),
          children: [
            `${new Intl.DateTimeFormat(locale, { month: "long" }).format(displayedMonth)} ${displayedMonth.getFullYear()}`,
            /* @__PURE__ */ jsx6(ChevronDown2, { size: 16 })
          ]
        }
      ),
      displayMode === "day" && /* @__PURE__ */ jsxs4("div", { className: "row justify-end", children: [
        /* @__PURE__ */ jsx6(
          SolidButton,
          {
            size: "small",
            color: "primary",
            disabled: !isInTimeSpan(subtractDuration(displayedMonth, { months: 1 }), start, end),
            onClick: () => {
              setDisplayedMonth(subtractDuration(displayedMonth, { months: 1 }));
            },
            children: /* @__PURE__ */ jsx6(ArrowUp, { size: 20 })
          }
        ),
        /* @__PURE__ */ jsx6(
          SolidButton,
          {
            size: "small",
            color: "primary",
            disabled: !isInTimeSpan(addDuration(displayedMonth, { months: 1 }), start, end),
            onClick: () => {
              setDisplayedMonth(addDuration(displayedMonth, { months: 1 }));
            },
            children: /* @__PURE__ */ jsx6(ArrowDown, { size: 20 })
          }
        )
      ] })
    ] }),
    displayMode === "yearMonth" ? /* @__PURE__ */ jsx6(
      YearMonthPicker,
      {
        ...yearMonthPickerProps,
        displayedYearMonth: value,
        start,
        end,
        onChange: (newDate) => {
          setDisplayedMonth(newDate);
          setDisplayMode("day");
        }
      }
    ) : /* @__PURE__ */ jsxs4("div", { children: [
      /* @__PURE__ */ jsx6(
        DayPicker,
        {
          ...dayPickerProps,
          displayedMonth,
          start,
          end,
          selected: value,
          onChange: (date) => {
            onChange(date);
          }
        }
      ),
      /* @__PURE__ */ jsx6("div", { className: "mt-2", children: /* @__PURE__ */ jsx6(
        TextButton,
        {
          onClick: () => {
            const newDate = /* @__PURE__ */ new Date();
            newDate.setHours(value.getHours(), value.getMinutes());
            onChange(newDate);
          },
          children: translation.today
        }
      ) })
    ] })
  ] });
};
var ControlledDatePicker = ({
  value = /* @__PURE__ */ new Date(),
  onChange = noop,
  ...props
}) => {
  const [date, setDate] = useState6(value);
  useEffect5(() => setDate(value), [value]);
  return /* @__PURE__ */ jsx6(
    DatePicker,
    {
      ...props,
      value: date,
      onChange: (date1) => {
        setDate(date1);
        onChange(date1);
      }
    }
  );
};
export {
  ControlledDatePicker,
  DatePicker
};
//# sourceMappingURL=DatePicker.mjs.map