@etsoo/materialui 1.2.53 → 1.2.56

package/lib/HiSelector.js

@@ -44,7 +44,7 @@ export function HiSelector(props) {
             React.createElement(FormLabel, { required: required, sx: { fontSize: (theme) => theme.typography.caption } }, label))),
         React.createElement("input", { type: "hidden", name: name, value: `${currentValue !== null && currentValue !== void 0 ? currentValue : ""}` }),
         React.createElement(Grid, { item: true, ...breakPoints },
-            React.createElement(SelectEx, { idField: idField, labelField: labelField, name: "tab1", search: search, fullWidth: true, loadData: () => loadData(), value: values[0], onChange: (event) => doChange(event, 0), onItemChange: doItemChange, inputRequired: required, error: error, helperText: helperText })),
+            React.createElement(SelectEx, { idField: idField, labelField: labelField, name: "tab1", search: search, fullWidth: true, loadData: () => loadData(), value: values[0], onChange: (event) => doChange(event, 0), onItemChange: doItemChange, required: required, error: error, helperText: helperText })),
         localValues[0] != null && (React.createElement(Grid, { item: true, ...breakPoints },
             React.createElement(SelectEx, { key: `${localValues[0]}`, idField: idField, labelField: labelField, name: "tab2", search: search, fullWidth: true, loadData: () => loadData(localValues[0]), value: values[1], onChange: (event) => doChange(event, 1), onItemChange: doItemChange }))),
         localValues[1] != null && (React.createElement(Grid, { item: true, ...breakPoints },

package/lib/ListChooser.d.ts

@@ -1,6 +1,6 @@
-import { DataTypes, DelayedExecutorType, IdDefaultType } from '@etsoo/shared';
-import { ListItemButtonProps, ListProps } from '@mui/material';
-import React from 'react';
+import { DataTypes, DelayedExecutorType, IdDefaultType } from "@etsoo/shared";
+import { ListItemButtonProps, ListProps } from "@mui/material";
+import React from "react";
 type QueryData = {
     title?: string;
 };
@@ -46,6 +46,10 @@ export type ListChooserProps<T extends object, D extends DataTypes.Keys<T>, Q ex
      * Title
      */
     title: string;
+    /**
+     * Double click enabled
+     */
+    doubleClickEnabled?: boolean;
 };
 /**
  * List chooser

package/lib/ListChooser.js

@@ -1,7 +1,8 @@
-import { useDelayedExecutor } from '@etsoo/react';
-import { List, ListItem, ListItemButton, ListItemText, TextField } from '@mui/material';
-import React from 'react';
-import { VBox } from './FlexBox';
+import { useDelayedExecutor } from "@etsoo/react";
+import { List, ListItem, ListItemButton, ListItemText, TextField } from "@mui/material";
+import CheckBoxIcon from "@mui/icons-material/CheckBox";
+import React from "react";
+import { VBox } from "./FlexBox";
 /**
  * List chooser
  * @param props Props
@@ -29,19 +30,20 @@ export function ListChooser(props) {
     });
     // Destruct
     const { conditionRenderer = (rq, delayed) => (React.createElement(TextField, { autoFocus: true, margin: "dense", name: "title", label: title, fullWidth: true, variant: "standard", inputProps: { maxLength: 128 }, onChange: (event) => {
-            Reflect.set(rq, 'title', event.target.value);
+            Reflect.set(rq, "title", event.target.value);
             delayed.call();
         } })), itemRenderer = (item, selectProps) => {
         const id = item[idField];
-        const label = typeof labelField === 'function'
+        const sp = selectProps(id);
+        const label = typeof labelField === "function"
             ? labelField(item)
             : Reflect.get(item, labelField);
-        return (React.createElement(ListItem, { disableGutters: true, key: `${id}` },
-            React.createElement(ListItemButton, { ...selectProps(id) },
+        return (React.createElement(ListItem, { disableGutters: true, key: `${id}`, secondaryAction: sp.selected ? React.createElement(CheckBoxIcon, { fontSize: "small" }) : undefined },
+            React.createElement(ListItemButton, { ...sp },
                 React.createElement(ListItemText, { primary: label }))));
-    }, idField = 'id', labelField = 'label', loadData, multiple = false, onItemChange, title, ...rest } = props;
+    }, idField = "id", labelField = "label", loadData, multiple = false, onItemChange, title, doubleClickEnabled = false, onDoubleClick, ...rest } = props;
     // Default minimum height
-    (_a = rest.sx) !== null && _a !== void 0 ? _a : (rest.sx = { minHeight: '220px' });
+    (_a = rest.sx) !== null && _a !== void 0 ? _a : (rest.sx = { minHeight: "220px" });
     // State
     const [items, setItems] = React.useState([]);
     // Query request data
@@ -72,8 +74,20 @@ export function ListChooser(props) {
             delayed.clear();
         };
     }, [delayed]);
+    const onDoubleClickLocal = (event) => {
+        var _a;
+        if (onDoubleClick)
+            onDoubleClick(event);
+        if (doubleClickEnabled) {
+            const button = (_a = event.currentTarget
+                .closest("form")) === null || _a === void 0 ? void 0 : _a.elements.namedItem("okButton");
+            if (button) {
+                button.click();
+            }
+        }
+    };
     // Layout
     return (React.createElement(VBox, null,
         conditionRenderer(rq.current, delayed),
-        React.createElement(List, { disablePadding: true, dense: true, ...rest }, items.map((item) => itemRenderer(item, selectProps)))));
+        React.createElement(List, { onDoubleClick: onDoubleClickLocal, disablePadding: true, dense: true, ...rest }, items.map((item) => itemRenderer(item, selectProps)))));
 }

package/lib/SelectEx.d.ts

@@ -13,10 +13,6 @@ export type SelectExProps<T extends object, D extends DataTypes.Keys<T> = IdDefa
      * The helper text content.
      */
     helperText?: React.ReactNode;
-    /**
-     * Input required
-     */
-    inputRequired?: boolean;
     /**
      * Id field
      */

package/lib/SelectEx.js

@@ -12,7 +12,7 @@ import { ReactUtils } from "@etsoo/react";
  */
 export function SelectEx(props) {
     // Destruct
-    const { defaultValue, idField = "id", error, helperText, inputRequired, itemIconRenderer, itemStyle, label, labelField = "label", loadData, onItemChange, onItemClick, onLoadData, multiple = false, name, options, refresh, search = false, autoAddBlankItem = search, value, onChange, fullWidth, ...rest } = props;
+    const { defaultValue, idField = "id", error, helperText, itemIconRenderer, itemStyle, label, labelField = "label", loadData, onItemChange, onItemClick, onLoadData, multiple = false, name, options, refresh, search = false, autoAddBlankItem = search, value, onChange, fullWidth, required, variant = "outlined", ...rest } = props;
     // Options state
     const [localOptions, setOptions] = React.useState([]);
     const isMounted = React.useRef(false);
@@ -128,12 +128,12 @@ export function SelectEx(props) {
     // Layout
     return (React.createElement(Stack, { direction: "row" },
         React.createElement(FormControl, { size: search ? MUGlobal.searchFieldSize : MUGlobal.inputFieldSize, fullWidth: fullWidth, error: error },
-            React.createElement(InputLabel, { id: labelId, shrink: search ? MUGlobal.searchFieldShrink : MUGlobal.inputFieldShrink }, label),
+            React.createElement(InputLabel, { id: labelId, variant: variant, shrink: search ? MUGlobal.searchFieldShrink : MUGlobal.inputFieldShrink, required: required }, label),
             React.createElement(Select, { ref: divRef, value: multiple
                     ? valueState
                     : localOptions.some((o) => o[idField] === valueState)
                         ? valueState
-                        : "", input: React.createElement(OutlinedInput, { notched: true, label: label, required: inputRequired }), labelId: labelId, name: name, multiple: multiple, onChange: (event, child) => {
+                        : "", input: React.createElement(OutlinedInput, { notched: true, label: label, required: required }), labelId: labelId, name: name, multiple: multiple, onChange: (event, child) => {
                     if (onChange) {
                         onChange(event, child);
                         // event.preventDefault() will block executing
@@ -159,7 +159,7 @@ export function SelectEx(props) {
                     })
                         .map((option) => getLabel(option))
                         .join(", ");
-                }, sx: { minWidth: "150px" }, fullWidth: fullWidth, ...rest }, localOptions.map((option) => {
+                }, sx: { minWidth: "150px" }, fullWidth: fullWidth, required: required, variant: variant, ...rest }, localOptions.map((option) => {
                 // Option id
                 const id = getId(option);
                 // Option label

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.2.53",
+  "version": "1.2.56",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -50,18 +50,18 @@
     "@emotion/css": "^11.11.0",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@etsoo/appscript": "^1.4.15",
+    "@etsoo/appscript": "^1.4.19",
     "@etsoo/notificationbase": "^1.1.25",
     "@etsoo/react": "^1.6.90",
     "@etsoo/shared": "^1.2.5",
     "@mui/icons-material": "^5.11.16",
-    "@mui/material": "^5.13.4",
+    "@mui/material": "^5.13.5",
     "@mui/x-data-grid": "^6.7.0",
     "@types/pica": "^9.0.1",
     "@types/pulltorefreshjs": "^0.1.5",
-    "@types/react": "^18.2.11",
+    "@types/react": "^18.2.12",
     "@types/react-avatar-editor": "^13.0.0",
-    "@types/react-dom": "^18.2.4",
+    "@types/react-dom": "^18.2.5",
     "@types/react-input-mask": "^3.0.2",
     "chart.js": "^4.3.0",
     "chartjs-plugin-datalabels": "^2.2.0",
@@ -85,8 +85,8 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
     "@types/jest": "^29.5.2",
-    "@typescript-eslint/eslint-plugin": "^5.59.9",
-    "@typescript-eslint/parser": "^5.59.9",
+    "@typescript-eslint/eslint-plugin": "^5.59.11",
+    "@typescript-eslint/parser": "^5.59.11",
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",
     "typescript": "^5.1.3"

package/src/HiSelector.tsx

@@ -175,7 +175,7 @@ export function HiSelector<
           value={values[0]}
           onChange={(event) => doChange(event, 0)}
           onItemChange={doItemChange}
-          inputRequired={required}
+          required={required}
           error={error}
           helperText={helperText}
         />

package/src/ListChooser.tsx

@@ -1,84 +1,90 @@
-import { useDelayedExecutor } from '@etsoo/react';
-import { DataTypes, DelayedExecutorType, IdDefaultType } from '@etsoo/shared';
+import { useDelayedExecutor } from "@etsoo/react";
+import { DataTypes, DelayedExecutorType, IdDefaultType } from "@etsoo/shared";
 import {
-    List,
-    ListItem,
-    ListItemButton,
-    ListItemButtonProps,
-    ListItemText,
-    ListProps,
-    TextField
-} from '@mui/material';
-import React from 'react';
-import { VBox } from './FlexBox';
+  List,
+  ListItem,
+  ListItemButton,
+  ListItemButtonProps,
+  ListItemText,
+  ListProps,
+  TextField
+} from "@mui/material";
+import CheckBoxIcon from "@mui/icons-material/CheckBox";
+import React from "react";
+import { VBox } from "./FlexBox";
 
 type QueryData = {
-    title?: string;
+  title?: string;
 };
 
 /**
  * List chooser button props
  */
 export interface ListChooserButtonProps<
-    T extends object,
-    D extends DataTypes.Keys<T>
+  T extends object,
+  D extends DataTypes.Keys<T>
 > {
-    (id: T[D]): ListItemButtonProps;
+  (id: T[D]): ListItemButtonProps;
 }
 
 /**
  * List chooser props
  */
 export type ListChooserProps<
-    T extends object,
-    D extends DataTypes.Keys<T>,
-    Q extends object
+  T extends object,
+  D extends DataTypes.Keys<T>,
+  Q extends object
 > = ListProps & {
-    /**
-     * Condition renderer
-     */
-    conditionRenderer?: (
-        rq: Partial<Q>,
-        delayed: DelayedExecutorType
-    ) => React.ReactNode;
-
-    /**
-     * List item renderer
-     */
-    itemRenderer?: (
-        data: T,
-        props: ListChooserButtonProps<T, D>
-    ) => React.ReactNode;
-
-    /**
-     * Label field
-     */
-    labelField?: DataTypes.Keys<T, string> | ((data: T) => string);
-
-    /**
-     * Id field
-     */
-    idField?: D;
-
-    /**
-     * Load data callback
-     */
-    loadData: (rq: Partial<Q>) => PromiseLike<T[] | null | undefined>;
-
-    /**
-     * Multiple selected
-     */
-    multiple?: boolean;
-
-    /**
-     * Item onchange callback
-     */
-    onItemChange: (items: T[], ids: T[D][]) => void;
-
-    /**
-     * Title
-     */
-    title: string;
+  /**
+   * Condition renderer
+   */
+  conditionRenderer?: (
+    rq: Partial<Q>,
+    delayed: DelayedExecutorType
+  ) => React.ReactNode;
+
+  /**
+   * List item renderer
+   */
+  itemRenderer?: (
+    data: T,
+    props: ListChooserButtonProps<T, D>
+  ) => React.ReactNode;
+
+  /**
+   * Label field
+   */
+  labelField?: DataTypes.Keys<T, string> | ((data: T) => string);
+
+  /**
+   * Id field
+   */
+  idField?: D;
+
+  /**
+   * Load data callback
+   */
+  loadData: (rq: Partial<Q>) => PromiseLike<T[] | null | undefined>;
+
+  /**
+   * Multiple selected
+   */
+  multiple?: boolean;
+
+  /**
+   * Item onchange callback
+   */
+  onItemChange: (items: T[], ids: T[D][]) => void;
+
+  /**
+   * Title
+   */
+  title: string;
+
+  /**
+   * Double click enabled
+   */
+  doubleClickEnabled?: boolean;
 };
 
 /**
@@ -87,118 +93,139 @@ export type ListChooserProps<
  * @returns Component
  */
 export function ListChooser<
-    T extends object,
-    D extends DataTypes.Keys<T> = IdDefaultType<T>,
-    Q extends object = QueryData
+  T extends object,
+  D extends DataTypes.Keys<T> = IdDefaultType<T>,
+  Q extends object = QueryData
 >(props: ListChooserProps<T, D, Q>) {
-    // Selected ids state
-    const [selectedIds, setSelectedIds] = React.useState<T[D][]>([]);
-
-    const selectProps: ListChooserButtonProps<T, D> = (id: T[D]) => ({
-        selected: selectedIds.includes(id),
-        onClick: () => {
-            if (multiple) {
-                const index = selectedIds.indexOf(id);
-                if (index === -1) selectedIds.push(id);
-                else selectedIds.splice(index, 1);
-                setSelectedIds([...selectedIds]);
-            } else {
-                setSelectedIds([id]);
-            }
-        }
-    });
-
-    // Destruct
-    const {
-        conditionRenderer = (rq: Partial<Q>, delayed: DelayedExecutorType) => (
-            <TextField
-                autoFocus
-                margin="dense"
-                name="title"
-                label={title}
-                fullWidth
-                variant="standard"
-                inputProps={{ maxLength: 128 }}
-                onChange={(event) => {
-                    Reflect.set(rq, 'title', event.target.value);
-                    delayed.call();
-                }}
-            />
-        ),
-        itemRenderer = (item, selectProps) => {
-            const id = item[idField];
-            const label =
-                typeof labelField === 'function'
-                    ? labelField(item)
-                    : (Reflect.get(item, labelField) as React.ReactNode);
-
-            return (
-                <ListItem disableGutters key={`${id}`}>
-                    <ListItemButton {...selectProps(id)}>
-                        <ListItemText primary={label} />
-                    </ListItemButton>
-                </ListItem>
-            );
-        },
-        idField = 'id' as D,
-        labelField = 'label',
-        loadData,
-        multiple = false,
-        onItemChange,
-        title,
-        ...rest
-    } = props;
-
-    // Default minimum height
-    rest.sx ??= { minHeight: '220px' };
-
-    // State
-    const [items, setItems] = React.useState<T[]>([]);
-
-    // Query request data
-    const mounted = React.useRef<boolean>(false);
-    const rq = React.useRef<Partial<Q>>({});
-
-    // Delayed execution
-    const delayed = useDelayedExecutor(async () => {
-        const result = await loadData(rq.current);
-        if (result == null || !mounted.current) return;
-
-        if (
-            !multiple &&
-            selectedIds.length > 0 &&
-            !result.some((item) => selectedIds.includes(item[idField]))
-        ) {
-            setSelectedIds([]);
-        }
-
-        setItems(result);
-    }, 480);
-
-    React.useEffect(() => {
-        if (!mounted.current) return;
-        onItemChange(
-            items.filter((item) => selectedIds.includes(item[idField])),
-            selectedIds
-        );
-    }, [selectedIds]);
-
-    React.useEffect(() => {
-        mounted.current = true;
-        delayed.call(0);
-        return () => {
-            mounted.current = false;
-            delayed.clear();
-        };
-    }, [delayed]);
-
-    // Layout
-    return (
-        <VBox>
-            {conditionRenderer(rq.current, delayed)}
-            <List disablePadding dense {...rest}>
-                {items.map((item) => itemRenderer(item, selectProps))}
-            </List>
-        </VBox>
+  // Selected ids state
+  const [selectedIds, setSelectedIds] = React.useState<T[D][]>([]);
+
+  const selectProps: ListChooserButtonProps<T, D> = (id: T[D]) => ({
+    selected: selectedIds.includes(id),
+    onClick: () => {
+      if (multiple) {
+        const index = selectedIds.indexOf(id);
+        if (index === -1) selectedIds.push(id);
+        else selectedIds.splice(index, 1);
+        setSelectedIds([...selectedIds]);
+      } else {
+        setSelectedIds([id]);
+      }
+    }
+  });
+
+  // Destruct
+  const {
+    conditionRenderer = (rq: Partial<Q>, delayed: DelayedExecutorType) => (
+      <TextField
+        autoFocus
+        margin="dense"
+        name="title"
+        label={title}
+        fullWidth
+        variant="standard"
+        inputProps={{ maxLength: 128 }}
+        onChange={(event) => {
+          Reflect.set(rq, "title", event.target.value);
+          delayed.call();
+        }}
+      />
+    ),
+    itemRenderer = (item, selectProps) => {
+      const id = item[idField];
+      const sp = selectProps(id);
+      const label =
+        typeof labelField === "function"
+          ? labelField(item)
+          : (Reflect.get(item, labelField) as React.ReactNode);
+
+      return (
+        <ListItem
+          disableGutters
+          key={`${id}`}
+          secondaryAction={
+            sp.selected ? <CheckBoxIcon fontSize="small" /> : undefined
+          }
+        >
+          <ListItemButton {...sp}>
+            <ListItemText primary={label} />
+          </ListItemButton>
+        </ListItem>
+      );
+    },
+    idField = "id" as D,
+    labelField = "label",
+    loadData,
+    multiple = false,
+    onItemChange,
+    title,
+    doubleClickEnabled = false,
+    onDoubleClick,
+    ...rest
+  } = props;
+
+  // Default minimum height
+  rest.sx ??= { minHeight: "220px" };
+
+  // State
+  const [items, setItems] = React.useState<T[]>([]);
+
+  // Query request data
+  const mounted = React.useRef<boolean>(false);
+  const rq = React.useRef<Partial<Q>>({});
+
+  // Delayed execution
+  const delayed = useDelayedExecutor(async () => {
+    const result = await loadData(rq.current);
+    if (result == null || !mounted.current) return;
+
+    if (
+      !multiple &&
+      selectedIds.length > 0 &&
+      !result.some((item) => selectedIds.includes(item[idField]))
+    ) {
+      setSelectedIds([]);
+    }
+
+    setItems(result);
+  }, 480);
+
+  React.useEffect(() => {
+    if (!mounted.current) return;
+    onItemChange(
+      items.filter((item) => selectedIds.includes(item[idField])),
+      selectedIds
     );
+  }, [selectedIds]);
+
+  React.useEffect(() => {
+    mounted.current = true;
+    delayed.call(0);
+    return () => {
+      mounted.current = false;
+      delayed.clear();
+    };
+  }, [delayed]);
+
+  const onDoubleClickLocal = (event: React.MouseEvent<HTMLUListElement>) => {
+    if (onDoubleClick) onDoubleClick(event);
+    if (doubleClickEnabled) {
+      const button = event.currentTarget
+        .closest("form")
+        ?.elements.namedItem("okButton") as HTMLButtonElement | undefined;
+      if (button) {
+        button.click();
+      }
+    }
+  };
+
+  // Layout
+  return (
+    <VBox>
+      {conditionRenderer(rq.current, delayed)}
+      <List onDoubleClick={onDoubleClickLocal} disablePadding dense {...rest}>
+        {items.map((item) => itemRenderer(item, selectProps))}
+      </List>
+    </VBox>
+  );
 }

package/src/SelectEx.tsx

@@ -43,11 +43,6 @@ export type SelectExProps<
    */
   helperText?: React.ReactNode;
 
-  /**
-   * Input required
-   */
-  inputRequired?: boolean;
-
   /**
    * Id field
    */
@@ -120,7 +115,6 @@ export function SelectEx<
     idField = "id" as D,
     error,
     helperText,
-    inputRequired,
     itemIconRenderer,
     itemStyle,
     label,
@@ -138,6 +132,8 @@ export function SelectEx<
     value,
     onChange,
     fullWidth,
+    required,
+    variant = "outlined",
     ...rest
   } = props;
 
@@ -278,9 +274,11 @@ export function SelectEx<
       >
         <InputLabel
           id={labelId}
+          variant={variant}
           shrink={
             search ? MUGlobal.searchFieldShrink : MUGlobal.inputFieldShrink
           }
+          required={required}
         >
           {label}
         </InputLabel>
@@ -293,9 +291,7 @@ export function SelectEx<
               ? valueState
               : ""
           }
-          input={
-            <OutlinedInput notched label={label} required={inputRequired} />
-          }
+          input={<OutlinedInput notched label={label} required={required} />}
           labelId={labelId}
           name={name}
           multiple={multiple}
@@ -330,6 +326,8 @@ export function SelectEx<
           }}
           sx={{ minWidth: "150px" }}
           fullWidth={fullWidth}
+          required={required}
+          variant={variant}
           {...rest}
         >
           {localOptions.map((option) => {