@stenajs-webui/calendar 21.26.0 → 21.28.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,4 +1,5 @@
1
1
  import * as React from "react";
2
+ import { ReactNode } from "react";
2
3
  import { OnClickWeek } from "../../../types/CalendarTypes";
3
4
  import { WeekData } from "../../../util/calendar/CalendarDataFactory";
4
5
  import { CalendarTheme } from "../CalendarTheme";
@@ -6,7 +7,7 @@ export interface WeekNumberCellProps {
6
7
  week: WeekData;
7
8
  onClickWeek?: OnClickWeek;
8
9
  theme: CalendarTheme;
9
- background?: JSX.Element;
10
+ background?: ReactNode;
10
11
  prefix?: string;
11
12
  backgroundColor?: string;
12
13
  }
@@ -1,2 +1,2 @@
1
1
  import { RefObject } from "react";
2
- export declare const useDateRangeEffects: (startDate: Date | undefined, endDate: Date | undefined, setDateInFocus: (date: Date) => void, startDateInputRef: RefObject<HTMLInputElement>, endDateInputRef: RefObject<HTMLInputElement>) => void;
2
+ export declare const useDateRangeEffects: (startDate: Date | undefined, endDate: Date | undefined, setDateInFocus: (date: Date) => void, startDateInputRef: RefObject<HTMLInputElement | null>, endDateInputRef: RefObject<HTMLInputElement | null>) => void;
@@ -3,7 +3,7 @@ import { RefObject } from "react";
3
3
  import { DayData } from "../../../../util/calendar/CalendarDataFactory";
4
4
  import { DateRangeDualTextInputProps } from "../DateRangeDualTextInput";
5
5
  import { UseInputStatesResult } from "./UseInputStates";
6
- export declare const useUserInputHandlers: (startDate: Date | undefined, endDate: Date | undefined, onValueChange: DateRangeDualTextInputProps["onValueChange"], startDateInputRef: RefObject<HTMLInputElement>, endDateInputRef: RefObject<HTMLInputElement>, showCalendar: (dateInFocus?: Date) => void, hideCalendar: () => void, { firstFocusedInput, setFirstFocusedInput, isCalendarVisible, setFocusedInput, focusedInput, setCurrentPanel, setDateInFocus, }: UseInputStatesResult) => {
6
+ export declare const useUserInputHandlers: (startDate: Date | undefined, endDate: Date | undefined, onValueChange: DateRangeDualTextInputProps["onValueChange"], startDateInputRef: RefObject<HTMLInputElement | null>, endDateInputRef: RefObject<HTMLInputElement | null>, showCalendar: (dateInFocus?: Date) => void, hideCalendar: () => void, { firstFocusedInput, setFirstFocusedInput, isCalendarVisible, setFocusedInput, focusedInput, setCurrentPanel, setDateInFocus, }: UseInputStatesResult) => {
7
7
  onFocusLeft: () => void;
8
8
  onFocusRight: () => void;
9
9
  onClickDay: (day: DayData) => void;
@@ -8,8 +8,8 @@ export declare const useDateRangeInput: (value: DateRange | undefined, onValueCh
8
8
  showCalendarStartDate: () => true;
9
9
  focusedInput: DateRangeFocusedInput;
10
10
  setFocusedInput: import("react").Dispatch<import("react").SetStateAction<DateRangeFocusedInput>>;
11
- startDateInputRef: import("react").RefObject<HTMLInputElement>;
12
- endDateInputRef: import("react").RefObject<HTMLInputElement>;
11
+ startDateInputRef: import("react").RefObject<HTMLInputElement | null>;
12
+ endDateInputRef: import("react").RefObject<HTMLInputElement | null>;
13
13
  onClickDay: (day: DayData) => void;
14
14
  startDateIsAfterEnd: boolean | undefined;
15
15
  };
@@ -1,2 +1,2 @@
1
1
  import { RefObject } from "react";
2
- export declare const useDateRangeEffects: (date: Date | undefined | null, setDateInFocus: (date: Date) => void, dateInputRef: RefObject<HTMLInputElement>) => void;
2
+ export declare const useDateRangeEffects: (date: Date | undefined | null, setDateInFocus: (date: Date) => void, dateInputRef: RefObject<HTMLInputElement | null>) => void;
@@ -1,7 +1,7 @@
1
1
  import { ChangeEvent, RefObject } from "react";
2
2
  import { DateTimeInputProps } from "../DateTimeInput";
3
3
  import { UseInputStatesResult } from "./UseInputStates";
4
- export declare const useDateRangeHandlers: (date: Date | undefined | null, onValueChange: DateTimeInputProps["onValueChange"], { setDateInFocus, showCalendarInternal, hideCalendarInternal, setFirstFocusedInput, setCurrentPanel, localTime, setLocalTime, localDate, setLocalDate, }: UseInputStatesResult, dateInputRef: RefObject<HTMLInputElement>) => {
4
+ export declare const useDateRangeHandlers: (date: Date | undefined | null, onValueChange: DateTimeInputProps["onValueChange"], { setDateInFocus, showCalendarInternal, hideCalendarInternal, setFirstFocusedInput, setCurrentPanel, localTime, setLocalTime, localDate, setLocalDate, }: UseInputStatesResult, dateInputRef: RefObject<HTMLInputElement | null>) => {
5
5
  inputLeftChangeHandler: (ev: ChangeEvent<HTMLInputElement>) => void;
6
6
  inputRightChangeHandler: (ev: ChangeEvent<HTMLInputElement>) => void;
7
7
  hideCalendar: () => void;
@@ -2,7 +2,7 @@ import * as React from "react";
2
2
  import { RefObject } from "react";
3
3
  import { DayData } from "../../../../util/calendar/CalendarDataFactory";
4
4
  import { UseInputStatesResult } from "./UseInputStates";
5
- export declare const useUserInputHandlers: (onChangeDate: (incomingDate: Date | null) => void, dateInputRef: RefObject<HTMLInputElement>, showCalendar: () => void, hideCalendar: () => void, { isCalendarVisible, setCurrentPanel, showTimePicker, hideTimePicker, }: UseInputStatesResult) => {
5
+ export declare const useUserInputHandlers: (onChangeDate: (incomingDate: Date | null) => void, dateInputRef: RefObject<HTMLInputElement | null>, showCalendar: () => void, hideCalendar: () => void, { isCalendarVisible, setCurrentPanel, showTimePicker, hideTimePicker, }: UseInputStatesResult) => {
6
6
  onFocusLeft: () => void;
7
7
  onFocusRight: () => void;
8
8
  onClickDay: (day: DayData) => void;
@@ -12,5 +12,5 @@ interface CalendarWithMonthYearPickersProps<T> extends Omit<CalendarProps<T>, "d
12
12
  onSelectPreset: (preset: CalendarPreset) => void;
13
13
  renderMonthPicker?: (args: RenderMonthPickerArgs) => ReactNode;
14
14
  }
15
- export declare const CalendarWithMonthYearPickers: <T>({ locale, dateInFocus, firstMonthInMonthPicker, setDateInFocus, currentPanel, setCurrentPanel, renderMonthPicker, ...props }: CalendarWithMonthYearPickersProps<T>) => string | number | boolean | React.JSX.Element | Iterable<React.ReactNode> | null | undefined;
15
+ export declare const CalendarWithMonthYearPickers: <T>({ locale, dateInFocus, firstMonthInMonthPicker, setDateInFocus, currentPanel, setCurrentPanel, renderMonthPicker, ...props }: CalendarWithMonthYearPickersProps<T>) => string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | React.JSX.Element | null | undefined;
16
16
  export {};
@@ -1,10 +1,10 @@
1
1
  import * as React from "react";
2
- import { MutableRefObject, RefObject } from "react";
2
+ import { RefObject } from "react";
3
3
  export interface TimePickerCellProps {
4
4
  item: number;
5
5
  selected?: boolean;
6
6
  onClick: (label: number) => void;
7
- columnRef: RefObject<HTMLDivElement>;
8
- canScrollRef: MutableRefObject<boolean>;
7
+ columnRef: RefObject<HTMLDivElement | null>;
8
+ canScrollRef: RefObject<boolean>;
9
9
  }
10
10
  export declare const TimePickerCell: React.FC<TimePickerCellProps>;
@@ -5,7 +5,7 @@ export declare const useTravelDateInput: (value: string | undefined, onValueChan
5
5
  onClickDate: (date: Date) => void;
6
6
  onValueChangeByInputs: (value: string) => void;
7
7
  prevMonthDisabled: boolean;
8
- monthPickerButtonRef: import("react").RefObject<HTMLButtonElement>;
8
+ monthPickerButtonRef: import("react").RefObject<HTMLButtonElement | null>;
9
9
  calendarId: string;
10
10
  monthPickerButtonLabel: string;
11
11
  visiblePanel: VisiblePanel;
@@ -6,7 +6,7 @@ export declare const useTravelDateRangeInput: (value: TravelDateRangeInputValue
6
6
  onValueChangeByInputs: (value: TravelDateRangeInputValue) => void;
7
7
  isValidDateRange: boolean;
8
8
  prevMonthDisabled: boolean;
9
- monthPickerButtonRef: import("react").RefObject<HTMLButtonElement>;
9
+ monthPickerButtonRef: import("react").RefObject<HTMLButtonElement | null>;
10
10
  calendarId: string;
11
11
  monthPickerButtonLabel: string;
12
12
  visiblePanel: VisiblePanel;
package/dist/index.es.js CHANGED
@@ -1,4 +1,4 @@
1
- (function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode("._calendar_1b766_1{--swui-calendar-day-width: 48px;--swui-calendar-day-height: 48px;--swui-calendar-day-border-radius: var(--swui-max-border-radius);--swui-calendar-week-number-bg-color: transparent;--swui-calendar-week-number-text-color: var(--lhds-color-ui-500);--swui-calendar-week-number-clickable-text-color: var(--lhds-color-ui-500);--swui-calendar-week-day-text-color: var(--lhds-color-ui-500);--swui-calendar-week-day-clickable-text-color: var(--lhds-color-ui-500);--swui-calendar-wrapper-selected-border: var(--modern-red);--swui-calendar-wrapper-selected-background: var(--modern-red);--swui-calendar-wrapper-range-border: var(--lhds-color-red-100);--swui-calendar-wrapper-range-background: var(--lhds-color-red-100);--swui-calendar-wrapper-today-border: var(--lhds-color-ui-200);--swui-calendar-wrapper-today-background: var(--lhds-color-ui-50);--swui-calendar-text-selected-color: #fff;--swui-calendar-text-disabled-color: var(--swui-text-disabled-color);--swui-calendar-text-in-other-month-color: var(--swui-text-disabled-color)}._calendar_1b766_1 table{border-spacing:0 4px}._calendar_1b766_1 tr td:last-child{border-top-right-radius:var(--swui-calendar-day-border-radius);border-bottom-right-radius:var(--swui-calendar-day-border-radius)}._calendar_1b766_1._weekNumberVisible_1b766_41 tr td:nth-child(2),._calendar_1b766_1:not(._weekNumberVisible_1b766_41) tr td:first-child{border-top-left-radius:var(--swui-calendar-day-border-radius);border-bottom-left-radius:var(--swui-calendar-day-border-radius)}._calendar_1b766_1 td{padding:0;width:var(--swui-calendar-day-width);height:var(--swui-calendar-day-height)}._timePicker_1w05d_1{overflow:hidden;width:180px}._timePickerColumn_1w05d_6{overflow-y:hidden;flex:1}._timePickerColumn_1w05d_6:hover{overflow-y:scroll}._travelDateCell_h6vcn_1{position:relative}._travelDateCell_h6vcn_1._small_h6vcn_4{width:40px;height:40px}._travelDateCell_h6vcn_1._medium_h6vcn_9{width:48px;height:48px}._travelDateCell_h6vcn_1._large_h6vcn_14{width:56px;height:28px}._travelDateCell_h6vcn_1{border-radius:var(--swui-max-border-radius)}._travelDateCell_h6vcn_1:focus{outline:none}._travelDateCell_h6vcn_1:focus-visible ._outline_h6vcn_26{outline:var(--swui-focus-outline);outline-width:var(--swui-focus-outline-width);background:transparent;position:absolute;border-radius:var(--swui-max-border-radius);top:0;bottom:0;left:0;right:0;z-index:10}._travelDateCell_h6vcn_1:focus-visible ._contentWrapper_h6vcn_39._contentWrapper_h6vcn_39._contentWrapper_h6vcn_39{border-color:transparent}._travelDateCell_h6vcn_1 ._contentWrapper_h6vcn_39{cursor:pointer;border-radius:var(--swui-max-border-radius);border-width:2px;border-style:solid;border-color:transparent;background:transparent;position:absolute;display:flex;align-items:center;justify-content:center;left:0;right:0;top:0;bottom:0}._travelDateCell_h6vcn_1 ._contentWrapper_h6vcn_39._disabled_h6vcn_60{cursor:not-allowed}._travelDateCell_h6vcn_1 ._contentWrapper_h6vcn_39._isToday_h6vcn_63{border-color:var(--lhds-color-ui-400)}._travelDateCell_h6vcn_1 ._contentWrapper_h6vcn_39._isSelectionStart_h6vcn_67,._travelDateCell_h6vcn_1 ._contentWrapper_h6vcn_39._isSelectionEnd_h6vcn_68{border-color:var(--modern-red)}._travelDateCell_h6vcn_1 ._contentWrapper_h6vcn_39._isSelectionStart_h6vcn_67{background:var(--modern-red)}._travelDateCell_h6vcn_1 ._contentWrapper_h6vcn_39._isSelectionStart_h6vcn_67 span{color:#fff}._travelDateCell_h6vcn_1 ._contentWrapper_h6vcn_39._isSelectionEnd_h6vcn_68:not(._isSelectionStart_h6vcn_67){background:#fff}._travelDateCell_h6vcn_1 ._contentWrapper_h6vcn_39._hover_h6vcn_83{border-color:var(--modern-red)}._travelDateCell_h6vcn_1 ._contentWrapper_h6vcn_39._hover_h6vcn_83._startSelected_h6vcn_86:not(._endSelected_h6vcn_86):not(._isSelectionStart_h6vcn_67){background:#fff}._travelDateCell_h6vcn_1 ._contentWrapper_h6vcn_39._hover_h6vcn_83._startSelected_h6vcn_86:not(._endSelected_h6vcn_86):not(._isSelectionStart_h6vcn_67) span{color:var(--swui-text-primary-color)}._travelDateCellBackground_1k07m_1._small_1k07m_2{width:20px;height:40px}._travelDateCellBackground_1k07m_1._medium_1k07m_7{width:24px;height:48px}._travelDateCellBackground_1k07m_1._large_1k07m_12{width:28px;height:56px}._travelCalendar_18pjj_1{border-spacing:0 4px;width:-moz-fit-content;width:fit-content}._travelCalendar_18pjj_1 td{padding:0}._travelDateRangeInput_1j7rp_1 ._overlay_1j7rp_2{transition:opacity var(--swui-animation-time-fast) ease-in-out;opacity:1}._travelDateRangeInput_1j7rp_1 ._overlay_1j7rp_2:not(._travelDateRangeInput_1j7rp_1 ._overlay_1j7rp_2._calendarVisible_1j7rp_6){opacity:0}._travelDateInput_hmfbf_1 ._overlay_hmfbf_2{transition:opacity var(--swui-animation-time-fast) ease-in-out;opacity:1}._travelDateInput_hmfbf_1 ._overlay_hmfbf_2:not(._travelDateInput_hmfbf_1 ._overlay_hmfbf_2._calendarVisible_hmfbf_6){opacity:0}")),document.head.appendChild(e)}}catch(r){console.error("vite-plugin-css-injected-by-js",r)}})();
1
+ (function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode("._calendar_1b766_1{--swui-calendar-day-width: 48px;--swui-calendar-day-height: 48px;--swui-calendar-day-border-radius: var(--swui-max-border-radius);--swui-calendar-week-number-bg-color: transparent;--swui-calendar-week-number-text-color: var(--lhds-color-ui-500);--swui-calendar-week-number-clickable-text-color: var(--lhds-color-ui-500);--swui-calendar-week-day-text-color: var(--lhds-color-ui-500);--swui-calendar-week-day-clickable-text-color: var(--lhds-color-ui-500);--swui-calendar-wrapper-selected-border: var(--modern-red);--swui-calendar-wrapper-selected-background: var(--modern-red);--swui-calendar-wrapper-range-border: var(--lhds-color-red-100);--swui-calendar-wrapper-range-background: var(--lhds-color-red-100);--swui-calendar-wrapper-today-border: var(--lhds-color-ui-200);--swui-calendar-wrapper-today-background: var(--lhds-color-ui-50);--swui-calendar-text-selected-color: #fff;--swui-calendar-text-disabled-color: var(--swui-text-disabled-color);--swui-calendar-text-in-other-month-color: var(--swui-text-disabled-color)}._calendar_1b766_1 table{border-spacing:0 4px}._calendar_1b766_1 tr td:last-child{border-top-right-radius:var(--swui-calendar-day-border-radius);border-bottom-right-radius:var(--swui-calendar-day-border-radius)}._calendar_1b766_1._weekNumberVisible_1b766_41 tr td:nth-child(2),._calendar_1b766_1:not(._weekNumberVisible_1b766_41) tr td:first-child{border-top-left-radius:var(--swui-calendar-day-border-radius);border-bottom-left-radius:var(--swui-calendar-day-border-radius)}._calendar_1b766_1 td{padding:0;width:var(--swui-calendar-day-width);height:var(--swui-calendar-day-height)}._timePicker_1w05d_1{overflow:hidden;width:180px}._timePickerColumn_1w05d_6{overflow-y:hidden;flex:1}._timePickerColumn_1w05d_6:hover{overflow-y:scroll}._travelDateCell_h6vcn_1{position:relative}._travelDateCell_h6vcn_1._small_h6vcn_4{width:40px;height:40px}._travelDateCell_h6vcn_1._medium_h6vcn_9{width:48px;height:48px}._travelDateCell_h6vcn_1._large_h6vcn_14{width:56px;height:28px}._travelDateCell_h6vcn_1{border-radius:var(--swui-max-border-radius)}._travelDateCell_h6vcn_1:focus{outline:none}._travelDateCell_h6vcn_1:focus-visible ._outline_h6vcn_26{outline:var(--swui-focus-outline);outline-width:var(--swui-focus-outline-width);background:transparent;position:absolute;border-radius:var(--swui-max-border-radius);top:0;bottom:0;left:0;right:0;z-index:10}._travelDateCell_h6vcn_1:focus-visible ._contentWrapper_h6vcn_39._contentWrapper_h6vcn_39._contentWrapper_h6vcn_39{border-color:transparent}._travelDateCell_h6vcn_1 ._contentWrapper_h6vcn_39{cursor:pointer;border-radius:var(--swui-max-border-radius);border-width:2px;border-style:solid;border-color:transparent;background:transparent;position:absolute;display:flex;align-items:center;justify-content:center;left:0;right:0;top:0;bottom:0}._travelDateCell_h6vcn_1 ._contentWrapper_h6vcn_39._disabled_h6vcn_60{cursor:not-allowed}._travelDateCell_h6vcn_1 ._contentWrapper_h6vcn_39._isToday_h6vcn_63{border-color:var(--lhds-color-ui-400)}._travelDateCell_h6vcn_1 ._contentWrapper_h6vcn_39._isSelectionStart_h6vcn_67,._travelDateCell_h6vcn_1 ._contentWrapper_h6vcn_39._isSelectionEnd_h6vcn_68{border-color:var(--modern-red)}._travelDateCell_h6vcn_1 ._contentWrapper_h6vcn_39._isSelectionStart_h6vcn_67{background:var(--modern-red)}._travelDateCell_h6vcn_1 ._contentWrapper_h6vcn_39._isSelectionStart_h6vcn_67 span{color:#fff}._travelDateCell_h6vcn_1 ._contentWrapper_h6vcn_39._isSelectionEnd_h6vcn_68:not(._isSelectionStart_h6vcn_67){background:#fff}._travelDateCell_h6vcn_1 ._contentWrapper_h6vcn_39._hover_h6vcn_83{border-color:var(--modern-red)}._travelDateCell_h6vcn_1 ._contentWrapper_h6vcn_39._hover_h6vcn_83._startSelected_h6vcn_86:not(._endSelected_h6vcn_86):not(._isSelectionStart_h6vcn_67){background:#fff}._travelDateCell_h6vcn_1 ._contentWrapper_h6vcn_39._hover_h6vcn_83._startSelected_h6vcn_86:not(._endSelected_h6vcn_86):not(._isSelectionStart_h6vcn_67) span{color:var(--swui-text-primary-color)}._travelDateCellBackground_1k07m_1._small_1k07m_2{width:20px;height:40px}._travelDateCellBackground_1k07m_1._medium_1k07m_7{width:24px;height:48px}._travelDateCellBackground_1k07m_1._large_1k07m_12{width:28px;height:56px}._travelCalendar_18pjj_1{border-spacing:0 4px;width:-webkit-fit-content;width:fit-content}._travelCalendar_18pjj_1 td{padding:0}._travelDateRangeInput_1j7rp_1 ._overlay_1j7rp_2{transition:opacity var(--swui-animation-time-fast) ease-in-out;opacity:1}._travelDateRangeInput_1j7rp_1 ._overlay_1j7rp_2:not(._travelDateRangeInput_1j7rp_1 ._overlay_1j7rp_2._calendarVisible_1j7rp_6){opacity:0}._travelDateInput_hmfbf_1 ._overlay_hmfbf_2{transition:opacity var(--swui-animation-time-fast) ease-in-out;opacity:1}._travelDateInput_hmfbf_1 ._overlay_hmfbf_2:not(._travelDateInput_hmfbf_1 ._overlay_hmfbf_2._calendarVisible_hmfbf_6){opacity:0}")),document.head.appendChild(e)}}catch(r){console.error("vite-plugin-css-injected-by-js",r)}})();
2
2
  import { jsx as o, jsxs as _, Fragment as he } from "react/jsx-runtime";
3
3
  import { Box as Y, Text as yt, Clickable as Ke, Row as W, Spacing as bn, useToday as Jt, Column as Q, Heading as Pt, exhaustSwitchCase as me, Space as St, Indent as Nt, SeparatorLine as wn, parseIntElseUndefined as Se, useBoolean as oe, useDelayedFalse as Te, useOnClickOutside as ze } from "@stenajs-webui/core";
4
4
  import { FlatButton as tt, stenaAngleDown as ge, PrimaryButton as It, stenaAngleLeft as yn, stenaAngleRight as Mn, SecondaryButton as ft, stenaAngleLeftDouble as kn, stenaArrowLeft as Zt, stenaArrowRight as Ht, stenaAngleRightDouble as Sn, TextInputButton as Tn, stenaCalendar as _t, Icon as Ge, stenaArrowWideRight as Rn, stenaClock as qe, Label as In, stenaAngleUp as En, CardBody as Je } from "@stenajs-webui/elements";