@etsoo/materialui 1.5.31 → 1.5.33

package/lib/cjs/ListMultipler.d.ts

@@ -0,0 +1,51 @@
+import { DataTypes, IdType } from "@etsoo/shared";
+import { ListProps } from "@mui/material/List";
+import { ListItemProps } from "@mui/material/ListItem";
+import { ListItemTextProps } from "@mui/material/ListItemText";
+type ListItemLabel<T extends object> = DataTypes.Keys<T, string | undefined> | ((item: T) => string | undefined);
+/**
+ * List multipler component props
+ */
+export type ListMultiplerProps<T extends object> = ListProps & {
+    /**
+     * List data
+     */
+    data: T[];
+    /**
+     * Id field name
+     */
+    idField: DataTypes.Keys<T, IdType>;
+    /**
+     * Primary label field name or function
+     */
+    primaryLabel: ListItemLabel<T>;
+    /**
+     * Secondary label field name or function
+     */
+    secondaryLabel?: ListItemLabel<T>;
+    /**
+     * List item props
+     */
+    listItemProps?: ListItemProps;
+    /**
+     * List item text props
+     */
+    listItemTextProps?: Omit<ListItemTextProps, "primary" | "secondary">;
+    /**
+     * Input name
+     */
+    name?: string;
+    /**
+     * On change event
+     * @param items The selected items
+     * @param ids The selected IDs
+     */
+    onCheckItems?: (items: T[], ids: unknown[]) => void;
+};
+/**
+ * List multipler component
+ * @param props Props
+ * @returns Component
+ */
+export declare function ListMultipler<T extends object>(props: ListMultiplerProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/cjs/ListMultipler.js

@@ -0,0 +1,61 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ListMultipler = ListMultipler;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Checkbox_1 = __importDefault(require("@mui/material/Checkbox"));
+const List_1 = __importDefault(require("@mui/material/List"));
+const ListItem_1 = __importDefault(require("@mui/material/ListItem"));
+const ListItemButton_1 = __importDefault(require("@mui/material/ListItemButton"));
+const ListItemIcon_1 = __importDefault(require("@mui/material/ListItemIcon"));
+const ListItemText_1 = __importDefault(require("@mui/material/ListItemText"));
+const react_1 = __importDefault(require("react"));
+function GetListItemLabel(data, label) {
+    if (label == null)
+        return undefined;
+    if (typeof label === "function") {
+        return label(data);
+    }
+    else {
+        return data[label];
+    }
+}
+/**
+ * List multipler component
+ * @param props Props
+ * @returns Component
+ */
+function ListMultipler(props) {
+    // Destruct
+    const { data, idField, primaryLabel, secondaryLabel, listItemProps, listItemTextProps, name, onCheckItems, ...rest } = props;
+    // Refs
+    const initialized = react_1.default.useRef(false);
+    react_1.default.useEffect(() => {
+        initialized.current = true;
+    }, []);
+    // State
+    const [checked, setChecked] = react_1.default.useState([]);
+    const ids = react_1.default.useMemo(() => {
+        const ids = checked.map((u) => u[idField]);
+        if (onCheckItems && initialized.current) {
+            onCheckItems(checked, ids);
+        }
+        return ids;
+    }, [checked]);
+    function handleToggle(id) {
+        if (ids.includes(id)) {
+            setChecked((prev) => prev.filter((u) => u[idField] !== id));
+        }
+        else {
+            const item = data.find((u) => u[idField] === id);
+            if (item) {
+                setChecked((prev) => [...prev, item]);
+            }
+        }
+    }
+    const inputType = typeof ids[0] === "string" ? "text" : "number";
+    // Layout
+    return ((0, jsx_runtime_1.jsxs)(List_1.default, { ...rest, children: [name && ((0, jsx_runtime_1.jsx)("input", { type: inputType, style: { display: "none" }, name: name, value: ids.join(","), readOnly: true })), data.map((u) => ((0, jsx_runtime_1.jsx)(ListItem_1.default, { ...listItemProps, children: (0, jsx_runtime_1.jsxs)(ListItemButton_1.default, { dense: true, onClick: () => handleToggle(u[idField]), children: [(0, jsx_runtime_1.jsx)(ListItemIcon_1.default, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.default, { edge: "start", disableRipple: true, checked: ids.includes(u[idField]) }) }), (0, jsx_runtime_1.jsx)(ListItemText_1.default, { primary: GetListItemLabel(u, primaryLabel), secondary: GetListItemLabel(u, secondaryLabel), ...listItemTextProps })] }) }, `${u[idField]}`)))] }));
+}

package/lib/cjs/html/HtmlDiv.js

@@ -28,6 +28,22 @@ class HtmlDivElement extends HTMLElement {
     connectedCallback() {
         // Create a shadow root
         const shadow = this.attachShadow({ mode: "open" });
+        // Default styles
+        // Comply with @etsoo/editor default styles
+        const style = document.createElement("style");
+        style.textContent = `
+    :host {
+      box-sizing: border-box;
+    }
+    img { 
+      max-width: 100%;
+    }
+    pre {
+      background-color: #f3f3f3;
+      padding: 12px;
+    }
+    `;
+        shadow.appendChild(style);
         // Create a wrapper element to hold the sanitized HTML content
         const wrapper = document.createElement("div");
         wrapper.style.cssText = this.displayStyle ?? "";

package/lib/cjs/index.d.ts

@@ -73,6 +73,7 @@ export * from "./LinkEx";
 export * from "./ListChooser";
 export * from "./ListItemRightIcon";
 export * from "./ListMoreDisplay";
+export * from "./ListMultipler";
 export * from "./LoadingButton";
 export * from "./MaskInput";
 export * from "./MenuButton";

package/lib/cjs/index.js

@@ -89,6 +89,7 @@ __exportStar(require("./LinkEx"), exports);
 __exportStar(require("./ListChooser"), exports);
 __exportStar(require("./ListItemRightIcon"), exports);
 __exportStar(require("./ListMoreDisplay"), exports);
+__exportStar(require("./ListMultipler"), exports);
 __exportStar(require("./LoadingButton"), exports);
 __exportStar(require("./MaskInput"), exports);
 __exportStar(require("./MenuButton"), exports);

package/lib/mjs/ListMultipler.d.ts

@@ -0,0 +1,51 @@
+import { DataTypes, IdType } from "@etsoo/shared";
+import { ListProps } from "@mui/material/List";
+import { ListItemProps } from "@mui/material/ListItem";
+import { ListItemTextProps } from "@mui/material/ListItemText";
+type ListItemLabel<T extends object> = DataTypes.Keys<T, string | undefined> | ((item: T) => string | undefined);
+/**
+ * List multipler component props
+ */
+export type ListMultiplerProps<T extends object> = ListProps & {
+    /**
+     * List data
+     */
+    data: T[];
+    /**
+     * Id field name
+     */
+    idField: DataTypes.Keys<T, IdType>;
+    /**
+     * Primary label field name or function
+     */
+    primaryLabel: ListItemLabel<T>;
+    /**
+     * Secondary label field name or function
+     */
+    secondaryLabel?: ListItemLabel<T>;
+    /**
+     * List item props
+     */
+    listItemProps?: ListItemProps;
+    /**
+     * List item text props
+     */
+    listItemTextProps?: Omit<ListItemTextProps, "primary" | "secondary">;
+    /**
+     * Input name
+     */
+    name?: string;
+    /**
+     * On change event
+     * @param items The selected items
+     * @param ids The selected IDs
+     */
+    onCheckItems?: (items: T[], ids: unknown[]) => void;
+};
+/**
+ * List multipler component
+ * @param props Props
+ * @returns Component
+ */
+export declare function ListMultipler<T extends object>(props: ListMultiplerProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/mjs/ListMultipler.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Checkbox from "@mui/material/Checkbox";
+import List from "@mui/material/List";
+import ListItem from "@mui/material/ListItem";
+import ListItemButton from "@mui/material/ListItemButton";
+import ListItemIcon from "@mui/material/ListItemIcon";
+import ListItemText from "@mui/material/ListItemText";
+import React from "react";
+function GetListItemLabel(data, label) {
+    if (label == null)
+        return undefined;
+    if (typeof label === "function") {
+        return label(data);
+    }
+    else {
+        return data[label];
+    }
+}
+/**
+ * List multipler component
+ * @param props Props
+ * @returns Component
+ */
+export function ListMultipler(props) {
+    // Destruct
+    const { data, idField, primaryLabel, secondaryLabel, listItemProps, listItemTextProps, name, onCheckItems, ...rest } = props;
+    // Refs
+    const initialized = React.useRef(false);
+    React.useEffect(() => {
+        initialized.current = true;
+    }, []);
+    // State
+    const [checked, setChecked] = React.useState([]);
+    const ids = React.useMemo(() => {
+        const ids = checked.map((u) => u[idField]);
+        if (onCheckItems && initialized.current) {
+            onCheckItems(checked, ids);
+        }
+        return ids;
+    }, [checked]);
+    function handleToggle(id) {
+        if (ids.includes(id)) {
+            setChecked((prev) => prev.filter((u) => u[idField] !== id));
+        }
+        else {
+            const item = data.find((u) => u[idField] === id);
+            if (item) {
+                setChecked((prev) => [...prev, item]);
+            }
+        }
+    }
+    const inputType = typeof ids[0] === "string" ? "text" : "number";
+    // Layout
+    return (_jsxs(List, { ...rest, children: [name && (_jsx("input", { type: inputType, style: { display: "none" }, name: name, value: ids.join(","), readOnly: true })), data.map((u) => (_jsx(ListItem, { ...listItemProps, children: _jsxs(ListItemButton, { dense: true, onClick: () => handleToggle(u[idField]), children: [_jsx(ListItemIcon, { children: _jsx(Checkbox, { edge: "start", disableRipple: true, checked: ids.includes(u[idField]) }) }), _jsx(ListItemText, { primary: GetListItemLabel(u, primaryLabel), secondary: GetListItemLabel(u, secondaryLabel), ...listItemTextProps })] }) }, `${u[idField]}`)))] }));
+}

package/lib/mjs/html/HtmlDiv.js

@@ -25,6 +25,22 @@ class HtmlDivElement extends HTMLElement {
     connectedCallback() {
         // Create a shadow root
         const shadow = this.attachShadow({ mode: "open" });
+        // Default styles
+        // Comply with @etsoo/editor default styles
+        const style = document.createElement("style");
+        style.textContent = `
+    :host {
+      box-sizing: border-box;
+    }
+    img { 
+      max-width: 100%;
+    }
+    pre {
+      background-color: #f3f3f3;
+      padding: 12px;
+    }
+    `;
+        shadow.appendChild(style);
         // Create a wrapper element to hold the sanitized HTML content
         const wrapper = document.createElement("div");
         wrapper.style.cssText = this.displayStyle ?? "";

package/lib/mjs/index.d.ts

@@ -73,6 +73,7 @@ export * from "./LinkEx";
 export * from "./ListChooser";
 export * from "./ListItemRightIcon";
 export * from "./ListMoreDisplay";
+export * from "./ListMultipler";
 export * from "./LoadingButton";
 export * from "./MaskInput";
 export * from "./MenuButton";

package/lib/mjs/index.js

@@ -73,6 +73,7 @@ export * from "./LinkEx";
 export * from "./ListChooser";
 export * from "./ListItemRightIcon";
 export * from "./ListMoreDisplay";
+export * from "./ListMultipler";
 export * from "./LoadingButton";
 export * from "./MaskInput";
 export * from "./MenuButton";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.5.31",
+  "version": "1.5.33",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",
@@ -40,7 +40,7 @@
     "@dnd-kit/sortable": "^10.0.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
-    "@etsoo/appscript": "^1.6.25",
+    "@etsoo/appscript": "^1.6.26",
     "@etsoo/notificationbase": "^1.1.60",
     "@etsoo/react": "^1.8.40",
     "@etsoo/shared": "^1.2.69",
@@ -81,9 +81,9 @@
     "@types/react-dom": "^18.3.6",
     "@types/react-input-mask": "^3.0.6",
     "@types/react-window": "^1.8.8",
-    "@vitejs/plugin-react": "^4.4.0",
+    "@vitejs/plugin-react": "^4.4.1",
     "jsdom": "^26.1.0",
     "typescript": "^5.8.3",
-    "vitest": "^3.1.1"
+    "vitest": "^3.1.2"
   }
 }

package/src/ListMultipler.tsx

@@ -0,0 +1,153 @@
+import { DataTypes, IdType } from "@etsoo/shared";
+import Checkbox from "@mui/material/Checkbox";
+import List, { ListProps } from "@mui/material/List";
+import ListItem, { ListItemProps } from "@mui/material/ListItem";
+import ListItemButton from "@mui/material/ListItemButton";
+import ListItemIcon from "@mui/material/ListItemIcon";
+import ListItemText, { ListItemTextProps } from "@mui/material/ListItemText";
+import React from "react";
+
+type ListItemLabel<T extends object> =
+  | DataTypes.Keys<T, string | undefined>
+  | ((item: T) => string | undefined);
+
+/**
+ * List multipler component props
+ */
+export type ListMultiplerProps<T extends object> = ListProps & {
+  /**
+   * List data
+   */
+  data: T[];
+
+  /**
+   * Id field name
+   */
+  idField: DataTypes.Keys<T, IdType>;
+
+  /**
+   * Primary label field name or function
+   */
+  primaryLabel: ListItemLabel<T>;
+
+  /**
+   * Secondary label field name or function
+   */
+  secondaryLabel?: ListItemLabel<T>;
+
+  /**
+   * List item props
+   */
+  listItemProps?: ListItemProps;
+
+  /**
+   * List item text props
+   */
+  listItemTextProps?: Omit<ListItemTextProps, "primary" | "secondary">;
+
+  /**
+   * Input name
+   */
+  name?: string;
+
+  /**
+   * On change event
+   * @param items The selected items
+   * @param ids The selected IDs
+   */
+  onCheckItems?: (items: T[], ids: unknown[]) => void;
+};
+
+function GetListItemLabel<T extends object>(data: T, label?: ListItemLabel<T>) {
+  if (label == null) return undefined;
+  if (typeof label === "function") {
+    return label(data);
+  } else {
+    return data[label] as string | undefined;
+  }
+}
+
+/**
+ * List multipler component
+ * @param props Props
+ * @returns Component
+ */
+export function ListMultipler<T extends object>(props: ListMultiplerProps<T>) {
+  // Destruct
+  const {
+    data,
+    idField,
+    primaryLabel,
+    secondaryLabel,
+    listItemProps,
+    listItemTextProps,
+    name,
+    onCheckItems,
+    ...rest
+  } = props;
+
+  // Refs
+  const initialized = React.useRef(false);
+  React.useEffect(() => {
+    initialized.current = true;
+  }, []);
+
+  // State
+  const [checked, setChecked] = React.useState<T[]>([]);
+
+  const ids = React.useMemo(() => {
+    const ids = checked.map((u) => u[idField]);
+
+    if (onCheckItems && initialized.current) {
+      onCheckItems(checked, ids);
+    }
+
+    return ids;
+  }, [checked]);
+
+  function handleToggle(id: T[DataTypes.Keys<T, IdType>]) {
+    if (ids.includes(id)) {
+      setChecked((prev) => prev.filter((u) => u[idField] !== id));
+    } else {
+      const item = data.find((u) => u[idField] === id);
+      if (item) {
+        setChecked((prev) => [...prev, item]);
+      }
+    }
+  }
+
+  const inputType = typeof ids[0] === "string" ? "text" : "number";
+
+  // Layout
+  return (
+    <List {...rest}>
+      {name && (
+        <input
+          type={inputType}
+          style={{ display: "none" }}
+          name={name}
+          value={ids.join(",")}
+          readOnly
+        />
+      )}
+      {data.map((u) => (
+        <ListItem key={`${u[idField]}`} {...listItemProps}>
+          <ListItemButton dense onClick={() => handleToggle(u[idField])}>
+            <ListItemIcon>
+              <Checkbox
+                edge="start"
+                disableRipple
+                checked={ids.includes(u[idField])}
+              />
+            </ListItemIcon>
+            <ListItemText
+              primary={GetListItemLabel(u, primaryLabel)}
+              secondary={GetListItemLabel(u, secondaryLabel)}
+              {...listItemTextProps}
+            />
+          </ListItemButton>
+        </ListItem>
+      ))}
+    </List>
+  );
+}

package/src/html/HtmlDiv.tsx

@@ -32,6 +32,23 @@ class HtmlDivElement extends HTMLElement {
     // Create a shadow root
     const shadow = this.attachShadow({ mode: "open" });
 
+    // Default styles
+    // Comply with @etsoo/editor default styles
+    const style = document.createElement("style");
+    style.textContent = `
+    :host {
+      box-sizing: border-box;
+    }
+    img { 
+      max-width: 100%;
+    }
+    pre {
+      background-color: #f3f3f3;
+      padding: 12px;
+    }
+    `;
+    shadow.appendChild(style);
+
     // Create a wrapper element to hold the sanitized HTML content
     const wrapper = document.createElement("div");
     wrapper.style.cssText = this.displayStyle ?? "";

package/src/index.ts

@@ -79,6 +79,7 @@ export * from "./LinkEx";
 export * from "./ListChooser";
 export * from "./ListItemRightIcon";
 export * from "./ListMoreDisplay";
+export * from "./ListMultipler";
 export * from "./LoadingButton";
 export * from "./MaskInput";
 export * from "./MenuButton";