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

package/src/form/Listbox.tsx

@@ -0,0 +1,87 @@
+import {
+  type Dispatch,
+  type ReactElement,
+  type ReactNode,
+  type Ref,
+  useMemo,
+} from "react";
+import { Menu, type MenuProps } from "../menu/Menu.js";
+import { type LabelRequiredForA11y } from "../types.js";
+import { ListboxProvider } from "./ListboxProvider.js";
+import { type OptionSelectedIconProps } from "./Option.js";
+
+/**
+ * @since 6.0.0
+ * @internal
+ */
+export type ListboxValue = string | number | null | Record<string, unknown>;
+
+/**
+ * @since 6.0.0
+ * @internal
+ */
+export interface ListboxProps<Value extends ListboxValue>
+  extends MenuProps,
+    OptionSelectedIconProps {
+  nodeRef?: Ref<HTMLDivElement>;
+
+  value: Value | readonly NonNullable<ListboxValue>[];
+  setValue: Dispatch<NonNullable<Value>>;
+  children: ReactNode;
+}
+
+/**
+ * @since 6.0.0
+ * @internal
+ */
+export function Listbox<T extends ListboxValue>(
+  props: LabelRequiredForA11y<ListboxProps<T>>
+): ReactElement {
+  const {
+    value,
+    setValue,
+    children,
+    nodeRef,
+    selectedIconAfter,
+    selectedIcon,
+    unselectedIcon,
+    disableSelectedIcon,
+    ...remaining
+  } = props;
+  const values = useMemo(() => {
+    if (Array.isArray(value)) {
+      return new Set(value);
+    }
+
+    return new Set([value]);
+  }, [value]);
+
+  return (
+    <ListboxProvider
+      value={useMemo(
+        () => ({
+          selectOption: setValue,
+          isOptionSelected(option) {
+            return values.has(option);
+          },
+          selectedIcon,
+          unselectedIcon,
+          selectedIconAfter,
+          disableSelectedIcon,
+        }),
+        [
+          disableSelectedIcon,
+          selectedIcon,
+          selectedIconAfter,
+          setValue,
+          unselectedIcon,
+          values,
+        ]
+      )}
+    >
+      <Menu {...remaining} ref={nodeRef}>
+        {children}
+      </Menu>
+    </ListboxProvider>
+  );
+}

package/src/form/ListboxProvider.ts

@@ -0,0 +1,37 @@
+"use client";
+import { createContext, useContext } from "react";
+import { type OptionSelectedIconProps } from "./Option.js";
+
+/**
+ * @internal
+ * @since 6.0.0
+ */
+export interface ListboxContext extends OptionSelectedIconProps {
+  // NOTE: These are not converted to arrow functions so the option can be
+  // inferred correctly
+  selectOption(option: unknown): void;
+  isOptionSelected(option: unknown): boolean;
+}
+
+const context = createContext<ListboxContext | null>(null);
+
+/**
+ * **Client Component**
+ *
+ * @internal
+ * @since 6.0.0
+ */
+export const { Provider: ListboxProvider } = context;
+
+/**
+ * @internal
+ * @since 6.0.0
+ */
+export function useListboxContext(): ListboxContext {
+  const value = useContext(context);
+  if (!value) {
+    throw new Error("The `ListboxProvider` must be a parent component");
+  }
+
+  return value;
+}

package/src/form/MenuItemTextField.tsx

@@ -33,7 +33,7 @@ export const MenuItemTextField = forwardRef<
   HTMLInputElement,
   MenuItemTextFieldProps
 >(function MenuItemTextField(props, ref) {
-  const { liProps, onKeyDown, stretch = true, ...remaining } = props;
+  const { liProps, onKeyDown, ...remaining } = props;
   return (
     <li
       role="none"
@@ -47,7 +47,6 @@ export const MenuItemTextField = forwardRef<
       <TextField
         {...remaining}
         ref={ref}
-        stretch={stretch}
         onKeyDown={(event) => {
           onKeyDown?.(event);
           switch (event.key) {

package/src/form/NativeSelect.tsx

@@ -123,17 +123,16 @@ export const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(
       autoCompleteValue,
       autoComplete = autoCompleteValue,
       name = autoCompleteValue,
-      dense = false,
-      error = false,
-      active = false,
-      inline = false,
-      stretch = false,
+      dense,
+      error,
+      active,
+      inline,
       leftAddon,
       rightAddon: propRightAddon,
       leftAddonProps,
       rightAddonProps,
-      disableLeftAddonStyles = false,
-      disableRightAddonStyles = false,
+      disableLeftAddonStyles,
+      disableRightAddonStyles,
       theme: propTheme,
       underlineDirection: propUnderlineDirection,
       messageProps,
@@ -142,7 +141,7 @@ export const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(
       children,
       ...remaining
     } = props;
-    const { disabled = false, readOnly = false, multiple = false } = props;
+    const { disabled, readOnly, multiple } = props;
     const id = useEnsuredId(propId, "select");
     const theme = getFormConfig("theme", propTheme);
     const underlineDirection = getFormConfig(
@@ -160,7 +159,13 @@ export const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(
     return (
       <FormMessageContainer
         {...messageContainerProps}
-        messageProps={messageProps}
+        messageProps={
+          messageProps && {
+            error,
+            theme,
+            ...messageProps,
+          }
+        }
       >
         <TextFieldContainer
           {...containerProps}
@@ -177,7 +182,6 @@ export const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(
           dense={dense}
           inline={inline}
           active={active}
-          stretch={stretch}
           readOnly={readOnly}
           disabled={disabled}
           leftAddon={leftAddon}

package/src/form/Option.tsx

@@ -11,9 +11,8 @@ import { getListItemHeight } from "../list/getListItemHeight.js";
 import { ListItemText } from "../list/ListItemText.js";
 import { MenuItem, type MenuItemProps } from "../menu/MenuItem.js";
 import { useEnsuredId } from "../useEnsuredId.js";
+import { useListboxContext } from "./ListboxProvider.js";
 import { option } from "./optionStyles.js";
-import { useListboxContext } from "./useListboxProvider.js";
-import { triggerManualChangeEvent } from "./utils.js";
 
 const noop = (): void => {
   // do nothing
@@ -24,24 +23,16 @@ const noop = (): void => {
  * unselected options have the same alignment.
  *
  * @since 6.0.0
+ * @defaultValue `<span className="rmd-icon rmd-icon--svg />`
  */
 export const DEFAULT_OPTION_UNSELECTED_ICON = (
   <span className={icon({ type: "svg" })} />
 );
 
 /**
- * @since 6.0.0 removed the `selected` and `focused` props.
- * @since 6.0.0 Added the `value`, `selectedIcon`, `unselectedIcon`,
- * `selectedIconAfter`, and `iconSpacingProps` props.
+ * @since 6.0.0
  */
-export interface OptionProps extends MenuItemProps {
-  /**
-   * @defaultValue `"option"`
-   */
-  role?: string;
-
-  value: string | number;
-
+export interface OptionSelectedIconProps {
   /**
    * @defaultValue `getIcon("selected")`
    */
@@ -61,6 +52,54 @@ export interface OptionProps extends MenuItemProps {
    */
   selectedIconAfter?: boolean;
 
+  /**
+   * Set this to `true` to remove selected icon behavior from the `Option`.
+   *
+   * @defaultValue `false`
+   */
+  disableSelectedIcon?: boolean;
+}
+
+/**
+ * @since 6.0.0 removed the `selected` and `focused` props.
+ * @since 6.0.0 Added the `value`, `selectedIcon`, `unselectedIcon`,
+ * `selectedIconAfter`, and `iconSpacingProps` props.
+ */
+export interface OptionProps extends MenuItemProps, OptionSelectedIconProps {
+  /**
+   * @defaultValue `"option"`
+   */
+  role?: string;
+  value: string | number | Record<string, unknown>;
+
+  /**
+   * An optional className to apply only while the current option is selected to
+   * override any global default selected styles. It is recommended to update
+   * the `react-md.$form-option-selected-styles` map first to change selected
+   * style globally and then any one-off customizations through this prop.
+   *
+   * @example Global Change
+   * ```scss
+   * @use "@react-md/core" with (
+   *   // these are the defaults
+   *   $form-option-selected-styles: (
+   *     --rmd-icon-color: currentcolor,
+   *     background-color: colors.$blue-900,
+   *     color: colors.$white,
+   *   ),
+   *
+   *   // so if you wanted to remove the styles globally
+   *   $form-option-selected-styles: (),
+   * );
+   * ```
+   *
+   * This really results in something like:
+   * ```ts
+   * className="rmd-list-item ... rmd-menu-item ... rmd-option rmd-option--selected ${selectedClassName}"
+   * ```
+   */
+  selectedClassName?: string;
+
   /**
    * Since the `selectedIcon`/`unselectedIcon` are rendered as
    * `leftAddon`/`rightAddon`, the provided `leftAddon`/`rightAddon` will be
@@ -93,7 +132,7 @@ export interface OptionProps extends MenuItemProps {
  *
  * @since 6.0.0 removed the `selected` and `focused` props.
  * @since 6.0.0 Added the `value`, `selectedIcon`, `unselectedIcon`,
- * `selectedIconAfter`, and `iconSpacingProps` props.
+ * `selectedIconAfter`, `iconSpacingProps`, and `selectedClassName` props.
  */
 export const Option = forwardRef<HTMLLIElement, OptionProps>(
   function Option(props, ref) {
@@ -104,9 +143,11 @@ export const Option = forwardRef<HTMLLIElement, OptionProps>(
       children: propChildren,
       onClick = noop,
       className,
+      selectedClassName,
       selectedIcon: propSelectedIcon,
       unselectedIcon: propUnselectedIcon,
       selectedIconAfter: propSelectedIconAfter,
+      disableSelectedIcon: propDisableSelectedIcon,
       textIconSpacingProps,
       leftAddon: propLeftAddon,
       leftAddonType,
@@ -122,20 +163,26 @@ export const Option = forwardRef<HTMLLIElement, OptionProps>(
 
     const id = useEnsuredId(propId, "option");
     const {
-      inputRef,
-      currentValue,
-      disableSelectedIcon,
+      selectOption,
+      isOptionSelected,
+      disableSelectedIcon: contextDisableSelectedIcon,
+      selectedIcon: contextSelectedIcon,
+      unselectedIcon: contextUnselectedIcon,
       selectedIconAfter: contextSelectedIconAfter,
     } = useListboxContext();
     const selectedIconAfter = propSelectedIconAfter ?? contextSelectedIconAfter;
-    const selected = value === currentValue;
+    const disableSelectedIcon =
+      propDisableSelectedIcon ?? contextDisableSelectedIcon;
+    const selected = isOptionSelected(value);
     const selectedIcon = getIcon(
       "selected",
-      disableSelectedIcon ? null : propSelectedIcon
+      disableSelectedIcon ? null : (propSelectedIcon ?? contextSelectedIcon)
     );
     const unselectedIcon = disableSelectedIcon
       ? null
-      : (propUnselectedIcon ?? DEFAULT_OPTION_UNSELECTED_ICON);
+      : (propUnselectedIcon ??
+        contextUnselectedIcon ??
+        DEFAULT_OPTION_UNSELECTED_ICON);
     const icon = selected ? selectedIcon : unselectedIcon;
 
     let leftAddon = propLeftAddon;
@@ -186,9 +233,14 @@ export const Option = forwardRef<HTMLLIElement, OptionProps>(
         role={role}
         onClick={(event) => {
           onClick(event);
-          triggerManualChangeEvent(inputRef.current, value);
+          selectOption(value);
         }}
-        className={option({ icon: !!icon, selected, className })}
+        className={option({
+          icon: !!icon,
+          selected,
+          selectedClassName,
+          className,
+        })}
         secondaryText={secondaryText}
         height={height}
         leftAddon={leftAddon}

package/src/form/Select.tsx

@@ -1,7 +1,7 @@
 "use client";
 import { cnb } from "cnbuilder";
 import {
-  useMemo,
+  useCallback,
   useRef,
   useState,
   type ChangeEvent,
@@ -14,7 +14,7 @@ import {
 import { type BoxProps } from "../box/Box.js";
 import { IconRotator } from "../icon/IconRotator.js";
 import { getIcon } from "../icon/iconConfig.js";
-import { Menu, type MenuProps } from "../menu/Menu.js";
+import { type MenuProps } from "../menu/Menu.js";
 import { KeyboardMovementProvider } from "../movement/useKeyboardMovementProvider.js";
 import {
   type LabelA11y,
@@ -24,6 +24,7 @@ import {
 import { useEnsuredId } from "../useEnsuredId.js";
 import { useEnsuredRef } from "../useEnsuredRef.js";
 import { label as labelStyles } from "./Label.js";
+import { Listbox } from "./Listbox.js";
 import { SelectedOption } from "./SelectedOption.js";
 import {
   TextFieldContainer,
@@ -35,8 +36,8 @@ import { extractOptionsFromChildren } from "./selectUtils.js";
 import { textField } from "./textFieldStyles.js";
 import { type UserAgentAutocompleteProps } from "./types.js";
 import { useFormReset } from "./useFormReset.js";
-import { ListboxProvider, type ListboxContext } from "./useListboxProvider.js";
 import { useSelectCombobox } from "./useSelectCombobox.js";
+import { triggerManualChangeEvent } from "./utils.js";
 
 const EMPTY_STRING = "" as const;
 const noop = (): void => {
@@ -128,7 +129,7 @@ export interface SelectProps<Value extends string>
   defaultValue?: Value;
 
   /** @see {@link SelectChangeEvent} */
-  onChange?(event: SelectChangeEvent<Value>): void;
+  onChange?: (event: SelectChangeEvent<Value>) => void;
 
   /**
    * An optional floating label to display like other form fields.
@@ -166,7 +167,10 @@ export interface SelectProps<Value extends string>
    * - `anchor={BELOW_CENTER_ANCHOR}`
    * - `width="min"`
    */
-  menuProps?: Omit<MenuProps, "visible" | "onRequestClose" | "fixedTo">;
+  menuProps?: PropsWithRef<
+    Omit<MenuProps, "visible" | "onRequestClose" | "fixedTo">,
+    HTMLDivElement
+  >;
 
   /**
    * Any additional props to pass to the div that contains the current visible
@@ -328,7 +332,7 @@ export function Select<Value extends string>(
       onKeyDown,
       disabled,
       popupId: menuProps.id,
-      popupRef: menuProps.nodeRef,
+      popupRef: menuProps.ref,
       comboboxId,
       comboboxRef: containerRef,
     });
@@ -339,15 +343,6 @@ export function Select<Value extends string>(
     elementRef: inputRef,
     defaultValue: initialValue.current,
   });
-  const listboxContext = useMemo<ListboxContext>(
-    () => ({
-      inputRef,
-      currentValue,
-      selectedIconAfter,
-      disableSelectedIcon,
-    }),
-    [currentValue, disableSelectedIcon, inputRef, selectedIconAfter]
-  );
 
   const icon = getIcon("dropdown", propIcon);
   const theme = getFormConfig("theme", propTheme);
@@ -356,6 +351,7 @@ export function Select<Value extends string>(
     rightAddon = <IconRotator rotated={visible}>{icon}</IconRotator>;
   }
 
+  const { ref: listboxRef, ...listboxProps } = getMenuProps(menuProps);
   let listboxLabelledBy = menuProps["aria-labelledby"];
   const listboxLabel = menuProps["aria-label"];
   if (!listboxLabel && !listboxLabelledBy) {
@@ -363,77 +359,85 @@ export function Select<Value extends string>(
   }
 
   return (
-    <ListboxProvider value={listboxContext}>
-      <KeyboardMovementProvider value={movementContext}>
-        <TextFieldContainer
-          aria-labelledby={labelId}
-          {...remaining}
-          {...comboboxProps}
-          label={!!label}
-          theme={theme}
-          active={active || visible}
-          className={cnb("rmd-select-container", className)}
-          rightAddon={rightAddon}
-        >
-          <SelectedOption
-            option={currentOption}
-            placeholder={placeholder}
-            disableAddon={disableOptionAddon}
-            {...selectedOptionProps}
-          />
-          <input
-            aria-hidden
-            id={inputId}
-            ref={inputRefCallback}
-            type="text"
-            autoComplete={autoComplete}
-            name={name}
-            tabIndex={-1}
-            disabled={disabled}
-            required={required}
-            placeholder=" "
-            {...inputProps}
-            value={value}
-            defaultValue={defaultValue}
-            className={cnb(select({ theme }), textField())}
-            onChange={(event) => {
-              onChange(event as SelectChangeEvent<Value>);
-              if (typeof value !== "undefined") {
-                return;
-              }
+    <KeyboardMovementProvider value={movementContext}>
+      <TextFieldContainer
+        aria-labelledby={labelId}
+        {...remaining}
+        {...comboboxProps}
+        label={!!label}
+        theme={theme}
+        active={active || visible}
+        className={cnb("rmd-select-container", className)}
+        rightAddon={rightAddon}
+      >
+        <SelectedOption
+          option={currentOption}
+          placeholder={placeholder}
+          disableAddon={disableOptionAddon}
+          {...selectedOptionProps}
+        />
+        <input
+          aria-hidden
+          id={inputId}
+          ref={inputRefCallback}
+          type="text"
+          autoComplete={autoComplete}
+          name={name}
+          tabIndex={-1}
+          disabled={disabled}
+          required={required}
+          placeholder=" "
+          {...inputProps}
+          value={value}
+          defaultValue={defaultValue}
+          className={cnb(select({ theme }), textField())}
+          onChange={(event) => {
+            onChange(event as SelectChangeEvent<Value>);
+            if (typeof value !== "undefined") {
+              return;
+            }
 
-              const nextValue = event.currentTarget.value;
-              const nextOption = options.find((option) => option === nextValue);
+            const nextValue = event.currentTarget.value;
+            const nextOption = options.find((option) => option === nextValue);
 
-              setLocalValue(nextOption ?? initialValue.current);
-            }}
-          />
-          {label && (
-            <span
-              {...labelProps}
-              id={labelId}
-              className={labelStyles({
-                dense,
-                error,
-                disabled,
-                active: active || visible,
-                floating: true,
-                floatingActive: !!placeholder || !!currentOption,
-                className: labelProps.className,
-              })}
-            >
-              {label}
-            </span>
-          )}
-        </TextFieldContainer>
-        <Menu
-          {...getMenuProps(menuProps)}
-          aria-label={listboxLabel}
-          aria-labelledby={listboxLabelledBy as string}
-        >
-          {children}
-        </Menu>
-      </KeyboardMovementProvider>
-    </ListboxProvider>
+            setLocalValue(nextOption ?? initialValue.current);
+          }}
+        />
+        {label && (
+          <span
+            {...labelProps}
+            id={labelId}
+            className={labelStyles({
+              dense,
+              error,
+              disabled,
+              active: active || visible,
+              floating: true,
+              floatingActive: !!placeholder || !!currentOption,
+              className: labelProps.className,
+            })}
+          >
+            {label}
+          </span>
+        )}
+      </TextFieldContainer>
+      <Listbox
+        {...listboxProps}
+        aria-label={listboxLabel}
+        aria-labelledby={listboxLabelledBy as string}
+        nodeRef={listboxRef}
+        value={currentValue}
+        setValue={useCallback(
+          (option: "" | Value) => {
+            triggerManualChangeEvent(inputRef.current, option);
+          },
+          [inputRef]
+        )}
+        selectedIconAfter={selectedIconAfter}
+        disableSelectedIcon={disableSelectedIcon}
+      >
+        {children}
+      </Listbox>
+    </KeyboardMovementProvider>
   );
 }

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}
           />
         )}