@vertigis/react-ui 15.2.2 → 15.3.0

package/Chip/Chip.d.ts

@@ -0,0 +1,7 @@
+import type { ChipProps as MuiChipProps } from "@mui/material/Chip";
+export * from "@mui/material/Chip";
+export interface ChipProps extends MuiChipProps {
+    deleteLabel?: string;
+}
+declare const Chip: import("react").ForwardRefExoticComponent<Omit<ChipProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export default Chip;

package/Chip/Chip.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import MuiChip from "@mui/material/Chip";
+import { forwardRef, useEffect, useMemo, useState } from "react";
+import IconButton from "../IconButton/index.js";
+import Typography from "../Typography/index.js";
+import Clear from "../icons/Clear.js";
+export * from "@mui/material/Chip";
+const Chip = forwardRef(({ deleteIcon, label, deleteLabel = "", onClick, onDelete, ...props }, ref) => {
+    // Replace the close button as it is not WCAG compliant by default.
+    const deleteChipButton = useMemo(() => (_jsx(IconButton, { size: "small", "aria-label": deleteLabel, title: deleteLabel, children: deleteIcon ? deleteIcon : _jsx(Clear, { fontSize: "small" }) })), [deleteLabel, deleteIcon]);
+    const [title, setTitle] = useState();
+    useEffect(() => {
+        setTitle(typeof label === "string" ? label : undefined);
+    }, [label]);
+    return (_jsx(MuiChip, { ref: ref, "aria-label": onClick ? title : undefined, deleteIcon: onDelete ? deleteChipButton : undefined, label: _jsx(Typography, { children: label }), title: title, onClick: onClick, onDelete: onDelete, 
+        // The chip should only have the button role and be focusable if
+        // it is clickable.
+        role: onClick ? "button" : undefined, tabIndex: onClick ? 0 : -1, ...props }));
+});
+export default Chip;

package/Chip/index.d.ts

@@ -1,2 +1,2 @@
-export { default } from "@mui/material/Chip";
-export * from "@mui/material/Chip";
+export { default } from "./Chip.js";
+export * from "./Chip.js";

package/Chip/index.js

@@ -1,2 +1,2 @@
-export { default } from "@mui/material/Chip";
-export * from "@mui/material/Chip";
+export { default } from "./Chip.js";
+export * from "./Chip.js";

package/IconMenu/IconMenu.d.ts

@@ -24,6 +24,16 @@ export interface IconMenuProps extends BoxProps {
      * The icon to show.
      */
     icon: ReactNode;
+    /**
+     * A ref for the menu element
+     */
+    menuRef?: React.MutableRefObject<HTMLDivElement>;
+    /**
+     * A 'virtual anchor' that can be provided to override the default behavior.
+     * Use if the component hosting this could be destroyed while the menu is
+     * open.
+     */
+    virtualAnchor?: DOMRect;
     /**
      * Attributes applied to the `IconButton` component.
      */

package/IconMenu/IconMenu.js

@@ -11,7 +11,7 @@ export const iconMenuClasses = {
     root: `${PREFIX}-root`,
     iconButton: `${PREFIX}-iconButton`,
 };
-const IconMenu = forwardRef(({ id: idProp, children, icon, className, classes: classesProp, disabled, IconButtonProps, MenuProps, ...others }, ref) => {
+const IconMenu = forwardRef(({ id: idProp, children, icon, className, classes: classesProp, disabled, menuRef, virtualAnchor, IconButtonProps, MenuProps, ...others }, ref) => {
     const anchorRef = useRef();
     const [open, setOpen] = useState(false);
     const id = useId(idProp);
@@ -19,7 +19,9 @@ const IconMenu = forwardRef(({ id: idProp, children, icon, className, classes: c
     return (_jsxs(Box, { className: clsx(classes.root, className), ref: ref, ...others, children: [_jsx(IconButton, { ...IconButtonProps, "aria-label": "More", "aria-owns": open ? id : undefined, "aria-haspopup": "true", "data-test": "IconMenu-btn", disabled: disabled, className: clsx(classes.iconButton, IconButtonProps?.className), onClick: event => {
                     setOpen(true);
                     IconButtonProps?.onClick?.(event);
-                }, ref: ref => (anchorRef.current = anchorRef.current ?? ref), children: icon }), _jsx(Menu, { ...MenuProps, open: MenuProps?.open ?? open, id: id, "data-test": "IconMenu-menu", anchorEl: anchorRef.current, onClose: (event, reason) => {
+                }, ref: ref => (anchorRef.current = anchorRef.current ?? ref), children: icon }), _jsx(Menu, { ...MenuProps, open: MenuProps?.open ?? open, id: id, ref: menuRef, "data-test": "IconMenu-menu", anchorEl: virtualAnchor
+                    ? { nodeType: 1, getBoundingClientRect: () => virtualAnchor }
+                    : anchorRef.current, onClose: (event, reason) => {
                     setOpen(false);
                     MenuProps?.onClose?.(event, reason);
                 }, onClick: event => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vertigis/react-ui",
-  "version": "15.2.2",
+  "version": "15.3.0",
   "description": "Utilities and React components used in VertiGIS applications.",
   "keywords": [
     "vertigis",