@etsoo/materialui 1.3.42 → 1.3.44

package/__tests__/NotifierMUTests.tsx

@@ -1,11 +1,11 @@
 import {
-    INotification,
-    NotificationMessageType
-} from '@etsoo/notificationbase';
-import React from 'react';
-import { createRoot } from 'react-dom/client';
-import { act } from 'react-dom/test-utils';
-import { NotifierMU } from '../src';
+  INotification,
+  NotificationMessageType
+} from "@etsoo/notificationbase";
+import React from "react";
+import { createRoot } from "react-dom/client";
+import { act } from "react-dom/test-utils";
+import { NotifierMU } from "../src";
 
 // Without it will popup error:
 // The current testing environment is not configured to support act
@@ -13,7 +13,7 @@ import { NotifierMU } from '../src';
 
 // Root
 const root = document.body;
-const container: HTMLElement = document.createElement('div');
+const container: HTMLElement = document.createElement("div");
 root.append(container);
 
 // The state provider
@@ -21,8 +21,8 @@ const Provider = NotifierMU.setup();
 const reactRoot = createRoot(container);
 
 act(() => {
-    // Concorrent renderer needs act block
-    reactRoot.render(<Provider />);
+  // Concorrent renderer needs act block
+  reactRoot.render(<Provider />);
 });
 
 // Notifier
@@ -32,186 +32,186 @@ const notifier = NotifierMU.instance;
 // https://jestjs.io/docs/en/timer-mocks
 jest.useFakeTimers();
 
-test('Alert tests', async () => {
-    // Click
-    const handleClick = jest.fn();
+test("Alert tests", async () => {
+  // Click
+  const handleClick = jest.fn();
 
-    act(() => {
-        // Add the notification
-        notifier.alert('Alert message', handleClick);
-    });
+  act(() => {
+    // Add the notification
+    notifier.alert("Alert message", handleClick);
+  });
 
-    // Button
-    const button = root.getElementsByTagName('button');
+  // Button
+  const button = root.getElementsByTagName("button");
 
-    expect(button.length).toBe(1);
-    expect(button[0].innerHTML).toContain('OK');
+  expect(button.length).toBe(1);
+  expect(button[0].innerHTML).toContain("OK");
 
-    await act(async () => {
-        button[0].click();
-    });
+  await act(async () => {
+    button[0].click();
+  });
 
-    expect(handleClick).toBeCalled();
+  expect(handleClick).toHaveBeenCalled();
 
-    // Fast forward
-    jest.runOnlyPendingTimers();
+  // Fast forward
+  jest.runOnlyPendingTimers();
 });
 
-test('Confirm tests', async () => {
-    // Click
-    const handleClick = jest.fn();
+test("Confirm tests", async () => {
+  // Click
+  const handleClick = jest.fn();
 
-    act(() => {
-        // Add the notification
-        notifier.confirm('Confirm message', undefined, handleClick);
-    });
+  act(() => {
+    // Add the notification
+    notifier.confirm("Confirm message", undefined, handleClick);
+  });
 
-    // Button
-    const button = root.getElementsByTagName('button');
+  // Button
+  const button = root.getElementsByTagName("button");
 
-    expect(button.length).toBe(2);
-    expect(button[0].innerHTML).toContain('Cancel');
+  expect(button.length).toBe(2);
+  expect(button[0].innerHTML).toContain("Cancel");
 
-    await act(async () => {
-        button[0].click();
-    });
+  await act(async () => {
+    button[0].click();
+  });
 
-    expect(handleClick).toBeCalled();
+  expect(handleClick).toHaveBeenCalled();
 
-    // Fast forward
-    jest.runOnlyPendingTimers();
+  // Fast forward
+  jest.runOnlyPendingTimers();
 });
 
-test('Confirm tests without cancel button', async () => {
-    // Click
-    const handleClick = jest.fn();
+test("Confirm tests without cancel button", async () => {
+  // Click
+  const handleClick = jest.fn();
 
-    act(() => {
-        // Add the notification
-        notifier.confirm('Confirm message', undefined, handleClick, {
-            cancelButton: false
-        });
+  act(() => {
+    // Add the notification
+    notifier.confirm("Confirm message", undefined, handleClick, {
+      cancelButton: false
     });
+  });
 
-    // Button
-    const button = root.getElementsByTagName('button');
+  // Button
+  const button = root.getElementsByTagName("button");
 
-    expect(button.length).toBe(1);
-    expect(button[0].innerHTML).toContain('OK');
+  expect(button.length).toBe(1);
+  expect(button[0].innerHTML).toContain("OK");
 
-    await act(async () => {
-        button[0].click();
-    });
+  await act(async () => {
+    button[0].click();
+  });
 
-    expect(handleClick).toBeCalled();
+  expect(handleClick).toHaveBeenCalled();
 
-    // Fast forward
-    jest.runOnlyPendingTimers();
+  // Fast forward
+  jest.runOnlyPendingTimers();
 });
 
-test('Prompt tests', async () => {
-    // Click
-    const handleClick = jest.fn((result: boolean) => {
-        expect(result).toBeTruthy();
-    });
+test("Prompt tests", async () => {
+  // Click
+  const handleClick = jest.fn((result: boolean) => {
+    expect(result).toBeTruthy();
+  });
 
-    act(() => {
-        // Add the notification
-        notifier.prompt<boolean>('Prompt message', handleClick, undefined, {
-            type: 'switch',
-            inputProps: { required: false }
-        });
+  act(() => {
+    // Add the notification
+    notifier.prompt<boolean>("Prompt message", handleClick, undefined, {
+      type: "switch",
+      inputProps: { required: false }
     });
+  });
 
-    // Button
-    const button = root.getElementsByTagName('button');
+  // Button
+  const button = root.getElementsByTagName("button");
 
-    expect(button.length).toBe(2); // Switch will generate a button
-    expect(button[1].innerHTML).toContain('OK');
+  expect(button.length).toBe(2); // Switch will generate a button
+  expect(button[1].innerHTML).toContain("OK");
 
-    await act(async () => {
-        button[1].click();
-    });
+  await act(async () => {
+    button[1].click();
+  });
 
-    expect(handleClick).toBeCalled();
+  expect(handleClick).toHaveBeenCalled();
 
-    jest.runOnlyPendingTimers();
+  jest.runOnlyPendingTimers();
 });
 
-test('Prompt tests with form submit', async () => {
-    // Click
-    const handleClick = jest.fn((result: boolean) => {
-        expect(result).toBeTruthy();
-    });
+test("Prompt tests with form submit", async () => {
+  // Click
+  const handleClick = jest.fn((result: boolean) => {
+    expect(result).toBeTruthy();
+  });
 
-    act(() => {
-        // Add the notification
-        notifier.prompt<boolean>('Prompt message', handleClick, undefined, {
-            type: 'switch',
-            inputProps: { required: false }
-        });
+  act(() => {
+    // Add the notification
+    notifier.prompt<boolean>("Prompt message", handleClick, undefined, {
+      type: "switch",
+      inputProps: { required: false }
     });
+  });
 
-    await act(async () => {
-        (
-            root
-                .getElementsByTagName('form')[0]
-                .elements.namedItem('okButton') as HTMLButtonElement
-        )?.click();
-    });
+  await act(async () => {
+    (
+      root
+        .getElementsByTagName("form")[0]
+        .elements.namedItem("okButton") as HTMLButtonElement
+    )?.click();
+  });
 
-    expect(handleClick).toBeCalled();
+  expect(handleClick).toHaveBeenCalled();
 
-    jest.runOnlyPendingTimers();
+  jest.runOnlyPendingTimers();
 });
 
-test('Message tests', (done) => {
-    // Callback
-    const callback = jest.fn(() => done());
-
-    let n: INotification<React.ReactNode, any> | undefined;
-    act(() => {
-        // Add the notification
-        n = notifier.message(
-            NotificationMessageType.Danger,
-            'Error Message',
-            undefined,
-            {
-                callback
-            }
-        );
-    });
+test("Message tests", (done) => {
+  // Callback
+  const callback = jest.fn(() => done());
 
-    expect(n?.timespan).toBe(5);
+  let n: INotification<React.ReactNode, any> | undefined;
+  act(() => {
+    // Add the notification
+    n = notifier.message(
+      NotificationMessageType.Danger,
+      "Error Message",
+      undefined,
+      {
+        callback
+      }
+    );
+  });
 
-    expect(root.innerHTML).toContain('Error Message');
+  expect(n?.timespan).toBe(5);
 
-    act(() => {
-        // Here is the bug need further study...
-        n?.dismiss();
+  expect(root.innerHTML).toContain("Error Message");
 
-        // Fast forward
-        jest.runOnlyPendingTimers();
-    });
+  act(() => {
+    // Here is the bug need further study...
+    n?.dismiss();
 
-    expect(root.innerHTML).not.toContain('Error Message');
-    expect(callback).toBeCalled();
+    // Fast forward
+    jest.runOnlyPendingTimers();
+  });
+
+  expect(root.innerHTML).not.toContain("Error Message");
+  expect(callback).toHaveBeenCalled();
 });
 
-test('Loading tests', () => {
-    act(() => {
-        // Add the notification
-        notifier.showLoading('Loading');
-    });
+test("Loading tests", () => {
+  act(() => {
+    // Add the notification
+    notifier.showLoading("Loading");
+  });
 
-    expect(root.innerHTML).toContain('Loading');
+  expect(root.innerHTML).toContain("Loading");
 
-    act(() => {
-        notifier.hideLoading();
+  act(() => {
+    notifier.hideLoading();
 
-        // Fast forward
-        jest.runOnlyPendingTimers();
-    });
+    // Fast forward
+    jest.runOnlyPendingTimers();
+  });
 
-    expect(root.innerHTML).not.toContain('Loading');
+  expect(root.innerHTML).not.toContain("Loading");
 });

package/__tests__/ResponsePage.tsx

@@ -0,0 +1,48 @@
+import { act, render } from "@testing-library/react";
+import { MUGlobal, MobileListItemRenderer, ResponsivePage } from "../src";
+import React from "react";
+
+global.ResizeObserver = jest.fn().mockImplementation(() => ({
+  observe: jest.fn(),
+  unobserve: jest.fn(),
+  disconnect: jest.fn()
+}));
+
+type Data = { id: number; name: string };
+
+// Timer mock
+// https://jestjs.io/docs/en/timer-mocks
+jest.useFakeTimers();
+
+it("Render ResponsePage", async () => {
+  // Act
+  render(
+    <ResponsivePage<Data>
+      fields={[]}
+      columns={[
+        { field: "id", header: "ID" },
+        { field: "name", header: "Name" }
+      ]}
+      itemSize={[118, MUGlobal.pagePaddings]}
+      loadData={(_data) =>
+        Promise.resolve([
+          { id: 1, name: "Name 1" },
+          { id: 2, name: "Name 2" }
+        ])
+      }
+      innerItemRenderer={(props) =>
+        MobileListItemRenderer(props, (data) => {
+          return [data.name, undefined, [], <React.Fragment></React.Fragment>];
+        })
+      }
+    />
+  );
+
+  act(() => {
+    // Fast forward
+    jest.runOnlyPendingTimers();
+  });
+
+  // Assert
+  expect(document.getElementById("page-container")).not.toBeNull();
+});

package/__tests__/SelectEx.tsx

@@ -31,7 +31,7 @@ it("Render SelectEx", async () => {
     />
   );
 
-  expect(itemChangeCallback).toBeCalled();
+  expect(itemChangeCallback).toHaveBeenCalled();
 
   // Act, click to show the list
   const button = screen.getByRole("combobox");
@@ -110,5 +110,5 @@ it("Render multiple SelectEx", async () => {
 
   expect(checkbox3?.checked).toBeTruthy();
 
-  expect(itemChangeCallback).toBeCalledTimes(2);
+  expect(itemChangeCallback).toHaveBeenCalledTimes(2);
 });

package/__tests__/SwitchAnt.tsx

@@ -1,23 +1,23 @@
-import { getByText, render } from '@testing-library/react';
-import React from 'react';
-import { act } from 'react-dom/test-utils';
-import { SwitchAnt } from '../src/SwitchAnt';
+import { getByText, render } from "@testing-library/react";
+import React from "react";
+import { act } from "react-dom/test-utils";
+import { SwitchAnt } from "../src/SwitchAnt";
 
-it('SwitchAnt Tests', () => {
-    const onChange = jest.fn((event: React.ChangeEvent<HTMLInputElement>) =>
-        expect(event.target.checked).toBeTruthy()
-    );
+it("SwitchAnt Tests", () => {
+  const onChange = jest.fn((event: React.ChangeEvent<HTMLInputElement>) =>
+    expect(event.target.checked).toBeTruthy()
+  );
 
-    // Render component
-    const { baseElement } = render(
-        <SwitchAnt startLabel="No" endLabel="Yes" onChange={onChange} />
-    );
+  // Render component
+  const { baseElement } = render(
+    <SwitchAnt startLabel="No" endLabel="Yes" onChange={onChange} />
+  );
 
-    const yes = getByText(baseElement, 'Yes');
+  const yes = getByText(baseElement, "Yes");
 
-    act(() => {
-        yes.click();
-    });
+  act(() => {
+    yes.click();
+  });
 
-    expect(onChange).toBeCalled();
+  expect(onChange).toHaveBeenCalled();
 });

package/__tests__/tsconfig.json

@@ -1,19 +1,19 @@
 {
-    "compilerOptions": {
-        "target": "ES2019",
-        "module": "ESNext",
-        "allowJs": true,
-        "skipLibCheck": true,
-        "esModuleInterop": true,
-        "allowSyntheticDefaultImports": true,
-        "strict": true,
-        "forceConsistentCasingInFileNames": true,
-        "moduleResolution": "node",
-        "resolveJsonModule": true,
-        "isolatedModules": true,
-        "noEmit": true,
-        "jsx": "react",
-        "declaration": true
-    },
-    "include": [".."]
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleResolution": "Node10",
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react",
+    "declaration": true
+  },
+  "include": [".."]
 }

package/lib/AddresSelector.js

@@ -18,9 +18,8 @@ export var AddressField;
  * @param props Props
  */
 export function AddressSelector(props) {
-    var _a;
     // Labels
-    const { city: cityDefault = "City", district: districtDefault = "District", region: regionDefault = "Region", state: stateDefault = "State" } = (_a = globalApp === null || globalApp === void 0 ? void 0 : globalApp.getLabels("region", "state", "city", "district")) !== null && _a !== void 0 ? _a : {};
+    const { city: cityDefault = "City", district: districtDefault = "District", region: regionDefault = "Region", state: stateDefault = "State" } = globalApp?.getLabels("region", "state", "city", "district") ?? {};
     // Destruct
     const { api, city, cityLabel = cityDefault, district, districtLabel = districtDefault, error, favoredIds, helperText, hideRegion, label, onChange, region, regionLabel = regionDefault, required, search, state, stateLabel = stateDefault, breakPoints = { xs: 12, md: 6, lg: hideRegion ? 4 : 3 } } = props;
     const isMounted = React.useRef(true);

package/lib/AuditDisplay.js

@@ -6,8 +6,7 @@ import { ListMoreDisplay } from "./ListMoreDisplay";
 import { ShowDataComparison } from "./ShowDataComparison";
 // Get label
 const getLabel = (key) => {
-    var _a;
-    return (_a = globalApp === null || globalApp === void 0 ? void 0 : globalApp.get(Utils.formatInitial(key))) !== null && _a !== void 0 ? _a : key;
+    return globalApp?.get(Utils.formatInitial(key)) ?? key;
 };
 // Format date
 const formatDate = (date) => {
@@ -30,7 +29,7 @@ export function AuditDisplay(props) {
         padding: [theme.spacing(1.5), theme.spacing(1)].join(" "),
         background: index % 2 === 0 ? theme.palette.grey[100] : theme.palette.grey[50]
     }), getColumnLabel, equalCheck, itemRenderer = (data) => {
-        const { newData, oldData, changes = { newData: newData !== null && newData !== void 0 ? newData : {}, oldData: oldData !== null && oldData !== void 0 ? oldData : {} } } = data;
+        const { newData, oldData, changes = { newData: newData ?? {}, oldData: oldData ?? {} } } = data;
         return (React.createElement(React.Fragment, null,
             changes != null && (React.createElement(Button, { variant: "outlined", size: "small", onClick: () => ShowDataComparison(changes, title, getColumnLabel, equalCheck), sx: {
                     marginLeft: theme.spacing(1),

package/lib/BridgeCloseButton.js

@@ -9,9 +9,8 @@ import { globalApp } from "./app/ReactApp";
  * @returns Component
  */
 export function BridgeCloseButton(props) {
-    var _a;
     // Destruct
-    const { boxProps, onClick, title = (_a = globalApp === null || globalApp === void 0 ? void 0 : globalApp.get("close")) !== null && _a !== void 0 ? _a : "Close", validate, ...rest } = props;
+    const { boxProps, onClick, title = globalApp?.get("close") ?? "Close", validate, ...rest } = props;
     // Host
     const host = BridgeUtils.host;
     if (host == null ||

package/lib/ComboBox.js

@@ -14,13 +14,13 @@ import { globalApp } from "./app/ReactApp";
  */
 export function ComboBox(props) {
     // Labels
-    const labels = globalApp === null || globalApp === void 0 ? void 0 : globalApp.getLabels("noOptions", "loading", "open", "add");
+    const labels = globalApp?.getLabels("noOptions", "loading", "open", "add");
     // Destruct
-    const { search = false, autoAddBlankItem = search, idField = "id", idValue, inputError, inputHelperText, inputMargin, inputOnChange, inputRequired, inputReset, inputVariant, defaultValue, label, labelField = "label", loadData, onLoadData, name, inputAutoComplete = "off", options, dataReadonly = true, readOnly, onChange, onValueChange, openOnFocus = true, value, disableCloseOnSelect = false, getOptionLabel = (option) => `${option[labelField]}`, sx = { minWidth: "150px", flexGrow: 2 }, noOptionsText = labels === null || labels === void 0 ? void 0 : labels.noOptions, loadingText = labels === null || labels === void 0 ? void 0 : labels.loading, openText = labels === null || labels === void 0 ? void 0 : labels.open, addLabel = labels === null || labels === void 0 ? void 0 : labels.add, onAdd, ...rest } = props;
+    const { search = false, autoAddBlankItem = search, idField = "id", idValue, inputError, inputHelperText, inputMargin, inputOnChange, inputRequired, inputReset, inputVariant, defaultValue, label, labelField = "label", loadData, onLoadData, name, inputAutoComplete = "off", options, dataReadonly = true, readOnly, onChange, onValueChange, openOnFocus = true, value, disableCloseOnSelect = false, getOptionLabel = (option) => `${option[labelField]}`, sx = { minWidth: "150px", flexGrow: 2 }, noOptionsText = labels?.noOptions, loadingText = labels?.loading, openText = labels?.open, addLabel = labels?.add, onAdd, ...rest } = props;
     // Value input ref
     const inputRef = React.createRef();
     // Options state
-    const [localOptions, setOptions] = React.useState(options !== null && options !== void 0 ? options : []);
+    const [localOptions, setOptions] = React.useState(options ?? []);
     const isMounted = React.useRef(true);
     // When options change
     // [options] will cause infinite loop
@@ -37,7 +37,7 @@ export function ComboBox(props) {
     // Local default value
     const localValue = idValue != null
         ? localOptions.find((o) => o[idField] === idValue)
-        : defaultValue !== null && defaultValue !== void 0 ? defaultValue : value;
+        : defaultValue ?? value;
     // State
     // null for controlled
     const [stateValue, setStateValue] = React.useState(null);
@@ -113,7 +113,7 @@ export function ComboBox(props) {
     }, []);
     // Layout
     return (React.createElement("div", null,
-        React.createElement("input", { ref: inputRef, "data-reset": inputReset !== null && inputReset !== void 0 ? inputReset : true, type: "text", style: { display: "none" }, name: name, value: getValue(stateValue), readOnly: true, onChange: inputOnChange }),
+        React.createElement("input", { ref: inputRef, "data-reset": inputReset ?? true, type: "text", style: { display: "none" }, name: name, value: getValue(stateValue), readOnly: true, onChange: inputOnChange }),
         React.createElement(Stack, { gap: 0.5, direction: "row", width: "100%" },
             React.createElement(Autocomplete, { value: stateValue, disableCloseOnSelect: disableCloseOnSelect, getOptionLabel: getOptionLabel, isOptionEqualToValue: (option, value) => option[idField] === value[idField], onChange: (event, value, reason, details) => {
                     // Set value

package/lib/ComboBoxMultiple.js

@@ -16,30 +16,29 @@ const checkedIcon = React.createElement(CheckBoxIcon, { fontSize: "small" });
  * @returns Component
  */
 export function ComboBoxMultiple(props) {
-    var _a;
     // Labels
-    const labels = globalApp === null || globalApp === void 0 ? void 0 : globalApp.getLabels("noOptions", "loading");
+    const labels = globalApp?.getLabels("noOptions", "loading");
     // Destruct
     const { search = false, autoAddBlankItem = search, idField = "id", idValue, idValues, inputError, inputHelperText, inputMargin, inputOnChange, inputRequired, inputReset, inputVariant, defaultValue, label, labelField = "label", loadData, onLoadData, name, inputAutoComplete = "off", options, dataReadonly = true, readOnly, onChange, openOnFocus = true, value, disableCloseOnSelect = true, renderOption = (props, option, { selected }) => (React.createElement("li", { ...props },
         React.createElement(React.Fragment, null,
             React.createElement(Checkbox, { icon: icon, checkedIcon: checkedIcon, style: { marginRight: 8 }, checked: selected }),
-            option[labelField]))), getOptionLabel = (option) => `${option[labelField]}`, sx = { minWidth: "150px" }, noOptionsText = labels === null || labels === void 0 ? void 0 : labels.noOptions, loadingText = labels === null || labels === void 0 ? void 0 : labels.loading, ...rest } = props;
+            option[labelField]))), getOptionLabel = (option) => `${option[labelField]}`, sx = { minWidth: "150px" }, noOptionsText = labels?.noOptions, loadingText = labels?.loading, ...rest } = props;
     // Value input ref
     const inputRef = React.createRef();
     // Options state
-    const [localOptions, setOptions] = React.useState(options !== null && options !== void 0 ? options : []);
+    const [localOptions, setOptions] = React.useState(options ?? []);
     const isMounted = React.useRef(true);
     // Local default value
     const localValue = idValue != null
         ? localOptions.filter((o) => o[idField] === idValue)
         : idValues != null
-            ? localOptions.filter((o) => idValues === null || idValues === void 0 ? void 0 : idValues.includes(o[idField]))
-            : (_a = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.concat()) !== null && _a !== void 0 ? _a : value === null || value === void 0 ? void 0 : value.concat();
+            ? localOptions.filter((o) => idValues?.includes(o[idField]))
+            : defaultValue?.concat() ?? value?.concat();
     // State
     // null for controlled
     const [stateValue, setStateValue] = React.useState(null);
     React.useEffect(() => {
-        setStateValue(localValue !== null && localValue !== void 0 ? localValue : []);
+        setStateValue(localValue ?? []);
     }, [localValue]);
     // When options change
     // [options] will cause infinite loop
@@ -116,7 +115,7 @@ export function ComboBoxMultiple(props) {
     }, []);
     // Layout
     return (React.createElement("div", null,
-        React.createElement("input", { ref: inputRef, "data-reset": inputReset !== null && inputReset !== void 0 ? inputReset : true, type: "text", style: { display: "none" }, name: name, value: getValue(stateValue), readOnly: true, onChange: inputOnChange }),
+        React.createElement("input", { ref: inputRef, "data-reset": inputReset ?? true, type: "text", style: { display: "none" }, name: name, value: getValue(stateValue), readOnly: true, onChange: inputOnChange }),
         React.createElement(Autocomplete, { value: stateValue == null
                 ? []
                 : Array.isArray(stateValue)

package/lib/ComboBoxPro.js

@@ -4,9 +4,8 @@ import { globalApp } from "./app/ReactApp";
 import { InputField } from "./InputField";
 import { DataTypes } from "@etsoo/shared";
 export function ComboBoxPro(props) {
-    var _a;
     // Labels
-    const { noOptions, loading: loadingLabel, open: openDefault } = (_a = globalApp === null || globalApp === void 0 ? void 0 : globalApp.getLabels("noOptions", "loading", "open")) !== null && _a !== void 0 ? _a : {};
+    const { noOptions, loading: loadingLabel, open: openDefault } = globalApp?.getLabels("noOptions", "loading", "open") ?? {};
     // Destruct
     const { noOptionsText = noOptions, loadingText = loadingLabel, openText = openDefault, options, openOnFocus = true, label, inputProps, name, value, idValue, onChange, onValueChange, ...rest } = props;
     const [open, setOpen] = React.useState(false);