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

package/src/form/MenuItemTextField.tsx

@@ -12,6 +12,9 @@ export interface MenuItemTextFieldProps extends TextFieldProps {
    * Any additional props or a `ref` to apply to the surrounding `<li>` element.
    */
   liProps?: PropsWithRef<HTMLAttributes<HTMLLIElement>, HTMLLIElement>;
+
+  /** @defaultValue `true` */
+  stretch?: boolean;
 }
 
 /**

package/src/form/Slider.tsx

@@ -118,6 +118,25 @@ export interface SliderProps extends BaseSliderProps, SliderState {
    */
   thumbProps?: HTMLAttributes<HTMLSpanElement>;
 
+  /**
+   * This can be used to update the discrete slider's tooltip props.
+   *
+   * @example
+   * Custom Styles
+   * ```tsx
+   * <Slider
+   *   {...slider}
+   *   discrete
+   *   getTooltipProps={(value) => ({
+   *     className: cssUtils({
+   *       backgroundColor: value < 30 ? "warning" : undefined,
+   *     }),
+   *   })}
+   * />
+   * ```
+   */
+  getTooltipProps?(value: number): Partial<TooltipProps>;
+
   /**
    * This can be used to update the discrete slider's value tooltip.
    *
@@ -201,6 +220,25 @@ export interface RangeSliderProps extends BaseSliderProps, RangeSliderState {
    */
   maxThumbLabelledBy?: string;
 
+  /**
+   * This can be used to update the discrete slider's tooltip props.
+   *
+   * @example
+   * Custom Styles
+   * ```tsx
+   * <Slider
+   *   {...slider}
+   *   discrete
+   *   getTooltipProps={(value, isFirstThumb) => ({
+   *     className: cssUtils({
+   *       backgroundColor: value < 30 && isFirstThumb ? "warning" : undefined,
+   *     }),
+   *   })}
+   * />
+   * ```
+   */
+  getTooltipProps?(value: number, isFirstThumb: boolean): Partial<TooltipProps>;
+
   /**
    * This can be used to update the discrete slider's value tooltip.
    *
@@ -208,12 +246,12 @@ export interface RangeSliderProps extends BaseSliderProps, RangeSliderState {
    * More Value Information
    * ```tsx
    * <Slider
-   *   {...slider}
+   *   {...rangeSlider}
    *   discrete
-   *   getTooltipChildren={(value, isMinValue) => (
+   *   getTooltipChildren={(value, isFirstThumb) => (
    *     <TextIconSpacing
-   *       icon={isMinValue ? <FavoriteIcon /> : <CloseIcon /}
-   *       iconAfter={!isMinValue}
+   *       icon={isFirstThumb ? <FavoriteIcon /> : <CloseIcon /}
+   *       iconAfter={!isFirstValue}
    *     >
    *       {value}
    *     </TextIconSpacing>
@@ -225,7 +263,7 @@ export interface RangeSliderProps extends BaseSliderProps, RangeSliderState {
    *
    * @defaultValue `(value) => value`
    */
-  getTooltipChildren?(value: number, isMinValue: boolean): ReactNode;
+  getTooltipChildren?(value: number, isFirstThumb: boolean): ReactNode;
 }
 
 /**
@@ -333,6 +371,7 @@ export function Slider(
     getMarkProps = noop,
     getMarkLabelProps = noop,
     tooltipVisibility = "auto",
+    getTooltipProps = noop,
     getTooltipChildren = identity,
     disableSmoothDragging = !!marks,
     ...remaining
@@ -509,6 +548,7 @@ export function Slider(
     vertical,
     getValueText,
     tooltipProps,
+    getTooltipProps,
     getTooltipChildren,
     tooltipVisibility,
     disableSmoothDragging,

package/src/form/SliderThumb.tsx

@@ -66,6 +66,11 @@ function sliderThumb(options: SliderThumbClassNameOptions): string {
   );
 }
 
+/**
+ * @remarks \@since 6.0.0
+ */
+export type SliderTooltipVisibility = "auto" | "hover" | "always";
+
 /**
  * @remarks \@since 2.5.0
  */
@@ -118,7 +123,7 @@ export interface SliderThumbPresentation {
    *
    * @defaultValue `"auto"`
    */
-  tooltipVisibility?: "auto" | "hover" | "always";
+  tooltipVisibility?: SliderTooltipVisibility;
 }
 
 /**
@@ -141,7 +146,11 @@ export interface SliderThumbProps
   vertical: boolean;
   onChange: ChangeEventHandler<HTMLInputElement>;
   tooltipProps?: Partial<TooltipProps>;
-  getTooltipChildren(value: number, isMinValue: boolean): ReactNode;
+  getTooltipProps(
+    value: number,
+    isFirstThumb: boolean
+  ): Partial<TooltipProps> | void;
+  getTooltipChildren(value: number, isFirstThumb: boolean): ReactNode;
 }
 
 /**
@@ -178,6 +187,7 @@ export const SliderThumb = forwardRef<
     onMouseEnter = noop,
     onMouseLeave = noop,
     tooltipProps,
+    getTooltipProps,
     getTooltipChildren,
     disableSmoothDragging,
     tooltipVisibility = "auto",
@@ -185,6 +195,7 @@ export const SliderThumb = forwardRef<
   } = props;
   const { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy } = props;
 
+  const isFirstThumb = index === 1;
   const mode = useUserInteractionMode();
   const keyboard = mode === "keyboard";
   const touch = mode === "touch";
@@ -311,9 +322,10 @@ export const SliderThumb = forwardRef<
             mouseVisible
           }
           {...tooltipProps}
+          {...getTooltipProps(value, isFirstThumb)}
           index={index}
         >
-          {getTooltipChildren(value, index === 1)}
+          {getTooltipChildren(value, isFirstThumb)}
         </SliderValueTooltip>
       )}
     </>

package/src/form/SliderValueMarks.tsx

@@ -159,7 +159,9 @@ export function SliderValueMarks(props: SliderValueMarksProps): ReactElement {
   let marks: readonly SliderValueMark[];
   if (typeof propMarks === "boolean") {
     const steps = getRangeSteps({ min, max, step }) + 1;
-    marks = Array.from({ length: steps }, (_, i) => ({ value: i * step }));
+    marks = Array.from({ length: steps }, (_, i) => ({
+      value: min + i * step,
+    }));
   } else {
     marks = propMarks;
   }

package/src/form/SliderValueTooltip.tsx

@@ -62,7 +62,7 @@ export function SliderValueTooltip(
     <Tooltip
       dense
       disablePortal
-      disableLineWrap
+      textOverflow="nowrap"
       className={cnb(
         styles({ h: !vertical, v: vertical }),
         animate && "rmd-slider-thumb--animate",

package/src/form/Switch.tsx

@@ -1,11 +1,10 @@
-"use client";
 import { cnb } from "cnbuilder";
 import {
   forwardRef,
-  useState,
   type CSSProperties,
   type HTMLAttributes,
   type InputHTMLAttributes,
+  type ReactNode,
 } from "react";
 import { type PropsWithRef } from "../types.js";
 import { useEnsuredId } from "../useEnsuredId.js";
@@ -19,10 +18,6 @@ import {
   type FormMessageContainerExtension,
 } from "./types.js";
 
-const noop = (): void => {
-  // do nothing
-};
-
 /**
  * @remarks \@since 6.0.0 Added `containerProps` and support for the
  * `FormMessage` behavior.
@@ -36,13 +31,14 @@ export interface SwitchProps
   trackProps?: PropsWithRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
   trackStyle?: CSSProperties;
   trackClassName?: string;
+  ballAddon?: ReactNode;
   ballProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;
   ballStyle?: CSSProperties;
   ballClassName?: string;
 }
 
 /**
- * **Client Component**
+ * **Server Component**
  *
  * @example
  * Simple Example
@@ -81,6 +77,7 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
       ballProps,
       ballStyle,
       ballClassName,
+      ballAddon,
       trackProps,
       trackStyle,
       trackClassName,
@@ -93,13 +90,9 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
       iconAfter = false,
       disabled = false,
       readOnly = false,
-      onChange = noop,
-      defaultChecked = false,
       ...remaining
     } = props;
     const id = useEnsuredId(propId, "switch");
-    const [isChecked, setChecked] = useState(defaultChecked);
-    const checked = props.checked ?? isChecked;
 
     return (
       <FormMessageContainer
@@ -123,6 +116,7 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
             className={switchStyles({
               clickable: !disabled && !readOnly,
               className: containerProps?.className,
+              currentColor: active || error,
             })}
           >
             <SwitchTrack
@@ -130,6 +124,7 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
               {...trackProps}
               className={cnb(trackClassName, trackProps?.className)}
               disabled={disabled}
+              ballAddon={ballAddon}
               ballProps={ballProps}
               ballStyle={ballStyle}
               ballClassName={ballClassName}
@@ -145,22 +140,6 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
                   disabled && "rmd-hidden-input--disabled"
                 )}
                 disabled={disabled}
-                checked={checked}
-                onChange={(event) => {
-                  // checkboxes do not natively support the readOnly attribute, so
-                  // polyfill it in. can't use `disabled` since the checkbox's
-                  // checked/unchecked state would then not be submitted in forms.
-                  if (readOnly) {
-                    event.preventDefault();
-                    event.stopPropagation();
-                    return;
-                  }
-
-                  onChange(event);
-                  if (typeof props.checked === "undefined") {
-                    setChecked(event.currentTarget.checked);
-                  }
-                }}
               />
             </SwitchTrack>
           </div>

package/src/form/SwitchTrack.tsx

@@ -1,5 +1,10 @@
 import { cnb } from "cnbuilder";
-import { forwardRef, type CSSProperties, type HTMLAttributes } from "react";
+import {
+  forwardRef,
+  type CSSProperties,
+  type HTMLAttributes,
+  type ReactNode,
+} from "react";
 import { type PropsWithRef } from "../types.js";
 import { bem } from "../utils/bem.js";
 
@@ -8,6 +13,7 @@ const styles = bem("rmd-switch");
 export interface SwitchTrackProps extends HTMLAttributes<HTMLDivElement> {
   active?: boolean;
   disabled?: boolean;
+  ballAddon?: ReactNode;
   ballProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;
   ballStyle?: CSSProperties;
   ballClassName?: string;
@@ -21,6 +27,7 @@ export const SwitchTrack = forwardRef<HTMLDivElement, SwitchTrackProps>(
     const {
       style,
       className,
+      ballAddon,
       ballProps,
       ballStyle,
       ballClassName,
@@ -42,7 +49,10 @@ export const SwitchTrack = forwardRef<HTMLDivElement, SwitchTrackProps>(
           style={ballStyle}
           {...ballProps}
           className={cnb(styles("ball", { active }), ballClassName)}
-        />
+        >
+          {ballAddon}
+          {ballProps?.children}
+        </span>
       </div>
     );
   }

package/src/form/TextArea.tsx

@@ -244,7 +244,7 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
           ref={containerRef}
           style={{
             ...style,
-            "--rmd-form-textarea-height": height,
+            "--rmd-textarea-height": height,
           }}
           className={textAreaContainer({
             animate: !disableTransition && resize == "auto",

package/src/form/TextFieldContainerStyles.ts

@@ -5,13 +5,13 @@ import { type FormComponentStates, type FormThemeOptions } from "./types.js";
 
 declare module "react" {
   interface CSSProperties {
-    "--rmd-form-text-height"?: string | number;
-    "--rmd-form-text-padding-left"?: string | number;
-    "--rmd-form-text-padding-right"?: string | number;
-    "--rmd-form-text-padding-top"?: string | number;
-    "--rmd-form-text-border-color"?: string;
-    "--rmd-form-text-hover-border-color"?: string;
-    "--rmd-form-text-filled-color"?: string;
+    "--rmd-text-field-height"?: string | number;
+    "--rmd-text-field-padding-left"?: string | number;
+    "--rmd-text-field-padding-right"?: string | number;
+    "--rmd-text-field-padding-top"?: string | number;
+    "--rmd-text-field-border-color"?: string;
+    "--rmd-text-field-hover-border-color"?: string;
+    "--rmd-text-field-filled-color"?: string;
     "--rmd-form-addon-top"?: string | number;
     "--rmd-form-addon-margin-top"?: string | number;
   }

package/src/form/__tests__/Checkbox.tsx

@@ -1,6 +1,6 @@
 import { describe, expect, it } from "@jest/globals";
 import { createRef } from "react";
-import { render } from "../../test-utils/index.js";
+import { render, screen } from "../../test-utils/index.js";
 
 import { Checkbox } from "../Checkbox.js";
 
@@ -12,9 +12,9 @@ describe("Checkbox", () => {
       label: "Checkbox",
     } as const;
 
-    const { getByRole, container, rerender } = render(<Checkbox {...props} />);
+    const { container, rerender } = render(<Checkbox {...props} />);
 
-    const checkbox = getByRole("checkbox", { name: "Checkbox" });
+    const checkbox = screen.getByRole("checkbox", { name: "Checkbox" });
     expect(ref.current).toBeInstanceOf(HTMLInputElement);
     expect(ref.current).toBe(checkbox);
     expect(container).toMatchSnapshot();
@@ -34,9 +34,9 @@ describe("Checkbox", () => {
 
   it("should disable autoComplete to fix a firefox bug", () => {
     // https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing
-    const { getByRole } = render(<Checkbox />);
+    render(<Checkbox />);
 
-    const checkbox = getByRole("checkbox");
+    const checkbox = screen.getByRole("checkbox");
     expect(checkbox).toHaveAttribute("autocomplete", "off");
   });
 });

package/src/form/__tests__/Fieldset.tsx

@@ -1,6 +1,6 @@
 import { describe, expect, it } from "@jest/globals";
 import { createRef } from "react";
-import { render } from "../../test-utils/index.js";
+import { render, screen } from "../../test-utils/index.js";
 
 import { fieldset, Fieldset } from "../Fieldset.js";
 import { Legend } from "../Legend.js";
@@ -13,9 +13,9 @@ describe("Fieldset", () => {
       ref,
       children: <Legend>I am Legend</Legend>,
     } as const;
-    const { getByTestId, rerender } = render(<Fieldset {...props} />);
+    const { rerender } = render(<Fieldset {...props} />);
 
-    const fieldset = getByTestId("fieldset");
+    const fieldset = screen.getByTestId("fieldset");
     expect(ref.current).toBeInstanceOf(HTMLFieldSetElement);
     expect(ref.current).toBe(fieldset);
     expect(fieldset).toMatchSnapshot();

package/src/form/__tests__/FileInput.tsx

@@ -1,5 +1,5 @@
 import { describe, expect, it } from "@jest/globals";
-import { createRef, type HTMLAttributes } from "react";
+import { createRef } from "react";
 import {
   type ButtonTheme,
   type ButtonThemeType,
@@ -10,7 +10,7 @@ import { FileInput } from "../FileInput.js";
 const PROPS = {
   labelProps: {
     "data-testid": "label",
-  } as HTMLAttributes<HTMLLabelElement>,
+  },
 } as const;
 
 describe("FileInput", () => {

package/src/form/__tests__/Label.tsx

@@ -1,6 +1,6 @@
 import { describe, expect, it } from "@jest/globals";
 import { createRef } from "react";
-import { render } from "../../test-utils/index.js";
+import { render, screen } from "../../test-utils/index.js";
 
 import { Label } from "../Label.js";
 
@@ -12,9 +12,9 @@ describe("Label", () => {
       ref,
       children: "Label content",
     } as const;
-    const { getByTestId, rerender } = render(<Label {...props} />);
+    const { rerender } = render(<Label {...props} />);
 
-    const label = getByTestId("label");
+    const label = screen.getByTestId("label");
     expect(ref.current).toBeInstanceOf(HTMLLabelElement);
     expect(ref.current).toBe(label);
     expect(label).toMatchSnapshot();

package/src/form/__tests__/Legend.tsx

@@ -1,6 +1,6 @@
 import { describe, expect, it } from "@jest/globals";
 import { createRef } from "react";
-import { render } from "../../test-utils/index.js";
+import { render, screen } from "../../test-utils/index.js";
 
 import { Legend } from "../Legend.js";
 
@@ -12,9 +12,9 @@ describe("Legend", () => {
       ref,
       children: "Content",
     } as const;
-    const { getByTestId, rerender } = render(<Legend {...props} />);
+    const { rerender } = render(<Legend {...props} />);
 
-    const fieldset = getByTestId("fieldset");
+    const fieldset = screen.getByTestId("fieldset");
     expect(ref.current).toBeInstanceOf(HTMLLegendElement);
     expect(ref.current).toBe(fieldset);
     expect(fieldset).toMatchSnapshot();

package/src/form/__tests__/Radio.tsx

@@ -1,6 +1,6 @@
 import { describe, expect, it } from "@jest/globals";
 import { createRef } from "react";
-import { render } from "../../test-utils/index.js";
+import { render, screen } from "../../test-utils/index.js";
 
 import { Radio } from "../Radio.js";
 
@@ -13,9 +13,9 @@ describe("Radio", () => {
       value: "a",
     } as const;
 
-    const { getByRole, container, rerender } = render(<Radio {...props} />);
+    const { container, rerender } = render(<Radio {...props} />);
 
-    const radio = getByRole("radio", { name: "Radio" });
+    const radio = screen.getByRole("radio", { name: "Radio" });
     expect(ref.current).toBeInstanceOf(HTMLInputElement);
     expect(ref.current).toBe(radio);
     expect(container).toMatchSnapshot();

package/src/form/__tests__/Switch.tsx

@@ -0,0 +1,152 @@
+import { describe, expect, it } from "@jest/globals";
+import { createRef } from "react";
+import { CircularProgress } from "../../progress/CircularProgress.js";
+import { rmdRender, screen } from "../../test-utils/index.js";
+import { Switch, type SwitchProps } from "../Switch.js";
+
+const labelProps = {
+  "data-testid": "label",
+};
+
+describe("Switch", () => {
+  it("should apply the correct styling, HTMLAttributes, and allow a ref", () => {
+    const ref = createRef<HTMLInputElement>();
+    const props = {
+      ref,
+      label: "Switch",
+      labelProps,
+    } as const;
+
+    const { rerender } = rmdRender(<Switch {...props} />);
+
+    const label = screen.getByTestId("label");
+    const switchInput = screen.getByRole("switch", { name: "Switch" });
+    expect(ref.current).toBeInstanceOf(HTMLInputElement);
+    expect(ref.current).toBe(switchInput);
+    expect(label).toMatchSnapshot();
+
+    rerender(
+      <Switch
+        {...props}
+        style={{ color: "white" }}
+        className="custom-class-name"
+      />
+    );
+    expect(label).toMatchSnapshot();
+
+    rerender(
+      <Switch
+        {...props}
+        ballStyle={{ background: "orange" }}
+        ballClassName="ball-class-name"
+        trackStyle={{ width: "10%" }}
+        trackClassName="track-class-name"
+        trackProps={{
+          className: "track-props-class-name",
+        }}
+        containerProps={{
+          style: { fontSize: "3rem" },
+          className: "container-class-name",
+        }}
+      />
+    );
+    expect(label).toMatchSnapshot();
+
+    rerender(<Switch {...props} id="custom-id" />);
+    expect(label).toMatchSnapshot();
+  });
+
+  it("should allow the switch to gain the error and active colors by enabling the current-color class", () => {
+    const { rerender } = rmdRender(
+      <Switch label="Switch" active labelProps={labelProps} />
+    );
+    const label = screen.getByTestId("label");
+    expect(label).toMatchSnapshot();
+
+    rerender(<Switch label="Switch" error />);
+    expect(label).toMatchSnapshot();
+  });
+
+  it("should merge any labelProps correctly", () => {
+    rmdRender(
+      <Switch
+        label="Switch"
+        style={{ color: "orange" }}
+        labelProps={{
+          ...labelProps,
+          style: { color: "red" },
+          className: "test-class-name",
+        }}
+        className="root-class-name"
+      />
+    );
+
+    const label = screen.getByTestId("label");
+    expect(label).toMatchSnapshot();
+  });
+
+  it("should render correctly when disabled", () => {
+    rmdRender(<Switch label="Switch" labelProps={labelProps} disabled />);
+
+    const label = screen.getByTestId("label");
+    expect(label).toMatchSnapshot();
+  });
+
+  it("should support rendering the label before and after as well as stacked", () => {
+    const { rerender } = rmdRender(
+      <Switch label="Switch" labelProps={labelProps} iconAfter />
+    );
+
+    const label = screen.getByTestId("label");
+    expect(label).toMatchSnapshot();
+
+    rerender(<Switch label="Switch" labelProps={labelProps} stacked />);
+    expect(label).toMatchSnapshot();
+
+    rerender(
+      <Switch label="Switch" labelProps={labelProps} stacked iconAfter />
+    );
+    expect(label).toMatchSnapshot();
+  });
+
+  it("should support rendering the form messages with the switch", () => {
+    const props: SwitchProps = {
+      label: "Label",
+      messageProps: {
+        children: "Help Text",
+      },
+      messageContainerProps: {
+        "data-testid": "container",
+      },
+    };
+
+    const { rerender } = rmdRender(<Switch {...props} />);
+
+    const container = screen.getByTestId("container");
+    expect(() => screen.getByText("Help Text")).not.toThrow();
+    expect(container).toMatchSnapshot();
+
+    rerender(
+      <Switch
+        {...props}
+        error
+        messageProps={{ error: true, children: "Error Text" }}
+      />
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  it("should support rendering a CircularProgress by using the ballAddon prop", () => {
+    rmdRender(
+      <Switch
+        label="Switch"
+        labelProps={labelProps}
+        ballAddon={<CircularProgress aria-label="Loading" />}
+      />
+    );
+
+    expect(() => screen.getByRole("progressbar")).not.toThrow();
+    const label = screen.getByTestId("label");
+    expect(label).toMatchSnapshot();
+  });
+});