@mezzanine-ui/react 0.7.0 → 0.7.4

package/Slider/useSlider.js

@@ -1,4 +1,4 @@
-import { toSliderCssVars, getPercentage, isRangeSlider, findClosetValueIndex, sortSliderValue, getSliderRect, getValueFromClientX, roundToStep } from '@mezzanine-ui/core/slider';
+import { isRangeSlider, fixRangeSliderValue, fixSingleSliderValue, toSliderCssVars, getPercentage, findClosetValueIndex, sortSliderValue, getSliderRect, getValueFromClientX, roundToStep } from '@mezzanine-ui/core/slider';
 import { useRef, useState } from 'react';
 import { useDocumentEvents } from '../hooks/useDocumentEvents.js';
 
@@ -13,12 +13,14 @@ function useSlider(props) {
         }
         return isRangeSlider(value) ? Math.abs(1 - value.indexOf(anchorValue)) : undefined;
     }
+    const fixedValue = isRangeSlider(value) ? fixRangeSliderValue(value, min, max)
+        : fixSingleSliderValue(value, min, max);
     const cssVars = toSliderCssVars({
-        trackWidth: getPercentage(isRangeSlider(value) ? Math.abs(value[0] - value[1]) : value, min, max),
-        trackPosition: getPercentage(isRangeSlider(value) ? Math.abs(Math.min(...value) - min) : 0, min, max),
-        handlerPosition: getPercentage(isRangeSlider(value) ? 0 : value, min, max),
-        handlerStartPosition: getPercentage(isRangeSlider(value) ? Math.abs(Math.min(...value) - min) : value, min, max),
-        handlerEndPosition: getPercentage(isRangeSlider(value) ? Math.abs(Math.max(...value) - min) : value, min, max),
+        trackWidth: getPercentage(isRangeSlider(fixedValue) ? Math.abs(fixedValue[0] - fixedValue[1]) : fixedValue - min, min, max),
+        trackPosition: getPercentage(isRangeSlider(fixedValue) ? Math.abs(Math.min(...fixedValue) - min) : 0, min, max),
+        handlerPosition: getPercentage(isRangeSlider(fixedValue) ? 0 : fixedValue - min, min, max),
+        handlerStartPosition: getPercentage(isRangeSlider(fixedValue) ? Math.abs(Math.min(...fixedValue) - min) : fixedValue, min, max),
+        handlerEndPosition: getPercentage(isRangeSlider(fixedValue) ? Math.abs(Math.max(...fixedValue) - min) : fixedValue, min, max),
     });
     const getRoundedNewValue = (e, railElement) => {
         const clientX = e.type === 'touchmove' ? e.changedTouches[0].clientX : e.clientX;

package/Table/Table.d.ts

@@ -2,41 +2,63 @@
 import { TableColumn, TableComponents, TableDataSource, TableRowSelection, TableExpandable, TableFetchMore, TablePagination as TablePaginationType, TableRefresh as TableRefreshType } from '@mezzanine-ui/core/table';
 import { EmptyProps } from '../Empty';
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
-export interface TableProps<T> extends Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'role'> {
+export interface TableBaseProps<T> extends Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'role'> {
     /**
      * customized body className
      */
     bodyClassName?: string;
     /**
-     * customized body row className
-     */
+      * customized body row className
+      */
     bodyRowClassName?: string;
     /**
-     * Columns of table <br />
-     * `column.render` allowed customizing the column body cell rendering. <br />
-     * `column.renderTitle` allowed customizing the column header cell rendering. <br />
-     * `column.sorter` is the sorting method that you want to apply to your column. <br />
-     * `column.onSorted` is the callback triggered whenever sort icon clicked.
-     */
+      * Columns of table <br />
+      * `column.render` allowed customizing the column body cell rendering. <br />
+      * `column.renderTitle` allowed customizing the column header cell rendering. <br />
+      * `column.sorter` is the sorting method that you want to apply to your column. <br />
+      * `column.onSorted` is the callback triggered whenever sort icon clicked.
+      */
     columns: TableColumn<T>[];
     /**
-     * Custom table components <br />
-     */
+      * Custom table components <br />
+      */
     components?: TableComponents;
     /**
-     * Data record array to be displayed. <br />
-     * Notice that each source should contain `key` or `id` prop as data primary key.
-     */
+      * Data record array to be displayed. <br />
+      * Notice that each source should contain `key` or `id` prop as data primary key.
+      */
     dataSource: TableDataSource[];
     /**
-     * props exported from `<Empty />` component.
-     */
+      * props exported from `<Empty />` component.
+      */
     emptyProps?: EmptyProps;
     /**
-     * When `expandable.rowExpandable` is given, it will control whether row data is expandable or not
-     * `expandable.expandedRowRender` is a callback to helps you decides what data should be rendered.
-     */
+      * When `expandable.rowExpandable` is given, it will control whether row data is expandable or not
+      * `expandable.expandedRowRender` is a callback to helps you decides what data should be rendered.
+      */
     expandable?: TableExpandable<T>;
+    /**
+     * customized header className
+     */
+    headerClassName?: string;
+    /**
+      * Whether table is loading or not
+      */
+    loading?: boolean;
+    /**
+     * `refresh.show` is true, refresh button will display at the top-start of table. <br />
+     * `refresh.onClick` is the callback of the refresh button.
+     */
+    refresh?: TableRefreshType;
+    /**
+      * Enable row selection feature <br />
+      * `rowSelection.selectedRowKey` is the dataSource keys that are currently selected. <br />
+      * `rowSelection.onChange` is the callback when selection changed. <br />
+      * `rowSelection.actions` are the actions that you want to do for selected data.
+      */
+    rowSelection?: TableRowSelection;
+}
+export interface TableWithFetchMore<T> extends TableBaseProps<T> {
     /**
      * If `fetchMore.callback` is given, table will automatically trigger it when scrolling position reach end. <br />
      * If `fetchMore.isReachEnd` is true, table will stop triggering callback. <br />
@@ -45,14 +67,9 @@ export interface TableProps<T> extends Omit<NativeElementPropsWithoutKeyAndRef<'
      * Notice that when `fetchMore.isFetching` is `undefined`, table will take control of it when source length changed.
      */
     fetchMore?: TableFetchMore;
-    /**
-     * customized header className
-     */
-    headerClassName?: string;
-    /**
-     * Whether table is loading or not
-     */
-    loading?: boolean;
+    pagination?: undefined;
+}
+export interface TableWithPagination<T> extends TableBaseProps<T> {
     /**
      * `pagination.current` is the current page number. (required) <br />
      * `pagination.onChange` is the callback when page number changed. (required) <br />
@@ -62,18 +79,8 @@ export interface TableProps<T> extends Omit<NativeElementPropsWithoutKeyAndRef<'
      * Notice that if `pagination` object is given, table will disable fetchMore and use pagination instead.
      */
     pagination?: TablePaginationType;
-    /**
-     * `refresh.show` is true, refresh button will display at the top-start of table. <br />
-     * `refresh.onClick` is the callback of the refresh button.
-     */
-    refresh?: TableRefreshType;
-    /**
-     * Enable row selection feature <br />
-     * `rowSelection.selectedRowKey` is the dataSource keys that are currently selected. <br />
-     * `rowSelection.onChange` is the callback when selection changed. <br />
-     * `rowSelection.actions` are the actions that you want to do for selected data.
-     */
-    rowSelection?: TableRowSelection;
+    fetchMore?: undefined;
 }
-declare const Table: import("react").ForwardRefExoticComponent<TableProps<Record<string, unknown>> & import("react").RefAttributes<HTMLDivElement>>;
+export declare type TableProps<T> = TableWithFetchMore<T> | TableWithPagination<T>;
+declare const Table: import("react").ForwardRefExoticComponent<(TableWithFetchMore<Record<string, unknown>> & import("react").RefAttributes<HTMLDivElement>) | (TableWithPagination<Record<string, unknown>> & import("react").RefAttributes<HTMLDivElement>)>;
 export default Table;

package/Table/useTableScroll.d.ts

@@ -120,10 +120,10 @@ export default function useTableScroll(): readonly [{
         onCompositionStartCapture?: ((event: import("react").CompositionEvent<HTMLDivElement>) => void) | undefined;
         onCompositionUpdate?: ((event: import("react").CompositionEvent<HTMLDivElement>) => void) | undefined;
         onCompositionUpdateCapture?: ((event: import("react").CompositionEvent<HTMLDivElement>) => void) | undefined;
-        onFocus?: ((event: import("react").FocusEvent<HTMLDivElement>) => void) | undefined;
-        onFocusCapture?: ((event: import("react").FocusEvent<HTMLDivElement>) => void) | undefined;
-        onBlur?: ((event: import("react").FocusEvent<HTMLDivElement>) => void) | undefined;
-        onBlurCapture?: ((event: import("react").FocusEvent<HTMLDivElement>) => void) | undefined;
+        onFocus?: ((event: import("react").FocusEvent<HTMLDivElement, Element>) => void) | undefined;
+        onFocusCapture?: ((event: import("react").FocusEvent<HTMLDivElement, Element>) => void) | undefined;
+        onBlur?: ((event: import("react").FocusEvent<HTMLDivElement, Element>) => void) | undefined;
+        onBlurCapture?: ((event: import("react").FocusEvent<HTMLDivElement, Element>) => void) | undefined;
         onChange?: ((event: import("react").FormEvent<HTMLDivElement>) => void) | undefined;
         onChangeCapture?: ((event: import("react").FormEvent<HTMLDivElement>) => void) | undefined;
         onBeforeInput?: ((event: import("react").FormEvent<HTMLDivElement>) => void) | undefined;

package/Transition/Transition.d.ts

@@ -19,7 +19,7 @@ export interface TransitionImplementationChildProps {
     style?: CSSProperties;
 }
 export interface TransitionImplementationProps extends Omit<TransitionProps, 'addEndListener' | 'children' | 'nodeRef'> {
-    children?: ReactElement<TransitionImplementationChildProps, NativeElementTag | JSXElementConstructor<TransitionImplementationChildProps>>;
+    children: ReactElement<TransitionImplementationChildProps, NativeElementTag | JSXElementConstructor<TransitionImplementationChildProps>>;
     /**
      * The delay of the transition, in milliseconds
      */

package/Typography/Typography.d.ts

@@ -37,7 +37,7 @@ export declare type TypographyProps<C extends TypographyComponent = 'p'> = Compo
 /**
  * The react component for `mezzanine` typography.
  */
-declare const Typography: import("react").ForwardRefExoticComponent<Pick<Pick<Pick<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "key" | "slot" | "style" | "title" | "children" | "color" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture">, "slot" | "style" | "title" | "children" | "color" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture">, "slot" | "style" | "title" | "children" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & TypographyPropsBase, "slot" | "style" | "title" | "children" | "align" | "color" | "display" | "ellipsis" | "noWrap" | "variant" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & {
+declare const Typography: import("react").ForwardRefExoticComponent<Pick<Pick<Pick<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "key" | "slot" | "style" | "title" | "color" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture">, "slot" | "style" | "title" | "color" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture">, "slot" | "style" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & TypographyPropsBase, "slot" | "style" | "title" | "align" | "color" | "display" | "ellipsis" | "noWrap" | "variant" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & {
     component?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>) | "p" | "span" | "label" | "div" | "caption" | "a" | undefined;
 } & import("react").RefAttributes<HTMLParagraphElement>>;
 export default Typography;

package/Upload/UploadInput.js

@@ -5,6 +5,8 @@ import { uploadInputClasses } from '@mezzanine-ui/core/upload';
 const UploadInput = forwardRef((props, ref) => {
     const { accept, disabled = false, multiple = false, onUpload, } = props;
     return (jsx("input", { ref: ref, accept: accept, "aria-disabled": disabled, className: uploadInputClasses.host, disabled: disabled, multiple: multiple, onClick: (event) => {
+            // eslint-disable-next-line no-param-reassign
+            event.currentTarget.value = '';
             event.stopPropagation();
             event.nativeEvent.stopImmediatePropagation();
         }, onChange: (event) => {

package/Upload/UploadPicture.d.ts

@@ -0,0 +1,48 @@
+import { Ref } from 'react';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+export declare type UploadPictureControl = {
+    getData: () => void;
+};
+export interface UploadPictureProps extends Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'children' | 'onChange' | 'onError' | 'value'> {
+    /**
+     * The accept attributes of native input element.
+     * @default 'image/*'
+     */
+    accept?: string;
+    /**
+     * Provide `controllerRef` if you need detail data of file.
+     */
+    controllerRef?: Ref<UploadPictureControl | null>;
+    /**
+     * The default value of uploader.
+     */
+    defaultValue?: string;
+    /**
+     * Whether the input which is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+    * Fired after value changed.
+    */
+    onChange?: (url: string) => void;
+    /**
+    * Fired after user delete image.
+    */
+    onDelete?: () => void;
+    /**
+    * Fired after user upload image failed.
+    */
+    onError?: (file: File) => void;
+    /**
+    * Fired when user upload image, need to return Promise<string>.
+    * Arg1 is target file, arg2 `setProgress` can set the progress of uploading.
+    */
+    onUpload?: (file: File, setProgress: (progress: number) => void) => Promise<string>;
+    /**
+    * Fired after user upload image success.
+    */
+    onUploadSuccess?: (file: File, url: string) => void;
+}
+declare const UploadPicture: import("react").ForwardRefExoticComponent<UploadPictureProps & import("react").RefAttributes<HTMLDivElement>>;
+export default UploadPicture;

package/Upload/UploadPicture.js

@@ -0,0 +1,52 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef, useCallback, useImperativeHandle } from 'react';
+import { ImageUploader, uploadPictureClasses } from '@mezzanine-ui/core/upload';
+import UploadPictureBlock from './UploadPictureBlock.js';
+import cx from 'clsx';
+
+const UploadPicture = forwardRef(function UploadPicture(props, ref) {
+    const { accept = 'image/*', className, controllerRef, defaultValue, disabled = false, onChange, onDelete, onError, onUpload, onUploadSuccess, style, } = props;
+    const defaultImageUploader = new ImageUploader(undefined, defaultValue);
+    const uploadPictureImageLoader = useRef(defaultImageUploader);
+    const onImageUpload = useCallback((files) => {
+        if (files.length) {
+            const currentFile = files[0];
+            uploadPictureImageLoader.current.setNewFile(currentFile);
+            uploadPictureImageLoader.current.setPreview();
+            if (onUpload) {
+                const setProgress = (progress) => uploadPictureImageLoader.current.setPercentage(progress);
+                uploadPictureImageLoader.current.setLoadingStatus(true);
+                onUpload(currentFile, setProgress)
+                    .then((url) => {
+                    uploadPictureImageLoader.current.setUrl(url);
+                    uploadPictureImageLoader.current.setLoadingStatus(false);
+                    setProgress(100);
+                    if (onUploadSuccess) {
+                        onUploadSuccess(currentFile, url);
+                    }
+                })
+                    .catch(() => {
+                    uploadPictureImageLoader.current.setErrorStatus(true);
+                    uploadPictureImageLoader.current.setLoadingStatus(false);
+                    setProgress(100);
+                    if (onError) {
+                        onError(currentFile);
+                    }
+                });
+            }
+        }
+    }, [onUpload, onUploadSuccess, onError]);
+    const onImageDelete = useCallback(() => {
+        uploadPictureImageLoader.current.clear();
+        if (onDelete) {
+            onDelete();
+        }
+    }, [onDelete]);
+    useImperativeHandle(controllerRef, () => ({
+        getData: () => uploadPictureImageLoader.current.getAll(),
+    }));
+    return (jsx("div", Object.assign({ ref: ref, className: cx(uploadPictureClasses.host, className), style: style }, { children: jsx(UploadPictureBlock, { accept: accept, disabled: disabled, imageLoader: uploadPictureImageLoader.current, multiple: false, onDelete: onImageDelete, onUpload: onImageUpload, onValueChange: onChange }, void 0) }), void 0));
+});
+var UploadPicture$1 = UploadPicture;
+
+export { UploadPicture$1 as default };

package/Upload/UploadPictureBlock.d.ts

@@ -0,0 +1,13 @@
+import { MouseEventHandler } from 'react';
+import { ImageUploader } from '@mezzanine-ui/core/upload';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+export interface UploadPictureBlockProps extends Omit<NativeElementPropsWithoutKeyAndRef<'button'>, 'children' | 'onChange' | 'value'> {
+    accept?: string;
+    imageLoader: ImageUploader;
+    multiple?: boolean;
+    onDelete?: MouseEventHandler;
+    onUpload?: (files: File[]) => void;
+    onValueChange?: (value: string) => void;
+}
+declare const UploadPictureBlock: import("react").ForwardRefExoticComponent<UploadPictureBlockProps & import("react").RefAttributes<HTMLButtonElement>>;
+export default UploadPictureBlock;

package/Upload/UploadPictureBlock.js

@@ -0,0 +1,86 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { forwardRef, useState, useRef, useEffect, useCallback, useMemo } from 'react';
+import { toUploadPictureBlockCssVars, uploadPictureBlockClasses } from '@mezzanine-ui/core/upload';
+import { TimesIcon, SpinnerIcon, UploadIcon, TrashIcon } from '@mezzanine-ui/icons';
+import { usePreviousValue } from '../hooks/usePreviousValue.js';
+import UploadInput from './UploadInput.js';
+import Icon from '../Icon/Icon.js';
+import cx from 'clsx';
+
+const UploadPictureBlock = forwardRef(function UploadPictureBlock(props, ref) {
+    const { accept = 'image/*', disabled = false, imageLoader, multiple = false, onDelete, onUpload, onValueChange, } = props;
+    const [previewImage, setPreviewImage] = useState(imageLoader.getPreview() || '');
+    const [value, setValue] = useState(imageLoader.getUrl() || '');
+    const [percentage, setPercentage] = useState(imageLoader.getPercentage() || 0);
+    const [isLoading, setIsLoading] = useState(imageLoader.getIsLoading() || false);
+    const [isError, setIsError] = useState(imageLoader.getIsError() || false);
+    const inputRef = useRef(null);
+    const prevValue = usePreviousValue(value);
+    useEffect(() => {
+        if (onValueChange && value !== prevValue) {
+            onValueChange(value);
+        }
+    }, [onValueChange, prevValue, value]);
+    const setImageUploaderData = useCallback(() => {
+        const data = imageLoader.getAll();
+        setPreviewImage(data.preview);
+        setValue(data.url);
+        setPercentage(data.percentage);
+        setIsLoading(data.isLoading);
+        setIsError(data.isError);
+    }, [imageLoader]);
+    useEffect(() => {
+        imageLoader.on('fileChange', () => {
+            setImageUploaderData();
+        });
+        imageLoader.on('previewChange', () => {
+            setPreviewImage(imageLoader.getPreview());
+        });
+        imageLoader.on('percentageChange', () => {
+            setPercentage(imageLoader.getPercentage());
+        });
+        imageLoader.on('urlChange', () => {
+            setValue(imageLoader.getUrl());
+        });
+        imageLoader.on('loadingStatusChange', () => {
+            setIsLoading(imageLoader.getIsLoading());
+        });
+        imageLoader.on('errorStatusChange', () => {
+            setIsError(imageLoader.getIsError());
+        });
+        imageLoader.on('clear', () => {
+            setImageUploaderData();
+        });
+        return () => {
+            imageLoader.removeAllListeners();
+        };
+    }, [imageLoader, setImageUploaderData]);
+    const cssVars = toUploadPictureBlockCssVars({ percentage });
+    const style = {
+        ...cssVars,
+    };
+    const showImage = useMemo(() => ((value || previewImage) && !isError), [previewImage, value, isError]);
+    const canDeleteImage = useMemo(() => ((showImage || isError) && !isLoading), [showImage, isError, isLoading]);
+    return (jsxs("button", Object.assign({ ref: ref, type: "button", "aria-disabled": disabled, disabled: disabled, onClick: (event) => {
+            var _a;
+            if (!showImage && !isError) {
+                (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click();
+            }
+            if (canDeleteImage && onDelete) {
+                onDelete(event);
+            }
+        }, className: cx(uploadPictureBlockClasses.host, {
+            [uploadPictureBlockClasses.loading]: isLoading,
+            [uploadPictureBlockClasses.error]: isError,
+            [uploadPictureBlockClasses.disabled]: disabled,
+        }), style: style }, { children: [jsx(UploadInput, { ref: inputRef, accept: accept, disabled: disabled, multiple: multiple, onUpload: onUpload }, void 0),
+            isError ? (jsxs("div", Object.assign({ className: uploadPictureBlockClasses.group }, { children: [jsx(Icon, { icon: TimesIcon }, void 0),
+                    jsx("span", Object.assign({ className: uploadPictureBlockClasses.status }, { children: "\u4E0A\u50B3\u932F\u8AA4" }), void 0)] }), void 0)) : (jsx(Fragment, { children: showImage ? (jsxs(Fragment, { children: [jsx("img", { alt: "", src: (value || previewImage), className: uploadPictureBlockClasses.preview }, void 0),
+                        isLoading ? (jsxs("div", Object.assign({ className: uploadPictureBlockClasses.group }, { children: [jsx(Icon, { icon: SpinnerIcon, spin: true }, void 0),
+                                jsx("span", Object.assign({ className: uploadPictureBlockClasses.status }, { children: "\u4E0A\u50B3\u4E2D..." }), void 0)] }), void 0)) : null] }, void 0)) : (jsxs("div", Object.assign({ className: uploadPictureBlockClasses.group }, { children: [jsx(Icon, { icon: UploadIcon }, void 0),
+                        jsx("span", Object.assign({ className: uploadPictureBlockClasses.status }, { children: "\u4E0A\u50B3\u5F71\u50CF" }), void 0)] }), void 0)) }, void 0)),
+            !disabled && canDeleteImage && (jsx("div", Object.assign({ className: uploadPictureBlockClasses.delete }, { children: jsx(Icon, { icon: TrashIcon }, void 0) }), void 0))] }), void 0));
+});
+var UploadPictureBlock$1 = UploadPictureBlock;
+
+export { UploadPictureBlock$1 as default };

package/Upload/UploadPictureWall.d.ts

@@ -0,0 +1,71 @@
+import { Ref } from 'react';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+export declare type UploadPictureWallControl = {
+    getAllData: () => void;
+};
+export interface UploadPictureWallBaseProps extends Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'children' | 'onChange' | 'onError' | 'value'> {
+    /**
+     * The accept attributes of native input element.
+     * @default 'image/*'
+     */
+    accept?: string;
+    /**
+     * Provide `controllerRef` if you need detail data of files.
+     */
+    controllerRef?: Ref<UploadPictureWallControl | null>;
+    /**
+     * The default values of uploader.
+     */
+    defaultValues?: string[];
+    /**
+     * Whether the input which is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether the input which is multiple.
+     * @default true
+     */
+    multiple?: boolean;
+    /**
+    * Fired after values changed.
+    */
+    onChange?: (urls: string[]) => void;
+    /**
+    * Fired after user delete image.
+    */
+    onDelete?: (urls: string[]) => void;
+    /**
+    * Fired after user upload images failed.
+    */
+    onError?: (files: File | File[]) => void;
+    /**
+    * Fired after user upload images success.
+    */
+    onUploadSuccess?: (files: File | File[], urls: string | string[]) => void;
+}
+export interface UploadPictureWallSingleUploadProps extends UploadPictureWallBaseProps {
+    onMultiUpload?: undefined;
+    /**
+    * Fired when user upload image, need to return Promise<string>.
+    * Arg1 is target file, arg2 `setProgress` can set the progress of uploading.
+    */
+    onUpload?: (file: File, setProgress: (progress: number) => void) => Promise<string>;
+    /**
+     * Whether the uploading which is parallel, only enabled when `onUpload` is given .
+     * @default false
+     */
+    parallel?: boolean;
+}
+export interface UploadPictureWallMultiUploadProps extends UploadPictureWallBaseProps {
+    /**
+    * Fired when user upload images, need to return Promise<string[]>.
+    * Arg1 is target files, arg2 `setProgress` can set the progress of uploading.
+    */
+    onMultiUpload?: (files: File[], setProgress: (progress: number) => void) => Promise<string[]>;
+    onUpload?: undefined;
+    parallel?: undefined;
+}
+export declare type UploadPictureWallProps = UploadPictureWallSingleUploadProps | UploadPictureWallMultiUploadProps;
+declare const UploadPictureWall: import("react").ForwardRefExoticComponent<(UploadPictureWallSingleUploadProps & import("react").RefAttributes<HTMLDivElement>) | (UploadPictureWallMultiUploadProps & import("react").RefAttributes<HTMLDivElement>)>;
+export default UploadPictureWall;