@rnaga/wp-next-ui 1.0.8 → 1.0.9

package/Checkmarks.d.ts

@@ -0,0 +1,17 @@
+import { Button } from "./Button";
+import { RefObject } from "react";
+export type CheckmarksItem = {
+    label: string;
+    value: string;
+};
+export declare const Checkmarks: (props: {
+    ref?: RefObject<HTMLElement | null>;
+    items: CheckmarksItem[];
+    onChange: (values: string[], items: CheckmarksItem[]) => void;
+    label?: string;
+    size?: "small" | "medium";
+    values?: string[];
+    showArrowIcon?: boolean;
+    disabled?: boolean;
+} & Omit<Parameters<typeof Button>[0], "onChange" | "ref" | "label" | "value" | "children" | "disabled">) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Checkmarks.d.ts.map

package/Checkmarks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkmarks.d.ts","sourceRoot":"","sources":["../src/Checkmarks.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAKlC,OAAO,EAAY,SAAS,EAAuB,MAAM,OAAO,CAAC;AAKjE,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,eAAO,MAAM,UAAU,GACrB,OAAO;IACL,GAAG,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACpC,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,cAAc,EAAE,KAAK,IAAI,CAAC;IAC9D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,GAAG,IAAI,CACN,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC,CAAC,CAAC,EAC5B,UAAU,GAAG,KAAK,GAAG,OAAO,GAAG,OAAO,GAAG,UAAU,GAAG,UAAU,CACjE,4CAoJF,CAAC"}

package/Checkmarks.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "./Button";
+import Menu from "@mui/material/Menu";
+import MenuItem from "@mui/material/MenuItem";
+import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
+import ArrowDropUpIcon from "@mui/icons-material/ArrowDropUp";
+import { Fragment, useEffect, useState } from "react";
+import { Typography } from "./Typography";
+import { useWPTheme } from "./ThemeRegistry";
+import { Checkbox } from "./Checkbox";
+export const Checkmarks = (props) => {
+    const { onChange, label, ref: buttonRef, size, showArrowIcon = true, disabled = false, values = [], ...rest } = props;
+    const fontSize = size == "medium" ? 14 : 12;
+    const { wpTheme } = useWPTheme();
+    const [anchorEl, setAnchorEl] = useState(null);
+    const open = Boolean(anchorEl);
+    const [selectedValues, setSelectedValues] = useState(values);
+    const [buttonWidth, setButtonWidth] = useState("100px");
+    const [items, setItems] = useState();
+    const handleClick = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+    const handleToggle = (value, item) => {
+        const newSelectedValues = selectedValues.includes(value)
+            ? selectedValues.filter((v) => v !== value)
+            : [...selectedValues, value];
+        setSelectedValues(newSelectedValues);
+        const selectedItems = props.items.filter((item) => newSelectedValues.includes(item.value));
+        onChange(newSelectedValues, selectedItems);
+    };
+    useEffect(() => {
+        setSelectedValues(values);
+    }, [values]);
+    useEffect(() => {
+        setItems(props.items);
+    }, [props.items]);
+    const buttonLabel = selectedValues.length > 0
+        ? `${selectedValues.length} selected`
+        : label || "Select items";
+    return (_jsxs(Fragment, { children: [_jsxs(Button, { ...rest, id: "checkmarks-button", size: "small", disabled: disabled, "aria-controls": open ? "checkmarks-menu" : undefined, "aria-haspopup": "true", "aria-expanded": open ? "true" : undefined, onClick: handleClick, sx: {
+                    textTransform: "none",
+                    border: "1px solid",
+                    borderColor: wpTheme.border.color,
+                    justifyContent: "space-between",
+                    height: size == "medium" ? 32 : 24,
+                    backgroundColor: wpTheme.background.color,
+                    color: wpTheme.text.color,
+                    ...rest.sx,
+                }, ref: (ref) => {
+                    if (ref) {
+                        setButtonWidth(ref.clientWidth + "px");
+                        if (buttonRef) {
+                            buttonRef.current = ref;
+                        }
+                    }
+                }, children: [_jsx(Typography, { fontSize: fontSize, sx: {
+                            ...(disabled ? { opacity: 0.5 } : {}),
+                        }, children: buttonLabel }), disabled === false && (_jsxs(_Fragment, { children: [showArrowIcon && !open && _jsx(ArrowDropDownIcon, { fontSize: "small" }), showArrowIcon && open && _jsx(ArrowDropUpIcon, { fontSize: "small" })] }))] }), _jsx(Menu, { id: "checkmarks-menu", anchorEl: anchorEl, open: disabled === true ? false : open, onClose: handleClose, sx: {
+                    width: "100%",
+                }, children: items?.map((item, index) => {
+                    const isChecked = selectedValues.includes(item.value);
+                    return (_jsxs(MenuItem, { onClick: (e) => {
+                            handleToggle(item.value, item);
+                        }, sx: {
+                            width: buttonWidth,
+                        }, children: [_jsx(Checkbox, { checked: isChecked, size: size, sx: {
+                                    padding: 0,
+                                    marginRight: 1,
+                                } }), _jsx(Typography, { fontSize: fontSize, sx: {
+                                    minHeight: size == "medium" ? 20 : 16,
+                                }, component: "div", children: item.label })] }, index));
+                }) })] }, label));
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rnaga/wp-next-ui",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "scripts": {
     "build": "node ../../scripts/build-ui.mjs",
     "release-old": "node ../../scripts/release.mjs",