@etsoo/materialui 1.2.28 → 1.2.30

package/lib/AddresSelector.d.ts

@@ -96,5 +96,5 @@ export type AddressSelectorProps = {
  * Address selector
  * @param props Props
  */
-export declare function AddressSelector(props: AddressSelectorProps): JSX.Element;
+export declare function AddressSelector(props: AddressSelectorProps): React.JSX.Element;
 export {};

package/lib/AuditDisplay.d.ts

@@ -28,4 +28,4 @@ export interface AuditDisplayProps extends Omit<ListMoreDisplayProps<AuditLineDt
  * @param props Props
  * @returns Component
  */
-export declare function AuditDisplay(props: AuditDisplayProps): JSX.Element;
+export declare function AuditDisplay(props: AuditDisplayProps): React.JSX.Element;

package/lib/BackButton.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import { IconButtonProps } from '@mui/material';
+import React from 'react';
 /**
  * BackButton props
  */
@@ -10,4 +10,4 @@ export interface BackButtonProps extends IconButtonProps {
  * @param props Props
  * @returns Component
  */
-export declare function BackButton(props: BackButtonProps): JSX.Element;
+export declare function BackButton(props: BackButtonProps): React.JSX.Element;

package/lib/BridgeCloseButton.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
 import { IBridgeHost } from "@etsoo/appscript";
 import { BoxProps, IconButtonProps } from "@mui/material";
+import React from "react";
 /**
  * Bridge close button props
  */
@@ -20,4 +20,4 @@ export interface BridgeCloseButtonProps extends IconButtonProps {
  * @param props Props
  * @returns Component
  */
-export declare function BridgeCloseButton(props: BridgeCloseButtonProps): JSX.Element;
+export declare function BridgeCloseButton(props: BridgeCloseButtonProps): React.JSX.Element;

package/lib/ButtonLink.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import { ButtonProps } from "@mui/material";
+import React from "react";
 /**
  * ButtonLink props
  */
@@ -18,4 +18,4 @@ export type ButtonLinkProps = Omit<ButtonProps, "href" | "onClick"> & {
  * @param props Props
  * @returns Component
  */
-export declare function ButtonLink(props: ButtonLinkProps): JSX.Element;
+export declare function ButtonLink(props: ButtonLinkProps): React.JSX.Element;

package/lib/ComboBox.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import { DataTypes, IdDefaultType, LabelDefaultType, ListType } from "@etsoo/shared";
+import React from "react";
 import { AutocompleteExtendedProps } from "./AutocompleteExtendedProps";
 /**
  * ComboBox props
@@ -35,4 +35,4 @@ export type ComboBoxProps<T extends object = ListType, D extends DataTypes.Keys<
  * @param props Props
  * @returns Component
  */
-export declare function ComboBox<T extends object = ListType, D extends DataTypes.Keys<T> = IdDefaultType<T>, L extends DataTypes.Keys<T, string> = LabelDefaultType<T>>(props: ComboBoxProps<T, D, L>): JSX.Element;
+export declare function ComboBox<T extends object = ListType, D extends DataTypes.Keys<T> = IdDefaultType<T>, L extends DataTypes.Keys<T, string> = LabelDefaultType<T>>(props: ComboBoxProps<T, D, L>): React.JSX.Element;

package/lib/ComboBoxMultiple.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import { DataTypes, IdDefaultType, LabelDefaultType, ListType } from "@etsoo/shared";
+import React from "react";
 import { AutocompleteExtendedProps } from "./AutocompleteExtendedProps";
 /**
  * ComboBox multiple props
@@ -39,4 +39,4 @@ export type ComboBoxMultipleProps<T extends object = ListType, D extends DataTyp
  * @param props Props
  * @returns Component
  */
-export declare function ComboBoxMultiple<T extends object = ListType, D extends DataTypes.Keys<T> = IdDefaultType<T>, L extends DataTypes.Keys<T, string> = LabelDefaultType<T>>(props: ComboBoxMultipleProps<T, D, L>): JSX.Element;
+export declare function ComboBoxMultiple<T extends object = ListType, D extends DataTypes.Keys<T> = IdDefaultType<T>, L extends DataTypes.Keys<T, string> = LabelDefaultType<T>>(props: ComboBoxMultipleProps<T, D, L>): React.JSX.Element;

package/lib/ComboBoxMultiple.js

@@ -28,6 +28,18 @@ export function ComboBoxMultiple(props) {
     // Options state
     const [localOptions, setOptions] = React.useState(options !== null && options !== void 0 ? options : []);
     const isMounted = React.useRef(true);
+    // Local default value
+    const localValue = idValue != null
+        ? localOptions.filter((o) => o[idField] === idValue)
+        : idValues != null
+            ? localOptions.filter((o) => idValues === null || idValues === void 0 ? void 0 : idValues.includes(o[idField]))
+            : defaultValue !== null && defaultValue !== void 0 ? defaultValue : value;
+    // State
+    // null for controlled
+    const [stateValue, setStateValue] = React.useState(null);
+    React.useEffect(() => {
+        setStateValue(localValue !== null && localValue !== void 0 ? localValue : []);
+    }, [localValue]);
     // When options change
     // [options] will cause infinite loop
     const propertyWay = loadData == null;
@@ -45,20 +57,6 @@ export function ComboBoxMultiple(props) {
             }
         }
     }, [options, propertyWay]);
-    // Local default value
-    const localValue = idValue != null
-        ? localOptions.filter((o) => o[idField] === idValue)
-        : idValues != null
-            ? localOptions.filter((o) => idValues === null || idValues === void 0 ? void 0 : idValues.includes(o[idField]))
-            : defaultValue !== null && defaultValue !== void 0 ? defaultValue : value;
-    // State
-    // null for controlled
-    const [stateValue, setStateValue] = React.useState(null);
-    React.useEffect(() => {
-        if (localValue != null && localValue != stateValue) {
-            setStateValue(localValue);
-        }
-    }, [localValue]);
     // Add readOnly
     const addReadOnly = (params) => {
         if (readOnly != null) {
@@ -82,9 +80,7 @@ export function ComboBoxMultiple(props) {
     const getValue = (value) => {
         if (value == null)
             return "";
-        if (Array.isArray(value))
-            return value.map((item) => item[idField]).join(",");
-        return `${value[idField]}`;
+        return value.map((item) => item[idField]).join(",");
     };
     const setInputValue = (value) => {
         // Set state
@@ -123,10 +119,10 @@ export function ComboBoxMultiple(props) {
     return (React.createElement("div", null,
         React.createElement("input", { ref: inputRef, "data-reset": "true", type: "text", style: { display: "none" }, name: name, value: getValue(stateValue), readOnly: true, onChange: inputOnChange }),
         React.createElement(Autocomplete, { value: stateValue == null
-                ? undefined
+                ? []
                 : Array.isArray(stateValue)
                     ? stateValue
-                    : [stateValue], disableCloseOnSelect: disableCloseOnSelect, getOptionLabel: getOptionLabel, isOptionEqualToValue: (option, value) => option[idField] === value[idField], onChange: (event, value, reason, details) => {
+                    : [stateValue], disableCloseOnSelect: disableCloseOnSelect, getOptionLabel: getOptionLabel, multiple: true, isOptionEqualToValue: (option, value) => option[idField] === value[idField], onChange: (event, value, reason, details) => {
                 // Set value
                 setInputValue(value);
                 // Custom

package/lib/ComboBoxPro.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import { AutocompleteProps } from "@mui/material";
+import React from "react";
 import { InputFieldProps } from "./InputField";
 import { ListType2 } from "@etsoo/shared";
 export type ComboBoxProProps<D extends ListType2 = ListType2> = Omit<AutocompleteProps<D, false, false, true>, "open" | "multiple" | "options" | "renderInput"> & {
@@ -29,4 +29,4 @@ export type ComboBoxProProps<D extends ListType2 = ListType2> = Omit<Autocomplet
      */
     onValueChange?: (value: D | null) => void;
 };
-export declare function ComboBoxPro<D extends ListType2 = ListType2>(props: ComboBoxProProps<D>): JSX.Element;
+export declare function ComboBoxPro<D extends ListType2 = ListType2>(props: ComboBoxProProps<D>): React.JSX.Element;

package/lib/CountryList.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
 import { AddressRegionDb, RegionsRQ } from '@etsoo/appscript';
 import { DataTypes } from '@etsoo/shared';
+import React from 'react';
 import { TiplistProps } from './Tiplist';
 /**
  * Country list props
@@ -27,4 +27,4 @@ export type CountryListProps = Omit<DataTypes.Optional<TiplistProps<AddressRegio
  * @param props Props
  * @returns Component
  */
-export declare function CountryList(props: CountryListProps): JSX.Element;
+export declare function CountryList(props: CountryListProps): React.JSX.Element;

package/lib/DataGridEx.d.ts

@@ -91,4 +91,4 @@ export declare function DataGridExCalColumns<T>(columns: GridColumn<T>[]): {
  * @param props Props
  * @returns Component
  */
-export declare function DataGridEx<T extends object, D extends DataTypes.Keys<T> = IdDefaultType<T>>(props: DataGridExProps<T, D>): JSX.Element;
+export declare function DataGridEx<T extends object, D extends DataTypes.Keys<T> = IdDefaultType<T>>(props: DataGridExProps<T, D>): React.JSX.Element;

package/lib/DataSteps.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
 import { TextFieldProps } from "@mui/material";
 import { InputDialogProps } from "@etsoo/react";
+import React from "react";
 /**
  * Data step
  */
@@ -36,4 +36,4 @@ export type DataStepsProps<T extends object> = Omit<TextFieldProps, "InputProps"
  * @param props Props
  * @returns Component
  */
-export declare function DataSteps<T extends object>(props: DataStepsProps<T>): JSX.Element;
+export declare function DataSteps<T extends object>(props: DataStepsProps<T>): React.JSX.Element;

package/lib/DataTable.d.ts

@@ -30,4 +30,4 @@ export type DataTableProps<R extends GridValidRowModel = any> = Omit<DataGridPro
  * @param props Props
  * @returns Component
  */
-export declare function DataTable<R extends GridValidRowModel = any>(props: DataTableProps<R>): JSX.Element;
+export declare function DataTable<R extends GridValidRowModel = any>(props: DataTableProps<R>): React.JSX.Element;

package/lib/DialogButton.d.ts

@@ -51,4 +51,4 @@ export interface DialogButtonProps extends ButtonProps {
  * @param props Props
  * @returns Component
  */
-export declare function DialogButton(props: DialogButtonProps): JSX.Element;
+export declare function DialogButton(props: DialogButtonProps): React.JSX.Element;

package/lib/DnDList.d.ts

@@ -92,4 +92,4 @@ export interface DnDListPros<D extends object, K extends DataTypes.Keys<D>> {
  */
 export declare function DnDList<D extends {
     id: UniqueIdentifier;
-}, K extends DataTypes.Keys<D, UniqueIdentifier> = DataTypes.Keys<D, UniqueIdentifier>>(props: DnDListPros<D, K>): JSX.Element;
+}, K extends DataTypes.Keys<D, UniqueIdentifier> = DataTypes.Keys<D, UniqueIdentifier>>(props: DnDListPros<D, K>): React.JSX.Element;

package/lib/DraggablePaperComponent.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
 import { PaperProps } from "@mui/material";
+import React from "react";
 /**
  * Draggable paper component
  * @param props Props
  * @returns Component
  */
-export declare function DraggablePaperComponent(props: PaperProps): JSX.Element;
+export declare function DraggablePaperComponent(props: PaperProps): React.JSX.Element;

package/lib/EmailInput.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import { TextFieldProps } from '@mui/material';
+import React from 'react';
 /**
  * Email input props
  */
@@ -8,4 +8,4 @@ export type EmailInputProps = Omit<TextFieldProps, 'type'> & {};
  * Email input
  * @param props Props
  */
-export declare function EmailInput(props: EmailInputProps): JSX.Element;
+export declare function EmailInput(props: EmailInputProps): React.JSX.Element;

package/lib/FabBox.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import { BoxProps, PaperProps } from "@mui/material";
+import React from "react";
 type SharedProps = keyof BoxProps & keyof PaperProps;
 /**
  * Fabs container box props
@@ -23,5 +23,5 @@ export type FabBoxProps = Pick<BoxProps, SharedProps> & Pick<PaperProps, SharedP
  * @param props Props
  * @returns Component
  */
-export declare function FabBox(props: FabBoxProps): JSX.Element;
+export declare function FabBox(props: FabBoxProps): React.JSX.Element;
 export {};

package/lib/FlexBox.d.ts

@@ -1,14 +1,14 @@
-/// <reference types="react" />
 import { StackProps } from '@mui/material';
+import React from 'react';
 /**
  * Horizonal box
  * @param props Props
  * @returns Component
  */
-export declare function HBox(props: Omit<StackProps, 'ref'>): JSX.Element;
+export declare function HBox(props: Omit<StackProps, 'ref'>): React.JSX.Element;
 /**
  * Vertial box
  * @param props Props
  * @returns Component
  */
-export declare function VBox(props: Omit<StackProps, 'ref'>): JSX.Element;
+export declare function VBox(props: Omit<StackProps, 'ref'>): React.JSX.Element;

package/lib/HiSelector.d.ts

@@ -67,4 +67,4 @@ export type HiSelectorProps<T extends object, D extends DataTypes.Keys<T> = IdDe
  * @param props Prop
  * @returns Component
  */
-export declare function HiSelector<T extends object, D extends DataTypes.Keys<T> = IdDefaultType<T>, L extends DataTypes.Keys<T, string> = LabelDefaultType<T>>(props: HiSelectorProps<T, D, L>): JSX.Element;
+export declare function HiSelector<T extends object, D extends DataTypes.Keys<T> = IdDefaultType<T>, L extends DataTypes.Keys<T, string> = LabelDefaultType<T>>(props: HiSelectorProps<T, D, L>): React.JSX.Element;

package/lib/HiSelectorTL.d.ts

@@ -59,4 +59,4 @@ export type HiSelectorTLProps<T extends object, D extends DataTypes.Keys<T> = Id
  * @param props Prop
  * @returns Component
  */
-export declare function HiSelectorTL<T extends object, D extends DataTypes.Keys<T> = IdDefaultType<T>>(props: HiSelectorTLProps<T, D>): JSX.Element;
+export declare function HiSelectorTL<T extends object, D extends DataTypes.Keys<T> = IdDefaultType<T>>(props: HiSelectorTLProps<T, D>): React.JSX.Element;

package/lib/IconButtonLink.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import { IconButtonProps } from "@mui/material";
+import React from "react";
 /**
  * IconButtonLink props
  */
@@ -18,4 +18,4 @@ export type IconButtonLinkProps = Omit<IconButtonProps, "href" | "onClick"> & {
  * @param props Props
  * @returns Component
  */
-export declare function IconButtonLink(props: IconButtonLinkProps): JSX.Element;
+export declare function IconButtonLink(props: IconButtonLinkProps): React.JSX.Element;

package/lib/InputTipField.d.ts

@@ -34,5 +34,5 @@ export type InputTipFieldProps<T extends ItemType = ItemType> = InputFieldProps
  * @param props Props
  * @returns Component
  */
-export declare function InputTipField<T extends ItemType = ItemType>(props: InputTipFieldProps<T>): JSX.Element;
+export declare function InputTipField<T extends ItemType = ItemType>(props: InputTipFieldProps<T>): React.JSX.Element;
 export {};

package/lib/ItemList.d.ts

@@ -65,4 +65,4 @@ export interface ItemListProps<T extends object, D extends DataTypes.Keys<T>, L
  * Item list component
  * @param props Properties
  */
-export declare function ItemList<T extends object = ListType, D extends DataTypes.Keys<T> = IdDefaultType<T>, L extends DataTypes.Keys<T, string> = LabelDefaultType<T>>(props: ItemListProps<T, D, L>): JSX.Element;
+export declare function ItemList<T extends object = ListType, D extends DataTypes.Keys<T> = IdDefaultType<T>, L extends DataTypes.Keys<T, string> = LabelDefaultType<T>>(props: ItemListProps<T, D, L>): React.JSX.Element;

package/lib/ListChooser.d.ts

@@ -52,5 +52,5 @@ export type ListChooserProps<T extends object, D extends DataTypes.Keys<T>, Q ex
  * @param props Props
  * @returns Component
  */
-export declare function ListChooser<T extends object, D extends DataTypes.Keys<T> = IdDefaultType<T>, Q extends object = QueryData>(props: ListChooserProps<T, D, Q>): JSX.Element;
+export declare function ListChooser<T extends object, D extends DataTypes.Keys<T> = IdDefaultType<T>, Q extends object = QueryData>(props: ListChooserProps<T, D, Q>): React.JSX.Element;
 export {};

package/lib/ListMoreDisplay.d.ts

@@ -36,4 +36,4 @@ export interface ListMoreDisplayProps<T extends object, F extends DataTypes.Basi
  * @param props Props
  * @returns Component
  */
-export declare function ListMoreDisplay<T extends object, F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate>(props: ListMoreDisplayProps<T, F>): JSX.Element;
+export declare function ListMoreDisplay<T extends object, F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate>(props: ListMoreDisplayProps<T, F>): React.JSX.Element;

package/lib/LoadingButton.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import { ButtonProps, CircularProgressProps } from '@mui/material';
+import React from 'react';
 /**
  * Loading button props
  */
@@ -13,4 +13,4 @@ export type LoadingButtonProps = ButtonProps & {
  * Loading button
  * @param props Props
  */
-export declare function LoadingButton(props: LoadingButtonProps): JSX.Element;
+export declare function LoadingButton(props: LoadingButtonProps): React.JSX.Element;

package/lib/MaskInput.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import { TextFieldProps } from '@mui/material';
+import React from 'react';
 /**
  * Mask input props
  */
@@ -31,4 +31,4 @@ export type MaskInputProps<T extends IMask.AnyMaskedOptions> = TextFieldProps &
  * @param props Props
  * @returns Component
  */
-export declare function MaskInput<T extends IMask.AnyMaskedOptions = IMask.AnyMaskedOptions>(props: MaskInputProps<T>): JSX.Element;
+export declare function MaskInput<T extends IMask.AnyMaskedOptions = IMask.AnyMaskedOptions>(props: MaskInputProps<T>): React.JSX.Element;

package/lib/MenuButton.d.ts

@@ -6,4 +6,4 @@ export type MenuButtonProps<T extends DataTypes.IdItem> = Omit<MenuProps, "open"
     labelField: DataTypes.Keys<T, string>;
     button: ((clickHandler: React.MouseEventHandler<HTMLButtonElement>) => React.ReactNode) | ButtonProps;
 };
-export declare function MenuButton<T extends DataTypes.IdItem>(props: MenuButtonProps<T>): JSX.Element;
+export declare function MenuButton<T extends DataTypes.IdItem>(props: MenuButtonProps<T>): React.JSX.Element;

package/lib/MobileListItemRenderer.d.ts

@@ -14,4 +14,4 @@ export declare function MobileListItemRenderer<T>({ data, itemHeight, margins }:
     React.ReactNode | (ListItemReact | boolean)[],
     React.ReactNode,
     React.ReactNode?
-]): JSX.Element;
+]): React.JSX.Element;

package/lib/MoreFab.d.ts

@@ -42,4 +42,4 @@ export interface MoreFabProps extends CustomFabProps {
  * More fab
  * @returns Component
  */
-export declare function MoreFab(props: MoreFabProps): JSX.Element;
+export declare function MoreFab(props: MoreFabProps): React.JSX.Element;

package/lib/NotifierMU.d.ts

@@ -17,7 +17,7 @@ export declare class NotificationMU extends NotificationReact {
      * @param className Style class name
      * @param classes Style classes
      */
-    render(props: NotificationRenderProps, className?: string): JSX.Element;
+    render(props: NotificationRenderProps, className?: string): React.JSX.Element;
 }
 /**
  * Antd notifier
@@ -36,7 +36,7 @@ export declare class NotifierMU extends NotifierReact {
      * @param children Children
      * @param options Other options
      */
-    protected createContainer: (align: NotificationAlign, children: React.ReactNode[]) => JSX.Element;
+    protected createContainer: (align: NotificationAlign, children: React.ReactNode[]) => React.JSX.Element;
     /**
      * Add raw definition
      * @param data Notification data definition

package/lib/OptionBool.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import { ListType1 } from "@etsoo/shared";
+import React from "react";
 import { OptionGroupProps } from "./OptionGroup";
 /**
  * OptionBool props
@@ -10,4 +10,4 @@ export type OptionBoolProps = Omit<OptionGroupProps<ListType1, "id", "label">, "
  * @param props Props
  * @returns Component
  */
-export declare function OptionBool(props: OptionBoolProps): JSX.Element;
+export declare function OptionBool(props: OptionBoolProps): React.JSX.Element;

package/lib/OptionGroup.d.ts

@@ -81,4 +81,4 @@ export type OptionGroupProps<T extends object, D extends DataTypes.Keys<T>, L ex
  * @param props Props
  * @returns Component
  */
-export declare function OptionGroup<T extends object = ListType, D extends DataTypes.Keys<T> = IdDefaultType<T>, L extends DataTypes.Keys<T, string> = LabelDefaultType<T>>(props: OptionGroupProps<T, D, L>): JSX.Element;
+export declare function OptionGroup<T extends object = ListType, D extends DataTypes.Keys<T> = IdDefaultType<T>, L extends DataTypes.Keys<T, string> = LabelDefaultType<T>>(props: OptionGroupProps<T, D, L>): React.JSX.Element;

package/lib/PList.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 /**
  * Paragraph items list props
  */
@@ -12,4 +12,4 @@ export interface PListProps {
  * Paragraph items list
  * @param items Items
  */
-export declare function PList(props: PListProps): JSX.Element;
+export declare function PList(props: PListProps): React.JSX.Element;

package/lib/PercentCircularProgress.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
 import { CircularProgressProps, TypographyProps } from "@mui/material";
+import React from "react";
 export type PercentCircularProgressProps = CircularProgressProps & {
     value: number;
     valueUnit?: string;
     textProps?: TypographyProps<"div">;
 };
-export declare function PercentCircularProgress(props: PercentCircularProgressProps): JSX.Element;
+export declare function PercentCircularProgress(props: PercentCircularProgressProps): React.JSX.Element;

package/lib/PercentLinearProgress.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
 import { LinearProgressProps, TypographyProps } from "@mui/material";
+import React from "react";
 export type PercentLinearProgressProps = LinearProgressProps & {
     value: number;
     valueUnit?: string;
     textProps?: TypographyProps;
 };
-export declare function PercentLinearProgress(props: PercentLinearProgressProps): JSX.Element;
+export declare function PercentLinearProgress(props: PercentLinearProgressProps): React.JSX.Element;

package/lib/ProgressCount.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 /**
  * Process count props
  */
@@ -41,4 +41,4 @@ export interface ProgressCountProps {
  * @param props Props
  * @returns Component
  */
-export declare function ProgressCount(props: ProgressCountProps): JSX.Element;
+export declare function ProgressCount(props: ProgressCountProps): React.JSX.Element;

package/lib/PullToRefreshUI.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { Options } from 'pulltorefreshjs';
 /**
  * PullToRefresh UI
@@ -6,4 +6,4 @@ import { Options } from 'pulltorefreshjs';
  * @param props Props
  * @returns Component
  */
-export declare function PullToRefreshUI(props: Options): JSX.Element;
+export declare function PullToRefreshUI(props: Options): React.JSX.Element;

package/lib/QuickList.d.ts

@@ -53,4 +53,4 @@ export type QuickListProps<T extends ListType2 = ListType2> = StackProps & {
  * @param props Props
  * @returns Component
  */
-export declare function QuickList<T extends ListType2 = ListType2>(props: QuickListProps<T>): JSX.Element;
+export declare function QuickList<T extends ListType2 = ListType2>(props: QuickListProps<T>): React.JSX.Element;

package/lib/ResponsibleContainer.d.ts

@@ -96,4 +96,4 @@ export type ResponsibleContainerProps<T extends object, F extends DataTypes.Basi
  * @param props Props
  * @returns Layout
  */
-export declare function ResponsibleContainer<T extends object, F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate, D extends DataTypes.Keys<T> = IdDefaultType<T>>(props: ResponsibleContainerProps<T, F, D>): JSX.Element;
+export declare function ResponsibleContainer<T extends object, F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate, D extends DataTypes.Keys<T> = IdDefaultType<T>>(props: ResponsibleContainerProps<T, F, D>): React.JSX.Element;

package/lib/ScrollTopFab.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import React from "react";
 import { CustomFabProps } from "./CustomFabProps";
 /**
  * Scroll to top fab
  * @returns Component
  */
-export declare function ScrollTopFab(props: CustomFabProps): JSX.Element;
+export declare function ScrollTopFab(props: CustomFabProps): React.JSX.Element;

package/lib/ScrollerListEx.d.ts

@@ -73,4 +73,4 @@ export type ScrollerListExProps<T extends object, D extends DataTypes.Keys<T>> =
  * @param props Props
  * @returns Component
  */
-export declare function ScrollerListEx<T extends object, D extends DataTypes.Keys<T> = IdDefaultType<T>>(props: ScrollerListExProps<T, D>): JSX.Element;
+export declare function ScrollerListEx<T extends object, D extends DataTypes.Keys<T> = IdDefaultType<T>>(props: ScrollerListExProps<T, D>): React.JSX.Element;

package/lib/SearchBar.d.ts

@@ -25,4 +25,4 @@ export interface SearchBarProps {
  * @param props Props
  * @returns Component
  */
-export declare function SearchBar(props: SearchBarProps): JSX.Element;
+export declare function SearchBar(props: SearchBarProps): React.JSX.Element;

package/lib/SearchField.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import { TextFieldProps } from '@mui/material';
+import React from 'react';
 /**
  * Search field props
  */
@@ -18,4 +18,4 @@ export type SearchFieldProps = TextFieldProps & {
  * @param props Props
  * @returns Component
  */
-export declare function SearchField(props: SearchFieldProps): JSX.Element;
+export declare function SearchField(props: SearchFieldProps): React.JSX.Element;

package/lib/SearchOptionGroup.d.ts

@@ -1,9 +1,9 @@
-/// <reference types="react" />
 import { DataTypes, IdDefaultType, LabelDefaultType, ListType } from '@etsoo/shared';
+import React from 'react';
 import { OptionGroupProps } from './OptionGroup';
 /**
  * Search OptionGroup
  * @param props Props
  * @returns Component
  */
-export declare function SearchOptionGroup<T extends object = ListType, D extends DataTypes.Keys<T> = IdDefaultType<T>, L extends DataTypes.Keys<T, string> = LabelDefaultType<T>>(props: OptionGroupProps<T, D, L>): JSX.Element;
+export declare function SearchOptionGroup<T extends object = ListType, D extends DataTypes.Keys<T> = IdDefaultType<T>, L extends DataTypes.Keys<T, string> = LabelDefaultType<T>>(props: OptionGroupProps<T, D, L>): React.JSX.Element;

package/lib/SelectBool.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import { ListType1 } from "@etsoo/shared";
+import React from "react";
 import { SelectExProps } from "./SelectEx";
 /**
  * SelectBool props
@@ -10,4 +10,4 @@ export type SelectBoolProps = Omit<SelectExProps<ListType1>, "options" | "loadDa
  * @param props Props
  * @returns Component
  */
-export declare function SelectBool(props: SelectBoolProps): JSX.Element;
+export declare function SelectBool(props: SelectBoolProps): React.JSX.Element;

package/lib/SelectEx.d.ts

@@ -67,4 +67,4 @@ export type SelectExProps<T extends object, D extends DataTypes.Keys<T> = IdDefa
  * @param props Props
  * @returns Component
  */
-export declare function SelectEx<T extends object = ListType, D extends DataTypes.Keys<T> = IdDefaultType<T>, L extends DataTypes.Keys<T, string> = LabelDefaultType<T>>(props: SelectExProps<T, D, L>): JSX.Element;
+export declare function SelectEx<T extends object = ListType, D extends DataTypes.Keys<T> = IdDefaultType<T>, L extends DataTypes.Keys<T, string> = LabelDefaultType<T>>(props: SelectExProps<T, D, L>): React.JSX.Element;

package/lib/Switch.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { FormControlLabelProps } from '@mui/material';
 /**
  * Switch props
@@ -26,4 +26,4 @@ export interface SwitchProps extends Omit<FormControlLabelProps, 'control'> {
  * @param props Props
  * @returns Component
  */
-export declare function Switch(props: SwitchProps): JSX.Element;
+export declare function Switch(props: SwitchProps): React.JSX.Element;

package/lib/SwitchAnt.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import { SwitchProps } from "@mui/material/Switch";
+import React from "react";
 /**
  * Ant style switch props
  */
@@ -22,4 +22,4 @@ export interface SwitchAntProps extends SwitchProps {
  * @param props Props
  * @returns Component
  */
-export declare function SwitchAnt(props: SwitchAntProps): JSX.Element;
+export declare function SwitchAnt(props: SwitchAntProps): React.JSX.Element;

package/lib/SwitchField.d.ts

@@ -42,4 +42,4 @@ export type SwitchFieldProps = Omit<FormControlProps<"fieldset">, "defaultValue"
  * @param props Props
  * @returns Component
  */
-export declare function SwitchField(props: SwitchFieldProps): JSX.Element;
+export declare function SwitchField(props: SwitchFieldProps): React.JSX.Element;

package/lib/TabBox.d.ts

@@ -51,4 +51,4 @@ export interface TabBoxPros extends BoxProps {
  * @param props Props
  * @returns Component
  */
-export declare function TabBox(props: TabBoxPros): JSX.Element;
+export declare function TabBox(props: TabBoxPros): React.JSX.Element;

package/lib/TableEx.d.ts

@@ -62,4 +62,4 @@ export type TableExProps<T extends object, D extends DataTypes.Keys<T>> = TableP
  * @param props Props
  * @returns Component
  */
-export declare function TableEx<T extends object, D extends DataTypes.Keys<T> = IdDefaultType<T>>(props: TableExProps<T, D>): JSX.Element;
+export declare function TableEx<T extends object, D extends DataTypes.Keys<T> = IdDefaultType<T>>(props: TableExProps<T, D>): React.JSX.Element;

package/lib/TagList.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import { AutocompleteProps } from "@mui/material";
+import React from "react";
 import { InputFieldProps } from "./InputField";
 export type TagListProps = Omit<AutocompleteProps<string, true, false, true>, "open" | "multiple" | "freeSolo" | "options" | "renderInput"> & {
     /**
@@ -19,4 +19,4 @@ export type TagListProps = Omit<AutocompleteProps<string, true, false, true>, "o
      */
     maxItems?: number;
 };
-export declare function TagList(props: TagListProps): JSX.Element;
+export declare function TagList(props: TagListProps): React.JSX.Element;

package/lib/TagListPro.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import { AutocompleteProps } from "@mui/material";
+import React from "react";
 import { InputFieldProps } from "./InputField";
 import { ListType2 } from "@etsoo/shared";
 export type TagListProProps<D extends ListType2 = ListType2> = Omit<AutocompleteProps<D, true, false, false>, "open" | "multiple" | "options" | "renderInput"> & {
@@ -20,4 +20,4 @@ export type TagListProProps<D extends ListType2 = ListType2> = Omit<Autocomplete
      */
     maxItems?: number;
 };
-export declare function TagListPro<D extends ListType2 = ListType2>(props: TagListProProps<D>): JSX.Element;
+export declare function TagListPro<D extends ListType2 = ListType2>(props: TagListProProps<D>): React.JSX.Element;

package/lib/Tiplist.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import { DataTypes, IdDefaultType, ListType } from "@etsoo/shared";
+import React from "react";
 import { AutocompleteExtendedProps } from "./AutocompleteExtendedProps";
 /**
  * Tiplist props
@@ -23,4 +23,4 @@ export type TiplistProps<T extends object, D extends DataTypes.Keys<T>> = Omit<A
  * @param props Props
  * @returns Component
  */
-export declare function Tiplist<T extends object = ListType, D extends DataTypes.Keys<T> = IdDefaultType<T>>(props: TiplistProps<T, D>): JSX.Element;
+export declare function Tiplist<T extends object = ListType, D extends DataTypes.Keys<T> = IdDefaultType<T>>(props: TiplistProps<T, D>): React.JSX.Element;

package/lib/TiplistPro.d.ts

@@ -1,6 +1,6 @@
 import { ListType2 } from "@etsoo/shared";
 import { AutocompleteProps } from "@mui/material";
-import { ChangeEventHandler } from "react";
+import React, { ChangeEventHandler } from "react";
 import { InputFieldProps } from "./InputField";
 /**
  * TiplistPro props
@@ -49,4 +49,4 @@ export type TiplistProProps<T extends ListType2 = ListType2> = Omit<Autocomplete
  * @param props Props
  * @returns Component
  */
-export declare function TiplistPro<T extends ListType2 = ListType2>(props: TiplistProProps<T>): JSX.Element;
+export declare function TiplistPro<T extends ListType2 = ListType2>(props: TiplistProProps<T>): React.JSX.Element;

package/lib/TooltipClick.d.ts

@@ -12,4 +12,4 @@ export interface TooltipClickProps extends Omit<TooltipProps, 'children' | 'open
  * @param props Props
  * @returns Component
  */
-export declare function TooltipClick(props: TooltipClickProps): JSX.Element;
+export declare function TooltipClick(props: TooltipClickProps): React.JSX.Element;

package/lib/TwoFieldInput.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { InputFieldProps } from './InputField';
 type ValueType = string | number | Date | null | undefined;
 /**
@@ -19,5 +19,5 @@ export type TwoFieldInputProps = Omit<InputFieldProps, 'InputProps' | 'value'> &
  * @param props Props
  * @returns Component
  */
-export declare function TwoFieldInput(props: TwoFieldInputProps): JSX.Element;
+export declare function TwoFieldInput(props: TwoFieldInputProps): React.JSX.Element;
 export {};

package/lib/UserAvatar.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 /**
  * User avatar props
  */
@@ -21,4 +21,4 @@ export interface UserAvatarProps {
  * @param props Props
  * @returns Component
  */
-export declare function UserAvatar(props: UserAvatarProps): JSX.Element;
+export declare function UserAvatar(props: UserAvatarProps): React.JSX.Element;

package/lib/UserAvatarEditor.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 /**
  * User avatar editor to Blob helper
  */
@@ -50,4 +50,4 @@ export interface UserAvatarEditorProps {
  * @param props Props
  * @returns Component
  */
-export declare function UserAvatarEditor(props: UserAvatarEditorProps): JSX.Element;
+export declare function UserAvatarEditor(props: UserAvatarEditorProps): React.JSX.Element;

package/lib/pages/CommonPage.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 import { CommonPageProps } from "./CommonPageProps";
 /**
  * Default scroll container
@@ -8,4 +8,4 @@ export declare const CommonPageScrollContainer: typeof globalThis;
  * Common page
  * @param props Props
  */
-export declare function CommonPage(props: CommonPageProps): JSX.Element;
+export declare function CommonPage(props: CommonPageProps): React.JSX.Element;

package/lib/pages/DataGridPage.d.ts

@@ -1,9 +1,9 @@
-/// <reference types="react" />
 import { DataTypes, IdDefaultType } from "@etsoo/shared";
+import React from "react";
 import { DataGridPageProps } from "./DataGridPageProps";
 /**
  * DataGrid page
  * @param props Props
  * @returns Component
  */
-export declare function DataGridPage<T extends object, F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate, D extends DataTypes.Keys<T> = IdDefaultType<T>>(props: DataGridPageProps<T, F, D>): JSX.Element;
+export declare function DataGridPage<T extends object, F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate, D extends DataTypes.Keys<T> = IdDefaultType<T>>(props: DataGridPageProps<T, F, D>): React.JSX.Element;

package/lib/pages/EditPage.d.ts

@@ -34,4 +34,4 @@ export interface EditPageProps extends Omit<CommonPageProps, "onSubmit"> {
  * Add / Edit page
  * @param props Props
  */
-export declare function EditPage(props: EditPageProps): JSX.Element;
+export declare function EditPage(props: EditPageProps): React.JSX.Element;

package/lib/pages/FixedListPage.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import { DataTypes, IdDefaultType } from "@etsoo/shared";
+import React from "react";
 import { ListPageProps } from "./ListPageProps";
 /**
  * Fixed height list page
@@ -13,4 +13,4 @@ export declare function FixedListPage<T extends object, F extends DataTypes.Basi
      * @param rect Current rect data
      */
     adjustHeight?: (height: number, rect: DOMRect) => number;
-}): JSX.Element;
+}): React.JSX.Element;

package/lib/pages/LeftDrawer.d.ts

@@ -28,4 +28,4 @@ export type LeftDrawerProps = React.PropsWithRef<{
      */
     onMinimize?: () => void;
 }>;
-export declare function LeftDrawer(props: React.PropsWithChildren<LeftDrawerProps>): JSX.Element;
+export declare function LeftDrawer(props: React.PropsWithChildren<LeftDrawerProps>): React.JSX.Element;

package/lib/pages/ListPage.d.ts

@@ -1,9 +1,9 @@
-/// <reference types="react" />
 import { DataTypes, IdDefaultType } from '@etsoo/shared';
+import React from 'react';
 import { ListPageProps } from './ListPageProps';
 /**
  * List page
  * @param props Props
  * @returns Component
  */
-export declare function ListPage<T extends object, F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate, D extends DataTypes.Keys<T> = IdDefaultType<T>>(props: ListPageProps<T, F, D>): JSX.Element;
+export declare function ListPage<T extends object, F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate, D extends DataTypes.Keys<T> = IdDefaultType<T>>(props: ListPageProps<T, F, D>): React.JSX.Element;

package/lib/pages/ResponsivePage.d.ts

@@ -1,9 +1,9 @@
-/// <reference types="react" />
 import { DataTypes, IdDefaultType } from "@etsoo/shared";
+import React from "react";
 import { ResponsePageProps } from "./ResponsivePageProps";
 /**
  * Fixed height list page
  * @param props Props
  * @returns Component
  */
-export declare function ResponsivePage<T extends object, F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate, D extends DataTypes.Keys<T> = IdDefaultType<T>>(props: ResponsePageProps<T, F, D>): JSX.Element;
+export declare function ResponsivePage<T extends object, F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate, D extends DataTypes.Keys<T> = IdDefaultType<T>>(props: ResponsePageProps<T, F, D>): React.JSX.Element;

package/lib/pages/TablePage.d.ts

@@ -1,9 +1,9 @@
-/// <reference types="react" />
 import { DataTypes, IdDefaultType } from '@etsoo/shared';
+import React from 'react';
 import { TablePageProps } from './TablePageProps';
 /**
  * Table page
  * @param props Props
  * @returns Component
  */
-export declare function TablePage<T extends object, F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate, D extends DataTypes.Keys<T> = IdDefaultType<T>>(props: TablePageProps<T, F, D>): JSX.Element;
+export declare function TablePage<T extends object, F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate, D extends DataTypes.Keys<T> = IdDefaultType<T>>(props: TablePageProps<T, F, D>): React.JSX.Element;

package/lib/pages/UserMenu.d.ts

@@ -37,4 +37,4 @@ export declare const eventWatcher: EventWatcher;
  * @param props Props
  * @returns Component
  */
-export declare function UserMenu(props: UserMenuProps): JSX.Element;
+export declare function UserMenu(props: UserMenuProps): React.JSX.Element;

package/lib/pages/ViewPage.d.ts

@@ -78,5 +78,5 @@ export interface ViewPageProps<T extends DataTypes.StringRecord> extends Omit<Co
  * View page
  * @param props Props
  */
-export declare function ViewPage<T extends DataTypes.StringRecord>(props: ViewPageProps<T>): JSX.Element;
+export declare function ViewPage<T extends DataTypes.StringRecord>(props: ViewPageProps<T>): React.JSX.Element;
 export {};

package/lib/texts/DateText.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
 import { DateUtils } from '@etsoo/shared';
 import { TypographyProps } from '@mui/material';
+import React from 'react';
 /**
  * Date text props
  */
@@ -31,4 +31,4 @@ export interface DateTextProps extends TypographyProps {
  * @param props Props
  * @returns Component
  */
-export declare function DateText(props: DateTextProps): JSX.Element;
+export declare function DateText(props: DateTextProps): React.JSX.Element;

package/lib/texts/MoneyText.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { NumberTextProps } from './NumberText';
 /**
  * Money text props
@@ -18,4 +18,4 @@ export interface MoneyTextProps extends NumberTextProps {
  * @param props Props
  * @returns Component
  */
-export declare function MoneyText(props: MoneyTextProps): JSX.Element;
+export declare function MoneyText(props: MoneyTextProps): React.JSX.Element;

package/lib/texts/NumberText.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import { TypographyProps } from '@mui/material';
+import React from 'react';
 /**
  * Number text props
  */
@@ -22,4 +22,4 @@ export interface NumberTextProps extends TypographyProps {
  * @param props Props
  * @returns Component
  */
-export declare function NumberText(props: NumberTextProps): JSX.Element;
+export declare function NumberText(props: NumberTextProps): React.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.2.28",
+  "version": "1.2.30",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -47,21 +47,21 @@
   "dependencies": {
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/sortable": "^7.0.2",
-    "@emotion/css": "^11.10.8",
-    "@emotion/react": "^11.10.8",
-    "@emotion/styled": "^11.10.8",
+    "@emotion/css": "^11.11.0",
+    "@emotion/react": "^11.11.0",
+    "@emotion/styled": "^11.11.0",
     "@etsoo/appscript": "^1.3.99",
     "@etsoo/notificationbase": "^1.1.24",
-    "@etsoo/react": "^1.6.73",
+    "@etsoo/react": "^1.6.74",
     "@etsoo/shared": "^1.2.1",
     "@mui/icons-material": "^5.11.16",
     "@mui/material": "^5.12.3",
     "@mui/x-data-grid": "^6.3.1",
     "@types/pica": "^9.0.1",
     "@types/pulltorefreshjs": "^0.1.5",
-    "@types/react": "^18.2.5",
+    "@types/react": "^18.2.6",
     "@types/react-avatar-editor": "^13.0.0",
-    "@types/react-dom": "^18.2.3",
+    "@types/react-dom": "^18.2.4",
     "@types/react-input-mask": "^3.0.2",
     "@types/react-window": "^1.8.5",
     "pica": "^9.0.1",

package/src/ComboBoxMultiple.tsx

@@ -135,6 +135,22 @@ export function ComboBoxMultiple<
   const [localOptions, setOptions] = React.useState(options ?? []);
   const isMounted = React.useRef(true);
 
+  // Local default value
+  const localValue: T[] | null | undefined =
+    idValue != null
+      ? localOptions.filter((o) => o[idField] === idValue)
+      : idValues != null
+      ? localOptions.filter((o) => idValues?.includes(o[idField]))
+      : defaultValue ?? value;
+
+  // State
+  // null for controlled
+  const [stateValue, setStateValue] = React.useState<T[] | null>(null);
+
+  React.useEffect(() => {
+    setStateValue(localValue ?? []);
+  }, [localValue]);
+
   // When options change
   // [options] will cause infinite loop
   const propertyWay = loadData == null;
@@ -157,24 +173,6 @@ export function ComboBoxMultiple<
     }
   }, [options, propertyWay]);
 
-  // Local default value
-  const localValue: T | T[] | null | undefined =
-    idValue != null
-      ? localOptions.filter((o) => o[idField] === idValue)
-      : idValues != null
-      ? localOptions.filter((o) => idValues?.includes(o[idField]))
-      : defaultValue ?? value;
-
-  // State
-  // null for controlled
-  const [stateValue, setStateValue] = React.useState<T | T[] | null>(null);
-
-  React.useEffect(() => {
-    if (localValue != null && localValue != stateValue) {
-      setStateValue(localValue);
-    }
-  }, [localValue]);
-
   // Add readOnly
   const addReadOnly = (params: AutocompleteRenderInputParams) => {
     if (readOnly != null) {
@@ -200,14 +198,12 @@ export function ComboBoxMultiple<
     return params;
   };
 
-  const getValue = (value: T | T[] | null): string => {
+  const getValue = (value: T[] | null): string => {
     if (value == null) return "";
-    if (Array.isArray(value))
-      return value.map((item) => item[idField]).join(",");
-    return `${value[idField]}`;
+    return value.map((item) => item[idField]).join(",");
   };
 
-  const setInputValue = (value: T | T[] | null) => {
+  const setInputValue = (value: T[] | null) => {
     // Set state
     setStateValue(value);
 
@@ -259,13 +255,14 @@ export function ComboBoxMultiple<
       <Autocomplete<T, true, false, false>
         value={
           stateValue == null
-            ? undefined
+            ? []
             : Array.isArray(stateValue)
             ? stateValue
             : [stateValue]
         }
         disableCloseOnSelect={disableCloseOnSelect}
         getOptionLabel={getOptionLabel}
+        multiple
         isOptionEqualToValue={(option: T, value: T) =>
           option[idField] === value[idField]
         }