@react-md/core 1.0.0-next.0

package/dist/interaction/useElementInteraction.d.ts

@@ -0,0 +1,119 @@
+import type { ReactElement } from "react";
+import type { ElementInteractionHandlers } from "./types.js";
+declare module "react" {
+    interface CSSProperties {
+        "--rmd-surface-inset"?: string | number;
+        "--rmd-surface-border-radius"?: string | number;
+    }
+}
+/** @remarks \@since 6.0.0 */
+export declare const PRESSED_CLASS_NAME = "rmd-pressed";
+/** @remarks \@since 6.0.0 */
+export interface ElementInteractionOptions<E extends HTMLElement> extends Partial<ElementInteractionHandlers<E>> {
+    /**
+     * Boolean if the element is currently disabled which will prevent any of the
+     * element interaction states from happening.
+     *
+     * @defaultValue `false`
+     */
+    disabled?: boolean;
+}
+/** @remarks \@since 6.0.0 */
+export interface ElementInteractionHookReturnValue<E extends HTMLElement> {
+    /**
+     * The event handlers required for element interaction.
+     */
+    handlers: Readonly<ElementInteractionHandlers<E>>;
+    /**
+     * Boolean if the element is currently pressed. This will always be `false` if
+     * the {@link ElementInteractionMode} is set to `"none"`
+     */
+    pressed: boolean;
+    /**
+     * This will be set to {@link PRESSED_CLASS_NAME} only when {@link pressed} is
+     * `true` and the {@link ElementInteractionMode} is set to `"press"`. It will
+     * be `undefined` otherwise.
+     */
+    pressedClassName: string | undefined;
+    /**
+     * The ripple click/touch interaction. This will be `undefined` when the {@Link ElementInteractionMode}
+     * is set to `"none"` or `"press"`.
+     */
+    ripples?: ReactElement;
+}
+/**
+ * This hook is used to apply the required element interaction based on the
+ * {@link ElementInteractionMode} and should generally be used internally only.
+ *
+ * @example
+ * Providing Element Interaction
+ * ```tsx
+ * import { useElementInteraction } from "@react-md/core";
+ * import { cnb } from "cnbuilder";
+ * import type { ReactElement } from "react";
+ *
+ * import styles from "./CustomComponent.module.scss";
+ *
+ * interface Props extends HTMLAttributes<HTMLDivElement> {
+ *   disabled?: boolean;
+ * }
+ *
+ * function CustomComponent(props: Props): ReactElement {
+ *   const {
+ *     disabled = false,
+ *     className,
+ *     onBlur,
+ *     onClick,
+ *     onKeyDown,
+ *     onKeyUp,
+ *     onMouseDown,
+ *     onMouseUp,
+ *     onMouseLeave,
+ *     onTouchStart,
+ *     onTouchMove,
+ *     onTouchEnd,
+ *     ...remaining,
+ *   } = props;
+ *
+ *   const { handlers, pressed, ripples } =
+ *     useElementInteraction({
+ *       disabled,
+ *       // pass remaining props so that if any event handlers were provided to
+ *       // the component, they will be merged with the element interaction
+ *       // handlers
+ *       onBlur,
+ *       onClick,
+ *       onKeyDown,
+ *       onKeyUp,
+ *       onMouseDown,
+ *       onMouseUp,
+ *       onMouseLeave,
+ *       onTouchStart,
+ *       onTouchMove,
+ *       onTouchEnd,
+ *     })
+ *
+ *   return (
+ *     <div
+ *       {...remaining}
+ *       {...handlers}
+ *       aria-disabled={disabled}
+ *       role="button"
+ *       className={cnb(styles.button, pressed && styles.pressed)}
+ *       tabIndex={disabled ? undefined : 0}
+ *     >
+ *       {children}
+ *       {ripples}
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @param options - An object of {@link ElementInteractionOptions} that is used
+ * to merge event handlers or disable the interactions.
+ * @returns the {@link ElementInteractionHookReturnValue}
+ * @remarks \@since 6.0.0 Touch interactions were removed since it never looked
+ * good if the user touched a clickable element right before scrolling. The
+ * ripple effect will only be fired on click now for touch devices.
+ */
+export declare function useElementInteraction<E extends HTMLElement>(options?: ElementInteractionOptions<E>): ElementInteractionHookReturnValue<E>;

package/dist/interaction/useElementInteraction.js

@@ -0,0 +1,368 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useReducer, useRef } from "react";
+import { RippleContainer } from "./RippleContainer.js";
+import { useUserInteractionMode } from "./UserInteractionModeProvider.js";
+import { INTERACTION_CONFIG } from "./config.js";
+import { getRippleStyle, releaseRipple, updateRipplesState } from "./utils.js";
+/** @remarks \@since 6.0.0 */ export const PRESSED_CLASS_NAME = "rmd-pressed";
+const noop = ()=>{
+// do nothing
+};
+/**
+ * This hook is used to apply the required element interaction based on the
+ * {@link ElementInteractionMode} and should generally be used internally only.
+ *
+ * @example
+ * Providing Element Interaction
+ * ```tsx
+ * import { useElementInteraction } from "@react-md/core";
+ * import { cnb } from "cnbuilder";
+ * import type { ReactElement } from "react";
+ *
+ * import styles from "./CustomComponent.module.scss";
+ *
+ * interface Props extends HTMLAttributes<HTMLDivElement> {
+ *   disabled?: boolean;
+ * }
+ *
+ * function CustomComponent(props: Props): ReactElement {
+ *   const {
+ *     disabled = false,
+ *     className,
+ *     onBlur,
+ *     onClick,
+ *     onKeyDown,
+ *     onKeyUp,
+ *     onMouseDown,
+ *     onMouseUp,
+ *     onMouseLeave,
+ *     onTouchStart,
+ *     onTouchMove,
+ *     onTouchEnd,
+ *     ...remaining,
+ *   } = props;
+ *
+ *   const { handlers, pressed, ripples } =
+ *     useElementInteraction({
+ *       disabled,
+ *       // pass remaining props so that if any event handlers were provided to
+ *       // the component, they will be merged with the element interaction
+ *       // handlers
+ *       onBlur,
+ *       onClick,
+ *       onKeyDown,
+ *       onKeyUp,
+ *       onMouseDown,
+ *       onMouseUp,
+ *       onMouseLeave,
+ *       onTouchStart,
+ *       onTouchMove,
+ *       onTouchEnd,
+ *     })
+ *
+ *   return (
+ *     <div
+ *       {...remaining}
+ *       {...handlers}
+ *       aria-disabled={disabled}
+ *       role="button"
+ *       className={cnb(styles.button, pressed && styles.pressed)}
+ *       tabIndex={disabled ? undefined : 0}
+ *     >
+ *       {children}
+ *       {ripples}
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @param options - An object of {@link ElementInteractionOptions} that is used
+ * to merge event handlers or disable the interactions.
+ * @returns the {@link ElementInteractionHookReturnValue}
+ * @remarks \@since 6.0.0 Touch interactions were removed since it never looked
+ * good if the user touched a clickable element right before scrolling. The
+ * ripple effect will only be fired on click now for touch devices.
+ */ export function useElementInteraction(options = {}) {
+    const { onBlur = noop, onClick = noop, onMouseDown = noop, onMouseUp = noop, onMouseLeave = noop, onKeyUp = noop, onKeyDown = noop, onTouchStart = noop, onTouchEnd = noop, onTouchMove = noop, onDragStart = noop, disabled = false } = options;
+    const { mode } = INTERACTION_CONFIG;
+    const holding = useRef(false);
+    const disableClick = useRef(false);
+    const userMode = useUserInteractionMode();
+    const isInteractionDisabled = disabled || mode === "none";
+    const [state, dispatch] = useReducer(function reducer(state, action) {
+        switch(action.type){
+            case "press":
+                {
+                    const { style } = action;
+                    let { ripples } = state;
+                    if (style) {
+                        ripples = [
+                            ...ripples,
+                            {
+                                style,
+                                entered: false,
+                                exiting: false,
+                                startTime: Date.now()
+                            }
+                        ];
+                    }
+                    return {
+                        pressed: true,
+                        ripples
+                    };
+                }
+            case "cancel":
+                // Note: unlike previous react-md versions, this will immediately
+                // remove ALL ripple effects instead of trying to fade out. this seems
+                // much nicer for touch devices when they are trying to scroll
+                return {
+                    pressed: false,
+                    ripples: []
+                };
+            case "release":
+                {
+                    if (mode === "press") {
+                        return {
+                            ...state,
+                            pressed: false
+                        };
+                    }
+                    return releaseRipple(state);
+                }
+            case "entered":
+                return updateRipplesState({
+                    type: "entered",
+                    state,
+                    ripple: action.ripple,
+                    holding: holding.current
+                });
+            case "exited":
+                return updateRipplesState({
+                    type: "exited",
+                    state,
+                    ripple: action.ripple,
+                    holding: holding.current
+                });
+            default:
+                return state;
+        }
+    }, {
+        pressed: false,
+        ripples: []
+    });
+    const { pressed } = state;
+    let ripples;
+    if (mode == "ripple") {
+        ripples = /*#__PURE__*/ _jsx(RippleContainer, {
+            ripples: state.ripples,
+            onEntered: (ripple)=>{
+                dispatch({
+                    type: "entered",
+                    ripple
+                });
+            },
+            onExited: (ripple)=>{
+                dispatch({
+                    type: "exited",
+                    ripple
+                });
+            }
+        });
+    }
+    return {
+        pressed,
+        pressedClassName: pressed && mode === "press" ? PRESSED_CLASS_NAME : undefined,
+        ripples,
+        handlers: {
+            onBlur: useCallback((event)=>{
+                onBlur(event);
+                if (holding.current) {
+                    holding.current = false;
+                    dispatch({
+                        type: "release"
+                    });
+                }
+            }, [
+                onBlur
+            ]),
+            onClick: useCallback((event)=>{
+                if (disabled) {
+                    return;
+                }
+                onClick(event);
+                if (event.isPropagationStopped() || userMode === "touch" || mode !== "ripple" || disableClick.current || holding.current || document.activeElement === event.currentTarget) {
+                    disableClick.current = false;
+                    return;
+                }
+                dispatch({
+                    type: "press",
+                    style: getRippleStyle(event, true)
+                });
+            }, [
+                disabled,
+                mode,
+                onClick,
+                userMode
+            ]),
+            onMouseDown: useCallback((event)=>{
+                onMouseDown(event);
+                if (event.isPropagationStopped() || isInteractionDisabled || userMode !== "mouse" || event.shiftKey || event.ctrlKey || event.metaKey || event.altKey || event.button !== 0) {
+                    return;
+                }
+                // prevent text selection on double click
+                // https://stackoverflow.com/a/43321596
+                if (event.detail > 1) {
+                    event.preventDefault();
+                }
+                holding.current = true;
+                disableClick.current = true;
+                let style;
+                if (mode === "ripple") {
+                    style = getRippleStyle(event, false);
+                }
+                dispatch({
+                    type: "press",
+                    style
+                });
+            }, [
+                onMouseDown,
+                isInteractionDisabled,
+                userMode,
+                mode
+            ]),
+            onMouseUp: useCallback((event)=>{
+                onMouseUp(event);
+                if (event.isPropagationStopped() || isInteractionDisabled) {
+                    return;
+                }
+                holding.current = false;
+                dispatch({
+                    type: "release"
+                });
+            }, [
+                isInteractionDisabled,
+                onMouseUp
+            ]),
+            onMouseLeave: useCallback((event)=>{
+                onMouseLeave(event);
+                if (event.isPropagationStopped() || isInteractionDisabled || userMode !== "mouse" || !holding.current) {
+                    return;
+                }
+                holding.current = false;
+                dispatch({
+                    type: "cancel"
+                });
+            }, [
+                isInteractionDisabled,
+                onMouseLeave,
+                userMode
+            ]),
+            onDragStart (event) {
+                onDragStart(event);
+                if (event.isPropagationStopped() || !holding.current || userMode !== "mouse") {
+                    return;
+                }
+                holding.current = false;
+                dispatch({
+                    type: "cancel"
+                });
+            },
+            onKeyDown: useCallback((event)=>{
+                onKeyDown(event);
+                const { key } = event;
+                const { tagName } = event.currentTarget;
+                if (event.isPropagationStopped() || userMode !== "keyboard" || disabled || key !== " " && key !== "Enter" || // links do not support clicking on space
+                key === " " && tagName === "A" || // inputs submit a form instead of clicking on enter
+                key === "Enter" && tagName === "INPUT") {
+                    return;
+                }
+                // stop propagation since we're starting to do custom event behavior
+                // to click the element for everything except elements that the
+                // browser clicks natively
+                event.stopPropagation();
+                if (tagName !== "BUTTON" && tagName !== "A") {
+                    if (key === " ") {
+                        // prevent the pager from scrolling
+                        event.preventDefault();
+                    }
+                    event.currentTarget.click();
+                }
+                if (holding.current || isInteractionDisabled) {
+                    return;
+                }
+                holding.current = true;
+                dispatch({
+                    type: "press",
+                    style: getRippleStyle(event, false)
+                });
+            }, [
+                disabled,
+                isInteractionDisabled,
+                onKeyDown,
+                userMode
+            ]),
+            onKeyUp: useCallback((event)=>{
+                onKeyUp(event);
+                if (event.isPropagationStopped() || isInteractionDisabled || userMode !== "keyboard" || !holding.current) {
+                    return;
+                }
+                holding.current = false;
+                dispatch({
+                    type: "release"
+                });
+            }, [
+                isInteractionDisabled,
+                onKeyUp,
+                userMode
+            ]),
+            onTouchStart: useCallback((event)=>{
+                onTouchStart(event);
+                if (event.isPropagationStopped() || isInteractionDisabled) {
+                    return;
+                }
+                holding.current = true;
+                let style;
+                if (mode === "ripple") {
+                    style = getRippleStyle(event, false);
+                }
+                dispatch({
+                    type: "press",
+                    style
+                });
+            }, [
+                mode,
+                isInteractionDisabled,
+                onTouchStart
+            ]),
+            onTouchEnd: useCallback((event)=>{
+                onTouchEnd(event);
+                if (event.isPropagationStopped() || isInteractionDisabled) {
+                    return;
+                }
+                holding.current = false;
+                dispatch({
+                    type: "release"
+                });
+            }, [
+                isInteractionDisabled,
+                onTouchEnd
+            ]),
+            onTouchMove: useCallback((event)=>{
+                onTouchMove(event);
+                if (event.isPropagationStopped() || isInteractionDisabled) {
+                    return;
+                }
+                holding.current = false;
+                dispatch({
+                    type: "cancel"
+                });
+            }, [
+                isInteractionDisabled,
+                onTouchMove
+            ])
+        }
+    };
+}
+
+//# sourceMappingURL=useElementInteraction.js.map

package/dist/interaction/useElementInteraction.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/interaction/useElementInteraction.tsx"],"sourcesContent":["\"use client\";\nimport type {\n  FocusEvent,\n  KeyboardEvent,\n  MouseEvent,\n  ReactElement,\n  TouchEvent,\n} from \"react\";\nimport { useCallback, useReducer, useRef } from \"react\";\nimport { RippleContainer } from \"./RippleContainer.js\";\nimport { useUserInteractionMode } from \"./UserInteractionModeProvider.js\";\nimport { INTERACTION_CONFIG } from \"./config.js\";\nimport type {\n  ElementInteractionHandlers,\n  ElementInteractionState,\n  RippleState,\n  RippleStyle,\n} from \"./types.js\";\nimport { getRippleStyle, releaseRipple, updateRipplesState } from \"./utils.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-surface-inset\"?: string | number;\n    \"--rmd-surface-border-radius\"?: string | number;\n  }\n}\n\n/** @remarks \\@since 6.0.0 */\nexport const PRESSED_CLASS_NAME = \"rmd-pressed\";\n\n/** @remarks \\@since 6.0.0 */\nexport interface ElementInteractionOptions<E extends HTMLElement>\n  extends Partial<ElementInteractionHandlers<E>> {\n  /**\n   * Boolean if the element is currently disabled which will prevent any of the\n   * element interaction states from happening.\n   *\n   * @defaultValue `false`\n   */\n  disabled?: boolean;\n}\n\n/** @remarks \\@since 6.0.0 */\nexport interface ElementInteractionHookReturnValue<E extends HTMLElement> {\n  /**\n   * The event handlers required for element interaction.\n   */\n  handlers: Readonly<ElementInteractionHandlers<E>>;\n\n  /**\n   * Boolean if the element is currently pressed. This will always be `false` if\n   * the {@link ElementInteractionMode} is set to `\"none\"`\n   */\n  pressed: boolean;\n\n  /**\n   * This will be set to {@link PRESSED_CLASS_NAME} only when {@link pressed} is\n   * `true` and the {@link ElementInteractionMode} is set to `\"press\"`. It will\n   * be `undefined` otherwise.\n   */\n  pressedClassName: string | undefined;\n\n  /**\n   * The ripple click/touch interaction. This will be `undefined` when the {@Link ElementInteractionMode}\n   * is set to `\"none\"` or `\"press\"`.\n   */\n  ripples?: ReactElement;\n}\n\ntype ElementInteractionAction =\n  | { type: \"press\"; style?: RippleStyle; programmatic?: boolean }\n  | { type: \"release\" | \"cancel\" }\n  | { type: \"entered\" | \"exited\"; ripple: RippleState };\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * This hook is used to apply the required element interaction based on the\n * {@link ElementInteractionMode} and should generally be used internally only.\n *\n * @example\n * Providing Element Interaction\n * ```tsx\n * import { useElementInteraction } from \"@react-md/core\";\n * import { cnb } from \"cnbuilder\";\n * import type { ReactElement } from \"react\";\n *\n * import styles from \"./CustomComponent.module.scss\";\n *\n * interface Props extends HTMLAttributes<HTMLDivElement> {\n *   disabled?: boolean;\n * }\n *\n * function CustomComponent(props: Props): ReactElement {\n *   const {\n *     disabled = false,\n *     className,\n *     onBlur,\n *     onClick,\n *     onKeyDown,\n *     onKeyUp,\n *     onMouseDown,\n *     onMouseUp,\n *     onMouseLeave,\n *     onTouchStart,\n *     onTouchMove,\n *     onTouchEnd,\n *     ...remaining,\n *   } = props;\n *\n *   const { handlers, pressed, ripples } =\n *     useElementInteraction({\n *       disabled,\n *       // pass remaining props so that if any event handlers were provided to\n *       // the component, they will be merged with the element interaction\n *       // handlers\n *       onBlur,\n *       onClick,\n *       onKeyDown,\n *       onKeyUp,\n *       onMouseDown,\n *       onMouseUp,\n *       onMouseLeave,\n *       onTouchStart,\n *       onTouchMove,\n *       onTouchEnd,\n *     })\n *\n *   return (\n *     <div\n *       {...remaining}\n *       {...handlers}\n *       aria-disabled={disabled}\n *       role=\"button\"\n *       className={cnb(styles.button, pressed && styles.pressed)}\n *       tabIndex={disabled ? undefined : 0}\n *     >\n *       {children}\n *       {ripples}\n *     </div>\n *   );\n * }\n * ```\n *\n * @param options - An object of {@link ElementInteractionOptions} that is used\n * to merge event handlers or disable the interactions.\n * @returns the {@link ElementInteractionHookReturnValue}\n * @remarks \\@since 6.0.0 Touch interactions were removed since it never looked\n * good if the user touched a clickable element right before scrolling. The\n * ripple effect will only be fired on click now for touch devices.\n */\nexport function useElementInteraction<E extends HTMLElement>(\n  options: ElementInteractionOptions<E> = {}\n): ElementInteractionHookReturnValue<E> {\n  const {\n    onBlur = noop,\n    onClick = noop,\n    onMouseDown = noop,\n    onMouseUp = noop,\n    onMouseLeave = noop,\n    onKeyUp = noop,\n    onKeyDown = noop,\n    onTouchStart = noop,\n    onTouchEnd = noop,\n    onTouchMove = noop,\n    onDragStart = noop,\n    disabled = false,\n  } = options;\n\n  const { mode } = INTERACTION_CONFIG;\n\n  const holding = useRef(false);\n  const disableClick = useRef(false);\n  const userMode = useUserInteractionMode();\n  const isInteractionDisabled = disabled || mode === \"none\";\n  const [state, dispatch] = useReducer(\n    function reducer(\n      state: ElementInteractionState,\n      action: ElementInteractionAction\n    ): ElementInteractionState {\n      switch (action.type) {\n        case \"press\": {\n          const { style } = action;\n          let { ripples } = state;\n          if (style) {\n            ripples = [\n              ...ripples,\n              {\n                style,\n                entered: false,\n                exiting: false,\n                startTime: Date.now(),\n              },\n            ];\n          }\n\n          return {\n            pressed: true,\n            ripples,\n          };\n        }\n        case \"cancel\":\n          // Note: unlike previous react-md versions, this will immediately\n          // remove ALL ripple effects instead of trying to fade out. this seems\n          // much nicer for touch devices when they are trying to scroll\n          return {\n            pressed: false,\n            ripples: [],\n          };\n        case \"release\": {\n          if (mode === \"press\") {\n            return { ...state, pressed: false };\n          }\n\n          return releaseRipple(state);\n        }\n        case \"entered\":\n          return updateRipplesState({\n            type: \"entered\",\n            state,\n            ripple: action.ripple,\n            holding: holding.current,\n          });\n        case \"exited\":\n          return updateRipplesState({\n            type: \"exited\",\n            state,\n            ripple: action.ripple,\n            holding: holding.current,\n          });\n\n        default:\n          return state;\n      }\n    },\n    { pressed: false, ripples: [] }\n  );\n  const { pressed } = state;\n\n  let ripples: ReactElement | undefined;\n  if (mode == \"ripple\") {\n    ripples = (\n      <RippleContainer\n        ripples={state.ripples}\n        onEntered={(ripple) => {\n          dispatch({ type: \"entered\", ripple });\n        }}\n        onExited={(ripple) => {\n          dispatch({ type: \"exited\", ripple });\n        }}\n      />\n    );\n  }\n\n  return {\n    pressed,\n    pressedClassName:\n      pressed && mode === \"press\" ? PRESSED_CLASS_NAME : undefined,\n    ripples,\n    handlers: {\n      onBlur: useCallback(\n        (event: FocusEvent<E>) => {\n          onBlur(event);\n          if (holding.current) {\n            holding.current = false;\n            dispatch({ type: \"release\" });\n          }\n        },\n        [onBlur]\n      ),\n      onClick: useCallback(\n        (event: MouseEvent<E>) => {\n          if (disabled) {\n            return;\n          }\n\n          onClick(event);\n          if (\n            event.isPropagationStopped() ||\n            userMode === \"touch\" ||\n            mode !== \"ripple\" ||\n            disableClick.current ||\n            holding.current ||\n            document.activeElement === event.currentTarget\n          ) {\n            disableClick.current = false;\n            return;\n          }\n\n          dispatch({\n            type: \"press\",\n            style: getRippleStyle(event, true),\n          });\n        },\n        [disabled, mode, onClick, userMode]\n      ),\n      onMouseDown: useCallback(\n        (event: MouseEvent<E>) => {\n          onMouseDown(event);\n          if (\n            event.isPropagationStopped() ||\n            isInteractionDisabled ||\n            userMode !== \"mouse\" ||\n            event.shiftKey ||\n            event.ctrlKey ||\n            event.metaKey ||\n            event.altKey ||\n            event.button !== 0\n          ) {\n            return;\n          }\n\n          // prevent text selection on double click\n          // https://stackoverflow.com/a/43321596\n          if (event.detail > 1) {\n            event.preventDefault();\n          }\n\n          holding.current = true;\n          disableClick.current = true;\n          let style: RippleStyle | undefined;\n          if (mode === \"ripple\") {\n            style = getRippleStyle(event, false);\n          }\n\n          dispatch({ type: \"press\", style });\n        },\n        [onMouseDown, isInteractionDisabled, userMode, mode]\n      ),\n      onMouseUp: useCallback(\n        (event: MouseEvent<E>) => {\n          onMouseUp(event);\n          if (event.isPropagationStopped() || isInteractionDisabled) {\n            return;\n          }\n\n          holding.current = false;\n          dispatch({ type: \"release\" });\n        },\n        [isInteractionDisabled, onMouseUp]\n      ),\n      onMouseLeave: useCallback(\n        (event: MouseEvent<E>) => {\n          onMouseLeave(event);\n          if (\n            event.isPropagationStopped() ||\n            isInteractionDisabled ||\n            userMode !== \"mouse\" ||\n            !holding.current\n          ) {\n            return;\n          }\n\n          holding.current = false;\n          dispatch({ type: \"cancel\" });\n        },\n        [isInteractionDisabled, onMouseLeave, userMode]\n      ),\n      onDragStart(event) {\n        onDragStart(event);\n        if (\n          event.isPropagationStopped() ||\n          !holding.current ||\n          userMode !== \"mouse\"\n        ) {\n          return;\n        }\n\n        holding.current = false;\n        dispatch({ type: \"cancel\" });\n      },\n      onKeyDown: useCallback(\n        (event: KeyboardEvent<E>) => {\n          onKeyDown(event);\n          const { key } = event;\n          const { tagName } = event.currentTarget;\n\n          if (\n            event.isPropagationStopped() ||\n            userMode !== \"keyboard\" ||\n            disabled ||\n            (key !== \" \" && key !== \"Enter\") ||\n            // links do not support clicking on space\n            (key === \" \" && tagName === \"A\") ||\n            // inputs submit a form instead of clicking on enter\n            (key === \"Enter\" && tagName === \"INPUT\")\n          ) {\n            return;\n          }\n\n          // stop propagation since we're starting to do custom event behavior\n          // to click the element for everything except elements that the\n          // browser clicks natively\n          event.stopPropagation();\n\n          if (tagName !== \"BUTTON\" && tagName !== \"A\") {\n            if (key === \" \") {\n              // prevent the pager from scrolling\n              event.preventDefault();\n            }\n\n            event.currentTarget.click();\n          }\n\n          if (holding.current || isInteractionDisabled) {\n            return;\n          }\n\n          holding.current = true;\n          dispatch({ type: \"press\", style: getRippleStyle(event, false) });\n        },\n        [disabled, isInteractionDisabled, onKeyDown, userMode]\n      ),\n      onKeyUp: useCallback(\n        (event: KeyboardEvent<E>) => {\n          onKeyUp(event);\n          if (\n            event.isPropagationStopped() ||\n            isInteractionDisabled ||\n            userMode !== \"keyboard\" ||\n            !holding.current\n          ) {\n            return;\n          }\n\n          holding.current = false;\n          dispatch({ type: \"release\" });\n        },\n        [isInteractionDisabled, onKeyUp, userMode]\n      ),\n      onTouchStart: useCallback(\n        (event: TouchEvent<E>) => {\n          onTouchStart(event);\n          if (event.isPropagationStopped() || isInteractionDisabled) {\n            return;\n          }\n\n          holding.current = true;\n          let style: RippleStyle | undefined;\n          if (mode === \"ripple\") {\n            style = getRippleStyle(event, false);\n          }\n\n          dispatch({ type: \"press\", style });\n        },\n        [mode, isInteractionDisabled, onTouchStart]\n      ),\n      onTouchEnd: useCallback(\n        (event: TouchEvent<E>) => {\n          onTouchEnd(event);\n          if (event.isPropagationStopped() || isInteractionDisabled) {\n            return;\n          }\n\n          holding.current = false;\n          dispatch({ type: \"release\" });\n        },\n        [isInteractionDisabled, onTouchEnd]\n      ),\n      onTouchMove: useCallback(\n        (event: TouchEvent<E>) => {\n          onTouchMove(event);\n          if (event.isPropagationStopped() || isInteractionDisabled) {\n            return;\n          }\n\n          holding.current = false;\n          dispatch({ type: \"cancel\" });\n        },\n        [isInteractionDisabled, onTouchMove]\n      ),\n    },\n  };\n}\n"],"names":["useCallback","useReducer","useRef","RippleContainer","useUserInteractionMode","INTERACTION_CONFIG","getRippleStyle","releaseRipple","updateRipplesState","PRESSED_CLASS_NAME","noop","useElementInteraction","options","onBlur","onClick","onMouseDown","onMouseUp","onMouseLeave","onKeyUp","onKeyDown","onTouchStart","onTouchEnd","onTouchMove","onDragStart","disabled","mode","holding","disableClick","userMode","isInteractionDisabled","state","dispatch","reducer","action","type","style","ripples","entered","exiting","startTime","Date","now","pressed","ripple","current","onEntered","onExited","pressedClassName","undefined","handlers","event","isPropagationStopped","document","activeElement","currentTarget","shiftKey","ctrlKey","metaKey","altKey","button","detail","preventDefault","key","tagName","stopPropagation","click"],"mappings":"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"}

package/dist/interaction/useHigherContrastChildren.d.ts

@@ -0,0 +1,70 @@
+import { type ReactNode } from "react";
+/**
+ * This hook is used to wrap any `number` and `string` children with a `<span>`
+ * so that the ripple/hover/focus background colors do not cause the text to
+ * become dimmed.
+ *
+ * If the {@link INTERACTION_CONFIG.higherContrast} is set to `false`, this hook
+ * will just return the `children` unmodified.
+ *
+ * Note: This should generally be used with the {@link useElementInteraction}
+ * hook.
+ *
+ * @example
+ * Simple Example
+ * ```tsx
+ * import {
+ *   useElementInteraction,
+ *   useHigherContrastChildren,
+ * } from "@react-md/core";
+ * import type { ButtonHTMLAttributes, ReactElement, ReactNode } from "react";
+ *
+ * function Example(props: ButtonHTMLAttributes<HTMLButtonElement>): ReactElement {
+ *   const {
+ *     children: propChildren,
+ *     disabled = false,
+ *     onClick,
+ *     onKeyDown,
+ *     onKeyUp,
+ *     onMouseDown,
+ *     onMouseUp,
+ *     onMouseLeave,
+ *     onTouchStart,
+ *     onTouchEnd,
+ *     onTouchMove,
+ *     ...remaining
+ *   } = props;
+ *   const { pressedClassName, ripples, handlers } =
+ *     useElementInteraction({
+ *       disabled,
+ *       onClick,
+ *       onKeyDown,
+ *       onKeyUp,
+ *       onMouseDown,
+ *       onMouseUp,
+ *       onMouseLeave,
+ *       onTouchStart,
+ *       onTouchEnd,
+ *       onTouchMove,
+ *     });
+ *
+ *   const children = useHigherContrastChildren(propChildren)
+ *
+ *   return (
+ *     <button {...remaining} {...handlers} className={pressedClassName}>
+ *       {children}
+ *       {ripples}
+ *     </button>
+ *   );
+ * }
+ * ```
+ *
+ * @param propChildren - The children to conditionally wrap in spans.
+ * @param disable - Manually disable this functionality even if the higher
+ * contrast mode is enabled. This is really used within `ListItem`s so there
+ * aren't unneeded `<span>`s for string/number children when there are addons.
+ * @returns the children to render
+ * @remarks \@since 6.0.0
+ * @internal
+ */
+export declare function useHigherContrastChildren(propChildren: ReactNode, disable?: boolean): ReactNode;

package/dist/interaction/useHigherContrastChildren.js

@@ -0,0 +1,88 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Children } from "react";
+import { INTERACTION_CONFIG } from "./config.js";
+/**
+ * This hook is used to wrap any `number` and `string` children with a `<span>`
+ * so that the ripple/hover/focus background colors do not cause the text to
+ * become dimmed.
+ *
+ * If the {@link INTERACTION_CONFIG.higherContrast} is set to `false`, this hook
+ * will just return the `children` unmodified.
+ *
+ * Note: This should generally be used with the {@link useElementInteraction}
+ * hook.
+ *
+ * @example
+ * Simple Example
+ * ```tsx
+ * import {
+ *   useElementInteraction,
+ *   useHigherContrastChildren,
+ * } from "@react-md/core";
+ * import type { ButtonHTMLAttributes, ReactElement, ReactNode } from "react";
+ *
+ * function Example(props: ButtonHTMLAttributes<HTMLButtonElement>): ReactElement {
+ *   const {
+ *     children: propChildren,
+ *     disabled = false,
+ *     onClick,
+ *     onKeyDown,
+ *     onKeyUp,
+ *     onMouseDown,
+ *     onMouseUp,
+ *     onMouseLeave,
+ *     onTouchStart,
+ *     onTouchEnd,
+ *     onTouchMove,
+ *     ...remaining
+ *   } = props;
+ *   const { pressedClassName, ripples, handlers } =
+ *     useElementInteraction({
+ *       disabled,
+ *       onClick,
+ *       onKeyDown,
+ *       onKeyUp,
+ *       onMouseDown,
+ *       onMouseUp,
+ *       onMouseLeave,
+ *       onTouchStart,
+ *       onTouchEnd,
+ *       onTouchMove,
+ *     });
+ *
+ *   const children = useHigherContrastChildren(propChildren)
+ *
+ *   return (
+ *     <button {...remaining} {...handlers} className={pressedClassName}>
+ *       {children}
+ *       {ripples}
+ *     </button>
+ *   );
+ * }
+ * ```
+ *
+ * @param propChildren - The children to conditionally wrap in spans.
+ * @param disable - Manually disable this functionality even if the higher
+ * contrast mode is enabled. This is really used within `ListItem`s so there
+ * aren't unneeded `<span>`s for string/number children when there are addons.
+ * @returns the children to render
+ * @remarks \@since 6.0.0
+ * @internal
+ */ export function useHigherContrastChildren(propChildren, disable = false) {
+    if (!INTERACTION_CONFIG.higherContrast || disable) {
+        return propChildren;
+    }
+    // Note: This will fail if the child is wrapped in a Fragment, but that use
+    // case doesn't matter to me
+    return Children.map(propChildren, (child)=>{
+        const t = typeof child;
+        if (t === "string" || t === "number") {
+            return /*#__PURE__*/ _jsx("span", {
+                children: child
+            });
+        }
+        return child;
+    });
+}
+
+//# sourceMappingURL=useHigherContrastChildren.js.map