@stenajs-webui/calendar 15.5.10 → 16.0.0

package/CHANGELOG.md

@@ -1,3 +1,28 @@
+# v16.0.0 (Wed Jun 15 2022)
+
+#### 💥 Breaking Change
+
+- Add variant to Select and date inputs [#463](https://github.com/StenaIT/stenajs-webui/pull/463) ([@nikteg](https://github.com/nikteg) [@lindskogen](https://github.com/lindskogen))
+
+#### Authors: 2
+
+- Johan Lindskogen ([@lindskogen](https://github.com/lindskogen))
+- Niklas ([@nikteg](https://github.com/nikteg))
+
+---
+
+# v15.7.0 (Tue Jun 14 2022)
+
+#### 🚀 Enhancement
+
+- 94903 add disabled state to date components [#464](https://github.com/StenaIT/stenajs-webui/pull/464) (emil.heldring@stenaline.com)
+
+#### Authors: 1
+
+- Emil Heldring ([@emilheldring95](https://github.com/emilheldring95))
+
+---
+
 # v15.3.1 (Wed Mar 30 2022)
 
 #### 🐛 Bug Fix

package/dist/components/input-types/date-input/DateInput.d.ts

@@ -44,5 +44,9 @@ export interface DateInputProps<T = {}> extends OptionalMinMaxDatesAsString {
     calendarTheme?: CalendarTheme;
     /** Props to be passed to Calendar, see SingleDateCalendar. */
     calendarProps?: DateTextInputCalendarProps<T>;
+    /**
+     * Disables the TextInput, Calendar and Popover.
+     */
+    disabled?: boolean;
 }
 export declare const DateInput: React.FC<DateInputProps>;

package/dist/components/input-types/date-input/DateInput.stories.d.ts

@@ -8,6 +8,7 @@ declare const _default: {
 export default _default;
 export declare const Standard: () => JSX.Element;
 export declare const Centered: () => JSX.Element;
+export declare const Disabled: () => JSX.Element;
 export declare const WithDisabledDateTomorrow: () => JSX.Element;
 export declare const Empty: () => JSX.Element;
 export declare const UsingPortal: () => JSX.Element;

package/dist/components/input-types/date-range-dual-text-input/DateRangeDualTextInput.d.ts

@@ -4,11 +4,12 @@ import { DualTextInputProps } from "../../../features/dual-text-input/DualTextIn
 import { DateRangeInputCalendarProps } from "../../calendar-types/date-range-calendar/DateRangeCalendar";
 import { OptionalMinMaxDatesAsString } from "../../../types/CalendarTypes";
 import { DateRange } from "../../../types/DateRange";
-export interface DateRangeDualTextInputProps<TData = unknown> extends ValueAndOnValueChangeProps<DateRange>, OptionalMinMaxDatesAsString, Pick<DualTextInputProps, "widthLeft" | "widthRight"> {
+export interface DateRangeDualTextInputProps<TData = unknown> extends ValueAndOnValueChangeProps<DateRange>, OptionalMinMaxDatesAsString, Pick<DualTextInputProps, "widthLeft" | "widthRight" | "variant"> {
     onEsc?: () => void;
     onEnter?: () => void;
     onBlur?: () => void;
     autoFocus?: boolean;
     calendarProps?: DateRangeInputCalendarProps<TData>;
+    disabled?: boolean;
 }
-export declare const DateRangeDualTextInput: <TData extends {}>({ value, onValueChange, autoFocus, onBlur, onEnter, onEsc, minDate, maxDate, calendarProps, widthLeft, widthRight, }: DateRangeDualTextInputProps<TData>) => JSX.Element;
+export declare const DateRangeDualTextInput: <TData extends {}>({ value, onValueChange, autoFocus, onBlur, onEnter, onEsc, minDate, maxDate, calendarProps, widthLeft, widthRight, variant, disabled, }: DateRangeDualTextInputProps<TData>) => JSX.Element;

package/dist/components/input-types/date-range-dual-text-input/DateRangeDualTextInput.stories.d.ts

@@ -2,12 +2,14 @@
 import { Story } from "@storybook/react";
 declare const _default: {
     title: string;
-    component: <TData extends {}>({ value, onValueChange, autoFocus, onBlur, onEnter, onEsc, minDate, maxDate, calendarProps, widthLeft, widthRight, }: import("./DateRangeDualTextInput").DateRangeDualTextInputProps<TData>) => JSX.Element;
+    component: <TData extends {}>({ value, onValueChange, autoFocus, onBlur, onEnter, onEsc, minDate, maxDate, calendarProps, widthLeft, widthRight, variant, disabled, }: import("./DateRangeDualTextInput").DateRangeDualTextInputProps<TData>) => JSX.Element;
     decorators: ((TheStory: Story) => JSX.Element)[];
 };
 export default _default;
 export declare const Standard: () => JSX.Element;
+export declare const WithVariant: () => JSX.Element;
 export declare const Centered: () => JSX.Element;
+export declare const Disabled: () => JSX.Element;
 export declare const StartSelected: () => JSX.Element;
 export declare const EndSelected: () => JSX.Element;
 export declare const RangeSelected: () => JSX.Element;

package/dist/components/input-types/date-range-input/DateRangeInput.d.ts

@@ -40,8 +40,12 @@ export interface DateRangeInputProps<T> extends OptionalMinMaxDatesAsString, Val
     calendarTheme?: CalendarTheme;
     /** Props to be passed to DateRangeCalendar, see DateRangeCalendar. */
     calendarProps?: DateRangeInputCalendarProps<T>;
+    /**
+     * Disables the Popover and both TextInputs.
+     */
+    disabled?: boolean;
 }
 /**
  * @deprecated Please use DateRangeDualTextInput instead.
  */
-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>>;
+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>>;

package/dist/components/input-types/date-range-input/DateRangeInput.stories.d.ts

@@ -2,12 +2,13 @@ import { Story } from "@storybook/react";
 import * as React from "react";
 declare const _default: {
     title: string;
-    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>>;
+    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>>;
     decorators: ((TheStory: Story) => JSX.Element)[];
 };
 export default _default;
 export declare const Standard: () => JSX.Element;
 export declare const Centered: () => JSX.Element;
+export declare const Disabled: () => JSX.Element;
 export declare const Empty: () => JSX.Element;
 export declare const UsingPortal: () => JSX.Element;
 export declare const WithPreselectedValue: () => JSX.Element;

package/dist/components/input-types/date-text-input/DateTextInput.stories.d.ts

@@ -8,6 +8,7 @@ declare const _default: {
 export default _default;
 export declare const Standard: () => JSX.Element;
 export declare const Centered: () => JSX.Element;
+export declare const WithVariant: () => JSX.Element;
 export declare const EnglishDateFormat: () => JSX.Element;
 export declare const DutchDateFormat: () => JSX.Element;
 export declare const Disabled: () => JSX.Element;

package/dist/components/input-types/date-time-input/DateTimeInput.d.ts

@@ -2,10 +2,11 @@ import { ValueAndOnValueChangeProps } from "@stenajs-webui/forms";
 import * as React from "react";
 import { DualTextInputProps } from "../../../features/dual-text-input/DualTextInput";
 import { OptionalMinMaxDatesAsString } from "../../../types/CalendarTypes";
-export interface DateTimeInputProps extends ValueAndOnValueChangeProps<Date | null>, OptionalMinMaxDatesAsString, Pick<DualTextInputProps, "widthLeft" | "widthRight"> {
+export interface DateTimeInputProps extends ValueAndOnValueChangeProps<Date | null>, OptionalMinMaxDatesAsString, Pick<DualTextInputProps, "widthLeft" | "widthRight" | "variant"> {
     onEsc?: () => void;
     onEnter?: () => void;
     onBlur?: () => void;
     autoFocus?: boolean;
+    disabled?: boolean;
 }
 export declare const DateTimeInput: React.FC<DateTimeInputProps>;

package/dist/components/input-types/date-time-input/DateTimeInput.stories.d.ts

@@ -7,6 +7,8 @@ declare const _default: {
 };
 export default _default;
 export declare const Standard: () => JSX.Element;
+export declare const WithVariant: () => JSX.Element;
 export declare const Centered: () => JSX.Element;
+export declare const Disabled: () => JSX.Element;
 export declare const PreselectedValue: () => JSX.Element;
 export declare const MinMaxDates: () => JSX.Element;

package/dist/features/dual-text-input/DualTextInput.d.ts

@@ -39,5 +39,6 @@ export interface DualTextInputProps {
     showPresets?: false;
     autoFocusLeft?: boolean;
     autoFocusRight?: boolean;
+    disabled?: boolean;
 }
 export declare const DualTextInput: React.FC<DualTextInputProps>;

package/dist/index.es.js

@@ -1153,12 +1153,13 @@ var useDateInput = function (onChange, onClose, openOnMount) {
 var defaultMaxDate = "2999-12-31";
 
 var DateInput = function (_a) {
-    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;
+    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;
     var _g = useDateInput(onChange, onClose, openOnMount), hideCalendar = _g.hideCalendar, showingCalendar = _g.showingCalendar, onSelectDate = _g.onSelectDate, showCalendar = _g.showCalendar;
     var _h = useCalendarPopoverUpdater(), tippyRef = _h.tippyRef, onChangePanel = _h.onChangePanel;
     return (React.createElement(Box, { width: width },
-        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 })) },
-            React.createElement(TextInput, { type: "date", iconRight: faCalendarAlt, onFocus: showCalendar, onClickRight: showCalendar, value: value ? format(value, displayFormat) : "", placeholder: placeholder, size: 9, autoFocus: openOnMount, variant: variant, min: minDate, max: maxDate }))));
+        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 })) },
+            React.createElement(TextInput, { type: "date", contentRight: React.createElement(Row, { alignItems: "center" },
+                    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 }))));
 };
 
 var useDateRangeInput = function (value, onValueChange) {
@@ -1230,24 +1231,24 @@ var useDateRangeInput = function (value, onValueChange) {
  * @deprecated Please use DateRangeDualTextInput instead.
  */
 var DateRangeInput = function (_a) {
-    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;
+    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;
     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];
     var _j = useState("calendar"), currentPanel = _j[0], setCurrentPanel = _j[1];
     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;
     var statePerMonth = useMemo(function () {
         return buildDayStateForDateRange(undefined, value === null || value === void 0 ? void 0 : value.startDate, value === null || value === void 0 ? void 0 : value.endDate);
     }, [value]);
-    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 })) },
+    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 })) },
         React.createElement(Row, { alignItems: "center" },
-            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 }),
+            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 }),
             React.createElement(Space, null),
             React.createElement(Icon, { icon: faLongArrowAltRight, color: cssColor("--lhds-color-ui-500"), size: 14 }),
             React.createElement(Space, null),
-            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 }))));
+            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 }))));
 };
 
 var DateTextInput = function (_a) {
-    var calendarProps = _a.calendarProps, _b = _a.closeOnCalendarSelectDate, closeOnCalendarSelectDate = _b === void 0 ? true : _b, _c = _a.dateFormat, dateFormat = _c === void 0 ? DateFormats.fullDate : _c; _a.disableCalender; var onValueChange = _a.onValueChange, _e = _a.placeholder, placeholder = _e === void 0 ? "yyyy-mm-dd" : _e, portalTarget = _a.portalTarget, value = _a.value, _f = _a.width, width = _f === void 0 ? "130px" : _f, _g = _a.zIndex, zIndex = _g === void 0 ? 100 : _g, _h = _a.calendarTheme, calendarTheme = _h === void 0 ? defaultCalendarTheme : _h, _j = _a.hideCalenderIcon, hideCalenderIcon = _j === void 0 ? false : _j, minDate = _a.minDate, _k = _a.maxDate, maxDate = _k === void 0 ? defaultMaxDate : _k, props = __rest(_a, ["calendarProps", "closeOnCalendarSelectDate", "dateFormat", "disableCalender", "onValueChange", "placeholder", "portalTarget", "value", "width", "zIndex", "calendarTheme", "hideCalenderIcon", "minDate", "maxDate"]);
+    var calendarProps = _a.calendarProps, _b = _a.closeOnCalendarSelectDate, closeOnCalendarSelectDate = _b === void 0 ? true : _b, _c = _a.dateFormat, dateFormat = _c === void 0 ? DateFormats.fullDate : _c; _a.disableCalender; var onValueChange = _a.onValueChange, _e = _a.placeholder, placeholder = _e === void 0 ? "yyyy-mm-dd" : _e, portalTarget = _a.portalTarget, value = _a.value, _f = _a.width, width = _f === void 0 ? "130px" : _f, _g = _a.zIndex, zIndex = _g === void 0 ? 100 : _g, _h = _a.calendarTheme, calendarTheme = _h === void 0 ? defaultCalendarTheme : _h, _j = _a.hideCalenderIcon, hideCalenderIcon = _j === void 0 ? false : _j, minDate = _a.minDate, _k = _a.maxDate, maxDate = _k === void 0 ? defaultMaxDate : _k, variant = _a.variant, props = __rest(_a, ["calendarProps", "closeOnCalendarSelectDate", "dateFormat", "disableCalender", "onValueChange", "placeholder", "portalTarget", "value", "width", "zIndex", "calendarTheme", "hideCalenderIcon", "minDate", "maxDate", "variant"]);
     var _l = useState(false), open = _l[0], setOpen = _l[1];
     var _m = useCalendarPopoverUpdater(), tippyRef = _m.tippyRef, onChangePanel = _m.onChangePanel;
     var toggleCalendar = useCallback(function () {
@@ -1277,7 +1278,7 @@ var DateTextInput = function (_a) {
         React.createElement(Popover, { arrow: false, lazy: true, visible: open, zIndex: zIndex, appendTo: portalTarget !== null && portalTarget !== void 0 ? portalTarget : "parent", placement: defaultPopoverPlacement, onClickOutside: hideCalendar, tippyRef: tippyRef, content: React.createElement(SingleDateCalendar, __assign({}, calendarProps, { onChange: onCalendarSelectDate, onChangePanel: onChangePanel, value: value && dateIsValid
                     ? parse(value, dateFormat, new Date())
                     : undefined, minDate: minDate, maxDate: maxDate, theme: calendarTheme })) },
-            React.createElement(TextInput, __assign({}, props, { variant: invalid ? "error" : "standard", disableContentPaddingRight: true, contentRight: !hideCalenderIcon ? (React.createElement(Row, { alignItems: "center", indent: 0.5 },
+            React.createElement(TextInput, __assign({}, props, { variant: invalid ? "error" : variant, disableContentPaddingRight: true, contentRight: !hideCalenderIcon ? (React.createElement(Row, { alignItems: "center", indent: 0.5 },
                     React.createElement(FlatButton, { size: "small", disabled: props.disabled, leftIcon: faCalendarAlt$1, onClick: toggleCalendar }))) : undefined, onValueChange: onValueChangeHandler, placeholder: placeholder, value: value || "", min: minDate, max: maxDate, size: 10 })))));
 };
 
@@ -1416,7 +1417,7 @@ var TimeTextInput = function (_a) {
 };
 
 var DualTextInput = function (_a) {
-    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;
+    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;
     var focusCounter = useRef(0);
     var tryTriggerOnBlur = useMemo(function () {
         return debounce(function (focusCounter) {
@@ -1454,20 +1455,20 @@ var DualTextInput = function (_a) {
         }
     }, [onBlurRight, focusCounter, tryTriggerOnBlur]);
     return (React.createElement(Box, null,
-        React.createElement(TextInputBox, { disableContentPaddingRight: true, variant: variant, contentRight: React.createElement(Row, { alignItems: "center" },
+        React.createElement(TextInputBox, { disableContentPaddingRight: true, disabled: disabled, variant: variant, contentRight: React.createElement(Row, { alignItems: "center" },
                 React.createElement(Indent, { num: 0.5 },
-                    React.createElement(FlatButton, { leftIcon: faCalendarAlt, onClick: onClickCalendar, size: "small" })),
+                    React.createElement(FlatButton, { leftIcon: faCalendarAlt, onClick: onClickCalendar, disabled: disabled, size: "small" })),
                 showPresets ? (React.createElement(React.Fragment, null,
                     React.createElement(Row, { height: "22px" },
                         React.createElement(SeparatorLine, { vertical: true })),
                     React.createElement(Indent, { num: 0.5 },
-                        React.createElement(FlatButton, { leftIcon: faAngleDown, onClick: onClickArrowDown, size: "small" })))) : null) },
+                        React.createElement(FlatButton, { leftIcon: faAngleDown, onClick: onClickArrowDown, disabled: disabled, size: "small" })))) : null) },
             React.createElement(Box, { width: widthLeft },
-                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 })),
+                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 })),
             React.createElement(Row, { indent: 0.5, alignItems: "center", justifyContent: "center" },
                 React.createElement(Icon, { icon: separatorIcon, size: 12, color: cssColor("--lhds-color-ui-500") })),
             React.createElement(Box, { width: widthRight },
-                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 })))));
+                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 })))));
 };
 
 var transformTimeStringToNumber = function (time) {
@@ -1772,7 +1773,7 @@ var useUserInputHandlers$1 = function (onChangeDate, dateInputRef, showCalendar,
 };
 
 var DateTimeInput = function (_a) {
-    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;
+    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, variant = _a.variant, disabled = _a.disabled;
     var dateInputRef = useRef(null);
     var timeInputRef = useRef(null);
     var states = useInputStates$1(value);
@@ -1798,13 +1799,13 @@ var DateTimeInput = function (_a) {
     var delayedIsCalendarVisible = useDelayedFalse(isCalendarVisible, 300);
     var delayedIsTimePickerVisible = useDelayedFalse(isTimePickerVisible, 300);
     return (React.createElement(Box, { onKeyDown: onKeyDownHandler },
-        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,
+        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,
                 React.createElement(Column, { overflow: "hidden", height: "250px" },
                     React.createElement(TimePicker, { value: timeValue !== null && timeValue !== void 0 ? timeValue : "", onValueChange: onChangeTime })),
                 React.createElement(Space, null),
                 React.createElement(Row, { justifyContent: "flex-end" },
                     React.createElement(PrimaryButton, { label: "Done", onClick: hideTimePicker })))) : null)) },
-            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 }))));
+            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, variant: variant }))));
 };
 
 var useDateRangeEffects = function (startDate, endDate, setDateInFocus, startDateInputRef, endDateInputRef) {
@@ -2055,7 +2056,7 @@ var useUserInputHandlers = function (startDate, endDate, onValueChange, startDat
 };
 
 var DateRangeDualTextInput = function (_a) {
-    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;
+    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, variant = _a.variant, disabled = _a.disabled;
     var _e = value || {}, startDate = _e.startDate, endDate = _e.endDate;
     var startDateInputRef = useRef(null);
     var endDateInputRef = useRef(null);
@@ -2070,8 +2071,8 @@ var DateRangeDualTextInput = function (_a) {
     }, [calendarProps === null || calendarProps === void 0 ? void 0 : calendarProps.statePerMonth, startDate, endDate, dateInFocus]);
     var delayedIsCalendarVisible = useDelayedFalse(isCalendarVisible, 300);
     return (React.createElement(Box, { onKeyDown: onKeyDownHandler },
-        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 }))) },
-            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 }))));
+        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 }))) },
+            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" : variant, widthLeft: widthLeft, widthRight: widthRight, minLeft: minDate, maxLeft: maxDate, minRight: minDate, maxRight: maxDate }))));
 };
 
 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 };