@react-md/core 6.3.4 → 6.5.0

package/src/movement/useKeyboardMovementProvider.ts

@@ -28,6 +28,7 @@ import {
   type KeyboardMovementContext,
   type KeyboardMovementProviderImplementation,
   type KeyboardMovementProviderOptions,
+  type KeyboardMovementUpdateFocusIndexOptions,
 } from "./types.js";
 import {
   getFirstFocusableIndex,
@@ -62,6 +63,8 @@ export const DEFAULT_KEYBOARD_MOVEMENT_CONTEXT: Readonly<KeyboardMovementContext
     focusNext: noop,
     focusPrevious: noop,
     focusFromKey: noop,
+    focusCurrent: (): undefined => {},
+    updateFocusIndex: noop,
   };
 
 /**
@@ -291,14 +294,18 @@ export function useKeyboardMovementProvider<E extends HTMLElement>(
 
     return getFocusableElements(container, programmatic);
   }, [getFocusableElements, nodeRef, programmatic]);
-  const updateFocusIndex = useCallback(
-    (index: number, focusables = getFocusableElementsFromRef()) => {
-      if (currentFocusIndex.current === index || index === -1) {
+  const focusCurrent = useCallback(
+    (focusables = getFocusableElementsFromRef()): HTMLElement | undefined => {
+      const index = currentFocusIndex.current;
+      if (index === -1) {
         return;
       }
 
-      currentFocusIndex.current = index;
       const focused = focusables[index];
+      if (!focused) {
+        return;
+      }
+
       if (tabIndexBehavior) {
         focused.scrollIntoView({
           block: "nearest",
@@ -311,65 +318,89 @@ export function useKeyboardMovementProvider<E extends HTMLElement>(
         focused.focus();
       }
 
-      onFocusChange({
+      return focused;
+    },
+    [getFocusableElementsFromRef, tabIndexBehavior]
+  );
+  const updateFocusIndex = useCallback(
+    (options: KeyboardMovementUpdateFocusIndexOptions) => {
+      const {
         index,
-        element: focused,
-      });
+        force,
+        focusables = getFocusableElementsFromRef(),
+      } = options;
+      const isSameIndex = currentFocusIndex.current === index;
+      if ((!force && isSameIndex) || index === -1) {
+        return;
+      }
+
+      currentFocusIndex.current = index;
+      const focused = focusCurrent(focusables);
+      if (focused && !isSameIndex) {
+        onFocusChange({
+          index,
+          element: focused,
+        });
+      }
     },
-    [getFocusableElementsFromRef, onFocusChange, tabIndexBehavior]
+    [focusCurrent, getFocusableElementsFromRef, onFocusChange]
   );
 
   const focusNext = useCallback(
-    (focusables = getFocusableElementsFromRef()) => {
-      updateFocusIndex(
-        getNextFocusableIndex({
+    (focusables = getFocusableElementsFromRef(), force = false) => {
+      updateFocusIndex({
+        index: getNextFocusableIndex({
           loopable,
           increment: true,
           focusables,
           includeDisabled: true,
           currentFocusIndex: currentFocusIndex.current,
         }),
-        focusables
-      );
+        force,
+        focusables,
+      });
     },
     [getFocusableElementsFromRef, loopable, updateFocusIndex]
   );
   const focusPrevious = useCallback(
-    (focusables = getFocusableElementsFromRef()) => {
-      updateFocusIndex(
-        getNextFocusableIndex({
+    (focusables = getFocusableElementsFromRef(), force = false) => {
+      updateFocusIndex({
+        index: getNextFocusableIndex({
           loopable,
           increment: false,
           focusables,
           includeDisabled: true,
           currentFocusIndex: currentFocusIndex.current,
         }),
-        focusables
-      );
+        force,
+        focusables,
+      });
     },
     [getFocusableElementsFromRef, loopable, updateFocusIndex]
   );
   const focusFirst = useCallback(
-    (focusables = getFocusableElementsFromRef()) => {
-      updateFocusIndex(
-        getFirstFocusableIndex({
+    (focusables = getFocusableElementsFromRef(), force = false) => {
+      updateFocusIndex({
+        index: getFirstFocusableIndex({
           focusables,
           includeDisabled,
         }),
-        focusables
-      );
+        force,
+        focusables,
+      });
     },
     [getFocusableElementsFromRef, includeDisabled, updateFocusIndex]
   );
   const focusLast = useCallback(
-    (focusables = getFocusableElementsFromRef()) => {
-      updateFocusIndex(
-        getLastFocusableIndex({
+    (focusables = getFocusableElementsFromRef(), force = false) => {
+      updateFocusIndex({
+        index: getLastFocusableIndex({
           focusables,
           includeDisabled,
         }),
-        focusables
-      );
+        force,
+        focusables,
+      });
     },
     [getFocusableElementsFromRef, includeDisabled, updateFocusIndex]
   );
@@ -377,6 +408,7 @@ export function useKeyboardMovementProvider<E extends HTMLElement>(
     (options: KeyboardFocusFromKeyOptions) => {
       const {
         key,
+        force,
         reversed,
         focusables = getFocusableElementsFromRef(),
       } = options;
@@ -391,7 +423,7 @@ export function useKeyboardMovementProvider<E extends HTMLElement>(
         ),
         startIndex: reversed ? -1 : currentFocusIndex.current,
       });
-      updateFocusIndex(index, focusables);
+      updateFocusIndex({ index, force, focusables });
     },
     [getFocusableElementsFromRef, includeDisabled, searchable, updateFocusIndex]
   );
@@ -407,12 +439,15 @@ export function useKeyboardMovementProvider<E extends HTMLElement>(
       focusNext,
       focusPrevious,
       focusFromKey,
+      focusCurrent,
+      updateFocusIndex,
       includeDisabled,
       tabIndexBehavior,
       activeDescendantId,
     }),
     [
       activeDescendantId,
+      focusCurrent,
       focusFirst,
       focusFromKey,
       focusLast,
@@ -423,6 +458,7 @@ export function useKeyboardMovementProvider<E extends HTMLElement>(
       loopable,
       searchable,
       tabIndexBehavior,
+      updateFocusIndex,
     ]
   );
 
@@ -557,7 +593,7 @@ export function useKeyboardMovementProvider<E extends HTMLElement>(
         ): void => {
           event.preventDefault();
           event.stopPropagation();
-          updateFocusIndex(index, focusables);
+          updateFocusIndex({ index, focusables });
         };
 
         extendKeyDown({
@@ -619,7 +655,13 @@ export function useKeyboardMovementProvider<E extends HTMLElement>(
         }
 
         if (trackTabKeys && key === "Tab") {
-          currentFocusIndex.current += event.shiftKey ? -1 : 1;
+          currentFocusIndex.current = getNextFocusableIndex({
+            loopable,
+            increment: !event.shiftKey,
+            focusables: getFocusableElements(currentTarget, programmatic),
+            includeDisabled,
+            currentFocusIndex: currentFocusIndex.current,
+          });
           return;
         }
 
@@ -633,21 +675,18 @@ export function useKeyboardMovementProvider<E extends HTMLElement>(
           !increment &&
           decrementKeys.includes(key);
 
-        if (jumpToFirst) {
+        if (jumpToFirst || jumpToLast || increment || decrement) {
           event.preventDefault();
           event.stopPropagation();
+        }
+
+        if (jumpToFirst) {
           focusFirst();
         } else if (jumpToLast) {
-          event.preventDefault();
-          event.stopPropagation();
           focusLast();
         } else if (increment) {
-          event.preventDefault();
-          event.stopPropagation();
           focusNext();
         } else if (decrement) {
-          event.preventDefault();
-          event.stopPropagation();
           focusPrevious();
         }
       },

package/src/navigation/CollapsibleNavGroup.tsx

@@ -23,8 +23,7 @@ const noop = (): void => {
  * @since 6.0.0
  */
 export interface CollapsibleNavGroupProps
-  extends NavGroupProps,
-    NavItemButtonRotatorProps {
+  extends NavGroupProps, NavItemButtonRotatorProps {
   liProps?: PropsWithRef<LiHTMLAttributes<HTMLLIElement>>;
   buttonProps?: PropsWithRef<ButtonProps>;
   collapseOptions?: Omit<

package/src/navigation/NavItem.tsx

@@ -8,8 +8,7 @@ import { type NavItemClassNameOptions, navItem } from "./navItemStyles.js";
  * augmentation.
  */
 export interface NavItemProps
-  extends LiHTMLAttributes<HTMLLIElement>,
-    NavItemClassNameOptions {
+  extends LiHTMLAttributes<HTMLLIElement>, NavItemClassNameOptions {
   children: ReactNode;
 }
 

package/src/navigation/NavItemButton.tsx

@@ -25,7 +25,8 @@ export interface NavItemButtonRotatorProps {
  * @since 6.0.0
  */
 export interface NavItemButtonProps
-  extends Omit<ButtonProps, "children">,
+  extends
+    Omit<ButtonProps, "children">,
     NavItemButtonRotatorProps,
     NavItemContentProps {
   onClick: MouseEventHandler<HTMLButtonElement>;

package/src/navigation/NavItemLink.tsx

@@ -25,7 +25,8 @@ import {
  * @since 6.0.0
  */
 export interface NavItemLinkProps
-  extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "children">,
+  extends
+    Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "children">,
     NavItemContentProps,
     ComponentWithRippleProps {
   /** @defaultValue `"a"` */

package/src/navigation/getTableOfContentsHeadings.ts

@@ -8,8 +8,7 @@ import {
  * @internal
  * @since 6.0.0
  */
-export interface GetTableOfContentsHeadingsOptions
-  extends Required<TableOfContentsHeadingsOptions> {
+export interface GetTableOfContentsHeadingsOptions extends Required<TableOfContentsHeadingsOptions> {
   ssr: boolean;
 }
 

package/src/navigation/types.ts

@@ -265,8 +265,7 @@ export interface TableOfContentsHeading extends HeadingReference {
 
 /** @since 6.0.0 */
 export interface TableOfContentsHeadingItem
-  extends TableOfContentsHeading,
-    HeadingReferenceWithChildren {
+  extends TableOfContentsHeading, HeadingReferenceWithChildren {
   items?: TableOfContentsHeadingItem[];
 }
 

package/src/overlay/Overlay.tsx

@@ -23,7 +23,8 @@ import {
  * augmentation.
  */
 export interface OverlayProps
-  extends HTMLAttributes<HTMLSpanElement>,
+  extends
+    HTMLAttributes<HTMLSpanElement>,
     BaseOverlayClassNameOptions,
     CSSTransitionComponentProps,
     TransitionActions {

package/src/positioning/createHorizontalPosition.ts

@@ -31,13 +31,12 @@ export interface HorizontalFixConfig extends XCoordConfig {
 /**
  * @internal
  */
-export interface CreateHorizontalPositionOptions
-  extends Required<
-    Pick<
-      FixedPositionOptions,
-      "vwMargin" | "xMargin" | "width" | "disableSwapping"
-    >
-  > {
+export interface CreateHorizontalPositionOptions extends Required<
+  Pick<
+    FixedPositionOptions,
+    "vwMargin" | "xMargin" | "width" | "disableSwapping"
+  >
+> {
   x: HorizontalPosition;
   vw: number;
   elWidth: number;
@@ -205,11 +204,10 @@ export function createAnchoredRight(config: HorizontalFixConfig): XPosition {
   return { actualX, left };
 }
 
-export interface EqualWidthOptions
-  extends Pick<
-    CreateHorizontalPositionOptions,
-    "x" | "elWidth" | "xMargin" | "vwMargin" | "containerRect" | "initialX"
-  > {
+export interface EqualWidthOptions extends Pick<
+  CreateHorizontalPositionOptions,
+  "x" | "elWidth" | "xMargin" | "vwMargin" | "containerRect" | "initialX"
+> {
   screenRight: number;
   isMinWidth: boolean;
 }

package/src/positioning/createVerticalPosition.ts

@@ -27,17 +27,16 @@ export interface VerticalFixConfig extends YCoordConfig {
 }
 
 /** @internal */
-export interface CreateVerticalPositionOptions
-  extends Required<
-    Pick<
-      FixedPositionOptions,
-      | "yMargin"
-      | "vhMargin"
-      | "preventOverlap"
-      | "disableSwapping"
-      | "disableVHBounds"
-    >
-  > {
+export interface CreateVerticalPositionOptions extends Required<
+  Pick<
+    FixedPositionOptions,
+    | "yMargin"
+    | "vhMargin"
+    | "preventOverlap"
+    | "disableSwapping"
+    | "disableVHBounds"
+  >
+> {
   y: VerticalPosition;
   vh: number;
   initialY?: number;

package/src/positioning/useFixedPositioning.ts

@@ -42,8 +42,9 @@ export type FixedPositioningTransitionCallbacks = Pick<
  * transition.
  * @since 4.0.0
  */
-export interface FixedPositioningTransitionOptions<E extends HTMLElement>
-  extends FixedPositioningTransitionCallbacks {
+export interface FixedPositioningTransitionOptions<
+  E extends HTMLElement,
+> extends FixedPositioningTransitionCallbacks {
   /** {@inheritDoc TransitionOptions.nodeRef} */
   nodeRef?: Ref<E>;
 }
@@ -94,7 +95,9 @@ export type TransitionScrollCallback<
 export interface FixedPositioningOptions<
   FixedToElement extends HTMLElement,
   FixedElement extends HTMLElement,
-> extends FixedPositioningTransitionOptions<FixedElement>,
+>
+  extends
+    FixedPositioningTransitionOptions<FixedElement>,
     CalculateFixedPositionOptions {
   /**
    * An optional style that will be merged with the fixed positioning required

package/src/progress/CircularProgress.tsx

@@ -24,7 +24,8 @@ import { type ProgressProps } from "./types.js";
  * longer rotates while increasing value.
  */
 export interface CircularProgressProps
-  extends Omit<HTMLAttributes<HTMLSpanElement>, "id">,
+  extends
+    Omit<HTMLAttributes<HTMLSpanElement>, "id">,
     ProgressProps,
     CircularProgressClassNameOptions {
   /**

package/src/progress/LinearProgress.tsx

@@ -21,7 +21,8 @@ import { type ProgressProps } from "./types.js";
  * module augmentation.
  */
 export interface LinearProgressProps
-  extends Omit<HTMLAttributes<HTMLSpanElement>, "id" | "children">,
+  extends
+    Omit<HTMLAttributes<HTMLSpanElement>, "id" | "children">,
     BaseLinearProgressClassNameOptions,
     ProgressProps {
   /**

package/src/progress/linearProgressStyles.ts

@@ -36,8 +36,7 @@ export interface BaseLinearProgressClassNameOptions {
 /**
  * @since 6.2.0
  */
-export interface LinearProgressClassNameOptions
-  extends BaseLinearProgressClassNameOptions {
+export interface LinearProgressClassNameOptions extends BaseLinearProgressClassNameOptions {
   /** @defaultValue `false` */
   indeterminate?: boolean;
 }

package/src/responsive-item/ResponsiveItem.tsx

@@ -15,8 +15,7 @@ import {
  * {@link ResponsiveItemProps.responsive} prop.
  */
 export interface ResponsiveItemProps
-  extends HTMLAttributes<HTMLSpanElement>,
-    ResponsiveItemClassNameOptions {}
+  extends HTMLAttributes<HTMLSpanElement>, ResponsiveItemClassNameOptions {}
 
 /**
  * @example Image Example

package/src/responsive-item/ResponsiveItemOverlay.tsx

@@ -12,7 +12,8 @@ import {
  * `ResponsiveItemOverlayProps`.
  */
 export interface ResponsiveItemOverlayProps
-  extends HTMLAttributes<HTMLSpanElement>,
+  extends
+    HTMLAttributes<HTMLSpanElement>,
     ResponsiveItemOverlayClassNameOptions {}
 
 /**

package/src/searching/caseInsensitive.ts

@@ -62,8 +62,7 @@ export interface CaseInsensitiveStartsWithOptions {
 /**
  * @since 6.0.0
  */
-export interface IsCaseInsensitiveMatchOptions
-  extends CaseInsensitiveStartsWithOptions {
+export interface IsCaseInsensitiveMatchOptions extends CaseInsensitiveStartsWithOptions {
   /**
    * The current search query.
    */
@@ -94,8 +93,7 @@ export function isCaseInsensitiveMatch(
  * @since 6.0.0
  */
 export interface CaseInsensitiveOptions<T>
-  extends BaseSearchOptions<T>,
-    CaseInsensitiveStartsWithOptions {}
+  extends BaseSearchOptions<T>, CaseInsensitiveStartsWithOptions {}
 
 /**
  * @example String list

package/src/segmented-button/SegmentedButton.tsx

@@ -23,7 +23,8 @@ import {
  * module augmentation.
  */
 export interface SegmentedButtonProps
-  extends ButtonHTMLAttributes<HTMLButtonElement>,
+  extends
+    ButtonHTMLAttributes<HTMLButtonElement>,
     BaseMaxWidthTransitionOptions,
     BaseSegmentedButtonClassNameOptions,
     ComponentWithRippleProps {

package/src/segmented-button/SegmentedButtonContainer.tsx

@@ -9,7 +9,8 @@ import {
  * @since 6.0.0
  */
 export interface SegmentedButtonContainerProps
-  extends HTMLAttributes<HTMLDivElement>,
+  extends
+    HTMLAttributes<HTMLDivElement>,
     SegmentedButtonContainerClassNameOptions {
   children: ReactNode;
 }

package/src/segmented-button/segmentedButtonStyles.ts

@@ -42,8 +42,7 @@ export interface BaseSegmentedButtonClassNameOptions {
  * @since 6.0.0
  * @since 6.3.1 Extends BaseSegmentedButtonClassNameOptions
  */
-export interface SegmentedButtonClassNameOptions
-  extends BaseSegmentedButtonClassNameOptions {
+export interface SegmentedButtonClassNameOptions extends BaseSegmentedButtonClassNameOptions {
   /** @internal */
   pressedClassName?: string;
 }

package/src/sheet/Sheet.tsx

@@ -21,8 +21,7 @@ export type SheetDialogProps = Omit<BaseDialogProps, "role" | "type" | "modal">;
  * and exports the `SheetDialogProps`.
  */
 export interface BaseSheetProps
-  extends SheetDialogProps,
-    BaseSheetClassNameOptions {
+  extends SheetDialogProps, BaseSheetClassNameOptions {
   /**
    * @defaultValue `"dialog"`
    */

package/src/snackbar/Toast.tsx

@@ -27,7 +27,8 @@ import { type BaseToastClasNameOptions, toast } from "./toastStyles.js";
  * @since 6.0.0
  */
 export interface ConfigurableToastProps
-  extends HTMLAttributes<HTMLDivElement>,
+  extends
+    HTMLAttributes<HTMLDivElement>,
     BaseToastClasNameOptions,
     TransitionCallbacks {
   /**

package/src/spinbutton/SpinButton.tsx

@@ -0,0 +1,98 @@
+"use client";
+
+import { type HTMLAttributes, forwardRef } from "react";
+
+import { type LabelRequiredForA11y } from "../types.js";
+import { defaultGetSpinButtonTextContent } from "./defaults.js";
+import {
+  type SpinButtonOptions,
+  type SpinButtonUncontrolledValueOptions,
+  type SpinButtonValueOptions,
+} from "./types.js";
+import { useSpinButton } from "./useSpinButton.js";
+
+/**
+ * @since 6.4.0
+ */
+export interface SpinButtonProps
+  extends
+    Omit<HTMLAttributes<HTMLDivElement>, keyof SpinButtonOptions>,
+    Omit<SpinButtonOptions<HTMLDivElement>, "ref" | "children"> {}
+
+/**
+ * The `SpinButton` component can be used as a simple wrapper around the
+ * {@link useSpinButton} hook if it should be rendered within a `<div>` and
+ * only the rendering behavior is required.
+ *
+ * @since 6.4.0
+ */
+export const SpinButton = forwardRef<
+  HTMLDivElement,
+  LabelRequiredForA11y<SpinButtonProps> & SpinButtonValueOptions
+>(function SpinButton(props, ref) {
+  const {
+    id,
+    min,
+    max,
+    minDigits,
+    maxDigits,
+    step,
+    form,
+    error,
+    disabled,
+    readOnly,
+    required,
+    fallback,
+    mappings,
+    value,
+    defaultValue,
+    onValueChange,
+    getValueText,
+    getTextContent = defaultGetSpinButtonTextContent,
+    placeholderChar,
+    defaultKeyboardValue,
+    ...remaining
+  } = props;
+
+  const valueProps = {
+    value,
+    defaultValue,
+  } as SpinButtonUncontrolledValueOptions<HTMLDivElement>;
+
+  const { value: currentValue, spinButtonProps } = useSpinButton({
+    id,
+    ref,
+    min,
+    max,
+    minDigits,
+    maxDigits,
+    step,
+    form,
+    fallback,
+    mappings,
+    error,
+    disabled,
+    readOnly,
+    required,
+    ...valueProps,
+    onValueChange,
+    getValueText,
+    getTextContent,
+    placeholderChar,
+    defaultKeyboardValue,
+  });
+
+  return (
+    <div {...remaining} {...spinButtonProps}>
+      {getTextContent({
+        min,
+        max,
+        minDigits,
+        maxDigits,
+        value: currentValue,
+        fallback,
+        placeholderChar,
+      })}
+    </div>
+  );
+});

package/src/spinbutton/SpinButtonGroupProvider.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { createContext, useContext } from "react";
+
+import { type KeyboardMovementContext } from "../movement/types.js";
+import { DEFAULT_KEYBOARD_MOVEMENT_CONTEXT } from "../movement/useKeyboardMovementProvider.js";
+
+/**
+ * @since 6.4.0
+ */
+export type SpinButtonGroupContext = KeyboardMovementContext;
+
+const context = createContext<SpinButtonGroupContext>(
+  DEFAULT_KEYBOARD_MOVEMENT_CONTEXT
+);
+context.displayName = "SpinButtonGroup";
+
+/**
+ * This should be used along with the `useSpinButtonGroupProvider` to link
+ * `SpinButton` components together. The next `SpinButton` will be focused as
+ * an value is typed to completion.
+ *
+ * @since 6.4.0
+ */
+export const { Provider: SpinButtonGroupProvider } = context;
+
+/**
+ * @since 6.4.0
+ */
+export function useSpinButtonGroup(): Readonly<SpinButtonGroupContext> {
+  return useContext(context);
+}