@etsoo/materialui 1.4.21 → 1.4.23

package/lib/app/Labels.js

@@ -1,4 +1,4 @@
-import { Utils } from '@etsoo/shared';
+import { Utils } from "@etsoo/shared";
 /**
  * Labels
  */
@@ -8,46 +8,46 @@ export var Labels;
      * Common page labels
      */
     Labels.CommonPage = {
-        add: 'Add',
-        back: 'Back',
-        delete: 'Delete',
-        more: 'More',
-        pullToRefresh: 'Pull down to refresh',
-        refresh: 'Refresh',
-        refreshing: 'Refreshing',
-        releaseToRefresh: 'Release to refresh',
-        reset: 'Reset',
-        save: 'Save',
-        scrollTop: 'Scroll to top',
-        submit: 'Submit'
+        add: "Add",
+        back: "Back",
+        delete: "Delete",
+        more: "More",
+        pullToRefresh: "Pull down to refresh",
+        refresh: "Refresh",
+        refreshing: "Refreshing",
+        releaseToRefresh: "Release to refresh",
+        reset: "Reset",
+        save: "Save",
+        scrollTop: "Scroll to top",
+        submit: "Submit"
     };
     /**
      * Notification MU labels
      */
     Labels.NotificationMU = {
-        alertTitle: 'Warning',
-        alertOK: 'OK',
-        confirmTitle: 'Confirm',
-        confirmYes: 'OK',
-        confirmNo: 'Cancel',
-        promptTitle: 'Input',
-        promptCancel: 'Cancel',
-        promptOK: 'OK',
-        loading: 'Loading',
-        success: 'Success',
-        warning: 'Warning',
-        info: 'Information'
+        alertTitle: "Warning",
+        alertOK: "OK",
+        confirmTitle: "Confirm",
+        confirmYes: "OK",
+        confirmNo: "Cancel",
+        promptTitle: "Input",
+        promptCancel: "Cancel",
+        promptOK: "OK",
+        loading: "Loading",
+        success: "Success",
+        warning: "Warning",
+        info: "Information"
     };
     /**
      * UserAvatarEditor labels
      */
     Labels.UserAvatarEditor = {
-        done: 'Done',
-        reset: 'Reset',
-        rotateLeft: 'Rotate left 90°',
-        rotateRight: 'Rotate right 90°',
-        upload: 'Upload',
-        zoom: 'Zoom'
+        done: "Done",
+        reset: "Reset",
+        rotateLeft: "Rotate left 90°",
+        rotateRight: "Rotate right 90°",
+        upload: "Upload",
+        zoom: "Zoom"
     };
     /**
      * Set components' labels

package/lib/index.d.ts

@@ -89,6 +89,7 @@ export * from "./PList";
 export * from "./ProgressCount";
 export * from "./PullToRefreshUI";
 export * from "./QuickList";
+export * from "./RegionsRQ";
 export * from "./ResponsibleContainer";
 export * from "./ResponsiveStyleValue";
 export * from "./ScrollerListEx";

package/lib/index.js

@@ -89,6 +89,7 @@ export * from "./PList";
 export * from "./ProgressCount";
 export * from "./PullToRefreshUI";
 export * from "./QuickList";
+export * from "./RegionsRQ";
 export * from "./ResponsibleContainer";
 export * from "./ResponsiveStyleValue";
 export * from "./ScrollerListEx";

package/lib/texts/MoneyText.d.ts

@@ -1,4 +1,4 @@
-import { NumberTextProps } from './NumberText';
+import { NumberTextProps } from "./NumberText";
 /**
  * Money text props
  */

package/lib/texts/MoneyText.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { NumberUtils } from '@etsoo/shared';
-import { Typography } from '@mui/material';
+import { NumberUtils } from "@etsoo/shared";
+import { Typography } from "@mui/material";
 /**
  * Money text
  * @param props Props
@@ -11,6 +11,6 @@ export function MoneyText(props) {
     const { currency, isInteger = false, locale, options = {}, value, ...rest } = props;
     // Layout
     return (_jsx(Typography, { component: "span", fontSize: "inherit", ...rest, children: value == null
-            ? ''
+            ? ""
             : NumberUtils.formatMoney(value, currency, locale, isInteger, options) }));
 }

package/lib/texts/NumberText.d.ts

@@ -1,4 +1,4 @@
-import { TypographyProps } from '@mui/material';
+import { TypographyProps } from "@mui/material";
 /**
  * Number text props
  */

package/lib/texts/NumberText.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { NumberUtils } from '@etsoo/shared';
-import { Typography } from '@mui/material';
+import { NumberUtils } from "@etsoo/shared";
+import { Typography } from "@mui/material";
 /**
  * Number text
  * @param props Props
@@ -10,5 +10,5 @@ export function NumberText(props) {
     // Destruct
     const { locale, options = {}, value, ...rest } = props;
     // Layout
-    return (_jsx(Typography, { component: "span", fontSize: "inherit", ...rest, children: value == null ? '' : NumberUtils.format(value, locale, options) }));
+    return (_jsx(Typography, { component: "span", fontSize: "inherit", ...rest, children: value == null ? "" : NumberUtils.format(value, locale, options) }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.4.21",
+  "version": "1.4.23",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -47,17 +47,17 @@
   "dependencies": {
     "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/sortable": "^8.0.0",
-    "@emotion/css": "^11.13.4",
-    "@emotion/react": "^11.13.3",
-    "@emotion/styled": "^11.13.0",
-    "@etsoo/appscript": "^1.5.61",
-    "@etsoo/notificationbase": "^1.1.52",
-    "@etsoo/react": "^1.7.92",
-    "@etsoo/shared": "^1.2.51",
-    "@mui/icons-material": "^6.1.4",
-    "@mui/material": "^6.1.4",
-    "@mui/x-data-grid": "^7.21.0",
-    "chart.js": "^4.4.5",
+    "@emotion/css": "^11.13.5",
+    "@emotion/react": "^11.13.5",
+    "@emotion/styled": "^11.13.5",
+    "@etsoo/appscript": "^1.5.64",
+    "@etsoo/notificationbase": "^1.1.53",
+    "@etsoo/react": "^1.7.96",
+    "@etsoo/shared": "^1.2.54",
+    "@mui/icons-material": "^6.1.8",
+    "@mui/material": "^6.1.8",
+    "@mui/x-data-grid": "^7.22.3",
+    "chart.js": "^4.4.6",
     "chartjs-plugin-datalabels": "^2.2.0",
     "eventemitter3": "^5.0.1",
     "pica": "^9.0.1",
@@ -70,25 +70,25 @@
     "react-imask": "7.6.1"
   },
   "devDependencies": {
-    "@babel/cli": "^7.25.7",
-    "@babel/core": "^7.25.8",
-    "@babel/plugin-transform-runtime": "^7.25.7",
-    "@babel/preset-env": "^7.25.8",
-    "@babel/preset-react": "^7.25.7",
-    "@babel/preset-typescript": "^7.25.7",
-    "@babel/runtime-corejs3": "^7.25.7",
-    "@testing-library/jest-dom": "^6.6.2",
+    "@babel/cli": "^7.25.9",
+    "@babel/core": "^7.26.0",
+    "@babel/plugin-transform-runtime": "^7.25.9",
+    "@babel/preset-env": "^7.26.0",
+    "@babel/preset-react": "^7.25.9",
+    "@babel/preset-typescript": "^7.26.0",
+    "@babel/runtime-corejs3": "^7.26.0",
+    "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
-    "@types/jest": "^29.5.13",
+    "@types/jest": "^29.5.14",
     "@types/pica": "^9.0.4",
     "@types/pulltorefreshjs": "^0.1.7",
-    "@types/react": "^18.3.11",
+    "@types/react": "^18.3.12",
     "@types/react-avatar-editor": "^13.0.3",
     "@types/react-dom": "^18.3.1",
-    "@types/react-input-mask": "^3.0.5",
+    "@types/react-input-mask": "^3.0.6",
     "@types/react-window": "^1.8.8",
-    "@typescript-eslint/eslint-plugin": "^8.10.0",
-    "@typescript-eslint/parser": "^8.10.0",
+    "@typescript-eslint/eslint-plugin": "^8.15.0",
+    "@typescript-eslint/parser": "^8.15.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "typescript": "^5.6.3"

package/src/AddresSelector.tsx

@@ -1,9 +1,9 @@
 import {
-  AddressApi,
   AddressCity,
   AddressDistrict,
   AddressRegionDb,
-  AddressState
+  AddressState,
+  IApiPayload
 } from "@etsoo/appscript";
 import { FormLabel, Grid2, GridSize } from "@mui/material";
 import React from "react";
@@ -11,6 +11,7 @@ import { globalApp } from "./app/ReactApp";
 import { ComboBox } from "./ComboBox";
 import { Tiplist } from "./Tiplist";
 import { ResponsiveStyleValue } from "./ResponsiveStyleValue";
+import { RegionsRQ } from "./RegionsRQ";
 
 /**
  * Address field
@@ -43,7 +44,33 @@ export type AddressSelectorProps = {
   /**
    * Address API
    */
-  api: AddressApi;
+  api: {
+    regions(
+      rq: RegionsRQ,
+      payload?: IApiPayload<AddressRegionDb[]>
+    ): Promise<AddressRegionDb[] | undefined>;
+
+    states(
+      regionId: string,
+      favoredIds?: string[],
+      payload?: IApiPayload<AddressState[]>,
+      culture?: string
+    ): Promise<AddressState[] | undefined>;
+
+    cities(
+      stateId: string,
+      favoredIds?: number[],
+      payload?: IApiPayload<AddressCity[]>,
+      culture?: string
+    ): Promise<AddressCity[] | undefined>;
+
+    districts(
+      cityId: number,
+      favoredIds?: number[],
+      payload?: IApiPayload<AddressDistrict[]>,
+      culture?: string
+    ): Promise<AddressDistrict[] | undefined>;
+  };
 
   /**
    * Break points
@@ -305,7 +332,7 @@ export function AddressSelector(props: AddressSelectorProps) {
             fullWidth
             idValue={regionState}
             loadData={(keyword, id, items) =>
-              api.getRegions({
+              api.regions({
                 keyword,
                 id,
                 items,

package/src/AuditDisplay.tsx

@@ -1,10 +1,10 @@
-import { AuditLineDto } from "@etsoo/appscript";
 import { Utils } from "@etsoo/shared";
 import { Button, Divider, Theme, Typography, useTheme } from "@mui/material";
 import React, { CSSProperties } from "react";
 import { globalApp } from "./app/ReactApp";
 import { ListMoreDisplay, ListMoreDisplayProps } from "./ListMoreDisplay";
 import { ShowDataComparison } from "./ShowDataComparison";
+import { AuditLineDto } from "@etsoo/appscript";
 
 /**
  * Audit display props

package/src/BackButton.tsx

@@ -1,7 +1,7 @@
-import { IconButton, IconButtonProps, useTheme } from '@mui/material';
-import ArrowBackIcon from '@mui/icons-material/ArrowBack';
-import React from 'react';
-import { useNavigate } from 'react-router-dom';
+import { IconButton, IconButtonProps, useTheme } from "@mui/material";
+import ArrowBackIcon from "@mui/icons-material/ArrowBack";
+import React from "react";
+import { useNavigate } from "react-router-dom";
 
 /**
  * BackButton props
@@ -14,42 +14,42 @@ export interface BackButtonProps extends IconButtonProps {}
  * @returns Component
  */
 export function BackButton(props: BackButtonProps) {
-    // Destruct
-    const { color = 'primary', size = 'small', onClick, ...rest } = props;
+  // Destruct
+  const { color = "primary", size = "small", onClick, ...rest } = props;
 
-    // Theme
-    const theme = useTheme();
+  // 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: React.MouseEvent<HTMLButtonElement>) => {
+    if (onClick) onClick(event);
 
     // 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: React.MouseEvent<HTMLButtonElement>) => {
-        if (onClick) onClick(event);
-
-        // Navigate
-        navigate(-1);
-    };
-
-    return (
-        <IconButton
-            aria-label="Back"
-            color={color}
-            size={size}
-            onClick={onClickLocal}
-            sx={{
-                backgroundColor: pColor.contrastText,
-                border: `1px solid ${pColor.light}`
-            }}
-            {...rest}
-        >
-            <ArrowBackIcon />
-        </IconButton>
-    );
+    navigate(-1);
+  };
+
+  return (
+    <IconButton
+      aria-label="Back"
+      color={color}
+      size={size}
+      onClick={onClickLocal}
+      sx={{
+        backgroundColor: pColor.contrastText,
+        border: `1px solid ${pColor.light}`
+      }}
+      {...rest}
+    >
+      <ArrowBackIcon />
+    </IconButton>
+  );
 }

package/src/CountryList.tsx

@@ -1,32 +1,33 @@
-import { AddressRegionDb, RegionsRQ } from '@etsoo/appscript';
-import { DataTypes } from '@etsoo/shared';
-import React from 'react';
-import { Tiplist, TiplistProps } from './Tiplist';
+import { AddressRegionDb } from "@etsoo/appscript";
+import { DataTypes } from "@etsoo/shared";
+import React from "react";
+import { Tiplist, TiplistProps } from "./Tiplist";
+import { RegionsRQ } from "./RegionsRQ";
 
 /**
  * Country list props
  */
 export type CountryListProps = Omit<
-    DataTypes.Optional<TiplistProps<AddressRegionDb, 'id'>, 'name'>,
-    'loadData'
+  DataTypes.Optional<TiplistProps<AddressRegionDb, "id">, "name">,
+  "loadData"
 > & {
-    /**
-     * Load data
-     * @param rq Request data
-     * @returns Result
-     */
-    loadData: (rq: RegionsRQ) => Promise<AddressRegionDb[] | undefined>;
+  /**
+   * Load data
+   * @param rq Request data
+   * @returns Result
+   */
+  loadData: (rq: RegionsRQ) => Promise<AddressRegionDb[] | undefined>;
 
-    /**
-     * Load favored country ids
-     * @returns Result
-     */
-    loadFavoredIds?: () => Promise<string[]>;
+  /**
+   * Load favored country ids
+   * @returns Result
+   */
+  loadFavoredIds?: () => Promise<string[]>;
 
-    /**
-     * Max items to display
-     */
-    items?: number;
+  /**
+   * Max items to display
+   */
+  items?: number;
 };
 
 /**
@@ -35,34 +36,34 @@ export type CountryListProps = Omit<
  * @returns Component
  */
 export function CountryList(props: CountryListProps) {
-    // Destruct
-    const {
-        items = 16,
-        loadData,
-        loadFavoredIds,
-        name = 'countryId',
-        ...rest
-    } = props;
+  // Destruct
+  const {
+    items = 16,
+    loadData,
+    loadFavoredIds,
+    name = "countryId",
+    ...rest
+  } = props;
 
-    // Ref
-    const favoredIds = React.useRef<string[]>([]);
+  // Ref
+  const favoredIds = React.useRef<string[]>([]);
 
-    // Ready
-    React.useEffect(() => {
-        if (loadFavoredIds && favoredIds.current.length === 0)
-            loadFavoredIds().then((ids) => {
-                favoredIds.current = ids;
-            });
-    }, [loadFavoredIds]);
+  // Ready
+  React.useEffect(() => {
+    if (loadFavoredIds && favoredIds.current.length === 0)
+      loadFavoredIds().then((ids) => {
+        favoredIds.current = ids;
+      });
+  }, [loadFavoredIds]);
 
-    // Layout
-    return (
-        <Tiplist<AddressRegionDb, 'id'>
-            name={name}
-            loadData={(keyword, id) =>
-                loadData({ id, keyword, favoredIds: favoredIds.current, items })
-            }
-            {...rest}
-        />
-    );
+  // Layout
+  return (
+    <Tiplist<AddressRegionDb, "id">
+      name={name}
+      loadData={(keyword, id) =>
+        loadData({ id, keyword, favoredIds: favoredIds.current, items })
+      }
+      {...rest}
+    />
+  );
 }

package/src/CustomFabProps.ts

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

package/src/DataGridEx.tsx

@@ -258,7 +258,7 @@ export function DataGridEx<T extends object>(props: DataGridExProps<T>) {
               states
             });
           } else if (sortable && field != null) {
-            const active = orderBy === field;
+            const active = orderBy != null && orderBy[field] != null;
 
             sortLabel = (
               <TableSortLabel
@@ -438,7 +438,7 @@ export function DataGridEx<T extends object>(props: DataGridExProps<T>) {
 
   // New sort
   const handleSort = (field: string, asc?: boolean) => {
-    reset({ queryPaging: { orderBy: field, orderByAsc: asc } });
+    reset({ queryPaging: { orderBy: { [field]: asc ?? true } } });
   };
 
   // Reset
@@ -626,10 +626,6 @@ export function DataGridEx<T extends object>(props: DataGridExProps<T>) {
 
   // Table
   const table = React.useMemo(() => {
-    const defaultOrderByAsc = defaultOrderBy
-      ? columns.find((column) => column.field === defaultOrderBy)?.sortAsc
-      : undefined;
-
     return (
       <ScrollerGrid<T>
         className={Utils.mergeClasses(
@@ -641,7 +637,6 @@ export function DataGridEx<T extends object>(props: DataGridExProps<T>) {
         columnCount={columns.length}
         columnWidth={columnWidth}
         defaultOrderBy={defaultOrderBy}
-        defaultOrderByAsc={defaultOrderByAsc}
         height={
           height -
           headerHeight -