@etsoo/materialui 1.0.1

package/lib/BackButton.js

@@ -0,0 +1,33 @@
+import { IconButton, useTheme } from '@mui/material';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+/**
+ * BackButton
+ * @param props Props
+ * @returns Component
+ */
+export function BackButton(props) {
+    // Destruct
+    const { color = 'primary', size = 'small', onClick, ...rest } = props;
+    // Theme
+    const theme = useTheme();
+    // Navigate
+    const navigate = useNavigate();
+    // Color
+    const pColor = color != 'inherit' && color != 'default' && color in theme.palette
+        ? theme.palette[color]
+        : theme.palette.primary;
+    // Click handler
+    const onClickLocal = async (event) => {
+        if (onClick)
+            onClick(event);
+        // Navigate
+        navigate(-1);
+    };
+    return (React.createElement(IconButton, { "aria-label": "Back", color: color, size: size, onClick: onClickLocal, sx: {
+            backgroundColor: pColor.contrastText,
+            border: `1px solid ${pColor.light}`
+        }, ...rest },
+        React.createElement(ArrowBackIcon, null)));
+}

package/lib/BridgeCloseButton.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import { IBridgeHost } from '@etsoo/appscript';
+import { BoxProps, IconButtonProps } from '@mui/material';
+/**
+ * Bridge close button props
+ */
+export interface BridgeCloseButtonProps extends IconButtonProps {
+    /**
+     * Box props
+     */
+    boxProps?: BoxProps;
+    /**
+     * Validate the host
+     * @param host Host
+     */
+    validate?(host: IBridgeHost): boolean;
+}
+/**
+ * Bridge close button
+ * @param props Props
+ * @returns Component
+ */
+export declare function BridgeCloseButton(props: BridgeCloseButtonProps): JSX.Element;

package/lib/BridgeCloseButton.js

@@ -0,0 +1,32 @@
+import { BridgeUtils } from '@etsoo/appscript';
+import CloseIcon from '@mui/icons-material/Close';
+import { Box, IconButton } from '@mui/material';
+import React from 'react';
+import { globalApp } from './app/ReactApp';
+/**
+ * Bridge close button
+ * @param props Props
+ * @returns Component
+ */
+export function BridgeCloseButton(props) {
+    // Destruct
+    const { boxProps, onClick, title = typeof globalApp === 'undefined'
+        ? 'Close'
+        : globalApp.get('close'), validate, ...rest } = props;
+    // Host
+    const host = BridgeUtils.host;
+    if (host == null ||
+        !host.closable() ||
+        (validate && validate(host) === false)) {
+        return React.createElement(React.Fragment, null);
+    }
+    // Click handler
+    const onClickLocal = (event) => {
+        if (onClick)
+            onClick(event);
+        host.exit();
+    };
+    return (React.createElement(Box, { ...boxProps },
+        React.createElement(IconButton, { "aria-label": "close", onClick: onClickLocal, title: title, ...rest },
+            React.createElement(CloseIcon, null))));
+}

package/lib/ButtonLink.d.ts

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

package/lib/ButtonLink.js

@@ -0,0 +1,19 @@
+import { Button } from '@mui/material';
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+/**
+ * ButtonLink
+ * @param props Props
+ * @returns Component
+ */
+export function ButtonLink(props) {
+    // Destruct
+    const { href, ...rest } = props;
+    // Navigate
+    const navigate = useNavigate();
+    const onClick = href.includes('://')
+        ? () => window.open(href, '_blank')
+        : () => navigate(href);
+    // Layout
+    return React.createElement(Button, { ...rest, onClick: onClick });
+}

package/lib/ComboBox.d.ts

@@ -0,0 +1,38 @@
+/// <reference types="react" />
+import { DataTypes, IdDefaultType, LabelDefaultType, ListType } from '@etsoo/shared';
+import { AutocompleteExtendedProps } from './AutocompleteExtendedProps';
+/**
+ * ComboBox props
+ */
+export declare type ComboBoxProps<T extends object, D extends DataTypes.Keys<T>, L extends DataTypes.Keys<T, string>> = AutocompleteExtendedProps<T, D> & {
+    /**
+     * Auto add blank item
+     */
+    autoAddBlankItem?: boolean;
+    /**
+     * Data readonly
+     */
+    dataReadonly?: boolean;
+    /**
+     * Label field
+     */
+    labelField?: L;
+    /**
+     * Load data callback
+     */
+    loadData?: () => PromiseLike<T[] | null | undefined>;
+    /**
+     * On load data handler
+     */
+    onLoadData?: (options: T[]) => void;
+    /**
+     * Array of options.
+     */
+    options?: ReadonlyArray<T>;
+};
+/**
+ * ComboBox
+ * @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;

package/lib/ComboBox.js

@@ -0,0 +1,108 @@
+import { Keyboard } from '@etsoo/shared';
+import { Autocomplete } from '@mui/material';
+import React from 'react';
+import { Utils as SharedUtils } from '@etsoo/shared';
+import { InputField } from './InputField';
+import { SearchField } from './SearchField';
+import { ReactUtils } from '@etsoo/react';
+/**
+ * ComboBox
+ * @param props Props
+ * @returns Component
+ */
+export function ComboBox(props) {
+    // Destruct
+    const { search = false, autoAddBlankItem = search, idField = 'id', idValue, inputError, inputHelperText, inputMargin, inputOnChange, inputRequired, inputVariant, defaultValue, label, labelField = 'label', loadData, onLoadData, name, inputAutoComplete = 'off', options, dataReadonly = true, readOnly, onChange, openOnFocus = true, value, getOptionLabel = (option) => `${option[labelField]}`, sx = { minWidth: '150px' }, ...rest } = props;
+    // Value input ref
+    const inputRef = React.createRef();
+    // Options state
+    const [localOptions, setOptions] = React.useState(options !== null && options !== void 0 ? options : []);
+    const isMounted = React.useRef(true);
+    // When options change
+    // [options] will cause infinite loop
+    const propertyWay = loadData == null;
+    React.useEffect(() => {
+        if (propertyWay && options != null)
+            setOptions(options);
+    }, [JSON.stringify(options), propertyWay]);
+    // Local default value
+    let localValue = idValue != null
+        ? localOptions.find((o) => o[idField] === idValue)
+        : defaultValue !== null && defaultValue !== void 0 ? defaultValue : value;
+    if (localValue === undefined)
+        localValue = null;
+    // State
+    // null for controlled
+    const [stateValue, setStateValue] = React.useState(null);
+    // Current id value
+    // One time calculation for input's default value (uncontrolled)
+    const localIdValue = stateValue && stateValue[idField];
+    React.useEffect(() => {
+        if (localValue != null)
+            setStateValue(localValue);
+    }, [localValue]);
+    // Add readOnly
+    const addReadOnly = (params) => {
+        if (readOnly != null) {
+            Object.assign(params, { readOnly });
+            if (readOnly) {
+                Object.assign(params.inputProps, { 'data-reset': true });
+            }
+        }
+        if (dataReadonly) {
+            params.inputProps.onKeyDown = (event) => {
+                if (Keyboard.isTypingContent(event.key)) {
+                    event.preventDefault();
+                }
+            };
+        }
+        // https://stackoverflow.com/questions/15738259/disabling-chrome-autofill
+        // https://html.spec.whatwg.org/multipage/form-control-infrastructure.html
+        Object.assign(params.inputProps, { autoComplete: inputAutoComplete });
+        return params;
+    };
+    const setInputValue = (value) => {
+        // Set state
+        setStateValue(value);
+        // Input value
+        const input = inputRef.current;
+        if (input) {
+            // Update value
+            const newValue = value != null ? `${value[idField]}` : '';
+            if (newValue !== input.value) {
+                // Different value, trigger change event
+                ReactUtils.triggerChange(input, newValue, false);
+            }
+        }
+    };
+    // When value change
+    React.useEffect(() => {
+        if (loadData) {
+            loadData().then((result) => {
+                if (result == null || !isMounted.current)
+                    return;
+                if (onLoadData)
+                    onLoadData(result);
+                if (autoAddBlankItem) {
+                    SharedUtils.addBlankItem(result, idField, labelField);
+                }
+                setOptions(result);
+            });
+        }
+    }, [localValue]);
+    React.useEffect(() => {
+        return () => {
+            isMounted.current = false;
+        };
+    }, []);
+    // Layout
+    return (React.createElement("div", null,
+        React.createElement("input", { ref: inputRef, "data-reset": "true", type: "text", style: { display: 'none' }, name: name, value: `${localIdValue !== null && localIdValue !== void 0 ? localIdValue : ''}`, readOnly: true, onChange: inputOnChange }),
+        React.createElement(Autocomplete, { value: stateValue, getOptionLabel: getOptionLabel, isOptionEqualToValue: (option, value) => option[idField] === value[idField], onChange: (event, value, reason, details) => {
+                // Set value
+                setInputValue(value);
+                // Custom
+                if (onChange != null)
+                    onChange(event, value, reason, details);
+            }, openOnFocus: openOnFocus, sx: sx, renderInput: (params) => search ? (React.createElement(SearchField, { ...addReadOnly(params), label: label, name: name + 'Input', margin: inputMargin, variant: inputVariant, required: inputRequired, error: inputError, helperText: inputHelperText })) : (React.createElement(InputField, { ...addReadOnly(params), label: label, name: name + 'Input', margin: inputMargin, variant: inputVariant, required: inputRequired, error: inputError, helperText: inputHelperText })), options: localOptions, ...rest })));
+}

package/lib/CountdownButton.d.ts

@@ -0,0 +1,23 @@
+import { ButtonProps } from '@mui/material';
+import React from 'react';
+/**
+ * Countdown button action
+ */
+export interface CountdownButtonAction {
+    (): Promise<number>;
+}
+/**
+ * Countdown button props
+ */
+export declare type CountdownButtonProps = Omit<ButtonProps, 'endIcon' | 'disabled'> & {
+    /**
+     * Action, required
+     */
+    onAction: CountdownButtonAction;
+};
+/**
+ * Countdown button
+ * @param props Props
+ * @returns Button
+ */
+export declare const CountdownButton: React.ForwardRefExoticComponent<Pick<CountdownButtonProps, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | "form" | "slot" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "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" | "type" | "size" | "name" | "href" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "value" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "fullWidth" | "startIcon" | "onAction"> & React.RefAttributes<HTMLButtonElement>>;

package/lib/CountdownButton.js

@@ -0,0 +1,81 @@
+import { Button, CircularProgress } from '@mui/material';
+import React from 'react';
+/**
+ * Countdown button
+ * @param props Props
+ * @returns Button
+ */
+export const CountdownButton = React.forwardRef((props, ref) => {
+    // Destructure
+    const { onAction, onClick, ...rest } = props;
+    // State
+    // 0 - normal
+    // 1 - loading
+    // 2 - countdown
+    const [state, updateState] = React.useState(0);
+    // Ignore seconds
+    const seconds = 2;
+    // Countdown length
+    const [shared] = React.useState({ maxLength: 0 });
+    const isMounted = React.useRef(true);
+    // endIcon
+    let endIcon;
+    if (state === 0) {
+        endIcon = undefined;
+    }
+    else if (state === 1) {
+        endIcon = React.createElement(CircularProgress, { size: 12 });
+    }
+    else {
+        const countdown = (state - seconds)
+            .toString()
+            .padStart(shared.maxLength, '0');
+        endIcon = React.createElement("span", { style: { fontSize: 'smaller' } }, countdown);
+    }
+    // Disabled?
+    const disabled = state > 0;
+    // Action
+    const doAction = (result) => {
+        // Seconds to wait, 120
+        if (result > seconds) {
+            // Here 122
+            result += seconds;
+            updateState(result);
+            // Update max length
+            shared.maxLength = result.toString().length;
+            const seed = setInterval(() => {
+                // Mounted?
+                if (!isMounted.current)
+                    return;
+                // Last 1 second and then complete
+                if (result > seconds + 1) {
+                    result--;
+                    updateState(result);
+                }
+                else {
+                    clearInterval(seed);
+                    updateState(0);
+                }
+            }, 1000);
+        }
+        else {
+            updateState(0);
+        }
+    };
+    // Local click
+    const localClick = (event) => {
+        // Show loading
+        updateState(1);
+        // Callback
+        if (onClick != null)
+            onClick(event);
+        // Return any countdown
+        onAction().then(doAction);
+    };
+    React.useEffect(() => {
+        return () => {
+            isMounted.current = false;
+        };
+    }, []);
+    return (React.createElement(Button, { disabled: disabled, endIcon: endIcon, onClick: localClick, ref: ref, ...rest }));
+});

package/lib/CustomFabProps.d.ts

@@ -0,0 +1,27 @@
+import { FabPropsColorOverrides, PropTypes } from '@mui/material';
+import { OverridableStringUnion } from '@mui/types';
+/**
+ * Custom fab size
+ */
+export declare type CustomFabSize = 'small' | 'medium' | 'large';
+/**
+ * Custom fab props
+ */
+export interface CustomFabProps {
+    /**
+     * Color
+     */
+    color?: OverridableStringUnion<PropTypes.Color, FabPropsColorOverrides>;
+    /**
+     * Fab size
+     */
+    size?: CustomFabSize;
+    /**
+     * Scroll target
+     */
+    target?: any;
+    /**
+     * Fab title
+     */
+    title?: string;
+}

package/lib/CustomFabProps.js

@@ -0,0 +1 @@
+export {};

package/lib/DataGridEx.d.ts

@@ -0,0 +1,94 @@
+import { GridColumn, GridLoaderStates, ScrollerGridProps } from '@etsoo/react';
+import { DataTypes, IdDefaultType } from '@etsoo/shared';
+import React from 'react';
+import { MouseEventWithDataHandler } from './MUGlobal';
+/**
+ * Footer item renderer props
+ */
+export declare type DataGridExFooterItemRendererProps<T extends object> = {
+    column: GridColumn<T>;
+    index: number;
+    states: GridLoaderStates<T>;
+    cellProps: any;
+    checkable: boolean;
+};
+/**
+ * Extended DataGrid with VariableSizeGrid props
+ */
+export declare type DataGridExProps<T extends object, D extends DataTypes.Keys<T>> = Omit<ScrollerGridProps<T, D>, 'itemRenderer' | 'columnCount' | 'columnWidth' | 'width'> & {
+    /**
+     * Alternating colors for odd/even rows
+     */
+    alternatingColors?: [string?, string?];
+    /**
+     * Checkable to choose multiple items
+     * @default false
+     */
+    checkable?: boolean;
+    /**
+     * Rows count to have the bottom border
+     */
+    borderRowsCount?: number;
+    /**
+     * Bottom height
+     */
+    bottomHeight?: number;
+    /**
+     * Columns
+     */
+    columns: GridColumn<T>[];
+    /**
+     * Footer item renderer
+     */
+    footerItemRenderer?: (rows: T[], props: DataGridExFooterItemRendererProps<T>) => React.ReactNode;
+    /**
+     * Header height
+     * @default 56
+     */
+    headerHeight?: number;
+    /**
+     * Hide the footer
+     * @default false
+     */
+    hideFooter?: boolean;
+    /**
+     * Hover color
+     */
+    hoverColor?: string;
+    /**
+     * Double click handler
+     */
+    onDoubleClick?: MouseEventWithDataHandler<T>;
+    /**
+     * Click handler
+     */
+    onClick?: MouseEventWithDataHandler<T>;
+    /**
+     * Selectable to support hover over and out effect and row clickable
+     * @default true
+     */
+    selectable?: boolean;
+    /**
+     * Selected color
+     */
+    selectedColor?: string;
+    /**
+     * Width
+     */
+    width?: number;
+};
+/**
+ * Extended datagrid columns calculation
+ * @param columns
+ * @returns Total width and unset items
+ */
+export declare function DataGridExCalColumns<T>(columns: GridColumn<T>[]): {
+    total: number;
+    unset: number;
+};
+/**
+ * Extended DataGrid with VariableSizeGrid
+ * @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;