@etsoo/materialui 1.1.53 → 1.1.55

package/lib/InputTipField.d.ts

@@ -1,26 +1,38 @@
-/// <reference types="react" />
 import { DataTypes } from "@etsoo/shared";
 import { TypographyProps } from "@mui/material/Typography";
+import React from "react";
 import { InputFieldProps } from "./InputField";
 type ItemType = DataTypes.IdLabelItem<string | number>;
 /**
  * InputField with tips properties
  */
-export type InputTipFieldProps = InputFieldProps & {
+export type InputTipFieldProps<T extends ItemType = ItemType> = InputFieldProps & {
     /**
      * Load data
      * @param value Duplicate test value
      */
-    loadData(value: string): Promise<[ItemType[]?, string?]>;
+    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
  * @param props Props
  * @returns Component
  */
-export declare function InputTipField(props: InputTipFieldProps): JSX.Element;
+export declare function InputTipField<T extends ItemType = ItemType>(props: InputTipFieldProps<T>): JSX.Element;
 export {};

package/lib/InputTipField.js

@@ -22,7 +22,7 @@ export function InputTipField(props) {
             React.createElement(Typography, { onClick: (event) => {
                     setAnchorEl(event.currentTarget);
                 }, ...labelProps }, title))) : undefined
-    }, changeDelay = 480, onChangeDelay, loadData, ...rest } = props;
+    }, changeDelay = 480, onChangeDelay, loadData, itemLabel = (item) => item.label, renderItem = (item) => React.createElement(ListItem, { key: item.id }, itemLabel(item)), ...rest } = props;
     const load = (value) => {
         if (value.length < 2) {
             setTitle(undefined);
@@ -37,7 +37,7 @@ export function InputTipField(props) {
         React.createElement(Popover, { open: anchorEl != null, anchorEl: anchorEl, onClose: () => setAnchorEl(undefined), anchorOrigin: {
                 vertical: "bottom",
                 horizontal: "left"
-            } }, data && (React.createElement(List, null, data.map((item) => (React.createElement(ListItem, { key: item.id }, item.label)))))),
+            } }, data && React.createElement(List, null, data.map((item) => renderItem(item)))),
         React.createElement(InputField, { changeDelay: changeDelay, onChangeDelay: (event) => {
                 load(event.target.value);
                 if (onChangeDelay)

package/lib/ResponsibleContainer.d.ts

@@ -1,19 +1,23 @@
-import { DataTypes, IdDefaultType } from '@etsoo/shared';
-import { SxProps, Theme } from '@mui/material';
-import React from 'react';
-import { ListChildComponentProps } from 'react-window';
-import { GridColumn, GridJsonData, GridMethodRef } from '@etsoo/react';
-import { DataGridExProps } from './DataGridEx';
-import { ScrollerListExInnerItemRendererProps, ScrollerListExItemSize } from './ScrollerListEx';
+import { DataTypes, IdDefaultType } from "@etsoo/shared";
+import { SxProps, Theme } from "@mui/material";
+import React from "react";
+import { ListChildComponentProps } from "react-window";
+import { GridColumn, GridJsonData, GridMethodRef } from "@etsoo/react";
+import { DataGridExProps } from "./DataGridEx";
+import { ScrollerListExInnerItemRendererProps, ScrollerListExItemSize } from "./ScrollerListEx";
 /**
  * ResponsibleContainer props
  */
-export type ResponsibleContainerProps<T extends object, F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate, D extends DataTypes.Keys<T> = IdDefaultType<T>> = Omit<DataGridExProps<T, D>, 'height' | 'itemKey' | 'loadData' | 'mRef' | 'onScroll' | 'onItemsRendered'> & {
+export type ResponsibleContainerProps<T extends object, F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate, D extends DataTypes.Keys<T> = IdDefaultType<T>> = Omit<DataGridExProps<T, D>, "height" | "itemKey" | "loadData" | "mRef" | "onScroll" | "onItemsRendered"> & {
     /**
      * Height will be deducted
      * @param height Current calcuated height
      */
     adjustHeight?: (height: number) => number;
+    /**
+     * Top height
+     */
+    topHeight?: number;
     /**
      * Columns
      */

package/lib/ResponsibleContainer.js

@@ -1,16 +1,16 @@
-import { Box, Stack } from '@mui/material';
-import React from 'react';
-import { GridDataGet, ReactUtils, useCombinedRefs, useDimensions } from '@etsoo/react';
-import { DataGridEx, DataGridExCalColumns } from './DataGridEx';
-import { MUGlobal } from './MUGlobal';
-import { PullToRefreshUI } from './PullToRefreshUI';
-import { ScrollerListEx } from './ScrollerListEx';
-import { SearchBar } from './SearchBar';
-import { Labels } from './app/Labels';
+import { Box, Stack } from "@mui/material";
+import React from "react";
+import { GridDataGet, ReactUtils, useCombinedRefs, useDimensions } from "@etsoo/react";
+import { DataGridEx, DataGridExCalColumns } from "./DataGridEx";
+import { MUGlobal } from "./MUGlobal";
+import { PullToRefreshUI } from "./PullToRefreshUI";
+import { ScrollerListEx } from "./ScrollerListEx";
+import { SearchBar } from "./SearchBar";
+import { Labels } from "./app/Labels";
 function defaultContainerBoxSx(paddings, hasField, _dataGrid) {
     const half = MUGlobal.half(paddings);
     return {
-        '& .SearchBox': {
+        "& .SearchBox": {
             marginBottom: hasField ? half : 0
         }
     };
@@ -22,7 +22,7 @@ function defaultContainerBoxSx(paddings, hasField, _dataGrid) {
  */
 export function ResponsibleContainer(props) {
     // Destruct
-    const { adjustHeight, columns, containerBoxSx = defaultContainerBoxSx, dataGridMinWidth = Math.max(576, DataGridExCalColumns(columns).total), elementReady, fields, fieldTemplate, height, loadData, mRef, paddings = MUGlobal.pagePaddings, pullToRefresh = true, quickAction, sizeReadyMiliseconds = 0, ...rest } = props;
+    const { adjustHeight, columns, containerBoxSx = defaultContainerBoxSx, dataGridMinWidth = Math.max(576, DataGridExCalColumns(columns).total), elementReady, fields, fieldTemplate, height, topHeight, loadData, mRef, paddings = MUGlobal.pagePaddings, pullToRefresh = true, quickAction, sizeReadyMiliseconds = 0, ...rest } = props;
     // Labels
     const labels = Labels.CommonPage;
     // Refs
@@ -90,7 +90,7 @@ export function ResponsibleContainer(props) {
             // Auto calculation
             heightLocal =
                 document.documentElement.clientHeight -
-                    Math.round(rect.bottom + 1);
+                    (topHeight !== null && topHeight !== void 0 ? topHeight : Math.round(rect.bottom + 1));
             const style = window.getComputedStyle(dimensions[0][1]);
             const boxMargin = parseFloat(style.marginBottom);
             if (!isNaN(boxMargin))
@@ -122,9 +122,7 @@ export function ResponsibleContainer(props) {
         delete rest.selectable;
         return [
             React.createElement(Box, { className: "ListBox", sx: { height: heightLocal } },
-                React.createElement(ScrollerListEx, { autoLoad: !hasFields, height: heightLocal, loadData: localLoadData, mRef: mRefs, onClick: (event, data) => quickAction &&
-                        ReactUtils.isSafeClick(event) &&
-                        quickAction(data), oRef: (element) => {
+                React.createElement(ScrollerListEx, { autoLoad: !hasFields, height: heightLocal, loadData: localLoadData, mRef: mRefs, onClick: (event, data) => quickAction && ReactUtils.isSafeClick(event) && quickAction(data), oRef: (element) => {
                         if (element != null && elementReady)
                             elementReady(element, false);
                     }, ...rest })),
@@ -134,14 +132,14 @@ export function ResponsibleContainer(props) {
     const searchBar = React.useMemo(() => {
         if (!hasFields || showDataGrid == null)
             return;
-        return (React.createElement(SearchBar, { fields: fields, onSubmit: onSubmit, className: `searchBar${showDataGrid ? 'Grid' : 'List'}` }));
+        return (React.createElement(SearchBar, { fields: fields, onSubmit: onSubmit, className: `searchBar${showDataGrid ? "Grid" : "List"}` }));
     }, [showDataGrid, hasFields]);
     // Pull container
     const pullContainer = showDataGrid == null
         ? undefined
         : showDataGrid
-            ? '.DataGridEx-Body'
-            : '.ScrollerListEx-Body';
+            ? ".DataGridEx-Body"
+            : ".ScrollerListEx-Body";
     // Layout
     return (React.createElement(Box, { sx: containerBoxSx == null
             ? undefined

package/lib/SearchBar.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 /**
  * Search bar props
  */

package/lib/SearchBar.js

@@ -1,31 +1,31 @@
-import { Button, Drawer, IconButton, Stack, useTheme } from '@mui/material';
-import React from 'react';
-import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
-import { DomUtils } from '@etsoo/shared';
-import { ReactUtils, useDelayedExecutor, useDimensions } from '@etsoo/react';
-import { Labels } from './app/Labels';
+import { Button, Drawer, IconButton, Stack, useTheme } from "@mui/material";
+import React from "react";
+import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
+import { DomUtils } from "@etsoo/shared";
+import { ReactUtils, useDelayedExecutor, useDimensions } from "@etsoo/react";
+import { Labels } from "./app/Labels";
 // Cached width attribute name
-const cachedWidthName = 'data-cached-width';
+const cachedWidthName = "data-cached-width";
 // Reset form
 const resetForm = (form) => {
     for (const input of form.elements) {
         // Ignore disabled inputs
-        if ('disabled' in input && input.disabled)
+        if ("disabled" in input && input.disabled)
             continue;
         // All non hidden inputs
         if (input instanceof HTMLInputElement) {
             // Ignore hidden input
-            if (input.type === 'hidden')
+            if (input.type === "hidden")
                 continue;
             // Ignore readOnly without data-reset=true inputs
-            if (!input.readOnly || input.dataset.reset === 'true') {
-                ReactUtils.triggerChange(input, '', true);
+            if (!input.readOnly || input.dataset.reset === "true") {
+                ReactUtils.triggerChange(input, "", true);
             }
             continue;
         }
         // All selects
         if (input instanceof HTMLSelectElement) {
-            if (input.options.length > 0 && input.options[0].value === '') {
+            if (input.options.length > 0 && input.options[0].value === "") {
                 input.selectedIndex = 0;
             }
             else {
@@ -35,12 +35,12 @@ const resetForm = (form) => {
         }
     }
     // Trigger reset event
-    const resetEvent = new Event('reset');
+    const resetEvent = new Event("reset");
     form.dispatchEvent(resetEvent);
 };
 // Disable inputs avoid auto trigger change events for them
 const setChildState = (child, enabled) => {
-    const inputs = child.getElementsByTagName('input');
+    const inputs = child.getElementsByTagName("input");
     for (const input of inputs) {
         input.disabled = !enabled;
     }
@@ -74,13 +74,13 @@ export function SearchBar(props) {
         const len = target.children.length;
         for (let i = 0; i < len; i++) {
             var classList = target.children[i].classList;
-            classList.remove('showChild');
+            classList.remove("showChild");
         }
     }, 0);
     // Show or hide element
     const setElementVisible = (element, visible) => {
-        element.classList.remove(visible ? 'hiddenChild' : 'showChild');
-        element.classList.add(visible ? 'showChild' : 'hiddenChild');
+        element.classList.remove(visible ? "hiddenChild" : "showChild");
+        element.classList.add(visible ? "showChild" : "hiddenChild");
     };
     // Reset button ref
     const resetButtonRef = (instance) => {
@@ -90,9 +90,7 @@ export function SearchBar(props) {
             return;
         // First
         const [_, container, containerRect] = dimensions[0];
-        if (container == null ||
-            containerRect == null ||
-            containerRect.width < 10)
+        if (container == null || containerRect == null || containerRect.width < 10)
             return;
         // Container width
         let maxWidth = containerRect.width;
@@ -226,26 +224,28 @@ export function SearchBar(props) {
                     state.form = form;
             } },
             React.createElement(Stack, { ref: dimensions[0][0], justifyContent: "center", alignItems: "center", direction: "row", spacing: 1, height: innerHeight, sx: {
-                    '& > :not(style)': {
-                        flexBasis: 'auto',
+                    "& > :not(style)": {
+                        flexBasis: "auto",
                         flexGrow: 0,
                         flexShrink: 0,
-                        maxWidth: '180px',
-                        visibility: 'hidden'
+                        maxWidth: "180px"
                     },
-                    '& > .hiddenChild': {
-                        display: 'none'
+                    "& > :not:first-child": {
+                        visibility: "hidden"
                     },
-                    '& > .showChild': {
-                        display: 'block',
-                        visibility: 'visible'
+                    "& > .hiddenChild": {
+                        display: "none"
+                    },
+                    "& > .showChild": {
+                        display: "block",
+                        visibility: "visible"
                     }
                 } },
                 fields.map((item, index) => (React.createElement(React.Fragment, { key: index }, item))),
                 React.createElement(IconButton, { "aria-label": "delete", size: "medium", onClick: handleMore },
                     React.createElement(MoreHorizIcon, null)),
                 React.createElement(Button, { variant: "contained", size: "medium", ref: resetButtonRef, onClick: handleReset }, labels.reset))),
-        index != null && index < fields.length && (React.createElement(Drawer, { anchor: "right", sx: { minWidth: '250px' }, ModalProps: {
+        index != null && index < fields.length && (React.createElement(Drawer, { anchor: "right", sx: { minWidth: "250px" }, ModalProps: {
                 keepMounted: true // Better open performance on mobile.
             }, open: open, onClose: () => updateOpen(false) },
             React.createElement("form", { onChange: moreFormChange, ref: (form) => {
@@ -253,8 +253,8 @@ export function SearchBar(props) {
                         state.moreForm = form;
                 } },
                 React.createElement(Stack, { direction: "column", alignItems: "stretch", spacing: 2, padding: 2, sx: {
-                        '& > :not(style)': {
-                            minWidth: '100px'
+                        "& > :not(style)": {
+                            minWidth: "100px"
                         }
                     } }, moreItems))))));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.1.53",
+  "version": "1.1.55",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -50,13 +50,13 @@
     "@emotion/css": "^11.10.6",
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
-    "@etsoo/appscript": "^1.3.80",
+    "@etsoo/appscript": "^1.3.81",
     "@etsoo/notificationbase": "^1.1.24",
-    "@etsoo/react": "^1.6.51",
+    "@etsoo/react": "^1.6.52",
     "@etsoo/shared": "^1.1.92",
     "@mui/icons-material": "^5.11.11",
     "@mui/material": "^5.11.14",
-    "@mui/x-data-grid": "^6.0.2",
+    "@mui/x-data-grid": "^6.0.3",
     "@types/pica": "^9.0.1",
     "@types/pulltorefreshjs": "^0.1.5",
     "@types/react": "^18.0.28",

package/src/InputTipField.tsx

@@ -10,29 +10,46 @@ type ItemType = DataTypes.IdLabelItem<string | number>;
 /**
  * InputField with tips properties
  */
-export type InputTipFieldProps = InputFieldProps & {
-  /**
-   * Load data
-   * @param value Duplicate test value
-   */
-  loadData(value: string): Promise<[ItemType[]?, string?]>;
+export type InputTipFieldProps<T extends ItemType = ItemType> =
+  InputFieldProps & {
+    /**
+     * Load data
+     * @param value Duplicate test value
+     */
+    loadData(value: string): Promise<[T[]?, string?]>;
 
-  /**
-   * Label props
-   */
-  labelProps?: Omit<TypographyProps, "onClick">;
-};
+    /**
+     * 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
  * @param props Props
  * @returns Component
  */
-export function InputTipField(props: InputTipFieldProps) {
+export function InputTipField<T extends ItemType = ItemType>(
+  props: InputTipFieldProps<T>
+) {
   // State
   const [title, setTitle] = React.useState<string>();
   const [anchorEl, setAnchorEl] = React.useState<HTMLElement>();
-  const [data, setData] = React.useState<ItemType[]>();
+  const [data, setData] = React.useState<T[]>();
 
   // Destruct
   const {
@@ -57,6 +74,8 @@ export function InputTipField(props: InputTipFieldProps) {
     changeDelay = 480,
     onChangeDelay,
     loadData,
+    itemLabel = (item) => item.label,
+    renderItem = (item) => <ListItem key={item.id}>{itemLabel(item)}</ListItem>,
     ...rest
   } = props;
 
@@ -83,13 +102,7 @@ export function InputTipField(props: InputTipFieldProps) {
           horizontal: "left"
         }}
       >
-        {data && (
-          <List>
-            {data.map((item) => (
-              <ListItem key={item.id}>{item.label}</ListItem>
-            ))}
-          </List>
-        )}
+        {data && <List>{data.map((item) => renderItem(item))}</List>}
       </Popover>
       <InputField
         changeDelay={changeDelay}