@react-md/core 6.3.4 → 6.4.0

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

package/src/spinbutton/defaults.ts

@@ -0,0 +1,45 @@
+import { getNumberOfDigits } from "../utils/getNumberOfDigits.js";
+import {
+  type GetSpinButtonTextContentOptions,
+  type SpinButtonGetValueText,
+} from "./types.js";
+
+/**
+ * @since 6.4.0
+ */
+export const defaultSpinButtonGetValueText: SpinButtonGetValueText = (value) =>
+  value === null ? "No value selected" : undefined;
+
+/**
+ * @since 6.4.0
+ */
+export function defaultGetSpinButtonTextContent(
+  options: GetSpinButtonTextContentOptions
+): string {
+  const {
+    min,
+    value,
+    fallback,
+    placeholderChar = "0",
+    minDigits = fallback?.length ?? getNumberOfDigits(min),
+  } = options;
+
+  if (value === null) {
+    if (typeof fallback === "string") {
+      return fallback;
+    }
+
+    if (!minDigits) {
+      return "";
+    }
+
+    return "-".repeat(minDigits);
+  }
+
+  let text = `${value}`;
+  if (minDigits) {
+    text = text.padStart(minDigits, placeholderChar);
+  }
+
+  return text;
+}