@etsoo/materialui 1.3.32 → 1.3.34

package/src/ComboBoxPro.tsx

@@ -2,8 +2,7 @@ import { Autocomplete, AutocompleteProps } from "@mui/material";
 import React from "react";
 import { globalApp } from "./app/ReactApp";
 import { InputField, InputFieldProps } from "./InputField";
-import { ListType2 } from "@etsoo/shared";
-import { MUUtils } from "./MUUtils";
+import { DataTypes, ListType2 } from "@etsoo/shared";
 
 export type ComboBoxProProps<D extends ListType2 = ListType2> = Omit<
   AutocompleteProps<D, false, false, true>,
@@ -131,7 +130,7 @@ export function ComboBoxPro<D extends ListType2 = ListType2>(
         />
       )}
       getOptionLabel={(item) =>
-        typeof item === "object" ? MUUtils.getListItemLabel(item) : item
+        typeof item === "object" ? DataTypes.getListItemLabel(item) : item
       }
       isOptionEqualToValue={(option, value) => option.id === value.id}
       noOptionsText={noOptionsText}

package/src/FieldSetEx.tsx

@@ -0,0 +1,71 @@
+import {
+  FormControl,
+  FormControlProps,
+  FormHelperText,
+  InputLabel
+} from "@mui/material";
+import NotchedOutline from "@mui/material/OutlinedInput";
+import React from "react";
+
+/**
+ * FieldSetEx props
+ */
+export type FieldSetExProps = Omit<
+  FormControlProps,
+  "defaultValue" | "variant"
+> & {
+  /**
+   * Label
+   */
+  label?: string;
+
+  /**
+   * Helper text
+   */
+  helperText?: React.ReactNode;
+};
+
+/**
+ * FieldSetEx
+ * @param props Props
+ * @returns Component
+ */
+export function FieldSetEx(props: FieldSetExProps) {
+  // Destruct
+  const { label, helperText, required, fullWidth, children, ...rest } = props;
+
+  // Layout
+  return (
+    <React.Fragment>
+      <FormControl fullWidth={fullWidth} {...rest}>
+        {label && (
+          <InputLabel required={required} variant="outlined" shrink>
+            {label}
+          </InputLabel>
+        )}
+        <NotchedOutline
+          label={label && required ? label + " *" : label}
+          notched
+          endAdornment={children}
+          sx={{
+            cursor: "default",
+            display: "flex",
+            flexWrap: "wrap",
+            gap: 1,
+            paddingX: 2,
+            paddingY: "7px",
+            width: fullWidth ? "100%" : "auto",
+            "& input": {
+              display: "none"
+            }
+          }}
+        />
+      </FormControl>
+      {helperText && (
+        <FormHelperText sx={{ marginLeft: 2, marginRight: 2 }}>
+          {helperText}
+        </FormHelperText>
+      )}
+    </React.Fragment>
+  );
+}

package/src/MUUtils.ts

@@ -1,23 +1,9 @@
-import { ListType2 } from "@etsoo/shared";
 import { GridApiCommunity } from "@mui/x-data-grid/models/api/gridApiCommunity";
 
 /**
  * MU utilities
  */
 export namespace MUUtils {
-  /**
-   * Get ListType2 item label
-   * @param item Item
-   * @returns Result
-   */
-  export function getListItemLabel(item: ListType2) {
-    return "label" in item
-      ? item.label
-      : "name" in item
-      ? item.name
-      : item.title;
-  }
-
   /**
    * Get grid data
    * @param grid Grid

package/src/OptionGroup.tsx

@@ -38,7 +38,7 @@ export type OptionGroupProps<
   T extends object,
   D extends DataTypes.Keys<T>,
   L extends DataTypes.Keys<T, string>
-> = Omit<FormControlProps<"fieldset">, "defaultValue"> & {
+> = Omit<FormControlProps, "defaultValue"> & {
   /**
    * Default value
    */
@@ -104,11 +104,6 @@ export type OptionGroupProps<
    */
   itemSize?: "small" | "medium";
 
-  /**
-   * Item height in px
-   */
-  itemHeight?: number;
-
   /**
    * Helper text
    */
@@ -140,28 +135,16 @@ export function OptionGroup<
     readOnly,
     row,
     itemSize,
-    itemHeight = row ? 56 : 42,
     helperText,
     variant,
     required,
     fullWidth,
-    sx = {},
     ...rest
   } = props;
 
   // Outlined
   const outlined = variant === "outlined";
 
-  if (sx) {
-    Object.assign(sx, {
-      height: outlined
-        ? row
-          ? `${itemHeight}px`
-          : `${options.length * itemHeight + 14}px`
-        : undefined
-    });
-  }
-
   // Get option value
   // D type should be the source id type
   const getOptionValue = (option: T): T[D] | null => {
@@ -292,33 +275,34 @@ export function OptionGroup<
   // Layout
   return (
     <React.Fragment>
-      <FormControl component="fieldset" fullWidth={fullWidth} sx={sx} {...rest}>
+      <FormControl fullWidth={fullWidth} {...rest}>
         {label && (
           <InputLabel required={required} variant={variant} shrink>
             {label}
           </InputLabel>
         )}
-        {outlined && (
+        {outlined ? (
           <NotchedOutline
             label={label && required ? label + " *" : label}
             notched
+            endAdornment={group}
             sx={{
               cursor: "default",
-              position: "absolute",
+              display: "flex",
+              gap: 1,
+              paddingX: 2,
+              paddingY: "7px",
               width: fullWidth ? "100%" : "auto",
               "& input": {
-                visibility: "hidden"
+                display: "none"
               }
             }}
           />
+        ) : (
+          <Box paddingLeft={2} paddingY="7px">
+            {group}
+          </Box>
         )}
-        <Box
-          paddingLeft={2}
-          paddingY="7px"
-          position={outlined ? "absolute" : undefined}
-        >
-          {group}
-        </Box>
       </FormControl>
       {helperText && (
         <FormHelperText sx={{ marginLeft: 2, marginRight: 2 }}>

package/src/OptionGroupFlag.tsx

@@ -0,0 +1,266 @@
+import {
+  DataTypes,
+  IdDefaultType,
+  LabelDefaultType,
+  ListType,
+  Utils
+} from "@etsoo/shared";
+import {
+  Box,
+  Checkbox,
+  FormControl,
+  FormControlLabel,
+  FormControlProps,
+  FormGroup,
+  FormHelperText,
+  InputLabel
+} from "@mui/material";
+import NotchedOutline from "@mui/material/OutlinedInput";
+import React from "react";
+
+/**
+ * OptionGroupFlag methods ref
+ */
+export interface OptionGroupFlagRef {
+  /**
+   * Disable specific items with their ids
+   * @param ids Ids
+   */
+  disable(ids: number[]): void;
+}
+
+/**
+ * OptionGroupFlag props
+ */
+export type OptionGroupFlagProps<
+  T extends object,
+  D extends DataTypes.Keys<T, number>,
+  L extends DataTypes.Keys<T, string>
+> = Omit<FormControlProps, "defaultValue"> & {
+  /**
+   * Default value
+   */
+  defaultValue?: T[D] & number;
+
+  /**
+   * Get option label function
+   */
+  getOptionLabel?: (option: T) => string;
+
+  /**
+   * Id field
+   */
+  idField?: D;
+
+  /**
+   * Label
+   */
+  label?: string;
+
+  /**
+   * Label field
+   */
+  labelField?: L;
+
+  /**
+   * Methods
+   */
+  mRef?: React.Ref<OptionGroupFlagRef>;
+
+  /**
+   * Field name
+   */
+  name: string;
+
+  /**
+   * On value change handler
+   */
+  onValueChange?: (value?: T[D] & number) => void;
+
+  /**
+   * Array of options.
+   */
+  options: ReadonlyArray<T>;
+
+  /**
+   * Is the field read only?
+   */
+  readOnly?: boolean;
+
+  /**
+   * Display group of elements in a compact row
+   */
+  row?: boolean;
+
+  /**
+   * Item size
+   */
+  itemSize?: "small" | "medium";
+
+  /**
+   * Helper text
+   */
+  helperText?: React.ReactNode;
+};
+
+/**
+ * OptionGroupFlag
+ * @param props Props
+ * @returns Component
+ */
+export function OptionGroupFlag<
+  T extends object = ListType,
+  D extends DataTypes.Keys<T, number> = IdDefaultType<T, number>,
+  L extends DataTypes.Keys<T, string> = LabelDefaultType<T>
+>(props: OptionGroupFlagProps<T, D, L>) {
+  // Destruct
+  const {
+    getOptionLabel,
+    defaultValue,
+    idField = "id" as D,
+    label,
+    labelField = "label" as L,
+    mRef,
+    name,
+    onValueChange,
+    options,
+    readOnly,
+    row,
+    itemSize,
+    helperText,
+    variant,
+    required,
+    fullWidth,
+    sx = {},
+    ...rest
+  } = props;
+
+  // Outlined
+  const outlined = variant === "outlined";
+
+  // Get option value
+  // D type should be the source id type
+  const getOptionValue = (option: T): (T[D] & number) | null => {
+    const value = DataTypes.getValue(option, idField);
+    if (value == null) return null;
+    return value as T[D] & number;
+  };
+
+  // Value
+  const [value, setValue] = React.useState(defaultValue);
+
+  React.useEffect(() => {
+    setValue(defaultValue);
+  }, [defaultValue]);
+
+  // Disabled ids
+  const [disabledIds, setDisabledIds] = React.useState<number[]>();
+
+  // Item checked
+  const itemChecked = (option: T) => {
+    // Value
+    const itemValue = getOptionValue(option);
+    if (itemValue == null || value == null) return false;
+
+    return (value & itemValue) > 0;
+  };
+
+  React.useImperativeHandle(mRef, () => ({
+    disable(ids: number[]) {
+      setDisabledIds(ids);
+    }
+  }));
+
+  // First item value
+  const firstOptionValue = getOptionValue(options[0]);
+
+  // Items
+  const list = options.map((option) => {
+    // Value
+    const ov = getOptionValue(option);
+    if (ov == null) return;
+
+    // Control
+    const control = (
+      <Checkbox
+        name={name}
+        readOnly={readOnly}
+        size={itemSize}
+        checked={itemChecked(option)}
+        disabled={disabledIds?.includes(ov)}
+        onChange={(event) => {
+          if (firstOptionValue == null) return;
+
+          const typeValue = Utils.parseString(
+            event.target.value,
+            firstOptionValue
+          );
+
+          const newValue = (
+            value == null
+              ? event.target.checked
+                ? typeValue
+                : undefined
+              : event.target.checked
+              ? value | typeValue
+              : value ^ typeValue
+          ) as (T[D] & number) | undefined;
+
+          if (onValueChange) onValueChange(newValue);
+          setValue(newValue);
+        }}
+      />
+    );
+
+    // Label
+    const label =
+      getOptionLabel == null ? `${option[labelField]}` : getOptionLabel(option);
+
+    return (
+      <FormControlLabel key={ov} control={control} value={ov} label={label} />
+    );
+  });
+
+  // Group
+  const group = <FormGroup row={row}>{list}</FormGroup>;
+
+  // Layout
+  return (
+    <React.Fragment>
+      <FormControl fullWidth={fullWidth} sx={sx} {...rest}>
+        {label && (
+          <InputLabel required={required} variant={variant} shrink>
+            {label}
+          </InputLabel>
+        )}
+        {outlined ? (
+          <NotchedOutline
+            label={label && required ? label + " *" : label}
+            notched
+            endAdornment={group}
+            sx={{
+              cursor: "default",
+              display: "flex",
+              gap: 1,
+              paddingX: 2,
+              paddingY: "7px",
+              width: fullWidth ? "100%" : "auto",
+              "& input": {
+                display: "none"
+              }
+            }}
+          />
+        ) : (
+          <Box paddingLeft={2} paddingY="7px">
+            {group}
+          </Box>
+        )}
+      </FormControl>
+      {helperText && (
+        <FormHelperText sx={{ marginLeft: 2, marginRight: 2 }}>
+          {helperText}
+        </FormHelperText>
+      )}
+    </React.Fragment>
+  );
+}

package/src/QuickList.tsx

@@ -1,4 +1,4 @@
-import { ListType2 } from "@etsoo/shared";
+import { DataTypes, ListType2 } from "@etsoo/shared";
 import {
   LinearProgress,
   List,
@@ -13,7 +13,6 @@ import React from "react";
 import { InputField, InputFieldProps } from "./InputField";
 import { globalApp } from "./app/ReactApp";
 import { VBox } from "./FlexBox";
-import { MUUtils } from "./MUUtils";
 
 /**
  * Quick list props
@@ -83,7 +82,7 @@ export function QuickList<T extends ListType2 = ListType2>(
     buttonProps = {},
     label,
     inputProps,
-    itemLabel = MUUtils.getListItemLabel,
+    itemLabel = DataTypes.getListItemLabel,
     itemRenderer = (item: T) => itemLabel(item),
     itemProps,
     loadData,

package/src/SwitchField.tsx

@@ -12,10 +12,7 @@ import { SwitchAnt } from "./SwitchAnt";
 /**
  * SwitchField props
  */
-export type SwitchFieldProps = Omit<
-  FormControlProps<"fieldset">,
-  "defaultValue"
-> & {
+export type SwitchFieldProps = Omit<FormControlProps, "defaultValue"> & {
   /**
    * Helper text
    */
@@ -26,6 +23,11 @@ export type SwitchFieldProps = Omit<
    */
   label?: string;
 
+  /**
+   * Field name
+   */
+  name: string;
+
   /**
    * Checked
    */
@@ -46,11 +48,6 @@ export type SwitchFieldProps = Omit<
    */
   endLabel?: string;
 
-  /**
-   * Height in px
-   */
-  height?: number;
-
   /**
    * Value, default is true
    */
@@ -71,12 +68,10 @@ export function SwitchField(props: SwitchFieldProps) {
     value = true,
 
     fullWidth,
-    height = 56,
     helperText,
     label,
     name,
     required,
-    sx = {},
     checked,
     variant = "outlined",
     ...rest
@@ -85,47 +80,49 @@ export function SwitchField(props: SwitchFieldProps) {
   // Outlined
   const outlined = variant === "outlined";
 
-  if (sx) {
-    Object.assign(sx, { height: outlined ? `${height}px` : undefined });
-  }
+  // Group
+  const group = (
+    <SwitchAnt
+      activeColor={activeColor}
+      name={name}
+      startLabel={startLabel}
+      endLabel={endLabel}
+      value={value}
+      checked={checked}
+    />
+  );
 
   // Layout
   return (
     <React.Fragment>
-      <FormControl component="fieldset" fullWidth={fullWidth} sx={sx} {...rest}>
+      <FormControl fullWidth={fullWidth} {...rest}>
         {label && (
           <InputLabel required={required} variant={variant} shrink>
             {label}
           </InputLabel>
         )}
-        {outlined && (
+        {outlined ? (
           <NotchedOutline
             label={label && required ? label + " *" : label}
             notched
+            endAdornment={group}
             sx={{
               cursor: "default",
-              position: "absolute",
+              display: "flex",
+              gap: 1,
+              paddingX: 2,
+              paddingY: "7px",
               width: fullWidth ? "100%" : "auto",
               "& input": {
-                visibility: "hidden"
+                display: "none"
               }
             }}
           />
+        ) : (
+          <Box paddingLeft={2} paddingY="7px">
+            {group}
+          </Box>
         )}
-        <Box
-          paddingLeft={2}
-          paddingY="7px"
-          position={outlined ? "absolute" : undefined}
-        >
-          <SwitchAnt
-            activeColor={activeColor}
-            name={name}
-            startLabel={startLabel}
-            endLabel={endLabel}
-            value={value}
-            checked={checked}
-          />
-        </Box>
       </FormControl>
       {helperText && <FormHelperText>{helperText}</FormHelperText>}
     </React.Fragment>

package/src/TagListPro.tsx

@@ -4,7 +4,7 @@ import CheckBoxIcon from "@mui/icons-material/CheckBox";
 import React from "react";
 import { InputField, InputFieldProps } from "./InputField";
 import { globalApp } from "./app/ReactApp";
-import { ListType2 } from "@etsoo/shared";
+import { DataTypes, ListType2 } from "@etsoo/shared";
 
 export type TagListProProps<D extends ListType2 = ListType2> = Omit<
   AutocompleteProps<D, true, false, false>,
@@ -47,8 +47,7 @@ export function TagListPro<D extends ListType2 = ListType2>(
 
   const moreLabel = more + "...";
 
-  const getLabel = (item: D) =>
-    "label" in item ? item.label : "name" in item ? item.name : "";
+  const getLabel = (item: D) => DataTypes.getListItemLabel(item);
 
   // Destruct
   const {

package/src/Tiplist.tsx

@@ -1,5 +1,5 @@
 import { ReactUtils, useDelayedExecutor } from "@etsoo/react";
-import { DataTypes, IdDefaultType, ListType } from "@etsoo/shared";
+import { DataTypes, IdDefaultType, ListType2 } from "@etsoo/shared";
 import { Autocomplete, AutocompleteRenderInputParams } from "@mui/material";
 import React from "react";
 import { AutocompleteExtendedProps } from "./AutocompleteExtendedProps";
@@ -48,7 +48,7 @@ interface States<T extends object> {
  * @returns Component
  */
 export function Tiplist<
-  T extends object = ListType,
+  T extends object = ListType2,
   D extends DataTypes.Keys<T> = IdDefaultType<T>
 >(props: TiplistProps<T, D>) {
   // Labels
@@ -373,11 +373,7 @@ export function Tiplist<
           if (item[idField] === "n/a") return (more ?? "More") + "...";
           return getOptionLabel
             ? getOptionLabel(item)
-            : "label" in item
-            ? `${item.label}`
-            : "name" in item
-            ? `${item.name}`
-            : `${item}`;
+            : DataTypes.getObjectItemLabel(item);
         }}
         {...rest}
       />

package/src/TiplistPro.tsx

@@ -1,10 +1,9 @@
 import { ReactUtils, useDelayedExecutor } from "@etsoo/react";
-import { ListType2 } from "@etsoo/shared";
+import { DataTypes, ListType2 } from "@etsoo/shared";
 import { Autocomplete, AutocompleteProps } from "@mui/material";
 import React, { ChangeEventHandler } from "react";
 import { InputField, InputFieldProps } from "./InputField";
 import { globalApp } from "./app/ReactApp";
-import { MUUtils } from "./MUUtils";
 
 /**
  * TiplistPro props
@@ -370,7 +369,7 @@ export function TiplistPro<T extends ListType2 = ListType2>(
         getOptionLabel={(item) => {
           if (typeof item === "string") return item;
           if (item["id"] === -1) return (more ?? "More") + "...";
-          if (getOptionLabel == null) return MUUtils.getListItemLabel(item);
+          if (getOptionLabel == null) return DataTypes.getListItemLabel(item);
           return getOptionLabel(item);
         }}
         {...rest}

package/src/app/CommonApp.ts

@@ -1,5 +1,4 @@
 import {
-  IActionResult,
   IApiPayload,
   IAppSettings,
   IUser,
@@ -9,6 +8,7 @@ import {
 } from "@etsoo/appscript";
 import { CoreConstants, IPageData } from "@etsoo/react";
 import { ReactApp } from "./ReactApp";
+import { IActionResult } from "@etsoo/shared";
 
 /**
  * Common independent application