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

package/src/tree/_tree.scss

@@ -6,13 +6,14 @@
 @use "../typography/typography";
 @use "../interaction/interaction";
 
+$disable-everything: false !default;
 $disable-expander-left: false !default;
 $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;
@@ -22,153 +23,152 @@ $selected-styles: (
   font-weight: typography.$font-weight-bold,
 ) !default;
 
-$var-lookup: (
-  depth: (
-    var: --rmd-tree-depth,
-    value: -1,
-  ),
-  item-padding: (
-    var: --rmd-tree-item-padding,
-    value: 0,
-  ),
-  padding-base: (
-    var: --rmd-tree-item-padding-base,
-    value: $padding-base,
-  ),
-  padding-incrementor: (
-    var: --rmd-tree-item-padding-incrementor,
-    value: $padding-incrementor,
-  ),
-);
+$variables: (depth, item-padding, item-padding-base, item-padding-incrementor);
 
 @function get-var($name, $fallback: null) {
-  $found: utils.validate($var-lookup, $name, "tree 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, "tree");
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
   }
 
   @return var(#{$var});
 }
 
 @mixin set-var($name, $value) {
-  $var: map.get(utils.validate($var-lookup, $name, "tree var"), var);
-
-  #{$var}: #{$value};
+  @if $value {
+    #{utils.get-var-name($variables, $name, "tree")}: #{$value};
+  }
 }
 
 @mixin use-var($property, $name: $property, $fallback: null) {
   #{$property}: get-var($name, $fallback);
 }
 
-@mixin styles {
-  .rmd-tree {
-    display: block;
-    height: 100%;
-    outline-style: none;
-    overflow: auto;
-    // this is mostly for firefox. moving the mouse even 1px while clicking will
-    // select the current item and all items to the tree root
-    user-select: none;
-    width: 100%;
+// 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, 0);
+    @include set-var(item-padding, 0);
+    @include set-var(item-padding-base, $item-padding-base);
+    @include set-var(item-padding-incrementor, $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(padding-incrementor) + get-var(padding-base)
-      )
-    );
-
-    list-style: none;
-
-    @if not $disable-expander-left {
-      &--expander-left {
-        @include icon.set-var(rotate-from, $expander-left-from);
-        @include icon.set-var(rotate-to, $expander-left-to);
-      }
+@mixin styles {
+  @if not $disable-everything {
+    .rmd-tree {
+      display: block;
+      height: 100%;
+      outline-style: none;
+      overflow: auto;
+      // this is mostly for firefox. moving the mouse even 1px while clicking will
+      // select the current item and all items to the tree root
+      user-select: none;
+      width: 100%;
     }
 
-    &__content {
-      &--disabled {
-        cursor: auto;
+    .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, $item-padding);
 
-        &:hover::before {
-          @include interaction.set-var(background-color, transparent);
-        }
-      }
+      list-style: none;
 
-      &--link {
-        color: inherit;
-        text-decoration: none;
+      @if not $disable-expander-left {
+        &--expander-left {
+          @include icon.set-var(rotate-from, $expander-left-from);
+          @include icon.set-var(rotate-to, $expander-left-to);
+        }
       }
 
-      &--padded {
+      &__content {
         @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 {
-            @include interaction.focus-styles;
+        &--disabled {
+          cursor: auto;
+
+          &:hover::before {
+            @include interaction.set-var(background-color, transparent);
+          }
+        }
+
+        &--link {
+          color: inherit;
+          text-decoration: none;
+        }
+
+        &--focused::before {
+          // 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;
+            }
           }
         }
-      }
 
-      @if $selected-styles {
-        &--selected {
-          @if not $disable-selected-background-color {
-            @include interaction.set-var(
-              background-color,
-              interaction.get-var(selected-background-color)
-            );
-
-            @include utils.touch-only {
-              &:hover::before {
-                @include interaction.set-var(
-                  background-color,
-                  interaction.get-var(selected-background-color)
-                );
+        @if $selected-styles {
+          &--selected {
+            @if not $disable-selected-background-color {
+              @include interaction.set-var(
+                background-color,
+                interaction.get-var(selected-background-color)
+              );
+
+              @include utils.touch-only {
+                &:hover::before {
+                  @include interaction.set-var(
+                    background-color,
+                    interaction.get-var(selected-background-color)
+                  );
+                }
               }
             }
+            @include utils.map-to-styles($selected-styles);
           }
-          @include utils.map-to-styles($selected-styles);
         }
       }
-    }
 
-    @if not $disable-expander-left-as-media {
-      &__media {
-        align-items: center;
-        display: flex;
-        justify-content: space-between;
+      @if not $disable-expander-left-as-media {
+        &__media {
+          align-items: center;
+          display: flex;
+          justify-content: space-between;
 
-        @if not $disable-expander-left-as-media-offset {
-          &--single {
-            justify-content: flex-end;
+          @if not $disable-expander-left-as-media-offset {
+            &--single {
+              justify-content: flex-end;
+            }
           }
         }
       }
     }
-  }
 
-  .rmd-tree-group {
-    background-color: inherit;
-    color: inherit;
-    font-size: inherit;
-    line-height: inherit;
+    .rmd-tree-group {
+      background-color: inherit;
+      color: inherit;
+      font-size: inherit;
+      line-height: inherit;
 
-    // remove the list padding to make it more condensed
-    padding-bottom: 0;
-    padding-top: 0;
+      // remove the list padding to make it more condensed
+      padding-bottom: 0;
+      padding-top: 0;
+    }
   }
 }

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,38 +228,25 @@ $button-styles: map.merge(
 ) !default;
 
 $text-container-padding: 1rem !default;
-$text-line-length: 65ch !default;
-
-$typography-var-lookup: (
-  line-length: (
-    var: --rmd-line-length,
-    value: $text-line-length,
-  ),
-  text-container-padding: (
-    var: --rmd-text-container-padding,
-    value: $text-container-padding,
-  ),
-);
+// 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;
 
-@function typography-get-var($name, $fallback: null) {
-  $found: utils.validate($typography-var-lookup, $name, "typography var");
-  $var: map.get($found, var);
-  $value: if($fallback, $fallback, map.get($found, value));
+$typography-variables: (line-length, text-container-padding);
 
-  @if $value {
-    @return var(#{$var}, #{$value});
+@function typography-get-var($name, $fallback: null) {
+  $var: utils.get-var-name($typography-variables, $name, "typography");
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
   }
 
   @return var(#{$var});
 }
 
 @mixin typography-set-var($name, $value) {
-  $var: map.get(
-    utils.validate($typography-var-lookup, $name, "typography var"),
-    var
-  );
-
-  #{$var}: #{$value};
+  @if $value {
+    #{utils.get-var-name($typography-variables, $name, "typography")}: #{$value};
+  }
 }
 
 @mixin typography-use-var($property, $name: $property, $fallback: null) {
@@ -339,6 +334,16 @@ $typography-var-lookup: (
   display: -webkit-box;
 }
 
+@mixin typography-variables {
+  @if not $disable-text-container {
+    @include typography-set-var(line-length, $text-line-length);
+    @include typography-set-var(
+      text-container-padding,
+      $text-container-padding
+    );
+  }
+}
+
 @mixin typography-styles {
   @include typography-text-container-styles;
   @include typography-base-styles;

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);
+  });
+});