@stenajs-webui/calendar 15.5.9 → 15.7.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/CHANGELOG.md +12 -0
- package/dist/components/input-types/date-input/DateInput.d.ts +4 -0
- package/dist/components/input-types/date-input/DateInput.stories.d.ts +1 -0
- package/dist/components/input-types/date-range-dual-text-input/DateRangeDualTextInput.d.ts +2 -1
- package/dist/components/input-types/date-range-dual-text-input/DateRangeDualTextInput.stories.d.ts +2 -1
- package/dist/components/input-types/date-range-input/DateRangeInput.d.ts +5 -1
- package/dist/components/input-types/date-range-input/DateRangeInput.stories.d.ts +2 -1
- package/dist/components/input-types/date-time-input/DateTimeInput.d.ts +1 -0
- package/dist/components/input-types/date-time-input/DateTimeInput.stories.d.ts +1 -0
- package/dist/features/dual-text-input/DualTextInput.d.ts +1 -0
- package/dist/index.es.js +20 -19
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +20 -19
- package/dist/index.js.map +1 -1
- package/package.json +7 -7
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,15 @@
|
|
|
1
|
+
# v15.7.0 (Tue Jun 14 2022)
|
|
2
|
+
|
|
3
|
+
#### 🚀 Enhancement
|
|
4
|
+
|
|
5
|
+
- 94903 add disabled state to date components [#464](https://github.com/StenaIT/stenajs-webui/pull/464) (emil.heldring@stenaline.com)
|
|
6
|
+
|
|
7
|
+
#### Authors: 1
|
|
8
|
+
|
|
9
|
+
- Emil Heldring ([@emilheldring95](https://github.com/emilheldring95))
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
1
13
|
# v15.3.1 (Wed Mar 30 2022)
|
|
2
14
|
|
|
3
15
|
#### 🐛 Bug Fix
|
|
@@ -44,5 +44,9 @@ export interface DateInputProps<T = {}> extends OptionalMinMaxDatesAsString {
|
|
|
44
44
|
calendarTheme?: CalendarTheme;
|
|
45
45
|
/** Props to be passed to Calendar, see SingleDateCalendar. */
|
|
46
46
|
calendarProps?: DateTextInputCalendarProps<T>;
|
|
47
|
+
/**
|
|
48
|
+
* Disables the TextInput, Calendar and Popover.
|
|
49
|
+
*/
|
|
50
|
+
disabled?: boolean;
|
|
47
51
|
}
|
|
48
52
|
export declare const DateInput: React.FC<DateInputProps>;
|
|
@@ -8,6 +8,7 @@ declare const _default: {
|
|
|
8
8
|
export default _default;
|
|
9
9
|
export declare const Standard: () => JSX.Element;
|
|
10
10
|
export declare const Centered: () => JSX.Element;
|
|
11
|
+
export declare const Disabled: () => JSX.Element;
|
|
11
12
|
export declare const WithDisabledDateTomorrow: () => JSX.Element;
|
|
12
13
|
export declare const Empty: () => JSX.Element;
|
|
13
14
|
export declare const UsingPortal: () => JSX.Element;
|
|
@@ -10,5 +10,6 @@ export interface DateRangeDualTextInputProps<TData = unknown> extends ValueAndOn
|
|
|
10
10
|
onBlur?: () => void;
|
|
11
11
|
autoFocus?: boolean;
|
|
12
12
|
calendarProps?: DateRangeInputCalendarProps<TData>;
|
|
13
|
+
disabled?: boolean;
|
|
13
14
|
}
|
|
14
|
-
export declare const DateRangeDualTextInput: <TData extends {}>({ value, onValueChange, autoFocus, onBlur, onEnter, onEsc, minDate, maxDate, calendarProps, widthLeft, widthRight, }: DateRangeDualTextInputProps<TData>) => JSX.Element;
|
|
15
|
+
export declare const DateRangeDualTextInput: <TData extends {}>({ value, onValueChange, autoFocus, onBlur, onEnter, onEsc, minDate, maxDate, calendarProps, widthLeft, widthRight, disabled, }: DateRangeDualTextInputProps<TData>) => JSX.Element;
|
package/dist/components/input-types/date-range-dual-text-input/DateRangeDualTextInput.stories.d.ts
CHANGED
|
@@ -2,12 +2,13 @@
|
|
|
2
2
|
import { Story } from "@storybook/react";
|
|
3
3
|
declare const _default: {
|
|
4
4
|
title: string;
|
|
5
|
-
component: <TData extends {}>({ value, onValueChange, autoFocus, onBlur, onEnter, onEsc, minDate, maxDate, calendarProps, widthLeft, widthRight, }: import("./DateRangeDualTextInput").DateRangeDualTextInputProps<TData>) => JSX.Element;
|
|
5
|
+
component: <TData extends {}>({ value, onValueChange, autoFocus, onBlur, onEnter, onEsc, minDate, maxDate, calendarProps, widthLeft, widthRight, disabled, }: import("./DateRangeDualTextInput").DateRangeDualTextInputProps<TData>) => JSX.Element;
|
|
6
6
|
decorators: ((TheStory: Story) => JSX.Element)[];
|
|
7
7
|
};
|
|
8
8
|
export default _default;
|
|
9
9
|
export declare const Standard: () => JSX.Element;
|
|
10
10
|
export declare const Centered: () => JSX.Element;
|
|
11
|
+
export declare const Disabled: () => JSX.Element;
|
|
11
12
|
export declare const StartSelected: () => JSX.Element;
|
|
12
13
|
export declare const EndSelected: () => JSX.Element;
|
|
13
14
|
export declare const RangeSelected: () => JSX.Element;
|
|
@@ -40,8 +40,12 @@ export interface DateRangeInputProps<T> extends OptionalMinMaxDatesAsString, Val
|
|
|
40
40
|
calendarTheme?: CalendarTheme;
|
|
41
41
|
/** Props to be passed to DateRangeCalendar, see DateRangeCalendar. */
|
|
42
42
|
calendarProps?: DateRangeInputCalendarProps<T>;
|
|
43
|
+
/**
|
|
44
|
+
* Disables the Popover and both TextInputs.
|
|
45
|
+
*/
|
|
46
|
+
disabled?: boolean;
|
|
43
47
|
}
|
|
44
48
|
/**
|
|
45
49
|
* @deprecated Please use DateRangeDualTextInput instead.
|
|
46
50
|
*/
|
|
47
|
-
export declare const DateRangeInput: <T extends {}>({ displayFormat, placeholderStartDate, placeholderEndDate, portalTarget, value, onValueChange, zIndex, width, calendarTheme, calendarProps, minDate, maxDate, }: DateRangeInputProps<T>) => React.ReactElement<DateRangeInputProps<T>, string | React.JSXElementConstructor<any>>;
|
|
51
|
+
export declare const DateRangeInput: <T extends {}>({ displayFormat, placeholderStartDate, placeholderEndDate, portalTarget, value, onValueChange, zIndex, width, calendarTheme, calendarProps, minDate, maxDate, disabled, }: DateRangeInputProps<T>) => React.ReactElement<DateRangeInputProps<T>, string | React.JSXElementConstructor<any>>;
|
|
@@ -2,12 +2,13 @@ import { Story } from "@storybook/react";
|
|
|
2
2
|
import * as React from "react";
|
|
3
3
|
declare const _default: {
|
|
4
4
|
title: string;
|
|
5
|
-
component: <T extends {}>({ displayFormat, placeholderStartDate, placeholderEndDate, portalTarget, value, onValueChange, zIndex, width, calendarTheme, calendarProps, minDate, maxDate, }: import("./DateRangeInput").DateRangeInputProps<T>) => React.ReactElement<import("./DateRangeInput").DateRangeInputProps<T>, string | React.JSXElementConstructor<any>>;
|
|
5
|
+
component: <T extends {}>({ displayFormat, placeholderStartDate, placeholderEndDate, portalTarget, value, onValueChange, zIndex, width, calendarTheme, calendarProps, minDate, maxDate, disabled, }: import("./DateRangeInput").DateRangeInputProps<T>) => React.ReactElement<import("./DateRangeInput").DateRangeInputProps<T>, string | React.JSXElementConstructor<any>>;
|
|
6
6
|
decorators: ((TheStory: Story) => JSX.Element)[];
|
|
7
7
|
};
|
|
8
8
|
export default _default;
|
|
9
9
|
export declare const Standard: () => JSX.Element;
|
|
10
10
|
export declare const Centered: () => JSX.Element;
|
|
11
|
+
export declare const Disabled: () => JSX.Element;
|
|
11
12
|
export declare const Empty: () => JSX.Element;
|
|
12
13
|
export declare const UsingPortal: () => JSX.Element;
|
|
13
14
|
export declare const WithPreselectedValue: () => JSX.Element;
|
|
@@ -8,5 +8,6 @@ declare const _default: {
|
|
|
8
8
|
export default _default;
|
|
9
9
|
export declare const Standard: () => JSX.Element;
|
|
10
10
|
export declare const Centered: () => JSX.Element;
|
|
11
|
+
export declare const Disabled: () => JSX.Element;
|
|
11
12
|
export declare const PreselectedValue: () => JSX.Element;
|
|
12
13
|
export declare const MinMaxDates: () => JSX.Element;
|
package/dist/index.es.js
CHANGED
|
@@ -1153,12 +1153,13 @@ var useDateInput = function (onChange, onClose, openOnMount) {
|
|
|
1153
1153
|
var defaultMaxDate = "2999-12-31";
|
|
1154
1154
|
|
|
1155
1155
|
var DateInput = function (_a) {
|
|
1156
|
-
var _b = _a.displayFormat, displayFormat = _b === void 0 ? DateFormats.fullDate : _b, _c = _a.placeholder, placeholder = _c === void 0 ? "Enter date" : _c, value = _a.value, _d = _a.zIndex, zIndex = _d === void 0 ? 100 : _d, _e = _a.calendarTheme, calendarTheme = _e === void 0 ? defaultCalendarTheme : _e, calendarProps = _a.calendarProps, openOnMount = _a.openOnMount, onClose = _a.onClose, onChange = _a.onChange, portalTarget = _a.portalTarget, variant = _a.variant, width = _a.width, minDate = _a.minDate, _f = _a.maxDate, maxDate = _f === void 0 ? defaultMaxDate : _f;
|
|
1156
|
+
var _b = _a.displayFormat, displayFormat = _b === void 0 ? DateFormats.fullDate : _b, _c = _a.placeholder, placeholder = _c === void 0 ? "Enter date" : _c, value = _a.value, _d = _a.zIndex, zIndex = _d === void 0 ? 100 : _d, _e = _a.calendarTheme, calendarTheme = _e === void 0 ? defaultCalendarTheme : _e, calendarProps = _a.calendarProps, openOnMount = _a.openOnMount, onClose = _a.onClose, onChange = _a.onChange, portalTarget = _a.portalTarget, variant = _a.variant, width = _a.width, minDate = _a.minDate, _f = _a.maxDate, maxDate = _f === void 0 ? defaultMaxDate : _f, disabled = _a.disabled;
|
|
1157
1157
|
var _g = useDateInput(onChange, onClose, openOnMount), hideCalendar = _g.hideCalendar, showingCalendar = _g.showingCalendar, onSelectDate = _g.onSelectDate, showCalendar = _g.showCalendar;
|
|
1158
1158
|
var _h = useCalendarPopoverUpdater(), tippyRef = _h.tippyRef, onChangePanel = _h.onChangePanel;
|
|
1159
1159
|
return (React.createElement(Box, { width: width },
|
|
1160
|
-
React.createElement(Popover, { arrow: false, lazy: true, visible: showingCalendar, onClickOutside: hideCalendar, placement: defaultPopoverPlacement, zIndex: zIndex, appendTo: portalTarget !== null && portalTarget !== void 0 ? portalTarget : "parent", tippyRef: tippyRef, content: React.createElement(SingleDateCalendar, __assign({}, calendarProps, { onChange: onSelectDate, value: value, theme: calendarTheme, onChangePanel: onChangePanel, minDate: minDate, maxDate: maxDate })) },
|
|
1161
|
-
React.createElement(TextInput, { type: "date",
|
|
1160
|
+
React.createElement(Popover, { arrow: false, lazy: true, visible: showingCalendar, onClickOutside: hideCalendar, placement: defaultPopoverPlacement, zIndex: zIndex, appendTo: portalTarget !== null && portalTarget !== void 0 ? portalTarget : "parent", tippyRef: tippyRef, disabled: disabled, content: React.createElement(SingleDateCalendar, __assign({}, calendarProps, { onChange: onSelectDate, value: value, theme: calendarTheme, onChangePanel: onChangePanel, minDate: minDate, maxDate: maxDate })) },
|
|
1161
|
+
React.createElement(TextInput, { type: "date", contentRight: React.createElement(Row, { alignItems: "center" },
|
|
1162
|
+
React.createElement(FlatButton, { size: "small", disabled: disabled, leftIcon: faCalendarAlt, onClick: showCalendar })), onFocus: showCalendar, onClickRight: showCalendar, value: value ? format(value, displayFormat) : "", placeholder: placeholder, size: 9, disabled: disabled, autoFocus: openOnMount, variant: variant, min: minDate, max: maxDate }))));
|
|
1162
1163
|
};
|
|
1163
1164
|
|
|
1164
1165
|
var useDateRangeInput = function (value, onValueChange) {
|
|
@@ -1230,20 +1231,20 @@ var useDateRangeInput = function (value, onValueChange) {
|
|
|
1230
1231
|
* @deprecated Please use DateRangeDualTextInput instead.
|
|
1231
1232
|
*/
|
|
1232
1233
|
var DateRangeInput = function (_a) {
|
|
1233
|
-
var _b = _a.displayFormat, displayFormat = _b === void 0 ? DateFormats.fullDate : _b, _c = _a.placeholderStartDate, placeholderStartDate = _c === void 0 ? "Start date" : _c, _d = _a.placeholderEndDate, placeholderEndDate = _d === void 0 ? "End date" : _d, portalTarget = _a.portalTarget, value = _a.value, onValueChange = _a.onValueChange, _e = _a.zIndex, zIndex = _e === void 0 ? 100 : _e, width = _a.width, _f = _a.calendarTheme, calendarTheme = _f === void 0 ? defaultCalendarTheme : _f, calendarProps = _a.calendarProps, minDate = _a.minDate, _g = _a.maxDate, maxDate = _g === void 0 ? defaultMaxDate : _g;
|
|
1234
|
+
var _b = _a.displayFormat, displayFormat = _b === void 0 ? DateFormats.fullDate : _b, _c = _a.placeholderStartDate, placeholderStartDate = _c === void 0 ? "Start date" : _c, _d = _a.placeholderEndDate, placeholderEndDate = _d === void 0 ? "End date" : _d, portalTarget = _a.portalTarget, value = _a.value, onValueChange = _a.onValueChange, _e = _a.zIndex, zIndex = _e === void 0 ? 100 : _e, width = _a.width, _f = _a.calendarTheme, calendarTheme = _f === void 0 ? defaultCalendarTheme : _f, calendarProps = _a.calendarProps, minDate = _a.minDate, _g = _a.maxDate, maxDate = _g === void 0 ? defaultMaxDate : _g, disabled = _a.disabled;
|
|
1234
1235
|
var _h = useState(function () { var _a; return (_a = (focusedInput && (value === null || value === void 0 ? void 0 : value[focusedInput]))) !== null && _a !== void 0 ? _a : new Date(); }), dateInFocus = _h[0], setDateInFocus = _h[1];
|
|
1235
1236
|
var _j = useState("calendar"), currentPanel = _j[0], setCurrentPanel = _j[1];
|
|
1236
1237
|
var _k = useDateRangeInput(value, onValueChange), hideCalendar = _k.hideCalendar, showCalendarEndDate = _k.showCalendarEndDate, showCalendarStartDate = _k.showCalendarStartDate, showingCalendar = _k.showingCalendar, focusedInput = _k.focusedInput, startDateInputRef = _k.startDateInputRef, endDateInputRef = _k.endDateInputRef, onClickDay = _k.onClickDay, startDateIsAfterEnd = _k.startDateIsAfterEnd;
|
|
1237
1238
|
var statePerMonth = useMemo(function () {
|
|
1238
1239
|
return buildDayStateForDateRange(undefined, value === null || value === void 0 ? void 0 : value.startDate, value === null || value === void 0 ? void 0 : value.endDate);
|
|
1239
1240
|
}, [value]);
|
|
1240
|
-
return (React.createElement(Popover, { arrow: false, lazy: true, visible: showingCalendar, zIndex: zIndex, placement: defaultPopoverPlacement, appendTo: portalTarget !== null && portalTarget !== void 0 ? portalTarget : "parent", onClickOutside: hideCalendar, content: React.createElement(CalendarWithMonthSwitcher, __assign({}, calendarProps, { dateInFocus: dateInFocus, setDateInFocus: setDateInFocus, statePerMonth: statePerMonth, theme: calendarTheme, onClickDay: onClickDay, currentPanel: currentPanel, setCurrentPanel: setCurrentPanel, minDate: minDate, maxDate: maxDate })) },
|
|
1241
|
+
return (React.createElement(Popover, { arrow: false, lazy: true, disabled: disabled, visible: showingCalendar, zIndex: zIndex, placement: defaultPopoverPlacement, appendTo: portalTarget !== null && portalTarget !== void 0 ? portalTarget : "parent", onClickOutside: hideCalendar, content: React.createElement(CalendarWithMonthSwitcher, __assign({}, calendarProps, { dateInFocus: dateInFocus, setDateInFocus: setDateInFocus, statePerMonth: statePerMonth, theme: calendarTheme, onClickDay: onClickDay, currentPanel: currentPanel, setCurrentPanel: setCurrentPanel, minDate: minDate, maxDate: maxDate })) },
|
|
1241
1242
|
React.createElement(Row, { alignItems: "center" },
|
|
1242
|
-
React.createElement(TextInput, { iconLeft: faCalendarAlt$1, onFocus: showCalendarStartDate, value: (value === null || value === void 0 ? void 0 : value.startDate) ? format(value.startDate, displayFormat) : "", placeholder: placeholderStartDate, width: width, inputRef: startDateInputRef, size: 9, variant: startDateIsAfterEnd ? "error" : undefined }),
|
|
1243
|
+
React.createElement(TextInput, { iconLeft: faCalendarAlt$1, onFocus: showCalendarStartDate, value: (value === null || value === void 0 ? void 0 : value.startDate) ? format(value.startDate, displayFormat) : "", placeholder: placeholderStartDate, width: width, disabled: disabled, inputRef: startDateInputRef, size: 9, variant: startDateIsAfterEnd ? "error" : undefined }),
|
|
1243
1244
|
React.createElement(Space, null),
|
|
1244
1245
|
React.createElement(Icon, { icon: faLongArrowAltRight, color: cssColor("--lhds-color-ui-500"), size: 14 }),
|
|
1245
1246
|
React.createElement(Space, null),
|
|
1246
|
-
React.createElement(TextInput, { iconLeft: faCalendarAlt$1, onFocus: showCalendarEndDate, value: (value === null || value === void 0 ? void 0 : value.endDate) ? format(value.endDate, displayFormat) : "", placeholder: placeholderEndDate, width: width, inputRef: endDateInputRef, size: 9, variant: startDateIsAfterEnd ? "error" : undefined }))));
|
|
1247
|
+
React.createElement(TextInput, { iconLeft: faCalendarAlt$1, onFocus: showCalendarEndDate, value: (value === null || value === void 0 ? void 0 : value.endDate) ? format(value.endDate, displayFormat) : "", placeholder: placeholderEndDate, width: width, disabled: disabled, inputRef: endDateInputRef, size: 9, variant: startDateIsAfterEnd ? "error" : undefined }))));
|
|
1247
1248
|
};
|
|
1248
1249
|
|
|
1249
1250
|
var DateTextInput = function (_a) {
|
|
@@ -1416,7 +1417,7 @@ var TimeTextInput = function (_a) {
|
|
|
1416
1417
|
};
|
|
1417
1418
|
|
|
1418
1419
|
var DualTextInput = function (_a) {
|
|
1419
|
-
var autoFocusLeft = _a.autoFocusLeft, autoFocusRight = _a.autoFocusRight, onEsc = _a.onEsc, onEnter = _a.onEnter, onValueChangeLeft = _a.onValueChangeLeft, onValueChangeRight = _a.onValueChangeRight, separatorIcon = _a.separatorIcon, placeholderLeft = _a.placeholderLeft, placeholderRight = _a.placeholderRight, typeLeft = _a.typeLeft, typeRight = _a.typeRight, onChangeLeft = _a.onChangeLeft, onChangeRight = _a.onChangeRight, valueLeft = _a.valueLeft, valueRight = _a.valueRight, minLeft = _a.minLeft, maxLeft = _a.maxLeft, minRight = _a.minRight, maxRight = _a.maxRight, onClickLeft = _a.onClickLeft, onClickRight = _a.onClickRight, onClickCalendar = _a.onClickCalendar, onClickArrowDown = _a.onClickArrowDown, onBlurLeft = _a.onBlurLeft, onBlurRight = _a.onBlurRight, onFocusLeft = _a.onFocusLeft, onFocusRight = _a.onFocusRight, inputRefLeft = _a.inputRefLeft, inputRefRight = _a.inputRefRight, variant = _a.variant, variantLeft = _a.variantLeft, variantRight = _a.variantRight, onBlur = _a.onBlur, showPresets = _a.showPresets, widthLeft = _a.widthLeft, widthRight = _a.widthRight;
|
|
1420
|
+
var autoFocusLeft = _a.autoFocusLeft, autoFocusRight = _a.autoFocusRight, onEsc = _a.onEsc, onEnter = _a.onEnter, onValueChangeLeft = _a.onValueChangeLeft, onValueChangeRight = _a.onValueChangeRight, separatorIcon = _a.separatorIcon, placeholderLeft = _a.placeholderLeft, placeholderRight = _a.placeholderRight, typeLeft = _a.typeLeft, typeRight = _a.typeRight, onChangeLeft = _a.onChangeLeft, onChangeRight = _a.onChangeRight, valueLeft = _a.valueLeft, valueRight = _a.valueRight, minLeft = _a.minLeft, maxLeft = _a.maxLeft, minRight = _a.minRight, maxRight = _a.maxRight, onClickLeft = _a.onClickLeft, onClickRight = _a.onClickRight, onClickCalendar = _a.onClickCalendar, onClickArrowDown = _a.onClickArrowDown, onBlurLeft = _a.onBlurLeft, onBlurRight = _a.onBlurRight, onFocusLeft = _a.onFocusLeft, onFocusRight = _a.onFocusRight, inputRefLeft = _a.inputRefLeft, inputRefRight = _a.inputRefRight, variant = _a.variant, variantLeft = _a.variantLeft, variantRight = _a.variantRight, onBlur = _a.onBlur, showPresets = _a.showPresets, widthLeft = _a.widthLeft, widthRight = _a.widthRight, disabled = _a.disabled;
|
|
1420
1421
|
var focusCounter = useRef(0);
|
|
1421
1422
|
var tryTriggerOnBlur = useMemo(function () {
|
|
1422
1423
|
return debounce(function (focusCounter) {
|
|
@@ -1454,20 +1455,20 @@ var DualTextInput = function (_a) {
|
|
|
1454
1455
|
}
|
|
1455
1456
|
}, [onBlurRight, focusCounter, tryTriggerOnBlur]);
|
|
1456
1457
|
return (React.createElement(Box, null,
|
|
1457
|
-
React.createElement(TextInputBox, { disableContentPaddingRight: true, variant: variant, contentRight: React.createElement(Row, { alignItems: "center" },
|
|
1458
|
+
React.createElement(TextInputBox, { disableContentPaddingRight: true, disabled: disabled, variant: variant, contentRight: React.createElement(Row, { alignItems: "center" },
|
|
1458
1459
|
React.createElement(Indent, { num: 0.5 },
|
|
1459
|
-
React.createElement(FlatButton, { leftIcon: faCalendarAlt, onClick: onClickCalendar, size: "small" })),
|
|
1460
|
+
React.createElement(FlatButton, { leftIcon: faCalendarAlt, onClick: onClickCalendar, disabled: disabled, size: "small" })),
|
|
1460
1461
|
showPresets ? (React.createElement(React.Fragment, null,
|
|
1461
1462
|
React.createElement(Row, { height: "22px" },
|
|
1462
1463
|
React.createElement(SeparatorLine, { vertical: true })),
|
|
1463
1464
|
React.createElement(Indent, { num: 0.5 },
|
|
1464
|
-
React.createElement(FlatButton, { leftIcon: faAngleDown, onClick: onClickArrowDown, size: "small" })))) : null) },
|
|
1465
|
+
React.createElement(FlatButton, { leftIcon: faAngleDown, onClick: onClickArrowDown, disabled: disabled, size: "small" })))) : null) },
|
|
1465
1466
|
React.createElement(Box, { width: widthLeft },
|
|
1466
|
-
React.createElement(TextInput, { onEsc: onEsc, onEnter: onEnter, onClick: onClickLeft, hideBorder: true, placeholder: placeholderLeft, value: valueLeft, onValueChange: onValueChangeLeft, onChange: onChangeLeft, onBlur: blurLeftHandler, onFocus: focusLeftHandler, inputRef: inputRefLeft, variant: variantLeft, type: typeLeft, autoFocus: autoFocusLeft, min: minLeft, max: maxLeft })),
|
|
1467
|
+
React.createElement(TextInput, { onEsc: onEsc, onEnter: onEnter, onClick: onClickLeft, disabled: disabled, hideBorder: true, placeholder: placeholderLeft, value: valueLeft, onValueChange: onValueChangeLeft, onChange: onChangeLeft, onBlur: blurLeftHandler, onFocus: focusLeftHandler, inputRef: inputRefLeft, variant: variantLeft, type: typeLeft, autoFocus: autoFocusLeft, min: minLeft, max: maxLeft })),
|
|
1467
1468
|
React.createElement(Row, { indent: 0.5, alignItems: "center", justifyContent: "center" },
|
|
1468
1469
|
React.createElement(Icon, { icon: separatorIcon, size: 12, color: cssColor("--lhds-color-ui-500") })),
|
|
1469
1470
|
React.createElement(Box, { width: widthRight },
|
|
1470
|
-
React.createElement(TextInput, { onEsc: onEsc, onEnter: onEnter, onClick: onClickRight, hideBorder: true, placeholder: placeholderRight, value: valueRight, onValueChange: onValueChangeRight, onChange: onChangeRight, onBlur: blurRightHandler, onFocus: focusRightHandler, inputRef: inputRefRight, variant: variantRight, type: typeRight, autoFocus: autoFocusRight, min: minRight, max: maxRight })))));
|
|
1471
|
+
React.createElement(TextInput, { onEsc: onEsc, onEnter: onEnter, onClick: onClickRight, disabled: disabled, hideBorder: true, placeholder: placeholderRight, value: valueRight, onValueChange: onValueChangeRight, onChange: onChangeRight, onBlur: blurRightHandler, onFocus: focusRightHandler, inputRef: inputRefRight, variant: variantRight, type: typeRight, autoFocus: autoFocusRight, min: minRight, max: maxRight })))));
|
|
1471
1472
|
};
|
|
1472
1473
|
|
|
1473
1474
|
var transformTimeStringToNumber = function (time) {
|
|
@@ -1772,7 +1773,7 @@ var useUserInputHandlers$1 = function (onChangeDate, dateInputRef, showCalendar,
|
|
|
1772
1773
|
};
|
|
1773
1774
|
|
|
1774
1775
|
var DateTimeInput = function (_a) {
|
|
1775
|
-
var value = _a.value, onValueChange = _a.onValueChange, onEnter = _a.onEnter, onEsc = _a.onEsc, onBlur = _a.onBlur, autoFocus = _a.autoFocus, minDate = _a.minDate, _b = _a.widthLeft, widthLeft = _b === void 0 ? 128 : _b, _c = _a.widthRight, widthRight = _c === void 0 ? 80 : _c, _d = _a.maxDate, maxDate = _d === void 0 ? defaultMaxDate : _d;
|
|
1776
|
+
var value = _a.value, onValueChange = _a.onValueChange, onEnter = _a.onEnter, onEsc = _a.onEsc, onBlur = _a.onBlur, autoFocus = _a.autoFocus, minDate = _a.minDate, _b = _a.widthLeft, widthLeft = _b === void 0 ? 128 : _b, _c = _a.widthRight, widthRight = _c === void 0 ? 80 : _c, _d = _a.maxDate, maxDate = _d === void 0 ? defaultMaxDate : _d, disabled = _a.disabled;
|
|
1776
1777
|
var dateInputRef = useRef(null);
|
|
1777
1778
|
var timeInputRef = useRef(null);
|
|
1778
1779
|
var states = useInputStates$1(value);
|
|
@@ -1798,13 +1799,13 @@ var DateTimeInput = function (_a) {
|
|
|
1798
1799
|
var delayedIsCalendarVisible = useDelayedFalse(isCalendarVisible, 300);
|
|
1799
1800
|
var delayedIsTimePickerVisible = useDelayedFalse(isTimePickerVisible, 300);
|
|
1800
1801
|
return (React.createElement(Box, { onKeyDown: onKeyDownHandler },
|
|
1801
|
-
React.createElement(Popover, { arrow: false, lazy: true, placement: defaultPopoverPlacement, visible: isCalendarVisible || isTimePickerVisible, onClickOutside: hideAll, content: (delayedIsCalendarVisible || delayedIsTimePickerVisible) && (React.createElement(Column, null, delayedIsCalendarVisible ? (React.createElement(CalendarWithMonthSwitcher, { statePerMonth: statePerMonth, onClickDay: onClickDay, dateInFocus: dateInFocus, setDateInFocus: setDateInFocus, currentPanel: currentPanel, setCurrentPanel: setCurrentPanel, minDate: minDate, maxDate: maxDate })) : delayedIsTimePickerVisible ? (React.createElement(Column, null,
|
|
1802
|
+
React.createElement(Popover, { arrow: false, lazy: true, disabled: disabled, placement: defaultPopoverPlacement, visible: isCalendarVisible || isTimePickerVisible, onClickOutside: hideAll, content: (delayedIsCalendarVisible || delayedIsTimePickerVisible) && (React.createElement(Column, null, delayedIsCalendarVisible ? (React.createElement(CalendarWithMonthSwitcher, { statePerMonth: statePerMonth, onClickDay: onClickDay, dateInFocus: dateInFocus, setDateInFocus: setDateInFocus, currentPanel: currentPanel, setCurrentPanel: setCurrentPanel, minDate: minDate, maxDate: maxDate })) : delayedIsTimePickerVisible ? (React.createElement(Column, null,
|
|
1802
1803
|
React.createElement(Column, { overflow: "hidden", height: "250px" },
|
|
1803
1804
|
React.createElement(TimePicker, { value: timeValue !== null && timeValue !== void 0 ? timeValue : "", onValueChange: onChangeTime })),
|
|
1804
1805
|
React.createElement(Space, null),
|
|
1805
1806
|
React.createElement(Row, { justifyContent: "flex-end" },
|
|
1806
1807
|
React.createElement(PrimaryButton, { label: "Done", onClick: hideTimePicker })))) : null)) },
|
|
1807
|
-
React.createElement(DualTextInput, { autoFocusLeft: autoFocus, onEsc: onEsc, onEnter: onEnter, onBlur: onBlur, separatorIcon: faClock$1, typeLeft: "date", typeRight: "time", placeholderLeft: "yyyy-mm-dd", placeholderRight: "hh:mm", onChangeLeft: inputLeftChangeHandler, onChangeRight: inputRightChangeHandler, onClickArrowDown: onClickArrowButton, onClickCalendar: onClickCalendarButton, onFocusLeft: onFocusLeft, onFocusRight: onFocusRight, onClickLeft: onFocusLeft, onClickRight: onFocusRight, inputRefLeft: dateInputRef, inputRefRight: timeInputRef, valueRight: timeValue !== null && timeValue !== void 0 ? timeValue : "", widthLeft: widthLeft, widthRight: widthRight, minLeft: minDate, maxLeft: maxDate }))));
|
|
1808
|
+
React.createElement(DualTextInput, { autoFocusLeft: autoFocus, onEsc: onEsc, onEnter: onEnter, onBlur: onBlur, disabled: disabled, separatorIcon: faClock$1, typeLeft: "date", typeRight: "time", placeholderLeft: "yyyy-mm-dd", placeholderRight: "hh:mm", onChangeLeft: inputLeftChangeHandler, onChangeRight: inputRightChangeHandler, onClickArrowDown: onClickArrowButton, onClickCalendar: onClickCalendarButton, onFocusLeft: onFocusLeft, onFocusRight: onFocusRight, onClickLeft: onFocusLeft, onClickRight: onFocusRight, inputRefLeft: dateInputRef, inputRefRight: timeInputRef, valueRight: timeValue !== null && timeValue !== void 0 ? timeValue : "", widthLeft: widthLeft, widthRight: widthRight, minLeft: minDate, maxLeft: maxDate }))));
|
|
1808
1809
|
};
|
|
1809
1810
|
|
|
1810
1811
|
var useDateRangeEffects = function (startDate, endDate, setDateInFocus, startDateInputRef, endDateInputRef) {
|
|
@@ -2055,7 +2056,7 @@ var useUserInputHandlers = function (startDate, endDate, onValueChange, startDat
|
|
|
2055
2056
|
};
|
|
2056
2057
|
|
|
2057
2058
|
var DateRangeDualTextInput = function (_a) {
|
|
2058
|
-
var value = _a.value, onValueChange = _a.onValueChange, autoFocus = _a.autoFocus, onBlur = _a.onBlur, onEnter = _a.onEnter, onEsc = _a.onEsc, minDate = _a.minDate, _b = _a.maxDate, maxDate = _b === void 0 ? defaultMaxDate : _b, calendarProps = _a.calendarProps, _c = _a.widthLeft, widthLeft = _c === void 0 ? 128 : _c, _d = _a.widthRight, widthRight = _d === void 0 ? 128 : _d;
|
|
2059
|
+
var value = _a.value, onValueChange = _a.onValueChange, autoFocus = _a.autoFocus, onBlur = _a.onBlur, onEnter = _a.onEnter, onEsc = _a.onEsc, minDate = _a.minDate, _b = _a.maxDate, maxDate = _b === void 0 ? defaultMaxDate : _b, calendarProps = _a.calendarProps, _c = _a.widthLeft, widthLeft = _c === void 0 ? 128 : _c, _d = _a.widthRight, widthRight = _d === void 0 ? 128 : _d, disabled = _a.disabled;
|
|
2059
2060
|
var _e = value || {}, startDate = _e.startDate, endDate = _e.endDate;
|
|
2060
2061
|
var startDateInputRef = useRef(null);
|
|
2061
2062
|
var endDateInputRef = useRef(null);
|
|
@@ -2070,8 +2071,8 @@ var DateRangeDualTextInput = function (_a) {
|
|
|
2070
2071
|
}, [calendarProps === null || calendarProps === void 0 ? void 0 : calendarProps.statePerMonth, startDate, endDate, dateInFocus]);
|
|
2071
2072
|
var delayedIsCalendarVisible = useDelayedFalse(isCalendarVisible, 300);
|
|
2072
2073
|
return (React.createElement(Box, { onKeyDown: onKeyDownHandler },
|
|
2073
|
-
React.createElement(Popover, { arrow: false, lazy: true, placement: defaultPopoverPlacement, onClickOutside: hideCalendar, visible: isCalendarVisible, content: delayedIsCalendarVisible && (React.createElement(CalendarWithMonthSwitcher, __assign({ onClickDay: onClickDay, dateInFocus: dateInFocus, setDateInFocus: setDateInFocus, currentPanel: currentPanel, setCurrentPanel: setCurrentPanel, minDate: minDate, maxDate: maxDate }, calendarProps, { statePerMonth: statePerMonth }))) },
|
|
2074
|
-
React.createElement(DualTextInput, { autoFocusLeft: autoFocus, onEsc: onEsc, onEnter: onEnter, onBlur: onBlur, separatorIcon: stenaArrowRight, typeLeft: "date", typeRight: "date", placeholderLeft: "Start date", placeholderRight: "End date", onChangeLeft: inputLeftChangeHandler, onChangeRight: inputRightChangeHandler, onClickArrowDown: onClickArrowButton, onClickCalendar: onClickCalendarButton, onFocusLeft: onFocusLeft, onFocusRight: onFocusRight, onClickLeft: onFocusLeft, onClickRight: onFocusRight, inputRefLeft: startDateInputRef, inputRefRight: endDateInputRef, variant: startDateIsAfterEnd ? "error" : undefined, widthLeft: widthLeft, widthRight: widthRight, minLeft: minDate, maxLeft: maxDate, minRight: minDate, maxRight: maxDate }))));
|
|
2074
|
+
React.createElement(Popover, { arrow: false, lazy: true, disabled: disabled, placement: defaultPopoverPlacement, onClickOutside: hideCalendar, visible: isCalendarVisible, content: delayedIsCalendarVisible && (React.createElement(CalendarWithMonthSwitcher, __assign({ onClickDay: onClickDay, dateInFocus: dateInFocus, setDateInFocus: setDateInFocus, currentPanel: currentPanel, setCurrentPanel: setCurrentPanel, minDate: minDate, maxDate: maxDate }, calendarProps, { statePerMonth: statePerMonth }))) },
|
|
2075
|
+
React.createElement(DualTextInput, { autoFocusLeft: autoFocus, onEsc: onEsc, onEnter: onEnter, onBlur: onBlur, disabled: disabled, separatorIcon: stenaArrowRight, typeLeft: "date", typeRight: "date", placeholderLeft: "Start date", placeholderRight: "End date", onChangeLeft: inputLeftChangeHandler, onChangeRight: inputRightChangeHandler, onClickArrowDown: onClickArrowButton, onClickCalendar: onClickCalendarButton, onFocusLeft: onFocusLeft, onFocusRight: onFocusRight, onClickLeft: onFocusLeft, onClickRight: onFocusRight, inputRefLeft: startDateInputRef, inputRefRight: endDateInputRef, variant: startDateIsAfterEnd ? "error" : undefined, widthLeft: widthLeft, widthRight: widthRight, minLeft: minDate, maxLeft: maxDate, minRight: minDate, maxRight: maxDate }))));
|
|
2075
2076
|
};
|
|
2076
2077
|
|
|
2077
2078
|
export { Calendar, CalendarDay, DateInput, DateRangeCalendar, DateRangeDualTextInput, DateRangeExclusionCalendar, DateRangeInput, DateTextInput, DateTimeInput, Month, MonthPicker, MultiDateCalendar, PresetPicker, SingleDateCalendar, SingleWeekCalendar, TimeTextInput, WeekDay, WeekDayCell, WeekNumberCell, YearPicker, addDayStateHighlights, addDayStateHighlightsOnSingleDay, addWeekRangeHighlights, addWeekStateHighlights, buildDayStateForDateRange, buildDayStateForRange, buildDayStateForSingleMonth, calculateOverflowingMonth, createDay, dateRangeToStrings, dayHasHighlight, dayHighlightSelect, defaultCalendarTheme, defaultTextPropsProvider, defaultWrapperStyleProvider, extranetCalendarTheme, getDaysForWeekForDate, getMonthInYear, getMonthsInYear, getStartDateOfISOWeek, getWeekForDate, getWeeksForMonth, isDateRangeInvalid, setDayStateValue, setDayStateValueFunction, stringsToDateRange, toggleDateStringsIfEndIsEarlierThanStart, toggleDatesIfEndIsEarlierThanStart, useDateRangeCalendarState, useDateRangeExclusionSelection, useDateRangeSelection, useMultiDateSelection, useSingleDateSelection, useSingleWeekSelection };
|