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

package/src/form/useListboxProvider.ts

@@ -1,5 +1,6 @@
 "use client";
 import { createContext, useContext, type RefObject } from "react";
+import { type ChangeableHTMLElement } from "./utils.js";
 
 /**
  * @internal
@@ -9,7 +10,7 @@ export interface ListboxContext {
   /**
    * This ref is used to trigger the change event when an option is clicked.
    */
-  inputRef: RefObject<HTMLInputElement>;
+  inputRef: RefObject<ChangeableHTMLElement>;
 
   /**
    * This is used within the `Option` component to determine if it is currently
@@ -17,14 +18,11 @@ export interface ListboxContext {
    */
   currentValue: string | number | null;
 
+  selectedIconAfter: boolean;
   disableSelectedIcon: boolean;
 }
 
-const context = createContext<ListboxContext>({
-  inputRef: { current: null },
-  currentValue: null,
-  disableSelectedIcon: false,
-});
+const context = createContext<ListboxContext | null>(null);
 
 /**
  * **Client Component**
@@ -39,5 +37,9 @@ export const { Provider: ListboxProvider } = context;
  * @remarks \@since 6.0.0
  */
 export function useListboxContext(): ListboxContext {
-  return useContext(context);
+  const value = useContext(context);
+  if (!value) {
+    throw new Error("The `ListboxProvider` must be a parent component");
+  }
+  return value;
 }

package/src/form/useResizingTextArea.ts

@@ -5,13 +5,14 @@ import {
   useRef,
   useState,
   type ChangeEventHandler,
+  type Ref,
   type RefCallback,
-  type RefObject,
 } from "react";
+import { useEnsuredRef } from "../useEnsuredRef.js";
 import { useResizeObserver } from "../useResizeObserver.js";
 
 // this is the default of 1.5rem line-height in the styles
-const DEFAULT_LINE_HEIGHT = "24";
+const DEFAULT_LINE_HEIGHT = 24;
 
 const noop = (): void => {
   // do nothing
@@ -46,63 +47,100 @@ export interface ResizingTextAreaOptions {
   resize: TextAreaResize;
   maxRows: number;
   onChange: ChangeEventHandler<HTMLTextAreaElement> | undefined;
-  containerRef: RefObject<HTMLDivElement>;
+  containerRef?: Ref<HTMLDivElement>;
+  disableTransition: boolean | undefined;
 }
 
 /** @internal */
 export interface ResizingTextAreaReturnValue {
   height: string | undefined;
   maskRef: RefCallback<HTMLTextAreaElement>;
+  containerRef: RefCallback<HTMLDivElement>;
   onChange: ChangeEventHandler<HTMLTextAreaElement>;
   scrollable: boolean;
+  disableTransition: boolean;
 }
 
 /** @internal */
 export function useResizingTextArea(
   options: ResizingTextAreaOptions
 ): ResizingTextAreaReturnValue {
-  const { maxRows, resize, onChange = noop, containerRef } = options;
+  const {
+    maxRows,
+    resize,
+    onChange = noop,
+    containerRef: propContainerRef,
+    disableTransition,
+  } = options;
 
   const maskRef = useRef<HTMLTextAreaElement>(null);
+  const [containerRef, containerRefCallback] = useEnsuredRef(propContainerRef);
   const [height, setHeight] = useState<number>();
-  const [scrollable, setScrollable] = useState(false);
   useEffect(() => {
     if (resize !== "auto") {
       setHeight(undefined);
     }
   }, [resize]);
 
+  // Since access to the DOM is required to calculate the current height of the
+  // textarea, do not enable the height transition until it has been calculated
+  // once.
+  const isHeightSet = useRef(true);
+  useEffect(() => {
+    isHeightSet.current = !height;
+  }, [height]);
+
+  // Do not enable the scrollbar until the max height has been reached since
+  // it'll flash as the user types on OS that display scrollbars.
+  //
+  // Note: This does cause an infinite loop issue on browsers that display OS
+  // when rendered in a flex/grid container and a "fluid" width since:
+  // - the width changes when the overflow changes to `auto`
+  // - the resize observer triggers since there was a width change
+  // - the number of rows imght change because of this width change
+  // - it might no longer be at the max height, so remove the scrollbar
+  // - restart
+  const [isMaxHeightReached, setMaxHeightReached] = useState(false);
   const updateHeight = useCallback(() => {
     const mask = maskRef.current;
     const container = containerRef.current;
+    /* c8 ignore start */
     if (!mask || !container) {
       return;
     }
+    /* c8 ignore stop */
 
     const containerStyles = window.getComputedStyle(container);
-    const borderHeight =
-      parseFloat(containerStyles.borderTopWidth) +
-      parseFloat(containerStyles.borderBottomWidth);
+    const isBorderBox = containerStyles.boxSizing === "border-box";
+    let borderHeight = 0;
+    if (isBorderBox) {
+      borderHeight =
+        parseFloat(containerStyles.borderTopWidth) +
+        parseFloat(containerStyles.borderBottomWidth);
+    }
+
     let nextHeight = mask.scrollHeight + borderHeight;
-    /* istanbul ignore if */
     if (maxRows > 0) {
-      const lineHeight = parseFloat(
-        window.getComputedStyle(mask).lineHeight || DEFAULT_LINE_HEIGHT
-      );
+      nextHeight -= borderHeight;
+      const maskStyles = window.getComputedStyle(mask);
+      // in tests, this is `"normal"` by default instead of a number
+      let lineHeight = parseFloat(maskStyles.lineHeight);
+      if (Number.isNaN(lineHeight)) {
+        lineHeight = DEFAULT_LINE_HEIGHT;
+      }
+
       const maxHeight = maxRows * lineHeight;
       nextHeight = Math.min(maxHeight, nextHeight);
-
-      // only want the textarea to be scrollable if there's a limit on the rows
-      // since it'll flash the scrollbar on most OS during the height transition
-      if (nextHeight === maxHeight && !scrollable) {
-        setScrollable(true);
-      } else if (nextHeight !== maxHeight && scrollable) {
-        setScrollable(false);
-      }
+      setMaxHeightReached(nextHeight === maxHeight);
+      nextHeight += borderHeight;
     }
 
-    setHeight(nextHeight + 2);
-  }, [containerRef, maxRows, scrollable]);
+    // This just makes snapshots look nicer since `nextHeight` will be 0 in
+    // tests unless the user mocks out all the DOM properties
+    if (nextHeight) {
+      setHeight(nextHeight);
+    }
+  }, [containerRef, maxRows]);
 
   const maskRefCallback = useResizeObserver({
     ref: maskRef,
@@ -113,11 +151,14 @@ export function useResizingTextArea(
   return {
     height: typeof height === "number" ? `${height}px` : undefined,
     maskRef: maskRefCallback,
-    scrollable,
+    containerRef: containerRefCallback,
+    scrollable: maxRows > 0 && isMaxHeightReached,
+    disableTransition: disableTransition || isHeightSet.current,
     onChange(event) {
-      const mask = maskRef.current;
       onChange(event);
-      if (event.isPropagationStopped() || !mask || resize !== "auto") {
+
+      const mask = maskRef.current;
+      if (!mask || resize !== "auto") {
         return;
       }
 

package/src/form/useSelectCombobox.ts

@@ -0,0 +1,70 @@
+"use client";
+import {
+  useCombobox,
+  type BaseComboboxOptions,
+  type ComboboxImplementation,
+} from "./useCombobox.js";
+
+/**
+ * @remarks \@since 6.0.0
+ */
+export interface SelectComboboxOptions<
+  ComboboxEl extends HTMLElement = HTMLInputElement,
+  PopupEl extends HTMLElement = HTMLElement,
+> extends BaseComboboxOptions<ComboboxEl, PopupEl> {
+  value: string;
+  values: readonly string[];
+}
+
+/**
+ * @remarks \@since 6.0.0
+ */
+export interface SelectComboboxImplementation<
+  ComboboxEl extends HTMLElement = HTMLInputElement,
+  PopupEl extends HTMLElement = HTMLElement,
+> extends ComboboxImplementation<ComboboxEl, PopupEl> {}
+
+/**
+ * @remarks \@since 6.0.0
+ */
+export function useSelectCombobox<
+  ComboboxEl extends HTMLElement = HTMLInputElement,
+  PopupEl extends HTMLElement = HTMLElement,
+>(
+  options: SelectComboboxOptions<ComboboxEl, PopupEl>
+): SelectComboboxImplementation<ComboboxEl, PopupEl> {
+  const { value, values, ...comboboxOptions } = options;
+
+  return useCombobox({
+    ...comboboxOptions,
+    searchable: true,
+    extendKeyDown(movementData) {
+      const { event, show, focusLast, visible } = movementData;
+      if (visible) {
+        return;
+      }
+
+      switch (event.key) {
+        case " ":
+        case "Home":
+        case "End":
+          event.preventDefault();
+          event.stopPropagation();
+          focusLast.current = event.key === "End";
+          show();
+          break;
+      }
+    },
+    getEnterDefaultFocusedIndex(options) {
+      const { focusLast } = options;
+      if (focusLast && !value) {
+        return values.length - 1;
+      }
+
+      return Math.max(
+        0,
+        values.findIndex((option) => option === value)
+      );
+    },
+  });
+}

package/src/form/utils.ts

@@ -54,10 +54,23 @@ export function tryToSubmitRelatedForm<E extends HTMLElement>(
  * @internal
  * @remarks \@since 6.0.0
  */
-export type ChangeableHTMLElement =
-  | HTMLInputElement
-  | HTMLTextAreaElement
-  | HTMLSelectElement;
+export type EditableHTMLElement = HTMLInputElement | HTMLTextAreaElement;
+
+/**
+ * @internal
+ * @remarks \@since 6.0.0
+ */
+export type ChangeableHTMLElement = EditableHTMLElement | HTMLSelectElement;
+
+/**
+ * @internal
+ * @remarks \@since 6.0.0
+ */
+export function isChangeableHTMLElement(
+  element: Element | null
+): element is ChangeableHTMLElement {
+  return !!element && "value" in element;
+}
 
 /**
  * This is used to trigger a change event for a form element.

package/src/icon/IconRotator.tsx

@@ -50,7 +50,6 @@ export interface IconRotatorProps extends IconRotatorBaseProps {
 export const IconRotator = forwardRef<HTMLSpanElement, IconRotatorProps>(
   function IconRotator(props, ref) {
     const {
-      style,
       className: propClassName,
       rotated,
       children,
@@ -72,7 +71,7 @@ export const IconRotator = forwardRef<HTMLSpanElement, IconRotatorProps>(
     }
 
     return (
-      <span {...remaining} style={style} className={className} ref={ref}>
+      <span {...remaining} ref={ref} className={className}>
         {children}
       </span>
     );

package/src/icon/_icon.scss

@@ -1,5 +1,4 @@
 @use "sass:color";
-@use "sass:map";
 @use "../theme/theme";
 @use "../transition/transition";
 @use "../utils";
@@ -47,61 +46,34 @@ $rotate-from: 0deg !default;
 $rotate-to: 180deg !default;
 $rotate-duration: transition.$linear-duration !default;
 
-$var-lookup: (
-  color: (
-    var: --rmd-icon-color,
-    value: $color,
-  ),
-  size: (
-    var: --rmd-icon-size,
-    value: $size,
-  ),
-  spacing: (
-    var: --rmd-icon-spacing,
-    value: $spacing,
-  ),
-  rotate-from: (
-    var: --rmd-icon-rotate-from,
-    value: $rotate-from,
-  ),
-  rotate-to: (
-    var: --rmd-icon-rotate-to,
-    value: $rotate-to,
-  ),
-  symbol-fill: (
-    var: --rmd-symbol-fill,
-    value: $symbol-fill,
-  ),
-  symbol-grade: (
-    var: --rmd-symbol-grad,
-    value: $symbol-grade,
-  ),
-  symbol-weight: (
-    var: --rmd-symbol-wght,
-    value: $symbol-weight,
-  ),
-  symbol-optical-size: (
-    var: --rmd-symbol-opsz,
-    value: $symbol-optical-size,
-  ),
+$variables: (
+  color,
+  size,
+  spacing,
+  rotate-from,
+  rotate-to,
+  symbol-fill,
+  symbol-grade,
+  symbol-weight,
+  symbol-optical-size
 );
 
-@function get-var($name, $fallback: null) {
-  $found: utils.validate($var-lookup, $name, "icon var");
-  $var: map.get($found, var);
-  $value: if($fallback, $fallback, map.get($found, value));
+// shouldn't really use react-md without icons though...
+$_disable-icons: $disable-font and $disable-svg and $disable-symbol;
 
-  @if $value {
-    @return var(#{$var}, #{$value});
+@function get-var($name, $fallback: null) {
+  $var: utils.get-var-name($variables, $name, "icon");
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
   }
 
   @return var(#{$var});
 }
 
 @mixin set-var($name, $value) {
-  $var: map.get(utils.validate($var-lookup, $name, "icon var"), var);
-
-  #{$var}: #{$value};
+  @if $value {
+    #{utils.get-var-name($variables, $name, "icon")}: #{$value};
+  }
 }
 
 @mixin use-var($property, $name: $property, $fallback: null) {
@@ -109,13 +81,13 @@ $var-lookup: (
 }
 
 @mixin use-light-theme {
-  @if not $disable-font or not $disable-svg {
+  @if not $_disable-icons {
     @include set-var(color, $light-theme-color);
   }
 }
 
 @mixin use-dark-theme {
-  @if not $disable-font or not $disable-svg {
+  @if not $_disable-icons {
     @include set-var(color, $dark-theme-color);
   }
 }
@@ -126,94 +98,115 @@ $var-lookup: (
   }
 }
 
-@mixin styles {
-  // shouldn't really use react-md without icons though...
-  @if not $disable-font or not $disable-svg and not $disable-symbol {
-    @include theme.default-system-theme {
-      @include use-dark-theme;
-    }
+@mixin variables {
+  @if not $_disable-icons {
+    @include set-var(color, $color);
+    @include set-var(size, $size);
+    @include set-var(spacing, $spacing);
+  }
 
-    .rmd-icon {
-      @include use-var(font-size, size);
-      @include use-var(color);
+  @if not $disable-symbol {
+    @include set-var(symbol-fill, $symbol-fill);
+    @include set-var(symbol-grade, $symbol-grade);
+    @include set-var(symbol-weight, $symbol-weight);
+    @include set-var(symbol-optical-size, $symbol-optical-size);
+  }
 
-      // you normally don't want icons to shrink in flex containers.
-      // update the icon manually instead.
-      flex-shrink: 0;
-      user-select: none;
+  @if not $disable-rotator {
+    @include set-var(rotate-from, $rotate-from);
+    @include set-var(rotate-to, $rotate-to);
+  }
+}
 
-      @if not $disable-font {
-        &--font {
-          text-align: center;
-        }
+@mixin styles($disable-layer: false) {
+  @if not $_disable-icons {
+    @include utils.optional-layer(icon, $disable-layer) {
+      @include theme.default-system-theme {
+        @include use-dark-theme;
       }
 
-      @if not $disable-svg {
-        &--svg {
-          fill: currentcolor;
-          height: 1em;
-          width: 1em;
+      .rmd-icon {
+        @include use-var(font-size, size);
+        @include use-var(color);
+
+        // you normally don't want icons to shrink in flex containers.
+        // update the icon manually instead.
+        flex-shrink: 0;
+        user-select: none;
+
+        @if not $disable-font {
+          &--font {
+            text-align: center;
+          }
         }
-      }
 
-      @if not $disable-symbol {
-        &--symbol {
-          font-variation-settings:
-            "FILL" get-var(symbol-fill),
-            "wght" get-var(symbol-weight),
-            "GRAD" get-var(symbol-grade),
-            "opsz" get-var(symbol-optical-size);
+        @if not $disable-svg {
+          &--svg {
+            fill: currentcolor;
+            height: 1em;
+            width: 1em;
+          }
         }
-      }
 
-      @if not $disable-inline {
-        &--vab {
-          vertical-align: bottom;
+        @if not $disable-symbol {
+          &--symbol {
+            font-variation-settings:
+              "FILL" get-var(symbol-fill),
+              "wght" get-var(symbol-weight),
+              "GRAD" get-var(symbol-grade),
+              "opsz" get-var(symbol-optical-size);
+          }
         }
-      }
 
-      @if not $disable-spacing-before {
-        &--before {
-          @include utils.auto-rtl(margin-right, get-var(spacing), 0);
+        @if not $disable-inline {
+          &--vab {
+            vertical-align: bottom;
+          }
         }
-      }
 
-      @if not $disable-spacing-after {
-        &--after {
-          @include utils.auto-rtl(margin-left, get-var(spacing), 0);
+        @if not $disable-spacing-before {
+          &--before {
+            @include utils.auto-rtl(margin-right, get-var(spacing), 0);
+          }
         }
-      }
 
-      @if not $disable-spacing-above {
-        &--above {
-          @include use-var(margin-top, spacing);
+        @if not $disable-spacing-after {
+          &--after {
+            @include utils.auto-rtl(margin-left, get-var(spacing), 0);
+          }
         }
-      }
 
-      @if not $disable-spacing-below {
-        &--below {
-          @include use-var(margin-bottom, spacing);
+        @if not $disable-spacing-above {
+          &--above {
+            @include use-var(margin-bottom, spacing);
+          }
         }
-      }
 
-      @if not $disable-dense {
-        &--dense {
-          @include set-var(size, $dense-size);
+        @if not $disable-spacing-below {
+          &--below {
+            @include use-var(margin-top, spacing);
+          }
+        }
+
+        @if not $disable-dense {
+          &--dense {
+            @include set-var(size, $dense-size);
+          }
         }
       }
     }
-  }
 
-  @if not $disable-rotator {
-    .rmd-icon-rotator {
-      transform: rotate(get-var(rotate-from));
+    @if not $disable-rotator {
+      .rmd-icon-rotator {
+        transform: rotate(get-var(rotate-from));
 
-      &--animate {
-        transition: transform $rotate-duration linear;
-      }
+        &--animate {
+          transition: transform $rotate-duration linear;
+        }
 
-      &--rotated {
-        transform: rotate(get-var(rotate-to));
+        &--rotated {
+          transform: rotate(get-var(rotate-to));
+        }
       }
     }
   }