@react-md/core 1.0.0-next.19 → 1.0.0-next.20

package/src/focus/useFocusContainer.ts

@@ -1,11 +1,13 @@
 "use client";
+
 import {
-  useEffect,
-  useRef,
   type KeyboardEventHandler,
   type Ref,
   type RefObject,
+  useEffect,
+  useRef,
 } from "react";
+
 import { TRANSITION_CONFIG } from "../transition/config.js";
 import {
   type TransitionCallbacks,
@@ -14,9 +16,9 @@ import {
 } from "../transition/types.js";
 import { useEnsuredRef } from "../useEnsuredRef.js";
 import {
+  type FocusElementWithinType,
   focusElementWithin,
   getFocusableElements,
-  type FocusElementWithinType,
 } from "./utils.js";
 
 const noop = (): void => {
@@ -115,13 +117,11 @@ export interface FocusContainerImplementation<E extends HTMLElement> {
  *
  * @example Main Usage
  * ```tsx
- * import {
- *   Button,
- *   useFocusContainer,
- *   useScaleTransition,
- *   useToggle,
- * } from "@react-md/core";
- * import type { ReactElement } from "react";
+ * import { Button } from "@react-md/core/button/Button"
+ * import { useFocusContainer } from "@react-md/core/focus/useFocusContainer"
+ * import { useScaleTransition } from "@react-md/core/transition/useScaleTransition"
+ * import { useToggle } from "@react-md/core/useToggle"
+ * import { type ReactElement } from "react";
  *
  * function Example(): ReactElement {
  *   const { toggled, enable, disable } = useToggle(false);

package/src/form/Checkbox.tsx

@@ -1,5 +1,6 @@
 import { forwardRef } from "react";
-import { InputToggle, type CheckboxProps } from "./InputToggle.js";
+
+import { type CheckboxProps, InputToggle } from "./InputToggle.js";
 
 /**
  * **Client Component**

package/src/form/Fieldset.tsx

@@ -1,5 +1,6 @@
 import { cnb } from "cnbuilder";
-import { forwardRef, type FieldsetHTMLAttributes } from "react";
+import { type FieldsetHTMLAttributes, forwardRef } from "react";
+
 import { bem } from "../utils/bem.js";
 
 const styles = bem("rmd-fieldset");

package/src/form/Form.tsx

@@ -1,5 +1,6 @@
 "use client";
-import { forwardRef, type FormHTMLAttributes } from "react";
+
+import { type FormHTMLAttributes, forwardRef } from "react";
 
 const noop = (): void => {
   // do nothing

package/src/form/FormMessage.tsx

@@ -1,4 +1,5 @@
 import { forwardRef } from "react";
+
 import { useEnsuredId } from "../useEnsuredId.js";
 import { FormMessageCounter } from "./FormMessageCounter.js";
 import { getFormConfig } from "./formConfig.js";

package/src/form/FormMessageContainer.tsx

@@ -1,4 +1,5 @@
-import { forwardRef, type HTMLAttributes } from "react";
+import { type HTMLAttributes, forwardRef } from "react";
+
 import { type PropsWithRef } from "../types.js";
 import { FormMessage } from "./FormMessage.js";
 import { formMessageContainer } from "./formMessageContainerStyles.js";

package/src/form/FormMessageCounter.tsx

@@ -1,4 +1,5 @@
 import { type HTMLAttributes, type ReactElement, type ReactNode } from "react";
+
 import { formMessageCounter } from "./formMessageStyles.js";
 
 /** @since 2.9.0 */

package/src/form/InputToggle.tsx

@@ -1,13 +1,15 @@
 "use client";
+
 import { cnb } from "cnbuilder";
 import {
-  forwardRef,
   type CSSProperties,
   type HTMLAttributes,
   type InputHTMLAttributes,
   type LabelHTMLAttributes,
   type ReactNode,
+  forwardRef,
 } from "react";
+
 import { type ComponentWithRippleProps } from "../interaction/types.js";
 import { useElementInteraction } from "../interaction/useElementInteraction.js";
 import { type PropsWithRef } from "../types.js";

package/src/form/InputToggleIcon.tsx

@@ -1,8 +1,9 @@
 import { cnb } from "cnbuilder";
-import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
-import { getIcon } from "../icon/iconConfig.js";
+import { type HTMLAttributes, type ReactNode, forwardRef } from "react";
+
+import { getIcon } from "../icon/config.js";
 import { FORM_CONFIG } from "./formConfig.js";
-import { inputToggle, type InputToggleSize } from "./inputToggleStyles.js";
+import { type InputToggleSize, inputToggle } from "./inputToggleStyles.js";
 
 /**
  * @since 2.8.0

package/src/form/Label.tsx

@@ -1,5 +1,6 @@
 import { cnb } from "cnbuilder";
 import { forwardRef } from "react";
+
 import { type TextColor, type ThemeColor, cssUtils } from "../cssUtils.js";
 import { bem } from "../utils/bem.js";
 import { type LabelClassNameOptions, type LabelProps } from "./types.js";

package/src/form/Legend.tsx

@@ -1,5 +1,6 @@
 import { cnb } from "cnbuilder";
 import { forwardRef } from "react";
+
 import { cssUtils } from "../cssUtils.js";
 import { Typography, type TypographyProps } from "../typography/Typography.js";
 

package/src/form/Listbox.tsx

@@ -5,6 +5,7 @@ import {
   type Ref,
   useMemo,
 } from "react";
+
 import { Menu, type MenuProps } from "../menu/Menu.js";
 import { type LabelRequiredForA11y } from "../types.js";
 import { ListboxProvider } from "./ListboxProvider.js";

package/src/form/ListboxProvider.ts

@@ -1,5 +1,7 @@
 "use client";
+
 import { createContext, useContext } from "react";
+
 import { type OptionSelectedIconProps } from "./Option.js";
 
 /**

package/src/form/MenuItemCheckbox.tsx

@@ -1,11 +1,13 @@
 "use client";
+
 import { forwardRef } from "react";
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { type ICON_CONFIG } from "../icon/config.js";
 import {
-  MenuItemInputToggle,
   type MenuItemCheckboxProps,
+  MenuItemInputToggle,
 } from "./MenuItemInputToggle.js";
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-import { type ICON_CONFIG } from "../icon/iconConfig.js";
 
 /**
  * **Client Component**

package/src/form/MenuItemFileInput.tsx

@@ -1,10 +1,12 @@
 "use client";
+
 import {
-  forwardRef,
   type ChangeEventHandler,
   type InputHTMLAttributes,
+  forwardRef,
 } from "react";
-import { getIcon } from "../icon/iconConfig.js";
+
+import { getIcon } from "../icon/config.js";
 import { MenuItem, type MenuItemProps } from "../menu/MenuItem.js";
 import { useEnsuredId } from "../useEnsuredId.js";
 
@@ -17,7 +19,11 @@ const noop = (): void => {
  * implementation.
  */
 export interface MenuItemFileInputProps
-  extends Omit<MenuItemProps, "onChange"> {
+  extends Omit<MenuItemProps, "onChange">,
+    Pick<
+      InputHTMLAttributes<HTMLInputElement>,
+      "accept" | "capture" | "multiple"
+    > {
   /**
    * A change event handler that should do something with the selected files.
    * Usually the `onChange` returned by `useFileUpload` or:
@@ -36,10 +42,6 @@ export interface MenuItemFileInputProps
    */
   onChange: ChangeEventHandler<HTMLInputElement>;
 
-  accept?: InputHTMLAttributes<HTMLInputElement>["accept"];
-  capture?: InputHTMLAttributes<HTMLInputElement>["capture"];
-  multiple?: InputHTMLAttributes<HTMLInputElement>["multiple"];
-
   /**
    * Set this to `true` if the `Menu` should not close when the file input's
    * menu item is clicked.
@@ -67,8 +69,9 @@ export const MenuItemFileInput = forwardRef<
     id: propId,
     onClick = noop,
     onChange,
-    accept = "",
-    multiple = false,
+    accept,
+    capture,
+    multiple,
     children,
     leftAddon: propLeftAddon,
     preventMenuHideOnClick = false,
@@ -91,12 +94,21 @@ export const MenuItemFileInput = forwardRef<
           event.stopPropagation();
         }
 
-        // create a temporary file input element and click it to trigger the
-        // file upload behavior.
+        // Since the menu closes when the menu item is clicked causing the
+        // elements to be removed from the DOM, a normal `<input type="file" />`
+        // can't be used. Instead, create a temporary file input element and
+        // click it to trigger the file upload behavior.
         let input: HTMLInputElement | null = document.createElement("input");
         input.type = "file";
-        input.accept = accept;
-        input.multiple = multiple;
+        if (accept) {
+          input.accept = accept;
+        }
+        if (multiple) {
+          input.multiple = multiple;
+        }
+        if (capture) {
+          input.capture = capture === true ? "" : capture;
+        }
 
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-expect-error

package/src/form/MenuItemInputToggle.tsx

@@ -1,12 +1,14 @@
 "use client";
+
 import { cnb } from "cnbuilder";
 import {
-  forwardRef,
   type CSSProperties,
   type HTMLAttributes,
   type MouseEvent,
   type ReactNode,
+  forwardRef,
 } from "react";
+
 import { ListItem } from "../list/ListItem.js";
 import {
   type ListItemAddonPosition,

package/src/form/MenuItemRadio.tsx

@@ -1,11 +1,13 @@
 "use client";
+
 import { forwardRef } from "react";
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { type ICON_CONFIG } from "../icon/config.js";
 import {
   MenuItemInputToggle,
   type MenuItemRadioProps,
 } from "./MenuItemInputToggle.js";
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-import { type ICON_CONFIG } from "../icon/iconConfig.js";
 
 /**
  * **Client Component**

package/src/form/MenuItemSwitch.tsx

@@ -1,5 +1,7 @@
 "use client";
+
 import { forwardRef } from "react";
+
 import {
   MenuItemInputToggle,
   type MenuItemSwitchProps,

package/src/form/MenuItemTextField.tsx

@@ -1,6 +1,8 @@
 "use client";
+
 import { cnb } from "cnbuilder";
-import { forwardRef, type HTMLAttributes } from "react";
+import { type HTMLAttributes, forwardRef } from "react";
+
 import { type PropsWithRef } from "../types.js";
 import { TextField, type TextFieldProps } from "./TextField.js";
 

package/src/form/NativeSelect.tsx

@@ -1,11 +1,12 @@
 import {
-  forwardRef,
   type CSSProperties,
   type HTMLAttributes,
   type ReactNode,
   type SelectHTMLAttributes,
+  forwardRef,
 } from "react";
-import { getIcon } from "../icon/iconConfig.js";
+
+import { getIcon } from "../icon/config.js";
 import { type PropsWithRef } from "../types.js";
 import { useEnsuredId } from "../useEnsuredId.js";
 import { FormMessageContainer } from "./FormMessageContainer.js";

package/src/form/OptGroup.tsx

@@ -1,5 +1,7 @@
 "use client";
-import { forwardRef, type ReactNode } from "react";
+
+import { type ReactNode, forwardRef } from "react";
+
 import { type ListElement, type ListProps } from "../list/List.js";
 import {
   ListSubheader,

package/src/form/Option.tsx

@@ -1,14 +1,16 @@
 "use client";
+
 import { cnb } from "cnbuilder";
-import { forwardRef, Fragment, type ReactNode } from "react";
-import { getIcon } from "../icon/iconConfig.js";
-import { icon } from "../icon/styles.js";
+import { Fragment, type ReactNode, forwardRef } from "react";
+
 import {
   TextIconSpacing,
   type TextIconSpacingProps,
 } from "../icon/TextIconSpacing.js";
-import { getListItemHeight } from "../list/getListItemHeight.js";
+import { getIcon } from "../icon/config.js";
+import { icon } from "../icon/styles.js";
 import { ListItemText } from "../list/ListItemText.js";
+import { getListItemHeight } from "../list/getListItemHeight.js";
 import { MenuItem, type MenuItemProps } from "../menu/MenuItem.js";
 import { useEnsuredId } from "../useEnsuredId.js";
 import { useListboxContext } from "./ListboxProvider.js";

package/src/form/Password.tsx

@@ -1,16 +1,18 @@
 "use client";
-import { forwardRef, type ReactNode } from "react";
+
+import { type ReactNode, forwardRef } from "react";
+
 import { Button, type ButtonProps } from "../button/Button.js";
-import { getIcon } from "../icon/iconConfig.js";
+import { getIcon } from "../icon/config.js";
 import { type PropsWithRef } from "../types.js";
 import { useEnsuredId } from "../useEnsuredId.js";
 import { useToggle } from "../useToggle.js";
+import { TextField, type TextFieldProps } from "./TextField.js";
 import {
   password,
   passwordInput,
   passwordInputToggle,
 } from "./passwordStyles.js";
-import { TextField, type TextFieldProps } from "./TextField.js";
 
 /**
  * @example Simple Example

package/src/form/Radio.tsx

@@ -1,5 +1,7 @@
 "use client";
+
 import { forwardRef } from "react";
+
 import { InputToggle, type RadioProps } from "./InputToggle.js";
 
 /**

package/src/form/ResizingTextAreaWrapper.tsx

@@ -1,11 +1,12 @@
 import { cnb } from "cnbuilder";
 import {
-  forwardRef,
   type CSSProperties,
   type HTMLAttributes,
   type Ref,
   type TextareaHTMLAttributes,
+  forwardRef,
 } from "react";
+
 import { textArea } from "./textAreaStyles.js";
 
 /**

package/src/form/Select.tsx

@@ -1,19 +1,21 @@
 "use client";
+
 import { cnb } from "cnbuilder";
 import {
-  useCallback,
-  useRef,
-  useState,
   type ChangeEvent,
   type HTMLAttributes,
   type InputHTMLAttributes,
   type ReactElement,
   type ReactNode,
   type Ref,
+  useCallback,
+  useRef,
+  useState,
 } from "react";
+
 import { type BoxProps } from "../box/Box.js";
 import { IconRotator } from "../icon/IconRotator.js";
-import { getIcon } from "../icon/iconConfig.js";
+import { getIcon } from "../icon/config.js";
 import { type MenuProps } from "../menu/Menu.js";
 import { KeyboardMovementProvider } from "../movement/useKeyboardMovementProvider.js";
 import {

package/src/form/SelectedOption.tsx

@@ -1,5 +1,6 @@
 import { cnb } from "cnbuilder";
 import { type ReactElement, type ReactNode } from "react";
+
 import { Box, type BoxProps } from "../box/Box.js";
 import { cssUtils } from "../cssUtils.js";
 import { type OptionProps } from "./Option.js";

package/src/form/Slider.tsx

@@ -1,13 +1,13 @@
 "use client";
+
 import {
-  useRef,
-  useState,
   type HTMLAttributes,
   type ReactElement,
   type ReactNode,
   type Ref,
+  useRef,
 } from "react";
-import { useDraggable } from "../draggable/useDraggable.js";
+
 import { type TooltipProps } from "../tooltip/Tooltip.js";
 import {
   type LabelRequiredForA11y,
@@ -16,8 +16,7 @@ import {
 } from "../types.js";
 import { useEnsuredId } from "../useEnsuredId.js";
 import { identity } from "../utils/identity.js";
-import { withinRange } from "../utils/withinRange.js";
-import { SliderContainer, type SliderAddonProps } from "./SliderContainer.js";
+import { type SliderAddonProps, SliderContainer } from "./SliderContainer.js";
 import {
   SliderThumb,
   type SliderThumbPresentation,
@@ -25,12 +24,13 @@ import {
 } from "./SliderThumb.js";
 import { SliderTrack } from "./SliderTrack.js";
 import {
-  SliderValueMarks,
   type SliderMarksOptions,
+  SliderValueMarks,
 } from "./SliderValueMarks.js";
 import { getJumpValue } from "./sliderUtils.js";
 import { type RangeSliderState } from "./useRangeSlider.js";
 import { type SliderState, type SliderValueOptions } from "./useSlider.js";
+import { useSliderDraggable } from "./useSliderDraggable.js";
 
 declare module "react" {
   interface CSSProperties {
@@ -400,7 +400,7 @@ export function Slider(
     thumb1LabelledBy = minThumbLabelledBy;
     thumb1Label = minThumbLabel || (minThumbLabelledBy ? undefined : "Min");
     thumb2LabelledBy = maxThumbLabelledBy;
-    thumb2Label = maxThumbLabel || (maxThumbLabelledBy ? undefined : "max");
+    thumb2Label = maxThumbLabel || (maxThumbLabelledBy ? undefined : "Max");
 
     [thumb1Value, thumb2Value] = rangeValue;
 
@@ -429,7 +429,6 @@ export function Slider(
     };
   }
 
-  const [thumb1Dragging, setThumb1Dragging] = useState(false);
   const {
     onKeyDown: thumb1OnKeyDown,
     onMouseUp: thumb1OnMouseUp,
@@ -439,7 +438,9 @@ export function Slider(
     onTouchMove: thumb1OnTouchMove,
     dragPercentage: thumb1DragPercentage,
     draggableRef: thumb1DraggableRef,
-  } = useDraggable({
+    dragging: thumb1Dragging,
+  } = useSliderDraggable({
+    jump,
     ref: thumb1Ref,
     min,
     max: thumb1Max,
@@ -447,41 +448,10 @@ export function Slider(
     step,
     value: thumb1Value,
     setValue: setThumb1Value,
-    dragging: thumb1Dragging,
-    setDragging: setThumb1Dragging,
     disabled,
     vertical,
-    withinOffsetParent: true,
-    disableDraggingCursorClassName: true,
-    onKeyDown(event) {
-      switch (event.key) {
-        case "PageUp":
-          event.preventDefault();
-          event.stopPropagation();
-          setThumb1Value((prevValue) =>
-            withinRange({
-              min,
-              max: thumb1Max,
-              value: prevValue + jump,
-            })
-          );
-          break;
-        case "PageDown":
-          event.preventDefault();
-          event.stopPropagation();
-          setThumb1Value((prevValue) =>
-            withinRange({
-              min,
-              max: thumb1Max,
-              value: prevValue - jump,
-            })
-          );
-          break;
-      }
-    },
   });
 
-  const [thumb2Dragging, setThumb2Dragging] = useState(false);
   const {
     onKeyDown: thumb2OnKeyDown,
     onMouseUp: thumb2OnMouseUp,
@@ -491,7 +461,9 @@ export function Slider(
     onTouchMove: thumb2OnTouchMove,
     dragPercentage: thumb2DragPercentage,
     draggableRef: thumb2DraggableRef,
-  } = useDraggable({
+    dragging: thumb2Dragging,
+  } = useSliderDraggable({
+    jump,
     ref: thumb2Ref,
     min: thumb2Min,
     max,
@@ -499,38 +471,8 @@ export function Slider(
     step,
     value: thumb2Value,
     setValue: setThumb2Value,
-    dragging: thumb2Dragging,
-    setDragging: setThumb2Dragging,
     vertical,
     disabled,
-    withinOffsetParent: true,
-    disableDraggingCursorClassName: true,
-    onKeyDown(event) {
-      switch (event.key) {
-        case "PageUp":
-          event.preventDefault();
-          event.stopPropagation();
-          setThumb2Value((prevValue) =>
-            withinRange({
-              min: thumb2Min,
-              max,
-              value: prevValue + jump,
-            })
-          );
-          break;
-        case "PageDown":
-          event.preventDefault();
-          event.stopPropagation();
-          setThumb2Value((prevValue) =>
-            withinRange({
-              min: thumb2Min,
-              max,
-              value: prevValue - jump,
-            })
-          );
-          break;
-      }
-    },
   });
 
   const dragging = thumb1Dragging || thumb2Dragging;

package/src/form/SliderContainer.tsx

@@ -1,5 +1,6 @@
 import { cnb } from "cnbuilder";
-import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
+import { type HTMLAttributes, type ReactNode, forwardRef } from "react";
+
 import { bem } from "../utils/bem.js";
 
 const styles = bem("rmd-slider-container");

package/src/form/SliderMark.tsx

@@ -1,5 +1,6 @@
 import { cnb } from "cnbuilder";
 import { type HTMLAttributes, type ReactElement } from "react";
+
 import { bem } from "../utils/bem.js";
 
 const styles = bem("rmd-slider-mark");

package/src/form/SliderMarkLabel.tsx

@@ -1,8 +1,9 @@
 import { cnb } from "cnbuilder";
 import { type ReactElement } from "react";
+
 import {
-  Typography,
   type CustomTypographyComponent,
+  Typography,
   type TypographyProps,
 } from "../typography/Typography.js";
 import { type TypographyType } from "../typography/typographyStyles.js";

package/src/form/SliderThumb.tsx

@@ -1,13 +1,15 @@
 "use client";
+
 import { cnb } from "cnbuilder";
 import {
-  forwardRef,
-  useEffect,
-  useState,
   type ChangeEventHandler,
   type HTMLAttributes,
   type ReactNode,
+  forwardRef,
+  useEffect,
+  useState,
 } from "react";
+
 import { useUserInteractionMode } from "../interaction/UserInteractionModeProvider.js";
 import { type TooltipProps } from "../tooltip/Tooltip.js";
 import { type LabelRequiredForA11y } from "../types.js";
@@ -304,6 +306,7 @@ export const SliderThumb = forwardRef<
         max={max}
         step={step}
         value={value}
+        disabled={disabled}
         tabIndex={-1}
         onChange={onChange}
         className={styles("input")}