@mezzanine-ui/react 0.14.4 → 0.14.6

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/Select/Select.js

@@ -44,7 +44,6 @@ const Select = forwardRef(function Select(props, ref) {
     });
     const nodeRef = useRef(null);
     const controlRef = useRef(null);
-    const popperRef = useRef(null);
     const composedRef = useComposeRefs([ref, controlRef]);
     function getPlaceholder() {
         if (typeof renderValue === 'function') {
@@ -100,6 +99,7 @@ const Select = forwardRef(function Select(props, ref) {
     };
     /** menu onScroll listener */
     const onMenuScrollCallback = useCallback(async (evt) => {
+        evt.stopPropagation();
         if (onMenuScroll) {
             const target = evt.target;
             const maxScrollTop = target.scrollHeight - target.getBoundingClientRect().height;
@@ -121,7 +121,7 @@ const Select = forwardRef(function Select(props, ref) {
         onChange,
         value,
     }), [onChange, value]);
-    return (jsx(SelectControlContext.Provider, { value: context, children: jsxs("div", { ref: nodeRef, className: cx(selectClasses.host, fullWidth && selectClasses.hostFullWidth), children: [jsx(SelectTrigger, { ref: composedRef, active: open, className: className, clearable: clearable, disabled: disabled, error: error, fullWidth: fullWidth, inputRef: inputRef, mode: mode, onTagClose: onChange, onClear: onClear, onClick: onClickTextField, onKeyDown: onKeyDownTextField, prefix: prefix, readOnly: true, renderValue: renderValue, required: required, inputProps: resolvedInputProps, size: size, suffixActionIcon: suffixActionIcon, value: value }), jsx(InputTriggerPopper, { ref: popperRef, anchor: controlRef, className: selectClasses.popper, disablePortal: disablePortal, open: open, options: popperOptions, sameWidth: true, children: jsx(Menu, { id: MENU_ID, "aria-activedescendant": Array.isArray(value) ? (_b = (_a = value === null || value === void 0 ? void 0 : value[0]) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : '' : value === null || value === void 0 ? void 0 : value.id, itemsInView: itemsInView, maxHeight: menuMaxHeight, onScroll: onMenuScrollCallback, role: menuRole, size: menuSize, style: { border: 0 }, children: children }) })] }) }));
+    return (jsx(SelectControlContext.Provider, { value: context, children: jsxs("div", { ref: nodeRef, className: cx(selectClasses.host, fullWidth && selectClasses.hostFullWidth), children: [jsx(SelectTrigger, { ref: composedRef, active: open, className: className, clearable: clearable, disabled: disabled, error: error, fullWidth: fullWidth, inputRef: inputRef, mode: mode, onTagClose: onChange, onClear: onClear, onClick: onClickTextField, onKeyDown: onKeyDownTextField, prefix: prefix, readOnly: true, renderValue: renderValue, required: required, inputProps: resolvedInputProps, size: size, suffixActionIcon: suffixActionIcon, value: value }), jsx(InputTriggerPopper, { anchor: controlRef, className: selectClasses.popper, disablePortal: disablePortal, open: open, options: popperOptions, sameWidth: true, children: jsx(Menu, { id: MENU_ID, "aria-activedescendant": Array.isArray(value) ? (_b = (_a = value === null || value === void 0 ? void 0 : value[0]) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : '' : value === null || value === void 0 ? void 0 : value.id, itemsInView: itemsInView, maxHeight: menuMaxHeight, onScroll: onMenuScrollCallback, role: menuRole, size: menuSize, style: { border: 0 }, children: children }) })] }) }));
 });
 var Select$1 = Select;
 

package/Typography/Typography.d.ts

@@ -1,5 +1,5 @@
 import { JSXElementConstructor } from 'react';
-import { TypographyAlign, TypographyColor, TypographyDisplay, TypographyVariant } from '@mezzanine-ui/core/typography';
+import { TypographyAlign, TypographyColor, TypographyDisplay, TypographyVariant, TypographyWeight } from '@mezzanine-ui/core/typography';
 import { ComponentOverridableForwardRefComponentPropsFactory } from '../utils/jsx-types';
 export type TypographyComponent = `h${1 | 2 | 3 | 4 | 5 | 6}` | 'p' | 'span' | 'label' | 'div' | 'caption' | 'a' | JSXElementConstructor<any>;
 interface TypographyPropsBase {
@@ -32,6 +32,10 @@ interface TypographyPropsBase {
      * @default 'body1'
      */
     variant?: TypographyVariant;
+    /**
+     * The css variable for customizing `font-weight`.
+     */
+    weight?: TypographyWeight;
 }
 export type TypographyProps<C extends TypographyComponent = 'p'> = ComponentOverridableForwardRefComponentPropsFactory<TypographyComponent, C, TypographyPropsBase>;
 /**

package/Typography/Typography.js

@@ -16,9 +16,14 @@ function getComponentFromVariant(variant) {
  * The react component for `mezzanine` typography.
  */
 const Typography = forwardRef(function Typography(props, ref) {
-    const { align, children, className, color, component, display, ellipsis = false, noWrap = false, variant = 'body1', style: styleProp, ...rest } = props;
+    const { align, children, className, color, component, display, ellipsis = false, noWrap = false, variant = 'body1', style: styleProp, weight, ...rest } = props;
     const Component = component || getComponentFromVariant(variant);
-    const cssVars = toTypographyCssVars({ align, color, display });
+    const cssVars = toTypographyCssVars({
+        align,
+        color,
+        display,
+        weight,
+    });
     const style = {
         ...cssVars,
         ...styleProp,
@@ -32,6 +37,7 @@ const Typography = forwardRef(function Typography(props, ref) {
             [typographyClasses.display]: display,
             [typographyClasses.ellipsis]: ellipsis,
             [typographyClasses.noWrap]: noWrap,
+            [typographyClasses.weight]: weight,
         }, className), style: style, title: title, children: children }));
 });
 var Typography$1 = Typography;

package/Typography/index.d.ts

@@ -1,6 +1,6 @@
 import { ElementRef, PropsWithoutRef, ReactElement, RefAttributes } from 'react';
 import { TypographyComponent, TypographyProps } from './Typography';
-export type { TypographyAlign, TypographyColor, TypographyDisplay, TypographyVariant, } from '@mezzanine-ui/core/typography';
+export type { TypographyAlign, TypographyColor, TypographyDisplay, TypographyVariant, TypographyWeight, } from '@mezzanine-ui/core/typography';
 export type { TypographyComponent, TypographyProps, };
 /**
  * @remark

package/_internal/InputTriggerPopper/InputTriggerPopper.js

@@ -25,7 +25,9 @@ const InputTriggerPopper = forwardRef(function InputTriggerPopper(props, ref) {
             reassignState.elements.popper.style.minWidth = `${state.elements.reference.getBoundingClientRect().width}px`;
         },
     };
-    return (jsx(Fade, { ...fadeProps, in: open, ref: ref, children: jsx(Popper, { ...restPopperProps, open: true, anchor: anchor, className: cx(inputTriggerPopperClasses.host, className), options: {
+    return (jsx(Fade, { ...fadeProps, in: open, ref: ref, children: jsx(Popper, { ...restPopperProps, open: true, anchor: anchor, className: cx(inputTriggerPopperClasses.host, className), 
+            /** Prevent event bubble (Because popper may use portal, then click away function would be buggy) */
+            onClick: (e) => e.stopPropagation(), onTouchStart: (e) => e.stopPropagation(), onTouchMove: (e) => e.stopPropagation(), onTouchEnd: (e) => e.stopPropagation(), options: {
                 placement: 'bottom-start',
                 ...restPopperOptions,
                 modifiers: [

package/package.json

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