@mezzanine-ui/react 0.10.5 → 0.11.0

package/Accordion/AccordionControlContext.d.ts

@@ -6,4 +6,4 @@ export interface AccordionControlContextValue {
     summaryId?: string;
     toggleExpanded(e: boolean): void;
 }
-export declare const AccordionControlContext: import("react").Context<AccordionControlContextValue>;
+export declare const AccordionControlContext: import("react").Context<AccordionControlContextValue | undefined>;

package/Accordion/AccordionSummary.d.ts

@@ -1,5 +1,4 @@
 import { ReactNode } from 'react';
-import { IconDefinition } from '@mezzanine-ui/icons';
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
 export interface AccordionSummaryProps extends NativeElementPropsWithoutKeyAndRef<'div'> {
     /**
@@ -7,9 +6,9 @@ export interface AccordionSummaryProps extends NativeElementPropsWithoutKeyAndRe
      */
     iconClassName?: string;
     /**
-     * custom prefix icon when `suffixActions` prop is given
+     * custom prefix icon element when `suffixActions` prop is given
      */
-    prefixIcon?: IconDefinition;
+    prefixIcon?: JSX.Element;
     /**
      * custom suffix actions
      */

package/Accordion/AccordionSummary.js

@@ -1,5 +1,5 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, useContext, useMemo } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef, useContext, useCallback, useMemo } from 'react';
 import { ChevronDownIcon } from '@mezzanine-ui/icons';
 import { accordionClasses } from '@mezzanine-ui/core/accordion';
 import { AccordionControlContext } from './AccordionControlContext.js';
@@ -9,12 +9,12 @@ import cx from 'clsx';
 const AccordionSummary = forwardRef(function AccordionSummary(props, ref) {
     const { className, children, iconClassName: iconClassNameProp, prefixIcon, suffixActions, ...rest } = props;
     const { detailsId, disabled, expanded, toggleExpanded, } = useContext(AccordionControlContext) || {};
-    const onToggle = (e) => {
+    const onToggle = useCallback((e) => {
         e.stopPropagation();
         if (typeof toggleExpanded === 'function' && !disabled) {
             toggleExpanded(!expanded);
         }
-    };
+    }, [disabled, expanded, toggleExpanded]);
     const onKeyDown = (e) => {
         switch (e.code) {
             case 'Enter':
@@ -34,13 +34,13 @@ const AccordionSummary = forwardRef(function AccordionSummary(props, ref) {
         }
         return result;
     }, [detailsId, expanded]);
-    const DefaultIcon = (iconProps) => {
+    const DefaultIcon = useCallback((iconProps) => {
         const { className: iconClassNames = '' } = iconProps;
         return (jsx(Icon, { color: disabled ? 'disabled' : 'primary', className: cx(accordionClasses.summaryIcon, {
                 [accordionClasses.summaryIconExpanded]: expanded,
                 [accordionClasses.summaryIconDisabled]: disabled,
             }, iconClassNames, iconClassNameProp), icon: ChevronDownIcon, onClick: onToggle, onMouseDown: (evt) => evt.preventDefault(), role: "button" }));
-    };
+    }, [disabled, expanded, iconClassNameProp, onToggle]);
     return (jsxs("div", { ...rest, ...ariaProps, ref: ref, className: cx(accordionClasses.summary, {
             [accordionClasses.summaryDisabled]: disabled,
         }, className), onClick: onToggle, onKeyDown: onKeyDown, role: "button", tabIndex: 0, children: [jsxs("div", { className: accordionClasses.summaryMainPart, children: [suffixActions ? (prefixIcon || (jsx(DefaultIcon, { className: accordionClasses.summaryMainPartPrefix }))) : null, children] }), suffixActions || (jsx(DefaultIcon, {}))] }));

package/AppBar/AppBar.d.ts

@@ -1,4 +1,4 @@
-import { ReactElement, NamedExoticComponent } from 'react';
+import { ReactElement, NamedExoticComponent, ForwardRefExoticComponent, RefAttributes } from 'react';
 import { AppBarOrientation } from '@mezzanine-ui/core/app-bar';
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
 import { AppBarBrandProps } from './AppBarBrand';
@@ -10,5 +10,5 @@ export interface AppBarProps extends NativeElementPropsWithoutKeyAndRef<'header'
     orientation?: AppBarOrientation;
     children?: AppBarChildren;
 }
-declare const AppBar: import("react").ForwardRefExoticComponent<AppBarProps & import("react").RefAttributes<HTMLElement>>;
+declare const AppBar: ForwardRefExoticComponent<AppBarProps & RefAttributes<HTMLElement>>;
 export default AppBar;

package/Button/Button.d.ts

@@ -6,6 +6,6 @@ export declare type ButtonProps<C extends ButtonComponent = 'button'> = Componen
  * The react component for `mezzanine` button.
  */
 declare const Button: import("react").ForwardRefExoticComponent<Omit<Omit<import("../utils/jsx-types").ComponentPropsWithoutKeyAndRef<"button">, keyof ButtonPropsBase> & ButtonPropsBase, "component"> & {
-    component?: ButtonComponent;
+    component?: ButtonComponent | undefined;
 } & import("react").RefAttributes<HTMLButtonElement>>;
 export default Button;

package/Button/IconButton.d.ts

@@ -16,6 +16,6 @@ declare const IconButton: import("react").ForwardRefExoticComponent<Omit<Omit<im
      */
     children?: ReactNode;
 }, "component"> & {
-    component?: ButtonComponent;
+    component?: ButtonComponent | undefined;
 } & import("react").RefAttributes<HTMLButtonElement>>;
 export default IconButton;

package/Calendar/CalendarContext.d.ts

@@ -16,7 +16,7 @@ export declare type CalendarConfigProviderProps = {
     methods: CalendarMethods;
     valueLocale?: string;
 };
-export declare const CalendarContext: import("react").Context<CalendarConfigs>;
+export declare const CalendarContext: import("react").Context<CalendarConfigs | undefined>;
 export declare function useCalendarContext(): CalendarConfigs;
 declare function CalendarConfigProvider(props: CalendarConfigProviderProps): JSX.Element;
 export default CalendarConfigProvider;

package/Checkbox/CheckboxGroupContext.d.ts

@@ -6,4 +6,4 @@ export interface CheckboxGroupContextValue extends CheckboxGroupControlContextVa
     name?: string;
     size?: CheckboxSize;
 }
-export declare const CheckboxGroupContext: import("react").Context<CheckboxGroupContextValue>;
+export declare const CheckboxGroupContext: import("react").Context<CheckboxGroupContextValue | undefined>;

package/DateRangePicker/useDateRangePickerValue.d.ts

@@ -6,12 +6,12 @@ export interface UseDateRangePickerValueProps extends Omit<UseRangePickerValuePr
     onChange?: (value?: RangePickerValue) => void;
 }
 export declare function useDateRangePickerValue({ format, formats, inputFromRef, inputToRef, onChange: onChangeProp, value: valueProp, }: UseDateRangePickerValueProps): {
-    calendarValue: string[];
+    calendarValue: string[] | undefined;
     inputFromValue: string;
     inputToValue: string;
     onCalendarChange: (val?: DateType) => void;
-    onCalendarHover: import("react").Dispatch<import("react").SetStateAction<string>>;
-    onChange: (target?: RangePickerPickingValue<string>) => RangePickerPickingValue<string>;
+    onCalendarHover: import("react").Dispatch<import("react").SetStateAction<string | undefined>> | undefined;
+    onChange: (target?: RangePickerPickingValue<string> | undefined) => RangePickerPickingValue<string> | undefined;
     onClear: () => void;
     onFromBlur: import("react").FocusEventHandler<HTMLInputElement>;
     onFromKeyDown: KeyboardEventHandler<HTMLInputElement>;

package/Form/FormControlContext.d.ts

@@ -6,4 +6,4 @@ export interface FormControl {
     required: boolean;
     severity?: Severity;
 }
-export declare const FormControlContext: import("react").Context<FormControl>;
+export declare const FormControlContext: import("react").Context<FormControl | undefined>;

package/Notifier/createNotifier.js

@@ -1,6 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import { createRef } from 'react';
-import { render, unmountComponentAtNode } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import NotifierManager from './NotifierManager.js';
 
 /**
@@ -10,22 +10,23 @@ import NotifierManager from './NotifierManager.js';
  */
 function createNotifier(props) {
     const { config: configProp, render: renderNotifier, setRoot, duration, maxCount, ...restNotifierProps } = props;
-    const root = typeof document === 'undefined' ? null : document.createElement('div');
+    const container = typeof document === 'undefined' ? null : document.createElement('div');
+    const root = container ? createRoot(container) : null;
     const controllerRef = createRef();
     let currentConfig = {
         duration,
         maxCount,
         ...configProp,
     };
-    if (setRoot && root) {
-        setRoot(root);
+    if (setRoot && container) {
+        setRoot(container);
     }
     return {
         add(notifier) {
             var _a, _b;
-            if (root === null)
+            if (container === null)
                 return 'NOT_SET';
-            document.body.appendChild(root);
+            document.body.appendChild(container);
             const key = (_a = notifier.key) !== null && _a !== void 0 ? _a : Date.now();
             const resolvedNotifier = {
                 ...restNotifierProps,
@@ -39,7 +40,7 @@ function createNotifier(props) {
                 controllerRef.current.add(resolvedNotifier);
             }
             else {
-                render((jsx(NotifierManager, { controllerRef: controllerRef, defaultNotifiers: [resolvedNotifier], maxCount: currentConfig.maxCount, render: renderNotifier })), root);
+                root === null || root === void 0 ? void 0 : root.render(jsx(NotifierManager, { controllerRef: controllerRef, defaultNotifiers: [resolvedNotifier], maxCount: currentConfig.maxCount, render: renderNotifier }));
             }
             return resolvedNotifier.key;
         },
@@ -49,11 +50,12 @@ function createNotifier(props) {
             }
         },
         destroy() {
-            if (root === null)
+            if (container === null)
                 return;
-            unmountComponentAtNode(root);
-            if (root.parentNode) {
-                root.parentNode.removeChild(root);
+            // when useEffect(() => () => { root.unmount() }, []), will be show "Rendered more hooks than during the previous render." issue.
+            root === null || root === void 0 ? void 0 : root.render(null);
+            if (container.parentNode) {
+                container.parentNode.removeChild(container);
             }
         },
         config(config) {

package/Picker/usePickerValue.d.ts

@@ -16,5 +16,5 @@ export declare function usePickerValue({ defaultValue, format, formats, inputRef
     onChange: (val?: DateType) => void;
     onInputChange: import("react").ChangeEventHandler<HTMLInputElement>;
     onKeyDown: KeyboardEventHandler<HTMLInputElement>;
-    value: string;
+    value: string | undefined;
 };

package/Radio/RadioGroupContext.d.ts

@@ -6,4 +6,4 @@ export interface RadioGroupContextValue extends RadioGroupControlContextValue {
     name?: string;
     size?: RadioSize;
 }
-export declare const RadioGroupContext: import("react").Context<RadioGroupContextValue>;
+export declare const RadioGroupContext: import("react").Context<RadioGroupContextValue | undefined>;

package/Select/SelectControlContext.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { SelectControl } from './typings';
-export declare const SelectControlContext: import("react").Context<SelectControl>;
+export declare const SelectControlContext: import("react").Context<SelectControl | undefined>;

package/Select/useSelectTriggerTags.js

@@ -9,7 +9,7 @@ function calcTakeCount({ tagsWidths, maxWidth, ellipsisTagWidth, setTakeCount, }
         const prevTotal = take(tagsWidths, count).reduce((prev, curr) => prev + curr, 0);
         const nowTotal = take(tagsWidths, count + 1).reduce((prev, curr) => prev + curr, 0);
         targetCount = count;
-        if (prevTotal < maxWidth && nowTotal > maxWidth) {
+        if (prevTotal <= maxWidth && nowTotal >= maxWidth && maxWidth > 0) {
             if (prevTotal + ellipsisTagWidth > maxWidth) {
                 targetCount -= 1;
             }

package/Table/TableContext.d.ts

@@ -34,13 +34,13 @@ export interface TableContextProps {
     fetchMore?: FetchMoreContext;
     pagination?: TablePagination;
 }
-export declare const TableContext: import("react").Context<TableContextProps>;
+export declare const TableContext: import("react").Context<TableContextProps | null>;
 export interface TableDataContextProps {
     columns: TableColumn<TableRecord<unknown>>[];
     dataSource: TableDataSource[];
 }
-export declare const TableDataContext: import("react").Context<TableDataContextProps>;
+export declare const TableDataContext: import("react").Context<TableDataContextProps | null>;
 export interface TableComponentContextProps {
     bodyCell?: any;
 }
-export declare const TableComponentContext: import("react").Context<TableComponentContextProps>;
+export declare const TableComponentContext: import("react").Context<TableComponentContextProps | null>;

package/Table/useTableFetchMore.d.ts

@@ -4,7 +4,7 @@ export interface UseTableFetchMore extends TableFetchMore {
     disabled?: boolean;
 }
 export declare function useTableFetchMore(props: UseTableFetchMore): {
-    readonly fetchMore: () => void;
+    readonly fetchMore: (() => void) | undefined;
     readonly isFetching: boolean;
     readonly isReachEnd: boolean;
 };

package/Table/useTableScroll.d.ts

@@ -1,272 +1,272 @@
-/// <reference types="react" />
+import { MouseEvent } from 'react';
 export default function useTableScroll(): readonly [{
-    ref: import("react").MutableRefObject<HTMLDivElement>;
+    ref: import("react").RefObject<HTMLDivElement>;
     onScroll: () => void;
 }, {
-    ref: import("react").MutableRefObject<HTMLDivElement>;
-    onMouseDown: ({ target, clientY }: any) => void;
+    ref: import("react").RefObject<HTMLDivElement>;
+    onMouseDown: ({ target, clientY }: MouseEvent<HTMLDivElement>) => void;
     onMouseUp: () => void;
     onMouseEnter: () => void;
     onMouseLeave: () => void;
     style: {
         height: string;
-        ref?: import("react").LegacyRef<HTMLDivElement>;
-        key?: import("react").Key;
-        defaultChecked?: boolean;
-        defaultValue?: string | number | readonly string[];
-        suppressContentEditableWarning?: boolean;
-        suppressHydrationWarning?: boolean;
-        accessKey?: string;
-        className?: string;
-        contentEditable?: (boolean | "true" | "false") | "inherit";
-        contextMenu?: string;
-        dir?: string;
-        draggable?: boolean | "true" | "false";
-        hidden?: boolean;
-        id?: string;
-        lang?: string;
-        placeholder?: string;
-        slot?: string;
-        spellCheck?: boolean | "true" | "false";
-        style?: import("react").CSSProperties;
-        tabIndex?: number;
-        title?: string;
-        translate?: "yes" | "no";
-        radioGroup?: string;
-        role?: import("react").AriaRole;
-        about?: string;
-        datatype?: string;
+        ref?: import("react").LegacyRef<HTMLDivElement> | undefined;
+        key?: import("react").Key | null | undefined;
+        defaultChecked?: boolean | undefined;
+        defaultValue?: string | number | readonly string[] | undefined;
+        suppressContentEditableWarning?: boolean | undefined;
+        suppressHydrationWarning?: boolean | undefined;
+        accessKey?: string | undefined;
+        className?: string | undefined;
+        contentEditable?: (boolean | "true" | "false") | "inherit" | undefined;
+        contextMenu?: string | undefined;
+        dir?: string | undefined;
+        draggable?: (boolean | "true" | "false") | undefined;
+        hidden?: boolean | undefined;
+        id?: string | undefined;
+        lang?: string | undefined;
+        placeholder?: string | undefined;
+        slot?: string | undefined;
+        spellCheck?: (boolean | "true" | "false") | undefined;
+        style?: import("react").CSSProperties | undefined;
+        tabIndex?: number | undefined;
+        title?: string | undefined;
+        translate?: "yes" | "no" | undefined;
+        radioGroup?: string | undefined;
+        role?: import("react").AriaRole | undefined;
+        about?: string | undefined;
+        datatype?: string | undefined;
         inlist?: any;
-        prefix?: string;
-        property?: string;
-        resource?: string;
-        typeof?: string;
-        vocab?: string;
-        autoCapitalize?: string;
-        autoCorrect?: string;
-        autoSave?: string;
-        color?: string;
-        itemProp?: string;
-        itemScope?: boolean;
-        itemType?: string;
-        itemID?: string;
-        itemRef?: string;
-        results?: number;
-        security?: string;
-        unselectable?: "on" | "off";
-        inputMode?: "none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | "decimal";
-        is?: string;
-        'aria-activedescendant'?: string;
-        'aria-atomic'?: boolean | "true" | "false";
-        'aria-autocomplete'?: "none" | "list" | "inline" | "both";
-        'aria-busy'?: boolean | "true" | "false";
-        'aria-checked'?: boolean | "true" | "false" | "mixed";
-        'aria-colcount'?: number;
-        'aria-colindex'?: number;
-        'aria-colspan'?: number;
-        'aria-controls'?: string;
-        'aria-current'?: boolean | "true" | "false" | "page" | "step" | "location" | "date" | "time";
-        'aria-describedby'?: string;
-        'aria-details'?: string;
-        'aria-disabled'?: boolean | "true" | "false";
-        'aria-dropeffect'?: "none" | "link" | "copy" | "execute" | "move" | "popup";
-        'aria-errormessage'?: string;
-        'aria-expanded'?: boolean | "true" | "false";
-        'aria-flowto'?: string;
-        'aria-grabbed'?: boolean | "true" | "false";
-        'aria-haspopup'?: boolean | "true" | "false" | "dialog" | "grid" | "listbox" | "menu" | "tree";
-        'aria-hidden'?: boolean | "true" | "false";
-        'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling";
-        'aria-keyshortcuts'?: string;
-        'aria-label'?: string;
-        'aria-labelledby'?: string;
-        'aria-level'?: number;
-        'aria-live'?: "off" | "assertive" | "polite";
-        'aria-modal'?: boolean | "true" | "false";
-        'aria-multiline'?: boolean | "true" | "false";
-        'aria-multiselectable'?: boolean | "true" | "false";
-        'aria-orientation'?: "horizontal" | "vertical";
-        'aria-owns'?: string;
-        'aria-placeholder'?: string;
-        'aria-posinset'?: number;
-        'aria-pressed'?: boolean | "true" | "false" | "mixed";
-        'aria-readonly'?: boolean | "true" | "false";
-        'aria-relevant'?: "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals";
-        'aria-required'?: boolean | "true" | "false";
-        'aria-roledescription'?: string;
-        'aria-rowcount'?: number;
-        'aria-rowindex'?: number;
-        'aria-rowspan'?: number;
-        'aria-selected'?: boolean | "true" | "false";
-        'aria-setsize'?: number;
-        'aria-sort'?: "none" | "ascending" | "descending" | "other";
-        'aria-valuemax'?: number;
-        'aria-valuemin'?: number;
-        'aria-valuenow'?: number;
-        'aria-valuetext'?: string;
+        prefix?: string | undefined;
+        property?: string | undefined;
+        resource?: string | undefined;
+        typeof?: string | undefined;
+        vocab?: string | undefined;
+        autoCapitalize?: string | undefined;
+        autoCorrect?: string | undefined;
+        autoSave?: string | undefined;
+        color?: string | undefined;
+        itemProp?: string | undefined;
+        itemScope?: boolean | undefined;
+        itemType?: string | undefined;
+        itemID?: string | undefined;
+        itemRef?: string | undefined;
+        results?: number | undefined;
+        security?: string | undefined;
+        unselectable?: "on" | "off" | undefined;
+        inputMode?: "none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+        is?: string | undefined;
+        'aria-activedescendant'?: string | undefined;
+        'aria-atomic'?: (boolean | "true" | "false") | undefined;
+        'aria-autocomplete'?: "none" | "list" | "inline" | "both" | undefined;
+        'aria-busy'?: (boolean | "true" | "false") | undefined;
+        'aria-checked'?: boolean | "true" | "false" | "mixed" | undefined;
+        'aria-colcount'?: number | undefined;
+        'aria-colindex'?: number | undefined;
+        'aria-colspan'?: number | undefined;
+        'aria-controls'?: string | undefined;
+        'aria-current'?: boolean | "true" | "false" | "page" | "step" | "location" | "date" | "time" | undefined;
+        'aria-describedby'?: string | undefined;
+        'aria-details'?: string | undefined;
+        'aria-disabled'?: (boolean | "true" | "false") | undefined;
+        'aria-dropeffect'?: "none" | "link" | "copy" | "execute" | "move" | "popup" | undefined;
+        'aria-errormessage'?: string | undefined;
+        'aria-expanded'?: (boolean | "true" | "false") | undefined;
+        'aria-flowto'?: string | undefined;
+        'aria-grabbed'?: (boolean | "true" | "false") | undefined;
+        'aria-haspopup'?: boolean | "true" | "false" | "dialog" | "grid" | "listbox" | "menu" | "tree" | undefined;
+        'aria-hidden'?: (boolean | "true" | "false") | undefined;
+        'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
+        'aria-keyshortcuts'?: string | undefined;
+        'aria-label'?: string | undefined;
+        'aria-labelledby'?: string | undefined;
+        'aria-level'?: number | undefined;
+        'aria-live'?: "off" | "assertive" | "polite" | undefined;
+        'aria-modal'?: (boolean | "true" | "false") | undefined;
+        'aria-multiline'?: (boolean | "true" | "false") | undefined;
+        'aria-multiselectable'?: (boolean | "true" | "false") | undefined;
+        'aria-orientation'?: "horizontal" | "vertical" | undefined;
+        'aria-owns'?: string | undefined;
+        'aria-placeholder'?: string | undefined;
+        'aria-posinset'?: number | undefined;
+        'aria-pressed'?: boolean | "true" | "false" | "mixed" | undefined;
+        'aria-readonly'?: (boolean | "true" | "false") | undefined;
+        'aria-relevant'?: "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
+        'aria-required'?: (boolean | "true" | "false") | undefined;
+        'aria-roledescription'?: string | undefined;
+        'aria-rowcount'?: number | undefined;
+        'aria-rowindex'?: number | undefined;
+        'aria-rowspan'?: number | undefined;
+        'aria-selected'?: (boolean | "true" | "false") | undefined;
+        'aria-setsize'?: number | undefined;
+        'aria-sort'?: "none" | "ascending" | "descending" | "other" | undefined;
+        'aria-valuemax'?: number | undefined;
+        'aria-valuemin'?: number | undefined;
+        'aria-valuenow'?: number | undefined;
+        'aria-valuetext'?: string | undefined;
         children?: import("react").ReactNode;
         dangerouslySetInnerHTML?: {
             __html: string;
-        };
-        onCopy?: import("react").ClipboardEventHandler<HTMLDivElement>;
-        onCopyCapture?: import("react").ClipboardEventHandler<HTMLDivElement>;
-        onCut?: import("react").ClipboardEventHandler<HTMLDivElement>;
-        onCutCapture?: import("react").ClipboardEventHandler<HTMLDivElement>;
-        onPaste?: import("react").ClipboardEventHandler<HTMLDivElement>;
-        onPasteCapture?: import("react").ClipboardEventHandler<HTMLDivElement>;
-        onCompositionEnd?: import("react").CompositionEventHandler<HTMLDivElement>;
-        onCompositionEndCapture?: import("react").CompositionEventHandler<HTMLDivElement>;
-        onCompositionStart?: import("react").CompositionEventHandler<HTMLDivElement>;
-        onCompositionStartCapture?: import("react").CompositionEventHandler<HTMLDivElement>;
-        onCompositionUpdate?: import("react").CompositionEventHandler<HTMLDivElement>;
-        onCompositionUpdateCapture?: import("react").CompositionEventHandler<HTMLDivElement>;
-        onFocus?: import("react").FocusEventHandler<HTMLDivElement>;
-        onFocusCapture?: import("react").FocusEventHandler<HTMLDivElement>;
-        onBlur?: import("react").FocusEventHandler<HTMLDivElement>;
-        onBlurCapture?: import("react").FocusEventHandler<HTMLDivElement>;
-        onChange?: import("react").FormEventHandler<HTMLDivElement>;
-        onChangeCapture?: import("react").FormEventHandler<HTMLDivElement>;
-        onBeforeInput?: import("react").FormEventHandler<HTMLDivElement>;
-        onBeforeInputCapture?: import("react").FormEventHandler<HTMLDivElement>;
-        onInput?: import("react").FormEventHandler<HTMLDivElement>;
-        onInputCapture?: import("react").FormEventHandler<HTMLDivElement>;
-        onReset?: import("react").FormEventHandler<HTMLDivElement>;
-        onResetCapture?: import("react").FormEventHandler<HTMLDivElement>;
-        onSubmit?: import("react").FormEventHandler<HTMLDivElement>;
-        onSubmitCapture?: import("react").FormEventHandler<HTMLDivElement>;
-        onInvalid?: import("react").FormEventHandler<HTMLDivElement>;
-        onInvalidCapture?: import("react").FormEventHandler<HTMLDivElement>;
-        onLoad?: import("react").ReactEventHandler<HTMLDivElement>;
-        onLoadCapture?: import("react").ReactEventHandler<HTMLDivElement>;
-        onError?: import("react").ReactEventHandler<HTMLDivElement>;
-        onErrorCapture?: import("react").ReactEventHandler<HTMLDivElement>;
-        onKeyDown?: import("react").KeyboardEventHandler<HTMLDivElement>;
-        onKeyDownCapture?: import("react").KeyboardEventHandler<HTMLDivElement>;
-        onKeyPress?: import("react").KeyboardEventHandler<HTMLDivElement>;
-        onKeyPressCapture?: import("react").KeyboardEventHandler<HTMLDivElement>;
-        onKeyUp?: import("react").KeyboardEventHandler<HTMLDivElement>;
-        onKeyUpCapture?: import("react").KeyboardEventHandler<HTMLDivElement>;
-        onAbort?: import("react").ReactEventHandler<HTMLDivElement>;
-        onAbortCapture?: import("react").ReactEventHandler<HTMLDivElement>;
-        onCanPlay?: import("react").ReactEventHandler<HTMLDivElement>;
-        onCanPlayCapture?: import("react").ReactEventHandler<HTMLDivElement>;
-        onCanPlayThrough?: import("react").ReactEventHandler<HTMLDivElement>;
-        onCanPlayThroughCapture?: import("react").ReactEventHandler<HTMLDivElement>;
-        onDurationChange?: import("react").ReactEventHandler<HTMLDivElement>;
-        onDurationChangeCapture?: import("react").ReactEventHandler<HTMLDivElement>;
-        onEmptied?: import("react").ReactEventHandler<HTMLDivElement>;
-        onEmptiedCapture?: import("react").ReactEventHandler<HTMLDivElement>;
-        onEncrypted?: import("react").ReactEventHandler<HTMLDivElement>;
-        onEncryptedCapture?: import("react").ReactEventHandler<HTMLDivElement>;
-        onEnded?: import("react").ReactEventHandler<HTMLDivElement>;
-        onEndedCapture?: import("react").ReactEventHandler<HTMLDivElement>;
-        onLoadedData?: import("react").ReactEventHandler<HTMLDivElement>;
-        onLoadedDataCapture?: import("react").ReactEventHandler<HTMLDivElement>;
-        onLoadedMetadata?: import("react").ReactEventHandler<HTMLDivElement>;
-        onLoadedMetadataCapture?: import("react").ReactEventHandler<HTMLDivElement>;
-        onLoadStart?: import("react").ReactEventHandler<HTMLDivElement>;
-        onLoadStartCapture?: import("react").ReactEventHandler<HTMLDivElement>;
-        onPause?: import("react").ReactEventHandler<HTMLDivElement>;
-        onPauseCapture?: import("react").ReactEventHandler<HTMLDivElement>;
-        onPlay?: import("react").ReactEventHandler<HTMLDivElement>;
-        onPlayCapture?: import("react").ReactEventHandler<HTMLDivElement>;
-        onPlaying?: import("react").ReactEventHandler<HTMLDivElement>;
-        onPlayingCapture?: import("react").ReactEventHandler<HTMLDivElement>;
-        onProgress?: import("react").ReactEventHandler<HTMLDivElement>;
-        onProgressCapture?: import("react").ReactEventHandler<HTMLDivElement>;
-        onRateChange?: import("react").ReactEventHandler<HTMLDivElement>;
-        onRateChangeCapture?: import("react").ReactEventHandler<HTMLDivElement>;
-        onSeeked?: import("react").ReactEventHandler<HTMLDivElement>;
-        onSeekedCapture?: import("react").ReactEventHandler<HTMLDivElement>;
-        onSeeking?: import("react").ReactEventHandler<HTMLDivElement>;
-        onSeekingCapture?: import("react").ReactEventHandler<HTMLDivElement>;
-        onStalled?: import("react").ReactEventHandler<HTMLDivElement>;
-        onStalledCapture?: import("react").ReactEventHandler<HTMLDivElement>;
-        onSuspend?: import("react").ReactEventHandler<HTMLDivElement>;
-        onSuspendCapture?: import("react").ReactEventHandler<HTMLDivElement>;
-        onTimeUpdate?: import("react").ReactEventHandler<HTMLDivElement>;
-        onTimeUpdateCapture?: import("react").ReactEventHandler<HTMLDivElement>;
-        onVolumeChange?: import("react").ReactEventHandler<HTMLDivElement>;
-        onVolumeChangeCapture?: import("react").ReactEventHandler<HTMLDivElement>;
-        onWaiting?: import("react").ReactEventHandler<HTMLDivElement>;
-        onWaitingCapture?: import("react").ReactEventHandler<HTMLDivElement>;
-        onAuxClick?: import("react").MouseEventHandler<HTMLDivElement>;
-        onAuxClickCapture?: import("react").MouseEventHandler<HTMLDivElement>;
-        onClick?: import("react").MouseEventHandler<HTMLDivElement>;
-        onClickCapture?: import("react").MouseEventHandler<HTMLDivElement>;
-        onContextMenu?: import("react").MouseEventHandler<HTMLDivElement>;
-        onContextMenuCapture?: import("react").MouseEventHandler<HTMLDivElement>;
-        onDoubleClick?: import("react").MouseEventHandler<HTMLDivElement>;
-        onDoubleClickCapture?: import("react").MouseEventHandler<HTMLDivElement>;
-        onDrag?: import("react").DragEventHandler<HTMLDivElement>;
-        onDragCapture?: import("react").DragEventHandler<HTMLDivElement>;
-        onDragEnd?: import("react").DragEventHandler<HTMLDivElement>;
-        onDragEndCapture?: import("react").DragEventHandler<HTMLDivElement>;
-        onDragEnter?: import("react").DragEventHandler<HTMLDivElement>;
-        onDragEnterCapture?: import("react").DragEventHandler<HTMLDivElement>;
-        onDragExit?: import("react").DragEventHandler<HTMLDivElement>;
-        onDragExitCapture?: import("react").DragEventHandler<HTMLDivElement>;
-        onDragLeave?: import("react").DragEventHandler<HTMLDivElement>;
-        onDragLeaveCapture?: import("react").DragEventHandler<HTMLDivElement>;
-        onDragOver?: import("react").DragEventHandler<HTMLDivElement>;
-        onDragOverCapture?: import("react").DragEventHandler<HTMLDivElement>;
-        onDragStart?: import("react").DragEventHandler<HTMLDivElement>;
-        onDragStartCapture?: import("react").DragEventHandler<HTMLDivElement>;
-        onDrop?: import("react").DragEventHandler<HTMLDivElement>;
-        onDropCapture?: import("react").DragEventHandler<HTMLDivElement>;
-        onMouseDown?: import("react").MouseEventHandler<HTMLDivElement>;
-        onMouseDownCapture?: import("react").MouseEventHandler<HTMLDivElement>;
-        onMouseEnter?: import("react").MouseEventHandler<HTMLDivElement>;
-        onMouseLeave?: import("react").MouseEventHandler<HTMLDivElement>;
-        onMouseMove?: import("react").MouseEventHandler<HTMLDivElement>;
-        onMouseMoveCapture?: import("react").MouseEventHandler<HTMLDivElement>;
-        onMouseOut?: import("react").MouseEventHandler<HTMLDivElement>;
-        onMouseOutCapture?: import("react").MouseEventHandler<HTMLDivElement>;
-        onMouseOver?: import("react").MouseEventHandler<HTMLDivElement>;
-        onMouseOverCapture?: import("react").MouseEventHandler<HTMLDivElement>;
-        onMouseUp?: import("react").MouseEventHandler<HTMLDivElement>;
-        onMouseUpCapture?: import("react").MouseEventHandler<HTMLDivElement>;
-        onSelect?: import("react").ReactEventHandler<HTMLDivElement>;
-        onSelectCapture?: import("react").ReactEventHandler<HTMLDivElement>;
-        onTouchCancel?: import("react").TouchEventHandler<HTMLDivElement>;
-        onTouchCancelCapture?: import("react").TouchEventHandler<HTMLDivElement>;
-        onTouchEnd?: import("react").TouchEventHandler<HTMLDivElement>;
-        onTouchEndCapture?: import("react").TouchEventHandler<HTMLDivElement>;
-        onTouchMove?: import("react").TouchEventHandler<HTMLDivElement>;
-        onTouchMoveCapture?: import("react").TouchEventHandler<HTMLDivElement>;
-        onTouchStart?: import("react").TouchEventHandler<HTMLDivElement>;
-        onTouchStartCapture?: import("react").TouchEventHandler<HTMLDivElement>;
-        onPointerDown?: import("react").PointerEventHandler<HTMLDivElement>;
-        onPointerDownCapture?: import("react").PointerEventHandler<HTMLDivElement>;
-        onPointerMove?: import("react").PointerEventHandler<HTMLDivElement>;
-        onPointerMoveCapture?: import("react").PointerEventHandler<HTMLDivElement>;
-        onPointerUp?: import("react").PointerEventHandler<HTMLDivElement>;
-        onPointerUpCapture?: import("react").PointerEventHandler<HTMLDivElement>;
-        onPointerCancel?: import("react").PointerEventHandler<HTMLDivElement>;
-        onPointerCancelCapture?: import("react").PointerEventHandler<HTMLDivElement>;
-        onPointerEnter?: import("react").PointerEventHandler<HTMLDivElement>;
-        onPointerEnterCapture?: import("react").PointerEventHandler<HTMLDivElement>;
-        onPointerLeave?: import("react").PointerEventHandler<HTMLDivElement>;
-        onPointerLeaveCapture?: import("react").PointerEventHandler<HTMLDivElement>;
-        onPointerOver?: import("react").PointerEventHandler<HTMLDivElement>;
-        onPointerOverCapture?: import("react").PointerEventHandler<HTMLDivElement>;
-        onPointerOut?: import("react").PointerEventHandler<HTMLDivElement>;
-        onPointerOutCapture?: import("react").PointerEventHandler<HTMLDivElement>;
-        onGotPointerCapture?: import("react").PointerEventHandler<HTMLDivElement>;
-        onGotPointerCaptureCapture?: import("react").PointerEventHandler<HTMLDivElement>;
-        onLostPointerCapture?: import("react").PointerEventHandler<HTMLDivElement>;
-        onLostPointerCaptureCapture?: import("react").PointerEventHandler<HTMLDivElement>;
-        onScroll?: import("react").UIEventHandler<HTMLDivElement>;
-        onScrollCapture?: import("react").UIEventHandler<HTMLDivElement>;
-        onWheel?: import("react").WheelEventHandler<HTMLDivElement>;
-        onWheelCapture?: import("react").WheelEventHandler<HTMLDivElement>;
-        onAnimationStart?: import("react").AnimationEventHandler<HTMLDivElement>;
-        onAnimationStartCapture?: import("react").AnimationEventHandler<HTMLDivElement>;
-        onAnimationEnd?: import("react").AnimationEventHandler<HTMLDivElement>;
-        onAnimationEndCapture?: import("react").AnimationEventHandler<HTMLDivElement>;
-        onAnimationIteration?: import("react").AnimationEventHandler<HTMLDivElement>;
-        onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLDivElement>;
-        onTransitionEnd?: import("react").TransitionEventHandler<HTMLDivElement>;
-        onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLDivElement>;
+        } | undefined;
+        onCopy?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+        onCopyCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+        onCut?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+        onCutCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+        onPaste?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+        onPasteCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+        onCompositionEnd?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+        onCompositionEndCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+        onCompositionStart?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+        onCompositionStartCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+        onCompositionUpdate?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+        onCompositionUpdateCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+        onFocus?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
+        onFocusCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
+        onBlur?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
+        onBlurCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
+        onChange?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+        onChangeCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+        onBeforeInput?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+        onBeforeInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+        onInput?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+        onInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+        onReset?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+        onResetCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+        onSubmit?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+        onSubmitCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+        onInvalid?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+        onInvalidCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+        onLoad?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onLoadCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onError?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onErrorCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onKeyDown?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+        onKeyDownCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+        onKeyPress?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+        onKeyPressCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+        onKeyUp?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+        onKeyUpCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+        onAbort?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onAbortCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onCanPlay?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onCanPlayCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onCanPlayThrough?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onCanPlayThroughCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onDurationChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onDurationChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onEmptied?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onEmptiedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onEncrypted?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onEncryptedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onEnded?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onEndedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onLoadedData?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onLoadedDataCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onLoadedMetadata?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onLoadedMetadataCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onLoadStart?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onLoadStartCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onPause?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onPauseCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onPlay?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onPlayCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onPlaying?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onPlayingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onProgress?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onProgressCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onRateChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onRateChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onSeeked?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onSeekedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onSeeking?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onSeekingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onStalled?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onStalledCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onSuspend?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onSuspendCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onTimeUpdate?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onTimeUpdateCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onVolumeChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onVolumeChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onWaiting?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onWaitingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onAuxClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onAuxClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onContextMenu?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onContextMenuCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onDoubleClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onDoubleClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onDrag?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+        onDragCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+        onDragEnd?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+        onDragEndCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+        onDragEnter?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+        onDragEnterCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+        onDragExit?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+        onDragExitCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+        onDragLeave?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+        onDragLeaveCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+        onDragOver?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+        onDragOverCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+        onDragStart?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+        onDragStartCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+        onDrop?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+        onDropCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+        onMouseDown?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseDownCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseEnter?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseLeave?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseMove?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseMoveCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseOut?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseOutCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseOver?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseOverCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseUp?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseUpCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onSelect?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onSelectCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onTouchCancel?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+        onTouchCancelCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+        onTouchEnd?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+        onTouchEndCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+        onTouchMove?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+        onTouchMoveCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+        onTouchStart?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+        onTouchStartCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+        onPointerDown?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerDownCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerMove?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerMoveCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerUp?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerUpCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerCancel?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerCancelCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerEnter?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerEnterCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerLeave?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerLeaveCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerOver?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerOverCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerOut?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerOutCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+        onGotPointerCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+        onGotPointerCaptureCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+        onLostPointerCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+        onLostPointerCaptureCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+        onScroll?: import("react").UIEventHandler<HTMLDivElement> | undefined;
+        onScrollCapture?: import("react").UIEventHandler<HTMLDivElement> | undefined;
+        onWheel?: import("react").WheelEventHandler<HTMLDivElement> | undefined;
+        onWheelCapture?: import("react").WheelEventHandler<HTMLDivElement> | undefined;
+        onAnimationStart?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+        onAnimationStartCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+        onAnimationEnd?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+        onAnimationEndCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+        onAnimationIteration?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+        onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+        onTransitionEnd?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
+        onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
     };
 }];

package/TextField/useTextFieldControl.d.ts

@@ -5,6 +5,6 @@ export interface UseTextFieldControlProps {
 }
 export declare function useTextFieldControl(props: UseTextFieldControlProps): {
     role: string;
-    onClick: MouseEventHandler<Element>;
-    onKeyDown: KeyboardEventHandler<Element>;
+    onClick: MouseEventHandler<Element> | undefined;
+    onKeyDown: KeyboardEventHandler<Element> | undefined;
 };

package/Tooltip/Tooltip.d.ts

@@ -1,6 +1,6 @@
 import { ReactElement, MouseEventHandler } from 'react';
 import { PopperProps } from '../Popper';
-export interface TooltipProps extends PopperProps {
+export interface TooltipProps extends Omit<PopperProps, 'children'> {
     /**
      * child function that can receive events
      */

package/Transition/Transition.d.ts

@@ -18,17 +18,6 @@ export interface TransitionImplementationChildProps {
     ref?: Ref<HTMLElement>;
     style?: CSSProperties;
 }
-export interface TransitionImplementationProps extends Omit<TransitionProps, 'addEndListener' | 'children' | 'nodeRef'> {
-    children: ReactElement<TransitionImplementationChildProps, NativeElementTag | JSXElementConstructor<TransitionImplementationChildProps>>;
-    /**
-     * The delay of the transition, in milliseconds
-     */
-    delay?: TransitionDelay;
-    /**
-     * The timing function of the transition
-     */
-    easing?: TransitionEasing;
-}
 export interface TransitionProps {
     /**
      * A custom callback for adding custom transition end handler
@@ -91,6 +80,17 @@ export interface TransitionProps {
      */
     onExited?: TransitionExitHandler;
 }
+export interface TransitionImplementationProps extends Omit<TransitionProps, 'addEndListener' | 'children' | 'nodeRef'> {
+    children: ReactElement<TransitionImplementationChildProps, NativeElementTag | JSXElementConstructor<TransitionImplementationChildProps>>;
+    /**
+     * The delay of the transition, in milliseconds
+     */
+    delay?: TransitionDelay;
+    /**
+     * The timing function of the transition
+     */
+    easing?: TransitionEasing;
+}
 /**
  * The react component for `mezzanine` transition.
  */

package/Typography/Typography.d.ts

@@ -38,6 +38,6 @@ export declare type TypographyProps<C extends TypographyComponent = 'p'> = Compo
  * The react component for `mezzanine` typography.
  */
 declare const Typography: import("react").ForwardRefExoticComponent<Omit<Omit<import("../utils/jsx-types").ComponentPropsWithoutKeyAndRef<"p">, keyof TypographyPropsBase> & TypographyPropsBase, "component"> & {
-    component?: TypographyComponent;
+    component?: TypographyComponent | undefined;
 } & import("react").RefAttributes<HTMLParagraphElement>>;
 export default Typography;

package/Upload/UploadPictureBlock.js

@@ -73,7 +73,9 @@ const UploadPictureBlock = forwardRef(function UploadPictureBlock(props, ref) {
             [uploadPictureBlockClasses.loading]: isLoading,
             [uploadPictureBlockClasses.error]: isError,
             [uploadPictureBlockClasses.disabled]: disabled,
-        }), style: style, children: [jsx(UploadInput, { ref: inputRef, accept: accept, disabled: disabled, multiple: multiple, onUpload: onUpload }), isError ? (jsxs("div", { className: uploadPictureBlockClasses.group, children: [jsx(Icon, { icon: TimesIcon }), jsx("span", { className: uploadPictureBlockClasses.status, children: "\u4E0A\u50B3\u932F\u8AA4" })] })) : (jsx(Fragment, { children: showImage ? (jsxs(Fragment, { children: [jsx("img", { alt: "", src: (value || previewImage), className: uploadPictureBlockClasses.preview }), isLoading ? (jsxs("div", { className: uploadPictureBlockClasses.group, children: [jsx(Icon, { icon: SpinnerIcon, spin: true }), jsx("span", { className: uploadPictureBlockClasses.status, children: "\u4E0A\u50B3\u4E2D..." })] })) : null] })) : (jsxs("div", { className: uploadPictureBlockClasses.group, children: [jsx(Icon, { icon: UploadIcon }), jsx("span", { className: uploadPictureBlockClasses.status, children: "\u4E0A\u50B3\u5F71\u50CF" })] })) })), !disabled && canDeleteImage && (jsx("div", { className: uploadPictureBlockClasses.delete, children: jsx(Icon, { icon: TrashIcon }) }))] }));
+        }), style: style, children: [jsx(UploadInput, { ref: inputRef, accept: accept, disabled: disabled, multiple: multiple, onUpload: onUpload }), isError ? (jsxs("div", { className: uploadPictureBlockClasses.group, children: [jsx(Icon, { icon: TimesIcon }), jsx("span", { className: uploadPictureBlockClasses.status, children: "\u4E0A\u50B3\u932F\u8AA4" })] })) : (
+            // eslint-disable-next-line react/jsx-no-useless-fragment
+            jsx(Fragment, { children: showImage ? (jsxs(Fragment, { children: [jsx("img", { alt: "", src: (value || previewImage), className: uploadPictureBlockClasses.preview }), isLoading ? (jsxs("div", { className: uploadPictureBlockClasses.group, children: [jsx(Icon, { icon: SpinnerIcon, spin: true }), jsx("span", { className: uploadPictureBlockClasses.status, children: "\u4E0A\u50B3\u4E2D..." })] })) : null] })) : (jsxs("div", { className: uploadPictureBlockClasses.group, children: [jsx(Icon, { icon: UploadIcon }), jsx("span", { className: uploadPictureBlockClasses.status, children: "\u4E0A\u50B3\u5F71\u50CF" })] })) })), !disabled && canDeleteImage && (jsx("div", { className: uploadPictureBlockClasses.delete, children: jsx(Icon, { icon: TrashIcon }) }))] }));
 });
 var UploadPictureBlock$1 = UploadPictureBlock;
 

package/hooks/useIsomorphicLayoutEffect.js

@@ -1,6 +1,6 @@
 import { useLayoutEffect, useEffect } from 'react';
 
-const useIsomorphicLayoutEffect = typeof window !== 'undefined' && window.document && window.document.createElement
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' && window.document && !!window.document.createElement
     ? useLayoutEffect
     : useEffect;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mezzanine-ui/react",
-  "version": "0.10.5",
+  "version": "0.11.0",
   "description": "React components for mezzanine-ui",
   "author": "Mezzanine",
   "repository": {
@@ -27,36 +27,36 @@
   },
   "peerDependencies": {
     "lodash": "^4.17.21",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "dependencies": {
     "@mezzanine-ui/core": "^0.10.5",
     "@mezzanine-ui/icons": "^0.10.2",
     "@mezzanine-ui/system": "^0.7.0",
-    "@popperjs/core": "^2.9.2",
-    "@types/react-transition-group": "4.4.1",
+    "@popperjs/core": "^2.11.5",
+    "@types/react-transition-group": "^4.4.5",
     "clsx": "^1.1.1",
     "lodash": "^4.17.21",
-    "react-popper": "^2.2.5",
-    "react-transition-group": "4.4.1",
+    "react-popper": "^2.3.0",
+    "react-transition-group": "^4.4.2",
     "tslib": "^2.1.0"
   },
   "devDependencies": {
-    "@storybook/react": "^6.4.19",
-    "@testing-library/react": "^11.2.5",
-    "@testing-library/react-hooks": "^5.1.0",
-    "@types/lodash": "^4.14.168",
+    "@storybook/react": "^6.5.9",
+    "@testing-library/react": "^13.2.0",
+    "@testing-library/react-hooks": "^8.0.0",
+    "@types/lodash": "^4.14.182",
     "@types/moment": "^2.13.0",
-    "@types/react": "17.0.43",
-    "@types/react-dom": "17.0.14",
-    "@types/react-test-renderer": "17.0.1",
-    "chromatic": "^5.10.1",
-    "dayjs": "^1.10.7",
+    "@types/react": "^18.0.14",
+    "@types/react-dom": "^18.0.5",
+    "@types/react-test-renderer": "^18.0.0",
+    "chromatic": "^6.6.4",
+    "dayjs": "^1.11.3",
     "lodash": "^4.17.21",
-    "moment": "^2.29.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-test-renderer": "^17.0.2"
+    "moment": "^2.29.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-test-renderer": "^18.2.0"
   }
 }