@etsoo/materialui 1.5.66 → 1.5.68

package/lib/cjs/ButtonPopupCheckbox.js

@@ -25,19 +25,24 @@ function ButtonPopupList(props) {
     const { addSplitter = /\s*[,;]\s*/, value = [], items, labelField, labelFormatter, labels, onAdd, onValueChange } = props;
     // Methods
     const dndRef = react_1.default.createRef();
-    // Ref
+    // Refs
     const inputRef = react_1.default.useRef(null);
+    const tempSelectedIds = react_1.default.useRef([]);
     // State
     const [selectedIds, setSelectedIds] = react_1.default.useState([]);
+    const setSelectedIdsHandler = (ids) => {
+        tempSelectedIds.current = ids;
+        setSelectedIds(ids);
+    };
     react_1.default.useEffect(() => {
         // Sort items by ids for first load
         items.sortByProperty("id", value);
         // Set selected ids
-        setSelectedIds([...value]);
+        setSelectedIdsHandler([...value]);
     }, [value]);
     return ((0, jsx_runtime_1.jsxs)(FlexBox_1.VBox, { gap: 2, children: [(0, jsx_runtime_1.jsx)(DnDList_1.DnDList, { component: Grid_1.default, componentProps: { container: true, spacing: 0 }, items: items, labelField: labelField, onFormChange: (items) => {
                     const ids = items
-                        .filter((item) => selectedIds.includes(item.id))
+                        .filter((item) => tempSelectedIds.current.includes(item.id))
                         .map((item) => item.id);
                     onValueChange(ids);
                 }, itemRenderer: (item, index, nodeRef, actionNodeRef) => ((0, jsx_runtime_1.jsxs)(Grid_1.default, { size: { xs: 12, md: 6, lg: 4 }, display: "flex", justifyContent: "flex-start", alignItems: "center", gap: 1, ...nodeRef, children: [(0, jsx_runtime_1.jsx)(IconButton_1.default, { style: { cursor: "move" }, size: "small", title: labels?.dragIndicator, ...actionNodeRef, children: (0, jsx_runtime_1.jsx)(DragIndicator_1.default, {}) }), (0, jsx_runtime_1.jsx)(FormControlLabel_1.default, { control: (0, jsx_runtime_1.jsx)(Checkbox_1.default, { name: "item", value: item.id, checked: selectedIds.includes(item.id), onChange: (e) => {
@@ -45,7 +50,7 @@ function ButtonPopupList(props) {
                                     const newIds = [
                                         ...selectedIds.toggleItem(item.id, checked)
                                     ];
-                                    setSelectedIds(newIds);
+                                    setSelectedIdsHandler(newIds);
                                 } }), label: `${index + 1}. ${labelFormatter(item)}` })] })), height: 200, mRef: dndRef }), onAdd && ((0, jsx_runtime_1.jsxs)(FlexBox_1.HBox, { gap: 1, children: [(0, jsx_runtime_1.jsx)(TextField_1.default, { variant: "outlined", label: labels?.more, fullWidth: true, inputRef: inputRef }), (0, jsx_runtime_1.jsx)(Button_1.default, { sx: { width: "120px" }, variant: "contained", startIcon: (0, jsx_runtime_1.jsx)(Add_1.default, {}), size: "small", onClick: async () => {
                             if (inputRef.current == null)
                                 return;

package/lib/cjs/SelectBool.d.ts

@@ -3,7 +3,12 @@ import { SelectExProps } from "./SelectEx";
 /**
  * SelectBool props
  */
-export type SelectBoolProps = Omit<SelectExProps<ListType1>, "options" | "loadData">;
+export type SelectBoolProps = Omit<SelectExProps<ListType1>, "options" | "loadData" | "value"> & {
+    /**
+     * Value
+     */
+    value?: boolean;
+};
 /**
  * SelectBool (yes/no)
  * @param props Props

package/lib/cjs/SelectBool.js

@@ -14,11 +14,11 @@ function SelectBool(props) {
     // Global app
     const app = (0, ReactApp_1.useAppContext)();
     // Destruct
-    const { search = true, autoAddBlankItem = search, ...rest } = props;
+    const { search = true, autoAddBlankItem = search, value, ...rest } = props;
     // Options
     const options = app?.getBools() ?? [];
     if (autoAddBlankItem)
         shared_1.Utils.addBlankItem(options);
     // Layout
-    return (0, jsx_runtime_1.jsx)(SelectEx_1.SelectEx, { options: options, search: search, ...rest });
+    return ((0, jsx_runtime_1.jsx)(SelectEx_1.SelectEx, { options: options, search: search, value: `${value ?? ""}`, ...rest }));
 }

package/lib/mjs/ButtonPopupCheckbox.js

@@ -19,19 +19,24 @@ function ButtonPopupList(props) {
     const { addSplitter = /\s*[,;]\s*/, value = [], items, labelField, labelFormatter, labels, onAdd, onValueChange } = props;
     // Methods
     const dndRef = React.createRef();
-    // Ref
+    // Refs
     const inputRef = React.useRef(null);
+    const tempSelectedIds = React.useRef([]);
     // State
     const [selectedIds, setSelectedIds] = React.useState([]);
+    const setSelectedIdsHandler = (ids) => {
+        tempSelectedIds.current = ids;
+        setSelectedIds(ids);
+    };
     React.useEffect(() => {
         // Sort items by ids for first load
         items.sortByProperty("id", value);
         // Set selected ids
-        setSelectedIds([...value]);
+        setSelectedIdsHandler([...value]);
     }, [value]);
     return (_jsxs(VBox, { gap: 2, children: [_jsx(DnDList, { component: Grid, componentProps: { container: true, spacing: 0 }, items: items, labelField: labelField, onFormChange: (items) => {
                     const ids = items
-                        .filter((item) => selectedIds.includes(item.id))
+                        .filter((item) => tempSelectedIds.current.includes(item.id))
                         .map((item) => item.id);
                     onValueChange(ids);
                 }, itemRenderer: (item, index, nodeRef, actionNodeRef) => (_jsxs(Grid, { size: { xs: 12, md: 6, lg: 4 }, display: "flex", justifyContent: "flex-start", alignItems: "center", gap: 1, ...nodeRef, children: [_jsx(IconButton, { style: { cursor: "move" }, size: "small", title: labels?.dragIndicator, ...actionNodeRef, children: _jsx(DragIndicatorIcon, {}) }), _jsx(FormControlLabel, { control: _jsx(Checkbox, { name: "item", value: item.id, checked: selectedIds.includes(item.id), onChange: (e) => {
@@ -39,7 +44,7 @@ function ButtonPopupList(props) {
                                     const newIds = [
                                         ...selectedIds.toggleItem(item.id, checked)
                                     ];
-                                    setSelectedIds(newIds);
+                                    setSelectedIdsHandler(newIds);
                                 } }), label: `${index + 1}. ${labelFormatter(item)}` })] })), height: 200, mRef: dndRef }), onAdd && (_jsxs(HBox, { gap: 1, children: [_jsx(TextField, { variant: "outlined", label: labels?.more, fullWidth: true, inputRef: inputRef }), _jsx(Button, { sx: { width: "120px" }, variant: "contained", startIcon: _jsx(AddIcon, {}), size: "small", onClick: async () => {
                             if (inputRef.current == null)
                                 return;

package/lib/mjs/SelectBool.d.ts

@@ -3,7 +3,12 @@ import { SelectExProps } from "./SelectEx";
 /**
  * SelectBool props
  */
-export type SelectBoolProps = Omit<SelectExProps<ListType1>, "options" | "loadData">;
+export type SelectBoolProps = Omit<SelectExProps<ListType1>, "options" | "loadData" | "value"> & {
+    /**
+     * Value
+     */
+    value?: boolean;
+};
 /**
  * SelectBool (yes/no)
  * @param props Props

package/lib/mjs/SelectBool.js

@@ -11,11 +11,11 @@ export function SelectBool(props) {
     // Global app
     const app = useAppContext();
     // Destruct
-    const { search = true, autoAddBlankItem = search, ...rest } = props;
+    const { search = true, autoAddBlankItem = search, value, ...rest } = props;
     // Options
     const options = app?.getBools() ?? [];
     if (autoAddBlankItem)
         Utils.addBlankItem(options);
     // Layout
-    return _jsx(SelectEx, { options: options, search: search, ...rest });
+    return (_jsx(SelectEx, { options: options, search: search, value: `${value ?? ""}`, ...rest }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.5.66",
+  "version": "1.5.68",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",
@@ -40,13 +40,13 @@
     "@dnd-kit/sortable": "^10.0.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
-    "@etsoo/appscript": "^1.6.42",
+    "@etsoo/appscript": "^1.6.43",
     "@etsoo/notificationbase": "^1.1.63",
     "@etsoo/react": "^1.8.49",
     "@etsoo/shared": "^1.2.75",
     "@mui/icons-material": "^7.2.0",
     "@mui/material": "^7.2.0",
-    "@mui/x-data-grid": "^8.8.0",
+    "@mui/x-data-grid": "^8.9.2",
     "chart.js": "^4.5.0",
     "chartjs-plugin-datalabels": "^2.2.0",
     "dompurify": "^3.2.6",
@@ -72,7 +72,7 @@
     "@babel/preset-env": "^7.28.0",
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
-    "@babel/runtime-corejs3": "^7.28.0",
+    "@babel/runtime-corejs3": "^7.28.2",
     "@testing-library/react": "^16.3.0",
     "@types/pica": "^9.0.5",
     "@types/pulltorefreshjs": "^0.1.7",
@@ -81,9 +81,9 @@
     "@types/react-dom": "^18.3.7",
     "@types/react-input-mask": "^3.0.6",
     "@types/react-window": "^1.8.8",
-    "@vitejs/plugin-react": "^4.6.0",
+    "@vitejs/plugin-react": "^4.7.0",
     "jsdom": "^26.1.0",
-    "typescript": "^5.8.3",
+    "typescript": "^5.9.2",
     "vitest": "^3.2.4"
   }
 }

package/src/ButtonPopupCheckbox.tsx

@@ -136,18 +136,24 @@ function ButtonPopupList<D extends DnDItemType>(
   // Methods
   const dndRef = React.createRef<DnDListRef<D>>();
 
-  // Ref
+  // Refs
   const inputRef = React.useRef<HTMLInputElement>(null);
+  const tempSelectedIds = React.useRef<D["id"][]>([]);
 
   // State
   const [selectedIds, setSelectedIds] = React.useState<D["id"][]>([]);
 
+  const setSelectedIdsHandler = (ids: D["id"][]) => {
+    tempSelectedIds.current = ids;
+    setSelectedIds(ids);
+  };
+
   React.useEffect(() => {
     // Sort items by ids for first load
     items.sortByProperty("id", value);
 
     // Set selected ids
-    setSelectedIds([...value]);
+    setSelectedIdsHandler([...value]);
   }, [value]);
 
   return (
@@ -159,8 +165,9 @@ function ButtonPopupList<D extends DnDItemType>(
         labelField={labelField}
         onFormChange={(items) => {
           const ids = items
-            .filter((item) => selectedIds.includes(item.id))
+            .filter((item) => tempSelectedIds.current.includes(item.id))
             .map((item) => item.id);
+
           onValueChange(ids);
         }}
         itemRenderer={(item, index, nodeRef, actionNodeRef) => (
@@ -191,7 +198,7 @@ function ButtonPopupList<D extends DnDItemType>(
                     const newIds = [
                       ...selectedIds.toggleItem(item.id, checked)
                     ];
-                    setSelectedIds(newIds);
+                    setSelectedIdsHandler(newIds);
                   }}
                 />
               }

package/src/SelectBool.tsx

@@ -7,8 +7,13 @@ import { useAppContext } from "./app/ReactApp";
  */
 export type SelectBoolProps = Omit<
   SelectExProps<ListType1>,
-  "options" | "loadData"
->;
+  "options" | "loadData" | "value"
+> & {
+  /**
+   * Value
+   */
+  value?: boolean;
+};
 
 /**
  * SelectBool (yes/no)
@@ -20,7 +25,7 @@ export function SelectBool(props: SelectBoolProps) {
   const app = useAppContext();
 
   // Destruct
-  const { search = true, autoAddBlankItem = search, ...rest } = props;
+  const { search = true, autoAddBlankItem = search, value, ...rest } = props;
 
   // Options
   const options = app?.getBools() ?? [];
@@ -28,5 +33,12 @@ export function SelectBool(props: SelectBoolProps) {
   if (autoAddBlankItem) Utils.addBlankItem(options);
 
   // Layout
-  return <SelectEx<ListType1> options={options} search={search} {...rest} />;
+  return (
+    <SelectEx<ListType1>
+      options={options}
+      search={search}
+      value={`${value ?? ""}`}
+      {...rest}
+    />
+  );
 }