@mezzanine-ui/react 0.14.5 → 0.14.7

package/DateRangePicker/DateRangePicker.js

@@ -63,6 +63,7 @@ const DateRangePicker = forwardRef(function DateRangePicker(props, ref) {
         value: valueProp,
         inputFromRef,
         inputToRef,
+        mode,
         onChange: onChangeProp,
     });
     useEffect(() => {

package/DateRangePicker/useDateRangePickerValue.d.ts

@@ -2,16 +2,21 @@ import { DateType } from '@mezzanine-ui/core/calendar';
 import { RangePickerPickingValue, RangePickerValue } from '@mezzanine-ui/core/picker';
 import { ChangeEventHandler, KeyboardEventHandler } from 'react';
 import { UseRangePickerValueProps } from '../Picker/useRangePickerValue';
+import { DateRangePickerCalendarProps } from './DateRangePickerCalendar';
 export interface UseDateRangePickerValueProps extends Omit<UseRangePickerValueProps, 'onChange'> {
+    mode?: DateRangePickerCalendarProps['mode'];
     onChange?: (value?: RangePickerValue) => void;
 }
-export declare function useDateRangePickerValue({ format, formats, inputFromRef, inputToRef, onChange: onChangeProp, value: valueProp, }: UseDateRangePickerValueProps): {
+export declare function useDateRangePickerValue({ format, formats, inputFromRef, inputToRef, mode, onChange: onChangeProp, value: valueProp, }: UseDateRangePickerValueProps): {
     calendarValue: string[] | undefined;
     inputFromValue: string;
     inputToValue: string;
     onCalendarChange: (val?: DateType) => void;
     onCalendarHover: import("react").Dispatch<import("react").SetStateAction<string | undefined>> | undefined;
-    onChange: (target?: RangePickerPickingValue | undefined) => RangePickerPickingValue | undefined;
+    onChange: (target?: RangePickerPickingValue | undefined, callback?: {
+        from: (date?: string | undefined) => string | undefined;
+        to: (date?: string | undefined) => string | undefined;
+    }) => RangePickerPickingValue | undefined;
     onClear: () => void;
     onFromBlur: import("react").FocusEventHandler<HTMLInputElement>;
     onFromKeyDown: KeyboardEventHandler<HTMLInputElement>;

package/DateRangePicker/useDateRangePickerValue.js

@@ -1,7 +1,9 @@
 import { useState, useMemo } from 'react';
 import { useRangePickerValue } from '../Picker/useRangePickerValue.js';
+import { useCalendarContext } from '../Calendar/CalendarContext.js';
 
-function useDateRangePickerValue({ format, formats, inputFromRef, inputToRef, onChange: onChangeProp, value: valueProp, }) {
+function useDateRangePickerValue({ format, formats, inputFromRef, inputToRef, mode, onChange: onChangeProp, value: valueProp, }) {
+    const { addDay, } = useCalendarContext();
     const { inputFromValue, inputToValue, onChange, onFromBlur, onFromKeyDown, onInputFromChange, onInputToChange, onToBlur, onToKeyDown, value, } = useRangePickerValue({
         format,
         formats,
@@ -25,7 +27,15 @@ function useDateRangePickerValue({ format, formats, inputFromRef, inputToRef, on
             ? [val, undefined]
             : [firstVal, val];
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        const [sortedFrom, sortedTo] = onChange(newValue);
+        const [sortedFrom, sortedTo] = onChange(newValue, {
+            from: (nextFrom) => nextFrom,
+            to: (nextTo) => {
+                if (!nextTo)
+                    return nextTo;
+                /** week mode should use the last day of the week (default is the first day) */
+                return mode === 'week' ? addDay(nextTo, 6) : nextTo;
+            },
+        });
         if (sortedFrom && sortedTo) {
             onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp([sortedFrom, sortedTo]);
         }

package/Picker/useRangePickerValue.d.ts

@@ -9,7 +9,10 @@ export interface UseRangePickerValueProps extends Pick<UsePickerValueProps, 'for
 export declare function useRangePickerValue({ format, formats, inputFromRef, inputToRef, value: valueProp, }: UseRangePickerValueProps): {
     inputFromValue: string;
     inputToValue: string;
-    onChange: (target?: RangePickerPickingValue) => RangePickerPickingValue | undefined;
+    onChange: (target?: RangePickerPickingValue, callback?: {
+        from: (date?: string) => string | undefined;
+        to: (date?: string) => string | undefined;
+    }) => RangePickerPickingValue | undefined;
     onFromBlur: import("react").FocusEventHandler<HTMLInputElement>;
     onFromKeyDown: KeyboardEventHandler<HTMLInputElement>;
     onInputFromChange: ChangeEventHandler<HTMLInputElement>;

package/Picker/useRangePickerValue.js

@@ -23,16 +23,21 @@ function useRangePickerValue({ format, formats, inputFromRef, inputToRef, value:
         inputRef: inputToRef,
     });
     const value = [from, to];
-    const onChange = (target) => {
+    const onChange = (target, callback = {
+        from: (date) => date,
+        to: (date) => date,
+    }) => {
         const [newFrom, newTo] = target || [];
         if (newFrom && newTo) {
             const sortedVal = sortValues([newFrom, newTo]);
-            onFromChange(sortedVal[0]);
-            onToChange(sortedVal[1]);
-            return sortedVal;
+            const resolvedFrom = callback.from(sortedVal[0]);
+            const resolvedTo = callback.to(sortedVal[1]);
+            onFromChange(resolvedFrom);
+            onToChange(resolvedTo);
+            return [resolvedFrom, resolvedTo];
         }
-        onFromChange(target === null || target === void 0 ? void 0 : target[0]);
-        onToChange(target === null || target === void 0 ? void 0 : target[1]);
+        onFromChange(callback.from(target === null || target === void 0 ? void 0 : target[0]));
+        onToChange(callback.to(target === null || target === void 0 ? void 0 : target[1]));
         return target;
     };
     const onOrderGuardedInputFromChange = (event) => {

package/Table/Table.d.ts

@@ -10,7 +10,7 @@ export interface TableBaseProps<T> extends Omit<NativeElementPropsWithoutKeyAndR
     /**
       * customized body row className
       */
-    bodyRowClassName?: string;
+    bodyRowClassName?: string | ((source: TableDataSource) => string);
     /**
       * Columns of table <br />
       * `column.render` allowed customizing the column body cell rendering. <br />

package/Table/Table.js

@@ -143,6 +143,15 @@ const Table = forwardRef(function Table(props, ref) {
         });
     }, [(_a = components === null || components === void 0 ? void 0 : components.body) === null || _a === void 0 ? void 0 : _a.cell]);
     const tableRefs = useComposeRefs([ref, scrollBody.target]);
+    const rowClassName = useMemo(() => {
+        if (bodyRowClassName) {
+            if (typeof bodyRowClassName === 'string') {
+                return (() => bodyRowClassName);
+            }
+            return ((source) => bodyRowClassName === null || bodyRowClassName === void 0 ? void 0 : bodyRowClassName(source));
+        }
+        return undefined;
+    }, [bodyRowClassName]);
     return (jsx(TableContext.Provider, { value: tableContextValue, children: jsx(TableDataContext.Provider, { value: tableDataContextValue, children: jsx(TableComponentContext.Provider, { value: tableComponentContextValue, children: jsx(DragDropContext, { onBeforeDragStart: onBeforeDragStart, onDragEnd: onDragEnd, children: jsx(Loading, { loading: loading, stretch: true, tip: loadingTip, overlayProps: {
                             className: tableClasses.loading,
                         }, children: jsx(Droppable, { droppableId: "mzn-table-dnd", isDropDisabled: !(draggableProp === null || draggableProp === void 0 ? void 0 : draggableProp.enabled), children: (provided) => (jsxs(Fragment, { children: [jsx("div", { ...provided.droppableProps, ref: composeRefs([scrollBody.ref, provided.innerRef]), className: cx(tableClasses.scrollContainer, scrollContainerClassName), onScroll: scrollBody.onScroll, style: tableContextValue.scroll ? {
@@ -152,7 +161,7 @@ const Table = forwardRef(function Table(props, ref) {
                                             '--table-scroll-y': tableContextValue.scroll.y
                                                 ? `${tableContextValue.scroll.y}px`
                                                 : 'unset',
-                                        } : undefined, children: jsxs("table", { ref: tableRefs, ...rest, className: cx(tableClasses.host, className), children: [isRefreshShow ? (jsx("tbody", { children: jsx("tr", { children: jsx("td", { "aria-label": "Refresh", children: jsx(TableRefresh, { onClick: refreshProp.onClick }) }) }) })) : null, jsx(TableHeader, { className: headerClassName }), jsx(TableBody, { ref: bodyRef, className: bodyClassName, rowClassName: bodyRowClassName }), jsx("tbody", { children: provided.placeholder })] }) }), paginationProp ? (jsx(TablePagination, { bodyRef: bodyRef })) : null, jsx("div", { ref: scrollElement.trackRef, "aria-label": "Scroll Track", style: scrollElement.trackStyle, onMouseDown: scrollElement.onMouseDown, onMouseUp: scrollElement.onMouseUp, role: "button", tabIndex: -1, className: "mzn-table-scroll-bar-track", children: jsx("div", { style: {
+                                        } : undefined, children: jsxs("table", { ref: tableRefs, ...rest, className: cx(tableClasses.host, className), children: [isRefreshShow ? (jsx("tbody", { children: jsx("tr", { children: jsx("td", { "aria-label": "Refresh", children: jsx(TableRefresh, { onClick: refreshProp.onClick }) }) }) })) : null, jsx(TableHeader, { className: headerClassName }), jsx(TableBody, { ref: bodyRef, className: bodyClassName, rowClassName: rowClassName }), jsx("tbody", { children: provided.placeholder })] }) }), paginationProp ? (jsx(TablePagination, { bodyRef: bodyRef })) : null, jsx("div", { ref: scrollElement.trackRef, "aria-label": "Scroll Track", style: scrollElement.trackStyle, onMouseDown: scrollElement.onMouseDown, onMouseUp: scrollElement.onMouseUp, role: "button", tabIndex: -1, className: "mzn-table-scroll-bar-track", children: jsx("div", { style: {
                                                 width: '100%',
                                                 height: '100%',
                                                 position: 'relative',

package/Table/TableBody.d.ts

@@ -1,10 +1,11 @@
 /// <reference types="react" />
+import { TableDataSource } from '@mezzanine-ui/core/table';
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
 export interface TableBodyProps extends NativeElementPropsWithoutKeyAndRef<'div'> {
     /**
      * customize row className
      */
-    rowClassName?: string;
+    rowClassName?: (source: TableDataSource) => string;
 }
 declare const TableBody: import("react").ForwardRefExoticComponent<TableBodyProps & import("react").RefAttributes<HTMLTableSectionElement>>;
 export default TableBody;

package/Table/TableBody.js

@@ -18,7 +18,7 @@ const TableBody = forwardRef(function TableBody(props, ref) {
     const currentStartCount = (paginationOptions === null || paginationOptions === void 0 ? void 0 : paginationOptions.pageSize) && currentPage ? ((paginationOptions.pageSize) * (currentPage - 1)) : 0;
     const currentEndCount = (paginationOptions === null || paginationOptions === void 0 ? void 0 : paginationOptions.pageSize) && currentPage && total ? (Math.min(((paginationOptions.pageSize) * currentPage), total)) : 0;
     const currentDataSource = pagination && !disableAutoSlicing ? (dataSource.slice(currentStartCount, currentEndCount)) : dataSource;
-    return (jsxs("tbody", { ...rest, ref: ref, className: cx(tableClasses.body, className), children: [currentDataSource.length ? currentDataSource.map((rowData, index) => (jsx(TableBodyRow, { className: rowClassName, rowData: rowData, rowIndex: index }, (rowData.key || rowData.id)))) : (jsx("tr", { children: jsx("td", { children: jsx(Empty, { ...restEmptyProps, className: cx(tableClasses.bodyEmpty, emptyComponentClassName), fullHeight: emptyComponentFullHeight, children: emptyComponentChildren }) }) })), (fetchMore === null || fetchMore === void 0 ? void 0 : fetchMore.isFetching) ? (jsx("tr", { className: tableClasses.bodyFetchMore, children: jsx("td", { "aria-label": "Loading", children: jsx(Loading, { loading: true }) }) })) : null] }));
+    return (jsxs("tbody", { ...rest, ref: ref, className: cx(tableClasses.body, className), children: [currentDataSource.length ? currentDataSource.map((rowData, index) => (jsx(TableBodyRow, { className: rowClassName === null || rowClassName === void 0 ? void 0 : rowClassName(rowData), rowData: rowData, rowIndex: index }, (rowData.key || rowData.id)))) : (jsx("tr", { children: jsx("td", { children: jsx(Empty, { ...restEmptyProps, className: cx(tableClasses.bodyEmpty, emptyComponentClassName), fullHeight: emptyComponentFullHeight, children: emptyComponentChildren }) }) })), (fetchMore === null || fetchMore === void 0 ? void 0 : fetchMore.isFetching) ? (jsx("tr", { className: tableClasses.bodyFetchMore, children: jsx("td", { "aria-label": "Loading", children: jsx(Loading, { loading: true }) }) })) : null] }));
 });
 var TableBody$1 = TableBody;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mezzanine-ui/react",
-  "version": "0.14.5",
+  "version": "0.14.7",
   "description": "React components for mezzanine-ui",
   "author": "Mezzanine",
   "repository": {
@@ -28,9 +28,9 @@
     "react-dom": "^18.2.0"
   },
   "dependencies": {
-    "@mezzanine-ui/core": "^0.14.5",
-    "@mezzanine-ui/icons": "^0.14.5",
-    "@mezzanine-ui/system": "^0.14.5",
+    "@mezzanine-ui/core": "^0.14.7",
+    "@mezzanine-ui/icons": "^0.14.7",
+    "@mezzanine-ui/system": "^0.14.7",
     "@popperjs/core": "^2.11.6",
     "@types/react-transition-group": "^4.4.8",
     "clsx": "^2.0.0",