@mezzanine-ui/react 0.14.1 → 0.14.3
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/Calendar/Calendar.d.ts +10 -0
- package/Calendar/Calendar.js +6 -6
- package/Calendar/CalendarDays.d.ts +3 -1
- package/Calendar/CalendarDays.js +2 -2
- package/Calendar/CalendarMonths.d.ts +2 -1
- package/Calendar/CalendarMonths.js +3 -2
- package/Calendar/CalendarWeeks.d.ts +3 -1
- package/Calendar/CalendarWeeks.js +2 -2
- package/DatePicker/DatePicker.js +2 -2
- package/DatePicker/DatePickerCalendar.d.ts +2 -2
- package/DatePicker/DatePickerCalendar.js +2 -2
- package/DateRangePicker/DateRangePicker.d.ts +1 -1
- package/DateRangePicker/DateRangePicker.js +2 -2
- package/DateRangePicker/DateRangePickerCalendar.d.ts +1 -1
- package/DateRangePicker/DateRangePickerCalendar.js +3 -3
- package/DateTimePicker/DateTimePicker.js +2 -2
- package/DateTimePicker/DateTimePickerPanel.d.ts +2 -2
- package/DateTimePicker/DateTimePickerPanel.js +2 -2
- package/Table/TableBodyRow.js +1 -1
- package/Tooltip/Tooltip.d.ts +3 -3
- package/package.json +4 -4
package/Calendar/Calendar.d.ts
CHANGED
|
@@ -23,6 +23,16 @@ export interface CalendarProps extends Omit<NativeElementPropsWithoutKeyAndRef<'
|
|
|
23
23
|
* Other props you may provide to `CalendarYears`
|
|
24
24
|
*/
|
|
25
25
|
calendarYearsProps?: Omit<CalendarYearsProps, 'onClick' | 'referenceDate' | 'value' | 'isYearDisabled' | 'isYearInRange' | 'onYearHover'>;
|
|
26
|
+
/**
|
|
27
|
+
* Disabled `Month` calendar button click
|
|
28
|
+
* @default false
|
|
29
|
+
*/
|
|
30
|
+
disabledMonthSwitch?: boolean;
|
|
31
|
+
/**
|
|
32
|
+
* Disabled `Year` calendar button click
|
|
33
|
+
* @default false
|
|
34
|
+
*/
|
|
35
|
+
disabledYearSwitch?: boolean;
|
|
26
36
|
/**
|
|
27
37
|
* Use this prop to switch calendars.
|
|
28
38
|
* @default 'day'
|
package/Calendar/Calendar.js
CHANGED
|
@@ -17,18 +17,18 @@ import cx from 'clsx';
|
|
|
17
17
|
*/
|
|
18
18
|
const Calendar = forwardRef(function Calendar(props, ref) {
|
|
19
19
|
const { displayMonthLocale: displayMonthLocaleFromConfig, getMonth, getMonthShortName, getYear, } = useCalendarContext();
|
|
20
|
-
const { calendarDaysProps, calendarMonthsProps, calendarWeeksProps, calendarYearsProps, className, disableOnNext, disableOnPrev, displayMonthLocale = displayMonthLocaleFromConfig, displayWeekDayLocale, isDateDisabled, isDateInRange, isMonthDisabled, isMonthInRange, isWeekDisabled, isWeekInRange, isYearDisabled, isYearInRange, mode = 'day', onChange, onDateHover, onMonthControlClick, onMonthHover, onNext, onPrev, onWeekHover, onYearControlClick, onYearHover, referenceDate, value: valueProp, ...restCalendarProps } = props;
|
|
20
|
+
const { calendarDaysProps, calendarMonthsProps, calendarWeeksProps, calendarYearsProps, className, disabledMonthSwitch, disableOnNext, disableOnPrev, disabledYearSwitch, displayMonthLocale = displayMonthLocaleFromConfig, displayWeekDayLocale, isDateDisabled, isDateInRange, isMonthDisabled, isMonthInRange, isWeekDisabled, isWeekInRange, isYearDisabled, isYearInRange, mode = 'day', onChange, onDateHover, onMonthControlClick, onMonthHover, onNext, onPrev, onWeekHover, onYearControlClick, onYearHover, referenceDate, value: valueProp, ...restCalendarProps } = props;
|
|
21
21
|
const value = valueProp ? castArray(valueProp) : undefined;
|
|
22
22
|
/** Compute which calendar to use */
|
|
23
23
|
let displayCalendar;
|
|
24
24
|
if (mode === 'day') {
|
|
25
|
-
displayCalendar = (jsx(CalendarDays, { ...calendarDaysProps, isDateDisabled: isDateDisabled, isDateInRange: isDateInRange, onClick: onChange, onDateHover: onDateHover, referenceDate: referenceDate, displayWeekDayLocale: displayWeekDayLocale, value: value }));
|
|
25
|
+
displayCalendar = (jsx(CalendarDays, { ...calendarDaysProps, isYearDisabled: isYearDisabled, isMonthDisabled: isMonthDisabled, isDateDisabled: isDateDisabled, isDateInRange: isDateInRange, onClick: onChange, onDateHover: onDateHover, referenceDate: referenceDate, displayWeekDayLocale: displayWeekDayLocale, value: value }));
|
|
26
26
|
}
|
|
27
27
|
else if (mode === 'week') {
|
|
28
|
-
displayCalendar = (jsx(CalendarWeeks, { ...calendarWeeksProps, isWeekDisabled: isWeekDisabled, isWeekInRange: isWeekInRange, onClick: onChange, onWeekHover: onWeekHover, referenceDate: referenceDate, displayWeekDayLocale: displayWeekDayLocale, value: value }));
|
|
28
|
+
displayCalendar = (jsx(CalendarWeeks, { ...calendarWeeksProps, isYearDisabled: isYearDisabled, isMonthDisabled: isMonthDisabled, isWeekDisabled: isWeekDisabled, isWeekInRange: isWeekInRange, onClick: onChange, onWeekHover: onWeekHover, referenceDate: referenceDate, displayWeekDayLocale: displayWeekDayLocale, value: value }));
|
|
29
29
|
}
|
|
30
30
|
else if (mode === 'month') {
|
|
31
|
-
displayCalendar = (jsx(CalendarMonths, { ...calendarMonthsProps, isMonthDisabled: isMonthDisabled, isMonthInRange: isMonthInRange, onClick: onChange, onMonthHover: onMonthHover, referenceDate: referenceDate, value: value }));
|
|
31
|
+
displayCalendar = (jsx(CalendarMonths, { ...calendarMonthsProps, isYearDisabled: isYearDisabled, isMonthDisabled: isMonthDisabled, isMonthInRange: isMonthInRange, onClick: onChange, onMonthHover: onMonthHover, referenceDate: referenceDate, value: value }));
|
|
32
32
|
}
|
|
33
33
|
else if (mode === 'year') {
|
|
34
34
|
displayCalendar = (jsx(CalendarYears, { ...calendarYearsProps, isYearDisabled: isYearDisabled, isYearInRange: isYearInRange, onClick: onChange, onYearHover: onYearHover, referenceDate: referenceDate, value: value }));
|
|
@@ -38,10 +38,10 @@ const Calendar = forwardRef(function Calendar(props, ref) {
|
|
|
38
38
|
const displayYearRange = `${start} - ${end}`;
|
|
39
39
|
let controls;
|
|
40
40
|
if (mode === 'day' || mode === 'week') {
|
|
41
|
-
controls = (jsxs(Fragment, { children: [jsx("button", { type: "button", className: cx(calendarClasses.button, calendarClasses.controlsButton), onClick: onMonthControlClick, children: getMonthShortName(getMonth(referenceDate), displayMonthLocale) }), jsx("button", { type: "button", className: cx(calendarClasses.button, calendarClasses.controlsButton), onClick: onYearControlClick, children: getYear(referenceDate) })] }));
|
|
41
|
+
controls = (jsxs(Fragment, { children: [jsx("button", { type: "button", className: cx(calendarClasses.button, calendarClasses.controlsButton, disabledMonthSwitch && calendarClasses.buttonDisabled), disabled: disabledMonthSwitch, "aria-disabled": disabledMonthSwitch, onClick: onMonthControlClick, children: getMonthShortName(getMonth(referenceDate), displayMonthLocale) }), jsx("button", { type: "button", className: cx(calendarClasses.button, calendarClasses.controlsButton, disabledYearSwitch && calendarClasses.buttonDisabled), disabled: disabledYearSwitch, "aria-disabled": disabledYearSwitch, onClick: onYearControlClick, children: getYear(referenceDate) })] }));
|
|
42
42
|
}
|
|
43
43
|
else if (mode === 'month') {
|
|
44
|
-
controls = (jsx("button", { type: "button", className: cx(calendarClasses.button, calendarClasses.controlsButton), onClick: onYearControlClick, children: getYear(referenceDate) }));
|
|
44
|
+
controls = (jsx("button", { type: "button", className: cx(calendarClasses.button, calendarClasses.controlsButton, disabledYearSwitch && calendarClasses.buttonDisabled), disabled: disabledYearSwitch, "aria-disabled": disabledYearSwitch, onClick: onYearControlClick, children: getYear(referenceDate) }));
|
|
45
45
|
}
|
|
46
46
|
else if (mode === 'year') {
|
|
47
47
|
controls = (jsx("button", { type: "button", className: cx(calendarClasses.button, calendarClasses.controlsButton, calendarClasses.buttonDisabled), disabled: true, "aria-disabled": true, children: displayYearRange }));
|
|
@@ -2,7 +2,9 @@
|
|
|
2
2
|
import { DateType } from '@mezzanine-ui/core/calendar';
|
|
3
3
|
import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
|
|
4
4
|
import { CalendarDayOfWeekProps } from './CalendarDayOfWeek';
|
|
5
|
-
|
|
5
|
+
import type { CalendarYearsProps } from './CalendarYears';
|
|
6
|
+
import type { CalendarMonthsProps } from './CalendarMonths';
|
|
7
|
+
export interface CalendarDaysProps extends Pick<CalendarDayOfWeekProps, 'displayWeekDayLocale'>, Pick<CalendarYearsProps, 'isYearDisabled'>, Pick<CalendarMonthsProps, 'isMonthDisabled'>, Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'onClick' | 'children'> {
|
|
6
8
|
/**
|
|
7
9
|
* Provide if you have a custom disabling logic. The method takes the date object as its parameter.
|
|
8
10
|
*/
|
package/Calendar/CalendarDays.js
CHANGED
|
@@ -13,7 +13,7 @@ import cx from 'clsx';
|
|
|
13
13
|
*/
|
|
14
14
|
function CalendarDays(props) {
|
|
15
15
|
const { displayWeekDayLocale: displayWeekDayLocaleFromConfig, getCalendarGrid, getDate, getMonth, getNow, isDateIncluded, isSameDate, setDate, setMonth, } = useCalendarContext();
|
|
16
|
-
const { className, displayWeekDayLocale = displayWeekDayLocaleFromConfig, isDateDisabled, isDateInRange, onClick: onClickProp, onDateHover, referenceDate, value, ...rest } = props;
|
|
16
|
+
const { className, displayWeekDayLocale = displayWeekDayLocaleFromConfig, isYearDisabled, isMonthDisabled, isDateDisabled, isDateInRange, onClick: onClickProp, onDateHover, referenceDate, value, ...rest } = props;
|
|
17
17
|
const daysGrid = useMemo(() => getCalendarGrid(referenceDate), [getCalendarGrid, referenceDate]);
|
|
18
18
|
return (jsxs("div", { ...rest, className: cx(calendarClasses.board, className), children: [jsx(CalendarDayOfWeek, { displayWeekDayLocale: displayWeekDayLocale }), daysGrid.map((week, index) => (jsx("div", { className: calendarClasses.row, children: week.map((dateNum) => {
|
|
19
19
|
const isPrevMonth = index === 0 && dateNum > 7;
|
|
@@ -26,7 +26,7 @@ function CalendarDays(props) {
|
|
|
26
26
|
? thisMonth + 1
|
|
27
27
|
: thisMonth;
|
|
28
28
|
const date = setDate(setMonth(referenceDate, month), dateNum);
|
|
29
|
-
const disabled = isDateDisabled
|
|
29
|
+
const disabled = ((isYearDisabled === null || isYearDisabled === void 0 ? void 0 : isYearDisabled(date)) || (isMonthDisabled === null || isMonthDisabled === void 0 ? void 0 : isMonthDisabled(date)) || (isDateDisabled === null || isDateDisabled === void 0 ? void 0 : isDateDisabled(date))) || false;
|
|
30
30
|
const inactive = !disabled && (isPrevMonth || isNextMonth);
|
|
31
31
|
const inRange = !inactive && isDateInRange && isDateInRange(date);
|
|
32
32
|
const active = !disabled && !inactive && value && isDateIncluded(date, value);
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { DateType } from '@mezzanine-ui/core/calendar';
|
|
3
|
+
import type { CalendarYearsProps } from './CalendarYears';
|
|
3
4
|
import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
|
|
4
|
-
export interface CalendarMonthsProps extends Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'onClick' | 'children'> {
|
|
5
|
+
export interface CalendarMonthsProps extends Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'onClick' | 'children'>, Pick<CalendarYearsProps, 'isYearDisabled'> {
|
|
5
6
|
/**
|
|
6
7
|
* The locale you want to use when rendering the names of month.
|
|
7
8
|
* If none provided, it will use the `displayMonthLocale` from calendar context.
|
|
@@ -10,12 +10,13 @@ import cx from 'clsx';
|
|
|
10
10
|
*/
|
|
11
11
|
function CalendarMonths(props) {
|
|
12
12
|
const { displayMonthLocale: displayMonthLocaleFromConfig, getMonthShortNames, isMonthIncluded, setMonth, } = useCalendarContext();
|
|
13
|
-
const { className, displayMonthLocale = displayMonthLocaleFromConfig, isMonthDisabled, isMonthInRange, onClick: onClickProp, onMonthHover, referenceDate, value, ...rest } = props;
|
|
13
|
+
const { className, displayMonthLocale = displayMonthLocaleFromConfig, isMonthDisabled, isMonthInRange, isYearDisabled, onClick: onClickProp, onMonthHover, referenceDate, value, ...rest } = props;
|
|
14
14
|
const monthNames = getMonthShortNames(displayMonthLocale);
|
|
15
15
|
return (jsx("div", { className: cx(calendarClasses.board, className), ...rest, children: jsx("div", { className: calendarClasses.twelveGrid, children: calendarMonths.map((month) => {
|
|
16
16
|
const monthDateType = setMonth(referenceDate, month);
|
|
17
17
|
const active = value && isMonthIncluded(monthDateType, value);
|
|
18
|
-
|
|
18
|
+
/** @NOTE Current month should be disabled when current year is disabled */
|
|
19
|
+
const disabled = ((isYearDisabled === null || isYearDisabled === void 0 ? void 0 : isYearDisabled(monthDateType)) || (isMonthDisabled === null || isMonthDisabled === void 0 ? void 0 : isMonthDisabled(monthDateType))) || false;
|
|
19
20
|
const inRange = isMonthInRange && isMonthInRange(monthDateType);
|
|
20
21
|
const onClick = onClickProp ? () => { onClickProp(monthDateType); } : undefined;
|
|
21
22
|
const onMouseEnter = onMonthHover ? () => { onMonthHover(monthDateType); } : undefined;
|
|
@@ -2,7 +2,9 @@
|
|
|
2
2
|
import { DateType } from '@mezzanine-ui/core/calendar';
|
|
3
3
|
import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
|
|
4
4
|
import { CalendarDayOfWeekProps } from './CalendarDayOfWeek';
|
|
5
|
-
|
|
5
|
+
import type { CalendarYearsProps } from './CalendarYears';
|
|
6
|
+
import type { CalendarMonthsProps } from './CalendarMonths';
|
|
7
|
+
export interface CalendarWeeksProps extends Pick<CalendarDayOfWeekProps, 'displayWeekDayLocale'>, Pick<CalendarYearsProps, 'isYearDisabled'>, Pick<CalendarMonthsProps, 'isMonthDisabled'>, Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'onClick' | 'children'> {
|
|
6
8
|
/**
|
|
7
9
|
* Provide if you have a custom disabling logic.
|
|
8
10
|
* The method takes the date object of first date in week as its parameter.
|
|
@@ -13,7 +13,7 @@ import cx from 'clsx';
|
|
|
13
13
|
*/
|
|
14
14
|
function CalendarWeeks(props) {
|
|
15
15
|
const { displayWeekDayLocale: displayWeekDayLocaleFromConfig, getCalendarGrid, getDate, getMonth, getNow, isInMonth, isSameDate, isWeekIncluded, setDate, setMonth, } = useCalendarContext();
|
|
16
|
-
const { className, displayWeekDayLocale = displayWeekDayLocaleFromConfig, isWeekDisabled, isWeekInRange, onClick: onClickProp, onWeekHover, referenceDate, value, ...rest } = props;
|
|
16
|
+
const { className, displayWeekDayLocale = displayWeekDayLocaleFromConfig, isYearDisabled, isMonthDisabled, isWeekDisabled, isWeekInRange, onClick: onClickProp, onWeekHover, referenceDate, value, ...rest } = props;
|
|
17
17
|
const daysGrid = useMemo(() => getCalendarGrid(referenceDate), [getCalendarGrid, referenceDate]);
|
|
18
18
|
return (jsxs("div", { ...rest, className: cx(calendarClasses.board, className), children: [jsx(CalendarDayOfWeek, { displayWeekDayLocale: displayWeekDayLocale }), daysGrid.map((week, index) => {
|
|
19
19
|
const dates = [];
|
|
@@ -32,7 +32,7 @@ function CalendarWeeks(props) {
|
|
|
32
32
|
const date = setDate(setMonth(referenceDate, month), dateNum);
|
|
33
33
|
dates.push(date);
|
|
34
34
|
});
|
|
35
|
-
const disabled = isWeekDisabled
|
|
35
|
+
const disabled = ((isYearDisabled === null || isYearDisabled === void 0 ? void 0 : isYearDisabled(dates[0])) || (isMonthDisabled === null || isMonthDisabled === void 0 ? void 0 : isMonthDisabled(dates[0])) || (isWeekDisabled === null || isWeekDisabled === void 0 ? void 0 : isWeekDisabled(dates[0]))) || false;
|
|
36
36
|
const inactive = !disabled && (weekStartInPrevMonth || weekStartInNextMonth);
|
|
37
37
|
const active = !disabled && !inactive && value && isWeekIncluded(dates[0], value);
|
|
38
38
|
const inRange = !disabled && !inactive && isWeekInRange && isWeekInRange(dates[0]);
|
package/DatePicker/DatePicker.js
CHANGED
|
@@ -18,7 +18,7 @@ import { FormControlContext } from '../Form/FormControlContext.js';
|
|
|
18
18
|
const DatePicker = forwardRef(function DatePicker(props, ref) {
|
|
19
19
|
const { disabled: disabledFromFormControl, fullWidth: fullWidthFromFormControl, required: requiredFromFormControl, severity, } = useContext(FormControlContext) || {};
|
|
20
20
|
const { defaultDateFormat, getNow, } = useCalendarContext();
|
|
21
|
-
const { calendarProps, className, clearable = true, defaultValue, disableOnNext, disableOnPrev, disabled = disabledFromFormControl || false, displayMonthLocale, error = severity === 'error' || false, fadeProps, format = defaultDateFormat, fullWidth = fullWidthFromFormControl || false, inputProps, isDateDisabled, isMonthDisabled, isYearDisabled, mode = 'day', onCalendarToggle: onCalendarToggleProp, onChange: onChangeProp, placeholder, popperProps, prefix, readOnly, referenceDate: referenceDateProp, required = requiredFromFormControl || false, size, value: valueProp, ...restTriggerProps } = props;
|
|
21
|
+
const { calendarProps, className, clearable = true, defaultValue, disabledMonthSwitch = false, disableOnNext, disableOnPrev, disabledYearSwitch = false, disabled = disabledFromFormControl || false, displayMonthLocale, error = severity === 'error' || false, fadeProps, format = defaultDateFormat, fullWidth = fullWidthFromFormControl || false, inputProps, isDateDisabled, isMonthDisabled, isWeekDisabled, isYearDisabled, mode = 'day', onCalendarToggle: onCalendarToggleProp, onChange: onChangeProp, placeholder, popperProps, prefix, readOnly, referenceDate: referenceDateProp, required = requiredFromFormControl || false, size, value: valueProp, ...restTriggerProps } = props;
|
|
22
22
|
const { onBlur: onBlurProp, onKeyDown: onKeyDownProp, onFocus: onFocusProp, size: inputSize = format.length + 2, ...restInputProp } = inputProps || {};
|
|
23
23
|
const formats = useMemo(() => [
|
|
24
24
|
format,
|
|
@@ -128,7 +128,7 @@ const DatePicker = forwardRef(function DatePicker(props, ref) {
|
|
|
128
128
|
onCalendarToggle(!open);
|
|
129
129
|
};
|
|
130
130
|
const suffixActionIcon = (jsx(Icon, { icon: CalendarIcon, onClick: onIconClick }));
|
|
131
|
-
return (jsxs(Fragment, { children: [jsx(PickerTrigger, { ...restTriggerProps, ref: triggerComposedRef, className: className, clearable: clearable, disabled: disabled, error: error, fullWidth: fullWidth, inputProps: resolvedInputProps, inputRef: inputRef, onChange: onInputChange, onClear: onClear, placeholder: placeholder, prefix: prefix, readOnly: readOnly, required: required, size: size, suffixActionIcon: suffixActionIcon, value: inputValue }), jsx(DatePickerCalendar, { ref: calendarRef, anchor: anchorRef, calendarProps: calendarProps, disableOnNext: disableOnNext, disableOnPrev: disableOnPrev, displayMonthLocale: displayMonthLocale, fadeProps: fadeProps, isDateDisabled: isDateDisabled, isMonthDisabled: isMonthDisabled, isYearDisabled: isYearDisabled, mode: mode, onChange: onCalendarChange, open: open, popperProps: popperProps, referenceDate: referenceDate, value: internalValue })] }));
|
|
131
|
+
return (jsxs(Fragment, { children: [jsx(PickerTrigger, { ...restTriggerProps, ref: triggerComposedRef, className: className, clearable: clearable, disabled: disabled, error: error, fullWidth: fullWidth, inputProps: resolvedInputProps, inputRef: inputRef, onChange: onInputChange, onClear: onClear, placeholder: placeholder, prefix: prefix, readOnly: readOnly, required: required, size: size, suffixActionIcon: suffixActionIcon, value: inputValue }), jsx(DatePickerCalendar, { ref: calendarRef, anchor: anchorRef, calendarProps: calendarProps, disabledMonthSwitch: disabledMonthSwitch, disableOnNext: disableOnNext, disableOnPrev: disableOnPrev, disabledYearSwitch: disabledYearSwitch, displayMonthLocale: displayMonthLocale, fadeProps: fadeProps, isDateDisabled: isDateDisabled, isMonthDisabled: isMonthDisabled, isWeekDisabled: isWeekDisabled, isYearDisabled: isYearDisabled, mode: mode, onChange: onCalendarChange, open: open, popperProps: popperProps, referenceDate: referenceDate, value: internalValue })] }));
|
|
132
132
|
});
|
|
133
133
|
var DatePicker$1 = DatePicker;
|
|
134
134
|
|
|
@@ -2,11 +2,11 @@ import { CalendarMode, DateType } from '@mezzanine-ui/core/calendar';
|
|
|
2
2
|
import { RefObject } from 'react';
|
|
3
3
|
import { CalendarProps } from '../Calendar';
|
|
4
4
|
import { InputTriggerPopperProps } from '../_internal/InputTriggerPopper';
|
|
5
|
-
export interface DatePickerCalendarProps extends Pick<InputTriggerPopperProps, 'anchor' | 'fadeProps' | 'open'>, Pick<CalendarProps, 'disableOnNext' | 'disableOnPrev' | 'displayMonthLocale' | 'isDateDisabled' | 'isMonthDisabled' | 'isYearDisabled' | 'onChange' | 'referenceDate'> {
|
|
5
|
+
export interface DatePickerCalendarProps extends Pick<InputTriggerPopperProps, 'anchor' | 'fadeProps' | 'open'>, Pick<CalendarProps, 'disabledMonthSwitch' | 'disableOnNext' | 'disableOnPrev' | 'disabledYearSwitch' | 'displayMonthLocale' | 'isDateDisabled' | 'isMonthDisabled' | 'isWeekDisabled' | 'isYearDisabled' | 'onChange' | 'referenceDate'> {
|
|
6
6
|
/**
|
|
7
7
|
* Other calendar props you may provide to `Calendar`.
|
|
8
8
|
*/
|
|
9
|
-
calendarProps?: Omit<CalendarProps, 'disableOnNext' | 'disableOnPrev' | 'displayMonthLocale' | 'isDateDisabled' | 'isMonthDisabled' | 'isYearDisabled' | 'locale' | 'mode' | 'onChange' | 'onMonthControlClick' | 'onNext' | 'onPrev' | 'onYearControlClick' | 'referenceDate' | 'updateReferenceDate' | 'value'>;
|
|
9
|
+
calendarProps?: Omit<CalendarProps, 'disableOnNext' | 'disableOnPrev' | 'displayMonthLocale' | 'isDateDisabled' | 'isMonthDisabled' | 'isWeekDisabled' | 'isYearDisabled' | 'locale' | 'mode' | 'onChange' | 'onMonthControlClick' | 'onNext' | 'onPrev' | 'onYearControlClick' | 'referenceDate' | 'updateReferenceDate' | 'value'>;
|
|
10
10
|
/**
|
|
11
11
|
* React ref for calendar component.
|
|
12
12
|
*/
|
|
@@ -10,7 +10,7 @@ import Calendar from '../Calendar/Calendar.js';
|
|
|
10
10
|
*/
|
|
11
11
|
const DatePickerCalendar = forwardRef(function DatePickerCalendar(props, ref) {
|
|
12
12
|
const { displayMonthLocale: displayMonthLocaleFromConfig, getMonth, getYear, setMonth, setYear, } = useCalendarContext();
|
|
13
|
-
const { anchor, calendarProps, calendarRef, disableOnNext, disableOnPrev, displayMonthLocale = displayMonthLocaleFromConfig, fadeProps, isDateDisabled, isMonthDisabled, isYearDisabled, mode = 'day', onChange: onChangeProp, open, popperProps, referenceDate: referenceDateProp, value, } = props;
|
|
13
|
+
const { anchor, calendarProps, calendarRef, disabledMonthSwitch, disableOnNext, disableOnPrev, disabledYearSwitch, displayMonthLocale = displayMonthLocaleFromConfig, fadeProps, isDateDisabled, isMonthDisabled, isWeekDisabled, isYearDisabled, mode = 'day', onChange: onChangeProp, open, popperProps, referenceDate: referenceDateProp, value, } = props;
|
|
14
14
|
const { className: calendarClassName, ...restCalendarProps } = calendarProps || {};
|
|
15
15
|
const { currentMode, onMonthControlClick, onNext, onPrev, onYearControlClick, popModeStack, referenceDate, updateReferenceDate, } = useCalendarControls(referenceDateProp, mode);
|
|
16
16
|
const onChange = useMemo(() => {
|
|
@@ -55,7 +55,7 @@ const DatePickerCalendar = forwardRef(function DatePickerCalendar(props, ref) {
|
|
|
55
55
|
setYear,
|
|
56
56
|
getYear,
|
|
57
57
|
]);
|
|
58
|
-
return (jsx(InputTriggerPopper, { ...popperProps, ref: ref, anchor: anchor, open: open, fadeProps: fadeProps, children: jsx(Calendar, { ...restCalendarProps, ref: calendarRef, className: calendarClassName, disableOnNext: disableOnNext, disableOnPrev: disableOnPrev, displayMonthLocale: displayMonthLocale, isDateDisabled: isDateDisabled, isMonthDisabled: isMonthDisabled, isYearDisabled: isYearDisabled, mode: currentMode, onChange: onChange, onMonthControlClick: onMonthControlClick, onNext: onNext, onPrev: onPrev, onYearControlClick: onYearControlClick, referenceDate: referenceDate, value: value }) }));
|
|
58
|
+
return (jsx(InputTriggerPopper, { ...popperProps, ref: ref, anchor: anchor, open: open, fadeProps: fadeProps, children: jsx(Calendar, { ...restCalendarProps, ref: calendarRef, className: calendarClassName, disabledMonthSwitch: disabledMonthSwitch, disableOnNext: disableOnNext, disableOnPrev: disableOnPrev, disabledYearSwitch: disabledYearSwitch, displayMonthLocale: displayMonthLocale, isDateDisabled: isDateDisabled, isMonthDisabled: isMonthDisabled, isWeekDisabled: isWeekDisabled, isYearDisabled: isYearDisabled, mode: currentMode, onChange: onChange, onMonthControlClick: onMonthControlClick, onNext: onNext, onPrev: onPrev, onYearControlClick: onYearControlClick, referenceDate: referenceDate, value: value }) }));
|
|
59
59
|
});
|
|
60
60
|
var DatePickerCalendar$1 = DatePickerCalendar;
|
|
61
61
|
|
|
@@ -3,7 +3,7 @@ import { DateType } from '@mezzanine-ui/core/calendar';
|
|
|
3
3
|
import { RangePickerValue } from '@mezzanine-ui/core/picker';
|
|
4
4
|
import { DateRangePickerCalendarProps } from './DateRangePickerCalendar';
|
|
5
5
|
import { RangePickerTriggerProps } from '../Picker';
|
|
6
|
-
export interface DateRangePickerProps extends Pick<DateRangePickerCalendarProps, 'calendarProps' | 'displayMonthLocale' | 'fadeProps' | 'mode' | 'popperProps' | 'isDateDisabled' | 'isMonthDisabled' | 'isYearDisabled'>, Pick<RangePickerTriggerProps, 'className' | 'clearable' | 'disabled' | 'error' | 'fullWidth' | 'inputFromPlaceholder' | 'inputFromProps' | 'inputToPlaceholder' | 'inputToProps' | 'prefix' | 'readOnly' | 'required' | 'size'> {
|
|
6
|
+
export interface DateRangePickerProps extends Pick<DateRangePickerCalendarProps, 'calendarProps' | 'disabledMonthSwitch' | 'disableOnNext' | 'disableOnPrev' | 'disabledYearSwitch' | 'displayMonthLocale' | 'fadeProps' | 'mode' | 'popperProps' | 'isDateDisabled' | 'isWeekDisabled' | 'isMonthDisabled' | 'isYearDisabled'>, Pick<RangePickerTriggerProps, 'className' | 'clearable' | 'disabled' | 'error' | 'fullWidth' | 'inputFromPlaceholder' | 'inputFromProps' | 'inputToPlaceholder' | 'inputToProps' | 'prefix' | 'readOnly' | 'required' | 'size'> {
|
|
7
7
|
/**
|
|
8
8
|
* Default value for date range picker.
|
|
9
9
|
*/
|
|
@@ -18,7 +18,7 @@ import { FormControlContext } from '../Form/FormControlContext.js';
|
|
|
18
18
|
const DateRangePicker = forwardRef(function DateRangePicker(props, ref) {
|
|
19
19
|
const { disabled: disabledFromFormControl, fullWidth: fullWidthFromFormControl, required: requiredFromFormControl, severity, } = useContext(FormControlContext) || {};
|
|
20
20
|
const { defaultDateFormat, getNow, isBetween, } = useCalendarContext();
|
|
21
|
-
const { calendarProps, className, clearable = true, defaultValue, disabled = disabledFromFormControl || false, displayMonthLocale, error = severity === 'error' || false, fadeProps, format = defaultDateFormat, fullWidth = fullWidthFromFormControl || false, inputFromPlaceholder, inputFromProps, inputToPlaceholder, inputToProps, isDateDisabled, isMonthDisabled, isYearDisabled, mode = 'day', onCalendarToggle: onCalendarToggleProp, onChange: onChangeProp, popperProps, prefix, readOnly, referenceDate: referenceDateProp, required = requiredFromFormControl || false, size, value: valueProp, } = props;
|
|
21
|
+
const { calendarProps, className, clearable = true, defaultValue, disabledMonthSwitch = false, disableOnNext, disableOnPrev, disabledYearSwitch = false, disabled = disabledFromFormControl || false, displayMonthLocale, error = severity === 'error' || false, fadeProps, format = defaultDateFormat, fullWidth = fullWidthFromFormControl || false, inputFromPlaceholder, inputFromProps, inputToPlaceholder, inputToProps, isDateDisabled, isWeekDisabled, isMonthDisabled, isYearDisabled, mode = 'day', onCalendarToggle: onCalendarToggleProp, onChange: onChangeProp, popperProps, prefix, readOnly, referenceDate: referenceDateProp, required = requiredFromFormControl || false, size, value: valueProp, } = props;
|
|
22
22
|
const { onBlur: onFromBlurProp, onKeyDown: onFromKeyDownProp, onFocus: onFromFocusProp, ...restInputFromProps } = inputFromProps || {};
|
|
23
23
|
const { onBlur: onToBlurProp, onKeyDown: onToKeyDownProp, onFocus: onToFocusProp, ...restInputToProps } = inputToProps || {};
|
|
24
24
|
const formats = useMemo(() => [
|
|
@@ -182,7 +182,7 @@ const DateRangePicker = forwardRef(function DateRangePicker(props, ref) {
|
|
|
182
182
|
onCalendarToggle(!open);
|
|
183
183
|
};
|
|
184
184
|
const suffixActionIcon = (jsx(Icon, { icon: CalendarIcon, onClick: onIconClick }));
|
|
185
|
-
return (jsxs(Fragment, { children: [jsx(RangePickerTrigger, { ref: triggerComposedRef, className: className, clearable: clearable, disabled: disabled, error: error, fullWidth: fullWidth, inputFromPlaceholder: inputFromPlaceholder, inputFromProps: resolvedInputFromProps, inputFromRef: inputFromRef, inputFromValue: inputFromValue, inputToPlaceholder: inputToPlaceholder, inputToProps: resolvedInputToProps, inputToRef: inputToRef, inputToValue: inputToValue, onClear: onClear, onInputFromChange: onInputFromChange, onInputToChange: onInputToChange, prefix: prefix, readOnly: readOnly, required: required, size: size, suffixActionIcon: suffixActionIcon }), jsx(DateRangePickerCalendar, { ref: calendarRef, open: open, anchor: anchorRef, calendarProps: calendarProps, displayMonthLocale: displayMonthLocale, fadeProps: fadeProps, isDateDisabled: isDateDisabled, isDateInRange: getIsInRangeHandler('date'), isMonthDisabled: isMonthDisabled, isMonthInRange: getIsInRangeHandler('month'), isWeekInRange: getIsInRangeHandler('week'), isYearDisabled: isYearDisabled, isYearInRange: getIsInRangeHandler('year'), mode: mode, onChange: onCalendarChangeWithCloseControl, onDateHover: onCalendarHover, onWeekHover: onCalendarHover, onMonthHover: onCalendarHover, onYearHover: onCalendarHover, popperProps: popperProps, referenceDate: referenceDate, value: calendarValue })] }));
|
|
185
|
+
return (jsxs(Fragment, { children: [jsx(RangePickerTrigger, { ref: triggerComposedRef, className: className, clearable: clearable, disabled: disabled, error: error, fullWidth: fullWidth, inputFromPlaceholder: inputFromPlaceholder, inputFromProps: resolvedInputFromProps, inputFromRef: inputFromRef, inputFromValue: inputFromValue, inputToPlaceholder: inputToPlaceholder, inputToProps: resolvedInputToProps, inputToRef: inputToRef, inputToValue: inputToValue, onClear: onClear, onInputFromChange: onInputFromChange, onInputToChange: onInputToChange, prefix: prefix, readOnly: readOnly, required: required, size: size, suffixActionIcon: suffixActionIcon }), jsx(DateRangePickerCalendar, { ref: calendarRef, open: open, anchor: anchorRef, calendarProps: calendarProps, disabledMonthSwitch: disabledMonthSwitch, disableOnNext: disableOnNext, disableOnPrev: disableOnPrev, disabledYearSwitch: disabledYearSwitch, displayMonthLocale: displayMonthLocale, fadeProps: fadeProps, isDateDisabled: isDateDisabled, isDateInRange: getIsInRangeHandler('date'), isMonthDisabled: isMonthDisabled, isMonthInRange: getIsInRangeHandler('month'), isWeekDisabled: isWeekDisabled, isWeekInRange: getIsInRangeHandler('week'), isYearDisabled: isYearDisabled, isYearInRange: getIsInRangeHandler('year'), mode: mode, onChange: onCalendarChangeWithCloseControl, onDateHover: onCalendarHover, onWeekHover: onCalendarHover, onMonthHover: onCalendarHover, onYearHover: onCalendarHover, popperProps: popperProps, referenceDate: referenceDate, value: calendarValue })] }));
|
|
186
186
|
});
|
|
187
187
|
var DateRangePicker$1 = DateRangePicker;
|
|
188
188
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { RefObject } from 'react';
|
|
2
2
|
import { CalendarProps } from '../Calendar';
|
|
3
3
|
import { InputTriggerPopperProps } from '../_internal/InputTriggerPopper';
|
|
4
|
-
export interface DateRangePickerCalendarProps extends Pick<InputTriggerPopperProps, 'anchor' | 'fadeProps' | 'open'>, Pick<CalendarProps, 'value' | 'onChange' | 'displayMonthLocale' | 'mode' | 'isDateInRange' | 'isDateDisabled' | 'isMonthDisabled' | 'isMonthInRange' | 'isWeekInRange' | 'isYearDisabled' | 'isYearInRange' | 'onDateHover' | 'onWeekHover' | 'onMonthHover' | 'onYearHover' | 'referenceDate'> {
|
|
4
|
+
export interface DateRangePickerCalendarProps extends Pick<InputTriggerPopperProps, 'anchor' | 'fadeProps' | 'open'>, Pick<CalendarProps, 'value' | 'onChange' | 'disabledMonthSwitch' | 'disabledYearSwitch' | 'disableOnNext' | 'disableOnPrev' | 'displayMonthLocale' | 'mode' | 'isDateInRange' | 'isDateDisabled' | 'isMonthDisabled' | 'isMonthInRange' | 'isWeekDisabled' | 'isWeekInRange' | 'isYearDisabled' | 'isYearInRange' | 'onDateHover' | 'onWeekHover' | 'onMonthHover' | 'onYearHover' | 'referenceDate'> {
|
|
5
5
|
/**
|
|
6
6
|
* Other props you may pass to calendar component.
|
|
7
7
|
*/
|
|
@@ -12,7 +12,7 @@ import cx from 'clsx';
|
|
|
12
12
|
*/
|
|
13
13
|
const DateRangePickerCalendar = forwardRef(function DateRangePickerCalendar(props, ref) {
|
|
14
14
|
const { displayMonthLocale: displayMonthLocaleFromConfig, getMonth, getYear, setMonth, setYear, } = useCalendarContext();
|
|
15
|
-
const { anchor, calendarProps, displayMonthLocale = displayMonthLocaleFromConfig, fadeProps, firstCalendarRef, isDateDisabled, isDateInRange, isMonthDisabled, isMonthInRange, isWeekInRange, isYearDisabled, isYearInRange, mode = 'day', onChange: onChangeProp, onDateHover, onMonthHover, onWeekHover, onYearHover, open, popperProps, referenceDate: referenceDateProp, secondCalendarRef, value, } = props;
|
|
15
|
+
const { anchor, calendarProps, disabledMonthSwitch, disableOnNext, disableOnPrev, disabledYearSwitch, displayMonthLocale = displayMonthLocaleFromConfig, fadeProps, firstCalendarRef, isDateDisabled, isDateInRange, isMonthDisabled, isMonthInRange, isWeekDisabled, isWeekInRange, isYearDisabled, isYearInRange, mode = 'day', onChange: onChangeProp, onDateHover, onMonthHover, onWeekHover, onYearHover, open, popperProps, referenceDate: referenceDateProp, secondCalendarRef, value, } = props;
|
|
16
16
|
const { className, ...restCalendarProps } = calendarProps || {};
|
|
17
17
|
const { currentMode, onMonthControlClick: onMonthControlClickFromHook, onFirstNext, onFirstPrev, onSecondNext, onSecondPrev, onYearControlClick: onYearControlClickFromHook, popModeStack, referenceDates, updateFirstReferenceDate, updateSecondReferenceDate, } = useDateRangeCalendarControls(referenceDateProp, mode);
|
|
18
18
|
const onChangeFactory = useCallback((calendar) => {
|
|
@@ -89,9 +89,9 @@ const DateRangePickerCalendar = forwardRef(function DateRangePickerCalendar(prop
|
|
|
89
89
|
const isSettingSecondCalendar = currentMode !== mode && !controlPanelOnLeft;
|
|
90
90
|
return (jsx(InputTriggerPopper, { ...popperProps, ref: ref, anchor: anchor, open: open, fadeProps: fadeProps, children: jsxs("div", { className: dateRangePickerClasses.calendarGroup, children: [jsx(Calendar, { ...restCalendarProps, className: cx(dateRangePickerClasses.calendar, {
|
|
91
91
|
[dateRangePickerClasses.calendarInactive]: isSettingSecondCalendar,
|
|
92
|
-
}, className), displayMonthLocale: displayMonthLocale, isDateDisabled: isDateDisabled, isDateInRange: isDateInRange, isMonthDisabled: isMonthDisabled, isMonthInRange: isMonthInRange, isWeekInRange: isWeekInRange, isYearDisabled: isYearDisabled, isYearInRange: isYearInRange, mode: controlPanelOnLeft ? currentMode : mode, onChange: onChangeFactory(0), onDateHover: currentMode === mode ? onDateHover : undefined, onMonthHover: currentMode === mode ? onMonthHover : undefined, onWeekHover: currentMode === mode ? onWeekHover : undefined, onYearHover: currentMode === mode ? onYearHover : undefined, onMonthControlClick: onMonthControlClickFactory(0), onNext: isSettingFirstCalendar ? onFirstNext : undefined, onPrev: onFirstPrev, onYearControlClick: onYearControlClickFactory(0), ref: firstCalendarRef, referenceDate: referenceDates[0], value: isSettingFirstCalendar ? referenceDates[0] : value }), jsx(Calendar, { ...restCalendarProps, className: cx(dateRangePickerClasses.calendar, {
|
|
92
|
+
}, className), disabledMonthSwitch: disabledMonthSwitch, disableOnNext: disableOnNext, disableOnPrev: disableOnPrev, disabledYearSwitch: disabledYearSwitch, displayMonthLocale: displayMonthLocale, isDateDisabled: isDateDisabled, isDateInRange: isDateInRange, isMonthDisabled: isMonthDisabled, isMonthInRange: isMonthInRange, isWeekDisabled: isWeekDisabled, isWeekInRange: isWeekInRange, isYearDisabled: isYearDisabled, isYearInRange: isYearInRange, mode: controlPanelOnLeft ? currentMode : mode, onChange: onChangeFactory(0), onDateHover: currentMode === mode ? onDateHover : undefined, onMonthHover: currentMode === mode ? onMonthHover : undefined, onWeekHover: currentMode === mode ? onWeekHover : undefined, onYearHover: currentMode === mode ? onYearHover : undefined, onMonthControlClick: onMonthControlClickFactory(0), onNext: isSettingFirstCalendar ? onFirstNext : undefined, onPrev: onFirstPrev, onYearControlClick: onYearControlClickFactory(0), ref: firstCalendarRef, referenceDate: referenceDates[0], value: isSettingFirstCalendar ? referenceDates[0] : value }), jsx(Calendar, { ...restCalendarProps, className: cx(dateRangePickerClasses.calendar, {
|
|
93
93
|
[dateRangePickerClasses.calendarInactive]: isSettingFirstCalendar,
|
|
94
|
-
}, className), displayMonthLocale: displayMonthLocale, isDateDisabled: isDateDisabled, isDateInRange: isDateInRange, isMonthDisabled: isMonthDisabled, isMonthInRange: isMonthInRange, isWeekInRange: isWeekInRange, isYearDisabled: isYearDisabled, isYearInRange: isYearInRange, mode: !controlPanelOnLeft ? currentMode : mode, onChange: onChangeFactory(1), onDateHover: currentMode === mode ? onDateHover : undefined, onMonthHover: currentMode === mode ? onMonthHover : undefined, onWeekHover: currentMode === mode ? onWeekHover : undefined, onYearHover: currentMode === mode ? onYearHover : undefined, onMonthControlClick: onMonthControlClickFactory(1), onNext: onSecondNext, onPrev: isSettingSecondCalendar ? onSecondPrev : undefined, onYearControlClick: onYearControlClickFactory(1), ref: secondCalendarRef, referenceDate: referenceDates[1], value: isSettingSecondCalendar ? referenceDates[1] : value })] }) }));
|
|
94
|
+
}, className), disabledMonthSwitch: disabledMonthSwitch, disableOnNext: disableOnNext, disableOnPrev: disableOnPrev, disabledYearSwitch: disabledYearSwitch, displayMonthLocale: displayMonthLocale, isDateDisabled: isDateDisabled, isDateInRange: isDateInRange, isMonthDisabled: isMonthDisabled, isMonthInRange: isMonthInRange, isWeekDisabled: isWeekDisabled, isWeekInRange: isWeekInRange, isYearDisabled: isYearDisabled, isYearInRange: isYearInRange, mode: !controlPanelOnLeft ? currentMode : mode, onChange: onChangeFactory(1), onDateHover: currentMode === mode ? onDateHover : undefined, onMonthHover: currentMode === mode ? onMonthHover : undefined, onWeekHover: currentMode === mode ? onWeekHover : undefined, onYearHover: currentMode === mode ? onYearHover : undefined, onMonthControlClick: onMonthControlClickFactory(1), onNext: onSecondNext, onPrev: isSettingSecondCalendar ? onSecondPrev : undefined, onYearControlClick: onYearControlClickFactory(1), ref: secondCalendarRef, referenceDate: referenceDates[1], value: isSettingSecondCalendar ? referenceDates[1] : value })] }) }));
|
|
95
95
|
});
|
|
96
96
|
var DateRangePickerCalendar$1 = DateRangePickerCalendar;
|
|
97
97
|
|
|
@@ -18,7 +18,7 @@ const DateTimePicker = forwardRef(function DateTimePicker(props, ref) {
|
|
|
18
18
|
const { disabled: disabledFromFormControl, fullWidth: fullWidthFromFormControl, required: requiredFromFormControl, severity, } = useContext(FormControlContext) || {};
|
|
19
19
|
const { defaultDateFormat, defaultTimeFormat, getNow, startOf, } = useCalendarContext();
|
|
20
20
|
const defaultFormat = `${defaultDateFormat} ${defaultTimeFormat}`;
|
|
21
|
-
const { calendarProps, className, clearable = true, confirmText, defaultValue, disableOnNext, disableOnPrev, disabled = disabledFromFormControl, displayMonthLocale, error = severity === 'error' || false, fadeProps, format = defaultFormat, fullWidth = fullWidthFromFormControl, hideHour, hideMinute, hideSecond, hourPrefix, hourStep, inputProps, isDateDisabled, isMonthDisabled, isYearDisabled, minutePrefix, minuteStep, onChange: onChangeProp, onPanelToggle: onPanelToggleProp, placeholder, popperProps, prefix, readOnly, referenceDate: referenceDateProp, required = requiredFromFormControl, secondPrefix, secondStep, size: sizeProp, value: valueProp, } = props;
|
|
21
|
+
const { calendarProps, className, clearable = true, confirmText, defaultValue, disabledMonthSwitch = false, disableOnNext, disableOnPrev, disabledYearSwitch = false, disabled = disabledFromFormControl, displayMonthLocale, error = severity === 'error' || false, fadeProps, format = defaultFormat, fullWidth = fullWidthFromFormControl, hideHour, hideMinute, hideSecond, hourPrefix, hourStep, inputProps, isDateDisabled, isMonthDisabled, isWeekDisabled, isYearDisabled, minutePrefix, minuteStep, onChange: onChangeProp, onPanelToggle: onPanelToggleProp, placeholder, popperProps, prefix, readOnly, referenceDate: referenceDateProp, required = requiredFromFormControl, secondPrefix, secondStep, size: sizeProp, value: valueProp, } = props;
|
|
22
22
|
const { onBlur: onBlurProp, onKeyDown: onKeyDownProp, onFocus: onFocusProp, size: inputSize = format.length + 2, ...restInputProp } = inputProps || {};
|
|
23
23
|
const formats = useMemo(() => [format, defaultFormat], [defaultFormat, format]);
|
|
24
24
|
/** Panel open control */
|
|
@@ -115,7 +115,7 @@ const DateTimePicker = forwardRef(function DateTimePicker(props, ref) {
|
|
|
115
115
|
onPanelToggle(!open);
|
|
116
116
|
};
|
|
117
117
|
const suffixActionIcon = (jsx(Icon, { icon: ClockIcon, onClick: onIconClick }));
|
|
118
|
-
return (jsxs(Fragment, { children: [jsx(PickerTrigger, { ref: triggerComposedRef, className: className, clearable: clearable, disabled: disabled, error: error, fullWidth: fullWidth, inputProps: resolvedInputProps, inputRef: inputRef, onChange: onInputChange, onClear: onClear, placeholder: placeholder, prefix: prefix, readOnly: readOnly, required: required, size: sizeProp, suffixActionIcon: suffixActionIcon, value: inputValue }), jsx(DateTimePickerPanel, { ref: panelRef, anchor: anchorRef, calendarProps: calendarProps, confirmText: confirmText, disableOnNext: disableOnNext, disableOnPrev: disableOnPrev, displayMonthLocale: displayMonthLocale, fadeProps: fadeProps, hideHour: hideHour, hideMinute: hideMinute, hideSecond: hideSecond, hourPrefix: hourPrefix, hourStep: hourStep, isDateDisabled: isDateDisabled, isMonthDisabled: isMonthDisabled, isYearDisabled: isYearDisabled, minutePrefix: minutePrefix, minuteStep: minuteStep, onChange: onChange, onConfirm: onConfirm, open: open, popperProps: popperProps, referenceDate: referenceDate, secondPrefix: secondPrefix, secondStep: secondStep, value: internalValue })] }));
|
|
118
|
+
return (jsxs(Fragment, { children: [jsx(PickerTrigger, { ref: triggerComposedRef, className: className, clearable: clearable, disabled: disabled, error: error, fullWidth: fullWidth, inputProps: resolvedInputProps, inputRef: inputRef, onChange: onInputChange, onClear: onClear, placeholder: placeholder, prefix: prefix, readOnly: readOnly, required: required, size: sizeProp, suffixActionIcon: suffixActionIcon, value: inputValue }), jsx(DateTimePickerPanel, { ref: panelRef, anchor: anchorRef, calendarProps: calendarProps, confirmText: confirmText, disabledMonthSwitch: disabledMonthSwitch, disableOnNext: disableOnNext, disableOnPrev: disableOnPrev, disabledYearSwitch: disabledYearSwitch, displayMonthLocale: displayMonthLocale, fadeProps: fadeProps, hideHour: hideHour, hideMinute: hideMinute, hideSecond: hideSecond, hourPrefix: hourPrefix, hourStep: hourStep, isDateDisabled: isDateDisabled, isMonthDisabled: isMonthDisabled, isWeekDisabled: isWeekDisabled, isYearDisabled: isYearDisabled, minutePrefix: minutePrefix, minuteStep: minuteStep, onChange: onChange, onConfirm: onConfirm, open: open, popperProps: popperProps, referenceDate: referenceDate, secondPrefix: secondPrefix, secondStep: secondStep, value: internalValue })] }));
|
|
119
119
|
});
|
|
120
120
|
var DateTimePicker$1 = DateTimePicker;
|
|
121
121
|
|
|
@@ -4,11 +4,11 @@ import { TimePanelProps } from '../TimePanel';
|
|
|
4
4
|
import { CalendarProps } from '../Calendar';
|
|
5
5
|
import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
|
|
6
6
|
import { InputTriggerPopperProps } from '../_internal/InputTriggerPopper';
|
|
7
|
-
export interface DateTimePickerPanelProps extends Omit<TimePanelProps, Exclude<keyof NativeElementPropsWithoutKeyAndRef<'div'>, 'className' | 'style' | 'id'> | 'withoutAction' | 'onChange' | 'value' | 'withoutAction'>, Pick<InputTriggerPopperProps, 'anchor' | 'fadeProps' | 'open'>, Pick<CalendarProps, 'disableOnNext' | 'disableOnPrev' | 'displayMonthLocale' | 'isDateDisabled' | 'isMonthDisabled' | 'isYearDisabled' | 'onChange' | 'referenceDate'> {
|
|
7
|
+
export interface DateTimePickerPanelProps extends Omit<TimePanelProps, Exclude<keyof NativeElementPropsWithoutKeyAndRef<'div'>, 'className' | 'style' | 'id'> | 'withoutAction' | 'onChange' | 'value' | 'withoutAction'>, Pick<InputTriggerPopperProps, 'anchor' | 'fadeProps' | 'open'>, Pick<CalendarProps, 'disabledMonthSwitch' | 'disableOnNext' | 'disableOnPrev' | 'disabledYearSwitch' | 'displayMonthLocale' | 'isDateDisabled' | 'isMonthDisabled' | 'isWeekDisabled' | 'isYearDisabled' | 'onChange' | 'referenceDate'> {
|
|
8
8
|
/**
|
|
9
9
|
* Other calendar props you may provide to `Calendar`.
|
|
10
10
|
*/
|
|
11
|
-
calendarProps?: Omit<CalendarProps, 'disableOnNext' | 'disableOnPrev' | 'displayMonthLocale' | 'isDateDisabled' | 'isMonthDisabled' | 'isYearDisabled' | 'locale' | 'mode' | 'onChange' | 'onMonthControlClick' | 'onNext' | 'onPrev' | 'onYearControlClick' | 'referenceDate' | 'updateReferenceDate' | 'value'>;
|
|
11
|
+
calendarProps?: Omit<CalendarProps, 'disabledMonthSwitch' | 'disableOnNext' | 'disableOnPrev' | 'disabledYearSwitch' | 'displayMonthLocale' | 'isDateDisabled' | 'isMonthDisabled' | 'isYearDisabled' | 'locale' | 'mode' | 'onChange' | 'onMonthControlClick' | 'onNext' | 'onPrev' | 'onYearControlClick' | 'referenceDate' | 'updateReferenceDate' | 'value'>;
|
|
12
12
|
/**
|
|
13
13
|
* Change Handler. Receive `DateType` as props.
|
|
14
14
|
*/
|
|
@@ -14,7 +14,7 @@ import cx from 'clsx';
|
|
|
14
14
|
*/
|
|
15
15
|
const DateTimePickerPanel = forwardRef(function TimePickerPanel(props, ref) {
|
|
16
16
|
const { displayMonthLocale: displayMonthLocaleFromConfig, getMonth, getYear, setMonth, setYear, setHour, setMinute, setSecond, getHour, getMinute, getSecond, } = useCalendarContext();
|
|
17
|
-
const { anchor, calendarProps, className, confirmText, disableOnNext, disableOnPrev, displayMonthLocale = displayMonthLocaleFromConfig, fadeProps, hideHour, hideMinute, hideSecond, hourPrefix, hourStep, isDateDisabled, isMonthDisabled, isYearDisabled, minutePrefix, minuteStep, onChange: onChangeProp, onConfirm, open, popperProps, referenceDate: referenceDateProp, secondPrefix, secondStep, value, ...restHostProps } = props;
|
|
17
|
+
const { anchor, calendarProps, className, confirmText, disabledMonthSwitch, disableOnNext, disableOnPrev, disabledYearSwitch, displayMonthLocale = displayMonthLocaleFromConfig, fadeProps, hideHour, hideMinute, hideSecond, hourPrefix, hourStep, isDateDisabled, isMonthDisabled, isWeekDisabled, isYearDisabled, minutePrefix, minuteStep, onChange: onChangeProp, onConfirm, open, popperProps, referenceDate: referenceDateProp, secondPrefix, secondStep, value, ...restHostProps } = props;
|
|
18
18
|
const mode = 'day';
|
|
19
19
|
const { currentMode, onMonthControlClick, onNext, onPrev, onYearControlClick, popModeStack, referenceDate, updateReferenceDate, } = useCalendarControls(referenceDateProp, mode);
|
|
20
20
|
const onCalendarChange = (target) => {
|
|
@@ -43,7 +43,7 @@ const DateTimePickerPanel = forwardRef(function TimePickerPanel(props, ref) {
|
|
|
43
43
|
onChangeProp(result);
|
|
44
44
|
}
|
|
45
45
|
};
|
|
46
|
-
return (jsx(InputTriggerPopper, { ...popperProps, ref: ref, anchor: anchor, open: open, fadeProps: fadeProps, children: jsxs("div", { ...restHostProps, className: cx(dateTimePickerClasses.panel, className), children: [jsxs("div", { className: dateTimePickerClasses.panelSelectors, children: [jsx(Calendar, { ...calendarProps, disableOnNext: disableOnNext, disableOnPrev: disableOnPrev, displayMonthLocale: displayMonthLocale, isDateDisabled: isDateDisabled, isMonthDisabled: isMonthDisabled, isYearDisabled: isYearDisabled, mode: currentMode, onChange: onCalendarChange, onMonthControlClick: onMonthControlClick, onNext: onNext, onPrev: onPrev, onYearControlClick: onYearControlClick, referenceDate: referenceDate, value: value, className: dateTimePickerClasses.panelCalendar }), jsx(TimePanel, { hideHour: hideHour, hourStep: hourStep, hideMinute: hideMinute, minuteStep: minuteStep, hideSecond: hideSecond, secondStep: secondStep, hourPrefix: hourPrefix, minutePrefix: minutePrefix, secondPrefix: secondPrefix, onChange: onTimePanelChange, value: value, withoutAction: true })] }), jsx(TimePanelAction, { onConfirm: onConfirm, confirmText: confirmText })] }) }));
|
|
46
|
+
return (jsx(InputTriggerPopper, { ...popperProps, ref: ref, anchor: anchor, open: open, fadeProps: fadeProps, children: jsxs("div", { ...restHostProps, className: cx(dateTimePickerClasses.panel, className), children: [jsxs("div", { className: dateTimePickerClasses.panelSelectors, children: [jsx(Calendar, { ...calendarProps, disabledMonthSwitch: disabledMonthSwitch, disableOnNext: disableOnNext, disableOnPrev: disableOnPrev, disabledYearSwitch: disabledYearSwitch, displayMonthLocale: displayMonthLocale, isDateDisabled: isDateDisabled, isMonthDisabled: isMonthDisabled, isWeekDisabled: isWeekDisabled, isYearDisabled: isYearDisabled, mode: currentMode, onChange: onCalendarChange, onMonthControlClick: onMonthControlClick, onNext: onNext, onPrev: onPrev, onYearControlClick: onYearControlClick, referenceDate: referenceDate, value: value, className: dateTimePickerClasses.panelCalendar }), jsx(TimePanel, { hideHour: hideHour, hourStep: hourStep, hideMinute: hideMinute, minuteStep: minuteStep, hideSecond: hideSecond, secondStep: secondStep, hourPrefix: hourPrefix, minutePrefix: minutePrefix, secondPrefix: secondPrefix, onChange: onTimePanelChange, value: value, withoutAction: true })] }), jsx(TimePanelAction, { onConfirm: onConfirm, confirmText: confirmText })] }) }));
|
|
47
47
|
});
|
|
48
48
|
var DateTimePickerPanel$1 = DateTimePickerPanel;
|
|
49
49
|
|
package/Table/TableBodyRow.js
CHANGED
|
@@ -54,7 +54,7 @@ const TableBodyRow = forwardRef(function TableBodyRow(props, ref) {
|
|
|
54
54
|
}, children: jsx(TableExpandable, { expandable: isExpandable, expanded: expanded, setExpanded: setExpanded, onExpand: (status) => { var _a; return (_a = expanding.onExpand) === null || _a === void 0 ? void 0 : _a.call(expanding, rowData, status); } }) })) : null, (columns !== null && columns !== void 0 ? columns : []).map((column, idx) => {
|
|
55
55
|
var _a, _b, _c, _d;
|
|
56
56
|
const autoGrabData = column.dataIndex ? get(rowData, column.dataIndex) : '';
|
|
57
|
-
const ellipsis =
|
|
57
|
+
const ellipsis = ((_a = column.ellipsis) !== null && _a !== void 0 ? _a : true);
|
|
58
58
|
const tooltipTitle = ((_c = (_b = column.renderTooltipTitle) === null || _b === void 0 ? void 0 : _b.call(column, rowData)) !== null && _c !== void 0 ? _c : autoGrabData);
|
|
59
59
|
return (jsx("td", { className: cx(tableClasses.bodyRowCellWrapper, isFirstColumnShouldSticky && idx === 0 && tableClasses.bodyRowCellWrapperFixed, isFirstColumnShouldSticky && idx === 0 && isHorizontalScrolling && tableClasses.bodyRowCellWrapperFixedStuck, column.bodyClassName), style: getColumnStyle(column), children: jsx(TableEditRenderWrapper, { ...column, rowData: rowData, children: jsx(TableCell, { ellipsis: ellipsis, forceShownTooltipWhenHovered: column.forceShownTooltipWhenHovered, style: getCellStyle(column), tooltipTitle: tooltipTitle, children: ((_d = column.render) === null || _d === void 0 ? void 0 : _d.call(column, rowData, rowIndex, column)) || autoGrabData }) }) }, `${idx + 1}-${(rowData.key || rowData.id)}`));
|
|
60
60
|
})] })) }, rowData.key || rowData.id), renderedExpandedContent ? (jsx("tr", { children: jsx("td", { style: { padding: 0 }, children: jsx(AccordionDetails, { className: cx(expanding.className, tableClasses.bodyRowExpandedTableWrapper), expanded: expanded, children: (renderedExpandedContent === null || renderedExpandedContent === void 0 ? void 0 : renderedExpandedContent.dataSource) ? (jsx(TableExpandedTable, { renderedExpandedContent: renderedExpandedContent })) : renderedExpandedContent }) }) })) : null] }));
|
package/Tooltip/Tooltip.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { ReactElement, MouseEventHandler } from 'react';
|
|
1
|
+
import { ReactElement, MouseEventHandler, ReactNode } from 'react';
|
|
2
2
|
import { PopperProps } from '../Popper';
|
|
3
|
-
export interface TooltipProps extends Omit<PopperProps, 'children'> {
|
|
3
|
+
export interface TooltipProps extends Omit<PopperProps, 'children' | 'title'> {
|
|
4
4
|
/**
|
|
5
5
|
* child function that can receive events
|
|
6
6
|
*/
|
|
@@ -16,7 +16,7 @@ export interface TooltipProps extends Omit<PopperProps, 'children'> {
|
|
|
16
16
|
/**
|
|
17
17
|
* title of tooltip
|
|
18
18
|
*/
|
|
19
|
-
title?:
|
|
19
|
+
title?: ReactNode;
|
|
20
20
|
}
|
|
21
21
|
/**
|
|
22
22
|
* The react component for `mezzanine` tooltip.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mezzanine-ui/react",
|
|
3
|
-
"version": "0.14.
|
|
3
|
+
"version": "0.14.3",
|
|
4
4
|
"description": "React components for mezzanine-ui",
|
|
5
5
|
"author": "Mezzanine",
|
|
6
6
|
"repository": {
|
|
@@ -28,9 +28,9 @@
|
|
|
28
28
|
"react-dom": "^18.2.0"
|
|
29
29
|
},
|
|
30
30
|
"dependencies": {
|
|
31
|
-
"@mezzanine-ui/core": "^0.14.
|
|
32
|
-
"@mezzanine-ui/icons": "^0.14.
|
|
33
|
-
"@mezzanine-ui/system": "^0.14.
|
|
31
|
+
"@mezzanine-ui/core": "^0.14.3",
|
|
32
|
+
"@mezzanine-ui/icons": "^0.14.3",
|
|
33
|
+
"@mezzanine-ui/system": "^0.14.3",
|
|
34
34
|
"@popperjs/core": "^2.11.6",
|
|
35
35
|
"@types/react-transition-group": "^4.4.8",
|
|
36
36
|
"clsx": "^2.0.0",
|