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

package/src/form/NativeSelect.tsx

@@ -65,8 +65,6 @@ export interface NativeSelectProps
 }
 
 /**
- * **Server Component**
- *
  * This component is a wrapper for the native `<select>` field that applies the
  * same theming as `TextField` and `TextArea` components. This component might
  * not be used much since the `Select` offers more styling options.
@@ -125,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,
@@ -144,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(
@@ -162,7 +159,13 @@ export const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(
     return (
       <FormMessageContainer
         {...messageContainerProps}
-        messageProps={messageProps}
+        messageProps={
+          messageProps && {
+            error,
+            theme,
+            ...messageProps,
+          }
+        }
       >
         <TextFieldContainer
           {...containerProps}
@@ -179,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/SelectedOption.tsx

@@ -16,8 +16,6 @@ export interface SelectedOptionProps extends BoxProps {
 }
 
 /**
- * **Server Component**
- *
  * This component is used to render the current option.
  *
  * @since 6.0.0

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/SliderContainer.tsx

@@ -40,8 +40,6 @@ export interface SliderContainerProps
 }
 
 /**
- * **Server Component**
- *
  * The `SliderContainer` component is mostly an internal component that is
  * built-in to the `Slider` and `RangeSlider` components to add addons to the
  * left or right of the `SliderTrack`. When vertical, it will add addons to the

package/src/form/SliderMark.tsx

@@ -15,8 +15,6 @@ export interface SliderMarkProps extends HTMLAttributes<HTMLSpanElement> {
 }
 
 /**
- * **Server Component**
- *
  * @internal
  * @since 6.0.0
  */

package/src/form/SliderMarkLabel.tsx

@@ -31,8 +31,6 @@ export interface SliderMarkLabelProps extends CustomizableSliderMarkLabelProps {
 }
 
 /**
- * **Server Component**
- *
  * @internal
  * @since 6.0.0
  */

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/SliderTrack.tsx

@@ -24,8 +24,6 @@ export interface SliderTrackProps
 }
 
 /**
- * **Server Component**
- *
  * @internal
  * @since 2.5.0
  * @since 6.0.0 Updated to be internal only.

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;
 }
 
 /**
@@ -135,8 +135,6 @@ export interface SliderValueMarksProps
 }
 
 /**
- * **Server Component**
- *
  * @internal
  * @since 6.0.0
  */

package/src/form/Switch.tsx

@@ -38,8 +38,6 @@ export interface SwitchProps
 }
 
 /**
- * **Server Component**
- *
  * @example Simple Example
  * ```tsx
  * import { Form, Switch } from "@react-md/core";

package/src/form/SwitchTrack.tsx

@@ -20,7 +20,8 @@ export interface SwitchTrackProps extends HTMLAttributes<HTMLDivElement> {
 }
 
 /**
- * **Server Component**
+ * Used to create the switch track styles
+ * @internal
  */
 export const SwitchTrack = forwardRef<HTMLDivElement, SwitchTrackProps>(
   function SwitchTrack(props, ref) {