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

package/src/typography/__tests__/__snapshots__/SrOnly.tsx.snap

@@ -3,7 +3,7 @@
 exports[`SrOnly should apply the correct styling, HTML attributes, and allow a ref 1`] = `
 <div>
   <span
-    class="rmd-typography rmd-typography--body-1 rmd-sr-only"
+    class="rmd-sr-only"
   >
     Some content
   </span>
@@ -13,7 +13,7 @@ exports[`SrOnly should apply the correct styling, HTML attributes, and allow a r
 exports[`SrOnly should apply the correct styling, HTML attributes, and allow a ref 2`] = `
 <div>
   <span
-    class="rmd-typography rmd-typography--body-1 rmd-sr-only custom-class-name"
+    class="rmd-sr-only custom-class-name"
     style="opacity: 0.3;"
   >
     Some content
@@ -24,7 +24,7 @@ exports[`SrOnly should apply the correct styling, HTML attributes, and allow a r
 exports[`SrOnly should apply the correct styling, HTML attributes, and allow a ref 3`] = `
 <div>
   <span
-    class="rmd-typography rmd-typography--body-1 rmd-sr-only rmd-sr-only--focusable"
+    class="rmd-sr-only rmd-sr-only--focusable"
     style=""
     tabindex="0"
   >
@@ -36,7 +36,7 @@ exports[`SrOnly should apply the correct styling, HTML attributes, and allow a r
 exports[`SrOnly should apply the correct styling, HTML attributes, and allow a ref 4`] = `
 <div>
   <span
-    class="rmd-typography rmd-typography--body-1 rmd-sr-only rmd-sr-only--focusable"
+    class="rmd-sr-only rmd-sr-only--focusable"
     style=""
     tabindex="-1"
   >
@@ -48,7 +48,7 @@ exports[`SrOnly should apply the correct styling, HTML attributes, and allow a r
 exports[`SrOnly should apply the correct styling, HTML attributes, and allow a ref 5`] = `
 <div>
   <h4
-    class="rmd-typography rmd-typography--body-1 rmd-sr-only"
+    class="rmd-sr-only"
   >
     Some content
   </h4>

package/src/typography/_typography.scss

@@ -4,6 +4,18 @@
 @use "../utils";
 
 $disable-text-container: false !default;
+$disable-headline-1: false !default;
+$disable-headline-2: false !default;
+$disable-headline-3: false !default;
+$disable-headline-4: false !default;
+$disable-headline-5: false !default;
+$disable-headline-6: false !default;
+$disable-subtitle-1: false !default;
+$disable-subtitle-2: false !default;
+$disable-body-1: false !default;
+$disable-body-2: false !default;
+$disable-caption: false !default;
+$disable-overline: false !default;
 
 /// A small utility function to get the letter spacing based on tracking and
 /// font-size
@@ -66,11 +78,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,
@@ -208,9 +228,13 @@ $button-recommended-styles: map.merge(
   $base-font-styles,
   (
     font-size: 0.875rem,
-    line-height: 2.25rem,
     font-weight: map.get($font-weights, medium),
     letter-spacing: get-letter-spacing(1.25, 0.875),
+    line-height: 2.25rem,
+    // buttons with multiple lines of text look terrible because of the large
+    // line-height. You normally want to use a different component if the
+    // clickable area has so much content to line-wrap
+    line-wrap: nowrap,
   )
 );
 $button-custom-styles: () !default;
@@ -220,107 +244,125 @@ $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) {
   #{$property}: typography-get-var($name, $fallback);
 }
 
-@mixin typography-text-container-styles($disabled: $disable-text-container) {
+@mixin typography-text-container-styles(
+  $disabled: $disable-text-container,
+  $disable-layer: false
+) {
   @if not $disabled {
-    .rmd-text-container {
-      @include typography-use-var(max-width, line-length);
-      @include typography-use-var(padding, text-container-padding);
-
-      display: block;
-      margin: 0 auto;
-      width: 100%;
+    @include utils.optional-layer(typography, $disable-layer) {
+      .rmd-text-container {
+        @include typography-use-var(max-width, line-length);
+        @include typography-use-var(padding, text-container-padding);
+
+        display: block;
+        margin: 0 auto;
+        width: 100%;
+      }
     }
   }
 }
 
-@mixin typography-base-styles {
-  .rmd-typography {
-    @include utils.map-to-styles($base-font-styles);
-
-    &--headline-1 {
-      @include utils.map-to-styles($headline-1-styles);
-    }
-
-    &--headline-2 {
-      @include utils.map-to-styles($headline-2-styles);
-    }
-
-    &--headline-3 {
-      @include utils.map-to-styles($headline-3-styles);
-    }
-
-    &--headline-4 {
-      @include utils.map-to-styles($headline-4-styles);
-    }
-
-    &--headline-5 {
-      @include utils.map-to-styles($headline-5-styles);
-    }
-
-    &--headline-6 {
-      @include utils.map-to-styles($headline-6-styles);
-    }
-
-    &--subtitle-1 {
-      @include utils.map-to-styles($subtitle-1-styles);
-    }
-
-    &--subtitle-2 {
-      @include utils.map-to-styles($subtitle-2-styles);
-    }
-
-    &--body-1 {
-      @include utils.map-to-styles($body-1-styles);
-    }
-
-    &--body-2 {
-      @include utils.map-to-styles($body-2-styles);
-    }
-
-    &--caption {
-      @include utils.map-to-styles($caption-styles);
-    }
-
-    &--overline {
-      @include utils.map-to-styles($overline-styles);
+@mixin typography-base-styles($disable-layer: false) {
+  @include utils.optional-layer(typography, $disable-layer) {
+    .rmd-typography {
+      @include utils.map-to-styles($base-font-styles);
+
+      @if not $disable-headline-1 {
+        &--headline-1 {
+          @include utils.map-to-styles($headline-1-styles);
+        }
+      }
+
+      @if not $disable-headline-2 {
+        &--headline-2 {
+          @include utils.map-to-styles($headline-2-styles);
+        }
+      }
+
+      @if not $disable-headline-3 {
+        &--headline-3 {
+          @include utils.map-to-styles($headline-3-styles);
+        }
+      }
+
+      @if not $disable-headline-4 {
+        &--headline-4 {
+          @include utils.map-to-styles($headline-4-styles);
+        }
+      }
+
+      @if not $disable-headline-5 {
+        &--headline-5 {
+          @include utils.map-to-styles($headline-5-styles);
+        }
+      }
+
+      @if not $disable-headline-6 {
+        &--headline-6 {
+          @include utils.map-to-styles($headline-6-styles);
+        }
+      }
+
+      @if not $disable-subtitle-1 {
+        &--subtitle-1 {
+          @include utils.map-to-styles($subtitle-1-styles);
+        }
+      }
+
+      @if not $disable-subtitle-2 {
+        &--subtitle-2 {
+          @include utils.map-to-styles($subtitle-2-styles);
+        }
+      }
+
+      @if not $disable-body-1 {
+        &--body-1 {
+          @include utils.map-to-styles($body-1-styles);
+        }
+      }
+
+      @if not $disable-body-2 {
+        &--body-2 {
+          @include utils.map-to-styles($body-2-styles);
+        }
+      }
+
+      @if not $disable-caption {
+        &--caption {
+          @include utils.map-to-styles($caption-styles);
+        }
+      }
+
+      @if not $disable-overline {
+        &--overline {
+          @include utils.map-to-styles($overline-styles);
+        }
+      }
     }
   }
 }
@@ -339,7 +381,19 @@ $typography-var-lookup: (
   display: -webkit-box;
 }
 
-@mixin typography-styles {
-  @include typography-text-container-styles;
-  @include typography-base-styles;
+@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($disable-layer: false) {
+  @include utils.optional-layer(typography, $disable-layer) {
+    @include typography-text-container-styles($disable-layer: true);
+    @include typography-base-styles(true);
+  }
 }

package/src/useDebouncedFunction.ts

@@ -1,14 +1,14 @@
 "use client";
-import { useCallback, useEffect, useRef } from "react";
-import type { AnyFunction } from "./types.js";
+import { useEffect, useMemo, useRef } from "react";
+import { type CancelableFunction, type AnyFunction } from "./types.js";
 import { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect.js";
 
 /**
  * @remarks \@since 6.0.0
  */
-export type DebouncedFunction<F extends AnyFunction> = (
-  ...args: Parameters<F>
-) => void;
+export type DebouncedFunction<F extends AnyFunction> = CancelableFunction<
+  (...args: Parameters<F>) => void
+>;
 
 /**
  * Creates a function that will only be called if it has not been called again
@@ -103,13 +103,15 @@ export function useDebouncedFunction<F extends AnyFunction>(
     };
   }, []);
 
-  return useCallback(
-    (...args) => {
+  return useMemo(() => {
+    const debounced: DebouncedFunction<F> = (...args) => {
       window.clearTimeout(timeout.current);
       timeout.current = window.setTimeout(() => {
         funcRef.current(...args);
       }, wait);
-    },
-    [wait]
-  );
+    };
+    debounced.cancel = () => window.clearTimeout(timeout.current);
+
+    return debounced;
+  }, [wait]);
 }

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/useEnsuredState.ts

@@ -9,7 +9,7 @@ import type { UseStateInitializer, UseStateSetter } from "./types.js";
  */
 export interface EnsuredStateOptions<
   V,
-  Setter extends Dispatch<V> | UseStateSetter<V>,
+  Setter extends Dispatch<V> | UseStateSetter<V> = UseStateSetter<V>,
 > {
   value?: V;
   setValue?: Setter;

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
  */
@@ -105,7 +107,7 @@ export class ResizeObserverManager {
       if (!targetSubscriptions) {
         continue;
       }
-      /* c8 ignore end */
+      /* c8 ignore stop */
 
       const entries = targetSubscriptions.values();
       for (const subscription of entries) {
@@ -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/useThrottledFunction.ts

@@ -1,14 +1,14 @@
 "use client";
-import { useCallback, useEffect, useRef } from "react";
-import type { AnyFunction } from "./types.js";
+import { useEffect, useMemo, useRef } from "react";
+import { type AnyFunction, type CancelableFunction } from "./types.js";
 import { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect.js";
 
 /**
  * @remarks \@since 6.0.0
  */
-export type ThrottledFunction<F extends AnyFunction> = (
-  ...args: Parameters<F>
-) => ReturnType<F>;
+export type ThrottledFunction<F extends AnyFunction> = CancelableFunction<
+  (...args: Parameters<F>) => ReturnType<F>
+>;
 
 /**
  * Creates a function that will only be called once every X milliseconds.
@@ -106,8 +106,8 @@ export function useThrottledFunction<F extends AnyFunction>(
     };
   }, []);
 
-  return useCallback(
-    (...nextArgs) => {
+  return useMemo(() => {
+    const throttled: ThrottledFunction<F> = (...nextArgs) => {
       args.current = nextArgs;
 
       const now = Date.now();
@@ -125,7 +125,9 @@ export function useThrottledFunction<F extends AnyFunction>(
       }
 
       return result.current as ReturnType<F>;
-    },
-    [wait]
-  );
+    };
+    throttled.cancel = () => window.clearTimeout(timeout.current);
+
+    return throttled;
+  }, [wait]);
 }