@react-md/core 1.0.0-next.0 → 1.0.0-next.10

package/src/divider/_divider.scss

@@ -7,9 +7,8 @@ $disable-everything: false !default;
 $disable-vertical: false !default;
 $disable-inset: false !default;
 
-$size: 0.0625rem !default;
-// this is doubled since the `hr` element applies the size for border top and bottom
-$vertical-size: $size * 2 !default;
+$size: 0.0625em !default;
+$border-size: $size * 2 !default;
 $max-size: 100% !default;
 $inset: 4rem !default;
 $spacing: 0.25rem auto !default;
@@ -20,57 +19,29 @@ $dark-theme-color: rgba(colors.$white, 0.12) !default;
 
 $color: theme.get-default-color($light-theme-color, $dark-theme-color) !default;
 
-$var-lookup: (
-  size: (
-    var: --rmd-divider-size,
-    value: $size,
-  ),
-  vertical-size: (
-    var: --rmd-divider-vertical-size,
-    value: $vertical-size,
-  ),
-  color: (
-    var: --rmd-divider-color,
-    value: $color,
-  ),
-  spacing: (
-    var: --rmd-divider-spacing,
-    value: $spacing,
-  ),
-  vertical-spacing: (
-    var: --rmd-divider-vertical-spacing,
-    value: $vertical-spacing,
-  ),
-  inset: (
-    var: --rmd-divider-inset,
-    value: $inset,
-  ),
-  width: (
-    var: --rmd-divider-width,
-    value: $max-size,
-  ),
-  max-size: (
-    var: --rmd-divider-max-size,
-    value: $max-size,
-  ),
+$variables: (
+  size,
+  border-size,
+  color,
+  spacing,
+  vertical-spacing,
+  inset,
+  max-size
 );
 
 @function get-var($name, $fallback: null) {
-  $found: utils.validate($var-lookup, $name, "divider var");
-  $var: map.get($found, var);
-  $value: if($fallback, $fallback, map.get($found, value));
-
-  @if $value {
-    @return var(#{$var}, #{$value});
+  $var: utils.get-var-name($variables, $name, "divider");
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
   }
 
   @return var(#{$var});
 }
 
 @mixin set-var($name, $value) {
-  $var: map.get(utils.validate($var-lookup, $name, "divider var"), var);
-
-  #{$var}: #{$value};
+  @if $value {
+    #{utils.get-var-name($variables, $name, "divider")}: #{$value};
+  }
 }
 
 @mixin use-var($property, $name: $property, $fallback: null) {
@@ -89,43 +60,63 @@ $var-lookup: (
   }
 }
 
-@mixin border-style($position) {
-  $property: "border-#{$position}";
+@mixin border-style($position: null) {
+  $property: if(not $position, border, "border-#{$position}");
+  $var-name: if(not $position, size, border-size);
 
-  #{$property}: get-var(size) solid get-var(color);
+  #{$property}: get-var($var-name) solid get-var(color);
 }
 
-@mixin styles {
+@mixin variables {
   @if not $disable-everything {
-    @include theme.default-system-theme {
-      @include use-dark-theme;
+    @include set-var(size, $size);
+    @include set-var(border-size, $border-size);
+    @include set-var(color, $color);
+    @include set-var(spacing, $spacing);
+    @include set-var(max-size, $max-size);
+
+    @if not $disable-inset {
+      @include set-var(inset, $inset);
     }
 
-    .rmd-divider {
-      @include use-var(margin, spacing);
-      @include use-var(width);
+    @if not $disable-vertical {
+      @include set-var(vertical-spacing, $vertical-spacing);
+    }
+  }
+}
+
+@mixin styles($disable-layer: false) {
+  @if not $disable-everything {
+    @include utils.optional-layer(divider, $disable-layer) {
+      @include theme.default-system-theme {
+        @include use-dark-theme;
+      }
+
+      .rmd-divider {
+        @include use-var(margin, spacing);
+        @include use-var(width, max-size);
 
-      border: get-var(size) solid get-var(color);
-      display: block;
-      flex-shrink: 0;
+        border: get-var(size) solid get-var(color);
+        display: block;
+        flex-shrink: 0;
 
-      @if not $disable-inset {
-        &--inset {
-          @include utils.auto-rtl(margin-left, get-var(inset), auto);
+        @if not $disable-inset {
+          &--inset {
+            @include utils.auto-rtl(margin-left, get-var(inset), auto);
 
-          width: calc(get-var(max-size) - get-var(inset));
+            width: calc(get-var(max-size) - get-var(inset));
+          }
         }
-      }
 
-      @if not $disable-vertical {
-        &--vertical {
-          @include border-style(left);
-          @include use-var(height, max-size);
-          @include use-var(width, vertical-size);
-          @include use-var(margin, vertical-spacing);
+        @if not $disable-vertical {
+          &--vertical {
+            @include border-style(left);
+            @include use-var(height, max-size);
+            @include use-var(width, size);
+            @include use-var(margin, vertical-spacing);
 
-          border-bottom: 0;
-          display: inline-block;
+            display: inline-block;
+          }
         }
       }
     }

package/src/draggable/__tests__/useDraggable.tsx

@@ -7,7 +7,7 @@ import {
   type ReactElement,
   type Ref,
 } from "react";
-import { fireEvent, rmdRender } from "../../test-utils/index.js";
+import { fireEvent, rmdRender, screen } from "../../test-utils/index.js";
 
 import { Button } from "../../button/Button.js";
 import { WritingDirectionProvider } from "../../typography/WritingDirectionProvider.js";
@@ -89,7 +89,7 @@ describe("useDraggable", () => {
     const onMouseMove = jest.fn();
     const onMouseUp = jest.fn();
 
-    const { getByRole } = rmdRender(
+    rmdRender(
       <Test
         onMouseUp={onMouseUp}
         onMouseDown={onMouseDown}
@@ -97,7 +97,7 @@ describe("useDraggable", () => {
       />
     );
 
-    const button = getByRole("button");
+    const button = screen.getByRole("button");
     expect(onMouseDown).not.toHaveBeenCalled();
     expect(onMouseMove).not.toHaveBeenCalled();
     expect(onMouseUp).not.toHaveBeenCalled();
@@ -175,9 +175,9 @@ describe("useDraggable", () => {
   });
 
   it("should not start dragging if any of meta keys are pressed", () => {
-    const { getByRole } = rmdRender(<Test />);
+    rmdRender(<Test />);
 
-    const button = getByRole("button");
+    const button = screen.getByRole("button");
     expect(button).toHaveAttribute("aria-valuenow", "50");
 
     fireEvent.mouseDown(button, { button: 1, clientX: 50 });
@@ -212,9 +212,9 @@ describe("useDraggable", () => {
 
     const onKeyDown = jest.fn();
 
-    const { getByRole } = rmdRender(<Test onKeyDown={onKeyDown} />);
+    rmdRender(<Test onKeyDown={onKeyDown} />);
 
-    const button = getByRole("button");
+    const button = screen.getByRole("button");
     expect(onKeyDown).not.toHaveBeenCalled();
     expect(button).toMatchSnapshot();
     expect(button).toHaveAttribute("aria-valuenow", "50");
@@ -261,11 +261,9 @@ describe("useDraggable", () => {
     const onTouchStart = jest.fn();
     const onTouchMove = jest.fn();
 
-    const { getByRole } = rmdRender(
-      <Test onTouchStart={onTouchStart} onTouchMove={onTouchMove} />
-    );
+    rmdRender(<Test onTouchStart={onTouchStart} onTouchMove={onTouchMove} />);
 
-    const button = getByRole("button");
+    const button = screen.getByRole("button");
     expect(onTouchStart).not.toHaveBeenCalled();
     expect(onTouchMove).not.toHaveBeenCalled();
     expect(button).toMatchSnapshot();
@@ -297,14 +295,14 @@ describe("useDraggable", () => {
 
   it("should allow a ref to be merged", () => {
     const ref = createRef<HTMLButtonElement>();
-    const { getByRole } = rmdRender(<Test nodeRef={ref} />);
-    const button = getByRole("button");
+    rmdRender(<Test nodeRef={ref} />);
+    const button = screen.getByRole("button");
     expect(ref.current).toBe(button);
   });
 
   it("should never trigger the event handlers when disabled", () => {
-    const { getByRole } = rmdRender(<Test disabled />);
-    const button = getByRole("button");
+    rmdRender(<Test disabled />);
+    const button = screen.getByRole("button");
     expect(button).toHaveAttribute("aria-valuenow", "50");
     fireEvent.mouseDown(button, { button: 0 });
     fireEvent.mouseMove(button);
@@ -323,7 +321,7 @@ describe("useDraggable", () => {
   });
 
   it("should support dragging when RTL is enabled", () => {
-    const { getByRole } = rmdRender(<Test />, {
+    rmdRender(<Test />, {
       wrapper: ({ children }) => (
         <WritingDirectionProvider defaultDir="rtl">
           {children}
@@ -331,7 +329,7 @@ describe("useDraggable", () => {
       ),
     });
 
-    const button = getByRole("button");
+    const button = screen.getByRole("button");
     expect(button).toHaveAttribute("aria-valuenow", "50");
     fireEvent.mouseDown(button, { button: 0 });
     fireEvent.mouseMove(button);
@@ -340,9 +338,9 @@ describe("useDraggable", () => {
   });
 
   it("should support vertical dragging", () => {
-    const { getByRole } = rmdRender(<Test vertical />);
+    rmdRender(<Test vertical />);
 
-    const button = getByRole("button");
+    const button = screen.getByRole("button");
     expect(button).toHaveAttribute("aria-valuenow", "50");
     fireEvent.mouseDown(button, { button: 0 });
     fireEvent.mouseMove(button);
@@ -354,11 +352,9 @@ describe("useDraggable", () => {
   });
 
   it("should allow the dragging class names to be disabled", () => {
-    const { rerender, getByRole } = rmdRender(
-      <Test disableDraggingClassName />
-    );
+    const { rerender } = rmdRender(<Test disableDraggingClassName />);
 
-    const button = getByRole("button");
+    const button = screen.getByRole("button");
     fireEvent.mouseDown(button, { button: 0 });
     fireEvent.mouseMove(button);
     fireEvent.mouseMove(window, { clientX: 60 });
@@ -372,21 +368,21 @@ describe("useDraggable", () => {
   });
 
   it("should allow the default value to be a function", () => {
-    const { getByRole } = rmdRender(<Test defaultValue={() => 0} />);
-    const button = getByRole("button");
+    rmdRender(<Test defaultValue={() => 0} />);
+    const button = screen.getByRole("button");
     expect(button).toHaveAttribute("aria-valuenow", "0");
   });
 
   it("should allow the default value to be a number", () => {
-    const { getByRole } = rmdRender(<Test defaultValue={12} />);
-    const button = getByRole("button");
+    rmdRender(<Test defaultValue={12} />);
+    const button = screen.getByRole("button");
     expect(button).toHaveAttribute("aria-valuenow", "12");
   });
 
   it("should allow for a custom increment step", () => {
-    const { getByRole } = rmdRender(<Test step={10} />);
+    rmdRender(<Test step={10} />);
 
-    const button = getByRole("button");
+    const button = screen.getByRole("button");
     expect(button).toHaveAttribute("aria-valuenow", "50");
 
     fireEvent.keyDown(button, { key: "ArrowRight" });
@@ -397,9 +393,9 @@ describe("useDraggable", () => {
   });
 
   it("should automatically update the value if the min, max, or step options change", () => {
-    const { getByRole, rerender } = rmdRender(<Test step={10} />);
+    const { rerender } = rmdRender(<Test step={10} />);
 
-    const button = getByRole("button");
+    const button = screen.getByRole("button");
     expect(button).toHaveAttribute("aria-valuenow", "50");
 
     rerender(<Test step={10} min={10} max={30} />);
@@ -450,13 +446,13 @@ describe("useDraggable", () => {
       );
     }
 
-    const { getByRole } = rmdRender(<Test />);
+    rmdRender(<Test />);
 
-    const button = getByRole("button", { name: "Button" });
-    const minimum = getByRole("button", { name: "Minimum" });
-    const maximum = getByRole("button", { name: "Maximum" });
-    const increment = getByRole("button", { name: "Increment" });
-    const decrement = getByRole("button", { name: "Decrement" });
+    const button = screen.getByRole("button", { name: "Button" });
+    const minimum = screen.getByRole("button", { name: "Minimum" });
+    const maximum = screen.getByRole("button", { name: "Maximum" });
+    const increment = screen.getByRole("button", { name: "Increment" });
+    const decrement = screen.getByRole("button", { name: "Decrement" });
     expect(button).toMatchSnapshot();
     expect(button).toHaveAttribute("aria-valuenow", "20");
 
@@ -522,9 +518,9 @@ describe("useDraggable", () => {
       );
     }
 
-    const { getByRole } = rmdRender(<Test />);
+    rmdRender(<Test />);
 
-    const button = getByRole("button");
+    const button = screen.getByRole("button");
     expect(localStorage.getItem("test")).toBe("50");
 
     fireEvent.mouseDown(button, { button: 0 });

package/src/draggable/_draggable.scss

@@ -1,23 +1,27 @@
+@use "../utils";
+
 $disable-everything: false !default;
 $disable-horizontal: false !default;
 $disable-vertical: false !default;
 
-@mixin styles {
+@mixin styles($disable-layer: false) {
   @if not $disable-everything {
-    .rmd-dragging {
-      * {
-        pointer-events: none;
-      }
+    @include utils.optional-layer(draggable, $disable-layer) {
+      .rmd-dragging {
+        * {
+          pointer-events: none;
+        }
 
-      @if not $disable-horizontal {
-        &--h {
-          cursor: col-resize;
+        @if not $disable-horizontal {
+          &--h {
+            cursor: col-resize;
+          }
         }
-      }
 
-      @if not $disable-vertical {
-        &--v {
-          cursor: row-resize;
+        @if not $disable-vertical {
+          &--v {
+            cursor: row-resize;
+          }
         }
       }
     }

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