@mezzanine-ui/react 0.14.10 → 0.15.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/Accordion/Accordion.js +2 -1
- package/Accordion/AccordionDetails.js +1 -1
- package/Accordion/AccordionSummary.js +4 -2
- package/Accordion/index.d.ts +1 -1
- package/Alert/index.d.ts +2 -2
- package/AppBar/AppBar.js +1 -3
- package/AppBar/index.d.ts +4 -4
- package/Badge/index.d.ts +1 -1
- package/Button/Button.js +1 -1
- package/Button/ButtonGroup.js +1 -1
- package/Button/IconButton.js +1 -1
- package/Button/index.d.ts +2 -2
- package/Calendar/Calendar.js +9 -1
- package/Calendar/CalendarContext.js +3 -3
- package/Calendar/CalendarDays.js +12 -5
- package/Calendar/CalendarMonths.js +13 -3
- package/Calendar/CalendarWeeks.js +16 -8
- package/Calendar/CalendarYears.js +15 -4
- package/Calendar/index.d.ts +7 -7
- package/Calendar/useCalendarControlModifiers.js +4 -13
- package/Calendar/useCalendarControls.js +1 -1
- package/Calendar/useCalendarModeStack.js +1 -1
- package/Card/Card.d.ts +1 -1
- package/Card/Card.js +5 -5
- package/Card/CardActions.js +1 -1
- package/Card/index.d.ts +2 -2
- package/Checkbox/CheckAll.js +1 -1
- package/Checkbox/Checkbox.js +4 -4
- package/Checkbox/CheckboxGroup.js +3 -1
- package/Checkbox/index.d.ts +3 -3
- package/ConfirmActions/ConfirmActions.js +1 -1
- package/ConfirmActions/index.d.ts +1 -1
- package/DatePicker/DatePicker.js +3 -7
- package/DatePicker/DatePickerCalendar.js +6 -2
- package/DatePicker/index.d.ts +1 -1
- package/DateRangePicker/DateRangePicker.js +7 -10
- package/DateRangePicker/DateRangePickerCalendar.js +9 -3
- package/DateRangePicker/index.d.ts +2 -2
- package/DateRangePicker/useDateRangeCalendarControls.js +6 -18
- package/DateRangePicker/useDateRangePickerValue.js +1 -1
- package/DateTimePicker/DateTimePicker.js +2 -2
- package/DateTimePicker/index.d.ts +1 -1
- package/Drawer/index.d.ts +1 -1
- package/Dropdown/Dropdown.js +2 -10
- package/Dropdown/index.d.ts +1 -1
- package/Empty/index.d.ts +1 -1
- package/Form/FormMessage.js +1 -1
- package/Form/useAutoCompleteValueControl.js +4 -8
- package/Form/useCheckboxControlValue.d.ts +1 -1
- package/Form/useControlValueState.js +1 -1
- package/Form/useCustomControlValue.d.ts +1 -1
- package/Form/useInputControlValue.d.ts +1 -1
- package/Form/useInputControlValue.js +1 -1
- package/Form/useInputWithClearControlValue.d.ts +1 -1
- package/Form/useInputWithClearControlValue.js +2 -6
- package/Form/useInputWithTagsModeValue.js +5 -8
- package/Form/useRadioControlValue.d.ts +1 -1
- package/Form/useSelectValueControl.js +1 -4
- package/Form/useSwitchControlValue.d.ts +1 -1
- package/Icon/index.d.ts +1 -1
- package/Input/Input.d.ts +4 -4
- package/Input/Input.js +3 -3
- package/Input/index.d.ts +1 -1
- package/Loading/index.d.ts +1 -1
- package/Menu/Menu.js +1 -1
- package/Menu/MenuDivider.js +1 -1
- package/Menu/index.d.ts +1 -1
- package/Message/Message.d.ts +1 -1
- package/Message/Message.js +19 -9
- package/Message/index.d.ts +2 -2
- package/Modal/ModalActions.js +1 -1
- package/Modal/index.d.ts +7 -7
- package/Navigation/Navigation.js +3 -4
- package/Navigation/NavigationItem.js +2 -2
- package/Navigation/NavigationSubMenu.js +4 -7
- package/Navigation/index.d.ts +1 -1
- package/Notification/Notification.js +14 -10
- package/Notification/index.d.ts +2 -2
- package/Notifier/NotifierManager.js +1 -1
- package/Overlay/index.d.ts +1 -1
- package/Pagination/Pagination.d.ts +2 -2
- package/Pagination/PaginationJumper.js +1 -1
- package/Pagination/PaginationPageSize.js +6 -4
- package/Pagination/index.d.ts +4 -4
- package/Pagination/usePagination.js +20 -7
- package/Picker/PickerTrigger.d.ts +3 -3
- package/Picker/index.d.ts +3 -3
- package/Picker/usePickerValue.js +7 -3
- package/Popconfirm/Popconfirm.js +1 -1
- package/Popconfirm/index.d.ts +1 -1
- package/Popover/Popover.js +1 -6
- package/Popover/index.d.ts +1 -1
- package/Popper/Popper.js +1 -1
- package/Portal/Portal.js +2 -4
- package/Portal/index.d.ts +1 -1
- package/Progress/Progress.js +7 -5
- package/Progress/index.d.ts +1 -1
- package/Provider/ConfigProvider.js +1 -1
- package/Provider/index.d.ts +4 -4
- package/Radio/Radio.js +4 -4
- package/Radio/RadioGroup.js +2 -1
- package/Radio/index.d.ts +2 -2
- package/Select/AutoComplete.js +4 -8
- package/Select/Option.js +1 -1
- package/Select/Select.js +3 -7
- package/Select/SelectTriggerTags.js +1 -1
- package/Select/TreeSelect.js +1 -4
- package/Select/index.d.ts +5 -5
- package/Select/useSelectTriggerTags.js +1 -1
- package/Skeleton/Skeleton.js +5 -1
- package/Slider/Slider.js +13 -9
- package/Slider/useSlider.js +57 -50
- package/Stepper/Step.js +4 -2
- package/Stepper/index.d.ts +2 -2
- package/Switch/Switch.js +1 -1
- package/Switch/index.d.ts +1 -1
- package/Table/Table.d.ts +25 -25
- package/Table/Table.js +52 -49
- package/Table/TableBody.js +12 -6
- package/Table/TableBodyRow.js +22 -22
- package/Table/TableCell.js +3 -2
- package/Table/TableExpandedTable.js +9 -7
- package/Table/TableHeader.js +11 -9
- package/Table/draggable/useTableDraggable.js +2 -1
- package/Table/editable/TableEditRenderWrapper.js +2 -2
- package/Table/index.d.ts +5 -5
- package/Table/pagination/TablePagination.js +2 -2
- package/Table/pagination/useTablePagination.d.ts +1 -1
- package/Table/pagination/useTablePagination.js +2 -2
- package/Table/refresh/TableRefresh.js +2 -5
- package/Table/rowSelection/TableRowSelection.js +12 -9
- package/Table/rowSelection/useTableRowSelection.d.ts +1 -1
- package/Table/rowSelection/useTableRowSelection.js +3 -5
- package/Table/sorting/TableSortingIcon.js +2 -2
- package/Table/sorting/useTableSorting.d.ts +1 -1
- package/Table/sorting/useTableSorting.js +11 -5
- package/Table/useTableFetchMore.d.ts +1 -1
- package/Table/useTableFetchMore.js +1 -1
- package/Table/useTableLoading.d.ts +1 -1
- package/Table/useTableLoading.js +1 -1
- package/Table/useTableScroll.js +33 -19
- package/Tabs/index.d.ts +3 -3
- package/Tag/Tag.js +1 -1
- package/Tag/index.d.ts +2 -2
- package/TextField/TextField.js +8 -7
- package/TextField/index.d.ts +1 -1
- package/TextField/useTextFieldControl.js +1 -1
- package/Textarea/Textarea.js +2 -2
- package/TimePanel/index.d.ts +1 -1
- package/TimePicker/TimePicker.js +2 -2
- package/TimePicker/index.d.ts +1 -1
- package/Tooltip/Tooltip.d.ts +1 -1
- package/Tooltip/Tooltip.js +6 -5
- package/Tooltip/index.d.ts +1 -1
- package/Tooltip/useDelayMouseEnterLeave.js +1 -1
- package/Transition/Collapse.js +3 -1
- package/Transition/Fade.js +9 -8
- package/Transition/Grow.js +16 -12
- package/Transition/SlideFade.js +9 -8
- package/Transition/Zoom.js +9 -8
- package/Transition/getTransitionStyleProps.js +1 -1
- package/Transition/index.d.ts +4 -4
- package/Transition/useSetNodeTransition.d.ts +4 -1
- package/Transition/useSetNodeTransition.js +1 -1
- package/Tree/Tree.js +12 -4
- package/Tree/TreeNode.js +17 -11
- package/Tree/TreeNodeList.js +1 -3
- package/Tree/getTreeNodeEntities.js +9 -6
- package/Tree/index.d.ts +2 -2
- package/Tree/traverseTree.js +1 -1
- package/Typography/Typography.js +1 -3
- package/Typography/index.d.ts +1 -1
- package/Upload/UploadInput.js +1 -1
- package/Upload/UploadPicture.d.ts +11 -11
- package/Upload/UploadPictureBlock.js +2 -2
- package/Upload/UploadPictureWall.d.ts +14 -14
- package/Upload/UploadPictureWall.js +17 -5
- package/Upload/UploadResult.js +2 -2
- package/Upload/index.d.ts +3 -3
- package/_internal/InputCheck/InputCheck.js +1 -1
- package/_internal/InputCheck/index.d.ts +1 -1
- package/_internal/InputTriggerPopper/index.d.ts +1 -1
- package/_internal/SlideFadeOverlay/SlideFadeOverlay.js +3 -8
- package/_internal/SlideFadeOverlay/index.d.ts +1 -1
- package/hooks/useIsomorphicLayoutEffect.js +3 -1
- package/index.d.ts +18 -18
- package/index.js +1 -0
- package/package.json +7 -7
- package/utils/get-scrollbar-width.d.ts +1 -1
- package/utils/get-scrollbar-width.js +6 -1
- package/utils/scroll-lock.js +2 -2
package/Accordion/Accordion.js
CHANGED
|
@@ -20,7 +20,8 @@ const Accordion = forwardRef(function Accordion(props, ref) {
|
|
|
20
20
|
var _a, _b;
|
|
21
21
|
return ({
|
|
22
22
|
detailsId: ((_a = summary === null || summary === void 0 ? void 0 : summary.props) === null || _a === void 0 ? void 0 : _a.id)
|
|
23
|
-
? `${summary.props.id}-details`
|
|
23
|
+
? `${summary.props.id}-details`
|
|
24
|
+
: undefined,
|
|
24
25
|
disabled,
|
|
25
26
|
expanded: expandedProp || expanded,
|
|
26
27
|
summaryId: (_b = summary === null || summary === void 0 ? void 0 : summary.props) === null || _b === void 0 ? void 0 : _b.id,
|
|
@@ -7,7 +7,7 @@ import cx from 'clsx';
|
|
|
7
7
|
|
|
8
8
|
const AccordionDetails = forwardRef(function AccordionDetails(props, ref) {
|
|
9
9
|
const { className, children, expanded: expandedProp, ...rest } = props;
|
|
10
|
-
const { detailsId, expanded, summaryId
|
|
10
|
+
const { detailsId, expanded, summaryId } = useContext(AccordionControlContext) || {};
|
|
11
11
|
const ariaProps = useMemo(() => {
|
|
12
12
|
if (summaryId && detailsId) {
|
|
13
13
|
return {
|
|
@@ -8,7 +8,7 @@ import cx from 'clsx';
|
|
|
8
8
|
|
|
9
9
|
const AccordionSummary = forwardRef(function AccordionSummary(props, ref) {
|
|
10
10
|
const { className, children, iconClassName: iconClassNameProp, prefixIcon, suffixActions, ...rest } = props;
|
|
11
|
-
const { detailsId, disabled, expanded, toggleExpanded
|
|
11
|
+
const { detailsId, disabled, expanded, toggleExpanded } = useContext(AccordionControlContext) || {};
|
|
12
12
|
const onToggle = useCallback((e) => {
|
|
13
13
|
e.stopPropagation();
|
|
14
14
|
if (typeof toggleExpanded === 'function' && !disabled) {
|
|
@@ -43,7 +43,9 @@ const AccordionSummary = forwardRef(function AccordionSummary(props, ref) {
|
|
|
43
43
|
}, [disabled, expanded, iconClassNameProp, onToggle]);
|
|
44
44
|
return (jsxs("div", { ...rest, ...ariaProps, ref: ref, className: cx(accordionClasses.summary, {
|
|
45
45
|
[accordionClasses.summaryDisabled]: disabled,
|
|
46
|
-
}, className), onClick: onToggle, onKeyDown: onKeyDown, role: "button", tabIndex: 0, children: [jsxs("div", { className: accordionClasses.summaryMainPart, children: [suffixActions
|
|
46
|
+
}, className), onClick: onToggle, onKeyDown: onKeyDown, role: "button", tabIndex: 0, children: [jsxs("div", { className: accordionClasses.summaryMainPart, children: [suffixActions
|
|
47
|
+
? prefixIcon || (jsx(DefaultIcon, { className: accordionClasses.summaryMainPartPrefix }))
|
|
48
|
+
: null, children] }), suffixActions || jsx(DefaultIcon, {})] }));
|
|
47
49
|
});
|
|
48
50
|
var AccordionSummary$1 = AccordionSummary;
|
|
49
51
|
|
package/Accordion/index.d.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
export { AccordionProps, default
|
|
1
|
+
export { AccordionProps, default } from './Accordion';
|
|
2
2
|
export { AccordionSummaryProps, default as AccordionSummary, } from './AccordionSummary';
|
|
3
3
|
export { AccordionDetailsProps, default as AccordionDetails, } from './AccordionDetails';
|
package/Alert/index.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { AlertSeverity
|
|
2
|
-
export { AlertProps, default
|
|
1
|
+
export { AlertSeverity } from '@mezzanine-ui/core/alert';
|
|
2
|
+
export { AlertProps, default } from './Alert';
|
package/AppBar/AppBar.js
CHANGED
|
@@ -18,9 +18,7 @@ const componentOrders = (type) => {
|
|
|
18
18
|
};
|
|
19
19
|
const AppBar = forwardRef((props, ref) => {
|
|
20
20
|
const { orientation = 'horizontal', className, children, ...rest } = props;
|
|
21
|
-
const SortedChildren = Children
|
|
22
|
-
.toArray(children)
|
|
23
|
-
.sort((unknownBefore, unknownAfter) => {
|
|
21
|
+
const SortedChildren = Children.toArray(children).sort((unknownBefore, unknownAfter) => {
|
|
24
22
|
const { type: beforeType } = unknownBefore;
|
|
25
23
|
const { type: afterType } = unknownAfter;
|
|
26
24
|
const beforeOrder = componentOrders(beforeType);
|
package/AppBar/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { AppBarBrandProps, default as AppBarBrand
|
|
2
|
-
export { AppBarMainProps, default as AppBarMain
|
|
3
|
-
export { AppBarSupportProps, default as AppBarSupport
|
|
4
|
-
export { AppBarChild, AppBarChildren, AppBarProps, default
|
|
1
|
+
export { AppBarBrandProps, default as AppBarBrand } from './AppBarBrand';
|
|
2
|
+
export { AppBarMainProps, default as AppBarMain } from './AppBarMain';
|
|
3
|
+
export { AppBarSupportProps, default as AppBarSupport } from './AppBarSupport';
|
|
4
|
+
export { AppBarChild, AppBarChildren, AppBarProps, default } from './AppBar';
|
package/Badge/index.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { BadgeProps, default
|
|
1
|
+
export { BadgeProps, default } from './Badge';
|
|
2
2
|
export { BadgeContainerProps, default as BadgeContainer, } from './BadgeContainer';
|
package/Button/Button.js
CHANGED
|
@@ -10,7 +10,7 @@ import cx from 'clsx';
|
|
|
10
10
|
* The react component for `mezzanine` button.
|
|
11
11
|
*/
|
|
12
12
|
const Button = forwardRef(function Button(props, ref) {
|
|
13
|
-
const { size: globalSize
|
|
13
|
+
const { size: globalSize } = useContext(MezzanineConfig);
|
|
14
14
|
const { children, className, color = 'primary', component: Component = 'button', danger = false, disabled = false, loading = false, onClick, prefix: prefixProp, size = globalSize, suffix: suffixProp, variant = 'text', ...rest } = props;
|
|
15
15
|
let prefix = prefixProp;
|
|
16
16
|
let suffix = suffixProp;
|
package/Button/ButtonGroup.js
CHANGED
|
@@ -8,7 +8,7 @@ import cx from 'clsx';
|
|
|
8
8
|
* The react component for `mezzanine` button group.
|
|
9
9
|
*/
|
|
10
10
|
const ButtonGroup = forwardRef(function ButtonGroup(props, ref) {
|
|
11
|
-
const { size: globalSize
|
|
11
|
+
const { size: globalSize } = useContext(MezzanineConfig);
|
|
12
12
|
const { attached = false, children, className, color = 'primary', danger = false, disabled = false, fullWidth = false, orientation = 'horizontal', role = 'group', size = globalSize, spacing, style: styleProp, variant = 'text', ...rest } = props;
|
|
13
13
|
const cssVars = toButtonGroupCssVars({ size, spacing });
|
|
14
14
|
const style = {
|
package/Button/IconButton.js
CHANGED
|
@@ -7,7 +7,7 @@ import Button from './Button.js';
|
|
|
7
7
|
*/
|
|
8
8
|
const IconButton = forwardRef(function IconButton(props, ref) {
|
|
9
9
|
const { children, ...rest } = props;
|
|
10
|
-
return
|
|
10
|
+
return jsx(Button, { ...rest, ref: ref, prefix: children });
|
|
11
11
|
});
|
|
12
12
|
|
|
13
13
|
export { IconButton as default };
|
package/Button/index.d.ts
CHANGED
|
@@ -3,8 +3,8 @@ import { ButtonComponent, ButtonPropsBase } from './typings';
|
|
|
3
3
|
import { ButtonProps } from './Button';
|
|
4
4
|
import { IconButtonProps } from './IconButton';
|
|
5
5
|
export type { ButtonColor, ButtonGroupOrientation, ButtonGroupSpacing, ButtonSize, ButtonVariant, } from '@mezzanine-ui/core/button';
|
|
6
|
-
export { ButtonGroupChild, ButtonGroupProps, default as ButtonGroup } from './ButtonGroup';
|
|
7
|
-
export type { ButtonComponent, ButtonProps, ButtonPropsBase, IconButtonProps
|
|
6
|
+
export { ButtonGroupChild, ButtonGroupProps, default as ButtonGroup, } from './ButtonGroup';
|
|
7
|
+
export type { ButtonComponent, ButtonProps, ButtonPropsBase, IconButtonProps };
|
|
8
8
|
/**
|
|
9
9
|
* @remark
|
|
10
10
|
* Add type alias here for parsable to react docgen typescript.
|
package/Calendar/Calendar.js
CHANGED
|
@@ -46,7 +46,15 @@ const Calendar = forwardRef(function Calendar(props, ref) {
|
|
|
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 }));
|
|
48
48
|
}
|
|
49
|
-
return (jsxs("div", { ...restCalendarProps, ref: ref, className: cx(calendarClasses.host, className), children: [jsx(CalendarControls, { disableOnNext: disableOnNext, disableOnPrev: disableOnPrev, onNext: onNext
|
|
49
|
+
return (jsxs("div", { ...restCalendarProps, ref: ref, className: cx(calendarClasses.host, className), children: [jsx(CalendarControls, { disableOnNext: disableOnNext, disableOnPrev: disableOnPrev, onNext: onNext
|
|
50
|
+
? () => {
|
|
51
|
+
onNext(mode);
|
|
52
|
+
}
|
|
53
|
+
: undefined, onPrev: onPrev
|
|
54
|
+
? () => {
|
|
55
|
+
onPrev(mode);
|
|
56
|
+
}
|
|
57
|
+
: undefined, children: controls }), displayCalendar] }));
|
|
50
58
|
});
|
|
51
59
|
var Calendar$1 = Calendar;
|
|
52
60
|
|
|
@@ -5,9 +5,9 @@ const CalendarContext = createContext(undefined);
|
|
|
5
5
|
function useCalendarContext() {
|
|
6
6
|
const configs = useContext(CalendarContext);
|
|
7
7
|
if (!configs) {
|
|
8
|
-
throw new Error('Cannot find values in your context. '
|
|
9
|
-
|
|
10
|
-
|
|
8
|
+
throw new Error('Cannot find values in your context. ' +
|
|
9
|
+
'Make sure you use `CalendarConfigProvider` in your app ' +
|
|
10
|
+
'and pass in one of the following as methods: `CalendarMethodsMoment`.');
|
|
11
11
|
}
|
|
12
12
|
return configs;
|
|
13
13
|
}
|
package/Calendar/CalendarDays.js
CHANGED
|
@@ -26,15 +26,22 @@ function CalendarDays(props) {
|
|
|
26
26
|
? thisMonth + 1
|
|
27
27
|
: thisMonth;
|
|
28
28
|
const date = setDate(setMonth(referenceDate, month), dateNum);
|
|
29
|
-
const disabled = (
|
|
29
|
+
const disabled = (isYearDisabled === null || isYearDisabled === void 0 ? void 0 : isYearDisabled(date)) ||
|
|
30
|
+
(isMonthDisabled === null || isMonthDisabled === void 0 ? void 0 : isMonthDisabled(date)) ||
|
|
31
|
+
(isDateDisabled === null || isDateDisabled === void 0 ? void 0 : isDateDisabled(date)) ||
|
|
32
|
+
false;
|
|
30
33
|
const inactive = !disabled && (isPrevMonth || isNextMonth);
|
|
31
34
|
const inRange = !inactive && isDateInRange && isDateInRange(date);
|
|
32
35
|
const active = !disabled && !inactive && value && isDateIncluded(date, value);
|
|
33
|
-
const onMouseEnter = onDateHover
|
|
34
|
-
|
|
35
|
-
|
|
36
|
+
const onMouseEnter = onDateHover
|
|
37
|
+
? () => {
|
|
38
|
+
onDateHover(date);
|
|
39
|
+
}
|
|
40
|
+
: undefined;
|
|
36
41
|
const onClick = onClickProp
|
|
37
|
-
? () => {
|
|
42
|
+
? () => {
|
|
43
|
+
onClickProp(date);
|
|
44
|
+
}
|
|
38
45
|
: undefined;
|
|
39
46
|
return (jsx(CalendarCell, { today: isSameDate(date, getNow()), active: active, disabled: isPrevMonth || isNextMonth, children: jsx("button", { type: "button", "aria-disabled": disabled, disabled: disabled, onMouseEnter: onMouseEnter, className: cx(calendarClasses.button, {
|
|
40
47
|
[calendarClasses.buttonInRange]: inRange,
|
|
@@ -16,10 +16,20 @@ function CalendarMonths(props) {
|
|
|
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 = (
|
|
19
|
+
const disabled = (isYearDisabled === null || isYearDisabled === void 0 ? void 0 : isYearDisabled(monthDateType)) ||
|
|
20
|
+
(isMonthDisabled === null || isMonthDisabled === void 0 ? void 0 : isMonthDisabled(monthDateType)) ||
|
|
21
|
+
false;
|
|
20
22
|
const inRange = isMonthInRange && isMonthInRange(monthDateType);
|
|
21
|
-
const onClick = onClickProp
|
|
22
|
-
|
|
23
|
+
const onClick = onClickProp
|
|
24
|
+
? () => {
|
|
25
|
+
onClickProp(monthDateType);
|
|
26
|
+
}
|
|
27
|
+
: undefined;
|
|
28
|
+
const onMouseEnter = onMonthHover
|
|
29
|
+
? () => {
|
|
30
|
+
onMonthHover(monthDateType);
|
|
31
|
+
}
|
|
32
|
+
: undefined;
|
|
23
33
|
return (jsx("button", { type: "button", "aria-disabled": disabled, disabled: disabled, className: cx(calendarClasses.button, {
|
|
24
34
|
[calendarClasses.buttonActive]: active,
|
|
25
35
|
[calendarClasses.buttonInRange]: inRange,
|
|
@@ -32,21 +32,29 @@ function CalendarWeeks(props) {
|
|
|
32
32
|
const date = setDate(setMonth(referenceDate, month), dateNum);
|
|
33
33
|
dates.push(date);
|
|
34
34
|
});
|
|
35
|
-
const disabled = (
|
|
35
|
+
const disabled = (isYearDisabled === null || isYearDisabled === void 0 ? void 0 : isYearDisabled(dates[0])) ||
|
|
36
|
+
(isMonthDisabled === null || isMonthDisabled === void 0 ? void 0 : isMonthDisabled(dates[0])) ||
|
|
37
|
+
(isWeekDisabled === null || isWeekDisabled === void 0 ? void 0 : isWeekDisabled(dates[0])) ||
|
|
38
|
+
false;
|
|
36
39
|
const inactive = !disabled && (weekStartInPrevMonth || weekStartInNextMonth);
|
|
37
40
|
const active = !disabled && !inactive && value && isWeekIncluded(dates[0], value);
|
|
38
41
|
const inRange = !disabled && !inactive && isWeekInRange && isWeekInRange(dates[0]);
|
|
39
|
-
const onMouseEnter = onWeekHover
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
42
|
+
const onMouseEnter = onWeekHover
|
|
43
|
+
? () => {
|
|
44
|
+
onWeekHover(dates[0]);
|
|
45
|
+
}
|
|
46
|
+
: undefined;
|
|
47
|
+
const onClick = onClickProp
|
|
48
|
+
? () => {
|
|
49
|
+
onClickProp(dates[0]);
|
|
50
|
+
}
|
|
51
|
+
: undefined;
|
|
45
52
|
return (jsx("button", { type: "button", className: cx(calendarClasses.button, calendarClasses.row, {
|
|
46
53
|
[calendarClasses.buttonActive]: active,
|
|
47
54
|
[calendarClasses.buttonInRange]: inRange,
|
|
48
55
|
[calendarClasses.buttonDisabled]: disabled,
|
|
49
|
-
}), disabled: disabled, "aria-disabled": disabled, onClick: onClick, onMouseEnter: onMouseEnter, children: week.map((dateNum, dateIndex) => (jsx(CalendarCell, { today: isSameDate(dates[dateIndex], getNow()), disabled: disabled ||
|
|
56
|
+
}), disabled: disabled, "aria-disabled": disabled, onClick: onClick, onMouseEnter: onMouseEnter, children: week.map((dateNum, dateIndex) => (jsx(CalendarCell, { today: isSameDate(dates[dateIndex], getNow()), disabled: disabled ||
|
|
57
|
+
!isInMonth(dates[dateIndex], getMonth(referenceDate)), active: active, children: dateNum }, `${getMonth(dates[dateIndex])}/${getDate(dates[dateIndex])}`))) }, `CALENDAR_WEEKS/WEEK_OF/${index}`));
|
|
50
58
|
})] }));
|
|
51
59
|
}
|
|
52
60
|
|
|
@@ -10,7 +10,7 @@ import cx from 'clsx';
|
|
|
10
10
|
* You may use it to compose your own calendar.
|
|
11
11
|
*/
|
|
12
12
|
function CalendarYears(props) {
|
|
13
|
-
const { getNow, getYear, isYearIncluded, setYear
|
|
13
|
+
const { getNow, getYear, isYearIncluded, setYear } = useCalendarContext();
|
|
14
14
|
const { className, isYearDisabled, isYearInRange, onClick: onClickProp, onYearHover, referenceDate, value, ...rest } = props;
|
|
15
15
|
const [start] = useMemo(() => getCalendarYearRange(getYear(referenceDate)), [getYear, referenceDate]);
|
|
16
16
|
return (jsx("div", { className: cx(calendarClasses.board, className), ...rest, children: jsx("div", { className: calendarClasses.twelveGrid, children: calendarYearsBase.map((base) => {
|
|
@@ -18,10 +18,21 @@ function CalendarYears(props) {
|
|
|
18
18
|
const yearDateType = setYear(getNow(), thisYear);
|
|
19
19
|
const disabled = isYearDisabled && isYearDisabled(yearDateType);
|
|
20
20
|
const inactive = !disabled && (base === 0 || base === 11);
|
|
21
|
-
const active = !disabled &&
|
|
21
|
+
const active = !disabled &&
|
|
22
|
+
!inactive &&
|
|
23
|
+
value &&
|
|
24
|
+
isYearIncluded(yearDateType, value);
|
|
22
25
|
const inRange = isYearInRange && isYearInRange(yearDateType);
|
|
23
|
-
const onClick = onClickProp
|
|
24
|
-
|
|
26
|
+
const onClick = onClickProp
|
|
27
|
+
? () => {
|
|
28
|
+
onClickProp(yearDateType);
|
|
29
|
+
}
|
|
30
|
+
: undefined;
|
|
31
|
+
const onMouseEnter = onYearHover
|
|
32
|
+
? () => {
|
|
33
|
+
onYearHover(yearDateType);
|
|
34
|
+
}
|
|
35
|
+
: undefined;
|
|
25
36
|
return (jsx("button", { type: "button", "aria-disabled": disabled, disabled: disabled, className: cx(calendarClasses.button, {
|
|
26
37
|
[calendarClasses.buttonActive]: active,
|
|
27
38
|
[calendarClasses.buttonInRange]: inRange,
|
package/Calendar/index.d.ts
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
export { CalendarControlModifier, UseCalendarControlModifiersResult, useCalendarControlModifiers, } from './useCalendarControlModifiers';
|
|
2
|
-
export { useCalendarModeStack
|
|
3
|
-
export { useCalendarControls
|
|
2
|
+
export { useCalendarModeStack } from './useCalendarModeStack';
|
|
3
|
+
export { useCalendarControls } from './useCalendarControls';
|
|
4
4
|
export { CalendarConfigs, CalendarConfigProviderProps, CalendarContext, useCalendarContext, default as CalendarConfigProvider, } from './CalendarContext';
|
|
5
|
-
export { CalendarYearsProps, default as CalendarYears
|
|
6
|
-
export { CalendarWeeksProps, default as CalendarWeeks
|
|
5
|
+
export { CalendarYearsProps, default as CalendarYears } from './CalendarYears';
|
|
6
|
+
export { CalendarWeeksProps, default as CalendarWeeks } from './CalendarWeeks';
|
|
7
7
|
export { CalendarMonthsProps, default as CalendarMonths, } from './CalendarMonths';
|
|
8
|
-
export { CalendarDaysProps, default as CalendarDays
|
|
8
|
+
export { CalendarDaysProps, default as CalendarDays } from './CalendarDays';
|
|
9
9
|
export { CalendarDayOfWeekProps, default as CalendarDayOfWeek, } from './CalendarDayOfWeek';
|
|
10
10
|
export { CalendarControlsProps, default as CalendarControls, } from './CalendarControls';
|
|
11
|
-
export { CalendarCellProps, default as CalendarCell
|
|
12
|
-
export { CalendarProps, default
|
|
11
|
+
export { CalendarCellProps, default as CalendarCell } from './CalendarCell';
|
|
12
|
+
export { CalendarProps, default } from './Calendar';
|
|
@@ -3,24 +3,15 @@ import { useMemo } from 'react';
|
|
|
3
3
|
import { useCalendarContext } from './CalendarContext.js';
|
|
4
4
|
|
|
5
5
|
function useCalendarControlModifiers() {
|
|
6
|
-
const { addYear, addMonth
|
|
6
|
+
const { addYear, addMonth } = useCalendarContext();
|
|
7
7
|
return useMemo(() => ({
|
|
8
8
|
year: [
|
|
9
9
|
(date) => addYear(date, -calendarYearModuler),
|
|
10
10
|
(date) => addYear(date, calendarYearModuler),
|
|
11
11
|
],
|
|
12
|
-
month: [
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
],
|
|
16
|
-
week: [
|
|
17
|
-
(date) => addMonth(date, -1),
|
|
18
|
-
(date) => addMonth(date, 1),
|
|
19
|
-
],
|
|
20
|
-
day: [
|
|
21
|
-
(date) => addMonth(date, -1),
|
|
22
|
-
(date) => addMonth(date, 1),
|
|
23
|
-
],
|
|
12
|
+
month: [(date) => addYear(date, -1), (date) => addYear(date, 1)],
|
|
13
|
+
week: [(date) => addMonth(date, -1), (date) => addMonth(date, 1)],
|
|
14
|
+
day: [(date) => addMonth(date, -1), (date) => addMonth(date, 1)],
|
|
24
15
|
}), [addYear, addMonth]);
|
|
25
16
|
}
|
|
26
17
|
|
|
@@ -7,7 +7,7 @@ function useCalendarControls(referenceDateProp, mode) {
|
|
|
7
7
|
useEffect(() => {
|
|
8
8
|
setReferenceDate(referenceDateProp);
|
|
9
9
|
}, [referenceDateProp]);
|
|
10
|
-
const { currentMode, pushModeStack, popModeStack
|
|
10
|
+
const { currentMode, pushModeStack, popModeStack } = useCalendarModeStack(mode || 'day');
|
|
11
11
|
const modifierGroup = useCalendarControlModifiers();
|
|
12
12
|
const onPrev = () => {
|
|
13
13
|
const [handleMinus] = modifierGroup[currentMode];
|
|
@@ -4,7 +4,7 @@ function useCalendarModeStack(mode) {
|
|
|
4
4
|
const [modeStack, setModeStack] = useState([mode]);
|
|
5
5
|
const [currentMode] = modeStack;
|
|
6
6
|
const pushModeStack = (newMode) => setModeStack((prev) => [newMode, ...prev]);
|
|
7
|
-
const popModeStack = () => setModeStack((prev) =>
|
|
7
|
+
const popModeStack = () => setModeStack((prev) => prev.length > 1 ? prev.slice(1, prev.length) : prev);
|
|
8
8
|
return {
|
|
9
9
|
currentMode,
|
|
10
10
|
pushModeStack,
|
package/Card/Card.d.ts
CHANGED
package/Card/Card.js
CHANGED
|
@@ -9,11 +9,11 @@ import cx from 'clsx';
|
|
|
9
9
|
*/
|
|
10
10
|
const Card = forwardRef(function Card(props, ref) {
|
|
11
11
|
const { actions, className, contentProps, cover, description, descriptionProps, metaProps, subtitle, subtitleProps, title, titleProps, ...rest } = props;
|
|
12
|
-
const { variant = 'h3'
|
|
13
|
-
const titleTypography =
|
|
14
|
-
const subtitleTypography =
|
|
15
|
-
const contentHeader =
|
|
16
|
-
const descriptionTypography =
|
|
12
|
+
const { variant = 'h3' } = titleProps || {};
|
|
13
|
+
const titleTypography = title ? (jsx(Typography, { variant: variant, ...titleProps, children: title })) : null;
|
|
14
|
+
const subtitleTypography = subtitle ? (jsx(Typography, { ...subtitleProps, children: subtitle })) : null;
|
|
15
|
+
const contentHeader = titleTypography || subtitleTypography ? (jsxs("div", { className: cardClasses.metaContentsHeader, children: [titleTypography, subtitleTypography] })) : null;
|
|
16
|
+
const descriptionTypography = description ? (jsx(Typography, { ...descriptionProps, children: description })) : null;
|
|
17
17
|
return (jsxs("div", { ref: ref, className: cx(cardClasses.host, className), ...rest, children: [cover, jsxs("div", { className: cardClasses.meta, ...metaProps, children: [jsxs("div", { className: cardClasses.metaContents, ...contentProps, children: [contentHeader, descriptionTypography] }), actions] })] }));
|
|
18
18
|
});
|
|
19
19
|
var Card$1 = Card;
|
package/Card/CardActions.js
CHANGED
|
@@ -9,7 +9,7 @@ import cx from 'clsx';
|
|
|
9
9
|
*/
|
|
10
10
|
const CardActions = forwardRef(function CardActions(props, ref) {
|
|
11
11
|
const { cancelText, cancelButtonProps, className, confirmText, confirmButtonProps, hideCancelButton, hideConfirmButton, loading, onCancel, onConfirm, otherActions, ...rest } = props;
|
|
12
|
-
return (jsxs("div", { ref: ref, className: cx(cardActionsClasses.host, className), ...rest, children: [otherActions ||
|
|
12
|
+
return (jsxs("div", { ref: ref, className: cx(cardActionsClasses.host, className), ...rest, children: [otherActions || jsx("div", {}), jsx(ConfirmActions, { cancelText: cancelText, confirmText: confirmText, cancelButtonProps: cancelButtonProps, confirmButtonProps: confirmButtonProps, hideCancelButton: hideCancelButton || !cancelText, hideConfirmButton: hideConfirmButton || !confirmText, loading: loading })] }));
|
|
13
13
|
});
|
|
14
14
|
var CardActions$1 = CardActions;
|
|
15
15
|
|
package/Card/index.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { CardActionsProps, default as CardActions
|
|
2
|
-
export { CardProps, default
|
|
1
|
+
export { CardActionsProps, default as CardActions } from './CardActions';
|
|
2
|
+
export { CardProps, default } from './Card';
|
package/Checkbox/CheckAll.js
CHANGED
|
@@ -11,7 +11,7 @@ import cx from 'clsx';
|
|
|
11
11
|
const CheckAll = forwardRef(function CheckAll(props, ref) {
|
|
12
12
|
const { children, className, label, ...rest } = props;
|
|
13
13
|
const checkboxGroup = children && Children.only(children);
|
|
14
|
-
const { disabled, name, onChange, options, size, value
|
|
14
|
+
const { disabled, name, onChange, options, size, value } = (checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.props) || {};
|
|
15
15
|
const enabledOptions = useMemo(() => options === null || options === void 0 ? void 0 : options.filter((option) => !option.disabled), [options]);
|
|
16
16
|
let allChecked = false;
|
|
17
17
|
let indeterminate = false;
|
package/Checkbox/Checkbox.js
CHANGED
|
@@ -12,8 +12,8 @@ import cx from 'clsx';
|
|
|
12
12
|
* The react component for `mezzanine` checkbox.
|
|
13
13
|
*/
|
|
14
14
|
const Checkbox = forwardRef(function Checkbox(props, ref) {
|
|
15
|
-
const { size: globalSize
|
|
16
|
-
const { disabled: disabledFromFormControl, severity
|
|
15
|
+
const { size: globalSize } = useContext(MezzanineConfig);
|
|
16
|
+
const { disabled: disabledFromFormControl, severity } = useContext(FormControlContext) || {};
|
|
17
17
|
const checkboxGroup = useContext(CheckboxGroupContext);
|
|
18
18
|
const { disabled: disabledFromGroup, name: nameFromGroup, size: sizeFromGroup, } = checkboxGroup || {};
|
|
19
19
|
const { checked: checkedProp, children, defaultChecked, disabled = (disabledFromGroup !== null && disabledFromGroup !== void 0 ? disabledFromGroup : disabledFromFormControl) || false, error = severity === 'error' || false, indeterminate: indeterminateProp = false, onChange: onChangeProp, size = sizeFromGroup || globalSize, value, inputProps, ...rest } = props;
|
|
@@ -26,10 +26,10 @@ const Checkbox = forwardRef(function Checkbox(props, ref) {
|
|
|
26
26
|
value,
|
|
27
27
|
});
|
|
28
28
|
const indeterminate = !checked && indeterminateProp;
|
|
29
|
-
return (jsx(InputCheck, { ...rest, ref: ref, control:
|
|
29
|
+
return (jsx(InputCheck, { ...rest, ref: ref, control: jsx("span", { className: cx(checkboxClasses.host, {
|
|
30
30
|
[checkboxClasses.checked]: checked,
|
|
31
31
|
[checkboxClasses.indeterminate]: indeterminate,
|
|
32
|
-
}), children: jsx("input", { ...restInputProps, "aria-checked": indeterminate ? 'mixed' : checked, "aria-disabled": disabled, checked: checked, disabled: disabled, id: inputId, onChange: onChange, name: name, type: "checkbox", value: value }) })
|
|
32
|
+
}), children: jsx("input", { ...restInputProps, "aria-checked": indeterminate ? 'mixed' : checked, "aria-disabled": disabled, checked: checked, disabled: disabled, id: inputId, onChange: onChange, name: name, type: "checkbox", value: value }) }), disabled: disabled, error: error, htmlFor: inputId, size: size, children: children }));
|
|
33
33
|
});
|
|
34
34
|
var Checkbox$1 = Checkbox;
|
|
35
35
|
|
|
@@ -20,7 +20,9 @@ const CheckboxGroup = forwardRef(function CheckboxGroup(props, ref) {
|
|
|
20
20
|
name,
|
|
21
21
|
onChange(event) {
|
|
22
22
|
const { checked, value: targetValue } = event.target;
|
|
23
|
-
const newValue = checked
|
|
23
|
+
const newValue = checked
|
|
24
|
+
? [...value, targetValue]
|
|
25
|
+
: value.filter((v) => v !== targetValue);
|
|
24
26
|
setValue(newValue);
|
|
25
27
|
if (onChange) {
|
|
26
28
|
onChange(newValue, event);
|
package/Checkbox/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
export type { CheckboxSize, CheckboxGroupOrientation, CheckboxGroupOption, } from '@mezzanine-ui/core/checkbox';
|
|
2
|
-
export { CheckboxProps, default
|
|
3
|
-
export { CheckboxGroupProps, default as CheckboxGroup
|
|
4
|
-
export { CheckAllProps, default as CheckAll
|
|
2
|
+
export { CheckboxProps, default } from './Checkbox';
|
|
3
|
+
export { CheckboxGroupProps, default as CheckboxGroup } from './CheckboxGroup';
|
|
4
|
+
export { CheckAllProps, default as CheckAll } from './CheckAll';
|
|
@@ -8,7 +8,7 @@ import ButtonGroup from '../Button/ButtonGroup.js';
|
|
|
8
8
|
*/
|
|
9
9
|
const ConfirmActions = forwardRef(function ConfirmActions(props, ref) {
|
|
10
10
|
const { cancelButtonProps, cancelText, confirmButtonProps, confirmText, hideCancelButton, hideConfirmButton, loading, onCancel, onConfirm, ...rest } = props;
|
|
11
|
-
const { disabled: cancelButtonDisabled = loading
|
|
11
|
+
const { disabled: cancelButtonDisabled = loading } = cancelButtonProps || {};
|
|
12
12
|
return (jsxs(ButtonGroup, { ...rest, ref: ref, children: [!hideCancelButton && (jsx(Button, { variant: "outlined", ...cancelButtonProps, disabled: cancelButtonDisabled, onClick: onCancel, children: cancelText })), !hideConfirmButton && (jsx(Button, { variant: "contained", ...confirmButtonProps, loading: loading, onClick: onConfirm, children: confirmText }))] }));
|
|
13
13
|
});
|
|
14
14
|
var ConfirmActions$1 = ConfirmActions;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export { ConfirmActionsProps, default
|
|
1
|
+
export { ConfirmActionsProps, default } from './ConfirmActions';
|
package/DatePicker/DatePicker.js
CHANGED
|
@@ -17,14 +17,10 @@ import { FormControlContext } from '../Form/FormControlContext.js';
|
|
|
17
17
|
*/
|
|
18
18
|
const DatePicker = forwardRef(function DatePicker(props, ref) {
|
|
19
19
|
const { disabled: disabledFromFormControl, fullWidth: fullWidthFromFormControl, required: requiredFromFormControl, severity, } = useContext(FormControlContext) || {};
|
|
20
|
-
const { defaultDateFormat, getNow
|
|
20
|
+
const { defaultDateFormat, getNow } = useCalendarContext();
|
|
21
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
|
-
const formats = useMemo(() => [
|
|
24
|
-
format,
|
|
25
|
-
defaultDateFormat,
|
|
26
|
-
getDefaultModeFormat(mode),
|
|
27
|
-
], [defaultDateFormat, format, mode]);
|
|
23
|
+
const formats = useMemo(() => [format, defaultDateFormat, getDefaultModeFormat(mode)], [defaultDateFormat, format, mode]);
|
|
28
24
|
/** Calender display control */
|
|
29
25
|
const [open, setOpen] = useState(false);
|
|
30
26
|
const preventOpen = readOnly;
|
|
@@ -127,7 +123,7 @@ const DatePicker = forwardRef(function DatePicker(props, ref) {
|
|
|
127
123
|
}
|
|
128
124
|
onCalendarToggle(!open);
|
|
129
125
|
};
|
|
130
|
-
const suffixActionIcon =
|
|
126
|
+
const suffixActionIcon = jsx(Icon, { icon: CalendarIcon, onClick: onIconClick });
|
|
131
127
|
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
128
|
});
|
|
133
129
|
var DatePicker$1 = DatePicker;
|
|
@@ -25,7 +25,9 @@ const DatePickerCalendar = forwardRef(function DatePickerCalendar(props, ref) {
|
|
|
25
25
|
}
|
|
26
26
|
if (currentMode === 'month') {
|
|
27
27
|
return (target) => {
|
|
28
|
-
const result = currentMode === mode
|
|
28
|
+
const result = currentMode === mode
|
|
29
|
+
? target
|
|
30
|
+
: setMonth(referenceDate, getMonth(target));
|
|
29
31
|
updateReferenceDate(result);
|
|
30
32
|
popModeStack();
|
|
31
33
|
if (currentMode === mode && onChangeProp) {
|
|
@@ -35,7 +37,9 @@ const DatePickerCalendar = forwardRef(function DatePickerCalendar(props, ref) {
|
|
|
35
37
|
}
|
|
36
38
|
if (currentMode === 'year') {
|
|
37
39
|
return (target) => {
|
|
38
|
-
const result = currentMode === mode
|
|
40
|
+
const result = currentMode === mode
|
|
41
|
+
? target
|
|
42
|
+
: setYear(referenceDate, getYear(target));
|
|
39
43
|
updateReferenceDate(result);
|
|
40
44
|
popModeStack();
|
|
41
45
|
if (currentMode === mode && onChangeProp) {
|
package/DatePicker/index.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export { DatePickerCalendarProps, default as DatePickerCalendar, } from './DatePickerCalendar';
|
|
2
|
-
export { DatePickerProps, default
|
|
2
|
+
export { DatePickerProps, default } from './DatePicker';
|
|
@@ -17,17 +17,14 @@ import { FormControlContext } from '../Form/FormControlContext.js';
|
|
|
17
17
|
*/
|
|
18
18
|
const DateRangePicker = forwardRef(function DateRangePicker(props, ref) {
|
|
19
19
|
const { disabled: disabledFromFormControl, fullWidth: fullWidthFromFormControl, required: requiredFromFormControl, severity, } = useContext(FormControlContext) || {};
|
|
20
|
-
const { defaultDateFormat, getNow, isBetween
|
|
20
|
+
const { defaultDateFormat, getNow, isBetween } = useCalendarContext();
|
|
21
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
|
-
const formats = useMemo(() => [
|
|
25
|
-
format,
|
|
26
|
-
defaultDateFormat,
|
|
27
|
-
getDefaultModeFormat(mode),
|
|
28
|
-
], [defaultDateFormat, format, mode]);
|
|
24
|
+
const formats = useMemo(() => [format, defaultDateFormat, getDefaultModeFormat(mode)], [defaultDateFormat, format, mode]);
|
|
29
25
|
function isBetweenRange(valueToCheck, t1, t2, granularity) {
|
|
30
|
-
return isBetween(valueToCheck, t1, t2, granularity) ||
|
|
26
|
+
return (isBetween(valueToCheck, t1, t2, granularity) ||
|
|
27
|
+
isBetween(valueToCheck, t2, t1, granularity));
|
|
31
28
|
}
|
|
32
29
|
/** Using internal reference date */
|
|
33
30
|
const [referenceDate, updateReferenceDate] = useState(referenceDateProp || (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue[0]) || getNow());
|
|
@@ -101,9 +98,9 @@ const DateRangePicker = forwardRef(function DateRangePicker(props, ref) {
|
|
|
101
98
|
/** Calendar cell in range checker */
|
|
102
99
|
const getIsInRangeHandler = (granularity) => {
|
|
103
100
|
const [anchor1, anchor2] = calendarValue || [];
|
|
104
|
-
return
|
|
101
|
+
return anchor1 && anchor2
|
|
105
102
|
? (date) => isBetweenRange(date, anchor1, anchor2, granularity)
|
|
106
|
-
: undefined
|
|
103
|
+
: undefined;
|
|
107
104
|
};
|
|
108
105
|
/** Popper settings */
|
|
109
106
|
const anchorRef = useRef(null);
|
|
@@ -182,7 +179,7 @@ const DateRangePicker = forwardRef(function DateRangePicker(props, ref) {
|
|
|
182
179
|
}
|
|
183
180
|
onCalendarToggle(!open);
|
|
184
181
|
};
|
|
185
|
-
const suffixActionIcon =
|
|
182
|
+
const suffixActionIcon = jsx(Icon, { icon: CalendarIcon, onClick: onIconClick });
|
|
186
183
|
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 })] }));
|
|
187
184
|
});
|
|
188
185
|
var DateRangePicker$1 = DateRangePicker;
|