@react-md/core 1.0.0-next.1 → 1.0.0-next.11

package/src/draggable/useDraggable.ts

@@ -13,11 +13,12 @@ import { useDir } from "../typography/WritingDirectionProvider.js";
 import { useEnsuredRef } from "../useEnsuredRef.js";
 import { useEnsuredState } from "../useEnsuredState.js";
 import { useHtmlClassName } from "../useHtmlClassName.js";
+import { getPercentage } from "../utils/getPercentage.js";
+import { getRangeDefaultValue } from "../utils/getRangeDefaultValue.js";
 import { getRangeSteps } from "../utils/getRangeSteps.js";
 import { nearest } from "../utils/nearest.js";
 import { withinRange } from "../utils/withinRange.js";
 import {
-  getDraggableDefaultValue,
   isMouseDragStartEvent,
   isTouchDragStartEvent,
   updateDragPosition,
@@ -292,6 +293,18 @@ export interface DraggableImplementation<E extends HTMLElement = HTMLElement>
    */
   decrement(): void;
 
+  /**
+   * THe current percentage the `value` is within the range.
+   *
+   * ```ts
+   * const percentage =
+   *   dragging && withinOffsetParent
+   *     ? : dragPercentage
+   *     : getPercentage({ min, max, value });
+   * ```
+   */
+  percentage: number;
+
   /**
    * A ref that **Must** be passed to the element that should be draggable.
    */
@@ -301,29 +314,7 @@ export interface DraggableImplementation<E extends HTMLElement = HTMLElement>
    * This value will only update while dragging with a mouse or touch and should
    * be used for the positioning styles while dragging.
    *
-   * @example
-   * Inline Styles
-   * ```ts
-   * import { getPercentage, useDraggable } from "@react-md/core";
-   *
-   * const min = 120;
-   * const max = 256;
-   * const { value, dragging, dragPercentage } = useDraggable({
-   *   min,
-   *   max,
-   *   defaultValue: min,
-   * });
-   *
-   * const percentage = dragging
-   *   ? dragPercentage
-   *   : getPercentage({ min, max, value });
-   *
-   * const style: CSSProperties = {
-   *   left: `${percentage * 100}%`<>
-   * };
-   *
-   * // do stuff
-   * ```
+   * Note: The {@Link percentage} will use this value while dragging.
    */
   dragPercentage: number;
 
@@ -385,7 +376,12 @@ export function useDraggable<E extends HTMLElement>(
   const [value, setValue] = useEnsuredState({
     value: propValue,
     setValue: propSetValue,
-    defaultValue: () => getDraggableDefaultValue({ min, max, defaultValue }),
+    defaultValue: getRangeDefaultValue({
+      min,
+      max,
+      step: 1,
+      defaultValue,
+    }),
   });
   const [dragging, setDragging] = useEnsuredState({
     value: propDragging,
@@ -394,6 +390,10 @@ export function useDraggable<E extends HTMLElement>(
   });
 
   const isRTL = useDir().dir === "rtl";
+  const percentage =
+    dragging && withinOffsetParent
+      ? dragPercentage
+      : getPercentage({ min, max, value });
   const maximum = useCallback(() => {
     setValue(max);
   }, [max, setValue]);
@@ -762,6 +762,7 @@ export function useDraggable<E extends HTMLElement>(
     decrement,
     draggedOnce,
     draggableRef: ref,
+    percentage,
     dragPercentage,
     touchEventHandlers,
     mouseEventHandlers,

package/src/draggable/utils.ts

@@ -1,10 +1,9 @@
-import type { MouseEvent, RefObject, TouchEvent } from "react";
-import type { UseStateInitializer } from "../types.js";
-import type {
-  ClientPositionEvent,
-  ClientPositionOptions,
+import { type MouseEvent, type RefObject, type TouchEvent } from "react";
+import {
+  getClientPosition,
+  type ClientPositionEvent,
+  type ClientPositionOptions,
 } from "../utils/getClientPosition.js";
-import { getClientPosition } from "../utils/getClientPosition.js";
 import { getRangeSteps } from "../utils/getRangeSteps.js";
 import { nearest } from "../utils/nearest.js";
 import { withinRange } from "../utils/withinRange.js";
@@ -66,6 +65,8 @@ interface RelativeDragPositionOptions extends DragPositionOptions {
   min: number;
   max: number;
   step: number;
+  rangeMin: number;
+  rangeMax: number;
 }
 
 /**
@@ -82,7 +83,8 @@ interface RelativeDragPosition {
 export const getRelativeDragPosition = (
   options: RelativeDragPositionOptions
 ): RelativeDragPosition => {
-  const { min, max, step, isRTL, vertical, container } = options;
+  const { min, max, rangeMin, rangeMax, step, isRTL, vertical, container } =
+    options;
 
   const { height, width, left, top } = container.getBoundingClientRect();
   const containerSize = vertical ? height : width;
@@ -98,9 +100,9 @@ export const getRelativeDragPosition = (
     dragPercentage = 1 - dragPercentage;
   }
 
-  const range = max - min;
-  const steps = getRangeSteps({ min, max, step });
-  const value = dragPercentage * range + min;
+  const range = rangeMax - rangeMin;
+  const steps = getRangeSteps({ min: rangeMin, max: rangeMax, step });
+  const value = dragPercentage * range + rangeMin;
   const nextValue = nearest({
     min,
     max,
@@ -123,8 +125,6 @@ interface UpdateDragPositionOptions
   event: ClientPositionEvent;
   nodeRef: RefObject<HTMLElement>;
   focus?: boolean;
-  rangeMin: number;
-  rangeMax: number;
   isDragStart: boolean;
   setValue(value: number): void;
   setDragging(dragging: boolean): void;
@@ -197,8 +197,10 @@ export const updateDragPosition = (
   }
 
   const { value, dragPercentage } = getRelativeDragPosition({
-    min: rangeMin,
-    max: rangeMax,
+    min,
+    max,
+    rangeMin,
+    rangeMax,
     step,
     event,
     isRTL,
@@ -211,42 +213,6 @@ export const updateDragPosition = (
   setDragPercentage(dragPercentage);
 };
 
-/**
- * @internal
- */
-export interface DraggableDefaultValueOptions {
-  min: number;
-  max: number;
-  defaultValue: UseStateInitializer<number> | undefined;
-}
-
-/**
- * @internal
- */
-export function getDraggableDefaultValue(
-  options: DraggableDefaultValueOptions
-): number {
-  const { min, max, defaultValue } = options;
-
-  let value: number;
-  if (typeof defaultValue === "function") {
-    value = defaultValue();
-  } else if (typeof defaultValue === "undefined") {
-    value = Math.ceil((max - min) / 2);
-  } else {
-    value = defaultValue;
-  }
-
-  if (value < min || value > max) {
-    // TODO: Determine if this should just be a `Math.min(Math.max(min, value), max)` instead
-    throw new Error(
-      "useDraggable default value must be between the min and max values"
-    );
-  }
-
-  return value;
-}
-
 /**
  * @internal
  * @remarks \@since 6.0.0

package/src/expansion-panel/__tests__/ExpansionPanel.tsx

@@ -156,7 +156,7 @@ describe("ExpansionPanel", () => {
 
   it("should support preventing all the panels from being closed", async () => {
     const user = userEvent.setup();
-    render(<Test multiple preventAllClosed />);
+    render(<Test multiple preventAllCollapsed />);
     const panel1 = screen.getByRole("button", { name: "Panel 1" });
     const panel2 = screen.getByRole("button", { name: "Panel 2" });
     const panel3 = screen.getByRole("button", { name: "Panel 3" });
@@ -174,7 +174,7 @@ describe("ExpansionPanel", () => {
 
   it("should handle keyboard movement correctly", async () => {
     const user = userEvent.setup();
-    render(<Test preventAllClosed />);
+    render(<Test preventAllCollapsed />);
     const panel1 = screen.getByRole("button", { name: "Panel 1" });
     const panel2 = screen.getByRole("button", { name: "Panel 2" });
     const panel3 = screen.getByRole("button", { name: "Panel 3" });

package/src/expansion-panel/_expansion-panel.scss

@@ -2,6 +2,7 @@
 @use "../transition/transition";
 @use "../icon/icon";
 @use "../button/button";
+@use "../theme/theme";
 
 $disable-everything: false !default;
 $disable-margin-top-transition: false !default;
@@ -12,69 +13,94 @@ $button-spacing: icon.$spacing !default;
 $rotate-from: icon.$rotate-from !default;
 $rotate-to: icon.$rotate-to !default;
 
-@mixin styles {
+$box-shadow-overlay-height: 10px !default;
+$box-shadow-overlay-bottom: -6px !default;
+
+@mixin styles($disable-layer: false) {
   @if not $disable-everything {
-    // does not require custom styles
-    .rmd-expansion-panel {
-      @if not $disable-margin-top-transition and $spacing {
-        &--animate {
-          transition: margin-top transition.$linear-duration;
+    @include utils.optional-layer(expansion-panel, $disable-layer) {
+      // does not require custom styles
+      .rmd-expansion-panel {
+        @if not $disable-margin-top-transition and $spacing {
+          &--animate {
+            transition: margin-top transition.$linear-duration;
+          }
         }
-      }
 
-      @if $spacing {
-        &--expanded + .rmd-expansion-panel {
-          margin-top: $spacing;
+        @if $spacing {
+          &--expanded + .rmd-expansion-panel {
+            margin-top: $spacing;
+          }
         }
-      }
 
-      // once firefox supports the `:has` selector, I can handle most of this in CSS instead of javascript:
-      // &:where(:not(.rmd-expansion-panel--expanded)):has(+ .rmd-expansion-panel) {
-      //   border-bottom-left-radius: 0;
-      //   border-bottom-right-radius: 0;
-      //   position: relative;
+        @if not utils.$disable-has-selectors {
+          // this makes it so that the box-shadow between closed panels is not
+          // visible by covering it in a small overlay of the current
+          // background-color
+          &:where(:not(.rmd-expansion-panel--expanded)):has(
+              + .rmd-expansion-panel
+            ) {
+            position: relative;
+
+            &::after {
+              @include theme.theme-use-var(background-color);
 
-      //   &::after {
-      //     background: #fff;
-      //     bottom: -5px;
-      //     content: "";
-      //     height: 8px;
-      //     left: 0;
-      //     position: absolute;
-      //     right: 0;
-      //     z-index: 1;
-      //   }
+              bottom: $box-shadow-overlay-bottom;
+              content: "";
+              height: $box-shadow-overlay-height;
+              left: 0;
+              position: absolute;
+              right: 0;
+              z-index: 1;
+            }
+          }
+        }
+      }
+
+      // .rmd-expansion-panel__header {
       // }
-    }
 
-    // .rmd-expansion-panel__header {
-    // }
+      .rmd-expansion-panel__button {
+        @if $rotate-from != icon.$rotate-from {
+          @include icon.set-var(rotate-from, $rotate-from);
+        }
 
-    .rmd-expansion-panel__button {
-      @if $rotate-from != icon.$rotate-from {
-        @include icon.set-var(rotate-from, $rotate-from);
-      }
+        @if $rotate-to != icon.$rotate-to {
+          @include icon.set-var(rotate-to, $rotate-to);
+        }
 
-      @if $rotate-to != icon.$rotate-to {
-        @include icon.set-var(rotate-to, $rotate-to);
-      }
+        @if button.$disable-unstyled-utility-class {
+          @include button.unstyled;
+        }
+        @include utils.auto-rtl(text-align, left);
 
-      @if button.$disable-unstyled-utility-class {
-        @include button.unstyled;
-      }
-      @include utils.auto-rtl(text-align, left);
+        align-items: center;
+        color: inherit;
+        font: inherit;
+        gap: $button-spacing;
+        justify-content: space-between;
+        letter-spacing: inherit;
+        padding: $padding;
+        width: 100%;
 
-      align-items: center;
-      color: inherit;
-      font: inherit;
-      gap: $button-spacing;
-      justify-content: space-between;
-      letter-spacing: inherit;
-      padding: $padding;
-      width: 100%;
+        &[aria-disabled="true"] {
+          cursor: auto;
+        }
 
-      &[aria-disabled="true"] {
-        cursor: auto;
+        // need to raise the focus outline z-index so it is above the box-shadow
+        @if not utils.$disable-has-selectors {
+          @if not utils.$disable-focus-visible {
+            &::before {
+              z-index: 2;
+            }
+          } @else {
+            @include utils.keyboard-only {
+              &::before {
+                z-index: 2;
+              }
+            }
+          }
+        }
       }
     }
   }

package/src/expansion-panel/useExpansionPanels.ts

@@ -26,7 +26,7 @@ export interface ExpansionPanelHookOptions {
    *
    * @defaultValue `false`
    */
-  preventAllClosed?: boolean;
+  preventAllCollapsed?: boolean;
 
   /**
    * This is a convenience option to disable the expansion transition for all
@@ -37,7 +37,7 @@ export interface ExpansionPanelHookOptions {
   disableTransition?: boolean;
 
   /**
-   * @defaultValue `preventAllClosed ? ["expansion-panel-" + useId() + "-1"] : []`
+   * @defaultValue `preventAllCollapsed ? ["expansion-panel-" + useId() + "-1"] : []`
    */
   defaultExpandedIds?: UseStateInitializer<string[]>;
 
@@ -71,13 +71,12 @@ export interface ExpansionPanelHookOptions {
 /** @remarks \@since 6.0.0 */
 export type ProvidedExpansionPanelProps = Pick<
   Required<ExpansionPanelProps>,
-  | "id"
   | "disabled"
   | "expanded"
   | "onExpandClick"
   | "disableTransition"
   | "disableContentPadding"
->;
+> & { id?: string };
 
 /**
  * @param indexOrPanelId - This should either be a DOM id to use for the panel
@@ -207,7 +206,7 @@ export function useExpansionPanels(
   const {
     baseId: propBaseId,
     multiple = false,
-    preventAllClosed = false,
+    preventAllCollapsed = false,
     disableTransition = false,
     defaultExpandedIds,
     defaultExpandedIndex,
@@ -219,7 +218,7 @@ export function useExpansionPanels(
   const [expandedIds, setExpandedIds] = useState<ReadonlySet<string>>(() => {
     if (typeof defaultExpandedIds === "undefined") {
       const initialList: string[] = [];
-      if (typeof defaultExpandedIndex === "number" || preventAllClosed) {
+      if (typeof defaultExpandedIndex === "number" || preventAllCollapsed) {
         initialList.push(createId(defaultExpandedIndex ?? 0));
       }
 
@@ -237,13 +236,18 @@ export function useExpansionPanels(
     expandedIds,
     setExpandedIds,
     getPanelProps(indexOrPanelId) {
-      const id =
-        typeof indexOrPanelId === "string"
-          ? indexOrPanelId
-          : createId(indexOrPanelId);
+      let id: string | undefined;
+      let panelId: string;
+      if (typeof indexOrPanelId === "number") {
+        id = createId(indexOrPanelId);
+        panelId = id;
+      } else {
+        panelId = indexOrPanelId;
+      }
 
-      const expanded = expandedIds.has(id);
-      const disabled = expanded && preventAllClosed && expandedIds.size === 1;
+      const expanded = expandedIds.has(panelId);
+      const disabled =
+        expanded && preventAllCollapsed && expandedIds.size === 1;
       return {
         id,
         disabled,
@@ -254,16 +258,16 @@ export function useExpansionPanels(
           }
 
           setExpandedIds((prevIds) => {
-            const expanded = prevIds.has(id);
+            const expanded = prevIds.has(panelId);
             if (!multiple) {
-              return new Set(expanded ? [] : [id]);
+              return new Set(expanded ? [] : [panelId]);
             }
 
             const nextIds = new Set(prevIds);
             if (expanded) {
-              nextIds.delete(id);
+              nextIds.delete(panelId);
             } else {
-              nextIds.add(id);
+              nextIds.add(panelId);
             }
 
             return nextIds;

package/src/form/Form.tsx

@@ -1,3 +1,4 @@
+"use client";
 import { forwardRef, type FormHTMLAttributes } from "react";
 
 const noop = (): void => {
@@ -16,7 +17,7 @@ export interface FormProps extends FormHTMLAttributes<HTMLFormElement> {
 }
 
 /**
- * **Server Component**
+ * **Client Component**
  *
  * This is probably one of the least useful components available as it doesn't
  * do much styling or logic. All this form component will do is add basic flex

package/src/form/Label.tsx

@@ -6,11 +6,11 @@ import { type LabelClassNameOptions, type LabelProps } from "./types.js";
 
 declare module "react" {
   interface CSSProperties {
-    "--rmd-form-label-floating-top"?: string | number;
-    "--rmd-form-label-left-offset"?: string | number;
-    "--rmd-form-label-top-offset"?: string | number;
-    "--rmd-form-label-active-padding"?: string | number;
-    "--rmd-form-label-active-background-color"?: string;
+    "--rmd-label-floating-top"?: string | number;
+    "--rmd-label-left-offset"?: string | number;
+    "--rmd-label-top-offset"?: string | number;
+    "--rmd-label-active-padding"?: string | number;
+    "--rmd-label-active-background-color"?: string;
   }
 }
 

package/src/form/MenuItemInputToggle.tsx

@@ -11,11 +11,11 @@ import { ListItem } from "../list/ListItem.js";
 import {
   type ListItemAddonPosition,
   type ListItemAddonType,
+  type ListItemChildrenTextProps,
   type ListItemHeight,
 } from "../list/types.js";
 import { type PropsWithRef } from "../types.js";
 import { useEnsuredId } from "../useEnsuredId.js";
-import { bem } from "../utils/bem.js";
 import {
   type IndeterminateCheckboxProps,
   type InputToggleIconProps,
@@ -23,31 +23,16 @@ import {
 import { InputToggleIcon } from "./InputToggleIcon.js";
 import { SwitchTrack } from "./SwitchTrack.js";
 import { type InputToggleSize } from "./inputToggleStyles.js";
+import {
+  menuItemInputToggle,
+  menuItemInputToggleBall,
+  menuItemInputToggleIcon,
+  menuItemInputToggleTrack,
+} from "./menuItemInputToggleStyles.js";
 
 const noop = (): void => {
   // do nothing
 };
-const styles = bem("rmd-menu-item-input-toggle");
-
-/** @remarks \@since 6.0.0 */
-export interface MenuItemInputToggleClassNameOptions {
-  className?: string;
-  type: "radio" | "checkbox" | "switch";
-}
-
-/**
- * @remarks \@since 6.0.0
- */
-export function menuItemInputToggle(
-  options: MenuItemInputToggleClassNameOptions
-): string {
-  const { className, type } = options;
-  return cnb(
-    `rmd-${type}-menu-item`,
-    styles({ switch: type === "switch" }),
-    className
-  );
-}
 
 /**
  * @remarks \@since 6.0.0
@@ -60,7 +45,8 @@ export type MenuItemInputToggleCheckedCallback = (
 /** @remarks \@since 2.8.0 */
 export interface BaseMenuItemInputToggleProps
   extends HTMLAttributes<HTMLLIElement>,
-    InputToggleIconProps {
+    InputToggleIconProps,
+    ListItemChildrenTextProps {
   checked: boolean;
   onCheckedChange: MenuItemInputToggleCheckedCallback;
 
@@ -95,12 +81,6 @@ export interface BaseMenuItemInputToggleProps
   /** @defaultValue `"auto"` */
   height?: ListItemHeight;
 
-  /** @defaultValue `false` */
-  threeLines?: boolean;
-
-  /** @defaultValue `false` */
-  disableTextChildren?: boolean;
-
   /** @defaultValue `false` */
   iconAfter?: boolean;
 
@@ -199,41 +179,43 @@ export const MenuItemInputToggle = forwardRef<
   const id = useEnsuredId(propId, "menu-item");
 
   let icon = propIcon;
-  if (typeof propIcon === "undefined") {
-    if (type === "switch") {
-      icon = (
-        <SwitchTrack
-          style={trackStyle}
-          {...trackProps}
-          className={cnb(
-            styles("track"),
-            trackClassName,
-            trackProps?.className
-          )}
-          active={checked}
-          ballProps={ballProps}
-          ballStyle={ballStyle}
-          ballClassName={cnb(styles("ball"), ballClassName)}
-        />
-      );
-    } else {
-      icon = (
-        <InputToggleIcon
-          style={iconStyle}
-          disableEm
-          {...iconProps}
-          className={cnb(styles("icon"), iconClassName, iconProps?.className)}
-          size={size}
-          type={type}
-          checked={checked}
-          disabled={disabled}
-          icon={propIcon}
-          checkedIcon={checkedIcon}
-          indeterminate={indeterminate}
-          indeterminateIcon={indeterminateIcon}
-        />
-      );
-    }
+  if (type === "switch") {
+    icon = (
+      <SwitchTrack
+        style={trackStyle}
+        {...trackProps}
+        className={cnb(
+          menuItemInputToggleTrack(),
+          trackClassName,
+          trackProps?.className
+        )}
+        active={checked}
+        ballProps={ballProps}
+        ballStyle={ballStyle}
+        ballClassName={cnb(menuItemInputToggleBall(), ballClassName)}
+      />
+    );
+  } else {
+    icon = (
+      <InputToggleIcon
+        style={iconStyle}
+        disableEm
+        {...iconProps}
+        className={cnb(
+          menuItemInputToggleIcon(),
+          iconClassName,
+          iconProps?.className
+        )}
+        size={size}
+        type={type}
+        checked={checked}
+        disabled={disabled}
+        icon={propIcon}
+        checkedIcon={checkedIcon}
+        indeterminate={indeterminate}
+        indeterminateIcon={indeterminateIcon}
+      />
+    );
   }
 
   let leftAddon: ReactNode;

package/src/form/NativeSelect.tsx

@@ -15,12 +15,15 @@ import { getFormConfig } from "./formConfig.js";
 import { nativeSelect, nativeSelectContainer } from "./nativeSelectStyles.js";
 import {
   type FormFieldOptions,
-  type UserAgentAutoCompleteProps,
+  type UserAgentAutocompleteProps,
 } from "./types.js";
 
+/**
+ * @remarks \@since 6.0.0 Added support for {@link UserAgentAutocompleteProps}
+ */
 export interface NativeSelectProps
-  extends SelectHTMLAttributes<HTMLSelectElement>,
-    UserAgentAutoCompleteProps,
+  extends Omit<SelectHTMLAttributes<HTMLSelectElement>, "autoComplete">,
+    UserAgentAutocompleteProps,
     FormFieldOptions {
   /**
    * A custom dropdown icon to use instead of the browser's default select