@etsoo/react 1.8.21 → 1.8.23

package/lib/mjs/components/ScrollerList.d.ts

@@ -0,0 +1,66 @@
+import { DataTypes } from "@etsoo/shared";
+import React from "react";
+import { Align, ListChildComponentProps, ListProps } from "react-window";
+import { GridLoader } from "./GridLoader";
+import { GridMethodRef } from "./GridMethodRef";
+/**
+ * Scroller vertical list props
+ */
+export type ScrollerListProps<T extends object> = GridLoader<T> & Omit<ListProps<T>, "outerRef" | "height" | "width" | "children" | "itemCount"> & {
+    /**
+     * Methods ref
+     */
+    mRef?: React.Ref<ScrollerListForwardRef<T>>;
+    /**
+     * Outer div ref
+     */
+    oRef?: React.Ref<HTMLDivElement>;
+    /**
+     * Height of the list
+     */
+    height?: number;
+    /**
+     * Width of the list
+     */
+    width?: number | string;
+    /**
+     * Id field
+     */
+    idField?: DataTypes.Keys<T>;
+    /**
+     * Item renderer
+     */
+    itemRenderer: (props: ListChildComponentProps<T>) => React.ReactElement;
+    /**
+     * Item size, a function indicates its a variable size list
+     */
+    itemSize: ((index: number) => number) | number;
+};
+/**
+ * Scroller list ref
+ */
+export interface ScrollerListRef {
+    /**
+     * Scroll to the specified offset (scrollTop or scrollLeft, depending on the direction prop).
+     */
+    scrollTo(scrollOffset: number): void;
+    /**
+     * Scroll to the specified item.
+     */
+    scrollToItem(index: number, align?: Align): void;
+}
+/**
+ * Scroller list forward ref
+ */
+export interface ScrollerListForwardRef<T> extends GridMethodRef<T> {
+    /**
+     * Refresh latest page data
+     */
+    refresh(): void;
+}
+/**
+ * Scroller vertical list
+ * @param props Props
+ * @returns Component
+ */
+export declare const ScrollerList: <T extends object>(props: ScrollerListProps<T>) => import("react/jsx-runtime").JSX.Element;

package/lib/mjs/custom/CustomFieldReact.d.ts

@@ -0,0 +1,22 @@
+import { CustomFieldData, CustomFieldProps, CustomFieldRef, ICustomField } from "@etsoo/appscript";
+/**
+ * React custom field interface
+ * React自定义字段接口
+ */
+export interface ICustomFieldReact<V, D extends CustomFieldData = CustomFieldData> extends ICustomField<V, D, CustomFieldReactProps<V, D>, React.JSX.Element> {
+}
+/**
+ * React custom field props
+ * React自定义字段属性
+ */
+export type CustomFieldReactProps<V, D extends CustomFieldData = CustomFieldData> = CustomFieldProps<D, V> & {
+    mref: React.Ref<CustomFieldRef<V>>;
+};
+/**
+ * React custom field renderer collection
+ * React自定义字段渲染结果集合
+ */
+export type CustomFieldReactCollection<D extends CustomFieldData> = Record<string, [
+    React.RefObject<CustomFieldRef<unknown>>,
+    D
+]>;

package/lib/mjs/index.d.ts

@@ -0,0 +1,33 @@
+export * from "./app/CoreConstants";
+export * from "./app/EventWatcher";
+export * from "./app/InputDialogProps";
+export * from "./app/ReactUtils";
+export * from "./components/DnDList";
+export * from "./components/DynamicRouter";
+export * from "./components/GridColumn";
+export * from "./components/GridLoader";
+export * from "./components/GridMethodRef";
+export * from "./components/ListItemReact";
+export * from "./components/ScrollerGrid";
+export * from "./components/ScrollerList";
+export * from "./components/ScrollRestoration";
+export type { ListOnScrollProps, GridOnScrollProps, VariableSizeGrid } from "react-window";
+export * from "./custom/CustomFieldReact";
+export * from "./notifier/Notifier";
+export * from "@etsoo/notificationbase";
+export * from "./states/CultureState";
+export * from "./states/IState";
+export * from "./states/PageState";
+export * from "./states/State";
+export * from "./states/UserState";
+export * from "./uses/useAsyncState";
+export * from "./uses/useCombinedRefs";
+export * from "./uses/useDelayedExecutor";
+export * from "./uses/useDimensions";
+export * from "./uses/useParamsEx";
+export * from "./uses/useRefs";
+export * from "./uses/useRequiredContext";
+export * from "./uses/useSearchParamsEx";
+export * from "./uses/useTimeout";
+export * from "./uses/useWindowScroll";
+export * from "./uses/useWindowSize";

package/lib/mjs/notifier/Notifier.d.ts

@@ -0,0 +1,143 @@
+import React from "react";
+import { INotificaseBase, INotification, INotifier, Notification, NotificationAlign, NotificationCallProps, NotificationContainer, NotificationRenderProps } from "@etsoo/notificationbase";
+import { IAction } from "@etsoo/appscript";
+import { IProviderProps } from "../states/IState";
+/**
+ * React notification call props
+ */
+export interface NotificationReactCallProps extends NotificationCallProps {
+    /**
+     * Full width
+     */
+    fullWidth?: boolean;
+    /**
+     * Full screen
+     */
+    fullScreen?: boolean;
+    /**
+     * Inputs layout
+     */
+    inputs?: React.ReactNode;
+    /**
+     * Max width
+     */
+    maxWidth?: "xs" | "sm" | "md" | "lg" | "xl" | false;
+    /**
+     * OK label
+     */
+    okLabel?: string;
+    /**
+     * false to hide cancel button
+     */
+    cancelButton?: boolean;
+    /**
+     * Cancel label
+     */
+    cancelLabel?: string;
+    /**
+     * Window is closable
+     */
+    closable?: boolean;
+    /**
+     * Draggable
+     */
+    draggable?: boolean;
+    /**
+     * Type
+     */
+    type?: string;
+    /**
+     * false to hide primary button
+     */
+    primaryButton?: boolean;
+    /**
+     * Primary button props
+     */
+    primaryButtonProps?: {};
+    /**
+     * Buttons to override default buttons
+     */
+    buttons?: (notification: INotificationReact, callback: (event: React.MouseEvent<HTMLButtonElement>, value?: any) => Promise<boolean>) => React.ReactNode;
+}
+/**
+ * React notification interface
+ */
+export interface INotificationReact extends INotification<React.ReactNode, NotificationReactCallProps> {
+}
+/**
+ * React notification base interface
+ */
+export interface INotificationBaseReact extends INotificaseBase<React.ReactNode, NotificationReactCallProps> {
+}
+/**
+ * Action to manage the notifier
+ */
+interface INotifierAction extends IAction {
+    /**
+     * Notification
+     */
+    notification: INotificationReact;
+    /**
+     * Add or dismiss
+     */
+    dismiss: boolean;
+}
+/**
+ * React notification
+ */
+export declare abstract class NotificationReact extends Notification<React.ReactNode, NotificationReactCallProps> implements INotificationReact {
+}
+/**
+ * React notification render props
+ */
+export interface NotificationReactRenderProps extends NotificationRenderProps, IProviderProps<INotifierAction> {
+}
+/**
+ * Notifier interface
+ */
+export interface INotifierReact extends INotifier<React.ReactNode, NotificationReactCallProps> {
+    /**
+     * Create state provider
+     * @param className Style class name
+     * @param debug Is debug mode
+     * @returns Provider
+     */
+    createProvider(className?: string, debug?: boolean): React.FunctionComponent<NotificationReactRenderProps>;
+}
+/**
+ * Notifier for React
+ */
+export declare abstract class NotifierReact extends NotificationContainer<React.ReactNode, NotificationReactCallProps> implements INotifierReact {
+    private static _instance;
+    /**
+     * Singleton instance
+     */
+    static get instance(): INotifierReact;
+    /**
+     * Update notifier
+     * @param notifier Notifier
+     */
+    protected static updateInstance(notifier: INotifierReact): void;
+    /**
+     * Constructor
+     */
+    protected constructor();
+    /**
+     * State update
+     */
+    protected stateUpdate?: React.Dispatch<INotifierAction>;
+    /**
+     * Create align container
+     * @param align Align
+     * @param children Children
+     * @param options Other options
+     */
+    protected abstract createContainer(align: NotificationAlign, children: React.ReactNode[]): React.ReactElement;
+    /**
+     * Create state provider
+     * @param className Style class name
+     * @returns Provider
+     */
+    createProvider(className?: string, debug?: boolean): React.FunctionComponent<React.PropsWithChildren<NotificationReactRenderProps>>;
+}
+export {};

package/lib/mjs/states/CultureState.d.ts

@@ -0,0 +1,41 @@
+import { IAction, ICulture } from "@etsoo/appscript";
+import { DataTypes } from "@etsoo/shared";
+import { IProviderProps, IUpdate } from "./IState";
+/**
+ * Culture action to manage resources
+ */
+export interface CultureAction extends ICulture, IAction {
+}
+/**
+ * Culture calls with the state
+ */
+export interface CultureCalls extends IUpdate<ICulture, CultureAction> {
+    /**
+     * Key value
+     * @param key Item key
+     */
+    get<T = string>(key: string): T | undefined;
+}
+/**
+ * Culture provider props
+ */
+export type CultureProviderProps = IProviderProps<CultureAction>;
+/**
+ * Culture state
+ * Creator for culture context and provider globally, not inside a component to avoid problem:
+ * Cannot update a component (`provider`) while rendering a different component
+ */
+export declare class CultureState {
+    /**
+     * Context
+     */
+    readonly context: import("react").Context<CultureCalls>;
+    /**
+     * Provider
+     */
+    readonly provider: import("react").FunctionComponent<import("react").PropsWithChildren<IProviderProps<CultureAction>>>;
+    /**
+     * Constructor
+     */
+    constructor(item?: DataTypes.CultureDefinition);
+}

package/lib/mjs/states/IState.d.ts

@@ -0,0 +1,49 @@
+import { IAction, IState, UserKey } from "@etsoo/appscript";
+import React from "react";
+/**
+ * State UI creator
+ */
+export interface IUICreator<S extends IState, A extends IAction, P = object> {
+    (state: S, dispatch: React.Dispatch<A>, props: P): React.ReactElement;
+}
+/**
+ * State update interface
+ */
+export interface IUpdate<S extends IState, A extends IAction> {
+    state: S;
+    dispatch: React.Dispatch<A>;
+}
+/**
+ * State update interface
+ */
+export interface IStateUpdate {
+    (authorized?: boolean, matchedFields?: string[]): PromiseLike<void> | void;
+}
+/**
+ * State update props
+ */
+export interface IStateProps {
+    /**
+     * State last changed fields
+     */
+    targetFields?: UserKey[];
+    /**
+     * State update callback
+     */
+    update: IStateUpdate;
+}
+/**
+ * State provider update callback
+ */
+export interface IProviderUpdate<A extends IAction> {
+    (dispatch: React.Dispatch<A>): void;
+}
+/**
+ * State provider props
+ */
+export interface IProviderProps<A extends IAction> {
+    /**
+     * Update callback
+     */
+    update?: IProviderUpdate<A>;
+}

package/lib/mjs/states/PageState.d.ts

@@ -0,0 +1,61 @@
+import { IAction, IState } from "@etsoo/appscript";
+import { IProviderProps, IUpdate } from "./IState";
+/**
+ * Page data interface
+ */
+export interface IPageData extends IState {
+    /**
+     * Page title
+     */
+    title?: string;
+    /**
+     * Page subtitle
+     */
+    subtitle?: string;
+}
+/**
+ * Page action type
+ */
+export declare enum PageActionType {
+    Data = "DATA",
+    Title = "TITLE"
+}
+/**
+ * Page action
+ */
+export interface PageAction<D extends IPageData> extends IAction {
+    /**
+     * Action type
+     */
+    type: PageActionType;
+    /**
+     * Action data
+     */
+    data: D;
+}
+/**
+ * Page provider props
+ */
+export type PageProviderProps<D extends IPageData> = IProviderProps<PageAction<D>>;
+/**
+ * Page calls with the state
+ */
+export interface PageCalls<D extends IPageData> extends IUpdate<D, PageAction<D>> {
+}
+/**
+ * User state
+ */
+export declare class PageState<D extends IPageData> {
+    /**
+     * Context
+     */
+    readonly context: import("react").Context<PageCalls<D>>;
+    /**
+     * Provider
+     */
+    readonly provider: import("react").FunctionComponent<import("react").PropsWithChildren<IProviderProps<PageAction<D>>>>;
+    /**
+     * Constructor
+     */
+    constructor();
+}

package/lib/mjs/states/State.d.ts

@@ -0,0 +1,18 @@
+import { IAction, IState } from "@etsoo/appscript";
+import React from "react";
+import { IProviderProps, IUICreator, IUpdate } from "./IState";
+/**
+ * State
+ */
+export declare class State {
+    /**
+     * Generic to create state context and provider
+     * @param reducer Reduce function
+     * @param initState Init state
+     * @param uiCreator Additional UI creator
+     */
+    static create<S extends IState, A extends IAction, U extends IUpdate<S, A>, P extends IProviderProps<A>>(reducer: React.Reducer<S, A>, initState: S, calls: U, uiCreator?: IUICreator<S, A, P>): {
+        context: React.Context<U>;
+        provider: React.FunctionComponent<React.PropsWithChildren<P>>;
+    };
+}

package/lib/mjs/states/UserState.d.ts

@@ -0,0 +1,56 @@
+import { IAction, IUser, IUserData } from "@etsoo/appscript";
+import { IProviderProps, IUpdate } from "./IState";
+/**
+ * User action type
+ * Style like 'const enum' will remove definition of the enum and cause module errors
+ */
+export declare enum UserActionType {
+    Login = "LOGIN",
+    Logout = "LOGOUT",
+    Update = "UPDATE",
+    Unauthorized = "UNAUTHORIZED"
+}
+/**
+ * User action to manage the user
+ */
+export interface UserAction<D extends IUser> extends IAction {
+    /**
+     * Action type
+     */
+    type: UserActionType;
+    /**
+     * User data
+     */
+    user?: IUserData;
+    /**
+     * User update callback
+     */
+    update?: (state: D) => void;
+}
+/**
+ * User provider props
+ */
+export type UserProviderProps<D extends IUser> = IProviderProps<UserAction<D>>;
+/**
+ * Users calls with the state
+ */
+export interface UserCalls<D extends IUser> extends IUpdate<D, UserAction<D>> {
+}
+/**
+ * User state
+ */
+export declare class UserState<D extends IUser> {
+    /**
+     * Context
+     */
+    readonly context: import("react").Context<UserCalls<D>>;
+    /**
+     * Provider
+     */
+    readonly provider: import("react").FunctionComponent<import("react").PropsWithChildren<UserProviderProps<D>>>;
+    /**
+     * Constructor
+     */
+    constructor();
+    private getChangedFields;
+}

package/lib/mjs/uses/useAsyncState.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+export declare function useAsyncState<S = undefined>(): [
+    S | undefined,
+    (newState: React.SetStateAction<S | undefined>) => Promise<S | undefined>
+];
+/**
+ * Returns a stateful value, and a async function to update it.
+ * @param initialState initial stat
+ * @returns Current state and update action
+ */
+export declare function useAsyncState<S>(initialState: S | (() => S)): [S, (newState: React.SetStateAction<S>) => Promise<S>];

package/lib/mjs/uses/useCombinedRefs.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Combined refs
+ * @param refs Refs
+ * @returns Callback
+ */
+export declare function useCombinedRefs<T>(...refs: (React.Ref<T> | undefined)[]): (target: T | null) => void;

package/lib/mjs/uses/useDelayedExecutor.d.ts

@@ -0,0 +1,5 @@
+import { DelayedExecutorType } from "@etsoo/shared";
+/**
+ * Create delayed executor
+ */
+export declare function useDelayedExecutor<P extends any[]>(func: (...args: P) => void, delayMiliseconcs: number): DelayedExecutorType<P>;

package/lib/mjs/uses/useDimensions.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+interface states {
+    count: number;
+    indices: number[];
+}
+/**
+ * Calculate element(s) dimensions
+ * @param elements Observed elments count
+ * @param updateCallback Update callback
+ * @param miliseconds Miliseconds to wait before update
+ * @param equalCallback Equall callback
+ */
+export declare function useDimensions(elements: number, updateCallback?: (target: Element, rect: DOMRect) => boolean | void, miliseconds?: number, equalCallback?: (d1?: DOMRect, d2?: DOMRect) => boolean): {
+    dimensions: [(instance: Element | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES], (Element | undefined)?, (DOMRect | undefined)?][];
+    state: states;
+};
+export {};

package/lib/mjs/uses/useParamsEx.d.ts

@@ -0,0 +1,6 @@
+import { DataTypes } from "@etsoo/shared";
+/**
+ * Extended useParams of react-router-dom
+ * Provide exact type data
+ */
+export declare function useParamsEx<T extends DataTypes.BasicTemplate>(template: T): DataTypes.BasicTemplateType<T>;

package/lib/mjs/uses/useRefs.d.ts

@@ -0,0 +1,8 @@
+import { DataTypes } from "@etsoo/shared";
+import React from "react";
+/**
+ * Create multiple refs
+ * @param fields Fields
+ * @returns Result
+ */
+export declare function useRefs<F extends ReadonlyArray<string>, T = HTMLInputElement>(fields: F): DataTypes.DI<F, React.MutableRefObject<T | null>>;

package/lib/mjs/uses/useRequiredContext.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+/**
+ * Required context
+ * @param context Context
+ * @returns Value
+ */
+export declare function useRequiredContext<T>(context: React.Context<T>): NonNullable<T>;

package/lib/mjs/uses/useSearchParamsEx.d.ts

@@ -0,0 +1,6 @@
+import { DataTypes } from "@etsoo/shared";
+/**
+ * Extended useSearchParams of react-router-dom
+ * Provide exact type data
+ */
+export declare function useSearchParamsEx<T extends DataTypes.BasicTemplate>(template: T): DataTypes.BasicTemplateType<T>;

package/lib/mjs/uses/useTimeout.d.ts

@@ -0,0 +1,8 @@
+/**
+ * For setTimeout to merge actions
+ * @param action Action function
+ * @param milliseconds Interval of milliseconds
+ */
+export declare const useTimeout: (action: (...args: any[]) => void, milliseconds: number) => {
+    cancel: () => void;
+};

package/lib/mjs/uses/useWindowScroll.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Window scroll position
+ */
+export interface IScrollPos {
+    x: number;
+    y: number;
+}
+/**
+ * Detect window scroll
+ * @returns Scroll location
+ */
+export declare const useWindowScroll: () => IScrollPos;

package/lib/mjs/uses/useWindowSize.d.ts

@@ -0,0 +1,10 @@
+interface ISize {
+    width: number;
+    height: number;
+}
+/**
+ * Detect window size
+ * @returns Window size
+ */
+export declare const useWindowSize: () => ISize;
+export {};

package/package.json

@@ -1,27 +1,19 @@
 {
   "name": "@etsoo/react",
-  "version": "1.8.21",
+  "version": "1.8.23",
   "description": "TypeScript ReactJs UI Independent Framework",
-  "main": "lib/index.js",
-  "types": "lib/index.d.ts",
-  "scripts": {
-    "build": "tsc",
-    "test": "jest",
-    "test:debug": "node --inspect-brk ./node_modules/jest/bin/jest.js --runInBand"
+  "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"
+    }
   },
-  "jest": {
-    "automock": false,
-    "testMatch": [
-      "<rootDir>/__tests__/**/*.{ts,tsx}"
-    ],
-    "testEnvironment": "jsdom",
-    "transform": {
-      ".+\\.jsx?$": "babel-jest",
-      ".+\\.tsx?$": "ts-jest"
-    },
-    "transformIgnorePatterns": [
-      "/node_modules/(?!@etsoo/).+\\.js$"
-    ]
+  "scripts": {
+    "build": "tsc -p tsconfig.json && tsc -p tsconfig.cjs.json",
+    "test": "vitest"
   },
   "repository": {
     "type": "git",
@@ -56,6 +48,11 @@
     "react-router-dom": "^7.1.1",
     "react-window": "^1.8.10"
   },
+  "overrides": {
+    "react": "$react",
+    "react-dom": "$react-dom",
+    "@emotion/react": "$@emotion/react"
+  },
   "devDependencies": {
     "@babel/cli": "^7.25.9",
     "@babel/core": "^7.26.0",
@@ -68,9 +65,9 @@
     "@types/react": "^18.3.18",
     "@types/react-dom": "^18.3.1",
     "@types/react-window": "^1.8.8",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
-    "ts-jest": "^29.2.5",
-    "typescript": "^5.7.3"
+    "@vitejs/plugin-react": "^4.3.4",
+    "jsdom": "^26.0.0",
+    "typescript": "^5.7.3",
+    "vitest": "^2.1.8"
   }
 }