@react-md/core 1.0.0-next.0 → 1.0.0-next.2

package/src/tooltip/_tooltip.scss

@@ -45,45 +45,36 @@ $leave-duration: transition.$linear-duration !default;
 $leave-timing-function: transition.$acceleration-timing-function !default;
 $transition-distance: 0.5rem !default;
 
-$var-lookup: (
-  background-color: (
-    var: --rmd-tooltip-background-color,
-    value: $background-color,
-  ),
-  color: (
-    var: --rmd-tooltip-color,
-    value: $color,
-  ),
-  spacing: (
-    // this is only added so you can safely do:
-    // @include react-md.tooltip-set-var(spacing, $custom-spacing);
-    var: --rmd-tooltip-spacing,
-    value: $spacing,
-  ),
-);
+$variables: (background-color, color, spacing);
 
 @function get-var($name, $fallback: null) {
-  $found: utils.validate($var-lookup, $name, "tooltip var");
-  $var: map.get($found, var);
-  $value: if($fallback, $fallback, map.get($found, value));
-
-  @if $value {
-    @return var(#{$var}, #{$value});
+  $var: utils.get-var-name($variables, $name, "tooltip");
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
   }
 
   @return var(#{$var});
 }
 
 @mixin set-var($name, $value) {
-  $var: map.get(utils.validate($var-lookup, $name, "tooltip var"), var);
-
-  #{$var}: #{$value};
+  @if $value {
+    #{utils.get-var-name($variables, $name, "tooltip")}: #{$value};
+  }
 }
 
 @mixin use-var($property, $name: $property, $fallback: null) {
   #{$property}: get-var($name, $fallback);
 }
 
+@mixin variables {
+  @if not $disable-everything {
+    @include set-var(background-color, $background-color);
+    @include set-var(color, $color);
+
+    // do not include spacing
+  }
+}
+
 @mixin styles {
   @if not $disable-everything {
     .rmd-tooltip {
@@ -95,6 +86,7 @@ $var-lookup: (
       max-width: $max-width;
       min-height: $min-height;
       opacity: 0;
+      overflow: hidden;
       overflow-wrap: anywhere;
       padding: $vertical-padding $horizontal-padding;
       pointer-events: none;

package/src/tooltip/tooltipStyles.ts

@@ -1,5 +1,5 @@
 import { cnb } from "cnbuilder";
-import { cssUtils } from "../cssUtils.js";
+import { cssUtils, type TextOverflow } from "../cssUtils.js";
 import type { SimplePosition } from "../positioning/types.js";
 import { bem } from "../utils/bem.js";
 
@@ -12,21 +12,21 @@ export interface TooltipClassNameOptions {
   className?: string;
   dense?: boolean;
   position: SimplePosition;
-  disableLineWrap?: boolean;
+  textOverflow?: TextOverflow;
 }
 
 /**
  * @remarks \@since 6.0.0
  */
 export function tooltip(options: TooltipClassNameOptions): string {
-  const { dense, position, className, disableLineWrap } = options;
+  const { dense, position, className, textOverflow } = options;
 
   return cnb(
     styles({
       dense,
       [position]: true,
     }),
-    cssUtils({ textOverflow: disableLineWrap ? "nowrap" : undefined }),
+    cssUtils({ textOverflow }),
     className
   );
 }

package/src/tooltip/useTooltip.ts

@@ -4,11 +4,16 @@ import type {
   CSSProperties,
   FocusEvent,
   MouseEvent,
+  MutableRefObject,
   Ref,
+  RefObject,
   TouchEvent,
 } from "react";
 import { useCallback, useEffect, useId, useRef } from "react";
-import { useHoverMode } from "../hoverMode/useHoverMode.js";
+import {
+  useHoverMode,
+  type ControlledHoverModeImplementation,
+} from "../hoverMode/useHoverMode.js";
 import type { UserInteractionMode } from "../interaction/UserInteractionModeProvider.js";
 import { useUserInteractionMode } from "../interaction/UserInteractionModeProvider.js";
 import type { SimplePosition } from "../positioning/types.js";
@@ -203,7 +208,7 @@ export interface TooltipOptions
    *
    * @defaultValue `DEFAULT_TOOLTIP_DELAY`
    */
-  hoverTime?: number;
+  hoverTimeout?: number;
 
   /**
    * The amount of time to wait before triggering the exit animation for the
@@ -214,7 +219,16 @@ export interface TooltipOptions
    *
    * @defaultValue `0`
    */
-  leaveTime?: number;
+  leaveTimeout?: number;
+
+  /**
+   * Set this to `true` to only allow the tooltip to become visible when the
+   * `event .currentTarget` or `overflowRef` has text overflow.
+   *
+   * @defaultValue `false`
+   * @remarks \@since 6.0.0
+   */
+  overflowOnly?: boolean;
 }
 
 /**
@@ -222,10 +236,10 @@ export interface TooltipOptions
  * \@since 2.8.0
  * \@since 6.0.0 This was renamed from `TooltipHookProvidedTooltipProps`
  */
-export interface ProvidedTooltipProps
+export interface ProvidedTooltipProps<E extends HTMLElement = HTMLSpanElement>
   extends Required<FixedPositioningTransitionCallbacks> {
   id: string;
-  ref: Ref<HTMLSpanElement>;
+  ref: Ref<E>;
   dense: boolean;
   style: CSSProperties;
   visible: boolean;
@@ -240,18 +254,26 @@ export interface ProvidedTooltipProps
  * `TooltipHookReturnValue` to `TooltipImplementation` to match other hook
  * naming conventions.
  */
-export interface TooltipImplementation {
+export interface TooltipImplementation<
+  TooltipElement extends HTMLElement = HTMLSpanElement,
+> extends ControlledHoverModeImplementation {
   visible: boolean;
   setVisible: UseStateSetter<boolean>;
   animatedOnce: boolean;
+  initiatedBy: MutableRefObject<UserInteractionMode | null>;
   elementProps: ProvidedTooltippedElementProps;
-  tooltipProps: ProvidedTooltipProps;
+  tooltipProps: ProvidedTooltipProps<TooltipElement>;
 
   /**
    * This is a wrapper around the {@link setVisible} behavior that will also
    * clear any pending timeouts.
    */
   hideTooltip(): void;
+
+  /**
+   * @remarks \@since 6.0.0
+   */
+  overflowRef: RefObject<HTMLElement>;
 }
 
 /**
@@ -274,6 +296,54 @@ export interface TooltipImplementation {
  * }
  * ```
  *
+ * @example
+ * Overflow-only Tooltips
+ * ```tsx
+ * import {
+ *   cssUtils,
+ *   Link,
+ *   Tooltip,
+ *   useTooltip,
+ *   type LinkProps,
+ * } from "@react-md/core";
+ * import { type ReactElement } from "react";
+ *
+ * function NavigationLink(props: LinkProps): ReactElement {
+ *   const { children, ...remaining } = props;
+ *
+ *   // using the `overflowRef` is optional and will default to the
+ *   // `event.currentTarget` when `null`
+ *   const { overflowRef, elementProps, tooltipProps } = useOverflowTooltip({
+ *     // just to pass any event handlers
+ *     ...remaining,
+ *     overflowOnly: true,
+ *   });
+ *
+ *   return (
+ *     <Link {...remaining} {...elementProps} style={{ width: "100%" }}>
+ *       <span ref={overflowRef} className={cssUtils({ textOverflow: "ellipsis" })}>
+ *         {children}
+ *       </span>
+ *       <Tooltip {...tooltipProps}>
+ *         {children}
+ *       </Tooltip>
+ *     </Link>
+ *   );
+ * }
+ *
+ * function Example(): ReactElement {
+ *   return (
+ *     <div style={{ width: "10rem", overflow: "auto" }}>
+ *       <NavigationLink href="/">Home</NavigationLink>
+ *       <NavigationLink href="/some-path">
+ *         Super long text that will be truncated with ellipsis and
+ *         have a tooltip appear
+ *       </NavigationLink>
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
  * ## Inspecting Tooltip Styles
  *
  * Since tooltips will disappear on blur, mouseleave, etc, it is a bit hard to
@@ -296,17 +366,17 @@ export interface TooltipImplementation {
  * element when the click or history update happens. this causes the tooltip to
  * stay visible
  */
-export function useTooltip(
-  options: TooltipOptions = {}
-): TooltipImplementation {
+export function useTooltip<
+  TooltipElement extends HTMLElement = HTMLSpanElement,
+>(options: TooltipOptions = {}): TooltipImplementation<TooltipElement> {
   const {
     id: propId,
     style: propStyle,
     disabled = false,
     describedBy,
     dense = false,
-    hoverTime,
-    leaveTime,
+    hoverTimeout,
+    leaveTimeout,
     vwMargin = DEFAULT_TOOLTIP_MARGIN,
     vhMargin = DEFAULT_TOOLTIP_MARGIN,
     spacing = DEFAULT_TOOLTIP_SPACING,
@@ -327,6 +397,7 @@ export function useTooltip(
     onEntering,
     onEntered = noop,
     onExited,
+    overflowOnly,
   } = options;
 
   const fallbackId = useId();
@@ -348,9 +419,9 @@ export function useTooltip(
     startHideFlow,
     clearVisibilityTimeout,
   } = useHoverMode({
-    hoverTime,
+    hoverTimeout,
     hoverTimeoutRef,
-    leaveTime,
+    leaveTimeout,
     leaveTimeoutRef,
     enableHoverMode,
     disableHoverMode,
@@ -365,7 +436,8 @@ export function useTooltip(
 
   const mode = useUserInteractionMode();
   const elementRef = useRef<HTMLElement | null>(null);
-  const tooltipRef = useRef<HTMLSpanElement>(null);
+  const tooltipRef = useRef<TooltipElement>(null);
+  const overflowRef = useRef<HTMLElement>(null);
   const initiatedBy = useRef<UserInteractionMode | null>(null);
   const { ref, style, callbacks } = useFixedPositioning({
     nodeRef: tooltipRef,
@@ -460,11 +532,25 @@ export function useTooltip(
     },
   });
 
+  const isNotOverflown = (currentTarget: HTMLElement): boolean => {
+    if (!overflowOnly) {
+      return false;
+    }
+
+    const element = overflowRef.current || currentTarget;
+    return !element || element.offsetWidth >= element.scrollWidth;
+  };
+
   return {
     visible,
     setVisible,
     hideTooltip,
     animatedOnce: animatedOnceRef.current,
+    initiatedBy,
+    overflowRef,
+    startShowFlow,
+    startHideFlow,
+    clearVisibilityTimeout,
     tooltipProps: {
       id: tooltipId,
       ref,
@@ -479,7 +565,12 @@ export function useTooltip(
       id,
       onMouseEnter(event) {
         onMouseEnter(event);
-        if (disabled || mode === "touch" || initiatedBy.current !== null) {
+        if (
+          disabled ||
+          mode === "touch" ||
+          initiatedBy.current !== null ||
+          isNotOverflown(event.currentTarget)
+        ) {
           return;
         }
 
@@ -514,7 +605,8 @@ export function useTooltip(
           disabled ||
           mode !== "keyboard" ||
           initiatedBy.current !== null ||
-          pageInactive.current
+          pageInactive.current ||
+          isNotOverflown(event.currentTarget)
         ) {
           pageInactive.current = false;
           return;
@@ -527,7 +619,11 @@ export function useTooltip(
       },
       onTouchStart(event) {
         onTouchStart(event);
-        if (disabled || initiatedBy.current !== null) {
+        if (
+          disabled ||
+          initiatedBy.current !== null ||
+          isNotOverflown(event.currentTarget)
+        ) {
           return;
         }
 
@@ -547,7 +643,11 @@ export function useTooltip(
       },
       onContextMenu(event) {
         onContextMenu(event);
-        if (disabled || initiatedBy.current !== "touch") {
+        if (
+          disabled ||
+          initiatedBy.current !== "touch" ||
+          isNotOverflown(event.currentTarget)
+        ) {
           return;
         }
 

package/src/transition/__tests__/CSSTransition.tsx

@@ -1,15 +1,17 @@
 import {
   afterEach,
   beforeAll,
+  beforeEach,
   describe,
   expect,
   it,
   jest,
 } from "@jest/globals";
 import { useState, type ReactElement } from "react";
-import { act, fireEvent, render } from "../../test-utils/index.js";
+import { act, fireEvent, render, screen } from "../../test-utils/index.js";
 
 import { CSSTransition, type CSSTransitionProps } from "../CSSTransition.js";
+import { TRANSITION_CONFIG } from "../config.js";
 import {
   type CSSTransitionClassNames,
   type TransitionTimeout,
@@ -54,14 +56,18 @@ describe("CSSTransition", () => {
     jest.useFakeTimers();
   });
 
+  beforeEach(() => {
+    TRANSITION_CONFIG.disabled = false;
+  });
+
   afterEach(() => {
     jest.clearAllTimers();
   });
 
   it("should render correctly", () => {
-    const { container, getByRole, getByTestId, rerender } = render(<Test />);
-    const getElement = (): HTMLElement => getByTestId("element");
-    const toggle = getByRole("button");
+    const { container, rerender } = render(<Test />);
+    const getElement = (): HTMLElement => screen.getByTestId("element");
+    const toggle = screen.getByRole("button");
 
     expect(getElement).not.toThrow();
     expect(container).toMatchSnapshot();
@@ -127,8 +133,8 @@ describe("CSSTransition", () => {
       onExited,
     };
 
-    const { getByRole } = render(<Test {...props} />);
-    const toggle = getByRole("button");
+    render(<Test {...props} />);
+    const toggle = screen.getByRole("button");
 
     expect(onEnter).not.toHaveBeenCalled();
     expect(onEntering).not.toHaveBeenCalled();

package/src/transition/__tests__/Collapse.tsx

@@ -1,16 +1,18 @@
 import {
   afterEach,
   beforeAll,
+  beforeEach,
   describe,
   expect,
   it,
   jest,
 } from "@jest/globals";
 import { useState, type ReactElement } from "react";
-import { act, fireEvent, render } from "../../test-utils/index.js";
+import { act, fireEvent, render, screen } from "../../test-utils/index.js";
 
 import { DISPLAY_NONE_CLASS } from "../../utils/isElementVisible.js";
 import { Collapse, type CollapseProps } from "../Collapse.js";
+import { TRANSITION_CONFIG } from "../config.js";
 
 interface TestProps
   extends Omit<CollapseProps<HTMLElement>, "collapsed" | "children"> {
@@ -37,14 +39,18 @@ describe("useCollapseTransition", () => {
     jest.useFakeTimers();
   });
 
+  beforeEach(() => {
+    TRANSITION_CONFIG.disabled = false;
+  });
+
   afterEach(() => {
     jest.clearAllTimers();
   });
 
   it("should default to not rendering the element when transitionIn is false", () => {
-    const { container, getByRole, getByTestId } = render(<Test />);
-    const getElement = (): HTMLElement => getByTestId("element");
-    const toggle = getByRole("button");
+    const { container } = render(<Test />);
+    const getElement = (): HTMLElement => screen.getByTestId("element");
+    const toggle = screen.getByRole("button");
 
     expect(getElement).toThrow();
 
@@ -70,11 +76,9 @@ describe("useCollapseTransition", () => {
   });
 
   it(`should apply the ${DISPLAY_NONE_CLASS} if the temporary behavior is disabled`, () => {
-    const { container, getByRole, getByTestId } = render(
-      <Test temporary={false} />
-    );
-    const toggle = getByRole("button");
-    const element = getByTestId("element");
+    const { container } = render(<Test temporary={false} />);
+    const toggle = screen.getByRole("button");
+    const element = screen.getByTestId("element");
 
     expect(element).toHaveClass(DISPLAY_NONE_CLASS);
     expect(container).toMatchSnapshot();
@@ -102,10 +106,10 @@ describe("useCollapseTransition", () => {
   });
 
   it("should default to not being temporary if the minHeight, minPaddingTop, or minPaddingBottom are not 0", () => {
-    const { container, getByTestId, rerender } = render(
+    const { container, rerender } = render(
       <Test key="first-test" minHeight={120} />
     );
-    const getElement = (): HTMLElement => getByTestId("element");
+    const getElement = (): HTMLElement => screen.getByTestId("element");
 
     expect(getElement).not.toThrow();
     expect(container).toMatchSnapshot();
@@ -132,10 +136,8 @@ describe("useCollapseTransition", () => {
   });
 
   it("should not apply any style if it mounts while collapsed is false", () => {
-    const { container, getByTestId } = render(
-      <Test defaultCollapsed={false} />
-    );
-    const element = getByTestId("element");
+    const { container } = render(<Test defaultCollapsed={false} />);
+    const element = screen.getByTestId("element");
     expect(element.style.minHeight).toBe("");
     expect(element.style.paddingBottom).toBe("");
     expect(element.style.paddingTop).toBe("");
@@ -158,8 +160,8 @@ describe("useCollapseTransition", () => {
       onExited,
     };
 
-    const { getByRole } = render(<Test {...props} />);
-    const toggle = getByRole("button");
+    render(<Test {...props} />);
+    const toggle = screen.getByRole("button");
 
     expect(onEnter).not.toHaveBeenCalled();
     expect(onEntering).not.toHaveBeenCalled();

package/src/transition/__tests__/CrossFade.tsx

@@ -1,15 +1,16 @@
 import {
   afterEach,
   beforeAll,
+  beforeEach,
   describe,
   expect,
   it,
   jest,
 } from "@jest/globals";
 import { useState, type ReactElement } from "react";
-import { act, fireEvent, render } from "../../test-utils/index.js";
-
+import { act, fireEvent, render, screen } from "../../test-utils/index.js";
 import { CrossFade, type CrossFadeProps } from "../CrossFade.js";
+import { TRANSITION_CONFIG } from "../config.js";
 
 interface TestProps
   extends Omit<CrossFadeProps<HTMLElement>, "transitionIn" | "children"> {
@@ -38,17 +39,21 @@ describe("CrossFade", () => {
     jest.useFakeTimers();
   });
 
+  beforeEach(() => {
+    TRANSITION_CONFIG.disabled = false;
+  });
+
   afterEach(() => {
     jest.clearAllTimers();
   });
 
   it("should default to using appear transitions", () => {
-    const { container, getByTestId, rerender } = render(
+    const { container, rerender } = render(
       <CrossFade>
         <div data-testid="element">This is some content.</div>
       </CrossFade>
     );
-    const getElement = (): HTMLElement => getByTestId("element");
+    const getElement = (): HTMLElement => screen.getByTestId("element");
 
     expect(getElement).not.toThrow();
     expect(container).toMatchSnapshot();
@@ -75,9 +80,9 @@ describe("CrossFade", () => {
   });
 
   it("should transition correctly when not appearing", () => {
-    const { container, getByRole, getByTestId } = render(<Test />);
-    const getElement = (): HTMLElement => getByTestId("element");
-    const toggle = getByRole("button");
+    const { container } = render(<Test />);
+    const getElement = (): HTMLElement => screen.getByTestId("element");
+    const toggle = screen.getByRole("button");
 
     expect(getElement).not.toThrow();
     expect(getElement().className).toBe("");
@@ -109,9 +114,9 @@ describe("CrossFade", () => {
   });
 
   it("should allow for temporary CSS Transition behavior", () => {
-    const { container, getByRole, getByTestId } = render(<Test temporary />);
-    const getElement = (): HTMLElement => getByTestId("element");
-    const toggle = getByRole("button");
+    const { container } = render(<Test temporary />);
+    const getElement = (): HTMLElement => screen.getByTestId("element");
+    const toggle = screen.getByRole("button");
 
     expect(getElement).toThrow();
     expect(container).toMatchSnapshot();
@@ -132,11 +137,9 @@ describe("CrossFade", () => {
   });
 
   it("should correctly merge the className prop", () => {
-    const { container, getByRole, getByTestId } = render(
-      <Test className="custom-class" />
-    );
-    const getElement = (): HTMLElement => getByTestId("element");
-    const toggle = getByRole("button");
+    const { container } = render(<Test className="custom-class" />);
+    const getElement = (): HTMLElement => screen.getByTestId("element");
+    const toggle = screen.getByRole("button");
 
     expect(getElement).not.toThrow();
     expect(getElement().className).toBe("custom-class");
@@ -185,8 +188,8 @@ describe("CrossFade", () => {
       onExited,
     };
 
-    const { getByRole } = render(<Test {...props} />);
-    const toggle = getByRole("button");
+    render(<Test {...props} />);
+    const toggle = screen.getByRole("button");
 
     expect(onEnter).not.toHaveBeenCalled();
     expect(onEntering).not.toHaveBeenCalled();

package/src/transition/__tests__/ScaleTransition.tsx

@@ -1,18 +1,20 @@
 import {
   afterEach,
   beforeAll,
+  beforeEach,
   describe,
   expect,
   it,
   jest,
 } from "@jest/globals";
 import { useState, type ReactElement } from "react";
-import { act, fireEvent, render } from "../../test-utils/index.js";
+import { act, fireEvent, render, screen } from "../../test-utils/index.js";
 
 import {
   ScaleTransition,
   type ScaleTransitionProps,
 } from "../ScaleTransition.js";
+import { TRANSITION_CONFIG } from "../config.js";
 
 interface TestProps
   extends Omit<ScaleTransitionProps<HTMLElement>, "transitionIn" | "children"> {
@@ -41,14 +43,18 @@ describe("ScaleTransition", () => {
     jest.useFakeTimers();
   });
 
+  beforeEach(() => {
+    TRANSITION_CONFIG.disabled = false;
+  });
+
   afterEach(() => {
     jest.clearAllTimers();
   });
 
   it("should default to using the horizontal transition", () => {
-    const { getByRole, getByTestId } = render(<Test />);
-    const getElement = (): HTMLElement => getByTestId("element");
-    const toggle = getByRole("button");
+    render(<Test />);
+    const getElement = (): HTMLElement => screen.getByTestId("element");
+    const toggle = screen.getByRole("button");
 
     expect(getElement).toThrow();
     expect(document.body).toMatchSnapshot();
@@ -75,9 +81,9 @@ describe("ScaleTransition", () => {
   });
 
   it("should render correctly for a vertical transition", () => {
-    const { getByRole, getByTestId } = render(<Test vertical />);
-    const getElement = (): HTMLElement => getByTestId("element");
-    const toggle = getByRole("button");
+    render(<Test vertical />);
+    const getElement = (): HTMLElement => screen.getByTestId("element");
+    const toggle = screen.getByRole("button");
 
     expect(getElement).toThrow();
     expect(document.body).toMatchSnapshot();
@@ -104,12 +110,10 @@ describe("ScaleTransition", () => {
   });
 
   it("should merge the className and allow to be rendered by default", () => {
-    const { getByRole, getByTestId } = render(
-      <Test className="custom-class" defaultTransitionIn />
-    );
+    render(<Test className="custom-class" defaultTransitionIn />);
 
-    const getElement = (): HTMLElement => getByTestId("element");
-    const toggle = getByRole("button");
+    const getElement = (): HTMLElement => screen.getByTestId("element");
+    const toggle = screen.getByRole("button");
 
     expect(getElement()).toHaveClass("custom-class");
     expect(document.body).toMatchSnapshot();
@@ -151,8 +155,8 @@ describe("ScaleTransition", () => {
       onExited,
     };
 
-    const { getByRole } = render(<Test {...props} />);
-    const toggle = getByRole("button");
+    render(<Test {...props} />);
+    const toggle = screen.getByRole("button");
 
     expect(onEnter).not.toHaveBeenCalled();
     expect(onEntering).not.toHaveBeenCalled();