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

package/src/tree/_tree.scss

@@ -12,8 +12,8 @@ $disable-expander-left-as-media: false !default;
 $disable-expander-left-as-media-offset: false !default;
 $disable-selected-background-color: false !default;
 
-$padding-incrementor: list.$item-horizontal-padding * 1.5 !default;
-$padding-base: list.get-var(item-keyline) !default;
+$item-padding-base: list.$item-horizontal-padding !default;
+$item-padding-incrementor: list.$item-horizontal-padding * 1.5 !default;
 $expander-right-from: icon.$rotate-from !default;
 $expander-right-to: 90deg !default;
 $expander-left-from: 0deg !default;
@@ -44,12 +44,18 @@ $variables: (depth, item-padding, item-padding-base, item-padding-incrementor);
   #{$property}: get-var($name, $fallback);
 }
 
+// must be defined after the `get-var` function
+$item-padding: calc(
+  get-var(depth) * get-var(item-padding-incrementor) +
+    get-var(item-padding-base)
+) !default;
+
 @mixin variables {
   @if not $disable-everything {
-    @include set-var(depth, -1);
+    @include set-var(depth, 0);
     @include set-var(item-padding, 0);
-    @include set-var(item-padding-base, $padding-base);
-    @include set-var(item-padding-incrementor, $padding-incrementor);
+    @include set-var(item-padding-base, $item-padding-base);
+    @include set-var(item-padding-incrementor, $item-padding-incrementor);
   }
 }
 
@@ -69,13 +75,7 @@ $variables: (depth, item-padding, item-padding-base, item-padding-incrementor);
     .rmd-tree-item {
       @include icon.set-var(rotate-from, $expander-right-from);
       @include icon.set-var(rotate-to, $expander-right-to);
-      @include set-var(
-        item-padding,
-        calc(
-          get-var(depth) * get-var(item-padding-incrementor) +
-            get-var(item-padding-base)
-        )
-      );
+      @include set-var(item-padding, $item-padding);
 
       list-style: none;
 
@@ -87,6 +87,12 @@ $variables: (depth, item-padding, item-padding-base, item-padding-incrementor);
       }
 
       &__content {
+        @include utils.auto-rtl(
+          padding-left,
+          get-var(item-padding),
+          list.get-var(item-horizontal-padding)
+        );
+
         &--disabled {
           cursor: auto;
 
@@ -100,17 +106,18 @@ $variables: (depth, item-padding, item-padding-base, item-padding-incrementor);
           text-decoration: none;
         }
 
-        &--padded {
-          @include utils.auto-rtl(
-            padding-left,
-            get-var(item-padding),
-            list.get-var(item-horizontal-padding)
-          );
-        }
-
         &--focused::before {
-          .rmd-tree:focus-within & {
-            @include utils.keyboard-only {
+          // Note: Clicking an item and then using the keyboard to move focus
+          // will **not** show the focus outline so might not be ideal. the tree
+          // must be re-focused after a `Tab` keypress for it to appear again
+          @if utils.$disable-focus-visible {
+            .rmd-tree:focus-within & {
+              @include utils.keyboard-only {
+                @include interaction.focus-styles;
+              }
+            }
+          } @else {
+            .rmd-tree:focus-visible & {
               @include interaction.focus-styles;
             }
           }

package/src/tree/styles.ts

@@ -66,13 +66,6 @@ export interface TreeItemContentClassNameOptions
    */
   link?: boolean;
 
-  /**
-   *
-   *
-   * @defaultValue `false`
-   */
-  padded?: boolean;
-
   /**
    * Set this to `true` when the tree item is the current keyboard focus with
    * `aria-activedescendant`. This will apply the focus styles only while the
@@ -101,7 +94,6 @@ export function treeItemContent(
   const {
     className,
     link = false,
-    padded = false,
     focused,
     selected,
     disabled = false,
@@ -111,7 +103,6 @@ export function treeItemContent(
   return cnb(
     treeItemStyles("content", {
       link,
-      padded,
       focused,
       selected,
       disabled,

package/src/types.ts

@@ -174,3 +174,11 @@ export type CssPosition = "fixed" | "sticky" | "static";
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type AnyFunction = (...args: any[]) => any | void;
+
+/**
+ * @remarks \@since 6.0.0
+ */
+export interface ElementSize {
+  height: number;
+  width: number;
+}

package/src/typography/_typography.scss

@@ -66,11 +66,19 @@ $font-styles: normal italic oblique !default;
 
 /// The base styles for typography.
 /// @type Map
-$base-font-styles: (
+$base-recommended-font-styles: (
   font-family: $font-family,
+  overflow: inherit,
+  overflow-wrap: break-word,
+  text-overflow: inherit,
   -moz-osx-font-smoothing: grayscale,
   -webkit-font-smoothing: antialiased,
 );
+$base-custom-font-styles: () !default;
+$base-font-styles: map.merge(
+  $base-recommended-font-styles,
+  $base-custom-font-styles
+);
 
 $headline-1-recommended-styles: (
   font-size: 6rem,
@@ -220,7 +228,9 @@ $button-styles: map.merge(
 ) !default;
 
 $text-container-padding: 1rem !default;
-$text-line-length: 65ch !default;
+// since everything has `box-sizing: border-box`, make sure the width is 65
+// characters + left and right padding so the text is _really_ 65ch
+$text-line-length: calc(65ch + $text-container-padding * 2) !default;
 
 $typography-variables: (line-length, text-container-padding);
 

package/src/useElementSize.ts

@@ -0,0 +1,83 @@
+"use client";
+import { useCallback, useState, type RefCallback } from "react";
+import { type ElementSize, type UseStateInitializer } from "./types.js";
+import {
+  useResizeObserver,
+  type ResizeObserverHookOptions,
+} from "./useResizeObserver.js";
+
+/**
+ * @remarks \@since 6.0.0
+ */
+export interface ElementSizeOptions<E extends HTMLElement>
+  extends Omit<ResizeObserverHookOptions<E>, "onUpdate"> {
+  /** @defaultValue `{ height: 0, width: 0 }` */
+  defaultValue?: UseStateInitializer<ElementSize>;
+}
+
+/**
+ * @remarks \@since 6.0.0
+ */
+export interface ElementSizeImplementation<E extends HTMLElement>
+  extends ElementSize {
+  elementRef: RefCallback<E>;
+}
+
+/**
+ * A small wrapper around the {@link useResizeObserver} hook to calculate the
+ * element's size.
+ *
+ * @example
+ * Simple Example
+ * ```tsx
+ * import { useElementSize } from "@react-md/core";
+ * import { type ReactElement } from "react";
+ *
+ * function Example(): ReactElement {
+ *   const { height, width, elementRef } = useElementSize();
+ *
+ *   return (
+ *     <div ref={elementRef}>
+ *       {`height: ${height}, width: ${width}`}
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @remarks \@since 6.0.0
+ */
+export function useElementSize<E extends HTMLElement>(
+  options: ElementSizeOptions<E> = {}
+): ElementSizeImplementation<E> {
+  const { defaultValue } = options;
+
+  const [size, setSize] = useState<ElementSize>(() => {
+    if (typeof defaultValue === "function") {
+      return defaultValue();
+    }
+
+    return (
+      defaultValue ?? {
+        height: 0,
+        width: 0,
+      }
+    );
+  });
+
+  const elementRef = useResizeObserver({
+    ...options,
+    onUpdate: useCallback((entry) => {
+      const size = entry.borderBoxSize[0];
+
+      setSize({
+        height: size.blockSize,
+        width: size.inlineSize,
+      });
+    }, []),
+  });
+
+  return {
+    ...size,
+    elementRef,
+  };
+}

package/src/useResizeListener.ts

@@ -25,7 +25,7 @@ export interface ResizeListenerOptions extends AddEventListenerOptions {
 
   /**
    * This function will be called whenever the resize event is fired on the
-   * `window`.
+   * `window`. This should be wrapped in `useCallback`.
    */
   onUpdate(event: Event): void;
 }
@@ -93,6 +93,8 @@ export function useResizeListener(options: ResizeListenerOptions): void {
       passive,
     });
     eventHandler.add(onUpdate);
+
+    window.dispatchEvent(new Event("resize"));
     return () => {
       eventHandler.remove(onUpdate);
     };

package/src/useResizeObserver.ts

@@ -1,8 +1,10 @@
 "use client";
-import type { Ref, RefCallback } from "react";
-import { useEffect } from "react";
+import { useEffect, type Ref, type RefCallback } from "react";
 import { useEnsuredRef } from "./useEnsuredRef.js";
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { type useElementSize } from "./useElementSize.js";
+
 /**
  * @remarks \@since 6.0.0
  */
@@ -189,48 +191,9 @@ export interface ResizeObserverHookOptions<E extends HTMLElement> {
 }
 
 /**
- * @example
- * Simple Example
- * ```tsx
- * import { useResizeObserver } from "@react-md/core";
- * import type { ReactElement } from "react";
- * import { useState } from "react";
- *
- * interface Size {
- *   height: number;
- *   width: number;
- * }
- *
- * function Example(): ReactElement {
- *   const [{ height, width }, setSize] = useState<Size>({
- *     height: 0,
- *     width: 0,
- *   });
- *   const targetRef = useResizeObserver({
- *     onResize: useCallback((entry) => {
- *       const { height, width } = entry.borderBox;
- *       setSize({ height, width });
- *     }, []),
- *   });
- *
- *   return (
- *     <div ref={targetRef}>
- *       <table>
- *         <tbody>
- *           <tr>
- *             <th scope="col">Height:</th>
- *             <td>{height}</td>
- *           </tr>
- *           <tr>
- *             <th scope="col">Width:</th>
- *             <td>{width}</td>
- *           </tr>
- *         </tbody>
- *       </table>
- *     </div>
- *   );
- * }
- * ```
+ * The resize observer is used to track the size changes of a specific element.
+ * For most cases you can use the {@link useElementSize} instead, but this hook
+ * can be used for more complex behavior with the {@link ResizeObserverEntry}.
  *
  * @remarks
  * \@since 2.3.0

package/src/useWindowSize.ts

@@ -1,23 +1,30 @@
 "use client";
-import { useState } from "react";
-import { useResizeListener } from "./useResizeListener.js";
+import { useCallback, useState } from "react";
+import { useSsr } from "./SsrProvider.js";
+import { type ElementSize } from "./types.js";
+import {
+  useResizeListener,
+  type ResizeListenerOptions,
+} from "./useResizeListener.js";
 
 /**
  * @remarks \@since 6.0.0
  */
-export interface WindowSize {
-  height: number;
-  width: number;
-}
+export interface WindowSizeOptions
+  extends Omit<ResizeListenerOptions, "disabled" | "onUpdate"> {
+  /**
+   * The default value to use in SSR environments for the window's height.
+   *
+   * @defaultValue `0`
+   */
+  ssrHeight?: number;
 
-/**
- * @remarks \@since 6.0.0
- */
-export interface WindowSizeOptions extends AddEventListenerOptions {
   /**
-   * @defaultValue `true`
+   * The default value to use in SSR environments for the window's width.
+   *
+   * @defaultValue `0`
    */
-  throttle?: boolean;
+  ssrWidth?: number;
 
   /**
    * Set this to `true` to ignore resize events that only updated the height.
@@ -62,22 +69,25 @@ export interface WindowSizeOptions extends AddEventListenerOptions {
  *
  * @remarks \@since 6.0.0
  */
-export function useWindowSize(options: WindowSizeOptions = {}): WindowSize {
+export function useWindowSize(options: WindowSizeOptions = {}): ElementSize {
   const {
     once,
     signal,
     capture,
     passive,
     throttle,
+    ssrHeight = 0,
+    ssrWidth = 0,
     disableWidth,
     disableHeight,
   } = options;
 
+  const ssr = useSsr();
   const [size, setSize] = useState(() => {
-    if (typeof window === "undefined") {
+    if (typeof window === "undefined" || ssr) {
       return {
-        height: 0,
-        width: 0,
+        height: ssrHeight,
+        width: ssrWidth,
       };
     }
 
@@ -94,9 +104,9 @@ export function useWindowSize(options: WindowSizeOptions = {}): WindowSize {
     passive,
     throttle,
     disabled: disableHeight && disableWidth,
-    onUpdate() {
+    onUpdate: useCallback(() => {
       setSize((prevSize) => {
-        const nextSize: WindowSize = {
+        const nextSize: ElementSize = {
           height: window.innerHeight,
           width: window.innerWidth,
         };
@@ -108,7 +118,7 @@ export function useWindowSize(options: WindowSizeOptions = {}): WindowSize {
 
         return isHeightChange || isWidthChange ? nextSize : prevSize;
       });
-    },
+    }, [disableHeight, disableWidth]),
   });
 
   return size;

package/src/utils/__tests__/getMiddleOfRange.ts

@@ -0,0 +1,12 @@
+import { describe, expect, it } from "@jest/globals";
+import { getMiddleOfRange } from "../getMiddleOfRange.js";
+
+describe("getMiddleOfRange", () => {
+  it("should return the middle of the range", async () => {
+    expect(getMiddleOfRange({ min: 0, max: 100, step: 1 })).toBe(50);
+    expect(getMiddleOfRange({ min: 0, max: 100, step: 2 })).toBe(50);
+    expect(getMiddleOfRange({ min: 0, max: 100, step: 5 })).toBe(50);
+
+    expect(getMiddleOfRange({ min: 30, max: 80, step: 1 })).toBe(55);
+  });
+});

package/src/utils/__tests__/getRangeDefaultValue.ts

@@ -0,0 +1,47 @@
+import { describe, expect, it } from "@jest/globals";
+import { getRangeDefaultValue } from "../getRangeDefaultValue.js";
+
+describe("getRangeDefaultValue", () => {
+  it("should return the default value if it is defined", async () => {
+    expect(
+      getRangeDefaultValue({ min: 0, max: 100, step: 1, defaultValue: 10 })
+    ).toBe(10);
+    expect(
+      getRangeDefaultValue({ min: 0, max: 100, step: 1, defaultValue: 50 })
+    ).toBe(50);
+
+    const defaultValueSetter = (): number => 30;
+    expect(
+      getRangeDefaultValue({
+        min: 10,
+        max: 30,
+        step: 1,
+        defaultValue: defaultValueSetter,
+      })
+    ).toBe(defaultValueSetter);
+  });
+
+  it("should return a function that returns the middle of the range when the defaultValue is undefined", () => {
+    const initializer1 = getRangeDefaultValue({
+      min: 0,
+      max: 100,
+      step: 1,
+    });
+    const initializer2 = getRangeDefaultValue({
+      min: 0,
+      max: 100,
+      step: 1,
+      defaultValue: undefined,
+    });
+
+    if (typeof initializer1 !== "function") {
+      throw new Error("initializer1 is not a function");
+    }
+    if (typeof initializer2 !== "function") {
+      throw new Error("initializer2 is not a function");
+    }
+
+    expect(initializer1()).toBe(50);
+    expect(initializer2()).toBe(50);
+  });
+});

package/src/utils/getMiddleOfRange.ts

@@ -0,0 +1,26 @@
+import { getRangeSteps } from "./getRangeSteps.js";
+import { nearest } from "./nearest.js";
+
+/**
+ * @remarks \@since 6.0.0
+ */
+export interface GetMiddleOfRangeOptions {
+  min: number;
+  max: number;
+  step: number;
+}
+
+/**
+ * @internal
+ * @remarks \@since 6.0.0
+ */
+export function getMiddleOfRange(options: GetMiddleOfRangeOptions): number {
+  const { min, max, step } = options;
+
+  return nearest({
+    min,
+    max,
+    steps: getRangeSteps({ min, max, step }),
+    value: (max - min) / 2 + min,
+  });
+}

package/src/utils/getRangeDefaultValue.ts

@@ -1,15 +1,14 @@
-import type { UseStateInitializer } from "../types.js";
-import { getRangeSteps } from "./getRangeSteps.js";
-import { nearest } from "./nearest.js";
+import { type UseStateInitializer } from "../types.js";
+import {
+  getMiddleOfRange,
+  type GetMiddleOfRangeOptions,
+} from "./getMiddleOfRange.js";
 
 /**
  * @internal
  * @remarks \@since 6.0.0
  */
-export interface RangeDefaultValueOptions {
-  min: number;
-  max: number;
-  step: number;
+export interface RangeDefaultValueOptions extends GetMiddleOfRangeOptions {
   defaultValue?: UseStateInitializer<number>;
 }
 
@@ -20,16 +19,10 @@ export interface RangeDefaultValueOptions {
 export function getRangeDefaultValue(
   options: RangeDefaultValueOptions
 ): UseStateInitializer<number> {
-  const { min, max, step, defaultValue } = options;
+  const { defaultValue } = options;
   if (typeof defaultValue !== "undefined") {
     return defaultValue;
   }
 
-  return () =>
-    nearest({
-      min,
-      max,
-      steps: getRangeSteps({ min, max, step }),
-      value: (max - min) / 2,
-    });
+  return () => getMiddleOfRange(options);
 }

package/src/utils/getRangeSteps.ts

@@ -17,8 +17,8 @@ export interface RangeStepsOptions {
  * \@since 6.0.0 Converted to using an object instead of multiple arguments and
  * renamed from `getSteps` to `getRangeSteps`.
  */
-export const getRangeSteps = (options: RangeStepsOptions): number => {
+export function getRangeSteps(options: RangeStepsOptions): number {
   const { min, max, step } = options;
 
   return Math.abs(max - min) / step;
-};
+}

package/src/utils/nearest.ts

@@ -36,7 +36,7 @@ export function nearest(options: NearestOptions): number {
   const step = range / steps;
   const decimals = Number.isInteger(step)
     ? range % steps
-    : step.toString().split(".")[1].length;
+    : `${step}`.split(".")[1].length;
 
   return Math.min(
     max,

package/src/window-splitter/_window-splitter.scss

@@ -41,6 +41,17 @@ $variables: (top, right, bottom, left, opacity, position);
   @if not $disable-everything {
     .rmd-window-splitter {
       @include use-var(opacity);
+      @include utils.mouse-hover {
+        @include set-var(opacity, 1);
+      }
+      @include utils.keyboard-only {
+        // Do not use `:focus-visible` here since since it'll still be active
+        // after dragging with a mouse until the user clicks something else. The
+        // `--dragging` state handles that part
+        &:focus {
+          @include set-var(opacity, 1);
+        }
+      }
 
       background-color: transparent;
       border: 0;
@@ -57,22 +68,6 @@ $variables: (top, right, bottom, left, opacity, position);
         position: absolute;
       }
 
-      &:hover {
-        @include set-var(opacity, 1);
-      }
-
-      @include utils.keyboard-only {
-        &:focus {
-          @include set-var(opacity, 1);
-        }
-      }
-
-      @include utils.touch-only {
-        &:hover {
-          @include set-var(opacity, 0);
-        }
-      }
-
       @if not $disable-horizontal {
         &--h {
           @include utils.auto-rtl(left, get-var(position));

package/src/window-splitter/useWindowSplitter.ts

@@ -1,16 +1,15 @@
 "use client";
-import type { Ref, RefCallback } from "react";
-import type {
-  BaseDraggableOptions,
-  DraggableImplementation,
-  DraggableKeyboardEventHandlers,
-  DraggableMouseEventHandlers,
-  DraggableStateOptions,
-  DraggableTouchEventHandlers,
+import { type Ref, type RefCallback } from "react";
+import {
+  useDraggable,
+  type BaseDraggableOptions,
+  type DraggableImplementation,
+  type DraggableKeyboardEventHandlers,
+  type DraggableMouseEventHandlers,
+  type DraggableStateOptions,
+  type DraggableTouchEventHandlers,
 } from "../draggable/useDraggable.js";
-import { useDraggable } from "../draggable/useDraggable.js";
 import { useEnsuredId } from "../useEnsuredId.js";
-import { getPercentage } from "../utils/getPercentage.js";
 
 declare module "react" {
   interface CSSProperties {
@@ -76,9 +75,7 @@ export interface WindowSplitterImplementation<
 }
 
 /**
- * You are most likely looking for the `useWindowSplitter` or
- * `useLocalStorageWindowSplitter` hooks instead since this is a low-level hook
- * to implement those two versions.
+ * Used to control the state for the `WindowSplitter` component.
  *
  * @example
  * Custom Implementation
@@ -113,31 +110,18 @@ export interface WindowSplitterImplementation<
 export function useWindowSplitter<E extends HTMLElement = HTMLButtonElement>(
   options: WindowSplitterOptions<E>
 ): WindowSplitterImplementation<E> {
-  const {
-    id: propId,
-    min,
-    max,
-    reversed = false,
-    vertical,
-    withinOffsetParent,
-  } = options;
+  const { id: propId, reversed = false, vertical } = options;
 
   const id = useEnsuredId(propId, "splitter");
   const draggableImplementation = useDraggable(options);
   const {
-    value,
     dragging,
+    percentage,
     draggableRef,
-    dragPercentage,
     mouseEventHandlers,
     keyboardEventHandlers,
   } = draggableImplementation;
 
-  const percentage =
-    dragging && withinOffsetParent
-      ? dragPercentage
-      : getPercentage({ min, max, value });
-
   return {
     ...draggableImplementation,
     splitterProps: {