@etsoo/materialui 1.5.86 → 1.5.88

package/__tests__/ComboBox.tsx

@@ -1,6 +1,11 @@
-import React from "react";
 import { ComboBox } from "../src";
-import { act, fireEvent, render, screen } from "@testing-library/react";
+import {
+  act,
+  fireEvent,
+  render,
+  screen,
+  waitFor
+} from "@testing-library/react";
 
 it("Render ComboBox", async () => {
   // Arrange
@@ -21,21 +26,15 @@ it("Render ComboBox", async () => {
     );
   });
 
-  await vi.waitFor(
-    async () => {
-      await screen.findByRole("button");
-    },
-    {
-      timeout: 500, // default is 1000
-      interval: 20 // default is 50
-    }
-  );
+  await waitFor(async () => {
+    const button = await screen.findByRole("button");
 
-  // Act, click the list
-  const clicked = fireEvent.click(screen.getByRole("button"));
-  expect(clicked).toBeTruthy();
+    // Act, click the list
+    const clicked = fireEvent.click(button);
+    expect(clicked).toBeTruthy();
 
-  // Get list item
-  const item = screen.getByText("Name 1");
-  expect(item.nodeName).toBe("LI");
+    // Get list item
+    const item = await screen.findByText("Name 1");
+    expect(item.nodeName).toBe("LI");
+  });
 });

package/__tests__/CustomFields.tsx

@@ -137,13 +137,13 @@ it("Render FieldSelect", async () => {
     );
   });
 
-  const button = screen.getByRole("combobox");
+  const button = await screen.findByRole("combobox");
 
   act(() => {
     // Act, click to open the dropdown list
     vi.useFakeTimers();
     fireEvent.mouseDown(button);
-    vi.advanceTimersByTime(100);
+    vi.runAllTimers();
   });
 
   const input = document.querySelector<HTMLInputElement>("input");

package/__tests__/InputTipField.tsx

@@ -0,0 +1,76 @@
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { act } from "react";
+import { InputTipField } from "../src";
+
+it("Render default InputTipField", async () => {
+  // Render component
+  act(() => {
+    render(
+      <InputTipField
+        name="amount"
+        type="number"
+        componentProps={{
+          loadData: (_value) => Promise.resolve([])
+        }}
+        slotProps={{ htmlInput: { role: "input" } }}
+      />
+    );
+  });
+
+  const input = screen.getByRole<HTMLInputElement>("input");
+  expect(input.type).toBe("number");
+});
+
+it("Render email InputTipField", async () => {
+  // Arrange
+  type T = { id: number; name: string };
+  const options: T[] = [
+    { id: 1, name: "Name 1" },
+    { id: 2, name: "Name 2" }
+  ];
+
+  const changeHandler = vi.fn();
+
+  const flag = "2 items";
+
+  // Render component
+  act(() => {
+    render(
+      <InputTipField<T>
+        component="email"
+        componentProps={{
+          loadData: (_value) => Promise.resolve([options, flag]),
+          itemLabel: (item) => item.name + ` (${item.id})`
+        }}
+        onChangeDelay={changeHandler}
+        slotProps={{ htmlInput: { role: "input" } }}
+      />
+    );
+  });
+
+  const input = screen.getByRole<HTMLInputElement>("input");
+  expect(input.type).toBe("email");
+
+  act(() => {
+    vi.useFakeTimers();
+
+    fireEvent.change(input, { target: { value: "info@etsoo.com" } });
+    expect(input.value).toBe("info@etsoo.com");
+
+    vi.runAllTimers();
+    expect(changeHandler).toHaveBeenCalled();
+
+    // Restore timers, otherwise 'waitFor' will fail
+    vi.useRealTimers();
+  });
+
+  await waitFor(() => {
+    const button = screen.getByText(flag);
+    expect(button.nodeName).toBe("P");
+
+    fireEvent.click(button);
+
+    const item = screen.getByText("Name 2 (2)");
+    expect(item.nodeName).toBe("LI");
+  });
+});

package/lib/cjs/InputTipField.d.ts

@@ -1,58 +1,70 @@
-import { DataTypes } from "@etsoo/shared";
+import { IdType } from "@etsoo/shared";
 import { TypographyProps } from "@mui/material/Typography";
 import React from "react";
-import { InputField } from "./InputField";
+import { InputFieldProps } from "./InputField";
 import { EmailInput } from "./EmailInput";
 import { MobileInput } from "./MobileInput";
 import { PhoneInput } from "./PhoneInput";
-type ItemType = DataTypes.IdLabelItem<string | number>;
+type ItemType = {
+    id: IdType;
+};
 declare const componentMap: {
-    input: typeof InputField;
     email: typeof EmailInput;
     phone: typeof PhoneInput;
     mobile: typeof MobileInput;
 };
 type ComponentMap = typeof componentMap;
 type ComponentKey = keyof ComponentMap;
+type ComponentProps<T extends ItemType> = {
+    /**
+     * Load data
+     * @param value Duplicate test value
+     */
+    loadData(value: string): Promise<[T[]?, string?]>;
+    /**
+     * Label props
+     */
+    labelProps?: Omit<TypographyProps, "onClick">;
+    /**
+     * Custom item label
+     * @param item List item data
+     * @returns Result
+     */
+    itemLabel?: (item: T) => React.ReactNode;
+    /**
+     * Custom render item
+     * @param item List item data
+     * @returns Result
+     */
+    renderItem?: (item: T) => React.ReactNode;
+};
 /**
  * InputField with tips properties
  */
-export type InputTipFieldProps<T extends ItemType = ItemType, K extends ComponentKey = "input"> = Omit<React.ComponentProps<ComponentMap[K]>, "component"> & {
+export type InputTipFieldProps<T extends ItemType = ItemType> = {
     /**
-     * Component key
+     * Component properties
      */
-    component?: K;
+    componentProps: ComponentProps<T>;
+} & (({
     /**
      * Component properties
      */
-    componentProps: {
+    componentProps: ComponentProps<T>;
+} & {
+    [K in ComponentKey]: {
         /**
-         * Load data
-         * @param value Duplicate test value
+         * Component key
          */
-        loadData(value: string): Promise<[T[]?, string?]>;
-        /**
-         * Label props
-         */
-        labelProps?: Omit<TypographyProps, "onClick">;
-        /**
-         * Custom item label
-         * @param item List item data
-         * @returns Result
-         */
-        itemLabel?: (item: T) => React.ReactNode;
-        /**
-         * Custom render item
-         * @param item List item data
-         * @returns Result
-         */
-        renderItem?: (item: T) => React.ReactNode;
-    };
-};
+        component: K;
+    } & Omit<React.ComponentProps<ComponentMap[K]>, "component">;
+}[ComponentKey]) | ({
+    component?: "input";
+} & Omit<InputFieldProps, "component">));
 /**
  * InputField with tips
  * @param props Props
  * @returns Component
  */
-export declare function InputTipField<T extends ItemType = ItemType, K extends ComponentKey = "input">(props: InputTipFieldProps<T, K>): import("react/jsx-runtime").JSX.Element;
+export declare function InputTipField<T extends ItemType = ItemType>(props: InputTipFieldProps<T>): import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/cjs/InputTipField.js

@@ -5,6 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InputTipField = InputTipField;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const shared_1 = require("@etsoo/shared");
 const Typography_1 = __importDefault(require("@mui/material/Typography"));
 const react_1 = __importDefault(require("react"));
 const InputField_1 = require("./InputField");
@@ -17,7 +18,6 @@ const EmailInput_1 = require("./EmailInput");
 const MobileInput_1 = require("./MobileInput");
 const PhoneInput_1 = require("./PhoneInput");
 const componentMap = {
-    input: InputField_1.InputField,
     email: EmailInput_1.EmailInput,
     phone: PhoneInput_1.PhoneInput,
     mobile: MobileInput_1.MobileInput
@@ -39,9 +39,9 @@ function InputTipField(props) {
     const { labelProps = {
         title: app?.get("clickForDetails"),
         sx: { color: (theme) => theme.palette.error.main, cursor: "pointer" }
-    }, loadData, itemLabel = (item) => item.label, renderItem = (item) => (0, jsx_runtime_1.jsx)(ListItem_1.default, { children: itemLabel(item) }, item.id) } = componentProps;
+    }, loadData, itemLabel = (item) => shared_1.DataTypes.getObjectItemLabel(item), renderItem = (item) => (0, jsx_runtime_1.jsx)(ListItem_1.default, { children: itemLabel(item) }, item.id) } = componentProps;
     const { input, ...slotRests } = slotProps;
-    const Component = componentMap[component];
+    const Component = component === "input" ? InputField_1.InputField : componentMap[component];
     const load = (value) => {
         if (value.length < 2) {
             setTitle(undefined);

package/lib/mjs/InputTipField.d.ts

@@ -1,58 +1,70 @@
-import { DataTypes } from "@etsoo/shared";
+import { IdType } from "@etsoo/shared";
 import { TypographyProps } from "@mui/material/Typography";
 import React from "react";
-import { InputField } from "./InputField";
+import { InputFieldProps } from "./InputField";
 import { EmailInput } from "./EmailInput";
 import { MobileInput } from "./MobileInput";
 import { PhoneInput } from "./PhoneInput";
-type ItemType = DataTypes.IdLabelItem<string | number>;
+type ItemType = {
+    id: IdType;
+};
 declare const componentMap: {
-    input: typeof InputField;
     email: typeof EmailInput;
     phone: typeof PhoneInput;
     mobile: typeof MobileInput;
 };
 type ComponentMap = typeof componentMap;
 type ComponentKey = keyof ComponentMap;
+type ComponentProps<T extends ItemType> = {
+    /**
+     * Load data
+     * @param value Duplicate test value
+     */
+    loadData(value: string): Promise<[T[]?, string?]>;
+    /**
+     * Label props
+     */
+    labelProps?: Omit<TypographyProps, "onClick">;
+    /**
+     * Custom item label
+     * @param item List item data
+     * @returns Result
+     */
+    itemLabel?: (item: T) => React.ReactNode;
+    /**
+     * Custom render item
+     * @param item List item data
+     * @returns Result
+     */
+    renderItem?: (item: T) => React.ReactNode;
+};
 /**
  * InputField with tips properties
  */
-export type InputTipFieldProps<T extends ItemType = ItemType, K extends ComponentKey = "input"> = Omit<React.ComponentProps<ComponentMap[K]>, "component"> & {
+export type InputTipFieldProps<T extends ItemType = ItemType> = {
     /**
-     * Component key
+     * Component properties
      */
-    component?: K;
+    componentProps: ComponentProps<T>;
+} & (({
     /**
      * Component properties
      */
-    componentProps: {
+    componentProps: ComponentProps<T>;
+} & {
+    [K in ComponentKey]: {
         /**
-         * Load data
-         * @param value Duplicate test value
+         * Component key
          */
-        loadData(value: string): Promise<[T[]?, string?]>;
-        /**
-         * Label props
-         */
-        labelProps?: Omit<TypographyProps, "onClick">;
-        /**
-         * Custom item label
-         * @param item List item data
-         * @returns Result
-         */
-        itemLabel?: (item: T) => React.ReactNode;
-        /**
-         * Custom render item
-         * @param item List item data
-         * @returns Result
-         */
-        renderItem?: (item: T) => React.ReactNode;
-    };
-};
+        component: K;
+    } & Omit<React.ComponentProps<ComponentMap[K]>, "component">;
+}[ComponentKey]) | ({
+    component?: "input";
+} & Omit<InputFieldProps, "component">));
 /**
  * InputField with tips
  * @param props Props
  * @returns Component
  */
-export declare function InputTipField<T extends ItemType = ItemType, K extends ComponentKey = "input">(props: InputTipFieldProps<T, K>): import("react/jsx-runtime").JSX.Element;
+export declare function InputTipField<T extends ItemType = ItemType>(props: InputTipFieldProps<T>): import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/mjs/InputTipField.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DataTypes } from "@etsoo/shared";
 import Typography from "@mui/material/Typography";
 import React from "react";
 import { InputField } from "./InputField";
@@ -11,7 +12,6 @@ import { EmailInput } from "./EmailInput";
 import { MobileInput } from "./MobileInput";
 import { PhoneInput } from "./PhoneInput";
 const componentMap = {
-    input: InputField,
     email: EmailInput,
     phone: PhoneInput,
     mobile: MobileInput
@@ -33,9 +33,9 @@ export function InputTipField(props) {
     const { labelProps = {
         title: app?.get("clickForDetails"),
         sx: { color: (theme) => theme.palette.error.main, cursor: "pointer" }
-    }, loadData, itemLabel = (item) => item.label, renderItem = (item) => _jsx(ListItem, { children: itemLabel(item) }, item.id) } = componentProps;
+    }, loadData, itemLabel = (item) => DataTypes.getObjectItemLabel(item), renderItem = (item) => _jsx(ListItem, { children: itemLabel(item) }, item.id) } = componentProps;
     const { input, ...slotRests } = slotProps;
-    const Component = componentMap[component];
+    const Component = component === "input" ? InputField : componentMap[component];
     const load = (value) => {
         if (value.length < 2) {
             setTitle(undefined);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.5.86",
+  "version": "1.5.88",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",
@@ -42,7 +42,7 @@
     "@emotion/styled": "^11.14.1",
     "@etsoo/appscript": "^1.6.48",
     "@etsoo/notificationbase": "^1.1.66",
-    "@etsoo/react": "^1.8.62",
+    "@etsoo/react": "^1.8.63",
     "@etsoo/shared": "^1.2.79",
     "@mui/icons-material": "^7.3.5",
     "@mui/material": "^7.3.5",

package/src/InputTipField.tsx

@@ -1,7 +1,7 @@
-import { DataTypes } from "@etsoo/shared";
+import { DataTypes, IdType } from "@etsoo/shared";
 import Typography, { TypographyProps } from "@mui/material/Typography";
 import React from "react";
-import { InputField } from "./InputField";
+import { InputField, InputFieldProps } from "./InputField";
 import { useAppContext } from "./app/ReactApp";
 import ListItem from "@mui/material/ListItem";
 import Popover from "@mui/material/Popover";
@@ -11,10 +11,11 @@ import { EmailInput } from "./EmailInput";
 import { MobileInput } from "./MobileInput";
 import { PhoneInput } from "./PhoneInput";
 
-type ItemType = DataTypes.IdLabelItem<string | number>;
+type ItemType = {
+  id: IdType;
+};
 
 const componentMap = {
-  input: InputField,
   email: EmailInput,
   phone: PhoneInput,
   mobile: MobileInput
@@ -23,58 +24,66 @@ const componentMap = {
 type ComponentMap = typeof componentMap;
 type ComponentKey = keyof ComponentMap;
 
-/**
- * InputField with tips properties
- */
-export type InputTipFieldProps<
-  T extends ItemType = ItemType,
-  K extends ComponentKey = "input"
-> = Omit<React.ComponentProps<ComponentMap[K]>, "component"> & {
+type ComponentProps<T extends ItemType> = {
   /**
-   * Component key
+   * Load data
+   * @param value Duplicate test value
    */
-  component?: K;
+  loadData(value: string): Promise<[T[]?, string?]>;
 
   /**
-   * Component properties
+   * Label props
    */
-  componentProps: {
-    /**
-     * Load data
-     * @param value Duplicate test value
-     */
-    loadData(value: string): Promise<[T[]?, string?]>;
-
-    /**
-     * Label props
-     */
-    labelProps?: Omit<TypographyProps, "onClick">;
-
-    /**
-     * Custom item label
-     * @param item List item data
-     * @returns Result
-     */
-    itemLabel?: (item: T) => React.ReactNode;
-
-    /**
-     * Custom render item
-     * @param item List item data
-     * @returns Result
-     */
-    renderItem?: (item: T) => React.ReactNode;
-  };
+  labelProps?: Omit<TypographyProps, "onClick">;
+
+  /**
+   * Custom item label
+   * @param item List item data
+   * @returns Result
+   */
+  itemLabel?: (item: T) => React.ReactNode;
+
+  /**
+   * Custom render item
+   * @param item List item data
+   * @returns Result
+   */
+  renderItem?: (item: T) => React.ReactNode;
 };
 
+/**
+ * InputField with tips properties
+ */
+export type InputTipFieldProps<T extends ItemType = ItemType> = {
+  /**
+   * Component properties
+   */
+  componentProps: ComponentProps<T>;
+} & (
+  | ({
+      /**
+       * Component properties
+       */
+      componentProps: ComponentProps<T>;
+    } & {
+      [K in ComponentKey]: {
+        /**
+         * Component key
+         */
+        component: K;
+      } & Omit<React.ComponentProps<ComponentMap[K]>, "component">;
+    }[ComponentKey])
+  | ({ component?: "input" } & Omit<InputFieldProps, "component">)
+);
+
 /**
  * InputField with tips
  * @param props Props
  * @returns Component
  */
-export function InputTipField<
-  T extends ItemType = ItemType,
-  K extends ComponentKey = "input"
->(props: InputTipFieldProps<T, K>) {
+export function InputTipField<T extends ItemType = ItemType>(
+  props: InputTipFieldProps<T>
+) {
   // Global app
   const app = useAppContext();
 
@@ -100,13 +109,14 @@ export function InputTipField<
       sx: { color: (theme) => theme.palette.error.main, cursor: "pointer" }
     },
     loadData,
-    itemLabel = (item) => item.label,
+    itemLabel = (item) => DataTypes.getObjectItemLabel(item),
     renderItem = (item) => <ListItem key={item.id}>{itemLabel(item)}</ListItem>
   } = componentProps;
 
   const { input, ...slotRests } = slotProps;
 
-  const Component = componentMap[component];
+  const Component =
+    component === "input" ? InputField : componentMap[component];
 
   const load = (value: string) => {
     if (value.length < 2) {
@@ -158,7 +168,7 @@ export function InputTipField<
           },
           ...slotRests
         }}
-        {...(rest as any)}
+        {...rest}
       />
     </React.Fragment>
   );