@etsoo/materialui 1.6.54 → 1.6.56

package/lib/cjs/ButtonList.d.ts

@@ -0,0 +1,46 @@
+import * as React from "react";
+import { ButtonGroupProps } from "@mui/material/ButtonGroup";
+/**
+ * Button list item
+ */
+export type ButtonListItem = {
+    /**
+     * Label, '-' for divider
+     */
+    label: string;
+    /**
+     * Icon
+     */
+    icon?: React.ReactNode;
+    /**
+     * Click action
+     */
+    action?: (item: ButtonListItem, index: number) => void;
+};
+/**
+ * Button list props
+ */
+export type ButtonListProps = Omit<ButtonGroupProps, "ref"> & {
+    /**
+     * Check if button is disabled
+     * @param index Button index
+     * @returns Result
+     */
+    checkDisable?: (index: number) => boolean;
+    /**
+     * Button items
+     */
+    items: ButtonListItem[];
+    /**
+     * Click button handler
+     * @param event Click event
+     * @param index Current button index
+     */
+    onItemClick?: (event: React.MouseEvent, index: number) => void;
+};
+/**
+ * Dropdown button list
+ * @param props Props
+ * @returns Component
+ */
+export declare function ButtonList(props: ButtonListProps): import("react/jsx-runtime").JSX.Element;

package/lib/cjs/ButtonList.js

@@ -0,0 +1,100 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonList = ButtonList;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const Button_1 = __importDefault(require("@mui/material/Button"));
+const ButtonGroup_1 = __importDefault(require("@mui/material/ButtonGroup"));
+const ArrowDropDown_1 = __importDefault(require("@mui/icons-material/ArrowDropDown"));
+const ClickAwayListener_1 = __importDefault(require("@mui/material/ClickAwayListener"));
+const Grow_1 = __importDefault(require("@mui/material/Grow"));
+const Paper_1 = __importDefault(require("@mui/material/Paper"));
+const Popper_1 = __importDefault(require("@mui/material/Popper"));
+const MenuItem_1 = __importDefault(require("@mui/material/MenuItem"));
+const MenuList_1 = __importDefault(require("@mui/material/MenuList"));
+const ListItemIcon_1 = __importDefault(require("@mui/material/ListItemIcon"));
+const Divider_1 = __importDefault(require("@mui/material/Divider"));
+/**
+ * Dropdown button list
+ * @param props Props
+ * @returns Component
+ */
+function ButtonList(props) {
+    // Destruct
+    const { checkDisable, items, onItemClick, ...buttonGroupProps } = props;
+    const [open, setOpen] = React.useState(false);
+    const anchorRef = React.useRef(null);
+    const [selectedIndex, setSelectedIndex] = React.useState(0);
+    const handleClick = (event) => {
+        handleClickEvent(event, selectedIndex);
+    };
+    const handleClickEvent = (event, index) => {
+        onItemClick?.(event, index);
+        if (!event.isDefaultPrevented()) {
+            const item = items[index];
+            item.action?.(item, index);
+        }
+    };
+    const handleMenuItemClick = (event, index) => {
+        setSelectedIndex(index);
+        setOpen(false);
+        handleClickEvent(event, index);
+    };
+    const handleToggle = () => {
+        setOpen((prevOpen) => !prevOpen);
+    };
+    const handleClose = (event) => {
+        if (anchorRef.current &&
+            anchorRef.current.contains(event.target)) {
+            return;
+        }
+        setOpen(false);
+    };
+    return ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [(0, jsx_runtime_1.jsxs)(ButtonGroup_1.default, { ref: anchorRef, ...buttonGroupProps, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { onClick: (event) => handleClick(event), startIcon: items[selectedIndex].icon, children: items[selectedIndex].label }), (0, jsx_runtime_1.jsx)(Button_1.default, { size: "small", onClick: handleToggle, children: (0, jsx_runtime_1.jsx)(ArrowDropDown_1.default, {}) })] }), (0, jsx_runtime_1.jsx)(Popper_1.default, { sx: { zIndex: 1 }, open: open, anchorEl: anchorRef.current, transition: true, disablePortal: true, children: ({ TransitionProps, placement }) => ((0, jsx_runtime_1.jsx)(Grow_1.default, { ...TransitionProps, style: {
+                        transformOrigin: placement === "bottom" ? "center top" : "center bottom"
+                    }, children: (0, jsx_runtime_1.jsx)(Paper_1.default, { children: (0, jsx_runtime_1.jsx)(ClickAwayListener_1.default, { onClickAway: handleClose, children: (0, jsx_runtime_1.jsx)(MenuList_1.default, { autoFocusItem: true, children: items.map((item, index) => {
+                                    const label = item.label;
+                                    if (label === "-") {
+                                        return (0, jsx_runtime_1.jsx)(Divider_1.default, {}, index);
+                                    }
+                                    else {
+                                        return ((0, jsx_runtime_1.jsxs)(MenuItem_1.default, { disabled: checkDisable?.(index) ?? false, selected: index === selectedIndex, onClick: (event) => handleMenuItemClick(event, index), children: [item.icon && ((0, jsx_runtime_1.jsx)(ListItemIcon_1.default, { children: item.icon })), item.label] }, label));
+                                    }
+                                }) }) }) }) })) })] }));
+}

package/lib/cjs/index.d.ts

@@ -41,6 +41,7 @@ export * from "./AutocompleteExtendedProps";
 export * from "./BackButton";
 export * from "./BridgeCloseButton";
 export * from "./ButtonLink";
+export * from "./ButtonList";
 export * from "./ButtonPopover";
 export * from "./ButtonPopupCheckbox";
 export * from "./ButtonPopupRadio";
@@ -135,4 +136,4 @@ export * from "./UserAvatar";
 export * from "./UserAvatarEditor";
 export * from "./ViewContainer";
 export { default as AccountTreeIcon } from "@mui/icons-material/AccountTree";
-export { DataGrid, Toolbar, ToolbarButton, useGridApiContext, useGridApiRef, useGridSelector, type GridColDef, type GridSlots } from "@mui/x-data-grid";
+export { DataGrid, Toolbar, ToolbarButton, useGridApiContext, useGridApiRef, useGridSelector, type GridColDef, type GridRowId, type GridSlots } from "@mui/x-data-grid";

package/lib/cjs/index.js

@@ -61,6 +61,7 @@ __exportStar(require("./AutocompleteExtendedProps"), exports);
 __exportStar(require("./BackButton"), exports);
 __exportStar(require("./BridgeCloseButton"), exports);
 __exportStar(require("./ButtonLink"), exports);
+__exportStar(require("./ButtonList"), exports);
 __exportStar(require("./ButtonPopover"), exports);
 __exportStar(require("./ButtonPopupCheckbox"), exports);
 __exportStar(require("./ButtonPopupRadio"), exports);

package/lib/mjs/ButtonList.d.ts

@@ -0,0 +1,46 @@
+import * as React from "react";
+import { ButtonGroupProps } from "@mui/material/ButtonGroup";
+/**
+ * Button list item
+ */
+export type ButtonListItem = {
+    /**
+     * Label, '-' for divider
+     */
+    label: string;
+    /**
+     * Icon
+     */
+    icon?: React.ReactNode;
+    /**
+     * Click action
+     */
+    action?: (item: ButtonListItem, index: number) => void;
+};
+/**
+ * Button list props
+ */
+export type ButtonListProps = Omit<ButtonGroupProps, "ref"> & {
+    /**
+     * Check if button is disabled
+     * @param index Button index
+     * @returns Result
+     */
+    checkDisable?: (index: number) => boolean;
+    /**
+     * Button items
+     */
+    items: ButtonListItem[];
+    /**
+     * Click button handler
+     * @param event Click event
+     * @param index Current button index
+     */
+    onItemClick?: (event: React.MouseEvent, index: number) => void;
+};
+/**
+ * Dropdown button list
+ * @param props Props
+ * @returns Component
+ */
+export declare function ButtonList(props: ButtonListProps): import("react/jsx-runtime").JSX.Element;

package/lib/mjs/ButtonList.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import Button from "@mui/material/Button";
+import ButtonGroup from "@mui/material/ButtonGroup";
+import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
+import ClickAwayListener from "@mui/material/ClickAwayListener";
+import Grow from "@mui/material/Grow";
+import Paper from "@mui/material/Paper";
+import Popper from "@mui/material/Popper";
+import MenuItem from "@mui/material/MenuItem";
+import MenuList from "@mui/material/MenuList";
+import ListItemIcon from "@mui/material/ListItemIcon";
+import Divider from "@mui/material/Divider";
+/**
+ * Dropdown button list
+ * @param props Props
+ * @returns Component
+ */
+export function ButtonList(props) {
+    // Destruct
+    const { checkDisable, items, onItemClick, ...buttonGroupProps } = props;
+    const [open, setOpen] = React.useState(false);
+    const anchorRef = React.useRef(null);
+    const [selectedIndex, setSelectedIndex] = React.useState(0);
+    const handleClick = (event) => {
+        handleClickEvent(event, selectedIndex);
+    };
+    const handleClickEvent = (event, index) => {
+        onItemClick?.(event, index);
+        if (!event.isDefaultPrevented()) {
+            const item = items[index];
+            item.action?.(item, index);
+        }
+    };
+    const handleMenuItemClick = (event, index) => {
+        setSelectedIndex(index);
+        setOpen(false);
+        handleClickEvent(event, index);
+    };
+    const handleToggle = () => {
+        setOpen((prevOpen) => !prevOpen);
+    };
+    const handleClose = (event) => {
+        if (anchorRef.current &&
+            anchorRef.current.contains(event.target)) {
+            return;
+        }
+        setOpen(false);
+    };
+    return (_jsxs(React.Fragment, { children: [_jsxs(ButtonGroup, { ref: anchorRef, ...buttonGroupProps, children: [_jsx(Button, { onClick: (event) => handleClick(event), startIcon: items[selectedIndex].icon, children: items[selectedIndex].label }), _jsx(Button, { size: "small", onClick: handleToggle, children: _jsx(ArrowDropDownIcon, {}) })] }), _jsx(Popper, { sx: { zIndex: 1 }, open: open, anchorEl: anchorRef.current, transition: true, disablePortal: true, children: ({ TransitionProps, placement }) => (_jsx(Grow, { ...TransitionProps, style: {
+                        transformOrigin: placement === "bottom" ? "center top" : "center bottom"
+                    }, children: _jsx(Paper, { children: _jsx(ClickAwayListener, { onClickAway: handleClose, children: _jsx(MenuList, { autoFocusItem: true, children: items.map((item, index) => {
+                                    const label = item.label;
+                                    if (label === "-") {
+                                        return _jsx(Divider, {}, index);
+                                    }
+                                    else {
+                                        return (_jsxs(MenuItem, { disabled: checkDisable?.(index) ?? false, selected: index === selectedIndex, onClick: (event) => handleMenuItemClick(event, index), children: [item.icon && (_jsx(ListItemIcon, { children: item.icon })), item.label] }, label));
+                                    }
+                                }) }) }) }) })) })] }));
+}

package/lib/mjs/index.d.ts

@@ -41,6 +41,7 @@ export * from "./AutocompleteExtendedProps";
 export * from "./BackButton";
 export * from "./BridgeCloseButton";
 export * from "./ButtonLink";
+export * from "./ButtonList";
 export * from "./ButtonPopover";
 export * from "./ButtonPopupCheckbox";
 export * from "./ButtonPopupRadio";
@@ -135,4 +136,4 @@ export * from "./UserAvatar";
 export * from "./UserAvatarEditor";
 export * from "./ViewContainer";
 export { default as AccountTreeIcon } from "@mui/icons-material/AccountTree";
-export { DataGrid, Toolbar, ToolbarButton, useGridApiContext, useGridApiRef, useGridSelector, type GridColDef, type GridSlots } from "@mui/x-data-grid";
+export { DataGrid, Toolbar, ToolbarButton, useGridApiContext, useGridApiRef, useGridSelector, type GridColDef, type GridRowId, type GridSlots } from "@mui/x-data-grid";

package/lib/mjs/index.js

@@ -41,6 +41,7 @@ export * from "./AutocompleteExtendedProps";
 export * from "./BackButton";
 export * from "./BridgeCloseButton";
 export * from "./ButtonLink";
+export * from "./ButtonList";
 export * from "./ButtonPopover";
 export * from "./ButtonPopupCheckbox";
 export * from "./ButtonPopupRadio";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.6.54",
+  "version": "1.6.56",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",
@@ -49,7 +49,7 @@
     "@mui/x-data-grid": "^9.1.0",
     "chart.js": "^4.5.1",
     "chartjs-plugin-datalabels": "^2.2.0",
-    "dompurify": "^3.4.2",
+    "dompurify": "^3.4.3",
     "eventemitter3": "^5.0.4",
     "pica": "^9.0.1",
     "pulltorefreshjs": "^0.1.22",
@@ -79,9 +79,9 @@
     "@types/react-avatar-editor": "^13.0.4",
     "@types/react-dom": "^19.2.3",
     "@types/react-input-mask": "^3.0.6",
-    "@vitejs/plugin-react": "^6.0.1",
+    "@vitejs/plugin-react": "^6.0.2",
     "jsdom": "^29.1.1",
     "typescript": "^6.0.3",
-    "vitest": "^4.1.5"
+    "vitest": "^4.1.6"
   }
 }

package/src/ButtonList.tsx

@@ -0,0 +1,170 @@
+import * as React from "react";
+import Button from "@mui/material/Button";
+import ButtonGroup, { ButtonGroupProps } from "@mui/material/ButtonGroup";
+import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
+import ClickAwayListener from "@mui/material/ClickAwayListener";
+import Grow from "@mui/material/Grow";
+import Paper from "@mui/material/Paper";
+import Popper from "@mui/material/Popper";
+import MenuItem from "@mui/material/MenuItem";
+import MenuList from "@mui/material/MenuList";
+import ListItemIcon from "@mui/material/ListItemIcon";
+import Divider from "@mui/material/Divider";
+
+/**
+ * Button list item
+ */
+export type ButtonListItem = {
+  /**
+   * Label, '-' for divider
+   */
+  label: string;
+  /**
+   * Icon
+   */
+  icon?: React.ReactNode;
+
+  /**
+   * Click action
+   */
+  action?: (item: ButtonListItem, index: number) => void;
+};
+
+/**
+ * Button list props
+ */
+export type ButtonListProps = Omit<ButtonGroupProps, "ref"> & {
+  /**
+   * Check if button is disabled
+   * @param index Button index
+   * @returns Result
+   */
+  checkDisable?: (index: number) => boolean;
+
+  /**
+   * Button items
+   */
+  items: ButtonListItem[];
+
+  /**
+   * Click button handler
+   * @param event Click event
+   * @param index Current button index
+   */
+  onItemClick?: (event: React.MouseEvent, index: number) => void;
+};
+
+/**
+ * Dropdown button list
+ * @param props Props
+ * @returns Component
+ */
+export function ButtonList(props: ButtonListProps) {
+  // Destruct
+  const { checkDisable, items, onItemClick, ...buttonGroupProps } = props;
+
+  const [open, setOpen] = React.useState(false);
+  const anchorRef = React.useRef<HTMLDivElement>(null);
+  const [selectedIndex, setSelectedIndex] = React.useState(0);
+
+  const handleClick = (
+    event: React.MouseEvent<HTMLButtonElement, MouseEvent>
+  ) => {
+    handleClickEvent(event, selectedIndex);
+  };
+
+  const handleClickEvent = (event: React.MouseEvent, index: number) => {
+    onItemClick?.(event, index);
+
+    if (!event.isDefaultPrevented()) {
+      const item = items[index];
+      item.action?.(item, index);
+    }
+  };
+
+  const handleMenuItemClick = (
+    event: React.MouseEvent<HTMLLIElement, MouseEvent>,
+    index: number
+  ) => {
+    setSelectedIndex(index);
+    setOpen(false);
+
+    handleClickEvent(event, index);
+  };
+
+  const handleToggle = () => {
+    setOpen((prevOpen) => !prevOpen);
+  };
+
+  const handleClose = (event: Event) => {
+    if (
+      anchorRef.current &&
+      anchorRef.current.contains(event.target as HTMLElement)
+    ) {
+      return;
+    }
+
+    setOpen(false);
+  };
+
+  return (
+    <React.Fragment>
+      <ButtonGroup ref={anchorRef} {...buttonGroupProps}>
+        <Button
+          onClick={(event) => handleClick(event)}
+          startIcon={items[selectedIndex].icon}
+        >
+          {items[selectedIndex].label}
+        </Button>
+        <Button size="small" onClick={handleToggle}>
+          <ArrowDropDownIcon />
+        </Button>
+      </ButtonGroup>
+      <Popper
+        sx={{ zIndex: 1 }}
+        open={open}
+        anchorEl={anchorRef.current}
+        transition
+        disablePortal
+      >
+        {({ TransitionProps, placement }) => (
+          <Grow
+            {...TransitionProps}
+            style={{
+              transformOrigin:
+                placement === "bottom" ? "center top" : "center bottom"
+            }}
+          >
+            <Paper>
+              <ClickAwayListener onClickAway={handleClose}>
+                <MenuList autoFocusItem>
+                  {items.map((item, index) => {
+                    const label = item.label;
+
+                    if (label === "-") {
+                      return <Divider key={index} />;
+                    } else {
+                      return (
+                        <MenuItem
+                          key={label}
+                          disabled={checkDisable?.(index) ?? false}
+                          selected={index === selectedIndex}
+                          onClick={(event) => handleMenuItemClick(event, index)}
+                        >
+                          {item.icon && (
+                            <ListItemIcon>{item.icon}</ListItemIcon>
+                          )}
+                          {item.label}
+                        </MenuItem>
+                      );
+                    }
+                  })}
+                </MenuList>
+              </ClickAwayListener>
+            </Paper>
+          </Grow>
+        )}
+      </Popper>
+    </React.Fragment>
+  );
+}

package/src/index.ts

@@ -47,6 +47,7 @@ export * from "./AutocompleteExtendedProps";
 export * from "./BackButton";
 export * from "./BridgeCloseButton";
 export * from "./ButtonLink";
+export * from "./ButtonList";
 export * from "./ButtonPopover";
 export * from "./ButtonPopupCheckbox";
 export * from "./ButtonPopupRadio";
@@ -153,5 +154,6 @@ export {
   useGridApiRef,
   useGridSelector,
   type GridColDef,
+  type GridRowId,
   type GridSlots
 } from "@mui/x-data-grid";