@react-md/core 1.0.0-next.0

package/dist/form/MenuItemCheckbox.js

@@ -0,0 +1,43 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { MenuItemInputToggle } from "./MenuItemInputToggle.js";
+/**
+ * **Client Component**
+ *
+ * This is a simple wrapper for the {@link MenuItemInputToggle} component to
+ * render it as a checkbox and pulling the checkbox icon from the
+ * {@link ICON_CONFIG}.
+ *
+ * @example
+ * Simple Example
+ * ```tsx
+ * import { DropdownMenu, MenuItemCheckbox } from "@react-md/core";
+ * import { ReactElement, useState } from "react";
+ *
+ * function Example(): ReactElement {
+ *   const [checked, setChecked] = useState(false);
+ *
+ *   return (
+ *     <DropdownMenu buttonChildren="Button">
+ *       <MenuItemCheckbox
+ *         checked={checked}
+ *         onCheckedChange={(nextChecked) => setChecked(nextChecked)}
+ *       >
+ *         Checkbox
+ *      </MenuItemCheckbox>
+ *     </DropdownMenu>
+ *   );
+ * }
+ * ```
+ *
+ * @remarks \@since 2.8.0
+ */ export const MenuItemCheckbox = /*#__PURE__*/ forwardRef(function MenuItemCheckbox(props, ref) {
+    return /*#__PURE__*/ _jsx(MenuItemInputToggle, {
+        ...props,
+        ref: ref,
+        type: "checkbox"
+    });
+});
+
+//# sourceMappingURL=MenuItemCheckbox.js.map

package/dist/form/MenuItemCheckbox.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/form/MenuItemCheckbox.tsx"],"sourcesContent":["\"use client\";\nimport { forwardRef } from \"react\";\nimport {\n  MenuItemInputToggle,\n  type MenuItemCheckboxProps,\n} from \"./MenuItemInputToggle.js\";\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { type ICON_CONFIG } from \"../icon/iconConfig.js\";\n\n/**\n * **Client Component**\n *\n * This is a simple wrapper for the {@link MenuItemInputToggle} component to\n * render it as a checkbox and pulling the checkbox icon from the\n * {@link ICON_CONFIG}.\n *\n * @example\n * Simple Example\n * ```tsx\n * import { DropdownMenu, MenuItemCheckbox } from \"@react-md/core\";\n * import { ReactElement, useState } from \"react\";\n *\n * function Example(): ReactElement {\n *   const [checked, setChecked] = useState(false);\n *\n *   return (\n *     <DropdownMenu buttonChildren=\"Button\">\n *       <MenuItemCheckbox\n *         checked={checked}\n *         onCheckedChange={(nextChecked) => setChecked(nextChecked)}\n *       >\n *         Checkbox\n *      </MenuItemCheckbox>\n *     </DropdownMenu>\n *   );\n * }\n * ```\n *\n * @remarks \\@since 2.8.0\n */\nexport const MenuItemCheckbox = forwardRef<\n  HTMLLIElement,\n  MenuItemCheckboxProps\n>(function MenuItemCheckbox(props, ref) {\n  return <MenuItemInputToggle {...props} ref={ref} type=\"checkbox\" />;\n});\n"],"names":["forwardRef","MenuItemInputToggle","MenuItemCheckbox","props","ref","type"],"mappings":"AAAA;;AACA,SAASA,UAAU,QAAQ,QAAQ;AACnC,SACEC,mBAAmB,QAEd,2BAA2B;AAIlC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8BC,GACD,OAAO,MAAMC,iCAAmBF,WAG9B,SAASE,iBAAiBC,KAAK,EAAEC,GAAG;IACpC,qBAAO,KAACH;QAAqB,GAAGE,KAAK;QAAEC,KAAKA;QAAKC,MAAK;;AACxD,GAAG"}

package/dist/form/MenuItemFileInput.d.ts

@@ -0,0 +1,48 @@
+import { type ChangeEventHandler, type InputHTMLAttributes } from "react";
+import { type MenuItemProps } from "../menu/MenuItem.js";
+/**
+ * @remarks \@since 6.0.0 Removed most of the shared `FileInputProps` from this
+ * implementation.
+ */
+export interface MenuItemFileInputProps extends Omit<MenuItemProps, "onChange"> {
+    /**
+     * A change event handler that should do something with the selected files.
+     * Usually the `onChange` returned by `useFileUpload` or:
+     *
+     * ```ts
+     * onChange={(event) => {
+     *   const { files } = event.currentTarget;
+     *   // do something with files
+     * }}
+     * ```
+     *
+     * @remarks
+     * This is actually a native `Event` and not a `SyntheticEvent` because the
+     * file input is created through `document.createElement` instead of `React`.
+     * You can still access the files through `event.currentTarget.files` like
+     * normal.
+     */
+    onChange: ChangeEventHandler<HTMLInputElement>;
+    accept?: InputHTMLAttributes<HTMLInputElement>["accept"];
+    capture?: InputHTMLAttributes<HTMLInputElement>["capture"];
+    multiple?: InputHTMLAttributes<HTMLInputElement>["multiple"];
+    /**
+     * Set this to `true` if the `Menu` should not close when the file input's
+     * menu item is clicked.
+     *
+     * @defaultValue `false`
+     */
+    preventMenuHideOnClick?: boolean;
+}
+/**
+ * **Client Component**
+ *
+ * A wrapper for the `<input type="file">` element that works within menus.
+ *
+ * @remarks
+ * \@since 5.0.0
+ * \@since 6.0.0 No longer creates an invisible file input element within the
+ * menu item. This allows the menu to be closed immediately when this menu item
+ * is clicked.
+ */
+export declare const MenuItemFileInput: import("react").ForwardRefExoticComponent<MenuItemFileInputProps & import("react").RefAttributes<HTMLLIElement>>;

package/dist/form/MenuItemFileInput.js

@@ -0,0 +1,50 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { getIcon } from "../icon/iconConfig.js";
+import { MenuItem } from "../menu/MenuItem.js";
+import { useEnsuredId } from "../useEnsuredId.js";
+const noop = ()=>{
+// do nothing
+};
+/**
+ * **Client Component**
+ *
+ * A wrapper for the `<input type="file">` element that works within menus.
+ *
+ * @remarks
+ * \@since 5.0.0
+ * \@since 6.0.0 No longer creates an invisible file input element within the
+ * menu item. This allows the menu to be closed immediately when this menu item
+ * is clicked.
+ */ export const MenuItemFileInput = /*#__PURE__*/ forwardRef(function MenuItemFileInput(props, ref) {
+    const { id: propId, onClick = noop, onChange, accept = "", multiple = false, children, leftAddon: propLeftAddon, preventMenuHideOnClick = false, ...remaining } = props;
+    const id = useEnsuredId(propId, "menu-item");
+    const leftAddon = getIcon("upload", propLeftAddon);
+    return /*#__PURE__*/ _jsx(MenuItem, {
+        ...remaining,
+        id: id,
+        ref: ref,
+        leftAddon: leftAddon,
+        onClick: (event)=>{
+            onClick(event);
+            if (preventMenuHideOnClick) {
+                event.stopPropagation();
+            }
+            // create a temporary file input element and click it to trigger the
+            // file upload behavior.
+            let input = document.createElement("input");
+            input.type = "file";
+            input.accept = accept;
+            input.multiple = multiple;
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-expect-error
+            input.onchange = onChange;
+            input.click();
+            input = null;
+        },
+        children: children
+    });
+});
+
+//# sourceMappingURL=MenuItemFileInput.js.map

package/dist/form/MenuItemFileInput.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/form/MenuItemFileInput.tsx"],"sourcesContent":["\"use client\";\nimport {\n  forwardRef,\n  type ChangeEventHandler,\n  type InputHTMLAttributes,\n} from \"react\";\nimport { getIcon } from \"../icon/iconConfig.js\";\nimport { MenuItem, type MenuItemProps } from \"../menu/MenuItem.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @remarks \\@since 6.0.0 Removed most of the shared `FileInputProps` from this\n * implementation.\n */\nexport interface MenuItemFileInputProps\n  extends Omit<MenuItemProps, \"onChange\"> {\n  /**\n   * A change event handler that should do something with the selected files.\n   * Usually the `onChange` returned by `useFileUpload` or:\n   *\n   * ```ts\n   * onChange={(event) => {\n   *   const { files } = event.currentTarget;\n   *   // do something with files\n   * }}\n   * ```\n   *\n   * @remarks\n   * This is actually a native `Event` and not a `SyntheticEvent` because the\n   * file input is created through `document.createElement` instead of `React`.\n   * You can still access the files through `event.currentTarget.files` like\n   * normal.\n   */\n  onChange: ChangeEventHandler<HTMLInputElement>;\n\n  accept?: InputHTMLAttributes<HTMLInputElement>[\"accept\"];\n  capture?: InputHTMLAttributes<HTMLInputElement>[\"capture\"];\n  multiple?: InputHTMLAttributes<HTMLInputElement>[\"multiple\"];\n\n  /**\n   * Set this to `true` if the `Menu` should not close when the file input's\n   * menu item is clicked.\n   *\n   * @defaultValue `false`\n   */\n  preventMenuHideOnClick?: boolean;\n}\n\n/**\n * **Client Component**\n *\n * A wrapper for the `<input type=\"file\">` element that works within menus.\n *\n * @remarks\n * \\@since 5.0.0\n * \\@since 6.0.0 No longer creates an invisible file input element within the\n * menu item. This allows the menu to be closed immediately when this menu item\n * is clicked.\n */\nexport const MenuItemFileInput = forwardRef<\n  HTMLLIElement,\n  MenuItemFileInputProps\n>(function MenuItemFileInput(props, ref) {\n  const {\n    id: propId,\n    onClick = noop,\n    onChange,\n    accept = \"\",\n    multiple = false,\n    children,\n    leftAddon: propLeftAddon,\n    preventMenuHideOnClick = false,\n    ...remaining\n  } = props;\n\n  const id = useEnsuredId(propId, \"menu-item\");\n  const leftAddon = getIcon(\"upload\", propLeftAddon);\n\n  return (\n    <MenuItem\n      {...remaining}\n      id={id}\n      ref={ref}\n      leftAddon={leftAddon}\n      onClick={(event) => {\n        onClick(event);\n\n        if (preventMenuHideOnClick) {\n          event.stopPropagation();\n        }\n\n        // create a temporary file input element and click it to trigger the\n        // file upload behavior.\n        let input: HTMLInputElement | null = document.createElement(\"input\");\n        input.type = \"file\";\n        input.accept = accept;\n        input.multiple = multiple;\n\n        // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n        // @ts-expect-error\n        input.onchange = onChange;\n        input.click();\n        input = null;\n      }}\n    >\n      {children}\n    </MenuItem>\n  );\n});\n"],"names":["forwardRef","getIcon","MenuItem","useEnsuredId","noop","MenuItemFileInput","props","ref","id","propId","onClick","onChange","accept","multiple","children","leftAddon","propLeftAddon","preventMenuHideOnClick","remaining","event","stopPropagation","input","document","createElement","type","onchange","click"],"mappings":"AAAA;;AACA,SACEA,UAAU,QAGL,QAAQ;AACf,SAASC,OAAO,QAAQ,wBAAwB;AAChD,SAASC,QAAQ,QAA4B,sBAAsB;AACnE,SAASC,YAAY,QAAQ,qBAAqB;AAElD,MAAMC,OAAO;AACX,aAAa;AACf;AAwCA;;;;;;;;;;CAUC,GACD,OAAO,MAAMC,kCAAoBL,WAG/B,SAASK,kBAAkBC,KAAK,EAAEC,GAAG;IACrC,MAAM,EACJC,IAAIC,MAAM,EACVC,UAAUN,IAAI,EACdO,QAAQ,EACRC,SAAS,EAAE,EACXC,WAAW,KAAK,EAChBC,QAAQ,EACRC,WAAWC,aAAa,EACxBC,yBAAyB,KAAK,EAC9B,GAAGC,WACJ,GAAGZ;IAEJ,MAAME,KAAKL,aAAaM,QAAQ;IAChC,MAAMM,YAAYd,QAAQ,UAAUe;IAEpC,qBACE,KAACd;QACE,GAAGgB,SAAS;QACbV,IAAIA;QACJD,KAAKA;QACLQ,WAAWA;QACXL,SAAS,CAACS;YACRT,QAAQS;YAER,IAAIF,wBAAwB;gBAC1BE,MAAMC,eAAe;YACvB;YAEA,oEAAoE;YACpE,wBAAwB;YACxB,IAAIC,QAAiCC,SAASC,aAAa,CAAC;YAC5DF,MAAMG,IAAI,GAAG;YACbH,MAAMT,MAAM,GAAGA;YACfS,MAAMR,QAAQ,GAAGA;YAEjB,6DAA6D;YAC7D,mBAAmB;YACnBQ,MAAMI,QAAQ,GAAGd;YACjBU,MAAMK,KAAK;YACXL,QAAQ;QACV;kBAECP;;AAGP,GAAG"}

package/dist/form/MenuItemInputToggle.d.ts

@@ -0,0 +1,104 @@
+import { type CSSProperties, type HTMLAttributes, type MouseEvent, type ReactNode } from "react";
+import { type ListItemAddonPosition, type ListItemAddonType, type ListItemHeight } from "../list/types.js";
+import { type PropsWithRef } from "../types.js";
+import { type IndeterminateCheckboxProps, type InputToggleIconProps } from "./InputToggle.js";
+import { type InputToggleSize } from "./inputToggleStyles.js";
+/** @remarks \@since 6.0.0 */
+export interface MenuItemInputToggleClassNameOptions {
+    className?: string;
+    type: "radio" | "checkbox" | "switch";
+}
+/**
+ * @remarks \@since 6.0.0
+ */
+export declare function menuItemInputToggle(options: MenuItemInputToggleClassNameOptions): string;
+/**
+ * @remarks \@since 6.0.0
+ */
+export type MenuItemInputToggleCheckedCallback = (checked: boolean, event: MouseEvent<HTMLLIElement>) => void;
+/** @remarks \@since 2.8.0 */
+export interface BaseMenuItemInputToggleProps extends HTMLAttributes<HTMLLIElement>, InputToggleIconProps {
+    checked: boolean;
+    onCheckedChange: MenuItemInputToggleCheckedCallback;
+    /**
+     * @defaultValue `"menu-item-" + useId()`
+     */
+    id?: string;
+    /** @defaultValue `false` */
+    disabled?: boolean;
+    /**
+     * Set this to `true` if the `Menu` should not close when the input toggle is
+     * clicked. This can be useful when interacting with a checkbox group within a
+     * menu or allowing the user to select multiple options before closing the
+     * menu.
+     *
+     * @defaultValue `false`
+     */
+    preventMenuHideOnClick?: boolean;
+    /**
+     * This is set to `"auto"` by default so the icon shrinks back down to the
+     * default icon size instead of relative to the current font size. You
+     * probably don't want to change this since it'll also modify the height of
+     * the menu item
+     *
+     * @defaultValue `"auto"`
+     */
+    size?: InputToggleSize;
+    /** @defaultValue `"auto"` */
+    height?: ListItemHeight;
+    /** @defaultValue `false` */
+    threeLines?: boolean;
+    /** @defaultValue `false` */
+    disableTextChildren?: boolean;
+    /** @defaultValue `false` */
+    iconAfter?: boolean;
+    addon?: ReactNode;
+    addonType?: ListItemAddonType;
+    addonPosition?: ListItemAddonPosition;
+    /** @defaultValue `false` */
+    addonForceWrap?: boolean;
+    /** @defaultValue `false` */
+    disableAddonCenteredMedia?: boolean;
+}
+export interface MenuItemCheckboxProps extends BaseMenuItemInputToggleProps, IndeterminateCheckboxProps {
+}
+export type MenuItemRadioProps = BaseMenuItemInputToggleProps;
+/**
+ * @remarks
+ * \@since 2.8.0
+ * \@since 6.0.0 Added additional props for styling the track and ball.
+ */
+export interface MenuItemSwitchProps extends BaseMenuItemInputToggleProps {
+    trackProps?: PropsWithRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+    trackStyle?: CSSProperties;
+    trackClassName?: string;
+    ballProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;
+    ballStyle?: CSSProperties;
+    ballClassName?: string;
+}
+/**
+ * @remarks
+ * \@since 2.8.0
+ * \@since 6.0.0 Updated to be a union of the different props to enforce the
+ * correct props based on `type`
+ */
+export type MenuItemInputToggleProps = (MenuItemCheckboxProps & {
+    type: "checkbox";
+}) | (MenuItemRadioProps & {
+    type: "radio";
+}) | (MenuItemSwitchProps & {
+    type: "switch";
+});
+/**
+ * **Client Component**
+ *
+ * This is a low-level component that should probably not be used externally and
+ * instead the `MenuItemCheckbox`, `MenuItemRadio`, or `MenuItemSwitch` should
+ * be used instead.
+ *
+ * @see {@link MenuItemCheckbox} for checkbox examples
+ * @see {@link MenuItemRadio} for radio examples
+ * @see {@link MenuItemSwitch} for switch examples
+ * @remarks \@since 2.8.0
+ */
+export declare const MenuItemInputToggle: import("react").ForwardRefExoticComponent<MenuItemInputToggleProps & import("react").RefAttributes<HTMLLIElement>>;

package/dist/form/MenuItemInputToggle.js

@@ -0,0 +1,124 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cnb } from "cnbuilder";
+import { forwardRef } from "react";
+import { ListItem } from "../list/ListItem.js";
+import { useEnsuredId } from "../useEnsuredId.js";
+import { bem } from "../utils/bem.js";
+import { InputToggleIcon } from "./InputToggleIcon.js";
+import { SwitchTrack } from "./SwitchTrack.js";
+const noop = ()=>{
+// do nothing
+};
+const styles = bem("rmd-menu-item-input-toggle");
+/**
+ * @remarks \@since 6.0.0
+ */ export function menuItemInputToggle(options) {
+    const { className, type } = options;
+    return cnb(`rmd-${type}-menu-item`, styles({
+        switch: type === "switch"
+    }), className);
+}
+/**
+ * **Client Component**
+ *
+ * This is a low-level component that should probably not be used externally and
+ * instead the `MenuItemCheckbox`, `MenuItemRadio`, or `MenuItemSwitch` should
+ * be used instead.
+ *
+ * @see {@link MenuItemCheckbox} for checkbox examples
+ * @see {@link MenuItemRadio} for radio examples
+ * @see {@link MenuItemSwitch} for switch examples
+ * @remarks \@since 2.8.0
+ */ export const MenuItemInputToggle = /*#__PURE__*/ forwardRef(function MenuItemInputToggle(props, ref) {
+    const { id: propId, type, disabled = false, checked, onCheckedChange, preventMenuHideOnClick = false, onClick = noop, className, tabIndex = -1, children, size = "auto", icon: propIcon, iconAfter = false, iconProps, iconStyle, iconClassName, checkedIcon, indeterminate, indeterminateIcon, addon, addonType, addonPosition, addonForceWrap, disableAddonCenteredMedia, ballProps, ballStyle, ballClassName, trackProps, trackStyle, trackClassName, ...remaining } = props;
+    const id = useEnsuredId(propId, "menu-item");
+    let icon = propIcon;
+    if (typeof propIcon === "undefined") {
+        if (type === "switch") {
+            icon = /*#__PURE__*/ _jsx(SwitchTrack, {
+                style: trackStyle,
+                className: trackClassName,
+                ...trackProps,
+                active: checked,
+                ballProps: ballProps,
+                ballStyle: ballStyle,
+                ballClassName: cnb(styles("ball"), ballClassName)
+            });
+        } else {
+            icon = /*#__PURE__*/ _jsx(InputToggleIcon, {
+                style: iconStyle,
+                disableEm: true,
+                ...iconProps,
+                className: cnb(styles("icon"), iconClassName, iconProps?.className),
+                size: size,
+                type: type,
+                checked: checked,
+                disabled: disabled,
+                icon: propIcon,
+                checkedIcon: checkedIcon,
+                indeterminate: indeterminate,
+                indeterminateIcon: indeterminateIcon
+            });
+        }
+    }
+    let leftAddon;
+    let leftAddonType;
+    let leftAddonPosition;
+    let leftAddonForceWrap;
+    let disableLeftAddonCenteredMedia;
+    let rightAddon;
+    let rightAddonType;
+    let rightAddonPosition;
+    let rightAddonForceWrap;
+    let disableRightAddonCenteredMedia;
+    if (iconAfter) {
+        leftAddon = addon;
+        leftAddonType = addonType;
+        leftAddonPosition = addonPosition;
+        leftAddonForceWrap = addonForceWrap;
+        disableLeftAddonCenteredMedia = disableAddonCenteredMedia;
+        rightAddon = icon;
+    } else {
+        leftAddon = icon;
+        rightAddon = addon;
+        rightAddonType = addonType;
+        rightAddonPosition = addonPosition;
+        rightAddonForceWrap = addonForceWrap;
+        disableRightAddonCenteredMedia = disableAddonCenteredMedia;
+    }
+    return /*#__PURE__*/ _jsx(ListItem, {
+        ...remaining,
+        "aria-disabled": disabled || undefined,
+        // I'm not actually sure if this is correct
+        "aria-checked": indeterminate && checked ? "mixed" : checked,
+        id: id,
+        role: type === "radio" ? "menuitemradio" : "menuitemcheckbox",
+        onClick: (event)=>{
+            onClick(event);
+            onCheckedChange(!checked, event);
+            if (preventMenuHideOnClick) {
+                event.stopPropagation();
+            }
+        },
+        ref: ref,
+        className: menuItemInputToggle({
+            type,
+            className
+        }),
+        tabIndex: tabIndex,
+        leftAddon: leftAddon,
+        leftAddonType: leftAddonType,
+        leftAddonPosition: leftAddonPosition,
+        leftAddonForceWrap: leftAddonForceWrap,
+        disableLeftAddonCenteredMedia: disableLeftAddonCenteredMedia,
+        rightAddon: rightAddon,
+        rightAddonType: rightAddonType,
+        rightAddonPosition: rightAddonPosition,
+        rightAddonForceWrap: rightAddonForceWrap,
+        disableRightAddonCenteredMedia: disableRightAddonCenteredMedia,
+        children: children
+    });
+});
+
+//# sourceMappingURL=MenuItemInputToggle.js.map

package/dist/form/MenuItemInputToggle.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/form/MenuItemInputToggle.tsx"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport {\n  forwardRef,\n  type CSSProperties,\n  type HTMLAttributes,\n  type MouseEvent,\n  type ReactNode,\n} from \"react\";\nimport { ListItem } from \"../list/ListItem.js\";\nimport {\n  type ListItemAddonPosition,\n  type ListItemAddonType,\n  type ListItemHeight,\n} from \"../list/types.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { bem } from \"../utils/bem.js\";\nimport {\n  type IndeterminateCheckboxProps,\n  type InputToggleIconProps,\n} from \"./InputToggle.js\";\nimport { InputToggleIcon } from \"./InputToggleIcon.js\";\nimport { SwitchTrack } from \"./SwitchTrack.js\";\nimport { type InputToggleSize } from \"./inputToggleStyles.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\nconst styles = bem(\"rmd-menu-item-input-toggle\");\n\n/** @remarks \\@since 6.0.0 */\nexport interface MenuItemInputToggleClassNameOptions {\n  className?: string;\n  type: \"radio\" | \"checkbox\" | \"switch\";\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function menuItemInputToggle(\n  options: MenuItemInputToggleClassNameOptions\n): string {\n  const { className, type } = options;\n  return cnb(\n    `rmd-${type}-menu-item`,\n    styles({ switch: type === \"switch\" }),\n    className\n  );\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport type MenuItemInputToggleCheckedCallback = (\n  checked: boolean,\n  event: MouseEvent<HTMLLIElement>\n) => void;\n\n/** @remarks \\@since 2.8.0 */\nexport interface BaseMenuItemInputToggleProps\n  extends HTMLAttributes<HTMLLIElement>,\n    InputToggleIconProps {\n  checked: boolean;\n  onCheckedChange: MenuItemInputToggleCheckedCallback;\n\n  /**\n   * @defaultValue `\"menu-item-\" + useId()`\n   */\n  id?: string;\n\n  /** @defaultValue `false` */\n  disabled?: boolean;\n\n  /**\n   * Set this to `true` if the `Menu` should not close when the input toggle is\n   * clicked. This can be useful when interacting with a checkbox group within a\n   * menu or allowing the user to select multiple options before closing the\n   * menu.\n   *\n   * @defaultValue `false`\n   */\n  preventMenuHideOnClick?: boolean;\n\n  /**\n   * This is set to `\"auto\"` by default so the icon shrinks back down to the\n   * default icon size instead of relative to the current font size. You\n   * probably don't want to change this since it'll also modify the height of\n   * the menu item\n   *\n   * @defaultValue `\"auto\"`\n   */\n  size?: InputToggleSize;\n\n  /** @defaultValue `\"auto\"` */\n  height?: ListItemHeight;\n\n  /** @defaultValue `false` */\n  threeLines?: boolean;\n\n  /** @defaultValue `false` */\n  disableTextChildren?: boolean;\n\n  /** @defaultValue `false` */\n  iconAfter?: boolean;\n\n  addon?: ReactNode;\n  addonType?: ListItemAddonType;\n  addonPosition?: ListItemAddonPosition;\n\n  /** @defaultValue `false` */\n  addonForceWrap?: boolean;\n\n  /** @defaultValue `false` */\n  disableAddonCenteredMedia?: boolean;\n}\n\nexport interface MenuItemCheckboxProps\n  extends BaseMenuItemInputToggleProps,\n    IndeterminateCheckboxProps {}\n\nexport type MenuItemRadioProps = BaseMenuItemInputToggleProps;\n\n/**\n * @remarks\n * \\@since 2.8.0\n * \\@since 6.0.0 Added additional props for styling the track and ball.\n */\nexport interface MenuItemSwitchProps extends BaseMenuItemInputToggleProps {\n  trackProps?: PropsWithRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;\n  trackStyle?: CSSProperties;\n  trackClassName?: string;\n  ballProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;\n  ballStyle?: CSSProperties;\n  ballClassName?: string;\n}\n\n/**\n * @remarks\n * \\@since 2.8.0\n * \\@since 6.0.0 Updated to be a union of the different props to enforce the\n * correct props based on `type`\n */\nexport type MenuItemInputToggleProps =\n  | (MenuItemCheckboxProps & { type: \"checkbox\" })\n  | (MenuItemRadioProps & { type: \"radio\" })\n  | (MenuItemSwitchProps & { type: \"switch\" });\n\n/**\n * **Client Component**\n *\n * This is a low-level component that should probably not be used externally and\n * instead the `MenuItemCheckbox`, `MenuItemRadio`, or `MenuItemSwitch` should\n * be used instead.\n *\n * @see {@link MenuItemCheckbox} for checkbox examples\n * @see {@link MenuItemRadio} for radio examples\n * @see {@link MenuItemSwitch} for switch examples\n * @remarks \\@since 2.8.0\n */\nexport const MenuItemInputToggle = forwardRef<\n  HTMLLIElement,\n  MenuItemInputToggleProps\n>(function MenuItemInputToggle(props, ref) {\n  const {\n    id: propId,\n    type,\n    disabled = false,\n    checked,\n    onCheckedChange,\n    preventMenuHideOnClick = false,\n    onClick = noop,\n    className,\n    tabIndex = -1,\n    children,\n    size = \"auto\",\n    icon: propIcon,\n    iconAfter = false,\n    iconProps,\n    iconStyle,\n    iconClassName,\n    checkedIcon,\n    indeterminate,\n    indeterminateIcon,\n    addon,\n    addonType,\n    addonPosition,\n    addonForceWrap,\n    disableAddonCenteredMedia,\n    ballProps,\n    ballStyle,\n    ballClassName,\n    trackProps,\n    trackStyle,\n    trackClassName,\n    ...remaining\n  } = props as MenuItemSwitchProps &\n    MenuItemCheckboxProps & { type: \"checkbox\" | \"radio\" | \"switch\" };\n  const id = useEnsuredId(propId, \"menu-item\");\n\n  let icon = propIcon;\n  if (typeof propIcon === \"undefined\") {\n    if (type === \"switch\") {\n      icon = (\n        <SwitchTrack\n          style={trackStyle}\n          className={trackClassName}\n          {...trackProps}\n          active={checked}\n          ballProps={ballProps}\n          ballStyle={ballStyle}\n          ballClassName={cnb(styles(\"ball\"), ballClassName)}\n        />\n      );\n    } else {\n      icon = (\n        <InputToggleIcon\n          style={iconStyle}\n          disableEm\n          {...iconProps}\n          className={cnb(styles(\"icon\"), iconClassName, iconProps?.className)}\n          size={size}\n          type={type}\n          checked={checked}\n          disabled={disabled}\n          icon={propIcon}\n          checkedIcon={checkedIcon}\n          indeterminate={indeterminate}\n          indeterminateIcon={indeterminateIcon}\n        />\n      );\n    }\n  }\n\n  let leftAddon: ReactNode;\n  let leftAddonType: ListItemAddonType | undefined;\n  let leftAddonPosition: ListItemAddonPosition | undefined;\n  let leftAddonForceWrap: boolean | undefined;\n  let disableLeftAddonCenteredMedia: boolean | undefined;\n  let rightAddon: ReactNode;\n  let rightAddonType: ListItemAddonType | undefined;\n  let rightAddonPosition: ListItemAddonPosition | undefined;\n  let rightAddonForceWrap: boolean | undefined;\n  let disableRightAddonCenteredMedia: boolean | undefined;\n  if (iconAfter) {\n    leftAddon = addon;\n    leftAddonType = addonType;\n    leftAddonPosition = addonPosition;\n    leftAddonForceWrap = addonForceWrap;\n    disableLeftAddonCenteredMedia = disableAddonCenteredMedia;\n    rightAddon = icon;\n  } else {\n    leftAddon = icon;\n    rightAddon = addon;\n    rightAddonType = addonType;\n    rightAddonPosition = addonPosition;\n    rightAddonForceWrap = addonForceWrap;\n    disableRightAddonCenteredMedia = disableAddonCenteredMedia;\n  }\n\n  return (\n    <ListItem\n      {...remaining}\n      aria-disabled={disabled || undefined}\n      // I'm not actually sure if this is correct\n      aria-checked={indeterminate && checked ? \"mixed\" : checked}\n      id={id}\n      role={type === \"radio\" ? \"menuitemradio\" : \"menuitemcheckbox\"}\n      onClick={(event) => {\n        onClick(event);\n        onCheckedChange(!checked, event);\n\n        if (preventMenuHideOnClick) {\n          event.stopPropagation();\n        }\n      }}\n      ref={ref}\n      className={menuItemInputToggle({ type, className })}\n      tabIndex={tabIndex}\n      leftAddon={leftAddon}\n      leftAddonType={leftAddonType}\n      leftAddonPosition={leftAddonPosition}\n      leftAddonForceWrap={leftAddonForceWrap}\n      disableLeftAddonCenteredMedia={disableLeftAddonCenteredMedia}\n      rightAddon={rightAddon}\n      rightAddonType={rightAddonType}\n      rightAddonPosition={rightAddonPosition}\n      rightAddonForceWrap={rightAddonForceWrap}\n      disableRightAddonCenteredMedia={disableRightAddonCenteredMedia}\n    >\n      {children}\n    </ListItem>\n  );\n});\n"],"names":["cnb","forwardRef","ListItem","useEnsuredId","bem","InputToggleIcon","SwitchTrack","noop","styles","menuItemInputToggle","options","className","type","switch","MenuItemInputToggle","props","ref","id","propId","disabled","checked","onCheckedChange","preventMenuHideOnClick","onClick","tabIndex","children","size","icon","propIcon","iconAfter","iconProps","iconStyle","iconClassName","checkedIcon","indeterminate","indeterminateIcon","addon","addonType","addonPosition","addonForceWrap","disableAddonCenteredMedia","ballProps","ballStyle","ballClassName","trackProps","trackStyle","trackClassName","remaining","style","active","disableEm","leftAddon","leftAddonType","leftAddonPosition","leftAddonForceWrap","disableLeftAddonCenteredMedia","rightAddon","rightAddonType","rightAddonPosition","rightAddonForceWrap","disableRightAddonCenteredMedia","aria-disabled","undefined","aria-checked","role","event","stopPropagation"],"mappings":"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"}

package/dist/form/MenuItemRadio.d.ts

@@ -0,0 +1,105 @@
+/// <reference types="react" />
+/**
+ * **Client Component**
+ *
+ * This is a simple wrapper for the {@link MenuItemInputToggle} component to
+ * render it as a radio and pulling the radio icon from the
+ * {@link ICON_CONFIG}.
+ *
+ * If a menu or menubar contains more than one group of menuitemradio elements,
+ * or if the menu contains one group and other, unrelated menu items, authors
+ * SHOULD nest each set of related menuitemradio elements in an element using
+ * the group role, and authors SHOULD delimit the group from other menu items
+ * with an element using the separator role.
+ * @see {@link https://www.w3.org/TR/wai-aria-1.1/#menuitemradio}
+ *
+ * @example
+ * Only Radio Items
+ * ```tsx
+ * import { ReactElement, useState } from "react";
+ * import { DropdownMenu, MenuItemRadio } from "@react-md/core";
+ *
+ * function Example(): ReactElement {
+ *   const [value, setValue] = useState("value1");
+ *
+ *   return (
+ *     <DropdownMenu id="dropdown-menu-id" buttonChildren="Button">
+ *       <MenuItemRadio
+ *         id="radio-1"
+ *         checked={value === "value1"}
+ *         onCheckedChange={() => setValue("value1")}
+ *       >
+ *          Radio 1
+ *       </MenuItemRadio>
+ *       <MenuItemRadio
+ *         id="radio-2"
+ *         checked={value === "value2"}
+ *         onCheckedChange={() => setValue("value2")}
+ *       >
+ *         Radio 2
+ *       </MenuItemRadio>
+ *       <MenuItemRadio
+ *         id="radio-3"
+ *         checked={value === "value3"}
+ *         onCheckedChange={() => setValue("value3")}
+ *       >
+ *         Radio 3
+ *       </MenuItemRadio>
+ *     </DropdownMenu>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * With Other Items
+ * ```tsx
+ * import {
+ *   DropdownMenu,
+ *   MenuItemGroup,
+ *   MenuItemRadio,
+ *   MenuItemSwitch,
+ *   MenuItemSeparator,
+ * } from "@react-md/core";
+ * import type { ReactElement } from "react";
+ * import { useState } from "react";
+ *
+ * function Example(): ReactElement {
+ *   const [value, setValue] = useState("value1");
+ *
+ *   return (
+ *     <DropdownMenu buttonChildren="Button">
+ *       <MenuItemSwitch
+ *         checked={checked}
+ *         onCheckedChange={nextChecked => setChecked(nextChecked)}
+ *       >
+ *         Light mode
+ *       </MenuItemSwitch>
+ *       <MenuItemSeparator />
+ *       <MenuItemGroup aria-label="My Group Label">
+ *         <MenuItemRadio
+ *           checked={value === "value1"}
+ *           onCheckedChange={() => setValue("value1")}
+ *         >
+ *           Radio 1
+ *         </MenuItemRadio>
+ *         <MenuItemRadio
+ *           checked={value === "value2"}
+ *           onCheckedChange={() => setValue("value2")}
+ *         >
+ *           Radio 2
+ *         </MenuItemRadio>
+ *         <MenuItemRadio
+ *           checked={value === "value3"}
+ *           onCheckedChange={() => setValue("value3")}
+ *         >
+ *           Radio 3
+ *         </MenuItemRadio>
+ *       </MenuItemGroup>
+ *     </DropdownMenu>
+ *   );
+ * }
+ * ```
+ *
+ * @remarks \@since 2.8.0
+ */
+export declare const MenuItemRadio: import("react").ForwardRefExoticComponent<import("./MenuItemInputToggle.js").BaseMenuItemInputToggleProps & import("react").RefAttributes<HTMLLIElement>>;

package/dist/form/MenuItemRadio.js

@@ -0,0 +1,115 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { MenuItemInputToggle } from "./MenuItemInputToggle.js";
+/**
+ * **Client Component**
+ *
+ * This is a simple wrapper for the {@link MenuItemInputToggle} component to
+ * render it as a radio and pulling the radio icon from the
+ * {@link ICON_CONFIG}.
+ *
+ * If a menu or menubar contains more than one group of menuitemradio elements,
+ * or if the menu contains one group and other, unrelated menu items, authors
+ * SHOULD nest each set of related menuitemradio elements in an element using
+ * the group role, and authors SHOULD delimit the group from other menu items
+ * with an element using the separator role.
+ * @see {@link https://www.w3.org/TR/wai-aria-1.1/#menuitemradio}
+ *
+ * @example
+ * Only Radio Items
+ * ```tsx
+ * import { ReactElement, useState } from "react";
+ * import { DropdownMenu, MenuItemRadio } from "@react-md/core";
+ *
+ * function Example(): ReactElement {
+ *   const [value, setValue] = useState("value1");
+ *
+ *   return (
+ *     <DropdownMenu id="dropdown-menu-id" buttonChildren="Button">
+ *       <MenuItemRadio
+ *         id="radio-1"
+ *         checked={value === "value1"}
+ *         onCheckedChange={() => setValue("value1")}
+ *       >
+ *          Radio 1
+ *       </MenuItemRadio>
+ *       <MenuItemRadio
+ *         id="radio-2"
+ *         checked={value === "value2"}
+ *         onCheckedChange={() => setValue("value2")}
+ *       >
+ *         Radio 2
+ *       </MenuItemRadio>
+ *       <MenuItemRadio
+ *         id="radio-3"
+ *         checked={value === "value3"}
+ *         onCheckedChange={() => setValue("value3")}
+ *       >
+ *         Radio 3
+ *       </MenuItemRadio>
+ *     </DropdownMenu>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * With Other Items
+ * ```tsx
+ * import {
+ *   DropdownMenu,
+ *   MenuItemGroup,
+ *   MenuItemRadio,
+ *   MenuItemSwitch,
+ *   MenuItemSeparator,
+ * } from "@react-md/core";
+ * import type { ReactElement } from "react";
+ * import { useState } from "react";
+ *
+ * function Example(): ReactElement {
+ *   const [value, setValue] = useState("value1");
+ *
+ *   return (
+ *     <DropdownMenu buttonChildren="Button">
+ *       <MenuItemSwitch
+ *         checked={checked}
+ *         onCheckedChange={nextChecked => setChecked(nextChecked)}
+ *       >
+ *         Light mode
+ *       </MenuItemSwitch>
+ *       <MenuItemSeparator />
+ *       <MenuItemGroup aria-label="My Group Label">
+ *         <MenuItemRadio
+ *           checked={value === "value1"}
+ *           onCheckedChange={() => setValue("value1")}
+ *         >
+ *           Radio 1
+ *         </MenuItemRadio>
+ *         <MenuItemRadio
+ *           checked={value === "value2"}
+ *           onCheckedChange={() => setValue("value2")}
+ *         >
+ *           Radio 2
+ *         </MenuItemRadio>
+ *         <MenuItemRadio
+ *           checked={value === "value3"}
+ *           onCheckedChange={() => setValue("value3")}
+ *         >
+ *           Radio 3
+ *         </MenuItemRadio>
+ *       </MenuItemGroup>
+ *     </DropdownMenu>
+ *   );
+ * }
+ * ```
+ *
+ * @remarks \@since 2.8.0
+ */ export const MenuItemRadio = /*#__PURE__*/ forwardRef(function MenuItemRadio(props, ref) {
+    return /*#__PURE__*/ _jsx(MenuItemInputToggle, {
+        ...props,
+        ref: ref,
+        type: "radio"
+    });
+});
+
+//# sourceMappingURL=MenuItemRadio.js.map

package/dist/form/MenuItemRadio.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/form/MenuItemRadio.tsx"],"sourcesContent":["\"use client\";\nimport { forwardRef } from \"react\";\nimport {\n  MenuItemInputToggle,\n  type MenuItemRadioProps,\n} from \"./MenuItemInputToggle.js\";\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { type ICON_CONFIG } from \"../icon/iconConfig.js\";\n\n/**\n * **Client Component**\n *\n * This is a simple wrapper for the {@link MenuItemInputToggle} component to\n * render it as a radio and pulling the radio icon from the\n * {@link ICON_CONFIG}.\n *\n * If a menu or menubar contains more than one group of menuitemradio elements,\n * or if the menu contains one group and other, unrelated menu items, authors\n * SHOULD nest each set of related menuitemradio elements in an element using\n * the group role, and authors SHOULD delimit the group from other menu items\n * with an element using the separator role.\n * @see {@link https://www.w3.org/TR/wai-aria-1.1/#menuitemradio}\n *\n * @example\n * Only Radio Items\n * ```tsx\n * import { ReactElement, useState } from \"react\";\n * import { DropdownMenu, MenuItemRadio } from \"@react-md/core\";\n *\n * function Example(): ReactElement {\n *   const [value, setValue] = useState(\"value1\");\n *\n *   return (\n *     <DropdownMenu id=\"dropdown-menu-id\" buttonChildren=\"Button\">\n *       <MenuItemRadio\n *         id=\"radio-1\"\n *         checked={value === \"value1\"}\n *         onCheckedChange={() => setValue(\"value1\")}\n *       >\n *          Radio 1\n *       </MenuItemRadio>\n *       <MenuItemRadio\n *         id=\"radio-2\"\n *         checked={value === \"value2\"}\n *         onCheckedChange={() => setValue(\"value2\")}\n *       >\n *         Radio 2\n *       </MenuItemRadio>\n *       <MenuItemRadio\n *         id=\"radio-3\"\n *         checked={value === \"value3\"}\n *         onCheckedChange={() => setValue(\"value3\")}\n *       >\n *         Radio 3\n *       </MenuItemRadio>\n *     </DropdownMenu>\n *   );\n * }\n * ```\n *\n * @example\n * With Other Items\n * ```tsx\n * import {\n *   DropdownMenu,\n *   MenuItemGroup,\n *   MenuItemRadio,\n *   MenuItemSwitch,\n *   MenuItemSeparator,\n * } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n * import { useState } from \"react\";\n *\n * function Example(): ReactElement {\n *   const [value, setValue] = useState(\"value1\");\n *\n *   return (\n *     <DropdownMenu buttonChildren=\"Button\">\n *       <MenuItemSwitch\n *         checked={checked}\n *         onCheckedChange={nextChecked => setChecked(nextChecked)}\n *       >\n *         Light mode\n *       </MenuItemSwitch>\n *       <MenuItemSeparator />\n *       <MenuItemGroup aria-label=\"My Group Label\">\n *         <MenuItemRadio\n *           checked={value === \"value1\"}\n *           onCheckedChange={() => setValue(\"value1\")}\n *         >\n *           Radio 1\n *         </MenuItemRadio>\n *         <MenuItemRadio\n *           checked={value === \"value2\"}\n *           onCheckedChange={() => setValue(\"value2\")}\n *         >\n *           Radio 2\n *         </MenuItemRadio>\n *         <MenuItemRadio\n *           checked={value === \"value3\"}\n *           onCheckedChange={() => setValue(\"value3\")}\n *         >\n *           Radio 3\n *         </MenuItemRadio>\n *       </MenuItemGroup>\n *     </DropdownMenu>\n *   );\n * }\n * ```\n *\n * @remarks \\@since 2.8.0\n */\nexport const MenuItemRadio = forwardRef<HTMLLIElement, MenuItemRadioProps>(\n  function MenuItemRadio(props, ref) {\n    return <MenuItemInputToggle {...props} ref={ref} type=\"radio\" />;\n  }\n);\n"],"names":["forwardRef","MenuItemInputToggle","MenuItemRadio","props","ref","type"],"mappings":"AAAA;;AACA,SAASA,UAAU,QAAQ,QAAQ;AACnC,SACEC,mBAAmB,QAEd,2BAA2B;AAIlC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsGC,GACD,OAAO,MAAMC,8BAAgBF,WAC3B,SAASE,cAAcC,KAAK,EAAEC,GAAG;IAC/B,qBAAO,KAACH;QAAqB,GAAGE,KAAK;QAAEC,KAAKA;QAAKC,MAAK;;AACxD,GACA"}