@stenajs-webui/calendar 25.1.7 → 25.3.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.
- package/dist/features/month-picker/MonthPicker.d.ts +5 -1
- package/dist/features/travel-calendar/components/TravelCalendar.d.ts +15 -1
- package/dist/features/travel-calendar/components/TravelCalendarOrMonthPicker.d.ts +19 -0
- package/dist/features/travel-calendar/components/TravelDateCell.d.ts +6 -0
- package/dist/features/travel-calendar/components/TravelDateCellBackground.d.ts +0 -2
- package/dist/features/travel-calendar/components/TravelDateTextInputRow.d.ts +12 -0
- package/dist/features/travel-calendar/util/KeyboardNavigation.d.ts +15 -1
- package/dist/index.css +1 -1
- package/dist/index.es.js +2067 -1959
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/package.json +9 -9
- package/dist/components/calendar-types/travel-date-calendar-panel/__tests__/TravelDateCalendarPanel.test.d.ts +0 -1
- package/dist/components/calendar-types/travel-date-range-calendar/__tests__/TravelDateRangeCalendar.test.d.ts +0 -1
- package/dist/features/travel-calendar/components/__tests__/StatefulTravelCalendars.d.ts +0 -16
- package/dist/features/travel-calendar/components/__tests__/TravelDateContent.test.d.ts +0 -1
- package/dist/features/travel-calendar/components/__tests__/VisibleMonth.test.d.ts +0 -1
|
@@ -1,7 +1,11 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { ValueAndOnValueChangeProps } from "@stenajs-webui/forms";
|
|
3
3
|
import { SupportedLocaleCode } from "../localize-date-format/LocaleMapper";
|
|
4
|
-
|
|
4
|
+
/**
|
|
5
|
+
* The size of the calendar the month picker stands in for. At "auto" it fills
|
|
6
|
+
* the width it is given, which a calendar of size "auto" keeps for it.
|
|
7
|
+
*/
|
|
8
|
+
export type MonthPickerSizeVariant = "smaller" | "small" | "medium" | "large" | "auto";
|
|
5
9
|
export interface MonthPickerProps extends ValueAndOnValueChangeProps<Date> {
|
|
6
10
|
localeCode: SupportedLocaleCode;
|
|
7
11
|
firstMonth: Date;
|
|
@@ -2,7 +2,15 @@ import * as React from "react";
|
|
|
2
2
|
import { Dispatch, SetStateAction } from "react";
|
|
3
3
|
import { MonthData } from "../../../util/calendar/CalendarDataFactory";
|
|
4
4
|
import { RenderTravelDateContent } from "../types";
|
|
5
|
-
|
|
5
|
+
/**
|
|
6
|
+
* The size of the dates. "smaller" to "large" are fixed sizes, 40 to 56px.
|
|
7
|
+
*
|
|
8
|
+
* "auto" sizes the dates to their content, for content that needs more room
|
|
9
|
+
* than a fixed size has, such as a price written out in full. Every date is
|
|
10
|
+
* as wide as the widest and as high as the highest, and none is smaller than
|
|
11
|
+
* "medium". Everything else, such as the month header, is "medium".
|
|
12
|
+
*/
|
|
13
|
+
export type TravelCalendarSizeVariant = "smaller" | "small" | "medium" | "large" | "auto";
|
|
6
14
|
export interface TravelCalendarProps {
|
|
7
15
|
visibleMonthData: MonthData;
|
|
8
16
|
onClickDate: (date: Date) => void;
|
|
@@ -21,6 +29,12 @@ export interface TravelCalendarProps {
|
|
|
21
29
|
hoverAnchor: Date | undefined;
|
|
22
30
|
today: Date;
|
|
23
31
|
isDateDisabled?: (date: Date) => boolean;
|
|
32
|
+
/** Also stops keyboard navigation into the previous month. */
|
|
33
|
+
prevMonthDisabled?: (visibleMonth: Date) => boolean;
|
|
34
|
+
/** Also stops keyboard navigation into the next month. */
|
|
35
|
+
nextMonthDisabled?: (visibleMonth: Date) => boolean;
|
|
36
|
+
/** The range field being edited. Its date gets the tab stop. */
|
|
37
|
+
activeField?: "startDate" | "endDate";
|
|
24
38
|
/**
|
|
25
39
|
* Renders the content of each date in the calendar, in place of the day
|
|
26
40
|
* number. The cell around it, with the selection, focus and keyboard
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { ReactNode } from "react";
|
|
3
|
+
import { VisiblePanel } from "../types";
|
|
4
|
+
import { TravelCalendarSizeVariant } from "./TravelCalendar";
|
|
5
|
+
export interface TravelCalendarOrMonthPickerProps {
|
|
6
|
+
size: TravelCalendarSizeVariant;
|
|
7
|
+
visiblePanel: VisiblePanel;
|
|
8
|
+
calendar: ReactNode;
|
|
9
|
+
monthPicker: ReactNode;
|
|
10
|
+
}
|
|
11
|
+
/**
|
|
12
|
+
* The calendar, or the month picker in its place.
|
|
13
|
+
*
|
|
14
|
+
* At size "auto" the calendar is as wide as its dates, which the month picker
|
|
15
|
+
* has no way of knowing. So the calendar stays under the month picker, hidden,
|
|
16
|
+
* and keeps its width for it: the month picker fills it, and nothing around
|
|
17
|
+
* the calendar changes width when the user opens it.
|
|
18
|
+
*/
|
|
19
|
+
export declare const TravelCalendarOrMonthPicker: React.FC<TravelCalendarOrMonthPickerProps>;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { DayData } from "../../../util/calendar/CalendarDataFactory";
|
|
3
|
+
import { Day } from "date-fns";
|
|
3
4
|
import { TravelCalendarSizeVariant } from "./TravelCalendar";
|
|
4
5
|
import { RenderTravelDateContent } from "../types";
|
|
5
6
|
export interface TravelDateCellProps {
|
|
@@ -12,6 +13,11 @@ export interface TravelDateCellProps {
|
|
|
12
13
|
onChangeVisibleMonth: (visibleMonth: Date) => void;
|
|
13
14
|
/** Focuses the date once its month is shown, which the app decides. */
|
|
14
15
|
focusDateWhenShown: (date: Date) => void;
|
|
16
|
+
onFocusDate: (date: Date) => void;
|
|
17
|
+
/** First day of the week in the grid, used by Home and End. */
|
|
18
|
+
weekStartsOn: Day;
|
|
19
|
+
isPrevMonthDisabled: boolean;
|
|
20
|
+
isNextMonthDisabled: boolean;
|
|
15
21
|
onStartHover: (date: Date) => void;
|
|
16
22
|
onEndHover: (date: Date) => void;
|
|
17
23
|
/** Current date that the mouse is hovering over. */
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { ReactNode } from "react";
|
|
3
|
+
import { TravelCalendarSizeVariant } from "./TravelCalendar";
|
|
4
|
+
export interface TravelDateTextInputRowProps {
|
|
5
|
+
calendarSize: TravelCalendarSizeVariant;
|
|
6
|
+
children?: ReactNode;
|
|
7
|
+
}
|
|
8
|
+
/**
|
|
9
|
+
* The row the text inputs are in. At size "auto" it is as wide as the
|
|
10
|
+
* calendar, and the inputs take their width from it.
|
|
11
|
+
*/
|
|
12
|
+
export declare const TravelDateTextInputRow: React.FC<TravelDateTextInputRowProps>;
|
|
@@ -1 +1,15 @@
|
|
|
1
|
-
|
|
1
|
+
import { Day } from "date-fns";
|
|
2
|
+
export interface DateToFocusOnOptions {
|
|
3
|
+
/**
|
|
4
|
+
* First day of the week in the grid, 0 for Sunday. Required, since the
|
|
5
|
+
* date-fns default (Sunday) is wrong for most supported locales.
|
|
6
|
+
*/
|
|
7
|
+
weekStartsOn: Day;
|
|
8
|
+
/**
|
|
9
|
+
* Home and End stay within this month. The days of the adjacent months in
|
|
10
|
+
* the first and last row are blank, so the row starts and ends where the
|
|
11
|
+
* month does.
|
|
12
|
+
*/
|
|
13
|
+
visibleMonth: Date;
|
|
14
|
+
}
|
|
15
|
+
export declare const getDateToFocusOn: (currentDate: Date, key: string, { weekStartsOn, visibleMonth }: DateToFocusOnOptions) => Date | undefined;
|
package/dist/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
._calendar_5yxz4_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(--core-blue);--swui-calendar-wrapper-selected-background: var(--core-blue);--swui-calendar-wrapper-range-border: var(--lhds-color-blue-100);--swui-calendar-wrapper-range-background: var(--lhds-color-blue-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_5yxz4_1 table{border-spacing:0 4px}._calendar_5yxz4_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_5yxz4_1._weekNumberVisible_5yxz4_41 tr td:nth-child(2),._calendar_5yxz4_1:not(._weekNumberVisible_5yxz4_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_5yxz4_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}.
|
|
1
|
+
._calendar_5yxz4_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(--core-blue);--swui-calendar-wrapper-selected-background: var(--core-blue);--swui-calendar-wrapper-range-border: var(--lhds-color-blue-100);--swui-calendar-wrapper-range-background: var(--lhds-color-blue-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_5yxz4_1 table{border-spacing:0 4px}._calendar_5yxz4_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_5yxz4_1._weekNumberVisible_5yxz4_41 tr td:nth-child(2),._calendar_5yxz4_1:not(._weekNumberVisible_5yxz4_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_5yxz4_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}._auto_tiwm6_12{container-type:inline-size;min-width:336px}._travelDateCell_1fmql_1{position:relative;--cell-height: var(--travel-calendar-cell-height, var(--cell-default-height));--cell-border-radius: var( --travel-calendar-cell-border-radius, var(--swui-max-border-radius) )}._travelDateCell_1fmql_1._smaller_1fmql_22{width:40px;--cell-default-height: 40px}._travelDateCell_1fmql_1._small_1fmql_22{width:44px;--cell-default-height: 44px}._travelDateCell_1fmql_1._medium_1fmql_32{width:48px;--cell-default-height: 48px}._travelDateCell_1fmql_1._large_1fmql_37{width:56px;--cell-default-height: 56px}._travelDateCell_1fmql_1{height:calc(var(--cell-height) + var(--cell-row-gap, 4px));border-radius:var(--cell-border-radius)}._travelDateCell_1fmql_1._auto_1fmql_51{--cell-default-height: 48px;display:flex;flex-direction:column;height:auto;padding-top:calc(var(--cell-row-gap, 4px) / 2);padding-bottom:calc(var(--cell-row-gap, 4px) / 2)}._travelDateCell_1fmql_1._auto_1fmql_51 ._contentWrapper_1fmql_60{position:relative;inset:auto;flex:1;box-sizing:border-box;min-width:48px;min-height:var(--cell-height)}._travelDateCell_1fmql_1._clickable_1fmql_71{cursor:pointer}._travelDateCell_1fmql_1._disabled_1fmql_75{cursor:not-allowed}._travelDateCell_1fmql_1:focus{outline:none}._travelDateCell_1fmql_1:focus-visible ._outline_1fmql_84{outline:var(--swui-focus-outline);outline-width:var(--swui-focus-outline-width);background:transparent;position:absolute;border-radius:var(--cell-border-radius);top:calc(var(--cell-row-gap, 4px) / 2);bottom:calc(var(--cell-row-gap, 4px) / 2);left:0;right:0;z-index:10}._travelDateCell_1fmql_1:focus-visible ._contentWrapper_1fmql_60._contentWrapper_1fmql_60._contentWrapper_1fmql_60{border-color:transparent}._travelDateCell_1fmql_1 ._contentWrapper_1fmql_60{--travel-calendar-date-content-color: var(--swui-text-primary-color);pointer-events:none;border-radius:var(--cell-border-radius);border-width:2px;border-style:solid;border-color:transparent;background:transparent;position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;left:0;right:0;top:calc(var(--cell-row-gap, 4px) / 2);bottom:calc(var(--cell-row-gap, 4px) / 2)}._travelDateCell_1fmql_1 ._contentWrapper_1fmql_60 ._todayDot_1fmql_141{width:4px;height:4px;border-radius:50%;background:var(--lhds-color-red-500)}._travelDateCell_1fmql_1 ._contentWrapper_1fmql_60 ._defaultTodayMarkerPosition_1fmql_148{position:absolute;bottom:6px;left:50%;margin-left:-2px;display:flex}._travelDateCell_1fmql_1 ._contentWrapper_1fmql_60._isSelectionStart_1fmql_157 ._todayDot_1fmql_141{background:#fff}._travelDateCell_1fmql_1 ._contentWrapper_1fmql_60._isSelectionStart_1fmql_157,._travelDateCell_1fmql_1 ._contentWrapper_1fmql_60._isSelectionEnd_1fmql_162{border-color:var(--selection-background-color)}._travelDateCell_1fmql_1 ._contentWrapper_1fmql_60._isSelectionStart_1fmql_157{background:var(--selection-background-color);--travel-calendar-date-content-color: white}._travelDateCell_1fmql_1 ._contentWrapper_1fmql_60._isSelectionEnd_1fmql_162:not(._isSelectionStart_1fmql_157){background:#fff}._travelDateCell_1fmql_1 ._contentWrapper_1fmql_60._hover_1fmql_175{border-color:var(--selection-background-color)}._travelDateCell_1fmql_1 ._contentWrapper_1fmql_60._hover_1fmql_175._startSelected_1fmql_178:not(._endSelected_1fmql_178):not(._isSelectionStart_1fmql_157){background:#fff;--travel-calendar-date-content-color: var(--swui-text-primary-color)}._travelDateCellBackground_3v66m_1{position:absolute;top:calc(var(--cell-row-gap, 4px) / 2);bottom:calc(var(--cell-row-gap, 4px) / 2);left:0;right:0;display:flex}._travelDateCellBackground_3v66m_1>*{flex:1}._travelCalendar_1h0ot_1{--cell-row-gap: 4px;border-spacing:0;padding-top:calc(var(--cell-row-gap, 4px) / 2);padding-bottom:calc(var(--cell-row-gap, 4px) / 2);width:fit-content;-webkit-user-select:none;user-select:none;--selection-background-color: var( --travel-calendar-selection-background-color, var(--core-blue) );--selection-range-background-color: var( --travel-calendar-selection-range-background-color, var(--himmel) )}._travelCalendar_1h0ot_1 th{padding-top:calc(var(--cell-row-gap, 4px) / 2);padding-bottom:calc(var(--cell-row-gap, 4px) / 2)}._travelCalendar_1h0ot_1 td{padding:0}._travelCalendar_1h0ot_1._auto_1h0ot_51{display:block}._travelCalendar_1h0ot_1._auto_1h0ot_51 tbody{display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:auto;grid-auto-rows:1fr}._travelCalendar_1h0ot_1._auto_1h0ot_51 tr{display:grid;grid-column:1 / -1;grid-template-columns:subgrid}._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}._travelCalendarOrMonthPicker_o89ob_2{display:grid}._travelCalendarOrMonthPicker_o89ob_2>*{grid-area:1 / 1}._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}
|