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

package/src/form/SliderTrack.tsx

@@ -1,11 +1,12 @@
 import { cnb } from "cnbuilder";
-import { forwardRef, type HTMLAttributes } from "react";
+import { type HTMLAttributes, forwardRef } from "react";
+
 import { bem } from "../utils/bem.js";
 import {
-  getClosestThumbEventHandlers,
-  getThumbOffsets,
   type ClosestThumbEventHandlersOptions,
   type ThumbOffsetsOptions,
+  getClosestThumbEventHandlers,
+  getThumbOffsets,
 } from "./sliderUtils.js";
 
 const styles = bem("rmd-slider-track");

package/src/form/SliderValueMarks.tsx

@@ -4,15 +4,16 @@ import {
   type ReactElement,
   type ReactNode,
 } from "react";
+
 import { getPercentage } from "../utils/getPercentage.js";
 import {
-  getRangeSteps,
   type RangeStepsOptions,
+  getRangeSteps,
 } from "../utils/getRangeSteps.js";
 import { SliderMark } from "./SliderMark.js";
 import {
-  SliderMarkLabel,
   type CustomizableSliderMarkLabelProps,
+  SliderMarkLabel,
 } from "./SliderMarkLabel.js";
 
 /**

package/src/form/SliderValueTooltip.tsx

@@ -1,6 +1,8 @@
 "use client";
+
 import { cnb } from "cnbuilder";
 import { type ReactElement, type ReactNode } from "react";
+
 import { Tooltip, type TooltipProps } from "../tooltip/Tooltip.js";
 import { type CSSTransitionClassNames } from "../transition/types.js";
 import { bem } from "../utils/bem.js";

package/src/form/Switch.tsx

@@ -1,11 +1,12 @@
 import { cnb } from "cnbuilder";
 import {
-  forwardRef,
   type CSSProperties,
   type HTMLAttributes,
   type InputHTMLAttributes,
   type ReactNode,
+  forwardRef,
 } from "react";
+
 import { type PropsWithRef } from "../types.js";
 import { useEnsuredId } from "../useEnsuredId.js";
 import { FormMessageContainer } from "./FormMessageContainer.js";

package/src/form/SwitchTrack.tsx

@@ -1,10 +1,11 @@
 import { cnb } from "cnbuilder";
 import {
-  forwardRef,
   type CSSProperties,
   type HTMLAttributes,
   type ReactNode,
+  forwardRef,
 } from "react";
+
 import { type PropsWithRef } from "../types.js";
 import { bem } from "../utils/bem.js";
 

package/src/form/TextArea.tsx

@@ -1,10 +1,12 @@
 "use client";
+
 import {
-  forwardRef,
   type CSSProperties,
   type HTMLAttributes,
   type TextareaHTMLAttributes,
+  forwardRef,
 } from "react";
+
 import { type PropsWithRef } from "../types.js";
 import { useEnsuredId } from "../useEnsuredId.js";
 import { useEnsuredRef } from "../useEnsuredRef.js";
@@ -16,8 +18,8 @@ import { getFormConfig } from "./formConfig.js";
 import { textArea, textAreaContainer } from "./textAreaStyles.js";
 import { type FormFieldOptions } from "./types.js";
 import {
-  useResizingTextArea,
   type TextAreaResize,
+  useResizingTextArea,
 } from "./useResizingTextArea.js";
 
 /**

package/src/form/TextField.tsx

@@ -1,9 +1,10 @@
 import {
-  forwardRef,
   type CSSProperties,
   type HTMLAttributes,
   type InputHTMLAttributes,
+  forwardRef,
 } from "react";
+
 import { type PropsWithRef } from "../types.js";
 import { useEnsuredId } from "../useEnsuredId.js";
 import { FormMessageContainer } from "./FormMessageContainer.js";

package/src/form/TextFieldAddon.tsx

@@ -1,5 +1,6 @@
 import { cnb } from "cnbuilder";
 import { forwardRef } from "react";
+
 import { box } from "../box/styles.js";
 import { bem } from "../utils/bem.js";
 import { type ConfigurableTextFieldAddonProps } from "./types.js";

package/src/form/TextFieldContainer.tsx

@@ -1,5 +1,7 @@
 "use client";
-import { forwardRef, type HTMLAttributes } from "react";
+
+import { type HTMLAttributes, forwardRef } from "react";
+
 import { TextFieldAddon } from "./TextFieldAddon.js";
 import { getFormConfig } from "./formConfig.js";
 import { textFieldContainer } from "./textFieldContainerStyles.js";

package/src/form/formMessageContainerStyles.ts

@@ -1,4 +1,5 @@
 import { cnb } from "cnbuilder";
+
 import { bem } from "../utils/bem.js";
 
 const styles = bem("rmd-form-message-container");

package/src/form/formMessageStyles.ts

@@ -1,4 +1,5 @@
 import { cnb } from "cnbuilder";
+
 import { cssUtils } from "../cssUtils.js";
 import { bem } from "../utils/bem.js";
 import { type FormMessageClassNameOptions } from "./types.js";

package/src/form/inputToggleStyles.ts

@@ -1,4 +1,5 @@
 import { cnb } from "cnbuilder";
+
 import { cssUtils } from "../cssUtils.js";
 import { bem } from "../utils/bem.js";
 import { type FormComponentStates } from "./types.js";

package/src/form/menuItemInputToggleStyles.ts

@@ -1,4 +1,5 @@
 import { cnb } from "cnbuilder";
+
 import { bem } from "../utils/bem.js";
 
 const styles = bem("rmd-menu-item-input-toggle");

package/src/form/nativeSelectStyles.ts

@@ -1,4 +1,5 @@
 import { cnb } from "cnbuilder";
+
 import { bem } from "../utils/bem.js";
 
 const styles = bem("rmd-native-select");

package/src/form/optionStyles.ts

@@ -1,4 +1,5 @@
 import { cnb } from "cnbuilder";
+
 import { bem } from "../utils/bem.js";
 
 const styles = bem("rmd-option");

package/src/form/passwordStyles.ts

@@ -1,4 +1,5 @@
 import { cnb } from "cnbuilder";
+
 import { bem } from "../utils/bem.js";
 
 const styles = bem("rmd-password");

package/src/form/selectStyles.ts

@@ -1,4 +1,5 @@
 import { cnb } from "cnbuilder";
+
 import { bem } from "../utils/bem.js";
 import { type FormTheme } from "./types.js";
 

package/src/form/selectUtils.ts

@@ -1,4 +1,5 @@
-import { Children, isValidElement, type ReactNode } from "react";
+import { Children, type ReactNode, isValidElement } from "react";
+
 import { type MenuItemProps } from "../menu/MenuItem.js";
 
 /**

package/src/form/sliderUtils.ts

@@ -1,4 +1,5 @@
 import { type RefObject } from "react";
+
 import {
   type DraggableEventHandlers,
   type DraggableImplementation,
@@ -7,8 +8,8 @@ import {
 } from "../draggable/useDraggable.js";
 import { type RenameKeysWithPrefix } from "../types.js";
 import {
-  getClientPosition,
   type ClientPositionEvent,
+  getClientPosition,
 } from "../utils/getClientPosition.js";
 import { getPercentage } from "../utils/getPercentage.js";
 import { getRangeSteps } from "../utils/getRangeSteps.js";
@@ -34,7 +35,7 @@ export const getJumpValue = (options: JumpOptions): number => {
   const steps = getRangeSteps({ min, max, step });
   const value = jump ?? (steps / 10) * step;
   if (Number.isInteger(step)) {
-    return Math.ceil(value);
+    return Math.max(step, Math.ceil(value));
   }
 
   return value;
@@ -44,7 +45,7 @@ export const getJumpValue = (options: JumpOptions): number => {
  * @since 6.0.0
  * @internal
  */
-type RequiredThumbProps = Pick<
+export type RequiredThumbProps = Pick<
   DraggableImplementation,
   | "dragging"
   | keyof DraggableMouseEventHandlers<HTMLElement>
@@ -114,7 +115,7 @@ export const getClosestThumbEventHandlers = (
       const thumb2Position = vertical ? thumb2Rect.y : thumb2Rect.x;
 
       return (
-        Math.abs(clientPosition - thumb1Position) <
+        Math.abs(clientPosition - thumb1Position) <=
         Math.abs(clientPosition - thumb2Position)
       );
     }
@@ -158,7 +159,7 @@ export const getClosestThumbEventHandlers = (
  * @internal
  * @since 6.0.0
  */
-export function getThumbOffset(
+function getThumbOffset(
   offset: number | undefined,
   fallback: number
 ): string | undefined {
@@ -202,7 +203,7 @@ interface ThumbOffsets {
  * @since 6.0.0
  * @internal
  */
-export const getThumbOffsets = (options: ThumbOffsetsOptions): ThumbOffsets => {
+export function getThumbOffsets(options: ThumbOffsetsOptions): ThumbOffsets {
   const {
     min,
     max,
@@ -232,4 +233,4 @@ export const getThumbOffsets = (options: ThumbOffsetsOptions): ThumbOffsets => {
     "--rmd-slider-offset-1": getThumbOffset(thumb1Percentage, 0),
     "--rmd-slider-offset-2": getThumbOffset(thumb2Percentage, 1),
   };
-};
+}

package/src/form/switchStyles.ts

@@ -1,4 +1,5 @@
 import { cnb } from "cnbuilder";
+
 import { bem } from "../utils/bem.js";
 
 declare module "react" {

package/src/form/textAreaStyles.ts

@@ -1,8 +1,9 @@
 import { cnb } from "cnbuilder";
+
 import { bem } from "../utils/bem.js";
 import {
-  textField,
   type TextFieldClassNameOptions,
+  textField,
 } from "./textFieldStyles.js";
 import { type TextAreaResize } from "./useResizingTextArea.js";
 

package/src/form/textFieldContainerStyles.ts

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

package/src/form/textFieldStyles.ts

@@ -1,4 +1,5 @@
 import { cnb } from "cnbuilder";
+
 import { bem } from "../utils/bem.js";
 
 const styles = bem("rmd-text-field");

package/src/form/types.ts

@@ -5,6 +5,7 @@ import {
   type LabelHTMLAttributes,
   type ReactNode,
 } from "react";
+
 import { type PropsWithRef } from "../types.js";
 
 declare module "react" {

package/src/form/useCheckboxGroup.ts

@@ -1,5 +1,7 @@
 "use client";
+
 import { useCallback, useRef } from "react";
+
 import { type UseStateInitializer, type UseStateSetter } from "../types.js";
 import { useReadonlySet } from "../useReadonlySet.js";
 
@@ -23,7 +25,7 @@ export interface CheckboxGroupOptions<V> {
 
   /**
    * This prop **must** be defined to enable the indeterminate checkbox feature
-   * from the hook. This should be a list of all the possible checkbox values in
+   * from the hook and should be a list of all the possible checkbox values in
    * the group. This will be used to select all values when the indeterminate
    * checkbox is checked and determine if all the checkboxes have manually be
    * selected.
@@ -34,7 +36,7 @@ export interface CheckboxGroupOptions<V> {
    *   { label: "First", value: "a" },
    *   { label: "Second", value: "b" },
    *   { label: "Third", value: "c" },
-   * ] as const:
+   * ] as const;
    * const VALUES = OPTIONS.map(({ value }) => value) as const;
    *
    * const {

package/src/form/useCombobox.ts

@@ -1,7 +1,6 @@
 "use client";
+
 import {
-  useCallback,
-  useRef,
   type FocusEventHandler,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   type InputHTMLAttributes,
@@ -10,7 +9,10 @@ import {
   type Ref,
   type RefCallback,
   type RefObject,
+  useCallback,
+  useRef,
 } from "react";
+
 import { type MenuProps } from "../menu/Menu.js";
 import { type MenuSheetConfigurableProps } from "../menu/MenuSheet.js";
 import {

package/src/form/useEditableCombobox.ts

@@ -1,5 +1,7 @@
 "use client";
+
 import { useRef } from "react";
+
 import { isTypeEvent } from "../movement/utils.js";
 import {
   type ComboboxImplementation,

package/src/form/useFormReset.ts

@@ -1,8 +1,10 @@
 "use client";
-import { useEffect, type RefObject } from "react";
+
+import { type RefObject, useEffect } from "react";
+
 import {
-  triggerManualChangeEvent,
   type ChangeableHTMLElement,
+  triggerManualChangeEvent,
 } from "./utils.js";
 
 /**

package/src/form/useNumberField.ts

@@ -1,15 +1,17 @@
 "use client";
+
 import { useCallback, useRef, useState } from "react";
+
 import { type UseStateInitializer, type UseStateSetter } from "../types.js";
 import { withinRange } from "../utils/withinRange.js";
 import {
-  useTextField,
   type ProvidedTextFieldMessageProps,
   type ProvidedTextFieldProps,
   type TextFieldHookOptions,
   type TextFieldHookState,
   type TextFieldImplementation,
   type ValidatedTextFieldImplementation,
+  useTextField,
 } from "./useTextField.js";
 
 const noop = (): void => {

package/src/form/useRadioGroup.ts

@@ -1,11 +1,13 @@
 "use client";
+
 import {
+  type ChangeEventHandler,
+  type FormEventHandler,
   useCallback,
   useRef,
   useState,
-  type ChangeEventHandler,
-  type FormEventHandler,
 } from "react";
+
 import { type UseStateInitializer, type UseStateSetter } from "../types.js";
 
 const noop = (): void => {
@@ -114,7 +116,7 @@ export interface CombinedRadioGroupReturnValue<V extends string | number> {
   reset: () => void;
   value: V;
   setValue: UseStateSetter<V>;
-  getRadioProps?: (value: V) => {
+  getRadioProps: (value: V) => {
     name?: string;
     value?: V;
     checked: boolean;

package/src/form/useRangeSlider.ts

@@ -1,5 +1,7 @@
 "use client";
+
 import { useState } from "react";
+
 import { type UseStateInitializer, type UseStateSetter } from "../types.js";
 import { type SliderValueOptions } from "./useSlider.js";
 
@@ -21,6 +23,7 @@ export interface RangeSliderState {
  * @since 6.0.0
  */
 export interface RangeSliderOptions extends SliderValueOptions {
+  /** @defaultValue `[min, max]` */
   defaultValue?: UseStateInitializer<RangeSliderValue>;
 }
 

package/src/form/useResizingTextArea.ts

@@ -1,13 +1,15 @@
 "use client";
+
 import {
+  type ChangeEventHandler,
+  type Ref,
+  type RefCallback,
   useCallback,
   useEffect,
   useRef,
   useState,
-  type ChangeEventHandler,
-  type Ref,
-  type RefCallback,
 } from "react";
+
 import { useEnsuredRef } from "../useEnsuredRef.js";
 import { useResizeObserver } from "../useResizeObserver.js";
 

package/src/form/useSelectCombobox.ts

@@ -1,8 +1,9 @@
 "use client";
+
 import {
-  useCombobox,
   type ComboboxImplementation,
   type ConfigurableComboboxOptions,
+  useCombobox,
 } from "./useCombobox.js";
 
 /**

package/src/form/useSlider.ts

@@ -1,5 +1,7 @@
 "use client";
+
 import { useState } from "react";
+
 import { type UseStateInitializer, type UseStateSetter } from "../types.js";
 import { getRangeDefaultValue } from "../utils/getRangeDefaultValue.js";
 
@@ -50,9 +52,7 @@ export interface SliderImplementation
  * @since 6.0.0
  */
 export interface SliderOptions extends SliderValueOptions {
-  /**
-   * @defaultValue `(max - min ) / 2`
-   */
+  /** @defaultValue `(max - min ) / 2` */
   defaultValue?: UseStateInitializer<number>;
 }
 

package/src/form/useSliderDraggable.ts

@@ -0,0 +1,71 @@
+import { useState } from "react";
+
+import {
+  type DraggableImplementation,
+  type DraggableOptions,
+  useDraggable,
+} from "../draggable/useDraggable.js";
+import { withinRange } from "../utils/withinRange.js";
+
+type SliderDraggableOptions = Pick<
+  Required<DraggableOptions>,
+  | "ref"
+  | "min"
+  | "max"
+  | "step"
+  | "value"
+  | "setValue"
+  | "disabled"
+  | "vertical"
+> &
+  Pick<DraggableOptions, "rangeMin" | "rangeMax"> & {
+    jump: number;
+  };
+
+/**
+ * @internal
+ */
+export function useSliderDraggable(
+  options: SliderDraggableOptions
+): DraggableImplementation {
+  const { value, setValue, jump, ...remaining } = options;
+  const { min, max } = options;
+  const [dragging, setDragging] = useState(false);
+  const draggable = useDraggable({
+    ...remaining,
+    withinOffsetParent: true,
+    disableDraggingCursorClassName: true,
+    dragging,
+    setDragging,
+    value,
+    setValue,
+    onKeyDown(event) {
+      switch (event.key) {
+        case "PageUp":
+          event.preventDefault();
+          event.stopPropagation();
+          setValue((prevValue) =>
+            withinRange({
+              min,
+              max,
+              value: prevValue + jump,
+            })
+          );
+          break;
+        case "PageDown":
+          event.preventDefault();
+          event.stopPropagation();
+          setValue((prevValue) =>
+            withinRange({
+              min,
+              max,
+              value: prevValue - jump,
+            })
+          );
+          break;
+      }
+    },
+  });
+
+  return draggable;
+}