@react-md/core 6.3.4 → 6.4.0

package/src/spinbutton/useSpinButtonGroupProvider.ts

@@ -0,0 +1,104 @@
+"use client";
+
+import {
+  DEFAULT_LTR_KEYBOARD_MOVEMENT_WITHOUT_JUMP,
+  DEFAULT_RTL_KEYBOARD_MOVEMENT_WITHOUT_JUMP,
+} from "../movement/constants.js";
+import {
+  type KeyboardMovementProps,
+  type KeyboardMovementProviderImplementation,
+  type SimpleKeyboardMovementWrapperOptions,
+} from "../movement/types.js";
+import { useKeyboardMovementProvider } from "../movement/useKeyboardMovementProvider.js";
+import { useDir } from "../typography/WritingDirectionProvider.js";
+
+const SPINBUTTON_ROLE = '[role="spinbutton"]';
+
+/**
+ * @internal
+ * @since 6.4.0
+ */
+const getSpinButtonsOnly = (container: HTMLElement): readonly HTMLElement[] => [
+  ...container.querySelectorAll<HTMLElement>(SPINBUTTON_ROLE),
+];
+
+/**
+ * @since 6.4.0
+ */
+export interface SpinButtonGroupProviderOptions<
+  E extends HTMLElement = HTMLElement,
+> extends SimpleKeyboardMovementWrapperOptions<E> {
+  /**
+   * Set this to `true` to update the container's `onClick` handler to move
+   * focus to the first spinbutton that does not have a value or the first
+   * spinbutton in the group so that focus is always moved to the spin buttons.
+   *
+   * @defaultValue `false`
+   */
+  forceFocusWithin?: boolean;
+}
+
+export interface ProvidedSpinButtonGroupProps<
+  E extends HTMLElement = HTMLElement,
+> extends KeyboardMovementProps<E> {
+  role: "group";
+}
+
+/**
+ * @since 6.4.0
+ */
+export interface SpinButtonGroupProviderImplementation<
+  E extends HTMLElement = HTMLElement,
+> extends KeyboardMovementProviderImplementation<E> {
+  movementProps: Readonly<ProvidedSpinButtonGroupProps<E>>;
+}
+
+/**
+ * @since 6.4.0
+ */
+export function useSpinButtonGroupProvider<E extends HTMLElement = HTMLElement>(
+  options: SpinButtonGroupProviderOptions<E> = {}
+): SpinButtonGroupProviderImplementation<E> {
+  const { disabled, forceFocusWithin } = options;
+
+  const isRTL = useDir().dir === "rtl";
+  const movementKeys = isRTL
+    ? DEFAULT_RTL_KEYBOARD_MOVEMENT_WITHOUT_JUMP
+    : DEFAULT_LTR_KEYBOARD_MOVEMENT_WITHOUT_JUMP;
+
+  const { movementProps, ...remaining } = useKeyboardMovementProvider({
+    ...options,
+    ...movementKeys,
+    loopable: false,
+    trackTabKeys: true,
+    getFocusableElements: getSpinButtonsOnly,
+  });
+
+  return {
+    ...remaining,
+    movementProps: {
+      ...movementProps,
+      role: "group",
+      onClick: (event) => {
+        movementProps.onClick(event);
+
+        const { target, currentTarget } = event;
+        if (
+          disabled ||
+          !forceFocusWithin ||
+          !(target instanceof HTMLElement) ||
+          target.closest(SPINBUTTON_ROLE)
+        ) {
+          return;
+        }
+
+        const buttons = [...currentTarget.querySelectorAll(SPINBUTTON_ROLE)];
+        const i = buttons.findIndex((button) => !button.ariaValueNow);
+        remaining.movementContext.updateFocusIndex({
+          index: Math.max(0, i),
+          force: true,
+        });
+      },
+    },
+  };
+}

package/src/spinbutton/utils/deselectNode.ts

@@ -0,0 +1,17 @@
+/**
+ * @since 6.4.0
+ * @internal
+ */
+export function deselectNode(node: Node): void {
+  const selection = window.getSelection();
+  if (!selection) {
+    return;
+  }
+
+  for (let i = 0; i < selection.rangeCount; i++) {
+    const range = selection.getRangeAt(i);
+    if (range.startContainer.contains(node)) {
+      selection.removeRange(range);
+    }
+  }
+}

package/src/spinbutton/utils/resolveInputEvent.ts

@@ -0,0 +1,112 @@
+import { type MinMaxRange } from "../../types.js";
+import { getNumberOfDigits } from "../../utils/getNumberOfDigits.js";
+import {
+  type SpinButtonChangeReason,
+  type SpinButtonCharacterValueMap,
+  type SpinButtonValue,
+} from "../types.js";
+
+/**
+ * @since 6.4.0
+ * @internal
+ */
+interface ResolveInputEventOptions extends Partial<MinMaxRange> {
+  text: string;
+  mappings?: SpinButtonCharacterValueMap;
+  minDigits?: number;
+  maxDigits?: number;
+  prevText: string;
+  prevValue: SpinButtonValue;
+  typedCount: number;
+}
+
+type SpinButtonResolvedInputReason =
+  | SpinButtonChangeReason
+  | "ignored"
+  | "placeholder-digit";
+
+/**
+ * @since 6.4.0
+ * @internal
+ */
+interface ResolveInputEvent {
+  reason: SpinButtonResolvedInputReason;
+  nextValue: SpinButtonValue;
+}
+
+/**
+ * @since 6.4.0
+ * @internal
+ */
+export function resolveInputEvent(
+  options: ResolveInputEventOptions
+): ResolveInputEvent {
+  const {
+    min,
+    max,
+    minDigits = getNumberOfDigits(min),
+    maxDigits = getNumberOfDigits(max),
+    text,
+    mappings,
+    typedCount,
+    prevValue,
+  } = options;
+
+  let { prevText } = options;
+  if (typedCount === 0) {
+    prevText = "";
+  }
+
+  if (!text) {
+    return {
+      reason: "cleared",
+      nextValue: null,
+    };
+  }
+
+  if (mappings) {
+    const nextValue = mappings[text] ?? prevValue;
+
+    let reason: SpinButtonResolvedInputReason = "ignored";
+    if (typeof mappings[text] === "number") {
+      reason = "typed-to-completion";
+    }
+
+    return {
+      reason,
+      nextValue,
+    };
+  }
+
+  if (/[^0-9]/.test(text)) {
+    return {
+      reason: "ignored",
+      nextValue: prevValue,
+    };
+  }
+
+  let reason: SpinButtonResolvedInputReason = "type";
+  let nextValue: SpinButtonValue = parseInt(prevText + text, 10);
+  if (typeof minDigits === "number" && typedCount + 1 < minDigits) {
+    reason = "placeholder-digit";
+  }
+
+  if (typeof max === "number" && nextValue > max) {
+    nextValue = prevValue;
+  }
+
+  if (
+    typeof nextValue === "number" &&
+    // if typing a new value surpasses the number of digits allowed
+    ((typeof maxDigits === "number" && typedCount + 1 >= maxDigits) ||
+      // typing a new value would exceed the max value
+      (typeof max === "number" && nextValue * 10 > max))
+  ) {
+    reason = "typed-to-completion";
+  }
+
+  return {
+    reason,
+    nextValue,
+  };
+}

package/src/spinbutton/utils/selectNode.ts

@@ -0,0 +1,15 @@
+/**
+ * @since 6.4.0
+ * @internal
+ */
+export function selectNode(node: Node): void {
+  const selection = window.getSelection();
+  if (!selection) {
+    return;
+  }
+
+  const range = document.createRange();
+  range.selectNodeContents(node);
+  selection.removeAllRanges();
+  selection.addRange(range);
+}

package/src/table/StickyTableSection.tsx

@@ -14,7 +14,8 @@ import { useTableSectionConfig } from "./useTableSectionConfig.js";
 
 /** @since 6.0.0 */
 export interface StickyTableSectionProps
-  extends HTMLAttributes<HTMLTableSectionElement>,
+  extends
+    HTMLAttributes<HTMLTableSectionElement>,
     TableStickySectionConfiguration,
     TableSectionConfiguration {
   type: "header" | "footer";

package/src/table/Table.tsx

@@ -27,8 +27,7 @@ declare module "react" {
 }
 
 export interface TableProps
-  extends TableHTMLAttributes<HTMLTableElement>,
-    TableConfiguration {}
+  extends TableHTMLAttributes<HTMLTableElement>, TableConfiguration {}
 
 /**
  * **Client Component**

package/src/table/TableBody.tsx

@@ -10,7 +10,8 @@ import {
 import { type TableConfig, type TableConfigContext } from "./types.js";
 
 export interface TableBodyProps
-  extends HTMLAttributes<HTMLTableSectionElement>,
+  extends
+    HTMLAttributes<HTMLTableSectionElement>,
     Omit<TableConfig, "header"> {}
 
 /**

package/src/table/TableCellContent.tsx

@@ -19,8 +19,7 @@ export type TableCellContentsIconRotatorProps = Omit<
  * can be passed to the `ButtonUnstyled`
  * @internal
  */
-export interface TableCellContentProps
-  extends ButtonHTMLAttributes<HTMLButtonElement> {
+export interface TableCellContentProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   /**
    * The current sort order for this cell. Setting this to `null` will prevent
    * the button from being rendered.

package/src/table/TableCheckbox.tsx

@@ -48,8 +48,7 @@ export type TableCheckboxSupportedCheckboxProps = Pick<
  * `"Toggle Row Selection"` to `"Select Row"`.
  */
 export interface TableCheckboxProps
-  extends TableCheckboxTdHTMLAttributes,
-    TableCheckboxSupportedCheckboxProps {
+  extends TableCheckboxTdHTMLAttributes, TableCheckboxSupportedCheckboxProps {
   /**
    * @defaultValue `!props["aria-labelledby"] ? "Select Row" : undefined`
    */

package/src/table/TableFooter.tsx

@@ -8,8 +8,7 @@ import { type TableSectionConfiguration } from "./types.js";
 import { useTableSectionConfig } from "./useTableSectionConfig.js";
 
 export interface TableFooterProps
-  extends HTMLAttributes<HTMLTableSectionElement>,
-    TableSectionConfiguration {
+  extends HTMLAttributes<HTMLTableSectionElement>, TableSectionConfiguration {
   /**
    * NOTE: It is recommended to use the `StickyTableSection` component instead
    * of enabling this prop since it supports dynamically adding styles while the

package/src/table/TableHeader.tsx

@@ -8,8 +8,7 @@ import { type TableSectionConfiguration } from "./types.js";
 import { useTableSectionConfig } from "./useTableSectionConfig.js";
 
 export interface TableHeaderProps
-  extends HTMLAttributes<HTMLTableSectionElement>,
-    TableSectionConfiguration {
+  extends HTMLAttributes<HTMLTableSectionElement>, TableSectionConfiguration {
   /**
    * NOTE: It is recommended to use the `StickyTableSection` component instead
    * of enabling this prop since it supports dynamically adding styles while the

package/src/table/TableRadio.tsx

@@ -43,8 +43,7 @@ export type TableRadioSupportedRadioProps = Pick<
  * @since 6.0.0
  */
 export interface TableRadioProps
-  extends TableRadioTdHTMLAttributes,
-    TableRadioSupportedRadioProps {
+  extends TableRadioTdHTMLAttributes, TableRadioSupportedRadioProps {
   /**
    * @defaultValue `!props["aria-labelledby"] ? "Select Row" : undefined`
    */

package/src/table/TableRow.tsx

@@ -7,8 +7,7 @@ import { tableRow } from "./tableRowStyles.js";
 import { type TableRowConfiguration } from "./types.js";
 
 export interface TableRowProps
-  extends HTMLAttributes<HTMLTableRowElement>,
-    TableRowConfiguration {
+  extends HTMLAttributes<HTMLTableRowElement>, TableRowConfiguration {
   /**
    * Boolean if the current row has been selected and should apply the selected
    * background-color.

package/src/table/useStickyTableSection.tsx

@@ -44,8 +44,7 @@ export const isTableFooterStickyActive: IsStickyTableSectionActive = (
 };
 
 /** @since 6.0.0 */
-export interface TableStickySectionOptions
-  extends TableStickySectionConfiguration {
+export interface TableStickySectionOptions extends TableStickySectionConfiguration {
   ref?: Ref<HTMLTableSectionElement>;
   type: "header" | "footer";
 }

package/src/tabs/SimpleTabPanel.tsx

@@ -8,7 +8,8 @@ import { type ProvidedTabPanelProps } from "./useTabs.js";
  * @since 6.0.0
  */
 export interface SimpleTabPanelProps
-  extends Omit<HTMLAttributes<HTMLDivElement>, keyof ProvidedTabPanelProps>,
+  extends
+    Omit<HTMLAttributes<HTMLDivElement>, keyof ProvidedTabPanelProps>,
     ProvidedTabPanelProps {
   children: ReactNode;
 }

package/src/tabs/SimpleTabPanels.tsx

@@ -6,7 +6,8 @@ import { type ProvidedTabPanelsProps } from "./useTabs.js";
  * @since 6.0.0
  */
 export interface SimpleTabPanelsProps
-  extends HTMLAttributes<HTMLDivElement>,
+  extends
+    HTMLAttributes<HTMLDivElement>,
     Omit<ProvidedTabPanelsProps<HTMLDivElement>, "ref"> {
   children: ReactNode;
 }

package/src/tabs/Tab.tsx

@@ -21,8 +21,7 @@ import { type useTabs } from "./useTabs.js";
  * @since 6.0.0
  */
 export interface BaseTabProps
-  extends ComponentWithRippleProps,
-    BaseTabClassNameOptions {
+  extends ComponentWithRippleProps, BaseTabClassNameOptions {
   /**
    * Set this to `true` if the tab is currently active.
    *
@@ -51,8 +50,7 @@ export interface BaseTabProps
  * @since 6.0.0
  */
 export interface TabButtonProps
-  extends BaseTabProps,
-    ButtonHTMLAttributes<HTMLButtonElement> {
+  extends BaseTabProps, ButtonHTMLAttributes<HTMLButtonElement> {
   as?: "button";
 }
 
@@ -60,8 +58,7 @@ export interface TabButtonProps
  * @since 6.0.0
  */
 export interface TabLinkProps
-  extends BaseTabProps,
-    AnchorHTMLAttributes<HTMLAnchorElement> {
+  extends BaseTabProps, AnchorHTMLAttributes<HTMLAnchorElement> {
   as: CustomLinkComponent;
 }
 

package/src/tabs/TabList.tsx

@@ -27,7 +27,8 @@ import { type useTabs } from "./useTabs.js";
  * @since 6.0.0
  */
 export interface TabListProps
-  extends HTMLAttributes<HTMLDivElement>,
+  extends
+    HTMLAttributes<HTMLDivElement>,
     Omit<TabListClassNameOptions, "animate" | "indicator"> {
   activeIndex: number;
   setActiveIndex: (nextActiveIndex: number) => void;

package/src/tabs/TabListScrollButton.tsx

@@ -29,8 +29,7 @@ import {
  * @since 6.0.0
  */
 export interface BaseTabListScrollButtonProps
-  extends HTMLAttributes<HTMLDivElement>,
-    ButtonClassNameThemeOptions {
+  extends HTMLAttributes<HTMLDivElement>, ButtonClassNameThemeOptions {
   buttonProps?: PropsWithRef<ButtonProps>;
 
   /** @defaultValue `false` */

package/src/tabs/useMaxTabPanelHeight.ts

@@ -12,8 +12,10 @@ import { getTabPanelRoleOnly } from "./utils.js";
 /**
  * @since 6.0.0
  */
-export interface MaxTabPanelHeightOptions<E extends HTMLElement>
-  extends Pick<TabsImplementation, "getTabPanelsProps"> {
+export interface MaxTabPanelHeightOptions<E extends HTMLElement> extends Pick<
+  TabsImplementation,
+  "getTabPanelsProps"
+> {
   ref?: Ref<E>;
   style?: CSSProperties;
 
@@ -26,8 +28,9 @@ export interface MaxTabPanelHeightOptions<E extends HTMLElement>
 /**
  * @since 6.0.0
  */
-export interface ProvidedMaxTabPanelsHeightProps<E extends HTMLElement>
-  extends ProvidedTabPanelsProps<E> {
+export interface ProvidedMaxTabPanelsHeightProps<
+  E extends HTMLElement,
+> extends ProvidedTabPanelsProps<E> {
   style: CSSProperties;
 }
 

package/src/test-utils/data-testid.ts

@@ -2,8 +2,7 @@
 
 declare module "react" {
   interface HTMLAttributes<T>
-    extends React.AriaAttributes,
-      React.DOMAttributes<T> {
+    extends React.AriaAttributes, React.DOMAttributes<T> {
     "data-testid"?: string | number;
   }
 }

package/src/test-utils/mocks/match-media.ts

@@ -1,9 +1,4 @@
-import {
-  DEFAULT_DESKTOP_LARGE_MIN_WIDTH,
-  DEFAULT_DESKTOP_MIN_WIDTH,
-  DEFAULT_PHONE_MAX_WIDTH,
-  DEFAULT_TABLET_MIN_WIDTH,
-} from "../../media-queries/appSize.js";
+import { MEDIA_QUERY_CONFIG } from "../../media-queries/config.js";
 
 /**
  * @since 6.0.0
@@ -64,28 +59,28 @@ export type MatchMediaMatcher = (query: string) => boolean;
  * @returns `true` for phone media queries
  */
 export const matchPhone: MatchMediaMatcher = (query) =>
-  query.includes(DEFAULT_PHONE_MAX_WIDTH);
+  query.includes(`${MEDIA_QUERY_CONFIG.phoneMaxWidth}`);
 
 /**
  * @since 6.0.0
  * @returns `true` for tablet media queries
  */
 export const matchTablet: MatchMediaMatcher = (query) =>
-  query.includes(DEFAULT_TABLET_MIN_WIDTH);
+  query.includes(`${MEDIA_QUERY_CONFIG.tabletMinWidth}`);
 
 /**
  * @since 6.0.0
  * @returns `true` for desktop media queries
  */
 export const matchDesktop: MatchMediaMatcher = (query) =>
-  query.includes(DEFAULT_DESKTOP_MIN_WIDTH);
+  query.includes(`${MEDIA_QUERY_CONFIG.desktopMinWidth}`);
 
 /**
  * @since 6.0.0
  * @returns `true` for large desktop media queries
  */
 export const matchLargeDesktop: MatchMediaMatcher = (query) =>
-  query.includes(DEFAULT_DESKTOP_LARGE_MIN_WIDTH);
+  query.includes(`${MEDIA_QUERY_CONFIG.desktopLargeMinWidth}`);
 
 /**
  * @since 6.0.0

package/src/test-utils/vitest/timers.ts

@@ -27,7 +27,7 @@ export type RafSpy = MockInstance<typeof requestAnimationFrame>;
  * import { testImmediateRaf } from "@react-md/core/test-utils/vitest";
  *
  * afterEach(() => {
- *   jest.restoreAllMocks();
+ *   vi.restoreAllMocks();
  * });
  *
  * describe("some test suite", () => {

package/src/tooltip/Tooltip.tsx

@@ -32,7 +32,8 @@ import { type TooltipClassNameOptions, tooltip } from "./styles.js";
  * augmentation.
  */
 export interface TooltipProps
-  extends HTMLAttributes<HTMLSpanElement>,
+  extends
+    HTMLAttributes<HTMLSpanElement>,
     TooltipClassNameOptions,
     CSSTransitionComponentProps,
     SSRTransitionOptions,

package/src/tooltip/TooltipHoverModeProvider.tsx

@@ -38,8 +38,7 @@ export function useTooltipHoverMode(): Readonly<TooltipHoverModeContext> {
 /**
  * @since 6.0.0
  */
-export interface TooltipHoverModeProviderProps
-  extends Partial<HoverModeConfiguration> {
+export interface TooltipHoverModeProviderProps extends Partial<HoverModeConfiguration> {
   children: ReactNode;
 
   /**

package/src/tooltip/useTooltip.ts

@@ -129,8 +129,9 @@ export interface TooltippedElementEventHandlers<
  * @since 2.8.0
  * @since 6.0.0 Renamed from `TooltipHookProvidedElementProps`
  */
-export interface ProvidedTooltippedElementProps<E extends HTMLElement>
-  extends Required<TooltippedElementEventHandlers<E>> {
+export interface ProvidedTooltippedElementProps<
+  E extends HTMLElement,
+> extends Required<TooltippedElementEventHandlers<E>> {
   "aria-describedby": string | undefined;
   id: string;
 }
@@ -144,7 +145,9 @@ export interface ProvidedTooltippedElementProps<E extends HTMLElement>
  */
 export interface TooltipOptions<
   TooltippedElement extends HTMLElement = HTMLButtonElement,
-> extends FixedPositioningTransitionCallbacks,
+>
+  extends
+    FixedPositioningTransitionCallbacks,
     TooltippedElementEventHandlers<TooltippedElement>,
     TooltipPositioningOptions,
     TooltipPositionHookOptions {
@@ -263,8 +266,9 @@ export interface TooltipOptions<
  * @since 2.8.0
  * @since 6.0.0 This was renamed from `TooltipHookProvidedTooltipProps`
  */
-export interface ProvidedTooltipProps<E extends HTMLElement = HTMLSpanElement>
-  extends Required<FixedPositioningTransitionCallbacks> {
+export interface ProvidedTooltipProps<
+  E extends HTMLElement = HTMLSpanElement,
+> extends Required<FixedPositioningTransitionCallbacks> {
   id: string;
   ref: Ref<E>;
   dense: boolean;

package/src/transition/CSSTransition.tsx

@@ -15,7 +15,8 @@ import { useCSSTransition } from "./useCSSTransition.js";
  * @since 4.0.0
  */
 export interface CSSTransitionProps<E extends HTMLElement>
-  extends CSSTransitionHookOptions<E>,
+  extends
+    CSSTransitionHookOptions<E>,
     CSSTransitionComponentImplementation<E> {}
 
 /**

package/src/transition/Collapse.tsx

@@ -16,8 +16,10 @@ import {
  * @since 2.0.0
  * @since 4.0.0 Updated for the new CSS Transition API.
  */
-export interface CollapseProps<E extends HTMLElement>
-  extends Omit<CollapseTransitionHookOptions<E>, "transitionIn"> {
+export interface CollapseProps<E extends HTMLElement> extends Omit<
+  CollapseTransitionHookOptions<E>,
+  "transitionIn"
+> {
   /**
    * The child element that should have a `ref` and the `style`/`className`
    * props cloned into using the `cloneElement` API. If the child is a custom

package/src/transition/CrossFade.tsx

@@ -16,7 +16,8 @@ import {
  * @since 4.0.0 Updated for the new CSS Transition API
  */
 export interface CrossFadeProps<E extends HTMLElement>
-  extends CrossFadeTransitionHookOptions<E>,
+  extends
+    CrossFadeTransitionHookOptions<E>,
     CSSTransitionComponentImplementation<E> {
   /**
    * Unlike the {@link useCrossFadeTransition}, the `appear` value is defaulted

package/src/transition/ScaleTransition.tsx

@@ -17,7 +17,8 @@ import {
  * @since 6.0.0 Removed portal props
  */
 export interface ScaleTransitionProps<E extends HTMLElement>
-  extends CSSTransitionComponentImplementation<E>,
+  extends
+    CSSTransitionComponentImplementation<E>,
     ScaleTransitionHookOptions<E> {}
 
 /**

package/src/transition/SkeletonPlaceholder.tsx

@@ -14,8 +14,7 @@ import {
 
 /** @since 6.0.0 */
 export interface SkeletonPlaceholderProps
-  extends HTMLAttributes<HTMLDivElement>,
-    SkeletonPlaceholderOptions {
+  extends HTMLAttributes<HTMLDivElement>, SkeletonPlaceholderOptions {
   /**
    * @defaultValue `!!children`
    * @see {@link SkeletonPlaceholderOptions.disabled}

package/src/transition/Slide.tsx

@@ -22,7 +22,8 @@ declare module "react" {
 
 /** @since 6.0.0 */
 export interface SlideProps
-  extends HTMLAttributes<HTMLDivElement>,
+  extends
+    HTMLAttributes<HTMLDivElement>,
     CSSTransitionComponentProps,
     TransitionActions {
   /**

package/src/transition/SlideContainer.tsx

@@ -72,8 +72,7 @@ export function slideContainer(
 
 /** @since 6.0.0 */
 export interface SlideContainerProps
-  extends HTMLAttributes<HTMLDivElement>,
-    SlideContainerClassNameOptions {}
+  extends HTMLAttributes<HTMLDivElement>, SlideContainerClassNameOptions {}
 
 /**
  * The `SlideContainer` is used to enable a slide transition when child `Slide`