@etsoo/materialui 1.5.49 → 1.5.51

package/lib/cjs/ButtonPopupCheckbox.js

@@ -28,13 +28,10 @@ function ButtonPopupList(props) {
     // Ref
     const inputRef = react_1.default.useRef(null);
     // State
-    const [selectedIds, setSelectedIdsBase] = react_1.default.useState([]);
-    // Sort items
-    const setSelectedIds = (ids) => {
-        items.sortByProperty("id", ids);
-        setSelectedIdsBase(ids);
-    };
+    const [selectedIds, setSelectedIds] = react_1.default.useState([]);
     react_1.default.useEffect(() => {
+        // Sort items by ids for first load
+        items.sortByProperty("id", ids);
         // Set selected ids
         setSelectedIds([...ids]);
     }, [ids]);

package/lib/cjs/SelectEx.d.ts

@@ -1,6 +1,13 @@
 import React from "react";
 import { DataTypes, IdDefaultType, LabelDefaultType, ListType } from "@etsoo/shared";
 import { SelectProps, SelectVariants } from "@mui/material/Select";
+export type SelectExMethods = {
+    /**
+     * Set open state
+     * @param isOpen Open state
+     */
+    setOpen: (isOpen: boolean) => void;
+};
 /**
  * Extended select component props
  */
@@ -37,6 +44,10 @@ export type SelectExProps<T extends object, D extends DataTypes.Keys<T> = IdDefa
      * Load data callback
      */
     loadData?: () => PromiseLike<T[] | null | undefined>;
+    /**
+     * Methods
+     */
+    mRef?: React.Ref<SelectExMethods>;
     /**
      * Item change callback
      */

package/lib/cjs/SelectEx.js

@@ -28,7 +28,7 @@ const Refresh_1 = __importDefault(require("@mui/icons-material/Refresh"));
  */
 function SelectEx(props) {
     // Destruct
-    const { defaultValue, idField = "id", error, helperText, inputReset, 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;
+    const { defaultValue, idField = "id", error, helperText, inputReset, itemIconRenderer, itemStyle, label, labelField = "label", loadData, mRef, 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_1.default.useState([]);
     const isMounted = react_1.default.useRef(false);
@@ -74,6 +74,12 @@ function SelectEx(props) {
         valueRef.current = newValue;
         setValueStateBase(newValue);
     };
+    const [open, setOpen] = react_1.default.useState(false);
+    react_1.default.useImperativeHandle(mRef, () => ({
+        setOpen: (isOpen) => {
+            setOpen(isOpen);
+        }
+    }), []);
     react_1.default.useEffect(() => {
         if (valueSource != null)
             setValueState(valueSource);
@@ -145,7 +151,10 @@ function SelectEx(props) {
                             ? valueState
                             : localOptions.some((o) => o[idField] === valueState)
                                 ? valueState
-                                : "", input: (0, jsx_runtime_1.jsx)(OutlinedInput_1.default, { notched: true, label: label, required: required, inputProps: { "data-reset": inputReset } }), labelId: labelId, name: name, multiple: multiple, onChange: (event, child) => {
+                                : "", input: (0, jsx_runtime_1.jsx)(OutlinedInput_1.default, { notched: true, label: label, required: required, inputProps: {
+                                "aria-hidden": false,
+                                "data-reset": inputReset
+                            } }), open: open, onClose: () => setOpen(false), onOpen: () => setOpen(true), labelId: labelId, name: name, multiple: multiple, onChange: (event, child) => {
                             if (onChange) {
                                 onChange(event, child);
                                 // event.preventDefault() will block executing

package/lib/mjs/ButtonPopupCheckbox.js

@@ -22,13 +22,10 @@ function ButtonPopupList(props) {
     // Ref
     const inputRef = React.useRef(null);
     // State
-    const [selectedIds, setSelectedIdsBase] = React.useState([]);
-    // Sort items
-    const setSelectedIds = (ids) => {
-        items.sortByProperty("id", ids);
-        setSelectedIdsBase(ids);
-    };
+    const [selectedIds, setSelectedIds] = React.useState([]);
     React.useEffect(() => {
+        // Sort items by ids for first load
+        items.sortByProperty("id", ids);
         // Set selected ids
         setSelectedIds([...ids]);
     }, [ids]);

package/lib/mjs/SelectEx.d.ts

@@ -1,6 +1,13 @@
 import React from "react";
 import { DataTypes, IdDefaultType, LabelDefaultType, ListType } from "@etsoo/shared";
 import { SelectProps, SelectVariants } from "@mui/material/Select";
+export type SelectExMethods = {
+    /**
+     * Set open state
+     * @param isOpen Open state
+     */
+    setOpen: (isOpen: boolean) => void;
+};
 /**
  * Extended select component props
  */
@@ -37,6 +44,10 @@ export type SelectExProps<T extends object, D extends DataTypes.Keys<T> = IdDefa
      * Load data callback
      */
     loadData?: () => PromiseLike<T[] | null | undefined>;
+    /**
+     * Methods
+     */
+    mRef?: React.Ref<SelectExMethods>;
     /**
      * Item change callback
      */

package/lib/mjs/SelectEx.js

@@ -22,7 +22,7 @@ import RefreshIcon from "@mui/icons-material/Refresh";
  */
 export function SelectEx(props) {
     // Destruct
-    const { defaultValue, idField = "id", error, helperText, inputReset, 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;
+    const { defaultValue, idField = "id", error, helperText, inputReset, itemIconRenderer, itemStyle, label, labelField = "label", loadData, mRef, 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);
@@ -68,6 +68,12 @@ export function SelectEx(props) {
         valueRef.current = newValue;
         setValueStateBase(newValue);
     };
+    const [open, setOpen] = React.useState(false);
+    React.useImperativeHandle(mRef, () => ({
+        setOpen: (isOpen) => {
+            setOpen(isOpen);
+        }
+    }), []);
     React.useEffect(() => {
         if (valueSource != null)
             setValueState(valueSource);
@@ -139,7 +145,10 @@ export function SelectEx(props) {
                             ? valueState
                             : localOptions.some((o) => o[idField] === valueState)
                                 ? valueState
-                                : "", input: _jsx(OutlinedInput, { notched: true, label: label, required: required, inputProps: { "data-reset": inputReset } }), labelId: labelId, name: name, multiple: multiple, onChange: (event, child) => {
+                                : "", input: _jsx(OutlinedInput, { notched: true, label: label, required: required, inputProps: {
+                                "aria-hidden": false,
+                                "data-reset": inputReset
+                            } }), open: open, onClose: () => setOpen(false), onOpen: () => setOpen(true), labelId: labelId, name: name, multiple: multiple, onChange: (event, child) => {
                             if (onChange) {
                                 onChange(event, child);
                                 // event.preventDefault() will block executing

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.5.49",
+  "version": "1.5.51",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",

package/src/ButtonPopupCheckbox.tsx

@@ -140,15 +140,12 @@ function ButtonPopupList<D extends DnDItemType>(
   const inputRef = React.useRef<HTMLInputElement>(null);
 
   // State
-  const [selectedIds, setSelectedIdsBase] = React.useState<D["id"][]>([]);
+  const [selectedIds, setSelectedIds] = React.useState<D["id"][]>([]);
 
-  // Sort items
-  const setSelectedIds = (ids: D["id"][]) => {
+  React.useEffect(() => {
+    // Sort items by ids for first load
     items.sortByProperty("id", ids);
-    setSelectedIdsBase(ids);
-  };
 
-  React.useEffect(() => {
     // Set selected ids
     setSelectedIds([...ids]);
   }, [ids]);

package/src/SelectEx.tsx

@@ -22,6 +22,14 @@ import IconButton from "@mui/material/IconButton";
 import FormHelperText from "@mui/material/FormHelperText";
 import RefreshIcon from "@mui/icons-material/Refresh";
 
+export type SelectExMethods = {
+  /**
+   * Set open state
+   * @param isOpen Open state
+   */
+  setOpen: (isOpen: boolean) => void;
+};
+
 /**
  * Extended select component props
  */
@@ -70,6 +78,11 @@ export type SelectExProps<
    */
   loadData?: () => PromiseLike<T[] | null | undefined>;
 
+  /**
+   * Methods
+   */
+  mRef?: React.Ref<SelectExMethods>;
+
   /**
    * Item change callback
    */
@@ -128,6 +141,7 @@ export function SelectEx<
     label,
     labelField = "label" as L,
     loadData,
+    mRef,
     onItemChange,
     onItemClick,
     onLoadData,
@@ -202,6 +216,18 @@ export function SelectEx<
     setValueStateBase(newValue);
   };
 
+  const [open, setOpen] = React.useState(false);
+
+  React.useImperativeHandle(
+    mRef,
+    () => ({
+      setOpen: (isOpen: boolean) => {
+        setOpen(isOpen);
+      }
+    }),
+    []
+  );
+
   React.useEffect(() => {
     if (valueSource != null) setValueState(valueSource);
   }, [valueSource]);
@@ -308,9 +334,15 @@ export function SelectEx<
               notched
               label={label}
               required={required}
-              inputProps={{ "data-reset": inputReset }}
+              inputProps={{
+                "aria-hidden": false,
+                "data-reset": inputReset
+              }}
             />
           }
+          open={open}
+          onClose={() => setOpen(false)}
+          onOpen={() => setOpen(true)}
           labelId={labelId}
           name={name}
           multiple={multiple}