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

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

package/src/form/useCombobox.ts

@@ -1,5 +1,6 @@
 "use client";
 import {
+  useCallback,
   useRef,
   type FocusEventHandler,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -38,7 +39,7 @@ import {
 } from "../types.js";
 import { useEnsuredId } from "../useEnsuredId.js";
 import { useEnsuredRef } from "../useEnsuredRef.js";
-import { useToggle } from "../useToggle.js";
+import { useEnsuredState } from "../useEnsuredState.js";
 import { tryToSubmitRelatedForm } from "./utils.js";
 
 const noop = (): void => {
@@ -67,8 +68,8 @@ export type SupportedComboboxPopup = "listbox" | "grid" | "dialog";
 export interface ComboboxKeyboardMovementData<
   E extends HTMLElement = HTMLInputElement,
 > extends KeyboardMovementExtensionData<E> {
-  show(): void;
-  hide(): void;
+  show: () => void;
+  hide: () => void;
   visible: boolean;
   focusLast: NonNullMutableRef<boolean>;
 }
@@ -100,10 +101,45 @@ export type ComboboxKeyboardMovementOptions<
 /**
  * @since 6.0.0
  */
-export interface BaseComboboxOptions<
+export interface ComboboxVisibilityOptions {
+  /**
+   * This can be used to control the popup's visibility and **must** be used
+   * along with {@link setVisible}.
+   */
+  visible?: boolean;
+
+  /**
+   * Used to control the popup's visibility and should generally be a `useState`
+   * setter.
+   *
+   * @example Controlling the Visibility
+   * ```tsx
+   * const [visible, setVisible] = useState(false);
+   *
+   * useCombobox({
+   *   visible,
+   *   setVisible,
+   * });
+   * ```
+   */
+  setVisible?: UseStateSetter<boolean>;
+
+  /**
+   * Set this to `true` to have the combobox's popup visible by default.
+   *
+   * @defaultValue `false`
+   */
+  defaultVisible?: UseStateInitializer<boolean>;
+}
+
+/**
+ * @since 6.0.0
+ */
+export interface ConfigurableComboboxOptions<
   ComboboxEl extends HTMLElement = HTMLInputElement,
   PopupEl extends HTMLElement = HTMLElement,
-> extends ComboboxKeyboardMovementOptions<ComboboxEl> {
+> extends ComboboxKeyboardMovementOptions<ComboboxEl>,
+    ComboboxVisibilityOptions {
   /**
    * This is the {@link InputHTMLAttributes.form} attribute and is used to
    * attempt submitting a form when the enter key is pressed.
@@ -130,7 +166,7 @@ export interface BaseComboboxOptions<
   /**
    * @defaultValue `false`
    */
-  defaultVisible?: UseStateInitializer<boolean>;
+  multiselect?: boolean;
 
   extendKeyDown?: ExtendComboboxKeyDown<ComboboxEl>;
 
@@ -142,18 +178,25 @@ export interface BaseComboboxOptions<
   getDefaultFocusedIndex?: GetDefaultFocusedIndex;
 }
 
+/**
+ * @since 6.0.0
+ */
+export interface ComboboxGetEnterDefaultFocusedIndexOptions {
+  focusLast: boolean;
+  focusables: readonly HTMLElement[];
+  currentFocusIndex: number;
+}
+
 /**
  * @since 6.0.0
  */
 export interface ComboboxOptions<
   ComboboxEl extends HTMLElement = HTMLInputElement,
   PopupEl extends HTMLElement = HTMLElement,
-> extends BaseComboboxOptions<ComboboxEl, PopupEl> {
-  getEnterDefaultFocusedIndex(options: {
-    focusLast: boolean;
-    focusables: readonly HTMLElement[];
-    currentFocusIndex: number;
-  }): number;
+> extends ConfigurableComboboxOptions<ComboboxEl, PopupEl> {
+  getEnterDefaultFocusedIndex: (
+    options: ComboboxGetEnterDefaultFocusedIndexOptions
+  ) => number;
 }
 
 /**
@@ -180,6 +223,7 @@ export interface ComboboxWidgetProps<
 export interface ComboboxWidgetPopupProps<
   PopupEl extends HTMLElement = HTMLElement,
 > {
+  "aria-multiselectable": true | undefined;
   id: string;
   ref: RefCallback<PopupEl>;
   role: "listbox" | "dialog" | "grid";
@@ -215,16 +259,12 @@ export interface ProvidedComboboxMenuProps<
 > extends Required<ComboboxTransitionCallbacks>,
     ComboboxWidgetPopupProps<PopupEl> {
   visible: boolean;
-  onRequestClose(): void;
-
+  onRequestClose: () => void;
   /** @defaultValue `"min"` */
   width: PositionWidth;
-
   /** @defaultValue `BELOW_CENTER_ANCHOR` */
   anchor: PositionAnchor;
-
   fixedTo: RefObject<HTMLElement>;
-
   sheetProps: MenuSheetConfigurableProps &
     Required<ComboboxTransitionCallbacks>;
 }
@@ -236,14 +276,6 @@ export interface ComboboxMenuProps<PopupEl extends HTMLElement = HTMLDivElement>
   extends Omit<ConfigurableComboboxMenuProps, keyof ProvidedComboboxMenuProps>,
     ProvidedComboboxMenuProps<PopupEl> {}
 
-/**
- * Since the combobox usually uses the `Menu` as a popup element, this is a
- * helper util to create the required props and merge any additional props
- * with reasonable defaults.
- */
-export type ComboboxGetMenuProps<PopupEl extends HTMLElement = HTMLDivElement> =
-  (props?: ConfigurableComboboxMenuProps) => ComboboxMenuProps<PopupEl>;
-
 /**
  * @since 6.0.0
  */
@@ -251,8 +283,8 @@ export interface ComboboxImplementation<
   ComboboxEl extends HTMLElement = HTMLInputElement,
   PopupEl extends HTMLElement = HTMLElement,
 > extends KeyboardMovementProviderImplementation<ComboboxEl> {
-  show(): void;
-  hide(): void;
+  show: () => void;
+  hide: () => void;
   visible: boolean;
   setVisible: UseStateSetter<boolean>;
   focusLast: NonNullMutableRef<boolean>;
@@ -260,11 +292,17 @@ export interface ComboboxImplementation<
   popupProps: ComboboxWidgetPopupProps<PopupEl>;
   comboboxRef: RefObject<ComboboxEl>;
   comboboxProps: ComboboxWidgetProps<ComboboxEl>;
-
-  getMenuProps: ComboboxGetMenuProps<PopupEl>;
-  getTransitionCallbacks(
+  /**
+   * Since the combobox usually uses the `Menu` as a popup element, this is a
+   * helper util to create the required props and merge any additional props
+   * with reasonable defaults.
+   */
+  getMenuProps: (
+    overrides?: ConfigurableComboboxMenuProps
+  ) => ComboboxMenuProps<PopupEl>;
+  getTransitionCallbacks: (
     options: ComboboxTransitionOptions
-  ): Required<ComboboxTransitionCallbacks>;
+  ) => Required<ComboboxTransitionCallbacks>;
 }
 
 /**
@@ -283,14 +321,17 @@ export function useCombobox<
     onFocus,
     onKeyDown,
     searchable,
+    multiselect,
     isNegativeOneAllowed,
     loopable,
     disabled,
+    visible: propVisible,
+    setVisible: propSetVisible,
+    defaultVisible = false,
     comboboxId: propComboboxId,
     comboboxRef: propComboboxRef,
     popupId: propPopupId,
     popupRef: propPopupRef,
-    defaultVisible = false,
     onFocusChange = noop,
     extendKeyDown = noop,
     getFocusableElements = getNonDisabledOptions,
@@ -298,12 +339,18 @@ export function useCombobox<
     getDefaultFocusedIndex,
   } = options;
 
-  const {
-    toggled: visible,
-    enable: show,
-    disable: hide,
-    setToggled: setVisible,
-  } = useToggle(defaultVisible);
+  const [visible, setVisible] = useEnsuredState({
+    value: propVisible,
+    setValue: propSetVisible,
+    defaultValue: defaultVisible,
+  });
+  const show = useCallback(() => {
+    setVisible(true);
+  }, [setVisible]);
+  const hide = useCallback(() => {
+    setVisible(false);
+  }, [setVisible]);
+
   const popupId = useEnsuredId(propPopupId, "combobox-popup");
   const comboboxId = useEnsuredId(propComboboxId, "combobox");
   const [comboboxRef, comboboxRefCallback] = useEnsuredRef(propComboboxRef);
@@ -460,6 +507,7 @@ export function useCombobox<
   };
 
   const popupProps: ComboboxWidgetPopupProps<PopupEl> = {
+    "aria-multiselectable": multiselect || undefined,
     id: popupId,
     ref: popupRefCallback,
     role: popup,