@react-md/core 1.0.0-next.16 → 1.0.0-next.18

package/src/form/Slider.tsx

@@ -50,7 +50,7 @@ declare module "react" {
 }
 
 const emptyString = (): string => "";
-const noop = (): void => {
+const noop = (): undefined => {
   // do nothing
 };
 
@@ -133,7 +133,7 @@ export interface SliderProps extends BaseSliderProps, SliderState {
    * />
    * ```
    */
-  getTooltipProps?(value: number): Partial<TooltipProps>;
+  getTooltipProps?: (value: number) => Partial<TooltipProps> | undefined;
 
   /**
    * This can be used to update the discrete slider's value tooltip.
@@ -155,7 +155,7 @@ export interface SliderProps extends BaseSliderProps, SliderState {
    *
    * @defaultValue `(value) => value`
    */
-  getTooltipChildren?(value: number): ReactNode;
+  getTooltipChildren?: (value: number) => ReactNode;
 }
 
 /**
@@ -232,7 +232,10 @@ export interface RangeSliderProps extends BaseSliderProps, RangeSliderState {
    * />
    * ```
    */
-  getTooltipProps?(value: number, isFirstThumb: boolean): Partial<TooltipProps>;
+  getTooltipProps?: (
+    value: number,
+    isFirstThumb: boolean
+  ) => Partial<TooltipProps>;
 
   /**
    * This can be used to update the discrete slider's value tooltip.
@@ -257,7 +260,7 @@ export interface RangeSliderProps extends BaseSliderProps, RangeSliderState {
    *
    * @defaultValue `(value) => value`
    */
-  getTooltipChildren?(value: number, isFirstThumb: boolean): ReactNode;
+  getTooltipChildren?: (value: number, isFirstThumb: boolean) => ReactNode;
 }
 
 /**
@@ -587,9 +590,9 @@ export function Slider(
           value={thumb1Value}
           index={1}
           active={thumb1Dragging}
-          onChange={(event) =>
-            setThumb1Value(event.currentTarget.valueAsNumber)
-          }
+          onChange={(event) => {
+            setThumb1Value(event.currentTarget.valueAsNumber);
+          }}
           onKeyDown={thumb1OnKeyDown}
         />
         {isRangeSlider && (
@@ -605,9 +608,9 @@ export function Slider(
             value={thumb2Value}
             index={2}
             active={thumb2Dragging}
-            onChange={(event) =>
-              setThumb2Value(event.currentTarget.valueAsNumber)
-            }
+            onChange={(event) => {
+              setThumb2Value(event.currentTarget.valueAsNumber);
+            }}
             onKeyDown={thumb2OnKeyDown}
           />
         )}

package/src/form/SliderThumb.tsx

@@ -101,7 +101,7 @@ export interface SliderThumbPresentation {
    *
    * @defaultValue `() => ""`
    */
-  getValueText?(value: number): string;
+  getValueText?: (value: number) => string;
 
   /**
    * Set this to `true` if the slider's thumb position should only update when
@@ -145,11 +145,11 @@ export interface SliderThumbProps
   vertical: boolean;
   onChange: ChangeEventHandler<HTMLInputElement>;
   tooltipProps?: Partial<TooltipProps>;
-  getTooltipProps(
+  getTooltipProps: (
     value: number,
     isFirstThumb: boolean
-  ): Partial<TooltipProps> | void;
-  getTooltipChildren(value: number, isFirstThumb: boolean): ReactNode;
+  ) => Partial<TooltipProps> | undefined;
+  getTooltipChildren: (value: number, isFirstThumb: boolean) => ReactNode;
 }
 
 /**

package/src/form/SliderValueMarks.tsx

@@ -90,9 +90,9 @@ export interface SliderMarksOptions {
   /**
    * This can be used to override any styles for the specific mark.
    */
-  getMarkProps?(
+  getMarkProps?: (
     options: SliderValueMarkState
-  ): HTMLAttributes<HTMLSpanElement> | void;
+  ) => HTMLAttributes<HTMLSpanElement> | undefined;
 
   /**
    * This can be used to override any styles for a specific mark's label or
@@ -116,9 +116,9 @@ export interface SliderMarksOptions {
    * />
    * ```
    */
-  getMarkLabelProps?(
+  getMarkLabelProps?: (
     options: SliderValueMarkState
-  ): Partial<CustomizableSliderMarkLabelProps> | void;
+  ) => Partial<CustomizableSliderMarkLabelProps> | undefined;
 }
 
 /**

package/src/form/TextArea.tsx

@@ -128,15 +128,14 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
       areaClassName,
       resizeContainerProps,
       resize = "auto",
-      dense = false,
-      error = false,
-      active = false,
-      inline: propInline = false,
-      stretch = false,
+      dense,
+      error,
+      active,
+      inline: propInline,
       leftAddon,
       rightAddon,
-      disableLeftAddonStyles = false,
-      disableRightAddonStyles = false,
+      disableLeftAddonStyles,
+      disableRightAddonStyles,
       theme: propTheme,
       underlineDirection: propUnderlineDirection,
       messageProps,
@@ -267,7 +266,6 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
           dense={dense}
           inline={inline}
           active={active}
-          stretch={stretch}
           readOnly={readOnly}
           disabled={disabled}
           leftAddon={leftAddon}

package/src/form/TextField.tsx

@@ -136,7 +136,6 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
       error,
       active,
       inline,
-      stretch,
       leftAddon,
       leftAddonProps,
       rightAddon,
@@ -182,7 +181,6 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
           dense={dense}
           inline={inline}
           active={active}
-          stretch={stretch}
           readOnly={readOnly}
           disabled={disabled}
           leftAddon={leftAddon}

package/src/form/TextFieldContainer.tsx

@@ -33,20 +33,19 @@ export const TextFieldContainer = forwardRef<
   const {
     children,
     className,
-    dense = false,
-    error = false,
-    label = false,
-    active = false,
-    inline = false,
-    stretch = false,
-    readOnly = false,
-    disabled = false,
+    dense,
+    error,
+    label,
+    active,
+    inline,
+    readOnly,
+    disabled,
     leftAddon,
     leftAddonProps,
-    disableLeftAddonStyles = false,
+    disableLeftAddonStyles,
     rightAddon,
     rightAddonProps,
-    disableRightAddonStyles = false,
+    disableRightAddonStyles,
     theme: propTheme,
     underlineDirection: propUnderlineDirection,
     ...remaining
@@ -68,7 +67,6 @@ export const TextFieldContainer = forwardRef<
         label,
         inline,
         active,
-        stretch,
         readOnly,
         disabled,
         className,

package/src/form/formMessageContainerStyles.ts

@@ -0,0 +1,22 @@
+import { cnb } from "cnbuilder";
+import { bem } from "../utils/bem.js";
+
+const styles = bem("rmd-form-message-container");
+
+/**
+ * @since 6.0.0
+ */
+export interface FormMessageContainerClassNameOptions {
+  className?: string;
+}
+
+/**
+ * @since 6.0.0
+ */
+export function formMessageContainer(
+  options: FormMessageContainerClassNameOptions = {}
+): string {
+  const { className } = options;
+
+  return cnb(styles(), className);
+}

package/src/form/optionStyles.ts

@@ -10,13 +10,18 @@ export interface OptionClassNameOptions {
   className?: string;
   icon: boolean;
   selected: boolean;
+  selectedClassName?: string;
 }
 
 /**
  * @since 6.0.0
  */
 export function option(options: OptionClassNameOptions): string {
-  const { className, icon, selected } = options;
+  const { className, icon, selected, selectedClassName } = options;
 
-  return cnb(styles({ icon, selected }), className);
+  return cnb(
+    styles({ icon, selected }),
+    selected && selectedClassName,
+    className
+  );
 }

package/src/form/sliderUtils.ts

@@ -45,7 +45,7 @@ export const getJumpValue = (options: JumpOptions): number => {
  * @internal
  */
 type RequiredThumbProps = Pick<
-  DraggableImplementation<HTMLElement>,
+  DraggableImplementation,
   | "dragging"
   | keyof DraggableMouseEventHandlers<HTMLElement>
   | keyof DraggableTouchEventHandlers<HTMLElement>

package/src/form/textFieldContainerStyles.ts

@@ -31,9 +31,6 @@ export interface TextFieldContainerClassNameOptions
   /** @defaultValue `false` */
   inline?: boolean;
 
-  /** @defaultValue `false` */
-  stretch?: boolean;
-
   /** @defaultValue `false` */
   label?: boolean;
 
@@ -53,16 +50,15 @@ export function textFieldContainer(
   const {
     className,
     theme = "outline",
-    dense = false,
-    error = false,
-    label = false,
-    active = false,
-    inline = false,
-    stretch = false,
-    readOnly = false,
-    disabled = false,
-    leftAddon = false,
-    rightAddon = false,
+    dense,
+    error,
+    label,
+    active,
+    inline,
+    readOnly,
+    disabled,
+    leftAddon,
+    rightAddon,
     underlineDirection = "left",
   } = options;
   const underline = theme === "underline";
@@ -82,7 +78,6 @@ export function textFieldContainer(
     styles({
       error,
       inline,
-      stretch,
       filled,
       outline,
       disabled: disabled || readOnly,

package/src/form/types.ts

@@ -90,7 +90,7 @@ export interface FormComponentStates {
  * @see https://html.spec.whatwg.org/multipage/forms.html#autofill
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values
  */
-export type AutocompleteValue =
+export type AutocompleteAttributeValue =
   | "off"
   | "on"
   | "name"
@@ -182,11 +182,11 @@ export interface UserAgentAutocompleteProps {
    *
    * @see https://html.spec.whatwg.org/multipage/forms.html#autofill
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values
-   * @see {@link AutocompleteValue}
+   * @see {@link AutocompleteAttributeValue}
    * @see {@link autoComplete}
    * @see {@link UserAgentAutocompleteProps.name}
    */
-  autoCompleteValue?: AutocompleteValue;
+  autoCompleteValue?: AutocompleteAttributeValue;
 
   /**
    * @see {@link autoCompleteValue}
@@ -472,14 +472,6 @@ export interface TextFieldContainerOptions
    */
   inline?: boolean;
 
-  /**
-   * Set this to `true` if this component should stretch to fill a flex or grid
-   * container using `flex: 1 1 auto`.
-   *
-   * @defaultValue `false`
-   */
-  stretch?: boolean;
-
   /**
    * This should generally be an icon or a button that will be placed before the
    * `TextField` or `TextArea`.

package/src/form/useCheckboxGroup.ts

@@ -1,6 +1,7 @@
 "use client";
-import { useCallback, useRef, useState } from "react";
+import { useCallback, useRef } from "react";
 import { type UseStateInitializer, type UseStateSetter } from "../types.js";
+import { useReadonlySet } from "../useReadonlySet.js";
 
 const EMPTY_LIST = [] as const;
 
@@ -55,37 +56,37 @@ export interface CheckboxGroupOptions<V> {
 
 /** @since 6.0.0 */
 export interface CheckboxGroupImplementation<V extends string> {
-  reset(): void;
+  reset: () => void;
   checkedValues: ReadonlySet<V>;
   setCheckedValues: UseStateSetter<ReadonlySet<V>>;
-  getCheckboxProps(value: V): {
+  getCheckboxProps: (value: V) => {
     name: string;
     value: V;
     checked: boolean;
-    onChange(): void;
+    onChange: () => void;
   };
 }
 
 /** @since 6.0.0 */
 export interface IndeterminateCheckboxGroupImplementation<V extends string>
   extends CheckboxGroupImplementation<V> {
-  getIndeterminateProps(): {
+  getIndeterminateProps: () => {
     "aria-checked": "mixed" | undefined;
     name: string;
     checked: boolean;
     indeterminate: boolean;
-    onChange(): void;
+    onChange: () => void;
   };
 }
 
 /** @since 6.0.0 */
 export interface MenuItemCheckboxGroupImplementation<V extends string> {
-  reset(): void;
+  reset: () => void;
   checkedValues: ReadonlySet<V>;
   setCheckedValues: UseStateSetter<ReadonlySet<V>>;
-  getCheckboxProps(value: V): {
+  getCheckboxProps: (value: V) => {
     checked: boolean;
-    onCheckedChange(): void;
+    onCheckedChange: () => void;
   };
 }
 
@@ -93,33 +94,33 @@ export interface MenuItemCheckboxGroupImplementation<V extends string> {
 export interface IndeterminateMenuItemCheckboxGroupImplementation<
   V extends string,
 > extends MenuItemCheckboxGroupImplementation<V> {
-  getIndeterminateProps(): {
+  getIndeterminateProps: () => {
     "aria-checked": "mixed" | undefined;
     checked: boolean;
     indeterminate: boolean;
-    onCheckedChange(): void;
+    onCheckedChange: () => void;
   };
 }
 
 /** @since 6.0.0 */
 export interface CombinedCheckboxGroupReturnValue<V extends string> {
-  reset(): void;
+  reset: () => void;
   checkedValues: ReadonlySet<V>;
   setCheckedValues: UseStateSetter<ReadonlySet<V>>;
-  getCheckboxProps(value: V): {
+  getCheckboxProps: (value: V) => {
     name?: string;
     value?: V;
     checked: boolean;
-    onChange?(): void;
-    onCheckedChange?(): void;
+    onChange?: () => void;
+    onCheckedChange?: () => void;
   };
-  getIndeterminateProps?(): {
+  getIndeterminateProps?: () => {
     "aria-checked": "mixed" | undefined;
     name?: string;
     checked: boolean;
     indeterminate: boolean;
-    onChange?(): void;
-    onCheckedChange?(): void;
+    onChange?: () => void;
+    onCheckedChange?: () => void;
   };
 }
 
@@ -266,12 +267,12 @@ export function useCheckboxGroup<V extends string>(
     values,
     defaultCheckedValues = EMPTY_LIST,
   } = options;
-  const [checkedValues, setCheckedValues] = useState<ReadonlySet<V>>(() => {
-    if (typeof defaultCheckedValues === "function") {
-      return new Set(defaultCheckedValues());
-    }
-
-    return new Set(defaultCheckedValues);
+  const {
+    value: checkedValues,
+    setValue: setCheckedValues,
+    toggleValue,
+  } = useReadonlySet({
+    defaultValue: defaultCheckedValues,
   });
   const initial = useRef(checkedValues);
 
@@ -287,7 +288,7 @@ export function useCheckboxGroup<V extends string>(
         checked,
         indeterminate,
         [menu ? "onCheckedChange" : "onChange"]() {
-          setCheckedValues(() => {
+          setCheckedValues((checkedValues) => {
             if (checkedValues.size === 0 || indeterminate) {
               return new Set(values);
             }
@@ -302,7 +303,7 @@ export function useCheckboxGroup<V extends string>(
   return {
     reset: useCallback(() => {
       setCheckedValues(initial.current);
-    }, []),
+    }, [setCheckedValues]),
     checkedValues,
     setCheckedValues,
     getIndeterminateProps,
@@ -312,16 +313,7 @@ export function useCheckboxGroup<V extends string>(
         value: menu ? undefined : value,
         checked: checkedValues.has(value),
         [menu ? "onCheckedChange" : "onChange"]() {
-          setCheckedValues((prevValues) => {
-            const nextValues = new Set(prevValues);
-            if (prevValues.has(value)) {
-              nextValues.delete(value);
-            } else {
-              nextValues.add(value);
-            }
-
-            return nextValues;
-          });
+          toggleValue(value);
         },
       };
     },