@etsoo/materialui 1.4.67 → 1.4.69

package/lib/mjs/pages/ViewPage.d.ts

@@ -0,0 +1,104 @@
+import { GridColumnRenderProps, GridDataType } from "@etsoo/react";
+import { DataTypes } from "@etsoo/shared";
+import { Grid2Props } from "@mui/material";
+import React from "react";
+import { CommonPageProps } from "./CommonPage";
+import type { OperationMessageHandlerAll } from "../messages/OperationMessageHandler";
+/**
+ * View page grid item properties
+ */
+export type ViewPageGridItemProps = Grid2Props & {
+    data: React.ReactNode;
+    label?: React.ReactNode;
+    singleRow?: ViewPageRowType;
+};
+/**
+ * View page grid item
+ * @param props Props
+ * @returns Result
+ */
+export declare function ViewPageGridItem(props: ViewPageGridItemProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * View page row width type
+ */
+export type ViewPageRowType = boolean | "default" | "small" | "medium" | object;
+/**
+ * View page display field
+ */
+export interface ViewPageField<T extends object> extends Grid2Props {
+    /**
+     * Data field
+     */
+    data: (string & keyof T) | ((item: T) => React.ReactNode);
+    /**
+     * Data type
+     */
+    dataType?: GridDataType;
+    /**
+     * Label field
+     */
+    label?: string | ((item: T) => React.ReactNode);
+    /**
+     * Display as single row
+     */
+    singleRow?: ViewPageRowType;
+    /**
+     * Render props
+     */
+    renderProps?: GridColumnRenderProps;
+}
+type ViewPageFieldTypeNarrow<T extends object> = (string & keyof T) | [string & keyof T, GridDataType, GridColumnRenderProps?, ViewPageRowType?] | ViewPageField<T>;
+/**
+ * View page field type
+ */
+export type ViewPageFieldType<T extends object> = ViewPageFieldTypeNarrow<T> | ((data: T, refresh: () => Promise<void>) => React.ReactNode);
+/**
+ * View page props
+ */
+export interface ViewPageProps<T extends DataTypes.StringRecord> extends Omit<CommonPageProps, "children"> {
+    /**
+     * Actions
+     */
+    actions?: React.ReactNode | ((data: T, refresh: () => PromiseLike<void>) => React.ReactNode);
+    /**
+     * Children
+     */
+    children?: React.ReactNode | ((data: T, refresh: () => PromiseLike<void>) => React.ReactNode);
+    /**
+     * Fields to display
+     */
+    fields: ViewPageFieldType<T>[];
+    /**
+     * Load data
+     */
+    loadData: () => PromiseLike<T | undefined>;
+    /**
+     * Pull to refresh data
+     */
+    pullToRefresh?: boolean;
+    /**
+     * Grid spacing
+     */
+    spacing?: Record<string, string | number>;
+    /**
+     * Support refresh
+     */
+    supportRefresh?: boolean;
+    /**
+     * Grid container reference
+     */
+    gridRef?: React.Ref<HTMLDivElement>;
+    /**
+     * Operation message handler
+     */
+    operationMessageHandler?: OperationMessageHandlerAll | {
+        id: number;
+        types: string[];
+    };
+}
+/**
+ * View page
+ * @param props Props
+ */
+export declare function ViewPage<T extends DataTypes.StringRecord>(props: ViewPageProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/{pages → mjs/pages}/ViewPage.js

@@ -123,7 +123,7 @@ export function ViewPage(props) {
         return () => {
             MessageUtils.offRefresh(refreshHandler);
         };
-    }, []);
+    }, [refresh]);
     return (_jsx(CommonPage, { paddings: paddings, onRefresh: supportRefresh ? refresh : undefined, onUpdate: supportRefresh ? undefined : refresh, ...rest, scrollContainer: globalThis, fabColumnDirection: fabColumnDirection, fabTop: fabTop, supportBack: supportBack, children: data == null ? (_jsx(LinearProgress, {})) : (_jsxs(React.Fragment, { children: [operationMessageHandler && (_jsx(OperationMessageContainer, { handler: "id" in operationMessageHandler
                         ? [
                             operationMessageHandler.types,

package/lib/mjs/texts/DateText.d.ts

@@ -0,0 +1,33 @@
+import { DateUtils } from "@etsoo/shared";
+import { TypographyProps } from "@mui/material";
+/**
+ * Date text props
+ */
+export interface DateTextProps extends TypographyProps {
+    /**
+     * Locale
+     */
+    locale?: string;
+    /**
+     * Near days to show in error color
+     */
+    nearDays?: number;
+    /**
+     * Options
+     */
+    options?: DateUtils.FormatOptions;
+    /**
+     * Time zone
+     */
+    timeZone?: string;
+    /**
+     * Value to display
+     */
+    value?: Date | string;
+}
+/**
+ * Date text
+ * @param props Props
+ * @returns Component
+ */
+export declare function DateText(props: DateTextProps): import("react/jsx-runtime").JSX.Element;

package/lib/mjs/texts/MoneyText.d.ts

@@ -0,0 +1,20 @@
+import { NumberTextProps } from "./NumberText";
+/**
+ * Money text props
+ */
+export interface MoneyTextProps extends NumberTextProps {
+    /**
+     * Currency, USD for US dollar
+     */
+    currency?: string;
+    /**
+     * Is integer number
+     */
+    isInteger?: boolean;
+}
+/**
+ * Money text
+ * @param props Props
+ * @returns Component
+ */
+export declare function MoneyText(props: MoneyTextProps): import("react/jsx-runtime").JSX.Element;

package/lib/mjs/texts/NumberText.d.ts

@@ -0,0 +1,24 @@
+import { TypographyProps } from "@mui/material";
+/**
+ * Number text props
+ */
+export interface NumberTextProps extends TypographyProps {
+    /**
+     * Locale
+     */
+    locale?: string | string[];
+    /**
+     * Options
+     */
+    options?: Intl.NumberFormatOptions;
+    /**
+     * Value
+     */
+    value?: number | bigint | null;
+}
+/**
+ * Number text
+ * @param props Props
+ * @returns Component
+ */
+export declare function NumberText(props: NumberTextProps): import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,12 +1,18 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.4.67",
+  "version": "1.4.69",
   "description": "TypeScript Material-UI Implementation",
-  "main": "lib/index.js",
-  "type": "module",
-  "types": "lib/index.d.ts",
+  "main": "lib/cjs/index.js",
+  "module": "lib/mjs/index.js",
+  "types": "lib/mjs/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./lib/mjs/index.js",
+      "require": "./lib/cjs/index.js"
+    }
+  },
   "scripts": {
-    "build": "tsc",
+    "build": "tsc -p tsconfig.json && tsc -p tsconfig.cjs.json",
     "test": "vitest"
   },
   "repository": {
@@ -34,10 +40,10 @@
     "@dnd-kit/sortable": "^10.0.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
-    "@etsoo/appscript": "^1.5.87",
-    "@etsoo/notificationbase": "^1.1.54",
-    "@etsoo/react": "^1.8.21",
-    "@etsoo/shared": "^1.2.55",
+    "@etsoo/appscript": "^1.5.88",
+    "@etsoo/notificationbase": "^1.1.55",
+    "@etsoo/react": "^1.8.24",
+    "@etsoo/shared": "^1.2.58",
     "@mui/icons-material": "^6.3.1",
     "@mui/material": "^6.3.1",
     "@mui/x-data-grid": "^7.23.6",
@@ -54,6 +60,8 @@
     "react-imask": "7.6.1"
   },
   "overrides": {
+    "react": "$react",
+    "react-dom": "$react-dom",
     "@emotion/react": "$@emotion/react"
   },
   "devDependencies": {

package/src/LineChart.tsx

@@ -1,7 +1,7 @@
 import { LinearProgress } from "@mui/material";
 import React from "react";
-import type { ChartData, LineControllerChartOptions } from "chart.js";
-import type { Line } from "react-chartjs-2";
+import type { ChartData, LineControllerChartOptions } from "chart.js" with { "resolution-mode": "import" };
+import type { Line } from "react-chartjs-2" with { "resolution-mode": "import" };
 
 /**
  * Line chart
@@ -70,7 +70,7 @@ export function LineChart(props: LineChartProps) {
           Tooltip,
           Legend,
 
-          ChartDataLabels
+          ChartDataLabels as any // CommonJS says 'id' is missing
         );
 
         setLineType(Line);

package/src/MaskInput.tsx

@@ -1,27 +1,32 @@
 import { TextField, TextFieldProps } from "@mui/material";
 import React from "react";
 import { MUGlobal } from "./MUGlobal";
-import { type InputMask, type FactoryOpts } from "imask";
-import { useIMask } from "react-imask";
+
+type ReactIMask = typeof import("react-imask", { with: { "resolution-mode": "import" }}).useIMask;
+type ReactIMaskProps = Parameters<ReactIMask>;
+type RIOpts = ReactIMaskProps[0];
+type RIReturns = ReturnType<ReactIMask>;
+type RIMaskRef = RIReturns["maskRef"]["current"];
+type RIMValue = RIReturns["value"];
 
 /**
  * Mask input props
  */
-export type MaskInputProps<T extends FactoryOpts> = TextFieldProps & {
+export type MaskInputProps = TextFieldProps & {
   /**
    * Mask props
    */
-  mask: T;
+  mask: RIOpts;
 
   /**
    * Accept hanlder
    */
-  onAccept?: (value: unknown, maskRef: InputMask<T>, e?: InputEvent) => void;
+  onAccept?: (value: RIMValue, maskRef: RIMaskRef, e?: InputEvent) => void;
 
   /**
    * Complete handler
    */
-  onComplete?: (value: unknown, maskRef: InputMask<T>, e?: InputEvent) => void;
+  onComplete?: (value: RIMValue, maskRef: RIMaskRef, e?: InputEvent) => void;
 
   /**
    * Is the field read only?
@@ -40,8 +45,8 @@ export type MaskInputProps<T extends FactoryOpts> = TextFieldProps & {
  * @param props Props
  * @returns Component
  */
-export function MaskInput<T extends FactoryOpts = FactoryOpts>(
-  props: MaskInputProps<T>
+export function MaskInput(
+  props: MaskInputProps
 ) {
   // Destruct
   const {
@@ -59,11 +64,19 @@ export function MaskInput<T extends FactoryOpts = FactoryOpts>(
     ...rest
   } = props;
 
+  // State
+  const [useIMask, setUseIMask] = React.useState<ReactIMask | null>(null);
+  React.useEffect(() => {
+    import("react-imask").then((module) => setUseIMask(module.useIMask));
+  }, []);
+
+  if(useIMask == null) return;
+
   const { ref, maskRef } = useIMask(mask, {
-    onAccept: (value, maskRef, event) => {
+    onAccept: (value: RIMValue, maskRef: RIMaskRef, event?: InputEvent) => {
       if (onAccept) onAccept(value, maskRef, event);
     },
-    onComplete: (value, maskRef, event) => {
+    onComplete: (value: RIMValue, maskRef: RIMaskRef, event?: InputEvent) => {
       if (onComplete) onComplete(value, maskRef, event);
     }
   });

package/src/TableEx.tsx

@@ -6,9 +6,9 @@ import {
   GridLoader,
   GridLoaderPartialStates,
   GridLoaderStates,
+  GridMethodRef,
   GridSizeGet
 } from "@etsoo/react";
-import { GridMethodRef } from "@etsoo/react/lib/components/GridMethodRef";
 import { DataTypes, IdDefaultType } from "@etsoo/shared";
 import {
   Checkbox,

package/src/pages/ViewPage.tsx

@@ -298,7 +298,7 @@ export function ViewPage<T extends DataTypes.StringRecord>(
     return () => {
       MessageUtils.offRefresh(refreshHandler);
     };
-  }, []);
+  }, [refresh]);
 
   return (
     <CommonPage

package/tsconfig.cjs.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    /* Visit https://aka.ms/tsconfig.json to read more about this file */
+    "target": "ES2022",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "isolatedModules": true,
+    "outDir": "./lib/cjs",
+    "noEmit": false,
+    "declaration": true,
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "jsx": "react-jsx",
+    "lib": ["dom", "dom.iterable", "ESNext"]
+  },
+  "include": ["src"]
+}

package/tsconfig.json

@@ -6,7 +6,7 @@
     "moduleResolution": "bundler",
     "allowJs": false,
     "isolatedModules": true,
-    "outDir": "./lib",
+    "outDir": "./lib/mjs",
     "noEmit": false,
     "declaration": true,
     "strict": true,

package/lib/MaskInput.d.ts

@@ -1,34 +0,0 @@
-import { TextFieldProps } from "@mui/material";
-import { type InputMask, type FactoryOpts } from "imask";
-/**
- * Mask input props
- */
-export type MaskInputProps<T extends FactoryOpts> = TextFieldProps & {
-    /**
-     * Mask props
-     */
-    mask: T;
-    /**
-     * Accept hanlder
-     */
-    onAccept?: (value: unknown, maskRef: InputMask<T>, e?: InputEvent) => void;
-    /**
-     * Complete handler
-     */
-    onComplete?: (value: unknown, maskRef: InputMask<T>, e?: InputEvent) => void;
-    /**
-     * Is the field read only?
-     */
-    readOnly?: boolean;
-    /**
-     * Search case
-     */
-    search?: boolean;
-};
-/**
- * Mask input
- * https://imask.js.org/
- * @param props Props
- * @returns Component
- */
-export declare function MaskInput<T extends FactoryOpts = FactoryOpts>(props: MaskInputProps<T>): import("react/jsx-runtime").JSX.Element;