@mezzanine-ui/react 0.11.2 → 0.12.0

package/Select/AutoComplete.d.ts

@@ -53,7 +53,7 @@ export interface AutoCompleteBaseProps extends Omit<SelectTriggerProps, 'active'
      */
     size?: SelectInputSize;
 }
-export declare type AutoCompleteMultipleProps = AutoCompleteBaseProps & {
+export type AutoCompleteMultipleProps = AutoCompleteBaseProps & {
     /**
      * The default selection
      */
@@ -72,7 +72,7 @@ export declare type AutoCompleteMultipleProps = AutoCompleteBaseProps & {
      */
     value?: SelectValue[];
 };
-export declare type AutoCompleteSingleProps = AutoCompleteBaseProps & {
+export type AutoCompleteSingleProps = AutoCompleteBaseProps & {
     /**
      * The default selection
      */
@@ -91,7 +91,7 @@ export declare type AutoCompleteSingleProps = AutoCompleteBaseProps & {
      */
     value?: SelectValue | null;
 };
-export declare type AutoCompleteProps = AutoCompleteMultipleProps | AutoCompleteSingleProps;
+export type AutoCompleteProps = AutoCompleteMultipleProps | AutoCompleteSingleProps;
 /**
  * The AutoComplete component for react. <br />
  * Note that if you need search for ONLY given options, not included your typings,

package/Select/Select.d.ts

@@ -36,7 +36,7 @@ export interface SelectBaseProps extends Omit<SelectTriggerProps, 'active' | 'in
      */
     size?: SelectInputSize;
 }
-export declare type SelectMultipleProps = SelectBaseProps & {
+export type SelectMultipleProps = SelectBaseProps & {
     /**
      * The default selection
      */
@@ -59,7 +59,7 @@ export declare type SelectMultipleProps = SelectBaseProps & {
      */
     value?: SelectValue[];
 };
-export declare type SelectSingleProps = SelectBaseProps & {
+export type SelectSingleProps = SelectBaseProps & {
     /**
      * The default selection
      */
@@ -82,6 +82,6 @@ export declare type SelectSingleProps = SelectBaseProps & {
      */
     value?: SelectValue | null;
 };
-export declare type SelectProps = SelectMultipleProps | SelectSingleProps;
+export type SelectProps = SelectMultipleProps | SelectSingleProps;
 declare const Select: import("react").ForwardRefExoticComponent<SelectProps & import("react").RefAttributes<HTMLDivElement>>;
 export default Select;

package/Select/SelectTrigger.d.ts

@@ -2,7 +2,7 @@ import { Ref } from 'react';
 import { TextFieldProps } from '../TextField';
 import { SelectValue } from './typings';
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
-export declare type SelectTriggerInputProps = Omit<NativeElementPropsWithoutKeyAndRef<'input'>, 'autoComplete' | 'children' | 'defaultValue' | 'disabled' | 'readOnly' | 'required' | 'type' | 'value' | `aria-${'autocomplete' | 'disabled' | 'haspopup' | 'multiline' | 'readonly' | 'required'}`>;
+export type SelectTriggerInputProps = Omit<NativeElementPropsWithoutKeyAndRef<'input'>, 'autoComplete' | 'children' | 'defaultValue' | 'disabled' | 'readOnly' | 'required' | 'type' | 'value' | `aria-${'autocomplete' | 'disabled' | 'haspopup' | 'multiline' | 'readonly' | 'required'}`>;
 export interface SelectTriggerBaseProps extends Omit<TextFieldProps, 'active' | 'children' | 'defaultChecked' | 'suffix'> {
     /**
      * Controls the chevron icon layout.
@@ -51,7 +51,7 @@ export interface SelectTriggerBaseProps extends Omit<TextFieldProps, 'active' |
     showTextInputAfterTags?: boolean;
     suffixAction?: VoidFunction;
 }
-export declare type SelectTriggerMultipleProps = SelectTriggerBaseProps & {
+export type SelectTriggerMultipleProps = SelectTriggerBaseProps & {
     /**
      * Controls the layout of trigger.
      */
@@ -67,7 +67,7 @@ export declare type SelectTriggerMultipleProps = SelectTriggerBaseProps & {
      */
     renderValue?: (value: SelectValue[]) => string;
 };
-export declare type SelectTriggerSingleProps = SelectTriggerBaseProps & {
+export type SelectTriggerSingleProps = SelectTriggerBaseProps & {
     /**
      * Controls the layout of trigger.
      */
@@ -83,7 +83,7 @@ export declare type SelectTriggerSingleProps = SelectTriggerBaseProps & {
      */
     renderValue?: (value: SelectValue | null) => string;
 };
-export declare type SelectTriggerComponentProps = SelectTriggerMultipleProps | SelectTriggerSingleProps;
-export declare type SelectTriggerProps = Omit<SelectTriggerComponentProps, 'innerRef'>;
+export type SelectTriggerComponentProps = SelectTriggerMultipleProps | SelectTriggerSingleProps;
+export type SelectTriggerProps = Omit<SelectTriggerComponentProps, 'innerRef'>;
 declare const SelectTrigger: import("react").ForwardRefExoticComponent<SelectTriggerProps & import("react").RefAttributes<HTMLDivElement>>;
 export default SelectTrigger;

package/Select/SelectTrigger.js

@@ -23,7 +23,10 @@ function SelectTriggerComponent(props) {
         return '';
     };
     /** Compute suffix action icon */
-    const suffixActionIcon = suffixActionIconProp || (jsx(Icon, { icon: ChevronDownIcon, onClick: suffixAction, className: cx(selectClasses.triggerSuffixActionIcon, {
+    const suffixActionIcon = suffixActionIconProp || (jsx(Icon, { icon: ChevronDownIcon, onClick: (e) => {
+            e.stopPropagation();
+            suffixAction === null || suffixAction === void 0 ? void 0 : suffixAction();
+        }, className: cx(selectClasses.triggerSuffixActionIcon, {
             [selectClasses.triggerSuffixActionIconActive]: active,
         }) }));
     const getTextFieldActive = () => {

package/Slider/Slider.d.ts

@@ -32,16 +32,16 @@ export interface SliderBaseProps extends Omit<NativeElementPropsWithoutKeyAndRef
      */
     innerRef?: Ref<HTMLDivElement>;
 }
-export declare type SingleSliderProps = SliderBaseProps & {
+export type SingleSliderProps = SliderBaseProps & {
     onChange?: (value: SingleSliderValue) => void;
     value: UseSingleSliderProps['value'];
 };
-export declare type RangeSliderProps = SliderBaseProps & {
+export type RangeSliderProps = SliderBaseProps & {
     onChange?: (value: RangeSliderValue) => void;
     value: UseRangeSliderProps['value'];
 };
-export declare type SliderComponentProps = SingleSliderProps | RangeSliderProps;
-export declare type SliderProps = Omit<SliderComponentProps, 'innerRef'>;
+export type SliderComponentProps = SingleSliderProps | RangeSliderProps;
+export type SliderProps = Omit<SliderComponentProps, 'innerRef'>;
 /**
  * The react component for `mezzanine` slider.
  * The outcome will be base on the type of given value.

package/Table/Table.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
-import { TableColumn, TableComponents, TableDataSource, TableRowSelection, TableExpandable, TableFetchMore, TablePagination as TablePaginationType, TableRefresh as TableRefreshType } from '@mezzanine-ui/core/table';
+import { ReactNode } from 'react';
+import { TableColumn, TableComponents, TableDataSource, TableRowSelection, TableExpandable, TableFetchMore, TablePagination as TablePaginationType, TableRefresh as TableRefreshType, ExpandRowBySources } from '@mezzanine-ui/core/table';
 import { EmptyProps } from '../Empty';
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
 export interface TableBaseProps<T> extends Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'role'> {
@@ -36,7 +36,9 @@ export interface TableBaseProps<T> extends Omit<NativeElementPropsWithoutKeyAndR
       * 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>;
+    expandable?: Omit<TableExpandable<T>, 'expandedRowRender'> & {
+        expandedRowRender(record: T): ReactNode | ExpandRowBySources;
+    };
     /**
      * customized header className
      */
@@ -81,6 +83,6 @@ export interface TableWithPagination<T> extends TableBaseProps<T> {
     pagination?: TablePaginationType;
     fetchMore?: undefined;
 }
-export declare type TableProps<T> = TableWithFetchMore<T> | TableWithPagination<T>;
+export type TableProps<T> = TableWithFetchMore<T> | TableWithPagination<T>;
 declare const Table: import("react").ForwardRefExoticComponent<TableProps<Record<string, unknown>> & import("react").RefAttributes<HTMLDivElement>>;
 export default Table;

package/Table/Table.js

@@ -58,7 +58,7 @@ const Table = forwardRef(function Table(props, ref) {
     }, [refreshProp === null || refreshProp === void 0 ? void 0 : refreshProp.show]);
     /** context */
     const tableContextValue = useMemo(() => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         return ({
             scrollBarSize: 4,
             emptyProps,
@@ -83,13 +83,10 @@ const Table = forwardRef(function Table(props, ref) {
                 onChange: paginationProp.onChange,
                 total: (_b = paginationProp.total) !== null && _b !== void 0 ? _b : dataSource.length,
                 options: {
-                    boundaryCount: (_d = (_c = paginationProp.options) === null || _c === void 0 ? void 0 : _c.boundaryCount) !== null && _d !== void 0 ? _d : 1,
-                    className: (_e = paginationProp.options) === null || _e === void 0 ? void 0 : _e.className,
-                    disabled: (_g = (_f = paginationProp.options) === null || _f === void 0 ? void 0 : _f.disabled) !== null && _g !== void 0 ? _g : false,
-                    hideNextButton: (_j = (_h = paginationProp.options) === null || _h === void 0 ? void 0 : _h.hideNextButton) !== null && _j !== void 0 ? _j : false,
-                    hidePreviousButton: (_l = (_k = paginationProp.options) === null || _k === void 0 ? void 0 : _k.hidePreviousButton) !== null && _l !== void 0 ? _l : false,
-                    pageSize: (_o = (_m = paginationProp.options) === null || _m === void 0 ? void 0 : _m.pageSize) !== null && _o !== void 0 ? _o : 10,
-                    siblingCount: (_q = (_p = paginationProp.options) === null || _p === void 0 ? void 0 : _p.siblingCount) !== null && _q !== void 0 ? _q : 1,
+                    ...((_c = paginationProp.options) !== null && _c !== void 0 ? _c : {}),
+                    boundaryCount: (_e = (_d = paginationProp.options) === null || _d === void 0 ? void 0 : _d.boundaryCount) !== null && _e !== void 0 ? _e : 1,
+                    pageSize: (_g = (_f = paginationProp.options) === null || _f === void 0 ? void 0 : _f.pageSize) !== null && _g !== void 0 ? _g : 10,
+                    siblingCount: (_j = (_h = paginationProp.options) === null || _h === void 0 ? void 0 : _h.siblingCount) !== null && _j !== void 0 ? _j : 1,
                 },
             } : undefined,
         });
@@ -109,13 +106,16 @@ const Table = forwardRef(function Table(props, ref) {
         isReachEnd,
         paginationProp,
     ]);
-    const tableDataContextValue = {
+    const tableDataContextValue = useMemo(() => ({
         columns,
         dataSource,
-    };
-    const tableComponentContextValue = {
-        bodyCell: (_a = components === null || components === void 0 ? void 0 : components.body) === null || _a === void 0 ? void 0 : _a.cell,
-    };
+    }), [columns, dataSource]);
+    const tableComponentContextValue = useMemo(() => {
+        var _a;
+        return ({
+            bodyCell: (_a = components === null || components === void 0 ? void 0 : components.body) === null || _a === void 0 ? void 0 : _a.cell,
+        });
+    }, [(_a = components === null || components === void 0 ? void 0 : components.body) === null || _a === void 0 ? void 0 : _a.cell]);
     return (jsx(Loading, { loading: loading, stretch: true, tip: "\u8CC7\u6599\u8F09\u5165\u4E2D...", children: jsx("div", { ref: ref, ...rest, className: cx(tableClasses.host, className), role: "grid", children: jsx(TableContext.Provider, { value: tableContextValue, children: jsx(TableDataContext.Provider, { value: tableDataContextValue, children: jsxs(TableComponentContext.Provider, { value: tableComponentContextValue, children: [isRefreshShow ? (jsx(TableRefresh, { onClick: refreshProp.onClick })) : null, jsx(TableHeader, { className: headerClassName }), jsx(TableBody, { ref: bodyRef, className: bodyClassName, rowClassName: bodyRowClassName }), paginationProp ? (jsx(TablePagination, { bodyRef: bodyRef })) : null] }) }) }) }) }));
 });
 var Table$1 = Table;

package/Table/TableBodyRow.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx, Fragment as Fragment$1 } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, useContext, useState, useMemo, Fragment } from 'react';
 import { tableClasses, getColumnStyle, getCellStyle } from '@mezzanine-ui/core/table';
 import get from 'lodash/get';
@@ -33,8 +33,8 @@ const TableBodyRow = forwardRef(function TableBodyRow(props, ref) {
                         var _a, _b, _c, _d;
                         const ellipsis = !!(get(rowData, column.dataIndex)) && ((_a = column.ellipsis) !== null && _a !== void 0 ? _a : true);
                         const tooltipTitle = ((_c = (_b = column.renderTooltipTitle) === null || _b === void 0 ? void 0 : _b.call(column, rowData)) !== null && _c !== void 0 ? _c : get(rowData, column.dataIndex));
-                        return (jsx("div", { className: cx(tableClasses.bodyRowCellWrapper, column.bodyClassName), style: getColumnStyle(column), children: jsx(TableEditRenderWrapper, { ...column, rowData: rowData, children: jsx(TableCell, { ellipsis: ellipsis, forceShownTooltipWhenHovered: column.forceShownTooltipWhenHovered, style: getCellStyle(column), tooltipTitle: tooltipTitle, children: ((_d = column.render) === null || _d === void 0 ? void 0 : _d.call(column, column, rowData, rowIndex)) || get(rowData, column.dataIndex) }) }) }, `${column.dataIndex}-${column.title}`));
-                    })] }), renderedExpandedContent ? (jsx(Fragment$1, { children: typeof renderedExpandedContent === 'string' ? (jsx(AccordionDetails, { className: expanding.className, expanded: expanded, children: renderedExpandedContent })) : (jsx(Fragment$1, { children: renderedExpandedContent.dataSource.length > 0 ? (jsx(AccordionDetails, { className: cx(expanding.className, tableClasses.bodyRowExpandedTableWrapper), expanded: expanded, children: jsx(TableExpandedTable, { renderedExpandedContent: renderedExpandedContent }) })) : null })) })) : null] }));
+                        return (jsx("div", { className: cx(tableClasses.bodyRowCellWrapper, column.bodyClassName), style: getColumnStyle(column), children: jsx(TableEditRenderWrapper, { ...column, rowData: rowData, children: jsx(TableCell, { ellipsis: ellipsis, forceShownTooltipWhenHovered: column.forceShownTooltipWhenHovered, style: getCellStyle(column), tooltipTitle: tooltipTitle, children: ((_d = column.render) === null || _d === void 0 ? void 0 : _d.call(column, rowData, rowIndex, column)) || get(rowData, column.dataIndex) }) }) }, `${column.dataIndex}-${column.title}`));
+                    })] }), renderedExpandedContent ? (jsx(AccordionDetails, { className: cx(expanding.className, tableClasses.bodyRowExpandedTableWrapper), expanded: expanded, children: (renderedExpandedContent === null || renderedExpandedContent === void 0 ? void 0 : renderedExpandedContent.dataSource) ? (jsx(TableExpandedTable, { renderedExpandedContent: renderedExpandedContent })) : renderedExpandedContent })) : null] }));
 });
 var TableBodyRow$1 = TableBodyRow;
 

package/Table/TableContext.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
-import { TableRowSelection, TableColumn, TableExpandable, TablePagination, TableDataSource, TableRecord } from '@mezzanine-ui/core/table';
+import { ReactNode } from 'react';
+import { TableRowSelection, TableColumn, TableExpandable, TablePagination, TableDataSource, TableRecord, ExpandRowBySources } from '@mezzanine-ui/core/table';
 import { EmptyProps } from '../Empty';
 /** typeof rowSelection */
 export interface RowSelectionContext extends Pick<TableRowSelection, 'actions'> {
@@ -30,7 +30,9 @@ export interface TableContextProps {
     sorting?: SortingContext;
     loading?: boolean;
     setLoading?(l: boolean): void;
-    expanding?: TableExpandable<TableRecord<unknown>>;
+    expanding?: Omit<TableExpandable<TableRecord<unknown>>, 'expandedRowRender'> & {
+        expandedRowRender(record: TableRecord<unknown>): ReactNode | ExpandRowBySources;
+    };
     fetchMore?: FetchMoreContext;
     pagination?: TablePagination;
 }

package/Table/TableExpandedTable.js

@@ -17,7 +17,7 @@ const TableExpandedTable = forwardRef(function TableExpandedTable(props, ref) {
                         var _a, _b, _c, _d;
                         const ellipsis = !!(get(source, column.dataIndex)) && ((_a = column.ellipsis) !== null && _a !== void 0 ? _a : true);
                         const tooltipTitle = ((_c = (_b = column.renderTooltipTitle) === null || _b === void 0 ? void 0 : _b.call(column, source)) !== null && _c !== void 0 ? _c : get(source, column.dataIndex));
-                        return (jsx("div", { className: cx(tableClasses.bodyRowCellWrapper, column.bodyClassName), style: getColumnStyle((columns !== null && columns !== void 0 ? columns : [])[index]), children: jsx(TableCell, { ellipsis: ellipsis, forceShownTooltipWhenHovered: column.forceShownTooltipWhenHovered, style: getCellStyle((columns !== null && columns !== void 0 ? columns : [])[index]), tooltipTitle: tooltipTitle || '', children: ((_d = column.render) === null || _d === void 0 ? void 0 : _d.call(column, column, source, sourceIndex)) || get(source, column.dataIndex) }) }, `${column.dataIndex}-${index}`));
+                        return (jsx("div", { className: cx(tableClasses.bodyRowCellWrapper, column.bodyClassName), style: getColumnStyle((columns !== null && columns !== void 0 ? columns : [])[index]), children: jsx(TableCell, { ellipsis: ellipsis, forceShownTooltipWhenHovered: column.forceShownTooltipWhenHovered, style: getCellStyle((columns !== null && columns !== void 0 ? columns : [])[index]), tooltipTitle: tooltipTitle || '', children: ((_d = column.render) === null || _d === void 0 ? void 0 : _d.call(column, source, sourceIndex, column)) || get(source, column.dataIndex) }) }, `${column.dataIndex}-${index}`));
                     })] }, (source.key || source.id)));
         }) }));
 });

package/Table/pagination/TablePagination.js

@@ -7,6 +7,7 @@ import Pagination from '../../Pagination/Pagination.js';
 import cx from 'clsx';
 
 const TablePagination = forwardRef(function TablePagination(props, ref) {
+    var _a;
     const { className, bodyRef, ...rest } = props;
     const { pagination, } = useContext(TableContext) || {};
     const { current: currentPageProp, onChange: onChangePageProp, total, options: paginationOptions = {}, } = pagination || {};
@@ -15,10 +16,10 @@ const TablePagination = forwardRef(function TablePagination(props, ref) {
         current: currentPageProp,
         onChange: onChangePageProp,
     });
-    const { boundaryCount, className: paginationClassName, disabled, hideNextButton, hidePreviousButton, pageSize: pageSizeProp, siblingCount, } = paginationOptions;
+    const { boundaryCount, className: paginationClassName, disabled, hideNextButton, hidePreviousButton, jumperButtonText, jumperHintText, jumperInputPlaceholder, onChangePageSize, pageSize: pageSizeProp, pageSizeLabel, pageSizeOptions, pageSizeUnit, renderPageSizeOptionName, renderPaginationSummary, showJumper, showPageSizeOptions, siblingCount, } = paginationOptions;
     const currentStartCount = (pageSizeProp * (currentPage - 1)) + 1;
     const currentEndCount = Math.min(pageSizeProp * currentPage, total);
-    return (jsxs("div", { ...rest, ref: ref, className: cx(tableClasses.pagination, className), children: [jsx("span", { className: tableClasses.paginationIndicator, children: `目前顯示 ${currentStartCount} - ${currentEndCount} 筆，共 ${total} 筆資料` }), jsx("div", { className: tableClasses.paginationActions, children: jsx(Pagination, { boundaryCount: boundaryCount, className: paginationClassName, current: currentPage, disabled: disabled, hideNextButton: hideNextButton, hidePreviousButton: hidePreviousButton, onChange: setCurrentPage, pageSize: pageSizeProp, siblingCount: siblingCount, total: total }) })] }));
+    return (jsxs("div", { ...rest, ref: ref, className: cx(tableClasses.pagination, className), children: [jsx("span", { className: tableClasses.paginationIndicator, children: (_a = renderPaginationSummary === null || renderPaginationSummary === void 0 ? void 0 : renderPaginationSummary(currentStartCount, currentEndCount)) !== null && _a !== void 0 ? _a : `目前顯示 ${currentStartCount} - ${currentEndCount} 筆，共 ${total} 筆資料` }), jsx("div", { className: tableClasses.paginationActions, children: jsx(Pagination, { boundaryCount: boundaryCount, buttonText: jumperButtonText, className: paginationClassName, current: currentPage, disabled: disabled, hideNextButton: hideNextButton, hidePreviousButton: hidePreviousButton, hintText: jumperHintText, inputPlaceholder: jumperInputPlaceholder, onChange: setCurrentPage, onChangePageSize: onChangePageSize, pageSize: pageSizeProp, pageSizeLabel: pageSizeLabel, pageSizeOptions: pageSizeOptions, pageSizeUnit: pageSizeUnit, renderPageSizeOptionName: renderPageSizeOptionName, showJumper: showJumper, showPageSizeOptions: showPageSizeOptions, siblingCount: siblingCount, total: total }) })] }));
 });
 var TablePagination$1 = TablePagination;
 

package/Table/sorting/useTableSorting.d.ts

@@ -2,7 +2,7 @@ import { TableDataSource, TableColumn, TableRecord } from '@mezzanine-ui/core/ta
 export interface UseTableSorting {
     dataSource: TableDataSource[];
 }
-export declare type SortedType = 'desc' | 'asc' | 'none';
+export type SortedType = 'desc' | 'asc' | 'none';
 export declare function useTableSorting(props: UseTableSorting): readonly [TableDataSource[], (v: Pick<TableColumn<TableRecord<unknown>>, "dataIndex" | "sorter" | "onSorted">) => void, {
     readonly sortedOn: string;
     readonly sortedType: SortedType;

package/Table/useTableScroll.d.ts

@@ -25,6 +25,7 @@ export default function useTableScroll(): readonly [{
         hidden?: boolean | undefined;
         id?: string | undefined;
         lang?: string | undefined;
+        nonce?: string | undefined;
         placeholder?: string | undefined;
         slot?: string | undefined;
         spellCheck?: (boolean | "true" | "false") | undefined;
@@ -176,6 +177,8 @@ export default function useTableScroll(): readonly [{
         onProgressCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
         onRateChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
         onRateChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onResize?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onResizeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
         onSeeked?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
         onSeekedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
         onSeeking?: import("react").ReactEventHandler<HTMLDivElement> | undefined;

package/Tabs/Tabs.d.ts

@@ -1,7 +1,7 @@
 import { Key, MouseEvent, ReactElement, ReactNode } from 'react';
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
 import { TabPaneProps } from './TabPane';
-export declare type TabsChild = ReactElement<TabPaneProps>;
+export type TabsChild = ReactElement<TabPaneProps>;
 export interface TabsProps extends Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'onChange' | 'children'> {
     /**
      * Current TabPane's index

package/TextField/TextField.js

@@ -19,7 +19,10 @@ const TextField = forwardRef(function TextField(props, ref) {
     });
     return (
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    jsxs("div", { ...rest, ref: ref, role: roleProp || role, onClick: onClick, onKeyDown: onKeyDown, className: cx(textFieldClasses.host, textFieldClasses.size(size), {
+    jsxs("div", { ...rest, ref: ref, role: roleProp || role, onClick: (evt) => {
+            evt.stopPropagation();
+            onClick === null || onClick === void 0 ? void 0 : onClick(evt);
+        }, onKeyDown: onKeyDown, className: cx(textFieldClasses.host, textFieldClasses.size(size), {
             [textFieldClasses.active]: active,
             [textFieldClasses.clearable]: clearable,
             [textFieldClasses.disabled]: disabled,

package/Transition/Fade.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { TransitionImplementationProps } from './Transition';
-export declare type FadeProps = TransitionImplementationProps;
+export type FadeProps = TransitionImplementationProps;
 /**
  * The react component for `mezzanine` transition fade.
  */

package/Transition/SlideFade.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { TransitionImplementationProps } from './Transition';
-export declare type SlideFadeDirection = 'left' | 'right' | 'up' | 'down';
+export type SlideFadeDirection = 'left' | 'right' | 'up' | 'down';
 export interface SlideFadeProps extends TransitionImplementationProps {
     /**
      * The direction of child element will enter to.

package/Transition/Transition.d.ts

@@ -2,18 +2,18 @@ import { RefObject, CSSProperties, ReactElement, JSXElementConstructor, Ref } fr
 import { TransitionStatus as TransitionState, TransitionChildren } from 'react-transition-group/Transition';
 import { NativeElementTag } from '../utils/jsx-types';
 export { TransitionState };
-export declare type TransitionMode = 'enter' | 'exit';
-export declare type TransitionDuration = 'auto' | number | {
+export type TransitionMode = 'enter' | 'exit';
+export type TransitionDuration = 'auto' | number | {
     [mode in TransitionMode]?: number;
 };
-export declare type TransitionEasing = string | {
+export type TransitionEasing = string | {
     [mode in TransitionMode]?: string;
 };
-export declare type TransitionDelay = number | {
+export type TransitionDelay = number | {
     [mode in TransitionMode]?: number;
 };
-export declare type TransitionEnterHandler = (node: HTMLElement, isAppearing: boolean) => void;
-export declare type TransitionExitHandler = (node: HTMLElement) => void;
+export type TransitionEnterHandler = (node: HTMLElement, isAppearing: boolean) => void;
+export type TransitionExitHandler = (node: HTMLElement) => void;
 export interface TransitionImplementationChildProps {
     ref?: Ref<HTMLElement>;
     style?: CSSProperties;

package/Transition/Zoom.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { TransitionImplementationProps } from './Transition';
-export declare type ZoomProps = TransitionImplementationProps;
+export type ZoomProps = TransitionImplementationProps;
 /**
  * The react component for `mezzanine` transition zoom.
  */

package/Tree/TreeNode.d.ts

@@ -3,7 +3,7 @@ import { TreeNodeValue, TreeSize } from '@mezzanine-ui/core/tree';
 import { CollapseProps } from '../Transition';
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
 import { TreeNodeData } from './typings';
-export declare type TreeNodeElementProps = Omit<NativeElementPropsWithoutKeyAndRef<'li'>, 'children' | 'value' | 'onSelect'>;
+export type TreeNodeElementProps = Omit<NativeElementPropsWithoutKeyAndRef<'li'>, 'children' | 'value' | 'onSelect'>;
 export interface TreeNodeProps extends TreeNodeData, TreeNodeElementProps {
     /**
      * Provided children will be wrapped under `Collapse`.

package/Tree/TreeNodeList.d.ts

@@ -2,7 +2,7 @@
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
 import { TreeNodeElementProps, TreeNodeProps } from './TreeNode';
 import { TreeNodeData, TreeNodeRefs } from './typings';
-export declare type TreeNodeListElementProps = Omit<NativeElementPropsWithoutKeyAndRef<'ul'>, 'children' | 'onSelect'>;
+export type TreeNodeListElementProps = Omit<NativeElementPropsWithoutKeyAndRef<'ul'>, 'children' | 'onSelect'>;
 export interface TreeNodeListProps extends TreeNodeListElementProps, Pick<TreeNodeProps, 'multiple' | 'onExpand' | 'onSelect' | 'selectable' | 'size'> {
     /**
      * Given nodes will be passed to `TreeNode` component orderly.

package/Tree/typings.d.ts

@@ -1,12 +1,12 @@
 import { MutableRefObject, ReactNode } from 'react';
 import { TreeNodeDataShape, TreeNodeEntityShape, TreeNodePropShape, TreeNodeValue } from '@mezzanine-ui/core/tree';
-export declare type TreeNodeProp = TreeNodePropShape<ReactNode>;
-export declare type TreeNodeData = TreeNodeDataShape<ReactNode>;
-export declare type TreeNodeEntity = TreeNodeEntityShape<ReactNode>;
-export declare type TreeNodeEntities = Map<TreeNodeValue, TreeNodeEntity>;
-export declare type TreeNodeRefsShape = Record<TreeNodeValue, HTMLLIElement>;
-export declare type TreeNodeRefs = MutableRefObject<TreeNodeRefsShape | undefined>;
-export declare type TreeExpandControl = {
+export type TreeNodeProp = TreeNodePropShape<ReactNode>;
+export type TreeNodeData = TreeNodeDataShape<ReactNode>;
+export type TreeNodeEntity = TreeNodeEntityShape<ReactNode>;
+export type TreeNodeEntities = Map<TreeNodeValue, TreeNodeEntity>;
+export type TreeNodeRefsShape = Record<TreeNodeValue, HTMLLIElement>;
+export type TreeNodeRefs = MutableRefObject<TreeNodeRefsShape | undefined>;
+export type TreeExpandControl = {
     collapse: (value: TreeNodeValue) => void;
     collapseAll: () => void;
     collapseAllFrom: (value: TreeNodeValue) => void;

package/Typography/Typography.d.ts

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

package/Typography/index.d.ts

@@ -6,6 +6,6 @@ export type { TypographyComponent, TypographyProps, };
  * @remark
  * Add type alias here for parsable to react docgen typescript.
  */
-declare type GenericTypography = <C extends TypographyComponent = 'p'>(props: PropsWithoutRef<TypographyProps<C>> & RefAttributes<ElementRef<C>>) => ReactElement;
+type GenericTypography = <C extends TypographyComponent = 'p'>(props: PropsWithoutRef<TypographyProps<C>> & RefAttributes<ElementRef<C>>) => ReactElement;
 declare const _default: GenericTypography;
 export default _default;

package/Upload/UploadPicture.d.ts

@@ -1,6 +1,6 @@
 import { Ref } from 'react';
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
-export declare type UploadPictureControl = {
+export type UploadPictureControl = {
     getData: () => void;
 };
 export interface UploadPictureProps extends Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'children' | 'onChange' | 'onError' | 'value'> {

package/Upload/UploadPictureBlock.d.ts

@@ -3,6 +3,7 @@ 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;
+    fileHost?: string;
     imageLoader: ImageUploader;
     multiple?: boolean;
     onDelete?: MouseEventHandler;

package/Upload/UploadPictureBlock.js

@@ -8,7 +8,7 @@ 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 { accept = 'image/*', disabled = false, imageLoader, multiple = false, onDelete, onUpload, onValueChange, fileHost, } = props;
     const [previewImage, setPreviewImage] = useState(imageLoader.getPreview() || '');
     const [value, setValue] = useState(imageLoader.getUrl() || '');
     const [percentage, setPercentage] = useState(imageLoader.getPercentage() || 0);
@@ -75,7 +75,7 @@ const UploadPictureBlock = forwardRef(function UploadPictureBlock(props, ref) {
             [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" })] })) : (
             // 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 }) }))] }));
+            jsx(Fragment, { children: showImage ? (jsxs(Fragment, { children: [jsx("img", { alt: "", src: (value ? `${fileHost || ''}${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/Upload/UploadPictureWall.d.ts

@@ -1,6 +1,6 @@
 import { Ref } from 'react';
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
-export declare type UploadPictureWallControl = {
+export type UploadPictureWallControl = {
     getAllData: () => void;
 };
 export interface UploadPictureWallBaseProps extends Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'children' | 'onChange' | 'onError' | 'value'> {
@@ -22,6 +22,11 @@ export interface UploadPictureWallBaseProps extends Omit<NativeElementPropsWitho
      * @default false
      */
     disabled?: boolean;
+    /**
+     * File hostname such as http://xxxx.xxxx/
+     * @default ''
+     */
+    fileHost?: string;
     /**
      * maximum file lengths
      */
@@ -70,6 +75,6 @@ export interface UploadPictureWallMultiUploadProps extends UploadPictureWallBase
     onUpload?: undefined;
     parallel?: undefined;
 }
-export declare type UploadPictureWallProps = UploadPictureWallSingleUploadProps | UploadPictureWallMultiUploadProps;
+export type UploadPictureWallProps = UploadPictureWallSingleUploadProps | UploadPictureWallMultiUploadProps;
 declare const UploadPictureWall: import("react").ForwardRefExoticComponent<UploadPictureWallProps & import("react").RefAttributes<HTMLDivElement>>;
 export default UploadPictureWall;

package/Upload/UploadPictureWall.js

@@ -9,7 +9,7 @@ import UploadPictureWallItem from './UploadPictureWallItem.js';
 import cx from 'clsx';
 
 const UploadPictureWall = forwardRef(function UploadPictureWall(props, ref) {
-    const { accept = 'image/*', className, controllerRef, defaultValues, disabled = false, maxLength, multiple = true, onChange, onDelete, onError, onMultiUpload, onUpload, onUploadSuccess, parallel = false, style, } = props;
+    const { accept = 'image/*', className, controllerRef, defaultValues, disabled = false, fileHost = '', maxLength, multiple = true, onChange, onDelete, onError, onMultiUpload, onUpload, onUploadSuccess, parallel = false, style, } = props;
     const [uploadPictureImageLoaders, setUploadPictureImageLoader] = useState(defaultValues ? compact(defaultValues).map((value) => new ImageUploader(undefined, value)) : []);
     const [needUploadImageLoaders, setNeedUploadImageLoaders] = useState([]);
     const [needUploadImageLoaderSets, setNeedUploadImageLoaderSets] = useState([]);
@@ -150,7 +150,7 @@ const UploadPictureWall = forwardRef(function UploadPictureWall(props, ref) {
     useImperativeHandle(controllerRef, () => ({
         getAllData: () => uploadPictureImageLoaders.map((loader) => loader.getAll()),
     }));
-    return (jsxs("div", { ref: ref, className: cx(uploadPictureWallClasses.host, className), style: style, children: [loaderList.map((up) => (jsx(UploadPictureWallItem, { accept: accept, disabled: disabled, imageLoader: up, multiple: multiple, onDelete: () => onImageDelete(up.getUid()) }, up.getUid()))), maxLength && loaderList.length >= maxLength ? null : (jsx(UploadPictureWallItem, { accept: accept, disabled: disabled, imageLoader: new ImageUploader(), multiple: multiple, onUpload: onImagesUpload }))] }));
+    return (jsxs("div", { ref: ref, className: cx(uploadPictureWallClasses.host, className), style: style, children: [loaderList.map((up) => (jsx(UploadPictureWallItem, { accept: accept, disabled: disabled, imageLoader: up, multiple: multiple, onDelete: () => onImageDelete(up.getUid()), fileHost: fileHost }, up.getUid()))), maxLength && loaderList.length >= maxLength ? null : (jsx(UploadPictureWallItem, { accept: accept, disabled: disabled, imageLoader: new ImageUploader(), multiple: multiple, onUpload: onImagesUpload, fileHost: fileHost }))] }));
 });
 var UploadPictureWall$1 = UploadPictureWall;
 

package/Upload/UploadPictureWallItem.d.ts

@@ -4,6 +4,7 @@ import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
 export interface UploadPictureWallItemProps extends Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'value' | 'onChange' | 'children'> {
     accept?: string;
     disabled?: boolean;
+    fileHost?: string;
     imageLoader: ImageUploader;
     multiple?: boolean;
     onDelete?: MouseEventHandler;

package/Upload/UploadPictureWallItem.js

@@ -5,14 +5,14 @@ import UploadPictureBlock from './UploadPictureBlock.js';
 import cx from 'clsx';
 
 const UploadPictureWallItem = (props) => {
-    const { accept, disabled, imageLoader, multiple, onDelete, onUpload, } = props;
+    const { accept, disabled, imageLoader, multiple, onDelete, onUpload, fileHost, } = props;
     const loader = useRef(imageLoader);
     useEffect(() => {
         if (!loader.current.getPreview()) {
             loader.current.setPreview();
         }
     }, []);
-    return (jsx("div", { className: cx(uploadPictureWallClasses.item), children: jsx(UploadPictureBlock, { accept: accept, disabled: disabled, imageLoader: loader.current, multiple: multiple, onDelete: onDelete, onUpload: onUpload }) }));
+    return (jsx("div", { className: cx(uploadPictureWallClasses.item), children: jsx(UploadPictureBlock, { accept: accept, disabled: disabled, imageLoader: loader.current, multiple: multiple, onDelete: onDelete, onUpload: onUpload, fileHost: fileHost }) }));
 };
 var UploadPictureWallItem$1 = UploadPictureWallItem;
 

package/hooks/useClickAway.d.ts

@@ -1,5 +1,5 @@
 import { RefObject, DependencyList } from 'react';
-export declare type ClickAwayEvent = MouseEvent | TouchEvent | PointerEvent;
-export declare type ClickAwayHandler = (event: ClickAwayEvent) => void;
-export declare type ClickAwayHandlerFactory = () => ClickAwayHandler | undefined;
+export type ClickAwayEvent = MouseEvent | TouchEvent | PointerEvent;
+export type ClickAwayHandler = (event: ClickAwayEvent) => void;
+export type ClickAwayHandlerFactory = () => ClickAwayHandler | undefined;
 export declare function useClickAway(factory: ClickAwayHandlerFactory, containerRef: RefObject<HTMLElement>, deps?: DependencyList): void;

package/hooks/useDocumentEscapeKeyDown.d.ts

@@ -1,3 +1,3 @@
 import { DependencyList } from 'react';
-export declare type DocumentEscapeKeyDownHandlerFactory = () => ((event: KeyboardEvent) => void) | undefined;
+export type DocumentEscapeKeyDownHandlerFactory = () => ((event: KeyboardEvent) => void) | undefined;
 export declare function useDocumentEscapeKeyDown(factory: DocumentEscapeKeyDownHandlerFactory, deps?: DependencyList): void;

package/hooks/useDocumentEvents.d.ts

@@ -1,5 +1,5 @@
 import { DependencyList } from 'react';
-export declare type DocumentEventHandlersFactory = () => {
+export type DocumentEventHandlersFactory = () => {
     [event in keyof DocumentEventMap]?: (event: DocumentEventMap[event]) => void;
 } | undefined;
 export declare function useDocumentEvents(factory: DocumentEventHandlersFactory, deps?: DependencyList): void;

package/hooks/useDocumentTabKeyDown.d.ts

@@ -1,3 +1,3 @@
 import { DependencyList } from 'react';
-export declare type DocumentTabKeyDownHandlerFactory = () => ((event: KeyboardEvent) => void) | undefined;
+export type DocumentTabKeyDownHandlerFactory = () => ((event: KeyboardEvent) => void) | undefined;
 export declare function useDocumentTabKeyDown(factory: DocumentTabKeyDownHandlerFactory, deps?: DependencyList): void;